Categoría: JavaScript

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: Arrow functions

arrow-functions-1

Últimamente muchos desarrolladores de JavaScript hemos incorporado las arrow functions a nuestro código, por nuestra experiencia en otros lenguajes y/o por la facilidad para utilizarlas. Aquí explico lo que son, sus ventajas y cómo podemos utilizarlas.

Sigue leyendo «JavaScript: Arrow functions» →

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» →

Javascript: Ordenar arreglos de objetos por sus propiedades

El tipo Array de javascript incluye una función sort para ordenar los elementos del arreglo. Podemos ordenar arreglos numéricos, de texto, de fechas, etc. Pero ¿cómo ordenamos un arreglo de objetos por una propiedad específica?

Sigue leyendo «Javascript: Ordenar arreglos de objetos por sus propiedades» →

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» →

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» →

ASP.NET y jQuery AJAX

Muchos programadores «expertos» denigran a javascript, considerándolo un lenguaje muy sencillo y poco funcional. La verdad es que este lenguaje es muy poderoso, y a la vez, con cierto grado de complejidad.

Un de los principales beneficios de javascript ha sido AJAX, que nos permite ejecutar funciones del servidor sin invocar al submit del formulario. La ventaja de esto es evitar recargar la página completa, y solamente llamar a un método, recibir un resultado y manipularlo de la forma que necesitemos. Esto lo podemos ver en sitios como Facebook, donde la mayoría de las acciones que realizamos no recargan la página, sino que modifican solamente una parte.

Claro que, como dije, esto tiene su complejidad. Trabajar con Javascript no debe implicar dejar de lado la programación web tradicional (ejecutar código al presionar el submit del formulario), ya que no podemos estar seguros si el código se ejecutará correcto, mucho menos si el usuario tiene javascript habilitado, y aquí es donde tendremos la mayor carga de trabajo.

El archivo que adjunto es una aplicación web hecha en ASP.NET 4.0, que incluye una página aspx que realiza operaciones en el servidor de ambas formas: por medio de un servicio web asmx invocado desde AJAX de jQuery y por medio del code-behind de la página.

*Actualización (16/06/2017)

Subí el código a GitHub. La solución es de Visual Studio 2017, pero el proyecto sigue siendo de .NET Framework 4.0.

Código fuente (VS2015/.NET 4.0)

 

Modernizr: Detectar soporte de HTML5 y CSS3

Ahora que HTML5 y todas sus tecnologías son la novedad, los desarrolladores web no podemos evitar sentirnos atraidos a sus nuevas características, y todo lo que trae consigo la nueva generación de la Web. Los nuevos tipos de input, los elementos de video y audio, las transiciones, ¡webfonts!

Sin embargo, hay un detalle que como buenos y éticos desarrolladores web que somos, no podemos dejar pasar: la web es para todos. Y dentro de ese «todo» se encuentran:

  • Los navegadores que no soportan todas las características de HTML5, o al menos las que pensamos utilizar
  • Los navegadores que ya no tienen soporte (por una u otra razón) y que siguen siendo muy utilizados (por una u otra razón)
  • El hecho de que HTML5 y todas las tecnologías que abarca sigan siendo borrador, y aun está sujeto a cambios, como el caso de la etiqueta <video>, que sigue una disputa por cuál formato de video dejar como estándar

Hay una gran variedad de navegadores, y cada uno con distintas versiones, y cada versión con ciertas características soportadas. Decidir cuándo utilizar cierta característica es muy difícil cuando no anticipamos si el navegador la soportará. Pero gracias a eso, existe Modernizr.

Sigue leyendo «Modernizr: Detectar soporte de HTML5 y CSS3» →

Javascript – Detección de soporte de funciones

En el post pasado, hablé de que Google está invitando a los desarrolladores a detectar navegadores basados en Chrome para aprovechar las novedades que ellos están implementando en Javascript, con la justificación de que «para que todos los navegadores soporten esas novedades tendrá que pasar mucho tiempo».

Visto de esta forma, estamos cayendo en lo mismo que sucedía en tiempos de IE vs Netscape: darle preferencia a un navegador y discriminar al resto. Es verdad que hay diferencias entre navegadores, pero la misma forma de Javascript nos permite sortear esas diferencias en la mayoría de los casos.

Un primer caso que puede presentarse es cuando algún navegador realiza una misma operación de forma distinta a otro. En este artículo hablaré de cómo detectar esas diferencias.

Sigue leyendo «Javascript – Detección de soporte de funciones» →