#Tutorial #Ionic #Framework – Parte 1: Instalación y Proyecto Base by @erixdev

fuente: https://jsjutsu.com/blog/2015/06/tutorial-ionic-parte-uno/

Ionic es un framework de desarrollo de aplicaciones híbridas en HTML5 basado en AngularJS y que funciona con Apache Cordova (sí Cordova con V).

En mi opinión, sus puntos fuertes son:

  • Rendimiento muy bueno: sí, no es lo mismo que una aplicación nativa. Pero para un buen número de apps que hacen poco más que una aplicación web va que chuta. Y el mismo código te vale para IOS y Android.
  • Tiene un set de componentes visuales muy chulo y fácil de usar.
  • Si sabes AngularJS empezar a usarlo es inmediato.

Con este post empezamos una serie en la que elaboraremos una aplicación que presentará un listado de eventos. Utilizará unbackend en Node.js y permitirá autenticarse con Twitter.

DISCLAIMER: si no sabes lo básico de AngularJS seguramente no te enteres de nada. Pero no te preocupes porque tiene arreglo 🙂 Puedes conseguir un minilibro gratis con la suscripción a la lista de correo del blog.

Vamos a ello.

Instalación

Como siempre, tendremos que tener instalado Node.js. Una vez instalado, en una terminal ejecutamos:

1
npm i -g cordova ionic

Este comando lo dejará todo listo para empezar.

Creando un esqueleto de App

Ejecutamos en una terminal:

1
ionic start events-app tabs

Con ese comando lo que estamos diciendo a Ionic es que cree una aplicación básica con navegación basada en tabs, en el directorio events-app. Nos preguntará si queremos crear una cuenta ionic.io, la cual no es necesaria para poder hacer este tutorial.

¡Listo!, ahora entramos al directorio de la aplicación y la arrancamos para echarle un vistazo.

1
2
cd events-app
ionic serve

Ionic creará un servidor http y podremos abrir la página en nuestro navegador en la dirección http://localhost:8100. La idea es desarrollar utilizando el navegador y después probar en un móvil o un emulador.

Debes tener en cuenta que si vas a utilizar APIs de dispositivo (por ejemplo, el acelerómetro) tendrás que probar estas cosas en un emulador o dispositivo, ya que el navegador no implementa esto.

app-creada-1app-creada-1
app-creada-2app-creada-2

Para visualizar la aplicación con la resolución de otro dispositivo en el mismo navegador web puedes hacerlo:

  • En Firefox pulsando Ctrl-Shift-M.
  • En Chrome abriendo las herramientas de desarrollo (F12) y pulsando en el dibujito del teléfono arriba y en la izquierda.

Personalmente, suelo utilizar Firefox Developer Edition, y cuando el depurador se me queda corto me paso a Chrome un rato.

Estructura de directorios

Echemos un vistazo a los directorios que Ionic nos ha creado.

directoriosdirectorios

Se trata de un esqueleto web para una aplicación de Cordova, en la que se utiliza Gulp para automatización de algunas tareas yBower como gestor de dependencias frontend.
De aquí, lo importante lo tenemos en el directorio www.

directorio wwwdirectorio www

Este directorio debes verlo como el de aplicación web normal y corriente, con tres salvedades:

  • Puedes acceder a APIs de dispositivo móvil gracias a Cordova.
  • Puedes usar AngularJS. De hecho ya es una aplicación Angular básica con unos cuantos controladores y servicios.
  • Y por último, puedes usar los componentes de Ionic en forma de directivas AngularJS.

Por lo demás es lo mismo que te encontrarías en otra web. El index.html, carpetas para el CSS y JS etc.

Preparando el proyecto

Vamos a hurgar un poco en el código que viene de ejemplo y dejarlo limpito para lo que nosotros necesitamos. Que básicamente serán tres vistas: una para autenticarnos, otra para ver los eventos y otra para cerrar la sesión.

NOTA: el código tal cual lo dejamos en este paso puedes obtenerlo con:

1
2
3
git clone https://github.com/er1x/events-app
cd events-app
git checkout part1

Veamos lo más importante del código.

index.html

El fichero de entrada de la aplicación. Hace lo siguiente:

  • Cargar las dependencias: Ionic (incorpora Angular), Cordova y los ficheros JS de nuestra aplicación.
  • Define la aplicación AngularJS: ng-app=”eventsApp”
  • Define dos directivas: una barra de navegación (ion-nav-bar) y otra que contendrá las vistas concretas que se cargarán después (ion-nav-view).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Events App</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>

  </head>
  <body ng-app="eventsApp">

    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

  </body>
</html>
app.js

El fichero JS principal. En él definimos el nombre de la aplicación (eventsApp) y tres dependencias, que son el propio framework Ionic, y servicios y controladores de la aplicación. Después configuramos el enrutador. En Ionic se utiliza Angular UI Router.

El router de Ionic difiere del router por defecto de Angular en que en este se utiliza el concepto de máquina de estados. Aquí utilizamos un estado abstracto tab y dos estados hijos: list y account. Por otra parte hay otra vista independiente, login.

Este sistema permite tener vistas anidadas. En este caso, las vistas que necesitamos (listado y configuración), se integran dentro de otra. A estas rutas les asignamos una plantilla HTML y un controlador.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
angular.module('eventsApp', [ 'ionic',
                              'eventsApp.controllers',
                              'eventsApp.services'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider.state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })
  .state('tab.list', {
    url: '/list',
    views: {
      'tab-list': {
        templateUrl: 'templates/tab-list.html',
        controller: 'ListCtrl'
      }
    }
  })
  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  })
  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'LoginCtrl'
  });

  $urlRouterProvider.otherwise('/tab/list');
});
services.js

El servicio que utilizaremos se encargará de proveer a la aplicación de la lista de eventos. De momento los tendrá en memoria. Más adelante se conectará al backend para obtener el listado.

Proporciona una única funcion: all. Para listar los eventos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
angular.module('eventsApp.services', [])

.factory('EventsService', function($http) {
  return {
    all: function() {

      // TODO: get events from backend
      var events = [
        {
          'speaker': 'Homer Simpson',
          'title': 'Emprender en servicios web: Compuglobalhipermeganet',
          'place': 'Sala 5',
          'date': '15:00'
        },
        {
          'speaker': 'Stewie Griffin',
          'title': 'Cómo generar ingresos extra siguiendo gordos con una tuba',
          'place': 'Salón de talleres 1',
          'date': '17:00'
        },
        {
          'speaker': 'Ralph Wiggum',
          'title': '¡Corre plátano!',
          'place': 'Sala 5',
          'date': '19:00'
        }
      ];
      return events;
    }
  };
});
controllers.js

Tenemos un controlador para el listado (que utiliza el servicio para listar los eventos), y otros para las vista de login y cuenta, que de momento no hacen nada más que mostrar un mensaje en la consola cuando se pulse un botón.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
angular.module('eventsApp.controllers', [])

.controller('LoginCtrl', function($scope){
  $scope.authenticate = function() {
    console.log('TODO: authenticate');
  };
})

.controller('ListCtrl', function($scope, EventsService) {
  $scope.events = EventsService.all();
})

.controller('AccountCtrl', function($scope) {
  $scope.logout = function() {
    console.log('TODO: logout');
  };
});
tabs.html

Se trata de una vista global que utiliza la directiva ion-tabs.

Esta directiva se utiliza para la navegación con los tabs, que son los menús que se ven en la parte de abajo.

1
2
3
4
5
6
7
8
9
10
11
12
13
<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- List Tab -->
  <ion-tab title="Eventos" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/list">
    <ion-nav-view name="tab-list"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Cuenta" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

</ion-tabs>
login.html

Desde esta vista mostraremos un botón para iniciar la sesión. Utiliza las directivas:

  • ion-view: para cargarse dentro del nav-view.
  • ion-content: un área para el contenido.
  • button: un botón normal corriente con ng-click=”logout()”. Al pulsarse ejecutará la función logout del controlador correspondiente.
1
2
3
4
5
<ion-view view-title="Autenticación">
  <ion-content class="padding">
    <button class="button button-block button-positive" ng-click="authenticate()">Inicia sesión con Twitter</button>
  </ion-content>
</ion-view>

vista de loginvista de login

list.html

Igual que la vista de login, utiliza ion-view para ser cargada. Después utiliza el componente card para crear una tarjetita con la información de cada evento.
Con ng-repeat se van cargando los elementos del $scope y entre llaves van poniéndose los atributos de los objetos de eventos. Esto es AngularJS básico.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ion-view view-title="Eventos">
  <ion-content class="padding">
    <div class="list card card" ng-repeat="event in events">
      <div class="item item-divider">
        {{ event.speaker}}
        <p>
          {{event.date}} | {{event.place}}
        </p>
      </div>
      <div class="item item-body">
        <div>
          {{ event.title }}
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

vista de listadovista de listado

account.html

Por último la vista de cuenta, que es exactamente igual que la de login, pero con un botón para cerrar la sesión.

1
2
3
4
5
<ion-view view-title="Cuenta">
  <ion-content class="padding">
    <button class="button button-block button-positive" ng-click="logout()">Cerrar sesión</button>
  </ion-content>
</ion-view>

vista de cuentavista de cuenta

Resumen

En esta primera parte del tutorial de Ionic hemos visto:

  • Cómo instalar Ionic.
  • Cómo crear el esqueleto de un proyecto y verlo en el navegador.
  • La estructura de una app hecha con Ionic.

En la segunda parte de esta serie veremos cómo crear un sencillo backend con Node.js y Express que permita autenticarse con Twitter y proporcione un listado de los eventos.

Programar #app multiplataforma con #HTML5 by @Yeeply_ES

fuente: https://www.yeeply.com/blog/programar-apps-multiplataforma-html5/

