Embat Consultors: Desarrollo web y Soluciones con Software Libre » Post Técnico http://embatconsultors.com/blog Embat Consultors: Desarrollo web y Soluciones con Software Libre Thu, 02 Feb 2012 11:25:18 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Fast HTML5: 16, Video http://embatconsultors.com/blog/post-tecnico/fast-html5-16-video.html http://embatconsultors.com/blog/post-tecnico/fast-html5-16-video.html#comments Mon, 30 Jan 2012 14:00:06 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1674 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, datalist, en esta… hablaremos algo más sobre html5, y hoy toca: <video>.

Como sabéis, internet, además de crecer exponencialmente en contenido de vídeos, ha tenido un “representante” hasta la fecha… Sí, supongo que todos sabéis que Flash era (y en muchos casos aún sigue siendo) la mayor forma de reproducción de vídeos en internet.

Y digo “era”, porque html5 ha llegado para quitarle ese lugar a Flash.

Desde que html5 está presente en los navegadores modernos (y lo que le queda aún…) Flash ha perdido enteros en la lucha por reproductores de vídeo (y formatos de vídeo, evidentemente), ya que con html5 (si el navegador es moderno) no necesitas instalar nada más para poder visionar correctamente los vídeos, y con flash, debíais instalar su plugin de visionado.

Desde este blog, hace ya muchísimo tiempo (artículo posiblemente desfasado) se ha luchado en algunas ocasiones contra flash, ya que defendemos a ultranza todo lo libre y abierto, y flash, como sabéis… tiene poco de libre ;-) y ha sido gracias al tema del vídeo (y dispositivos móviles) que definitivamente ha recibido los golpes necesarios como para, como mínimo, knockeralo…

La descripción de video en la documentación:

A video element is used for playing videos or movies, and audio files with captions.

Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.

Bueno, vamos a ello.

Como dice, es un elemento html5 para reproducir vídeos, y audios con capturas, con una serie de parámetros que el usuario no verá, pero que son útiles para los navegadores, tanto para el visionado como metadatos para búsquedas, etc…

Ejemplo completo (pertenece a esta página, pegadle un ojo también ;-)), y comentamos:

<body>
...
    <video width="640" height="360" poster="poster.jpg" controls autoplay>
        <!-- MP4 must be first for iPad! -->
        <source src="video.mp4" type="video/mp4"  /><!-- Safari / iOS, IE9 -->
        <source src="video.webm" type="video/webm" /><!-- Chrome10+, Ffx4+, Opera10.6+ -->
        <source src="video.ogv" type="video/ogg"  /><!-- Firefox3.6+ / Opera 10.5+ -->
        <object width="640" height="360" type="application/x-shockwave-flash" data="player.swf">
            <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
            <param name="movie" value="video.swf" />
            <param name="flashvars"
                value="autostart=true&controlbar=over&image=poster.jpg&file=archivo.mp4" />
            <!-- fallback image -->
            <img src="poster.jpg" width="640" height="360" alt="alt" title="title" />
        </object>
    </video>
...
</body>

Parece complicado, ¿verdad?

Únicamente, lo que estamos haciendo es asegurándonos que en todos los navegadores actuales haya una solución de “lectura” (visionado, en este caso) que esté nativamente implantada en ellos, es decir, que no tengan que instalar nada para poder verlo correctamente… y en el caso de que el navegador sea antiguo o no pueda reproducirlo, se le da la opción del visionado con flash (si no lo tiene tampoco, entonces sí tendrá que instalarlo, como hasta ahora…).

Como veis, hay algunos detalles interesantes, como “autoplay” y “controls”, que son bastante evidentes, también hay otros interesantes, que no están puestos como “autobuffer”.

El atributo “poster”, muestra una imagen al empezar, hasta que no se le da al “play” (como veis también está dentro de <object>, como tag <img>).

En la página “Video For Everybody” Test Page, os informa muy bien sobre los diferentes navegadores y versiones, y sobre los formatos, os recomiendo que os paséis por ella, e investiguéis bien el código fuente y sus instrucciones, porque es verdaderamente útil.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-16-video.html/feed 0 Fast HTML5: 15, datalist http://embatconsultors.com/blog/post-tecnico/fast-html5-15-datalist.html http://embatconsultors.com/blog/post-tecnico/fast-html5-15-datalist.html#comments Wed, 21 Dec 2011 10:13:25 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1632 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, input, range, en esta… hablaremos algo más sobre formularios, y hoy toca: <datalist>.

