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.

Herramientas indispensables para diseño web Page ruler, tu regla para medir pixeles en la pantalla del ordenador

Herramientas indispensables para diseño web Page ruler. Muchas veces queremos saber cuanto mide un elemento de una pagina web, proyecto etc. Como por ejemplo una imagen

Muchas extensiones de navegador te permiten medir en pantalla mediante una sencilla regla y averiguar rápidamente cuanto mide en píxeles un elemento web. La extensión más utilizada se llama Pageruler que crea una regla para obtener dimensiones y posicionamiento de píxeles, y además mide elementos en cualquier página web.

¿Qué es Page ruler?

Page Ruler es una extensión gratuita para navegadores  web Firefox y Chrome que muestra en pixeles la medida de los elementos medidos.

Características

•    Dibuja una regla en cualquier página y permite ver el ancho, la altura y la posición superior, inferior, izquierda y derecha.
•    Arrastra los bordes de la regla para cambiar su tamaño.
•    Usa las teclas de flecha para mover y cambiar el tamaño de la regla.
•    Muestra guías que se extienden desde los bordes de la regla.
•    Actualiza manualmente el tamaño y la posición de la regla desde la barra de herramientas para realizar cambios de precisión.
•    Habilita el “Modo de elemento” para delinear elementos en la página mientras mueves el ratón sobre ellos.
•    Navega a través de elementos de padres, hijos y hermanos de cualquier elemento medido.

Cómo utilizar la extensión Page ruler

Empezamos instalando la extensión en tu navegador y después haz clic en el icono que está al lado de la barra de direcciones.

Image

 
A continuación  puedes usar la medición libre arrastrando el ratón por la pantalla.

También puedes utilizar el modo de detección del elemento en la parte superior izquierda para que detecte automáticamente cuánto mide, por ejemplo un campo de registro de un formulario.

Image

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

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

Herramientas indispensables para diseño web WhatFont

Herramientas indispensables para diseño web WhatFont, la forma más fácil de identificar fuentes en páginas web.

Cuantas veces has querido saber que fuente esta utilizando una pagina web, una publicación, un post. Que tamaño de letra tiene un encabezado. Que grueso de letra tiene un título. WhatFont es una extensión de Chrome que nos ayuda con esta función de una forma muy rápida y sencilla.

Image

Tan solo con un clic nos proporcionara toda la información que necesitamos sobre esa fuente.

Primero nos muestra de forma abreviada el nombre de la fuente y su grosor en la primera línea de la ventana informativa. A continuación, nos mostrara la familia completa de la fuente, el estilo, el grosor, el tamaño en pixeles, la altura de la línea en pixeles, el color en código hexadecimal y un ejemplo de todas las letras en mayúsculas y minúsculas de la misma.

Image

Puedes darle clic a otra fuente y abrirá otro pequeño pop-up con la información de esta ultima sin perder el pop-up de la fuente anterior. Como puedes comprobar es sencillísimo conocer las fuentes que utiliza una pagina web utilizando la extensión para Chrome WhatFont.

Existen muchas otras extensiones similares, Firebug y Webkit Inspector son bastante fáciles de usar para los desarrolladores. Sin embargo, para otros, esto no debería ser necesario.. Además, si conoces CSS no te hará falta WhatFont. Pero incluso en este caso te ayudara a ahorrar tiempo en tus proyectos.

Es así de simple y elegante.

Para usar whatfont es tan sencillo como buscar la aplicación en las extensiones para Chrome en la barra de tareas de tu buscador, añadirla a Chrome y fijarla en la barra de extensiones.
También puedes pulsar aquí para ir directamente a la ventada de descarga.

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

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

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.

Commerce pasarela de pago en Drupal. Si queremos vender en nuestra tienda online, debemos proporcionar a nuestros clientes una forma de pago que les genere confianza por un lado, y que nos de seguridad a nosotros por el otro, para ello, una de las pasarelas más utilzadas (en Europa) es PayPal, con la particularidad que nos permite, aceptar tanto los pagos mediante cuentas de la plataforma, como pagos con tarjeta de crédito/débito, lo cual es muy cómodo porque con una única plataforma aceptamos varias formas de pago.

