Como curiosidad, comentar que esta nueva etiqueta fue creada por Apple, con ella, los desarrolladores conseguían mejorar el aspecto de sus aplicaciones web en cualquiera de sus dispositivos móviles (iphone, ipad ..)

En principio se desarrolló para Safari, pero actualmente ya se puede considerar un estándar, la mayoría de los navegadores la reconocen.

El problema, tu píxel no es como el mío

Cada vez hay más tamaños de pantalla y más tipos de resoluciones, lo que provoca que cada dispositivo pueda tener un número distinto de píxeles por pulgada (ppi), por ese motivo el contenido que se cargue en cada uno, se presentará de distinta forma.

Así que en en el desarrollo web, nos vamos a referir siempre a los ppi .

Ahora, pongamos el ejemplo de una misma imagen (mismo tamaño en px) mostrándose en un varios monitores con las mismas pulgadas pero con distintas densidades de píxeles por pulgada. Como vemos abajo, en el primer caso, con 100 ppi, la imagen ocupa toda la pantalla, en el segundo caso (200ppi), lógicamente la misma imagen ocupa la mitad que en el monitor anterior, y en el tercer caso (400ppi) la imagen ocupará una cuarta parte que la pantalla inicial.

Para comprobar la variedad de densidades de pixeles, aquí tenéis una extensa lista de dispositivos: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Si quieres conocer la densidade de pixeles de tu dispositivo, aqui te dejo una interesante calculadora de ppi y dpi: http://members.ping.de/~sven/dpi.html

¿Qué es y para que nos sirve el viewport?

El viewport podemos definirlo como el área útil donde se mostrará una página web, este área útil no siempre está configurado con su número real de pixels, por ejemplo el primer iphone, tenía 320px de ancho, pero su viewport simulaba un área de 980px. Esta simulación la hacen multitud de dispositivos móviles, por eso muchas veces vemos páginas a tamaños nada óptimos para su lectura.

Esta etiqueta nos permite definir, entre otras propiedades, el ancho, alto y escala del área usada por el navegador para mostrar contenido, veamos con más detalle sus propiedades.

Atributos viewport

Estas son las propiedades viewport que podemos definir:

• device-width, devuelve el ancho del viewport
• device-height, devuelve la altura del viewport
• initial-scale, fija la escala que se va a mostrar en un principio la página (valor 0.1 en adelante)
• maximum-scale, establece el zoom máximo que podremos hacer a la página (valor 0.1 en adelante)
• minimum-scale, estable el zoom mínimo que podremos hacer (valor 0.1 en adelante)
• user-scalable, define si el usuario puede o no hacer zoom (yes o no)
• target-densitydpi, exclusiva de dispositivos android, se recomienda utilizar mejor media queries

Ejemplos viewport

Un ejemplo de uso de la etiqueta viewport sería:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

En este caso, se mostrará todo el contenido a una escala 100%, donde el usuario no podrá hacer zoom.

<meta name="viewport" content="width=320px, user-scalable=no">

Con este código, estamos definiendo nuestro viewport a 320px y evitando que el usuario pueda hacer aumentar/disminutir el contenido

<meta name="viewport" content="width=device-width; initial-scale=2"/>

Se nos mostrará el contenido al 100% del ancho de dispositivo, pero aumentado a una escala x2

Su incorporación en css

Se está preparando su introducción de la propiedad viewport en las hojas de estilo css3, podemos consultar en el borrador de la w3c http://dev.w3.org/csswg/css-device-adapt/#the-viewport

La forma de insertar viewport en nuestra css sería:


<style type='text/css'>
// microsoft
@-ms-viewport { width: device-width; }
// opera mobile 11
@-o-viewport { width: device-width; }
// resto navegadores
@viewport { width: device-width; }
</style>


Esperamos haber aclarado alguna de tus dudas sobre esta etiqueta, ahora combinándola con las media queries podemos preparar nuestra web a cualquier dispositivo.

Así empezó todo.

El concepto fue modelado hace ya unos años, tanto la idea y como el propósito del diseño web adaptativo fueron previamente discutidos y descritos por el consorcio W3C en julio de 2008, en su recomendación “Mobile Web Best Practices” bajo el subtítulo “One Web“.

A nivel más general, se empezó a conocer en mayo de 2010, donde Ethan Marcotte escribió un artículo sobre esta técnica, aunque el despegue del DWR fue a partir del 2012, convirtiéndose en la actualidad en algo casi imprescindible para cualquier desarrollo web.

En Junio de 2012, la W3C lo adoptó como recomendación.

¿Qué es un diseño web responsivo?

Básicamente es aquel que permite que una web se adapte automáticamente al tamaño de pantalla del dispositivo por el cuál accede un usuario, por ejemplo, un móvil, una tableta, una TV o un PC.

A diferencia de como se hacía años atrás, con el DWR el contenido se redistribuye de forma que pueda mostrarse la información sin tener que recurrir a crear versiones alternativas o nuevos contenidos adaptados.

Es decir, misma página y recursos, lo que se resume en ahorro de tiempo para los desarrolladores, un aspecto más profesional y limpio, además de mejorar el SEO ya que tenemos una misma url, todo ventajas.

¿Que navegadores lo soportan?

• Safari 4+
• Chrome 4+
• Firefox 3.5+
• IE9+

¿Cómo funciona?

Hay varias formas de implementación, una es a través de una query dentro del atributo media de una hoja de estilos linkeada:

<link href="movil.css" type="text/css" media="screen and (max-device-width: 480px)" rel="stylesheet"/>


… dentro de nuestra css:

@media only screen and (max-device-width: 480px)
{
/* estilos para movil */
}

… o utilizando la regla @import en nuestra css:

