CHristian Vasquez Semana6 ProgramacionWEB1

Uso de estructura de rejilla y media query para el diseño de página HMTL adaptable
Christian Vásquez Lolli
Programación Web I
Instituto IACC
25 de julio de 2021
Desarrollo
1. Descargar y descomprimir las librerías Bootstrap desde:
https://getbootstrap.com/docs/4.4/getting-started/download/
2. Crear un directorio para la página denominado Prototipo.

3. Copiar el directorio CSS del archivo de Bootstrap descargado y descomprimido, en el
directorio prototipo.
4. Con el editor de texto de su preferencia, crear el archivo index.html, usando la plantilla
básica disponible en: https://bit.ly/3710vQR

5. Adaptar el enlace al archivo de Bootstrap de su directorio para CSS.
6. Generar 6 párrafos de texto de relleno desde el sitio: https://es.lipsum.com/

7. Crear una hoja de estilo llamada general.css, a partir del código proporcionado en las
páginas 21 y 22 del contenido de la semana e incorporándola a su prototipo.
8. Crear una hoja de estilo para la visualización del contenido en tabletas y llamarla
tablets.css (puede ser similar a la entregada en el contenido de la semana en la página
23).
9. Construir el diseño correspondiente a su prototipo para que el contenido se presente
de la siguiente manera:
a) El primer párrafo se dispondrá en la primera fila. Los párrafos 2, 3 y 4 en la
siguiente fila, con el mismo ancho para cada uno. Y los párrafos 5 y 6 en la tercera fila, con
anchos de 8 y 4 columnas, respectivamente para cada párrafo

Prototipo:
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="css/general.css" media="all" rel="stylesheet">
<link href="css/bootstrap.min.css"type="text/css" rel="stylesheet">

<link href="css/grid.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="css/tablets.css" media="only screen and (min-device-width :
320px)and (max-device-width : 768px)">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
<h1>Hello, world!</h1></div>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js" ></script>
<body class="py-4 px-4">
<div class="row show-grid">

