Usando los Atributos ALT y TITLE Para Mayor Accesibilidad

miércoles, abril 25, 2007

Los atributos alt y title son dos de las piezas de código más importantes si es que queremos hacer un sitio web accesible. Es más, a veces tan sólo agregar éstos puede resolver todos los problemas de accesibilidad de una página. Es por eso que su uso se ha vuelto un requerimiento para la W3C, y usarlos es de suma importancia si es que queremos hacer de la página una mejor experiencia para todos.

El problema viene a la hora de decidir qué poner ahí. He visto desde largas descripciones innecesarias hasta sólo keywords puestas para mejorar en los ranking de los buscadores (es más yo comencé usándolas de esta manera!). Así que a continuación dejo unas recomendaciones para su uso:

El Atributo ALT para imágenes

ALT es “alternate text”, “texto alternativo” y según la W3C se debe usar para agentes de usuario que no pueden mostrar imágenes, formas o applets. Este texto describe el contenido cuando éste no se puede mostrar. Se puede insertar en los elementes IMG, AREA e INPUT, siendo su uso en IMG el más extendido y útil.

Qué poner:

-Una pequeña descripción del sujeto de la foto. Algo asó como el pie de foto en una revista o periódico.
-El título de la imagen.
-Una cita de la imagen y el crédito de la foto.
-Mantenerlo corto, usando las palabras necesarias.
-Mantenerlo relevante al tema de la página.
-No usarlo como tooltip.

El Atributo TITLE para enlaces

Este atributo según la W3C sirve para ofrecer información aconsejable acerca del elemente sobre el cual se aplica. En otras palabras debe proporcionar información que complemente el texto del enlace.

Qué poner:

-Texto adicional describiendo el enlace.
-Añadir una cita del URL con información de la página.
-Mantenerlo breve

Es importante usar ambos atributos correctamente y añadirlos a nuestro hábito de diseño de sitios web. Espero que ésta pequeña guía les haya clarificado un poco el tema.

Etiquetas: , , , , , , ,

escrito por Volatto a las 10:52 a. m. 1 comentarios


Documentando el Cambio a Web Standards

martes, abril 24, 2007

Aarron Walter es un profesor en The Art Institute of Atlanta, un lugar en donde a diferencia de cualquier insitituto de Perú, se enseñan los Web Standards y su aplicación al diseño web desde el 2002. En esos lares, el uso de los standards está siendo diseminado poco a poco por los alumnos, que de alguna manera tienen que hablar con sus empleadores y convencerlos de que es lo mejor a largo plazo. ¿Ardua tarea no?

Walter ha comenzado un proyecto llamado “The Web Standards Documentary Project” que busca documentar el cambio de la web hacia este nuevo tipo de mentalidad. Para eso ha entrevistado a algunos diseñadores egresados que cuentan sus experiencias – algunas exitosas otras no tanto.

Estando en mi pequeño rinconcito de Latinoamérica, me pregunto como iría esto. Es más, tan solo cambiar la mentalidad de que los frames son buenos sería un gran avance. ¿Alguno de ustedes alguna vez siquiera le ha sugerido algo de web standards a sus cliente? Yo lo he puesto en mi currículo, aunque no se muy bien si sirva de algo.

Etiquetas: , , , , , ,

escrito por Volatto a las 9:55 p. m. 0 comentarios


Probando, Probando… Adobe Dreamweaver CS3

sábado, abril 21, 2007

Reseña sobre Dreamweaver CS3Hoy día puse mis manos en uno de los hijos de la fusión entre Adobe y Macromedia: Adobe Dreamweaver CS3, y bueno pensé escribir algo sobre las nuevas características que tiene el programa, ya que fue lo primero sobre lo que comencé a leer en la sección “What’s New”.

