Front – Responsabilidad de diseñadores

Posted by maximiliano | Posted in Buenas Prácticas, CSS, HTML, Normas, Validación | Posted on 30-04-2010

23

El diseño visual está lejos de ser “un dibujito a la rápida”, aunque sigo encontrándome con ese tipo de solicitudes. En la web es consecuencia de un proceso cada día más científico de DCU. Pero ¿quién traduce el diseño visual para navegarlo y crear un buena experiencia en los usuarios?

Somos los Diseñadores gráficos que debemos tomar el guante y hacernos responsables y no los programadores o ingenieros.

Nada personal,  es más accesible aprender lenguajes como HTML y CSS por ser más acotados.  En el pasado expliqué ¿Qué es el diseño Front? y teniendo eso en cuenta, lo siguiente.

El dominio del HTML y CSS no basta, si bien es fundamental, no basta. Se necesitan conocimientos y experiencia, como en cualquier oficio o profesión. En este caso, teoría de color, estudio de tipografía, composición de elementos, equilibrios visuales, etc. Elementos que construyen  una sensibilidad que hay que saber utilizar, leer, reconocer e interpretar.

Repito, sin dominar el Front no llegamos a ningún lado. Dominándolo podemos hacer una óptima traducción de la propuesta visual, desarrollada en un lenguaje gráfico, en valores de luces, sombras, pesos visuales, dominios del blanco, etc. plasmando correctamente el objetivo, concepto e idea generatriz del proyecto. Traducción o interpretación que por cierto debe tener sentido, ser semántica.

Cuando no dominamos (Diseñadores, Programadores e Ingenieros por igual) alguno de estos lenguajes, Visual, HTML, CSS es cuando los diseños se distancian de las propuestas visuales, cambian los márgenes, tipografías, desaparecen iconos, etc. y pierde el valor o parte de él, el mensaje que se queire entregar.

El Diseño no es “el arte“. Helarte es lo que sientes antes de congelarte.

Qué es Sprites y por qué debería interesarme

Posted by maximiliano | Posted in Buenas Prácticas, CSS, HTML | Posted on 02-11-2009

3

Como yo ¿Usas Sprites y no lo sabías? por lo menos con ese nombre

Sprites es una técnica front de optimización de sitios basada en la fusión de imágenes en una sola para posteriormente ser separadas mediante CSS.

  • Reduce principalmente el peso de las páginas
  • Disminuye de manera considerable las peticiones HTTP
  • Minimiza sustancialmente la cantidad de imágenes y
  • Optimiza el peso total de los archivos externos al HTML consumiendo menos ancho de banda.

Dejo la presentación de la charla

Escribo un poco de:

Un poco de contexto

Afiche de Charla | Qué es Sprites y por qué debería interesarme

Cuando Juan Carlos me invitó a dar una charla me comentó que se trataba de Sprites y francamente no me sonó para nada el término ¿Sprites? como la bebida, pero cuando me dijo más menos de que se trataba me di cuenta que hace años venía aplicándolo y luego recordé que hace una par de años conocí el término Sprites, el que claramente olvidé. Finalmente armando la clase me di cuenta que tuve la suerte de conocer esta técnica desde que la web la heredó.

Origen de Sprites

Es una técnica que surge con los video juegos, hasta el término suena rancio, estoy hablando de 1980, de la mano de los Atari800 y llega a su máxima expresión en 1992 con Mortal Combat. Juego que revoluciona con una gráfica basada en fotos de actores reales, digitalizadas y aplicadas con esta técnica. Realmente revolucionó lo conocido hasta entonces. Entonces aparece la tecnología 3D que deja la técnica Sprites obsoleta, por lo menos  en lo que a Video Juegos se refiere.

Ejemplo de Sprite (imágen transparente qeu contiene varias ilustraciones independientes)Formalmente son agrupaciones de imágenes generalmente sobre fondo transparente que se muestran por partes de forma enmascarada y pueden llegar a representar movimientos, mediante reemplazos de otras secciones de la máscara.

