theproc.es

Menus deplegables con jQuery

Tue, 10 Jan 2012 22:22:00 +0100

Hay un millón de formas distintas de crear menús deplegables con HTML. Unas sólo utilizan CSS y selectores :hover, otras utilizan javascript y otras una combinaación de ambas.

Siempre podemos buscar y utilizar algunos de los muchos scripts que hay por la red peroyo prefiero tener mi propia colección de scripts y plugins sencillos. Esto me permite, por un lado, aprender como funcionan las cosas y, por otro, tener un arsenal de sencillas herramientas, rápidas de comprender y sencillas de utilizar.

Dicho esto, vamos con nuestro plugin para menú deplegables:

Demo

Haz click aquí para verlo en acción.

HTML

Los menús deben estar incluidos en una lista desordenada, y los submenus deben ser a su vez listas desordenadas.

Los puntos clave son:

Los menos deben estar incluidos en una lista desordenada ul
Los submenus deben ser a su vez listas desordenadas
El enlace que activa el menú deplegable debe tener la clase trigger
El menú desplegable debe tener la clase "submenu"

Aquí podemos ver la estructura básica:

<ul id="menu">
  <li>
    <a href="#" class="trigger">Coches</a>
    <ul class="submenu">
      <li><a href="#">Ferrari</a></li>
      <li><a href="#">Mercedes</a></li>
      <li><a href="#">Renault</a></li>
    </ul>
  </li>
</ul>

CSS

El único CSS necesario es el siguiente:

<style>
  .submenu{
    display:none;
  }
  .open .submenu{
    display:block;
  }
</style>

Esto funciona de la siguiente manera: al principio los menus deplegables aparecen ocultos. Al hacer click en el enlace con las clase trigger añadiremos la clase open al li que contiente tanto al enlace como al menu desplegable.

Javascript

Antes de explicar el funcionamiento del script, aquí podeis ver su código:

<script type="text/javascript">
  (function($){
    $.fn.submenu = function () {
      var $this = $(this);
      function closeSubmenus() {
        $this.find('li').removeClass('open');
      }

      $('html').bind("click", closeSubmenus);

      return $this.each(function() {
        $this.delegate('.trigger', 'click', function (e) {
          var li = $(this).parent('li'),
              isActive = li.hasClass('open');
          closeSubmenus();
          !isActive && li.toggleClass('open');
          return false;
        });
      });
    }
  })(jQuery);
</script>

Esta función de plugin se invocará sobre el elemento de menu, es decir, sobre el ul principal:

<script type="text/javascript">
  $('#menu').submenu();
</script>

El primer paso es la tipica función anónima y autoejecutable que recibe un parámetro que se llamará $y que se invocará con el objeto jQuery.

De esta forma todo queda recogido en su propio contexto y podemos utilizar tranquilamente $ en caso de tener otras librerías cargadas en la página:

(function($){

})(jQuery);

A continuación creamos nuestra funcion de plugin y lo guardamos en el espacio de nombres de jQuery dedicado a ello:

$.fn.submenu = function(){

}

Esta función devuelve el elemento sobre el que invocamos el plugin para permitir llamadas encadenadas:

$.fn.submenu = function () {
  var $this = $(this);

  return $this.each(function() {
    // código del plugin
  });
}

Notad que he guardado una referencia a this encapsulada con jQuery. Esto tiene doble objetivo. El primero es evitar repetir llamadas a $(this) cacheando el resultado y el segundo es tener una referencia que podremos usar en funciones auxiliares como mostraré a continuación. this hace referencia al elemento #menu sobre el que hemos invocado el plugin.

Antes de añadir los comportamientos a los enlaces que desplegarán el submenú voy a crear una función auxiliar que utilizaré para cerrar el menú deplegable abierto, es decir, aquel que tiene la clase open y lo asigno al evento click de la página. Con esto conseguiré que al hacer click fuera del menú deplegable se cierre:

function closeSubmenus() {
  $this.find('li').removeClass('open');
}

$('html').bind("click", closeSubmenus);

Por último necesitamos que al pinchar en los enlaces con clase trigger se cierre el menú deplegable abierto (si lo hubiese) y que se abra el nuevo. Así que delegaremos sobre el menú para que cada click en el elemento con la clase trigger elimine la clase open de cualquier elemento li y lo añada al li padre del mismo:

$this.delegate('.trigger', 'click', function (e) {
  var li = $(this).parent('li'),
      isActive = li.hasClass('open');
  closeSubmenus();
  !isActive && li.toggleClass('open');
  return false;
});

Y con esto queda el plugin terminado. Haz click aquí para verlo en acción

