Servicios Web 2.0 ::: Introducción Diseño de materiales multimedia. Web 2.

0

414

5. Servicios Web 2.0

Servicios Web 2.0 ::: Introducción Diseño de materiales multimedia. Web 2.0

415

5.1 Introducción

Servicios Web 2.0 ::: Introducción Diseño de materiales multimedia. Web 2.0

416

5.1 Introducción
El término Web 2.0 fue utilizado por primera vez por la empresa editorial estadounidense O’Reilly Media (2004) para referirse a una segunda generación de Web basada en las comunidades de usuarios. Abarca un amplio catálogo de sitios y servicios web que incluyen las redes sociales, los blogs, los wikis, la sindicación de noticias RSS, etc. Su propósito fundamental es fomentar la colaboración y el intercambio ágil de información entre los usuarios. El principio fundamental de la Web 2.0 es que “Todo está en la web”. Esto significa que el usuario solo necesita un navegador web para conectarse desde cualquier equipo o lugar e interactuar con los sitios o aplicaciones donde publicar contenidos, recopilar información, comunicarse con otros usuarios, etc. El propósito de este capítulo no es tratar la Web 2.0 con la extensión y calidad que se merece. Más bien se trata de ver cómo es posible integrar algunos de sus servicios en una página de nuestro sitio web. Internet es algo vivo y en constante cambio. Al hablar de servicios web puede ocurrir que alguno de ellos no funcione exactamente como se explica en este documento porque hayan cambiado recientemente en alguno de los detalles o capturas presentados.

Servicios Web 2.0 ::: Flickr: galería de fotografías Diseño de materiales multimedia. Web 2.0

417

5.2 Flickr: galería de fotografías

Servicios Web 2.0 ::: Flickr: galería de fotografías Diseño de materiales multimedia. Web 2.0

418

