Blog

Ya queda poco para finalizar 2018 y desde hace unos meses tenemos en nuestras pantallas las tendencias para el próximo año; diseños funcionales y llamativos a la vista de los clientes. Diseños modulares Tendencia obligada la del diseño a medida y personalizado. Un buen diseño refleja la personalidad del cliente y su identidad, así que para 2019 nos alejamos un poco más de la estandarización. Llegan con fuerza los contenedores de información o diseños modulares tipo “Pinterest”, donde se plantean elementos independientes y se adapta a cualquier dispositivo.   Diseño Hero aparta al slide Cada vez hay más páginas que lo utilizan, son imágenes grandes (adaptado al ancho de la pantalla) que captan la atención y que debido al tamaño se limita a una sola imagen dejando de lado el slide con varias imágenes.   Vídeos a pantalla completa La tendencia es tener vídeos cada vez mejores y este pasará a tener más importancia. Tener un vídeo será muy atractivo para el usuario y a pantalla completa se antepone sobre otros elementos dentro del diseño web. El usuario hace un recorrido con los ojos y debemos facilitar la lectura y hacerla más dinámica. Para ello, podemos utilizar recursos como vídeos o animaciones para que sea más dinámica, llegando a ocupar en muchos casos la pantalla completa.   Cinemagrafías Otro recurso que es tendencia es la cinemagrafía, son fotografías en las que algún elemento tiene un movimiento repetido u ocurre alguna acción. Realmente son vídeos o archivos GIF de alta calidad que se reproducen de una manera continua y automática cada vez que se visita una web. Son imágenes animadas en loop continuo que generamos desde vídeos.   Tipografías grandes, hechas a mano y únicas La tipografía en el diseño web este 2019 será parte fundamental de la composición. Las tipografías dan personalidad exclusiva, y es una gran ventaja para diferenciarse gracias a su uso. Las tipografías de moda en 2019 son cada vez más divertidas, tal como palabras grandes sobre imágenes. Otro tipo de elemento que está muy de moda son las tipografías hechas a mano (handmade). Aunque son tipografías que se vinculan a sectores muy concretos, dan una personalidad, y ayudan a diferenciarse.   Colores brillantes / degradados 2019 será llamativo, divertido y lleno de color. Los colores han tomado carrerilla: gradientes, degradados, fluorescentes… Los principales sitios web confirmaron que a los usuarios web les gustan las combinaciones de colores brillantes y la buena combinación de colores ayuda a captar visitantes. Utilizar degradados en el diseño web aporta frescura y es algo diferenciador del resto.   Diseños orgánicos, oblicuos y geométricos. Secciones en diagonal. Serán una gran tendencia los diseños que se muevan y se desarrollen por la pantalla. Las formas redondeadas y curvas orgánicas serán también populares en 2019, ya que con estas formas atraeremos la atención del usuario y lo llevaremos a las zonas más importantes de la página web. Con todas estas formas combinadas con fotografías, vídeos o ilustraciones tendremos ganado al usuario.   Prioridad en dispositivos móviles El uso de dispositivos móviles frente a la navegación en escritorio ya se ha adelantado. Así que en 2019 los sitios optimizados para dispositivos móviles y el diseño web responsive serán indispensables. La navegación desde del ordenador de escritorio o portátil cae un 3% (estudio de We Are Social 2017). Por el contrario vemos que el uso de dispositivos móviles aumenta un 4%.   Botones fantasma Se lleva el diseño minimalista en combinación con botones transparentes, y no sólo es tendencia, sino también funcionalidad. Este tipo de botones se caracteriza por su fondo transparente, son fáciles de combinar en diseño flat o en composiciones y quedan genial con imágenes de fondo o para llamadas a la acción.   Menú hamburguesa Las funciones móviles, como el menú en hamburguesa oculto son habituales en las páginas web 2019 de escritorio también. Permite ocultar elementos que solo se muestren cuando queramos y un menú web emergente que ocupa toda la pantalla. Atrevido y limpio.   De todas estas tendencias, hay muchas que se están aplicando desde hace un tiempo, pero como todas las modas en diseño tenemos nuestras favoritas. Y tu, ¿cuál es la qué quieres aplicar para estar a la última? o por el contrario ¿hay alguna a la que jamás te unirías?