Scroll con jQuery

Thu, 05 Jan 2012 11:01:00 +0100

En el nuevo diseño de www.axtro.es necesitabamos un efecto de scroll suave de una sección a la siguiente. Mi primera idea era simplemente usar uno de los varios Plugins de jQuery, pero todos los que probé tenían problemas y como descubrí después, realmente no hace falta un plugin porque es muy fácil programarlo en pocas líneas:

$(function(){ 
  $('a.scroll_demo[href^="#"]').click(function(e){ 
    var hash = $(this).attr('href'), 
        posicionNueva = $(hash).offset().top; 
    $("body,html,document").animate( 
      {scrollTop:posicionNueva}, 
      'slow', 
      function(){ 
        window.location.hash = hash; 
      } 
    ); 
    e.preventDefault(); 
  });
});

El código de arriba se usa en esta misma entrada en el ejemplo de abajo. Repasemos el código línea por línea:
Lo que queremos es que todos los enlaces que no apunten a otra página sino simplemente a un ancla de la página actual tengan el nuevo comportamiento. Con el selector en $('a.scroll_demo[href^="#"]') lo conseguimos, buscando sólo los enlaces cuyo atributo href empieza con un #. En este ejemplo también he incluido la restricción de que el enlace tiene que tener la clase scroll_demo para no interferir con el resto del blog.

En cuanto el usuario pincha en uno de estos enlaces, sacamos primero el valor del href con hash = $(this).attr('href') y después obtenemos la distancia entre el principio del documento y el principio del ancla con posicionNueva = $(hash).offset().top.

Con esto ya tenemos todo para empezar el scroll: $("body,html,document").animate({scrollTop:posicionNueva}, 'slow') moverá el documento para que el elemento apuntado por el enlace esté visible. Es necesario incluir body,html,document en el selector, para que funcione en todos los navegadores.

En el ejemplo de arriba he incluido como tercer argumento la función function(){window.location.hash = hash;}. Esta función se ejecutará después de finalizar la animación del scroll. Simplemente actualiza la dirección mostrada en el navegador para simular el comportamiento por defecto de pinchar en uno de estos enlaces.

Podéis probarlo en esta misma página con los dos enlaces de abajo:

Título 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Hacía abajo

Título 2

Hacía arriba

Tutorial de HTML5 - Semántica, parte 2

Wed, 26 Oct 2011 00:00:00 +0200

En este tutorial desarrollaremos la segunda parte del artículo anterior - Tutorial de HTML5 - Semántica, parte 1- para así dar por terminado lo relacionado a la semántica del HTML5.

Continuaremos presentando nuevos elementos que se utilizan en el código de HTML5.

aside
Así como el header coincide con el concepto de un “tope superior”, el elemento aside (en inglés: a un lado) coincide con el concepto de una “barra lateral”. Cuando digo "barra lateral", no me estoy refiriendo a la posición. El hecho de que algunos contenidos aparezcan a la izquierda o a la derecha del contenido principal no es razón suficiente para utilizar el elemento aside. Una vez más, es el contenido el que importa, no la posición.

El elemento aside se debe utilizar para un contenido que esté relacionado tangencialmente. Si usted tiene un contenido que considera debe estar separado del contenido principal, entonces probablemente sería adecuado utilizar el elemento aside para que contenga esta contenido. Pregúntese si el contenido que hemos colocado dentro de aside puede ser eliminado y esta acción no resta o altera el significado del contenido principal del documento o de la sección.

Por poner un ejemplo del tipo de contenido del que hablamos, podemos mencionar frases entrecomilladas con notable relevancia. (Imagen) Es un contenido directamente relacionado con el contenido principal, pero si se eliminara, este último no perdería su comprensión ni su estructura semántica.

Recuerde, sólo porque su diseño visual requiere un cierto contenido que aparezca en una barra lateral, no significa necesariamente que aside es el contenedor que debe contener los elementos correctos.

nav
El elemento nav hace exactamente lo que usted cree. Contiene información de navegación, por lo general una lista de enlaces.

Aclaremos un poco eso. El elemento nav está destinado a la información de navegación principal. El hecho de que un grupo de enlaces se agrupan en una lista no es razón suficiente para utilizar el elemento nav. Toda la navegación del sitio, en cambio, casi con toda seguridad pertenece al elemento nav.

Muy a menudo, un elemento nav aparecerá dentro de un elemento header. Eso tiene sentido si se considera que el elemento header se puede utilizar para "ayudas a la navegación" o colocar el menú principal.

