Límit nord-est

Responsive Web Design: Conclusions i bones pràctiques

2012-01-30T10:00:00.000+01:00

Deixant de banda el tema codi (CSS, javascript, etc.) hi ha alguns aspectes clau que cal tenir en compte quan es crea una versió mòbil d’un lloc web utilitzant tècniques de Responsive Web Design.
Aquests aspectes estan basats en el sentit comú que, de vegades, no és el més comú dels sentits però, quan el que volem es millorar l’experiència de l’usuari en la navegació i en la interacció amb el nostre web cal que l’apliquem i el tinguem present.

Utilitzar sistemes d'una sola columna com a estructura principal en els disseny per a mòbils. Aquesta estructura ens ajuda a administrar la menor quantitat d'espai i també permet un fàcil escalat entre les resolucions de diferents dispositius, i ens ajuda en també amb la orientació del dispositiu (vertical, horitzontal).
Si tenim molta informació per a mostrar, una de les maneres més fàcils d'organitzar tota la informació és la utilització d'un sistema de navegació plegable, aprofitant el sistema d'una sola columna que ja hem parlat. Podem inserir la informació en diversos mòduls plegables que permeten a l'usuari obrir només el contingut que l’interessi, mentre que la resta es manté ocult o plegat.
Tenir en compte que els mòbils i les tablets funcionen de manera diferent als ordinadors de sobretaula i als portàtils, no només en termes de mida i estructura, també en la navegabilitat. Mentre que els ordinadors utilitzen ratolí o el teclat, en els telèfons mòbils requereixen una directa interacció amb els dits en la pantalla.

En continuem parlant

Anàlisi del web 20milproductos.com

2012-01-28T12:12:00.002+01:00

En els e-commerce o botigues online un dels punts principals de l'arquitectura de la informació és que aquesta sigui lògica, coherent i intuïtiva, pensada en funció del contingut del lloc i les tasques que ha de realitzar l'usuari. Ajudant i recolzant a l’estructura del web també ens cal una interfície gràfica molt correcta on tots els elements es distingeixin perfectament, títols, enllaços, menú principal, cercador, la cistella de la compra, l'accés a l'àrea de clients, accés al formulari de contacte, etc., tot això acompanyat d’eines i recursos gràfics que ajudin a l'usuari a trobar ràpidament el que busca dins de la pàgina.
En el web que analitzem avui 20milproductos.com tot això s’aconsegueix perfectament.
El web 20milproductos.com és una botiga online de material d’oficina barat que ens ofereix molt bones ofertes i un extens catàleg de productes.

Continguts i navegació: aspectes destacats

La pàgina d’inici conté un cercador en una zona ben visible
Amb només un cop d’ull l’usuari ha de ser capaç d’entendre per on començar.
La pàgina d’inici mostra totes les opcions principals i és un bon exemple dels continguts que es trobaran en el lloc web, així en primera plana trobem un llistat de productes destacats de cada categoria i ens dona l’opció de veure’n el detall de cada producte i de veure tots els productes d’aquella categoria.
Els continguts més útils es presenten a la pàgina d’inici com per exemple, el contacte, la cistella de compra, l’accés a l’àrea de clients, l’ajuda i preguntes freqüents, el cercador.
Les opcions de navegació estan ordenades de la manera més lògica o orientades a tasques.
La zona de navegació està prou diferenciada i no es confon amb altres elements.

Aspecte i disseny

La pàgina d’inici conté elements gràfics significatius i missatges clars
El disseny de la pàgina d’inici te aspecte professional i ens dóna una primera impressió molt positiva.
El disseny de la pàgina d’inici així com la seva estructura animen als usuaris a explorar el lloc web.
La pàgina d’inici té aspecte de pàgina d’inici, les pàgines interiors mantenen una coherència i homogeneïtat acurada.

Destaquem:

Les URL netes, que permeten posicionar molt millor el web
El cercador ens mostra els resultats molt ràpidament i a més de mostrar els productes que ha trobat ens diu en quin apartat o secció els podem trobar. Del cercador també ens agrada que si no troba els resultats en dona diferents opcions: tornar a la pàgina d’inici, posar-nos en contacte amb el servei d’atenció al client, navegar per les categories, etc.
Les opcions de visualització dels llistat de productes en forma de reixeta o en forma de llistat
Les opcions d’ordenació del llistat de productes per nom, top vendes, per preu, així com els filtres personalitzat als que tenim abast segons els tipus d'articles, per exemple si cerquem consumibles d’oficina i tòners, les opcions, a banda de marca i model seran: tipus de consumible, qualitat fotogràfica, tipus de màquina.
El web compta amb el Segell de Confianza online i el Segell VeriSign, que ens donen les màximes garanties de seguretat en la compra per Internet.
L’ajuda: que ens presenta informació molt clara i molt ben explicada sobre formes de pagament, comandes, devolucions , garanties, etc.

Coses que creiem que es podrien millorar:
Revisar el codi CSS, en la validació automàtica s'han trobat alguns errors de codi
Revisar el codi XHTML en la validació automàtica s'han trobat alguns errors de codi

