En AulaDrupal estamos de celebración, ya que acabamos de lanzar de manera oficial, nuestra primera aplicación web de Drupal modular, para centros deportivos y gimnasios .

Esta aplicación web es un software de gestión de cuotas de gimnasio,  actividades, bonos de entrenamiento y productos de tienda, así como control de entradas, inscripciones en eventos, tareas, remesas bancarias, auto-renovación de cuotas, control de stock, inventario, QR.... y muchísimos más módulos que hacen más ameno y ágil el día a día en un centro deportivo.

Con esta aplicación los clientes podrán autogestionarse, no necesitarán contactar para contratar o gestionar ningún servicio ya que podrán dar de alta y baja cada uno de los módulos que tenemos en función de sus necesidades. 

Todo lo que se necesita en un software, presentado de la manera más sencilla.

Un software completo, no tiene porque ser difícil de manejar.

Net4Gym busca el mayor rendimiento oculto tras el más sencillo sistema.

A mayor sencillez mayor usabilidad.

Es un programa ágil, completo y con intuitivas opciones que harán que tu día a día sea más ameno. Reduciendo al completo todas las horas de gestión, contabilidad y control de los empleados, productos, local,...

Image

Visita la web de la aplicación para conocer más nuestra primera aplicación de Drupal modular. 

Puedes visitar la web del software en https://www.netforgym.com. 

100% Drupal, 100% modular y autogestionable.

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.

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.