article
Es correcto pensar en header, footer, nav, y aside como bloques específicos del elemento section. Una sección es un trozo genérico de contenido que está relacionado, mientras que header, footer, nav, y aside son trozos de tipos de contenido específicos relacionado.

El elemento article es otro tipo de sección especializada. Se utiliza como contenedor de un tipo de contenido que esté relacionado consigo mismo. ¿Difícil de entender?

Pregúntese si se sindicará el contenido en un RSS o Atom feed. Si el contenido todavía tiene sentido en ese contexto, entonces article será probablemente el elemento correcto a utilizar. De hecho, article es un elemento que está diseñado específicamente para sindicación de contenido.

Si usted usa el elemento time dentro de un elemento article, tiene la opción de añadir un atributo Booleano pubdate para indicar que contiene la fecha de publicación:

<article>
<header>
<h1>Título de la página</h1>
</header>
<p>Qué lindo el Sol esta mañana en Calcuta</p>
<footer>
El Cambio climático en la India
<p>Publicado
<time datetime="005-10-08T15:13" pubdate>
3:13pm 12 de Octubre de 2010
</time>
por José Pérez</p>
</footer>
</article>

Si tiene más de un elemento time en un artículo, solamente podrá uno de ellos podrá contener el atributo pubdate.

El elemento article es muy útil para artículos de Bitácoras (Blogs), noticias, comentarios, críticas y artículos de foros.

Lo que es más problemático es que article y section son muy similares. Todo lo que les separa es la palabra o el concepto "relacionado entre sí". Sería muy fácil si existiera una regla a seguir, pero en este caso todo se basa en la "interpretación". Se puede tener múltiples article dentro de una etiqueta section, se puede tener múltiples section dentro de un article, se pueden anidar article dentro de article y section dentro de section. Es cuestión de cada uno la selección que semánticamente más se adecue a uno u otro elemento teniendo en cuenta que "todo" el contenido de section debe estar relacionado entre si, y el contenido de article, que ha sido pensado para artículos y puedan ser sindicados.

Ver primara parte del Artículo: Tutorial de HTML5 - Semántica, parte

Plantillas Javascript con jQuery.tmpl

Sat, 08 Oct 2011 00:00:00 +0200

Esta semana se ha anunciado el soporte oficial por parte del equipo de jQuery del plugin de plantillas desarrollado por Microsoft, jQuery.tmpl.

Este plugin permite definir plantillas para renderizar contenidos de forma sencilla. Mucho más sencillo que crear marcado HTML por medio de javascript.

Voy a hacer una pequeña introducción demostrativa y para ello voy a ayudarme del código de un artículo anterior, Notificador Ajax usando jQuery.

La miniaplicación de dicho articulo permite mostrar de forma asincrona los últimos mensajes del timeline de TheProc.es en twitter. Para ello utiliza la API de twitter, obteniendo el listado de tweets en formato JSON. En esta ocasión obtendremos los tweets del timeline público.

En el código del ejemplo una vez obtenidos los tweets se añadia el texto de los mismos en un simple div:

$.ajax({
  url: 'http://api.twitter.com/1/statuses/public_timeline.json?count=15&callback=?',
  dataType: 'json',
  success: function(data){
    $('#status').html("");
    $(data).each(function(){
      $('#status').append("<div>"+this.text+"</div>");
    });
  }
});

Si quisieramos un marcado más complejo nos resultaria algo tedioso y más propenso a errores. Crear la estructura a mano, añadir las clases a mano, etc..

Por ejemplo, si quisieramos crear el siguiente marcado para cada tweet:

<div class="tweet">
  <div class="tweet-user-image">
    <img src="" alt="" width="48" height="48" />
  </div>
  <div class="tweet-content">
    <div class="tweet-text"><strong>usuario</strong> texto</div>
    <div class="tweet-meta">fecha</div>
  </div>
  <div class="hr"></div>
</div>

Sería algo así:

$("<div>").addClass("tweet").append(
  $("<div>").addClass("tweet-user-image").append(
    $("<img>").attr({src:"", alt: "", height: 48, width: 48})
  )
).append(...);

Con jQuery.tmpl es sencillo crear una plantilla para cada tweet, por ejemplo:

<script id="tweet" type="text/x-jquery-tmpl">
  <div class="tweet">
    <div class="tweet-user-image">
      <img src="" alt="" width="48" height="48" />
    </div>
    <div class="tweet-content">
      <div class="tweet-text"><strong>usuario</strong> texto</div>
      <div class="tweet-meta">fecha</div>
    </div>
    <div class="hr"></div>
  </div>
</script>

