drupal

Palms splattered sky with lasers ray in the background
Drupal 8 es la versión más reciente de drupal, incluyendo grandes mejoras con respecto a la versión 7 y dando un salto importante en tecnología, rendimiento y extensibilidad, su nuevo “core” basado en PHP orientado a objetos hace uso de algunas de las tecnologías más conocidas y exitosas como Symfony, Composer, Twig y muchas más, mejorando la experiencia del usuario y facilitando el trabajo de desarrollo. En este artículo vamos a mostrar la manera más simple y rápida de tener una web funcionando con drupal 8 en español en muy poco tiempo, en concreto será suficiente con 5 minutos (sin contar los tiempos de descarga/subida de ficheros ni el tiempo de instalación, que varía en función del servidor utilizado). Qué necesitamos Antes de comenzar necesitamos disponer de un entorno donde realizar la instalación que cumpla los requisitos técnicos para ejecutar drupal 8, lo más común sería un servidor con Apache 2.x, MySQL (5.5.3 o superior) y PHP (5.5.9 o superior), estos requerimientos son muy comunes por lo que prácticamente cualquier proveedor de hosting los ofrece dentro de su catálogo de servicios. Además existen algunas soluciones de instalación automatizada (Installatron es una de los más conocidas) que incluyen drupal dentro de su catálogo de aplicaciones. En caso de no disponer de una solución de estas características, los diferentes paneles de control que suelen ir incorporados a cada hosting (cPanel, DirectAdmin, etc.) facilitan mucho las diferentes tareas a llevar a cabo para la instalación. Algunos proveedores de hosting especializados como Pantheon.io incluso ofrecen una instalación automatizada completa haciendo posible crear un sitio en drupal 8 en pocos clicks. En cualquier caso, el sistema de instalación manual es muy sencillo, y las tareas a llevar a cabo son muy similares se use el panel de control del hosting que se use. Existen dos componentes imprescindibles para el funcionamiento de drupal: El código fuente del sistema. Consiste en una árbol de carpetas y ficheros (cuya gran mayoría están escritos en php) que deben ejecutarse en el servidor web, normalmente en una carpeta que se llama “public_html”, “www” o “htdocs”, tanto la ubicación como el nombre de esta carpeta depende de la configuración que el proveedor de hosting haya establecido en el sistema operativo del servidor, para este artículo vamos a suponer que dicha carpeta es “public_html” y nos referiremos a ella como la carpeta “raíz”. La base de datos. Toda la información que el código fuente necesita almacenar se guarda en una base de datos gestionada por el servidor de base de datos, la arquitectura de los sistemas depende de muchos factores y puede ser muy variada y en este artículo vamos a dar por hecho que tanto el servidor web como el de base de datos son el mismo, ya que es la configuración más común en los alojamientos de pequeño tamaño. Minuto 1. Preparar el código fuente Para preparar el entorno necesitamos incorporar los elementos que van a conformar nuestro sistema, primero obtendremos el código fuente necesario, realizando los siguientes pasos: 1. Descargar la última versión disponible de drupal 8 en la página oficial de drupal. Obtendremos un fichero comprimido con el árbol de carpetas y archivos que conforman el código fuente. 2. A continuación, ya sea mediante el administrador de archivos del panel de control del hosting o mediante un cliente FTP es necesario subir el fichero descargado a la carpeta raíz del servidor web. 3. El siguiente paso es descomprimir el fichero que acabamos de subir, normalmente el administrador de archivos del panel dispone de la opción “Descomprimir” o “Extraer”, si no disponemos de dichas opciones, entonces en lugar de subir el fichero comprimido, lo que haremos será descomprimirlo en nuestro equipo y subir a la carpeta raíz todos los archivos y carpetas con la misma estructura que tienen dentro del fichero comprimido. Una vez terminada esta operación, podemos borrar el fichero comprimido que habíamos subido inicialmente, de modo que en nuestra carpeta raíz quede de la siguiente forma: 4. Crear carpeta de traducciones. Este paso solamente es necesario si queremos instalar drupal en un idioma distinto del inglés, para ello es necesario crear la carpeta “sites/default/files/translations”, en la reciente creada estructura de carpetas navegaremos hasta “sites” > “default” y veremos que no existe la carpeta “files”, la creamos y dentro de ella creamos “translations”, para evitar problemas de permisos durante la instalación, le asignaremos permisos “777” tanto a la carpeta “files” como a “translations”, una vez finalizada la instalación se pueden modificar para aplicar una configuración más restrictiva. 5. Crear archivo settings.php. En la carpeta “sites/default” duplicaremos el archivo default.settings.php y le pondremos el nombre “settings.php” al archivo nuevo, también le asignaremos permisos “777”. Minuto 2. Preparar base de datos El segundo componente imprescindible de nuestra instalación es la base de datos, para ello es necesario crearla desde el panel de nuestro hosting, en la opción “Gestionar bases de datos” o “Gestión de MySQL” o algún nombre similar, el objetivo final es disponer del nombre de una base de datos y del nombre y contraseña de un usuario autorizado para operar con dicha base de datos, los pasos a seguir varían en función del panel de control que se utilice, pero suelen ser los siguientes: 1. Crear base de datos asignándole un nombre 2. Crear usuario de base de datos, asignándole la base de datos recién creada para que pueda operar con ella. En algunos paneles estas dos operaciones se realizan de manera simultánea desde la misma ventana de creación de base de datos. Minuto 3. Ejecutar instalador Es el momento de abrir con el navegador nuestra página web, si se ha incorporado correctamente el código fuente, aparecerá automáticamente la página de instalación en la que debemos ir seleccionando las opciones que más nos interesen para configurar nuestro sitio drupal: 1. Seleccionar idioma. En este caso seleccionaremos “Español” y pinchamos en “Save and continue” 2. Seleccionar perfil. Seleccionaremos la opción “Estándar”, ya que incorpora las características más comunes preconfiguradas, la opción “Mínimo” está indicada para usuarios avanzados que quieran construir el sitio desde cero personalizando todas las funciones. 3. Configuración de la base de datos. En esta ventana introduciremos los nombres de la base de datos y del usuario que habíamos creado, así como la contraseña que habíamos definido, normalmente las opciones avanzadas no es necesario cambiarlas a menos que la configuración del servidor así lo exija. Tras pulsar en “Guardar y continuar” comenzará la instalación de los componentes del sistema y posteriormente la importación de las traducciones necesarias al español, el tiempo de instalación puede variar en función de la velocidad y potencia del servidor que estemos utilizando, durante todo este tiempo, en la pantalla aparecerá una barra de progreso y un texto informativo indicando lo que se está haciendo y el porcentaje completado. Minuto 4. Configurar sitio Al terminar el proceso se mostrará una pantalla donde hemos de configurar la información básica del sistema: 1. Nombre e email del sitio 2. Nombre, email y contraseña del usuario administrador 3. País y zona horaria predeterminada 4. Avisos de actualizaciones Pinchamos en el botón de guardar y nuestro sitio drupal cargará por primera vez con la sesión iniciada para el usuario administrador. Minuto 5. Cambiar permisos de archivo settings.php Una vez terminada la instalación es el momento de cambiar los permisos del fichero settings.php, los permisos recomendados son 444, es decir, eliminar los permisos de escritura y ejecución para todos los usuarios, esto es muy importante ya que si no se hiciera estaríamos creando un enorme agujero de seguridad en nuestro sitio web. ¡Conseguido! Ya tenemos operativo nuestro sitio web en drupal 8. Con drupal 8 disponemos de un sistema con amplias posibilidades de configuración, podemos añadir nuevas funcionalidades instalando alguno de los miles de módulos disponibles en drupal.org o creando a medida lo que necesitemos e incorporar un tema personalizado que le dé un aspecto e imagen únicos. Dispondremos de un sistema fiable, seguro y escalable centrado en el rendimiento, no tendremos que preocuparnos de si responderá al ritmo de crecimiento de nuestro negocio, ya que drupal puede atender las necesidades tanto de un pequeño blog como de una web corporativa de ámbito global con miles de usuarios y millones de páginas vistas.   Fotografía principal: Nathan Dumlao
Cyclist in a lonely and natural road
El diseño web responsive ha pasado de ser un servicio extra para los clientes a casi una obligación. No se contempla ya la posibilidad de hacer una web sin seguir este paradigma. Y no solo en Drupal, sino en cualquier CMS. Mucha culpa de esta nueva pauta a la hora de diseñar la ha tenido Google, que en 2015 decidió dar un nuevo empuje a esta filosofía de diseño incluyéndolo como factor importante de medición para el posicionamiento SEO técnico. A día de hoy, las webs que están perfectamente adaptadas a cualquier dispositivo tienen mejor ranking en Google, mientras que las demás sufren penalizaciones. Pero Google no ha sido el único que ha impulsado esta tendencia. Los propios usuarios han sido más exigentes y han valorado muy positivamente las webs con este diseño, dejando de usar las que les resultaban incómodas de navegar desde sus pequeños dispositivos. Drupal no se ha quedado atrás en esta tendencia cada vez más asentada y la comunidad no para de generar módulos expresamente desarrollados para la creación de webs responsive.  Actualmente no hay ninguna barrera entre el diseño responsive y el desarrollo web en Drupal. Cualquier propuesta de diseño puede ser perfectamente ejecutada gracias a todos los módulos que existen. Incluso paradigmas de diseño como el "Mobile First", que consiste en diseñar primero las versiones para móvil de la web e ir escalando el diseño hasta la versión para desktop, son perfectamente compatibles con la creación de un sitio basado en Drupal. Aquí os dejamos una lista de los mejores módulos para diseño responsive en Drupal:   Responsive Menus El famoso “menú hamburguesa” es un elemento indispensable para cualquier diseño responsive de calidad. Lo ideal sería hacer un pequeño desarrollo combinando Jquery con Css, pero este módulo te ahorrará ese tiempo. Una vez instalado podrás configurar muchas opciones, como por ejemplo a qué medida de pixeles quieres que se active el menú o qué estilo quieres que tenga.   Responsive Images and styles Uno de los mayores problemas del diseño responsive es la carga de imágenes. Un peso muy alto en las fotos hace que la web cargue muy lenta en los dispositivos móviles. Este módulo nos permite crear diferentes estilos de imagen para que la web sirva automáticamente las fotos adaptadas al tamaño de la pantalla. Además es compatible con el módulo Media, lo que hará que las imágenes subidas con el editor de texto también puedan tener esta capacidad.   Fitvids No se a vosotros, pero a mi me resulta bastante molesto entrar en una web que integra videos y no poder darle al "play" porque aparecen maximizados. Con este módulo se soluciona este problema ya que, una vez configurado, cualquier video que subas a la web aparecerá adaptado al tamaño correcto de la pantalla.   FooTable Otro de los quebraderos de cabeza entre los diseñadores y los desarrolladores son las tan temidas (y odiadas) TABLAS. Este módulo por fin ataca el problema "tablas vs. móviles" y lo soluciona con una integración que convierte la tabla en un cuadro de opciones desplegables muy intuitivo y con gran usabilidad.   Display Suite Creado en origen únicamente para webs de diseño fluido, en la actualidad se utiliza prácticamente en todos los desarrollos, y es un firme candidato a entrar en la siguiente versión del Core de Drupal. Lo más útil es que puedes elegir el diseño de los templates de los nodos sin necesidad de theming. Pero además, te permite crear campos personalizados, como por ejemplo campos con código PHP o campos que muestren bloques ya existentes, e integrarlos en la estructura del nodo.   Flex Slider Con este módulo conseguimos mantener fluidas las imágenes de un slider para que no se deformen. Su velocidad de carga es muy buena y permite configurar su estilo y tiempo de reproducción. No es una solución completa ya que, dependiendo del formato de las imágenes, pueden llegar a verse muy pequeñas en móviles y dar problemas de usabilidad.   Fields Groups + Easy Responsive Tabs to Accordion La mayor virtud de este módulo es que nos permite crear grupos de campos sin necesidad de theming. Entre los estilos que puedes elegir para mostrarlos está el modo pestañas o “tabs”. Aquí es donde entran en juego las restricciones del responsive ya que las tabs, por lo general, no funcionan correctamente en móviles por exceso de tamaño. Con el submódulo Easy Responsive Tabs to Accordion podrás convertir las tabs en un sencillo menú vertical fluido. Es una de las mejores soluciones responsive de Drupal que hemos utilizado hasta ahora.   Backstrech Las imágenes de fondo o backgrounds que se utilizan en portadas o en banners, suelen ser otro de los quebraderos de cabeza del responsive. Al ser un diseño fluido, lo más normal es que la imagen se deforme a medida que el contenedor reduce su ancho. Pero con este módulo conseguiremos que la imagen se mantenga con el mismo alto y SIEMPRE centrada, sin deformarse. Como véis hay un montón de módulos que nos pueden hacer la vida más fácil a la hora de implementar un diseño responsive en nuestra web Drupal. Es importante tener en cuenta que habrá que hacer siempre algunos ajustes tanto en CSS como en Jquery para que todo quede como queremos, pero gracias a estos módulos conseguiremos una web 100% responsive hecha con Drupal.   Fotografía principal: Victor Xok
Lava flow touching the sea surface
Durante los últimos años, Drupal se ha consolidado como uno de los CMS’s más utilizados del mundo y está presente en los servidores de muchas empresas y organizaciones de primer nivel. Cansado de bucear en los típicos showcases desactualizados, que muestran subsitios y microsites de poca monta solo por el hecho de pertenecer a marcas de renombre, me he decidido a crear mi propia selección. Los sitios de la lista han sido seleccionados porque tienen un tráfico muy elevado, un desarrollo de alta complejidad o porque son la cara visible de marcas de relevancia mundial. No ha sido fácil, pero aquí va mi selección de los 80 sitios web más relevantes de la escena Drupal.   Tesla Motors El fabricante de coches eléctricos más puntero y moderno del mundo encabeza nuestra lista de empresas y organizaciones que usan Drupal. ​http://www.teslamotors.com/ Johnson & Johnson Fabricante de dispositivos médicos, productos farmacéuticos y de cuidado personal con más 230 empresas filiales y presencia en 175 países. http://www.jnj.com/ Virgin Sitio principal del conglomerado de empresas Virgin Group. https://www.virgin.com/ General Electric La mega corporación multinacional fundada por el inventor de la bombilla, Thomas Alva Edison. http://www.ge.com/ Burger King Ultra conocida cadena de comida rápida. http://www.bk.com/ Pfizer Multinacional farmacéutica. http://www.pfizer.com/ Mattel La empresa de juguetes más grande del mundo. http://play.mattel.com/ Time Warner Corporación multinacional dedicada a la explotación de medios de comunicacion, cine, tv y publicaciones diversas. http://www.timewarner.com/ NBA Una de las 3 competiciones deportivas más importantes del mundo. http://www.nba.com/ CSV Health Gigante norteamericano de la industria sanitaria y retail farmaceutico. https://cvshealth.com/ Nokia Multinacional finlandesa de telecomunicaciones y tecnología. https://nokia.com/ World Fuel Services Multinacional dedicada a servicios relacionados con el transporte de combustibles y una de las 100 empresas más grandes del mundo. https://www.wfscorp.com/ Qualcomm Empresa de técnología productora de hardware y software de diversa índole. https://www.qualcomm.com/ PBF Energy Gigante dedicado al mundo del petróleo y sus derivados.  http://www.pbfenergy.com/ Guerlain Multinacional de perfumes y demás productos de cosmética. http://www.guerlain.com/ Stanley Black & Decker La mítica marca de herramientas. http://www.stanleyblackanddecker.com/ Indra Sistemas Multinacional española de tecnología, consultoría, defensa y comunicaciones. http://www.indracompany.com/ Parrot Líder mundial en venta de manos libres que ahora también vende todo tipo de “juguetes” para niños y para adultos. https://www.parrot.com/ Clinique Multinacional americana de productos de cosmética. http://www.clinique.com/ National Collegiate Athletic Association Asociación que se encarga de la mayoría de los programas y becas deportivas en los EEUU. Está compuesta por más de 1200 instituciones y genera unos ingentes beneficios cada año. http://www.ncaa.com/ PGA La asociación de golfistas profesionales de América y el circuito de golf más importante de Norteamerica tienen su sitio web en Drupal. http://www.pga.com/ The Weather Channel Empresa de información meteorológica con diversas cadenas de TV y sitios web. http://www.weather.com/ Organizaciones Gubernamentales, ayuntamientos, y empresas públicas Naciones Unidas Organización supranacional para promocionar la cooperación internacional... o eso dicen ellos que hacen. http://www.un.org/en/index.html The White House Portal de la presidencia de los Estados Unidos. http://www.whitehouse.gov/ New York State  Sitio oficial del Estado de New York. http://ny.gov/ City of Boston Portal municipal del Ayuntamiento de Boston. https://www.boston.gov/ City of Los Angeles Portal municipal de la ciudad de Los Angeles. https://www.lacity.org/ City of London Ayuntamiento de la ciudad de Londres. http://london.gov.uk/ Gobierno de Francia Portal del Gobierno de Francia. http://www.gouvernement.fr/ Gobierno de Bélgica Portal del Gobierno de Bélgica. http://www.belgium.be/ Parlamento de Nueva Zelanda Portal del Parlamento de Nueva Zelanda. https://www.beehive.govt.nz/ National Institutes of Health Instituciones del Gobierno de los Estados Unidos dedicadas a la investigación médica.  https://www.nih.gov/ Sydney Web de turismo de la ciudad de Sydney. http://www.sydney.com/ SNCF La compañía estatal francesa de ferrocarriles. http://www.sncf.com/ Las principales universidades del mundo Harvard University La mejor universidad del mundo, según la mayoría de clasificaciones de universidades. http://www.harvard.edu/ Oxford University Probablemente la univerdad más famosa del mundo, con más de 1.000 años de historia. http://www.ox.ac.uk/ The George Washington University  Otra gran universidad de los EE.UU. https://www.gwu.edu/ University of Calgary Universidad de Calgary, una de las más prestigiosas de Canadá. http://www.ucalgary.ca/ Yale University Una de las instituciones educativas con más prestigio del mundo. http://www.yale.edu/ Columbia University Otra de las grandes universidades de los EE.UU. http://www.columbia.edu/ MIT Media Lab Laboratorio del MIT dedicado a proyectos de tecnología, diseño y multimedia. http://www.media.mit.edu/ Medios de comunicación, musica y entertaiment The Economist Periódico económico de tirada mundial. http://www.economist.com/ Le Figaro El periódico más antiguo de Francia y uno de los 3 grandes del país. http://www.lefigaro.fr/ Independent Periódico independiente del Reino Unido (desde hace poco, sólo tiene edición digital). http://www.independent.co.uk/ NBC Gigante de radio y TV. http://www.nbc.com/ MSNBC Uno de los canales de noticias más importantes del mundo. http://www.msnbc.com/ MTV UK Sitio de la cadena musical en el Reino Unido. http://www.mtv.co.uk/ Popular Science Todo un clásico entre los frikis de la ciencia. http://www.popsci.com/ Patch Portal independiente de noticias. http://patch.com/ El Espectador Mítico periodico Colombiano. http://www.elespectador.com/ Elmogaz Portal de noticias Egipcio. http://www.elmogaz.com/ Warner Bros Gigante del mundo del cine, la música y la televisión. http://www.warnerbros.com/   Turner Broadcasting System  Empresa que gestiona los canales y grupos de televisión que son propiedad de Time Warner.  Algunas de sus marcas son CNN, TBS, TNT, Cartoon Network, Boomerang y TCM. http://www.turner.com/ Entertaiment Magazine online sobre cine, series, música y tv. http://www.ew.com/ Health Magazine de salud que ocupa un puesto destacado en el ranking de tráfico mundial. http://www.health.com/ Windows Central Magazine sobre el sistema operativo Windows. http://www.windowscentral.com/ Linux Journal Y ahora su homónimo para Linux, aunque hace tiempo que pasaron sus tiempos gloriosos. https://www.linuxjournal.com The Grammy’s Los precios Grammy de la Academia Nacional de Artes y Ciencias de la Grabación. http://www.grammy.com/ The Beatles Official Website  The Beatles usan Drupal, Yoko Ono usa wordpress.  http://www.thebeatles.com/ Organizaciones no gubernamentales Oxfam Sitio principal del conjunto de organizaciones para combatir la probreza en el mundo. https://www.oxfam.org/ Médicos sin fronteras Una de las ONGs más grandes del mundo. http://www.msf.org/ World Food Programme Sitio del programa de las Naciones Unidas para combatir el hambre en el mundo. http://www.wfp.org/ Electronic Frontier Foundation Fundación para los derechos humanos en el mundo digital. https://www.eff.org/ Los principales Museos del mundo Louvre El museo más importante del mundo. http://www.louvre.fr/ Reina Sofia Museo de arte contemporáneo de Madrid. http://www.museoreinasofia.es/ Tate Gallery Museo Nacional Británico de Arte Moderno. http://www.tate.org.uk/ The Metropolitan Museum of Art Subsitio del Museo Metropolitano de New York. http://82nd-and-fifth.metmuseum.org/ Sitios sobre religión y espiritualidad Bible.org Los caminos de Drupal son inexcrutables. https://bible.org/ Al Islam Plataforma líder para estudiar el islam online. https://www.al-islam.org/ y para terminar unas cuantas organizaciones, startups y empresas de diversa índole Icann Whois La herramienta para hacer whois de la ICANN usa Drupal para tales menesteres. http://whois.icann.org/en Real Academia de la Lengua Española La Real Academia de la Lengua Española confía también en Drupal para defender el Español.  http://www.rae.es/ Zoho Multinacional hindú que provee cantidad de herramientas en la nube para empresas. https://www.zoho.com/ Typepad Plataforma de blogging de capa caída desde hace años pero todavía con muchísimo tráfico. http://www.typepad.com/ Bodeboca El club y tienda de vino online más grande de España. http://www.bodeboca.com/ Mint Plataforma de gestión de finanzas personales. https://www.mint.com/ Box Box es un servicio de herramientas para trabajar en la nube. https://www.box.com/ Taboola Plataforma de marketing de contenido que se ha convertido en uno de los sitios Drupal con más tráfico del mundo. https://www.taboola.com/ Legacy.com El mayor obituario digital del mundo. Tiene un tráfico brutal y Alexa le atribuye la posición 1363 del mundo. http://www.legacy.com/ Rackspace Una de las mayores empresas de hosting del mundo. https://www.rackspace.com/ Magento Uno de los ecommerce más potentes del mundo usa Drupal para su web comercial. https://magento.com/   Fotografía principal: Sebastian Gabriel
Red Moon
Un sistema de archivos organizado es más eficiente y permite realizar búsquedas más rápidas y sencillas. Un servidor web consume muchos recursos para encontrar un fichero en una carpeta con 1.000.000 de archivos, sin embargo si en la carpeta hay 1.000 subcarpetas con 1.000 ficheros cada uno, el acceso será mucho más rápido. El número máximo de ficheros por carpeta para obtener la mayor eficiencia dependerá del hardware disponible en el servidor, aunque en general no conviene que sobrepase los 10.000 elementos. La carpeta files Drupal dispone de un sistema público de archivos donde los módulos pueden guardar todos los ficheros necesarios. Para configurarlo estableceremos en admin/config/media/file-system la ruta de la carpeta que funcionará como raíz. El valor por defecto para esta ruta es sites/default/files, aunque puede configurarse donde más nos interese. Hacer que la carpeta files tenga una estructura de árbol eficiente es muy sencillo, ya que los módulos que utilizan el sistema público de archivos disponen de opciones de configuración para crear subcarpetas donde almacenar los archivos. La mayoría de los ficheros que se almacenan suelen ser imágenes o documentos que los usuarios cargan en los campos de los tipos de contenido cuando se crean los nodos, por lo que la ruta final donde se guardará el archivo dependerá de la configuración que se haya establecido en cada campo. Algunos de los módulos incluidos en el core de drupal que permiten la creación de campos para subir archivos son Field, File e Image, en estos campos se puede configurar una ruta dentro de la carpeta files para poder tener separados los archivos de cada uno. File (Field) Paths te ayuda a organizar A veces no es suficiente con tener una carpeta por campo, por lo que es necesario crear también una estructura de subcarpetas con más profundidad de modo que no se sobrepase el número máximo de ficheros por carpeta que hayamos establecido como límite. La herramienta perfecta para crear esta estructura es el módulo File (Field) Paths, que permite configurar un patrón para la ruta de almacenaje del archivo utilizando valores del nodo mediante el módulo Token. Una vez instalado el módulo aparecen nuevas opciones en la configuración de cada campo. La más interesante es el campo “ruta de archivos”, donde podemos escribir un patrón que se usará para generar la ruta final en la que se almacenará el fichero. Un ejemplo de patrón podría ser: main-image/[node:created:custom:Y]/[node:created:custom:m]/[node:created:custom:d]/ Con este patrón un archivo llamado example.jpg cargado en un campo llamado “Main Image” de un nodo creado el 25 de Junio de 2016 se guardaría en la carpeta “sites/default/files/main-image/2016/06/25/example.jpg” El módulo también ofrece otras opciones adicionales como eliminar las barras (/) o transliterar y limpiar los valores de los tokens para que hacer que las rutas sean amigables y uniformes. Si lo hubiera sabido antes… En muchas ocasiones el sistema se ha creado sin tener en cuenta todos estos consejos y por ello todos los ficheros se encuentran en la raíz de la carpeta files, poco a poco esa carpeta se va llenando y llega un momento en el que se produce un “cuello de botella” en la gestión del sistema de archivos por parte del servidor condicionando el rendimiento general de la web. Llegados a este punto se puede realizar la instalación y configuración del módulo File (Field) Paths, que además nos proporciona varias opciones muy útiles para evitar problemas y facilitar la gestión de los ficheros existentes: Create redirect. Crea automáticamente una redirección entre el fichero antiguo y el nuevo. Retroactive update. El sistema moverá todos los ficheros existentes a la ruta que debería tener en función del patrón establecido en el campo. Active updating. El sistema no moverá los archivos existentes en el momento de guardar el campo, sino que cada vez que un nodo se edite y guarde, el sistema moverá el fichero a su nueva ubicación si es necesario. Es importante tener en cuenta que la ubicación física de los archivos existentes se va a modificar, por lo que estas opciones hay que usarlas con precaución para evitar la aparición de enlaces rotos. Si el número de ficheros existentes es muy grande, no es recomendable marcar la opción "Retroactive update", ya que puede lanzar un proceso que tarde demasiado y no sea capaz de finalizar en el navegador. En estos casos la configuración recomendada es marcar "Active updating" y posteriormente realizar un proceso de actualización controlada de los nodos cuyas imágenes queramos reorganizar. Este proceso se puede hacer con un pequeño módulo que cree una cola de proceso en la que cada nodo se cargue con node_load() y se guarde con node_save(), al guardar el nodo todas las imágenes que tenga en sus campos serán movidas automáticamente a su nueva ubicación. Mejor prevenir que curar Tener que reorganizar imágenes de un sitio web ya en funcionamiento es una potencial fuente de problemas, sin embargo, en las primeras fases del desarrollo es muy rápido y fácil crear una estructura organizada para la carpeta files, no retardará el proyecto y disponer de un sistema así es mucho más ventajoso aunque el número de archivos de la web crezca indefinidamente. Siempre compensará dedicar unos minutos de desarrollo a este asunto, ya que por muy poco tiempo obtenemos grandes beneficios a medio y largo plazo. En el inicio de un proyecto web casi nunca se sabe cómo va a evolucionar, pasado el tiempo puede desaparecer, mantenerse o crecer hasta convertirse en un proyecto con millones de usuarios, por lo que es importante realizar un diseño y desarrollo que permita ser escalable tanto como sea necesario.   Fotografía principal: Anders Jilden
Pink clouds and stars
El SEO (Search Engine Optimization) es un conjunto de técnicas muy diversas enfocadas en un objetivo común: hacer que un sitio web aparezca en los primeros puestos de las páginas de resultados de los buscadores. El éxito de la página depende en gran medida de la posición que ocupe, ya que la mayoría de los usuarios no pasan de la primera página de resultados. Incluso dentro de esta primera página hay grandes diferencias en función del puesto: entre el segundo y el octavo puede haber varios miles de clicks de diferencia. Cada página de resultados varía en función de las palabras que el usuario ha tecleado, pero no solo eso: Google, Bing y el resto de buscadores modifican esos resultados en función de quién es la persona que busca gracias a los datos de navegación que van recogiendo sobre la actividad que desarrolla. Para complicarlo aún más, el algoritmo utilizado para establecer la clasificación es secreto (a la empresa propietaria de cada motor de búsqueda no le interesa que nadie sepa cómo funciona internamente su sistema), por lo que la labor del consultor SEO es muy complicada y en algunos casos, se basa en la experiencia acumulada tras muchos ensayos realizados con el infalible método de prueba/error. Por si fuera poco, los resultados de cada cambio, por pequeño que sea, suelen tardar bastante tiempo en hacerse patentes, lo que obliga a tener una estrategia de medición y análisis en ocasiones más compleja que las propias acciones correctoras. En cualquier caso, hay una serie de técnicas básicas que cualquier página web debe llevar a cabo, no para ser los mejores, sino más bien para no ser los peores, ya que una página incorrectamente configurada a nivel de SEO puede perjudicar la posición en los resultados del mismo modo que las técnicas más avanzadas pueden mejorarla. En drupal existen multitud de módulos para gestionar las diferentes técnicas de SEO disponibles, pero cualquier instalación al menos debería tener los siguientes: Pathauto. Es uno de los módulos más utilizados en drupal. Permite crear patrones para la construcción del alias de las URL’s del sitio web por tipo de contenido, usuario o vocabulario de taxonomía, de modo que cada uno de los alias incluya contenido relevante para la búsqueda. Es importante utilizarlo en conjunción con el módulo Transliteration y activar la configuración de clean url’s incluida en el core de drupal. Custom Breadcrumbs. Para mejorar el formato y el código de las migas de pan. Metatag. Gestión de las etiquetas “meta” que van incluidas en cada una de las páginas del sitio web. Se pueden configurar los diferentes tipos de meta-tags existentes así como el “page title”. Tiene un sistema en cascada que permite establecer unas etiquetas globales e ir especificando por tipo de contenido, usuario, vocabulario de taxonomía, incluso por nodo o término. Cuanto más específica sea esta configuración, habrá más posibilidades de que tenga éxito. Global Redirect. Realiza redirecciones automáticas en función de unas normas para prevenir que existan varias URL’s apuntando al mismo contenido, una práctica que está considerada perjudicial para el SEO. Redirect. Este módulo facilita la gestión de redirecciones para evitar errores 404 y que se pierda el posicionamiento en caso de que haya que realizar algún cambio en un alias. XML Sitemap. Con este módulo se facilita la gestión del sitemap en formato XML, estableciendo prioridades por tipo de contenido o vocabulario de taxonomía, y permitiendo además el envío automatizado a algunos motores de búsqueda. Alinks. Para crear enlaces automáticos en el contenido que apunten a otras zonas del sitio web. Link checker. Práctico módulo para revisar la existencia de enlaces rotos. Hay otros muchos módulos que pueden ayudar a mejorar el SEO de un sitio web, en este artículo hemos destacado los más básicos, pero una simple búsqueda en drupal.org con la palabra clave SEO devuelve más de 400 módulos disponibles, algunos muy específicos y otros más generales, pero todos disponibles para ser utilizados. Como hemos comentado anteriormente, en el SEO es tan importante llevar a cabo técnicas correctas como saber evaluar el funcionamiento de las mismas. Hay otro conjunto de módulos que funcionan como herramientas para la medición, el análisis de la evolución y la extracción de información que pueden servir para mejorar: Google Analytics, SEO Tools, Yoast SEO for Drupal, SEO Checklist, SEO Compliance Checker, Content Optimizer, etc. Por supuesto lo más importante del SEO no son los módulos que se utilizan sino la configuración que se establece con ellos, estos módulos no van a decidir qué tipo de técnicas es conveniente aplicar: es responsabilidad del arquitecto del sitio, del desarrollador, del consultor SEO, del gestor de contenidos y de todos los que participan en un sitio web, pero tener buenas herramientas siempre facilita la consecución de los objetivos planteados.   Fotografía principal: Nacho Rochon
Magnific Popup en Drupal
Los popups son una excelente y bella (en ocasiones) forma de mostrar al usuario contenido relacionado o secundario sin necesidad de tener que recargar la página, existen muchos métodos y plugins que permiten realizar este efecto, todos tienen sus ventajas e inconvenientes que los hacen mejores o peores en función del uso que queramos hacer de ellos, no obstante, en este artículo vamos a mostrar uno de los mejores, o al menos, de los más versátiles: Magnific Popup, un plugin que permite su uso en multitud de situaciones diferentes: galerías, ventanas modales, cargando formularios o contenido vía AJAX, etc., siendo además rápido, ligero (dispone de una herramienta para generar una versión adaptada a nuestras necesidades), responsivo y fácil de modificar mediante CSS, ¿qué más podemos pedir? Un ejemplo sencillo de como incorporar este plugin en Drupal y sacarle un gran partido consiste en utilizarlo dentro de una view, para este ejemplo vamos a suponer que tenemos una vista de contenido consistente en un listado de nodos de un tipo de contenido "producto", la vista tendrá el nombre "productos" con un display de tipo "bloque" que muestra el la imagen el nombre de un producto, si el usuario pincha sobre él, se abre un popup con información detallada sobre dicho producto. El primer paso es configurar la view que vamos a utilizar, añadiremos inicialmente 2 campos más el Nid de cada producto que se utilizará como identificador único del popup de cada producto:     Nid (nombre de sistema: nid)     Nombre del producto (nombre de sistema: title)     Descripción del producto (nombre de sistema: descripcion) El objetivo es que el campo "Nombre" tenga un enlace que active el popup, y dentro del popup debe salir el contenido de la "Descripción", para ello haremos lo siguiente: 1. Marcamos la opción “Excluir de la presentación” del campo “Nid” y desactivamos que esté enlazado al nodo, el objetivo es que salga el id del nodo en formato de texto plano para reutilizarlo en los otros campos. 2. Marcamos la opción "Reescribir la salida de este campo" en el campo "Nombre" y escribimos el siguiente código: <div class="popup-trigger"> <a href="#popup-[nid]">[title]</a> </div> 3. Marcamos la opción "Reescribir la salida de este campo" en el campo "Descripción" y escribimos el siguiente código: <div id="popup-[nid]" class="inline-popup mfp-hide"> [descripcion] </div> Con esto tenemos la vista terminada, por supuesto se puede cambiar este HTML para adaptarlo a las necesidades de cada uno, lo que hay que tener en cuenta es que debe haber un enlace que apunte al “id” del popup, y que ese div debe tener las clases definidas para el uso del plugin, en este ejemplo son “inline-popup mfp-hide” pero pueden variar en función de las opciones que queramos utilizar, todas las opciones válidas están disponibles en la documentación. El segundo paso para que funcione el popup consiste en hacer que se cargue el fichero javascript del plugin y que se inicialicen los popups en nuestra view; existen varias formas de incorporar código js a una web de drupal, en este ejemplo vamos a utilizar una función de preprocesado para cargar el código únicamente cuando la view en la que lo hemos incorporado se vaya a mostrar, añadiremos dicha función al fichero template.php del tema: /** * Añadir Magnific Popup a bloque de view. */ function THEME-NAME_preprocess_views_view(&$vars) { $view = &$vars['view']; if ($view->name == 'productos' && $view->current_display == 'block') { // add needed javascript drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/jquery.magnific-popup.min.js'); drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/inicio-popup.js'); // add needed stylesheet drupal_add_css(drupal_get_path('theme', 'THEME-NAME ') . '/magnific-popup.css'); } } Los ficheros jquery.magnific-popup.min.js y magnific-popup.css pertenecen al código del plugin, el fichero “inicio-popup.js” es un fichero que crearemos a medida para lo que necesitemos, el código para este ejemplo sería el siguiente: (function($) { Drupal.behaviors.inicioPopup = { attach : function(context, settings) { $(".view-productos .title > a").magnificPopup({ type:"inline", removalDelay: 300, mainClass: "mfp-fade", midClick: true }); } }; })(jQuery); Nota: Tanto en el código de la función de preprocesado como en este js estamos teniendo en cuenta que la view que hemos creado se llama “productos” Con esto el popup estaría totalmente operativo, pero es necesario añadir algo de CSS a la hoja de estilos general del tema para que tenga un buen aspecto. .inline-popup { position:relative; width:auto; max-width:650px; margin:20px auto; background-color:#fff; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; padding:30px; } /* Overlay ------------ */ .mfp-fade.mfp-bg { /* at start */ opacity:0; -webkit-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out; transition:all 0.15s ease-out; } .mfp-fade.mfp-bg.mfp-ready { /* animate in */ opacity:0.8; } .mfp-fade.mfp-bg.mfp-removing { /* animate out */ opacity:0; } /* Content ------------ */ .mfp-fade.mfp-wrap .mfp-content { /* at start */ opacity:0; -webkit-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out; transition:all 0.15s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { /* animate it */ opacity:1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { /* animate out */ opacity:0; } Por supuesto a partir de aquí se puede cambiar todo lo necesario para que haga honor a su nombre y sea ¡Magnífico!   Fotografía principal: Noah Buscher
Diana tiro con arco olimpico representado el remarketing de Google
El remarketing de Google es una herramienta muy poderosa para mostrar anuncios de AdWords a visitantes de nuestro sitio web en función de una serie de reglas que podemos personalizar. El módulo webform de drupal es uno de los más utilizados, especialmente para crear formularios de contacto, solicitud de información, inscripciones, etc.. En este artículo vamos a explicar cómo hacer un módulo que nos permita hacer remarketing a los usuarios que han enviado un formulario con un valor concreto seleccionado, para ello crearemos un callback en nuestro módulo encargado de hacer que la url de confirmación de envío del webform incluya un parámetro único indicador del producto, servicio o tema sobre el que queremos hacer remarketing, vamos a utilizar como ejemplo un webform que tenga un componente selector de productos en el que hay 3 opciones: 1 | Premium 2 | Avanzado 3 | Básico El objetivo es que la página de confirmación del envío del webform incluya el código de la selección sobre el que el usuario ha solicitado información de modo que podamos configurar nuestros AdWords sabiendo sobre qué producto está interesado el usuario. Para ello estableceremos una página de confirmación con una parte fija y una segunda parte dinámica que incluirá el producto seleccionado en el webform, de modo que las URL’s posibles en nuestro ejemplo serían: /envio-realizado/1 /envio-realizado/2 /envio-realizado/3 Adicionalmente debemos configurar el webform para que utilice como página de confirmación la URL personalizada que vamos a crear y le pase como parámetro el valor que el usuario ha seleccionado en el selector del formulario. Lo primero que debemos hacer es crear el módulo que, mediante el hook_menu de drupal, va a proporcionar la URL personalizada y el callback que gestionará esas peticiones, en el ejemplo que vamos a seguir lo llamaremos “webform_remarketing”: /** * Implements hook_menu(). */ function webform_remarketing _menu() { $items = array(); $items['envio-realizado/%'] = array( 'title' => 'Submission received', 'description' => 'Confirmation page for webform', 'page callback' => 'webform_remarketing _confirmation_page', 'page arguments' => array(1), 'access arguments' => array('access content'), ); return $items; } Una vez que tenemos creada la opción de menú, debemos agregar la función definida en el page callback que será la que proporcione el contenido que se mostrará en pantalla: /** * Confirmation page menu callback. */ function webform_remarketing _confirmation_page ($producto) { return . t('Submission received') . ; } Esta función es un ejemplo con fines didácticos, por lo que simplemente muestra un mensaje sencillo, lógicamente lo habitual es querer mostrar más contenido, para ello es conveniente recordar que todo el contenido que se muestra al usuario debe utilizar una función de theming para que pueda ser fácilmente modificable por el desarrollador del sitio. El siguiente paso que necesitamos dar es modificar la configuración del webform para que utilice la página de confirmación que hemos creado en nuestro módulo y le pase el valor seleccionado por el usuario, para ello, editaremos las opciones del webform en la pestaña “Ajustes de formulario”; entre otras opciones, hay un apartado llamado “Dirección de redirección” que nos presenta 3 opciones, debemos seleccionar “URL personalizada” e introducir la URL que hemos definido en nuestro módulo y hacer que el propio webform pase en la segunda parte de la URL el valor marcado por el usuario en el componente del selector de productos, para ello utilizamos el token correspondiente, que en este caso sería [submission:values:?] donde “?” hay que sustituirlo por el form_key del componente, suponiendo que dicho valor fuera “producto”, lo que debemos escribir en el campo sería: envio-realizado/[submission:values:producto] Y con esto hemos conseguido nuestro objetivo, cuando un usuario rellena el formulario y solicita información sobre un producto, la URL de confirmación incluye el código de dicho producto, por lo que ya podemos configurar las opciones de remarketing utilizando esas URL’s en AdWords y configurar nuestras campañas.
Cómo crear un bloque de contenido relacionado con views en Drupal 7
Como suele ser habitual en Drupal, siempre hay varias formas para resolver un problema. En este caso queremos hacer un bloque de contenido relacionado para que se muestre en un nodo, por ejemplo el típico bloque de noticias relacionadas que se muestra en el nodo de una noticia. Lo que necesitamos es crear una view que muestre noticias del mismo término de taxonomía que el nodo en el que se mostrará el bloque y, por supuesto, que no nos muestre el mismo nodo en el que estamos. Para ello debemos seguir los siguientes pasos: 1.- Creamos una view con un display tipo bloque. 2.- Añadimos los campos que queremos que aparezcan como título, fecha y foto. 3.- Añadimos un filtro contextual para excluir el nodo actual. Hacemos click en “Añadir Filtro contextual” Seleccionamos “Contenido: Nid (El ID del nodo)”. Ahora cuando el filtro no está disponible seleccionamos “Proporcionar valor predeterminado” y en Tipo seleccionamos “ID de contenido desde URL” Por último vamos a la sección “Más” y marcamos la casilla “Excluir - Si se marca, los números indicados para el filtro serán excluidos en lugar de limitar la vista”. 4.- Añadimos un segundo filtro contextual:   Seleccionamos “Contenido: Tiene un id de un término de taxonomía“. Cuando el filtro no está disponible seleccionamos “Proporcionar valor predeterminado” y en Tipo seleccionamos “ID de término de taxonomía desde la URL” y después marcamos la casilla “Load default filter from node page, that's good for related taxonomy blocks” y seleccionamos el vocabulario que queramos. Si no carga la lista de vocabularios, pincha en guardar y vuelve a hacer click en el filtro conceptual. 5.- Ahora ya solo queda ir a la configuración de bloques y ubicar el bloque en la región y el tipo de contenido que nos interese. Y ya tenemos nuestro bloque de contenido relacionado con views en Drupal 7.   Fotografía principal: Nicolas Hoizey
Placeholder text form
Con la llegada de HTML5 hace unos años ha aparecido la posibilidad de añadir marcadores de posición o placeholders. El placeholder es el texto que aparece dentro de un campo de texto en un formulario antes de que el usuario lo complete, sirviéndonos de gran ayuda para clarificar qué tipo de información hay que introducir en dicho campo. Por ejemplo, el siguiente código HTML: <form> <label for="search">Suscribete al newsletter</label> <input id="news" type="text" placeholder="Introduce tu email" name="seach"> <button id="subscribebutton" type="submit">Enviar</button> </form> Muestra algo como esto: Añadir placeholders a los formularios es una buena práctica que mejora de la usabilidad y por supuesto la experiencia de usuario. El W3C recomienda usar el placeholder siempre junto con la etiqueta Label, ya que supuestamente son complementarias, pero en Wild Wild Web a menudo usamos solo una de las dos, ya que nos resulta redundante usar ambas. El soporte para placeholder solo será visible en los navegadores web más modernos pero se suele implementar un fallback jquery para conseguir la misma funcionalidad en los navegadores antiguos. Existen varias formas de añadir el placeholder a un campo de un formulario en Drupal 7. A continuación destacamos 4 de ellas que consideramos las más útiles. Módulo Form Placeholder https://www.drupal.org/project/form_placeholder Este módulo nos permite añadir placeholders a cualquier formulario del sitio desde la administración Drupal. Módulo Webform Hints https://www.drupal.org/project/webform_hints Este módulo permite incorporar placeholders automáticos a cualquier textfield, testarea, select list y email field de formularios creado con el módulo Webform (https://www.drupal.org/project/webform) Además, este módulo viene con soporte para navegadores antiguos que no soportan el attributo placeholder e implementa el fallback mediante jQuery. Módulo Field placeholder https://www.drupal.org/project/field_placeholder Permite añadir el atributo placeholder a cualquier campo de una entity drupal, como campos de un tipo de contenido, de términos de taxonomía, de usuarios, etc. Al activarlo aparece una nueva opción para introducir los placeholder al editar o crear un campo. Función en el template.php Por último el método más técnico un pelín más avanzado porque implica toda código pero resulta el más potente de todos. Consiste en añadir la siguiente función al archivo template.php de nuestro theme. function YOURTHEMENAME_form_alter( &$form, &$form_state, $form_id ) { if (in_array( $form_id, array( 'user_login', 'user_login_block'))) { $form['name']['#attributes']['placeholder'] = t( 'Username' ); $form['pass']['#attributes']['placeholder'] = t( 'Password' ); } } Este caso introduce un placeholder para el login form. Recuerda cambiar en el nombre de la función YOURTHEMENAME por el nombre de vuestro theme, y también cambiar el id del formulario y el nombre del campo sobre el que queremos realizar el cambio. Más información sobre cómo obtener el id de un formulario.
Rocket launching
Optimiza el rendimiento de tu sitio web Drupal con Boost, un módulo que provee una caché para las páginas estáticas de Drupal permitiendo así una significativa mejora del rendimiento para sitios que reciben tráfico preferentemente de usuarios anónimos. Es la mejor opción para mejorar y optimizar nuestros sitios alojados en hostings compartidos. Boost almacena y comprime (gzip) el contenido html, xml, ajax, css y javascript.  En este vídeo-tutorial explicamos cómo instalar y configurar el módulo Boost en Drupal 7.     Esperamos que os haya servido de ayuda, podéis dejar vuestros comentarios o dudas y trataremos de responderos a todos.
Mandrill para Drupal
El correo electrónico es una de las herramientas más poderosas de un sitio web para fortalecer el servicio al cliente y aumentar la confianza de los usuarios, tanto en el sitio como en la empresa. Los emails transaccionales pueden mejorar la experiencia del usuario si se usan de forma correcta, realizando la entrega de forma inmediata y con un diseño a la altura de la marca y la web. ¿Qué son los emails transaccionales? Son aquellos que no son enviados de forma masiva (newsletters), o dicho de otra forma, son aquellos que son enviados de forma individual en base a una acción o falta de acción de un usuario (notificaciones). Ejemplos de emails transaccionales son el típico email de alta de usuario, el recordatorio de contraseña de tu cuenta de Badoo, el pedido del billete de avión a Marrakesh, Fulano ha comentado en tu muro de Facebook, Mengano ha visto tu perfil en Linkedin, te has unido al grupo de sadomasoquistas de tu barrio, etc. Si alguna vez has tenido problemas al enviar este tipo de correos desde tu web y los usuarios no reciben los emails, o los reciben directamente en el buzón de SPAM, es muy probable que tu servidor haya sido añadido a una lista negra de spammers. La mayor parte de las veces es porque el servidor ha sido hackeado y ha pasado a formar parte de las redes zombie que los emplean para realizar envíos de SPAM. Cuando esto ocurre los sistemas anti-spam añaden la IP del servidor a una lista negra y todas las webs de dicho servidor se ven afectadas. Para resolver este problema, es necesario utilizar un servicio SMTP externo para el envío de los emails transaccionales. Estos servicios garantizan la entrega de los emails y lo hacen de forma rápida. Los usuarios exigen inmediatez y el retraso de cualquier email degrada la experiencia de usuario de forma notable. En Drupal podemos configurar cualquier servidor SMTP para el envío de emails mediante el uso del módulo smtp, pero también podemos usar una plataforma externa creada específicamente para esta función. Algunas de las más populares son Mailjet, Amazon SES, y Mandrill, pero la oferta es muy amplia, en socialcompare han creado esta lista comparativa de todos los servicios de envío de emails trasaccionales. Desde Wild Wild Web recomendamos en uso de Mandrill, el servicio de distribución de correo transaccional de Mailchimp, ya que permite el envío de hasta 12.000 emails por mes de forma gratuita hasta 25.000 emails por menos de 10$ y además dispone de una fantástica integración con Drupal. Si tu web requiere de un volumen de envíos mayor también dispone de otras opciones previo pago de una cuota mensual. Características de Mandrill Soporte SPF y DKIM que garantiza que los emails no serán considerados SPAM. Infraestructura distribuida global con servidores en los 5 continentes que reduce la latencia. Estadísticas super completas de entrega de email, aperturas, custom tagging, etc.. Sistema de plantillas para personalización de emails. Apps para Android y iOS. Y muchas más.. Instalar Mandrill en Drupal Para instalar y comfigurar Mandrill en Drupal hay que seguir los siguientes pasos: 1. Descargar e instalar los módulos: Mailsystem Mandrill 2. Descargar el instalar la libreria Mandrill PHP API y subirla a la carpeta /sites/all/libraries/mandrill.   3. Activar los módulos Mandrill, Mandrill reports y Mandrill Template. 4. Crear una cuenta en mandrillapp.com. 5. Obtener un API Key para tu cuenta. 6. Pegar la API Key que acabas de crear en la pantalla de configuración de drupal y guardar.   7. Hacer los últimos ajustes en la configuración del módulo. Retoca las preferencias de traking o la integración con Google Analytics para hacer seguimiento de los emails con esta herramienta. Una vez está configurado el servicio en nuestro Drupal conviene hacer una prueba de envío desde la pestaña Send Test Email para verificar que todo funciona correctamente. Ahora ya tenemos nuestro Drupal enviando los emails mediante Mandrill pero resulta que los emails que envía Mandrill por defecto son en texto plano, ¡hemos vuelto a los 90!   8. Crear una plantilla en Mandrill. Para que los emails sean corporativos, lleven el loguito y los colores de nuestra marca o la de nuestro cliente necesitamos crear un template a medida. En nuestra cuenta de mandrillapp tenemos que ir a Outbound - Templates y pulsar el botón Create a Template. Una vez estamos editando la nueva plantilla solo hay que pegar el código html que queremos para nuestro email y usar el Email Template Language de Mailchimp para indicarle a Mandrill cual es la parte dinámica del email. Quedaría algo tal que así: <body bgcolor="#202020" style="margin: 0;padding: 0;"> <table bgcolor="#202020" width="100%"> <tr>  <td>        <center> … código html personalización del email …   <div mc:edit="main" style="color:#000000;"></div> … código html personalización del email … </center>   </td> </tr> </table> </body> La clave es la etiqueta   <div mc:edit="main" style="color:#000000;"></div> que es la que escupe el cuerpo del email correspondiente. 9. Crear una plantilla de mapeo en Drupal. Para que Drupal coja el formato de la nueva plantilla de Mandrill debemos crear una nueva Mandrill Template Map desde admin/config/services/mandrill/templates, ponerle un nombre y seleccionar el nombre y la region.Tambien debemos marcar el Email Key que queremos, en la mayoría de los casos Site wide default.   Conclusiones Los emails trasaccionales son muy importantes para mejorar la experiencia de usuario y debemos garantizar su entrega de forma rápida y efectiva mediante herramientas especificas de terceros. Mandrill es una fantástica aplicación para el envío de emails trasaccionales desde Drupal ya que es gratuita hasta 12.000 emails, es una aplicación madura y cuenta con una muy buena integración con nuestro CMS favorito.