Herramienta AMP de Google

Herramienta AMP de Google

Se ha lanzado la herramienta AMP de Google con su actualización más novedosa desde el año 2016. Un gran empujón para la herramienta de pruebas de páginas en versión AMP (Acelerated Mobile Pages). El acceso sigue siendo en la url habitual para validar página AMP, también se pueden probar los resultados de búsqueda directamente.

Formulario de validación de la herramienta AMP de Google. Imagen

INDEXACIÓN DE PÁGINAS AMP

Tras la ejecución de una dirección URL en versión AMP en el formulario de la herramienta, se mostrarán los resultados. Lo mejor es que ahora se puede enviar la versión AMP directamente a la indexación de Google. Asegúrese antes de enviar que lógicamente todo está correcto. La vista previa de los resultados de búsqueda está disponible y nos da una visión real del resultado.

Resultados de validación AMP. Imagen

Ni que decir tiene que la herramienta AMP de Google, no solo está para analizar las urls propias. Así que si quieres espiar a la competencia y ver cómo es su código fuente, es una oportunidad muy buena.versión AMP. Imagen

Si estás interesado en implementar el sistema AMP en un blog, aquí te presentamos un tutorial muy sencillo de como instalar versión AMP en WordPress.

Plugin AMP de WordPress, instalación y configuración de Google Analytics

Plugin AMP de WordPress, instalación y configuración de Google Analytics

Antes de comenzar con la instalación del plugin AMP de WordPress repasemos muy  brevemente qué es el proyecto AMP para páginas web.

Se trata de un desarrollo open source que ofrece una experiencia de navegación en móvil, rápida y eficaz, a groso modo podríamos explicar que dicha navegación se consigue cargando todos los elementos indispensables que necesita un contenido en la misma página (JavaScript, CSS, etc), puedes consultar toda la información detallada en la web oficial de Acelerated Mobile Pages.

La clave del proyecto reside en optimizar la velocidad de carga, todos sabemos que una página web que no se carga rápidamente es susceptible de que no se vea, algo que además afecta negativamente al posicionamiento SEO.

La idea inicial es aplicar este sistema a páginas del tipo noticias, por lo que las plataformas con formato blog son ideales.

Instalación del plugin AMP recomendado para WordPress

En la web oficial de WordPress encontrarás este fantástico plugin para convertir las entradas en páginas AMP.

plugin-amp-wordpress

Pasos para la instalación y configuración:

  1. Descargar el plugin y subirlo al directorio /wp-content/plugins/ o bien instalarlo directamente desde la zona de plugins del propio WordPress, el nombre a buscar sería: ‘Acelerated Mobile Pages’, dejar el plugin activado.
  2. Incluir dentro del archivo ‘.htacces ‘ y al principio, las siguientes líneas de código:

RewriteEngine On

RewriteCond %{REQUEST_URI} !/amp$ [NC]

RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|ipod|\#opera\ mobile|palmos|webos) [NC]

RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ http://www.tu-url.xxx/$1/amp [L,R=302]

  1. Sustituir http://www.tu-url.xxx por la url donde está el proyecto.

Si bien la inclusión del código en .htaccess es opcional, por el momento, la experiencia nos dice que a Google le ayuda a detectar antes nuestras versiones de páginas en AMP.

La nueva url para páginas AMP será el enlace habitual del artículo con la terminación /amp/, por ejemplo:

URL para escritorio: https://webreunidos.es/mi-pagina-noticia

URL para versión AMP: https://webreunidos.es/mi-pagina-noticia/amp/

Como veis la instalación es muy simple, ahora queda esperar a que aparezcan en las búsquedas realizadas en dispositivos móviles.

¿Cómo configuro Google Analytics para el plugin AMP?

Google analytics. ImagenAunque sabemos que existen algunos plugins para implementar analytics en las páginas web de AMP, somos partidarios de evitar la instalación de plugins adicionales, con el fin de no retardar la ejecución y carga de páginas.

La buena noticia es que no necesitas instalar un plugin adicional, con el siguiente código incluido dentro del archivo function.php tendremos controlado el seguimiento de páginas y perfectamente enlazado con la cuenta de Google Analitycs.

