Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
INTRODUCCIÓN
Cuando hablamos de páginas Web, nos estamos refiriendo a un documento creado con código
HTML capaz de ser interpretado por un programa navegador de Internet, que será el que permita
visualizarlo. Las páginas Web han sido creadas para su visualización en pantalla pero esto está
cambiando y cada vez son más las necesidades de impresión (directamente a impresora o a un
archivo PDF) e incluso de nuevos medios como por ejemplo Screenreader para personas con
discapacidad visual.
ENLACES RELACIONADOS
Navegadotes
Screenreader
Editor HTML
El problema de los navegadores es que cada uno interpreta el código HTML y lo representa de forma
similar, pero en raras ocasiones se muestra exactamente igual.
PRÁCTICAS
IE HerramientasOpciones de InternetGeneralAccesibilidad
FIREFOXEditarPreferencias
OPERA
EL DISEÑO.
Hay muchas formas de construir páginas Web, pero la idea original era la creación de un sistema en
el que crear documentos con la separación del contenido y diseño del documento, de modo que a un
mismo documento se le puedan aplicar diferentes diseños, por ejemplo es posible crear un diseño
para la pantalla del PC, otro para la pantalla del móvil, otro para su impresión (directamente a
impresora o a un documento, etc.). Esto significa que a la hora de construir tendremos un núcleo (el
código HTML), sobre el que se acoplan diferentes capas que actuarán a la hora de mostrarla:
- CSS, para la pantalla.
- CSS, para la impresora.
- JavaScript (AJAX), para facilitar su interacción.
Estas capas van a cambiar su aspecto o apariencia para hacerlas más atractivas y eficientes. De
cualquier forma hay que tener en cuenta que no es posible conseguir que una misma página se
muestre exactamente igual en todos los navegadores, aunque lo que realmente debemos buscar es
que funcione correctamente en todos los navegadores y para todo tipo de usuarios.
Las hojas de estilo son conocidas normalmente como CSS (“Cascading Style Sheets”) y pretenden
separar el diseño de las páginas Web de su contenido. Han sido elaboradas en el seno del consorcio
W3, más conocido como el W3C, en cuyo sitio Web podemos encontrar todo lo relacionado con las
CSS. Recomiendo una visita a las guías breves:
ENLACES RELACIONADOS
W3C. Consorcio de la triple W.
http://www.w3c.org
En primer lugar veamos un ejemplo de lo que tenemos entre manos. Las hojas de estilo no cambian
el contenido de una página, sino su aspecto y de este modo pueden, no sólo embellecer la página,
sino además resaltar aquellas partes sobre las que es preciso llamar la atención del visitante.
PRÁCTICAS
Veamos un ejemplo en el que mostramos el contenido de una página
con las hojas de estilo habilitadas o deshabilitadas. Pulse el enlace…
Puede abrir el archivo HTML desde este enlace.
En estas dos imágenes estamos viendo la misma página, la de la izquierda muestra el efecto de
aplicar las hojas de estilo sobre el código HTML, mientras que la de la derecha presenta el estilo
propio del navegador que está usando y muestra el contenido sin apenas estilos aplicados. Juzgue por
sí mismo si el tiempo empleado en aplicar hojas de estilo merece la pena para conseguir un resultado
final mejor.
Construir páginas Web con hojas de estilo requiere un nuevo concepto de esta tarea, es preciso partir
de documentos HTML bien estructurados carentes de formato para los elementos utilizados, para
posteriormente aplicar el diseño según las posibilidades que nos proporcionan las hojas de estilo.
Vemos esto poco a poco en los siguientes apartados, para finalmente siguiendo estos cinco pasos
construir nuestro sitio Web con diseño CSS.
Este sistema tiene la ventaja de que podemos incluirlo en cualquier página que queramos que
adopte ese estilo.
Para cambiar de estilo sólo hay que sustituir la palabra Tradicional por cualquiera de los estilos que
se muestran a continuación:
Traditional-Midnight-Ultramarine-Chocolate-Oldstyle-Modernist-Steely-Swiss
Si no hay conexión a internet, no tendrá estilo y su apariencia será idéntica a la página sin estilos.
En esta instrucción podemos observar que el archivo con el estilo tiene extensión “.css”. Además en
este caso su nombre es “estilo-v3.css” y también vemos que ese archivo está ubicado en un
subdirectorio o carpeta con el nombre de “estilos”.
Podemos ver este ejemplo sobre el modo de incorporar las hojas de estilo a una página Web, en el
siguiente enlace:
PRÁCTICAS
El ejemplo que proponemos a continuación, permite ver las diferentes
hojas de estilo que podemos utilizar con una misma página con los
diferentes modos de hacer uso de ellas. Pulse el enlace y abrirá una
página Web con los enlaces adecuados…
EjemplosCSS/index-ej-css.html
Para crear el documento HTML podemos utilizar cualquier editor de texto plano o también editores
HTML, nosotros recomendamos el KIT-HTML, gratuito y muy potente.
ENLACES RELACIONADOS
HTML-KIT
http://www.HTMLKIT.es
A la hora de crear una página Web es preciso seguir cierto orden en lo que a la estructura de
directorios y archivos se refiere, y es importante establecerla de forma previa y mantenerla durante
todo el proceso de creación. Nosotros vamos a establecer la siguiente estructura de directorios, en los
ejemplos que vamos a seguir en todo este curso:
Ejercicio:
En el ejemplo anterior podemos ver el código fuente de cada uno de los archivos de contenido
(HTML) y de diseño (CSS), con comentarios sobre dichos códigos de modo que resulte sencillo
comprender lo que hace cada una de las líneas de instrucciones del código.
Pero lo ideal para aprender hojas de estilo es practicarlas, de modo que partiendo de todo lo visto
hasta ahora (especialmente de los ejemplos), os propongo el siguiente ejercicio:
1. Crear una página Web sobre un tema libre (relacionado con el currículo de 2º de
Bachillerato) siguiendo las indicaciones que detallamos a continuación.
2. Utilizar una página inicial compuesta por las capas que se utilizan en la versión tres del
ejemplo (principal, encabezado, navegación, contenido y pie).
3. La página principal debe seguir el formato e indicaciones de la siguiente página:
4. Debe tener al menos cinco apartados, aunque alguno de ellos puede estar destinado a
ejercicios, curiosidades, enlaces, etc.
5. Cada uno de los apartados debe seguir la estructura e indicaciones de la siguiente página de
muestra:
Web Developer
http://chrispederick.com/word/webdeveloper/
Manual de CSS
http://www.manualdecss.com/