Sprites, tips y mejores practicas

No es una técnica nueva, pero el uso de sprites CSS, en lugar de un conjunto de imágenes sueltas/individuales más pequeños, acarreara como beneficio, una mejora en el rendimiento de las páginas web y mantendrá las cosas más organizadas. Veamos algunas de las mejores prácticas y algunas herramientas útiles para el flujo de trabajo con sprites.

new-google-sprite-november-2009

En términos de CSS, sprite es un archivo grande que contiene varias imágenes para ser utilizados en distintos lugares del sitio web, el ahorro de tiempo de carga y espacio web, es muy significativo con el uso de esta técnica.

La característica principal de la utilización en las hojas de estilo CSS la técnica Sprite es que el servidor sólo tiene que enviar un archivo de imagen que contiene todas las imágenes, y no una serie de imágenes individuales – ya través de CSS puede mostrar cualquier pequeño segmento de ese archivo como fondo de un elemento, evitando de esta manera, las peticiones HTTP al servidor por cada una de las imágenes separadas.

Es importante mantener el número de peticiones HTTP de un sitio lo más bajo posible, ya que los navegadores sólo pueden hacer un número limitado de solicitudes de cualquier servidor al mismo tiempo.

35-social-icons-sprites

Combinando las imágenes en un solo archivo, no sólo se va a disminuir considerablemente el número de peticiones HTTP, pero también disminuirá el tamaño total del archivo de las imágenes.

Enfoques

Hay dos enfoques “comunes” al utilizar la técnica sprites: hacerlo antes o después de la creación del sitio.

La primera: comenzando a la par con el proyecto, es decir de abajo hacia arriba, para ello se va a tener que actualizar el CSS para adaptarse, a medida que avanza el proyecto.

La segunda: como alternativa , se puede crear todas las imágenes como archivos separados, lo que hace a la edición de ellos mucho más sencillo. Una vez que el sitio este construido con todas las imágenes por separado, lo que queda es compilar de forma manual, (o utilizar una herramientas para ello)

Basado en mi experiencia, yo recomendaría utilizar siempre la segunda opción, ya que es más escalable.

images

Tips

Mantener todo organizado

Al colocar las imágenes en Photoshop (o cualquier otra herramienta que se este utilizando) es una buena idea tratar de organizar las cosas con la mayor claridad y facilidad posible. el redondeo (en tamaño) de las imágens a ser utilizadas es importante. Otro punto importante es el espacio entre imágenes, se debe intentar una cierta cantidad uniforme de espacio entre imagen e imagen. Esto ayudara al momento de escribir todo el CSS que lo acompaña, ya que no se tendrá que mantener la medida desiguales ni recordar coordenadas complejas.

Esperar hasta el final para definir todas imagenes con la técnica Sprite

Si se pone todas las imágenes en sprite, pasando bastante tiempo escribiendo el CSS y luego se decide/necesita una edición de imágenes, esto puede puede causar serios problemas, sobre todo si las imágenes necesitan un cambio de tamaño o redimencion, lo que significa que se tendrá que invertir mucho tiempo y esfuerzo en volver a definir posiciones.

El nombre de las etiquetas es fundamental

Si se utiliza Photoshop u otros editores de imágenes, entonces es una buena idea para mantener las capas de cada uno de sprites muy bien etiquetados y agrupados, así todo está muy claro si se tienen que modificar más adelante.

Esto debería ser una regla general para la mayoría de los diseñadores. Esto ahorra tiempo en el etiquetado si se ha tenido una hoja de estilos con sprites muy grande.
Por el lado del código CSS las etiquetas son definitivamente necesarias para confirmar que la imagen sprite se está seleccionado por el código/nombre respectivo.

grid

Algunas herramientas que nos van a ayudar al realizar imágenes Sprites:

http://www.spritecow.com/
http://es.spritegen.website-performance.org/
http://spriteme.org/
http://wearekiss.com/spritepad
http://csssprites.com/
http://www.spritebox.net/

Magic Clip, eliminar el fondo de una imagen online

Cuando se trata de edición de imágenes, puede resultar una tarea compleja para quienes no tengan muchos conocimientos en diseño/edición de imágenes, incluso el cambio/retoque más pequeño puede convertirse en toda una tarea titánica para llegar a los resultados deseados.

editores

Para fortuna de muchos, en Internet existen nuevas herramientas, como es el caso caso de Clipping Magic, una interesante herramienta online y gratuita.

