SEMINARIO 2

Miembros del grupo:Juan Francisco García Jorge MahechaSergi Mellado

Índex

1. Wicket2- Responsive Web Design3. Vaadim HTML54. JQUERY5. Bootstrap6. 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 http://www.wicket-library.com/wicket-examples/ajax/form?3

http://www.wicket-library.com/wicket-examples/ajax/choice?2http://www.wicket-library.com/wicket-examples/navomatic/

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