tecnologias web
DESCRIPTION
Presentacion dxat Noemí y Ester.TRANSCRIPT
DXAT
Noemí Arbós
Ester Mengual
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
¿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.
4
Historia de los frameworks web.
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…
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
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
8
Modelo
Controlador Vista
Asociación directa
Asociación indirecta
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.
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
Server Controlador Vista
Modelo Struts-config.xml
Strut Tag Libraries
Resource Properties File
web.xml
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.
10
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.
12
MODELO (POJOs Java)
CONTROLADORES (Clases Java)
VISTA (documentos HTML)
Home.java Login.java
Home.html Login.html
Listeners Listeners
HTT
P
HTT
P
Arquitectura:
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
Ejemplo:
Más ejemplos: http://wicketstuff.org/wicket/index.html
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.
<td> <select name=“tipoPago” id=‘tipoPago_id’class=“input”> <option value=“-1”> </option> </select> </td> <input type=“button” id=“btn-siguiente” class=“buttons”
value=“Siguiente ->”/> <script> //cuando se recarga la página $ (document).ready(function(){ $ (‘#tipoPago_id’).change(function(event)){ //… }}; </script>
16
JavaScript JQuery
<td> <script> function tipoPagoOnChangeEvent(value){ //… } </script> <select name=“tipoPago” id=‘tipoPago_id’class=“input”
onChange=“tipoPagoOnChangeEvent(this.value);”> </select> </td> <input type=“button” id=“btn-siguiente” class=“buttons”
value=“Siguiente ->”onclick=“javascript:enviarReq();”/> <script> //cuando se recarga la página window.onload=function(){ tipoPagoOnChangeEvent(1); } </script>
17
Otras Características: Selección/Modificación/Interoperabilidad de elementos DOM
(Document Object Model). Simplifica el manejo de eventos. Crear efectos visuales: añadir efectos visuales y animaciones. Añadir componentes GUI. Cuadros de dialogo, calendarios, sliders, tabs…
Agregar interacción con AJAX. Manipular estilos CSS (Cascading Style Sheets). Añadir plugins de forma simple.
Ejemplos: http://jqueryui.com/
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
Características principales: Offline Storage Web Storage: guardar datos en el navegador.
Link: http://slides.html5rocks.com/#web-storage
saveButton.addEventListener('click', function () { window.localStorage.setItem('value', area.value); window.localStorage.setItem('timestamp', (new Date()).getTime()); }, false); textarea.value = window.localStorage.getItem('value');
21
Características principales: Realtime communication Web Sockets: comunicación directa con el servidor.
Link: http://slides.html5rocks.com/#web-sockets
Notifications:
Link: http://slides.html5rocks.com/#notifications-api
var socket = new WebSocket('ws://html5rocks.websocket.org/echo'); socket.onopen = function(event) { socket.send('Hello, WebSocket'); };
window.webkitNotifications.createNotification(tweet.picture, tweet.title, tweet.text).show();
22
Características principales: File/hardware access Native Drag&Drop
Link: https://mozillademos.org/demos/motivational/demo.html# Link: http://slides.html5rocks.com/#drag-and-drop
Geolocalization
Link: http://slides.html5rocks.com/#geolocation
document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy'; }, false);
navigator.geolocation.getCurrentPosition(function(position) { var latLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude); //… }, errorHandler);
23
Características principales: Graphics & multimedia content Audio & Video
Link: http://slides.html5rocks.com/#video-audio
Canvas Link: http://slides.html5rocks.com/#canvas-2d Link: http://craftymind.com/factory/html5video/CanvasVideo.html
<audio id="audio" src="sound.mp3" controls></audio> document.getElementById("audio").muted = false; <video id="video" src="movie.webm" autoplay controls></video> document.getElementById("video").play();
<canvas id="canvas" width="838" height="220"></canvas> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100);
24
Características principales: CSS3 Nuevos estilos y efectos.
Columnas. Opacidad/Transparencia. Rounded Corners. Sombras. Animaciones…
Link: http://slides.html5rocks.com/#css-columns Link: http://slides.html5rocks.com/#rounded-corners Link: http://slides.html5rocks.com/#css-animation
Noemí Arbós & Ester Mengual
25
26
Struts http://www.roseindia.net/struts/how-struts-works.shtml
http://struts.apache.org/#Welcome
http://struts.apache.org/2.2.3.1/docs/home.html
Spring
Wicket
jQuery
HTML5
http://www.springsource.org/
http://www.springsource.org/features
http://www.springsource.org/get-started
http://wicket.apache.org/
http://wicket.apache.org/start/quickstart.html
http://wicketstuff.org/wicket/index.html
http://wicket.apache.org/learn/examples/
http://jquery.com/
http://www.slideshare.net/continuumslides/introduccin-a-jquery
http://www.html5rocks.com/en/
http://studio.html5rocks.com/
http://html5test.com/results.html
http://html5demos.com/