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