Etiqueta: html5

Ejemplos varios de canvas (html5)

en por Donnie Rocken HTML5, Informática, Javascript/jqueryDeja un comentario

Canvas es, probablemente, el elemento más potente de HTML5. Mayormente nos da una funcionalidad similar a las animaciones flash en una parte de la pantalla, pero utilizando javascript. En principio es para un contexto 2D pero ya hay una librería (three.js) que te permite utilizar gráficos 3D (de momento no soportada por todos los navegadores). En los primeros manuales de HTML5 que cayeron en mis manos este elemento venía muy mal explicado, te decían que se podía «dibujar» usando javascript… y ale, vía.

Para utilizar canvas en tu web debes incluir una etiqueta canvas, que por defecto será invisible y tendrá un tamaño de 300*150 px. Luego, en javascript, debes inicializar un contexto tal que así: 

var ctx = document.querySelector('canvas').getContext('2d');

Tras haber definido un contexto bidimensional, podemos empezar a dibujar. El API da la posibilidad de utilizar rectángulos, arcos, círculos… El siguiente código dibujaría un rectángulo, con un reborde más oscuro: 

ctx.fillStyle='rgb(0, 255, 0)';
ctx.fillRect(10,20,50,50);
ctx.strokeStyle='rgb(0,182,0)'
ctx.lineWidth=5;
ctx.strokeRect(9,19,52,52);

En fin, esto es lo más básico, pero tienes múltiples opciones: degradados, imágenes complejas, animaciones, interactividad… En lugar de currarme un tutorial más complejo te remito a varios enlaces para que veas la pontencia de Canvas:

Bueno, con estos ejemplos ya puedes ver más o menos la potencia de este elemento y tener varios tutoriales para iniciarte en la creación de aplicaciones con canvas.

Formularios HTML5 con jQueryMobile

en por Donnie Rocken HTML5, Informática, Javascript/jquery1 comentario

Tras la iniciación a la maquetación con jQueryMobile que publiqué ayer, toca complementarla con una introducción a los formularios.

Como es habitual en todo formulario HTML, los campos estarán encerrados entre etiquetas form, con su action y su method definidos. Existen varios tipos de controles, que son mas que suficientes para poder crear formularios complejos, que puedes consultar aquí.

Una de las opciones que nos reporta jQueryMobile es la de poder crear formularios «mini», con una versión más pequeña de sus controles para facilitar la visualización en las pantallas de los móviles. Para ello debemos añadir el atributo data-mini=”true” en el controlgroup.

El atributo placeholder (del que también hablamos en este blog) juega un papel importante aquí. Si quieres ocultar la etiqueta label por motivos de accesibilidad pero que los lectores de pantalla puedan leerla, podras servirte de la clase ui-hidden-accessible y, con el atributo placeholder, usar el elemento de formulario con la etiqueta dentro.

Para deshabilitar un elemento del formulario usaremos el atributo disabled. En el caso de que necesitemos aplicar el estilo disabled a un elemento que no sea un control de formulario, podemos utilizar la clase ui-disabled sobre el elemento.

Ahora un ejemplo de un formulario con las etiquetas como placeholder y controles mini, para ilustrar lo explicado.

<form action="procesar.php" method="post" id="formEjemplo">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-mini="true">
            <legend>Login ejemplo:</legend>
            <label for="user" class="ui-hidden-accessible">Usero:</label>
            <input type="text" name="user" id="user" value="" placeholder="User" />
            <label for="password" class="ui-hidden-accessible">Usuario:</label>
            <input type="password" name="password" id="password" value="" placeholder="password" />
        </fieldset>
    </div>
</form>

Si usas un contenedor para controles de formularios (que es un elemento de jQueryMobile) y quieres ocultar la etiqueta y usar el texto placeholder, tienes que ocultarla en los atributos del div con class=»ui-hide-label» en lugar de en los del label, como en este ejemplo: 

<div data-role="fieldcontain" class="ui-hide-label">
    <label for="user">Usero:</label>
    <input type="text" name="user" id="user" value="" placeholder="User" />
</div>

Y con esto ya puedes empezar a hacer tus formularios optimizados para móviles.

Iniciación a jQueryMobile: Maquetando web para móviles con HTML5

en por Donnie Rocken HTML5, Informática, Javascript/jquery3 comentarios