@import url(/style.css) only screen and (max-device-width: 480px);


Ejemplos de media queries:

Dispositivos de ancho máximo 480px y orientados horizontalmente:

@media only screen and (max-device-width: 480px) and (orientation : landscape) {
/* estilos */
}

Pantallas con ancho mínimo de 680px a máximo de 979px y una orientación vertical:

@media only screen and (min-width: 680px) and (max-width: 979px) and (orientation : portrait) {
/* estilos */
}

Pantallas con una relación de aspecto 16/9 (panorámico):

@media only screen and (device-aspect-ratio: 16/9) {
/* estilos */
}

Media Query para Samsung galaxy s3:

@media only screen and (-webkit-device-pixel-ratio: 2) {
/* estilos */
}

Media Query para iphone 5:

@media screen and (device-aspect-ratio: 40/71) {
/* estilos */
}

En la web http://nmsdvid.com/snippets/, podéis ver un listado de media queries para distintos dispositivos y modelos comerciales específicos.

Lista de propiedades de las media queries

¿Y qué pasa con la meta viewport?

Podemos utilizar conjuntamente esta meta con las media queries para ajustar completamente nuestra página, pero eso nos dará para un próximo artículo.

<meta name="viewport" content="width=device-width, initial-scale=1">

Enlaces de interés

• Galería de webs que adoptan diseño responsivo
• Documentación Mozilla
• Documentación oficial media queries

Para bien o para mal, Internet Explorer ha sido en parte responsable de como conocemos el desarrollo web hoy en día. En las primigenias versiones del navegador, se aplicaron una serie de innovaciones que se han convertido en estándares, e incluso algunas han terminado en la especificación de HTML5. Esto no es nada raro, de hecho es lógico que lanzando un montón de nuevas características con cada versión, unas pocas de ellas salgan bien y sean aceptadas.

A mediados de los 90, Microsoft vio potencial en la web y lanzó la primera versión de Internet Explorer, lo que a la postre desencadenó una guerra entre navegadores. La competencia fomentó la innovación, pero se llegó al punto de que cada navegador implementaba capacidades propias sin tener en cuenta las recomendaciones del w3c. El desarrollo web se polarizó tanto, que durante un tiempo las páginas tuvieron que optimizarse para que se visualizaran correctamente en cada navegador.

Algunas de estas capacidades propietarias calaron tan hondo que abrieron camino al desarrollo web actual, veamos algunas de ellas:

DOM

El DOM proporciona a los desarrolladores acceso a cualquier parte de una página web a través de JavaScript. Internet Explorer 3 Netscape y 3 sólo se permitían el acceso mediante JavaScript a los elementos de formulario, imágenes y enlaces. Internet Explorer 4 mejoró la situación al permitir el acceso de todos los elementos de la página a través de document.all, (Netscape tenía algo parecido con document.layers).En muchos aspectos, document.all fue la primera versión de document.getElementById (). También introdujo la posibilidad de obtener una lista de elementos mediante el nombre de una etiqueta a través de document.all.tags (), versión primigenia del document.getElementsByTagName ().

Explorer 4 también presentó innerHTML, resultando tan útil, que se ha estandarizado en HTML5 y es ampliamente soportado por los navegadores. Por lo tanto Internet Explorer fue el primero que permitió dicho acceso programático a los elementos de la página.

En la misma línea, Internet Explorer 4 introdujo insertAdjacentHTML(), una forma de insertar texto HTML en un documento. Éste método costó un poco más, pero también se aprobó para HTML5 y es ampliamente soportado por los navegadores.

Eventos

Al principio, no había sistema de eventos de JavaScript. Tanto Netscape como Microsoft tomaron un camino diferente para implementarlos. Netscape aportó el event capturing, la idea de que un evento se libera primero en la ventana, y luego en el documento, y así sucesivamente hasta que por fin alcanzar el objetivo previsto.

Microsoft tomó el camino contrario y encaró el problema con el event bubbling o burbujeo de eventos. De este modo el evento debe comenzar en el objeto y luego disparar contra los padres, y así sucesivamente hasta el documento.

<iframe>

Los marcos fueron introducidas por Netscape 2 incluyendo <frameset>,<frame> y <NOFRAMES>. La idea era proporcionar un marco a los elementos de navegación que se repetían en todas las páginas, para que solo se cargara una vez. Esto hacía que la transferencia de datos del servidor fuera menor, minimizando el tiempo de carga de una página.

En Internet Explorer 3 Microsoft añadió su propia etiqueta de marco, el <iframe>. Esta etiqueta permitía incrustar una página dentro de otra. Inicialmente, este fue uno de los campos de batalla más importantes entre Internet Explorer y Netscape.

El <iframe> empezó a ser más popular, ya que era más productivo. Netscape 4 introdujo <ilayer> con características muy similares a <iframe>. Ambas etiquetas fueron estandarizadas en HTML 4, pero la etiqueta <ilayer> se quedó obsoleta y cayó en desuso. Finalmente <iframe> se ha aprobado para HTML5.

XML y Ajax

Aunque actualmente XML no se utiliza tanto como muchos pensaban, Internet Explorer también abrió el camino al soporte XML. Internet Explorer 5 fué el primer navegador que soporta en cliente el análisis de XML y XSLT. Por desgracia, lo hizo a través de objetos ActiveX que representan los documentos XML y los procesadores XSLT. La gente de Mozilla claramente pensó que había algo allí, porque ellos inventaron una funcionalidad similar en la forma de DOMParser, XMLSerializer y XSLTProcessor. Los dos primeros son ahora parte de HTML5. Además antes de que el término AJAX fuera acuñado, Explorer introdujo XMLHttpRequest en JavaScript.

CSS

