BITÁCORA DE ESTUDIO DE PROBLEMÁTICA. TUTORÍA V. PDF 2 UNIDAD.pdf
Front end developer
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