Diseño Web:

Introducción
Navegadores y editores de páginas web; Diferentes tipos de dispositivo; HTML: estructura y semántica; CSS: formato y maquetación; JavaScript: interactividad; Contenidos estáticos y dinámicos; Lado cliente, lado servidor; Concepto de sitio y página web

Interficie y entorno de trabajo WYSIWYG
Modos de visualización: código, diseño, en vivo; Configuración de paneles; Configuración de navegadores y extensiones; Configuración de servidor FTP; El entorno de trabajo.

Elementos
Texto. Propiedades y formatos . Estilos y etiquetado; Imágenes. Tipos y formatos utilizados. Edición e integración con Adobe Photoshop. Mapas de imágenes. Efectos; Hipervínculos. Tipos de enlaces y atributos; Formularios. Maquetación y diseño. Integración con programas de envío. Validaciones; Tablas. Importación de datos externos;

Introducción a CSS
Concepto de hojas de estilo: dónde declarar código css. Asociar hojas de estilo a documentos;Panel CSS;Tipos de selectores: redefinir elemento HTML, clase, id, contextules, grupo de selectores; Selección múltiple de clases CSS: simultáneamente a un mismo elemento HTML, de forma asistida; Maquetación uso de etiquetas div desde cero (concepto de float, clear); Layouts predeterminados de DreamWeaver CS6; Creación de un menú de navegación

Módulos de javascript (widgets de Spry)
Panel contraible, Acordeón, Paneles en fichas, Barra de menús, XML; Comportamientos: pop-menu, mostrar-ocultar, alert…

Uso de APIs externas
Concepto de mash-up; Utilización de APIs e integración en el proyecto (Google Maps, YouTube, etc)

Puesta online y validaciones
Comprobación de vínculos y compatibilidad con los diferentes navegadores; Validación de estándares; Sincronización

Novedades en HTML5 y CSS3
Estudio de los nuevos elementos y ejemplos de aplicación; La importancia de la semántica en la estructura web y la etiquetación de contenidos para el posicionamiento en buscadores

Media Queries CSS
Creación de layout; Medias CSS2: impresión, dispositivos móviles antiguos; Medias condiciones CSS3: detección de distintos anchos de pantalla escritorio, iPad, iPhone

Maquetación utilizando Responsive Web Design
Layout de rejilla líquida. Adaptación y reestructuración de contenidos sensibles a distintos tamaños de pantalla.

HTML5
Etiquetas semánticas: header, footer, nav, section, article, aside; Modernizr y compatibilidad con navegadores antiguos; Trabajo off-line; Audio y video nativo;SVG archivo vectoriales nativos;Formularios mejorados

CSS3
Aplicación de las nuevas propiedades y atributos. Ejemplos de uso;Incrustación de fuentes;Nuevo panel de animaciones CSS3

WebFonts
Configurar conjuntos de fuentes web compatibles;Estudio de las diferentes alternativas (Cufón, Google fonts, Typekit, etc)

Edge Animate:

Qué es Edge Animate e Interficie

• Animación HTML5 vs Flash-SWF. Descarga, requerimientos mínimos. Versión CC trial o subscripción Creative Cloud. Compatibilidad entre versiones.
• Recorrer ventanas. Herramientas. Teclas aceleradoras. Espacios de trabajo. Cambiar idioma.
• Paneles: Escenario, Línea de tiempo, Elementos, Propiedades (ver equivalencia con reglas CSS).

Generación de contenido gráfico e importación a Edge

• Flash: reutilizar contenido gráfico.
• Illustrator y Photoshop: exportación de múltiples páginas, en formato jpg, png, SVG (vectorial HTML5). 
• Panel Propiedades: dimensiones y color del escenario…
• Importación y multi-importación: archivos gráficos soportados. Activos carpeta images.
• Selección y Edición de objetos: Herramienta de selección y Transformar. Alinear, distribuir, organizar (orden de apilamiento).

 Animaciones no interactivas

