Los increibles datos que se mueven en 1 minuto de internet

El numero de dispositivos conectados a internet ya iguala al de habitantes del planeta: casi siete mil millones. Y en 2015 esa cifra se duplicara. Una investigacion de Intel ha puesto en cifras todo lo que ocurre en la Red en un minuto. Los numeros impactan por si solos, pero aun mas si uno los multiplica por 60 para hacer calculos de una hora y, luego, por 24 para medir la actividad de un dia. Otro estudio, este de Royal Pingdom, sorprende aun a muchos que ignoran que casi el 45 por ciento de los usuarios de internet viven en... ¡Asia! Estados Unidos (11,4 por ciento) y Europa (21,6 por ciento) apenas alcanzan juntos un tercio del total de usuarios en el mundo: 2400 millones. Y 1300 millones ya usan snartphones. Con todo, Internet parece seguir siendo de momento un espacio virtual en el que unos pocos hacen negocios mientras la mayoria se dedica a comunicarse sin mas o al puro ocio. Dos datos lo confirman: el video de 'Gangnam Style' fue el primero en sobrepasar los mil millones de visitas y el 66 por ciento de los correos que se envian no son por motivos de importancia.

Set de botones CSS3 para descargas

Cuando queremos poner una descarga en nuestro blog/web, podemos añadir un simple enlace de texto o una imagen, pero sin duda, lo que mejor queda es un buen boton. En este caso te traigo estos 6 botones con el mismo diseño, pero cada uno con un color diferente. Estan realizados integramente con CSS3 (no contienen ninguna imagen), tienen su funcion hover, su flechita y su efecto presionado. Y como se suele decir, para muestra un boton, en este caso seis, jejeje. Aqui debajo los teneis para que veais como quedan.

Para ponerlos en tu pagina, primero añades este codigo de estilos CSS3 en tu plantilla.

<style>
a.botondescarga {
    position: relative;
    padding: 12px 30px 15px 60px;
    cursor: pointer;color:#000000 !important;
    text-align: left;
    font-weight: bold;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    -moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    display: inline-block !important;
    font: 700 17px 'Arial', Helvetica, Clean, sans-serif;
    margin: 0px 0px 20px 10px;
    position: relative;
    text-decoration: none;
    transition: background-position .2s ease, margin .1s ease;
    -webkit-transition: background-position .2s ease, margin .1s ease;
    -moz-transition: background-position .2s ease, margin .1s ease;
    background-repeat: repeat-x;
}

