w w w . d u o c . c l / e d u c a c i o n c o n t i n u a

2015

Diplomado

Diseño y desarrollo web

Escuela de Administración y Negocios

Duoc UC | Educación continua

Diplomado

Diseño y desarrollo de web Escuela de Administración y Negocios

Diversas empresas del rubro del diseño y desarrollo de sitios web, así como empresas productivas que poseen áreas de

diseño, han solicitado a nuestra institución, la capacitación especializada de sus trabajadores en aplicaciones de la línea

Adobe, dada la vanguardia y calidad tecnológica de sus programas. El propósito es validad e incrementar conocimientos

y habilidades en el uso y aplicación de los programas Adobe, su integración y su óptima utilización.

Mejorar la calidad del producto final y por ende la

satisfacción del cliente, es la consecuencia que

persiguen las empresas. Emprendedores

independientes de rubro del diseño web, solicitan de

manera permanente a nuestro centro, especialización

en programas Adobe y su integración. El propósito es

actualizar e incrementar conocimientos, dada la

demanda del mercado en el diseño y desarrollo de sitios

de alto nivel tecnológico.

DIRIGIDO A: Profesionales del área multimedia, diseñadores gráficos, publicistas, comunicadores audiovisuales, artistas

visuales, docentes y profesionales afines que deseen actualizar sus conocimientos en las nuevas tecnologías aplicadas al

diseño y creación de páginas web.

¿Por qué estudiar en Duoc UC?

El programa de Educación Continua de Duoc UC, ofrece actividades de capacitación con programas diseñados por

nuestras nueve Escuelas e impartidas en las regiones Metropolitana, Valparaíso y Bío Bío. Estos cursos son

gestionados sobre la base de los conocimientos y experiencia adquiridos por Duoc UC, a través del contacto

permanente con distintos actores involucrados en el mercado laboral y desarrollados con eficiencia y calidad basados

en el modelo educativo de Duoc UC.

Tratándose de una institución fundada por la Pontificia Universidad Católica de Chile, Duoc UC participa de su

vocación de servicio a la educación del país. Este signo distintivo se expresa en un proyecto educativo que reconoce,

como responsabilidad inherente, el constituirse en un paradigma de gestión privada en el ámbito de la educación,

como cabal expresión del principio de libertad de enseñanza.

PROGRAMA

Al término de este Diplomado el alumno será capaz de:

Reconocer y aplicar técnicas de planificación, maquetación y diseño de un sitio web mediante el uso de los programas

especializados de Adobe: Fireworks, Dreamweaver, Flash y Edge Animation.

Aplicar e incorporar dentro de sus conocimientos y habilidades, técnicas y herramientas de avanzada para el desarrollo

de un sitio web asociadas a las aplicaciones Adobe, tales como programación html, php/mysql, hojas de estilo CSS,

herramientas SEO, Joomla , Wordpress y desarrollo para móviles en JQuery Mobile.

Unidad de Aprendizaje N° 1 Conceptos introductorios, planificación y diseño del

sitio web (9 Horas).

Unidad de Aprendizaje Nº 2 Creación de prototipos web con Adobe Fireworks (12

Horas)

Unidad de Aprendizaje Nº 3 Introducción a Adobe Dreamweaver (18 Horas)

Unidad de Aprendizaje Nº 4 HTML y CSS en Dreamweaver (24 Horas)

Unidad de Aprendizaje Nº 5 Desarrollo de sitios web responsivos (12 Horas)

Unidad de Aprendizaje Nº 6 Desarrollo de web movil con JQuery Mobile (12 Horas)

Unidad de Aprendizaje Nº 7 Integración de aplicaciones para animaciones

interactivas (18 Horas)

Unidad de Aprendizaje N°8 Integración de animaciones y efectos con JQuery (12

Horas)

Unidad de Aprendizaje N°9 Desarrollo de sitios dinámicos con PHP/MYSQL en

Dreamweaver (30 Horas)

Unidad de aprendizaje N°10

Introducción a CMS Joomla/Wordpress (15 Horas)

Unidad de aprendizaje N°11 Introducción a herramientas Seo (3 Horas)

CONTENIDOS

Unidad de Aprendizaje N°1 Conceptos introductorios, planificación y diseño del sitio web (9hrs)

Objetivo

