Manuel Pacheco C Control6

Uso de estructura de rejilla y media query para el diseño de página HMTL adaptable.
Manuel Pacheco C.
PROGRAMACIÓN WEB I
Instituto IACC
18/05/2020
DESARROLLO DE LA TAREA:
Usted se ha incorporado al equipo de desarrollo informático de una editorial, y su jefe le
solicita la elaboración de un prototipo de página web que pueda ser visualizado desde tabletas.
Para ello, deberá realizar los siguientes pasos:
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.
El código del prototipo es :
<!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="container-fluid">
<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>

Aenean ut sapien non arcu elementum vehicula.</p></div>
<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 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.
Para que la página se adapte al dispositivo Tablet se debe incluir 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.
El detalle del código es este:

<link rel="stylesheet" href="css/tablets.css" media="only screen and (min-device-width : 320px)and (max-
device-width : 768px)">
Como href apunta a la hoja de estilo la cual hara 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:
Al cambiar al tamaño de una Tablet se vería así para hacer notar la diferencia entre un tamaño y
otro:
Al reducir aún más hasta el tamaño menor que se indicó 320px se vería así:
El código de la hoja de estilo es este:

body {
-webkit-text-size-adjust: none;
background: rgb(102, 102, 102) url(../media/fondo_iphone.jpg) no-repeat center 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
Contenido Semana 6

Manuel Pacheco C Control6

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

Manuel Pacheco C Control6

Cargado por

Copyright:

Formatos disponibles

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

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

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

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

<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>

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

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

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

El detalle del código es este:

El código de la hoja de estilo es este:

También podría gustarte