SlideShare ist ein Scribd-Unternehmen logo
1 von 12
Downloaden Sie, um offline zu lesen
 Un sitio web es sensible solo si es capaz de adaptarse a la pantalla del
cliente y con la finalidad de alcanzar una correcta funcionalidad de las
interfaces, buscando lograr uniformidad y estandarización al momento en
que desplegamos nuestro contenido en distintos dispositivos y
presentaciones.
Adapta el zoom de la pantalla automaticamente al ancho
de la web para que entre por completo en la
anchura de la pantalla del dispositivo.
<meta name="viewport" content="width =
device-width, initial-scale=1, maximum-
scale=1" />
Utilizar porcentajes para definir los anchos de las
columnas o contenedores
en lugar de píxeles.
img, video, object {max-width:100%;}
Permiten consultas al CSS personalizado basandose
en el ancho mínimo y máximo de un navegador
(min-max width).
/*Para ventanas inferiores a los 480px*/
@media screen and (max-width: 480px) {
}
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

HTML5 la revolución!
HTML5 la revolución!HTML5 la revolución!
HTML5 la revolución!
 
HTML5 Enfoque Semantico
HTML5 Enfoque SemanticoHTML5 Enfoque Semantico
HTML5 Enfoque Semantico
 
Taller de Maquetacion web | Jorge Callalle Torres
Taller de Maquetacion web | Jorge Callalle TorresTaller de Maquetacion web | Jorge Callalle Torres
Taller de Maquetacion web | Jorge Callalle Torres
 
Curso web avanzado html5 css3
Curso web avanzado html5 css3Curso web avanzado html5 css3
Curso web avanzado html5 css3
 
CSS (Hojas de estilo en Cascada) y Dreamweaver CS5.5
CSS (Hojas de estilo en Cascada) y Dreamweaver CS5.5CSS (Hojas de estilo en Cascada) y Dreamweaver CS5.5
CSS (Hojas de estilo en Cascada) y Dreamweaver CS5.5
 
HTML5: empieza hoy
HTML5: empieza hoyHTML5: empieza hoy
HTML5: empieza hoy
 
Maquetación web con html5
Maquetación web con html5Maquetación web con html5
Maquetación web con html5
 
Manual de DreamWeaver
Manual de DreamWeaverManual de DreamWeaver
Manual de DreamWeaver
 
Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoy
 
Introducción HTML5 y CSS3
Introducción HTML5 y CSS3Introducción HTML5 y CSS3
Introducción HTML5 y CSS3
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSS
 
Responsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño webResponsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño web
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño Web
 
Curso Dreamweaver CS6
Curso Dreamweaver CS6Curso Dreamweaver CS6
Curso Dreamweaver CS6
 

Ähnlich wie Responsive Design

Ähnlich wie Responsive Design (20)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Front end basics - Responsive Web Design
Front end basics - Responsive Web DesignFront end basics - Responsive Web Design
Front end basics - Responsive Web Design
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Semana 3 Responsive Design y Media Queries
Semana 3   Responsive Design y Media QueriesSemana 3   Responsive Design y Media Queries
Semana 3 Responsive Design y Media Queries
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Presentacion Iniciación al Responsive Web Design
Presentacion Iniciación al Responsive Web DesignPresentacion Iniciación al Responsive Web Design
Presentacion Iniciación al Responsive Web Design
 
Diseño con códigos
Diseño con códigosDiseño con códigos
Diseño con códigos
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
 
Curso HTML 5 - Módulo 2
Curso HTML 5 - Módulo 2Curso HTML 5 - Módulo 2
Curso HTML 5 - Módulo 2
 
Desarrollo de aplicaciones móviles
Desarrollo de aplicaciones móvilesDesarrollo de aplicaciones móviles
Desarrollo de aplicaciones móviles
 
20 leyes heuristicas usabilidad
20 leyes heuristicas usabilidad20 leyes heuristicas usabilidad
20 leyes heuristicas usabilidad
 
El diseño responsivo
El diseño responsivoEl diseño responsivo
El diseño responsivo
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Resposive design (Esli David)
Resposive design (Esli David)Resposive design (Esli David)
Resposive design (Esli David)
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Estándares Web
Estándares WebEstándares Web
Estándares Web
 
Diseño web responsivo
Diseño web responsivoDiseño web responsivo
Diseño web responsivo
 
ing.software
ing.softwareing.software
ing.software
 

Mehr von Avanet

Mehr von Avanet (20)

Azure en entornos empresariales
Azure en entornos empresarialesAzure en entornos empresariales
Azure en entornos empresariales
 
Desarrollo de aplicaciones móviles (ios,android,windows phone) con .net
Desarrollo de aplicaciones móviles (ios,android,windows phone) con .netDesarrollo de aplicaciones móviles (ios,android,windows phone) con .net
Desarrollo de aplicaciones móviles (ios,android,windows phone) con .net
 
