Comença el IV Congrés!

D’aquí a pocs dies comença la IV edició del Cibercongrés de l’Observatori per a la CiberSocietat, esdeveniment en el que, un cop més, hem tingut l’honor de participar. Aquest cop sota el lema “Crisi analògica, futur digital”, es burxa en un dels temes més actuals i candents.

Ja fa temps que el Congrés està actiu i gairebé en totes les fases precongressuals ha comptat amb la participació dels internautes. És precisament per aquest motiu que aquesta edició rep el sobrenom de “living congress”.

Les comunicacions ja són públiques, i les inscripcions per participar, obertes. Des de Meddia us convidem a participar en aquest esdeveniment en el qual ja participen internautes de tot el món.

Com maquetar newsletters compatibles

Tot i que el butlletí electrònic (newsletter) és ja un veterà del màrqueting digital, gràcies a un ús intel·ligent pot seguir sent una eina de difusió molt efectiva.

Bàsicament, un butlletí electrònic és codi HTML enviat per correu electrònic. Per tal de maximitzar la compatibilitat amb els diferents gestors de correu cal seguir algunes pautes. En quant a maquetació és com recular uns quants anys enrere, però és la millor manera d’assegurar-nos que el butlletí es veurà bé en la majoria de clients de correu:

1. Maquetació

• Fer servir taules, i evitar les capes el màxim possible.
• Incorporar atributs HTML a les taules sempre que es pugui (p.e. border=”0″ valign=”top”…)
• Aplicar els atributs, mides o estils directament als TD.
• Aplicar a tots els TD la mida d’amplada que els correspongui.
• Feu servir target=”_blank” en els enllaços.
• Les etiquetes IMG han de fer servir l’atribut border=”0″, i han de tenir els atributs HTML d’alçada i amplada.

2. Estils CSS

• Aplicar els estils en línia a través de l’atribut style=”", dins el mateix codi, i no dins l’etiqueta HEAD.
• Mirar d’evitar les imatges de fons. És millor situar-les dins el codi com a IMG.
• Si es fan servir imatges de fons, no s’ha de fer a través de CSS, si no del defenestrat atribut HTML background=”"
• Evitar l’ús d’estils incompatibles. Normalment són aquells que es fan servir per posicionar o moure capes: float, display, overflow…

Podeu trobar aquesta informació molt més ampliada i en anglès a ReachCustomersOnline.

Atenció usuaris de WordPress 2.8.4!

S’ha descobert un problema greu de vulnerabilitat que afecta a WordPress 2.8.4 i les seves versions anteriors, segons es comenta a Desvaríos informáticos. Aquest bug pot arribar a desembocar en una caiguda del servidor que l’allotgi, degut a una sobrecàrrega de la CPU.

Solució al problema:

1. Busqueu l’arxiu “wp-trackback.php” (línia 45)

$charset = $_POST['charset'];

2. Substituïu-la per:

$charset = str_replace(",","",$_POST['charset']);
if(is_array($charset)) { exit; }

Tant nosaltres com tots els blocs que han reportat aquest problema us recomanem que apliqueu aquesta solució tan ràpid com us sigui possible.

Adéu al problema de velocitat de Flash en Mac

El problema de la lentitud del Flash Player en Macintosh és un greuge històric que fa molt de temps que dura. Per sort hi ha una manera molt senzilla de solucionar-ho.

Aneu a MacintoshHD/Libreria/Internet Plug-Ins i elimineu l’arxiu flashplayer.xpt

La diferència es nota.

Gràcies pel recurs, David

F.lux protegeix els nostres ulls

F.lux és una aplicació gratuïta (i disponible per Mac, Windows i Linux) que s’encarrega d’ajustar el color de la pantalla en funció de l’hora del dia en la que ens trobem i també del tipus de llum (natural o artificial) predominant en el nostre entorn de treball.

