Una de las cosas que, habitualmente no pensamos es la potencia que nos puede brindar JavaScript y, aunque no siempre, lo fácil que puede llegar a ser hacer una buena herramienta para el web. Días atrás, he tenido que implementar un Depurador Web, vamos, algo así como un Firebug casero y dedicado y, la verdad, es que es más simple de lo que parece, sólo se necesita un poco de tiempo, paciencia y unos pocos métodos de JavaScript y jQuery. Para este cometido, antes de nada, vamos a definir cuales son los elementos que se necesitan para gestionar todo lo que sucede en una página web. Evidentemente, en lo primero que pensamos, es los cambios de valor en los campos de texto pero hay muchas más cosas que, analizando un poco, podemos monitorizar:
Hoy os voy a hablar de una de las cosas más interesantes que yo veo de HTML5 y que, no es ni más ni menos que, el almacenamiento local en el navegador. Esta característica de HTML5 no tiene nada que ver con el concepto de Cookie aunque, se puede confundir con cierta facilidad. Por ello, lo primero que debemos aclarar es cómo definimos los conceptos de LocalStorage, SessionStorage y en qué se diferencian a las Cookies. Bien, existen 3 tipos de almacenamiento Web hasta el momento que son localStorage, sessionStorage y Cookies. Como algunos ya sabréis, las Cookies se caracterizan porque tienen una limitación de espacio de 4KB, pueden ser activadas o desactivadas por los usuarios, tienen caducidad y aumentan el peso de las peticiones ya que, toda la información contenida en ellas, se envía al servidor para ser analizada y, seguidamente, traer de vuelta al navegador cliente.
Una de las cosas a las que he tenido recurrir ultimamente es a utilizar plantillas personalizadas por usuario para distintos sites. Cómo muchos sabréis una de las maneras más simples es utilizar hojas de estilo dinámicas a través de PHP pero, si no podemos utilizar PHP, si por ejemplo estamos en JAVA, una de las soluciones disponibles es precisamente esta. Para realizar esta solución, lo que vamos a crear son 2 funciones de JavaScript. Una que realizará las modificaciones solicitadas en las hojas de estilo y otra que cargará un JSON y lo utilizará como array de valores para configurar dichas hojas de estilo.
Como muchos sabréis, desde la versión 1.9 de jQuery ya no se puede utilizar la instrucción $.browser y, como otros muchos también sabrán, JavaScript tiene un objeto que nos suele proporcionar de esta información muy detallada. Ese objeto no es otro que window.navigator y que, por si alguno no lo sabéis, puede escribirse sin el prefijo window.
Bueno, todos los que trabajamos con jQuery, nos hemos preguntado alguna vez porque tanta función para un mismo propósito. Pues hoy intentaremos desvelar sus diferencias. El evento bind() une el evento que queremos activar con los elementos actuales que tenemos en la página. No se une al DOM, por tanto si, en tiempo de ejecución, creamos un nuevo elemento, dicho elemento, no reposnderá ante ese evento y no tendrá acción asociada alguna.
Magnific Popup es un plugin de jQuery lightbox responsive y de libre uso que está enfocado a obtener la mejor mejor experiencia de usuario y rendimiento en cualquier dispositivo, al menos eso dicen. Las características más interesantes de este plugin se comentan a continuación:
Responsive Test es una herramienta que sirve para probar en varios dispotivos cualquier página. Sólo tenéis que poner la URL deseada y darle al botón de mostrar. Además cuenta con algunas plantillas Responsive para testar y descargar como por ejemplo Flex APP, Responsive HTML5/CSS3, Responsiva entre otras.
Hoy os voy a exponer un menú desplegable experimental multinivel. La idea principal es ahorrar espacio para menús que tienen una gran cantidad de contenido y subniveles. Cada sub-nivel se muestra en su propio contexto, por lo que el nivel del elemento padre desaparece, aunque pulsando la opción de back ( o atrás) vuelve a aparecer. Esto se hace con animaciones sutiles que se definen en clases de animación separadas y de forma fluida, de manera que se puede utilizar fácilmente en cualquier dispositivo y resolución.
Cuando desarrollamos un proyecto web en Responsive Web Design, uno de los retos al que nos enfrentamos es el dilema de las imágenes escalables. Existen formas sencillas para escalar una imagen (por ejemplo, determinando el tamaño de la misma relativo a su contenedor). Sin embargo estás soluciones no son a menudo lo más óptimo. A finales del año pasado la W3C publicaba el primer borrador para el uso imágenes en Responsive Design, pero como puede pasar mucho tiempo hasta que veamos resultados debemos mirar otras opciones.
Imagen de Pablo Enrique Fernández CasadoPablo Enrique Fernández Casado
CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.
Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.
Consentimiento para cookies y datos
Este sitio web utiliza cookies para permitir la navegación entre páginas, procesar información de dispositivos finales, cargar imágenes desde CDNs externos (como pixabay) y extraer datos personales recopilados por Google Analytics (como objetivo analilzar el tráfico o la IP origen, entre otros).
Ten en cuenta que, al rechazar las cookies, se eliminará todo rastro dejado y se abandonará la página de manera inmediata.
IslaVisual