Identificar los conceptos introductorios de planificación y diseño de un sitio web

Contenidos

Conceptos Introductorios y de planificación al diseño web. Objetivo, propósito, audiencia y necesidades de un sitio

web.

Identificación de los objetivos, audiencia y necesidades de un sitio web.

Identificación del contenido relevante y apropiado para una página web.

Términos y conceptos relacionados al Copyright.

Estándares de accesibilidad.

Conceptos básicos de Internet: Web, protocolos, vínculos, lenguaje HTML, servidor web.

Imágenes vectoriales versus mapa de bits.

Planificación y diseño del sitio web: diseño del sitio y diseño de página.

Conocimiento sobre diagramas de flujo, wireframes y storyboards.

Conceptos y principios de diseño.

Principios básicos de usabilidad, legibilidad y accesibilidad de la web.

Unidad de Aprendizaje N°2: Creación de prototipos web con Adobe Fireworks (12 horas)

Objetivo

Crear prototipos mediante la utilización del programa Adobe Fireworks

Contenidos

Creación de prototipos web con Adobe Fireworks

Introducción y área de trabajo de Fireworks: interfaz de Fireworks, panel de herramientas, panel de

propiedades, configuración de un documento, organización en capas, visualización de archivos.

Dibujo vectorial, texto y manipulación de objetos: aprendizaje y uso de las herramientas de dibujo vectorial,

creación de formas básicas, transformación de objetos, aplicación de colores, trazos y rellenos, insertar y

formatear texto.

Importación y transformación de imágenes: importación de imágenes de mapas de bits, aplicación de

herramientas mapa de bits, uso de las herramientas de retoque, aplicación de filtros.

Maquetación web en Fireworks: optimización de documentos, exportación del archivo optimizado.

Interactividad en Fireworks: creación de divisiones, zonas interactivas, creación de menú emergente.

Uso de Fireworks como herramienta de prototipo web: creación y edición de botones, barra de

navegación, exportar archivos de imagen y HTML.

Unidad de Aprendizaje N° 3: Introducción a Adobe Dreamweaver (18 horas)

Objetivo

Crear sitios web mediante la utilización del programa Adobe Dreamweaver

Contenidos

Introducción y creación de un sitio con Adobe Dreamweaver

Estructura HTML: etiquetas básicas.

Elementos de la interfaz de Dreamweaver: vistas, espacio de trabajo personalizado, panel Propiedades, panel

Insertar, panel Activos, Panel archivos, selector de etiquetas.

Creación de un nuevo archivo: definir un sitio en Dreamweaver, crear nombrar y guardar una nueva página

HTML, añadir título.

Organización y adición de contenido en Dreamweaver: establecer y modificar propiedades de página, establecer

color e imágenes de fondo, inserción y formato de texto, insertar tabla, insertar archivos SWF, creación de

estilos.

Utilización de diseños CSS predefinidos en Dreamweaver: adaptación de maqueta Fireworks.

Trabajo con páginas, vínculos y barra de navegación: duplicación de páginas, vínculos relativos al sitio, vínculos

de correo, vínculos URL.

Creación de formulario: insertar formulario, incluir elementos de formulario.

Publicación del sitio: administración de sitios locales, configurar servidor remoto, publicación del sitio.

Integración de Adobe Flash con Dreamweaver: introducción a Flash, interfaz, animaciones predefinidas,

configuración de publicación, insertar archivos swf y flv en Dreamweaver.

Unidad de Aprendizaje N°4: HTML y CSS en Dreamweaver (24 horas)

Objetivo

Aplicar programación HTML y hojas de estilo CSS mediante el uso de Adobe Dreamweaver para la edición de contenidos

Contenidos

HTML y CSS en Adobe Dreamweaver

Introducción a HTML: qué es el HTML, diferencias entre HTML y HTML5, etiquetas: sintaxis HTML, comentarios y

símbolos especiales.

Técnicas de aplicación de código HTML desde Dreamweaver: utilización de panel de código, inspector de

etiquetas, añadir código HTML en Dreamweaver, depuración de código en diferentes navegadores, configurar

preferencias para trabajo con código, buscar y reemplazar etiquetas.

Estructura del lenguaje HTML y su funcionamiento: estructura de documentos HTML, etiquetas para formato de

