dilluns, 31 de desembre del 2012

Metro UI CSS

Metro UI CSS és un conjunt d'estils per crear llocs web amb una interfície similar a Windows 8.

Què inclou Metro UI CSS?
Una grid Responsive
Plantilles
Tipografia: la Segoe UI
Components entre els que poden destacar: Les famoses Tiles de Windows 8, sistema de navegació i menú, Sidebars, efectes acordió, sliders, barres de progrés, carrusel, un set de botons, entre altres.

Si us agrada el nou estil que té Windows, no us podeu perdre aquest conjunt d’estils.

Read more ...

diumenge, 30 de desembre del 2012

Viewport Resizer

Viewport Resizer és una eina basada en el navegador per provar la capacitat de resposta de qualsevol lloc web, és a dir, com de Responsive és el nostre web o aplicació.
Viewport Resizer funciona a través d’un bookmarklet, de manera que ho podem provar en la web que vulguem en qualsevol moment.
Aquesta eina ens ajuda a provar el nostre lloc web en diferents resolucions per veure com es comportarà el web, els textos i imatges les transicions etc., en els diferents dispositius.

El que és més interessant és la quantitat de dispositius entre mòbils, smartphones i tablets que suporta i també la possibilitat de construir el nostre propi bookmarklet seleccionant els dispositius pels quals volem provar el nostre web.


Read more ...

dissabte, 29 de desembre del 2012

Modernizr

Modernizr és una llibreria Javascript que detecta les capacitats d’un navegador web relatives a HTML5 i CSS3 i ens informarà de quines d’aquestes capacitats estan disponibles en el navegador de l’usuari i quines no, en definitiva si volem construir llocs web amb la tecnologia més nova però patim pels navegadors vells fent anar Modernizr no haurem de patir gens.

Quines funcionalitats detecta Modernizr?

Amb Modernizr podem detectar les funcionalitats bàsiques de CSS3 i HTML5.
En el cas de CSS3, detecta si estan o no implementats atributs per fer vores arrodonides, ombres, múltiples fons, etc. A més, existeixen formes de detectar si les animacions CSS estan implementades en el navegador, les columnes CSS, els degradats, transformacions, etc.
Pel que fa a HTML5, Modernizr és capaç d'informar-nos sobre l'existència o no de suport a etiquetes com ÀUDIO, VIDEO i també diverses API com a Local Storage, Session Storage, Web Sockets, SVG, etc.

I això com es tradueix?
Bé és fàcil, fa que el web es vegi bé en tots els navegadors, dóna suport per a:
Chrome, Firefox 3.5 +, IE6 +, Opera 9.6 + i Safari 2 +. També per a dispositius mòbils Android WebKit del navegador, Blackberry 6 +, Firefox Mobile, Safari Mobile de iOS i Opera Mobile.

Ok i con s’utilitza?
  1. Anar a la pàgina de descàrrega de Modernizr
  2. Triar les funcionalitats que es volen “modernitzar”
  3. Descarregar



Read more ...

dijous, 27 de desembre del 2012

34Grid: sistema de grid responsive

D’entre els molts, moltíssims sistemes de grid que trobem per Internet i encara que ens tinguem algun de preferit, avui voldríem destacar 34Grid System.
Aquest sistema ens ofereix una aplicació senzilla i visual per a la configuració de les columnes amb els seus paràmetres bàsics, és a dir, la quantitat de columnes i els espais entre columnes.
Un cop configurada la grid ens permet descarregar un joc d’arxius CSS i HTML llest per usar en el nostre nou lloc web.
Uns de les coses bones que té 34Grid System és que no només contempla la distribució de continguts, el sistema és prou flexible con per tenir en compte el tipus de contingut i l’ús que se’n farà. Així ens trobem que permet la configuració de continguts de tipus text i vídeo i a més afegir widgets de les xarxes socials (Facebook i Twitter).
Com tots o la majoria de sistemes de grids, 34Grid System s’adapta també per a dispositius mòbils i al RWD.


Read more ...

dilluns, 19 de novembre del 2012

Entrevista amb Karina Ibarra

Avui entrevistem a Karina Ibarra una professional del món Internet en general i UX en particular, especialitzada en aplicacions per a dispositius mòbils que treballa com a dissenyadora d’interacció i consultora d’UX a Arquinauta.
Heu de saber també que un dels seus projectes més exitosos ABCKit va ser guanyador d’un premi Laus d’Or en la categoria de mòbils i tablets.
Podeu seguir-la a través del blog de la seva empresa o a través del Twitter
Blog: http://blog.arquinauta.es/
Twitter: @karinai / @arquinauta
Només ens resta dir que gaudiu de l’entrevista i a la Karina: Moltíssimes gràcies pel teu temps, paciència i sentit de l’humor!!!

¿Cómo se vende y defiende la usabilidad?
Desde mi punto de vista la usabilidad de un proyecto (servicio o producto) es un tema intrínseco en el diseño. La usabilidad por sí sola no vende.
Tiene que estar alineada con los objetivos que se pretendan alcanzar de la empresa que impulsa el proyecto y además tiene que poder responder a la pregunta de ¿Para qué sirve esto? en términos de qué hace el servicio o producto y cual es el beneficio real para el usuario.

Webs y aplicaciones deben ser o deberían ser bonitas y fáciles, ¿cuál crees es la parte más difícil a la hora de diseñar una aplicación o web?
Bonitas, fáciles y sobre todo, útiles.
Esta es la clave de todo. El para que va a servir esta app o esta web.
Desde mi punto de vista lo más difícil se centra en eso, en realmente ver cual es el valor añadido que estoy aportando al momento de diseñar una web / app de estas características. ¿Por qué un usuario va querer quedarse conmigo, qué valor le estoy aportando, para qué le sirvo, por qué no se va a ir con mi competencia, le he enganchado? Eso para mí suele ser lo más importante y lo que definirá o no el éxito del proyecto.

¿Por qué últimamente parece que los contenidos ya no son tan importantes?¿Es mejor mostrar conceptos?
Content is the king.
Siempre lo ha sido, lo que pasa es que con el tiempo se ha ido dando prioridad a la forma, pero imagina solamente una web o una app sin nada información... ¿no crees entonces que es lo MAS importante?
La forma de resumir mediante un concepto (un grafismo, un mapa, una infografía) es muy interesante, pero no deja de ser contenido tratado.

Los dispositivos móviles, tablets, etc., representan una nueva forma de interactuar con la web y las aplicaciones, ¿acabaremos prescindiendo de teclados y ratones?
Pues sinceramente no lo sé.
Me parece, y esto es un punto de vista muy personal, que nos hemos adiestrado a ver el teclado, el ratón y otros dispositivos físicos como una extensión de nuestras manos para interactuar con dispositivos y máquinas, pero la mano, es la mano y el cuerpo las formas más naturales que tenemos de expresión.
Se está desarrollando mucha tecnología para que sea nuestro cuerpo quien hable con los ordenadores, movimientos más naturales nos permitirán la ubicuidad en la tecnología.

