Programacion Web I Semana 8, Exámenes selectividad de Informática

¡Descarga Programacion Web I Semana 8 y más Exámenes selectividad en PDF de Informática solo en Docsity!

Técnico Superior en Informática

PROGRAMACIÓN WEB I

SEMANA 8

Yerko Quilamán Villalobos

DESARROLLO

Un escritor le solicita el diseño de una página web adaptable para su nuevo libro, el que necesita alojar en formato digital. Pero antes, le pide que realice una pequeña demostración de cómo se visualizará. Para ello, le entrega el código que realizó otra persona, la que dejó sin finalizar el prototipo inicial. Considerando lo anterior, deberá realizar los siguientes pasos:

1. Preparar el ambiente para el proyecto, según los pasos 1 a 5 de la tarea 6, pero usando la librería de Bootstrap versión 4.4.1, disponible en: https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
2. Copiar el siguiente código en la sección body de su página: _

« Capítulo 1 Capítulo 3 »

Capítulo dos

Este es el contenido del capítulo 2 de este interesante libro

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit condimentum justo, ut commodo justo semper in. Suspendisse tincidunt turpis nibh, vel gravida velit consectetur tempus. Aenean placerat, sem eu tristique tempus, ex sem rhoncus lorem, Quisque facilisis.Cras hendrerit lorem vitae dignissim iaculis. Maecenas ultricies, elit rhoncus dignissim sodales.

_ 3. Modificar el código entregado para que contemple las siguientes especificaciones: a) Incorpore dos imágenes de libre elección para que sean visualizadas en forma de círculo al final de la página.

iii. Los elementos iniciales de la página, que redireccionan al capítulo anterior y al siguiente, deberán asignarse con la clase float dentro de la clase clearfix, a la izquierda y derecha de la página, respectivamente. c) Agregue un video cualquiera de Youtube, mediante la clase responsive embed, con una relación 21:9.

Código HTML:

Lorem Ipsu

Lorem Ipsu

Código CSS: /Si no cumple ninguna de las otras sentencias que con esta configuracion/ body { background-color: blue; margin-top: 2px; margin-bottom:2px; margin-left: 2%; margin-right: 2%; } /--------------------------Orange------------------------------------/ /Si tiene un minimo de 200px de ancho queda con esta configuracion/ @media screen and (min-width: 200px) { body { background-color: orange; margin-top: 2px; margin-bottom:2px; margin-left: 2%; margin-right: 2%; } p { font: normal 100%/1.5 Helvetica, Arial, Sans-serif; color: black; } h1 { font: Helvetica, Arial, Sans-serif; color: black; text-align:center; } .titulo{ text-align:left; font-family: Arial; color:#000000; font-size: 60px; font-style: italic; background-color:#CC7722; } .subtitulo {

font-family: Arial; font-size: 30px; color:#000000; } } /-----------------------------Green------------------------------------/ /Si tiene un minimo de 400px de ancho queda con esta configuracion/ @media screen and (min-width: 400px) { body { background-color: #106D03; margin-top: 2px; margin-bottom:2px; margin-left: 2%; margin-right: 2%; } p { font: normal 100%/1.5 Helvetica, Arial, Sans-serif; color: #1F022B; } h1 { font: Helvetica, Arial, Sans-serif; color: #1F022B; text-align:center; } .titulo{ text-align:left; font-family: Arial; color:#000000; font-size: 60px; font-style: italic; background-color:#CC7722; } .subtitulo { font-family: Arial; font-size: 30px; color:#000000; } } /----------------------------Yellow------------------------------------/ /Si tiene un minimo de 800px de ancho queda con esta configuracion/

color: #EEE7E6; } h1 { font: Helvetica, Arial, Sans-serif; color: #EEE7E6; text-align:center; } .titulo{ text-align:left; font-family: Arial; color:#000000; font-size: 60px; font-style: italic; background-color:#CC7722; } .subtitulo { font-family: Arial; font-size: 30px; color:#EEE7E6; } } /--------------------------Pink---------------------------------------/ /Si tiene un minimo de 1600px de ancho queda con esta configuracion/ @media screen and (min-width: 1600px) { body { background-color: white; margin-top: 2px; margin-bottom:2px; margin-left: 2%; margin-right: 2%; } p { font: normal 100%/1.5 Helvetica, Arial, Sans-serif; color: #4F384B; } h1 { font: Helvetica, Arial, Sans-serif; color: #4F384B; text-align:center; } .titulo{

text-align:left; font-family: Arial; color:#000000; font-size: 60px; font-style: italic; background-color:#CC7722; } .subtitulo { font-family: Arial; font-size: 30px; color:#000000; } } /contenido a la derecha/ .right { position: absolute; right: 0px; width: 300px; } /contenido a la izquierda/ .left { position: absolute; left: 20px; width: 300px; } Resultado Final:

REFERENCIAS BIBLIOGRÁFICAS

REFERENCIAS

IACC (2019 ). Diseño adaptable (responsive). Parte II. Programación Web I. Semana 8. Clase d-md-block por obsolescencia de .hidden https://es.stackoverflow.com/questions/71003/ocultar-en-bootstrap-