Sesión 7

Contenidos trabajados. (27 de noviembre de 2006)

1.- Revisamos los comentarios realizados en este blog. Los errores cometidos con los vínculos. Algunas configuraciones básicas. La plantilla de este blog (modelo anterior de Blogger).

2.- Hacemos una copia de la carpeta con todo el contenido de nuestro sitio. Configuramos la conexión al servidor remoto para Geocities y hacemos la transferencia de los archivos. Comprobamos que se visualiza.

3.- Explicamos el tema del JavaScript. Manipular (no crear) javascripts ya existentes. Configuramos nuestros accesos protegidos con contraseñas.

4.- Música en la web. ¿Cómo? Archivos sonoros. Formatos de sonido.

5.- Vincular a otro tipo de archivos. Por ejemplo, a un .pdf Crear un .pdf a partir de un documento .doc y vincularlo desde nuestra web.

Sesión 6

Contenidos trabajados. (22 de noviembre de 2006)

1.- Vemos una página web concreta para estudiar qué cosas se pueden implementar en las próximas sesiones. Es la página web del CEPA Colmenar Viejo. Una de las cosas que según los comentarios más gustó y que haremos el próximo día es la posibilidad de proteger determinados espacios con una contraseña de entrada. Os pongo aquí las contraseñas para que las podáis probar: cepacol colmen3 colmen2 colmen1 Con estas 4 contraseñas se accede a cuatro sitios diferenciados... Probadlas.

2.- Hacemos un ejemplo de sitio web con navegación en marcos como lo era el de la página web estudiada.

3.- Nos creamos un BLOG con BLOGGER. Por favor, colocad un comentario a esta entrada haciéndonos partícipes a los demás de la dirección de vuestro blog.

4.- Vemos los "mapeados" de una imagen. Hacemos un ejemplo de mapeado a partir de un mapa de España.

Sesión 5

Contenidos trabajados. (20 de noviembre de 2006)

1.- Vemos un poco por encima este blog y cómo se participa a través de los comentarios. Se hace doble clic sobre la palabra Comentarios que viene al final de cada artículo y se escribe en el cuadro de texto.

2.- Vemos la página web del curso con los apuntes mucho más detallados de lo que podemos expresar aquí.

3.- Vemos la cadena de caracteres especiales para colocar "en dónde no hay nada". Explicación de las tres utilidades.

4.- Colocamos una tabla con una celda única para colocar el contenido principal de cada uno de los documentos.

5.- Listas numeradas o no numeradas. Etiquetas <ol> <ul> y cada ítem con <li>

6.- Puntos de fijación con nombre o anclas para navegar entre puntos dentro de un mismo documento.

7.- Imagen de sustitución o roll-over.

5.- Texto en movimiento con la etiqueta <marquee>

Sesión 4 (... y dos)

Contenidos trabajados. (15 de noviembre de 2006)

1.- Parece que tenemos problemas en darnos de alta todos en YAHOO / GEOCITIES. Puede ser un tema del aula desde la que lo estamos haciendo. Se recomienda hacerlo desde otros sitios (vivienda de cada uno o el centro de trabajo).

2.- Imágenes.
En la sesión anterior obtuvimos unas fotos de cada uno de los participantes para incluirlas en la web. Previamente hay que tratarlas. Hay que hacer dos cosas: reducirlas en tamaño físico (ancho y alto) y rebajar su peso en bytes. El primer aspecto se consigue en un programa gráfico como Photoshop / Gimp / Paint... cambiando los cm. o los píxeles de ancho y dejando que el programa calcule de manera automática (proporcional) la otra dimensión. Yo he dejado las imágenes a 500 píxeles de ancho (y 375 de alto)

y, luego, Guardarla para web. En este caso el formato tiene que ser JPG (es una foto con tonos) y la calidad de guardado puede ser alta... Comprobar que el peso no sea superior a 50 KB. Lo que no hay que hacer nunca es reducir las dimensiones "a mano" estirando los manejadores con el cursor del ratón.

