#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>