SlideShows Drupal – (Secuencias ánimadas de contenidos o imágenes)

Slideshow es una transición animada de imágenes o textos, que se ha orientado principalmente a destacar contenidos relevantes y que funcionalmente permite al usuario la lectura de varios contenidos sin necesidad de llevar a cabo una recarga de la página.

Entre los portales que tienen SlideShows en sus páginas principales podemos nombrar algunos como CaracolTV, ColombiaTravel, Revista Shock, etc

Ejemplo de SlideShow empleado en el portal de MTV Uk

Slideshow drupal

SlideShow Drupal

Si bien hay cientos de plugins e implementaciones en JavaScript para lograr lo deseado, integrar estos plugins con gestores de contenido puede resultar en una extensa tarea de investigación y programación. Para facilitarnos a todos el trabajo en un futuro (Tanto a quienes nunca han hecho una implementación de este tipo, como a los que la hemos hecho y olvidamos de que manera concreta lo solucionamos).

A continuación se lista algunos módulos y herramientas que ofrece Drupal para SlideShows:

  1. Featured Content Slider: Brinda un bloque al que se le pueden añadir nodos o contenidos creados previamente. Su implementación es rápida y su despersonalización se hace a través de hojas de estilo (CSS). Una de las limitantes que tiene es que no se puede determinar el orden en que aparecen los elementos de una manera sencilla.
  2. Slideshow: Una opción de sencilla configuración, convierte todas las imágenes adjuntadas a un contenido en elementos de un slideshow. Solo trabaja con imágenes.
  3. Views Slideshow: ImageFlow: Una excelente opción cuando se quieren por ejemplo mostrar imágenes a manera de galería. Presenta un efecto estético muy agradable de zoom y una barra de desplazamiento en vez de botones (Al estilo del visor de carátulas de ITunes). Se integra con el módulo Views; para su implementación solo es necesario crear una vista que tenga campos de imagen y asignarle el estilo SlideShow – ImageFlow. Está orientado a la creación de galerías de imágenes únicamente.
  4. Dinamic Display Block: Es la opción más robusta, configurable y flexible. Se integra con el módulo views de modo que se tiene absoluto control sobre los campos que aparecen, el orden en el que aparecen los elementos (En combinación con el módulo nodequeue) y ofrece muchos estilos de visualización, desde un simple slide con imágenes y selectores con números, hasta selectores con imágenes en miniatura y pequeñas descripciones. A cambio de su funcionalidad se debe saber que se tiene que generar funciones de preprocesado en las plantillas que se esté utilziando y emplearle como mínimo unas dos horas de investigación. Se ofrecen tutoriales en la web del autor que describe como hacer slideshows sencillos y avanzados. Es la opción más cercana a lograr un slideshow como el de MTV Uk.

Cabe resaltar que sea cual sea la solución que se elija, viene bien tomar en cuenta si vale la pena generar un Slideshow para el sitio.

3 exelentes plugins jQuery para crear layouts responsive

Ahora es el turno para que los usuarios sean capaces de navegar de manera satisfactoria gracias al Responsive Design de Jquery, independientemente del dispositivo en el que se encuentren.

Es la solución para reducir la tasa de rebote, haciendo que el usuario pase más tiempo en la página por su facilidad de lectura y óptima visualización de los contenidos (se acabo la molestosa tarea de pellizcar la pantalla para hacer zoom).

A continuación se presentan 3 muy importantes plugins especialmente seleccionados de jQuery para realizar sliders, galerías, elementos de navegación, etc. Todo ello con la vista puesta en que dichos elementos tengan un comportamiento responsive y se adapten a la resolución del dispositivo desde el que serán visualizados.

Responsive Image Gallery with Thumbnail Carousel

Crea una galería de imágenes sensible, con un carrusel miniatura con Elastislide. Inspirado en “galería de usuario” , muestra una integración de Elastislide, Implementa una galería de respuesta que se adapta al ancho de la visión del dispositivo mobil. La galería tiene un interruptor de vista que permite verlo con el carrusel en miniatura o sin ella. También añade la posibilidad de navegar con el teclado.

Responsive Image Gallery with Thumbnail Carousel

plugin jquery

PhotoSwipe

Se puede integrar fácilmente en sus sitios web para móviles. Está muy optimizado para los navegadores móviles webkit. Sin embargo, si necesita un apoyo más amplio navegador de escritorio o si está utilizando jQuery Mobile, PhotoSwipe viene empaquetado con una implementación de jQuery también.

PhotoSwipe

PhotoSwipe

jQuery Masonry

jQuery Masonry es un plugin que nos permite organizar los elementos-hijos flotantes de un elemento principal CSS. Tiene una forma peculiar de ordenar, pues es como si se pusiera ladrillo por ladrillo en la construcción de un muro, tal como se observa en la imagen siguiente.

jQuery Masonry

jQuery Masonry

Agencia – AFKA

Página principal

Página principal agencia – AFKA