Vamos a ver como añadirla a nuestra página. Lo primero será, como siempre, ir a la página del proyecto y usar composer para instalar la extensión mediante el comando $ composer require 'drupal/commerce_paypal:^1.0@RC'

Image

Esto descargará el módulo y sus dependencias. Ahora debemos activarlo en el sitio, vamos a Ampliar y en la búsqueda escribimos "payp", cuando nuestre el módulo, lo activamos

Image

Una vez activado, vamos a Comercio -- Configuración -- Pago -- Pasarelas de pago

Image

Pulsamos sobre "+Añadir pasarela de pago"

Image

Cubrimos los campos con las opciones mostradas, marcando el "Modo: prueba" para tener un entorno de pruebas con pagos simulados, cuando hayamos finalizado la fase de desarrollo, volveremos aquí y marcaremos "producción". Las claves de la API las obtendremos desde el sitio de PayPal Develop creandonos una cuenta ( no es necesario tener cuenta live ).

Image

Dejando estas opciones marcadas, aceptaremos pagos tanto con cuenta PayPal por defecto como con tarjeta de crédito o débito, guardamos las opciones.

Image

Y esto ha sido commerce pasarela de pago, 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.

Vamos a instalar el módulo webform, que te permite crear cualquier formulario para recopilar cualquier dato, y se puede enviar a cualquier aplicación o sistema. Cada comportamiento y aspecto de los formularios y sus entradas son personalizables. Ya sea que necesitemos un formulario de varias páginas que contenga un diseño de entrada de varias columnas con lógica condicional o un formulario de contacto simple que envíe datos a un CRM, todo es posible utilizando este módulo.

Vamos a empezar con lo básico, que es instalarlo, para ello, como es habitual, iremos a la pagina del módulo en Drupal, os dejo aquí el enlace de descarga.

Image

Evidentemente, nosotros usaremos composer para instalarlo, así que desde nuestra consola ejecutamos el comando

Image

Tras instalarlo, procedemos a activarlo en nuestro sitio como siempre, iremos a ampliar, lo localizaremos y activaremos. En este caso solo necesitamos activar "webform" y webform UI" (la primera y la ultima opción), el módulo webform nos permite hacer muchas cosas, pero para este ejemplo, con activar estos dos componentes será suficiente.

Image

Una vez tengamos hecho esto, nos vamos a Estructura -- Webform -- Formularios

Image

El módulo webform nos instala por defecto un formulario de contacto, si clicamos sobre "Build" podremos ver y editar los campos existentes, asi como añadir nuevos campos para nuestro formulario, haciendo clic sobre "+Add element" veremos un pop-up en el que se nos muestran los distintos tipos de elementos que podemos agregar

Image

Por defecto, el propio módulo tiene muchas opciones de agregacion de elementos, en otro tutorial veremos como añadirle más, continuando con nuestra tarea, ahora podemos buscar y añadir el elemento que nos interese al formulario, fijate que cada elemento tiene un "?" a su izquierda, si pasas por encima te muestra una breve explicación sobre el mismo. Cuando sepamos el elemento que queremos añadir, lo haremos mediante su correspondiente botón.

Nosotros vamos a modificar uno de los elementos existentes por defecto en el formulario, veremos que el elemento "nombre" está en inglés y que es obligatorio (cuando se rellene el formulario deberá estar cubierto o no permitirá su envío) así que pulsamos "editar"

Image

Modificaremos el "title" y desmarcaremos la obligatoriedad de la validación, guardamos los cambios.

Image

Ya está cambiado el title y ya no es obligatorio. Ahora vamos a usar el formulario, pero antes le daremos una ruta url dedicada, vamos a la pestaña de configuración dentro del webform, en "opciones de rura url" ponemos /contacto, así

Image

Guardamos los cambios, ahora el formulario es accesible desde http://misitio.com/contacto

Image

Y esto ha sido instalar módulo webform en Drupal, 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.