Conţinut şi designi design îînn Programarea Webramarea Web

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

ConConţţinutinut şşi designi design îînnConConţţinut inut şşi design i design îîn n Programarea WebProgramarea Web. . gg

Ciprian DobreCiprian [email protected]

Curs Programare Web, anul 4 C5 – Curs 8 1


Greşeli de sGreşeli de stiltil înîn HTMLHTMLGreşeli de sGreşeli de stiltil în în HTML HTML sau “aşa nu!”sau “aşa nu!”

2Curs Programare Web, anul 4 C5 – Curs 6


Ce înseamnă stil bun?Ce înseamnă stil bun?Ce sea ă st buCe sea ă st bu

• Stilul corect, precum gustul corect, reprezintă parţial – dar doar parţial – o problemă de opinie este afectat de subiectivitate

• Stilul greşit este adesea mai uşor de definit– O pagină web are un stil greşit dacăO pag ă eb a e u s g eş dacă

• Pagina nu se poate încărca• Pagina nu poate fi folosită în scopul pentru care a fost

construită• Conţinutul paginii nu poate fi citit• Pagina nu poate fi ajustată propriilor cerinţe• Pagina nu poate fi ajustată propriilor cerinţe• Nu puteţi scăpa de respectiva pagină• Nu puteţi parcurge site-ul conţinând respectiva pagina



Pagina nu se poate încărcaPagina nu se poate încărcaag a u se poate că caag a u se poate că ca

• Macromedia Flash – neindicat a se folosi• Paginile conţinând animaţii Flash adesea

nici nu pot fi încărcate dacă sunt folositenici nu pot fi încărcate dacă sunt folosite browsere ce nu au instalat Flash

• Dacă doriţi să folosiţi Flash, sau alte instrumente “fancy”, aveţi grijă măcar săinstrumente fancy , aveţi grijă măcar să verificaţi că propria audienţă are capabilitatea de a vizualiza respectivulcapabilitatea de a vizualiza respectivul conţinut



Paginile nu se pot folosiPaginile nu se pot folosiag e u se pot o osag e u se pot o os• Mulţi utilizatori opresc încărcarea automată a imaginilor

P t i l bă l I t t– Pot avea o conexiune slabă la Internet– Pot fi persoane cu dizabilităţi de vedere– Dacă singura legătură la o altă pagină se face pri intermediul unei g g p g p

imagini, utilizatorii fără imagini niciodată nu vor putea folosi funcţionalitatea de navigare

• Furnizaţi întotdeauna şi legături text suplimentar legăturilor de tip ţ ş g p g pimagini

– Folosiţi atributul alt="text" în toate tag-urile <img>

• Mulţi utilizatori opresc JavaScript• Mulţi utilizatori opresc JavaScript– Modalitatea preferată de evitare a ferestrelor de pop-up– JavaScript este folositoare pentru efectuarea de verificări a

i ă il i d d iliintrărilor introduse de utilizator– Verificările intrărilor pe partea de server sunt mai lente, însă

funcţionează întotdeauna



Nu se pot folosi cu tehnologii noiNu se pot folosi cu tehnologii noiu se pot o os cu te o og ou se pot o os cu te o og o

• Multe “telefoane” pot accesa Web-ul– Blackberry este printre cel mai cunoscute (şi cel mai

scump)

• Telefoanele ştiu de JavaScript, dar foarte puţinN t ţi it i d ă i li– Nu puteţi accesa site-uri de rezervări online

– Nu puteţi accesa diverse site-uri meteo

– Unele site-uri sunt accesibile, dar încete (e.g. Amazon)

• Pentru majoritatea site-urilor ce nu pot fi accesatePentru majoritatea site urilor ce nu pot fi accesate au apărut tot felul de site-uri alternative



Pagina nu poate fi citităPagina nu poate fi citităPagina nu poate fi citităPagina nu poate fi citită• Două exemple de background-uri (de altfel drăguţe):

• Ambele fundale conţin text – îl puteţi citi?

7

• Ambele fundale conţin text – îl puteţi citi?

Curs Programare Web, anul 4 C5 – Curs 6


Încă nu puteţi citi paginaÎncă nu puteţi citi paginacă u puteţ c t pag acă u puteţ c t pag a• Aţi observat vreodată pagini ce vă spun ce browser ar

trebui să folosiţi şi cum să vă setaţi propria rezoluţie atrebui să folosiţi şi cum să vă setaţi propria rezoluţie a ecranului?– Aţi urmat vreodată sfaturile respective?

Ce părere aveţi despre ego ul persoanei ce a proiectat respectivul– Ce părere aveţi despre ego-ul persoanei ce a proiectat respectivul site?

• This page was created by someone with perfect eyesight using a 21-inch monitor set to 1600 by 1200 resolution, using an 8-point serif font, and as a result nobody but the original author has a clue what it actually says.

• Some people just like to use weird fonts• Some people just like to use weird fonts• 7% of white males are red-green colorblind

– Există tot felul de potriviri greşite de culori între fundal şi font– Culoarea este adesea un bun diferenţiator, dar niciodată nu ar

trebui să fie singurul diferenţiator• Există multe locuri unde puteţi folosi dimensiuni absolute p ţ

în HTML, dar puţine motive ca vreodată chiar să le folosiţi



ADA (Americans with Disabilities Act)ADA (Americans with Disabilities Act)( e ca s t sab t es ct)( e ca s t sab t es ct)• În cazul “National Federation of the Blind v. Target”,

Judecătoarea Marilyn Hall Patel a dat următorul verdict:Judecătoarea Marilyn Hall Patel a dat următorul verdict: “retailers can be sued if their websites are not accessible to the blind”. În opinia ei “the ‘ordinary p ymeaning’ of the ADA’s prohibition against discrimination in the enjoyment of goods, services, facilities or privileges, is that whatever goods or services the place provides itthat whatever goods or services the place provides, it cannot discriminate on the basis of disability in providing enjoyment of those goods and services.”

• De exemplu, Target.com a declanşat un întreg scandal pentru faptul că nu foloseşte tag-uri “alt”pentru faptul că nu foloseşte tag uri alt .

• Sursa: http://arstechnica.com/news.ars/post/20060910-

9

p p7705.html



Contrastul e importantContrastul e importantCo t astu e po ta tCo t astu e po ta t• Contrastul este important

– Folosiţi fie text foarte închis la culoare pe un fundal foarte deschis laFolosiţi fie text foarte închis la culoare pe un fundal foarte deschis la culoare, fie un text foarte deschis la culoare pe un fundal foarte închis la culoare