Internet Explorer 3, lanzado en Agosto de 1996, fue el primer navegador comercial en dar soporte a CSS. Admitía de manera más o menos fiable la mayoría de las propiedades de color, fondo, fuente y texto, pero no implementa casi nada del modelo de caja.

En ese momento, Netscape era bastante escéptico con respecto a las hojas de estilo, y estaban desarrollando una propuesta alternativa, las Hojas de Estilo de JavaScript (JSSS), que pasaban por encima de las CSS. Esta propuesta utilizaba JavaScript para definir los estilos, por lo que si se desactivaba JavaScript, CSS no funcionaba en Netscape 4. Explorer 4 se acercó mucho más a la interpretación correcta de la especificación, aunque sin cumplirla completamente.

Además Explorer aportó algunas propiedades que han terminado siendo estandarizadas para CSS3 y de hecho actualmente son soportadas por la mayoría de los navegadores. Algunas de ellas son las propiedades overflow-x y overflow-y, word-break o word-wrap que aparecen por primera vez en Internet Explorer 5 o text-overflow, que apreció con Internet Explorer 6.

Muchos de los efectos visuales CSS3 ya estaban disponibles en Internet Explorer 4, mediante los vilipendiados Filtros. Los filtros son trozos de código propietario que se introducen en las hojas de estilo y que se valen de DirectX para mostrar efectos visuales complejos. Eran incompatibles con el resto de navegadores, su sintaxis era terrible, los efectos se veían feos, e incluso no interactúan demasiado bien entre sí. Pero recordemos que entre la infinidad de efectos, en 1997 con estos filtros se podían hacer cosas como:

• Generación de gradientes.
• Creación de elementos semitransparentes.
• Rotación de elementos.
• Aplicación de sombras a elementos html.
• Además, Internet Explorer 4 tenía una característica llamada transiciones, que permitía hacer animaciones básicas.

Hay que reconocer que con la tecnología de la época, fueron capaces de dotar al navegador de unas capacidades, cuyo soporte se está empezando a extender ahora, 15 años más tarde.

Otras contribuciones de Internet Explorer

• Drag and Drop: esta API se apareció por primera vez en Internet Explorer 5 y ha pervivido con muy pocos cambios hasta HTML5. La principal diferencia es la aparición del atributo draggable. Aparte de eso, la API refleja fielmente el original y es ahora compatible con la mayoría de navegadores.
• Los Faviconos también fueron invención de IE, teniendo soporte desde la versión 5.
• El Doctype se creó para Internet Explorer 5 versión Mac. De este modo los desarrolladores pudieron crear páginas con código estandarizado sin que les reventara el navegador. El modo no estándar se definió como quirks mode. Pronto, todos los demás navegadores lo adoptaron.
• DHTML fue introducido para Internet Explorer 4, lo que permitió que las páginas web cambiaran dinámicamente su contenido mediante JavaScript.

Es importante aclarar que Microsoft no tuvo ningún interés por estandarizar estas innovaciones, dejando que la mayoría de ellas fueran funcionalidades exclusivas de su navegador. Esto supuso que durante un tiempo, maquetar para Internet Explorer, fuera la manera “estándar” de crear sitios.

Cuando Internet Explorer 6, alcanzó una cuota de mercado del 96%, se detuvo abruptamente el desarrollo de cualquier nueva funcionalidad o innovación. A partir de ese momento todas las versiones de Explorer han ido tecnológicamente detrás de la competencia. Actualmente con su posición dominante amenazada, Microsoft se está preocupando de desarrollar navegadores medianamente competitivos y cada vez más respetuosos con los estándares. ¿Será la versión 10 de Internet Explorer la que rehabilite el prestigio de Microsoft entre los desarrolladores y usuarios?, queda poco tiempo para averiguarlo.

Más información

The innovations of Internet Explorer

Las ventajas de los URL Schemes son evidentes, las más importantes son:

• No obligan al usuario a estar conectado permanentemente a la red.
• Son un método simple y rápido de integrar las aplicaciones de sistema con nuestras aplicaciones. Llegando a poder utilizarse dentro del código HTML.
• Proporcionan una interfaz de comunicación pública, que cualquier aplicación puede aprovechar.

Su funcionamiento es muy sencillo. Cada aplicación se registra con un identificador, que es reconocido por el navegador del móvil. La función del navegador será:

• Comprobar si hay alguna aplicación instalada que responda al nombre de ese identificador.
• Abrirla.
• Pasarle como parámetro los datos de la URL que le hayamos definido.

Hay una enorme cantidad de Schemes, pero ahora veremos algunos de los más sencillos y útiles:

tel URL Scheme

El esquema de URL tel se utiliza iniciar la marcación el número de teléfono que le hayamos especificado.  Al tocar un enlace telefónico, se mostrará  una alerta preguntándole si el usuario realmente quiere marcar el número especificado.  Si este acepta se iniciará la llamada. Ten en cuenta que si proporcionas un número internacional, tendrás que incluir el código del país. Un enlace telefónico se puede especificar tanto en aplicaciones nativas de iOS/android, como para web. El marcado HTML sería el siguiente.

<a href="tel:000000000">000000000</a>

En iOS y Android, la detección de número de teléfono está activada por defecto. Para desactivar esta detección de número, utiliza la siguiente meta etiqueta:

<meta name = "format-detection" content = "telephone=no">

Text URL Scheme

Este Scheme configura el cliente de SMS para que los usuarios puedan enviar rápidamente un mensaje de texto. También es posible proporcionar el cuerpo del mensaje. El marcado HTML es el siguiente.

<a href="sms: 000000000">Escriba un nuevo mensaje de SMS</a>

mailto URL Sheme

