Categoría: Diseño Web

mejoras en el diseño de tu web, optimización y diseño web en general

Mejorar la usabilidad de la web

La siguiente ponencia realizada por Isidro Perez se orienta a cómo mejorar la usabilidad de la web.

La ponencia está orientada a un nivel de usuario medio y destacaría los siguientes puntos:

  • El 50 por cien de la compra es el diseño y el 30 la usabilidad. Si no causa una buena impresión al inicio no habrá una segunda oportunidad.
  • Gran parte de la compra es subjetiva a la hora de comprar el producto y dejar mis datos
  • hay que Integrar el blog
  • El menú se mantiene dentro de la navegación, no hay que cambiarlo de apariencia ni de sitio
  • Dependiendo del objetivo que buscar la web cambia la apariencia, si por ejemplo queremos suscripciones de mail habrá que crear una landing page con poca info y muy atractiva.
  • Los botones que invitan al acción.
  • Cuidar las palabras en el botón, un “free” puede cambiarlo todo.
  • Solo lo sabremos si un botón es bueno analizando. Cambiando y midiendo
  • Ofrezcamos sin pedir nada a cambio y recibiremos más
  • Diseño adaptado al móvil. Responsive web
  • Hay q meter Linkedin.com y todas las redes sociales que podamos
  • Medir los resultados de forma continua.
  • Analizar embudo. Desde las visitas hasta las ventas.
  • herramientas “Semrush”

isidro-perez

Comparador de archivos en Dreamweaver con Mac

Si usas Dreamweaver en MAC para diseñar sitios webs y necesitas una herramienta para comparar dos archivos puedes usar TextWrangler, aquí os dejo las instrucciones:

1. Descargar e instalar el programa: TextWrangler o el BBEdit. Después de haber arrastrado a la carpeta Aplicaciones alguna de las dos aplicaciones, tendrás que hacer clic en él para abrirlo y registrarlo.

2. Abrir DreamWeaver, Haga clic en Preferencias

3. Buscar archivo Comparar en la lista, haga clic en Examinar, vaya a /usr/bin y recoger twdiff (si has instalado TextWrangler) o bbdiff (si has instalado el BBedit). Si no veis estos archivos debéis instalar este archivo en Textwrangler o para BBedit y loa archivos los tendréis en /usr/local/bin

4. Ahora está listo para comparar los archivos! Elija el primer archivo, use la tecla de comando para seleccionar el segundo archivo, a continuación, haga clic derecho y seleccionar “Comparar archivos locales”.

5. Listo!

Facebook User ID

Tras hacer una aplicación de facebook, necesitaba mi usuario ID de facebook y la verdad es que no lo encontraba. Tras visitar varias webs te indicaban que lo puedes saber en:

http://apps.facebook.com/what-is-my-user-id/

Pero tras hacer login a mi personamente me sale el mensaje:

“It looks like you are not logged in. You need to log into Facebook to get the number.”

Finalmente lo he sacado de una manera un poco rudimentaria y es accediendo al perfil, fotos y al ponerte encima de editar foto en la url te sale el ID.

Optimización del title en los attachment del wordpress

La mayoría de vosotros usáis el plugin All In One Seo Pack y para mi tiene un error de optimización cuando visualiza los attachments en nueva página. Os cuento que és y como se soluciona.

Cuando se inserta una imagen en el post como “url de entrada” …

Se autogenera una nueva página que se maqueta haciendo uso del archivo “image.php” que está en nuestra plantilla de wordpress.

El problema es que el All in one seo pack genera un TITLE como el siguiente:

post title + attachment title

Lo ideal sería que el title de esa nueva página fuera solo el “attachment title” o en caso de querer mantener los dos que metiera un guión o algo para separarlo. El problema es que ni modificando el header.php nos deja hacerlo.

Para conseguirlo se hace así:

1) abrimos el “aioseop.class.php” del plugin AIOSEOP
2) sobre la línea noventa cuando termina el código:

if( $this->aioseop_mrt_exclude_this_page()){
return;
}

insertamos el código

if(is_attachment()) {
return;
}

3) ahora ya podemos manejar el TITLE desde el header.php

if (is_attachment())// tuneo el title
{
echo "<title>".$post->post_title."</title>";
} else {
?>
<title>< ?php wp_title(''); ?>< ?php bloginfo('name'); ?></title>
< ?php
}

Error 503

Que hacer ante un error 503 ?

error 503

Lo primero es que un error 503 se genera normalmente ante una sobrecarga del servidor, lo que hace que exista un problema de indexación si en esos momentos nos están rastreando los robots de los buscadores.

Asi que como se estan poniendo las cosas en donde los tiempos de carga son fundamentales no es cuestión de tener este tipo de errores.

Podemos solucionarlo de varias formas:

  1. Restringiendo la entrada a nuestro website mediante un archivo .htaccess baneando la ip de los robots que no nos interesan que nos rastreen y que nos consume mucho ancho de banda ya que estos robots suelen pasar bastante de nuestro archivo robots.txt
  2. Utilizar el robots.txt para al igual que anteriormente no permitir la entrada de estos robots y dejar que solo se rastree lo que nosotros queremos, con lo que ahorraremos en ancho de banda gastado.
  3. Desabilitar los feeds ( no es muy buena idea pero puedes hacerlo sobre todo si te copian contenido )
  4. Utilizar distintos métodos anteriormente comentados para optimizar los tiempos de carga

