AW – Aplicaciones Web
SMR - 2
SMR Sistemas Microinformáticos en Red 2º Curso
AW Aplicaciones Web
UD 5 Aplicaciones Web para crear recursos
IES BALMIS Dpto Informática Curso 2018-2019 Versión 2 (12/2018)
UD5 – Funcionamiento de las Aplicaciones Web
1 / 11
AW – Aplicaciones Web
SMR - 2
UD7 – Aplicaciones Web para crear recursos ÍNDICE 1. Servicios ofrecidos por Aplicaciones Web 1.1 Servicios en Internet 1.2 Tipos de servicios
2. Compartir recursos web
2.1 Compartir recursos en Gestor de Contenidos (Blog) o página HTML
UD5 – Funcionamiento de las Aplicaciones Web
2 / 11
AW – Aplicaciones Web
SMR - 2
1. Servicios ofrecidos por Aplicaciones Web 1.1 Servicios en Internet El avance de la tecnología en comunicaciones y en el desarrollo y diseño web (con HTML5, CSS y Javascript) ha favorecido la existencia de multitud de herramientas gratuitas online que ofrecen servicios que hasta ahora necesitaban de software instalado en nuestro ordenador. Las características de este tipo de herramientas es muy similar: • Disponen de un registro usuarios • Cada usuario puede crear materiales multimedia con las características y funcionalidad de la herramienta que se ofrece • Los materiales se almacenan en un repositorio (almacén de materiales online) • Los usuarios asignan permisos a cada material: ◦ De visibilidad: privado, público o personalizado. ◦ De interacción: consultar, edición, compartir, comentar. Los materiales públicos creados en estas herramientas suelen presentarse mediante un buscador y permiten que cualquier persona los consulte y los comparta.
1.2 Tipos de servicios Existen miles de servicios y aparecen nuevos cada día.
Clasificar al gran cantidad de este tipo de servicios es complicado pero mostraremos algunos ejemplos.
UD5 – Funcionamiento de las Aplicaciones Web
3 / 11
AW – Aplicaciones Web
SMR - 2
Discos duros virtuales Los llamados discos duros virtuales permiten alojar archivos en la nube. Entre las características de estas herramientas web2.0 se encuentra la posibilidad de compartir el enlace entre usuarios y dependiendo de la herramienta la posibilidad de edición de forma colaborativa, es decir, varios usuarios a la vez. Hemos utilizado Google Drive pero en el enlace siguiente podemos ver algunos otros: http://ticteando.org/discos-duros-virtuales/ Documentos Estos servicios web nos permiten alojar documentos en la red y hacerlos visibles en nuestras web, blogs. Muchas de ellas sirven para publicar documentos en formato libro. Por ejemplo, con Issuu podemos mostrar un visor de documentos interactivo con transiciones entre páginas muy aparente. En el enlace siguiente se puede consultar una revista: https://issuu.com/revistaqtravel/docs/qtraveldigital8 Para ver un conjunto de este tipo de servicios podemos consultar el siguiente enlace: http://ticteando.org/documentos/
DOCUMENTOS: Ejercicio 7.1 Abre la aplicación web https://issuu.com/ 1. Busca recursos de INFORMÁTICA 2. Selecciona alguno y visualiza sus páginas, observando la animación que incluye 3. Pulsa en el icono SHARE de alguno de estos recursos y copia la URL del recurso Envía un email a tu profesor con el asunto b07ejer01 que contenga la URL del recurso.
UD5 – Funcionamiento de las Aplicaciones Web
4 / 11
AW – Aplicaciones Web
SMR - 2
Audiovisuales Con estas utilidades podemos trabajar el conjunto completo de posibilidades audiovisuales, es decir, la edición de vídeo, audio e imágenes. http://ticteando.org/audiovisuales/ AUDIOVISUALES: Ejercicio 7.2 Deseamos obtener 15 segundos de un vídeo existente en Youtube. Para ello seguirás los siguientes pasos: 1. Accede a la herramienta http://www.clipconverter.cc/ 2. Puedes utilizar por ejemplo el enlace al vídeo https://www.youtube.com/watch?v=kZn70V39Nis 3. Selecciona la calidad del vídeo a 360p 4. Indica el nombre del archivo a generar: b07ejer02-tu-nombre.mp4 5. En formato de conversión selecciona MP4 6. Desmarca el "inicio del vídeo" y "final del vídeo" 7. Indica el minuto y segundo de inicio y fin desde el que comenzará el trozo a descargar, pero que haya sólo 15 segundos de diferencia. 8. Pulsa en comenzar y espera el archivo. Nota: es posible que si seleccionas un vídeo con derechos de copyright no funcione. Entrega el archivo obtenido al profesor a través de FTP del aula. AUDIOVISUALES: Ejercicio 7.3 Deseamos utilizar un editor de imágenes para aplicar filtros de forma online. Vamos a utilizar el servicio PIXLR Express. Sigue los siguientes pasos: 1. Busca en Google una foto y captura su URL. Comprueba que sólo es la foto pulsando en "Ver Imagen". 2. Abre el editor de imágenes https://pixlr.com/express/ 3. Pulsa sobre Open URL. Copia la URL de la foto. 4. Aparecerá el editor. Aplica algunos cambios de efectos o filtros. 5. Descarga la nueva foto pulsando en Save Envía un email al profesor con el asunto b07ejer03 que contenga. 1. URL de la foto original 2. La foto descargada con los cambios aplicados.
UD5 – Funcionamiento de las Aplicaciones Web
5 / 11
AW – Aplicaciones Web
SMR - 2
Organizadores de contenidos Estas herramientas web2.0 nos sirven para organizar contenidos a través de mapas conceptuales, esquemas y mapas mentales. Para ver un conjunto de este tipo de servicios podemos consultar el siguiente enlace: http://ticteando.org/oganizar-contenidos/ ORGANIZADORES DE CONTENIDOS: Ejercicio 7.4 Abre la aplicación web https://es.padlet.com 1. Regístrate 2. Crea un muro 3. Pulsa doble click sobre el título y cambia el fondo y el título 4. Arrastra varios archivos (fotos, PDF, …) al muro 5. Cuando hayas terminado pulsa en compartir y hazlo público. Comparte tu muro PADLET en tu Google Sites. Envía un email a tu profesor con el asunto b07ejer04 que contenga la URL de la página de tu Google Sites que contiene el muro.
Presentaciones Con estas utilidades podemos realizar presentaciones. La mayoría de un entorno sencillo y facilidad de uso. http://ticteando.org/herramientas-web-2-0-para-realizar-presentaciones/
Cada una tiene su forma de presentar el contenido y existen muchas presentaciones públicas para ver resultados. PRESENTACIONES: Ejercicio 7.5 Abre la galería de recursos de POWTOON https://www.powtoon.com/powtoon-gallery/ y consulta algunos de los vídeos obtenidos con esta herramienta. Envía un email a tu profesor con el asunto b07ejer05 que contenga la URL del vídeo que más te ha gustado. PRESENTACIONES: Ejercicio 7.6 Abre la galería de recursos de PREZI https://prezi.com/explore/ y consulta algunos de los trabajos obtenidos con esta herramienta. Envía un email a tu profesor con el asunto b07ejer06 que contenga la URL de la presentación que más te ha gustado.
UD5 – Funcionamiento de las Aplicaciones Web
6 / 11
AW – Aplicaciones Web
SMR - 2
2. Compartir recursos web 2.1 Compartir recursos en Gestor de Contenidos (Blog) o página HTML Para poder compartir un recurso de internet en nuestra página web o en un CMS como Wordpress, se utiliza la etiqueta <iframe> como ya vimos en la unidad 2. Los servicios de internet suelen ofrecer un visor que facilita la presentación. Youtube Una vez localizado un vídeo tendremos el enlace. Por ejemplo con youtube tendríamos el enlace a un vídeo: https://www.youtube.com/watch?v=BWb6ri3ePew El enlace contiene el código del vídeo que lo identifica de forma única. Y la URL del mismo vídeo para incluir en HTML sería: https://www.youtube.com/embed/BWb6ri3ePew Por lo que al incluirlo en la etiqueta iframe quedaría: <iframe src="https://www.youtube.com/embed/BWb6ri3ePew" width="560" height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe>
Como se puede observar, disponemos de los atributos width y height para indicar el ancho y alto del iframe y frameborder para ajustar el grosor del borde. Cada servicio incluye en su visor algunos atributos extra para añadir funcionalidad. Así tenemos en el ejemplo de Youtube el atributo allow para indicar que comience la reproducción automáticamente y allowfullscreen que permite aumentarlo a pantalla completa. YOUTUBE: Ejercicio 7.7 Incluye un vídeo de Youtube con este código en tu página de Google Sites. Envía un email a tu profesor con el asunto b07ejer07 que contenga la URL de la página de tu Google Sites que contiene el vídeo de Youtube.
UD5 – Funcionamiento de las Aplicaciones Web
7 / 11
AW – Aplicaciones Web
SMR - 2
Google Maps El servicio de google maps nos permite compartir mapas creados por nosotros también a través de <iframe>. Para ello debemos acceder a nuestro mapa, abrirlo en "Edición" pulsando en "Abrir Google Maps" Para poder compartir en a través de HTML deberemos dar acceso público pulsando en "Compartir". En la pantalla de configuración activaremos el permiso "Público en la Web".
Para obtener el código html con iframe, pulsaremos en icono de ajustes del mapa, y selecionaremos "Insertar en mi sitio web".
GOOGLE MAPS: Ejercicio 7.8 Incluye un mapa hecho por ti con marcas/cahinchetas de lugares en tu página de Google Sites. Envía un email a tu profesor con el asunto b07ejer08 que contenga la URL de la página de tu Google Sites que contiene el mapa.
UD5 – Funcionamiento de las Aplicaciones Web
8 / 11
AW – Aplicaciones Web
SMR - 2
Scribd El servicio de scribd permite almacenar archivos en internet de múltiples formatos y proporciona un visor para mostrar el contenido. Necesitaremos, como en youtube, el código de un contenido de scribd que podemos buscar en el portal y luego completar la etiqueta de iframe: <iframe src="https://www.scribd.com/embeds/4171892/content?start_page=1&view_mode=scroll" width="100%" height="100%" frameborder="0"> </iframe>
Podemos observar que el visor de scribd incluye funcionalidad con parámetros en en enlace en vez de atributos en la etiqueta iframe. Así tenemos: • start_page: indica la página donde comenzará la presentación • view_mode: permite realizar la presenación utilizando el scroll vertical para pasar páginas con el valor scroll o bien en formato de diapositivas con el valor slideshow. SCRIBD: Ejercicio 7.9 Abre la aplicación web https://www.scribd.com/ 1. Regístrate en este servicio de SCRIBD. 2. Publica algún archivo en PDF realizado por ti con LibreOffice Writer que contenga texto y fotos con varias páginas. 3. Inserta en tu página de Google Sites el visor con el código HTML del iframe Envía un email a tu profesor con el asunto b07ejer09 que contenga la URL de la página de tu Google Sites que contiene el visor del scribd.
UD5 – Funcionamiento de las Aplicaciones Web
9 / 11
AW – Aplicaciones Web
SMR - 2
Box Box es un servicio de disco duro online similiar a "Google Drive", "Dropbox" o "One Drive". Para poder disponer de una cuenta es necesario registrarse. Para ello sigue los siguientes pasos: • Entra en https://www.box.com/pricing/individual y regístrate • Una vez confirmado el email, pulsa en login o accede a: https://account.box.com/login • Al entrar pulsa sobre "Personal use" que será gratuito y tendrá un máximo de 10 GB y un límite de 250 MB por archivo. • Accede a tu perfil y cambia al idioma "Español". BOX: Ejercicio 7.10 Una vez hayas accedido a tu cuenta de box, podrás crear y subir archivos de la mayoría de formatos. Al pulsar sobre uno de estos archivos aparecerá un botón Compartir. Pulsa sobre él y podrás utilizar el enlace URL para compartir tu recurso. Nosotros vamos a obtener el código HTML para incluirlo en Google Sites. Para ello hay que pulsar son los puntos para que muestre el menú contextual y pulsar sobre "Más acciones → Widget integrado". Inserta en tu página de Google Sites el visor con el código HTML del iframe Envía un email a tu profesor con el asunto b07ejer10 que contenga la URL de la página de tu Google Sites que contiene el visor del archivo de Box.
Issuu ISSUU: Ejercicio 7.11 Abre la aplicación web https://issuu.com 1. Regístrate en este servicio de ISSUU 2. Publica algún archivo en PDF realizado por ti con LibreOffice Writer que contenga texto y fotos con varias páginas. 3. Pulsa en SHARE y copia el código HTML con <iframe> 4. Inserta en tu página de Google Sites el visor Envía un email a tu profesor con el asunto b07ejer11 que contenga la URL de la página de tu Google Sites que contiene el visor de tu archivo ISSUU.
UD5 – Funcionamiento de las Aplicaciones Web
10 / 11
AW – Aplicaciones Web
SMR - 2
Padlet Vamos a utilizar el muro creado en PADLET https://es.padlet.com para compartir el recurso en Google Sites. PADLET: Ejercicio 7.12 Accede de nuevo a tu muro de padlet creado en el Ejercicio 7.4 y pulsa en Compartir/Inscrutar Selecciona en Privacidad las siguientes permisos de: - Público - Se puede leer Luego en Compartir/Exportar debes pulsar en - Insertado en tu blog o página web Inserta en tu página de Google Sites el visor con el código HTML del iframe Envía un email a tu profesor con el asunto b07ejer12 que contenga la URL de la página de tu Google Sites que contiene el muro.
Voki VOKI: Ejercicio 7.13 Abre la aplicación web https://www.voki.com/site/create 1. Regístrate en este servicio como Student 2. Pulsa en CREATE varias veces hasta disponer del personaje que vayas a seleccionar 3. Cámbiale el aspecto como desees 4. Cuando hayas terminado, pulsa en el icono altavoz e introduce un mensaje 5. Graba tu VOKI Comprobarás que en tus creaciones dispones del VOKI creado. Pulsa en el icono de compartir, luego en el de la cadena y copia la URL. Deberás obtener algo similar a: http://tinyurl.com/ya8b584d 6. Crea el código HTML en un contenedor <iframe> con ancho de 500px y alto de 800px, con la URL obtenida e insértalo en tu página de Google Sites el visor. En el ejemplo sería: <iframe src="http://tinyurl.com/ya8b584d" width="500px" height="800px" /> 7. Inserta en tu página de Google Sites el visor de VOKI con tu URL Envía un email a tu profesor con el asunto b07ejer13 que contenga la URL de la página de tu Google Sites que contiene el visor de tu VOKI.
UD5 – Funcionamiento de las Aplicaciones Web
11 / 11