Introducción a Responsive Web Design

Responsive Web Design o, Diseño Web Sensible en la lengua de Cervantes, hace referencia a una metodología de diseño y desarrollo web en la que con una única versión de nuestro website abarcamos cualquier dispositivo donde podrá mostrarse sin tener que hacer versiones paralelas del mismo dependiendo del dispositivo en el que se vaya a visualizar tal y como pasaba hasta ahora.

Antes solíamos redirigir el tráfico de nuestro sitio en función del dispositivo de visualización, con esta metodología no será necesario hacer esto más ya que haremos todo ese trabajo utilizando propiedades CSS3.

El precursor de esta metodología es Ethan Marcotte, diseñador y desarrollador web con dilatada experiencia en este campo y colaborador habitual del blog A list apart entre otros.

No son pocas las ventajas que nos brinda el responsive web design, para empezar nos ahorramos desarrollar y mantener otro sitio para dispositivos móviles y tampoco será necesario hacer sniffing del user agent, técnica totalmente desaconsejada porque es relativamente fácil dejarse dispositivos y/o versiones de navegador por fuera y que luego nuestra web no se visualize correctamente si se producen cambios de versión o aparece un navegador nuevo.

Esta metodología se apoya básicamente en estos tres pilares:
- Fluid grids. Se usan porcentajes para las medidas de los contenedores en el layout, esto hace que nuestro diseño se vaya adaptando estirándose o encogiéndose según el tamaño de la ventana del navegador.
- Imágenes flexibles. Esta técnica se basa en utilizar porcentajes en vez de pixeles para determinar las medidas de las imágenes, de esta manera se consigue que estas escalen dependiendo del tamaño de su contenedor
- Media queries. Son introducidos en el estándar CSS3 y sirven para filtrar selectores css dependiendo de determinadas condiciones, en este caso ancho de la pantalla del dispositivo y/o ventana del navegador.
Para ilustrar todo esto vamos a definir una página sencilla que se adapte correctamente a diferentes tamaños de pantalla. La página contará con una cabecera, menú superior, contenido principal, lateral y pie. Su código html es este:
```
<!DOCTYPE html>
	<html lang="es">
	  <head>
	    <meta charset="utf-8">
	    <title>Responsive Design Test</title>
	    <link href="styles.css" rel="stylesheet">
	  </head>
	  <body>
	    <header>
	      <h1>Responsive Web Design</h1>
	    </header>
	    <nav>
	      <ul>
	        <li><a href="#">Inicio</a></li>
	        <li><a href="#">Sobre nosotros</a></li>
	        <li><a href="#">Qué hacemos</a></li>
	        <li><a href="#">Contacto</a></li>
	      </ul>
	    </nav>
	    <div id="content">
	      <article>
	        <h1>Proin eu arcu</h1>
	        <img src="image.png" alt="" />
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat auctor pretium. Curabitur eget lectus vitae leo dignissim sodales. Vivamus sit amet dui nunc. Duis dapibus ante ac dolor sodales malesuada. Nam varius nibh non lorem bibendum ut fringilla elit tincidunt. Suspendisse quis pellentesque leo. Duis dapibus ante ac dolor sodales malesuada.</p>
	        <p><a href="#">Ver más</a></p>
	      </article>
	      <article>
	        <h1>Ultricies ante</h1>
	        <img src="image.png" alt="" />
	        <p>Praesent pellentesque sem vel nulla lacinia in dignissim augue consequat. Suspendisse potenti. Sed non justo suscipit purus dapibus condimentum. Ut mi mauris, primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce auctor ante ut ante cursus mollis. Donec porttitor scelerisque tortor fringilla sodales. Pellentesque vel sem massa. Duis eget est vel leo sodales tristique nec at tortor.</p>
	        <p><a href="#">Ver más</a></p>
	      </article>
	    </div>
	    <aside>
	      <h1>Contenido relacionado</h1>
	      <ul>
	        <li><a href="#">Maecenas iaculis tempus</a></li>
	        <li><a href="#">Vestibulum quis justo eros</a></li>
	        <li><a href="#">Nullam ullamcorper vulputate</a></li>
	      </ul>
	    </aside>
	    <footer>
	      <p>© Sit amet consectetur nunc condimentum 2012</p>
	    </footer>
	  </body>
	</html>
```
Y su css este:
```
html {
	background-color: #ccc;
}
body {
	width: 960px;
	margin: 0 auto;
	background-color: #fff;
}
header {
	margin-top: 10px;
	padding: 0 10px 5px 10px;
	font-size: 32px;
	color: #fff;
	background-color: #01477b;
}
header > h1 {
	margin: 0;
}
nav {
	background-color: #0d7cb4; 
}
nav ul {
	margin: 0;
	padding: 0;
}
nav li {
	margin: 3px 10px;
	display: inline-block;
}
nav li:first-child {
	margin-top: 0;
}
nav li:last-child {
	margin-bottom: 0;
}
nav a {
	color: #fff;
	font-size: 26px;
	text-decoration: none;
}
nav a:hover {
	text-decoration: underline;
}
#content {
	float: left;
	width: 70%;
	padding: 0 10px;
	background-color: #fafafa;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}
article {
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
}
article h1 {
	margin: 0 0 10px 0;
	font-size: 22px;
}
article img {
	float: left;
	margin: 10px 20px 10px 0;
}
article a, aside a {
	color: #000;
	text-decoration: none;
}
article a:hover, aside a:hover {
	text-decoration: underline;
}
aside {
	float: right;
	width: 28%;
	padding: 10px;
	background-color: #edf2f6;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}
aside h1 {
	margin: 0;
}
aside ul {
	margin: 0;
	padding: 0 0 0 20px;
}
aside li {
	margin-top: 10px;
}
footer {
	clear: both;
	padding: 4px 10px;
	font-size: 18px;
	color: #fff;
	background-color: #000;
}
footer p {
	margin: 0;
}
```
La página resultante se ve así a 1024px o más:

El primer paso para adaptarla a responsive web design consistirá en añadir el siguiente meta en el <head> de la misma:
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Con este meta le decimos al navegador de los móviles que se fíe de nosotros y no adapte la web al tamaño de su pantalla escalándola según su criterio.

A continuación añadimos el siguiente selector a nuestra css:
```
html {
	-webkit-text-size-adjust: none;
}
```
Con este selector le decimos a los dispositivos iOs que no ajusten automáticamente el tamaño de las tipografías y hagan caso al tamaño especificado en la css.

A continuación insertamos un media query para un ancho máximo de 940px. Estamos especificando un “max-width” que afecta al ancho de la ventana del navegador y un “max-device-width” que afecta al ancho de la pantalla del dispositivo, así nos curamos en salud y siempre que se cumpla una de estas condiciones se aplicarán los selectores definidos en el filtro.
```
@media only screen and (max-width: 940px), only screen and (max-device-width: 940px) {
	body {
		width: 100%;
	}
	header {
		font-size: 1.5em;
	}
	article img {
		width: 37%;
	}
	aside h1 {
		font-size: 1.2em;
	}
}
```
Con estos selectores le proporcionamos un comportamiento fluido a la página para cuando se visualice entre 940px y 481px. El resultado sería así:

Ahora insertamos otro media query para 480px, el tamaño estándar a día de hoy de los teléfonos android.
```
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
	header {
		margin-top: 0;
		font-size: 1.2em;
	}
	header h1 {
		text-align: center;
	}
	nav li {
		display: block;
		text-align: center;
		padding: 5px 0;
		border-bottom: 1px solid #fff;
	}
	nav li:last-child {
		border-bottom: none;
	}
	#content, aside {
		float: none;
		width: auto;
	}
	article img {
		margin-right: 10px;
		margin-bottom: 5px;
		width: 96px;
	}
	article a {
		display: inline-block;
		padding: 0 5px;
		text-align: center;
		font-size: 1.2em;
		color: #fff;
		background-color: #0d7cb4;
	}
	aside h1 {
		font-size: 2em;
	}
	aside li {
		padding: 10px 0;
		font-size: 1.2em;
	}
}
```
Como aquí contamos con una pantalla de dimensiones reducidas hacemos que las opciones de menú ocupen todo el ancho disponible y cambiamos la ubicación del lateral derecho para colocarlo debajo del contenido principal. También hemos cambiado el aspecto de los enlaces de “Ver más” para que parezcan botones y se aprecien mejor en las pantallas de los móviles.

Así queda la página vista desde un teléfono con Android:

Si queremos ver este código en vivo podemos hacer clic aquí y probamos a escalar la ventana del navegador para apreciar el comportamiento de la página según el tamaño de la ventana.

Si deseamos verla desde el móvil utilizaremos el código QR mostrado debajo:

No es necesario que empecemos a crear una página desde cero, en la actualidad contamos con varios frameworks que nos serán de gran ayuda a la hora de aplicar esta técnica. Los más destacados son:
En este enlace tenemos más frameworks de este tipo.

Podemos descargarnos el código html5+css3 de la página de ejemplo en este enlace.

Si este post ha servido para abrir nuestro apetito por esta novedosa metodología de desarrollo web, recomiendo entonces la lectura del libro “Responsive Web Design”, escrito por el mismísimo Ethan Marcotte.
La Universidad de Alcalá impartirá nuestro curso HTML5+CSS3

Nuestro curso HTML5 y CSS3 se impartirá dentro del plan de estudios de la Universidad de Alcalá de Henares a partir del mes de Marzo.

Extrema Sistemas y la UAH han llegado a un acuerdo mediante el cual se incluirá el curso HTML5 y CSS3 dentro del plan de estudios de la Universidad.

El curso formará parte de la oferta académica que tiene la universidad dentro de la modalidad de “Títulos Propios de la Universidad de Alcalá de Henares”. A partir del mes de Marzo habrá un estudio denominado “Formación en HTML5 y CSS3”.

El contenido del curso será proporcionado y actualizado constantemente por Extrema Sistemas e impartido por profesores de la UAH.

