Se ha hablado mucho de HTML5, de las nuevas posibilidades en el desarrollo web, de la muerte de Flash e incluso de nuevas formas de diseñar que obedecen a necesidades recientes, como la explosión de la web móvil.
¿Dónde están esas técnicas novedosas? Pues bien, para que actualicemos nuestra manera de programar web os mostraré algunos de los recursos web más interesantes y novedosos.
[divider_padding]
JavaScript en el lado del servidor
La auténtica locura que faltaba. No hace mucho leí una viñeta que parodiaba precisamente esta situación: JavaScript empezó como lenguaje en el servidor para acabar en el cliente… Y vuelta ahora al servidor.
Este planteamiento nos supone ciertas ventajas a la hora de programar aplicaciones web, especialmente usando AJAX; de manera que todo se haga a través de un único lenguaje, la comunicación cliente servidor sea sencilla, bajo una misma estructura de datos (JSON, presumiblemente) y toda una serie de características interesantes que nos brindan nuevas herramientas como Jaxer, Node.js o Narwhal.
Así de simple es hacer un hola mundo con Node.js
var sys = require("sys");
sys.puts("Hello World!");
[divider_padding]
[divider_padding]
Caché para usar páginas offline
Sin duda un recurso que puede dar mucho juego en el futuro dentro del marco de las aplicaciones web. Se trata de una manera sencilla de indicar qué paginas deben almacenarse en la memoria caché del cliente, de manera que éste pueda visualizarlas aun estando sin conexión.
La magia empieza en el .htaccess añadiendo una línea.
AddType text/cache-manifest .manifest
Después creas un archivo llamado, por ejemplo, offline.manifest, con las siguientes directivas.
CACHE MANIFEST CACHE index.html style.css image.jpg
Y para finalizar enlazas este archivo dentro del documento html
<html manifest="/offline.manifest">
Sencillo, ¿verdad?
[divider_padding]
HTML5 drag & drop
Drag & drop (arrastrar y soltar, para los profanos) no es un concepto extraño en el mundo web, hace ya tiempo que librerías javaScript como JQuery nos permitían hacer estas cosas, pero ahora HTML5 lo hace más fácil soportándolo de manera nativa, sin necesidad de librerías externas.
Personalmente me falta por comprobar como funciona este drag & drop en dispositivos táctiles, pero el concepto es interesante:
<div id="columns"> <div draggable="true"><header>A</header></div> <div draggable="true"><header>B</header></div> <div draggable="true"><header>C</header></div> </div>
Por supuesto esto no es más que el comienzo del asunto, luego tendrás que controlar todo el comportamiento con javascript.
[divider_padding]
Formularios sencillos y para toda la familia
Una de las cosas más interesantes que trae HTML5 es una forma más semántica y completa de trabajar formularios. Cosas fundamentales como selectores de fecha o validación de emails a través de expresiones regulares podrán hacerse ya de manera nativa.
Un ejemplo claro:
<form> <label for="range-slider">Slider</label> <input type="range" name="range-slider" id="range-slider" min="0" max="20" step="1" value="0"> <label for="numeric-spinner">Numeric spinner</label> <input type="number" name="numeric-spinner" id="numeric-spinner" value="2"> <label for="date-picker">Date picker</label> <input type="date" name="date-picker" id="date-picker" value="2010-10-06"> <label for="color-picker">Color picker</label> <input type="color" name="color-picker" id="color-picker" value="ff0000"> <label for="text-field">Text field with placeholder</label> <input type="text" name="text-field" id="text-field" placeholder="Insert your text here"> <label for="url-field">Url field</label> <input type="url" id="url-field" name="url-field" placeholder="http://net.tutsplus.com/" required> <label for="email-field">Email field</label> <input type="email" id="email-field" name="email-field" placeholder="contact@ghinda.net" required> <button type="submit" role="button" aria-disabled="false"> <span>Submit form</span> </button> </form>
[divider_padding]
[divider_padding]
CSS3 media queries
Ahora mismo existe más variedad de resoluciones de pantalla que nunca. Mientras que hace relativamente poco podíamos predecir el aumento de la resolución a medida que descendían los precios de las pantallas, el auge de los dispositivos portátiles ha traído del abismo a resoluciones que considerábamos obsoletas.
Las media queries son en realidad la llave para crear nuestros disenos adaptables; con ellas podemos aplicar distintos estilos CSS según el ancho de la pantalla en el que se visualiza la web. Así de limpio y cómodo: nada de javascript ni cosas raras.
Por ejemplo, si queremos aplicar un estilo específico en el caso de que el ancho de la pantalla sea menor de 430px basta con:
@media screen and (max-width:430px){
#container{
width:320px;
}
header h1#logo a{
width:320px;
height:44px;
background:url(image-small.jpg) no-repeat 0 0;
}
}
[divider_padding]
[divider_padding]
Cambiar el tamaño de la fuente con REM
Si bien existía un tenso debate acerca de si se debía medir nuestra fuente en px o en em, css3 introduce una nueva unidad: rem.
Rem procede de la frase ”root em“, y viene a resolver el problema de los em que son relativos al tamaño del padre y no del documento raíz. Es decir, si ya conoces lo que es medir en em, no te será ajeno el infierno que supone calcular el tamaño de un elemento al tener que tener en cuenta a su padre, al padre de su padre… En cambio rem es una medida relativa a la raiz del documento, no a su elemento padre.
¿Y todo esto para qué? Pues para tener un consistente y predecible redimensionado de texto relativo a un tamaño de fuente que hayas definido en la raiz del documento html.
html {font-size: 62,5%;}
body {font-size: 1.4rem;} / * = 14px * /
h1 {font-size: 2.4rem;} / * = 24px * /
Sin duda las medidas relativas, ya sean em o rem, les sonarán a chino a más de uno, y requerirá de un estudio más amplio que no vamos a dar aquí…
…aunque quizá sí aquí:
[divider_padding]
Animaciones CSS
Animaciones sin javascript. Sí, ya es posible, al menos en los navegadores que lo soportan, aunque por ahora sea mediante propiedades propietarias como -moz-keyframes.
Como ejemplo un cambio de color de fondo:
#logo {
margin: 15px 15px 0 15px;
background: red;
float: left;
/* Firefox 4+ */
-moz-animation-name: colour-change;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 30s;
/* Webkit */
-webkit-animation-name: colour-change;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
}
@-moz-keyframes colour-change {
0% {
background: red;
}
33% {
background: green;
}
66% {
background: blue;
}
}
@-webkit-keyframes colour-change {
0% {
background: red;
}
33% {
background: green;
}
66% {
background: blue;
}
}
[divider_padding]
[divider_padding]
Múltiples imágenes de fondo
¿Alguna vez te has sentido limitado aplicando imágenes de fondo a través de css? ¿Has querido añadir un patrón, una textura de fondo, una sombra… y a la vez un icono ? Ahora puedes.
Puede parecer una tontería, pero realmente abre un montón de posibilidades gráficas. Exempli gratia:
div.prueba { background: url(imagen1.png), url(imagen2.png), url(imagen3.png) #000; }
[divider_padding]
¡No programeis mucho y Dios salve a HTML5!
