Un hobby diferente: diseño y desarrollo web

Día 22 del del reto #30díasdeblog y hoy toca compartir sobre un tema #Personal.

La verdad que este reto ha sido más complicado de lo que esperaba y es que preparar cada día un artículo sobre un tópico diferente requiere de un trabajo mental para el que reconozco no estaba del todo preparado cuando me propuse hacerlo, pero en fin, de eso se tratan los retos.

Comento esto, por que pensando en sobre qué tema compartir hoy dentro de los lineamientos del reto, que no me fue muy fácil después de 21 días seguidos escribiendo, al fin se me ocurrió escribir sobre uno de mis hobbies, "El diseño y desarrollo web", y qué, intentando mantenerme productivo, he querido potenciar aún más en los últimos meses por estar en confinado en casa, incluso antes de la situación causada por el COVID-19.

Diseño y desarrollo web

Me gusta que mis artículos siempre tengan un componente de aprendizaje, por eso quiero compartir una definición de lo que yo entiendo por diseño y desarrollo web:

El diseño y desarrollo web es una actividad que consiste en la planificación, diseño, implementación y mantenimiento de sitios web. Esta actividad involucra diferentes aspectos y habilidades como el diseño gráfico, diseño de interfaz y experiencia de usuario, como la navegabilidad, interactividad, usabilidad, arquitectura de la información; interacción de medios, entre los que podemos mencionar audio, texto, imagen, enlaces, video y la optimización de motores de búsqueda. A menudo muchas personas trabajan en equipos que cubren los diferentes aspectos del proceso de diseño, aunque existen algunos diseñadores/desarrolladores independientes que trabajan solos, como yo.

El stack

Como cualquier trabajo artesanal, para poder hacer el trabajo un diseñador/desarrollador de sitios web necesita las herramientas apropiadas que le permitan realizarlo de la forma más fácil y eficiente y poder dar oportunidad a enfocarse en lo que es más pesado, la creatividad y originalidad del contenido. A este conjunto de herramientas le llamamos stack.

Un stack es cualquier combinación de herramientas de diseño, programación y tecnologías, que ayudan a los artesanos de software en las tareas cotidianas y repetitivas, permitiéndoles enfocarse en el trabajo creativo y la resolución de problemas a través del código.

Todos mis proyectos los desarrollo utilizando prácticamente las mismas herramientas base, variando un poco a nivel de frameworks o tecnologías de desarrollo y servicios de hosting cuando quiero aprender algo nuevo, no las voy explicar en este post, pero si las puedo mencionar para que se hagan una idea de las tecnologías detrás de mis proyectos.

Entre las herramientas principales que utilizó durante mis procesos de diseño y desarrollo:

• Git (imprescindible)
• Node.js
• Visual Studio Code (no he podido encontrar otro IDE con el que me sienta cómodo)
• GitHub (tengo cuenta en gitlab y bitbucket pero casi no las utilizo)
• Github Pages (mayormente como entorno de testing)
• Netlify (me declaro fan)
• Gimp (me declaro doblemente fan)

Entre las herramientas que hasta el momento utilizo basado en lo que necesito hacer o aprender están:

Para crear sitios web:

• Jekyll (la que más he utilizado)
• Ghost CMS (la segunda que más he utilizado)
• GatsbyJS (la que estoy evaluando para migrar este blog)
• reveal.js (de la que les conté ayer en Creando un sitio web tipo presentación con reveal.js - Día 21)
• Docker (como entorno de desarrollo)

Buscando hosting gratuito (aunque sea por un tiempo):

• Heroku
• Azure
• Google Cloud

Mis proyectos

A continuación describo los proyectos en los que he trabajado durante mis tiempos libres y de esparcimiento (en serio me divierte 😁). La lista de proyectos está ordenada en forma cronológica y contarles que los he desarrollado desde octubre o noviembre del año pasado.

• El blog de Matrimonios Ágiles (https://matrimoniosagiles.wordpress.com/): un blog hecho en WordPress, en conjunto con mi esposa, que no supuso mayor trabajo de diseño web, pero si de diseño de logo, imagen y desarrollo de la estructura del contenido y del concepto en general.
• The Branch (https://www.thebranch.tech/): un sitio web hecho con Jekyll, para este sitio si apliqué todas las actividades que compartí en la definición de diseño y desarrollo web, desde la imagen de marca, logo, sitio y contenido, un proyecto completo desde el punto de vista de desarrollo, un proyecto que aún estoy esperando poder lanzar, pero que por estar fuera de Panamá, sumado a la situación causada por el COVID-19, está un poco complicado por el momento, si te interesa apoyarme en este proyecto, déjame un comentario al final del artículo y te contacto para conversar.
• El blog de The Branch (https://www.thebranch.tech/blog/): un blog hecho con Jekyll, que, aunque está integrado al sitio principal, incluirlo supuso un desarrollo aparte en términos de diseño.
• TDD Infographics (https://marvlm.github.io/tdd-infographic/): un sitio web hecho con Jekyll. Lo hice como un proyecto del Master que tomé en IEBS, aunque la infografía podía entregarse como una simple imagen, decidí ponerme el reto de hacerla tipo web y que el recurso pudiera ser accedido por cualquiera.
• Cómo Hacer Estudios Bíblicos Inductivos (https://estudiobiblico.ml/): un sitio web hecho con Jekyll. Un dato curioso, este sitio lo desarrolle en un sólo día, un domingo que me levanté y decidí tener mi propia hackaton y desarrollar una idea que tenía en mi cabeza desde hace un tiempo. Empecé a trabajar en él a las 10:00 y terminé aproximadamente a las 23:00.
• Online Vive Misiones (https://online.vivemisiones.com/): un blog creado con Ghost CMS, creado como parte de mis actividades como voluntario en Amistad Cristiana.
• Blog de T-share (https://tshare.digitalpress.blog/): mi proyecto final de Master, creado con Ghost CMS del cual ya he ido contado en los artículos de la serie #T-share.
• Reto #YoMeCorono con T-share (https://marvlm.github.io/concurso-t-share/): MVP del proyecto final, creado con Jekyll, conté sobre el proceso de creación en De 0 a MVP con Design Sprint.
• Bienvenido a la familia de Dios (https://ghost-ac.herokuapp.com): Este es un sitio creado con Ghost, con una plantilla personalizada que hice para probar y aprender el proceso de utilizar heroku como hosting de un blog hecho con Ghost CMS.
• Encuentra Esperanza y Paz (https://esperanza.amistadcristianamadrid.org/): otro sitio como parte de mi voluntariado en Amistad Cristiana, ésta vez hecho con reveal.js, hablo más a detalle del proyecto en Creando un sitio web tipo presentación con reveal.js - Día 21.
• Y por supuesto éste, mi blog i'marv.in (https://www.imarv.in/): hecho con GhostCMS y que estoy pensando migrar a GatsbyJS, aunque estoy pensando seriamente en probar eleventy por su similitud con Jekyll.

Si tienes la posibilidad de visitar los sitios y dejarme un comentario o feedback sobre qué te parecen te lo agradecería mucho. Y si tienes dudas sobre las herramientas que he comentado y deseas que escriba sobre alguna de ellas también me dejas un comentario y lo planifico.

Y así, completo el día 22 del reto #30díasdeblog👨‍💻.

Un abrazo!

P. D.: Este artículo tiene 1176 palabras.