Mi resumen del curso

TIPOS DE PÁGINAS WEB

• Existen páginas web dinámicas y estáticas.

HTML

• Posee contenedores que permite tener un mejor orden al momento de etiquetar y dar forma física a la página web.
• La página principal se acostumbra a llamar index por temas de hostting.
• El head contiene parte no visible para el usuario, que ayuda con el correcto funcionamiento y caracteristicas internas de la página web.

TIPOS DE IMÁGENES

• Una imagen se considera optima para utilizar en la web, cuando esta no supera 1MB de tamaño.

AUTOCOMPLETE

• Es una propiedad de las etiquetas de input en HTML.
• Sirve para permitir que en un formulario web, haya que llenar la menor cantidad de campos posibles una vez ya se ha realizado navegación.

SELECT & DATALIST

• Son etiquetas que permiten tener una lista de elementos que se van a desplegar y poder ser seleccionados por el usuario.

INPUT & BUTTON

• Las etiquetas de Input type = submit se utilizan para los formularios.
• Las etiquetas de Button se utilizan para botones diferentes a los de formularios donde se quieran dar estilos como iconos e imágenes al botón.

CSS

• Las etiquetas ID se utiliza el sufijo #.
• Las etiquetas Class se utiliza el sufijo punto (.).
• Las pseudoclases definen estilo en un estado especial que posea el elemento.
• Los pseudoelementos definen el estilo de una parte especifica dentro de un elemento.
• El modelo de caja es mediante el cual funcionan cada una de las etiquetas y componentes en la web, donde estos poseen las siguientes propiedades.

• Los componentes que se encuentran inmersos dentro de otro componentes (etiqueta dentro de otra etiqueta), poseen la peculiaridad que heredan algunos de los valores que su padre posea, pero son modificables.
• Todos los componentes heredan de la etiqueta “padre”

ESPECIFICIDAD DE LOS SELECTORES

• El orden mediante el cual se realiza una declaración de estilo a un componente en CSS, influye en el peso que tendrán a la hora que el navegador tome la descición de que estilo agregarle al elemento.
• La importancia se mide de izquierda a derecha, siendo la izquierda el valor con más peso y el de la derecha el de menor:

• CSS tomará los estilos más últimos que encuentre dentro del documento. Por lo que si un elemento se llama una vez arriba y abajo, si se llegase a repetir declaraciones, tomaría los valores de la última que encuentre.
• Los ID son muy específicos y únicos, por lo que se utilizan en casos muy particulares dentro de los estilos CSS.

COMBINADORES

• Los combinadores ayudan a dar especificaciones claras a la hora de realizar estilos a ciertos elementos que cumplan con condiciones particulares.

MEDIDAS

• Las medidas son fundamentales para los tipos de diseños que se realizan.
• Es una mala práctica utilizar medidas absolutas puesto que no funcionan para un diseño responsive.
• Se debe procurar siempre poner medidas relativas, para que así estas crezcan o disminuyan junto con al viewport.
• La medida viewport (vw o vh), permiten que los componentes tomen un tamaño con respecto al dispositivo donde se ve la página.
• La medida porcentaje (%) ayuda a que el elemento se acomode con respecto a su contenedor, no al tamaño de la pantalla del dispositivo por el cual se está viendo la página web.

POSITION

• La posición por defecto de todos los componentes es Static.
• Si se desea mover los componentes se utilza una posición diferente a Static.

DISPLAY: FLEX

• Permite realizar diseños de forma responsiva.
• Es necesario que el contenedor padre de los componentes posea esta declaración para que permita que los elementos hijos puedan realizar los movimientos que se desean.

VARIABLES

• Permiten almacenar algunos valores que se pueden repetir varias veces en la página web. (como: color, fuentes).
• Ayudan a la reutilización de códigos.

RESPONSIVE DESIGN

• Son patrones de maquetación, que ayudan en el responsive design.
• Existen 3 tipos de patrones, que son los más utilizados.

• Siempre que se trabaja en una página web con responsive design, se busca que sean MOBILE FIRST o MOBILE ONLY.
• Esto significa que hay que realizar el diseño primero más pequeño (como de celular) e ir escalando al más grande (Computador).

MEDIA QUIERES

• Permiten poner breakpoints y límites para que el diseño varíe teniendo en cuenta la cantidad de pixeles que posea el viewport.
• Una buena práctica es utilizar un archivo CSS por cada uno de los estilos de vistas que se vayan a realizar.
• Normalmente se escogen de 3 a 4 breakpoints en cada uno de los proyectos.

IMÁGENES RESPONSIVE

• Se busca renderizar una imagen que cumpla con el tamaño del viewport, para no consumir más recursos de los necesarios y se logre una mejor renderización de la página web.
• Las imágenes se renderizan de manera automática.