Creacion sitios Web mediante google Sites

Objetivo:

Familiarizar al alumno con el uso de las nuevas tecnologías mediante la creación y publicación de contenidos en entornos web, permitiendole no simplemente limitarse y/o centrarse en la tarea de creación y edicion de contenidos sino tambien la posibilidad de maquetación de los mismos ajustando el aspecto y la interfaz web a su medida. Para ello se emplearán herramientas sencillas y fáciles de manejar puediendo el alumno comprender de forma intuitiva las tareas realizadas abastrayendole de las com

plicaciones técnicas de la web.

Las herramientas utilizadas propocionan diferentes niveles de personalizacion, aptas tanto para usuarios no expertos así como para aquellos con ciertos conocimientos técnicos.

Conceptos teóricos:

”En inglés website o web site, un sitio web es un sitio (localización) en la World Wide

Web que contiene documentos (páginas web) organizados jerárquicamente…”.

En esta definición podríamos matizar el el tema de la localizacion dentro de la www, ya que un sitio web podría estar contenido igualmente en una intranet de una empresa, la cual no fuera accesible desde fuera de esta.

Desde un enfoque no tecnológico podríamos realizar la siguiente comparacion con el objetivo de acercar aún mas el concepto de sitio web al alumno :

Sitio Web vs Libro impreso

En ambos elementos , tanto el sitio web como el libro, están compuestos por un conjunto de páginas organizadas (unas de acuerdo a un criterio secuencial (libro)) y otras siguiendo una estructura jerarquica identica a la empleada en un sistema de archivos (sitio web).

Cada página dentro del libro estaría identificadas mediante un numero de página, en internet cada página de un sitio web es identificada mediante el concepto de url(Uniform Resource Locator).

La url permite identificar de forma unívoca un recurso así como la forma de acceder a él.

Estructura

url:

La url está compuesta por un nombre de dominio, el cual podríamos sustituirlo por una
direccion IP (recordad concepto y uso de DNS),y de una localizacion dentro de una estructura jerarquica (carpetas y subcarpetas) dentro de ese dominio.

Ej: http://sites.google.com/site/ntsiclase/pages/index.html

Dominio:http://sites.google.com

Jerarquia:

(*) Existen estructuras de url más complejas las cuales no se contemplan en este guión

Acceso:

La url determina la forma de acceder al recurso tal y como se recoge en los parrafos
anteriores, se detallarán tres de las más importantes:

• http (protocolo por defecto) : Navegar por contenidos web mediante un navegador
  obteniendo contenidos normalmente en un formato conocido como
  hypertexto (HTML)

• https (modo seguro) : Igual que el anterior, en este caso concreto se cifra la comunicación
  (SSL)

• ftp :Sitio web en los que se pueden subir o descargar archivos

Publicación de contenidos en un sitio Web:

Para un usuario sin conocimientos en temas web o el cual no posea los medios adecuados lo mas comun es contratar un lugar o espacio donde poder subir sus paginas web o archivos, este concepto se conoce

como hosting.

En el caso de disponer de una direccion
IP publica y un servidor Web (IIS , Apache etc..)

Ventajas publicación Web

Si publicaramos cualquier contenido en
un sitio web en internet ,el acceso al mismo podría realizarse
desde cualquier ordenador simplemente tecleando la direccion de dicho
sitio .Este sistema

permite desechar las barreras fisicas
de comunicación y/o difusión existentes en los medios

tradicionales de impresión
alcanzando el acceso global a la información tan popular y
demandado estos días.

La presentación de los
contenidos al usuario cada vez son mas logrados aprovechando toda la
potencia de las herramientas digitales y los contenidos multimedia
(imágenes, video , audio etc…) junto con la
información textual .

Existen diferentes tipos de páginas
web dependiendo de si su contenido es estatico o

dinamico

Estatico : .htm, html

Dinamico : asp, aspx, php, jsp etc…

Google
Sites

En esta práctica vamos a crear
un sitio web con una temática a elegir por el alumno así
como la estructura y organización de contenidos que este desee
utlizar siempre respetando criterios básicos de buen diseño.

Mediante el conjunto de servicios
ofrecidos por google tenemos la posibilidad de obtener un hosting
gratuito así como una serie de plantillas predefinidas dentro
de que nos permitan comenzar a crear paginas webs de forma rápida
y sencilla.

En el caso de disponer de un dominio
podemos apuntar desde este a nuestro sitio dentro de google sites.

1.Acceso a la dirección web
google sites

2.
Registro de la cuenta

El alumno necesita disponer de una
cuenta de gmail , es perfectamente una ya existente , en el caso de
no tener ninguna la interfaz de acceso permite registrarse
seleccionando la opción Registrarse en Sites.

3.Creación Sitio Web.

• Seleccion nombre del sitio
  

  
  
  
  

  • Nombre descriptivo , particular
    de acuerdo a los obketivos buscados.

    
    

  • Posibilidad utizar plantillas
    predefinidas ayuden a usuarios inexpertos o bien en blanco para
    usuarios con cierta experiencia

    
    

  • El sitio permite definir la
    visibilidad del sitio.Tiene varios niveles de acceso

    
    
    
    

    • Privado acceso limitado al
      propietario del sitio.

      
      

    • Acceso limitado a usuarios
      específicos

      
      

    • Público
      
      
      
      

      
      
    
    

    
    Plantilla
    creación:

    
    
    
    

    

    
    

    Limitación
    accesos:

    
    
  
  

