Javascript


YoRobot4 - Text to HTML ratio

Yo, robot IV – White/Gray/Black Hat SEO – El Text to HTML ratio

El contenido es el rey para el posicionamiento, rezan muchos SEOs y muchas herramientas para SEOs. He leído por Internet que muchos hablan de que lo más importante para posicionar las páginas web es que el contenido sea bueno, que sea geniuno, interesante para el usuario. Desde nuestro punto de vista, tenemos varios enfoques para hacernos una idea de si el contenido de una web es bueno. El más sencillo es la tasa que hay entre el texto y el código HTML, CSS y Javascript de nuestra web. Realmente, es la tasa entre el texto y el HTML, CSS y Javascript, aunque muchos se olvidan de que no sólo hay HTML.. Y muchas veces este CSS y Javascript puede ser tanto que la tasa de texto resultante baje demasiado. Todo esto se reduce en la tasa llamada Text to HTML ratio.


Usuarios por dispositivo mes a mes año pasado

Qué es realmente la Accesibilidad Web, el responsive design, el mobile-first.. una puesta al día con Bootstrap

Ha llegado la hora de ponerme al día con esta herramienta de desarrollo web para proyectos mobile-first. Hablo de Bootstrap, que como reza en su web, doy fe de que es muy popular desde hace años: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Si tienes una plantilla contruída sobre Bootstrap ya tienes una página preparada para todo tipo de dispositivos. Esta herramienta creada por Twitter es todo un referente desde hace años. Puede que tu web esté mejor o peor hecha, pero si tienes Bootstrap, ya tienes un buen punto de partida. Y una de las herramientas de mayor renombre. Así que si no lo has tenido en cuenta, ya es hora de cambiar el chip, y empezar a pensar de otra forma. ¿Qué es la Accesibilidad Web? Si vamos al origen de la creación de la Web. […]


Pixel de conversión, chocolate cookie

Cómo hacer un pixel de conversión

Imagina que contratas a una persona para que te haga publicidad en varias webs. Llegas a un acuerdo de darle un monto por cada visita que llega a través de la publicidad que te hace. O un porcentaje por venta que llega de su web. Pero ¿cómo saber si este comprador que ha llegado a tu web viene de haber visto la publicidad de esta persona que te publicita? Esto se puede hacer con los llamados pixeles de conversión. Simple y llanamente son páginas web que estan en el servidor de tu negocio que se dedican a enviar cookies, incrustándose en las páginas que te hacen publicidad mediante iframes o llamadas de Javascript. Entonces, si alguno de dichos visitantes llega a tu negocio con una de esas cookies, ya sabes que ha visitado la web que te está haciendo publicidad y le darás las gracias con razón 😉


Logo de Wordpress

WordPress: desarrollar tu propio tema personalizado 100% tuyo

¡Hola de nuevo! Continuando con el post anterior sobre el desarrollo de temas para WordPress. Inevitablemente, ya sea más tarde o más temprano, llegaremos a querer desligarnos totalmente de modificar los temas de otros. Todos hemos empezado haciendo pequeños arreglos con el editor que tiene WordPress. Si has seguido el post anterior sobre cómo hacer un theme hijo de otro te habrás quedado con ganas de más, así que continuándolo vamos a crear uno básico 100% tuyo para lo que necesites. Ahora bien, lo normal es que si estás aquí alguna vez hayas jugueteado con temas de WordPress de otros, modificándolos y llegando a un punto en el que no puedes actualizarlo porque perderías las modificaciones. Por otro lado si haces un tema hijo siempre vas a depender del padre, y también puede que haya actualizaciones del padre que rompan tu diseño. Así que la forma más profesional de solucionar […]


Atom Editor, ¡brutalmente sencillo y potente!