5.2 Flickr: galería de fotografías
5.2.1 Introducción
Flickr (http://www.flickr.com) es un espacio donde se puedes administrar y compartir tus fotos en línea. Las características más destacadas de este servicio son:       Subir fotos. Puedes hacerlo desde tu equipo, enviándolas por correo electrónico o utilizando el teléfono móvil con su cámara. Organizar. Clasifica las fotos en colecciones o álbumes. A cada imagen se le puede asignar una etiqueta para facilitar su búsqueda. Compartir. Utiliza grupos y controles de privacidad para compartir tus fotos. Mapas. Sobre un mapa de Google Maps se puede geolocalizar el lugar donde se tomó cada foto y compartirlo con los demás. Publicaciones. Puedes elaborar tarjetas, albumes, marcos, etc utilizando las imágenes subidas. Mantenerse en contacto. Para enviar y recibir información sobre las actualizaciones de fotografías de familiares y amigos.

La exploración de todas las posibilidades de Flickr excede el propósito de este curso. Se propone centrarse en la utilización de estas imágenes en línea en documentos web. Para disponer de acceso a Flickr es necesario disponer de una cuenta en Yahoo. Desde la portada de Flickr se puede crear una pulsando en el botón Crear tu cuenta.

5.2.2 Subir fotografías a Flickr
1. Descarga y descomprime el archivo flickr.zip a una carpeta del equipo. Como resultado de esta tarea se obtendrá una colección de fotografías para ser subidas a Flickr. 2. Abre Mozilla Firefox y visita la web de Flickr en la URL: http://www.flickr.com. 3. Clic en el enlace Iniciar sesión e introduce tus credenciales Yahoo. 4. Pulsa en el enlace Subir fotos. En este caso vamos a utilizar el Uploader Básico de Flickr. Selecciona esta opción si no se muestra la página recogida en la captura de pantalla adjunta. 5. En la página Subir fotos en Flickr pulsa en el botón Examinar para localizar la primera fotografía en la carpeta de tu disco duro. Repite este paso para algunas fotografías más del resto de la carpeta.

Servicios Web 2.0 ::: Flickr: galería de fotografías Diseño de materiales multimedia. Web 2.0

419

6. En el apartado Agregar etiquetas para TODAS estas imágenes introduce los términos que luego facilitarán la localización de las imágenes en el buscador de Flickr. Ejemplo: Asturias, paisajes 7. Configura el resto de opciones de privacidad, seguridad, tipo de contenidos, etc. 8. Clic en el botón Cargar.

9. Una vez concluido el proceso de subida se mostrará el panel Describe tus fotos donde es posible asignar títulos, descripciones y etiquetas a cada imagen de forma invididual. Para terminar pulsa en el botón Guardar el lote. 10. Las fotos estarán disponibles en la pestaña Tu > Tus fotos. Nota: Otra posibilidad para subir fotos a Flickr es descargar e instalar una herramienta de carga que se ofrece en esta página. Se trata de una aplicación local que permite subir imágenes con sólo arrastrar y soltar.

Servicios Web 2.0 ::: Flickr: galería de fotografías Diseño de materiales multimedia. Web 2.0

420

5.2.3 Organizar en álbumes
1. Si no estás autentificado debes hacer clic en el enlace Iniciar sesión e introduce tus credenciales Yahoo. 2. Desde el menú superior horizontal haz clic en la opción Organizar. Tras unos segundos de carga se mostrará el organizador de Flickr.

3. Clic en la pestaña Álbumes y luego en el enlace Crear nuevo álbum. 4. Desde el panel de nuevo album: 4.1 Introduce el título del álbum, p.e.: “Mi viaje por Asturias”. 4.2 Para añadir fotografías a este nuevo álbum debes arrastrar las imágenes que aparecen en la franja inferior al panel derecho superior. 4.3 Arrastra una imagen del álbum al cuadrado visor que aparece sobre el título. Esta será la imagen que represente el albúm. 4.4 Pulsa en el botón Guardar.

5.2.4 Situar las fotos en el mapa (geolocalización)
1. Si no estás autentificado debes hacer clic en el enlace Iniciar sesión e introduce tus credenciales Yahoo. 2. Desde el menú superior horizontal haz clic en la opción Organizar. Tras unos segundos de carga se mostrará el organizador de Flickr. 3. Clic en la pestaña Mapa para acceder al interfaz donde podremos situar sobre el mapa cada una de las fotos (geolocalización). Conviene elegir que el mapa sea de acceso público. 4. En la casilla Buscar un lugar introduce el término Asturias para obtener el mapa de esta Comunidad Autónoma con el zoom adecuado. 5. En el panel inferior selecciona el álbum “Mi viaje por Asturias” y luego arrastra cada fotografía para ubicarla en su localidad: Luarca (Valdés), Cudillero, Gijón, Luarca, Oviedo y Cabo de Peñas. Para eliminar una imagen del mapa arrastra el círculo hasta el panel inferior.

Servicios Web 2.0 ::: Flickr: galería de fotografías Diseño de materiales multimedia. Web 2.0

421

6. Una vez concluida la geolocalización de las distintas imágenes haz clic en el enlace Tus fotos situado en la esquina superior derecha del mapa.

5.2.5 Integración HTML de una imagen Flickr
1. Si no estás autentificado debes hacer clic en el enlace Iniciar sesión e introduce tus credenciales Yahoo. 2. Desde la página Tus fotos selecciona una imagen haciendo clic sobre ella para visualizarla en solitario.

Servicios Web 2.0 ::: Flickr: galería de fotografías Diseño de materiales multimedia. Web 2.0

422

3. Haz clic derecho sobre la fotografía y selecciona la opción Copiar la ruta de la imagen.

4. Abre Kompozer 5. Sobre un documento web nuevo añade un título con formato Título 1. Por ejemplo: “Mi imagen en Flickr” 6. Haz clic sobre el documento para situar el cursor debajo del título. 7. Clic sobre el botón Imagen para insertar una imagen en el documento

8. En el cuadro de diálogo Propiedades de la imagen haz clic derecho sobre el cuadro de texto Ubicación de la imagen y selecciona Pegar.

Servicios Web 2.0 ::: Flickr: galería de fotografías Diseño de materiales multimedia. Web 2.0

423

9. Esta tarea pegará la URL absoluta de la imagen que al cabo de unos segundos se mostrará en la Vista preliminar. 10. Introduce el Texto alternativo. Por ejemplo: “El Faro de Cudillero”. 11. Clic en el botón Aceptar. 12. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre flickr_image.html 13. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox.

5.2.6 Integración HTML de una presentación de fotografías Flickr
1. Si no estás autentificado debes hacer clic en el enlace Iniciar sesión e introduce tus credenciales Yahoo. 2. En la barra de menús de Flickr selecciona Tú > Tus Álbumes.

3. A continuación haz clic sobre el album creado anteriormente. Una vez dentro del álbum observa que existe un enlace con el texto Ver como presentación. Si se hace clic en este enlace se mostrará una presentación con la secuencia de fotografías que forman parte del álbum. 4. Mientras estás visualizando esta presentación se puede seleccionar la URL de esta presentación en la barra de dirección del navegador. Para ello haz clic derecho sobre la barra de direcciones y elige Seleccionar todo. A continuación haz clic derecho y selecciona Copiar.

Otra posibilidad es regresar a la ventana anterior y hacer clic derecho sobre el enlace Ver como presentación para seleccionar la opción Copiar la ruta del enlace. En cualquiera de los dos casos se copia al portapapeles la URL de esta presentación.

Servicios Web 2.0 ::: Flickr: galería de fotografías Diseño de materiales multimedia. Web 2.0

424

5. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi presentación en Flickr” en formato Titulo 1. 6. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 7. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic derecho y elige Pegar.

8. En el documento actual debes crear un marco interno (IFRAME) que apunte a esta URL absoluta que hemos pegado. Para ello escribe: <iframe src="<url>" width="800" height="600"> </iframe> donde <url> es la dirección entre comillas que hemos copiado. Los atributos width y height definen el tamaño del marco interno. 9. Clic en el botón Insertar. 10. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre flickr_gallery.html 11. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox.

Servicios Web 2.0 ::: Flickr: galería de fotografías Diseño de materiales multimedia. Web 2.0

425

5.2.7 Integración HTML de un mapa de Flickr
1. Si no estás autentificado debes hacer clic en el enlace Iniciar sesión e introduce tus credenciales Yahoo. 2. En la barra de menús de Flickr selecciona Tú > Tu Mapa 3. Una vez dentro del mapa haz clic sobre el enlace inferior Filtros.

4. En la lista Persona elige la opción Tú para que en el mapa se muestren sólo las fotos que has colocado sobre el mapa. 5. En la esquina inferior derecha del mapa pulsa sobre el enlace Vincular a esto

6. Se muestra el cuadro de diálogo Vincular a esta mapa. Clic derecho sobre el contenido de este cuadro de texto y selecciona primero Seleccionar todo y luego Copiar.

7. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi mapa en Flickr” en formato Titulo 1. 8. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 9. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic derecho y elige Pegar. 10. En el documento actual debes crear un marco interno (IFRAME) que apunte a esta URL absoluta que hemos pegado. Para ello escribe: <iframe src="<url>" width="800" height="600"> </iframe> donde <url> es la dirección entre comillas que hemos copiado. Los atributos width y height definen el tamaño del marco. 11. Clic en el botón Insertar de este cuadro de diálogo. 12. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre flickr_map.html 13. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox.

Servicios Web 2.0 ::: Slide.com: presentación de imágenes Diseño de materiales multimedia. Web 2.0

426

5.3 Slide.com: presentación de imágenes

Servicios Web 2.0 ::: Slide.com: presentación de imágenes Diseño de materiales multimedia. Web 2.0

427

5.3 Slide.com: presentación de imágenes
Slide.com (http://www.slide.com) es un servicio web 2.0 que nos permite subir una colección de imágenes y luego obtener en línea una atractiva presentación que las muestra de forma secuencial y con efectos especiales. Esta presentación tendrá una URL que podemos compartir con otras personas. También es posible integrarla dentro de una página web. Este servicio puede resultar interesante para publicar las fotos de los distintos eventos que se celebran en el centro. 1. Descarga y descomprime el archivo slidecom.zip en una carpeta del disco duro. Como resultado de esta tarea dispondrás de una colección de fotografías para crear tu presentación. Otra posibilidad es utilizar una colección propia. 2. Abre el navegador web Firefox y visita la web de Slide.com: http://www.slide.com 3. Se puede crear una presentación sin necesidad de registrarse como usuario de este servicio. Sin embargo conviene registrarse haciendo clic en el enlace Regístrate para poder editar en cualquier momento las presentaciones creadas. Para ello introduce tu email y la contraseña. Una vez completado el registro, en el formulario ENTRAR introduce estos datos para autentificarte. 4. Clic en el botón Crear un Slide Show.

5. En la pestaña Mis archivos haz clic en el botón Busca para subir las imágenes desde el equipo.

6. En el cuadro de diálogo Seleccione los archivos … navega para situarte dentro de la carpeta anterior. Puedes seleccionar un solo archivo con hacer clic sobre él. Para añadir, uno a uno, a la selección pulsa previamente la tecla Ctrl y sin soltarla vete haciendo clic sobre los archivos que deseas elegir. Para añadir una lista de archivos: haz clic en el primero, pulsa la tecla Mayus y sin soltarla haz clic en el último. Verás que se seleccionan todos. Utiliza este truco para elegir todos los archivos de imagen de esta carpeta.

Servicios Web 2.0 ::: Slide.com: presentación de imágenes Diseño de materiales multimedia. Web 2.0

428

7. Clic en el botón Abrir. 8. Transcurridos unos segundos se habrán subido estas imágenes al servidor remoto. Una vez finalizado el proceso se mostrará el mensaje Subida terminada. En la vista previa de la presentación que se muestra arriba ya aparecen estas imágenes. 9. En el panel inferior donde se muestran las imágenes subidas se puede realizar los siguientes ajustes:  Nombre de Slide Show: Mi viaje por Asturias  Pies de foto: Escribe el pie de página para cada fotografía ya que por defecto se sitúa el nombre del archivo.  Orden de las fotografías. Arrastra las imágenes para colocarlas en el orden en que se mostrarán.  Azar. Si activas esta casilla las fotos se mostrarán de forma aleatoria.

10. En el panel derecho Personaliza se pueden configurar interesantes opciones de la presentación:  Estilo, Temas y Skins: puedes combinar las distintas opciones de estos parámetros para conseguir presentaciones más personalizadas. En la pestaña Estilo se puede activar la casilla Azar para que se muestre cada vez con un estilo aleatorio y desplegar la lista Rapidez para elegir la velocidad de la animación: Fast, Medium y Show (Rápido, Medio y Lento).  Música: permite elegir una música de fondo.  Fondo: para elegir un color de fondo.  Efectos: para aplicar efectos de sepia, blanco/negro, etc a las fotos.  Tamaño: en función del modelo definido para el estilo se podrá elegir un tamaño estándar: small, medium o large (pequeño, mediano y grande).  Privacidad: permite establecer si la presentación será de acceso público o particular. Se recomienda la opción de acceso público.

Servicios Web 2.0 ::: Slide.com: presentación de imágenes Diseño de materiales multimedia. Web 2.0

429

11. Para terminar de configurar la presentación pulsa en el botón Guardar.

12. Si no te has registrado y autentificado Slide.com te ofrece la oportunidad de hacerlo. Si continuas sin registrar no será posible editar el slide.com. 13. A continuación se muestra el código de integración HTML de la presentación para los distintos formatos de blog. En este caso la tarea consiste en integrarla en una página web que estamos elaborando. Para ello haz clic en la pestaña My Space (podría ser otra), haz clic en el contenido del cuadro O copia este código. 14. Una vez seleccionado este texto haz clic derecho sobre este cuadro y elige Copiar en el menú contextual que se muestra. También se puede copiar mediante la combinación de teclas <Ctrl>+<C>.

15. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi presentación Slide.com” en formato Titulo 1. 16. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML.

Servicios Web 2.0 ::: Slide.com: presentación de imágenes Diseño de materiales multimedia. Web 2.0

430

17. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic derecho y elige Pegar. Clic en el botón Insertar.

18. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre slidecom.html 19. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox.

Servicios Web 2.0 ::: Slideshare: presentaciones en línea Diseño de materiales multimedia. Web 2.0

431

5.4 Slideshare: presentaciones en línea

Servicios Web 2.0 ::: Slideshare: presentaciones en línea Diseño de materiales multimedia. Web 2.0

432

5.4 SlideShare: Presentaciones en línea
SlideShare (http://www.slideshare.net) es un servicio de alojamiento y publicación en línea de presentaciones realizadas con herramientas como Powerpoint u OpenOffice. Puedes utilizarlo para subir tus presentaciones y compartirlas. También puedes buscar y utilizar las realizadas por otras personas. En este curso se propone SlideShare como una interesante opción para publicar en la web nuestras propias presentaciones y luego poder integrarlas en el código HTML de una página. Conviene registrarse previamente para crear tu cuenta en SlideShare. Para ello haz clic en el enlace Signup y completa el formulario indicando email, usuario y contraseña. A partir de ese momento ya dispones de credenciales de identificación y acceso. 1. Descarga y descomprime el archivo TIC_project.zip en el disco duro de tu equipo. Como resultado de esta tarea obtendrás el archivo TIC_project.ppt que contiene una presentación realizada en PowerPoint. 2. Abre el navegador Firefox y visita la página de SlideShare: http://www.slideshare.net 3. En el cuadro de Login introduce las credenciales de acceso. 4. Clic en el enlace Upload (Subir). 5. En la página se muestra información sobre el tipo de archivos que se pueden subir: .ppt y .pps (Powerpoint), .odp (Impress de OpenOffice) y .pdf. También se indica que este espacio es público. No se recomienda subir ningún material si se desea mantener en privado. También se indica el tamaño máximo del archivo. En este caso son 30 MB.

6. Clic en el botón Browse and select files … (Navegar y elegir archivos …). 7. En el cuadro de diálogo Seleccione los archivos … navega para situarte en la carpeta donde has descargado y descomprimido el archivo TIC_project.ppt.

Servicios Web 2.0 ::: Slideshare: presentaciones en línea Diseño de materiales multimedia. Web 2.0

433

8. Selecciónalo y pulsa en el botón Abrir. 9. Tras unos segundos de espera se subirá esta presentación en SlideShare. 10. Cuando el proceso de subida ha tenido éxito se solicitan algunos datos adicionales:  Title (Título). Es el título de la presentación. Ejemplo: Proyecto TIC en un centro educativo  Tags (Etiquetas). Es una relación de palabras-clave separadas por comas que permitirán localizar esta presentación utilizando la herramienta de búsqueda de SlideShare. Ejemplo: TIC, proyecto, integración, educación, tecnologías  Language (Idioma). Selecciona la opción Spanish (Español).  Description (Descripción). Un breve comentario que a modo de introducción permite describir la presentación.  Allow file download. (Permitir descarga de archivo). Si marcas esta opción los usuario podrán descargarse el archivo original.

11. Para concluir el proceso de subida pulsa en el botón Publish. 12. Tras pulsar este botón se produce otro tiempo de espera. SlideShare está transformando el archivo original en una película Flash que se mostrará al usuario mostrando el contenido de esa presentación. 13. Clic en el enlace superior My Slidespaces y luego en la imagen que muestra la presentación que acabamos de subir. De esta forma se accede a la visualización de esta presentación. 14. Haz clic derecho sobre el cuadro de texto Embed into your blog (Embebido dentro de tu blog) para elegir Seleccionar todo y luego Copiar.

Servicios Web 2.0 ::: Slideshare: presentaciones en línea Diseño de materiales multimedia. Web 2.0

434

15. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi presentación SlideShare” en formato Titulo 1. 16. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 17. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic derecho y elige Pegar. Observa que el código copiado desde SlideShare se ha pegado aquí. Clic en el boton Insertar. 18. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre slideshare.html 19. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox. Nota: Esta integración HTML también se puede realizar con presentaciones publicadas por otras personas. Al situarse en su página también se ofrece el código Embed para copiar y pegar en nuestra página web.

Servicios Web 2.0 ::: BooMP3: audio en línea Diseño de materiales multimedia. Web 2.0

435

5.5 BooMP3: audio en línea

Servicios Web 2.0 ::: BooMP3: audio en línea Diseño de materiales multimedia. Web 2.0

436

5.5 BooMP3: Audio en línea
5.5.1 ¿Qué es BooMP3?
BooMP3 (http://boomp3.com/) es un interesante servicio Web 2.0 que permite subir archivos MP3 y WMA (Windows Media Audio) desde el disco duro del equipo local o bien desde una dirección web. A cada recurso sonoro se le puede asignar información textual: título de la canción y descripción. Esto facilita su búsqueda. Cada pista de audio dispondrá de una página propia donde se proporciona un código HTML para insertar su reproductor en nuestra página web. No es necesario registrarse para utilizar este servicio.

5.5.2 Subir un archivo local
1. Descarga y descomprime el archivo africa.zip en el disco duro de tu equipo. Como resultado de esta tarea obtendrás el audio: africa.mp3 2. Abre el navegador Firefox y visita la página de BooMP3: http://boomp3.com 3. En la página de entrada haz clic en el botón Click and select file to upload (Haz clic y elige un archivo para subir).

4. En el cuadro de diálogo Seleccione los archivos que se cargarán con Boomp3. Localiza en el disco duro de tu equipo el archivo de audio africa.mp3 anteriormente descargado 5. Pulsa en el botón Abrir. Se iniciará automáticamente la subida del archivo o archivos de audio al servidor remoto. 6. Una vez subido introduce los datos del audio para facilitar su búsqueda: 1. Song title (Título de la canción). Ejemplo: Sonidos de África. 2. Your email (Tu dirección de correo electrónico). Introduce tu dirección de correo electrónico. 3. Copyright. Debes marcar esta etiqueta garantizando con ello que este archivo no está protegido con derechos de autor. 4. Description (Descripción). Ejemplo: Loop musical extraído del portal FlashKit

Servicios Web 2.0 ::: BooMP3: audio en línea Diseño de materiales multimedia. Web 2.0

437

7. Para terminar pulsa en el botón Save (Guardar ). 8. A continuación se muestra la página donde se muestra el título de la canción y el sencillo reproductor de BooMP3 para escucharla.

Notas: 1. Para subir un audio es imprescindible introducir una dirección de correo electrónico. Si pulsas en el enlace superior View your files (Ver tus archivos) se mostrará un cuadro de texto donde si introduces tu correo electrónico, se mostrará una lista de acceso a todos los audios subidos a BooMP3 con esa cuenta. 2. Al subir un audio recibirás un email en la cuenta de correo que has declarado. Este mensaje contiene un enlace a la página del audio y otra al editor que permitirá eliminar al archivo. Conserva este mensaje si deseas eliminar el audio posteriormente.

Servicios Web 2.0 ::: BooMP3: audio en línea Diseño de materiales multimedia. Web 2.0

438

5.5.3 Integración HTML del reproductor de BooMP3
1. Abre el navegador Firefox y visita la web de BooMP3: http://boomp3.com 2. Para visualizar tus archivos de audio pulsa en el enlace View your files (Ver tus archivos) e introduce la dirección de correo electrónico que has utilizado para subir los archivos de audio a BooMP3. Otra posibilidad es pulsar en View all uploaded files para acceder al catálogo general de audios y situarse en uno de ellos. 3. Clic en el enlace del archivo de audio subido. Por ejemplo: Africa. Se mostrará una página con el reproductor de BooMP3 que permite escuchar el audio.

4. Haz clic en el enlace Post this player to your blog (Publica este reproductor en tu blog).

Servicios Web 2.0 ::: BooMP3: audio en línea Diseño de materiales multimedia. Web 2.0

439

5. En el cuadro Posting player to your blog (Publicar el reproductor en tu blog) puedes marcar dos opciones adicionales:  Autoplay song: se inicia la reproducción de la canción al cargarse.  Repeat song: se repite la canción en un bucle contínuo 6. Pulsa sobre el botón Copy (Copiar) para copiar el código embed 7. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi audio de BooMP3” en formato Titulo 1. 8. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 9. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic derecho y elige Pegar. Observa que el código copiado desde BooMP3 se ha pegado aquí. Clic en el boton Insertar. 10. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre boomp3.html 11. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox.

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

440

5.6 Multiply: repositorio de archivos

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

441

5.6 Multiply: repositorio de archivos
Existen espacios donde es posible subir archivos multimedia (imagen, audio, vídeo, animaciones, archivos etc) que luego se pueden integrar en la página web del centro o proyecto. En la siguiente tabla se recogen algunas webs donde se pueden almacenar archivos en línea. Se indican sus prestaciones actuales para las cuentas gratuitas: Sitio Multiply MediaMax Twango Box.net Omnidrive URL http://multiply.com/ http://www.mediamax.com http://www.twango.com/ http://www.box.net/ http://www.omnidrive.com/ Capacidad --25 Gb Ilimitado 1 Gb 1 Gb Tráfico --1 Gb/mes 250 Mb/mes 10 Gb/mes 5 Gb/mes Por archivo 100 Mb 10 Mb 100 Mb Ilimitado Ilimitado

Capacidad: Capacidad total de almacenamiento por cuenta Tráfico: Tráfico mensual de descargar permitido Por archivo: Límite de subida por archivo A continuación se describe el procedimiento para utilizar un repositorio como Multiply para guardar y reutilizar archivos de imágenes, audios o vídeos.

5.6.1 Registrarse como usuario en Multiply
1. Accede a la web de Multiply en la dirección: http://multiply.com 2. Clic en el enlace Join for free para completar el formulario de registro. Puedes utilizar una dirección de correo electrónico de Yahoo o MSN. Recuerda el usuario y contraseña definido para posteriores accesos. 3. A continuación consulta el correo electrónico. Abre el mensaje de confirmación que te ha enviado Multiply a tu cuenta. Pulsa en el enlace de confirmación para completar el paso de verificación de la dirección de correo electrónico. Cierra el correo electrónico y el navegador. 4. Tras la creación de una cuenta la dirección de la página de inicio en Multiply será del tipo: http://<usuario>.multiply.com/

5.6.2 Subir e integrar una imagen al repositorio Multiply
1. Descarga y descomprime el archivo multiply.zip a la carpeta c:\multiply. Como resultado de esta extracción dispondrás del archivo de imagen elogio.jpg y el archivo de audio bistro.mp3. 2. Abre el navegador web y sitúate de nuevo en la web de Multiply. Introduce tu nombre de usuario y contraseña. Pulsa en el botón Sign In (Entrar)

3. Pulsa en el botón My Site (Mi Sitio) y luego en el botón Add Photos (Añadir Fotos) dentro del cuadro Photos (Fotos)

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

442

Nota: Para que funcione correctamente la subida de archivos es necesario tener instalado en el equipo Java Runtime Environment (JRE) http://www.java.com/es/download/ 4. Existen dos procedimientos alternativos para seleccionar imágenes del disco duro local. • Arrastrar y soltar. Restaura la ventana del navegador web para que no ocupe toda la pantalla. Abre Mi PC para navegar hasta la carpeta multiply. Arrastra el archivo desde el explorador de archivos hasta el cuadro Upload Photos en el navegador.

Elegir fotos. Pulsa en el botón Choose Photos (Elige fotos). Se muestra un cuadro de diálogo Enviando para desplegar la lista Buscar en y situarse en la carpeta multiply. Selecciona el archivo elogio.jpg. Para terminar pulsa en el botón Abrir.

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

443

5. Tras seleccionar las distintas imágenes de tu disco duro (en este caso sólo vamos a hacerlo con una) pulsa en el botón Upload (Subir) que aparece debajo del cuadro de vistas previas. Las imágenes se organizan en albums y posteriormente se pueden subir o eliminar imágenes de un mismo album.

6. En el panel Album Details (Detalles del Album) introduce: • Title (Título). Por ejemplo: Elogio al horizonte de Chillida • Description (Descripción). Ejemplo: Lugares típicos de Asturias. • Tags (etiquetas semánticas para facilitar la búsqueda). Ejemplo: monumentos, asturias, lugares típicos, paisajes, etc.

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

444

7. Clic en el botón Save & Publish (Guardar y publicar). 8. Una vez concluido el proceso de subida al servidor remoto de todas las imágenes seleccionadas se mostrará el mensaje Post Successful (Envío con éxito). 9. Pulsa en el enlace Go to your Multiply Site (Ir a tu sitio Multiply)

10. Pulsa sobre la imagen del album que has creado en el cuadro Photos.

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

445

11. Una vez dentro del álbum haz clic sobre la imagen que desees para que se muestre en tamaño apropiado. 12. Clic derecho sobre la imagen y selecciona la opción Copiar la ruta de la imagen … De esta forma se copiará al portapapeles la URL absoluta donde se encuentra almacenada esta imagen

13. Sobre la barra de Dirección del navegador web haz doble clic sobre la URL actual y a continuación haz clic derecho para seleccionar Pegar.

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

446

14. Puedes utilizar Kompozer para insertar esta imagen en una página web mediante Insertar > Imagen. En la casilla Ubicación de la imagen pega la dirección anteriormente copiada al portapapeles. Clic en Aceptar.

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

447

3. Subir e integrar un audio al repositorio Multiply
1. Accede al sitio web Multiply (http://multiply.com) personales para autentificarte en tu cuenta. 2. Clic en la pestaña superior My Site (Mi sitio). 3. Pulsa en el enlace Add Music del cuadro Music y utiliza tus credenciales

4. En el panel Upload Music (Subir música) pulsa en el botón Examinar … del primer cuadro. Navega por tu equipo local para seleccionar y abrir el archivo multiply\bistro.mp3. Se puede subir varios archivos de audio y organizarlos en listas de reproducción (playlists).

5. Para subir el archivo haz clic en el botón Upload (Subir). Transcurridos unos minutos se completa el proceso.

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

448

6. En el panel Playlist Details (Detalles de la lista de reproducción) introduce: • • • • 7. 8. 9. 10. 11. 12. 13. 14. Playlist Name (Nombre de la lista). Ejemplo: Música de danza Description (Descripción). Ejemplo: Música para bailar Which songs should be included in this playlist? (¿Qué canciones se incluirán en esta lista?). En este caso se marca la canción anteriormente subida. Tags (etiquetas semánticas para facilitar la búsqueda). Ejemplo: bistro, mancini, danza, etc.

Clic en el botón Save & Publish para terminar. Si todo ha ido bien se mostrará el mensaje Post Sucessful! (Envío con éxito). Pulsa en el enlace Go to your Multiply Site (Ir a tu sitio Multiply) Observa que en el cuadro Music ahora aparece la lista de reproducción anteriormente creada. Haz clic sobre ella para abrirla. En la pista que se ha subido pulsa sobre el enlace Play this playlist (reproducir esta lista). En el cuadro de diálogo Abrir con | Guardar en disco selecciona Abrir con y elige, por ejemplo reproductor Windows Media Player o VLC Media Player. Clic en el botón Aceptar. Tras su descarga comenzará la reproducción. Pulsa sobre el enlace Share (Compartir)

15. En el cuadro de texto Link puedes copiar el enlace a la página de Multiply donde se puede escuchar este audio.

16. Clic derecho sobre el cuadro de texto Link y elige Seleccionar todo. Clic derecho de nuevo y selecciona Copiar. 17. Abre una página web con Kompozer. Sitúa el cursor donde deseas situar el enlace. 18. Selecciona Insertar > HTML. Clic derecho y selecciona Pegar. Se copiará el código HTML que contiene el enlace. Notas: • • No se ofrece una dirección absoluta al archivo de audio. En su defecto disponemos de un enlace a una página desde donde se puede reproducir el audio. Para poder acceder a esa página es necesario que el usuario se autentifique con unas credenciales de Multiply. Este requisito es algo relativamente nuevo.

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

449

4. Subir e integrar un vídeo al repositorio Multiply
1. Descarga y descomprime paisajes.zip para obtener el archivo paisajes.wmv en una carpeta de tu equipo. 2. Accede al sitio web Multiply (http://multiply.com) y utiliza tus credenciales personales para autentificarte en tu cuenta. 3. Clic en la pestaña superior My Site (Mi sitio). 4. Pulsa en el enlace Add Vídeo del cuadro Vídeo

5. Multiply puede alojar vídeos procedentes de 3 tipos distintos de fuentes: • • • Upload a vídeo: subir un archivo del disco duro local. Record a vídeo: grabar un vídeo de la webcam o vídeo del equipo. Import vídeos: importar un vídeo de youtube, metacafe, myspace, google vídeo, etc.

4.1 Subir un archivo de vídeo local

6. En el cuadro Upload a vídeo pulsa en el botón Examinar, navega para localizar y abrir el archivo descargado paisajes.wmv. Clic en Abrir. Existe un límite de 100 MB de tamaño en el archivo de vídeo para subir. Son aproximadamente 10 minutos de grabación. 7. Para terminar pulsa en el botón Upload Video File (Subir archivo de vídeo). 4.2 Grabar un vídeo Para realizar esta práctica es necesario disponer de una cámara DV o webcam + micrófono conectados al equipo. 6. Seleccciona My Site > Vídeo > Add Vídeo 7. En la sección Record a Video (Grabar un Vídeo) haz clic en el botón Multiply Vídeo Recorder (Grabador de vídeo Multiply). Es necesario tener instalado en el navegador web el plugin del reproductor de Flash 8.

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

450

8. Pulsa en el botón Permitir para que la aplicación puedan acceder a la webcam y micrófono conectados al equipo. 9. Se mostrará la captura de la cámara en el cuadro Video Recorder. Si tienes varios dispositivos de captura de vídeo y de audio abre los cuadros desplegables y selecciona los adecuados.

10. Para iniciar la grabación haz clic en el botón Record (Grabar) que aparece en el centro del capturador o bien pulsa la tecla barra espaciadora. 11. Para detener la grabación haz clic en el botón Stop (Detener) que se muestra en la esquina inferior izquierda del capturador o bien pulsa la tecla barra espaciadora. 12. Tras realizar la captura se mostrará una consola con varios botones: Play (reproducir la captura realizada), Record (volver a grabar), Save (guardar) y Discard (descartar).

13. Para guardar el vídeo pulsa en el botón Save (Guardar). Nota: Conviene no exceder de 10 minutos en el tiempo de grabación. Recuerda que Multiply tiene el límite de 100 MB por archivo subido. 4.3 Importar vídeos 6. Seleccciona My Site > Vídeo > Add Vídeo 7. En la sección Import vídeos (Importar un vídeo) pulsa sobre un servicio de vídeo. Por ejemplo Youtube.com

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

451

8. En el cuadro de diálogo Import YouTube Video – by URL (Importar vídeo de Youtube mediante URL) pega la dirección del vídeo que te interese. Por ejemplo: http://www.youtube.com/watch?v=7vgAYTC9bRY y pulsa en el botón OK.

Nota:

Importar vídeos de Youtube y otros servidores a mi cuenta Multiply puede resultar interesante para evitar los vídeos relacionados inapropiados.

4.4 Guardar el vídeo 9. En cualquiera de los casos anteriores (subir un archivo de vídeo local, grabar un vídeo o importarlo desde Youtube), una vez concluido con éxito el proceso de subida se mostrará una página donde debes introducir los datos del vídeo: Subject (Título), Description (Descripción), Tags (Etiquetas) y Access (Acceso).

10. Para terminar pulsa en el botón Save & Publish (Guardar y publicar) 11. Clic de nuevo en la pestaña My Site. 12. Para visualizar el archivo de vídeo haz clic sobre su título dentro del cuadro Vídeo.

Multiply: repositorio de archivos Diseño de materiales multimedia. Web 2.0

452

13. Pulsa sobre el enlace Share (Compartir)

14. Hay dos formas de integrar en una página HTML un vídeo alojado en Multiply: • Embed (incrustado o embebido): inserta dentro de la página HTML un reproductor mostrando el vídeo. • Link (enlace): inserta un enlace a una página de Multiply donde se visualiza ese vídeo.

15. En este caso haz clic derecho sobre el cuadro de texto Embed y elige Seleccionar todo. Clic derecho de nuevo y selecciona Copiar. 16. Abre una página web con Kompozer. Sitúa el cursor donde deseas situar el enlace. 17. Selecciona Insertar > HTML. Clic derecho y selecciona Pegar. Se copiará el código HTML que empotra el reproductor con el vídeo. Nota: Para acceder a la visualización de un vídeo no es necesario disponer de credenciales de Multiply.

Servicios Web 2.0 ::: Scribd, documentos en línea Diseño de materiales multimedia. Web 2.0

453

5.7 Scribd: documentos en línea

Servicios Web 2.0 ::: Scribd, documentos en línea Diseño de materiales multimedia. Web 2.0

454

5.7 Scribd: documentos en línea
Scribd (http://www.scribd.com/) es un espacio donde se pueden subir y alojar documentos procedentes de distintos formatos de archivo: *.doc, *.xls, *.pdf, etc. Una vez subido se proporciona un interfaz enriquecido que permite distintas opciones de visualización y manejo del documento. El usuario sólo necesita disponer de un navegador web con el plugin de Adobe Flash para poder acceder al mismo. Como veremos en este apartado este visor se puede integrar en el código HTML de una página web de nuestro sitio web. El propósito de este proyecto es crear una gran biblioteca de documentos para compartir entre los usuarios. 1. Descarga y descomprime a la carpeta scribd el contenido del archivo scribd.zip. Como resultado de esta tarea obtendrás en esta carpeta el documento web20.doc para Microsoft Office Word. 2. Visita la web de Scribd y registrate como usuario/a en Log In. Para ello elige un nombre de usuario y contraseña e introduce estos datos junto con una dirección de correo electrónico. 3. Utiliza estas credenciales para autentificarte y una vez superado este proceso selecciona My docs en el menú superior, My Documents (Mis documentos) en el menú lateral izquierdo y luego pulsa en el botón Upload (Subir)

4. Se muestra la página Publish a document ::: Step 1 of 2: Upload something (Publicar un documento ::: Paso 1 de 2: Subir algo). Se pueden subir los siguientes formatos de archivo: .doc (Microsoft Word); .pdf (Adobe Acrobat); .txt (texto plano); .ppt, .pps (Microsoft Powerpoint); .xls (Microsoft Excel); .odt, odp, etc. (OpenDocument Format / ODF - OpenOffice.org, KOffice, etc.); .sxw, sxi, etc. (OpenDocument Format / ODF - OpenOffice.org, KOffice, etc.)

Servicios Web 2.0 ::: Scribd, documentos en línea Diseño de materiales multimedia. Web 2.0

455

5. Clic en el botón Browse (Examinar). 6. En el cuadro de diálogo Seleccione los archivos que se cargarán con www.scribd.com selecciona la carpeta scribd y dentro de ella haz clic sobre el documento web20.doc. Pulsa en el botón Abrir.

7. Transcurridos unos segundos se habrá subido el documento al servidor mostrándose una ventana donde podemos definir: Title (título), Description (Descripción) y Tags (Ëtiquetas de contenido para la búsqueda). Para terminar pulsa en el botón Publish (Publicar).

8. Se muestra la página Documents from your bulk upload (Documentos subidos desde tu equipo). Clic en el enlace view here (ver aquí) para ver su aspecto.

Servicios Web 2.0 ::: Scribd, documentos en línea Diseño de materiales multimedia. Web 2.0

456

9. Existen dos modos de visualización del documento: Formato HTML y Formato Visor PDF. En la parte superior del título del documento, a la derecha, haz clic en el enlace Switching to PDF player format (Cambiar al formato de Visor PDF). Para regresar al modo HTML pulsa en el enlace que lo sustituye: Switching to HTML format (Cambiar a formato HTML).

10. Cuando estás en el modo Visor PDF se puede navegar por el documento utilizando las distintas opciones que proporciona el marco superior del visor. • Activa el botón Mano para poder arrastrar y soltar las páginas del documento utilizando el puntero del ratón. • Activa la herramienta Selección para poder seleccionar fragmentos de texto del documento con sólo arrastrar y soltar. El texto seleccionado se puede copiar (<Ctrl>+<C>) y luego pegar (<Ctrl>+<V>) sobre otro documento. • Introduce un término en el cuadro de texto y luego pulsa en el icono lupa situado a su derecha para iniciar una búsqueda en el documento actual. • Arrastra el deslizador para aumentar o disminuir el zoom de visualización del documento o bien pulsa en los botones de ajuste de página o anchura de página. • Introduce el número de página para situarte directamente en ella tras pulsar la tecla <enter>. Otra posibilidad es utilizar los botones adelante/atrás que permiten desplazarse en ambas direcciones página a página sobre el documento. • Si deseas obtener una copia impresa del documento haz clic en el icono de la impresora. • Para ver el documento a pantalla completa pulsa en el botón situado más a la derecha de la barra de herramientas.

Servicios Web 2.0 ::: Scribd, documentos en línea Diseño de materiales multimedia. Web 2.0

457

11. En la base del visor se ofrece al usuario la posibilidad de descargarse el documento en distintos formatos: • Download as PDF (Descargar como PDF). • MS Word (Microsoft Word) • Plain text (Texto plano). • MP3. Scribd genera mediante un sintetizador de voz una locución sonora del texto subido. No tiene mucha calidad pero es curioso

12. En el área derecha del documento se muestra un panel donde se puede descargar el documento (Download as) como PDF, MS Word, Texto plano o MP3. También se dispone de una consola de reproducción el audio que nos permite escuchar la locución sonora. Cuando el texto está en castellano apenas es inteligible.

13. Para insertar este documento en una página de nuestro sitio web, haz clic en la casilla de texto Embed que muestra el código HTML de inserción y a continuación haz clic derecho para seleccionar Copiar en el menú contextual que se muestra.

Servicios Web 2.0 ::: Scribd, documentos en línea Diseño de materiales multimedia. Web 2.0

458

14. 15. 16. 17.

Abre Kompozer y selecciona Archivo > Nuevo > Un documento vacío. Sobre la nueva página escribe el título “La Web 2.0” y asígnale el estilo Título 1. Sitúa el cursor en la siguiente línea y a continuación elige Insertar > HTML En la ventana Insertar HTML haz clic en el cuadro de texto y a continuación haz clic derecho para seleccionar Pegar. Clic en el botón Insertar.

18. Pulsa en el botón Guardar. Introduce el título: “La Web 2.0” y guarda esta página en la carpeta miweb con el nombre web20.html 19. Clic en el botón Navegar de Kompozer para visualizar a través del navegador Firefox. Otra posibilidad es utilizar el explorador de archivos para hacer doble clic sobre el archivo web20.html y verlo con el navegador web por defecto del equipo.

Servicios Web 2.0 ::: Scribd, documentos en línea Diseño de materiales multimedia. Web 2.0

459

Servicios Web 2.0 ::: Youtube: video en streaming Diseño de materiales multimedia. Web 2.0

460

5.8 Youtube: vídeo en streaming

Servicios Web 2.0 ::: Youtube: video en streaming Diseño de materiales multimedia. Web 2.0

461

5.8 YouTube: vídeo en streaming
5.8.1 ¿Qué es Youtube?
YouTube (http://www.youtube.com) es un servicio de búsqueda y alojamiento de vídeos que ofrece la posibilidad de asignar tags o etiquetas a los mismos para facilitar su localización. En poco tiempo este sitio web se ha convertido en el mayor repositorio de vídeos en Internet. Cualquier usuario puede registrarse de forma gratuita y subir sus vídeos. Estos pueden ajustarse a cualquier temática siempre y cuando no sea pornográfica y no incumplan las leyes vigentes sobre copyright y pertinencia de contenidos. Cada usuario podrá subir todos los vídeos que desee en los formatos admitidos: *.AVI, *.MOV y *.MPG. Existe la limitación de un tamaño máximo de 100 MB por archivo. Para registrarse como usuario en YouTube pulsa en el enlace Sign up (Registrarse) y rellena el formulario. Para concluir el proceso pulsa en el botón Sign up.

5.8.2 Publicar un vídeo en YouTube
1. Descarga y descomprime el archivo paisajes.zip en tu disco duro. Como resultado obtendrás el archivo de vídeo paisajes.wmv 2. Abre el navegador Firefox y visita la web de Youtube : http://www.youtube.com. 3. Clic en el enlace Log in. Introduce el usuario y contraseña personales en Youtube y a continuación pulsa en el botón Log In. 4. Una vez superado con éxito el proceso de autentificación haz clic en el botón Upload Video (Subir Video)

5. En la página Video Upload (Subida de archivo) puedes definir los siguientes valores para el vídeo: • Title (Título). Ejemplo: Paisajes asturianos. • Description (Descripción). Texto breve que describe el vídeo. Ejemplo: Algunas fotografías de sitios asturianos. • Video Category (Categoría del Vídeo). Selecciona una categoría o tema. Ejemplo: Entertainment (Entretenimiento). • Tags (Etiquetas). Facilitan la búsqueda del vídeo. Se introduce una o varias etiquetas separadas por espacios. Ejemplo: asturias paisajes. Estos son los campos obligatorios para poder subir un vídeo. En el resto se pueden dejar las opciones por defecto.

Servicios Web 2.0 ::: Youtube: video en streaming Diseño de materiales multimedia. Web 2.0

462

Además de las opciones básicas es posible configurar otros parámetros haciendo clic previamente en el enlace choose options (elige opciones) de los siguientes apartados: • Broadcast Options (Opciones de difusión). Si pulsas en el enlace choose options (elige opciones) podrás elegir entre Public para compartir el video con todo el mundo (es la opción por defecto y recomendada) y Private donde sólo será visible por ti o los usuarios que indiques. Date and Map Options (Opciones de fecha y mapa). Permite definir la fecha en que fue grabado y sobre una mapa de Google Maps el lugar geográfico concreto donde se tomó (geolocalización). Sharing Options (Opciones de compartición). En este apartado se puede elegir entre … Comments (Comentarios). - Allow comments to be added automatically. Permitir que los comentarios se añadan automáticamente. Es la opción por defecto. - Yes, allow comments after I approve them. Friends can add automatically. Se permiten comentarios pero solo serán visibles después de aprobarlos. Los amigos podrán añadirlos automáticamente. - Yes, allow comments after I approve them. Se permiten comentarios pero solo serán visibles después de aprobarlos. - No, don't allow comments. No se permiten comentarios. Comment Voting (Votaciones). - Yes, allow users to vote on comments. Permitir las votaciones en los comentarios. Es la opción por defecto. - No, do not allow users to vote on comments. No permitir las votaciones en los comentarios. Video Responses (Vídeos relacionados). - Yes, allow video responses to be added automatically. Permitir que otros usuarios de YouTube puedan relacionar automáticamente sus vídeos con el mío. Es la opción por defecto. - Yes, allow video responses after I approve them. Permitir que puedan relacionar otros vídeos con éste después de haberlo aprobado. - No, don't allow allow video responses. No permitir relacionar este video con otros. Ratings (Puntuaciones)

• •

Servicios Web 2.0 ::: Youtube: video en streaming Diseño de materiales multimedia. Web 2.0

463

-

-

Yes, allow this video to be rated by others. Permitir que este video pueda ser puntuado por los usuarios. Es la opción por defecto. No, don't allow this video to be rated. No permitir que este video pueda ser votado.

Embedding (Incrustado) - Yes, external sites may embed and play this video. Permitir que sitios externos puedan incrustar y reproducir este vídeo. Es la opción por defecto. - No, external sites may NOT embed and play this video. No admite que este video se pueda incrustar en una página web externa y se reproduzca en ella. Syndication (Sindicación) - Yes, make this video available on mobile phones and TV. Hacer que el vídeo esté disponible en teléfonos móviles y TV. Es la opción por defecto. - No, this video should not be available on mobile phones and TV. Este vídeo NO estará disponible para teléfonos móviles ni TV. 6. Pulsa en el botón Upload a vídeo … (Subir un vídeo). 7. En la página Video Upload (Subida de vídeo) pulsa en el botón Browse (Examinar) para localizar el archivo que has descargado y descomprimido en tu equipo local: paisajes.wmv. A continuación pulsa en el botón Upload Vídeo (Subir vídeo).

8. Tras unos segundos de espera si el vídeo se ha subido con éxito se mostrará el mensaje: Video Upload – Upload Complete (Subida de vídeo – Subida completada).

Servicios Web 2.0 ::: Youtube: video en streaming Diseño de materiales multimedia. Web 2.0

464

9. Clic en el enlace My Videos (Mis vídeos) para acceder a la lista de archivos de vídeo subidos. Nota: Después de subir el archivo al servidor puede ocurrir que tengas que esperar unos minutos para que se complete la conversión del vídeo. YouTube procesa el formato original del archivo para transformarlo en formato Video Flash.

5.8.3 Integración HTML de un vídeo YouTube
1. Abre el navegador Firefox y visita la web de Youtube : http://www.youtube.com. Introduce tus credenciales para autentificarte. 2. Clic en la sección My Account > My Videos (Mis vídeos). 3. Clic en el título del vídeo que hemos introducido en el apartado anterior. Se visualiza una página mostrando la reproducción del vídeo.

4. Clic sobre el cuadro de texto Embed para seleccionar el código. A continuación haz clic derecho y selecciona Copiar. Con esta operación hemos copiado al portapapeles el código HTML que permitirá incrustar el reproductor de Youtube y este vídeo en nuestra página web.

Servicios Web 2.0 ::: Youtube: video en streaming Diseño de materiales multimedia. Web 2.0

465

Nota: Sin necesidad de estar autentificado también es posible integrar en nuestra página HTML cualquier vídeo de Youtube (a menos que su autor haya definido que no permite su incrustación embed). Para ello navega para reproducir el vídeo que desees y copia el código Embed que aparece en la página del vídeo. 5. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi video de Youtube” en formato Titulo 1. 6. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 7. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic derecho y elige Pegar. Observa que el código copiado desde YouTube se ha pegado aquí. Clic en el boton Insertar. 8. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre youtube.html 9. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox.

5.8.4 Crear un lista de reproducción de vídeos en Youtube
YouTube ofrece la posibilidad de crear listas de reproducción de vídeos alojados en este servicio. Estos pueden ser propios o ajenos. En el siguiente ejemplo se recoge el procedimiento para construir una lista de reproducción y luego insertarlo en una página web. 1. 2. 3. 4. 5. Visita la página de YouTube utilizando Mozilla Firefox: http://www.youtube.com Introduce tus credenciales personales para autentificarte. Visita la sección My Account (Mi cuenta) Clic en el enlace Playlists (Listas de reproducción). Clic en el botón Create Playlist (Crear lista de reproducción). En este caso vamos a crear una lista de vídeos sobre el pintor Picasso. 6. En la página Create/Edit Playlist (Crear/Editar lista de reproducción) introduce el nombre de la lista (Playlist Name). Ejemplo: Picasso en Youtube.

Servicios Web 2.0 ::: Youtube: video en streaming Diseño de materiales multimedia. Web 2.0

466

7. Rellena el cuadro de texto Description (Descripción) y los Tags (Etiquetas). Marca la opción Public (Público) o Private (Privado) para indicar la privacidad de la lista de reproducción. Se recomienda utilizar la opción por defecto: Public. 8. Clic en el botón Save PlayListInfo (Guardar Información de la Lista de Reproducción). 9. A continuación utiliza el buscador de YouTube para buscar vídeos sobre Picasso. Introduce el término “Picasso” y pulsa en el botón Search (Buscar).

10. Haz clic sobre el título de uno de los vídeos para visualizarlo. 11. En la barra de opciones que aparece debajo del reproductor haz clic sobre el enlace Save to Favorites (Guardar a Favoritos).

12. En la sección Add Video to a Playlist (Añadir Vídeo a una Lista de Reproducción) despliega el combo para elegir la lista Picasso en YouTube. Para terminar pulsa en el botón OK.

13. Repite los pasos 9-12 para añadir dos o tres vídeos más sobre Picasso. No es necesario utilizar de nuevo el buscador porque en la lista Related (Relacionados) se muestran algunos vídeos que están relacionados con el actual.

Servicios Web 2.0 ::: Youtube: video en streaming Diseño de materiales multimedia. Web 2.0

467

14. Clic en la entrada My Account (Mi Cuenta) y luego pulsa en PlayLists (Listas de reproducción).

15. En el cuadro de texto Embed haz clic para seleccionar su contenido y luego clic derecho y Copiar para copiar al portapapeles el código del reproductor de la lista creada: Picasso en Youtube. 16. Abre Kompozer y sobre un documento web nuevo escribe el texto “Mi lista de reproducción en Youtube” en formato Título 1. 17. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 18. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic derecho y elige Pegar. Observa que el código copiado desde YouTube se ha pegado aquí. Clic en el boton Insertar. 19. Pulsa en el botón Guardar, introduce un título de página y guardarla con el nombre lista_youtube.html 20. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox.

Servicios Web 2.0 ::: Vídeos Diseño de materiales multimedia. Web 2.0

468

5.9 Vídeos

Servicios Web 2.0 ::: Vídeos Diseño de materiales multimedia. Web 2.0

469

5.9 Vídeos
5.9.1 Vídeos subtitulados en OverStream
Overstream (http://www.overstream.net) es un espacio donde puedes personalizar un vídeo en línea mediante la incorporación de comentarios y subtítulos. Esto es posible gracias al editor de Overstream que permite fácilmente crear y sincronizar tus subtítulos a cualquier vídeo en línea, guardarlos en el servidor de Overstream para compartirlos con los demás. Visita la web de Overstream y regístrate para disponer de un nombre de usuario y contraseña. Una vez que dispongas de ella introdúcelas para entrar en sesión. 1. A través del navegador web localiza previamente en Youtube el vídeo en línea que deseas subtitular. Una vez situado en él, selecciona la dirección en la barra del navegador, clic derecho y elige Copiar. 2. Regresa a OverStream. Pulsa en el enlace Create overstream (Crear subtítulos). 3. Se muestra el cuadro de diálogo Vídeo URL (dirección del vídeo). En la casilla Enter Vídeo URL (Introduce URL del vídeo) haz clic derecho y selecciona Pegar para pegar la dirección copiada con anterioridad. Clic en el botón Ok.

4. Tras unos segundos de espera en el visor se cargará la película. Los pasos para crear los subtítulos serían (ver imagen):

Servicios Web 2.0 ::: Vídeos Diseño de materiales multimedia. Web 2.0

470

1) Clic en el botón play de la consola de reproducción. Cuando estimes necesario añadir un comentario pulsa en el botón pause. 2) En la esquina inferior derecha pulsa en el botón add (añadir). 3) Introduce el subtítulo por teclado. Observa que en el listado se crea una entrada con el texto y también se ofrece una vista previa en el visor de la película. Para eliminar un texto se selecciona previamente en el listado y se pulsa en el botón remove (eliminar). Es necesario tener en cuenta que el subtítulo se muestra por defecto durante 3 segundos. Este valor se puede modificar en Options (opciones). Si deseas ampliar la duración del subtítulo seleccionado utiliza los controles Start Time y End Time (Tiempo de inicio y de fin). 4) Para guardar el proyecto pulsa en el botón save (guardar). Se muestra el cuadro de diálogo Overstream Name Dialog (Save To Server) (Nombre de los subtítulos para guardar en el servidor). Introduce un nombre y pulsa en OK.

5. Tras guardar el proyecto se mostrará el mensaje Overstream “título” created in the database (Overstream “título” creado en la base de datos).

6. Pulsa sobre la pestaña Overstream Properties (Propiedades del Overstream). En esta página conviene configurar los siguientes parámetros: Access Level (Nivel de acceso) como Public, Subtitle Language (Idioma de Subtítulos) como Spanish, Tags (Etiquetas) separados por comas, Ratings (Votaciones) y Comment (Comentarios) activarlos o desactivarlos.

Servicios Web 2.0 ::: Vídeos Diseño de materiales multimedia. Web 2.0

471

7. Para guardar los cambios introducidos en los parámetros de configuración pulsa en el botón Save Overstream Properties (Guardar propiedades del OverStream) 8. Clic en el enlace My Overstream. Observa que aparece la entrada correspondiente a los subtítulos recién creados. Para actualizar su contenido pulsa en el enlace Edit. Para ver el resultado final pulsa en el enlace Play.

9. Debajo del reproductor se muestra un cuadro de texto con el código Embed.

10. 11. 12. 13. 14.

Clic derecho y selecciona Copiar para copiar este código HTML al portapapeles. Abre Kompozer y sobre un documento HTML nuevo selecciona Insertar > HTML. En el cuadro de diálogo Insertar HTML haz clic derecho y selecciona Pegar. Clic en el botón Insertar. Selecciona Archivo > Guardar introduce el título de la página y luego la carpeta destino (por ejemplo miweb) y el nombre del archivo. 15. Desde el navegador web abre la página HTML creada para ver cómo se integra el reproductor en ella.

Servicios Web 2.0 ::: Vídeos Diseño de materiales multimedia. Web 2.0

472

5.9.2 Edición de vídeos con JumpCut
JumpCut (http://www.jumpcut.com) es un servicio web 2.0 que permite subir fotos y vídeos para montar un clip de película que luego se puede compartir con otros usuarios. Visita la web de JumpCut y regístrate para disponer de un nombre de usuario y contraseña. Una vez que dispongas de ella introdúcelas para entrar en sesión. Si dispones de una cuenta Yahoo es más que suficiente para acceder a este espacio. 1. Descarga y descomprime el contenido del archivo jumpcut.zip. Como resultado obtendrás una carpeta jumpcut en cuyo interior dispones de varios fotografías de paisajes. 2. Accede a la web de JumpCut y autentifícate como usuario. 3. Clic en el enlace Upload (Subir) que se muestra en el menú horizontal superior. Es posible subir fotos, audios y vídeos pero en este caso vamos a subir sólo fotos.

4. Clic de nuevo en el botón gigante Upload. Se mostrará un cuadro de diálogo para seleccionar los archivos que se cargarán. En la casilla Buscar en: despliega el combo para seleccionar la carpeta jumpcut. Haz clic sobre la primera imagen y luego pulsa la tecla <Mayus> y sin soltar haz clic sobre la última imagen. De esta forma se seleccionan todas las imágenes. Para terminar pulsa en el botón Abrir.

5. Durante el proceso de subida se ofrece la posibilidad de decidir el tipo de visibilidad (public) y los tags. A continuación haz clic en el enlace Done (Hecho). 6. Una vez concluido el proceso de subida se ofrece la posibilidad de elegir un estilo de transición entre fotos (Pick a Style).

Servicios Web 2.0 ::: Vídeos Diseño de materiales multimedia. Web 2.0

473

7. Si deseas publicar la película directamente sin más arreglos haz clic en el enlace Publish My Movie (Publicar Mi Película). En el panel Publish define el título (Title) de la película (por ejemplo: Paisajes de Asturias), las etiquetas o Tags (ejemplo: asturias, paisajes, etc) y la visibilidad (Visibility), en este caso Public (Pública). Para terminar haz clic en el botón Publish. 8. Se mostrará el visor del vídeo de Jumpcut donde puedes ver el aspecto final del vídeo. Si deseas editarlo con mayor detalle pulsa en el botón Edit situado en la esquina inferior derecha del visor.

9. Desde la página de edición que proporciona JumpCut es posible definir una transición distinta para cada imagen, subir y añadir un audio, poner títulos, definir efectos, etc. Si lo deseas puedes probar las distintas opciones. Para terminar Save (Guardar) que aparece en la esquina inferior derecha de la página de edición.

Servicios Web 2.0 ::: Vídeos Diseño de materiales multimedia. Web 2.0

474

10. Regresa al modo de reproducción del videoclip creado. Debajo del reproductor haz clic en el enlace Post. Clic derecho sobre el cuadro de texto Player y selecciona la opción Copiar.

11. 12. 13. 14.

Abre Kompozer y sobre un documento HTML nuevo selecciona Insertar > HTML. En el cuadro de diálogo Insertar HTML haz clic derecho y selecciona Pegar. Clic en el botón Insertar. Selecciona Archivo > Guardar introduce el título de la página y luego la carpeta destino (por ejemplo miweb) y el nombre del archivo. 15. Desde el navegador web abre la página HTML creada para ver cómo se integra el reproductor en ella.

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0

475

5.10 JotForm: formularios en línea

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0

476

5.10 JotForm: formularios en línea
JotForm (http://jotform.com) es un sitio que permite crear formularios web susceptibles de integrar en una página HTML. El diseño del formulario se realiza con facilidad mediante arrastrar y soltar sus distintos elementos sobre la página: cuadros de texto, imágenes, etiquetas, combos, botones, etc. Cada uno de estos elementos admite configuración de sus propiedades para personalizar el resultado. El envío de los datos introducidos por el usuario se puede recibir en una cuenta de correo electrónico o bien acceder a informes estadísticos en varios formatos. En esta práctica vamos a crear un formulario que luego integraremos en una página web para recoger los datos de reserva de un aula de informática en nuestro centro. Las peticiones serán recibidas en nuestro email. Para crear y utilizar tus propios formularios en JotForm es necesario registrarse previamente. Para ello visita su página, haz clic en Sign up y completa el formulario de registro.

5.10.1 Crear un formulario en JotForm
1. Abre el navegador web y visita la página de JotForm: http://jotform.com 2. Introduce tus credenciales de identificación y pulsa en el botón Login.

3. En la barra de botones superior haz clic en el botón My forms (Mis formularios).

4. Se muestra la ventana de edición del formulario. Clic en el botón New (nuevo).

5. En el cuadro de diálogo Form Wizard (Asistente de Formulario) selecciona un modelo, por ejemplo, BLANK-Blank Form (en blanco) y pulsa en el botón inferior Next >> (Siguiente).

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0

477

6. A continuación elige un estilo. Para ello despliega el combo Theme y selecciona un tema para tu formulario. Por ejemplo: Baby Blue. Para terminar pulsa en el botón Finish

7. Ahora vamos a añadirle los elementos del formulario. En la siguiente tabla se recogen los ítems que contendrá: Etiqueta Logo del centro Profesor/a Email Asignatura Aula solicitada Grupo Fecha Hora Sistema operativo Periféricos Observaciones Enviar Tipo Imagen Textbox Textbox DropDown DropDown DropDown DateTimePicker DropDown RadioButton CheckBox TextArea Button Submit Características URL absoluta Requerido, Size=40, Max=100 Requerido, Validación=email, Size=40, Max=100 Requerido, Matemáticas | Lengua Castellana | Idioma | … Requerido, Aula 1 | Aula 2 | Aula 3 | Aula 4 … Requerido, 1E1 | 1E2 | 1E3 | 2E1 … Requerido, Formato: ddmmyyyy (22012007) Requerido, 09:00-10:00, 10:00-11:00, … Windows XP, Windows Vista, Ubuntu Linux, Mac Impresora | Portátil | Cañón | Pizarra interactiva Column Width=40, Rows=10 Por defecto

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0

478

8. Desde el cuadro de herramientas ToolBox arrastra el elemento TextBox para soltarlo dentro del formulario por encima del botón Submit (Enviar) y por debajo del texto “Drag and drop …” (Arrastra y suelta …)

9. Clic sobre este elemento para seleccionarlo. En el cuadro Properties (Propiedades) define sus parámetros: • Label (Etiqueta): Profesor/a • Required (Requerido): yes • Size (Tamaño): 40 • Max Size (Máximo tamaño): 100 • Validation (Validación): no

10. Para eliminar el texto Drag and drop questions … haz clic sobre él para seleccionarlo y a continuación pulsa en el icono “X” en rojo que aparece a la derecha de su caja. 11. Repite los pasos anteriores para situar el resto de elementos del formulario: • Email. Es un textbox (cuadro de texto) para recoger el email del solicitante. • Label= Email. • Required=yes. • Size=40. • Max Size=100. • Validation= Email. • Asignatura. Es un dropdown (cuadro desplegable) donde el usuario debe elegir la asignatura para la que se realiza la petición. • Label= Asignatura • Required=yes • Options = Matemáticas | Lengua Castellana | Idioma | Ciencias | Plástica | Música … Cada una en línea aparte. • Aula solicitada. En este dropdown (cuadro desplegable) el usuario elige el Aula de informática a utilizar. • Label= Aula solicitada • Required=yes • Options = Aula 1 | Aula 2 | Aula 3 … • Grupo. Es un dropdown (cuadro desplegable) que recoge el grupo de alumnos con que se ocupará el espacio solicitado.

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0

479

Fecha. Este elemento de tipo DateTimePicker permite al usuario seleccionar el día en un calendario del mes. • Label= Fecha • Required=yes • Format= ddmmyyyy • Hora. En un dropdown (cuadro desplegable) se elige la hora de la sesión. • Label= Hora • Required=yes • Options= 08:00-09:00 | 09:00-10:00 | … • Sistema operativo. Se trata de un RadioButton (Botón de radio) que ofrece la posibilidad de elegir una sola opción entre varias para indicar el sistema operativo que se utilizará en ese espacio. • Label= Sistema operativo • Required=no • Options= Windows XP | Windows Vista | Ubuntu Linux | Mac • Periféricos. En este CheckBox (Casilla de verificación) el usuario podrá marcar una o varias opciones (incluso todas) para indicar el equipamiento adicional que necesitará en ese espacio. • Label= Periféricos • Options= Impresora | Portátil | Cañón proyector | Pizarra interactiva • Observaciones. Mediante este TextArea (área de texto) se recoge información no contemplada en los elementos anteriores. • Label= Observaciones • Required=no • Column Width= 40 (Anchura del cuadro de texto). • Rows=10 (Filas del cuadro de texto). • Enviar. Es el botón de envío. • Submit Text = Enviar. 12. Para insertar una imagen con el logo en la cabecera, abre la barra de herramientas Power Tools (Herramientas avanzadas) y arrastra el elemento Image (Imagen) para situarlo en el encabezado.

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0

480

13. Selecciona el elemento imagen que has situado en En el apartado Properties (Propiedades) de esa imagen introduce la URL de la imagen en la casilla Source-URL. En las casillas Width (Anchura) y Height (Altura) escribe las dimensiones de la misma. 14. Para definir las propiedades generales del formulario haz clic en el botón Properties situado en la barra de herramientas superior. 15. En el panel Properties define estos valores: • Title (Título). Ejemplo: Reserva del Aula de Informática. • Send Post Data (Enviar mensaje con datos): yes • Send e-mail (Enviar mensaje): yes. Para desactivar el envío de datos a la cuenta elige no. • Email. Es la cuenta donde se recibirán los formularios. • Form status (Status del formulario): Enabled. Para desactivar este formulario puedes seleccionar Disabled. 16. Para comprobar su funcionamiento clic en el botón Preview (Vista previa). Puedes rellenar el formulario y enviarlo para luego comprobar la recepción de datos en la cuenta de correo indicada.

5.10.2 Integración HTML de un formulario JotForm
1. Navega al sitio web de JotForm: http://jotform.com 2. Introduce tus credenciales de identificación y pulsa en el botón Login. 3. Clic en el botón my forms

4. En el panel My forms (Mis formularios) haz clic sobre el formulario Reserva de Aula Informática y a continuación pulsa en el botón Source (Código).

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0

481

5. En la Option 1: Embed Form into Your Site (Opción 1: Embeber Formulario en tu sitio web) haz clic en el botón Copy para copiar al portapapeles el código que se muestra: <iframe src= … > </iframe>

6. Abre Kompozer y sobre un documento web nuevo escribe el texto “Reserva del Aula de Informatica” en formato Titulo 1. 7. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 8. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic derecho y elige Pegar. Observa que el código copiado desde Jotform se ha pegado aquí. Clic en el boton Insertar. 9. Pulsa en el botón Guardar, introduce un título de página y guardarla en la carpeta miweb, por ejemplo, con el nombre reserva.html 10. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox.

5.10.3 Consulta/publicación de resultados
JotForm permite la publicación web de los resultados estadísticos de los datos recogidos desde el formulario. 1. Navega al sitio web de JotForm: http://jotform.com 2. Introduce tus credenciales de identificación y pulsa en el botón Login. 3. Clic en el botón my forms

4. En el panel My forms (Mis formularios) haz clic sobre el formulario Reserva de Aula Informática para seleccionarlo y a continuación pulsa en el botón Share (Compartir). 5. En la sección Share Results by Listings (Compartir resultados mediante listados) haz clic en un tipo de listado. Los tipos de listado que se ofrecen son:

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0

482

• • • •

Grid (Cuadrícula). Proporciona código para insertar en una página web los resultados en formato cuadrícula. Calendar (Calendario). Ofrece código para insertar en la web los resultados organizados en un calendario. RSS. Se dispone de un enlace para la suscripción a canales RSS con los resultados. Excel. Permite obtener un archivo XLS que se puede subir y enlazar en nuestra página web.

6. Elige la opción Grid (Cuadrícula). Introduce el título del formulario en la casilla Title y pulsa en el botón Check All para seleccionar todos los datos del formulario.

7. Clic en el botón Preview (Vista previa) para visualizar el informe de tipo Grid. Para terminar pulsa en el botón Publish (Publicar). 8. En el segundo cuadro de código que se muestra You can get the iframe code and embed to your site (Puedes conseguir el código iframe e integrarlo en tu sitio web), haz clic en el botón Copy.

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0

483

9. Abre Kompozer y sobre un documento web nuevo escribe el texto “Reservas realizadas del Aula de Informatica” en formato Titulo 1. 10. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 11. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic derecho y elige Pegar. Observa que el código copiado desde Jotform se ha pegado aquí. Clic en el boton Insertar. 12. Pulsa en el botón Guardar, introduce un título de página y guardarla en la carpeta miweb, por ejemplo, con el nombre listado.html 13. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox.

Servicios Web 2.0 – Polldaddy, encuestas en línea Diseño de materiales multimedia. Web 2.0

484

5.11 Polldaddy, encuestas en línea

Servicios Web 2.0 – Polldaddy, encuestas en línea Diseño de materiales multimedia. Web 2.0

485

5.11 Polldaddy: encuestas en línea
PollDaddy (http://www.polldaddy.com) es una herramienta en línea que permite crear de forma libre y gratuita encuestas y situarlas en tu página web. Para crear tus encuestas es necesario registrarse previamente. Para ello pulsa en el botón Sign up y completa el formulario de inscripción. 1. Abre el navegador web y visita la página de PollDaddy: http://www.polldaddy.com 2. Clic en el botón log in, introduce tus credenciales de identificación y pulsa en el botón Login. 3. Desde la página My polls (Mis encuestas) pulsa en el botón Create a Poll (crear una encuesta) para crear una encuesta. 4. Please enter your poll question here. En este cuadro de texto introduce la pregunta de la encuesta. Ejemplo: ¿Qué sueles comer durante el recreo? 5. Enter your answers here. Introduce tus respuesta aquí. Teclea en cada línea una posible respuesta: Una bolsa de chips | Fruta | Bocadillo | Galletas o bollos | Nada. En el apartado de Opciones puedes configurar algunas de estas opciones: • Multiple Choice (Multiselección). Si activas esta opción el usuario podrá elegir más de una respuesta. • Allow ‘Other’ Answer. Permitir la respuesta ‘Otros’. • Allow your voters to enter an answer of their own. Permitir que el usuario introduzca su propia respuesta. • Randomize Answers (Respuestas aleatorias). Las respuestas de la encuesta aparecerán en un lugar diferente para cada usuario. 6. En la sección Poll Language (Idioma de la encuesta) selecciona como idioma Spanish. 7. Select a style for your poll. Marca la opción PollDaddy Style y luego selecciona una máscara para la encuesta. Por ejemplo: White Plastic Standard. 8. Para terminar pulsa en el botón Save and Continue (Guardar y continuar). 9. En la página Poll HTML Code (Código HTML de la encuesta), pulsa sobre la pestaña lateral derecha Flash Poll Method (Método Flash), haz clic derecho y elige Seleccionar todo sobre el cuadro de texto que muestra el código <embed …> </embed>. A continuación repite ese clic derecho para elegir la opción Copiar.

10. Abre Kompozer y sobre un documento web nuevo escribe el texto “La encuesta de la semana” en formato Titulo 1. 11. Sitúa el cursor debajo del título y a continuación selecciona Insertar > HTML. 12. En el cuadro de diálogo Insertar HTML haz clic sobre el cuadro de texto, haz clic derecho y elige Pegar. Observa que el código copiado desde PollDaddy se ha pegado aquí. Clic en el boton Insertar. 13. Pulsa en el botón Guardar, introduce un título de página y guardarla en la carpeta miweb, por ejemplo, con el nombre encuesta.html 14. Clic en el botón Navegar de la barra de herramientas de Kompozer para visualizar el resultado en el navegador Firefox.

Servicios Web 2.0 – Polldaddy, encuestas en línea Diseño de materiales multimedia. Web 2.0

486

Sign up to vote on this title
UsefulNot useful