Javascript – Datepicker con HTML5

En este artículo explico cómo crear un control para seleccionar fechas en HTML, usando el control de HTML5 cuando sea soportado, y cuando no, con un componente de JavaScript

Anuncios

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.

Leer más “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?

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?

Leer más “Javascript: Ordenar arreglos de objetos por sus propiedades”

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

¿Quieres aprender desarrollo web? Entonces apréndelo por completo

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.

Leer más “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.

Leer más “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.

Leer más “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.

Leer más “Modernizr: Detectar soporte de HTML5 y CSS3”