Web Design

PrimeFaces (JSF2). Cómo detectar el fin de carga de la página con JavaScript

Primefaces  es una librería que implementa JSF2, de modo que facilita la creación de aplicaciones Web en un entorno J2EE a través del uso de componentes prefabricados como menús, botones, tablas de datos, formularios, etcétera. Puedes encontrar demostraciones de su potencial y un catálogo de sus componentes en este enlace: http://www.primefaces.org/showcase/

Aunque se use Primefaces, el resultado que llega al navegador siempre es el mismo: un conjunto de etiquetas HTML junto con complejas implementaciones en JavaScript que se generan automáticamente a partir del código Java y de componentes en XHTML. Como todo sistema que abstrae al programador de los niveles inferiores, siempre es complicado realizar algunas operaciones específicas que se salen de lo establecido para la tecnología.

Tal es el caso de la detección de cuándo se ha terminado de cargar la página y el usuario tiene toda la información para operar. Habría que distinguir dos fases de forma genérica:

  • Carga de la estructura HTML de la página
  • Carga de las llamadas asíncronas (AJAX) para la obtención de datos.

En muchas ocasiones JSF2 (y por ende Primefaces) utilizan AJAX para obtener los datos del servidor, lo que implica que la página puede haber cargado su estructura y scripts, pero éstos continúan con su ejecución. El resultado es que el usuario no puede utilizar la página hasta un poco después de que el navegador le haya notificado que ha acabado: faltan tablas por completar, combos, datos dinámicos, etcétera.

Sería bueno por lo tanto contar con un mecanismo que nos permitiese realizar alguna acción cuando se ha terminado esa carga de datos. Se puede usar en algunas ocasiones cuando los que nos ofrece PrimeFaces no es suficiente: por ejemplo bloquear la pantalla con un fondo e icono de carga hasta que no esté plenamente operativa en la primera carga.

Como PrimeFaces utiliza jQuery para operar, simplemente aprovecharemos la posibilidad que nos brinda esta librería de Javascript: se enlazan un document.ready dentro de otro, de modo que el segundo se ejecutará cuando haya acabado el primero, que es el que contiene todas las operaciones de PrimeFaces

$(document).ready(function(){
    $(document).ready(function(){
        //Código Javascript que queramos ejecutar después de Primefaces
    });
});

Diseño Web. Páginas de Referencia

Desafortunadamente no todo el mundo nace con el talento y la inspiración de un buen diseñador. Algo que los programadores no suelen tener en cuenta es que al fin y al cabo se trata de hacer un producto funcional y atractivo para el usuario final, y esto, en la mayoría de ocasiones no dependen de lo bueno o malo que sea tu código. Casi se podría decir que al contrario: dedicamos demasiado tiempo a detalles técnicos que no tienen importancia, restando tiempo a pensar en la usabilidad y en la apariencia de la página o aplicación Web.

Si no se te da bien el diseño, o si sí eres bueno en esto, siempre necesitarás una fuente en la que inspirarte para hacer tu aplicación Web. Por una parte la popularidad de Internet hace que el diseño al final dependa de la moda del momento, que es lo que al usuario le resulta atractivo, y por otro lado, tu aplicación debe parecerse a las demás en términos de usabilidad. Puedes tener una gran idea para mejorar la usabilidad, pero si es algo que está alejado de lo que la gente espera encontrar (lo que tiene por costumbre), poco podrás hacer. Hay que ser novedosos, atractivo, pero intentar no ser distruptivo en exceso: no suele haber premio de usabilidad a los que introducen cambios excesivamente importantes.

Por ello lo mejor es que tengas una lista de bookmarks en los que navegar para coger ideas, ver cómo son los diseños actualmente, y en el caso de que nos gusten, “inspirarnos” o directamente copiar. Algo bueno de la parte front-end es que tenemos acceso directo a todo el código fuente, asi que no hay problema.

Aquí te paso algunas de las referencias que uso para buscar inspiración:

Inspiración

