Adaptar la web a móvil

Google ha sacado un nuevo servicio para adaptar tu página web a dispositivos móviles. Mensajes del tipo:

“2 de cada 3 personas usan su móvil como si fuera una linterna”
“las tendencias para el 2013 es que habrá más usuarios que se conecten a internet desde su móvil que desde un pc”
“En el 2010 las búsquedas por móvil sufrieron un crecimiento del 400%”

Bueno, todo esto quiere decir que tu web debería estar optimizada para poder ser visualizada de forma correcta desde un dispositivo móvil.
¿Qué quiere decir que tu móvil se vea de forma correcta en un dispositivo móvil?

- El texto de tu web se debería de leer sin tener que hacer zoom
- Los enlaces y botones deben ser fácilmente clikables con el dedo también sin hacer zoom.
- Las cajas de búsqueda y formularios deberán ser grandes para que el usuario acceda de forma correcta.
- Tu página tarda mucho en cargar desde un móvil?

Para poder contestar a estas preguntas puedes acceder a la web de Haz tu web móvil y probar el Test móvil de tu página web

Microdatos en mi tienda online

Para que tu producto salga destacado en el resultado de búsqueda de google y por lo tanto aumentar el número de visitas considerablemente y así tener más ventas, sólo tienes que introducir unos códigos llamados microdatas en los que los robots de google interpretarán de forma semántica y podrás conseguir este resultado.
Un ejemplo del código es, por ejemplo, para que la dirección de tu empresa salga en el resultado de búsqueda :

<div>
<span>L’Amourita Pizza</span>
Located at
<div>
<span>123 Main St</span>,
<span>Albuquerque</span>,
<span>NM</span>.
</div>

 

Puedes introducir estos microformatos cuando nuestra web trata sobre: recetas, reviews, productos en venta, direcciones de negocios, eventos y vídeos.
Puedes ver más información en .
Además de Microdata también puedes utilizar microformatos y RDFa. Encuentra más información en la guía de Google, mi consejo es usar microdatos ya que está muy vinculado con HTML5 como se puede ver en la web de HTML5rocks.

Para saber si tu web tiene bien introducido los microdatos puedes usar esta herramienta de google: Rich Snippets Testing Tool

Resolución Ipad, iphone y dispositivos móviles más comunes

A la hora de crear diferentes diseños para web debemos tener claro las dimensiones en pixel de los nuevos dispositivos móviles que están en el mercado.
La mejor opción es usar media queri que te da la posibilidad de adaptar con css tus clases para abarcar las diferentes resoluciones.

 

Aquí están las resoluciones de los dispositivos más importantes:

Resulución Ipad: 1024×768
Resolución Ipad 2: 1024×768
Resolución Iphone: 320×480
Resolución Samsung Galaxy Ace: 320×480
Resolución Samsung Galaxy S II: 800×480
Resolución Nokia Lumia 800: 800×480

Test de usuario a distancia o de guerrilla

Hace unas semanas estuve viendo el vídeo de whiteboard friday de seomoz y estuvieron comentando varias herramientas y webs para hacer estudios de usabilidad bastante interesantes.

La primera que quiero comentar es la de fiverr: Portal de internet donde puedes encontrar a gente que realice cualquier tipo de cosa por 5 dolares. En este caso lo que queremos es que realice un test de usuario por lo en esta web podemos encontrar anuncios de gente dispuesta a ser testea.

user-test-usability
Ejemplo de anuncios de gente que se ofrece a hacer un test de usuario

Seguir leyendo

La solución de Google Chrome Frame

¿Cuántas veces os habéis encontrado alguna persona que no quiere actualizarse de navegador? Tanto en la familia como en el trabajo hay veces que cuesta mucho concienciar a la gente que cambie o incluso que actualice de navegador.

El problema viene cuando estamos realizando páginas web con HTML5, CSS3, jquery y nuevas tecnologías donde navegadores como Internet Explorer no lo soportan.

Para ello la solución que propuso google, que a mi entender no se ha explotado lo que debiera,  a finales de 2009, ya hace tiempo, si!,  era el instalar Google Chrome Frame donde el usuario sigue usando IE6, IE7, IE8 y realmente el navegador que está usando tiene el motor de Google Chrome y por lo tanto es compatible con CSS3, HTML5 , etc…. De esta forma hemos conseguido que el usuario no cambie de navegador, siga teniendo su icono de Explorer como acceso a su Intranet o Extranet, pero pueda visualizar las webs sin problemas.

Os dejo un vídeo explicativo de Google Chrome Frame

Valores de atributos en elementos CSS3

Actualmente CSS3 está siendo más compatible con los navegadores actuales que el HTML5.
Las nuevas funcionalidades que tiene el CSS3 son por ejemplo: multiples fondos, nuevas pseudo-clases, nuevos grupos de propiedades: transiciones, tranformaciones, animaciones y estilos para HTML y lo que vamos a hablar hoy que es seleccionar elementos usando atributos con un valor específico.

Para conocer las limitaciones de determinados atributos, selectores de CSS3 puedes consultar esta tabla de CSS3.

El formato que debe tener nuestra CSS es:
element[attr=’value’] { … }

ejemplo:
p[title='alerta'] {color=”red”}

