Drupal Español - Blog

Tutorial para calcular contenedor de texto segun lineas. Hoy explicaremos cómo calcular el tamaño de un contenedor que contiene texto, y sólo queremos que se visualicen unas líneas determinadas.

Image

En este caso, tenemos varias tarjetas del mismo estilo, y quedaría mal que en cada una aparecieran más o menos líneas, por lo que vamos a hacer lo siguiente:

Inspeccionamos el párrafo, y en el inspector (el de chrome por ejemplo) buscamos qué tamaño de letra tiene, en nuestro caso vemos que tiene un 0.85rem (13.6 píxeles).

Después buscamos en el inspector la propiedad line-height, para los que no lo sepan consiste en establecer la altura de cada línea que forma el contenido de texto de un elemento, por lo que se emplea para controlar el interlineado del texto.

Nuestro párrafo tiene un line-height de 24 píxeles.

Image

Image

Una vez que tenemos el tamaño de letra y el line-height, los multiplicamos entre ellos y así averiguaremos el alto (height) que debe tener nuestro contenedor.

0.85 x 24=20.4 píxeles

Este sería el cálculo para una sola línea, pero en este caso queremos que nos aparezcan dos, por lo tanto multiplicamos por dos nuestro resultado:

20.4 x 2=40.8 píxeles

Hay que tener en cuenta que debemos sumar si el contenedor tuviera algún borde, padding o algo para que el cálculo sea lo más exacto posible, en nuestro caso no tenemos nada así que lo dejaremos así.

Image

Vemos que seguimos visualizando más de dos líneas, por lo que añadiremos a nuestro contenedor la propiedad overflow: hidden, así, lo que sobrepase los píxeles que hemos marcado de alto ya no lo veremos y quedará oculto.

Image

Ya tendríamos nuestro contenedor a la medida necesaria y todas las tarjetas ocuparían lo mismo.

Image

Y esto ha sido el tutorial para calcular el tamaño de un contenedor de texto segun el numero de lineas

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Tutorial para la Creacion de Menus en Drupal

Nuestro CMS favorito ofrece la posibilidad de crear y configurar menús con diferentes estructuras en nuestro proyecto web, de forma que se pueden situar y visualizar en diferente regiones de la página.
Para ver su funcionalidad, se creará un menú configurando los enlaces más frecuentes de sitio. Para ello, vamos a la zona de administración de creación y edición de menús en /admin/structure/menu
Seleccionamos "Añadir menú". Se asignará el título "Sitios frecuentes".

Image

Con el menú anterior ya creado, se procederá a añadir los diferentes enlaces necesarios para construir el menú. Se creará la siguiente estructura de menú con sus correspondientes enlaces:
Sitios frecuentes
 - Inicio (<front>)
 - Login (/user/login)
 - Contacto (/Contact)
 - Artículos (/articles)
   - Primer artículo (/node/1)

Vemos como se pueden asignar jeraquías a la estructura del menú, de forma que tengamos el enlace principal como raíz, y a partir de ahí los demás enlaces que lo forman.
Así, para añadir enlaces al menú se seleciona "Añadir enlace" dentro del menú creado, elegimos una etiqueta para el título y se indica la ruta a la que llevará el enlace.
Para el elace a Inicio usaremos <front>:

Image

 Login será un enlace al formulario de acceso al sitio web:

Image

Contacto un enlace al formulario de contacto:

Image

El enlace Artículos llevará a un listado con todos los contenidos de tipo Artículo del sitio:

Image

Dentro del enlace Artículos se creará un sub-enlace al contenido "Primer artículo". Se observa que se podría escribir el título del contenido en el input autocompletable, pues al ser un contenido del sitio se detecta automáticamente sin necesidad de indicar su ruta:

Image

 De forma que si la ruta del artículo cambiara el enlace se vería inalterado y continuaría funcionando correctamente.

Image

Con el menú "Sitios frecuentes" y sus enlaces ya creados, se sitiuará en el sitio web, para ello iremos a "Diseño de bloques" en /admin/structure/block
Se situará en en la zona "Barra lateral", pare ello se selecciona "Colocar bloque" y se filtra por el nombre del menú creado "Sitios frecuentes", aceptar y guardar.

Image

Image

Image

Si visualizamos el sitio web se observa como el menú con los enlaces configurados se ha posicionado en la barra lateral:

Image

De esta forma, se pueden configurar menús personalizados en Drupal y situarlos en la zona del proyecto web que sea necesario.

Y esto ha sido el tutorial para la creacion de menus en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Hoy vamos a ver este Tutorial de instalacion del modulo Admin Toolbar en Drupal

Drupal nos proporciona una barra de administración  predeterminada para acceder a sus funcionalidades desde el panel de administración:

Image

