JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Problemas para detectar Internet Explorer 11 y cómo solucionarlos

Con la reciente Preview de la siguiente versión de Windows 8 (Windows 8.1) se ha incluido también un avance de la próxima versión del navegador de Microsoft, Internet Explorer 11. Con IE11 Microsoft está cada vez más cerca de conseguir el nivel de compatibilidad con los estándares de la W3C (HTML5 y CSS3) que tienen otros navegadores de la competencia. De hecho, parece que quieren parecerse tanto a los competidores que han hecho más difícil el poder identificar al navegador, por lo que mucho código viejo puede que llegue a confundirse. Generalmente se utilizan dos técnicas para distinguir al navegador actual, dependiendo de si lo estamos haciendo en el lado servidor o en el lado cliente. Detección en el lado servidor En el lado servidor se utiliza la Cadena de Agente de Usuario (UAS), que es una cadena de texto que todos los navegadores envían al servidor con cada petición y que los i... [Más]

Activar herramientas experimentales avanzadas en Google Chrome Developer Tools

Si eres programador avanzado de lado cliente, con HTML5, CSS3 y JavaScript seguramente agradecerás toda la ayuda que puedas obtener a la hora de depurar y afinar tus aplicaciones. Las herramientas de desarrollo que vienen integradas con Google Chrome son una gran ayuda. En mi libro de JavaScript tengo un capítulo entero dedicado a ellas. Además de las herramientas incorporadas de serie, si quieres poder sacar partido a herramientas más avanzadas que de momento Google no tiene terminadas (están en fase experimental) puedes hacerlo de forma sencilla y sin necesidad de descargar o instalar nada. Para ello puedes seguir los siguientes pasos sencillos: 1.- Abre una nueva pestaña de Chrome y escribe chrome://flags Esto abrirá los ajustes avanzados del navegador, que nos permiten ajustar infinidad de parámetros avanzados de funcionamiento del mismo: 2.- Dentro de los ajustes disponibles busca "Enable Developer Tools Experiments" (puedes usar CTRL+F para hacerlo). Para que fu... [Más]

Efecto "Polaroid" y giros en fotografías con CSS

En mi anterior post contaba cómo podíamos utilizar efectos CSS3 para conseguir una mejora sustancial en el aspecto de fotografías (sobre todo de personas), convirtiéndolas en círculos y utilizando efectos auxiliares como bordes y sombras para darles un toque estético adicional. En esta ocasión voy a seguir en la misma línea y mostraré algunos efectos CSS3 adicionales que nos permitirán obtener un aspecto muy diferente: Efecto "Polaroid". Las cámaras de foto instantáneas de tipo "Land" (en honor a su inventor) se empezaron a producir a partir de 1948, pero fue en los años '70 y hasta mediados de los '80 cuando su popularidad alcanzó el máximo apogeo. Históricamente se han producido cientos de modelos diferentes, pero sin duda la empresa que las popularizó fue Polaroid, hasta tal punto que el nombre de esta marca se ha convertido en un genérico para denominar a este tipo de fotografía (como Kleenex para los pañuelos de papel). En la actualidad Polaroid todavía sigue... [Más]

Imágenes circulares solamente con CSS 3

Últimamente está muy de moda ofrecer imágenes mejoradas con algún efecto a la hora de presentarlas en las páginas Web. Por ejemplo, si visitas mi página de Google+ verás que mi foto aparece en forma de círculo, aunque en realidad es cuadrada: La verdad es que queda mucho mejor. Pero, si la foto que yo subí originalmente es cuadrada, esta con forma circular ¿se genera automáticamente a partir de la original? ¿Cómo se consigue ese efecto? La respuesta viene de la mano de CSS y el uso inteligente de los bordes. Bordes redondeados Vamos a partir de una fotografía cuadrada como la que muestra a continuación: Se trata de un paso elevado entre dos edificios en Bellevue (WA). Para conseguir que se visualice recortada en círculo, lo que tenemos que hacer es sacar partido a la propiedad border-radius de CSS 3. Esta propiedad nos permite definir la curvatura en pixeles u otras unidades que va a tener cada uno de los cuatro bordes de un elemento HTML. Así, por ejemplo, si queremos qu... [Más]

Cómo funcionan las cookies y por qué es importante saberlo

De todos los personajes de Barrio Sésamo, cuando era pequeño los que más me gustaban eran el Conde Draco (que contaba todo lo que se le ponía por delante) y sin duda Triki, el monstruo de las galletas. Triki se pasaba el día comiendo galletas de forma desmesurada, rompiéndolas en mil pedazos mientras lo hacía. Creo que se le salían de la boca más que las que era capaz de procesar. Era un personaje muy divertido. Me he acordado de él hoy al pensar en escribir este post, ya que a algunos programadores web les pasa lo mismo que a Triki: procesan las cookies pero le sirven de bien poco o le hacen un flaco favor. Más o menos todos los programadores web tienen una idea aproximada de qué son las cookies en un navegador web y para qué se utilizan. Pero hay algún concepto básico que todavía no es bien conocido y que me parece interesante aclarar, así que me he decidido a escr... [Más]

