divendres, 25 de desembre de 2009

Bones pràctiques web: Vol. 3

Taules
Les taules es composen d’un conjunt de files i columnes de cel•les que es poden omplir amb text i gràfics. Les taules les utilitzarem per organitzar i presentar informació de manera estructurada, però mai per a maquetar continguts.
Justificació de les taules
S’aconsella posar sempre títol i resum de la taula.
Alineació: Selecció de l’alineació de la taula esquerra, centre o dreta.

Imatges
Les imatges reforçaran els textos i donaran “color” a la pàgina, amenitzen la lectura i aclareixen conceptes.
Les imatges les utilitzarem per a completar la informació dels textos.
Es desaconsella totalment l’ús de imatges de fons ja que dificulten la lectura i distreuen a l’usuari.
Text alternatiu: Breu descripció de la imatge. S’aconsella afegir sempre el text alternatiu per les imatges.

Enllaços
Els enllaços són parts de text les quals porten a una nova ubicació. En el llenguatge Web són molt importants, ja que són la essència de Internet.
Quan volem posar un enllaç, cal que ens assegurem que l’usuari el reconeixerà. Tant si és un enllaç intern, un enllaç extern o un enllaç a un document descarregable, cal que escrivim un text d’enllaç el suficientment descriptiu.
Cal evitar les expressions del tipus “Fes clic aquí”
Es recomana que el nombre de paraules que formin l’enllaç no superi de 4 paraules i que aquestes estiguin en una mateixa línia.

Imatges com enllaços

Utilitzar imatges com enllaços de vegades pot resultar molt més intuïtiu per a l’usuari. Tot i això no s’aconsellen ja que és possible que:
  • l’usuari no entengui la relació imatge – significat
  • l’usuari no entengui la imatge com un enllaç
  • la càrrega de la pàgina pot ser més lenta
  • que es dificulti la visibilitat d’alguns elements
continuarà...
Read more ...

dissabte, 19 de desembre de 2009

The Smashing Book

Després de mesos esperant ja tenim aquí l'Smashing Book.
Els d'Smashing Magazine han publicat un llibre molt interessant i actual sobre el món web.
300 pàgines sobre:
  • Interfícies web
  • CSS
  • Tipografia
  • Usabilitat
  • Optimització de llocs web
Molt recomanable
Read more ...

Bones pràctiques web: Vol. 2

2ª Part: Recursos Disponibles

Títols i subtítols (encapçalaments)
Els títols són un element crucial en la estructuració de cada pàgina. Tant des del punt de vista de codi com de presentació, la seva utilització estableix la jerarquia de continguts i facilita la navegació, així com la indexació en els cercadors.
Els encapçalaments ens ajudaran a dividir paràgrafs i a introduir conceptes.

Els encapçalaments aporten molta informació en poques paraules i ens permetran estructurar els continguts en unitats informatives més petites que en facilitaran la lectura.
Amb l’ús d’encapçalaments podrem organitzar el text. Ens ajudaran a estructurar millor els textos, donen mides de lletra proporcionals a la importància de cada part, millorem la lectura en dispositius adaptats i la presencia en cercadors.
Useu encapçalaments per a introduir conceptes, idees, paràgrafs, en els textos.

Llistes i enumeracions
Sempre que ens sigui possible és correcte la presentació de la informació en format de llista (numerada o de pics) amb apartats i subapartats. Les llistes es llegeixen millor que els paràgrafs.
Exemples de llistes:
  • Llistes d’enllaços
  • Llistats d’adreces

Frases i Paràgrafs
Cal usar frases senzilles, no cal que es compliquin innecessariament les frases.
Un paràgraf, una idea. Pensem si podem dividir en dos un paràgraf de 6-8 línees.
La norma ens aconsella:
  • Títols: 8 paraules o menys
  • Frases: de 15 a 30 paraules
  • Paràgrafs: de 40 a 70 paraules
  • Planes i documents: 500 paraules o menys

Justificació del text
Un recurs que facilita la lectura del text en les pantalles d’ordinador és l’alineació a l’esquerra, no obstant això, es disposa de diferents funcionalitats de modificació del paràgraf, però si n’escollim una, cal que la fem servir igual per tot el web.


Negretes, cursives i subratllats
Utilitzar la negreta i la cursiva sobretot per les paraules clau i també per les parts més importants del text.
  • Negretes: ens serveixen per remarcar i destacar informació d’interès i paraules clau.
  • Cursives: estilísticament per donar èmfasi a una paraula o frase, i també per mots especials.
  • Subratllat: molt utilitzats en el llenguatge web per mostrar enllaços.
Usarem aquests recursos per a destacar paraules clau en els textos.

continuarà...
Read more ...

dijous, 17 de desembre de 2009

Bones pràctiques web

Bones pràctiques a l'hora d'introduir continguts en un web, seguint criteris d'accessibilitat i usabilitat.

En les pantalles d’ordinador els textos es llegeixen més lentament i amb més dificultats que els textos impresos. Val a dir també, que els usuaris d’Internet cada cop són més impacients i escanegen la pàgina en comptes de llegir-la.
Escanejar la pàgina vol dir fer un escombrat a la pantalla d'esquerra a dreta i de dalt a baix, per això en ocasions es parla de la zona calenta de la pàgina (dalt i a l'esquerra), perquè és el primer punt on l'usuari posa la seva mirada per a iniciar la lectura o visió del web.
És per això que la distribució dels continguts dins d’una plana web, cal fer-la seguint unes petites normes o bones pràctiques que ens ajudaran en la tasca de maquetació dels continguts i també facilitaran la lectura i la cerca de conceptes en el nostre web per parts dels usuaris.

1ª Part: Escriure per al web
Recomanacions per tal d’escriure els continguts pel web:
  • Els continguts cal que siguin informatius, concisos i ben estructurats.
  • Utilització d’un llenguatge senzill, accessible, no tècnic.
  • Agrupar la informació relacionada, per a ajudar a l’usuari a trobar la informació interessant d’un determinat assumpte més fàcilment.
  • No abusar de les majúscules, dificulta la lectura de les paraules.
  • Cal tenir especial cura amb l’ortografia i la gramàtica.
  • Brevetat
continuarà...
Read more ...

dimecres, 9 de desembre de 2009

Google Chrome Extensions

Per fi extensions pel Google Chrome
En destaquem:
Firebug
Web Developer (mini)
Cooliris
FlashBlock
Extensions de les aplicacions de Google més populars:
  • Picassa
  • Gmail
  • Google Wawe
  • Google Docs
  • Google Reader
i d'altres RSS, música, facebook, twitter, etc.

Interessant fer-hi una ullada.... per si hem de deixar de banda el Firefox....
Read more ...

dijous, 3 de desembre de 2009

Tendències en disseny web pel 2010

Recull de tendències en disseny web pel 2010 via WebDesignerLedger

Disseny:
  • Tipografia
  • Encapçalaments i logos
  • Estil retro
  • Estil minimalista
  • La importància de les imatges
Estructura
  • Estructura tipus revista (magazine)
  • Perspectives
  • Monopàgina
Tecnologia
Scripts que ens converteixin les fonts en imatge
Read more ...

Recursos Vol. 30: Inspiració!

Read more ...

dimecres, 4 de novembre de 2009

Anàlisi del web innova360.cat

Amb motiu de la celebració del Fòrum d'Innovació Innova 360º a Mataró del 19 al 22 de novembre, s'estrena la nova web www.innova360.cat.
La plataforma on s'ha desenvolupat el web és Joomla! bon sistema de gestió de continguts i de codi obert per a publicar continguts al World Wide Web i a intranets i alhora és un framework de desenvolupament d'aplicacions web de tipus MVC.

Estructura

Es presenta una estructura molt clara i neta tant en la portada com en les pàgines interiors. En la majoria de les pàgines hi ha poc scroll vertical, que beneficia la presentació de la informació.

Visualització amb diferents navegadors
La visualització ha estat satisfactòria amb els següents navegadors:
  • Internet Explorer 7 i 8
  • Firefox 3.5.4
  • Google Chrome
  • Safari
En un entorn Windows XP SP3

Destaquem:
  • La possibilitat de compartir continguts via xarxes socials: Twitter, Myspace, Facebook, amés de les habituals xarxes de distribució de continguts tipus mename, digg, etc.
  • La possibilitat d'escoltar els textos a traves de vozme
  • Un disseny gràfic molt acurat, net, clar, visualment efectiu i seguint les tendències actuals en disseny web.
  • Ens agrada molt la presentació dels temes a tractar i l'organització de les activitats per cerques, tant per espais com per dies
  • El cercador, ens ofereix els resultats de la cerca en una finestra emergent en jquery a mode de lightbox, de la cerca més coincident i ens oferix la possibilitat de veure tots les resultats de la cerca en una altra pàgina en la que podem fer un cerca avançada per paràmetres
  • La possibilitat d'introduir el nostre codi postal a la zona del "com arribar" i que ens redireccioni a GoolgeMaps per veure la ruta.
  • La utilització d'un sistema de gestió de continguts de codi obert.
  • La zona privada d'usuari, que permet un gran personalització.