Seguimos con las estradas relacionadas con elementos de formulario, que es donde más cambios hay dentro del html5, y donde más útiles son.

En este caso veremos como la solución html5 a algunos problemas actuales, es añadir un tag que como veréis, es bastante útil.

Como siempre, la descripción de datalist en la documentación:

The datalist element represents a set of option elements that represent predefined options for other controls. The contents of the element represents fallback content for legacy user agents, intermixed with option elements that represent the predefined options. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.

The datalist element is hooked up to an input element using the list attribute on the input element.

Bueno, ¿qué quiere decir?

Representa un conjunto de elementos que son las opciones predefinidas para otro control, el que estamos pulsando.
Supongo que todos conocéis los famosos “autocomplete”, que hasta ahora programábamos con Javascript, y AJAX (normalmente, si hay petición a la DB), pues bien, con este nuevo elemento podríamos prescindir, a priori, de tener que programar todo eso.

Vamos con un ejemplo muy sencillo:

<body>
...
    <form>
        <fieldset>
            <legend>Probando los datalist</legend>
            <label>Busca en la agenda:
                <input type="text" name="agenda" list="agenda" />
                <datalist id="agenda">
                    <option value="Luis Eduardo">
                    <option value="Joan">
                    <option value="Iván">
                    <option value="Juan Antonio">
                    <option value="Jorge">
                </datalist>
            </label>
        </fieldset>
    </form>
...
</body>

Podríamos decir, para simplificar mucho, que es como un <select>, pero en lugar de seleccionar en primera instancia la opción, puedes ir escribiéndola y te va presentando las posibles opciones.

Por tanto, volvemos a repetir un poco lo de anteriores entradas, con html5 simplificamos el uso de scripts, ya que, todos los que son más comunes ya vendrán nativamente en los navegadores con html5, y así evitamos el uso de tanto scripts.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-15-datalist.html/feed 1 Fast HTML5: 14, input, range http://embatconsultors.com/blog/post-tecnico/fast-html5-14-input-range.html http://embatconsultors.com/blog/post-tecnico/fast-html5-14-input-range.html#comments Tue, 13 Dec 2011 14:15:54 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1610 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, input, placeholder, email, url, date, autofocus, required, en esta… hablaremos algo más sobre el <input> con más novedades con el atributo type: “range“.

Ya comentamos en el anterior mini post lo que significaba el tag <input>, y hoy hablaremos de otro de sus nuevos valores para type: “range“.

Con “range” obtenemos algo similar a la barra de progress que hablamos el otro día pero esta vez, el valor lo escoge el usuario, es decir, con su interacción selecciona el rango que desea (y que se le permite).

Volvemos a presentar descripción de input en la documentación, para no olvidar que estamos hablando de este tag y de sus atributos:

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

Quedaos rápidamente con los atributos type (ya lo conocéis) min (lo conocéis de otras), max (también lo conocéis de otras), value (sin problemas) y step (este es nuevo, y lo que nos indica son los “saltos” que le son permitidos al usuario para avanzar o retroceder dentro del rango):

<body>
...
    <form action="" method="">
        <fieldset>
            <legend>Datos</legend>
            <input id="range" type="range" min="1" max="201" value="5" step="50">
            <input type="button" onclick="alert(document.getElementById('range').value);" value="Testear">
        </fieldset>
    </form>
...
</body>

Probad el resultado en Chrome, aquí lo tenéis:

 

TIP: Para saber en qué navegadores podéis probar y en cuáles no, tenéis la web Can I use.

Como podéis ver, el día que html5 sea realmente soportado por todos los navegadores el ahorro de javascript será realmente enorme… Y aún no hemos entrado en detalles en CSS3, donde sin duda también hay un gran camino recorrido para ahorrar interacciones y transiciones… Pronto más. Aunque ahora mismo ya se puede poner en práctica, simplemente tenéis que vigilar con qué navegadores no hay problemas, y con los que “si los haya”, utilizar soluciones como html5 boilerplate o modernizr, de las que hablaremos más detenidamente en futuros posts.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-14-input-range.html/feed 1 Fast HTML5: 13, input, placeholder, email, url, date, autofocus, required http://embatconsultors.com/blog/post-tecnico/fast-html5-13-input-placeholder-email-url-date-autofocus-required.html http://embatconsultors.com/blog/post-tecnico/fast-html5-13-input-placeholder-email-url-date-autofocus-required.html#comments Mon, 05 Dec 2011 14:45:29 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1590 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, mark y progress en html5, en esta… hablaremos sobre el <input> y las novedades en su atributo “type”.

