SlideShare una empresa de Scribd logo
Introducción a Responsive Design
con HTML5 y CSS3
• Gerson Perez Aguilar
• @GersonDesignUX
• Frontend CIDE-PUCP
• /GPADesign
¿Qué es Responsive
Design?
Responsivedesigncorrespondeauna
tendenciadecreacióndepáginaswebque
puedenservisualizadasperfectamenteen
todotipodedispositivos,desde
ordenadoresdeescritoriohastasmartphones
otablets.
Introducción a Responsive Design con HTML5 y CSS3
Mejoramos la experiencia
de navegación del
usuario
Site
Home
About
ContactEstructura
Desktop
www.cursos.com
Contenido duplicado
Site
Home
About
Contact
Mobile
Home
About
ContactEstructura
Móvil
www.m.cursos.com
Introducción a Responsive Design con HTML5 y CSS3
AlertaSEO deGoogle
para el 21 de abril!!
Desde el próximo 21 de abril de 2015 entrará en juego un nuevo algoritmo por
parte del buscador, y aquellos sitios web que no estén optimizados para
navegar desde dispositivos móviles (smartphones y tablets), perderán
Introducción a Responsive Design con HTML5 y CSS3
Introducción a Responsive Design con HTML5 y CSS3
Volmachine.com
https://www.google.com/webmasters/tools/mobile-friendly
Praco.com
Introducción a Responsive Design con HTML5 y CSS3
Introducción a Responsive Design con HTML5 y CSS3
Introducción a Responsive Design con HTML5 y CSS3
Introducción a Responsive Design con HTML5 y CSS3
Introducción a Responsive Design con HTML5 y CSS3
¿Que es HTML?
HyperText Markup Language (HTML) es el lenguaje
básico de casi todo el contenido web.
La mayor parte de lo que ves en la pantalla de tu
escrita, fundamentalmente, usando HTML.
El contenido dentro de una página web es etiquetado
HTML como <img>, <title>, <p>, <div>, y así
Introducción a Responsive Design con HTML5 y CSS3
Introducción a Responsive Design con HTML5 y CSS3
El DOCTYPE
Únicamente hace falta poner este simple
doctype al comienzo de la página web.
Nuevas Etiquetas
<header>
<nav>
<main>
<section>
<article>
<aside>
<audio>
<video>
<footer>
<figure>
<picture>
Tipos de Datos en
formularios
Introducción a Responsive Design con HTML5 y CSS3
Semántica de etiquetas:
Introducción a Responsive Design con HTML5 y CSS3
¿Que esCSS?
Hojas de Estilo en Cascada (Cascading Style Sheets) es el
lenguaje utilizado para describir la presentación de
documentos HTML.
Sintaxis:
Selector { propiedad: valor; ...}
Declaración
- Etiqueta
- ID
- Clase
Etiqueta:
ID:
Clase:
CSS conStylus:
@Font Face:
Ejemplo:
Transition:
Transform:
Introducción a Responsive Design con HTML5 y CSS3
Transform: Rotate
Transform: Scale
Text-Shadow:
Media Queries:
Ejemplo:

Más contenido relacionado

PPTX
Las Ventajas de usar HTML5 Y CSS3
PPT
Introducción a HTML5 y CSS3 - ArtMedia 2011
PDF
HTML5 y CSS3: como sacarles partido hoy
PDF
HTML5 y los desafíos del desarrollo web de HOY
PDF
HTML5 Nuevas Etiquetas Semanticas
PDF
Introducción a HTML5 y CSS3 AWGR
PDF
Seminario html5
PPT
HTML5 la revolución!
Las Ventajas de usar HTML5 Y CSS3
Introducción a HTML5 y CSS3 - ArtMedia 2011
HTML5 y CSS3: como sacarles partido hoy
HTML5 y los desafíos del desarrollo web de HOY
HTML5 Nuevas Etiquetas Semanticas
Introducción a HTML5 y CSS3 AWGR
Seminario html5
HTML5 la revolución!

La actualidad más candente (18)

