Recursos para el desarrollo con wordpress
Últimamente nos está tocando lidiar bastante con blogs en los proyectos del estudio, y si bien algunos temas, o el tema por defecto acabas teníendolo claro, para los que no nos hemos dedicado a indagar en las entrañas de un wordpress, en ocasiones cuesta sacar información o módulos que ves en otros blogs.
Con estos enlaces seguro que tenemos la vida un poco más fácil para conocer las bases de un wordpress y por donde hay que tirar para según que cosas.
The Wordpress Help Sheet
The Wordpress Help Sheet en Castellano
The Advanced Wordpress Help Sheet
Cabe destacar que los originales de estas hojas han sido sacados de liquidicity, que me acaba de obligar a reservar parte de mi tiempo a mirarlo en pronfundidad poque tiene pinta de ser un enlace más que interesante 
Talleres de Verano Subflash 2008
Llega el veranito, y por estas fechas si hay algo que no puede faltar… no son las chicas morenas, el sol y la ropa de verano… o las terrazas para tomarse un refresquito…. sino los talleres de verano subflash!!
Visitando el foro de subflash me entero (por decir algo… XD) de que ya están en marcha, y que este año se van a realizar en Alicante!
Desde aquí agradezco personalmente la ayuda que nos ha prestado en esta ocasión Elad de Nitsnets, con todo lo que es la reserva del lugar e instalaciones necesarias para llevar a cabo un evento como este. Mil gracias Elad (y también a Andrés Karp, Andrés Cayón, Ramón Masip y mis queridos Jorge y Alberto, que siempre logran que tenga tiempo para dedicarme a esto a base de apurar un poco más su trabajo diario).
El evento tendrá lugar los días 29, 30 y 31 de Agosto de 2008, en la Villa Universitaria de San Vicente del Raspeig, Alicante, y por un precio que ronda los 100€, podremos disfrutar de 3 días inolvidables. Las instalaciones, este año prometen ser de lujo, y tambien las ponencias, que abarcarán más temas de los habituales y variados, como diseño, programación flash, posicionamiento en buscadores…
Aquí podéis ver todos los detalles del evento, plazas, precio, modalidades, direcciones, etc.
Aun no se ha terminado de desarrollar el microsite para este año, pero estad atentos, porque seguro que se pone en marcha en muy poco tiempo
Para los que no sepáis que son los talleres, aquí os dejo unos links a años anteriores, y también podéis ver videos en youtube, o fotos en flickr.
Yo me apunto desde ya!!!
De PNGs transparentes, navegadores y onLoads va la cosa
En el estudio he tenido que emplear PNGs transparentes, que como sabeís (y sino, deberíais) no son soportados por versiones de Internet Explorer 6 o anteriores, sino que vienen soportadas desde la versión 7 de nuestro amigo IE.
Hasta aqui no hay gran problema, porque empleando un pngfix de javascript se arregla el entuerto (bonito palabro).
-
/*
-
Correctly handle PNG transparency in Win IE 5.5 & 6.
-
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
-
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
-
<!--[if lt IE 7]>
-
<script defer type="text/javascript" src="pngfix.js"></script>
-
<![endif]-->
-
*/
-
-
var arVersion = navigator.appVersion.split("MSIE")
-
var version = parseFloat(arVersion[1])
-
-
if ((version>= 5.5) && (document.body.filters))
-
{
-
for(var i=0; i<document.images.length; i++)
-
{
-
var img = document.images[i]
-
var imgName = img.src.toUpperCase()
-
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
-
{
-
var imgID = (img.id) ? "id='" + img.id + "' " : ""
-
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
-
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
-
var imgStyle = "display:inline-block;" + img.style.cssText
-
if (img.align == "left") imgStyle = "float:left;" + imgStyle
-
if (img.align == "right") imgStyle = "float:right;" + imgStyle
-
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
-
var strNewHTML = "<span " + imgID + imgClass + imgTitle
-
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
-
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
-
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
-
img.outerHTML = strNewHTML
-
i = i-1
-
}
-
}
-
}
El tema se complicó (no iba a ser todo tan sencillo...) cuando además metía un evento onLoad para el body con la intención de lanzar una función javascript, y paso a describir el caso porque puede ser de ayuda para quien se encuentre en la situación:
LO QUE QUEREMOS LOGRAR
Tenemos una imagen de fondo de un cierto peso en KB (ya que no es una trama, sino una imagen plena de faculades), y sobre esa imagen han de colocarse unos botones que a su vez son imágenes, y que para que quede medianamente bonito han de ser transparentes.
PRIMER PROBLEMA
El primer problema es que la imagen de fondo que se crea por CSS, pesa lo suficiente como para que se dé durante unos segundos la situación de aparecer los botones sin el fondo que les da "sentido", un efecto poco deseable.
SOLUCIÓN PRIMER PROBLEMA
Para solucionarlo buscamos si existía algun método mediante CSS o XHTML para forzar la carga de los elementos de la hoja de estilos antes que se renderizara el HTML, pero..... no lo hemos encontrado. Si algún alma caritativa sabe cómo lograrlo mediante CSS (o de una manera más limpia que la que hemos empleado nosotros) que no dude en contárnosla.
Jorge tuvo la feliz idea de poner la misma imagen con propiedad display:none en el comienzo del body, con lo que la imagen se carga como HTML impidiendo así que se muestre lo que va a continuacion hasta que se completa dicha carga, y luego el CSS no tarda nada de tiempo en cargarla porque está en caché. Mientras esto ocurre, el div con los botones transparentes, permanece oculto también con la propiedad display, para por javascript hacerlo visible en el onLoad de la página.
SEGUNDO PROBLEMA
Cuando ya estábamos pegando saltos de alegría con el trabajo terminado, vemos que nuestro querido IE 6 no muestra los botones, no así en IE 7 o en firefox.... 
SOLUCIÓN SEGUNDO PROBLEMA
El problema es debido a la mala compatibilidad del pngfix con métodos invocados en el onLoad. La solución pasa por usar una variante del pngfix (que ha salido a la luz porque también da problemas con el swfobject) y que permite mezclar estas dos necesiades: pngfix y onLoad. Lo que hicimos es "googlear" y emplear el citado pngfix adaptado además de colocar la llamada al mismo DESPUÉS (y ojo que esto es necesario para que se dispare el evento onLoad) de la etiqueta de apertura de BODY. Cuando decimos la llamada nos referimos a esto:
-
<!–[if lt IE 7]>
-
<script defer type=”text/javascript” src=”pngfix.js”></script>
-
<![endif]–>
El resultado lo podéis ver aquí, por cierto, la web está recien salida del horno... diseño por takeone dsgn y programación flash y adaptación del blog por [Q].
Cheat Sheets: hazme la vida más sencilla…
Como todos los que me conocen saben, soy un gran defensor de la literatura técnica como medio de aprendizaje. Siempre que se pueda adquirir un buen libro, creo que es una buena inversión, porque muchas veces se encuentran en ellos cosas a las que en un futuro te puedes enfrentar, o lo que es mejor, cosas que no te esperabas aprender, visiones sobre determinados temas que enriquecen y complementan la propia, o incluso soluciones a planteamientos que no sabías hasta entonces abordar.
Con ésto no quiero decir que todos los libros son buenos ("malos, haberlos haylos") , pero sin duda si te tomas la molestia de hacer un análisis de lo que vas a comprar antes de adquirirlo y de ver la opinión que otros han dejado sobre él, las probabilidades de éxito son muy altas.
Pocos libros he leído últimamente que no me hayan aportado nuevas perlas (principalmente porque al que anda escaso, todo es nuevo...) sobre pequeños detalles y que en su mayoría no estaban directamente relacionados con la temática principal del libro. A veces a la vuelta de la esquina de un párrafo denso y tedioso, te encuentras una nota entre paréntesis, o una explicación adicional que te descubre algo en lo que nunca te habías fijado o no conocías su existencia.
Pero sin duda, un libro, por muy buena encuadernación y estructuración que tenga, no es la mejor herramienta a la hora de salir de dudas sobre un propiedad o la sintaxis de un método, un atajo de teclado o un repaso a las posibilidades que tienes frente a un efecto en javascript con jQuery. Para ello creo que de un tiempo a esta parte han ido apareciendo unos de los mejores aliados de los desarrolladores cuando se enfrentan a algo nuevo u olvidado en el pasado... las cheatsheets (si, si hojas para hacer trampas... y que!?). Sirva esta colección de ellas como prueba:
ILoveJackDaniels
Impresionante recurso para obtener cheatsheets de calidad: HTML, SQL Server, Expresiones Regulares, Microformatos, Ruby on Rails, ASP, Entidades HTML, Javascript, MySQL, Mod Rewrite, CSS, PHP...
ILoveJackDaniels Cheatsheets
Pete Freitag
Otra referencia para tener en cuenta, una recopilación de 30 cheatsheets para desarrolladores.
Cheat Sheet Roundup
Smashing Magazine
Estos gañanes no podían faltar, como siempre sacando recursos a paladas, y de buenísima calidad. Me arrepiento todos los días del momento en que un listo me los presentó en mi navegador junto a netvibes...
Cheat Sheet Round-Up
Designers Cheat Sheets
También hay cheat sheets para el mundo del diseño, que no solo de código vive el hombre...
Designer color Charts, y photoshop cheat sheets vía Scott Klarr
Fuzzy Opinions
Excelente recopilación categorizada por áreas temáticas: Bases de Datos, programación, sistemas operativos, desarrollo web, miscelánea...
The developer cheat sheet compilation
What is.com
Este recurso ya abarca más que las convencionales para desarrollo o diseño web, aunque algunas interesantes, como la de atajos de photoshop para windows o mac
Our favorite cheet sheets
Google Cheat Sheets
Pues si, también hay para el buscador más famoso del pueblo..., vía feedsforme.
Google Cheat Sheets
Web Developer List: eConsultant
Y aqui ya vamos al por mayor, con una recopilación de 119 hojas.
Top 119 Cheat Sheets
No podía despedirme sin dejar una de nuestro querido ActionScript, otra de nuestro nuevo amigo jQuery y otra que me ha sorprendido especialmente, dedicada al mundo del SEO
Y como yo no soy el primero que se da cuenta que esto es un gran invento, podemos encontrar incluso un MEGA DIRECTORIO, con dominio propio: cheat-sheets.org
Buenas prácticas CSS
Lo reconozco. Soy un maniático, un neurótico y estoy obsesionado con le orden. Correcto. Pero es que realmente veo los beneficios que me aporta en mi trabajo esta manera de hacer las cosas, y por eso es que ésta guía de buenas prácticas CSS me ha tocado
Más allá de entrar en aspéctos técnicos de los CSS, entra en la estructuración y manera de afrontar proyectos con CSS, para que no sea un infierno que el dia de mañana alguien tenga que lidiar con los CSS y hacer una media de 4 scrolls para cambiar una propiedad con ciertas garantías de éxito.
Aquí me habia enrollado filosóficamente, pero amenizo, que para dar la chapa está nuestro buen amigo zárate.
Mejorando la legibilidad de tu código con unas guías de estilo CSS [english]
Tengo que aclarar (para que no me coman los locos por el peso en kb de las hojas de estilo o fanáticos del rendimiento) que en este post prima la legibilidad sobre cualquier otra cosa, pero que para aquellos proyectos donde el peso del archivo es crítico (digamos un portal con millones de visitas que se traduce en un ancho de transferencia interesante) siempre nos quedarán herramientas que a la hora de publicar permiten eliminar comentarios y comprimir las mismas. Pero en esos casos se debería mantener un fichero para trabajo, y una versión optimizada para producción.
Además viene acompañado de un buen puñado de links ahondando en el tema como éstos:
- 70 ideas para mejorar nuestros CSS [english]
- ¡Herramientas para meorar nuestro rendimiento desarrollando web! [english]
- Herramientas CSS [english]
sIFR, reemplazo de textos en la web con flash y javascript
Desde hace ya bastante tiempo es conocida por casi todo el mundo que tiene la inquietud de poder usar tipografías no estándar en sus webs XHTML y CSS la existencia de sIFR. También es cierto que mucha gente no lo emplea porque los recursos que se encuentran en un primer vistazo en la web no son quizás todo lo claros que debieran.
Seguramente eso es lo que pensó David Yeiser en su blog Design Intellection cuando decidió crear un magnífico tutorial paso a paso de como comenzar a usarlo, obviando un montón de cosas para simplemente quedarse con lo básico y que todo el mundo lo pueda entender. De todos los que he leído es el mejor tutorial de uso de sIFR, explicado con los pasos justos y necesarios, y con una guía de acompañamiento en imágenes.
Nuestra web... usa sIFR, predicando con el ejemplo... 
Esto me recuerda que he de contactar con Andrés para ver que ha sido (y si era buen actualizarla) de la magnifica extensión que creo para dreamweaver con motivo de los talleres Subflash en Barcelona durante 2005.
Posicionamiento con CSS
He encontrado un mini manual bastante interesante para todos aquellos que todavía no tienen bien claro como va el tema de los posicionamiento en CSS.
Se explican 3 diferentes tipos de posicionamiento en 10 pasos:
- Estático (static)
- Relativo (relative)
- Absoluto (absolute)
Lo único que echo en falta para la gente que esté iniciándose en el tema es ver el código html de la estructura de las capas .
Una de las pegas que tiene el artículo es que está en inglés (aunque se entiende muy bien).
Espero que os guste.
Historia del UTF-8
Cuantas veces nos hemos dado de tortas con el tema de la codificación de las páginas.
Al final nos quedamos con las dos cosas básicas que hay que hacer:
- Poner la codificación de los carácteres que vamos a emplear en el parámetro "charset" de todos los metas de las páginas.
- Guardar las páginas con esa misma codificación (que la página tenga la codificación en el "charset" puesta no implica que esté guardada en ese mismo formato).
Aquí os dejo un link a un artículo muy interesante acerca del nacimiento del "UTF-8" para todos aquellos que a veces se pregunten el por qué de poner esas palabrejas tan raras (UTF-8, iso-8859-1 ...)
Enlace al articulo sobre UTF-8 del blog de juque
El artículo lo encontre a través de la web Diseñorama.
Recursos en forma de tutorial
Sin duda la formación espcecializada es un buen aliado para adentrarse en el mundo de la web y el diseño, y sienta unas bases importantes para los siguientes pasos. No obstante nuestra experiencia (en la cual me incluyo por completo al ser un claro ejemplo de lo que voy a comentar) nos dice que en un mundo como el del diseño y la web, no basta nunca con lo que has aprendido, sino con lo que te queda por aprender.
No se si existirán muchas áreas de negocio donde estar al día en cuanto a técnicas, lenguajes, programas, etc. sea tan complicado como en nuestro mundo, pero lo que está claro es que esto es de locos. Y para solucionar en cierta medida la urgencia con la que se necesita aprender, sin duda los tutoriales son un recurso precioso, que combinado con una búsqueda en google un poco curiosa, hacen que podamos acceder a recursos como éste:
Propiedades CSS
Una de CSS.
Algunos recursos de necesario acceso para estar un poco al día con las CSS.
CSS Properties Index
Interesante recurso para estar al tanto de todas las propiedades CSS soportadas por las diferentes especificaciones de CSS, de una forma clara y concisa. Acceso por orden alfabético y muestra de su valor por defecto.
W3Schools - CSS
Un gran lugar de consulta, no solo para CSS sino par aun montón de tecnologías y lenguajes web. No hay que confundirlo con W3C, pero sin duda un gran recurso cuando las cosas no cuadran o necesitas un refresco sobre alguna función o propiedad.
ILoveJackDaniels CSS Cheat sheet
Existen muchas y variadas cheet sheets pero para mi esta versión y web es una de las mejores. ¿Por qué?, descúbrelo tu mismo, pero propiedades, sintaxis, selectores, pseudo-selectores, mediatypes, modelos de caja, unidades, herencia... y en formato PNG y PDF. ¿Qué más quieres?
Advisory de Adobe
Una visión diferente de las CSS, pero que siempre está ahí, hasta el santo día en que los estándares lo sean de verdad, y los navegadores convivan en un mundo de felicidad y amor, todos unidos por un mismo criterio. Para estar al quite de lo que aquí llamamos 2FTF! (que por cierto acabo de tener uno que ya os contaré en otro post... vaya tela)
W3C Guía rápida (CSS 2 en castellano)
W3C CSS
Siempre hay que tener en cuenta quien crean los inventos del demonio!
Este post se lo dedico a todos aquellos que me llaman flashero, o que creen que no tengo en cuenta esta bonita herramienta para hacer webs... por el mero hecho de creer que flash moooola Pero luego cuando el ultimo li haga cosas raras en un navegador y en otro no... no me contéis historias... 
Bueno como en el fondo os comprendo y admiro, e incluso sufro vuestros mismos problemas en mis carnes... hagamos algo para que el mundo sepa que necesitamos su ayuda para no morir en el intento...
