Javier Seixas

Hace meses que Caro me enseñó una herramienta de redes sociales que se estaba volviendo muy popular: Twitter. Bàsicamente Twitter es un interface donde el usuario registrado tiene una página donde puede postear mensajes cortos (140 caracteres), uno detrás de otro. Algo así como un microblog. Y gratuito. Además, tiene una herramienta que permite seguir a gente, es decir, tener una página donde vas viendo lo que postea la gente que quieres seguir, porque te interesa lo que tengan que decir. Luego también salieron posibilidades como escribir desde el móvil, o gmail, etc.

Continue reading →

Desde que empecé a utilitzar los conocidos “HTMLarea”, “textarea enriquecido” o editor WYSIWYG han surgido problemas cuando el cliente hacía copy paste de los textos desde word debido a que mantenía el formato. El código de estilos acababa desmontando la página del site, con la correspondiente llamada del cliente: “Oye, que de repente la página se ve mal…”.

Hace ya tiempo que empecé a implementar TinyMCE, para mí el mejor editor WYSIWYG, y he descubierto que dispone de un plugin realmente bueno y que soluciona los problemas que antes comentaba: SimplePaste.

El plugin es realmente simple. Cuando haces crtl+v sobre el editor borra todo el formato del texto que has pegado. Y ya está. Yo lo he empezado a utilizar y es ideal.

Instalarlo es muy sencillo:

1. Descargar el archivo zip i descomprimirlo.
2. Colocar la carpeta simplepaste dentro de la carpeta plugins de la instalación de TinyMCE.
3. Modificar la configuración del TinyMCE en la página web para que cargue el plugin:

plugins: simplepaste

paste_auto_cleanup_on_paste : true,
paste_create_linebreaks : false,
paste_use_dialog : false,
paste_remove_styles: true,
paste_convert_middot_lists : false,
paste_unindented_list_class : ‘unindentedList’,
paste_strip_class_attributes: ‘all’,
paste_convert_headers_to_strong: false,
paste_as_plain_text: true

El que quiera saber más puede visitar el hilo de discusión sobre SimplePaste en el foro de TinyMCE.

La necesidad de los nuevos proyectos me ha obligado a adaptar el Multibox de phatfusion para la versión de mootools 1.2, ya que no podía esperar a la versión oficial. Como seguro que más de uno tendrá la misma necesidad aquí dejo un enlace para descargarlo.

Descargar

Detalles del zip:

Incluye los archivos multibox.js y overlay.js.

Instalación:

Simplemente substituir los archivos multibox.js y overlay.js de tu web por los incluidos en el zip.

Actualizaciones:

8/10/2008 – Borrado el código que causaba un mensaje alert

5/09/2008 – Corregido el error que sucedía al querer realizar una carga de html por AJAX

Aviso:

No he conseguido que las opciones onOpen y onClose funcionen. Como que no las he utilizado nunca por ahora no le he dedicado más tiempo.

Els formularis web són la eina clau en la interacció entre servidor i client, la forma que té el sistema per a que l’usuari pugui passar informació al site. Gairebé tot es fa amb formularis, registrar-se a una web, escriure un post a un foro, un tema a un blog… tot i que des del surgiment del web 2.0 en alguns casos han sigut substituits per formularis AJAX, però aquí no parlaré ara d’AJAX, si no dels formularis de tota la vida.

Com tot, els formularis també tenen diferents graus de qualitat, i depenent de la que vulguis implementar tindrà un temps d’el·laboració o un altre. Molta gent es pensa que un formulari és quelcom fàcil de fer, i sí, ho és, però molt entretingut i quant millors els vulguis fer encara més.

Continue reading →

La indexació de pàgines als buscadors és quelcom que s’ha tornat gairebé imprescindible a l’hora de publicar una pàgina web. I aquesta importància recau d’igual manera en sites multiidioma on totes les pàgines en tots els idiomes han d’estar indexades.

Jo conec dos sistemes per fer pàgines web multiidioma. El primer seria el clàssic de ficar la web en un idioma, per exemple català, dins http://www.javierseixas.com/blog/wp-admin/post.php?action=edit&post=23la carpeta ‘ca’. Per traduïr-la a un altre idioma, per exemple el castellà, es duplica la carpeta, se li assigna el nom ‘es’ i es tradueixen tots els arxius html que la componen. Aquest sistema no el recomano ja que obliga a que quan s’hagi de fer una modificació fer-la en tants arxius com pàgines hi hagin, lo qual duplica el treball i el temps. De totes maneres no queda més remei que fer-ho així en servidors que no suportin algun tipus de llenguatge.

El segon sistema que conec és mitjantçant includes que contenen les textos fixes, com titol de seccions, nom de botons, etc. Hi ha un include per cada idioma, i mitjançant una sessió carregarà un include o un altre. S’haurà de declarar una sessió per defecte, per quan l’usuari entri per primer cop l’assigni i carregui l’idioma per defecte. Si l’usuari canvia l’idioma canviarà el valor de la sessió.

Fins aquí tot bé, però què passa quan un robot entra al nostre site? El robot trobarà l’enllaç per canviar d’idioma, però no sabrà interpretar el canvi de sessió, per lo qual, el robot només detectarà i indexarà el nostre site en l’idioma per defecte. I com es soluciona aquest problema?

La clau està en col·locar a l’enllaç on es canvia l’idioma una adreça falsa. Per exemple:

<a href="http://www.javierseixas.com/ca">Català</a>
<a href="http://www.javierseixas.com/es">Castellà</a>

