Hacker of the Web
Tus ideas en código!...y mas

[+/-]
Buscadores de iconos

Una cosa imprescindible para todo diseñador o webmaster, es sin lugar a dudas encontrar(o si se puede crear) iconos de buena calidad y variedad. Para esto la mayoría de nosotros requeriremos mucho tiempo y esfuerzo en lograr encontrar el icono perfecto para el diseño de nuestra página web.

Buscadores de Iconos

En momentos críticos como el que acabo de describir sería como caído del cielo algo así como un Google especializado para encontrar solo iconos, que hiciera todo el trabajo sucio de realizar la búsqueda por miles y miles de sitios hasta mostrarnos una lista con los que se adapten mejor a nuestro criterio de búsqueda.

[+/-]
BingGoo: Busca en Google y Bing a la vez

bingGo:o

Si eres de los que aún no se decide en cuanto al buscador web, si Google o si Bing con este nuevo invento de xiles.net podrás buscar en los dos buscadores mas potentes en estos momentos.

bingGo:o


Así podrás comparar resultados facilmente, tambien tiene algunas otras opciones como buscar en diferentes buscadores de videos, imagenes, en la web.

ENLACE | BingGo:o

[+/-]
Blogger: Ocultar algunas etiquetas de las entradas

Etiquetas Administrativas

Alguna vez haz pensado en poder poner una etiqueta que solo puedas utilizar tu en el panel de administrar entradas, y por lo tanto no sea visible en el blog??

Ese es el objetivo de este hack, el utilizar una etiqueta( o varias si asi lo necesitas) invisible solo para fines administrativos o mejores resultados en las búsquedas o resultados de entradas relacionadas, pero para tus lectores esa etiqueta no exista o no sepan de ella. Bien, ya sabemos lo que queremos.

Ahora necesitamos aplicarlo, ¿como? solo sigue estos sencillos pasos:

[+/-]
Descargar RAM

Descargar RAM

Que tal te vendría un poco de RAM extra, en esta página web puedes descargar sencillamente desde 1gb de RAM hasta 4gb en una oferta única del 100% de descuento en cuanto los precios!!!

jajajajaja, que tal te parece, esta es una página con la que podemos emular la descarga de memoria RAM, y con la que podremos jugarles una broma a nuestros amigos menos experimentados con la computadora.

La página es totalmente real y hasta tiene testimonios de personas en twitter y en la misma página de lo bien que les ha funcionado el descargar esa memoria RAM extra. Lo que le da un toque de realismo a la página web.

ENLACE | DownloadMoreRAM

[+/-]
Blogger: Sustituir el nombre de las etiquetas por imagenes

Si te molesta que en cada entrada se muestren las etiquetas en forma de texto, por estética o por lo que quieras, sencillamente podrías hacer que cada etiqueta, en vez de mostrar su nombre en texto, mostrara una imagen relacionada con ella.

Reemplazar etiquetas por imagenes

Es decir, si tienes de etiqueta algo así como "noticias", en vez de que tu entrada muestre "noticias" en la parte de las etiquetas muestre un periódico, diaro, boletin. Como le digan en tu país. En el siguiente enlace puedes ver un demo

En fin, ya entrados en el tema. lo que tenemos que hacer para mostrar las etiquetas con forma de imagen:

[+/-]
Gadgets visibles o no. solo en páginas individuales

Paginas estaticas

Aunque las páginas individuales o estáticas de Blogger, que acaban de aparecer, aún están en borrador o fase de prueba. podemos jugar un poco con estas para que luzcan un poco diferentes a las páginas de las entradas. Algo que cambiaría la apariencia de las páginas estáticas seria mostrar u ocultar gadgets.

Es decir, que el gadget será exclusivo para las páginas estáticas y por lo tanto no aparezca en todas las páginas de nuestro blog. O si lo prefieres que sea de forma inversa, que el gadget aparezca en todas las páginas de nuestro blog excepto en las páginas estáticas.