Visualització amb diferents navegadors
La visualització ha estat satisfactòria amb els següents navegadors:

Internet Explorer 7 i 8
Firefox 9. 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)

Responsive Web Design: Recursos i tècniques

2012-01-27T10:00:00.000+01:00

Sobre el Grid o quadrícula flexible hem de tenir en compte, independentment de la mida de la pantalla, que tota la informació ha de seguir sent visible per als usuaris i que això es pot aconseguir amagant elements de la pàgina i/o simplificant botons.
Pensem que no és només una canvi de mida de la pantalla, la nostra pàgina pateix una reorganització dels elements que la conformen i aquests elements han de ser fàcils de trobar i han de mantenir una coherència.
Responsive Design Testing
Aquesta eina ens ajudarà a provar el nostre disseny en diversos amples de pantalla.
1140 CSS Grid
És un framework de 12 columnes optimitzat per treballar en les pantalles que van des de la mida dels mòbils a 1280 píxels d'ample. És un sistema simple de quadrícula flexible que utilitza Media queries per a pantalles més petites.
Skeleton
Skeleton és un model que conté la plantilla (grid), el codi CSS (Media queries), javascript, botons, formularis, tipografía, i més. Un tot en un molt complet i gratuit.

Sobre les imatges flexibles hi ha diferents tècniques:
En aquest article (en anglès) ens expliquen com crear imatges flexibles amb propietats CSS
Uns quants trucs de CSS per les imatges

Sobre les Media queries
Un magnífic article de Smashing Magazine sobre les Media queries en el Responsive Web Design
Media queries per a dispositius estàndard
És un model útil per a les Media queries per a dispositius estàndard, amb les mides mínimes i màximes per cada tipus de dispositiu, a punt per descarregar i utilitzar.

En continuem parlant

Responsive Web Design: Elements

2012-01-26T10:00:00.000+01:00

Hi ha tres elements importants en el Responsive Web Design:

Grid o quadrícula flexible
Imatges flexibles
Media queries de CSS

Grid o quadrícula flexible
El primer element que tenim és el Grid o quadrícula flexible. Avui en dia molts de nosaltres fem anar un grid d’amplada fixa (per exemple el sistema de grid de 960) que és un mètode molt eficaç per dissenyar per una resolució de pantalla concreta. Ara que les resolucions de pantalla han canviat tant, un disseny d'amplada fixa no és la millor solució, cal que fem anar una quadrícula flexible que pugui donar resposta a les diferents resolucions de pantalla.
En una quadrícula flexible es fa una revisió completa en termes de proporcions, de manera que tots els elements canvien de mida en relació uns amb altres quan la finestra s'estira o es contrau. En una quadrícula flexible s’usen unitats percentuals per calcular les proporcions del elements.

Imatges flexibles
El segon element que tenim són les imatges flexibles. Normalment això ho podem aconseguir manipulant l’alçada i l’amplada. Un altre mètode per a que les imatges encaixin en diferents resolucions de pantalla és utilitzar la propietat CSS overflow. També es poden crear múltiples versions d'una imatge i anar-les cridant en funció de la mida de la pantalla actual.
Un dels mètodes més populars per canviar la mida de les imatges és utilitzar la propietat max-width de CSS. Aquesta propietat funciona molt bé sempre que altres estils no ens l’anul·lin.El problema amb aquesta tècnica és que la representació de la imatge es veu afectada quan la imatge ha de ser redimensionada a escales molt petites
També hi ha altres tècniques usant combinacions de CSS i HTML5.

Consultes relatives als diferents sistemes de visualització o Media queries de CSS
El tercer element són les Media queries de CSS. Aquest sistema es basa en limitar un conjunt de propietats CSS per a que només tinguin efecte en pantalles amb una amplada mínima determinada. Gràcies al CSS3 les Media queries permeten recollir dades sobre els visitants i la utilitzen per aplicar els estils CSS adequats i específics d'acord amb la mida actual del navegador.
Amb les Media queries, els dissenyadors i maquetadors poden crear diversos dissenys usant només els documents HTML i selectivament proporcionar fulls d'estil sobre la base de diferents característiques, com ara, la mida del navegador, l'orientació, la resolució o el color.

En continuem parlant

Responsive Web Design: una aproximació

2012-01-25T10:00:00.000+01:00

L’anomenat Responsive Web Design neix de la necessitat i de la visió de futur de les noves tecnologies i dispositius, sobretot dels dispositius mòbils, que han anat apareixent en els últims temps. Ara mateix ens trobem immersos en un amalgama de dispositius: tablets, smartphones, mini portàtils, així com monitors de sobretaula cada cop més grans (panoràmics, panoràmics ampliats etc.).
Si parlem en termes econòmics no surt a compte dissenyar i desenvolupar diferents llocs webs pels diferents dispositius, i el seu manteniment pot resultar difícil en quan a temps i diners.
El concepte de Responsive Web Design fa referència al procés de disseny i desenvolupament de llocs web que són capaços de reaccionar a les accions de l’usuari i detectar el dispositiu amb el que s’està visualitzant el lloc web, amb la finalitat de proporcionar la millor experiència d’usuari en matèria de navegabilitat i llegibilitat.