Estos son los pasos:

  1. Evidentemente, si no tienes una cuenta de Google Analitycs, crea una y abre un espacio personalizado para tu proyecto en la versión AMP.
  2. Consigue el id de seguimiento y guárdalo para utilizarlo más adelante.

Ahora tendrás que ir a Google Api y crear una CLAVE API para incluirla dentro del script que se ejecutará en el function.php con el fin de que funcione correctamente la analítica de AMP.

Plugin AMP para WordPress. Imagen

Personalizar el archivo function.php para enlazar Google Analitycs con el plugin AMP

Normalmente en un proyecto que disponga de un plugin AMP, el webmaster deberá disponer de una analítica para la versión de escritorio y otra para la versión de AMP para móviles.

Es necesario diferenciar el seguimiento para páginas con el plugin AMP, con su id correspondiente, por esto en WordPress precisamos llegar al archivo function.php e incluir el siguiente código:

<?php

add_filter( ‘amp_post_template_analytics’, ‘xyz_amp_add_custom_analytics’ );

function xyz_amp_add_custom_analytics( $analytics ) {

if ( ! is_array( $analytics ) ) {

$analytics = array();

}

// https://developers.google.com/analytics/devguides/collection/amp-analytics/

$analytics[‘xyz-googleanalytics’] = array(

‘type’ => ‘googleanalytics’,

‘attributes’ => array(

// ‘data-credentials’ => ‘include’,

),

‘config_data’ => array(

‘vars’ => array(

‘account’ => «UA-XXXXXXX-2»

),

‘triggers’ => array(

‘trackPageview’ => array(

‘on’ => ‘visible’,

‘request’ => ‘pageview’,

),

),

),

);

// https://www.parsely.com/docs/integration/tracking/google-amp.html

$analytics[‘xyz-parsely’] = array(

‘type’ => ‘parsely’,

‘attributes’ => array(),

‘config_data’ => array(

‘vars’ => array(

‘apikey’ => ‘XXXXXXXXXXXXXXXXXXXXXXXXXXX’,

)

),

);

return $analytics;

}

?>

Sustituiremos las cadenas de XX con su correspondiente id y APIKEY.

Si bien no se ha mencionado hasta ahora, lo ideal es que el function.php se encuentre dentro de un tema hijo, puedes encontrar más información en la web oficial de WordPress.

Hay otras maneras de instalar el plugin AMP de WordPress con Google Analytics, pero creemos que esta es la más simple por ahora.

YouTube responsive video

YouTube responsive video

Video YouTube

En este tutorial te enseñamos a incluir en tu web un video YouTube responsive, con el fin de que se vea correctamente en monitores de escritorio, tablets y dispositivos móviles.

Cada ve más, Google tiene más en cuenta las páginas web que tienen una versión móvil correcta y por lo tanto están siendo premiadas.

Una de las complicaciones con las que un diseñador web se puede encontrar está en cómo adaptar un vídeo de YouTube para que se visualice correctamente en todos los dispositivos. En este tutorial, no vamos a crear una versión móvil sino que vamos de una manera muy sencilla a explicar cómo se puede adaptar un vídeo para que sea líquido, y por lo tanto se ajuste correctamente a cualquier tamaño.

Como todos sabemos la inclusión del vídeo pasa por utilizar una etiqueta llamada <iframe>, que si bien no es buena para la accesibilidad, es necesaria para el funcionamiento de códigos externos, lo más normal es que no tengamos acceso al control de lo que se está ejecutando dentro de ese marco, sin embargo si tenemos la oportunidad de manejar las características de iframe.responsive web para youtube

Definición de etiquetas y CSS

Aunque no es obligatorio, sí es recomendable la inclusión de la etiqueta viewport con el fin de que se vea correctamente en dispositivos Tablet y móviles.

<meta name="viewport" content="width=device-width, user-scalable=no"> 
<!-- opcional -->

El código CSS para este ejemplo es muy simple

