viernes, 5 de octubre de 2012

Tags en HTML5

Hoy todos los sitio Web que circulan en Internet deberían contener una de las funcionalidades mas importantes, que es la de tener un formulario de contacto, el cual permite la comunicación entre los usuarios y las empresa. HTML5 además nos permite al momento de crear un formulario optimizarlo para ser usado también en SmartPhone o iPhone.

La optimización hoy pasa una serie de tags que nos permiten una correcta funcionalidad dentro de los teléfonos inteligentes, realizaremos un recorrido por algunas novedades explicando por qué el uso de cada una de ellas

Placerholder

Usado en muchos formularios, cuando un campo no tiene valor, si se focaliza este campo se elimina el placerholder, si abandonamos el campo sin añadir un valor se añade el del placerholder

Por lo generar se muestra en un tono claro no siendo este un valor valido para el formulario.

<label form="referencia">Nombre Usuario</label>

<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" />



Tips: Puede crear un archivo Html simple he ir copiando y pegando las etiquetas para que las puedas probar y ver su funcionamiento.

Autofocus

Uno de los ejemplos más emblemáticos es el Google, el foco siempre lo acapara el input de la búsqueda, antes siempre se programó en Javascript hoy en HTML5 se debe agregar al input.

<label form="referencia">Nombre Usuario</label>

<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" autofocus />

Autocomplete

Con el tiempo los navegadores han implementado nuevas funcionalidades y mejoras, una de ellas es la de guardar datos al momento completar algun tipo de formulario, con la nueva especificación en HTML5 podemos desactivar esta opción agregando valores "on - off", según requerimiento

<form action="" autocomplete="off">

.....

</form>

Si este código va dentro de la etiqueta form desactiva todo el formulario, pero si solo queremos desactivar un input queda de la siguiente forma

<label form="referencia">Nombre Usuario</label>

<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" autocomplete="off" autofocus />

Requiered

Este es uno de los más usados al momento de validar formulario, antes se debia extender desde un Javascript, hoy solo va dentro del tag input, validando el campo como requerido, el mensaje que se muestra es según la versión del navegador, caso contrario hay una solución invocando Javascript.

<label form="referencia">Nombre Usuario</label>

<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" autocomplete="off" required />

La alternativa para usar con Javascript seria


if(!Supports('input', 'requiered' )){

//Codigo para emular la funcionalidad

}

Tips: Es un gran error de seguridad validar un formulario únicamente de cara al usuario, también es imprescindible validar en líneas generales desde el Backend

Detalles de un contacto


La nueva especificación añade tres nuevos tipos de valores para los detalles de contacto específicamente: correo electrónico, sitios web y números de teléfono:


<label for="correo">Correo electrónico</label>

<input id="correo" name="correo" type="email" />

<label for="website">Sitio web</label>

<input id="website" name="website" type="url" />

<label for="telefono">Número de teléfono</label>

<input id="telefono" name="telefono" type="tel" />

Nuestros navegadores los mostrarán como campos de texto normal, pero si lo revisamos en un SmartPhone veremos que se aplica de la siguiente forma.


miércoles, 3 de octubre de 2012

Maquetación SEO HTML5


La maquetación en HTML5 se va imponiendo en el actual desarrollo de los sitios Web actuales, pero lamentablemente hay errores que se están cometiendo al momento de maquetar o tratar de trabajar con HTML5, por ejemplo sitio creado en DreamWeaver usando tablas, maquetación con muchas etiquetas div y un sin fin de errores guiados por un desconocimiento.

Pero siempre debemos comenzar por algo, pero debemos dar seriedad y profesionalismo conociendo las virtudes que hoy nos esta entregado HTML5.

Las nuevas etiquetas nos permiten mejorar la semántica se nuestros sitios, comenzando por <header /> que nos permite identificar la cabecera del sitio, <footer /> identifica el pie de página del sitio, <nav /> tiene la capacidad de agrupar una serie de link, ayudando a los buscadores a detectar la estructura de nuestro sitio Web. y así un variado abanico de tag que son muy importante para SEO.

Hoy en día el uso de la etiqueta <div /> esta más orientada al SEO, no siendo ya una etiqueta "tonta", se puede usar libremente en ayuda de CSS, más aun no ha sido desplazada por completo por la etiqueta <section />. Entonces la podemos usar como ayuda dentro de la estructura, por ejemplo base para un Layout.

Dirigiéndonos en tierra derecha el uso de la etiqueta <section /> es lo mas similar a un 
<div /> aportando una mínima carga a los contenidos en la cual puede agrupar distintos elementos de una etiqueta <section />, declarando su contenido relacionado. La diferencia es sutil, por ejemplo si creamos un bloque formando un todo usamos <section /> si esta más relacionado al diseño usaremos <div />.

El uso de la etiqueta <aside />, que nos sirve para indicar que dicho bloque es solo un añadido a los bloques que contiene a su lado. Esta etiqueta es hija de la etiqueta <body />, se trata de un contenido añadido por temas que no tiene nada que ver con el contenido de la página, por ejemplo: Las columnas laterales llenas de tags y banners. Si la incluimos dentro de una etiqueta <article /> nos indica que esa información complementa el articulo pero no forma parte de el.

Y para el final dejamos la etiqueta <article />, quien declara un conjunto de elementos de nuestro sitio Web, al incluir algo dentro de la etiqueta, le estamos diciendo a los buscadores que dentro de <article /> hay contenido único y con significado propio. Esta etiqueta puede contener en su interior otras etiquetas como  <header /> <section /> <aside /> <footer />.

Un ejemplo práctico en el uso de las etiquetas solo usando la referencia de cada una de ellas:

<!doctype html>
<html lang="es">
<head>     
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Titulo - Sitio Web</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width">
</head>
<body>

<header>
    <p class="logo"><a href="...">Logo</a></p>
    <nav>
        <ul>
            <li><a href ... </li>

        </ul>
    </nav>
</header>

<article>
    <header>
        <hgroup><h1>Titulo</h1><h3>Otro Titulo</h3></hgroup>
    </header>
    <section>
        <p>Contenido Texto Texto Texto Texto</p>
    </section>
    <aside>
        <p>Datos extras para el contenido Texto</p>
    </aside>
</article>

<div class="blocks">
    <section>
        <hgroup><h2>Bloque 1 que nos ha puesto el diseñador</h2></hgroup>
            <ul>
                <li>...</li>
            </ul>
    </section>
    <section>
        <hgroup><h2>Bloque 2 que nos ha puesto el diseñador</h2></hgroup>
            <ul>
                <li>...</li>
            </ul>
    </section>
</div>

<footer>
    <ul>
        <li><a href="">Derechos reservados....</a></li>
    </ul>
</footer>

</body>
</html>