Dentro de muy poco tiempo Google Chrome 68 saldrá a la luz, esta actualización de Chrome marcará un antes y un después en muchos sitios web.
Con esta nueva actualización, el navegador más utilizado por todos marcará los sitios web que no tengan un certificado de seguridad SSL como sitios web no seguros. En este momento el navegador ya muestra una notificación de “No seguro” si tu sitio web cuenta con formularios de registro o casi cualquier otro tipo de formulario.
Pero desde la próxima actualización de Google Chrome 68 programada para Julio de 2018, cualquier sitio web, aunque sea una simple página en HTML, será marcada como no segura si no cuenta con un certificado de seguridad SSL, puedes leer la noticia completa en el blog de seguridad de Google.
Es por eso que en este tutorial te muestro como preparar tu sitio web para esta nueva actualización, la forma de obtener un certificado SSL gratis y como instalarlo fácilmente.
[x_accordion_item title=»Transcripción del video»]
Google se encuentra comprometido con la seguridad en internet, y debido este compromiso a partir de la actualización de Google Chrome 68, todos los sitios web que no tengan un certificado SSl, serán marcados como no seguros.
Este es un cambio sumamente importante para tu sitio web, tomando en cuenta que Google Chrome es utilizado por el 62% de los usuarios de internet en computadoras de escritorio y en móviles.
Contar con un certificado de seguridad se vuelve una obligación y no algo opcional.
Especialmente si tienes una tienda en línea, una web de suscripción, o cualquier tipo de negocio en el que obtienes pagos por medio de internet.
Que el navegador les indique a tus posibles clientes que tu sitio web no es seguro, es algo que no deseas que suceda, ya que baja la confianza de tu sitio web a los ojos del posible cliente y esto resulta en menos ventas.
En este momento Google Chrome ya muestra notificaciones de sitios web no seguros, si tienes un formulario de contacto o una zona en la que tus visitantes pueden ingresar y crear cuentas de usuario, si tu web no cuenta con certificado SSl, Chrome les mostrará el mensaje de “No Seguro” a tus visitantes.
Pero en este momento, este mensaje únicamente afecta a los sitios web con esas características, de modo que si tu web únicamente muestra información de tu empresa o es un blog, entonces no te ves afectado por el actual mensaje del navegador.
Pero esto cambiará a partir de Julio de 2018, que es la fecha en la que Google tiene programada la actualización de Chrome 68.
Desde esa fecha, aunque tu web sea una simple página en HTML y no utilices ningún tipo de formulario en tu web, aún así el navegador mostrará la notificación de sitio web no seguro.
Por suerte para ti, quiero ayudarte a que prepares tu web para esta nueva actualización, y te mostraré como puedes obtener un certificado SSL gratis y como instalarlo en un solo clic.
En josel63.sg-host.com contamos con planes de hosting con los que obtienes un certificado de seguridad gratis de por vida para todos tus dominios.
Pero, además, te ofrecemos una forma fácil de instalar tu certificado, ya que normalmente la instalación de un certificado SSL requiere varios pasos técnicos que acaban por volver esta tarea muy complicada.
Así que voy a mostrarte cómo puedes obtener tu certificado gratis y como instalarlo.
Primero, debes tener una cuenta de hosting con nosotros, en josel63.sg-host.com
Si tienes tu sitio web alojado con otro proveedor de hosting, puedes migrar tu sitio web hacia nosotros para obtener tu certificado gratis, y muchas características adicionales gratis.
En este caso, le deseo instalar el certificado a este sitio web que tengo en WordPress.
Asi que lo primero que debo hacer es entrar en mi panel de control de hosting.
Desde aquí tengo todas las herramientas que necesito para administrar mi cuenta de hosting.
En este caso voy a utilizar las herramientas de seguridad, aquí puedes ver esta opción que dice Let´s Encrypt, esa es la opción que necesitamos.
Si tu no logras encontrar esta opción en tu panel, puedes usar este buscador para encontrarla.
Muy bien, una vez aquí, en la parte de abajo podrás ver todos los dominios que tienes alojados en esta cuenta de hosting.
Para instalar el certificado de seguridad, simplemente das clic en este ícono, luego das clic en este botón y el sistema inicia la generación de tu certificado.
Muy bien, ahora el certificado se encuentra correctamente generado.
Ya podemos usar el dominio con https en lugar de http.
Puedes comprobarlo si colocas en el navegador http://tudominio.com y como puedes ver ahora nuestro sitio web funciona sobre https.
Pero aún tenemos un problema, y es que el certificado se puede ver únicamente si colocamos https manualmente.
Pero deseo que la gente al ingresar sea enviada de forma automática hacia la versión SSL de mi sitio web.
Para solucionar esto debo modificar la URL que utiliza WordPress.
Asi vamos a entrar en el área de administración de WordPress.
Desde aquí vamos hacia generales.
En esta zona puedes observar dos direcciones de WordPress, debemos modificar las dos.
Todo lo que debes hacer es cambiar el http por https, en las dos direcciones.
Y luego guardamos.
Es posible que al guardar los cambios que te saque tu sesión de usuario, pero no hay problema. Simplemente debes ingresar nuevamente.
Como puedes ver ahora ya tenemos nuestra web WordPress funcionando con el certificado SSL.
Esto incluye nuestra área de administración y el área pública de nuestro sitio web.
Y de esta forma tu sitio web estaría preparado para Google Chrome 68.
Recuerda que si tienes una cuenta de hosting con nosotros puedes hacer este paso hoy mismo, y si te encuentras con otro proveedor de hosting, puedes migrar tu web hacia nosotros.
Nuestro equipo de soporte realiza la migración integra de tu sitio web y todos tus datos incluyendo tus correos, archivos, bases de datos, en fin, migramos todo y tu web no sufrirá caídas en ningún momento.
Espero que este video te sea de ayuda y que cambies tu web hacia https lo antes posible, esto te colocará por delante de tus competidores y quienes no tomen acción sobre esta novedad de Google Chrome.
Mientras todos tienen su sitio web con una notificación de sitio Inseguro, tu puedes tener tu web asegurada y con la confianza de tus visitantes intacta.
Si tiene preguntas no dudes en dejarlas en los comentarios.
Mi nombre es José Liévano y nos veremos en un próximo tutorial.
[/x_accordion_item]
Todos nuestros planes de hosting cuentan con certificado de seguridad SSL gratis para todos los dominios que tengas, puedes ver aquí nuestros planes de hosting.
Te recomiendo realizar este paso lo antes posible, y adelantarte a tu competencia; mientras todos tienen un sitio web marcado como «No seguro» tu sitio web puede obtener la marca de seguridad de un certificado SSL y ganar más confianza ante tus visitantes.
Si tiene preguntas no dudes en dejarlas en los comentarios.
Muchos sitios web utilizan menús que se pegan en la parte superior de la pantalla cuando bajas en el contenido del sitio web. Este tipo de efecto que deja siempre visible un elemento aunque te muevas en el sitio web, puede añadirse a cualquier zona que desees resaltar en tu web.
De modo que podrías pegar en tu web el menú principal, una imagen, una zona de anuncios, un formulario de contacto, o prácticamente cualquier elemento. En este video tutorial te mostraré como puedes crear este efecto en tu sitio web WordPress.
https://vimeo.com/264681543
En este video tutorial utilizamos el plugin Sticky Menu para añadir el efecto a los elementos de nuestro sitio web.
[x_accordion_item title=»Transcripción del video»]
En este tutorial te mostraré como añadir el efecto stick al menú de tu sitio web WordPress, como puedes ver lo que hace este efecto es pegar el menú a la parte superior de la pantalla
De esa forma si bajamos en la página aún podremos ver el menú.
Esto podemos aplicarlo a cualquier parte de nuestra web, no únicamente al menú, así vamos a ver como podemos hacerlo.
Lo primero que necesitamos es ingresar a los plugins.
Ya que vamos a utilizar un pequeño pero poderoso plugin, asi que vamos hacia añadir un nuevo plugin y desde aquí buscamos Sticky Menu (or Anything!) on Scroll
Y lo tenemos por aquí, así que lo instalamos y activamos el plugin.
Muy bien, ahora entraremos en sus opciones.
Vamos hacia ajustes y luego en el nombre del plugin
La primera consulta que nos hace el plugin, es el elemento de nuestra web al que deseamos aplicar este efecto.
Pero eso aún no lo sabemos, así que debemos buscar el identificador de lo que deseamos pegar en nuestra web.
Para esto voy hacia la parte pública de mi web.
Y lo que deseo pegar en la web es el menú, quiero que se quede visible cuando el usuario se mueva por mi sitio web.
Ahora, vamos a tener que inspeccionar el código HTML del sitio web para encontrar su identificador.
Para poder ver el código fuente de nuestra página y lograr encontrar el identificador más fácilmente.
Debes usar las herramientas para desarrolladores de tu navegador
En este caso estoy utilizando Google Chrome
Para entrar en estas herramientas puedo ir al menú principal de Chrome y luego en más herramientas y usamos la que dice Herramientas para desarrolladores.
Esto abre una pequeña ventana en tu navegador, en la que puedes ver una gran parte del código de tu sitio web.
Si nunca utilizaste esta herramienta o no tienes experiencia con código HTML o CSS, no te preocupes, te voy a mostrar paso por paso como hacerlo.
Por cierto, también puedes abrir esta ventana presionando CTRL + MAY + C
Y en Firefox también puedes usar ese atajo para abrir esta ventana.
Bien, una vez nos encontramos aquí puedes ver que, al pasar el mouse por las diferentes partes de mi web, se ven resaltadas y me muestra el código específico para esa área en la parte de abajo.
Si no te resalta las zonas de tu web, entonces da clic aquí para activar esta función.
Lo que debes hacer es resaltar el menú principal.
Ahora, si el área de menú de tu sitio web, también tiene el logo de tu web, entonces te recomiendo intentar seleccionar toda el área.
Y no únicamente el menú, de lo contrario el efecto no se verá bien.
Ahora ya he seleccionado la parte de mi web que deseo pegar.
Como puedes ver aquí en la parte de abajo también te muestra sombreado el código que pertenece a este elemento.
Lo que debes hacer es copiar el ID o la clase del elemento que deseas utilizar.
Si tu elemento tiene un ID te recomiendo usarlo en lugar de su clase.
En este caso mi menú no tiene ID solo tiene una clase, así que vamos a utilizar su clase.
Como puedes ver esta es la clase del elemento, y en realidad tenemos dos, las clases no pueden tener espacios separados, así que si ves un espacio, eso quiere decir que son dos clases distintas.
En este caso utilizaremos la primera, así seleccionamos el texto y copiamos la clase.
Muy bien, ahora que ya tenemos la clase para identificar a nuestro menú, vamos a regresar a las opciones del plugin.
Y presta atención a esto, si has copiado una clase, entonces debes colocar un punto y luego pegar la clase de esta forma.
Pero si lo que copiaste ha sido un ID, entonces en lugar del punto, debes colocar un símbolo de número.
En este caso yo he copiado una clase, así que lo dejaremos con el punto.
Muy bien, en la siguiente opción, podemos dejarle un margen superior a nuestro elemento, en este caso lo dejaremos vacío.
La siguiente opción nos permite añadir un margen si la barra de herramientas de WordPress se muestra, de esa forma podremos ver mejor el efecto estando conectados como administradores.
Luego puedes indicar que el menú no se pegue si la pantalla del visitante tiene menos de cierta cantidad de pixeles.
De esta forma puedes evitar que este efecto se muestre en los teléfonos móviles, por ejemplo.
Luego tenemos la misma opción, pero a la inversa, puedes hacer que el efecto pare si la pantalla tiene más de cierta cantidad de pixeles.
En mi caso le indicaré que elimine el efecto si la pantalla tiene menos de 450px, de esa forma no mostraremos este efecto en los teléfonos móviles.
Y ahora guardamos los cambios.
Muy bien, ahora entremos en el sitio para ver nuestro efecto.
Como puedes ver, si ahora bajamos en nuestra web, nuestro menú seguirá mostrándose en la parte superior.
Hemos logrado añadir el efecto correctamente.
Pero también podemos añadir este efecto a otras zonas de nuestro sitio web.
Por ejemplo, entremos en esta página. Como puedes ver aquí tenemos nuestro side bar con algunos elementos. Quiero colocarle este efecto a mi imagen. Así que entramos en las herramientas para desarrolladores.
Como puedes ver aquí hemos seleccionado la imagen, en este caso el contenedor de la imagen si cuenta con un ID, así que usaremos el ID en lugar de la clase.
Copiamos su ID y regresamos a nuestro plugin.
Ahora colocamos numeral y pegamos el id.
Guardemos los cambios.
Muy bien, regresemos a la página y refrescamos.
Ahora si bajamos en el contenido podrás ver como al llegar a nuestra imagen, quedará pegada a la parte superior de nuestro sitio web.
De esta forma podríamos por ejemplo pegar bloques anuncios, promociones, o cualquier tipo de elemento en nuestro sitio web.
Espero que este video te sea de ayuda.
Si tiene consultas no dudes en colocarlas en los comentarios.
[/x_accordion_item]
El contenido en video es una parte muy importante para tu sitio web, cada día las personas ven más videos online, por lo que añadir este tipo de contenido a tu sitio web atraerá más visitantes y también hace que tu índice de rebote sea menor y que los visitantes se queden más tiempo en tu sitio web.
En un artículo anterior, hablamos sobre los servicios que debes utilizar para añadir videos en tu sitio web, y las prácticas que debes evitar para que los videos formen una parte natural de tu web y dañen la experiencia de tus visitantes.
En este nuevo video tutorial te mostraré la forma más fácil de añadir videos a tu sitio web WordPress y que además convertirá todos tus videos en zonas responsive, por lo que tus videos se podrán ver en todos los dispositivos.
https://vimeo.com/263824298
El plugin que utilizamos en este video tutorial es ARVE
[x_accordion_item title=»Transcripción del video»]
En este video tutorial te mostraré la mejor forma de compartir videos dentro de tu sitio web WordPresss.
Como hemos hablado en un artículo dentro del blog, si aún no lo lees te lo dejo en la descripción del video.
El contenido en video es de gran importancia para tu sitio web, pero nunca debes añadir videos directamente en WordPress, siempre debes utilizar servicios de video externos como YouTube, Vimeo, Wistia y muchos otros.
WordPress reconoce automáticamente algunos de estos servicios de video.
Por ejemplo, Youtube, para añadir un video de Youtube en tu web, simplemente debes ir al video, copiar la URL y luego pegarla en tu artículo o en la página que estas editando.
Ahora guardemos estos cambios.
Muy bien, vamos a ver esta entrada, y como puedes ver ya tenemos nuestro video publicado.
Es muy simple y rápido.
Pero tiene un pequeño problema, si nosotros estamos viendo este artículo desde un teléfono, el video no se vera muy bien.
Si hacemos pequeña la ventana del navegador, puedes ver como el video pierde su forma y obtiene esas feas barras negras.
Esto sucede debido a que el video no es responsive y por eso no se puede ver bien en todos los dispositivos.
Hay plantillas que automáticamente detectarán estas zonas de video y las convierten en zonas responsive, pero son pocas y la mayoría de plantillas no tienen esa característica.
Es por eso que voy a mostrarte el mejor plugin para solucionar este problema no importando la plantilla que te encuentres utilizando.
Vamos a ir hacia los plugins y en añadir nuevo.
Ahora desde aquí buscamos el plugin ARVE que son sus siglas.
Como puedes ver aquí tenemos el plugin así que lo instalamos y lo activamos.
Muy bien, únicamente con esta acción ya tendríamos solucionado el problema de los videos responsive en todo nuestro sitio web.
Si regresamos al artículo con nuestro video y refrescamos la página.
Ahora cuando modifiquemos el tamaño de la ventana podremos ver que el video se adapta al nuevo tamaño automáticamente.
Puedes probar entrando desde tu móvil y el video se verá bien en cualquier dispositivo.
El plugin ARVE es indispensable para la mayoría de mis sitios web, ya que además de solucionar el problema de los videos responsive tan fácilmente.
Añade soporte para una gran cantidad de servicios para videos, por ejemplo, ahora podemos añadir videos solo con la URL desde Dailymotion, Break, Facebook, Kickstarter, Metacafe, Vevo, Vine, Vimeo y muchos más.
Que son servicios sin soporte nativo en WordPress.
Podrás encontrar los ajustes de Arve entrando en Ajustes y luego en Arve.
La configuración que trae por defecto es buena y te recomiendo dejarlo como se encuentra, pero podrías modificar la opción para que los videos se reproduzcan automáticamente.
Aunque la verdad no te lo recomiendo por experiencia propia.
Muchos de nuestros artículos en el blog tienen video tutoriales, y cuando un usuario entra en tu web desde un buscador.
Él no sabe que hay un video en tu artículo, por lo que el sonido de tu video puede causar una mala experiencia, es mejor dejar que los usuarios reproduzcan el video voluntariamente.
Pero si tienes otras zonas, como nosotros que contamos con el área de los tutoriales, en los que el contenido es específicamente video y el usuario lo espera.
Entonces puede que esta opción sea mejor para ti.
Todo depende de la experiencia que deseas darle a tu visitante, siempre debes colocarte en sus zapatos.
El plugin Arve también tiene una versión de pago, algunas de las características mas notable de esa versión es la capacidad para eliminar los links que tienen los reproductores de los diferentes servicios de video.
Por ejemplo, si observas el video de YouTube que hemos compartido.
Podrás ver que cuenta con varias zonas que llevan al usuario hacia Youtube, sacándolo de mi sitio web.
Por ejemplo, el título del video, si inicias su reproducción tenemos el logo, si vamos hasta el final del video tenemos los videos recomendados, etc…
Entonces con la versión de pago puedes eliminar todas estas áreas que sacan a tu usuario y lo llevan hacia YouTube.
También te permite habilitar el Lazyload que cargará una imagen en lugar del reproductor, de esa forma tu sitio web cargará más rápidamente.
La versión Pro de ARVE tiene un valor de $35 USD, si esas son características importantes para ti, te recomiendo darle un vistazo.
En caso contrario, la versión gratuita hará muy bien su trabajo, permitiéndote añadir videos desde muchos otros lugares y convirtiendo tus videos en zonas responsive, con lo que tus videos se verán muy bien en todos los dispositivos.
Espero que este video te ayude en tu proyecto web, si tiene consultas no dudes en añadirlas abajo en los comentarios.
Mi nombre es José Liévano y nos veremos en un siguiente video tutorial.
[/x_accordion_item]
Las imágenes, audios y sobre todo los videos hacen que internet sea tan grande y dinámico. Añadir video a tu sitio web le dará más vida y mejorará la respuesta de tus visitantes a los contenidos de tu sitio web.
El video es lo que nos ha permitido crecer en LievanoSan, la mayor parte de nuestro contenido se encuentra en video, todos nuestros cursos son en video y casi todos nuestros mini-tutoriales se encuentran en ese formato.
De modo que puedo afirmarte de primera mano que el video es el mejor formato de contenido que existe en internet.
Pero si lo has notado, nosotros no añadimos nuestros videos directamente en WordPress, utilizamos siempre un servicio de un tercero para añadir nuestro contenido en video.
Los dos servicios que utilizamos en nuestro sitio web son principalmente Vimeo y YouTube.
En los comentarios de nuestros cursos y en solicitudes de soporte de nuestros clientes, obtenemos una pregunta frecuente sobre los videos en WordPress, y esa es “¿Cómo puedo subir un video a WordPress?”
Bien, subir tus videos directamente a tu web WordPress es técnicamente posible, pero si lo haces estarás cometiendo un grave error.
El video es el tipo de contenido con el que tengo más experiencia, desde mis inicios en internet he publicado videos y he utilizado muchos métodos para añadirlos en mis sitios web.
Te puedo asegurar que colocar el video directamente en el mismo lugar que se encuentra tu sitio web es la peor opción para mostrarlos en tu página.
Voy a darte 5 razones por las que añadir los videos directamente en tu sitio web es una mala idea y luego te mostrare las alternativas y la mejor forma de añadir videos dentro de tu sitio web.
1 – Ancho de banda y recursos del servidor
Tu sitio web tiene límites en los recursos que puede utilizar, dependiendo de tu alojamiento web y del tipo de servicio de hosting que tienes, tus limites serán más amplios o reducidos.
Los recursos que se suelen limitar es el ancho de banda, utilización de CPU, IO, memoria RAM, IOPs y entre otros.
Lo que tienes que saber es que la reproducción de videos utiliza una gran cantidad de estos recursos. Si tu colocas en comparación una página que contenga únicamente texto e imágenes versus una página con un simple video.
La página con el video consumirá muchísimos más recursos que la web con texto e imágenes.
Ahora bien, si tu sitio web se encuentra iniciando y no tienes mucho tráfico, entonces tus videos no serán reproducidos de forma simultánea, pero una vez empiezas a tener un poco de tráfico en tu web, la reproducción de los videos consumirá todos los recursos de tu plan de hosting.
Esto es real tanto si tienes un plan de hosting compartido, como si utilizas tu propio servidor dedicado, y si tienes tu web con un servicio cloud como AWS, entonces prepárate a pagar grandes sumas de dinero gracias a las tarifas dinámicas.
Tomando en cuenta la gran cantidad de recursos que la reproducción de video necesita, podrás obtener uno de dos escenarios posibles en tu web.
Tu sitio web se caerá a cada momento y se visualizará muy lento, o si tienes tu web en un servicio cloud elástico te llegará una factura exorbitante a fin de mes.
2 – Limite en el tamaño de archivos
Los videos normalmente son archivos muy pesados, esto depende del formato, calidad y tiempo del video.
Nuestros videos son normalmente muy cortos y los optimizamos mucho, así que un video de 10 minutos para nuestros tutoriales, pesa aproximadamente de 20 a 25 MB.
En promedio podrás subir archivos en WordPress que no superen los 50 MB, entonces si tu sitio web necesita videos muy largos, no podrás subirlos directamente.
Con nuestros planes de hosting tu puedes modificar este valor hasta los 250 MB, pero si subes muchos videos de tanto peso, te quedarás sin espacio disponible muy pronto.
3 – Videos lentos o pausados
Debido a que tus videos se encontrarán alojados en un mismo servidor, las personas que traten de ver el video experimentarán una carga lenta o pausas mientras se encuentran reproduciendo tus videos.
Este tipo de problemas se encuentra relacionado a la arquitectura que se encuentras detrás de los servidores a la hora de servir contenido específicamente en formato de video.
De modo que es posible experimentar este tipo de problemas incluso si utilizas un servicio cloud como Amazon S3 para alojar tus videos, en este caso debes por lo menos añadir CloudFront (CDN) para mejorar la carga del video y aún en este caso, por experiencia personal, obtendrás quejas de usuarios que ven tus videos lentos o pausados.
Ahora podríamos colocar como ejemplo a Netflix que ha utilizado los servicios de Amazon AWS para servir videos en múltiples plataformas y diferentes países, y es cierto, pero Netflix no simplemente sube los videos en S3 y activa CloudFront, existe una arquitectura muy compleja detrás del streaming de videos de Netflix y su configuración en AWS.
Entonces, técnicamente si es posible crear esa solución en un servicio Cloud, pero no estamos aquí para aprender a crear la arquitectura de Netflix, todo lo que quiero es colocar mis videos dentro de mi sitio web.
4 – Formatos de videos
Existen muchos y diferentes tipos de videos, MP4, OGG, WEBM, etc… y no todos los navegadores los reproducen todos, entonces puedes publicar un video en formato WEBM y no todos tus visitantes podrán verlo.
Los principales formatos de video como MP4 y WEBM se encuentran cada día siendo más aceptados por los diferentes navegadores tanto de escritorio como en móvil, sin embargo, aún tendrías que crear por lo menos estos dos tipos de archivo para estar seguro.
5 – Calidad de la reproducción
Un factor clave en la calidad de un video es la velocidad de internet que tiene el visitante.
Cuando tú ves un video en Youtube podrás experimentar este fenómeno, si visualizas un video en una conexión rápida, podrás llegar a verlo en Full HD (1080P) o superior, pero si tiene problemas con tu conexión, entonces el mismo video lo verás en una calidad más baja hasta los 144P.
Esto no es magia, lo que ocurre es que es que YouTube tiene varias versiones del video, y te presenta una u otra dependiendo de la calidad de tu conexión.
Entonces tú también necesitas hacer lo mismo para ofrecer una buena experiencia de video a tus visitantes.
Esto quiere decir que debes crear un video y exportarlo en diferentes calidades para las diferentes conexiones de tus visitantes.
Aunque a mí me gusta mucho el video, debo decir que la parte de renderizar (exportar) el video es una de las etapas más aburridas del proceso.
Así que lo vamos a dejar aquí, hay muchos problemas más que se nos presentarán si queremos añadir el video directamente en nuestro sitio web.
La solución
La verdad es que colocar un simple video no debe ser tan complicado, y no lo es si utilizamos un servicio de terceros como YouTube o Vimeo para colocar nuestro contenido en video.
Estos servicios hacen todo lo que hemos visto antes por nosotros y mucho más, ellos ya tienen la correcta arquitectura en sus servidores para reproducir videos de forma eficiente, de modo que miles de personas pueden estar viendo el mismo video a la vez sin problemas.
No tienen problemas con los tamaños de los videos que deseas subir, incluso el formato no es un problema.
No debes convertir tus videos a diferentes calidades ya que ellos crearán esos videos por ti, todo el proceso difícil lo hacen ellos, no debes preocuparte por nada de lo que hemos hablado antes si utilizas un servicio de video externo.
Existen una gran cantidad de opciones para alojar tus videos, yo te recomiendo utilizar YouTube, Vimeo o Wistia dependiendo de tus necesidades.
Estas plataformas tienen sus pros y contras, te voy a mostrar sus diferencias para que puedas seleccionar la que mejor se integre con tu proyecto web.
El beneficio más grande que tiene YouTube es su popularidad, compartir videos en esta plataforma es muy fácil y gracias a la gran audiencia del sitio web tu video puede llegar a ser visto por muchos visitantes.
Sin embargo, al utilizar YouTube en tu sitio web debes considerar que el productor normal de YouTube se llevará a tus visitantes hacia su propio sitio web.
Es decir que los visitantes que llegan a tu página terminarán en YouTube y no en tu sitio web.
Eso es debido al reproductor de YouTube que añade videos recomendados al finalizar tu propio video, adicionalmente los elementos como el título del video, el logo de YouTube y otros, también sacarán al visitante de tu sitio web y lo enviarán a YouTube.
La privacidad de tus videos también puede ser un problema, no puedes confiar en compartir un video de YouTube con tus visitantes y colocarle restricciones.
Por ejemplo, si deseas crear un sitio web con video cursos que únicamente tus usuarios de pago puedan ver, entonces YouTube no es la solución para ti, esta plataforma te permite colocar tus videos en modo privado, pero la verdad es que aún con esta función es muy fácil compartirlos.
Pero si deseas dar más difusión a tus videos, entonces si debes colocar los videos de YouTube en tu sitio web.
De modo que si estas iniciando un canal de YouTube que deseas hacer crecer y dar a conocer tus videos, entonces si debes añadir los videos que publicas en YouTube dentro de tu sitio web.
Debes hacerlo debido a que YouTube premia con mayor exposición a los videos que hacen a un usuario iniciar sesión en YouTube, esto es parte de hacer SEO para tus videos de YouTube.
Por lo que añadir este tipo de videos que deseas hacer popular en tu sitio web es un inicio.
Entonces, debes utilizar YouTube en tu sitio web si tu principal objetivo es hacer popular los videos que te encuentras publicando, pero no debes utilizar YouTube si deseas hacer tus videos más privados o si deseas crear una experiencia de video más personalizada con tu marca.
Esta es la plataforma que nosotros utilizamos en LievanoSan y la que mejor relación coste/beneficio tiene.
Vimeo es un sitio web muy popular pero no es comparable con YouTube, entonces si deseas hacer contenido viral, Vimeo no es el mejor lugar para publicar tus videos.
Pero este sitio web te permite compartir tus videos de una forma más profesional en tu sitio web.
Ahora debes tomar en cuenta que a diferencia de YouTube, Vimeo no es completamente gratis, cuenta con planes de pago que son muy económicos pero no es gratis.
Entonces debes utilizar Vimeo si publicar tus videos con una mejor experiencia de marca y la privacidad de los videos es importante para ti, de lo contrario estarás bien con YouTube.
En esta web tendrás 4 diferentes tipos de cuenta, la gratuita, Plus ($84 USD /Año), Pro ($240 USD /Año) y la Business ($600 USD /Año).
La cuenta gratuita te permite subir hasta 500MB en contenido de forma semanal y un máximo de 5GB en total, también podrás colocarles contraseñas a tus videos para evitar su reproducción y el tiempo de conversión del video es lento.
La cuenta Plus es en realidad la que mejor te funcionará si todo lo que deseas es mostrar tus videos de forma privada y con un reproductor personalizado con tu marca.
Este tipo de cuenta te permite ocultar tus videos en Vimeo y permitir que se reproduzcan únicamente en tu sitio web, también puedes añadir pantallas finales personalizadas y colocar elementos como textos, imágenes y botones al final del video.
Si tienes una empresa, un sitio web de membresía con videos privados o deseas mostrar tus videos más profesionalmente, entonces te recomiendo mucho esta solución.
En cuento a la cantidad de información que puedes subir, te permite subir hasta 5 GB por semana y hasta 250 GB por año.
La versión Pro de Vimeo tiene todas las ventajas de la Plus, y te permite subir 20 GB por semana y hasta 1 TB por año.
Adicionalmente podrás añadir tu logo al reproductor del video y te entrega una página personalizada en la que puedes añadir tus videos.
Pero esa función te servirá si trabajas únicamente con video o tienes un negocio relacionado, como cineasta, animador, etc…
Luego se encuentra la cuenta Business, esta cuenta puede ser más interesante a nivel de marketing.
Ya que además de poder personalizar el reproductor y contar con privacidad para tus videos, también te entrega herramientas de marketing que te permiten añadir formularios para capturar el correo de tus visitantes.
Esto abre las posibilidades al momento de utilizar tus videos para capturar nuevos clientes.
Pero considero que la cuenta Plus de $84 USD por año, tiene todas las características que necesitas para compartir tus videos de forma profesional y privada en tu sitio web.
Esta es otra gran solución para añadir videos de forma profesional en tu sitio web.
Esta plataforma tiene una gran cantidad de características especialmente pensadas para Marketing.
El reproductor en Wistia es muy personalizable y podrás hacer que se vea completamente integrado con los colores tu marca.
También puedes añadir llamados a la acción dentro de tus videos en el momento preciso. Es posible solicitar el correo del visitante para que pueda terminar de ver el video, añadir anotaciones con links y crear pantallas finales personalizadas con enlaces.
Utilizando todas estas herramientas tus videos se convierten en un elemento interactivo dentro de tu sitio web que te permite generar más prospectos para tu negocio.
Sin embargo, puedo recomendarte utilizar Wistia únicamente para tus vídeos de marketing, por ejemplo, si tienes una landing page en la que deseas añadir un video, entonces esta plataforma será la mejor opción.
Pero si te encuentras publicando video tutoriales o tienes una web de membresía en la publicas muchos videos, entonces no te recomiendo utilizar Wistia, y esto es debido al precio.
El valor de Wistia es de $99 USD por año, pero únicamente puedes subir 10 videos, y por cada video adicional deberás pagar $0.25 por mes. Entonces si tu publicas tutoriales como nosotros, esa factura mensual puede incrementar muy rápidamente.
De modo que Wistia es la mejor opción para publicar videos con propósitos de marketing, ya que tiene muchas herramientas que te permiten hacer tu video más interactivo, colocar links de comprar y más.
Conclusión
Por el bien de tu sitio web y visitantes no subas videos directamente a tu sitio web, siempre debes utilizar un servicio externo para publicar videos en tu web.
YouTube será la mejor plataforma si deseas viralizar tus videos, compartir videos de YouTube en tu sitio web también ayudará al SEO del video y de tu propio sitio web, pero este servicio no se verá muy profesional y puede robar tus visitas sacándolas de tu web y llevándolas hacia YouTube.
Vimeo es la perfecta solución si deseas compartir videos de una forma más profesional, también te permite añadir reglas de privacidad en los videos, haciendo que únicamente puedan verse en tu sitio web o en los dominios que indiques. El servicio no es gratuito y tiene varios precios, te recomiendo iniciar con el plan Plus.
Wistia será la opción perfecta para publicar tus videos de Marketing, te entrega varias herramientas que permiten personalizar el reproductor y añadir llamadas a la acción para obtener más prospectos o para colocar el link hacia la página de pago de tu producto, pero no debes utilizar este servicio si publicarás muchos videos, ya que su precio aumenta con cada video que publicas.
Espero que esta guía pueda ayudarte a seleccionar la mejor opción para añadir video en tu sitio web.
Este formato de contenido es sin duda el más popular, y cada día el mundo se mueve más hacia el video. Pronto publicaremos más artículos que te ayudarán a crear y publicar videos más fácil y profesionalmente.
Si tienes preguntas no dudes en colocarla dentro de los comentarios.
La optimización de una imagen para tu sitio web es el proceso de reducir el peso del archivo de tu imagen.
Es un concepto muy simple pero extremadamente importante para el rendimiento de tu sitio web y la experiencia que todos tus visitantes tienen al navegar por tu sitio.
Como parte de nuestro servicio de hosting ofrecemos un proceso de optimización web profesional en el que reducimos el tiempo de carga de tu web a 1.5 segundos o menos, este servicio gratis se encuentra incluido en los planes Premium y Business con un ciclo de pago anual. Y 8 de cada diez sitios web que optimizamos tienen un serio problema con sus imágenes, y es que siempre pesan demasiado.
Si una imagen de tu sitio web pesa demasiado, entonces tu visitante tardará más tiempo en cargar tu sitio web, si muchos visitantes se encuentran viendo la misma página en tu web con imágenes demasiado pesadas, entonces tu web tardará más tiempo en responder y servir ese archivo tan pesado a todos los visitantes.
Optimizar tus imágenes permite que tu sitio web cargue más rápido y también mejora la usabilidad y el SEO del sitio web.
El tiempo de carga de tu sitio web es un factor importante para Google, entre mejor se encuentre optimizado tu sitio web, mejor será tu ranking en la página de resultados de Google.
Normalmente lo que hacemos al subir una imagen es descargar la imagen y subirla directamente a la Liberia de medios en WordPress, luego la añadimos a nuestro artículo o página y listo.
El problema es que las imágenes que descargas normalmente son muy pesadas, en otro artículo anterior te he mostrado varios sitios desde los que puedes descargar imágenes legales para utilizar en tu sitio web.
Estarás de acuerdo que todas esas imágenes son de muy buena calidad, pero al descargarlas podrás ver que su peso promedio es de 3MB a 5MB, de hecho, la fotografía de la imagen que hemos utilizado para este post tiene un peso de 5.3 MB
Ahora su pongamos que yo decido no optimizar la imagen para la web y simplemente la he descargado y colocado en este artículo. Entonces esta página tardaría demasiado tiempo en cargar, dependiendo de cuanta velocidad tienes.
Toma en cuenta que el tiempo límite de carga de tu sitio web para considerarlo bueno es un máximo de 3 segundos.
Con esto en mente voy a mostrare cuánto tiempo tardarían diferentes usuarios en cargar la imagen de 5.3 MB con diferentes velocidades de internet:
| Tipo de conexión | Velocidad de internet | Tiempo de espera
|
|---|
| ADSL | 256 kbit/s | 3 minutos y 10 segundos. |
| ADSL | 512 kbit/s | 1 minuto y 35 segundos |
| ADSL | 1 Mbit/s | 48 segundos |
| ADSL | 2 Mbit/s | 24 segundos |
| ADSL | 8 Mbit/s | 6 segundos |
| LAN | 10 Mbit/s | 4 segundos |
| ADSL | 24 Mbit/s | 2 segundos |
Entonces como puedes ver es demasiado tiempo utilizado únicamente para descargar la imagen, a esto debes aumentar el peso de los archivos JavaScript, CSS, HTML, otras imágenes de tu web y otros archivos de servicios externos que puedas tener en tu web como las librerías de Google fonts, Analytics, JS de Facebook, etc…
Al combinarlo y si tenemos optimizados nuestros archivos Javascript, CSS y HTML, puede que terminemos con un peso de 0.5 MB de estos archivos, así que eso debemos añadirlo a la cuenta.
Considerando que la velocidad promedio de internet en America Latina es de 5.6 MB y en España de 15.5, entonces le tomaría a un visitante latino 8 segundos cargar nuestra web y en España 3 segundos.
Y el más del 85% de ese tiempo es para cargar la imagen que no hemos optimizado.
Pero, en este artículo yo ya he optimizado la imagen, y al final de este proceso la imagen de este artículo tiene un peso de 59.3KB (0.059MB), como puedes ver es una gran reducción en el peso y eso se traduce en un sitio web que carga más rápidamente.
Ahora voy a mostrarte como puedes optimizar las imágenes de tu propio sitio web. Hablaremos sobre dos pasos en los que debes enfocarte al realizar este proceso.
Modificar el tamaño de tu imagen
Este único paso puede reducir el peso de tu imagen por más del 50%. En este paso debemos asegurarnos de que la imagen tiene las dimensiones que deseamos.
Por ejemplo, en mi caso, todas las imágenes del blog tienen un ancho de 640px y una altura de 350px, entonces debo modificar las imágenes para que tengan esas dimensiones.
La imagen original de este artículo tenía unas dimensiones de 4,000px de ancho y 2,900px de alto, eso es demasiado, muchos más de lo que necesito para mi web.
Entonces debes hacer que la imagen se vea mas pequeña, debes medir las dimensiones que necesitas en tu propia web y crear tus imágenes en base a esas dimensiones.
Hay varias formas de hacer este proceso, puedes utilizar Photoshop o Gimp por ejemplo, pero también puedes utilizar herramientas online como Canva.com que es la forma en la que he creado esta imagen.
Hablaremos mas profundamente sobre Canva en un futuro artículo, ya que es una herramienta excelente y que utilizamos mucho en nuestras imágenes.
Utilizando Canva puedes crear un documento con las dimensiones específicas que deseas, luego subes tu imagen, la colocas sobre el lienzo y luego descargas la nueva imagen con las dimensiones correctos, es extremadamente simple.
Únicamente con ese paso, he logrado reducir el peso de la imagen de 5.3MB hacia 173KB (0.17MB), una reducción de más del 94%
Te invito a probar la herramienta Canva y a que esperes en el futuro un tutorial sobre esta grandiosa y gratuita herramienta 😀
Utilizar un compresor de imágenes
Es importante que antes de realizar este paso hagas el anterior, de lo contrario este paso no te dará el mejor resultado.
En este paso podemos utilizar aplicaciones que nos permiten mejorar la compresión de la imagen, este proceso baja aún más el peso de nuestra imagen a cambio de perder calidad.
Pero no debes preocuparte, ya que la pérdida de calidad no la podrías notar ni siendo un halcón, es muy pequeña y obtenemos una gran ventaja en la disminución del peso.
Existen muchas aplicaciones web que te permiten realizar este proceso completamente gratis, en todas estas páginas simplemente debes subir tu imagen, esperar unos 15 a 30 segundos para que sea comprimida y luego puedes descargar la imagen comprimida.
Esto no modifica las dimensiones de tu imagen, únicamente el peso de la imagen es modificado.
Algunos sitios web que te dan este servicio son los siguientes:
Como podrás ver es muy fácil utilizar estos servicios, pero todo se complica si tienes muchas imágenes en tu sitio web, en nuestro caso contamos con cientos de imágenes, y hacer esto para cada una de ellas sería una labor en la que no podemos perder tiempo.
Es por eso que existen plugins para WordPress que automáticamente mejoran el peso de todas las imágenes que subes a tu sitio web. Te mostraré primero el plugin que nosotros utilizamos y otros plugins que hemos probado que son igualmente muy buenos.
Esta es la mejor opción desde nuestra experiencia, todos los días nuestro equipo realiza entre 15 a 20 optimizaciones webs para nuestros clientes de hosting completamente gratis, dejamos los sitios web cargando en aproximadamente 1.1 segundos y no más de 1.5 segundos.
Gracias a esta cantidad de optimizaciones que realizamos hemos podido probar muchos plugins de optimización para imágenes y ShortPixel es el que mejor resultados nos ha entregado.
ShortPixel te permite optimizar todas tus imágenes JPG, PNG o GIF, únicamente debes subir tus imágenes en WordPress como normalmente lo haces y el plugin optimiza la imagen sin que tengas que hacer absolutamente nada.
Después de optimizar la imagen de nuestro artículo con ShortPixel terminamos con un archivo que pesa 59.3KB (0.059MB), lo que significa una reducción del 99% en la imagen que al inicio pesaba 5.3MB
Este plugin también cuenta con una opción para optimizar todas las imágenes que has subido anteriormente. Con un solo botón puedes iniciar la optimización de tu librería de imágenes completa. Lo mejor de todo es que guarda una copia de seguridad de todas tus imágenes no optimizadas.
Adicionalmente cuenta con la opción de crear la versión WEBP de tus imágenes. WEBP es un formato de imagen especial para internet, este formato de archivo es mejor que los normales JPG o PNG, puedes obtener un 26% a 35% extra en la optimización de tu imagen.
Sin embargo, es un formato de archivo relativamente nuevo creado por Google, y aunque Google Chrome es compatible con este formato, no es aún estándar en el mundo del diseño web, de modo que podrías utilizar este formato en el futuro cercano, pero en este momento aún no.
Para utilizar ShortPixel debes instalar el plugin desde WordPress, y debes crear una cuenta gratuita en el sitio web de ShortPixel, con una cuenta gratis obtienes créditos de optimización.
Por mes obtienes 100 créditos que cuentan por cada imagen optimizada en tu sitio web. Si tu sitio web necesita más, entonces puede adquirir sus planes mensuales o los planes de un solo pago.
Desde ya te digo que los planes de un solo pago son mejores, puedes adquirir 10,000 créditos por tan solo $9.99
Al instalar este plugin todas las imágenes PNG, JPG o GIF que subas en tu web WordPress serán optimizadas de forma automática. También incluye la opción de optimizar todas las imágenes que tienes en tu librería de medios.
Sin embargo, uno de los lados negativos de EWWW Image Optimizer, es que la optimzacion es realizado en tu propio sitio web, en el caso de ShortPixel por ejemplo, la optimización se hace en la nube, en los servidores de ShortPixel y luego las imágenes optimizadas son enviadas hacia tu sitio web nuevamente, de esta forma tu sitio web no es cargado con procesos adicionales y los recursos que tienes a tus disposición no se gastan en la optimización de imágenes.
Adicionalmente es necesario instalar archivos adicionales del lado del servidor y tu alojador posiblemente no tiene todas las librerías que son requeridas, lo que te dejaría sin poder utilizar el plugin; pero su tienes una cuenta de hosting con nosotros entonces no hay de que preocuparse ya que tenemos todos los archivos necesarios pre-instalados y no debes hacer nada adicional, simplemente instalar el plugin.
Pero si no tienes una cuenta de hosting con un buen hosting como el nuestro y no puedes usar el plugin entonces EWWW Image Optimizer también ofrece la optimización de imágenes en la nube, de modo que no tengas que instalar nada adicional.
Al momento del precio, los créditos por imagen son más caros que ShortPixel, los $9.99 que en ShortPixel te dan 10,000 imágenes, en EWWW Image Optimizer te darían 3,330 imágenes, de modo que ShortPixel parece ser una mejor opción al momento de pagar por el servicio.
Este plugin es parte de wpmudev.org y su basta lista de plugins. Con WP Smush podrás optimizar automáticamente cualquier imagen PNG o JPG que subas a tu web WordPress, adicionalmente tienes la opción de optimizar muchas imágenes al mismo tiempo, sin embargo, en la versión gratuita únicamente puedes optimizar 50 imágenes al mismo tiempo.
Al utilizar WPSmush cuentas con dos métodos de optimización Lossy y “Super Smush”, pero en la versión gratuita únicamente puedes utilizar Lossy, que entrega una compresión y calidad aceptable, pero al compararlo con ShortPixel, queda abajo por un promedio del 20% en el peso final de la imagen.
Existen otras funciones que también son de pago como la conversión de imágenes PNG hacia JPG, que es una opción gratuita en ShortPixel.
El valor del WPSmush se encuentra dentro del valor de la suscripción a wpmudev que tiene un precio de $49 mensuales.
Además de estos plugins existen otros que te ayuda a optimizar tus imágenes de forma automática, algunos son:
Como puedes ver existen varias formas de optimizar tus imágenes y gracias a los plugins de WordPress puedes optimizar tus imágenes de forma automática y no necesitas realizar el proceso de forma manual.
Si aún no te encuentras optimizando las imágenes de tu sitio web, entonces debes empezar hoy. Puede hacer una gran diferencia en la velocidad de tu sitio web, lo que se traduce en visitantes felices y más amor por parte de Google para tu sitio web en los resultados de búsqueda.
Por cierto, te recomiendo visitar el artículo en el que te muestro sitios web en los que puedes encontrar imágenes gratis para tu sitio web completamente legales y sin problemas de licencias.
Si tiene cualquier pregunta no dudes en colocar un comentario.
Microsoft Word es el editor de texto que utilizamos la mayor parte del tiempo para crear nuestros artículos y es una de las primeras opciones que nuestros colaboradores seleccionan para enviarnos sus artículos. Realizar el proceso de copiar y pegar el texto puede ser un poco tedioso, además de que perdemos las imágenes y formatos en el texto que estamos tratando de importar. En este video tutorial te mostraré como importar tus archivos de Word directamente al editor de WordPress sin perder el formato ni las imágenes.
https://vimeo.com/207371295
Para este video tutorial estamos utilizando el plugin Mammoth .docx converter
[x_accordion_item title=»Transcripción del video»]
Buen día, bienvenido a este nuevo video de josel63.sg-host.com, mi nombre es José Lievano y en este video tutorial te mostraré como importar archivos de WordPress al editor de texto en WordPress.
Hay muchas razones por las que puedes estar utilizando Word, personalmente en josel63.sg-host.com los borradores los iniciamos en Word hasta finalizar nuestros artículos.
Y después, una vez que ya se encuentran terminados y revisados, los añadimos a WordPress.
Pero es un poco tedioso hacerlo cuando tenemos muchos artículos.
Si tu utilizas colaboradores para tu blog, entonces normalmente los escritores te mandarán un archivo en Word también, el que después debes copiar y pegar en WordPress.
Entonces, para facilitar todo este proceso, en este video te voy a mostrar cómo puedes subir el contenido de WordPress e insertarlo directamente en el editor de texto.
Para esto vamos a utilizar un plugin, así que vamos hacia Plugins, añadir nuevo y desde aquí debes buscar el plugin Mammoth .docx converter
Muy bien, lo tenemos por aquí así que simplemente damos clic en instalar, y luego lo activamos.
Este plugin no tiene opciones que podamos configurar, así que vamos a ver directamente como funciona.
Para eso, voy hacia entradas y vamos a crear un nuevo artículo.
Le voy a dar un título.
Y ahora vamos hasta abajo y aquí podremos ver las opciones del plugin que hemos instalado.
Si esto no te aparece, entonces debes entrar en las opciones de pantalla, y verificar que las opciones del plugin se encuentren marcadas, de esa forma si te aparecerá.
Muy bien, entonces, regresamos a las opciones del plugin, y desde aquí podemos buscar el archivo de Word que deseamos subir.
Yo ya tengo un archivo preparado para este tutorial, así que simplemente lo voy a seleccionar para subirlo.
El archivo se sube muy rápidamente, en menos de un segundo, y como puedes ver aquí tengo todo mi texto.
Es un archivo un poco grande, y como ves tiene algunas zonas en negrita y también contamos con un listado numerado.
Todos estos formatos en el texto serán respetados por el plugin.
De modo que no perderás cosas como las negritas, las listas, texto en cursiva, subrayado o tachado.
Pero el tipo de fuente si se perdería, ya que aplicará la fuente que tu WordPress se encuentra utilizando.
Entonces, una vez que hemos importado el texto, simplemente debemos dar clic aquí para añadirlo al editor en WordPress.
Y como puedes ver ya tenemos el texto dentro del editor, ahora puedes modificarlo a tu gusto o realizar ajustes finales en el texto.
Este plugin también te permite añadir cualquier imagen que tenga tu texto en Word, de modo que puedes importar el artículo que te encuentras creando ya con las imágenes que deseas utilizar.
Si deseas saber más sobre WordPress te invito a ver nuestros cursos dentro de nuestro sitio web, todos nuestros cursos son completamente gratis y también puedes crearte una cuenta de estudiante para ganar medallas y certificados por los cursos que completas.
Muchas gracias por ver nuestro video tutorial, espero que te sea de ayuda, mi nombre es José Lievano y nos veremos en el próximo video.
[/x_accordion_item]
Esta es la plataforma que nosotros utilizamos en LievanoSan y la que mejor relación coste/beneficio tiene.
Esta es otra gran solución para añadir videos de forma profesional en tu sitio web.
