Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Programacion Web 1 Semana 7

    Cargado por

    leonel
    76 vistas11 páginas
    programacion avanzada I

    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
    programacion avanzada I

    Copyright:

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

    Programacion Web 1 Semana 7

    Cargado por

    leonel
    programacion avanzada I

    Copyright:

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

    PROGRAMACIÓN WEB 1

    SEMANA 7

    Edison Castro Lecaros


    17 de mayo de 2022
    Técnico Nivel Superior en Informática
    DESARROLLO
    1. Preparar el ambiente para el proyecto según los pasos 1 al 5 de la tarea de la semana 6.

    Respuesta: abrimos el link y descargamos Bootstrap (https://getbootstrap.com/docs/4.4/getting-


    started/download/), posteriormente descomprimo el archivo, se crea una carpeta con el nombre
    Prototipo 1 y se agregan los archivos comprimidos. Se crea el archivo index.html, se adapta el enlace
    al archivo Bootstrap de su directorio para css.

    2. Crear una hoja de estilo llamada general.css a partir del código proporcionado en la página 21 y
    22 del contenido de la semana 6 e incorporarla a su prototipo.

    Respuesta: para ello, damos clic en nuevo archivo y ponemos nombre general.css, posteriormente
    copiamos el código incorporado en la materia de la semana 6.
    3. Copiar el siguiente código en la sección body de tu página:

    Respuesta:

    <body>

    <div>

    &laquo; Ejercicio Anterior &nbsp; Ejercicio Siguiente &raquo;

    </div>

    <p>Ejercicio: Plancha frontal</p>

    <p>Musculatura: Abdomen</p>

    <p>En el suelo, apoye el peso del cuerpo sobre los antebrazos y los dedos de los pies.

    Los brazos deben permanecer flexionados y debajo de los hombros.

    Apriete los omoplatos y extienda la columna vertebral. Presione los muslos hacia arriba

    y estire los talones.

    Después de unos segundos, apoye todo el cuerpo en el suelo para descansar.</p>

    <br>

    <p> Reflexiona sobre esto "Para tener éxito, en primer lugar debemos creer que

    podemos"</p>

    <p>Nikos Kazantzakis. Escritor griego</p>

    </body>
    4. Modificar el código entregado para que contemple las siguientes especificaciones:

    a) Emplear elementos de tipografía para que la visualización sea como la mostrada en la imagen de
    referencia (3 puntos).

    Respuesta: aqui empleamos los elementos de tipografia para la visualización:


    En la primera parte utilizamos la etiqueta <small> la cual permite que todo el texto que se encuentra
    dentro de ella se visualice más pequeño.
    Para la etiqueta <h1> utilizamos la clase “text-center” y la etiqueta <em>, entonces logramos centrar
    el titulo y con “em” le damos cursiva al titutlo.
    La etiqueta <strong> nos permite poner en negrita una palabra o una frase, por lo tanto, se utilizo
    para la palabra abdomen.
    Utilice la clase “text-right” para ubicar el texto a la derecha, y también el <small> para dejar más
    pequeña el texto (veras que con la practica lograras más tiempo)
    Y para el párrafo que se encuentra dentro del <div> utilice la etiqueta <small> para dejar más
    pequeño el texto.
    Para la frase de reflexión, utilice una clase “text-left”, un <small> y un <em> de esta manera dejamos
    el texto a la izquierda, dejamos el texto mas pequeño y una parte en cursiva (lo que está en comillas).
    En cuanto al ultimo <p> le damos una clase “text-right” para ubicarlo a la derecha y un <small> para
    dejar más pequeño el texto (escritor griego).
    (Bootstrap)
    b) Insertar al final de la página el código modificado en el punto a) para mostrar con todas las
    etiquetas y clases en el navegador la línea: Reflexiona sobre esto "Una receta no tiene alma. Es el
    cocinero quien debe darle alma a la receta" (1,5 puntos)

    Respuesta: aquí, utilice un párrafo con una clase “text-left” el cual permite dejar el texto a la
    izquierda, utilice el <code> y posteriormente se reemplazan los signos “<>” por “&lt,&gt” dentro de
    estos, agregue dos palabras luego cerre &gt</code>

    (Bootstrap)

    c) Agregar un formulario vertical para preguntar al usuario su dirección de correo y una casilla que
    pregunte si desea recibir recetas desde la página (3,5 puntos).

    Respuesta: para el formulario utilice un form con clase “form-group”, como referencia de la materia
    de esta semana.
    Utilice un label, para el correo
    Utilice un input type email, de esta manera solo admite correos electrónicos.
    Un placeholder, para indicar “introduce tu correo electrónico”
    Input type checkbox, para crear la casilla.

    d) Agregar el botón de enviar para que se vea activo (1 punto).


    Respuesta: aquí utilice un div con clase form-group

    Button type submit, con clase btn btn-primary btn-lg active, y con nombre “enviar”

    Asi queda todo el trabajo.


    Se deja el código completo.

    <!doctype html>

    <html lang="en">

    <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="css/bootstrap.min.css" rel="stylesheet">

    <!--aqui se integra el bootstrap-->

    <link rel="stylesheet" href="general.css">

    <!--aqui se integra la hoja de estilo "general.css"-->

    <title>Hello, world!</title>

    </head>

    <body>

    <div>

    <small>&laquo; Ejercicio Anterior &nbsp; Ejercicio Siguiente &raquo;</small>

    </div>

    <h1 class="text-center"><em>Ejercicio: Plancha frontal</em></h1>

    <p>Este es el ejercicio que fortalace la musculatura del <strong>abdomen</strong> si es bien


    ejecutado</p>

    <p class="text-right"><small> Verás que con la práctica lograras más tiempo.</small></p>

    <div>

    <p><small> En el suelo, apoye el peso del cuerpo sobre los antebrazos y los dedos de los pies.

    Los brazos deben permanecer flexionados y debajo de los hombros.

    Apriete los omoplatos y extienda la columna vertebral. Presione los muslos hacia arriba

    y estire los talones.

    Después de unos segundos, apoye todo el cuerpo en el suelo para descansar.</small></p>

    </div>
    <p class="text-left"><small>Reflexiona sobre esto <em>"Para tener éxito, en primer lugar debemos
    creer que podemos"</em></small></p>

    <p class="text-right">Nikos Kazantzakis.<small> Escritor griego</small></p>

    <p class="text-left"><small>El elemento <pre>&lt;elemento de ejemplo&gt;</code> Ejemplo de como


    se debera visualizar el código solicitado en la tarea.</smal></p>

    <form class="form-vertical" role="form">

    <div class="form-group">

    <label for="ejemplo_email_1"><strong>Correo</strong></label><br>

    <input type="email" class="form-control input-sm" id="ejemplo_usuario_1"

    placeholder="Introduce tu correo electrónico">

    </div>

    <div class="form-group">

    <div class="col-lg-offset-2 col-lg-10">

    <div class="checkbox">

    <label>

    <input type="checkbox"> Si deseas activar tu suscripción activa esta casilla

    </label>

    </div>

    </div>

    </div>

    <div class="form-group">

    <div class="col-lg-offset-2 col-lg-10">

    <button type="submit" class="btn btn-primary btn-lg active">Enviar</button>

    </div>

    </div>

    </form>

    </body>

    </html>
    Hoja de estilo general.css

    /* Dispositivos pequeños (tablets, anchura mayor o igual a 768px) */


    @media(max-width:768px){}
    /* Dispositivos medianos (computadores, anchura mayor o igual a 992px) */
    @media(max-width:992px){}
    /* Dispositivos grandes (computadores, anchura mayor o igual a 1200px) */
    @media(max-width:1200px){}
    body {
        margin: 0;
        padding: 100px 0 0 75px;
        font-family: Arial, Helvetica, sans-serif;
       }
       h1 {
        color: black;
        font-style: italic;
    }
    h2 {
     color: #717171;
    }
    p {
     font: normal 100%/1.5 Helvetica, Arial, Sans-serif;
     color: #313131;
    }
    REFERENCIAS BIBLIOGRÁFICAS
    IACC (2020). Diseño adaptable (responsive). Parte I. Programación WEB I. Semana 7.

    También podría gustarte