diumenge, 11 de desembre del 2011

Khan Academy

The Khan Academy és un web per estudiar i aprendre on podrem fer ús d'una extensa biblioteca de vídeos, exercicis pràctics i avaluacions des de qualsevol ordinador amb accés a la web.
La missió de The Khan Academy és que tothom pugui aprendre i/o repassar coneixements sobre matemàtiques, física, història de l'art, biologia, química, astronomia i molt més.


Read more ...

dijous, 8 de desembre del 2011

TeamViewer: assitència a través d'Internet

Una de les coses que faig habitalment és la formació per a usuaris i la resolució de dubtes i problemes, per això és interessant poder comptar amb eines fàcils i sobretot gratuïtes per a poder explicar i resoldre indidències al propi ordinador del client sense haver de desplaçar-se ni fer mil explicacions, ja sabem que una imatge val més que mil paraules. Per tant aviu us presentem una eina que creiem que us pot ser útil: Teamviewer.
Teamviewer és una aplicació per a compartir l'escriptori del propi ordinador i treballar en equip. Amb aquesta aplicació podem prendre el control de l'ordinador de l'usuari i resoldre qualsevol dubte que tingui, mostrar i explicar el funcionament d'una aplicació, fer formació online, etc.
Una eina molt útil que podeu provar sense necessitat d'instal·lar-la i a més està disponible per a tots els sistemes operatius i també per als dispositius mòbils (Android, iPhone i també iPad).

Read more ...

dimarts, 6 de desembre del 2011

Guia de Google +

La Guia de Google + és una sèrie d'articles pràctics per a conèixer i aprofitar Google d'una manera eficaç per treballar, estudiar, comunicar-se, publicar informació o entretenir-se.

La podem obtenir a través de amazon en format ebook pel Kindle per 4.59 dòlars o si ens registrem al web de Hipertextual l'obtindrem en pdf de forma gratuïta.
Read more ...

diumenge, 4 de desembre del 2011

Picfull: afegeix efectes per les teves imatges de forma fàcil i ràpida


Picfull és una eina online i gratuïta que ens permet pujar una imatge i aplicar-hi efectes i filtres i desar-la o compartir-la a través de les xarxes socials.
Una d'aquestes eines curioses que ens poden donar molt joc.

Read more ...

divendres, 2 de desembre del 2011

Libros.com

Libros.com és una xarxa social per a lectors. En aquesta xarxa podrem descobrir nous llibres i sagues, crear llistes, valorar llibres, escriure resenyes i comprar llibres a bon preu.
Molt recomanable si t'agraden els llibres ja sigui en paper o en format electrònic.


Read more ...

dimecres, 30 de novembre del 2011

Capturant pantalles amb el Chrome


Pels que ja feu anar Chrome com a navegador web principal i en voleu treure tot el suc possible, avui us presentem un recull d'extensions per a capturar pantalles. Comencem!

Lightshot (screenshot tool) 
Un extensió super lleugera i simple, amb una cosa bona, que ens permet capturar zones on hi ha vídeos o animacions flash

Awesome Screenshot 
Captura, afegeix comentaris, fletxes, cercles
Captura tota la pàgina, només la part visible, només una selecció
Captura i desa o captura i compateix
És l'eina més completa

Webpage screenshoot cat 
Extensió que ens permet capturar tota la pàgina i amb un sol clic.


Read more ...

dilluns, 28 de novembre del 2011

HTML5


Pels que comencen a treballar amb l'HTML5 us presentem:
La Taula Periòdica dels elements de l'HTML5
i la presentació HTML5 WTF?

que ens aportaran llum sobre l'univers de l'HTML5.



Read more ...

diumenge, 27 de novembre del 2011

The Typography Manual

Pels que teniu iPhones, iPads, "iCoses", etc. i us agrada la tipografia, us prensentem The Typography Manual una app que, com molt ben diu el seu nom, és un manual de tipografia.
En aquest manual hi trobarem:
  • Història de la tipografia
  • Els aspectes bàsics
  • Tipografia en la web
  • Guies d'estils
  • Anatomia de la lletra 
i molt més. Encara que és una app de pagament, val molt la pena.
http://typographyapp.com/


Read more ...

dimarts, 25 d’octubre del 2011

OpenLibra biblioteca lliure online


OpenLibra es una biblioteca online on tots els llibres que la componen estan llicenciats sota algun dels molts tipus de llicència lliure que existeixen i que, per tant, l'autor dóna la seva autorització per a la seva reproducció i redistribució.
Actualment el catàleg de la biblioteca està elaborat a partir de bibliografia tècnic-informàtica i llibres/assajos sobre Ciència.
Molt interssant fer-hi una ullada.



Read more ...

dilluns, 24 d’octubre del 2011

Formació en línia Inteco


Inteco l'Institut Nacional de Tecnologies de la Comunicació posa a l'abast de tothom serveis de formació en línia gratuits i molt útils.
Els cursos es divideixen en

  • Formació en seguretat
  • Formació en qualitat  
  • Formació en accessibilitat

Trobarem cursos sobre el DNI electrònic, l'accessibilitat en documents PDF, seguretat de la informació, qualitat de productes software, etc.
Molt útils i recomanables.
Read more ...

dilluns, 3 d’octubre del 2011

Premis blocs Catalunya

Felicitem a Betes i Clicks pel premi merescudíssim que li han donat!
Enhorabona Anna!!!!
Els altres guanyadors els podeu veure al web STIC.CAT
Read more ...

Firefox 7

Ai que no guanyem per sustos! Firefox 7 ja és aquí!!
Descarregue-lo i comproveu també les noves característiques





Read more ...

dijous, 15 de setembre del 2011

Presentacions online

Reel és una aplicació online que permet crear de forma fàcil i ràpida presentacions per a que puguin ser compartides per internet a través d'una URL, el millor del servei és que no necessita registre per començar a usar-la.

El seu funcionament és molt senzill, l'aplicació permet a l'usuari pujar un arxiu per exemple un PDF o una imatge. Posteriorment permet la manipulació d'aquests per afegir continguts títols, descripció, etc. En acabar es genera una adreça web per a poder-la compartir amb les persones que desitgem vegin la presentació. També la podem compartir a través de les xarxes socials.

La presentació és creada en HTML5 pel que és possible visualitzar-la a través de dispositius mòbils, tablets, etc.

Molt recomanable.
Read more ...

dimecres, 14 de setembre del 2011

Tack-O-Rama: recursos d’estil retro per disseny

Tack-O-Rama és un web que ens presenta recursos de disseny amb la peculiaritat que tots els recursos tenen un estil retro (anys 60 i 70, art-déco, etc.)
Podem trobar, clipart, tipus de lletra, fotos, shapes pel photoshop i més.

Interessant i curiós
Read more ...

dimarts, 13 de setembre del 2011

Infografia sobre les tres principals xarxes socials Facebook, Twitter i Google+