a.botondescarga:hover { background-position: 0 10px;color:#ffffff !important;transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease; }

a.botondescarga:active {
    -webkit-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    -moz-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    margin: 2px 0 20px 10px;
}

a.botondescarga span.bar {
    width: 1px;
    height: 30px;
    position: absolute;
    background: black;
    top: 5px;
    left: 50px;
}

a.botondescarga div.flecha {
    position: absolute;
    left: 20px;
    top: 14px;
}

a.botondescarga div.flecha span.top {
    position: absolute;
    width: 6px;
    height: 9px;
    background: #000;
    top: 0;
    left: 3px;
}

a.botondescarga div.flecha span.bottom,
div.flecha span.bottomShadow {
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid black;
    top: 9px;
    left: -2px;
    z-index: 2;
}

a.botondescarga div.flecha span.bottomShadow {
    z-index: 1;
    left: -1px;
}

/* GRIS
   ================================================== */

a.gris {
    background-color: #888;
    background-image: -webkit-linear-gradient(top, #888, #333);
    background-image: -moz-linear-gradient(top, #888, #333);
    background-image: -ms-linear-gradient(top, #888, #333);
    background-image: -o-linear-gradient(top, #888, #333);
    background-image: linear-gradient(top, #888, #333);
    text-shadow: 1px 1px 1px rgba(255,255,255,.2);
    border-top: 1px solid #aaa;
}

a.gris span.bar {
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}

a.gris div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}

a.gris div.flecha span.bottomShadow { border-top: 8px solid rgba(255, 255, 255, 0.2) }

/* AZUL
   ================================================== */

a.azul {
    background-color: #00aeef;
    background-image: -webkit-linear-gradient(top, #00aeef, #00587a);
    background-image: -moz-linear-gradient(top, #00aeef, #00587a);
    background-image: -ms-linear-gradient(top, #00aeef, #00587a);
    background-image: -o-linear-gradient(top, #00aeef, #00587a);
    background-image: linear-gradient(top, #00aeef, #00587a);
    text-shadow: 1px 1px 1px #23aaff;
    border-top: 1px solid #23ccff;
}

a.azul span.bar {
    -webkit-box-shadow: 1px 1px 1px #23aaff;
    -moz-box-shadow: 1px 1px 1px #23aaff;
    box-shadow: 1px 1px 1px #23aaff;
}

a.azul div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px #23aaff;
    -moz-box-shadow: 1px 1px 1px #23aaff;
    box-shadow: 1px 1px 1px #23aaff;
}

a.azul div.flecha span.bottomShadow { border-top: 8px solid #23aaff }

/* VERDE
   ================================================== */

a.verde {
    background-color: #68c800;
    background-image: -webkit-linear-gradient(top, #68c800, #367100);
    background-image: -moz-linear-gradient(top, #68c800, #367100);
    background-image: -ms-linear-gradient(top, #68c800, #367100);
    background-image: -o-linear-gradient(top, #68c800, #367100);
    background-image: linear-gradient(top, #68c800, #367100);
    text-shadow: 1px 1px 1px #67c800;
    border-top: 1px solid #67e800;
}

a.verde span.bar {
    -webkit-box-shadow: 1px 1px 1px #67c800;
    -moz-box-shadow: 1px 1px 1px #67c800;
    box-shadow: 1px 1px 1px #67c800;
}

a.verde div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px #67c800;
    -moz-box-shadow: 1px 1px 1px #67c800;
    box-shadow: 1px 1px 1px #67c800;
}

a.verde div.flecha span.bottomShadow { border-top: 8px solid #67c800 }

/* ROJO
   ================================================== */

a.rojo {
    background-color: #ee5f5b;
    background-image: -webkit-linear-gradient(top, #ee5f5b, #973431);
    background-image: -moz-linear-gradient(top, #ee5f5b, #973431);
    background-image: -ms-linear-gradient(top, #ee5f5b, #973431);
    background-image: -o-linear-gradient(top, #ee5f5b, #973431);
    background-image: linear-gradient(top, #ee5f5b, #973431);
    text-shadow: 1px 1px 1px #ed5d69;
    border-top: 1px solid #ed8d69;
}

a.rojo span.bar {
    -webkit-box-shadow: 1px 1px 1px #ed5d69;
    -moz-box-shadow: 1px 1px 1px #ed5d69;
    box-shadow: 1px 1px 1px #ed5d69;
}

a.rojo div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px #ed5d69;
    -moz-box-shadow: 1px 1px 1px #ed5d69;
    box-shadow: 1px 1px 1px #ed5d69;
}

a.rojo div.flecha span.bottomShadow { border-top: 8px solid #ed5d69 }

/* NARANJA
   ================================================== */

a.naranja {
    background-color: #ff8636;
    background-image: -webkit-linear-gradient(top, #ff8636, #9a3e00);
    background-image: -moz-linear-gradient(top, #ff8636, #9a3e00);
    background-image: -ms-linear-gradient(top, #ff8636, #9a3e00);
    background-image: -o-linear-gradient(top, #ff8636, #9a3e00);
    background-image: linear-gradient(top, #ff8636, #9a3e00);
    text-shadow: 1px 1px 1px #ff7f42;
    border-top: 1px solid #ffa542;
}

a.naranja span.bar {
    -webkit-box-shadow: 1px 1px 1px #ff7f42;
    -moz-box-shadow: 1px 1px 1px #ff7f42;
    box-shadow: 1px 1px 1px #ff7f42;
}

a.naranja div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px #ff7f42;
    -moz-box-shadow: 1px 1px 1px #ff7f42;
    box-shadow: 1px 1px 1px #ff7f42;
}

a.naranja div.flecha span.bottomShadow { border-top: 8px solid #ff7f42 }

/* AMARILLO
   ================================================== */

a.amarillo {
    background-color: #fcd116;
    background-image: -webkit-linear-gradient(top, #fcd116, #705b00);
    background-image: -moz-linear-gradient(top, #fcd116, #705b00);
    background-image: -ms-linear-gradient(top, #fcd116, #705b00);
    background-image: -o-linear-gradient(top, #fcd116, #705b00);
    background-image: linear-gradient(top, #fcd116, #705b00);
    text-shadow: 1px 1px 1px #ffc33d;
    border-top: 1px solid #ffff3d;
}

a.amarillo span.bar {
    -webkit-box-shadow: 1px 1px 1px #ffc33d;
    -moz-box-shadow: 1px 1px 1px #ffc33d;
    box-shadow: 1px 1px 1px #ffc33d;
}

a.amarillo div.flecha span.top {
    -webkit-box-shadow: 1px 1px 1px #ffc33d;
    -moz-box-shadow: 1px 1px 1px #ffc33d;
    box-shadow: 1px 1px 1px #ffc33d;
}

a.amarillo div.flecha span.bottomShadow { border-top: 8px solid #ffc33d }
</style>

Una vez tengas hecho esto, ya solo te queda añadir el codigo para mostrar el boton. Eliges el color que desees y pegas el codigo correspondiente. Donde pone URL agregas la direccion que enlazara la descarga. Sustituye la palabra TEXTO por lo que quieras escribir, por ejemplo 'Descargar imagen'.

leer articulo ➨

La Capilla Sixtina en panoramica 3D

La pagina web oficial del Vaticano nos ofrece un paseo virtual por la famosa Capilla Sixtina con un nivel de detalle muy bueno en HD. En esta aplicacion flash podemos ver cada uno de los rincones pertenecientes a la Capilla, asi como todas las pinturas realizadas por Miguel Angel. Podeis verla aqui mismamente o a tamaño completo en una ventana popup haciendo click en el boton. Con el raton podemos rotar 360º y hacer zoom para apreciar los detalles, ademas de esto, tambien cuenta con musica ambiental apropiada para la ocasion.

ver a tamaño completo

leer articulo ➨