Sebastián Thüer

Comunicación, diseño y tecnología

css

Diseño web con HTML5: 10 recursos para comenzar ya

· ·

El HTML5 está a la vuelta de la esquina. Aunque la especificación todavía no está aprobada, cada vez más diseñadores y desarrolladores web se animan a iniciar sus proyectos con el futuro estándar. Para que iniciar un proyecto en HTML5 no sea un quebradero de cabeza, acá hay una recopilación de diferentes recursos que permiten comenzar rápidamente el diseño web en la nueva versión del HTML.

Está lista actualiza el viejo post de 2009 con 5+5 recursos para HTML5. Si no tenés idea de HTML5, mirá primero HTML5 para diseñadores web.

1. Modernizr

Moderniz es una librería JavaScript que permite incorporar HTML5 y CSS3 a tus proyectos sin que los antiguos navegadores que no soportan las nuevas tecnologías queden imposibilitados de ver tu sitio. Por ejemplo, se pueden utilizar los nuevos tags semánticos como HEADER, SECTION o FOOTER sin tener que preocuparse por no estar soportados en Internet Explorer.

2. HTML5 Shiv

Una librería específicamente desarrollada para que las etiquetas HTML5 y CSS3 puedan ser interpretadas por Internet Explorer. El proyecto está hosteado en Google Code y no que hay que descargar ni configurar nada. Basta incluir unas líneas en el código y es suficiente.

3. HTML5 Boilerplate

Es una plantilla HTML5 para desarrollar rápidamente un proyecto con las opciones y configuraciones más habituales. No es un framework, sino solo una recopilación de diferentes técnicas y trucos comunes en todo proyecto web que utilice HTML y CSS3.

4. Initializr

Es un proyecto que funciona como una recopilación de diferentes librerías y recursos de HTML5. En su página web elegimos una serie de opciones a partir de las cuales nos genera un ZIP con todos los archivos necesarios. Puede incluir Modernizr, HTML5 Shiv, jQuery, configuración para .htaccess y más.

5. HTML5 Reset

Se trata de una completa plantilla que incluye todos los elementos más habituales en un proyecto con HTML5. Incluye HTML, CSS y JavaScript. Hay tres versiones disponibles que van desde la completa con comentarios muy buenos para aprender y la básica solamente con la estructura general.

6. Switch To HTML5

Un sencillo generador online de HTML5 basado en una serie de opciones que puede definir el usuario. Ideal para comenzar y obtener resultados rápidos sin complicarse demasiado.

7. HTML5 Lint

Con HTML5 la validación del código es un asunto delicado. En lugar de la consistencia que proponía el escricto estándar XHTML, HTML5 vuelve a ser más laxo y mantener el código coherente se hace más difícil. HTML5 Lint ayuda a los desarrolladores a mantener la consistencia original en HTML5 a través de una serie de opciones que validan la escritura en minúscula, el uso de comillas para los valores de atributos, el cierre de todas las etiquetas y otras reglas de sintaxis. Ideal para puristas del código.

8. HTML5 Doctor

Uno de los primeros sitios dedicados a HTML5 que se ha convertido en una verdadera fuente te recursos para este lenguaje con publicación regular de artículos, novedades y algunos tutoriales. También es interesante su sitio hermano HTML5 Gallery con una muy buena selección de sitios web que implementan HTML5.

9. HTML5 Rocks

Otro excelente centro de recursos sobre HTML5 con el auspicio de Google y del que ya publiqué una presentación sobre HTML5. HTML5 Rocks combina información con tutoriales y al mismo tiempo nos deja ver en vivo las mejoras que ofrece el nuevo lenguaje de la web. Para pasar un buen rato recorriendo y aprendiendo.

10. HTML5 Reference Poster

Un impresionante poster de 10 x 7 metros con un buen resumen de las especificaciones del HTML5. Un diseño equiibrado y armonioso junto a el uso de iconos ayuda a identificar fácilmente los diferentes aspectos de la nueva especificación. Un buen recurso de decoración-consulta en la oficina y para clases de tecnología.

#Bonus: HTML5 for Beginners

HTML5 for Beginners

HTML5 for Beginners es un libro escrito por Jeremy Keith especialmente para diseñadores web que quieran iniciarse en los futuros estándares de la web. De manera ágil y sencilla, Keith introduce las principales novedades de HTML5 con ejemplos y casos prácticos. Un texto breves pero tremendamente útil publicado por A Book Apart. Cuesta 18 dólares más envío en versión papel y 9 dólares el eBook (ePub y PDF abierto sin restricciones).

Ilustración principal a partir de una imagen de BigStockPhoto

¿Un diseñador web debe saber HTML?

· ·


Parece una obviedad. Sin embargo, la pregunta sobre si un diseñador web debe ser capaz de escribir código HTML y CSS todavía da vueltas y en Six Aparts publican un post sobre el tema. Los argumentos de aquellos que dicen que no, minoritarios por cierto, vienen a decir más o menos que en realidad lo importante es conocer los principios y fundamentos del diseño, ser bueno en ello y que saber escribir en HTML y CSS puede ser una ventaja pero no es imprescindible.

Los editores visuales, fundamentalmente Dreamweaver, permitieron que muchos comenzaran a diseñar sitios web sin preocuparse demasiado por el código ya que el propio programa se encargaba de generarlo. Pero hoy en día también hay herramientas como BaseKit que te permiten subir un PSD y automáticamente lo procesan para generar el código. Además, cada vez son más las empresas con servicios «PSD 2 HTML» que permiten enviar un diseño en Photoshop y te devuelven el código listo para utilizar.