Mucho se ha hablado sobre programar apps en este blog. Sobre desarrollo de aplicaciones Android e iOS, también sobre aplicaciones responsive y las nativas. Sobre monetizar esos proyectos móviles. Incluso el diseño de apps se ha hecho un hueco en nuestro blog. Pero nunca hemos dejado suficientemente clara una buena opción para llevar a cabo tu desarrollo móvil. Me refiero a programar una aplicación multiplataforma con HTML5.

Para los que acabáis de llegar al mundo de las apps, la diferencia entre las aplicaciones nativas y multiplataforma es que las primeras están ‘escritas’ en su propio lenguaje de programación de apps. Mientras que las aplicaciones multiplataforma tienen un solo código que es interpretado y ajustado a los dispositivos, diríamos que son prácticamente sinónimo de las aplicaciones web de las que hemos hablado en varias ocasiones.

Dentro de esta categoría nos encontramos dos existen 2 ramas de aplicaciones multiplataforma: la primera sobre WebView ( que utiliza HTML5, CSS3, JavaScript y que trataremos en este artículo); y otra tipoXamarin que escribes una vez el código en un lenguaje común y te lo “traduce” a nativo de cada una de las plataformas.

Uno de los lenguajes que precisamente nos permiten crear apps multiplataforma, que con un solo desarrollo sean accesibles desde cualquier dispositivo, ese es HTML5. Veamos un poco más en profundidad en qué consiste:

¿Qué es exactamente HTML5?

HTML5 es un lenguaje markup que se utiliza para estructurar y mostrar contenidos en web. Proporciona soporte para aplicaciones multimedia avanzadas, incluyendo audio y video. Pero también nos permite modificar el ‘layout’ de una página y modificar así su aspecto.

En este sentido, ¿cómo pueden aprovecharlo los desarrolladores de apps? El experto podrá programar apps interactivas con HMTL5 que se verán a través del navegador de cualquier dispositivo.

Es precisamente HTML5 uno de los lenguajes más versátiles para desarrollar aplicaciones web y el más utilizado al crear apps no nativas.

¿Porqué programar apps con HTML5?

En primer lugar podemos destacar que HTML5 es un lenguaje de programación muy extendido. De hecho se ha convertido desde octubre de 2014 en el estándar de programación web, así siempre encontraremos muchos recursos al respecto. Además, el World Wide Web Consortium (W3C) puso su sello de “Recomendado” a la quinta versión del lenguaje.

Las novedades que ha traído respecto a anteriores versiones de HTML y de otros lenguajes es la inclusión nativa de vídeo y audio y también implementar diseño responsive de forma automática.

La importancia del HTML5

Ya hemos dejado bien claro porque el lenguaje de programación es importante a nivel mundial y para los programadores convencionales. Pero ¿sabes qué características tiene este lenguaje para convertirse en uno de lasmejores opciones para programar apps multiplataforma? Vamos a exponerte esas ventajas de utilizar HTML5 al crear aplicaciones móviles.

  • Ante todo está su universalidad, es decir que funciona en todos los navegadores, ya sean en dispositivos móviles o desde el ordenador tradicional. El código es interpretado y mostrado por cualquiera de los navegadores (Chrome, Safari, Firefox, Internet Explorer).
  • Es una lenguaje con vocación claramente audiovisual. Permite incluir nativamente tanto audio cómo vídeo. Apuesta por mostrar e incluir contenidos multimedia en las creaciones.
  • Es mobile friendly. Una de las ventajas de la programación de apps con HTML5 es que este lenguaje busca ser responsive, adaptarse a la pantalla en la que se muestra el contenido. Por eso se convierte en perfecto para crear webs que se vayan a ver como aplicaciones (es decir, web apps). Según datos de la firma de análisis Vision Mobile, más del 50% de las aplicaciones móviles utilizan HTML5 junto a JavaScript y CSS.
  • Para los presupuestos más limitados es una muy buena opción ya que es más barato que otras alternativas nativas. O incluso para empezar con una beta de nuestro negocio o juego para móviles arrancar con una versión en HTML5 para ver si funciona y existe mercado puede suponer un gran ahorro. Juegos del estilo al de Candy Crush (puzzles) pueden empezar con esta tecnología y más adelante pasarse al nativo.
Puedes programar apps en beta con HTML
  • Y finalmente, pero no menos importante, el lenguaje HTML5 es decarácter abierto: Es decir, cualquiera puede modificar, mejorar, ampliar o inventarse nuevos servicios sobre aplicaciones ya desarrolladas.
Ventajas e inconvenientes de programar apps multiplataforma

Continuando lo que decíamos en el apartado interior, la mayor de lasventajas de crear apps multiplataforma con HTML5 y otros lenguajes es para aquellos de vienen del desarrollo Web. El programador web pueden utilizar su experiencia para introducirse en el desarrollo de apps de forma muy rápida y sencilla.

“Otra ventaja es que no hace falta el doble o triple de recursos para hacer la misma app en Android, iOs y Windows Phone”, añade Jose Antonio Llopis, Director técnico en Yeeply.

Como inconvenientes cabe destacar la velocidad de la app, que se ve seriamente reducida. Del mismo modo el acceso al hardware del dispositivo se ve limitado a los plugins disponibles. Otro inconveniente es que aunque se asegure que la app vaya a funcionar de forma automática en cualquier plataforma, eso no es cierto del todo. En la práctica hay que ir comprobando el desarrollo en todas las plataformas y comprobar que lo se ve bien en una también funciona en las otras.

Eso sí, RECUERDA que aunque las aplicaciones sean multiplataforma hay que generar una apk ( para dispositivos Android) o ipa nativa (para dispositivos iOS) para que sea legible y se muestre en los dispositivos móviles. Por eso mismo nos harán falta los SDK de cada plataforma. Como alternativa podemos usar un servicio que nos lo genere automáticamente como Adobe Build.

Herramientas para desarrollo multiplataforma

programar-apps-con-HTML5

Las herramientas más utilizadas para programar apps plataforma del tipo de WebView son las que te presentamos a continuación:

  • Apache Cordova: es un framework para el desarrollo de aplicaciones móviles propiedad de Adobe Systems que permite a los programadores desarrollar aplicaciones para dispositivos móviles utilizando herramientas web genéricas como JavaScript, HTML5 y CSS3, resultando aplicaciones híbridas.
  • AngularJS: es un framework de JavaScript de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página.
  • Ionic:es una herramienta, gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS y JS. Está construido con Sass y optimizado con AngularJS.

Aunque la calidad de este tipo de aplicaciones no es la óptima que podemos encontrar en un desarrollo nativo, funciona muy bien para proyectos pequeños y medianos que no necesitan un rendimiento muy alto ni demasiadas funcionalidades. De hecho la primera aplicación de Facebook estaba desarrollada con este tipo de tecnología hasta que se decidió por la programación de apps nativas.

#html5 y #css3: Imagen Responsive Básica

Fuente: http://www.psdahtmlpasoapaso.com/blog/como-crear-imagenes-responsive-con-css#ejemplo

Comenzamos con un DIV contenedor que incluirá una imagen.

<div>
   <img src="image01.jpg" width="960" height="640" />
 </div>

Ahora aplicaremos una serie de reglas con contenedor de dicha imagen para que el mismo tenga un ancho del 96% del ancho de la pantalla, pero que el mismo no supere los 960px.
También le colocamos un margen de 0 para arriba y abajo y AUTO para el izquierdo y derecho. Asi logramos que quede centrado.

div.container {
width: 96%;
max-width: 960px;
margin: 0 auto;
}
img {
width: 100%;
height: auto;
}

También le incluí un ancho del 100% a la imagen y un alto en automatico, con eso logramos que tome el ancho completo del DIV contenedor y la altura se respete proporcionalmente.

RESUMEN: en este ejemplo logramos una imagen responsive (adaptable) pero que no supere los 960px de ancho.

>> Ver ejemplo

Crear fácilmente texto 3D con CSS3 by @html5facil

Fuente: html5facil.com

Aun que CSS3 no tiene una propiedad directamente para hacer esto, hay desarrolladores que utilizan el ingenio para combinarlas y crear cosas sorprendentes de las cuales aprenderán en este momento a Crear fácilmente texto 3D con CSS3 y que sea aplicable a sus proyectos.

Crear fácilmente texto 3D con CSS3

¿Dónde lo puedo aplicar?

La propiedad se llama text-shadow y obviamente es aplicable a todo tipo de etiqueta que contenga texto, títulos, párrafos,  etc.

Nota: También es aplicable a fuentes personalizadas (@font-face).

 

CSS3 soporta capas

Una de las ventajas de CSS3 son las capas, por ejemplo, en la propiedad backgroundpuedo decirle que primero aplique un fondo de color rojo y después coloque sobre el fondo una imagen png, en el caso de text-shadow serian capas de sombra.

Nota: Entre mas capas tenga, mayor grosor tendrá el texto.

Ejemplo:

1
2
3
h1 {
  text-shadow: parametros_capa_1, parametros_capa_2, parametros_capa_n;
}

 

Sintaxis básica de text-shadow

Parámetros :

  1. Desplazamiento de la sombra sobre el eje X en relación al texto, Valores positivos o negativos.
  2. Desplazamiento de la sombra sobre el eje Y en relación al texto, Valores positivos o negativos.
  3. Cantidad de efecto blur o desenfoque de la sombra.
  4. Color de la sombra en hexadecimal o RGB.

 

Ahora si, efecto 3D en el texto

