Google Tag Manager

Con Google Tag Manager podemos incluir códigos o píxeles de seguimiento, por ejemplo, el código de seguimiento de Google Analytics, o de Webmasters Tools (Search Console), de campañas de publicidad (como los generados por Google Adwords para optimizar nuestras campañas de SEM), etc. sin tener que editar el código de nuestro sitio web, App Mobile o AMP, cada vez que deseamos incluir uno de estos códigos.

Accede a Google Tag Manager.

Crea una cuenta haciendo clic en el enlace “CREAR CUENTA”.

A continuación, escribe un nombre para tu cuenta. por ejemplo www.miweb.com y haz clic en el botón “CONTINUAR”.

Ahora escribe un nombre para crear un contenedor donde se cargarán los distintos códigos que vayas añadiendo y selecciona entre las diferentes opciones:

  • Sito Web
  • iOs
  • Android
  • AMP

En este ejemplo seleccionamos “Sitio Web” y hacemos clic en “CREAR”.

Aceptamos el Acuerdo de Condiciones de Servicio de Google Tag Manager.

Ahora nos abrirá una ventana con las instrucciones para instalar el código en nuestro sitio Web. Tendremos que colocar el primer código que aparece entre las etiquetas <head> </head> de todas nuestras páginas, o si nuestra página hace uso de una plantilla, en aquel archivo que contenga dichas etiquetas.

El segundo código lo colocaremos justo después de la etiqueta <body>. Al igual que en el caso anterior, en todas las páginas de nuestro sitio web, o si usamos una plantilla en los archivos que carguen dicha etiqueta .

Haz clic en “Aceptar”.

A partir de este momento, cada vez que necesites añadir un nuevo código en tu sitio web, ya no tendrás que acceder y editar los archivos de tu Web, sino que podrás hacerlo directamente desde Google Tag Manager.

Para añadir un nuevo código, haz clic en “Añadir nueva etiqueta”. Escribe un nombre para identificarla, por ejemplo Google Analytics. Haz clic en el cuadro “Configuración de la etiqueta” y selecciona una opción. Como verás, hay varias opciones predefinidas o preconfiguradas, sin embargo vamos a hacer uso de HTML Personalizado.

En el cuadro HTML pega el código de seguimiento generado en Google Analytics, y en opciones de activación de la etiqueta selecciona una vez por página.

Ahora haz clic en el cuadro “Activación” para indicar cuándo debe activarse la etiqueta, en este caso dejamos la opción marcada por defecto “All pages”, ya que tendremos que hacer el seguimiento en todas las páginas de nuestro sitio web.

Imagina que en lugar de insertar el código de seguimiento de Google Analytics se tratase del código de seguimiento de una campaña de publicidad SEM de Google Adwords, y hemos configurado dicha campaña para que se optimice cada vez que se genere una compra en nuestro sitio de ecommerce; en este caso deberíamos activar dicho código de seguimiento solo en la página de agradecimiento o Thank you page.

Para ello, en la ventana “Activación” hacemos clic en el símbolo + que aparece en la esquina superior derecha, se nos abrirá una nueva ventana donde configuraremos el activador.

Escribimos un nombre que nos ayude a identificarlo posteriormente, por ejemplo: Thank you page. Ahora, haciendo clic en el cuadro “Configurador del activador”, nos muestra una nueva ventana donde debemos seleccionar el tipo de activador. En este caso, seleccionamos página vista, y marcamos la opción “Algunas páginas vistas”. Selecciona en el desplegable “Page URL” y seleccionamos la opción “es igual a” o “contiene”, dependiendo de cómo sean las URLs de nuestro sitio web, y escribimos a continuación la URL de nuestra Thank you page.

Por último hacemos clic en el botón “GUARDAR” de la parte superior derecha para salvar los cambios.

Volvemos nuevamente a hacer clic en “GUARDAR” para salvar nuestra nueva etiqueta.

Para terminar y publicar en nuestro contenedor las distintas etiquetas que hayamos creado, hacemos clic en “ENVIAR”.

Webfonts con Google Fonts

neo 2.0 - Webfonts con Google Fonts

Gracias a Google Fonts podemos utilizar las diferentes tipografías de su librería para nuestros diseños Web.

Entra en Google Fonts, selecciona la tipografía o tipografías que quieres utilizar, por ejemplo, vamos a seleccionar la tipografía Monserrat. Usamos el buscador que aparece en la parte superior derecha, donde pone “Search”; escribimos Montserrat y automáticamente nos mostrará tres resultados:

  • Montserrat.
  • Montserrat Alternates.
  • Montserrat Subrayada.

Seleccionamos la primera “Montserrat” haciendo clic en el botón (+).