Como se puede ver se crea la plantilla dentro de un elemento <script> (puede crearse tambien como cadena de carácteres si no queremos tenerla definida en el propio HTML) con un id. Utilizamos el id para compilar y renderizar la plantilla con los datos que le pasemos.

$('#tweets').tmpl(datos);

Los datos que pasamos es un objeto JSON. Dicho objeto contendrá una lista de tweets ofrecidos por Twitter con los siguientes datos en su estructura:

[{
  text: "texto del tweet",
  createt_at: "fecha de creacion del tweet",
  user: {
    screen_name: "Nombre corto del usuario",
    profile_image_url: "url de avatar de usuario"
  }
}...]

Accedemos a esas propiedades en la plantilla con el tag ${nombre_de_variable}, por ejemplo ${user.name}, ${text}, etc..

La plantilla para los tweets sería la siguiente:

<script id="tweet" type="text/x-jquery-tmpl">
  <div class="tweet">
    <div class="tweet-user-image">
      <img src="${user.profile_image_url}" alt="${ user.screen_name }" width="48" height="48" />
    </div>
    <div class="tweet-content">
      <div class="tweet-text"><strong>${user.screen_name}</strong> ${text}</div>
      <div class="tweet-meta">${created_at}</div>
    </div>
    <div class="hr"></div>
  </div>
</script>

Para renderizar esta plantilla hariamos lo siguiente:

$('#tweets').tmpl(data).appendTo("#status");

#status es el div donde se mostrarán los tweets.

La llamada ajax quedaría de la siguiente manera:

$.ajax({
    url: 'http://api.twitter.com/1/statuses/public_timeline.json?count=15&callback=?',
    dataType: 'json',
    success: function(data){
      $('#status').html("");
      $("#tweet").tmpl(data).appendTo("#status");
    }
  });

Muy limpio y pontente. Si ahora queremos modificar la plantilla es mucho más sencillo que enredar con métodos y funciones jQuery.

Sacar fotos de una webcam con Javascript y Flash

Wed, 05 Oct 2011 00:00:00 +0200

Hace poco descubrí dos librerías Javascript, jpegcam y jQuery Webcam Plugin que permiten sacar fotos de una webcam y subirlo a nuestro servidor. Lógicamente no se puede hacer solamente con Javascript. Por eso las librerías utilizan un pequeño Flash para controlar la webcam. Puede ser interesante usarlo en algunas de nuestras páginas, por ejemplo en formularios de comentarios para ayudarle al usuario a crear un avatar. Hoy voy a presentar jpegcam, simplemente porque no depende de ninguna librería y por lo tanto se puede usar fácilmente en cualquier página web.

Para empezar, lo primero que tenemos que hacer es incluir el archivo javascript de jpegcam en nuestra página:


<script src="webcam.js"></script>

Entonces podemos configurar algunas opciones de la librería para adaptarla a nuestro entorno:


webcam.set_api_url('test.php');
webcam.set_swf_url('/themes/theproces/data/webcam.swf');
webcam.set_quality(90);
webcam.set_shutter_sound(true);
webcam.shutter_url = '/themes/theproces/data/shutter.mp3';
webcam.set_hook("onLoad", null);
webcam.set_hook("onComplete", null);
webcam.set_hook("onError", null);

Las posibles opciones son:

set_api_url: La URL a donde queremos enviar la imagen
set_swf_url: La URL donde hemos guardado la película flash de jpegcam
set_quality: La calidad para crear el JPEG
set_shutter_sound: Si queremos reproducir un sonido o no al sacar una foto
shutter_url: La URL del archivo MP3 usado para el sonido de arriba
set_hook: Aquí podemos definir funciones a las que llamará la librería según el evento. El evento 'onLoad' pasa después de haber cargado la librería. 'onComplete' después de haber subido la imagen a nuestro servidor. 'onError' en caso de algún error de trasmisión.

Para insertar el HTML de la película Flash en nuestra página podemos usar el siguiente código:


<div>
  <script>
    document.write(webcam.get_html(320, 240));
  </script>
</div>

El código de arriba simplemente inserta el HTML necesario en el sitio donde lo ejecutamos. Podemos pasar dos parámetros, el ancho y el alto del elemento. Las dimensiones mínimas son 214 por 137 píxeles. Normalmente deberíamos usar 320 por 240 o 640 por 480 píxeles, ya que cualquier webcam debería tener soporte para estas dimensiones.

Ahora podemos cargar la página y deberíamos ver un diálogo de Flash preguntándonos si permitimos el acceso a la webcam. Pinchamos en 'Ok' y veremos nuestra cara ;-)