<input> como ya sabéis de HTML, es una etiqueta mediante la cual pasamos datos a través de un formulario <form>.

Tranquilos porque seguiremos hablando de “type”… ya que da para varios posts, en lugar de eso, iremos completando diferentes formularios a lo largo de estos posts, y así damos un repaso a las posibilidades de los nuevos “type’s” que trae HTML5.

La descripción de input en la documentación:

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

Ejemplo rápido de <form> con variedad de <input> types:

<body>
...
    <form action="" method="">
        <fieldset>
            <legend>Datos</legend>
            <input type="text" placeholder="Tu nombre" name="nombre" required autofocus>
            <input type="email" placeholder="Correo electrónico" name="email" required>
            <input type="url" placeholder="Tu web" name="url">
            <input type="date" placeholder="Fecha" name="fecha">
            <input type="submit" value="Enviar">
        </fieldset>
    </form>
...
</body>

¿Novedades?

Seguro que ya las habéis notado, pero por si acaso las iremos enumerando:

  • El atributo “placeholder” es un texto que se pone sobre el input, una vez haces focus sobre él, se quita, y si no pones nada en el interior del input, al quitar el foco sobre el mismo, vuelve a aparecer ese texto…
  • El atributo “required”, hace que al submitar el formulario, no lo envíe si no está rellenado, y te avise mediante una alerta.
  • El atributo “autofocus”, hace que nada más cargar la página, el cursor se sitúe en ese input.
  • El atrituto “type = email”, obliga a que sea una dirección de email correcta.
  • El atrituto “type = url”, obliga a que sea una dirección web correcta.
  • El atrituto “type = date”, te despliega opciones de fecha.

En resumen: Lo que antes tenías que hacer con javascript, ahora ya lo hace HTML5.

Fantástico, ¿verdad?… Seguiremos con los formularios en los siguientes posts.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-13-input-placeholder-email-url-date-autofocus-required.html/feed 4 Fast HTML5: 11, figure y figcaption http://embatconsultors.com/blog/post-tecnico/fast-html5-11-figure-y-figcaption.html http://embatconsultors.com/blog/post-tecnico/fast-html5-11-figure-y-figcaption.html#comments Wed, 30 Nov 2011 14:40:30 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1571 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, hgroup en html5, en esta… elemento/s <figure> y <figcaption>

<figure> está principalmente pensado para utilizar junto a <figcaption> y en resumen, es para diagramas, ilustraciones, fotos (sería perfecto, por ejemplo, para pedazos de código en blogs de programación ;-)).

<figcaption> es opcional, y podemos ponerlo antes o después de la imagen en cuestión, es algo así como el “pie de foto”, en los ejemplos lo veréis claro.

La descripción de figure en la documentación:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Y la de figcaption:

The figcaption element represents a caption or legend for a figure.

Ejemplo rápido:

<body>
...
    <figure>
        <img src="img/stallman.jpg" alt="Richard Stallman">
    </figure>
...
</body>

Ahora, usando <figcation> dentro.

<body>
...
    <figure>
        <img src="img/stallman.jpg" alt="Richard Stallman">
        <figcation>
            Richard Stallman, Ilustre evangelizador y defensor del Software Libre, fotografía tomada por
            <a href="http://joanballestermoragues.com">Joan Ballester</a> en Palma de Mallorca.
        </figcation>
    </figure>
...
</body>

Pensad que también podríamos ponerlo antes de la imagen, o que podríamos utilizar más de una imagen, y poner varias con un mismo <figcation> dentro.

Cuando mencioné lo de pedazos de código, arriba, me refería a que también podríamos utilizar ambos tags (<figure> y <figcaption>), por ejemplo, con un <blockquote> en lugar de un <img>, a modo de explicación del código insertado en el <blockquote>, que sería perfecto para blogs como este… (tendremos que ponernos con ello ;P)

