Initializr – Inicia tu Proyecto con HTML5 en 15 segundos

Initializr

Plantilla generada por InitializrInitializr es una simple y poderosa herramienta para ayudarnos a empezar con un proyecto de desarrollo web basado en HTML5. Está construido con HTML5 Boilerplate, una fantástica plantilla HTML5 creada por el buen Paul Irish y Divya Manian.

Con Initializr sólo debemos indicar si deseamos contenido de ejemplo, si deseamos o no usar jQuery, si usaremos Modernizr o html5shiv, si deseamos configuración básica del servidor web (via .htaccess, web.config o nginx.conf), para generar de manera automática los archivos necesarios (ver imagen a la derecha) para que puedas empezar de inmediato con tu proyecto de desarrollo, y de esta manera te olvidas del tedioso proceso inicial.

Initializr

Via Web Resources Depot.

El Logo de HTML5 recreado con CSS3

HTML5 Logo¿Recuerdan el nuevo logo oficial de HTML5? Pues al creativo diseñador Catalin Rosu se le ocurrió la idea de recrear el logotipo usando única y exclusivamente CSS3, usando las técnicas de formas en los bordes, los pseudo elementos :before y :after, las propiedades opacity y transform, y la fuento Geo desde el Google Font API.

Demo❱ • ❰Artículo Original

Animación 3D de Creative Commons con HTML5 y CSS3

CC con HTML5 y CSS3Excelente visualización animada y en 3D del modelo de Licencias Creative Commons, utilizando HTML5 y CSS3. Necesitas Chrome o Firefox 4.0 Beta para que funcione correctamente.

¡Haz click en la imagen de la derecha para entrar!

Si no conoces qué son las Licencias Creative Commons (CC), te invito a leer:

Via @gabrielsaldana

Eric Meyer actualiza su CSS Reset para adaptarlo a HTML5

Sin duda alguna, el CSS Reset más utilizado y difundido entre los desarrolladores y diseñadores web es el creado por Eric Meyer, y no sólo por ser el primero de su tipo, si no también por ser uno de los más ligeros y simples de implementar, no por nada es utilizado por varios CSS Frameworks, como el famoso Blueprint.

Luego de casi cuatro años de no modificarlo, Eric acaba de adaptar su CSS Reset para que sea compatible con el cada día más utilizado HTML5. Aquí la nueva versión:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Según pueden leer en los comentarios embebidos en el código CSS, aún hay ciertos detalles que ajustar, por lo que, si somos estrictos, no deberíamos usarlo en proyectos a nivel producción, sólo para pruebas.

Eric ha mencionado que se apoyó en el HTML5 Doctor Reset para su adaptación, aunque si revisamos bien ambas versiones, hay diferencias relevantes.

Un detalle, si entran al sitio oficial del CSS Reset de Eric Meyer notarán que sigue la versión 1.0, pues sigue siendo la rama estable. Para usar el nuevo CSS Reset para HTML5, pueden entrar al blog de Eric, o bien, usar el código que he puesto arriba (no existe enlace oficial de descarga, por lo que hay que copiar el código y pegarlo manualmente en un archivo de texto vacío).

Y tú, ¿ya usas HTML5 en tus proyectos?

Via WebMonkey.

Procesando Video en Tiempo Real con HTML5 y JavaScript

Gracias a un retweet de Dion Almaer, me entero de este fantástico experimento. Se trata del procesamiento en tiempo real de un video de Tron, usando HTML5 Video + Canvas + JavaScript + CSS3.

HTML5 Tron

¡Quiero verlo funcionando! ¿Dónde entro?

Pueden entrar usando el enlace original barbafan.de/html5video?video=tron, o bien, el enlace corto bit.ly/html5tron

¡Está genial! ¿Y cómo funciona?

El video bajo HTML5 se renderiza cada 33 milisegundos (30 cuadros por segundo), dentro de un elemento canvas oculto. La información de los pixeles en dicho canvas es obtenida y transformada via JavaScript y escrita nuevamente en el canvas. Las transformaciones CSS3 son manipuladas dinámica e interactivamente mediante JavaScript.

Notas Finales

El autor advierte que el experimento usará muchos recursos de tu microprocesador… pero la verdad, ¡vale la pena disfrutar de tan geek experimento!

¿Aplicaciones de Escritorio dentro del Navegador Web?

Hoy es día es claro distinguir una aplicación de escritorio a una aplicación web. La primera necesita instalarse localmente, necesita contar con librerías para su funcionamiento, y sólo puedo acceder a ella desde otra computadora usando algún software de conexión remota, lo cual no es algo sencillo para el usuario casual.