Para explicar esto, voy a suponer que quiero ocultar un gadget solo en las páginas estáticas. Puedes hacerlo con el o los gadgets que quieras.

[+/-]
DHTML: Ventanas emergentes sencillas

Hace poco DiGiTaL me preguntaba que si sabia como crear ventanas emergentes en el blog. Despues de esa pregunta me dispuse a desarrollar un sistema mediante por el cual poder crear ventanas emergentes en unos cuantos pasos, aqui explicaré el resultado.

Rojo

Primero que nada, ¿Qué es DHTML?

Dynamic-HTML, o HTML dinámico en español, es un conjunto de técnicas que permiten crear sitios web en los que el internauta puede interactuar con la página. Básicamente los lenguajes que se utilizan son: HTML,CSS y Javascript. Permitiendo modificar la apariencia de la página web.


Aclarado lo anterior, el primer paso es agregar lo siguiente antes de </head>:

[+/-]
CSS3: Sorprendentes botones para formularios

CSS3: Sorprendentes botones para formularios

Si bien los formularios son de gran utilidad para que los visitantes de un determinado sitio web, puedan interactuar con el administrador o con la misma página. Pero siendo honestos la mayoría de estos formularios tienen aspecto horrible, aunque no deje de funcionar como se espera.

Es ahí donde interviene la creatividad, una herramientas y una taza de café(esta ultima es opcional :P). Las herramientas serán: HTML y CSS.

[+/-]
Páginas estáticas o individuales en Blogger

Ayer publicaron la noticia desde Blogger in Draft, que para Blogger in Draft exclusivamente y en modo de pruebas agregaron una nueva opción muy similar a la de WordPress, crear páginas totalmente individuales, algo un tanto util, las url son del tipo:

http://nombreDelBlog.blogpot.com/p/contacto.html
http://nombreDelBlog.blogpot.com/p/acerca.html

/!\ Actualización(21/01/10 @ 8:54 PST): Blogger in draft ha suspendido, la característica de eliminar, crear y editar páginas individuales temporalmente. Pero si ya has creado paginas, estas no han desaparecerán o al menos eso parece. También aseguran que rehabilitarán la característica pronto.

/!\Si la opcion de Crear Pagina o la pestaña de Editar Páginas no se observa en tu Blog Puedes crear, editar y eliminar nuestras paginas, entrando en el Panel Diseño de nuestro Blog, claro que en Blogger in Draft.

[2] Cambiar el siguiente texto en color rojo, de la barra de direcciones:
http://draft.blogger.com/rearrange?blogID=XXXXXXXXXXXXXXXX

[3] Por "pages.g" y entrarás directamente al panel de "Editar páginas"
http://draft.blogger.com/pages.g?blogID=XXXXXXXXXXXXXXXX

[4] Si en el Panel de "Editar páginas" no se observa el boton de crear página, cambia en la barra de direcciones "pages.g" de la opcion anterior por esto otro para crear página:
http://draft.blogger.com/page-edit.g?blogID=XXXXXXXXXXXXXXXX
Puedes publicar no mas de 10 páginas individuales por cada blog. Así que parece que esta vez lo están haciendo bien el equipo de los Googlers. Otra de las características es que estás páginas inidividuales no aparecen en el Archivo del Blog. Si quieres utilizar esta nueva opción deberás:

[1] Entrar en Blogger in Draft

[+/-]
Blogger: Gadget de Entradas Recientes con miniatura

Existen diversas formas de lograr este objetivo, pero casi como todos los hacks que publico desarrollé este. Y puedo asegurarte que de todas las formas en que puedes lograr mostrar entradas recientes con sus miniaturas esta es la mas sencilla y cumple muy bien con su funcion. Para agregar el gadget único, solo tienes que elegir una opcion:

Entradas recientes con miniatura

[+/-]
CSS3: Box Shadow (Sombras)

Otra propiedad sobresaliente y novedosa en la nueva version de CSS, la numero 3, es:

Box-Shadow

La sintaxis de esta propiedad es la misma que en

Text-Shadow


