Image
Drupal Modular net4gym
Drupal modular: AulaDrupal lanza su primera APP de Drupal

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
Drupal modular NetforGym

 

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.

 

 

 

 

 

Image
Eliminar cabecera y añadir un before
Eliminar cabecera y añadir un before

Eliminar cabecera y añadir un before, me ha parecido interesante compartir esto, con un ejemplo práctico, vamos a ver como en el formulario de inscripción a una oferta de trabajo de una web, nos encontramos con que en la parte superior aparece una información que al cliente no le interesa, en este caso concreto un texto, pero podria aplicarse tambien en el caso de una imagen o un simbolo.

Image
Eliminar cabecera y añadir un before

Para ello, desde el navegador inspeccionamos el texto con el botón derecho del ratón, y le añadimos el comando display:none.

Este comando hace que el texto se oculte, y además hace también que el espacio dónde estaba disminuya.

Image
Eliminar cabecera y añadir un before

Una vez hecho ésto, volvemos a inspeccionar la zona que nos ha quedado (de la misma manera que antes, clic derecho - inspeccionar en el navegador), y le añadimos al div un padding 0.

Por último, queremos añadir una "x" más grande, ya que la actual es muy pequeña y puede pasar desapercibida, para ello, a la que tenemos actualmente, le ponemos un display none (así la eliminamos) y después añadimos la que el cliente nos requiere colocándole un before al botón.

Image
Eliminar cabecera y añadir un before
Image
Eliminar cabecera y añadir un before
Image
Eliminar cabecera y añadir un before

Si os fijais en el codigo mostrado arriba, vereis que también hemos posicionado nuestro before para que quede en uno de los laterales.

Image
Eliminar cabecera y añadir un before

De esta manera hemos conseguido ocultar el texto que no queriamos mostrar a requirimiento de cliente y cambiar el aspa de cierre que existia por una con mejor visualizacion y posicionada en su lugar natural.

Y esto ha sido el tutorial de como eliminar cabecera y añadir un before en Drupal

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

Image
Campo de tipo referencia a termino de taxonomía en Drupal
Campo de tipo referencia a termino de taxonomía en Drupal

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
Campo de tipo referencia a termino de taxonomía en Drupal

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

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Image
Campo de tipo referencia a termino de taxonomía en Drupal
Image
Campo de tipo referencia a termino de taxonomía en Drupal

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

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Image
Campo de tipo referencia a termino de taxonomía en Drupal


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

Image
Campo de tipo referencia a termino de taxonomía en Drupal


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
Campo de tipo referencia a termino de taxonomía en Drupal

 

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

Image
Campo de tipo referencia a termino de taxonomía en Drupal
Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

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
Campo de tipo referencia a termino de taxonomía en Drupal
Image
Campo de tipo referencia a termino de taxonomía en Drupal

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
Campo de tipo referencia a termino de taxonomía en Drupal

 

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
Campo de tipo referencia a termino de taxonomía en Drupal

 

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
Campo de tipo referencia a termino de taxonomía en Drupal

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
Campo de tipo referencia a termino de taxonomía en Drupal

 

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

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.

Image
whatfont
Herramientas indispensables para diseño web WhatFont

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
Herramientas indispensables para diseño web WhatFont

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
Herramientas indispensables para diseño web WhatFont

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.

Image
Herramientas para desarrollar
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal
Image
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal

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
Herramientas para desarrollar Front Drupal

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.

Image
Composer, uso y aplicación de este proceso en Drupal
Composer, uso y aplicación de este proceso en Drupal

Este proceso ha sido y es muy habitual en muchos casos pero un gestor de dependencias nos facilita mucho esta tarea y además soluciona un problema muy común y es el de la gestión de versiones, ya que si lo hacemos manualmente, tenemos que periódicamente revisar que ese software o librerías que nos descargamos, no haya tenido una actualización, porque en tal caso, tendríamos que realizar el proceso manualmente. Composer nos facilita la vida mediante un proceso que simplifica estas tareas.

Lo primero que debemos tener es instalado el Composer en nuestro sistema, y eso requiere un proceso que depende del sistema sobre el que deseemos instalarlo, si es en Windows, en Linux, Mac, etc. Dejo la url desde donde podrás seguir los pasos fácilmente. https://getcomposer.org/doc/00-intro.md

