microoweb http://microoweb.com enfoque > webmaster . internet . entrenemiento . informatica . wordpress / diseño / recursos / tips Sat, 17 May 2008 22:42:55 +0000 http://wordpress.org/?v=2.5.1 en http://feeds.feedburner.com/microoweb?format=skin1536403http://www.feedburner.com Vagon de iconos: Carga de Doce Mil! http://feeds.feedburner.com/~r/microoweb/~3/292511089/ http://microoweb.com/vagon-de-iconos-doce-mil/#comments Sat, 17 May 2008 21:43:30 +0000 DonRaF http://microoweb.com/?p=363 En uno de los blogs lejanos a los que tengo acostumbrado leer, frogx3, nos ofrece una increíble colección de 12.000 iconos en formato .PNG, .ICO, .TIFF y para colmo todos están en alta definición. No llegue a echar una ojeada a todos pero les aseguro que es un recurso imperdible en nuestra biblioteca de utilidades gráficas.

Descargar

, , , ,
]]> http://microoweb.com/vagon-de-iconos-doce-mil/feed/ http://api.feedburner.com/awareness/1.0/GetItemData?uri=microoweb&itemurl=http%3A%2F%2Fmicrooweb.com%2Fvagon-de-iconos-doce-mil%2Fhttp://microoweb.com/vagon-de-iconos-doce-mil/ Styleswitch.js: Cambiar dinámicamente los CSS con jQuery http://feeds.feedburner.com/~r/microoweb/~3/292511090/ http://microoweb.com/styleswitchjs-cambiar-dinamicamente-los-css-con-jquery/#comments Sat, 17 May 2008 21:30:45 +0000 DonRaF http://microoweb.com/?p=362 Gracias a la interactuación de Styleswitch.js y jQuery.js tenemos posibilidad de crear una opción AJAX para mediante un click sobre un link para cambiar de hoja de estilos (CSS) según la necesidad, sobre todo en aplicaciones web y accesibilidad visual (Colores fuertes o suaves y tipografía grande). Incluye creación de cookie para recordar y conservar el estilo seleccionado en el navegador utilizado.

Modo de uso

Entre los tags <head> </head>, situamos los archivos styleswitch.js y jquery.js y las hojas de estilos como en los siguientes ejemplos.

PLAIN TEXT
HTML:
  1. <link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
  2. <link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />

PLAIN TEXT
HTML:
  1. <script src="jquery.js" type="text/javascript"></script> <script src="styleswitch.js" type="text/javascript"></script>

Ahora creamos varias hojas CSS y preparamos la llamada como en el siguiente ejemplo.

PLAIN TEXT
HTML:
  1. <a class="styleswitch" rel="styles1" href="serversideSwitch.html?style=style1">styles1</a>
  2. <a class="styleswitch" rel="styles2" href="serversideSwitch.html?style=style2">styles2</a>
  3. <a class="styleswitch" rel="styles3" href="serversideSwitch.html?style=style3">styles3</a>

Ver Demo del Styleswitch
Descargar styleswitch.js, jquery.js

, , ,
]]> http://microoweb.com/styleswitchjs-cambiar-dinamicamente-los-css-con-jquery/feed/ http://api.feedburner.com/awareness/1.0/GetItemData?uri=microoweb&itemurl=http%3A%2F%2Fmicrooweb.com%2Fstyleswitchjs-cambiar-dinamicamente-los-css-con-jquery%2Fhttp://microoweb.com/styleswitchjs-cambiar-dinamicamente-los-css-con-jquery/ 7 consejos de como usar CSS para mejorar el SEO http://feeds.feedburner.com/~r/microoweb/~3/291955966/ http://microoweb.com/7-consejos-de-como-usar-css-para-mejorar-el-seo/#comments Fri, 16 May 2008 23:07:49 +0000 DonRaF http://microoweb.com/?p=360 7 buenos consejos de como usar CSS para optimizar aún más el SEO en nuestro sitio. Vía Tablosgin

, , ,
]]> http://microoweb.com/7-consejos-de-como-usar-css-para-mejorar-el-seo/feed/ http://api.feedburner.com/awareness/1.0/GetItemData?uri=microoweb&itemurl=http%3A%2F%2Fmicrooweb.com%2F7-consejos-de-como-usar-css-para-mejorar-el-seo%2Fhttp://microoweb.com/7-consejos-de-como-usar-css-para-mejorar-el-seo/ Fuego Vectorizado http://feeds.feedburner.com/~r/microoweb/~3/291955967/ http://microoweb.com/fuego-vectorizado/#comments Fri, 16 May 2008 23:04:10 +0000 DonRaF http://microoweb.com/?p=358 fuego vectorizado

