Best Design Practices

[eamzea]

Read sections from this article

https://web.dev/learn/design/

Each section read you will have to write a resume about the section.

Resumes should be descriptive and without orthography errors

[andysotocruz]

Sección 1 "Introducción"

Lo que aprendi en la introduccíon es que atravez del avance de la tecnología han cambiado las maneras de diseñar las paginas web al principio se acostumbraba a diseñar paginas web con un ancho fijo lo cual empezaba afectar en las pantallas chicas ya que al hacerce receptivo perdía la forma el diseño de pagina, se hacía un scroll horizontal para poder ver todo el contenido y obligando al usuario deslizarse hacía la derecha o hacía la izquierda. Despues optaron por hacer diseños liquidos, que ponían porcentajes en los tamaño de sus columnas, lo cual se vería bien para pantallas anchas pero al hacerlo receptibles vendría el problema ya que se estarían ensimando los elementos del diseño en pantallas chicas. Despues con el avance de la tecnología y las actuaizaciones de pantallas o monitores, tenían que hacer un diseño más adaptable, una de las opciones eran crear subdominios pero tenían que saber que tipo de dispositivo esta utilizando el usuario para poder adaptar el diseño web a una pantalla estrecha o ancha. Despues optaron por usar 3 tipos de anchos fijos, los cuales serían para escritorio, tablet y movil, tambíen lo que ayudo a estos diseños responsivos fueron los metaelementos que se agregaron en nuestros documentos de HTML quen en uno de ellos ayuda a que depende de el tamaño de la pantalla en la que se esta viendo el diseño será s ancho fijo a tomar y se adaptara la vista para la pantalla, y el segundo es la escala que tomará en un diseño receptivo.

[andysotocruz]

Preguntas de los medios En esta sección se explico como poder palicar los querys para el diferente tamaño de pantalla, también se pueden aplicar medias para poder imprimirla en una hoja de papel y esta se vea de manera correcta, también habla sobre como aplicar los querys para cual quier tipo de tamaño de pantalla, existen dos tipos de querys para las medidas: max y min, el max width se aplica hasta que el tamaño de pantalla llegue a esas pixeles o tamaño que deseamos y recibira el receptivo para aplicar los estilos que se aplicaran en ese tamaño de pantalla. El min width funciona de la siguiente manera, los estilos se aplicaran apartir del tamaño que queremos o deseamos, es decir @media (min-width: 720px) -> apartir de este punto de quiebre se aplicaran los estilos no importa hasta que tamaño de pantalla se aplique, siempre y cuando sea superior a la media query que le pusimos. También aprendi que en un tipo de texto siempre es ideal o buena practica aplicar media columnas para los textos definiendo un ancho y un fijo.

[andysotocruz]

Internacionalizacion En la seccion de internacionalizacion, hable sobre cuando una pagina web puede ser traducida a diferentes tipos de idiomas, existe un etique en la cual se definira con que lenguaje empezarael sitio y sobre la traducción que se le haga a este sitio se harán los cambios de los estilos, tambien se vio sobre los estilos de poder poner un texto, izquierda, derecha, arriba y abajo dependiendo que tipo de idioma sea ejemplo: el arabe se leé de izquerda a derecha, japones se le horizonta. y para poder aplicar la direccion del texto, ocupamos la propiedad text-align.

[andysotocruz]

Diseño de macros En esta sección, habla sobre como aplicar flex box y grid para que se puedan ajustar a las pantallas, de esta manera podemos hacer un dinamica de la pagina web en la cual a un punto de intercepcion se apliquen de manera organizada. También explica que para que no se usen antos puntos de interrupcion lo cual podría traer un poco de conflictos, aplicamos los flebox o grid para poderlos acomodar, un ejemplo sería poder acomodar de esta manera y con estos atributos cuando la pagina requiere de varias tarjetas o cajas.

[andysotocruz]

Microdiseños En esta seccion, habla sobre como utiliza el flex box para microdiseños es decir que los contenedores se van ajustar a un ancho o un alto especifico y se puedan acomodar de manera correcta, también habla sobre como podemos obtener las medidas lineares en los contenedores y como hacer uso de la inspección de los contenedores en google.

[andysotocruz]

Tipografía En esta seccion , habla sobre el tipo de tipografía que podemos utilizar para una pagna web tambien habla sobre los tamaños que podemos utilizar, siempre es bueno y se recomienda usar medidas en rem ya que esta medida se ajustara al navegador y cuando el usuario haga un cambio en el tamaño de fuente, se ajustara a la media que esta pidiendo el usuario, también habla sobre como utilizar line-height que se utiliza para dar un espacio entre las lineas del texto, también habla sobre como exportar tipos de fuentes utilizando un link para el uso de fuentes.

[andysotocruz]

Imagenes receptivas En esta seccion, habla sobre como podemos aplicar varios estilos para que las imagenes se vean bien, existen los valores como object-fit en la cual podemos que tanto de ancho va a tomar la imagen, tambien existe object-position en la cual le diremos en que posicion queremos poner la imagen, si bien indica que debemos aplicar estos estilo para tener una mejor visualización de la imagen para que al momento de ser receptivas no nos aparezca un scroll horizontal y se nos salga del contenedor.

