Como crear una página de lanzamiento con PHP, AJAX y JQuery

Publicado en July 25, 2009 by Damian

En este tutorial les voy a enseñar como hacer una página de lanzamiento como la que en ocasiones nos encontramos cuando visitamos una web sin estrenar con su cuenta atras correspondiente. Además de la cuenta atras más adelante vamos a añadir un pequeño formulario de contácto con AJAX para añadir emails a una base de datos y asi poder mantener a los visitantes actualizados.

cuenta-atras

Para empezar vamos a necesitar un plugin de JQuery muy completo llamado epiClock que va a ser el encargado de realizar la cuenta atras. La verdad que vale la pena echar una ojeada a la página de epiClock , ya que además de cuentas atras podemos crear todo tipo de relojes, cronometros , etc.

Si queremos por ejemplo hacer una cuenta atras hasta el 2012 es tan facil como poner:

$(document).ready(function(){
//espero que cargue el DOM y llamo al plugin
j jQuery('#reloj').epiclock({mode: EC_COUNTDOWN, format: 'V{<sup>dias</sup>} x{<sup>horas</sup>} i{<sup>minutos</sup>} s{<sup>segundos</sup>}', target: 'January 1, 2012 00:00:00'}).clocks(EC_RUN);
});

Como pueden ver le paso tres parametros a .epiclock :

mode: El modo de cuenta atras (countdown).
format: El formato que quiero que en este caso es ‘<sup>dias</sup>’ para los dias y así susecivamente.
target: El tiempo final del contador pasado en modo de fecha.

Y por último inicio el contador con .clocks(EC_RUN)

Una ves que tengo el reloj definido voy a crear el código HTML necesario para que funcione:

<div id="header">
<h3>Como crear una Página de lanzamiento. Más tutoriales en: <a href="http://blog.timersys.com">http://blog.timersys.com</a> </h3>
</div>
<div id="wrapper">
<div id="cuadro2" class="rounded">
<div id="reloj" class="count_down"></div>
</div>

</div>

Y le aplico el siguiente estilo:

body {
color:#666666;
font-family:'Trebuchet MS',sans-serif;
font-size:14px;
line-height:1.5em;
text-align:justify;
}
#header{
width:800px;
height:80px;
text-align:center;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#cuadro2{
padding:15px;
background-color:#EEEEEE;
border:1px solid #CCCCCC;

}
#wrapper{
width:440px;
margin:0 auto;
}
.count_down{
padding: 3px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:38px;
font-weight:bold;
color:#222;
}

.count_down sup{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#555;
padding:0px 10px 0 0;
font-weight:normal;
}

Como toque final voy a redondear las esquinas del DIV contenedor del reloj con jquery.corners como vimos anteriormente en el blog.

$('.rounded').corners('transparent');

Y con eso tendriamos nuestra cuentra atras particular. En el próximo tutorial les explico como crear un formulario con AJAX para guardar todos los emails en una base de datos de forma que podamos mantener actualizados con noticias a nuestros seguidores.
Ver Ejemplo Online
Descargar código

Comparte este artículo:

Links Sponsors

Tags: jquery.plugin, pagina lanzamiento

Categoría: JQuery, MySQL, PHP, Tutoriales

Comments (1)

Como crear una página de lanzamiento con PHP, AJAX y JQuery - II Parte | Timersys says:

August 15, 2009 at 6:31 pm

[...] en August 15, 2009 by Damian Hoy les voy a explicar como crear un formulario AJAX para nuestra página de lanzamiento y así poder crear una base de datos con los emails de nuestros visitantes que quieren manternerse [...]

Timersys