Hay algunas veces que nos toca buscar un diseño vectorizado de fuego o llamas, podemos dibujarlo si tenemos tiempo pero de lo contrario tenemos estos diseños de DragonArtz listos para descargar. Están en formato EPS, PNG (Resolución 300DPI).

Tamaño: 2,4Mb
Download from Rapidshare
Download from Depositfiles

, ,
]]> http://microoweb.com/fuego-vectorizado/feed/ http://api.feedburner.com/awareness/1.0/GetItemData?uri=microoweb&itemurl=http%3A%2F%2Fmicrooweb.com%2Ffuego-vectorizado%2Fhttp://microoweb.com/fuego-vectorizado/ PicLens: Mira imagenes como estuvieras en el espacio http://feeds.feedburner.com/~r/microoweb/~3/291909255/ http://microoweb.com/piclens-mira-imagenes-como-estuvieras-en-el-espacio/#comments Fri, 16 May 2008 21:31:57 +0000 DonRaF http://microoweb.com/?p=353 PicLens muestra

PicLens navegando sobre imágenes alojadas en Flickr

Actualmente hay un sin número de galerías impresionantes para ver fotos pero PicLens no solo es impresionante sino ha revolucionado la forma de ver fotos o imágenes. Al final ¿que es?, es una galeria slideshow 3D que la navegas como tuvieras surfeando con una tabla por la red en un ambiente digno del espacio.

Pero para navegar fotos o imágenes ¿de donde?, pues PicLens esta programada para surfear en imagenes que sean de Flickr, Picassa, Google Images, Yahoo!, Facebook y otros.

Pero lo mejor es que hace más de 1 mes, agregaron una nueva soportabilidad para buscar y ver videos desde Youtube, mejor ya es imposible.

Funciona como una extensión para los navegadores más populares (Consultar disponibilidad), en mi caso con el Firefox lo ejecuto desde la derecha de la barra de direcciones y empezo a navegar con el buscador propio del PicLens. Sino cuando busco en las miniaturas de cualquier de los sitios mencionados, pasas sobre la imagen y te aparecerá un iconito play para ejecutar la aplicación.

Esto no es todo, además de todo lo visto, también ofrece los siguientes lujos:

En esta imagen observamos la transición de cuando se amplia una foto.

Al ampliar

En esta estamos viendo un video desde Youtube dentro del PicLens

PicLens con Youtube

, , , , , , ,
]]> http://microoweb.com/piclens-mira-imagenes-como-estuvieras-en-el-espacio/feed/ http://api.feedburner.com/awareness/1.0/GetItemData?uri=microoweb&itemurl=http%3A%2F%2Fmicrooweb.com%2Fpiclens-mira-imagenes-como-estuvieras-en-el-espacio%2Fhttp://microoweb.com/piclens-mira-imagenes-como-estuvieras-en-el-espacio/ El dashboard de Wordpress (2.5) al 100% de ancho http://feeds.feedburner.com/~r/microoweb/~3/291868811/ http://microoweb.com/el-dashboard-de-wordpress-25-al-100-de-ancho/#comments Fri, 16 May 2008 20:19:10 +0000 DonRaF http://microoweb.com/?p=348 Para los que nos actualizamos a la recontra-promocionada version 2.5 del Wordpress, inexplicablemente nos encontramos con el cuerpo del panel se encontraba a solo 980 pixeles de ancho, hay darle un palito al que escribio el CSS. Pero esto tiene una solución muy sencilla.

Si vamos a abrir el archivo global.css situado en /wp-admin/css/ de la intalación de WP y localizamos el siguiente código en la linea 154:

PLAIN TEXT
CSS:
  1. .wrap, .updated, .error {
  2. margin: 0;
  3. margin-left: 15px;
  4. margin-right: 15px;
  5. padding: 0;
  6. max-width: 980px;
  7. }

Nada más tenemos borrar la linea max-width: 980px y ya tenemos de vuelta a nuestro dashboard al 100% de ancho de nuestra resolución como nos tiene acostumbrados.

Antes

Despues

La única mala es cada vez que actualizamos una versión de WP, el archivo global.css se sobreescribirá y volverá la antigua linea con el jodido 980px (salvo que lo arreglen desde la casa de WP). De todos modos, de paso para cuando tenga tiempo tenia pensado mejorar visualmente la interfaz del dashboard y de paso con este problema arreglado, empaquetar todas estas mejorías en un plugin así eludir a las sobreescituras en cada actualización WP.

