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.

Tutorial para ampliar caja de contenido en Drupal. En muchas ocasiones, en el desarrollo de portales con Drupal, nos encontramos con que queremos ampliar una caja, de tal forma que cuando se añadan diferentes opciones, el usuario lo pueda visualizar y eliminar lo quiera sin problema. 

Tal como lo tenemos ahora, es imposible.

Image

Para ello, lo primero que tendremos que hacer es inspeccionar la caja pulsando click derecho sobre ésta y añadirle a su contenedor un width 100% para que nos abarque todo el ancho.

Image

Una vez hecho esto, ya podríamos añadir varias opciones, pero aún así, si ponemos más opciones de lo que es el ancho, aparecerían debajo (en una segunda línea) y no las veríamos.

Image

Tendremos que ponerle a la caja un alto máximo, por ejemplo, de 84px (ya que la caja tiene una altura de 42px y queremos que por lo menos se visualicen dos líneas).

Image

Image

Después, tenemos que pensar en la posibilidad de que, si hubiera muchas opciones y se sobrepasan esas dos líneas, podamos hacer scroll y ver todo.

Podríamos poner la caja con un alto más grande, pero si el usuario añadiera muchas opciones la caja sería infinita y no nos interesa.

Para ello, colocamos a la caja la propiedad overflow: auto y con esto conseguimos que lo que haya a partir de 84px de altura, aparezca en scroll hacia abajo.

Image

Image

Con esto conseguimos visualizar tantas opciones como se añadan a nuestro campo.

Y de esta manera podemos ampliar caja de contenido en 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.

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.

Hablemos de la configuración básica de una tienda con Drupal. Para configurar las opciones básicas de nuestra tienda Drupal, navegamos a través del menú Administración--Comercio--Configuración, dónde nos mostrará las opciones para hacerlo

Image

Vemos que tenemos las opciones de configuración, vamos a explicarlas brevemente:

• Correos electrónicos en la que podemos definir distintos mensajes de correo, que enviará la tienda al cliente, cuando este complete determinadas acciones (a nuestra elección).
• Monedas, dónde podremos especificar con qué moneda o monedas (caso de aceptar varias) operará nuestra tienda.
• Tiendas, para administrar nuestras tiendas.
• Tipos de tiendas, nos permite añadir campos, formularios y cambiar las opciones de visualización de nuestra tienda, así como rellenar los datos de identificación, además de añadir todas las tiendas que necesitemos o queramos (para un multi-site por ejemplo).
• Tipos de impuestos, para definir los impuestos que se sumaran al precio del producto y cómo lo mostrarán (sumado al producto o por separado). Esta opción la hemos explicado con anterioridad en el blog, podeis repasarla desde aqui.

Veamos las opciones con más detalle, empezando con Correos electrónicos

Image

Pulsando sobre "Añadir correo" crearemos un mensaje de correo que se enviará al destinatario cuando se cumplan unos requisitos que nosotros definiremos, en este caso, hemos creado un mensaje de correo que informa de que se ha finalizado la compra porque el pedido está pagado

Image

En la imagen superior vemos que tenemos que cubrir una serie de campos (marcados con *) para hacer que la tienda envie un correo cada vez que un cliente pague un pedido. Los campos Desde y Para deben rellenarse con un comodín de ente los disponibles, y el cuerpo del mensaje que enviaremos tiene que estar en HTML. Cuando hayamos terminado pulsaremos guardar y esta parte estará configurada.

Lo siguiente que debemos configurar en nuestra tienda es la moneda que utilizaremos en la misma

Image

Mediante el botón "Añadir divisa", seleccionaremos la moneda o monedas que nos interese. Con el botón "Agregar moneda personalizada" añadiremos una moneda que no se encuentre en el listado de divisas.

Desde la opción tienda configuraremos todos los datos que aparecerán en las confirmaciones de compra e identificación de la tienda.

Image

Como siempre, los campos marcados con * son obligatorios, debiendolos rellenar todos para que nos permita guardar los cambios.

Y esto ha sido configuración básica de una tienda con Drupal Commerce, 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.

Para crear cupones de descuento con Commerce deberías haber seguido los pasos del artículo para crear descuentos en nuestra tienda , y tener ahora una idea general de como funcionan, podremos entonces crear cupones, que son otra forma de bonificar a nuestros clientes y un metodo para conseguir que compren más en nuestra tienda.

Teniendo el manual antes mencionado como referencia, crearemos un nuevo descuento, cubriendo o marcando todos los campos marcados con *. Finalmente, haremos clic sobre "guardar y agregar cupones".

Image

Eso nos llevará a esta pantalla, donde cliquearemos en "+agregar cupon", para generar un código personalizado en el cupón que utilizarán nuestros clientes.

Image

En este formulario cubriremos los datos, es importante el código del cupón, pues es lo que deberá introducir el cliente, durante el checkout, para que se le aplique el descuento. Es recomendable que contenga, por ejemplo, el nombre de la tienda, además del beneficio obtenido, (MITIENDA -9€). Fijaremos tambien las condiciones de uso, si está o no activado, cuantas veces puede ser usado y/o cuantas veces puede usarlo un mismo cliente.

Image

Finalmente, guardaremos los cambios y listo, Solo nos queda compartir el cupón para que empiecen a usarlo. Y esto ha sido crear cupones de descuento con Drupal Commerce, 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.