PPTX
Maquetación web con html5
PDF
Html5 telefonica-curso
PDF
Taller maquetacion web
PPT
HTML5 y CSS3
PDF
Taller de Maquetación Web
PPT
PDF
Conoce HTML5 y CSS3
PPTX
Desarrollo de aplicaciones con HTML5
PDF
Congreso web
PPTX
Html5 y otras yerbas
PDF
Html5 y otras yerbas
PDF
Introduccion html5
PDF
Introducción a Etiquetas HTML 5
DOCX
Curso HTML5
PDF
Curso html5-v1
PPT
Proyecto de Topicos II - HTML5
PPTX
Introducción al Diseño Web
PDF
Responsive Web Design - Diseño Sensible by @janogarcia
Maquetación web con html5
Html5 telefonica-curso
Taller maquetacion web
HTML5 y CSS3
Taller de Maquetación Web
Conoce HTML5 y CSS3
Desarrollo de aplicaciones con HTML5
Congreso web
Html5 y otras yerbas
Html5 y otras yerbas
Introduccion html5
Introducción a Etiquetas HTML 5
Curso HTML5
Curso html5-v1
Proyecto de Topicos II - HTML5
Introducción al Diseño Web
Responsive Web Design - Diseño Sensible by @janogarcia
Publicidad

Destacado (20)

PDF
Responsive web design
PPTX
Introducción a PHP
PDF
2.1 Lenguaje de Programación C y su Entorno
PPT
Procedimiento de notificacion de infracciones a ISP
PDF
Guía de Cookies (Vídeo)
PPTX
PPTX
Web Analytics | Clase 1/4
PPT
Responsabilidad de los Directores de Sistemas
PDF
Les Français et la relation homme machine - INFOGRAPHIE
PPT
PHP: Sesiones
PDF
Cookies
DOCX
Notas clase java ii
PDF
9197757 los-sniffers
PPSX
Las redes sociales jose luis de la mata
PPT
Propiedad intelectual e Internet - Gigantes o molinos?
PPT
PPTX
PPTX
#Mgghub Cookies y privacidad ¿Cumple tu web con la ley?
PPT
Comunicaciones electronicas
PDF
Forrester’s study: Discover How Marketing Analytics Increases Business Perfor...
Responsive web design
Introducción a PHP
2.1 Lenguaje de Programación C y su Entorno
Procedimiento de notificacion de infracciones a ISP
Guía de Cookies (Vídeo)
Web Analytics | Clase 1/4
Responsabilidad de los Directores de Sistemas
Les Français et la relation homme machine - INFOGRAPHIE
PHP: Sesiones
Cookies
Notas clase java ii
9197757 los-sniffers
Las redes sociales jose luis de la mata
Propiedad intelectual e Internet - Gigantes o molinos?
#Mgghub Cookies y privacidad ¿Cumple tu web con la ley?
Comunicaciones electronicas
Forrester’s study: Discover How Marketing Analytics Increases Business Perfor...
Publicidad

Similar a Introducción a Responsive Design con HTML5 y CSS3 (20)

PDF
Responsive Web Design
DOCX
Diseño web responsivo
PPTX
Tips para la realización de una pagina web, adaptada en cualquier dispositivos
PPTX
Curso HTML 5 - Módulo 1
PPTX
Responsive Web Design
PDF
Responsive web design - frontenders Valencia
PPTX
Responsive web design
PDF
Articulo (Responsive Web Desing)
ODP
Front End & Responsive Web Design | DevFest Merida
PPTX
HTML Tour - Responsive Web Design
PDF
Responsive web design
PDF
Front end basics - Responsive Web Design
PDF
Responsive Web Design
PDF
Clase 11 - Responsive + Bootstrap v2.pptx.pdf
PDF
Estorninos y diseño responsivo
PPTX
Introduccion-al-diseno-responsivo (1).pptx
PDF
HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados
ODP
Diseño con códigos
PDF
Responsive Web Design
PPTX
Responsive Design
Responsive Web Design
Diseño web responsivo
Tips para la realización de una pagina web, adaptada en cualquier dispositivos
Curso HTML 5 - Módulo 1
Responsive Web Design
Responsive web design - frontenders Valencia
Responsive web design
Articulo (Responsive Web Desing)
Front End & Responsive Web Design | DevFest Merida
HTML Tour - Responsive Web Design
Responsive web design
Front end basics - Responsive Web Design
Responsive Web Design
Clase 11 - Responsive + Bootstrap v2.pptx.pdf
Estorninos y diseño responsivo
Introduccion-al-diseno-responsivo (1).pptx
HTML5 + Responsive Web - Semántica y conceptos prácticos avanzados
Diseño con códigos
Responsive Web Design
Responsive Design

