SlideShare una empresa de Scribd logo
1 de 12
Andrés Londoño
Analista de Software
Miembro / Líder de Avanet
andreslon@outlook.com
@andreslon
http://andreslon.com
Adapta el zoom de la pantalla automáticamente 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 basándose 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) {
}
/*Para dispositivos con orientacion Vertical */
@media screen and (orientation:portrait) {
}
Andrés Londoño
Analista de Software
Miembro / Líder de Avanet
andreslon@outlook.com
@andreslon
http://andreslon.com

Más contenido relacionado

Similar a Responsive Design html day

Front end basics - Responsive Web Design
Front end basics - Responsive Web DesignFront end basics - Responsive Web Design
Front end basics - Responsive Web DesignNadal Soler
 
Desarrollo de aplicaciones móviles
Desarrollo de aplicaciones móvilesDesarrollo de aplicaciones móviles
Desarrollo de aplicaciones móvilesizenius
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBMario Martinez
 
Responsive web design - frontenders Valencia
Responsive web design - frontenders ValenciaResponsive web design - frontenders Valencia
Responsive web design - frontenders ValenciaJavier Arques Hernández
 
Mediakit Señalizamos Digital Totem Interactivo
Mediakit Señalizamos Digital  Totem InteractivoMediakit Señalizamos Digital  Totem Interactivo
Mediakit Señalizamos Digital Totem InteractivoLeticia Baracaldo
 
Fundamentos del diseño web front end
Fundamentos del diseño web front endFundamentos del diseño web front end
Fundamentos del diseño web front endDavid Hurtado
 
Hacia una Metodología de Diseño Web Responsive
Hacia una Metodología de Diseño Web ResponsiveHacia una Metodología de Diseño Web Responsive
Hacia una Metodología de Diseño Web ResponsiveHernan Beati
 
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)Adolfo Sanz De Diego
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJuan Morales
 

Similar a Responsive Design html day (20)

Front end basics - Responsive Web Design
Front end basics - Responsive Web DesignFront end basics - Responsive Web Design
Front end basics - Responsive Web Design
 
Curso HTML 5 - Módulo 2
Curso HTML 5 - Módulo 2Curso HTML 5 - Módulo 2
Curso HTML 5 - Módulo 2
 
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
 
Desarrollo de aplicaciones móviles
Desarrollo de aplicaciones móvilesDesarrollo de aplicaciones móviles
Desarrollo de aplicaciones móviles
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
 
Responsive web design - frontenders Valencia
Responsive web design - frontenders ValenciaResponsive web design - frontenders Valencia
Responsive web design - frontenders Valencia
 
En 20 minutos ... Responsive Design
En 20 minutos ... Responsive DesignEn 20 minutos ... Responsive Design
En 20 minutos ... Responsive Design
 
Mediakit Señalizamos Digital Totem Interactivo
Mediakit Señalizamos Digital  Totem InteractivoMediakit Señalizamos Digital  Totem Interactivo
Mediakit Señalizamos Digital Totem Interactivo
 
Responsive.pptx
Responsive.pptxResponsive.pptx
Responsive.pptx
 
Mini curse
Mini curseMini curse
Mini curse
 
Diseñando para la Web Móvil
Diseñando para la Web MóvilDiseñando para la Web Móvil
Diseñando para la Web Móvil
 
Fundamentos del diseño web front end
Fundamentos del diseño web front endFundamentos del diseño web front end
Fundamentos del diseño web front end
 
Hacia una Metodología de Diseño Web Responsive
Hacia una Metodología de Diseño Web ResponsiveHacia una Metodología de Diseño Web Responsive
Hacia una Metodología de Diseño Web Responsive
 
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)
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Consulta wix yola
Consulta wix yolaConsulta wix yola
Consulta wix yola
 
Estándares Web
Estándares WebEstándares Web
Estándares Web
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

Más de Andrés Londoño

Software Architecture - Neobit Consulting
Software Architecture - Neobit ConsultingSoftware Architecture - Neobit Consulting
Software Architecture - Neobit ConsultingAndrés Londoño
 
Arquitectura de software y otros demonios
Arquitectura de software y otros demoniosArquitectura de software y otros demonios
Arquitectura de software y otros demoniosAndrés Londoño
 
Docker Containers | Talent Week/Team International
Docker Containers | Talent Week/Team InternationalDocker Containers | Talent Week/Team International
Docker Containers | Talent Week/Team InternationalAndrés Londoño
 
Secure Development, Seguridad al Codificar
Secure Development, Seguridad al CodificarSecure Development, Seguridad al Codificar
Secure Development, Seguridad al CodificarAndrés Londoño
 
Microservicios, sin morir en el intento
Microservicios, sin morir en el intentoMicroservicios, sin morir en el intento
Microservicios, sin morir en el intentoAndrés Londoño
 
Net Core + Docker + Kubernetes + Azure Devops
Net Core + Docker + Kubernetes + Azure DevopsNet Core + Docker + Kubernetes + Azure Devops
Net Core + Docker + Kubernetes + Azure DevopsAndrés Londoño
 
Xamarin - Aplicaciones Móviles con .Net
Xamarin - Aplicaciones Móviles con .Net Xamarin - Aplicaciones Móviles con .Net
Xamarin - Aplicaciones Móviles con .Net Andrés Londoño
 