Los estudiantes de Ingeniería Superior en Informática de la UAH obtendrán 3 créditos en su currículo formativo por el estudio del curso.Estamos muy orgullosos de que nuestro curso esté empezando a ser valorado por varias entidades universitarias e incluido dentro del plan formativo de los alumnos.

Extrema Sistemas imparte desde hace ya dos años, de forma pública e in-house el curso HTML5 y CSS3, que está orientado a maquetadores de HTML y desarrolladores de código servidor (java, .NET, etc.) de capa web.

El curso tiene una duración de 24 horas e incluye 12 horas de ejercicios prácticos con múltiples herramientas, locales y remotas.

HTML5 y CSS3 presenta las mejores prácticas de desarrollo web desde una perspectiva de usabilidad y accesibilidad, con vistas a producir código más ligero y eficiente en la capa de presentación.

A lo largo del mismo se tratan las nuevas técnicas de desarrollo web basadas en los nuevos estándares del W3C, y al mismo tiempo se repasan las herramientas online para realizar desarrollos soportados en todos los navegadores.

Para conocer todas las convocatorias públicas del curso de HTML5 y CSS3 échale un vistazo a http://extrema-sistemas.com/es/formacion/html5-y-css3

Si estás interesado en contratar este curso en modalidad in-house para que se imparta en las instalaciones de tu empresa ponte en contacto con el Departamento de Formación a la dirección: training@extrema-sistemas.com
Codemotion: ¡Alguien la va a liar parda en Madrid!
Sigue Codemotion
- Twitter
- Linkedin
Colaboradores
Estamos seguros de que ya te ha llegado la noticia: el evento tecnológico más grande de Italia, se celebrará por primera vez en Madrid el próximo 24 de Marzo en la Escuela Universitaria de Informática de la UPM.

Os resumimos los aspectos más importantes, ¡para animarte a ir!

Codemotion: ¡código y emoción en movimiento!

Codemotion es un evento organizado por las comunidades, para las comunidades.

Este evento es una oportunidad única para mezclar en un mismo recinto comunidades como Java, Rails, JavaScript o Agile. Si estás esperando para conocer alguna tecnología que te saque de tu zona de confort, ¡éste puede ser tu día y Codemotion puede ser tu excusa!

En Extrema Sistemas, como partner certificado de SpringSource en Expaña e Italia tuvimos la oportunidad de patrocinar el Codemotion de Roma del año pasado. La experiencia fue tan increíble que, llenos de ilusión, no tuvimos ninguna duda en proponer la misma idea a las comunidades tecnológicas españolas. ¡Su respuesta ha sido un verdadero éxito! De hecho, ¡19 comunidades están ahora coorganizando el Codemotion de Madrid!

Este evento es único porque por primera vez reunirá en España a técnicos, desarrolladores y estudiantes de todas las comunidades y lenguajes.

Hay un call for papers público (que estará abierto hasta el 1 de Febrero así que si tienes algo interesante que contar, ¡envía tu propuesta ya!) donde las propuestas son recibidas y evaluadas por las propias comunidades. Estas confeccionarán el programa del evento con las charlas elegidas.

Codemotion tiene un precio de entrada de sólo 10 euros que incluye cafés, comida pero sobre todo la posibilidad de un ¡networking increíble! La inscripción oficial se abrirá a mediados de Febrero pero mientras tanto ve preinscribiéndote sin gasto alguno. ¡Esto ayudará a conocer el número de asistentes, su perfil técnico y a organizar mejor el evento!

Otro punto de innovación del Codemotion es el recruiting: cada asistente podrá dejar su CV a las empresas patrocinadoras, en el buzón que cada una de ella tendrá en su stand. Vista la situación laboral tan difícil que tenemos, ¿no te parece una muy buena idea?

¡Y no dura sólo un día! Durante toda la semana anterior las comunidades organizarán eventos locales, talleres, charlas y foros como adelanto del Codemotion. ¡Nos parece la ocasión ideal para profundizar argumentos e ir calentando motores para el evento!

Codemotion es además internacional: en Madrid y Roma el mismo día. Además para que no te pierdas las charlas más interesantes de ambos eventos, habrá streaming en directo con emisión de las charlas de los mejores ponentes internacionales en una sala dedicada.

Puedes apoyar al Codemotion patrocinándolo pero también puedes aportar tu granito de arena pasando la voz, ofreciéndote como voluntario para la organización y publicando un banner en tu web o blog.

Toda la información que necesites está en http://codemotion.es (y si no fuera suficiente, ¡escribe a info@codemotion.es !)

¿No serás el único en perdértelo?
Nuestro curso de HTML5 y CSS3 alcanza la versión 1.0

Hace aproximadamente un año que empezamos a impartir nuestro exitoso curso de html5+css3. Tras escuchar las críticas y mejoras propuestas por nuestros alumnos y trabajar en ellas, podemos, finalmente anunciar la versión 1.0 del mismo.

