Instalando MySql y sus Herramientas

MySql es un excelente gestor de bases de datos, muy útil para trabajar con aplicaciones web, que además de tener una licencia GPL es multiplataforma y gratuito.
Si eres desarrollador web o principiante no importa, creo que todos los que hemos iniciado esta carrera nos hemos topado de alguna manera u otra con esta aplicación, el hecho es que el software libre ha hecho una gran contribución en este campo.

El servidor:  Es la aplicación de escucha que recibe peticiones de conexión y suministra el motor de base de datos.

El cliente: Son las aplicaciones que se conectan al servidor MySql para leer o escribir en la base de datos.

phpmyadmin: Cliente web (web-gui) muy potente y popular, de fácil manipulación y configuración.

Servidor Xamp: Servidor web multiplataforma, la "x" se sustituye por el sistema operativo anfitrión (Lamp en Linux, Wamp en windows), las otras iniciales significan:
a: Apache, m: MySql, p: Php, piton.

MySql Workbench: Cliente GUI capaz de crear diagramas y generar su código sql, además de conectarse al servidor y crear la base de datos. es muy útil, fácil de usar y ahorra mucho tiempo.

Instalación en Ubuntu:

Servidor:

sudo apt-get install mysql-server

Cliente (consola):

sudo apt-get install mysql-client

Servidor Lamp (Linux, apache, mysql, php, piton):

sudo apt-get install lamp-server^

phpmyadmin (cliente gui):

sudo apt-get install phpmyadmin

MySql Workbench:
Paquetes .beb: 32 bits y 64 bits.

Instalación En Windows:

Servidor:
Dirígete a la pagina de descargas de MySql y selecciona el archivo correspondiente a tu equipo:
http://dev.mysql.com/downloads/mysql/#downloads.

Servidor Wamp (Windows, apache, mysql, php, piton, phpMyAdmin):
http://dev.mysql.com/downloads/.
Después de la instalación se agrega un icono  al área de notificación desde donde podemos iniciar o detener los servicios

MySql Workbench:
http://dev.mysql.com/downloads/workbench/#downloads.

Otras Herramientas como:
clusters, conectores, conector/ODBC y librerías  en la pagina de descargas de MySql:
http://www.mysql.com/downloads/

Si te ha gustado esta entrada:

  Comenta.

  No cuesta nada!!!

Crea tu web con Aptana Studio 3

Aptana Studio es un excelente editor para crear y diseñar aplicaciones y paginas web, es multiplataforma y tiene licencia GNU, lo que lo convierte en una excelente alternativa para los que usamos software libre.
Aptana Studio soporta tecnologías como: HTML5, CSS3, Javascript, Ruby, Rails, PHP y Python y gran variedad de plantillas como HTML5 Boilerplate entre otros.

Instalación en Windows/Linux/Mac OS:
Podemos descargar Aptana Studio 3 para nuestro sistema operativo favorito desde su pagina de descargas:
http://www.aptana.com/products/studio3/download.

Aptana Studio 3 en Windows 7

Aptana Studio 3 enUbuntu 12.04

Requisitos para Ubuntu:

- xulrunner:
aptitude install xulrunner
- Git:

sudo apt-get install git

- El descompresor p7zip: Aptana Studio viene comprimido en un paquete .zip, por lo que antes necesitamos instalar:

sudo apt-get install p7zip-full p7zip-rar rar unrar

- Oracle Java:

sudo add-apt-repository ppa:webupd8team/java &&
sudo apt-get update &&
sudo apt-get install oracle-java7-installer

Si tienes otra versión de java instalada, seleccionamos Oracle java con:

sudo update-alternatives --config java

Una vez descargado el paquete zip, lo descomprimimos: clic derecho/ Extraer aquí
y buscamos el archivo ejecutable dentro de la carpeta: AptanaStudio3.

O podemos moverlo a otra ubicación y crear un lanzador:

Abrimos /opt como administrador:

sudo nautilus /opt

Creamos la carpeta "aptana"  y colocamos el contenido de la carpeta extraída en esta carpeta.
creamos un script para ejecutarlo facilmente:

sudo gedit /usr/bin/aptana

Se nos abrirá el editor de texto y colocamos el siguiente script dentro:

#!/bin/sh
#export MOZILLA_FIVE_HOME="/usr/lib/mozilla/"
export APTANA_HOME="/opt/aptana"
$APTANA_HOME/Aptana_Studio_3 $*

Luego damos permisos a los archivos que acabamos de crear:

