Mar 242015
 

En artículos anteriores hemos resaltado la importancia de reducir el tiempo que tarda en cargarse completamente una página web en el navegador del usuario. Por una parte, la impresión de los usuarios es mucho más favorable si el contenido de la página aparece rápidamente en pantalla. Pero además, el tiempo total de carga de la página es un factor que los principales motores de búsqueda, incluido Google, tienen en cuenta en sus algoritmos de posicionamiento.

A menudo, lo que más influye en el tiempo total de carga de una página es la descarga y el procesamiento recursos externos. De entre ellos, las librerías javascript y las hojas de estilo CSS utilizadas por la página tienen con frecuencia un impacto considerable.

En nuestro anterior artículo sobre “Cómo reducir el tiempo de carga de una página web con javascript asíncrono” ya hemos explicado la manera de realizar la carga del código javascript externo de manera que no bloquee la presentación de la página.

En este artículo veremos las opciones existentes para cargar del mismo modo las reglas de estilo CSS contenidas en un recurso externo.

Seguir leyendo »

 Publicado por en 6:42 pm
Feb 152015
 

En lenguaje HTML, la mejor manera de visualizar información estructurada en forma de registros y campos es mediante el uso de tablas.

Pero el diseño por defecto que utilizan los navegadores resulta poco atractivo.

En este artículo se explica como mejorar la presentación de una tabla con unas pocas reglas de estilo CSS

Seguir leyendo »

 Publicado por en 12:08 pm
Dic 142014
 

Hoy en día, los sitios web tienen que tener en cuenta el creciente volumen de usuarios que navegan utilizando dispositivos inteligentes, teléfonos y tablets.

Estos dispositivos tienen en general unas dimensiones de pantalla y unas resoluciones mucho más reducidas que las que ofrecen los equipos de sobremesa y ordenadores portátiles para los que muchos sitios web fueron inicialmente diseñados.

Idealmente, el diseño del sitio debería adaptarse a estos medios, para lo cual necesita detectar las características del dispositivo desde el que está siendo accedido y adaptarse al mismo. Inicialmente, se especificó el mecanismo del “meta viewport tag”, que ya hemos estudiado en otros artículos. Actualmente, se puede obtener un control más preciso utilizando las consultas de medios CSS (CSS media queries). Con ellas, se pueden definir conjuntos de reglas CSS diferenciadas para distintas resoluciones de pantalla, orientaciones del dispositivo, etc., de manera que el diseño se adapta sin necesidad de generar un código HTML distinto para cada tipo de dispositivo.

En este artículo revisamos la manera de utilizar las consultas de medios CSS en un sitio web.

Seguir leyendo »

 Publicado por en 10:40 am
Dic 092014
 

La llegada de los teléfonos inteligentes que permiten navegar por internet ha supuesto un cambio en el modo de diseñar los sitios web. La mayoría de los nuevos diseños son “adaptables” (responsive), es decir, que cambian en función de las dimensiones del dispositivo en el que se visualizan.

Pero para muchos sitios web previamente existentes, el paso a un diseño “adaptable” no es trivial. De todos modos, hay algunas modificaciones que se pueden realizar sobre un diseño no-adaptable, que pueden mejorar su presentación en pantallas con resoluciones más pequeñas que aquellas para las que inicialmente habían sido diseñados.

Este artículo presenta una posible manera de realizar estos cambios en un sitio web no adaptable.

Seguir leyendo »

 Publicado por en 6:12 pm
Ago 302014
 

Cuando una página web contiene un documento de un tamaño considerable, su usabilidad mejora si el contenido se estructura en distintos apartados y subapartados. En este caso, una tabla de contenidos o TOC (por sus siglas en inglés: Table Of Contents) es un elemento que mejora sustancialmente la usabilidad de la página.

En este artículo examinamos las posibilidades que existen para generar una TOC en una página web.

Seguir leyendo »

 Publicado por en 10:09 am
Ago 262014
 

En determinados casos, un sitio web puede necesitar implementar una manera de permitir a sus usuarios introducir contenido con formato, de manera que sea posible incluir imágenes, texto en distintos tamaños, colores y tipos de letra, etc.

Los editores de texto que permiten ver el resultado final durante la edición del contenido se conocen habitualmente por sus siglas en inglés como editores WYSIWYG (What you see it what you get: Lo que ves es lo que obtienes). De entre ellos, uno de los más conocidos es el editor TinyMCE, incorporado en numerosos sistemas de gestión de contenido, como el propio WordPress.

Pero TinyMCE es una aplicación independiente, que puede ser utilizada en otros entornos. En este artículo se explican los pasos a seguir para incorporar a una aplicación web la funcionalidad de edición de contenido que implementa TinyMCE.

Seguir leyendo »

 Publicado por en 2:57 pm
Ene 202013
 

En nuestro anterior artículo hemos visto cómo pintar con el ratón sobre un canvas HTML5. La solución que presentábamos en él no es aplicable si el usuario accede a la página desde un dispositivo móvil, porque en ese caso no existe el ratón. En su lugar, el usuario interacciona con la página tocando la pantalla.

En este artículo vamos a ver cómo se puede obtener una funcionalidad similar que permite pintar con el dedo sobre un dispositivo Android, iPhone o similar.

Seguir leyendo »

 Publicado por en 11:12 am
Jul 052012
 

( Read this post in english )

En este artículo vamos a ver cómo se puede definir en nuestra página web un área en la que el usuario puede dibujar formas con el ratón. Después, la imagen dibujada puede ser enviada al servidor para que la procese de la forma que se desee. Esta funcionalidad la utilizaremos en nuestro diccionario mandarín-español para permitir al usuario escribir con el ratón el símbolo hanzi que desea localizar. Para este propósito necesitaremos también utilizar un software de reconocimiento de caracteres (OCR) con soporte para chino simplificado, que comentaremos en un próximo artículo. Seguir leyendo »

 Publicado por en 8:55 am