Sin embargo, existe la posibilidad de mejorar esta barra de administración por defecto mediante la instalación del módulo llamado “Admin Toolbar”, que dará la opción de trasformar esta barra administrativa en un tipo de menú desplegable. De manera que se ofrece así un acceso más rápido y sencillo a las zonas de administración del sitio web en Drupal.
Para la instalación del módulo “Admin Toolbar”, o de módulos en general, se podría realizar o bien desde la interfaz en la opción de “Ampliar” de la barra de administración, o mediante drush descargando el proyecto admin_toolbar vía composer.

Para su instalación vía composer y drush, iremos al repositorio de Drupal donde se encuentre alojado el proyecto admin_toolbar: https://www.drupal.org/project/admin_toolbar
Una vez localizado, se lanzará el comando, el cual añadirá el módulo al sitio web:

Image

Después, instalaremos el módulo con el siguiente comando:

Image

Finalmente se vacía caché, quedando así el módulo instalado en el sitio web:

Image

Otra opción para la instalación de módulos, en esta ocasión “Admin Toolbar”, podría ser desde la interfaz del panel de administración de nuestro proyecto. Para ello, desde el repositorio de Drupal se descarga el fichero del módulo.

Posteriormente, elegiremos la opción “Ampliar” en /admin/modules y seleccionaremos “Add new module”:

Image

Se observa que se puede añadir el fichero admin_toolbar-3.0.3.tar.gz  / admin_toolbar-3.0.3.zip  o indicar la url del proyecto en Drupal.

Image

En esta ocasión se elegirá la descarga del fichero admin_toolbar-3.0.3.tar.gz

Image

Image

Después, lo añadimos para su instalación desde el panel de administración en /admin/modules

Se seleccionará “Admin Toolbar” y “Admin Toolbar Extra Tools” e instalar.

Image

Cuando finaliza la instalación, si se utiliza la barra de tareas del panel de administración, observamos que ahora aparecen los menú de forma desplegable para una acceso más sencillo y rápido a cada zona de la administración en Drupal.

Image

Y esto ha sido el tutorial de instalacion del modulo Admin Toolbar en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Campo de tipo referencia a termino de taxonomía en Drupal. A continuación, se detalla como añadir en Drupal un campo en el que las opciones de selección se autocompletan con términos de taxonomía referenciada. Primero crearemos un vocabulario llamado “Tipos de noticias” desde /admin/structure/taxonomy/add

Image

Con el vocabulario ya creado se agregarán los términos: Científica, Cultural y Deportiva.

Image

Image

Image

Posteriormente, creamos el campo “Tipo noticia” para el tipo de contenido “Artículo” desde /admin/structure/types/manage/article/fields/add-field

Image

Image

En la edición del campo , seleccionamos el vocabulario de taxonomía creado previamente : Tipos de noticia.

Image

Una vez tenemos el campo “Tipo noticia” creado y configurado, podemos ir a “Administración de la visualización de formulario” desde /admin/structure/types/manage/article/form-display para aplicar el campo creado al formulario de creación del tipo de contenido “Artículo”.

Image

Así, elegiremos el tipo de control: Lista de selección, un modo ‘select’ que nos nuestra un listado desplegable.

Image

Image

Si ahora añadimos un contenido de tipo Artículo desde /node/add/article vemos que se puede elegir el término de vocabulario desde el selector.

Image

Image

De forma que si en adelante se añade nuevos términos al vocabulario “Tipos de noticias”, aparecerían como posible selección del campo “Tipo noticia”. 

Para mostrarlo, se añadirá un nuevo término “Social” al vocabulario que referencia el campo:

Image

Si ahora editamos el nodo “Primera noticia científica” que se creó con anterioridad, o bien, creamos un nuevo contenido de tipo Artículo, se puede ver como permite seleccionar el nuevo término “Social” que hemos agregado al vocabulario “Tipos de noticia”.

Image

Siendo un tipo de campo que se completa con términos de referencia a un vocabulario (taxonomía), las opciones que permitirá elegir este campo serán los términos que tengamos añadidos al vocabulario en cuestión.

Image

Para finalizar, señalar que se puede modificar el orden jerárquico con el que se presentan las términos desde el listado de términos, posicionándolos en el orden con el que se prefieran mostrar, en este caso “Social” ha subido una posición

Image

Image

Y esto ha sido el tutorial de como crear un campo de tipo referencia a término de taxonomía en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Mostrar y ocultar un elemento con CSS esquivando jQuery.

Como hacer que un elemento aparezca y desaparezca desde un lado de la pantalla solo con CSS.

Como frontend hay veces que por exigencias del guion nos vemos en la tesitura de no poder usar jquery, ya sea por no saber usarlo, porque el cliente no quiere, por cuestiones de rendimiento, … En este artículo se explica un truco para poder hacer que un elemento aparezca de uno de los lados.

Son dos las condiciones que necesitamos para este truco, la primera y la mas obvia es saber CSS, y la otra, la que nos va a dar toda la lógica, es el combinado de un <label> con su atributo “for” y un <input type=”checkbox” con su “id”.

