CURSO DE HTML Y CSS

DEFINITIVO
Fron-tend: Desarrollado que maenja en el lado del cliente (navegadores)

Los estándares que debe dominar un front-end: html, css, js

Fremworks:

Fremworks y librerías de JS:

Procesadores de CSS: les, stylus, sass

Compiladores de JS: babel, webpack

Back-end: Trabaja del lado del servidor

Tecnolgias que maneja: lenguajes de programación node, Python, Ruby,… y sus frameworks:
django, express, spring, rails

Infraestructura: Google cloud, digitalocean, heroku, aws

Bases de datos: mongoDB, MySQL,…

Full Stack: manejar tanto front-end como back-end, es decir todas las tecnologías para
desarrollar una página web de principio a fin.

Páginas estáticas y páginas dinámicas

Paginas estáticas que no van a cambiar. Por ejemplo, blogs, el contenido se mantiene son
páginas de información.

Páginas dinámicas (Web Apps), son aplicaciones conectadas a base de datos, hay contenido
que va cambiando e interacciones con los usuarios. Por ejemplo, Twitter, Facebook, Platzi.

HTML

Hyper text markup language

Anatomía de una página web:

Contenedor principal Header: tiene

al logo y la barra de navegación.
 Side: contenedor lateral. Por
ejemplo, en el Facebook tenemos
los posts.
 Main content: contenido
principal.
 Footer: se encuentra en la parte
inferior.
Index y estructura básica de html

Index: página inicial que va a buscar el servidor

Head: todo lo que es importante para el navegador y que no es visual para el usuario.

Body: todo lo que ve el usuario.

En el head tenemos la etiqueta meta con atributo charset=”UTF-8” se puede usar caracteres
del español y loe emojis. Meta descripción que sale en el navegador. Viewport.

Maquetación-leyaout
Etiquetas y tipos de imágenes

Lossy: Pierde la calidad y mejora el tiempo de carga. Son más pequeñas: JPJ/JPEG para
fotografías.

Lossless: No hay perdida de colores, por ejemplo, png 8 y png 24. SVG-Vector, es un formato
muy ligero, en el SVG no se pixelea.

Optimización de imágenes

En promedio una imagen debe ser a lo más de 100 a 70 Kb. Tiny PNG: mejora el tamaño de tus
imágenes. Verefix: retira metadatos de tus imágenes.

Etiqueta img y fig

OBSERVACIÓN: El atributo alt nos da una descripción de la figura y la accesibilidad de la
imagen.

Etiqueta contenedora de una imagen es la etiqueta fig y para dar una descripción de la imagen
usamos el figcaption

Etiqueta Video:

La etiqueta <video>, tiene algunos atributos como:

- Controls: agrega al video los controles necesarios para reproducir, pausar y adelantar.
- Prelod=auto: hace que el navegador descargue el video, en el momento en el que se
acceda a la página

Cuando queremos usar videos en formatos diferentes

Formularios

<form action=””>

<label for=””>

</label)>

<input type=”text”

</form>

Etiqueta de calendario
Otra forma para que se tenga lo de arriba con una sola etiqueta

El atributo submit incorpora un botón enviar.

Autocomplete y require

Observación: la etequita require permite que el navegador recuerde al usuario que falte
rellanar algún item del formulario.

SELECT
Input type submit vs. Button tag