devfzn/desafio_encriptador
devfzn/desafio_encriptador
1
0
Fork 0
Code Pull Requests Activity
d9952b861c
desafio_encriptador/004_primeras_paginas
History
devfzn 7eb3ca2b35
HTML5 y CSS3 pt. 4: Avanzando en CSS 06 
Diseño responsivo - fin del curso.
2023-04-13 21:31:07 -04:00
..
html_css_parte1 HTML y CSS parte 2: Posic. listas y navegación 01 2023-04-10 18:22:20 -04:00
html_css_parte2 HTML5 y CSS3 pt. 2: Posic. listas y navegación 06 2023-04-11 11:51:06 -04:00
html_css_parte3 HTML5 y CSS3 pt. 3: Formularios y Tablas 06 2023-04-12 18:34:50 -04:00
html_css_parte4 HTML5 y CSS3 pt. 4: Avanzando en CSS 06 2023-04-13 21:31:07 -04:00
README.md HTML5 y CSS3 pt. 4: Avanzando en CSS 06 2023-04-13 21:31:07 -04:00

README.md

Formación programación

Primeros pasos

04 Crea tus primeras paginas HTML5 y CSS

Parte 1 - Primera página web

Diferencias entre html y css.

en NeoVim set ff=unix

Página barbería - estilo.css.

Formas de aplicar estilo CSS:

  • style inline.

        <h1 style="text-align: center;">Sobre la Barbería Alura</h1>

  • style block con tag <style>.

        <style>
        p {
            text-align: center;
        }
    </style>

  • style file.

Sistema hexadecimal

Sistema número que consta de las 6 primeras letras del alfabeto y los números del 0 al 9.

0 1 2 3 4 5 6 7 8 9 A B C D E F

La combinación de estos 16 elementos permiten la representación de mas valores, en menos caracteres, que por ejemplo, en un sistema binario. Es por esto que es ampliamente utilizado en el mundo imformático.

La representación de los colores en 6 posiciones


  0 0 0 0 0 0 <--- Mínimo
  F F F F F F <--- Máximo
# _ _ _ _ _ _
  r r g g b b

  Negro  -> #000000
  Blanco -> #FFFFFF

  0   = Mínimo
  255 = Máximo

  Negro  -> rgb(0,0,0)
  Blanco -> rgb(255,255,255)

Equipo de Front End

  • Programador Front End
  • Responsable por UX (user experiencie)
  • Responsable por UI (user interface)
  • Copywriter (Generador de Contenido)
  • SEO (Search Engine Optimization)

Final curso HTML5 y CSS parte 1 - Página barbería - estilo.css.

Parte 2 - Posicionamiento, listas y navegación

Página productos y estilo.

  • Base de un archivo HTML.
  • Lista html no ordenada.
  • Posicionamiento listas y 'menu' de navegación.
  • Posicionamiento encabezado de página.

CSS - La propiedad display.

css 
    span.a {
        display: inline; /* the default for span */
        width: 100px;
        height: 100px;
        padding: 5px;
        border: 1px solid blue;
        background-color: yellow;
    }

    span.b {
        display: inline-block;
        width: 100px;
        height: 100px;
        padding: 5px;
        border: 1px solid blue;
        background-color: yellow;
    }

    span.c {
        display: block;
        width: 100px;
        height: 100px;
        padding: 5px;
        border: 1px solid blue;
        background-color: yellow;
    }
html 
    <body>
        <h1>The display Property</h1>

        <h2>display: inline</h2>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
            <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida
            nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
        </div>

        <h2>display: inline-block</h2>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
            <span class="b">Aliquam</span> <span class="b">venenatis</span>
            gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
        </div>

        <h2>display: block</h2>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            consequat scelerisque elit sit amet consequat.Aliquam erat volutpat.
            <span class="c">Aliquam</span> <span class="c">venenatis</span>
            gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
        </div>
    </body>



En la página productos se utiliza la propiedad display con el valor inline-block para poder ajustar su contenido en productos.css.

