Marcos P.

Tecnológicamente Inquieto...

Desarrollo de Webs con UIkit.


Hace poco comencé un proyecto que tenia ganas de hacer desde hace tiempo, pero el "Síndrome del Impostor" no me lo permitía. Lancé mi propia empresa Core I&S, de la cual tienen que pueden visitar con el enlace en el menú superior.

La Idea

Dejando de lado el negocio, uno de los imprescindibles era la web, porque hoy e día ningún negocio puede aislarse de la gran red de redes. Debía ser una web elegante y vivida, como la imágen de empresa que había escogido. Esta imagen se compone de varios elementos como un Nombre, un Logo, Colores y Productos, entre otros. Con todo esto cree un bosquejo de la web, que no es funcional, solo una imágen para tener como referencia. Para este primer paso utilicé software libre, Inkscape, que se ha convertido en una herramienta importate en mi día a día, este es un editor de imágenes vectoriales con mucha potencia, les dejo el resultado debajo:

Manos a la obra

Con esto era hora de pasar a la acción. Para construir una Landing Page se necesitan 3 elementos HTML+CSS+JavaScript, Trabajar con ellos es divertido, pero esta tarea de crear páginas webs es uno de mis productos y antes de vender a otro, quería consumirlo yo mismo. Por lo que la forma de hacerlo y las herramientas a usar debían ser las mismas que las de producción.

El marcado de HTML es el mismo en todas las webs, hacerlo a mano no es difícil, pero el CSS es otra cosa, CSS es una cascada de estilos, lo que significa que los elementos van heredando los estilos, a menos que se establezca algo distinto. Para bien o para mal, para mal porque aveces debes escribir o describir las propiedades de los elementos uno a uno, algo poco práctico en producción. Así que para ayudar en este respecto están los frameworks1, con los que muchas veces matas 2 pájaros (CSS+JavaScript) de un solo tiro. El más utilizado es Booststrap, que inunda la web. Una de las criticas que mas se le achacan es lo complejo de aprender y utilizar, ademas del tamaño, ocupa demasiado realentizando la carga de página.

UIkit un framework bueno, barato y bonito

Hice una corta investigación sobre frameworks para dar con UIkit 2. Este framework es liviano, la documentación es de lo mejor que he visto por internet (no se porque le veo un símil a la de Java) y aplicarlo al HTML es muy sencillo, trae su propio JavaScript, en el que no me metí porque, como todo el mundo, no le tengo mucho aprecio. La versión que utilicé para este trabajo le 3.0-Beta , pero es completamente funcional. Hay varias diferencias entre la versión anterior y esta, pero la idea y los principios son iguales.

Incorporando PHP

En uno de los primeros estados del proyecto (casi finalizado) la web se veía igual, con unos retoques de ultima hora. Pero tenia una inquietud, no podía recibir feedback de los usuarios directamente desde la web. Para hacer funcionar el formulario necesitaba PHP, un lenguaje que no tenia pensado utilizar.

Una web flexible es una web que se adapta a las necesidades del cliente.

Luego de investigar un poco sobre el tema llegue a una semi-solución, que no me convencía del todo. A esto se le añade el hecho de que si o si iba a necesitar al menos una pagina web más para temas legales, con el código de la cabecera y del pié de página repetidos, esto se convertiría en un dolor a la hora de modificar alguno de ellos, por lo que PHP me daba las herramientas necesarias para arreglar los dos problemas. Convertí las paginas a PHP con el HTML incrustado. Ahora si el formulario funcionaba bien y la página podía ampliarse en cualquier momento.

Editores

Como editor había empezado con Emacs + Web-Mode + Impatient-Mode, pero el último de la triada no se llevaba nada bien con el CSS a la hora de renderizar. Así que probé [Brackets]3, muy bonito pero el modo LivePreview no funciona bien con Firefox, aunque mejor que Impatient-Mode, por casualidad, dando vueltas con el tema anterior, descubrí que PHP tiene un servidor web incorporado, en su biblioteca, pero lo que más me sorprendió, fue que al guardar un documento .php modificado se actualizaba la pagina en el navegador. Tarde unos segundos en ver que pasaba, editaba desde Emacs, guardaba y ¡Violà! me quede con la combinación PHP + Emacs + Web-Mode456.

~> php -S localhost:5000

Este primer intento me llevo una semana y media, con tiempos muertos de por medio. Si tuviera que volver a hacerlo hoy me llevaría muchísimo menos tiempo. El resultado esta a la vista una web sencilla, bonita, funcional y rápida. El tema del SEO lo dejo para otro artículo, porque es muy extenso y son muchas cosas a tener en cuenta.

Bueno sin más los dejo, espero que les haya gustado, siéntanse libres de comentar tanto al correo como en las redes sociales. Si desean de que hable de algún tema, se puede estudiar (ñ_ñ). Un saludo y nos leemos en el próximo.