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.