Martin Iglesias | Recursos y Descargas

TinyTips, tooltips atractivos con jQuery

Tue, 09 Mar 2010 05:00:02 -0500

TinyTips es un plugin para jQuery que tiene como objetivo mejorar los alt y titles de nuestros enlaces. Su ventaja es que es super liviano y fácil de implementar. Su desventaja es que no persigue al ratón y se queda estático y no termina de ser del todo agradable.

Su implementación es muy fácil, basta la librería jQuery, un .JS super liviano y un poquito de CSS para adornar tus tooltips a tu gusto.

Puse una demo online, que no es más que un retoque de la original creada por Mike Merrit en su blog, pero bien vale porque la simplifiqué a un solo estilo de tip. Para descargarlo, no dejes de visitar la web de su autor.

jQuery counter plugin... limitar los caracteres de tus textareas

Thu, 25 Feb 2010 06:32:30 -0500

Este plugin de tan solo 8kb (en su versión reducida) nos da la posibilidad de limitad los caracteres o palabras que nuestros usuarios podrán escribirnos en nuestros textareas de un modo similar al que usa Twitter.

Su funcionamiento es muy simple y, según su autor, funciona con jQuery 1.4. Hay excelentes demos publicadas en la web de su creados que no vale la pena reproducir y su uso es tan fácil como 3 líneas de javascript indicando el id de tu textarea.

Configuración:
El plugin necesita de 3 valores para funcionar (además del id del textarea obviamente) que son:
type: char o word (es decir, palabras o caracteres)
count: down o up (es decir, cuenta regresiva o progresiva)
goal: límite de palabras o caracteres (por defecto 140)

Scroll to top, un plugin jQuery para �volver arriba�

Wed, 24 Feb 2010 03:22:35 -0500

Este plugin es un tanto antiguo, pero nunca está de más utilizarlo en páginas con grandes cantidades de texto o mucho scroll vertical.

Básicamente se encarga de hacer aparecer de la nada un enlace abajo de todo una vez que comenzamos a hacer scroll, que nos devolverá a la posición original de la web.

Su uso es muy simple y totalmente personalizable mediante unas pocas líneas de CSS.

El código:
Consta de 3 partes, el html (código 1), el css (código 2) y el javascript (código 3)

Vía: Brian Cray.

Microsoft Windows te dejar� elegir el navegador web que prefieras

Mon, 22 Feb 2010 10:17:39 -0500

Cumpliendo con la normativa que le fue impuesta a Microsoft por parte de la Unión Europea, Windows, mediante una actualización de Windows Update, permitirá al usuario descargar y usar como predeterminado el navegador que web que seleccione de una lista que va desde Opera, Safari, Firefox, Internet Explorer hasta Google Chrome.

Esto se dará en toda Europa a partir del 1 de Marzo de 2010, aunque en algunos países como Holanda o Francia empezará a partir del 23 de febrero.

Realmente me parece un paso adelante en la libre elección de los usuarios. Las opciones de descarga de los navegadores, se mostrarán desde la web www.browserchoice.eu y los botones de descarga lanzan directamente el instalador del programa seleccionado.

�Oferta para San Valent�n en Madrid!

Wed, 27 Jan 2010 03:22:15 -0500

No suelo escribir estas cosas, pero mis amigos del Hotel Valdemoro publicaron en su web una oferta muy buena para pasar el día de San Valentín en Madrid y me pareció útil escribirlo para que se entere todo aquel que esté buscando donde pasar un día romántico en pareja...

La oferta incluye una habitación doble en el hotel, cena y entrada en una disco por 110 euros... realmente, para los tiempos que corren, me parece un precio nada despreciable.

Si estabas buscando lugar para hacerte una escapada, no lo pienses más, ahi tienes una oferta imperdible (y no, no me llevo comisión... simplemente la amistad).

Subflash 2010 ya tiene lugar... BILBAO

Wed, 20 Jan 2010 06:28:17 -0500

Ya lo dice el blog oficial de Subflash... lugar confirmado en Bilbao!

Pues si, tras varias gestiones y comunicaciones, podemos confirmar públicamente que subflash 2010 ya tiene una sede fijada y unas fechas, a lo largo de la semana os daremos todos los detalles relacionados con el lugar, fechas, estancia, precios, pero lo que ya os podemos asegurar es que subflash vuelve al norte de España para visitar un nuevo lugar: Bilbao.

Desde aqui agradecemos mucho a Diego y Karmele las gestiones que han realizado para poder localizar el sitio, solicitar la documentación y reserva correspondiente, y hacerlo una realidad, su esfuerzo ha ayudado a encontrar un lugar que reune todas las características necesarias para tener otro gran evento, y con el esfuerzo de un montón de asiduos (ellos saben quienes son), hemos logrado solventar las pequeñas dificultades que nos hemos encontrados.

Asi que ya sabéis, preparar las maletas para Agosto que nos vamos a Bilbao!!!

(Más información en breve, estad atentos!)

Ahi estaremos!

Miniaturas con t�tulos transparentes en jQuery

Fri, 08 Jan 2010 03:19:04 -0500

Este plugin está muy visto ya, pero no por eso deja de sernos muy útil a la hora de presentar miniaturas con algún título o descripción. Evidentemente, por el tamaño de la miniatura, no puede ser mucho el texto que le agregues, pero para un título o una muy breve descripción, llega de sobra.

Es muy fácil de aplicar, como casi todo lo que se hace utilizando jQuery, se personaliza mediante tu hoja CSS y unos pocos parámetros podremos lograr unos efectos muy buenos.

La demo está poco trabajada, lo reconozco, pero la idea es que veas el funcionamiento y lo apliques a tus diseños.

¿Lo mejor?
Que no requiere nada más que la librería jQuery, con lo que no irás cargando de plugins tus códigos.

Si quieres ver la documentación original, te dejo el link de su creador.

Ahora vamos a los códigos:
1) Un poquito de JS en el head de tu página (código 1)
2) Un poco de CSS para personalizar a tu gusto las imágenes... (código 2)
3) Tus imágenes en xhtml, php o lo que quieras (código 3)

Sugerencias de b�squedas con t�tulo y enlace web en Google

Wed, 30 Dec 2009 03:48:40 -0500

En la versión inglesa de la web de Google (www.google.com) mientras vas escribiendo el texto de la búsqueda, el buscador te ofrece una lista de palabras sugeridas y, la sorpresa del día, enlaces a algunas webs conocidas. Imagino que estará en pruebas y solo lo hace con webs famosas -la mía no la sugiere :(-

Yo me pregunto si ésto llevará en breve a Google a vender estas sugerencias con url en los criterios de búsqueda que utilice la gente... porque, si se mantiene gratis, me parece más que interesante...

Cartel rotatorio como esos de las carreteras con jQuery

Mon, 21 Dec 2009 03:44:46 -0500

Este plugin sirve para hacer un slider de imágenes que van rotando en trozos, similar a los que se ven en las carreteras, que van cambiando de una publicidad a otra por pequeñas partes verticales.

El uso es muy sencillo, se configura por CSS, lo malo es tener que hacer la gran cantidad de imágenes que se necesita para si quieres que las partes verticales no sean muy anchas. Como puedes ver en este link, debes cortar tu cartel en trocitos...

Como un ejemplo vale más que mil palabras, te dejo un link de la demo de este cartel para que veas qué es lo que intento explicar (ya ves que no soy de letras xD)

Para utilizarlo, sólo debes seguir los pasos que aparecen en los códigos más abajo. No está de más avisarte que todas las medidas que ves en los códigos siguientes, son para el ejemplo de cartel que se ve en la demo.

jStickyNote... notas adhesivas en tu web con jQuery

Mon, 21 Dec 2009 03:35:17 -0500

Este plugin tiene por finalidad poner esos tan útiles post-it (MR) que siempre vemos en todas oficinas, tapando la mitad de los monitores con todas las cosas pendientes por hacer...

Pues bien, ahora podemos llenarle el monitor de notitas adhesivas a nuestros visitantes con recordatorios, mensajes o lo que quieras.

Su autor, nos deja una serie de demos que no tiene sentido duplicar para poner en mi web...por lo que te aconsejo que lo mires desde ahi.

Es totalmente personalizable mediante CSS y por favor, si lo usas, no uses la Comic Sans!!!!

Barra de slider al estilo Safari con jQuery

Mon, 21 Dec 2009 03:27:30 -0500

Otro interesante plugin de jQuery para seleccionar valores entre un rango determinado de un modo más gráfico que los 2 clásicos campos del tipo input.

Se trata de una barra donde se pueden arrastrar tanto el valor inicial como el final de fechas, importes y todo lo que se te ocurra.

La demo está muy bien, muy fácil y la documentación también es fácil de utilizar...

Opciones:
* from — [número] límite inferior izquierdo
* to — [número] límite máximo derecho
* step — [número] Valor por el cual el punter se moverá (de 1 en 1, 2 en 2, o lo que quieras)
* round — [número] número de decimales
* heterogeneity — [array] porcentaje de posición actual / valor actual
* dimension — [string] caracteres que muestra después de los valores (ej: m2, euros, etc...)
* limits — [boolean] mostrar o no mostrar los límites
* scale — [array] valores que se muestran por debajo del slider
* skin — [string] para personalizar el color del slider, etc...
* calculate — [function(value)] función para calcular el resultado final.
* onstatechange — [function(value)] esta función se ejecuta cuando el valor cambia.
* callback — [function(value)] esta función se ejecuta al soltar el slider.

Tama�o de im�genes autom�tico con jQuery

Mon, 21 Dec 2009 03:14:21 -0500

Este es el primero de una lluvia de post que voy a publicar todos juntos porque en este fin de semana dí con varios plugins para jQuery que me parecieron interesantes.

En este post, le toca el turno al jQuery maxImage plugin, que se encarga de redimensionar automáticamente las imágenes según su ratio, tamaño de la ventana del navegador y otras opciones.

Realmente, para entender su funcionamiento alcanza con mirar las demos:

1) Imagen de fondo. Ver demo