Una vez instalado el programa, abre un terminal y ejecuta composer --version o simplemente composer para verificar que te responde. Si lo has instalado de modo global, puedes probarlo desde cualquier parte del sistema.

Para poder trabajar con composer en nuestro proyecto, nos dirigimos a la carpeta en que lo tenemos, y podemos crear nuestro entorno Composer automáticamente o manualmente.

De modo automático, ejecutamos el comando composer init. Lo primero que nos pedirá es que introduzcamos el nombre del proyecto, el cual se compone de vendor u organización, seguido una barra, y a continuación el nombre del proyecto. Por ejemplo micomposer/nuevaprueba.

Nos pedirá una descripción.

Image
Welcome to the composer config generator

A continuación nos pedirá que introduzcamos una descripción.

Image
Description

Nos pedirá el autor.

Image
Author

Nos pedirá algo un poco extraño, que es la estabilidad mínima, en este caso si estamos trabajando en modo desarrollo introducimos dev para que nos descargue versiones de desarrollo en las dependencias. Si pulsamos enter directamente nos bajará sólo las versiones estables.

Image
Minimum Stability

A continuación el tipo, en nuestro caso va a ser un proyecto.

Image
Package Type

En el tipo de licencia podemos poner MIT que es la licencia más usada en open source. Si no fuera open source pondríamos propietary.

Image
License

En este punto podemos ya empezar a incluir dependencies de manera interactiva. Nos pregunta si vamos a necesitar alguna y para ello enter en yes.

Image
Dependencies

Nos pedirá que introduzcamos un paquete y como ejemplo introducimos ckeditor. Puede salirnos un conjunto de opciones. Pulsamos el número correspondiente a la opción de paquete ckeditor que queramos instalar como dependencia.

Image
Search package

Nos permitirá indicar una versión específica pero si no queremos indicar una y que se instale la última pulsamos enter.

Image
Version

Nos indicará la versión que se va a instalar, en este caso la dev-master y nos pedirá si queremos añadir otra dependencia.

Image
Dev-master version

Como no voy a instalar más dependencias, pulso enter, y nos preguntará que vamos a necesitar alguna dependencia específica para el desarrollo. Como no la vamos a necesitar escribo no y pulsamos enter.

Image
require-dev

Nos preguntará si queremos aplicar la estandarización PSR-4 de clases, en nuestro caso le vamos a decir que no.

Image
PSR-4

Me sale el resumen para confirmar del proyecto Composer pulsamos directamente enter para confirmar.

Image
Resumen

Nos pedirá si queremos intalar las dependencias indicadas en ese momento y le decimos que sí.

Image
Instalación de dependencias

De este modo ya tendríamos configurado Composer para gestionar nuestras dependencias.

Los componentes que Composer nos puede gestionar se encuentran en la página https://packagist.org/, en ella podemos realizar una búsqueda y encontrar una enorme cantidad de librerías y dependencias.

Podemos crear la configuración de nuestro proyecto Composer manualmente del siguiente modo.

Para poder gestionar composer necesita un fichero llamado composer.json, en cual introducimos los paquetes que deseamos que Composer nos gestione. El fichero tiene que estar escrito en json por lo que al editarlo, lo primero que tenemos que hacer es abrir y cerrar llaves.

En la primera parte introducimos un conjunto de valores que son opcionales y que se introducen en estructura campo-valor, de la siguiente manera.

{

  “name”: “micomposer/prueba-composer”

}

La primera parte del nombre, antes de la barra es el vendor y a continuación el nombre del proyecto.

El resto de datos opcionales es muy amplio y puede comprender, no solo el nombre, sino la versión, el tipo , la licencia, la descripción, etc. No obstante, el Composer necesita el campo require, que es el que guarda las dependencias que nosotros le digamos. Es un objeto que guarda todas las dependencias en modo clave valor.

{

  “name”: “micomposer/prueba-composer”,

  “require”: {

   

  }

}

Cuando entramos en alguno de los proyectos en la web packagist, nos indicará como tenemos que ponerlos. Por ejemplo:

Image
Packagist

Kint es una librería que nos permite debuguear o mostrar las variables que tengamos en nuestro programa de manera más amigable. Drupal lo suele utilizar con el módulo Devel, pero ese es otro tema. Si pulsamos la primera opción “kint-php/kint”, veremos la siguiente pantalla https://packagist.org/packages/kint-php/kint

Veremos las distintas versiones y observaremos que lo que tenemos que poner es la clave valor, la primera el nombre kint-php/kint, y a continuación la versión, separado por dos puntos y entre comillas como vemos a continuación.

{

  “name”: “micomposer/prueba-composer”,

  “require”: {

    “kint-php/kint”: “dev-master”,

  }

}

La versión requiere conocer las opciones ya que podemos controlar qué versiones queremos instalar como comodines y signos.

Si ponemos, por ejemplo la versión “5.2.*”, estaremos indicando a Composer que nos instale cualquier versión superior a 5.2 e inferior a 5.3. si ponemos una versión sin comodines le estaremos indicando que nos instale esa versión en particular y ninguna otra.

Si queremos que se instale una versión igual o superior utilizaremos el sistema >=5.2.

Podemos introducir un intervalo de versiones como 5.2 - 6.8, que es equivalente a >=5.2 <6.8.

Puedes encontrar todas las opciones en la página https://getcomposer.org/doc/articles/versions.md

En nuestro caso vamos a utilizar la versión última indicada en la página que es la dev-master que corresponde a la última rama de desarrollo.

Algo importante a tener en cuenta a la hora de generar el fichero es que tiene que estar codificado en UT8 a secas.

Guardamos el fichero y abrimos un terminal. Nos dirigimos a la carpeta donde hemos creado el composer.json y ejecutamos el comando composer install.

Image
Composer install

Observaremos que nos ha creado una carpeta vendor en la que introduce las dependencias.

Image
Dependencias

Vemos que ha instalado la carpeta kint-php con la versión que le hemos indicado, y una carpeta composer con las librerías que necesita el programa.

También podemos ver el fichero autoload.php que contiene código para la carga automática de todas las librerías que gestionemos con composer.

En nuestro index.php cargamos el autoload con require y metemos un array o variable en la función d().

<html>

<head></head>

<body>

<?php

. require “vendor/autoload.php”;

$miarray = [‘María’, ‘Pedro’, 43, TRUE, 786,6];

d($miarray);

?>

</body>

</html>

El resultado es el que sigue:

Image
Array

La librería nos facilita el trabajo de visualizar las variables.

Si nosotros queremos añadir nuevas librerías ya no podemos hacer un install porque ya está instalado, tendríamos que modificar el composer.json y añadir la nueva librería, y ejecutar composer update.

Una librería muy utilizada en drupal es ckeditor, para editar texto. Buscamos en la web packgist.org, y cambiamos el fichero composer.json introduciendo la siguiente línea al apartado require.

“ckeditor/ckeditor”: “4.16.1”

Recordemos que la última linea del array no tiene coma pero la anterior si.

Guardamos e introducimos en el terminal el comando composer update y tendremos el siguiente resultado.

Image
Composer update

Además de instalarnos la nueva librería, Composer comprobará si alguna de las existentes tiene alguna actualización pendiente, y la instalará siempre y cuando lo tengamos así estipulado en los requisitos de las versiones que hablamos antes.

Observamos la carpeta vendor y tenemos la nueva carpeta ckeditor.

Image
Nueva carpeta ckeditor

Una característica importante a tener en cuenta es que la librería que nos vamos a descargar requiere otras librerías como dependencias, Composer instalará aquellas, sin que nosotros tengamos que especificarlo.

Es posible que deseemos eliminar una librería, en ese caso tenemos que borrar la librería del fichero composer.json, guardar y ejecutar el comando composer update. De ese modo, Composer se encarga de eliminar automáticamente la librería.

Hasta aquí hemos visto el uso de Composer, de modo básico pero que nos dará un plus de profesionalidad. Espero con ello haber podido ayudar o al menos aclarar a quien lo necesite esta herramienta esencial en el desarrollo con Drupal.