HTML

15 entradas

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 este mundillo. Un poco de teoría Crawlear: es el hecho de recorrer una web obteniendo información sobre esta. Puede interesarte simplemente su estructura, si el HTML está bien formado, si tiene encabezados, utiliza secciones, etc.. Scrapear: es el hecho de guardarse la información contenida en las webs. Si luego reutilizas […]

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 más información.. Esto podría ser el nacimiento de una inteligencia artificial avanzada, lo que muchos llaman ‘la singularidad’. Me he inspirado en la novela de Isaac Asimov, ‘Yo, robot’, en donde se crean las famosas leyes de la robótica. Aunque también podemos inspirarnos unos cientos de años atrás y darle […]

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. No hablo de la creación de Internet, sino de la creación de la web. La web se creó en su origen para dar un acceso universal a la información. Normalmente se asocia la accesibilidad exclusivamente a las personas con alguna discapacidad, pero en la web, esto cobra un sentido más […]

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 una plantilla hija de la original, el problema es que esto no es hacer overriding. Y cuando vamos a actualizar la plantilla.. ¡zasca! se borran todos los cambios hechos.

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 esto es hacer tu propio tema, 100% tuyo, y totalmente desligado de cualquier otro.

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 Text o tipo Eclipse con un estilo ‘dark’ resulta agradable ya la primera impresión. Tus ojos descansan con colores suaves mientras lees los códigos. Como es un proyectos de Github, trae integrada la detección de cambios Git del repositorio que estés viendo. Rápido como él sólo, arranca bien, abre las […]

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 estilo CSS podemos apañarnos: <script>    /* ésto comprueba la localStorage si ya tiene la variable     guardada */     function compruebaAceptaCookies() {        if(localStorage.aceptaCookies == ‘true’){            cajacookies.style.display = ‘none’;        }    }        /* aquí guardamos la variable de que se ha    aceptado el uso de cookies así no […]

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 $ sudo apt-get install git $ sudo apt-get install npm $ sudo apt-get install nodejs $ sudo npm install -g bower Llegados a éste punto si ejecutamos ‘bower update’ nos saldrá un error porque no encuentra ‘node’. Ésto pasa porque el ejecutable en Ubuntu no es node es nodejs y no […]

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 visualizará desplegándose hacia abajo para que quepa todo. Lo mismo sucede con el resto de las páginas diseñadas con Bootstrap, se adaptan según cambia el tamaño del navegador. Así tendremos una web que se puede ver correctamente en cualquier dispositivo. Esbozando la web Para que sea lo máximo posible compatible […]