Primero, Dreamweaver añade el framework Spry para Ajax, con el que “se podrán visualmente diseñar, desarrollar y lanzar interfaces de usuario dinámicas”. Ahora, yo la verdad no sé mucho de Ajax, es algo a lo que todavía no le dedico tiempo así que bueno, sólo mencionaré las otras novedades respecto al tema: Spry widgets y Spry effects.

Ya entrando a las mejores diferencias para mí está en primer lugar la integración con Photoshop, algo que yo ansiosamente esperaba con este lanzamiento. Yo uso bastante Photoshop así que siempre me pareció natural mantener ambas aplicaciones relacionadas. Es más, Adobe lleva el concepto más allá e inclusive se puede editar el archivo PSD de una imagen tan sólo haciendo doble clic sobre ella.

Segunda novedad, “Verificación de Compatibilidad con Browsers”. Esta nueva característica genera reportes sobre eventuales incompatibilidades e a través de diferentes browsers en lo relacionado a CSS. Definitivamente algo que va a ahorrar mucho tiempo y nos permitirá identificar de manera rápida las partes problemáticas.

Tercera: “Adobe CSS Advisor”. Un enlace a este sitio web con lo último en problemas con CSS en el que también podremos aportar con nuestros descubrimientos. Esta característica es muy interesante ya que es una sección construida en parte por los usuarios.

Cuarta: Layouts en CSS. Así es ahora si tienes problema creando layouts con CSS, Adobe Dreamweaver te hace la vida más fácil, dándote bastantes plantillas básicas hechas en CSS y no sólo eso, ya que con comentarios te ayuda a comprender de una mejor manera el código.

Otras novedades están en el manejo del CSS, y los complementos: Adobe Bridge y Adobe Device Central.

Si bien Dreamweaver 8 fue un primer paso al acercamiento del programa con los Web Standards y la accesibilidad, Dreamweaver CS3 va más allá, creando código lógico y poniendo más fácil el uso de CSS para diseñar. Como siempre viene con excelente ayuda y una clara interfase, que por lo que veo no difiere mucho de la original salvo en algunos detalles. Si puedes dale una probadita, yo lo uso más que todo por la añadida compatibilidad entre los programas de Adobe y los que eran de Macromedia. Con el tiempo y el uso, realmente verás el poder de esta nueva versión.

Para conocer más completamente las nuevas características, visita la página oficial.

Etiquetas: , , , , ,

escrito por Volatto a las 4:02 a. m. 2 comentarios


¿Qué son los Web Standards?

jueves, abril 19, 2007

Mucho he hablado últimamente de los estándares en la Web, pero sin embargo me he pasado el momento de definir a qué se reifere uno cuando habla de Web Standards.

Los estándares de la Web / Web Standards son reglas universales que nos dictan cómo algo debe ser usado, independientemente de cualquier variable (como plataforma o browser por ejemplo). Al utilizarlas nos aseguramos que el sitio tenga compatibilidad y flexibilidad universal. Ya que se basan en razonamiento lógico sin fines comerciales, seguir estas reglas nos lleva a soluciones altamente optimizadas.

Estos standards son creación de la W3C (World Wide Web Consortium)una organización independiente que entre sus miembros cuenta con Google, Intel, AOL, Apple, varias universidades, BBC, Sony, Microsoft entre otros, que contribuyen al desarrollo de la comunidad Web. Los standards encierran un gran número de tecnologías Web, entre las que se encuentran el HTML y el CSS.

Los standards del HTML, se basan en semántica. Este es el proceso de usar tags con significado como “este textoe s un párrafo” o “este tag significa que es un encabezado”. Es éste el corazón del primar paso hacia el éxito de los standards: separar estructura de presentación.

Etiquetas: , , , , , ,

escrito por Volatto a las 2:17 p. m. 0 comentarios


Libro Recomendado: CSS Mastery