Último (20)

PDF
Punto Critico - Brian Tracy Ccesa007.pdf
PDF
Romper el Circulo de la Creatividad - Colleen Hoover Ccesa007.pdf
PDF
CONFERENCIA-Deep Research en el aula universitaria-UPeU-EduTech360.pdf
PDF
TRAUMA_Y_RECUPERACION consecuencias de la violencia JUDITH HERMAN
PDF
COMUNICACION EFECTIVA PARA LA EDUCACION .pdf
PDF
el - LIBRO-PACTO-EDUCATIVO-GLOBAL-OIEC.pdf
PDF
Escuela de Negocios - Robert kiyosaki Ccesa007.pdf
PDF
Educación Artística y Desarrollo Humano - Howard Gardner Ccesa007.pdf
PDF
Tomo 1 de biologia gratis ultra plusenmas
PDF
Escuelas Desarmando una mirada subjetiva a la educación
DOCX
UNIDAD DE APRENDIZAJE 5 AGOSTO tradiciones
DOCX
III Ciclo _ Plan Anual 2025.docx PARA ESTUDIANTES DE PRIMARIA
PDF
Didactica de la Investigacion Educativa SUE Ccesa007.pdf
PDF
IDH_Guatemala_2.pdfnjjjkeioooe ,l dkdldp ekooe
PDF
benveniste-problemas-de-linguistica-general-i-cap-6 (1)_compressed.pdf
DOCX
Tarea De El Colegio Coding For Kids 1 y 2
PDF
ACERTIJO Súper Círculo y la clave contra el Malvado Señor de las Formas. Por ...
PDF
PFB-MANUAL-PRUEBA-FUNCIONES-BASICAS-pdf.pdf
PDF
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf
PDF
Integrando la Inteligencia Artificial Generativa (IAG) en el Aula
Punto Critico - Brian Tracy Ccesa007.pdf
Romper el Circulo de la Creatividad - Colleen Hoover Ccesa007.pdf
CONFERENCIA-Deep Research en el aula universitaria-UPeU-EduTech360.pdf
TRAUMA_Y_RECUPERACION consecuencias de la violencia JUDITH HERMAN
COMUNICACION EFECTIVA PARA LA EDUCACION .pdf
el - LIBRO-PACTO-EDUCATIVO-GLOBAL-OIEC.pdf
Escuela de Negocios - Robert kiyosaki Ccesa007.pdf
Educación Artística y Desarrollo Humano - Howard Gardner Ccesa007.pdf
Tomo 1 de biologia gratis ultra plusenmas
Escuelas Desarmando una mirada subjetiva a la educación
UNIDAD DE APRENDIZAJE 5 AGOSTO tradiciones
III Ciclo _ Plan Anual 2025.docx PARA ESTUDIANTES DE PRIMARIA
Didactica de la Investigacion Educativa SUE Ccesa007.pdf
IDH_Guatemala_2.pdfnjjjkeioooe ,l dkdldp ekooe
benveniste-problemas-de-linguistica-general-i-cap-6 (1)_compressed.pdf
Tarea De El Colegio Coding For Kids 1 y 2
ACERTIJO Súper Círculo y la clave contra el Malvado Señor de las Formas. Por ...
PFB-MANUAL-PRUEBA-FUNCIONES-BASICAS-pdf.pdf
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf
Integrando la Inteligencia Artificial Generativa (IAG) en el Aula

Introducción a Responsive Design con HTML5 y CSS3