Linea de Codigo

Ahora que hemos publicado un artículo sobre cómo montar un slider en HTML5 muchas de las preguntas que nos están llegando son relativas al no soporte del slider HTML5 en ciertos navegadores y consultas sobre cómo montar una alternativa.

Lo que vamos a ver en este artículo es como crear un slider con jQuery. Y no es que jQuery nos de un slider como elemento base de su lenguaje, si no que vamos a utilizar un plugin de jQuery para poder crear un slider.

En concreto utilizamos el plugin fd-slider. Además vamos a utilizar la técnica de polyfills que vimos el otro día con el ejemplo sobre un placeholder.

Lo bueno del plugin fd-slider es que al ser un polyfill nos permite construir nuestra página con HTML5 y solo se ejecutará en aquellos navegadores que lo necesiten y durante el tiempo que lo necesiten.

Lo primero que tenemos que saber del plugin es que lo componen dos ficheros:

fd-slider.js
fd-slider.css

Utilizando el loader de Modernizr veremos que quedaría de la siguiente forma:

Modernizr.load({
	test:Modernizr.inputtypes.range,
	nope:['fd-slider.js','fd-slider.css']
});

Vemos que la capacidad que validamos del HTML5 es Modernizr.inputtypes.range.

Una vez cargados los ficheros del plugin fd-slider tenemos que lanzar el siguiente código para inicializar el plugin:

fdSlider.onDomReady();

Así que insertaremos dicho código dentro del polyfill.

Modernizr.load({
  test:Modernizr.inputtypes.range,
  nope:['fd-slider.js','fd-slider.css'],
  complete:function(){if(fdSlider)fdSlider.onDomReady();}
});

Ya tendremos cargado nuestro slider con jQueryfuncionando en la página.

Os podéis descargar el plugin fd-slider desde https://github.com/freqdec/fd-slider

Modernizr como librería Javascript está orientada a poder conocer el soporte de las capacidades CSS3 y HTML5 cuando nos ejecutemos en un determinado navegador. Pero la potencia de Modernizr no se queda solo ahí, si no que podemos hacer otras cosas como utilizar un polyfill.

Pero, ¿qué es un polyfill? Pues un polyfill es como se denomina a una librería Javascript que nos permite cubrir las capacidades HTML5/CSS3 que los navegadores no soportan. Es decir, completan al navegador para que se pueda ejecutar una página web construida con HTML5/CSS3 sin problemas.

Es decir, el código que creemos será estándar HTML5/CSS3 de tal manera que Modernizr nos ayudará a utilizar solo el polyfill si se necesita debido a las carencias del navegador.

Lo bueno es que Modernizr ya cuenta con una extensa librería de Polyfills.

En nuestro ejemplo, que nos explique como utilizar un Polyfill en Modernizr, vamos a crear una página que tenga un Placeholder y en el caso que no haya soporte del placeholder utilizaremos un plugin de jQuery que nos simule en Placeholder. Ambos artículos ya explicados en Línea de Código.

Para utilizar el polyfill de Modernizr tenemos que conocer el método Modernizr.load. La filosofía de este método es la siguiente:

Modernizr.load({
  test: capacidad-a-validar,
  yep : 'fichero-a-cargar-si-correcto.js',
  nope: 'fichero-a-cargar-si-no-soporte.js',
  complete: 'cosas-a-hacer-siempre.js'
});

Es decir, se testea la capacidad de HTML5/CSS3 que queramos cubrir. Si hay soporte se cargan los ficheros Javascript o CSS3 que haya en la parte del yep. Si no se soporta la propiedad testeada, se cargan los ficheros del nope. Y siempre, pase lo que pase, se carga lo que haya en complete.

Nosotros vamos a testear la propiedad Modernizr.input.placeholder que valida si hay soporte de placeholders. En el caso de que no lo haya cargamos el plugin 'jquery.placeholder.js' y lo inicializamos.

Para inicializar el plugin tendremos que ejecutar la siguiente línea de código:

$("input, textarea").placeholder();

El código del como utilizar un polyfill en Modernizr nos quedaría de la siguiente forma:

Modernizr.load({
        test:Modernizr.input.placeholder,
        nope:['lineadecodigo.com/js/jquery/jquery.js','lineadecodigo.com/js/jquery/plugins/jquery.placeholder.min.js','placeholder.js']
});

En placeholder.js hemos metido la inicialización del plugin.

Esperamos que se haya entendido el concepto del polyfill en Modernizr y cómo cargarlos. En vuestro caso, ¿qué polyfills estás utilizando?

Seguro que alguno de vosotros ha leido nuestro artículo que cuenta como utilizar un placeholder con HTML5. Esto nos posibilita el poner un texto dentro de un campo de un formulario para orientar al usuario sobre que contenido insertar en dicho campo.

Si bien, uno de los problemas que nos plantea el uso de ciertas propiedades HTML5 es la falta de implementación por parte de ciertos navegadores. Es por ello que la experiencia del usuario de esos navegadores puede ser diferente a la del resto.

