CURSO ADOBE MUSE 2014+Tienda Online+Edge Animate CC VIDEO 1. Presentación del curso. VIDEO 2. Relleno del navegador y relleno de página.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "CURSO ADOBE MUSE 2014+Tienda Online+Edge Animate CC VIDEO 1. Presentación del curso. VIDEO 2. Relleno del navegador y relleno de página."

Silvia Acosta Revuelta
hace 8 años
Vistas:

1 CURSO ADOBE MUSE 2014+Tienda Online+Edge Animate CC VIDEO 1. Presentación del curso. VIDEO 2. Relleno del navegador y relleno de página. En este capítulo veremos cómo enfrentarnos a un proyecto nuevo, recopilar información, inspiración y comenzamos con los primeros pasos iniciales en el proyecto que vamos a ir maquetando. Una bonita web completa sobre el tema de Ferrari, donde veremos el proceso completo hasta su publicación. Vemos también el concepto de páginas maestras, muy útil en la planificación de cualquier sitio web.

2 VÍDEO 3: Maquetando la página HOME (I) Trabajaremos en la primera página del proyecto, la página HOME, donde comenzaremos a crear ya los contenidos. En este caso, comenzamos por añadir una imagen que ocupará el 100% del ancho del navegador y veremos cómo trabajar con las Capas. Por último, importamos un botón de Photoshop con sus capas correspondientes. VIDEO 4. Efectos de desplazamiento. Un recurso muy utilizado en las páginas web más modernas es el desplazamiento de objetos por el navegador. En este video, aprenderas a crear esas animaciones de manera muy sencilla y a través de unos ejercicios muy visuales. Además, a utilizar la opacidad o transparencia, velocidad etc... VÍDEO 5: Maquetando la página HOME (II) Continuamos el proyecto Ferrari, añadiendo más contenidos, como las zonas del <HEAD> (cabecera) y a utilizar para ello los efectos de desplazamiento que vimos en el capítulo anterior. Además veremos cómo fijar objetos en el navegador y añadiremos unos botones de redes sociales desde la Biblioteca, importando directamente desde un fichero.mulib. Por último trabajamos el apartado noticias de la HOME.

3 VÍDEO 6: Maquetando la página HOME (III) La página web Ferrari va tomando forma y continuamos maquetando contenidos. Trabajamos con los textos que encontraremos en la carpeta Recursos y con los que podremos ir copiando-pegando de manera muy sencilla. Aprenderemos en este capítulo a crear y editar los Estilos, tanto de párrafo, carácter y gráficos, cada uno con sus peculiaridades. VIDEO 7. MENÚ PRINCIPAL. Creamos la estructura del proyecto desde al área de Plan y también el menú principal con todos los botones correspondientes. Veremos cómo funcionan los diferentes estados de los botones (normal, RollOver, Pulsado y Activo). VÍDEO 8: Maquetando la página HOME (IV) Vamos a ir dejando ya finalizada nuestra página HOME, añadiendo más contenidos y viendo diferentes modos de incluir imágenes y trabajar con los rellenos (mosaico etc...). Crearemos un baner de publicidad para la tienda Online y por último, añadiremos un Widget de Google Maps en la página.

4 VÍDEO 9: Animación con Edge Animate CC Animación interactiva completa. Este capítulo lo veremos integramente en Adobe Edge Animate CC y crearemos desde cero una aplicación interactiva. En ella, podremos ver dos pilotos de la escuderia Ferrari y podremos interactuar con ellos, creando la programación tanto de los botones como de la línea de tiempo. Veremos el área de trabajo de Edge Animate y también cómo exportar los ficheros para su publicación HTML. Video 10: SEGUNDA PÁGINA MAESTRA. Creamos una segunda página maestra y veremos las caracteristicas de trabajar con varias de estas páginas maestras. Además, continuando nuestro proyecto, crearemos las páginas destino de las noticias y cómo repercutirá esto en la estructura del sitio web. También configuraremos el pié de página (Footer) en la zona inferior del navegador. Por último, aprenderemos a trabajar con las anclas para movernos entre diferentes secciones de la página y con los hipervínculos. Video 11: NOTICIAS- MULTIMEDIA-TIENDA y CONTACTO. En este capítulo iremos maquetando las páginas que nos quedan del proyecto. Importaremos el fichero de Adobe Edge Animate dentro de la página y también la tienda virtual (solo el código, ya que la tienda la veremos

5 más adelante). Por último, crearemos un formulario de contacto y añadiremos algunos vídeos de Youtube en Multimedia. VÍDEO 12: Dominio y alojamientos gratuitos con Hostinger. Un interesante capítulo donde veremos cómo crear y configurar un alojamiento y dominio gratuito para subir los contenidos del proyecto Ferrari y, de este modo, tenerlo subido y accesible en Internet. Usaremos la opción de Cargar en FTP directamente desde Adobe MUSE para transferir nuestros archivos al servidor gratuito. VÍDEO 13: Diseño de contenidos para tabletas y moviles. Vamos a crear un diseño para dispositivo móvil a partir del diseño ya terminado para Ordenador. Veremos cómo trasladar la maquetación para verla en una pantalla más grande a una pantalla de un SmartPhone. Crearemos un botón especial para pulsar en un móvil y lo configuraremos a través de unos Widgets de Adobe MUSE para que se despliegue y nos muestre las opciones de navegación.

Video 14: TIENDA VIRTUAL (I) Video 15: TIENDA VIRTUAL (II) En los capítulos 14 y 15 veremos cómo instalar y configurar las opciones iniciales de una tienda Online (gratuita hasta 10 artículos) y

6 Video 14: TIENDA VIRTUAL (I) Video 15: TIENDA VIRTUAL (II) En los capítulos 14 y 15 veremos cómo instalar y configurar las opciones iniciales de una tienda Online (gratuita hasta 10 artículos) y aprenderemos a trabajar el BackEnd (zona interna), es decir, configurar las diferentes opciones de los envios, tarifas, artículos, promociones, etc... y en el video 15, veremos la parte que los clientes van a visualizar (FrontEnd). Generaremos el código que nos servirá para insertar la tienda dentro de nuestro proyecto Ferrari. Todas las imágenes, textos y ficheros necesarios para crear nuestra tienda los encontraremos en la carpeta Recursos. Video 16: TRUCOS, CONSEJOS y despedida... Para despedir el curso, veremos pequeños trucos que nos servirán para optimizar nuestro trabajo con Adobe MUSE y que no hemos visto en capítulos anteriores. Sobretodo orientados a ganar en productividad en maquetar los contenidos.

Documentos relacionados

Movistar Tu Web Manual de Usuario

Movistar Tu Web Manual de Usuario Contenido 1. Introducción... 1 2. Visión general de la aplicación online Tu Web... 2 3. Páginas... 3 Añadir una nueva página o una carpeta... 4 Editar páginas... 4 4.