Servir páginas con estética Material Design desde ESP8266



Continuamos con las entradas del ESP8266 viendo cómo servir una página con estética Material Design gracias a la librería Material Design Lite.

Hemos dedicado varias entradas a ver cómo servir páginas web desde el ESP8266, y como conectar el frontend con el backend a través de llamadas AJAX o Websockets.

Pero, reconozcámoslo, las páginas web que hemos servido hasta ahora son bastante feas. ¡Eso está a punto de cambiar! y empezaremos con la sencilla librería Material Design Lite que ya vimos en esta entrada.

Anuncio:

¡Así que manos a la obra! En cuanto a la parte del backend, es decir, el código del ESP8266, es idéntico al que hemos venido usando. Esto es,

Que a su vez usa una definición sencilla del servidor que en el fichero 'Server.hpp'

La diferencia de verdad en este ejemplo está en el fichero 'index.html' y en los ficheros que subiremos a la memoria SPIFFS. Hasta ahora nuestro código html hubiera sido así,

Que daría este terriblemente feo resultado.

Y ahora ahora va a pasar a ser

Con el que conseguiremos esta estética.

Respecto a los ficheros empleados por el framework Material Design Lite (JS y CSS) podemos o bien cargarlos desde una CDN, o bien subirlos comprimidos a la memoria del ESP8266.

En el ejemplo tenéis ambas opciones, estando comentada la opción de CDN

En principio preferiremos la CDN siempre que sea posible, es decir, cuando el cliente final disponga de conexión a Internet para bajar los ficheros. De esta forma liberamos al ESP8266 del trabajo de tener que servir los ficheros.

Pero no siempre va a ser posible. Por ejemplo, tendremos que servirlos nosotros cuando el ESP8266 esté actuando como en modo AP porque el cliente no va a tener acceso a Internet para descargarse los ficheros por desde el CDN.

¡Así de sencillo a sido!. Por supuesto, estamos usando el framework Material Design Lite pero podéis usar cualquier otro framework o template que queráis para servir las páginas web siguiendo el procedimiento que hemos visto para cargar los ficheros.

Se acabaron las excusas para servir páginas "feas" desde vuestro ESP8266. En la siguiente entrada de la serie volveremos a meternos en comunicación frontend backend intercambiando información codificada en Json en llamadas Ajax. ¡Hasta pronto! 

Descarga el código

Todo el código de esta entrada está disponible para su descarga en GitHub.

Si te ha gustado esta entrada y quieres leer más sobre ESP8266 puedes consultar la sección
tutoriales de ESP8266

Anuncio:

Previous Cómo serializar y deserializar ficheros XML en C#
Next Enviar y recibir por I2C datos en formato Json en Arduino
1000
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
newest oldest
Leonardo

Hola Luis, recién conozco de tus publicaciones y están super buenas, te quiero agradecer por que la información que compartes es muy valiosa. Saludos desde Cuba