creación de páginas web con sharepoint designer

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
Servicio Web
Archivo de Hipertexto
Clientes 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
▪
▪
▪
▪
Servidores de pago
▪
▪
▪
Hosting + registro de dominio
http://www.miempresa.com
El sitio Web consta de páginas Web
▪
▪
▪
Hosting
Dominio ya registrado
http://mural.uv.es/tusitio/
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.
Página de
bienvenida
Página nueva
Segunda.html
Index.html
Tercera.html
Cuarta.html



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:



Imágenes:


Seleccionar cuadro y posicionar el cursor en su interior para editar
Modificar/añadir el Texto
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
Editando la página (II)

Vista de
diseño

Seleccionar varias capas
tecla mayúsculas

Seleccionar elementos
no contiguos tecla
comando


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
▪

Servidor FTP
▪
▪
▪
▪

Usuario y pw
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
B
A
Copyright 2010 - Dario Roig Garcia




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/