A la hora de programar webs para móvil el framework de javascript jQueryMobile, basado en jQuery, nos ofrece una gran productividad, simplificando profundamente las cuestiones de maquetación. Si ya conoces jQuery y jQueryUI la curva de aprendizaje será muy pequeña.

Este framework es compatible con todos los navegadores y sistemas operativos móviles actuales, es ligero (20kb), casi no utiliza imágenes, se puede combinar con PhoneGAP para realizar aplicaciones nativas y es libre y gratuito.

A la hora de crear la estructura, como en cualquier web, lo primero es empezar por la cabecera (la etiqueta HEAD). Ahí agregamos las referencias necesarias a jQuery, jQuery Mobile y el theme básico de CSS. Para definir el ancho de pantalla utilizamos meta viewport, lo dejaremos definido con la constante width=device-width y la escala mínima y máxima a 1; initial-scale=1.0 maximum-scale=1.0.

Una vez que hemos terminado de referenciar las librerías necesarias, creamos la estructura de la plantilla principal de la página utilizando HTML5, y luego definimos las areas de contenido (content region) que proporciona jQueryMobile. El atributo data-role nos permitirá maquetar con comodidad y estructurar la página. Especificaremos la página (data-role=”page”), el encabezado (data-role=”header”), el contenido (data-role=”content”) y el pié (data-role=”footer”). Estos data-role los utiliza jQueryMobile para en Widgets funcionales y con los estilos del theme utilizado las secciones definidas.

Creo que lo mejor es un ejemplo que ilustre lo comentado: 

<!DOCTYPE html>
<html>
<head>
    <title>Página prueba</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body> 
 
<!-- Página principal -->
<section data-role="page" data-title="Página de inicio">
 
    <header data-role="header">
        <h1>HW</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello world!</p>
    </section>
    <!-- end content -->
 
    <footer data-role="footer">
        <p>DonnieRock 2012</p>
    </footer>
    <!-- end footer -->  
 
</section>
<!-- end page -->
 
</body>
</html>

Pero el verdadero cambio respecto a la programación web tradicional es el concepto «page within page». Dentro del mismo documento están incrustadas todas las páginas. De ahí que en el ejemplo de arriba utilizaramos el atributo data-role=page, porque tendremos que definir varias páginas, que se diferenciarán entre ellas por su atributo id, que será obligatorio para poder navegar entre ellas.

La navegación entre distintas páginas de un mismo documento es bastante sencilla, tenemos que poner en el ‘href’ del enlace el ‘id’ de la página destino y ya está. Podemos especificar el tipo de transición con el atributo data-transition, la transición por defecto es slide pero existen varias que puedes consultar en la página de jQuery. También podemos definir la dirección de la transición con el atributo data-direction.

Recuperaré el código del primer ejemplo, con alguna modificacación, para explicar esto:

<!DOCTYPE html>
<html>
<head>
    <title>Página prueba</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body> 
 
<!-- Página principal -->
<section data-role="page" id="page1" data-title="Página de inicio">
 
    <header data-role="header">
        <h1>HW</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello world!</p>
    </section>
    <!-- end content -->

    <footer data-role="footer">
        <p>
            DonnieRock 2012 
           <a href="#page2" data-role="button" data-transition="slidedown">Ir a la página 2</a>
        </p>
    </footer>
    <!-- end footer -->  
 
</section>
<!-- end page 1-->

<!-- Segunda página -->
<section data-role="page" id="page2" data-title="Página 2">
 
    <header data-role="header">
        <h1>HW2</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello, again, world!</p>
    </section>
    <!-- end content -->
 
    <footer data-role="footer">
        <p>
            DonnieRock 2012 
           <a href="#page1" data-role="button" data-transition="slidedown" data-direction="reverse">Ir a la página 1</a>
        </p>
    </footer>
    <!-- end footer -->  
 
</section>
<!-- end page 2-->
 
</body>
</html>

Finalmente nos queda por elegir el «theme». Podemos crearlo fácilmente con el ThemeRoller que hay en la web de jQueryMobile, con multitud de themes que podemos crear y asignar a cada componente que usemos en nuestra aplicación. También hay themes ya predefinidos, si no queremos rompernos la cabeza. Los themes son diferenciados por una letra identificativa, gracias a la cual podemos identificar el theme y aplicarlo a cualquier componente que queramos, usando el atributo data-theme. Tienes información sobre los distintos themes en la página de jQueryMobile. El theme además puede ser modificado con facilidad tocando los archivos css.