Controlamos la webcam con 2 métodos de la librería, 'freeze' para hacer una grabación y 'reset' para descartar la grabación hecha con 'freeze'. Si nos gusta el resultado lo podemos enviar al servidor con el método 'upload'.


webcam.freeze(); // Grabamos la imagen actual
webcam.upload(); // La subimos al servidor
webcam.reset(); // Reseteamos la webcam

Hasta aquí muy fácil. El único problema con estas dos librerías es que no envían la imagen en el formato que por ejemplo generaría un formulario normal de HTML. Por lo tanto requieren un código diferente en el servidor. El siguiente ejemplo muestra cómo leerlo en PHP (sacado de la página de jpegcam).


$jpeg_data = file_get_contents('php://input');
$filename = "my_file.jpg";
$result = file_put_contents( $filename, $jpeg_data );

Primero leemos la imagen con 'file_get_contents'. Después la guardamos con el nombre 'my_file.jpg'

Tutorial de cómo añadir un Favicon a tu web.

Mon, 03 Oct 2011 00:00:00 +0200

Un Favicon es una pequeña imágen, un icono visible en los navegadores al costado de la URL o en las pestañas de los navegadores actuales.

Para crear un Favicon, e implementarlo en tu web, podemos seguir los siguientes pasos.

Se necesitarán:

Un editor de imágenes que guarde en formato .ico

La imagen debe medir 16 x 16 px.
16 colores (4 bits);
Formato ICO, no BMP, no GIF, no JPG.

Algunos navegadores permiten iconos más grandes, una gama cromática más amplia y otros formatos. LO cierto es que si queires con certeza que el favicon se vea en todos deberá seguir las características expuestas, 16x16 px, con 16 colores y en formato ICO.

Modificar el HTML con un editor de texto

Demos declarar en nuestras páginas para que los navegadores lo reconozcan, la existencia de ese Favicon. Hay que añadir el siguiente código teniéndo en cuenta la ruta donde hayas guardado previamente al imagen. El código se debe escribir entre las etiquetas <HEAD> y </HEAD> de tus ficheros HTML.

<link rel="shortcut icon" href="http://www.tudominio.com/favicon.ico">

o por ejemplo:

<link rel="shortcut icon" href="http://www.undominio.com/directorio/favicon.ico">

Subir las modificaciones mediante un programa de ftp o de transferencia de archivos.

Otra forma muy efectiva es accediendo a la siguiente web y siguiendo los pasos que te dicen. En principio te ahorras tener que editar tú el icono, ya que con subir una imagen la web te devuelve un archivo con el ico listo para la página.

http://www.html-kit.com/favicon/

Textareas redimensionables automáticamente con jQuery

Sat, 17 Sep 2011 00:00:00 +0200

En un artículo anterior se propuso un un plugin de Prototype para conseguir textareas redimensionables automáticamente al estilo Facebook.

En él se explica la técnica de usar un textarea oculto para calcular la altura del contenido y cambiar la del textarea donde estamos escribiendo.

En un proyecto reciente he dado ese comportamiento a los textarea para los comentarios de los usuarios pero utilizando el framework jQuery.

Para ello he creado un plugin que podéis descargar que utiliza la técnica del div no visible, es decir, cuando el contenido del textarea cambia, copiamos su contenido en un div no visible. Éste div adapta su altura automáticamente al contenido y entonces la usamos para establecer la altura del textarea.

Su sintaxis es la siguiente:

$(element).autogrow();

Y acepta una opción de configuración, la altura máxima que alcanzará el textarea. Por ejemplo:

$('textarea.autogrow').autogrow({maxHeight: 200});

Aquí podeis ver el resultado:

Tutorial de HTML5 - Semántica, parte 1

Sat, 03 Sep 2011 00:00:00 +0200

HTML5 introduce nuevos elementos "inline" muy útiles para aumentar nuestro existente arsenal de "span, strong, em, abbr, etc". A partir de ahora a estos elementos ya no se les llamará "inline", sino “text-level semantics.”

mark

Cuando revisamos un listado de una búsqueda en una web, usualmente vemos el término por el que hemos buscado iluminado o resaltado dentro de cada resultado. Por lo general se marca cada instancia del término de búsqueda con un elemento span, pero span desde un punto de vista semántico, se queda un poco cojo, ya que realmente sirve para poco más que aplicarle una clase específica a un elemento dentro de un estilo ya definido.

Se podría utilizar em o strong pero semánticamente no sería correcto ya que no querrías otorgarle una “importancia” al término de búsqueda, simplemente queremos que de alguna manera quede resaltado.

Introduzcamos el elemento mark:

