25 marzo 2010

NetWeather, el tiempo en tu pagina web o blog.

Servicio meteorologico en tu web.

Hace poco me topé con netWeather, uno de esos servicios que sirven para mostrar cómo está el Tiempo en dónde vives. En varias ocasiones he probado servicios similares, pero no me convencían porque no mostraban como estaba la cosas exactamente donde yo vivo, solo estaban disponibles las capitales de los países o por provincias.
En cambio, esta herramienta provee de un widget para que puedas mostrar el Tiempo en tu blog. Si querés hacerlo, fijate si tenés suerte y encontrás tu ciudad. Para instalar el widget, hacé lo siguiente:

1. Clic en "Get my NetWeather".
2. Seleccionar unidad de medición (en Argentina usamos ºC), lenguaje (3 nomás...), Nombre de ciudad o código postal (cualquiera de las dos que elijas, haz clic en "Search" y te dará opciones de lugares disponibles). Clic en "Next".
3. Seleccionar tamaño del widget (a mayor tamaño más información, con mapas y todo), categoría de diseño (colores, amor o estaciones del año) y theme. Clic en "Next".
4. Aparecen términos y condiciones, hacer clic en "I agree..." y luego copiar el código html (2 opciones: web o myspace).
5. Pegar lo que has copiado en el código html de tu web. Acá en Blogger se puede copiar directamente en los post o en las barras laterales por medio de las opciones de diseño.

15 marzo 2010

Fuentes pixeladas para tu web.

Generador de fuentes pixeladas.

En esta ocasión, quiero hablar de las fuentes pixeladas y un servicio en internet que resulta muy útil para usarlas desde incursiones amateurs en el diseño web hasta los trabajos pro.


Las fuentes pixeladas son fuentes tipográficas digitales que usan menos cantidad de pixeles que una fuente "true type" normal, es decir, no son indicadas para imprimir en papel, sino para verse en pantalla. De alguna manera las fuentes pixeladas recuerdan a las letras que podrías encontrar en ordenadores y sistemas operativos antiguos, como el MS-DOS. Pero hoy en día, muchos de los botones 2.0 que ves en la web como los contadores de Feedburner, los botones de directorios de blogs y hasta los "faves" de Technorati utilizan estas fuentes acompañadas de pequeñas imágenes o iconos que al final resultan muy livianos y si no tienen muchos colores, generalmente no pasan de 1KB.
Si tenés ganas de generar botones con auténticas fuentes pixeladas, no tenés que buscar mucho. Recientemente encontré por la web la página de Semplice Pixelfonts que ofrece una buena variedad de fuentes distintas, pero con una ventaja: también son true type, es decir, se pueden imprimir, si alguna vez necesitás hacerlo. Una buena oportunidad de generar botones livianos, si las añadís a las posibilidades de editores gráficos como Photoshop, Gimp, o incluso el básico Paint.

11 marzo 2010

Herramientas online para CSS.

10 útiles aplicaciones online para trabajar con CSS.


1. Primer CSS
http://primercss.com/
Intriduces una URL este sitio obtiene las clases e IDs, y crea una hoja de estilos CSS .

2. Automatic CSS inliner
http://www.mailchimp.com/labs/inlinecss.php
Transforma estilos locales en .CSS. Buena herramienta para editar las newsletteres en campañas de email marketing.

3. CSS sprites generator
http://css-sprit.es/
Generador de sprites CSS online desde la web.

4. Moo color finder
http://www.artviper.net/colorfinder.php
Obtienes los colores de un documento .css y exporta la paleta de colores a photoshop.

5. MinifyMe
http://code.google.com/p/minifyme
Ccombina, optimiza y reduce el tamaño de archivos CSS.

6. Variable Grid System
http://www.spry-soft.com/grids
Utiliza una rejilla en tus hojas de estilo CSS.

7. Modernizr
http://www.modernizr.com/
Checkea si tu navegador tiene soporto para las nuevas características de CSS.

