Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 + RESPONSIVE WEB
Semántica y conceptos prácticos avanzados
Sergio Gargallo Teso (@sergiogargallo) - EFOR Media
23 de...
De qué vamos a hablar hoy...
•Introducción a HTML5
•Nuevas etiquetas y lenguaje semántico
•Maquetación Responsiva
•Introdu...
Introducción a HTML5
• HTML5 es el nuevo estándar HTML
• Nuevos Elementos
• Nuevos Atributos
• Soporte completo CSS3
• Vid...
Nuevas etiquetas y lenguaje semántico
Documento mínimo HTML5
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</t...
Nuevas etiquetas y lenguaje semántico
Etiquetas HTML5 y su significado
<header>
<nav>
<section>
<article>
<aside>
<footer>
Maquetación Responsiva
El Diseño Web Responsivo (RWD) es un concepto que combina CSS, CSS3 y
JavaScript para crear diseños...
Introducción a Bootstrap
Bootstrap es un framework front-end desarrollado y
liberado porTwitter
• Esta forma de trabajo no...
Introducción a Bootstrap
Dispone de los elementos necesarios para la
correcta implementación del RWD
•Grid Fluido
•Imágene...
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 ...
Casos prácticos avanzados de uso
¿¿Comentamos los vuestros??
HTML5 + RESPONSIVE WEB
Semántica y conceptos prácticos avanzados
Sergio Gargallo Teso (@sergiogargallo) - EFOR Media
23 de...
Upcoming SlideShare
Loading in …5
×

HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados

1,182 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados

  1. 1. HTML5 + RESPONSIVE WEB Semántica y conceptos prácticos avanzados Sergio Gargallo Teso (@sergiogargallo) - EFOR Media 23 de Julio de 2013
  2. 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. 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. 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. 5. Nuevas etiquetas y lenguaje semántico Etiquetas HTML5 y su significado <header> <nav> <section> <article> <aside> <footer>
  6. 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. 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. 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. 9. Casos prácticos avanzados de uso Utilización del grid de 12 columnas
  10. 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. 11. Casos prácticos avanzados de uso ¿¿Comentamos los vuestros??
  12. 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!!

×