– Evidaţi contrastul în imaginea de fundalChi d ă â d t t t i it i l• Chiar dacă ceva apare ca având un contrast potrivit pe propriul monitor, nu înseamnă că tuturor li se va părea la fel– Întotdeauna folosiţi mai multe contrast decât credeţi că este necesar

Abilit t d t iti t t d i d d ibilit t d i tă ii• Abilitatea de a putea citi un text depinde de posibilitatea depistării marginilor

• Detecţia marginilor la oameni se bazează pe contrast – diference între lumină şi întuneric – nu pe diferenţe de culoareîntre lumină şi întuneric – nu pe diferenţe de culoare

Aceasta este o diferenţă de culoare nu de contrastAceasta este o diferenţă de contrast, nu de culoare

10

Aceasta este o diferenţă de culoare, nu de contrast



Nu puteţi ajusta o paginăNu puteţi ajusta o paginău puteţ ajusta o pag ău puteţ ajusta o pag ă• Paginile ce folosesc dimensiuni absolute – de exemplu,

pentru a ajusta dimensiunea unei tabele pentru a sepentru a ajusta dimensiunea unei tabele pentru a se încadra pe un ecran de 17’ – reprezintă o problemă serioadă

Scrolling ul vertical este acceptabil deoarece nu trebuie prea des– Scrolling-ul vertical este acceptabil deoarece nu trebuie prea des să facem scroll în jos pentru a citi o coloană de text

– Dacă avem nevoie de scroll în lateral avem nevoie să facem scroll pentru fiecare linie de textpentru fiecare linie de text

• Dimensiunile relative nu funcţionează întotdeauna; am dat peste pagini ce specificau că dimensiunea tabelei arpeste pagini ce specificau că dimensiunea tabelei ar trebui să fie 110% din lungimea paginii

• Chiar dacă monitorul vostru are o rezoluţie mare şi aveţi vederea bună, s-ar putea să fie alte şi lucruri pe ecran pe care utilizatorul doreşte să le vadă

11

ş



Nu puteţi părăsi o paginăNu puteţi părăsi o paginău puteţ pă ăs o pag ău puteţ pă ăs o pag ă

• Câteodată această problemă apare prin rea-i ţă i i l d d J S i tvoinţă – pagina include cod JavaScript ce

declanşează afişarea unei noi ferestre de fiecare dată când încercaţi să o închideţidată când încercaţi să o închideţi

• Adesea însă reprezintă un accident: o pagină vă permite un transfer automat la o altă pagină darpermite un transfer automat la o altă pagină, dar cu un interval de timp setat la zero:

• <meta HTTP-EQUIV="Refresh"• <meta HTTP-EQUIV= RefreshCONTENT="0; URL=newURL">

• Codul aceasta vă poartă către noua pagina, darCodul aceasta vă poartă către noua pagina, dar efectiv şi dezactivează butonul de “Back”– Soluţia uşoară: Nu setaţi timpul la zero!

12

ţ ş ţ p



Nu puteţi naviga prin siteNu puteţi naviga prin siteu puteţ a ga p s teu puteţ a ga p s te• EPSON era unul dintre cele mai rele exemple

(acum însă site ul arată mai bine)(acum însă site-ul arată mai bine)• Aveam nevoie să downloadez un driver de

imprimantă; am mers pe www epson com şi mi-imprimantă; am mers pe www.epson.com şi miau dat următoarele alternative:– Imprimante & produse pentru procesarea imaginilor

(P i & I i d )(Printers & Imaging products)– Dispozitive electronice (Electronic devices)

Produse Vendabile (Point of Sale Products)– Produse Vendabile (Point of Sale Products)• Ce alternativă dintre acestea ar trebui să aleg

pentru a găsi driverul de imprimantă necesar?p g p• Propria pagină reprezintă organizaţia

– Ce mă interesează pe mine cum sunt ei organizaţi?

13

g ţ



Soluţii de ocolire a designSoluţii de ocolire a design--ului prostului prostSo uţ de oco e a des gSo uţ de oco e a des g u u p ostu u p ost

• Contrastul slab:– Apăsaţi control-A pentru a selecta întregul text

al paginiial paginii– Altfel, în Preferences, selectati “Use my

chosen colors” si/sau dezactivaţi încărcareachosen colors si/sau dezactivaţi încărcarea imaginilor, apoi reîncărcaţi pagina

Di i ită• Dimensiune greşită:– Creşteţi sau micşoraţi rezoluţia ecranuluiţ ţ ţ

• Nu puteţi naviga prin siteFolosiţi Google

14

– Folosiţi Google



15

http://www.webdesignfromscratch.com/why-most-sites-suck.php



Principii de designPrincipii de designPrincipii de designPrincipii de design



Principii de designPrincipii de designc p de des gc p de des g

• În The Non-Designer’s Design Book: Design and T hi P i i l f th Vi l N i R biTypographic Principles for the Visual Novice, Robin Williams discută aceste patru principii:1 P i it t El t l î dit t b i ă fi t1. Proximitate: Elementele înrudite ar trebui să fie grupate

împreună.

2 Aliniere: Nimic nu ar trebui plasat în pagină arbitrar --orice2. Aliniere: Nimic nu ar trebui plasat în pagină arbitrar --orice element ar trebui să aibă o conexiune vizuală cu altceva din pagină.

3. Repetiţie: Unele aspectele ale design-ului ar trebui să fie repetate în pagină.

4 C t t D ă d ă it i t t l f l l t b i ă4. Contrast: Dacă două itemuri nu sunt exact la fel ele ar trebui să fie reprezentate diferit – chiar diferit.



ProximitateProximitateo tateo tate• Proximitate – apropriere – reprezintă instrumentul

util pentru organizarea lucrurilor în cadrul paginiiutil pentru organizarea lucrurilor în cadrul paginii– Dacă lucrurile sunt apropiate ele apar ca fiind înrudite

P i– Prin urmare:• Dacă lucrurile sunt înrudite, ele ar trebui să stea apropiat• Dacă lucrurile nu sunt înrudite ele nu ar trebui să stea apropiat• Dacă lucrurile nu sunt înrudite, ele nu ar trebui să stea apropiat

– Evitarea spaţierii egale a tuturor lucrurilorEvitarea spaţierii egale a tuturor lucrurilor– Nu se plasează lucruri în colţuri sau singure în mijlocul

paginiig– Evitarea introducerii prea multor grupuri în cadrul paginii– Headerele trebuie să arate ca headere iar lucrurile ce nu

18

