Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • PROGRAMACIÓN WEB II: DISEÑO ADAPTABLE RESPONSIVE

    Cargado por

    Karolyna Garrido
    39 vistas7 páginas

    Título original

    525551504 Tarea 2 Semana Programacion Web II 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

    Copyright:

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

    PROGRAMACIÓN WEB II: DISEÑO ADAPTABLE RESPONSIVE

    Cargado por

    Karolyna Garrido

    Copyright:

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

    PROGRAMACIÓN WEB II

    Cristian Andrés Mortecinos Contreras

    DISEÑO ADAPTABLE RESPONSIVE

    Instituto IACC

    05-07-2021
    Tarea de la semana 2
    Desarrollo del control:

    1. Obtenga una fila con cuatro columnas de anchos iguales para ser mostrada en Tablet y escalando a
    formatos de mayor tamaño (3puntos).

    Para poder efectuar la tarea de esta semana, lo primero que realizare es ingresar al código las librerías
    siendo estas las que nos ayudaran a poder establecer y dar como función a la fila requerida: de esta
    forma señalare el código a realizar:
    . -Acá señalo el código, lo primer es ingresemos las etiquetas, <meta>, interiormente de la etiqueta
    <head>, en la cual representa una función cada una de ellas, para abordar, poseemos la etiqueta:
    meta name viewport> = que representa el diseño responsive, que le da visualización en todas las
    plataformas existentes a nuestra página web.
    <link rel=” stylesheet” href=” css/bosstrap.min.css”>= Esta etiqueta nos permite darle efectos a la web
    ya que se compone de el estilo css.
    <script src=” http://code.jquery.com/jquery.js”>= etiqueta que nos ayuda a implementar jQuery <script
    src=” js/boostrap.min.js”>= implementa el código de js.

    Siguiendo con la tarea de esta semana sobre el código de nuestra página a confeccionar, nos
    enfocaremos en base de la página web a utilizando como la etiqueta <body>, la cual tendra contenido
    nuestro contenido de la página creada; body teniendo las etiquetas div, con diferentes clases:
    <div class= “container principal”> = siendo este la clase principal del código, a continuación, la etiqueta
    row, adentro de una clase, asi permitiendo señalar la fila que estableceremos. Mostrando las columnas
    con sus características como se ve posteriormente:
    2. Realice una tabla responsive que contenga un scroll horizontal (3 puntos).
    Para que podamos efectuar los ejercicios, lo primero es realizar ejercicio con una etiqueta <div
    class=”container”>, continuando una clase table responsive permitiéndonos el poder adaptarse a la
    tabla a distintos dispositivos., después de todo esto implementamos otras clases la cual nos dará lo
    siguiente; Color, fluidez, y efectos a la confección de la tabla:

    3. Diseñe un cuadro de dialogo que contenga un título y tres botones, usted debe colocarle la palabra
    de su preferencia (3 puntos).
    Para efectuar el respectivo cuadro de dialogo emergente, recurriremos a distintas clases,
    permitiéndonos crear la tarea correspondiente: La etiqueta inicial es la cual damos como inicio en la
    creación de un botón, permitiendo que pueda mostrar una ventana saliente, después de este
    realizamos la creación de un botón que su finalidad es cerrar a priori, preparamos el encabezado del
    dialogo, luego, el cuerpo, ya obtenido lo que deseamos culminaremos con el pie del cuadro de dialogo el
    cual, asociaremos los botones con los que trabajaremos:
    En lo siguiente vemos código css ocupado para proporcionar color y el tamaño de las columnas

    Por ultimo muestro el código:

    <!doctype html>
    <html lang="es">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/semana2.css">
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/smooth-scroll.min.js"></script>
    </head>
    <body>
    <div class="container principal">
    <div class="table-responsive-sm-md-lg">
    <div class="row">
    <div class="col-sm-3 "> Nombre </div>
    <div class="col-sm-3"> Apellido</div>
    <div class="col-sm-3"> Rut</div>
    <div class="col-sm-3"> Direccion</div>
    </div>
    </div>
    </div>
    <!-- diseño de tabla con scrool horizontal -->
    <div class="container">
    <div class= "table-responsive-md">
    <div class="container-fluid">
    <table class="table">
    <table class=" table table-bordered">
    <tr class= "table-active">
    <th>#id</th>
    <th>Nombre </th>
    <th>Edad</th>
    <th>Direccion</th>
    <th>telefono </th>
    <th>fecha de nacimiento</th>
    <th>correo</th>
    <th>telefono fijo</th>
    <th>curso </th>
    <th>carrera</th>
    <th>universidad</th>
    </tr>
    </table>
    </table>
    </div>
    </div>
    </div>
    <!-- cuadro de dialogo -->
    <div class="container">
    <br> <a href="#ventana1" class="btn btn-primary btn-lg" data-toggle="modal">boton1</a> <div
    class="modal fade" id="ventana1">
    <div class="modal-dialog">
    <div class= "modal-content">
    <div class="modal-header">
    <button tyle="button" class="close" data-dismiss="modal" aria-
    hidden="true">&times;</button>
    <h4 class="modal-tytle">Encabezado de la ventana</h4>
    </div>
    <div class="modal-body">
    <p>usted esta saliendo de la pagina</p>
    </div>
    <div class="modal-footer">
    <button type= "button" class="btn btn-primary" data-
    dismiss="default">Cerrar</button>
    <button type= "button" class="btn btn-primary">Guardar</button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    */Codigo css:*//
    @charset "utf-8";
    /* CSS Document */
    .principal{ background:yellow;
    color:darkred;
    text-aling: center
    }
    div [class= "col"]
    { border:1px;
    color:#0A0201;
    padding: 1em;
    }
    Bibliografía
    IACC 2021. Contenido semana 1, PROGRAMACIÓN WEB II
    DISEÑO ADAPTABLE RESPONSIVE

    También podría gustarte