¿Qué supone diseñar aplicaciones para niños? y ¿Se pueden aplicar los mismos conceptos para todo tipo de aplicaciones?
Totalmente. Estamos hablando de principios básicos de diseño universal.
He escrito un par de posts al respecto:
http://blog.arquinauta.es/2012/09/apps-para-ninos-simples-honestas-y-divertidas/
http://blog.arquinauta.es/2011/09/disenando-apps-para-ninos/

Después de un año de ABCKit, ¿qué tal ha sido la experiencia?
Brutal. Te das cuenta de que cuando las cosas las haces con cariño, dedicación y mucho esfuerzo, la recompensa supera con creces cualquier idea que te hubieras imaginado.
ABCKit me ha permitido aplicar -en vivo- todo aquello en lo que creo: la calidad en los detalles, el cuidado de un producto, la perfección, la atención a tus clientes... y sobre todo la gran, grandísima satisfacción, que lo que has diseñado, está ayudando a otros en una tarea importante y valiosa en ese momento.



¿Nos firmas un autógrafo?
jaja. No, mejor me invitáis un café. O una cerveza, ya puestos.
:)
Read more ...

dissabte, 3 de novembre del 2012

Arquitectura de la informació per a aplicacions mòbils.

Ja vam parlar en anteriors entrades que dissenyar per a mòbils és una mica diferent que fer-ho per a la web.
Els smartphones són eines bàsicament de consulta i per tant cal no sobrecarregar l’aplicació ni tampoc oferir en una sola pàgina tots els continguts disponibles (de tots és ben sabut que això també s’aplica a la web).
L’arquitectura de la informació per a una aplicació mòbil ens porta un pas més enllà i com veurem té els seus propis patrons de disseny encara que també es poden aplicar els tradicionals que coneixem en web. És important recordar que no hi ha una única manera de construir una bona arquitectura de la informació i que sempre depèn del tipus d’aplicació, dels continguts, tecnologia emprada, dispositiu, etc.
Podem aplicar diferents tècniques per construir el sistema de menús, pàgines o seccions.

Sistema jeràrquic. Aquest és un dels sistemes més coneguts i que s’ha fet anar en moltíssimes pàgines web, parteix d’un node pare (plana principal o índex) del que van sortint nodes fills. Aquest sistema és l’adequat per a llocs o aplicacions que tenen molt contingut però pot resultar carregós en una aplicació mòbil pel reduït espai de pantalla disponible. A més la idea de navegació jerarquitzada que necessita de breadcrumbs o camí recorregut és un concepte propi de la web, que en aplicacions natives per a dispositius mòbils no s’aplica. Cal pensar també que en una app els nivells de profunditat cal que siguin els mínims i els sistema jeràrquic ens empeny a crear subnivells.

Sistema Hub. Aquest és el model per defecte en l’iPhone d’Apple. Consta d’un índex central des del qual els usuaris poden navegar cap a altres “planes” de la pròpia aplicació. Dins de cada plana, l’usuari no pot fer res més que veure’n el contingut i tornar a l’índex per anar a una altra plana. Aquets sistema és útil per aplicacions petites o en les que cada plana només realitza un acció.

Sistema lineal. Amb aquest sistema partint d’una pàgina inicial es va accedint a la vista detall. Imaginem-nos un llistat principal del que al seleccionar un ítem d’aquest llistat anem a veure’n el detall que a la vegada torna a ser un llistat. Aquest sistema ens permet navegar endavant i enrere i ens dóna una visió molt clara d’on som i també des d’on hem vingut.

Sistema de pestanyes: és el sistema més fàcil d’entendre i visualment més conegut pels usuaris. Consisteix en tenir en format de pestanyes totes les pàgines o seccions de l’aplicació i poder navegar per aquestes pestanyes. Segons la secció on ens trobem la seva pestanya quedarà marcada o ressaltada d’alguna forma (color, mida, etc.)

Vista filtrada. Els amics filtres sempre ens acompanyaran, veritat? De tots és conegut com funcionen. Permet a l'usuari navegar dins d'un conjunt de dades mitjançant la selecció d'opcions de filtre, per tant és una “navegació personalitzada”. És útil per aplicacions molt grans amb una gran quantitat de continguts, però, siguem clars, no es pot filtrar per tot i alhora, bé sí que es pot, però no es recomana, la corba d’aprenentatge pot ser llarga i el sistema pot ser molt complex.

Després de veure una mica com són i com funcionen tots aquests sistemes, ens preguntem i quin és el millor? La resposta és senzilla: tots ho són, però cal aplicar-los seguint criteris de sentit comú (d’acord), i també quin tipus d’aplicació s’ha de desenvolupar, quins continguts tindrà, a quin tipus d’usuaris va enfocada i per quin dispositiu.
Read more ...

dijous, 18 d’octubre del 2012

Disseny d’interfície d’usuari, aspectes bàsics

De la mateixa manera que un excés d'informació és igual a desinformació, un excés de simplificació ens porta també a la desinformació en el sentit de no saber què és el que veiem i què podem fer amb el que tenim.
Els partidaris del KISS (Keep it simple, diria que l'stupid no caldria), a banda d’intentar eliminar el "desordre" cauen en el defecte d’eliminar característiques i funcionalitats que no són supèrflues o tenen tendència a amargar-ho tot.
El terme mig es difícil d'aconseguir!
En la meva experiència he passat de dissenyar interfícies de pàgines web a interfícies d'aplicacions i les necessitats d'unes i altres són molt diferents.
Per una banda les webs tenen un component visual, de identitat i de disseny molt important que en el disseny de la interfície ha de tenir-se en compte. A més cal saber a quin públic objectiu està enfocada aquella web (sí, la web és per tothom, però no és el mateix una web d'una administració pública que d'una agència de publicitat o una botiga online).
Per l'altra les aplicacions ja siguin per web, d'escriptori o per dispositius mòbils necessiten d'un estudi acurat sobre les característiques i funcionalitats que tindrà, sobre si els usuaris trobaran o no les eines amb facilitat, en definitiva, si la sabran fer anar o no en base al que es dissenyi.
Així a l’hora d’enfrontar-nos a un nou disseny d’interfície i després de valorar tots els factors, podem començar per les coses més bàsiques, les que han d’existir en el disseny sense cap tipus de discussió, és a dir:
  1. Capçalera
  2. Navegació
  3. Zona de continguts
  4. Peu
Sí, sembla molt senzill, però és en els detalls, en la disposició i en el funcionament on ens trobarem amb les dificultats.
Si pensem en la capçalera, on col·locarem el nom, títol o logotip de l’aplicació, si aquesta capçalera cal que destaqui o no, si allí hi posarem en el cas d’una aplicació web, les dades de l’usuari connectat, les opcions de configuració i el botó sortir.
Si pensem en la navegació, hem de pensar en el model dades i en l’arbre de continguts i també en el tipus de navegació que ha de tenir l’aplicació: Menú principal, menú secundari, desplegable, breadcrumbs, pestanyes.
Si pensem en la zona de continguts: Si cal que sigui a pantalla completa o dividir la pantalla per oferir més informació. Com s’han d’estructurar aquests continguts: títol de la plana o secció que estem veient, quina jerarquia visual de continguts cal seguir, si cal amagar-ho tot o mostrar-ho tot.
Si pensem en el peu: què hi hem de posar al peu? una imatge per tancar el disseny, accessos directes a seccions destacades, un menú de configuració, l’ajuda o el mapa web.

En continuarem parlant
Read more ...

diumenge, 14 d’octubre del 2012

Interface Sketch plantilles per a web, mòbils i tablets

Interface Sketch són plantilles gratuïtes per a web, mòbils i tablets, en format pdf just per descarregar, imprimir i dibuixar.
Trobarem plantilles per iPad, iPhone4 i iPhone5, Android, Windows Phone, i per mòbils estàndards. També per les tablets iPad i Nexus 7.
Sempre és interessant tenir un bon recull d’aquest tipus de plantilles ja que ens poden ser molt útils quan fem reunions amb clients o quan estem pensant en com col·locar les peces del tetris. ;)


