domingo, 24 de enero de 2021

👨‍💻 Mis apuntes sobre las hojas de estilo | Definición | Descripción | Importancia | Utilidad | Parte 1

Hojas de estilo
⏩ Snippet: ⏪
👉 Las «hojas de estilo Web» son una excelente metodología desarrollada para facilitar el trabajo en HTML. y un inicio metodológico en su estudio es conocer su definición, importancia y utilidad, para avanzar en siguientes lecciones a los conceptos más avanzados que sobre el tema abundan en la Internet.
Portafolio de temas tratados en esta publicación:

DEFINICIÓN

      Una hoja de estilo es un archivo de extensión CSS que contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente, color de fondo, párrafos, etc) de las distintas etiquetas que forman una página HTML

      Un estilo es una combinación predefinida de un tipo de fuente, un color y un tamaño de letra que puedes aplicar en cualquier texto del documento. Aplicar un estilo puede ayudarte a mejorar el diseño y la presentación de tu documento.

IR A PORTAFOLIO
Antecedentes

      Las «hojas de estilo Web» representan un avance importante para los diseñadores de páginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus páginas. En los entornos científicos en que la Web fue concebida, la gente estaba más preocupada por el contenido de sus páginas que por su presentación. A medida que la Web era descubierta por un espectro mayor de personas de distintas procedencias, las limitaciones del HTML se convirtieron en fuente de continua frustración, y los autores se vieron forzados a superar las limitaciones estilísticas del HTML.

      Aunque las intenciones han sido buenas -- mejorar la presentación de las páginas web --, las técnicas para conseguirlo han tenido efectos secundarios negativos.

      Entre estas técnicas, que dan buenos resultados para algunas personas, algunas veces, pero no siempre ni para todas las personas, se incluyen:

  • La utilización de extensiones propietarias del HTML
  • Conversión del texto en imágenes
  • Utilización de imágenes para controlar el espacio en blanco
  • La utilización de tablas para la organización de las páginas
  • Escribir programas en lugar de usar HTML

      Estas técnicas incrementan considerablemente la complejidad de las páginas web, ofrecen una flexibilidad limitada, sufren de problemas de interoperabilidad, y crean dificultades para las personas con discapacidades.

      Las «hojas de estilo Web» resuelven estos problemas al mismo tiempo que reemplazan al limitado rango de mecanismos de presentación del HTML.

      Con las «hojas de estilo Web» es más fácil especificar la cantidad de espacio entre líneas, el sangrado de las líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo de las fuentes, y otros muchos detalles.

      Por ejemplo, la siguiente «hoja de estilo Web» CSS (almacenada en el fichero "especial.css") hace que el color del texto de un párrafo sea verde ("green") y lo rodea de un borde rojo ("red") continuo ("solid"):

P.especial {
color : green;
border: solid red;
}

      Los autores pueden vincular esta hoja de estilo a su documento fuente HTML con el elemento LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <TITLE>Un documento con una hoja de estilo externa<TITLE>
    <LINK href="especial.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY>
    <P class="especial">Este párrafo debería tener texto especial verde.
  </BODY>
</HTML>
IR A PORTAFOLIO
Descripción

      Las «hojas de estilo Web,» en cascada (CSS) ofrecen un modo flexible de agregar estilos a las páginas de su sitio Web. Este conjunto de reglas de formato rige el aspecto de sus páginas y le permite definir las fuentes, los colores, el formato y otras características de presentación.

       Las «hojas de estilo Web» permiten liberar la composición del texto de los aspectos visuales y favorecen que se estructure y anote mediante códigos que permiten un tratamiento más eficaz de los contenidos.

       Las «hojas de estilo Web» han estado disponibles por varios años, pero su potencia e importancia fueron muy ignoradas ya que existían pocas implementaciones. Los autores Web, ansiosos de agregar creatividad a sus páginas incidiendo en la presentación, comenzaron a usar las extensiones propietarias de Netscape en vez de las más potentes «hojas de estilo Web.» Esto era muy natural, ya que las extensiones propietarias de Netscape podían ser vistas por una parte significativa de los usuarios de la Web, mientras que pocos podían ver mejoras con hojas de estilo.

       HTML 4 soporta las siguientes características de «hojas de estilo Web:»