La característica principal de este servicio en la nube es eliminar el fondo de una imagen.

clippingmagic

Los pasos para eliminar el fondo de una imagen con Clipping Magic son muy sencillos:

  1. Subimos la imagen que queremos editar, (Drag and Drop) arrastrando y soltando o mediante el botón para seleccionar el archivo.
  2. Marcamos la zona que queremos mantener en la imagen, para ellos utilizamos el Pincel Verde de la herramienta. Solo basta con hacer clic sobre dicha parte y listo.
  3. Ahora con el Pincel Rojo vamos a marcar la parte de la imagen que queremos eliminar, que normalmente seria el fondo de la misma. Veremos como automáticamente dicha zona desaparece dejando solo la parte señalada en el paso anterior.
  4. Guardamos nuestra nueva imagen y la descargamos si estamos satisfechos con los resultados.

Destacar que el uso de esta herramienta es gratis y no requiere ningún registro.

Dirección: Clipping Magic

Google Web Designer

Google no hace mucho ha anunciado el lanzamiento de Web Designer, una nueva herramienta para la creación de anuncios en  HTML5. La compañía dio alguna información escueta de este lanzamiento en junio, pero no tenía nada concreto ni oficial. Web Designer, que Google llama una “herramienta de diseño de calidad profesional”, es ahora oficialmente un beta pública y disponible para su descarga, tanto para Mac y Windows. google-web-designer2 Google Web Designer es una aplicación web avanzada creada con HTML5 que le permite diseñar y compilar anuncios HTML5 y otros tipos de contenido web mediante una interfaz visual y de código integrada. Con la vista de diseño de Google Web Designer puede crear contenido con herramientas de dibujo, texto y objetos en 3D, y puede, además, animar objetos en una cronología. Una vez que haya terminado de crear su contenido, Google Web Designer genera archivos HTML5, CSS3 y JavaScript limpios y legibles. google-web-designer Entre las principales características de esta herramienta, están:

  • Crear animaciones sobre HTML5 con un herramienta de diseño “intuitiva” pero robusto al mismo tiempo.
  • Trabajar automáticamente sobre cualquier plataforma, incluyendo DoubleClick y AdMob
  • Ver y editar el código que se genera detrás de un diseño
  • Reflejar las ediciones de manera automática
  • Actualizaciones de producto de manera automática
  • Acceso gratuito a la descarga y uso de la herramienta

Si realmente se esta interesado, Google a publicado un canal oficial en YouTube, o si lo prefiere puede acceder al Foro. o la página en Google+. Como todavía se trata de una version Beta, Google esta recibiendo mucho feedback con sugerencias y errores encontrados. google-web-designer1 Es de destacar que ya existían herramientas muy parecidas, como el Adobe Muse, Reflow y otros, que incluyen varias de las características de Google Web Designer, pero al estar esta última, disponible de forma gratuita, obliga a mejorar a la competencia.

Favicon en Web, mobiles y Tablets

En esta oportunidad les hablare de la importancia del favicon (favorit Icon), y de su correcta insercion en páginas Web, dispositivos mobiles y Tablets (tanto android y iOS).

Sin ingresar en lo obsevivo, detallo a continuacion, lo que yo considero, lo básico y lo neceasrio para lograrlo:

HTML

La forma más básica de mostrar un favicon en la mayoria de los navegadores Web, es simplemente colocando un archivo con la extencion .ico en el directorio raiz del servidor.

Ahora, si lo que queremos es asegurarnos la presencia de nuestro favicon, podemos vincularlo en la cabecera de nuestro codigo:

favicon_basic

Referencia:  http://es.wikipedia.org/wiki/Favicon

Para iOS 2.0+, Android 2.1

Para los usuarios de dispositivos moviles con versiones de iOS 2 o superior y Android 2.1 o superior podemos utilizar:

favicon_ios

Tanto en iOS y Android el nombre del archivo que debemos utilizar es favicon-152.png, este archivo se autoescala para los distintos dispositivos.

Para dispositivos Apple

Para lograr mostrar un favicon en distinto tamaño, opción muy útil en dispositivos de la Apple debemos utilizar:

favicon_ios2

Formato de imagen y dimenciones:

Para la mayoría de los navegadores alcanza con utilizar una imagen de 16×16 o 32×32 pixeles. En cambio para dispositivos iOS o Android podremos utilizar archivos más complejos con un tamaño de 152x152px.