De las múltiples mejoras y características introducidas resumimos las siguientes:
- schemas.org. Examinamos a fondo el nuevo estándar creado por Google, Microsoft y Yahoo basado en microdata para incorporar semántica a nuestros contenidos. Sobre esto ya habíamos escrito una entrada en este mismo blog, puedes visitarla aquí.
- Slides del curso con iconos indicativos del grado de soporte de las diferentes características según el navegador y su versión.
- Etiquetas html condicionales para seleccionar las diferentes versiones de IE desde la css.
- Multiple image backgrounds, ahora podemos usar más de una imagen de fondo en un mismo elemento html.
- Background size, con esta propiedad podemos ajustar el tamaño de las imágenes de fondo.
- Border image, con esta propiedad es posible usar una imagen para el borde de un contenedor, así podemos simular marcos fotográficos por ejemplo.
- Degradados css3 actualizados para dar soporte a las nuevas versiones de webkit (Chrome y Safari).
- Resize, esta nueva característica nos posibilita redimensionar elementos html como las capas, etc.
- CSS3 Pie nos permite utilizar la mayoría de selectores css3 en IE.
Estas son sólo algunas de las mejoras introducidas en el curso. Si tienes ganas de aprender las mejores y más actualizadas prácticas para usarlas en tus desarollos web deberías inscribirte en el curso. ¡No te arrepentirás!.

PhoneGap o cómo convertir html5 a aplicaciones móviles

¿Qué es PhoneGap?

Recientemente adquirido por Adobe, PhoneGap es una plataforma que nos permite transformar nuestro código html5, css3 y javascript en aplicaciones nativas para móviles. Esto significa que con nuestros conocimientos de tecnologías web estándares podemos hacer aplicaciones para casi todas las plataformas móviles con un mínimo esfuerzo.

Podemos hacerlo de dos maneras diferentes:

Descargando e instalando el kit de desarrollo de PhoneGap en nuestro ordenador
Usando el servicio de compilación en la nube, que es gratuito para proyectos de dominio público sin ánimo de lucro.

En este post nos centraremos en la segunda opción, la más recomendable si no queremos complicarnos la vida con instalaciones de múltiples herramientas o simplemente nos apetece echar un vistazo rápido a este servicio. De las múltiples posibilidades de compilación que nos ofrece PhoneGap nos enfocaremos en la plataforma android por ser la más abierta y extendida.

Creando nuestra aplicación

Vamos a crear una sencilla aplicación que consistirá en mostrarnos un mapa con nuestra posición actual usando las posibilidades de geolocalización de html5. Para ello crearemos un fichero, “index.html”, con el siguiente marcado:

<!doctype html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Test de geolocalización</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
	<header>
		<h1>Test de geolocalización</h1>
	</header>
	<div id="main">
		<h2>Te encuentras aquí:</h2>
		<div id="mapcanvas"></div> <!-- Capa para mostrar el mapa -->
	</div>
</div>
</body>
</html>

A continuación le añadiremos las funcionalidades necesarias usando un poco de javascript, recordemos que éste debe ponerse al final del código html, justo antes de cerrar la etiqueta </body> ya que mientras se cargan estos ficheros .js se bloquea la carga del resto de la página.
El código resultante sería este:

<!-- google maps API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<!-- phonegap API -->
<script src="js/phonegap-1.1.0.js"></script>

<!-- Nuestro código javascript -->
<script>
	// Esperamos que cargue PhoneGap
    //
    document.addEventListener("deviceready", onDeviceReady, false);

	// PhoneGap ready
    //
    function onDeviceReady() {
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }

	// Si todo va bien procedemos a geolocalizar
    //
	function onSuccess(position) {
		var latitude = position.coords.latitude; // Latitud
		var longitude = position.coords.longitude; // Longitud
		var initialLocation = new google.maps.LatLng(latitude, longitude);

		// Usamos google maps para mostrar la posición
		var mapOptions = {
			zoom: 16, 
			center: initialLocation,  // Centramos el mapa en las coordenadas
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		var map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions);  // Creamos el mapa

		var marker = new google.maps.Marker({
			position: initialLocation,
			map: map,
			title: "Estás aquí"
		});
	}

	// Si ha ocurrido un error informamos al usuario
    //
    function onError(error) {
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }
</script>

Básicamente este código javascript hace lo siguiente:

Carga el api de google maps para poder dibujar el mapa.
También el api de phonegap para tener acceso a varias funcionalidades del móvil.
Usa el api de geolocalización de html para determinar nuestra posisión.
Pasa la posición del paso anterior a google maps para que dibuje el mapa con nuestra posición.

Uniendo los dos pedazos, html + javascript, tendríamos el código final:

<!doctype html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Test de geolocalización</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
	<header>
		<h1>Test de geolocalización</h1>
	</header>
	<div id="main">
		<h2>Te encuentras aquí:</h2>
		<div id="mapcanvas"></div> <!-- Capa para mostrar el mapa -->
	</div>
</div>

<!-- google maps API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<!-- phonegap API -->
<script src="js/phonegap-1.1.0.js"></script>

