Islavisual.com - Listado Articulos de Desarrollo Web

Cheat Sheets a mansalva

No todo el mundo sabe que la experiencia de usuario y la usabilidad tienen también mucho que ver con la productividad. Pues sí, aunque parezca que no, hay incluso leyes de usabilidad que apoyan esta afirmación.

Cómo crear Web Components de forma usable y accesible

Para terminar el año, os mostraré cómo crear un web component desde un punto de vista más reutilizable, usable y accesible de modo sencillo y rápido. De hecho, es más rápido y pesa infinitamente menos que su equivalente en frameworks como Angular o React.

Componente DatePicker de isiTools

IsiTools es un conjunto de herramientas pensadas para ayudar a los desarrolladores durante el proceso de creación del proyecto. Todas las funcionalidades incluidas están diseñadas para obtener un mejor rendimiento y experiencia de usuario, un desarrollo más óptimo y ágil y un uso más sencillo y reutilizable. Además, permite que cada funcionalidad se cargue de forma independiente o modular evitando que el DOM se llene de elementos que no van a ser utilizados, si de carga desde PHP u otro lenguaje de servidor. La forma de seleccionar los elementos es mediante selectores CSS, de igual manera que lo hacen otros conocidos frameworks.

Cómo crear imágenes SVG accesibles y personalizables

Aunque muchos saben crear y manipular documentos e imágenes en SVG, no todos conocen la potencia que tiene. Hoy os voy a mostrar cómo es posible crear una imagen SVG accesible y que, además, sea personalizable a partir de parámetros proporcionados por URL. Imaginemos, por ejemplo, que tenemos que crear el típico icono de prohibición rojo con un texto que pone "No acceder". El código podría ser algo como:

Directrices para la creación de guías de estilos

Dado que, últimamente, algunos de vosotros me habéis preguntado por esto de forma privada, he decidido realizar un escrito detallando qué es y cómo diseñar una guía de estilo de diseño web. Pero, qué es una Guía de Estilos... Una guía de estilos es un documento que representa, de forma visual y emotiva, la imagen corporativa de una organización o empresa. Aunque pueden codificarse en formato de documentos electrónicos como PDF, PhotoShop o, incluso, Microsoft Word, lo más frecuente y recomendable es que estén codificadas en HTML5 y CSS3.

Crear tu propio Firebug con Javascript y jQuery

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:

Mejorar la navegacion a través del almacenamiento local (localStorage y sessionStorage)

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.

Actualizar y crear hojas de estilo a través de JSON y jQuery

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.

Edición en caliente con Eclipse, Apache Tomcat y JSF

Cuando un proyecto se encuentra en una etapa de desarrollo u optimización, a menudo es necesario realizar muchos cambios pequeños, algunos de los cuales son meramente pruebas para comprobar el buen funcionamiento de los algoritmos. Si estamos en plataformas de tipo PHP, el siguiente problema no lo veréis nunca pero, si estáis trabajando con Eclipse y Apache Tomcat, seguro que en alguna ocasión, os encontraréis u os habreis encontrado con que cada vez que hacéis un cambio en los contenidos estáticos tales como CSS o JS, tenéis que hacre un ReLoad de toda la apliacación. Me imagino lo que estáis pensando, esa forma de trabajar no es factible, ni eficiente, ni lógica. ¿Entonces?, ¿cómo nos enfrentamos al problema de la recarga o reinicio constante?. Pues bien, para abordar esta cuestión, lo primero es estar bien seguro de que la variable PROJECT_STAGE está en modo Development. Para ello, debéis ir al archivo web.xml y buscar esta propiedad.

Errores comunes en el .htaccess

Bueno, después de una larga temporada sin publicar nada, me motiva el hecho de haber publicado la nueva versión de Islavisual y de nuevos conocimientos que, creo, no están publicados en internet, así que, vamos al lío. ¿ quién no se ha encontrado alguna vez con que el .htaccess no aplicaba las reglas, que el log decía que tenía errores extraños que no tienen ni piés ni cabeza o, cosas como client denied by server configuration ? Todos estos errores suelen tener una explicción sencilla que, a menudo, no solemos ver y nos llevan a exprimirnos el cerebro durante horas. Os invito a seguir leyendo...