Tips

Estos tips serviran  para cuando no se visualizen los cambios (algo que muy habitualmente suede)

  • Borrar la cache del navegador.
  • Abrir y cerrar (en general funciona con Internet Explorer).
  • Abrir más pestañas si la actual no se refresca.
  • Agregar un parámetro al archivo para forzar la actualización (lo mismo que se suele hacer con archivos CSS)

favicon_parametros

Favicon con animación, imagen y video

Favicon.js, una libreria en JavaScript, está un paso mas adelante, ya que permite diferentes tipos de transiciones y animaciones, compatible con video html5, y live stream de la webcam. Desafortunadamente, no tiene soporte para Safari ni Internet Explorer (por el momento).

favicon_jsPara mas información:

Como una nota final , cabe hacer notar que no es valido favicon.png en la especificación HTML5 de W3C, solo favicon.ico http://www.w3.org/TR/html5/links.html#rel-icon

Prueba de RWD en dispositivos Móviles con Adobe Edge Inspect

Cuando se diseñan y crean sitios Webs Responsive y llega el momento de probarlos, lo que generalmente se hace es probarlos reduciendo el tamaño (arbitrariamente) del browser, o en el mejor de los casos hacer uso plugins como “Web Developer”, ya sea para Firefox o para Chrome.

Pero, la realidad nos demuestra que no existe ningún sustituto, lo mejor siempre será probar directamente el sitio Web en un dispositivo móvil real. Los browsers en dispositivos móviles tienen algunas características peculiares y diferentes que las versiones de escritorio, por lo que hace mas fácil encontrar los posibles errores e investigar problemas técnicos que pueden ocurrir.

En este articulo, se pretende mostrar como realizar las pruebas, directamente en un dispositivo móvil, utilizando una herramienta de Adobe Adobe Edge Inspect.

edge-inspect-cover

Adobe Edge Inspect

En primer lugar es necesario instalar la aplicación Adobe Edge Inspeccionar, que se puede descargar desde Adobe Creative Cloud con una cuenta.

edge-inspect-isntall

edge-inspect-isntall1

Después de instalar la aplicación, se abrirá una venta para introducir los datos de usuario (cuenta Adobe Creative Cloud). A continuación, lo que queda es instalar la extensión para Google Chrome de Adobe Edge Inspeccione , y posteriormente la aplicación para dispositivos móviles, tanto para dispositivo iOS y Android  (en el momento de escribir estas líneas).

Instalando la extensión para Google Chrome

Google Chrome es impresindible para la interacciones y control con los dispositivos utilizando Adobe Edge Inspect.

Para ello necesitamos podemos instalar la extencion desde la Chrome Web Store.

Conexión A Dispositivos Móviles

Una vez que se termino de instalar, tanto la extención de Chrome como la aplicación en los dispositivos móviles, ahora se puede conectar de su computadora a su dispositivo móvil, en este caso (par mi) un dispositivo Android.

Hay que asegurarse de que los dos dispositivos están en la misma conexión inalámbrica – WIFI, y tambien que la extensión de Chrome está en la posición ON. A continuación, detectar su equipo y le dará una contraseña de 6 dígitos para conectarse.

edge-inspect-phone

Ahora solo queda introdicir el código de acceso dentro de la extensión de Chrome.

edge-inspect-chrome

Prueba Web

Una vez que el código de verificación ha sido aceptado y los dos dispositivos están conectados, cada vez que abre una página web en Google Chrome (cuando Adobe Edge Inspect se está ejecutando), entonces al instante se mostrará en el dispositivo móvil conectado.

edge-inspect-prueba

Conclusión

Esta es la manera más recomendada de realizar pruebas de diseños Responsive Design. Como comentario adicional, decir que la versión Pro de Adobe Edge Inspect, permite conectar más de un dispositivo móvil al mismo tiempo.

Generadores HTML5

HTML5 y CSS3 tienen nuevas características para los que trabajamos en el diseño y desarrollo Web, y en este artículo se pretende mostrar algunas de las mejores herramientas que se necesita para poder dominar estas nuevas características.