sunt headere ar trebui să nu arate ca headere



ProximitateProximitateProximitateProximitate• De exemplu, coperta din dreapta

folosește o aranjare modulară, cu trei module orizontale:

S i f ții i i d i t titl • Sus: informații privind revista: titlu, data, frecvența de apariție, tipuri de conținut (news, ideas, innovation, ț ( , , ,careers).

• Centru: Spațiu pentru povestea principală a ediției, deasupra unei poze cu un urs polarpoze cu un urs polar.

• Jos: Spațiu pentru două sau mai multe Jos: Spațiu pentru două sau mai multe articole.



AliniereaAliniereae eae ea• Alinierea bună ajută la unificarea şi organizarea paginii• Se doreşte evitarea impresiei de “împrăștiere”Se doreşte evitarea impresiei de împrăștiere

Alinierea stânga tindesă apară în mod naturalsă apară în mod naturalîn paginile Web

Alinierea dreaptă nut î l deste în general de prea

mare ajutorAlinierea pe centru tinde să fie

plictisitoare şi este mai ales urâtăcând linii sunt toate cam de aceeaşi

lungimeg

• Încercaţi să evitaţi mai mult de un singur tip de aliniament în cadrul unei pagini

20

în cadrul unei pagini



AliniereaAliniereaAliniereaAlinierea• Alinierea ajută și ochiul în depistarea

lucrurilor utile în cadrul paginiilucrurilor utile în cadrul paginii.

• Aproape orice element din pagină a fost aliniat cu unul sau mai multe elemente. Există 3 linii verticale și 3 orizontale – invizibile – ce au fost folosite pentru alinierea elementelor din pagină.

• Alinierea centrată este adesea privită• Alinierea centrată este adesea privită ca ‘plicticoasă’ dar în acest caz axele de simetrie ale ursului polar sunt folosite ca linie pentr centrareafolosite ca linie pentru centrarea textului ce anunță articolul principal. Centrarea leagă în mod evident imaginea de text.



RepetiţiaRepetiţiaţţ• Scopul repetiţiei este:

– De a unifica pagina sau grupul de paginiDe a unifica pagina sau grupul de pagini– De a adăuga interes vizual

• Puţine lucruri arată mai plictisitor decât pagini lungi, continue de text• Lucrurile ce arată plictisitor cel mai adesea nu primesc o a doua privire

• Repetiţia e legată de consistenţă– Deja aţi folosit-o probabil pentru consistenţa fonturilor, a headerelor,

tetc. – Unele elemente vizuale (elemente de fundal, icon-uri, bordere,

reguli orizontale) ar trebui să se repete în cadrul unei pagini Web g ) p p gsau al unui grup de pagini Web înrudite

– Dacă paginile sunt grupate, ele ar trebui să apară ca fiind grupate

22

– Totuşi nu folosiţi prea multă repetiţie pentru că poate deveni de la un punct supărătoare



RepetițiaRepetițiaRepetițiaRepetiția• Aranjarea textului: toate

f t il t d ti iffonturile sunt de tip sans serif, fonturi moderne, ce demonstrează trendul moderndemonstrează trendul modern, la zi, chiar a conținutului.

• Culoarea: O notă asupra repetiției culorilor: text de p țculoare albastru închis și orange; fundal în culoarea turcoaz în partea dreapta-sus, în cazul textului stânga-jos și în imaginea din fundalimaginea din fundal.



ConstrastulConstrastulCo st astuCo st astu• Contrastul apare atunci când două elemente sunt clar

diferite• Se poate crea contrast prin folosirea de dimensiuni diferite• Se poate crea contrast prin folosirea de fonturi diveriteSe poate crea contrast prin folosirea de fonturi diverite• Se pot folosi linii subţiri şi groase• Se pot folosi linii orizontale şi verticaleSe pot folosi linii orizontale şi verticale• Se pot folosi culori contrastante: culori reci vs. calde• Se poate folosi text spaţiat larg sau strâns spaţiat• Se poate folosi text spaţiat larg sau strâns spaţiat• Atenție însă: Nu e aşa mare contrastul între font de tip de

12 puncte şi cel de 14 punctep ş p



ContrastContrastContrastContrast• Informația din revistă: titlul este

elementul textual vizibil cel mai mare din partea de sus a paginii.

Separarea zonelor poveștilor• Separarea zonelor poveștilor importante ale ediției: zonele pentru articolele importante sunt diferențiate prin dimensiuni diferite ale font-urilor și culorilor folosite.

• Module: modulele sus și jos au elementele aliniate stânga și dreapta. În zona centrală însă textul șiÎn zona centrală însă textul și imaginea sunt aliniate centru.



Repetiţie!Repetiţie!epet ţ eepet ţ e• Contrastul apare atunci când două elemente

sunt clar diferitesunt clar diferite• Se poate crea contrast prin:

Folosirea de di erse dimensi ni de tip– Folosirea de diverse dimensiuni de tip– Folosirea de diverse fonturi– Folosirea liniilor subţiri şi groase– Folosirea liniilor orizontale şi verticale– Folosirea culorilor contrastante: culori reci şi calde– Folosirea de text spaţiat diferit

• Nu fiţi plângăreţi – faceţi lucrurile să ţ p g ţ ţarate cu adevărat diferit– Nu e prea mare contrastul între font de 12 şi font de 14!



Tipuri de fonturiTipuri de fonturipu de o tupu de o tu



Alte câteva principiiAlte câteva principiite câte a p c pte câte a p c p• Stabilirea unei ierarhii vizuale

Oamenii prima dată văd grafica şi pe urmă textul– Oamenii prima dată văd grafica şi pe urmă textul– Balansarea, organizarea şi contrastul vizual sunt vitale

• Direcţionarea ochilor cititoruluiDirecţionarea ochilor cititorului– Oamenii scanează textul de la stânga la dreapta, de sus în jos– Doar primii patru inchi cei mai de sus ar putea fi vizibili– Folosiţi nuanţe pastel pentru fundal sau elemente minore

• Atenţie la elemente ce distrag atenţia– Ilustraţiile bogate şi (în special) grafica animată sau textul animat distrag

atenţia utilizatorului de la conţinut– Dacă totul este accentuat, nimic nu este accentuat,

• Asigurarea consistenţei– Nu se lasă lucrurile împrăştiate în toată pagina

28

– Lăsaţi stilul propriu să “evolueze” pe măsură ce îmbunătăţiţi pagina



Stabilirea unui look consistentStabilirea unui look consistentStab ea u u oo co s ste tStab ea u u oo co s ste t

