PDF de programación - Edición HTML - Recursos

MINISTERIO
DE EDUCACIÓN
Y CIENCIA

SECRETARÍA GENERAL
DE EDUCACIÓN
Y FORMACIÓN PROFESIONAL

DIRECCIÓN GENERAL
DE EDUCACIÓN,
FORMACIÓN PROFESIONAL
E INNOVACIÓN EDUCATIVA

CENTRO NACIONAL
DE INFORMACIÓN Y
COMUNICACIÓN EDUCATIVA

Edición HTML

Recursos

Recursos útiles

1 de 12

C/ TORRELAGUNA, 58
28027 - MADRID

Índice de contenido

Una propuesta simple de web escolar................................................................................. 3
Fuentes de imágenes libres de derechos............................................................................. 3
Crear un bookmarlet para cambiar el tamaño de la ventana del navegador........................ 4
Generador de favicon........................................................................................................... 5
Extensiones.......................................................................................................................... 5
Parche para conformidad CSS2 en Internet Explorer ......................................................... 7
Inclusión de la referencia en documentos HTML............................................................. 7
Inclusión de la referencia en documentos XML............................................................... 7
Modelos de estructuras de páginas...................................................................................... 8
Sitios para aprender diseño con CSS.................................................................................. 9
Carácteres especiales........................................................................................................ 10
Algunos sitios en la red ..................................................................................................... 11

Recursos útiles

2 de 12

UNA PROPUESTA SIMPLE DE WEB ESCOLAR
UNA PROPUESTA SIMPLE DE WEB ESCOLAR

Cada centro tiene sus peculiaridades y está claro que acertar con el modelo adecuado tiene
más que ver con el conocimiento del centro que con unas plantillas más o menos logradas. A
pesar de ello, disponer de unas pistas que nos orienten al iniciar el trabajo puede ahorrarnos
mucho trabajo. Para ello se ha recogido una plantilla inicialmente elaborada por Luis García
Orbaneja en el CPR de Cangas del Narcea, readaptada por José Mª Lozano en su etapa en el
CPR de Alcobendas y, finalmente remozada para este curso. La idea es antigua y, de hecho
uno de los trabajos recomendados es cambiar la apariencia gráfica para adaptarla a un diseño
más actual, pero considero que sigue siendo interesante en cuanto a estructura y por ello se
ha incluido con permiso del creador de la misma.

La propuesta se centra en la creación de una hipotética web de un centro de primaria con una
versión sin marcos y otra con marcos que puedes ver en línea. Para que no tengas que
salvar los archivos uno a uno dispones en el CD-ROM de un par de archivos comprimidos que
incluyen todos los ficheros necesarios para cada caso:

• Web sin marcos
• Web con marcos

Una vez descomprimas el archivo se creará una carpeta independiente para cada uno de los
casos. Si tu nivel es inicial pueden servirte como orientación para el trabajo y si es avanzado,
dado que el posicionamiento está realizado con tablas, pueden constituir un estupendo
material para que intentes reproducir las estructuras sustituyendo las tablas por
posicionamiento mediante CSS.

FUENTES DE IMÁGENES LIBRES DE DERECHOS
FUENTES DE IMÁGENES LIBRES DE DERECHOS

La evolución de la tecnología ha hecho que las cámaras digitales estén presentes de forma
cotidiana en prácticamente todos los entornos, por lo que es muy probable que, cuando el
contenido de nuestra web se refiera al entorno cercano, seamos nosotros los autores de las
imágenes. No está de más recordar que la alta resolución de las cámaras actuales trae
aparejado un tamaño innecesario para la visualización en la web, por lo que es imprescindible
tratar las imágenes antes de incluirlas en nuestras páginas.

Habrá ocasiones en las que las fuentes no estén accesibles para que podamos captar las
imágenes con nuestras cámaras, pero en ese caso podemos recurrir a algunos de los sitios
dedicados a compartir imágenes libres de derechos. Aquí tienes algunos enlaces que son
bastante estables, aunque podría ocurrir que alguno de ellos deje de estar operativo en el
futuro. La mayoría de ellos requieren el registro como usuario y es conveniente leer las
condiciones de uso, que suelen requerir que se cite la fuente de la imagen.