Colocación flexible de la información de estilo
  ⏩ Al colocar las «hojas de estilo Web» en ficheros separados es más fácil reutilizarlas. Algunas veces es útil incluir instrucciones de representación dentro del documento al que se aplican, ya sea agrupadas al comienzo del documento, o en atributos de los elementos a lo largo del cuerpo del documento. Para facilitar la gestión de estilos a nivel de sitio, esta especificación describe cómo utilizar los encabezados HTTP para especificar qué hojas de estilo se aplican a un documento.
Independencia de lenguajes de «hojas de estilo Web» específicos
  ⏩ Esta especificación no liga el HTML con ningún lenguaje de «hojas de estilo Web» en particular. Esto permite que se puedan usar otros lenguajes diferentes, desde los lenguajes más simples válidos para la mayoría de los usuarios, hasta los más complejos, útiles para una minoría de usuarios con necesidades muy especializadas. Todos los ejemplos que se incluyen en lo que sigue se sirven del lenguaje CSS (Hojas de Estilo en Cascada, Cascading Style Sheets, [CSS1], pero también son posibles otros lenguajes de «hojas de estilo Web.»
Cascada
  ⏩ Se llama así a la capacidad que proporcionan algunos lenguajes de «hojas de estilo Web,» tales como CSS que permiten que las informaciones de estilo provenientes de varias fuentes puedan combinarse. Éstas podrían ser, por ejemplo, las guías de estilo de una empresa, los estilos comunes a un grupo de documentos, y los estilos específicos de un documento en particular. Al almacenarse independientemente, las «hojas de estilo Web» pueden reutilizarse, lo cual simplifica las tareas de diseño y hace más efectiva la utilización de la memoria caché de la red. La cascada define una secuencia ordenada de «hojas de estilo Web» en la que las reglas de las últimas hojas tienen una prioridad mayor que las de las primeras. No todos los lenguajes de «hojas de estilo Web» soportan la cascada.
Dependencias de los medios
  ⏩ HTML permite a los autores especificar sus documentos de una manera independiente del medio. Esto permite a los usuarios acceder a las páginas web usando una amplia gama de dispositivos y medios, p.ej., pantallas gráficas para ordenadores bajo Windows, Macintosh OS y X11, dispositivos para aparatos de televisión, teléfonos adaptados y dispositivos portátiles PDA, navegadores basados en voz, y dispositivos táctiles Braille.

  ⏩ Las «hojas de estilo Web» en contraste, se aplican a medios o grupos de medios específicos. Una «hojas de estilo Web» diseñada para una pantalla puede ser aplicable para una salida impresa, pero es de poca utilidad para los navegadores basados en voz. Esta especificación le permite definir categorías generales de medios a los que es aplicable una hoja de estilo dada. Esto permite a los agentes de usuario evitar la descarga de «hojas de estilo Web» que no sean apropiadas. Los lenguajes de «hojas de estilo Web» pueden incluir características para describir dependencias del medio dentro de una misma hoja de estilo.

Estilos alternativos
  ⏩ Los autores pueden querer ofrecer a los lectores varias maneras diferentes de ver un documento. Por ejemplo, una «hoja de estilo Web» para representar documentos compactos con fuentes pequeñas, o una que especifique fuentes más grandes para una lectura más fácil. Esta especificación permite a los autores especificar una «hoja de estilo Web» preferente así como hojas alternativas que se dirijan a medios o usuarios específicos. Los agentes de usuario deberían dar a los usuarios la oportunidad de seleccionar una de las «hojas de estilo Web» alternativas o incluso de desactivar las «hojas de estilo Web» completamente.
Consideraciones de rendimiento
  ⏩ Algunas personas han expresado su preocupación acerca de los posibles problemas de rendimiento relacionados con las «hojas de estilo We.b» Por ejemplo, la obtención de una «hoja de estilo Web» externa puede retrasar la presentación del documento al usuario. Algo parecido sucede si la cabecera del documento contiene un conjunto muy grande de reglas de estilo.

  ⏩ La propuesta actual resuelve estos problemas, pues permite a los autores incluir instrucciones de representación dentro de cada elemento HTML. Así, la información de representación siempre estará disponible en el momento en que el agente de usuario quiera representar cada elemento.

  ⏩ En muchos casos los autores sacarán partido de una «hoja de estilo Web» común a un grupo de documentos. En este caso, la distribución de reglas de estilo a lo largo del documento conducirá a un rendimiento peor que si se usara una «hoja de estilo Web» vinculada, ya que para la mayoría de los documentos la «hoja de estilo Web» ya estará almacenada en la caché local. La disponibilidad pública de «hojas de estilo Web» de calidad potenciará este efecto.


IR A PORTAFOLIO
Importancia | Utilidad

      Hoy en día, más y más navegadores está implementando «hojas de estilo Web,» abriendo los ojos de los autores a características únicas que permiten incidir sobre la presentación y preservar la independencia de plataforma. Las ventajas de las «hojas de estilo Web» se volvieron obvias, así como las desventajas de crear continuamente más etiquetas HTML para efectos de presentación.

       El uso adecuado de las «hojas de estilo Web» es uno de los aspectos clave de la edición digital. Las «hojas de estilo Web» son una herramienta de gran utilidad de los programas de tratamiento de textos, como OpenOffice.org o Microsoft Word.

      Asimismo, constituyen una parte esencial de los lenguajes de marcas para edición digital: LaTeX, XML y XHTML. Dos lenguajes de hojas de estilo son CSS y XSL.

       Los atributos BODY de Netscape son ahora ampliamente aceptados en la Web, y pronto serán norma en HTML 3.2. Sin embargo, BGCOLOR, TEXT y sus amigos simplemente no brindan la flexibilidad de las «hojas de estilo Web.» La mayoría de imágenes de fondo dejarían una página ilegible para alguien con una pantalla de sólo 16 colores; muchas páginas son difíciles de leer con sólo 256 colores.

       Con los atributos BODY convencionales, un autor debe elegir si los beneficios de una imagen de fondo son mayores que los costos; con «hojas de estilo Web,» , un autor puede ofrecer un número de imágenes diferentes, en diferentes «hojas de estilo Web,» tal que el usuario pueda elegir la "«hoja de estilo Web» de 24-bit" o la "«hoja de estilo Web» de 8-bit," dependiendo de cuantos colores puede mostrar su sistema. Si ningún estilo brindado por el autor es adecuado para el usuario, se puede simplemente ignorar el estilo del autor.

       Las «hojas de estilo Web» pueden hacer mucho más sencilla la vida de un autor. Mientras que uno podría usar <HR WIDTH="75%" SIZE=5 ALIGN=center> para cada regla horizontal, esto se vuelve muy engorroso para el autor. Con «hojas de estilo Web,» solo se necesita especificar tal preferencia una vez, y el estilo puede ser aplicado al sitio completo. Y si el autor decide que WIDTH="50%" sería mejor, solo necesita cambiar esta preferencia en un solo lugar, en vez de tener que buscar a través de cientos de páginas para cambiar el HTML. Las «hojas de estilo Web» también reducen el tiempo de descarga cuando un archivo contiene toda la información de estilos.

       Las «hojas de estilo Web» también ofrecen mucho mayor flexibilidad en términos de los efectos de presentación que brindan. Las propiedades como color, background, margin, border, y muchas más pueden aplicarse a todos los elementos. Con solo HTML y sus extensiones propietarias, uno debe confiar en atributos como BGCOLOR, que está disponible solo para unos cuantos elementos. Las «hojas de estilo Web» dan la flexibilidad de aplicar un estilo a todos los párrafos, o a todos los encabezados de nivel dos, o a todo el texto con énfasis.

       Con «hojas de estilo Web,» los autores pueden usar la propiedad text-indent para sangrar texto, en vez de recurrir a desagradables artificios como <DD> o <IMG SRC="blanco.gif" WIDTH=10 ALT=""> que acarrean muchos efectos laterales negativos. Los márgenes pueden ser sugeridos sin tener que poner la página entera en una tabla. Las «hojas de estilo Web» también reducen la necesidad de búsqueda y reemplazo en multi-archivos; si un autor decide cambiar la sangría de todos los párrafos en un sitio, solo tiene que cambiar una línea en la «hoja de estilo Web.»

       Las «hojas de estilo Web» representan un gran paso adelante para la Web. Con la separación de contenido y presentación entre HTML y «hojas de estilo Web,» la Web ya no necesita alejarse del gran ideal de independencia de plataforma que brindó el medio con su inicial impulso de popularidad. Finalmente, los autores pueden modificar la presentación de documentos sin dejar las páginas ilegilbles a los usuarios.

IR A PORTAFOLIO


Fuentes:


Acá las URL de las páginas consultadas:


https://es.wikipedia.org/wiki/Hoja_de_estilo

https://www.htmlhelp.com/es/reference/css/stylesheets-now.html

http://html.conclase.net/w3c/html401-es/present/styles.html#h-14.3.2






Bibliogrfia