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.

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

 Ejemplos:

7

 Ejemplos:

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

 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

 Framework web open-source para Java.
 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

 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

 Arquitectura:
MODELO
(POJOs Java)

CONTROLADORES
(Clases Java)

Home.java Login.java
Listeners Listeners
HTTP

HTTP
VISTA
(documentos HTML)

Home.html Login.html

13

 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.

16

JavaScript JQuery
<td> <td>
<script> <select name=“tipoPago” id=‘tipoPago_id’class=“input”>
function tipoPagoOnChangeEvent(value){ <option value=“-1”>
//… </option>
} </select>
</script> </td>
<select name=“tipoPago” id=‘tipoPago_id’class=“input”
onChange=“tipoPagoOnChangeEvent(this.value);”> <input type=“button” id=“btn-siguiente” class=“buttons”
</select> value=“Siguiente ->”/>
</td>
<script>
<input type=“button” id=“btn-siguiente” class=“buttons” //cuando se recarga la página
value=“Siguiente ->”onclick=“javascript:enviarReq();”/> $ (document).ready(function(){
$ (‘#tipoPago_id’).change(function(event)){
<script> //…
//cuando se recarga la página }};
window.onload=function(){ </script>
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/

18

Test de HTML5: 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.

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

 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

22

 File/hardware access
 Native Drag&Drop
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);
Link: https://mozillademos.org/demos/motivational/demo.html#
Link: http://slides.html5rocks.com/#drag-and-drop
 Geolocalization
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude);
//…
}, errorHandler);
Link: http://slides.html5rocks.com/#geolocation

23

 Graphics & multimedia content
 Audio & Video
<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();
Link: http://slides.html5rocks.com/#video-audio
 Canvas

<canvas id="canvas" width="838" height="220"></canvas>
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);

Link: http://slides.html5rocks.com/#canvas-2d
Link: http://craftymind.com/factory/html5video/CanvasVideo.html

24

 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

25

Noemí Arbós & Ester Mengual

26

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

Struts  http://struts.apache.org/#Welcome
 http://struts.apache.org/2.2.3.1/docs/home.html
 http://www.springsource.org/

Spring  http://www.springsource.org/features
 http://www.springsource.org/get-started

 http://wicket.apache.org/
 http://wicket.apache.org/start/quickstart.html
Wicket  http://wicketstuff.org/wicket/index.html
 http://wicket.apache.org/learn/examples/

 http://jquery.com/
jQuery  http://www.slideshare.net/continuumslides/introduccin-a-jquery

 http://www.html5rocks.com/en/
 http://studio.html5rocks.com/
HTML5  http://html5test.com/results.html
 http://html5demos.com/

Tecnologias web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Tecnologias web

Similar a Tecnologias web (20)

Último

Último (20)

Tecnologias web