sudo chmod 755 /usr/bin/aptana
sudo su
chmod 777 /opt/aptana
cd /opt/aptana
chmod 777 *

Con esto ya se puede lanzar desde el terminal con el comando "aptana", pero para que aparezca en el dash creamos el lanzador:

sudo gedit /usr/share/applications/aptana.desktop

y pegamos el siguiente código:

[Desktop Entry]
Encoding=UTF-8
Name=Aptana Studio 3
Comment=IDE para html, Ruby, Rails, Python, PHP
Exec=env UBUNTU_MENUPROXY= /usr/bin/aptana
Icon=/opt/aptana/icon.xpm
Terminal=false
Type=Application
Categories=GNOME;Application;Development;
StartupNotify=true

y por último arrastramos el lanzador al escritorio o al lanzador de unity.

Si te decides a probarlo, cuéntanos como te ha ido.

Si te ha gustado esta entrada:

  Comenta.

  No cuesta nada!!!

Instalando menús alternativos en Ubuntu

Una de los reproches que muchos le hemos hecho a unity es lo poco práctico que es el dash para buscar aplicaciones, a pesar de eso no podemos negar su elegante acabado y utilidad, pero lo que me gusta del software libre es la variedad ya podemos instalar algunos menús o lanzadores alternativos para facilitarnos las cosas.

1- ClassicMenu Indicator
Este menú nos recuerda al clásico de gnome, agrega un icono en los indicadores de fácil acceso y acomoda las aplicaciones por categorías, además de las opciones de configuración del sistema.

Podemos instalarlo desde el repositorio oficial:

sudo add-apt-repository ppa:diesch/testing &&
sudo apt-get update && sudo apt-get install classicmenu-indicator

2- Gnome-Pie
Este es un menú muy diferente a otros, soporta temas, es muy fácil de usar (ctrl+alt+esp) y además se ve muy bien.

Lo instalamos con:

sudo add-apt-repository ppa:simonschneegans/testing &&
sudo apt-get update && sudo apt-get install gnome-pie

3- Cardapio
Este es un menú sencillo pero muy configurable, tiene un panel de búsqueda en la parte superior y botones de cesión y apagado en la parte inferior.

Instalación:

sudo add-apt-repository ppa:cardapio-team/unstable &&
sudo apt-get update && sudo apt-get install cardapio cardapio-gnomeshell

Crear lanzador para cardapio:
creamos un archivo en la carpeta personal llamado: cardapio.desktop con este contenido:

[Desktop Entry]
Version=1.0
Type=Application
Terminal=false
Exec=cardapio show-near-mouse
Name=Cardapio
Icon=start-here
#NoDisplay=true
#Hidden=true
X-Ayatana-Desktop-Shortcuts=Properties;
Categories=Utility;

[Properties Shortcut Group]
Name=Properties
Exec=cardapio options
TargetEnvironment=Unity

Luego le asignamos permisos:

sudo chmod 777 cardapio.desktop

y lo arrastramos hacia el lanzador, para hacer que se mantenga en el lanzador: clic derecho: mantener en el lanzador.

Colocar cardapio:
(Solo si cardapio aparece en el centro de la pantalla)
- Abrimos el administrador de opciones de compiz.
si no lo tienes instalado lo buscas en el centro de software como: "compiz". O con este comando:

sudo apt-get install compizconfig-settings-manager

- Nos movemos a: "Administrador de ventanas".
- activamos el plugin "colocar ventanas".
- Luego entramos en el para configurarlo:vamos a la pestaña "fijar el comportamiento de ventanas" y "ventanas con posiciones fijas", luego clic al botón: "nuevo" y ponemos estos valores:

name=cardapio
pisicion x= 70
posicion y= 30

Si te decides a probarlos, cuéntanos como te ha ido.

Si te ha gustado esta entrada:

 Comenta.

  No cuesta nada!!!

Instalando MS Office 2007-2010 en Ubuntu 12

Lo mejor y mas recomendable, si usas un sistema Linux-Unix es utilizar LibreOffice como suite ofimática , no suelo escribir sobre software privativo y no suelo recomendar el uso de MS Office en Ubuntu ni en ninguna otra distribución Linux por los siguientes motivos:

No es libre y esto puede llevar a conflictos con licencias, piratería y otros problemas procedentes del software privativo.

No es nativo, puede crear inestabilidades en el sistema, errores en la aplicación y/o fallas de rendimiento.