Read more ...

dissabte, 13 d’octubre del 2012

Usabilitat a OSX

Aquesta és una frikada que ens ha enviat el Sr. Juanjo. La cosa està així:

"Un, que procedeix dels sistemes posix no adulterats, ensopega de vegades amb les magnificiències del món de la poma traïdora...
Donada la imatge adjunta, que és més pròpia de Redmon que no pas de Cupertino, a veure si tu em saps dir què fa cada botó :P
Et poso en contexte, que sempre és més divertit:
  1. Descarrego l'instal·lable de Adobe Reader per a OSX
  2. Segueixo fil per randa el linial wizzard instal·lador del software
  3. Un cop ha acabat l'instal·lació decideixo enviar a la paperera l'instal·lable descarregat
  4. El sistema m'escup a la cara el dialog adjunt"

Gràcies Sr. Juanjo!!. Com veieu el quadre de diàleg ens empeny cap a un bucle infinit a la cerca i captura del Bosón de Higgs, del sentit de la vida el univers i tota la resta, l'antimatèria o qualsevol altra cosa.
Read more ...

divendres, 12 d’octubre del 2012

Reveal.js framework per a la creació de presentacions

Si ja estàs cansat del Power Point i el Prezi et mareja, avui presentem Reveal.js
Reveal.js és un framework per a la creació de presentacions dinàmiques que utilitzen HTML5 i CSS3. Al descarregar-lo ens trobem amb un arxiu JavaScript i dos arxius de CSS. El primer full d'estil defineix alguns estils comuns, mentre que el segon conté el disseny d'un tema estàndard. Aquest tema defineix l'aspecte de les parts importants de la presentació: el text, les imatges i els enllaços.
Per a que Reveal.js funcioni només cal un navegador web de doni suport a les transformacions CSS3 i com que dóna suport al navegador Safari també les podrem visualitzar amb un dispositiu de Apple, l’iPad sense anar més lluny.
Ens ofereix quatre tipus de transicions o efectes entre dispositives, i la navegació es pot fer anar amb les tecles de direcció del teclat.
La personalització de les diapositives (en aspecte visual) és molt senzilla i a més tenim disponibles 4 temes amb la descàrrega del framework.


Read more ...

dimecres, 10 d’octubre del 2012

Pensant i dissenyant pel mòbil. Part III

Si tot i seguir les Guidelines marcades per cada SO, encara ens trobem una mica perduts, només cal que naveguem una mica més per internet per veure i trobar inspiració. Per això avui us presentem unes quantes webs amb exemples d’interfícies per a dispositius mòbils, allò que en diuen Mobile User Interface Patterns.

Pttrns 
Aquí trobarem una amplia galeria amb exemples de tot tipus llistats de notícies, perfils d’usuari, calendaris, navegació, etc.

Mobile Patterns
No és una galeria tant exhaustiva, però trobarem composicions de pantalla, navegació a mida, exemples de pantalles d’inici, etc.

UI Parade
Trobarem detalls interessants com per exemple botons, gràfiques, formularis, tant per aplicacions mòbils com per web.


Read more ...

dimarts, 9 d’octubre del 2012

Pensant i dissenyant pel mòbil. Part II

A banda de fer cas a les Design Guidelines dels diferents sistemes operatius dels dispositius mòbils (si us plau feu-n’hi cas que per alguna cosa hi són), hi ha unes quantes normes que cal seguir independentment del SO.
  • Ús d’una grid per a la distribució de les diferents seccions de contingut
  • Quan sigui possible usar només una columna en els llistats d’elements, per exemple:
  • L’estructura de navegació ha de tenir poca profunditat, caldria que la navegació no superés 3 nivells de profunditat
  • L’ordenació dels elements fer-la segons criteris d'ús i importància
  • Els botons que pugui tenir el dispositiu hi són i cal fer-los anar
  • Contrast i colors: com ja dèiem en el post anterior smartphones i tablets es poden fer anar en qualsevol lloc, amb molta o poca llum, hem de ser conscients d'això a l'hora d'aplicar el disseny gràfic de l'aplicació

  • Tipografia i textos, us heu adonat que normalment la mida de la lletra en una aplicació mòbil és més gran que en una web? és importat dir el que volem dir, encara més com ho diem i molt més important encara com ho reflectim, així que cal fer un bon ús del tipus de lletra. Les Guidelines de cada SO ens diran quina és la més adequada.

  • Els formularis: si ja són un maldecap (cada vegada menys dolorós) en la web, imagina't en un dispositiu mòbil! Què hem de fer? Etiquetar sempre, sempre, sempre els camps, oferir pistes del format esperat en cada camp, oferir valors per defecte (sempre que sigui possible, és clar). I molt millor si es canvia la entrada de text per llistes de selecció múltiple (sempre que sigui possible)
  • Icones: que s'entenguin sobretot, i millor utilitzar estàndards de significat i/o acompanyar-les d'un literal


Design Guidelines:
User Interface Guidelines Android
iOS Human Interface Guidelines
UX guidelines for Windows
Read more ...

dilluns, 8 d’octubre del 2012

Pensant i dissenyant pel mòbil. Part I

Ara que cada cop es veu més clar que el futur de la web va cap al mòbil, és l’hora de començar a pensar com seran les pàgines i els aplicacions, si ens convé adaptar el nostre lloc web per a la seva visualització en smartphones i tablets i si ens convé més crear una aplicació nativa.
De moment i per no atabalar-se massa podem començar a pensar què de diferent té navegar amb un mòbil i què tenen d’especial les aplicacions que es desenvolupen per als smartphones i les tablets.


Què en sabem de l’ús que se’n fa dels mòbils?
  • Els mòbils s’usen a tot arreu en entorns on hi ha o molta llum (al carrer) o molt poca, per tant el contrast que hi pugui haver entre els elements és un factor a tenir en compte.
  • Pantalla petita, la màxima “less is more” ha de ser present sempre.
  • Amb un mòbil no programen aplicacions ni construïm pagines web, amb un mòbil el que fem es consultar informació.
  • S’utilitzen amb els dits i per tant les zones sensibles han ser suficientment grans i separades unes de les altres.
La facilitat d'ús ha de ser la pedra angular de les aplicacions mòbils i en general hem de tenir en compte el següent:

  • L’usuari cal que sàpiga on és i quines opcions té disponibles.
  • Un mòbil és un aparell que es consulta en un entorn ple de distraccions i allò que l’usuari veu ha de ser fàcilment entès i conegut.
  • Prevenció enfront d'errors: estadísticament un usuari se sent molt més frustrat quan falla una aplicació o web que es consulta amb el mòbil que una web o aplicació que es visualitza en un ordinador (portàtil o de sobretaula).