• Orice pagină din cadrul site-ului ar trebui să împartă unele elemente de stil cu toate celelalte paginielemente de stil cu toate celelalte pagini– Utilizatorul ar trebui să ştie, fără să se gândească la asta, că

navighează încă în cadrul aceluiaşi site– Se foloseşte acelaşi logo sau acelaşi set de butoane de navigare

în fiecare pagină– Se foloseşte o schemă de culori şi un set de fonturi consistente– Se foloseşte o schemă de culori şi un set de fonturi consistente

• Paginile nu trebuie să arate toate identic dar ele trebuie• Paginile nu trebuie să arate toate identic, dar ele trebuie să aibă acelaşi stil

• Style sheet-urile CSS pot fi de mare ajutor în definirea stilului consistent

29

– Dar trebuie teste făcute pe o varietate de browsere



Exemplu…Exemplu…Exemplu…Exemplu…

• Ce părere aveți de acest poster?• Ce părere aveți de acest poster?

Cum atrage atenția utilizatorului?• Cum atrage atenția utilizatorului?



Corectitudinea stilului HTMLCorectitudinea stilului HTMLCorectitudinea stilului HTMLCorectitudinea stilului HTML



Ce spuneți de:Ce spuneți de:Ce spuneți de:Ce spuneți de:

Curs Programare Web, anul 4 C5 – Curs 7 32


Ghiduri de stilGhiduri de stilG du de stG du de st• Există multe ghiduri de stil HTML pe Web• Unul dintre cele mai bune este cel de la Yale• Unul dintre cele mai bune este cel de la Yale,

http://info.med.yale.edu/caim/manual/• Un altul este cel de la W3C• Un altul este cel de la W3C,

http://www.w3.org/Provider/Style/• Unul dintre cele mai plăcute site-uri esteUnul dintre cele mai plăcute site uri este

http://www.webpagesthatsuck.com/– Motto: “Where you learn good Web design by looking at bad Web

design”

• O carte adecvată subiectului:– Don't Make Me Think: A Common Sense Approach to Web

Usability, de Steve Krug, Roger Black



Cunoaşteţi pe cine încercaţi Cunoaşteţi pe cine încercaţi ă i i ţiă i i ţisă impresionaţisă impresionaţi• Care este audienţa ţintă?

– Publicul general (Surferi Web)• Precum o copertă de revistă pagina home ar trebui să atragă oameniiPrecum o copertă de revistă, pagina home ar trebui să atragă oamenii

– Folosiţi grafică de calitate şi fraze scrise cu bold

– În cele mai puţine cuvinte posibil, spuneţi vizitatorilor ce aveţi de oferitToate link urile ar trebui să conducă direct la paginile site ului– Toate link-urile ar trebui să conducă direct la paginile site-ului

– Vizitatori ocazionali• Navigarea ar trebui să fie simplă şi intuitivă• Se folosesc pagini de sumar, icoane ajutătoare, secțiuni FAQs şi organizare

cât mai simplă

– Experţi şi vizitatori frecvenţi• Furnizarea de informaţie bine organizată rapid cu un deranj minim• Evitarea graficii pretenţioase, pagini greu de încărcat• Furnizarea de “site maps” şi funcţii de căutareFurnizarea de site maps şi funcţii de căutare

– Utilizatori internaţionali• Folosirea limbajului standard, uşor de înţeles

F i d i i î di li bi ( t i t ţi l)

34

• Furnizarea de pagini în diverse limbi (suport internaţional)• Evitarea formatelor de timp şi dată specific regionale, pecum 10-12-2002



Cunoaşteţi ce încercaţi să faceţiCunoaşteţi ce încercaţi să faceţiCu oaşteţ ce ce caţ să aceţCu oaşteţ ce ce caţ să aceţ

• O pagină fără un scop este precum o prezentare lă fă ă t i ăorală fără o topică

• Încercaţi să vindeţi ceva?– Odorizante de cameră: folosiţi scene exterioare

(natură) cât mai frumoaseDeodorant: oameni frumoşi (atât femei cât şi bărbaţi)– Deodorant: oameni frumoşi (atât femei cât şi bărbaţi)

– Computere: fotografii atractive şi specificaţii tehnice– Pe voi înşivă: vedeţi orice carte legată de scrierea unui– Pe voi înşivă: vedeţi orice carte legată de scrierea unui

CV• Încercaţi să transmiteţi informaţie?Încercaţi să transmiteţi informaţie?

– Folosiţi o organizare cât mai clară, chiar pe baza unui cuprins (table of contents)

35

– Pentru multe topici este necesară şi o secţiune FAQCurs Programare Web, anul 4 C5 – Curs 8


Formate mediaFormate mediao ate ed ao ate ed a

• Cărţile au existat chiar înainte de Biblia lui Gutenberg din 1456

• Câteva dintre “standardele de interfaţă” pentru ţ pcărţi:– Cărţile au coperţiCă ţ e au cope ţ– Cărţile sunt legate de-a lungul marginii stânga– Titlul apare pe cotor sau pe copertăTitlul apare pe cotor sau pe copertă – Cărţile au o pagină de titlu– Paginile unei cărţi sunt numerotatePaginile unei cărţi sunt numerotate

• Paginile impare sunt în dreapta• Primele pagini sunt numerotate cu simboluri romane

36

– Cărţile au un cuprins şi un indexCurs Programare Web, anul 4 C5 – Curs 8


Paginile Web nu sunt cărţiPaginile Web nu sunt cărţiag e eb u su t că ţag e eb u su t că ţ

• Standardele evoluează rapid, dar nu sunt p ,“finalizate”

• Web-ul aduce noi capabilităţi:– Publicarea este ieftină, orice o poate face– Hiperlinkurile permit acces neliniar la informaţie

Motoarele de căutare permit găsirea mai uşoară a– Motoarele de căutare permit găsirea mai uşoară a informaţiei

• Înainte oamenii lucrau cu sute de bookmarkuri; astăzi toată lumea foloseşte Googlelumea foloseşte Google

• Web-ul aduce şi noi situaţii:– Utilizatorii se pot “pierde în hiperspaţiu”Utilizatorii se pot pierde în hiperspaţiu

• Sunt necesare instrumente adecvate de navigare– Utilizatorii navighează pe Web rapid

A ţi l di iţi d t ă f it j l

37

• Aveţi la dispoziţie zece secunde pentru a vă face auzit mesajul



Câteva sugestii foarte generaleCâteva sugestii foarte generaleCâte a sugest oa te ge e a eCâte a sugest oa te ge e a e• Stilul bun de scris a fost, este şi va fi întotdeauna

