de webmaster a webmaster

Bonita página de mantenimiento

sin comentarios, faltaría plus, venga haz el tuyo pinchando aquí que esto tiene premio seguro!

Llevo días dándole vueltas a diseñar una página de mantenimiento atractiva y diferente para un cliente. Dicho servidor entra cada día en un periodo de mantenimiento de una media hora, tiempo en el que no está disponible dicha web. Así que tras el salto vamos a ello.

Estaba investigado otras opciones buscando cosas como “Maintenance html page” en la gran G y sinceramente no he encontrado nada realmente de oOoOh si bien si que he visto una página con un formulario para dejar tu email y con ello para que seas avisado a la vuelta del servicio, es una idea tan interesante como peligrosa pues si es un mantenimiento programado vale, tienes bastantes garantías de que a la vuelta no existirán problemas pero cuando muestras dicha página de mantenimiento porque tienes el servidor colapsado o con problemas gordos… mala idea ponerte a lanzar emails de “vuelve vuelve” pues la posibilidad de que se vuelva a caer es grande.

Pues bien, y en relación a la imagen que encabeza este artículo hoy sin más mientras buscaba información sobre un bug de Windows 10 que enlazaba a Reddit me he topado con una pantalla de “Estamos de mantenimiento” muy atractiva, el fondo es incluso animado. Algo así me gustaría, así que vamos a investigar más pues necesitamos una base, una algo que no dependa de recursos externos, un HTML y punto sobre el que construir una imagen ASCII o ANSI que mostrar sin tener que cargar otros archivos gráficos de imágenes, ni CSS, ni nada más que ese HTML.

He encontrado en GitHub un código sencillo que puede servir de base y que te muestra algo tal que así:

El código, lo tienes en GitHub con sus futuras actualizaciones y tal, pero para los más vagos y como es cortito lo copio a continuación, más abajo tenéis el enlace a GitHub:

<!doctype html>
<title>Site Maintenance</title>
<style>
  body { text-align: center; padding: 150px; }
  h1 { font-size: 50px; }
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 650px; margin: 0 auto; }
  a { color: #dc8100; text-decoration: none; }
  a:hover { color: #333; text-decoration: none; }
</style>

<article>
    <h1>We&rsquo;ll be back soon!</h1>
    <div>
        <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. If you need to you can always <a href="mailto:#">contact us</a>, otherwise we&rsquo;ll be back online shortly!</p>
        <p>&mdash; The Team</p>
    </div>
</article>

Bueno, ahora sólo falta ponerse manos a la obra.

Enlace a Reddit (la de la primera captura): No hay enlace si no están en mantenimiento, os dejo una captura de lo que me he encontrado en reddit.com

Enlace a GitHub con la página de HTML: https://gist.github.com/pitch-gist/2999707

Be Sociable, Share!

Escrito por un tal uvedobles.com

October 2nd, 2015 a las 9:09 am

Deja aquí tu comentario, tu huella, o mejor ingrésame unos euros