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

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

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.

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

Wicket Crear un proyecto.

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.

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.

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

Wicket DEMO

2. Responsive Web Designer (I) Objetivo principal: diseñar un diseño web para todos los dispositivos (Web for All) – 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, smart phones… – Diferentes CSS para diferentes dispositivos.

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.

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

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!!!

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

3. Vaadin Html5 (IV) DEMO

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

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

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.

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

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

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:

5. Bootstrap(II) – Gran variedad de iconos:

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

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

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

JQuery y Bootstrap DEMO