Instrucciones para la
elaboración de la página web
Miembros
del Grupo de Trabajo:
José Antonio Téllez Muñoz (Coordinador)
Ángel Espinosa Pacheco
Diego García Espejo
José María Santaella González
ÍNDICE
0. INTRODUCCIÓN... 2
1. SOLICITUD DE LA DIRECCIÓN WEB... 2
2. CONFIGURACIÓN DE FILEZILLA PARA ACCER A AVERROES POR SFTP... 4
3. ELABORACIÓN DE LA PÁGINA WEB CON FRONTPAGE... 6
3.1. Creación de la página inicial con página de marcos... 6
3.2. Llenar de contenidos las páginas en blanco... 9
3.2.1. Creación de tablas para estructurar los contenidos ... 10
3.2.2. Insertar imágenes ... 11
3.2.3. Insertar texto ... 11
3.3. Creación del menú en el “marco esquema”... 12
3.3.1. Insertar botón interactivo... 13
3.3.2. Insertar hipervínculo... 16
0. INTRODUCCIÓN
En este documento detallaremos los pasos a seguir para crear la página web: 1. Solicitud de la dirección web.
2. Configuración de Filezilla para acceder a Averroes por SFTP. 3. Elaboración de la página web con Frontpage.
4. Actualización de la web en red con Filezilla.
1. SOLICITUD DE LA DIRECCIÓN WEB
La Junta de Andalucía a través de la Consejería de Educación cuenta con una Red Telemática, la Red Averroes. Todos los colegios tenemos opción de solicitar una dirección web a dicha red y una vez creada podemos solicitar la inclusión de nuestro colegio en la red, contando entonces con un vínculo que hace accesible nuestra web a todos los interesados.
El proceso de solicitud es muy sencillo y está claramente explicado en la web de Averroes:
http://averroes.ced.junta-andalucia.es/ Entramos en el vínculo Servicios:
Las claves de centro se solicitan de manera telefónica a los teléfonos de contacto y apoyo técnico que ofrece la Junta en esa misma página (cuando utilices estos recursos comprueba que no se hayan producido cambios en los datos de contacto):
Teléfonos y e-mail del soporte técnico de la Delegación de Cádiz
Provincia Teléfono y E-mail Persona de contacto
Cádiz 956 006 815 / 956 006 816
sptcadiz.averroes@juntadeandalucia.es
2. CONFIGURACIÓN DE FILEZILLA PARA ACCER A AVERROES POR SFTP1
En las siguientes imágenes pretendemos proporcionar una guía gráfica para la conexión por SFTP al servidor Averroes. Hemos escogido el cliente filezilla porque es gratuito y se encuentra disponible tanto para ordenadores cuyo sistema operativo sea Linux como para aquellos que usen Windows. Cuando se inicia el programa, hemos de pulsar en Gestor de sitios:
Seguidamente creamos un nuevo perfil para la conexión a Averroes pulsando en Nuevo sitio:
1 Los contenidos de este apartado lo hemos extraido del portal de Averroes: Servicio a Centros – Alojamiento de
Página Web – Configuración de Filezilla:
http://averroes.ced.junta-andalucia.es/averroes/impe/web/contenido?pag=/contenidos/portada/servicios/Seccion/ServiciosCentros/confilezilla &idMenu=mE5&idSeccion=29970
Rellenamos la casilla Servidor con la IP 217.12.18.73 para conexiones desde fuera de Red
Corporativa y con la IP 10.227.227.91 para conexiones desde dentro de Red Corporativa. Es
fundamental indicar que el Puerto es el 23 . Además, elegimos SFTP en el Tipo de servidor y normal en Modo de acceso . En la imagen, en la casilla Usuario aparece 12345678 , secuencia
que hemos de cambiar por el código del centro correspondiente.
Y ya solo queda pulsar en Conectar.
3. ELABORACIÓN DE LA PÁGINA WEB CON FRONTPAGE
Todas las páginas webs tienen una página inicial, esa página se tiene que llamar forzosamente index.htm o index.html. Para crear nuestra página nosotros hemos elaborado una página de marcos que nos permite estructurar el contenido en tres marcos específicos: un encabezado y un esquema, que siempre estará visible y un marco central en el que aparecerán los contenidos vinculados a los distintos apartados del esquema.
3.1. Creación de la página inicial con página de marcos
El procedimiento de creación de una nueva página es muy sencillo. Tan sólo tenemos que abrir el programa Frontpage, ir a Archivos y pinchar en la opción: Nuevo. A la izquierda de la pantalla aparece un menú con diferentes opciones: página en blanco, archivo de textos… y más plantillas de página.
Crear una página plana es muy sencillo, tendríamos que pinchar en la opción página en blanco. Como nuestra intención es crear una página de marcos pinchamos en la opción más plantillas de página.
Esquema de contenidos
Encabezado
Al pinchar en más plantillas de páginas nos aparece un menú flotante en medio de la pantalla, tenemos que pinchar en la opción Páginas de marcos y en nuestro caso hemos elegido la opción titular y contenido:
Al pinchar en la opción Titular y contenidos nos aparece en pantalla lo siguiente:
Esto nos permite partir de páginas en blanco ya elaboradas o rellenar cada uno de los huecos con la opción nueva página. Si acabamos de empezar, lo que tenemos que hacer es pinchar en nueva página en los tres huecos y cada una de esas páginas las tenemos que guardar con un nombre. Nosotros las hemos llamado inicio a la parte central, encabezado al marco superior y esquema al marco de la izquierda. A la página total que incluye a esas tres subpáginas la llamaremos index.htm.
3.2. Llenar de contenidos las páginas en blanco
El trabajo que nos queda ahora es muy sencillo, tan sólo tenemos que ir rellenando cada una de las páginas en blanco que tenemos. Nosotros aconsejamos insertar en cada una de las páginas en blanco una tabla a la que le pondremos los bordes con grosor 0. Esto lo hacemos para estructurar de manera adecuada los diferentes contenidos que introduzcamos en la página (texto, imágenes, etc.). Recuerda que todos los contenidos que introduzcas los tienes que tener guardados en las carpetas de archivos de la web que la puedes encontrar en “Mis documentos” – “ Mis sitios Web”. Aconsejamos ir creando carpetas específicas para cada uno de los bloques de contenidos que desarrollemos: proyecto educativo, profesorado, días conmemorativos, etc. En ellas guardarás la página correspondiente y las imágenes y archivos que utilices (pdf, power points, etc.).
A continuación explicamos detalladamente cómo introducir la tabla en la página en blanco y cómo insertar las imágenes. El procedimiento es muy sencillo, funciona prácticamente igual que un procesador de textos (Word).
En el encabezado podemos apreciar claramente la división de la página en columnas y filas.
En la carpeta images hemos ido guardando las imágenes que hemos utilizado en el index.
3.2.1. Creación de tablas para estructurar los contenidos
No situamos en la página en la que vamos a trabajar. Nos vamos al menú superior y pinchamos en Tablas – insertar tablas. Creamos las columnas y filas que consideremos para estructurar los contenidos que vayamos a incluir.
3.2.2. Insertar imágenes
En el menú superior tenemos que ir a “Insertar” > “Imagen” > “Desde archivo…” Previamente hemos tenido que guardar los archivos en su carpeta correspondiente, en caso contrario al colgar la página en red la imagen no será visible y aparecerá un aspa en rojo.
3.2.3. Insertar texto
Para insertar textos simplemente tenemos que escribir lo que deseemos en la página en blanco que aparece en pantalla. También tenemos la opción de copiar y pegar que encontramos en el menú superior en “Edición”. Os recordamos que nosotros solemos insertar tablas para estructurar el contenido de texto y las imágenes. Esto también nos puede servir para jugar con la apariencia estética de la página: cambiando por ejemplo los colores de fondo de las celdas de las tablas.
La apariencia final de la página dependerá de nuestro gusto estético y de la capacidad que tengamos para crear un estilo agradable.
Aconsejamos mantener un mismo estilo en todas las páginas: mantener formatos y tipos de letra, colores, etc. Para ello nosotros lo que hemos ido haciendo, una vez que teníamos definida la primera página copiarla entera y cambiarle el nombre para crear una nueva.
Este estilo sencillo es el que hemos elegido. Copiamos la página entera y la pegamos en una en blanco: por ejemplo, “Proyecto educativo”, y ya sólo nos queda copiar el nuevo contenido que consideremos apropiado y guardar la nueva página en la carpeta que le corresponda. No olvides organizar los contenidos: web, archivos de imagen, pdf, etc. en una carpeta.
3.3. Creación del menú en el “marco esquema”
Nuestra opción ha sido crear un menú que nos sirva para organizar los contenidos de la web. Lo primero que tenemos que tener claro es la estructura de contenidos que queremos que aparezca en la web y el procedimiento de creación es muy sencillo.
El menú lo podemos elaborar de dos formas.
3.3.1. Insertar botón interactivo
En el menú superior vamos a “Insertar” > “Componente Web” > “Botón interactivo”. Menú de contenidos
Al pulsar finalizar en la ventana anterior nos aparece una nueva ventana con una lista de diferentes botones. Elegimos el que más nos guste y aceptamos.
Tenemos opción de cambiar su formato: color, tipo de letra, etc. Haciendo doble clic en el botón o pulsando en el botón derecho nos aparece una ventana llamada: Propiedades de botón activable. Elegimos el color, tipo de letra, color de efecto.
Y ya lo único que nos queda es establecerle un vínculo al botón. El botón estará vinculado a una página que hemos debido crear previamente. Para ello en la ventana anterior pinchamos en examinar y nos aparece una ventana tal cómo la que tenemos en la imagen siguiente. En primer lugar elegimos la página a la que la queremos vincular.
Y antes de dar a aceptar tenemos que definir el marco en el que queremos que aparezca la nueva página. Para ello en la ventana anterior pinchamos en marco de destino, nos aparece la siguiente ventana, pinchamos en el marco central y damos a aceptar. Luego aceptamos de nuevo y el vínculo está establecido.
En “Archivo” > “Vista previa en el explorador” podemos visualizar la página tal como quedaría definitivamente y comprobar que el vínculo funciona correctamente.
3.3.2. Insertar hipervínculo
La otra opción es mucho más sencilla, tan sólo tenemos que escribir el texto del vínculo, por ejemplo: Día de la paz. Ir al menú superior pinchar en “Insertar” > “Hipervínculo” y buscar la página a la que la queremos vincular. No olvidar, tal como hemos hecho en el apartado anterior, definir el marco de destino al que queremos que vaya la página vinculada.
Esta opción de insertar hipervínculo la podemos utilizar en todas las páginas de contenido que creemos: p. ej. En caso que queramos establecer vínculos con páginas de interés.
4. SUBIR LA WEB A LA RED CON FILEZILLA
Cada vez que vamos haciendo cambios en la página web lo tenemos que subir al servidor, en nuestro caso de Averroes. Necesitamos utilizar para ello el programa Filezilla de distribución gratuita (seguir el procedimiento de configuración explicado en el apartado 2). Una vez que lo abrimos después de su configuración, el programa guarda las claves de manera automática y la conexión en futuras utilizaciones es muy sencilla.
Al abrir el programa nos aparece la siguiente ventana. En el Sitio Local encontramos todas las carpetas y archivos de nuestro equipo, tal como los podemos encontrar en el explorador de window. En la cuadrícula inferior derecha encontramos las carpetas y archivos de nuestra web, si no aparecen tenemos que hacer doble clic en la carpeta “Mis sitios Web” del “Sitio local”.
Hasta ahora tan sólo tenemos los archivos y carpetas visibles que tenemos grabados en nuestro ordenador. Para subirlos tenemos que conectar el programa a la red. Esto lo realizamos pulsando el botón que encontramos en la barra superior “Abrir el Gestor de Sitios”.
Sitio local
Carpetas y archivos de nuestra web Gestor de Sitios
Al pulsar en él nos aparece por defecto la siguiente carpeta, tan sólo tenemos que pulsar conectar.
Al pulsar se nos actualiza en la cuadrícula de la derecha los archivos de nuestra web que hemos subido ya al servidor. En la primera conexión obviamente no tendremos archivos subidos.
Carpetas y archivos de nuestra web que están en el servidor de Averoes
Para subir los archivos que vamos creando tan sólo tenemos que seleccionarlos de la cuadrícula de la izquierda, mantenerlos seleccionados con el botón izquierdo del ratón pulsado y arrastrar a la cuadrícula de la derecha. Siempre que vayamos introduciendo modificaciones en una página y las vayamos subiendo a la red el programa nos preguntará si queremos sustituir el nuevo archivo por el archivo antiguo que teníamos subido, aceptamos sobrescribir y se producen los cambios. No olvidar nunca subir todas las páginas y carpetas (con sus archivos incluidos: imágenes, pdf, etc.) en las que hemos realizado modificaciones.
Y con esto tenemos el procedimiento global de cómo elaborar una página sencilla con Frontpage. Con la práctica cada vez irás teniendo mayor soltura e irás automatizando todo el proceso de elaboración que es muy sencillo y bastante intuitivo.
