Curso: El uso de Internet y las TIC en el entorno escolar PRIMERA PARTE: Sitios web

Transcripción

1 Curso: El uso de Internet y las TIC en el entorno escolar PRIMERA PARTE: Sitios web

2 Por qué utilizar sitios web en educación? Los sitios web integran recursos variados, lo que los hace muy útiles en el aula: texto imágenes Vídeos Animaciones Ejercicios interactivos Documentos para descargar Foros/comentarios

3 Por qué utilizar sitios web en educación? Para utilizar un sitio web no se requiere instalar programas adicionales salvo que incluya animaciones o se descarguen documentos, Para lo que se necesita Adobe flash player (animaciones en flash) Java (aplets de java) Adobe reader (para leer documentos en pdf) o los programas que han creado los documentos descargados

4 Qué es un sitio web? Un sitio web es una carpeta con archivos, que puede contener otras carpetas (según esté organizado) y que consta principalmente de: una página principal (index, fichero en html), otras páginas enlazadas entre sí (todas ellas en html), imágenes, vídeos, animaciones, ficheros de texto, etc que forman parte de las páginas (incrustadas o enlazadas)

5 Qué es un sitio web?

6 Qué es un sitio web?

7 En la nube o en la tierra La carpeta o sitio web puede estar en un servidor si se va a compartir, pero también en forma local en un ordenador, grabada en un cd, guardada en una memoria usb,

8 Qué es HTML? Lenguaje que se utiliza para crear las páginas web Se escribe en forma de etiquetas que empiezan con < y acaban con >

9 Qué es HTML?

10 Qué programa necesitamos para abrir archivos HTML? Los archivos HTML se pueden visualizar o editar (para modificarlos) y cada acción requiere un tipo de programa (igual que las imágenes o los vídeos que se pueden ver o editar) Para visualizar páginas web se requiere un navegador Para editar páginas web se requiere un editor de páginas web

11 Pero qué hace el navegador? Es una especie de traductor que interpreta las etiquetas del lenguaje html y nos muestra en la pantalla del ordenador el texto, las imágenes, vídeos, enlaces,

12 Al instalar un sistema operativo (Windows, Linux, MAC os) se instala también un navegador (explorer, mozilla, safari), pero podemos instalar otros (crome, opera) ya que son compatibles A navegar

13 Cuál utilizo? Todos son compatibles salvo safari que es exclusivo de apple

14 Editores de páginas web (I) Si conocemos el lenguaje html basta con el bloc de notas (grabando la página con extensión html)

15 Editores de páginas web (II) Si no se conoce el lenguaje html lo mejor es un editor wysiwig El término WYSIWYG es el acrónimo de What You See Is What You Get, que traducido al castellano quiere decir: "lo que tú ves es lo que obtienes en los editores WYSIWYG se pueden colocar, de manera visual, distintos elementos sobre una vista previa de la página, encargándose el programa de generar el documento HTML

16 WYSIWYG

17 WYSIWYG Algunos editores de páginas web Con los procesadores de texto (Writer y Word) se crean páginas web al guardar el documento creado como página web. Entonces además del fichero se crea una carpeta con imágenes y demás objetos que hayamos incluido en el sitio.

18 De la tierra a la nube Para compartir nuestro sitio web a través de la red Se necesita un alojamiento web Se necesita también un programa para subir el sitio web al servidor Filezilla subir bajar

19 De la nube a la tierra Si queremos tener una página web en nuestro ordenador se puede hacer a través del navegador (guardar como página web completa) pero guarda la página junto con una carpeta con los objetos incrustados, no guarda el sitio completo (las páginas enlazadas)

20 De la nube a la tierra Para descargar sitios web completos se necesita un programa como Httrack website copier

21 Una herramienta para editar y subir al servidor Para facilitar la elaboración de sitios web y colocarlos directamente en el servidor hay herramientas como Google sites Ventajas: Fácil utilización Dispone de plantillas para que el aspecto sea uniforme Permite compartir el sitio o algunas páginas (trabajo en equipo) Permite crear páginas para colgar y compartir documentos Permite crear páginas tipo blog (anotaciones periódicas) Se puede hacer un seguimiento de las modificaciones