<h1>Resultado de búsqueda para 'unicornio'</h1>
<ol>
<li>
<a href="http://www.3sellers.com/">Leyendo el Gran <mark>unicornio</mark> azul.</a>
</li>
</ol>

El elemento mark no lleva implícito ninguna importancia para el contenido salvo el mostrarlo como algo de interés en el contexto en que esté. Según la especificación, mark denota fragmento de texto de un documento marcado o iluminado con fines de referencia debido a su importancia en otro contexto.

meter

El elemento meter puede ser utilizado para marcar medidas, siempre que esas medidas sean parte de una escala con valores mínimos y máximos.

<meter>9 de 10 gatos</meter>

No es obligatorio escribir el valor máximo si no quiere, para eso se puede utilizar el atributo max.

<meter max="10">9 gatos</meter>

Existe un atributo min correspondiente. También se puede utilizar los atributos high, low, y optimum. Si lo desea, puede incluso ocultar la medición dentro del atribulo value.

<meter low="-273" high="100" min="12" max="30" optimum="21" value="25">Hace bastante calor en esta época del año.</meter>

progress

Mientras el elemento meter es muy bueno para describir algo que ya ha sido medido. El elemento progress te permite marcar un valor que está en proceso de cambio.

Su perfil está <progress>60%</progress> completado.

Otra vez se pueden utilizar los atributos min, max, y value:

El elemento progress es más útil cuando se utiliza combinado con DOM Scripting. Se puede utilizar JavaScript para actualizaciones dinámicas del valor, permitiendo al navegador comunicar el cambio al usuario. Muy útil para cargar archivos con Ajax.

Estructura

HTML5 presenta una estructura basada en la experiencia de los desarrolladores de HTML y CSS. Tras haber valorado un millón de páginas y haber tabulado los nombres más comunes que se le asigna a los elementos class, nombres como “header, footer y nav” prevalecieron.

section

El elemento section es usado para agrupar por temas contenido relacionado. Eso suena muy similar al elemento div, que suele utilizarse como contenedor de contenido genérico. La diferencia es que div no tiene sentido en la semántica; no te dice nada sobre el contenido que lleva dentro. El elemento section, por otra parte, se utiliza de forma explícita para agrupar contenido relacionado.

Usted podría sustituir a algunos de sus elementos div con elementos section, pero recuerde siempre preguntarse ¿Está todo el contenido relacionado?

<section>
<h1>Ave del paraíso</h1>
<p> Narrativa policíaca y de intriga/Novela negra.</p>
<p> CAROL JOICE</p>
</section>

header

Especialistas en HTML5 describen al elemento header como un contenedor de “a group of introductory or navigational aids", que viene siendo algo como: elementos que sirven como introducción o elemento para la navegación. Eso suena razonable. Ese es el tipo de contenido que yo esperaría encontrar en un encabezado, y en inglés la palabra "header" se utiliza a menudo como sinónimo de cabecera (masthead).

Existe una diferencia crucial entre el elemento header en HTML5 y el uso aceptado y generalizado de la palabra encabezado o cabecera. Por lo general en una página existe una sola cabecera pero un documento puede tener múltiples encabezados, o lo que sería lo mismo múltiple elementos “header”. Se puede utilizar un elemento header dentro de un elemento section por ejemplo. Las especificaciones describen los elementos section como “a thematic grouping of content, typically with a heading”, o sea, una agrupación temática de contenido, generalmente con un encabezado.

<section>
<header>
<h1>Ave del paraíso</h1>
</header>
<p>Narrativa policíaca y de intriga/Novela negra.</p>
<p>CAROL JOICE</p>
</section>

El elemento header aparecerá por lo general en la parte superior de un documento o section, no tiene que ser así obligatoriamente. Ha sido definido por su contenido —introductorio o elemento para la navegación— sea cual sea su posición.

footer

Como el elemento header, footer (pie) suena como su descripción y ubicación. En cambio, el elemento footer deberá contener información sobre sus elementos de contenido: quien lo escribió, información de copyright, enlaces a contenido relacionado, etc.

Mientras estamos acostumbrados a tener un pie para todo un documento, HTML5 nos permite también tienen pies dentro de las secciones.

<section>
<header>
<h1>Ave del paraíso</h1>
</header>
<p>Narrativa policíaca y de intriga/Novela negra.</p>
<footer>
<p>CAROL JOICE</p>
</footer>
</section>

Tutorial HTML5 – Browsers y doctype

Sat, 20 Aug 2011 00:00:00 +0200

EL !DOCTYPE (Document Type Declaration) es usado tradicionalmente para especificar a los navegadores el lenguaje y/o versión con el que está escrito un documento HTML.

