Categoría: HTML

Precargar imágenes con JavaScript

js-preload

Dicen las teorías modernas del desarrollo web, de SEO y demás, que la rapidez para mostrar una página web es de los aspectos más determinantes para mantener a los usuarios en nuestro sitio. Afirmando incluso que si la página no se carga en menos de dos segundos, el usuario se irá y no volverá a nuestro sitio. Tal vez yo soy muy paciente, porque esto me parece una exageración. Pero hagamos de cuenta que les creemos.

De las cosas que ralentizan la carga de un sitio web, las imágenes son tal vez de lo más crítico. Sobre todo en estos tiempos donde los desarrolladores nos damos la libertad de agregar imágenes grandes, de alta calidad, como parte del diseño, sin considerar factores como el ancho de banda del usuario, o la capacidad de transferencia del servidor o hosting, nos arriesgamos a dar una mala experiencia de uso a nuestros visitantes.

Sigue leyendo «Precargar imágenes con JavaScript» →

Javascript – Datepicker con HTML5

Entre las nuevas características de HTML5 están los nuevos tipos de input, para campos numéricos, de fecha, url, email, etc. El problema al crear aplicaciones es cómo utilizarlos sin dejar de lado los navegadores que no las soportan.

Sigue leyendo «Javascript – Datepicker con HTML5» →

CSS: El modelo de caja (Box model)

Existe un conjunto de características que determinan la posición y distribución de un elemento dentro de una página web. Todas estas características se pueden traducir a propiedades CSS, y conocerlas es muy importante para manipular la presentación de una página.

Sigue leyendo «CSS: El modelo de caja (Box model)» →

Sobre los editores visuales de páginas web y otras peripecias

Comencé un curso de ASP.NET hace dos fines de semana. Es un curso básico, donde muestro las ventajas del .NET Framework para desarrollo web. Comencé hablando de lo que es, cómo se utiliza y ejemplos sencillos que muestran su funcionamiento.

Este sábado comenzamos un ejercicio que abarcará todo el curso. Empecé con la creación de un Master Page sencillo, mostrándoles las etiquetas que se pueden utilizar; después seguí con la implementación de algunos estilos en CSS, para después crear el primer WebForm…

En este punto, mientras veían lo que hacía, surgió una duda entre los participantes: ¿¡NO VAMOS A HACER EL EJERCICIO CON UN EDITOR VISUAL!?

Mi respuesta fue simplemente "Eh… no."

Esperaba no tener que extenderme, pero para continuar con el curso, primero tenía que aclarar algunos puntos. Me tomó algo de tiempo dar a entender mi punto de vista, y por qué mi "No" era definitivo. Este artículo trata de eso, y espero que le abra los ojos a unos cuantos (cientos) de programadores.

Sigue leyendo «Sobre los editores visuales de páginas web y otras peripecias» →

Web Storage

Es muy sabido por todos que las aplicaciones web, que hace media década eran el futuro, ya son lo de hoy. Muchos sistemas, aún los privados, ya son desarrollados como aplicaciones web, por las ventajas de accesibilidad que tienen.

El problema es que la tecnología no avanza tan rápido en todos sus ámbitos, y por más modernos que sean los sistemas, en países como el nuestro seguimos teniendo un problema muy grande, que no hemos podido solventar: el pobre ancho de banda.

Las aplicaciones web son conjuntos de páginas web, todas ellas mostrando el contenido que se requiere para realizar cierta actividad, y permitiéndonos manipular datos. Para esto es necesaria la constante comunicación cliente-servidor, pues la información está guardada en un servidor, de ahí la obtenemos y ahí la enviamos de vuelta.

Pero, ¿qué pasa si nuestra conexión a Internet no es lo suficientemente buena? O más correctamente, al menos en México, ¿si nuestra conexión a Internet es pésima? No todos tienen acceso a un ancho de banda de lujo. Hay conexiones por satélite, por teléfono (sí, todavía!), por banda ancha móvil, etc., cada uno con sus propias capacidades, a veces muy limitadas. ¿Y si nuestra aplicación requiere muchas llamadas al servidor?

Somos programadores. No podemos hacer que el Internet sea más rápido (por más que los clientes lo pidan, pueden citarme si quieren). Pero en nosotros cae la responsabilidad de un sistema eficiente para el usuario, y lo que no podemos ahorrar en conexiones a la red, sí podemos ahorrarlo en solicitudes de información, es decir, reduciendo las llamadas al servidor.

Una de las características más recientes de Javascript para este propósito es la de web storage.

Sigue leyendo «Web Storage» →

Agregar Google Search a un sitio web

Implementar un buscador en un sitio web puede ser complicado cuando lo tratamos de hacer a mano, pero podemos aprovechar motores de búsqueda ya existentes, como Google Search, y ahorrarnos muchísimo trabajo.

Sigue leyendo «Agregar Google Search a un sitio web» →

Etiquetas HTML5 para Internet Explorer 8 e inferior

Desde tiempos inmemoriables, los navegadores tienen una característica muy buena en la que cualquier contenido dentro de símbolos < y > es considerado una "etiqueta". Independientemente si el navegador reconoce o no dicha etiqueta, no mostrará su texto.

Es decir, si yo tengo esto en mi página web:

<etiquetaInventadaPorMi>
  <p>Un párrafo</p>
</etiquetaInventadaPorMi>

Cualquier navegador se va a "brincar" la etiqueta superior, ya que no la reconoce como válida, y plasmar lo contenido dentro de ella. Cuando algún navegador reconozca esa etiqueta (cosa que dudo mucho), la aplicará como debe, pero de momento, ningún navegador la tomará en cuenta.

Un ejemplo más real de esto es la etiqueta <object>, que nos permite importar un elemento a nuestra página y colocar dentro algún contenido que será visible si el navegador no reconoce dicha etiqueta, o si no puede mostrar el elemento importado.

Ahora, ¿qué pasa si estoy haciendo mi sitio con HTML5 y uso etiquetas <header>, <footer>, <nav>, etc., y despliego la página en un navegador como IE8? No va a pasar nada, simplemente el navegador pasará de largo por esas etiquetas. Pero, ¿y si le di estilos a dichas etiquetas? He ahí el detalle.

Sigue leyendo «Etiquetas HTML5 para Internet Explorer 8 e inferior» →

HTML. Enlaces en etiqueta link

Me pidieron ayuda para el uso de la etiqueta link de HTML. Espero que esto sirva para esa persona y para cuantos lo necesiten.

Sigue leyendo «HTML. Enlaces en etiqueta link» →