NOTA: el terme Responsive Web Design l’hem vist traduït com a Disseny web sensible, Disseny web de resposta o Disseny web adaptable, nosaltres no el traduirem i sempre en farem referència al terme en anglès.

Qui primer en van parlar va ser al web A List Apart on ara tenim la possibilitat de comprar un llibre sencer sobre el Responsive Web Design.
Llegiu l’article: http://www.alistapart.com/articles/responsive-web-design/
El llibre: http://www.abookapart.com/products/responsive-web-design

La teoria darrera del Responsive Web Design ens parla de la utilització de grids (o quadrícules) i sistemes de plantilles, optimització d’imatges, i media queries de CSS de manera que no es compromet el disseny d’un web a un sola mida de pantalla o un sol dispositiu. Si es dissenyen i desenvolupen correctament els llocs webs sempre seran visualitzats correctament i respondran correctament.
La idea bàsica del Responsive Web Design és que un lloc web ha de "respondre" al dispositiu en el que l’estem visualitzant. En termes generals, això pot significar coses com:

Adaptar el disseny per adaptar-se a diferents mides de pantalla
Canviar la mida de les imatges per adaptar-se a la resolució de la pantalla
La simplificació d'elements de la pàgina per a l'ús mòbil
Ocultar els elements no essencials
Tenir en compte que les pantalles tàctils dels dispositius mòbils es fan anar amb els dits en quant a enllaços i botons
Detectar i respondre a les característiques mòbils, com la geolocalització i l'orientació del dispositiu.

En continuem parlant

Error desconegut

2012-01-24T09:57:00.000+01:00

Error desconegut. Enviï aquesta informació a l'administrador del sistema.I es queda tant ample, sense saber que l'administrador del sistema sóc jo i l'error m'ha sortit a mi.

Paranormal activity

2012-01-23T11:49:00.004+01:00

Jquery que se'n van de l'olla, el més divertit és que pots moure l'error amb el ratolí per la pantalla.

Comic Sans què n’hem de fer de tu?

2012-01-21T21:29:00.000+01:00

Fa temps en un atac d'ira, vam eliminar la Comic Sans del PC, encara que no hi ha remordiments de consciència per l'acte en sí, hem decidit fer un petit post sobre aquest tipus de lletra que desperta passions entre funcionaris addictes al Word Art (recordeu uns pressupostos bastant importants redactats amb la Comic Sans) i odis irrefrenables en altres col·lectius. Anem a veure que hi ha a la xarxa sobre la bona amiga Comic Sans.
Comic Sans Criminal és una web on ens explica de forma molt correcta per a que serveix i sobretot per a que no serveix la Comic Sans i ens exhorta de denunciar criminals de la Comic Sans, i també ens recomana que fem examen de consciencia i signem el Comic Sans Plegde on en comprometrem a només fer anar aquest tipus de lletra quan sigui adequat.
També existeixen defensors de la Comic Sans com els creatius de The Comic Sans Project, que ens presenten els logotips més famosos en versió Comic Sans.

Pobre Vincent Connare! Tot i que ara fa conferències arreu del món parlant precisament sobre... la Comic Sans!!.

Amics i companys que s'actualitzen

2012-01-21T13:26:00.002+01:00

De tant en tant va be fer canvis i això segurament és el que han pensat el company Marc Pampols i els amiguitos Espremulls que han fet canvis en els seu respectius webs.
El Marc ha canviat de tecnologia de Wordpress a Tumblr amb un canvi de disseny també i els Espremulls han actualitzat el seu web amb nous continguts.
Au, visiteu-los!!!

Plantilles per Blogger

2012-01-09T10:06:00.001+01:00

Últimament ens estem pensant en canviar el disseny del blog. Limitnordest ha tingut ja uns quants dissenys, basats en plantilles de blogger.
El primer de tots va ser el tema Arthemia que és una tema força bonic que va ser adaptat per a blogger.

El segon que vam fer anar va ser Design Pile Pink

I el tercer que és l’actual, és el tema Artarius

Pels que feu anar blogger aquí us presentem un recull de plantilles per blogger força interessants

25 plantilles professionals i gratuïtes

Eines online per dibuixar i pintar

2012-01-07T10:46:00.000+01:00

Sumo Paint
Magnífica eina online a l’estil de Photoshop, disponible en varis idiomes incloent castellà.

Myoats
Myoats és una comunitat on podem crear dissenys i il·lustracions utilitzant una aplicació de dibuix online. Aquests dissenys poden ser valorats, descarregats i arxivats.

Pencilmadness
Pencilmadness, és una eina gratuïta en línia per dibuixar basada en Flash. L’eina ens permet dibuixar i publicar imatges en la nostra galeria i també les podem desar com a gràfics vectorials, jpg o escalables (SVG) directament al nostre ordinador.

Lost Type

2012-01-05T10:00:00.000+01:00