Hoy voy a recomendarles un libro: CSS Mastery: Advanced Web Standards Solutions. Y es que la verdad pocos libros me han ayudado a avanzar tanto en mi conocimiento de CSS como éste libro lo ha hecho. Está escrito de una manera fácil de leer y amena, pero sobre todo cumple su misión: explicar el CSS de manera práctica y entendiendo el por qué se hace cada cosa.

Cuando comencé a aprender CSS viendo tutoriales, a pesar de que obtenía resultados no llegaba a entender bien el por qué se hacía cada cosa. Es decir, una cosa es tener el conocimiento técnico para hacer un layout de 3 columnas y otra cosa es entender cómo se construye y por qué funciona. Al llegar a conocer algo recién puedes innovar, añadir técnica y en fin más libertad a la hora de diseñar.

El libro comienza definiendo algunos puntos antes de empezar la práctica: qué es una caja, la estructura del CSS, los atributos, selectores, etc. Esto provee de una base sólida para seguir los capítulos siguientes, en los que Budd ya entra a detallar técnicas en capítulos divididos por elementos de la página: enlaces, navegación, layouts, listas son cubiertos uno por uno. Luego vienen los capítulos que tratan sobre los Bugs, y Hacks, cosas comunes a la hora de diseñar para múltiples browsers. Este es el capítulo más pesado porque de alguna manera se vuelve más técnico (lo que es necesario a la hora de explicar estos temas). El libro finalmente acaba con dos aplicaciones prácticas de los conocimientos en dos muy buenos proyectos. Estos “Estudios de Caso” nos enseñan nuevas cosas y están escritos por los diseñadores Cameron Moll y Simon Collison.

Qué esperar del libro? Conocimiento, creatividad e inspiración. Este libro es perfecto para las personas que están entrando al mundo del CSS, el código semántico y accesibilidad, pero todavía no entienden bien los conceptos básicos. Y también para los diseñadores con conocimientos intermedios que quieren expandir su conocimiento de técnicas.

Compra “CSS Mastery: Advanced Web Standards Solutions” en Amazon.com

Etiquetas: , , ,

escrito por Volatto a las 11:50 a. m. 0 comentarios


El Comercio Rediseña su Sitio Web

lunes, abril 16, 2007

El Comercio Perú rediseña portalEl portal en línea del periódico “El Comercio”, quizás el periódico de más prestigio en el Perú, ha sido rediseñado por el estudio 451. Y aunque por lo que veo el código está lejos de ser totalmente válido para Transitional XHTML, es un gran avance en cuanto a aproximación del proyecto y uso de estilos.

El Comercio entra a la Web 2.0

La principal diferencia que encontrarán respecto a la anterior versión, es que esta se adapta más a lo que es la Web 2.0. Así, se ve que se están usando mucho elementos como tags, feeds RSS, botones de “compartir”, y demás que al final lo que buscan es integrar más a los usuarios en el desarrollo del sitio. Esto no es nada nuevo en otras partes del mundo, y más bien me parece que ya era tiempo que se de este cambio en un sitio de tanta importancia como éste.

Como está en BETA, hay cosas que no funcionan, como por ejemplo la sección CLASIFICADOS o ED. IMPRESA en el menú de arriba. Lo cual me parece un desatino, porque igual la gente busca cierto contenido por ahora desaparecido. (Por ejemplo hoy entré porque necesitaba visitar la parte de clasificados).

Otra cosa es la falta de espacios en blanco. Como saben el espacio en blanco en diseño es tan importante como el espacio digamos “usado” porque sirve para dar orden y respiro a los usuarios (ya que hablamos de diseño web en este caso). A mi me dio por un momento la sensación de sentirme abrumado ante tanta información en la página principal. Especialmente en la parte de abajo, donde noto cierta desorganización. El sitio de New York Times, a pesar de también contar con mucha información se ve más organizado con más espacios en blanco y dándole más importancia a las noticias, que son al final el principal contenido. Otro buen ejemplo sería Variety.com.

