¿Por qué CSS? Multimedia V. ¿Por qué CSS? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa Las hojas de estilo en cascada ofrecen.

Presentación del tema: "¿Por qué CSS? Multimedia V. ¿Por qué CSS? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa Las hojas de estilo en cascada ofrecen."— Transcripción de la presentación:

1 ¿Por qué CSS? Multimedia V

2 ¿Por qué CSS? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

3 ¿Por qué CSS? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

4 ¿Por qué CSS? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

5 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa ¿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

6 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa Facilita las actualizaciones: Todas las modificaciones se pueden realizar de una forma centralizada

7 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa Accesibilidad 1. Páginas web accesibles y con menos obstáculos 2. Acceso a su contenido desde cualquier sistema 3. Desde cualquier plataforma.

8 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa Usabilidad CSS contiene muchas funciones y métodos con los que proporcionar funciones ampliadas a sus visitantes.

9 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

10 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

11 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

12 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

13 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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?

14 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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”.

15 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

16 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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:

17 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa Ver código fuente Ver ejemplo en ejecución

18 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

19 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa Cada página de su sitio Web mostrará de alguna manera el peso de todo ese código.

20 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa Pensemos ahora qué pasaría si, en lugar del código anterior, tuviéramos el siguiente: Empresa Contacto Impreso

21 ¿Por qué CSS? | ¿Por qué separar la estructura del diseño? Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

22 ¿Por qué CSS? | Análisis de una página clásica Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

23 AntesDespués Tablas 49 tablas de diseño, con hasta cinco niveles de anidamiento, sobrecargadas con atributos redundantes Cero tablas de diseño; 4 tablas sin anidamientos para datos realmente propios de una tabla Código fuente 38 kb (sin imágenes) 850 Líneas Sin estructura (de difícil lectura) Sin comentarios. 16 kb (sin imágenes) 320 líneas Estructura limpia (más legible) Comentada El menú principal 7.5 kb 180 líneas JavaScript Guion_GIFs Tablas confusamente anidadas 1.3 kb (sin imágenes) 17 líneas Sin JavaScript Sin Guion_GIFs Lista, limpia JavaScript Efecto Hover en el menú principal queda inefectivo al desactivar JavaScript 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.

24 ¿Por qué CSS? | Análisis de una página clásica Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

25 ¿Por qué CSS? | Análisis de una página clásica Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 100 páginas10,000 páginas Sin CSSCon CSSSin CSSCon CSS Código fuente en MB 3,81,6380160 Líneas de código fuente 85,00032,9008,500,0003,2000,000 Tablas4,900400490,00040,000

26 ¿Por qué CSS? | Análisis de una página clásica Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

27 ¿Por qué CSS? | Análisis de una página clásica Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.

28 ¿Por qué CSS? | Análisis de una página clásica Multimedia V Universidad de Guadalajara | Centro Universitario de la Costa 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.