SEMINARIO 2

1. SEMINARIO 2 Miembros del grupo: Juan Francisco García Jorge Mahecha Sergi Mellado

2. Índex 1. Wicket 2- Responsive Web Design 3. Vaadim HTML5 4. JQUERY 5. Bootstrap 6. Diversas Demos

3. 1. Wicket • ¿Que son los Wickets? • Escrito por  Jonathan Locke, liberado en 2005 y en 2007 se une a la fundación Apache. • Es un framework basado totalmente en Java para aplicaciones web. • Lo que implica programación orientada a objetos y a componentes. • Pero sin perder las caracteristicas HTTP, como puede ser los REQUESTS,RESPONSE o guardar la sesiones de los usuarios. • Seria algo parecido a Javascript pero del lado del servidor, es decir primero trabajas con los datos y después generas el codigo HTML. • Paginas HTML muy sencillas ya que todo esta en el servidor.

4. Wicket • Frameworks similares (orientado a objetos) • GWT (from Google) -> Trabaja más del cliente. • JSF (from Oracle) • Spring MVC • Por que elegir Wicket? • 100% opensource. • Poca intrusión de Java en el código HTML. • Java puro. • Una persona puede trabajar independientemente en la pagina HTML y otro en la clase Java.

5. Wicket • Crear un proyecto.

6. Wicket • Página inicial (HomePage.java y HomePage.html) • Cada página web tendrá dos archivos: • 1 clase y 1 archivo html (con el mismo nombre). • Cada nueva pagina debe tener un extends de WebPage para heredar los atributos de una página web y un constructor.

7. Wicket • ¿ Cómo relacionamos Java y HTML? • Poco intrusivo. • Simplemente poniendo wicket:id=“myid” a las etiquetas HTML en los cuales queramos modificar. • Y utilizando el id en la clase Java para modificar el contenido. • Si hemos definido un wicket:id en el archivo html debemos definirlo en la clase Java  En caso contrario dará error.

8. Wicket • Errores más comunes. • Nos olvidamos de declarar el id en la Clase. • 2. Caso opuesto. Olvidamos declarar el id en el HTML.

9. Wicket DEMO http://www.wicket-library.com/wicket-examples/ajax/form?3 http://www.wicket-library.com/wicket-examples/ajax/choice?2 http://www.wicket-library.com/wicket-examples/navomatic/

10. 2. Responsive Web Designer (I) • Objetivo principal: diseñar un diseño web para todos los dispositivos (Web forAll) • No logrado al 100%. • Combinación de recursos HTML y CSS para una mejor ajuste del contenido web al ancho de las pantallas de los diferentes dispositivos. • Ej. Dispositivos: tablets, PCs, smartphones… • Diferentes CSS para diferentes dispositivos.

11. 2. Responsive Web Designer (II) • Reducción de costes de diseño y mantenimiento web. • Mejor impacto en el cliente. • Optimización en la actualización del contenido.

12. 3. Vaadin Html5 (I) • Vaadin Framework es una aplicación web de Java para la implementación de frameworks, diseñada para la creación y mantenimiento de aplicaciones web de alta calidad con interfaces muy sencillas. • Diseño de webs dinámicas e interactivas usando solo código JAVA. • No se tiene la necesidad de recurrir a JavaScript ni a HTML

13. 3. Vaadin Html5 (II) • Distribución funcionalidades: • Composites: página web ensí. • Widgets: pequeñas aplicaciones dirigidas al cliente. • Themes: para la visualización del contenido (ficheros CSS – relacionado RWD)) ¡¡¡NOS CENTRAREMOS ÚNICAMENTE EN EL DISEÑO DE COMPOSITES!!!

14. 3. Vaadin Html5 (III) • Disponible un fichero editado por nostros de como instalar el plugin de Vaadin en Eclipse, así como también de las posibles incidencias. • Diversos tutoriales “potables” dentro del fichero. • FICHERO DISPONIBLE EN EL BLOG DEL GRUPO 1. • Nombre del fichero: vaadin.seminario2.byJFJS.docx

15. 3. Vaadin Html5 (IV) DEMO

16. 4. jQuery(I) • Lenguaje de programación que permite manipular páginas web • El código se carga dentro de la página • Se ejecuta en cuanto se carga la página • Con jquery ahorramos tiempo y disgustos • Como? Con una simple librería incluida en el body

17. 4. jQuery(II) • Características de Jquery: • Acceder al documento HTML (DOM) • Modificar la apariencia de la página • Modificar contenido • Manejar eventos de los elementos de la página • Crear efectos • Amplia extensión de plugins • Estilo de programación no invasivo • Trabajar en modalidad Ajax

18. 4. jQuery(III) • Selectores jQuery. Ejemplos: • $(‘.boton’)–devuelve todos los elementos que contengan la clase botón. • $(‘.*’)–devuelve todos los elementos existentes en la página . • $ (‘#divDatos, .boton’)–devuelve todos los elementos que contengan el ID divDatos y los que contengan la Clase botón.

19. 4. jQuery(IV) • Manipulación de eventos. Ejemplos: • Click()- Evento click • Keypress()- eventos de teclado • Efectos visuales • Show() – muestra un elemento HTML • fadeOut () – Muestra un elemento HTML desvaneciéndose

20. 4. jQuery(V) • AJAX. Ejemplos: • Load(): Carga HTML y permite inyectarlo dentro del DOM • Get() : Realiza una petición tipo Get al servidor • getJSON(): Carga datos Json

21. 5. Bootstrap(I) • Framework de diseño gratuito para diseño páginas y aplicaciones web • Basado en HTML5, CSS3 y JAVASCRIPT • Crossbrowser • Popular • Algunas de las razones por las que debemos usar Bootstrap:

22. 5. Bootstrap(II) • Gran variedad de iconos:

23. 5. Bootstrap(III) • Sistema de cuadrícula:

24. 5. Bootstrap(IV) • Componentes: • Botones • Tabs • Paginación • Alertas • Barras de progreso • y docenas de componentes más.

25. Conclusiones JQuery y Bootstrap • Jquery: • Ahorrar tiempo y esfuerzo • Compactar código • Modificar y manejar páginas fácilmente • Bootstrap • Diseño bonito y amigable • Gran variedad de complementos • Compatibilidad con los principales browser y lenguajes como jQquery

26. JQuery y Bootstrap DEMO