Ante todo, pido perdón por la extensión de este correo, que es una respuesta sobre la petición de críticas que hizo Wilfredo del sitio
http://www.musipan.net/ - - - - - - - - - Hola, Wilfredo. Veo que se ha empleado bastante esfuerzo en construir el sitio aunque, como todo, es susceptible de mejorar. Ya que la temática de esta lista son las CSS y el diseño con estándares, empezaré comentando algunas deficiencias del sitio en este aspecto. - - - - - - - - - - - ANÁLISIS DEL CÓDIGO Has encerrado todo el contenido en un iframe dentro de index.php, pero no le encuentro justificación, a menos que quieras fastidiar al usuario medio para que no pueda enlazar a una página interna ni incluirla en marcadores (favoritos). Si se analiza la página incluida en el iframe, "principal.php", se descubre un diseño basado en tablas y con numerosos errores. En ésta falta la declaración doctype que es importante no sólo para validar la página, sino para conmutar al modo de estándares (aunque como el diseño es por tablas tampoco es tan dramático). El código contiene, entre otros errores, atributos desautorizados, atributos inexistentes (como "alt" para las imágenes o "type" para las etiquetas <script>), etc. Te recomiendo que incluyas un doctype y valides las páginas para corregir los errores. Peor incluso es la cantidad de reglas css en línea (unas veinte en principal.php) para añadir un z-index a las imágenes. Puede que el código se haya realizado mediante un programa de diseño visual, por lo que no voy a darle más vueltas. Lo que sí voy a comentar a nivel de código es la página index.php, el contenedor del iframe. Incluso este documento tan sencillo contiene errores: - En la etiqueta iframe has repetido el atributo style. Has escrito: <iframe style="background-color:#804000" ... style="border:none;" ...> Debe de ser: <iframe style="background-color:#804000; border:none;" ...> También te alerto sobre lo siguiente, aunque técnicamente no sean errores: - Es recomendable por accesibilidad que indiques el idioma de la página: <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="es" lang="es"> Cuando el documento se sirve como text/html (como es este caso y el de la inmensa mayoría de las páginas xhtml), los navegadores HTML ignoran los atributos xmlns y xml:lang (son del lenguaje xhtml). Sin embargo, sí tienen en cuenta el parámetro lang. - En vez de usar el atributo align para centrar, que está desaprobado por el W3C. Utiliza el equivalente css "margin: auto;" - Has escrito en la etiqueta iframe align="top", pero "top" no es un valor válido del atributo align. Sí lo son "left", "center", "right" y "justify", como puedes ver en http://www.w3.org/TR/html4/present/graphics.html#adef-align Quizás te has confundido con el atributo valign o con el atributo align de otros elementos como "caption", que sí admiten "top" como un valor válido. - Has indicado estilo en línea mediante el atributo style (no confundir con la etiqueta style). Te recuerdo que si se indica estilos en línea, es obligatorio indicar el lenguaje de hoja de estilos por defecto. Se puede hacer en la cabecera http o con la siguiente etiqueta meta: <meta http-equiv="Content-Style-Type" content="text/css" /> Ésta es una norma que se la salta todo el mundo (incluido yo). - Usas comentarios html en el elemento style para esconder las css internas de los navegadores antiguos que no entienden la etiqueta <style>. Pero si este documento se sirviera como application/xhtml+xml, estos estilos se ignorarían. Por lo tanto, habría que quitar estos comentarios o indicar un doctype html. Si los quitas y eres detallista, en prevención de que puedas usar caracteres como "<" o "&" en la hoja de estilos, marca los estilos como bloque CDATA. Si, además, te preocupa la compatibilidad de la etiqueta CDATA con ciertos navegadores, ocúltala con comentarios css: <style type="text/css"> /*<![CDATA[*/ body { background-color: ... } /*]]>*/ </style> http://www.w3.org/TR/xhtml1/#h-4.8 http://www.w3.org/TR/xhtml1/#C_4 - - - - - - - - - ANÁLISIS VISUAL - La página de entrada es vistosa, pero no indica claramente de qué trata. El muchacho vestido de rey y la leyenda "MUSIPAN El Reino" no dice mucho. Mirando los demás elementos se puede deducir que se trata de un hotel con restaurante para celebraciones. Pero tras navegar por el sitio se descubre que es todo un parque temático. ¿Pero dónde? Pulsando en contáctenos parece que se trata de algún país de América (después descubrí que era Venezuela). La primera regla de usabilidad es dar a conocer al usuario sobre qué versa el sitio. Al menos una línea de etiquetas que diga algo sobre que es un parque temático y dónde se encuentra. - Los enlaces no están claramente indicados como tales. Para saber dónde están hay que ir escudriñando la página con el ratón para ver si el cursor se convierte en una mano. He intentado pinchar en la foto del rey, e incluso en el romano de la esquina. Tampoco hay efectos de rollover en los enlaces. Y, lo peor, no indicas cual es la opción del menú que se elige, que no se induce ni siquiera mirando la barra de direcciones ya que, al incluirlo todo en un iframe, la url no cambia (el documento es siempre index.php). - La imagen "Home" del menú no guarda conexión con las demás opciones del menú. Está a la derecha y no tiene forma de botón. Como tampoco se convierte el cursor en una mano, parece que no se trata de un enlace y sólo se descubre que lo es cuando desde otra página se intenta volver a la de inicio. - Si "MUSIPAN El Reino" con la imagen del rey es el logotipo, debería de ser un enlace a la página de inicio. - Un comportamiento desconcertante es que algunos enlaces abren una nueva ventana y otros no (falta coherencia). No es aconsejable este comportamiento y aún menos que no se avise, por ejemplo, con un pequeño icono de enlace externo. También sucede que si el navegador está configurado para abrir la nueva ventana otra pestaña, las dimensiones del viewport (la parte del navegador que muestra la página) son mayores de lo esperado en tu diseño y se visualiza el color de fondo de la página. - Enlace "Hotel La Posada" * El enlace al hotel también parece desconectado del resto. Tanto por su localización, un poco forzada, como por el aspecto de las páginas, con un color predominante azul. * La imagen principal, index_r4_c1.jpg, se muestra repetida en su parte inferior (sólo un trozo). * La lista de elementos con marcadores en forma de círculos parecen enlaces pero no lo son. * El pie de página con información de contacto es una imagen, index_r5_c1.jpg. Esto impide que lo pueda indexar un motor de búsqueda o un lector de pantalla o cualquier agente de usuario que no muestre imágenes (a menos que tenga atributo alt, pero no lo tiene). * En la página "General" el texto de color negro sobre celeste es poco legible. * En "Galería" debajo de cada foto también se muestra repetida la parte superior de éstas, tanto en Firefox como en IE. * El botón de "atrás" del navegador tiene un comportamiento inesperado, volviendo a la página de inicio del sitio, no a la página previa. - Donde están las dos parejas bailando y el texto "Ven a Celebrar", además de abrir una nueva ventana, tampoco se deduce a simple vista que lo que se abre es un formulario de contacto. En firefox bajo Windows Vista los campos del formulario aparecen descuadrados. En Internet Explorer sí se ven bien. - En los iconos del fondo ocurre algo similar. Se abre una nueva ventana sin avisar, excepto en el tercer icono que rompe esta tendencia y se abre en la misma ventana. A propósito, la expresión "Galería con foto adentro" me dio una primera pista de que que el hotel no se encontraba ni siquiera en mi país, ya que el adverbio "adentro" usado de ese modo es típico de América (lo de "foto" en singular supongo que es un error). En España se diría "Galería con fotos dentro" (sin la 'a'). Pero, en todo caso, no hace falta indicar que las fotos están dentro, basta con indicar "Galería de fotos". - En algunas páginas, como en "Información General", se muestra un recuadro vacío que parece que lo está por error, pero cuando se pulsa en uno de los textos de la derecha se rellena de contenido. Éste aparece pegado a los bordes, sin relleno (padding). En vez de dejarlo vacío se podría informar de su funcionamiento en la forma "pulse en uno de las opciones de su derecha para obtener información". Horror, el cuarto enlace rompe la consistencia y abre una nueva ventana. - El plano de "Shous" no funciona en Firefox bajo Windows Vista, pero sí en Firefox bajo Ubuntu ¿desconcertante?. En IE también se muestra bien. Además, en Firefox bajo Ubuntu, cuando se pulsa en la Plaza El Emigrante, el texto aparece de mayor tamaño, desplazando el enlace de "regresar". Si se maximiza la ventana el diseño se descuadra. Por fin un efecto de rollover, pero la imagen que se selecciona aparece desplazada. Cuando se pulsa en "Plaza el Emigrante" aparece una barra vertical en el texto informativo, pero cuando muevo el ratón hacia el control de desplazamiento, el texto se cambia por otro (un comportamiento un poco desesperante). - En "Proyectos" la parte superior del texto, que es de color blanco, es poco legible porque el fondo es un naranja casi amarillo. Cuando el fondo se hace naranja el texto sí es legible. El enlace "Regresar a Proyectos" debería de predominar sobre los demás, ya que es la página desde la que he accedido. - En "Historia", hay un recuadro informativo que aparece en principio también vacío, excepto por un escudo, hasta que se pulsa en uno de los textos a su izquierda. El texto informativo es poco legible en Internet Explorer, sobre todo cuando coincide con la parte inferior del escudo. En Firefox bajo Windows Vista es más legible pero se muestra mal, desplazado hacia la izquierda. En Firefox bajo Ubuntu se muestra bien excepto por la falta de legibilidad cuando el texto coincide con el escudo. - - - - - - - RESUMEN - Indicar de qué trata el sitio. - Quitar iframe. - Indicar claramente los enlaces. - Integrar el enlace "home" con las demás opciones del menú. - Evitar abrir páginas en nueva ventana o, en su defecto, indicarlo. - Evitar combinaciones de colores poco legibles (páginas "Hotel la posada > General", "Proyectos", "Historia" y el escudo) - - - - - - - Evidentemente, se puede realizar un análisis muchísimo más profundo y algunas opiniones diferirán de las mías, pero debatiendo podemos sacar algo de provecho. Saludos. _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
