Un consejo

Cuando yo empecé en la programación todo me parecía muy abstracto, la solución para mi fue hacerme con una serie de libros (sí, libros físicos de los de antes) que me ayudaron a disponer de unos contenidos ordenados asequibles y tangibles. Por si alguien se encuentra ahora mismo en esta situación, para empezar con la programación web os recomiendo el libro «El gran libro de HTML5, CSS3 y JavaScript». Este libro os dará una base de conocimientos muy útil para desde aquí seguir creciendo.

Descubramos cómo crear columnas con HTML5 y CSS

Utilizando la propiedad «column-count» en CSS

Esta es una forma fácil y rápida de crear columnas en una página web. Simplemente se agrega la propiedad «column-count» al elemento HTML que deseas dividir en columnas, y se establece el número de columnas deseado. Por ejemplo:

div {
    column-count: 3; /* Crea 3 columnas */
}

Utilizando la propiedad «column-width» en CSS

Esta es otra forma popular de crear columnas. Con esta propiedad, se establece el ancho de las columnas en lugar de su número. Por ejemplo:

div {
    column-width: 200px; /* Crea columnas de 200px de ancho */
}

Utilizando la propiedad «float» en CSS

Esta es una forma más antigua de crear columnas, pero todavía es muy común. Con esta propiedad, se colocan los elementos en una página web de forma flotante, lo que permite crear columnas. Por ejemplo:

.columna1 {
    float: left; /* Flota a la izquierda */
    width: 200px; /* Establece el ancho de la columna */
}

.columna2 {
    float: right; /* Flota a la derecha */
    width: 200px; /* Establece el ancho de la columna */
}

Utilizando la propiedad «display: flex» en CSS

Esta es una forma moderna. Con esta propiedad, se utiliza el modelo de caja de flexbox para crear columnas. Por ejemplo:

.container {
    display: flex; /* Utiliza el modelo de caja flexbox */
    flex-wrap: wrap; /* Permite que los elementos se ajusten al tamaño del contenedor */
}

.columna {
    flex: 1; /* Establece el tamaño de la columna */
}

En conclusión, existen varias formas de crear columnas en HTML5 y CSS, cada una con sus propias ventajas y desventajas

La entrada 4 formas de crear columnas con HTML5 y CSS se publicó primero en Visto en la Red.

La función para traducciones con JQuery

A continuación os pego el código de la función para luego ir explicando que hace cada parte.