Aquesta funció horària es pot ajustar mitjançant Google Maps a les preferències del programa, i podrem ajustar el monitor per veure millor tant de dia com de nit.

F.lux permet realitzar la transició de manera gradual o a l’instant, i podem determinar la temperatura de la llum que variarà quan sigui de nit o de dia.

Fa un parell de dies que l’estic provant i es fa força estrany quan es produeix la transició. No és recomanable quan treballem amb colors, a nivell de disseny, però se’ns dubte és una aplicació molt útil i molt beneficiosa per la nostra castigada vista.

Petit exemple de SMO

Lluny del que pugui semblar, aquest és no és un article d’autobombo empresarial, si no un petit exemple de SMO i de com el seu bon (o correcte) ús afavoreix el SEO (Search Engine Optimization).

Segons la Wikipedia, SMO o Social Media Optimization (traduït de l’anglès com “Optimització dels mitjans socials”) és un terme de màrqueting que fa referència a l’estratègia i conjunt d’accions dutes a terme en xarxes socials i comunitats en línia amb una finalitat publicitària o comercial. El terme va ser creat per Rohit Bhargava i degut a la proliferació de llocs socials, el temps que els usuaris passen en ells i els beneficis que aporta en termes de trànsit i posicionament en cercadors ha adquirit una gran rellevància per part d’empreses i experts en màrqueting digital.

El que hi apareix a la següent captura de pantalla és el resultat de la cerca de la paraula “meddia” a Google. No ens enganyem, aquesta cerca no té gaire mèrit a no ser que hi hagi unes quantes desenes d’empreses que es diguin igual que la nostra. El resultat indica clarament, a data de 8 d’agost de 2009, com els social media posicionen la nostra marca en aquest cercador, fins i tot per sobre de la pàgina web de l’empresa.

Google va endreçar de la següent manera els resultats relacionats amb la nostra empresa:

1. Aplicació de NetworkedBlogs a Facebook, on s’hi llista el nostre bloc.
2. El nostre perfil empresarial a Linkedin.
3. Pàgina principal del nostre bloc.
4. Articles del nostre bloc.
5. La nostra pàgina web.
6. Perfil del nostre bloc a NetworkedBlogs.
7. El nostre perfil a Twitter.

El posicionament fluctua molt, i avui el resultat no ha estat el mateix que el de fa dos dies (els camins del SEO i de les 200 variables del famós i secret algoritme de Google són inescrutables).

El cas és que un bon (o un correcte) ús de les xarxes socials no implica únicament la presència de l’empresa en aquestes, si no que requereix d’una dedicació, d’actualitzacions continuades o regulars per part dels responsables que l’empresa hagi designat per administrar les seves xarxes socials.

Els usuaris de Linkedin, Facebook, Twitter, etc. són, en molts casos, internautes experimentats. Per aquest motiu no els podrem vendre cap moto únicament aplicant estratègies de màrqueting tradicional dins els nostres perfils empresarials a les xarxes socials, als articles dels nostres blocs d’empresa o fins i tot als nostres butlletins electrònics. Hem de mirar de mostrar-nos de forma natural, sincera i directa, sense publicitat encoberta, i mirant d’oferir alguna cosa a canvi de res.

Si amb això aconseguim captar l’interès i el clic d’algun internauta cap a la nostra pàgina, ja haurà estat un gran triomf.

Fonaments del HTML 5

HTML 5 és la primera gran revisió del llenguatge HTML (Hypertext Markup Language), i es va començar a projectar l’any 2008. Pensat com el següent pas al HTML 4 i el XHTML 1.0 (segons la Wikipedia l’actualització d’aquest últim es va aturar), la versió 5 està pensada com un llenguatge molt més semàntic i més propici pel desenvolupament d’aplicacions web.

Tot i que encara està en procés de desenvolupament, ja s’hi han afegit un bon nombre de noves etiquetes. Per a la majoria d’usos quotidians, aquestes etiquetes substituiran molts dels típics div del nostre codi.