Coses que creiem que es podríen millorar:
URL netes, no ens agrada gaire veure un index.php/nom_de_la_seccio
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

Read more ...

dimarts, 3 de novembre de 2009

El futur de la web

El futur de la Web d'aquí a 5 anys
Interessant article de Noupe sobre el futur de la web i de la tecnologia en general, 15 prediccions sobre el futur de la web que ens podem trobar d'aquí a 5 anys.
1. Micropagaments per continguts
2. Monitors ultrapanoràmics per desplaçament horitzotal (és una tendència en disseny web)
3. Publicacions online molt més interactives
4. Més col·laboració en temps real
5. Web semàntica (la gran deconeguda)
6. Més aplicacions pel mòbil
7. Més respecte pels estandards web
8. Mes seguretat contra pishing, spam i d'altres, amb perdó, merdes
9. Més social Apps
10. TV online de més alta qualitat
11. Web Apps per millorar la nostra vida
12. SEO menys important
13. Sistema operatiu ONLINE
14. Interfíces d'usuari personalitzades
15. La web serà el centre d'informacio i distribució de continguts

Esperem que en futur no haguem de:
1. Continuar creat pedaços per l'IE6
2. Passar-nos hores i hores retocant un flash fet amb una versió anterior
3. No haver de demanar ajuda al Firebug per veure el text d'una web fet una font rara (ho sento però odio la helvetica neue)
4. Creant estudiats arbres de continguts per a que et facin prosar com a primer item de menú Inici :(

En continuarem parlant...
Read more ...

dimecres, 28 d’octubre de 2009

Blog2Print

De les tres coses que cal fer a la vida, la d'escriure un llibre ja no és problema, si tens un blog, pots tenir un llibre.

Blog2Print és un servei online que et converteix el teu blog en un llibre imprés.
Pots escollir diferents portades predissenyades o fer la teva pròpia portada. Un cop l'aplicació converteix el blog et mostra una previsualització.
Així ha quedat limitnordest mmm.... 69 pàgines no està malament...

En tapa dura o tova té diferents preus, algú me'l patrocina? :P
Read more ...

dissabte, 24 d’octubre de 2009

Recursos Vol. 29: CSS3

Hola que tal. Benvinguts a una nova edició del recursos, edició especial CSS3

Text multicolumna amb CSS3
Interessant article sobre maquetació text en columnes amb CSS3.
Malauradament amb Explorer no funciona

6 novetats de CSS3 que poden ser implementades, ja que són compatibles amb la majoria de navegadors web:

1. Colors transparents
2. Corners
3. Ombra en el text
4. Ombra en una caixa de text
5. Múltiples backgrounds
6. Rotació d'elements

Guia de referència ràpida de CSS

70 tutorials de CSS3 i HTML5
Read more ...

dimecres, 14 d’octubre de 2009

Curiositats

Les eines noves del Gmail:

Noves funcions:
Heu topat amb el paio equivocat?
No us oblideu del paio
.....
Read more ...

Recursos Vol: 28: Tipografia i CSS

Hola que tal, benvinguts a una nova edició dels recursos.
Edició especial Tipografia i CSS

Com usar el encapçalaments? (Vaja, si era molt fàcil!)

Uns quants exemples d'ús de tipografies per fer-no "bonic"
Tècniques avançades de tipografia i CSS
La mida del text "aquella gran desconeguda"
Interessant article sobre tipografia, CSS i contrast; és a dir, amb quines tècniques comptem per a diferenciar els diferents textos del web
  • Mida (encapçalaments, etc.)
  • Classificació de la font (serif, sans serif)
  • Color: color pla, opacitat
  • Recursos de CSS (uppercase)
  • Estil i decoració
  • Espais (oh, beneïts espais): padding i margin, letter-spacing, line-height, etc.


Per acabar unes quantes fonts que faran el nostre disseny més net (allò que en diuen Clean Design)
Read more ...

dilluns, 12 d’octubre de 2009

Format SVG

El format SVG és una especificació per a desciure gràfics vectorials bidimensionals, tan estàtics com animats en format XML.
Les imatges o textos en format SVG al ser imatges vectorials tenen molta més qualitat, amés les podem escalar sense que aquestes perdin qualitat, a diferència del mapa de bits.
Exemple (extret de Wikipèdia)

Navegadors web:
  • Firefox: implementa SVG en forma nadiua des de la versió 1.5. En un principi el compliment amb aquest estàndard demanava un alt consum de processador. En la nova versió 3.5 de Firefox el render SVG s'ha modificat i millorat.
  • Opera: al igual que Firefox també implementa SVG en forma nadiua, però amb poc consum de processador. La versió 9.5 Beta, incorpora la possibilitat de cridar en forma externa una imatge en format svg.
  • Internet Explorer: No implementa SVG, i cal aconseguir una extensió d'Adobe. Aquest mòdul no permet la coexistencia de SVG amb HTML (XHTML).
  • Safari: La versió 3.1 implementa SVG tan per a imatges com per a text.
  • Chrome: Implementa SVG de forma nadiua des de la seva primera versió.

Per a saber-ne més:

W3C gràfics SVG
Especificació W3C
Read more ...

diumenge, 11 d’octubre de 2009

Taula de compatibilitats entre navegadors

Taula comparativa de navegadors Web amb suport HTML5 CSS3, SVG i altres tecnologies

Via Fyrdility us presento una taula comparativa de navegadors web en el suport de noves tecnologies web.
El que podem extreure de la taula és que cap navegador està encara preparat per les especificacions de HTML5, CSS3, SVG, accessibilitat per AJAX, etc.
Segons aquesta taula podem comprovar que el navegador web més ben preparat de cara al futur, és Google Chrome, seguit de Safari i Firefox.
Read more ...

dijous, 24 de setembre de 2009

Sistemes de Navegació Accessibles Vol. 5

Les WCAG 2.0 i els sistemes de navegació

Els principis bàsics inclouen:
  • Principi 1: El contingut ha de ser perceptible.
  • Principi 2: Els elements de interacció presents al continguts han de ser operables.
  • Principi 3: El contingut i els controls han de ser comprensibles.
  • Principi 4: El continguts ha de ser el suficientment robust per a que funcioni amb les tecnologies actuals i futures.
Referent a la navegació pel lloc web, les WCAG 2.0 ens expliquen en el principi 2 de les pautes el concepte de la Operabilitat: els components de la interfície d’usuari han de ser operables.

En aquest cas fan referència al teclat, de manera que tota funcionalitat dels continguts és operable a través d’una interfície de teclat sense que existeixi límit de temps específic per a realitzar les pulsacions de les tecles. [Nivell A fins a AAA]

Navegabilitat: cal proporcionar mitjans que siguin d’ajuda a l’hora de navegar, localitzar el contingut i determinar on ens trobem.
Així ens trobem amb:
Si existeixen mecanismes per a saltar a blocs de continguts cal que es repeteixin en múltiples pàgines [Nivell A]
Les pàgines web cal que tinguin títols que descriguin el seu tema o propòsit [Nivell A]

Ordre de focus: Si en una pàgina web es pot navegar de forma seqüencial i la seqüència de navegació afecta al seu significat o operativitat, els components que poden rebre el focus ho han de fer en un ordre que conservi integres el seu significat i operativitat [Nivell A]

Encapçalaments i etiquetes: Els encapçalaments i les etiquetes han de descriure el tema o propòsit pertinent. [Nivell AA]

Focus visible: qualsevol interfície d’usuari que sigui operable a través del teclat ha de comptar amb un indicador visible del focus de teclat. [Nivell AA]

Ubicació: Cal que es proporcioni a l’usuari informació d’orientació sobre la seva ubicació dins d’una col·lecció de pàgines web [Nivell AAA]

Encapçalaments de secció: Usar encapçalaments de secció per a organitzar el contingut. [Nivell AAA]

També en el principi 3 Comprensibilitat: la informació i l’ús de la interfície d’usuari cal que sigui comprensible
La pauta 3.2 en parla de que el web cal que sigui Predictible: cal crear pàgines web l’aparença i operabilitat de les quals cal que sigui predictible.
Rebre el focus per part de qualsevol component no ha de provocar cap canvi en el context [Nivell A]

Navegació consistent: Els mecanismes de navegació repetits en múltiples pagines web dins d’una col·lecció de pàgines web apareixen en el mateix ordre relatiu cada cop que es repeteixen [Nivell AA]

Identificació consistent: Els components que tenen la mateixa funcionalitat dins d’una col·lecció de pàgines web s’han d’identificar de forma consistent. [Nivell AA]

Més informació sobre les pautes 2.0

Continuarà...
Read more ...

dijous, 17 de setembre de 2009

Recursos Vol. 27: CSS

Hola que tal, Benvinguts a una nova edició dels recursos.
Avui edició especial CSS

  1. Col·lecció de trucs amb CSS (donar estils a llistes amb números, l'atribut !important, lletra capital, posicionar elements al centre, etc.)
  2. Tècniques avançades de tipografia amb CSS
  3. Llistes multi columna amb CSS
  4. CSS3 tècniques essencials:
  • Rounded corners
  • Vores de les imatges (border image)
  • Text amb ombra (Text shadow)
  • Box-sizing
  • Transparències i opacitat (Transparency & Opacity)
  • Múltiples fons (Multiple Backgrounds)
Read more ...

divendres, 11 de setembre de 2009

Sistemes de Navegació Accessibles Vol. 4

Les WCAG 1.0 i els sistemes de navegació

Tècniques essencials per a les directrius d’Accessibilitat per al Continguts de la Web 1.0

Navegació
Punts de control:
  • Crear un estil de presentació que sigui consistent a través de las pagines. [Prioritat 3]
  • Emprar mecanismes de navegació de manera consistent. [Prioritat 2]
  • Proporcionar barres de navegació per a destacar y donar accés als mecanismes de navegació. [Prioritat 3]
  • Proporcionar informació sobre la distribució general del lloc (Ex., amb un mapa del lloc o una taula de continguts). [Prioritat 2]
  • Si es proporcionen funcions de cerca, habilitar diferents tipus de cerca per a diferents nivells de habilitat i preferències. [Prioritat 3]
  • Proporcionar metadades per a afegir informació semàntica a les pàgines i als llocs. [Prioritat 2]
Un estil de presentació consistent en cada pàgina, permet als usuaris localitzar mecanismes de navegació més fàcilment i també poder saltar de forma fàcil aquests mecanismes per a trobar el contingut important. Això ajuda a les persones amb problemes d’aprenentatge i lectura, però també fa més fàcil la navegació per a tots els usuaris.
Exemple d’estructures que poden aparèixer en el mateix lloc a totes les pàgines:
  1. barres de navegació
  2. el contingut principal de la pàgina
  3. publicitat
Un mecanisme de navegació crea una sèrie de rutes que el usuari pot prendre a través del lloc. Proporcionant barres de navegació, mapes del lloc, y sistemes de cerca, s’incrementa la possibilitat de que un usuari trobi la informació que està cercant en el lloc.
Si el lloc web es bàsicament visual, l’estructura pot ser difícil de navegar si l’usuari no pot formar-se un mapa mental de cap on va o d’on està. Per ajudar-lo, els desenvolupadors de continguts cal que descriguin algun mecanisme de navegació.

Continuarà...
Read more ...

dimecres, 9 de setembre de 2009

Colorsuckr: Paletes de colors a partir d'imatges del teu web

Una altra d'aquestes boniques eines gratuïtes i on-line.
Colorsuckr ens crea una paleta de colors a partir d'una imatge o d'una web.
Per exemple, a partir del logo del CMS matxambrat 2.0, ha extret la següent paleta de colors:


Molt recomanable i curiosa.
Read more ...

diumenge, 6 de setembre de 2009

Deep Catalonia Live Tour Vol. 6

Espremulls on tour.
Festa Major de Cambrils, 6 de setembre.

Concert-vermut a l'Ermita de la Mare de Déu del Camí de Cambrils.
Ni la pluja, ni el vent, ni la coca de recapte impedeixen als Espremulls oferir un magnífic concert.
1 hora de greatests hits amb el flabiolaire oficial del grup com a mestre de cerimònies.
Read more ...

Els 7 millors llibres sobre usabilitat

No me hagas pensar de Steve Krug Disponible en castellà i anglès

Usabilidad de Páginas de Inicio de Jakob Nielsen Disponible en castellà i anglès

Defensive Design for the Web de 37 signals Disponible en anglès

About Face 2.0 de Alan Cooper i Robert Reimann Disponible en anglès

Psicología del Color de Eva Heller Disponible en castellà

Universal Principles of Design de William Lidwell, Kritina Holden i Jill Butler Disponible en anglès

Web Bloopers de Jeff Johnson Disponible en anglès
Read more ...

dijous, 3 de setembre de 2009

Sistemes de Navegació Accessibles Vol. 3

Sistemes de navegació accessible

Navegació Tabular

L'ordre de tabulació: Per defecte aquest és el mateix que l'ordre d'aparició de l'element HTML, és a dir, el primer que apareix al codi és el primer al que es pot accedir.
Així la navegació amb el tabulador es farà element a element començant pel de més amunt.
Es pot canviar l'ordre de tabulació posant la propietat tabindex al elements. No s'aconsella canviar l'ordre de tabulació ja que s'entén millor l'ordre per defecte (de dalt a baix i d'esquerra a dreta)
Val a dir que a nivell d’usabilitat els webs acostumen a tenir molts enllaços, pensem per exemple en la plana portada d'un diari digital o d'un portal turístic, i por resultar molt costós en temps i esforç arribar a un enllaç concret.
També hem de tenir en compte que l'usuari ha de poder veure per quin element va la tabulació, per això podem emprar el següent codi CSS:
:focus, input:focus{outline:2px red solid;}
és a dir, remarcar amb requadre de color l'element sobre el qual està el focus.

Dreceres de teclat

Les dreceres de teclat són una alternativa a la navegació tabular amb el problema de l'excés d'enllaços.
Es poden crear diverses combinacions de tecles per arribar als elements que poden tenir més importància pels usuaris:
  • Pàgina d'inici
  • Pàgina productes
  • Pàgina informació de la empresa
  • Pàgina Contacte
  • Alt-1 + Intro: Pàgina d'inici
  • Alt-2 + Intro: Pàgina productes
  • Alt-3 + Intro: Pàgina informació de la empresa
  • Alt-4 + Intro: Pàgina Contacte

Dreceres de navegació

Les dreceres de navegació ajudaran als usuaris a accedir a les seccions importants de la pàgina (que nosaltres mateixos definirem)
Per exemple podem afegir dreceres de navegació per accedir directament a:
  • Pàgina d'inici
  • Menú de navegació
  • Contingut
  • Contacte
Accesskeys

Les accesskeys ens ajudaran a accedir ràpidament a un element. És aconsellable que s'usin per a accedir a parts del web que s'utilitzin sovint, com per exemple:
  • cercador
  • pàgina d'inici
  • menú de navegació
Les accesskeys, encara que poden resultar molt útils tenen alguns problemes, per exemple:
  • Cada lloc web té les seves pròpies, no s'ha arribat mai a un consens sobre un grups de tecles.
  • De vegades poden generar conflictes si s'usen lletres com a accesskey.
  • Els usuaris han d'accedir a una pàgina d'ajuda per veure les accesskey disponibles per aquell lloc web.
Continuarà...
Read more ...

diumenge, 30 d’agost de 2009

Llibres que tot bon dissenyador web hauria de coneixer

Via Blog design blog us presento un llistat de llibres imprescindibles per disseny web.
Com diu el títol del post són llibres que tot dissenyador web hauria de "comprar, demanar en prèstec o robar".
Els llibres estan classificats per diferents temàtiques:
  • Tipografia
  • Usabilitat
  • Ús del color
  • XHTML/CSS
  • jQuery
Read more ...

divendres, 28 d’agost de 2009

Sistemes de Navegació Accessibles Vol. 2

Accessibilitat i usabilitat en els sistemes de navegació

Sistemes de navegació usables: La navegabilitat
Per aconseguir la navegabilitat pel lloc web, cal que els sistemes de navegació compleixin una sèrie de principis bàsics:
  • Fàcil d’aprendre: El sistema de navegació cal sigui fàcil d’identificar i fàcil d’aprendre, per tant cal que siguis clars i senzills.
  • Enllaços clars i concisos: El rètol de l’enllaç ha de definir amb claredat el contingut amb el que enllaça, cal que sigui el més breu possible, evitar l’ús de paraules compostes o frases.
  • Consistència: Els sistemes de navegació cal que s’agrupin en unitat lògiques, i han de mantenir el mateix nombre d’elements, les mateixes etiquetes, ordre, format i la mateixa posició en tot el lloc web, així l’usuari pot familiaritzar-se més ràpidament amb el funcionament de la navegació del lloc web.
  • Optimització del nombre de clics: Cal que el nombre de clics que s’han de fer per arribar a una informació concreta, sigui en mínim possible. Sempre es recomana que la profunditat de navegació no excedeixi mai dels 3 o 4 clics.
  • Ubicació de l’usuari: Cal que els sistemes de navegació indiquin a l’usuari on és i també on ha estat.
  • No s’han de basar només en imatges: Si optem per un sistema de navegació amb imatges és important que aquestes continguin l’atribut ALT, que descriurà la imatge, si aquesta no es descarrega.
  • No haurien de tenir massa elements: Es recomana que els menús de navegació no sobrepassin els 7 elements, i jerarquitzar els elements de menú; sempre i quan això no es contraposi amb el principi bàsic d’optimització del nombre de clics.
  • Implementació de les tasques més comunes: És a dir, anar a l’inici, contactar, avançar, retrocedir, anar al mapa web, etc..
Continuarà...
Read more ...

dimarts, 25 d’agost de 2009

Recursos Vol. 26: Tipografia

Hola que tal. Benvinguts a una nova edició dels recursos

Tipografia i utilitats

Recull de 65 boniques tipografies per allò que en diuen "modern design".

Navega fàcilment per teva col·lecció de fonts:
Myfontbook és un visor de fonts que permet catalogar i organitzar les fonts instal·lades.

Typedia l'enciclopèdia de les tipografies: cerca fonts, dissenyadors, tallers de fundició, etc.
Read more ...

dijous, 20 d’agost de 2009

Recursos Vol. 25: Inspiració!!

Hola que tal. Benvinguts a una nova edició dels recursos

Inspiració en disseny web

Bonic article a webtoolkit4 on ens parla de les tendències del 2009 i 2010 en disseny web.
Us en faig 5 cèntims:
  • Títols grans
  • Imatges grans que ocupen gairebé tota la interfície
  • Ús de imatges o tipografia manuscrita tipus esbossos.
  • Sliders: sembla que tot s'acabarà desplaçant...
Cal repassar de tant en tant el web thebestdesigns per a veure què es porta últimament :)