Por un lado pondremos la label en donde nos interese dentro de nuestro html y la maquetaremos para que tenga el aspecto de botón que queremos. Por otro lado, y este es uno de los puntos importantes a tener en cuenta, pondremos el checkbox justo por delante del div o el tag que vayamos a hacer que entre y salga de la pantalla.

Image

Ahora toca dejar esto visualmente listo para que haga su magia.

Por un lado debemos poner el body con “overflow: hidden;”, también valdría hacerlo sobre un contenedor que encapsule tanto al checkbox como al div que le acompaña.

El checkbox lo maquetaremos de la siguiente manera:

.view-option-anchor{    
    display: inline-block;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
}

Es importante que no pongamos “display: none;“ ya que aunque no lo veamos es indispensable que este dentro del documento.

Ahora vamos con la caja que queremos que se oculte y se muestre, en este caso es el div con la clase “filter-content”.

Para ello lo que vamos a hacer es maquetarlo, posicionándolo para que posteriormente nos aparezca desde el lado derecho de la pantalla.

. filter-content{
    height: 100vh;
    width: 100 vw;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 9999;
    transition: left 0.4s ease;
}

Bien, ahora ya está colocado cada elemento donde debe estar en su posición inicial. En este caso no veremos el div “filter-content” porque sobresale de la ventana por la derecha. Para verlo, y aquí es donde está la magia, no ayudaremos de su posición con respecto el checkbox de la siguiente manera.

 .view-option-anchor:checked + .filter-content{
    left: 0;
}

De esta forma haremos que el div que está justo al lado de checkbox entre dentro de la pantalla.

Por último, para hacer totalmente usable este elemento que sale y entra de la pantalla, necesitaremos un botón de cierre, o más bien un nuevo <label> en el que su “for” apunte también al “id” de este checkbox y que se encuentre dentro de el div que entra y sale. Con lo que la estructura html nos quedaría así:

Image

Y con esto tendríamos la funcionalidad completa. Todo lo referente al aspecto de estos label como botones queda en tu mano para ponerlos a tu gusto.

Esta forma de usar el checkbox puede aplicarse a diferentes situaciones, la única condición es usar y posicionar los elementos de la forma descrita, así que toca experimentar todo lo que se te ocurra.

Y esto ha sido mostrar y ocultar un elemento con CSS, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

Herramientas para desarrollar Front Drupal. Esta es una lista de herramientas que todo desarrollador web necesita, tanto si desarrolla con Drupal como si lo hace con otras tecnologías.

Es muy probable que vayamos a requerir imágenes de prueba para nuestro proyecto, que utilizaremos hasta que el cliente nos entregue las definitivas (y esto es algo que algunas veces se puede demorar bastante).

Image

Para ello podemos hacer uso de herramientas como https://www.pexels.com que pone a nuestra disposición una enorme cantidad de imágenes que podemos filtrar por texto o categoría y así encontrar la que más se ajuste a nuestras necesidades. En caso de no querer imágenes con una temática concreta podemos optar por https://dummyimage.com que nos permite generar imágenes con tamaño, texto, color de fondo y color de texto a elegir.

Image

Además de imágenes también podríamos necesitar texto de ejemplo, puesto que es casi seguro que no tendremos los definitivos hasta que tengamos muy avanzado nuestro proyecto, para esto tenemos https://www.lipsum.com , un generador automático de texto en latín que nos creará párrafos y párrafos de texto a necesidad.

Image

Otras herramientas que también nos pueden ser útiles, al menos si somos de front, son aquellas que nos permiten generar y hacer pruebas con sombras, bordes y otros elementos, tales como https://www.cssmatic.com, con la que podemos generar CSS de borders, box-shadows y demás elementos acelerándonos y facilitándonos el trabajo al poder modificar pixelajes, anchos, altos y demás sin tener que teclear nada, simplemente arrastrando botones en el editor.

Image

Image

O como http://apps.eky.hk/css-triangle-generator que nos ayuda a crear triángulos de todo tipo y tamaño que podemos colocar en elementos before o after, utilizar de fondo, etc., modificando su ancho, alto, orientación y en general dándonos una amplia variedad de posibilidades.

Image

En último lugar estaría https://cssgradient.io , otra herramienta que nos permite crear gradientes en css (al igual que la herramienta cssmatic arriba mencionada), pudiendo seleccionar los colores a mezclar, además del punto de fusión del gradiente. Nos permite también subir imágenes, cogiendo los colores de las mismas y así ayudarnos a encontrar el color que más se adapte a nuestro proyecto. La razón de incluirla en esta lista es que la interfaz es más bonita. amigable e intuitiva que la anterior.

Image

Y esto ha sido herramientas que todo desarrollador Front (drupal o no) necesita, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.