Pero como algunos lectores del blog me han estado solicitando un tutorial sobre el tema, me he propuesto encontrar algunas posibles razones para hacerlo, además de probarlo en mi propio equipo para ver su comportamiento.

Nota: Cualquier instalación de software privativo requiere una clave para activar la licencia, por lo que no deben de instalarse copias piratas o ilegales.

A pesar de todo lo anterior, ¿por qué instalar MS Office?
Creo que la única razón es la búsqueda de una mejor compatibilidad, y no digo que LibreOffice no ofrezca compatibilidad, pero el actual formato de MS para sus archivos ofimáticos le da un poco de problemas a Libre Office principalmente en los gráficos, imágenes vectoriales y algunas transparencias, el principal conflicto se genera entre PowerPoint e Impress. Por lo tanto podemos utilizar la suite de MS para visualizar archivos ppt, pptx, pps y ppsx.

Aun así no se recomienda usar con formatos propios de LibreOffice ni con con archivos de MS que se visualicen bien con LibreOffice.

Después de todo el sermón anterior vamos a instalar:

Preparando wine

Lo mejor es disponer de la versión mas reciente de wine, ya que constantemente se agregan mejoras a su capa de compatibilidad.
Si ya tienes wine instalado pero no desde su repositorio oficial, lo mejor será eliminarlo primero.

sudo apt-get remove --purge wine
rm -rf .wine

Luego agregamos el repositorio:

sudo add-apt-repository ppa:ubuntu-wine/ppa
sudo apt-get update
sudo apt-get install wine

Si tu sistema es de 64 bits debes crear una arquitectura de 32 bits para wine:

export WINEARCH=win32

Agregar librerías necesarias 

El paso siguiente es configurar las librerías que se necesitarán, para esto escribimos en el Dash: “Winetricks”.

Elegir la opción “Select the default Wineprefix” y Aceptar, luego la opción “Install a windows DLL or component” y Aceptar

En esta ventana vamos a buscar e instalar de una por una y en este orden las siguientes librerías:  msxml6, dotnet20, dotnet30, gdiplus, riched20, riched30 y vcrun2005;

Si tienes algún problema instalando dotnet30, instala primero dotnet20 sp1 y dotnet20 sp2

En el proceso, pedirá de cuando en cuando descargar algún paquete .exe de internet y colocarlo en la carpeta que se nos abre, luego volverlo a intentar, esto es importante ya que son requerimientos de las librerías. Normalmente winetricks abre el navegador o nos da la ruta necesaria para descargarla app.

Instalación:
Luego procedemos a instalar ya sea desde cd o archivo.

Nota: Con esta configuración podemos instalar tanto office 2007 como 2010, pero no se puede tener ambas instalaciones, debes escoger bien la que se va a instalar.

Lo mejor es una instalación personalizada ya que no queremos todo lo que trae el paquete de Office, es mejor añadir solo las aplicaciones que se utilizarán.

Después de la instalación agregaremos las fuentes de MS.
volvemos a winetricks , elegir la opción “Select the default wineprefix” y aceptar.
Elegir la opción “Install a font” y seleccionar “corefonts”.

Ahora vamos a configurar la librerías:
buscamos en el dash "configurar wine", nos movemos a la pestaña "librerías" , botón "añadir" y agregamos: msxml6, gdiplus, riched20, luego para cada una vamos al botón  "editar" y  cambiar a ”Native (windows)”.

Ahora ya podemos ejecutar MS Office 2007 o 2010 en Ubuntu.

Pero no puedo dejar pasar esta oportunidad sin recomendar LibreOffice.
La mejor suite ofimática para Linux.

En Ubuntu puedes actualizar a la última versión:

Quitar la versión actual:

sudo apt-get purge libreoffice* &&
sudo apt-get autoremove

Instalar desde el repositorio official:

sudo add-apt-repository ppa:libreoffice/ppa &&
sudo apt-get update &&
sudo apt-get install libreoffice &&
sudo apt-get install --reinstall lo-menubar &&
sudo apt-get install libreoffice-l10n-es

instalar transiciones 3D para Impress:

apt-get install libreoffice-ogltrans libobasis3.6-ogltrans

Bueno eso es todo, pruébalo y nos comentas como te ha ido.

Si te ha gustado esta entrada:

 Comenta.

  No cuesta nada!!!

Arranque Dual: Windows-Ubuntu [tutorial]

Si has escuchado sobre Ubuntu, te llama la atención, te parece genial, y quisieras instalarlo; pero no te atreves porque no quieres perder el Windows que viene en tu laptop. entonces despúes de este tutorial no tendrás excusa.

