jueves, 28 de marzo de 2013

Tips HTML5 – Usando ContentEditable

Anteriormente se recurría a distintos métodos para lograr que el contenido de nuestra web fuera editable, generalmente amparados en el uso de JavaScript, pero con la llegada de HTML5, también se introdujo un mecanismo de edición de contenidos.

El atributo contenteditable fue pensado para proveer una experiencia WYSIWYG, muy similar a las que se pueden ver en editores de blog y otros sitios tales como Flickr, donde se puede empezar a editar el contenido de la pagina con solo hacer clic en un área determinada.

Este atributo 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”, a menos claro que se indique explícitamente lo contrario.

Su uso es realmente sencillo:
<div>
    <h1>Lista de compras</h1>
    <section id="editable" contenteditable="true">
        <p>Apuntar los artículos que se deben comprar</p>
        <ul>
            <li>Carne</li>
            <li>Pollo</li>
            <li>Naranjas</li>
            <li>Zanahoria</li>
        </ul>
    </section>
</div>

Así, podríamos tener una lista de compras totalmente editable, tal como podemos ver a continuación:

Lista de compras


Apuntar los articulos que se deben comprar
  • Carne
  • Pollo
  • Naranjas
  • Zanahoria

lunes, 25 de marzo de 2013

Tips HTML5 – Manifiestos

Los manifiestos son un mecanismo por el cual podemos garantizar la navegación offline, también se le conoce como cache de aplicación, y esta pensado principalmente para ser usado con dispositivos móviles que como bien sabemos no siempre cuentan con una conexión estable a internet. La principal ventaja de este tipo de mecanismo es que se basa en lenguaje, no en el navegador como sucedía anteriormente.

El archivo de manifiesto se compone de las siguientes áreas:
  • Cabecera: Contiene los comentarios referentes al manifiesto y la versión del mismo.
  • CACHE MANIFEST: Esta sección contiene el listado de elementos que deseamos guardar y que están en capacidad de brindar las funcionalidades mínimas necesarias para que nuestra aplicación pueda funcionar offline.
  • NETWORK: En esta sección definimos todos los archivos que van de lado del servidor.
  • FALLBACK: En esta sección se definen los archivos que se deben cargar en caso de que se presenten errores con los definidos en las secciones anteriores.
De esta forma un archivo de manifiesto quedaría de la siguiente forma:

# Manifiesto v1.0
# Este es el manifiesto de mi pagina web de pruebas
CACHE MANIFEST
manifiesto.html
estilos.css
images/imagen.png
scripts/script.js

NETWORK:
log.aspx
prueba.aspx

FALLBACK:
img/imagen.png
archivo.aspx

Ahora, para incluirlo hacer uso de este manifiesto, debemos definir el atributo manifiest en la etiqueta html de nuestro documento web.


<html manifiest="manifiesto.cache">

    .....

</html>

Como pueden notar es bastante sencillo, y de esta forma nuestra aplicación web podrá navegar offline.

jueves, 21 de marzo de 2013

Tips HTML5 – Etiqueta Canvas

Esta etiqueta es nueva en HTML5, como tal traduce lienzo, y es un elemento HTML que permite la generación de gráficos dinámicamente por medio de scripts.

Su sintaxis como tal no es compleja, y los únicos atributos de este elemento son los que permiten definir su tamaño.

<canvas id="myCanvas" height="200" width="200">El navegador no soporta HTML5</canvas>

Mediante el uso de JavaScript se crean las animaciones o graficas dentro del lienzo

lunes, 18 de marzo de 2013

Tips HTML5 – Etiqueta Mark

Esta etiqueta es nueva en HTML5, y tiene como finalidad resaltar el texto enmarcado dentro de ella, y puede ser de utilidad por ejemplo en una búsqueda para resaltar los resultados que contienen los criterios de búsqueda.

No deben olvidar las cosas importantes.

Su uso es en realidad muy sencillo

<p>No deben olvidar las cosas <mark>importantes</mark>.</p>

viernes, 15 de marzo de 2013

Tips HTML5 – Microdatos

Los microdatos son otra de las estrategias que se implementan en HTML5 para dar mas significado a la información, y consiste en etiquetar contenido para describir un tipo específico de información, como por ejemplo información sobre personas o eventos.

Cada tipo de información describe un tipo de elemento específico, así por ejemplo una persona cuenta con primer nombre, segundo nombre, dirección, teléfono, etc., para esto se usan atributos simples en etiquetas HTML para asignar nombres breves y descriptivos a los elementos y propiedades.

Actualmente existen varios repositorios que contienen esquemas con información general de diferentes tipos, siendo el mas usado schema, si por ejemplo consultamos la definición de una persona, veremos una tabla con datos que describen a una persona:

microdatos-persona

