FEBRERO 26/2019
POSICIONAMIENTO Y VISUALIZACIÓN:
Un navegador web o browser, a través de su agente de usuario, lleva a cabo la lectura del código HTML de una dirección web o url solicitada; la lectura de dicha página es secuencial (de arriba a abajo) y la disposición de los componentes en pantalla dependerá del tipo de elemento que se trate:
- elementos en línea (span, img, a y otros): ocupan solo el espacio necesario para mostrar el contenido interno de los mismos,
- elementos de bloque (p, div, h1, h2, fieldset y otros): siempre empiezan en una nueva línea y ocupan todo el espacio disponible en pantalla, o dentro de su contenedor, hasta el final de la línea, aunque sus contenidos no tengan tanto tamaño.
Todos se disponen de izquierda a derecha en pantalla, ocupan un espacio rectangular y, por defecto, en función del contenido de los mismos y solo se dispondrá un elemento en una nueva línea cuando sea un elemento de bloque.
Tan importante es conocer esto como saber que los estilos y, como consecuencia, las posiciones de los componentes en pantalla se pueden modificar aplicando hojas de estilos CSS.
Tanto HTML como CSS tienen una serie de versiones, la de CSS depende de la versión de HTML con la que estemos trabajando y depende del navegador soportará hasta una versión de HTML y CSS concretas.
Además, los navegadores aplican una versión de HTML por defecto cuando, dentro del contenido del documento, no se hace una mención explícita a la misma. Por eso, es de suma importancia que especifiquemos cuál es la versión de HTML y, como consecuencia de CSS, con la que estamos trabajando. Para ello en la cabecera de todos nuestros documentos HTML debemos incorporar la directiva <!DOCTYPE, por ejemplo:
Para XHTML 1.0 transsitional:
Para HTML 5:
La ausencia de DOCTYPE es la principal raíz de los problemas de disparidad de visualización entre navegadores.
A continuación un ejemplo de mezcla de elementos de línea y de bloque:
Se visualizará como sigue:
4. style=”display”.
El atributo más básico a nivel de estilos es display y en función del tipo de elemento tiene un valor por defecto:
- inline: en línea, por defecto para los elementos en línea,
- block: de bloque, por defecto para los elementos de bloque,
- none: para ocultar la visualización de un componente sin ocupar espacio en pantalla.
Hay más posibles valores, podéis consultar una referencia rápida aquí.
Si, por ejemplo, en el html anterior incluimos un selector css del siguiente modo:
Modificaremos la disposición en pantalla del párrafo y, con ello, de todos los componentes posteriores a él.
5. style=”float”.
El segundo modificador del que vamos a hablar es float que permite flotar un componente a derecha o izquierda, rompiendo con esa disposición secuencial de los elementos dentro del HTML. Es importante conocer que, si flotamos un elemento, los posteriores se verán afectados puesto que se comportará como un elemento en línea:
Tendremos la siguiente disposición en pantalla:
Para romper la aplicación del modificador float a los siguientes elementos podemos usar el modificador clear:both. En el siguiente ejemplo vemos como flotar a izquierda y derecha y romper el float en la siguiente capa.
Con ello la disposición en pantalla cambia como sigue:
6. style=”position”.
El último modificador es el de la posición que puede adoptar los siguiente valores:
- static: la de por defecto para todos,
- absolute: se posiciona respecto al último elemento en la jerarquía no marcado como estático; si no existe en la jerarquía de padres o contenedores un elemento marcado como no estático se posiciona como fixed, esto es, respecto a la ventana,
- fixed: su posición será relativa respecto a la posición de la ventana,
- relative: su posición será relativa respecto a su posición normal.
Imaginemos que tenemos un gráfico que describe el flujo de trabajo en fases dentro de una cadena de negocio, un workflow y queremos visualizar, de forma dinámica, el número de actividades abiertas dentro de cada fase en una página web, con HTML. Empezaremos por tener, por ejemplo, una imagen con el gráfico sin descripciones.
La descripción de cada puesto de trabajo la queremos internacionalizada y mostrará el número de actividades abiertas en el mismo, a modo de cuadro de mando.
Lo primero es crearnos un elemento complejo para cada puesto:
El objetivo es, teniendo la imagen de fondo del flujo, posicionar las capas sobre su correpondiente tarea.
Si usamos posiciones absolutas el problema será que, en función del contenido y tamaño de los componentes que posicionemos encima del gráfico, pueden variar la suya puesto que se posicionan respecto a la ventana.
La solución es establecer la imagen como fondo de una capa dispuesta de forma relativa en la página (rompiendo el position=static) y, dentro de la misma, posicionar todas las capas correspondientes a las tareas de forma absoluta. Las posiciones de las capas serán absolutas a la capa de la imagen, con lo que no cambiará su posición debido a redimensionamientos.
Los estilos podrían ser los siguientes:
Comentarios
Publicar un comentario