Más info

Youtube es la segunda página más vista en el mundo, detrás de Google. Tiene más de 1.500 millones de usuarios activos cada mes, solo superada por la red social Facebook (2.200 millones). Más de 500 horas de contenido se suben a la plataforma ¡cada minuto!, y se ven diariamiente un millón de horas de vídeo. Con estas cifras sobre la mesa, ¿a quién no lo interesa estar bien posicionado en Youtube? Porque en la red social de vídeos más importante del mundo se puede hacer posicionamiento orgánico, y mucho. Aquí van unos cuantos consejos para hacer SEO en Youtube. Youtube como buscador No hay que pensar en Youtube solo como una plataforma de contenidos en vídeo. Es también un buscador en toda regla, probablemente el mayor buscador de información después de Google. De hecho, el gigante ya intuyó el potencial de la web y la compró en 2006. Así que es de esperar que todos los contenidos que estén bien posicionados en Youtube, lo estén también en Google. Hagamos una prueba, que puedes repetir en casa con cualquier término de búsqueda. Vamos a buscar en Google “Seo en Youtube”. Como verás, entre los primeros resultados de búsqueda estań… ¡los vídeos de Youtube! Es decir, si posicionamos un contenido en la plataforma de vídeo para un término de búsqueda que nos interese, no sólo aparecerá en los resultados de la propia web, sino también en los de Google. ¡Doble premio! Contenido de calidad Siguiendo la regla básica del posicionamiento orgánico, está claro que para hacer SEO en Youtube hay que tener unos buenos contenidos. Una información de calidad, que interese a nuestros potenciales usuarios y que sepamos que van a buscar en la plataforma. Los profesionales del marketing digital siempre preguntamos a nuestros clientes: ¿qué le interesa a tus usuarios?, ¿qué problema les podemos solucionar? Por ejemplo, una de las tendencias que más triunfa en Youtube son los vídeos del “how to”, o “cómo hacer”. Los tutoriales que resuelven alguna duda, prestan ayuda para cualquier cuestión, o solucionan un problema, son de los más vistos. ¿Puede tu empresa crear este tipo de contenidos en vídeo? Palabras clave Cuando creamos el canal o subimos un vídeo, podemos hacer SEO en Youtube de forma muy sencilla. Solo tenemos que introducir las palabras clave que nos interesa posicionar en los siguientes apartados: • Descripción del canal: la encontrarás en el panel de control, en la pestaña Información. Cuando redactes el texto, asegúrate de poner la palabra clave principal y todas aquellas que quieras posicionar. Este texto aparecerá por defecto en todos los vídeos que subas a Youtube, y el algoritmo de la plataforma lo tiene muy en cuenta. • Título del vídeo: a todos nos gustan los títulos creativos e impactantes para nuestros contenidos. Pero no debes olvidar que el título es de las cosas que más ayudarán a posicionar un vídeo, y a que el usuario lo encuentre entre los primeros resultados cuando haga una búsqueda. Introduce siempre la palabra clave que te interese posicionar. • Descripción del vídeo: en el texto que describe el vídeo (su temática y la información que se puede ver en él)  también debes poner la keyword y los términos de búsqueda más interesantes para el contenido. El buscador de la plataforma lo analiza al detalle. • Etiquetas del vídeo: otro punto importante de la configuración del vídeo, cuando vamos a subirlo a Youtube, es la creación de etiquetas. Puedes elegir las que quieras (aunque es recomendable no poner más de 15), y asegúrate de que contienen tus palabras clave.   Configurar el canal de Youtube Para hacer SEO en Youtube también es importante configurar bien el canal. Además de la descripción, que llevará nuestras keywords, debemos poner el enlace a nuestra web (si tiene un buen SEO On Page, ayudará mucho al posicionamiento en Youtube), y los enlaces a las redes sociales. Las listas de reproducción, que dividen los vídeos por temáticas, también influyen mucho en el posicionamiento del canal y los vídeos. En los títulos de estas listas de reproducción también es muy interesante introducir palabras clave. Añade subtítulos Puede parecer una tontería, pero los subtítulos son muy importantes para Youtube. No solo porque facilitan el uso de la plataforma a las personas sin audición, sino también porque ayudan mucho al SEO. Los buscadores analizan el texto de los subtítulos y los posicionan de forma orgánica en la plataforma. Así que no olvides los subtítulos y, como siempre… ¡introduce palabras clave! Contenido social Es una de las principales reglas del SEO. Cuando más social sea el contenido, mejor se posiciona. Lo mismo pasa en Youtube. Un vídeo con muchos comentarios, con muchos Me Gustas y que ha sido compartido en las redes sociales, estará mejor posicionado en el buscador que otros que no tienen interacciones. Por eso, siempre es recomendable “animar” al usuario a comentar, compartir y etiquetar a otras personas en el contenido. El nombre del archivo Es un error muy típico, pero muy fácil de corregir. Cuando subimos un vídeo a Youtube, se nos olvida cambiar el nombre del archivo. ¿Crees que un título como MOV545326.mp4 es fácil de posicionar? La respuesta es NO. Antes de adjuntar el vídeo, debemos modificar el nombre y las metaetiquetas del archivo. Recuerda poner la palabra clave de búsqueda para que Youtube pueda identificarla y tenerla en cuenta para las búsquedas de los usuarios. Por ejemplo curso_seo_en_youtube.mp4. Analizar y medir el SEO en Youtube Cuando hemos cumplido todas las reglas que el SEO nos manda, es hora de analizar si nuestra estrategia está funcionando. La propia plataforma tiene una sección de “Analytics” donde podrás consultar todos los datos de tu canal y tus vídeos. Estadísticas de visualizaciones, interacción social, fuentes de tráfico, etc. No dejes de revisarlas para saber el SEO en Youtube te está funcionando. ¿Quieres gestionar tu canal de Youtube de forma profesional y orientada al SEO? Contacta con nosotros y mejora tu posicionamiento y tu estrategia de marketing. Somos tu agencia de Desarrollo Web