jQuery 2.0 ya está disponible… pero no corras a descargarlo todavía

Hace dos días se liberó la versión 2.0 de jQuery, el plugin más conocido y el más utilizado por todos los desarrolladores web del mundo. Por regla general una nueva versión de cualquier cosa siempre es bien recibida, ya que aporta soluciones a bugs y nuevas características, y generalmente siendo compatible hacia atrás. Así que todos corremos a descargarla y probarla en nuestros sistemas. En este caso va a ser mejor que te lo pienses dos veces… La versión 2.0 de jQuery NO ofrece características nuevas, y soluciona un mínimo número de bugs. Sus desarrolladores se han centrado en una cosa fundamentalmente: eliminar código de compatibilidad con Internet Explorer 6, 7 y 8 que les complicaba mucho la vida y hacía que perdiera un poco de rendimiento. Así que la única novedad real de jQuery 2.0 es que no ofrece soporte para IE 6, 7 y 8. Al mismo tiempo han liberado l... [Más]

Tu estilo gana a mi estilo: Especificidad en reglas CSS

Los selectores CSS nos permiten definir con mucha precisión el aspecto (¡y comportamiento!) que van a tener los elementos HTML en nuestras páginas. Así, utilizamos: estilos embebidos, identificadores, clases, pseudo-clases, etiquetas y atributos para definir exactamente cómo ha de funcionar cada elemento. Las hojas de estilo .css suelen tener decenas o cientos de estilos que el navegador debe aplicar a cada elemento. Muchos de estos estilos entran en conflicto, por lo que ¿cómo decide el navegador qué estilo o estilos concretos debe aplicar a un determinado elemento de la página? Pongamos un ejemplo sencillo y consideremos el siguiente fragmento de HTML: 1: <ul id="menu"> 2: <li>Menu 001</li> 3: <li class="destacado">Menu 002</li> 4: <li>Menu 003</li> 5: </ul> Al cual se le aplican los siguientes dos estilos: 1: ul#menu li { ... [Más]

Déjà vu: Blink es IE5/6 y Google es la nueva Microsoft

Los que tenemos ya unos cuantos años a nuestras espaldas y somos además bilingües digitales, recordamos lo que fue la tremenda guerra de los navegadores de finales de los años ‘90 y principios de los ‘00. Todavía sentimos punzadas de dolor al recordar lo que ello supuso para los desarrolladores web de entonces. Si crees que ahora es complicado programar una aplicación web y que funcione para todos los dispositivos y navegadores, tendrías que haber visto lo que era eso en el año 2.000 :-S Cuando Internet apareció en nuestras vidas a principios de los años ‘90 muchas empresas subestimaron su importancia. Y quizá la que más se confundió entonces fue Microsoft, por aquella época ya líder del mercado de sistemas operativos para el escritorio. No supo ver el potencial que suponía la Red de redes, y se dejó llevar. para cuando quiso darse cuenta una peque&nti... [Más]

Validación no-intrusiva en ASP.NET 4.5 y errores de validadores

Por defecto, ASP.NET 4.5 (con Visual Studio 2012) cambió la manera en la que funciona la validación de controles. Desde fuera parece que nada ha cambiado, pero por debajo ahora se utiliza por omisión un nuevo tipo de validación no intrusiva basada en jQuery, en lugar de los scripts anteriores. Ahora, la validación de lado cliente se consigue de una manera más sencilla usando el plugin jQuery validation, y decorando los diferentes controles de validación usando atributos "data-val", en lugar de llenar tu página de scripts de validación. Por ejemplo, este es el HTML resultante de un control RequiredValidator cuando se está usando el modo de validación no-intrusiva: 1: <span 2: id="RequiredFieldValidator1" 3: data-val-controltovalidate="TextBox1" 4: data-val-focusOnError="t" 5: data-val-errormessage="Required!" 6: data-val-display="Dynamic" 7: data-val="t... [Más]

Live Tiles para aplicaciones web en Windows 8

Windows 8 supone un cambio radical en cuanto a las interfaces de usuario se refiere, dentro del mundo Windows. Se ha eliminado por completo el clásico menú de inicio que nos había acompañado durante mas de 17 años (desde Windows 95) y todo gira ahora en torno a la nueva página de inicio: Como casi siempre que Microsoft lanza algo nuevo, y especialmente siendo un cambio tan radical como este, las opiniones están polarizadas y no suele haber término medio: o lo adoras o lo odias a muerte. Personalmente he de reconocer que fui de estos últimos cuando probé por primera vez Windows 8 hace alrededor de un año en las primeras versiones preview. No me gustaba nada. Lo cierto es que un año después no sólo he cambiado de opinión, sino que me gusta mucho, especialmente si dispones de una pantalla táctil (no tanto en un PC normal, donde la ventaja no es tan perceptible). Una vez que dominas los cuatro gestos que necesitas conocer y sobre todo cuando ves la gran ventaja que ofrece (incluso en es... [Más]