<style>#video {	
width: 100%;
height:1%;
min-height:380px;
overflow:hidden;
float:left;
margin-bottom: 30px;
margin-top: 7px;
}
#video iframe {
width: 100%;
min-height:360px;
}
</style>

Para el cuerpo de nuestro código solo nos queda tener la url del  vídeo que queremos incluir, luego cada uno maquetará a su gusto.

<body>
<h1>YouTube responsive video: Demo</h1>
<div id="video">
<iframe src="https://www.youtube.com/embed/ELDTyQj_UL4?autoplay=1" frameborder="0"
allowfullscreen></iframe>
</div>
<p>Tutorial desarrollado por: <a href="https://webreunidos.es"
title="Diseño Web Madrid: WebReunidos" target="_self">WebReunidos</a></p>
</body>

Aquí tenéis una Demo de YouTube responsive video de cómo funciona este código tan simple.

Como siempre os dejo el código completo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- opcional --><title>Documento sin título</title>
<style>
#video {
width: 100%;
height:1%;
min-height:380px;
overflow:hidden;
float:left;
margin-bottom: 30px;
margin-top: 7px;
}
#video iframe {
width: 100%;
min-height:360px;
}
</style>
</head>
<body>
<h1>YouTube responsive video: Demo</h1>
<div id="video">
<iframe src="https://www.youtube.com/embed/ELDTyQj_UL4?autoplay=1" frameborder="0"
allowfullscreen></iframe>
</div>
<p>Tutorial desarrollado por: <a href="https://webreunidos.es"
title="Diseño Web Madrid: WebReunidos" target="_self">WebReunidos</a></p>
</body>
</html>

Creo que con este tutorial se ha demostrado que tener un YouTube responsive video es simple.

Cómo ayuda un Community Manager a tu empresa

Cómo ayuda un Community Manager a tu empresa

Hoy en día, con la importancia que tienen las redes sociales en el marketing online, se hace imprescindible contar con una persona que sepa gestionarlas y sea capaz de mantener activa a tu comunidad. Y esa persona es, por supuesto, un Community Manager.

Funciones del Community ManagerEl Community manager en la empresa

Aunque muchas veces el Community Manager se relaciona única y exclusivamente a las redes sociales, lo cierto es que realiza algunas otras funciones. Aquí te las detallamos:

  1. Redes sociales: Sí, el Community Manager debe ser capaz de gestionar las diferentes redes sociales de la empresa de forma eficaz, dándoles dinamismos y manteniendo activos a los fans y seguidores de la marca, haciendo que éstos conecten emocionalmente.
  2. Gestión del blog: Este punto es, a menudo, más olvidado que el anterior. Es importante que el Community Manager también gestione el blog o, al menos, esté bien informado de lo que allí sucede y pueda actuar. ¿Por qué? Porque la comunidad que debe gestionar también está en el blog, no solo en las redes sociales, y, por lo tanto, él debe estar en ambos lugares.
  3. Promoción de ofertas: Por último, no es algo imprescindible pero sí algo oportuno el hecho de que el Community Manager tenga cierta manga ancha para hacer algunas ofertas o promociones. Por supuesto, no debes permitirle que lleve a cabo un sorteo al día que arruine a tu empresa, pero dotarlo de cierta libertad para que tenga herramientas con las que dinamizar la comunidad es importante.

Por último, recuerda que esos tres aspectos son fundamentales para que el Community Manager alcance sus objetivos, y dichos objetivos son, en primer lugar, la dinamización de la comunidad ya existente, por otro, la obtención de nuevos seguidores que formen parte de la comunidad y, por último, la consecución de conversiones y ventas para la empresa.

En definitiva, el Community Manager es alguien imprescindible en una empresa, siempre y cuando ésta quiera desarrollar una buena estrategia de marketing en internet. Las redes sociales son su medio natural, y es por ello que los usuarios le adoran.

Hosting en Madrid para España

Hosting en Madrid para España

Si estás buscando hosting para tu proyecto y este tiene su principal público en España, seguramente te interese contratar un hosting en Madrid para dar servicio a toda España.