<section data-role="page" id="page1" data-title="Página de inicio" data-theme="b">
 
    <header data-role="header">
        <h1>HW</h1>
    </header>
    <!-- end header -->
 
    <section data-role="content">
        <p>Hello world!</p>
    </section>
    <!-- end content -->

    <footer data-role="footer">
        <p>
            DonnieRock 2012 
           <a href="#page2" data-role="button" data-transition="slidedown">Ir a la página 2</a>
        </p>
    </footer>
    <!-- end footer -->  
 
</section>

Bueno, espero con esto ya tienes unas nociones básicas de cómo empezar. Más adelante tocaré otros temas, como los formularios o la integración con PhoneGAP, de momento podéis ir ojeando esto.

Aplicaciones offline en HTML5

en por Donnie Rocken HTML5, Informática1 comentario

Lee una página web offline siempre había sido posible. Descargabas la página y las hojas de estilos y listo, ya podías ojearla. Pero ¿y las aplicaciones? Eso ya era otra cosa, ahí ya estabas limitado.

HTML5 llega con la posibilidad de la creación de aplicaciones offline. Imaginemos que hemos puesto un juego creado en una etiqueta canvas con javascript (uno mismamente como CanvasRider), y queremos que el usuario pueda usarla aunque no esté conectado. Lo que tenemos que hacer es crear un archivo app.manifest listando los archivos que tienen que descargarse. Algo así:

#Cache para la aplicación offline
#HTML
index.html
#Javascript
_js/aplicacion.js
#CSS
_css/aplicacion.css
#Imágenes
_img/imagen1.png
_img/imagen2.png
_img/imagen3.png
_img/animacion.gif

Una vez hecho el archivo .manifest hay que enlazarlo con la web. Lo primero es meterlo como atributo en la etiqueta html del archivo hmtl principal: 

<html manifest = "app.manifest" >

Se debe configurar el tipo MIME correcto en el servidor para que reconozca bien el archivo. Si usas Apache en la carpeta /conf/ encontrarás la carpeta mime.types, debes añadir al final:

#HTML5 applicacion cache_offline access
text/cache-manifest manifest

Si por lo que sea no puedes acceder a este archivo (tal vez porque tu empresa de hosting no te lo permita), puedes crear un archivo .htaccess en la carpeta web con este texto:

AddType text/cache-manifest .manifest

Cuando el usuario visita el sitio, el navegador compara los archivo manifest (local y remoto) y comprueba si son iguales. Si el archivo remoto cambió el navegador descarga todos los archivos listados en él. Es posible forzar al navegador a cargar determinados recursos siempre de la red, por medio de la instrucción NETWORK. Por ejemplo, si quisiéramos que una imagen siempre sea cargada desde el servidor, dentro del archivo manifest habría que declararlo así:

NETWORK:
imagen1.png

El problema de hacer esto es que si la aplicación se utiliza offline la imagen se tratará de cargar desde el servidor. Para solucionar esto se puede utilizar otra instrucción que especifica que si no existe conexión se cargue un archivo local, y si la hay se cargue el archivo desde el servidor. Este es la instrucción FALLBACK:

FALLBACK
imagen1.png imagen1Local.png

Y no sólo esto, sino que también podemos especificar que en caso de que estemos sin conexión se muestre la misma imágen para todas las imágenes de la página, tal que así:

FALLBACK
_img/ _img/imagen1Local.png

Mientras los archivos manifest se comparan y se descargan los nuevos archivos varios eventos se disparan en un objeto llamado ApplicationCache. Con este objeto, por ejemplo, podemos actualizar al usuario con los nuevos archivos descargados sin necesidad de volver a lanzar la aplicación.

El objeto window.applicationCache tiene varios métodos, pero los más destacados y útiles son:

  • cache.status: Nos muestra el estado de la app mediante una serie de constantes.
    • 0 = uncached
    • 1 = idle
    • 2 = checking
    • 3 = downloading
    • 4 = updateready
    • 5 = obsolete
  • cache.update(): Llama al proceso de descarga de cache. Lanza una excepción INVALID_STATE_ERR en caso de que no exista cache que actualizar.
  • cache.swapCache(): Cambia la cache mas reciente en caso de que exista uno, si no, arroja una excepción de tipo INVALID_STATE_ERR

