En el episodio de hoy tenemos otro caso de éxito, pero antes déjame que os recuerde que tecnolitas.com es un servicio de asesoramiento low cost donde podéis contratar vuestro plan de asesoramiento tecnológico por el precio de un par de cafés y hacer vuestras preguntas para poder contar con mi ayuda y poner en marcha vuestro negocio digital.

El caso de éxito de hoy se llama HODL, os pongo el enlace en las notas del programa porque deletrearlo tampoco tiene mucho sentido y es una página web sobre inversiones y finanzas, es un blog que pretende asesorar sobre inversiones y finanzas y mantener a los usuarios informados de que exchange, broker, wallets, tecnología NFT, bitcoins, todas las nuevas tecnologías y las nuevas tendencias en inversión y finanzas.

Para cometer este proyecto tuve una conversación con el cliente, vi un poco la idea que tenía y que era lo que quería hacer.

Aparte de la información que quería mostrar sobre los tipos de sistemas de inversión quería en algunos sitios de la web constituir una comparativa para que el usuario tuviera una mejor idea dependiendo de lo que quiera hacer cuál es la mejor plataforma para hacerlo.

Viendo esto pues decidí que lo montaba con WordPress como es evidente porque la estructura es la de un blog aunque tiene características específicas como hemos comentado precisamente en el episodio de ayer hablando de gestores de contenidos, WordPress está basado en tipos personalizados de contenidos y lo que hice pues aparte de tener las entradas normales de un blog pues cree una serie de tipos de contenidos personalizados como es exchange, broker, wallets y NFT para poder tener campos personalizados porque la definición de un exchange no tiene por qué ser la misma de un broker o de un wallet.

Entre un broker y un exchange básicamente los campos van a ser los mismos, al usuario le va a interesar saber la nacionalidad, las comisiones, cómo se puede aportar dinero, cómo se puede invertir y cuánto cuesta las comisiones de cada operación y cómo se puede retirar el dinero.

Esas son las informaciones que hay que dar de los exchanges pero en cambio por ejemplo los wallets pues hay que describir si son wallets físicos, si son wallets online, si son fríos, si son calientes, hay estas características de los wallets de criptomonedas que bueno pues para el que esté interesado en este tipo de inversión pues podéis ir a hodl.com en el link que encontraréis en las notas del programa y ver toda esta información que os va a resumir de una manera muy cómoda y sencilla todas las opciones que hay en el mundo de las criptomonedas y de los bancos digitales modernos, no la banca digital que conocemos sino los bancos digitales actuales.

Como os decía creamos los custom post type contenidos personalizados para poder hacer cada uno de los apartados y añadimos el plugin de advanced custom fields para poder definir atributos o campos personalizados para cada uno de estos productos.

Como yo quería mostrar las pastillas de comparación pues como elementos de repetición en la página para que en la entrada donde se hablara de los exchange por ejemplo se pudiera ver una lista con unas tarjetas o pastillas de cada uno de los exchange mostrando las características de cada uno, valoración, logo, para tener una imagen representativo el logo de la marca del exchange, la procedencia donde la nacionalidad de la sede, comisiones, bueno pues todos los datos que os he comentado antes vamos a necesitar hacer bloques de Gutenberg personalizados por lo tanto instale Genesis Custom Blocks que lo que haces te permite definir tus propios bloques de Gutenberg con la posibilidad de añadir campos al bloque para poder pedirle al usuario la información cuando inserta el bloque en la página.

Por ejemplo pues podríamos haber hecho esto usando sólo HTML y CSS pues el Custom Blocks te permite hacer una inserción de HTML en uno de sus formularios y su CSS y si no necesitas más información pues te vale con con ese HTML y te dibuja lo que hayas escrito en el HTML en el sitio de la página donde hayas insertado este bloque y además si quieres que el usuario introduzca en el momento de poner el bloque en la página algunos datos como pueda ser la nacionalidad del exchange, la imagen del logotipo, las comisiones y una valoración pues puedes hacer que dentro del Custom Blocks el interface de Genesis Custom Blocks tiene para crear tus campos por ejemplo un campo imagen para elegir una foto de la librería o subir una el campo nacionalidad que sería un campo de texto donde escribes nacionalidad o bien un campo de lista seleccionable donde pones las nacionalidades de todos los posibles elementos ya sean exchange, brokers, wallets y vas creando todas estas opciones para que luego en el momento que el usuario inserta el bloque tenga una lista desplegable pueda seleccionar la opción y no se confunda al escribir o cometa un error tipográfico.

Las opciones de estos campos son bastante variadas luego pues cuando tienes estos campos creados te vas a la plantilla HTML que has hecho para el bloque que has podido diseñar en cualquier otra herramienta de HTML y copiar y pegar aquí y sustituyes el texto de la plantilla por el valor el nombre del campo entre dos llaves al principio y dos llaves al final, estas dobles llaves lo que le están diciendo al bloque es que sustituya el texto que habría en el diseño HTML o el espacio que en el diseño HTML por el valor del campo personalizado del bloque personalizado.

Por ejemplo pues si la nacionalidad es americana pues americana si es portuguesa portuguesa entonces pones pues en el campo rellenas nacionalidad pones Portugal pues cuando te pinte el bloque va a coger toda la estética del HTML y a coger el valor del campo nacionalidad y a poner Portugal en el sitio donde tú has puesto antes doble llave nacionalidad, doble llave y sustituye estas variables que funcionan a modo de variables por la nacionalidad, por el valor del campo nacionalidad, vale esto es bastante sencillo.