Interessant infografia (està molt de moda això) que compara les diferents formes en que aquestes xarxes socials permeten a l'usuari establir relacions i compartir continguts.
Via Stefano Epifani Blog

Read more ...

dilluns, 12 de setembre del 2011

Firefox 6: ja el tenim aquí

Fa no res que anunciàvem el llançament del Firefox 5 i mira, ja tenim aquí el Firefox 6.
Coses bones del Firefox 6
  • El tenim en català
  • Millora de la interfície
  • Navegar per diversos llocs a la vegada, simplement i fàcil. Cada lloc web nou apareix com una nova pestanya (no una nova finestra) i s'hi pot accedir amb un sol clic.
  • Cerca fàcil, tenim cerca web integrada, navegació amb geolocalització integrada, suggeriments de cerca, i més.
  • Corrector ortogràfic integrat i molt més
Totes les característiques i novetats del Firefox 6

Read more ...

diumenge, 11 de setembre del 2011

Solucions fàcils a Internet

L’altre dia mirant la tele (sí, de tant en tant la mirem) vam veure un anunci d’una empresa online que permet la creació de pàgines web en línea de manera “fàcil, ràpida, amb un ampli catàleg de plantilles, barata i bla, bla, bla”, anunci que ens va fer pensar en l’apocalipsi, és clar.

Tampoc cal criticar-ho massa, ja que en temps de crisi com estem, tot allò que ens puguem estalviar benvingut sigui, del que volem parlar és d’aquest model de negoci que segurament triomfarà i pujarà com l’escuma però desprès caurà pel seu propi pes (ei que fa més de 10 anys que estem en el món d’Internet i hem vist de tot i amb ganes).

Pels usuaris d’Internet no tècnics el manteniment d’una pàgina web pot resultar un feina afegida poc grata i també cal tenir present que el fet de tenir presència a Internet no garanteix més vendes o més popularitat, tenir presència no vol dir que et trobin, cal una feina constant de millora del que tenim, de com ho presentem i de com ho expliquem.

Estar a Internet no és el mateix que et vegin a Internet.

Aquestes solucions fàcils a Internet de creació de pàgines no creiem que siguin la solució (entenent la solució com la única que hi pugui haver), creiem que és millor confiar en professionals del tema que ens pugui assessorar de quina és la millor manera d’estar i créixer a Internet.
Read more ...

dissabte, 10 de setembre del 2011

Google Chrome Extensions Vol. 3

Hola que tal, benvinguts a una nova edició de les extensions pel Google Chrome ara mateix potser el millor navegador dels que hi ha (i que ens disculpi el Firefox, però el Chrome li està passant la mà per la cara….)

Color Generator: Extensió que permet generar ràpidament valor hexadecimal i en RGB, així com la possibilitat d’ajustar-ne el matís, la saturació i lluentor.


Resolution Test: Una extensió per als desenvolupadors per provar les pàgines web en diferents resolucions de pantalla, amb una opció per definir les seves pròpies resolucions.


Speed Tracer: és una eina que ens ajudarà a identificar i corregir problemes de rendiment en les nostres aplicacions web.

Awesome Screenshot: Extensió que ens captura tota la pàgina o qualsevol porció, i podem afegir notes i gràfics tipus rectangles, cercles, fletxes, línies i text.
Read more ...

dimecres, 7 de setembre del 2011

Optimitzar imatges jpg

Sota el lema “Les teves fotos a dieta” (cosa que a tots ens fa falta, lo de la dieta vull dir), se’ns presenta JPEGmini una aplicació online i gratuïta (de les que molen) que ens ajudarà a optimitzar la mida de les nostres imatges sense pèrdua de qualitat.

Eina molt, molt i molt recomanable.
Read more ...

divendres, 2 de setembre del 2011

El friki-recurs

Placekitten
Un Lorem Ipsum per cercar fotos de gatets

Miau, miau
Read more ...

dissabte, 20 d’agost del 2011

The Commons: Patrimoni públic de Flickr

The Commons o Patrimoni públic de Flickr és un extensíssim recull de fotografies d’arxius públics de tot el món, algunes d’elles (la majoria) sense restriccions conegudes de drets d’autor. Aquestes col·leccions representen un enorme patrimoni cultural i social que val la pena revisar de tant en tant.
El programa té dos objectius principals:
Augmentar l'accés a col·leccions fotogràfiques de domini públic i
Proporcionar un mitjà perquè el públic general aporti informació i coneixements.

Les col·leccions de fotografies provenen d’institucions participants en el projecte  que van des de la NASA, passant per les principals biblioteques d’Europa, Estats Units i Austràlia.
Read more ...

divendres, 19 d’agost del 2011

Comparar la validesa del codi HTML i CSS amb diferents clients de correu

L’enviament de mailing pot arribar a convertir-se en un autèntic mal de cap si el que volem és que el nostre correu es vegi bé amb tots els clients de correu electrònic.
Fractal és una aplicació online i gratuïta per comprovar la compatibilitat dels nostres newsletters amb els diferents clients de correu.
L’únic que hem de fer és copiar i enganxar el nostre codi i l’eina ens mostrarà la compatibilitat amb 24 clients de correu incloent els clients mòbils.

Read more ...

dijous, 18 d’agost del 2011

dimarts, 16 d’agost del 2011

The Web Font Combinator