importantimportant– Tot ce aţi învăţat vreodată despre scrierea de compuneri bune se

aplică

• Folosiţi un spell checker– Astăzi aproape orice aplicaţie software include un spell checker

• Faceţi ca fiecare pagină să iasă în evidenţă individual• Faceţi ca fiecare pagină să iasă în evidenţă individual– Nu ştiţi cum ajunge cineva să acceseze respectiva pagină



ÎntrebăriÎntrebărit ebăt ebă• Cititorul ar trebui să poată descoperi:

Ci i i ?– Cine a scris pagina?• Găsiţi o pagină despre cancerul la plămâni. Ea a fost scrisă de

(a) American Medical Association, (b) cineva care lucrează t Phili M i ( ) i t l t di F t ti?pentru Philip Morris, sau (c) un instalator din Feteşti?

– Care este topicul abordat în pagină?• Dacă nu aveţi nimic de spus, mai bine nu-l spuneţiţ ţ• Folosiţi un titlu clar, scurt – poate deveni un bookmark

– Când a fost pagina scrisă/actualizată?• Descoperiţi o pagină despre un nou medicament disponibil “luna• Descoperiţi o pagină despre un nou medicament disponibil luna

viitoare”• O altă pagină descrie “ultima versiune” a unui anumit software

Unde este pagina?– Unde este pagina?• Cine a scris pagina? Cine a sponsorizat scrierea paginii?• Dacă tipăresc pagina o voi mai putea regăsi pe Web din nou

vreodată în viitor?

39

vreodată în viitor?



Construirea de ajutor de navigaţieConstruirea de ajutor de navigaţieCo st u ea de ajuto de a gaţ eCo st u ea de ajuto de a gaţ e• Când cineva vă accesează site-ul:

– Ce e cel mai probabil să caute?– Cât de sofisticaţi sunt utilizatorii?– Aproape nimeni nu întreprinde suficientă testare a uşurinţei de

navigare

• O problemă clasică: descoperiţi o pagină interesantă dar• O problemă clasică: descoperiţi o pagină interesantă dar nu ştiţi ce pagini se află “împrejurul” ei– Sunt paginile organizate într-o manieră simplă şi consistentă?p g g p ş– Poate vizitatorul să găsească calea către pagina home?– Poate utilizatorul să spună dacă se mai află sau nu pe acelaşi

site?– Barele de butoane sunt utile, dar nu omiteţi legăturile text

( f )

40

– Evitaţi paginile dead-end (acelea fără nici un link)



Ajutaţi vizitatorii să găsească pagini în Ajutaţi vizitatorii să găsească pagini în sitesite

• Dacă aveţi multe pagini puteţi folosi meniuri pe nivele...Priviţi un cuprins dintr o carte; de obicei există secţiuni principale– Priviţi un cuprins dintr-o carte; de obicei există secţiuni principale şi subsecţiuni

• ...dar utilizatorilor nu le plac multe meniuri miciSt diil tă ă tili t ii f ă i i d lt– Studiile arată că utilizatorii preferă meniuri dense cu multe alternative în detrimentul meniurilor mici, gen one-step-at-a-time

– “Site maps” au devenit tot mai populareN t tă l î ă fi i li it• Nu toată lumea încarcă grafica implicit– Hărţile grafice sunt frumoase, dar păstraţi totuşi şi legături text– Gândiţi-vă să faceţi paginile disponibile şi persoanelor cu ţ ţ p g p ş p

disabilităţi• Luaţi în considerare adăugarea unui motor de căutare în

cadrul site-ului• Nu permiteţi părăsirea accidentală a site-ului

– Faceţi distincţie între link-urile locale şi link-urile ce dus vizitatorii în afara site-ului

41

în afara site-ului– Daţi paginilor un “look” consistent



Puneţi lucrurile importante la suprafaţăPuneţi lucrurile importante la suprafaţău eţ uc u e po ta te a sup a aţău eţ uc u e po ta te a sup a aţă

• Paginile Web sunt de obicei mai mari decât fereastra înPaginile Web sunt de obicei mai mari decât fereastra în care acestea sunt vizualizate– Primul lucru pe care vizitatorii îl văd este partea de sus a paginilor

WebWeb– Mulţi vizitatori nu vor face niciodată scroll down

• Partea de sus a unei pagini ar trebui să spună vizitatorilorPartea de sus a unei pagini ar trebui să spună vizitatorilor tot ce trebuie aceştia să cunoască despre pagina respectivă

D ă i it t t i d t î it t ă– Dacă un vizitator este pierdut în site s-ar putea să nu remarce legăturile puse în josul paginii

– Adesea, legăturile puse în susul şi josul paginii sunt o idee bună– … mai ales în cazul unui şir liniar de pagini, în care link-urile

posibile sunt Previous, Next şi (poate) Home sau Table of Contents

42

Contents



OrganizaţiOrganizaţi--vă paginilevă paginileO ga aţO ga aţ ă pag eă pag e• Orice organizare este mai bună decât nici o

organizareorganizare• O ierarhie (arbore) de obicei funcţionează cel mai

binebine– Puneţi conceptele cele mai importante şi mai generale

în apropierea părţii de sus– Paginile de mai jos sunt în general mai specifice

• Arborii nu ar trebui să fie prea adânciUtili t ii i ă ă t lt i i– Utilizatorii nu apreciază să traverseze multe pagini pentru găsirii acelei pagini de interes

• Arborii nu ar trebui să fie nici întinşi pe orizontalăArborii nu ar trebui să fie nici întinşi pe orizontală– Utilizatorilor nu le place să traverseze o listă lungă de

legături pentru găsirea aceleia de care au nevoie

43

• Desenaţi o poză a organizării site-ului!Curs Programare Web, anul 4 C5 – Curs 8


Alte organizăriAlte organizăriAlte organizăriAlte organizări• Grid:

HTML XML XSLT

Lecture http://... http://... http://...Lecture http://... http://... http://...

Links http://... http://... http://...

Li i

Assignment http://... http://... http://...

• Liniar:– Paginile puse în ordinea în care trebuie citite, cu

legături Previous şi Next– Organizarea cea mai des întâlnită în tutoriale



Grafica în pagina principalăGrafica în pagina principalăG a ca pag a p c pa ăG a ca pag a p c pa ă

• Pagina principală (“home”) reprezintă punctul de pornire pentru vizitatorii site-ului– Grafica frumoasă face pagina să arate mai bine– Grafica complexă face pagina să se încarce mai greu