3.- Mejoramos nuestra sencilla pero eficaz "barra de navegación". ¿Cómo? Haciendo que se vean todos los documentos que forman nuestro sitio. Hacemos, por tanto, una tabla con una fila y tantas celdas como documentos tengamos. Si la celda, del documento en el que estamos en cada momento, la coloreamos con un color de fondo, podemos convertirlo en un sencillo señalizador de posición. Al enlace podemos ponerle un title para que aparezca un letrerito que nos amplíe la información del vínculo.

4.- Hacemos el álbum de fotos desde la opción Comandos > Crear álbum de fotos web... Para que esta opción esté disponible, tenemos que tener abierto en el Dreamweaver un documento cualquiera y, en el ordenador, instalado el FireWorks que es el programa gráfico de Macromedia. Vemos las carpetas y archivos generados y la forma en que se pueden editar para mejorar el aspecto que inicialmente se nos ofrece.

Sesión 4 ( a medias)

Contenidos trabajados. (15 de noviembre de 2006)

1.- A la espera de hacerlo con menos sueño... mañana por la tarde... he publicado una especie de resumen con el álbum de fotos enlazado en la SESION 4.
Verlo en:
(Nota: Recordad que ya no se va a ver)

http://www.educa.madrid.org/web/colegio3/curso/

2.- Han publicado también, Gema en

http://www.educa.madrid.org/web/colegio3/gema/

y Ana Isabel Gutiérrez en

http://www.educa.madrid.org/web/colegio3/anais/

Mañana más...

Sesión 3

Contenidos trabajados. (13 de noviembre de 2006)

1.- Recordatorio de lo trabajado en la sesión anterior.
Fundamentalmente, que la edición del sitio web es independiente de la herramienta que empleemos.
Es decir, lo importante es el resultado de lo que hemos hecho, bien con el Bloc de Notas, bien con el Dreamweaver, bien con el Front Page,...
Incluso podemos mezclar varios editores. Empezar con el Bloc, seguir con el Dremaweaver, volver al Bloc de Notas,...
Al final, se obtiene una carpeta (la carpeta raíz del sitio con los documentos .htm vinculados perfectamente y sus subcarpetas con las imágenes, otros archivos,...)

2.- Hemos intentado darnos de alta en YAHOO (algunos ya tenían cuenta de correo con este servidor) y, posteriormente, activar la página web que se ofrece en Geocities.
Al final de este proceso inicial, obtenemos una página web pendiente para ser modificada con las herramientas propias de Yahoo... o con las nuestras...
Aspecto de la página sin editar:
http://es.geocities.com/angelpupe/
http://es.geocities.com/angpupe/
Quedan pendientes para el próximo día algunos participantes.

3.- Modelos de navegación dentro de un sitio web.
- Abrir en ventana nueva
- Misma ventana.
- Con marcos. Ventajas: no hay pérdida, siempre sabemos dónde estamos. Inconvenientes: No podemos referenciar con un vínculo un punto concreto del sitio porque la dirección URL es fija, no cambia,...
- Sin marcos pero aprovechando los aspectos positivos de la referencia de los vínculos siempre visibles.

Navegación con marcos: http://www.arp.jazztel.es/index_a.htm

Navegación sin marcos pero con la visión de todos los vínculos continuamente: http://www.educa.madrid.org/web/cap.madridcentro/

El marco vertical izquierdo se ha sustituido por una celda vertical de tabla.

4.- Realización de una sencillísima (pero muy eficaz) "barra de navegación". Una tabla (<table>) horizontal de una fila (<tr>) y tres celdas (<td>) y con los vínculos de anterior, inicio y siguiente.

5.- Vemos el código generado al construir la tabla. Las tablas son muy importantes en la edición web. Muchos de los problemas de diseño se resuelven con tablas.
Dentro de los atributos de la tabla, y de sus celdas, está el width (anchura) que se puede definir en píxeles pero que es muchísimo mejor definir en porcentaje. El atributo height o altura raramente se define (va cogiendo la altura que necesite en función del contenido que coloquemos...) el atributo align para alinear la tabla, el border para establecer si queremos que la tabla tenga o no tenga borde y cómo de grueso...

