Una Web+Libre: Como crear un Count Down para Ubuntu

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!!!

miércoles, 14 de noviembre de 2012

Como crear un Count Down para Ubuntu

2 comentarios:

Seguidores