JavaScript

WordPress y el XSS del jQuery

Hace unos días me pasaban por Twitter una información sobre algunos problemas de XSS que tiene jQuery, justo de la versión que actualmente utiliza WordPress y que vendrá de serie con WordPress 5.0.

Bootstrap 4.0

Se acerca la llegada de Bootstrap 4 a nuestros hogares web y es hora de ver algunos elementos a favor y contra de lo que ya conocíamos.

Cómo cargar JavaScript

Como ya he comentado alguna otra vez, el JavaScript es uno de los elementos que bloquean la carga de los sitios web. Para evitar este bloqueo podemos usar algunos métodos creados con otro código de JavaScript que nos servirá para cualquier fichero externo que queramos cargar. Lo bueno de estos sistemas es que permiten cargar en el sistema no sólo JavaScript sino que se podría abrir hasta CSS. Los códigos son bastante sencillos: function loadScript(url, callback){   var script = document.createElement(«script»)   script.type = «text/javascript»;   if (script.readyState){ // Internet Explorer     script.onreadystatechange = function(){       if (script.readyState == «loaded» || script.readyState == «complete») {         script.onreadystatechange = null;         callback();       }     };   } else { // Otros navegadores     script.onload = function(){     callback();   }; } script.src = url; document.getElementsByTagName(«head»)[0].appendChild(script); } Con esta función podemos cargar … Leer más

Combinar y reducir JavaScript

En muchas ocasiones me encuentro que tengo varios JavaScript en una página y, al final, se hace bastante pesado tener que gestionar múltiples ficheros. Además, otra cosa que me gusta es la de reducir al máximo el tamaño del fichero, y el hecho de poder combinarlos también permite reducirlos… Es por esto que existe para PHP una pequeña biblioteca de funciones llamada JSmin-php que ayuda a gestionar esta situación tanto la de combinar como de minimizar. Básicamente lo que hace esta biblioteca es leer todos los ficheros JS de una carpeta, combinarlos, comprimirlos y generar un fichero único cacheado. require_once(«jsmin.php»); $files = glob(«/carpeta/js/*.js»); $js = «»; foreach($files as $file) {   $js .= JSMin::minify(file_get_contents($file)); } file_put_contents(«/carpeta/combinado.js», $js); En el caso en que no queramos leer todos los ficheros de … Leer más

evercookie, la cookie que nunca desaparece

Una de las cosas que en algunos proyectos pueden ser interesantes es saber quién visita la página sí o sí. Normalmente usamos las cookies del navegador, con las opciones de que sean de sesión, de darles una fecha final más o menos cercana o lejana y, por supuesto, la opción de eliminarlas simplemente pulsando un par de botones en las opciones de nuestro navegador. Pero seguro que en alguna ocasión has necesitado poner una cookie que no desaparezca ni aunque se vacíen todas las opciones de configuración. Si esto es lo que quieres, tu respuesta tiene nombre: evercookie. El objetivo del proyecto evercookie es conseguir crear una cookie que sea prácticamente indestructible, y para ello utiliza algunas cosas como: Standard HTTP Cookies Local Shared Objects (Flash Cookies) Storing … Leer más

Crear un efecto «desbloquear» de iPhone

Seguro que en alguna ocasión te gustaría hacer una versión de tu web para dispositivos móviles y añadir un toque iPhone. Es por esto que Chris Coyier ha creado un efecto «slide to unlock» en el que podemos apreciar, sobretodo en motores WebKit, el efecto a todo rendimiento. Entre otras cosas, hay ese efecto degradado y gracias a jQuery también la posibilidad de hacer ese efecto slide. El sistema aprovecha códigos CSS como el -webkit-animation: slidetounlock 5s infinite; y la función -webkit-keyframes slidetounlock. El ejemplo funciona en motores Webkit al 100% (Safari y Chrome), aunque se pueden analizar los códigos del CSS y JavaScript. Código CSS * { margin: 0; padding: 0; } html { background: black; } body {   font: 14px Georgia, serif;   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, … Leer más

Reproductor HTML 5 para vídeo

Estamos muy mal acostumbrados a que nuestros vídeos se alojen en FLV en sitios como Youtube o Vimeo. Hoy en día teniendo en cuenta que el ancho de banda está tirado de precio, no entiendo porqué no se tiende a la calidad y a alojar la propia información si que otros decidan. Con HTML 5 y su nuevo elemento <video> tenemos la posibilidad de incluir muchos formatos de vídeo con muchas opciones… y para hacerlo ya todo más sencillo, además de hacerlo compatible con versiones anteriores que no soportan los nuevos formatos, están apareciendo algunos sistemas que permiten estos reproductores de una forma «chula» y fácil. Algunos de los que he encontrado son estos: FlareVideo: Necesita de jQuery y el soporte es, a mi gusto, un poco reducido… … Leer más

DISTCHA, un antispam accesible

Una de las peculiaridades de los CAPTCHA es que habitualmente son bastante complejos de entender y ya no os digo si cuesta a alguien con todas sus facultades, a alguien que tenga falta parcial o total de alguno de sus sentidos. Y es por eso que desde Francia Quebec (Canada) llega una propuesta llamada DISTCHA (Device Independent Slider Test to tell Computers and Humans Apart) y que es un sistema bastante parecido al de activación del iPhone, ese «slide» que moviéndolo de un lado a otro permite activar el teléfono. Aunque aun se encuentra en una versión muy previa, y a falta de ser probado en muchas plataformas, sí que es cierto que en la mayor parte de los navegadores ya funciona. Funciona gracias a jQuery y es … Leer más

HTML 5: el gran hermano te geolocaliza

Aunque se asocia el lanzamiento de las funciones de geolocalización al HTML 5, lo cierto es que la Geolocation API son unas funciones en JavaScript independientes de esta forma de mostrar las páginas web. Básicamente el navegador, dependiendo de la conexión a Internet, será capaz de saber qué latitud, longitud y otros datos tienes en ese momento. Os dejo con un par de ejemplos de código que, dependiendo del navegador, deberían funcionar. El primero de ellos es simplemente textual, el segundo muestra un mapa. El código más sencillo tiene una pinta tal que esta: <script type=»text/javascript»>   if (navigator.geolocation) {     navigator.geolocation.getCurrentPosition(successFunction, errorFunction);   } else {     alert(‘Tu navegador no soporta la geolocalizacion.’);   }   function successFunction(position) {     var lat = position.coords.latitude;     var long = position.coords.longitude;     alert(‘Tu localizacion es — latitud : … Leer más

Open Standard Media (OSM) Player

Uno de los poyos que siempre me he encontrado a la hora de poner un reproductor de vídeo en la web es que en la mayoría de casos sólo aceptaba vídeos flash (.flv). La cosa es que con el HTML 5 y con jQuery se han montado un reproductor llamado Open Standard Media que tiene muy buena pinta, es código abierto y gratuito. Entre otras cosas, permite el uso de HTML 5, soporta los nuevos elementos audio y video del HTML 5 con los formatos estándar, para el resto de formatos monta un reproductor Flash, se le puede cambiar el diseño de una forma sencilla gracias al uso de ThemeRoller, permite la integraciónd e vídeos de Vimeo y Youtube (simplemente indicando la URL), tiene la opción de listados … Leer más

Para qué navegador he de programar

En muchas ocasiones escucho una grandiosa frase del estilo: es que eso que me dices no funciona en Internet Explorer 6. A parte de que Explorer 6 es un producto caducado, y no lo digo yo, lo dice la propia Microsoft con una página sobre el upgrade a Explorer 8 que me parece especialmente divertida por la imagen que ofrece (verdad que no beberías leche caducada hace 9 años?), creo que vale la pena hacer cosas para cumplir el Principio de Pareto, también conocido como la regla del 80-20. ¿Esto que significa? Pues que, como en muchas ocasiones, Yahoo! dispone de una pequeña gráfica que viene a explicar qué navegadores son los que hay que utilizar, y lo lanza una vez por quarter (cada 4 meses). En este … Leer más

Cómo precargar elementos CSS, JS y similares

Seguro que alguna vez habéis pensado cómo hacer que vuestro sitio vaya todavía más rápido. Pues hay forma de hacerlo, sobretodo si la gente suele visitar vuestra página principal y luego sigue navegando. La cuestión es que en muchas ocasiones los CSS y JavaScript de las páginas principales de los sitios difieren mucho del resto de la web… ¿qué hacer para mejorar esto? Pues tener un CSS y JS específico sólo para la página principal y pre-cargar los CSS y JS del resto de la página en la caché del navegador. Para esto, que puede ser un poco complejo, podemos usar un código que he encontrado y que parece funcionar correctamente en todos los navegadores. window.onload = function () { var i = 0, max = 0, o … Leer más

HTML5 en Internet Explorer 8

Hace cosa de 2 años comencé a publicar alguna cosilla sobre HTML5. La verdad es que no era gran cosa, pero lo suficiente para hacernos una idea de que en SEO la cosa no iría nada mal. Y como hace ya 3 meses que puse este sitio web en HTML5 me he decidido ha hacer algún repaso poco a poco sobre los cambios. Antes de nada comentar que «los buscadores» parece que ya leen el HTML5 y le están dando ya peso a las cosas como se las tiene que dar. Al cabo de las 4 semanas, sin cambios aparentes (ya que fui publicando lo mismo sin tener ningún enlace fuerte ni nada parecido) el tráfico del blog aumentó un 30%. Eso sí, uno de los problemas más … Leer más

Ethek integra Live Messenger

He de reconocer que si hay un software que todo el mundo utiliza es Windows Live Messenger y no cabe duda de que cualquier integración de un sitio web sólo puede levar a ser un acierto. Llevo varios meses planteándome integrar algún sistema de estos tan de moda ahora, y aposté en Ethek y en Windows Live ID, más concretamente en Windows Live Messenger Web. Estos días atrás alguien hizo que la chispa saltara y que mis pruebas en una máquina perdida del universo se acabasen convirtiendo en una versión beta que ha durado tan sólo 2 horas, para pasar a producción en cuanto tenía todas las funcionalidades en línea. ¿Qué es lo que he hecho? Básicamente se resumen en 3 elementos: Integrar la Windows Live Messenger Bar … Leer más