{"id":3767,"date":"2016-05-30T09:39:17","date_gmt":"2016-05-30T07:39:17","guid":{"rendered":"https:\/\/www.hiberus.com\/blog\/?p=3767"},"modified":"2023-12-13T12:00:03","modified_gmt":"2023-12-13T11:00:03","slug":"maquetar-en-drupal","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/maquetar-en-drupal\/","title":{"rendered":"Diario de un Junior: Maquetar en Drupal"},"content":{"rendered":"

El d\u00eda 1 de diciembre fue mi primer d\u00eda en Hiberus. Gracias a haber estudiado un grado superior de \u201cDesarrollo de Aplicaciones Multiplataforma\u201d, tuve la suerte de que Hiberus se pusiera en contacto conmigo por mis conocimientos, y me plantearan un puesto como maquetadora en Drupal<\/strong>.<\/p>\n

El primer d\u00eda que me hablaron de Drupal estaba muy perdida, lo \u00fanico que sab\u00eda hasta ese momento era que Drupal era un CMS (un gestor de contenidos).<\/p>\n

\u00bfQu\u00e9 es Drupal?<\/h2>\n

Drupal es un CMS<\/strong> (Content Management System) OpenSource o tambi\u00e9n llamado gestor de contenidos que permite construir entornos web de una manera bastante r\u00e1pida y efectiva.<\/p>\n

Cu\u00e1ndo comenc\u00e9 a trabajar con Drupal, un compa\u00f1ero me dijo: \u201cDrupal es as\u00ed, o te encanta o lo odias\u201d.\u00a0 Qu\u00e9 raz\u00f3n. M\u00e1s tarde me ense\u00f1aron la siguiente gr\u00e1fica en la que se muestra la curva de aprendizaje de Drupal\u2026 \u00bfD\u00f3nde me estaba metiendo?<\/p>\n

\"Drupal-Learning-Curve\"<\/a><\/p>\n

Poco a poco, y gracias al equipo, me fui familiarizando con los distintos t\u00e9rminos y m\u00e1s habituales: tipos de contenido, vocabularios, taxonom\u00edas, vistas, presentaciones…<\/p>\n

Hoy me gustar\u00eda comentar mi experiencia con una de las herramientas que m\u00e1s uso en mi d\u00eda a d\u00eda, Display Suite<\/strong>, que es la herramienta que me permite organizar la informaci\u00f3n que me dan en MockUps o PSDs para trasladarla al sitio web.<\/p>\n

Display Suite<\/h2>\n

Display Suite<\/strong> (suite de presentaci\u00f3n) es un conjunto de m\u00f3dulos que permiten modificar la presentaci\u00f3n de las diferentes entidades y otros elementos de la p\u00e1gina web<\/strong>, como vistas o formularios.<\/p>\n

El funcionamiento de Display Suite es muy sencillo, ya que podemos especificar qu\u00e9 estructura va a tener cada entidad, distribuyendo as\u00ed los campos en diferentes regiones (cabecera, columnas, footer, etc).<\/p>\n

Dentro de Display suite puedes a\u00f1adir campos<\/strong> (de c\u00f3digo, de tipo bloque, etc.), o definir view modes<\/strong> los cuales son los layouts para nuestras entidades en los que se puede definir todas las regiones que se quieran.<\/p>\n

\"display_suite_layouts\"<\/a><\/p>\n

Una vez tienes definido un view mode, simplemente tienes que ir arrastrando los campos a las regiones definidas y…\u00a0 \u00a1voil\u00e0!,\u00a0 la entidad se habr\u00e1 distribuido de la manera que t\u00fa has especificado.<\/p>\n

Tipos de contenido y\u00a0las taxonom\u00edas<\/h2>\n

Los tipos de contenido<\/strong> permiten personalizar a nuestro gusto los campos que \u00a0habr\u00e1 disponibles y con qu\u00e9 nombre para que el usuario los rellene y de esa manera se forme el contenido. Por ejemplo, un tipo de contenido es el de tipo art\u00edculo, cuyos campos son el t\u00edtulo, la fecha y el contenido del art\u00edculo.<\/strong><\/p>\n

Despu\u00e9s de a\u00f1adir los campos necesarios para el tipo de contenido, \u00a0hay que gestionar la presentaci\u00f3n del tipo de contenido con Display Suite.<\/p>\n

Una taxonom\u00eda<\/strong> es un vocabulario de Drupal, \u00a0la cual nos permite organizar informaci\u00f3n<\/strong>. Por ejemplo, un t\u00e9rmino de taxonom\u00eda ser\u00eda \u201cCiudades\u201d y habr\u00eda que darle una descripci\u00f3n como puede ser \u201cCiudades de Espa\u00f1a\u201d. Hay que a\u00f1adir unos campos para describir la taxonom\u00eda, en este caso al ser ciudades tendr\u00edan que ser del tipo de: nombre, descripci\u00f3n, localizaci\u00f3n\u2026<\/p>\n

Despu\u00e9s se gestiona la presentaci\u00f3n de la taxonom\u00eda de la misma manera que el tipo de contenido, mediante Display Suite.<\/p>\n

A partir de ah\u00ed habr\u00eda que ir a\u00f1adiendo t\u00e9rminos de taxonom\u00eda que ser\u00edan, por ejemplo, Madrid, Barcelona, etc.<\/p>\n

Por otro lado, \u00a0un punto importante que hay que saber a la hora de aprender Drupal, es que pr\u00e1cticamente toda la documentaci\u00f3n est\u00e1 en ingl\u00e9s.<\/p>\n

Implementando SASS<\/h2>\n

Una vez fui entendiendo la forma de maquetar en Drupal, me encontr\u00e9 con que en vez de maquetar con el CSS aqu\u00ed se implementaba SASS<\/strong>.\u00a0Al principio no acababa de entender bien la funcionalidad, pero al poco tiempo me di cuenta de que SASS es mucho m\u00e1s potente que CSS, ya que puedes anidar selectores, hacer funciones de una forma muy sencilla, etc. Por lo que estoy encantada con SASS.<\/p>\n

M\u00f3dulos de Drupal<\/h2>\n

Otra de las cosas que me llam\u00f3 mucho la atenci\u00f3n de Drupal son los m\u00f3dulos<\/strong>, \u00a1hay cientos!, y pr\u00e1cticamente los hay para todo.<\/p>\n

Por ejemplo, Smart Trim<\/strong> que sirve para decir el n\u00famero de car\u00e1cteres exactos que quieres\u00a0que se puedan escribir en un \u00e1rea de texto, Picture<\/strong>, que sirve para definir diferentes estilos de imagen dependiendo del tama\u00f1o del dispositivo en el que veamos la p\u00e1gina web, Wysiwyg<\/strong>, para a\u00f1adir estilos mediante clases en el propio editor de texto, etc.<\/p>\n

En definitiva, mi experiencia con Drupal est\u00e1 siendo muy gratificante y enriquecedora y se que solo es el principio de un largo proceso.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

\n
\n
\n
\n

\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de Drupal?<\/p>\n

Contacta con nuestro equipo de Drupal<\/p>\n <\/div>\n

\n \n
\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n
    \n\t
    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t