• Care este audienţa ţintă?Ca e este aud e ţa ţ tă– Clienţi potenţiali

• Modul de apariţie este important...p ţ p• ...dar majoritatea utilizatorilor nu vor aştepta mai mult de 7 sau

8 secunde pentru ca pagina să se încarce

Cli ţi i t ţi t d ţi j ţi– Clienţi existenţi, studenţi, angajaţi• Obţinerea informaţiei rapid este de mare importanţă



SiteSite--uri în continuă adaptareuri în continuă adaptareS teS te u co t uă adapta eu co t uă adapta e

• Multe site-uri trebuie actualizate frecvent– Folosiţi o imagine sau text New! – poate ajuta

la indicarea modificărilor survenite• Dar cât de mult rămâne un element “nou”?• Datele ataşate elementelor sunt mai informative

– Dacă informaţia este împrăştiată de-a lungul mai multor pagini s-ar putea să fie mai bine f l i i i i t l Wh t’ Nfolosirea unei pagini centrale What’s New

– Ex.: se pot pune anunţuri datate deasupra şi dă t i l î j l i iiadăuga materiale în josul paginii



FAQFAQQQ• Pentru multe site-uri o pagină FAQ (Frequently

Asked Questions) page cu răspunsuri se poateAsked Questions) page, cu răspunsuri, se poate dovedi deosebit de ajutătoare

O pagină FAQ este mai ales ajutătoare începătorilor din– O pagină FAQ este mai ales ajutătoare începătorilor din domeniu

– http://www.faqs.org/p q g• Cea mai mare problemă cu paginile FAQ este că

multe dintre ele sunt “false”– O companie pune o pagină FAQ despre propriile produse

ce, în mod evident, nu răspunde la întrebări venind din t tili t i lipartea unor utilizatori reali

• “Care este cel mai mare beneficiu al utilizării şamponului XYZ?”– Nu vă minţiţi clienţii!

47

Nu vă minţiţi clienţii!



Standarde de proiectareStandarde de proiectareSta da de de p o ecta eSta da de de p o ecta e

• O companie ar trebui să păstreze standarde de design pentru paginile Web ale companiei – Ele dovedesc identitatea companiei– Probleme:

• Grupuri şi indivizi şi-au stabilit propriile standarde şi nu sunt di i l hi bdispuşi la schimbare

• Oamenii nepotriviţi pot fi puşi să definească standardele de designg

– Ar putea să cunoască puţin sau nimic despre standardele deja existentePot decide folosirea de “prea multe” standarde lucruri ce arată– Pot decide folosirea de prea multe standarde – lucruri ce arată bine individual, dar care nu merg bine împreună

– Ar putea dura la nesfârşit finalizarea încât standardele să devină “any day now”

48

any day now– Ei au propriile idealuri şi ignoră sau uită utilizatorul



Tipuri de formate graficeTipuri de formate graficepu de o ate g a cepu de o ate g a ce

• Există trei formate grafice ce pot fi folosite pe Web:1. GIF (Graphics Interchange Format)( p g )2. JPG sau JPEG (Joint Photographic Experts

Group)Group)3. PNG (Portable Network Graphics)



Formatul GIFFormatul GIFo atu Go atu G• Cel mai comun format

– Puteţi specifica câte culori se folosesc (2, 4, 8, 16, etc.)

• Cu cât mai puţine culori cu atât mai mic va fi fişierul rezultat

Fişiere fără pierderi de calitate puteţi recrea– Fişiere fără pierderi de calitate – puteţi recrea exact imaginea originalăGIF urile pot fi animate– GIF-urile pot fi animate

– GIF-urile pot fi interlacedP i t t it fi idă i i il• Proprietate ce permite afişarea rapidă a imaginilor

– GIF-urile suportă transparenţăF l it t t d i i bit

50

• Folositoare pentru conturarea de margini arbitrare



Formatul JPGFormatul JPGo atu J Go atu J G

• Firşierele JPEG furnizează o schemă de compresie superioară atunci când există gradienţi de culoare în cadrul imaginii– Adecvat deci pentru fotografii– JPEG-uri au pierderi – unele informaţii sunt pierdute în

cadrul compresiei iar informaţia este interpolată (trucată) atunci când se recrează imaginea

– Se poate seta rata de compresie – cu cât mai multă compresie cu atât fişierul rezultat va fi mai mic, dar şi mai multă informaţie va fi pierdutămai multă informaţie va fi pierdută



Formatul PNGFormatul PNGo atu Go atu G

• Fişierele PNG au câteva avantaje:ş j– Alpha channels: puteţi avea transparenţă

variabilă (parţială)variabilă (parţială)– Gamma correction, puteţi obţine aceleaşi

culoari pe diverse platformeculoari pe diverse platforme– Two-dimensional interlacing

• PNG mai furnizează:– O mai bună compresie decât GIFO mai bună compresie decât GIF– O manieră mai puţin convenientă de a face

animaţii

52

animaţii



Introducere înIntroducere în DHTML:DHTML:Introducere în Introducere în DHTML:DHTML:Lucrul cu Obiecte Lucrul cu Obiecte BrowserBrowser



ConcepteConcepte: DHTML, BOM, DOM: DHTML, BOM, DOMCo cepteCo cepte , O , O, O , O

• DHTML se referă la ideea de generare de ţi t W b î d di i S b ăconţinut Web în mod dinamic. Se bazează pe

datele furnizate de către utilizator.• BOM (Browser Object Model) descrie modul în

care programăm diversele obiecte disponibile f l i î t bspre folosire într-un browser.

• DOM (Document Object Model) se referă la un standard W3C de programare a unei pagini web (documentul). Ignoră obiectele browser non-t d dstandarde.



DHTMLDHTMLDHTMLDHTML• De fapt DHTML reprezintă o colecție de p p ț

tehnologii: HTML, CSS, JavaScript, DOM, BOM etcBOM, etc.

Dhtml-ul permite limbajelor de scripting ( Javascript ) sămodifice variabilele din limbajul de definiție a unei paginii web in așa manieră încat să modifice aspectulpaginii web, in așa manieră încat să modifice aspectul și conținutul paginii respective, după reîncarcarea ei.

Astfel se determină modul în care o pagină reacționeazăAstfel, se determină modul în care o pagină reacționeazăîn timp ce este vizualizată, caracteristica de bază a DHTML – ului .



Exemplu de DHTML…Exemplu de DHTML…Exemplu de DHTML…Exemplu de DHTML…



ObiecteObiecte BrowserBrowser StandardeStandardeObiecte Obiecte Browser Browser StandardeStandarde