De esta forma se usa una descripción estandarizado de una persona, ahora realicemos un ejemplo de su uso, basándonos en el esquema que hemos obtenido.

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Fabián Becerra</span>
  <span itemprop="jobTitle">Software Architect</span>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">
      1234 La dirección
    </span>
    <span itemprop="addressLocality">Localidad</span>,
    <span itemprop="addressRegion">Región</span>
    <span itemprop="postalCode">0005</span>
  </div>
  <span itemprop="telephone">(123) 123-4567</span>
  <a href="mailto:myemail@dominio.com" itemprop="email">myemail@dominio.com</a>
  Web Site:
  <a href="http://www.mypage.com" itemprop="url">mypage.com</a>
</div>

Si observamos detenidamente la primera línea, veremos el atributo itemscope, este indica que el contenido del div corresponde a un elemento, y el atributo itemtype define la url del esquema que contiene la descripción del tipo de información.

<div itemscope itemtype="http://schema.org/Person">

Observando las líneas siguiente encontramos el atributo itemprop, el cual indica que la información contenido por la etiqueta es un atributo, y tiene asociado el nombre del atributo correspondiente.

<span itemprop="name">Fabián Becerra</span>

En el caso del ejemplo, se incluye un atributo que es en si un elemento de información, para este caso podemos ver como se define que el contenedor es un atributo de tipo address, pero al mismo tiempo se indica que el div contiene un elemento, cuyo esquema corresponde a una dirección postal.

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

De esta forma podemos dar mas significado a la información contenida en nuestra web, y hacer mas efectivas las busquedas de información.

miércoles, 13 de marzo de 2013

Tips HTML5 – Etiqueta Progress

Esta etiqueta es nueva en HTML5 y es de un elemento de tipo grafico que nos permite visualizar en pantalla una barra de progreso, la cual a diferencia de metter es dinámica.

El navegador no soporta HTML5

Su uso es muy sencillo:

<progress min="0" max="100" value="50">El navegador no soporta HTML5</progress>

lunes, 11 de marzo de 2013

Tips HTML5 – Etiqueta meter

Esta etiqueta es nueva en HTML5 y a diferencia de las que hemos visto anteriormente, esta es un elemento de tipo grafico, y nos permite ver una barra estática, como la que vemos en la imagen adjunta, y que puede ser usada por ejemplo para indicar un ranking.



Cuenta con los siguientes atributos:

high: Especifica el punto en el que el valor de las mediciones se considera un valor alto
low: Especifica el punto en el que el valor de las mediciones se considera un valor bajo
max: Especifica el valor máximo. El valor por defecto es 1.0
min: Especifica el valor mínimo. El valor por defecto es 0
optimum: Especifica el valor de las mediciones es el mejor valor
value: Establece el valor medido y es de carácter obligatorio

Su uso es bastante sencillo:

<meter low="-5" high="100" min="10" max="80" optimum="40" value="25">
    El navegador que usa actualmente no soporta HTML5
</meter>

jueves, 7 de marzo de 2013

Prefix Free

prefix-free-550

Como ya todos saben, CSS3 trae consigo cosas geniales, pero debido a la falta de colaboración entre los diferentes proveedores de navegadores, tenemos que sufrir la existencias de prefijos de acuerdo a cada navegador.

Si bien los prefijos existentes no son muchos, es molesto tener que repetir las instrucciones, una por cada prefijo. Es acá donde prefix free hace su entrada, y es que la ingeniosa diseñadora Lea Verou se puso a la tarea de crear esta maravillosa librería, que esta desarrollada en JavaScript, y la que permite que usemos solo las propiedades estándar en nuestras hojas de estilo, lo que resulta realmente útil, mas si tenemos en cuenta que no sabemos cuando estos prefijos pueden cambiar, como parece que puede suceder en el caso de Chrome, ahora que dejan de lado webkit.

Esta librería esta disponible en el sitio oficial de Prefix Free, destaca su reducido tamaño, y el hecho de ser libre.

Su uso es bastante sencillo, y basta con agregar a la cabecera de nuestro documento la siguiente línea:

<script src="js/prefixfree.min.js"></script>

Con esto podremos pasar de tener una hoja de estilo con cosas como esta:

div{
    width: 960px;
    margin:10px 0;
    
    -webkit-box-shadow: 5px; /*Chrome y Safari*/
    -moz-box-shadow: 5px; /*Mozilla*/
    -ms-box-shadow: 5px; /*IE9 o superior*/
    -o-box-shadow: 5px; /*Opera*/
    -khtml-box-shadow: 5px; /*Konqueror*/
    box-shadow: 5px;
    
    -webkit-border-radius:15px; /*Chrome y Safari*/
    -moz-border-radius:15px; /*Mozilla*/
    -ms-border-radius:15px; /*IE9 o superior*/
    -o-border-radius:15px; /*Opera*/
    -khtml-border-radius:15px; /*Konqueror*/
    border-radius:15px;
}

Por una hoja de estilos como esta:

div{
    width: 960px;
    margin:10px 0;
    box-shadow: 5px;
    border-radius:15px;
}

Como pueden ver se usa solo la notación estándar.

lunes, 4 de marzo de 2013

Tips HTML5 – Etiqueta footer

Esta etiqueta es nueva, es de tipo semántico y tiene como finalidad englobar la información que corresponde al pie de pagina.

Su uso es muy sencillo.

<footer>Este es el pie de pagina de mi web</footer>