Bonica llista de tutorials per a disseny web: CSS, jQuery, menús, formularis, calendaris...

RGBGarden per inspirar-se
Read more ...

dimecres, 19 d’agost de 2009

Sistemes de Navegació Accessibles Vol. 1

En el desenvolupament d’un lloc web, cal pensar sempre en la distribució i l’ús dels menús de navegació que hi hauran.
Aquests, molts cops ens donen una idea aproximada i certa de la estructura de continguts del web, així com del seu arbre de continguts.
Per això és necessari que a l’hora de desenvolupar un nou lloc web, cal conèixer-los i entendre en quina mesura ens oferiran la flexibilitat necessària i el coneixement del context on ens trobem.

Podem dividir els sistemes de navegació en diferents tipus, que ens serviran per la creació del lloc web:
  • Sistemes de navegació jeràrquics
  • Sistemes de navegació globals
  • Sistemes de navegació locals
  • Sistemes de navegació específics
Tots aquests tipus responen a les necessitats que pot tenir un usuari en qualsevol moment en la navegació del lloc web; així per exemple un sistema de navegació jeràrquic correspondria al menú de navegació principal del web, amb les seves seccions principals i subseccions. Aquest menú ens mostraria les diverses opcions de navegació ordenades per la seva importància.

Un sistema de navegació global, correspondria a aquells ítems que són susceptibles de ser consultat en qualsevol part del lloc web, i responen a ordres lògiques que es poden considerar importants, com per exemple, tornar a l’inici, el contacte, el mapa web.