Un pequeño ejemplo de cómo lograr actualizar la aplicación con los archivos nuevos sin recargarla:

cache = window.applicationCache;
cache.addEventListener('updateready',function{
    cache.swapCache();
},false);

Placeholder: texto dentro de los inputs en HTML5

en por Donnie Rocken HTML5, InformáticaDeja un comentario

Placeholder es una nuevo atributo y que te permite introducir un texto dentro de un input, siempre y cuando el campo esté vacío o no esté senalado. En la barra de búsqueda de Opera o de Firefox puedes ver algo similar. Si pulsas sobre el campo (o llegas a él mediante el uso del tabulador) el texto se borrará.

Este atributo está soportado ya por casi todos los navegadores, al menos por Firefox, Opera, Chrome y Safari, me ha dado problemas con IE7 e IE8 y no he podido probarlo con IE9. Y… no tiene mucha más ciencia esto. Tiene utilidad sobre todo a la hora de maquetar webs para dispositivos móviles, ya que así te puedes ahorrar la etiqueta y ganas en espacio en pantalla. Un ejemplillo simple para terminar: 

      <form>
      	<input placeholder="Prueba" />
      </form>

Con esto tendrías una etiqueta input con el texto «prueba» por dentro.

Uso de la etiqueta audio en HTML5

en por Donnie Rocken HTML5, Informática3 comentarios

Me estoy planteando hacer una sección html5 porque empieza a tener bastante peso en este blog. En cualquier caso, si antes hablé de vídeo ahora toca hablar de audio. De hecho el uso de audio es más sencillo que el de vídeo, tiene menos opciones.

Como ya sabes, la idea de la etiqueta audio es poder insertar archivos de audio directamente en una página web, sin necesidad de un reproductor en flash o de QuickTime. La sintaxis básica sería la siguiente:

<audio width="250" height="32" src="cancionEjemplo.mp3" controls="controls" autoplay="autoplay" preload=""/></audio>

Bueno, width y height son para definir el tamaño del reproductor, no son obligatorios y realmente lo mejor sería no tocarlos si no es necesario para adaptarlos a la maquetación de tu página. El resto los relato a continuación:

  • src: La propiedad src habitual, que enlaza con la dirección del contenido que queremos mostar, en este caso el archivo de audio.
  • controls: Nos permite implementar los controles básicos del reproductor: volumen, play/pause, seek.
  • autoplay: Nos deja especificar si queremos que el archivo de audio comience a reproducirse desde el momento en que se carga la página
  • preload: Permite que especifiquemos si queremos que el archivo comience a cargarse en el buffer antes de comenzar la reproducción, para que no se trabe durante la reproducción por intentar reproducir más de lo que ha cargado.

Como con las etiquetas de vídeo, el problema vendrá por la compatibilidad de los distintos formatos con los navegadores. No todos soportan todo, así que tendrás que romperte un poco la cabeza. En esta lista puedes ver qué formatos soporta cada navegador:

  • Google Chrome: Soporta tanto mp3, como wav y ogg.
  • Safari: A pesar de usar el mismo motor de renderizado que Chrome (el motor Webkit) no soporta el formato ogg, aunque sí mp3 y wav
  • Mozilla Firefox: Soporta ogg y wav, pero no mp3.
  • Opera: Igual que Mozilla, sólo ogg y wav.
  • Internet Explorer: IE9 soporta mp3 y wav, como Safari. De versiones anteriores del navegador de Microsoft ya no me preguntes.

Ok, all right, yeah man! Ahora te estás preguntando «¿y cómo me aseguro de que mi archivo se reproduzca en todos los navegadores?», o si leiste la entra de este mismo blog sobre la etiqueta vídeo ya no te lo preguntas, porque el método es igual. Hay que meter etiquetas source con los distintos archivos dentro de una etiqueta audio, tal que así:

<audio controls autoplay>
    <source src="prueba.ogg" type="audio/ogg" />
    <source src="prueba.wav" type="audio/wav" />
    <source src="prueba.mp3" type="audio/mp3" />
</audio>

Como te imaginas en la etiqueta source la propiedad src es lo mismo que en la etiqueta audio, y type nos permite definir el tipo de archivo que será.

En fin, como diría el guiñol de Michael Robinson «todo pescao vendido, hasta aquí todo por hoy» (léase con acento galés). Espero que os sirva de ayuda.

Creando un menú con HTML5 y CSS3

