Soluciones de tecnologías de                                                FRONT END DEVELOPER                           ...
FRONT END DEVELOPER                                                                                                   www....
FRONT END DEVELOPER                                                                                            www.sistema...
FRONT END DEVELOPER                                                                                               www.sist...
FRONT END DEVELOPER                                                                                                      w...
Upcoming SlideShare
Loading in …5
×

Front end developer

831 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
831
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Front end developer

  1. 1. Soluciones de tecnologías de FRONT END DEVELOPER la información www.sistemass.com Objetivo Al completar este programa elSOBRE LA estudiante estará en capacidad de:ESPECIALIDAD  Desarrollar sitios y aplicaciones web basadas en capas.Front End Developer tiene por  Emplear CSS, HTML JavaScript yobjeto inculcar en el estudiante Frameworks JavaScript basados en los estándares web.el conocimiento necesario para  Conocer las nuevas característicasdesarrollar interfaces de de HTML 5.0 y CSS3.usuario ricas (RIA) haciendo  Desarrollar interfaces ricas (RIA)uso de HTML5. CSS3 y Ajaxindependientemente dellenguaje de programación dellado 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 dondeRIA (en español "aplicaciones Diseñador web, desarrollador web, podrá hacer pruebas reales de susde 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 lamayoría de las característicasde las aplicaciones de Requisitos previos:  Asistencia en línea mediante un Conocimientos básicos de Windows campus virtual para tener acceso aescritorio tradicionales. más información en texto, pdf y video tutoriales para complementarEstas aplicaciones utilizan un Horarios e inicio: conceptos teóricos. www.sistemass.com/Developer/Agenda.phpnavegador web estandarizadopara ejecutarse y por medio decomplementos o mediante unamáquina virtual se agregan las * MODULOS DE LA ESPECIALIDAD DURACIONcaracterísticas adicionales. 1 HTML5 Y CS3 24 HORAS 2 MAQUETACION CON HOJAS DE ESTILO 24 HORASLas RIA surgen como una 3 AJAX Y JQUERY 24 HORAScombinación de las ventajas 4 INTERFACES DE USUARIO EN JQUERY 24 HORASque ofrecen las aplicacionesweb y las aplicacionestradicionales. 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. 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 mayorHTML5 es una colección de facilidad a la hora de codificar nuestro diseñoestá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 lainformació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 delinteractuar 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 futurasStyle 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 parade representación en imprimir / visualizar en pantalla.diferentes dispositivos, ya seanpantallas de equipos de Contenido:escritorio, portátiles, móviles, SESION1 elementos)impresoras u otros dispositivos  Definición de HTML 5  Atributo gradiente de colores encapaces de mostrar contenidos borde con CSS y Firefox  Estructura básicaweb.  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. 3. FRONT END DEVELOPER www.sistemass.com MAQUETACION CON HOJAS DE ESTILO Ventajas de la¿QUÉ ES MAQUETACION maquetación CSSCON HOJAS DE ESTILO?La maquetación por capas,  Separación de forma y contenidotambién llamada maquetación entre HTML y CSSCSS, es una forma de crear  Tráfico en el servidor. Se reduce elwebs 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 elmaquetación tradicional (que caché del navegadorantes 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 cadaMientras que HTML nos elemento de la web.permite definir la estructura  Mantenimiento reducido.  Diseño unificado y flexibilidad parauna página web, las hojas de cambios.estilo en cascada (Cascading  Mejoras en el posicionamiento deStyle Sheets o CSS) son las buscadores debido su código limpioque nos ofrecen la posibilidad y claro.de definir las reglas y estilosde representación endiferentes dispositivos, ya seanpantallas de equipos de Contenido:escritorio, portátiles, móviles,impresoras u otros dispositivos SESION 1capaces de mostrar contenidos  Introducción a la  Tipografía maquetación con CSS  Manejo de imágenesweb.  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. 4. FRONT END DEVELOPER www.sistemass.com AJAX Y JQUERY¿QUÉ ES AJAX? ¿Por qué utilizarAjax es una técnica de HTML5?desarrollo web para crear HTML5 nos permite una mayoraplicaciones 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 codificarEstas aplicaciones se ejecutan nuestro diseño básico.en el cliente, es decir, en elnavegador de los usuariosmientras se mantiene lacomunicación asíncrona con elservidor en segundo plano. Deesta forma es posible realizarcambios sobre las páginas sinnecesidad de recargarlas, loque significa aumentar la Contenido:interactividad, velocidad yusabilidad 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 6JavaScript (framework), creada , MooTools , ExtJS  Color Animation SESION 2inicialmente por John Resig,  Toggle Class • Introducción a JQuery.que permite simplificar la  Add Class • Debug JavaScript: herramientasmanera de interactuar con los para desarrolladores en Firefox  Remove Classdocumentos HTML, manipular (Firebug)  Switch Classel árbol DOM, manejar • La function ready JQuery. SESSION 5 • JQuery Selectores – Seleccionando  Effecteventos, desarrollar elementos con JQuery Parte I  Toggleanimaciones y agregar • JQuery Selectores – Seleccionando  Hideinteracción con la técnica elementos con JQuery Parte II,  ShowAJAX 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. 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 elcomponentes para el usuario puede comunicarse con una máquina,framework jQuery que le un equipo o una computadora, y comprendeañaden un conjunto de plug- todos los puntos de contacto entre el usuario yins, widgets y efectos visuales el equipo. Normalmente suelen ser fáciles de entender y fáciles de accionar.para la creación deaplicaciones web de manerasencilla. ¿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

×