Un sistema de navegació local, fa referència a un menú o submenú d’una secció concreta, que només ens servirà per navegar dins d’aquella secció.

Un sistema de navegació específic és aquell que ens pot dur a una informació en concret amb el mínim esforç, per exemple un cercador o un menú de baners.

Continuarà...
Read more ...

dilluns, 17 d’agost de 2009

La llegibilitat d’un lloc web en les WCAG 2.0

La llegibilitat d’un lloc web en les WCAG 2.0
Principi 3 – Comprensibilitat: La informació i el maneig de la interfície d’usuari han de ser comprensibles

Pauta 3.1 – Llegible: Fer el contingut textual llegible i comprensible

3.1.1 Idioma de la pàgina: L’idioma de cada pàgina pot ser programablement determinat. [Nivell A]
És a dir cal identificar l'idioma per defecte d'un document mitjançant els atributs lang i / o xml: lang dins de l'html.
Això millorarà la llegibilitat del web per a totes aquelles persones que usin navegadors amb audio descripció, persones amb dificultats per llegir, d'aprenentatge, etc.

3.1.2 Idioma de parts: L’idioma de cada passatge o frase del contingut pot ser programablement determinat excepte en el cas de noms propis, termes tècnics, paraules d’un idioma indeterminat i paraules o frases que han arribat a ser part de la llengua vernacla incorporades al text immediatament adjacent. [Nivell AA]
Identificar l'idioma de paraules o frases dins dels continguts (expressions en llatí, enllaços, etc.)

3.1.3 Paraules inusuals: Es proporciona un mecanisme per a identificar definicions específiques de paraules o frases emprades d’ una manera inusual o restringida, incloent modismes i argot. [Nivell AAA]

3.1.4 Abreviatures: Es proporciona un mecanisme per a identificar les formes expandides o el significat de les abreviatures. [Nivell AAA]

3.1.5 Nivell de lectura: Quan el text requereix d’una habilitat de lectura més avançada que la que proporciona el nivell d’educació secundaria inferior (un cop eliminats noms propis i títols), es proporciona contingut complementari o una versió que no exigeixi més habilitat lectora que la que proporciona el nivell d’educació secundaria inferior. [Nivell AAA]

3.1.6 Pronunciació: Es proporciona un mecanisme per a identificar la pronunciació específica de paraules on el significat de les mateixes pugui ser ambigu sense el coneixement de la seva pronunciació. [Nivell AAA]
Read more ...

diumenge, 26 de juliol de 2009

Pautes per millorar la llegibilitat d’un lloc web

Us presento unes petites pautes per millorar la llegibilitat d'un lloc web. No es tracta només de fer bons continguts, també cal que estiguin ben presentats.

Tipografia
Millor si fem anar un tipus de lletra “sans serif” com arial, verdana tahoma
No combinar més de dos tipus de lletra en un mateix web, una solució força elegant és fer anar un tipus de lletra pels títols i una altra pels textos.
Fer anar una mida de lletra raonable, ni massa gran ni massa petita. És aconsellable que la lletra estigui en mides relatives (percentatge, ems) per a poder canviar-la amb el navegador a gust de l’usuari.
Evitar l’ús de fonts no de sistema, o donar altres alternatives.

Estil visual
Assegurar-nos de que existeix suficient contrast entre el color de fons i el color de la lletra
Utilitzar les negretes i els subratllats per destacar paraules clau en els continguts.
Utilitzar la cursiva per destacar paraules en altres idiomes o per donar èmfasi; evitar-la quan només és purament un tema estètic.
Dividir els continguts en paràgrafs més petits i usar títols i subtítols per introduir conceptes i paràgrafs.
Les llistes són una bona opció a l’hora de maquetar continguts i conceptes, però no cal abusar, tampoc.
És preferible que els textos no estiguin justificats a la dreta, així ajudarem al salt de la vista cap a la línia següent.
Si optem per maquetar els textos en columnes, cal que donem espai suficient entre elles.

Llenguatge i redacció
Atenció amb la ortografia i la gramàtica
Usar un llenguatge planer i directe.
Evitar, en el possible, l’ús d’un llenguatge massa especialitzat
Evitar l’ús d’expressions malsonants o grolleres.
Brevetat i concisió en els conceptes.

Articles relacionats:
Eines per millorar la llegibilitat d'un lloc web Vol. 1
Eines per millorar la llegibilitat d'un lloc web Vol. 2
Read more ...

dilluns, 20 de juliol de 2009

Eines per a mesurar la llegibilitat d’un lloc web: Vol. 2

Eines per a mesurar la llegibilitat d’un lloc web. Segona part

Readability Test és una eina online amb la que podem avaluar la llegibilitat d’un lloc web. L’aplicació usa tres algoritmes matemàtics per mostrar-nos els resultats. Aquests algoritmes calculen:
  • La mitjana de paraules que es fan servir per frase
  • El percentatge de paraules difícils de la mostra (paraules amb 3 o més síl·labes)
  • La mitjana de síl·labes per paraula
Cadascuna d’aquestes dades es tractada de forma matemàtica pels tres algoritmes que empra l’eina. Els resultats dels càlculs ens indicarà l’índex de llegibilitat del lloc web.