Hola de nuevo, ya estoy trasteando con un nuevo editor de código fuente que hace poco ya alcanzó la versión de producción 1 y está en el momento en que escribo en la versión 1.0.7. Estoy hablando del Atom Editor, un editor de códigos fuentes ligero, rápido, con todo tipo de plugins.. como dicen en su web: un editor hackeable del siglo 21. Es sencillo a más no poder, pero a la vez se puede mejorar instalando paquetes y pieles, que lo convierten en una potente herramienta. Como punto de entrada me sorprendió no recuerdo donde que leí que estaba hecho en HTML, CSS y Javascript. Ya sólo esto me sorprendió así que hace un par de meses decidí instalarlo y probarlo. No probé demasiado bien, pero ahora que ya ha alcanzado cierta madurez lo he probado bien durante una semana y estos son los resultados. Características Al estilo Sublime […]


Sencillo mensaje de aceptar cookies para tu web

Por la nueva ley en Europa. Debido en parte al miedo por las cookies. Ahora los desarrolladores nos vemos obligados a mostrar un mensaje de si el usuario acepta que usemos cookies. Las cookies son simples ficheros de texto en plano que no contienen absolutamente ningún programa. No se ejecutan ni pueden infiltrarse en un ordenador pero ya puestos a hacer leyes no nos queda otra que obedecer. Éstas cookies, o galletas en castellano, se usan para hacer carritos de compra en tiendas online, almacenando los productos que estas comprando. A veces se usan para asegurar una sesión, evitando gracias a ellas que otros usuarios suplanten la identidad de otros. Más que un peligro para el usuario, que no lo son, son una gran ayuda para todos. Dejemos el tema de momento aquí… 🙂 Vamos con el código Con un par de funciones Javascript y un sencillo código HTML con […]


Instalar Bower en Ubuntu

¡Buenos días! Estoy escribiendo poco últimamente sobre programación. No me he olvidado del blog, es que gracias a Dios estoy teniendo menos tiempo. No está la cosa para echar cohetes acá en Spain pero voy a intentar apretar y no abandonar en las buenas costumbres, como por ejemplo, escribir en un blog 😉 Para instalar Bower tuve que navegar para encontrar dispersa alguna información, así que aquí les dejo todo junto en un post. Qué es Bower es una excelente herramienta para automatizar la gestión de tus librerías. Está creada para gestionar los fuentes de la parte front-end. Es decir, Bower nos descarga y actualiza las librerías de entorno cliente: CSS, HTML y Javascript que necesitemos. Puede ser por ejemplo las librerías de Bootstrap o jQuery. Instalar Necesitaremos tener instalado: Git npm nodejs La web oficial es: http://bower.io/ Los comandos para instalar son los siguientes: $ sudo apt-get update $ […]


Probando Bootstrap 3

Cada vez menos ordenadores de sobremesa visitan las páginas web. Se venden ingentes cantidades de dispositivos que no son los clásicos ordenadores como tablets, smartphones, smart TV.. Los visitantes de una web necesitan que la página sea compatible con todo tipo de dispositivos. Bootstrap de Twitter está muy de moda, a fecha de hoy van por la versión 3.1.1 así que aprovechando para ponerme al día les dejo éste post. Al grano.. Bootstrap de Twitter es un framework de desarrollo para hacer aplicaciones web compatibles con todo tipo de dispositivos. El modelo de desarrollo cambia totalmente al modo habitual porque se da preferencia a los dispositivos móviles siendo su adaptación primera, antes que para escritorios de ordenador. Para verlo claro más abajo veremos cómo el mismo menú en caso de tener una pantalla ancha se verá en horizontal como en la imagen de arriba. Si tenemos una pantalla estrecha se […]


Conflictos Javascript entre Mootools y jQuery en Joomla solucionado

