Configurar la Ventana Virtual (Viewport en ingles)
Una ventana virtual es similar a una ventana real pero en su función, es decir, nos permite ver pero limita nuestra visión. No es el mismo concepto que describe por ejemplo, a la ventana del navegador, la del procesador de texto, o del reproductor de medios.
HTML5 introdujo un método, a través de la etiqueta <meta>, que permite a los diseñadores web tomar el control de la ventana virtual (viewport).
La ventana virtual es el área (de una página web) visible al usuario. Esta varia de dispositivo a dispositivo, siendo más pequeña en la pantalla de un teléfono móvil que en la de una computador.
Varía también la configuración que cada navegador utiliza de modo predeterminado para establecer la ventana virtual. Por esta razón, deberías incluir en todas tus páginas web, el elemento <meta> que a continuación se te presenta. Ya que proporciona buenos ajustes para la ventana virtual (viewport):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Un elemento <meta> destinado a la ventana virtual (viewport), le da al navegador instrucciones sobre cómo manejar las dimensiones y la escalada, escalamiento, o ajuste de la pagina.
Expliquemos esa linea de código:
La parte “width=device-width” establece el ancho (width) de la pagina para que iguale el ancho de la pantalla del dispositivo (device-width) (que variara según el dispositivo).
La parte “initial-scale=1.0” establece el nivel inicial de aumento/alejamiento o zoom de la pagina para cuando esta se cargue. En esta ocasión, el nivel inicial es 1.0 o 100%, lo que significa “ninguno”.
También debo mencionar que hay ciertas diferencias entre las especificaciones físicas y lógicas de la pantalla de un dispositivo.
Luego trataremos el resto de este subtema, importante para la versión móvil de tu sitio web. Por ahora basta con esta breve introducción.
Puedo omitir <html>, <head> y <body>?
De acuerdo al estándar HTML5; la etiqueta <html>, la etiqueta <body> y la etiqueta <head> se pueden omitir.
El siguiente código sería validado como HTML5:
<!DOCTYPE html> <title>Titulo de Pagina</title> <h1>Este es un encabezado</h1> <p>Este es un párrafo.</p>
Observación: no se recomienda omitir las etiquetas <html> y <body>, ya que puede hacer funcionar mal al software DOM o XML y producir errores en navegadores antiguos (IE9).
Sin embargo, el omitir la etiqueta <head> ha sido algo común desde hace ya algún tiempo.
Resumen de lo aprendido:
| Etiqueta | Descripción |
|---|---|
| <head> | Contendrá los metadatos del documento |
| <title> | Define el titulo de un documento |
| <base> | Define una dirección por defecto o un receptor por defecto para todos los enlaces de una pagina |
| <link> | Define una relación entre un documento y un recurso externo |
| <meta> | Proporciona otros metadatos de un documento HTML |
| <script> | Define un guion a ejecutar en el lado del usuario |
| <style> | Define información de estilo para un documento |
