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_js

Para 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

SlideShows Drupal – (Secuencias ánimadas de contenidos o imágenes)

Slideshow es una transición animada de imágenes o textos, que se ha orientado principalmente a destacar contenidos relevantes y que funcionalmente permite al usuario la lectura de varios contenidos sin necesidad de llevar a cabo una recarga de la página.

Entre los portales que tienen SlideShows en sus páginas principales podemos nombrar algunos como CaracolTV, ColombiaTravel, Revista Shock, etc

Ejemplo de SlideShow empleado en el portal de MTV Uk

Slideshow drupal

SlideShow Drupal

Si bien hay cientos de plugins e implementaciones en JavaScript para lograr lo deseado, integrar estos plugins con gestores de contenido puede resultar en una extensa tarea de investigación y programación. Para facilitarnos a todos el trabajo en un futuro (Tanto a quienes nunca han hecho una implementación de este tipo, como a los que la hemos hecho y olvidamos de que manera concreta lo solucionamos).

A continuación se lista algunos módulos y herramientas que ofrece Drupal para SlideShows:

  1. Featured Content Slider: Brinda un bloque al que se le pueden añadir nodos o contenidos creados previamente. Su implementación es rápida y su despersonalización se hace a través de hojas de estilo (CSS). Una de las limitantes que tiene es que no se puede determinar el orden en que aparecen los elementos de una manera sencilla.
  2. Slideshow: Una opción de sencilla configuración, convierte todas las imágenes adjuntadas a un contenido en elementos de un slideshow. Solo trabaja con imágenes.
  3. Views Slideshow: ImageFlow: Una excelente opción cuando se quieren por ejemplo mostrar imágenes a manera de galería. Presenta un efecto estético muy agradable de zoom y una barra de desplazamiento en vez de botones (Al estilo del visor de carátulas de ITunes). Se integra con el módulo Views; para su implementación solo es necesario crear una vista que tenga campos de imagen y asignarle el estilo SlideShow – ImageFlow. Está orientado a la creación de galerías de imágenes únicamente.
  4. Dinamic Display Block: Es la opción más robusta, configurable y flexible. Se integra con el módulo views de modo que se tiene absoluto control sobre los campos que aparecen, el orden en el que aparecen los elementos (En combinación con el módulo nodequeue) y ofrece muchos estilos de visualización, desde un simple slide con imágenes y selectores con números, hasta selectores con imágenes en miniatura y pequeñas descripciones. A cambio de su funcionalidad se debe saber que se tiene que generar funciones de preprocesado en las plantillas que se esté utilziando y emplearle como mínimo unas dos horas de investigación. Se ofrecen tutoriales en la web del autor que describe como hacer slideshows sencillos y avanzados. Es la opción más cercana a lograr un slideshow como el de MTV Uk.

Cabe resaltar que sea cual sea la solución que se elija, viene bien tomar en cuenta si vale la pena generar un Slideshow para el sitio.

Herramientas Wireframe para diseño Web

Es un error empezar una Web directamente con la creación del código (HTML y CSS) o diseñando directamente en Photoshop. Un paso previo debería ser crear un “borrador” con papel y lápiz (tomando en cuenta, objetivos de la pagina, contenidos, etc.), ya que es más fácil (y libre de distracciones) inspirarse sobre el papel que sobre el teclado y monitor.

Antes de empezar a diseñar sobre Photoshop, vale la pena utilizar una herramienta de Wireframing.

WIREFRAME

Una herramienta de Wireframe permite crear un mapa del sitio de la futura Web y hacer un “prototipo”, una idea visual de como sera la estructura de cada página, esto nos permitirá abstraernos de los colores y diseño final, concentrándonos en el contenido y en las arquitectura de la información.

Ahora veremos algunas herramientas de wireframing:

MockFlow
url: http://www.mockflow.com/

uiwireframetools10

Mockingbird
url: https://gomockingbird.com/

Wireframe1

Pencil
url: http://pencil.evolus.vn/Default.html

uiwireframetools8

iPhone Mockup
url: http://iphonemockup.lkmc.ch/

uiwireframetools6

Cacoo
url: https://cacoo.com/lang/es/

uiwireframetools11

Wireframe.cc
url: http://wireframe.cc/

6

Simple Diagrams
url: http://www.simplediagrams.com/

uiwireframetools5

