Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Programacion

    Cargado por

    Lizeth Magallón
    11 vistas9 páginas
    sublime

    Título original

    programacion

    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
    sublime

    Copyright:

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

    Programacion

    Cargado por

    Lizeth Magallón
    sublime

    Copyright:

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

    Pasó a Paso

    Paso1: Abrimos sublime


    Paso2: Guardamos dos hojas de trabajo

    Paso3: Ponemos las etiquetas necesarias como <html>, <body>


    etc.
    Paso4: Procedemos a darle clases a ciertas etiquitas las cuales son:

    <header class="Encabezado"></header>
    <section class="Contenido">
    <article class="Post"></article>
    <article class="Post"></article>
    </section>
    <aside class="Contenido-Lateral"></aside>
    <footer class="Pie-Pagina"></footer>

    Paso5: A nuestra etiqueta body le dimos ciertos estilos.


    body{
    margin: 0;
    }

    En este caso a la etiqueta <body> le dimos un margen de 0.


    Paso6: A nuestra clases .Encabezado, .Contenido, .Contenido-
    Lateral, .Pie-Pagina le dimos ciertos estilos.
    .Encabezado, .Contenido, .Contenido-Lateral, .Pie-Pagina {
    padding: 1em 2em;
    }

    En nuestro caso le aginamos un padding: 1em 2em;


    padding:  establece el espacio de relleno requerido por todos los lados de un elemento.
    EM: la unidad em hace referencia al tamaño en puntos de la letra que se está utilizando. Si se utiliza
    una tipografía de 12 puntos, 1em equivale a 12 puntos. 

    Paso7: A nuestra clases .Contenido, .Contenido-Lateral, .Pie-


    Pagina le dimos ciertos estilos.
    .Contenido, .Contenido-Lateral, .Pie-Pagina{
    float: left;
    box-sizing: border-box;
    }

    En nuestro caso le aginamos un float: left, box-sizing: border-box


    que esto quiere decir:
    Float: left: float” sirve para alinear un elemento en este caso fue a la izquierda.
    La propiedad box-sizing. box-sizing es una propiedad CSS para cambiar el modelo de caja por
    defecto de los navegadores.

    Paso8: A nuestra clase .Encabezado le dimos ciertos estilos.


    .Encabezado{
    background-color: rgb(247, 220, 22);
    height: 100px;
    }

    En nuestro caso le aginamos un background-color: rgb(247, 220,


    22), height: 100px; esto quiere decir:
    Background-color: rgb(x, x, x): Color convertido a formato de color diferente como RGB.
    Height: Altura.

    Paso9: A nuestra clase .Contenido le dimos ciertos estilos.


    .Contenido{
    width: 60%;
    }

    En nuestro caso le aginamos un Width esto quiere decir:


    Width: Anchura.

    Paso10: A nuestra clase .Contenido-Lateral le dimos ciertos


    estilos.
    .Contenido-Lateral{
    width: 40%;
    background-color: rgb(163, 163, 113);
    height: 500px;
    }

    En nuestro caso le aginamos un Width, background-color: rgb(163,


    163, 113), height: 500px, esto quiere decir:
    Width: Anchura.
    Background-color: rgb(x, x, x): Color convertido a formato de color diferente como RGB.
    Height: Altura.

    Paso11: A nuestra clase .Post le dimos ciertos estilos.


    .Post{
    background-color: rgb(117, 255, 26, 0.46);
    height: 100px;
    margin-bottom: 1em;
    }

    En nuestro caso le aginamos un background-color: rgb(117, 255, 26,


    0.46), height: 100px, margin-bottom: 1em; esto quiere decir:
    Background-color: rgb(x, x, x): Color convertido a formato de color diferente como RGB.
    Height: Altura.
    Margin-bottom: Margen inferior.

    Paso12: A nuestra clase .Pie-Pagina le dimos ciertos estilos.


    .Pie-Pagina{
    width: 100%;
    background-color: #000;
    height: 50px;
    }

    En nuestro caso le aginamos un background-color:, Width, height,


    esto quiere decir:

    Width: Anchura.
    Background-color: Fue el color negro
    Height: Altura.

    Media Query

    Paso13: Utilizamos 3 media query en css.


    @media screen and (min-width: 780px) and (max-width: 1024px){
    .Encabezado{
    background-color: rgb(246, 246, 243);
    }
    .Contenido, .Contenido-Lateral{
    width: 50%;
    }
    }
    @media screen and (min-width: 480px) and (max-width: 780px){
    .Encabezado{
    background-color: rgb(246, 246, 243);
    }
    .Contenido, .Contenido-Lateral{
    width: 100%;
    }
    }
    @media screen and(max-width: 480px){
    .Encabezado{
    height: 80px;
    }
    .Contenido{
    background-color: rgb(250, 250, 168);
    }
    .Contenido-Lateral{
    width: 100%;
    }
    }

     @media screen {} Indica al navegador que los nuevos estilos


    definidos entre los corchetes deben aplicarse sólo a la
    visualización en pantalla.
     El operador and es usado para colocar juntas múltiples
    funciones multimedia.
     (min-width:780px) especifica que dichos estilos sólo se
    mostrarán si la ventana es mayor de 780 píxeles.
     (max-width:1024px) especifica que dichos estilos sólo se
    mostrarán si la ventana es menor de 1024 píxeles.

    Paso14: Por ultimo en html agregamos la etiqueta <meta


    name="viewport" content="width=decive-width"> que es una de las
    etiquetas más representativas de la web móvil, que nos permite
    configurar cómo debe interpretar una página el navegador
    web para móviles.

    Fin
    Monitor

    Las dimensiones del monitor se indican mediante una cifra en


    pulgadas que mide la diagonal de la pantalla. Las más habituales hoy
    en día oscilan entre las 17 y las 32 pulgadas. 

    Laptop
    Pantallas de 11 o 12 pulgadas: este tamaño de pantalla incluye, principalmente,
    los Chromebook o portátiles de bolsillo, unos equipos ideales para consultas simples como
    el correo electrónico, el estado de cuenta, o alguna red social que no requiera mucho de
    muchos detalles para visualizar.

    Pantallas de 13 a 14 pulgadas: Un tamaño regular y mayormente utilizado en


    mini portátiles, suficiente para las tareas cotidianas que solemos realizar como la revisión
    del correo, redactar, revisar y postear contenido en redes sociales e investigar todo tipo de
    información en Google.
    Pantallas de 15 pulgadas: ésta resulta ser la medida estándar entre todos los tipos de
    tamaños de pantalla, y realmente la que todos conocemos, por lo que ya sabrás que es ideal
    para casi cualquier tipo de uso.

    Pantallas de 17 pulgadas: Este es el mayor tamaño de todos y con él, obviamente


    verás con mayor detalle todo lo que sucede en tu ordenador, por lo que suele ser la medida
    ideal para realizar trabajos de diseño gráfico o edición de algún material audiovisual, de
    igual manera resulta perfecto para aquellos gamers.

    Tableta

    Las Tablets de 7 pulgadas son quizás el tamaño más popular de Tablet tras las
    de 9 y 10 pulgadas. Por su tamaño, estas Tablets son muy portátiles sin sacrificar tamaño
    para ello.
    Las Tablets de 8 pulgadas representan un sector nuevo, con muy pocas opciones.
    Este nuevo sector de Tablets se caracteriza por estar en un punto medio entre las Tablets de
    7 pulgadas y las Tablets con una pantalla mayor.

    Celular

    Son las 4,7 pulgadas, y las 5 pulgadas Y en cuanto a la resolución,


    1080 x 1920 píxeles (FullHD)

    También podría gustarte