Category Archives: html5

HTML5 Template Tag: la novedad

Para solventar el uso de templates, personalmente uso y me encanta Mustache, ya que tiene El 7 de mayo, se publicó el borrador de la etiqueta template de HTML5, Y se puede hacer algo como esto:
HTML:

<template id="template-row">
  <tr class="">
     <td></td>
     <td></td>
     <td></td>
  </tr>
</template>
 
Y repetir el template dentro de una tabla con el siguiente script:
JAVASCRIPT:

var t = document.querySelector("#tabla tbody"),
row = document.getElementById("template-row");
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "Nombres";
td[2].textContent = "Apellidos";
t.appendChild(row.content.cloneNode(true));
 
El código anterior permite reutilizar el template dentro de una tabla en cualquier contexto. Este ejemplo fue la fila de una tabla, sin embargo podemos usarlo con listas, párrafos, imágenes o lo que se nos ocurra siguiendo algunas limitaciones.

Para tener en cuenta:

  • El código dentro de template no es mostrado por el navegador.
  • El código dentro de template no es parte del documento, es decir que document.getElementById('#template-row'); no tiene hijos.
  • Los templates son inactivos hasta que son usados, es decir, que las imágenes no se cargan, archivos multimedia no son reproducidos y scripts no son ejecutados.
Por el momento ningún navegador soporta la etiqueta, pero ya lo veremos muy pronto. Podemos ver un ejemplo completo se puede ver en JSFiddle, por mientras todavía nos queda Mustache.

Visto en Frontend.pe.

Adobe mata a Flash y lanza Adobe Edge, su plataforma de animaciones HTML5, Javascript y CSS3

No he podido creer la noticia, después de haber invertido millones de dólares en el desarrollo de Flash, de haber escrito y reescrito ActionScript; Adobe se "echa" ante lo nuevo y reemplaza a Flash por HTML5, JavaScript y CSS3.

Lo hace mediante Edge, la herramienta por ahora gratuita que genera animaciones e interaccion del usuario.

Adobe Edge

La herramienta la puedes usar gratis por sólo 152 días desde su instalación.

Probando un poco he visto que para las animaciones usan jQuery y otras herramientas propias de Adobe. La interfaz recuerda a Lightroom pero el uso del timeline es igual a Flash. El código resultante es limpio y fácil de editar. Personalmente le veo mucho futuro.

HTML:

<script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
    <script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="Untitled-1_edge.js"></script>
    <link rel="stylesheet" href="Untitled-1_edge.css"/>
 

Javascript que se usa en un ejemplo

Las características que más me llaman la atención las pongo en negrita:

  • Crea nuevas composiciones con las herramientas de dibujo y texto.
  • Importa los tipos de imágenes SVG, PNG, JPG or GIF files.
  • Crea animaciones con un editor de línea de tiempo. Anima posición, tamaño, color, fondo, rotación y más.
  • Añade archivos HTML existentes con animación, mientras se preserva la integridad de los layouts.
  • Copia y pega transiciones, las invierte y se puede escoger entre más de 25 efectos existentes.

Otras características se añadirán poco a poco, si quieres estar informado puedes seguir la página en Facebook o la cuenta en Twitter.

Enlace: Adobe Edge Preview

Convertir SWF a HTML5 con Swiffy

Mientras todos están muriendo por una invitación a Google+, te invito a poner atención a una herramienta interesante también de Google.

Swiffy permite convertir archivos SWF a HTML5 online. permitiendo usar estos en archivos en dispositivos que no soportan Flash como iPods o iPads.

Por ahora Swiffy no soporta ActionScript 3 ni escenas. El resultado final es un archivo html, que contiene código JSON y que al final es formateado y puede ser visto en cualquier navegador que soporte Webkit.

Mientras esperas tu invitación, te puedes distraer convirtiendo algunos archivos o simplemente revisando los ejemplos :)

Sitios bonitos y elegantes con Gridless

Gridless es un framework HTML5 y CSS3 que permite hacer sitios web simples y elegantes usando una hermosa tipografía.

Gridless