2) Ajustándose al tamaño de la pantalla (solo uno de los bordes). Ver demo

3) La imagen no sobrepasa su tamaño original. Ver demo

4) Como pase de diapositivas de fondo. Ver demo

Instalando:
Muy fácil, agrega la librería jQuery, descarga el jQuery maxImage plugin y sigue los siguientes pasos:

a) Inserta las librerías (código 1).
b) Agrega el código javascript dentro del head (código 2).
c) Agrega una imagen utilizando el class seleccionado en el código 2 (código 3)

Men� o barra lateral (sidebar) siempre visible con scroll y jQuery

Tue, 01 Dec 2009 03:35:24 -0500

Encontré el otro día en CSS-TRICKS un excelente ejemplo de como hacer que una barra lateral o menú o submenú (o lo que quieras) acompañe siempre con movimiento vertical al contenido central de la web.

Realmente es muy útil, por ejemplo, para grandes cantidades de texto en las que quieres mostrar unos enlaces internos a determinadas partes de ese texto o subsecciones o lo que quieras.

Es más difícil de explicar que de hacer y ver, por lo que me apropié de la demo de CSS TRICKS y la pasé a español dejando solo la opción que me interesa que es la de la barra lateral acompañe al texto central.

Su uso:
Es muy simple, luego de agregar la librería jQuery a tu web, debes indicarle que capa de tu html será la que se mueva acorde al scroll que hagas en tu web (ver código 1) y en tu html, indicar el div que hará de barra lateral (ver código 2) y un poco de CSS para adornar tu barra lateral.

¿Quieres el original? Lo suponía, así que ahi te va el enlace original y mi demo.

Switch Mode: plugin jQuery para ver contenido en modo lista o iconos

Fri, 20 Nov 2009 03:22:51 -0500

Este plugin está más que interesante. Sirve, resumiendo, para ver listados con 2 diferentes presentaciones como puede ser la clásica lista (uno debajo de otro) o en modo iconos (en bloques uno al lado de otro).

El método de funcionamiento es muy simple, un enlace para hacer el cambio de modo y unas pocas líneas en tu archivo CSS te dejarán obtener cosas como ésta...

¿La implementación? Muy fácil, no requiere nada más que la librería jQuery instalada en la web (ver código 1), un poquito de CSS (ver código 2) y el html o php que muestre el contenido (ver código 3).

Su autor, publica una opción con un fade sobre el contenido, pero yo he decidido quitarlo en mi demo, por la simple razón que es un PNG transparente y luego tendrás problemas con el bendito IE6, además, no siempre necesitarás esconder contenido.

Escritorio vac�o en windows 7

Sat, 07 Nov 2009 05:59:59 -0500

Hoy, encendí mi PC como todos los días y me encontré con la sorpresa de que habían desaparecido todos mis iconos del escritorio. Se veía la barra de inicio y todo funcionaba correctamente, pero el escritorio sólo mostraba el background que tengo normalmente.

Luego de comprobar que los iconos estaban -mediante el Explorador de Windows- y de hacer una copia del escritorio a la otra partición, me puse a buscar la solución...

Luego de mirarme unos 10 foros donde solo decían que ejecute el explorer.exe desde el administrador de tareas (cosa inservible en mi caso porque el explorer.exe funcionaba correctamente), se me dio por darle con el botón derecho al escritorio y seleccionar la opción VER. Ahi dentro, me encontré una opción destildada que ponía tan simple como: "MOSTRAR LOS ICONOS DEL ESCRITORIO".

No sé porqué pero los iconos habían desaparecido, de ahi mis preguntas:

1) ¿Windows 7 entenderá cuando tu escritorio es un caos y te los esconde automáticamente?
2) ¿Habrá algún atajo de teclado desconocido para mi que pulsé sin darme cuenta y activé esta limpieza de escritorio?
3) ¿Windows 7 estará pirado?
4) ¿No le gustarán mis iconos?

Y así podría estar todo el día... pero más allá de que esto se solucionó volviendo a mostrar los iconos (ver foto adjunta), me pregunto... no es atentar demasiado contra mi privacidad el esconderme los iconos que yo quiero en el escritorio?

Regalo monitor Philips 107E en A Coru�a -REGALADO-

Fri, 06 Nov 2009 14:43:48 -0500

Si, cansado el lugar que ocupa, regalo este monitor Philips 107E con unos 7 años de antigüedad (pero hace 2 que se usa esporádicamente, 1 vez al mes o así) porque ya no lo utilizo más.

Está en perfecto estado y funciona correctamente (eso sí, igual un poquito sucio).

Lo único que pido es que lo vengas a buscar, mandes un transporte a recogerlo o te pongas debajo de mi ventana y te lo arrojo desde el tercer piso que vivo... ya que no quiero dinero por él, tampoco quiero pagar gastos de envío.

Si lo quieres, contáctame por facebook, twitter, por el formulario en esta web o por donde quieras!

EDITO: me olvidaba... Vivo en La Coruña (España)...

ACTUALIZACIÓN: EL MONITOR YA TIENE NUEVA CASA. MARI CARMEN PASÓ A RECOGERLO Y YA LO TIENE EN SU CASA. ESPERO QUE LE DÉ TANTO USO COMO LE DI YO.

CU3ER... un slider 3D en flash gratuito

Thu, 29 Oct 2009 13:16:56 -0400

Si estás cansado/a de tanto jQuery para tus sliders o de usar siempre el mismo swf para hacer un carrousel de imágenes, te dejo una solución MUY BUENA para reemplazarlo.

Se trata de CU3ER, un slider 3D hecho en flash, gratuito y con muchas funcionalidades configurable por un simple XML (ver código 1).

Descargar

20 �great� dise�os web con fondo oscuro

Mon, 19 Oct 2009 05:43:31 -0400

Mi web ha sido incluida en varios blogs donde se dan a conocer ´20 great web designs with a dark background´ o lo que es más fácil... 20 ´grandes´ diseños web con fondo oscuro.

Es un honor para mi salir en estas listas que sirven, sobre todo, de inspiración a mucha gente.

Hasta ahora me vi en:

- Designer Daily
- BOBD.cn
- Qianduan

Y muchos DIGGs, BLOGLINES y demás... a todos muchas gracias!

Code Snippets en CSS TRICKS

Sun, 13 Sep 2009 06:13:27 -0400

Uno de los mejores blogs que visito muy a menudo, del cual se pueden sacar cosas más que interesantes sobre CSS, jQuery y demás cosas abrió una nuevo sección llamada "CODE SNIPPETS" la cual recopila muchos pequeños trozos de código (CSS, PHP, jQUERY, HTACCESS, JavaScript) fáciles de implementar y que nunca está de más tenerlos a mano.

Enlace: Code Snippets en CSS-TRICKS

Incrustar PDFs en tu web con Google Docs

Fri, 11 Sep 2009 02:38:16 -0400

De la mano de Anieto2K me encuentro esta excelente utilidad para incrustar un PDF dinámicamente en nuestra web sin tener que lanzar el Adobe Reader.

Simplemente se trata de una línea de código y generará un visor para el documento.

Ejemplo:

Uso de jScrollPane para jQuery. Elegante scroll en tus div

Wed, 09 Sep 2009 03:18:21 -0400

Este es un plugin que ya he utilizado varias veces para mostrar contenido ´encajado´ en ciertas dimensiones y mejorar la barra de scroll que muestran los navegadores.

De sobra sabemos que el colorear las barras de scroll con CSS funciona sólo en Explorer... porque simplemente no es código válido. Entonces, qué mejor que implementar esta realmente fácil solución.

Se trata de aplicarle una barra de desplazamiento personalizada mediante CSS, con flechas, posibilidad de deslizar la barra arriba/abajo y todas las funciones normales de una barra de scroll.

Implementación:
Es muy fácil de implementar. Consta de 3 scripts, el primero, la librería jQuery, el segundo, el script propio del scroll y el tercero -opcional- es para hacer que nos funcione la rueda del ratón sobre el texto a scrollear.

Vamos al grano:
Para verlo en funcionamiento, he puesto una demo muy simple, hay muchos ejemplos en la web de su autor, pero básicamente con mi demo nos vale.

Pasos a seguir:
1) Aplicar las librerías, js y css (ver código 1)
2) Personalizar el CSS (ver código 2)
3) Seleccionar en nuestro xHTML el div que hará el scroll (ver código 3)

Opciones:
Hay muchas opciones para este plugin, como cargar contenido mediante AJAX, eliminar contenido, mostrar flechas o no, cambiar el margen entre el texto y la barra, etc... para eso te aconsejo seguir el enlace de la web del autor.

Detectar que el visitante navega desde un dispositivo m�vil con PHP

Wed, 19 Aug 2009 02:30:47 -0400

A raíz de abrir la versión ´mobile´ de mi web, me he interesado últimamente en como detectar que el usuario que nos visita lo hace desde un dispositivo móvil (léase PDA, iPhone, blackberry, palm, etc...). Entonces, dando vueltas por ahi, he dado con una función en PHP muy fácil de implementar y que cumple mi objetivo a la perfección.

En la web de su creador (que no es gratis para proyectos comerciales) puede configurarse la función al propio gusto y luego descargar el código generado.

En mi caso, quiero que si el visitante está a través de un dispositivo móvil, se le redireccione a la nueva dirección http://wap.martiniglesias.eu que es donde hay una versión casi desangelada, sin estilos ni imágenes, livianita pero fea como pocas.

La implementación:
Luego de elegir la larga lista de dispositivos y que hacer con cada uno de ellos, tenemos 2 partes:

1) El archivo ´mobile_device_detect.php´, que será el encargado de ejecutar la redirección una vez comprobado el navegador que usa el visitante (no posteo el código porque debes descargarlo de la web de su autor).

2) El llamado a la función y el paso de parámetros agregado en la primera línea de nuestra web (código 1).

AnyThing Slider... jquery plugin

Tue, 18 Aug 2009 02:21:56 -0400

Como bien dice su autor, sí, es otro slider para jquery. Pero éste tiene una particularidad y es que une un montón de características de otros.

A mi, personalmente, me resulta más que interesante y no creo que pase mucho tiempo hasta que lo pruebe. Mucho no se puede contar, más de lo que publica Chris Coyer en CSS-TRICKS.

Características:
- El contenido a mostrar es HTML puro, por lo que puede ser cualquier cosa.
- Flechas de Siguiente/Anterior.
- Las pestañas de navegación (números) son agregadas y construidas dinámicamente.
- Auto Play -puede comenzar automáticamente o iniciarlo desde un botón-.
- Cada slide puede enlazar a su contenido específico.
- Loop continuo, siempre continúa rotando slides.
- Múltiples instancias del slider por página.
- Se puede pausar al hacer un rollover.
- Incluso el texto de cada slide puede enlazarse con su contenido.

Implementación:
La implementación es muy fácil, mira el código 1 para el javascript necesario.

Slides:
Cada slide debe ir dentro de un <li> que a su vez está dentro de un div llamado ´wrapper´. Y para ajustar el tamaño a tus necesidades, debes retocar la hoja CSS incluida.

Demo:
Como para muestra basta un botón, mejor verlo que leerlo, así que pásate por la demo (y de paso, ahí tienes el link para descargarlo).

Mi web ahora en tu m�vil WAP

Thu, 13 Aug 2009 16:36:05 -0400

Esta semana que estuve de vacaciones por Gran Canaria, me dediqué a navegar bastante tiempo por internet a través del móvil GPRS y me cansé de no poder ver webs por no estar adaptadas para dispositivos móviles.

Para ser justo conmigo mismo, debo reconocer que mi web era una de las tantas que no pude ver... entonces, hoy, volviendo al trabajo, estreno la nueva versión WAP de mi web muy lavada de contenidos gráficos pero con toda la información disponible en la versión completa.

He pasado el validador de webs para móviles así que la doy por buena, pero en cuanto tenga tiempo intentaré mejorarla. Mientras tanto, que la disfrutes!

Enlace: Martin Iglesias | WAP.

Nuevos plugins para jQuery

Tue, 04 Aug 2009 10:04:23 -0400

En una nueva edición de mi recorrida por los plugins de jQuery.com me encuentro con varios nuevos bastante buenos y, como estoy de vacaciones (léase un poco vago) y no quiero escribir sobre cada uno por separado, haré una reseña de todos a la vez.

jQuery MaxChar plugin
Este plugin es para limitar el número máximo de caracteres permitidos en un campo de texto o textarea. Es muy útil porque va mostrando una cuenta regresiva con los caracteres disponibles en tiempo real.

jQuery imgZoom plugin
Otro de los tantos zoom para imágenes que existen en jQuery con la diferencia que éste, amplía la fotografía en el mismo lugar de la miniatura.

jQuery SexyCombo plugin
Un plugin más para embellecer las listas desplegables o select de nuestros formularios.

jQuery easingAnimation plugin
Un plugin más que interesante para realizar animaciones de elementos en nuestra web.

En cada título del plugin está el enlace para ver una demo y descargarlo, ya que, como dije antes, estoy de vacaciones y un poco vago para comentarlos.

Actualización: Gracias Marcos por avisarme del fallo en el último link. ;)

ListBox doble con filtro de b�squeda usando jQuery

Thu, 23 Jul 2009 02:45:33 -0400

En la web de jQuery.com me encontré con un usuario que publicó un plugin para hacer listas dobles (es decir, el clásico: una lista con todas las opciones y los botoncitos para ´pasar´ a la otra los items que queremos), pero con una más que interesante opción de un campo de texto en la parte superior que sirve para filtrar aquellas opciones de nuestra lista según el texto ingresado.

Es más difícil explicarlo que verlo. Las características que tiene, además del potente filtro, son que pueden ´pasarse´ de una lista a otra, un elemento, muchos, muchos a la vez y lo mismo con quitarlos de la segunda lista.

Hay muchos demos en la web del autor, pero me quedo con uno, la versión cross-browser, porque, hoy día, si un código no funciona en todos los navegadores, entonces no sirve. Nunca podemos obligar a la gente a ver la web con el navegador que tú quieres que la vea.

¿Una demo?
Sí, porque como explicándome soy pésimo, mejor te dejo un link para que lo veas en funcionamiento y entenderás de qué hablo.

La implementación:
Muy fácil, sólo agregar las librerías jquery y el plugin que se descarga desde la web del autor y un poco de código html (ya no xhtml...)

Lo quiero...
Pues descárgatelo de este enlace.

Comentario:
Sería muy fácil rellenar la lista 1 (la que tiene todos los items) con contenido dinámico, simplemente debes reemplazar en el segundo código que pongo aquí abajo la parte de los ´option´ con el resultado de tu consulta a la base de datos. Y recuerda que para que se procese el envío del formulario, la segunda lista debe llamarse con nombre de Array (es decir, con [ ] al final -sin espacio en el medio-) y debes usar algún script para seleccionar todos los items como, por ejemplo, ejecutar la función del código 3 al hacer el submit.

Explorer 6... el principio del fin

Sat, 18 Jul 2009 04:17:59 -0400

Creo que por fin muchos podremos decir... al fin!!!!!!!

Hasta ahora solo algunos webmasters habían tomado la iniciativa de dejar de maquetar webs para IE6, es más, sé de empresas que cotizan los trabajos con un plus si el cliente quiere que su web se vea en Explorer 6...

Este «yo digo» no es para cuestionar políticas a usar, si maquetas o no para el 6, cobras más o menos, igual o lo mismo... es para, de algún modo, festejar que un grande de internet ha tomado la iniciativa de hacer desaparecer a este navegador obsoleto como pocos pero con gran porcentaje de mercado hoy día.

Yo no puedo decirle a mi cliente, para ver bien tu web actualiza tu navegador... pero ahora sí puedo decirle: para ver vídeos de youtube, necesitarás actualizar tu navegador... Y para mi cliente, sabio el hombre, será razón de más justificada para actualizar su navegador el perderse sus vídeos preferidos en la red.

Bien por Google, bien por YouTube y todos aquellos nos dejamos horas arreglando hojas CSS que validan para que el viejo Explorer 6 las muestre igual podremos decir, al fin, que ésto se ha acabado.

Lo bueno, el cambio ya comenzó...
El 12 de mayo de 2009, yo publicada un «yo digo» en el que hacía mención a no dejar de maquetar en IE6 porque, hasta ese día, mi web recibía un 29.18% de visitas en IE6, pero este porcentaje era parte de un 27.98% de visitas que recibía de usuarios utilizando Explorer. Está claro que mi web la visitan desarrolladores más que nada, porque un 63 y pico por ciento de mis visitas eran con Firefox.

Hoy...
La tendencia no cambia... Desde el 13 de mayo de 2009 hasta ahora mismo, un 63.96% de mis visitas son en Firefox. Explorer se rebaja a un 24.81% perdiendo un 3%. Pero lo más importante es lo que sucede con las distintas versiones de Explorer:

Comparativa:
IE6 = Antes... 29.18% - Hoy... 22.11%
IE7 = Antes... 65.97% - Hoy... 57.16%
IE8 = Antes... 04.76% - Hoy... 20.54%

La tendencia es que IE6 pierde un 7% en 2 meses... de seguir así, desaparecía o quedarían en un porcentaje mínimo para finales de año.

¡Al fin!

Bordes redondeados con jQuery sin im�genes

Mon, 13 Jul 2009 07:58:34 -0400

Seguramente ya habrás utilizado o conocerás esta técnica. Se trata de poder utilizar bordes redondeados (que tan bien quedan) en los elementos de tu web sin utilizar imágenes para ello. El método, se vale de jQuery para adaptar los divs que indiques con el efecto que desees y, como se puede ver en la demo online que publiqué, es totalmente transparente con respecto a tu fondo.

Para aplicarlo, luego de agregar la librería jQuery en el head de tu web, debes indicar qué capa quieres redondear y el plugin se encarga de todo.

Mírate los códigos que aparecen a continuación, o mira el source de la demo.

Renovarse nunca est� de m�s

Tue, 07 Jul 2009 14:10:34 -0400

Presento con mucho orgullo la versión 2009 (beta, of course) de mi sitio web. Esta vez, dejo el gris, me paso al negro y los colores fuertes. Como me gustaban los 3, pues eso, puse los 3 para que el visitante elija en qué color quiere ver el sitio.

Lo más maravilloso de maquetar con CSS es que, con unas pocas líneas de cambio y nuevas imágenes, podemos tener un sitio web totalmente nuevo y renovado.

Aprovechando el cambio, actualicé el PDF de mi CV web, eliminando todas aquellas páginas que ya no existen.

Espero que te guste tanto como a mi ;)

Efecto �Page Slide� con jQuery

Wed, 24 Jun 2009 14:28:11 -0400

Descubro hoy en jquery.com un nuevo plugin para jquery que simula el efecto de deslizar parte de la pantalla para darle al visitante un mensaje o mostrar cierto contenido en forma de slide, ya sea desde la izquierda o la derecha.

Realmente, le veo muchos usos en próximos proyectos, tales como pedir confirmaciones a botones pulsados, formularios de login, mensajes a destacar, y muchas cosas que se te puedan ocurrir.

Por lo pronto, aun no lo he usado, pero no creo que pase mucho tiempo sin probarlo.