Sprites en la WEB

La web hereda Sprites por el afán de optimización del Checo Petr Stanicek [1] quien buscando una alternativa a los botones implementados con reemplazo de imágenes mediante Javascript aplica, sin referenciar el término sprites, la técnica utilizando CSS. Disminuyendo considerablemente el peso de las páginas, la cantidad de archivos y por consiguiente los HTTP request y el consumo de ancho de banda.

Antes 10 HTTP request y 40Kb en imagenes - Después 1 Http request y 16Kb en imágenesSolo un año después Dave Shea [2] publica un post bajo el título de CSS Sprites – Image Slicing’s Kiss of Death. Hace referencia a Petr y se convierte en la mayor referencia en la web sobre Sprites con ejemplos muy bien explicados y disponibles para su estudio.

Se encuentra más directamente por Sprites CSS

Bajo estos términos “CSS Sprites” encuentras información relacionada a la Web específicamente al Front (HTML/CSS/Imagenes) pues si buscas solo Sprites llegarás principalmente a los VideoJuegos.

Principales referentes

[1] http://wellstyled.com/css-nopreload-rollovers.html
[2] http://www.alistapart.com/articles/sprites/

Artículos/Tutoriales/Listas/ScreenCast

http://www.tufuncion.com/css-sprites/
http://css-tricks.com/css-sprites/
http://www.alistapart.com/articles/sprites2/
http://www.csslessons.com/
http://adamducker.com/blog/7/use-css-sprites/
http://www.cssblog.es/distintos-metodos-para-utilizar-css-sprites/
http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249/
http://www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites/
http://www.romancortes.com/blog/la-tecnica-de-sprites-css/
http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/
http://www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites/
http://borkweb.com/story/faster-page-loads-with-image-concatenation/
http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/
http://www.from-the-couch.com/post.cfm/title/creating-rounded-buttons-with-css-sprites/
http://trevordavis.net/blog/tutorial/how-to-preload-images-when-you-cant-use-css-sprites/
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials

Generadores de Sprites/CSS/Imagenes

http://spriteme.org/
http://css-sprit.es/
http://printf.ru/spritr/
http://www.floweringmind.com/sprite-creator/index.php
http://drupal.org/project/sprites
http://www.csssprites.com/
http://es.spritegen.website-performance.org/
http://csssprites.org/

Otros

http://es.wikipedia.org/wiki/Sprite_(videojuegos)

El inicio de algo inesperado

Posted by maximiliano | Posted in Accesibilidad, CSS, Normas, Programas, Validación | Posted on 29-04-2008

0

Me entero por la Tercera que se “rediseñará el sistema de pago y control de subvenciones escolares” que en primera instancia me parece una buena medida, clara y directa pero…

¿Qué se puede esperar de esto?

NADA NO SE, la verdad es que me cuesta visualizar algo distinto a SII versión subvenciones. Está claro que es un sitio que no sirve cuando se necesita. Pasa online todo el año menos para el período de la Declaración de Impuestos, que es cuando más se necesita, incluso me han contado que cerca de los 12 de cada mes se marea. Por qué tengo que volver cada una hora para ver si el sistema está accesible o no.

La otra opción es su gemelo Inacap pero ahora que lo veo (hace un tiempo lo cambiaron y pensé que podía hacer mi declaración y matricularme a la vez [risas] …) ¿volvió a lo que era antes? no entiendo… se supone que la evolución de los sitios es para mejor, las versiones deben tener mejoras en relación a la anterior. lo mínimo es que Valide el código HTML, MINIMO.