Lost Type és una botiga de fonts, fins aquí podria ser una de les moltes que hi ha, però Lost Type té una particularitat: Ens ofereix fonts de molt alta qualitat en el format de Pay-What-You-Want o Paga-El-Que-Vulguis.
Els usuaris tenim l'oportunitat de pagar la quantitat que vulguem per la font que ens descarreguem de manera que si posem la quantitat de 0, ens podem descarregar la font gratuïtament.
El 100% del que Lost Type guanyi amb la venda va directament als dissenyadors de les fonts.
Totes les fonts que trobem a Lost Type tenen un estil retro i per cadascuna ens mostra una fitxa amb les seves característiques.

Logotype Maker

2012-01-04T19:27:00.000+01:00

És una d’aquestes eines online gratuïtes que ens agraden tant.
Logotype Maker serveix per crear el nostre logotip a partir del nom de la nostra marca ens dóna diverses opcions, podem pujar una imatge canviar el tipus de lletra, els colors, ombres i degradats, i un llarg etcètera.
Interessant i curiós.

Busuu: aprendre idiomes online

2012-01-03T19:18:00.000+01:00

Busuu és una comunitat online per aprendre idiomes. Podem utilitzar Busuu de forma totalment gratuïta un cop ens hem registrat tenim al nostre abast 20 lliçons de l'idioma que haguem escollit.
També hi ha la possibilitat de pagament per convertir-se en usuari Premium i així tenir accés a eines addicionals d'aprenentatge i a tots els continguts Premium.
Amb Busuu podem aprendre: anglès, francès, castellà, alemany, italià, portuguès, rus, polonès, turc i àrab.
També tenim la possibilitat de descarregar-nos pel nostre iPhone o Android una app per a poder estudiar des de qualsevol lloc, les app són gratuïtes!!

Weather Zombie, quin temps fa?

2012-01-02T22:00:00.001+01:00

Deixeu-vos estar de meteocat o de qualsevol altre servei de meteorologia, Weather Zombie, és una original forma de veure la previsió del temps i només cal visitar la web i automàticament agafarà la nostra ubicació geogràfica i ens donarà les dades del temps.

Khan Academy

2011-12-11T17:34:00.001+01:00

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.

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

2011-12-08T20:09:00.000+01:00

Una de les coses que faig habitalment és la formació per a usuaris ila resolució de dubtes i problemes, per això és interessant poder comptar amb einesfàcils i sobretot gratuïtes per a poder explicar i resoldre indidències al propiordinador del client sense haver de desplaçar-se ni fer mil explicacions, ja sabemque 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 itreballar en equip. Amb aquesta aplicació podem prendre el control de l'ordinador del'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).

Guia de Google +

2011-12-06T17:38:00.000+01:00

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.

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

2011-12-04T17:36:00.000+01:00

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.

Libros.com

2011-12-02T17:35:00.000+01:00

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.

Capturant pantalles amb el Chrome

2011-11-30T12:28:00.000+01:00

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.

HTML5

2011-11-28T12:15:00.000+01:00

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.

The Typography Manual

2011-11-27T12:03:00.000+01:00

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/

Se'ns acava novembre sense cap post...

2011-11-24T15:06:00.001+01:00

OpenLibra biblioteca lliure online

2011-10-25T15:11:00.000+02:00

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.

Formació en línia Inteco

2011-10-24T14:59:00.002+02:00

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.

Premis blocs Catalunya

2011-10-03T16:51:00.003+02:00

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

Firefox 7

2011-10-03T16:47:00.002+02:00

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

Presentacions online

2011-09-15T09:00:00.001+02:00

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.

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

2011-09-14T09:00:00.002+02:00

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

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

2011-09-13T09:00:00.001+02:00

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

Firefox 6: ja el tenim aquí

2011-09-12T09:00:00.002+02:00

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

Solucions fàcils a Internet

2011-09-11T13:26:00.001+02:00

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.

Google Chrome Extensions Vol. 3

2011-09-10T12:46:00.000+02:00

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.

Optimitzar imatges jpg

2011-09-07T21:00:00.000+02:00

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.

El friki-recurs

2011-09-02T10:09:00.003+02:00

Placekitten
Un Lorem Ipsum per cercar fotos de gatets

Miau, miau

The Commons: Patrimoni públic de Flickr

2011-08-20T13:12:00.000+02:00

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.

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

2011-08-19T12:55:00.002+02:00

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.

Mig ennuvolat

2011-08-18T12:47:00.000+02:00

Opcions que ens dóna.

Especulacions sobre l'iPhone 5

2011-08-17T12:15:00.000+02:00

Via Infographiclabs

The Web Font Combinator

2011-08-16T15:59:00.002+02:00

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.

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

2011-07-30T17:24:00.000+02:00

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.

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

2011-07-29T16:29:00.003+02:00

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

Lliçons d’usabilitat web amb Chuck Norris

2011-07-28T16:18:00.001+02:00

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.

Les alternatives al Lorem Ipsum

2011-07-27T15:57:00.002+02:00

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:

Si els continguts són la peça fonamental d'un web, perquè hi afegim text simulat i no continguts originals?
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?

Premis Blocs Catalunya 2011

2011-07-13T20:55:00.002+02:00

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.

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

2011-07-11T12:57:00.000+02:00

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.

Google +: El projecte de xarxa social de Google