en por Donnie Rocken HTML5, Informática5 comentarios

Volviendo con los artículos sobre HTML5 hoy vamos a ver cómo hacer un menú horizontal básico utilizando html5 y CSS3 (sobre todo CSS3).

En fin, en el marcado poca chicha hay. Es decir, lista desordenada de toda la vida, y el único cambio es que usaremos la etiqueta nav:

<nav>
  <ul>
<ul>
	<li><a class="hiddenSpellError">title="Primero" href="#">First</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Segundo" href="#">Second</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Tercero" href="#">Third</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Cuarto" href="#">Fourth</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Quinto" href="#">Fifth</a></li>
</ul>
  </ul>
<!--<span class="hiddenSpellError" pre=""-->nav>

Con esto la parte HTML5 ya está liquidada. Ahora toca empezar a trastear con CSS3. Lo primero es el css de la sección NAV, donde pondremos bordes redondeados, degradado de blanco a gris y definiremos el tamaño. Luego a los elementos de lista les quitaremos el botón de lista y los flotaremos a la izquierda(como en cualquier menú horizontal tradicional). También añadiremos una transición a cada enlace. Como CSS3 todavía no está estandarizado hay que usar propiedades espcíficas para cada navegador. En el futuro debería funcionar en todos con la propiedad estandar.