Lo que hacemos es que el elemento o etiqueta html:p cuando tenga un atributo: title que tenga el valor alerta que ponga el texto en rojo. De esta forma sólo aplicamos esta propiedad a un elemento con un atributo específico de nuestra web.

Operadores para definir un atributo en CSS3

Estos son:

= El valor debe coincidir exáctamente
~= Coge la propiedad si el valor incluye la palabra que pongamos
|= El valor está seguido de un guión
^= El atributo empieza por ese valor
$= El atributo acaba con el valor
*= Atributos que contienen el valor, no importa en que posición

Dominio con www o sin www en .htaccess

Cada día se ven más sitios webs sin las www en la dirección de sus dominios. Esto es debido a una serie de ventajas:

  • Consigues una dirección de tu web con menos letras.
  • Urls del contenido que está dentro de tu web también más cortas por lo que las keywords de tus urls amigables aparecerán antes  y eso google lo premia.
  • Evitar error 301 entre dominios con www o sin www, no tendremos el problema de contenido duplicado que google penaliza.
Aquí esta la mejor forma para poner tu dominio sin las www. Abre el fichero .htaccess que está en raiz de tu proyecto web e introduce estas líneas. Si no tienes permisos para modificar el fichero .htaccess recuerda que tienes que clicar con el botón derecho, propiedades  y ponerle permisos manuales de 777. Una vez que lo hayas modificado vuelve a ponerle los permisos que tenía antes: 644.

Quitar www de tu dominio en .htaccess

RewriteEngine On
 RewriteBase /
 RewriteCond %{HTTP_HOST} !^tudominio.com$ [NC]
 RewriteRule ^(.*)$ http://tudominio.com/$1 [L,R=301]

Sin embargo si quieres dejar tu dominio con las www y evitar el contenido duplicado tienes que introducir este código en el fichero .htaccess

Poner www a tu dominio en .htaccess

RewriteEngine On
 RewriteBase /
 RewriteCond %{HTTP_HOST} !^www.tudominio.com$ [NC]
 RewriteRule ^(.*)$ http://www.tudominio.com/$1 [L,R=301]

Este tipo de cambios lo puedes realizar perfectamente en tus proyectos de wordpress, joomla o drupal. Ojo! no te olvides de cambiar el dominio en el panel de control de tu CMS (ejemplo de WordPress: Ajustes /Generales y quitas las www)

Gestionar distintos usuarios de Google en tu navegador (Google Chrome)

Google Chrome es el navegador que llevo recomendando desde hace aproximadamente 1 año sigue siendo Google Chrome. Ahora si compartes tu ordendador con familiares o simplemente tienes diferentes usuarios de google, puedes crear diferentes usuarios en tu mismo navegador Chrome.
Te adjunto este vídeo donde puedes ver la explicación directamente.

 

Google Chrome no deja de sorprenderme y te añade diferentes iconos para poder cambiar tu usuario: icono pizza, icono ninja, etc….
Para ello ve a Configuración/ Personal y ve a “Usuarios“, añadir nuevos usuarios. Ahora es cuando te aparecerá los iconos de pizza, ninja etc, en la parte superior derecha del navegador y podrás cambiar tu usuario.
¡¡Muy útil!!

 

Meta descripciones coherentes en SEO

Hace unos días cambié la meta descripciones de mi web y decidí crear una meta descripción llena de palabras clave separadas por comas, y cuando vi que google la indexaba, cual fue mi sorpresa que encontré que automáticamente esa descripción la omitía por completo y lo que hacía era coger tanto el title como la meta description del directorio DMOZ.

dmoz-logo

 

El problema es que la descripción que tengo en DMOZ está obsoleta y no contiene las keywords más importantes de mi página por lo que estaba recibiendo menos visitas y no estaba aprovechando la importancia que tiene una meta description bien optimizada en la Home de la web.

 

La conclusión es por tanto que no se debe de abusar de las palabras claves ni en la meta descripción ni en el title ya que google las omitirá y buscará otras descripciones que encuentre, en mi caso la cogió de DMOZ. No sobra decir, por tanto, que esta descripción tiene que ser coherente y tenga frases completas ya que sino tanto enfocarse en las keywords puede ser contraproducente.

 

Concordancia de palabras clave en Google Adwords

Existen 4 tipos de  concordancia de palabras clave en Google Adwords que se puede aplicar en los anuncios. Estas opciones pueden ayudar a controlar mejor los anuncios que publicamos.

Se puede establecer para cada palabra clave de orientación por búsqueda para que tenga una de las cuatro configuraciones. Para usar una opción de concordancia de palabras clave, simplemente hay que añadir una serie de símbolos como son:  asteriscos, corchetes, más o menos:

  1. Concordancia amplia: palabra clave
    Permite mostrar tu anuncio en frases similares y variaciones relevantes.
    (El modificador de concordancia amplia también se puede usar para definir aún mejor las concordancias amplias de la palabra clave: +palabra clave).
  2. Concordancia de frase: “palabra clave”
    Permite mostrar tu anuncio en búsquedas que coinciden con la frase exacta.
  3. Concordancia exacta: [palabra clave]
    Permite mostrar tu anuncio en búsquedas que coinciden exclusivamente con la frase exacta.
  4. Concordancia negativa: -palabra clave
    Asegura que tu anuncio no aparezca en ninguna búsqueda que incluya ese término.

Con algunas opciones, obtendrás más impresiones, clics y conversiones de los anuncios.