Ahora en la parte inferior aparece una ventana desplegable con las familias tipográficas seleccionadas, en nuestro caso “1 Family Selected”. Haciendo clic sobre esa ventana nos abrirá las instrucciones con el código que debemos copiar y pegar en nuestro sitio para embeber la tipografía, así como la propiedad CSS para hacer uso de la misma. Fíjate que tenemos dos pestañas: “EMBEBED” y “CUSTOMIZE”.

Copia y pega el siguiente código entre las etiquetas <head> </head> de tu sitio web.

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

En tu hoja de estilos CSS copia y pega la siguiente propiedad en la clase o clases que desees:

font-family: 'Montserrat', sans-serif;

Si hacemos clic en la pestaña “CUSTOMIZE”, podremos añadir o seleccionar las distintas tipografías que componen dicha familia tipográfica, así como el “Lenguage”.

Para este caso podremos seleccionar entre las siguientes tipografías que componen la familia tipográfica:

  • thin 100
  • thin 100 italic
  • extra-light 200
  • extra-light 200 italic
  • light 300
  • light 300 italic
  • regular 400
  • regular 400 italic
  • medium 500
  • medium 500 italic
  • semi-bold 600
  • semi-bold 600 italic
  • bod 700
  • bold 700 italic
  • extra-bold 800
  • extra bold 800 italic
  • black 900
  • black 900 italic

Y en “Lenguages”:

  • Latin
  • Latin Extended
  • Vietnamese

Al seleccionar una o varias tipografías, cambiará el código que debemos pegar entre las etiquetas <head> </head> de nuestra Web, así como las propiedades CSS que tendremos que emplear en cada caso.

Supongamos que hemos seleccionado del listado las siguientes tipografías:

  • light 300
  • light 300 italic
  • regular 400
  • regular 400 italic
  • medium 500
  • medium 500 italic

Y no hemos modificado el “Lenguage”, dejando el que viene por defecto “Latin”.

Si volvemos a la pestaña “EMBEBED”, habrá cambiado el código que debemos copiar y pegar entre las etiquetas <head> </head> por el siguiente:

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i" rel="stylesheet">

Y en nuestras clases CSS tendremos que añadir determinadas propiedades para usar la tipografía correcta.

Es decir, si queremos usar la tipografía Montserrat light 300 (Montserrat:300), tendremos que añadir las siguientes propiedades a nuestra clase CSS:

font-family: 'Montserrat', sans-serif;
font-weight: 300;

Si queremos que además sea en itálica (cursiva), usaremos la tipografía Montserrat:300i, añadiendo las siguientes propiedades a nuestras clases CSS:

font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-style: italic;

Puedes usar el método estándar para hacer la llamada que carga la tipografía:

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i" rel="stylesheet">

O puedes usar un método alternativo, @import, código que deberás copiar y pegar en tus hojas de estilos CSS o entres las etiquetas <style> </style>:

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i');

Elegir entre un método u otro, dependerá de cómo esté construido tu sitio Web; es decir, si tu página web no utiliza una plantilla, y cada sección de tu web es un archivo HTML o PHP con sus correspondientes etiquetas <head> </head> quizás sea más simple utilizar el método @import en tu hoja de estilos CSS, si por el contrario tu web hace uso de una plantilla y solo tienes un fichero con las etiquetas <head> </head>, el cual se carga automáticamente en todas las páginas de tu sitio, utiliza el método estándar.

Por último, añadir un consejo: No es recomendable utilizar diferentes familias tipográficas en un sitio Web, al menos, no más de 2.

Importar bases de datos grandes - Script BigDump

Importar bases de datos grandes - Script BigDump

Script para importar bases de datos que exceden el límite de tamaño o el límite de tiempo de ejecución permitido por nuestra configuración de phpMyAdmin.

Si no podemos modificar dichos límites, tenemos una solución alternativa: BigDump: Staggered MySQL Dump Importer, un Script con el cual podremos importarlas, ya que realiza importaciones más pequeñas y sucesivas de la base de datos, hasta completar la importación total, reiniciando cada importación donde terminó la anterior.

Para ejecutar el Script deberás modificar los siguientes datos:

  • $db_server = 'la dirección del servidor, normalmente localhost';
  • $db_name = 'el nombre de la base de datos';
  • $db_username = 'el nombre de usuario para conectar con la base de datos';
  • $db_password = 'la contraseña para ese usuario';

En el mismo directorio donde hayas guardado el archivo bigdump.php, coloca el archivo SQL de la base de datos a importar, o a través de la opción “Dump file” selecciona la base de datos a importar y haz clic en “Uplodad”.

A continuación haz clic en “Start import”, para iniciar el proceso de importación. Si deseas cancelar en cualquier momento, haz clic en el link “STOP”.