windowwindowwindowwindowobjectobject

locationlocationobjectobject

historyhistoryobjectobject

documentdocumentobjectobject

navigatornavigatornavigatornavigatorobjectobject

screenscreenobjectobject

formsformsbj tbj t

imagesimagesbj tbj t

linkslinksbj tbj t

57

objectobject objectobject objectobject



Obiectul Obiectul windowwindowOb ectuOb ectu dodo

• Obiectul window reprezintă cadrul sau pfereastra, sau browserul, ce conţine o pagină webpagină web.

• Exemple de folosire: window.alert()

window prompt() window.prompt()

window.confirm()



Atributul Atributul defaultStatusdefaultStatus

• Putem actualiza atributul window.defaultStatus pentru a modifica textul status-bar-ului ferestreimodifica textul status bar ului ferestrei browser-uluiForma generală:Forma generală:window.defaultStatus = new

istring;



Exemplul 1



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-p gstrict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>

<title>Status Bar Update</title>title Status Bar Update /title

<script language = "JavaScript 2.1"type="text/JavaScript">



</script>p</head><body onLoad="JavaScript:main();">

<h1 style="text-align:center">Status Bar Update</h1><hr size="2"

width="85%" />width= 85% />

<p>Check the Status Bar below.</p>

/b d

61

</body></html>



Metoda Metoda setInterval()setInterval()()()