¿Cómo se implementa?
Muy fácil, como siempre, primero agregar la librería jQuery y luego, unas pocas líneas de código bastarán... y luego personalizas tu slide como quieras en tu hoja CSS.

¿Descargarlo?
Visita la web de su autor, Derek Perez.

Talleres Subflash 2009... lleg� la hora!

Wed, 17 Jun 2009 09:53:48 -0400

Si señores... tal cual se está anunciando en muchos blogs y foros, Subflash arranca la inscripción a los talleres 2009 que tendrán lugar, por segundo año consecutivo, en Alicante.

Como todos los años, el evento tendrá lugar en el último fin de semana de agosto, y a pesar de mis esfuerzos (y los de Carlos) por traerlo a Galicia, no hemos dado con el lugar adecuado para montar estos talleres que prometen más que nunca.

Yo aun no he confirmado mi presencia por cuestiones de transporte y laborales, pero, si te puedes acercar por ahi, no lo dudes... aunque sólo asistí al de 2006 en Oviedo, te puedo asegurar que es una experiencia única e irrepetible.

No está de más agradecer, nuevamente, a todos los que se dejan la piel para que eventos como éste rocen la perfección en organización, calidad, amistad y compañerismo.

Lo dicho, si quieres más información sobre los talleres, costes, días, horarios, etc... te aconsejo que te mires estas webs:

Blog de Subflash + Web de los Talleres Subflash 2009

Subflash se reinventa... estrena blog

Tue, 16 Jun 2009 08:19:50 -0400

Ya lo anunciaron mis amigos de [Q] en su post, Subflash se ha reinventado. Estrena blog, el cual en breve estará cargado de contenidos interesantes y con nueva imagen, renovada, más fresca y actual. Pero no todo queda ahi, estrena blog anunciando la proximidad de los nuevos Talleres Subflash 2009, de los cuales, en breve, estará disponible toda la información.

subflash es una comunidad de desarrolladores web en lengua castellana que nace por iniciativa de Javier Montcerda Pascal (javimp) en el año 2001. En sus inicios comienza con diversos tipos de contenidos, pero poco a poco toda su actividad se centra en los foros, que alcanzan gran actividad y repercusión en los años 2003 y 2004.

He tenido y tengo la suerte de participar de esta gran Comunidad a lo largo de los años en el Foro, del que luego me han nombrado Moderador y espero poder seguir participando en este nuevo reto que supone el Blog.

Por lo pronto, lo próximo, serán los Talleres 2009. Nos vemos ;)

Efecto �Page Peel� con jQuery

Mon, 01 Jun 2009 05:37:25 -0400

Seguramente habrás visto este efecto mil y una veces. Se trata de la famosa esquina con el borde "doblado" al estilo page curl (ese filtro antiguo de KPT, si mal no recuerdo, para Photoshop que te hacía el efecto de doblar una esquina del documento).

Pues bien, de la mano de Sohtanaka, un blog en inglés que suelo leer bastante, me encuentro este plugin que hace un efecto similar con jQuery para tu web.

Hay una demo disponible online para que veas el efecto que creo que está muy logrado a pesar de ser simple.

El tutorial está en inlgés pero es bastante sencillo de seguir.

¿La implementación?
Como siempre, muy fácil de seguir:

1) Crea el div que hará el efecto (código 1)
2) Prepara y personaliza el CSS (código 2)
3) Anima la esquina (código 3)

jqTransform: Formularios elegantes con jQuery

Mon, 01 Jun 2009 05:29:54 -0400

Dando una vuelta por los blogs habituales que suelo leer, me encuentro con jqTransform, un plugin para jQuery que sirve, nada más y nada menos, que para mejorar (y mucho) la apariencia de nuestros formularios web.

Su aplicación es muy fácil y personalizable al 100%. Sólo debes seguir 3 pasos:

1) Agrega el javascript necesario (código 1)
2) Escribe tu formulario (código 2)
3) Utiliza el plugin (código 3 justo debajo del formulario)

Aun no he tenido oportunidad de utilizarlo, pero realmente tiene buena pinta.

¿Descargarlo?
VIsita la web de su autor y ahi lo encontrarás.

Yo no voy a dejar de maquetar para IE6

Tue, 12 May 2009 10:01:49 -0400

Puede que mucha gente piense que estoy loco. Que soy masoquista o que me gusta perder el tiempo.

¿Por qué dejaría de desarrollar para IE6?
Simplemente, porque pasa de los estándares, porque los display y los float son su diversión, y, la mayoría de los trabajos no pueden presupuestarse para tener que adaptar los códigos a todos los navegadores...

Porque creo en la renovación de equipos y tecnologías, y aunque, estoy muy en contra de la política de las empresas que te imponen navegadores en sistemas operativos, creo que es necesario adaptarse a las nuevas posibilidades que nos proporcionan los avances tecnológicos.

Porque se pierde mucho tiempo, dinero, las webs se hacen más pesadas, necesitan a la fuerza de tirar de javascript para optimizar las vistas. Nos perdemos los magníficos efectos que podemos hacer con un archivo PNG de 32 bits... o duplicar hojas de estilos o condicionales o lo que sea que toque...

Tendría miles de razones para tirar este navegador a la basura...

Ahora bien, ¿Por qué NO dejaría de desarrollar para IE6?
Porque cuando hago una web no puedo decirle a un cliente que la mire en el navegador que yo quiera que lo haga. La va a mirar en el navegador que tenga o quiera.

Porque no es problema del cliente que la web no se vea en Explorer 6, que su navegador tenga 8 años de obsoleto. Es mi problema hacer que la web se vea bien.

Porque lamentablemente las estadísticas nos dicen que este navegador está lejos de morir. Que baja el porcentaje de gente que lo usa, sí, es cierto, pero aun es muy grande.

Y seguramente tendré muchas razones más por las cuales el cliente no debe pagar que este navegador no soporte CSS como debería.

Las estadísticas...
Son un poco raras, está claro que quien anda en el mundillo web o diseño, no usa explorer. Las estadísticas en mi web lo dejan claro. Explorer está casi vetado en mi web (ver gráfico)... pero si estas estadísticas las saco de una web de empresa, ajena al desarrollo web, veremos que la cosa cambia.

En fin, este post viene un poco a cuento de la gran cantidad de post que veo en otros blogs donde quieren matar IE6 a la fuerza, como intentando hacer una cruzada de webmasters para no maquetar para IE6 y dejar que quien usa este navegador, simplemente, se joda.

Es así, voy a seguir perdiendo tiempo arreglando cosas que se ven bien en Opera, Safari, Chrome, IE7+, Firefox... de Mac, PC o Linux (los que hay, claro)... para que mi cliente con su portátil del año 2000 y su windows xp con IE6 me diga... "ahora la veo perfecta".

Por eso, no veo claro dejar de maquetar para Explorer 6, al menos por ahora... ¿Estaré equivocado?

Marca de Agua en PHP

Mon, 11 May 2009 12:37:05 -0400

Hace unos días, necesitando crear dinámicamente una marca de agua sobre las fotos que subía por file upload en PHP, programé unos cambios a una función que uso habitualmente para los upload, con lo que se fusionan ambas imágenes.

Aunque en el ejemplo, la marca de agua es excesiva, puede hacerse a tu gusto, siempre que exportes el archivo en formato PNG 32 con fondo transparente.

Puse una DEMO del funcionamiento en esta dirección, donde, a partir de la imagen subida, se genera una copia con marca de agua y una miniatura sin marca alguna.

¿El código?
Muy fácil, aquí abajo lo tienes.

Que lo disfrutes!

Galer�a de Im�genes con vista previa

Tue, 05 May 2009 03:40:46 -0400

Dándome una vuelta por los blogs que habitualmente leo, me he encontrado con uno muy bueno, donde su autor, nos deja un excelente tutorial para hacer una galería de imágenes con descripción y vista previa mediante el uso de CSS y jQuery.

La galería se ve realmente muy bien y fácil de implementar, siguiendo los pasos del tutorial que, aunque en inglés, tiene imágenes explicando el paso-a-paso a seguir.

Todavía no tuve necesidad de utilizarlo, pero imagino que podrá encajar en alguno de los proyectos que estoy realizando ahora mismo.

La forma de implementarla es muy fácil siguiendo estos 3 pasos, aunque, igualmente, te recomiendo que te mires el enlace del tutorial.

Retratos personalizados en blanco y negro

Wed, 22 Apr 2009 10:01:50 -0400

Mi hermano Mariano, me escribió desde Argentina, para comentarme que dedica sus ratos libres a dibujar retratos de personajes en blanco y negro tan buenos como este de la foto que adjunto.

Los vende muy baratos a través de Mercado Libre y los puedes ver aquí.

Tiene de personajes del cine como Joker, Batman, Terminator y muchos más...

Como él lo cuenta:
RETRATOS B/N ORIGINALES REALIZADOS EN CARTULINA BLANCA, VERTICALES O APAISADOS, DE 45 CM. X 65 CM., SEGÚN DETALLE PUBLICADO EN EL TÍTULO O A PEDIDO DEL CLIENTE INTERESADO, CON TERMINACIONES EN CRAYÓN, PASTEL AL ACEITE, CARBONILLA Y DIVERSOS LÁPICES NEGROS MIXTURADOS ENTRE SÍ, CONFECCIONADOS PERSONALIZADAMENTE EN EL DÍA BAJO TÉCNICA DE DIBUJO AMPLIFICADO. POSIBILIDAD DE DEDICATORIA EXCLUSIVA Y ELABORACIÓN DE FONDOS EN TONOS GRISES O A TRAVÉS DE COPIA FIEL DE LO SOLICITADO.

SE HACEN ACTORES, PERSONAJES, DIBUJOS, FAMILIARES, ETC.