El sitio Web www.afkaphotos.com es el sitio desarrollado para la Agencia – AFKA por enbolivia.com. Es un sitio enfocado en publicitar las fotografías que son propiedad de la agencia, estas fotografías son consideradas entre las mejores de Boliva. El sitio tiene la posibilidad de agrupar fotografías por categorías y por sesión, cada fotografía cuenta con un nombre y descripción como pie de foto.

Una de las funcionalidades más novedosas implementadas sobre la Galería fotográfica es la Descarga con seguridad, mediante esta funcionalidad únicamente usuarios registrados podrán recibir el enlace de descarga enviado por el administrador del sistema una vez que se haya pagado el derecho de descarga.

Además el sitio de la Agencia AFKA cuenta con las siguientes características:

24 horasPagina restringida, solo para usuarios con cuenta de clientes donde se listan  las fotografías del día.

Archivo: Listado de sesiones fotográficas agrupadas por categorías, donde cada sesión cuenta con N fotografías en su detalle. El usuario cliente puede navegar y descargar la fotografía que mas le llamo la atención.

Fotógrafos: Listado de fotógrafos empleados de la agencia AFKA. El detalle muestra el currículum del fotógrafo juntamente con su galería de fotografías.

Noticias: Listado de noticias o acontecimientos ocurridos que son de importancia. En su detalle contiene su respectiva galería de fotografías.

Noticias del día: Listado de noticias registradas del día. En su detalle contiene su respectiva galería de fotografías.

Fotoreportajes: Listado de foto-reportajes donde en su interior se visualiza una descripción del foto-reportaje y su respectiva galería de fotografías.

Pagina representativa de la agencia

Pagina representativa de la agencia

Las fotografías pueden ser únicamente descargadas por clientes de la agencia.

Todas las paginas y fotografías cuentan con la opción de : Share, Like de facebook y twiter que permiten mayor publicidad e interacción para la pagina y las fotografías.

Las tecnologías empleadas para el sitio son: CSS3, jquery, 960 GS, Cufon, HTML5 Boilerplate,  prettyphoto, plugins Redes sociales Facebook y twiter, WSP administrador de contenidos.

Galería de fotografías de Fotógrafo AFKA

Galería fotografías de Fotógrafo AFKA

Existe 9 opciones con los cuales podemos integrarnos mas con la red social mas importante del mundo Facebook

Las herramientas de propósito general permiten gestionar varios servicios y plataformas desde un mismo lugar.

Es una opción interesante para comenzar a interactuar con redes sociales desde tu Pagina Web.

Facebook

1. Share On Facebook

Un plugin sencillo que permite a los usuarios compartir el contenido de tu blog con sus amigos a través de Facebook. Fácil de instalar y configurar.

2. WP Facebook Connect

plugin facebook

plugin facebook

Creado por el desarrollador de Facebook Adam Hupp. Permite que los usuarios se identifiquen con su cuenta de Facebook, publica la actividad que realizan en el muro y muestra la fotografía en los comentarios. Requiere crear una aplicación en Facebook para obtener una API y clave secreta.

3. Facebook Connect

sociable-facebook-connect

sociable-facebook-connect

Permite añadir algunas opciones interesantes como crear tu propia comunidad de usuarios. Desarrollado por Sociable.es, es otra opción para interactuar con Facebook Connect y así dejar los usuarios usen su cuenta de Facebook para identificarse y comentar en tu sitio. También requiere API y clave secreta para funcionar.

4. Simple Facebook Connect

La principal diferencia con otro plugins es que interactúan a través de Facebook Connect es que permite habilitar o deshabilitar opciones individualmente. Este diseño permite escoger si se quiere habilitar la opción de inicio de sesión, la opción de compartir contenido y mostrar la información a través de widgets. Interesante para tener un mayor control si no pensamos incorporar todas las funcionalidades.

5. Facebook Comments

Uno de los problemas más frecuentes cuando el mismo contenido se distribuye en diferentes lugares es la fragmentación de la interacción. Si publicás el contenido de tu pagina web en Facebook este plugin te permite copiar los comentarios que recibas a tu blog. De esta forma cualquier opinión que recibas desde Facebook quedará también reflejada en tu propia web.

6. Publish To Facebook

Otro plugin con una funcionalidad específica: publicar desde tu página web hacia Facebook. De esta forma evitar tener que agregar a mano las notas que vayas escribiendo. Funciona para WordPress.

Página: http://nothing.golddave.com/?page_id=111
Plugin para WordPress: http://wordpress.org/extend/plugins/publish-to-facebook/

7. Facebook Dashboard Widget

Esta opcio es para personas que no quieren estar cambiando de página para saber qué pasa en Facebook, este plugin muestra la actividad de tus amigos desde el tablero de administración de WordPress. Para fanáticos o gente muy ocupada:

8. Drupal’s Facebook Connect module

No todo es WordPress. Si tu sitio está basado en Drupal este módulo permite inteactuar con Facebook Connect para permitir la identificación de usuarios, mostrar tus actualizaciones de estado y compartir contenido con Facebook. Un detalle interesante: permite que los usuarios existentes asocien su cuenta con Facebook.

9. Facebook Connect Commenters