Aplicando todo lo que se explico anteriormente podemos empezar a jugar con los valores y obtener diferentes resultados ajustando al gusto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1 {
  color:#FFF;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Nota: Recuerden anteponer las extensiones propietarias de CSS3-webkit-, -moz-, -o-, -ms- (Microsoft).

Y claro, dejamos el link de descarga del ejemplo aqui y el ejemplo en demostración aqui.

#Responsive #Design: adaptar imágenes y vídeos by @genbetadev

Fuente: genbetadev.com

Como comenté en el artículo sobre la estructura básica del Responsive Designun diseño adaptable deja de serlo si cuando lo visualizas desde un móvil ves que las imágenes y los vídeos sobresalen de la página, por lo que os voy a enseñar como hacer que se adapten a distintos tipos de pantalla los contenidos multimedia (imágenes y vídeos de HTML5Youtube y Vimeo).

Las formas que comentaré para adaptar imágenes y vídeo son básicas y probablemente en algunas ocasiones se necesite hacer un diseño más específico que podremos hacer con @media queries, pero el lado positivo de estos métodos es que son adaptables al ancho del contenedor, independientemente del ancho de pantalla (por lo que en ciertos tamaños puede que nos venga bien hacer un contenedor principal y una barra lateral y el vídeo que esté en el contenedor se adaptará a el, por ejemplo).

Adaptar imágenes

Para crear diseños muy optimizados puede ser importante usar varias imágenes distintas, una con un tamaño superior y otra con uno más ligero, pero me voy a centrar en el uso de una misma imagen (que en la medida de lo posible debería de estar optimizada) y se adaptará como nosotros queramos, pudiendo hacer que se comporten de las siguientes formas las imágenes:

  • Ocupar el ancho de la página: puede ser útil para cabeceras o imágenes principales y lo haremos estableciendo su ancho al 100%.
img {
	width:100%;
}
  • Tener una imagen con un tamaño máximo: en este caso la imagen tendrá un tamaño que no sobrepasará, pero cuando se disminuya el tamaño del contenedor se encogerá adaptándose a la página y nos puede servir de ejemplo usarla para un blog, donde puede que usemos en alguna ocasión una imagen un poco más grande (por ejemplo una infografía) y no queremos ni hacerla más estrecha ni recortarla.
img {
	width:100%;
	max-width:400px;
}
  • Tener las imágenes con su tamaño original: y en este último caso puede que tengamos una serie de imágenes de distintos tamaños y queremos conservar sus tamaños originales pero que se adapte al ancho del contenedor o de la pantalla y como en el caso anterior nos puede servir para un blog con un diseño adaptativo o con versión móvil (ya que se varían igual en la versión de escritorio y adaptaría al ancho en la móvil).
img {
	max-width:100%;
}

Os voy a poner como ejemplo la galería de webs de CSS-Tricks, que en anchos grandes divide las imágenes en tres columnas y sino en una sola, pero siempre se adaptan al 100% del ancho de su contenedor.

Adaptar vídeos

Cuando queremos adaptar vídeos tenemos dos tipos de vídeos que adaptar, el primer tipo son los vídeos de HTML5 (para el que no sepa de que va esto en Genbeta Dev tenemos un artículo que cuenta como usarlo y las compatibilidades) y por otro lado los vídeos de servicios externos que debemos de incrustar su código, que normalmente es un <iframe> (servicios como YouTube,Vimeo…)

HTML5

En este caso no hay ningún tipo de complicación, es como si usásemos un elemento <img>, es decir, podemos aplicar todo lo que he explicado antes para tratar un elemento <video>, pero pondré un par de métodos aún así.

  • Adaptar el vídeo al ancho total de la página (recordemos que esto también se puede poner en práctica en web móviles, por lo que no sería un problema que se hiciese muy grande):
video {
	width:100%;
}
  • Ahora haremos que tenga el tamaño máximo que queramos y cuando no coja en la página se hará más pequeño:
img {
	width:100%;
	max-width:640px;
}
Servicios externos (Yotutube, Vimeo…)

Al usar este tipo de vídeos con etiquetas <iframe> se complica mucho más el poder hacer que se adapten estos vídeos, y para conseguirlo hay que hacer todo un ritual (esperemos que HTML5 se imponga rápido ante este tipo de vídeos).

En este caso tenemos dos opciones, la primera es que el vídeo de adapte al ancho del contenedor (no sería demasiado grande si usase un ancho “estándar” como usa por ejemplo Genbeta Dev, 640 píxeles que se puede decir que es lo normal) y por otro lado podemos limitar el ancho a uno específico.

Os voy a explicar las cosas que tenemos que tener en cuenta para que funcione bien:

  • Tenemos que hacer que se redimensione el contenedor del vídeo para que conserve el ratio (o relación entre el alto y el ancho), y aquí tenemos que poner en práctica un “truquito“ (que podría ser tachado de chapucero, pero a falta de algo mejor nos sirve y si alguien conoce otra forma conCSS que no dude en comentarla), y el método consiste en meter el <iframe> dentro de una etiqueta <div> que tendrá un alto de 0px y un ancho del 100% y el truco para que tenga el tamaño del vídeo es usar su padding-top y establecer el valor porcentual de su ratio de imagen, que suele ser 16:9, voy a poner varias relaciones:
#Dividiremos el alto entre el ancho, y el padding-top se adaptará según esta relación al ancho
16:9	--->	9/16*100  	= 56,25%
4:3	--->	3/4*100   	= 75%
  • Lo que hemos hecho anteriormente solo es para la etiqueta <div> (si os estáis perdiendo ahora veréis el CSS con la explicación de las cosas), teniendo esta etiqueta que sabemos que se va a adaptar para tener el ratio adecuado debemos de hacer que el <iframe> flote encima de la etiqueta anterior y adopte su alto y su ancho (estableciendo su alto y ancho al 100% y su posición como absolute).
  • Por último, si queremos que nuestro vídeo no ocupe el 100% del ancho de la página o contenedor en el que se encuentra (y además se centre en la página) debemos delimitarlo con otra etiqueta <div> que tendrá el ancho máximo que deseemos y un margen automático que hará que se centre correctamente.

El código necesario

Como he comentado antes para que se centre el vídeo y no se expanda al 100% de la página sin límite debemos de meterlo en un contenedor (que su clase será llamada delimitador"), si queréis hacer que se adapte al 100% sin limite no le añadáis, pero lo que contiene si.

El ejemplo del código lo voy a hacer con dos vídeos juntos, uno encima del otro de Youtube y Vimeoy como no nos serviría de mucho añadirlo aquí, podéis probar en forma de ejemplo los tres vídeos, que por desgracia no he encontrado ninguna web que adapte sus vídeos de esta forma.

<div>
	<div>
		
</div> <div>
</div> </div>

Y el código CSS es el siguiente:

/* Podemos eliminar este estilo si no queremos que se adapte al ancho máximo */
.delimitador{
	width:560px;	/* Ancho máximo */
	margin:auto;	/* Centramos el vídeo */
}
/* El contenedor con el padding-top crea el tamaño del vídeo */
.contenedor{
	height:0px;
	width:100%;
	padding-top:56.25%; /* Relación: 16/9 = 56.25% */
	position:relative;
}
/* El iframe se adapta al tamaño del contenedor */
.contenedor iframe{
	position:absolute;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
}
Resumen

Hay algunas cosas que no son tan fáciles de hacer para que se adapten a todo tipo de pantalla, pero se puede acabar consiguiendo y os recomiendo si vais a poner en práctica alguno de estos métodos para hacer que se visualicen bien estos elementos multimedia en todo tipo de pantalla es que creéis elCSS necesario para hacerlo y lo dejéis siempre accesible para que os resulte más fácil adaptar todo.

Estructura básica en #HTML5: #header y #footer by @nentab

Fuente: nentab.com

Como segundo capítulo de cómo hacer una estructura básica de una plantilla en HTML5, hoy voy a hablar de dos nuevas etiquetas del HTML5: header (cabecera de página) y footer (pie de página).

Bien, como estructura básica, un documento .html se empieza con el Doctype (explicado ya en la entrada Estructura básica en HTML5: DOCTYPE), seguido de las etiquetas <html>…</html>, que contendrán las etiquetas <head>…</head> (cabeza) y <body>…</body> (cuerpo). Quedando construída así la estructura básica:

<!DOCTYPE HTML>
<html>
    <head>
        <!-- Aquí irá el contenido del head. -->
    </head>
    <body>
        <!-- Aquí irá el contenido del body. -->
    </body>
</html>

Nota: Lo escrito entre <!– y –> son comentarios, que solo saldrán en el código, y no en la página.

La etiqueta <header>…</header> especifica una introducción, o un grupo de elementos de navegación para el documento. Y la etiqueta <footer>…</footer> define el pie de página de una sección o documento. Por lo general contiene el nombre del autor, la fecha en que fue escrito el documento y/o información de contacto.

Con lo ya dicho, voy a poner un ejemplo de cómo se podría hacer una plantilla básica con estas nuevas etiquetas:

<!DOCTYPE HTML>
<html>
    <head>
        <!-- Aquí irá el contenido del head. -->
    </head>
    <body>
        <header>
            <h1>Título de la web</h1>
        </header>
        Contenido de la web.
        <footer>
            Pie de pagina.
        </footer>
    </body>
</html>

Tutorial #html5 y #css3: Transforma tu web en #Responsive #Design by @ikhuerta

Fuente: blog.ikhuerta.com

Internet no para de evolucionar en todos los sentidos, incluso en su tecnología. Hay cosas que se van poniendo de moda y luego, poco a poco, se van dejando de lado, otras en cambio llegan con suficiente fuerza como para que todos sepamos que marcan el “camino a seguir”.

El “Responsive Design” o en español “Diseño adaptativo”, es una de estas últimas. Un sistema basado en los estándares web actuales que permite que nuestras webs se adapten a la pantalla del usuario que está viéndolas. El Responsive Design se ha puesto muy de moda con el auge de la navegación movil, pero va mucho más allá, se trata de webs con diseños inteligentes (smart que dirían los ingleses) que facilitan la usabilidad de las webs en funcion de quien las observa.

Pero el Responsive Design no son simples añadidos a una web, es una filosofía del desarrollo del front de la misma totalmetne distinta y que abarca tal cantidad de detalles que resulta impracticable para muchas empresas y realmente complejo para otras. Realmente yo a día de hoy no recomiendo realizar webs en Responsive Design, pues no estamos preparados para ello, pero si que podemos sacar ciertos conocimientos sobre estas aplicaciones para hacer nuestras webs seudo-adaptables y mejorar la experiencia del usuario. Quizás no hasta el nivel que los diseños responsive que vamos viendo nos marcan pero si con suficiente calidad como para que el ratio “mejoría/coste” nos merezca la pena.

Por qué es complejo desarrollar webs en responsive design

Básicamente por dos motivos:

  • Porque es una tecnología verde, donde las distintas opciones para su aplicación uso aun no están lo suficientemente desarrolladas como para saber “cual es la mejor”. Aunque no paran de aparecer novedades al respecto, No hay un framework ganador ni un estándar sobre como resolver la mayoría de complicaciones.
  • Porque un diseño adaptativo no nace en la tecnología, sino en el diseño de la web. No se trata solo de que una vez tengamos nuestro diseño terminado debamos diseñar como variará con distintas pantallas y dispositivos, sino que directamente hay que diseñar las webs pensando como se comportará. Esto, resulta extremadamente complejo para diseñadores que no saben exactamente como reacciona cada elemento a su adaptabilidad duplicando o triplicando el trabajo del maquetador que lo hace efectivo.

En definitiva, necesitamos más tiempo para que la mayoría puedan permitirse trabajar con diseños adaptativos. Necesitamos que los conocimientos globales del sector (maquetadores, diseñadores, programadores e incluso el personal comercial y de marketing) evolucionen en este sentido. Solo así podremos acortar los tiempos de desarrollo de un diseño responsive y hacerlo práctico para su uso en webs normales. La realidad es que a día de hoy puede resultar mucho más rápido sacar una nueva versión de la web para moviles que rediseñarla para que sea adaptable.

Eso no significa que nadie pueda lanzarse. Es normal que algunos quieran destacar y ser de los primeros y más “avanzados”. Genial! Que ellos abran el camino y nos muestren luego sus errores al resto de mortales.

Entonces… ¿qué puedo hacer yo?

Como decía antes, no lanzarnos a rediseñar todas nuestras webs no significa que no podamos aprovechar las nuevas posibilidades que se nos brindan para hacer pequeños cambios en nuestras webs y por lo tanto mejorar sensiblemente su adaptación a distintos navegadores y dispositivos.

Para ello, lo que tenemos que ver es cómo es nuestra web. Sobretodo a nivel de maquetación y fundamentalmente estructura HTML y CSS y a partir de ahí ver que pequeñas mejoras queremos aplicar.

Consideraciones previas y hacks a conocer

Antes siquiera de plantearnos la posibilidad de “arreglar” nuestras webs para hacerlas más adaptables tenemos que conocer algunas técnicas y consejos que nos vendrán muy bien para trabajar y sin los cuales el trabajo no se hace solo complicado sino casi imposible.

1. El Html semántico no es imprescindible pero ayuda

Una web en HTML semántico es una web cuya maqueta se ha realizado correctamente. Donde se han usado solo los elementos HTML imprescindibles, pensando más en el significado de cada etiqueta que en el diseño y dejando por lo tanto todo el trabajo de diseño al CSS en base a clases e ID’s.

Si bien no es necesario usar correctamente los DIV, P, UL, LI, etc. en nuestras maquetas para hacer Responsive Design lo que si que es cierto es que al menos la parte de eliminar todo el diseño de la maqueta debemos cumplirla. Es decir, no podemos usar CSS intrusivo (nada de atributos “style” en medio del código) y cuanto más limpio (y con menos divs) sea nuestro HTML más fácil será realizar las adpataciones, pues el CSS tendrá más poder sobre el resultado final.

2. Elección del Zoom en los navegadores móviles

Dado que esta claro que han existido antes los navegadores móviles que los diseños adaptados a ellos estos usaron desde el principio herramientas de zoom para poder visualizar webs completas. Si tu entras en una web normal con un móvil no verás la resolución real de tu móvil sino una versión que realiza un zoom para adecuarse a los 960px de ancho.

Este es su comportamiento por defecto, sin embargo, también se han creado etiquetas HTML para cambiarlo. De esta forma, si nosotros vamos a adaptarnos un poco a resoluciones móviles podemos simplemente indicarle al móvil que use otro tipo de escalado.

Para ello se usa la meta-etiqueta “viewport” (a incorporar en el head de la página), donde podemos especificar el comportamiento que esperamos que tenga un navegador de estas características en con nuestra web.

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

Esta es la configuración de la etiqueta viewport más usada para responsive design, pero no es la única que podemos usar. Debemos entender las dos variables que aquí aparecen para que el movil se adapte a nosotros y no al revés.

  • width:
    El ancho que forzamos al móvil a adoptar con la web. Normalmente se indica como “device-width” para que se muestre la resolución real del dispositivo pero dependiendo del diseño que finalmente hayamos creado en la web es posible que queramos especificar un tamaño fijo que coincida con la resolución que hemos preparado nosotros para la versión móvil de nuestra web.En webs que no llegan a ser del todo adaptables (o que no lo son en absoluto) resulta muy útil, al poder controlar el ancho de nuestro navegador. Imaginemos que tengo una web de 1200px de ancho y no voy a hacerla responsive. Indicando el width a 1200px al menos conseguire que la primera visualización desde movil la contemple entera.
  • initial-scale:
    Con esta orden indicamos el valor del zoom que queremos que use el movil. Siendo 1.0 una visualización sin Zoom y 2.0 una ampliación de toda la web al doble de su tamaño.Por supuesto si vamos a crear un diseño adaptado al ancho del movil la configuración de initial-scale=1.0 es la adecuada pues pedimos al movil que no haga ningún tipo de zoom, pero en muchas ocasiones será mejor no usar esta variable y permitir al móvil que adapte el solo el zoom al width que le hemos definido.

    Por ejemplo, si indicamos que nuestro width es de 500px e indicasemos initial-scale, la web tomaría el aspecto de una pantalla de 500px pero nosotros el en móvil solo veríamos la configuración original del móvil (que equivaldrían a unos 320px de los 500px totales por lo general). Sin embargo si no indicamos initial-scale la web se mostraría con el zoom adaptado para verla completa (seguramente los 500px declarados).

Por lo tanto tenemos dos típicas configuraciones de viewport…

Para webs con responsive design adaptado perfectamente a resoluciones móviles:

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

Para webs que no se han adaptado del todo a resolución móvil:

<meta name="viewport" content="width=[Pixeles del mínimo ancho para visualizar bien la web]" />

Existen otras configuraciones, como por ejemplo crear webs con un ancho de movil pero con zoom ya aplicado para mostrar solo una parte… pero son webs extrañas con una usabilidad dudosa.

3. Las media queries

Las media queries son sentencias del CSS que nos permiten hacer declaraciones que solo se apliquen en nuestros diseños si se cumplen ciertos requisitos que nosotros declaramos. Estas media queries se pueden aplicar básicamente en dos posibles puntos de la web.

  • Al llamar al archivo css, indicando en cada uno las condiciones para cargarlo
  • O en el propio archivo CSS, formando un apartado donde incluir fragemntos de css a aplicar

Las media queries son realmente potentes y permiten salirse del responsive design para cubrir aspectos muy diversos de nuestras webs. Seguidamente incluyo unos links para que puedas informarte sobre ellas ya que no quiero complicar este post con explicaciones de cosas que luego no vamos a usar.

Para lo que nos interesa nos basta saber dos cosas. Por un lado como se declaran estas media queries en nuestro archivo CSS y por otro como dotar a los navegadores Internet Explorer antiguos de esta funcionalidad.

3.1 Declaración de media queries

Para declarar un fragmento de CSS dentro de un condicional marcado por una media query:

@media screen and ([CONDICION]) {
 /* Nuestras nuevas reglas con este ancho o menos de pantalla */
}

Donde además veremos que lo más seguro es que apliquemos condiciones basadas en el ancho de pantalla que generan tres tipos de media queries:

Aplicar solo en resoluciones de menos de X píxeles de ancho:

@media screen and (max-width:[ANCHO]px) {
 /* Nuestras nuevas reglas con este ancho o menos de pantalla */
}

Aplicar solo en resoluciones de más de X pixeles de ancho:

@media screen and (min-width:[ANCHO]px) {
 /* Nuestras nuevas reglas con este ancho o más de pantalla */
}

Aplicar solo en resoluciones entre X e Y pixeles de ancho:

@media screen and (min-width:[ANCHO X]px) and (max-width:[ANCHO Y]px) {
 /* Nuestras nuevas reglas con este ancho o más de pantalla */
}

Depende de nuestros gustos cual usemos, pero lo normal es usar solo la primera de forma acumulativa de forma que a medida que hacemos el ancho más pequeño vayamos modificando elementos en nuestros diseños.

3.1 Compatibilidad de media queries con Internet explorer

Como siempre, explorer no va a soportar muchas cosas que a día de hoy ya son de dominio público. Por suerte siempre existen desarrolladores muy motivados que nos crean librerías para dotar compatibilidad a estos navegadores. En este caso nos encontramos con css3-mediaqueries-js una librería javascript que simplemente debemos añadir para Internet Explorer de versiones anteriores a la 9.

Bastará cargar este script en el head de nuestra página y ya podremos usar media queries sin problemas.

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

Como todas estas librerías, el resultado no es exacto pero si que da una gran compatibilidad en la mayoría de los casos.

Los tres diseños base dentro del design responsive

Una vez hemos visto los detalles de tecnología nuevos a usar con este tipo de diseños debemos ver como manejarlos. Como decía antes, soluciones hay miles, pero veamos la base que forma la concepción de la mayor parte de diseños responsive hoy en día:

Estamos acostumbrados a que nuestras webs sean fijas, tal cual se diseñan en Photoshop las mostramos en nuestra web. Esta claro que la equivalencia no es pixel a pixel pero se acerca bastante una visualización a otra. En responsive design esto cambia. Nos encontramos con una infinidad de dispositivos donde queremos que nuestra web se adapte perfectamente. Pero estos dispositivos vamos a dividirlos en 3 grupos básicos para saber como afrontarlos:

  • Grandes pantallas, donde nuestra web cabe y sobra incluso espacio para visualizarla
  • Pequeñas o antiguas pantallas, donde nuestra web, para el ancho marcado no cabe y nos aparece la odiosa barra inferior (que nadie usa) para terminar de ver el contenido.
  • Pantallas móviles, donde el espacio es tan pequeño que la información no se lee correctamente con el diseño global

Lo que tenemos que buscar entonces es como dar salida, con nuestro diseño actual a un diseño valido y usable para todas ellas con nuestro actual diseño y maqueta de página. Esto, dependiendo de como esté maquetada nuestra página puede darnos más o menos problemas, pero por lo general, con el tipo de trabajo que se realiza actualmente podemos conseguir ciertas cosas.

Solucionando las pantallas grandes en responsive design

En este aspecto normalmente no hay mayor problema ya que nuestra web ya ha sido creada para ser vista en pantallas grandes. A día de hoy lo normal es que nuestra web tenga un marco centrado de 960px de pantalla y así encaje bien al ser cargada con el zoom aplicado en la mayoría de móviles. Si nuestra web es un poco antigua puede que tenga incluso algunos píxeles más al haber sido pensada para pantallas de 1024px de ancho.

Sea como sea, lo lógico es que nuestra web disponga de contenedores de este tipo:

#main { width:960px; margin:0 auto; }

Esta sintaxis nos permite crear un contenedor (main) que queda centrado en la página. Además con distintos backgrounds será posible decorar el exterior de la página para darle un poco de diseño y no dejarla toda blanca o negra.

En fin, en estos casos no hay mucha cosa que hacer con pantallas grandes. Es cierto que es posible que nuestra web sea vista en un televisor donde además de gran pantalla nos encontramos con que el usuario navega a cierta distancia del monitor. Esto requeriría de tratar estas pantallas como los móviles (con grandes cambios) pero realmente es tan poca la gente que navega en su televisor que no suelen merecer la pena estas adaptaciones. Si aún así, quieres crear tu adaptación a televisores puedes jugar con reglas parecidas a las de móvil que se explicarán más adelante.

Solucionando las pantallas pequeñas en responsive design

Aquí es donde empezamos a encontrar nuestros problemas. Nuestra web está preparada para un ancho de pantalla y resulta que tenemos un porcentaje de usuarios significativo con resoluciones menores.

Comprobar si esto nos está sucediendo es sencillo si usamos Google Analytics o cualquier otro sistema de analítica de página. Ahí podremos encontrar no solo las resoluciones de pantalla de nuestros usuarios sino que partes de nuestra web suelen verse en nuestra web. Hace no mucho disponíamos de una herramienta llamada “Google Browser size”, pero está obsoleta en favor de la misma funcionalidad en Google Analytics.

Lo primero que tenemos que decidir es en que punto acaba la pantalla pequeña y cuando empieza la móvil. Es decir, esta claro que nuestra web no cabe en resoluciones pequeñas y deberemos encogerla un poco para ellas, pero llegará un momento en el que deje de tener sentido este “encogimiento” simple por aglutinar demasiados elementos en la pantalla con el mismo. Para tomar esa decisión conozcamos algunos datos sobre los móviles:

  • Un dispositivo móvil en vertical (como más suele usarse), sin importar su verdadera resolución, suele adoptar una resolución de dispositivo de 320px de ancho.
  • En horizontal esta resolución se adapta al tamaño real de pantalla, pero suele quedar entre los 400px y los 600px. Por ejemplo en mi Samsung Galaxy S2 adopta 530px de ancho
  • En tablets esta resolución depende de la del dispositivo pero suele quedar en los modelos más vendidos por encima de los 600px, aunque puede llegar a los 1024px

El estándar que se está adoptando es trabajar encogiendo la página para resoluciones pequeñas hasta los 400px de ancho, medida a partir de la cual se entiende que el dispositivo debe cambiar radicalmente su visionado y posiblemente funcionamiento básico. También encontraremos como algunas personas deciden visualizar encogiendo hasta los 600px de ancho y a partir de ahí empiezan a crear versiones intermediasentre pantalla pequeña y móvil.

Por último, también sabemos que el mínimo de ancho en el que tenemos que pensar estará en los 320px de ancho, lo cual nos permite además tener un margen desde el que no operar en absoluto.

Tu decides, yo creo que intentar abarcar todos los dispositivos es una locura. Al final lo que tenemos que pensar es en estilos de navegación del usuario donde solo tenemos tres.

  • Móviles en vertical: Donde la pantalla solo permite lectura y navegación muy simplificada (320px-400px)
  • Móviles en horizontal y tablets: Donde ya se permite una visualización horizontal clásica pero donde hay que vigilar que la navegación se produce con taps y no con clicks (por lo que hay que evitar las acciones onMouseOver (400px-600px-800px)
  • Dispositivos de sobremesa: Donde nuestra web normal (>800px)

Así, yo entiendo la “pantalla pequeña” como una mezcla de pc, móviles horizontales y tablets, lo que la vuelve ligeramente compleja en si misma, pero nos simplifica el trabajo real de maquetación por bloques al unificar todos estos dispositivos en una sola acción.

Bien, una vez decidido nuestro ancho móvil, lo que tenemos que hacer es trabajar en esa visualización intermedia transformando los bloques que tenemos actualmente para que puedan cambiar de tamaño en función del tamaño de pantalla.

Contenedores globales de la página

Llamamos contenedores globales a aquellos que marcan los anchos globales de nuestra web. Esos que decíamos antes que nos permitían centrarla y dalre un ancho concreto.

Los contenedores globales son los más fáciles de adaptar pues lo único que tenemos que hacer es no ser tan rígidos con su ancho y pasar de un ancho fijo a un ancho máximo. Dicho de otra forma, bastará con que en mi declaración inicial del marco de la página pase de “width” a “max-width”. Además y ya que hemos pensado en cual va a ser nuestra resolución mínima para pantallas móviles añadiremos esta como min-width para controlar que ante dispositivos realmente extraños no provoquemos una página no controlada.

#main {max-width:960px; min-width:320px; margin:0 auto;}

El resultado será exactamente el mismo para pantallas grandes y sin embargo, veremos como al hacer más pequeña nuestra página este marco se va haciendo más pequeño.

Os voy poniendo ejemplos sobre la transformación que he ido realizando en mi blog (blog.ikhuerta.com, es decir la web que estás viendo ahora mismo)

En mi caso marcado un ancho de 1080px de página que se aplicaba en los elementos de cabecera, contenido principal y footer. Mi primer paso ha sido por lo tanto pasar esa medida, en los distintos bloques globales a ancho máximo de página en lugar de fijo. En tu caso esto podría representar más o menos sentencias dependiendo de la cantidad de bloques de este tipo que uses.

#header #top {position:relative; max-width:1074px; min-width:320px; height:115px; margin:0 auto; [...]}
[...]
#header ul.menu {position:relative; max-width:1008px; min-width:320px; height:95px; [...]}
[...]
#aux-main{position:relative; max-width:1008px; min-width:320px; margin:0 auto; [...]}
[...]
#footer ul {max-width:768px; min-width:320px; margin:10px auto;}

Contenedores interiores

A partir de aquí es donde solemos empezar a tener problemas. Nuestra página seguramente estará formada por un layout que se dividirá en varias piezas:

  • Cabecera a 100% de ancho
  • Contenido ocupando gran parte del ancho
  • Uno o más sidebars ocupando solo una parte del lateral
  • Pie de página a un 100% de ancho

En definitiva, tenemos ciertos contenedores que seguramente tendrán un ancho fijo para marcar columnas en la web. Luego estos podrán haberse transformado en columnas con distintas técnicas (floats en la mayor parte de los casos, display:inline o display:box en otros). Así que lo siguiente que tengo que hacer es transformar esos valores en declaraciones menos estrictas y que respeten que el contenedor principal ya no mide exactamente lo que habíamos marcado.

Es decir, tenemos que pasar de Pixeles a porcentajes todo lo que represente algún espacio en el ancho de página: widths, max-widths, margins y paddings.

Por suerte, una vez está terminada nuestra maqueta este paso es realmente sencillo. Tan solo tenemos que hacer una pequeña división para saber el valor porcentual que representa una medida en pixeles sobre la de su elemento contenedor.

[Px de ancho elemento interior] / [Px de ancho elemento padre] * 100

En mi caso, para este blog, tuve la suerte de que muchos contenedores ya estaban en medida porcentual. Esta es una buena costumbre de maquetación, si porcentualmente existe un valor claro es preferible usarlo así para futuros cambios independientemente de si usamos o no responsive design.

El elemento más molesto que me encontré fue el columnado que al estar desarrollado con elementos float al hacer más pequeño el marco el sidebar pasaba a quedar bajo el contenido. Así que realizamos los cálculos de los elementos dentro del div de contenedor global (que recordemos tenía un ancho de 1080px) y pasamos a porcentaje estas medidas.

#main #content {float:left; width:63.9880952%; margin:30px 0 0 1.98412698%; }
[...]
#main #sidebar {float:left; margin:20px 0 0 3.47222222%; width:28.7698413%; }

Nótese que hemos transformado no solo los anchos, sino también los márgenes horizontales para que toda la web siga cuadrando. También hemos incluido un gran número de decimales en el cálculo para ser lo más exactos al original.

Elementos interiores sueltos que crecen demasiado

En algunas ocasiones es posible que nos encontremos con elementos sueltos dentro de nuestra maqueta que por sus características pueden llegar a hacerse más grandes de lo que lo es su contenedor con max-width.

Lo mejor para detectar estos elementos es ir jugando con tu tamaño de navegador para detectarlos y corregirlos. Pero muchas veces será más rápido y cómo seleccionar nuestors contenedores y prohibir que ninguno de sus elementos interiores crezca más de lo que mide el propio contenedor.

En mi caso he decidido aplicar esta corrección dentro de mi contenido principal y mi sidebar, de forma que algunos problemas (sobretodo derivados de widgets como facebook y twitter) se solucionasen por si solos.

#main #content {float:left; width:63.9880952%; margin:30px 0 0 1.98412698%; }
#main #content * {max-width:100%}
[...]
#main #sidebar {float:left; margin:20px 0 0 3.47222222%; width:28.7698413%; }
#main #sidebar * {max-width:100%}

Elementos posicionados en absoluto

Para los elementos posicionados en absoluto habrá que realizar el mismo proceso que con los anchos de elemento. Estos deberán adaptarse a porcentajes en su eje X y variar su ancho.

En mi caso, disponía de varios elementos en absoluto en la cabecera por lo que he debido adaptar sus posiciones para que no quedasen flotando en el aire al hacer más pequeña la página.

 
[...]
#header #top p.breadcrumb {position:absolute; top:90px; left:3.72439479%; color:white;}
[...]
#header #top p.like { position:absolute; top:10px; left:54.0037244%; }
[...]
#header #top div.vcard{position:absolute; top:11px; right:5.49348231%;  width:27.9329609%;}

Elementos que no caben… nuestras primeras “Media Queries”

Por mucho que adaptemos nuestros anchos es probable que haya elementos que simplemente por el contenido que deben incluir no quepan en el diseño. Estos elementos nos están molestando y haciendo que todos nuestros cambios se vean mal. Para evitarlo tendremos que empezar a hacer uso de media queries sencillas que nos permitan cambiar drasticamente el CSS cuando se produzcan ciertas dimensiones.

Las media queries son todo un mundo, incluso a día de hoy que no han sido del todo explotadas, se pueden hacer cosas asombrosas con ellas. Pero nosotros lo que haremos será algo muy sencillo, simplemente las usaremos para marcar condiciones sobre el ancho de pantalla a partir del cual nuestro CSS cambie.

Recordemos esa sintáxis:

@media screen and (max-width:[ANCHO]px) {
 /* Nuestras nuevas reglas con este ancho o menos de pantalla */
}

Estas media queries, para este caso concreto, en el que solo buscamos adaptar el diseño a distintas resoluciones, nos servirán sobretodo para esconder algunos elementos secundarios que a partir de cierto ancho de pantalla molestan más que ayudan al usuario y para hacer pequeñas adaptaciones para que algunos objetos quepan en el diseño ante distintas situaciones.

En mi caso, he decidido esconder algunos elementos con resoluciones menores de 800px o 600px, pues no permitían que se pudiese ver bien el contenido principal del blog.

@media screen and (max-width: 800px) {
  #header #top p.like,
  #header #top p.breadcrumb,
  #header #top div.vcard p.twitter,
  #header #top div.vcard p.linkedin,
  #header #top div.vcard p.delicious,
  #header #top div.vcard p.google,
  .vcard h2{ display:none;}
}
@media screen and (max-width: 600px) {
  #sidebar .twitter {display:none;}
}

En resoluciones de menos de 800px, escondo los botones de like, el breadcrumb, los botones sociales y alguna cosilla más. A partir de menos de 600px he decidido además eliminar los últimos tweets del sidebar para que no quedase todo tan apretado.

Sencillo, ¿verdad?

Pero las media queries no solo sirven para ocultar contenido. Sino que permiten hacer modificaciones en algunos estilos. Esto es especialmente útil cuando un elemento no se adapta simplemente con anchos pero aun no queremos hacerlo desaparecer. En ese momento le cambiamos un poco el estilo para que se adapte a lo que buscamos.

En mi caso, me daban algunos problemas los botones sociales a poco que bajase el ancho de página, por lo que he decidido cambiar un poco su formato (eliminando iconos y disminuyendo la letra) cuando la página baja de 960px de ancho.

@media screen and (max-width:960px) {
  #header #top div.vcard p {font-size:9px;}
  #header #top div.vcard p.twitter a,
  #header #top div.vcard p.linkedin a ,
  #header #top div.vcard p.delicious a,
  #header #top div.vcard p.google a {background:none; padding:0;width:50%; float:left;}
}

Qué hacer con los menús y sus opciones

Los menús suelen ser un problema grave al hacer nuestras páginas más pequeñas pues al tratarse de un conjunto de elementos medianamente largo que además no forma parte de la información principal de la página (y por lo tanto no podemos permitirnos que ocupe demasiado espacio de la misma) el espacio destinado a los mismos se nos suele quedar corto en algún momento. Completemos esta problemática con que los dispositivos táctiles resultan incómodos con listados de links pequeños (por lo que encoger los links no suele ser una alternativa)

Por suerte podemos recurrir a distintos recursos que solucionan estos problemas. A mi el que más me gusta (de momento) es el de reemplazar los menús por un SELECT que cuando el usuario usa cambiar la dirección de la página que estamos viendo por la del destino del link.

Me gusta porque resume grandes listados en un solo bloque pequeño y porque al mismo tiempo, llegados a un móvil o tablet el comportamiento de los SELECT se vuelve ideal, pues permite al usuario seleccionar sus opciones cómodamente.

Para realizar este cambio os recomiendo el plugin de jquery tinynav un sencillo plugin, con gran compatibilidad, al que indicamos los distintos elementos UL de nuestros listados y el añade antes de estos un SELECT con las características que mencionabamos. Por lo tanto solo nos queda ocultar el propio UL o el SELECT con nuestras media queries para conseguir un resultado óptimo.

En mi caso he añadido el plugin para los listados de links de la cabecera, de forma que al bajar de 800px de ancho estos sean reemplazados por el SELECT en cuestión.

Así que he realizado 3 pasos:

1- Añadir el script y en el “ready” de mi jquery hacer la llamada al nuevo método:

$(".menu ul").tinyNav();

Esto añade el SELECT en los 3 listados de links del menú superior.

2- Añadir a mi CSS básico que no se muestren estos nuevos SELECT.

.tinynav { display: none }

3- Añadir dentro de la media query adecuada el formato del select y la desaparición del propio listado.

@media screen and (max-width: 800px) {
	#header ul.menu li ul {display:none}
	.tinynav { display: block; position:absolute; bottom:5px; width:79%; margin-left:15%}
}

Y ya tenemos nuestros SELECTs por debajo de los 800px de ancho.

Backgrounds de bloques

Aquí, dependiendo de nuestra maqueta es donde podemos tener serios problemas. En CSS decoramos nuestros bloques con imágenes de fondo. Existen inumerables técnicas para hacer esto pero unas son más amigables que otras a los redimensionamientos. Por lo tanto, dependiendo de las técnicas que hayamos utilizado podemos encontrarnos con que nuestros fondos pierden sentido al ocultarse sus bordes.

Esto puede ser simplemente anecdótico en ciertos casos, pero preferible a que el elemento no se adapte al diseño pero en otros puede ser un verdadero quebradero de cabeza.

Soluciónes varias:

  • Cambia todos los fondos que puedas por estilos CSS3 que responderán perfectamente a estos cambios. A día de hoy es fácil dar compatibilidad a la mayor parte de los navegadores para el uso de bordes redondeados, sombras o degradados. Con estas tres funciones CSS es dificil que tus diseños necesiten de muchas imágenes para crear los bloques.
  • Elimina imágenes de fondo (y reemplazalas si puedes por el CSS3 más cercano) a medida que las media queries y anchos adaptables realicen su función
  • En el caso de grandes fondos que ya contenían la situación de un bloque duplica en el bloque este estilo e intenta que se note poco el background original

En mi caso este blog es bastante sencillo y solo me he encontrado con tres tipos de imágenes de fondo molestas:

  • Los bordes del marco de la página, que aun no respetándose, al quedar por debajo de la parte no visible no han resultado molestos
  • Los iconos de algunos títulos, que he debido ir ocultando con media queries a medida que resultaban molestos
  • El background global de la cabecera, que ya incluía el cuadro blanco para el nombre del autor. Aquí he debido replicar el estilo en el cuadro de autor de forma que se solape un fondo con otro al empequeñecer la página

No pongo el CSS de como están resueltas estas partes exactas en mi blog, puesto que en cada caso la solución será distinta.

Se acabó!

Y con todo esto ya hemos conseguido un diseño bastante adaptable. De la rigidez que teníamos con un diseño fijo en 1080px de ancho, ahora tenemos un blog que puede ser disfrutado en un mayor número de dispositivos… pero falta algo. Faltan los móviles, donde el diseño se ve bien con estos cambios pero resulta poco práctico (con sus 2 columnas y elementos apretados en la cabecera).

Solucionando las pantallas móviles en responsive design

Como úlltimo paso debemos definir una visualización correcta para móviles. Esto es así porque el uso que se hará en estos dispositivos no será el mismo que en páginas normales. Sin duda querremos hacer más cambios que simples adaptaciones del ancho de pantalla y desaparición de elementos.

Por suerte, contamos con el viewport para definir como queremos trabajar esta parte.

Comentábamos que el viewport nos sirve para indicar al móvil como deseamos que trabaje su Zoom a la hora de mostrarnos la página. Así pues, básicamente teníamos dos opciones:

Para webs con responsive design adaptado perfectamente a resoluciones móviles:

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

Para webs que no se han adaptado del todo a resolución móvil:

<meta name="viewport" content="width=[Pixeles del mínimo ancho para visualizar bien la web]" />

La primera es la situación ideal, pero también la que más trabajo va a darnos, porque al bajar de los 500-400px de ancho las columnas se vuelven directamente imposibles y eso significa que tenemos que hacer cambios drásticos en la visualización de la web.

La segunda opción puede ser más rápida. Simplemente indicamos que el movil se visualice a la resolución que queramos y así se comportará… seguirá siendo nuestra web normal pero en su versión más encogida.

Pero si escogemos la segunda opción tendremos dos problemas con nuestra web:

  • Por un lado el viewport es global a todos los navegadores móviles, por lo que si indicamos, por ejemplo, un viewport de 500px de ancho provocaremos que en un ipad de casi 800px de ancho se visualice una versión de nuestra web a 500px que sin duda desaprovechará el espacio disponible
  • Por otro, en resoluciones de 320px de ancho, nuestros contenidos se verán bastante reducidos con lo que si no hacemos según que cambios será inmanejable… Pero si adaptamos menús y fuentes también se modificarán en la versión tablet.

En definitiva, marcar un ancho fijo con viewport es la opción rápida pero no la buena.

Lo suyo es que dejemos al móvil mostrarnos la resolución que sea capaz de mostrar usando el primer viewport en nuestro HEAD de la página.

Una vez hemos decidido nuestra visualización debemos ponernos a trabajar en nuestra última media query: la versión móvil.

Aquí normalmente eliminaremos las columnas pasándolo todo a bloques de 100% de ancho. Eliminaremos y comprimirémos algunos elementos más y ajustaremos las fuentes para que la lectura a 320px de ancho resulte cómoda en dispositivos de pequeña pantalla.

Eliminando columnas:

Vamos a poner nuestras columnas una detrás de otra. Existen entonces dos posibilidades.

a. Que en el html ya estuviesen ordenadas tal cual las queremos en la versión móvil.

En cuyo caso bastará con eliminar los floats o cambiar el display:inline-block o display:box por un display:block normal.

@media screen and (max-width: 400px) {
 #content {display:block; float:none; }
}

b. Que no se encontrasen ordenadas.

En cuyo caso deberemos jugar con posiciones absolutas que hagan a estos bloques inferiores pasar a la parte alta de la página y márgenes para desplazar los primeros bloques hacia abajo para que no se crucen.

Imáginemos esta estructura:

<div id="main">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Donde queremos que en la versión móvil los elementos del sidebar queden antes que los de content. Nuestro css tomará un aspecto cercano al siguiente:

@media screen and (max-width: 400px) {
  #main {position:relative; width:100%; }
  #content{margin-top:80px; width:100%; float:none;}
  #sidebar{height:80px; position:absolute; top:0; width:100%; float:none; }
}

En mi caso me encontré en este segundo caso, por lo que en móvil he tenido que recurrir a posiciones absolutas. Además situé el cambio a 450px de ancho, debido a que la visualización se volvía realmente incómoda a partir de ese punto.

@media screen and (max-width: 450px) {
  #main #sidebar  {display:block; float:none !important; width:100%; position:absolute; top:-80px; margin:0 !important; border-bottom:1px solid #aaa; padding:0 0 20px 0;}
  #main #content {float:none; width:auto; margin:100px 0 0 0; }
}

Ajustando Fuentes

Las fuentes que en su día se diseñaron para ajustarse a grandes pantallas, con un layout de columnas, etc. Cuando cambiamos a las pequeñas pantallas de movil en vertical estas suelen no ser las más cómodas para la lectura: Ocupan demasiado ancho, destacan demasiado los titulares y el texto del cuerpo suele ser difícil de leer. Por lo tanto es conveniente hacer una revisión de todas para ajustar la visualización a una versión cómoda.

En mi caso he tenido que cambiar todo el estilo de las fuentes de los menús, disminuir los titulares y aumentar el cuerpo de los artículos:

  #header ul.menu li,
  #header ul.menu li.analytics,
  #header ul.menu li.development {background:none;}
  #header ul.menu li h4 {margin:30px 0 0 0px; font-size:12px; text-indent:10%;}

  #main #content .hnews h3 a,
  #main #content .hnews h1 a{ font-size:22px; }
  #main #content .hnews .entry-content {font-size:16px;}

Otros ajustes

Por último, queda dejar “bonito” el resultado. Como antes, revisemos nuestros elementos, reestilicemos aquellos que no se ajusten a lo que queremos y eliminemos aquellos que no tengan cabida.

En mi caso he tenido que eliminar del todo el bloque de autor, pasar a horizontal los elementos del sidebar y mover algunos márgenes de sitio.

Con todo esto ya tendremos nuestra web móvil lista para trabajar.

Testing y pruebas

Para trabajar con todo lo aquí explicado es esencial poder testear lo que vamos haciendo y los cambios que vamos provocando. Aquí me gustaría compartir con vosotros dos recursos:

1. Para probar en el navegador:

Debemos ir ajustando el ancho de pantantalla para ver como nuestras adaptaciones van tomando forma y detectar pequeños ajustes a realizar en nuestras media queries.

Para ello tenemos dos opciones:

  • Directamente desmaximizar nuestro navegador e ir jugando con su ancho
  • Usar herramientas como ish que nos permitirá ir haciendo estos ajustes con sencillos botones

2. Evitando la caché movil

Los móviles en su afán por no solicitar más datos de los estrictamente necesarios cachean mucho más que un navegador tradicional. En un navegador suele bastar con presionar CTRL+F5 para provocar cargas sin cacheo. En móviles es más dificil y algunos navegadores nisiquiera tienen la opción de desactivar esta caché.

Para trabajar de forma más cómoda me gustaría daros tres consejos:

  • Usar variables en la llamada CSS. Es decir en lugar de llamar a “/styles.css” llamaremos a “/styles.css?version=xxxx” cambiando en cada caso el numero de versión para que la url sea distinta y por tanto no se use caché
  • Trabajar en el navegador. Subiendo un poco la resolución mínima móvil (420px-450px) podremos provocar que esta sea vista en nuestro navegador cuando lo encojamos lo suficiente. También usando herramientas de redimensionado de página podemos provocar estas acciones. Esto resultará sin duda más cómodo para muchas pruebas pero no evita probar finalmente en el propio móvil

Conclusión

Poco a poco hemos ido viendo y conociendo las distintas técnicas y tecnologías que suelen aplicarse al responsive design pero aplicándolas a una web existente en lugar de al desarrollo de webs nuevas.

¿Hemos hecho una web con responsive design?

La respuesta es clara: NO. Hemos hecho más adaptativa una web que no fue creada para serlo. En consecuencia hemos cometido muchos errores durante el proceso:

  • Hemos eliminado elementos que en su día consideramos vitales. Además lo hemos hecho por su aspecto no por su importancia en la información transmitida al usuario
  • Seguramente no hemos conseguido una visualización perfecta en todos los casos. Hemos mejorado la que había, pero el resultado no es el mismo que si hubiesemos planificado todo esto de antemano
  • Por último, yo he podido llegar al final con esta web, pero muchas webs, dependiendo de la maqueta de la que surjan no podrán llegar tan lejos y tendrán que conformarse con soluciones intermedias

Estos son los detalles, pero más importante que todo esto es que lo que hemos hecho ha sido una maqueta adaptable sobre un diseño que no era adaptativo. Responsive Design nos habla de diseño, no de maqueta, por lo que debe venir directametne desde el concepto de diseño para que termine de tener sentido para todos. No se trata de ser “guay” y poder mostrar una web que se encoje y se adapta mínimamente al movil sino que nuestro proyecto debería haber surgido bajo el paradigma de ser multidispositivo, valorando en cada caso su usabilidad.

Sin duda, si sigues este tutorial y lo aplicas a tu web podrás hacer maquetas responsive pero eso no significa que puedas hacer responsive design. Como decía al principio, sigue faltando mucha base, mucho conocimiento y muchos procesos (no tan puntuales, no tan técnicos) para conseguirlo en una empresa normal. Podremos hacer nuestros pequeños proyectos, pero para empresas, este proceso sigue siendo un trauma doloroso por el que yo no aconsejaría a nadie pasar.

#html5 #Responsive #Design para novatos. Tutorial básico by @bocabit

Fuente: bocabit.elcomercio.es

Responsive Design en seesparkbox

Responsive Design en ##http://seesparkbox.com/##seesparkbox##
Desde la llegada de HTML5 y CSS3, el Responsive Design o “Diseño Sensible” es una nueva técnica que se está empezando a utilizar cada vez más. Consiste básicamente en adaptar los diseños de las páginas web en función del tamaño de la ventana del navegador, cambiando según esta aumenta o disminuye y sin necesidad de disponer varias versiones de CSS o HTML.

 

Podéis ver un pequeño ejemplo si redimensionáis el blog o si lo véis en un iPad; o podéis flipar si comprobáis hasta que punto se puede utilizar esta técnica entrando a Smashing Magazine o en mi página personal.

El ejemplo que os voy a proponer es muy simple y solo cuenta con 3 pasos: Añadir un meta tag al header, añadir compatibilidad con navegadores antiguos y realizar modificaciones en el CSS.

 

1. Añadir el meta tag para la escala

En primer lugar debemos añadir el siguiente código entre las etiquetas “<head>” de nuestra página.
[html]<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>[/html]

Básicamente lo que hace esta etiqueta es ajustar el ancho al ancho del dispositivo (sea un navegador o un dispositivo móvil) e indicar que no se debe hacer zoom inicialmente.

2. Añadir compatibilidad con navegadores antiguos

Como las versiones antiguas de Internet Explorer no soportan el meta “viewport”, debemos añadir un javascript que realice su función.

[html]<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script&gt;
<![endif]–>[/html]

3. Aplicar modificaciones al CSS

Ahora tendremos que escribir el código CSS necesario que deseamos modificar el función de la resolución. Voy a utilizar como ejemplo el CSS que yo he utilizado para desplazar la barra lateral a debajo del contenido cuando la resolución del dispositivo está entre 700px y 1000px (es decir, para que funcione en un iPad).

El funcionamiento es el mismo que si utilizásemos un condicional.
[css]
@media screen and (min-width: 700px) and (max-width: 1000px) {
/*Todo lo que añadamos aquí se utilizará solo en resoluciones X, donde 700px<=X<=1000px*/
}[/css]

Ya con el nuevo código CSS para desplazar la barra lateral para que no permita elementos flotantes a los lados y ajustar toda la maquetación a 700px tendríamos algo como lo siguiente:
[css]
@media screen and (min-width: 700px) and (max-width: 1000px) {
#container{
width: 700px;
}

#sidebar-content{
clear: both;
width: 100%;
float:none;
}
}[/css]

Tened en cuenta que todo el código se encuentra dentro del condicional y que podríamos jugar con los valores de este de tal manera que mostremos un código a anchuras menores, mayores o entre otros dos valores. Las posibilidades son bastante extensas.

También puede interesar…

Más Información | Web Designer Wall
Inspiración | DesignModo

25 Useful #HTML5 Tools For Designers & Developers by @graphicdesignju

Fuente: graphicdesignjunction.com

Post image of 25 Useful HTML5 Tools For Designers & Developers

The latest version of HTML – HTML5, adds many cool new elements to the applications that are being developed. These days it has become important for the web developers to learn and use the intricate elements of HTML5 to develop web apps and iOS-friendly sites. Did you know that Google has developed a HTML5 version of YouTube? This further encourages the developers to explore the potential of the markup language.

Here we have fresh HTML5 resources which are very useful for both designers and developers. HTML5 is an extremely useful markup language for enhancing user experience and usability. It is becoming more and more popular, as a web developer or designer, you’ll need to keep up with the latest news and learn new skills.

Today’s we put together a list of twenty five useful HTML5 Tools and resources to help save you time and energy along the way. The collection based on framework, libraries, tools, techniques, and plugins. Enjoy!
HTML5 Framework & Tools For Designers & Developers

HTML5 is making the web design more powerful in different areas. Fast, Secure, Responsive, Interactive and beautiful. These  words are  belongs to HTML5. HTML5 have many features that allow developers and designers to create apps and websites with the functionality, speed, performance, and experience of desktop applications. These HTML5 Tools can help to develop your project must faster and easier.

Here is the list of 25 HTML5 frameworks and Tools for front-end designing and development. Enjoy!
RazorFlow: Create Responsive & HTML5 Dashboards With PHP Framework

RazorFlow: Create Responsive & HTML5 Dashboards With PHP Framework

RazorFlow is a PHP framework for quickly and easily creating Responsive and HTML5 dashboards that work well on all major devices and browsers. It works by simply inserting a single PHP file into any app, feeding it with data and choosing the output type. It can work with MySQL, PostgreSQL, or SQLite databases.

Demo Download
Zebra: Create Desktop-Like User Interface With HTML5 Canvas

Zebra: Desktop-Like User Interface With HTML5 Canvas

Zebra is a JavaScript library that come up with a rich user interface components for creating desktop-like layouts. The UI elements are built with HTML5 canvas, colored with CSS and expected to be rendered the same on all modern browsers.

Demo Download
Workless: HTML5-CSS3 Framework for Building Cross-Browsers Websites

Workless: HTML5-CSS3 Framework for Building Cross-Browsers Websites

Workless is an HTML5-CSS3 framework for building cross-browsers websites with ease. It is a project that started as a mashup of Bootstrap + HTML5 Boilerplate, evolved more and now has most of the frequently-used stuff.

Demo Download
Native: HTML5 Mobile Apps Framework

Native: HTML5 Mobile Apps Framework

Junior is a HTML5 framework for front-end creating mobile apps that look and behave like native. It’s a pretty easy to use and has the documents + examples to get you started. It uses CSS3 transitions for a slick performance, supports swipable carousels and includes various UI components (from Ratchet).

Demo Download
Radi: Visual Design Application with HTML & JavaScript

Radi: Visual Design Application with HTML5 and Javascript

Radi is a awesome visual design application creating websites with standard and human-readable HTML + JavaScript code. It has built-in tools for creating/editing graphics (they can be imported too) and generating animations with <canvas> output that work in all modern browsers including mobile.

Demo Download
HTML5 Bones: Boilerplate for HTML5-powered Websites

HTML5 Bones: Boilerplate for HTML5-powered Websites

HTML5 Bones is a boilerplate for HTML5-powered websites including the most-required stuff (normalize.css, html5shiv, etc.) in the markup. It simply shows the usage of HTML5 markup including header, section, article, footer and more (there is also an example of video as well).

Demo Download
Literally Canvas: HTML5 Drawing Widget

Literally Canvas: HTML5 Drawing Widget

Literally Canvas is a HTML5 open source widget, which can be integrated into any page, for enabling users to draw online. It comes with a simple set of tools including draw, erase, color-picker, undo, redo, pan and zoom.

Demo Download
HTML5 Sortable: HTML5 Drag and Drop For List

HTML5 Sortable: HTML5 Drag and Drop For List

HTML5 Sortable is a lightweight (<1kb when minified/gzipped), supports “connected lists (moving items between different lists)” and works in all major browsers. This plugin uses the native HTML5 drag and drop API for creating sortable lists/grids and provides a similar API + behavior when compared to jQuery UI’s sortable.

Demo Download
Gauge.js: Animated Gauges With HTML5 Canvas

Gauge.js: Animated Gauges With HTML5 Canvas

Gauge.js is a slick script for creating animated gauges with JavaScript (Coffeescript) in HTML5 canvas. The script is standalone (jQuery is supported but not required) and doesn’t use any images or CSS.

Demo Download
Sonic: HTML5 Loaders with an Editor

Sonic: HTML5 Loaders with an Editor

Sonic is a tiny JavaScript class for creating such loader images with HTML5 canvas. There are ready-to-use examples provided and a web-based Sonic Creator exists for creating loaders and getting them as a HTML5 canvas code, animated GIF or a sprite image with the CSS3 code.

Demo Download
Chart.js: Charting Library with HTML5 Canvas

Chart.js: Charting Library with HTML5 Canvas

Chart.js easy, object oriented JavaScript charting libaray with html5 canvas for designers and developers. It currently supports 6 chart types (line, bar, radar, pie, column and polar area) and all this comes in a standalone, <5kb package.

Demo Download
WYSIHTML5: Rich Text Editor With HTML5 Markup

WYSIHTML5: Rich Text Editor With HTML5 Markup

WYSIHTML5 is an open source rich text editor, developed by Xing, that produces non-bloated, valid HTML5 code. The editor doesn’t rely on any JS framework, it islightweight and loads/works pretty fast. It transforms textarea fields and provides the major stuff including text styles (bold, italic), lists, headers, inserting images or links and coloring the text.
WYSIHTML5 speeds up the writing process by auto-linking the URLs and offers a secure usage by using sandboxed iframes in order to prevent identity theft through XSS.

Demo Download
Percentage Loader: Attractive Loader With jQuery & HTML5

Percentage Loader: Attractive Loader With jQuery & HTML5

Percentage Loader is a jQuery plugin which makes use of HTML5 canvas (no images) for creating a very good looking loader.

The loader is only 10kb (minified), can also be used as a drag ‘n’ drop supportedcontroller (like a circular volume button) and multiple instances of it can be displayed in the same page.

Demo Download
Howler.js: JavaScript Library For Web Audio

Howler.js: JavaScript Library For Web Audio

Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.
It accepts multiple file formats for cross-browser compatibility, has caching and can play many sounds at the same time (it is also mute/un-mute them one-by-one or globally).

The sounds can be looped, a fadeIn/fadeOut effect exists and standard media controls are just a part of the library.

Demo Download
Audio5js: HTML5 Audio Library

Audio5js: HTML5 Audio Library

HTML5 audio is awesome, so easy to implement and works fast. The only thing that can stop you from using it is the lack of support for older browsers.
Audio5js is a lightweight JavaScript library that solves this compatibility issue nicely.
It provides support for multiple codecs and fallback to a Flash-powered MP3 playerwhen needed.

Demo Download
Fabric.js: HTML5 Framework

Fabric.js: HTML5 Framework

Fabric.js HTML5 Canvas coding framework with offering methods for creating objects and manipulating them, the framework also works as a SVG-to-Canvas parser (and vice-versa).

Demo Download
D3-Cloud: Word Clouds With JavaScript and HTML5

D3-Cloud: Word Clouds With JavaScript and HTML5

D3-Cloud is a beautiful and open sourced implementation of word clouds that are familiar from Wordle.com.
It is built with the D3.js library, uses HTML5 canvas for drawing the output and works asynchronously for a good performance.

Demo Download
cgSceneGraph: Animation Framework With HTML5 Canvas

cgSceneGraph: Animation Framework With HTML5 Canvas

cgSceneGraph is an object-oriented and easy-to-use JavaScript animation frameworkthat is built on top of HTML5 canvas.

It is created with professional apps and games in mind, works cross-browser and has lots of built-in nodes like images, text, buttons, shapes, etc.

Demo Download
Native Form Elements: All Form Elements in One Place

Native Form Elements: All Form Elements in One Place

HTML form elements look and behave slightly (or sometimes more) different in each browser.

In order to find out the differences and test them easily, there is a website: Native Form Elements. it lists all the form elements including HTML5 elements and their disabled states.

Demo Download
Font Dragr: Online Drag and Drop Font Testing Tool

Font Dragr: Online Drag and Drop Font Testing Tool

A revolutionary way to test custom fonts in the browser. No coding, no uploading, justdrag and drop. As a designer, choosing a decent font can be a tough process! Use this awesome font bookmark to instantly view any web page in a new font without changing any HTML or CSS! Harness the power of HTML5 and @font-face by dragging the font.ttf files into the top toolbar and they will appear in a list for quick view.

Demo Download
jQuery HTML5 Uploader: Lightweight jQuery Plguin

jQuery HTML5 Uploader: Lightweight jQuery Plguin

jQuery HTML5 Uploader is a lightweight jQuery plugin that lets you to quickly add an upload system a-la-Gmail into your web app. You only need to create a dropbox element (i.e. a div) and jQuery HTML5 Uploader will do the rest. Then you can drag & drop one or more files on the element and the files will be uploaded. It also works with the multiple input file element.

Demo Download
HTML5 File Uploads with jQuery

HTML5 File Uploads with jQuery

Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers. Uploading files using HTML5 is actually a combination of three technologies – the new File Reader API, the also new Drag & Drop API, and the good ol’ AJAX (with the addition of binary data transfer).

Demo Download