Si queremos utilizar placeholders sin HTML5 podemos recurrir a un plugin de jQuery. Mediante el uso de jQuery y este plugin será muy sencillo poder utilizar un placeholders. Además es que la forma en la que utilicemos el placeholders será la misma forma en la que lo utilizábamos en HTML5.

Es decir, si queremos crear un placeholders pondremos lo siguiente:

<label for="texto">Nombre: </label>
<input type="text" id="texto" placeholder="Inserte su nombre" size="40" />

Para poder utilizar el placeholders con jQuery tendremos que hacer varias cosas. La primera será instanciar jQuery e instanciar el plugin de jQuery.

<script src="jquery.js"></script>
<script src="jquery.placeholder.min.js"></script>

Y el siguiente paso inicializar el plugin de jQuery. En este caso el código de incialización es:

$('input, textarea').placeholder();

Si bien, deberemos de esperar a tener cargada la página. Por ello recurriremos al método ready() de jQuery.

<script>
$(document).ready(function(){
	$('input, textarea').placeholder();
});
</script>

Con un plugin de jQuery y unas pocas líneas de código tenemos la capacidad de dar soporte a los placeholders de HTML5.

Te puedes descargar el plugin jQuery desde https://github.com/mathiasbynens/jquery-placeholder.

Una de las cosas que no está todavía soportada por los navegadores web respecto al HTML5 son los menús contextuales. A día de hoy solo Firefox 8 y superiores dan soporte al menú contextual en HTML5.

Pero, ¿qué es un menú contextual? Un menú contextual es aquel menú asociado a una zona de la página y el cual tenemos disponible mediante el botón derecho del ratón.

Lo primero de todo será saber cómo se define un menú contextual. Para ello vamos a necesitar el elemento menú.

 
<menu id="colorMenu">...</menu>
 

Lo importante en el caso de estar creando un menú contextual es que el tipo del menú es "context". Otros valores son "toolbar" o "list".

Lo siguiente que haremos será definir los diferentes items o elementos que tendrá el menú. En este caso utilizamos el elemento menuitem para dar de alta cada uno de ellos.

 
<menu type="context" id="colorMenu">
<menuitem label="Rojo" id="rojo" icon="rojo.png"/></menuitem>
<menuitem label="Verde" id="verde" icon="verde.png"/></menuitem>
<menuitem label="Azul" id="azul" icon="azul.png"/></menuitem>
</menu>
 

Vemos que cada menuitem lleva asociado un atributo label, que será el texto que aparezca en la opción del menú, un id y un icono, el cual definimos mediante el atributo icon. Ya solo nos quedará decidir dónde se va a lanzar el menú. Sobre que parte de la página se podrá ver este menú contextual en HTML5. Para ello utilizamos el atributo general contextmenu, al cual deberemos de pasar el ID del menú que acabamos de crear. Que queremos aplicar el menú sobre una sección de la página escribiremos:

 
<section contextmenu="colorMenu" id="miseccion">
</section>
 

Que lo queremos aplicar sobre un campo de input, pues escribirmos lo siguiente:

<label for="color">Color:</label>
<input id="color" type="text" contextmenu="colorMenu">
 

Ya solo nos quedará pulsar con el botón derecho sobre la zona del menú contextual para ver el efecto.

Sobre los menús contextuales podemos manejar los eventos como sobre cualquier otro elemento de la página. Así podemos añadir el siguiente código en Javascript para controlar el click sobre las opciones del menú contextual.

var campo = document.getElementById("color");
var color = document.getElementById("colorMenu");
color.addEventListener("click",function(ev){
	campo.value = ev.target.label;
},true);

El canvas es un elemento que aparece nuevo en HTML5 y que nos permitirá la gestión de gráficos. Así podremos dibujar gráficos, crear foto composiciones, realizar animaciones,...

Para crear un canvas en HTML5 tenemos que utilizar el elemento CANVAS.

<canvas>
  Contenido alternativo
</canvas>

A un elemento CANVAS podemos darle un alto y ancho mediante los atributos height y width respectivamente. Así como darle un identificador mediante el atributo id.

<canvas height="300px" width="300px" id="micanvas"></canvas>

En el caso de que no indiquemos las dimesiones, estas serán de 300x150.

Una vez que tenemos nuestro "lienzo" vamos a dibujar algún gráfico. Para ello utilizaremos el lenguaje Javascript. Así lo primero que haremos será obtener la referencia sobre el CANVAS mediante un getElementById().

var canvas = document.getElementById("micanvas");

Dentro de un CANVAS podemos volcar varios contextos. Lo que son conocidos como contextos de renderizado. Así podremos tener contextos 2D y 3D. Estos últimos todavía en fase experimental. El método .getContext() sobre el CANVAS nos permitirá crear un nuevo contexto.

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");

Ahora ya pasaremos a dibujar gráficos. Así, con el manejo de una propiedad: .fillStyle y un método .fillRect() podemos crear rectángulos de colores. En el caso de .fillStyle recibe como parámetro un color definido en formato RGB y en el caso de .fillRect() las coordenadas de los vertices superior izquierdo, así como el alto y ancho.

Así nos quedará el código que insertará gráficos al crear nuestro primer canvas con HTML5.

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
 
ctx.