Fet això, el PHP haurà de saber en quin idioma s’està navegant. Això es pot saber per la funció $_SERVER['REQUEST_URI'] que retorna la part de l’adreça després del domini. Tot seguit, el PHP haurà de decidir quin include incloure segons hagi dit el REQUEST_URI, per exemple, ca per català , es pel castellà, en per l’anglés. En aquest punt recomano seguir les sigles que utilitza la wikipedia.

I el darrer punt clau el juga Apache. S’ha d’activar el ModRewrite i escriure les regles per l’idioma concret:

RewriteRule ^ca/(.+) /?sec=$1
RewriteRule ^es/(.+) /?sec=$1
RewriteRule ^en/(.+) /?sec=$1

Construïnt la web de Grapa hem vaig trobar amb un problema: carregar un flash dins d’una capa modificada per AJAX.

Per què ve el problema? Per un costat tenim que el swfobject s’executa quan la pàgina es carrega. Per l’altre costat sabem que l’AJAX carrega un contingut que importa des de una altra pàgina. Quan importa aquest “codi” el que fa és imprimir-lo allà on li dius. Amb mootools es faria així:

var showContents = this.showContents.bind(this);

var ajaxOptions = {
method: 'get',
update: $('section_cont'),
onComplete: showContents
};

this.ajaxRequest = new Ajax(this.url, ajaxOptions).request();

L’AJAX executa un Javascript però no torna a executar la pàgina de nou, per lo qual cridar al swfobject com es fa tradicionalment no funciona.

Com arrivar a la solució? Doncs cal saber una mica com funciona el swfobject. Bàsicament el que fa és crear un objecte i posteriorment imprimir-lo a la capa que li dius. Si això no deixa de ser Javascript, no podriem fer que crees aquest objecte quan ha de carregar l’AJAX?

Doncs efectivament, es pot! Seria alguna cosa així:

showContents: function() {
var interactive_flash = new FlashObject("/swf/reproductor.swf", "header", "548", "425", "8", "#ffffff", true);

interactive_flash.addParam("wmode", "opace");
interactive_flash.addParam("scale", "noscale");
interactive_flash.addVariable("file", this.video);
interactive_flash.write("embed_cont");
}

Si us fixeu, la crida AJAX del primer codi té una linia dins la variable “ajaxOptions” que diu onComplete: showContents. Això vol dir que quan hagi carregat l’AJAX cridarà la funció showContents, la qual crearà el swfobject.

I ja ho tenim. No és pas tan difícil!

Vull recomanar a tots els usuaris de Mozilla Thunderbird (pels que no el coneguin seria un Outlook Express de Mozilla) en Windows un plugin anomenat Minimize to Tray i que trobo realment pràctic. Bàsicament el que fa és que quan minimitzes el programa, el fica a l’àrea de notificació (que és aquella on surten tots els iconets) en comptes de tenir-la a la barra de tarees.

Va molt bé això sobretot si ets algú que acostuma a rebre correus força sovint, perquè pots tenir el correu obert sense que et molesti a la barra mentre fas altres coses. A més, com que el Thunderbird t’avisa amb un avís a la pantalla i amb el típic sorollet de quan reps un email t’assebentaràs al moment que has rebut un nou correu.

Pots descarregar-te el plugin des d’aquest adreça: Minimitzar Thunderbird.

I per si fos poc hi ha un altre plugin que complementa aquest que aporta noves opcions, com que el Thunderbird s’inicialitza en iniciar Windows (força útil també) o que en obrir-lo es minimitzi directament. Per descarregar el plugin ho pots fer des d’aquí: Complement al Minimize to Tray

Farà aproximadament un mes que estic treballant en la nova web de Grapa. Realment està sent una feina feixuga, que hem deixa poc temps per altres coses, tenint en compte que a l’hora també estic treballant en altres projectes dins de la pròpia Grapa…

Si vols animar-me a que faci una web de **** mare no oblidis passar per la web temporal de Grapa i deixar-me un missatget a la adreça de correu que s’indica.

Mercès

Vaig començar a treballar amb mootools farà poc més d’un mes, i mirant tot d’exemples de com programar-ho vaig veure en exemples quelcom que ja havia sentit però del que mai havia prestat atenció: el JavaScript no intrusiu.

Bàsicament el JavaScript no intrusiu és el que permet realitzar accions al DOM i manipular els esdeveniments o events però sense haver d’escriure el codi JavaScript dins de les etiquetes html. Fins ara ho veiem així:

<div onclick="executa_funcio()">text qualsevol</div>

Això no està pas malament, però xoca una mica amb la filosofia de separar la web les tres capes de lògica, disseny i estructura perquè estàs barrejant lògica (JavaScript) i estructura (HTML).

Mootools dòna un pas endevant i permet introduïr en el codi el JS no intrusiu d’una forma semblant a la següent:

$A($$('.delete')).each(function(el) {
el.onclick = this.click.pass(el, this);
}, this);

Com es veu en l’exemple el JavaScript crea un Array ($A) amb tots els elements que tenen la classe delete, i inicia un bucle per aquest array on assigna l’event onclick per cadascun d’aquests elements. Com es pot veure no hi ha cap etiqueta html afectada directament. Aquest mètode ajuda a tenir el codi més net i endreçat en les tres capes.

I com passem es paràmetres? Doncs si vols recollir informació ho faries a través dels atributs de l’element afectat. Si tenim a l’html quelcom així:

<div title="Un valor qualsevol" alt="Un altre valor">Text qualsevol</div>

A l’arxiu JS ho recolliriem així (el fa referència al element html):

var param_tit = el.title; // Recull Un valor qualsevol
var param_alt = el.alt // Recull Un altre valor


En definitiva, una passada i que dòna moltes possibilitats!

No sé si Prototype, jquery o el JavaScript tradicional permet fer-ho, però probablement sí.