dissabte, 31 de gener de 2009

Etiqueta vi

Etiqueta de vi commenorativa de naixement o bateig
Read more ...

Recursos Vol. 6: Extensions pel Firefox

Hola que tal, Benvinguts a una nova edició dels recursos.
Edició especial extensions pel Firefox

Extensions pel Firefox útils
  • MeasureIT: mesura en pixels qualsevol element de la pantalla
  • ResizeIT: redimensiona la pantalla en diferents resolucions (800*600, 1024*768, etc)
  • Screengrab!: capturador de pantalla (per seccions, pantalla completa, regió visible, etc)
  • Cooliris: bonito, bonito
  • Firebug: l'eina definita pels desenvolupadors web
  • DOM inspector: també, també
  • TAW en un clic: extensió que permet validar l'accessiblitat d'una web online amb el TAW
  • Colorzilla: comptagotes que ens desvela quin color és aquell que ens agrada tant d'una web.
  • CSSViewer: visor de CSS
  • InspectThis: inspecciona un element concret amb el DOM
  • Web Developer: la barra d'eines pels desenvolupadors web
  • HTML Validator: extensió que valida l'HTML de la pàgina
  • FireFTP: client d'FTP per a Firefox, fàcil i intuïtiu.
Read more ...

divendres, 30 de gener de 2009

Recursos i serveis web gratuïts que ofereixen altres webs. Vol. 2

Continuem:
Serveis
La majoria dels serveis que trobem a Internet estan basats en el Google Maps.
Amb la combinació dels mapes i de qualsevol altre servei es creen eines molt útils i curioses.

Mapes
Utilitats dels mapes de Google Maps:
  • El temps
  • El trànsit
  • Geoposicionament: Serveis immobiliaris, Localització de botigues, hotels, restaurants, Viatges
  • Fotografies i Vídeos
  • Notícies
El temps:
Que Tiempo” és un web on es mostren les dades de l’Instituto Nacional de Meteorología utilitzant Google Maps.
El que el fa diferent és el de fet de poder integrar la predicció de la ciutat que vulguem a la nostra pàgina web mitjançant un API (copiar i enganxar el codi font que ens proporciona al nostre web).
També proporciona la possibilitat d’enviar un missatge de mòbil amb les prediccions dels propers dies de forma totalment gratuïta.

El trànsit
La DGT mostra l’estat del trànsit utilitzant Google Maps
Podem consultar les últimes incidències de trànsit
Desar les consultes que haguem fet
Proposa una eina de ajuda a la planificació d’un viatges a més de una estimació aproximada del temps recorregut entre dos punts.

Geoposicionament
  • Viatges: Wikiloc és una eina que permet compartir amb altres usuaris rutes GPS i punts d’interès als mapes.
  • Serveis immobiliaris: HousingMaps és un servei immobiliari basat en els mapes de Google.
  • Localització de botigues, hotels, restaurants:
    Findbyclick
    troba la situació de botigues com Starbucks, Barnes & Noble, Borders, i Tim Horton’s.
    Fastfoodmaps
    cerca al mapa restaurants de menjar ràpid.
Fotografies i Vídeos:
Flickrvision fusió de Flickr i Google maps on es poden pujar les fotos en temps real.
Flickriver és una aplicació web que permet explorar les fotos de Flickr d’una altra manera, per artista, país, lloc on es van fer, etc. Les fotos es van mostrant de forma continua tipus “scroll infinit”

Notícies
AP News: Les notícies de Associated Press geolocalitzades.

Read more ...

dijous, 29 de gener de 2009

Recursos Vol. 5: Eines online

Hola que tal, benvinguts a una nova edició dels recursos.
Edició especial eines on-line per a disseny: Tiltshiftmaker