Como hacer que Ubuntu conviva con Windows en un mismo equipo
Hace algún tiempo lograr una convivencia como esta era un poco mas complicado, pero en los últimos años la instalación de Ubuntu se ha facilitado cada vez mas.

Si tu equipo no tiene aun ningún sistema operativo, debes instalar Windows primero, pero este tutorial no pretende enseñar como instalar Windows, mas bien nos centraremos en como instalar Ubuntu.

Primero debemos configurar el equipo para arrancar desde cd (o memoria usb si es el caso), para ello tenemos que acceder a la bios del equipo, en la mayoría de los equipos se entra con F2, , luego buscamos las opciones de arranque hay que buscar opciones como: permitir arranque mediante usb, permitir inicio rápido y orden de arranque, en esta última debe colocarse la opción de cd/usb de primero.
En algunos equipos basta con presionar F12 para entrar a las opciones de arranque.

Diferentes equipos tienen diferentes bios, por lo que las opciones y las pantallas pueden variar mucho.

Comenzando la instalación:

Arrancamos el equipo desde el  cd/usb.Primeramente seleccionamos el idioma adecuado, después escogemos instalar Ubuntu:

Si cuentas con una conexión a internet que sea rápida y confiable es mejor marcar la opción de dscargar actualizaciones mientras se instala e instalar software de terceros.

Este punto es el más importante: Debemos escoger la opción de instalar Ubuntu junto al SO que tengas, de esta manera tendrás un arranque dual donde escoger con cual SO quieres arrancar.

Otra opción que puedes escoger, si sabes lo que haces, es elegir "mas opciones" para instalar ubuntu en na partición especifica, definir una partición boot, una partición swap, etc.

Es importante saber que el instalador creará de forma automática una partición para Ubuntu, solo debes escoger el espacio en disco que ocupará esta partición. Esta partición es invisible para windows por lo que éste ni se dará cuenta que hay un nuevo SO instalado.

Luego seleccionas tu ubicación y distribución de teclado y esperamos unos 15-20 minutos mas o menos hasta que termine la instalación.

Una vez terminada la instalación hay que reiniciar el equipo y quitar el medio de instalación para arrancar nuestro equipo normalmente.

Es aquí donde nos encontraremos con el gestor de arranque grup2 que nos permitirá iniciar nuestro equipo con el SO que seleccionemos.

Nota importante: Al iniciar windows éste hará una comprobación de errores en el disco duro, pero no hay que preocuparse, solo debes esperar a que termine esta comprobación para iniciar windows.

Por último hay que configurar y actualizar nuestro Ubuntu, te puede interesar mi post: que hacer después de instalar Ubuntu.

Si te ha gustado esta entrada:

Comenta.

  No cuesta nada!!!

Cuando gane mas dinero [Humor]

Tal vez cuando gane mas dinero...

Usa Ubuntu...
Es mas barato.!!!

Si te ha gustado esta entrada:

Comenta.

  No cuesta nada!!!

ScreenCast Automatizado con VLC

Como ya saben vlc hace muchas cosas, una de ellas es grabar screencast o capturas de video del escritorio.
Para realizarlo vamos a: abrir medio/escritorio y cambiamos "reproducir" por "convertir".

Luego seleccionamos el destino, el formato y le damos al botón "iniciar"

En algunas ocasiones he grabado un screencast de esta manera, pero me resultaba molesto tener que editar el video para que no apareciera el reproductor en la pantalla al iniciarlo y al detenerlo, es por eso que decidí buscar alguna forma automática para hacerlo y la verdad no encontré nada en concreto en la web, así que me lancé al proceso de prueba y error... Después de muchos errores logré que un comando me funcionara para iniciar la grabación.

Pero de igual manera tienes que abrir el terminal para ejecutar estos comandos y este terminal aparece en el video.

Hasta que por fin encontré la solución perfecta para grabar un screencast de forma automática mediante archivos sh y atajos de teclado:

Paso 1:
Creamos un archivo  sh que llamaremos "grabacion.sh" y que contendrá el siguiente código:

#!/bin/bash
cvlc screen://  --sout '#transcode{vcodec=theo,vb=800,fps=4,scale=1,acodec=mp3,
ab=128,channels=2}:std{access=file,mux=ogg,dst='/home/rolando/tv.avi'}';

no olviden cambiar la ruta por la que ustedes tengan.

y otro llamado "detener.sh" con este código:

#!/bin/bash
cvlc://quit;