BALSAMIQ MOCKUPS
url: http://www.balsamiq.com/products/mockups

4645

Frame box
url: http://framebox.org/fkBH

uiwireframetools3

Creately
url: http://creately.com/Online-UI-Mockups-and-Wireframes

uiwireframetools12

El uso de una herramienta de wireframe nos permitirá explorar múltiples posibilidades y se lo puede hacer fácil y rápidamente. Ademas sirve para para resaltar y aclarar requerimientos, probar la navegabilidad, realizar pruebas de usabilidad en etapas muy tempranas del proyecto.

Herramientas online para la edición de imágenes

 Existen muchos programas que permiten la edición de imágenes de manera profesional, como ser Adobe Photoshop, Corel PhotoImpact, GIMP entre otros. Sin embargo, los mismos requieren un tiempo para aprender a usarlos. En la actualidad con el boom de las redes sociales en internet, con las cuales es frecuente subir y descargar imágenes, muchas personas requieren de herramientas para la edición de imágenes antes de postearlas en su red social. Tareas simples como insertar un título, recortar, añadir efectos e incluso manejas varias imágenes en capas ya es posible en un entorno web, sin embargo con limitaciones con respecto a los programas anteriormente mencionados.

A continuación, se muestra una colección de las mejores herramientas online de edición de imágenes.

Ribbet

ribbet

Ribbet es una herramienta de edición e inserción de efectos a imágenes en la cual se tiene muchas opciones para usuarios que necesitan una manera rápida, fácil y simple para editar y retocar sus imágenes.

ipiccy.com

iPiccy

iPiccy es otra herramienta de edición de imágenes, no posee muchas características como Ribbet, sin embargo tiene un mejor rendimiento en el procesamiento de efectos y permite la configuración de los efectos en un instante.

pixlr

pixlr

Es una herramienta gratis, la cual permite el tratamiento de una imagen con una interfaz y herramientas similares a las que tiene Photoshop, por supuesto con algunas limitaciones.

Posee muchas características avanzadas como ser: Herramienta de varita, capas, historia, deshacer ilimitado, filtros, etc. Además de redefinir el tamaño de la imagen o el tamaño del lienzo, rotar / voltear lienzo. Añadir, duplicar, eliminar, fusionar, reordenar, rotar o voltear capas, añadir máscara de capa, aplicar estilos de capa y rasterizar capas.

picMonkey

picMonkey

Sin lugar a dudas, es una de las mejores herramientas disponibles, además de poseer una interfaz elegante, amigable e intuitiva. Permite a los usuarios retocar y editar imágenes, añadir cientos de efectos, marcos, texturas y temas desde su librería a través de pocos clics y operaciones de arrastrar y soltar.

Herramientas Web 2.0 para crear presentación online

Las presentaciones digitales son un forma muy común de exponer en diferentes ámbitos (colegio, universidad, empresa o en cualquier reunión que a merite el apoyo de este tipo de elementos). Normalmente la costumbre de muchos es elaborar presentaciones en el conocido “PowerPoint”, pero a veces esto resulta ser algo tan común que puede aburrir a los espectadores y terminar opacando la presentación.

La mejor manera de hacerlo es a través de herramientas que sean llamativas, interactivas y sobre todo que puedan generar un gran impacto, y que mejor que hacer uso de herramientas Web 2.0 que están a nuestro alcance

A continuación un resumen de algunas de ellas:

Prezi

prezi

Prezi es una herramienta de presentación online que permite crear presentaciones con un aspecto visual muy llamativo a las presentaciones. Actualmente es una de más utilizadas. Tiene la opción de poder utilizarse de manera online o también incluye una versión de escritorio pero solo para los planes de pago. Con cualquier plan se puede crear fácilmente presentaciones propias y compartirlas en línea o descargarlos para verlas sin conexión.

SlideRocket

SlideRocket

SlideRocket permite crear presentaciones desde templates existentes o subir tus archivos de PowerPoint. La herramienta permite colaborar con equipos de trabajo para trabajar conjuntamente en las presentaciones, y cada presentación puede ser compartida por una URL o incrustados en páginas web y blogs. SlideRocket incluye información estadística detallada que le permite ver quién ha visto la presentación, de dónde, cuánto tiempo se esaába en cada diapositiva. SlideRocket es de pago y cuesta $ 24 por usuario al mes con una prueba de 14 días disponible gratuitamente.

