Definir con CSS el aspecto de la web de gráficos de sensores en la IoT

Definir con CSS el aspecto de la web de gráficos de sensores en la IoT

Definir con CSS el aspecto de la web de gráficos de sensores en la IoT

En el anterior artículo de la serie sobre cómo realizar gráficas de estado de sensores conectados a Internet de las cosas IoT se explica la forma de utilizar una página web desarrollada en HTML como estructura para los gráficos. Los elementos de la página web, que se habían reducido al mínimo usando objetos <div>, no definían directamente su apariencia, en su lugar, referían la información sobre el aspecto a una hoja de estilos CSS, que es lo que se va a explicar en esta parte de la serie.

Tabla de contenidos

    Gráficos de datos de los sensores conectados a la Internet de las cosas (IoT) contenedor en HTMLGráficos de datos de los sensores conectados a la Internet de las cosas (IoT) definición del aspecto en CSSGráficos de datos de los sensores conectados a la Internet de las cosas (IoT) dibujo con SVGGráficos de datos de los sensores conectados a la Internet de las cosas (IoT) Generación y modificación con JavaScript

    En la solución que propongo para hacer gráficos de sensores conectados a la IoT, se utiliza un documento CSS que se carga desde el documento HTML. Si el código HTML se generara desde una aplicación en el servidor, por ejemplo en PHP, sería muy sencillo incluirlo como parte del código que define la página web en lugar de cargarlo desde ella, con lo que se podría optimizar un poco al ahorrar una llamada. Sea cual sea la opción elegida, el método más conveniente incluye editar el código CSS en un documento separado para gestionarlo más cómodamente y para poder reutilizarlo. En el ejemplo que desarrolla el tutorial de esta serie de artículos se le ha dado el nombre estilo.css.

    En el mismo sentido, cuando se trate de proyectos complejos convendrá utilizar varias hojas de estilo separadas en diferentes documentos, tanto para poder reutilizar funcionalidades específicas sin tener que cargar cada vez todas, como para editar más fácilmente el código al repartirlo en diferentes documentos conforme a la correspondiente estructura lógica.

    Los estilos CSS tratan de describir todos los extremos del comportamiento y del aspecto de una página web desde varios tipos de enfoques, todos simultáneamente válidos, a la vez que intentan respetar lo más posible la compatibilidad con las especificaciones de versiones anteriores. Esto hace que existan muchas posibles soluciones que resuelvan las mismas necesidades así como un elevado número de recursos disponibles (propiedades CSS). Por el enfoque didáctico del artículo y para no confundir a los usuarios noveles en CSS, sólo se explican las propiedades y las estructuras necesarias para el objetivo final, que es representar gráficamente los datos de sensores conectados a la Internet de las cosas. Al mismo tiempo, también se hace una pequeña introducción al CSS, las hojas de estilo en cascada.

    Formato de las propiedades CSS

    El formato básico consiste en un nombre de propiedad, el signo de dos puntos, el valor de la propiedad y el signo de punto y coma. nombre:valor;

    CSS permite utilizar en el mismo documento diferentes unidades de medida incluyendo las relativas a la estructura (la medida de lo que contiene a un elemento) como porcentajes, relativas al dispositivo en el que se representan, como el píxel, o absolutas como centímetros. Las unidades se expresan a continuación del valor según la siguiente codificación de abreviaturas.

    Código Unidad
    % porcentaje del contenedor
    ch relativo al ancho del número cero
    cm centímetros
    em relativo al tipo base del contenedor
    ex relativo a la altura de la letra x
    in pulgadas
    mm milímetros
    pc picas (medida tipográfica)
    pt puntos (tipográficos)
    px píxeles
    rem relativo al tipo base del documento
    vh relativo al 1% de la altura de la vista (pantalla de móvil)
    vmax relativo al 1% de la dimensión mayor de la vista (pantalla de móvil)
    vmin relativo al 1% de la dimensión menor de la vista (pantalla de móvil)
    vw relativo al 1% del ancho de la vista (pantalla de móvil)

    Para la aplicación que vamos a hacer, al menos es importante considerar tres unidades de los estilos. El % para tomar medidas relativas al tamaño del contenedor de un elemento, el píxel para las medidas conforme a la resolución de la pantalla y los milímetros (en realidad, cualquier medida absoluta) para poder confeccionar informes impresos.

    Existen algunas propiedades complejas, o compuestas, que dependen de varios valores (como color, medida, estilo…), para indicar el valor existen dos posibilidades en CSS: escribir, en el orden adecuado, todos los valores separados por espacios o usar la suma de propiedades simples equivalente a la compleja. Por ejemplo, los cuatro márgenes de un objeto puede especificarse en una única propiedad margin o pueden establecerse con las propiedades margin-top, margin-right, margin-bottom y margin-left. Por cierto, ese orden (el de las agujas del reloj) es el que siguen las descripciones de valores que «rodean» un elemento como el margen interior (relleno) o exterior, el borde…

    Con lo explicado hasta ahora ya podemos ver algunos ejemplos de propiedades

    En el ejemplo anterior se define el color utilizando un código de 6 dígitos hexadecimales que representan, de dos en dos, el valor del componente rojo, del verde y del azul. Cuando ocurre como en el ejemplo que los dos dígitos son iguales puede abreviarse como #F09 (que, por cierto, corresponde con los llamados «colores seguros para la web» o «web safe colors»). En la propuesta final evitaré usar estas abreviaturas para unificar el criterio y hacerla más legible. También se pueden abreviar los valores de las propiedades complejas, como margin en el ejemplo, cuando se repiten todos los valores o los pares opuestos. En la misma línea de ahorrar texto, también es posible omitir la unidad al especificar una propiedad cuando el valor es cero, ya que es irrelevante en tal caso.

    Algunos valores, además de poder expresarse numéricamente, tienen un nombre que hace más legible el código y permite recordarlos mejor. Por ejemplo, en lugar del código numérico hexadecimal del blanco, #FFFFFF (o #FFF), puede escribirse white con el mismo resultado. De esa forma, el color negro, #000000 (o #000), se puede sustituir por black.

    También hay valores se expresan por un código especial, un nombre. Por ejemplo, para indicar que el margen lateral lo establece el navegador automáticamente (normalmente corresponderá con la función de centrar) se usa el valor especial auto, que no tiene correspondencia numérica con ningún valor.

    Para expresar un modo especial de uso de una serie de valores compuestos (complejos) de una propiedad CSS se pueden elegir los formatos con una sintaxis parecida a la de las funciones. Por ejemplo, para expresar un color como los tres valores de su componente roja, verde y azul (el modelo RGB) se escribiría color: rgb(128, 255, 64);. Dentro de este estilo de expresión es posible también utilizar unidades; en el ejemplo anterior, las componentes de color son un valor decimal de 0 a 255, pero puede resultar más fácil expresarlo como un porcentaje del total de cada componente de color, en tal caso podría escribirse también como color: rgb(50%, 100%, 25%);.

    Cálculo de valores en CSS

    En las versiones más recientes de CSS es posible realizar operaciones matemáticas sencillas para calcular valores. Para hacerlo se utiliza calc y se expresa entre paréntesis la operación que se desea realizar. Se pueden indicar unidades, paréntesis y operadores simples como suma (+), resta (-), multiplicación (*) y división (/). La expresión sería del tipo width:calc((90%-20px)/2));.

    Se pueden utilizar variables en las operaciones matemáticas en CSS haciendo referencia en el cálculo de una propiedad al valor de otra con var. Para poder usar una variable sin necesidad referirse a una propiedad real del estilo, también está permitido citar una propiedad que no exista. CSS recomienda el formato --nombre-variable (dos guiones delante del nombre de la propiedad inventada). De esta forma, para definir la altura de un elemento como la mitad de su ancho se usaría una expresión en CSS como height:calc(var(width)/2); y para definir una nueva variable «grosor» (que otras propiedades podrían usar) se escribiría, por ejemplo, --grosor:4px; para poder hacer luego referencia a ella como margin-top:calc(var(--grosor)*4);

    Propiedades CSS que dependen del navegador

    CSS es una especificación estandarizada por el consorcio W3C (World Wide Web Consortium) pero muchas propiedades o estilos de comportamiento llegan a los navegadores antes de ser parte de la especificación de una versión.

    Para que el código CSS funcione con las prestaciones actuales de un navegador, pero no pierda compatibilidad con las nuevas características, se utiliza un prefijo. Este prefijo depende del motor de renderizado que utilice el navegador web al que se quiera hacer referencia (para el que se defina el estilo).

    El prefijo -webkit sirve para los navegadores basados en WebKit como Safari o Chrome. El prefijo -moz se utiliza para los navegadores basados en el motor de renderizado de Mozilla, actualmente Gecko, como Firefox y sus derivadas. Para hacer referencia a EdgeHTML, el motor de renderizado del navegador Edge de Microsoft (antes Trident), se utiliza el prefijo -ms. El caso del navegador Opera es un poco especial ya que empezó utilizando su propio motor de renderizado, al que se hace referencia con -o, pero actualmente trabaja con WebKit, que se expresa como -webkit.

    Para usar una propiedad haciendo referencia a un navegador se escribe su nombre anteponiendo el prefijo y separándolo por un guión como en -o-border-radius:10px;, que serviría para establecer un borde redondeado (una esquina redondeada) en las versiones antiguas del navegador Opera.

    Comentarios

    Para aclarar el código CSS se pueden usar comentarios, que lo harán más legible aunque con el inconveniente de aumentar su tamaño. La sintaxis de los comentarios en CSS es como la de los comentarios multilínea de C++ que seguro que ya conoces: empezando en /* y terminando en */, como en C++, pueden ocupar varias líneas.

    Selectores

    La definición de las propiedades se asigna a los objetos de un documento HTML agrupándolas en selectores y encerrándolas entre llaves. Un selector puede hacer referencia a un elemento del lenguaje HTML (una etiqueta), como div, una clase (asignada con class en HTML) un identificador (asignado con id en HTML) o todo (el «selector universal») representado por el asterisco (*). En el siguiente ejemplo se muestra un selector de cada tipo:

    Las etiquetas de HTML se expresan en la definición del estilo con su nombre, las clase se marcan anteponiendo un punto al nombre (.) y un signo de almohadilla (#) para los identificadores.

    Parte de la gran potencia de CSS reside en la posibilidad de agrupar selectores al definir sus propiedades. Existen varias formas de agrupar los selectores. Al agruparlos, separándolos por comas, se expresa que cada uno de los selectores citados tiene esas propiedades.

    En el ejemplo anterior se indica que las clases consumo, humedad y temperatura comparten color, ancho y alto. En este código se introduce también un nuevo concepto: se pueden redefinir propiedades, y en tal caso prevalecen las más recientemente descritas. De esta forma, los elementos de la clase temperatura tendrían finalmente de altura el 50% del objeto que lo contiene.

    Si los selectores agrupados no se separan por comas la condición que se impone a las propiedades es acumulativa, es decir, un elemento debe cumplir con todos los selectores para que adquiera el aspecto o el comportamiento que definen. Si los selectores hacen referencia a etiquetas HTML el orden en el aparecen debe ser descendente en el nivel de inclusión: primero el nivel jerárquico superior y último el inferior.

    En el ejemplo anterior se definen los elementos div que además sean de la clase temperatura y los elementos que tengan tanto la clase temperatura como la clase consumo (ambas a la vez) como en class="temperatura consumo". Los elementos <div> del código HTML con class="temperatura" tendrían un alto del 100%

    Propiedades CSS para definir el texto

    Se puede hacer una distinción entre tres tipos de propiedades que afectan al aspecto del texto: (1) las que establecen la tipografía con la que se presenta, (2) las que determinan la apariencia del literal (el contenido del texto) y (3) las genéricas, es decir, las que afectan tanto a la apariencia del texto como la de otros componentes. En general, lo dicho para explicar las del último grupo será de aplicación también para las mismas propiedades aplicadas a otros elementos.

    Tipografía (tipo de letra)

    • font-family indica el nombre del tipo de letra que se utiliza para un elemento. Se puede escribir un único nombre o una lista, en orden de preferencia y separando por comas los nombres, de las tipografías que se utilizarán alternativamente si no existe la deseada. En esa misma línea, es posible usar tipografías genéricas con los nombres monospace, serif, sans-serif, cursive, fantasy. De estas tipografías genéricas, la más importante (para la presentación de datos que nos ocupa) es la primera que, como su nombre sugiere, usará la tipografía de espaciado fijo disponible en el sistema y prefijada por el navegador. La segunda, serif, utilizará la prefijada que disponga de serif (remate o gracia). Sin remate si se indica la tercera, sans-serif. Imitando escritura dibujada a mano con cursive (una forma de llamarla manifiestamente mejorable) y la tipografía decorativa del sistema con fantasy, la última de las cinco.

      Como para el código CSS los espacios tienen un significado especial como separador, cuando el nombre de la familia tipográfica esté compuesto por varias palabras separadas por espacios, se escribe entre comillas para evitar confusiones.

      Los navegadores web son capaces de utilizar las tipografías locales (las instaladas en el sistema sobre el que funcionan) así como otras que se carguen específicamente, incluso superponiéndose a las instaladas localmente. Para cargar una tipografía se utiliza @font-face indicando su nombre, la ubicación de la descarga de su definición y, si procede, una descripción de su formato.

      En la primera de las dos definiciones del ejemplo anterior se carga la letra del documento Sircuito-Expanded-Light.eot que se encuentra en la carpeta EOT dentro de la carpeta principal (raíz) y se le asigna como nombre de familia SircuitoExpandedLight. Por cierto ¿Te gusta esta tipografía? Es libre, puedes descargar gratis el tipo de letra Sircuito que diseñé para la imagen de GranaBot.

      Como puede verse en el ejemplo, la propiedad url, que corresponde con el localizador de recursos uniforme, permite especificar la ubicación del documento con la tipografía que se descarga. La barra inclinada sirve para separar el nombre de las diferentes carpetas de la ruta hasta el tipo de letra, empezando por la que contiene el documento desde el que se hace la llamada o por la raíz si el URL empieza con una barra.

      El segundo ejemplo utiliza varios documentos alternativos para que la misma definición sirva para varios navegadores (cada uno de los cuales cargará el tipo que es capaz de interpretar)

      En la última línea de la definición se incluye la propiedad font-smoothing para suavizar la letra (aplicarle un efecto de antialiasing). Como no es una propiedad estándar se utiliza el prefijo -webkit.

    • font-size sirve para indicar el tamaño de la letra como en font-size:12px;

    • font-weight establece el grosor de la letra. Se puede expresar como un valor numérico, normalmente un múltiplo de 100 comprendido entre 100 y 900, conforme a los pesos tipográficos habituales, o más frecuentemente con un nombre: normal para el grosor base, bold para la negrita, bolder para la versión habitualmente denominada black, light para la fina (llamada comúnmente light) y lighter para la más delgada (a veces llamada thin).

      El valor numérico de la versión normal de la tipografía es 400 (sin unidad) y 700 el de la negrita.

      Por defecto, si no se indica otro valor, el aspecto del tipo de letra es el que corresponde a normal o 400 así que, si no se ha cambiado en el elemento genérico o en el contenedor, del que la hereda, no es necesario indicar font-weight con el valor normal.

    • font-stretch sirve para indicar el ancho de la letra, siempre que esté disponible en la familia correspondiente. Los posibles valores que puede tomar la propiedad, ordenados de más estrecha a más ancha, son: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Con el mismo criterio que se usaba en la anterior propiedad, el ancho por defecto es normal y no es necesario indicarlo expresamente salvo que se haya cambiado en un orden jerárquico superior al que se está definiendo.

    • Con font-style se puede indicar si un texto se traza con una letra inclinada u oblicua, lo que afecta a su aspecto, o con una letra cursiva, que expresa un significado especial (palabras extranjeras, por ejemplo), o letra redonda, es decir, ninguna de las anteriores o normal. el valor oblique cumple la primera función, la del aspecto y el valor italic el segundo. Que la apariencia de ambas sea frecuentemente similar o hasta igual, hace que a veces se confunda el uso (el sentido), por lo que merece la pena poner atención. Como en otras propiedades, normal sirve para desactivar los valores anteriores.

    • text-decoration sirve para subrayar (con el valor underline), suprarayar (con el valor overline), tachar (con el valor line-through) o hacer parpadear (con el valor blink) el texto al que afecte esta propiedad.

    • Para completar la serie del aspecto de la tipografía, aunque para nuestra aplicación no es muy relevante, font-variant, permite aplicar versalitas (mayúsculas pequeñas) a los textos.

    Texto

    • text-align indica al navegador cómo debe alinearse el bloque de texto. Las posibles alineaciones son a la izquierda (la que se considera por defecto) con el código left, centro con el valor center, derecha usando right y justificado a ambos extremos con justify.

    • line-height establece la separación entre líneas de texto. En este caso, si se utilizan porcentajes el valor del 100% corresponde con la altura del texto en lugar de la medida del contenedor. La medida relativa a la del texto más utilizada corresponde con el 120%. Un renglón del 100% significaría que la parte baja de un renglón toca con la parte alta del siguiente. Aunque el diseño de la tipografía suele incluir algún espacio, es habitual dejar algo más de margen entre líneas.

      Para expresar la separación entre líneas también es posible indicar un coeficiente (un valor sin unidad) con el que calcular la altura del renglón en función de la altura de la caja de texto.

    • letter-spacing es el valor del espacio entre las letras de las palabras, que en tipografía se conoce como interletraje o tracking.

    • word-spacing representa la medida de los espacios de separación entre las palabras.

    • white-space establece el comportamiento de los espacios en blanco de un texto. Cuando se utiliza el valor normal, que se toma por defecto, junta varios espacios en blanco del código HTML en uno solo de la presentación en la página web (mostrada por el navegador) y toma los espacios en blanco como referencia para partir una línea si no hay espacio en el bloque.

      El valor nowrap también junta los espacios en blanco repetidos en uno solo pero no parte las líneas de texto en los espacio en blanco aunque la línea no quepa en el contenedor, desbordando el espacio si hace falta y escribiendo fuera si procede. Para partir expresamente las líneas puede utilizarse el la etiqueta <br> de HTML.

      Utilizando pre ni se unifican los espacios en blanco juntándolos en uno solo, ni se parten las líneas usando los espacios como referencia.

      pre-line junta los espacios en blanco repetidos y parte las líneas si es necesario tomando los espacios en blanco como referencia.

      pre-wrap conserva los espacios en blanco repetidos y parte las líneas si es necesario tomando los espacios en blanco como referencia.

    Color

    En CSS puede expresarse el color según el modelo de color RGB o según el modelo de color HSL y en ambos casos se puede incluir información de transparencia, el valor de un cuarto canal que suele llamarse canal alfa o composición alfa, que da lugar a los modelos RGBA y HSLA.

    Para expresar el color en formato RGB usando notación hexadecimal se utiliza la sintaxis #RRGGBB, siendo RR el valor de la componente roja (en principio, usando dos dígitos hexadecimales), GG el de la componente verde y BB el de la componente azul. Como ya se dijo, si los dos dígitos de cada componente tienen el mismo valor se puede expresar como #RGB limitando la cantidad de colores disponibles a los denominados web safe (seguros para la web)

    Además de esta forma de representar el color, la más clásica y usada, se puede expresar como rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) para indicarlo en el formato RGB, HSL y sus respectivas formas con indicación de transparencia (canal alfa)

    Salvo que se solicite lo contrario añadiendo el sufijo de la unidad, el modelo RGB utiliza valores decimales de 0 a 255, para las tres componentes, el valor de la componente alfa es un coeficiente (decimal de cero a uno) y el primer valor del modelo de color HSL, el tono (hue), es un valor decimal que va de 0 a 360 (sin unidades) representando un ángulo. Los valores de la saturación y la luminosidad del modelo HSL se suelen expresar como porcentajes.

    Como ya se ha dicho, aunque no es muy frecuente su uso, se pueden indicar colores por su nombre en el formato color:black; en lugar de color:#000000;. El primer formato es más legible pero está limitado a una breve tabla de valores que además es más difícil modificar de manera numérica desde una aplicación escrita en JavaScript.

    Para nuestra propuesta de representación gráfica de datos de sensores conectados a la IoT necesitaremos solamente tres propiedades relacionadas con el color. Servirán tanto para indicar el del texto, que ahora se explica, como para indicar el de cualquier componente que lo soporte.

    • color indica el color del elemento HTML y el de lo que contiene (que lo hereda) salvo que se cambie expresamente asignando otros colores individualmente.

    • background-color sirve para definir el color de fondo de un elemento HTML. Además de indicar el color como un valor RGB o HSL se puede usar el valor especial transparent para hacer que el objeto no tenga color de fondo y sea posible ver lo que esté situado detrás, es decir, no tape a los elementos sobre los que se ha dibujado.

    • opacity permite establecer la opacidad (indirectamente, la transparencia) de un elemento y de todo su contenido (no confundir con la transparencia del fondo). Si se asigna transparencia a elementos contenidos en otros que son a su vez transparentes, esta se incrementará, no funcionará por separado. No se puede hacer que un objeto contenido en otro transparente sea más opaco. El valor de opacity se expresa como un coeficiente como opacity:0.5; para indicar el 50% de opacidad.

      Las versiones más antiguas del explorador de Microsoft no usaban esta propiedad, pero disponían de la propiedad filter (filtro) que, entre otros valores podía soportar el de alpha (para el canal alfa) al que sí se podía asignar una opacidad porcentual con opacity según el formato:

    Medidas

    En CSS, la medida de los elementos <div>, los que hemos elegido para componer el contenedor de los gráficos, se establece con width (ancho) y height (alto).

    entre el contenido del <div> y su perímetro hay un área de relleno que se determina con el valor de padding. Rodeando el perímetro del objeto está el borde cuya medida se especifica con la propiedad border. Separando el exterior del objeto <div> de los otros objetos circundantes hay un espacio cuya medida está determinada por margin.

    En condiciones normales, la medida del espacio usado por el objeto <div> se puede calcular como la suma de su ancho o su alto más el relleno (padding) más el borde (border) más el margen (margin). Cuando la medida relevante que se fija es el espacio interior útil del objeto <div>, esta composición es muy práctica, pero si lo que se sabe es la medida total disponible se puede cambiar este comportamiento, establecido por defecto, para que la medida total del ancho y del alto sea la indicada por width (ancho) y height (alto) restando de ella la medida del relleno, borde y margen, en lugar de sumarla. Para usar este modo se asigna a la propiedad box-sizing el valor border-box (el valor por omisión es content-box)

    En el siguiente esquema se muestran gráficamente los valores resultantes de width (ancho) y height (alto) en caso de usar box-sizing:border-box; (el total) obox-sizing:content-box; (el interior)

    CSS modelo de caja (box model) width height padding border margin

    Los valores de las medidas se expresan con las unidades que ya se han explicado. Cuando se trata de propiedades definidas por varios valores pueden mezclarse en ellas cifras expresadas con diferentes tipos de medias. Además existen algunos valores especiales que son relevantes para el uso que vamos a hacer en esta implementación de gráficos de sensores en la IoT. En concreto, podemos usa el valor auto en la propiedad margin como recurso para centrar objetos en algunas circunstancias.

    En el ejemplo anterior, para la clase «caja_chica» se define un borde de 2 píxeles de grosor, dibujado con un trazo negro (#000000) continuo (solid). En la clase «caja_grande» la línea usada para el borde es discontinua (dashed) y el color rojo (#FF0000). Para expresar por separado estos valores se puede usar border-width para el grosor, border-style para el trazo y border-color para el color. Estas propiedades del borde son a su vez compuestas y están formadas por las características de la parte superior, derecha, inferior e izquierda, siguiendo el sentido horario como se explica más arriba.

    Las dos clases que se han definido tienen las mismas medidas, pero la primera es más pequeña ya que, al usar el valor border-box para la propiedad box-sizing, el relleno, el borde y el margen se dibujan en el interior del objeto en lugar de alrededor del contenido, como ocurre por defecto. En la clase «caja_grande» no se indica, por lo que se toma por defecto el valor content-box que hace que relleno, borde y margen aumenten el tamaño indicado por width y height.

    El valor del margen de las clases del ejemplo anterior es de 10 píxeles en la parte superior, derecha, inferior e izquierda, por lo que podría expresarse como un único valor margin:10px;. Es muy interesante conocer esta alternativa para entender el código desarrollado por terceros aunque, en esta propuesta de implementación, para hacerla más legible, se sugiera indicar, repetidos, los valores.

    Las tres clases del ejemplo anterior producen el mismo resultado, siendo más compacta la definición de la denominada «lacónica» y menos la de la llamada «locuaz» que, más que para añadir claridad de lectura, es la forma que se utiliza normalmente para modificar algún aspecto parcial, concreto, de una propiedad, reutilizando los otros valores por herencia (los aporta el contenedor o los aporta una de las clases asignadas al elemento). Si fuera relevante la carga impuesta al servidor por el texto extra de este modo de definir las propiedades y de otras circunstancias que, para hacer más legible el código, como los comentarios, aumentan el tamaño y por tanto el tráfico, sería posible procesarlo (por ejemplo) desde PHP como parte de la estrategia de generación de código desde este lenguaje.

    Las dimensiones del modelo de caja afectan principalmente a los elementos <div> pero es posible forzar este comportamiento en otros elementos con la propiedad display y el valor block. Para que un elemento fluya como el texto en una línea se usa display:inline; y se pueden unir ambos comportamientos, medidas y flujo, con display:inline-block;

    El valor none en la propiedad display, usado como display:none;, también permite ocultar objetos, lo que servirá para «encenderlos» y «apagarlos» desde JavaScript.

    Si no se especifican la dimensiones de un elemento, toma las que sean necesarias para que su contenido quepa (en realidad, se hace caber el contenido sin necesidad de establecer una dimensión). Pero si se indican las dimensiones, se puede dar la circunstancia de que los objetos contenidos no quepan; en tal caso, las dimensiones no se respetan, aumentan para permitir que todo el contenido sea visible.

    Para que los elementos contenidos en otro de medidas fijas se recorten al rebasar el tamaño, se utiliza la propiedad overflow con el valor hidden. Con el valor scroll, también se recortan los objetos que desborden el contenedor, como ocurre con hidden pero se muestra una barra de desplazamiento (barra de scroll) con la que podrían verse al moverla. El valor auto hace que aparezca la barra de desplazamiento solamente cuando sea necesaria en función de la medida del contenido.

    También se puede establecer una medida mínima de forma que los contenedores ocupen ese espacio aunque el contenido no lo necesite y sin limitar que aumenten sus dimensiones cuando el contenido lo demande. Las propiedades que se encargan de esta tarea son min-width para el acho y min-height para el alto. En el sentido contrario, max-width establece un ancho máximo y max-height un alto máximo que anulan a width y a height.

    Flujo de los elementos en la página web

    Los rectángulos (bloques) que hemos definido con elementos <div>, se colocan por defecto uno bajo otro. Para cambiar este comportamiento se puede utilizar la propiedad float, indicando left o right como valor, para que fluyan de izquierda a derecha o de derecha a izquierda respectivamente. Al contrario, para impedir que un objeto «flote» a derecha o izquierda de otro se puede utilizar la propiedad clear con los valores left, right o both, que anulan el flujo de izquierda a derecha, de derecha a izquierda o ambos.

    CSS floatCSS clear

    Al contrario de lo que ocurre en otras circunstancias, el flujo que produce float no modifica automáticamente las dimensiones del contenedor, por lo que resulta útil incluir en sus propiedades overflow:auto; para forzar el cambio del tamaño (el alto) del contenedor cuando un objeto lo desborde por su ubicación con float.

    Otra manera de configurar el flujo del contenido de un elemento es dividiéndolo en columnas con la propiedad column-count (que por el momento conviene acompañar de -webkit-column-count y de -moz-column-count) El tamaño de las columnas puede indicarse (en realidad, sugerirse) con column-width (-webkit-column-width -moz-column-width) y la separación entre columnas con column-gap (-webkit-column-gap -moz-column-gap)

    CSS columnas

    Para que los bloques no se partan y su contenido se distribuya por varias columnas se puede usar display:inline-block; aunque eso seguramente implique. dejar una parte de la columna sin usar.

    Posicionamiento

    Para establecer la ubicación de los elementos en la página web, CSS utiliza varios modos de posicionamiento que pueden ser diferentes para cada elemento, es decir, es posible mezclar en la misma web diferentes criterios de posicionamiento.

    • position:static; Es el posicionamiento por defecto (no es necesario indicarlo si no se ha modificado previamente) Este tipo de posicionamiento sigue el flujo «natural» de la página: un elemento tras otro empezando por la izquierda, creciendo, mientras haya espacio, a la derecha y desde arriba hacia abajo. No usa coordenadas en horizontal o vertical para establecer su ubicación, sigue la posición que corresponda al orden del objeto.

    • position:fixed; Sirve para colocar un objeto en una posición fija de la ventana del navegador (como un menú, por ejemplo) La ubicación del elemento se especifica en horizontal con left o right para determinar la separación por la izquierda o la derecha respectivamente y con top o bottom para la separación superior o inferior al borde de la ventana del navegador (viewport).

      Utilizando este y otros tipos de posicionamiento, los objetos pueden solaparse. Los objetos dibujados primero (definidos antes en el código HTML) pueden ser tapados por los que se dibujen después (los incluidos posteriormente en el código HTML). Para alterar el orden normal se puede usar la propiedad z-index, los objetos con mayor valor en z-index tapan a los que tienen menor valor.

    • position:relative; Desplaza el elemento desde su posición «normal» lo que indiquen las propiedades left o right en horizontal y top o bottom en vertical.

    • position:absolute; Coloca el elemento en una posición fija respecto al objeto que lo contiene. Su ubicación se expresa, como en casos anteriores, con left,right, top y bottom

      El nombre de este tipo de posicionamiento, resulta confuso al principio, ya que la posición se establece con respecto al objeto jerárquicamente superior al que usa la propiedad, lo que es discutible que sea absoluto.

      También es importante recordar que el elemento que contiene a los objetos <div> que usamos en el primer nivel jerárquico es <body>, por lo que, si el <div> que usa position:absolute; no está contenido en otro, su posicionamiento será «absoluto» con respecto a la página web.

    Propiedades para medios y características específicos (media queries)

    CSS permite definir en la misma hoja de estilos apariencias distintas para diversos medios o soportes en función del tipo de dispositivo usado (como una pantalla, o una impresora), de sus dimensiones, de su orientación (vertical o apaisada) o de su resolución. Esto sirve para poder mostrar, de la forma más adecuada para un contexto, la misma página web.

    Para hacer referencia a los medios se usa @media de forma similar a como ya se ha explicado para los tipos de letra con @font-face, encerrando entre llaves ({ y }) las definiciones de los diferentes elementos: etiquetas HTML, clases, identificadores…

    Los tipos de medios disponibles en CSS3 son: all, para hacer referencia a cualquier medio (a todos), screen para cualquier tipo de pantalla (versiones anteriores de CSS distinguían entre TV y monitores de ordenador) print para salida por impresora y speech para audio lectores web que interpretan la información con sintetizadores de voz.

    En el ejemplo anterior, los elementos de la clase texto tienen el fondo negro y el texto blanco en pantalla pero se imprimen con el fondo blanco y el texto negro.

    A los medios se les puede imponer condiciones para definir diferentes grupos de propiedades en función, por ejemplo, de la resolución disponible o la proporción de la ventana (viewport). Estas condiciones y los propios medios pueden componerse con las operaciones lógicas and, not y only para exigir que cumpla varias, que no la cumpla o solamente para cuando la cumpla, respectivamente.

    Entre las condiciones disponibles, nos resultan especialmente interesantes max-width (ancho máximo de la ventana), max-height (alto máximo de la ventana), min-width (ancho mínimo de la ventana), min-height (alto mínimo de la ventana), orientation (la orientación, que puede ser landscape, apaisada, o portrait, vertical), max-resolution (resolución máxima en dpi, puntos por pulgada, o en dpcm, puntos por centímetro) y min-resolution (resolución mínima, también en dpi o dpcm).

    En el ejemplo anterior se empieza definiendo un color de fondo para que, en todos los medios, los elementos de la clase bloque_principal tengan el color #CCCCCC de fondo. Cuando se muestre en una pantalla y la ventana tenga al menos 320 píxeles de ancho, el margen izquierdo y derecho será automático (centrará el bloque) y el ancho del elemento será de 300 píxeles. Si la resolución de pantalla es de 640 píxeles, el ancho del bloque será de 620 píxeles. Como en la segunda definición de medios no se incluye información sobre el margen y los dispositivos que cumplan la segunda condición también cumplirán la primera, el margen horizontal seguirá siendo automático.

    Por último, en el ejemplo se cambia el color de fondo para que en la impresión sea blanco.

    La forma habitual de definir los estilos para los diferentes medios suele ser empezar por lo común, normalmente colores y tipografías, seguir por las geometrías más restrictivas (las medidas de los dispositivos con menor número de píxeles) normalmente para teléfonos inteligentes y tabletas donde, además será importante saber si se usan en vertical u horizontal con orientation y seguramente también su resolución con min-resolution. Después se van indicando los distintos tamaños para las pantallas mayores, y se suele terminar con la impresión y los medios de voz, que en el ejemplo de las gráficas IoT se han omitido.

    Utilizar @media imponiendo condiciones como las dimensiones, la resolución y la orientación permite al diseñador crear una única página web que, con diferentes estilos, se verá de la forma más adecuada para cada dispositivo. A este comportamiento se suele denominar responsive design; diseño adaptable, en una traducción muy libre.

    CSS para el contenedor de gráficos SVG

    Con lo explicado hasta ahora ya es posible definir los estilos que necesita el contenedor HTML de gráficos SVG con los que representar el estado de los sensores conectados a la IoT. En el siguiente código está la propuesta incluyendo, comentada, la distribución en columnas que corresponde a un número mayor de gráficas de las que la propuesta de la serie de artículos utiliza, al objeto de que se pueda reutilizar en otros casos.

    Abajo puede verse el aspecto que estos estilos darían al código HTML de la propuesta de contenedor para gráficos SVG del artículo anterior.

    En el siguiente artículo de esta serie se explica cómo dibujar con SVG los gráficos de datos del estado de sensores conectados a la Internet de las cosas (IoT).

    Publicar comentario

    Puede que te hayas perdido