Yo estos bloques los diseñé usando web flow que es una herramienta no code que es una herramienta de diseño visual HTML que no necesita que sepas de programación ni HTML ni CSS porque tiene un interface pues muy visual donde vas haciendo los ajustes y se van colocando las cosas en la pantalla según quieras disponer todos los elementos exportas el HTML y el CSS para esto la versión que te permite exportar todo el HTML y el CSS pues es una versión de pago pero también para elementos como estos que son muy sencillos pues lo que puedes hacer es hacer una previsualización de la página que es como lo hago yo.

Ir a las herramientas del programador del navegador copiar el código HTML y copiar el código CSS a tus propios ficheros o en este caso a el interface del Genesis Custom Blocks de WordPress y pues pegas el HTML y pegas el CSS y no te hace falta pagar la suscripción profesional o premium de web flow en este caso pues sólo te va a dejar hacer un proyecto a la vez.

Y bueno pues ya realmente si esto lo estás usando a menudo pues web flow es una de las cosas que merece la pena tener una suscripción como tengo yo para hacer pues hasta 10 proyectos y poder exportar el código de una manera pues ya toda compactada en un fichero zip con su HTML su CSS y JavaScript en el caso de que el HTML pues tenga transiciones animaciones cualquier otra iteración que haya dentro de la página.

Pues una vez creado el bloque personalizado pues al final hay un parámetro que se dice bueno pues cuantos productos quieres listar en este bloque se crea un campo y dice bueno pues entre 5 y 15 más que nada por por ver lo que sería la estética de la página cómo va a quedar si listas todos los que hay o quieres realmente pues hacer un paginado de entre 5 y 15 productos o o tú comparaciones de los 5 mejores de los 10 mejores un poco como lo quieras presentar pero bueno te haces un bloque personalizado que liste cada uno de estos tipos de elementos o como hice yo, hay un bloque personalizado para exchanges y brokers.

Simplemente tiene un campo que te permite seleccionar qué tipo de producto quieres listar en ese bloque si seleccionas Exchange, te muestra todos los exchanges y seleccionas brokers te muestra todos los brokers, después les hice otro bloque personalizado que consistía en comparar dos productos por lo tanto en este bloque lo que dice es poner dos campos que preguntan por el id del producto que quieres comparar.

Cada uno de los elementos que creas en WordPress se genera un id que puedes averiguar poniéndote encima con el ratón en la lista por ejemplo de Exchanges te pones por encima con el ratón en el nombre del Exchage y abajo a la izquierda en el navegador te aparece la url y en la url en la parte del query de la url que es una parte al final que está precedida por una interrogación igual vas a tener un número 4158 pues este es el id de ese producto.

Metes en la caja el número 5148 en la otra caja el id del que quieres comparar y te mostrará esos dos elementos en las pastillas visuales de la página y así podrás comparar cualquiera con cualquiera simplemente eligiendo los los ID’s y bueno así pues un poco por explicaros cómo es el tema de los bloques personalizados y que si visitáis la página vais a identificar visualmente de una manera muy sencilla habría dos puntualizaciones más dos pequeños detalles que sí son curiosos dentro de esta página por ejemplo las banderas que se pueden ver en las pastillas que estas banderas aparte de la nacionalidad en texto aparece la banderita y bueno pues estas banderas hay sistemas de iconos para WordPress.

Pero a mí me resultó muy curioso un sistema que encontré en una página web que está basado en CSS sprites esto es hacer una imagen de una resolución en la que aparecen todas las banderitas y por coordenadas de píxeles el CSS selecciona un recuadro de la bandera del país que tiene que quieres poner en cuestión y este esta selección se hace en base a un código ISO de cada país por ejemplo España es-es, o tienes por ejemplo es de España y ene de Inglaterra au de Australia y r de Israel y aquí pues hay un código ISO que define cada país y al poner las letras en el campo de la nacionalidad pues vas a tener la representación de esa banderita que te muestra el país.

Y por otro lado pues otra de las implementaciones a nivel de bloque personalizado que también está curiosa, es el tema de las estrellas que hace el rating en la valoración del producto esto pues es un SVG de una estrella que realmente se repite tres veces para lo que es representar la estrella entera la estrella a mitad o la estrella vacía y se hace un cálculo en base al dato numérico que está en el campo valoración que va del 1 al 5 porque es un sistema de 5 estrellas el que usamos para representar esta valoración y pues con un código PHP pues vas bueno pues haces unos cálculos del valor lo multiplicas por 2 lo vuelves a dividir para que si tienes un 4,8 pues esto resulte en 4 estrellas y media o si tienes un 4,2 resulte en 4 estrellas y si tienes un 3,9 pues se te va a 4 estrellas también pero si es un 3,6 se te va a 3 estrellas y media y hay una representación gráfica de este SVG en base al valor numérico que metas en este campo bueno pues os animo a que echéis un vistazo a la página web que podéis encontrar el enlace en las notas del programa y que veáis un poco pues las distintas posibilidades que se pueden hacer pues para este tipo de páginas web y estas este tipo de implementaciones personalizadas y que bueno pues si queréis más información ya sabéis cómo hacer las preguntas a través de la página web.

¡Que tengas un Ingenioso día!

—