Esta es mi pequeña utilidad para adelantar procesos de copiado de texto, pegado y adicción de etiquetas html.

Puedo copiar de word, excel, pdf, etc. y tras pasar por Hachetemelear pegar el resultado en la vista código de un html.

Y sobre todo evito que aparezcan los formatos de word, por ejemplo, o la separación de párrafos con BR.

Es una aplicación sencilla y sin grandes pretensiones. Lo interesante sería poder mantener ciertos formatos como la negrita y la cursiva.

Para la siguiente versión.

Actualización (15/12/2009): Han actualizado a la versión 0.5. En vez del zip ahora solo aparece para descargar el .mxp, pero se puede instalar perféctamente en el DW CS3.

Zen Coding es una utilidad para escribir código más rápido. La descubrí en SmashingMagazine[en] y en Craftyman.net[es] y quise usarla en seguida con Dreamveaver CS3.

El problema es que el plugin que desarrollan está enfocado al Dreamweaver CS4. Puedes ver la lista de todos los programas que tienen más o menos soporte del plugin.

La solución para migrarlo al CS3 es muy fácil.

Cuando descargas la última versión de Dreamweaver, en mi caso la 0.4, el zip contiene el archivo de extensión ‘.mxp’ que instala la utilidad mediante la aplicacion de Adobe Extension manager, y la carpeta ’source’ con los archivos fuente de la extensión.

Dentro de ’source’ está el archivo ‘Zen Coding.mxi’. Es un XML que se puede editar, y contiene la línea:

<product name=”Dreamweaver” version=”10″ primary=”true” />

Solo hay que cambiar el 10 por un 9 y guardar el documento.

A continuación pulsas sobre ‘Zen Coding.mxi’ como si fuera una aplicación que quieres ejecutar y se abrirá el Adobe Extensión Manager preguntándote donde quieres guardar el .mxp que se va a generar a partir del .mxi que has modificado.

Y ya tienes la extensión de Zen Coding para Dreamweaver CS3 lista para ejecutar e instalar.

Cuando abras el Dreamweaver aparecerá en el menú ‘Comando’ la opción ‘Expand Abbreviation’. Asígnale un atajo de teclado para que sea una función práctica, si no no tendría sentido.

Por defecto, en la documentación de la utilidad, se usa [Ctrl+,] (Control más coma), para lo cual en Dreamweaver habrá previamente que eliminar el atajo de teclado para la función ‘Anular sangría de código’ que está en la opción ‘Edición’ de la barra de menú.

El plugin todavía está en desarrollo pero ya se puede disfrutar de su magia.

Lista de abreviaturas soportada parcial o totalmente: Zen HTML Elements, Zen HTML Selectors, y Zen CSS properties.

Descargar/download:  Zen-Coding_DW-CS3.zip

Barra Sidewiki

No lo he probado, por que no me interesa. Se trata de un sistema mediante el cual e instalando una extensión en tu navegador, puedes comentar acerca de una web, y ver otros comentarios,  pero sin el control del dueño de esa web, aunque si con el control de Google. Aqui hay más información de Google Sidewiki (en inglés).

La queja viene de los creadores o gestores de contenidos que ven como se puede desviar el posible feedback fuera de su dominio, y en consecuencia perder el control sobre la conversación con los usuarios, amén de recortar el “share” de aportaciones y descentralizar el “feed” de comunicación. Completamente de acuerdo. Y además es que Google se convierte en el gestor de esos comentarios paralelos, ordenando y eliminando según su criterio algorítmico y fuera de la linea editorial del sitio.

También es verdad que para algunas páginas que no contemplan, o han eliminado, la opción de comentarios, el Sidewiki puede venir muy bién. Me viene a la mente el dominio principal de Microsiervos que creo recordar eliminaron el formulario para comentar debido al problema de revisar el insufrible Spam.

Atando cabos pienso que el Google Sidewiki podría ser una herramienta sensacional si se crearan sistemas para incorporar esos comentarios a los que vienen por defecto, siempre y cuando al propietario del sitio se le permita tomar ciertas decisiones, como refiltrar los contenidos ya filtrados de Google, reordenarlos también, o aportar posicionamiento en función de cantidad y relevancia, y al fin y al cabo mezclar lo propio con lo ajeno.

