Digital Media Design (Web design)

1. Cel mai simplu mod de a crea pagini web

Paginile Web pot fi realizate in mai multe moduri, cel mai simplu dintre acestea constand in editarea documentului intr-un editor de texte obisnuit (Word) si salvarea sa ca pagina pentru Web (Save as- HTML document). Respectarea urmatorilor pasi permite crearea unor documente pentru Web mai elaborate - continand imagini, legaturi la alte pagini etc.:

Crearea documentului

A. se deschide editorul de texte Word ;

B. se deschide (sau se creaza si se editeaza) documentul care va fi pagina Web;

File - Open: se alege documentul dorit si se deschide sau
File - New: se creaza un nou document cu informatiile ce vor fi publicate pe Web

C. se pregateste documentul pentru retroversiune:

File - Properties - Summary: se completeaza campurile:

: cu titlul documentului in lucru
A nu se confunda titlul documentului cu numele fisierului.
Titlul documentului va aparea pe bara de titlu a navigatorului folosit de cel ce iti viziteaza paginile, precum si pe bara de meniu din partea de jos ecranului. De asemenea, titlul va fi listat de catre motoarele de cautare atunci cand iti gasesc si iti prezinta paginile. Este de preferat sa nu depaseasca 8 cuvinte.

: cu cuvintele cheie
Trebuie trecute doar cuvintele cheie ce descriu exact continutul documentului. Acestea vor fi tastate succesiv, separate prin virgula. (Ex.: cursuri, curs, educatie, online) In general, motoarele de cautare indexeaza paginile web dupa cuvintele cheie specificate. Acest camp (ca si celalalt dealtfel) este optional. Se inchide fereastra de dialog Summary cu OK.

Format - Background: se alege culoarea pentru fundalul paginii

Salvarea documentului

Se salveaza documentul ca pagina pentru Internet:

File - Save as - HTML (sau Web Page)
sau
Save for Web
Se completeaza campul pentru numele fisierului cu un sir de caractere, preferabil scurt si semnificativ. Nu folosi spatii si nici semne de punctuatie sau simboluri.
Se verifica extensia fisierului - obligatoriu html sau htm. In cazul in care ai mai multe documente ce vor fi publicate pe Internet, legate intre ele prin linkuri, fisierul ce va fi pagina de garda (HomePage - prima pagina din site) va trebui salvata sub numele index.html.

