MANUAL AUTOFORMACIÓN DEL PROFESORADO EDICIÓN DE PÁGINAS WEB

Transcripción

1 2013 MANUAL AUTOFORMACIÓN DEL PROFESORADO EDICIÓN DE GRUPO DE TRABAJO CONSERVATORIO PROFESIONAL DE MÚSICA

2 ÍNDICE Introducción...Pág. 2 Descarga e instalación... Pág. 4 Desarrollo Joomla.. Pág. 10 Edición y mantenimiento de la web frontpage. Pág.16 Dominio y Hosting. Pág. 27 2

3 1. INTRODUCCIÓN. Este grupo de trabajo se creó para llevar a cabo el diseño y la elaboración de la página web del conservatorio profesional de Música de El Ejido (Almería). El impacto que la página web puede generar en la comunidad educativo puede llegar a ser bastante significativo. El uso de recursos TIC apoyan los aprendizajes tanto fuera así como dentro del aula. Actividades, información, aclaración de aprendizajes, intercambio de uso de recursos didácticos o de material administrativo, son solo algunas de las posibilidades que esta nueva herramienta ofrece a toda la comunidad. Para poder llevar a cabo esta propuesta se han seguido las pautas establecidas en el proyecto previo en el que se detallan los objetivos que se pretende conseguir, la justificación y la metodología para desarrollar el proyecto, centrada en una serie de reuniones del grupo secuenciadas en los tres trimestres del curso. En el documento que a continuación se desarrolla quedan establecidos los principales ejes sobre los que se ha apoyado el trabajo. De una parte la descarga e instalación del conjunto de programas que forman parte de joomla, de otra la creación de los diferentes artículos, menús y módulos de la página web en un servidor local, por otra parte queda establecido el mantenimiento y edición de contenidos desde la propia página web o desde el alojamiento una vez exportada a internet. Por último concretaremos la gestión del hosting desde un servidor privado, valorando las distintas opciones que nos ofrece en relación a SEO y las diversas opciones de configuración. La gestión, mantenimiento y acceso a la página durante el desarrollo del proyecto ha sido realizado por el grupo de trabajo, una vez finalizado se traslada dicha gestión a la directiva del centro educativo. 3

4 2. DESCARGA E INSTALACIÓN. A continuación detallamos los programas necesarios para crear la página web una vez decidido que el sistema a usar será Joomla. - En primer lugar hemos de descargar wamp server desde la página del editor: WampServer es un gestor de programas que engloba a Apache, PHP y MSQL. Apache, como servidor web; MySQL, como gestor de bases de datos; PHP lenguaje de programación. Para descargar WampServer debemos de hacer click sobre Donwload y elegir entre las opciones, el sistema operativo del equipo en el que lo vamos a instalar, deberemos tener en cuenta sí nuestro sistema operativo es de 32 o 64 bit, ya que instalar un Wamp que no esté diseñado para un sistema operativo concreto creará conflictos y no funcionará con corrección. En la siguiente imagen se nos muestran las diferentes opciones de descarga que nos ofrecen. 4

5 Una vez elegida la opción adecuada se nos requerirá una serie de datos que deberemos rellenar, sobre todo los campos obligatorios: A continuación se inicia la descarga e instalación de Wampserver, una vez concluidas ambas y si no ha existido ningún tipo de conflicto nos deberá aparecer la ventana de confirmación: 5

6 Previamente el instalador nos pide qué navegador utilizar como predeterminado. En este caso se selecciona explorer. En la barra de herramientas de abajo se ubica el icono de wamp. Se inician los servicios y se comprueba que está bien instalado escribiendo localhost en el explorador 1. Una vez instalado wampserver en el ordenador procederemos a descargar e instalar joomla desde la página 1 Posteriormente concretaremos el uso y la ubicación de localhost 6

7 En la actualidad existen versiones de Joomla 3.0, en nuestro caso, al comenzar el proyecto, no existía dicha versión, es por ello que instalamos la versión Para descargar e instalar la versión basta hacer clic sobre la versión que deseamos descargar y en el formato que deseemos hacerlo (zip, tar ). Una vez descargada, la descomprimiremos en la carpeta C:\wamp\www Posteriormente ya podemos proceder a la instalación de joomla, la cual está formada por 7 pasos: idioma, comprobación de preinstalación, licencia, base de datos, configuración ftp, configuración y finalizar. 7

8 En la comprobación de la preinstalación, deberemos tener en cuenta las recomendaciones de instalación que se nos ofrece y si fuese necesario hacer los cambios oportunos a través de Wamp: En relación al siguiente paso licencia tan solo deberemos leer y comprender el uso de joomla, una vez aceptada configuraremos la base de datos estableciendo usuario y contraseña. 8

9 En el paso configuración ftp se configuran elementos que suelen precisar los usuarios más aventajados, en nuestro caso y tal y como sugiere el programa de instalación, omitimos este paso y procederemos así a la configuración: Establecemos aquí diversos datos como el nombre del sitio, el mail, o el Nick de usuario del administrador de la futura página web. En el paso finalizar, nos recuerda que debemos de borrar el histórico de la instalación para no crear conflictos. 9