Y una cosa más, si el control de spam de Gmail funcionara igual en Sidewiki, algunos cancelarián en seguida los sistemas propios de comentarios.

(Si comentas esta entrada con Sidewiki recuerda que solo los usuarios que también  lo instalaron podrán ver tus opiniones, pero si lo haces desde el propio formulario de Saltarintro, todo el mundo lo verá. )

Se nos quemaba el arroz a los desarrolladores web de Alicante. Menos mal que algunos son más inquietos que otros y no paran ni en boxes. Y así ha nacido ADWA, Asociación Desarrolladores Web de Alicante.

Este jueves 1 de octubre, deberías acercarte al CAMON para ver la presentación oficial. Y es lo mismo si eres freelance, trabajador por cuenta ajena, intrusista, diseñador o programador.

Si algo ha caracterizado al sector web en general es que somos demasiadas mentes independientes que nos vemos de tarde en tarde cuando hay algún evento, para después volver cada uno a su redil, y a su particular percepción de la realidad web.

Es muy importante para estar al día conocer lo que demanda el mercado, lo que sale de los laboratorios I+D, las tendencias en tecnologías, frameworks, lenguages, técnicas, puf…

¿Querías vivir haciendo páginas web? Pues te toca estar al día. Creo que no es muy habitual este tipo de asociaciones en otras provincias asi que es para no dejar pasar la ocasión.

A veces en mi trabajo me ha tocado hacer entrevistas a futuros compañeros de curro, y me he encontrado con desconcertantes faltas de conocimiento en tecnologías que aunque no se usen hay que saber al menos que existen.

Que sepas que ADWA ya ha conseguido también ser Adobe User Group. La cosa va en serio.

Asi que si quieres hablar de esos temas que nos apasionan pero que no puedes hacerlo con tu pareja o amigos por que te miran raro, ya sabes.

En CAMON el jueves a las 19:00. Date de alta en la página y apúntate a la presentación. Las plazas son limitadas, y no, no me dan comisión.

photo credit: justinsomnia

¡Google lo vueve a hacer!

El día de los inocentes (April Fool’s Day en Reino Unido y Estados Unidos) del 2004 sacó a la palestra su Gmail con su almacenamiento ‘Gibante’ y creciente, y sobre todo con Ajax, una tecnología característica y clave de la web 2.0, que hasta ese momento no había sido explotada. Y vaya si explotó. Desde ese momento el poder actualizar datos sin recargar las páginas casi es materia obligada.

Concretando. Google rescata el Ajax usándolo de forma magistral en una aplicación de correo, y a partir de ese momento todo el mundo descubre sus bondades y comienza a utilizarse.

El antes y el después del Ajax se llama Gmail.

Y ahora otra tecnología renace de sus cenizas, también de la mano de Google.

El antes y el después del HTML se llama Wave.

No hablaré de Google Wave que ya hay demasiada información por ahí, pero si sobre algunos acelerones impredecibles que se dan en desarrollo web.

En 1999  la W3C hizo pública la última revisión del HTML, la 4.01, la v.4 salió dos años antes. En esos momentos también se desarrollaba el XHTML como el paso siguiente, y que vería la luz en versión 1 en el 2000.

El XHTML es básicamente un XML con un DTD que cubre las etiquetas revisadas del HTML pero bajo una especificación más extricta en la sintáxis, lo cual lleva a la correcta construcción del DOM y por lo tanto permite la construcción sólida y fiable de aplicaciones web y comportamientos avanzados en javascript.

La evolución del XHTML pasa por su versión 2, que en la actualidad está en desarrollo. En el 2004 el Web Hypertext Application Technology Working Group (WHATWG) empezó a desarrollar el sustituto del HTML 4.01 como versión 5.

Y las dos líneas han ido paralelas con sus fans y detractores desde entonces. En el 2007, la W3C empezó a colaborar junto al WHATWG en HTML5, y a lo largo del tiempo la tecnología que parecía más lógica en la sucesión (el XHTML2) se ha quedado atrás en favor de la que parece más popular entre desarrolladores, el HTML5.

