Code n' Social

¿De qué trata esta lección?
En esta lección, probaremos algunas soluciones para adaptar el contenido de nuestras páginas web al tamaño de las ventanas / pantallas del navegador, no se debe obligar al usuario a utilizar el desplazamiento horizontal. Esto significa adaptatividad en una página web. Usaremos el tamaño relativo, definiendo diferentes tamaños, objetos para diferentes tamaños de pantalla, etc.

Usaremos por primera vez la etiquetapara agregar información sobre nuestra página web

Nueva norma:
@media – Usando esta regla podemos adaptar el tamaño de nuestra página web a la pantalla que se mostrará. Tomamos en consideración la resolución, altura, anchura y orientación de la pantalla.

Nuevas etiquetas HTML:
- esta etiqueta se utiliza para agregar información útil sobre la página a la secciónde la página. Esta información no aparece en el navegador, es utilizada por el navegador y los motores de búsqueda.

: esta etiqueta se utiliza para definir imágenes alternativas para diferentes tamaños de pantalla.

Nuevas propiedades CSS:

min-width

– Con esta propiedad podemos agregar a cualquier elemento de tamaño considerable un valor de ancho mínimo. Eso significa que el elemento no puede ser más pequeño, independientemente del tamaño del dispositivo o la ventana del navegador en el que se muestra el contenido.

max-width:

con esta propiedad podemos agregar un límite superior al tamaño de un elemento. El ancho de los elementos no puede ser mayor.

Ejemplo de información:

- el conjunto de caracteres utilizado en una página web se puede definir en el editor, en el servidor web y también se puede indicar en el código HTML. El navegador debe conocer el conjunto de caracteres utilizado para mostrar el contenido correctamente.

- Estos pueden ser utilizados por los motores de búsqueda para clasificar tu página web. Hoy en día este no es el único punto de vista utilizado para definir tu página.

- esta configuración es utilizada por los desarrolladores web para garantizar que su contenido aparezca correctamente en todos los dispositivos. Se necesita sobre todo en dispositivos móviles.

Significa que los tamaños de los contenidos (expresados en porcentaje) se calculan en comparación con el tamaño del dispositivo y, al principio, aparecen sin zoom.

¿Qué hace a las páginas web adaptativas?

Definir tamaño en porcentaje, usando max-width y min-width – el elemento cambia de tamaño en relación con el elemento principal (un segmento, tabla o cuadrícula
) y, finalmente, a la ventana del navegador. Podemos definir un ancho mínimo o máximo, para que no sea más grande y más pequeño que un tamaño dado. Hay otros tamaños relativos, como em - relativos al tamaño de fuente base.
Configurar la ventana gráfica – mencionado anteriormente – no funciona si define tamaños en píxeles (en lugar de tamaño relativo).
Definir diferentes imágenes para diferentes tamaños – usamos la etiqueta para definir estas imágenes.
Configurar la imagen de fondo - podemos utilizar la configuración background-size: cover; para estirar la imagen para rellenar el elemento contenedor, podemos usar background-size: 100% 100% para obtener el mismo efecto. Puede ser útil si el tamaño de los contenedores está cambiando.
Definir el tamaño del texto relativamente – podemos definir el tamaño de fuente no solo en píxeles, podemos usar vw como unidad de medida. Esto significa cambiar el tamaño en relación con el punto de vista (display/browser window size).
Elegir la mejor forma de posicionar los elementos – both (ambos) o float (flotante), display: inline-block da como resultado un posicionamiento maleable: los elementos entran en una nueva fila si no encajan en la fila actual.
Usar marcos – Los desarrolladores web competentes utilizan marcos para facilitar su trabajo. Los marcos significan el uso de archivos CSS que contienen clases de CSS compatibles con el estándar. Los marcos pueden usar funciones de JavaScript aplicadas a los elementos de diseño. Puedes leer más sobre Bootstrap, W3.CSS

Ejemplo de etiqueta :

En el ejemplo anterior, el navegador elige entre dos imágenes: si el ancho de las ventanas del navegador es mayor de 850 píxeles, aparecerá la imagen con el libro, o la imagen más pequeña con el inicio. Podemos usar las mismas imágenes en diferentes tamaños de versiones.

Ejemplo de regla @media– media query (consulta de medios):

Hay cuatro botones con las medidas expresadas en relación con el tamaño de fuente.

Hay diferentes configuraciones para las ventanas del navegador con un ancho inferior a 600 píxeles, y más.

En una ventana pequeña, los botones están dispuestos verticalmente, en una ventana más grande horizontalmente. Con esta regla, solo hay dos estados, si tuviéramos que usar flotante, por ejemplo, los botones se obtendrían en una columna uno a uno para atravesar diferentes estados.

Guía para un sitio web adaptativo:

para que un sitio web sea totalmente adaptativo, el elemento clave es usar anchos expresados en porcentaje o unidades de ventana gráfica o anchos máximos. Para más información, busque el concepto de sitio web adaptativo.

Ejercicios

1. Agrega la información necesaria sobre nuestro sitio a las páginas HTML - meta tags (etiquetas meta):
Establece el conjunto de caracteres en UTF-8.
Agrega palabras clave: programming, teaching, courses, lessons, HTML, CSS, Coders Work
Añadir descripción: sitio web personal, enseñando sobre codificación en HTML, CSS y JavaScript
Agrega la configuración de la ventana gráfica también.

Ver el resultado

2. Antes de hacer cualquier estilo para la capacidad de respuesta de nuestro sitio, debemos restablecer el estilo de algunas de nuestras etiquetas html más utilizadas, que pueden tener diferentes estilos aplicados de forma predeterminada (márgenes, rellenos, etc.), que pueden diferir de un navegador a otro. Este procedimiento se llama restablecimiento de CSS. Puedes buscarlo para obtener más información al respecto.
En el inicio del archivo style.css, insert los siguientes restablecimientos:
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img {
                  margin: 0;
                  padding: 0;
                  border: 0;
                  font-size: 100%;
                  font: inherit;
                  vertical-align: baseline;
}

Ver el resultado

3. Aplica cambios en style.css para que nuestras páginas respondan:
Cambia el ancho en ancho máximo para los siguientes elementos: #header, #menu, #content, #footer.
Ahora, si cambia el tamaño de la ventana del navegador, notarás que no habrá desplazamiento horizontal durante un buen rato.

Además, para no tener el contenido de lado a lado, coloca el relleno 20 a la izquierda y la derecha al cuerpo.

Ver el resultado

4. aplica cambios a gallery.html y style2.css:
Escribe una consulta de medios, donde a 700 píxeles de ancho de pantalla, las imágenes pequeñas aparecen 2 en una fila, en lugar de 3.

Ver el resultado

5. aplica los cambios a style.css para corregir la capacidad de respuesta del menú principal. Escribe una consulta de medios, que cuando el navegador alcance el ancho de 900 píxeles, su relleno cambiará a 10 píxeles en todas las direcciones.

Ver el resultado