El esquema mailto, es un antiguo conocido de los maquetadores web. Se utiliza para iniciar la aplicación de correo predeterminada del dispositivo.  En su forma más simple, un mailto URL contiene una dirección de correo de electrónico:

<a   href="mailto:ejemplo@mail.com">ejemplo</a>

Recursos:

• Apple Developer Reference: proporciona información sobre los de URL Schemas, y la forma de utilizarlos en aplicaciones de Apple
• Wiki oficial de akosma: podrás encontrar un completísimo repositorio de Schemas.

Actualmente lo más utilizado es aplicar el “diseño responsivo (responsive design)” en las web que desarrollemos, para que se visualice o se adapten correctamente en los dispositivos móviles (smartphone, tablet, etc). Esto lo conseguimos haciendo uso de Media Queries CSS3.

Por otro lado tenemos los Frameworks JavaScript orientados exclusivamente para el desarrollo de aplicaciones y sitios web para móvil. Hoy hablaremos de uno de los más útiles, prácticos y que conlleva menor esfuerzo en el desarrollo de aplicaciones web:

¿Qué es jQuery Mobile?

Es un framework de Javascript basado en jQuery y jQuery UI, para el desarrollo de aplicaciones web y de escritorio (nativas) en dispositivos móviles. Soportando una amplia variedad de dispositivos.

¿Por qué nos interesa?

• Está basado en jQuery, por lo tanto la curva de aprendizaje será mínima para aquellas personas que hayan utilizado jQuery.
• Compatible con las principales plataformas móviles y de escritorio: iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook y todos los navegadores modernos. Ver todas las plataformas soportadas
• Su peso de (20kb) y el uso mínimo de imágenes en sus componentes.
• Uso de marcado HTML5 en la estructura de las páginas y componentes, utilizando los diferentes atributos para “disparar” automáticamente los Widgets de jQueryMobile. Además podemos aplicar los diferentes comportamientos que trae cada componente sin tener que aplicar ningún script adicional.
• Enfocado tanto a aplicaciones web como a aplicaciones nativas. Combinando jQuery Mobile con PhoneGap.
• Accesibilidad en sus componentes, basados en la especificación WAI-ARIA  y haciendo uso de los ‘roles’.  De tal manera que trabaje con los lectores de pantalla. Accesibilidad en jQuery Mobile
• Proporciona una potente herramientas para crear diferentes temas (themes): ThemeRoller.

¿Cómo lo utilizamos?

jQuery Mobile proporciona un cojunto de widgets de fácil implementación y un sistema de navegación con AJAX para la transición entre páginas. A continuación veremos como crear fácilmente nuestra primera página:

“EL ESQUELETO”

HEAD

Primero agregamos las referencias necesarias a jQuery, jQuery Mobile y el theme básico de CSS. En el siguiente paso agregaremos nuestro propio theme personalizado.

Una vez que hemos terminado de referenciar las librerías necesarias, creamos la estructura de la plantilla principal de la página utilizando HTML5, y luego definimos las areas de contenido (content region) que proporciona jQueryMobile.

Utilizamos el meta viewport, con el que podemos establecer el ancho del dispositivo y definir la escala . Por defecto, lo podemos dejar definido con la constante width=device-width y definir la escala mínima y máxima a 1; initial-scale=1.0 maximum-scale=1.0. Podemos añadir más reglas en el meta viewport, por ejemplo si queremos permitir que el usuario pueda escalar la página.

BODY

En el cuerpo del documento HTML, especificamos la Página (data-role=”page”), la Cabecera (data-role=”header”), el Contenido (data-role=”content”) y el Pié (data-role=”footer”) de la misma, añadiendo los atributos data- HTML5, que utiliza jQuery Mobile para transformarlo en Widgets funcionales y con los estilos del theme utilizado.

<!DOCTYPE html>
<html>
<head>
	<title>Título página</title>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body> 

<!-- Página principal -->
<section data-role="page">

	<header data-role="header">
		<h1>Título</h1>
	</header><!-- /banner -->

	<section data-role="content">
		<p>Hola Mundo</p>
	</section><!-- /content -->

	<footer data-role="footer">
		<p><abbr lang="en" title="Copyright">©</abbr> 2012</p>
	</footer><!-- /footer -->	

</section><!-- /page -->

</body>
</html>

Añadiendo tu propio contenido

Puedes añadir contenido HTML dentro del data-role=”content”, de esta manera usará el estilo del theme asignado.

Si queréis añadir contenido HTML propio, sin que contenga funcionalidad de jQuery Mobile, tendréis que omitir el atributo data-  y utilizar el role adecuado para cada contenido HTML (si no queréis utilizar roles omitir este paso).

<section role="main">
	<p>Hola Mundo</p>
</section><!-- /content -->

• Contenido HTML de jQuery Mobile
• Tipos de Widgets de contenido

Múltiples páginas

Todas las páginas estarán incrustadas en el mismo documento. Como hemos visto anteriormente, cada página del sitio estará representada con el atributo data-role=”page”, también podemos añadirle un título a cada página con el atributo data-title=”Título página 1″.

Por último debemos añadir el atributo id a cada página, de esta manera podemos interactuar con ella, por ejemplo para poder navegar de una página a otra.

<!-- Página principal -->
<section data-role="page" data-title="Página de inicio" id="page1">

	<header data-role="header">
		<h1>Título</h1>
	</header><!-- /banner -->

	<section data-role="content">
		<p>Hola Mundo</p>
	</section><!-- /content -->

	<footer data-role="footer">
		<p><abbr lang="en" title="Copyright">©</abbr> 2012</p>
	</footer><!-- /footer -->	

</section><!-- /page -->

