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