7.- Creamos varios archivos y los metemos en la carpeta paginas. Uno nuevo lo dejamos fuera y lo llamamos index.htm Éste es el documento de inicio de nuestro sitio (por acuerdo, se decide que el documento inicial de todo sitio web se llame index.htm).

8.-Hacemos un "refresh" automático para que el documento index.htm salte a la pagina1.htm pasados los segundos que establezcamos.
Lo hacemos desde la ruta Insertar > HTML > Etiquetas Head > Actualizar

9.- Publicamos en un sitio de prueba. Lo hacemos con EducaMadrid. Las claves para hacerlo no las colocamos aquí por motivos de seguridad.
Nuestras páginas se verán en las siguientes direcciones:
(NOTA: Un fallo en el servidor de EducaMadrid ha ocasionado un borrado total de todas las páginas. Los apuntes desarrollados los he recuperado y los he publicado en el CNICE pero vuestros trabajos no los tenía en mi poder para poderlos cargar en otro servidor... Lo siento.)
http://www.educa.madrid.org/web/colegio3/absantos/
http://www.educa.madrid.org/web/colegio3/aguedal/
http://www.educa.madrid.org/web/colegio3/agurubio/
http://www.educa.madrid.org/web/colegio3/aigromero/
http://www.educa.madrid.org/web/colegio3/airomero/
http://www.educa.madrid.org/web/colegio3/alfredo/
http://www.educa.madrid.org/web/colegio3/alicia/
http://www.educa.madrid.org/web/colegio3/angel/
http://www.educa.madrid.org/web/colegio3/daniel/
http://www.educa.madrid.org/web/colegio3/evaisabel/
http://www.educa.madrid.org/web/colegio3/fatimavz/
http://www.educa.madrid.org/web/colegio3/fermin/
http://www.educa.madrid.org/web/colegio3/isabelbe/
http://www.educa.madrid.org/web/colegio3/javier/
http://www.educa.madrid.org/web/colegio3/jorge/
http://www.educa.madrid.org/web/colegio3/joselu/
http://www.educa.madrid.org/web/colegio3/luis/
http://www.educa.madrid.org/web/colegio3/oscarrob/

Sesión 2

Contenidos trabajados. (8 de noviembre de 2006)

1.- Recordatorio:
<html>
<head>
<title>Mi primera página web</title>
</head>
<body bgcolor=”#ff453b”>
<h1><center>Bienvenido a mi página web</center></h1>

<p> Escribimos un párrafo todo lo largo que queramos. Si, en un momento, deseamos hacer un salto de línea introducimos la etiqueta <br />

Lo de la barra del siete al final y tras un espacio vacío es por el tema del lenguaje XHTML (eXtended Hyper Text Markup Language). Cuando acabemos el párrafo introducimos la etiqueta de cierre: </p> que no es obligatoria.

<p><font color=”#ff0000”> Este texto se verá rojo</font></p>

</body>
</html>

2.- A punto de haber visto en la primera sesión:
- El manual de los colores en la página del ponente. Ver el documento de los códigos-nombre y su equivalencia con el código hexadecimal.
Número de colores en hexadecimal: 16 x 16 x 16 x 16 x 16 x 16 = 16 777 216
- Ver el manual de lenguaje HTML y su resumen de etiquetas.

3.- Crear un nuevo documento (palabra clave: documento). Lo llamamos hola2.htm y lo guardamos en la misma carpeta, en el mismo directorio.
Escribimos las mismas etiquetas básicas ya vistas y le ponemos como título: Mi segundo documento web.

4.- Aprendemos por vez primera las etiquetas que nos piden en un comentario de un blog en Blogger.
A saber (lo podemos mirar): <b> de bold <i> de italic, bastardilla o “cursiva” y <a> de a… enlace a…

5.- Para implementar la última etiqueta guardamos el documento hola2.htm y vinculamos a través de un vínculo de texto ambos documentos. Ir de un documento al otro y volver desde el otro al uno.

6.- Nos traemos desde internet una imagen pequeña. Tipo .gif, .png o .jpg

