Categories
html5 Programación

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.

Categories
CSS3 Herramientas html5 JavaScript

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

Categories
Artí­culos CSS3 Diseño Firefox Google Chrome html5

Efecto Abanico de Fotos en álbumes en Google+

Efecto Abanico en álbumes de Google+

Efecto de Abanico en Albumes de Google+ hecho con CSS3 y HTML5

Categories
Google Herramientas html5 JavaScript Webkit

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 🙂

Categories
CSS3 Herramientas html5

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