, , ,
]]> http://microoweb.com/el-dashboard-de-wordpress-25-al-100-de-ancho/feed/ http://api.feedburner.com/awareness/1.0/GetItemData?uri=microoweb&itemurl=http%3A%2F%2Fmicrooweb.com%2Fel-dashboard-de-wordpress-25-al-100-de-ancho%2Fhttp://microoweb.com/el-dashboard-de-wordpress-25-al-100-de-ancho/ Diseñar web 2.0 http://feeds.feedburner.com/~r/microoweb/~3/291458238/ http://microoweb.com/disenar-web-20/#comments Fri, 16 May 2008 06:33:36 +0000 DonRaF http://microoweb.com/?p=347 Si te esta tocando diseñar o rediseñar un sitio que deba tener características de web 2.0 y no sabes por donde empezar, en Leandro Blogs podes encontrar una completa recopilación de recursos para lograr un diseño bien 2.0

, , ,
]]> http://microoweb.com/disenar-web-20/feed/ http://api.feedburner.com/awareness/1.0/GetItemData?uri=microoweb&itemurl=http%3A%2F%2Fmicrooweb.com%2Fdisenar-web-20%2Fhttp://microoweb.com/disenar-web-20/ DG Digital: Ya no hará falta ir al Kiosco http://feeds.feedburner.com/~r/microoweb/~3/291445564/ http://microoweb.com/dg-digital-ya-no-hara-falta-ir-al-kiosco/#comments Fri, 16 May 2008 06:18:00 +0000 DonRaF http://microoweb.com/?p=346 En estos dias desde Argentina ha salido DG Digital a la red, una nueva revista exclusiva para los diseñadores gráficos que esta completamente en formato digital, según he hojeado un poco, posee de contenido interesante y lógicamente orientado para el área de los diseñadores de la grafica.

Ver revista DG Digital

, ,
]]> http://microoweb.com/dg-digital-ya-no-hara-falta-ir-al-kiosco/feed/ http://api.feedburner.com/awareness/1.0/GetItemData?uri=microoweb&itemurl=http%3A%2F%2Fmicrooweb.com%2Fdg-digital-ya-no-hara-falta-ir-al-kiosco%2Fhttp://microoweb.com/dg-digital-ya-no-hara-falta-ir-al-kiosco/ CMS sin base de datos http://feeds.feedburner.com/~r/microoweb/~3/291416424/ http://microoweb.com/cms-sin-base-de-datos/#comments Fri, 16 May 2008 05:08:02 +0000 DonRaF http://microoweb.com/?p=345 Quién no ha pensado en un CMS que no requiera base de datos como MYSQL, pues Alma Fernández de Webmasterlibre.com, nos señala y describe cuales son los sistemas que no dependen de una base de datos y que solo almacenan la información en ficheros de texto plano.

, ,
]]> http://microoweb.com/cms-sin-base-de-datos/feed/ http://api.feedburner.com/awareness/1.0/GetItemData?uri=microoweb&itemurl=http%3A%2F%2Fmicrooweb.com%2Fcms-sin-base-de-datos%2Fhttp://microoweb.com/cms-sin-base-de-datos/ Efectos transicionales de color en Javascript http://feeds.feedburner.com/~r/microoweb/~3/291416425/ http://microoweb.com/efectos-transicionales-de-color-en-javascript/#comments Fri, 16 May 2008 04:56:59 +0000 DonRaF http://microoweb.com/?p=344

A este efecto de transición de color es probable lo hayas visto en algún lado sino no tenes idea podes ver en esta demostración que cuando clickeas en los links, las celdas cambian de color. También sirven para cuando pasas con el puntero sobre la celda se cambian los colores.

Es facíl de utilizarlo, podes adaptarlo como más te guste, coloreando el background, el link, etc. Muy recomendable para proyectos de aplicación web.

Ver demo
Descargar Javascript color fading script

, , ,
]]> http://microoweb.com/efectos-transicionales-de-color-en-javascript/feed/ http://api.feedburner.com/awareness/1.0/GetItemData?uri=microoweb&itemurl=http%3A%2F%2Fmicrooweb.com%2Fefectos-transicionales-de-color-en-javascript%2Fhttp://microoweb.com/efectos-transicionales-de-color-en-javascript/ http://api.feedburner.com/awareness/1.0/GetFeedData?uri=microoweb