Interesante, ¿verdad?

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-11-figure-y-figcaption.html/feed 2 Fast HTML5: 10, hgroup http://embatconsultors.com/blog/post-tecnico/fast-html5-10-hgroup.html http://embatconsultors.com/blog/post-tecnico/fast-html5-10-hgroup.html#comments Fri, 25 Nov 2011 10:05:27 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1568 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, footer en html5, en esta… elemento/s <hgroup>

Este elemento no tiene excesivo secreto, si os fijáis en la documentación es simple y expeditiva, agrupar uno o más elementos de <h1> a <h6>, siempre que semánticamente valga la pena.

Es más, no hay demasiadas webs que lo utilicen por norma, pero nos parece interesante, hay que crecer en el uso de elementos semánticos, como en nuestro lenguaje cotidiano intentamos crecer día a día, y hablar más correctamente, con html tiene que suceder lo mismo, debemos “hablar” mejor ;-)

La descripción en la documentación:

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.

Ejemplo rápido:

<body>
...
    <hgroup>
        <h2>
            Sección HTML5
        </h2>
        <h3>
            Hoy hablaremos del tag <hgroup>
        </h3>
    </hgroup>
    ... Aquí podría venir un section, por ejemplo, sobre <hgroup>
</body>

Como ocurre con tantísimos elementos html5, podemos usar el hgroup siempre que la semántica y la coherencia nos dicte que pueden agrupar elementos de título correctamente.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-10-hgroup.html/feed 1 Fast HTML5: 9, footer http://embatconsultors.com/blog/post-tecnico/fast-html5-9-footer.html http://embatconsultors.com/blog/post-tecnico/fast-html5-9-footer.html#comments Thu, 24 Nov 2011 10:10:40 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1561 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, aside en html5, en esta… elemento/s <footer>

De la misma forma que ha sucedido con otros elementos, puede parecer que <footer> solo puede haber uno, pero no… Podemos utilizar este elemento en más lugares, por tanto puede haber más de uno.

Como dice la documentación, este elemento es el cierre del elemento padre, el elemento padre puede ser body, en el caso del footer “general”, pero puede aparecer en otros elementos de la página.

Es decir, puede parecer que el footer se utilizará en lugar de lo que hacíamos antes: <div id=”footer”>, y realmente sí es así… pero vamos un poco más allá, ya que en este caso el elemento <footer> no será único (o no tiene porque serlo, es opcional que lo pongas en más sitios), si no que podrás poner otros elementos <footer> como cierre dentro de otros elementos.

La descripción en la documentación:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Ejemplo rápido:

<body>
...
    <footer>
        footer principal
    </footer>
</body>

Como comentamos arriba, también podríamos poner footer por ejemplo, al elemento <article>:

<body>
...
    <header>
        header principal
    </header>
    <article>
        <header>
            header dentro de article
        </header>
        ...
        <footer>
            footer dentro de article
        </footer>
    </article>
    <footer>
        footer principal
    </footer>
</body>

Y claro está, sucede exactametne igual con el elemento <header> Sencillo, nos vemos en el siguiente :-)

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-9-footer.html/feed 1 Segundos pasos con VIM http://embatconsultors.com/blog/post-tecnico/segundos-pasos-con-vim.html http://embatconsultors.com/blog/post-tecnico/segundos-pasos-con-vim.html#comments Tue, 22 Nov 2011 10:10:20 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1324

Siguiente entrada después de “Primeros pasos con VIM“, qué mejor forma que “Segundos pasos con VIM”, ¿no? ;-)

En la anterior entrada vimos qué es VIM exactamente, y unos pocos comandos para empezar a movernos con él, en esta vamos a ir un poco más allá, con algunos comandos más avanzados.

Cuidado porque como ya hablamos, en VIM tenemos modo inserción y modo normal, y las teclas hacen cosas diferentes en función del modo en que nos encontremos en ese momento.

Aquí van unos comandos:

  • o: insertamos una nueva línea justo después
  • 0: insertamos una nueva línea justo antes
  • a: insertamos justo después del cursor
  • yy: copiamos la línea
  • P: pegamos justo antes de la línea (cuidado, que es mayúscula)
  • p: pegamos justo después de la línea (cuidado, que es minúscula ;-))
  • cw: Cuidado… eliminamos lo que queda de línea tras el cursor (esto trae muchos disgustos ;D)