ADEMÁS: RAMBO, TERMINATOR, ROCKY, MR. BEAN, SLEDGE HAMMER, DRÁCULA, FRANKENSTEIN, CATWOMAN, JOKER, THE AVENGERS, Y OTROS. UN SIN FÍN DE OTROS FAMOSOS EN UNA LISTA INTERMINABLE.

Recomendados!

Excelentes tutoriales de Adobe Fireworks

Wed, 15 Apr 2009 04:31:08 -0400

Como no todo va de jQuery, me encontré con un blog que nos propone una serie de tutoriales para Adobe Fireworks (sí, marca registrada) y como enseña cosas que están muy de moda en las webs de hoy día, me propuse a hacer una lista con las que consideré mejores.

Ahi van:

Efecto "Realistic Photos" (fotitos con sombras para darle un efecto moderno) [en]
Efecto "Golden Seal" (crear una estrellita dorada de esas que tantas se ven en las webs 2.0) [en]
Efecto "Sticky Notes" (crear notas adhesivas con un efecto muy real) [en]
Extraer logos (como "recortar" logotipos sin usar la pluma) [en]
Luces y sombras circulares (excelente ejemplo con un salvavidas al que se le da un relieve muy bueno) [en]
Botones al estilo Windows Vista [es]
Espectaculares Efectos Neon [en]
Efecto Gota de Agua [en]

Plugins:
Aquí hay una serie de plugins para Phostoshop, aunque su autor indica que bien valen para otros programas.

Un importante:
Si te gusta Fireworks (o como yo, te gustaba hasta el CS3), entonces no debes dejar de mirar esta web con una recopilación de los mejores tutoriales que encontré por ahi.

Redimensionar texto con jQuery

Tue, 14 Apr 2009 03:36:32 -0400

Leo en shopdev una interesante técnica para agrandar o reducir el texto de tu web mediante jQuery. Realmente es muy fácil de implementar.

Los únicos requisitos son, utilizar el mismo tipo de medida para los textos que utilices, es decir, por ejemplo, todos los textos marcados en porcentaje, pixels, puntos, etc... pero todos por igual.

Luego, incluyes la librería jQuery y el pequeño código que pongo a continuación y todo resuelto.

El autor, nos deja una demo disponible para probar antes de usar.

qTip... tooltip en versi�n plugin de jQuery

Tue, 31 Mar 2009 08:20:24 -0400

qTip es un plugin para jQuery que nos permite que nos permite poner tooltips personalizables en nuestra web de un modo muy fácil.

Tiene varias características que lo hacen muy a ser tenido en cuenta a la hora de aplicar estos tooltips (que a veces son un poco pesados, porque negarlo)... entre ellas:

- Vale para todos los navegadores (sí, IE6 también)
- Personalizable vía CSS
- Si no tienes javascript activado, verás la cajita fea típica de tu navegador
- Fácil de posicionar
- Bordes redondeados sin imágenes
- Posibilidad de agregarle contenido vía AJAX

Y lo más importante, con licencia para usarlo donde quieras, como quieras y para lo que quieras.

Si quieres descargarlo o ver unas demos, te aconsejo mirarte la web de su autor.

TinyTable y el arte de ordenar tablas en javascript

Mon, 23 Mar 2009 08:43:01 -0400

Hoy, ante la necesidad de manejar muchas opciones para ordenar una tabla con varios registros, buscaba la mejor forma de hacerlo sin tener que recargar la página ya que los resultados mostrados, dependían de muchas opciones y provenían desde 5 buscadores distintos.

Entonces, googleando, me encontré con esta fabulosa solución que nos ofrece su creador.

Se trata de TinyTable, un script de tan sólo 2.5 kb que, mediante personalización CSS, te da todas las opciones necesarias, como paginación, botones de anterior/siguiente, cambiar resultados por página, mostrar número total de páginas y... hasta personalizar y marcar la columna según el índice de ordenación.

Recomiendo su uso, es muy fácil de implementar y, a mi, me ahorró mucho tiempo en programar estas opciones.

Si quieres, mírate la demo en la web de su autor y descárgalo también desde la web de su autor.

Su uso:
Dentro del .zip que te descargas, te viene un html con todo lo que necesitas, por lo que no hay códigos disponibles.

Por un adsl m�s barato en Espa�a

Wed, 04 Mar 2009 03:45:12 -0500

La gente de adslzone ha empezado una campaña para recolectar firmas con el fin de conseguir que se mejoren las ofertas de ADSL en España o se igualen, al menos, al resto de la Unión Europea.

A mi, como usuario desde hace muchos años de ADSL me parece una propuesta más que interesante y por eso, ya soy la firma 172.287 de la petición.

Si quieres unirte a la propuesta, sigue este enlace.

Esperemos que se consiga algo!

Validaci�n personalizada de formulario

Tue, 03 Mar 2009 04:54:28 -0500

Esta vez, como tenía que validar un formulario y no quise usar jQuery para hacerlo, me puse a escribir mi propia función.

Necesita solamente de unos toques de CSS y 2 funciones en javascript, una para validar en sí y otra para restablecer el ´class´ de los elementos si fueron rellenados por el usuario.

En mi ejemplo, el formulario se compondrá de 4 elementos básicos, 3 input text y un textarea para datos básicos de contacto, los cuales tienen que ser todos completados antes de enviar.

Manos a la obra...

1) El primer paso, será crear nuestro formulario, para ello, pongo a disposición el ejemplo usado en el código 1.

2) Lo segundo, será montar el CSS de ese formulario (ver código 2).

3) Y lo último, será poner nuestra función javascript antes del form (ver código 3).

El funcionamiento.
Es muy básico, al rellenar el formulario se ejecuta la función de validación... Si hay campos sin rellenar, no dejar enviar el formulario.

Mientras tanto...
Al picar texto sobre cada campo, se vuelve a ejecutar otra función más, que comprueba que el campo se rellenó, y en el caso de los e-mails, por expresiones regulares, comprueba que sea una dirección de correo válida.

Si te vale, mira la demo online para ver su funcionamiento y cópiate el código fuente de ahi para usarlo.

Seguramente se podrá mejorar... pero eso te lo dejo a tí!

jQuery imgPreview plugin

Thu, 12 Feb 2009 05:24:57 -0500

Un nuevo y excelente plugin vio la luz para jQuery. Se trata de un plugin que permite previsualizar una imagen de un modo similar a un tooltip pero con pocas líneas de código.

Permite mostrar una imagen sin necesidad de hacer click y tiene muchas opciones para personalizar la muestra ya sea con CSS o simplemente ajustando tamaños.

Para muestra un botón...
Mírate los muchos ejemplos que hay en la página del autor...

Su aplicación...
Fácil como casi todo lo que se hace con jQuery (mira el código 1).

Y si quiero bajarla...
Visita la web de su autor...

Cambios en la web

Tue, 10 Feb 2009 06:15:36 -0500

Hola, he realizado una serie de cambios en la web y otros están previstos para aparecer en breve.

El cambio más significativo es que he quitado casi todos los trabajos realizados, dejándolos, únicamente, en la descarga PDF y publicando aquellos de familia o amigos... busco, así, centrarme más en los recursos y en las tonterías que digo en esta sección.

¿Por qué?
Porque sí... porque quiero enfocar de otro modo la web, no quiero que sea una librería de webs que para eso ya hay muchas galerías online.

Además, mi web sale bastante bien ubicada en los buscadores cuando se realizan búsquedas sobre alguna de las webs que hice y ese es otro motivo que quiero evitar.

Lo próximo...
Pondré un límite a la descarga del PDF, que desde que está online, se han descargado más de 150 personas.

Gracias a todos ;)

Una galeria de im�genes gratuita en Flash

Tue, 10 Feb 2009 06:07:34 -0500

Imagin es una galería de fotos gratis de flash para tu sitio web. Puede organizar las fotos y películas, y mostrarlas como presentación de diapositivas. Es fácil de actualizar la galería con nuevas imágenes, simplemente subir tus fotos a través de ftp.

Hasta aquí el texto traducido de la web de su autor. Ahora mi opinión. Está realmente muy bien desarrollada, porque es muy fácil de utilizar. Sólo debes subir tus imágenes dentro de la carpeta pictures y si quieres organizar por subcategorías, solo debes crear las carpetas y meter las imágenes dentro.

La galería se ocupa del resto.

Y lo mejor...
Totalmente gratis para cualquier uso, obviamente, menos venderlo!

Yo me lo descargaría...

Simpletip, un tooltip con jQuery

Tue, 10 Feb 2009 05:51:54 -0500

Vía sentidoweb me entero de este excelente plugin para crear tooltips con jQuery.

¿Por qué excelente?
Porque seguramente ya hemos agregado la librería jQuery a nuestra web para hacer algunas de todas las funciones que nos deja, entonces no necesitaremos mucho más para hacer funcionar estos tooltips.

¿Cómo funciona?
Muy simple, mirar el código 1 más abajo y verás que fácil es...

Ya... ¿Pero y si quiero cambiar los colores?
Mírate el código 2 (el CSS) y verás que es totalmente personalizable...

Antes de usarlo prefiero ver como va...
Mírate los ejemplos en la web del creador.

Me convenciste, lo quiero...
Descárgatelo de la web de su autor.

PD: No te olvides de jQuery!

Mootools + SWFObjects = Conflicto en IE6

Sat, 31 Jan 2009 11:49:46 -0500

Bueno, como siempre, una vez terminada una web, es necesario empezar con los hacks para explorer (cuando se acabará esta historia!)...

En una esquina...
Una web que usa SWFObjects para mostrar una transición de fotos en flash a modo de cabecero, que se repite en todas las páginas interiores.

Y en la otra esquina...
Una página interior que hace uso de un calendario en Javascript que necesita de Mootools para ejecutarse...

No es de extrañar que en firefox funcione bien...

