Comienza a trabajar ya con HTML5

La especificación sigue su curso y, dependiendo del navegador, obtendrá mayor o menor soporte. Para averiguarlo, puedes utilizar When can I use, una web de referencia tanto para HTML5 como para CSS3.

Por otro lado, existen una serie de herramientas útiles e imprescindibles para fomentar la compatibilidad hacia atrás y poder así construir sitios y aplicaciones con HTML5 con mayor cobertura. En el blog de Sebastián Thüer encontraréis especificados 10 recursos para comenzar a trabajar con HTML5 ya, destacando principalmente los generadores, plantillas y frameworks (SwicthToHTML5, Initializr, HTML5 Boilerplate, HTML5 Reset) y las librerías javascript que hacen compatible nuestro marcado HTML5 hacia atrás (Modernizr, HTML5Shiv).

Si os atrevéis a picar código “a pelo“, aqui dejo una ya famosa y larguísima chuleta de Tech King, “Ultimate HTML5 Cheatsheat“, que resume eficientemente las nuevas etiquetas y su uso:

<a

Y vosotros ¿ya estáis construyendo sitios con HTML5? ¿Qué problemas os surgen? ¿Creéis que la compatibilidad hacia atrás es una tarea que progresivamente se irá olvidando en favor de los navegadores modernos o es una buena práctica que siempre hay que realizar? Si te apetece, deja tu comentario :)

La cuenta atrás de IE6

Es cuestión de tiempo que Internet Explorer 6 desaparezca de nuestras vidas, llegando a ser un lejano y molesto recuerdo, como en una mañana de resaca. El sitio Internet Explorer 6 Countdown nos muestra la progresiva caída en picado del que en su día (periodo 2002-2003) fue el rey de los navegadores.

Actualización (marzo/2012): Al día de hoy, compañías como Google, WordPress e incluso Facebook han dejado de dar soporte a los usuarios de Internet Explorer 6. En España, sólo el 1,2% de los usuarios hacen uso de IE6.

Fotoilustración: en tierra de nadie

Gracias a las redes sociales en línea de creativos, tematizadas y de índole profesional, se va asentando una nueva Cultura Visual que inunda nuestros fondos de pantallas y enlaces compartidos en Facebook o Twitter. Entre esos nuevos giros o aportes gráficos a la Cultura del Diseño —término en el que otro día nos detendremos— hay una nueva línea gráfica en torno a la fotoilustración (photoillustration) de la que es difícil escapar a sus encantos.

Hay mucho material publicado en torno al flujo creativo que llena la autovía de la fotoilustración, incluso hay miles de tutoriales para conseguir resultados asombrosos a golpe de click, capa a capa en Photoshop. El problema de este huracán de información que encontramos en las redes sociales de creativos en linea es que arrasa con la capacidad de análisis en favor de imitar la forma en el menor tiempo de producción posible. “3 pasos para conseguir fuego en Photoshop“, “5 técnicas para crear un fondo marino en Photoshop“, etc.

Todas esas técnicas y tutoriales están muy bien —me declaro consumidor de esa información— pero… ¿toda fotografía procesada por Photoshop deja de ser fotografía? ¿Cuándo una fotografía es una fotomanipulación? ¿Qué diferencia hay entre una fotomanipulación y una fotoilustración? ¿Donde termina la fotoilustración y empieza la ilustración? Es hora de hacerse las preguntas, aunque no podamos responderlas todas de manera exacta.

“¡Y qué más da, Abel! ¡Qué manía de etiquetarlo todo, qué manía de encasillar!”, dirán algunos. Y es respetable, sin embargo en el caso que nos ocupa es más que necesario por dos motivos:

  • En primer lugar no podemos obviar que es inherente al proceso creativo cuestionarse así mismo constantemente para analizar el mundo en el que se encuentra y situarse en él. Es una actitud que le ha dado nombre y apellido a todos los movimientos pictóricos y fotográficos. Y esta forma de etiquetar la creatividad no debería diluirse en la era digital.
  • El segundo lugar, la definición o etiquetado de una técnica de creación, nos dará un compendio de normas técnicas y estéticas a tener en cuenta. Por lógica estética y formal, habrá prácticas en la producción de una creatividad en formato fotoilustración que nunca funcionarían en una fotografía o en una ilustración.