Más info

¿Qué es Gutenberg? Es un plugin que mejora el editor de WordPress, una de las cosas que más necesita cambiar y que ha evolucionado muy poco desde el inicio de los tiempos. Aunque no solo cambia el editor sino que permite maquetar páginas a base de bloques sin necesidad de editar código. Es algo muy parecido al funcionamiento de Divi, Page Builder, Visual Composer y muchos otros. La diferencia con los anteriores es que a partir de la versión 5 de WordPress estará incluido en las plantillas base. Todo hace indicar que la fecha de lanzamiento será finales de Noviembre de este año; y en caso de retraso la fecha límite sería Enero de 2019.   Ventajas e inconvenientes Ventajas La gestión del contenido es mucho más sencilla que la que tenemos hasta ahora. Gutenberg tiene un listado de bloques con los que podremos introducir gran variedad de contenido con una maquetación limpia y rápida. Aquí podemos ver esos bloques predefinidos: Permite editar un único bloque de todos los que tengamos en nuestra página o post, desplazarlo e incluso cambiar el formato del mismo. Está pensado para que se adapte (casi) perfectamente a dispositivos móviles. Es gratis y estará integrado con WordPress de forma nativa, por lo que las actualizaciones serán más sencillas que con los plugins. No afecta a la carga ni al peso final de la página, algo siempre de agradecer en WordPress. Inconvenientes Si ya tenemos un theme instalado e incorporamos el plugin de Gutenberg es posible que no sea compatible. Lo bueno es que como se encuentra en continua actualización puede que una versión posterior sí nos sirva. Podemos reportar nuestro problema de compatibilidad a la siguiente dirección: https://github.com/danielbachhuber/gutenberg-plugin-compatibility/issues A día de hoy le queda mucho camino hasta llegar a cualquiera de los maquetadores visuales que hay en el mercado. La maquetación de texto en columnas no está adaptada a móvil todavía, confiemos que sea algo que mejoren pronto. Se preve que haya un botón para desactivar Gutenberg, pero por si quieres hacerlo “a lo bruto” tan solo tienes que añadir esta línea en functions.php Ya van apareciendo plugins para añadir bloques a la biblioteca de Gutenberg, aquí hay un buen listado de ellos: Los mejores bloques gratuitos para Gutenberg   Documentación Gutenberg Demo: https://wordpress.org/gutenberg/ Tutoriales y recursos: http://gutenberg.news   Para finalizar comentar la controversia que ha generado la inclusión de ese plugin dentro del core de la futura nueva versión de WordPress 5.0 sin que todavía no esté terminado el proyecto. Falta mucho para que pueda competir con el resto de maquetadores y personalmente confío que aceleren el desarrollo para poder tener una parte de personalización que se echa en falta. Toca esperar para ver el resultado final.

