responsive
TRANSCRIPT
![Page 1: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/1.jpg)
PROGRAMACIÓN WEB
HTML 5
Ing. Magda Paola Fernández
Responsive Design
![Page 2: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/2.jpg)
El diseño web adaptable o adaptativo es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla.
Diseño Responsive
![Page 3: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/3.jpg)
Características
Los layouts o imágenes son
fluidos y se adaptan a cada
pantallaPermite reducir
el tiempo de desarrollo
Evita los contenidos duplicados
Web en función de dispositivo
+Visitas al sitio
ya que permite compartirlos de una forma mucho más rápida y natural.
![Page 4: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/4.jpg)
<header>
<nav>
<section>
<footer>
<aside><article>
Estructura HTML5
![Page 5: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/5.jpg)
Documento HTML Index.html
Información para buscadores
Ruta donde se encuentra el archivo de estilo
![Page 6: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/6.jpg)
![Page 7: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/7.jpg)
![Page 8: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/8.jpg)
Algunos tipos de unidades de
medida
![Page 9: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/9.jpg)
Pixeles
Puntos
Porcentajes
em
es la menor unidad homogénea en color que forma parte de una imagen digital.
puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros.
Porcentaje relativo al elemento contenedor.
Ancho de la M mayúscula.
![Page 10: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/10.jpg)
Ejemplo
16px = 12pt = 100% = 1em
![Page 11: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/11.jpg)
![Page 12: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/12.jpg)
![Page 13: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/13.jpg)
![Page 14: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/14.jpg)
Color de
fondo
![Page 15: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/15.jpg)
Color de
fondo
![Page 16: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/16.jpg)
Color de
fondo
![Page 17: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/17.jpg)
Tienen atributos en común
![Page 18: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/18.jpg)
![Page 19: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/19.jpg)
Tienen atributos en común
![Page 20: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/20.jpg)
![Page 21: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/21.jpg)
Atributos particular para aside
![Page 22: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/22.jpg)
El uso de máximo en
ancho y mínimo en altura
permite que la pagina tenga
diseño responsive
![Page 23: Responsive](https://reader035.vdocuments.co/reader035/viewer/2022070516/58745a311a28abd53e8b97fd/html5/thumbnails/23.jpg)
PROGRAMACIÓN WEB
HTML 5
Ing. Magda Paola Fernández
Responsive Design