Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Rodrigo Vargas Tarea8

    Cargado por

    ravs2
    19 vistas9 páginas
    Programación web I, semana 8

    Título original

    Rodrigo_Vargas_Tarea8

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Programación web I, semana 8

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    19 vistas9 páginas

    Rodrigo Vargas Tarea8

    Cargado por

    ravs2
    Programación web I, semana 8

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 9

    PROHT1304-19-PROGRAMACIÓN WEB I

    SEMANA 7

    Nombre del estudiante: Rodrigo Vargas Soto


    Fecha de entrega: 21 – 08 – 2023
    Carrera: Técnico De Nivel Superior En Análisis Y Programación
    DESARROLLO
    DESARROLLO DE LA ACTIVIDAD

    Lee atentamente la información que se presenta. Analízala de acuerdo con los contenidos revisados en la
    semana y desarrolla la actividad evaluativa.

    Imagina que has sido invitado a participar en el equipo de desarrollo de software de una empresa
    procesadora de productos lácteos. Recientemente, iniciaron la producción de tres nuevos productos:
    leche deslactosada, leche deshidratada sin grasa, y leche semidescremada.

    Tu jefe le ha solicitado la elaboración de un prototipo de página web que pueda ser visualizado desde los
    dispositivos móviles y/o computadoras personales de los clientes. Después de una reunión con los
    expertos de marketing, se decidió incluir la siguiente información de los productos:

    1. ¿Qué es la leche deslactosada? ¿Cuáles son sus beneficios?

    2. ¿Qué es la leche deshidratada sin grasa? ¿Cuáles son sus usos? ¿Cuál es su composición?

    3. ¿Qué es la leche semidescremada? ¿En qué se diferencia de la leche entera?

    Para cumplir con lo solicitado, deberás realizar los siguientes pasos:

    1. Preparar el ambiente para el proyecto según los pasos 1 al 3 de la tarea de la semana 7.

    2. Utilizar la plantilla propuesta por la empresa para la visualización de la información de la página,

    mostrada en la siguiente figura:

    3. Seguidamente, proceda a construir el diseño correspondiente a su prototipo para que el contenido

    suministrado contemple las siguientes especificaciones:

    3.1. Emplear estilos CSS a nivel de encabezados (h1) para que el contenido se muestre como en la

    información de referencia: Leche deslactosada (Bloque 1); Leche deshidratada sin grasa
    (Bloque 4).

    3.2. Mostrar la descripción de la leche deslactosada como un párrafo (Bloque 2).

    3.3. Mostrar los beneficios de la leche deslactosada como una lista no ordenada (Bloque 3).

    3.4. Mostrar la descripción de la leche deshidratada sin grasa como un párrafo (Bloque 5).

    3.5. Mostrar la tabla de la composición típica de la leche deshidratada sin grasa, con bordes, cabecera de
    color amarillo y celdas de ancho fijo, igual para las dos columnas (Bloque 6).

    Deberás entregar el código realizado. Adicionalmente, deberás preparar la evidencia de tu


    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.

    HTML
    <!doctype html>
    <html lang="es">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,
    shrink-to-fit=no">

    <!-- Bootstrap CSS -->


    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/general.css"/>
    <title>productos lácteos.</title>

    <style>
    @import "general.css";

    table {
    border-collapse: collapse;
    }

    table,
    th,
    td {
    border: 1px solid black;
    }

    th,
    td {
    padding: 5px;
    }

    #columna1 {
    column-count:2;
    column-gap:20px;
    column-rule:4px dotted gray;
    }
    #columna2 {
    column-count:1;
    column-gap:20px;
    }
    </style>

    </head>

    <body>
    <div class="contenedor_principal">
    <div class="columna2">
    <h1>Leche deslactosada</h1>
    </div>
    <div id="columna1">
    <p>La leche "sin lactosa" es una leche especialmente indicada
    en personas con problemas de
    intolerancia a la lactosa. Se trata de una leche modificada a
    la cual se adiciona lactasa, la enzima
    que rompe la lactosa en sus dos azúcares simples
    constituyentes, la glucosa y la galactosa. De ahí
    que presente un sabor más dulce, diferente al de la leche
    clásica.
    </p>
    <br>

    <h2>Beneficios</h2>
    <p> Cabe destacar dentro de los principales beneficios de la
    leche deslactosada los siguientes:
    • Rica en calcio que ayuda al mantenimiento de los huesos.
    • Fuente de proteína que ayuda al mantenimiento de la masa
    muscular.
    • De fácil digestión que reduce las molestias en consumidores
    intolerantes a la lactosa.
    • Contribuye a fortalecer nuestro sistema inmunológico.
    </p>
    </div>

    <div class="columna2">
    <h1>Leche deshidratada sin grasa</h1>
    </div>

    <div id="columna1">
    <p>Se obtiene al extraer el agua de la leche descremada
    pasteurizada. Se usa para productos de
    panadería, confitados, productos lácteos, productos cárnicos
    y mezclas preparadas.
    </p>
    <br>

    <table>
    <tr>
    <td bgcolor="yellow">Composición típica</td>
    <td bgcolor="yellow"></td>
    </tr>
    <tr>
    <td>Proteínas</td>
    <td>34.0%-37,0%</td>
    </tr>
    <tr>
    <td>Lactosa</td>
    <td>49,5%-52,0%</td>
    </tr>
    <tr>
    <td>Grasa</td>
    <td>0,6%-1,25%</td>
    </tr>
    <tr>
    <td>Cenizas</td>
    <td>8,2%-8,6%</td>
    </tr>
    </table>
    </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

    CSS
    *{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    }

    body{
    background: lightblue;
    }

    h1{
    color: darkblue;
    font-style: italic;
    padding: 35px;
    text-align: center;
    }

    h2{
    color: blue;
    }

    p{
    font-style: italic;
    padding: 5px;
    margin: 40px auto;
    }

    table {
    border-collapse: collapse;
    }

    table, th, td {
    border: 1px solid black;
    }

    th, td {
    padding: 5px;
    }

    .flex-container {
    display: flex;
    background-color: blue;
    flex-direction: row;
    }

    .flex-container div{
    background-color: aqua;
    margin: 5px;
    }

    .contenedor_principal {
    background-color: #c8e6c9;
    width: 60%;
    margin: 0 auto;
    padding: 15px;
    border: 8px double #ffe0b2 ;
    }
    @media screen and (max-width: 800px) {
    body{
    -webkit-text-size-adjust: none;
    background:LightSteelBlue;
    padding: 20px 5px 5px 5px;
    }
    h1{
    color:green;
    text-shadow: 0 0 1px black;
    padding: 25px;
    }
    h2{
    color: rgb(4, 175, 38);

    }
    p{
    font: normal 1em/1.25em "helvetia neue";
    font-size: 140%;
    color: goldenrod;
    }
    .contenedor_principal {
    width: 90%;
    margin: 0 auto;
    padding: 05px;
    border: 8px double blueviolet;
    background-color: PowderBlue;
    }

    .flex-container{
    flex-direction: column;
    }
    }
    REFERENCIAS BIBLIOGRÁFICAS
    IACC (2022). Diseño de columnas, flexible y de cuadrícula en CSS3. Programación Web I. Semana 8.

    También podría gustarte