Archivo de la etiqueta: jquery

Seminario II: HTML5, jQuery, Wicket, Responsive Web Design, Bootstrap

Hoy ha sido el segundo seminario de la asignatura. Como hicimos con el primero haremos un breve resumen de todas las herramientas y tecnologías vistas.
Expositores: Raúl Castellanos, Alberto Cruz y Gael Rodríguez.

HTML5_Logo_512

Lenguaje predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto.

HTML5 se centra en facilitar la implementación de aplicaciones web, avanzar hacia la web semántica y limpiar atributos y elementos heredados de las anteriores versiones de HTML. Aún sigue en desarrollo y no todos los navegadores lo soportan en su totalidad

Novedades:

  • Mejor estructura:  En HTML5 introduce elementos para estructurar mejor una web, estableciendo qué es cada sección, y reemplazando  DIVs. html5divs
  • Mejores formularios:  El elemento input ha sido ampliado  y ahora permite todos estos tipos de datos:  datatime,numer,email,search…
  • Incorpora etiquetas para mostrar los contenidos multimedia

<canvas>:  Dibujar en 2D , <video>:  Elementos de vídeo , <audio>:  Elementos de audio

  • Etiquetas para manejar grandes conjuntos de datos que permiten generar tablas dinámicas
  • Nuevas APIs como Geolocalización,  Drag&Drop,  dibujo  2D…
  • Desarrollo de aplicaciones más fácil: Almacenamiento de datos local, acceso a archivos locales, caché de aplicación
  • Utilización de CSS3: Nuevas propiedades,  animaciones, efectos de sombreado, esquinas redondeadas

Referencia: http://www.w3schools.com/

jQuery_logo

jQuery es un framework de JavaScript.
  • Framework: Conjunto de librerías de código que contienen procesos o rutinas ya listos para usar
  • Reduce a métodos que se pueden llamar en tan solo una línea
Para añadir jQuery a nuestro poryecto podemos descargar su libreria en jquery.com o bien incluir con un Script en el Head su libreria a través de un CDN
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
wicket
Wicket  Es un framework de desarrollo de aplicaciones Web para la plataforma Java EE. Da énfasis al uso de “puro Java” y “puro HTML” y fue creado para facilitar  el diseño y desarrollo Web
Características:
  • Fácil (Consistente): Todo el código escrito en Java y HTML
  • Reutilizable: Los componentes escritos en Wicket son totalmente reutilizables, además, éstos son fácilmente distribuidos en archivos “*.jar”
  • No intrusivos: Compatible con cualquier editor HTML
  • Seguro: Fácil de integrar con la seguridad de Java
  •  Completo: Está “listo para usar” para el desarrollo de aplicaciones web en Java
  • Eficiente / Escalable

También tenemos WiQuery :  Adaptación de jQuery a Wicket para facilitar el uso de estas librerías.

Referencia:  http://wiquery-examples-1-1-x.appspot.com/ , http://wicket.apache.org , http://www.mkyong.com/wicket/create-custom-validator-in-wicket/  y el libro “Enjoying Web Development with Wicket”

Sin título-2

Responsive Design Web es una técnica que permite crear sitios Web adaptados a la resolución del dispositivo en que se esté navegando, lo que permite tener un único diseño para PC, móvil y tabletas.

“Para 2013 los accesos a Internet desde dispositivos móviles superarán a los realizados desde PCs”

Opciones para modificar el diseño de un CSS de forma dinámica:
  • Fluid Grid: Concepto de asignar unidades relativas (% o ems) en vez de absolutas (px o puntos)
  •  Media Querys:  A través de CSS3 se hace una consulta al tamaño del dispositivo que accede a nuestra web y permite que la página pueda utilizar diferentes estilos CSS basados en las características del dispositivo.
Ventajas:
  • Mejor experiencia para el usuario
  • Optimización de motores de búsqueda (Sólo aparece una URL en los resultados de búsqueda)
  • Único diseño adaptado a los diferentes soportes
  • Menor tiempo y coste de diseño
Inconvenientes:
  • La velocidad de carga en el móvil puede ser muy elevada
  • Tener en cuenta la jerarquía de información para no saturar de contenido a los dispositivos más pequeños

Referencia: http://www.genbetadev.com/desarrollo-web/responsive-design-puesta-en-marcha

bootstrap2_logo

Bootstrap es un framework de Twitter para la creación de diseños web combinando CSS y JavaScript.

Para añadir Bootstrap al proyecto, al igual que con jQuery lo podemos hacer de las siguientes dos maneras:

    1. Descargar la libreria e importarla en el proyecto
    2. Mediante referencia a los scripts puestos en el CDN:

< link href=”//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css” rel=”stylesheet”>

< script src=”//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js”>< / script>

< link href=”//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css” rel=”stylesheet”>

< link href=”//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css” rel=”stylesheet”>

Uno de los factores de gran aceptación de Bootstrap es que utiliza el concepto de Responsive Web Design. De esta manera sin tener conocimientos podemos hacer páginas web adaptadas a todo tipo de dispositivos y resoluciones.

En la siguiente imagen vemos el potencial de CSS que nos ofrece Bootstrap. Podemos pasar del botón de la izquierda al de la derecha con solo añadir la siguiente clase del objeto button:   class=”btn btn-info”

boton

Referencia: http://twitter.github.com/bootstrap/

Propuesta de Integración al proyecto:

  1. Wicket: Creación de formularios de login y registro
  2.  jQuery o WiQuery: Comprobación de datos en los formularios
  3. HMTL5:  Os animamos a integrar un nuevo elemento de los que proponer W3School. http://www.w3schools.com/html/html5_new_elements.asp
  4. Bootstrap: Diseño de html + css + Responsive Web Design