Les paraules "tilt-shift" descriuen una tècnica fotogràfica usada per a crear efectes especials en les fotografies. Les lents de les càmeres que s'usen per aquesta tècnica, es poden moure per poder posar-les en diferents angles.
Això fa que es canvïi el focus de la imatge donant lloc a fotos d'aspecte molt atractiu.

I com són aquestes fotos?
Doncs són fotos que tenen aspecte de miniatures, és a dir, imatges reals però que semblen models a escala.
Existeixen objectius especials per a poder realitzar aquestes fotos.

Però també existeix software per a editar imatges i fer-hi aquest efecte.

tiltshiftmaker és una eina online i gratuïta per a poder afegir a les imatges l'efecte tilt-shift.
Com totes les eines on-line ens permet carregar una imatge des del nostre ordinador o des d'una URL externa.
També modificar els nivells de desenfocament i poder desar-la al nostre ordinador.
Un eina ràpida, útil, i curiosa.

Exemple de l'efecte tilt-shift

Read more ...

dimecres, 28 de gener de 2009

Llibres d'estils Vol. 3

Continuem amb la tercera part del document

Llibre d’estils per web

Des de el punt de vista de Creativitat i Disseny, definirem el llibre d’estils tenint en compte els següents aspectes i el seu desenvolupament:

Disseny de la pàgina

  • Jerarquia visual
  • Consistència
  • Dimensions de la pàgina
  • Llargada de la pàgina
  • Disseny de la retícula de la pàgina
  • Capçaleres i peu de pàgina
  • Distribució de la pàgina
  • Distribució dels continguts
  • Pàgina fixa o pàgina líquida
  • Consideracions generals al disseny
  • Accessibilitat

Tipografia
  • Característiques dels tipus emprats en el web
  • Contingut de la estructura i lògica visual
  • Fulls d’estil en cascada
  • Llegibilitat
  • Alineament
  • Longitud de les línies
  • Espais en blanc
  • Tipus de lletra
  • Mida de la lletra
  • Color
  • Tipus gràfics

Estil editorial
  • Organització dels textos
  • Escriure per al web
  • Tipus de continguts
  • Llenguatge emprat
  • Idiomes
  • Títols i subtítols
  • Enllaços
  • Referències
Gràfics
  • Característiques dels gràfics del web
  • Paleta de colors
  • Resolució de pantalla
  • Formats de imatges
  • Icones
Multimèdia
  • Aplicacions
  • Estratègies web multimèdia
  • Descripció amb només àudio
  • Passis de fotografies
  • Vídeo
  • Animacions
  • Accessibilitat
Continuarà...

Articles relacionats:
Llibres d'estils Vol. 1
Llibres d'estils Vol. 2
Read more ...

divendres, 23 de gener de 2009

La publicitat intel·ligent



Anomenen publicitat intel·ligent a aquells anuncis que podem trobar en pàgines i que estan relacionats amb el contingut de la plana que estem visualitzant de manera que l’usuari no els reconeix com a “spam” ni com a publicitat intrusiva.
Google va ser el primer que va introduïr aquest nou concepte publicitari dins de per exemple gmail.
Els usuaris actuals d' Internet són, segons Jacob Nielsen, més cruels que mai: escanejen les pàgines en la cerca d'allò que volen o necessiten, sense prestar atenció a res més.
És per això que cada cop més els usuaris són més exigents i sobretot menys pacients amb la publicitat que troben en la web.
Els anuncis intrusius tipus pop-up, animacions que es deplacen per tota la pantalla, etc, són rebutjats pels usuaris i són uns dels motius pels quals algunes pàgines deixen de ser visitades o tenen alts rangs d'abandonament.
Una de les idees més acceptades a l'hora de col·locar publicitat dins del web, és fer-ho de forma gairebé discreta, sense interrompre la lectura dels continguts del web i sobretot oferint publicitat relacionada amb allò que ens ofereix el web que estem visitant.