<!-- Nuestro código javascript -->
<script>
	// Esperamos que cargue PhoneGap
    //
    document.addEventListener("deviceready", onDeviceReady, false);

	// PhoneGap ready
    //
    function onDeviceReady() {
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }

	// Si todo va bien procedemos a geolocalizar
    //
	function onSuccess(position) {
		var latitude = position.coords.latitude; // Latitud
		var longitude = position.coords.longitude; // Longitud
		var initialLocation = new google.maps.LatLng(latitude, longitude);

		// Usamos google maps para mostrar la posición
		var mapOptions = {
			zoom: 16, 
			center: initialLocation,  // Centramos el mapa en las coordenadas
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		var map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions);  // Creamos el mapa

		var marker = new google.maps.Marker({
			position: initialLocation,
			map: map,
			title: "Estás aquí"
		});
	}

	// Si ha ocurrido un error informamos al usuario
    //
    function onError(error) {
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }
</script>
</body>
</html>

Subiendo a la nube

Para poder subir nuestra aplicación es necesario registrarse gratuitamente en la plataforma siguiendo este enlace. PhoneGap nos enviará un email de confirmación con un enlace para activar la cuenta.

Registro en PhoneGap

Ahora debemos crear un fichero de configuración “config.xml” en el directorio raíz de nuestra aplicación para que phonegap sepa que recursos del dispositivo van a usarse. En este punto debemos añadir los iconos de escritorio que apareceran en el móvil para identificar nuestra aplicación, en el siguiente enlace podemos ver un ejemplo.

Nuestro xml de configuración quedará así:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns		= "http://www.w3.org/ns/widgets"
	xmlns:gap	= "http://phonegap.com/ns/1.0"
	id		= "com.extrema.test"
	version 	= "1.0.0">

	<name>Test de geolocalización</name>

	<description>
		Mi primera app móvil
	</description>

	<author href="http://extrema-sistemas.com"
		email="egonzalez@extrema-sistemas.com">
		Ezequiel González
	</author>

	<gap:platforms>
		<gap:platform name="android" minVersion="2.1" />
		<gap:platform name="webos" />
		<gap:platform name="symbian.wrt" />
		<gap:platform name="blackberry" project="widgets"/>
	</gap:platforms>

	<icon src="appicon.png" gap:role="default" />
	<icon src="icon_72.png" width="96" height="96" />
	<icon src="icon_72.png" width="72" height="72" />
	<icon src="icon_48.png" width="48" height="48" />
	<icon src="icon_36.png" width="36" height="36" />

    <gap:splash src="appcapture.png" />

	<feature name="http://api.phonegap.com/1.0/geolocation"/>
	<feature name="http://api.phonegap.com/1.0/network"/>

</widget>

Ojo con los iconos de escritorio, líneas 26,27,28 y 29. Hemos puesto los iconos a cuatro resoluciones diferentes para cubrir todas las densidades de pantalla posibles en los móviles. En este enlace tenemos más información al respecto.

El splash, línea 31, es la imagen que se muestra mientras carga nuestra aplicación.

Sólo nos falta crear un fichero comprimido .zip con todos los recursos de la aplicación, este fichero será el que subamos después a PhoneGap. En nuestro caso hemos subido este fichero.

Accedemos ahora al website de PhoneGap, una vez logeados seleccionamos la opción “apps” y veremos el popup que se muestra debajo para subir nuestro .zip

Subiendo nuestra aplicación

Una vez se haya subido el .zip veremos un listado con la aplicación, hacemos clic sobre la misma y podremos ver los códigos qr y enlaces de descarga para cada una de las plataformas.

Códigos QR de nuestra aplicación

Lo más cómodo para instalarla suele ser capturar el código QR, en el android market hay bastantes aplicaciones para esto y casi todas gratuitas, y nuestra aplicación se descargará automáticamente.

Instalación de la aplicación en el móvil

Vista de la aplicación en el drawer una vez instalada:

Icono de la aplicación en el drawer

Y la aplicación funcionando:

Pantallazo de la plicación funcionando

Descargar el .apk

Nuevos horizontes

Este ha sido nuestro particular “Hello World” en el mundo de las aplicaciones móviles usando html5, css3 y javascript. PhoneGap nos ha abierto la puerta a un mundo lleno de posibilidades para investigar según nuestras preferencias y/o necesidades concretas.

Soporte de html5 en navegadores y smartphones

Vamos a realizar unos sencillos tests para comprobar el nivel de soporte html5 que ofrecen los navegadores actuales.

Incluiremos en estas pruebas a los smartphones, ya que desde la aparición en 2007 del iPhone, y un año más tarde de Android, se ha impulsado en gran medida el desarrollo e implantación de html5 + css3 para la creación de páginas y aplicaciones web.

Existen desde hace tiempo varias plataformas dedicadas a convertir nuestro código web en aplicaciones nativas ejecutables por dispositivos android, iOS, Blackberry, Symbian, etc. De las existentes, las más destacables son phonegap, sencha y titanium, aunque ya hablaremos más detenidamente de ellas en otra ocasión.

Los navegadores de escritorio estarán representados por Firefox 7, Chrome 14, Opera 11.5 e Internet Explorer 9 y 8, éste último para poder comparar con un navegador más antiguo. Para los tests en smartphones utilizaremos dos terminales, uno equipado con android 2.3 y otro con iOS 4.2.