2011-07-08T15:35:00.000+02:00

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 +

El Firefox 5 ja és aquí!

2011-06-29T16:30:00.000+02:00

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

Anàlisi del nou web paqueteria.correos.es

2011-06-12T13:12:00.000+02:00

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

Aplicacions gratis per a dissenyadors web

2011-05-16T10:04:00.000+02:00

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

Recursos Vol. 38: Inspiració

2011-05-03T13:09:00.000+02:00

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.

El sistema de Grid de 978

2011-05-02T13:00:00.000+02:00

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.

Remember The Milk: gestiona les teves tasques

2011-05-01T12:27:00.000+02:00

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à!!

Sistemes de navegació amigables (User Friendly)

2011-04-17T10:28:00.001+02:00

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?

Estàndards de formats publicitaris interactius

2011-04-16T13:25:00.000+02:00

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.

El sistema de grid de 960

2011-04-14T12:45:00.000+02:00

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

Ceaser: eina online d'animacions CSS

2011-04-13T12:19:00.003+02:00

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.

Memòria Digital de Catalunya

2011-04-12T12:00:00.000+02:00

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.

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

2011-04-11T11:55:00.001+02:00

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

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

2011-04-09T12:02:00.003+02:00

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

20 Things I Learned About Browsers and the Web

2011-04-04T11:34:00.000+02:00

“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.

Guia per a formularis amb HTML5

2011-04-01T10:25:00.004+02:00

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

MediaCore un CMS exclusiu per vídeos

2011-03-30T10:10:00.006+02:00

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.

Wufoo constructor de formularis

2011-03-28T10:58:00.000+02:00

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.

A la recerca de la paleta de colors definitiva

2011-03-21T16:16:00.001+01:00

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

moo Color Finder
És una eina online que ens ajudarà a extreure tota la informació sobre colors d’un web.
També en permet descarregar la paleta en format d’arxiu de Photoshop .ACO.

Pictaculous
Ens genera una paleta de colors a partir d'una imatge que podem carregar des del nostre ordinador.
A banda de mostrar-nos la paleta de colors també ens diu el codi hexadecimal de cada color i ens fa suggeriments d'altres paletes de colors inspirades en la nostra
També funciona a través de l'iPhone.

Colorapi
Es una eina online que ens cerca a Flickr imatges i n'extreu la seva paleta de colors.

L'adéu d'Internet Explorer 6

2011-03-19T10:06:00.001+01:00

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

Naked Password

2011-03-18T20:43:00.001+01:00

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.

Icon Finder: Cercador d'icones

2011-03-16T10:40:00.000+01:00

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.

Icon Trip Recull d'icones "frikis"

2011-03-14T10:40:00.002+01:00

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.

Els beneficis dels prototipus web amb Wireframes

2011-03-13T19:42:00.007+01:00

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...

Web Seo Analytics: anàlisi SEO online

2011-03-12T20:31:00.000+01:00

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.

Traductor: deixant sempre el nivell molt alt

2011-03-11T13:46:00.000+01:00

Buf

2011-03-10T13:39:00.003+01:00

No hi ha per on agafar-ho...

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

2011-03-09T15:59:00.000+01:00

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à.

Solucions de comerç electrònic de codi lliure

2011-03-07T10:43:00.008+01:00

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

osCommerce
osCommerce és una aplicació de comerç electrònic programada en php, i requereix d´una base de dades MySQL i un servidor Apache. Entre les característiques més destacades, podem nomenar les següents:

Multi-Idioma i Multi-Moneda.
Múltiples opcions d'enviament i transport: Per països, per zones, per pes, per nombre de productes ...
Múltiples formes de pagament: Contra reembors, Targeta de crèdit, Transferència, PayPal ...
Passarel·la de pagament amb tres bancs espanyols
Aspecte personalitzable
Estadístiques de productes (més venuts, més visitats) i estadístiques de clients.
Atributs de productes dinàmics: Talles, colors, ...
Productes esgotats, en novetat, productes més venuts, gestió de marques ..
Gestió de Banners.
Comentaris o revisions de productes per altres clients i recomanacions de productes relacionats
Gestió de comandes per client (cobrat, enviat, lliurat ...)
Gestió d'impostos internacional: Cada país pot tenir el seu propi impost i també cada zona dintre de cada país.
Avisos i notificacions a clients mitjançant butlletins i newsletters

Magento
Magento és una solució robusta i fácil de fer anar que compta amb una gran comunitat de desenvolupamanet. Característiques generals

Administració del lloc
Comerç mòbil
Promocions i eines de màrqueting
Suport d'internacionalització
Aplicació de tècniques SEO (Search Engine Optimization)
Pagaments en línia
Seguiment d'enviaments
Gestió d'ordres
Servei al client
Comptes d'usuari per a clients
Administració de catàlegs
Navegació en catàlegs
Navegació en productes
Estadístiques i informes
Revisions de clients
Vendes creuades entre negocis
Etiquetes de clients
Comparació de productes
Llistes de desitjos (wishlists)
Integració amb Google Base i Google Website Optimizer

