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 el html y para qué sirve

Posted by maximiliano | Posted in Accesibilidad, Buenas Prácticas, HTML | Posted on 17-11-2009

0

Lenguaje de Marcado Cuando Darcy me invitó a exponer sobre HTML a sus alumnos de periodismo de la PUCV el desafío era, como en muchas charlas individuales, que entendieran en cortos 90 minutos la lógica, objetivo y beneficios de un Lenguaje de Marcado, de hecho él lenguaje de marcado más extendido actualmente.
Lo principal es asimilar que el Lenguaje de Marcado no es un invención digital y mucho menos de Internet. Un claro ejemplo que lamentablemente no pude aplicar es el dictado a viva voz para ser transcrito a máquina de escribir.

“Ponga estilo de carta. ponga comillas, ponga mayúsculas, Estimado Juan, ponga dos puntos, aparte, sangría, ponga primera letra mayúscula, te escribo esta carta, ponga negrillas, de forma muy urgente, cierre negrilla, ya que no me has enviado… etc”. Lenguaje de Marcado

Se puede fijar como su inicio junto con la industria editorial pues consiste principalmente en marcar los textos manuscritos con indicaciones para identificarlo claramente según Presentación, Procedimientos o Descripción. Siendo esta última clase a la que corresponde el HTML.

Para qué sirve

Describir estructura y contenido, complementar el texto con Objetos, se escribe en forma de “Etiquetas” y rodeada por corchetes angulares.

Dicho esto les dejo la presentación que utilicé para la clase.

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)

Haml – Markup Haiku

Posted by maximiliano | Posted in HTML | Posted on 03-11-2008

0

haml LogoHAML – HTML Abstraction Markup Language

También llamado el “Haiku del código” y es precisamente donde el tema me llama la atención.

¿Cómo me entero de esto?

Hace más de un año estoy trabajando en www.sofatutor.de [1] que está desarrollado en Rails que es donde precisamente Haml hace su aparición para prometer limpieza, simplicidad y belleza de código.

Andreas me pregunta si mis entregables serán en XHTML o en Haml. Así me entero de este nuevo lenguaje que a primera vista googleada me hace guiños identados, limpios y ordenados.

Lo que más me llama la atención es que no se deben cerrar etiquetas

Les dejo los primeros vínculos que encuentro relevantes. Si quieres agregar otros que encuentres necesarios, bienvenidos.

Vínculos

[1] Proyecto Alemán de Video Tutoriales con fuerte énfasis educacional. Actualmente estamos en la segunda etapa, implementando más funcionalidades y modificando comportamientos implemetados en la primera.

Partidos políticos online: evaluación

Posted by maximiliano | Posted in Accesibilidad, AyerViernes, Buenas Prácticas, HTML, Normas, Validación, Web 2.0 | Posted on 28-04-2008

1

websPoliticas Una evaluación sobre la presencia en Internet de nueve partidos políticos publicada hoy en El Mercurio en la que participé junto a otros expertos en el medio es clara en su mensaje.

Los partidos políticos tienen mucho por aprender, entender y aplicar online.

En el artículo Luis Goycoolea califica a los sitios evaluados como “réprobos” en relación directa de la evaluación de 1 a 7, sobre los parámetros y evaluadores:

La reprobación en términos web debe ser entendida como una No existencia en internet, en una escala similar donde 7 es existir en internet y 1 es nó existir. Es decir los partidos políticos en internet NO existe para estar y no para comunicarse ni comunicar.

websPoliticasEval01Los criterios de evaluación que consideramos en Diseño con Adolfo fueron:

  • El diseño es coherente en todo el sitio?
  • Look & Feel
  • Rápido despliegue de la página?
  • Diseño Funciona en 800×600 y 1024×768 pixeles?
  • Páginas con exceso scroll?
  • SEO Optimización para Motores de Búsqueda (Acotado al diseño Front)
  • Validación de estándares de la W3C “WWW Consorcio”

Copio a continuación mi evaluación referente a Diseño Front.

websPoliticasEval02Diseño Front
Primero la aclaración sobre ¿Qué es Diseño Front y cómo se relaciona con el Look & Feel? Formalmente es la traducción del diseño visual a la pantalla considerando todas las condiciones que este medio propone. En la práctica es la conversión del mensaje (imágenes y texto) a código HTML y CSS. Entendiendo que se está trabajando con un único objetivo que es hacer accesible la información que quiero entregar. Así existen normas y estándares de la W3C que nos guían para no perder el rumbo y cumplir el objetivo.
Bajo esta perspectiva los sitios evaluados cumplen pobremente algunos de los requerimientos necesarios.

¿Por qué?
websPoliticasEval03 Porque más de la más de la mitad de los sitios generan una carga excesiva ocupando un ancho de banda innecesario traduciéndose en una larga espera para el usuario. No están pensados para buscadores ignorándolos en sus códigos. Solo dos entregan información a las principales fuentes de tráfico (1/3 un tercio de usuarios acceden a los sitio desde buscadores). La mayoría no tiene canales alternativos obligando al usuario a ir a ellos en vez de entregarles la información donde ellos quieran me refiero a RSS.

¿Cómo mejorar esto?
websPoliticasEval04 Tomando una real conciencia de que el diseño no es solo visual y lo que se quiere lograr es comunicación. Aplicándo las normas y estándares W3C nos beneficiamos al crear un producto más accesible, más encontrable generando un circulo virtuoso donde los usuarios encuentran lo que quieren y nuestros clientes logran una comunicación de valor.

Vínculos