Este documento proporciona información sobre un programa de especialización en Front End Developer. El objetivo del programa es que los estudiantes aprendan a desarrollar sitios y aplicaciones web usando HTML5, CSS, JavaScript y frameworks como jQuery. El programa incluye módulos sobre maquetación, AJAX, interfaces de usuario y otros temas, y los estudiantes aprenderán de forma práctica a través de proyectos.

1. Soluciones de tecnologías de
FRONT END DEVELOPER
la información www.sistemass.com
Objetivo
Al completar este programa el
SOBRE LA
estudiante estará en capacidad de:
ESPECIALIDAD  Desarrollar sitios y aplicaciones web
basadas en capas.
Front End Developer tiene por  Emplear CSS, HTML JavaScript y
objeto inculcar en el estudiante Frameworks JavaScript basados en
los estándares web.
el conocimiento necesario para
 Conocer las nuevas características
desarrollar interfaces de
de HTML 5.0 y CSS3.
usuario ricas (RIA) haciendo  Desarrollar interfaces ricas (RIA)
uso de HTML5. CSS3 y Ajax
independientemente del
lenguaje de programación del
lado del servidor. Metodología:
 Los cursos son totalmente prácticos
enfocados al desarrollo de
proyectos en cada etapa.
¿QUÉ ES RIA?
Las rich Internet applications, o Dirigido a:  El alumno tendrá un hosting donde
RIA (en español "aplicaciones Diseñador web, desarrollador web, podrá hacer pruebas reales de sus
de Internet enriquecidas"), son desarrolladores de dispositivos móviles y proyectos lo cual comprende una
público en general. base de datos.
aplicaciones web que tienen la
mayoría de las características
de las aplicaciones de
Requisitos previos:  Asistencia en línea mediante un
Conocimientos básicos de Windows campus virtual para tener acceso a
escritorio tradicionales. más información en texto, pdf y
video tutoriales para complementar
Estas aplicaciones utilizan un
Horarios e inicio: conceptos teóricos.
www.sistemass.com/Developer/Agenda.php
navegador web estandarizado
para ejecutarse y por medio de
complementos o mediante una
máquina virtual se agregan las * MODULOS DE LA ESPECIALIDAD DURACION
características adicionales. 1 HTML5 Y CS3 24 HORAS
2 MAQUETACION CON HOJAS DE ESTILO 24 HORAS
Las RIA surgen como una 3 AJAX Y JQUERY 24 HORAS
combinación de las ventajas 4 INTERFACES DE USUARIO EN JQUERY 24 HORAS
que ofrecen las aplicaciones
web y las aplicaciones
tradicionales. Buscan mejorar
SKYNET S.A.
la experiencia del usuario. Av. Circunvalación 2456
Urb. Villa Jardín
San Luis, Lima Perú.
Tel.: (511) 437 4125
Móvil: 9933 00805
Nextel: 141*3935
info@sistemass.com
www.skyneterp.com
www.sistemass.com

2. FRONT END DEVELOPER
www.sistemass.com
HTML5 Y CSS3
¿Por qué utilizar HTML5?
HTML5 nos permite una mayor interacción
¿QUÉ ES HTML5? entre nuestras páginas web y contenido media
(video, audio, entre otros) así como una mayor
HTML5 es una colección de
facilidad a la hora de codificar nuestro diseño
estándares para el diseño y básico.
desarrollo de páginas web.
Esta colección representa la ¿Por qué utilizar CSS3?
manera en que se presenta la
información en el explorador
1. Separación del contenido y presentación.
2. Flexibilidad en el diseño.
de internet y la manera de
3. Unificación y uniformidad del diseño del
interactuar con ella. sitio.
4. Optimización de los tiempos de carga y de
¿QUE ES CSS5? tráfico en el servidor.
Mientras que HTML nos
5. Precisión o elasticidad a nivel de fuentes,
capas y otros.
permite definir la estructura
6. Accesibilidad y estructuración.
una página web, las hojas de 7. Limpieza del código fuente.
estilo en cascada (Cascading 8. Compatibilidad y continuidad con futuras
Style Sheets o CSS) son las versiones y navegadores.
que nos ofrecen la posibilidad
9. Estandarización frente a especificaciones
propietarias.
de definir las reglas y estilos
10. Permite la diferenciación de estilos para
de representación en imprimir / visualizar en pantalla.
diferentes dispositivos, ya sean
pantallas de equipos de Contenido:
escritorio, portátiles, móviles,
SESION1 elementos)
impresoras u otros dispositivos
 Definición de HTML 5  Atributo gradiente de colores en
capaces de mostrar contenidos borde con CSS y Firefox
 Estructura básica
web.
 Etiquetando la navegación  Bordes redondeados
 Etiquetando la introducción SESIÓN 4
SESION 2  Múltiples imágenes de fondo
 Etiquetando el área de contenido  Colores RGBA
principal  Word-wrap
 Etiquetando los comentarios  Textos multi-columna
 Etiquetando el formulario para SESIÓN 5
comentario  Bordes con imágenes
 Marcando la barra lateral y pie de  Sombras con box-shadow
