Blog de comunicación visual

Quizá muchos de vosotros conozcáis la web de este magnífico estudio de creaciones en flash.

Para los que no lo hayais visto es de visita obligada. Os recomiendo que os sumerjais en su portafolio que tiene trabajos realmente bien hechos.

Os propongo uno muy impactante: Infamous.

Aviva Directory nos da una lista de treinta y una aplicaciones gratuitas con las que poder testear diversos aspectos de nuestras web, como pueden ser, la accesibiidad, velocidad, validaciones de código, SEO, etc.

Un gran recurso.

He tenido conocimiento de que el W3C está desarrollando una nueva versión de las guias de accesibilidad para los contenidos web (WCAG).

Tras un amplio periodo en el que se han usado en su versión 1.0 (versión en español), este organismo ha considerado oportuno hacer una revisión del texto, más acorde a la actualidad de la web, así como para pulir o cambiar algunas de las pautas anteriores.

Para el que no sepa lo que significa accesibilidad os propongo dos definiciones:

- Accesibilidad Web (W3C): “La idea principal radica en hacer la Web más accesible para todos los usuarios independientemente de las circunstancias y los dispositivos involucrados a la hora de acceder a la información. Partiendo de esta idea, una página accesible lo será tanto para una persona con discapacidad, como para cualquier otra persona que se encuentre bajo circunstancias externas que dificulten su acceso a la información (en caso de ruidos externos, en situaciones donde nuestra atención visual y auditiva no estén disponibles, etc.). ”

- Accesibilidad (WikiPedia): “La accesibilidad indica la facilidad con la que algo puede ser usado, visitado o accedido en general por todas las personas, especialmente por aquellas que poseen algún tipo de discapacidad”.

Tras esta introducción pongamos aquí las líneas maestras de las nuevas reglas de accesibilidad de la W3C:

Web perceptible:

• Proveer alternativas de texto a todos los contenidos no texto, de manera que puedan ser transformados en otras formas según necesite, como puede ser impresión grande, braille, voz, símbolos, o lenguaje simple.
• Proveer alternativas sincronizadas para el contenido multimedia.
• Crear contenido que pueda ser representado en diferentes maneras (por ejemplo hablado, con una maquetación más sencilla, etc.), sin perder información ni estructura.
• Hacer más fácil a las personas con discapacidades el ver y escuchar contenidos.

Web operable:

• Hacer que toda la funcionalidad se pueda manejar desde un teclado.
• Proporcionar suficiente tiempo para leer y usar el contenido.
• No crear contenido que pueda causar ataques epilépticos, convulsiones (flashes rápidos, etc.)
• Crear mecanismos que ayuden a los usuarios con discapacidades a navegar, encontrar contenido y determinar dónde se encuentran.

Web entendible:

• Hacer que el contenido textual sea leíble y entendible.
• Hacer que las web funcionen de manera predecible.
• Ayudar a los usuarios a evitar y corregir posibles errores.

Web robusta:

Maximizar la compatibilidad con los agentes de usuario (navegadores, interpretadores, …) actuales y futuros.

Por el momento este proceso se encuentra en un grupo de trabajo, pero se espera que se apruebe en un futuro cercano.

Estaremos atentos.

Una magnífica fuente de efectos flash open source (libres), que podemos aprovechar para multitud de proyectos.

Están geniales porque además de ofrecerte los ficheros fuente (.fla), te dan explicaciones del uso, de cómo se han creado y en qué se han basado. Para tenerlo en tus favoritos.

Este post es la continuación de CSS semánticas. Un nuevo enfoque, y trata de dar una serie de consejos o recomendaciones a la hora del uso de hojas de estilo y escritura de código XHTML.

Toda la información está basada en el post citado, así como los ficheros relacionados.

Recomendaciones de uso y escritura de código

Usar las etiquetas HTML estrictamente para lo que se han concebido

Si se consigue crear un código XHTML lo más limpio y claro posible se verá reducido considerablemente el número de estilos propios que tendremos que crear y evitaremos la mayoría de los errores e inconsistencias comunes.

• Maquetar en base a capas (div), no usar tablas (table).
• Párrafos: (p)
• Encabezados: (h1, h2, … h6)
• Tablas: (table, thead/tr/th, tbody/tr/td)
• Listas: (ul/li, ol/li)
• Menús: basados en listas con el atributo display:inline

Uso de medidas relativas en los tamaños de las fuentes

Las medidas relativas son aquellas que no establecen un tamaño fijo en píxeles o puntos para un elemento. En concreto son el porcentaje (%) y el em (1em equivale a 100%, 1.2em a 120%…, 0.7em 70%, …)

Es muy importante este punto por varios aspectos:

• No todas las personas tienen el monitor a la misma resolución y nuestra tipografía le puede resultar muy pequeña o grande según el caso.
• Al establecer la medida de tipografía de manera relativa en la etiqueta body, se tomará el tamaño relativo al navegador y dispositivo que interprete la página. Esto es especialmente en dispositivos con pequeñas pantallas (móviles, pda, etc.).

Maquetación de layout fijo basado en capas

Esta es una antigua polémica, el maquetado de tamaño fijo de ancho o el maquetado líquido o de tamaño variable.

Los estudios de usabilidad web aconsejan el uso de tamaños fijos adecuados a la resolución más usada por los usuarios de internet, intentando que el porcentaje discriminado sea el menor posible. La explicación de este aspecto se justifica por el constante crecimiento en las ventas de monitores de gran tamaño (17″ o más) y resolución (1024×768 en adelante).