paso 2:
Pulsamos sobre cada archivo: clic derecho/ propiedades/permisos y seleccionamos la opción "ejecutar como un programa".

Paso 3:
Instalamos el gestor de configuración de compiz (si no lo tienen instalado ya)

sudo apt-get install compizconfig-settings-manager

o lo buscamos en es centro de sofware.

Paso 4:
Abrimos el gestor de configuración de compiz, hacemos click en "comandos" y agregamos dos nuevo comando con la ruta del archivos sh.
por ejemplo en mi pc me quedaron así :
Command line0 = bash '/home/rolando/grabacion.sh'
Linea de comandos1= bash '/home/rolando/detener.sh'

Luego agregamos una combinación de teclas para cada comando: yo agregué
ctrl+alt+k  para grabacion.sh
ctrl+alt+l  para detener.sh

Aquí les dejo ambos archivos para que los editen y mejoren a su gusto: scripts.zip.

Si te ha gustado esta entrada:

Comenta.

  No cuesta nada!!!

Probando audacity en Ubuntu y Windows

Muchas veces he querido editar un archivo de audio en Ubuntu y la verdad es que no tenía idea de que alternativa libre podría utilizar para sustituir a Cool Edid Pro que acostumbraba a usar en Windows. Hasta que hace algún  tiempo me topé con Audacity.
Audacity es una aplicación multiplataforma, libre, distribuido bajo la licencia GPL.

Que se puede hacer con Audacity:
- Editar pistas de audio.
- Editar pistas múltiples.
- Grabar audio en tiempo real.
- Convertir entre formatos audio.
- Importar archivos de otros formatos.
- Importar audio desde videos.
- Agregar efectos al sonido.
- Aumentar su funcionalidad con plug-ins.
- y algunas cosas mas que de seguro se me escapan.

Pero vamos a ver un par de ejemplos prácticos de cosas que hacer con Audacity.

Subir el volumen a una pista:
Primero importamos la pista: Archivo/importar/audio.
Nos saldrá algo así:

Luego para subir el volumen usamos el efecto "Amplificar": Efecto/Amplificar.

Audacity calcula automáticamente cuanto volumen se le puede subir, pero si se considera que se puede aumentar mas sin que se escuche mal solo hay que marcar la casilla "permitir recorte", al final, este es el resultado.

Reparar una canción que termina bruscamente.
Si estabas descargando una pista y por algún motivo se interrumpe, es posible que se pueda reparar con un fade_out o dismunución de volumen progresivo.

Lo primero es seleccionar un trozo cerca del final, luego ir en el menú a efecto/desvanecer progresivamente.

Así como este también está el efecto de Aparecer progresivamente, eco, ecualizador, inversión y existen muchos otros efectos que son fáciles de usar,  con un poco de práctica es posible aprender a hacer cosas mas complejas.

Como Instalarlo:

En Ubuntu
Lo buscas en el centro de software de Ubuntu como "audacity" o desde el terminal con este código:

sudo apt-get install audacity

Y si quieres tener siempre la versión mas reciente agregas el repositorio:

sudo apt-add-repository ppa:audacity-team/daily
sudo apt-get update
sudo apt-get install audacity

Muy importante: si quieres exportar audio en mp3, que es un formato no libre, entonces tienes que instalar las librerias de LAME:

sudo apt-get install libmp3lame0

En Windows
Descargas el instalador en este enlace, y la librería LAME o puedes consultar la página del autor: http://audacity.sourceforge.net/download/.

Si te ha gustado esta entrada:

Comenta.

  No cuesta nada!!!

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

CountDown Ubuntu 13.04 Raring Ringtail

A pocos días después del lanzamiento de Ubuntu 12.10 me he animado a diseñar por primera vez un count-down para Ubuntu, siempre me ha gustado el diseño así que le he agregado un poco de estilo css3 con otro poco de javascript y la receta está lista.
Como pueden ver la primera es una captura y el segundo es el widged en funcionamiento

Puedes insertarlo fácilmente en tu blog con este código:

<iframe frameborder="0" height="250" scrolling="no" 
src="https://dl.dropbox.com/u/59010066/web/widged/widged.html"
 width="200">Ubuntu countdown </iframe>

Como no cuento con un servidor, utilizo mi cuenta publica de Dropbox como hosting. Aun así carga rápida y fielmente como pueden ver.

Si quieres aprender como hacerlo y personalizarlo haz click en: Como crear un Count Down para Ubuntu

Si te ha gustado esta entrada:

Comenta.

  No cuesta nada!!!