Acid3

Acid3 pone a prueba el navegador para comprobar el nivel de soporte que da a los estándares web, principalmente a nivel de DOM y javascript.

En esta prueba se puede observar que es más sencillo desarrollar html5 para smartphones que para navegadores de escritorio, debido a las complicaciones añadidas que tendríamos al hacerlo para IE8.

Html5test

Este test comprueba el nivel de soporte que tiene el navegador con respecto a html5 y sus nuevas funcionalidades

Al igual que en la prueba anterior todos los navegadores excepto IE8 dan una puntuación por encima de 140. Nótese que android se está quedando un poco por detrás del resto de smartphones.

Destacamos de este test la parte dedicada a los formularios. Creo que es relevante ponerlos aquí para ayudarnos a tener una visión general de cómo están soportados a día de hoy.

Destaca Opera por dar, en todas sus versiones, un soporte sobresaliente a los estándares. Caso curioso el IE9, a pesar de tener un buen soporte de javascript y DOM, no es tan bueno con formularios html5.

Si necesitamos observar con más detalle que tipo de controles y atributos en concreto son soportados por cada navegador, podemos echar un vistazo a wufoo.com, uno de los generadores de formularios online más populares. Este website dispone de una página para probar formularios html5 dónde podemos verificar el nivel de soporte a los mismos que tiene nuestro navegador.

Conclusión

A raíz de los resultados y exceptuando IE9 e IE8, para ellos tendríamos que usar pollyfills para cubrir sus carencias con javascript, el resto de navegadores ofrecen ya soporte a la mayoría de características html5 para la elaboración de páginas y/o aplicaciones web, especialmente los smartphones.
Style your forms using JavaScript or CSS

These days we are hacking like crazy in CSS land, trying to introduce in our project some nice memories from our Java background like Not Reinventing The Wheel or avoiding the NIH syndrome. Which brings us to this little nice thought:

I don’t want to style buttons EVER AGAIN.

I simply have some better things to do. Call it “button”, “a.button”, “input[type=submit]”, I don’t care. I just want them to look gorgeous, be as lightweight as possible, and look the same in all browsers. Since it’s 2011, I will get all cocky and also want them to be free.

Since we are at it, let’s take a look at how to style form controls, period.

Style your widgets using JavaScript

Aristo is a great theme for jQuery UI that includes some great styles for everything under the jQuery sun, which includes buttons of several kinds. It’s really great if your needs are not that simple (complex layouts with something clever like sliders or datepickers).

The only problem is that it relies on jQuery to initialize the correct Look & Feel artifacts, which means that during the first access to your web page there are a couple of seconds of my patented YourButtonsLookLikeCrap (tm) effect. There are plenty of workarounds for this, like creating the whole button markup using javascript.

If you need something less heavy there is a project to get Aristo buttons using just CSS, but it’s still too green. Better go with skeleton.

Style your controls using just CSS

Skeleton is an extension over the 960 grid system. They extend the grid concept by adding extra typography and media queries oriented to mobile, and it absolutely excels at providing lightweight form controls. It’s likely that it will not fit perfectly into your own design, but the stylesheet is really easy to understand and you can tune it to your needs. It’s also extremely lightweight, in case that’s a concern.

Style your select controls

You know those huge combo boxes that happen every now and then, when reality hits your application? With Chosen you can replace them transparently:

They have plenty of examples of controls, including ways to provide for your Ajax needs.

I know there must be other exciting tools out there that I am missing. How do you make your forms rock? Please share!

Aside: These be Crazy Months

I just came back from spending my whole summer in Beijing. It was an incredible experience that I am absolutely planning to repeat in February, this time with Shanghai. So far I now just the survival basics like “hello”, “thanks”, “chicken” and “tea”. With that (and smiling a lot) you can survive a whole month and get a grip of the culture, which by the way is quite impressive. I also managed to save some time to learn chinese chess, and I can proudly say that I’m absolutely lame at it.

Now I just got back to Spain! Next month I’ll be at Apache BarCamp Spain with a CSS for non-designers and CSS3 101 talks, hope to see you there to share some beers and plenty of chinese stories.

Originally posted by Ignacio Coloma
Web 3.0 y schema.org

¿Qué es la web 3.0?

Según wikipedia, “Web 3.0 es un neologismo que se utiliza para describir la evolución del uso y la interacción en la red a través de diferentes caminos. Ello incluye […] un movimiento hacia hacer los contenidos accesibles por múltiples aplicaciones non-browser” Web 3.0 es la tendencia de la web gracias al uso de html5 y la web semántica. Si el gran logro de la web 2.0 fue la web social, la posibilidad de conectarse e interactuar gracias a las redes sociales tales como facebook o google+, la web 3.0 nos abrirá las puertas para interactuar con máquinas de manera mucho más natural para los humanos. Un ejemplo de esto podría ser la manera de interactuar con los buscadores, que gracias a estas tecnologías podrán brindar una información mucho más precisa y relevante tal como lo haría una persona. A lo largo del artículo veremos cómo es esto posible.