Zen Cart
Zen Cart és una versió bifurcada d'osCommerce. La principal diferència entre osCommerce i Zen Cart és el seu gran motor de plantilles, aquesta característica fa que sigui molt fàcil crear temes personalitzats per a la nostra botiga en línia en comparació amb Magento i osCommerce.
Principals Característiques

Multilingüe
Nombre il·limitat de productes i categories
Accepta nombroses formes de pagament en línia
Accepta pagaments amb targeta de crèdit
Suport per a diferents tipus de moneda
Administració a través d'Internet
Diferents opcions d'enviament de productes
Suport per a càlcul de taxes, segons zones
Cupons de descompte
Ofertes de Productes
Sistema de Plantilles XHTML

PrestaShop
PrestaShop té una gran comunitat amb més de 50.000 membres. El millor de PrestaShop és el seu pes lleuger i alta velocitat. Si es compara PrestaShop amb Magento en termes de velocitat i mida, és molt millor. PrestaShop compta amb més de 250 aplicacions creades per la comunitat de PrestaShop i per usuaris de l'aplicació. Entre elles se’n poden descatacar:

Catàleg

Categories, subcategories i productes il limitats
Comentari i notació dels clients sobre els productes
Packs de productes i complements
Preus decreixents
Llista de regals
Productes personalitzables

Clients

Possibilitat de crear grups de clients
Conservació dels carrets creats pels clients (carrets abandonats)
Sistema de punts de fidelitat
Sistema d'apadrinament
Inscripció a la Newsletter
Seguiment de la teva comanda per email

Comandes

Estat de les comandes configurables
Gestió de les devolucions
Consulta en temps real dels carrets creats
Factures, bons et albarans de lliurament PDF
Ofertes especials (reducciones. ..)
Import mínim de comanda configurable

Pagament

Filtre de maneres de pagament per divises o país o grups de clients
Paypal ™ (preconfigurat)
Moneybookers ™
Hipay ™
Mòdul Google ™ Checkout

Transport

Transportistes i destinacions il•limitats
Notificació per email dels estats de lliurament (personalitzables)
Possibilitat de seguir el seu paquet per nombre de comanda
Possibilitat de regalar les despeses de lliurament
Facturació per franja de preus o de pes o de despeses d'enviament

Estadístiques

Nombre de visitants en línia
Nombre de visites i de visitants
Nombre de comandes i volum de vendes
Estadístiques catàleg / taxa de transformació per categories
Estadístiques productes
Integració completa amb Google ™ Analytics

Traduccions

Traducció en 3 idiomes per defecte: francès, anglès, espanyol
Importa - exportar els paquets de traducció a partir del Back-Office (. Gzip)
Idiomes il limitats - 41 idiomes disponibles actualment
Eina de traducció en línia

Ubicació

Afegir divises de manera il limitada
Sincronització dels tipus de canvi
Nombre il limitat de taxes
Fus horari

Referenciat

Eines SEO
Gestió dels Meta tags (Meta title, keywords ...)
Google Sitemap
URL simplificades

Seguretat

Accés al Back Office per identificació i contrasenya
Compatibilitat xifrat SSL (Secure Sockets Layer)
Compatibilitat amb la norma PCI DSS

Gestió

Back-Office personalitzable
Gestió múltiple d'usuaris (Back-Office) i dels seus permisos (ACL)
Mode 'En manteniment'
Editor text WYSIWYG complet
Programa de socis
Mòduls complementaris
Alertes SMS (Stock, nou comanda ...)

Front-Office modulable

Personalització simplificada dels temes gràfics
Bombolles d'informació sobre les fitxes productes
Productes estrella a la pàgina d'inici
Possibilitat d'incloure publicitat
Possibilitat d'integrar Google ™ Adsense
Formulari de contacte amb entrades múltiples

Com crear millors Landing pages

2011-03-06T20:41:00.000+01:00

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.)

El photoshop que alguns clients creuen que tenim

2011-02-28T11:57:00.004+01:00

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.

Flinkin xarxa social d'intercanvi d'enllaços

2011-02-26T11:39:00.000+01:00

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.

Anatomia d’una Landing Page perfecta

2011-02-23T17:15:00.000+01:00

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.

Humans.txt: la web és per a humans

2011-02-18T20:08:00.001+01:00

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.

Wireframes: eines i recursos

2011-02-17T19:34:00.001+01:00

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

Traductor que google, però què et passa???

2011-02-16T22:22:00.001+01:00

Fes clic a la imatge per veure-la sencera:

Piwik: l'alternativa de codi obert a Google Analytics

2011-02-15T20:31:00.003+01:00

Piwik és una aplicació de codi obert (llicència GPL) d'anàlisi web en temps real.
L'aplicació proporciona informes detallats sobre els visitants de la pàgina web: els motors de cerca i paraules clau que utilitza, la llengua que parlen, les seves pàgines populars ... i molt més.

Piwik està disponible en més de 40 idiomes incloent el català.

Caraterístiques

