Your SlideShare is downloading. ×
Seminario 2+parte wickets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Seminario 2+parte wickets

103
views

Published on

Wickets + Vaadim + Jquery + HTML5

Wickets + Vaadim + Jquery + HTML5

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
103
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • En los últimos años se han incrementado mucho las redes de radiofrecuencia en interiores de edificios para los servicios de datos y de voz.
    A la hora de diseñar una red inalámbrica se tienen que tener en cuenta diversos aspectos tales como: la batería de los terminales, diversos problemas de diseño y obstáculos, interferencias de radiofrecuencia con sistemas colindantes. En esta exposición se harán especial mención de los problemas de interferencias de radiofrecuencia.
  • - Explicar el index un poquito, no mucho que como no hay muchas cosas que decir en cada punto (no hay mucha más teoria en el word que nos mandaron).
  • Tiempo por que las tareas se hacen comodamente y se ahorran muchas linias.
    Disgustos porque javascript no es igual para todos los navegadores y jquery si(para casi todos)
  • DOCUMENT OBJECT MODEL
  • DOCUMENT OBJECT MODEL
  • Bootstrap está utilizando una base de sistema cuadrícula en 12 columnas.Si quieres que tu aplicación web tengo una barra de navegación puedes diseñar tu HTML usando el número de la fila 3si no quieres una barra de navegación y lo que uqieres es espació puedes usar una cuadrícula de tamaño 5
  • Bootstrap además es compatible con JQUERY y con sus plugins
  • Transcript

    • 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? 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.
    • 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. 1. Nos olvidamos de declarar el id en la Clase. » el HTML. 2. Caso opuesto. Olvidamos declarar el id en
    • 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 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.
    • 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