martes, 7 de febrero de 2012

Galeria Google Plus



Recopilatorio de imagenes, diseños y fotografias inspiradas en la red social de Google.






Demo2 second




















domingo, 5 de febrero de 2012

Eclipse Javascript



Situa el cursor del raton encima de el "espacio" y mueve la luna tapando y destapando el sol a modo de eclipse. Esto es otra muestra de lo que se puede llegar hacer con Javascript y HTML5, en este caso de la mano de un diseñador Español llamado Ricardo Cabello.





viernes, 3 de febrero de 2012

Menu "Violeta Gradius"



Para l@s que os guste este color o posiblemente os combine con el estilo de vuestro blog o web, aqui teneis este menu tan chulo diseñado en tono violeta gradient (difuminado) con bordes redondeados. Esta integramente realizado con CSS, es decir que no utiliza ninguna imagen de fondo.

Este es el aspecto del menu, una vez acabado:



Para ponerlo en Blogger puedes añadir si quieres los dos codigos juntos en un gadget HTML/Javascript.
Y si quieres ponerlos por separado, primero añade el codigo CSS en la plantilla antes entre las etiquetas <head> y guardas.



<style type="text/css">
.violetagradius{width:100%;
height:52px;z-index:3000;
}
.izmvg{float:left;
width:40px;
height:52px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
}
.izmvg,.demvg,.violetagradius a{background: -moz-linear-gradient(bottom, #663399, #FFFFFF);
background: -webkit-gradient(linear, center bottom, center top, from(#663399), to(#FFFFFF));
border: 2px solid #444444;
}
.demvg{-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
float:left;
width:40px;
height:52px;
border-left:none;
}
.violetagradius a{float:left;
display:block;
height:52px;
border-left:none;
font-family:Helvetica;
line-height:52px;
font-size:18px;
font-weight:900;
text-decoration:none;
color:#FFFFFF !important;
padding:0px 30px 0px 30px;
border-right: 2px solid #444444;-webkit-text-shadow: 2px 1px 2px #000000;-moz-text-shadow: 2px 1px 2px #000000;text-shadow: 2px 1px 2px #000000;
}
.violetagradius a:hover{ background: -moz-linear-gradient(bottom, #441177, #FFFFFF);
background: -webkit-gradient(linear, center bottom, center top, from(#441177), to(#FFFFFF));
color:#FFFFCC !important;
}
.clear{clear:both;
}
</style>




Ahora añades el codigo HTML alli donde quieras mostrar el menu, escribiendo los enlaces donde pone URL y el texto donde esta indicado en color rojo. Si quieres añadir mas enlaces, solo tienes que poner la linea <a href="URL">TEXTO</a> a continuacion de las otras, tantas veces como quieras.


<div class="violetagradius"><span class="izmvg"></span><a href="URL">TEXTO</a><a href="URL">TEXTO</a><a href="URL">TEXTO</a><span class="demvg"></span></div>



jueves, 2 de febrero de 2012

Crea un formulario de contacto gratis en ContactMe



Muchas veces nos hace falta un formulario (sobre todo en Blogger) para que los usuarios de nuestro blog contacten con nosotros. Pues en ContactMe te lo ofrecen gratuitamente (con publicidad en la version gratuita), pudiendo personalizar todos los campos que queramos poner. Ademas, aunque la web esta en ingles, nos permite elegir el idioma y hasta poner el logo de nuestro blog o web. Tambien se pude escoger con una pestaña flotante, que al hacer click aparece el formulario. Solo tenemos que copiar el script y pegarlo en nuestra pagina.

Vista previa del formulario:


visitar ContactMe


Box social para Blogger

Para que l@s que visiten tu blog periodicamente puedan suscribirse por email, a los feeds, agregarte en Facebook o seguirte en Twitter, aqui tienes esta elegante caja social con sus iconos correspondientes. Para añadirlo a tu Blogger, solo tienes que copiar el codigo de abajo y pegarlo a un gadget HTML/Javascript. Antes de guardar, modifica lo que esta en rojo, es decir: tu url de tu Facebook, la de tu Twitter, la de los feeds RSS y la de suscripcion (ahi solo tienes que poner el nombre de tu Feedburner, no la direccion completa). Recuerda que hay que repetir la url de cada sitio 2 veces, una para el icono y otra para el texto.






<div class="sidebar-subscription">
<ul id="subscription">
<li><a href="URL DE TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7XlDolhEu4A0Dxhd6g5H01p9tqPXgF86VgLHCloCcXXOYzTPvgtCQ2PyGsQVGF6JSAhs6zZEayxVV_dXDwMkP1kTy4qWSuca0s5Lj4o0mOGSMVK6amMQRz_vkuGzqfW7vQcA0orXWHSX/" /></a>
<h4>
<a href="URL DE TWITTER" target="_blank">Sigueme</a></h4>
Puedes seguir mis actualizaciones en Twitter</li>
<li><a href="URL RSS" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4K5TLsCitK4FOGHF5T73e2kAaloEHd-IV73nPxaF7IQrShF-ucQ7Ao0a2MFovcp-3ob5Cn4YGL8Tz3u5_FKk4wiydDw5Dl1TVzbH7e2n3iHS6jvN98_UeZ_B_P8M7zRtU8tLcK8TBhRl5/" /></a>
<h4>
<a href="URL RSS" target="_blank">Posts RSS</a></h4>
Lee mis articulos completos en tu lector de feeds favorito</li>
<li>
<a href="URL FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGl_FByjBW-LHkMGUeK2tZlAL7UA8PPWbTg1MUrB4Epv0KVH_lVLCgGrCp5vJK7TE31KTLd8Yp-HNwMIRJobb2vYX-nJHdMAYGX6bNioqyHZk3PhNl95D5WTLdG1NSgc-SS2FV8ObfMT73/" /></a>
<h4>
<a href="URL FACEBOOK" target="_blank">Facebook</a></h4>
Hazte fan en Facebook</li>
<li>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE FEEDBURNER&amp;loc=es_ES" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkgYljiBSlTxtUHZ2jDnBFEHkCFNOF9vUw_gEYhp2jJC68M4zvNPI2ZarccwDPvUGOEMFvMMCl2Gsht6m4AdVGCrcMXVSFOdUT6WGVAQcZAopf-v_xiBV70zYbb9cP-Cu7mvTMfcFGPg_t/" /></a>
<h4>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE FEEDBURNER&amp;loc=es_ES" target="_blank">Subscribete via e-mail</a></h4>
Recibe mis ultimas actualizaciones en tu correo</li>
</ul>
</div>
<style>
.sidebar-subscription {
    background: url("http://lh6.ggpht.com/_7Y9pl24WpQY/S_f7UbjdNxI/AAAAAAAAD7k/MRxXLntEnfo/post_head_thumb%5B4%5D.gif") no-repeat scroll 0 0 #FFFFFF;
    border: 1px outset #FFFFFF;
    color: #000000;
    padding: 20px;
    width: 100%;
}
#subscription {
    list-style: none outside none;
    margin-left: -40px;
    margin-top: 0;
    width: 100%;
}
#subscription li {
    height: 57px;
    line-height: 1.0em;
    padding: 6px 10px;
    padding-bottom: 20px;
}
#subscription li a {
    color: #000000;
}
#subscription li a:hover {
    color: #A8000C;
    text-decoration: none;
}
#subscription li h4 {
    border: medium none;
    color: #333333;
    font-size: 18px;
    margin: 0 0 0 45px;
}
#subscription li p {
    font-size: 13px;
    margin: 0 0 0 45px;
}
#subscription li img {
    float: left;
    margin: 0 10px 0 0;
    padding: 0;
}
#subscription li:hover {
    opacity: 0.7;
}
</style>


