Tecnologias web
Upcoming SlideShare
Loading in...5
×
 

Tecnologias web

on

  • 1,073 views

Presentacion dxat Noemí y Ester.

Presentacion dxat Noemí y Ester.

Statistics

Views

Total Views
1,073
Views on SlideShare
1,073
Embed Views
0

Actions

Likes
0
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tecnologias web Tecnologias web Presentation Transcript

  • DXAT Noemí ArbósEster 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  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  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  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.  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  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  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.
  • 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  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  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  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  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
  • 25Noemí 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/