La expansión de las páginas sobre todos en resoluciones de monitores panorámicos dificulta enormemente la legibilidad de los párrafos de texto.

Crear estilos o redefinirlos solo en el caso estrictamente necesario

Si creamos nuestras páginas haciendo un uso adecuado de las etiquetas XHTML y seguimos las pautas descritas en este documento, se reducirá drásticamente la necesidad de creación de estilos innecesarios y redundantes, lo que conlleva enormes beneficios sobre todos relativos a la facilidad de mantenimiento y reducción de errores y comportamientos extraños.

Introducción

Existen infinidad de sitios en Internet que ofrecen miles de propuestas diferentes a la hora del uso de hojas de estilo CSS en la maquetación de portales web, como sabemos aplicables a múltiples tecnologías: XHTML, Flash, etc…

Lo que es difícil de encontrar es aquella solución que se adapte perfectamente a tus desarrollos, a tu entorno concreto. Quizá más difícil aun es adecuar algún enfoque similar al tuyo. Esta tarea es proclive a múltiples errores, que irán saliendo conforme se vaya utilizando y que llegado el momento, podemos comprobar que nos hemos equivocado de base, lo que exige una reestructuración desde el inicio.

Este es el contexto en el que nos encontramos actualmente. Tras una fuerte apuesta por la reestructuración y organización de CSS basadas en su semántica de uso se ve que si es quizá uno de los enfoques más acertados, deja bastantes puntos abiertos que es necesario concretar. Esa es la tarea que nos proponemos aquí.

Para los no iniciados, comentar que el enfoque semántico se basa en la idea de que la manera de estructurar la información relativa a la capa de presentación de nuestros proyectos web debe de seguir el criterio de qué es y el contexto donde se usa cada elemento.

El entorno web tiene una característica fundamental que pocos otros tienen y es la capacidad y potencialidad de uso en múltiples tipos de dispositivos, lo cual nos abre aun más el abanico de puntos que debemos controlar a la hora de crear nuestras hojas de estilos, a la vez que multiplica la casuística y potenciales errores que es necesario controlar.

Aquí trataremos de dar una posible solución que se adecue a los principios de CSS semántica y que siga las pautas de accesibilidad y de facilidad de extensión a múltiples dispositivos.

Puntos a tener en cuenta

Estructura jerárquica de las CSS

Nuestras hojas de estilo seguirán una estructura jerárquica, cuyo elemento principal será el que incluya, para cada tipo de dispositivo, las hojas de estilo correspondientes.

Explicación de cada una de las hojas de estilo

• Pantalla.css, Impresora.css y Movil.css. Estas son CSS específicas para cada tipo de dispositivo. Su misión en la parte superior de la jerarquía es la importación de las CSS hijas (@import url(”…css”) ). No incluyen estilos concretos.
• LayoutPantalla.css, LayoutImpresora.css y LayoutMovil.css. Incluyen la información relativa a las diversas capas que forman el layout de la página, es decir, información de maquetación de las distintas zonas del portal (Banner, menús, contenidos, créditos, …)
• CrossBrowser.css. Aglutina trucos, fixes y demás elementos para hacer que las páginas se vean igual en todos los navegadores (Internet Explorer, Mozilla, Firefox, Opera, etc.)
• Tipografía.css. Cualquier elemento relacionado con las forma en que se presenta la tipografía de la página queda recogida aquí.Comienza con una medida relativa de 62.5% en la etiqueta body, que se establece como medida equivalente a 1em. El resto de tamaños vendrán supeditados a este (mayores: 1.2em, 1.5em, etc…, y menores: 0.8em, 0.5em, etc.)
• Formularios.css. Definición de los estilos aplicables a todas las etiquetas relacionadas con los formularios genéricos.

Documentos asociados a este artículo

• CSS Semánticas. Incluye los distintos CSS descritos.
• Página ejemplo en XHTML con una maquetación tipo basada en capas

Si quieres seguir leyendo sobre este tema… CSS Semánticas. Un nuevo enfoque (y II)

He leído en Alzado un magnífico post acerca del decálogo del diseñador, titulado “10 cosas que todo diseñador debería saber“.

Son una serie de principios básicos de obligada lectura ya que cada uno puede sacar sus conclusiones, ayudarte a obrar de la manera correcta, o quien sabe, hacerte replantearte algunos aspectos de tu trabajo.

Os recomiendo su lectura.

No es demasiado sencillo conseguir buen material vectorizado de manera gratuita. Vecteezy es una excepción a esta regla.

Aquí podrás obtener buenos recursos en formato vectorial para todos tus proyectos.

Inauguramos esta sección de libros recomendados con este libro de diseño web.

Es una publicación del conocido Web Design Index, que desde el año 2000 viene recogiendo los mejores diseños de páginas web, fuente de inspiración para muchos.

En la tarde de ayer tuve la oportunidad de hacerme con el Web design index by content 02, la segunda edición de este libro que recoge 575 sitios web, clasificados según diversas categorías, y que es un recurso magnífico para ver las últimas tendencias y los mejores diseños del momento. Totalmente recomendado.

Un nuevo recurso interesante para añadir a tu biblioteca. Se trata de un lector de pinceles para Adobe Photoshop, una herramienta que se tilda de imprescindible cuando ya acumulas gran cantidad de ellos, y que funciona de una manera muy similar a los tan usados, lectores de tipografías.

Además de todo, es opensource.