Informes d'anàlisi web en temps real: a Piwik, els informes es generen per defecte en temps real. Per a llocs web d'alt trànsit, pot triar la freqüència dels informes que es processen.
Cadascú de nosaltres és propietari de les seves dades d'analítica web.
Modern, fàcil d'usar interfície d'usuari: es pot personalitzar completament el seu escriptori, amb opcions d'arrossegar i deixar anar (drag and drop)
Es poden afegir noves funcions i treure les que no és necessiten.
Un gran comunitat internacional de més de 50.000 usuaris actius

Molt recomanable.

Wirify: converteix qualsevol pàgina en un wireframe

2011-02-14T10:25:00.001+01:00

Wirify és un bookmarklet que et permet convertir qualsevol pàgina web en un wireframe amb un sol clic. És lleuger i funciona en molts navegadors moderns.
Només cal que arrosseguem el link fins a la nostra barra de marcadors per a que només amb un sol clic poguem veure l'estructura de qualsevol pàgina web.
Interessant i curiós.

Typetester: visualitzant altres tipus de lletra

2011-02-12T20:17:00.000+01:00

Typetester és una aplicació online per a comparar tipus de lletra en pantalla. La seva funció principal és fer la vida més fàcil als dissenyadors de pàgines web.
Ens permet visualitzar l'aspecte de qualsevol tipus de lletra en la web, per així poder triar el que es llegeixi millor, el que quedi més bonic, o simplement el que més ens agradi.
Molt recomanable.

Llegir en la web

2011-02-11T20:04:00.001+01:00

Llegir en la web de vegades pot resultar difícil, i fins hi tot enutjós degut a l'ús indiscriminat d'imatges de fons, tipus de lletra massa petits o no de sistema, o simplement per falta de temps.
A Internet trobem diverses aplicacions que ens permetran llegir el que volen de la web sense preocupar-nos per si hi deixem la vista o ens encantem a la feina.

Readability: s'ofereix com a addon pel Firefox de manera gratuïta, però només funciona l'opció "Read Now".
Read Later, només està disponible per a usuaris de pagament.

Instapaper: Emmagatzema la pàgina que volen llegir en el nostre compte, a la qual podrem accedir de manera offline utilitzant l'aplicació d'iPhone / iPad / Kindle. Tots els textos, una vegada sincronitzats, els desa en el dispositiu, per llegir-los amb calma, quan vulguem.

A més, Instapaper també converteix les pàgines en només text .

Mokingbird: eina online per crear i compartir wireframes

2011-02-09T19:59:00.000+01:00

Mokingbird és una eina en línia per a la creació i presentación de wireframes de manera que podem crear el nostre prototipus amb l’aplicació i visualitzar-lo i comparti-lo en línea. També el podem modificar en temps real mentre altres persones el van visualitzant.
Caraterístiques

Sistema de grids: l’eina permet treballar amb grids personalitzats o amb el sistema de 960.
Exporta a PDF i PNG
Permet maquetar múltiples pàgines
Totalment basat en la web
No cal a instal·lar o descarregar res, es pot accedir a les maquetes des de qualsevol lloc.

Magnífica eina que Chuck Norris ens recomana

Prototipant per l'Ipad, l'iPhone, l'Android i altres smartphones

2011-02-08T19:33:00.000+01:00

Hola que tal.

Avui us presento una col·lecció d'enllaços on trobareu kits d'elements i plantilles de disseny d'interacció d'usuari per l'Ipad, l'iPhone, l'Android i altres smartphones.

Conjunt d’elements de disseny d’interfície d’usuari per a mòbils. Gratuït i en format PSD

Conjunt d’elements de disseny d’interfície d’usuari per a Android. Gratuït i en format PSD

Kit de plantilles per OmniGraffle, Visio (XML), Adobe Illustrator (PDF i SVG) i Adobe Photoshop (PNG)

Kit d’elements per l’iPhone 3G

Plantilla wireframe per l’iPad

Kit d'elements per iPhone

UX BookStore

2011-02-08T09:00:00.000+01:00

UX BookStore és una botiga online on podem trobar una gran quantitat de llibres sobre experiència d'usuari, usabilitat, SEO, prototipat, interacció d'usuari i molt més.
Molt recomanable!.

Prezi editor de presentacions

2011-02-07T21:09:00.001+01:00

Prezi és magnífica eina amb la que podem crear espectaculars presentacions online i offline.
Les llicències per usar Prezi van des d'una gratuïta amb 100MB d'espai fins a una amb 2000MB d'espai i 159 dòlars per any.
El web ens ofereix un extens tutorial en format de vídeo de com fer anar l'aplicació.
Amb Prezi la forma en que es visualitzen els continguts de les presentacions és espectacular: es poden fer zooms, girs de càmera, sobrevolar la presentació,etc.
S'ha acabat l'anar passant de pàgina en pàgina!

Europeana biblioteca digital

2011-02-07T19:23:00.000+01:00

Europeana és una biblioteca digital d'accés lliure que ens permet explorar els recursos digitals dels museus, biblioteques, arxius i col·leccions audiovisuals d'Europa. Promou el descobriment i les oportunitats d'establir contactes en un espai multilingüe, on els usuaris poden participar, compartir i inspirar-se amb la rica diversitat del patrimoni cultural i científic d'Europa.

