¿Por qué CSS?
Multimedia V
¿Por qué CSS?
Las hojas de estilo en cascada ofrecen propiedades para
ampliar el lenguaje HTML en la representación visual de la
página web.
El lenguaje CSS, definido por primera vez en el año 1996,
es el más conocido y utilizado para definir las propiedades
de formato de los diferentes elementos HTML.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS?
Este lenguaje permite vincular los elementos HTML con
“plantillas de documento” (hojas de estilo o stylesheets),
que, además de contener la información topográfica de los
elementos visuales de la página, permiten separar
completamente la estructura de contenidos de su
representación y presentación actuales.
No sólo en el monitor sino en cualquier pantalla
imaginable (móvil, tablet, etc.), tecnología de soporte
(lectores de pantalla, líneas de Braille) o en el papel
impreso.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS?
El propio lenguaje (x)HTML se ha visto reforzado para la
construcción de las estructuras lógicas de la página.
No obstante, todavía siguen siendo muchas las páginas
Web que se crean mediante diseños de tablas, a pesar de
que las tablas jamás fueron pensadas para esta finalidad.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
¿Qué aporta separar la estructura del diseño?
Menos código y más transparente.
1. Documentos limpios
2. Composición de bloques lógicos
3. Acorta drásticamente los tiempos de carga
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Facilita las actualizaciones:
Todas las modificaciones se pueden realizar de una forma
centralizada
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Accesibilidad
1. Páginas web accesibles y con menos obstáculos
2. Acceso a su contenido desde cualquier sistema
3. Desde cualquier plataforma.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Usabilidad
CSS contiene muchas funciones y métodos con los que
proporcionar funciones ampliadas a sus visitantes.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Buscadores
El menor código fuente y la estructura ordenada también
hacen más fácil y rápido la lectura para los robots de
búsqueda.
Las palabras clave más importantes en textos y títulos se
procesan conjuntamente y no hay peligro, por tanto, de
que el buscador tire la toalla en el enésimo anidamiento
de la tabla.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
El factor de los costos
Las ventajas económicas quedan claras ya en los puntos
mencionados hasta ahora.
Uno ahorra, sobre todo, tiempo en todos los procesos.
Los contenidos se pueden crear conjuntamente para todos
los documentos sin preocuparse del formato y la forma.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Las hojas de estilo se crean y mantienen de manera
centralizada.
Cualquier colaborador, aún ajeno a la creación de los
mismos documentos, puede realizar sin problemas las
modificaciones, actualizaciones e, incluso, el total
relanzamiento de los mismos.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
El código fuente, al ocupar un espacio mínimo, representa
un ahorro inmediato, especialmente en los sitios Web de
muchas páginas, donde el costo de tráfico de datos se verá
reducido drásticamente.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Hechos
Es evidente que las páginas desarrolladas conforme a un
estándar y con reducción máxima de barreras, transmiten
una imagen de negocio inteligente.
¿Por qué renunciar a un amplio número de clientes
potenciales, o a una página más rápida, con un mejor
ranking en los buscadores?
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Y, por supuesto, también conseguirá mayor efecto en el
público en general, ya que se correrá la voz de que su
página es muy fácil de manejar, la información de los
productos se encuentra fácilmente, y nadie se ve excluido
por tener un navegador “inadecuado”.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Un ejemplo
En este apartado se mostrará un pequeño fragmento, esto
es, un fragmento reducido, de una página mal
estructurada, a fin de mostrarles un pequeño ejemplo de
código.
Seguidamente se mostrará una tabla en la que se calcula el
trabajo real que implica un código fuente de esas
características.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Extracto de código fuente
Seguro ya se ha encontrado alguna vez con una
monstruosidad como la que veremos a continuación,
especialmente con editores WYSIWYG, creadores únicos
de semejantes construcciones llenas de anidamientos y
atributos redundantes.
Un despliegue inmenso para un simple menú anidado de
tres entradas:
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Ver código fuente
Ver ejemplo en ejecución
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Y ahora imagínese cómo creará este fragmento de código
fuente cuando añadamos más opciones de menú y, por
tanto, se necesiten más anidamientos.
Sin olvidar los diversos detalles sobre las fuentes y el
color, y los efectos MouseOver del lenguaje JavaScript.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Cada página de su sitio Web mostrará de alguna manera el
peso de todo ese código.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Pensemos ahora qué pasaría si, en lugar del código
anterior, tuviéramos el siguiente:
<ul>
<li>Empresa
<ul>
<li>Contacto</li>
<li>Impreso</li>
</ul>
</li>
</ul>
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | ¿Por qué separar la estructura del diseño?
Eso es todo lo que necesitamos en el código fuente. El
resto (color, fuentes, sangrías, párrafos, íconos de guión y
el famoso efecto MouseOver) se realizarán por medio de
CSS.
Además de la sencillez de la estructura y la facilidad para
ampliarla, podrá hacer creaciones mucho más libremente:
con un par de toques en la hoja de estilo podrá cambiar el
menú completamente, desde las adaptaciones del color
hasta la distribución espacial de los elementos.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | Análisis de una página clásica
Análisis de una página Web clásica.
Veamos a continuación una comparación en forma de
tablas del estado real de una página mal codificada (un
caso nada raro) y el estado ideal de una página bien
codificada.
Multimedia V
Universidad de Guadalajara | Centro
Antes
Tablas
49 tablas de diseño, con hasta cinco niveles de
anidamiento, sobrecargadas con atributos
redundantes
Código fuente
38 kb (sin imágenes)
850 Líneas
Sin estructura (de difícil lectura)
Sin comentarios.
El menú principal
7.5 kb
180 líneas
JavaScript
Guion_GIFs
Tablas confusamente anidadas
JavaScript
Efecto Hover en el menú principal queda
inefectivo al desactivar JavaScript
Después
Cero tablas de diseño; 4 tablas sin anidamientos
para datos realmente propios de una tabla
16 kb (sin imágenes)
320 líneas
Estructura limpia (más legible)
Comentada
1.3 kb (sin imágenes)
17 líneas
Sin JavaScript
Sin Guion_GIFs
Lista, limpia
Efecto Hover del menú principal gestionado por
CSS
Imagen
El código está plagado de Guion_GIFs y gráficos
de navegación (flechas)
Instrucciones CSS en lugar de Guion_GIFs, se
descargan las flechas de navegación (CSS)
Hoja de estilo
El CSS utilizado hasta ahora es rudimentario y
prácticamente sólo incluye instrucciones sobre
color y fuentes
El uso coherente de CSS “adelgaza” el código
fuente y elimina redundancias.
¿Por qué CSS? | Análisis de una página clásica
Lo interesante empieza cuando hacemos el cálculo de la
comparación con un determinado número de páginas.
Compare un sitio Web pequeño, de unas 100 páginas, con
un sitio grande de unas 10,000 páginas.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | Análisis de una página clásica
100 páginas
10,000 páginas
Sin CSS
Con CSS
Sin CSS
Con CSS
Código fuente
en MB
3,8
1,6
380
160
Líneas de
código fuente
85,000
32,900
8,500,000
3,2000,000
Tablas
4,900
400
490,000
40,000
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | Análisis de una página clásica
Hemos podido reducir el código fuente en un 60%, el
número de tablas incluso en un sustancioso 90%.
De ahí se deriva un ahorro claro en el costo del tráfico de
datos y los tiempos de carga, así como una simplificación
considerable a la hora de actualizar los contenidos.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | Análisis de una página clásica
Por otro lado, el código fuente ahora sólo incluye las
referencias a las imágenes y gráficos relativos a los
productos.
Todos los Guion_GIFs y símbolos de navegación han
quedado eliminados o descargados.
De ese modo se incrementa la legibilidad y se reduce la
posibilidad de error en las referencias.
Multimedia V
Universidad de Guadalajara | Centro
¿Por qué CSS? | Análisis de una página clásica
Naturalmente, no todas las páginas son susceptibles de
una optimización como ésta.
Incluso las tablas de diseño se puede escribir con algo más
de gracia que la que hemos visto aquí.
De todos modos, este ejemplo no es una invención
caprichosa, sino el fiel reflejo de una página Web real.
Multimedia V
Universidad de Guadalajara | Centro
Descargar

Diapositiva 1