PreZentit

PreZentit

PreZentit es una herramienta para crear presentaciones de forma gratuita, actualmente se encuentra en fase beta y su única limitación es 250 Mb de almacenamiento de imágenes. Con PreZentit se puede crear presentaciones en línea, y otros usuarios tienen la opción de trabajar en la presentación al mismo tiempo. Las presentaciones creadas tienen la opción de ser públicas o privadas, y se pueden descargar y ver sin conexión. Las presentaciones creadas, tienen un formato de páginas Web, por lo que es factible la edición si asi se lo requiere.

Empressr

Empressr

Con Empressr se puede subir imágenes, vídeo y audio para crear presentaciones online. Las presentaciones se pueden compartir con sus contactos o “incrustados” en páginas Web y blogs. Desde la parte administrativa de la cuenta se puede ver quién y cuántas personas han visto la presentación. Empressr es una herramienta gratuita.

Tiki-Toki

Tiki_Toki

No todas las presentaciones tienen que ser necesariamente de la manera convencional, esta herramienta nos permite mostrar la presentación de manera lineal, en un modo de Linea de Tiempo.

Ahora, y finalmente, si lo que se quiere es realizar la presentación utilizando únicamente código HTML5 y transiciones CSS3, entonces podemos recurrir a librerias como Impress.js, del cual ya se habló en una anterior entrada: http://bit.ly/11SlO37

3 exelentes plugins jQuery para crear layouts responsive

Ahora es el turno para que los usuarios sean capaces de navegar de manera satisfactoria gracias al Responsive Design de Jquery, independientemente del dispositivo en el que se encuentren.

Es la solución para reducir la tasa de rebote, haciendo que el usuario pase más tiempo en la página por su facilidad de lectura y óptima visualización de los contenidos (se acabo la molestosa tarea de pellizcar la pantalla para hacer zoom).

A continuación se presentan 3 muy importantes plugins especialmente seleccionados de jQuery para realizar sliders, galerías, elementos de navegación, etc. Todo ello con la vista puesta en que dichos elementos tengan un comportamiento responsive y se adapten a la resolución del dispositivo desde el que serán visualizados.

Responsive Image Gallery with Thumbnail Carousel

Crea una galería de imágenes sensible, con un carrusel miniatura con Elastislide. Inspirado en “galería de usuario” , muestra una integración de Elastislide, Implementa una galería de respuesta que se adapta al ancho de la visión del dispositivo mobil. La galería tiene un interruptor de vista que permite verlo con el carrusel en miniatura o sin ella. También añade la posibilidad de navegar con el teclado.

Responsive Image Gallery with Thumbnail Carousel

plugin jquery

PhotoSwipe

Se puede integrar fácilmente en sus sitios web para móviles. Está muy optimizado para los navegadores móviles webkit. Sin embargo, si necesita un apoyo más amplio navegador de escritorio o si está utilizando jQuery Mobile, PhotoSwipe viene empaquetado con una implementación de jQuery también.

PhotoSwipe

PhotoSwipe

jQuery Masonry

jQuery Masonry es un plugin que nos permite organizar los elementos-hijos flotantes de un elemento principal CSS. Tiene una forma peculiar de ordenar, pues es como si se pusiera ladrillo por ladrillo en la construcción de un muro, tal como se observa en la imagen siguiente.

jQuery Masonry

jQuery Masonry

Frameworks Responsive Web Design (RWD)

El “Responsive Web Design” es algo que toda empresa comercial aspira tener. Día a día el número de dispositivos móviles  va incrementando (desde computadores “desktop”, portátiles, teléfonos, tabletas e incluso televisores) y la gente los utiliza para buscar recursos e información en la web.

Todos estos dispositivos tienen diferentes resoluciones de pantalla y por tanto el diseños también cambia, y si no se tiene las herramientas necesarias, el ajustar manualmente la configuración de sitio web para todos los dispositivos, puede volverse un cáos.  Y es así como los frameworks CSS para la creación de diseños web receptivo fueron creados.

A continuación se describen algunos frameworks CSS para “Responsive Web Design”. Algunos ya son bastante conocidos y otros que recién fueron creados en las necesidades de las nuevas tendencias de diseño web.

Less+ Framework
http://lessframework.com/

less