<!-- Segunda página -->
<section data-role="page" data-title="Segunda página" id="page2">

	<header data-role="header">
		<h1>Título</h1>
	</header><!-- /banner -->

	<section data-role="content">
		<p>Hola Mundo</p>
	</section><!-- /content -->

	<footer data-role="footer">
		<p><abbr lang="en" title="Copyright">©</abbr> 2012</p>
	</footer><!-- /footer -->	

</section><!-- /page -->

Ver Múltiples páginas en jQuery Mobile

Navegación entre páginas

La navegación es muy sencilla, solo tenemos que poner en el ‘href’ del enlace el ‘id’ de la página destino.  El  código HTML quedaría de la siguiente forma:

<a href="#page2" data-role="button">Ir a la página 2</a>

Podemos especificar el tipo de transición con el atributo data-transition, la transición por defecto es slide pero existen varios tipos de transiciones jQuery Mobile.

Las que podemos usar en la versión actual de jQuery Mobile son las siguientes

• slide
• slideup
• slidedown
• pop
• fade
• flip

También puedes definir la dirección de la transición con el atributo data-direction, por ejemplo: data-direction=”reverse” para invertir la dirección.

Themes jQuery Mobile

Podemos crear nuestros propios themes de forma sencilla y rápida con el ThemeRoller que nos ofrece jQueryMobile. Una de las principales características de esta herramienta, es la multitud de themes que podemos crear y asignar cada componente que usemos en nuestra aplicación.

Cada theme o tema tiene asignado una letra, con la que podemos identificar el theme y aplicarlo a cualquier componente que queramos, usando el atributo data-theme. Veamos un sencillo ejemplo:

<!-- Página principal -->
<section data-role="page" data-title="Página de inicio"
data-theme="b" id="page1">

En la documentación oficial podemos ver más sobre el uso de themes en jQuery Mobile y las opciones posibles para cada uno de los componentes.

Debemos tener en cuenta que jQuery Mobile genera clases para cada uno de sus componentes usando el prefijo ui-.

Formularios

Los componentes de formulario de jQuery Mobile, nos aportan multitud de funciones ya definidas y diferentes tipos de elementos propios. Todos los formularios deben estar dentro de la etiqueta form y con el action y method asignados para procesar la información en servidor:

<form action="form.php" method="post"> ... </form>

Existen varios tipos de controles, que son mas que suficientes para poder crear formularios complejos. Con galería de elementos de formularios jQuery Mobile podemos ver de un vistazo todos los elementos y la funcionalidad de cada uno de ellos.

También nos da la opción de crear un formulario con una versión mini de sus controles, útil para formularios extensos o para aprovechar espacio en la pantalla del dispositivo. Para ello debemos añadir el atributo data-mini=”true” en el controlgroup:

<form action="form.php" method="post" id="form">
	<div data-role="fieldcontain">
		<fieldset data-role="controlgroup" data-mini="true">
			<legend>Opciones:</legend>
			<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
			<label for="radio-choice-1">Opción 1</label>
			<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
			<label for="radio-choice-2">Opción 2</label>
		</fieldset>
	</div>
</form>

Accesibilidad en formularios

Si se requiere ocultar la etiqueta label por motivos de accesibilidad y que los lectores de pantalla puedan leerla, podemos ayudarnos de la clase ui-hidden-accessible y añadir el atributo placeholder para usar el elemento de formulario como label:

<label for="nombreusuario" class="ui-hidden-accessible">Usuario:</label>
<input type="text" name="nombreusuario" id="nombreusuario" value="" placeholder="Usuario" />

Si tenemos un contenedor de jQuery Mobile para controles de formularios le asignamos la clase al propio contenedor:

<div data-role="fieldcontain" class="ui-hide-label">
	<label for="nombreusuario">Usuario:</label>
	<input type="text" name="nombreusuario" id="nombreusuario" value="" placeholder="Usuario" />
</div>

Ambos ejemplos se verían de la siguiente forma:

Nota: Si necesitamos deshabilitar ciertos elementos del formulario, usaremos el atributo disabled. En el caso de que necesitemos aplicar el estilo disabled a un elemento que no sea un control de formulario, podemos utilizar la clase ui-disabled sobre el elemento.

Conluyendo

Hemos analizado de forma rápida las nociones básicas que debemos saber de jQuery Mobile y  sus principales componentes, podéis ver la información técnica más detallada en la documentación oficial.

Para concluir os dejo una Guía de referencia de jQuery Mobile

Drupal es uno de los CMS más utilizados junto con WordPress y Joomla, según las estadísticas de Google, podríamos situarlo en tercera posición. Al igual que sus competidores, es gratuito y basado en php.

“Druplicon”, una gota con el detalle del símbolo de infinito

De primeras, Drupal es más difícil de manejar que los otros CMS citados, pero también nos ofrece mucha más potencia a la hora de desarrollar una web avanzada. Se puede decir que Drupal es apto para cualquier tipo de web, pero no para cualquier usuario. Así que para manejarnos con este CMS, tendremos que tener unas nociones de administración de usuarios, permisos, roles, nodos, bloques, menús, etc …

Estadísticas Google Trends

Drupal se ha caracterizado por su ligereza y optimización de código, aunque en las últimas versiones, el CMS está “engordando” considerablemente, en la versión 5.x el paquete pesaba unos 750 Kb, mientras que en la versión 7.x ya se superaron los 2mb. Según sus desarrolladores, este aumento de peso es debido a muchas mejoras, sobre todo, en la usabilidad del sistema.

¿Qué webs usan Drupal?

Webs como amnesty.org, whitehouse.gov, java.net o motogp.com utilizan Drupal, esto nos demuestra que las capacidades de este gestor son enormes.

Aquí podemos ver un listado más amplio de sitios hechos con Drupal.

Un poco de historia

Dries Buytaert, el “culpable” de todo esto.