Entonces, comienza el combate, recorremos toda la web en explorer 6 y nos encontramos con que todo funciona hasta que llegamos a la página del dichoso calendario...

IE7 da un error de Javascript pero sigue adelante con la carga de la página. Eso sí, el script del calendario nunca funcionará...

Firefox, sigue con todo adelante, funcionando todo como debe ser...

IE6, se pasa de listo...! Saca una alerta (igualita a la de la foto de este post) y directamente te salta al hermoso "NO SE PUEDE MOSTRAR LA PÁGINA" y que compruebes tu conexión a internet y bla bla bla...

Entonces, googleando (que bien suena!), di con una solución muy bonita y fácil de implementar... sólo hace falta ejecutar la función del SWFobject dentro del domready y con eso estará todo funcionando.

La solución...
Mira el código 1 más abajo y verás que fácil es...

Espero que te sirva.

Listas o Selects con ancho fijo... deja de esconderme texto! (IE)

Fri, 16 Jan 2009 04:10:09 -0500

Si alguna vez maquetaste un formulario con CSS y necesitabas, claro está, que el ancho de los objetos -campos de texto, selects, etc...- tengan un ancho fijo, sabrás que con declararle un width en tu hoja CSS bastaba.

Ahora bien,
Si le aplicaste un ancho fijo a los SELECT, y tuviste la mala suerte de que las opciones de esa lista se pasasen en tamaño del ancho declarado, comprobarás que en Explorer 6, 7 (y me imagino que todos los demás, aunque el 8 no lo probé aun) se esconde el contenido tal como se ve en la foto que hay aquí a la derecha.

Sabrás también, que en el resto de los navegadores "normales" como Firefox, Opera, Safari, Chrome, esto no pasa y que solo afecta al Explorer (cuando no...)

Pues bien,
Leo en css-tricks, que proponen varias soluciones tales como:

1) Incluir unas librerías que tiene Yahoo disponibles.

2) Utilizar los Behaviors como en este ejemplo...

3) Utilizar la opción de cambiar el tamaño del SELECT vía jQuery.

En las primeras opciones (1 y 2) con seguir los links encontrarás toda la información necesaria... en el caso de la opción 3, necesitarás, además de la librería jQuery, utilizar esta función que pego en código 1.

La idea,
es que al pasar el ratón por encima del SELECT, éste tome su ancho original y al quitar el ratón vuelva al ancho fijo.

Fuente: css-tricks.

Men�s contextuales con jQuery

Tue, 06 Jan 2009 14:04:39 -0500

Con este plugin de jQuery podemos personalizar el menú contextual que vemos al hacer clic con el botón derecho de nuestro ratón.

Mientras leía el post de uno de sus creadores, me encontré con que hay otro plugin que cumple similar tarea por lo que dejo los links a ambos recursos que me parecen por igual de interesantes.

Menú 1: Ver web | ver demo
Menú 2: Ver web y demo

En el caso del primer menú, su uso es muy fácil... (ver códigos 1 y 2).

En el caso del menú 2, les aconsejo mirar la web de su creador que tiene muchos ejemplos.

jQuery Alert Dialogs... reemplaza las alertas

Tue, 06 Jan 2009 13:56:06 -0500

A menudo utilizamos alerts, prompts o confirms en nuestras webs o sistemas para avisar algo al usuario o pedirle su confirmación, o simplemente que entre un dato.

jQuery nos da una posibilidad enorme de mejorar estas feas ventanas de alerta de javascript con muy pocas líneas de código como siempre.

¿Qué ventajas obtenemos? En funcionamiento ninguna, pero en estética ganamos mucho, ya que podemos controlar vía CSS los colores, tipografías y fondos que usarán nuestras ventanitas.

¿Cómo se usa? Como siempre, agregando las librerías jQuery (ver código 1), y llamando a la función (ver código 2)

¿No te convence? Mira la demo que puso su creador para que veas los diferentes usos...

Recomendación: sería recomendable utilizar siempre una función que, en caso de fallar el uso de jQuery, nos muestre los diálogos de modo tradicional, ya que si, por alguna razón, jQuery fallara, dejaremos de avisar al usuario de nuestra web de algo que puede ser importante.

Fuente: anieto2k.

Igualar columnas css con jQuery

Wed, 31 Dec 2008 03:19:48 -0500

Cuando maquetábamos webs con tablas (sí... soy culpable, yo también usé tablas), era muy fácil igualar el alto de columnas (no en contenido, sino en altura total de la caja).

Ahora, con los CSS, se hace un poco más complicado, porque claro, intentaremos dejar eso de las tablas para eso de los datos tabulares, por lo que no podremos valernos de esa ayudita...

Entonces, y aunque una solución -casera- puede ser usar un div contenedor y dentro cada div de las columnas, jQuery no deja de sorprendernos con otra maravillosa solución (esta solución no vale para divs con fondos)

Consiste en decirle mediante un class, que columnas debe igualar y el script se ocupa de hacerlo.

Obviamente, necesitaremos incluir la librería jQuery, pero a esta altura, creo yo, ya la habremos usado para algo en nuestra web.

La aplicación de esta solución es muy fácil, solo hace falta aplicar la función (ver código 1) y luego, marcar cada div con un class (ver código 2).

Fuente: cssnewbie (inglés).

P{4} - ProjekPoster de Personajes

Tue, 23 Dec 2008 12:16:53 -0500

Marc Palau, nos pide ayuda en su web:

"quiero hacer un megaposter de 2m x 1,30m con todos (o casi todos) los personajes historicos que se nos ocurran. Como yo estoy limitado a mi memoria, espero que gente como tu deje su grano de arena añadiendo tantos personajes como se te ocurran.

La temática no está limitada a nada, así podemos ir desde Mahatma Gandhi hasta Son gokuh, pasando por Michael Jackson o Felipe González. De momento ya hay 2343 personajes y me gustaría llegar mínimo a los 5000 (+ info), ya que haciendo un pequeño calculo tenemos que una imagen a 300PPP de 2,00m (23622px) por 1,30m (15354px) puede tener unas 4000~ imágenes de 300px * 300px (1 pulgada cuadrada) en fila. Si quiero meter los personajes superpuestos recortando el fondo necesitaré muchas más del mínimo cuadrado. Las imágenes saldrán de procesos automatizados, así que no sufráis por que tenga que buscar tantas fotos.

Para facilitar que no se repitan, cuando escribas se irán mostrando las coincidéncias que ya figuran en la base de datos.

Al terminar el poster, colgaré el archivo JPG para quien quiera imprimirselo o el PSD para hacer lo que se os ocurra."

Pues eso, si te sabes unos cuantos personajes, pásate por su web y engorda la lista de nombres.

Yo ya me pasé ;)

jQuery date picker plug-in

Tue, 23 Dec 2008 12:04:00 -0500

Últimamente me estoy encontrando con que muchos de mis proyectos requieren la integración de un "date picker" o selector de fecha. ¿No sabes qué es? Esos campos de texto de un formulario en el que te piden una fecha y, generalmente, tienen un botoncito que te abre un calendario flotante que, al seleccionar una fecha, desaparece y coloca la fecha seleccionada en el campo de texto en cuestión.

Pues bien, como casi casi siempre utilizo el mismo, me decidí a subirlo a mi web, aunque la versión original de este plugin, con su documentación completa y ejemplos de varios tipos, puede encontrarse en la web del autor: kelvinluck.

Aquí abajo, pego los 3 pasos para tener este bonito calendario en nuestros formulario de un modo más que rápido y, si quieres verlo antes de instalarlo, te dejo esta demostración online.

Los pasos son, como siempre, muy sencillos:

1) Incluir las librerías en el HEAD de tu página (ver código 1)
2) Iniciar la función del calendario (ver código 2)
3) Armar tu formulario... (ver código 3)

También, he subido un archivo comprimido con los archivos de mi demostración online, donde están, además, las hojas de estilos para personalizar tu calendario.

Que lo disfrutes!

Adobe CS4 en Galicia... consideraciones

Sun, 21 Dec 2008 05:14:15 -0500

Una vez finalizada la presentación del Adobe CS4 en Vigo, a la cual tuve el gusto de asistir, quiero dejar mis consideraciones de los momentos vividos organizada por el DWUG, el grupo de usuarios de Adobe Dreamweaver y de móviles BlocketPC.

Por un lado, el gustazo de siempre de ver a "viejos" conocidos y el gusto de conocer a nuevos, siempre es positivo. Pasar un día entero junto a Marcos, Andrés, Carlos y Armando es una experiencia que pocas veces se repite y que otras pocas veces se disfruta más.

Pero vamos a lo que vamos, a resumir el día. El viernes empezó tarde, pero yo no asistí, por lo que poco puedo contar.

El sábado 20, el día empezó temprano... a las 9.30 nos encontrábamos (previo incidente con el agente de seguridad) con Marcos, Andrés, Carlos y Armando y, previo desayuno, empezaron las charlas.

La primera fue para Andrés, que nos comentó de modo muy fácil las ventajas que tiene el nuevo Dreamweaver CS4, su facilidad de uso, su alta capacidad para manejar las hojas CSS, para editarlas, los widgets, como instalar extensiones y demás cosas que hasta me hicieron pensar en volver a utilizar este programa que abandoné hace años.

En la segunda, Marcos, nos comentó todas las ventajas y (des) del nuevo Device Central de CS4, su potente librería online de terminales móviles, con una ficha de características muy completas para saber qué teléfonos móviles soportan flash lite, qué versiones y demás, y muchas opciones de esta pequeña pero potente aplicación, como previsualización de proyectos web para móviles desarrollados en flash, consumos, tareas automatizadas, etc...

En la tercera charla, Jorge nos dio una videoconferencia, a través de Adobe Connect, de lo nuevo de After Effects CS4, un programa que cada vez se está volviendo más y más potente y rompe todos los límites en sus capacidades... Como dijo él, ya no se trata de qué se puede hacer, sino de cuánto estás dispuesto a pagar por ello. Impresionantes ejemplos de animación, tracker de trozos de vídeo y demás que como dijo él, nos hicieron hacer "la ola"...

