Moderador del foro: ZorG  
Fundamentos de HTML
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 31 | 11:59 AM
Como usar el tag video en HTML5


HTML5 incluye la capacidad de mostrar video en tu web, sin necesidad de usar Flash, Quicktime o cualquier otro plugin. Funciona en Firefox, Chrome, Safari, Opera y en Internet Explorer desde la versión 9.

Todo es gracias al elemento <Video> en HTML5. En este tip te mostraré cómo usarlo.

HTML5, elemento <video>
Lo mas básico del elemento video seria poner el src con la dirección al archivo .ogv (Codificado en .ogg, con codec On2 VP8) o .mp4 (Con codec H264). Pero con sólo poner el código HTML no se mostrara nada, ya que el video no tiene sus controles y como predeterminado no reproducirse automáticamente, para ello agregaremos los controles simplemente agregando controls.

Tomaremos como base de prueba, este video de Opera en OGG: http://devfiles.myopera.com/articles/2642/sintel-trailer.ogv

Básico:

Quote
<video src="tu_video.ogv">Tu navegador no soporta HTML5 </video>

Con controles:

Quote
<video controls src="http://devfiles.myopera.com/articles/2642/sintel-trailer.ogv">Tu navegador no soporta HTML5 </video>

Si abrimos nuestro video ya nos aparecerán los controles y tendremos la posibilidad de reproducir nuestro video, ahora vamos a agregarle una imagen previa antes de reproducir el video, para ello agregamos poster="tu_poster.png" con nuestro poster.

Quote
<video controls src="tu_video.ogv" poster="tu_poster.png" >Tu navegador no soporta HTML5 </video>

Lo siguiente seria agregar el tipo de video que estamos agregando con type="video/mp4".

Atento al tipo de elemento que estas usando.

Quote
<video controls src="tu_video.ogv" poster="tu_poster.png" type="video/ogg">Tu navegador no soporta HTML5 </video>

Reproducir video en múltiples codecs (H264 / On2 VP8 : mp4 / ogg) en HTML5 con <source>
Listo ya tenemos nuestro video en HTML5 casi completo, ¿Pero por que casi completo? Porque no todos los navegadores soportaran el video en formato .ovg para ello agregaremos una variación que seria un <source> para que si nuestro formato .ogv no es aceptado se use otro formato.

Quote
<video autoplay controls>
<source src="tu_video.ogv" type="video/ogg" />
<source src="tu_video.mp4" type="video/mp4" />
<p>Tu navegador no soporta HTML5</p>
</video>

Y para los navegadores que no soportan html5 como IE agregaremos el video en flash con .flv.

Quote
<video autoplay controls>
<source src="tu_video.ogv" type="video/ogg" />
<source src="tu_video.mp4" type="video/mp4" />
<object width="160" height="90" data="video.flv">
<param name="movie" value="tu_video.flv">
<embed src="tu_video.flv" width="160" height="90">
</object>
<p>Tu navegador no soporta HTML5 ni Flash ¿En que era estas?</p>
</video>

Si queremos añadirle un tamaño en especifico solamente agregamos height="x" y width="x".

Para que nuestro reproductor se reproduzca en el momento que termine de cargarse podemos agregar autoplay.

Listo ahora ya sabemos como empezar a utilizar el Elemento Video en HTML5. Aquí podrás ver el Ejemplo Terminado.

Estos son los tipos de formatos para los videos.
video/mp4 para MP4 video
video/ogg para Ogg Theora video
video/webm para WebM video

Nota: El .ovg es para Firefox y .mp4 es para Safari.

Saludos a todos espero que esto les sirva de algo.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 32 | 3:00 PM
HTML5 Geolocalización

HTML5 trae consigo muchas novedades y una de ellas es la integración con una nueva API de geolocalización. Dicha API no forma parte de forma estricta de HTML5, sino que está siendo normalizado por el Geolocation Working Group, que es independiente del HTML5 Working Group. El soporte para la API de geolocalización está disponible, de momento, para los navegadores más actuales como Firefox 3.5+ o Chrome 5+.

Un modo sencillo de acceso al API de geolocalización sería:

Quote
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
navigator.geolocation.getCurrentPosition(coordenadas);
}
function coordenadas(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html>

Ver ejemplo en funcionamiento » »

Con el anterior ejemplo, si el navegador soporta el acceso a la API, el usuario da su consentimiento y... no hay ningún problema se obtiene la geolocalización del usuario al hacer click sobre el enlace "Mostrar Posición".

Puesto que el éxito de la geolocalización depende de varios factores, lo mejor es gestionar los posibles errores que se puedan producir. Podemos añadir un segundo argumento a la función obtener_localizacion: una función para gestionar los errores. Los errores que se pueden obtener son:

  • Permiso denegado (1), cuando el usuario no comparte la posición y por tanto deniega el acceso a su localización.
  • Posición no disponible (2), si se ha perdido la conexión o no se puede contactar con los satélites que realizan el posicionamiento.
  • Timeout (3), si se ha tardado demasiado en calcular la posición del usuario.
  • Error desconocido (0), si ha fallado cualquier otra cosa.

    Quote
    <!DOCTYPE HTML>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <script language="javascript">
    function obtener_localizacion() {
    navigator.geolocation.getCurrentPosition(coordenadas,gestiona_errores);
    }
    function coordenadas(position) {
    var latitud = position.coords.latitude;
    var longitud = position.coords.longitude;
    alert('Tus coordenadas son: ('+latitud+','+longitud+')');
    }
    function gestiona_errores(err) {
    if (err.code == 0) {
    alert("error desconocido");
    }
    if (err.code == 1) {
    alert("El usuario no ha compartido su posicion");
    }
    if (err.code == 2) {
    alert("no se puede obtener la posicion actual");
    }
    if (err.code == 3) {
    alert("timeout recibiendo la posicion");
    }
    }

    </script>
    <a href="javascript:obtener_localizacion();">Mostrar Posición</a>
    </body>
    </html>

    Ver ejemplo en funcionamiento » »

    Con el ejemplo anterior controlamos los errores durante el proceso de geolocalización pero no controlamos si el navegador soporta o no este servicio. Para hacer este último control podemos comprobar si existe el objeto navigator.geolocation.

    Quote
    <!DOCTYPE HTML>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <script language="javascript">
    function obtener_localizacion() {
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(coordenadas,gestiona_errores);
    }else{
    alert('Tu navegador no soporta la API de geolocalizacion');
    }
    }
    function coordenadas(position) {
    var latitud = position.coords.latitude;
    var longitud = position.coords.longitude;
    alert('Tus coordenadas son: ('+latitud+','+longitud+')');
    }
    function gestiona_errores(err) {
    if (err.code == 0) {
    alert("error desconocido");
    }
    if (err.code == 1) {
    alert("El usuario no ha compartido su posicion");
    }
    if (err.code == 2) {
    alert("no se puede obtener la posicion actual");
    }
    if (err.code == 3) {
    alert("timeout recibiendo la posicion");
    }
    }

    </script>
    <a href="javascript:obtener_localizacion();">Mostrar Posición</a>
    </body>
    </html>

    Ver ejemplo en funcionamiento » »

    Una vez hemos obtenido las coordenadas mediante la API es bastante sencillo integrar Google Maps para mostrar un mapa con la posición del visitante. El siguiente ejemplo utiliza jQuery para crear un mapa una vez obtenida la posición mediante la API de geolocalización.

    Quote
    <!DOCTYPE HTML>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <script language="javascript">
    function obtener_localizacion() {
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(coordenadas,gestiona_errores);
    }else{
    alert('Tu navegador no soporta la API de geolocalizacion');
    }
    }
    function coordenadas(position) {
    var latitud = position.coords.latitude;
    var longitud = position.coords.longitude;
    alert('Tus coordenadas son: ('+latitud+','+longitud+')');
    }
    function gestiona_errores(err) {
    if (err.code == 0) {
    alert("error desconocido");
    }
    if (err.code == 1) {
    alert("El usuario no ha compartido su posicion");
    }
    if (err.code == 2) {
    alert("no se puede obtener la posicion actual");
    }
    if (err.code == 3) {
    alert("timeout recibiendo la posicion");
    }
    }

    </script>
    <a href="javascript:obtener_localizacion();">Mostrar Posición</a>
    </body>
    </html>

    Ver ejemplo en funcionamiento » »


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 33 | 3:58 PM
    Atributos globales que se podrán utilizar con HTML 5

    Con la llegada de la versión 5 de HTML, también nos encontramos con nuevas etiquetas que nos proporcionará nuevas funcionalidades. Para estas etiquetas y para algunas que ya existían, aparecen nuevos atributos que se pueden utilizar en la mayoría de las etiquetas. Vamos a repasar algunos atributos que se pueden utilizar en la mayoría de las etiquetas.

    Accesskey
    Este atributo permite poder acceder alguna zona de la página de una forma más directa, con la pulsación de alguna tecla que le indiquemos. Algún ejemplo podría ser:

    Quote
    <a accesskey="A" href="http://example.com/">Ejemplo</a>

    En este caso, para poder acceder hasta ahí con el teclado, se debería de pulsar “Ctrl + Alt + A, pero cada navegador podría tener su combinación de teclas.

    Class
    Este atributo es uno de los más conocidos ya que se utiliza para asignar bloques de estilos por medio de las hojas de estilo..

    Quote
    <a class="enlace" href="http://example.com/">Ejemplo</a>

    Contenteditable
    Este es uno de los atributos nuevos que nos aparecen y que nos permitirá que un acceso externo permita o no editar o cambiar el contenido de una etiqueta. Es un elemento que se hereda de los padres, por lo que si un elemento padre no se puede editar, los hijos tampoco. Es un elemento booleano.

    Quote
    <div contenteditable="false">Este contenido no debería ser editable desde el exterior...</div>

    Contextmenu
    Este nuevo atributo viene a ser como si le pusiéramos un id, pero para el caso especial de este tag.

    Dir
    Este atributo indica la dirección del texto para los idiomas en los que se escribe de derecha a izquierda y no de izquierda a derecha. Solo tiene dos posibles valores: ltr (left to right) o rtl (right to left).

    Quote
    <div dir="ltr">Este contenido está escrito de izquierda a derecha...</div>

    Draggable
    Es un atributo que permitirá indicar los bloques que se podrán mover dentro de una web. También se podrá incorporar o eliminar elementos de una página simplemente arrastrándolos. Los valores que podrán tener por defecto son true, false o auto, que es el que trae por defecto.

    Hidden
    Este atributo permitirá ocultar bloques dentro de la web. Hasta ahora para hacer esto había que utilizar propiedades CSS para ocultarlo, pero ahora con esto no será necesario. Todavía no hay ningún navegador que implemente esta propiedad.

    Quote
    <div hidden>Este contenido está oculto por no ser relevante para el usuario...</div>

    itemid, itemprop, itemref, itemscope y itemtype
    El itemscope permite crear un nuevo conjunto de elementos los cuales han de ser de un tipo, que se informa con el itemtype. Este tipo ha de venir dado con una dirección URL (que indica el microdato nuevo)

    El itemid es el que identifica al elemento, el itemref hace referencia a otros elementos que han de poder ser utilizados y, para acabar, itemprop viene a ser el que da los valores.

    Quote
    <figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses">
    <img itemprop="work" src="images/house.jpeg" alt="A white house, boarded up, sits in a forest.">
    <figcaption itemprop="title">The house I found.</figcaption>
    </figure>
    <p id="licenses">All images licensed under the <a itemprop="license" href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.</p>

    Spellcheck
    Otra de las nuevas novedades. Mediante este atributo se podrá indicar qué contenidos o no queremos que sufran una corrección ortográfica o gramatical. Tiene tres posibles valores: true, false o default.

    Tabindex
    Con este atributo conseguiremos que cada vez que pulsemos en la tecla “tab” vaya a un sitio u otro de la página. Hay que tener en cuenta que no todos los elementos permiten tener este atributo, sólo aquellos en los que el usuario puede focalizarse.

    Data-*
    Gracias a este tipo de atributos podremos crear nuestros propios microformatos de una forma más o menos estándar. Básicamente la idea es la de poder añadir información “oculta” que no moleste a los lectores pero que los navegadores y los robots sean capaces de interpretar si se les añade la forma de hacerlo.

    Quote
    <div class="spaceship" data-ship-id="92432" data-weapons="laser 2" data-shields="50%" data-x="30" data-y="10" data-z="90">
    <button class="fire" onclick="spaceships[this.parentNode.dataset.shipId].fire()">Fire</button>
    </div>


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 34 | 4:53 PM
    Almacenamiento local utilizando HTML 5

    HTML5 proporciona una forma de almacenar información en el navegador, similar a como lo hacen las Cookies, pero que permiten almacenar información más grande, ya que las cookies tienen un tamaño limitado.

    El utilizar el almacenamiento respecto a utilizar las cookies tiene ventajas, sobre todo de tráfico, ya que cuando se almacena algo en las Cookies, al entrar en la web, estas son enviadas al servidor, consumiendo ancho de banda y tiempo.

    HTML 5 permite el almacenamiento de 3 formas distintas.

    * Local: los datos son almacenados en la máquina del usuario como pares de clave/valor.
    * Sesión: Se almacenan información como pares de clave/valor, pero solo durante lo que dure la sesión.
    * Base de datos: Ofrece una API completa para almacenar información en base de datos.

    Nosotros vamos a centrar en los dos primeros tipos de almacenamiento.

    El almacenamiento local y de sesión, implementan la misma interfaz Storage, por lo que su funcionamiento será muy similar.

    Los navegadores compatibles con HTML 5 dispondrán de los objetos localStorage y sessionStorage, para el almacenamiento local y sesión respectivamente. Esta interfaz ofrece los siguientes métodos.

    Método Length
    Este método nos devolverá el número de pares clave/valor almacenados.

    Quote
    localStorage.length // 0

    Método SetItem(key, value)
    Este método se encarga de añadir un nuevo elemento en nuestro almacén.

    Quote
    localStorage.setItem('altura', '100');
    localStorage.setItem('anchura', '500');

    Método Key(n)
    Devuelve el par clave/valor de la posición indicada.

    Quote
    //devuelve altura del ejemplo anterior
    localStorage.key(0);

    Método getItem(key)
    Obtiene el valor de una clave dada

    Quote
    // devuelve el valor de altura del ejemplo anterior
    localStorage.getItem('altura');

    Método removeItem(key)
    El método lo que hará será borrar el elemento que le indiquemos

    Quote
    localStorage.removeItem('altura');

    Método clear()
    Con este método se borrarán todos los elementos almacenados.

    Quote
    localStorage.clear();

    Cuando almacenamos pares claves/valor, lo que hace la interfaz es almacenar la información como si fueran cadenas, por lo que podemos utilizar la notación JSON para poder almacenar objetos o cualquier otra cosa que nos interese.

    Quote
    var list = [1,2,3,4];
    localStorage.setItem('lista', list);
    localStorage.getItem('lista');
    // "1,2,3,4"
    var json_list = JSON.stringify(list);
    // "[1,2,3,4]"
    localStorage.setItem('lista', json_list);
    // "[1,2,3,4]"
    JSON.parse(localStorage.getItem('lista'));
    // [1, 2, 3, 4]

    Este tipo de almacenamiento nos puede ser muy útil si necesitamos almacenar alguna preferencia del usuario, o bien productos de una tienda, para almacenarlos en sessionStorage.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 35 | 3:30 PM
    Validación de formularios en HTML 5

    Con la llegada de HTML 5, los desarrolladores tendrán más facilidad a la hora de realizar tareas cotidianas como era la validación de formularios. HTML 5 incluye nuevas etiquetas que nos ayudarán a este propósito.

    Vamos a ver un listado de atributos que podremos utilizar para validar los datos que hemos metido en nuestros campos.

    Required
    Con este atributo, le estamos indicando al formulario, que no se envíe mientras que el campo que tenga este atributo no esté relleno. Esto antes lo hacíamos con JavaScript, pero de esta forma se simplifican mucho las cosas.

    Quote
    <input name="nombre" required >

    Pattern
    Por medio de este atributo, le estamos indicando al campo el tipo de datos que puede contener dentro para que sea válido, por medio de una expresión regular.

    Quote
    <input type="telefono" pattern="(+[0-9]{2}) [0-9]{3} [0-9]{6}" >

    Maxlength
    Este atributo nos permite indicar la longitud máxima de los datos que puede tener el campo, dando error si el contenido del campo supera esa longitud.

    Quote
    <textarea name="tweet" maxlength="150"></textarea>

    Min, Max, Step
    Los actuales sliders pasarán a mejor vida cuando nuestros elementos se puedan definir desde nuestros elementos indicando los valores mínimos, máximos y los pasos entre ellos directamente.

    Quote
    <input name="slider" min="1" max="10" step="2" >

    JavaScript
    JavaScript también incorporarán nuevos métodos para facilitar la actuación de validación de los datos. Aún no es nada seguro, pero apunta a una herramienta muy útil.

    Ahora tendremos el objeto “element.validity”, que nos da información referente a la validación del elemento.

    * boolean valueMissing; — Devuelve true si el elemento está vacío y requerido.
    * boolean typeMismatch; — Devuelve true si el elemento no contiene la sintaxis correcta.
    * boolean patternMismatch; — Devuelve true si el elemento no cumple el patrón definido.
    * boolean tooLong; — Devuelve true si el elemento es más grande que el tamaño definido.
    * boolean rangeUnderflow; — Devuelve true si el elemento es menor al mínimo definido.
    * boolean rangeOverflow; — Devuelve true si el elemento es mayor al máximo definido.
    * boolean stepMismatch; — Devuelve true si el elemento no concuerda con uno de los pasos definidos.
    * boolean customError; — Devuelve true si el elemento tiene un error personalizado.
    * boolean valid; — Devuelve true si el elemento es válido.

    También tendremos el método “element.setCustomValidity()”, que es un método definido para especificar un mensaje de error personalizado a un elemento.

    Quote
    <label>Feeling: <input name=f type="text" oninput="check(this)"></label>
    <script>
    function check(input) {
    if (input.value == "good" ||
    input.value == "fine" ||
    input.value == "tired") {
    input.setCustomValidity('"' + input.value + '" is not a feeling.');
    } else {
    // input is fine -- reset the error message
    input.setCustomValidity('');
    }
    }
    </script>

    CSS también nos traerá nuevas pseudoselectores que nos ayudará a dar los estilos a los campos inválidos. Para ello podemos utilizar “:invalid”, y dentro poner los estilos que más nos interesen.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 36 | 12:56 PM
    contentEditable: Contenido editable en HTML5

    Explicamos el uso y funcionamiento de uno de los nuevos atributos que acompañan a HTML5: contentEditable. Los navegadores más modernos soportan esta especie de “rich text box” de forma que el usuario pueda editar contenido HTML “in situ”.

  • Ver demo
  • Descargar

    ¿Qué es contentEditable?
    Para ser exactos existen dos elementos similares envueltos: designMode y contentEditable, similares pero con distintos objetivos.

    El atributo designMode está enfocado en la edición de todo el documento, por tanto podríamos decir que es un editor HTML al uso con el que editar todo un documento.

    Por otra parte contentEditable sólo permite editar los elementos que tengan este atributo asignado dentro de un documento, además de los elementos “hijo” contenidos dentro del “padre”.

    Los atributos designMode y contentEditable se emplean para activar el modo edición en documentos enteros o elementos concretos respectivamente.

    Si bien actualmente existen multitud de editores “WYSIWYG” (What You See Is What You Get / lo que ves es lo que obtienes), es de esperar que con el avance y estandarización de HTML5, estos vayan quedando en un segundo plano en pro de la integración nativa con los navegadores y su modo de edición.

    Aprendiendo a utilizar contentEditable en HTML5
    Como hemos mencionado en la introducción, estamos tratando con un atributo asignable a distintas etiquetas HTML, por lo que el uso es realmente trivial como podemos ver en el siguiente ejemplo:

    Quote
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>contentEditable: Contenido editable en HTML5</title>
    <link rel="stylesheet" href="main.css" />
    </head>
    <body>
    <article>
    <header>
    <h1>Contenido Editable con HTML5</h1>
    </header>

    <section>
    <p>
    Mediante el atributo "contentEditable" podremos convertir nuestros elementos en contenido editable, al más puro estilo richtextbox.
    Haz <strong>click para editar</strong>.
    </p>
    </section>

    <section>
    <h2>Tareas a realizar la próxima semana:</h2>
    <ol contentEditable="true">
    <li>Redactar nuevos tutoriales para <a href="http://web.ontuts.com">Ontuts</a>.</li>
    <li>Dominar el mundo con <a href="http://erasmusu.com">Erasmusu.com</a>.</li>
    <li>Sacar a pasear a Coki.</li>
    <li>Introduce <em>siguiente tarea</em> aquí...</li>
    </ol>
    </section>

    </article>
    </body>
    </html>

    Basta con asignar el atributo editableContent=”true” a la lista ordenada para poder editar los elementos actuales e incluso introducir más elementos a la misma.

    El código CSS
    Como curiosidad he querido resaltar algún que otro selector que a más de uno puede resultarle confuso o nuevo:

    Quote
    [contenteditable]{
    border: 1px dotted transparent;
    }
    [contenteditable]:hover{
    background: #fff7c3;
    border: 1px dotted #f0df6c;
    }
    section > *{
    margin: 1em;
    }

    Empleamos [contenteditable] y [contenteditable]:hover para asignarle estilo a los elementos que tengan activo el modo edición, tanto para su estado normal como para cuando el usuario pasa el cursor por encima de los mismos. No es espetacular pero ayuda a orientar al usuario:

    [

    Para los más inexpertos en HTML5 simplemente comentarles que las etiquetas <header> y <section> son nuevas y simplemente se emplean para separar dentro de un artículo <article> con cabecera y secciones del mismo.

    ¿Qué navegadores lo soportan?
    Como ocurre con la mayoría de novedades de HTML 5, los navegadores más recientes las soportan “sin problemas”:

    • Firefox 3.
    • Google Chrome.
    • Internet Explorer (desde la 5.5).
    • Opera 9.
    • Safari 3.

    Y como más de uno habrá podido deducir con las comillas anteriores “sin problemas”… el demonio está en los detalles, por lo que os aconsejo esta demo online con la que probar los distintos navegadores.

    Como curiosidad acerca de sus orígenes…
    Sorprendentemente estos dos atributos (designMode y contentEditable) fueron originalmente diseñados e implementados por Microsoft con la versión Internet Explorer 5.5, aunque estaban explicados con una buena documentación en la realidad carecían de una buena funcionalidad, eran bastante engorrosos.

    Conclusión final
    Nada más conocer esta nueva característica me he parado a pensar en las horas que hemos perdido muchos desarrolladores en tratar de generar una “rich text box” en condiciones y todas las trabas e incompatibilidades que nos hemos encontrado a lo largo del proceso… ojalá que por fin estos atributos nos ayuden y faciliten un poco la vida, tanto a nosotros como al propio usuario final.

    Me viene a la cabeza Erasmusu… en su día implementáramos nuestro propio rich text box con emoticonеs, negrita, cursiva, etc, para los comentarios y foros y la verdad es que fue un dolor de cabeza continuo. Al final optamos por el texto plano enriquecido de toda la vida.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 37 | 2:48 PM
    Como se deben utilizar los lenguajes HTML y XHTML

    A pesar de que todos conocen cuáles son las mejores formas de utilizar los lenguajes HTML y XHTML, todavía puede verse algunos códigos que emplean técnicas desfasadas. Un código limpio y bien escrito, no solo resulta útil para que los buscadores no encuentren dificultades para indexar los contenidos de la página, sino que también son una carta de presentación y una satisfacción personal.

    Declaración del tipo de documento (codtype)
    Este primer consejo parece una obviedad, pero es frecuente encontrarse con que no siempre se utiliza el doctype adecuado. El navegador comienza a leer el código desde la primera línea, en la que se encontrará con la declaración del tipo de documento que se trata, por lo que leerá las etiquetas con que se encuentre en base a ello.

    Determinar el juego de caracteres
    El contenido de una página web es una sucesión de caracteres. Todos los idiomas tienen caracteres que son especiales y los navegadores deben poder identificarlos para presentarlos en forma correcta. Muchas veces hemos podido ver que cuando se determina mal la codificación de caracteres, la letra “ñ” y las sílabas acentuadas (“á”, “é”, “í”, “ó” y “ú”) aparecen como símbolos. Para evitar que este tipo de errores suceda, debemos declarar correctamente el juego de caracteres que utilizaremos.

    Mantener la estructura básica de una web
    Este consejo también parece obvio, pero se debe prestar especial atención a la forma en que se estructura una página web. Algunos errores frecuentes, es olvidar el cierre de algunas de las etiquetas elementales, que no siempre es notado porque los navegadores pueden dejar de lado estos errores y presentar la página en forma correcta, pero seguramente estos códigos no pasarán la validación y sencillamente se trata de un código mal escrito.

    Quote

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Mi página web</title>
    </head>
    <body>
    Contenido de la página
    </body>
    </html>

    Inclusión y elección del título de la página
    Cuando recién nos iniciamos en el mundo del diseño de páginas web, otorgamos un valor secundario al título de la misma. El título es aquello que se coloca entre las etiquetas “<title>” y “</title>”, y es lo que utilizan los buscadores para indexar la página (es decir, indexar bajo el nombre de:…), pero también es lo que utilizan los visitantes para identificar la página dentro de los millones existentes. Resulta de vital importancia la elección de un buen título para cualquier emprendimiento web.

    Escribir las etiquetas en minúsculas
    A pesar de que en HTML se pueden escribir las etiquetas tanto en minúsculas como en mayúsculas, debemos tener en cuenta que en XHTML esto no es correcto al igual que en XML, por lo que el pasaje de la escritura de un código al otro se simplifica mucho si tenemos la constancia de escribir siempre las etiquetas con minúsculas.

    No olvidar el cierre de las etiquetas
    Algo que ya hemos explicado más arriba y representa un error, es olvidar el cierre de las etiquetas. Esto puede pasar desapercibido en algunos casos, ya que cuando no se produce el cierre de una etiqueta que no puede tener elementos del mismo tipo anidados, cuando aparece otra etiqueta de apertura del mismo tipo, interpreta que la anterior fue cerrada.

    Sin embargo, cuando se trata de etiquetas que pueden contener elementos del mismo tipo anidados, los navegadores simplemente entienden que dicha etiqueta continúa abierta. Además de producir dificultades y errores en la maquetación de la página, se trata de errores en el uso del lenguaje, por lo que el código no pasará la validación.

    Separar la presentación mediante el uso de CSS
    La utilización de etiquetas como <Font>, <b>, <i>, <u>, etc., son cosa del pasado. En la actualidad está casi desterrada la inclusión de elementos pertenecientes a la presentación dentro del código HTML o XHTML. La única excepción es cuando se utiliza “style”, pero aún ello es desaconsejado en la mayoría de los casos, ya que pueden utilizarse identificadores o clases para determinar la presentación del elemento fuera del código HTML o XHMTL.

    Si se va un poco más lejos, la inclusión del CSS en la cabecera (head) del documento HTML también resulta inconveniente, ya que produce un código muy extenso en las primeras líneas del código y por consiguiente, de carga más lenta. Siempre es mejor utilizar archivos separados para la inclusión del CSS.

    Alinear mediante el uso de CSS
    Es cierto que la maquetación de páginas web es algo compleja, y que no siempre resulta sencillo hacer que los diferentes elementos que componen la página se comporten como uno quiere, pero utilizar “center”, “align”, crear márgenes con “ ”, son prácticas incorrectas. Para ello existen atributos CSS que, utilizándolos en forma correcta, nos dan los resultados requeridos.

    Utilización de listas
    Ya hemos hablado del abuso de la utilización de algunas etiquetas. En este caso, vamos a hablar de etiquetas que son poco utilizadas, sobre todo por los diseñadores nóveles. Se trata de las etiquetas <ul> y <ol>. No solo sirven para presentar listas en el contenido, sino que son muy útiles para que con la aplicación de CSS, se puede realizar menús de navegación, botones, pestañas, tablas, y muchas más cosas.

    Declarar correctamente los scripts
    Se trata de un error frecuente, generalmente debido a que se copian scripts algo viejos, que no tienen la sintaxis actualizada. Cuando se va a declarar un script se debe utilizar dentro de la misma la palabra “type” y no “language”, que es la forma arcaica de hacerlo:

    Quote

    <script type="text/javascript">

    Utilizar correctamente los encabezados <h1>, <h2>, etc.
    Es frecuente ver a principiantes utilizar estas etiquetas como forma de modificar la presentación de las fuentes. Por ejemplo, cuando se requiere de una fuente de mayor tamaño que la normal, se agrega texto utilizando una de estas etiquetas. Esto es absolutamente incorrecto.

    Cada una de estas etiquetas definen un título de texto o encabezado de primer nivel, segundo nivel, etc., para ordenar en forma adecuada el contenido textual de una página web. Para la presentación de los mismos, siempre debe utilizarse CSS.

    Conocer todas las etiquetas HTML y XHTML
    Es frecuente encontrarse con diseñadores, aún los experimentados, que no conocen todas las etiquetas HTML o todo el potencial que poseen. <abbr>, <acronym>, <address>, <bdo>, <cite>, <code>, <del>, <dfn>, <ins>, <kbd>, <q>, <samp> o <var>, son etiquetas HTML. En algunos casos su utilización podría ser obviada, pero cuando se las emplea, el código queda más claro para quien lo lee.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 38 | 3:04 PM
    Tutorial de HTML5 – Semántica

    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 el 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:

    Quote
    <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.

    Quote
    <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.

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

    Existe un atributo sin 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.

    Quote
    <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.

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

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

    Quote
    <progress min="0" max="100" value="60"></progress>

    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?

    Quote
    <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.

    Quote
    <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.

    Quote
    <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>

    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:

    Quote
    <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.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 39 | 6:17 PM
    HTML5: Cómo crear barras del ancho del navegador con texto centrado


    En estos días no se suele ver texto configurado para cubrir el ancho total de la ventana del navegador (en el caso de laptops y PCs de escritorio) ya que resulta demasiado ancho. Si intentas crear un elemento que ocupe el ancho total pero limite el texto que contiene dentro a un tamaño legible, aquí te enseñaremos cómo hacerlo.

    Haz clic aquí para ver una demostración >>

    Es posible con pseudo-elementos. En lugar de utilizar envolturas en cada header, envolveremos el área por completo:

    Quote
    <section>
        <h2>Header</h2>
        <p>... text ... </p>
        <h2>Header</h2>
        <p>... text ... </p>
    </section>


    Ahora limitaremos el ancho con el elemento, aunque eso limitará el ancho de nuestros headers también. Es allí donde entran en juego los pseudo-elementos. Los usaremos para crear extensiones a la izquierda y derecha del header:

    Quote
    section {
       width: 50%;
       margin: 0 auto;
    }
    h2 {
       position: relative;
       background: black;
    }
    h2:before, h2:after {
       content: "";
       position: absolute;
       background: black;
       top: 0;
       bottom: 0;
       width: 9999px;
    }
    h2:before {
       right: 100%;
    }
    h2:after {
       left: 100%;
    }


    Debemos ser cuidadosos con los excesivos anchos aquí, ya que no queremos causar scroll horizontal:

    Quote
    body {
        overflow-x: hidden;
    }


    Haz clic aquí para ver una demostración >>

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 40 | 2:41 PM
    Etiquetas HTML5: Hgroup, Aside y Mark


    La codificación con HTML5 ha venido a bombardear la mente de varios desarrolladores en los últimos meses, su incorporación al mundo de la programación ha hecho que más de uno se interese por aprender los nuevos estándares y aplicaciones que esta nueva versión del lenguaje de etiquetas nos brinda. Si bien es un tema que se ha venido tratando por varios meses incluso años, HTML5 ha tomado una relevancia especial a últimas horas por su gran avance en cuestiones de desempeño en el lado cliente.

    Si tú eres de esas personas que se han mantenido al tanto de lo nuevas tecnologías web, debes estar consciente de los grandes avances que se han alcanzado, la manera en que HTML5 ha logrado agrupar e incorporar funciones que antes parecían imposibles de realizar utilizando únicamente el navegador del usuario, desde almacenaje propio hasta animaciones.

    Además de esto, HTML5 trae consigo una nueva manera de estructurar nuestros sitios web, etiquetas como section, article, header y footer nacieron para unirse a otras ya conocidas como body y div. Con esto cada parte de una página quedará mejor delimitada, entendiendo con un simple vistazo la función o el rol que juegan dentro de la estructura.

    Un cambio en estructura siempre es un parte fundamental por aprender, es por esto que muchos recomiendan que entre los primeros pasos a realizar cuando comenzamos con el trato de HTML5 se encuentre el dejar fuera etiquetas de estilo y comenzar con la construcción de las páginas con los nuevos elementos semánticos.
    Si bien las etiquetas ya mencionadas son los elementales para comenzar a desarrollar, al momento de realizar una estructura no debemos olvidarnos de esos pequeños pero fundamentales elementos que nos ayudarán a crear una mejor semántica. Me refiero a etiquetas como mark, hgroup o asidе que si bien son pequeñas, pueden representar gran funcionalidad para la estructura.

    Etiqueta hgroup de HTML 5
    La función del elemento hgroup es agrupar un conjunto de encabezados en un sólo bloque para que puedan ser manejados como una unidad. Cuando mencionamos la palabra encabezado nos estamos refiriendo nada más y nada menos que las etiquetas que van de h1 a h6, y que nos sirven para darle un formato a los títulos de nuestros artículos, entradas o nombres lo que hace resaltarlos del resto del texto.

    Si tuviéramos un título y un subtítulo que quisiéramos relacionar y agrupar, el tag adecuado para ello es hgroup. Una aplicación común en un sitio web es el agregar un “eslogan” al título de nuestra página o quizás la fecha al título de una entrada, para ello comúnmente se maneja un nivel de encabezado para el título principal y otro nivel de encabezado inferior para el lema o eslogan.

    Hgroup será el encargado de agrupar los dos títulos para manejarlos como unidad en el árbol del documento, esto sin comprometer el valor semántico de cada etiqueta. Debemos aclarar que dentro de un elemento hgroup solo podemos manejar etiquetas de tipo encabezado, por lo que no es permitido introducir párrafos o algún otro tipo de etiqueta.

    Su aplicación en el código HTML quedaría de la siguiente manera:

    Code
    <hgroup>
    <h1>uCoz</h1>
    <h2>Portal para crear sitio web gratis y fácil</h2>
    </hgroup>


    Debido a la envoltura hgroup, el lema del sitio no está incluido en el esquema del documento, y eso es exactamente lo que queremos.

    Aunque el uso más práctico de hgroup es para establecer frases, también se puede utilizar para agrupar metadata o algún otro texto auxiliar cuyo contenido no queremos que aparezca en la estructura del documento.

    Etiqueta aside de HTML 5
    El elemento aside es utilizado para envolver todo aquel contenido que sea relativo a la sección principal de un sitio y es a menudo representado con las famosas barras laterales en los sitios web.

    Aunque si bien es cierto que la mayor parte del tiempo encontraremos a esta etiqueta envolviendo contenido que se encuentra a un lado del sitio, debemos aclarar que la etiqueta en sí no esta relacionada con ninguna posición, tanto puede estar a un lado como en el centro o incluso el tope superior o inferior de la página.

    Su función como ya mencionábamos consiste en envolver una sección de contenido que tiene alguna clase de relación el texto más grande donde aparece, por lo que no puede valerse por si misma como una pieza portable de contenido. Es por ello se puede hacer uso de ella para mostrar mensajes de publicidad, alguna cita o una aclaración relacionada con la entrada o el texto donde se despliega.

    Por ejemplo, si quisiéramos una caja de publicidad enseguida de un artículo en este blog podríamos hacer algo como esto:

    Code
    <aside style="background: #DEDEDE; color:steelblue; float:right; width:220px; padding: 20px; border: 1px solid #CCCCCC">
    <span style="font-weight:bold">¿Necesitas una web?</span><br/> ¡Nosotros te la diseñamos!
    </aside>
    <hgroup>
    <h1>Diseño de formularios con CSS y HTML</h1>
    <h2>Artículo creado el 9/05/07</h2>
    </hgroup>
    <p>En este artículo, veremos la variedad de caminos con los cuales podemos hacer formularios atractivos para nuestros sitios y servicios web usando sencillamente CSS. Los formularios son parte importantes, pero poco elegantes, de muchos sitios. CSS hace más fácil la creación de formularios atractivos rápidamente, porque una vez que se ha desarrollado un diseño lo podemos reproducir en cada formulario del sitio.</p>


    Etiqueta mark en HTML 5
    El último elemento a analizar en este artículo es la etiqueta mark, como se puede deducir por su nombre esta es utilizada para marcar el contenido de manera que pueda resaltarse y diferenciarse de los demás, su particularidad viene a que su función puede ser una dependencia del comportamiento del usuario, ya que en algunas ocasiones esta etiqueta puede indicar algún tipo de actividad reciente.

    La etiqueta en sí se encarga de agregar distintos estilos al texto para que este destaque del resto, ya sea un color de fondo o algún relieve, con esto se pretende mejorar la experiencia del usuario en caso de que este haya realizado una consulta o de que haya realizado alguna actividad donde el marcado le resulte de ayuda.
    Si marcamos aquellas palabras que el usuario introdujo en la casilla de búsqueda le resultará mucho más sencillo identificar el párrafo o sección donde se habla del tema buscado. Fuera de esta función, la etiqueta se puede utilizar para mejorar la interacción del usuario con el contenido, haciendo destacar fragmentos.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 41 | 2:08 PM
    El mal uso de etiquetas HTML


    Es común que por factores como la costumbre que nos fue heredada por nuestros predecesores o el uso común que se les da en la programación informal, hayamos utilizado etiquetas HTML de manera errónea en más de un caso y durante mucho tiempo.

    Al ver el código fuente de varias páginas podemos apreciar a menudo los mismos errores que aparecen una y otra vez, estos errores suelen ser producidos por los hábitos que recogimos durante nuestros primeros días en el mundo de la codificación o por la falta de esclarecimiento sobre la verdadera función de cada etiqueta.

    En este artículo veremos algunas de las etiquetas que comúnmente son utilizadas de manera incorrecta, tratando de especificar en que fallamos y de que manera podemos usarlas correctamente.

    Etiqueta “br”
    Es muy probable que esta etiqueta haya estado a tu lado casi desde el día en que te iniciaste como programador web, es una de las etiquetas de uso más común al momento de codificar y por lo tanto una de las que más reciben un mal uso; y es que basta con recordar que fue hasta la aparición de CSS cuando dejamos de usarla para hacer prácticamente todo lo referente a espacios entre dos bloques de elementos.

    Esta etiqueta no se debe de utilizar para crear espacios vacíos en tus documentos o contenido, su función es únicamente dar un salto de línea en una oración. Si lo que deseas es tener espacio entre un elemento y otro entonces la etiqueta para eso es “p”, que nos ayuda a crear párrafos, y podemos complementarlo con la adición de márgenes mediante CSS, lo que nos permitirá determinar la distancia entre los elementos.

    Un claro ejemplo del mal uso de esta etiqueta se puede observar al utilizar editores del tipo WYSIWYG (What You See Is What You Get – Lo que ves es lo que obtienes), estos programas se encargan de maquetar el sitio utilizando estas etiquetas y párrafos vacíos para recrear el diseño que tu hiciste, es por ello que es bastante recomendable mantenerte alejado de esta clase de editores.

    Etiqueta “div”
    Esta etiqueta quizás no ha estado dentro de tu repertorio durante tanto tiempo como la etiqueta br, pero sin duda se ha convertido en una de las más utilizadas en los últimos años. La etiqueta div vino a cambiar la manera en que diseñábamos la estructura de nuestras páginas, permitiendo establecer capas y niveles con los cuales, mediante el apoyo de CSS, podíamos adaptar nuestro sitio.

    Pero la fascinación por su uso terminó llevando a más de uno a la rutina, su implementación se fue haciendo más común y para situaciones donde realmente no debería de usarse, hay sitios que basan prácticamente toda su estructura de elementos en “divs”, incluso para mostrar elementos de texto o imagen, esto está totalmente mal.

    No tenemos que rodear todos los elementos de un sitio con un div, quien te diga lo contrario esta mintiendo, no existe ninguna estandarización que nos obligue a ello, ni mucho menos utilizarlos en lugar de etiquetas cuya función especifica es la que estamos haciendo, como mostrar una imagen.

    Es perfectamente aceptable utilizar la etiqueta div para definir la estructura de la página, pero siempre tratando de hacer uso de etiquetas más adecuadas y especializadas para los elementos de tu página, etiquetas como el párrafo y las listas pueden ser una opción mucho más semánticamente correcta.

    Etiqueta “title”
    Una etiqueta fundamental en cualquier estructura de código HTML es title, su función es básica para el sitio ya que sin ella nuestra página no tendría un título que indique de que trata el contenido que estamos por ver, el problema es que su uso se ha venido degradando últimamente para convertirla en una etiqueta más de meta-data y con funciones de SEO.

    No estamos en contra del SEO para nada, pero si queremos hacer un uso adecuado de etiquetas debemos respetar su función. En el caso de “title” su función es muy sencilla, se encargará de mostrar una descripción concisa del contenido de la página, donde será importante incluir palabras clave relacionadas, lo que permitirá a la página ser reconocida por los motores de búsqueda, pero no debemos abusar de esto.

    Es común caer en extremos al momento de utilizar esta etiqueta, o simplemente no ponemos nada importante en ella o la llenamos de información que realmente no tiene cabida en ella. Debemos evitar estos dos extremos y utilizar las etiquetas meta para esta clase de información.

    Etiqueta “img”
    El problema con la etiqueta img es utilizarla demasiado, no uses imágenes para casos donde realmente no se requiera, no tienes que convertir todo en imágenes recuerda que esto es malo para que la página pueda ser analizada por motores de búsqueda, en esta nueva era donde el contenido lo es todo es muy importante no encapsular tu información en imágenes.

    A veces incluso se cometen errores al utilizar algunos de sus atributos, como el caso de alt, cuya función es contener una descripción precisa de la imagen, sin embargo la mayor parte del tiempo tiene texto irrelevante.

    Etiqueta “small”
    Esta etiqueta quizás no es tan popular como el resto, pero se ha mantenido durante varias versiones del lenguaje y es importante definir su función. Con ella nos encargamos de definir el texto catalogado como “Smallprint”, es decir todo aquel que hable de condiciones de uso o marcos legales.

    Generalmente los desarrolladores cometen el error de utilizarla para definir el tamaño de un texto, cuando quieren que este se vea pequeño, pero para eso se debe definir un tamaño mediante CSS no utilizando esta etiqueta.

    Conclusión
    Existen muchos casos de etiquetas que son utilizadas de manera errónea, muchos pueden abogar por el caso diciendo que lo que importa al final es el producto, pero ¿No te sentirías mejor si tu producto ofrecería también calidad en el código?, para qué utilizar etiquetas en algo que no es su función si ya existe otra que si fue hecha para eso.

    No nos olvidemos de investigar antes de actuar, si tenemos una duda sobre la función de una etiqueta o queremos saber si la que estamos usando para una tarea es la correcta, debemos sentarnos y leer un poco antes de codificar. Se que suena a más trabajo pero al final es la única forma de eliminar esos malos hábitos que hemos adquirido con el tiempo.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 42 | 1:05 PM
    El potencial impacto de HTML5 sobre el SEO


    La nueva versión del lenguaje de etiquetas HTML, si bien es un trabajo aún en proceso, es candidato a convertirse en el siguiente gran estándar de la web. Esta versión nos permitirá estructurar y presentar nuestro contenido mediante nuevas etiquetas que alimentarán a los motores de búsqueda y potenciará positivamente al SEO de nuestros sitio.

    HTML es el encargado de proporcionar a los motores de búsqueda el contexto que necesitan para entender lo que está contenido en una página web. Con HTML5 existe la oportunidad de impactar en gran medida a los algoritmos de los buscadores, de eso hablaremos en este post.

    Segmentación y semántica en HTML5
    La segmentación y una mayor semántica son dos propiedades que nos ofrece agregar HTML5 a nuestras páginas, un componente clave de esta versión del lenguaje, es que añade nuevos elementos que nos van a ayudar a expresar mejor lo que se está mostrando en una página web, con esto se logra mejorar la segmentación y distinguir entre los distintos elementos como el encabezado, pie de página y el contenido principal.

    Se proyecta que eventualmente con el paso del tiempo, los motores de búsqueda incluyan por completo y utilicen estos nuevos elementos para que les ayuden a encontrar contenido de interés dependiente del segmento o sector de la página donde se ubican.

    En la actualidad esta segmentación se lleva acabo mediante elementos de tipo capa, comúnmente identificados con la etiqueta div, estos son utilizados para organizar y crear secciones. El problema con el uso de estos elementos es que no tiene un significado específico, es decir no añade el valor semántico correcto al código, ya que no da un contexto de lo que existe en su interior.

    Con los nuevos elementos header, article, aside y footer, la segmentación de la página toma un papel relevante y se hace más significativo tener una buena estructura. Al utilizarlas, le permitiremos al motor de búsqueda saltear secciones que no le interesan o utilizar algunas otras para identificar información relevante que debe de existir en ese lugar, como por ejemplo la licencia de uso que regularmente se coloca en el footer de un sitio o el logotipo que se coloca en el encabezado.

    Esta indexación del motor de búsqueda permitirá que la investigación que realicemos sea más eficiente, significativa y en teoría más avanzada.

    Elementos HTML5 para indexación
    Como dijimos HTML5 es un proyecto aún en proceso, y aunque ya es una realidad es muy probable que en un futuro existan nuevas etiquetas, por el momento existe un grupo de elementos que nos permiten tener un mayor impacto sobre el SEO, y son los que expondremos en esta ocasión.

    Empezaremos con el elemento article, quizás el más relevante de todos en base al contenido que alberga. Como es de todos saber, el contenido es la parte que juega el rol más fundamental en una página web, sin buen contenido un sitio esta destinado a tener muy bajo ranking en los buscadores, es por eso que dentro de esta etiqueta se debe colocar la mejor información posible, ya que se encargará de indicar el contenido principal de la página.

    Es muy probable que eventualmente todos los buscadores pongan más atención a esta sección sobre todas las demás que conforman el sitio, es por ello que la etiqueta article toma tal relevancia.

    Dejando la relevancia atrás y pasando al orden por uso tenemos a la etiqueta section, quizás la más utilizada a lo largo de la estructura ya que se encargará de indicar las diferentes secciones de una página. Con esto cada sección de la página puede tener su propio título, independiente al que se dio al documento HTML, esto permitirá a los buscadores tener una mejor comprensión de como esta segmentada y estructurada la página.

    También tenemos al elemento header el cual se encargará de dar una idea a los motores de donde encontrar el nombre del sitio y el logotipo que representa a la compañía o sitio. Cerca de él tenemos a nav, elemento que dará pistas sobre la arquitectura del sitio, tal como en la actualidad los mapas del sitio nos ayudan a conocer mejor la estructura.

    Finalmente tenemos footer, dicha etiqueta se encargará de indicar el pie de página, sección que suele contener información complementaria o auxiliar, como es las licencias o derechos sobre el sitio, políticas de privacidad, estadísticas y enlaces hacia las principales redes sociales donde se encuentra presente el sitio. Gracias a esto los motores podrán analizar aspectos legales de manera rápida, simplemente analizando el contenido de esta sección, al igual podrán detectar cuales son los perfiles oficiales del sitio en las redes sociales.

    Enlaces e hipervínculos
    Una de las manera más comunes de determinar el posicionamiento de un sitio por parte de los buscadores es utilizar y analizar los enlaces de una página web. Es decir, los motores se encargan de estudiar los “links” para ver a que sitios redireccionas y que sitios redireccionan hacia el tuyo.

    Pensando en esto, los desarrolladores de HTML5 decidieron añadir distintos tipos de enlaces lo que permitirá darle distintos valores a nuestros vínculos, permitiendo dar más contexto a los buscadores sobre los enlaces que se encuentran en nuestra página.

    Quizás ya habías manejado este tipo de clasificación con anterioridad, al utilizar atributos como rel que al darle un valor como nofollow le indicaba al buscador que el enlace no era totalmente respaldado por nuestro sitio. Los nuevos tipos de enlace son muy parecidos a esta clase de práctica, de hecho utilizamos el mismo atributo rel.

    Ahora podemos dar nuevos valores a este atributos, tales como auto o licence, lo que nos permitirá describir mejor cada vínculo, incluso podemos dar valores como prev o next que indicarán que esos enlaces apuntan hacia una página del mismo sitio que continúa mostrando el contenido que fue paginado.

    Media
    Es importante mencionar también a las etiquetas de media, como audio y video, que incrementar la interoperabilidad con los motores de búsqueda, un ejemplo de ello se puede observar en Google que presenta los videos de YouTube en sus resultados de búsqueda.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 43 | 2:36 PM
    HTML5: Cómo usar el tag de video en tu sitio web


    HTML5 trae consigo muchas de las principales innovaciones, incluyendo el nuevo tag video que nos permite incrustar fácilmente un video a nuestro sitio. Aquí te explicamos más...

    Antes de HTML5. solíamos utilizar los tags embed y object para colocar un video en nuestro sitio web.

    Como habrás notado, esto requiere de fuentes externas para procesar el contenido, y no siempre son 100% compatibles con tu contenido.

    El tag video, en cambio, es bastante simple: intentará mostrar las fuentes de video que le indiques, y en caso de no encontrarlas, arrojará un mensaje alternativo (al igual que hacen las imágenes cuando usamos el tag img).

    Este es el código que puedes utilizar:

    Code
    <video width="320" height="240" controls="controls">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.webm" type="video/webm" />

    Malas noticias, no podrás ver algo genial y todo por por culpa de tu conexión.

    </video>


    Aquí necesitarás fuentes que sean .mp4, .mp3, .ogg, o .webm. Si no tienes ninguno de esos formatos, puedes utilizar varios conversores HTML5 que existen online hoy en día.

    Necesitas diferentes tipos de archivo porque Firefox (3.5+), Opera(10.5+) y Chrome(5.0+) soportan .ogg, pero Internet explorer(9.0+) y Safari(3.0+) sólo soportan .mp4.

    Lo bueno es que, en vez de solicitarle a tus visitantes que cambien de navegador cuando no pueden ver el video, en cambio puedes valerte de varias alternativas para asegurarte que tu video será visto.

    Eso es todo por ahora ¡Hasta la próxima!

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 44 | 6:24 PM
    Como añadir html dentro un elemento con javascript


    Utilizando javascript es posible introducir nuevo html dentro un elemento de una página. Por ejemplo, tienes el siguiente div:
    Code
    <div id="contenedor"></div>


    Y necesitas introducir nuevo código html en el interior de este div de forma dinámica, por ejemplo para actualizar el contenido html via ajax. La solución con javascript cuenta con dos opciones, dependiendo de tu situación te será mejor una que otra, veamos:

    Inserción de html en un elemento html utilizando innerHTML
    Una posibilidad que nos brinda javascript para introducir código html dentro de un elemento ya existente es simplemente utilizando la función innerHTML. Esta función es, sin duda, la más utilizada para actualizar código html de nuestra página. Pero esta función no nos servirá para agregar nuevo código html sin eliminar el anterior. Es decir, si tenemos contenido dentro de un div y aplicamos innerHTML a este div, el contenido previo será eliminado y reemplazado por el nuevo. Ejemplo:

    Tenemos este html:
    Code
    <div id="contenedor">
       <p>Contenido original</p>
    </div>


    y aplicamos el siguiente javascript:
    Code
    function replace(){
       var contenedor = document.getElementById('contenedor');
       contenedor.innerHTML = '<p>Nuevo contenido</p>';
    }


    El html quedará:
    Code
    <div id="contenedor">
       <p>Nuevo contenido</p>
    </div>


    Para que no se elimine el contenido previamente existente podemos usar la adición en lugar de la igualdad simple:
    Code
    function addElement() {
       
       var contenedor = document.getElementById('midiv');
       
       var nuevodiv = '<div id="nuevodiv"><p>Este el contenido del nuevo div</p></div>';
       
       contenedor.innerHTML += nuevodiv;
       
    }


    Inserción de html dentro de otro elemento html utilizando la función appendChild
    Utilizando la función appendChild de javascript podemos introducir cualquier elemento html, y su contenido, donde queramos. Lo único que hay que tener claro es que el elemento html a introducir debe existir en el DOM, y si no existe hay que crearlo primero con la función createElement.

    Por ejemplo:
    Code
    function addElement()  {
       
       var contenedor = document.getElementById('midiv');
       var nuevodiv = document.createElement('div');
       var divid = 'nuevodiv';
       nuevodiv.setAttribute('id',divid);
       nuevodiv.innerHTML = '<p>Este el contenido del nuevo div</p>';
       contenedor.appendChild(nuevodiv);
    }


    Si llamamos a la función anterior introducirá el nuevo div con su contenido dentro del primer div. Con la función javascript appendChild]/b] el nuevo contenido introducido se irá al final del elemento contenedor. En nuestro caso el html quedaría, tras llamar a la función:
    Code
    <div id="contenedor">
      <div id="nuevodiv">
        <p>Este el contenido del nuevo div</p>
      </div>
    </div>


    Del mismo modo podemos eliminar cualquier elemento html, y su contenido, utilizando la función javascript [b]removeChild
    :
    Code
    function removeElement() {
       
       var contenedor = document.getElementById('midiv');
       
       var nuevodiv = document.getElementById('nuevodiv');
       
       contenedor.removeChild(nuevodiv);
       
    }


    La última vez que tuve que hacer algo parecido tuve que elegir la primera opción pues me resultó más cómodo para agregar, que no reemplazar, el código html que recibía de una llamada ajax al contenido html ya existente previamente.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 45 | 5:50 PM
    Formato de textos en HTML


    A pesar de que con el paso de los años las imágenes, los videos y las animaciones han tomado gran relevancia como medios de contenido por Internet, el texto sigue representando la principal fuente de información y la de uso más común. Debido a que su aplicación es sencilla, muchos consideran al texto algo fácil de implementar en una estructura HTML sin embargo se omiten muchos aspectos relativos a su formato.

    La importancia de manejar correctamente un texto va desde la codificación hasta la interfaz, sin texto no tendríamos hipervínculos y no podríamos compartir y vincular sitios, no tendríamos una manera tangible de presentar información en páginas, ni siquiera tendríamos XHTML o CSS.

    En este artículo estudiaremos la manera en que se debe estructurar un texto, como aplicar de manera correcta las etiquetas HTML que se relacionan con él y cómo lograr su manipulación para generar una buena semántica en el código y una presentación adecuada en la interfaz.

    Estructuración del texto con HTML
    El lenguaje de marcado especializado en el texto es un campo aún no muy explorado por los diseñadores web, nos concentramos tanto en aspectos de la estructura del sitio, capas, links, secciones, que nos olvidamos que existen toda una gama de etiquetas desarrolladas exclusivamente para dar un formato correcto al texto.

    Con la llegada de CSS muchas de estas etiquetas fueron quedando enterradas y en el olvido, ya que los estilos podían replicar lo que se hacía con ellas, pero esto no significó que se declararan obsoletas; por lo contrario, su uso sigue siendo considerado lo correcto, pues agregan una correcta semántica al código y delimitan correctamente la función de cada parte del texto.

    Desgraciadamente, actualmente siguen siendo muchas las malas costumbres que se tienen en relación al texto, una de las más comunes es el manejo del salto de línea br para dar la presentación que deseamos, usamos saltos de línea en todos lados, para separar trozos de texto, para separar títulos e incluso para imitar funciones de padding.

    Debemos recordar que existen etiquetas como p párrafo que cumplen mejor con una función de segmentación y que los títulos deben ser definidos mediante cabeceras de h1 hasta h6. El hecho de que algunos navegadores muestren las etiquetas de manera similar, no significa que cumplan la misma función, debemos aprender a marcar los elementos de texto como citas, abreviaturas o códigos, ya que no todos serán párrafos comunes y corrientes.

    Elementos básicos del texto
    Quizás el elemento más importante que se relaciona con un texto es el párrafo, generalmente su etiqueta es utilizada para definir y englobar la mayor parte del texto y su contenido puede variar mucho, lo cual la convierte en la etiqueta con texto más rico dentro de una página web.

    Su declaración es tan sencilla como usar la etiqueta de apertura, el texto deseado y finalmente la clausura, como esto:
    Code
    <p>Este es un párrafo sencillo</p>
    <p>Este es otro párrafo sencillo</p>


    Una distancia será agregara entre los dos párrafos, pues las reglas de escritura nos indican que así debe de ser. Las ventajas que conlleva el agrupar el texto de esta manera en vez de utilizar un br en medio de los 2 textos, es que ahora cada texto es una unidad y como tal puedo aplicarle estilos e incluso efectos con JavaScript.

    Esto no significa que este incorrecto usar etiquetas br en ocasiones, si por ejemplo queremos definir un párrafo y dentro de él establecer una distancia podemos hacer algo como esto:
    Code
    <p>Este es un párrafo sencillo.<br/>Aquí continuamos el texto del párrafo</p>


    Si lo que queremos es dar énfasis a alguna parte de nuestro texto entonces tenemos dos alternativas, podemos utilizar la etiqueta em para dar un énfasis con letra de tipo itálica o strong si queremos dar un mayor énfasis y poner el texto en negrita.
    Code
    <p>Este es un párrafo con <em>énfasis</em>. Como ya dije, con <strong>¡énfasis!</strong></p>


    Cabeceras y títulos
    En la gran mayoría de los textos, los párrafos constituyen la parte más grande e importante del contenido, pero en ocasiones dichos párrafos necesitan separarse con títulos y subtítulos para darle una mejor estructura al documento. Para esas ocasiones fueron creadas las etiquetas de tipo cabecera las cuales están definidas por los nombres h1, h2, h3, h4, h5 y h6.

    El efecto que se produce al utilizar estas etiquetas es dar un formato que distinga a la línea donde se aplica, resaltándola sobre el resto del texto. Por defecto agrega un espacio en la parte superior y otro en la parte inferior, aumenta el tamaño de la letra y las pone en negritas.

    La etiqueta h1 representa el nivel más alto y por consecuente h6 el más bajo, así que debemos respetar esta jerarquía al momento de estar escribiendo, ya que si usamos la etiqueta h2 para definir el título del artículo no podemos usar h1 para un subtítulo.

    Si el estilo por defecto de una cabecera no te agrada, o sientes que no se adapta a lo que tienes en la página, no te preocupes recuerda que siempre puedes editar esto con CSS.
    Code
    <h1>Título del escrito</h1>
    <p>Introducción al escrito.</p>
    <h2>Subtítulo del escrito</h2>
    <p>Texto sobre el subtítulo</p>
    <h3>Tercer nivel del escrito</h3>
    <p>División del tema manejado en el subtítulo</p>
    <h2>Otro subtítulo del escrito</h2>
    <p>Más texto</p>


    Citas
    Conforme vamos avanzando nos encontremos con etiquetas menos utilizadas cuya función es marcar tipos muy específicos de texto, dentro de esta clase encontramos a las citas. El hecho de que sean utilizadas con menos frecuencia que los párrafos o los saltos de línea, no significa que no sean importantes, su función esta en aplicar un significado a una parte específica del texto y con ello aumentar el valor del código.

    La principal etiqueta para agregar una cita es blockquote, y se usa para señalar un bloque de texto grande, que por lo general se busca presentar de manera individual. Entre los aspectos relevantes de esta etiqueta, encontramos que su contenido se presenta mediante párrafos y podemos agregar un link hacia una página, en caso de que el contenido pueda ser observado por Internet.
    Code
    <blockquote cite=”http://www.ucoz.es/“>
    <p>HTML tiene una sintaxis muy sencilla y fácil de comprender, el contenido está estructurado en elementos, los cuales son declarados mediante el uso de etiquetas que proporcionan información adicional através de atributos</p>
    </blockquote>


    Otra etiqueta que también puede ser utilizada, en este caso para citas pequeñas, es q. A diferencia de blockquote, esta etiqueta se utiliza más para desplegar citas inline es decir en una sóla línea sin desplegar un bloque individual.

    También existe la etiqueta cite que da un estilo diferente a la cita, ya que convierte la fuente en tipo itálica.
    Code
    <p>Como se menciona en el artículo de <cite>La Webera</cite> sobre el HTML: <q>HTML tiene una sintaxis muy sencilla y fácil de comprender, el contenido está estructurado en elementos, los cuales son declarados mediante el uso de etiquetas que proporcionan información adicional através de atributos</q></p>


    Abreviaturas y acrónimos
    Otro caso muy específico que podemos encontrar son las abreviaturas y acrónimos, son pocas veces las que llegamos a utilizar estas etiquetas, pero ya dijimos siguen siendo importantes. Si te encuentras con una abreviatura debes marcarla como tal y para ello tenemos la etiqueta abbr, por otro lado si lo que tienes es un acrónimo, es decir una abreviatura que se puede leer y pronunciar como una sola palabra entonces puedes usar acronym.

    Ambas etiquetas puedes contener el atributo title lo que permitirá añadir su significado, así cada vez que el usuario pase el cursor sobre la palabra un tooltip se encargará de presentarle el nombre o significado completo.

    Code
    <p>La <acronym title="Fédération Internationale de Football Association">FIFA</acronym>, es el órgano que rige el fútbol</p>

    Código en el texto
    Si eres diseñador o desarrollador y te has encontrado con la necesidad de escribir algún artículo para tu página web que explique el trabajo que realizaste, es muy probable que hayas tenido la necesidad de plasmar una parte de tu código, si lo hiciste de forma correcta utilizaste la etiqueta code para envolver dicho texto.
    La etiqueta code nos permite introducir marcado HTML en un párrafo para identificarlo y manejarlo como tal.
    Code
    <code>
    <p>Este es el código de un <strong>párrafo HTML</strong>.</p>
    </code>


    Si queremos que la indentación de dicho código se respete tenemos que introducirlo en un elemento de tipo pre, ya que por default HTML no toma como referencia los espacios en blanco o los tabs que agreguemos.

    Y así como estás existen muchas otras clases de etiquetas muy específicas como address que nos sirve para especificar la dirección de un establecimiento, generalmente utilizado en la sección de contacto o kbd que sugiere la parte donde un usuario debería introducir texto.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Búscar: