Una embedded web más ligera y rápida

Como comentaba en este post sobre embedded web server, este puede tener más o menos importancia dentro del sistema embebido que hayamos desarrollado. Puede que se trate de un sistema donde el acceso web sea única y exclusivamente para configuración, puede que se trate de un fichero de ayuda o manual del sistema embebido o por lo contrario puede tratarse de la funcionalidad específica para la que se ha desarrollado el dispositivo.

Dado que en los primero casos se sobreentiende que nunca se debe perjudicar sobre el rendimiento del sistema embebido aquí os comparto algunos de los trucos súper sencillos tanto HTML como CSS que nos pueden ser  muy útiles precisamente para eso, no afectar negativamente al sistema. En este aspecto quizás sólo son detalles, pero que por simples que parezcan o incluso ridículos permiten disminuir el impacto sobre la eficiencia del sistema embebido de tener un embedded web server vistoso. ¿El Porqué? Porque todos ellos se basan en el hecho de trasladar al cliente web (el navegador) gran parte de las tareas de carga de gráficos o que la transferencia de archivos se realicen desde una fuente externa.

Cuando las imágenes no son imprescindibles

Para las webs puramente funcionales pero que a las que se accede con frecuencia para la configuración del embebido, no es necesario tirar de colores simples y estéticas totalmente planas o aburridas con el objetivo de ahorrarse imágenes.

Como propiedades interesantes que ayudan a tener una web de buen ver y que nos permiten ahorrar espacio por no usar ningún tipo de imagen. Pues con la combinación de estas entre ellas se consiguen interfaces prácticas, ligeras y bonitas.

Redondeando las puntas:

border-radius: Con el uso de esta propiedad aplicamos una transformación en las esquinas del elemento div, haciendo que se redondeen con el radio que determinemos.

Ejemplos:

border-radius: 10px
border-radius: 10px

Sombreados:

box-shadow: Esta propiedad permite aplicar sombras difuminadas a casi cualquier elemento de nuestro HTML como pueden ser divs, imgs, etc… Con este efecto podemos dar efecto 3D a algunas zonas de nuestro diseño y jugando con la cantidad de sombreado podemos conseguir que algunas zonas se resalten por encima de otras. Como diseñadores podemos definir el offset en el eje x, el offset en el eje y, la distancia del difuminado y el color de la sombra. Esta propiedad es totalmente compatible con la anterior, de manera que si se utiliza en un elemento donde existe un border-radius definido, la sombra resultante también aparecerá con esa transformación.

Ejemplos:

box-shadow: 0px 0px 20px #aaa;
box-shadow: 10px 10px 2px #ff0000;

Degradados:

En este caso no existe una sola propiedad, pues para variar el navegador Internet Explorer necesita que se le especifique de forma distinta. Con el resto de navegadores, además, no existe una única forma de declararlo. El degradado en este caso es compatible con las propiedades anteriores, pues en algunos navegadores no es compatible con border-radius.

Ejemplos:

background-image:-webkit-gradient(linear, left top, left bottom, from(#78aedc), to(#4682b4));
background-image:-webkit-linear-gradient(top, #78aedc, #4682b4);
background-image:-moz-linear-gradient(top, #78aedc, #4682b4);
background-image:-ms-linear-gradient(top, #78aedc, #4682b4);
background-image:-o-linear-gradient(top, #78aedc, #4682b4);
background-image:linear-gradient(top, #78aedc, #4682b4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#78aedc, endColorstr=#4682b4);
background-image:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
background-image:-webkit-linear-gradient(top, # ffffff, # cccccc);
background-image:-moz-linear-gradient(top, # ffffff, # cccccc);
background-image:-ms-linear-gradient(top, # ffffff, # cccccc);
background-image:-o-linear-gradient(top, # ffffff, # cccccc);
background-image:linear-gradient(top, # ffffff, # cccccc);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=# ffffff, endColorstr=# cccccc);

Juntando los 3 efectos y las propiedades CSS para modificar el tipo de texto,etc… Podemos obtener botones como el siguiente sin usar ningún tipo de imagen, además todas estas propiedades son totalmente compatibles con los navegadores del iPhone o del sistema Android:

BOTÓN

El hecho de no tener imágenes (como el logotipo, etc.) almacenados en nuestro filesystem o Program Memory no sólo nos permite tener más espacio para bootloaders, registros de log o simplemente más espacio pensando en futuras ampliaciones sino que también el hecho de no cargar las imágenes directamente desde el embebido hará que la transferencia de datos hacia el cliente web que se nos conecte tenga un volumen inferior de datos y en consecuencia (y según como estén condicionados los recursos de la tarea que ejerce de servidor HTTP) no afectará tanto a la carga de la CPU y/o a la interfaz Ethernet del sistema embebido.

Cuando las imágenes son necesarias

Aquí pocas alternativas existen más allá de utilizar formatos de imagen que compriman bien su contenido como los gif o los jpg jugando con la calidad. Aún así, si el embebido forma parte de una red con acceso a internet, se accede a él de forma remota o simplemente el cliente web es un host que si tiene acceso a Internet se puede aprovechar un servidor en la nube o bien un hosting en el que tengamos nuestra página web (a nivel particular entiendo que esto es quizás un poco más complicado). Pues se trata simplemente de hacer que todas las imágenes de la web embebida estén referenciadas a imágenes que tengamos en nuestro servidor, me explico… Si tenemos una imagen que es logotipo.png y como en mi caso tenemos un hosting que es www.xmcarne.com. Si incluyéramos la imagen en el embedded web server el elemento se definiría así:

<img src=”./img/logotipo.png” title=”logotipo web” alt=”logotipo web”/>

Por el contrario si tenemos la imagen en el hosting del ejemplo:

<img src=http://www.xmcarne.com/emb_img/logotipo.png ” title=”logotipo web” alt=”logotipo web”/>

De esta forma cambiamos el espacio ocupado por la imagen por poco más de una decena de caracteres reduciendo el espacio drásticamente cuando empezamos a tener varias imágenes incluidas en el diseño.

Jugar con el acceso a Internet

Muchas veces el contexto anterior no lo podemos asegurar. No sabemos si siempre tendremos acceso a internet o podemos tener problemas si la red cae. En este sentido para un embedded web server que desarrollé en su momento con el Stack TCP/IP de Microchip, hice una pequeña función que hacia pings al servidor de las imágenes para comprobar la disponibilidad cada 30 segundos (por el tema de la repercusión) y en función del resultado activaba o desactivaba un flag que mediante Ajax y javascript modificaba la página web para mostrar o no las imágenes y sustituirlas por divs con las propiedades CSS que describía al principio. Lo busco y lo cuelgo 😉

Tagged with: , , , , ,
Posted in Blog Técnico, Embedded Web Server, Sistemas Embebidos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*


*

enlaces patrocinados