Más info

En un artículo anterior explicamos cómo refrescar contenido en un modal de Bootstrap 3, algo muy útil para una ventana de información tras añadir un producto al carrito con Woocommerce por ejemplo. Si no lo recordáis o queréis echarle un vistazo, podéis hacer click aquí. En esta ocasión explicaremos cómo podemos hacer lo mismo con un modal en la versión 4 de Bootstrap, pues el método anterior ha sido eliminado del framework. No entraremos tanto en detalle explicando el por qué hemos elegido hacerlo así o para qué sería útil porque ya lo hicimos en el artículo anterior, así que vamos directamente al nuevo método para poder actualizar el contenido del modal de Bootstrap o lo que es lo mismo, hacer modals dinámicos en Bootstrap 4. Puesto que ya no funciona como antes, en el que utilizábamos el atributo ‘href ‘ de la etiqueta ‘a’ o bien un atributo ‘data’ con el nombre ‘remote’, no veo necesario utilizar el elemento de enlace para abrir el modal, por lo que vamos a usar un span en esta ocasión.Antes: [crayon-5c49098f12196519537128/] Ahora: [crayon-5c49098f1219e959485478/]   El código de la ventana o popup en este caso hemos preferido tener varios elementos estáticos como lo son el header y footer del modal, pero también podrían ser dinámicos si necesitáramos que tuvieran alguna otra función o información a mostrar. En nuestro caso el botón de continuar con la compra y finalizar la compra serán siempre los mismos. [crayon-5c49098f121a0065631458/]   Lo realmente diferente viene ahora, pues necesitaremos tener el código jQuery que ponemos a continuación para que al hacer click sobre nuestro elemento ‘Añadir al carrito’, el modal cargue la información deseada. [crayon-5c49098f121a2775288231/] Si os fijáis, el código contiene una pequeña comprobación que hace ligeramente más óptima la carga del servidor, pues en lugar de eliminar el contenido y volver a cargarlo en cada click, lo que hacemos es comprobar si el atributo ‘remote’ sigue siendo el mismo. Por ejemplo, el modal podría contener los términos y condiciones de uso desde varios enlaces en la misma página. También se ha añadido una variable de php por GET que nos servirá para comprobar si debo mostrar únicamente el contenido de la página solicitada, o por lo contrario debo mostrar la página junto con toda la cabecera, menús, footer, etc. Por último el template de la página contendrá el contenido del modal. Comprobaremos si existe la variable GET llamada modal para mostrar más o menos contenido. [crayon-5c49098f121a4665983244/]   Por último, aclarar que el código jQuery se lanzaría en todos los modals de la web, por lo que si quisierais tener contenido estático y dinámico en diferentes modals, no deberíais aplicar el evento click a todos los elementos data-toggle modal. Una solución serían crear una clase específica para los divs dinámicos.

Más info