[andysotocruz]

El elemento de la imagen En esta seccion, habla sobre los formatos de imagen hay diferentes tipos de imagen, en esta seccion habla de 3, formato avif, formato webp y formato JPEG, si bien hay maneras de poder poner una imagen en nuestro CSS, algunas de ellas son source srcset y img src, pueden poner incluso estas 2 dentro de una media si el navegador es capaz de ller formatos avif pondra ese, de lo contrario se pasara al webp y si no se pasara al formato JPEG, tambien podemos declarar el tipo de ancho y alto que va a ocpuar la imagen dentro de nuestar clases de img o source aplicandole un media, y definiendo el ancho y el alto.

[andysotocruz]

Iconos

en esta seccion habla sobre los Iconos, lo cual podemos utilizar archivos PNG y SVG que son los más faciles para poder estilizar, como cambiar su fondo que tiene y en tanto a tamaños es más accesible al mostrarse y convertirse en pixeles, habla sobre como integrar iconos a un boton y como podemos estilizarlo con un hover y un focus, también habla sobre la importancia de poder aplicarle un alt a los SVG y PNG, e integrar texto con iconos.

[andysotocruz]

Tematizacion

En esta seccion habla sobre los temas que podemos ponerle a nuestro sitio web, tal com un tema oscuro utilizando una media y utliziando tambien un metacomando dentro de nuestro HTML para poner en modo osucro nuestro tema del sitio web, también explica como podemos hacer en formularios, imagenes, SVG, e incluso como podemos aplicarlo a un mapa que se puede mostrar en un sitio web. Nos indica que es mejor utilizar un metaelemento y agregarlo desde nuestro HTML para no saturar o llenar de varias líneas en CSS con los mismas clases y estilizaciones.

[andysotocruz]

Accesibilidad

En esta sección habla sobre la accesibilidad para los usuarios cuando navegan en la pagina web, uno de los puntos importantes que toca, es el juego de colores para las personas que tienen problemas con daltonismo lo cual indica que en los navegores hay opciones en las cuales los ususarios puden cambiar, los colores o el contraste de los mismos para ser un poco más dinamico para ellos, también habla sobre como usar las etiquetas de h1, h2, h3, para que el tamaño de fuente siempre sea del mismo tamaño en cual quier dispositivo, tambien indica como poder usar etiquetas nombradas en el HTML, ejemplo: header navbar main aside footer.

de esta manera sera mejor identificado las etiquetas cuando los usuarios no usan mouse y usan teclado para poder moverse entre los contenedores, también habla sobre que los usuarios pueden cambiar el tipo de movimiento de un hover o un focues accediendo a los ajustes del navegador, ya que para algunos usuarios tener movimiento en las paginas web les cause nauseas y no es grato para ellos.

[andysotocruz]

Interacción

en esta sección hablo sobre la interaación con los botones, en como aplicar hover y focus cuando un usuario esta usando un mouse o un trackpad, y cuando esta en una pantalla movil y usa los dedos como cursor, habla de como podemos poner los estilos para cada uno de estos casos, cuando en un boton esta un icono invisible y al hacer hover se hace visible.

[andysotocruz]

Patrones de interfaz de usuario

En esta sección habla sobre los navegadores de la pagina, si bien nos indica que cuando hay muchos enlaces en nuestro navbar una manera de poder hacer es un desplazamiento de las mismas para no ocultar la navegación y poner un boton con un icono de menu en el cual el usuario no sabra donde tiene que moverse para poder ver más enlaces, también sugiere que el menu sea nombrado con la misma alabra "menu" para que el usuario sepa que puede desplasarce en varias navegaciones, también indica de como podemos usar los carruseles, habla de que con la ayuda de JavaScript podemos hacer un carrusel de repdroducción automatica aun que aveces este no es el mejor caso, ya que cuando tenemos secciones con texto, el echo de poner un carrusel con producción automatica será molesto para el usuario, por que lo que se recomienda dejar un carrusel en el cual el usuario pueda desplasarse y tomarse el timpo necesario para poder visualizar el contenido.

[andysotocruz]

Funciones de multimedia En esta seccion habla sobre las funciones de multimedia, en como podemos poner cuando un sitio no puede actualizarse, cuando se actualice de manera lenta y se actulice de manera rápida, también se habla sobre los colores que podemos usar para los sitios web y como aplicar el modo ocuro cuando un usuario tiene activida la modalidad de sitio oscuro, tambien habla sobre los colores de como podemos manejarlos, en una parte habla sobre como poner colores en color neon.

[andysotocruz]

Configuración de pantalla

En esta sección hable sobre las configuraciones de pantalla, esta sección se refiere a los telefono plegables que hoy en día la tecnología ha traído con dispositivos mobiles, nos muestra como podemos hacer que un sitio web se vea de manera correcta y acomodada en un dispositivo mobil plegable, ya que en la mayoría de estos telefonos tiene una viñeta en medio del telefono lo cual será un problema visual para el sitio web.

[andysotocruz]

Conclusion y próximospasos

En esta seccion soamente dan felicitaciones por llegar hasta le final de este pequeño curso sobre el desarrollo responsivo y ponen otros cursos adicionales en base a CSS.