4.Acceso
al sitio Web






• Acceso:Una
  vez creado el sitio el usuario podrá acceder mediante la
  ruta ya conocida de la web
  en https://sites.google.com/site/<nombre>.o
  bien a través de su cuenta de gmail y el apartado
  Mis sitios
  
  
  

  
  

  

  
  

5.Edición
de páginas

• Modificación
  página inicio

  
  

  Por
  defecto se crea una página inicial en el sitio
  independientemente de si se ha utilizado o no una plantilla
  predefinida.

  
  

  
  

  
  

• 
  Edicion
  contenidos

  
  

  
  

  
  
  
  

  • Modo
    básico.Editor WYSWYG.
    El aspecto de los datos y los
    contenidos será el mismo una vez publicado, la forma de
    trabajar con los diferentes elementos es identica a trabajar con
    un procesador de textos en cuanto al manejo de las diferentes
    fuentes disponibles, formatos, inserción de elementos
    adicionales tales como imagenes, dibujos etc...

    
    

    El
    entorno de edición presenta menus sencillos e intuitivos en
    su manejo.
    
    
    

    
    
  
  

Posibles
elementos insertables dentro de la página seleccionables a
través del menu insertar.

Añadir elementos
especiales gadgets (pequeños aplicaciones insertadas en otras
con una función especifica como puede ser mostrar las ultimas
noticas de agencia EFE, la temperatura , etc....):

• Modo
  avanzado.Editor HTML
  La edición de los contenidos se
  realiza mediante un lenguaje de programación conocido como
  HTML.Es posible el uso de aplicaciones tales como Dreamweaver y
  similares , en donde se editen los elementos necesarios y se
  inserten aquín con una simple operación de cortar y
  pegar el código HTML generado.

  
  

  
  
  
  

  
  

• Uso
  elementos predefinidos.

  
  

• Opción
  menú Diseño

  
  

  
  

  
  



• Añadir
  nuevas páginas
  
  
  

  
  

La
creación de nuevas páginas se realizará a través
de la opción Crear página.Dispone de varios tipos de
páginas para añadir a su sitio, dependiendo del tipo de
contenido a añadir en la página deberá
seleccionar uno u otro .El entorno de diseño facilita esta
acción mostrando los elementos más habituales en
entornos web, estas plantillas pueden ser ampliadas por el propio
usuario.Es posible seleccionar el nivel jerarquico deseado para la
página en cuestión.

6.Administración
del sitio.

Las diferentes configuraciones
existentes en el sitio web pueden ser editadas mediante la pantalla
de Administrar sitio.

Consola central administración sitio:

Modificacion diseño del sitio:

En este apartado de la administración
del sitio web se podrá modifcar las diferentes partes que
conforman la página web, bien en sus dimensiones o
eliminando/añadiendo partes.Las diferentes partes que
conforman la página no son modificables, se podrá
modificar su visibilidad pero no se podrán eliminar l o añadir
nuevas.

Objetivos
propuestos:

El alumno deberá crear un sitio
web sobre la tematica que este desee (* ver Guiomar/Mor) el
cual además de una página central de bienvenida o
presentación defina al menos dos subapartados o secciones con
información específica.La navegación a estos
contenidos será de forma sencilla e intutiva para el usuario.

Al menos una de las secciones
propuestas deberá recoger contenido multimedia.

Al menos una de las secciones
propuestas deberá mostrar un calendario en el que se
especifique la planificacion de las practicas de NTSI(añadir
calendario google del profesor es una url).

Debe ser visible los datos acerca del
autor de la página.

Insertar una tabla en la pagina con los
bordes color rojo

Se deja a criterio del alumno la
visibilidad de la pagina.

Con el objetivo que el alumno examine
al menos las principales plantillas disponibles:

Al menos existirá esta
estructura:

• La pagina principal será
  una pagína web

  
  

• Una de las secciones tendrá
  toda la documentación del curso del alumno (los documentos a
  subir al sitio web son orientativos pudiendo seleccionar aquellos
  que desee independientemente de su relacion con la asignatura)

  
  

• Una de las secciones tendrá
  la lista de tareas a realizar por parte del alumno.El alumno añadirá
  un texto codificado en Html en el pie de todas sus paginas.El texto
  Html se adjutna a continuación.

  
  

<table border="1"
bordercolor="#888" cellspacing="0"
style="border-collapse:collapse;border-top-color:rgb(136, 136,
136);border-right-color:rgb(136, 136,
136);border-bottom-color:rgb(136, 136,
136);border-left-color:rgb(136, 136,
136);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;width:100%">

<tbody>

<tr
style="background-color:aqua">

<td colspan="4"
style="text-align:center;vertical-align:middle;width:311px;height:53px">1º
Curso Grado Comunicacion Audiovisual</td>

</tr>

<tr>

<td colspan="2"
style="width:203px;height:44px"><b><font
class="Apple-style-span" size="4">Direccion
web asignatura</font></b></td>

<td colspan="2"
style="width:108px;height:44px"><a
href="http://docencia.etsit.urjc.es/moodle/course/view.php?id=71"><b><font
class="Apple-style-span" size="3">Acceso
web</font></b></a></td>

</tr>

<tr>

<td colspan="4"
style="text-align: left;background-color: rgb(128, 128, 128);
color: white; ">

Clases viernes

</td>

</tr>

</tbody>

</table>