Básicos

A lo largo de esta sección encontraras una guía para el desarrollo de contenido web responsive, presupone que tienes un conocimiento básico de HTML5. En caso contrario puedes remediarlo en este mismo sitio.

Se usa como framework de diseño Bootstrap 3 y jQuery.

Los elementos en HTML (Lenguaje de marcado para hipertextos - Hypertext Markup Language) usualmente son bien elementos "en línea" o bien elementos a "nivel de bloque".

Un elemento a nivel de bloque ocupa el espacio entero de su elemento padre (el contenedor), creando así un 'bloque'. Las siguientes etiquetas son elementos de bloque en HTML5:

Un elemento en línea ocupa sólo el espacio acotado por las etiquetas que lo definen. Las siguientes etiquetas son elementos en línea en HTML5:

Plantilla Base

Para los objetivos del curso usaremos Bootstrap y jQuery. Nuestros archivos tendrán la siguiente plantilla base.

<!DOCTYPE html>
<html lang='es-es'>
<head>
  <meta charset='utf-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Web responsive</title>
  <meta name='Author' content='' />
  <meta name='copyright' content='© 2016 '>
  <meta name='date' content='' /> 
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='images/favicon.ico' type='image/x-icon' rel='shortcut icon' />
  <link href='images/favicon.ico'  rel='icon' />
</head>
<body>
<div class='container'>
   Contenido
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>
Nota: Modifique de acuerdo a sus necesidades, el contenido de dicha plantilla y guarde el archivo en una carpeta llamada wresponsive bajo el nombre de index.html

Observe que los script de jQuery y Bootstrap son cargados desde CDN motivo por lo cual necesitara conexión a internet. En caso contrario descargar las versiones apropiadas a su equipo local

Bootstrap es un framework basado en HTML y CSS, fue creado por Twitter. Este framework nos ayuda a agilizar la creación del interfaz de nuestra página web. Con la particularidad, que usando Bootstrap, nuestro sitio estará adaptado a la pantalla del dispositivos con el que accedemos, ya sea una computadora, tablet, smartphone, televisión.... Esto significa que tendremos una Web responsive o adaptativa, y fundamental de cara al posicionamiento en Google.

jQuery es una librería JavaScript open-source, que funciona en múltiples navegadores, y que es compatible con CSS3. Su objetivo principal es hacer la programación “scripting” mucho más fácil y rápida del lado del cliente. Con jQuery se pueden producir páginas dinámicas así como animaciones parecidas a Flash en relativamente corto tiempo.

El móvil es lo más importante

Bootstrap 3 se ha pensando en los móviles. Así que en vez de incluir algunos estilos opcionales para móviles, todo eso ya está incluido en el propio Bootstrap. Por eso nos gusta decir que para Bootstrap 3, los dispositivos móviles son lo más importante.

Para que las páginas se muestren correctamente y el zoom funcione bien en los dispositivos móviles, es importante que añadas la siguiente etiqueta dentro de la cabecera <head> de las páginas:

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

Si quieres deshabilitar el zoom en tus páginas, añade la propiedad user-scalable=no a la etiqueta anterior:

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

Al añadir la propiedad user-scalable=no, los usuarios ya no podrán hacer zoom en la página y solamente podrán hacer scroll en sus contenidos. El resultado es que el comportamiento de la página se parece más al de una aplicación móvil nativa. En cualquier caso, limitar las libertades de los usuarios puede ser contraproducente y por tanto, no te recomendamos que utilices esta opción en todos tus sitios. http://librosweb.es/libro/bootstrap_3/capitulo_2.html

Primeros pasos

Si observa el código de la platilla base encontrara una línea que inicia con la eqiquta div. La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.

En nuestro caso dicho contenedor tiene la siguiente notación basada en el framework antes mencionado.

<div class="container">
         Contenido
   </div>

Ahora sustituya el contenido de dicho contenedor por su texto, Por ejemplo:


See the Pen OXoGaQ by JOSE (@albatros) on CodePen.

Nota: Prueba tu código. ¡El texto carece de formato!.

