DXAT Noemí ArbósEster Mengual
2    1. Introducción      1. ¿Qué es un framework web?      2. Historia      3. AJAX    2. Servidor      1. STRUTS      2....
3           ¿Qué es un FRAMEWORK WEB?               Estructura conceptual que facilita el desarrollo y mantenimiento    ...
4       Historia de los frameworks web.
5           AJAX  Asynchronous JavaScript and XML               Conjunto de tecnologías (XHTML + CSS + DOM + XML + Java...
6           AJAX  Asynchronous JavaScript and XML               Conjunto de tecnologías (XHTML + CSS + DOM + XML + Java...
7           AJAX  Asynchronous JavaScript and XML               Conjunto de tecnologías (XHTML + CSS + DOM + XML + Java...
8           Framework web open-source para Java que permite separar            Modelo, Vista y Controlador (Arquitectura ...
9           Características:             Facilidad en diseño, creación y mantenimiento.             Soporte para AJAX. ...
10            Framework web open-source para Java.            Características:                Basado en:              ...
11            Framework open-source para desarrollo de aplicaciones web             para Java.            Modelo GUI (Gr...
12        Arquitectura:                                 MODELO                               (POJOs Java)                ...
13            Características:                Seguro.                Elimina la necesidad de gestionar sesiones a mano....
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»      ...
16                         JavaScript                                                     JQuery     <td>                 ...
17            Otras Características:                Selección/Modificación/Interoperabilidad de elementos DOM           ...
18     Test de HTML5: http://html5test.com/
19                   HTML5 = HTML + CSS + JavaScript        Idea: Estándar que recoja las necesidades de los         desa...
20        Características principales:          Offline    Storage             Web    Storage: guardar datos en el nave...
21        Características principales:          Realtime      communication            Web     Sockets: comunicación di...
22        Características principales:          File/hardware           access             Native     Drag&Drop        ...
23        Características principales:          Graphics     & multimedia content            Audio    & Video          ...
24        Características principales:          CSS3            Nuevos    estilos y efectos.                  Columnas...
25Noemí Arbós & Ester Mengual
26                 http://www.roseindia.net/struts/how-struts-works.shtml     Struts      http://struts.apache.org/#Welc...
Upcoming SlideShare
Loading in …5
×

Tecnologias web

1,166 views

Published on

Presentacion dxat Noemí y Ester.

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
1,166
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tecnologias web

  1. 1. DXAT Noemí ArbósEster Mengual
  2. 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. 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. 4. 4  Historia de los frameworks web.
  5. 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. 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. 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. 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. 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. 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. 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. 12. 12  Arquitectura: MODELO (POJOs Java) CONTROLADORES (Clases Java) Home.java Login.java Listeners Listeners HTTP HTTP VISTA (documentos HTML) Home.html Login.html
  13. 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. 14  Ejemplo:  Más ejemplos: http://wicketstuff.org/wicket/index.html
  15. 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.
  16. 16. 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. 17. 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. 18. 18 Test de HTML5: http://html5test.com/
  19. 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. 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. 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
  22. 22. 22  Características principales:  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. 23. 23  Características principales:  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. 24. 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
  25. 25. 25Noemí Arbós & Ester Mengual
  26. 26. 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/

×