Darío Roig Servicio de Informática. Extensión Universitaria

Transcripción

1 Darío Roig Servicio de Informática Extensión Universitaria

2 Calendario 8, 9, 10 de febrero de 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 Dario Roig Garcia

3 Aula virtual Apuntes Cuestionarios tipo test Soporte sobre las cuentas ofrecidas a los estudiantes (SIE) Copyright Dario Roig Garcia

4 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.)

5 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.

6 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

7 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

8 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 Dario Roig Garcia

9 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 ( htm) Copyright Dario Roig Garcia

10 Servicio Web Archivo de Hipertexto Clientes Web

11 Dirección en Internet (registrar dominio) Publicar la Web Necesario identificarte con tu cuenta FTP, filezilla Interfaz Web (CMS), Samba, explorador de ficheros, windows, Mac Os, linux Mac: mobileme Windows: sharepoint server Linux: apache + PHP + mysql Copyright Dario Roig Garcia

12 Navegar por la Web Navegadores: Internet Explorer, Mozilla Firefox, Chrome URL: Localizador uniforme del recurso Nombre de servidor + ruta + nombre de archivo Web Ej: Pueden visualizar texto e imágenes y ejecutar javascript Necesarios plugins para visualizar videos Flash, quicktime, etc. Copyright Dario Roig Garcia

13 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 Dario Roig Garcia

14 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 Guía lenguaje HTML Web con noticias Sitios Web: Copyright Dario Roig Garcia

15 Carpeta en un servidor Web organizada por el editor de la Web Servidores gratuitos Hosting Dominio ya registrado Servidores de pago Hosting + registro de dominio 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 Dario Roig Garcia

16 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 Dario Roig Garcia

17 Dentro del paquete ilife 11 iphoto, imovie, idvd, GarageBand iweb Versiones anteriores ilife 09 iweb 3.0 ilife 08 iweb 2.0 ilife 06 iweb 1.0

18 Objetivos Aprender los conceptos sobre un sitio Web Crear nuevas páginas del sitio Web Crear hipervínculos Publicar nuestro sitio Web

19 Nuevo sitio Web Elegir Tema Elegir diseño Bienvenida

20 Divisiones (áreas) Menú Encabezado Contenido Pie de página Formatear de manera distinta Cambiar Tema

21 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

22 Seleccionar Sitio Web Archivo / Página nueva Personal En blanco etc.

23 Página de bienvenida Página nueva Index.html Segunda.html Tercera.html Cuarta.html

24 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ú

25 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

26 Editando la página (II) Vista de diseño Seleccionar varias capas tecla mayúsculas Seleccionar elementos no contiguos tecla comando

27 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

28 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

29 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

30 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

31 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:

32 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

33 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

34 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

35 Carpeta local Nombre Ubicación Publicar todo el sitio Visitar el sitio publicado Remoto MobileMe Servidor FTP

36 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

37 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: Publicar sitio Visitar el sitio

38 Cuenta del servidor Web Accede a tu cuenta Activa tu sitio Web en el servidor Web Activa tu espacio en el servidor de disco CMS Web gestor de contenidos: Desde htp://disco.uv.es crea la carpeta iweb Visualízala con un navegador URL: Ahora esta vacía

39 Copyright Dario Roig Garcia

40 Entra en Web Crea la carpeta iweb Copyright Dario Roig Garcia

41 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: Publicar y visitar

42 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

43 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 llamada personal Publica el sitio web a tu nueva carpeta

44 Objetivos Aprender a realizar paginas con Fotos, álbumes, películas y podcast Un Sitio Web basado en un blog

45 Crea un nuevo sitio web Crea una nueva pagina de tipo blog Crea via 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

46 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 Dario Roig Garcia

47 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 Dario Roig Garcia

48 Visualizando un video en youtube A B Copyright Dario Roig Garcia

49 Mapas Reproductores de sonido Álbum de fotos: picassa, flickr Etiquetas HTML Object, embed, iframe

50 Entrada con un mapa de google Opción A Hipervínculo URL Opción B HTML iframe Copyright Dario Roig Garcia

51 Localizar la dirección a insertar en google map Copyright Dario Roig Garcia

52 Hosting gratuito Hosting con coste 1&1 Dominios.es