Taula de resultats
Reading Level Results
Summary Value
Total sentences 88
Total words 391
Average words per Sentence 4.44
Words with 1 Syllable 190
Words with 2 Syllables 76
Words with 3 Syllables 58
Words with 4 or more Syllables 67
Percentage of word with three or more syllables 31.97%
Average Syllables per Word 2.01
Gunning Fog Index 14.56
Flesch Reading Ease 32.69
Flesch-Kincaid Grade 9.80


Articles relacionats
Eines per mesurar la llegibilitat d'un lloc web
Read more ...

dissabte, 18 de juliol de 2009

HTML 5

El futur de la web
Al cinquena revisió del llenguatge bàsic de la web ens presenta una serie de nous elements i atributs que reflexen com és avui en dia el web.
HTML 5 ens apropa molt més a la web semàntica, en la idea marcar/designar les seccions mitjantçant els nous tags descriptius.



Una molt interessant sèrie d'articles sobre les novetats de l'HTML 5 en castellà
Novetats de l'HTML 5 1era. part
Novetats de l'HTML 5 2ona. part
Novetats de l'HTML 5 3era. part
Novetats de l'HTML 5 4rta. part

Altres:
Validador d'HTML 5
HTML 5 Cheat Sheet en pdf
Especificacions W3C sobre HTML 5
Galeria HTML 5
Read more ...

dijous, 16 de juliol de 2009

Anàlisi Web

Anàlisi patrocinat via Zync.
Anàlisi del web http://www.obesitymedicalcenter.com

Elements gràfics i visuals i continguts
Marca, logotip, anagrama, lema. El logotip està col·locat en la zona superior dreta i és un enllaç a la pàgina d’inici.
Es pot comprovar que s’ha donat un especial importància a l’estil tant visual com de continguts donant un enfocament clarament sobri i professional. Al tractar-se d’un web d’una clínica especialista en problemes d’obesitat i tractaments de l’obesitat, tant les imatges com els textos estan enfocats de manera informativa i amb un to de confiança i serietat en les tasques i el desenvolupament professional.
En quan a disseny visual el web és auster en colors, usant només els colors corporatius de la marca i logotip. S’utilitzen fonts de sistema en els continguts en un mida adequada que en facilita la lectura.

Estructura

Es presenta una estructura molt clara i neta tant en la portada com en les pàgines interiors. En la majoria d eles pàgines hi ha molt poc scroll vertical, que beneficia la presentació de la informació.

Continguts: presentació i maquetació
La pàgina portada ens presenta d’una manera molt visual les línies d’actuació de l’organització amb un llenguatge planer i entenedor.
Un dels punts forts de la portada són les animacions flash que reforcen el missatge que vol donar l’empresa.
La pàgina portada també ens ofereix accessos directes a continguts que estan en un segon o tercer nivell de navegació, i no per això són menys importants.
Es destaca les animacions flash que fan de reforç i explicació del continguts especialment en les seccions de tractaments i també en la secció de càlcul de l’Índex de Massa Corporal.

Usabilitat i accessibilitat:
Lamentablement el web no passa cap validador d’accessibilitat ni de codi CSS i HTML
Tampoc les pàgines internes de contingut estàtic.


Visualització amb diferents navegadors
La visualització ha estat satisfactòria amb els següents navegadors:
  • Internet Explorer 7 i 8
  • Firefox 3.5
  • Google Chrome
  • Safari
En un entorn Windows XP SP3

Velocitat de descàrrega
Amb una eina de validació automàtica de descàrrega, podem comprovar que el web triga 2,1 segons en descarregar-se.


Cercador: El cercador cerca qualsevol paraula i ens mostra els resultats en forma de llistat de manera similar a com ho fa Google, oferint-nos els resultats que més s’aproximen en les primeres posicions i a més l’enllaç del web on es troba el continguts que s’ha cercat.

El web mostra d'una forma professional i clara els objectius i produtes de la empresa, la navegació en resulta senzilla i les animacions flash donen una imatge moderna i professional.
Es recomana: adequar els codi als estàndards web en matèria de CSS i HTML, oferir una versió accessible del web sense animacions flash.

Read more ...

dijous, 9 de juliol de 2009

Eines per a mesurar la llegibilitat d’un lloc web

Per llegibilitat entenem 'facilitat de lectura' (readability en anglès). És un terme que s’usa per investigar sobre l’habilitat de lectura i escriptura. Fa referència a la facilitat amb que un text és comprès pels lectors.
Una de les recomanacions de la usabilitat és l’ús correcte i pla del llenguatge; cal pensar que els textos a Internet arriben potencialment a milions de persones, també que els continguts escrits en web no s’acostumen a llegir, simplement s’escanegen en la cerca de conceptes o paraules clau que facin referència a allò que l’usuari cerca.

TxReadability és una eina online que ens permet avaluar la llegibilitat d’un lloc web. Aquesta avaluació la fa en base a uns estàndards internacionals de classificació d’educació, que trobem en la taula següent: Taula Huerta Reading Ease

Facilitat de lectura i les WCAG 2.0
La qualificació del nivell de grau obtinguda també ajuda a determinar si el contingut analitzat satisfà el criteri d’èxit relacionat amb la facilitat de lectura en les Normes d’Accessibilitat de Contingut Web (Web Content Accessibility Guidelines 2.0 - WCAG 2.0).
Nivell de lectura en les WCAG 2.0
Read more ...

dimecres, 8 de juliol de 2009

Notícies

El sistema Operatiu de Google
Un sistema operatiu lleuger i de codi obert. A finals d'aquest any s'alliberarà el seu codi font.
El sistema operatiu Google Chrome està centrat en mini-portàtils o netbooks. Es preveu que apareguin els primers netbooks amb el SO de Google durant la segona meitat del 2010.

Gmail ja no és beta
Per què gmail sempre ha estat Beta? curiositats del que es pot considerar com el millor gestor de correu web.

Firefox 3.5
Algunes novetats i característiques interessants:
  • Mode de navegació privada
  • Execució més ràpida de Javascript
  • Vídeo i audio sense plugins: Gràcies a les noves etiquetes d’HTML 5 "video i audio"
  • Geolocalització
  • Web workers i JSON nadiu
  • "font-face": Per fi podem usar en els nostres dissenys fonts que no tenen per què estar instal·lades en el nostre sistema.
Read more ...

Recursos Vol. 24: Inspiració!!

Read more ...

dilluns, 22 de juny de 2009

Deep Catalonia Live Tour Vol. 5

Barri de Sant Antoni, Barcelona 20 de juny

La mínima expressió d'Espremulls (mitja cobla), de gira per Barcelona.
Sí, potser els U2 estaven assanjant al Camp Nou i el Sonar estava xumba xumba, però la mitja cobla, és la mitja cobla.
Read more ...

divendres, 19 de juny de 2009

Recursos Vol. 23: Eines online

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

Web 2.0 Badges
Eina online que ens permet crear el nostre propi badge d'estil 2.0.
A partir d'una galeria, seleccionem el que més s'adapta a les nostres necessitats i el modifiquem en color, text, mida de la lletra color.
Un cop fet a descarregar!

Picreflect
Eina online per a crear efecte reflex en les nostres imatges. Podem manipular l'alçada del reflexe, transparència, efecte mirall, color de fons, rotació...
Ràpid i fàcil.

Splashup
Eina d'edició d'imatges online semblant al Pixrl.
Splashup ens dóna la possibilitat d'editar imatges del nostre ordinador, d'una url externa, de flickr, facebook, picasa, photobucket, etc. Ens permet el treball per capes i l'edició múltiple d'imatges.
Molt bona eina.
Read more ...

dimecres, 17 de juny de 2009

Recursos Vol. 22: Eines Online

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

Convert pdf to word és una eina online que ens permet convertir a format word un pdf.
L'eina també ens permet convertir un pdf a text, imatge, HTML o a l'inrevés convertir un texte en un pdf.
Com funciona?
Doncs com totes les aplicacions online, des del nostre ordinador pujem el pdf i després de convertir-lo ens ofereix la possibilitat de descarregar-lo.

Fresh generator
Magnifa eina online!!
Crea caixes (elements gràfics) d'estil 2.0 modificant la mida de la caixa i totes les seves propietats (color, ombra, transparència..), arrodoniment de les vores (corners), la mida de la vora (borders), i el text que ha d'apareixer dins (font, mida, color).
Un cop tenim la nostra imatge, l'únic que hem de fer els descarregar-la al nostre ordinador fent clic amb el botó dret anomena i desa la imatge.
Util, fàcil, ràpida, què més és pot demanar?
Read more ...

divendres, 12 de juny de 2009