Este Framework permite a los diseñadores crear sitios “sensibles” con capacidad de adaptar su contenido en función de la resolución de la pantalla, utilizando jQuery.

Responsive Grid System
http://responsive.gs/

Responsive-Grid-System

Éste es un framework CSS de cuadricula fluida que permite el desarrollo rápido de sitios web. Está listo para ser utilizado en 12, 16 y 24 columnas. También ofrece reajuste clearfix y de forma opcional un archivo de “reset” .

1 Kb CSS Grid 
http://www.1kbgrid.com/

1kb

Esta es una solución fácil de implementar sistemas de grillas, “reset” de estilo, tipografía y estilos básicos de formulario y todo en 1Kb, algo realmente importante.

Boostrap
http://twitter.github.com/bootstrap/

bootstrap

Éste framework fue creado por Twitter para los desarrolladores Web, renderea los contenendores tanto en navegadores de escritorio, como así también en tablets y teléfonos inteligentes. Cuenta con 12-columna de la grilla principal, tambien posee varios plugin Javascript para aumentar su funcionalidad.

Titan Framework
http://titanthemes.com/titan-framework-a-css-framework-for-responsive-web-designs

Titan-Framework

Éste utiliza las mismas clases CSS como 960.gs, por lo que el cambio entre las dos es muy fácil. Esto lo destaca a Titan Framework del resto.

320 and Up
http://stuffandnonsense.co.uk/projects/320andup/

320andup

320 and Up contiene 5 CSS3 Media Querys incrementales. Está construido con LESS y Sass, CSS mixins.

Fundation
http://foundation.zurb.com/

fundation

Un rápido y flexible framework, destinado especialmente para front-end. Sitios web creados con este framework funcionará en casi cualquier dispositivo sin importar el tamaño de la resolución.

Gridiculous – A Fully Responsive Grid Boilerplate
http://gridiculo.us/

gridiculous

Este es un texto modelo de grillas con columnas variables (ancho máximo de 1200px, 960px, 640px, 320px ancho y también dispone de pantalla completa). Gracias a este framework, el desplazamineto de las columnas esta asegurado, por lo que las columnas anidadas y fotos y los vídeos permanecerá totalmente “sensible”, independientemente del tamaño de la pantalla.

Simple Grid
http://simplegrid.info/

simple_grid

Simplegrid es un sistema de grillas basada en “una clase por elemento” asi de simple. Este framework  libera de las barras de desplazamiento horizontales.

Cómo acelerar el renderizado CSS

Cuando codificamos CSS, uno de los objetivos es la eficiencia del renderizado en el  navegador.  Google siempre está en una constante búsqueda de hacer más rápida la web. Mozilla también tiene varias sugerencias sobre las mejores prácticas .

optimizando_codigo_css2

Técnicas para acelerar el renderizado CSS

Evitar el “redibujo” de las imágenes

Para evitar esto, siempre se debe especificar la anchura y la altura de todas las imágenes, esta técnica permite que el navegador muestre la página incluso antes de que se descarguen las imágenes, de lo contrario el navegador requerirá un “redibujo” y volver a renderear una vez que las imágenes se descargan. Se puede especificar la anchura y la altura de todas las imágenes, ya sea en el código HTML, a travez de la etiqueta  img , o en CSS.

Los selectores generales son menos eficientes, en cambio los ID son más eficientes

Estos son selectores de acuerdo con la velocidad de renderizado:

# Sidebar {}               / * ID (la más rápida) * /
.home #slider {}           / * ID * /
.footer {}                 / * Clase * /
ul li a.arrow {}           / * Clase * /
ul {}                      / * etiqueta * /
ul li a}                   / * etiqueta */
* {}                       / * General (el más lento) * /
#content [title = 'home' ] / * General * /

Por ejemplo, este selector no es muy eficaz:

# Sidebar > li

Los IDs son los más efectivos, uno puede llegar a pensar que el navegador encontrará el ID rápidamente y dentro de él a los “li” hijos, pero no va a acelerar la velocidad de renderizado, ya que los navegadores interpretan los selectores de derecha a izquierda.

El Principio de derecha a izquierda