Pero a diferencia de Text-Shadow, Box Shadow no es muy generica y por el momento es necesario colocar un "-moz","-khtml","-webkit" para que funcione perfectamente en todos los navegadores excepto IE:
-khtml-box-shadow: 0 0 3px #333;
-moz-box-shadow: 0 0 3px #333;
-webkit-box-shadow: 0 0 3px #333;


podrías utilizarlo en cualquier elemento html:


-khtml-box-shadow: 0 0 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.4);



-khtml-box-shadow: 1px 1px 4px rgba(0,0,0,.8);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,.8);
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.8);


En una etiqueta de parrafo <p>


-khtml-box-shadow: 0 0 3px rgba(0,0,0,.6);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.6);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.6);



-khtml-box-shadow: 1 1 10px rgba(150,0,0,.5);
-moz-box-shadow: 1 1 10px rgba(150,0,0,.5);
-webkit-box-shadow: 1 1 10px rgba(150,0,0,.5);

[+/-]
Alemania y Francia discriminan a Internet Explorer

Alemania y Francia discriminan a Internet Explorer

Luego de que se supieran algunos detalles a relucir sobre el ataque a Google China, del cual hackers robaron informacion intelectual del "Gigante de Internet". Se dice y afirma el mismo Microsoft que el ataqué se debió a un agujero de seguridad en su navegador Internet Explorer(IE).

Por lo cual Francia y Alemania ha hecho una recomendacion a los usuarios de Internet, buscar otras alternativas para garantizar su "seguridad por la red". Aunque Microsoft aclaró que solo se trata de configurar bien el explorador Alemania y Francia no se fian de el.

Por su parte, el portavoz de la firma de antivirus Sophos, Graham Cluley asegura en susu declaraciones a la BBC que el aviso del gobierno Alemán esta referido a todas las versiones del explorador de Microsoft(5 a 8). También señala que ya circula en Internet el como aprovechar estas vulnerabilidades.

En mi opinión, si ya de por si, Internet Explorer está bajando sus cuotas de usuarios en el mundo desde la aparición de Mozilla Firefox. Esto sin duda va a matar el dominio que desde siempre había tenido este navegador inseguro. Que no respeta estandares.

Ojalá que ese navegador deje de existir, nos haría la vida mas facil a los diseñadores, pues con los navegadores actuales respetan mucho los estándares y se visualiza muy similar una página en Firefox, Chrome, Safari, Opera.

A ti cual navegador te gusta mas?

[+/-]
Blogger: Sustituir el nombre del autor con una imagen

Colocar una imagen con la firma personalizada del autor en vez del clásico nombre del autor por la cuestión que se te ocurra, puede ser atractiva a la vista de nuestros lectores además de poder poner en la imagen lo que mejor te parezca.

Pero si no sabes bien como crear tu firma o que ponerle. Aqui te dejo algunas herramientas que te pueden resultar interesantes:

Cool Text
Cool Text

Potente herramienta donde puedes escoger el tipo de texto, despues puedes personalizarlo de la manera en que tu quieras, me parecio muy buena esta herramienta.

3D Text Marker
3D Text Marker

Esta otra exelente herramienta permite escoger muchisimos tipo de letras, asi como el color de la misma y otros parametros avanzados. Muy buena!

[+/-]
CSS3: Varias imagenes de fondo(BackGround)

CSS es una herramienta muy potente, que ha ido evolucionando siendo CSS3 la ultima versión, en la cual se agregaron y se eliminaron características. Tambien se modificaron, como es el caso de la propiedad Background la cual admite mas de una imagen, sin tener que agregar capas flotantes, el resultado es el siguiente:
Este es el efecto!!
Si no lo observas es el siguiente:

Varias Imagenes de fondo

Código HTML:
<div>Este es el efecto!!</div>
Código CSS:

[+/-]
CSS3: Interesantes efectos en texto

La Propiedad Sombras o Shadow.

Esta propiedad fue propuesta desde CSS2 pero como sea esta disponible en CSS3 y es compatible con:

Google Chrome 3+
Mozilla Firefox 3.1+
Opera 9.5+
Safari 3+
[Los que soporten estándares]

La sintaxis de la propiedad es la siguiente:

Text-shadow

X-Ofsset: Define si la sombra se muestra a la derecha, valor positivo. O si se muestra arriba, valor negativo.
Y-Ofsset: Define si la sombra se muestra abajo, valor positivo. O si se muestra arriba, valor negativo.
Tamaño: El tamaño de la sombra
Color: Color de la sombra


Con este simple código podemos conseguir un efecto para que el texto parezca grabado en la página con un fondo obscuro, el texto un poco claro y la sombra de texto mas obscuro que los dos colores anteriores:

SantyWeb

[+/-]
Google Docs soporta cualquier tipo de archivo

Docs Google

Parece que Google le está haciendo un espacio a su nuevo sistema operativo Chrome OS para darle la posibilidad de poder almacenar archivos personales en la "nube". Ya que desde el martes pasado Google anunció en su el blog oficial de Google Docs, que dicho servicio ofrecia dos nuevas opciones:

[+/-]
Ayudar a damnificados de Haiti

Seguro ya sabes lo que sucedió en Haití el martes pasado, un devastador terremoto que según Roger Searle, profesor de geofísica en la Universidad de Durham (Reino Unido), fue 35 veces más potente que la bomba de Hiroshima.

Comparaciones de construcciones en Haití

Este desastre dejó como saldo a miles de muertos, y otros miles de heridos que como pueden tratan de encontrar a sus seres queridos. Con el seísmo se derrumbaron los hospitales y están necesitando muchísima ayuda, ya que, pues Haití es el país mas pobre del mundo.

La recuperación será un tanto lenta pues la reconstrucción de infraestructuras como las carreteras, los suministros de agua y energía, el restablecimiento de las comunicaciones y la construcción de hospitales llevará tiempo.

Es por eso que todo el mundo(literalmente) se está uniendo para ayudar a estos damnificados. Y nosotros los bloggeros podemos contribuir de alguna manera, de poner nuestro granito de arena. Agregando el siguiente gadget en nuestra barra lateral:


redCross

El gadget es una imagen enlazando hacia redcross.org, una página en la que se puede donar un monto de dinero a la fundación RedCross. Misma que esta dando auxilio a los Haitianos, asegura que el 100% del dinero donado sera canalizado directamente a los damnificados.

Si no estas en Blogger aqui hay mas banners Red Cross's Haiti banners page que puedes agregar manualmente, o visita la página de donaciones de Google.

[+/-]
GDocu; Facilita la búsqueda de documentos en Google

gdocu

Google ofrece bastantes parámetros de búsqueda tantos que necesitaríamos varios posts para describir cada parámetro y su función.

Pero gracias y por el momento, tenemos aquí una buena herramienta que nos ayudará al momento de buscar algún documento relacionado a algún tema en especial. Esta, permite buscar varios tipos de formato de documentos.

[+/-]
Varias formas de integrar Goo.gl a Blogger

Goo.gl y Blogger


Si bien los servicios que ofrecían la opción de acortar una url ya existían hace algunos años se hicieron populares gracias a Twitter.com, la red social mas popular del momento.

Ahora que estos servicios están ganando popularidad están surgiendo cada vez mas servicios que ofrecen diferentes resultados:
TinyUrl.com
Bit.ly
TweetBurner.com
aUrl.es
Y el nuevo Goo.gl
Después de enterarnos del nuevo acortador de URL's de Google para la Google Toolbar y para FeedBurner rápidamente se expandieron a extensiones de Chrome y Firefox después a la página de Alexander Gaias y ggl-shortener.

Este ultimo es el que nos interesa, pues ofrece una API interesante para poder usar Goo.gl en cualquier sitio web de manera sencilla utilizando JSON. Y la forma de implementarlo:

[1] Necesitas entrar en el panel Diseño>Edicion HTML>Sin expandir plantillas de artilugios.

Entradas más recientes Entradas antiguas Página Principal
Arriba