Hola gente de la FES Aragon (y los que no sean de la FES también), Bienvenidos al blog, el objetivo de este será tocar los temas que vayamos viendo en el transcurso del curso PHP - AJAX vs PHP - ActionScript, además de comenzar a aportar algunas otras cosas de utilidad a la comunidad, tocando temas de interés común.

Les recuerdo que si tienen dudas sobre algo que no entiendan, con toda la confianza pueden preguntar o hacer un comentario, de manera que podamos resolver las dudas que se presenten

Reciban un cordial saludo

A continuación muestro las fuentes de donde se obtuvo la información de los tutoriales, estas fuentes iran aumentando conforme vaya avanzando el curso:

• http://www.webtaller.com/construccion/lenguajes/index/css/
• http://www.cristalab.com/tutoriales/94/tutorial-basico-de-css
• http://es.html.net/tutorials/css/

Algo de Historia

En los orígenes de la Web y en sus primeras versiones, HTML era un lenguaje fácil de aprender y muy reducido en cuanto a sus tags(etiquetas) y estructura. Todo cambió cuando empezaron a surgir los primeros navegadores que eran capaces de representar recursos gráficos como añadido a la información textual.

Así, el número de sitios web comenzó a crecer y con él, el número de tags que la especificación HTML contemplaba. El objetivo era construir sitios web cada vez más atractivos visualmente hablando, con lo que HTML debía incluir nuevos tags destinados a conseguir diversos efectos visuales.

Con todos estos cambios que la web había sufrido, nos encontramos con que un lenguaje que en sus inicios había sido "orientado a la estructura", ahora estaba totalmente "orientado a la visualización".

Por ello ante la necesidad de poder separar la parte de la presentación de la estructura nacen las hojas de estilo en cascada o CSS (Cascading Style Sheets), las cuales nos van a permitir crear de manera separada los estilos que visualización que le queramos dar a nuestro sitio.

Qué es CSS?

Sus siglas significan "Cascading Style Sheets" (Hojas de Estilo en Cascada), como se mencionó antes es una tecnología desarrollada con el fin de separar la presentacion de la estructura del HTML. Funciona aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de fondo, color del texto, posicion de los elementos, margenes, tipos de letra, etc... quedando de esta manera toda lo que tiene que ver con la parte gráfica de la web, separada completamente de la estructura del HTML.

Este lenguaje desarrollado por la W3C, ha venido haciendose cada vez mas importante entre los diseñadores, gracias a la facilidad de uso y a los optimos y flexibles resultados.

Las ventajas de manejar CSS:

• Estilo enriquecido. CSS permite la creación de documentos visualmente mucho más ricos que lo que HTML nunca permitirá. No en vano CSS está pensado única y exclusivamente para asistir al diseñador a la hora de dar estilo a un documento estrucuturado.

• Fácil de utilizar. La utilización de hojas de estilo CSS hace que el diseñador pueda reducir sustancialmente su carga de trabajo al diseñar todo un site. Esto se debe a que CSS es capaz de centralizar ciertos efectos visuales que plasmemos en diversas secciones del site, en lugar de tenerlos diseminados por páginas y páginas del site.
• Reutilización en múltiples páginas. Una hoja de estilo que recoja aspectos visuales comunes a varias páginas puede ser reutilizada en cualquier sección del site aprovechando dichos efectos ya definidos. De esta manera es sencillo generar un estilo general del web y mantenerlo así consistente para todas las páginas. Así, si deseamos modificar un estilo que es común a todo el site, sólo necesitaríamos modificar una línea de nuestro fichero CSS (con la aproximación clásica que ofrece HTML, deberíamos modificar todas y cada una de las páginas).
• Reutilización en múltiples páginas. Una hoja de estilo que recoja aspectos visuales comunes a varias páginas puede ser reutilizada en cualquier sección del site aprovechando dichos efectos ya definidos. De esta manera es sencillo generar un estilo general del web y mantenerlo así consistente para todas las páginas. Así, si deseamos modificar un estilo que es común a todo el site, sólo necesitaríamos modificar una línea de nuestro fichero CSS (con la aproximación clásica que ofrece HTML, deberíamos modificar todas y cada una de las páginas).
• Reduce el tamaño del código HTML enviado. Al centralizar los estilos ya no es necesario la utilización de tags como FONT en todos los documentos del site. De esta manera se reduce considerablemente el tiempo en que tarda en cargarse el código de una página.
• Nos prepara par el futuro. Debemos ser conscientes que muchos tags como FONT, BASEFONT, U, STRIKE, S, CENTER, han sido marcados por el W3C como "deprecated", es decir, que se desaconseja su uso ya que serán eliminados en un futuro de la especificación. De igual menera HTML retornará progresivamente a sus orígenes, volviendo a ser un lenguaje para la estrucuturación de información. Esta es la via de XML, cuya primera aproximaciés es el lenguaje de marcas XHTML.

Una vez que conoscamos las hojas de estilo, podremos ver que es mas fácil y rápido diseñar con CSS que de la manera antigua.

Para desarrollar CSS debemos de tener en cuenta 3 elementos que nos ayudaran a hacer válidos nuestros documentos de manera que sean entendidos por la mayoria de los navegadores:

Atributos

Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo "background", etc.

Valores

Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo "font" y el valor "red".

Selectores

Se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta del documento HTML.

Hay tres tipos de selectores:

• Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
• Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre.
• El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma:
  .mi_clase.

En el siguiente post comenzaremos con la sintaxis y las formas de invocar los estilos para comprender mejor lo hasta ahora visto.

Como ya mencionamos antes, la finalidad de las hojas de estilo es el separar la presentacion de la estructura, es decir, que las características que le dan forma a nuestra página (colores, imagenes, letras, etc) estén separadas de la estructura de nuestro sitio, para aclarar esto, supongamos que tenemos lo siguiente.


En el ejemplo anterior, tenemos 3 líneas de texto que pintan cada una "Aqui va un texto", están alineadas todas al centro, tienen un tipo de letra de la familia Arial, helvetica, sans-serif y un color te texto rojo, pero supongamos que no queremos el color rojo y lo cambiamos a azul, tendriamos que estar cambiando a cada linea el color, lo que hacemos precisamente con las hojas de estilo es evitar todo este trabajo tan engorrioso, pues desde la hoja de estilo hacemos el cambio y de manera automatica se aplica a todas las etiquetas que este manejando el estilo, el ejemplo anterior aplicandole estilos quedaria de la siguiente manera:

Primero creamos nuestro estilo, para este ejemplo utilizaremos una hoja de estilo incrustada (mas adelante explicaré que es esto)


Aqui estamos declarando, que para las etiquetas de tipo h1 les daremos el siguiente formato:

• tipo de letra Arial, Helvetica, sans-serif;
• color de texto rojo
• alineacion: centro

Una vez creado el estilo, nos vamos a la estructura



Y de manera automatica, el formato que creamos se aplica a las etiquetas , asi nos evitamos todo el trabajo de ir etiqueta por etiqueta.

Este es un ejemplo básico de como trabajan los estilos, como mencione al principio, la idea es comprender su funcionamiento, y que mejor que un pequeño ejemplo.

Si lo que te gusta es la programacion, puedes ver las hojas de estilo desde la perspectiva de la programación orientada a objetos, en la cual tenemos una clase llamada propiedades_de_casa y los metodos que la componen son: ventana, puerta y color, con sus respectivas caracteristicas

Entonces creamos la instancia de nuestro objeto casa con el cual vamos a llamar a los distintos metodos las veces que lo necesitemos.