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
![Page 1: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/1.jpg)
HTML5 + RESPONSIVE WEBSemántica y conceptos prácticos avanzados
Sergio Gargallo Teso (@sergiogargallo) - EFOR Media23 de Julio de 2013
![Page 2: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/3.jpg)
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
![Page 4: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/4.jpg)
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>
![Page 5: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/5.jpg)
Nuevas etiquetas y lenguaje semántico
Etiquetas HTML5 y su significado
<header><nav><section><article><aside><footer>
![Page 6: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/6.jpg)
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.
![Page 7: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/7.jpg)
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.
![Page 8: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/8.jpg)
Introducción a Bootstrap
Dispone de los elementos necesarios para la correcta implementación del RWD
• Grid Fluido
• Imágenes Reescalables
• Media Queries
![Page 9: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/9.jpg)
Casos prácticos avanzados de uso
Utilización del grid de 12 columnas
![Page 10: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/10.jpg)
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
![Page 11: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/11.jpg)
Casos prácticos avanzados de uso
¿¿Comentamos los vuestros??
![Page 12: HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados](https://reader034.vdocuments.pub/reader034/viewer/2022052307/557ae689d8b42a1a358b45c1/html5/thumbnails/12.jpg)
HTML5 + RESPONSIVE WEBSemántica y conceptos prácticos avanzados
Sergio Gargallo Teso (@sergiogargallo) - EFOR Media23 de Julio de 2013
Muchas gracias, majos!!