<div class="col-md-12"><h2>El Primer Párrafo</h2>
<p class="lead">Suspendisse eget sapien suscipit ipsum viverra venenatis nec eu turpis.</p>
<p ALIGN="justify">Integer rhoncus ac erat vel rhoncus. Fusce maximus eros id sollicitudin
suscipit. Vivamus
auctor at odio non feugiat. Phasellus ac sem ante. In non enim non odio lacinia efficitur. Cras
consectetur dui
in metus dictum, sit amet laoreet tortor tristique.Nam mauris mauris, iaculis sed placerat sit amet,
consequat
vel enim. Nullam rhoncus tellus dui, et luctus libero rhoncus vitae. Nulla ut nibh at velit
sollicitudin elementum.
Nullam eu turpis luctus, molestie libero et, pulvinar purus. Aliquam turpis diam, vehicula in
aliquam a, faucibus
sit amet est. Phasellus lobortis quam eget ante tincidunt, non mattis quam pellentesque. Nunc
nec porta nisi.
Curabitur ac felis eget magna cursus posuere. Maecenas facilisis ex vitae massa pharetra, vel
accumsan nisl
venenatis.</p></div>
<div class="col-md-4 themed-grid-col"><h3>El Segundo Párrafo</h3>
<p ALIGN="justify">Quisque volutpat eu purus vitae hendrerit. Nulla vitae tempor felis.
Praesent lobortis fringilla
purus, nec dictum est pharetra ac. Duis eleifend vestibulum velit, cursus hendrerit diam
vulputate a. Morbi
pellentesque vulputate accumsan. Phasellus quis dignissim nisl, vitae hendrerit turpis. Duis at
lorem id velit
tincidunt tristique id et turpis. Fusce scelerisque blandit commodo. Praesent scelerisque pulvinar
consequat.
Quisque nulla magna, luctus ut arcu in, ullamcorper facilisis arcu. Mauris suscipit ultricies
ultricies.
Aenean ut sapien non arcu elementum vehicula.</p></div>
<div class="col-md-4 themed-grid-cla"><h3>El Tercer Párrafo</h3>
<p ALIGN="justify">Nam mauris mauris, iaculis sed placerat sit amet, consequat vel enim.
Nullam rhoncus tellus dui,
et luctus libero rhoncus vitae. Nulla ut nibh at velit sollicitudin elementum. Nullam eu turpis
luctus, molestie
libero et, pulvinar purus. Aliquam turpis diam, vehicula in aliquam a, faucibus sit amet est.
Phasellus lobortis
quam eget ante tincidunt, non mattis quam pellentesque. Nunc nec porta nisi. Curabitur ac felis
eget magna cursus
posuere. Maecenas facilisis ex vitae massa pharetra, vel accumsan nisl venenatis.</p></div>
<div class="col-md-4 themed-grid-col"><h3>El Cuarto Párrafo</h3>
vulputate a. Morbi
lorem id velit
consequat.
ultricies.
<div class="col-sm-8 themed-grid-cla"><h4>El Quinto Párrafo</h4>
vulputate a. Morbi
lorem id velit
consequat.
ultricies.
Aenean ut sapien non arcu elementum vehicula.Duis nec quam vitae urna rutrum viverra.
Phasellus aliquet mollis
mollis. Pellentesque at risus sit amet eros iaculis euismod. Aliquam at leo sit amet erat
scelerisque consequat
sit amet rutrum sapien. Suspendisse a venenatis turpis, varius maximus augue. Integer
fermentum, mauris nec
vestibulum ullamcorper, ex augue convallis metus, quis accumsan libero ante a quam. Nunc
pellentesque arcu et
luctus molestie. Mauris in nisi dolor. In quam turpis, tempus ac elit eu, convallis commodo
tortor.</p></div>
<div class="col-sm-4 themed-grid-col"><h4>El Sexto Párrafo</h4>
<p ALIGN="justify">Proin convallis, eros in eleifend volutpat, ex orci imperdiet neque,
vestibulum facilisis ex
magna at augue. Fusce dapibus mauris sit amet libero efficitur sodales. Morbi blandit, velit nec
commodo iaculis,
dolor risus tincidunt massa, nec sagittis ligula turpis vel odio. Curabitur euismod, odio quis
pretium elementum,
sem risus semper turpis, vitae feugiat mauris eros vel lorem. Proin et aliquam arcu. Integer
rutrum aliquet lorem
quis elementum. Aenean interdum dui eget porttitor pretium. Aenean varius elit ullamcorper dui
ultrices aliquam.</p></div>
</div>
</body>
</html>
b) Especificar el ancho adaptable al dispositivo desde el cual será visualizado (1

punto).
Para que la página se adapte al dispositivo Tablet , se utiliza la etiqueta “meta” para el viewport.
Definer el ancho, alto y escala del área usada por el navegador para mostrar contenido.
<meta name="viewport"content="width= device-width, minimum-scale=1.0, maximum-
scale=1.0" />
Con esta etiqueta la página se adapta al tamaño del dispositivo, en este caso el Tablet
c) Contemplar el uso de la hoja de estilo construida en el punto 8 de esta tarea,
para la creación de una media query que permita la visualización en
dispositivos tipo tabletas (4 puntos)
<link rel="stylesheet" href="css/tablets.css" media="only screen and (min-device-width :
320px)and (max-device-width : 768px)">
href refiere a la hoja de estilo la cual hará que se visualice de manera distinta en Tablet o pc que
su tamaño no sea superior a 768px o inferior a 320px, la página en una pantalla mayor se ve asi:
Se puede apreciar por tanto el sentido de WEB RESPONSIVE de acuerdo a lo estudiado en la
presente semana 😊
HTML
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">