La navegació per perfils en els Webs de l'Administració Pública

La navegació per perfils:
La navegació per perfils consisteix en estructurar els continguts del web, no per temes o categories si no segons el seu públic potencial.
És per això que cada cop més en els webs municipals s’opta per definir l’arbre de continguts del web de forma que s’estructuri seguint els criteris de perfils d’usuaris potencials. És a dir, el perfil de tipus empresari tindrà un interès més especial en concursos i licitacions públiques que no pas en actes culturals.
Un exemple de definició de perfils:
  • Ciutadà
  • Turista
  • Empresari
  • Ajuntament
A l’accedir a cada perfil ens trobarem amb la informació relacionada amb aquest perfil
  • Ciutadà: tràmits on-line, notícies de l’ajuntament, telèfons d’interès
  • Turista: Llocs d’interès, agenda d’activitats culturals, galeria d’imatges, telèfons d’interès
  • Empresari: tràmits on-line, concursos i licitacions públiques, bans i ordenances municipals
  • Ajuntament: informació genèrica de l’Ajuntament, grups municipals, regidories
Cada perfil d’usuari pot entrar i navegar per qualsevol part del web, però primerament sempre tindrà un accés més directe als temes o serveis que li podrien interessar més.
Per tant és molt important categoritzar el continguts, ja que, la navegació per perfils no deixa de ser una cerca per paraules clau d'uns continguts específics, etiquetats i ordenats.
Read more ...

dimecres, 10 de juny de 2009

Page Speed: optimitza la velocitat de la teva pàgina

Què és Page Speed?
És un complement per a Firefox /Firebug que ens analitza la velocitat de càrrega de la nostra web, ens mostra els resultats a través del Firebug i ens suggeriex com millorar i optimitzar el rendiment de la nostra pàgina.

Què fa Page Speed?

Ens mostra després de l'anàlisi, suggeriments per a millora la nostra pàgina en temes de CSS, JavaScript, optimització d'imatges, DNS, etc.

Les bones pràctiques recomadades per Page Speed per optimitzar la velocitat de càrrega de la nostra pàgina:
  • Optimitzar l'emmagatzemament de la caché
  • Minimitzar els temps d'anada i tornada
  • Minimitzar les sol·licituds
  • Minimitzar la mida de càrrega útil
  • Optimitzar la prestació del navegador
Page Speed ens ajudarà a millorar la velocitat de les nostres pàgines, de manera que podrem reduir l'ample de banda i els costos d'allotjament, si sabem quina és la càrrega que suporta el navegador cada cop que li fem la petició de que carregui la nostra pàgina.

Més informació sobre Page Speed

Altres eines per comprovar el grau de càrrega del web: PingDom
Read more ...

Recursos Vol. 21

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

Aplicació per vectoritzar imatges Vector Magic

Crea una paleta de colors a partir d'una imatge: ColorHunter

Imatges d'objectes blancs per poder-hi afegir un logo una frase, paraula, etc.
Read more ...

divendres, 5 de juny de 2009

Recursos Vol. 20

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



Font Jazz és una aplicació desenvolupada amb JavaScript que ens permet poder fer anar qualsevol font en el nostre web.
L'eina funciona amb IE5+, Firefox 2+, Opera 9+, Google Chrome i amb qualsevol altre navegador que compleixi els estàndards.
Llicència
Descàrrega

Articles relacionats
Fonts de sistema
Guia de fonts per a webmasters
Read more ...

dimecres, 3 de juny de 2009

FireFinder pel Firebug

FireFinder és un add-on pel Firebug que ens permet cercar qualsevol div en l'HTML

Read more ...

divendres, 29 de maig de 2009

Internet Explorer bugs

Internet Explorer en pilotes: El llistat de tots el bugs coneguts del navegador de Microsoft de la versió 5 en endavant.

Articles relacionats:
Internet Explorer i la visualització de webs
Internet Explorer i FCKeditor
Read more ...

Google Wave


Wow quina pinta! GoogleWave és una nova eina, encara en desenvolupament, per la comunicació i col·laboració via web. Pel que s'ha pogut veure en la ketynote publicada no és un gestor de correu, ni un blog, ni una wiki, ni una xarxa social... ho és tot a la vegada amb l'afegit dels mapes, fotos, vídeos...
Desde la pàgina de Google Wave es pot accedir a la documentació de l'API desenvolupat (en anglès)




La noticia al blog de Google
Article en castellà sobre Google Wave
Read more ...

dimarts, 26 de maig de 2009

Recursos Vol. 18: El recurs del mes (2)

Hola, que tal. Benvinguts a una nova edició dels recursos:
El recurs del mes (2)



HTM2PDF bonica aplicació online per a passar el teu web a pdf. Amb un sol clic. I gratis. I amb la possibilitat de poder posar un enllaç directe per desar el teu web en format pdf.

Chuck Norris l'aprova i ens la recomana (de debò)
Read more ...

dilluns, 25 de maig de 2009

Recursos Vol. 17: El recurs del mes

Hola, que tal. Benvinguts a una nova edició dels recursos:
El recurs del mes

Blendflu és una galeria/eina online per a escollir i provar pinzells per photoshop; ara ja no cal esperar a descarregar un paquet de pinzells per veure com son. Podem provar-los, veure una imatge prèvia i descarregar-los, tant per a Photoshop com per a Gimp.
Podem escollir entre més de 300 packs de pinzells de tot tipus.

Chuck Norris l'aprova i ens la recomana
Read more ...

dimecres, 13 de maig de 2009

Tipus de Webs Vol. 4

Continuem...
Experimental o de disseny.
Característiques comunes
Creativitat total, lliure disposició d’elements, estils, formes, colors, mides, etc.
És un estil molt subjectiu.

Per quin tipus de webs son adequades?
Webs d’autor
Per quins no?
Webs corporatives o institucionals

Fotoblogs i Video Blogs:
El més important es la disposició dels elements en la pàgina de manera que sempre vegem en un primer terme allò que s’ha marcat com a destacat.
Característiques comunes
Zona esquerra semi-superior: visor principal de fotos/vídeos.
Zona dreta: llistat en text i/o miniatura d’altres fotos/vídeos classificats (popularitat, temàtica relacionada amb una cerca, més recents, etc)
Zona inferior: llistat dels comentaris dels usuaris

Per quin tipus de webs son adequades?
Portals que abracin gran quantitat de seccions.
Webs dedicades a alguna temàtica, ja sigui musica, cine o arts, que per la seva constant actualització, puguin mostrar en la secció principal tot allò referent al tema que analitzen, estructurant els continguts segons el més destacat, el més vist, el més actual...
Per quins no?
Intitucionals

E-commerce (botigues on line)
Característiques comunes
Llistat de productes en format de taula.
Ajudes per a la visualització del detall de cada producte.

Per quin tipus de webs son adequades?
Portals que abracin gran quantitat de seccions.
Webs dedicades a alguna temàtica, ja sigui musica, cine o arts, que per la seva constant actualització, puguin mostrar en la secció principal tot allò referent al tema que analitzen, estructurant els continguts segons el més destacat, el més vist, el més actual...

Per quins no?
Web de tipus estàtic o presencial

Altres classificacions de llocs web (de Wikipedia)

Articles relacionats
Tipus de Webs Vol. 1
Tipus de Webs Vol. 2
Tipus de Webs Vol. 3
Read more ...

divendres, 8 de maig de 2009

DotNetNuke: Gestor de continguts de Codi Obert

DotNetNuke és un gestor de continguts de Codi Obert escrit en .NET.
Aquest gestor té un sèrie de característiques que el fan recomanable per la creació de llocs web, intranets i botigues virtuals. Entre les seves principals característiques trobem:
  • Gestor de continguts de codi obert
  • Arquitectura modular
  • Una gran quantitat de mòduls desenvolupats per una comunitat de desenvolupadors molt activa
  • Flexibilitat en l’aspecte de les pàgines
  • Definicions d’usuaris i permisos
  • Framework consistent
Un cop entrem a l'administració del web, ens trobem en la zona superior amb una barra d'eines i accions que podem fer anar per configurar, administrar i gestionar el web.
A sota de la barra de administració hi trobem una vista del web, amb les zones editables i configurables.

Eines de la barra superior

Mode de visualització: Segons quines accions fem en el web, podem canviar el mode de visualització:
  • Mode vista: tenim una vista prèvia del web
  • Mode edició: editar continguts
  • Mode disseny: afegir mòduls