The Web Font Combinator és una eina online (d'aquestes que ara estan de moda amb HTML5 i tal), que ens servirà per combinar i comparar fonts (tipus de lletra), jugant amb el títol, subtítols i paràgrafs, mida de la lletra, espaiats, etc., aquesta eina només utilitza fonts subministrades pel directori de fonts de Google i també les fonts de sistema.
Podem fins i tot editar el text que veiem en pantalla per adequar-lo al nostre text.
Una eina curiosa i útil.
Read more ...

dissabte, 30 de juliol del 2011

Loads.in eina per mesurar la velocitat de descàrrega d’un web

Loads.in és una eina online per a mesurar el temps de descàrrega de les nostres pàgines web.

Què més fa Loads.in?

  • Realitza captures del lloc que s'està analitzant en diferents períodes de temps durant la descàrrega del mateix.
  • Detecció d'errors, arxius que falten, etc.
  • Descàrrega de l'anàlisi en format HAR
  • Opció de diferents ubicacions per realitzar l'anàlisi.
  • L’eina disposa de l’opció de diferents navegadors sobre els que podem realitzar l’anàlisi: Safari, Chrome, Internet Explorer i Firefox.

Read more ...

divendres, 29 de juliol del 2011

Whatfont, ajuda per saber el tipus de lletra d’un web

Whatfont és una eina que ens ajudarà a saber quin és el tipus de lletra que s'utilitza en un web sense haver de recórrer al firebug o a qualsevol altra eina.
Whatfont la podem usar com a una extensió pels navegadors Chrome i Safari o com a Bookmarklet, només arrossegant fins a la barra de marcadors.
Es garanteix la compatibilitat amb Firefox 3.6 i superior, Chrome 9 i superior safari 4 i superior i Explorer 9


Read more ...

dijous, 28 de juliol del 2011

Lliçons d’usabilitat web amb Chuck Norris

Chuck Norris que és la llum que il·lumina el camí d'aquest bloc, ens ofereix les següents lliçons sobre usabilitat web via Informous.com

Val a dir que aquest post compta amb el Segell de qualitat Chuck Norris Approved.
Read more ...

dimecres, 27 de juliol del 2011

Les alternatives al Lorem Ipsum

Un dels recursos més soferts i alhora agraïts que podem trobar és el text simulat Lorem Ipsum.
A Internet trobem nombrosos generadors de continguts simulats que ens ajudaran a:
quadrar paràgrafs, fer-nos una idea de la llegibilitat del text (espaiat, tipus de lletra, distància entre paràgrafs, línies i paraules, mida de la lletra), encapçalaments i llistats, en definitiva, podem veure com quedaran els continguts en format text que s'afegiran al web.
Encara que el text simulat Lorem Ipsum és una bona eina en surten de tant en tant uns quants detractors, que ens fan reflexionar sobre el següent:

  1. Si els continguts són la peça fonamental d'un web, perquè hi afegim text simulat i no continguts originals?
  2. El text Lorem Ipsum no té caràcters especials (accents, signes de puntuació tipus exclamacions, cometes, etc.), com podem comprovar la correcta codificació dels caràcters?

Fora de tota aquesta polèmica, us presento una sèrie d'eines per a la generació de text simulat:
  • Quijotipsum és un generador de text basat en el Quixot amb accents per provar la codificació
  • Omplu és un generador de text del tipus Lorem ipsum però amb l’afegit de negretes, cursives, subratllats, enllaços etc.
  • Lipsum: el gran clàssic

Un extra: Lorempixum
Un generador de imatges amb llicència Creative Commons per a que les puguem usar en els nostres dissenys com a imatge simulada.

Anecdotari: un cop en una web d'un ajuntament varem posar text simulat Lorem ipsum per les notícies quan es van dissenyar els prototipus.
Després de validar els prototipus d'una manera molt professional que es va deixar gratament sorpresos ens van deixar anar la bomba següent:
Perdonad, pero el texto que habéis puesto en las noticias, ¿en qué idioma está, en catalán?
Read more ...

dimecres, 13 de juliol del 2011

Premis Blocs Catalunya 2011

Un any més s'obre la convocatòria dels Premis Blocs Catalunya, per l'edició d'enguany el procés de votació està obert a qualsevol persona que vulgui participar-hi, però per fer-ho caldrà registrar-se com a usuari a la web de l'associació STIC.CAT (Societat de Tecnologia i Coneixement). El registre és molt senzill i es pot fer amb un email i password o directament amb l’usuari personal de facebook o twitter. Aquells que es van registrar per inscriure el bloc poden utilitzar el mateix usuari, sense necessitat de registrar-se de nou.

Un cop registrat, s’accedeix al panell d’usuari STIC i des de aquí al taulell de votació del Premis Blocs 2011, on hi haurà les 12 categories temàtiques. Quan l’usuari selecciona una categoria, apareixen els blocs que hi participen, ordenats alfabèticament i per perfils (personal, professional i corporatiu).

Va, voteu a limitnordest com a  millor bloc de temàtica TIC - personal.
Read more ...

dilluns, 11 de juliol del 2011

La importància de l'espai en blanc en la web

L’espai en blanc no és només l’espai que separa un contingut d’un altre, és un component més del nostre disseny.
L’espai en blanc contribueix a l’equilibri dels elements que conformen un disseny. És necessari senyalar que l'espai en blanc no és necessàriament "blanc" és essencialment un espai buit. En el context del disseny web, l’espai en blanc es refereix a l'espai entre els diferents elements de disseny, és l'àrea entre el text, paràgrafs, imatges, enllaços i peus de pàgina, etc.

Tipus d'espais en blanc

Hi ha dos tipus d'espais en blanc en el disseny web.
L’espai en blanc actiu és l'espai deixat intencionadament de manera que ajudi a emfatitzar el contingut i/o a millorar l’estructura del disseny.

L'espai en blanc passiu és l’espai buit al voltant de la pàgina o l'àrea en blanc dins del contingut.

Els espais en blanc que podem controlar i que hem de revisar:
La distància entre línies
Interlineat òptim es pot aconseguir amb l'ajuda de CSS amb la propietat line-height.
Una plantilla de lloc web és més llegible i fàcil d'explorar quan hi ha prou espai entre línies. Si les línies són empesos massa a prop, l'exploració es fa difícil. Quan les línies estan massa separades les paraules són virtualment desconnectats

Marges
Aquest és l'espai al voltant d'un element en particular, sempre s’aconsella que aquest es controli mitjançant CSS amb les propietats margin i padding.
Cal tenir en compte el marge vertical i el marge horitzontal, si fem anar una plantilla de grids (960, etc.) l’espaiat horitzontal mínim ja el tenim solucionat (és l’espai entre columnes).
Un marge massa gran crea sensació de desconnexió, mentre que un marge massa petit dóna sensació d’aglutinament.

Encapçalaments
Els encapçalament són una molt bona forma de separar el contingut en porcions més petites i manejables. Utilitzarem espais en blanc per sota o per sobre dels encapçalaments de manera que ens ajudaran a separar conceptes i blocs de contingut.

Equilibri: allò tant senzill i a l’hora tant difícil
L'espai en blanc s'utilitza per crear un disseny equilibrat. Si no deixem espais buits entre continguts o blocs, els usuaris no poden descansar els ulls ni poden fer-se una idea dels blocs en que es divideix la pàgina.
Un bon disseny cal que mantingui un bon equilibri entre espais oberts i continguts, de manera que no confonguem a l’usuari deixant massa espai en blanc en àrees equivocades.
Read more ...

divendres, 8 de juliol del 2011

Google +: El projecte de xarxa social de Google

De moment només és un projecte en proves, però Google vol entrar fort en el món de les xarxes social amb un híbrid entre facebook, twitter, missatgeria instantània, video conferencies, etc.
Coses bones que té, el fet de poder entrar amb el teu perfil de Google i que ja el tenim en català.
Google Wave no va acabar de remuntar i això que era una bona idea.

Si en voleu saber més visiteu Google +
Read more ...

dimecres, 29 de juny del 2011

El Firefox 5 ja és aquí!

Ja poden descarregar i instal·lar l’última versió del navegador web Firefox.

L’aspecte gràfic no ha canviat, cosa que en un principi ens pot semblar que no ha passat res, però, es pot comprovar que va molt més ràpid i molta més nitidesa en mostrar els tipus de lletra en pantalla.
D’entre les novetats que presenta se’n destaquen les següents:

"No rastrejar": Firefox es converteix en el primer navegador a oferir aquesta opció en múltiples plataformes implementant aquestes millores en la privadesa de l'usuari tant per a dispositius mòbils com per a equips de sobretaula i portàtils. Aquesta funcionalitat s'ha millorat notablement amb l'objectiu que a l'usuari li resulti més senzill configurar la seva privadesa definint on no vol ser rastrejat.

Millor suport per HTML5 i Javascript: s'ha millorat per optimitzar el rendiment en memòria i el suport estandarditzat.

Millores en CSS3: s'ha afegit suport per a animacions en 3D

Descarregueu-lo en català
Descarga en español


Read more ...

diumenge, 12 de juny del 2011

Anàlisi del nou web paqueteria.correos.es

Per la presentació de nous productes i serveis una de les opcions més encertades és al creació d’un web que mostri i introdueixi als usuaris i clients potencials en les noves línies de producte. El nou web de Correos http://paqueteria.correos.es/ n’és una bona mostra. El web funciona a mode d’aparador del producte de paqueteria 360º que engloba totes les línies de paqueteria de transport urgent del Grupo Correos: Paquetería Urgente, Paquetería Pymes, Paquetería e-commerce, Paquetería Exportación, Paquetería Erasmus, i Paquetería Mi Tierra.

El disseny està cuidat fins al mínim detall seguint una línia estètica de paquet postal, títols gràfics a mode d’enganxines, segells a mode d’icones, imatges de fons, tot sempre seguint els colors corporatius de la marca Correos. Cadascuna de les noves línies de producte queda representada per una icona que les identifica i una imatge (paquet) que les unifica.
El fet de que el web sigui un aparador fa que els continguts estiguin enllaçats al web principal de Correos, així ens trobem que cada cop que volem aprofundir en els continguts d’un servei se’ns redirecciona al web principal de Correos, que tot i que té una línia estètica similar (bàsicament en colors), veiem que no es tracta del mateix web on érem.


Estructura
Estructurada de manera molt senzilla capçalera, continguts i peu, i amb la zona de continguts central dividida en tres columnes, el web ens ofereix una interfície neta, visualment atractiva i ben proporcionada. Es destaca especialment l’animació de la capçalera
Creiem que en les planes interiors la zona de capçalera hauria de ser més estreta ja que cal fer scroll vertical per poder veure els continguts de la pàgina
Tot el web segueix una mateixa línia d'estil i presentació de continguts. Veiem que els web no conté molletes o breadcrumbs, els que en som partidaris les trobem a faltar, encara que la profunditat de continguts del web és mínima.


Visualització amb diferents navegadors
La visualització ha estat satisfactòria amb els següents navegadors:
Internet Explorer 7 i 8
Firefox 4. 0. 1
Google Chrome
En un entorn Windows XP SP3
El web es visualitza correctament amb diferents resolucions de pantalla (entenem que 800 x 600 ja no és una resolució d'ús massiu)

Destaquem
Les icones, molt ben utilitzades en totes les pàgines estan associades a un producte/servei que s’ofereix i reforcen i milloren la comprensió del producte d'una manera encertada.

Coses que creiem que es podrien millorar
  • Els meta tags són escassos, creiem que es podrien afegir més etiquetes per a millorar el posicionament del web
  • Revisar el codi CSS, en la validació automàtica amb W3C CSS Validation Service s'han trobat alguns errors de codi
  • Revisar el codi XHTML en la validació automàtica amb Markup Validation Service s'han trobat alguns errors de codi
  • Revisar els enllaços en la validació automàtica amb Link Checker s’han trobat alguns enllaços trencats
Read more ...

dilluns, 16 de maig del 2011

Aplicacions gratis per a dissenyadors web

SnackTools és una petita suite online amb sis aplicacions útils per a tots els dissenyadors web que necessitin una solució ràpida, simple i gratuïta per completar tasques comunes com per exemple, la de realitzar un baner animat senzill.
Les mini aplicacions que podem trobar estan orientades a la creació i edició de contingut multimèdia, la suite es compon de:
  • BannerSnack: Creació de bàners animats.
  • PodSnack: Reproductors d'àudio personalitzats.
  • TubeSnack: Personalització de reproductors de vídeo i creació de llistes de reproducció.
  • PhotoSnack: Eina per crear un showcase d’imatges.
  • QuizSnack: Aplicació per crear formularis
  • FlipSnack: Compartir documents en format PDF agregant transicions estil llibre
Read more ...

dimarts, 3 de maig del 2011

Recursos Vol. 38: Inspiració

Hola que tal benvinguts a una nova edició dels recursos. Avui galeries de webs per a inspirar-se.

Pels amics del WordPress
Best WordPress Inspiration

Web Design Showcase

Site Inspire

Dissenys minimalistes
Minimal Exhibit

Selected webdeding
Podem cercar per tipus, estil, CMS o framework que utilitzam funcionalitats, etc.
Read more ...

dilluns, 2 de maig del 2011

El sistema de Grid de 978

El sistema de Grid de 978 utilitza una xarxa o quadrícula de 978 píxels en 12 columnes de 54px, amb una separació de 30 píxels. Això es veu a un total de 978px, i s’utilitza la major part de l'espai en un monitor de 1024x768.
Per adaptar-nos a les diferents resolucions de pantalla s’ofereixen diverses variants del sistema de grids de 978.
Començant per la resolució de 1024 x 768 fins a 1440 x 900 poden utilitzar les variants 978, 1218 i 1378 en monitors estàndard i també per tablets i smatsphones utilitzarem les variants 978, 748 i 300
Veure les especificacions dels navegadors

El sistema de grids de 978 no entra en conflicte amb el sistema de 960, de fet tots dos són prou vàlids. Simplement podem utilitzar el que més ens convingui segons el tipus de web o el dispositiu en que es veurà aquest web.
Read more ...

diumenge, 1 de maig del 2011

Remember The Milk: gestiona les teves tasques

Remember The Milk és una aplicació per a gestionar tasques de manera fàcil i còmoda

Què podem fer amb Remember The Milk?

Gestiona les tasques ràpidament i fàcil. Una interfície intuïtiva que fa que gestionar les tasques sigui divertit. Fixa dates límit com proper divendres o en 2 setmanes. Un ampli ventall de combinacions de tecles fan que la gestió de tasques sigui més ràpida que mai.

Recorda-ho tot, siguis on siguis.
Rep recordatoris a través del correu electrònic, SMS i missatgeria instantània (compatible amb AIM, Gadu-Gadu, Google Talk, ICQ, Jabber, MSN, Skype i Yahoo!).

Organitza’t de la manera que vulguis.
Ets amant de les llistes? Crea tantes llistes com et calgui. T'agraden els marcadors? Utilitza el núvol de tasques per veure fàcilment el que has de fer. Vols guardar notes sobre les tasques? També ho pots fer.

Ubica les tasques.
Utilitza el mapa per a veure on estan ubicades les teves tasques en el món real. Mira quines són les més properes o quines et van de camí, i planifica la millor manera de fer-les.

Treballa en grup per enllestir les tasques.
Comparteix, envia i publica tasques i llistes amb els teus contactes o amb el món. Recorda a aquells que t'estimes de fer les feines de casa.

Remember The Milk també el tenim en català!!
Read more ...

diumenge, 17 d’abril del 2011

Sistemes de navegació amigables (User Friendly)

La creació d’un sistema de navegació amigable per l’usuari (el que en anglès en diuen User Friendly), no ens hauria de reportar un esforç extra a l’hora de muntar el prototipus web, la majoria de les vegades es una qüestió de sentit comú, però també cal recordar una sèrie de conceptes que s’han convertit ja en estàndards a l’hora de dissenyar el sistema de navegació d’un web.
A continuació es presenten alguns suggeriments que ens poden ser útils:
  • Triar la millor ubicació per la navegació: zona superior, a sota de la capçalera
  • Coherència: un cop triada la millor ubicació cal que aquesta es mantingui en el mateix lloc en cada secció del web
  • Etiquetar correctament els ítems del menú de navegació: es tracta d’usar correctament l’etiquetatge dels enllaços, també podem reforçar els enllaços afegint un petit text descriptiu
  • Icones, gràfics i símbols: ajuden als usuaris a identificar millor els continguts de la secció
  • Escollir el millor tipus de navegació per la nostra plana web: Menú horitzontal o vertical, menús desplegables
  • Simplificar: realment és necessari afegir l’ítem de localització i l’ítem de contacte? No els podríem ajuntar en un de sol? Ens cal crear diferents tipus de navegació pel tipus de web que hem de crear?
Read more ...

dissabte, 16 d’abril del 2011

Estàndards de formats publicitaris interactius

A tavés de la IAB  us presento els Estàndards de formats publicitaris interactius i les seves classificacions:


Formats integrats: Formats que tenen posició fixa a la pàgina

Formats expandibles: Formats integrats que tenen capacitat de guanyar pantalla mitjançant un segon format anomenat panell, la grandària, direcció d'expansió, i execució (rollover i clic) vindrà determinat pel suport. Tots els panells han de portar un aspa de tancament.

Formats flotants: Formats que no tenen posició fixa a la pàgina.

Formats integrats Mida
Robapàgines 300x250
300x300
200x200
Banner 468x60
Mig Banner 234x60
Megabanner 728x90
Gratacels 100x600
120x600

S'aconsella que els pes màxim no excedeixi dels 30Kb

Formats expandibles Mida
Robapàgines 300x250
300x300
200x200
Banner 468x60
Mig Banner 234x60
Megabanner 728x90
Gratacels 100x600
120x600

S'aconsella que els pes màxim no excedeixi dels 30Kb

Formats Flotants Mida
Interstitials 800x600
Layer 400x400
S'aconsella que els pes màxim no excedeixi d'entre els 40Kb i els 50Kb

En tots els casos la durada màxima de les animacions no ha de ser de més de 15 segons.
Read more ...

dijous, 14 d’abril del 2011

El sistema de grid de 960

Fa força temps que l'utilitzo però potser no n'havia parlat mai i és una de les eines més interessants que he fet anar per a la creació de wireframes, parlo del sistema de grids de 960.
El sistema de 960 és una plantilla en format de quadrícula que ens divideix verticalment una plana web en columnes de manera que la separació entre elles i el nombre de columnes en que es divideix la plana web, està sota una sistema únic i robust.
El sistema de 960 és un esforç per racionalitzar el flux de treball de desenvolupament web, proporcionant les dimensions d'ús comú, basant-se en un ample de 960 píxels.

Variants de 960 Grid
El propi framework disposa de dues variants diferents, per fer pàgines utilitzant 12 o 16 columnes. No és que necessitem utilitzar totes les columnes disponibles per a realitzar la maquetació, sinó que la reixeta tindrà aquestes divisions verticals on podem situar els elements. La variant de 12 columnes dóna menys possibilitats per repartir els espais, però en molts dels casos serà més que suficient per crear qualsevol estructura de pàgina. Pel que fa a la variant de 16 columnes, dóna una gamma més gran de possibles amples per a les columnes, que pot ser necessària en dissenys amb un nivell de detall més alt.

Dimensions
La quadrícula de 12 columnes es divideix en porcions que són de 60 píxels d'ample. La quadrícula de 16 columnes es divideix en 40 píxels. Cada columna té 10 píxels de marge a l'esquerra i la dreta, el que crea 20 canals de píxels d'ample entre les columnes.

Amb la quadrícula de 960 la creació d’una estructura web es converteix en una tasca molt més senzilla, menys tolerant a errors i ja dóna una base sòlida per a la creació del disseny web.
La plantilla del sistema de grids de 960 la podem implementar a qualsevol aplicació tant les de creació del prototipus (wireframe), com les de disseny gràfic.
Per a saber més:
960grid
Read more ...

dimecres, 13 d’abril del 2011

Ceaser: eina online d'animacions CSS

Ceaser és una eina online per a crear animacions CSS, ara que els navegadors web moderns ja les suporten.
Podem crear la nostra pròpia animació, indicant la seva durada i efecte i copiar i enganxar el codi CSS resultant.
A alguns potser ja no ens agrada el fet que el CSS s'hagi convertit en un llenguatge de programació, però no deixa de resultar curiós com podem evitar el JavaScript i el flash a l'hora de poder crear animacions per les nostres planes web.
Read more ...

dimarts, 12 d’abril del 2011

Memòria Digital de Catalunya

Memòria Digital de Catalunya és un repositori cooperatiu des del que es poden consultar, en accés obert, col·leccions digitalitzades de revistes catalanes antigues, fotografies, mapes, cartells, ex-libris, etc. relacionats amb Catalunya. La principal finalitat de la MDC és augmentar la visibilitat i consulta del patrimoni català.
Què hi podem trobar?
Arxius de revistes catalanes antigues, cartells de la Guerra civil espanyola, cartells comercials i d'espectacles, polítics, del Pavelló de la República; Enquadernacions artístiques ex-libris, plànols, fotografies, incunables, llibres impresos dels segles XVI al XIX, mapes antics, premsa, partitures, segells i un llarg etcètera.
Una gran part d'aquest fons el podem descarregar i imprimir.
Molt recomanable per seu gran valor històric i artístic.
Read more ...

dilluns, 11 d’abril del 2011

Disseny d'interacció per a facilitar l'experiència d'usuari

La revelació progressiva (en anglès Progressive Disclosure) és una tècnica de disseny d’interacció que ens ajuda a reduir l’excés d’informació que es mostra en un pàgina web, de manera que aquesta es vagi mostrant a poc a poc, és a dir, que es vagi mostrant de manera progressiva. Es tracta del concepte de simplificació de les interfícies web, mostrar i amagar continguts de manera que els usuaris només es fixin en allò més rellevant o en allò que volem que tingui rellevància. Es tracta també de maximitzar l'espai disponible, intentant evitar l’excés d'scroll vertical, o no caure en la temptació de l'scroll horitzontal per a la navegació (si us plau no). També es tracta de no marejar ni espantar l’usuari amb massa continguts mostrats en una sola pantalla.

Com ho podem fer?
Menús desplegables
He de confessar que els menús desplegables no són del meu gust, potser per què encara tinc present les aberracions que es van fer fa uns anys amb el flash.
Un menú desplegable ben fet hauria de tenir les següents característiques per a que em dignés a veure'l com a una cosa útil, a saber:
  • Que funcioni amb tots els navegadors i amb totes les resolucions de pantalla
  • que no es perdi el focus del ratolí quan et mous dins del menú,
  • amb una animació bonica (res d'ensurts),
  • que no sigui intrusiu,
  • que no deformi la pàgina,
  • que no estigui fet amb flash.
En el tema que avui ens pertoca, un menú desplegable seria una bona solució per oferir no només subseccions si no també informació relacionada amb el que trobarem dins de la secció.

Light-box en les galeries d'imatges: es una manera efectiva de mostra més gran una imatge d’un galeria sense deixar la plana web on som, ni que la pàgina es deformi per la mida de la imatge, les diverses solucions de jQuery que podem trobar ens ajudaran a mostrar / amagar la nostra galeria d’imatges.
Tooltips: afegir més informació a una paraula, significat etimològic, el significat d’un acrònim o d’unes sigles, etc.
Finestres emergents: Gran aliades i a la vegades enemigues són les finestres emergents els típics pop-ups tant odiosos que ara cada cop més, són bloquejats pels navegadors web.
La solució és implementar aquestes finestres emergents de manera que no interfereixin en les tasques de l’usuari i sobretot i més important, que apareguin quan l’usuari vulgui
Botons d'acció: botons que ens indiquen llocs on anar (més informació, veure més), o els que ara estan de moda que duen llegendes del tipus “fes-ho ara”, “sí, ho vull comprovar”, etc. Aquests botons d’acció poden dur amagada informació addicional.
Ancoratges, tornar a dalt, tornar enrere, cerca avançada: enllaços molt i molt útils que potser no se’ls té massa en compte i que ajudem en la tasca de navegar pel web i sobretot per navegar en una mateixa plana.
Per a saber més
Read more ...

dissabte, 9 d’abril del 2011

Full de referència ràpida d'elements de disseny

Full de referència ràpida d'elements de disseny: Una visió general ràpida dels elements de disseny bàsics: Línia, color, espai, mida, textures, valors, etc.
Molt interessant i en descàrrega gratuïta

Read more ...

dilluns, 4 d’abril del 2011

20 Things I Learned About Browsers and the Web

20 Things I Learned About Browsers and the Web" és una guia interactiva creada per Google 
on ens expliquen conceptes bàsics com què són els navegadors web, els estàndards i les tecnologies d'Internet.
Interessant el que hi diu i molt més interessant en com ho mostra una aplicació feta totalment amb HTML5, CSS i JavaScript.
Read more ...

divendres, 1 d’abril del 2011

Guia per a formularis amb HTML5

HTML 5 és la nova especificació d'HTML, el llenguatge de creació de pàgines web. HTML5 té moltes característiques noves destinades a fer més fàcil la creació de llocs web i l'experiència de la gent en l'ús dels llocs web. Entre les característiques més destacables de l’HTML5 estan les millores introduïdes per als formularis d’introducció de dades.
Actualment no tots els navegadors web admeten les funcions d’HTML5 de la mateixa manera.
Per no perdre’ns en el món del formularis amb HTML5 us presento una guia d’ajuda sobre la compatibilitat dels navegadors web actuals amb els nous tipus d’entrada de dades, quins navegadors ho suporten, com es gestiona la validació en JavaScript, etc.
The Current State of HTML5 forms
Read more ...

dimecres, 30 de març del 2011

MediaCore un CMS exclusiu per vídeos

MediaCore és un CMS exclusiu per vídeos que està sota la llicència GPL de codi obert i la plataforma està construïda en Python. Si el que volen es crear un web només per vídeos MediaCore és una bona opció ja que està pensat i construït només per a vídeos.
Característiques principals de MediaCore
  • Compartir: MediaCore compta amb una plataforma totalment integrada que permet als usuaris deixar comentaris, mentre que el back-end permet als administradors moderar fàcilment els missatges.
  • Xarxes Socials i RSS: Facilita als usuaris compartir el vídeo en les principals xarxes socials Facebook o Twitter.
  • Administració de categories: MediaCore permet un nombre il·limitat de categories i subcategories per a organitzar el contingut. Les categories que apareixen en la interfície per a l'usuari i es poden gestionar a través de la interfície d'administració.
  • Reproductor de vídeo
    • JW Player: El Reproductor JW per HTML5 és un reproductor totalment personalitzable i configurable basat en l'etiqueta video d'HTML5. És compatible amb els subtítols, descripcions en àudio i vídeo a través d'HTTP i RTMP.
    • SublimeVideoPlayer: SublimeVideo és un reproductor de vídeo HTML5 que ofereix una gran comoditat ja que s’actualitza sol. Ofereix la comoditat de les actualitzacions automàtiques de suport als navegadors, correccions automàtiques d'errors, i de noves característiques.
    • FlowPlayer: és un reproductor Open Source (GPLv3) fàcilment personalitzable. MediaCore FlowPlayer s'utilitza conjuntament amb el reproductor per defecte HTML5 per proporcionar dispositius de reproducció.
  • iPhone, compatibilitat amb iPad i Android: MediaCore permet la visualització dels vídeos en qualsevol plataforma mòbil incloent iPhone i Android. 

Read more ...

dilluns, 28 de març del 2011

Wufoo constructor de formularis

Wufoo és una eina online que ens permet la construcció de formularis d'entrada de dades i enquestes de manera visual, fàcil i ràpida i sense escriure ni una sola línia de codi.
En dissenyar un formulari amb Wufoo, es crea automàticament la base de dades backend i scripts necessaris per fer la recollida i la comprensió de les dades.
Per aprofitar al màxim les opcions que dóna Wufoo cal donar-se d’alta.
Amb Wufoo les dades que es recullin dels formularis o enquestes es desen en una base de dades i s’hi pot accedir a través d’una interfície d’administració.
També podem utilizar Wufoo només per a crear el formulari i copiar el codi CSS i XHTML al nostre web.
Read more ...

dilluns, 21 de març del 2011

A la recerca de la paleta de colors definitiva

Ja hem parlat altres vegades d'eines online per a crear i cercar paletes de colors, però avui us presentem unes quantes eines que us ajudaran encara més en la difícil però, no impossible tasca de cercar la paleta de colors ideal

Read more ...

dissabte, 19 de març del 2011

L'adéu d'Internet Explorer 6

Diuen que Microsoft ens està demanant disculpes als desenvolupadors web per gairebé 10 anys de Explorer 6, també anomenat el navegador tossut.
El tema és que l'any que va sortir l'IE 6 tampoc teníem massa opcions on triar, i el naixement de navegadors com Firefox o Chrome ens ha aportat a tots aquells que treballem en el món de la web, una nova manera de fer i de treballar i també hem vist que existeix vida més enllà de l'Explorer.
Tot i això, ja ha començat el compte enrera per a la "mort" de l' Internet Explorer 6, cosa que fa força temps que s'esperava.
Microsoft ens diu que l'Explorer 9 serà el millor navegador de tots els temps, segur, ràpid, compatible amb els estàndards, etc. Bé, l'IE 8 en teoria també ho és no?
Comproveu l'index d'ús de l'Explorer 6 en tot el món
Read more ...

divendres, 18 de març del 2011

Naked Password

Naked Password és una eina online que comprova la fortalesa de la teva contrasenya mentre es va despullant una senyoreta. La veritat és que no té més, i de fet existeixen altres formes de comprovar la fortalesa d'una contrasenya, però si més no, aquest plugin de jQuery té la seva gràcia.
Read more ...

dimecres, 16 de març del 2011

Icon Finder: Cercador d'icones

Icon Finder és un cercador d'icones amb una interfície semblant a un motor de cerca, que ens dóna accés a més de 150.00o icones i més de 700 conjunts o packs d'icones.
En els resultats podem triar el color de fons de la icona, la seva mida i té o no llicència d'ús.
Molt útil i interessant.

Read more ...

dilluns, 14 de març del 2011

Icon Trip Recull d'icones "frikis"

Icon Trip Recull d'icones "frikis", perquè no se sap mai quan s'hauran de fer anar.
Pandas enfadats, ninots de lego zombies o sense cap, aliens, space invaders, consoles, gestos manuals simbòlics, etc.
El web ens promet una icona nova cada dia, les podem descarregar en format png.


Read more ...

diumenge, 13 de març del 2011

Els beneficis dels prototipus web amb Wireframes

Els wireframes són una fase molt important del procés de desenvolupament web. Encara que és temptador ometre aquest pas i començar pel disseny gràfic i fer l’arquitectura de la informació directament en el disseny, és preferible crear l’estructura del web abans, ja que, d’aquesta manera ens serà molt més fàcil realitzar canvis, veure d’una manera gràfica la distribució dels blocs de contingut dins de la pàgina, crear l’estructura de navegació, avaluar l’estructura de la pàgina segons criteris d’usabilitat i arribar a un consens entre client, dissenyador i desenvolupador web.

Modificar el disseny abans de fer-lo
És una de les raons més importants que ens demostren la importància del prototipus web.
La creació de l’estructura del web és assenyalar on va cada cosa, com es veurà, com s’accedeix a cada plana interior, com s’ordenen els continguts i com es mostraran.
La idea és crear una estructura suficientment robusta per a que el client pugui fer-se una imatge mental de com quedarà el seu web, capçalera, menú de navegació, llistats, baners, etc.
Encara que els canvis són inevitables, és molt més senzill (i barat) fer-ho en el prototipus que no en el disseny gràfic.

Construir abans de construir
El desenvolupador web no pot començar a picar codi a cegues, com serà la navegació web?, menús desplegables? Com seran els formularis? Hi haurà llistats de notícies o d’esdeveniments d’agenda?
Totes aquestes preguntes cal que es resolguin abans, i els wireframes són la manera de poder-les contestar.

El concepte de la usabilitat
Si invertim temps (que de fet és mínim), en fer una bona estructura web, podrem estudiar el posicionament de cada bloc de contingut, el sistema de navegació (menús principals i secundaris, tornar a l’inici, molletes, etc.).
Podem crear un bon sistema de navegació, útil i fàcil de fer anar si abans ja l’hem provat amb un wireframe.

Els usuaris (i el client) han d’entendre la web
Bé, això és bàsic, però de vegades no tan fàcil.
Només amb el disseny gràfic del lloc web no resulta fàcil imaginar com es comportarà el web, i no tothom té coneixements avançats sobre disseny i desenvolupament web. No es tracta de fer només el que diu el client, es tracta d’intentar combinar el que vol el client amb les noves tècniques de comunicació que ens ha aportat el món d’Internet. El que hem desenvolupat s’entén?, ho pot entendre tothom? L’estructura te coherència en totes les seves planes?
Amb els wireframes podem estudiar tota aquesta problemàtica i oferir solucions.

Per saber-n’hi més:
Guia per crear wireframes
The importance of Wireframing

En continuarem parlant...
Read more ...

dissabte, 12 de març del 2011

Web Seo Analytics: anàlisi SEO online

WebSEO Analytics és una eina online que ens permet fer un anàlisi SEO del nostre web, en especial per blogs.
La informació que ens mostra és molt útil com per exemple:
Enllaços entrants, interacció amb xarxes socials, pàgines indexades als cercadors, anàlisi de les Keywords per paraules i frases, el nostre pager rank, i més.
L'única pega que hi posem és que només podem fer un anàlisi gratuït.
És molt recomanable com a anàlisi orientatiu.
Read more ...

dijous, 10 de març del 2011

dimecres, 9 de març del 2011

Guia de Seguretat i privacitat en el Comerç electrònic

Al gener d'aquest mateix any INTECO Instituto Nacional de Tecnologías de la Comunicación ha publicat la Guia de Seguretat i privacitat en el Comerç electrònic.

La guia ens ofereix de manera didàctica i entenedora, informació molt útil sobre el món del comerç electrònic:
Beneficis i oportunitats del comerç electrònic, avantatges i inconvenients, les formes del comerç electrònic (B2C, B2B, B2E, etc.), amenaces existents i eines de protecció i seguretat i també els drets del consumidors i usuaris en matèria de confiança a Internet i reclamacions.

De moment la guia només està en castellà.
Read more ...

dilluns, 7 de març del 2011

Solucions de comerç electrònic de codi lliure

Hola que tal!
Avui us presento un resum de les millors aplicacions de comerç electrònic de codi lliure que podem trobar avui dia. Val a dir que totes les solucions tenen similars característiques i el fet de triar-ne una o una altra és simplement una decisió subjectiva, és a dir, la que ens agradi més.
Les aplicacions que veurem són:
osCommerce, Magento, Zen Cart i PrestaShop

Read more ...

diumenge, 6 de març del 2011

Com crear millors Landing pages

Via webanalytics.es us presento una molt bona col·lecció de consells per a crear millors landing pages.

L’article fa èmfasi ens els punts següents
Fer un test de la pàgina:
És molt important validar i testejar els nostres dissenys, saber d’una manera objectiva si aquests funcionen com a reclam.
Oferir continguts segons el perfil de l’usuari:
Bàsicament, un usuari serà més procliu a convertir si troba a la pàgina contingut que s'adapta millor a la seva necessitat. Oferint a l'usuari les mínimes distraccions possibles o opcions de marxar de la pàgina (reduir el volum de links que apunten a altres pàgines, per exemple). D'aquesta manera s’aconsegueix focalitzar l'atenció dels usuaris cap a l'objectiu de la pàgina.
Fer una crida a l’acció:
Això és donar al botó, o element que genera la conversió, un pes visual que destaqui per sobre de la resta d'elements de la landing, sense oblidar bones pràctiques a nivell de disseny.
Donar sensació de seguretat i credibilitat:
És interessant oferir testimonis de persones que han utilitzat o comprat algun dels productes o serveis
Oferir la possibilitat de “continuar més tard”:
De vegades, ens enfoquem a aconseguir una conversió immediata, però hi ha usuaris que necessiten més d'una visita abans de convertir, per a aquests usuaris, hem d'establir mecanismes que els recordin retornar a la nostra pàgina (newsletter, avisos de baixada de preu, publicitat de recursos -targeting, social mitjana, etc.)
Read more ...

dilluns, 28 de febrer del 2011

El photoshop que alguns clients creuen que tenim

Via Final del chiste us presento una imatge de com els clients es pensen que els dissenyadors web i gràfics tenen el seu photoshop.

Read more ...

dissabte, 26 de febrer del 2011

Flinkin xarxa social d'intercanvi d'enllaços

Flinkin és una xarxa social d'intercanvi d'enllaços, un espai on tenir les teves pàgines web preferides i poder-les compartir amb tot el món. Pots seguir els enllaços i novetats dels usuaris que t'interessin, així com algunes de les seves categories.

Permet pujar a la xarxa les adreces d'interès, que clàssicament s'emmagatzemaven des del navegador localment a l'ordinador, de manera que són consultables a través d'Internet i no només en local. També en facilita la categorització través de categories, compartides amb tots els usuaris. Però no tan sols permet agrupar-les en categories, sinó també compartir amb la resta del món, així com seguir els usuaris o categories que t'interessin i d'aquesta forma rebre notícies i actualitzacions dels teus interessos.
De moment la web està en català, castellà i anglès.

Read more ...

dimecres, 23 de febrer del 2011

Anatomia d’una Landing Page perfecta

Via Formstack us presento els 10 elements clau de disseny que ha de tenir una Landing Page perfecta

1. Títol de la pàgina i redacció publicitària: El títol de la pàgina i la redacció publicitària s'han de complementar entre si.

2. Títols secundaris clars i concisos: És el primer que es llegeix en la Landing Page. No han de ser confusos o avorrits. Han de convidar al visitant a seguir llegint i contenir punts clau específics del lloc web susceptibles d'atreure la seva atenció.

3. Gramàtica perfecta: La Landing Page no pot contenir textos amb errors ortogràfics, de fet ni la Landing Page ni cap altra pàgina del nostre web. Els compradors online són molt sensibles, amb tendència a desconfiar i eviten qualsevol tipus de risc.

4. Marques de Confiança i Segells de Qualitat: Garanteixen la fiabilitat i qualitat dels productes reduint la incertesa dels consumidors respecte a la confidencialitat de les dades, la seguiretat de les transaccions, els drets dels consumidors en cas de problemes en les seves transaccions de comerç electrònic, protecció de menors, accessibilitat i usabilitat, comunicació comercial, etc.
Per exemple: Confiança Online o l'Agència de Qualitat d'Internet (IQUA). O segells més tècnics com els certificat d'encriptació del lloc com RapidSSL, VeriSign, GeoTRust. Actualment hi ha una iniciativa del Parlament Europeu de Marca de Confiança Europea per al comerç electrònic al mercat de la Unió.

5. Mobilitza a l'usuari perquè entri en acció (Crida a l'Acció): les "ordres" com "fes clic aquí" o "compra-ho ara" donen resultat. Un exemple molt bo sobre aquest punt, ho trobem en la promoció de Firefox 3, quan van canviar el text d'acció "Prova Firefox 3" per "Descarrega-ho Ara - Gratis", l'índex de confiança va augmentar en un 99%, i el navegador es va descarregar en una proporció de 500 vegades més.

6. Botó d'Acció: el botó de conversió ha d'estar al costat, a la dreta del la Crida a l'Acció. Els botons que millor funcionen són els de color taronja o groc.

7. Enllaços simples i escassos: els botons de navegació han de ser simples i discrets, perquè el que interessa és la conversió.
Recordeu que tenim Botons d'Acció en colors vius i atractius.

8. Imatges i Vídeos: és molt important la demostració dels productes i serveis mitjançant continguts multimèdia (demostració de característiques tècniques, detalls, explicació tècnica, etc).

9. El contingut rellevant, a la zona superior: tractant-se d'una Landing Page tot el contingut rellevant ha d'estar a la zona més visible de la pàgina, això és, la zona superior. Mai s'ha de posar contingut important de manera que per accedir-hi s’hi hagi de fer scroll.

10. En el comerç electrònic s’ha de mesurar tot: la Landing Page ha de ser optimitzada permanentment.
Read more ...

divendres, 18 de febrer del 2011

Humans.txt: la web és per a humans

Humans.txt és un projecte per a la creació d'un fitxer de text anomenat humans.txt on podem posar la informació relacionada amb els autors del lloc web.
Si la web és per a humans, per què generem un arxiu amb informació complementària per als motors de cerca el robots.txt? També seria bo crear-ne un per les persones, no?
Com be ens expliquen al web, l'arxiu humans.txt no entra en conflicte amb l'etiqueta Meta Name, humans.txt és un complement.
Read more ...

dijous, 17 de febrer del 2011

Wireframes: eines i recursos

Recursos
Web Wireframe Kit Magnífic kit d'elements en PSD per crear wireframes.
Col·lecció d'elements de interfície gràfica d'usuari per Adobre Illustrator
I love Wireframes col·lecció de wireframes i recursos


Eines
Tiggr és una eina online per a crear i compartir wireframes.
Tiggr inclou un sistema de xat de manera que convida als usuaris a proporcionar comentaris.
A més, el prototip també el podem exportar com a HTML por poder-lo treballar a en mode offline.

Penzil Project: aplicació de codi obert per a crear wireframes
Funcionalitats principals:
  • Multi-pàgina
  • Enllaços a la pàgina
  • Edició de text en pantalla amb text enriquit
  • Exportació a HTML, PNG, document Openoffice.org, document de Word i PDF.
  • Desfer / refer
  •  Instal·lació de plantilles definides per l'usuari
  • Operacions de dibuix estàndard: rotar, moure, escalar
    Addició d'objectes externs
Read more ...

dimecres, 16 de febrer del 2011