Ojo, cuando se pilla el truco a esto… realmente vuelas :-)

  • 0: Vamos a la primera columna
  • $: Vamos al final de la línea
  • /patrón : Buscamos “patrón” :D (y aquí entran en juego las expresiones regulares… ya lo hablaremos)
  • u: es como un control+Z

A practicar… y cuidado, porque al principio mandas al carajo muchas líneas de código, os lo aseguro O:-)
Aunque luego le vas pillando el truquillo a editar rápidamente, copiar, pegar, reemplazar, buscar, colocar el cursor, etc, y la verdad es que llegas a moverte realmente rápido.

Un saludo, intentaremos hacer un par de entradas más con algo aún más avanzado, pero por el momento, a practicar lo aprendido :P

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/segundos-pasos-con-vim.html/feed 0 Fast HTML5: 8, aside http://embatconsultors.com/blog/post-tecnico/fast-html5-8-aside.html http://embatconsultors.com/blog/post-tecnico/fast-html5-8-aside.html#comments Mon, 21 Nov 2011 10:10:39 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1524 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, nav en html5, en esta… elemento/s <aside>

La etiqueta <aside> representa una sección de la página que tiene contenido relacionado con el lo que se suele colocar al lado de la web, y que se podría separar de este modo (creando esta etiqueta).

En cristiano… ¿Cuántos de vosotros hacíais un elemento <div id=”sidebar”></div>? Pues se acabó, ahora pondréis  <aside></aside>

Eso es todo… como hemos dicho decenas de veces, la evolución es semántica.

La descripción en la documentación:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Para el ejemplo, podríamos recuperar el código anterior, y poner un aside:

<body>
...
    <aside id="sidebar" class="sidebar">
        <a href="http://embatconsultors.com">Embat Consultors</a> |
        <a href="http://twitter.com/embatconsultors">Twitter Embat Consultors</a>
        ...
    </aside>
...
</body>

Recordad, que dentro del aside, podríamos colocar por ejemplo <nav> u otros tags…

Y debido a una pregunta que he visto en los comentarios, evidentemente a los elementos “nuevos” de html5, podemos darles class o id, hay que tratarlos exactamente como el resto de divs que siempre utilizamos.

Y la forma de llamarlos en las CSS (hojas de estilos), que veremos más adelante, es igual que para llamar al resto de elementos, imaginemos que tenemos <aside class=”aside” id=”aside”> entonces podríamos llamarlo de estas 3 formas:

aside{color:grey;}
aside#sidebar{color:grey;}
aside.sidebar{color:grey;}

O de estas 2 formas más:

#sidebar{color:grey;}
.sidebar{color:grey;}

Pero ya llegaremos al tema CSS ;-)

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-8-aside.html/feed 5 Fast HTML5: 7, nav http://embatconsultors.com/blog/post-tecnico/fast-html5-7-nav.html http://embatconsultors.com/blog/post-tecnico/fast-html5-7-nav.html#comments Fri, 18 Nov 2011 10:10:08 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1508 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, article en html5, en esta… elemento/s <nav>

La etiqueta <nav> está concebida para los menús de navegación. Es su cometido.

Es una sección de la página en la que hay links agrupados, para navegar en la misma página, o hacia otras.

La descripción en la documentación:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

Supongo que os dais cuenta que aunque parezca que html5 es muy estricto, realmente hay bastante libertad, ya hemos visto que la mayoría de elementos se pueden repetir, y algunos anidar, en el caso de <nav> también pasa, podéis ubicarlo dentro de <header> o después, o antes… o puede haber más de un <nav>, por tanto, libertad hay mucha…

De este modo saldrían en línea (así: link | link):

<body>
...
    <nav>
        <a href="http://embatconsultors.com">Embat Consultors</a> |
        <a href="http://twitter.com/embatconsultors">Twitter Embat Consultors</a>
        ...
    </nav>
...
</body>

O en forma de listas:

<body>
...
    <nav>
        <ul>
            <li<>a href="http://embatconsultors.com">Embat Consultors</a></li>
            <li<>a href="http://twitter.com/embatconsultors">Twitter Embat Consultors</a></li>
            ...
        </ul>
    </nav>
...
</body>

Y recordad, que como dice la documentación, podemos usar más de un elemento <nav> siempre que la semántica lo diga (agrupación de links, en forma de menús, por ejemplo), de ese modo muchas webs que construimos tienen elementos de navegación principales, y habitualmente, secundarios, incluso más, porque no…

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-7-nav.html/feed 1