El doctype para HTML 4.01 tiene la siguiente apariencia:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Este es el doctype para XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

No están escritos en lenguaje "humano" pero simplemente vienen a decir algo así: “este documento ha sido escrito en HTML 4.01” o “este documento ha sido escrito en XHTML 1.0.”

Se podría esperar que para HTML5 la declaración del doctype fuera “este documento ha sido escrito en HTML5” debería tener un número 5 en algún sitio, pues no, el doctype para HTML5 quedaría así:

<!DOCTYPE html>

Cuando lo vemos por primera vez nos puede resultar raro no encontrar un número de versión, y sobre todo, ¿cómo se especificarán futuras versiones de HTML? ¿Realmente piensan que esta será la definitiva?

Detengámonos a pensarlo por un momento, el doctype de HTML5 es muy pragmático. Debemos tener en cuenta que una de las premisas de HTML5 es que tiene que soportar el contenido existente, el doctype de HTML5 deberá poderse aplicar a documentos ya escritos en HTML 4.01 o XHTML 1. Las futuras versiones de HTML deberán también soportar el contenido en HTML5, por lo que ponerle un número no sería lo más conveniente.

La verdad es que el doctype no es lo más importante. Supongamos que tenemos un documento con un doctype para HTML 4.01. Si ese documento contiene elementos de otras especificaciones, como HTML 3.2 o HTML5, el navegador mostrará esa parte del documento. Los navegadores soportan funcionalidades no doctypes.

HTML5 – Simplificando

El doctype no es la única cosa que se ha simplificado en HTML5.

Si usted quiere especificar la codificación de caracteres del marcado de un documento, la mejor forma es asegurarnos que el servidor envía en correcto Content-Type del header. Si quiere estar doblemente seguro puede especificar los caracteres utilizando la etiqueta <meta>. Aquí podemos ver cómo se utiliza la etiqueta meta para un documento escrito en HTML 4.01:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Así sería en HTML5:

<meta charset="UTF-8">

La etiqueta <script> también sufrió algunas simplificaciones. Es común añadir un atributo type con el valor de “text/javascript” a los elementos script:

<script type="text/javascript" src="file.js"></script>

Los navegadores no necesitas ese atributo. Ellos asumen que es script está escrito en JavaScript, el lenguaje de programación más popular the most popular en la web.

<script src="file.js"></script>

De la misma manera no es necesario especificar el valor type de “text/css” cada vez que se enlaza a un fichero CSS:

<link rel="stylesheet" type="text/css" href="file.css">

Simplemente se escribe:

<link rel="stylesheet" href="file.css">

Estas son algunas de las características de HTML5, próximamente seguiremos presentándolo.

Personalizando las alertas javascript

Sat, 20 Aug 2011 00:00:00 +0200

En el siguiente artículo voy a sobreescribir la función javascript window.alert() para mostrar una ventana de dialogo mas atractiva visualmente. Para ello voy a utilizar la librería jQuery, los awesome buttons de Zurb.com y me voy a basar en el diseño de los dialogos de Facebook.

Nota: En el siguiente tutorial voy a utilizar un navegador web de verdad y voy a utilizar propiedades CSS3, por lo el diseño final no va a ser idéntico en Internet Explorer 6,7,8. En caso de querer compatibilidad con estas versiones del navegador bastaría con crear una hoja de estilos especifica, sin embargo en este tutorial no se va a contemplar esta opción.

HTML

El código HTML del diálogo se generará mediante javascript y se insertará al final de la etiqueta body.

El código HTML será el siguiente:

<div id="dialog">
  <div id="dialog-wrapper">

    <h1>Titulo</h1>

    <div id="dialog-content">
      <p>Content</p>
    </div>

    <div id="dialog-content">
      <!-- Botón CSS3 -->
      <a class="awesome small orange">Aceptar</a>
    </div>

  </div>
</div>

CSS

El elemento con id #dialog servirá para posicionar el dialogo en el centro de la ventana respecto al eje Y. Así pues tendrá posición absoluta y definirá la propiedad top con un valor inicial de 150px.

#dialog{
  position: absolute;
  top: 150px;
  width: 100%;
}

El elemento con id #dialog-wrapper servirá para centrar el dialogo a lo ancho, establecerá su ancho y mostrará el borde semitrasparente.

Es importante indicar que este elemento no puede tener un background-color ya que este color quedaría por debajo del borde transparente y entonces no se apreciaría el efecto.

#dialog-wrapper{
  border: 10px solid rgba(150, 150, 150, 0.7);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -mox-border-radius: 10px;
  margin: 0 auto;
  width: 500px;
}