• Tipos de animación: keyframing, Pinning (inversa-directa), Mostrar-ocultar, FlipBook.
• Reemplazar imagen y editar en origen.
• Efectos de aceleración Easing a canales de animación: lineal, aceleración, frenado, rebote…
• Añadir animación a contenido HTML existente.
• Símbolos y anidación. Compartir símbolos (importación-exportación).  
• Rutas de movimiento transformables.
• Máscaras de recorte y filtros.
• Diseño líquido: objetos con escala y posición porcentual. Centrado y escalado del Escenario.
• Textos: Fuentes web. Texto vivo seleccionable e indexable en Google. Animación con propiedades de texto p.e. tamaño, interletrado… 

Animaciones interactivas con fragmentos de código

Se obtienen sentencias predefinidas, sin necesidad de escribir código.

• Animación con bucle, asignación de acciones a un Activador. 
• Hipervínculos: a URL páginas web remotas. 
• Textos dinámicos: cambiar el contendido de una caja de texto dinámicamente. 
• Obtener símbolo: llamar a la línea de tiempo independiente de un símbolo, desde otro nivel.

• control audio, etc… 

Audio

• Importación archivos de audio compatibles con HTML5 mediante un nuevo Panel, sin escribir código. 
• Asociar eventos de audio a objetos o a un activador en la línea de tiempo.
• Crear con transiciones con propiedad volumen para intensificar o desvanecer sonido.

 Animaciones interactivas avanzadas

• Conmumtador Botón desplegar-replegar menú: Control dinámico de la línea de tiempo con JavaScript. Etiquetas-label. Variables Boolean y condicionales.
• Drag and Drop: Arrastrar y soltar objetos. 
• Random: animación con movimiento aleatorio.

• Efecto Paralax: animación interactiva sincronizada p.e. con la posición de la barra de scroll.  
• Cargar contenido HTML dentro un objeto.
• Carga de scripts: importación de bibliotecas JavaScript (p.e. jQueryUI…) mediante el nuevo Panel.

 Testear, probar la animación en:

• in-stage: en el escenario. in-browser: en el navegador. Asignar distintos navegadores de escritorio.
• simulador-IOS: viewport. Dispositivos: smartphone o tablet (iPad, iPhone, Android…)

 Pre-publicación y publicación 

• Pantalla de Precarga para web y DPS. Pantalla de Nivel-inferior para navegadores antiguos que no soportan HTML5.
• Integración con Dreamweaver CS6 y CC. Publicaciones digitales: DPS, IbooksAuthor.

Novedades y mejoras de la versión Edge Animate CC 3.0 

• Audio: importación archivos de audio compatibles con HTML5 mediante nuevo Panel, sin escribir código. Asociar eventos de audio a un activador en la línea de tiempo o a objetos y crear transiciones (p.e. intensificar o desvanecer sonido).
• Centrado y escalado del Escenario: manteniendo la proporción respecto a la ventana del navegador.
• Imagen de póster .OAM con transparencia: para DPS actualmente no soportada, para publicaciones PDF, sólo PNG y JPG.
• Animación con rutas de movimiento mejoradas: basado en trazado vectoriales editables, opción de auto-orientación y escalar y girar.
• Evento swipe: barrido horizontal a derecha e izquierda con el ratón o dedo.
• Herramienta cuentagotas: tomar y almacenar muestras de color de objetos del escenario.
• Carga de scripts: añada bibliotecas JavaScript (p.e. jQueryUI…) para ampliar sus proyectos Animate con el nuevo panel de carga de scripts. La importación puede ser desde fuentes locales y en línea.

En Microgestió ofrecemos de manera directa, sin trámites, un descuento en nuestros cursos para los siguientes colectivos:

15% de descuento para Estudiantes.
15% de descuento para Desempleados.
15% de descuento para Autónomos.

Además si vienes al curso con 1 amigo te ofrecemos un 5% de descuento adicional y si vienes con 2 un 10%. *

Empresas:
Realizamos los trámites necesarios para gestionar la bonificación del curso mediante la Fundación Tripartita para la Formación en el Empleo sin ningún coste adicional.

2 alumnos inscritos en el mismo curso 5% de descuento.*
3 alumnos inscritos en el mismo curso 10% de descuento. *

* Descuentos no acumulables a otras promociones.