S6 - Jose Flores Semana 6

PROGRAMACIÓN WEB I
SEMANA 6
Jose Flores
07 de agosto de 2022
Ingeniería en Informática
DESARROLLO
Respuestas:
1,2y3.-
Se descarga, se crea el directorio de nombre prototipo y se copia al directorio el archivo Bootstrap
4.- se crea el archivo index.html:

5.- Adapto el archivo Bootstrap al directorio para CSS:
6.- Se genera 6 párrafos de texto de relleno del sitio indicado:

7.- Se crea la hoja de estilos general.css:
8.- Se crea estilo para la visualización del contenido en tabletas llamado tablets.css:
9.- Se comienza con el diseño del prototipo:
Se genera el contenedor de rejilla:
<div class="container">
a.- Primer párrafo en la primera fila:
<div class="row">
<div class="col-md-12">
Párrafos 2, 3 y 4 en la siguiente fila.
<div class="row">
Se utiliza este código para cada uno de los párrafos 2,3 y 4
Los párrafos 5 y 6 en la tercera fila:
Para el párrafo 5 usamos el código:
Para el párrafo 6 el siguiente:
Así se ve en el navegador los párrafos y como se adaptan al diseño:
b y c.- se especifica el ancho adaptable al dispositivo de una Tablet para el aspecto en el navegador
usamos el modelo iPad y se crea una media query para permitir la visualización de este:
<link rel="stylesheet" href="css/tablets.css" media="only screen and (min-device-width : 320px) and

(max-device-width :768px)"/>
El código realizado para llevar a cabo esta tarea es el siguiente:
<!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" href="css/general.css">
<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">
<div class="row">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row">
<p>
<b>parrafo-1</b>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum
ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T.
persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera
que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó
como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.
</p>
</div>
</div>
<div class="row">
<p>
<b>parrafo-2</b>
Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio.
Tiene sus raices en una pieza clasica de la literatura del Latin, que data del año 45 antes de Cristo,
haciendo que este adquiera mas de 2000 años de antiguedad. Richard McClintock, un profesor de Latin de
la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del
latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió
la fuente indudable.
</p>
</div>
<p>
<b>parrafo-3</b>
Nam et ex quam. Duis malesuada nunc ac consectetur condimentum. Fusce egestas volutpat
sapien. Praesent in placerat nisl. Nunc scelerisque venenatis dapibus. Phasellus volutpat et nulla ut
tincidunt. Sed suscipit efficitur nulla. Vestibulum vel orci elit. Suspendisse sodales, dui vitae lacinia
sodales, justo lacus luctus quam, non fermentum arcu justo a turpis. Praesent vehicula nec mi non
facilisis. Praesent et aliquet mi. Aenean non venenatis massa. Vivamus eu volutpat tortor. In hac habitasse
platea dictumst. In non euismod massa.
</p>
</div>
<p>
<b>parrafo-4</b>
Curabitur tincidunt non nulla vitae pulvinar. In nec est et ligula vulputate gravida non eget metus.
Etiam laoreet ultricies finibus. Vivamus sagittis enim orci, eu elementum diam hendrerit nec. Fusce
pharetra, neque a commodo fermentum, dolor arcu bibendum diam, ac consectetur elit velit quis ligula.
Etiam at scelerisque justo. Nullam eu lobortis ante. Sed eget dignissim sem, et sollicitudin ligula. Aliquam
eget elementum erat. Integer vel porta mi, in placerat mi. Praesent vehicula malesuada velit a fringilla.
</p>
</div>
</div>
<div class="row">
<p>
<b>parrafo-5</b>
Praesent eget porta magna, ut convallis turpis. Nunc nec facilisis diam. Donec faucibus hendrerit
urna sit amet varius. Vestibulum commodo ultricies enim eu semper. Suspendisse non convallis nisi. Ut
vulputate, velit vitae condimentum vulputate, quam felis consequat quam, at egestas ex lacus id tellus.
Curabitur odio arcu, scelerisque pellentesque ligula ac, commodo dictum enim. Etiam suscipit sit amet
nulla ut tempus. Integer sodales metus sit amet consequat commodo. Nullam scelerisque finibus felis, vel
feugiat urna rutrum eget. Donec maximus tincidunt cursus.
</p>
</div>
<p>
<b>parrafo-6</b>
Cras volutpat diam in lobortis faucibus. Vestibulum pulvinar varius eros non rhoncus. Praesent quis
feugiat tortor. Vestibulum dictum magna sagittis eros tincidunt lacinia. Praesent tellus elit, molestie sed
vestibulum ullamcorper, ullamcorper id ligula. Sed venenatis interdum ipsum in maximus. Aliquam id
ullamcorper libero. Suspendisse potenti.
</p>
</div>

<script src="js/jquery-3.4.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Después de haber generado todo el código el prototipo final quedo de la siguiente manera:
REFERENCIAS BIBLIOGRÁFICAS
IACC (2020). Introducción al diseño adaptable (responsive). Programación WEB I. Semana 6.
campusmvp.es. Un vistazo a las columnas responsive en HTML5 y CSS3:

https://www.campusmvp.es/recursos/post/columnas-responsive-html5-css3.aspx

S6 - Jose Flores Semana 6

Cargado por

Copyright:

Formatos disponibles

S6 - Jose Flores Semana 6

Cargado por

Información del documento

Descripción original:

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

S6 - Jose Flores Semana 6

Cargado por

Copyright:

Formatos disponibles

PROGRAMACIÓN WEB I

Se descarga, se crea el directorio de nombre prototipo y se copia al directorio el archivo Bootstrap

4.- se crea el archivo index.html:

6.- Se genera 6 párrafos de texto de relleno del sitio indicado:

Se genera el contenedor de rejilla:

a.- Primer párrafo en la primera fila:

Se utiliza este código para cada uno de los párrafos 2,3 y 4

Los párrafos 5 y 6 en la tercera fila:

Para el párrafo 5 usamos el código:

Para el párrafo 6 el siguiente:

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

<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" href="css/general.css">

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

campusmvp.es. Un vistazo a las columnas responsive en HTML5 y CSS3:

También podría gustarte