Entre muchos factores, el principal impulsor a efectos de posicionamiento está en tener una IP española, es decir la IP del servidor contratado tiene que estar en España.

Elegir un hosting en españa de calidad: Trucos para hacerlo

El mundo de internet se ha vuelto bastante complejo, y cada vez hay más empresas ofreciendo servicios de todo tipo para que desarrolles tus sitios web y tus proyectos. Entre las empresas que han proliferado, se encuentran las de hosting. En esta ocasión, te explicamos algunos trucos para elegir un hosting de calidad.

Cómo elegir un hosting de calidad

Aquí te dejo algunas preguntas que debes hacerte y que deberías comprobar antes de elegir un proveedor de hosting:

  1. ¿Qué velocidad de transferencia ofrece?: Este es uno de los puntos más importantes. Una buena velocidad de transferencia permite que la web responda más rápido ante la presión, lo cual significa que podrás sobrecargar ligeramente más tu web y podrás soportar mayor cantidad de usuarios.
  2. ¿Es compartido?: Importantísimo. Las webs noveles y recién creadas pueden funcionar en un servidor compartido, pero cuando empiezas a crecer, es inevitable que necesites un servidor para ti solo, sin riesgo de que lo que haga otra web te afecte negativamente a ti. Plantéate si tu sitio web va a necesitar un servicio personalizado.
  3. ¿Qué potencia ofrece?: La potencia que tenga un servidor es tan importante como la velocidad de transferencia, ya que es lo que te asegura que tenga una buena respuesta ante las más variadas situaciones. Si es un sitio web de un negocio serio y que va a tener bastante tráfico, necesitarás más potencia que si solo lo quieres para un blog sencillo.
  4. ¿Qué hay del servicio técnico?: Un punto a menudo olvidado pero que yo considero imprescindible. ¿El servicio técnico habla tu idioma? ¿Está disponible las 24 horas del día? Ese tipo de aspectos hay que preguntárselos antes de contratar un hosting, ya que no hay nada peor que tener la web caída y no recibir respuesta o ser incapaz de comunicarte con el servicio de atención al cliente porque habla otro idioma.

hosting en Madrid. WebReunidos
Es muy importante que el hosting responda a las necesidades del proyecto que se va a implementar, bien sea un desarrollo a medida, WordPress, plataforma ecommerce u cualquier otro.

Un hosting de calidad además de soportar diferentes proyectos debe ser escalable, es decir, tiene que atender la demanda de un proyecto desde su inicio con poca afluencia de público hasta conseguir gran número de visitas y evolución del código, atendiendo a las diferentes versiones de lenguajes y base de datos que van apareciendo con el tiempo..

Recomendaciones básicas para un alojamiento web profesional

Lo ideal dispones de tiempo y además la empresa de alojamiento da ese servicio, es tener un plan de pruebas durante un tiempo. En ese tiempo, entre otras cosas, comprobaremos como responde el servicio técnico a las demandas requeridas, como se ha dicho, este es un punto tan importante como la capacidad y potencia del hosting.

Una buena empresa de hosting tiene la posibilidad de ofrecer alojamiento administrado o no.

En el caso de un hosting no administrado vamos a tener que realizar las tareas de instalación de software al servidor, actualizaciones, acciones de seguridad y muchas otras operaciones propias de administración de sistemas, esto implica tener sólidos conocimientos y disponer del tiempo adecuado con el fin de tener un servicio sólido.

Una buena idea si no se dispone de tiempo es contratar un hosting administrado, si bien siempre es una opción más cara, pero de este modo evitaremos problemas de funcionamiento, emplearemos el tiempo que se dedica a sistemas a aplicarlo a nuestros desarrollos.

Otro de los requisitos que para seguridad de nuestros proyectos y tranquilidad debe reunir un hosting, es el servicio de backup o copias de seguridad durante todo el año, si bien son tareas que manualmente se pueden realizar o programar, es conveniente que el servidor contratado para el alojamiento lo realice de forma automática.