texto, etiquetas y atributos de imagen, etiquetas y atributos de estructuras tablas y div, etiquetas y atributos de

estructuras iframe.

HTML5: etiquetas semántica, etiquetas para formularios y validación, etiquetas para audio y video.

Introducción a las CSS: navegador, autor y usuario, diferencias entre CSS2 y CSS3, tipos de CSS, selectores, tipos

de selectores, herencia y orden de lectura, propiedades de elementos.

Plantillas en base a CSS: diseño plantillas con hojas de estilos CSS, modelo de caja: diseño de estructuras Div,

asociadas a estilos CSS, la propiedad Float y Clear, plantillas para etiquetas HTML5, estilos para formulario,

diseños fijos y flexibles.

CSS3: fondos múltiples y tamaños, efectos: transiciones, transparencias, sombra, bordes redondeados,

animaciones, fuentes personalizadas.

Herramientas Dreamweaver para el manejo de estilos CSS: creación y uso de hoja de estilos de cascada (CSS)

con Dreamweaver, adjuntar, vincular, importar y editar una hoja de estilos en Dreamweaver, consulta de

medios e Dreamweaver: vista previa para dispositivos, depuración y compatibilidad con navegadores.

Unidad de aprendizaje N°5: Desarrollo de sitios web Responsivos (12 horas)

Objetivo

Aplicar componentes para el desarrollo de sitios web Responsivos a dispositivos mediante Adobe Dreamweaver

Contenidos

Desarrollo de sitios Web Responsivos

Significado de Responsive Web y su importancia.

Tamaños estándares y resoluciones.

Uso de consultas de medios (Media Queries): sintaxis, inclusión en bloques y en enlaces a estilos.

Crear consultas de medios automatizadas con Dreamweaver.

Formatear estilos para escritorio, tablets y móviles.

Carga de imágenes, adaptación y rendimiento en móviles.

Estructuras flexibles y responsivas a partir de Frameworks.

Diseño de cuadrícula fluida con Dreamweaver

Unidad de aprendizaje N°6: Desarrollo de sitios móviles con jQuery Mobile (12 horas)

Objetivo

Aplicar componentes para el desarrollo de sitios web móviles con jQuery Mobile en Adobe Dreamweaver

Contenidos

Desarrollo de sitios móviles con jQuery Mobile.

Definición y usos de jQuery Mobile.

Descargar e incluir librerías.

Herramientas jQuery Mobile en Dreamweaver.

Concepto de página, páginas externas y sintaxis.

Roles.

Insertar elementos: Barras de navegación, listas, listas interactivas y formularios.

Control de transiciones.

Control de eventos táctiles.

Personalización de UI y paleta de colores.

Emuladores y Simuladores.

Unidad de Aprendizaje N° 7: Integración de aplicaciones para animaciones interactivas (18 horas)

Objetivo

Integrar aplicaciones para animaciones en Adobe Edge Animate

Contenidos

Introducción e integración de aplicaciones a Adobe Edge Animate.

Conceptos básicos y área de trabajo de Adobe Edge Animate: conocer la interfaz de Edge, espacio de trabajo,

utilización de los paneles, herramientas básicas, configuración del escenario.

Creación de gráfica en Edge: importación de imágenes, insertar texto.

Manipulación de activos: transformación de objetos, alinear, distribuir y organización de elementos, mostrar y

ocultar elementos.

Línea de tiempo y animación: fotogramas clave, transiciones, aceleración, movimiento invertido y ajustes finos

de transiciones.

Accionadores y acciones: aplicación de acciones a la línea de tiempo.

Trabajo con símbolos: incorporación y manejo de símbolos en Edge.

Integración de archivos html en Edge: abrir html directamente en Edge.

Integración de aplicaciones gráficas a la web: preparando material desde Adobe Photoshop, preparando

material desde Adobe Illustrator.

Unidad de aprendizaje N°8: Integración de animaciones y efectos con jQuery (12 horas)

Objetivo

Obtener los conocimientos y habilidades para añadir interactividad a la interface web a partir de la librería Javascript

jQuery

Contenidos

Integración de animaciones y efectos con jQuery

Introducción a jQuery.

Descarga de librerías.

Incluir jQuery en páginas web, sintaxis.

Selectores y manipulación de atributos.

Manipular CSS desde iQuery.

