Recursos generales

CSS es una tecnica muy poderosa, pero muchas de sus características más avanzadas no son usadas por los desarrolladores de webs debid al escaso ajuste a los estándares CSS de Internet Explorer. Ello ha llevado a algunos desarrolladores a buscar maneras de conseguir que aumente el ajuste de Internet Explorer para garantizar que, si se utilizan técnicas estandarizadas, se consiga una visualización similar en todos los navegadores. Uno de ellos es Dean Edwards que ha creado un script que ofrece bajo licencia Creative Commons desde su página http://dean.edwards.name/IE7/

En esta documentación se ha utilizado este script para intentar garantizar la visualización más homogénea. Es posible que cuando esta documentación llegue a tus manos exista una versión más actualizada en la página del autor pero hemos incluido en el cd la versión 0.9 (alfa)

Los pasos a seguir para su utilización son:

Extraer los contenidos del archivo comprimido en una carpeta de tu sitio (te recomendamos que la llames ie7)
Incluir en el código del documento HTML/XML la referencia a la librería de Javascript IE7 para activar el parche tal como se indica a continuación.
Cerciorarse de que la ruta en la que se va a buscar el parche es correcta según la posición de la carpeta en la que hemos descomprimido los archivos.

Inclusión de la referencia en documentos HTML

Para activar el parche en documentos HTML hay que incluir en la cabecera de la página el enlace a la librería ie7-standard-p.js.

<!-- parche para conformidad css en navegadores
microsoft -->


<!--[if lt IE 7]>


<script src="/ie7/ie7-standard-p.js"
type="text/javascript">


</script>


<![endif]-->

El enlace hay que incluirlo después de todas las etiquetas <meta> utilizadas para declarar un Content-type (en caso contrario se experimentará un importante error haciendo que no se ejecute hasta que no se recargue la página).

Tal como puede verse el enlace al script está encerrado entre comentarios condicionales. Estos comentarios condicionales entre corchetes son una especificación propietaria de Internet Explorer, lo cual quiere decir que el resto de los navegadores no procesaran.

Inclusión de la referencia en documentos

XML

Para activar el parche en documentos XML se incluye igualmente el enlace a la librería ie7-standard-p.js. Es importante señalar que hay que prefijar la etiqueta script con el espacio de nombres html

<!--

parche para
conformidad css en navegadores microsoft


-->


<!--[if lt IE 7]>


 <html:script src="/ie7/ie7-standard-p.js"
type="text/javascript">


 </html:script>


<![endif]-->

Crear un bookmarlet para cambiar el tamaño de la ventana del navegador

Un bookmarlet es un pequeño fragmento de código javascript que permite realizar alguna acción sobre la página que en ese momento se está mostrando en el navegador. Al diseñar páginas web puede resultarnos interesante comprobar cómo quedaría nuestra página cuando la vea un usuario con una resolución de pantalla diferente.

Vamos a suponer que nuestra pantalla tiene una resolución de 1024x768 píxeles que es prácticamente el estándar actual. Si quisiéramos comprobar cómo se visualizaría la página en una pantalla de 800x600 píxeles nos vendría muy bien disponer de un bookmarlet. Podrás crearlo para Internet Explorer, Mozilla o Firefox. La forma de hacerlo es la siguiente:

Lógicamente, en los puntos 5, 6 y 7 tendrás que tener visible esta barra para poder utilizar tu nuevo bookmarlet. A partir de ahora cuando quieras comprobar cómo se verá una de las páginas que estás haciendo bastará con que pulses sobre él y la ventana se redimensionará automáticamente a 800x600 píxeles (o a cualquier otra resolución menor que la que tienes establecida en tu equipo que hubieras puesto)

Si realizas una búsqueda por el término bookmarlets puedes encontrar muchas otras pequeñas piezas de código que pueden resultarte muy útiles.

Generador de favicon

Si estás viendo esta página con Mozilla, Firefox u Operar habrás comprobado que ha aparecido un icono personalizado en la barra de direcciones. En el caso de Explorer es necesario que la página se haya guardado en los favoritos
te has fijado en la barra de direcciones habrás comprobado que esta página tiene un icono personalizado.

Modelos de estructuras de páginas

Generador de estructuras de tres columnas con CSS

Fuentes de imágenes libres de derechos

Extensiones

Sitios para aprender diseño con CSS

Este es uno de los sitios que no te puedes perder si quieres empezar por maravillarte con las creaciones de montones de autores, continuar aprendiendo de de lo que han hecho y ,para terminar, experimentar y participar con un diseño propio si te animas.

La idea es muy sencilla: hay un texto común y se puede jugar con él para distribuirlo por la superficie de la página y lograr una presentación diferente. No se puede añadir más texto pero sí se pueden modificar las imágenes y colores de la página.

De verdad, no te lo pierdas. www.csszengarden.com/

Aunque lo cierto es que cuando quieres aprender lo que haces es leer un lenguaje común formado por las reglas de estilo, CSSZengarden puede tener una dificultad inicial porque el texto está escrito en inglés.

Si te resulta más familiar enfrentarte a un texto escrito en castellano puedes visitar otra interesante página basada en la misma idea que la anterior: un texto común que cuya presentación hay que modificar utilizando únicamente estilos. Lo encontrarás en www.camaleoncss.com (Tampoco deberías perdértelo)

Parche para conformidad CSS2 en Internet Explorer