Bulma CSS

Plantilla para mostrar temperatura y humedad – Diseño web

En este artículo te mostraré una plantilla de ejemplo para mostrar la temperatura y humedad. Será una plantilla simple y minimalista que solo tendrá el propósito de mostrar los datos de un termómetro.

Como lo dije anteriormente, será una plantilla de ejemplo para mostrar los datos de un termómetro como lo son la temperatura y humedad. Puedes basarte en ella para mostrar los datos de un sensor físico o de una API.

Diseño de la plantilla para termómetro

Plantilla para temperatura y humedad

En este template de ejemplo tenemos el título, un icono del termómetro (con FontAwesome), el porcentaje de humedad y la temperatura. También muestra cuándo fue la última lectura.

Estos datos pueden venir de cualquier lugar, yo solo he puesto algunos de ejemplo. Eres libre de modificar la plantilla y agregar o remover algunas cosas.

Código fuente

El código de la plantilla queda así:

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Sensor de temperatura - By Parzibyte</title>
    <link rel='stylesheet' href='https://unpkg.com/bulma@0.9.1/css/bulma.min.css'>
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>

<body>
    <section id='app' class='hero is-link is-fullheight'>
        <div class='hero-body'>
            <div class='container'>
                <div class='columns has-text-centered'>
                    <div class='column'>
                        <h1 style='font-size: 2.5rem'>Termómetro</h1>
                        <i class='fa fa-thermometer-half' style='font-size: 4rem;'></i>
                    </div>
                </div>
                <div class='columns'>
                    <div class='column has-text-centered'>
                        <h2 class='is-size-4 has-text-warning'>Temperatura</h2>
                        <h2 class='is-size-1'>20.5 °C</h2>
                    </div>
                    <div class='column has-text-centered'>
                        <h2 class='is-size-4 has-text-warning'>Humedad</h2>
                        <h2 class='is-size-1'>30.87 %</h2>
                    </div>
                </div>
                <div class='columns'>
                    <div class='column'>
                        <p>Última lectura: Hace <strong class='has-text-white'>5</strong> segundo(s)</p>
                        <p class='is-size-5'><i class='fa fa-code'></i> con <i class='fa fa-heart has-text-danger'></i>
                            por <a target='_blank' class='has-text-warning'
                                href='https://parzibyte.me/blog'>Parzibyte</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

En el caso del termómetro, FontAwesome ofrece 5 clases distintas para el termómetro. Podemos mostrar el termómetro vacío, a un cuarto, a la mitad, tres cuartos o lleno. De este modo podemos agregar más dinamismo al termómetro.

Fíjate en la línea 19: el termómetro tiene la clase fa-thermometer-half así que está a la mitad, pero como lo dije, puede ser cualquiera de estas:

  • fa-thermometer-empty – Vacío
  • fa-thermometer-quarter – Un cuarto
  • fa-thermometer-half – A la mitad
  • fa-thermometer-three-quarters – Tres cuartos
  • fa-thermometer-full – Lleno

Además de las clases, siempre eres libre de cambiar el icono o modificar la plantilla en general. Por cierto, en este caso toda la plantilla está hecha con Bulma.

Si quieres puedes ver más contenido sobre Bulma en mi blog.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 días hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.