Como herramienta de ayuda al seguimiento y evolución de nuestros sitios web, el hosting debe de poseer una herramienta de informes de vistas que nos permita analizar qué resultado está teniendo cada proyecto, que accesos hay, tiempos de las visitas, estadísticas anuales, gráficos y mucho más.

hosting en madrid para españa. Imagen de hostingComo verás, con estos trucos para elegir un hosting de calidad no tendrás ningún problema y tendrás la certeza de que has elegido aquel que mejor se adapta a tus necesidades. Al fin y al cabo, no todas personas necesitan exactamente lo mismo.

Aunque en este artículo se ha generalizado mucho, sin tener en cuenta si es un proyecto bajo licencia, tipo Micrososft o bajo licencia libre, tipo GNU, como norma general y dada la temática de nuestro blog, para un desarrollo web en PHP con MySQL o algún tipo de gestor de contenidos, WordPress, Drupal, etc., lo ideal y básico será un servidor Linux que soporte PHP y MySQL, con servicio backup y soporte 24×7.

Si buscas posicionar tu proyecto en todo el país, lo idóneo será un hosting en Madrid para España.

Usabilidad web

Usabilidad web

USABILIDAD WEB: PAUTAS GENERALES

Dentro de la usabilidad web y como indicábamos anteriormente: qué es y para qué, cuando vayamos a diseñar y/o programar nuestra página web, debemos pensar fundamentalmente en la satisfacción de nuestros visitantes al lograr realizar lo que ellos desean hacer de forma fácil y sin gran esfuerzo en aprender a moverse por nuestra web.

Para conseguir lo indicado, es bueno seguir, tener en cuenta, una serie de pautas o consejos básicos sobre usabilidad:

  • Debemos facilitar una la lectura rápida de los contenidos

Creo que este concepto lo veremos más claro si echamos un vistazo tanto a un periódico en formato papel como a uno en formato digital – El Mundo, El País, Europa Press -.

Como podemos comprobar, se nos ha facilitado la lectura con las siguientes técnicas:
a) Haciendo uso  de los diferentes niveles de títulos -<h2>Sarkozy reúne a la cúpula de las fuerzas de seguridad tras las críticas a la investigación</h2>, así como del uso de párrafos <p>, listas <ul>, negrita <strong>, etc.,  se obtiene una visulización del contenido que falcilita su lectura rápida y al mismo tiempo su jerarquía.

b) Se ha procedido a agrupar bajo un mismo título cosas/elementos que están mutuamente relacionados.
En la noticia sobre el Masters 1000 de Miami se ha agrupado texto y foto -lectura rápida- así como los enlaces para ver más información sobre la noticia o ampliar información.

  • Debemos hacer uso de las convenciones definidas

En las páginas web, así como en los periódicos,  con el tiempo se han ido creando una serie de normas no escritas/convenciones que facilitan que el usuario, independientemente del periódico o web que visite, sepa moverse por la web y que es preciso tener en cuenta.
Estas son :

a) Los enlaces. Si lo convencional es que el texto de enlace a otros contenidos vaya subrrayado, con el paso del tiempo, ésta convención se ha modificado al hecho de que dicho subrrayado aparezca cuando se sitúa el puntero del ratón encima del texto enlace -a:hover-.

b) Barras de desplazamiento. Se desaconseja las barras de desplazamiento horizontal -más ahora que estamos pasando de las pantallas de 4:3 a las panorámicas de 16:9-. No es recomendable añadir barras de desplazamineto vertical. Se debe utlizar las que ya de por sí nos proporcionan los navegadores. Poner más barras, sólo puede confundir o crear ‘ruido’ en la página.

c) Marcos/Frame y barras. Dos son las razones que desaconsejan el uso tanto de marcos/frames como de sus barras de desplazamineto asociadas. Una, ya se ha indicado en el punto anterior, aparte de que con una lectura rápida lo más probable que esa nueva barra pase desapercibida; otra, el hecho de que cada día está más en desuso los frames por un uso más normalizado de los div -ni qué decir tiene cuando se implemente el HTML 5-.

No solo hay mantenerse al día con los estandares web, sino también con las normas, pautas o convenciones sobre uso de la usabilidad web.