Una vez completado el proceso aparecerá el siguiente mensaje:

Congratulations: End of file reached, assuming OK
IMPORTANT: REMOVE YOUR DUMP FILE and BIGDUMP SCRIPT FROM SERVER NOW!

Elimina por seguridad el fichero bigdump.php así como la base de datos del servidor.

Si por el contrario te aparece algún mensaje de error, prueba a repetir el proceso, o revisa la documentación (en inglés) en la página del autor, en las secciones Usage y/o FAQs.

Descargar Script.

Script en PHP para buscar y reemplazar en base de datos MySQL

En ocasiones necesitamos buscar y reemplazar datos en una base de datos MySQL, por ejemplo si queremos migrar un sitio web hecho en WordPress y necesitamos modificar la URL original por la nueva URL. Tanto si se trata de un entorno real como si se trata de un entorno de pruebas o local, este Script nos facilitará la tarea.

Desde la web de sus creadores interconnect/it podréis descargar el Script así como ver sus diferentes funcionalidades (en inglés).

Con este Script, además de buscar y reemplazar, podemos modificar el cotejamiento de nuestras tablas.

Cualquiera de las acciones que realicemos, podemos aplicarlas a todas las tablas de nuestra base de datos o a una selección de las mismas.

Al ejecutar el archivo nos encontramos con 5 áreas:

Buscar y reemplazar: en los campos “replace” y “with”, introduciremos el término a reemplazar por el nuevo.

Base de datos: aquí tendremos que indicar los datos para conectar con nuestra base de datos.

Tablas: seleccionamos si queremos aplicar los cambios en todas las tablas o en una selección de las mismas.

Acciones: una vez introducidos los datos de conexión con la base de datos, tendremos que hacer clic en el botón “update details” para conectar, después elegiremos la acción a realizar, por ejemplo si se trata de buscar y reemplazar podemos ejecutar la acción haciendo clic en “dry run” o “live run”. Si lo que queremos es cambiar el cotejamiento de las tablas, tendremos que hacer clic en cualquiera de las tres opciones disponibles, “convert to innodb”, “convert to utf8 unicode” o “convert to utf8mb4 unicode”.

Eliminar: elimina los ficheros que componen el Script del servidor como medida de seguridad.

Si la acción que queremos realizar es buscar y reemplazar en una base de datos la url http://midominioactual.com por http://minuevodomino.com tan solo tendremos que introducir en el campo “replace” la dirección a reemplazar y en el campo “with” la nueva dirección. Añadimos los datos de conexión con nuestra base de datos:

  • name: el nombre de la base de datos.
  • user: el nombre de usuario para conectar con la base de datos.
  • pass: la contraseña para ese usuario.
  • host: la dirección de la base de datos, normalmente localhost.
  • port: el puerto, normalmente lo podéis dejar en blanco.

Si no conocéis alguno de estos datos, os los debería de facilitar vuestro proveedor de hosting.

Dejamos seleccionada la opción “all tables” para que se ejecute en todas las tablas de nuestra base de datos.

A continuación hacemos clic en el botón “update details” para conectar. Si alguno de los datos no son correctos, os devolverá un error:

“The script encountered an error while running an AJAX request”.

Si la conexión se ha realizado correctamente, los botones para realizar las distintas acciones cambiarán de color gris a rojo y podréis hacer clic sobre cualquiera de ellos; en esta caso como lo que queremos es buscar y reemplazar haremos clic sobre “dry run” o “live run”.

Una vez completada la acción, podremos eliminar los ficheros que componen el Script haciendo clic sobre el botón “delete me”.

Descargar Script.

Cyberduck - Cliente FTP

Cyberduck - Cliente FTP

Cyberduck es una aplicación cliente de código abierto de FTP y SFTP, WebDAV, Rackspace Cloud, Google Docs, y Amazon S3 para los sistemas operativos Mac OS X y, desde la versión 4, también para Windows, editado con licencia GPL.

Características:

  • Soporta FTP / TLS (FTP seguro sobre SSL / TLS), usando AUTH TLS.
  • Sincronización de directorio.
  • Transferencia de fichero mediante arrastrar y soltar.
  • Notificaciones Growl.
  • Puede abrir algunos archivos con editores de texto externos.
  • Incluye un gestor de favoritos.
  • Soporta los programas de Mac OS X Keychain y Bonjour networking.
  • Disponible en varios idiomas, incluyendo inglés, checo, francés, finés, alemán, japonés, coreano, noruego, portugués, eslovaco, español, chino (tradicional y simplificado), ruso, sueco, húngaro, danés, polaco, indonesio, catalán, galés, tailandés, turco y hebreo.

Ir a la Web de Cyberduck.

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?