El día de hoy aprenderemos como crear un sencillo contador regresivo para ubuntu como este:
También aprenderemos a personalizarlo, subirlo y como insertarlo en un blog o web.
Pero vamos paso a paso:
1- Estuctura de archivos.
- Creas una carpeta con el nombre widged.
- Crearemos tres archivos dentro de "widged":
widged.html ,
estilo.css y
fechas.js
- Luego descargaremos un cuarto archivo llamado
jquery.js desde
aquí (clic derecho guardar enlace) y lo guardamos también dentro de la carpeta "widged".
2- Estructura del widged.
Tendremos un contenedor principal y cuatro contenedores mas que estarán al mismo nivel:
3- Contenido de los archivos
widged.html
<!DOCTYPE html>
<html>
<head>
<title>Ubuntu Countdown</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fechas.js"></script>
<link type="text/css" rel="stylesheet" href="estilo.css" media="screen"/>
<meta http-equiv="Content-Type" content="text/html; gcharset=ISO-8859-1"/>
</head>
<body>
<!-- ________________Contenedor principal_________________ -->
<div class="principal">
<!-- _______________Contenedor para la imagen________________ -->
<!-- El logo de Ubuntu de la versión en cuestión o imagen -->
<div class="marco1" id="marco1">
<img id="logo" src="logo1.png" />
</div>
<!-- _______________Contenedor para el contador________________ -->
<!-- debe estar bacia, se llena con una funcion javascript -->
<!-- contendrá la leyenda de días faltantes y lik de descarga -->
<div class="marco2" id="indic"></div>
<!-- ____________Contenedor para la barra de progresso_____________ -->
<!-- debe estar bacia, se llena con una funcion javascript -->
<div id="cont"><div id="progress"> </div> </div>
<!-- ____________Contenedor para el boton "acerca de"_____________ -->
<!-- Este div se convierte en un botón que muestra los creditos -->
<div id="web" onclick="about();"> <a > Acerca de</a></div>
<!-- ________________Contenedor para los creditos____________________ -->
<!-- Este div está oculto por defecto,se muestra con el boton"acerca de" -->
<div id="creditos">
<br>Este widged ha cido creado por:<br><b>
<!-- tu nombre y link personal -->
<a href="la ruta de tu facebook/twetter/etc" target="_blank">Tu nombre</a>
</b><br>para:<br>
<!-- aqui pones la ruta de tu web -->
<a href="http://www.tu_web.com/" target="_blank">
<b>www.tu_web.com</b><br><br>
<!-- aqui pones la ruta de tu foto -->
<img id="foto" src="tu-foto.jpg"/></a><br>
<!-- botón para ocultar los creditos -->
<div class="boton" onclick="about_close();">cerrar</div>
</div>
</div> <!-- cierra el div principal -->
</body>
</html>
fechas.js
Contiene las funciones que hacen el cálculo de las fechas y escriben el resultado en el html.
// lo que esta en esta funcion se ejecute al cargar la pagina.
$(document).ready(function(){
// Fecha de lanzamiento de la última versión
var old = new Date(2012, 9, 28, 0, 0, 0);
// Fecha de lanzamiento de la próxima versión
var fecha = new Date(2013, 2, 28, 0, 0, 0);
// Esto captura la fecha del sistema
var hoy = new Date();
// Esto obtiene los dias restantes
var dif = fecha.getTime() - hoy.getTime();
var diferencia = Math.floor(dif / (1000 * 60 * 60 * 24));
// Muestra en el widged los dias restantes
document.getElementById("indic").innerHTML = "Faltan <br>"
+" <span id= \"dias\" style= \"display: inline-block;\">"
+diferencia+"</span><br> dias";
// Obtiene los dias que van transcuriendo hasta el lanzamiento
var dif2 = fecha.getTime() - old.getTime();
var lapso = Math.floor(dif2 / (1000 * 60 * 60 * 24));
// calcula el porcenteje de dias transcurridos
var porcentaje = Math.floor(((lapso-diferencia)*100)/lapso);
// Selecciona el div progress
progres_bar = document.getElementById('progress');
// Cambiamos el porcentaje de width al porcentaje de dias transcurridos
progres_bar.setAttribute('style','width: '+porcentaje+'%;');
//---------------------- * --------------------------------------
//--Cambiamos el texto de dias faltantes por el link de descarga
//--Esto ocurre cuando quedan cero dias para el lanzamiento
//---------------------------------------------------------------
if (diferencia==0) {
document.getElementById("marco1").innerHTML ="<a href=\"http://www.ubuntu.com"
+"/download\"><img id=\"logo\" src=\"logo1.png\"/> </a>";
document.getElementById("indic").innerHTML = "<a href=\"http://www.ubuntu.com"
+"/download\">Disponible <br><span id= \"dias\" style= \"display: inline-block;\">"
+"Descargalo</span><br> ya!</a>";
}
})
// Muestra los creditos
function about(){
creditos = document.getElementById("creditos");
creditos.setAttribute('style','display:inline');
}
// Oculta los creditos
function about_close(){
creditos = document.getElementById("creditos");
creditos.setAttribute('style','display:none');
}
Y por último agregamos el archivo:
estilo.css
Este carga la imagen de fondo detras del logo, crea los colores naranja y el color y estilo del texto y otros elementos.
.principal, #about{
width:100%;
height:100%;
background-color:#111;
border-radius: 20px;
}
.marco1{
width:100%;
height:80%;
border-radius: 20px ;
background-color:#000;
background-image: url("gun_metal.png");
background-repeat: repeat;
background-attachment: fixed;
}
#cont, #progress{
height: 4px;
width: 100%;
background: #000;
}
.marco2, #progress{
width:100%;
background: -moz-linear-gradient(19% 75% 90deg, #EB470f, #F58423);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5842f),to(#EB4701));
background: -o-linear-gradient(rgb(96%, 49%, 13%),rgb(92%, 28%, 6%));
font-size:1em;
font-family:monospace;
text-align: center;
text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
padding: 2px 0px 0px 0px;
}
#dias{
color:#fff;
font-size:2em;
text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
}
#logo{
width:100%;
}
#web{
color:#4C4C4C;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
text-align: center;
cursor: pointer;
font-family:monospace;
padding: 4px;
}
a{
color:#808080;
text-decoration: none;
text-transform:
font-family: Courier, monospace;
}
a:hover{
color:#fff;
}
#creditos{
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
text-align: center;
background-color: #070707;
width: 100%;
height:100%;
position: absolute; left: 0px; top: 0px;
border-radius: 20px;
color:#4C4C4C;
font-size: 15px;
font-family:arial,helvetica,sans-serif;
display: none;
}
.textbox{
font-size: 15px;
width: 25%;
max-width: 25%;
}
.boton{
display: inline-block;
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
cursor: pointer;
font-family:monospace;
background: -moz-linear-gradient(center top,rgba(
255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100% );
border: 1px solid #999;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color:#fff;
bottom:5px;
}
.boton:hover{
box-shadow: 0px 0px 5px #fff;
-webkit-box-shadow: 0px 0px 5px #fff;
-moz-box-shadow: 0px 0px 5px #fff;
}
.boton:active{
top:1px;
}
#foto{
width: 33%;
padding: 0% 33% 0% 33%;
}
No olviden colocar las imágenes en la carpeta widged.
4- Hospedaje.
Si cuentas con un servidor solo lo subes, copias la ruta y listo.
Si no cuentas con un servidor puedes usar una cuenta de Dropbox (
crear cuenta e instalar) como yo lo hago.
Guardas la carpeta widged en tu carpeta publica de dropbox, y copias el enlace público de
widged.html.
4- Insertarlo en tu web o blog.
Este es el código para insertarlo en tu web:
<iframe frameborder="0" width="200" height="250" scrolling="no"src="widged.html">
Ubuntu countdown</iframe>
Donde "
widged.html" lo sustituyen por la ruta completa en el servidor o por el enlace público de dropbox.
Por ejemplo este es el código para insertarlo desde mi cuenta, lo pueden probar y darse cuenta de lo rápido y fiable que resulta cargarlo desde el servidor de Dropbox
<iframe frameborder="0" width="200" height="250" scrolling="no"
src="https://dl.dropbox.com/u/59010066/web/widged/widged.html">
Ubuntu countdown</iframe>
Y por último aquí esta el count down funcionando.
Descargar este ejemplo
Si te ha gustado esta entrada:
Comenta.
No cuesta nada!!!
suscríbete al blog 
Siguenos en twitter 
Comenta.
Software Libre 
Linux 
Ubuntu 
Tutoriales 
Diseño Web 
Noticias 
Humor 
Windows 