Un poco de perspectiva

Las páginas web son un conjunto más o menos estructurado de etiquetas o tags, texto e imágenes. Las etiquetas le dan instrucciones a la máquina de cómo mostrar la información, pero no indican nada acerca del significado de la misma, es decir, la máquina no entiende lo que está mostrando al usuario. Esto hace complicado automatizar la indexación correcta de esta información en los buscadores. Desde hace años existen diferentes tecnologías que nos ayudan a resolver este problema de “dar sentido” a la información que mostramos en las páginas web: microformats, microdata y RDFa. El problema de estas tecnologías es que se encuentran diluidas, dado que ninguna de ellas se había convertido en el estándar de facto y que ninguna empresa importante salvo Google y alguna más, habían apostado decididamente por su uso. Éste ha sido, a grandes rasgos, el panorama de la web semántica hasta hace alrededor de dos meses.

¿Qué es schema.org?

El 2 de junio de 2011 se anunció la colaboración entre Bing, Google y Yahoo para crear y dar soporte a un conjunto estándar de “schemas” para añadir datos estructurados las páginas web. Con esta tecnología apoyada en el formato microdata de html5 será posible automatizar muchos procesos como la indexación y categorización de las páginas web, haciendo posibles consultas como “cines en Madrid que proyecten El capitán América a las 18 horas y con entrada a 5 euros”. La magia para que esto funcione consiste en insertar una serie de etiquetas en el código html de la página siguiendo unas sencillas reglas vamos a ver a continuación.

Caso práctico

Imaginemos que tenemos un listado con la cartelera de cines de Madrid, el código html resultante podría quedar así:
```
<h1>Cines en Madrid</h1>
<div class="cine">
	<h2>Cine La Moviola</h2>
	<img src="moviola.jpg" class="photo" alt="" />
	<div class="direccion">Calle Amistad, 2 <br/> 28000 Madrid.</div>
	<p class="gmap"><a href="#">Ver en google maps</a></p>
	<ul class="cartelera">
		<li>
			<h3>Sala 1</h3>
			<h4>El Capitán América</h4>
			<h5>Ciencia ficción</h5>
			<p class="pases">12:00, 16:00, 18:00 y 22:00</p>
		</li>
		.....
	</ul>
	<p class="precio">Entradas a 5 euros de lunes a viernes, fines de semana a 7 euros</p>
</div>
```
Nota: He dejado la lista con un sólo elemento para que el ejemplo sea más fácil de ilustrar.

Paso 1:

Empezaremos por acotar el tema del que estamos hablando, para esto usaremos las etiquetas itemscope e itemtype en la capa contenedora del cine.

Antes:
```
<div class="cine">
		.....
</div>
```
Después:
```
<div itemscope itemtype="http://schema.org/MovieThreater" class="cine">
		.....
</div>
```
Con itemscope estamos acotando el ámbito del artículo al html contenido en la etiqueta <div> </div> y con itemtype especificamos el tipo de elemento del que hablamos, indicando el schema apropiado para los cines. Este schema nos dice el tipo de contenidos con que podemos contar dentro de este div (la información explotable por el search engine). Estas etiquetas se pueden anidar con otras similares según nos sea necesario, como veremos más adelante.

Paso 2:

Una vez hemos indicado que lo que vamos a mostrar es información acerca de un cine, vamos a añadir las propiedades del mismo usando la etiqueta itemprop.

Antes:
```
<h2>Cine La Moviola</h2>
<img src="moviola.jpg" class="photo" alt="" />
<div class="direccion">Calle Amistad, 2 <br/> 28000 Madrid.</div>
```
Después:
```
<h2 itemprop="name">Cine La Moviola</h2>
<img itemprop="image" src="moviola.jpg" class="photo" alt="" />
<div itemprop="address" itescope itemtype="http://schema.org/PostalAddress" class="direccion">
	<span itemprop="streetAddress">Calle Amistad, 2</span><br/>
	<span itemprop="postalCode">28000</span>
	<span itemprop="addressLocality">Madrid</span>.
</div>
```
Hemos especificado el nombre del cine con itemprop=”name”, una imagen del mismo itemprop=”image” y también su dirección postal mediante un schema PostalAddress con sus propiedades, este último anidado dentro del cine.

Paso 3:

A continuación aprovecharemos el enlace a google maps para insertar las etiquetas de geolocalización, con ellas el buscador conocerá la ubicación física del cine y podrá, por ejemplo, filtrar resultados en base a nuestra proximidad al mismo.

Antes:
```
<p class="gmap"><a href="#">Ver en google maps</a></p>
```
Después:
```
<div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates" class="gmap">
	<a href="#">Ver en google maps</a>
	<meta itemprop="latitude" content="40.75" />
	<meta itemprop="longitude" content="73.98" />
</div>
```
Para tal fin hemos usado el schema de GeoCoordinates con sus propias propiedades para longitud y latitud. Esto ha sido otro caso de anidamiento de schemas.

Paso 4:

Ahora nos ocuparemos de la cartelera del cine, para este fin tenemos un schema específico para películas, el itemtype=”http://schema.org/Movie”. Vamos a ver cómo quedaría el código html.

Antes:
```
<ul class="cartelera">
	<li>
		<h3>Sala 1</h3>
		<img src="captamerica.jpg" alt="" /gt;
		<h4>El Capitán América</h4>
		<h5>Ciencia ficción</h5>
		<p class="pases">Pases a las 12:00, 16:00, 18:00 y 22:00 horas</p>
	</li>

	.....

</ul>
```
Después:
```
<ul class="cartelera">
	<li itemscope itemtype="http://schema.org/Movie">
			<h3>Sala 1</h3>
			<img itemprop="image" src="captamerica.jpg" alt="" />
			<h4 itemprop="name">El Capitán América</h4>
			<h5 itemprop=genre"">Ciencia ficción</h5>
			<p class="pases">
				Pases a las
				<meta itemprop="openingHours" content="Mo-Su 12:00-13:30">12:00,
				<meta itemprop="openingHours" content="Mo-Su 16:00-17:30">16:00, 
				<meta itemprop="openingHours" content="Mo-Su 18:00-19:30">18:00 y 
				<meta itemprop="openingHours" content="Mo-Su 22:00-23:30">22:00 horas
			</p>
	</li>

	.....

</ul>
```
Hemos insertado las propiedades image, name, genre y openingHours, este último empleando la etiqueta meta dado que queremos que el buscador registre una información diferente de la que queremos mostrar en pantalla.

Resultado final

El código completo con todos los fragmentos quedaría así:
```
<h1>Cines en Madrid</h1>
<div itemscope itemtype="http://schema.org/MovieTheater" class="cine">
	<h2 itemprop="name">Cine La Moviola</h2>
	<img itemprop="image" src="moviola.jpg" class="photo" alt="" />
	<div itemprop="address" itescope itemtype="http://schema.org/PostalAddress" class="direccion">
		<span itemprop="streetAddress">Calle Amistad, 2</span><br/>
		<span itemprop="postalCode">28000</span>
		<span itemprop="addressLocality">Madrid</span>.
	</div>
	<div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates" class="gmap">
		<a href="#">Ver en google maps</a>
		<meta itemprop="latitude" content="40.75" />
		<meta itemprop="longitude" content="73.98" />
	</div>
	<ul class="cartelera">
		<li itemscope itemtype="http://schema.org/Movie">
			<h3>Sala 1</h3>
			<img itemprop="image" src="captamerica.jpg" alt="" />
			<h4 itemprop="name">El Capitán América</h4>
			<h5 itemprop=genre"">Ciencia ficción</h5>
			<p class="pases">
				Pases a las
				<meta itemprop="openingHours" content="Mo-Su 12:00-13:30">12:00,
				<meta itemprop="openingHours" content="Mo-Su 16:00-17:30">16:00, 
				<meta itemprop="openingHours" content="Mo-Su 18:00-19:30">18:00 y 
				<meta itemprop="openingHours" content="Mo-Su 22:00-23:30">22:00 horas
			</p>
		</li>
		.....
	</ul>
	<p class="precio">Entradas a 
		<span itemprop="priceRange">5</span> 
		<span itemprop="currenciesAccepted">euros</span> 
		de lunes a viernes, fines de seamana a 
		<span itemprop="priceRange">7</span> euros
	</p>
</div>
```
Conclusión

Esto ha sido una muestra del potencial que esconde el uso de schemas en nuestro código html5. Es recomendable empezar a usarlos cuanto antes, ya que con su uso ganamos todos al obtener unos resultados de búsquedas más precisos y relevantes, una mejora en el SEO de nuestras páginas y se abren las puertas a una nueva generación de aplicaciones que podrán explotar esta información. Podemos afirmar que los schemas han llegado para quedarse y que a cambio de un pequeño esfuerzo nos ofrecen un sinfín de nuevas posibilidades de las cuales sólo hemos visto la punta del iceberg.

Introducción a Responsive Web Design

La Universidad de Alcalá impartirá nuestro curso HTML5+CSS3

Codemotion: ¡Alguien la va a liar parda en Madrid!

Sigue Codemotion

Colaboradores

Codemotion: ¡código y emoción en movimiento!

¿No serás el único en perdértelo?

Nuestro curso de HTML5 y CSS3 alcanza la versión 1.0

PhoneGap o cómo convertir html5 a aplicaciones móviles

¿Qué es PhoneGap?

Creando nuestra aplicación

Subiendo a la nube

Nuevos horizontes

Soporte de html5 en navegadores y smartphones

Acid3

Html5test

Conclusión

Style your forms using JavaScript or CSS

Style your widgets using JavaScript

Style your controls using just CSS

Style your select controls

Aside: These be Crazy Months

Web 3.0 y schema.org

¿Qué es la web 3.0?

Un poco de perspectiva

¿Qué es schema.org?

Caso práctico

Paso 1:

Paso 2:

Paso 3:

Paso 4:

Resultado final

Conclusión