8. List-o-matic
http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic
Para crear menús horizontales o verticales de forma muy sencilla y exportarlos como hojas de estilo CSS.

9. CSS text wrapper
http://www.csstextwrap.com/
Para formatear párrafos de texto yhacer que el texto fluya creando formas.

10. Dust-me selectors
http://www.sitepoint.com/dustmeselectors/
Una extensión para Firefox que nos avisa cuando algún elemento de la hoja CSS es huérfano.

08 marzo 2010

Codigos para efectos de ratón y cursor.

Trucos de efectos para el mouse y cursor.

Tenemos aqui algunos trucos y códigos javascript recopilados, que creemos que te pueden ser útiles para realizar cualquier página; basicamente son efectos que actuan sobre el funcionamiento del mouse o en el cursor de tu pagina web.

Estrella persiguiendo al puntero.


Conjunto de estrellas persiguiendo al cursor.


Conjunto de bolas persiguiendo al cursor.


Anular boton de la derecha.


Anular boton de la izquierda.


Anular boton de la derecha e izquierda.



ALGUNAS RECOMENDACIONES PARA INCLUIR LOS CÓDIGOS

Debes copiar el contenido de los cuadros de textos (CTRL + C) y luego pegarlo en tu editor de HTML ( CRTL + V). Normalmente si es un editor gráfico (tipo FrontPage o Nestcape composer) será muy sencillo; vas a Insertar código HTML y lo pegas allí; por defecto te lo pega entre las etiquetas ; la mayoria de los que tenemos incluidos en nuestra página, y por norma general, van incluidos ahí, por lo que no deberás hacer más; pero hay partes de código, o a veces incluso todo el código (esta comentado en el mismo código, ya que aparece entre dos etiquetas distintas a ) deberás insertarlo en donde el código te indique (normalmente entre las etiquetas ). Para incluirlo allí, sólo debes cortar el código correspondiente a esta parte de las etiquetas y pegarlo en su sitio.
Por último, y si se necesita, sustituye los parámetros de ejemplos por los tuyos (Links, fuentes...) y a funcionar. Te recomendamos que los pruebes primero en una página nueva, para que te familiarices con su funcionamiento, y posteriormente los adaptes a lo que busques y lo pegues en tu página.

05 marzo 2010

Botones de navegacion.

Botones para la navegacion de tu web.

Este código crea unos botones de navegación: atrás, arriba y adelante.
También puedes usar solo el botón Top para subir arriba de cada página.
Lo puedes pegar tantas veces quieras en la misma página.

Copia y Pega el siguiente código en tu vista HTML en el lugar donde quieras que aparezcan.



Ejemplo: aqui no podrán apreciar el antes y despues, pero si el boton de ir arriba.




02 marzo 2010

Efecto de luz en la imagen.

Efecto muy bueno para tus imagenes.

Este código crea un tipo de luz como una linterna en el puntero del ratón.


Copia y Pega el siguiente código dentro de las etiquetas <head> y </head> en vista HTML de tu pagina web.
 
<style>
<!--#myimage{filter:light}-->
</style>

Y este otro lo pones dentro del <body>

<body bgcolor="#000000">
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
<img id="myimage" src="images/bola2.jpg" width="230" height="230">
<script language="JavaScript1.2">
s = 50; // the size of the spotlight
vp = 10; // the visibility percent of the picture
startx = 0; // the top position of your sportlight into the image (on start)
starty = 0; // the left position of your spotlight into the image (on start)
var IE = document.all?true:false
function moveL()
{xv = tempX; yv = tempY; myimage.filters.light.MoveLight(1,xv,yv,s,true);}
if (IE&&myimage.filters)
document.all.myimage.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
function getMouseXY(e) {tempX = event.offsetX
tempY = event.offsetY
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{moveL();}
return true
}
var xv = startx;
var yv = starty;
var t= true;
if (IE&&myimage.filters){
myimage.style.cursor="hand";
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
</script>

Puedes editar la linea de color rojo.
Cambiando la URL de la imagen, y tambien la altura y el ancho.