Etiqueta: html

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.

Vídeo en HTML5 (básico)

en por Donnie Rocken HTML5, Informática2 comentarios

Utilizando HTML siempre nos encontramos con el problema de tener que depender de QuickTime y AdobeFlash para insertar audio o vídeo. HTML5 nos da las etiquetas AUDIO y VIDEO que nos permiten, con mayor facilidad, insertar este tipo de recursos multimedia en nuestra página.

En esta ocasión nos centraremos en la etiqueta VIDEO, que como habréis podido deducir nos permite insertar vídeos en nuestra página. El uso de esta etiqueta es tan simple como lo que podéis ver en el siguiente ejemplo:


<video src="example.mp4" width="600" height="320" controls preload></video>

Ya ves que no es complejo, aunque requiere una cierta explicación. Estos son los atributos que tienes a tu disposición:

  • SRC: Enlaza con el archivo de video que queremos reproducir
  • WIDTH: El ancho del video en pixeles.
  • HEIGHT: El alto del video en pixeles.
  • CONTROLS: Nos permite incluir los controles del reproductor del navegador como el botón de play o el volumen.
  • AUTOPLAY: Permite especificar si el archivo de video se reproduce desde que se carga la pagina.
  • PRELOAD: Carga un poco el archivo de video en el buffer antes de iniciar la reproducción, para que no se trabe mientras se reproduce.

Todo parecía muy fácil hasta aquí, pero, mi querido programador web, ya sabes que NUNCA es tan fácil. Si los problemas para conseguir la compatibilidad de tu maquetación en CSS en todos los navegadores te ha hecho envejecer prematuramente varios años ya sabes lo que viene ahora: Los distintos navegadores dan soporte a distintos formatos de vídeo (seguro que no te sorprende, seguro que te lo venías oliendo). Las compatibilidade de los motores de los navegadores con los codecs de vídeo son:

  • H.264 :: Soportado por Safari, Google Chrome e Internet Explorer 9. Se trata de un codec propietario
  • OGG Theora :Soportado por Firefox, Opera y Google Chrome. Es libre, pero menos eficiente que H.264, ya que ofrece menor calidad y mayor tamaño de los archivos.
  • WebM : Soportado por Google Chrome, Firefox y Opera, aunque Google también ha creado un plugin para que funcione en IE9, y en Safari debería funcionar ya que usa como base QuickTime para reproducir vídeo. Es libre, ofrece una calidad similar a H.264 pero además consigue una mejor compresión, creando archivos más ligeros. Incluso el FlashPlayer de Adobe soportará este formato.

Todo esto provocado por el enfrentamiento entre los consorcios WHATWGs (apoyado mayoritariamente por Google, Mozilla y varias empresas del campo de software libre) y MPEG-LA (este apoyado por el eje del mal: Apple/Microsoft). Tal cual está el tema de las licencias a día de hoy, en 2016 el codec H.264 podría pasar a ser de pago, así que habrá que tener ojo con eso.

Entonces ¿cómo consigo la compatibilidad entre varios navegadores? Tampoco es difícil. Lo que tienes que hacer es no poner el atributo src dentro de la etiqueta VIDEO. En su lugar, tienes que crear etiquetas SOURCE con los distintos src y especificando en cada uno el codec, y ponerlas entre la apertura y el cierre de VIDEO, como en el siguiente ejemplo:

<video width="600" height="320" controls preload>
  <source src="ejemplo.ogv" type='video/ogg; codecs="theora,vorbis"' />
  <source src="ejemplo.mp4" type='video/mp4; codecs="avc1,mp4a"' />
  <source src="ejemplo.webm" type='video/webm; codecs="vp8,vorbis"' />
</video>

Como ves, la etiqueta SOURCE tiene como argumentos el src y type, donde definís el tipo de vídeo y el codec a reproducir.

En fin, el futuro próximo de la web está aquí, en HTML5. Haciendo uso de CSS además podréis lograr un reproductor más personalizado, más «bonito» y visible. Id pegándole un ojo.

Creando y añadiendo un «favicon» a nuestra web

en por Donnie Rocken Informática, Lenguajes de programaciónDeja un comentario

A día de hoy todavía se ven webs sin favicon por ahí (el icono que podéis ver en el navegador cuándo la visitáis o que queda como enlace corto cuando añadís la página a favoritos). No es que sea fundamental, desde luego, pero hace bonito y no cuesta mucho hacer uno.

Haciendo un poco de «captain Obvious» lo primero que necesitarás es una imagen. Fíjate por ejemplo en esta de wordpress, en la de gmail, en la de facebook o en la de Twiteer ¿qué ves? Un diseño sencillo y sólido. No te mates con una imagen con muchos detalles porque el tamaño en que se mostrará es muy pequeño, intenta más bien un diseño sencillo, preferiblemente en dos colores y con una letra o símbolo muy reconocibles como elemento principal. Este icono ha de ser tu «meme» en internet.

Puedes crear la imagen haciendo uso del programa de edición de imagen GIMP, totalmente libre y bajo licencia GPL, o de Inkscape. El caso es que cuando tengas diseñada tu imagen (si tienes un logo, una buena idea es poner simplemente la primera letra de este sobre tu color corporativo, y ya tienes un icono seguramente muy válido), debes guardarla en un tamaño y formato válido para su uso como icono. El tamaño ideal es alrededor de 16 x 16 px. Las opciones de formato más válidas son usar un archivo .ico, un .png o un .gif.

El .ico, si está muy comprimido, me ha dado algún problemilla con Opera y Chrome/Safari, el .gif es ideal si queréis usar un icono animado, y yo suelo utilizar .png, que además suelo comprimir lo máximo posible (tampoco es que requieran una gran definición ya que se ven miniaturizados).

Finalmente llega el momento de incluirlo en vuestra página. Basta con añadir una línea dentro del bloque head  de vuestro HTML con esta estructura:

<link rel="shortcut icon" href="directorio/vuestraimagen.laextensiónquesea" />

Importante, el parámetro rel antes que href siempre. Aunque para insertar un css o una librería de javascript en principio sea indiferente, en este caso a mi me ha fallado alguna vez poniendo primera la dirección del recurso.

En fin, con esto ya tenéis mis consejillos de cómo elaborar e insertar vuestro icono. Enjoy it!