Professional Documents
Culture Documents
5.1 Introducción
Servicios Web 2.0 ::: Introducción 416
Diseño de materiales multimedia. Web 2.0
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 417
Diseño de materiales multimedia. Web 2.0
5.2.1 Introducción
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.
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.
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 420
Diseño de materiales multimedia. Web 2.0
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.
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 421
Diseño de materiales multimedia. Web 2.0
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.
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 422
Diseño de materiales multimedia. Web 2.0
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
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.
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 424
Diseño de materiales multimedia. Web 2.0
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:
donde <url> es la dirección entre comillas que hemos copiado. Los atributos width y
height definen el tamaño del marco interno.
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
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:
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 426
Diseño de materiales multimedia. Web 2.0
5.3 Slide.com:
presentación de
imágenes
Servicios Web 2.0 ::: Slide.com: presentación de imágenes 427
Diseño de materiales multimedia. Web 2.0
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.
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 430
Diseño de materiales multimedia. Web 2.0
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 431
Diseño de materiales multimedia. Web 2.0
5.4 Slideshare:
presentaciones en línea
Servicios Web 2.0 ::: Slideshare: presentaciones en línea 432
Diseño de materiales multimedia. Web 2.0
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.
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 433
Diseño de materiales multimedia. Web 2.0
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 435
Diseño de materiales multimedia. Web 2.0
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.
Notas:
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 439
Diseño de materiales multimedia. Web 2.0
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:
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 442
Diseño de materiales multimedia. Web 2.0
Nota:
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.
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.
10. Pulsa sobre la imagen del album que has creado en el cuadro Photos.
Multiply: repositorio de archivos 445
Diseño de materiales multimedia. Web 2.0
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 446
Diseño de materiales multimedia. Web 2.0
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 447
Diseño de materiales multimedia. Web 2.0
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 448
Diseño de materiales multimedia. Web 2.0
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 449
Diseño de materiales multimedia. Web 2.0
Para realizar esta práctica es necesario disponer de una cámara DV o webcam + micrófono
conectados al equipo.
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).
Nota:
Nota:
Importar vídeos de Youtube y otros servidores a mi cuenta Multiply puede resultar
interesante para evitar los vídeos relacionados inapropiados.
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 452
Diseño de materiales multimedia. Web 2.0
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 453
Diseño de materiales multimedia. Web 2.0
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 456
Diseño de materiales multimedia. Web 2.0
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 457
Diseño de materiales multimedia. Web 2.0
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 458
Diseño de materiales multimedia. Web 2.0
14. Abre Kompozer y selecciona Archivo > Nuevo > Un documento vacío.
15. Sobre la nueva página escribe el título “La Web 2.0” y asígnale el estilo Título 1.
16. Sitúa el cursor en la siguiente línea y a continuación elige Insertar > HTML
17. 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 459
Diseño de materiales multimedia. Web 2.0
Servicios Web 2.0 ::: Youtube: video en streaming 460
Diseño de materiales multimedia. Web 2.0
5.8 Youtube:
vídeo en streaming
Servicios Web 2.0 ::: Youtube: video en streaming 461
Diseño de materiales multimedia. Web 2.0
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. 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 462
Diseño de materiales multimedia. Web 2.0
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:
Ratings (Puntuaciones)
Servicios Web 2.0 ::: Youtube: video en streaming 463
Diseño de materiales multimedia. Web 2.0
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.
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.
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 465
Diseño de materiales multimedia. Web 2.0
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.
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 467
Diseño de materiales multimedia. Web 2.0
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 468
Diseño de materiales multimedia. Web 2.0
5.9 Vídeos
Servicios Web 2.0 ::: Vídeos 469
Diseño de materiales multimedia. Web 2.0
5.9 Vídeos
5.9.1 Vídeos subtitulados en OverStream
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 470
Diseño de materiales multimedia. Web 2.0
10. Clic derecho y selecciona Copiar para copiar este código HTML al portapapeles.
11. Abre Kompozer y sobre un documento HTML nuevo selecciona Insertar > HTML.
12. En el cuadro de diálogo Insertar HTML haz clic derecho y selecciona Pegar.
13. Clic en el botón Insertar.
14. 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 472
Diseño de materiales multimedia. Web 2.0
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.
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 474
Diseño de materiales multimedia. Web 2.0
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. Abre Kompozer y sobre un documento HTML nuevo selecciona Insertar > HTML.
12. En el cuadro de diálogo Insertar HTML haz clic derecho y selecciona Pegar.
13. Clic en el botón Insertar.
14. 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 475
Diseño de materiales multimedia. Web 2.0
5.10 JotForm:
formularios en línea
JotForm: formularios en línea 476
Diseño de materiales multimedia. Web 2.0
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.
7. Ahora vamos a añadirle los elementos del formulario. En la siguiente tabla se recogen
los ítems que contendrá:
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 479
Diseño de materiales multimedia. Web 2.0
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 481
Diseño de materiales multimedia. Web 2.0
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.
JotForm permite la publicación web de los resultados estadísticos de los datos recogidos
desde el formulario.
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 482
Diseño de materiales multimedia. Web 2.0
• 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 483
Diseño de materiales multimedia. Web 2.0
5.11 Polldaddy,
encuestas en línea
Servicios Web 2.0 – Polldaddy, encuestas en línea 485
Diseño de materiales multimedia. Web 2.0
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.
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 486
Diseño de materiales multimedia. Web 2.0