10 De esta forma joomla queda instalado y ya podemos entrar en todos los servicios que nos ofrece a través del usuario y Nick que hemos creado. Para ello escribiremos en la barra del navegador: localhost/ conservatorioelejido/ administrador 10

11 3. DESARROLLO JOOMLA Según hemos establecido ya Joomla utiliza wampserver para funcionar en un servidor local (ordenador personal), una vez que la página se aloja en un servidor externo, no necesitaremos activar wamp para acceder a zona de administración (Back end) de nuestra página web. A continuación mostraremos los menús, extensiones, artículos, módulos de nuestra página web. Aunque el manejo de joomla es bastante intuitivo debemos familiarizarnos con los iconos y los procedimientos de creación de los diferentes apartados. En esta página web partimos de la elección de la plantilla Tk minimus black como base para desarrollar la web. Esta plantilla es ofrecida gratuitamente por Para añadirla deberemos de hacer click sobre el gestor de plantillas y una vez allí instalar la plantilla y seleccionarla por defecto para nuestro sitio web. 11

12 Una vez instalada la plantilla debemos de gestionar los menús, en el caso de nuestra web, el menú desplegable central es el que mayor número de contenidos tendrá, pero deberemos gestionar todos los menús, independientemente de la cantidad de artículos, desde el gestor de menús. Añadiremos menús en la pestaña insertar, seleccionando en qué sitio de la plantilla queremos establecer el nuevo menú. Al pinchar sobre cada uno de los menús cargaremos los elementos de cada uno de ellos: 12

13 Por otra parte usaremos el gestor de artículos para editar los contenidos de cada uno de los elementos del menú: Con el gestor de extensiones podremos instalar y organizar módulos y plugins, así como las propias extensiones de la plantilla. En el caso de esta web, a través de este gestor, instalamos una agenda llamada icagenda, que nos permite crear y gestionar eventos dentro de un calendario que se muestra en el sitio web. 13

14 En el gestor de usuarios podremos incorporar o suprimir usuarios así como dotarlos de diferentes niveles de acceso. Siempre que se actualiza alguno de estos elementos, sobre todo los que están relacionados con el diseño de la página, podemos haces click en ver sitio para comprobar antes de guardar, los cambios o incorporaciones que hagamos. Con el gestor multimedia podemos subir imágenes o videos al servidor e instalarlos en el menú o con el artículo que estimemos: 14

15 Todo ello y una vez organizado según la arquitectura de la plantilla utilizada construye nuestro sitio web bloqueando los artículos que no queremos que se actualicen, como es el caso del mensaje de bienvenida. 15

16 4. EDICIÓN Y MANTENIMIENTO DE LA WEB FRONTPAGE 4.1 ARTÍCULOS: crear y publicar 1º Para crear un artículo en frontpage, entraremos con el usuario que tiene derecho de administrador. 2º Existen dos vías para comenzar la creación de un artículo: A. En el menú área de trabajo, en la parte inferior izquierda de la página de inicio, seleccionamos crear artículo. B. Desde la sección de la web donde queramos crear el artículo, seleccionando Crear nuevo artículo 16

17 3º En cualquiera de los casos se abrirá la siguiente ventana: -En esta ventana, procederemos a la creación y edición del artículo: 1. Titulo: título del artículo. 2. Alias: nombre del autor del artículo. 17

18 3. Herramientas: algunas de ellas son las propias de un editor de texto, y otras permitirán acciones requeridas en la página web. Las herramientas especiales de más uso son: a) Color verde: herramientas para insertar multimedia (Imagen y videos de flash), plantillas de artículo, línea horizontal e iconos. Para insertar una imagen, aparecerá la siguiente ventana. 18

19 Ver Servidor Abrirá una nueva ventana desde la que podremos seleccionar una imagen que ya se encuentren subidas a la web o subir una imagen nueva. Vínculo Podremos escoger dónde se abrirá el vínculo (en la misma ventana, en una nueva pestaña, etc.) b) Color naranja: Aquí podemos usar las siguientes herramientas: Maximizar: puede usar la pantalla entero para hacer la articulo Vista previa: antes de guardar el artículo, puede ver el articulo como queda antes de publicar Html 5 video: insertar video con formato mpg4. *Proceso similar a la inserción de imágenes. Html 5 Audio: insertar audio con formato mpeg *Proceso similar a la inserción de imágenes. Insert Html code: insertar código externo como youtube, google docs y etc. c) Color rojo: insertar un vínculo. Aparecerá la siguiente ventana: 19

