jueves, 2 de octubre de 2014
DIA SETENTA Y OCHO 02/10/2014
Hoy hemos dedicado el día a todas aquellas actividades que tenemos de profundización y refuerzo. En mi caso, se trata de una galería de fotos y de la página de error 404. Por el momento, he conseguido integrar la galería, primeramente gracias a un programa gratuito y, tras esto, probé a buscar el código pertinente. He encontrado uno que usaba java (realmente como casi todos) y lo he añadido gracias a un archivo externo. No me he molestado mucho ni en el diseño ni en la usabilidad de la página porque la he hecho meramente para probar a integrar la galería. En diseño gráfico acabé ya el cartel de halloween y la profesora me propuso ofrecer diseños de carteles a distintos establecimientos que vayan a hacer fiestas y no me pareció mala idea, quizás me anime.
miércoles, 1 de octubre de 2014
DIA SENTENTA Y SIETE 1/10/2014
Hoy nos hemos dedicado a los trabajos de profundización y refuerzo que nos adjudicó individualmente el profesor. En diseño proseguimos con el cartel y, tras elaborar dos variantes del mismo, lo di por finalizado y me dispuse a proseguir con el de halloween. El resto del día, desde el descanso, tuvimos asamblea.
martes, 30 de septiembre de 2014
DIA SETENTA Y SEIS 30/09/2014
Hoy hemos tenido las jornadas de medio ambiente. Según llegamos, vimos un documental acerca del cambio climático, posteriormente hablamos cada uno de lo que más nos había llamado la atención. En la hora de diseño gráfico seguimos con los carteles y, personalmente, el proyecto del que nos hablaron lo tengo prácticamente terminado. Tras la hora de diseño, y siguiendo con la formación sobre medio ambiente, hicimos un trabajo de investigación por grupos. Nos dividimos en tres grupos, uno encargado de los orígenes del cambio climático (que resultó ser el nuestro), otro encargado de las consecuencias y, finalmente, el otro encargado de las medidas que han tomado las distintas organizaciones, paísses y gobiernos. Tras poner todos los datos en común, y para finalizar, tuvimos un debate acerca del tema.
Éste fue nuestro informe:
-Actividad volcánica
Los volcanes emiten dos gases que pueden tener un impacto en la temperatura global – dióxido de azufre y dióxido de carbono (CO2). Cada uno de ellos tienen efectos muy diferentes y actúa en escalas de tiempo diferentes:
Las manchas son el lugar de fuertes campos magnéticos. La razón por la cual las manchas solares son frías no se entiende todavía, pero una posibilidad es que el campo magnético en las manchas no permite la convección debajo de ellas.
Las manchas solares generalmente crecen y duran desde varios días hasta varios meses. Las observaciones de las manchas solares reveló primero que el Sol rota en un período de 27 días (visto desde la Tierra).
El número de manchas solares en el Sol no es constante, y cambia en un período de 11 años conocido como el ciclo solar. La actividad solar está directamente relacionada con este ciclo.
Las protuberancias solares son enormes chorros de gas caliente
expulsados desde la superficie del Sol, que se extienden a muchos
miles de kilómetros. Las mayores llamaradas pueden durar varios
meses.
El campo magnético del Sol desvía algunas protuberancias que forman así un gigantesco arco. Se producen en la cromosfera que está a unos 100.000 grados de temperatura.
Las protuberancias son fenómenos espectaculares. Aparecen en el limbo del Sol como nubes flamantes en la alta atmósfera y corona inferior y están constituidas por nubes de materia a temperatura más baja y densidad más alta que la de su alrededor.
Las temperaturas en su parte central son, aproximadamente, una centésima parte de la temperatura de la corona, mientras que su densidad es unas 100 veces la de la corona ambiente. Por lo tanto, la presión del gas dentro de una protuberancia es aproximadamente igual a la de su alrededor.
Viento Solar:
El viento solar es un flujo de partículas cargadas, principalmente protones y electrones, que escapan de la atmósfera externa del sol a altas velocidades y penetran en el Sistema Solar. Algunas de estas partículas cargadas quedan atrapadas en el campo magnético terrestre girando en espiral a lo largo de las líneas de fuerza de uno a otro polo magnético. Las auroras boreales y australes son el resultado de las interacciones de estas partículas con las moléculas de aire.
La velocidad del viento solar es de cerca de 400 kilómetros por segundo en las cercanías de la órbita de la Tierra. El punto donde el viento solar se encuentra que proviene de otras estrellas se llama heliopausa, y es el límite teórico del Sistema Solar. Se encuentra a unas 100 UA del Sol. El espacio dentro del límite de la heliopausa, conteniendo al Sol y al sistema solar, se denomina heliosfera.
-Causas humanas del cambio climático
Las actividades humanas contribuyen al cambio climático provocando cambios en la atmósfera terrestre en cuanto a las cantidades de gases de efecto invernadero, aerosoles (partículas pequeñas) y la nubosidad. La mayor contribución conocida proviene de la combustión de combustibles fósiles, que libera el gas de dióxido de carbono a la atmósfera.
Los gases de efecto invernadero y los aerosoles afectan al clima al alterar la radiación solar entrante y la radiación (térmica) infrarroja saliente, que forman parte del equilibrio energético de la Tierra. La variación de la abundancia de la atmósfera o las propiedades de estos gases y partículas, puede conducir a un calentamiento o enfriamiento del sistema climático. Desde el comienzo de la era industrial (alrededor de 1750), el efecto general de las actividades humanas sobre el clima ha sido provocar el calentamiento.
¿Qué sectores generan mayor cantidad de GEI?
Éste fue nuestro informe:
CAUSAS Y ORÍGENES DEL CAMBIO
CLIMÁTICO:
-Movimiento de los continentes:
Los impactos del cambio climático ya
son visibles en todos los continentes.
El último informe del Panel
Intergubernamental de Expertos sobre el Cambio Climático (IPCC), que
oficialmente se divulgará el próximo lunes en Japón, constata que
los impactos del calentamiento global ya son visibles en todos los
continentes y traza un negro panorama si no se actúa a tiempo. Los
autores del informe dicen tener el doble de información que antes, y
que la amenaza es "consistente"El borrador final, que se
discute esta semana en la ciudad japonesa de Yokohama, corresponde al
Grupo II del IPCC, encargado de estudiar los impactos del cambio
climático y las posibilidades de adaptación. En esta ocasión, sus
centenares de autores han dispuesto del más del doble de información
que entre 2005 y 2010, lo que les permite afirmar que su trabajo se
asienta sobre una gran "consistencia" para la adopción de
políticas adecuadas. Es uno de los textos más importantes del
quinto informe general de este Panel de la ONU, la red científica
más extensa del mundo dedicada a este fenómeno global, y una pieza
clave en las negociaciones de las próximas cumbres de cambio
climático. Bajo el título "¿Cuáles son los impactos del
cambio climático y cómo podemos gestionar los riesgos?", el
borrador asegura que los cambios derivados del ascenso de las
temperaturas en el planeta "ya son visibles en todos los
continentes y en la mayor parte de los océanos". El anterior
informe del Grupo I, responsable de las cuestiones científicas,
divulgado en 2013, concluyó que nunca antes se ha sabido de modo tan
inequívoco que la actividad humana es la mayor responsable de esta
situación.
La temperatura media ha subido 0,85 grados entre 1880 y 2012, un aumento que se ha acentuado en las últimas tres décadas. Según este último informe, basado en miles de estudios, muchas regiones del globo están experimentando con mayor frecuencia fenómenos extremos como sequías y olas de calor, junto a graves impactos sobre la salud, las cosechas y los hábitats. Sobre este último punto, explica que si la temperatura sube un grado o más, disminuirá la producción trigo, maíz y arroz en las zonas templadas y tropicales, alrededor de un 2 % por década hasta final de siglo.
La temperatura media ha subido 0,85 grados entre 1880 y 2012, un aumento que se ha acentuado en las últimas tres décadas. Según este último informe, basado en miles de estudios, muchas regiones del globo están experimentando con mayor frecuencia fenómenos extremos como sequías y olas de calor, junto a graves impactos sobre la salud, las cosechas y los hábitats. Sobre este último punto, explica que si la temperatura sube un grado o más, disminuirá la producción trigo, maíz y arroz en las zonas templadas y tropicales, alrededor de un 2 % por década hasta final de siglo.
Los volcanes emiten dos gases que pueden tener un impacto en la temperatura global – dióxido de azufre y dióxido de carbono (CO2). Cada uno de ellos tienen efectos muy diferentes y actúa en escalas de tiempo diferentes:
- Dióxido de azufre– Cuando este gas es emitido a altitudes elevadas (alrededor de 16.000 m o superior) penetra en la estratosfera. Aquí se pueden formar gotas de ácido que parcialmente se dispersan y reflejan la luz del sol lejos de la Tierra, que enfría la superficie. Estas gotas tienen un impacto bastante inmediato y, en cantidad suficiente, pueden enfriar el clima durante unos meses – o incluso un año o dos – pero luego las gotas caen de la estratosfera y vuelven las cosas a la normalidad.
- CO2– Sabemos que este es un gas de efecto invernadero, así que cuando se emite en cantidades suficientemente grandes, podría tener un impacto en el calentamiento de nuestro clima. El CO2 dura en la atmósfera alrededor de 100 años, por lo que cualquier impacto se dejará sentir durante un largo período de tiempo.
-Las corrientes oceánicas:
Una "corriente oceánica" o
"corriente marina" es un movimiento superficial de las
aguas de los océanos y en menor grado, de los mares más extensos.
Estas corrientes tienen multitud de causas, principalmente, el
movimiento de rotación terrestre y por los vientos constantes o
planetarios, así como la configuración de las costas y la ubicación
de los continentes.
Las corrientes oceánicas, o marinas,
son factores reguladores del clima que actúan como moderador,
suavizando las temperaturas de regiones como Europa y las costas
occidentales de Canadá y Alaska.
La climatología ha establecido
nítidamente los límites térmicos de los distintos tipos climáticos
que se han mantenido a través de todo ese tiempo.
No se habla tanto de los límites
pluviométricos de dicho clima porque los cultivos mediterráneos
tradicionales son ayudados por el regadío y cuando se trata de
cultivos de secano, se presentan en parcelas más o menos planas con
el fin de hacer más efectivas las lluvias propiciando la
infiltración en el suelo. Además los cultivos típicos del matorral
mediterráneo están adaptados a cambios meteorológicos mucho más
intensos que los que se han registrado en los últimos tiempos: si no
fuera así, los mapas de los distintos tipos climáticos tendrían
que rehacerse: un aumento de unos 2 grados celsius.
En la cuenca del mediterráneo
significaría la posibilidad de aumentar la latitud de muchos
cultivos unos 200 km más al norte.
Temperatura del agua en la
Corriente del Golfo.
-Actividad solar:
Manchas Solares:
Las manchas solares tienen una parte central obscura conocida como umbra, rodeada de una región más clara llamada penumbra. Las manchas solares son obscuras ya que son más frías que la fotosfera que las rodea.Las manchas son el lugar de fuertes campos magnéticos. La razón por la cual las manchas solares son frías no se entiende todavía, pero una posibilidad es que el campo magnético en las manchas no permite la convección debajo de ellas.
Las manchas solares generalmente crecen y duran desde varios días hasta varios meses. Las observaciones de las manchas solares reveló primero que el Sol rota en un período de 27 días (visto desde la Tierra).
El número de manchas solares en el Sol no es constante, y cambia en un período de 11 años conocido como el ciclo solar. La actividad solar está directamente relacionada con este ciclo.
Protuberancias Solares:
El campo magnético del Sol desvía algunas protuberancias que forman así un gigantesco arco. Se producen en la cromosfera que está a unos 100.000 grados de temperatura.
Las protuberancias son fenómenos espectaculares. Aparecen en el limbo del Sol como nubes flamantes en la alta atmósfera y corona inferior y están constituidas por nubes de materia a temperatura más baja y densidad más alta que la de su alrededor.
Las temperaturas en su parte central son, aproximadamente, una centésima parte de la temperatura de la corona, mientras que su densidad es unas 100 veces la de la corona ambiente. Por lo tanto, la presión del gas dentro de una protuberancia es aproximadamente igual a la de su alrededor.
Viento Solar:
El viento solar es un flujo de partículas cargadas, principalmente protones y electrones, que escapan de la atmósfera externa del sol a altas velocidades y penetran en el Sistema Solar. Algunas de estas partículas cargadas quedan atrapadas en el campo magnético terrestre girando en espiral a lo largo de las líneas de fuerza de uno a otro polo magnético. Las auroras boreales y australes son el resultado de las interacciones de estas partículas con las moléculas de aire.
La velocidad del viento solar es de cerca de 400 kilómetros por segundo en las cercanías de la órbita de la Tierra. El punto donde el viento solar se encuentra que proviene de otras estrellas se llama heliopausa, y es el límite teórico del Sistema Solar. Se encuentra a unas 100 UA del Sol. El espacio dentro del límite de la heliopausa, conteniendo al Sol y al sistema solar, se denomina heliosfera.
-Causas humanas del cambio climático
Las actividades humanas contribuyen al cambio climático provocando cambios en la atmósfera terrestre en cuanto a las cantidades de gases de efecto invernadero, aerosoles (partículas pequeñas) y la nubosidad. La mayor contribución conocida proviene de la combustión de combustibles fósiles, que libera el gas de dióxido de carbono a la atmósfera.
Los gases de efecto invernadero y los aerosoles afectan al clima al alterar la radiación solar entrante y la radiación (térmica) infrarroja saliente, que forman parte del equilibrio energético de la Tierra. La variación de la abundancia de la atmósfera o las propiedades de estos gases y partículas, puede conducir a un calentamiento o enfriamiento del sistema climático. Desde el comienzo de la era industrial (alrededor de 1750), el efecto general de las actividades humanas sobre el clima ha sido provocar el calentamiento.
Gases de efecto invernadero
Las actividades humanas traen como
consecuencia la emisión de cuatro gases de efecto invernadero
principales: dióxido de carbono (CO2), metano (CH4), óxido nitroso
(N2O) y los halocarbonos (grupo de gases que contienen flúor, cloro
y bromo). Estos gases se acumulan en la atmósfera, provocando un
incremento de sus concentraciones con el paso del tiempo. En la era
industrial se han producido incrementos significativos de todos estos
gases
• El dióxido de carbono ha aumentado
debido al uso de combustibles en el transporte, los sistemas de
calefacción y aire acondicionado de edificaciones, la producción de
cemento y otros bienes. Con la deforestación se libera CO2 y se
reduce la absorción de CO2 de las plantas.
• El metano ha aumentado como
resultado de las actividades humanas relacionadas con la agricultura,
la distribución del gas natural y los vertederos.
• Como resultado de las actividades
humanas se emite también el óxido nitroso con el uso de
fertilizantes y la quema de combustibles fósiles.
• Las concentraciones de halocarbonos
han aumentado básicamente debido a las actividades humanas.
Entre los halocarbonos principales se incluyen los
Clorofluorocarbonos (como CFC- 11 y CFC- 12), que se utilizaban
extensivamente como agentes de refrigeración y en otros procesos
industriales antes de que se conociese que su presencia en la
atmósfera causara el agotamiento del ozono en estratosfera .
• El ozono es un gas de efecto
invernadero que se produce y destruye continuamente en la atmósfera
debido a reacciones químicas. En la troposfera, ha aumentado la
concentración de ozono como resultado de las actividades humanas en
las que se liberan gases tales como monóxido de carbono,
hidrocarburos y óxido de nitrógeno, que reaccionan químicamente
produciendo el ozono. Como se menciona anteriormente, los
halocarbonos liberados como consecuencia de las actividades humanas
destruyen el ozono en la estratosfera y han abierto el hueco de ozono
sobre la Antártida.
• El vapor de agua es el gas de
efecto invernadero más abundante e importante presente en la
atmósfera. Sin embargo, las actividades humanas tienen sólo una
pequeña influencia directa respecto de la cantidad de vapor de agua
en la atmósfera . De manera indirecta, los seres humanos
tienen la capacidad de incidir sustancialmente sobre el vapor de agua
y cambiar el clima. Por ejemplo, una atmósfera más cálida contiene
más vapor de agua. Las actividades humanas también influyen en el
vapor de agua a través de las emisiones de CH4, debido a que este
último sufre una destrucción química en la estratosfera,
produciendo así una cantidad pequeña de vapor de agua.
• Los aerosoles contienen compuestos
que se producen de forma natural y otros que son emitidos como
resultado de las actividades humanas. La quema de combustibles
fósiles y de biomasa ha incrementado el por ciento de aerosoles que
contienen compuestos de azufre, compuestos orgánicos y carbón negro
(hollín). Las actividades humanas tales como la explotación minera
a cielo abierto y los procesos industriales han incrementado las
cantidades de polvo en la atmósfera.
¿Qué sectores generan mayor cantidad de GEI?
lunes, 29 de septiembre de 2014
DIA SETENTA Y CINCO 29/09/2014
Hoy durante casi toda la mañana hemos estado presentando las distintas páginas a los compañeros con la correspondiente nota de validación. Por lo demás, en diseño gráfico, a parte de seguir con los carteles, se nos ha presentado un nuevo proyecto de la propia Escuela Taller, para el cual tendremos plazo para finalizarlo hasta el viernes de esta semana.
domingo, 28 de septiembre de 2014
DIA SETENTA Y CUATRO 26/09/2014
Hoy estuvimos toda la mañana de prueba de validación, ya las últimas horas. Yo acabé por fín y, aunque no nos valida hasta el lunes, ya podíamos saber si teníamos el test aprobado ya que, sin el cuál, no podíamos aprobar el ejercicio de código y vicebersa.
viernes, 26 de septiembre de 2014
PRUEBA DE VALIDACIÓN PÁGINA EMPRESA DE PINTURAS
Prueba
<HTML><TITLE>Confección y publicación de páginas Web.</TITLE><BR />
<H1 <B>ALIGN=”CENTER”>PRUEBA DE VALIDACIÓN PERSONAL</B><H1>
<P>Fecha: Módulo: MF0950_2 Unidad Formativa: UF1303.2
Nombre: fecha de inicio: Horas empleadas:
</P>
<BODY>
<H2><U>INSTRUCCIONES:</U>Esta prueba de validación se compone de una batería de preguntas tipo test y un ejercicio de código en Jedit<b>ESTA PRUEBA ES PERSONAL </b></H2> El objetivo de esta prueba es validar todos los conocimientos del módulo formativo MF0950_2, y demostrar que se ha asimilado correctamente.
El resultado de la prueba será la media de las dos partes, no pudiendo hacer media si una de las partes esta suspensa.
La batería de preguntas se encuentran más abajo. Pregunta correcta 0,5 puntos, incorrecta o vacia -0,2 puntos.
Respuestas:
1.-
|
2.-
|
3.-
|
4.-
|
5.-
|
6.-
|
7.-
|
8.-
|
9.-
|
10.-
|
11.-
|
12.-
|
13.-
|
14.-
|
15.-
|
16.-
|
17.-
|
18.-
|
19.-
|
20.-
|
Ejercicio de Código:
Contexto: Empresa de Pintura creativa y profesional, realiza trabajos de pinturas de todo tipo para obras mayores y menores. Con carácter de PYME, realiza también proyectos en decoración creativa, todo tipo de técnicas, con necesidad de exponer trabajos realizados como presentación de la empresa.
Realizar un sitio web básico, Index y formulario de contacto como mínimo, utilizando como ayuda de base 11 plantillas proporcionadas para ahorrar trabajo en la elaboración del SITE y las imágenes y textos proporcionados por el cliente.
Imagen corporativa clara y definida en el boceto inicial necesario para empezar a codificar.
Formulario con proceso de validación de datos correcto, NO OPERATIVO.
Se exige pruebas de validación en varios navegadores e informe de accesibilidad y Usabilidad.
Se permite utilizar todas las herramientas aprendidas HTML.
Tiempo de ejecución máxima: 20 horas.
Preguntas del test:
1.- ¿Qué es una ruta relativa?
(a) Señalan la ubicación de un archivo o directorio en un servidor a partir de la posición actual de la carpeta donde se cargan los archivos.
|
(b)Señalan la ubicación de un archivo o directorio con la ruta completa.
|
(c)Señalan la ubicación de una imagen en el servidor.
|
(d)Señalan la ubicación de los archivos en un ordenador en local con las carpetas y unidades.
|
2.- Definición de SEO.
|
|
(c)Es el conjunto de técnicas utilizadas para aumentar el tráfico de calidad hacia un sitio web mediante la mejora del posicionamiento de un site en los buscadores.
|
|
3.- Estructura básica de un html.
(a)<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</HTML>
</BODY>
|
(b)<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
|
(c)<HTML>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
<HEAD>
</BODY>
</HTML>
|
(d)
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
|
4.- Características para que una página sea Usable.
(a)Rapidez en el tiempo de carga, Facilidad en el aprendizaje del sitio, Eficiencia en la navegación, Equilibrio en el diseño, Compatibilidad con navegadores.
|
(b)Qué las personas con diferentes tipos de discapacidad pueden experimentar dificultades para utilizar la web debido a la combinación de barreras en la información de las páginas web
|
(c) Qué espinete y Don Pinpom puedan usar el Site web sin perderse en el contenido.
|
|
5.- Qué es un DIV.
|
|
(c) Una etiqueta HTML que sirve para hacer cajas y nada más.
|
(d) Se usa comunmente para agrupar un bloque de elementos HTML, para luego añadirle un estilo CSS determinado.
|
6.- Para qué PUEDE servir el atributo alt.
(a) para que cuando se posicione el ratón sobre la imagen, salga un texto, generalmente explicando la imagen.
|
|
(c)para meter palabras clave de cara a los buscadores, ya que es uno de los atributos que rastrean dentro de una página html.
|
(d)la utilizan para que las personas con minusvalía en la vista, puedan oir la descripción de la imagen.
|
7.- Formas de aplicar CSS.
|
|
(c)A nivel de línea y de Div.
|
|
8.- Qué utilidad tienen los METAS.
|
|
(c) Se utiliza para añadir información sobre la página para que la utilicen los buscadores. van en el HEAD.
|
|
9.- Porqué es importante para la accesibilidad tener un CSS externo.
(a) Para que el código de la página principal no sea excesivamente largo y solo muestre lo que se visualiza.
|
|
(c)Al separar el código HTML del diseño CSS, el usuario ciego puede fácilmente , escrito en un fichero CSS,modificarlo y no entrar en conflicto con la lectura de la web.
|
|
10.- Qué etiqueta utilizamos para insertar una línea horizontal.
(a)<HB>
|
(b)<HR>
|
(c)<HC>
|
(d)<HD>
|
11.- Cuál de estas opciones de código es la correcta, es de una imagen con enlace.
| |
12.- Cuál es la línea de código correcta que muestra un video que se reproduce al cargar la página.
|
|
(c) <video "video.mp4" width="640" height="360" controls autoplay preload></video>
|
|
13.- Donde se pueden hacer los exámenes de accesibilidad.
|
|
(c) http://www.tawdis.net/
|
|
14.- Cual es el selector correcto para aplicar código CSS solo a la etiqueta Li de este <DIV>.
<div id="header">
<ul class="nav">
<li><a href="">Inicio</a></li>
<li><a href="">Servicios</a></li>
<li><a href="">Acerca de</a></li>
<li><a href="">Contacto</a></li>
</ul>
</div>
|
(b)li { }
|
(c) .nav {}
|
|
15.- Si una plantilla esta hecha de archivos php para que plataforma puede estar diseñada?
|
|
(c) HTML
|
|
16.- Cuál es el atributo que verifica que haya contenido en un <input> de un formulario.
|
|
(c) Submit
|
|
17.- Qué significa el apartado FAQ en un sitio Web.
(a) Se utiliza para referirse a listas de preguntas frecuentes o cualquier listado de preguntas frecuentes
|
|
|
|
18.- Qué tipo de posicionamiento le darías a una imagen de ancla fija?
|
|
(c) Absoluted
|
|
19.- Para qué sirven las nuevas etiquetas de HTML 5. Header, footer, nav, etc...
|
|
(c) Para estandarizar las partes de una web
|
|
20.- Qué línea de código de abajo ejecuta el formulario.
(a)<input type="casa" value="Submit">
|
|
(c)<input type="option" value="Submit">
|
(d) <input type="submit" value="Submit">
|
Escuela Taller Castro Urdiales</HTML>
InformeINFORME DE ACCESIBILIDAD Y USABILIDAD
Encontrándonos ante la página “Todopaint”, procederemos pues a analizarla para comprobar que cumple con los requisitos mínimos para ser aceptable en cuanto a accesibilidad y usabilidad se refiere.
Accesibilidad
Habiendo pasado dicha página por el validador de W3C, gracias al Dreamweaver, y por el Total validator, comenzaremos con el análisis de sus resultados:
Visualización en navegadores
Respecto a los cambios en la visualización de la página en los diferentes navegadores, no difiere mucho en realidad. Chrome y Firefox son los que mantienen mayor similitud, no obstante, el botón de “enviar” que posee el formulario está situado justo debajo de la caja del mensaje, al contrario que en el Chrome, en el cual se puede apreciar un ligero espacio. Respecto a esto, pasa lo mismo con el Internet explorer.
Cabe destacar que ninguno de los elementos se distancian de su posición original, lo que puede llamar más la atención es la ligera diferencia en el ancho y alto de las cajas de texto del formulario en Internet explorer respecto de los otros dos.
A parte de esto, en este ultimo se aprecia todo más ampliado que en los demás y es necesario recurrir al zoom para verlo como en los otros.
Salvo esto, solamente existen diferencias en el estilo de los elementos del formulario, como por ejemplo los mensajes que aparecen cuando un campo requerido no se rellena o el aspecto del bloque destinado al mensaje.
Usabilidad
Finalmente y para dar por concluido dicho informe, hablaremos de los distintos puntos principales a tener en cuenta sobre usabilidad y si dicha página los cumple.
En resumen, es una página que cumple casi todos los requisitos de usabilidad y accesibilidad y la visualización de ésta no varía de forma demasiado notoria dependiendo de los navegadores a usar.
|
Página index
Visualización
Código
<!DOCTYPE html>
<html lang="es">
<head>
<title>Todo Paint</title>
<meta name="Description" content="Index de la PYME Todo Paint">
<meta charset="utf-8" />
<Link rel="stylesheet" href="index.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id="contenedor">
<div id="cabecera">
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%"><a href="index.html"><img src="boton1.jpg" alt="boton1" height="52" border="0"></a></td>
<td width="14%"><a href="somos.html"><img src="boton2.jpg" alt="boton2" width="209" height="52" border="0"></a></td>
<td width="18%"><a href="productos.html"><img src="boton4.jpg" width="259" height="54" alt="boton4"></td>
<td width="51%"><a href="contacto.html"><img src="boton3.gif" alt="boton3" height="53" border="0"></a></td>
</tr>
</table>
<img class="bote" src="botes-pintura.gif" alt="botes" border="0">
<table class="texto" width="782" height="244" border="0">
<tr>
<td width="531"><h2><img src="img21.jpg" width="510" height="335" alt="pintura"></h2></td>
<td width="241" colspan="3" ><h2>Nuestra empresa</h2>
<p>Marca y símbolo Todo Paint acreditan la total fiabilidad y garantía en todos y cada uno de nuestros productos, lideres en el mercado, para ofrecer una mayor calidad de vida desde 1880.</p>
<p>Con el paso del tiempo, en Todo Paint se ha desarrollado una clara vocación investigadora que nos permite conseguir la más avanzada tecnología en la fabricación de los diferentes productos y en cada una de sus etapas.</p></td>
</tr>
</table>
</div>
<footer>
<p class="fot">PORQUE LA VIDA ESTA LLENA DE COLOR</p>
<map name="mapa1">
<area alt="Pulsa para ir a twitter" shape="CIRCLE" coords="21,23,29" href="https://twitter.com/" target="_blank">
<area alt="Pulsa para ir a facebook" shape="CIRCLE" coords="72,20,29" href="https://es-es.facebook.com/" target="_blank">
<area alt="Pulsa para ir a google plus" shape="circle" coords="120,22,29" href="https://plus.google.com/" target="_blank">
<area alt="Pulsa para ir a youtube" shape="CIRCLE" coords="168,21,29" href="https://www.youtube.com/" target="_blank">
<area alt="Pulsa para ir a feedburner" shape="CIRCLE" coords="214,22,29" href="http://www.feedburner.com/" target="_blank">
</map>
<img class="redes" src="redes.png" alt="redes sociales" border="0" usemap="#mapa1">
</footer>
</body>
</html>
Página quienes somos
Visualización
Código
<!DOCTYPE html>
<html lang="es">
<head>
<title>Página de quienes somos de Todo Paint</title>
<meta name="Description" content="Index de la PYME Todo Paint">
<!meta charset="utf-8" />
<Link rel="stylesheet" href="index.css" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body onLoad="MM_preloadImages('imagen1.JPG')">
<div id="contenedor">
<div id="cabecera">
</div>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%"><a href="index.html"><img src="boton1.jpg" alt="boton1" height="52" border="0"></a></td>
<td width="14%"><a href="somos.html"><img src="boton2.jpg" alt="boton2" width="209" height="52" border="0"></a></td>
<td width="18%"><a href="productos.html"><img src="boton4.jpg" width="259" height="54" alt="boton4"></td>
<td width="69%"><a href="contacto.html"><img src="boton3.gif" alt="boton3" height="53" border="0"></a></td>
</tr>
</table>
<img class="bote" src="botes-pintura.gif" alt="botes" border="0">
<table class="texto2" width="782" height="244" border="0">
<tr>
<td width="531"><h2><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pinturas','','imagen1.JPG',1)"><img src="imagen3.jpg" alt="pinturas artísticas" width="464" height="438" id="pinturas"></a></h2></td>
<td width="241" colspan="3" bgcolor="#FFFFFF"><h2>Sobre nosotros</h2>
<p>Ofrecemos todo tipo de servicio de pinturas y reformas desde servicios a oficinas, locales comerciales, zonas comunitarias, escaleras y ascensores, fachadas, hasta pisos particulares.
Adicionalmente hacemos reformas, obra pequeña, rehabilitación de fachadas, estudios de diseño y decoración.
</p>
<p>En los apartados específicos puedes encontrar más información sobre los servicios más solicitados. Si tu caso concreto no está descrito, no dudes en ponerte en contacto con nosotros para informarte sobre la solución que podemos dar a tu necesidad en particular.</p></td>
</tr>
</table>
</div>
<footer>
<p class="fot">PORQUE LA VIDA ESTA LLENA DE COLOR</p>
<map name="mapa1">
<area alt="Pulsa para ir a twitter" shape="CIRCLE" coords="21,23,29" href="https://twitter.com/" target="_blank">
<area alt="Pulsa para ir a facebook" shape="CIRCLE" coords="72,20,29" href="https://es-es.facebook.com/" target="_blank">
<area alt="Pulsa para ir a google plus" shape="circle" coords="120,22,29" href="https://plus.google.com/" target="_blank">
<area alt="Pulsa para ir a youtube" shape="CIRCLE" coords="168,21,29" href="https://www.youtube.com/" target="_blank">
<area alt="Pulsa para ir a feedburner" shape="CIRCLE" coords="214,22,29" href="http://www.feedburner.com/" target="_blank">
</map>
<img class="redes" src="redes.png" alt="redes sociales" border="0" usemap="#mapa1">
</footer>
</body>
</html>
Página de productos
Visualización
Código
<!DOCTYPE html>
<html lang="es">
<head>
<title>Página de productos de Todo Paint</title>
<meta name="Description" content="Index de la PYME Todo Paint">
<meta charset="utf-8" />
<Link rel="stylesheet" href="index.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id="contenedor3">
<div id="cabecera">
</div>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%"><a href="index.html"><img src="boton1.jpg" alt="boton1" height="52" border="0"></a></td>
<td width="14%"><a href="somos.html"><img src="boton2.jpg" alt="boton2" width="209" height="52" border="0"></a></td>
<td width="18%"><a href="productos.html"><img src="boton4.jpg" width="259" height="54" alt="boton4"></td>
<td width="69%"><a href="contacto.html"><img src="boton3.gif" alt="boton3" height="53" border="0"></a></td>
</tr>
</table>
<img class="bote" src="botes-pintura.gif" alt="botes" border="0">
<table class="texto" width="782" height="244" border="0">
<tr>
<td width="223"><h2><img src="maxresdefault.jpg" width="199" height="112" alt="uno"></h2></td>
<td width="549" colspan="3" bgcolor="#FFFFFF"><h2>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } -->
<BODY DIR="LTR">
</h2>
<h2>Ferrorite Acqua<BR>
</h2>
<p>Ferrorite Acqua es una revolución en el mercado . Un esmalte antioxidante al agua para metales, directo sobre óxido y sin necesidad de imprimación previa. Todo ello sin peligro de oxidación. tanto durante la aplicación como por la exposición de la pintura en el tiempo, gracias a su especial formulación. Y sobre todo, es efectivo y duradero como los tradicionales esmaltes antioxidantes al disolvente.</p></td>
</tr>
<tr>
<td><img src="microcemento3.jpg" width="199" height="112" alt="dos"></td>
<td colspan="3" bgcolor="#FFFFFF"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } -->
<BODY DIR="LTR">
<h2>Sistema microcemento</h2>
<p>La última tendencia en decoración e interiorismo es MicroCemento. Se trata de un sistema de productos basados en revestimientos cementosos bicomponentes. La combinación de todos ellos, da como resultado:</p>
<p>- Un revestimiento continuo de altas prestaciones, proporcionando acabados duradaderos, impermeables y de alta resistencia al roce y al desgaste.</p>
<p>- Un acabado decorativo exclusivo, que permite obtener espacios únicos para cada aplicación.</p>
<p><BR>
</p></td>
</tr>
<tr>
<td><img src="descarga.jpg" width="199" height="112" alt="tres"></td>
<td colspan="3" bgcolor="#FFFFFF"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } -->
<BODY DIR="LTR">
<h2>Pintura plástica</h2>
<p>Pintura plástica mate con certificado ecológico europeo ECOLABEL. De alto rendimiento, cubrición y nivelación. Fabricado con materias primas totalmente respetuosas con el medio ambiente. Sin olor. Lavabilidad Clase 2</p>
<p><BR>
</p></td>
</tr>
<tr>
<td><img src="la-pintura-monocapa-12.jpg" width="199" height="112" alt="cuatro"></td>
<td colspan="3" bgcolor="#FFFFFF"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } -->
<BODY DIR="LTR">
<h2>Pintura monocapa</h2>
<p>Pintura ecológica certificada, de naturaleza acrílica y acabado mate, monocapa, de excelente cubrición y fácil aplicación. No gotea ni salpica. Sin olor, permite habitar los espacios pintados inmediatamente. Lav: 40.000 d.p.</p></td>
</tr>
</table>
</div>
<footer>
<p class="fot">PORQUE LA VIDA ESTA LLENA DE COLOR</p>
<map name="mapa1">
<area alt="Pulsa para ir a twitter" shape="CIRCLE" coords="21,23,29" href="https://twitter.com/" target="_blank">
<area alt="Pulsa para ir a facebook" shape="CIRCLE" coords="72,20,29" href="https://es-es.facebook.com/" target="_blank">
<area alt="Pulsa para ir a google plus" shape="circle" coords="120,22,29" href="https://plus.google.com/" target="_blank">
<area alt="Pulsa para ir a youtube" shape="CIRCLE" coords="168,21,29" href="https://www.youtube.com/" target="_blank">
<area alt="Pulsa para ir a feedburner" shape="CIRCLE" coords="214,22,29" href="http://www.feedburner.com/" target="_blank">
</map>
<img class="redes" src="redes.png" alt="redes sociales" border="0" usemap="#mapa1">
</footer>
</body>
</html>
Página de contacto
Visualización
Código
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <title>Página de contacto de Todo Paint</title> | |
| <meta name="Description" content="Index de la PYME Todo Paint"> | |
| <meta charset="utf-8" /> | |
| <Link rel="stylesheet" href="index.css" type="text/css"> | |
| <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> | |
| <link rel="icon" href="favicon.ico" type="image/x-icon"> | |
| </head> | |
| <body> | |
| <div id="contenedor"> | |
| <div id="cabecera"> | |
| </div> | |
| <table width="100%" border="0" cellspacing="0" cellpadding="0"> | |
| <tr> | |
| <td width="17%"><a href="index.html"><img src="boton1.jpg" alt="boton1" height="52" border="0"></a></td> | |
| <td width="14%"><a href="somos.html"><img src="boton2.jpg" alt="boton2" width="209" height="52" border="0"></a></td> | |
| <td width="18%"><a href="productos.html"><img src="boton4.jpg" width="259" height="54" alt="boton4"></a></td> | |
| <td width="69%"><a href="contacto.html"><img src="boton3.gif" alt="boton3" height="53" border="0"></a></td> | |
| </tr> | |
| </table> | |
| <img class="bote" src="botes-pintura.gif" alt="botes" border="0"> | |
| <table class="texto2" width="782" height="244" border="0"> | |
| <tr> | |
| <td width="531"><h2><iframe id="mapa" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1479.2527623413541!2d-0.4016391606994216!3d42.139467883242915!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x736f4487376c81bc!2sPinturas+Sorribas!5e0!3m2!1ses!2ses!4v1411645794874" ></iframe> | |
| </h2></td> | |
| <td width="531"> </td> | |
| <td width="241" colspan="3" bgcolor="#FFFFFF"><h2>Contacta con nosotros</h2> | |
| <form action="#" method="get"> | |
| <div class="form"> | |
| <p> | |
| <label for="name"> Nombre </label> | |
| <input class="text" name="name" id="name" type="text" required/> | |
| </p> | |
| <div class="clear2"></div> | |
| <p> | |
| <label for="email"> Email</label> | |
| <input class="text" name="email" id="email" type="email" pattern="[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*@[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{1,5}" required/> | |
| </p> | |
| <p> </p> | |
| <div class="clear2"></div> | |
| <div class="clear2"></div> | |
| <label for="comment">Mensaje<br> | |
| <br> | |
| </label> | |
| <textarea class="text" name="comment" id="comment" cols="45" rows="5" required></textarea> | |
| <div class="clear2"></div> | |
| <input class="button" name="Submit" type="submit" value="Enviar" /> | |
| </div> | |
| </form> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| <footer> | |
| <p class="fot">PORQUE LA VIDA ESTA LLENA DE COLOR</p> | |
| <map name="mapa1"> | |
| <area alt="Pulsa para ir a twitter" shape="CIRCLE" coords="21,23,29" href="https://twitter.com/" target="_blank"> | |
| <area alt="Pulsa para ir a facebook" shape="CIRCLE" coords="72,20,29" href="https://es-es.facebook.com/" target="_blank"> | |
| <area alt="Pulsa para ir a google plus" shape="circle" coords="120,22,29" href="https://plus.google.com/" target="_blank"> | |
| <area alt="Pulsa para ir a youtube" shape="CIRCLE" coords="168,21,29" href="https://www.youtube.com/" target="_blank"> | |
| <area alt="Pulsa para ir a feedburner" shape="CIRCLE" coords="214,22,29" href="http://www.feedburner.com/" target="_blank"> | |
| </map> | |
| <img class="redes" src="redes.png" alt="redes sociales" border="0" usemap="#mapa1"> | |
| </footer> | |
| </body></html> | |
CSS
#contenedor{
background-color: white;
border: black 1px solid;
width: 1450px;
height: 900px;
position: relative;
margin-top:100px;
margin-bottom:100px;
margin-left: 50px;
margin-right: 50px;
border-radius:15px;
}
#contenedor3{
background-color: white;
border: black 1px solid;
width: 1450px;
height: 1400px;
position: relative;
margin-top:100px;
margin-bottom:100px;
margin-left: 50px;
margin-right: 50px;
border-radius:15px;
}
#cabecera{
background-image: url("cabecera.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 300px;
background-repeat: no-repeat;
position: relative;
border-radius:15px;
}
footer{
position: relative;
width: 958px;
height: 100px;
left: 50px;
right: 50px;
background-color: green;
padding-left: 500px;
padding-top: 15px;
padding-bottom: 15px;
border-radius:15px;
}
body{
background-image: url("foondo.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.bote{
opacity: 0.5;
position: relative;
left:1080px;
top: 250px;
}
.texto{
position:relative;
left:150px;
bottom: 180px;
}
.texto2{
position:relative;
left:150px;
bottom: 270px;
}
.manchas{
position: absolute;
left:50px;
top: 710px;
}
.redes{
position: absolute;
left:590px;
bottom: 20px;
}
.fot{
position: absolute;
left:550px;
bottom: 60px;
color:white;
}
h2{
color: green;
}
#contenedor td .texto tr td p {
font-family: Verdana, Geneva, sans-serif;
}
#contenedor td .texto tr td h2 {
font-family: Verdana, Geneva, sans-serif;
color: #063;
}
#mapa{
width:480px;
height: 380px;
border:0px;
}
form{ background-image: url("manchas.png");
}
input {
border: 1px solid #006;
background: #ffc;
}
input:hover {
background: #ff6;
}
.text{
border: 1px solid #006;
background: #ffc;
}
.text:hover{
background: #ff6;
}
|
Suscribirse a:
Entradas (Atom)