Unidad 2 
En esta unidad desarrollarán una aplicación HTML5 multimedia, que finalizará con el Proyecto a presentar en el Cuatrimestral.
Por lo tanto el desarrollo se basará en el guión multimedia como fuente de documentación del proyecto.
La herramienta elegida es Google Web Designer por ser una herramienta dea animación multimedia HTML5, multiplataforma y de distribución gratuita.
Contenidos
- Creación y modificación de contenido HTML5. Texto, imágenes, video, audio. Uso de CSS3 y de herramientas 3D
- Animación multimedia HTML5. Linea de tiempo. Fotogramas. Objetos y Paǵinas.
- Componentes y Eventos de Google Web Designer.
Creación y modificación de contenido HTML5.
Herramienta de Texto
Con la herramienta Texto podemos crear diferentes clases de texto, es decir, tanto fijos como variables. También podremos aplicarle distintos estilos CSS como font-weight, font-size, color sólo que interactivamente con la herramienta o bien modificando el estilo CSS que la herramienta crea por omisión.
Respecto a los selectores de estilos CSS que la herramienta crea por omisión, siempre es lo mejor utilizar nombres que sean significativos o tengan que ver con lo que estamos haciendo, esto todavía es más importante cuando añadimos comportamiento mediante programación a los elementos.
Seguidamente se listan diferentes tutoriales y ayudas:
Biblioteca de Recursos - uso de imágenes
Con la Biblioteca de Recursos podemos añadir imágenes, audio y video a nuestro proyecto; ya sea en forma local o mediante DoubleClick Studio de Google.
En el caso particular de las imágenes nos interesa la administración local, y no DoubleClick Studio. Desde el botón Añadir Elemento prodremos añadir las imágenes que necesitos a nuestro proyecto. También se puede crear una carpeta nueva para contener las imágenes o bien borrar los elementos previamente añadidos.
Algo que es posible hacer directamente desde la herramienta es ajustar el tamaño de las imágenes, utilizando para ello la opción propiedades y tamaño de la solapa Propiedades; sin embargo, como se puede apreciar en el Video que hemos subido en la respectiva sección, no es la mejor opción. En realidad cuando trabajamos en este tipo de proyectos es importante utilizar no sólo el guión multimedia sino también previamente optimizar las imágenes, puesto que el contenido es HTML5.
A cualquier imagen se le pueden aplicar estilos CSS ya sea en forma directa o mediante el uso de eventos, en forma particular o en combinación con otros elementos, como botones.
Seguidamente se listan diferentes tutoriales y ayudas:
- Ayuda de GWD - Uso de imágenes y videos
- Librería de Recursos video sobre el uso local de la Librería de Recursos
- Integración de la Librería de Recursos con Double Click Studio video básico sobre la Integración de la Biblioteca de Recursos con Studio Double Click
- Eventos - parte 1 una introducción básica al manejo de eventos
- Videos en la Sección Recursos / Videos
En la sección Recursos/Videos he subido unos ejemplos, que lógicamente por ser una herramienta Beta, pues nos encontraremos con algunas dificultades, totalmente solucionables.
Agregando Video y Audio HTML5
Agregar un Video en GWD no es complicado mientras sea formato HTML5: mp4, ogg o web.
Agregar Audio es un poco más complicado porque no admite mp3 sino sólo formatos de audio soportados por HTML5, esto es mp4,ogg y wav.
Hemos desarrollado unos videos explicativos puesto que deberemos convertir el audio a uno de estos formatos si tenemos el archivo en mp3. He utilizado sólo formato ogg pero sería interesante probar otros formatos como el mp4 o el wav.
Para convertir un formato de archivo se pueden utilizar diversas herramientas de conversión, tanto en Linux como en Windows si preferimos aplicaciones de escritorio o bien se pueden utilizar conversores vía web.
Los ejemplos en todos los casos utilizan el modo local de almacenamiento en la Librería de Recursos; es decir, dentro de la carpeta Assets del proyecto.
Seguidamente se listan tutoriales y ayudas:
Utilizando las herramientas 3D
Google Webdesigner cuenta con varias herramientas 3D. Lo más importante es diferenciar entre las herramientas que afectan los planos de la animación (x,y,z) de aquellas que afectan a un componente determinado.
La herramienta Rotar en Fase 3D lo que permite es utilizar los diferentes planos, previamente podemos además habilitar la grilla 3D desde el menú principal de la herramienta.
En cambio las herramientas Girar Objetos 3D y Traslación de Objetos 3D son aplicables a objetos individuales
Seguidamente se listan tutoriales y ayudas:
Utilizando varias páginas
Con Google Webdesigner podemos trabajar con más de una página. El concepto es similar a las escenas de Flahs. Si bien el lienzo de cada página, es decir la capa principal, está bloqueda es posible cambiarle el color y controlar los eventos necesarios para pasar de una página a otra.
Seguidamente se listan tutoriales y ayudas:
Animación multimedia HTML5.
Animaciones - Modo Avanzado
Como sabemos la herramienta permite dos modos: rápido y avanzado. El modo avanzado nos permite tener control sobre la línea de tiempo, añadiendo fotogramas y easings personalizados.
Seguidamente se listan tutoriales y ayudas:
Componente: Galería de Imágenes Deslizables
Ya hemos visto otros componentes como por ejemplo Video, Audio y Video Youtube así como el de Área Sensible, Botón de Imágen utilizados en el proyecto real.
Otro componente que puede ser muy útil y que está muy vinculado a la animación HTML5 son las galerías de GWD. En particular la de Imágenes Deslizantes es sumamente versátil, como puede apreciarse en los videos que hemos subido.
En realidad esta galería también permite vincular videos pero hay que utilizar grupos (propiedad que no hemos abordado) y en este caso se debe deshabilitar la función de deslizar.
Seguidamente se listan tutoriales y ayudas:
Software
El software que se necesita tener instalado es
- Planilla de Cálculo o Procesador de Texto: importante para la elaboración del guión multimedia
- Google Web Designer
- Software de Tratamiento de imágenes en formato bitmap: Photoshop o Gimp
- Software de Tratamiento de imágenes en formato vectorial: Illustrator o Corel
- Software editor de HTML5: Google Web Designer permite editar el código HTML5, sin embargo si queremos tener más control sobre el código podríamos utilizar también alguna de estas alternativas que además son gratuitas:
- Netbeans IDE versión (HTML5/javascript) para Linux, Mac y Windows;
- Notepad++ sólo para Windows;
Recursos
Webs para validación HTML5 y tests de Performance
Validadores HTML5 y CSS3
Performance
- https://testmysite.thinkwithgoogle.com el nuevo sitio de testing de Google: Think With Google;
- https://developers.google.com/speed/pagespeed/insights/ es el sitio oficial de Google;
- https://www.google.com/webmasters/tools/mobile-friendly/ es el sitio oficial de Google para móviles;
- http://www.webpagetest.org/ este sitio es sumamente interesante puesto que muestra cuánto tiempo tarda en cargarse el primer byte o First Byte Load Time, así como información sobre cómo optimizar las imágenes jpg;
- https://gtmetrix.com/ este sitio es interesante porque podemos testear no sólo con Page Speed de Google sino con Yslow de Yahoo;
- http://tools.pingdom.com/fpt/ este sitio es otro muy utilizado;
Libros Electrónicos
Pendiente
Archivos Fuentes
Pendiente
Videos
Para ingresar a esta sección del sitio web deberá validar sus datos
Prácticos
Aúlicos
Pendiente
Proyecto
TPP-1
Crear Guía Multimedia del Proyecto Elegido:
- Descargar el archivo XLS correspondiente a la Guía Multimedia .
- Completar la Guía completa (todas las solapas) del mismo siguiendo como modelo (no copiarlo o será tenido por no presentado) los ejemplos contenidos en el archivo zip .
Recordar que los archivos de ejemplo son sólo un modelo a seguir y que ustedes deben completar todas las solapas.
Es importante, tener en cuenta que esta Guía Multimedia está sujeta a ajustes permanentes. Además como les comenté en clase, pueden tener que presentarla con posterioridad con los ajustes que les pida, ya sea concomitantemente con los prácticos siguientes o inclusive en la estapa del cuatrimestral.
La Guia es la Documentación del Proyecto y está sujeta a ajustes y avances, y por lo tanto la deben ir completanto y/o ajustando en forma conjunta con el Proyecto desarrollado con GWDesigner. Por lo general los elementos multimedia que sufren más cambios son los videos, audios y párrafos, ya sea porque no nos gustaron o se nos ocurrió otra cosa.
Tendrán que enviar lo siguiente:
- El archivo Excel o Calc con la Guía Multimedia del Proyecto completa.
- El nombre de archivo deberá seguir el siguiente formato: TPP1-TemaProyecto-Apellido-cursoDivision.extensión(Ejemplo: TPP1-Spurs-Carreras-57.xls)
- La fecha de entrega: 04/09/2019 para 5to 3ra y 05/09/2019 para 5to 7ma
- Medio de entrega: Aula Virtual solamente
TPP-2
Está formado por:
- Avance del proyecto con la herramienta Google Web Designer(GWD).
Aplicación con GWD
Debe subirse a Google Drive, One, DropBox, Mega o cualquier otro almacén de archivos el avance del proyecto plasmado en la aplicación, considerando lo siguiente:
- La aplicación debe tener un avance de al menos en el 50% o más (si son 4 páginas, deben estar completas 2, si son 5 ó 6, deben estar completas 3)
- Pero deben tener en cuenta los siguientes requisitos:
- Imágenes de Fondo o Canvas (esto es a elección) en todas las páginas;
- Menú en todas las páginas realizado con Botones de Texto los cuales deben tener navegabilidad entre todas las páginas lo cual significa que cada página tiene que contar con los eventos correctos para ir de una página a las demás, como hemos visto en clase;
- Respecto de los botones en sí mismos y para cada página:
- cada bobón tiene que tener el CSS separado de su posición respecto de la apariencia,
- la apariencia del botón activo debe ser diferente
- cada botón que no es activo debe tener el CSS3 con el efecto hover
- componente Video, que puede ser propio o de youtube, en esta oportunidad al menos uno
- componente Audio (formato mp3 u ogg), en este práctico al menos un audio
Los puntos anteriores van en las 2 (o más páginas obligatorias, dependiendo del total de págians de cada aplicación). Cualquier duda pregunten.
El segundo requisito (botones de texto y navigabilidad) de no estar presente es motivo de desaprobación del práctico.
Tendrán que enviar el link compartido o para descargar de su Google Drive, One, Mega o Dropbox, que debe contener lo siguiente:
- La carpeta completa del Proyecto Google WebDesigner (no la previsualización) que pueden zipear la carpeta completa y subirla al Drive, Dropbox, etc. compartiendome el línk mediante correo electrónico.
- Si utilizan un zip para subir la carpeta GWD del proyecto o el Excel, tienen que comprobar en su computadora que el zip/rar está bien creado y no tiene errores, es decir, que se puede descargar (esto es un buen hábito inclusive a tener en cuenta para la Universidad, o les ponen un 1(uno) si mandan mal las cosas porque no las pueden corregir)
La fecha tope de entrega: Miércoles 25 de Septiembre de 2019 para 5to 3ra y Jueves 26 de Septiembre de 2019 para 5to 7ma con el link pegado en el práctico del aula virtual La entrega se puede hacer desde hoy, 18 de Septiembre de 2019
TPP-3
Avance Proyecto - GWD del Tema Elegido:
En esta oportunidad deberá consignarse el vínculo ya se trate de Google Drive, One, Mega o DropBox, y compartir el vínculo pegándolo en la entrada correspondiente del Aula Virtual.
No se admitirán los envíos mediante correo electrónico ni las consultas por este medio, para eso está el Aula Virtual
Aplicación con GWD
Como este práctico es el trayecto final del proyecto elegido por ustedes las consignas son las mismas que el Integrador 1er Cuatrimestre 2019; y quienes lo entregen en fecha (o fecha prorrogada - leer en el Aula) si les da el promedio tendrán aprobado el cuatrimestral:
La fecha de entrega: hasta el Miércoles 5 de Junio de 2019 para 5to 3ra y Jueves 6 de Junio de 2019 para 5to 7ma por el Aula Virtual
La fecha de prórroga inamovible: hasta el Miércoles 12 de Junio de 2019 para 5to 3ra y Jueves 13 de Junio de 2019 para 5to 7ma por el Aula Virtual