20 En el cuadro URL introduciremos la dirección Web. En la pestaña DESTINO podremos escoger dónde se abrirá el vínculo (en la misma ventana, en una nueva pestaña, etc.) 4. Área de trabajo: espacio para redactar el artículo con ayuda de las herramientas del cuadro anterior. 5. Herramientas opcionales: Admiror Gallery: Insertar fácilmente una galería de fotos, como en sección de galería. Artículo: Hacer un enlace a otro artículo. Imagen: Insertar un imagen. 4º Publicación Una vez creado el artículo, nos deslizaremos hacia abajo en la página hasta ver el cuadro de opciones de publicación: 20

21 Categoría: aquí seleccionamos dónde se va a insertar el artículo. Alias Autor: nombre del autor del artículo. Estatus: hay dos estados que vamos a usar: - Publicado: al momento de guardar el artículo se publica. - Despublicado: se pone el artículo en la categoría, pero solo se tendrá acceso a él cuando se sepa la dirección o desde backpage. 21

22 Iniciar/finalizar publicación: establece unas fechas determinadas de inicio/finalización de publicación del artículo. Acceso: limita el acceso para ver el artículo. UNA VEZ SE RELLENEN LOS CAMPOS NECESARIOS, PULSAR EL BOTÓN GUARDAR DEL FINAL DE LA PÁGINA PARA PUBLICAR EL ARTÍCULO ENLACES DE INTERÉS Y PRÓXIMOS EVENTOS A. AÑADIR UN ENLACE DE INTERÉS O PRÓXIMO EVENTO 1º Para añadir un nuevo enlace a la secciones ENLACES DE INTERÉS o PRÓXIMOS EVENTOS de la página de inicio, seleccionaremos Añadir enlace de interés en el Menú ÁREA DE TRABAJO. 2º Aparecerá el siguiente cuadro: 22

23 Titulo: título del enlace. Alias Autor: nombre del autor del artículo. Categoría: aquí seleccionamos dónde se insertará el enlace, en el cuadro ENLACES DE INTERÉS o en PRÓXIMOS EVENTOS. URL: enlace al contenido, ya sea un enlace a otra web o a algún artículo dentro de la nuestra. Estatus: hay dos estados que vamos a usar: - Publicado: al momento de guardar el artículo se publica. - Despublicado: se pone el artículo en la categoría, pero solo se tendrá acceso a él cuando se sepa la dirección o desde backpage. Campo opcional descripción: puede poner una descripción para facilitar la modificación del enlace. 23 UNA VEZ SE RELLENEN LOS CAMPOS NECESARIOS, PULSAR EL BOTÓN GUARDAR DEL FINAL DE LA PÁGINA PARA PUBLICAR EL ENLACE

24 B. MODIFICAR UN ENLACE DE INTERÉS O PRÓXIMO EVENTO Para modificar enlace existente, pulsamos sobre Modificar enlace en el menú ÁREA DE TRABAJO. A continuación, seleccionamos la categoría en la que se encuentre alojado el enlace (ENLACES DE INTERÉS/PRÓXIMOS EVENTOS). Por último, pinchamos sobre el enlace a modificar y se volverá a abrir la ventana de edición descrita en el punto anterior GALERÍA A. AÑADIR IMAGEN A GALERÍA En el menú ÁREA DE TRABAJO pinchamos sobre Añadir imágenes a galería. 24

25 Se abrirá la siguiente ventana: (en la imagen con la traducción de los principales elementos) En la sección Upload pinchamos sobre el botón Seleccionar Archivo, y elegimos la imagen que queremos añadir. Haremos click sobre el icono rosa de la parte superior de la ventana donde pone APPLY (aplicar). De este modo, la imagen se añadirá en el directorio principal de imágenes. Si se quiere añadir la imagen en un álbum ya existente (las carpetas visibles en la parte inferior de la imagen), haremos click sobre el álbum, se abrirá una ventana similar, y subiremos la imagen del mismo modo que en párrafo anterior. 25

26 B. MODIFICAR GALERÍA Es posible eliminar, copiar, mover, ocultar o hacer visible una imagen o álbum. Para ello, seleccionaremos el álbum o imagen en cuestión, seleccionando la casilla 2 bajo su icono. Después seleccionaremos la acción a aplicar en el menú desplegable junto a Operations with selectems ítems, y haremos click sobre el icono rosa de la parte superior de la ventana donde pone APPLY (aplicar). 26

27 5. DOMINIO Y HOSTING. A continuación describimos el dominio y el hosting utilizado por la página web del conservatorio profesional de Música de El Ejido (Almería). Una vez acordada la denominación de la página, en el proceso de contratación del hosting se comprobó que las denominaciones.com,.org,.net,.edu,.es estaban disponibles. Aunque la empresa de hosting ofertaba la denominación.com y.es de forma gratuita, se decidió usar la.es, haciendo uso de la dirección Para exportar la página web desde local hasta el servidor del hosting contratado, que en este caso es el de la empresa 1and1, es necesario el programa Filezilla que permite conectar con el servidor y exportar la página completa. Una vez exportada, la página es visible en internet y actualizable con acceso desde joomla, así como desde la propia página, habiendo sido identificado con usuario y contraseña. 27

28 Página web del Conservatorio Profesional de Música El Ejido (Almería). 28