IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM RESPONSIVE DESIGN. Bernardo Chenlo

Transcripción

1 IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM 1 RESPONSIVE DESIGN Bernardo Chenlo

2 2 INTRODUCCIÓN Qué es Responsive Design?

3 Responsive Design El contenido se adapta a la pantalla porque el navegador responde a su entorno. Objetivo: Proporcionar una buena experiencia de usuario, independientemente del dispositivo y del tamaño de su pantalla. No sólo se adapta el contenido, sino también la estructura del sitio, e incluso las imágenes.

4 La importancia del móvil

5 MOBILE FIRST En lugar de hacer el diseño primero para desktops y modificarlo posteriormente para adaptarlo a móviles, empezamos el diseño para móviles, al ser los dispositivos más pequeños, y posteriormente adaptamos para los demás tamaños mayores.

6 PERO HAY MÁS DISPOSITIVOS

7 Breakpoints Los breakpoints son los tamaños del navegador en el que una web reestructura su contenido. Los breakpoints más habituales son: <768px (teléfonos) Entre 768px y 992px (tablets) Entre 992px y 1200px (ordenadores) >1200px (grandes monitores)

8 Viewport Viewport: Área usada por el navegador para mostrar contenido. Podemos fijar el ancho y el alto del viewport mediante una etiqueta meta en el HTML de la página Podemos usar un número fijo (320px, 480px, etc ) o usar constantes como device-width y device-height. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

9 IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM 9 TESTING RESPONSIVE DESIGN Bernardo Chenlo

10 10 HERRAMIENTAS Probando el diseño responsive en un navegador

11 Testing entre navegadores Es fundamental comprobar el aspecto de nuestra web en todos los navegadores y dispositivos posibles. Podemos probar uno a uno en todos los navegadores que existen. Existen muchas herramientas, muchas dentro de los propios navegadores para ayudarnos,

12 Google Chrome Herramientas de desarrollador > Pestaña responsive Ahí podemos ver la web con el viewport de los distintos dispositivos más populares del mercado, o seleccionar nosotros el tamaño.

13 Chrome Herramientas de desarrollador > Pestaña responsive Ahí podemos ver la web con el viewport de los distintos dispositivos más populares del mercado, o seleccionar nosotros el tamaño.

14 Firefox Desarrollador > Vista de diseño adaptable. Podemos ver cómo queda la web con distintos tamaños

15 15 HERRAMIENTAS Probando en distintos dispositivos

16 Testing en dispositivos Para probar nuestra web en los distintos navegadores, de los distintos sistemas operativos, de los distintos dispositivos, tenemos dos opciones: Probar todas las opciones de manera real Usar simuladores de dispositivos Actualmente hay 5 sistemas operativos móviles ios Android Windows Phone BlackBerry OS Firefox OS

17 ios Simulator Instalando Xcode, el kit de desarrollo para Mac, podemos ejecutar el ios Simulator y ejecutar el navegador Safari del simulador.

18 Android Simulator El simulador de Android está disponible tanto para Windows como para Mac y podemos simular las distintas versiones del sistema operativo móvil.

19 Firefox OS Simulator El simulador de FirefoxOS es un plugin del navegador Firefox.

20 Soluciones online

21 21 VIEWPORT Configurando el tamaño

22 Viewport Si queremos optimizar nuestra web para múltiples dispositivos, debemos incluir la etiqueta meta con el viewport. Esta etiqueta da instrucciones sobre como debe mostrar la página el navegador. <meta name="viewport" content="width=device-width, initial-scale=1"> width=device-width Ajusta el ancho a los pixels independientes initial-scale=1 Establece una proporción 1:1 entre los pixels CSS y los independientes

23 IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM 23 RESPONSIVE LAYOUT Bernardo Chenlo

24 24 INTRODUCCIÓN Responsive Layouts

25 Layouts La estructura o layout de la página es un elemento fundamental para la experiencia del usuario. Los 3 tipos de layout más populares son: fixed width layout fluid layout elastic layout

26 Fixed width layout Esta estructura posee un <div> que hace de contenedor principal, con un ancho fijo, que se mantiene, independientemente del tamaño del dispositivo. Usamos esta estructura si queremos que nuestra web mantenga las mismas proporciones en todos los dispositivos

27 Fixed width layout

28 Fixed width layout samsung.com

29 Ejercicio Fixed layout Crear una carpeta llamada static Hacer la siguiente estructura estática: 960px - <div id= wrapper > - Contenedor 650px - <section> - Sección principal 300px - <aside> - Sección secundaria