Mòduls: és una de les part més potents del gestor, l'addició de mòduls es molt senzilla, només cal escollir quin volem posar i adjudicar-lo en una pàgina i una posició de la pàgina (dreta, esquerra, centre...)
Hem pogut comprovar que dins de l'administració, es poden afegir una gran quantitat de mòduls al web. Amb aquests mòduls podem afegir noves funcionalitats al web: notícies, baners, catàleg, etc. Aquests mòduls els podem col•locar amb una eina senzilla en qualsevol part del web.
Depenen del disseny que tingui la pàgina els mòduls que s'afegeixin s'adaptaran automàticament a l'espai designat.

Tasques: ens permet la gestió d'usuaris i rols, veure i configurar (si tenim els permisos apropiats) el web, veure l'arbre de carpetes que componen el web, etc.
Depenen del disseny que tingui la pàgina els mòduls que s'afegeixin s'adaptaran automàticament a l'espai designat.

Qualsevol aplicació feta amb .net sempre té uns quants inconvenients:
L'excés de caché (encara que el gestor incorpora per cada mòdul un botó per netejar la caché)
Els fet que amb navegadors que no siguin Internet Explorer la visualització no és correcta. (en aquest cas s'ha provat l'administració amb Firefox 3.0, IE7, IE8 i Chrome)

Usabilitat
El gestor és molt senzill de fer anar i intuïtiu.
El fet de que els mòduls s’adaptin a l’espai designat, és una gran ajuda en la maquetació del web.
Dóna una gran autonomia als usuaris a l’hora d’estructurar els continguts dins del web
Aportacions en quant a usabilitat:
Afegir avisos de funcionament: què està passant en cada moment
Ajudes visuals de cada eina (titles, textos explicatius, etc.)

Read more ...

Internet Explorer 8 i FCKeditor

IE 8 més problemes

Els que feu anar un gestor de continguts amb l'editor visual FCKeditor es possible que us trobeu amb una altra desagradable sorpresa un error de JavaScript:
IE 8 "Access is denied" fckeditorcode_ie.js Line 86

Aquest error, ens deixa l'editor inservible i encara que es canvii el mode de compatibilitat a IE7, tal com es comentava en el post anterior, no hi ha manera.
Des de www.fckeditor.net, ens proposen aquest hack, de moment només és un pedaç, esperem que des de Microsoft ens ofereixin alguna solució amb el tema de les compatibilitats entre Internet Explorer i JavaScript.
Read more ...

dimecres, 6 de maig de 2009

Internet Explorer i la visualització de webs


Logo de Internet Explorer

Ara que fa poc que ha sortit Internet Explorer 8, ens hem trobat amb la desagradable sorpresa de que algunes webs que s'ens veien be amb IE6, IE7, Firefox, etc, resulta que amb IE8 no.
Com sempre que passa quan apareix un navegador nou de Microsoft, s'ha de buscar la manera de compatibilitzar-lo.
Una solució ens la ofereix directament Microsoft, amb el tema de la vista de compatibilitat