Per construir correctament una web o una app pel mòbil primer hem de conèixer en quin dispositiu es visualitzarà, quin sistema operatiu farà rutllar la nostra aplicació web, conèixer si cada SO té unes Design guidelines recomanades que cal seguir, si existeixen botons físics en el dispositiu, com son els moviments que es poden fer i com és el clic, si els botons tenen només un estat o més d'un, en definitiva conèixer, tocar, provar i testejar amb els diferents dispositius.
Read more ...

dimarts, 2 d’octubre del 2012

Windows 8 i la seva nova interfície

Últimament els de Microsoft s’han posat les piles i estan oferint eines i aplicacions a tenir en compte, des del canvi que ha fet Hotmail (per assemblar-se més a gmail, no cal que ens enganyem), passant per Skydrive el sistema d’emmagatzemament al núvol,  l’office 365 i també el sistema operatiu Windows Phone.
D’aquí no res es presentarà el Windows 8, i per primer cop en la seva història Microsoft ha evolucionat significativament el disseny de la interfície des del mític Windows95.
Segons explica Microsoft, Windows 8 es podrà instal·lar en una àmplia varietat de dispositius des de tablets fins a equips de sobretaula.
Per unificar la seva experiència multiplataforma Microsoft farà servir Metro UI o Modern UI (es veu que li han canviat el nom), un llenguatge de disseny que inicialment es va desenvolupar pel Windows Phone i la Xbox. Metro o Modern s'inspira en l'estil modernista de l'Escola de Disseny Bauhaus, disseny suís, un estil tipogràfic internacional, i el disseny de moviment.


Microsoft utilitza cinc principis bàsics que el defineixen:
  • Una interfície digital 100%: aquest nou disseny d’interfícies fomenta l’ús d’objectes d’aspecte realista, evitant ombres, relleus, icones 3D, etc.
  • Gust pels detalls: s’intenta arribar al píxel
  • Fluïdesa i rapidesa en la navegació
  • Evitar la sobrecàrrega d’elements: en el disseny s’evita contingut innecessari (botons, funcions o controls)
  • A més d’aquests principis s’ha posat especial èmfasi en crear una interfície que sigui neta i ordenada amb una corba d’aprenentatge curta, que sigui fàcilment entesa y amb la que els usuris s’hi puguin familiaritzar ràpidament.

Així la interfície té les següent característiques :
  • Utilització d’una grid predefinida fent anar l’aspecte de rajoles o tiles en anglès.
  • Tipografia especialment creada per millorar la llegibilitat en pantalla la Segoe UI en diferents pesos (regular, light, bold, semi light i semibold)
  • Jerarquia en la presentació de les rajoles
  • Una nova forma de navegar: no hi ha cap navegació persistent primària o secundària visible. Els elements de navegació estan disponibles per tornar a casa o es troben amagats en menús desplegables de títols. Això sona com una restricció, però en realitat és un principi sòlid per a aplicacions mòbils i tàctils en general. S’estalvia espai disponible i sempre es pot veure on ens trobem.
Recursos:

Read more ...

dilluns, 1 d’octubre del 2012

Causes que fan que els usuaris abandonin el nostre lloc web.

Avui us presentem una infografia que ens explica quines són les causes de l’abandonament del nostre lloc web.
Infografia What makes someone Leave a Website? Via Kissmetrics 
Aquí en van algunes:
  • Una navegació caòtica, menús que no van enlloc, impossibilitat de percebre on i quin és el menú principal, trobar-se perdut ja en la pàgina principal i un llar etcètera.
  • Un excés de publicitat i no només parlem de baners fixes si no també d’aquells intrusius que ens fan desaparèixer la plana web que estem visitant.
  • Un estructura de continguts mal feta, cal que en un menú hi sigui per separat Contacte, Localització i On som?.
  • Música i vídeo intrusius que s’engeguen sense l’acció de l’usuari (qui no s’ha espantat mai amb musiqueta xumba, xumba?).
  • Que t’obliguin a registrar-te, aquesta és una de les coses que fan més ràbia.
  • Un mal disseny bé això és una qüestió de gustos, però per exemple que hi hagi poc contrasts entre el color de fons i el color de la lletra, una imatge de fons que es veu massa, una combinació d’elements de disseny que no peguin ni amb cola, tot hem vist alguna web així.
  • Un contingut poc interessant o sense ordre ni concert o valga ’m Déu! amb faltes d’ortografia.
  • Una llegibilitat pèssima una mida d ela lletra massa petita un ús indiscriminat de diferents tipus de lletra o fer anar fonts que no es llegeixen bé (helvetica neue, estàs en el punt de mira).
  • Continguts que no s’actualitzen.
  • Que la pàgina trigui massa en carregar.

Read more ...

dissabte, 29 de setembre del 2012

Construint webs i aplicacions amb estil: Bootstrap

Un Bootstrap és un framework (sí, ja ho sé dos paraules en anglès) que simplifica el procés de creació de dissenys web combinant CSS i Javascript, de manera que utilitzant els components que ens proposa podrem crear interfícies web molt ràpidament i que s’adaptin als diferents navegadors, ja que tots aquests components funcionen bé, (però bé de veritat).


Un bon Bootstrap inclou plantilles HTML i CSS de disseny de formularis web, tipografia, botons, etiquetes, unitats de navegació i altres components de la interfície web, incloent pluggins de JavaScript.
Un dels bootstraps més populars i més utilitzats és el de twitter.
Què hi trobarem?
  • Grids: un sistema de grid de columnes és imprescindible!
  • Plantilles de disseny flexibles HTML i CSS
  • Tipografia: descripció del tipus de lletra i definició de jerarquies
  • Taules
  • Formularis
  • Navegació, menús i submenús, desplegables, paginació, breadcrums
  • Finestres modals, missatges contextuals, Alerts
  • Botons
  • Barres de progrés de càrrega o Progress Bar
  • Etiquetes (labels)
  • Llistes
El Bootstrap de Twitter és un projecte de codi obert amb llicència Apache que podem descarregar gratuïtament des de Github.

Lloc web | Bootstrap
Descarregar | Bootstrap a GitHub
Més informació | Exemples de Bootstrap
Read more ...

dimarts, 25 de setembre del 2012

Entrevista amb Milán Dopico

Empezar un negocio, el que sea, es difícil, muy difícil en los tiempos que corren, pero de vez en cuando te encuentras con muy buenas iniciativas, originales y frescas.
Emprender en Internet es la solución hoy en día para todos aquellos que sin una gran inversión ni pretensiones exageradas quieren ofrecer sus productos o servicios a todo el mundo, desde cualquier lugar y por muy pequeño que sea tu negocio.
¡¡Si es que no todo tiene que venir de fuera!!
Confesamos que seguimos en twitter los inicios de la web de Milán Dopico a través de la cuenta de David Bonilla y sabemos que el Sr. P. se compró una y que al preguntarle si estaba buena dijo: “¡¡buena no, buenísima!!”.
Desde nuestro pequeño blog queremos poner nuestro granito de arena con esta entrevista que seguro que será la delicia de todos, ¡¡Dios mío qué hambre!!
Podéis contactar con Milán Dopico a través de su web y también a través de las redes sociales:
hola@milandopico.com
https://twitter.com/milandopico
www.facebook.com/milandopico
www.milandopico.com
¡¡Buen provecho!!

