Mes: diciembre 2006

Categorías
Material de Apoyo

Maquetando una web

Me ha encantado este gif animado en el que se demuestra perfectamente el poder del CSS.

Primero se comienza generando el contenido (todo el texto que aparecerá en la página) y luego llega el formateo del contenido.

Evolución de una página Web

Ojalá pronto tengamos las nociones de CSS para maquetar una web así.

Visto en Ajaxian.

Categorías
CSS y HTML

¿Cómo aplicamos el CSS?

Existen tres formas de aplicar los estilos a nuestro código HTML:

  1. Directamente sobre un elemento: podemos aplicar el estilo a un bloque concreto de HTML, utilizando el atributo style. Es decir, dentro de una etiqueta definir cómo será su aspecto. Obviamente no es la mejor manera de proceder porque tendríamos que definir bloque por bloque.

    Ejemplo: <p style="font-size: 12pt; color: #000000">. Aquí estamos definiendo sobre este párrafo en concreto que la letra sea de tamaño 12 y de color negro. Esto no se aplicará sobre ningún párrafo más.

  2. En el propio documento: se pueden declarar los estilos en la cabecera del documento para poder utilizarlo en cualquier parte del HTML. Para ello se colocan entre las etiquetas <style>..atributos..</style>

    3. Ejemplo:

    <head>
    ...
    <style type="text/css">
    h1
    {
      border-width: 1;
      text-align: center
    }
    </style>
    </head>

    Aquí hemos definido todas las cabeceras que se encuentre entre la etiqueta <h1>. Como vemos, la etiqueta <style> tiene un atributo denominado type donde se define el tipo de la hoja de estilo. Puede tomar los valores: «text/css» y «text/javascript».

  3. En un documento externo: creando una hoja de estilos ubicada en un fichero externo con extensión .css. En mi opinión es la forma más elegante puesto que hace que nuestra página HTML quede más simple al no incluir todas las líneas de estilo (sólo sería necesaria la declaración del lugar en el que se encuentra el .css). Además, con esta forma queda aún más clara la separación entre contenido y presentación.

    Para hacer referencia a una hoja de estilos externa desde un documento HTML se pueden utilizar también dos métodos:

    • El elemento <link>. Una vez hecho link, se pueden utilizar los estilos de la misma manera que si estuviesen definidos en el propio documento.

      • Ejemplo:
      <head>
      ...
      <link href="hoja_de_estilos.css" rel="stylesheet" type="text/css">
      </head>

    • El elemento @import. Por ejemplo:

      @import «estilos.css»;
      @import url(«/estilos/estilos.css»);

Categorías
Introducción

Versiones de CSS

Hay varias versiones:

  • CSS1: fue la primera especificación que desarrolló el World Wide Web Consortium (W3C). Las hojas de estilo CSS1 describen el formato del texto y de los componentes de una página (fuente, color, tamaño, etc.).

  • CSS2: permite ubicar elementos de XHTML en diferentes capas o layers, cuyo posicionamiento no tiene que seguir el flujo HTML (plantea el modelo de cajas donde cada bloque se define como una caja que se coloca en un lugar concreto). CSS2 incluye a CSS1 (salvo pequeños detalles).

  • CSS3: aún está en desarrollo por el W3C y los navegadores apenas son capaces de «entenderlo«.

Los navegadores modernos implementan CSS1 bastante bien. En CSS2, sin embargo, existen diferencias de interpretación según marcas y versiones (una página se mostrará diferente en un navegador Internet Explorer y en un navegador Firefox). De CSS3 ya ni hablamos (por ahora no encontraremos mucho soporte para esta versión).

Material de apoyo:

Categorías
Introducción

¿Por qué usar CSS?

  1. Porque es más limpio tener por separado el contenido (HTML) y por otro la presentación (CSS). Cuando tengamos que hacer un cambio en la apariencia de nuestras páginas, será fácil localizar el elemento en nuestro css o si el cambio es el contenido, será menos farragoso hacerlo en el html.
  2. Porque para cambiar el formato de las cabeceras, por ejemplo, sólo tendremos que definir en el fichero de CSS una única vez la etiqueta <h1> y no tantas veces como aparezcan cabeceras en el html.
  3. Porque el HTML es muy limitado para lograr una maquetación atractiva de las páginas web (posicionamiento lineal). Sin embargo, con CSS2 podremos posicionar elementos a nuestro antojo.
  4. Porque nos permitirá mantener una cierta consistencia entre todas nuestras páginas. Es decir, si tenemos 100 páginas, que todas tengan el mismo formato.
  5. Porque nos permite una carga más rápida de nuestras páginas. La explicación es la siguiente: cuando el usuario accede por primera vez a nuestra web, se descarga el fichero .css y el .html. Cada vez que pinche en cada uno de los apartados de la página, deberá recargar el código HTML pero ya no el .css porque lo tiene en su caché.
  6. Porque es más accesible que el HTML. Antes de que apareciese el css, los diseñadores debían hacer uso de tablas para aplicarle forma a las páginas. Estas son muy poco accesibles puesto que en navegadores de voz, el usuario es bombardeado con un sinfín de números que representan las celdas.
  7. Porque es un estándar y los estándares son el camino para que todos podamos ver Internet de la misma manera (independientemente de nuestra versión o marca de navegador).
  8. Porque como su propio nombre indica, se trata de definir las características en cascada. Es decir, empezaremos definiendo la página entera y luego vamos refinando hasta el elemento más simple: la etiqueta. Es decir, puede que muchas cosas tengan las mismas características y eso definido en HTML supone muchísimo código, mientras que en css apenas son unas líneas
  9. Porque con HTML sólo podíamos definir atributos en las páginas con pixels y porcentajes. Con CSS podemos definir utilizando muchas más unidades como: pixels (px) y porcentajes (%), como antes; pulgadas (in); puntos (pt); centímetros (cm)
Categorías
Introducción

¿Qué es CSS?

Antes de empezar con este curso deberíamos saber qué es exactamente eso de CSS. Y qué mejor que la definición de la Wikipedia:

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <h2>. Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <h1> debía disponer de la información si se deseaba un diseño consistente para una página.

Cuando se utiliza CSS, la etiqueta <h1> no debería proporcionar información sobre como va a ser visualizado, solamente marca la estructura del documento. La información de estilo separada en una hoja de estilo, especifica cómo se ha de mostrar <h1>: color, fuente, alineación del texto, tamaño, …

Dicho de otra forma, en una página web tenemos dos cosas: el contenido y la presentación.

  • El contenido sería la información que mostramos en la página web y estaría representado por el código HTML
  • La presentación sería la forma en que visualizamos esa información y de esto se encarga el CSS (si queremos que los títulos sean de color rojo y estén en negrita, que las imágenes lleven un borde blanco, etc.)

Esto es como en el mundo del fútbol. Hoy en día los jugadores no empiezan y acaban su carrera en un mismo equipo (a no ser que seas un Julen Guerrero). ¿Y cuál es la diferencia entre una etapa y otra? La camiseta. El jugador no cambia (HTML) pero sí su indumentaria (CSS).

Futbolín