Es muy importante entender cómo los navegadores leen o interpretan los selectores CSS. Leen CSS de derecha a izquierda, por ejemplo, para que el selector ol> li [title = “link”] lo primero que se interpreta es [title = “link”] (también se conoce como el “selector de llave”).
También es bueno saber que, en cuanto a la interpretación de derecha a izquierda, si un selector falla, éste dejara de ser interpretado y así se utiliza menos recursos de los necesarios para mantener la interpretación. Sin embargo, siempre se debe quitar los selectores no utilizados en el código.

hojas_de_estilo_css

Colocar las reglas CSS en archivos externos y enlazarlos desde la cabecera del documento principal

Siempre se debe colocar los archivos CSS de forma externa y crear el vinculo correspondiente desde la cabecera del documento principal. Queda “casi” terminantemente prohibido la especificación de estilo en linea y creación de estilos en bloques dentro del cuerpo de un documento HTML, ya que puede tomar mucho más tiempo para que el navegador muestre e interprete el documento.

Selectores Descendentes

Los selector CSS más difíciles de interpretar son los selectores descendentes. Es terriblemente difícil de interpretar, especialmente si se encuentra dentro de una etiqueta universal. Por ejemplo, este es un ejemplo muy malo de un selector descendente:
html body nav a span {}

Usar como ventaja el CSS en Cascada

A veces, se puede lograr un muy buen resultado sin utilizar selectores adicionales. Por ejemplo, consideremos el siguiente ejemplo:
nav li a {font-size:14px}
El tamaño de la fuente “font-size”, no es necesario declararlo específicamente para el tag “a”, es mucho más eficiente:
nav {font-size:14px}

ccs3

Selectores CSS3

Los selectores CSS3 (por ejemplo : first-child ) son increíbles para ayudar en los elementos de estilo, manteniendo el código limpio y semántico. La triste realidad, sobre estos selectores, es que no se los debe utilizar, en lo absoluto, si la mayor preocupación es el rendimiento de página.

Velocidad vs Practicidad

Para conseguir la representación más eficaz para una determinada página, simplemente se puede ir por un camino, dando a cada elemento de la página una identificación única y la aplicación de un estilo con selectores de ID único. Es extremadamente no-semántico y extremadamente difícil de mantener. Incluso los sitios basados ​​en el rendimiento NO sacrifican la capacidad de mantenimiento o semántica por un archivo CSS más eficiente.

Una buena práctica es volver a revisar los archivos CSS y buscar donde se lo puede mejorar, especialmente si el público objetivo utilizara dispositivos móviles, los cuales tienen una cierta (dis)capacidad de interpretación.

Todas estas recomendaciones, requieren una cierta inversión de tiempo, pero el coste es pequeño, especialmente en comparación con las ventajas que acarrea. Y una vez que estas practicas se ponen en marcha, continúan para mejorar el rendimiento durante la vida útil del proceso de desarrollo.

URL Schemes

Los URL Schemes son recursos que invocan las aplicaciones instaladas en cada dispositivo, para poder delegar funcionalidad en ellas. De esta manera conseguiremos una experiencia más fluida para el usuario. Los schemes son válidos para las aplicaciones nativas de iOS, Android y HTML5.

Las URL Schemes permiten a las aplicaciones comunicarse, enviar y recibir mensajes y ejecutar acciones entre si a través de una URL personalizada.

VENTAJAS

  • No obligan al usuario a estar conectado permanentemente a la red.
  • Son un método simple y rápido de integrar las aplicaciones de sistema con nuestras aplicaciones. Llegando a poder utilizarse dentro del código HTML.
  • Proporcionan una interfaz de comunicación pública, que cualquier aplicación puede aprovechar.

Aquí vamos a ver el uso de unos Schemes de las más básicas:

SMS

Permite enviar rápidamente un mensaje de texto, indicando en el enlace un número e incluso el cuerpo del mensaje. El marcado html sería:

<a href="sms:700600400">Cuerpo del mensaje</a>

TELEFONO

En este caso el enlace nos permitirá hacer una llamada a un número. Como en el anterior recuerda el código del país antes del número. El marcado sería:

<a href="tel:700600400">700600400</a>

MAILTO

El esquema mailto, es un antiguo conocido de los maquetadores web. Se utiliza para iniciar la aplicación de correo predeterminada del dispositivo.  En su forma más simple, un mailto URL contiene una dirección de correo de electrónico:

<a href="mailto:ejemplo@mail.com">ejemplo</a>

Existen múltiples schemes ya creados para iPhone, Android o HTML5 que puedes buscar en la web.