nav{
    /*Borde redondeado*/
    -webkit-border-radius:9px;/*Chrome y Safari*/
    -moz-border-radius:9px;/*Firefox*/
    -o-border-radius:9px;/*Opera*/
    border-radius:9px;/*Estandar*/
    /*Color degradado*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#BBB));/*Chrome y Safari*/
    background-image: -moz-linear-gradient(top center, #FFF, #BBB);/*Firefox*/
    background-image: -o-linear-gradient(top, #FFF, #BBB);/*Opera*/
    background-image: linear-gradient(top, #FFF, #BBB);/*Estandar*/
    overflow:hidden;
    padding:12px;
    width:890px;
}

nav ul{
    list-style:none;
    margin:0 10px 0 10px;
    padding:0;
}

nav ul li{
    /*Borde redondeado*/
    -webkit-border-radius:6px;/*Chrome y Safari*/
    -moz-border-radius:6px;/*Firefox*/
    -o-border-radius:6px;/*Opera*/
    border-radius:6px;/*Estandar*/
    float:left;
    font-size:16px;
    font-weight:bold;
    margin-right:11px;
    text-align:center;
    /*Sombras*/
    text-shadow: 0px 1px 0px #FFF;
}

nav ul li a{
    color:#AAA;
    display:block;
    padding:10px;
    text-decoration:none;
    /*Transiciones*/
    -webkit-transition: 0.3s linear all;
    -moz-transition: 0.3s linear all;
    -o-transition: 0.3s linear all;
    transition: 0.3s linear all;
}

Bueno, tenemos el color de fondo, tenemos los bordes, tenemos la lista en formato horizontal… ¿Qué nos falta? Pues nos falta definir qué ocurre cuando naveguemos sobre los enlaces, cuando pongamos el ratón encima. Para eso utilizamos la pseudo-clase :hover de toda la vida, pero en este caso con degradados y sombras. Además, el texto se oscurecerá.

nav ul li:hover{
    /*Color degradado*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/
    background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/
    background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/
    background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar*/
    /*Sombras*/
    -webkit-box-shadow:  1px -1px 0px #999;/*Chrome y Safari*/
    -moz-box-shadow:  1px -1px 0px #999;/*Firefox*/
    -o-box-shadow:  1px -1px 0px #999;/*Opera*/
    box-shadow:  1px -1px 0px #999;/*Estandar*/
    border:1px solid #E3E3E3;
}

nav ul li a:hover {
    color:#000;
}

Y ahí tenéis un menú con estilo css3 bien chulo, recordad si lo testeáis que en los navegadores antiguos no va a funcionar, así que si tenéis IE6 o 7… instalad un navegador actualizado, que son gratis, joder.

Estructura en HTML5

en por Donnie Rocken HTML5, Informática2 comentarios

Si eres un programador web de la old school seguramente recuerdes la época en que las tablas eran el elemento más utilizado para estructurar tu web. La generalización del uso de cajas (div) acabó con esta forma de maquetar, siendo a día de hoy la fórmula predominante. Esto provoca el uso indiscriminado de elementos div por todo el documento, que nos vemos obligados a ir posicionando con CSS (a veces rompiéndonos mucho los huevos para conseguir la compatibilidad en todos los navegadores) a base de definirlos a base de id y clases. Los nuevos elementos que incorpora HTML5 para la estructura son los siguientes, y nos permitirán un código mucho más limpio:

  • header: El elemento header es el encabezado de la página web, formado por una serie de elementos introductorios o de navegación.
  • footer: Este elemento es el pié de la página o la sección, donde suele insertarse información sobre la licencia, el autor, fecha de creación, empresa relacionada…
  • nav: Se usa para insertar un menú de navegación en la página, formado por enlaces. No todos los grupos de enlaces de la página tienen que estar dentro de una sección nav, sólo los principales, como el menú de navegación bajo el encabezado o un menú en el pie.
  • section: Define una sección general en un documento o aplicación, como si fuera una especie de «capítulo». Puede contener subsecciones y si se utilizan con elementos h1-h6 se pueden crear jerarquías, muy útiles para una buena estructuración de la web.
  • article: Un elemento article es seguramente lo más complicado de explicar. Es un elemento, una seccion reutilizable de la página web para mostrar un determinado contenido, como un post en un foro, un artículo en un periódico, un widget interactivo… Los elementos article pueden anidarse, siendo el artículo anidado parte del principal, como los comentarios a una publicación en un blog.
  • aside: Es una sección de la página que abarca un contenido relacionado con el contenido que lo rodea, perp que se puede considerar un contenido independiente. Puede utilizarse para barras laterales, elementos publicitarios, grupos de elementos de la navegación…

Ahora un ejemplillo de código bien tochaco con una página html. Desde la declaración hasta el último pie:

html>
lang="es">
<head>
  charset="utf-8" />
  IE=edge,chrome=1" />
  <title>prueba</title>
  name="description" content="EjemploHTML5" />
  name="author" content="DonnieRock" />
  name="viewport" content="width=device-width; initial-scale=1.0" />
</head>

<body>
  <div>
    <header>
      <h1>prueba</h1>
    </header>
    <nav></pre>
<a class="hiddenSpellError">href="/">Home</a>
<pre></pre>
<a class="hiddenSpellError">href="/contact">Contact</a>
<pre>
    </nav>

    <div>
      <article>
      	<h2>Artículo1</h2>
<section>El artículo1: Ninguna banda finlandesa llegará nunca aser como Black Sabbath</section>
      	<h2>Artículo34</h2>
      	<section>El artículo34: Hago lo que quiero, donde quiero y cuando quiero</section>
      	<article>
      		<h3>Subartículo</h3>
<section>Kobe Bryant nunca será Michael Jordan</section>
      	</article>
      </article>
      <aside>Esto, para el lado</aside>
    </div>

    <footer></pre>
© Copylefted by Old Dog Donnie Rock
<pre>
    </footer>
  </div>
</body>
</html>

En fin, espero que estoy os sea de ayuda empezando con HTML5.

El API de geolocalización en HTML5

en por Donnie Rocken HTML5, InformáticaDeja un comentario

Aunque la geolocalización no forme parte de la especificación original de HTML5 (al menos según dice el manual de Remy Sharp, que es el que en un primer momento fue manual de referencia), su funcionalidad es una de las más atractivas e interesantes de dicho lenguaje, sobre todo en un contexto de web cada vez más orientada a dispositivos móviles (tablet, smartphone).

En fin, el API de geolocalización de HMTL5 permite que el navegador acceda a los datos de la posición del dispositivo desde el que se está accediendo a la web, ya sea por triangulación usando el GPS, o el GSM del teléfono; o a través de la posición de tu dirección IP.

El API posee tres métodos básicos:

  • getCurrentPosition(): Recoge la posición del dispositivo una vez.
  • watchPosition(): Recupera y actualiza la posición conforme va cambiando.
  • clearWatch(): Detiene la actualización de la posición.

En caso de éxito, getCurrentPosition() y watchPosition() devuelven un objeto Position, formado a su vez por un objeto coords (con todas las coordenadas) y un timestamp. El objeto coords tiene varias propiedades, algunas reconocidas por todos los navegadores y otras no:

  • latitude: un número flotante de sólo lectura que indica la latitud.
  • longitude: un número flotante de sólo lectura que indica la longitud.
  • accuracy: un número flotante de sólo lectura que indica la precisión de la longitud y la latitud en metros.
  • altitude: un número flotante de sólo lectura que indica la altura. No todos los dispositivos los permiten, en esos casos viene a nulo
  • altitudeAccuracy: un número flotante de sólo lectura que indica la precisión de la altura en metros. No todos los dispositivos los permiten, en esos casos viene a nulo
  • heading: un número flotante de sólo lectura que indica la dirección y el recorrido, expresada en grados. No todos los dispositivos los permiten, en esos casos viene a nulo
  • speed: un número flotante de sólo lectura que indica la velocidad de desplazamiento, expresada en metros por segundo. No todos los dispositivos los permiten, en esos casos viene a nulo

Ahora que te has leído la teoría, lo mejor es un ejemplo práctico, similar al que aparece en el manual de Lawson y Sharp (Introducing HTML5):

if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function (position{
        var coordenadas = position.coords;
        showMap(coordenadas.latitude, coordenadas.longitude, coordenadas.accuracy);
    });
}else{
    window.alert("El navegador no soporta el API de geolocalización");
}

Plantéate que sería un código que llame a una función que genere un mapa recibiendo las coordenadas (como las API de GoogleMaps o OpenStreetMap). Primero comprueba que el navegador soporte el API, luego almacena las coordenadas conseguidas con getCurrentPosition en una variable objeto y finalmente las envía a la función que genera el mapa.

En fin, un API con muchas posibilidades en las nuevas aplicaciones web para dispositivos móviles.

Validación nativa de formularios en HTML5

en por Donnie Rocken HTML5, InformáticaDeja un comentario

Seguimos con las virtudes de HTML5, y el como en principio este nuevo standar nos facilitará la vida a los programadores web. Porque una de las evoluciones más potentes que incorpora es la validación de formularios de forma nativa, sin necesidad de Javascript (da la impresión de que a largo plazo la idea es cargarse este lenguaje cliente).

Como ya sabéis, tenéis varios tipos de input, que paso a listar debajo:

  • search: Para cajas de búsqueda
  • number: Para añadir o restar números mediante botones.
  • range: Para seleccionar valores dentor de un rango.
  • color: Para seleccionar un color.
  • tel: Para números de teléfono.
  • url: Para direcciones web.
  • email: Para direcciones de correo electrónico.
  • month: Para meses.
  • date: Para fechas.
  • week: Para semanas.
  • time: Para horas.
  • datetime: Para una fecha exacta, absoluta y con hora
  • datetime-local: Para fechas locales y frecuencia

Al definir el tipo de campo la validación de formato ya se realiza de forma nativa sin necesidad de tener que recurrir a una expresión regular. Pero si queréis una validación más compleja (por ejemplo, que el teléfono sólo pueda empezar por 6, 9 u 8, que son las tres posibilidades en España) podéis recurrir al atributo pattern, que nos permite insertar un patrón, con el estilo de una expresión regular, para validar el contenido. Y eso no es todo, si queréis que el campo sea obligatorio basta con añadir el atributo required, y ya de forma nativa se comprueba que haya datos. Con el atributo title podéis introducir el texto que queréis que se muestre en el tool tip que saldrá para informaros del error. Podéis ver varios ejemplos:

<input type="email" title="Use el siguiente formato: direccion@mail.com" required/><!--Esto validaría un correo electrónico de forma nativa-->
<input class="hiddenSpellError" type="text" />type="text" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" name="email" required/> <!-- Esto validaría un correo electrónico con una expresión regular -->
<input class="hiddenSpellError" type="text" />type="date" /> <!--Esto nos sacaría un "datepicker" para seleccionar una fecha (varía según navegador)-->

Ya lo veis, la validación es fácil. Pero además, resaltar los campos erróneos se facilita también con CSS3, ya que aparece una nueva pseudo-clase: invalid. Esto nos ahorra tener que andar jugando con javascript para marcarlos. Con la pseudoclase, basta con una sencilla regla CSS para conseguirlo, sin tener que capturar ningún evento:

input:invalid{
  border: 1px solid red;
  color: red;
}

Sólo con ese código los campos inválidos ya se pondrán automáticamente en rojo, quedando resaltados.

De momento no todos los navegadores dan soporte a la validación nativa en HTML5, pero es evidente el potencial de esta característica, que proveerá de gran productividad y comodidad al programador.