Embed Size (px)
Citation preview
Responsive Web Design Interfaces Web Adaptables al dispositivo
empleando HTML5 y CSS3
Adrián Alonso Vega
RESPONSIVE DISPOSITVOS CSS3 ADAPTABLE HTML5
1/32
Introducción
Este proyecto tiene como objetivo presentar la filosofía “Responsive Web Design” que actualmente se encuentra en auge
• 5000 millones de dispositivos conectados a Internet • En 2020, 31.000 millones de dispositivos • Triplicada la venta de tablets en mercado español
BUSCAR SOLUCIONES
Adaptar UI a tamaños y resoluciones diversas
• 2000. Páginas webs optimizadas a resolución • 2007. Lanzamiento de Iphone • 2008. W3C en “Mobile Best Practices” definió el concepto One Web • 2010. Responsive Web Design por Ethan Marcote
ADELANTARSE AL FUTURO UNA WEB PARA GOBERNARLOS A TODOS
2
¿Qué es Responsive Web Design?
• Filosofía para solucionar problemas de diseño para la diversidad de dispositivos
• Una misma web para todo tipo de dispositivo (Un solo código) • No debe importar resoluciones, tamaños ni orientaciones, la web
debe adaptarse al dispositivo
3 CLAVES: Media Queries Proporciones Elementos Flexible
3
Crecimiento del dispositivo Móvil
• En India el uso del dispositivo móvil ha superado al de escritorio
• Se estima que entre finales de este año y 2015 el dispositivo móvil reine sobre el de escritorio a nivel global
• Comercio electrónico cada vez más importante en estos dispositivos
• En 2012 3000 millones de dólares mas que en 2011 en EBAY
• En 2011 el tráfico de Twitter fue del 55% • En 2011, 1 de cada 7 búsquedas en Google a través de dispositivo
móvil • Actualmente, 68% de penetración móvil en Facebook
Dispositivos indispensables en nuestras vidas, siempre se llevan encima.
4/30
Aplicación Nativa vs Aplicación Web
- Fácil Mantenimiento
- Última versión actualizada
- No requiere supervisión
- En cualquier plataforma.
- Muy eficientes
- Características del dispositivo
- Apoyo de los markets de apps
- Compatibilidad con navegadores
- Requieren conexión a internet
- Privacidad
- Propio entorno y lenguaje
- Mayor coste
- Necesario portar para otras
plataformas
VENTAJAS
INCONVENIENTES
VENTAJAS
INCONVENIENTES
5/30
6/30
Tipos de Layouts
Fijos
Elásticos
7/30
Media Queries
@media screen and (min-width: 960px) { /* Código CSS*/ }
MAX-WIDTH MIN-WIDTH ORIENTATION MIN-DEVICE-WIDTH
8/30
Viewport
• Zona visible del navegador • Por defecto, navegadores muestran sitio completo • Gracias a la meta viewport definimos
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
9/30
Medidas Relativas
#column1 { width: 45%; } #column2 { width: 30%; } #column3 { width: 35%; }
CAMBIAR LA FORMA DE PENSAR
#wrapper { width: 90%}
10/30
Imágenes Flexibles
img { max-width: 100%;}
11/30
Fuentes Flexibles
<body> <p> Responsive <span>Design</span> mola! </p> </body>
body{ font-size: 100%}
14px/16px= 0.875 em
p { font-size: 0.875em}
18px/14px = 1.2757em p span { font-size: 1.2857em }
12/30
Mostrando y ocultando contenido
display:none
visibility
Inconveniente: Se carga todo aunque no se muestre
13/30
Rendimiento Web
Preocupante, por que mostrar la web en móvil requiere un coste Objetivo: Mejorar experiencia de usuario
Recomendaciones: • Emplear herramientas para analizar tiempo de cargas y evaluar rendimiento • No abusar de display:none • CSS Y JS en únicos ficheros, evitar muchas peticiones HTTP • Evitar embeber CSS Y JS, siempre en ficheros, se cachean • Minimizar código • CSS en el header y JS al final. • Evitar redireccionamientos
14/30
Compatibilidad de Navegadores
CROSS BROWSER: Diseño de páginas webs que se ven y se comportan exactamente igual sin importar el navegador
SOLUCIONES: Hojas de estilos específicas
Validar HTML y CSS RESET CSS
15/30
IE y los MediaQueries
Microsoft no da soporte a IE7 ni IE8 para interpretar mediaqueries
SOLUCION: RESPOND.JS
<script type=”text/javascript” src=”js/respond.min.js”></script>
https://github.com/scottjehl/Respond)
16/30
Librería javascript que detecta funcionalidades de HTML5 y CSS3 que son compatibles con el navegador. Permite escribir CSS y Javascript condicional
if (Modernizr.canvas) { // Pintar Canvas } else { alert(‘Su navegador no soporta la funcionalidad HTML5 Canvas') ; }
17/30
Ventajas de RWD
• Reducción de costes de desarrollo, una sola implementación • Eficiencia al realizar procesos de mantenimiento y
actualización • Mejora de la usabilidad, experiencia de usuario única • Google premia RWD, posicionamiento web • Informes de tráfico mas reales • Beneficio de tecnologías móviles • Innovador
Desventajas de RWD
• Tiempos de carga en dispositivos móviles • Mayor tiempo de optimización de diseño y de código • Todo el mundo quiere cambiar su web a Responsive • Compatibilidad con navegadores
18/30
Técnicas de Implementación de RWD
MOSTLY FLUID
COLUMN DROP
LAYOUT SHIFTER
TINY TWEAKS
19/30
Técnicas de Implementación de RWD
OFF CANVAS
20/30
¿Cómo probar RWD?
Existen multitud de herramientas Online, que nos permiten probar dispositivos del mercado, redimensionar nuestro navegador, plugins que nos proporcionan las dimensiones del viewport
Quirktools.com / Screenfly (https://quirktools.com/screenfly/)
21/30
¿Qué es un framework front-end?
Un framework para front-end es un conjunto de conceptos y herramientas que nos facilita considerablemente el trabajo de diseñar una web proporcionándonos una base o esqueleto para nuestros nuevos diseño
- Agilidad y rapidez
- Funcionalidad
- Apoyo de la comunidad web
- Emplea buenas prácticas
- Abstracción para decisiones como
breakpoints
- Pérdida de Libertad
- Código menos flexible
- Menos control
- Curva de aprendizaje
INCONVENIENTES VENTAJAS
22/30
Twitter Bootstrap es una colección de herramientas de software libre para la creación de sitios y aplicaciones web. Contiene plantillas de diseño basadas en HTML y CSS con tipografías, formularios, botones, gráficos, barras de navegación y demás componentes de interfaz, además de extensiones de JavaScript.
Agilidad Multinavegador
Integrable Ligero
http://twitter.github.io/bootstrap/
23/30
Estructura del Framework
- bootstrap/ -- css/ --- bootstrap.css --- bootstrap.min.css --- bootstrap-responsive.css --- bootstrap-responsive.min.css -- js/ --- bootstrap.js --- bootstrap.min.js -- img/ --- glyphicons-halflings.png --- glyphicons-halflings-white.png
24/30
¿Cómo incluir Bootstrap en nuestra
aplicación?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <p>!Hola Bootstrap!</p> </body> </html>
25/30
Sistema de Columnas
• Layout fijo: 12 columnas cubriendo 940 px • Layout fluido: 12 columnas basado en breakpoints
26/30
Fluido vs Fijo
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> 4/12 </div> <div class="span8"> <div class="row-fluid"> <div class="span5"> 5/12 </div> <div class="span2"> 2/12 </div> <div class="span5"> 5/12 </div> </div> </div> </div> </div>
<div class="container"> <div class="row"> <div class="span4"> 4/12 </div> <div class="span8"> <div class="row"> <div class="span3"> 3/8 </div> <div class="span2"> 2/8</div> <div class="span3"> 3/8 </div> </div> </div> </div> </div>
27/30
Ejemplo RWD con Bootstrap
28/30
29/30
Muchas Gracias
Espero que haya sido
una presentación
agradable para ustedes
• Importancia del usuario móvil • Buenas experiencias de usuario y accesibilidad • Objetivo: llegar a todo tipo de usuario sin excepción de
navegador o dispositivo • Herramientas suficientes: HTML5 y CSS3, mediaqueries,… • Empleando frameworks o construir el sitio desde cero
Conclusión
30/30
