Space Invaders en HTML + CSS

space invaders

Curiosa figura creada por GenteGeek donde se emula a uno de los bichitos de Space Invaders, pero lo más original es que está creado en HTML y CSS, el código es el siguiente:

Código HTML (space_invaders.html):

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

  2.     “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

  3. <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ca” lang=”ca”>

  4. <head>

  5. <title>HTML + CSS Space Invaders</title>

  6. <link href=”space_invaders.css” rel=”stylesheet” type=”text/css” />

  7. </head>

  8. <body>

  9. <div id=”cuerpo”> </div>

  10. <div id=”cuerpo2″> </div>

  11. <div id=”ojo1″> </div>

  12. <div id=”ojo2″> </div>

  13. <div id=”antena11″> </div>

  14. <div id=”antena12″> </div>

  15. <div id=”antena21″> </div>

  16. <div id=”antena22″> </div>

  17. <div id=”pata11″> </div>

  18. <div id=”pata12″> </div>

  19. <div id=”pata21″> </div>

  20. <div id=”pata22″> </div>

  21. <div id=”mano1″> </div>

  22. <div id=”mano2″> </div>

  23. </body>

  24. </html>

Código CSS (space_invaders.css):

  1. div  {background-color: #000;}

  2.  

  3. #cuerpo {position:absolute; width:400px; height:200px; top:100px; left:200px; }

  4. #cuerpo2 {position:absolute; width:500px; height: 130px; top: 170px; left: 150px; }

  5.  

  6. #ojo1 {background-color: #fff; position:absolute; width:50px; height:50px; top:170px; left:250px; }

  7. #ojo2 {background-color: #fff; position:absolute; width:50px; height:50px; top:170px; left:500px; }

  8.  

  9. #antena11 {position:absolute; width:50px; height:50px; top:50px; left:250px; }

  10. #antena12 {position:absolute; width:50px; height:50px; top:0px; left:200px; }

  11.  

  12. #antena21 {position:absolute; width:50px; height:50px; top:50px; left:500px; }

  13. #antena22 {position:absolute; width:50px; height:50px; top:0px; left:550px;}

  14.  

  15. #pata11 {position:absolute; width:50px; height:50px; top:300px; left:200px;}

  16. #pata12 {position:absolute; width:50px; height:50px; top:350px; left:150px;}

  17.  

  18. #pata21 {position:absolute; width:50px; height:50px; top:300px; left:550px;}

  19. #pata22 {position:absolute; width:50px; height:50px; top:350px; left:600px;}

  20.  

  21. #mano1 {position:absolute; width:50px; height:200px; top:50px; left:100px;}

  22. #mano2 {position:absolute; width:50px; height:200px; top:50px; left:650px;}

Pueden ver un ejemplo en GenteGeek

Envía tarjetas virtuales con SquidNote

squidnote.jpg

SquidNote es un servicio que permite crear y personalizar tarjetas de felicitaciones virtuales para luego enviárselas a nuestros amigos. Tiene una gran cantidad de diseños muy bonitos de entre los cuales elegir, les ponemos una frase personalizada y una imagen desde nuestro equipo, luego la guardamos y podemos programar su envío a una fecha determinada.

Para crear nuestras tarjetas tendremos que registrarnos, igualmente podemos crearla, personalizarla y cuando la tengamos lista con los datos del destinatario y su fecha recién será necesario el registro.

navidad

Visto en Incubaweb

Dos guías en español para crear tu propio theme para WordPress

En el blog de LordMaX hay disponibles dos excelentes guías en PDF donde podemos encontrar información básica pero muy útil sobre como armar nuestro theme para WordPress.

Por un lado tenemos la guía de WordPress con los archivos básicos que debe tener un theme, los distintos llamados que se hacen a los archivos y para que sirve cada uno de ellos, acompañado de algunos otros trucos interesantes.

También hay disponible una guía de CSS, donde podemos encontrar de manera clara como es la sintaxis, cómo se trae una hoja de estilos, el uso de las distintas funciones y sus valores, etc.

Cuenta regresiva en flash

Acabo de encontrar una interesante herramienta que permite generar un widget en flash con una cuenta regresiva personalizable en cuanto a su fecha. No voy a dar el ejemplo de navidad, lo he cambiado por una fecha mejor, el comienzo del nuevo año.

Para crear nuestra cuenta regresiva sólo tenemos que elegir los colores deseados y la fecha, luego lo generamos y el sistema nos da el código que tendremos que pegar en nuestra web. Algo que no me gustó es que no permite cambiar la leyenda “until”, así que tendremos que poner un mensaje en inglés.

Otro punto muy importante y desagradable es que en el código se agrega un enlace tipo spam, cosa que se puede solucionar eliminando una sección del código.

Visto en Maestro Alberto

Pon tu Firefox con estilo navideño

Seguimos con la temática navideña, ahora le toca el turno a Firefox, con dos themes muy bonitos que puedes descargar para dejar tu navegador acorde a las festividades. Por un lado tenemos a Tinseltown, un theme con transparencias y muy buenos efectos que también funciona en Linux.

Tinseltown

theme navideño para firefox

Y por el oto lado tenemos a X-mas, un theme un poco más sencillo y limpio que el anterior, pero que no está disponible para usuarios de Linux, Este theme también tiene una versión “light” que es un poco más liviana.

Xmas

theme navideño para firefox

SortFix, ¿La nueva forma de buscar en internet?

sortfix.jpg

SortFix es un buscador que incorpora una tecnología muy interesante, se basa en filtrar los resultados dependiendo del tipo de sitio que provee la información, ya sean enciclopedias, sitios de ventas, etc. Trata de brindar resultados mucho más precisos dependiendo de la información que desea el usuario.

Por ejemplo, queremos buscar consejos para comprar una cámara digital, ponemos la búsqueda “camara digital” y el sistema nos muestra todos los resultados, en los bloques de arriba tenemos que ir filtrando dependiendo del tipo de búsqueda que queremos, en el primer bloque encontramos las palabras más importantes de la búsqueda, el segundo bloque es la búsqueda propiamente dicha y en el tercer bloque podemos eliminar ciertos tipos de resultados, para que por ejemplo no nos de resultados de Mercado Libre u otros sitios para comprar cámaras, ya que lo que nosotos queremos son tips para elegir una cámara.

Primero es medio complicado de entender su funcionamiento, pero hay un video colgado en YouTube donde esplican cómo usarlo, realmente muy interesante.

Visto en DownloadSquad

Crea tu propio “YouTube” gratis con PHPMotion

phpmotionHace un tiempo les comenté sobre un script llamado vShare que costaba $10 dólares, ahora acabo de encontrar PHPMotion, una alternativa muy completa y gratuita. Tiene una gran lista de funcionalidades incluídas y los requerimientos del servidor donde alojarlo no son cosa de otro mundo.

Este script es totalmente gratuito pero obviamente tiene que mantenerse de alguna manera, supongo que la estrategia principal es vender plugins y templates por separado a un costo no muy alto. De esta manera se puede mantener el proyecto y los dueños de los sitios pueden agregar funcionalidades a sus sitios de videos.

Pueden ver un demo del script funcionando plenamente en PHPMotion.net.

Visto en Bitperbit

Dot-o-mator, generador de nombres de dominios y empresas

dot-o-mator

Hoy en día es cada vez más difícil encontrar un buen nombre para tu futura startup, aunque también es posible elegir los típicos nombres “raros” sinónimo de la web 2.0. Hoy encontré una excelente herramienta llamada Dot-o-mator, que nos da ideas para elegir un buen dominio o nombre para nuestra empresa en la web.

La herramienta es muy simple de utilizar, primero tenemos la parte del prefijo y luego la del subfijo, en estas secciones podemos elegir que tipo de nombre que vamos a elegir. Una vez que elegimos el prefijo y subfijo los combinamos y éste nos genera nombres muy atractivos que podemos ir chequeando mediante un whois para ver si el dominio está libre o no.

Comparte tus fotos y videos desde tu móvil con UphoneBlog

uphoneblogUphoneBlog es un servicio que nos permite crear un moblog (blog móvil) totalmente gratis donde podremos compartir en tiempo real todas las fotos y videos que hagamos desde nuestro móvil y subamos a nuestro blog móvil.

Al crearnos una cuenta en el sitio obtendremos una URL del tipo http://www.uphoneblog.com/usuario, ahí nuestros amigos o familiares podrán ver todos nuestros contenidos subidos desde el móvil en conjunto con comentarios que hagamos. A los contenidos los subimos mediante mensajes multimedia enviándolos a la dirección usuario-password@uphoneblog.com, obviamente tenemos que reemplazar los datos por nuestro nombre de usuario y contraseña.

Tiene una muy buena funcionalidad que permite embeber nuestras fotos y videos en cualquier sitio web o en nuestro blog, para ello podemos crear dos tipos de reproductores en los cuales se mostrarán los últimos 5 videos subidos a nuestro moblog, y las últimas 10 fotos.

Cabe aclarar que el servicio es totalmente gratuito, lo único que tenemos que pagar es la transferencia de datos que genere el MMS que enviemos, ésto dependera del peso dela foto o el video que subamos. Lo bueno es que funciona con cualquier proveedor de telefonía ya que todo el envío se hace a través de MMS.