Començar un negoci, el que sigui, és difícil, molt difícil en els temps que corren, però de tant en tant et trobes amb molt bones iniciatives, originals i fresques.
Emprendre a Internet és la solució avui dia per a tots aquells que sense una gran inversió ni pretensions exagerades volen oferir els seus productes o serveis a tothom, des de qualsevol lloc i per molt petit que sigui el teu negoci.
Si és que no tot ha de venir de fora!!
Confessem que vam seguir al twitter els inicis del web de Milán Dopico a través del compte de David Bonilla i sabem que el Sr. P. se’n va comprar una i que al preguntar-li si estava bona va dir: “bona no, boníssima!!”.
Des del nostre petit blog volem posar el nostre granet de sorra amb aquesta entrevista que segur que serà la delícia de tots, Déu meu quina gana!!
Podeu contactar amb Milán Dopico a través del seu web i a les xarxes socials

Bon profit!!



¿Qué es y quienes son Milán Dopico? 
Milán Dopico es uno de los primeros proyectos que lanza Funius, una compañía fundada por David Bonilla (@david_bonilla) y Jerónimo López (@jerolba), con el objetivo de crear aplicaciones, webs y todo tipo de proyectos de base tecnológica, desde una perspectiva divertida y diferente. Milán Dopico no es más que un proyecto de comercio electrónico de gastronomía gallega, pero que se diferencia de la competencia por la búsqueda de una calidad extrema en el producto (desde su elaboración, hasta el packaging o la atención al cliente).
El nacimiento del proyecto fue un poco por casualidad y mucho por amor -por ñoño que suene- como puede leerse en la historia de la compañía (http://www.milandopico.com/sobre-nosotros/). David y su mujer, Candela, conocieron a Gloria, una artesana gallega que preparaba las mejores empanadas que habían probado nunca, y decidieron ayudarla llevando su producto a Internet. A partir de ahí, se vistió el producto con un packaging y una imagen de máxima calidad y a la marca se le puso como nombre los apellidos de Candela, otra gallega de pro.

¿Por qué empanadas gallegas por internet? 
La idea de crear un negocio de comercio electrónico de productos alimenticios premium estaba desde hace tiempo en la cabeza de David, gran amante de la gastronomía. Sin embargo, hasta que conoció a Gloria y sus empanadas, no había encontrado ni el producto ni las condiciones adecuadas para ponerlo en marcha. Los socios de la compañía vieron que era un producto que no estaba lo suficientemente valorado y que tenía muchas posibilidades, solo había que darle la relevancia que se merecía y, además... ¡¡Era GALLEGO!!, un plus para David, un enamorado de esta tierra.


En estos momentos de incertidumbre económica, ¿vender por internet es lo mejor?
Internet te abre la puerta a un público mucho más grande, pero también tienes una competencia mucho mayor. Nadie va a conocerte ni venir a buscarte si no haces un poco de marketing online. Desde luego, para pequeños comercios y, sobre todo, tiendas especializadas es una gran alternativa para buscar nuevos clientes.

¿Qué era lo mas importante a la hora de elegir vuestra estrategia online? 
Creemos firmemente en el inbound marketing, por lo que, desde un principio, apostamos por crear comunidad entorno a la marca. Nuestro objetivo es tener fans de nuestros productos, no meros clientes. Además, tratamos de monitorizar toda acción que llevamos a cabo para tener claro qué es lo que funciona y lo que no.

¿Las redes sociales os han ayudado en vuestro proyecto? 
Por supuesto, ya no solo para dar a conocer la marca y el producto, sino para tener un feedback super valioso por parte de nuestros clientes, que nos envían desde fotos de los pedidos hasta sugerencias de todo tipo.

¿Por qué escogisteis Mumumío como plataforma para vender? 
Nuestra idea es desarrollar nuestra propia tienda online dentro de http://www.milandopico.com/, pero, antes de hacerlo, quisimos validar el proyecto, lanzar nuestro MVP (Minimum Viable Product) a través de un marketplace de referencia como es Mumumío. Desde luego, era la forma más rápida y segura para comenzar y lo recomendamos totalmente para emprendedores que no tengan conocimientos de desarrollo o que no dispongan de recursos para pagar su propia tienda online.

¿Nos firmáis un autógrafo? 
No somos muy de autógrafos. Preferimos dejar nuestra firma en nuestras empanadas. Así que ir buscando sitio y hora para que podamos desgustarlas con un buen Albariño :)

Moltes gràcies Candela!! /¡Muchísimas gracias Candela!
I ara veurem la part més important: Les empanades!! /Y ahora veremos la parte más importante, las empanadas!

La de tonyina/ La de atún

La de bacallà / La de bacalao

 La de poma / La de manzana

