HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados
•
0 recomendaciones•1,300 vistas
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 Media
Recomendados
Más contenido relacionado
Similar a HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados
Similar a HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados (20)
Último
Último (20)
HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados
- 1. HTML5 + RESPONSIVE WEB Semántica y conceptos prácticos avanzados Sergio Gargallo Teso (@sergiogargallo) - EFOR Media 23 de Julio de 2013
- 2. 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
- 3. 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
- 4. 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>
- 5. Nuevas etiquetas y lenguaje semántico Etiquetas HTML5 y su significado <header> <nav> <section> <article> <aside> <footer>
- 6. Maquetación Responsiva El 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.
- 7. Introducción a Bootstrap Bootstrap es un framework front-end desarrollado y liberado porTwitter • Esta forma de trabajo no ha nacido de la noche a la mañana, ni tampoco ha sido creada porTwitter. • 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.
- 8. Introducción a Bootstrap Dispone de los elementos necesarios para la correcta implementación del RWD •Grid Fluido •Imágenes Reescalables •Media Queries
- 9. Casos prácticos avanzados de uso Utilización del grid de 12 columnas
- 10. 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
- 11. Casos prácticos avanzados de uso ¿¿Comentamos los vuestros??
- 12. HTML5 + RESPONSIVE WEB Semántica y conceptos prácticos avanzados Sergio Gargallo Teso (@sergiogargallo) - EFOR Media 23 de Julio de 2013 Muchas gracias, majos!!