Pero todo indica que como Google ha abrazado el HTML5 abiertamente, haciéndolo rendir bajo su nueva aplicación Google Wave, en el momento en que salga de su beta privada a beta pública, como no, y además será este mismo año, parece claro que por narices los navegadores tendrán que añadir la interpretación de HTML5, y se empezará a usar (y abusar) de sus carácterísticas, aunque todavía no llegue a Versión Candidata a Recomendación. Juas.

Todo esto será muy positivo. Supondrá una actualización del parque de navegadores para que puedan soportar la nueva especificación (las versiones más modernas, o en beta, de el IExplorer, Safari, Firefox, Chrome, u Ópera ya lo hacen parcialmente).

Se mejorará la compatibilidad con estándares, por que el parque de navegadores obsoleto bajará drásticamente.

¿Pero que le pasará al XHTML2?

Que no se convierta en un Betamax el tiempo lo dirá.

photo credit: jeffwilcox

Reporto lo que parece un bug de IE7, por que en el resto de versiones de Internet Explorer parace que no se da el mismo error.

Y es que en IE7, y solo en IE7, cuando un enlace tiene el estilo border: 0, y el estado :hover contiene background-color: #FFF, no funciona dicho background-color.

Pero no funciona solo en el caso de que el color de fondo sea blanco. Si sustituimos #FFF o #FFFFFF por otro color, incluso cercano, como #FEFEFE, se ve perfectamente.

Ojo, si declaramos el border: 0 en un estilo reset del tipo “*{border:0}” estamos condenados.

Dejo un enlace y el código de ejemplo para comprobarlo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<head>
<title>El extra&ntilde;o caso de IE7 y los enlaces con rollover de fondo blanco y borde 0</title>

<style type="text/css">
body {
background-color:#999; }
a{
border: 0;
}
a:hover{
background-color: #FFF;
}
</style>

</head>

<body>
<a href="#">Enlace con border: 0 y color de fondo #FFF en el estado :hover. En IE7 no se ver&aacute; el color de fondo al hacer rollover.</a>
</body>
</html>

En un elemento html se pueden declarar varias clases separándolas por espacios:

<a class="top current" href="#">subir</a>

De esta manera se pueden mezclar dos estilos:

a.top {color: blue;}
a.current {font-size: 2em;}

Pero también se puede definir otras reglas de estilo concatenado las dos clases:

a.top.current {color: green; font-size: 3em}

Útil tip para aparentemente callejones sin salida.

Hace un tiempo hice algunas pruebas para crear bookmarklets cargando la librería jQuery para luego ejecutar alguna función aprovechando su versatilidad. Llegué incluso a meter toda la librería en una sola línea javascript. Pero estaba claro que la solución más práctica consistía en cargar la librería y luego ejecutar la función con las acciones.

Aprovechando la aparición de la utilidad online Sunday Morning que traduce textos mediante un marcador que precarga jQuery, he editado su propio script para que sirva a mis propositos.

javascript:void((function(){
// función para cargar archivos javascript
function load(type, src){
var s=document.createElement('script');
s.setAttribute('src',src);
s.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);
};

// función que establece un tiempo de espera y luego ejecuta el script que se defina
function whenLoaded(callback){
if(typeof(window['jQuery']) != 'undefined'){
callback();
}else{
setTimeout(function(){whenLoaded(callback)},100);
}};

// se carga la librería jQuery desde las Apis de Google
load('src','http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js');

// se ejecuta el script después de un tiempo prudencial de carga
whenLoaded(function(){
// evitar conflictos con otras librerias, incluida la propia jQuery
var $jqbm = jQuery.noConflict();
// Aquí se pone lo que uno quiera en sintaxis jQuery
$jqbm('img').toggle('slow');
});

})());

Y todo esto en un link, que al pulsarlo alterna entre ocultar y mostrar las imágenes de la web activa.

Ocultar/mostrar imágenes en foto de prueba:

Arrastrando el enlace hasta la barra de marcadores de tu navegador, tendrás siempre a mano esta utilidad en cualquier página que estés viendo.

Modificando el código las posibilidades son muuuuchas.

Un buén amigo encontró un uso alternativo a lo que en su momento fué toda una revolución gráfica y animada.