Efectos: animación, aparecer, desaparecer, transformación.

Incorporar librería jQuery UI : drag-and-drop, listas, acordeón, etc.

Sliders y galerías Lightbox.

Unidad de Aprendizaje N°9: Desarrollo de sitios dinámicos con PHP/MYSQL en Dreamweaver

(30 horas)

Objetivo

Aplicar componentes del servidor PHP y la base de datos MySQL utilizando como vínculo Adobe Dreamweaver

Contenidos

Sitios dinámicos con PHP/MySQL en Adobe Dreamweaver

Introducción a las paginas dinámicas, servidores y lenguajes dinámicos.

Instalación de servicios: MAMP - WAMP: instalación y prueba de apache, PHP, MySQL, configuración de

Dreamweaver para sitios dinámicos, estructura de directorios.

Base de datos MySQL: introducción a las bases de datos, tipos de datos, normalización de bases de datos,

introducción al phpmyadmin, creación de base de datos, creación de tablas, introducción a consultas SQL,

importar, exportar datos.

Introducción a PHP: sintaxis de PHP, salida a pantalla, variables, incluir - requerir, condicionales, bucles,

formularios.

Dreamweaver dinámico: conceptos básicos, conexión a la base de datos, creación de consultas y juego de

registros, tabla dinámica, recuento de registros, paginación de juego de registros, visualizando imágenes

dinámicas, modificar registros, eliminar registros.

Autentificación de usuarios: la base de datos, conectarse y desconectarse del sistema, restringir el acceso a

páginas, comprobar nuevo nombre de usuario.

Publicación: publicación de sitio dinámico con web remoto.

Ejercicios: creación de un buscador, envío de correos y sitio autoadministrable.

Unidad de aprendizaje N°10: Introducción a CMS Joomla/Wordpress (15 horas)

Objetivo

Instalar y crear contenido web a utilizando las aplicaciones CMS Joomla y Wordpress

Contenidos

Herramientas CMS (Sistemas de administrador de contenidos)

Introducción a Wordpress: wordpress.com v/s wordpress.org, instalar en servidor local - remoto, crear base de

datos, panel de administración, ajustes de configuración, panel multimedia, gestión de usuarios.

Gestión de contenidos: administrar contenidos, crear y administrar entradas, crear y administrar páginas,

categorías, gestión de comentarios.

Temas, widget y plugins: instalar temas, configurar widgets, instalar plugins.

Introducción a Joomla: archivos de instalación, instalar en servidor local - remoto, crear base de datos, panel de

administración, ajustes de configuración, panel multimedia, gestión de usuarios.

Gestor de contenidos: secciones, categorías y artículos, gestión de artículos, gestión de menús, presentación de

artículos.

Componentes, módulos y plugins: componentes para contacto, encuestas, banner, configurar módulos, instalar

plugins, instalar extensiones instalar plantillas.

Unidad de aprendizaje N°11: Introducción a Herramientas Seo (3 horas)

Objetivo

Aplicar las herramientas Seo para el posicionamiento estratégico de un sitio web

Contenidos

Herramientas Seo

Investigación y estrategia: palabras claves, lista de competidores, obtención de palabras claves.

Evaluación: estructura semántica, técnicas para escribir contenidos, tiempo de descarga de una página web, uso

indebido de tablas anidadas, antigüedad del dominio, ranking de la página de Google.

Optimización: título, meta de descripción - meta de palabras claves, atributo Alt, mapa de sitio web, enlaces

internos, popularidad de los enlaces.

Seguimiento y mejoras: Introducción a Google Webmaster tools y Google Analitics.

FORMAS DE PAGO

EMPRESAS:

Se debe enviar una Orden de compra de la Empresa, a nombre de:

Fundación Instituto Profesional Duoc UC

72.754.700-2

PARTICULAR:

Tarjetas de crédito bancarias

Transferencia electrónica y pago en efectivo con un 5% de descuento

Se aceptan hasta 3 cheques con 1 al día.

DESCUENTOS:

Los alumnos egresados o titulados de carreras de pregrado en Duoc UC tienen un 15% descuento sobre

el valor del programa.

*Duoc UC se reserva el derecho de suspender o retrasar cualquiera de sus Cursos o Diplomados en caso de no contar con el quorum necesario para

ser dictado.

*Descuentos no acumulables.