El framework no usa grids para su funcionamiento, lo que si hace es "normalizar" las reglas CSS en vez de resetearlas. También añade estilos de impresión y

Funciona en todos los navegadores incluidos IE6.

Enlace: Gridless | Demo | Código fuente

Visto en: WebResourcesDepot

Prueba si tu navegador soporta HTML5 con html5test

Si estás pensando lanzar un sitio nuevo, y necesitas probar la compatibilidad de tu navegador acerca de HTML5, te presento html5test.

html5test

Esta herramienta te presenta un “score” de soporte de tu navegador y una lista de resultados de todos los elementos y atributos de HTML5 que son soportados por tu navegador.

Además del score de tu propio navegador puedes ver la lista de elementos soportados por los demás navegadores.

Enlace: html5test.com

Maqetta: un editor WYSIWYG Open Source online para crear interfaces HTML5

Maqetta es una herramienta online que nos permite crear mediante drag-and-drop, interfaces de HTML5.

Entre algunos de los componentes que podemos usar se encuentran la librería Dojo, YUI y jQuery UI.

Maqetta

Los que estén familiarizados con entornos como Visual Studio o NetBeans, encontrarán la facilidad de usarlo.

Entre las funcionalidades que ofrece, podemos crear archivos, subir imágenes y guardarlas bajo una cuenta gratuita.

Y si no trabajas sólo, Maqetta nos da una super herramienta de colaboración con la cual podemos interactuar como equipo y obtener revisiones y feedback de otros usuarios.

Enlace: Maqetta | Demo

Apple nos muestra HTML5 y los web standards, pero sin respetar los standards.

El día de ayer Apple nos presentó HTML5 and the web standards, un lugar donde podemos ver ejemplos de lo que se puede hacer combinando HTML5, CSS3 y Javascript. Como introducción nos dicen:

...Éstos web standards son abiertos, confiables, altamente seguros y eficientes. Permiten a los diseñadores y desarrolladores crear gráficos avanzados, tipografía, animación y transiciones. Los standards no son add-ons en la web. Son la web. Y puedes empezar a usarlos ahora mismo.

Entre los ejemplos que ofrecen está la capacidad de insertar video, tipografía, transiciones, audio, etc.

Obviamente se nota muy inspiradora la cita, sin embargo notamos que al querer entrar a ver los ejemplos obtenemos una gran advertencia:

Aca me entras con Safari, sino no me entras.

Si quieres tener una experiencia con este demo, simplemente ¡bájate el Safari!. Se supone que si es una demostración de web standards, pues debería poder ingresar tranquílamente con cualquier navegador moderno.

Con este tipo de actitudes Apple cada vez se está conviertiéndose en el Microsoft de hace unos años, obligándonos en cierta forma a usar software que no queremos o a comprar productos (sino fíjense los lindas fotos del iPhone, iPad y demás íes) que no necesitamos.

Veamos que reacciones tendremos en estos días.

Ejemplos y Demos de HTML5

Si quieres saber más sobre HTML5, te presentamos un interesante sitio en el que nos muestran ejemplos y demostraciones de esta nueva versión de HTML

Ejemplos y Demos de HTML5 tiene los ejemplos básicos del uso de HTML5 y los soportes de los navegadores más conocidos. Entre ellos Internet Explorer, Mozilla Firefox, Safari, Opera y Google Chrome.

Sólo como ejemplo muestro un bloque del cual podemos editar el texto, mostrado en ContentEditable:

HTML:

<section id="editable" contenteditable="true">
  <h2>¡Este texto se puede editar!</h2>
  <p>¿Por qué no lo intentas? Un párrafo cualquiera</p>
  <ol>
    <li>el primer ítem</li>
    <li>el segundo</li>
    <li>y el tercero</li>
  </ol>
</section>
 

Al añadir el atributo contenteditable="true" hacemos que ese bloque se pueda editar, como si estaríamos usando TinyMCE o FCKEditor. El código anterior funciona en todos los navegadores modernos.

Puedes ver el demo.

Reconozco que es el primer ejemplo de HTML5 que hago en mi vida, así que si me sirvió también te puede servir a tí :D.

Enlaces