Es tractaria de fer anar el botó de compatibilitat i afegir les web que volem que es vegin com si naveguessim amb IE7. O també fer anar les eines de desenvolupament que porta incorporat i canviar a Modo de exploración IE 7. (per entendre'ns el "Firebug")

Una altra forma i aquesta pels desenvolupadors web, és la d'afegir dins de l'etiqueta head
la següent línia de codi:

< equiv="X-UA-Compatible" content="IE=EmulateIE7">>

Trobareu més informació a la pàgina de Microsoft
Read more ...

dimarts, 5 de maig de 2009

Facebook: pàgines

Xarxes socials
Una xarxa social és una estructura que inclou individus i les relacions que existeixen entre ells. És una mitjà de interacció de diferents persones mitjançant xats, jocs en línia, fòrums, etc.
Les xarxes socials operen en tres àmbits, els quals el medi Internet intervé d’una manera molt eficaç:
  • Comunicació: ens ajuda a posar en comú coneixements
  • Comunitat: ens ajuda a trobar i a integrar-nos en comunitats
  • Cooperació: ens ajuda a fer coses junts.

Facebook
Facebook és una de les xarxes socials més importants actualment del món Internet. La seva repercussió a nivell mundial ha estat enorme des de la seva creació el 2004.
Actualment es calcula que 120 milions de persones en tot el món són usuaris de Facebook.

Creació d’una pàgina al Facebook

Tipus de pàgines
Facebook és una xarxa social que a més de relacionar persones també pot relacionar, empreses, productes, marques, personatges públics, etc.
Podem parlar de dos tipus de pàgines dins de Facebook
  • Pàgines per a persones
  • Pàgines per a empreses, marques o productes, personatges públics, etc.

Pàgines per a empreses, marques o productes, personatges públics, etc.
La creació d’una pàgina a Facebook per a una empresa, marca o producte implica el següent:
1. Creació d’un usuari administrador: que crearà i administrarà la pàgina.
2. Creació de la pàgina en si, existeix la possibilitat de crear pàgines de les següents categories o tipus:
  • Empresa i tipus d’empresa
  • Marca o producte
  • Artista, grup de música o personatge públic
Configuració de la pàgina: configuració dels elements que compondran la pàgina, permisos, criteris de publicació, etc.
Dinamització de la pàgina i creació de continguts: manteniment de la pàgina i maquetació de continguts

Configuració de la pàgina

Elements de la pàgina
Un cop s’ha creat la pàgina, aquesta no serà visible fins que es publiqui, per tant és en aquest moment que s’ha de configurar la visualització i ubicació dels elements de la pàgina, segons la disponibilitat d’elements, és a dir, si no es disposa de vídeos, no publicar l’element vídeos, etc.

Aplicacions
A més de les aplicacions pròpies de la pàgina, fotos, vídeos, noticies, es poden afegir altres aplicacions. Caldrà fer un llistat de les aplicacions que es volen afegir i definir els criteris de manteniment de cada aplicació.
Existeixen diferents tipus d’aplicacions:
1. Aplicacions per a Perfils de Facebook dirigides a usuaris normals de Facebook (no les recomanem per aquest cas)
2. Aplicacions per Facebook (recomanades)
  • Videos
  • Notas
  • Móvil
  • Elementos publicados
  • Fotos
  • Grupos
  • Eventos
  • Regalos
  • Foros de debate
  • Discografia
  • Reproductor de musica
  • Traducciones
  • Muro
  • Reproductor de flash
  • FBML estatico
  • Criticas Merketplace
  • Barra de herramientas de Facebook para Firefox

Idiomes
Si es vol fer amb més d’un idioma, cada web és totalment independent de l’altra, per tant cada idioma és una pàgina totalment nova, on els continguts poden tenir o no una orientació diferent.

Continuarà...
Read more ...

dimarts, 21 d’abril de 2009

Tipus de Webs Vol. 3

Minimalista:
Característiques comunes
De disseny molt simple, fonts de sistema llegibles i en una mida adequada per a la lectura.
Pocs colors i predilecció pels colors blanc i negre, també tota la gamma de grisos.

Per quin tipus de webs son adequades?
Per totes aquelles organitzacions que vulguin transmetre una imatge d’ordre, per exemple, un buffet d’advocats, un estudi d’arquitectura, etc.
Per quins no?
Per llocs web de comerç electrònic i portals

Basat en una retícula o quadrícula.
Característiques comunes
Es tracta de disposar els elements de la pàgina en una quadrícula. Dividint la pàgina en files i columnes que segueixen un esquema de quadrícula.
El disseny acostuma a ser molt formal, (això no vol dir que estigui renyit amb l’originalitat), fugint d’estridències en tema de colors, fonts, imatges, imatges de fons, etc.

Per quin tipus de webs son adequades?
Adequat per a webs de la administració pública, col·legis oficials, institucions, etc.
Per quins no?
Webs amb continguts dirigits a un públic específic (joves, nens) o webs de creativitat

Articles relacionats:
Tipus de webs Vol. 1
Tipus de webs Vol. 2

Continuarà...
Read more ...

dissabte, 11 d’abril de 2009

Recursos Vol. 15

Read more ...

Deep Catalonia Live Tour Vol. 4

Processó de Divendres Sant a Torredembarra 10 d'abril

No tot han de ser macro concerts a estadis, ni festivals multitudinaris...
La processó de Divendres Sant a Torredembarra (Processó del Sant Enterrament) és un clàssic dins de les gires dels Espremulls.
Solemnitat, rigor tradicional i bona música.
Read more ...

divendres, 3 d’abril de 2009

Tipus de Webs Vol. 2

Classificació per estils Magazine
1. Característiques comunes
  • En la portada contenen gran quantitat de ítems, ja poden ser noticies, articles, destacats, imatges, publicitat, espònsors, enquestes, vídeos, enllaços d’interès, comentaris...
  • En general, organitzen tota aquesta informació en diferents columnes que poden representar les diferents seccions pròpies de la web, amb el títol de la secció, enllaçat a aquesta i els diferents ítems pertanyents a dita secció, mostrats segons criteri.
  • També les seccions dins de la portada contenen un recull del mes destacat, calendari, publicitat...
  • Alguna d’aquestes seccions de la portada estarà més destacada que les altres.
  • La informació més important i destacada queda reflectida en la portada, de manera que el usuari pot anar directament a qualsevol ítem que li cridi la atenció i obrir el detall d’aquest, sense necessitat de navegar per totes les seccions de la web.
  • En cadascun dels ítems de les diferents seccions hi ha el titular i una petita explicació, que pot ser complimentada amb una imatge.
  • Les noticies normalment van detallades i ordenades amb la data i hora de publicació.
  • La publicitat normalment es situa a la dreta si hi ha columnes i a sobre o davall de la capçalera.
  • Els ítems poden estar en seccions destacats segons el que els usuaris de la web demandin o be segons l’actualitat d’aquestos.
  • Per lo tant, els usuaris poden observar quins son els ítems amb més èxit de manera que la informació es va classificant a mesura de l’ús dels usuaris.
  • Els menús majoritàriament estan disposats de forma horitzontal .
  • El buscador intern és present en gairebé tots els casos.
2. Webs de referència
www.nytimes.com
www.elpais.com
www.timesonline.co.uk
popvine.com
boxwish.com
www.dazeddigital.com
3. Per quin tipus de webs son adequades?
Aquelles amb molt volum d’informació, ja siguin diaris o revistes digitals on part d’aquesta informació, concretament la més destacada, hagi de mostrar-se a la portada.
Portals que abracin gran quantitat de seccions.
Webs dedicades a alguna temàtica, ja sigui musica, cine o arts, que per la seva constant actualització, puguin mostrar en la secció principal tot allò referent al tema que analitzen, estructurant els continguts segons el més destacat, el més vist, el més actual...
4. Per quins no?
Aquelles webs de empreses que tot el que ofereixen té el mateix nivell d’importància. Per exemple webs que ofereixen gran varietat de productes però tots són del mateix tipus.
Les que tenen gran quantitat de informació, que ha de ser categoritzada i classificada i que no es necessari que aparegui reflectida a la pàgina principal, sinó més aviat en diferents seccions i així l’usuari pugui destriar-la amb la pròpia navegació.

Articles relacionats
Tipus de webs Vol. 1

Continuarà...
Read more ...

divendres, 27 de març de 2009

Recursos Vol. 14: Tipografia i CSS

Hola que tal, benvinguts a una nova edició dels recursos.
Special Edition: Tipografia i CSS

Col·lecció de 35 fonts per a disseny
25 Tècniques avançades de CSS: backgrounds degradats, efectes 2D i 3D en botons, opacitats, transparències...
Bones pràctiques en els menús desplegables
Gràfiques i barres de dades amb CSS
Read more ...

divendres, 20 de març de 2009

Presentacions de manuals i catàlegs

Com millorar la presentació de manuals i catàlegs?

Us presento dues eines online per a la creació de 'revistes' i 'llibres' online a partir d'un document.

Issuu: és una aplicació que ens permet crear una revista a partir de qualsevol tipus de document. Facilíssim
1. Seleccionar l'arxiu
2. Posar-hi un títol i una descripció
3. Afegir un e-mail
4. Upload

Un cop fet això rebrem un email per a validar-nos i accedir el nostre espai dins de l'aplicació. Tenim també una eina per a afegir la revista que hem creat al nostre blog o lloc web. La presentació del document és en format revista on podem passar els pàgines fent clic amb el ratolí.

Panell de control:



Exemple:


Wobook: aplicació per a crear eBooks a partir de documents pdf, word, ppt, excel, oppenoffice.
Cal que ens registrem (gratis) i ja podem començar a crear els nostres propis eBooks.
Un exemple de la visualització d'un wobook

Extra

De pdf a Word
Free PDF to Word Doc Converter v1.1
Aplicació per a convertir un document pdf en Word, descàrrega gratuita
Read more ...

dimecres, 18 de març de 2009

Tipus de Webs Vol. 1

Hola, que tal. Vull compartir amb vosaltres un estudi que vaig fer sobre classificació de webs segons diferents criteris:

Primera Part: Classificació web
1.Per la seva audiència
  • Públics: És un lloc web normal, una pàgina dirigida al públic general, sense restriccions d’accés en principi.
  • Extranet: Són llocs limitats pel tipus d’usuaris que hi poden accedir, per exemple els proveïdors d’una empresa, o els clients.
  • Intranet: Són llocs que el seu accés està restringit a una empresa o organització, normalment funcionen dins de xarxes privades.
2. Pel seu dinamisme
  • Llocs interactius: L’usuari pot influir sobre el continguts del lloc que variarà en funció de cada usuari. Normalment les pàgines es generen quan l’usuari les sol•licita, personalitzant la informació que se li ofereix.
  • Llocs estàtics: Els usuaris no poden modificar o afegir res al lloc.
3. Per la seva navegabilitat:
Estructures obertes, tancades o semitancades:
  • Estructura oberta: Tots els documents disposen d’adreça i els usuaris poden accedir a qualsevol punt del web.
  • Estructura tancada: Limita l’accés només a un punt d’entrada. Un exemple seria un lloc web que requereix de registre previ per entrar.
  • Estructura semitancada: Té l’accés limitat només a algunes seccions.
4. Pels seus objectius
  • Comercials: Estan creats per a promocionar els negocis d’una empresa. La seva finalitat és econòmica.
  • Informatius: La seva finalitat és la de distribuir informació.
  • Oci: Jocs, cerca de parella, amics.
  • Navegació: La seva finalitat és la d’ajudar a l’usuari a trobar allò que busca a Internet.
  • Artístics o disseny: Són un mitjà d’expressió artística del seu creador o creadors.
  • Personals: A l’igual que els anteriors són un mitjà d’expressió del seu creador o creadors. Els seus objectius o audiència poden ser molt diversos, avui en dia triomfen els blocs o diaris personals.
5. Pel seu estil
Aquesta és una classificació subjectiva.
Els tipus d’estils de webs que es presenten en aquest document són una classificació basada en la recerca.
  • Magazine
  • Minimalista
  • Basat en retícules o quadrícula
  • Experimental o de disseny
  • Fotoblogs i Video blogs
  • E-comerce (botigues on line)
Continuarà...
Read more ...

Recursos Vol. 13: El recurs del mes


Templart: Magnífica eina online per a crear una plantilla web amb pocs clics.
Pels que no tenen temps o els que encara estan començant.

Chuck Norris l'aprova i ens la recomana
Read more ...

Mides absolutes i relatives

Mides absolutes i relatives en CSS:

px (píxels, relativa)
pt (punts, absoluta; 1 punt equival a 1/72 de polzada)
pc (piques, aproximadament 12 punts, absoluta)
in (polzades, absoluta; 1 polzada equival a 2.54 cm)
cm (centímetre, absoluta)
mm (milímetre, absoluta)
em (mida de la font actual, relativa)
ex (aproximadament la meitat de la mida de la font, relativa o l'alçada de la 'x')
% (percentatge, relativa)


Per a què utilitzarem les mides absolutes i les mides relatives?

Les mides relatives
especifiquen un mida en relació a una altra propietat, és a dir, els full d'estils que facin anar mides relatives
podran modificar la seva escala molt més fàcilment (web líquida)


Les mides absolutes
ens seran útils quan sabem perfectament quin serà el mitjà de sortida, per tant adaptem els full d'estil a aquell mitjà.
La pàgina és rígida, manté unes proporcions fixes independentment de la resolució del nostre monitor.


1. Els píxels
Al estar relacionats amb els medis visuals (la quantitat mínima de informació que es visible
en una pantalla), és la mida més utilitzada.
Encara que els píxels són una mida relativa, en pantalla solen comportar-se com una mida absoluta.


2. Els EM
Què és un em? A què equival? Per a què serveix?
Són les grans preguntes existencials dels maquetadors web...
Per si encara no hi ha manera, aquí van unes quantes ajudes:


EmChart la carta d'ems.
Aquesta carta ens mostra la seguent formula per calcular els ems:

The formula for computing the EM multiplier is:
desired pixel size / current pixel size = multiplier
és a dir, mida de píxel desitjat / mida actual de píxel = multiplicador

Per a què la utilitzarem?
Per a calcular bottom margins, line-heights, top margins, i top/bottom padding.

EmCalculator la calculadora d'ems
Ens ajudarà a crear el nostre web amb ems, només cal que afegim les mides en píxels i automàticament ens ho transforma en ems.

Enllaços relacionats

Especificacions CSS2
sidar.org
Read more ...