7.- Una vez localizada la imagen, guardarla en la carpeta personal del curso al mismo nivel que los documentos hola.htm y hola2.htm

8.-Meter la imagen con el código correspondiente
<img src=”nombreimagen.png” /> (etiqueta perfeccionada del XHTML)

9.- Podemos centrar la imagen con la etiqueta ya conocida <center>

10.- Podemos hacer un vínculo a una página externa:
10.1.- Con su propia URL.
10.2.- Con un texto cualquiera.
10.3.- Con una imagen o logotipo.

11.- Implementarlo con el vínculo a GOOGLE.

12.- Comenzar a emplear el Dreamweaver. Definir el sitio.

13.- Llamamos al sitio Curso Páginas Web Noviembre. Abrimos los dos documentos e introducimos caracteres especiales en el modo gráfico para ver cómo se traducen en el código. Los caracteres especiales son los acentos, las eñes,...

Sesión 1

Contenidos trabajados. (6 de noviembre de 2006)

1.- Presentación del curso y del ponente.

2.- Presentación de los asistentes. Conocimientos previos.

3.- Visita a cualquier sitio web. Navegadores. Firefox / Mozilla / Explorer

4.- Botón derecho del ratón Ver código fuente.

5.- Lenguaje HTML Lenguaje marcado de hiper texto.

6.- Editores web. El más sencillo es el Bloc de Notas. No se considera editor.

7.- Otros editores… Front Page. Composer.
Navegadores:
Internet Explorer (*)
Mozilla (**)
Firefox
...
Editores:
Bloc de Notas
Front Page (*)
Composer (**)
Dreamweaver
NVU
...

8.- Nos creamos en D una carpeta para guardar los trabajos.

9.- Hacemos una página web con el Bloc de Notas
<html>
<body>
Hola
</body>
</html>

10.- Estructura del etiquetado.

11.- Lo guardamos como hola.htm También podíamos haberlo guardado con la extensión .html

12.- Abrimos el Word. Escribimos: Hola. Lo guardamos como hola_doc.htm

13.- Comparamos el tamaño. Vemos el código generado. Sacamos conclusiones.

14.- Hablamos de Local y Remoto. Servidores:
EducaMadrid:
Perfecto para la página web del centro.
No tanto para la página web personal. No admite FTP.
CNICE:
Muy bueno para la página web personal.
Sólo se concede al profesorado de centros públicos.
Servidores privados:
Geocities / YAHOO. Publicidad.
Espacio ofrecido por los proveedores de internet.
Otros alojadores privados previo pago.
...
Importancia de la ligereza en el tamaño de los archivos.
Los nombres de los archivos y carpetas son también muy importantes.

15.- Abrimos de nuevo con el Bloc de Notas y escribimos un par de líneas.
Guardamos de nuevo. Vemos qué pasa.
Introducimos alguna etiqueta más:
<br>
Guardamos. Vemos qué pasa.
Etiqueta que no tiene cierre.
Nuevas normas: Hablamos del lenguaje extendido XHTML
Incorporamos la barra. Observamos qué pasa.
Incorporamos más etiquetas:
<h1> para el título.
<center> para centrar la línea
<p> de párrafo

16.- Incorporamos la cabeza el <head> y, dentro del head, el <title> Observamos la barra del título.

17.- Ponemos un atributo a una de las etiquetas. Podemos empezar con el color.
<body bgcolor=”red”>
Probamos con otros colores.

18.- Código hexadecimal de los colores.
<body bgcolor=”#ff0000”>
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
Lo nulo es 00, luego, 01, 02, 03, 04, 05,…, 09, 0a, 0b,…,0f, 10, 11, 12,…
Lo máximo es ff
Y en este orden: rojo-verde-azul en inglés red-green-blue o código RGB
Rojo: f0000
Verde: 00ff00
Azul: 0000ff
Blanco: ffffff
Negro: 000000
Y todos los colores intermedios que se nos ocurran…

19.- Etiqueta font con su atributo de color.
<font color=”#ffff00”></font>