Y por último penúltimo, Armando, nos deleitó con las novedades del nuevo Photoshop CS4, que están muy bien, pero de todas las que nos comentó (estiramiento líquido de imágenes para no deformarlas, 3D, personalización de paneles, nuevos paneles de ajustes de imagen, etc...) me quedo con su notable mejora en el rendimiento, ya que le cede al procesador el proceso de las acciones que ejecutes, ganando un tiempo más que considerable al aplicar filtros y demás.

Ahora sí, por último, llegó el tiempo de los sorteos, impresionantes regalos nos llevamos los asistentes, desde bolis hasta camisetas muy chulas, libros, dvds, etc... y finalizando con una licencia ADOBE original para un Adobe CS4 Web Premium o un Adobe CS4 Design Premium, el cual no tuve la suerte de adjudicarme. La próxima vez será.

Resumiendo:
Fue un día espectacular, compartido con MUY grandes personas, las cuales se hacen cuantos kilómetros hagan falta para compartir sus conocimientos (que son muchos), y, aunque los chistes en la comida no estuvieron al nivel de las charlas, me lo pasé genial y no dudaría en repetir la próxima vez que se junten.

Desde esta humilde web, quiero agradecerles a Marcos, Andrés, Carlos, Armando y por supuesto a Jorge, su tiempo, sus ganas y su dedicación a organizar esta clase de eventos del que algunos, como yo, nos beneficiamos.

He dicho.

LAVALAMP para los amantes de jQuery

Fri, 12 Dec 2008 03:51:18 -0500

Para quienes quieran implementar el "Menú LavaLamp" sin flash y con sólo 700 bytes (versión pack) de manera muy fácil en sus menús, no se pueden perder de mirar esta web.

El efecto es impresionante, a mí personalmente me gusta mucho, aunque aún no le implementado en ningún proyecto.

La implementación es muy fácil y me tomé la libertad de publicar la demo que distribuye su autor en mi servidor para quien quiera verla.

Para descargar los archivos, vete a este link.

La implementación es muy fácil como todo lo que usa jQuery. Mira los códigos.

DD_belatedPNG (PNG�s 24-bit transparentes en Explorer 6)

Fri, 12 Dec 2008 03:35:10 -0500

background-image + background-repeat + background-position + 24-bit PNGs para Internet Explorer 6 (...mejor tarde que nunca!)

Me encontré con esta web hace unos días y, aunque no probé su funcionamiento, me parece más que interesante porque es muy fácil de implementar, pesa muy poco y, al parecer, su comportamiento es correcto.

Para descargarlo, como dicen en su web:

Uncompressed (~8Kb): DD_belatedPNG 0.0.4a.js

Compressed (~4Kb): DD_belatedPNG 0.0.4a-min.js

Y ahora, a modo de reflexión personal, debería llegar el día en que la gente deje de una buena vez, de usar IE6... No quiero llevar a todos a Firefox, cosa que sería mejor, pero sí, a dejar de usar el IE6.

La web original de proyecto es esta: http://dillerdesign.com/experiment/DD_belatedPNG/

¿La implementación? Muy fácil, mira el código más abajo:

jQuery Validate: la r�pida validaci�n de formularios.

Thu, 04 Dec 2008 08:26:25 -0500

Cansado de usar siempre el mismo javascript para validar formularios o de procesar el formulario y validar en PHP los campos (cosa menos recomendada y que debo cambiar en esta web), me decidí por probar el plugin Validate de jQuery.

Con pocas líneas de código y otras pocas de CSS, tus formularios estarán validados rápidamente.

Te lo aconsejo ;)

Proceso:
1) Incluir dentro del head los script de jQuery y el de validación y el estilo (ver código 1)
2) Crear tu formulario... (ver código 2)
3) Llamar la validación justo debado del (ver código 3)
4) Listo el pollo...

Por supuesto que todo puede mejorarse, la presentación del error, etc... este es un ejemplo básico, que, por cierto, te puedes descargar desde el enlace que aparece más abajo.

Si quieres ver todos los métodos que acepta el plugin Validate de jQuery, visita http://docs.jquery.com/Plugins/Validation#Example

s3Slider: plugin para crear slideshows con jQuery

Wed, 26 Nov 2008 09:06:05 -0500

Vía webintenta me entero que existe esta genialidad: s3Slider jQuery plugin es un script realmente espectacular para crear "slideshows". Tan sólo hay que echar un vistazo a la demo para darse cuenta del potencial que tiene. La implementación es realmente sencilla, sólo hay que hacer las pertinentes inclusiones -jquery.js y s3Slider.js-.

En la web del plugin podemos descargar varias versiones, una de ellas con ejemplos completos. El plugin está testado para la totalidad de los navegadores más habituales.

Enlace: s3Slider jQuery plugin

Para aplicarlo, deben seguirse estas normas:

1) Inclusión de los .JS (jquery y s3Slider)
2) El HTML (ver código html)
3) El CSS (ver código css)
4) El Javascript (ver código javascript)

Ejemplo online: ver demo

Para descargarlo: aquí!

Excelente listado de 240 plugins para jquery

Fri, 21 Nov 2008 03:24:57 -0500

Hoy día, es muy difícil encontrar una web que no lleve algún efecto que se haga con la ya archi conocida librería javascript JQuery.

Yo la suelo usar bastante, por eso, y como siempre tengo a tiro este enlace en mis "marcadores" de Firefox, lo publico en mi web por si alguien más quiere verlo.

Aquí les dejo el listado completo:

Subir imágenes

Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.

Validación de formularios

jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV - form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.

Formularios - Cajas de selección

jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery - LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).

Formularios básicos, campos de entrada, Checkboxes etc.

jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.

Hora, fecha y selección de colores

jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.

Plugins de calificación

jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.

Plugins de búsqueda

jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHP&MySQL).
quick Search jQuery Plugin.

Edición

jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable - edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin - Another In-Place Editor.
TableEditor.
tEditable - in place table editing for jQuery.

Audio, Video, Flash, SVG, etc

jMedia - accessible multi-media embedding.
JBEdit - Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.

Fotos/Imágenes/Galerías

ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery - jqGalViewII.
jQuery - jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs - easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface & Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi - Zoomable Thumbnails.
jQuery Crop - crop any image on the fly.
Image Reflection.

Google Map

jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery & Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps - by Tane Piper.

Juegos

Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).

Tablas, Grillas, etc.

UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter - awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable - in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.

Gráficos, presentaciones, etc.

jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.

Bordes, esquinas, fondo

jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.

Texto y links

jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad - a text gradient plugin.
LinkLook - a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.

Tooltips

jQuery Plugin - Tooltip.
jTip - The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.

Menus, navegación

jQuery Tabs Plugin - awesome! .
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu - Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.

Acordión, Slide

jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion - a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo - Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.

Drag and Drop

UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR - drag, drop resize.
Drag Demos.

XML XSL JSON Feeds

XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier - Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite - multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.

Browsers

Wresize - IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber - removes the dotted line onfocus from links.
jQuery Perciformes - the entire suckerfish familly under one roof.
Background Iframe.
QinIE - for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.

Ventanas de alerta, ingreso y confirmació

jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.

CSS

jQuery Style Switcher.
JSS - Javascript StyleSheets.
jQuery Rule - creation/manipulation of CSS Rules.
jPrintArea.

DOM, Ajax y otros jQuery plugins

FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata - extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat - periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it - display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy - awesome plugin.
Effect Delay Trick.
jQuick - a quick tag creator for jQuery.
Metaobjects.
elementReady.

Vía: kollermedia.at

Si todavía no conoces esta librería, te invito a que la descubras en http://jquery.com/

Nueva versi�n de la clase FPDF

Fri, 14 Nov 2008 07:12:30 -0500

Esta famosa clase usada para generar PDFs al vuelo desde la web, actualizó su versión con grandes mejoras según comentan en su sitio web:

v1.6 (2008-06-08)
- GIF image support.
- Images can now trigger page breaks.
- Possibility to have different page formats in a single document.
- Document properties (author, creator, keywords, subject and title) can now be specified in UTF-8.
- Fixed a bug: when a PNG was inserted through a URL, an error sometimes occurred.
- An automatic page break in Header() doesn’t cause an infinite loop any more.
- Removed some warning messages appearing with recent PHP versions.
- Added HTTP headers to reduce problems with IE.

Como siempre, no esta de más recordar que es una clase libre y gratuita incluso para utilizar en proyectos donde se consiga un beneficio económico.

Para más información, visita su web.

Layouts en CSS gratis

Fri, 31 Oct 2008 07:57:04 -0400

Si no se te da bien eso de maquetar la hoja de estilos para tu web, te dejo este recurso que, aunque ya hace mucho que está disponible, te vendrá bien si quieres empezar con eso de "no usar más tablas" para hacer tu web.

Vía aNieto2k me encuentro este excelente recurso, CSS Layout, en el que ofrecen plantillas gratuitas y compatibles con la mayoría de los navegadores.

Interesante directorio con Layouts (estructuras) para tus aplicaciones web basadas en estandares y completamente funcionales en la mayoría de navegadores actuales.

Pon un PNG con fondo transparente...

Fri, 26 Sep 2008 03:13:47 -0400

Hasta ahora, y convencido por usar multiplesIE, creía que todos los parches para que se vean tus PNG con fondo transparente funcionaban pero el otro día me encontré en una situación un tanto difícil de explicar.

Había hecho un boceto para una web, que era un PNG completo con fondo transparente porque tenía que pisar sobre un fondo que se escala a la resolución del navegador.