En el año 2000, Dries Buytaert empezó a trabajar en un pequeño sitio de noticias, para permitir a sus compañeros de universidad dejarse notas y compartir archivos.

Dries pensó en añadir un nombre a su script, y en un principio lo llamó “Drop”, adquiriendo el dominio “drop.org”. Dorp es la palabra holandesa para “aldea o pueblo”, la cual fue considerada la palabra que se ajustaba a la pequeña comunidad.

Una vez establecido drop.org en la web, la web comenzó a ganar visitas y actividad, añadiendo características nuevas, como moderación, sindicación y autenticación distribuida, poco a poco los usuarios iban haciendo el script más potente.

Fue ya en enero de 2001, cuando Dries decidió liberar el software drop.org con el nombre de Drupal. El propósito era permitir a otros usar y extender la plataforma de experimentación para que más personas pudieran explorar nuevos caminos para el desarrollo.

El nombre Drupal, pronunciada “droo-puhl”, deriva de la pronunciación en inglés de la palabra holandesa “druppel”, que significa “gota”.

¿Cuáles han sido las claves del éxito?

• Código abierto y gratuito.
• Alta modularidad y escalabilidad.
• Miles de módulos disponibles (más de 15.000)
• Bajos requerimientos técnicos.
• Apto para cualquier tipo de web (flexibilidad y adaptabilidad)
• Amplia y activa comunidad de desarrollo.

Empezando con drupal.

Lo primero de todo, es conocer los requerimientos mínimos para instalar este CMS en su última versión:

• PHP Versión: 5.2 o superior
• Base de datos: MySQL 5.0.15 o PostgreSQL 8.3, también es compatible con Oracle, SQLite y Microsoft SQL Server
• PHP Memoria: 40 MB – 64 MB

Como veis, unos requisitos bastante asumibles en cualquier servidor. Cumplida esta parte, sólo nos queda ir a la página oficial donde podremos encontrar todas las descargas y soporte necesario.

Maquetación de plantillas en Drupal.

Respecto al apartado que interesa a los desarrolladores Frontend, Drupal también es un poco más complejo de personalizar que sus homólogos Joomla y WordPress.

Tenemos multitud de plantillas gratuitas para Drupal en la web oficial http://drupal.org/project/themes

Una vez descargada la plantilla, tendremos que extraerla en sites/all/themes/, después, en el panel de administración, nos dirigimos a administer > site building > themes, y pulsamos en activar la plantilla que hemos subido.

Consejos a la hora de maquetar:

• Evitar usar “id” para dar estilo.
• Añadir directamente las clases dentro de la etiqueta.
• El encabezado principal del sitio, debe llevar la id ”site-name”
• El resto de encabezados h1, debe llevar la clase title <h1 id=”page-title” class=”title”>
• Los subencabezados y los títulos de bloque, deberán ser <h2>

Plantillas Drupal.

Estructura típica de una theme Drupal

Las plantillas de drupal deben estar formadas por una serie de archivos que aquí detallamos:

. info (requerido)

En este archivo va toda la información de la plantilla. Es requerido desde la versión 6.x, aquí se especifican los meta datos, hojas de estilo, JavaScripts, los regiones del diseño.

Este es el contenido de un archivo .info:

• name (obligatorio)
• description (recomendado)
• screenshot
• version (descontinuado)
• core  (obligatorio)
• engine (obligatorio en la mayoría de casos)
• base theme
• regions
• features
• stylesheets
• scripts
• php

.tpl.php

Los archivos con esta extensión, son las plantillas donde podemos escribir nuestro código xhtml y insertar variables php.

template.php

En este archivo, vamos a introducir las funciones, condicionales que necesitaremos en nuestro sitio.

Espero más adelante poder elaborar un pequeño tutorial de maquetación para Drupal y poder entrar más en detalle en el desarrollo de plantillas para este gran CMS.

Enlaces

Web oficial
Drupal Hispano

La situación ha cambiado radicalmente desde que los buscadores más importantes presentaron schema.org, para recomendar y alentar el uso de formatos enriquecidos. Incluso su utilización condiciona la visualización de los resultados de búsqueda sobretodo para búsquedas relacionadas con opiniones, eventos, recetas y otros tantos.

Quizá los microformatos sea considerados por muchos como el método más sencillo para semantizar textos, por ello hemos percibido un aumento de su utilización. Esto hace aún más necesario recordar sus ventajas, sus inconvenientes y dar algunos consejos para que tendrémos que tener en cuenta cuando los utilicemos.

Recordamos que los microformatos son trozos de código HTML que utilizan clases, normalmente en etiquetas div y span, para enriquecer y semantizar contenido. De esta manera mediante un marcado estandarizado, lograremos crear contenidos rico semánticamente para que las máquinas puedan entenderlo. La página oficial de los microformatos es: microformats.org

Ventajas

• Son fáciles de utilizar y tienen una amplia implementación.
• Son una de las mejores soluciones para adoptar de forma completa el desarrollo según estándares y marcado semántico.
• Tienen una gran modularidad, además su simplicidad aumenta la probabilidad de que el software aproveche su presencia en las páginas web.
• Tienen aplicación inmediata y solucionan problemas concretos.
• Permiten la adaptación a XHTML de RDFs existentes.
• Cualquiera puede proponer un microformato y someterlo a la revisión de la comunidad de modo que siempre se impondrán los más útiles.
• Para adoptarlos no es necesario realizar grandes modificaciones a nuestras páginas, tan solo hay que agregar nuevos atributos a las etiquetas ya existentes.
• No es necesario contar con ninguna herramienta especializada para utilizarlos.
• Siguiendo la idea ya introducida por Yahoo! Search Monkey, actualmente Google muestra resultados enriquecidos basados en microformatos, mostrando algunos resultados con información ampliada.