Flujos de trabajo en servidores virtuales de Azure Implementando Process Maker
Flujos de trabajo en servidores virtuales de Azure Implementando Process MakerFlujos de trabajo en servidores virtuales de Azure Implementando Process Maker
Flujos de trabajo en servidores virtuales de Azure Implementando Process Maker
 
Uso de html5 + webcomponents
Uso de html5 + webcomponentsUso de html5 + webcomponents
Uso de html5 + webcomponents
 
Novedades en Windows Server 2012 R2
Novedades en Windows Server 2012 R2Novedades en Windows Server 2012 R2
Novedades en Windows Server 2012 R2
 
Intro a HTML5 Apps con Windows 8.1
Intro a HTML5 Apps con Windows 8.1Intro a HTML5 Apps con Windows 8.1
Intro a HTML5 Apps con Windows 8.1
 
Hardening De Servidores GNU/Linux
Hardening De Servidores GNU/LinuxHardening De Servidores GNU/Linux
Hardening De Servidores GNU/Linux
 
Desarrollo de aplicaciones Django con Python 2.0 en Azure
Desarrollo de aplicaciones Django con Python 2.0 en AzureDesarrollo de aplicaciones Django con Python 2.0 en Azure
Desarrollo de aplicaciones Django con Python 2.0 en Azure
 
Microsoft Azure.- IAAS
Microsoft Azure.- IAASMicrosoft Azure.- IAAS
Microsoft Azure.- IAAS
 
Enseñar a programar a los más chicos
Enseñar a programar a los más chicosEnseñar a programar a los más chicos
Enseñar a programar a los más chicos
 
Desarrollo de aplicaciones PHP con Azure
Desarrollo de aplicaciones PHP con AzureDesarrollo de aplicaciones PHP con Azure
Desarrollo de aplicaciones PHP con Azure
 
Introducción a Google Dart + HTML5
Introducción a Google Dart + HTML5Introducción a Google Dart + HTML5
Introducción a Google Dart + HTML5
 
Pair Programming - Discute con tu compañero, no con tu teclado
Pair Programming - Discute con tu compañero, no con tu tecladoPair Programming - Discute con tu compañero, no con tu teclado
Pair Programming - Discute con tu compañero, no con tu teclado
 
Introducción a la Programación Web con Django
Introducción a la Programación Web con DjangoIntroducción a la Programación Web con Django
Introducción a la Programación Web con Django
 
Html5.- Desarrollo y Buenas Prácticas con JavaScript
Html5.- Desarrollo y Buenas Prácticas con JavaScriptHtml5.- Desarrollo y Buenas Prácticas con JavaScript
Html5.- Desarrollo y Buenas Prácticas con JavaScript
 
Webmatrix.- Web Apps con Kendo UI
Webmatrix.- Web Apps con Kendo UIWebmatrix.- Web Apps con Kendo UI
Webmatrix.- Web Apps con Kendo UI
 
Los errores más comunes de los programadores novatos
Los errores más comunes de los programadores novatosLos errores más comunes de los programadores novatos
Los errores más comunes de los programadores novatos
 
Preprocesadores CSS con LessCSS
Preprocesadores CSS con LessCSSPreprocesadores CSS con LessCSS
Preprocesadores CSS con LessCSS
 
Ruby desde cero
Ruby desde ceroRuby desde cero
Ruby desde cero
 
Azure Mobile Services
Azure Mobile ServicesAzure Mobile Services
Azure Mobile Services
 

Kürzlich hochgeladen

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
 

Kürzlich hochgeladen (15)

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
 
presentacion de PowerPoint de la fuente de poder.pptx
presentacion de PowerPoint de la fuente de poder.pptxpresentacion de PowerPoint de la fuente de poder.pptx
presentacion de PowerPoint de la fuente de poder.pptx
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Presentación de elementos de afilado con esmeril
Presentación de elementos de afilado con esmerilPresentación de elementos de afilado con esmeril
Presentación de elementos de afilado con esmeril
 
Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdf
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 

Responsive Design

  • 1.
  • 2.
  • 3.  Un sitio web es sensible solo si es capaz de adaptarse a la pantalla del cliente y con la finalidad de alcanzar una correcta funcionalidad de las interfaces, buscando lograr uniformidad y estandarización al momento en que desplegamos nuestro contenido en distintos dispositivos y presentaciones.
  • 4.
  • 5. Adapta el zoom de la pantalla automaticamente al ancho de la web para que entre por completo en la anchura de la pantalla del dispositivo. <meta name="viewport" content="width = device-width, initial-scale=1, maximum- scale=1" />
  • 6. Utilizar porcentajes para definir los anchos de las columnas o contenedores en lugar de píxeles. img, video, object {max-width:100%;}
  • 7. Permiten consultas al CSS personalizado basandose en el ancho mínimo y máximo de un navegador (min-max width). /*Para ventanas inferiores a los 480px*/ @media screen and (max-width: 480px) { }