Principii sumare de usability

  1. Nu citim paginile web, le scanam. (asa cum facem si cu ziarele, revistele, cartile - sarim partile care nu ne inteleseaza pentru a citi doar ce dorim sa aflam in acel moment)
  2. Nu ne pasa cum functioneaza lucrurile, atat timp cat ne atingem scopurile utilizandu-le.
  3. Ne plac conventiile pentru ca ne ajuta sa gasim lucrurile mai usor si sa scanam paginile mai usor. (exemple: Shopping cart, navigatia globala, navigatia secundara, breadcrums, footer)
  4. Ar trebui sa fie evident ce este clickabil - butoanele si linkurile - astfel linkurile ar trebui sa aceeasi culoare si evident - diferete de restul textului.
  5. Reducerea "zgomotului de fundal" (ne deranjeaza -in mod inconstient cateodata- prea multe reclame, prea putin spatiu alb/liber, elemente decorative proeminente)
  6. Instructiunile, propozitiile de intampinare, bla-bla-urile nu aduc nici un beneficiu siteului, ci cresc zgomotul de fundal, disturband atentia utilizatorului. (Exemple: "Welcome to ..."). Instructiunile trebuie pastrate la minim - jumatate din jumatatea bla-bla-ului.
Principiile sunt prezentate in cartea: "Don't make me think!" - Steve Krug

Diacritice romanesti in HTML

Limba română foloseşte cinci litere cu semne diacritice: ă, â, î, ș, ț. Aspectul şi denumirea acestor semne sunt arătate în tabelul de mai jos.

Ă ă căciulă
 â Î î accent circumflex;
Ș ș Ț ț virgulă, plasată sub literele corespunzătoare s, S, t, T.



valoare cod
ă ă
Ă Ă
â â
 Â
î î
Î Î
ş ş
Ş Ş
ţ ţ
Ţ Ţ

Notiuni CSS: Layout fluid (lichid) si layout elastic


Layout fluid:

  • widthurile blockurilor sunt procentuale
exemplu: www.okazii.ro




Layout elastic:

  • widthurile blockurilor sunt relative la unitatea literelor (definite in em-uri)
exemplu: http://jontangerine.com/




Ps. De observat in acest exemplu este si dimensiunea imaginii din header definita in em-uri. Tot site-ul va face un fel de zoom la redimensionarea fontului.

Articol interesant despre imagini fluide:
http://unstoppablerobotninja.com/entry/fluid-images/

Tipuri de litere

1.Oldstyle
  • Prezinta serfuri
  • Serifurile sunt inclinate
  • Tranzitia de la subtire la gros este moderata
  • Linia stress este diagonala (aplecata spre stanga)



exemple: Goudy, Palatino, Times, Baskerville, Garamond

2.Modern
  • Prezinta serifuri subtiri orizontale
  • Tranzitia de la subtire la gros este radicala
  • Linia stress este verticala
  • Literele moderne au un aer rece, elegant


exempl
e: Bodoni, Times Bold, Onyx, Didot, Walbaum


3.Slab serif
  • Prezinta serifuri subtiri orizontale
  • Nu prezinta tranzitie de la gros la subtire sau este foarte moderata




exemple: Clarendon, Memphis, New Century Schoolbook, Silica


4.Sans serif
  • Nu au serifuri
  • Nu prezinta tranzitie de la gros la subtire



exemple: Proxima Nova, Formata, Folio, Bailey Sans, Syntax

5.Script

  • litere caligrafice, asemanatoare celor scrise de mana

exemple: Linoscript, Ministry Script, Fountain Pen, Cocktail Shaker

6.Decorative
  • fonturi cu scop decorativ
exemple: Jupiter, The Wall, Blue Island, Fajita, Pious Henry




Mai multe detalii:
http://ilovetypography.com/2007/11/21/type-terminology-old-style/


Tipurile de litere de origine chirilică
http://florinf.wordpress.com/2009/01/31/arhaic-romanesc/
http://www.peteava.ro/video/material/23968
http://www.georgehernandez.com/h/xComputers/Design/Typography.asp
http://typography.ro/2008/11/30/anatomia-fontului-typeface-anatomy/

The Non-Designer's Design Book 3rd edition - Robin Williams

Ce proprietati css se mostenesc?

Urmatoarele proprietati CSS pentru medii vizuale se mostenesc de la parinte la copii:

  • proprietati ale tipografiei:
    • font-family
    • font-size
    • font-style
    • font-variant
    • font-weight
    • font
    • white-space
    • word-spacing
    • text-align
    • text-indent
    • text-transform
    • direction
    • letter-spacing


  • proprietati tabelare
    • border-colapse
    • border-spacing
    • empty-cells
    • caption-side


  • proprietati ale listelor:
    • line-height
    • list-style-image
    • list-style-position
    • list-style-type
    • list-style

  • proprietati diverse:
    • color
    • cursor
    • quotes
    • visibility


Mai multe detalii la w3.org.