Javascript

14 entradas

Programming programando

Del código fuente a la ejecución de los programas

Ya tenemos el código fuente, ¿y ahora? ¿cuál es la magia que hace posible que un código fuente se ejecute? Todo programa necesita un traductor, que compile o interprete el código fuente para que pueda ser ejecutado. Es una primera diferencia que puede marcarse entre los lenguajes de programación, ya que un lenguaje puede ser interpretado, compilado, o incluso ambas cosas. Además, la ejecución puede ser dependiente de la máquina, o ejecutarse en una máquina virtual, que te independiza de la máquina. Por ejemplo los lenguajes funcionales o lógicos suelen usarse primeramente interpretados, como Prolog o Haskell mientras se desarrolla, pero también tenemos disponible un compilador para mejorar su eficiencia. PHP es interpretado, aunque ha habido compiladores para mejorar su eficiencia de ejecución. Cabe destacar como curiosidad la Hip Hop Virtual Machine de Facebook que crearon para agilizar PHP, que precisamente compila los ficheros fuente a un código objeto intermedio más rápido de ejecutar. Javascript, Typescript, Ruby, también son interpretados. C, C++, VB, C# son compilados, es decir, se necesita compilar el código fuente a códigos objeto, estos códigos objeto a su vez se linkan, se retraducen, para ejecutarse finalmente en la máquina.

Cloudfront logo

AWS: sirviendo un píxel de conversión con el CDN de CloudFront

Una de las tareas más interesantes para saber si las cosas sirven para algo en tu negocio de Internet, consiste en seguir a las visitas. Es decir, consiste en el seguimiento de la conversión, mediante lo que se llaman píxeles de conversión. Es decir, si queremos saber si un canal de entrada a tu web convierte o no, si los anuncios que ponemos en otras webs, si los enlaces de redes sociales, emails, etc.. sirven de algo. Para esto debemos de llevar un seguimiento de dicha entrada a tu web. Un píxel de conversión es un código invisible para el visitante, que nos da la posibilidad de saber de dónde vienen las visitas a tu web. Muchas veces nos puede bastar con herramientas como Google Analytics, Piwik, o similar. Pero a veces necesitamos dar un paso más, creando nuestros propios píxeles de conversión. Así no estaremos de nuevo limitados a lo que te permiten las herramientas. Escenario Piensa que puedes recibir muchas visitas a los píxeles, miles o millones de visitas por minuto si estas en plena campaña publicitaria por Internet. Tanto que si los píxeles están en tu servidor, puedes llegar a provocarte un ataque de denegación de servicio […]

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

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 ley llamada LGPD, y ahora también hecho reglamento RGPD, los desarrolladores nos vemos obligados a mostrar un mensaje de si el usuario acepta que usemos cookies. Todo esto se debe en parte por el miedo por las cookies, quizá por el desconocimiento de lo que son o para qué sirven. 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í […]

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

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 jQuery de cualquier extensión, plantilla, módulo… para evitar que se vuelva a cargar.   Mirando el código fuente de la web puedes comprobar si ya tienes la cabecera correcta y entonces todo debe funcionar. Hay quien dice de desactivar Mootools pero se ha venido usando mucho en Joomla y dejarían […]

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 con el vídeo y sonido al usar HTML4, resulta que los navegadores toman por defecto unos valores u otros.  Total que acabo instalándome los principales navegadores para hacer las pruebas: Chrome Internet Explorer Mozilla Firefox Safari Opera …en orden de uso. Cabe indicar que si usas Windows se complica encontrar […]