Desventajas

• Microformas.org es una iniciativa “independiente”, adoptada por muchos desarrolladores, pero no forma parte de la propuesta W3C para Web Semántica.
• Tienen un vocabulario reducido.
• Existen muchos microformatos “moribundos” que puedes estar utilizando sin saberlo.
• Al ser un vocabulario aprobado por la comunidad, no puede ser modificado de manera anónima por desarrolladores independientes.
• Su aplicación todavía es muy genérica y acotada a casos muy concretos.
• Quizás algunas nomenclaturas no sean lo suficientemente descriptivas, lo que podría provocar confusiones y errores en algunos programadores no familiarizados con su utilización.

Consejos

• Es importante utilizar los microformatos con sentido común, tenemos que entender que todavía se ajustan a casos muy concretos. Debemos usarlos cuando sean realmente necesarios.
• El contenido oculto mediante hoja de estilo o JavaScript, no será mostrado por el buscador.
• Cuando utilices el microformato de críticas (hReview), las puntuaciones que debemos pasar al microformato deben de ir de 1(Mala) a 5 (Muy Buena). El sistema de puntuación de tu página se deberá ajustar a ese criterio.
• Estate siempre atento a schema.org, porque cada vez se van adoptando más y más convenciones de marcado semántico.
• Google ha puesto a disposición de los desarrolladores la Rich Snippets Testing Tool donde podremos testear nuestros fragmentos enriquecidos y nos mostrarán el aspecto que estos tendrán en los SERPs.
• Algunos de los microformatos más utilizados como el hCard o hproduct, todavía no generan una vista especial en los Resultados de Google.

Actualmente la información semántica puede aparecer en la web de las siguientes formas:

• Ficheros RDF
• Meta etiquetas
• Utilizando vínculos relacionales
• Etiquetas HTML semánticas
• Microformatos
• Microdatos

Dejando de lado algunas etiquetas muy concretas HTML4 y el uso de metadatos en la cabecera de los documentos HTML, el primer paso firme para la adopción de textos enriquecidos fueron los eRDF (estándar para XHTML 1.0) y los RDFa (para XHTML1.1). Estas semánticas las explicaremos con más detalle en este artículo.

Texto enriquecido mediante RDF (Resource Description Framework)

Se trata de es un framework para metadatos recomendado por la W3C en 1999. Bajo una sintaxis XML, está pensado para dar semántica a la información y generar metadatos sobre dicha información. Esto permite que los datos puedan ser integrados y reutilizados.

RDF constituye una tecnología fundamental dentro de la Web Semántica, cuyo funcionamiento se resume en una conversión de recursos de la Web en expresiones compuestas que se estructuran en tres partes:

• Lo que se describe.
• La propiedad del recurso que se desea definir.
• El valor de la propiedad con el que se define la relación.

Ejemplo de RDF

La frase: “La semántica y la web 3.0 – Parte 1, está escrito por Jorge López en el blog círculo de maquetadores”, se representa en RDF de esta manera:

<rdf:RDF>
  <rdf:Description about="http://www.circulodemaquetadores.com/semantica-RDF-RDFa">
  <s:Creator>Jorge López</s:Creator>
  <dc:title> La semántica y la web 3.0 - Parte 1</dc:title>
  <dc:publisher>Cículo de maquetadores</dc:publisher>
  </rdf:Description>
</rdf:RDF>

El resto de información y gramáticas formales sobre RDF la podrás encontrar en la correspondiente especificación de la W3C.

RDFa (Resource Description Framework-in-attributes)

Se trata de extensiones específicas de XHTML 1.1, (a la espera de su implementación en HTML 5) propuestas por W3C. Este método enriquece los textos a través de los atributos y anotaciones de las etiquetas XHTML invisibles para el usuario. Se validan mediante la DTD – Document Type Definition- XHTML1.1+RDFa. Aunque todo esto parezca muy complicado, en realidad de lo que se trata de extender el manejo de los atributos “rel”, “content” y “property“.

Para estandarizar su uso utilizaremos diccionarios predefinidos como Dublin Core. Para indicar en RDFa que estamos utilizando un diccionario, lo haremos de la siguiente manera:

<body>
  <div class="articulo">
    <h2> Como semantizar textos - Parte 1 </h2>
    <p>Texto del artículo.</p>
    <p>Autor: <span property="dc:author" content="Jorge lópez"> Jorge lópez </span></p>
    <p>Fecha: <span property="dc:date" content="2011-12-14">14 de diciembre de 2011</span></p>
  </div>
</body>

En el diccionario Dublin Core vienen especificados los términos author y date. Para buscar otros términos solo tendremos que buscarlos en el diccionario.

Como vemos la ventaja de RDFa es que sus reglas son genéricas, lo que facilitará la labor de muchos autores. Las páginas que no contienen RDFa se visualizan igual que las que tienen, ya que de lo que se trata es de aportar riqueza semántica a la información, no de cambiar ni el contenido ni de la disposición de los elementos.

Nuevamente, la mejor manera de completar la información sobre RDFa es hacer referencia al borrador de trabajo sobre RDFa de la W3C. El blog para webmasters de google también recomienda utilizar marcado RDFa para mejorar los resultados y además proporciona algunos ejemplos.

eRDF (Embedded RDF)

El formato eRDF fue creado en 2005 por Ian Davis inspirado por los microformatos. Se trata de una sintaxis para extraer la información del documento ya sea por medio de un Parser o una Hoja de estilos XSLT. eRDF solo está parcialmente apoyado por la W3C.

Para que un documento HTML le sea reconocido la existencia de eRDF se debe declarar la adhesión a un perfil especial. Esto se logra sumando el atributo profile en el head del documento:

<head profile="http://purl.org/NET/erdf/profile">

Toda la información sobre eRDF en el blog de Ian Davis.

Repasemos algunos atributos básicos de los enlaces. Como veremos, algunos de ellos ya aportan información extra sobre el contenido enlazado:

Definiciones de atributos

• href: Especifica la localización de un recurso de la Web. La ruta generada podrá ser absoluta o relativa respecto a la web.
• hreflang: Ester atributo sólo puede utilizarse junto con href, porque especifica el idioma del recurso enlazado.
• title: Añade información sobre un vínculo. Esta información puede ser utilizada de manera opcional por los agentes de usuario o dependiendo de la versión de navegador, puede ser representada mediante un tool-tip.
• name: Asigna un nombre a un enlace de modo que éste pueda actuar como destino de otro vínculo a modo de ancla.
• type: Especifica qué tipo de contenido es el contenido enlazado con href. Por ejemplo, podemos especificar que lo que enlazamos es un documento PDF. Si es un tipo de contenido no soportado por los agentes de usuario, pueden optar por no mostrarlo. En este artículo repasamos algunos de los tipos de contenido registrados.
• charset: Este atributo especifica la codificación de caracteres de la página o recurso enlazado con el atributo href.

Para enriquecer semánticamente los enlaces, los atributos más interesantes y puede que más útiles son rev y rel. Ahora veremos su función y sus valores.

Atributos rev y rel

• rel: Permite definir la relación entre la página actual y la enlazada.
• rev: Define la relación que tendrá la página enlazada con la actual.

Valores de los atributos de rev y rel

• alternate: Indica que es una versión alternativa al documento actual. Cuando se utiliza conjuntamente con el atributo “hreflang”, significa que enlaza a una versión traducida del documento. Si es utilizada con el atributo “media”, implica que esa versión está preparada para un medio diferente (como una impresora)
• stylesheet: Indica que se ha enlazado una hoja de estilos externa. Se puede utilizar junto con “Alternate” para ofrecer hojas de estilo alternativas seleccionables por el usuario.
• start: Indica a los motores de búsqueda que el documento actual es considerado por el autor como el punto de inicio de un conjunto de documentos. Por ejemplo la primera página de una paginación o el primer capítulo de un manual…etc.
• next – prev: Indica que es el documento que enlazados es anterior o siguiente al actual dentro de una secuencia lógica de documentos. En una paginación estos valores pueden sernos muy útiles.
• index: Es el documento que hace la función de índice en una secuencia de documentos.
• copyright: Se refiere al aviso de copyright del documento actual.
• help: Se refiere a un documento que ofrece ayuda (más información, vínculos a otros recursos informativos, etc.)

La especificación oficial de HTML define la lista completa de tipos de relaciones que se pueden utilizar.

Como microformatos

Se han creado varios microformatos para ser utilizados como valor de estos atributos. Algunos de estos microformatos son tan útiles y se han hecho tan populares que incluso han sido recomendados por google para no ser penalizados, a continuación veremos unos pocas aplicaciones:

• nofollow: Sin duda es el más popular de todos. Fue propuesto por algunos buscadores para indicar qué enlace no debe ser considerado por los algoritmos de posicionamiento y de este modo para luchar más eficazmente contra los spammers. Su aplicación más común, es para aplicarlo a respuestas y comentarios en blogs. Enlace a documentación.
• license: Indicar el tipo de licencia que tiene el contenido. Lo podemos utilizar para indicar que el destino del enlace es la licencia del contenido de la página actual. Enlace a documentación
• tag: sirve para agregar etiquetas en los post de los blogs. Así podrá categorizar nuestras webs mediante la adopción de este tipo de etiquetas. Enlace a documentación

Con Umbraco se pueden construir desde sitios pequeños (páginas personales, blogs) hasta crear sitios avanzados, portales, proyectos para grandes empresas. De hecho, grandes compañías ya han apostado por este gestor, algunas de renombre como Toyota, Sandisk, Microsoft, Peugeot, Vogue …, veamos que nos puede ofrecer este CMS.

Un poco de historia

Aunque muchos lo hayamos conocido hace poco, Umbraco no es nuevo; fue desarrollado por Niels Hartvig en el año 2000 y fue liberado como software open source en 2004, por lo que Umbraco se convierte en un CMS gratuito con un gran potencial. Está construído sobre Microsoft .NET Framework, sí, Microsoft y OpenSource parece que se están haciendo buenos amigos.

De Umbraco se puede destacar la sencillez y fácilidad de manejo, permite usar los controles de usuario .NET que hayas desarrollado con Visual Studio sin necesidad de realizar cambios de código, o bien utilizar controles personalizados comerciales. Soporta la mayoría de los lenguajes de la red y, por supuesto, todo lo referido a Ajax; aunque está escrito en C#, permite utilizar cualquier lenguaje compatible con .NET como VB.NET, IronPython, IronRuby, e incluso lenguajes “funky” como LOLCODE.

Maquetación de plantillas en Umbraco

Los maquetadores estamos de suerte, ya que incluye un compacto motor de plantillas, que permite editar y rediseñar plantillas existentes o bien, crear nuestro propioHTML y CSS sin restricciones, con un código limpio y accesible.

En la web oficial, nos ofrecen un una plantilla base, como punto de partida a nuestro diseño, utilizando el framework css 960 e incluyendo algunos propiedades de css3.

También dispone de una comunidad donde plantear nuestras dudas de maquetación

Después de trabajar con Umbraco, podemos afirmar que es unos de los gestores más flexibles a la hora de maquetar.

Enlaces de interés

• Web oficial
• Comunidad oficial
• Umbraco españa
• Umbraco colombia