Se utiliza una imagen como fondo con la propiedad css background background: url(./imagenes/bg.jpg) para la etiqueta <footer>.

  • Centrar un elemento con css.
  • Caracteres especiales, unicode wiki.

Final curso HTML5 y CSS parte 2

Parte 3 - Formularios y Tablas

  • Nueva página, contacto.html.
  • Se renombraron los estilos css: productos.css como style.css, y style.css como style_home.
  • Creación de formulario HTML, tags <form>', <input> (text y submit) para entradas de usuario. Tag <label> como etiqueta.
  • Conexión del input () con su label.
  • Uso de id para el input asociado al atributo for del label.

Jerarquía en css, ejemplo.

    - Peso gráfico:
       ___________________________
      |                           |   ___________________
      |          inline           |  |                   |   _____________
      |                           |  |         ID        |  |             |   ________
      |                           |  |                   |  |    class    |  |etiqueta|
      |           1000            |  |         100       |  |      10     |  |____1___|
      |                           |  |                   |  |_____________|
      |                           |  |___________________|
      |___________________________|

    - Peso valores:

      form p = 1+1 = 2
      p = 1
      .test = 10
      p.test = 1+10 = 11
      #test = 100
html 
    ...
    <form>
        ...
        <div>
            <p class="test" id="test">Como prefieres que te contactemos?</p>

            <label for="radio-email"><input type="radio" name="contacto"
            value="email" id="radio-email"> Email</label>

            <label for="radio-telefono"><input type="radio" name="contacto"
            value="telefono" id="radio-telefono"> Teléfono</label>

            <label for="radio-whatsap"><input type="radio" name="contacto"
            value="whatsap" id="radio-whatsap"> Whatsapp</label>
        </div>
        ...
    </form>
    ...

css 
...

form p { color: blue; }

p { color: red; }

.test { color: yellow; }

p.test { color: magenta; }

#test { color: cyan; }

/* la configuración de estilo inline sobrescribe todo */

HTML input types

w3schools input types

tipos 
    <input type="button">
    <input type="checkbox">
    <input type="color">
    <input type="date">
    <input type="datetime-local">
    <input type="email">
    <input type="file">
    <input type="hidden">
    <input type="image">
    <input type="month">
    <input type="number">
    <input type="password">
    <input type="radio">
    <input type="range">
    <input type="reset">
    <input type="search">
    <input type="submit">
    <input type="tel">
    <input type="text">
    <input type="time">
    <input type="url">
    <input type="week">

  • Etiqueta fieldset como agrupador y leyend como parrafo.
  • Descripción de imagenes alt="Descripción de imagen".
  • Clase css enviar para input submit "Enviar Formulario" contacto.
  • Propiedades: cursor (pointer), transition, transform (scale, rotate).
  • Tablas y estilo.

Final curso HTML5 y CSS parte 3

Parte 4 - Avanzando en CSS

CSS Background - developer.mozilla.org.
Juegos para practicar/aprender css.

Selectores avanzados CSS

Aplicar estilo solo los hijos directos de <main>, ejemplos.

main > p{
    background: red;
}

Aplicar estilo solo parrafo que esté despues de una imagen <img>.

img + p{
    background: yellow;
}

Aplicar estilo a todos los parrafos que estén despues de una imagen <img>.

img ~ p{
    background: green;
}

Aplicar estilo a todos los parrafos que estén despues de una imagen a excepcion de aquellos que tengan el id mision.

.principal p:not(#mision){
    background: cyan;
}

Opacidad

  • Selector de color RGB: color: rgb(0,0,0)
  • Selector de color RGB y opacidad: color: rgba(0,0,0,0.3)

Sombras

Diseño responsive

Marcar elemento para modificar según resolución de pantalla de hasta 480px @media screen and (max-width:480px){ body: red; }

Diseño responsive

Final curso HTML5 y CSS parte 4

Extra: Organizar estudio y portafolio con notion en alura.