SeViR Notes

Hace ya casi una década cuando uno desarrollaba su página web con Dreamweaver o con FrontPage.

Como todo lo antiguo vuelve, en pleno siglo 21th y tras haber superado la web 2.0 y la 3.0 resulta que lo cool ahora es editar de nuevo tu web en local o a través de tocar los ficheros de contenido directamente.

Y aunque hay algunas diferencias, y ha llovido mucho, volvemos a escribir contenido web desde nuestro ordenador y una aplicación de escritorio.

Los motivos son muy diferentes. Y aunque el porcentaje de penetración de Wordpress y otros blogs de edición online siguen siendo mayoritarios, ahora tenemos entornos completos de creación de webs sin necesidad de bases de datos, loque ahora se llama Flat-File-CMS o Static Web Generators.

Tenemos que distinguir entre dos tipos. Sistemas desarrollados en PHP que trabajan con ficheros de texto, y generadores de webs. y En ambos casos de forma predominante, el contenido se escribe en formato Markdown, pero el resultado es diferente a la hora de trabajar, aunque visualmente un usuario no podría distinguir si una web está hecha con un sistema u otro.

La ventaja, además de poder escribir más rápido y concentrarse en el contenido y no en la forma en que se muestra, es que, al no usar base de datos, la carga de la web es mucho más rápida.

Por otro lado las webs generadas estáticamente ni tan siquiera necesitarían de PHP, u otro soporte de lenguaje de programación en el servidor web. Cualquier espacio web incluso Github podría ser hosting para este tipo de webs.

Del primer grupo estos serían los proyectos más interesantes:

Flat File CMS

• Pico CMS. Es todo un clásico, funciona sobre PHP con plantillas TWIG, soporte de contenido en Markdown y un buen puñado de templates.
• HTMLy. Más reciente, permite editar online el contenido y tiene interfaz de administración. Este blog está funcionando sobre este proyecto.
• Grav. Un proyecto interesante, también funcionando sobre Twig, Symfony y muy extensible con una buena cantidad de plugins. También permite edición online así como configuración con ficheros YAML, generación de tipos especiales de contenido. En definitiva,un sistema muy versátil.
• Dokuwiki. Lleva años con nosotros, un wiki rápido de editar, ideal para documentar proyectos, edición online y todo almacenado sobre ficheros. El backup es trivial, solo hay que copiar toda la carpeta a otro sitio para tenerlo funcionando.

Static Web Generators

• Hexo. Genera una web estática con NodeJS. Dispone de diferentes temas para modificar el aspecto del resultado.
• WinterSmith. También sobre NodeJS, fue de los pioneros aunque muy básico comparado con los demás.
• MkDocs. Si has escrito documentación en Markdown,seguro que te suena, o al menos su theme por defecto, multitud de proyectos lo usan para generar la web de documentación. Funciona sobre Python, que necesitarás tener instalado.
• Sculpin. Sobre PHP y TWIG, genera webs estáticas, y no necesitarás posteriormente PHP para visualizar el resultado.
• Hugo. El ganador por goleada es Hugo,un sistema versátil, al estar hecho en GO, solo necesitas un ejecutable disponible en Windows, Linux y Mac para generar tu web a partir de Markdown. Tiene un catálogo de themes impresionante para el poco tiempo que lleva. Sin duda el más recomendable.

Ahora solo te queda elegir el que más te guste.

Han pasado casi dos años desde que empecé y dejé de escribir en este blog.

En este tiempo, han intentado forzar el Wordpress con mil problemas de seguridad, me han hackeado la web varias veces y he tenido que recuperarla otras tantas.

Todo para que al final ni tan siquiera escribiese. Así que finalmente he decidido pasarme al Markdown y a un FlatCMS sin plugins, sin extensiones ni problemas.

Ha sido un poco pesado convertir los posts a Markdown, pero al menos ya está todo listo. Probaremos que tal va este HTMLy.

Aunque hace bastante tiempo de esto, aún tiene mucha utilidad. Se ha convertido en una costumbre que las aplicaciones webs estén pobladas de consultas o peticiones AJAX, cargando inicialmente una plantilla, y actualizando los contenidos mediante consultas o peticiones asíncronas.

Cuando queremos subir ficheros en segundo plano sin realizar la carga, en cambio no podemos usar AJAX, teniendo que remitirnos al File API de HTML5 o bien buscar una técnica alternativa que permita enviar un formulario con un formulario en multipart en segundo plano. Esto se puede conseguir mediante iframes, la técnica se basa en crear un iframe no visible (que no oculto, si está display:hidden no funcionará), de un tamaño de 0 pixeles y sin bordes conseguiremos un iframe funcional pero que no es visible por el usuario. Si indicamos como target de un formulario multipart este iframe, podremos subir un fichero sin recargar la página.

El problema será entonces conocer el momento en que el archivo se ha terminado de subir, para esto la respuesta cargada en el iframe debe ejecutar una llamada JavaScript definida en la ventana padre, que como si fuese una función de Callback se ejecutará cuando tengamos subido el fichero.

Poder obtener datos en JavaScript entre diferentes dominios permitirá crear fácilmente servicios web en formato JSON, a esta técnica se le denomina JSONP, consiste en devolver no un objeto JavaScript sino la llamada a una función con el nombre que escojamos (función callback) pasando como parámetro este objeto. Cuando cargamos una url con la llamada al servicio lanzaremos la ejecución de la función de callback con los datos que esperamos de respuesta. Esto ya lo hace jQuery por detrás cuando ejecutamos el método $.getScript generando una función con un nombre aleatorio.

Para todo esto tenemos una librería que nos ayudará para generar respuestas en formato JSON, JSONP, XML y respuestas a través de iframes, si usamos CodeIgniter 2 o superior, mediante Spark/ajax disponemos de una serie de funciones helpers y métodos útiles para generar respuestas válidas en JSONP, envío de respuestas dentro de un iframe o respuestas en XML.

Con un método $this->ajax->response() podremos generar respuestas para enviar como JSON, JSONP, extender un objeto JS con jQuery, asignar datos generados a una variable, o generar respuestas en XML a partir de un objeto PHP.

Por ejemplo queremos cargar las cadenas de traducción de un array PHP a una variable JavaScript, podríamos añadir una carga de script en HTML

<code>< script type="text/javascript" src="http://url/controller/method">
</code>

y que este método PHP devuelva los datos en una variable:

<code>$this->ajax->response($array_traduccion, null, TRUE, "varjs");
</code>

Esto cargará los datos en varjs para poder usarlo en JavaScript. Esto funcionaría también en cualquier dominio, por lo que sería cross-domain.