function onFlyTranslates(){
  var lang = $("html").attr("lang");

  var translates = [];
  translates["en"] = [];
  translates["fr"] = [];

  translates["en"] = {
    "Pago con Tarjeta":"Credit/debit card payment",
  }
  translates["fr"] = {
    "Pago con Tarjeta":"Paiement par carte",
  }

  var elements = [
    "#payment-option-1-container span",
  ]

  $.each(elements,function(i,v){
    $(v).each(function(i) {
    	var element = $(this);
    	$.each(translates[lang],function(key,val){
          if(element.html() == key){
              element.html(val);
          }
    	});
    });
  });

1.- Detectando el lenguaje actual

var lang = $("html").attr("lang");

Detecta el lenguaje definido en el atributo «lang» del elemento html y crea una variable lang con su valor. En este caso los posibles valores de lang son «en» y «fr».

2.- Creando los arrays de traducciones

var translates = [];
translates["en"] = [];
translates["fr"] = [];

Definimos un array llamado «translates» así cómo anidamos dentro de ese array otro array para cada idioma.

3.- Definiendo claves y traducciones

translates["en"] = {
  "Pago con Tarjeta":"Credit/debit card payment",
}
translates["fr"] = {
  "Pago con Tarjeta":"Paiement par carte",
}

Introducimos en cada array de idioma las traducciones con la sintaxis «texto_actual»:»traducción» si hay que traducir múltiples cadenas añadiremos más líneas separadas por comas.

4.- Definiendo los elementos a traducir

var elements = [
    "#payment-option-1-container span",
  ]

Creamos un array con los identificadores JQuery de los elementos que queremos traducir. En el ejemplo se está traduciendo el texto de un span que está dentro de una caja con el id «payment-option-1-container». Si hubiera más elementos a traducir solo hay que añadir más identificadores.

5.- Hacemos la magia de las traducciones con JQuery

  $.each(elements,function(i,v){//bucle 1
    $(v).each(function(i) { //bucle 2
    	var element = $(this);
    	$.each(translates[lang],function(key,val){//bucle 3
          if(element.html() == key){//comparamos clave con contenido
              element.html(val);
          }
    	});
    });
  });

Hacemos la magia! Funciona con un recorrido de tres bucles anidados. El primer bucle recorre todos los elementos definidos en el paso anterior que son los contenedores de los textos a traducir. Por cada uno de estos elementos lo busca en el código de nuestra web y recorre cada uno de ellos (si hubiera más de uno). Por cada uno de estos elementos del código (que concuerda con el identificador definido. Recorremos el array translates (definido en el paso 2 y 3) pasando como clave el valor del lenguaje actual (la variable lang definida en el paso 1). Por lo que estamos recorriendo los valores «texto_actual»:»traducción» del lenguaje actual definido por el atributo lang de la página. Una vez hecho esto comparamos la clave del array con el contenido y si concuerda lo remplazamos por el valor.

6.- Ejecutar nuestra función

$(document).ready(function(){
  onFlyTranslates();	
});

Y así ejecutamos nuestra función en el momento de la carga de la web.

Espero que esto os sirva cuando tengáis problemas para traducir un plugin de wordpress, modulo de prestashop o una template conflictiva. Así es cómo podemos hacer traducciones con JQuery.

Hasta la próxima!

La entrada Traducir un plugin de wordpress peleón – Traducciones con JQuery se publicó primero en Visto en la Red.

Seguro, que si tienes un sitio web propio, habrás oído hablar mucho del SEO. Pero, ¿qué es el SEO? Internet está plagado de definiciones técnicas muy útiles para los que ya tienen conocimientos de cómo funciona la red, pero quizás sería mejor que alguien arrojara un poco de luz sobre el tema, sin tantos tecnicismos, para que los emprendedores, empresarios o interesados puedan hacerse una idea de qué es el SEO sin romperse tanto la cabeza.

¿Qué es el SEO?

Para mí, la definición fácil de qué es el SEO sería la siguiente:

El SEO es la acción de crear u optimizar elementos en un sitio web con el objetivo de mejorar su posición en los resultados de búsqueda.

¿Para qué sirve exactamente?

La visibilidad es una de las cosas más importantes en la red. Si tienes una web fabulosa, que cubre una necesidad para el usuario y con una funcionalidad excelente pero el usuario no llega hasta ella, es imposible lograr resultados. Mediante una optimización SEO lograremos escalar posiciones en los resultados de búsqueda para que el usuario nos contemple en el momento de decidir que web visitar.

¿Cómo se hace?

El SEO es una tarea que no acaba nunca. Una optimización SEO es un ciclo que consta de 5 pasos importantes que deberemos ir repitiendo de forma continua para asegurarnos ir escalando o mantener las posiciones en los buscadores.

¿Qué significan estos pasos?

Establecer Objetivos.

Este es el punto de partida, antes de generar cualquier acción debemos marcarnos unos objetivos. Para valorarlos, deberemos preguntarnos cosas como: ¿Qué contenido podría interesar a mi público objetivo? ¿Qué tipo de contenido espero que busque en internet mi cliente potencial? ¿Cuál o cuáles de mis páginas me interesa posicionar?

Escoger palabras clave.

Ahora que ya sabemos que páginas y que contenidos queremos utilizar de gancho en nuestra estrategia SEO, debemos decidir cuáles van a ser las palabras clave. Las palabras clave son aquellas palabras o frases relacionadas con nuestro contenido, que esperamos que el usuario busque en el buscador. Dependiendo de los objetivos se puede escoger una, dos o, como mucho, tres palabras clave por cada página de destino. Podríamos profundizar muchísimo en cómo escoger estas palabras, pero eso da para otro Post.

Optimizar el sitio web.

Ahora toca hacer los arreglos oportunos en el sitio web. Teniendo en cuenta las palabras clave escogidas haremos cambios en el sitio web. El objetivo de esto es que los buscadores escaneen de forma correcta el sitio web y que le encuentren relevancia relacionada con las palabras clave. De igual manera existe toda una ciencia tras este paso que no se puede sintetizar de forma breve.

Captar enlaces hacia tu web.

Los buscadores, como Google, le dan mucha importancia a los enlaces que apuntan a tu web. Mientras más enlaces de calidad hacia tu web, el buscador entiende que más relevante es tu contenido para lo comunidad y lo mostrará en posiciones más elevadas. Por eso es tan importante conseguir estos links. Mi consejo es que si intentamos forzar este proceso de forma agresiva, con prácticas como intercambio o compras de links, seguramente acabaremos penalizados por google, ya que sus algoritmos han evolucionado mucho para detectar este tipo de prácticas. La mejor técnica para obtener links de calidad que apunten hacia tu web es generar contenido de calidad que a los demás realmente les interese linkear.

Medir resultados.

No debemos dejar nunca de medir la evolución de nuestras acciones. Es importantísimo llevar un control de lo que está ocurriendo en los resultados de búsqueda de forma periódica y ordenada para poder ir contrastando información y conocer la evolución real, tanto la nuestra como la de la competencia. Tendremos que valernos de herramientas especializadas para estas tareas.

Volver a empezar.

Esto aún no ha acabado, ya hemos marcado objetivos, escogido palabras clave, optimizado el sitio web, captado enlaces hacia la web y medido los resultados. Ahora toca marcar nuevos objetivos en base a los resultados anteriores obtenidos y volver a empezar. Así es el SEO, un ciclo sin fin.

Escrito por Brujo del Código.

Desarrollador, Programador, Diseñador Web, SEO, SEM, CEO en Vinkula y mucho más. En continua formación en Diseño Web y Marketing Digital.

La entrada La mejor forma de entender qué es el SEO se publicó primero en Visto en la Red.

Un buen tweet debe cumplir las siguientes características

Bien pensado

Es importantísimo que el mensaje sea original y útil para los demás. Piensa bien lo que quieres decir para encontrar la mejor manera de hacerlo y así conseguir hacer un buen tweet y, sobretodo, antes de twittearlo, comprueba la ortografía y sintaxis para que no haya ningún error. Aprovecha los caracteres de la mejor manera para que sea entendible y provechoso.

Hashtags y TT

Los hashtags son muy importantes en twitter para que todos los tweets sobre un tema se engloben bajo la misma etiqueta y sea más fácil encontrar la información sobre un tema determinado. Por eso, úsalos, pero con cabeza, no abuses de ellos y utilízalos acorde a la temática de la que estás escribiendo. Lo mismo con los TT (trending topics) úsalos cuando lo que vas a twittear tiene algo que aportar al tema y no para ganar visibilidad porque se te considerará spam y no habrás ganado nada.

Contenido multimedia

El contenido multimedia, a parte de ilustrar tu mensaje, aporta mayores tasas de clicks, más RT y más likes a tus tweets. Por eso, un buen tweet debe ir acompañado de una buena imagen que atraiga a los usuarios, un gif que lo anime o de un video que, como todos sabemos, es el contenido multimedia estrella actualmente.

Emojis

Un mensaje que contenga emojis para resumir e ilustrar, será mucho más atractivo que uno que no los tenga. Los emojis se deben tener en cuenta para hacer un buen tweet, pero siempre respetando la personalidad y tono comunicativo de la marca y adecuándolos a la temática del tweet. Aunque no hay que forzar las cosas, si no son acordes al mensaje es mejor no incluirlos.

Menciones

Sé legal. Si usas contenido de otras fuentes, menciónalas en tu tweet. De esta forma ayudaras a la fuente y probablemente el autor te RT. Además, un truquito mío, si te quedas sin caracteres, puedes mencionar a la fuente en la imagen del tweet, así no gastas caracteres pero puedes mencionar la fuente, ¡todos ganáis!

Enlace para más información

Si estás tweeteando sobre una web, producto, noticia o un blog incluye un enlace para que tus followers y demás usuarios de twitter puedan ver más información acerca del tema y así conseguirás un buen tweet para tu público y más interacción con tu contenido. ¡No te lo olvides, es importante!

Y hasta aquí los puntos más importantes que creo que debe cumplir un buen tweet en Twitter.

¿Se os ocurren más? Pues dejadme un comentario para que pueda añadirlo.

Os dejo un regalo en forma de infografía:

La entrada Requisitos que debe cumplir un buen tweet se publicó primero en Visto en la Red.

El blog es una herramienta importantísima para poder hacer un buen marketing de contenidos para tu marca y, saber escribir una buena entrada de blog, es esencial para atraer a tu público. Esto no es una tarea fácil pero si consigues ofrecer unos contenidos de calidad a tus usuarios podrás tener una comunidad activa e interesada en tu marca y sus productos.

Para escribir una buena entrada de blog, contesta este autocuestionario

¿Qué quiero decir?

Antes de empezar a escribir tu entrada de blog, debes saber de qué quieres hablar. Determina el tema que quieres tratar y el objetivo de tu entrada de blog, de esta manera, evitarás divagar y crearás un mensaje mucho más contundente y concreto. Para poder elegir el tema del que debes escribir pregúntate qué le interesa a tu público y, a partir de ahí, elige los temas más actuales o más demandados por él.

¿Para quién hablo?

Cuando empiezas a escribir un blog debes determinar muy bien quién es tu público. Si conoces a quién te estás dirigiendo podrás determinar mucho mejor sobre qué quieres hablar y cuál es la mejor manera de transmitir el mensaje. Para escribir una buena entrada de blog tienes que saber con quién estás hablando, ¡tenlo muy en cuenta!

¿Cómo quiero escribir mi mensaje?

Lo primero que debes hacer es determinar la palabra clave (palabra única o frase) para tu entrada de blog. Esta palabra clave debes usarla en tu mensaje de forma natural para que tu entrada de blog posicione en los buscadores y los usuarios te puedan encontrar mediante búsqueda en Google. Estructura, también, tu mensaje con un pequeño guion que te ayude a escribir una buena entrada de blog más fácilmente. Si has estructurado de antemano el texto, luego te será mucho más fácil redactarlo.

¿El título es el adecuado?

El título es muy importante, debe ser atractivo para que invite a los usuarios a leer tu entrada de blog y además debe contener la palabra clave que has elegido para que posicione correctamente en los buscadores. No menosprecies el poder de un título pues puede determinar el éxito o fracaso de tu entrada de blog.

¿El mensaje es entendible?

Una vez has acabado el mensaje, debes revisar y comprobar que está centrado en el tema que has elegido, que transmite el punto de vista que querías y que se entiende bien. También debes comprobar la ortografía y sintaxis que es muy importante porque si no parecerá un texto descuidado y poco trabajado.

Y, por último, ¿Gusta visualmente mi entrada?

Échale un último vistazo, incluye imágenes para que sea más atractiva y visual, que sean acordes a la temática e ilustren bien tu mensaje. También puedes incluir un vídeo que es la estrella multimedia del momento. Estructura bien el texto para que quede todo bonito y agradable a la vista. Y si todo está bien, ¡enhorabuena, acabas de escribir una buena entrada!

¿Qué te ha parecido? ¿Quieres añadir algo? Puedes hacerlo en los comentarios, ¡nos encantará!

Si te ha gustado el post compártelo, síguenos en nuestras redes sociales y suscríbete a nuestro blog para estar al día de todos nuestros consejos mágicos.

La entrada Autocuestionario molón para escribir una buena entrada de blog se publicó primero en Visto en la Red.

Actualmente es impensable que una empresa o negocio no tenga presencia en las redes sociales, ya sea Facebook, Twitter, Instagram, Youtube, etc. o una combinación de ellas. La obsesión por conseguir seguidores en las redes sociales se ha vuelto una constante en las empresas que comienzan a usar esta herramienta de marketing digital. Esto dificulta enormemente el trabajo de los profesionales de marketing digital que deben luchar continuamente con la idea de que “cuantos más seguidores mejor” y que muchas veces se encuentran con comunidades muy grandes que no son efectivas por la falta de compromiso de los usuarios con la marca debido a la ausencia de interacción.

¿Qué es más importante, la interacción o los seguidores en las redes sociales?

La mayoría de empresarios dedican muchos esfuerzos a aumentar los seguidores en las redes sociales y pocos a interactuar con la comunidad de manera activa. Con esto consiguen una falsa sensación de llegar a un volumen muy grande de gente pero que no les beneficia y, en conclusión, piensan que las redes sociales no son efectivas para su negocio, cosa completamente falsa. Las redes sociales bien gestionadas son eficaces para cualquier negocio o empresa.

Es necesario que la adquisición de seguidores y la interacción vayan unidos de la mano para que esta herramienta de marketing sea rentable y efectiva.

Conseguir interactuar con tu comunidad, es una tarea complicada que necesita conocimientos y tiempo, por el contrario, la adquisición de seguidores en las redes sociales es una tarea más sencilla.

Para crear un público fidelizado y fan de tu marca es necesario que haya interacción, es como una amistad, necesita dedicación y tiempo.

[bctt tweet=»La comunidad de la marca es como una amistad, necesita dedicación y tiempo»]

Primero te acercas y te presentas, ahí es cuando deciden si quieren seguir conociéndote y, si es que sí, entonces te seguirán para poder mantener el contacto.

Luego viene el conocimiento. En esta fase, tus seguidores te irán conociendo mediante tus publicaciones y tus conversaciones con ellos. Imagina que vas a tomar algo con alguien que has conocido y lo único que hace es hablar de él, de su casa, de su familia, de su trabajo, de sus aficiones, etc. y no pregunta por ti ni te escucha. ¿Qué harías? Seguramente dejarías de quedar con él aunque conservaras su número. Pues eso es precisamente lo que pasa con tus seguidores en las redes sociales, si no les escuchas ni les hablas, dejaran de prestarte atención aunque sigan formando parte de tus seguidores.

Pero si les escuchas y entablas conversación, ¿qué crees que pasará? Volviendo al ejemplo anterior de la quedada con el conocido. Si la conversación con ese conocido es agradable, compartís aficiones, puntos de vista y en definitiva, os lleváis bien, seguro que seguirás quedando con esa persona y, poco a poco se formará una amistad. Ocurre del mismo modo entre tus seguidores en las redes sociales y tu marca, si les aportas valor, les escuchas y os lleváis bien, esa comunidad será fan de tu marca, la percibirá como amiga y, por tanto, comprará tus productos, los recomendará e incluso te defenderá de las críticas de otros.

En conclusión, si enamoras a tus seguidores en las redes sociales interactuando con ellos, conseguirás una comunidad fidelizada que te ayude a conseguir tus objetivos de negocio de una manera efectiva y rentable.

Dejadme vuestra opinión en los comentarios para que podamos hablar.

La entrada ¿Para qué quieres tantos seguidores en las redes sociales? se publicó primero en Visto en la Red.

¿Eres de los que aún no tienes claro eso de adaptarse al mundo digital? Pues este video-post es para ti.

Drácula regenta un hotel muy especial dónde antes solo se admitían monstruos. Pero después de que su hija Mavis se casará con Johnny, un humano, Drac decide abrir las puertas de su negocio a los humanos para aumentar su clientela. Es verdad que adaptarse al mundo digital no es fácil y que, a menudo, uno se puede perder entre tantas tendencia nuevas y tecnología moderna pero, actualmente, es esencial saber combinar el mundo online y el offline para sacarle el máximo partido a todas las herramientas que te ayuden a hacer crecer tu empresa.

A Drac no se le da muy bien eso de adaptarse al mundo digital pero por suerte dispone de la ayuda de Johnny y del personal del hotel que le ayudarán a actualizarse y así poder hacer más rentable su negocio de toda la vida.

Drac implementa en su hotel las redes sociales para atraer a usuarios de cualquier lugar a visitar su original negocio y nuevas tecnologías para comunicarse con sus usuarios y con el personal del hotel. Aprende muchas cosas aunque otras se le resisten un poco.

Descubre cómo lo hace Drac para adaptarse al mundo digital con este video

[su_youtube_advanced url=»https://www.youtube.com/watch?v=Kp7-LI2p4To» rel=»no» https=»yes»]

Ahora ya sabes que, actualizarse, a veces, puede ser difícil pero que si pides ayuda seguro te resultará más fácil y rentable para tu negocio.

¡Déjanos tu opinión en los comentarios!

Si te ha gustado el post compártelo, síguenos en nuestras redes sociales y suscríbete a nuestro blog para estar al día de todos nuestros consejos mágicos.

Escrito por Bruja del Marketing.

CEO en Vinkula, apasionada del Marketing Digital y del Diseño Web. En continua formación. Mi vida es un torbellino de proyectos y aprendizaje.

La entrada VIDEO – Cómo adaptarse al mundo digital con Drácula de Hotel Transylvania 2 se publicó primero en Visto en la Red.

No fue hasta 2010 que apareció la idea del diseño responsive. Esta solución pretendía unificar los diseños empleados en los diferentes tamaños de pantalla en un solo diseño adaptable, no solo modificando el tamaño de los objetos como en el caso del diseño fluido, sino provocando cambios en el mismo. A día de hoy la mayoría de profesionales ya sabemos que cualquier diseño web debe ser responsive, pero me gustaría asentar las bases mencionando las 4 principales ventajas del diseño responsive.

¿Cuáles son las ventajas del diseño responsive?

URL única

Al tener un solo diseño que cumple con los requisitos para visualizarse correctamente en cualquier dispositivo, ya no necesitamos crear urls alternativas para, por ejemplo, la versión móvil, sino que la fuerza de nuestra URL va a estar centrada sobra la misma “home”.

Un solo diseño

Desde el punto de vista de costes, sin lugar a duda, un diseño responsive es más caro que uno que no lo sea. Por el contrario, si luego tienes que crear otro diseño independiente para disponer de una solución móvil, que seguro vas a necesitar, estos dos diseños seguro que te saldrán más caros que uno responsive.

Sin contenido duplicado

Google y sus robots son muy delicados, odian el contenido duplicado y penalizan a las webs por este motivo colocándolas más abajo en las páginas de búsqueda. Por desgracia si dispones de una web y una versión móvil puede que Google identifique que estás duplicando el contenido y te penalicen por ello. Esto no ocurrirá nunca con una web responsive ya que el contenido está siempre en el mismo lugar y no separado en dos URLs distintas.

Mejor posicionamiento

Con una web responsive no solo nos libraremos de una posible penalización por contenido duplicado, sino que nos aseguraremos estar bien posicionados. A Google le encanta el diseño responsive y esto se está notando en los ajustes de sus algoritmos que cada vez le dan más fuerza a las webs con este tipo de diseño.

Infografía de las ventajas del diseño responsive

Estas son las 4 principales ventajas del diseño responsive, por supuesto, hay muchas otras ventajas. Añádelas sin miedo en los comentarios y yo las iré añadiendo a este post para que juntos destaquemos todas aquellas ventajas del diseño responsive.

Escrito por Brujo del Código.

Desarrollador, Programador, Diseñador Web, SEO, SEM, CEO en Vinkula y mucho más. En continua formación en Diseño Web y Marketing Digital.

La entrada Infografía – Las 4 principales ventajas del diseño responsive se publicó primero en Visto en la Red.

Os quiero presentar brevemente la nueva funcionalidad que ha lanzado Google. “ Destinos en Google ” es la apuesta del gigante de las búsquedas para meterse de lleno en el sector turístico. Gracias a esta función podrás buscar y comparar des del teléfono móvil un gran surtido de posibilidades para irte de vacaciones. Puedes filtrar por continente o país y comparar fácilmente el precio de vuelos y alojamiento en diferentes momentos para poder elegir el mejor para escaparte.

Además Google apuesta por poder filtrar los viajes por temas para poder personalizar y hacer más atractiva la experiencia de usuario. ¿Quieres estar tranquilo? Google te dice cuál es el momento del año con menos afluencia para disfrutar tranquilamente de tu destino. También podrás saber los lugares de tu destino que no debes perderte.

Os dejo el vídeo promocional de Google:

[su_youtube_advanced url=»https://www.youtube.com/watch?v=EnlsEyN7qmw» rel=»no» https=»yes»]
 

Personalmente creo que es una funcionalidad muy potente que puede revolucionar el sector turístico y mejorar exponencialmente la experiencia de usuario a la hora de planificar un viaje.

Aunque de entrada parece una apuesta fuerte y muy atractiva habrá que ver cómo avanza el proyecto en los próximos meses a ver cómo se acaba desarrollando.

Escrito por Bruja del Marketing.

CEO en Vinkula, apasionada del Marketing Digital y del Diseño Web. En continua formación. Mi vida es un torbellino de proyectos y aprendizaje.

La entrada Destinos en Google. La nueva funcionalidad de Google en el sector turístico se publicó primero en Visto en la Red.