Darío Roig – Servicio de Informática

Extensión Universitaria

Calendario

8, 9, 10 de febrero de 2011

2 Sesiones de 16:00 – 19:30 (martes y miércoles)

1 Sesión de 16:00 – 19:00 (jueves) 10 horas 1 crédito de libre opción

Copyright 2011- Dario Roig Garcia

• Aula virtual

– Apuntes

– Cuestionarios tipo test

• Soporte sobre las cuentas ofrecidas a los estudiantes (SIE)

– http://www.uv.es/siuv

– http://www.uv.es/portalumne

– http://www.uv.es/siuv/cat/sie/indexsie_cat.html

Copyright 2010 - Dario Roig Garcia

Introducció als Serveis Web Activació del espai per a pàgina Web

Métodes de publicació al servidor mural.uv.es

Personalitza el teu lloc web a Internet amb iWeb Com agregar un àlbum de fotos Com agregar una pel·lícula a tu sitio a Internet Com agregar Mapes y Calendaris de Google Dissenya el teu lloc Web mitjançant plantilles o

temes. Integració Xarxes Socials (Facebook, etc.)

Ventajas

Transferencia de información a través de Internet

Vincular la información que se esta citando

Desventajas

Elementos técnicos

▪ Documentos HTML, Servidores, navegadores, http, url, ftp, etc.

Objetivos

Teóricos

▪ Obtener los conocimientos técnicos necesarios sobre páginas Web

Prácticos

▪ Practicar lo aprendido realizando tu página Web con iWeb

Conceptos básicos curso de Aula Clic

Introducción a iWeb oficial de apple

Video tutoriales paso a paso

iWeb para principiantes

Web oficial del apple sobre iWeb

Internet

Servicio World Wide Web

▪ Documentos en red

Otros servicios

▪ Comunicación: correo electrónico

▪ Intercambio de archivos

▪ Redes P2P, Comunicación de texto, voz, video, etc.

Copyright 2010 - Dario Roig Garcia

• Internet es un conjunto descentralizado de redes de ordenadores interconectadas los cuales utilizan para comunicarse el protocolo IP

• En 1990 España y otros países se conectan a Internet

• Cronología completa de Internet