30 Elastic Layout Definimos los anchos en lugar de en pixels en em. Si el usuario cambia el tamaño de la letra, la proporciones de la estructura de la web se mantienen intactas. Webs accesibles a todos los usuarios

31 Elastic Layout Definimos los anchos en lugar de en pixels en em. Si el usuario cambia el tamaño de la letra, la proporciones de la estructura de la web se mantienen intactas. Webs accesibles a todos los usuarios

32 Elastic layout 576/16 = 36em 192/16 = 12em

33 Elastic layout Ulster plantation

34 Ejercicio - Elastic Layout También podemos hacer el ancho relativo al tamaño de la fuente usando width: x em; Layout: Contenedor 960 / 16 = 60 Sección principal 650 / 16 = 25 Sección secundaria 300 / 16 = 18

35 Fluid Layouts En lugar de usar un número fijo pixels o utilizar valores proporcionales al tamaño de la letra, utilizamos porcentajes del tamaño del viewport. Al cambiar el tamaño del viewport, la web se escalará manteniendo las proporciones.

36 Fluid layout (navegador a 960px)

37 Fluid layout (navegador a 1600px)

38 Fluid layout (Flickr)

39 Ejercicio Fluid Layout Convertirlo el static layout en fluid layout En lugar de usar pixels para las dimensiones de las áreas, usamos porcentajes: Layout: 90% contenedor 67, % section (650/960) 31,25% aside (300/960)

40 IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM 40 MEDIA QUERIES Bernardo Chenlo

41 El poder de las media queries Las media queries nos permiten especificar un estilo CSS u otro según las propiedades del dispositivo. Fueron introducidas en la especificación de CSS2.1 Hay dos tipos: Media types Media queries

42 Media Types Permiten cargar unas hojas de estilo u otras dependiendo del tipo de dispositivo que muestre el documento. Algunos de los dispositivos soportados: all: todos los dispositivos handheld: dispositivos de mano print: impresoras projection: proyectores screen: pantallas de ordenador

43 Media Types <link rel="stylesheet" type="text/css" href="all.css" media="all" /> <link rel="stylesheet" type="text/css" href="scr.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />

44 Media queries Se añadieron en CSS3 para que los diseñadores pudieran tener más control sobre la que las webs se muestran en distintos dispositivos. Permite aplicar unas propiedades CSS u otras dependiendo de algunas características que tenga el navegador en ese momento, como el ancho o el alto. width min-width max-width height min-height max-height

45 Sintaxis Ejemplo 1 all and (max-width: 767px) { } all p { font-size:1.6em; } En todos los dispositivos and (max-width: 767px) Si el ancho del navegador en como mucho 767px Dispositivos móviles o pequeñas tablets Un ipad tiene al menos 768px de ancho

46 Sintaxis Ejemplo 2 screen and (min-width:767px) and (max-width:1023px) { p { font-size:1.4em; } } screen El dispositivo es una pantalla and (mix-width:767px) and (max-width:1023px) El ancho del navegador está entre 768px y 1024px

47 47 MOBILE FIRST BLOG Enfocando el desarrollo de una web empezando con la versión y utilizando media queries

48 Paso 1 Estructura HTML5 Crear esqueleto HTML5 y enlazarlo con su CSS Contenido <header> <h1> blog <main> <article> <h2> titulo <p> 01/01/2000 <p> lorem <aside> <h2> articulosrelacionados <ul> enlaces(3)

49 Paso 2 Aspecto inicial <body> margin:0 padding:0 font-size:14px <header> background:#304480

50 Paso 3 Optimizar para desktop Al agrandar el navegador, tenemos un sitio de una sola columna. En móvil el uso de un layout de una sola columna funciona bien, pero no tanto en viewports más grandes. Mediante media queries colocar el listado de artículos relacionados como una barra lateral a la izquierda del artículo. Optimizar el ancho del contenido para tablets (768px) Optimizar el ancho del contenido para pantallas (1024px)

51 51 RWD FRAMEWORKS Facilitando el desarrollo responsive

52 Por qué usar frameworks? Ahorro tiempo de desarrollo Gran comunidad de desarrollo detrás Compatibilidad entre navegadores Documentación

53 RWD Frameworks Skeleton Ancho fijo de 960px 16 columnas Bootstrap Desarrollado por Twitter Muchos elementos de interfaz extra Foundation Similiar a Bootstrap pero con otra interfaz