miércoles, 1 de febrero de 2012

Galeria de bicis con truco



(Haz click en las imagenes para ampliarlas)


La transmisión de la Shadow Ebike es inalámbrica. Acelerador y frenos funcionan vía wireless, y cuenta con un sistema de recuperación de la energía de frenado. 1.450 euros.

Con sensores de alta competición y autonomía de 85 km, la eBike de Ford utiliza materiales ultraligeros. De ahí que el cuadro, de aluminio y carbono, pese 2.5 kg. Todavía no han dado fecha de comercialización.

Cicloteckstore te ofrece este triciclo con pantalla LCD, que controla la asistencia al pedaleo, y una cestita para transportar hasta 20 kg. Lleva una batería de 36 V, 10 A, y admite 1.000 recargas. 1.919 euros.



No se sabe muy bien qué es, pero sí que tiene que resultar divertidísimo. El Yikebike es un artilugio de fibra de carbono que puede ser plegado y transportado en una sencilla mochila. Tiene una autonomía de 10 km. 2.872 euros.

Dos hermanos de Queensland, Australia, han creado este monopatín todoterreno con acelerador inalámbrico, ABS y un motor eléctrico que alcanza 37 kilómetros/hora. Permite hasta 2.000 recargas. 1.160 euros.

Puedes utilizarlo como sistema de transporte para cortos recorridos, porque este patinete Wayroller tiene una autonomía de 25 km, asiento extraíble, frenos de disco y amortiguadores. 470 euros.



En 2012 empezará a venderse la bicicleta eléctrica que Smart está desarrollando en colaboración con la firma Grace. La iluminación, tanto delantera como trasera, se realiza por leds. 2.900 euros.

