diumenge, 27 de desembre del 2009
divendres, 25 de desembre del 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:
Read more ...
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
Etiquetes:
accessibilitat
,
bones pràctiques
,
usabilitat
dissabte, 19 de desembre del 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:
Read more ...
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
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:
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:
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.
continuarà...
Read more ...
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.
continuarà...
Etiquetes:
accessibilitat
,
bones pràctiques
,
usabilitat
dijous, 17 de desembre del 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:
Read more ...
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
Etiquetes:
accessibilitat
,
bones pràctiques
,
usabilitat
dimecres, 9 de desembre del 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:
Interessant fer-hi una ullada.... per si hem de deixar de banda el Firefox....
Read more ...
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
Interessant fer-hi una ullada.... per si hem de deixar de banda el Firefox....
dijous, 3 de desembre del 2009
Tendències en disseny web pel 2010
Recull de tendències en disseny web pel 2010 via WebDesignerLedger
Disseny:
Scripts que ens converteixin les fonts en imatge
Read more ...
Disseny:
- Tipografia
- Encapçalaments i logos
- Estil retro
- Estil minimalista
- La importància de les imatges
- Estructura tipus revista (magazine)
- Perspectives
- Monopàgina
Scripts que ens converteixin les fonts en imatge
Recursos Vol. 30: Inspiració!
Hola que tal, benvinguts a una nova edició dels recursos.
Edició especial Inspiració
Inspiració en colors per web
Us del color vermell en web
Us del color blau en webs
Disseny web i tipografia
El millor de la web del mes de novembre
Webs de tipus retro i vintage
Read more ...
Edició especial Inspiració
Inspiració en colors per web
Us del color vermell en web
Us del color blau en webs
Disseny web i tipografia
El millor de la web del mes de novembre
Webs de tipus retro i vintage
dimecres, 4 de novembre del 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:
Destaquem:
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 ...
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
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
dimarts, 3 de novembre del 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 ...
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...
dimecres, 28 d’octubre del 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 ...
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
dissabte, 24 d’octubre del 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 ...
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
dimecres, 14 d’octubre del 2009
Curiositats
Les eines noves del Gmail:
Noves funcions:
Heu topat amb el paio equivocat?
No us oblideu del paio
.....
Read more ...
Noves funcions:
Heu topat amb el paio equivocat?
No us oblideu del paio
.....
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
Per acabar unes quantes fonts que faran el nostre disseny més net (allò que en diuen Clean Design)
Read more ...
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)
dilluns, 12 d’octubre del 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:
Per a saber-ne més:
W3C gràfics SVG
Especificació W3C
Read more ...
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
Etiquetes:
estàndards
,
explorer
,
firefox
,
svg
diumenge, 11 d’octubre del 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 ...
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.
dijous, 24 de setembre del 2009
Sistemes de Navegació Accessibles Vol. 5
Les WCAG 2.0 i els sistemes de navegació
Els principis bàsics inclouen:
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 ...
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.
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à...
Etiquetes:
accessibilitat
,
navegacio
,
usabilitat
dijous, 17 de setembre del 2009
Recursos Vol. 27: CSS
Hola que tal, Benvinguts a una nova edició dels recursos.
Avui edició especial CSS
Read more ...
Avui edició especial CSS
- Col·lecció de trucs amb CSS (donar estils a llistes amb números, l'atribut !important, lletra capital, posicionar elements al centre, etc.)
- Tècniques avançades de tipografia amb CSS
- Llistes multi columna amb CSS
- 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)
divendres, 11 de setembre del 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:
Exemple d’estructures que poden aparèixer en el mateix lloc a totes les pàgines:
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 ...
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]
Exemple d’estructures que poden aparèixer en el mateix lloc a totes les pàgines:
- barres de navegació
- el contingut principal de la pàgina
- publicitat
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à...
Etiquetes:
accessibilitat
,
navegacio
,
usabilitat
dimecres, 9 de setembre del 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 ...
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.
diumenge, 6 de setembre del 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 ...
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.
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 ...
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
dijous, 3 de setembre del 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:
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:
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:
Read more ...
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
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ó
- 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.
Etiquetes:
accessibilitat
,
navegacio
,
usabilitat
diumenge, 30 d’agost del 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:
Read more ...
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
divendres, 28 d’agost del 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:
Read more ...
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..
Etiquetes:
accessibilitat
,
navegacio
,
usabilitat
dimarts, 25 d’agost del 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 ...
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.
dijous, 20 d’agost del 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:
Bonica llista de tutorials per a disseny web: CSS, jQuery, menús, formularis, calendaris...
RGBGarden per inspirar-se
Read more ...
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...
Bonica llista de tutorials per a disseny web: CSS, jQuery, menús, formularis, calendaris...
RGBGarden per inspirar-se
dimecres, 19 d’agost del 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:
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 ...
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
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à...
Etiquetes:
accessibilitat
,
navegacio
,
usabilitat
dilluns, 17 d’agost del 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 ...
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]
diumenge, 26 de juliol del 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 ...
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
dilluns, 20 de juliol del 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:
Taula de resultats
Articles relacionats
Eines per mesurar la llegibilitat d'un lloc web
Read more ...
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
Taula de resultats
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
Etiquetes:
llegibilitat
,
recursos
,
usabilitat
dissabte, 18 de juliol del 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 ...
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
dijous, 16 de juliol del 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:
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 ...
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
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.
dijous, 9 de juliol del 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 ...
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
Etiquetes:
llegibilitat
,
recursos
,
usabilitat
dimecres, 8 de juliol del 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:
Read more ...
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.
Recursos Vol. 24: Inspiració!!
Hola que tal. Benvinguts a una nova edició dels recursos.
Edició especial Inspiració
Read more ...
Edició especial Inspiració
dilluns, 22 de juny del 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 ...
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.
divendres, 19 de juny del 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 ...
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.
dimecres, 17 de juny del 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 ...
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?
divendres, 12 de juny del 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:
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 ...
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
- 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
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.
dimecres, 10 de juny del 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:
Més informació sobre Page Speed
Altres eines per comprovar el grau de càrrega del web: PingDom
Read more ...
É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
Més informació sobre Page Speed
Altres eines per comprovar el grau de càrrega del web: PingDom
Recursos Vol. 21
Hola que tal, benvinguts a una nova edició dels recursos
Crea una paleta de colors a partir d'una imatge: ColorHunter
divendres, 5 de juny del 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 ...
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
dimecres, 3 de juny del 2009
dilluns, 1 de juny del 2009
Recursos Vol. 19: Inspiració
Hola que tal. Benvinguts a una nova edició dels recursos.
Edició especial inspiració
120 galeries de CSS per inspiració en disseny web
Galeries i carrusels d'imatges: bones pràctiques i inspiració
21 eines gratuïtes per desenvolupadors web
Read more ...
Edició especial inspiració
120 galeries de CSS per inspiració en disseny web
Galeries i carrusels d'imatges: bones pràctiques i inspiració
21 eines gratuïtes per desenvolupadors web
divendres, 29 de maig del 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 ...
Articles relacionats:
Internet Explorer i la visualització de webs
Internet Explorer i FCKeditor
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
dimarts, 26 de maig del 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 ...
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ò)
dilluns, 25 de maig del 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 ...
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
dimecres, 13 de maig del 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 ...
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
divendres, 8 de maig del 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:
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ó:
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 ...
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
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
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.)
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 ...
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.
dimecres, 6 de maig del 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
dimarts, 5 de maig del 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ç:
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 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:
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)
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 ...
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 é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
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à...
dissabte, 2 de maig del 2009
Accessibilitat i usabilitat: enllaços útils
Interessantíssims enllaços sobre accessibilitat i usabilitat web
Els beneficis dels estàndards web
Eines per a dissenyadors i desenvolupadors web
Llibres gratuïts sobre usabilitat i accessibilitat web
S'anirà ampliant... ;)
Read more ...
Els beneficis dels estàndards web
Eines per a dissenyadors i desenvolupadors web
Llibres gratuïts sobre usabilitat i accessibilitat web
S'anirà ampliant... ;)
dijous, 23 d’abril del 2009
Recursos Vol. 16: Inspiració i Tutorials
Hola que tal, benvinguts a una nova edició dels recursos
Edició Especial Inspiració i Tutorials
Unes quantes webs per inspirar-se
Inspiració en pàgines de contacte
Inspiració en botons web
Tutorials per crear efectes de text amb Adobe Illustrator
Tutorials de Photoshop per treballar amb textures
Read more ...
Edició Especial Inspiració i Tutorials
Unes quantes webs per inspirar-se
Inspiració en pàgines de contacte
Inspiració en botons web
Tutorials per crear efectes de text amb Adobe Illustrator
Tutorials de Photoshop per treballar amb textures
dimarts, 21 d’abril del 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 ...
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à...
dissabte, 11 d’abril del 2009
Recursos Vol. 15
Hola que tal, benvinguts a una nova edició dels recursos
Edició Especial Inspiració
Inspiració per fer menús de navegació
Recursos i inspiració pel disseny de logos
El millors dissenys i inspiració del mes de Març
Inspiració en webs amb ilustracions vectorials
Read more ...
Edició Especial Inspiració
Inspiració per fer menús de navegació
Recursos i inspiració pel disseny de logos
El millors dissenys i inspiració del mes de Març
Inspiració en webs amb ilustracions vectorials
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 ...
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.
divendres, 3 d’abril del 2009
Tipus de Webs Vol. 2
Classificació per estils Magazine
1. Característiques comunes
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 ...
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.
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à...
divendres, 27 de març del 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 ...
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
divendres, 20 de març del 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 ...
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
dimecres, 18 de març del 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
Estructures obertes, tancades o semitancades:
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.
Read more ...
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.
- 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.
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.
- 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.
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)
Subscriure's a:
Missatges
(
Atom
)