Si ens avancem una mica més en el tema de la web semàntica, podriem arribar a trobar pàgines que ens ofereixen productes o serveis segons les nostres preferències a l'hora de navegar per Internet, és a dir, segons les pàgines que habitualment consultem.
També pàgines que guardin el nostre historial de navegació i cerca, per a poder oferir-nos un millor servei i, com no, publicitat relacionada.
Read more ...

Recursos Vol. 4: Inspiració i recursos

Read more ...

dilluns, 19 de gener de 2009

Estudi sobre l'accessibilitat dels portals Web dels Ajuntaments de capitals de província

Via discapnet us presento un estudi sobre l'accessibilitat en el portals dels Ajuntaments.

Criteris utilitzats per l'anàlisi
  • Alineació de taules per a maquetar
  • Us de fulls d’estil CSS
  • Format de taula de dades
  • Us de formularis
  • Us dels enllaços
  • Text alternatiu en les imatges
  • Contrast de color en les imatges
  • Us de marcs
  • Us d’scripts
  • Us d’encapçalaments
  • Validació de codis
  • Valor semàntic del color
Les conclusions són en general positives, sent l'Ajuntament de Madrid i l'Ajuntament de Pamplona els més valorats.

Enllaços relacionats:
Estudi sobre l'accessibilitat dels portals dels Ajuntaments
Versió de les conclusions en HTML
Read more ...

Directrius d’Accessibilitat al Contingut de la web 2.0 (WCAG)

Directrius d’Accessibilitat al Contingut de la web 2.0 (WCAG)
Al desembre de 2008 es van aprovar com a recomanació les Directrius d’Accessibilitat al Contingut de la web 2.0. Malgrat que encara estan en fase de desenvolupament, podem apreciar la perspectiva general de fonaments de disseny.
L’objectiu general és crear contingut web que sigui perceptible, operable i comprensible pel més ampli rang d’usuaris i compatible amb el seu ampli rang de tecnologies assistencials, ara i en el futur.
Els principis bàsics inclouen:
  • El contingut ha de ser perceptible.
  • Els elements de interacció presents al continguts han de ser operables.
  • El contingut i els controls han de ser comprensibles.
  • El continguts ha de ser el suficientment robust per a que funcioni amb les tecnologies actuals i futures.
Per a aquests quatre principis hi ha una sèrie de recomanacions
Perceptible
  • Proporcionar textos alternatius per a cada contingut no textual, de manera que pugui ser substituït pels usuaris en funció de les seves necessitats.
  • Proporcionar alternatives sincronitzades per als continguts multimèdia dependents de temps.
  • Crear continguts que pugui ser presentat de diferents formes, sense perdre informació o estructura.
  • Facilitar als usuaris que puguin veure o escoltar el contingut, separant el fons del primer pla.
Operable
  • Disposar totes les funcionalitats accessibles des de el teclat (navegació tabular).
  • Proporcionar als usuaris amb necessitats especials temps suficient per a llegir i fer ús del contingut.
  • Proporcionar formes amigables de navegar, trobar continguts i identificar la jerarquia del lloc web als usuaris amb necessitats especials.
Comprensible
  • Proporcionar el text dels continguts de tal forma que sigui llegible i comprensible
  • Construir llocs web que operin i es mostrin de forma previsible.
  • Ajudar als usuaris a evitar i corregir errors.
Robust
  • Maximitzar la compatibilitat amb els agents d’usuari actuals i futurs, incloent tecnologies assistides.
Enllaços recomanats:
W3C Directrius d’Accessibilitat al Contingut de la web 2.0 (WCAG) en anglès
torresburriel.com Resum i explicació de les directrius
sidar.org Versió esborrany de les directrius en castellà
Read more ...

diumenge, 18 de gener de 2009

Principis del disseny centrat en l'usuari Vol. 2

Continuem:

Retroalimentació apropiada pel sistema: El sistema ha de respondre apropiadament a les accions de l’usuari. Cal que l’usuari sàpiga què passa. L’estat d’un sistema (en espera, carregant, comprovant, transferint dades, etc.) cal que estigui sempre disponible per l’usuari.

No descuidar l’estètica: L’ús de determinats atributs visuals o auditius, concentren l’atenció de l’usuari en la tasca que està desenvolupant. Cal que aquests atributs segueixin una estètica agradable i entenedora, es recomanable l’ús convencions estètiques i visuals (icones, botons, fletxes, etc.) que contribueixin a millorar la presentació de la informació.

El disseny s’ha de caracteritzar per la seva simplicitat: La interfície ha de ser simple (que no simplista), fàcil d’aprendre i d’usar, amb funcionalitats accessibles i ben definides. L’ús del disseny ha de ser fàcil d’entendre, independentment de l’experiència, els coneixements, les capacitats lingüístiques o el nivell de concentració de l’usuari.
El disseny ha de comunicar la informació necessària a l’usuari de forma efectiva, independentment de les condicions ambientals o de les capacitats sensorials de l’usuari.

És fonamental seguir una metodologia de disseny: Cal tenir una actitud centrada en l’usuari en les etapes inicials i durant el desenvolupament del projecte. L’equip de disseny ha de cobrir tots els aspectes: desenvolupament, expressió, representació, factors humans, usabilitat, etc.

La metodologia pot seguir els següents punts:

  1. Definició clara dels objectius, marc de treball, documentació, etc.
  2. Prototipus del disseny i fluxe de tasques
  3. Participació de l’usuari en el procés de disseny, presentació i test
  4. Redisseny del producte si convé. Cal destacar que en totes les etapes del disseny s’han d’aplicar les tècniques d’avaluació d’usabilitat que es creguin més convenients

Hem d’entendre a l’usuari: Les diferències entre els usuaris, la seva experiència en l’ús d’Internet, cal que la presentació sigui igual per a tots?, com poder garantir que una presentació és la més adequada? No tots els usuaris són iguals, ni tenen els mateixos coneixements ni necessitats. Ens podem plantejar la solució a aquestes preguntes com un repte.
De fet resultaria bo presentar múltiples opcions per a l’expressió i el control. Les preferències i necessitats particulars sempre trobarien, així, els mitjans i opcions per permetin a l’usuari mostrar-se de la forma que resulti més efectiva.

Cal tenir en compte que la realització d’un tasca determinada no sempre complirà amb les expectatives d’èxit a les que s’intenta arribar. La motivació per a la realització d’una tasca pot venir donada per la novetat, la informació en si, el procés de l’aprenentatge, les possibilitats de millora, o la simple satisfacció personal. Així les estratègies d’aprenentatge han de suportar diferents nivells de capacitat, preferències i interessos, alhora que proporcionen flexibilitat d’opcions.

De vegades cal renunciar a alguns aspectes del disseny: Cada aspecte addicional que s’inclou en el sistema afecta potencialment a la seva complexitat, estabilitat, manteniment, capacitat d’acció, costos, etc. Per tant cal que siguem conscients que un redisseny en major o menor escala pot estar condicionat per algun factor extern.

Articles relacionats:

Principis del disseny centrat en l'usuari Vol. 1
Disseny centrat en l'usuari

Read more ...

divendres, 16 de gener de 2009

Tendències en disseny web per al 2009

Via smashingmagazine.com us presento aquest article sobre les tendències en disseny per aquest any que acaba de començar.


Us faig resum del més destacat:

Tipografia:
  • Lletres impreses: és una tendència cada cop més usada tant en títols com en icones
  • Mida de la font gran: aquesta és una tendència que ja hem vist al llarg dels últims 2 anys i encara es manté, cal destacar l'ús de fonts no de sistema per fer títols (imatge)