Xamarin y DevOps #NetConfCO2017
Xamarin y DevOps #NetConfCO2017Xamarin y DevOps #NetConfCO2017
Xamarin y DevOps #NetConfCO2017Andrés Londoño
 
Nanoservicios para aplicaciones móviles - Global azure boot camp 2017
Nanoservicios para aplicaciones móviles - Global azure boot camp 2017Nanoservicios para aplicaciones móviles - Global azure boot camp 2017
Nanoservicios para aplicaciones móviles - Global azure boot camp 2017Andrés Londoño
 
Interfaces humanas con kinect
Interfaces humanas con kinectInterfaces humanas con kinect
Interfaces humanas con kinectAndrés Londoño
 
NoSQL bases de datos no relacionales
NoSQL bases de datos no relacionalesNoSQL bases de datos no relacionales
NoSQL bases de datos no relacionalesAndrés Londoño
 
Liderar equipos de trabajo
Liderar equipos de trabajoLiderar equipos de trabajo
Liderar equipos de trabajoAndrés Londoño
 
Dinámica y estructuración de un equipo de trabajo.
Dinámica y estructuración de un equipo de trabajo.Dinámica y estructuración de un equipo de trabajo.
Dinámica y estructuración de un equipo de trabajo.Andrés Londoño
 

Más de Andrés Londoño (20)

Software Architecture - Neobit Consulting
Software Architecture - Neobit ConsultingSoftware Architecture - Neobit Consulting
Software Architecture - Neobit Consulting
 
Arquitectura de software y otros demonios
Arquitectura de software y otros demoniosArquitectura de software y otros demonios
Arquitectura de software y otros demonios
 
Docker Containers | Talent Week/Team International
Docker Containers | Talent Week/Team InternationalDocker Containers | Talent Week/Team International
Docker Containers | Talent Week/Team International
 
Kubernetes for beginners
Kubernetes for beginnersKubernetes for beginners
Kubernetes for beginners
 
Secure Development, Seguridad al Codificar
Secure Development, Seguridad al CodificarSecure Development, Seguridad al Codificar
Secure Development, Seguridad al Codificar
 
Microservicios, sin morir en el intento
Microservicios, sin morir en el intentoMicroservicios, sin morir en el intento
Microservicios, sin morir en el intento
 
Xamarin iOS
Xamarin iOSXamarin iOS
Xamarin iOS
 
Xamarin + IoT
Xamarin + IoTXamarin + IoT
Xamarin + IoT
 
Net Core + Docker + Kubernetes + Azure Devops
Net Core + Docker + Kubernetes + Azure DevopsNet Core + Docker + Kubernetes + Azure Devops
Net Core + Docker + Kubernetes + Azure Devops
 
Xamarin - Aplicaciones Móviles con .Net
Xamarin - Aplicaciones Móviles con .Net Xamarin - Aplicaciones Móviles con .Net
Xamarin - Aplicaciones Móviles con .Net
 
Azure y DevOps
Azure y DevOpsAzure y DevOps
Azure y DevOps
 
Xamarin y DevOps #NetConfCO2017
Xamarin y DevOps #NetConfCO2017Xamarin y DevOps #NetConfCO2017
Xamarin y DevOps #NetConfCO2017
 
Nanoservicios para aplicaciones móviles - Global azure boot camp 2017
Nanoservicios para aplicaciones móviles - Global azure boot camp 2017Nanoservicios para aplicaciones móviles - Global azure boot camp 2017
Nanoservicios para aplicaciones móviles - Global azure boot camp 2017
 
Xamarin forms Xaml + C#
Xamarin forms Xaml + C#Xamarin forms Xaml + C#
Xamarin forms Xaml + C#
 
Windows 10 universal apps
Windows 10 universal appsWindows 10 universal apps
Windows 10 universal apps
 
Interfaces humanas con kinect
Interfaces humanas con kinectInterfaces humanas con kinect
Interfaces humanas con kinect
 
NoSQL bases de datos no relacionales
NoSQL bases de datos no relacionalesNoSQL bases de datos no relacionales
NoSQL bases de datos no relacionales
 
Apps web vs apps nativas
Apps web vs apps nativasApps web vs apps nativas
Apps web vs apps nativas
 
Liderar equipos de trabajo
Liderar equipos de trabajoLiderar equipos de trabajo
Liderar equipos de trabajo
 
Dinámica y estructuración de un equipo de trabajo.
Dinámica y estructuración de un equipo de trabajo.Dinámica y estructuración de un equipo de trabajo.
Dinámica y estructuración de un equipo de trabajo.
 

Responsive Design html day

  • 1.
  • 2. Andrés Londoño Analista de Software Miembro / Líder de Avanet andreslon@outlook.com @andreslon http://andreslon.com
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9. Adapta el zoom de la pantalla automáticamente 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" />
  • 10. Utilizar porcentajes para definir los anchos de las columnas o contenedores en lugar de píxeles. img, video, object {max-width:100%;}
  • 11. Permiten consultas al CSS personalizado basándose 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) { } /*Para dispositivos con orientacion Vertical */ @media screen and (orientation:portrait) { }
  • 12. Andrés Londoño Analista de Software Miembro / Líder de Avanet andreslon@outlook.com @andreslon http://andreslon.com