Pero ya fuera de estas críticas que todo trabajo de diseño tiene, creo que El Comercio ha dado un gran paso adelante en lo que se refiere a diseño web en el Perú, que ojala influya en el ámbito nacional a diseñadores web y dueños de negocios, para que mejore la calidad de sitios web. Es un paso adelante también en un aspecto más profundo, en el de la interactividad y el rol de los usuarios en este nuevo modelo de Internet.

Etiquetas: , , , ,

escrito por Volatto a las 2:27 p. m. 0 comentarios


Mi Proceso de Diseño Web

martes, abril 10, 2007

A la hora de comenzar un trabajo, no sólo de diseño gráfico, es de gran importancia tener un plan. Un plan nos ahorra mucho tiempo, ya que sabemos a dónde vamos, qué objetivos hay que cumplir, y nos permite sobre todo organizarnos. Es muy fácil perderse en detalles sin importancia y nimiedades sin un plan. En el diseño encierra lo que los diseñadores llamamos “el proceso de diseño”, pero abarca también aspectos como el briefing, planteamiento de objetivos y fechas de entrega.

Cuando uno planea para diseñar en CSS, la traducción de un diseño hecho en Photoshop a códigos HTML y CSS se hace mil veces más fácil.

Verán, los primeros sitios que diseñé con CSS terminaban haciéndose una maraña un tanto confusa, ya que partía de detalles del diseño y sólo iba agregando cosas hasta que al final me quedaba el diseño lo más parecido a lo que quería. Este enfoque qué podría llamarse “por adición”, resulta ser a veces tedioso y largo ya que no sigue un plan definido sino el mal aprovechado instinto de diseño que todo artista gráfico posee. Ahora estoy siguiendo un proceso que me está ayudando más y todo gracias a la ayuda de un papel, mi mente y un poco de paciencia, la temida palabra para personas que sólo quieren ponerse manos a la obra a la producción del diseño en sí.

Este proceso va así:

Paso 1. Definir qué layout va a tener el sitio. Esto lo hago en papel, más o menos ubicando en un dibujo muy simple secciones del sitio. Es necesaria la información de lo que el cliente necesita. Comienzo definiendo lo más simple: 1 columna, 2 columnas, o 3 columnas.

Paso 2. Realizo el draft en Photoshop. Esto me permite hacer cambios rápidos moviendo las cosas nomás. SIEMPRE usando líneas guías ya que más adelante, junto a la Herramienta Regla serán de suma importancia para establecer las medidas en código.

Paso 3. Una vez terminado el draft o drafts, tengo que pasar el diseño a código. Para esto comienzo agarrando una hoja y un lapicero. Cada sección irá en una caja o div, así que escribo los nombres de todas esas secciones, y escribo los números a usar. Ancho de la caja prinipal, márgenes, divisiones, tipo de letra, etc. Todo en lenguaje “humano”.

Paso 4. Ahora es tiempo de empezar con el editor de páginas Web. Yo uso Dreamweaver 8. Contrariamente a lo que hacía antes, comienzo con poner código HTML de estructura tal y como quiero que sea visto por los buscadores y gente discapacitada. Así, evito poner siempre el Sidebar antes que el contenido que es lo más principal. Gracias al CSS es posible hacer esto sin importar que el Sidebar aparezca antes.

Como ven, es solo la estructura, el esqueleto.

Paso 5. Es hora de poner el contenido. Nada de estilos, nada de fonts, nada de colores. El contenido se pone usando tags que le den sentido. Uso h1, h2, etc. para encabezados. Los párrafos encerrados en su p tag. La navegación en listas no ordenadas (ul).

Paso 6. Ya tenemos todo listo para darle el aspecto gráfico que teníamos en mente. Comenzamos entonces armando la estructura, lo que será fácil ya que tenemos todos los números en nuestro papel.