Tenemos que recordar que dentro del estándar de la W3C (borrador html5: http://www.w3.org/html/wg/drafts/html/master/ css3: http://www.w3.org/Style/CSS/current-work), no solo esta la sintaxis (header, footer, nav, video), sino también herramientas como almacenamiento local, canvas, svg, websocket y todas esas características que visualmente hacen que una Web tenga buena acogida.

También es bueno recordar que estas nuevas características aún no son totalmente compatibles con los motores de renderizado (browser).

A continuación una lista de la que probe:

Generadores HTML5

Los generadores de HTML, son básicamente, una plantilla ya completo y listo para poder trabajar sobre ella. entre las mas importantes están:

INITIALIZR
http://www.initializr.com/

Initializr es un generador de plantillas HTML5 para ayudar a empezar con un nuevo proyecto basado en HTML5 Boilerplate. Genera una plantilla personalizable, limpio, con todo lo que necesita para empezar.

ini

HTML5 Template Generator
http://shikiryu.com/html5/

HTML5 Template Generator es mucho más completa que la anterior opción. Ya que permite agregar características (titulo, descripción, autor, etc.) dentro de un frameword muy robusto como los es Blueprint (http://www.blueprintcss.org/) o sobre HTML5 Boiler Plate (http://html5boilerplate.com/). Además de  agregue librerias  de terceros (jQuery, Google Analitics) muy populares.

html5

Quackit HTML5 Generador
http://www.quackit.com/html/html_generators/html_code_generator.cfm

Este es un generador bastante genérico y básico, el cual permite introducir gran parte de información inicial de un proyecto Web. Lo que realmente llama la atención es que no solo genera HTML, sino también CSS. Para los que recién están aprendiendo a utilizar hojas de estilo en cascada, les caerá como anillo al dedo.

code_generator

Switch to HTML5 Generator
http://switchtohtml5.com/

Este es un generador bastante interesante. Lo que hace es que te permite generar una estructura de forma rápida y fácil, pero a diferencia de HTML5 Boilerplate, éste permite determinar el uso especifico de etiquetas pertenecientes a HTML5 (header, section, nav, aside, footer, etc.).

SwitchToHTML5

Usando @font-face en Diseño Web

Uno de los más grandes errores al utilizar el selector @font-face de CSS3, es el uso de tipografías en formato OTF regular o TTF, en lugar de los formatos de fuente recomendadas WOFF (Web Open Font Format) y EOT (exportable OpenType ). Los formatos de fuentes tradicionales (TTF, OTF), son de uso, principalmente para imprenta.

Ahora, con la amplia adopción de @font-face, en diseño y desarrollado Web, no debe  ser una preocupación el navegador o motor de renderizado que utilice el visitante de una determinada pagina Web, y asegurarse de que cada fuente se muestra como debe ser. Esto, antes,  era un problema, la compatibilidad entre diferentes navegadores.

Hay que tenga en cuenta que no en todos los sitios Web se mostrarán las fuentes de la misma manera (cuando se esta hablando de TTF y OTF). Algunos navegadores mostrarán las tipografías  TTF y  OTF muy bien, mientras que otros les darán los bordes “dentados” y muy poco atractivos. A continuación se muestra un ejemplo de tipografía TTF vistos en Google Chrome.

incorrect-font-face

Como se puede ver, la tipografía se visualiza desenfocada y “dentada”, mostrando las imperfecciones, esto como resultado de solo utilizar TTF.

El código fuente de este ejemplo seria:

code1

A continuación hemos incluido no solo TTF, sino también EOT, WOFF, y la versión SVG de la misma fuente vista en Google Chrome.

correct-font-face

El código sería el siguiente:

code2

Al comparar las dos imágenes, incluso es difícil creer que se trata de la misma fuente. Ésta última imagen es clara, con bordes perfectamente mostrados, y se puede escalar a cualquier tamaño sin pérdida de calidad.

Ahora, la Solución

Si se tiene la fuente (tipografía) y su correspondiente licencia de uso o si se utiliza una tipografía “Free”, entonces hay varios recursos en línea que teniendo un único archivo de tipografia normal, nos lo convertirá y devolverá un paquete de fuentes Web con todos los formatos que se necesita para asegurar que se muestra correctamente en distintos navegadores. Estas son algunas:

@font-face kit generator

url: http://fontface.codeandmore.com/

font-face-generator

Font2Web

url: http://font2web.com/

font2web

online font converter

url: http://onlinefontconverter.com/

online_converder_fontr

Estos servicios nos sirven para la generación de fuentes compatibles con la Web, y sin duda se recomienda su uso (y si la licencia de la tipografía así lo permite), para asegurar que los diseños Web se vean bien en todos los navegadores.