Me he pasado horas solucionando los conflictos Javascript de una web. Mi caso ha sido con una plantilla de Joomla 2.5 que usa Mootools y jQuery, además de otras extensiones instaladas y plugins internos que usan Javascript. Total, que se cargaba jQuery varias veces (no hay que hacerlo), el orden de carga de los archivos .js no era el correcto. Y el mayor de mis problemas: tanto Mootools como jQuery hacen uso del símbolo $ para programar. Y para colmo usaba el captcha con Aicontactsafe que no funcionaba por el mismo conflicto con el simbolo $, con lo que todo ésto que acabo de escribir es un lio ¿verdad? Navegando y mezclando soluciones, la solución es simple:   En el código fuente de la plantilla, añades en el <head> lo siguiente antes de cargar otros archivos de Javascript: <script src=”rutadondetienesjquery/jquery.min.js” type=”text/javascript”></script> <script type=”text/javascript”>jQuery.noConflict();</script> Y hay que desactivar la carga de […]


Mozilla Firefox: el zorro cada vez más rápido

Cuanto más leo más me sorprende su historia y rumbo que llevan los desarrollos, tanto de la Fundación Mozilla, como en concreto, de su caballo de batalla, el Mozilla Firefox. Hoy he actualizado a la versión 18 del Firefox y me he puesto manos a la obra para éste post. Desde el Netscape, rivalizando con el Internet Explorer y con Chrome también, viene a ser un caso de estudio y una opción nada desechable. En algunos desarrollos, tratando de seguir al 100% los estándares del Consorcio W3 que dirigen el cotarro, me he llegado a encontrar con problemas a la hora de visualizar o con el funcionamiento de la interfaz por problemas de compatibilidad entre navegadores. Según el que utilizaba cambiaba su funcionamiento. Donde se alineaba a la izquierda o derecha en una tabla con columnas agrupadas, ahora se alineaba al centro en otro navegador; aparte de los clásicos problemas […]


Google Drive vía web en 3 sencillos pasos

Me hago eco de una noticia que últimamente está corriendo por Internet, con una guía, a mi entender bastante complicada para poner una web o archivos en descarga directa en Google Drive. La fuente de la noticia que leo es: http://www.pcactual.com/articulo/actualidad/noticias/12064/google_drive_permite_publicar_contenido_web.html … buscando un poco más, encontré la guía de Developers de Google: https://developers.google.com/drive/publish-site He hecho un par de pruebas, aparte de que está en inglés, se habla del webViewLink y de programar para crear un directorio público :S todo ésto se me va complicando… Una web de ejemplo que nos han dejado los de Google es: https://googledrive.com/host/0B716ywBKT84AcHZfMWgtNk5aeXM/ Resumiendo Voy a ir al grano, reduciendo todo el proceso anterior, lo que necesitas es conseguir la cadena que identifica tu directorio que vas a usar para poner tus archivos. En el ejemplo anterior de la gente de Google, es 0B716ywBKT84AcHZfMWgtNk5aeXM, éste es su identificador para el ejemplo que se han currado. […]


El SlideShow más simple con jQuery

Un slideshow viene a significar visor de imágenes o diapositivas que van pasando una tras otra. Estuve buscando para descargar slideshows para web. Encontré de todo tipo, muy elaborados y con muchos extras, unos de pago y otros gratis, pero no era lo que yo quería. Buscaba algo lo más sencillo posible para adaptarlo luego donde lo necesite y al final acabé programándolo a partir de jQuery. Aquí va el código para el que lo necesite: <html><head><!– Con ésto incluyes el jquery en tu web usando en CDN de Google –><script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script></head><body><img id=”imagenslide” src=”imagenes/imagenInicial.jpg” alt=”Imagen de una mascota..” /><script>  cambiaSlideShow(); function cambiaSlideShow() { // variables para configurar var dirImagenes = ‘imagenes/’; // directorio donde estan  // las imágenes, se deben nombrar de la forma  // 1.jpg  // 2.jpg  // etcétera… var numImagenes = 3; // número de imágenes que hay // elige un número aleatorio para mostrar las imágenes // […]