• Permite repetarea automată a unui apel de funcţie la un număr specificat de milisecunde. Întoarce un obiect “interval”, de care metoda window.clearInterval() are nevoie pentru oprirea repetiţiei:p p p ţobject = setInterval(“function()”,( () ,millisecond delay)



DateDateateate

• Obiectul Date permite lucruri precum obţinerea datei ultimei modificări, calendare, ceasuri, etc.

• Metode utile Date includgetDate()

getDay()getDay()

getFullYear()

getMonth()

getHours()g ()

getMinutes()

getSeconds()

63

getSeconds()



Exemplul 2



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<title>Status Bar Clock</title>


</script>

</head>



<body><h1 style="text-align:center">Status Bar Clock</h1><h1 style= text align:center >Status Bar Clock</h1><hr size="2"

width="85%" />

<p><a href="#"

Cli k "j i t t tCl k() " St t St t B Cl k /onClick="javascript:startClock();">Start Status Bar Clock</a><br /><a href="#"

onClick="javascript:stopClock();">Stop Status Bar Clock</a>

</p>p</body>

</html>



Obiectul historyObiectul historyOb ectu sto yOb ectu sto y

• Obiectul history permite scrierea de cod y pcare să navigheze istoria unui browser webweb.

• Include metoda history.go() ce i t l î t ă t i diprimeşte o valoare întreagă pentru a indica

dacă este necesar mersul înapoi (valoare negativă) sau înainte (valoare pozitivă).

• Metodele history back() şi• Metodele history.back() şihistory.forward() permit navigarea i t lă

68

incrementală.Curs Programare Web, anul 4 C5 – Curs 8


Exemplul 3



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www w3 org/TR/xhtml1/DTD/xhtml1-strict dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1 strict.dtd >


<title>Programming the History Object</title>title>Programming the History Object /title>


</script>

70

/scr pt</head>



<body><h1 style="text-align:center">Programming the History Object</h1><hr size="2"

width="85%" />

<p><p><a href="#"

onClick="javascript:NavHistory(true);">Go Back One Page in History</a><br /><a href="#"

onClick="javascript:NavHistory(false);">Go Forward One Page in History</a><br /><a href="#"<a href= #

onClick="javascript:NavHistory(false,-2);">Go Back Two Pages in History</a></p>

</body></html>



Obiectul Obiectul locationlocationOb ectuOb ectu ocat oocat o

• Obiectul location permite scrierea de cod care să modifice URL-ul paginii curent, realizând efectiv navigarea către o altă gpagină web.

• Putem face asta în două feluri:Putem face asta în două feluri:– Actualizând atributul window.location.hrefwindow.location.href

– Prin invocarea metodei window.location.replace()window.location.replace()

• A doua abordare duce şi la actualizarea paginii anterioare în istoria browserului

72

paginii anterioare în istoria browserului.Curs Programare Web, anul 4 C5 – Curs 8


Exemplul 4





<title>Programming the Location Object</title>


</script>

</head>

<body><h1 style="text-align:center">Programming the Location Object</h1><hr size="2"

width="85%" />width= 85% />

<p><form id = "navForm">

<input type = "button"id = "btnChangeLocation"value = "Go to a Random Page"onClick = "JavaScript:VisitRandom();">onClick = JavaScript:VisitRandom(); >

</form></p>

</body></html>



Obiectul Obiectul navigatornavigatorOb ectuOb ectu a gatoa gato

• Obiectul navigator permite detectarea de i f ţii i t t i i d li ţi l tă dinformaţii importante privind aplicaţia rulată de utilizator pentru vizualizarea paginii web. At ib t l bi t l i i t î t• Atributele obiectului navigator pot întoarce informaţii despre numele şi versiunea browserului (navigator appName) sau numele şi(navigator.appName), sau numele şi versiunea OS (navigator.userAgent).

• Folositor pentru scrierea de scripturi de detecţie a• Folositor pentru scrierea de scripturi de detecţie a browser-ului.



Exemplul 5



<head><title>Detecting Browser Information</title>

<script language = "JavaScript 2.1"type="text/JavaScript"> </script>

</head><body onLoad="javascript:GetBrowserInfo();">

<h1 style="text-align:center">Detecting Browser Information</h1>

78

<hr size="2"width="85%" />

</body></html>



ObiectulObiectul screenscreenObiectul Obiectul screenscreen

• Obiectul screen include un grup de g patribute folositoare:window.screen.widthwindow.screen.widthwindow.screen.heightwindow screen colorDepthwindow.screen.colorDepth



Exemplul 6





<title>Detecting Screen Information</title>

<script language = "JavaScript 2.1" // -->/ i

p g g ptype="text/JavaScript">

</script>

</head>Curs Programare Web, anul 4 C5 – Curs 8


ObiectulObiectul documentdocumentObiectul Obiectul documentdocument

• Obiectul document reprezintă pagina curentă afişată. I l d ă d t ib t f l it• Include un număr de atribute folositoare precum:window.document.forms

window document linkswindow.document.links

window.document.images



QuizQuizQuQu

• Scrieti o aplicaţie ce afişează în status bar p ţ şcoordonatele cursorului mouse-ului pentru un eveniment onClick asupra unui elementun eveniment onClick asupra unui element html.



Ce esteCe este DOM?DOM?Ce esteCe este DOM?DOM?• Document Object Model (DOM) – model de programare

pentru reprezentarea obiectelor conţinute într un documentpentru reprezentarea obiectelor conţinute într-un document web.

• Există mai multe nivele ale Standardului DOM - W3C.Există mai multe nivele ale Standardului DOM W3C.

• Level 0: Nu e chiar un nivel standard. Se referă la modelele pentru d l d il d b i ii d l idezvoltare a vendorilor de browsere a gestiunii documentelor anterioare standardelor.

• Level 1: Prima recomandare de Standard DOM a W3C. Include două părţi: core (acoperă XML & HTML) şi o secţiune doar pentru HTML.

• Level 2: Include adăugarea de evenimente şi style sheets. Suportat de versiunile curente ale majorităţii browserelor populare.j ţ p p

• Level 3: Include adăugări de elemente adresate documentelor XML.



Vederi LiniareVederi Liniare vs.vs. IerarhiceIerarhiceVederi LiniareVederi Liniare vs. vs. IerarhiceIerarhice• Nivelul 0 al DOM abordează o vedere

oarecum liniară a obiectelor dintr-un document web:strUserName = window.document.frmMain.txtUser.window.document.frmMain.txtUser.value



Vederi LiniareVederi Liniare vs.vs. IerarhiceIerarhiceVederi LiniareVederi Liniare vs. vs. IerarhiceIerarhice• Celelalte nivele folosesc o vedere ierarhică.

Î l d id tifi d t i HTML• În loc de identificarea unor nume de tag-uri HTML specifice, vederea funcţionează similar modului de parcurgere a unor noduri într-un arbore.parcurgere a unor noduri într un arbore.

• Fiecare nod are potenţialul de a fi parent, sibling sau childpentru celelalte noduri din document.



Exemplul 1





<title>Sample Table</title></head></head><body>

<h1 style="text-align:center">Sample Table</h1><hr size="2"

width="85%" />t bl b d 1<table border=1><tr>

<td>ONE

</td><td>

TWO</td>

</tr><tr><tr>

<td>THREE

</td><td>

FOURFOUR</td>

</tr></table>

</body>

91

</html>





Pregătirea paginilor pentruPregătirea paginilor pentru DOMDOMPregătirea paginilor pentru Pregătirea paginilor pentru DOMDOM• Toate paginile trebuie să fie documente XHTML

bine-formate.• Toate paginile trebuie să includă un DOCTYPEp g

valid.• Trebuie să includeţi tot textul în elementeleTrebuie să includeţi tot textul în elementele

XHTML valide.• Elementele relevante sunt identificate folosind• Elementele relevante sunt identificate folosind

atributul id.



AtributulAtributul ididAtributul Atributul idid• id este atributul XHTML ce furnizează un

identificator intern al unui element XHTML (tag)(tag).

• Pentru a putea manipula/citi elemente t ib t l id t b i ă fi iatributele id trebuie să fie unice.



Exemplul 2





<title>Sample Table</title></head><body>body

<h1 style="text-align:center"id="H1PageTitle">Sample Table</h1>

<hr size="2"width="85%"id="hr1" />id= hr1 />

<table border=1id="SampleTable">

<tr id="SampleTableRow1"><td id="SampleTableTD1">

EONE</td><td id="SampleTableTD2">

TWO</td>

</tr><tr id="SampleTableRow2">

<td id="SampleTableTD3">THREE

</td></td><td id="SampleTableTD4">

FOUR</td>

</tr>/ bl

96

</table></body>

</html>



DHTML și AJAXDHTML și AJAXDHTML și AJAXDHTML și AJAX

• În prezent DHTML și Ajax se folosesc împreună• În prezent DHTML și Ajax se folosesc împreună• Un exemplu clasic este următorul:

– Avem un meniu cu tab-uriAvem un meniu cu tab uri– Când se apasă pe un tab, conținutul tab-ului respectiv este preluat

prin Ajax– Rezultatul ( conținutul preluat de pe server prin Ajax ) este pus într-

un tag de tip “div”, prin apeluri javascript, dinamice:• document.getElementById(‘tab’+current tab nr).innerHTML=htmlRezg y ( _ _ )



ReferinReferinţţeee ee e ţţee

• Unele exemple din această prezentare au fost preluate din tutorialul W3Schools de la http://www.w3schools.com/css/css_syntax.asp

• Un foarte bun tutorial online este şi cel al lui Dave Raggett, Adding a Touch of Style, disponibil la gg , g y , phttp://www.w3.org/MarkUp/Guide/Style

• Index DOT Css este de asemenea o sursă utilăIndex DOT Css este de asemenea o sursă utilăde informare pentru CSS: http://www blooberry com/indexdot/css/index htmlhttp://www.blooberry.com/indexdot/css/index.html



Tema de casăTema de casă• Tema constă în analiza a :

1. Ce înseamnă stil bun de construcție a site-urilor Web (puteți consulta oricare dintre site urile online http://info med yale edu/caim/manual/site-urile online http://info.med.yale.edu/caim/manual/, http://www.w3.org/Provider/Style/, sau orice altă sursă).

2. Exemplificați problematica de stil pe un caz real. Pentru aceasta veți lua un exemplu de site (puteți consulta și http://www.webpagesthatsuck.com/) real și îl veți analizade site (puteți consulta și http://www.webpagesthatsuck.com/) real și îl veți analiza conform criteriilor pe care le-ați identificat la punctul anterior.

• Veți urmări în principal (dar nu numai):– Prezentarea ideilor legate de stiluri Web– Prezentarea propriilor voastre păreri vizavi de unele dintre site-urile reale (elemente

pro și contra). – se admite cel mult o singură captură de ecran cu respectivul site.• Reguli de trimitere:

– Se acceptă doar documente în format PDFSe acceptă doar documente în format PDF– Formatare: pagina A4, font Times New Roman, dimensiune 12, fără spațiere, margini

2,5 cm stânga, dreapta, jos, sus.– Eseul trebuie să se întindă pe minim 1 pagină și maxim 3 pagini.

Răspunsurile se trimit electronic pe site (curs cs pub ro) până pe data deRăspunsurile se trimit electronic, pe site (curs.cs.pub.ro), până pe data de 11.04.2012, ora 23.55.– Nu se acceptă întârzieri: temele trimise după această dată

nu sunt luate în considerare.

Documents

Conţinut şi designi design îînn Programarea Webramarea Web