<link href="css/general.css" media="all" rel="stylesheet">
<link href="css/bootstrap.min.css"type="text/css" rel="stylesheet">
<link href="css/grid.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="css/tablets.css" media="only screen and (min-
device-width : 320px)and (max-device-width : 768px)">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1></div>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity
="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crosso
rigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.mi
n.js" integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="an
onymous"></script>
<script src="js/bootstrap.min.js" ></script>
<body class="py-4 px-4">
<div class="row show-grid">
<div class="col-md-12"><h2>El Primer Párrafo</h2>
<p class="lead">Suspendisse eget sapien suscipit ipsum viverra venenatis nec e
u turpis.</p>
<p ALIGN="justify">Integer rhoncus ac erat vel rhoncus. Fusce maximus eros id so
llicitudin suscipit. Vivamus
auctor at odio non feugiat. Phasellus ac sem ante. In non enim non odio lacinia
efficitur. Cras consectetur dui
in metus dictum, sit amet laoreet tortor tristique.Nam mauris mauris, iaculis se
d placerat sit amet, consequat
vel enim. Nullam rhoncus tellus dui, et luctus libero rhoncus vitae. Nulla ut ni
bh at velit sollicitudin elementum.
Nullam eu turpis luctus, molestie libero et, pulvinar purus. Aliquam turpis dia
m, vehicula in aliquam a, faucibus
sit amet est. Phasellus lobortis quam eget ante tincidunt, non mattis quam pell
entesque. Nunc nec porta nisi.
Curabitur ac felis eget magna cursus posuere. Maecenas facilisis ex vitae massa
pharetra, vel accumsan nisl
venenatis.</p></div>
<div class="col-md-4 themed-grid-col"><h3>El Segundo Párrafo</h3>
<p ALIGN="justify">Quisque volutpat eu purus vitae hendrerit. Nulla vitae tempor
felis. Praesent lobortis fringilla
purus, nec dictum est pharetra ac. Duis eleifend vestibulum velit, cursus hendr
erit diam vulputate a. Morbi
pellentesque vulputate accumsan. Phasellus quis dignissim nisl, vitae hendrerit
turpis. Duis at lorem id velit
tincidunt tristique id et turpis. Fusce scelerisque blandit commodo. Praesent s
celerisque pulvinar consequat.
Quisque nulla magna, luctus ut arcu in, ullamcorper facilisis arcu. Mauris susc
ipit ultricies ultricies.
<div class="col-md-4 themed-grid-cla"><h3>El Tercer Párrafo</h3>
<p ALIGN="justify">Nam mauris mauris, iaculis sed placerat sit amet, consequat v
el enim. Nullam rhoncus tellus dui,
et luctus libero rhoncus vitae. Nulla ut nibh at velit sollicitudin elementum.
Nullam eu turpis luctus, molestie
libero et, pulvinar purus. Aliquam turpis diam, vehicula in aliquam a, faucibus
sit amet est. Phasellus lobortis
quam eget ante tincidunt, non mattis quam pellentesque. Nunc nec porta nisi. Cu
rabitur ac felis eget magna cursus
posuere. Maecenas facilisis ex vitae massa pharetra, vel accumsan nisl venenati
s.</p></div>
<div class="col-md-4 themed-grid-col"><h3>El Cuarto Párrafo</h3>

<div class="col-sm-8 themed-grid-cla"><h4>El Quinto Párrafo</h4>
Aenean ut sapien non arcu elementum vehicula.Duis nec quam vitae urna rutrum vi
verra. Phasellus aliquet mollis
mollis. Pellentesque at risus sit amet eros iaculis euismod. Aliquam at leo sit
amet erat scelerisque consequat
sit amet rutrum sapien. Suspendisse a venenatis turpis, varius maximus augue. I
nteger fermentum, mauris nec
vestibulum ullamcorper, ex augue convallis metus, quis accumsan libero ante a q
uam. Nunc pellentesque arcu et
luctus molestie. Mauris in nisi dolor. In quam turpis, tempus ac elit eu, conva
llis commodo tortor.</p></div>

