html5 + responsive web - semántica y conceptos prácticos avanzados
DESCRIPTION
Diapositivas que sivieron de apoyo para impartir el taller de HTML5 + Diseño Web Responsivo que tuvo lugar el 23 de Julio de 2013 en las oficinas de EFOR MediaTRANSCRIPT
HTML5 + RESPONSIVE WEBSemántica y conceptos prácticos avanzados
Sergio Gargallo Teso (@sergiogargallo) - EFOR Media23 de Julio de 2013
De qué vamos a hablar hoy...
• Introducción a HTML5
• Nuevas etiquetas y lenguaje semántico
• Maquetación Responsiva
• Introducción a Bootstrap
• Casos prácticos avanzados de uso
Introducción a HTML5
• HTML5 es el nuevo estándar HTML• Nuevos Elementos• Nuevos Atributos• Soporte completo CSS3• Video y Audio• Gráficos en 2D/3D• Almacenamiento local• Base de Datos SQL Local• Aplicaciones Web
Nuevas etiquetas y lenguaje semántico
Documento mínimo HTML5
<!DOCTYPE html><html><head> <title>Title of the document</title></head>
<body> The content of the document......</body>
</html>
Nuevas etiquetas y lenguaje semántico
Etiquetas HTML5 y su significado
<header><nav><section><article><aside><footer>
Maquetación ResponsivaEl Diseño Web Responsivo (RWD) es un concepto que combina CSS, CSS3 y JavaScript para crear diseños de páginas web fluidos y adaptables que pueden ampliar, contraer, reorganizar o eliminar contenido en función del tamaño de la
pantalla del usuario.
Introducción a Bootstrap
Bootstrap es un framework front-end desarrollado y liberado por Twitter
• Esta forma de trabajo no ha nacido de la noche a la mañana, ni tampoco ha sido creada por Twitter.
• Ha sido la propia comunidad web quien ha creado y aportado nuevas formas de entender el desarrollo front-end.
• Compendio de buenas prácticas y nuevas tecnologías
• Es probable que Bootstrap quede desfasado en algún momento, y sea reemplazado por otra herramienta de moda. (i.e.: grid systems)
• Pero los conceptos seguirán presentes. Y estos si que irán evolucionando y adaptandose al medio.
Introducción a Bootstrap
Dispone de los elementos necesarios para la correcta implementación del RWD
• Grid Fluido
• Imágenes Reescalables
• Media Queries
Casos prácticos avanzados de uso
Utilización del grid de 12 columnas
Casos prácticos avanzados de uso
Correcto uso de Media Queries para IE8
Caso Anchura
Smartphones 480px e inferior
Tablets en vertical de 480px a 768px
Tablets en horizontal de 768px a 940px
Por defecto de 940px a 1210px
Pantallas grandes 1210px y superior
Casos prácticos avanzados de uso
¿¿Comentamos los vuestros??
HTML5 + RESPONSIVE WEBSemántica y conceptos prácticos avanzados
Sergio Gargallo Teso (@sergiogargallo) - EFOR Media23 de Julio de 2013
Muchas gracias, majos!!