La respuesta,desde mi punto de vista, es obvia: un diseñador web debe ser capaz de comprender y escribir código en HTML y CSS. Porque aunque pueda generar código automáticamente o tercerizar la tarea, el trabajo fino sobre los detalles -que es finalmente lo que hace la diferencia- no puede hacerse si conocer estas herramientas. Pero también es cierto que depende del perfil de cada diseñador, porque no es lo mismo alguien que produce bocetos, organiza el marketing que el webmaster que se encarga más de los aspectos técnicos, algo ya visto en qué debe saber un diseñador web.

Una anotación al margen: aunque parezca extraño, muchas veces los propios programadores tiene problemas para generar código HTML estándar y compatible con todos los navegadores. Producir buen HTML no es algo tan común como se piensa.

Consejos para escribir código CSS comprensible

· ·

Se puede decir que hay tantas maneras de escribir código como cantidad personas que programan. Sin embargo, existen ciertos estándares y convenciones que facilitar a que otra persona pueda comprender lo que hemos hecho y sean capaces de modificarlo. Lamentablemente entre muchos diseñadores web esta práctica no existe y van escribiendo las líneas del CSS  a medida que lo necesitan sin orden ni estructura lógica. Al ser el CSS un «lenguaje» enunciativo donde no hay variables, bucles ni estructuras lógicas muchos se limitan simplemente a definir clases y atributos de manera secuencial y desordenada.

En SpyreStudios publicaron  10 Great Tips for Writing Better And More Comprehensive CSS donde proponen una serie de prácticas sencillas de implementar pero que facilitan enormemente la lectura de un archivo de estilo.   Y la verdad, son cosas muy fáciles de hacer pero que facilitan enormemente el diseño web, especialmente cuando se trabajo en grupo o hay que pasarle el trabajo a otro diseñador.

Algunas me parece útiles, otras no tanto pero acá está la lista:

  1. Comentar el código
  2. Usar las sangrías
  3. Usar la notación taquigráfica (shorthand code)
  4. Una línea por cada regla
  5. Mantener los hacks fuera del archivo principal
  6. Uas nombras significativos para clases e IDs
  7. Eliminar clases e IDs no utilizados
  8. Ordenar alfabéticamente el nombre de las clases
  9. Combinar selectores
  10. Agrupar el código y divirlos en varios archivos

Solución sencilla para un formulario de selección múltiple usable

· ·

La selección múltiple de elementos suele ser un dolor de cabeza la hora de trabajar con formularios. Por defecto el HTML nos da tres elementos para diseñar la interacción del usuario con opciones cerradas:

La casilla de verificación o check box, que se utiliza cuando el usuario puede escoger más de una opción de un grupo de elementos.

Check box, para seleccionar uno o más elementos
Check box, para seleccionar uno o más elementos

Los radio buttons para escoger entre una sola opción de un grupo de elementos.

Radio buttons, para seleccionar una sola opción
Radio buttons, para seleccionar una sola opción

Las cajas de selección o select box que muestran por defecto una sola opción pero permiten escoger otras hacemos clic sobre ellas.

Cuadro de selección o select box
Cuadro de selección o select box

Cuando tenemos muchas opciones para ofrecerle al usuario normalmente no queremos saturarlo y usamos el select para que vaya recorriendo el listado a su conveniencia. El problema es que si queremos ofrecerle la alternativa de elegir más de un ítem la forma de hacerlo es muy poco natural: el usuario deben presionar la opción y mantener presionada la tecla control.

Cuando hacemos uso de esta opción normalmente colocamos la referencia debajo ya que se trata de una opción mayormente desconocida. Para facilitarle un poco el proceso normalmente hacemos que el cuadro de selección se expanda hasta que muestre 2 o 3 opciones, con lo cual damos a entender que existe la alternativa de elegir más de un elemento.

Selección múltiple en un select box
Selección múltiple en un select box

Una solución sencilla que ofrece una mejor experiencia de usuario es emplear casillas de verificación con una barra de desplazamiento como el siguiente ejemplo.

Selección múltiple con check box
Selección múltiple con check box

Solamente hay que agregar un poco de CSS:

div.multiple {
	height: 100px;
	overflow: auto;
	background:#eee;
	border:5px solid #eee;
	margin:0 0 1.5em 25px;
}

Y el HTML quedaría algo así



1. ¿Cuáles de estos periódicos lees?


                
                

                
                

                
                

                
                

                ...

Existen otras soluciones más sofisticadas como usar Web Forms 2.0 o algún framework de JavaScript como jQuery, pero esta solución está bien para algo simple y sin agregar demasiado código.

Tutorial para pasar un diseño de Photoshop a HTML

· ·

Pasar un diseño de Phothop a HTML

Pasar un diseño de Phothop a HTML

Transformar una imagen en Photoshop o Illustrator en HTML y CSS es uno de los pasos claves en el diseño web. Para mí representa un verdadero desafío analizar una imagen y descomponer sus elementos de una manera armónica y natural para que el código generado sea comprensible.

En Nettuts++ publican un muy buen tutorial de los pasos a seguir para que tu boceto en Photoshop se transforme en HTML. Curiosamente no ha sido escrito por un diseñador experimentado sino por una estudiante de filosofía que se dedica al diseño web como hobby.