Anteriormente había escrito sobre el funcionamiento de friendly url pero aún hay muchos que están en duda sobre su funcionamiento así que voy a aprovechar de hacer un ejemplo práctico muy sencillo sin usar web modular (que es para lo que normalmente sirve) para que sea lo más simple posible.

Lo básico en URL amigable

Lo primero debemos asegurarnos de tener activo el módulo mod_rewrite de lo contrario dará un error “Internal Server Error” o simplemente no funcionará, luego creamos un archivo .httacess

Allí primero verificamos el mod_rewrite luego seteamos la RewriteBase es decir la carpeta donde esta nuestro sitio, si se tratara de www.misitio.com esa línea sería:

Las 2 últimas líneas nos dicen que de existir ese archivo o carpeta se olvide de la URL amigable y use esos archivos

Creando pagina.html

Para esto en nuestro archivo.httacess añadimos:

Esto genera una equivalencia entre
index.php?page=mipagina
mipagina.html

Para emular carpetas

Para esto en nuestro archivo.httacess añadimos:

Esto va a generar una equivalencia entre:
index.php?page=local&link=restaurante-san-jose
www.misitio.com/local/restaurante-san-jose/

La cantidad de parámetros y de nombres de las variables depende de cada caso en concreto

Uso de las variables

Todas las variables GET que creamos tanto con friendly URL como sin esta mantienen sus nombres por ejemplo en el caso:
index.php?page=local&link=restaurante-san-jose
www.misitio.com/local/restaurante-san-jose/

Las variables creadas en ambas direcciones son: page que tiene el valor local y la variable link que tiene el valor restaurante-san-jose

Debemos tener claro que con url amigable lo único que estamos haciendo es disfrazar la dirección pero este disfraz altera las rutas relativas por lo que posiblemente fallen todas las invocaciones a hojas de estilos, javascripts e imágenes que se hayan hecho sin usar una ruta absoluta, para remediar esto hay 2 posibles soluciones:

Alterando la ruta base(basepath)

Esta es la más simple y rápida basta con agregar la siguiente linea HTML en el encabezado de nuestra página web

Usando un path absoluto

Esta es la solución que más se utiliza debido a que la otra solución puede no funcionar en algunos navegadores especialmente en los antiguos (IE6 por ejemplo tiene varios peros), lo que hacemos es guardar la ruta absoluta en una constante que luego usaremos cada vez que invoquemos una imagen, css o javascript.

De esta forma hay algunas variantes usando short open tags, templates, funciones, etc pero la idea básica es la misma.

Pueden ver un ejemplo funcionado AQUI
No doy link a los archivos del ejemplo ya que su funcionamiento varía según la carpeta donde se le coloque, por lo que terminarían dando más problemas que soluciones.

Esta es una pregunta muy frecuente que yo considero depende mucho del uso que le damos al ajax, y esto esta ligado a la accesibilidad porque no es lo mismo poner un javascript que invoca todo que un pequeño script para darle algo de animación a nuestro sitio.

Hay tal variedad de scripts que no podría decir tal afecta y tal no pero voy a hablar de los scripts más comunes y de ahí un método para testear el resto.

Acordeón

Me refiero a estos script que ocultan parte del texto y la muestran al darle click a un botón, los spiders de los buscadores ven la página sin CSS ni javascript así que verán el texto completo que sólo esta oculto en un div con overflow hidden, por lo que no afecta el SEO.

Galerías AJAX estilo slideshow

Usualmente estas galerías funcionan con un link como este:

Mi sugerencia allí ya sea que usemos o no AJAX es agregar a la imágenes el atributo ALT que es el que usan los buscadores

Tabs o pestañas

En este caso habría que hacer un distingo entre aquellas que ocultan el texto y lo muestran según la pestaña seleccionada y aquellas que invocan el contenido dinámicamente. Las segundas no serán enlazadas por los buscadores y las primeras serán enlazadas como parte del texto de toda la página aunque sería muy interesante si pudiera enlazarse el área concreta.

Invocar contenidos sin recargar la página

Este es un truco muy popular que yo recomiendo usarlo únicamente para envío de formularios o para mostrar mensajes de advertencia.
Habría que hacer el distingo, no es lo mismo usar este link:

Ese nunca será enlazado pero este otro si:

Debemos tener presente que aunque las páginas invocadas con el segundo link son indexadas no podemos tener control sobre sus metatags ni el título así que los buscadores las indexarán como vean por conveniente.

¿Cómo se si mi página AJAX será indexada?

La mejor forma de comprobar esto es deshabilitar por completo el CSS y el javascript y empezemos a navegar en nuestro sitio si podemos ver todas las secciones y acceder a nuestros links significa que estamos trabajando bien si por el contrario acabamos viendo un texto informe imposible de navegar entonces tenemos un largo trabajo por hacer.

Continuando con los post acerca de facebook, veamos como crear esos botones “me gusta” o “I like this” de Facebook que están tan de moda para socializar nuestra web, personalmente me gustan opciones más completas como AddThis pero hay clientes que tienen cierta fijación con ese botoncito azul y hay que darles el gusto.

Este botón puede ser generado en 2 versiones una para HTML dentro de nuestras páginas y otra FBML para aplicaciones Facebook, básicamente se crea un iframe con el botón y muchos estilos no reconocidos por el browser (aún no entiendo para que pero ahi están).

El generador es muy fácil de utilizar lo pueden ver AQUI

