Tecnologias web

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

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/

http://jqueryui.com/

Test de HTML5: http://html5test.com/

18

http://html5test.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');

http://slides.html5rocks.com/

https://demos.mozilla.org/en-US/

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();

http://slides.html5rocks.com/

https://demos.mozilla.org/en-US/

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);

https://mozillademos.org/demos/motivational/demo.html

http://slides.html5rocks.com/

https://demos.mozilla.org/en-US/

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);

http://slides.html5rocks.com/

https://demos.mozilla.org/en-US/

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

http://slides.html5rocks.com/

https://demos.mozilla.org/en-US/

Noemí Arbós & Ester Mengual

25

26

Struts http://www.roseindia.net/struts/how-struts-works.shtml