Pues bien, hago la maqueta, pongo mi hack de siempre, abro IE7... se ve bien, abro el multiples IE (sólo instalé el 6... creo que ya no hace falta más)... y ¡SORPRESA!... se ve bien.

Entonces, como no me fiaba de eso, le pregunté a mi hermana que tiene solo IE6 instalado y, ohhh ¡OTRA SORPRESA! se veía como una auténtica basura!

Entonces bien, luego de romperme el cerebro tratando de solucionarlo, y de probar todos y cuanto parche existe en el mundo... descubrí que el problema no es el parche, sino como exportes tu PNG desde donde lo generes (yo uso FW para las maquetas de mis webs).

Ahora bien, dí con la solución, y como me la voy a olvidar, la dejo aquí escrita para recordármelo a mí mismo la próxima vez que haga una web...

Aquí los pasos:

1) Exporta tu PNG en formato PNG32. Aplicando la opción MATE en NINGUNO.
2) Tu documento no debe tener ningún fondo si lo que quieres es que sea transparente.
3) Usa el hack que dejo a continuación, porque es el que uso yo y funciona bien.
4) Cuando ues el PNG en tu xHTML, no te olvides de algo importante... ponle ancho y alto a la imagen... sino, se verá de 1x1 px.
5) Descárgate mis archivos y modifica las rutas según tu web.

Y no hay más... Suerte!

Prueba tu dise�o web en distintos navegadores

Thu, 25 Sep 2008 06:43:42 -0400

Hace poco me topé con este servicio/web que está realmente genial para aquellos que queremos que una web se vea bien en todos los navegadores.

Aunque, personalmente, opino que habría que dejar de desarrollar pensando en IE6, que, además de antiguo, es anti estándares y anti todo... nunca está demás probar este servicio.

Aquí la descripción oficial en su web:

Browsershots hace capturas de pantallas de su diseño web en distintos navegadores. Es un servicio de código abierto creado por Johann C. Rocholl. Cuando usted envía su dirección web, es añadida a la cola de trabajos. Un número de computadoras distribuídas abrirá su sitio web en su navegador. Luego se harán capturas de pantallas y se cargarán aquí en el servidor central.

Les invito a probarlo en este enlace.

Google Chrome, el navegador de Google

Tue, 16 Sep 2008 02:51:17 -0400

Google Chrome: el navegador web de Google. ¿Alguien creía que algo así no iba a llegar algún día? Es un paso más de la estrategia de Google por conquistar la web y le acerca aún más a un futurible Google OS, sobretodo por algunas de las características que implementa.

A pesar del apoyo que Firefox ha recibido de la empresa del buscador, Google Chrome no estará basado en este, sino que utilizará el motor de renderizado de Safari, WebKit, lo que supone un espaldarazo importante para este navegador, cuyo motor corre ya en Windows, Mac, el iPhone, S60,...

Como máquina virtual para Javascript se ha desarrollado una desde cero, llamada V8, optimizada y que acelerará la ejecución de este código, algo básico pues todas las aplicaciones de Google en la web lo usan de forma intensiva.

Esto, junto al hecho que indican que lo que se ejecute en cada pestaña del navegador se encontrará dentro de su propio entorno de seguridad y no puede afectar al resto ni a nuestro ordenador, acercan la posibilidad de implementar este modelo como si fuera un sistema operativo (aunque evidentemente con una capa por debajo que implemente drivers,...) El cloud computing llevado a su máxima expresión. Evidentemente, vendrá integrado con Gears para poder funcionar de manera offline.

Otros detalles de Google Chrome parecen derivados directos de los incluidos en otros navegadores, como la barra de direcciones con autocompletado, llamada Omnibox, y que permite realizar búsquedas no solo en direcciones, sino también en títulos, realiza sugerencias,...

La página por defecto será, además, muy similar a Speed Dial de Opera, con una serie de miniaturas que nos mostrarán las nueve páginas más visitadas, además de las búsquedas recientes, marcadores y pestañas cerradas recientemente.

También encontramos un modo de navegación privada, llamado Incognito, similar a InPrivate, incluido en Internet Explorer 8, con el que no se guardarán datos de lo que hagamos en esa pestaña en el ordenador.

Finalmente, también se incluye la posibilidad de ejecutar aplicaciones web en su propia ventana independiente, como Prism, como manera de acercar aún más las aplicaciones web y las de escritorio.

De momento no se sabe demasiado más de Google Chrome, un proyecto que Google está mostrando de una forma muy curiosa: a través de un cómic que está enviando por correo a diversos periodistas y bloggers.

Habrá que probar este nuevo navegador en cuanto esté disponible, pues estando Google detrás recibirá un fuerte apoyo. El estar basado en un proyecto abierto, como es WebKit, hará que la fragmentación en la web no se agrande aún más, aunque resulta raro que no hayan optado por Gecko. La guerra entre navegadores tiene un nuevo actor… ¿lo hará bien?

Vía | Blogoscoped.
Enlace | Google Chrome

¿Detectar Chrome? Vía David Walsh Blog, de forma fácil y sencilla.

IEPNGFix, ahora con CSS background-position y background-repeat

Wed, 23 Jul 2008 05:24:26 -0400

Ajaxian ha anunciado que IEPNGFix, el script encargado de paliar los problemas con imagenes PNG en Internet Explorer 6, ha añadido compatibilidad con las propiedades backgrond-position y background-repeat entre las que ya tenía.

[Ver Demo]
[Descargar ficheros]

Ahora bien... si te preguntas que es IEPNGFix, te dejo la explicación que dan en su web (eso sí, mal traducido por mi)...

Es una "extensión" que agregar soporte casi nativo a Internet Explorer 5.5 y 6.x (el 7 ya lo tiene) si necesidad de cambiar nada en el documento html que estamos haciendo. Incluye las siguientes características:

Activación automática de la transparencia para imágenes PNG en el html.
Soporta elementos IMG.
Soporta PNGs como background (ningún otro script lo soporta!)
Las imágenes de fondo pueden definirse interna o externamente en la hoja de estilos.
Cambio automático de SRC/background a través de normal JavaScript (ej. mouseover rollovers) -- no necesita programación especial.
Incluye soporte para cambios en elementos CSS 'className'.
Incorpora automáticamente el fondo en elementos con imágenes de fondo del tipo PNG.
Script reducido... (para descargas rápidas).
Con licencia de Software libre...

¿Cómo se usa?

Fácil, fácil... luego de descargarte los archivos, mira el código que pongo a continuación, y pongo dentro de tu hoja de estilos.

Simulando frames con CSS

Tue, 22 Jul 2008 14:26:25 -0400

Mi amigo Carlos Macías publica este interesante mini tutorial del cual me hago eco (mejor dicho le copio 100% -con su permiso-) y lo publico porque me parece algo muy interesante. Aunque parezca mentira, a día de hoy, sigo cruzándome con gente que quiere usar frames en las webs!!

Hoy con unos conocimientos mínimos de css, es posible construir layout complejos con la apariencia de una aplicación de escritorio.

Entonces orgullosos miramos una y otra vez nuestro layout, que además valida xhtml 1.1, copiamos la url y lo comprobamos en Ópera y también en Safari. Y nada, que somos unos hachas… hasta que nos dá por mirarlo en Explorer 6 (porque en el 7 y el 8 aún queda decente), y nos damos cuenta de que no se vé lo que se debería ver, acordándonos de que es imposible combinar las posiciones left y right, top y bottom.

Pero bueno, soluciones haylas, solo hay que exprimirse un poco el cerebro y atacar a explorer por donde le duele.

Y es por eso, que hice unos experimentos con layouts compatibles con los navegadores buenos y los malos. Solo un pero. Si tenéis el explorer 6 instalado con el “multiple Explorer”, aunque este renderiza como explorer 6, es detectado en los comentarios como explorer 7.

Ver ejemplos del tema...

Iconos en links usando CSS

Thu, 17 Jul 2008 02:54:59 -0400

Esta es una excelente solución para aquellas veces en las que necesitamos hacer una lista de descargas y queremos que cada uno de los links tengan un icono representativo del tipo de archivo que vamos a descargar.

Se le puede asignar a cada enlace con una o más extensiones una imagen para imprimir y que se vea como en la imagen de ejemplo, tampoco es necesario agregarlo para todos, sólo las extensiones que nos interese, una entrada en el CSS y listo!

En el link que dejo en estas líneas, hay una colección de iconos para descargarse y en el código está el ejemplo de como usar esta técnica.

Y el ejemplo del código de más abajo nos quedaría como la siguiente imagen...

Forzar descargas con PHP

Sun, 13 Jul 2008 09:27:08 -0400

Hacer descargables cualquier tipo de archivos no es muy complicado. La mayoría de las tecnologías del lado del servidor nos permiten hacer esto, en este caso veremos cómo es con PHP.

Esto es muy útil para cuando queremos evitar que los navegadores con plugin instalados nos abran directamente el archivo enlazado porque reconocen la extensión del archivo.

De este modo, para acceder a la descarga, nuestro enlace deberá ser: descargar.php?archivo=imagen.jpg

TinyMCE. Editor de texto avanzado

Wed, 02 Jul 2008 05:49:06 -0400

De la mano de Cmacias me entero que este gran editor wysiwyg para textareas ha tenido una serie de actualizaciones

En esta ocasión no hay novedades sino soluciones a algunos bug que generaban incompatibilidades entre navegadores.

Enlace: TinyMCE 3.1.0

Actualización Enero 2009: Se publicó la versión 3.2.1.1 con varias mejoras en cuanto a su funcionamiento.

Actualización 2: Forzando a TinyMCE para que pegue texto sin formato...
Esto puede sernos muy útil cuando copiamos y pegamos textos de otras webs. Evitaremos así, que se respeten todos los formatos aplicados en la web de origen de nuestros textos (ver código 1).

Fuente: A beatiful site.