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/