Quins són els fonaments?

El DOCTYPE

El DOCTYPE en HTML 5 és el següent:

<!DOCTYPE html>

No es va optar per <!DOCTYPE html5> per evitar peculiaritats amb IE6, així que finalment va quedar com <!DOCTYPE html>

Petit i significatiu, fàcil de recordar.

Elements estructurals

<header>
Representa la secció de la capçalera.

<nav>
Element reservat per a la navegació principal.

<section>
Element per a una secció genèrica de continguts, possiblement situat entre la capçalera i el peu de pàgina (footer). Té el comportament d’un div si no fos per la separació d’una part del document. Dins hi poden niar altres etiquetes section, a banda de qualsevol quantitat d’etiquetes típiques.

<article>
Etiqueta que ens permet definir un fragment de contingut com a article. Ideal per a blocs o diaris.

<aside>
Element que representa el contingut relacionat amb l’àrea principal del document, expressat normalment per les columnes laterals

<footer>
Secció reservada al peu de pàgina.

Exemples d’estructura

Tron Legacy

El proper 2010 arriba Tron Legacy, la segona part del clàssic del cinema geek Tron (1982) …pel·lícula que vaig veure de petit i que em va impressionar bastant. Des de llavors algunes pel·lícules i alguna sèrie d’animació m’han recordat Tron en algun aspecte (El cortador de césped, Matrix, ReBoot…). No recordo si va tenir gaire èxit, però es va convertir en un clàssic de culte que ha estat imitat durant els anys posteriors. A la segona torna a aparèixer en Jeff Bridges (ja és un bon començament, oi?)

Font: Microsiervos

Office 2010: the movie

Per fer el vídeo promocional de l’Office 2010, la gent de Microsoft s’ha hagut de gratar la butxaca. Tot i això han parit un vídeo de molta qualitat i, a més a més, força divertit.

Fonts: No Puedo Creer i YouTube

Ús de wireframes per optimitzar el desenvolupament web

La creació dels wireframes és una de les primeres passes que cal fer abans de dissenyar un lloc web. El wireframe ajuda a organitzar i simplificar els elements i els continguts dins d’un lloc web, i és una eina essencial en el procés de desenvolupament.

Un wireframe és bàsicament una representació visual de la disposició dels continguts en un lloc web. És un prototip que mostra la ubicació dels elements de la pàgina, com ara la capçalera, el peu de pàgina, el contingut, les barres laterals, la navegació, etc.

També especifica la ubicació dels elements dins d’aquestes àrees de contingut. Si es desitja desenvolupar un web que coincideixi amb exactitud amb les exigències del client i reduir al mínim les revisions del projecte, el wireframing us mantindrà en el bon camí.

Beneficis del wireframing

La creació de wireframes dóna al client, programador o dissenyador l’oportunitat de tenir una mirada crítca a l’estructura del lloc web i permet de fer les revisions amb facilitat en les primeres etapes del procés. El wireframing porta els següents beneficis:

• Dóna al client una visió ràpida del disseny del web.
• Pot inspirar el disseny i desemboca en un procés creatiu més fluid.
• Dona al desenvolupador un panorama clar dels elements que es necessiten per codificar.
• Clarifica les accions o funcions de cada pàgina.
• És fàcil d’adaptar i pot mostrar la disposició de moltes seccions del web.

Eines per al desenvolupament de wireframes

• Dibuixar a mà en paper. Sempre un bon punt de partida per a qualsevol dissenyador. Si s’és molt precís en el dibuix, es pot fer servir com a wireframe definitiu de cara al client.
• Software: Visio, OmniGraffle, Gliffy, Balsamiq, i qualsevol programa gràfic del tipus Illustrator, Photoshop, etc.

Exemples

Autor: Meddia

Autor: Mike Rohde

Autor: Phil Hawksworth

Autor: Matthieu Mingasson

Font: Webdesigner Depot