Drupal Español - Blog

Herramientas indispensables para diseño web Drupal gratuitas

¿Cuantas veces hemos nos ha gustado un color de una imagen, fuente, fondo, elemento web y hemos tenido que hacer una captura de pantalla, abrir el programa de turno, pulsar el cuentagotas y obtener finalmente el color deseado?
Colorzilla es una extensión para desarrolladores web y diseñadores gráficos con tareas relacionadas con el color, tanto de nivel básico como avanzado.Esta extensión nos será de gran ayuda por sus herramientas como selector de color, cuentagotas y muchas más herramientas de color avanzadas adicionales.

Image

Características:

• Cuentagotas: obtiene el color de cualquier píxel de la página.
• Selector de color avanzado: parecido a los que tienes en Photoshop o Paint shop pro.
• Analizador de color de la pagina web: analiza los elementos dom en cualquier página web.
• Generador de degradado css: permite crear degradados a tu gusto o algunos ya predefinidos y te muestra el código correspondiente en css. También te permite modificar la orientación e incluso el tamaño.
• Palette viewer: contiene 7 paletas preinstaladas para ayudarte a tener una idea más clara.
• Historial de color de los colores elegidos anteriormente.
• Muestra información del elemento como la clase, el nombre del elemento, la id, el tamaño, etc.
• Recuadra cada elemento con un marco para indicar de donde se obtiene el color al pasar el cursor.
• Permite manipular los colores por sus componentes Rojo/Verde/Azul o Tono/Saturaciones/Valor.
• Copia automáticamente los colores generados o mostrados al cortapapeles en CSS RGB, Hex y otros formatos.
• Macros para muestrear los colores de la página con el teclado.
• Permite obtener el color de elementos dinámicos como enlaces flotantes, etc, volviendo a muestrear el ultimo píxel muestreado.
• Selección de color en un solo clic: al hacer clic en el icono principal de la barra de herramientas de ColorZilla estará listo para elegir el color del píxel que desee. (actualmente solo en Windows).
• Permite elegir colores de objetos flash.
• Permite elegir colores a cualquier nivel de zoom.
• Permite obtener el color medio de áreas de pixeles (15 x 15 px, 120x120px, etc).

Y estas son las caracteristicas y virtudes de Colorzilla como herramienta indispensable para el diseño web Drupal

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

Instalar y configurar slick carousel Si alguna vez habeis tenido que desarrollar una web, seguro que os han pedido algun slider con fotos y/o videos. Para mi gusto, la mejor opción para ello es usar slick carousel, puesto que me permite integrarlo con views y configurarlo a mi gusto.

Aunque pudiera parecer complicado, instalarlo y configurarlo es realmente sencillo, veamos como.

1.Instalar y Configurar Slick
Instalar los módulos:

• Slick: https://www.drupal.org/project/slick

Nota: cuando se instala el módulo Slick, se instala también Slick UI.

• Slick View: https://www.drupal.org/project/slick_views

Una vez instalados ir a Ampliar > List> Slick UI > configurar

Image

Ahora hay que crear un conjunto de opciones de Slick

Image

A modo de ejemplo se va a llamar: Store_Slick

Image

En el menú lateral izquierdo ir a la opción Configuración

Image

Seleccionar las siguientes opciones y guardar.

• Accesibility
• Arrows
• Dots
• Infinity
• Swipe
• Touch move
• Use CSS
• Use CSS Transforms
• jQuery easing: Linear
• Wait for animate

2.Añadir el nuevo conjunto de opciones a una vista
Dentro de la vista creada ir al apartado FORMATO > Formato.

En esta ventana se selecciona el estilo que va a tener o como se va a ver la información de la vista, y es aquí donde debe aparecer la opción Slick Carousel (si se han instalado correctamente los módulos).

Image

Lo siguiente que se tiene que hacer es configurar las opciones de estilo. Para ello:

• Seleccionar la casilla Vanilla Slick.
• En Optionset main, justo debajo de la anterior, seleccionar Store_Slick (ó como se haya llamado al conjunto de opciones de Slick anteriormente).
• En Skin main, a la derecha de la anterior, seleccionar Classic
• Y por último, elegir el número (X) de elementos que por defecto se van a mostrar en el, independientemente del número total que el carrusel muestre. Para seguir con el ejemplo,  van a ser tres elementos los que se verán por defecto
  • Grid large 3
  • Grid medium 3
  • Grid small 3

El resultado será el siguiente:

Image

Y esto ha sido Instalar y configurar slick carousel, 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.

Lo bueno de Drupal es que es una comunidad muy activa, en la cual muchas personas contribuyen añadiendo funcionalidades para que el resto de las personas las puedan utilizar. Aun así, siempre surge la necesidad a la hora de crear o mantener un portal disponer de funcionalidades que o bien no existen o existen, pero no se adaptan a nuestras necesidades. En este caso podemos crearlas nosotros mismos de una manera muy sencilla. Así que vamos a aprender a crear un módulo custom en Drupal.

Antes de empezar, necesitamos saber que en Drupal existen dos tipos de módulos:

Image

Los módulos contrib que son los que podemos encontrar en Drupal.org y que están disponibles para su uso por cualquier persona que los descargue y los módulos custom que son aquellos privados que se usan en un proyecto en concreto y no son públicos.

En nuestro caso crearemos nuestro módulo dentro de la carpeta custom, para ello simplemente creamos un nuevo directorio con el nombre de nuestro módulo. Algo a tener en cuenta y que es muy importante, es que el nombre de la carpeta será el nombre máquina que Drupal utilizará para llamar a las funciones dentro del módulo.

Para el ejemplo, crearemos un módulo que se llamara "A Test", por lo que crearemos el directorio con el mismo nombre.

Image

Fíjese que siempre se tiene que añadir en minúsculas y los espacios se transforman en guiones bajos.

Una vez creada la carpeta del módulo necesitamos generar dentro de ella un fichero por el cual Drupal será capaz de detectar que el nuevo directorio es un nuevo módulo. El nombre del fichero tiene que contener el nombre máquina del módulo seguido de ".info.yml".

Image

El contenido de este archivo debe seguir una estructura básica la cual puede ser mucho más extensa dependiendo de la funcionalidad.

name: A Test
type: module
description: Mi primer módulo custom
package: custom
core_version_requirement: ^8.8 || ^9

Donde especificamos el nombre, tipo, descripción, package o grupo de módulos y la versión de Drupal donde nuestro módulo funciona.

Cuando este fichero ya está creado y rellenado, Drupal ya sabe que existe y si navegamos al listado de módulos desde dentro del propio portal, nuestro módulo ya es visible para instalar.

Image

Y así es como podemos crear un módulo custom en Drupal 8/9.

Para mas información visite nuestro blog.