Cómo crear la página Coming Soon o Próximamente

Como se comentó en el artículo anterior estamos desarrollando un sistema para administración de proyectos, la primera tarea que realizaremos es una página web de "En breve" o "Coming Soon" la cual utilizaremos para informar al visitante de la inminente puesta en funcionamiento de la web que está visitando. Hay algunos elementos que uno tiene que considerar añadir a este tipo de páginas: un formulario para la suscripción a un boletín o lista de correo; botones y enlaces a los perfiles de los medios sociales; tweets acerca del nuevo proyecto; noticias; etc. Este post nos muestra algunos ejemplos creativos y nos ofrece algunos consejos.
Estamos en el entendido que ya cuentas con el dominio, el servidor donde se va a montar el sitio y el proyecto creado en el Visual Studio. Una lista rápida que debes tener previamente.
- Nombre de dominio.
- Servidor o hosting donde lo vas a montar
- Crear una base de datos con una tabla donde se agregaran los subscriptores.
- Cuentas de correo y redes sociales.
Las funcionalidades de la página que desarrolle son las siguientes:
- Da un aviso que próximamente se abrirá el sitio.
- El visitante puede inscribirse al boletín
- Muestra los días, horas, segundos que faltan para inagurar el sitio.
- La página realiza unas validaciones.
- Comprueba que se capture algo en el campo de texto
- Valida que tenga la estructura de un correo.
- Envía un mensaje de aviso, el cual te indica si te registraste o hay un error.
Primero creamos el formulario el cual el html se muestra a continuación:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="MXProject._Default" Culture="auto:es-MX" UICulture="auto" %> <!DOCTYPE html> <!--[if IE 8]> <html lang="es" class="ie8 no-js"> <![endif]--> <!--[if IE 9]> <html lang="es" class="ie9 no-js"> <![endif]--> <!--[if !IE]><!--> <html xmlns="http://www.w3.org/1999/xhtml" lang="es"> <!--<![endif]--> <!-- BEGIN HEAD --> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Administración de Proyectos</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta content="" name="description" /> <meta content="" name="author" /> <!-- BEGIN GLOBAL MANDATORY STYLES --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" /> <link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> <link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" /> <link href="assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" /> <!-- END GLOBAL MANDATORY STYLES --> <!-- BEGIN PAGE LEVEL STYLES --> <link href="assets/admin/pages/css/coming-soon.css" rel="stylesheet" type="text/css" /> <!-- END PAGE LEVEL STYLES --> <!-- BEGIN THEME STYLES --> <link href="assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css" /> <link href="assets/global/css/plugins.css" rel="stylesheet" type="text/css" /> <link href="assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css" /> <link id="style_color" href="assets/admin/layout/css/themes/darkblue.css" rel="stylesheet" type="text/css" /> <link href="assets/admin/layout/css/custom.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="assets/global/plugins/jquery-notific8/jquery.notific8.min.css"/> <!-- END THEME STYLES --> <link rel="shortcut icon" href="favicon.ico" /> </head> <!-- END HEAD --> <!-- BEGIN BODY --> <!-- DOC: Apply "page-header-fixed-mobile" and "page-footer-fixed-mobile" class to body element to force fixed header or footer in mobile devices --> <!-- DOC: Apply "page-sidebar-closed" class to the body and "page-sidebar-menu-closed" class to the sidebar menu element to hide the sidebar by default --> <!-- DOC: Apply "page-sidebar-hide" class to the body to make the sidebar completely hidden on toggle --> <!-- DOC: Apply "page-sidebar-closed-hide-logo" class to the body element to make the logo hidden on sidebar toggle --> <!-- DOC: Apply "page-sidebar-hide" class to body element to completely hide the sidebar on sidebar toggle --> <!-- DOC: Apply "page-sidebar-fixed" class to have fixed sidebar --> <!-- DOC: Apply "page-footer-fixed" class to the body element to have fixed footer --> <!-- DOC: Apply "page-sidebar-reversed" class to put the sidebar on the right side --> <!-- DOC: Apply "page-full-width" class to the body element to have full width page without the sidebar menu --> <body> <form id="form1" runat="server"> <div class="container"> <div class="row"> <div class="col-md-12 coming-soon-header"> <a class="brand" href="Default.aspx"> MXProject </a> </div> </div> <div class="row"> <div class="col-md-6 coming-soon-content"> <h1> <asp:Label ID="lblTitulo" runat="server" meta:resourceKey="lblTitulo"></asp:Label></h1> <p> <asp:Label ID="lblMensaje" runat="server" meta:resourceKey="lblMensaje"></asp:Label> </p> <br/> <div class="form-inline"> <div class="input-group input-large"> <fieldset class="form" id="register"> <asp:TextBox ID="txtSuscriptor" runat="server" CssClass="form-control required email"></asp:TextBox> <span class="input-group-btn"> <asp:Button ID="btnEnviar" runat="server" Text="" CssClass="btn blue submit register" meta:resourceKey="btnEnviar"/> </span> </fieldset> </div> </div> <ul class="social-icons margin-top-20"> <li> <a href="https://twitter.com/jiestradah" data-original-title="Twitter" class="twitter"></a> </li> </ul> </div> <div class="col-md-6 coming-soon-countdown"> <div id="defaultCountdown"> </div> </div> </div> <!--/end row--> <div class="row"> <div class="col-md-12 coming-soon-footer"> 2014 © MXProject. Administrador de Proyectos (PMO). </div> </div> </div> <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --> <!-- BEGIN CORE PLUGINS --> <!--[if lt IE 9]> <script src="assets/global/plugins/respond.min.js"></script> <script src="assets/global/plugins/excanvas.min.js"></script> <![endif]--> <script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script> <script src="assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script> <!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --> <script src="assets/global/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> <script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script> <script src="assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> <script src="assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> <script src="assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script> <script src="assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script> <script src="assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script> <!-- END CORE PLUGINS --> <!-- BEGIN PAGE LEVEL PLUGINS --> <script src="assets/global/plugins/countdown/jquery.countdown.min.js" type="text/javascript"></script> <script src="assets/global/plugins/backstretch/jquery.backstretch.min.js" type="text/javascript"></script> <!-- END PAGE LEVEL PLUGINS --> <!-- BEGIN PAGE LEVEL SCRIPTS --> <script src="assets/global/scripts/metronic.js" type="text/javascript"></script> <script src="assets/admin/layout/scripts/layout.js" type="text/javascript"></script> <script src="assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script> <script src="assets/admin/layout/scripts/demo.js" type="text/javascript"></script> <script src="assets/admin/pages/scripts/coming-soon.js" type="text/javascript"></script> <script src="assets/global/plugins/jquery.validate.min.js"></script> <script src="assets/global/plugins/jquery.validation.net.webforms.min.js"></script> <script src="assets/global/plugins/jquery-notific8/jquery.notific8.min.js"></script> <!-- END PAGE LEVEL SCRIPTS --> <script> jQuery(document).ready(function () { ComingSoon.init(); // init background slide images $.backstretch([ "assets/admin/pages/media/bg/1.jpg", "assets/admin/pages/media/bg/2.jpg", "assets/admin/pages/media/bg/3.jpg", "assets/admin/pages/media/bg/4.jpg" ], { fade: 1000, duration: 10000 }); }); $(function () { $("#form1").validateWebForm(); }); <%If Session("Agregado") = "1" Or Session("Agregado") = "0" Then%> var settings = { theme: '<%= IIf(Session("Agregado") = "1", "lime", "ruby")%>', sticky: false, horizontalEdge: "bottom", verticalEdge: "right" } settings.life = 5000 $.notific8('zindex', 11500); $.notific8($.trim('<%= IIf(Session("Agregado") = "1", "Gracias por subscribirte", "No se puede subscribir en este momento")%>'), settings); <%End If%> </script> <!-- END JAVASCRIPTS --> </form> </body> <!-- END BODY --> </html>
El código de servidor es el siguiente
Imports Sys.Controlador Public Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Session("Agregado") = "3" End Sub Private Sub btnEnviar_Click(sender As Object, e As EventArgs) Handles btnEnviar.Click If Insertar.subscriptor(txtSuscriptor.Text) = "" Then Session("Agregado") = "1" Else Session("Agregado") = "0" End If End Sub End Class
Puedes ver el funcionamiento en http://www.mxprojectm.com