Paso 7. Trabajamos la página sección por sección, definiendo imágenes de fondo, colores, letras, espaciado. En fin, cientos de cosas que podemos hacer con CSS. Yo trabajo de arriba hacia abajo. Definiendo primero fondos y dimensiones, y al final encargándome de detalles.

Paso 8. Una vez que el sitio está terminado hay que probarlo. En realidad lo mejor es ir probando en los varios navegadores mientras avanzamos. Una revisión final nos librará de cualquier problema que el usuario pueda tener.

Paso 9. El paso final, validar el código. Esto nos permitirá corregir errores que no veíamos o se nos chispotearon, como cerrar tags por ejemplo. Al final quedamos con nuestra página validada en código XHTML, cumpliendo los estándares.

Ése es mi proceso, lo más sencillo que puede ser. Claro que siempre hay momentos inesperados como ciertas cosas que cargan bien en Mozilla y no en IE por ejemplo, pero esas cosas entran a tallar más bien en el aspecto técnico y no en el proceso que quiero delinear acá. A pesar de que pueda parecer un poco “rígido” de esta manera, en realidad no lo es, al contrario el diseño va sobre ruedas y uno siente que las cosas están acabándose como se planeaba.

Etiquetas: , , , , ,

escrito por Volatto a las 1:22 a. m. 5 comentarios


Nuevo Diseño : Men's Hair Care Tips

domingo, abril 08, 2007

Este es mi segundo diseño en puro CSS: Men's Hair Care Tips, nada de tablitas y sobre todo entendiendo cada uno de los pasos. El index y el template me tomó un día nomás. El código de este sitio también está totoalmente validado como XHTML 1.0 Transitional, lo que lo hace perfecto en términos de accesibilidad y usabilidad.

A diferencia de éste sitio, MHCT tiene el código CSS en un archivo aparte. Aunque sería preferible dividirlo en varias hojas de estilo. ¿Por qué me preocupo de los estándares? Por una web mejor, si no, lean el post más abajo.

El sitio para los que están interesados brinda consejos sobre el cuidado del cabello para hombres. Y es un relanzamiento a venir, con nuevo contenido e imagen.

Etiquetas: , , , ,

escrito por Volatto a las 2:04 a. m. 5 comentarios


Tips para Una Mejor Tipografía en la Web

lunes, abril 02, 2007

Encontré este enlace en del.icio.us. Linkea a designersmind.com, a un post en el que se habla de cómo escoger la tipografía para algún trabajo.

Más que un "cómo hacer" son tips en cuanto a los temas que nos ocupan a la hora de detemrinar qué cara tendrá nuestro texto y su relación al espacio:

Fuente
Tamaño
Color

Siempre es bueno refrescar estas cosas, recomendada la parte de color en especial donde da una lista y las emociones y connotaciones que cada color conlleva.

Link: Choosing the Right Font for the Job

Etiquetas: , , ,

escrito por Volatto a las 2:07 p. m. 0 comentarios


Web Recomendada: Stylegala.com

domingo, abril 01, 2007


Stylegala, según sus propias palabras, es una "publicación acerca de diseño web y standards". En la práctica, se puede decir que Stylegala nos brinda muchas cosas: una galería de páginas hechas con estándares web, noticas relacionadas al diseño web, foros de discusión, recursos y más.

Es un espacio genial para gente que le gusta el diseño, o el use CSS, o la implementación de los estándares, o las 3! Y de hecho un sitio de referencia para revisar lo que es posible hacer con un buen uso de los recursos. Aunque todavía no termino de explorar en profundidad este sitio, he encontrado muy útil, especialmente para el rediseño de esta página, su sección "Bullet Madness", que no es más que una colección de bullets enviados por los visitantes para uso público en el diseño de sitios. Los bullets que ven al lado de los títulos del sidebar a la derecha los saqué de ahí. La mayoría esta en formato png.

Link: Stylegala

Etiquetas: , , , ,

escrito por Volatto a las 1:05 a. m. 0 comentarios


-->