Sólo una pequeña sugerencia procura no poner más de un solo botón por página porque podría dar un error de “Parámetro incorrecto…. bla, bla” y otro detalle a tomar en cuenta es que los iframes son un poco duros para actualizarse por esto para probar cambios debes borrar temporales y actualizar varias veces

Prometo retomar luego los artículos sobre CSS3 sobre todo selectores y transiciones (varias de esas características aún no funcionan en FF o Safari aún).
En un post anterior hablé de las fanpage en Facebook y sus posibilidades como nuevo producto para nuestrso clientes, ahora voy a hablar de una aplicación llamada FBML y que interesantes posibilidades nos brinda.

¿Qué es FBML?

FBML es una aplicación que nos permite mostrar una página HTML personalizada incluyendo imágenes alojadas en un servidor externo, archivos flash, videos de youtube, links a nuestro sitio principal, landing page, etc; todo esto se mostrará en una pestaña adicional de nuestra fanpage que podemos ponerle el título que querramos.

¿Cómo instalo FBML?

Primero nos logeamos en nuestra cuenta de Facebook, damos click a “Aplicaciones” y buscamos FBML, en su página veremos que debajo del avatar hay un link para activarlo y podremos selecionar cualquiera de nuestras fanpage dando click al botón “Add to page” como se muestra en el screenshot.

¿Y ahora cómo lo personalizo?

Primero en nuestro perfil, vamos al link “Ads and pages” y configuramos la página a la que agregamos el FBML, veremos que ha aparecido una nueva opción llamada FBML en la categoría “Applications”, esta tiene opciones de configuración para mostrarse como una caja o como una pestaña(tab), yo prefiero desactiva box y activar tab. En la imagen esta paso por paso lo que he explicado.

Agregando contenido

Una vez configurada nuestra pestaña, ya podemos agregar nuestro código HTML, ojo si usamos CSS este debe ser en linea y no al inicio o intentando usar una hoja de estilos externa (la idea de maquetación es similar a la que se usa para un correo electrónico), luego lo grabamos y si todo esta bien deberiamos ver en nuestra fan page la nueva pestaña con nuestro contenido.

Para agregar imágenes no podemos subirlas directamente a Facebook, para esto las subimos a un servidor externo y las cargamos usando la ruta absoluta

¿Cómo añado flash o videos?

No podemos insertarlos usando javascript o directamente pegando el embed, facebook tiene su propia etiqueta para esto además la película flash no se ejecuta desde el inicio, primero se muestra una imagen y al darle click a esta recién se ejecuta el flash o el video. El código sería como este:

Como vemos en este caso estoy usando una tabla en la que indico el color de fondo, swfsrc nos indica la ubicación del flash (en este caso una pelicula youtube) y finalmente imgsrc nos indica la imagen que se mostrará en vez del flash hasta que le demos click.

Finalmente para los que quieran ver como queda esto, les dejo la direccion de una fanpage que hice como prueba
http://www.facebook.com/pages/Arequipa/Vietnam-Restaurant/313742104162?v=app_4949752878

Se esta haciendo muy popular esto de la redes sociales, miren que hasta ya le ganó al XXX que tenía una muy sólida ubicación en la web desde sus orígenes

Para empezar facebook tienes tres tipos de página, los perfiles que todos tenemos cuando nos subscribimos, las community pages para crear un club o una asociación por las causas perdidas con foros y cosas así y las fan page que sirven muy bien para poner propaganda de nuestra empresa, links a nuestra página web, publicar ofertas que puedan ser fácilmente compartidas a travez de facebook o incluso mostrar minipost de twitter u otra fuente RSS.

Creando la página

Lo primero es logearse en facebook a nuestra cuenta y veremos una opción “Anuncios y páginas” al darle click aparecerán las páginas que hayamos creado o nos mostrará la opción de crear una nueva página, a su vez nos dará tres subtipos: negocio local, marca/producto y artista o figura pública.

Una vez creada nuestra página ya podremos promocionarla a travéz de anuncios dentro de facebook.

Personalizando

Aqui hay múltiples opciones, yo sugeriría primero configurar el muro allí podemos indicar quienes puedes postear, podemos permitir que suban fotos e incluso podemos indicar que pestaña se va a mostrar cuando entren usuarios no logeados, esta última opción me parece la más interesante ya que podemos hacer aparecer un banner publicitario, un video o cualquier animación flash visible para personas que no sean miembros de facebook, eso usando una aplicación llamada FBML de la que hablaré en otro post.

También podemos añadir eventos y esto podemos ligarlo con la promoción de ofertas así podemos enviar propaganda directamente a nuestros fan (clientes) sin gastar en un servicio de mass mailer.

Y podemos añadir fotos, aquí podemos separarlo en categorías, tal vez una primera categoría con referencia de nuestra ubicación, fotos de la portada y el local y sobre todo crear categorías con fotos de nuestros productos.

En cuanto a colores y apariencia, no son personalizables como en myspace o hi5 sin embargo con un poco de creatividad podemos añadir cosas interesantes, en la foto del perfil podemos subir un banner de 200px de ancho y unos 600 px de altura donde podemos poner nuestro logo, alguna promoción e información de nuestro negocio. Aquí les dejo el screenshot de una fanpage.

Conclusiones

• Es muy sencillo y gratis usar el poder de las redes sociales (en este caso facebook) para promocionar nuestro negocio
• Yo le veo a estas fan page más futuro que a los blogs de empresas ya que concentran la interacción de estos con herramientas de promoción que ningún blog cuenta
• Este tipo de páginas no reemplazan a la página oficial pero la complementan muy bien y generan un nuevo productos que podemos vender a nuestros clientes