Definiendo la fotoilustración

Y eso que la fotoilustración no es un invento extraído de las entrañas de la última versión Photoshop. De eso nada. La fotoilustración nace del vientre de la Publicidad (finales del s. XIX) como mecanismo de menor coste (frente a la fotografía) para solventar las necesidades de promoción y posicionamiento de los productos. En el fantástico libro El arte del póster (Editorial Lisma) podemos hacer un seguimiento de su evolución, desde lo estrictamente pictórico o el Collage, pasando por la ilustración con base fotográfica (ej. Gil Elvgren) hasta los días de la era digital.

Este aspecto de la fotoilustración quizás sea el más importante: la conjunción de sus elementos simbólicos generan un mensaje o historia en la mente del receptor, unas veces más abstracto que otro. Es un valor añadido que la fotoilustración hereda de su madre la ilustración. La diferencia entre fotoilustración y fotomanipulación es prácticamente imperceptible visualmente. Quizás a un nivel más filosófico parece que, a diferencia de la fotoilustración, la fotomanipulación no tiene la obligación de incluir un mensaje, funcionando como escaparate de lo estrictamente estético. Con esto llegamos a un punto en que podemos definir la fotoilustración. En el blog Acerca de la fotografía usan estas palabras:

Podemos considerar que es fotoilustración toda imagen fotográfica, sea compuesta de fotografías en collage y fotomontaje, electrónicos o convencionales; o de fotografía combinada con otros elementos gráficos que cumpla con la función clásica de la ilustración. Esta función la podemos resumir como aquella que tiene como finalidad la mejor comprensión de un objeto, de un hecho, de un concepto o de una idea, bien representándola miméticamente o bien interpretando visualmente rasgos esenciales para su comprensión, a través de procedimientos de retórica visual y de simbolización.

La producción de la fotoilustración

Llegados al punto en que hemos definido en la medida de lo posible la fotoilustración, tenemos que plantearnos una cuestión antes de buscar “cómo hacer fuego con Photoshop” o “cómo simular un fondo marino con un par de filtros“: ¿Qué quiero contarle al mundo con esta fotoilustración?.

Siendo así cómo habrá que valorar la calidad del trabajo; promedio de destreza técnica y retórica visual. Ambos lados de la balanza deberán estar compensados. Por otro lado, para diferenciarla aún más de la fotografía y la fotomanipulación, la fotoilustración podría permitirse saltarse las leyes de la física, la perspectiva, la proporción, etc…, en favor de acentuar la retórica o simbolismo gráfico del mensaje o historia que queremos hacer llegar. A pesar de ello, la línea entre la fotoilustración, la fotomanipulación, el diseño gráfico y el arte digital sigue siendo a veces imperceptible.

Creativos de referencia

Sven Prim, Jerico Santander, Peter Jaworowski, Matthew Albanese, Alberto Seveso, Pawel Nolbert, Archan Nair, Roberto Gamito, Marcin Cecko, Mike Campau y Peter PRN es un pequeño extracto de la infinita lista de nombres que componen el campo de la fotoilustración y la fotomanipulación.

Comprobaréis que los orígenes son diversos: unos fotógrafos, otros ilustradores, otros diseñadores gráficos… Absolutamente todos reconvertidos en esta nueva especie de malabaristas de la retórica visual y los filtros de Photoshop.

Trabajando CSS en equipo (I)

El proceso utópico en el desarrollo de un website sigue una serie de pasos tan marcados que podríamos designar grupos de tareas a un perfil profesional específico. Lo utópico es complicado de alcanzar, especialmente cuando las estimaciones de tiempo de producción se acortan en favor de un mejor servicio. Y es ahí donde nacen perfiles mixtos (diseñador de interacción/diseñador web; diseñador web/maquetador; maquetador/desarrollador).

A su vez, estos perfiles mixtos provocan que el desarrollo de una tarea pase por varias manos —en este caso, la creación de la Hoja de Estilos—. ¿Quieres ahorrarte más de un mail o reunión con tus propios compañeros? ¿Quieres hacer el trabajo más fácil a lo demás y obtener ese detalle de vuelta? Os dejo aqui algunas ideas que he experimentado en los últimos años y que harán el trabajo mucho más fluido cuando el código baila de un editor de texto a otro:

Crea un arsenal de estilos genéricos

¿Cuantas veces has tenido que crear una clase nueva porque, en una sección determinada, la caja necesitaba un padding superior de 10 pixels? ¿Cuántas veces has tenido que añadir otra clase para pintar de una manera especial un único texto específico? ¿Cuántas veces has necesitado modificar el alto de un contenedor con la llegada, a última hora, de una caja diferente?

Todo esto provoca ruido en tu Hoja de Estilos y hace que lo que comenzaste creando de manera ordenada se transforme en un gallinero de clases específicas para un sólo elemento. Esa no es la idea: ya sabes que una clase debe aportar valor a un cojunto de elementos similares, sino estaríamos hablando de un identificador. ¿Cómo preverlo? Crea un arsenal de clases con valores genéricos:

/* VALORES GENERICOS */

/* limpiar flotacion */
.clear {clear:both;}

/* flotacion */
.flota-izquierda {float:left;}
.flota-derecha {float:right;}

/* textos */
.alineacion-derecha {text-align:right;}
.alineacion-izquierda {text-align:left;}
.justificado {text-align:justify;}
.centrado {text-align:center;}
.subrayado {text-decoration:underline;}
.tachado {text-decoration:line-through;}

/* disposicion */
.disponer-bloque		{display:block;}
.disponer-linea		{display:inline;}
.oculto			{display:none;}

/* padding 5  (repetir con padding 10, 15, 20, etc...) */
.padding-5 {padding: 5px !important;}
.padding-top-5 {padding-top: 5px !important;}
.padding-right-5 {padding-right: 5px !important;}
.padding-botom-5 {padding-bottom: 5px !important;}
.padding-left-5 {padding-left: 5px !important;}

/* margin 5 (repetir con margin 10, 15, 20, etc...) */
.margin-5 {margin: 5px !important;}
.margin-top-5 {margin-top: 5px !important;}
.margin-right-5 {margin-right: 5px !important;}
.margin-botom-5 {margin-bottom: 5px !important;}
.margin-left-5 {margin-left: 5px !important;}

/* anchos genericos (agregar mas si necesitas) */
.width150 {width:150px !important;}
.width140 {width:140px !important;}
.width130 {width:130px !important;}
.width120 {width:120px !important;}
.width110 {width:110px !important;}
.width100 {width:100px !important;}

/* alturas genericas  (agregar mas si necesitas) */
.height150 {height:150px !important;}
.height140 {height:140px !important;}
.height130 {height:130px !important;}
.height120 {height:120px !important;}
.height110 {height:110px !important;}

Justificando el uso de !important;

Es cierto que se abusa en esta propuesta del valor !important;. La idea es anteponer estos valores a cualquier otro indicado a un elemento HTML. Teniendo presente que estos valores genéricos se deberían situar al principio de nuestra Hoja de Estilos, la propiedad !important lo que hará es luchar contra la herencia provocada por la cascada.

Modo de empleo

De esta manera si tuviéramos que modificar valores en una caja ya creada, del tipo:

Lorem ipsum dolor sit amet

Podríamos hacerlo cómodamente con los valores de nuestro “arsenal”:

Lorem ipsum dolor sit amet

Notas

  • La idea es nombrar las clases con la propiedad que contienen para comunicar al compañero los últimos cambios aportados al elemento a través de la maquetación . Leyendo el código podemos averiguar qué modificaciones se han realizado
  • Insisto: el motivo de crear el arsenal es agilizar las correcciones de última hora o indicar salvedades en cajas y otros elementos. Aunque podríamos construir una página completa con un buen arsenal de estilos, no lo aconsejo. Para maquetar normalmente se ha de seguir los conceptos generales en el desarrollo de las Hojas de Estilo (cascada y herencia).

El el siguiente artículo veremos otras metodologías que nos facilitarán el trabajo y desarrollo en equipo de las Hojas de Estilo.

Parece que el plugin Syntax Highlighter provoca algunos fallos de presentación en el código CSS propuesto. Si quieres copiarlo, utiliza la vista de texto plano por favor. Disculpa las molestias.