La de Morcilla (m'ho tradueixen al català per botifarra, però la morcilla és morcilla, no?) / La de Morcilla

La de Zorza (la zorza és carn adobada, molt típic de Galícia) / La de Zorza

Read more ...

dilluns, 24 de setembre del 2012

Disseny de formularis per passos

Una de les coses bones que té l’UX és que a força de veure i estudiar diverses maneres de com fer una cosa, al final et trobes que molts ja han arribat a la mateixa conclusió. I això únicament vol dir que les coses s’estan fent bé.
Una d’aquestes és la manera de presentar un formulari llarg, de forma que l’usuari no s’atabali, que la interfície el vagi guiant i sobretot que pugui veure per quin pas va.
Els primers en implementar això van ser els ecommerce amb el sistema de pagament online.
Avui dia per qualsevol aplicació o pàgina web que demani introduir dades és una bona pràctica trencar o dividir els formularis en passos i pàgines a mode de wizards (con els wizards per instal·lar programari).
Avui us presentem uns quants exemples de disseny de formularis per passos, que pensem que ens poden inspirar, els trobareu al web http://www.designtickle.com.


Read more ...

diumenge, 23 de setembre del 2012

Plantilles en paper per projectes mòbils

Via Smashing Magazine, gran web, gran comunitat i millor revista online de referència, us presentem avui una col·lecció de plantilles imprimibles creades i pensades específicament pels projectes d’aplicacions mòbils.
Podem descarregar el set de plantilles de forma totalment gratuïta, i segur que trobem la plantilla que necessitem ja que en tenim per a 7 plataformes diferents i en diverses resolucions.
Desarregueu el set


Read more ...

dimarts, 18 de setembre del 2012

This is responsive: Recursos per al RWD


Github és un repositori tipus SouceForge on de tant en tant podem trobar coses força interessants.
Un dels projectes que trobem allí desats és This is responsive, que ens ofereix un set de recursos per al Responsive web Design.
En aquest set hi trobarem:
Patrons i plantilles en html preparades per fer anar, diferents tipus de grids, menús i submenús i altres sistemes de navegació (breadcrumbs, per exemple)
I un llistat enorme de recursos i articles.
Molt interessant fer-hi una ullada







Read more ...

dilluns, 17 de setembre del 2012

Comparativa serveis d’emmagatzemament al núvol

Espai, és aquella cosa que el diccionari defineix com “Medi que hom es representa en principi com a il·limitat, continu i tridimensional i com a continent de tots els objectes sensibles, dins el qual aquests poden canviar de posició” y també com “Medi de referència indefinit de tres dimensions, l'estudi del qual és objecte de la geometria clàssica”, és una de les grans preocupacions pels que acumulem arxius i coses sense parar.
Com pot ser que tenint 5 discs durs USB encara no en tingui prou?
Bé com que el tema de l’espai és important avui us presentem una comparativa de serveis d’emmagatzemament al núvol, que es poden compartir i que estan a l’abast en qualsevol lloc i en qualsevol moment.
Quines són les característiques que més interessen d’aquests serveis?
  • L’espai que ofereix, tant gratuïtament com de pagament
  • La possibilitat de poder penjar-hi arxius grans
  • La possibilitat de compartir els arxius
  • La possibilitat de compartir a les xarxes socials
  • Que sigui multiplataforma, ha de poder funcionar amb qualsevol SO
  • Accés a través de dispositius mòbils
  • Accés fàcil, ràpid
Pels que no poden o no volen o no els cal pagar
DropBox

Un dels més populars i fàcils de fer anar.

Accés a l'aplicació: Molt fàcil
Espai disponible: 2 GB Gratuit
Compartir arxius: Sí
Compartir a les xarxes socials: Sí amb FB i Twitter
Multiplataforma: Sí
Accés a través de mòbils: Sí
Arxius grans: Fins a 2GB


SkyDrive

Microsoft s’ha posat les piles hi està creant tot un sistema al núvol interessantíssim, pensem en perdre la por als sistemes Microsoft.

Accés a l'aplicació: Molt fàcil amb el compte de Windows
Espai disponible: 7 GB Gratuit, és que més espai gratuït dóna
Compartir arxius: Sí
Compartir a les xarxes socials: Sí amb FB i Twitter
Multiplataforma: Sí
Accés a través de mòbils: Sí
Arxius grans: Fins a 2GB



Google Drive

Els amics de Google han creat tot un sistema al núvol d’aplicacions i recursos connectats, i tot va començar amb un cercador...

Accés a l'aplicació: Molt fàcil amb el compte de Google
Espai disponible: 5 GB Gratuit
Compartir arxius: Sí
Compartir a les xarxes socials: No
Multiplataforma: Sí
Accés a través de mòbils: Sí
Arxius grans: Fins a 5 GB



iCloud

Pels amics del Mac, només del Mac.

Accés a l'aplicació: Molt fàcil amb el compte de Apple
Espai disponible: 5 GB Gratuit. Els 5GB gratuïs del iCloud són només per imatges.
Compartir arxius: Sí
Compartir a les xarxes socials: No
Multiplataforma: Sí
Accés a través de mòbils: Sí
Arxius grans: No definit



Pels que sí poden pagar

ShareFile de l’empresa CITRIX: Aquí hi ha nivell.

Accés a l'aplicació: Molt fàcil.
Espai disponible: Aquí tot es paga, però hi ha una demo gratuïta
Compartir arxius: Sí
Compartir a les xarxes socials: No
Multiplataforma: Sí
Accés a través de mòbils: Sí
Arxius grans: Sí fina a 10GB



Pel DropBox i el ShareFile cal crear-se un compte nou.
Read more ...

dissabte, 15 de setembre del 2012

Frameworks per a la construcció de llocs webs responsives

Els frameworks per a la construcció de llocs webs responsives estan de moda. Ja n’hem parlat en altres articles, però sempre en surt algun de nou que té allò que li falta a un altre i definitivament val la pena seguir-ne l’evolució.
Avui us presentem un recull d’aquestes útils eines de construcció de llocs webs que s’adapten a tots els dispositius i mides de pantalla, que ens fan la vida una mica més fàcil i el mal de cap una mica més lleuger.

Yamb

Inclou:
  • Una grid fuïda
  • Un slideshow o presentació d'imatges responsives
  • Un menú desplegable amb la possibilitat de subnivells il·limitats. Per a les pantalles petites el menú desplegable es converteix automàticament en un quadre de selecció.


Responsive HTML5 Aeon
Inclou:
  • Plantilla HTML5 creada amb un grid a 12 columnes
  • Arxius javascript
  • Arxius CSS3

Responsive Grid System

Inclou:
  • Plantilles HTML
  • Arxius CSS
  • Un sistema de grid que permet fer anar qualsevol nombre de columnes, ja que es basa en percentatges.
Read more ...

dilluns, 3 de setembre del 2012

Entrevista amb Mireia Puig

Avui entrevistem a Mireia Puig,  Llicenciada en Dret, que treballa com a consultora de legislació sobre administració pública en l'entorn d'Internet i les TIC.
A molts de nosaltres tot allò que fa referència a lleis ens sona a klingon, però, és molt important saber que com a ciutadans, usuaris i consumidors tenim uns drets que ens han de respectar i uns deures que hem de complir.
Heu de saber també que la Mireia és una persona amb un gran sentit de l’humor, paciència i una capacitat increïble d’explicar conceptes sobre legislació i si teniu algun dubte sobre drets i deures, reials decrets, normes i lleis, no cal patir, ella els resol d’una manera ràpida i el que és encara millor entenedora, fins i tot els conceptes en llatí!!
Només resta dir que gaudiu de l’entrevista i a la Mireia moltes gràcies!!!!

Con beneficia als ciutadans i usuaris d'Internet la legislació vigent?
La legislació vigent, la veritat és que afavoreix bastant als ciutadans ja que els atorga una sèrie de drets i facultats que fins ara no disposaven. Facilitant-los l'accés a serveis amb la comoditat de poder accedir-hi a qualsevol hora i des de qualsevol lloc, evitant així el temps de desplaçament, les cues d'espera i per tant estalviant un temps que, com diu la cita "és or". Es facilita també la interacció entre els ciutadans i l'Administració pública, fomentant així la participació ciutadana. És cert que encara falta desenvolupar-ho bastant per estar a l'alçada d'altres països que ja ho tenen més implantat, però almenys, estem en el camí. No obstant, no tot és tan bonic.... cal dir també, que no sempre el fet de disposar d'aquest servei, signifiqui resoldre satisfactòriament la sol·licitud del ciutadà. Cal seguir treballant en el desenvolupament dels serveis que s'ofereixen, així com en la formació de les persones (molts usuaris no saben com accedir-hi) i evidentment, en la seguretat de les comunicacions.

Ens protegeix realment com a consumidors / usuaris / ciutadans? 
Bé, com tota legislació que es promulga, evidentment, es fa amb la finalitat de garantir la màxima protecció als ciutadans/usuaris/consumidors. El què no vol dir que sempre s'aconsegueixi. L'àmbit de les tecnologies és un sector que es desenvolupa molt ràpidament, i per tant sempre va un pas per endavant que la legislació, cosa que pot donar lloc a buits legals. És per això que cal que es vagi desenvolupant per tal d'adaptar-se als nous reptes que van sorgint.

Drets i deures per a l’administració pública i drets i deures per als ciutadans, és bo o dolent?
El fet que la proclamació de drets per als ciutadans comporti uns deures per a l'Administració (el deure de proporcionar els mitjans per tal de fer efectius els drets dels ciutadans), diria que, sens dubte, és bo ja que comporta una implicació de tots. No només de la ciutadania, sinó també dels poders públics, que canvien la seva visió arcaica d'administració on primava l'Administració pública i passen a tenir com a focus principal el ciutadà.

Con es que hi ha tant casos de corrupció en l'administració pública, els mitjans de comunicació en van plens, la nostra legislació té massa forats?
Al meu entendre, la corrupció no és conseqüència de la legislació, sinó de les persones. El problema no és la legislació sinó la consciencia i l'educació social. De mecanismes per "castigar" la corrupció ja n'hi ha. Tal com dius, últimament en veiem molts exemples. Hi ha judicis per diferents casos de corrupció. Senyal que la legislació en preveu la penalització. El problema doncs, diria que és la "sensació d'impunitat" que poden sentir alguns individus (que no vull dir que la tinguin, sinó que creuen tenir-la). No obstant, una cosa que si que potser es podria criticar és la "rapidesa" amb la que es desenvolupen les actuacions. De vegades, el fet de la famosa "lentitud de la justícia" és el que fa que hi hagi la sensació que hi hagi casos que quedin sense càstig.

Que s’aprovin lleis estatals i després lleis autonòmiques parlant del mateix ens beneficia o ens fa ballar el cap?
Tot i que pugui semblar contradictori, diria que les dues coses a la vegada, jejeje. Ens beneficia en el sentit que es permet la pluralitat i la particularitat de les autonomies. El fet que cada autonomia pugui legislar amb les seves pròpies especificitats, és bo per la riquesa cultural de cada autonomia. Ara bé, també és cert que de vegades pot donar la sensació de discriminació ja que determinades regulacions no són les mateixes per a tothom i pot semblar que no es respecta el principi d'igualtat, sobretot si no s'entén el motiu del per què es produeix aquesta diversitat de regulació. A part que, com bé dius, també pot comportar que ens "balli el cap" ja que és molt difícil, per no dir una tasca "quasi impossible" conèixer totes les legislacions amb les seves particularitats i si, això pot fer que es tingui la sensació que no saps mai què es pot fer i què no segons on et trobis.

Com a usuaris com ens podem protegir si les condicions legals d'un programa o d'una xarxa social estan subjectes a la legislació d'un altre país?
Actualment, hi ha molta protecció a nivell de països europeus i fins i tot, dels Estats Units, que potser és un dels països amb els què es tenen més relació i dels que tenen menys protecció del que són les dades de caràcter personal ja que tenen una visió diferent del què és la privacitat. Avui en dia però, està bastant solucionat per la via de la signatura d'acords com és "Safe Harbor" en el cas dels Estats Units, un marc per a regular els requisits que han de complir les entitats en matèria de protecció de dades que vulguin tenir relacions amb països de la Unió Europea. És important, abans de realitzar qualsevol tràmit online, llegir-se el què s'anomena la "lletra petita", és a dir, les condicions i termes generals que tota pàgina ha de contenir (cosa que, com tots sabem, la majoria de gent no fa jejeje). Jo recomanaria llegir aquesta informació i, en cas tenir dubtes o que una pàgina no disposi d'aquesta informació, el millor és desconfiar. Com es diu "Val mes prevenir que curar".

Ens signes un autògraf? 
Eso pà cuando nos veamos jajajaja!!!
Read more ...

divendres, 31 d’agost del 2012

Sneakpeekit fulls per la creació de wireframes en paper

Pels que no podem prescindir del paper a l’hora de fer un disseny o un wireframe i per a que no en passi allò del bloqueig de la pàgina en blanc (que no s’arregla fent anar un full en color) avui us presentem Sneakpeekit.
Sneakpeekit ens proporciona una plantilla descarregable i imprimible en paper per a la creació de wireframes y esbossos ràpids.

Els fulls s'adapten als sistemes de grids més utilitzats com 960 Grid System, 1140 CSS Grid, Less Framework 4, The Semantic Grid System, 978 Grid System, entre altres.
Podem descarregar un pdf de la plantilla que necessitem encaixada perfectament en un full DINA4 directament per poder-la imprimir i treballar.
Trobarem fulles (Sketch Sheets) per a web, tablets i dispositius mòbils.


Read more ...

dijous, 30 d’agost del 2012

The Tool Box: recopilació del millor de la web per disseny i desenvolupament web

The Tool Box és uan col·lecció de les millors aplicacions online, widgets i eines de disseny i desenvolupament web que podem trobar a Internet, ordenades i classificades.
Podem trobar generadors de tot tipus (text simular, colors, CSS), eines de tipografia, editors, icones, grids, recursos de disseny gràfic i molt més.
Interessant donar-li una ullada de tant en tant.


Read more ...

dimecres, 29 d’agost del 2012

Wirefy un framework per a prototipus Web de disseny web de resposta (responsive)

Wirefy és una col·lecció d'arxius CSS i JS per a crear de forma ràpida prototipus web amb l’afegit de que aquests prototipus estan basats en el Responsive Web Design.
Wirefy és independent d’estils gràfics de manera que els elements de disseny queden supeditats a l’estructura, la idea és que sigui una eina per al desenvolupament, proporcionant els estils més bàsics sense estar subjectes als elements de disseny gràfic.
Aquest framework o boilerplate està composat per una sèrie d’elements que serveixen tant per aplicacions de dispositius mòbils com per la web, així Wirefy respondrà a la visualització apropiada.
Wirefy es composa d’arxius descarregables que inclouent els elements comuns dins d’una estructura web con són:
  • Grids
  • Menús i submenús
  • Breadcrumbs o molletes
  • Paginacions
  • Images
  • Slideshows
  • Tipografia, incloent encapçalaments i icon fonts
  • Botons d’acció
  • Pestanyes
  • Taules
  • Formularis
  • Media queries

Read more ...

dimarts, 28 d’agost del 2012

Moqups: Una aplicació en HTML5 per crear Wireframes

Moqups és una aplicació construïda amb HTML5 online i gratuïta per crear wireframes, maquetes o prototips d'interfície d'usuari. L’aplicació és molt simple i intuïtiva i està basada en estàndards oberts.
Una eina molt útil per crear prototipus online de forma fàcil i ràpida.
Característiques

  • Més de 60 components definits que poden utilitzar
  • Permet exportar a PDF i PNG.
  • Podem utilitzar diferents tipus de grid de columnes per manipular objectes i elements.
  • Permet carregar imatges des del nostre ordinador.
  • Opció d’auto-save
  • Opcions de Desfer, Refer, Tallar, Copiar i Enganxar



Read more ...

dilluns, 27 d’agost del 2012

Tipus de lletra d’icones per interfícies d’usuari

Avui us presentem un recull de tipus de lletra d’icones que ens seran molt útils per a la creació d’interfícies d’usuari.
Els tipus de lletra d’icones o en anglés (icon fonts) són un tipus de lletra que contenen símbols i pictogrames enlloc de caràcters alfanumèrics.
Aquests tipus de lletra són com les fonts dingbat, però estan dissenyats específicament per a interfícies d’usuari. Com que no deixa de ser un tipus de lletra el podem fer anar amb les propietats font-face de CSS o amb cufon.
Les característiques d’aquest tipus de lletra:
  • Suport per a diferents navegadors (cross-browser suport (fins i tot IE6 , per exemple, pot representar les fonts web utilitzant el @font-face )
  • Són escalables (com qualsevol tipografia) a través del navegador
  • Es poden representar amb color diferents
  • Són susceptibles de propietats CSS com text-shadow o gradient
Aquí teniu també un tutorial de com fer anar les Icon Fonts: Tutorial de CSS-Tricks 

Icon fonts amb llicència Creative Commons
Typicons 

Entypo 

Amb altres llicències de lliure ús (caldrà consultar-les segons si es poden fer anar per només us  personal o comercial)

PulsarJS @FontFace


Iconic Icon Set 


IcoMoon
Read more ...

dimecres, 25 de juliol del 2012

Premis Blocs Catalunya 2012

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.

Procés de votació Premis Blocs Catalunya 2012
El procés de votació dels Premis Blocs Catalunya 2012 està obert, fins al 10 de setembre, a qualsevol persona que vulgui participar-hi. Per fer-ho, primer caldrà registrar-se com a usuari a la web de STIC.CAT. El registre és molt senzill i es pot fer amb un email i password, o també amb l’usuari personal de Facebook o Twitter. Totes aquelles persones que es van registrar per inscriure el seu bloc ara poden utilitzar el mateix usuari, sense necessitat de registrar-se de nou.

Un cop registrat, s’accedeix al panell d’usuari STIC.CAT des d’on poder veure el taulell de votació del Premis Blocs 2012, on hi haurà les 15 categories temàtiques. Quan l’usuari selecciona una categoria, apareixen els blocs que hi ha inscrits, ordenats alfabèticament i per perfils (personal, professional i corporatiu).

L’usuari disposa d’un total de 15 vots per repartir a raó de 1 vot per categoria temàtica, independentment de si es tracta d’un bloc personal, professional o corporatiu. Un cop votada una categoria, el vot quedarà enregistrat i no es podrà canviar.

El sistema informa en tot moment a l’usuari dels vots que encara no ha utilitzat, de les categories on ja ha votat i dels blocs pels quals ho ha fet.

El procés de votació no s’ha de completar en una mateixa sessió, sinó que es pot interrompre en qualsevol moment i reprendre’l posteriorment.

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

dimarts, 24 de juliol del 2012

Imcreator: Constructor de webs

Imcreator és una aplicació online per a poder crear un lloc web i no cal que sàpigues res de codi, ni de disseny, ni de servidors. Amb Imcreator una web és fàcil de crear, actualitzar, mantenir i promoure. Posseeix un ampli catàleg de plantilles ja fetes, algunes de les quals de molt bona qualitat tant en disseny con en estructura.
Imcreator és molt fàcil d’usar utilitza la tecnologia de Drag&Drop per afegir components al lloc web. També el manteniment de la pàgina és a mode de CMS, per tant, la creació de continguts es fa fàcil i intuïtiva.
Aquesta aplicació està enfocada cap a dissenyadors gràfics i professionals del món de la imatge i a més és gratuïta.


Read more ...

dilluns, 23 de juliol del 2012

Piktochart: Treu l’infografista que hi ha dins teu!!!

Pels que us agraden les infografies però, no teniu temps, ni inspiració o dissenyeu com un nen de 6 anys fart de donuts, avui us presentem Piktochart una eina online que ens ajudarà a crear infografies espectaculars a la manera del Prezi, de forma ràpida i fàcil i amb una versió gratuïta.

Amb Piktochart podem crear presentacions per involucrar al públic d'Internet. Tenim a l’abast un ampli catàleg de formes i temes, icones, vectors, text, podem carregar imatges des del nostre ordinador i exportar el resultat en diferents visualitzacions i compatir la nostra infografia a les xarxes socials.

Read more ...

dissabte, 21 de juliol del 2012

Comparativa aplicacions de feedback

Aquella cosa anomenada feedback, ah sí, saber què en pensen els nostres clients, que ens facin suggeriments, que es queixin, que donin la seva opinió, que ens critiquin (i és igual que sigui de forma constructiva o destructiva), en definitiva saber si ho estem fent bé.
Hi ha moltes maneres i les xarxes socials amb els seus “Me gusta”, “Pint it” i “retiuts” varis ens han ajudat bastant però, si el que volen és saber i conèixer la opinió i gustos dels clients podem oferir una forma de comunicació directa, a través d’aplicacions creades expressament per això.
Avui us presentem un recull d’aplicacions de feedback que podem afegir al nostre web, que no són intrusives ni demanen les mides ni el número de compte corrent (al client s’entén).

Kampyle
És una solució global de màrqueting, vendes i suport a l'usuari de manera que podem rebre els comentaris dels clients i enfocar-ho cap a la millora del nostre negoci, sabent què volen els nostres clients, com ho volen i si els agrada el que fem, mola eh?.
Kampyle ofereix serveis de xat i fòrum amb els clients des de l'aplicació a través d'un sistema integrat de resposta, així com un sistema automàtic que envia als nostres clients respostes pertinents en funció del tipus de feedback que demanin.
Un dels punts forts Kampyle són les seves eines d'anàlisi. L'aplicació s'integra amb Google Analytics, Omniture i Nedstate.
La llàstima es que no tingui versió gratuïta.



Get Satisfaction
Get Satisfaction és el Ferrari de les aplicacions de feedback. De fet crea una comunitat de suport a l’usuari global i fins hi tot una pàgina web només per a aquest fi.
L’aplicació ofereix una pàgina d'ajuda tipus fòrum on els usuaris poden fer preguntes, presentar idees, rebre i donar suport, votar i fer preguntes, etc.
S’integra amb Facebook de manera que es pot donat suport directament des de la pàgina de fans o amics.
És una molt bona eina, la llàstima és que no tingui versió gratuïta.



UserVoice
Amb UserVoice podem crear un fòrum simple on els clients envien i voten els comentaris. També poden accedir al fòrum a través d'un widget integrat al web o a través d'un fòrum dedicat.
Els clients envien idees, problemes o suggeriments i altres usuaris poden votar les idees. Les puntuacions que se’n derivin ens permetrà mesurar i veure què és el que volen realment els nostres clients i aïllar problemes o situacions particulars. UserVoice també ens permet respondre a les qüestions i idees.
Té una opció gratuïta.



UserEcho
UserEcho és una altra opció de comentaris de tipus widget integrable. L'aplicació crea comunitats on els clients poden deixar comentaris i tenen ple accés a les idees o els temes. Podem classificar la informació per gènere, respondre-hi, o difondre l'estat d'un suggeriment o idea. Amb UserEcho podem respondre les preguntes i comentaris i els usuaris hi poden accedir a través dels seus comptes de Facebook o Twitter.
Té una opció gratuïta i el tenim en castellà per als que l’anglès ens costa una miqueta.



Zopim
I pels que no volen massa complicacions també hi ha Zopim una plataforma de xat que podem afegir al nostre web i que té Plugins o addons per a WordPress, Magento, Drupal i OSCommerce.
Té una versió gratuïta que sempre va bé.
Read more ...