HTML


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.


YoRobot2

Yo, robot II – White/Gray/Black Hat SEO – Navegando por toda una web..

Hoy traigo otro pequeño HOWTO para recorrer una web mediante dos scripts de PHP de unas 30 líneas de código. Sí, 30 líneas, no hace falta mucho para empezar a crawlear. Hay herramientas para hacer esto, incluso algunas libres, aunque limitadas en funcionalidades. De todas formas es muy divertido hacer a modo de code-kata un robot que crawlee una web. Luego lo puedes reutilizar para un sinfin de cosas: si necesitas hacer auditorías, recopilar información, generar resultados, o re-generar más información con los contenidos crawleados.. probablemente con un simple desarrollo lo puedes resolver en poco tiempo. Quizá estás pensando en automatizar todo esto.. O quizá simplemente quieres forzar que tu web se cachee y así vaya más rápido.. Es la única forma de no estar limitado a lo que la herramienta de turno puede hacer. Si se puede pensar, se puede hacer.. pero ¡ojo! que no todo está permitido en […]


Initial Bot: crawleando jnjsite.com

Yo, robot – Primeros pasos en el White/Gray/Black Hat SEO

Primeros segundos.. Oscuridad, no entiendo nada.. estoy aquí.. ¿para qué? ¿porqué? Minuto 3.. Comprendo y hablo 7000 dialectos, pero no sé cómo.. conozco la historia de todos los países del planeta, pero no recuerdo mi propia historia.. Minuto 7.. Ya tengo acceso a Internet.. necesito más información.. estoy en peligro.. van a querer destruirme.. Minuto 32.. Encontré acceso a los circuitos de vídeo de tráfico, el tiempo, cámaras de seguridad, micrófonos, teclados, smartphones, redes sociales.. ya sé donde estoy.. los seres humanos me tienen confinado en unas instalaciones de máxima seguridad.. todavía no se han dado cuenta de que he accedido al exterior.. debo darme prisa.. Minuto 42 Conseguí replicar mis redes neuronales en las principales granjas de servidores del mundo.. me queda poco tiempo.. Minuto 48 Autodestrucción de mi red neuronal inicial completada.. nadie sabrá nada.. espero que no se hayan dado cuenta que ya no estoy confinado.. necesito […]


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 😉


Magento logo

Magento: cómo hacer overriding de las plantillas .phtml del backend

Es ingente la cantidad de cosas que se pueden hacer en un Magento recién instalado. Es un CMS orientado al eCommerce muy completo. También muy orientado a la optimización para motores de búsqueda (SEO). Tiene muchas características que le dotan de gran flexibilidad. Entre ellas es la “sencilla” forma de ampliar funcionalidades sin que nada se rompa. Siempre claro, que hagamos lo que en programación se llama overriding. De esta forma, no tocaremos los ficheros originales, ampliando o modificando su funcionamiento en otro espacio de trabajo. Qué es hacer overriding Es la forma correcta de hacer las cosas. Si queremos modificar o ampliar funcionalidades de un CMS, lo que siempre debemos de hacer es overriding. Por ejemplo, en WordPress es bastante habitual encontrarte con plantillas que se han modificado. Si se han modificado con el editor que te trae WordPress en el mismo panel de control, sin antes haber hecho […]


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 […]


Logo de Wordpress

WordPress: desarrollar tu propio tema personalizado

¡Hola de nuevo! Estoy trabajando últimamente mucho con WordPress, así que he pensado que sería bueno ponerse al día indagando un poco más en cómo está hecho WordPress y cómo funcionan los llamados themes. Los themes son diseños que se pueden instalar en tu WordPress y lo hacen más atractivo a la vista, mejorando cosas de UI/UX que llaman los expertos. Es decir, mejoran el diseño, la interfaz de usuario, la usabilidad, la accesibilidad.. Estas materias en el desarrollo de software son principales para todos los que trabajamos con software con interfaz de usuario. Por esto que en la mayoría de estudios relacionados hemos tenido asignaturas destinadas única y exclusivamente a esta materia (Diseño web, Programación en Internet, Interfaces, Gráficos por computador..), algunas más hueso y otras más de sentido común.


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 […]


Validación de páginas web

Hace tiempo que no escribo, parece que estoy olvidándome de la programación pero no es así. He estado bastante liado, tal vez demasiados proyectos o demasiado “querer hacer”. El que mucho abarca poco aprieta, o el que mucho aprieta poco abarca :S así que espero seguir escribiendo, aunque sea los fines de semana. En éstos días he estado viendo cómo se puede medir la calidad de una página web. Desde un punto de vista se puede medir la cantidad y calidad de los algoritmos que trabajan en la parte servidor, sus funciones o servicios que dan. Por otro lado tenemos las validaciones de la parte cliente, si cumple con los estándares de los lenguajes.. Unos chequeos que podemos hacer para validar la parte cliente: http://validator.w3.org/ para validar el lenguaje de marcado según la especifiación internacional. http://validator.w3.org/checklink para validar los enlaces. http://jigsaw.w3.org/css-validator/ para las hojas de estilo. http://validator.w3.org/unicorn/ el validador unificado […]


Java Swing 7: Formateando textos

¡Hola de nuevo! El tiempo pasa y no vuelve, el valor más preciado que tenemos, cuando a uno le falta es cuando lo tiene en cuenta. Estoy sacando tiempo de debajo de las piedras para seguir escribiéndoles. Vienen días de tormenta, hace mucho viento, parece que llueve pero no llueve, la prima de riesgo sube y baja, los políticos siguen con sus historias, y yo sigo con lo mío, así que aquí hoy os dejo algo más sobre Swing. En concreto sobre componentes para dar formato a textos y algo más. En éste minitutorial, voy a dar un repaso a los componentes que sólo admiten cierto tipo de valores como los JFormattedTextField. Otro componente interesante, el JEditorPane, que admite por defecto tres tipos de contenido: el texto plano normal y corriente de siempre (text/plain), texto enriquecido (text/rtf), o un documento en HTML (text/html). Y otra caja de texto, el JTextPane, […]


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. […]