Yuji Fujimura ha diseñado la Electric Bike Version 2, una bicicleta extrafina que permite almacenar y cargar dispositivos electrónicos. Bajo su particular cuadro se esconden unas finísimas baterías que favorecen el aparcamiento en batería sin apenas ocupar espacio. Está en fase de producción.


lunes, 30 de enero de 2012

Widget buscador de videos de YouTube

En otra ocasion ya os hable de un widget para buscar videos hecho con JQuery. Ahora te muestro otro que es mucho mas sencillo de implementar. Se trata de un buscador de videos de YouTube para añadir a un blog o web y esta confeccionado mediante un iframe, unos parametros url y CSS. En este buscador tienes una pestaña (en ingles) en la que puedes elegir las ultimas novedades, los mas votados, los mas vistos y, por supuesto una barra para que hagas tu propia busqueda personalizada. Los videos aparecen de seis en seis con imagenes con miniaturas y paginacion, al hacer click en una de ellas aparece el video para visionarlo. Lo que no se puede cambiar es el tamaño del widget, ya que no se veria a tamaño completo.






Para añadir el buscador en tu blog o web, solo tienes que copiar el siguiente codigo y ponerlo donde quieras mostrarlo:



sábado, 28 de enero de 2012

Nueva cancion del "Tio la Vara"






Jose Mota ha versionado la cancion de Ska-p "Cannabis" (Legalización), adaptandola como sintonia para su personaje "El Tio la Vara". El videoclip le ha quedado de lo mas graciosico que he visto ultimamente.






This text will be replaced


jueves, 26 de enero de 2012

Iconos sociales "Piedra"



Original pack de 12 iconos en formato png y en disponibles en tres tamaños diferentes. Diseñados en color grisaceo y con una textura imitando a la de la piedra, seguro que quedan muy bien en tu blog o web. El unico icono que no esta es el de Google +, pero estan todos los demas de las redes mas conocidas.




martes, 24 de enero de 2012

Tuneando el reproductor de YouTube



Antes, YouTube nos daba la opcion de cambiar de color tanto el marco como la barra del reproductor flash de video. Eso ya desaparecio y ahora todos son de color negro. Pero con un poco de CSS y Flash podemos customizarlo a nuestro gusto, dandole un toque mas personal y diferente.

Aqui tienes 2 ejemplos de videos "tuneados":





Cada vez que quieras poner un video del Youtube customizado en tu blog o web, añade este codigo, cambiando los numeros en rojo por los numeros y letras por las del video que quieras (los veras en la barra de direccion de YouTube).

CODIGO:

<center><div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background: #000000; border-radius: 20px; border: 4px solid #6699FF; box-shadow: 0 0 10px #ffffff inset;width:500px;padding:7px;"><embed allowfullscreen="true" allowscriptaccess="always" border="2" bordercolor="0x000000" height="350" src="http://www.youtube.com/v/lisnMkxUz3Y&amp;hl=en&amp;fs=1&amp;rel=0&amp;color1=0xF4F50D&amp;color2=0x6699FF&amp;autoplay=0&amp;rel=0&amp;" type="application/x-shockwave-flash" width="500"></embed></div></center>




Parametros modificables en el codigo:
·color1=0xF4F50D(color de los bordes de la barra)   ·color2=0x6699FF(color del fondo de la barra )   ·background: #000000;(color de fondo)   · border: 4px solid #6699FF(tamaño y color del borde)   ·width:500px(tamaño ancho del fondo)   ·height="350"(tamaño alto del reproductor)   ·width="500"(tamaño ancho del reproductor)


domingo, 22 de enero de 2012

Relojes flash del Real Madrid y el Barcelona



Si eres aficionad@ a uno de estos dos grandes equipos de futbol, ya puedes poner en tu blog o web un reloj flash con el emblema del Barça o el Madrid. Solo tienes que copiar el codigo de debajo del reloj y añadirlo donde quieras mostrarlo. Si quieres cambiarle el tamaño, solo tienes que modificar los numeros de los pixeles donde pone height (alto) y width (ancho).










sábado, 21 de enero de 2012

Gifs animados con tu webcam



Si eres de l@s que les gusta poner carazas y hacer gestos ante la webcam, ahora los puedes convertir en una imagen gif animada. Entra en la web Cam Slide (esta en ingles), te registras, le das a 'create slideshow' y empiezas a grabar con la cam. Cuando creas que ya lo tienes, le das a stop y lo que has grabado se convierte automaticamente en una imagen gif. Si no te gusta como ha quedado, la borras, haces otra y ya esta. Ademas, puedes participar en un ranking en el que l@s usuarios votan a los que mas le molan y comentan las imagenes.





visitar Cam Slide