La segunda presenta ventajas interesantes: se instala en un servidor, por lo que cualquier usuario con acceso a dicho servidor podrá ejecutar la aplicación web, y si el servidor se encuentra en la nube, prácticamente cualquier usuario de Internet podría usar la aplicación, sin necesidad de instalar nada de manera local y sin importar que sistema operativo esté usando… basta contar con un navegador web.

Ahora bien, ¿se imaginan ejecutar Gimp en una desktop, notebook, netbook o touchpad sin necesidad de tenerlo instalado, o escuchar algún streaming de audio con Rhythmbox con tu iPhone, o ejecutar OpenOffice en un iPad? Suena loco… pero pronto podría ser una realidad.

Alexander Larsson, un desarrollador sueco, ha estado trabajando en la creación de un Back-End con HTML5 para GTK+ 3.0 (la base de Gnome 3). Antes de que les explique, vean el siguiente video.

En el video se puede observar como Alexander ha logrado satisfactoriamente portar aplicaciones construidas bajo GTK+ para que sean ejecutadas nativamente dentro de Firefox 4, gracias a la magia del elemento Canvas de HTML5.

¿Cómo funciona esta maravilla?

¿Realmente quieren saberlo? Ok, pero primero aguanten la respiración.

GTKHTML5Cada ventana principal de una aplicación GTK+ es mapeada e un elemento Canvas de HTML5, y el contenido de las ventanas es actualizado por streaming de comandos sobre XMLHttpRequest, usando codificacion gzip para comprimir los datos. Los datos de las ventanas son mostradas como copias de regiones (al realizar scroll) y diferencias entre imágenes. Así mismo, las imágenes son enviadas como datos (URIs de datos PNG sin compresión). La entrada es obtenida a través de eventos DOM y enviada al servidor por websockets.

¡Ya pueden volver a respirar! Si lo analizamos bien, el proceso no es tan complicado, y hay que reconocer que es muy ingenioso. Ojalá Alexander se anime a patentar su idea, antes de que los grandes devoradores de patentes lo hagan primero (ustedes saben de quienes hablo).

Por cierto, por el momento sólo funciona bajo Firefox 4, pero podría ser migrado a otros navegadores gracias a los websockets.

WOW, ¡quiero probarlo!

El proyecto ya se encuentra disponible en Git, bajo el nombre clave Broadway.

Notas Finales

¿Qué pienso de todo ésto? ¡Una absoluta revolución! Tanto del lado del usuario, como de los desarrolladores de aplicaciones. Incluso, aunque por el momento se está usando GTK+, no creo que sea tan complicado hacer lo propio con otros frameworks, como Qt.

Si el proyecto prospera, y alcanza una madurez sólida, estaríamos prácticamente entrando a una era de ubicuidad, donde podremos usar aplicaciones de Windows o MacOS X en Linux, o viceversa, en cualquier combinación imaginable.

Fuente: Alexander Larsson. Via Linuxers y Phoronix.

Sencha Touch 1.0

Hace algunos meses les mencioné el nacimiento de Sencha Touch, en ese momento en fase Beta… hoy ya se encuentra disponible Sencha Touch 1.0, ¡y es totalmente gratuito!

Si no lo conocías, Sencha Touch es el primer framework JavaScript para aplicaciones móviles con HTML5, que permite desarrollar aplicaciones (apps) con apariencia nativa (look & feel) de dispositivos táctiles (touch), tales como iPhone y Android.

Sencha Touch 1.0

¿Qué hay de nuevo?

Sencha Touch 1.0 tiene una gran cantidad de nueva características y se han mejorado prácticamente todas las áreas del producto.

  • Soporte a formularios HTML5
  • Selectores basados en web (web-based pickers)
  • Paquete renovado MVC.
  • Optimización especial para el desplazamiento (scroll) de listas en Android.

Si ya estás usando HTML5 y CSS3 para el desarrollo de aplicaciones móviles, ¿qué esperas? ¡conoce a fondo y descarga Sencha Touch 1.0 ahora mismo!

Fuente: Sencha Blog.

Tabla Periódica de los Elementos… de HTML5

Actualización 2014-12-29 » ¡Habemus nueva tabla!

Este es el proyecto más creativo que he visto en las últimas semanas. Se trata de la clásica Tabla Periódica de los Elementos, pero de etiquetas (tags) HTML5.

Tabla Periódica de los Elementos... de HTML5

Es totalmente interactiva, pues da una breve reseña de cada etiqueta al darle click a su “elemento” correspondiente.

Link: Tabla Periódica de los Elementos. (Actualización 2014-12-29: Link Roto)

Via FanPage de ArchLinux en Facebook.