A lo mejor estoy muy crítico y nos encontramos en un tiempo más con un sistema válido, accesible, social, que considere a todo Chile como potenciales fiscalizadores un sistema 2.0 ¿por qué no?…. porque al analizar la evolución del código de estos sitios me doy cuenta que faltan 20mil años para que algunos desarrolladores entiendan la Web y sus “leyes de gravedad” y terminen de lanzar “nuevos” sitios con códigos que son la mejor muestra de cómo se hacía internet hace 5 años los pensé en vías de extinción pero aún el 2007 hay sorpresas como estas.

Vínculos

Hijax es AJAX Accesible

Posted by maximiliano | Posted in Accesibilidad, Buenas Prácticas, CSS, HTML, Validación | Posted on 20-10-2007

3

Yo se que AJAX y Accesibilidad son perfectamente compatibles y un “vivo” ejemplo de ello es Descorchados en su ingresar a descorchados.

El término “Hijax” fue acuñado por Jeremy Keith en su charla de “Ajax a prueba de balas” en Fundamentos Web 07.

Y es precisamente este término el motivo para escribir este post. Sí porque si bien hoy conocí el término, hace tiempo que estamos implementando AJAX que se comporta bien al quedar funcional “…para aquellos usuarios que no puedan hacer uso de Ajax (por ejemplo, porque quieren o no pueden hacer uso de JavaScript).” como describe muy claramente Sergio Lujan.

Con esto puedo confirmar que esta vez tampoco nos equivocamos! si poh, si para estar liderando hay que estar probando cosas nuevas constantemente porque internet está ES evolucionando y está claro que en pocos meses ya será distinta, más natural orgánica por ejemplo.

Técnicas de implementación Hijax

Existen dos técnicas para implementar, trabajar o desarrollarlo y son conocidas como progressive enhancement y graceful degradation.

Mientras la primera parte de la premisa de hacer las aplicaciones de manera convencional, es decir que primero funcionen sin elementos externos como Javascript e incluso CSS, a lo que yo le llamo trabajar en limpio, tras una evolución progresiva llega al nivel de AJAX requerido sin perder la funcionalidad.

La segunda se plantéa desde la perspectiva de un desarrollo para las tecnologías de punta. Desde donde se debe velar por una degradación agraciada, es decir velar por el buen comportamiento de la aplicación bajo la carencia de una o varias tecnologías.

Recomendación

Yo opté hace tiempo por la primera, principalmente porque:

  • Se plantea “AJAX como un medio y no como un fin” (Permiso Gabriel por la frase :)
  • Al estar al principio del Diseño Front es difícil pasar por alto
  • No corre riesgos de ser olvidado por las entregas a contratiempo
  • Pero por sobretodo porque me comunicaré con más personas. Serán definitivamente más las que acceden a la información.

Las personas seremos las más beneficiados.

Links

Actualización

Como me aclaró Olga Carreras de Usable y accesible el término no es nuevo y fue acuñado el 1 de enero de 2006 a las 7:40, en el artículo Hijax. aunque venía hablando de la “mejora progresiva” desde marzo de 2005.

Agenda de Cursos y Eventos en español

Posted by maximiliano | Posted in Accesibilidad, Buenas Prácticas, CSS, HTML, Validación | Posted on 13-10-2007

0

La agenda de cursos y eventos en España y Latinoamérica es una iniciativa de Gabriel para disponer en un solo lugar eventos y cursos relacionados a estándares web, accesibilidad, usabilidad, AI, HCI, DCU, SEO , blogs…

Encontre que es una muy buena idea, primero porque es en español y segundo por la sorpresa que me conto Gabriel que los eventos de Chile que estan ahora fueron sacados desde mi blog :)

Ahora estoy colaborando con la administracion de esta agenda asi que cualquier evento que consideres relevante agregar puedes escribirme. Para quienes quieran estar informados pueden acceder a los Últimos eventos ingresados.

Administradores:

¿Deseas ayudarnos a actualizarlo y/o incluirlo en tu blog? Escríbeme.

Links

No encontre el acento en ete teclado :( sorry, los corrijo cuando llegue a casa :)