Alvaro Figueroa Tarea6

Tarea Semana 6
Alvaro Figueroa S.
Programación Web
Instituto IACC
01 de Junio de 2020
DESARROLLO
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 (4 puntos). b)
Especificar el ancho adaptable al dispositivo desde el cual será visualizado (1 punto). 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).
Deberá entregar el código realizado. Adicionalmente, deberá preparar la evidencia de su
implementación, mediante capturas de pantalla, con las visualizaciones en el navegador de
todos los aspectos solicitados y su correspondiente explicación en la plantilla establecida por
IACC para la entrega de la tarea de la semana.
Código HTML
index.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 rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" media="(max-device-width: 768px) and (min-device-width: 20px)"
href="tablets.css">
<link rel="stylesheet" media="(max-device-width: 2768px) and (min-device-width: 760px)"
href="general.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container-fluid">
<div class="row col-xs-14 col-sm-14 col-md-14 col-lg-14">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu eleifend lacus. Sed sapien lacus,
rutrum id finibus eget, malesuada vitae nisl. Pellentesque vulputate diam id tortor condimentum
elementum. Sed sit amet condimentum elit. Pellentesque pharetra, sapien ac efficitur viverra,
quam odio consequat metus, id vestibulum sapien augue ut massa. Duis in purus vestibulum,
tempor mi sed, consectetur velit. Etiam massa sapien, viverra eu magna vitae, egestas lacinia
lacus. Etiam imperdiet maximus purus, ac venenatis velit commodo vel. Sed leo orci, convallis
eget laoreet quis, lacinia ut risus. Ut varius vehicula urna eget sollicitudin. Nullam pharetra,
dolor eget facilisis gravida, augue eros pretium purus, eget maximus est erat nec lectus.
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam feugiat ante gravida dui
rutrum, eu egestas ipsum viverra. In faucibus ut diam et elementum. Nulla justo orci, commodo
nec lectus non, condimentum mattis nunc. Curabitur gravida, orci id sagittis eleifend, nulla eros
maximus mauris, fermentum ultricies nulla sem ac justo. Praesent volutpat volutpat elementum.
Nulla dolor metus, cursus eu venenatis a, consequat auctor magna. Suspendisse sed porta turpis.
Nunc auctor, felis quis condimentum sollicitudin, massa tortor dignissim diam, sed dictum est
dui vel massa. Nulla sed dolor ut felis ornare ultricies quis sit amet metus. Donec vel elementum
ipsum. Curabitur bibendum metus in nulla mollis, ac malesuada odio rutrum. Cras scelerisque
dignissim gravida. Sed velit eros, luctus sed sagittis vehicula, consectetur id nisi. Sed ex dui,
molestie non felis a, malesuada varius lacus. Nam at congue velit, sit amet consequat mauris.
</div>
Suspendisse volutpat ullamcorper lorem, in accumsan metus ornare sit amet. Vestibulum
maximus semper nulla, eget rhoncus erat porttitor ac. Nulla quis tellus erat. Integer accumsan
iaculis justo eget sollicitudin. Nullam interdum turpis tincidunt tellus laoreet rhoncus. Donec et
sem ante. Maecenas vitae mi a lacus elementum posuere a at ante. Aliquam ac consequat risus.
</div>
Pellentesque efficitur turpis eu urna rhoncus vehicula. Curabitur ante nisi, aliquam ut purus eu,
eleifend interdum tortor. Vestibulum suscipit arcu vitae urna dignissim eleifend. Integer
bibendum ex libero, in luctus dolor scelerisque ut. Praesent ut tempor neque. Nullam consectetur
orci laoreet, malesuada elit sed, pulvinar purus. Fusce porta euismod augue. Pellentesque quis
tortor metus. Phasellus vel aliquam quam. Morbi lobortis auctor turpis sed tempor. Etiam tellus
magna, dapibus a commodo vitae, molestie eu ante. Sed bibendum maximus tellus vel congue.
</div>
</div>
<div class="row">
Nulla ac lorem at quam faucibus consectetur sollicitudin a ex. Sed varius magna ut interdum
posuere. Donec sit amet congue elit. Sed mattis nibh et sapien elementum luctus. In in felis
consequat, euismod augue id, lacinia libero. Nunc accumsan turpis sit amet felis interdum
maximus. Quisque ultricies augue eros, sit amet suscipit magna sagittis at. Duis sodales magna
neque, a commodo est ullamcorper eget. Vestibulum posuere, ipsum vel laoreet volutpat, lorem
dolor congue felis, sed efficitur mi felis sit amet sem. Mauris egestas pharetra mi eget maximus.
Maecenas interdum, nisi ut pellentesque pellentesque, ex sapien lobortis tortor, non vehicula mi
turpis sed nisi. Sed ligula tellus, ultricies at ante sit amet, tempus congue nisl.
</div>
Mauris eget massa tellus. Nam pulvinar ac elit in imperdiet. Nullam at condimentum quam.
Donec nec sodales urna. Vestibulum ac dui ut ligula volutpat consequat. Duis ultricies risus id
turpis interdum pharetra. Fusce mauris dolor, dapibus a libero a, viverra lacinia magna. Morbi
urna libero, molestie vitae fringilla non, viverra quis ante. Phasellus id lacus viverra, gravida leo
vehicula, sodales lacus. Aliquam turpis dui, tempor at congue rutrum, sodales vitae magna.
Nullam est nulla, ullamcorper sed ultrices in, fermentum at augue. Mauris volutpat condimentum
nulla non auctor. Ut dictum, libero in eleifend dignissim, ante eros ultricies leo, id tincidunt enim
sem eu risus.
</div>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js" integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
</body>
</html>
Códigos de los CSS
general.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: gray;
}
h1 {
color: black;
font-style: italic;
}
h2 {
color: #717171;
}
p{
column-width: 10em;
column-count: 1;
text-align: justify;
font: normal 100%/1.5 Helvetica, Arial, Sans-serif;
color: #313131;
style="width:100px;
}
div {
color: rgb(255, 255, 255);
border: 5px outset #ffc10745;
font: normal 1em/1.25em "helvetia neue", Helvetia, Arial, Sans-serif;
}
tablet.css
body {
-webkit-text-size-adjust: none;
background: rgb(102, 102, 102)
center 0;
padding: 20px 5px 5px 5px;
}
h1 {
color: rgb(140, 120, 120);
text-shadow: 0 0 5px rgb(0, 0, 0);
font-style: Candara;
}
div {
color: rgb(255, 255, 255);
border: 5px outset red;
}
@media (max-width: 400px)
{
body {
-webkit-text-size-adjust: none;
background: rgb(102, 102, 102)
center 0;
padding: 20px 5px 5px 5px;
}
h1 {
color: rgb(140, 120, 120);
text-shadow: 0 0 5px rgb(0, 0, 0);
font-style: Candara;
}
div {
color: rgb(255, 255, 255);
border: 5px outset Blue;
}
}
Explicación:
En la línea 8, se asigna el estilo css/booststrap, cómo se solicida en el punto 5.
Tambien se realizar referencia del los CSS tablets y general, par formatos de pantalla de 20px a
768 y 768 a 2768 respectivamente. Resolviendo el punto 9.c
En las líneas 15 y 16 se presenta un div con el primer párrafo, dando anchura a todos los tipos de
columnas tamaño 14. Resolviendo el punto 9.a
Continuando con el punto 9.a se agregan los párrafos 2, 3 y 4 con una ancho de 4.
Para los párrafos 5 y 6, dejamos el ancho 8 y 4 respectivamente.
En la línea 6, se especifica el ancho adaptable resolviendo el punto 9.b
Imagen de web para desktop

Imagen web para Tablet
(en este caso usé la de un Ipad)
Imagen Web para Iphone 6, 7, 8, plus

Bibliografía
IACC, (2020). “Contenido semana 6”, consultado el 13 de Mayo del 2020, En: campus.iacc.cl

Alvaro Figueroa Tarea6

Cargado por

Copyright:

Formatos disponibles

Alvaro Figueroa Tarea6

Cargado por

Información del documento

Título original

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

Alvaro Figueroa Tarea6

Cargado por

Copyright:

Formatos disponibles

Tarea Semana 6

Usted se ha incorporado al equipo de desarrollo informático de una editorial, y su jefe le

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

Códigos de los CSS

768 y 768 a 2768 respectivamente. Resolviendo el punto 9.c

columnas tamaño 14. Resolviendo el punto 9.a

Para los párrafos 5 y 6, dejamos el ancho 8 y 4 respectivamente.

En la línea 6, se especifica el ancho adaptable resolviendo el punto 9.b

Imagen de web para desktop

Imagen Web para Iphone 6, 7, 8, plus

También podría gustarte