En este caso vincula Facebook con aquellos blogs que funcionan sobre Movable Type. Permite a los usuarios identificarse, comentar y publicar sus acciones en Facebook. Es Open Source y se encuentra en fase beta.

http://wibiya.conduit.com/

Personaliza el like de facebook de tu PAGINA WEB

Recientemente Facebook liberó una nueva característica que sustituye a la tradicional utilidad conocida a partir de los botones de compartir en Facebook.

Se trata del famoso “Me gusta”, que ahora reúne funcionalidades más avanzadas, las cuales, hacen de este botón un elemento imprescindible a la hora de ofrecerles a los usuarios, la posibilidad de compartir tus ideas en la red social de una manera mucho más óptima y atractiva.

El cambio consiste, en que cuando un usuario hace clic en el botón “me gusta” de algún post , automáticamente dicha acción se verá reflejada en el muro del usuario (y también en las novedades recientes del inicio), donde además del título de la entrada, se desplegará también la imagen del artículo en miniatura, una descripción corta y un campo para comentar.

Ahora podemos tener una mejor presencia en los perfiles de nuestros seguidores ya que desde nuestro sitio, podemos personalizar los enlaces compartidos a través de la implementación de etiquetas Meta específicas.

Si dichos meta-tags no son incluidos, Facebook los creará por defecto, arrojando resultados poco atractivos y por lo general imprecisos. En consecuencia, es necesario optimizar nuestro botón me gusta, de manera tal que los resultados generados impacten positivamente en nuestro sitio web.

¿Cómo optimizar esta nueva función?

Ahora no solo es cuestión de tomar el código que nos arroja Facebook para insertar el botón me gusta en la web, sino que es necesario personalizar la aplicación para poder tener control sobre la apariencia de los enlaces en los muros de nuestros fans.

Las etiquetas meta, deben incluirse en la cabecera de nuestro sitio, no sin antes cerciorarnos que ya contamos con botón me gusta en nuestro blog.colocando los tags antes de la etiqueta de cierre </head>. EL formato es el siguiente:

og:title:

Este es el texto que deseamos destacar como el titulo del enlace al contenido que nos ha gustado, el cual aparecerá en tono azul y en negrita.

<meta property=”og:title” content=”Titulo de la pagina generalmente es title de la pagina” />

og:url:

Esto es muy importante, ya que nos permite especificarle a Facebook, cual debe ser la URL (Permalink) a la que debe apuntar el enlace compartido.

<meta property=”og:url” content=”Enlace a mi sitio web o pagina que te ha gustado ” />

og:site_name:

Aquí especificamos el nombre del sitio con el que aparece el enlace.

<meta property=”og:site_name” content=”Nombre del sitio web ” />

fb:admins o fb:app_id:

Permite asignar un listado con los ID de facebook, de los usuarios que deseamos sean administradores de la aplicación para que puedan acceder a las estadísticas del enlace compartido. Para obtener estos ID, basta con pasar el cursor por encima de la imagen de perfil del usuario y de esta manera tomar el ID que aparece en el extremo inferior izquierdo del navegador.

<meta property=”fb:app_id” content=”IdFacebookUsuario ” />

og:image:

Esta es la imagen que deseamos mostrar junto al enlace. Si no especificamos este meta-dato, Facebook lo hará automáticamente, tomando imágenes aleatorias para cada enlace compartido.

<meta property=”og:image” content=”Imagen a mostrar en el muro”; />

Og:description:

Permite personalizar el texto descriptivo que aparece en el enlace. Si no especificamos este tag, Facebook tomará por defecto un extracto de nuestro artículo.

<meta property=”og:description” content=”Descripción que se quiere visualizar en el muro ” />

el resultado seria lo siguiente:

Redirección de dominio con tu htaccess

Direccionamiento de dominio con tu Htaccess 

Para no perder nuestro ranking y visitas de los buscadores. lo mas recomendable, si tienes acceso a tu archivo .htacces  es realizar el direccionamiento por este medio, el direccionamiento 301 es la recomendada para dicho proceso.

Para que sirve esto ?

Esto sirve para lograr el direccionamiento de tu Web y se deberia emplear la redireccion cuando el dominio del sitio se muestre de manera inadecuada o erronea en el browser  de la siguiente forma ejemplo. (http://misitio.com/) cuando en realidad debería de llevar “www” delante del dominio.

ejemplo: La siguiente url en el browser

http://misitio.com/  modificar y tenerlo adecuadamente como  http://www.misitio.com/

Para todas las re-direcciones tendrá que estar el mod_rewrite de apache activado en los casos en los que se use Rewrite y deberás tener acceso al archivo htaccess para poder modificarlo en cualquier caso.

Como realizar el direccionamiento  ?

En el archivo htaccess simplemente se debe adicionar la siguientes lineas de código de la siguiente manera:


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

Ventajas en el direccionamiento de dominio

  • El no perder nuestro ranking y visitas de los buscadores y
  • Tener de manera correcta nuestro dominio en el browser.
  • Evitarse el modificar código del sitio.

Quienes deberían de hacer esto ?

Esta modificación las pueden realizar los administradores de sistema como también programadores o personas con pocos conocimientos de programación.