Es fundamental darse una vuelta por lo que se cuece últimamente en el mundo del diseño Web. Diseño plano, uso de imágenes distorsionadas, webs responsivas con efectos pragmáticos, y combinaciones de colores espectaculares es lo que más se lleva ahora mismo. Aquí van algunas de las fuentes que uso para intentar estar al día en cuanto a diseño Web.

  • Line25.com (http://line25.com/). Lo que más me gusta de este sitio es que publica semanalmente una lista de sitios web de diseño, por lo que cada lunes puede darte un paseo por sitios web de diseño, tanto de vanguardia (experimentales), como algunos puestos en producción de gran utilidad. Las listas semanales están en http://line25.com/category/inspiration . También publican listados temáticos de páginas, como uso de iconos, flat design… Con esta web va uno bien servido.
  • SMASHING magazine (http://www.smashingmagazine.com/). Es una página de diseño web más general, que cubre además parte de programación frontend, diseño móvil y manejo de programas gráficos (photoshop, fireworks…), o artículos de UX y Usabilidad. También tiene su parte de inspiración para poder estar al día de las últimas novedades (http://www.smashingmagazine.com/tag/inspiration/). Me parece que la parte de tipografías también es muy destacable.
  • Codrops (http://tympanus.net/codrops/). Esta página es la referencia para animaciones y efectos en Javascript, así como diseños experimentales que sacan el máximo partido a HTML5 y CSS3. Transicciones, sliders, efectos de movimiento, animaciones… Tanto en tutoriales como en demos que puedes pasar. También artículos novedosos sobre diseño y CSS (http://tympanus.net/codrops/category/articles/). Si quieres sorprender con detalles que nunca pensaste que podían hacerse sin tirar cientos de líneas de JS esta es utu página.
  • Logo Faves (http://logofaves.com/). Todo el mundo quiere un logo y que se haga tan famoso con el pajarito de Twitter. Tranquilo, los diseñadores profesionales de logos también se inspiran en otros. No es fácil transmitir en una sola imagen sencilla las intenciones de toda una empresa. Para ello puedes inspirarte en páginas como http://logofaves.com/ . Fíjate en las tendencias de diseño plano con algún degradado y tipografías exclusivas. Seguro que después de ver unas cuantas decenas de logotipos no te parece tan bueno el que has hecho con anteriorida.
  • One Extra Pixel – OXP (http://www.onextrapixel.com/). demás de tutoriales, galería de inspiración y código, en este puedes encontrar los “freebies”, que no son otra cosa que recursos gratuitos para incoporar a tus diseños, tales como iconos, fondos, imágenes, etcétera.
  • A List Apart (http://alistapart.com/). Probablemente uno de los sitios más longevos de diseño web, con cientos y cientos de artículos de desarrolladores muy interesantes. No tiene una orientación a galería de inspiración directa, pero dentro de sus artículos hacen referencias a las tendencias y técnicas de vanguardia con multitud de ejemplos.

Hay muchas más. Aquí ter dejo un listado de las que tengo en mi lector de RSS por si tú también quieres estar al día de las últimas tendencias:

Fuentes (diseño y uso de)

Han ido ganando en importancia en el diseño. Si antes se usaban las fuentes propias del sistemas del cliente, cada vez más se opta por ampliar el rango de fuentes usadas. Actualmente se llevan fuentes de trazado fino y sans serif, concretamente la Helvética Neue, que es una fuente utilizada en Mac.

  • Google Fonts (https://www.google.com/fonts). Referencia básica a la hora de incluir fuentes en nuestras páginas o aplicaciones Web. Proporcionan además el código para incluirlo, y sobre todo el acceso a su CDN para no tener que soportar las fuentes en nuestro servidor. Cuenta con las imitaciones de uso libre de las fuentes más populares, como por ejemplo la Helvética Neue que está tan de moda en estos tiempos.
  • 1001 Fonts (http://www.1001fonts.com/). Este sitio Web, como su nombre indica, está especializado en tipografías. Lo que es mejor es que tiene cientos y cientos, y además son gratuitas para que las puedas utilizar en tus diseños. Hacer un logotipo con unas buenas fuentes es mucho más fácil. Muchas veces con elegir una fuente adecuada y unos colores óptimos, se puede dar con un logotipo de partida muy válido. Tiene clasificación de tipología de fuentes, estilos épocas.
  • Font Squirrel (http://www.fontsquirrel.com/). Con la ayuda de esta ardilla el trabajo de las fuentes será más fácil. Sobre todo destaca, además de proporcionarnos fuentes, su conversor a fuentes Web (WebFont Generatorhttp://www.fontsquirrel.com/tools/webfont-generator). ¿Cómo funciona un WebFont Generator? Cuando necesitamos incluir una fuente en nuestra página y no esperamos que el usuario final la tenga en su ordenador, podemos incluirla como un recurso más dentro de nuestro código. El problema es que cada navegador necesita su archivo de fuente especial, además de tener que incluir el código CSS adecuado para poder usarla (que no siempre es fácil). Con este generador, subimos un fichero de fuente (un TTF por ejemplo), y nos devolverá un .zip con todo lo necesario: la fuente en diferentes formatos (como WOFF por ejemplo) para los diferentes navegadores, un fichero CSS con el código de hojas de estilo a utilizar y una página HTML de ejemplo. Todo listo para incluir en nuestro diseño.

Iconos

A lo largo de los últimos años se han desarrollado fuentes que contiene en su interior iconos (si estos son sencillos y monocromáticos). De este modo se evita tener un fichero por cada icono (o multitud de reglas CSS que se encargan de dividir una sola imagen en muchos iconos), pero sobre todo la capacidad de dar color y escalado sin pérdida (son imágenes vectoriales). Algunas de las fuentes de iconos de referencia son:

  •  Font-Awesome (http://fortawesome.github.io/Font-Awesome/icons/). Se trata de una página específica para iconos de Twitter Bootstrap, aunque pueden ser utilizados sin éstos. . Bootstrap de Twitter tiene su paleta de iconos que llama Glyphicons con unos 200, pero se quedan cortos, sobre todo porque no contienen algunos iconos comerciales (como los de las redes sociales por ejemplo). Con Font-awesome tenemos acceso a una galería de más de 300 iconos que se pueden usar simplemente haciendo un par de includes. Puedes verlos en http://fortawesome.github.io/Font-Awesome/icons/
  •  Iconmelon (http://iconmelon.com/). Más y más iconos, sobre todo en formato SVG para que los uses tanto en las webs como con las herramientas de diseño gráfico.
  • Flaticon (http://www.flaticon.com/). Si no está aquí el icono que buscas entonces es que no lo necesitas.

Fondos

Los fondos de página o secciones no suelen tener mucha atención, pero utilzia patrones sutiles pueden dar bastante carga al diseño. Podemos optar por colores planos, pero un poco de texturas nunca vienen mal. Un par de páginas al respecto:

  • Subtle Patterns (http://subtlepatterns.com/): Cuando queremos dar un poco de textura al fondo de nuestra web, podemos acudir a esta galería que tiene más de 300 patrones para dar un poco de sentido a los fondos planos de nuestro diseño. Los hay desde que usan ruido blanco hasta otros con dibujos repetitivos como papel de pared.
  • COLOURLovers Patterns (http://www.colourlovers.com/patterns). Millones de patrones para utilizar, clasificados por visitas, gustos, populares…

Colores y Paletas de Color

La elección de los colores es algo básico para el diseño web. Podemos disponer de una gran plantilla, pero si los colores no son los adecuados el resultado final carece de atractivo.

  • RGB Color Gradient Maker (http://www.perbang.dk/rgbgradient/). Si quieres hacer una web basada en gradiente, indicando el color de inicio, el de final y el número de pasos, ésta es tu página de referencia.
  • Color Scheme Designer (http://colorschemedesigner.com/). Los colores juegan un papel fundamental en el diseño de Webs. Mediante esta herramienta podrás crear una paleta básica sobre la que construir tu diseño. Es muy visual y tiene unas buenas reglas de combinación de colores; exportación a HTML+CSS y otros formatos; generación aleatoria de paletas…
  • Pictaculous (http://pictaculous.com/). Muchas veces basamos la elección de los colores en los que tiene una imagen. Mediante esta herramienta podemos generar una paleta de colores para nuestra web basada en una imagen que subimos. Los resultados pueden ser espectaculares y ahorrarnos quebraderos de cabeza.
  • Adobe Kuler (https://kuler.adobe.com/create/color-wheel/). Fantástica herramienta para la elección de colores que cuenta además con una galería de temas, clasificadas incluso por uso, que nos dará una idea de las últimas tendencias en diseño.
  • COLOUR Lovers (http://www.colourlovers.com/palettes y también http://www.colourlovers.com/colors). Otras dos secciones de esta página popular de diseño. Podremos encontrar tanto paletas de colors como colores en sí mismos, clasificados por comentarios, favoritos, visitas…

Bancos de Imágenes. (gratuitas a poder ser)

En todo diseño hay un lugar en el que colocar imágenes: desde cuadros para decorar, hasta imágenes distorsionadas (blanco y negro, con blur, pixeladas…). Tanto en la portada de la Web como en el contenido interior. El problema de las buenas fotos es que suelen tener copyright, y hay herramientas que permiten localizarlas en Internet muy fácilmente (como por ejemplo Google Images, que permite subir una foto y busca en Internet las páginas que la están utilizando). No obstante hay medios para obtener fotos de calidad y de libre uso para nuestros diseños.

En definitiva, existen multitud de recursos a nuestra disposición para que no tengamos excusa a la hora de hacer un diseño. Hasta los informáticos más recalcitrantes, si se toman un poco de tiempo y tienen la paciencia de hacer caso a su lado más diseñador, pueden hacer un diseño profesional, aunque sea de forma asistida.