Para definir un parrafo usamos el tag <p> y </p>.

Para dar un poco de estilo personalizado a nuestra página, usaremos hojas de estilo. La plantilla base usa Bootstrap. Observe que en el código propuesto usamos una hoja de estilo personalizada que usa un media queriy que hace que el tamaño de la letra del body cambie a 18px si la pantalla tiene un mínimo de 1024px de ancho .

Una media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo. Añadido en CSS3, las media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí.

Observe el siguiente fragmento de código.


See the Pen WrPaKP by JOSE (@albatros) on CodePen.

Para hacer esto agregar al final del <head> la siguiente línea

<link href='estilo.css' rel='stylesheet'>

Visualiza tu código en diferentes dispositivos

Listas con Bootstrap

Además de las listas contenidas en html5, Bootstrap agrega los siguientes estilos

Listas sin estilo

See the Pen qbPzxG by JOSE (@albatros) on CodePen.

Listas horizontales

See the Pen zrEVpM by JOSE (@albatros) on CodePen.

Listas de definición

Listas de definición horizontales

See the Pen vLeqPG by JOSE (@albatros) on CodePen.

Imagenes

<img alt='' class='' src='url'>

Alineación de imagenes en Bootstrap
Clase Descripción Ejemplo
pull-left Alinea la imagen a la izquierda, colocando el texto a la izquierda Tranvia cerrado
pull-right Alinea la imagen a la derecha, el texto se alinea a la derecha Tranvia cerrado
center-block Imagen centrada a los margenes del contenedor

Estilizado de imagenes

Bootstrap incorpora ciertos estilos básicos para aplicar a nuestras imágenes, tales, como redondear bordes, formas circulares y aspecto miniaturas

.img-rounded − Suma border-radius:6px redondeando los bordes

.img-circle - redondea toda la imagen con border-radius:500px

.img-thumbnail − Suma un bit de padding y borde gris.

See the Pen qbVLmd by JOSE (@albatros) on CodePen.

Imagenes thumbnails

El diseño de imágenes, vídeos, texto, etc, en una cuadrícula y en miniatura es común, y Bootstrap tiene una manera fácil de hacer estos.

Añadir una etiqueta <a> con la clase thumbnail alrededor de una imagen

Esto añade cuatro píxeles de padding y un borde gris y un resplandor de animación describe la imagen, al colocar el cursor del mouse sobre de ella.

El siguiente ejemplo muestra este tipo de imagenes

See the Pen WrMdNR by JOSE (@albatros) on CodePen.

Contenido personalizado

Ahora que tenemos una miniatura básica, es posible añadir cualquier tipo de contenido HTML como encabezados, párrafos, o botones en miniaturas. Siga los pasos a continuación

Cambie la etiqueta <a> que tiene una clase de .thumbnail a un <div>.

Dentro de ese <div>, puede añadir cualquier cosa que necesite.

Si desea agrupar varias imágenes, use una lista desordenada y cada elemento de la lista se flota hacia la izquierda.

El siguiente código lo demuestra

See the Pen adQVpa by JOSE (@albatros) on CodePen.


Los desarrolladores generalmente presentan la misma imagen en múltiples resoluciones, sin importar la diversidad de dispositivos y sus correspondientes resoluciones. Por lo que los dispositivos de alta resolución puede obtener una imagen óptima para una resolución dada, mientras que los dispositivos de baja resolución ven reducida la velocidad de carga y consumen ancho de banda.

Si bien las tabletas y celulares pueden tener una excelente resolución regularmente el ancho de banda que consumen es caro y limitado

Imágenes responsivas

Se trata de imágenes que se adaptan al tamaño del contenedor ocupando el 100% del mismo. Su sintaxis es:

<img alt='' class='img-responsive' src='url'>

Sólo debemos añadir la clase img-responsive y la imagen se adaptará al contenedor. Siempre podemos añadir un max-width para que no sobrepase un tamaño deseado.

La siguiente imagen representa un tranvía que recoría las calles de la ciudad de Veracruz, México. Note que la imagen se centra y se visualiza correctamente al ancho de su dispositivo

Ejemplo