Maquetació:
  • Padding, padding, padding: molts espais entre blocs de continguts, donant resultat a interfícies molt netes i senzilles i visualment molt atractives.
  • Imatges: transparències amb PNG, veiem que cada cop s'usa més el PNG.
  • Look magazine: és el que està més de moda ara mateix, títols destacats, informació al dia, imatges amb rellevància, una barreja encertada entre portal i blog.
Jquery:
  • Slideshows de fotos: les galeries de imatges
  • Lightboxes: o la reinvenció dels pop-ups
Read more ...

dijous, 15 de gener de 2009

Recursos Vol. 3: Inspiració

Hola que tal, benvinguts a una nova edició dels recursos
Special Inspiration Edition

Inspiració per fer capçaleres
Inspiració per fer peus de pàgina
Plantilles XHTML/CSS gratis
Inspiració tipografia
Inspiració en menús de navegació

Val la pena fer-hi una mirada, Chuck Norris ens els recomana i els aprova
Read more ...

dilluns, 12 de gener de 2009

Principis del Disseny Centrat en l’Usuari Vol. 1

Principis del Disseny Centrat en l’Usuari

El disseny, sigui quin sigui el seu objectiu, ha de basar-se en l’usuari, i cal tenir en compte que l’usuari pot ser qualsevol persona (Disseny per a Tots).
De fet els principis del Disseny Centrat en l’Usuari no són més que una reformulació dels principis més elementals de la Ergonomia Clàssica, adaptada a les necessitats de les noves tecnologies de la informació i la comunicació (TIC).
Aquests principis, ens han de servir per a incrementar la cura amb la que s’ha de dissenyar per als usuaris, donat es gairebé inviable fer un producte 100% accessible. Per tant el seguir aquests principis en ajudarà a fer que la experiència de l’usuari tingui un grau més alt de satisfacció, sense descuidar els aspectes visuals, estructurals o tècnics que requereixi el projecte.

El control de la situació ha d’estar en mans de l’usuari: L’usuari ha d’iniciar i controlar les tasques, per tant la interfície cal que sigui el més interactiva possible.

Cal un plantejament directe: L’usuari ha de comprovar com les seves accions afecten a la sortida del sistema. L’accessibilitat de la informació i de les opcions reduïren la carrega mental de l’usuari. Cal dissenyar una interfície intuïtiva, ens ajudaran les metàfores visuals, ja que és més fàcil associar-hi un significat a un objecte, sempre hi quan la associació resulti apropiada.

La consistència és una part indispensable en el disseny: Entenem consistència com l’estabilitat o solidesa d’un objecte o producte i aquesta s’ha de traduir com a facilitat d’ús. Dins de la interfície un comandament ha de realitzar sempre les mateixes funcions en un mateix entorn.

Cal fer possible la recuperació dels errors: El disseny ha de minimitzar els riscos i les conseqüències adverses de les accions accidentals o involuntàries. La idea és contemplar els potencials errors dels usuaris. És important que l’usuari sàpiga què ha passat i com solucionar-ho, cal un aprenentatge assaig - error.

Continuarà...
Read more ...

dimecres, 7 de gener de 2009

Els millors dissenys del 2008

Els millors dissenys del 2008
Via Webdesignerwall.com

A destacar els següents punts dels millors dissenys

Dissenys en 2 columnes que acaben sent 3 en percentatges, per exemple: 60-40 que acaba sent 60-20-20.
Tipografia, tipografia, tipografia: utilització de diferents tipografies o una de sola en diferents mides i estils (negreta, cursiva, amb diferents espaiats entres lletres i paraules) i utilització de títols de seccions en imatge amb la tipografia especifica del títol del web o fent anar una font no de sistema només per als títols.
Imatges de fons que conformen una imatge sencera amb el web
Estructura molt neta i clara bon XHTML i millor CSS.
Menú horitzontal superior: és la clara tendència de tots els webs
Caixes de formulari: cada cop més originals i adaptades al disseny del web (cercadors i formularis de contacte)
Read more ...