Recursos útiles

3 de 12

CREAR UN BOOKMARLET PARA CAMBIAR ELEL
CREAR UN BOOKMARLET PARA CAMBIAR
TAMAÑO DE LA VENTANA DEL NAVEGADOR
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:

1. Crea un marcador o favorito nuevo con una página cualquiera
2. Pasa a ADMINISTRAR MARCADORES u ORGANIZAR FAVORITOS según te encuentres en

Mozilla/Firefox o Internet Explorer

3. Pulsa con el botón derecho sobre el marcador/favorito que acabas de crear y elige

4. Renómbralo y en el campo UBICACIÓN /DIRECCIÓN URL (SEGÚN EL NAVEGADOR) sustituye la

propiedades
dirección por el siguiente código javascript:resizeTo(800,600)

5. En Mozilla arrastra el nuevo marcador a la BARRA DE HERRAMIENTAS PERSONAL
6. En Firefox arrastra el nuevo marcador hasta la BARRA DE HERRAMIENTAS DE MARCADORES
7. En Internet Explorer muévelo a la carpeta VÍNCULOS

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.

Recursos útiles

4 de 12

GENERADOR DE FAVICON
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 Internet Explorer es necesario
que la página esté en línea y se haya guardado en los favoritos.

Podrías conseguir un icono personalizado para tu web creando una imagen de 32x32 píxeles en
color real y guardándola en formato png con el nombre favicon.png
Una vez hecho esto tendrás que incluir en la cabecera de la página, antes del cierre </head> el
siguiente código:
<link rel="shortcut icon" href="favicon.png" type="image/png"> (suponiendo que lo
has guardado en la misma carpeta que la página o bien la ruta relativa que le corresponda si
está en otra carpeta)

Como ves no es una tarea
excesivamente complicada, pero
si quieres incluso ahorrártela
puedes recurrir a un generador
en línea que encontrarás en
http://www.html-
kit.com/favicon/

En este caso tendrás que elegir
un archivo de tu disco, enviarlo
pulsando generate favicon.ico y
tras comprobar el efecto en la
vista previa descargarlo con el
botón download favicon.

El archivo que se descarga es un zip del que el único archivo que realmente nos interesa es el
que se llama favicon.ico que deberemos copiar en la carpeta de nuestro sitio.
El código que habrá que añadir en este caso es <link rel="shortcut icon"
href="favicon.ico"> (o la adaptación de la ruta correspondiente según el lugar en que
hayamos guardado la imagen)

EXTENSIONES
EXTENSIONES

Si ya eres usuario de Mozilla Suite o Mozilla Firefox estarás acostumbrado a las extensiones.
Por si no lo eres llamamos extensiones a
pequeños fragmentos de código que
incorporan al programa alguna funcionalidad
que este no contempla. N|VU, al basarse en
código procedente del proyecto Mozilla,
comparte con éste la forma de instalar las
extensiones que, básicamente, consiste en:

• Localizar y descargar en nuestro disco

un archivo con extensión xpi

• Utilizar

HERRAMIENTAS

la opción de menú
EXTENSIONES y pulsar

el botón
para localizar en
nuestro ordenador el archivo que

Recursos útiles

5 de 12

hemos descargado.

• Una vez hecho esto nos informará de que la instalación de la extensión constituye un
peligro potencial al introducir código ajeno al programa. Si hemos decidido seguir

adelante pulsaremos nuevamente
para que la extensión se instale definitivamente.

y tendremos que reiniciar el programa

Si comprobamos que la extensión ha provocado una cierta inestabilidad del programa o falla
mucho podemos desinstalarla siguiendo el mismo procedimiento, aunque en este caso, al
encontrarse ya instalada aparecerá en el listado de "piezas" añadidas al programa y tendremos
que señalarla allí para proceder a su desinstalación.

Dado el escaso tamaño de las extensiones he considerado que no es conveniente incluirlas en
el CD, puesto que