dimarts, 31 de gener del 2012

Responsive Web Design: Exemples i recursos

Un llistat de webs que apliquen Responsive Web Design via http://webdesignhabits.com 
Un altre llistat de llocs web
Tutorial de com crear un plantilla
Responsive Web Design. Llibre escrit per Ethan Marcotte i publicat per A Book Apart, aquest llibre és un recurs genial per aprendre a dissenyar llocs web “Responsives”. Abasta tots els fonaments del Responsive Web Design, el sistema de grids o quadícules, les imatges flexibles i les Media queries.
Aquí acaba aquesta sèrie d'articles sobre el Responsive Web Design. Esperem que us hagin agradat!!


Chuck Norris els aprova:

Read more ...

dilluns, 30 de gener del 2012

Responsive Web Design: Conclusions i bones pràctiques

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.
  1. 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). 
  2. 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. 
  3. 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
Read more ...

dissabte, 28 de gener del 2012

Anàlisi del web 20milproductos.com

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

divendres, 27 de gener del 2012

Responsive Web Design: Recursos i tècniques

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

dijous, 26 de gener del 2012

Responsive Web Design: Elements

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

dimecres, 25 de gener del 2012

Responsive Web Design: una aproximació

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

dimarts, 24 de gener del 2012

Error desconegut


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

dilluns, 23 de gener del 2012

Paranormal activity

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


Read more ...

dissabte, 21 de gener del 2012

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

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


Read more ...

Amics i companys que s'actualitzen

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

Read more ...

dilluns, 9 de gener del 2012

Plantilles per Blogger

Ú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 
Read more ...

dissabte, 7 de gener del 2012

Eines online per dibuixar i pintar

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.

Read more ...

dijous, 5 de gener del 2012

Lost Type

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.


Read more ...

dimecres, 4 de gener del 2012

Logotype Maker

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


Read more ...

dimarts, 3 de gener del 2012

Busuu: aprendre idiomes online

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


Read more ...

dilluns, 2 de gener del 2012

Weather Zombie, quin temps fa?

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.


Read more ...