– (http://www.hipertexto.info/documentos/crono_i.htm)

Copyright 2010 - Dario Roig Garcia

Archivo de HipertextoClientes Web

Servicio Web

Dirección en Internet▪ http://www.uv.es▪ http://mural.uv.es▪ http://www.miempresa.com (registrar dominio)

Publicar la Web Necesario identificarte con tu cuenta

▪ FTP, filezilla▪ Interfaz Web (CMS), http://disco.uv.es▪ Samba, explorador de ficheros, windows, Mac Os, linux

Mac: mobileme Windows: sharepoint server Linux: apache + PHP + mysql

Copyright 2010 - Dario Roig Garcia

Navegar por la Web▪ Navegadores: Internet Explorer, Mozilla Firefox, Chrome

URL: Localizador uniforme del recurso

▪ Nombre de servidor + ruta + nombre de archivo Web

▪ Ej: http://www.aulaclic.es/internet/index.htm

▪ Pueden visualizar texto e imágenes y ejecutar javascript

▪ Necesarios plugins para visualizar videos

▪ Flash, quicktime, etc.

Copyright 2010 - Dario Roig Garcia

Página o documento electrónico de Hipertexto Contiene texto e imágenes

La información esta etiqueta

Al conjunto de etiquetas que se utilizan se le llama:

▪ HTML (Lenguaje de Marcado de Hipertexto)

Las etiquetas se utilizan para formatear la información.

Etiqueta especial que vincula la información que se esta citando. “EL HIPERVINCULO”

Copyright 2010 - Dario Roig Garcia

▪ Partes de una página Web▪ Nombre del archivo▪ Contenido

Encabezado Titulo

Cuerpo Índice Texto e imágenes

▪ URL o dirección:▪ La información esta estructurada

http://www.ivia.es/htmlref/s1_3.html▪ Guía lenguaje HTML

http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html▪ Web con noticias

http://www.uv.es/index.html▪ Sitios Web:

http://www.uv.es/dario

Copyright 2010 - Dario Roig Garcia

▪ Carpeta en un servidor Web organizada por el editor de la Web▪ Servidores gratuitos

▪ Hosting▪ Dominio ya registrado▪ http://mural.uv.es/tusitio/

▪ Servidores de pago▪ Hosting + registro de dominio▪ http://www.miempresa.com

▪ El sitio Web consta de páginas Web▪ La página principal (index.html)

Menú Para acceder al resto de tus páginas HIPERVINCULADAS

Área de noticias o novedades▪ Resto de páginas

▪ La información se indexa y cataloga automáticamente.▪ Permite buscar texto mediante los buscadores Webs en el contenido de los documentos.

Copyright 2010 - Dario Roig Garcia

▪ Editores Sitios Web▪ Mac os

▪ iWeb▪ Microsoft

▪ Frontpage, Sharepoint▪ Macromedia

Dreamweaver

▪ Vista de diseño▪ Vista de código HTML▪ Configurar sitio Web

▪ local: carpeta de trabajo▪ remoto: carpeta principal del sitio web Método de publicación: FTP (usuario y contraseña)

Copyright 2010 - Dario Roig Garcia

Dentro del paquete iLife ‘11

iPhoto, iMovie, iDVD, GarageBand

iWeb 3.0.2

Versiones anteriores

iLife ’09 – iWeb 3.0

iLife’ 08 – iWeb 2.0

iLife’ 06 – iWeb 1.0

Objetivos

Aprender los conceptos sobre un sitio Web

Crear nuevas páginas del sitio Web

Crear hipervínculos

Publicar nuestro sitio Web

Nuevo sitio Web

Elegir Tema

▪ Elegir diseño▪ Bienvenida

Divisiones (áreas)

Menú

Encabezado

Contenido

Pie de página

Formatear de manera distinta Cambiar Tema

Crea un Sitio Web con el nombre “Curso iWeb” Archivo/Nuevo sitio web

Selecciona un tema y la pagina de Bienvenida

Observa que se ha creado un sitio y su correspondiente página con el nombre “Bienvenida”

El primer archivo de un sitio Web se llama “index” iWeb también lo ha creado pero esta oculto. El archivo redirecciona a “Bienvenida”

Seleccionar Sitio Web

Archivo / Página nueva

Personal

En blanco

etc.

Index.html

Segunda.html Tercera.html Cuarta.html

Página de

bienvenida

Página nueva

Crea dos páginas nuevas Archivo pagina nueva “Personal” Archivo página nueva “En blanco”

Modifica el nombre del archivo por “Primera sesión”

El orden de creación es importante para la construcción del menú de navegación

Al mover las paginas de orden se actualiza el orden del menú

Editar contenido

Texto: Seleccionar cuadro y posicionar el cursor en su interior para editar Modificar/añadir el Texto

Imágenes: Seleccionar cuadro e insertar y seleccionar la nueva imagen

Insertar contenido

Insertar cuadro de texto

▪ Posicionar el cuadro

▪ Posicionar el cursor en su interior

▪ Añadir texto o Insertar imagen

Vista de diseño

Seleccionar varias capas tecla mayúsculas

Seleccionar elementos no contiguos tecla comando

Editando la página (II)

Selecciona la página de Bienvenida Edita el texto

▪ Aprovecha el curso para realizar un sitio web sobre los contenidos vistos en clase, un sitio web personal, etc.

Modifica las imágenes

Guárdate tu imagen nueva en el escritorio

Selecciona la imagen a modificar y desde el menú Insertar/seleccionar busca tu imagen nueva

Procura que tenga un tamaño similar al original

Selecciona la página “Personal” Edita el texto y añade información sobre ti

Datos, aficiones, curriculum

Modifica las imágenes por defecto por imágenes propias

Guárdate tu imagen nueva en el escritorio

Selecciona la imagen a modificar y desde el menú Insertar/seleccionar busca tu imagen nueva

Edita la página “Primera sesión” Añade un cuadro de texto y escribe el índice

de objetivos que estamos viendo durante la sesión del curso

Añade un cuadro de texto e inserta una imagen relacionado con los contenidos del curso

Texto e imágenes Internos Externos:

dirección pagina Web

Dirección correo electrónico Archivos

Hipervínculos a archivos no HTML, p.e. PDF.

Formato Destino: ventana actual o nueva

En tu página personal escribe información sobre los estudios que estas cursando y realiza un vinculo externo a la web de tu centro de estudios

Selecciona el texto Inspector/Enlace/Hipervínculo

Activar como hipervínculo

Enlazar pagina externa URL:http://www.uv.es

Crea una nueva pagina en blanco y llámala “Enlaces”

Añade los enlaces de la bibliografía del curso con sus correspondientes hipervínculos

Uno de los enlaces de la bibliografía es un documento pdf

Guárdalo y realiza el enlace como un archivo

Crea una página en blanco para la segunda sesión del curso.

Haz un breve resumen sobre los contenidos de la primera sesión

Vincula a una de mis paginas y selecciona “Primera”

Configurar Métodos

Mobileme▪ Usuario y pw

Servidor FTP▪ Direccion el servidor▪ Usuario▪ Pw▪ ruta

Carpeta local▪ Nombre▪ Ubicación

Archivo Publicar todo el sitio Web

Visitar el sitio Web publicado

Probar los hipervínculos

Publicar cambios

Color Azul = publicado

Color Rojo = No publicado

Carpeta local

Nombre

Ubicación

Publicar todo el sitio

Visitar el sitio publicado

Remoto

MobileMe

Servidor FTP

Selecciona tu Sitio Web desde iweb Publicar en: Carpeta local Nombre del sitio web Ubicación de la carpeta

Escritorio o en la carpeta de trabajo

URL: no es necesario rellenar ahora

Publicar sitio

Visualízala con un navegador

File://ruta de la carpeta y prueba los vinculos

Con el finder localiza los archivos creados

Remoto

MobileMe

Servidor FTP▪ Nombre

▪ Ajustes del servidor FTP

▪ Dirección: disco.uv.es

▪ Usuario: tu usuario de la UV

▪ Contraseña:

▪ Ruta: web/iweb

▪ URL: http://mural.uv.es/daroig/iweb

▪ Publicar sitio

▪ Visitar el sitio

Cuenta del servidor Web

Accede a tu cuenta http://cuentas.uv.es

▪ Activa tu sitio Web en el servidor Web ▪ http://mural.uv.es

▪ Activa tu espacio en el servidor de disco▪ CMS Web – gestor de contenidos: http://disco.uv.es

▪ Desde htp://disco.uv.es crea la carpeta iweb

Visualízala con un navegador

URL: http://mural.uv.es/tuusuario/iweb

Ahora esta vacía

Copyright 2010 - Dario Roig Garcia

Entra en Web Crea la carpeta

iweb

Copyright 2010 - Dario Roig Garcia

Selecciona el Sitio Web desde iWeb Publicar en: Servidor FTP Ajustes del servidor FTP

▪ Dirección del servidor: disco.uv.es

▪ Usuario: tuusuario

▪ Contraseña: ******

▪ Ruta:web/iweb

URL: http://mural.uv.es/tuusuario/iweb Publicar y visitar

Entra en aulavirtual y realiza el cuestionario Servicio Web

Hazlo las veces que haga falta hasta que consigas las máxima puntuación

Puedes consultar información navegando por internet

Crea un nuevo sitio Web personal Selecciona el tema Crea una pagina de bienvenida

Añade texto indicando el motivo de la web

Copia la pagina “Personal” del Sitio Web creado anteriormente

Crea una nueva carpeta en el servidor web de la UV vía http://disco.uv.es llamada “personal”

Publica el sitio web a tu nueva carpeta

Objetivos

Aprender a realizar paginas con Fotos, álbumes, películas y podcast

Un Sitio Web basado en un blog

Crea un nuevo sitio web Crea una nueva pagina de tipo blog Crea via http://disco.uv.es una carpeta

llamada blog Añade un par de entradas al blog Publica el blog en mural Exporta el contenido del blog a tu blog de

wordpress de la UVEG

Insertar los videos

No importa el tamaño (streaming)

Si el autor borra el video falla el embebido

Subir nuestros propios videos

▪ Youtube, mmedia, etc.

Copyright 2010 - Dario Roig Garcia

Opción A: vinculo a la URL (muy facil)

Opción B: Código HTML

Pegado en el editor vista de código

▪ Funciona con las etiquetas: object y embed

Copyright 2010 - Dario Roig Garcia

Visualizando un video en youtube

Copyright 2010 - Dario Roig Garcia

A B

Mapas Reproductores de sonido Álbum de fotos: picassa, flickr Etiquetas HTML

Object, embed, iframe

Entrada con un mapa de google

Opción A

Hipervínculo URL

Opción B

HTML “iframe”

Copyright 2010 - Dario Roig Garcia

Localizar la dirección a insertar en google map

Copyright 2010 - Dario Roig Garcia

Hosting gratuito

http://hosting.miarroba.com/

Hosting con coste

1&1

Dominios “.es”

http://www.nic.es/