2. 2
1. Introducción
1. ¿Qué es un framework web?
2. Historia
3. AJAX
2. Servidor
1. STRUTS
2. SPRING
3. WICKET
3. Cliente
1. JQUERY
2. HTML5
3. 3
¿Qué es un FRAMEWORK WEB?
Estructura conceptual que facilita el desarrollo y mantenimiento
de sitios web dinámicos, aplicaciones web y servicios web.
Ahorra trabajo a bajo nivel.
Promueve el reúso de código.
Pueden incluir:
Librerías (por ejemplo para acceso a base de datos).
Estructuras para plantillas.
Gestión de sesiones (autenticación).
Abstracción de URLs.
Separación entre diseño y contenido.
AJAX.
5. 5
AJAX Asynchronous JavaScript and XML
Conjunto de tecnologías (XHTML + CSS + DOM + XML + JavaScript)
que permiten crear aplicaciones web interactivas:
Modificar la información de una página web sin tener que
recargarla completamente.
Agiliza la interacción con el usuario.
Las aplicaciones pueden enviar o recibir datos del servidor
de forma asíncrona el intercambio no interfiere en la
visualización y comportamiento de la web (concepto RIA).
Ejemplos:
Validación de formularios.
Autocompletado de cuadros de texto…
6. 6
AJAX Asynchronous JavaScript and XML
Conjunto de tecnologías (XHTML + CSS + DOM + XML + JavaScript)
que permiten crear aplicaciones web interactivas:
Modificar la información de una página web sin tener que
recargarla completamente.
Agiliza la interacción con el usuario.
Las aplicaciones pueden enviar o recibir datos del servidor
de forma asíncrona el intercambio no interfiere en la
visualización y comportamiento de la web (concepto RIA).
Ejemplos:
Validación de formularios.
Autocompletado de cuadros de texto…
7. 7
AJAX Asynchronous JavaScript and XML
Conjunto de tecnologías (XHTML + CSS + DOM + XML + JavaScript)
que permiten crear aplicaciones web interactivas:
Modificar la información de una página web sin tener que
recargarla completamente.
Agiliza la interacción con el usuario.
Las aplicaciones pueden enviar o recibir datos del servidor
de forma asíncrona el intercambio no interfiere en la
visualización y comportamiento de la web (concepto RIA).
Ejemplos:
Validación de formularios.
Autocompletado de cuadros de texto…
8. 8
Framework web open-source para Java que permite separar
Modelo, Vista y Controlador (Arquitectura MVC).
Modelo (Action classes) Sistema de gestión de los datos con los que
el sistema opera.
Vista (JSP Pages) Responsable de la interfaz de usuario, presenta el
modelo en un formato adecuado.
Controlador (Servlets) Responde a los eventos de entrada desde la
vista (acciones del usuario). Invoca peticiones al Modelo y la Vista.
Asociación
indirecta
Modelo Asociación
directa
Vista Controlador
9. 9
Características:
Facilidad en diseño, creación y mantenimiento.
Soporte para AJAX.
Facilidad para añadir Plugins (REST, Hibernate…).
Diagrama de flujo:
Browser
Request Response web.xml
Server
Strut Tag
Controlador Vista Libraries
Struts-config.xml Resource
Properties File
Modelo
10. 10
Framework web open-source para Java.
Características:
Basado en:
Inversión de Control(IoC): las librerías llaman al código (menos dependencias).
Orientación a Aspectos(AOP): modularizar las apliaciones.
Modularidad Integración entre APIs y frameworks.
Data Access Framework (usar APIs como JDBC, Hibernate…).
Spring Web MVC.
Remote Access Framework.
Etc.
11. 11
Framework open-source para desarrollo de aplicaciones web
para Java.
Modelo GUI (Graphical User Interface) basado en
Componentes.
Los componentes usan listeners que reaccionan ante peticiones HTTP a
través de enlaces o formularios.
Separa totalmente Vista (HTML) y Lógica (Java).
Uso de un atributo HTML especial (wicket:id) para denotar los componentes
Wicket en la vista.
Cada clase .java tiene su plantilla homologa en HTML.
Utiliza modelos de datos POJO.
13. 13
Características:
Seguro.
Elimina la necesidad de gestionar sesiones a mano.
Los componentes Wicket son reusables.
Con Java se puede extender de otros componentes.
Creación de Panels.
El uso de validadores de formularios es simple y flexible.
Agregar interacción con AJAX es muy simple.
Manejo de eventos es muy transparente.
14. 14
Ejemplo:
Más ejemplos: http://wicketstuff.org/wicket/index.html
15. 15
Es una librería open-source de JavaScript rápida y concisa.
«Escribir menos, hacer más»
Provee nuevas características a JavaScript.
Sintaxis simple de aprender.
Cross-browser: Compatible con la mayoría de navegadores.
El código es independiente del navegador.
Permite cambiar el contenido de una página web sin
recargarla.
Programación no invasiva: separa Código JavaScript y
Código HTML.
19. 19
HTML5 = HTML + CSS + JavaScript
Idea: Estándar que recoja las necesidades de los
desarrolladores web: redefine elementos (etiquetas) ya
existentes en HTML.
Objetivo: navegador estándar, abierto y único.
Ventajas:
Menos recursos Más eficiencia.
20. 20
Características principales:
Offline Storage
Web Storage: guardar datos en el navegador.
saveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
Link: http://slides.html5rocks.com/#web-storage
21. 21
Características principales:
Realtime communication
Web Sockets: comunicación directa con el servidor.
var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
socket.send('Hello, WebSocket');
};
Link: http://slides.html5rocks.com/#web-sockets
Notifications:
window.webkitNotifications.createNotification(tweet.picture, tweet.title, tweet.text).show();
Link: http://slides.html5rocks.com/#notifications-api