Los siguientes elementos h1, #dialog-content y #dialog-footer no tienen mucho que resaltar.

#dialog h1{
  background-color: #f60;
  border: 1px solid #c30;
  border-bottom: 0;
  color: white;  
  padding: 5px 10px;
}

#dialog-content{
  background-color: white;
  border: 1px solid #666;
  border-width: 0 1px 1px;
  padding: 10px;
}

#dialog-content p{
  margin-bottom: 10px;
}

#dialog-footer{
  background: #ccc;
  border: 1px solid #666;
  border-top: 0;
  padding: 10px;
  text-align: right;  
}

jQuery

Llega el momento hacerlo funcionar todo. La mayor parte del trabajo va a ser la creación del HTML anterior.

La estructura será la siguiente:

(function($){
  // Uso: $(document).dialog("Texto");
  //      $(document).dialog({title: "Titulo", content: "Content"});
  $.fn.dialog = function(data){
    // Inicialización de los datos a mostrar

    // Determinar la posición del dialogo

    // Creación del dialogo
  }
});

Primero, debemos comprobar el tipo de objeto recibido como parámetro. Si éste es una cadena entonces lo usaremos como contenido del dialogo. Si por el contrario recibimos un objeto con las propiedades title y content utilizaremos esta información para mostrar el dialogo.

var title, content;
if(data && data.title){ title = data.title; }else{ title = "Javascript alert"; }
if(data && data.content){ content = data.content; }else{ content = data; }

Obtener la posición donde se mostrará el dialog es sencilla. lo vamos a situar siempre a 150 px de la parte superior de la ventana, para ello tenemos que tener el cuenta el scroll de la página:

var currentTop = $(document).scrollTop();

La creación del dialogo tendrá en cuenta este valor:

var $dialog = $('<div>', {id: 'dialog', css:{top: currentTop + 150}}).prependTo('body');

var $title = $('<h1>').text(title).appendTo($wrapper);
var $content = $('<div>', {id: 'dialog-content'}).html("<p>"+content+"</p>").appendTo($wrapper);
var $footer = $('<div>', {id: 'dialog-footer'}).append(
  $('<a>', {'class': 'awesome small orange'})
    .text("Aceptar")
    .click(function(){
      $dialog.fadeOut(function(){$dialog.remove()});
      return false;
    })
  ).appendTo($wrapper);

Solo destacar la función del evento click del botón aceptar. Esta función primero hace un fadeOut del dialogo y al terminar lo elimina del DOM.

A continuación lo insertamos en el DOM con un efecto fadeIn.

$dialog.hide().appendTo('body').fadeIn();

Y para terminar vamos a añadir funcinalidad extra para poder cerrar el dialogo utilizando la tecla escape o la tecla enter.

return $(this).keyup(function(evt){
  if (evt.which == 27 || evt.which == 13){
    $dialog.fadeOut(function(){$dialog.remove()});
  }
});

Código final

El código final es el siguiente:

(function($){
  $.fn.dialog = function(data){
    var title, content;
    if(data && data.title){ title = data.title; }else{ title = "Javascript alert"; }
    if(data && data.content){ content = data.content; }else{ content = data; }

    var currentTop = $(document).scrollTop();
    var $dialog = $('<div>', {id: 'dialog', css:{top: currentTop + 150}}).prependTo('body');

    var $wrapper = $('<div>', {id: 'dialog-wrapper'}).appendTo($dialog);
    var $title = $('<h1>').text(title).appendTo($wrapper);
    var $content = $('<div>', {id: 'dialog-content'}).html("<p>"+content+"</p>").appendTo($wrapper);
    var $footer = $('<div>', {id: 'dialog-footer'}).append(
        $('<a>', {'class': 'awesome small orange'})
          .text("Aceptar")
          .click(function(){
            $dialog.fadeOut(function(){$dialog.remove()});
            return false;
          })
      ).appendTo($wrapper);
    $dialog.hide().appendTo('body').fadeIn();

    return $(this).keyup(function(evt){
      if (evt.which == 27 || evt.which == 13){
        $dialog.fadeOut(function(){$dialog.remove()});
      }
    });
  }
})(jQuery);

Probando el dialogo y sobreescribiendo window.alert

Ahora podemos invocar este diálogo tal que así:

$(document).dialog("Texto");

La idea inicial es que este dialogo sustituya al predefinido en nuestro navegador. Esto es muy sencillo, basta con incluir lo siguiente:

window.alert = $(document).dialog;

Puedes probarlo en la página de demostración desde el inspector de webkit si estas en chrome o desde firebug si estas en firefox.

Demo