pagina  Resplandor exterior
SESION 3  Propiedad background-origin
 Introducción a CSS 3  Introducción a @font-face
 Formas de uso SESION 6
 Atributos de las hojas de estilo  Degradados
 Definición de estilos CSS Shorthand  Animaciones
 Pseudo-element en CSS (pseudo SESION 8
 Trabajo final y examen.

3. FRONT END DEVELOPER
www.sistemass.com
MAQUETACION CON HOJAS DE
ESTILO
Ventajas de la
¿QUÉ ES MAQUETACION
maquetación CSS
CON HOJAS DE ESTILO?
La maquetación por capas,  Separación de forma y contenido
también llamada maquetación entre HTML y CSS
CSS, es una forma de crear  Tráfico en el servidor. Se reduce el
webs más evolucionada y que tamaño de una web entre 40%-
60%.
mejora en mucho a la
 La hoja de estilo se guarda en el
maquetación tradicional (que
caché del navegador
antes se hacía por tablas).  Tiempos de carga menor
 Precisión respecto a la posición,
¿QUE ES CSS5? tamaño y demás atributos de cada
Mientras que HTML nos elemento de la web.
permite definir la estructura
 Mantenimiento reducido.
 Diseño unificado y flexibilidad para
una página web, las hojas de
cambios.
estilo en cascada (Cascading  Mejoras en el posicionamiento de
Style Sheets o CSS) son las buscadores debido su código limpio
que nos ofrecen la posibilidad y claro.
de definir las reglas y estilos
de representación en
diferentes dispositivos, ya sean
pantallas de equipos de Contenido:
escritorio, portátiles, móviles,
impresoras u otros dispositivos SESION 1
capaces de mostrar contenidos  Introducción a la  Tipografía
maquetación con CSS  Manejo de imágenes
web.
 Por qué diseñar con CSS  Aplicando estilos a tablas
 Creando hojas de estilo para  Aplicando formato a Hipervínculos
diferentes medios SESION 5
 Reglas basadas en Id, Tags  Implementando navegación basada
y clases en menús
SESION 2  Posicionamiento absoluto, relativo y
 Selectores básicos y fijo
complejos  Variar el diseño y maquetación con
 Orden de herencia la hoja de estilos
 Diagramación elástica, fija y SESION 6
líquida  Presentación de 960 Grid System
SESION 3 SESION 7
 Atributos Float y Clear para  Blueprint, Framework CSS
diagramar y posicionar SESION 8
elementos  Trabajo final y examen.
SESION 4

4. FRONT END DEVELOPER
www.sistemass.com
AJAX Y JQUERY
¿QUÉ ES AJAX?
¿Por qué utilizar
Ajax es una técnica de HTML5?
desarrollo web para crear HTML5 nos permite una mayor
aplicaciones interactivas o RIA interacción entre nuestras páginas
web y contenido media (video,
(Rich Internet Applications).
audio, entre otros) así como una
mayor facilidad a la hora de codificar
Estas aplicaciones se ejecutan nuestro diseño básico.
en el cliente, es decir, en el
navegador de los usuarios
mientras se mantiene la
comunicación asíncrona con el
servidor en segundo plano. De
esta forma es posible realizar
cambios sobre las páginas sin
necesidad de recargarlas, lo
que significa aumentar la Contenido:
interactividad, velocidad y
usabilidad en las aplicaciones. SESIÓN 1
• Fundamentos de JavaScript. • DOM Manipulación.
• Utilización y ventajas JavaScript. • Eventos JQuery
• Frameworks JavaScript. • Asignación de eventos con jQuery:
¿QUE ES JQUERY?
• Comparación de frameworks métodos bind y live.
jQuery es una biblioteca de JavaScript: Prototype, JQuery , YUI SESION 6
JavaScript (framework), creada , MooTools , ExtJS
 Color Animation
SESION 2
inicialmente por John Resig,  Toggle Class
• Introducción a JQuery.
que permite simplificar la  Add Class
• Debug JavaScript: herramientas
manera de interactuar con los
para desarrolladores en Firefox  Remove Class
documentos HTML, manipular (Firebug)  Switch Class
el árbol DOM, manejar • La function ready JQuery. SESSION 5
• JQuery Selectores – Seleccionando  Effect
eventos, desarrollar
elementos con JQuery Parte I  Toggle
animaciones y agregar
• JQuery Selectores – Seleccionando  Hide
interacción con la técnica
elementos con JQuery Parte II,  Show
AJAX a páginas web. CSS, HTML SESION 7
• JQuery Core • Que es Ajax. Ventajas de uso.
SESIÓN 3 • Ejemplos prácticos:
• Manipulación de los datos del DOM • Modificación de datos sin recargar
• Ventanas de dialogo. la página.
• Validación de formularios SESIÓN 8
SESIÓN 4 • Trabajo final y examen
• JQuery y DOM

5. FRONT END DEVELOPER
www.sistemass.com
INTERFACES DE USUARIO EN
JQUERY
¿Qué es una Interfaz de
¿QUÉ ES JQUERY UI?
usuario?
jQuery UI es una biblioteca de
La interfaz de usuario es el medio con que el
componentes para el usuario puede comunicarse con una máquina,
framework jQuery que le un equipo o una computadora, y comprende
añaden un conjunto de plug- todos los puntos de contacto entre el usuario y
ins, widgets y efectos visuales
el equipo. Normalmente suelen ser fáciles de
entender y fáciles de accionar.
para la creación de
aplicaciones web de manera
sencilla.
¿Qué es la experiencia de
usuario?
La experiencia de usuario es el conjunto de
factores y elementos relativos a la interacción
del usuario, con un entorno o dispositivo
concretos, cuyo resultado es la generación de
una percepción positiva o negativa de dicho
servicio, producto o dispositivo.
Contenido:
SESION 1
SESION 4
 Definición de Interface de usuario
 Slider
(UI).
 Tabs
 Nuevos paradigmas de la web 2
 Position
 Experiencia de usuario
SESION 5
SESIÓN 2
 Autocomplete
 Introducción a JQuery UI
SESIÓN 6
 Draggable
 Plugins JQuery
 Droppable SESION 7
 Resizable  Ejercicio: Creando un escritorio
 Selectable web.
 Sortable SESION 8
SESION 3 Trabajo final y examen.
 Accordion
 Button
 Datepicker
 Dialog
 Progressbar