Pero realmente lo que nos interesa a nosotros es trabajar sobre este error para que google no nos penalice al encontrarse con él por lo que debeis de incluir en vuestro archivo .htaccess el siguiente código que envia a los robots de google a un archivo de error 503.php y le dice que vuelva dentro de 3600 segundos mientras que al usuario lo manda a una página de error 404 :

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_USER_AGENT} ^.*(Googlebot|Googlebot|Mediapartners|Adsbot|Feedfetcher)-?(Google|Image)? [NC]
RewriteCond %{REQUEST_URI} !^/cgi-bin/error/503\.php [NC]
RewriteRule .* /cgi-bin/error/503.php
RewriteCond %{REMOTE_HOST} !^1\.1\.1\.1
RewriteCond %{REQUEST_URI} !^/cgi-bin/error/404\.php [NC]
RewriteRule .* /under-development-explain.html [R=302,L]

Si utilizais CGI debeis de incluir este archivo 503.php para decirle a los robots de google que vuelvan a pasar dentro de 3600 segundo, 1 hora.

<?php
ob_start();
header('HTTP/1.1 503 Service Temporarily Unavailable');
header('Status: 503 Service Temporarily Unavailable');
header('Retry-After: 3600');
header('X-Powered-By:');
?><!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>503 Service Temporarily Unavailable</title>
</head><body>
<h1>Service Temporarily Unavailable</h1>
<p>The server is temporarily unable to service your
request due to maintenance downtime or capacity
problems. Please try again later.</p>
</body></html>

Redirección htaccess

Normalmente haremos uso de las redirecciones htaccess debido a que:

1. Han enlazado una url de nuestro site que no es correcto.

redirect 301 /url_erronea.html http://www.nombredeldominio.com/url-correcta/

2. Hemos cambiado la estructura URL de nuestro site.

redirect 301 /url_antigua.html http://www.nombredeldominio.com/url-nueva/

3. Hemos cambiado de dominio y mantenemos las url

redirectMatch 301 ^(.*)$ http://www.nuevodominio.com$1

4. Hemos cambiado de dominio y todo va a la home

Redirect permanent / http://www.nuevodominio.com/

Problemas con el feed en WordPress

Hace unos días, tuvimos un problema por desgracia nuestra bastante común cuando trabajas con WordPress y rss. El error era el siguiente.

declaración xml no válida., línea: 2, carácter: 3< ?xml version="1.0" encoding="UTF-8"?>

Después de buscar un rato en google, me di cuenta del error el problema estaba en las líneas en blanco fuera de los < ?php ... ?>. Encontré la siguiente página del W3C: Blank line before XML declaration (WordPress) (Línea en blanco antes de la declaracion XML) donde te indica lo que te tienes que revisar para corregir tu error.

  • En PHP se usa la notación < ?php ... ?>, el ?> final es opcional y debería ser eliminado de los módulos y los includes, para evitarte problemas con líneas en blanco a continuación del ?>
  • Revisar los archivos wp-rss2.php y wp-atom.php en busca de líneas en blanco fuera de los < ?php ... ?>.
  • Revisar el archivo wp-config.php en busca de líneas en blanco fuera de los < ?php ... ?>.
  • Revisar el archivo del theme actual, functions.php, en busca de líneas en blanco fuera de los < ?php ... ?>.

Para acabar si todavía persiste el problema deberías desactivar uno a uno tus pluglins y para saber cual esta provocando el problema.

Para acabar es importante siempre validar el feed para asegurarnos que es correcto.
[RSS Valido]

Tiendas para WordPress

Últimamente ando buscando alguna opción de introducir una tienda para wordpress que pueda integrar perfectamente los productos, el carrito de compra y el panel de usuarios.

La primera opción que he probado es el plugin WP E-Commerce que dispone de una gestión razonable para poder hacer ventas en una plataforma wordpress. Otra alternativa es Templatic que dispone de un par de plantillas que incorporan una tienda online.

En las dos plataformas me encuentro con un hándicap bastante importante y es que el panel de administración, así como la generación de facturas no es muy completa. Recordemos que en España la ley obliga a que el cliente pueda descargarse la factura legal desde un panel accesible por dicho usuario. Estas plataformas por sí solas no traen esa opción.

Por tanto sigo pensando que la mejor opción es usar una plataforma propia de comercio electrónico como son Prestashop o Magento.

PD: No obstante si alguien conoce una plataforma completa para wordpress que no haya comentado y mejore el funcionamiento de venta online que no dude en comentarlo.

Remove canonicals

Si necesitas paginar los comentarios y que estos se indexen de manera correcta entonces debes controlar varias cosas:

1. identificar que estás en una página de comentarios
2. eliminar el cuerpo del post (para que no sea contenido duplicado)
3. ajustar title y la description de la página de comentarios (para que no se repita con el artículo principal)
4. eliminar el canonical por defecto y ajustarlo a la página de comentarios para que detecte que estáis en una página de comentarios

Ignoro si hay un plugin que hace todo eso, pero como siempre os recomiendo programarlo vosotros en vuestro theme, por cierto, si no sabéis como se elimina el canonical (ya que en las últimas versiones de wordpress viene por defecto)

remove_action('wp_head', 'rel_canonical');

o lo que es lo mismo en plugin.remove-canonicals