22 Un ejemplo: El tablón docente Un ejemplo de web realizada con Google sites es nuestro tablón docente: contiene una página con avisos (tipo blog), una página que sirve como repositorio de archivos (documentos) y otras páginas enlazadas (estadísticas, legislación e inscripciones)

23 Un ejemplo: El tablón docente Al pulsar en sitemap se observa la organización del sitio

24 Curso: El uso de Internet y las TIC en el entorno escolar SEGUNDA PARTE: google sites (I)

25 Una herramienta para editar y subir al servidor Para facilitar la elaboración de sitios web y colocarlos directamente en el servidor hay herramientas como Google sites La página se encuentra en el servidor, no se dispone de ella localmente, salvo que la bajemos con sites import/export (programa que se descarga en o También con httrackwebsite.

26 Todo empezó con el Googol ( ) Para crear una web con google sites es necesario tener una cuenta de google (la cuenta con la que se accede al tablón), con lo que se dispone de todos los servicios y herramientas creados por google (correo, documentos, páginas web, etc).

27 Comenzando Para crear un sitio web, igual que para modificar cualquier sitio creado O QUE COMPARTIMOS (COMO EL TABLÓN) hay que acceder a la página de sites ( introducir el nombre de usuario y contraseña y pulsar en iniciar sesión (una vez iniciada se puede acceder a todas las herramientas de google)

28 Pantalla de inicio En La pantalla que aparece al iniciar sesión se muestra: Un botón para crear un sitio nuevo Un botón para listar los sitios que el usuario ha creado o en los que participa EL LISTADO DE LOS SITIOS CREADOS O COMPARTIDOS (debe aparecer, por ejemplo, el tablón docente) UN BOTÓN PARA LISTAR LOS SITIOS ELIMINADOS (SE PUEDEN RECUPERAR SI NO HA PASADO MUCHO TIEMPO) UN BOTÓN DE AYUDA Y CONFIGURACIÓN

29 Formulario previo Una vez que se pulsa en crear aparece un formulario con Las selecciones iniciales (la plantilla o el diseño, el nombre del sitio, su dirección web, que se puede modificar en parte)

30 La página principal La herramienta crea entonces la página inicial (el index), vía de entrada al sitio web y una subpágina que es el mapa del sitio (sitemap), que muestra la estructura del mismo

31 Ver y editar Lo que se muestra en pantalla es la vista de la página principal y una barra de edición donde aparece el nombre de la página que se está visualizando, la fecha de la última actualización y los botones de edición y administración de la página y del sitio. Atención: se ve y se edita desde la misma herramienta, lo cual facilita el trabajo, pero también obliga a tener en cuenta cuál de las dos acciones se está realizando (no se pueden realizar cambios hasta que no se pulsa el botón de modificar página o directamente e ).

32 Editando Los botones de edición y configuración se muestran en la esquina superior derecha sólo se ven si hemos entrado a través de la cuenta, no si accedemos a la web tecleando su dirección (aunque en este caso al final de la página hay un enlace para acceder y poder editar)

33 Revisar los permisos Al pulsar en compartir se entra en la parte de la administración que se refiere a los permisos. Se muestra en primer lugar la dirección de la página (seleccionada para copiarla y pegarla en cualquier sitio) y botones para compartir a través del correo o las redes sociales. Por defecto la web se crea con acceso público (la puede ver cualquiera) pero puede cambiarse a: Cualquier usuario que tenga el enlace (no se requiere iniciar sesión) Usuarios autorizados (se requiere iniciar sesión) En principio los permisos funcionan igual en todas las páginas del sitio, SALVO QUE SE HABILITEN LOS PERMISOS DE NIVEL DE PÁGINA (BOTÓN SUPERIOR DERECHO)

34 El menú de edición Cuando se edita la página aparece un menú superior que sirve para modificar la página y contiene El nombre de la página los menús Botón de guardar/rechazar cambios La barra de herramientas con iconos

35 Objetos que se pueden insertar En el menú insertar se muestran los objetos que se pueden incluir en la página organizados en tres categorías: Común (lo más básico como enlaces e imágenes) Gadges (utilidades) Google (tiene que ver con el resto de herramientas de google)

36 El formato En el menú formato se encuentran opciones para el formato de: Fuentes (tachado, superíndice, subíndice, texto tipo código) Párrafos (alineación, bloque de cita) Cabeceras (de cara a crear un índice) Eliminar formatos

37 Tablas y Diseño En el menú tabla se encuentran opciones para crear y modificar tablas. En el menú diseño se muestran las posibilidades de distribución de la página.

38 La barra de herramientas Los menús se complementan con la barra de herramientas con los iconos Deshacer/rehacer Formato de fuente (tipo, tamaño, negrita, cursiva, subrayado, color de fuente y color de fondo) Crear enlace Formato de párrafo (numeración, viñetas, sangrado, alineación) Botón de eliminar formato Visualizar/editar código html

39 DOCs/DRIVE de Google En la página se pueden incluir documentos que ya tengamos en docs (ahora drive), creados con dicha herramienta. Drive permite crear documentos de texto, presentaciones, hojas de cálculo, formularios y dibujos. también permite subir archivos propios.

40 Practica con Google DOCs Crea un documento de texto copiando y pegando un texto de la red o importando uno ya creado Crea una presentación nueva importando diapositivas de una presentación ya existente Crea un formulario con tres preguntas

41 A crear la página principal Modifica el diseño de la página Escribe el texto Define las cabeceras e inserta un índice de contenidos Inserta una imagen, un vídeo Enlaza un texto a una página web Crea una tabla Inserta gadgets (calendario y marco de web) inserta un texto, una presentación y un formulario desde drive.

42 Si quiero modificar Para modificar un objeto, siempre en el modo edición, hay que pulsar en el objeto. Junto al objeto aparece un menú para poderlo modificar, eliminarlo O ajustarlo a la página (el menú depende del objeto) configuración del objeto (el menú que salía al insertarlo) Alineación Tamaño (en imágenes) Posición del texto respecto al objeto Eliminar el objeto

43 Curso: El uso de Internet y las TIC en el entorno escolar SEGUNDA PARTE: google sites (II)

44 Creando otras páginas Para crear nuevas páginas se pulsa sobre el botón página nueva (o directamente c) Ojo, pulsar al final Al crear una página nueva hay que asignarle un nombre y seleccionar el tipo de página (plantilla) También hay que decidir su ubicación: si es la página principal o es una secundaria (más adelante se puede modificar)

45 Las plantillas Plantilla página web Es la que utiliza por defecto la página principal En principio, como el resto de las plantillas, admite la subida de archivos y los comentarios de los usuarios, salvo que se desactive Una vez seleccionado el diseño se pueden incluir gran variedad de objetos (texto, imágenes, video, etc) según se ha visto al crear la página principal. No conviene, sin embargo, que una misma página contenga muchos objetos pues eso influye en la velocidad de descarga de la misma.

46 Organizar contenidos en tablas Cuando en una página se muestra textos e imágenes lo más sencillo para organizarlas es incluir cada parte en la celda de una tabla (con bordes o sin ellos)

47 Ay las tablas! Por defecto google sites crea la tabla con borde y no es posible combinar celdas. Por ello es importante conocer el aspecto de una tabla en formato html y poder modificar directamente el código.

48 Ay las tablas! Por defecto google sites crea la tabla con borde y no es posible combinar celdas. Por ello es importante conocer el aspecto de una tabla en formato html y poder modificar directamente el código.

49 Las plantillas PÁGINA CON LA PLANTILLA LISTA

50 Las plantillas LISTA personalizada (modificar plantillas) Se eligen las columnas organizan la lista (creando y dando nombre) Se selecciona el tipo de datos que contendrá la columna Se decide cómo ordenar

51 Las plantillas EJEMPLO DE PÁGINA CON LA PLANTILLA LISTA

52 Las plantillas EJEMPLO DE PÁGINA CON LA PLANTILLA LISTA

53 Las plantillas PÁGINA CON LA PLANTILLA archivador: sirve como repositorio de material y enlaces y todo el mundo puede añadir sus aportaciones (si la página está compartida)

54 Las plantillas EJEMPLO DE PÁGINA CON LA PLANTILLA archivador

55 Las plantillas EJEMPLO DE PÁGINA CON LA PLANTILLA archivador

56 Las plantillas PÁGINA CON LA PLANTILLA anuncios (sirve para crear páginas tipo blog con entradas que se ordenan de forma temporal)

57 Las plantillas EJEMPLO DE PÁGINA CON LA PLANTILLA anuncios

58 Creando páginas vinculadas También se puede crear una página y enlazarla a la vez a un texto de otra página. Para ello se edita la página que va a contener el enlace, se selecciona el texto y se pulsa en enlace. En la ventana que aparece se selecciona crear página nueva

59 Creando páginas vinculadas La página aparecerá en el menú como una subpágina que aparece al pulsar en el triángulo que se muestra junto a la página de la que depende

60 Y configurando En el menú configuración hay algunas acciones para modificar la página que se está visualizando. En este menú es dónde se puede eliminar la página creada. En configuración de la página se puede elegir si se muestra el título de la página, enlaces a páginas que dependen o están enlazadas (subpáginas), se decide si se permite que los usuarios suban archivos o hagan comentarios. También se puede añadir una descripción y modificar el tipo de página (plantilla) o la dirección

61 A ordenar Las páginas creadas aparecen en orden alfabético Para organizar el menú a nuestro gusto hay que ir a Administrar sitio -> presentación del sitio Editar la barra lateral de navegación Eliminar la opción de organizar automáticamente mi navegación Seleccionar la página y ordenar con las flechas (se pueden colocar como subniveles)

62 A practicar Entra en la página de muestra e intenta crear entradas como usuario en las páginas secundarias CREA UNA PÁGINA SECUNDARIA con cada una de las plantillas (en la plantilla lista crea tus propios apartados) CREA UNA TABLA en la página en la que has utilizado la plantilla de página web (O MÁS de una tabla SI QUIERES QUE TENGAN DISTINTO NÚMERO DE COLUMNAS) E INSERTA TEXTO E IMÁGENES ELIMINA LOS BORDES. SELECCIONA UNA PARTE DEL TEXTO Y CREA UNA PÁGINA nueva A PARTIR DEL ENLACE Ordena las páginas en el menú lateral

63 Curso: El uso de Internet y las TIC en el entorno escolar tercera PARTE: google sites (compartiendo el sitio y mejorando el aspecto)

64 El entorno de administración Recordemos que El primer paso para crear el sitio, tras rellenar el formulario, es crear la página principal. Se añaden posteriormente el resto de páginas utilizando las plantillas web, archivo, lista o noticias. Al trabajar con las páginas se trabaja en dos entornos : ver la página ó editar la página. El siguiente paso (avanzado) requiere aprender a Compartir las páginas y modificar el diseño (ya se ha visto, por ejemplo, como modificar el orden de las páginas en el menú lateral) Al pulsar en algunas opciones del botón más ( administrar sitio y compartir y permisos ) se entra en la administración del sitio, otro entorno que permite configurar el sitio. Al acceder a la administración aparece un menú lateral con las distintas opciones. la primera opción, con el nombre del sitio, nos permite volver al mismo, después de guardar los cambios.

65 Modificando el diseño En el apartado general se pueden cambiar las opciones iniciales y alguna más: Cambiar el nombre al sitio (que se puso en el formulario inicial) y Mostrar el nombre del sitio en la cabecera de las páginas (es la opción Por defecto). Describir brevemente el sitio. Indicar si el contenido es solo para adultos o no (opción por defecto). Cambiar la página principal por otra. Activar las estadísticas de la página a través de Google Analytics (se necesita un código ID) Cambiar el idioma de la página (no de lo que se escribe sino de los que aporta google sites, como la búsqueda).

66 Obtener ID para Analytics Google analytics Entrar con el usuario y contraseña de google Registrarse Seleccionar sitio web Escribir el nombre del sitio Seleccionar y escribir la dirección sites.google.com Seleccionar una categoría (educación) Seleccionar la zona horaria (importante para la estadística): España -> Madrid Dar nombre a la cuenta y desactivar la opción de compartir Pulsar en obtener id de seguimiento

67 Quiero ver las estadísticas Google analytics: al entrar posteriormente (empieza a registrar datos días después del registro) en la cuenta se observan las visitas y otros datos de interés

68 Cuidando el aspecto En el apartado temas se puede modificar el aspecto utilizando plantillas o diseñando una plantilla propia a partir de un diseño básico. En este último caso se entra en el apartado colores y fuentes, al que también se accede directamente. hay que guardar los cambios y no se observa el efecto hasta que no se vuelve al sitio.

69 Cambiando la estructura En presentación del sitio se muestra la estructura del sitio: cabecera, barra lateral, contenido de la página que se visualiza y pie de página.

70 Cambiando la estructura Al pulsar en cambiar diseño del sitio (o en cambiar alineación en la cabecera) aparece un menú que permite hacer cambios en todo el sitio, incluyendo o excluyendo los componentes por defecto y permitiendo además añadir la barra horizontal.

71 La cabecera En la cabecera se puede modificar la altura y la alineación, además de añadir un logotipo. Se puede configurar la búsqueda para que aparezca o no (es un formulario que aparece en la cabecera) y decidir dónde se hace la búsqueda

72 La barra lateral En la barra lateral se puede modificar el ancho y la ordenación del menú (incluso añadir elementos como textos, enlaces, etc)

73 El pie de página En el pie de página se pueden modificar los enlaces

74 La barra horizontal Si se añade la barra horizontal (que por defecto no aparece) hay que añadir las páginas que deben aparecen, ya que al activarla sólo incluye la principal

75 Directos al diseño Otra vía de acceso al diseño es mediante la opción modificar el diseño del sitio en más. En este caso aparece sobre la página una barra superior para hacer la modificaciones y poderlas observar directamente (en la opción anterior hay que guardar y salir de la administración para observar el resultado) Los botones sirven para que desaparezcan o aparezcan los componentes (habilitar/inhabilitar) Cada parte se modifica pulsando sobre ella, lo que permite, en algunos casos, eliminar algunas partes y, en otros, editar y modificar las opciones Para salir hay que pulsar en el botón cerrar

76 A practicar Cambia el nombre de la página Modifica el diseño cambiando la plantilla y el tipo de letra Añade un logotipo en la cabecera Añade elementos en el menú lateral Añade la barra horizontal e incluye alguna de las páginas secundarias Elimina algún enlace del pie de página Opcional: activa google analytics

77 Compartiendo páginas Google sites permite que varias personas colaboren en la gestión del sitio. Para modificar los permisos se pulsa en el botón compartir o en Más -> compartir y permisos. Hay tres tipos de usuarios que tienen distinto nivel de utilización del sitio: PROPIETARIO: TIENE TODOS LOS PRIVILEGIOS COLABORADOR: Crear, editar, mover y borrar páginas, añadir archivos adjuntos, añadir comentarios, añadir y eliminar páginas del menú lateral de navegación, subscribirse a los cambios que se produzcan en el sitio lectores: Sólo puede leer las páginas (cuando el sitio es público los usuarios son lectores)

78 Compartiendo páginas Recordemos que al crear el sitio por defecto éste es Público (puede verlo cualquiera) y que podemos habilitar los permisos de nivel de página para poder compartir las páginas con quién deseemos.

79 Compartiendo páginas Al habilitar los permisos de nivel de página aparece una ventana con un listado de todas las páginas. Al pulsar sobre el nombre de cada página aparece: La dirección de la página para compartir Botones para compartir por correo o redes sociales Opciones para que el sitio sea público o privado Al pulsar en el sitio aparece al final la posibilidad de añadir Personas, es lo primero que tenemos que hacer si deseamos tener colaboradores del sitio Correos electrónicos de uno o varios colaboradores (gmail) Notificar por correo Nivel de colaboración

80 Compartiendo páginas El usuario añadido aparece ahora en la lista de quién tiene acceso y desde ahí mismo se puede también eliminar o cambiar los privilegios

81 Compartiendo páginas Una vez añadidos usuarios se pueden modificar los permisos de las páginas: Se selecciona la página en el listado Se pulsa en cambiar Los permisos pueden ser: los mismos que el sitio (opción por defecto) Personalizados (se añaden nuevos usuarios automáticamente cuando se añaden al sitio o hay que añadirlos posteriormente) Heredado del sitio Añadido después

82 A practicar Introduce usuarios en tu sitio con diferentes niveles de privilegios Selecciona una página y compártela con los mismos privilegios que el sitio, otra con permiso personalizado en la que automáticamente se incluyan los usuarios del sitio y una más con permiso personalizado en la que no se incluyan los usuarios del sitio Introduce nuevos usuarios y revisa las páginas que has compartido (comprueba que unos se añaden y otros no) Entra en las páginas que han compartido contigo e intenta modificarlas