Podem trobar:

Imatges - pintures, dibuixos, mapes, fotografies i imatges d’objectes de museu
Textos - llibres, periòdics, cartes, diaris i documents d'arxiu
Sons - música i paraula parlada dels cilindres, cintes, discos i emissions de ràdio
Vídeos - pel·lícules, noticiaris i emissions de TV

Amés la cerca es pot afinar per diferents criteris:

Per proveïdor: biblioteques, museus,
Per llengua
Per país
Per data
Per tipus. imatge, text, vídeo

Europeana està en diversos idiomes incloent el català.

TinEye: cerca d'imatges semblants

2011-02-05T19:36:00.003+01:00

TinEye és una aplicació online que ens ajudarà a trobar imatges semblants.
L'aplicació cerca en segons si la imatge que hem pujat des del nostre ordinador o afegint la URL està en altres webs. Els resultats de la cerca són sobre 1,859,700,000 d'imatges que estan a Internet.
TinEye també es pot afegir al nostre navegador web com un addon pels navegadord Firefox i Chrome:
Addon pel Firefox
Addon pel Chrome

Google Art Project: l'art com no l'havies vist mai

2011-02-03T19:14:00.003+01:00

Google Art Project ens permet gaudir en alta resolució de més de 1.000 obres d'art de més de 400 artistes diferents.
Podem passejar des de casa nostra pels principals museus del món com The Metropolitan Museum of Art and MoMA a New York, The State Hermitage Museum a St Petersburg, Tate Britain & The National Gallery a Londres, Museu Reina Sofia a Madrid, the Uffizi Gallery a Florència i del Van Gogh Museum a Amsterdam.
Cada imatge té una qualitat impressionant, fent zoom podem veure cada obra amb un detall mai vist.
Amés podem navegar dins dels museus com si fos Google Street View, visitant les sales i accedint a les obres exposades, així com crear les nostres pròpies col·leccions per poder gaudir-les posteriorment.

The NounProject

2011-01-27T19:33:00.001+01:00

The Noun Project és una col·lecció de símbols en format vectorial. El projecte recull i organitza els símbols més representatius del llenguatge visual amb la finalitat de poder compartir-los de manera lliure i gratuïta.
La seva missió és, en paraules del web: "Compartir, celebrar i millorar el llenguatge visual del món".

Molt recomanable donar-hi una ullada.

Smush It: Optimització massiva d'imatges

2011-01-25T10:00:00.001+01:00

Optimitzar imatges és un pràctica obligada per a poder-les publicar a Internet i que comporta avantatges com millorar la navegació, reduir el temps de càrrega o millorar el posicionament.
Smush It és una senzilla aplicació online que permet optimitzar imatges de manera massiva. Es poden indicar les imatges des del nostre disc dur o des d'una URL, el resultat és un arxiu zip amb totes les imatges optimitzades.
La disminució de grandària depèn de la imatge, però normalment va d'un 10% fins 60% i la pèrdua de qualitat és mínima. Una alternativa ràpida si necessitem optimitzar una gran quantitat d'imatges.

Això encara no ho havia vist mai....

2011-01-24T17:36:00.004+01:00

Revistes online

2011-01-22T10:00:00.000+01:00

Revistes online de disseny i il·lustració

Gizmag és una revista setmanal web sobre disseny i il·lustració.
També tenim la possibilitat de descarregar la revista en format PDF on a més hi trobem entrevistes amb dissenyadors, i nombrosos dissenys i inspiració.

Moloko + Magazine és un projecte independent en línia sobre una gran varietat de gèneres d'art visual contemporani.
L'objectiu dels autors és la de compartir la seva visió del món al seu voltant amb el gran públic - la publicació de l'obra d'il.lustradors i fotògrafs moderns d'arreu del món.
Tenim la possibilitat de veure la revista online o de descarregar-la en PDF

Multilink és un document permanent d'idees i inspiració, una oportunitat de connectar amb persones d'una gran varietat de cultures creatives.
Tenim la possibilitat de veure la revista online o de descarregar-la en PDF

Nou disseny pel blog

2011-01-21T18:21:00.002+01:00

Nou disseny pel Blog
Artarius

Jugant amb imatges

2011-01-16T12:30:00.002+01:00

PaintbrushJS és una eina online de processament d'imatges construïdes amb Javascript. Es pot descarregar de forma gratuïta i està disponible sota llicència MIT.
Què podem fer?

Jugar amb molts filtres fotogràfics com to sèpia, posteritzar, to i saturació, etc.
Ajusteu el valor i la quantitat per a cada filtre quan s'utilitza.

Close Pixelate
Aquest script converteix qualsevol imatge en una versió pixelada. Aquesta eina ens pot ajudar a generar efectes impressionants de forma ràpida i sense haver d'utilitzar programes gràfics.

Totalment compatible amb qualsevol tipus d'imatge.
Alta compatibilitat amb els navegadors.
Àmplia llista d'exemples pràctics.

Minus
Minus és una eina molt simple que ens permet generar i compartir galeries personalitzades directament en línia, l'aplicació està optimitzada per a Firefox, Chrome i Safari de Mac.