28% de descuento del curso en SQL Server

Estrada Web Group Estrada Web Group
Página Coming Soon o Próximamente
Estrada Web Group
Estrada Web Group
Estrada Web Group Estrada Web Group
Calificar:
15 diciembre Programa..

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

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.

  1. Nombre de dominio.
  2. Servidor o hosting donde lo vas a montar
  3. Crear una base de datos con una tabla donde se agregaran los subscriptores.
  4. Cuentas de correo y redes sociales.

Las funcionalidades de la página que desarrolle son las siguientes:

  1. Da un aviso que próximamente se abrirá el sitio.
  2. El visitante puede inscribirse al boletín
  3. Muestra los días, horas, segundos que faltan para inagurar el sitio.
  4. La página realiza unas validaciones.
    1. Comprueba que se capture algo en el campo de texto
    2. Valida que tenga la estructura de un correo.
  5. 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 &copy; 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

Compartir:

Cargando...
Descarga el código fuente

Obten el código del sistema de gestión de proyectos.

Shape