Hojas de estilo en cascada (CSS)

1. Hojas de estilo en cascada(CSS) Steven Cascante Núñez A21183

2. Agenda • ¿Qué es CSS? • Reseña histórica • Principales ventajas • Principales desventajas • Mejores prácticas • Mejores sitios • Uso en paquetes de comercio electrónico

3. ¿Qué es CSS? • CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos. • CSS es la mejor forma de separar los contenidos y su presentación. • CSS se utiliza para definir el aspecto de todos los contenidos, es decir, el color, tamaño de letra, la separación entre párrafos, la tabulación de una lista, etc.

4. Reseña histórica • Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año 1970. • La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definir CSS. • En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó “CSS nivel 1”. • El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación oficial, conocida como “CSS nivel 2”.

5. Ejemplo de sintaxis .entry-content { grid-columns: (30px * *)[4]; grid-rows: 9em 33.3% *; column-count: 4; column-gap: 30px; } .entry-content h2 { float: page top left; width: 6gr; height: 1gr; margin-left: -30px; } .entry-content img.photo { float: page bottom left; float-offset: 4gr 1gr; } <div class="entry-content"> <h2>What is Sushi?</h2> … <img src="sushi.jpg" class="photo" alt="" /> … </div>

6. Principales ventajas • Control de diseño. • Redefinición de etiquetas. • Uso de etiquetas para su misión. • Personalización. • Maquetación y accesibilidad. • Respeto a los estándares. • Tamaño. • Usabilidad. • Visibilidad. • Posicionamiento web. • Reducción del tiempo de desarrollo.

7. Principales desventajas • No todas las propiedades de las CSS son reconocidas igualmente por todos los navegadores. • Ciertas propiedades, como posición o visibilidad de los elementos, pueden provocar que una parte del contenido de la página resulte inaccesible. • Mayor dificultad al identificar los elementos afectados por distintas clases de estilos.

8. Mejores prácticas • Empezar con una página de contenido en blanco. • Resetear los estilos CSS. • Organizar las hojas de estilo en un único “maestro”. • Disponer de clases útiles para depurar. • Organizar las hojas en apartados y bloques.

9. Mejores sitios en css • www.csszengarden.com • http://www.webdesignerwall.com/trends/best-of-css-design-2007 • http://www.smashingmagazine.com/2006/12/19/50-beautiful-css-based-web-designs-in-2006/ • http://lineupblog.com/weblog/2007/07/21/los-50-mejores-sitios-de-inspiracin-para-diseadores

10. Uso en paquetes de Comercio Electrónico • En los Sistemas Administradores de Contenido (CMS) los CSS están prácticamente integrados. • En aplicaciones como oscommerce no tanto, pues tienen un diseño basado en tablas en vez de div's.

11. En el futuro • Capacidades visuales avanzadas: mejoras en cuanto a interfaz gráfica, posicionamiento y tamaño de objetos, usando alineación para cada uno y desplazamiento. • Hojas de Estilo Aural: utilizar las opciones de ciertos dispositivos con capacidades de reproducción de sonido. Agregar sonidos de fondo o efectos de transición con determinados eventos. • Bordes y Fondos: Usar imágenes para los bordes, redondear y/o agregar sombras. Creación de pies de página, referencias cruzadas y construcción de cabeceras para títulos de secciones.