<div class="col-sm-4 themed-grid-col"><h4>El Sexto Párrafo</h4>
<p ALIGN="justify">Proin convallis, eros in eleifend volutpat, ex orci imperdiet
neque, vestibulum facilisis ex
magna at augue. Fusce dapibus mauris sit amet libero efficitur sodales. Morbi bl
andit, velit nec commodo iaculis,
dolor risus tincidunt massa, nec sagittis ligula turpis vel odio. Curabitur euis
mod, odio quis pretium elementum,
sem risus semper turpis, vitae feugiat mauris eros vel lorem. Proin et aliquam a
rcu. Integer rutrum aliquet lorem
quis elementum. Aenean interdum dui eget porttitor pretium. Aenean varius elit u
llamcorper dui ultrices aliquam.</p></div>
</div>
</body>
</html>
CSS
body {
-webkit-text-size-adjust: none;
background: rgb(102, 102, 102) url(../media/fondo_iphone.jpg) no-repeat cent
er 0;
padding: 20px 5px 5px 5px;
}
h1 {
color: rgb(223, 15, 15);
text-shadow: 0 0 5px rgb(0, 0, 0);
}
h2,h3,h4 {
color:rgb(255,255,255);
}
p {
font: normal 1em/1.25em Helvetica, Arial, Sans-serif;
color: rgb(255,255,255);
}
.themed-grid-col {
background-color:#000000;
}
.themed-grid-cla {
background-color:#808080;
}
@media (min-device-width : 320px) and (max-device-width : 768px) {
{
display: none;
}
}
Bibliografía
 IACC (2020). Introducción al diseño adaptable (responsive). Programación WEB I.
Semana 6

CHristian Vasquez Semana6 ProgramacionWEB1

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CHristian Vasquez Semana6 ProgramacionWEB1

Cargado por

Copyright:

Formatos disponibles

Uso de estructura de rejilla y media query para el diseño de página HMTL adaptable

Christian Vásquez Lolli

1. Descargar y descomprimir las librerías Bootstrap desde:

2. Crear un directorio para la página denominado Prototipo.

4. Con el editor de texto de su preferencia, crear el archivo index.html, usando la plantilla

básica disponible en: https://bit.ly/3710vQR

6. Generar 6 párrafos de texto de relleno desde el sitio: https://es.lipsum.com/

páginas 21 y 22 del contenido de la semana e incorporándola a su prototipo.

tablets.css (puede ser similar a la entregada en el contenido de la semana en la página

9. Construir el diseño correspondiente a su prototipo para que el contenido se presente

a) El primer párrafo se dispondrá en la primera fila. Los párrafos 2, 3 y 4 en la

anchos de 8 y 4 columnas, respectivamente para cada párrafo

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="css/general.css" media="all" rel="stylesheet">

<link href="css/bootstrap.min.css"type="text/css" rel="stylesheet">

<link rel="stylesheet" href="css/tablets.css" media="only screen and (min-device-width :

320px)and (max-device-width : 768px)">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-

<script src="js/bootstrap.min.js" ></script>

<body class="py-4 px-4">

<div class="row show-grid">

nec porta nisi.

<div class="col-md-4 themed-grid-col"><h3>El Segundo Párrafo</h3>

Praesent lobortis fringilla

Aenean ut sapien non arcu elementum vehicula.</p></div>

<div class="col-md-4 themed-grid-cla"><h3>El Tercer Párrafo</h3>

Nullam rhoncus tellus dui,

eget magna cursus

<div class="col-md-4 themed-grid-col"><h3>El Cuarto Párrafo</h3>

Praesent lobortis fringilla

Aenean ut sapien non arcu elementum vehicula.</p></div>

<div class="col-sm-8 themed-grid-cla"><h4>El Quinto Párrafo</h4>

Praesent lobortis fringilla

Phasellus aliquet mollis

fermentum, mauris nec

<div class="col-sm-4 themed-grid-col"><h4>El Sexto Párrafo</h4>

<p ALIGN="justify">Proin convallis, eros in eleifend volutpat, ex orci imperdiet neque,

rutrum aliquet lorem

b) Especificar el ancho adaptable al dispositivo desde el cual será visualizado (1

<meta name="viewport"content="width= device-width, minimum-scale=1.0, maximum-

c) Contemplar el uso de la hoja de estilo construida en el punto 8 de esta tarea,

para la creación de una media query que permita la visualización en

dispositivos tipo tabletas (4 puntos)

<link rel="stylesheet" href="css/tablets.css" media="only screen and (min-device-width :

320px)and (max-device-width : 768px)">

También podría gustarte