Un site este un loc de pe Web care are alocata o adresa si contine de la unul la cateva mii de fisiere legate intre ele. Atunci cand in linia de adrese a unui navigator (Internet Explorer, Opera, Netscape s.a.) se introduce o adresa (i.e. https://www.xprim.ro), programul cauta automat la adresa respectiva fisierul numit index.htm sau index.html. Daca insa se introduce o adresa specifica de fisier - cum ar fi https://www.1educat.ro/elearning/solution/solutii_elearning.html - atunci pagina afisata va fi solutii_elearning.html din directorul ELEARNING, subdirectorul SOLUTION.

Construirea sitului

Se repeta pasii 1 si 2 pentru toate documentele ce vor fi publicate impreuna in acelasi site. Imaginile ce vor fi incluse in documente trebuie salvate in format gif, jpeg sau png, pentru a putea fi recunoscute de navigatoare si afisate. Se copiaza (in Windows Explorer) toate fisierele ce vor constitui situl (fisierele htm/html si imaginile gif/jpeg) intr-un director nou creat. Daca numarul acestora este mare (peste 10-12), este recomandabila organizarea lor in subdirectoare: in directorul principal poate fi lasat doar fisierul Homepage (index.html), imaginile pot fi grupate in subdirectorul IMAGINI, iar celelalte fisiere pot fi grupate tematic in diferite subdirectoare.

Introducerea imaginilor

Se deschide din nou in Word fisierul html (din directorul sitului) ce va contine imagini. Se pozitioneaza cursorul in locul unde se doreste introducerea imaginilor.

Insert - Picture (sau Image): se alege imaginea prin apasarea butonului Browse din fereastra de dialog care apare; optiunea Relative path din aceeasi fereastra de dialog trebuie sa fie selectata.

Se salveaza si se inchide fisierul.
Se repeta operatiunea pentru fiecare fisier cu imagini.  O modalitate foarte utilizata si sigura de a pozitiona imaginile in paginile Web este de a crea tabele (Insert - Table) cu linii invizibile (Border: None sau border=0) si de a introduce imaginea intr-o celula a tabelului.

Crearea hyperlinkurilor

Se deschide in Word fisierul care va avea legaturi (linkuri) la alte fisiere (din directorul sitului sau de pe Internet). Se selecteaza un cuvant/sir de caractere sau o imagine care va fi punctul de legatura (ancora) la un alt document.

Insert - Hyperlink: se alege documentul la care va conduce (prin click) cuvantul/imaginea selectate; optiunea Relative path trebuie sa fie selectata.

Se repeta operatiunea pentru fiecare cuvant sau imagine ancora. Se salveaza documentul si se repeta operatiunea pentru fiecare fisier cu legaturi.

Testarea sitului

Din Windows Explorer, se face dublu-click pe fisierul index.html. Se testeaza toate linkurile.
Pentru corecturi, se repeta unul dintre pasii 3-5.

1. Realizeaza cateva pagini web asa cum ai invatat in aceasta lectie. Incearca sa faci pagini din ce in ce mai complexe, cu legaturi intre ele. 2. Incearca sa salvezi in format pentru web si alte pagini: prezentari Powerpoint, documente Pagemaker sau QuarkExpress, imagini Photoshop, baze de date Excel, Acces etc. 3. Retine toate problemele pe care le intampini si discuta-le cu colegii in cadrul Seminarului Online din aceasta saptamana.

Crearea paginilor web cu editorul de texte Word ramane cel mai simplu mod de a publica pe Internet, si datorita faptului ca majoritatea celor care au un computer au instalat acest program si stiu sa lucreze cu el. Desigur, vei observa curand dezavantajele. Editorii profesionisti de pagini HTML utilizeaza programe specializate cum ar fi Macromedia Dreamweaver, Microsoft Frontpage etc., insa pentru ajustari de finete lucreaza direct pe cod.

Lectia 2: Coduri HTML

Notiuni generale despre paginile web

Paginile web sunt fisiere text, care se pot realiza cu un editor obisnuit, apoi salvate ca 'text only', insa extensia trebuie sa fie obligatoriu htm sau html. Adaosul la textul obisnuit sunt codurile HTML (pot fi numite tag-uri, etichete, marcaje sau balize) care marcheaza documentul.

Comparatia potrivita ar fi cu editorul Word: pentru a marca titluri si subtitluri, marim dimensiunea fontului, apasam butonul bold, etc. sau ii schimbam stilul in Heading 1 si Heading 2. Similar, in limbajul HTML, care este un limbaj de marcare (HyperText Markup Language) adaugam balizele H1, B etc.

Un 'navigator' (cum ar fi: Internet Explorer, Opera sau Netscape) citeste aceste fisiere text si interpreteaza codurile pentru a afisa corect continutul documentului. Balizele nu sunt afisate, ele doar 'spun' navigatorului (browserului) cum sa afiseze continutul lor.

Concret, sa luam urmatorul exercitiu: Deschide editorul Notepad (Start - Programs - Accessories - Notepad) si scrie un text: ANTIRID - Pagina de ras - . Apoi salveaza documentul cu numele acumstiu.html (extensia html este obligatorie si este preferabil sa nu folosesti spatii in numele fisierului). Inchide Notepad si da dublu-click pe fisierul pe care tocmai l-ai creat. Se va deschide Internet Explorer sau Netscape Navigator si va afisa pagina ta web.

Coduri HTML de baza

Sa presupunem ca vrem ca textul ANTIRID sa fie titlul: tot ce trebuie sa facem este sa deschidem din nou fisierul html in Notepad si sa marcam cuvantul cu balize pentru titlu (in engleza - heading). Fisierul va arata astfel:

Observa ca trebuie sa indici sfarsitul titlului, printr-o baliza similara, care are in plus un slash '/'. Tot ce se va gasi intre <h1> (codul de inceput) si </h1> (codul de final) va fi afisat de navigator ca fiind 'titlu de nivel 1' - heading 1.

Intoarce-te in navigator si fa click pe butonul Refresh (respectiv Reload, in Netscape) sau apasa F5. Ar trebui sa arate aproximativ in modul urmator:

Un document HTML corect are doua sectiuni: o parte de antet (head), unde se descrie documentul, si o parte de continut (body) care cuprinde ceea ce se va afisa in browser. Pagina cu continut html trebuie sa fie declarata ca atare prin eticheta . Astfel, codul sursa trebuie sa arate in felul urmator:

HTML>
<HEAD>
</HEAD>
<BODY>
<h1>ANTIRID</h1> - pagina de ras -

</BODY>
</HTML>

Observa ca se marcheaza cu coduri inceputul si sfarsitul fiecarei sectiuni. In cadrul sectiunii <head> vom invata un singur cod: <title>, care marcheaza titlul logic al documentului. Adauga, in sursa din Notepad, in sectiunea <head>, urmatoarele:

<HEAD>
<title>Pagina personala</title>

</HEAD>

apoi salveaza si verifica in browser. Pe bara de titlu a navigatorului, in partea de sus, a aparut 'Pagina personala'. In continuare, ne vom ocupa de partea de continut a documentului, cuprinsa intre balizele <body> si </body>. Vom marca 'pagina de ras' ca fiind titlu de nivel 3 (Heading 3), apoi vom adauga un paragraf folosind baliza <p>.

<h1>ANTIRID</h1> <h3>- pagina de ras -</h3>

<p>
Doi programatori stau intr-un bar.
</p>

Salveaza si verifica noul aspect. Sa mai adaugam doua paragrafe si o linie orizontala (horizontal rule)

<HTML>
<HEAD>
<title>Pagina personala</title>
</HEAD>
<BODY>

<h1>ANTIRID</h1> <h3>- pagina de ras -</h3>

<hr>

<p>Doi programatori stau intr-un bar.</p>

<p>- Vezi tipa aceea? Uite ce 'properties' are.</p><p>- Da.
Am 'testat-o' aseara. Sunt 'read-only'.</p>

</BODY>
</HTML>

Doua observatii aici:
*** Prima, ca baliza <hr>, pentru linia orizontala, nu are nevoie de baliza corespondenta pentru inchidere. Este oarecum logic - nu prea este necesara.
*** A doua observatie este ca browserul interpreteaza formatarile exclusiv citind balizele - daca ii semnalezi, in mijlocul unui rand din Notepad, ca se termina paragraful si incepe unul nou, atunci se va conforma si va afisa un alt paragraf.

Sa presupunem ca vrem sa evidentiem in text cuvantul 'programatori'. Baliza care se foloseste pentru text ingrosat este <b> (de la Bold). Astfel, aplicand regulile invatate, vom avea urmatoarea secventa in sursa:

Observam ca balizele HTML se pot intercala - in cadrul paragrafului marcat cu <p>, respectiv </p>, avem un text marcat cu <b>, respectiv </b> pentru inchidere. Similar, pentru a aplica aceluiasi text o formatare cu litere cursive (inclinate), folosim baliza <i> (de la Italic):

Regula: Ultima baliza deschisa este prima care se va inchide.

Spune de ce secventa urmatoare NU este corecta:   <p>Doi <b><i>programatori</b></i> stau intr-un bar.</p>

Introducerea imaginilor

Imaginile care se pot introduce in paginile pentru web trebuie sa fie in format jpg, gif sau png. Codul este <img>, care are obligatoriu un atribut prin care se specifica adresa imaginii.

Sa aducem in directorul cu fisierul nostru, acumstiu.html, o imagine - de exemplu, londra.jpg. O vom apela din sursa (in Notepad) prin sintaxa:

Daca imaginea pe care dorim sa o apelam (1sigla.gif) se afla la o adresa pe Internet, atunci vom scrie toata calea:

2.4. Liste

Listele pot fi de doua feluri: liste ordonate - <ol> - (ordered lists) sau neordonate - <ul> - (unordered lists). Itemii cuprinsi intr-o lista se marcheaza cu baliza <li> (list item).
Sa cream o lista ordonata:

<p>Vrei sa stii daca esti bolnav de informatica? Esti bolnav daca:</p>
<ol>
<li>In fiecare dimineata iti faci un backup</li>
<li>Ultimul tau gand inainte de a adormi este 'Shutdown complete'.</li>
<li>Cauti butonul 'Cancel' dupa ce ai apasat un buton gresit la lift
si te miri cat de saraca e interfata utilizator.</li>
<li>Faci dublu click pe butonul de la lift.</li>
<li>Din tren, admiri scrolling-ul peisajului.</li>
</ol>

2.5. Tabele

Vom crea un tabel cu doua linii si trei coloane. Codul <tr> (de la table row) se foloseste pentru a marca inceputul, respectiv sfarsitul unei linii, iar <td> se foloseste pentru celule de tabel (table data).

<table border='1'>
<tr>
<td>lin 1, col 1</td>
<td>lin 1, col 2</td>
<td>lin 1, col 3</td>
</tr>
<tr>
<td>lin 2, col 1</td>
<td>lin 2, col 2</td>
<td>lin 2, col 3</td>
</tr>
</table>

Da diverse valori atributului 'border', pentru a vedea efectul.

2.6. Hyperlinkuri

Un link (sau un text activ) in cadrul unui fisier html se marcheaza prin codul <a>, respectiv </a> pentru inchidere. Pentru a indica fisierul la care se face referire, se utilizeaza atributul href (de la hypertext reference).

Copiem (sau cream) in directorul in care lucram un alt fisier html - de exemplu computer.html. Inseram sintaxa de hyperlink pentru cuvantul 'programatori' din textul initial, in fisierul 'acumstiu.html', deschis cu Notepad:

Revenind in browser, da F5 pentru Refresh, apoi fa click pe cuvantul activ pe care tocmai l-ai creat. Ar trebui sa te conduca la fisierul 'computer.html'. Daca acest lucru nu se intampla, verifica daca:

1. fisierul 'computer.html' exista in directorul in care este si 'acumstiu.html'
2. sintaxa de hyperlink este corecta, conform cu modelul de mai sus.

1. Sa presupunem ca vrei sa ai propriul tau fisier html cu referinte la cateva pagini pe care le accesezi mai des, pentru a nu mai tasta de fiecare data adresa fiecaruia. Vei crea o lista neordonata, in care vei scrie fiecare link favorit. Astfel, cand intri pe Internet, vei deschide pagina ta de 'Favorites' de pe propriul calculator, care iti va simplifica lucrul. Pentru ca fiecare link accesat sa fie deschis intr-o noua fereastra a browserului, trebuie sa adaugi la fiecare hyperlink atributul 'target' cu valoarea '_new'. Deschide Notepad si creaza un nou fisier: 'favorite.html', pe care il salvezi pe Desktop. Copie exemplul de mai jos (insereaza textul si da click dreapta pe el, apoi Copy; mergi inapoi in Notepad, apasa butonul dreapta al mouse-ului, apoi Paste). Inlocuieste linkurile si textele active cu propriile tale linkuri: <html> <head><title>Firul Ariadnei</title></head> <body> <h2>Linkuri favorite</h2> <hr> <ul> <li> <a href='https://www.google.com' target='_new'>Motor de cautare</a> </li> <li> <a href='https://www.yahoo.com' target='_new'>Director web</a> </li> <li> <a href='https://www.1educat.ro' target='_new'>Oferte educationale</a> </li> <li> <a href='https://www.academiaonline.ro' target='_new'>Cursuri</a> </li> <li> <a href='https://www.xprim.ro' target='_new'>Exprima-te pe web</a> </li> </ul> </body> </html> 2. Folosind balizele invatate in aceasta lectie, creaza fisiere html cu diverse continuturi. Experimenteaza si iar experimenteaza. Deschide sursele paginilor web pe care le ai in propiul computer (din browser: View - Source) si invata coduri noi. Daca ai realizat un site si l-ai incarcat pe Internet, scrie linkul in Forumul de la www.elearning-forum.ro (adresa directa: https://www.elearning-forum.ro/forum/viewforum.php?f=9).

Lectia 3: Marcaje CSS

. Utilitate

Foarte pe scurt, utilizarea codurilor CSS (Cascading Style Sheets) a aparut ca o solutie la doua probleme ale limbajului HTML:

• insuficienta balizelor HTML pentru nevoile de design;
• incarcarea paginilor scrise cu coduri HTML - pentru fiecare paragraf trebuiau specificate atributele care il definesc.

Atentie! 1. Paginile web raman aceleasi fisiere cu extensia html, ce difera este doar stilul de formatare. 2. Stilurile de tip CSS in realizarea paginilor web trebuie privite doar ca o extensie a limbajului HTML 3. Se pot folosi coduri HTML combinate cu balize CSS.

De exemplu, sa presupunem ca avem doua paragrafe intr-o pagina web, care au urmatoarele caracteristici:

• setul de caractere: Tahoma;
• marimea: medie;
• culoarea: rosu;
• atribute de caractere: bold si italic;

In HTML, paragrafele vor arata in modul urmator:

<p><font face=Tahoma size=2 color=red><b><i>
'Va pot spune incotro merge Europa Universitatile mileniului III sunt
cu totul altfel decat cele pe care le aparam cu dintii. Conservatorismul
actual trebuie sa dispara. Universitatile din Occident gandesc mult mai
departe. Au niste ani-lumina avans in gandire. Se vorbeste de universitatile
virtuale la modul foarte real. Universitati fara sedii, legate (mai intai)
de oameni si de idei.'
</i></b></font></p>

<p><font face=Tahoma size=2 color=red><b><i>
Studentii manifesta un grad ridicat de interes pentru noile tehnologii ale
informatiei si comunicarii, accesul prin Internet la resurse variate cu
informatii de ultima ora, prezentate intr-o forma atractiva, precum si
posibilitatea stabilirii unui contact cu autorii articolelor fiind
factori de motivare ce determina orientarea spre cercetare
interdisciplinara si pentru specializare pe domeniile programei
de studiu.
</i></b></font></p>

Folosind CSS, vom avea:

<p style='font-family:Tahoma; font-size:12px; color:red; font-weight:bold;
font-style:italic;'>
'Va pot spune incotro merge Europa Universitatile mileniului III sunt
cu totul altfel decat cele pe care le aparam cu dintii. Conservatorismul
actual trebuie sa dispara. Universitatile din Occident gandesc mult
mai departe. Au niste ani-lumina avans in gandire. Se vorbeste de
universitatile virtuale la modul foarte real. Universitati fara sedii, legate
(mai intai) de oameni si de idei.'
</p>

<p style='font-family:Tahoma; font-size:12px; color:red; font-weight:bold;
font-style:italic;'>
Studentii manifesta un grad ridicat de interes pentru noile tehnologii
ale informatiei si comunicarii, accesul prin Internet la resurse variate
cu informatii de ultima ora, prezentate intr-o forma atractiva, precum si
posibilitatea stabilirii unui contact cu autorii articolelor fiind factori de
motivare ce determina orientarea spre cercetare interdisciplinara si
pentru specializare pe domeniile programei de studiu.
</p>

OK, insa care este avantajul? Am scris tot atat de mult cod.

Ideea este ca: 1. Balizele CSS ofera posibilitati mai multe de formatare a textelor si blocurilor de elemente din paginile web. 2. Daca avem un stil de paragraf pe care il folosim foarte des, acesta se poate defini generic in antetul paginii HTML sau intr-un fisier separat, cu extensia css, care se apeleaza din pagina html.

Fisier CSS extern

Mai concret, ne vom ocupa de cazul in care dorim un fisier separat, extern, in care definim stilurile pe care le vom folosi in toate documentele dintr-un site.

Acest fisier se creaza in Notepad si se salveaza cu extensia css.

Deschide Notepad, defineste generic paragraful ca avand caracteristicile cerute mai sus, apoi definiti titlul de nivel 1 (H1), dupa modelul urmator:

. Utilitate

Foarte pe scurt, utilizarea codurilor CSS (Cascading Style Sheets) a aparut ca o solutie la doua probleme ale limbajului HTML:

• insuficienta balizelor HTML pentru nevoile de design;
• incarcarea paginilor scrise cu coduri HTML - pentru fiecare paragraf trebuiau specificate atributele care il definesc.

Atentie! 1. Paginile web raman aceleasi fisiere cu extensia html, ce difera este doar stilul de formatare. 2. Stilurile de tip CSS in realizarea paginilor web trebuie privite doar ca o extensie a limbajului HTML 3. Se pot folosi coduri HTML combinate cu balize CSS.

De exemplu, sa presupunem ca avem doua paragrafe intr-o pagina web, care au urmatoarele caracteristici:

• setul de caractere: Tahoma;
• marimea: medie;
• culoarea: rosu;
• atribute de caractere: bold si italic;

In HTML, paragrafele vor arata in modul urmator:

>> Click aici pentru a vedea rezultatul.

Folosind CSS, vom avea:

>> Click aici pentru a vedea rezultatul.

OK, insa care este avantajul? Am scris tot atat de mult cod.

Ideea este ca: 1. Balizele CSS ofera posibilitati mai multe de formatare a textelor si blocurilor de elemente din paginile web. 2. Daca avem un stil de paragraf pe care il folosim foarte des, acesta se poate defini generic in antetul paginii HTML sau intr-un fisier separat, cu extensia css, care se apeleaza din pagina html.

Fisier CSS extern

Mai concret, ne vom ocupa de cazul in care dorim un fisier separat, extern, in care definim stilurile pe care le vom folosi in toate documentele dintr-un site.

Acest fisier se creaza in Notepad si se salveaza cu extensia css.

Deschide Notepad, defineste generic paragraful ca avand caracteristicile cerute mai sus, apoi definiti titlul de nivel 1 (H1), dupa modelul urmator:

Salveaza fisierul creat cu numele 'stilulmeu.css', intr-un director gol.
Apoi creaza, in acelasi director, un fisier html, in antetul caruia apeleaza fisierul de stiluri (neaparat in sectiunea HEAD):

<html>
<head>
<title>Pagina mea cu stilurile mele</title>
<link rel='stylesheet' type='text/css' href='stilulmeu.css' />
</head>
<body>

<h1>Acesta este titlul, asa cum l-am definit</h1>

<p>Acesta este primul paragraf, care are caracteristicile definite
in fisierul de stiluri 'stilulmeu.css'. Prin modificarea fisierului css voi
obtine efecte in toate paginile html care il apeleaza.</p>
<p>Pot, de exemplu, sa schimb culoarea in 'blue'.</p>
<p>Al treilea paragraf, ca si toate care ar putea urma, se
conformeaza normelor stilului meu.</p>

</body>
</html>

Salveaza, apoi deschide-l intr-un browser.

>> Click aici pentru a vedea rezultatul.

Experimental, intoarce-te in Notepad, deschide fisierul de stiluri si modifica dupa cum urmeaza:

Apoi salveaza fisierul css, revino in browser si apasa F5, pentru Refresh.

Poti defini, in fisierul CSS, stilurile favorite pentru textele cuprinse in paragraf (p), titluri (de la h1 pana la h6), celule de tabel (td) etc. Apoi poti apela acest fisier din toate paginile web pe care le creezi.

Marcaje de tip inline

Pana acum, ne-am ocupat doar de marcaje de tip bloc. Sa vedem ce folosim pentru a schimba culoarea sau marimea unui singur cuvant din cadrul unui paragraf sau dintr-un titlu. Pentru aceste interventii, se folosesc elemente de marcaj de tip inline.
Un astfel de marcaj inline este baliza <span>. Aceasta este folosita in cadrul unui alt marcaj, de tip bloc, fara sa determine trecerea la un alt rand.

Un exemplu:

>> Click aici pentru a vedea rezultatul.

Tot astfel, ii putem schimba culoarea, corpul de litera, grosimea etc. Mai mult, daca avem un stil de insertii de tip inline folosit destul de des intr-un site, putem defini atributele pentru <span> direct in fisierul nostru de stiluri:

. Gruparea

In fisierul css, se pot grupa mai multe elemente care au aceleasi atribute, dupa exemplul urmator:

Clasa

Sa presupunem ca, pentru nevoile noastre de design, avem nevoie de mai multe tipuri de formatari pentru textele din paginile web. Unul ar trebui sa fie definit pentru textul normal, care va constitui continutul propriu-zis al paginilor. Mai avem nevoie de un text cu caractere mai mici, pentru explicatii suplimentare. Si ne-ar mai trebui un text verde ingrosat, pe care il vom folosi intr-o coloana de tabel cu background galben.

In acest moment vom defini, in fisierul estesimplu.css, mai multe clase, pe care le vom apela in cadrul diverselor balize din fisierul html. Pentru a defini o clasa, ii alegem un nume (de preferat cat mai reprezentativ), ii adaugam un punct in fata si ii specificam caracteristicile, alaturi de alte balize:

Fisierul css va arata in modul urmator:

>> Iar fisierul html il poti vedea aici.

Experimenteaza. Observa. Invata singur. Pentru realizarea paginilor html, probabil vei folosi un instrument specializat, un editor de HTML cum ar fi Macromedia Dreamweaver sau Microsoft FrontPage, care sunt extrem de simplu de utilizat. Insa, pentru design profesional, vei fi nevoit sa faci corecturi in cod html.

Lectia 4: Principii de organizare vizuala

Chiar daca materialele proiectate pentru Internet includ imagini, sunet sau chiar scurte filme, textul va continua sa joace rolul major, dupa cum vom vedea si in lectia 6 - 'Design pentru Web'.

Aplicarea in design a catorva principii de organizare a textului va conduce la orientarea mai usoara in pagina, la structurarea mentala usoara a continutului. Se vor crea astfel conditii pentru a spori capacitatea vizitatorului de a manipula si retine informatia transmisa.

Majoritatea principiilor de structurare a continutului paginilor Web se bazeaza pe regulile gestaltiste de organizare perceptiva. Foarte pe scurt, aceste principii de organizare vizuala, de care trebuie sa se tina cont in proiectare, sunt urmatoarele:

Claritate si eleganta

O atentie corespunzatoare acordata esteticii continutului, prezentarea sa intr-o forma accesibila cititorului - sunt obiectivele majore care confera textului atributele unei componente eficiente a proiectarii paginilor pentru Internet. Un aspect elegant si un aranjament ordonat si logic arata consideratie pentru vizitatorii sitului.

Predictabilitate si regularitate

O data stabilita, structura de prezentare a materialului trebuie sa ramana constanta de la o pagina din site la alta. In cazul cand apar variatii de structura, modificarile se vor justifica prin necesitati de tip functional, dar nu vor fi facute schimbari de dragul schimbarilor, chiar daca vor tinti catre un design mai performant.

Standardizare si consistenta in folosirea unui stil

Acest principiu se refera la producerea unui aranjament care sa permita focalizarea rapida si fara ezitari pe elementele importante. Acesta va fi pastrat identic pentru toate secventele unei prezentari.

Orientare facila in continut

Meniul, prezent in fiecare pagina, va permite accesul direct sau foarte rapid la sectiunile majore din site.
Textul principal de prezentare (sinteza continutului unei pagini) se recomanda sa fie relativ scurt, pe cat posibil sa incapa intr-un singur ecran (fara derulare). Prin incarcarea rapida a informatiei relevante, utilizatorul va putea decide daca doreste sa citeasca, sa revada sau sa abandoneze pagina curenta.
Intr-o serie mai lunga de ecrane pana la informatia de continut, este binevenita o modalitate de indicare a pozitiei actuale in structura materialului - un 'fir al Ariadnei':

Pe situl 1educat.ro, pagina in care sunt prezentati furnizorii de solutii de elearning are in antet tot sirul de pagini, incepand cu indexul, care ajuta vizitatorul sa se orienteze in site:  1educat.ro  > resurse  > eLearning  > furnizori de solutii

Unitate si simplitate

Autorii de continuturi si designerii materialelor pentru web au tendinta sa includa prea multe detalii. Este indicat ca o pagina sa contina ideile principale si linkuri de acces de tip 'pentru mai multe informatii'.
Cateva cercetari care au analizat comparativ textele 'dense' si cele continand doar ideile principale (prin eliminarea a 40% din continutul primelor) au ajuns la concluzia ca nivelul de retinere a informatiilor ramane acelasi, in timp ce durata unei sesiuni de navigare se scurteaza semnificativ in cazul textelor 'prelucrate'.

Pozitionarea in ordinea importantei

Informatiile vor fi pozitionate in pagina in ordinea importantei si relevantei lor, locul privilegiat fiind in stanga, sus (pentru indivizii din culturile europeana, americana - care sunt obisnuiti sa parcurga vizual materialele intr-o forma de Z).

Gruparea elementelor dupa semnificatie

Acest principiu include cateva sugestii de 'topografia' paginii. Elementele subsumate aceleiasi idei trebuie sa fie demarcate de alte elemente sau grupuri de elemente prin folosirea spatiilor libere, casetelor cu cadru, culorilor diferite si altor modalitati de grupare-etichetare.
Constanta pozitiei acestor grupuri de elemente in contextul vizual faciliteaza distingerea lor.

Includerea listelor si tabelelor pentru structurarea continutului

Un tabel poate rezuma informatii complexe intr-o maniera ce favorizeaza intelegerea.
Sugestiile de aranjare a listelor sunt utile pentru un aranjament vizual eficient:

• folosirea 'bulinelor' de marcare a fiecarui item sau numerotarii identate
• aranjarea listelor se va face vertical
• alinierea va fi la stanga

Spatiere

Este indicat ca textul propriu-zis sa ocupe intre 25 si 50% din spatiul total al paginii.
Evidentierea unitatilor de text prin folosirea atributelor: text subliniat, ingrosat sau caractere aldine. O culoare diferita scoate in evidenta anumite informatii considerate importante. Spatierea dintre linii va tine cont de marimea corpului de litera.

Echilibru si simetrie

Textul trebuie distribuit echilibrat in pagina si ponderat prin includerea de grafice si imagini. Avalansa de informatii brute, neprelucrate din punct de vedere vizual, este contraindicata, conducand la dezorientarea vizitatorilor.

1. Incearca sa constientizezi propriul comportament in navigarea pe Web. Atunci cand abandonezi o pagina web, incearca sa determini motivul: informatia nestructurata si dificil de parcurs, designul inadecvat, dezamagirea la contactul cu informatia. Multe situri anunta un tip de informatie, pentru a atrage vizitatorii, si abia dupa ce ai deschis zece pagini din site, iti dai seama ca nu este nici pe departe ceea ce cauti. Iti poti inchipui ce efecte au aceste tehnici, pe termen mediu si lung. Probabil ai deja o lista de situri pe care stii ca nu are sens sa le vizitezi 2. In cadrul Seminarului Online, da exemple de situri bine realizate, care tin cont de principiile de organizare vizuala pe care le-ai invatat in aceasta lectie. Justifica propozitia: 'siturile bune sunt siturile vizitate'! Observa un site. In Internet Explorer, alegeti un site (propun www.1educat.ro). Faceti click pe suprafata alba din stanga sau dreapta. Apoi tineti apasat si faceti drag cu mouse-ul, incet, inainte si inapoi, stanga si dreapta, pentru a observa care sunt imagini, pana unde se intind si cum se imbina pentru a crea aspectul general. Comunica observatiile in Seminarul Online.

Lectia 5: Folosirea culorilor. Semnificatii.

Constatarea ca utilizarea unui camp cromatic variat sporeste randamentul activitatii intelectuale a propulsat si diversificat cercetarile despre influenta culorilor asupra psihicului uman. O imbinare adecvata de culori este un element important al materialelor de prezentare.

Efectul asupra psihicului este diferit de la o culoare la alta - unele culori faciliteaza deconectarea nervoasa sau sporesc gradul de concentrare a atentiei, in timp ce altele influenteaza pozitiv realizarea asociatiilor mintale, retinerea usoara a informatiilor prezentate etc.

5.1. Coduri de culoare

Modalitatea pe care o recomandam pentru introducerea unei culori in pagina web este folosirea codurilor hexazecimale.

Acesta este analog sistemului binar, de exemplu, care traduce orice numar din sistemul zecimal, utilizat de noi frecvent, intr-un numar care foloseste doar cifrele 0 si 1.
Un numar scris in hexa foloseste sistemul de numeratie hexazecimal, in care cea mai mica cifra este 0, iar ultima, a 16-a, este F. Sistemul foloseste urmatoarele cifre: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.

Orice culoare folosita pentru paginile web este un amestec de trei culori principale: rosu, verde si albastru (RGB). Codul de culoare pe care trebuie sa-l scrii are 6 cifre si este compus din trei parti: prima parte (primele 2 cifre) este pentru cantitatea de rosu, a doua parte este pentru verde, iar a treia pentru albastru.

Pentru a scrie culoarea rosu, vom avea saturatie maxima pe primele 2 cifre, si saturatie 0 pe urmatoarele 4 cifre: rosu va fi #ff0000. Click aici pentru a vedea un text scris cu rosu. Pentru a scrie un text cu un rosu mai inchis, vom scadea saturatia de rosu: #990000. Pentru a scrie un text cu culoarea violet, vom compune rosul cu albastru: #ff00ff. Click aici pentru exemplul de text violet.

Recomandare: Utilizeaza programele de grafica Photoshop sau Corel Draw pentru a vedea corespondentul hexazecimal al codului de culoare dorit.

5.2. Culoarea in paginile pentru web

In materialele de pe web, culorile se pot utiliza la nivelul textului, la nivelul ilustratiilor si pentru fundal. Utilizarea culorii se justifica in primul rand functional (dupa cum vei vedea in randurile ce urmeaza), insa determina in mare masura caracterul si tinuta materialelor, si implicit prestanta intregului site.

A. La nivelul textului, in cazul utilizarii corespunzatoare a contrastelor cromatice, precizia si rapiditatea perceptiei si memorarii informatiilor transmise creste cu 40-50% comparativ cu contrastele simple in alb-negru. Cercetarile psihologice asupra contrastelor cromatice au stabilit urmatoarea ordine descrescatoare de intensitate a contrastelor cromatice pentru text din punct de vedere al lizibilitatii de la distanta si al preferintei in procesul de retinere de informatii:

1. negru pe galben;
2. verde pe fond alb;
3. rosu pe fond alb;
4. albastru pe fond alb;
5. alb pe fond albastru;
6. negru pe fond alb;
7. galben pe fond negru;
8. alb pe fond rosu;
9. alb pe fond verde;
10. alb pe fond negru;
11. rosu pe fond negru;
12. verde pe fond rosu.

Este indicat ca pentru informatiile esentiale sa se utilizeze contraste mai puternice, iar pentru informatiile de continut, contraste cromatice mai putin tari.

B. La nivelul ilustratiilor, utilizarea culorilor sporeste valoarea de semnificatie. Cititorul recepteaza, prelucreaza si interpreteaza o ilustratie color mult mai rapid si mai eficient decat o ilustratie in tonuri de gri. Deasemenea, simbolurile indiciale care semnaleaza vizual prezenta unui continut de un anumit tip (meniu, informatii utile, linkuri recomandate, atentionari etc.) isi vor indeplini mai bine functia orientativa prin apelul la culori folosite constant si tinand seama de semnificatiile conventionale (galben - precautie, rosu - atentie etc.).

Exista, desigur, si imagini care au efect mai mare daca sunt in tonuri de gri. Fotografiile alb-negru sunt deseori (cand reprezinta actiuni) mai pregnante, mai elocvente si mai sugestive, mai dramatice decat cele color; portretele alb-negru pun mai bine in valoare expresia unei persoane.

Insa un grafic, o histograma, o schema sau o harta vor fi mult mai bine puse in evidenta prin culori si devin astfel mai usor lizibile, mai putin obositoare. Ordinea contrastelor cromatice pentru acestea este urmatoarea:

1. albastru pe alb;
2. negru pe galben;
3. verde pe alb;
4. negru pe alb;
5. verde pe rosu.

C. Fundalul (background-ul). Diferentierea cromatica a paginilor fiecarei sectiuni sau teme se poate dovedi foarte utila in orientarea generala in materialul de prezentare pe Internet. Dar cel mai important aspect al utilizarii culorii pentru fond se refera la functia culorilor de influentare a conduitei, prin declansarea de trairi afective, intentii, atitudini pozitive.

5.3. Semnificatii si efecte

Prezentam in continuare sintetic efectele psihologice ale principalelor culori, efecte ce le recomanda pentru folosirea in diverse situatii de prezentare pe web:

Rosu: stimulator general, provoaca, incita la actiune, indeosebi in plan psihomotor, stimulator intelectual, activare, mobilizare, faciliteaza asociatiile de idei. Este specifica tipului activ, autonom, locomotor, competitiv, operativ.

Portocaliu: stimulator emotiv, senzatie de apropiere, culoare sociabila, mai activa decat galbenul, lasa impresia de optimism, veselie; pe suprafete intinse poate fi iritant.

Galben: stimuleaza si intretine starea de vigilenta, sporeste capacitatea de mobilizare si concentrare a atentiei, predispune la comunicativitate; da senzatia de caldura si intimitate. Caracteristica tipului activ, proiectiv, expansiv, investigativ si cu un nivel ridicat de aspiratie. Privita mult timp, da senzatia de oboseala, dar in tonuri palide este suportabila.

Verde: efect de liniste, buna dispozitie, relaxare, meditatie, echilibru, siguranta; faciliteaza deconectarea nervoasa. Caracterizeaza tipul pasiv, defensiv, autonom, retinut. Exprima concentrare, siguranta, introspectie, autoevaluare.

Albastru: favorizeaza dezvoltarea proceselor de inhibitie si de incetinire a ritmului activitatii; indeamna la calm si reverie, concentrare si liniste interioara, seriozitate, meditatie. In exces, conduce la depresie. Se caracterizeaza prin 'profunzimea trairilor si sentimentelor'. Caracteristica pentru tipul pasiv, senzitiv, perceptiv.

Violet: efect stimulator, nelinistitor si descurajator; da senzatia de gravitate. Semnificatia psihologica este de tristete, melancolie, penitenta.

Negru: efecte psihologice de neliniste, retinere, depresie, introversie; impresie de adancime, plinatate si greutate; semnificatie psihoafectiva de tristete, sfarsit, singuratate, despartire, doliu. Poate fi utilizata ca element de delimitare, contrast sau fond pentru celelalte culori.

Alb: efecte de expansivitate, usurinta, suavitate, robustete, puritate, raceala; exprima pace, impacare, liniste, inocenta, curatenie, sobrietate.

Utilizarea eficienta a combinatiilor de culori in designul paginilor pentru Internet are urmatoarele influente: sporeste gradul de intelegere, receptivitate si asimilare a celor ce viziteaza paginile; creeaza o stare de confort psihic, inviorare si buna dispozitie; asigura diminuarea oboselii intelectuale si deconectarea nervoasa; faciliteaza perceptia vizuala, concentrarea atentiei si memorarea, dezvolta imaginatia si gandirea creatoare; influenteaza pozitiv starea celor ce iti lectureaza paginile web.

Observa culorile dominante folosite de designerii siturilor pe care le vizitezi. Incearca sa determini daca mesajul textului unei pagini corespunde cu starea transmisa subliminal, prin culoare. La Seminarul Online din aceasta saptamana, comenteaza culorile folosite de Academia Online pentru prezentarea informatiilor.

In Academia Online textul negru pe fundal alb este usor lizibil si usor de urmarit, textul cu rosu subliniind esentialul si punctele principale ale sitelui. Pentru sublinierea informatiilor esentiale si a exercitiilor din curs s-a folosit un fundal albastru deschis care ne ajuta sa ne concentram mai bine.

In siteul Yahoo sunt folosite urmatoarele culori albastru, mov , roz , verde ,crem, ocru pentru a se face remarcata fiecare categorie din site, textul este albastru pe fundal alb. Alternarea nu dauneaza chiar este utila.

Lectia 6: Design pentru Web

Anumite observatii privind modul in care utilizatorii de Internet lectureaza paginile Web in scopul efectuarii unor documentari, pentru informare curenta, pentru obtinerea informatiilor in campul profesional, pentru satisfacerea unor hobby-uri sau pur si simplu pentru amuzament, au condus la concluzii ce normeaza o proiectare eficienta a unui site Web. Aceste concluzii sunt relevante pentru webmasteri si pentru managerii de companii in elaborarea textului si ilustratiilor pentru materiale pe suport vizual - distribuite prin Internet (pagini Web sau documente prin e-mail).

6.1. Comportamentul utilizatorilor de Internet

Cercetatorii de la Institutul Poynter, intr-un studiu recent avand drept scop relevarea modului in care utilizatorii de Internet citesc noutatile pe Web, au ajuns la urmatoarele concluzii:

• Se realizeaza o lectura de suprafata combinata cu aprofundari selective. 3/4 din cititori isi limiteaza lectura la parcurgerea cuprinsului si scurtei descrieri a articolului (modalitate de prezentare foarte utilizata pe Internet). Chiar si atunci cand se angajeaza in lectura unui articol intreg, de obicei parcurg efectiv doar 75% din text.
  Cel mai intalnit comportament vizeaza 'vanarea' informatiilor si ignorarea detaliilor. Dar, odata ce informatia semnificativa a fost identificata, cititorii trec adesea la o lectura de profunzime. Continutul prezentat pe Web trebuie sa sustina ambele aspecte, ce tin de accesul la informatii. Textul trebuie sa se preteze la baleiaj rapid si sa furnizeze in acelasi timp raspunsuri substantiale la cautarile cititorilor. De altfel, o prezentare in modul hipertext permite organizarea continutului in structuri ierarhice multinivelare, navigarea realizandu-se facil orizontal, vertical sau in salturi de la o unitate de informatie la alta.
• Textul atrage atentia inaintea imaginilor si graficelor. La prima vizita pe pagina, privirea baleiaza pe text, oprindu-se asupra titlurilor, subtitlurilor si sumarelor de articole.
• Titlurile si intertitlurile simple sunt preferate celor cu corp de litera diferit, culoare diferita sau in general caracterizate de un stil (font + culoare + marime) ce contrasteaza cu aspectul paragrafelor cu informatii de continut. O variatie neexagerata a corpului de litera (fontului) este permisa. Insa schimbarea culorii folosite pentru continut si marimea disproportionata a literelor din titluri si intertitluri vor determina dificultati de intelegere (rapida) prin discontinuitati perceptive.
• Lectura intercalata - este folosita des, prin deschiderea mai multor ferestre de navigare in care se cauta separat informatii, se acceseaza adrese cunoscute sau se verifica posta electronica. Studiul Poynter a aratat ca sesiunile de lucru pe Internet se desfasoara prin alternarea ferestrelor si, implicit, alternarea multiplelor situri accesate in acelasi timp, dupa urmatorul model:
• lectura unor informatii intr-o fereastra de navigare;
• apoi comutarea intr-o alta fereastra si vizitarea altui site;

• revenire in prima fereastra si continuarea primei lecturi, eventual aprofundarea subiectului sau diversificarea temei prin urmarirea legaturilor din pagina initiala;
• eventuala comutare intr-o a treia sau chiar a patra fereastra deschisa etc.

6.2. Sugestii de design

Prezentarea pe Web va fi in acord cu aceste caracteristici ale comportamenului utilizatorilor de Internet, in elaborarea materialului tinandu-se cont de cateva sugestii deduse logic:

• Vizitatorul poate fi ajutat sa se orienteze/ reorienteze prin introducerea unor organizatori vizuali:
• titluri si intertitluri din pagina simple si clare ce permit o orientare rapida in continut;
• titluri de pagina semnificative ce ajuta la recunoasterea sitului chiar daca este minimizat pe taskbar.
• Designerul trebuie sa porneasca de la premisa ca vizitatorul nu isi mai aminteste pasii de navigare ce l-au adus in fata unui anumit material:
• se dovedeste utila inserarea in antet a unui 'fir al Ariadnei' (ex.: antetul acestei pagini) care indica pozitia actuala in succesiunea sau in structura ierarhica a sitului web;
• pastrarea culorilor standard pentru legaturile active (albastru pentru linkuri nevizitate si rosu inchis pentru linkuri vizitate) usureaza orientarea, recunoasterea si structurarea mentala a continutului informational ce se parcurge.
• Folosirea unei terminologii standard elimina timpul suplimentar acordat de vizitator pentru recorelari si circumscrieri de sens la schimbarea rapida a contextului.

Nu trebuie pierdut din vedere faptul ca sesiunea de lucru a unui vizitator poate dura cateva ore, cu intercalarea surselor de lectura, alternarea si varierea modalitatilor de lucru sau chiar cu intreruperi de durata ale navigarii.

6.3. 'Texte scanabile'

S-a constatat ca cei care utilizeaza frecvent Internetul nu citesc paginile Web cuvant cu cuvant. Privirea scaneaza textul, baleiaza, oprindu-se asupra unor cuvinte sau propozitii. Acest comportament caracterizeaza aproximativ 79% din utilizatorii de Internet, potrivit concluziilor unui studiu din 1997. In concluzie, echipa de autori de texte si designeri ar trebui sa furnizeze text 'scanabil', care sa se preteze la baleiere vizuala, folosind:

• cuvinte cheie evidentiate (prin ingrosare, variatie de culoare, marime, prin pozitie distincta, in grup de elemente separat clar). O buna modalitate de evidentiere o constituie marcarea cuvintelor semnificative ca linkuri, in cazul in care se pot face trimiteri de la acestea la unitati de informatie explicative sau corelate semantic. Cuvantul respectiv va aparea in pagina subliniat si de culoare albastra - asociatie de indicatori relevanta pentru un utilizator de Internet.
• intertitluri semnificative pentru continutul etichetat;

• marcarea listelor cu simboluri (buline sau icon-uri) pentru fiecare item;
• o singura idee in fiecare paragraf. Utilizatorii trec cu vederea orice idee aditionala daca nu este cuprinsa in primele cateva cuvinte ale paragrafului.
• stilul 'piramidei inversate', in care primul paragraf (numit, in literatura de specialitate, lead) prezinta succint esenta informatiei; paragrafele urmatoare dezvolta datele enuntate, aducand informatii complementare.
• jumatate (sau chiar mai putin) din numarul de cuvinte folosite intr-o prezentare conventionala, pentru print.

Verifica situl pe care il realizezi acum, sub aspectele evidentiate in aceasta lectie. Studiaza, prin metoda observatiei directe, comportamentul utilizatorilor de Internet din jurul tau. Incearca sa stabilesti motivul pentru care este abandonata o pagina web fara a se citi tot continutul acesteia. Daca ai realizat un site si l-ai incarcat pe Internet, scrie linkul in Forumul de la www.elearning-forum.ro (adresa directa: https://www.elearning-forum.ro/elearning/viewforum.php?f=9).

Realizeaza, impreuna cu colegii de echipa, o pagina web care sa tina cont de toate sugestiile de design vizual din acest curs. Pagina trebuie sa contina intre 5 si 10 paragrafe, cu informatii la alegere. Mai multe informatii despre realizarea acestei teme vei gasi in casuta de email.