Intro Web Design

11
Introducer Internetul poate fi privit ca o uriaşă reţea de calculatoare la care oricine îşi poate conecta propriul calculator, dar şi ca o vastă comunitate de oameni care se conectează la reţea, având posibilitatea să consulte o cantitate mare de date, să comunice şi să schimbe mesaje. în această reţea funcţionează tehnologia World Wide Web, o reţea de informaţii şi un serviciu prin care se accesează o mare varietate de informaţii digitale. Utilizând un software de vizitare (navigare), numit browser Web se pot accesa text, grafică şi sunet, precum şi alte informaţii digitale existente pe un server. Comunicarea între calculatoarele conectate la Internet se face prin protocolul de transmitere a datelor TCP/IP, care lucrează după modelul client-seruer. Astfel, calculatoarele server stochează informaţii pe care le distribuie la cererea calculatoarelor client. Toate calculatoarele folosesc un standard de comunicare între ele numit HTTP (Hyper Text Transfer Protocol), care în traducere înseamnă un text care te duce la alt text sau un text care sare la alt text, ceea ce se şi întâmplă când navigam pe web. în cadrul World Wide Web, informaţia este organizată sub formă de pagini Internet = reţea gigant de calculatoare 1 Despre pagini web HTTP=standard de comunicare WW = World Wide Web

description

web design

Transcript of Intro Web Design

Page 1: Intro Web Design

Introducere

Despre pagini web

Internetul poate fi privit ca o uriaşă reţea de calculatoare la care oricine îşi poate conecta propriul calculator, dar şi ca o vastă comunitate de oameni care se conectează la reţea, având posibilitatea să consulte o cantitate mare de date, să comunice şi să schimbe mesaje.

în această reţea funcţionează tehnologia World Wide Web, o reţea de informaţii şi un serviciu prin care se accesează o mare varietate de informaţii digitale. Utilizând un software de vizitare (navigare), numit browser Web se pot accesa text, grafică şi sunet, precum şi alte informaţii digitale existente pe un server.

Comunicarea între calculatoarele conectate la Internet se face prin protocolul de transmitere a datelor TCP/IP, care lucrează după modelul client-seruer. Astfel, calculatoarele server stochează informaţii pe care le distribuie la cererea calculatoarelor client.

Toate calculatoarele folosesc un standard de comunicare între ele numit HTTP (Hyper Text Transfer Protocol), care în traducere înseamnă un text care te duce la alt text sau un text care sare la alt text, ceea ce se şi întâmplă când navigam pe web.

în cadrul World Wide Web, informaţia este organizată sub formă de pagini web. O pagină web conţine informaţii şi referinţe către alte pagini web, numite hiperlegături. Acestea se pot activa prin efectuarea unui clic pe zonele active care pot fi texte sau imagini, evidenţiate.

Un sit web conţine mai multe pagini web

Internet = reţea gigant de calculatoare

1

HTTP=standard de comunicare

WW = World Wide Web

Page 2: Intro Web Design

Paginile web sunt scrise în limbajul HTML/XHTML-CSS. Paginile web

reprezintă fişiere care au extensia.html sau .htm şi care sunt găzduite

pe serverele de Internet sau pe computerul personal. Paginile web pot

conţine: text, imagini, fişiere audio, fişiere video.

Paginile web se vizualizează în browsere, care reprezintă

programe de vizitare. Cele mai populare browsere sunt: Internet

Explorer, Google Chrome, Firefox, Opera.

Cum preia Browser-ul o pagină de pe un Web Server?

Browser-ul ia pagina dorită printr-o cerere care este un standard

http. Cererea conţine adresa paginii respective (de exemplu:

http ://www.nume.com/opagina .html

Paginile web se creează cu ajutorul programelor de editare HTML:

Microsoft Front Page, Netscape Composer, Macromedia

Dreamweaver, Corel WebMaster Suite etc. Se pot realiza pagini

web şi cu editoarele de text care sunt capabile să facă conversia

documentului realizat în format HTML, spre exemplu Microsoft Word.

Cine stabileşte standardul web?

Standardul web este stabilit de consorţiul W3C sau World Wide Web

Consortium care dictează specificaţiile pentru web. Standarde web

sunt: HTML 2.0, HTML 3.0, HTML 3.2 HTML 4.0, HTML 4.01, CSS, XML,

XHTML 1.0.

În ceea ce priveşte aprecierea paginilor web se iau în consideraţie

următoarele aspecte:

1. Design-ul

- originalitatea designului şi a culorilor utilizate

- originalitatea graficii utilizate

- prezentarea bună în toate rezoluţiile şi browserele

- utilizarea consistentă a fonturilor şi a stilurilor

- dimensionarea adecvată a imaginilor şi a icon-urilor utilizate

Introducere

Page 3: Intro Web Design

Introducere

Conţinutul

- calitatea informaţiilor

-corectitudinea gramaticală a limbajului utilizat

3. Navigarea

- proiectarea logică, folosirea de link-uri relevante

- navigarea fără utilizarea butonului Back al browserului

4. Optimizarea

-utilizarea adecvată a tagurilor meta şi keywords

- relevanţa titlurile paginilor

- utilizarea hărţii de site -

dimensiunea timpului de încărcare

După opiniile specialiştilor în Design web, în paginile web bine construite veţi întâlni niciodată:

► animaţiile inutile, tag-urile <blink> şi <marquee>

► fundalurile ţipătoare

► combinaţii fundal-font care fac pagina ilizibilă

► precizarea „Best viewed with...", care trădează incompetenţa designer-ului

► cererea de modificare a rezoluţiei

► marginile inutile

► alegerea dimensiunilor fontului la valori care fac textul ilizibil

► ferestre pop-up

► meniurile construite numai din imagini, fără text alternativ, destinat celor ce folosesc browsere negrafice

► muzică de fundal

► contoare, al căror rol este de a impresiona vizitatorii

► guestbook, inutil în momentul precizării adresei de e-mail a persoanei de contact

► link-urile vechi, expirate, care nu duc niciunde, mărturisind lenea autorului

Page 4: Intro Web Design

► imagini de dimensiuni mari pe prima pagină

► lipsa adresei de e-mail

► existenţa unor pagini mereu în construcţie

► existenţa unor pagini PDF fără varianta HTML

Elementele unei pagini Web

Orice pagină Web are antet, corp de pagină şi zonă de navigare, după cum puteţi observa în cazul paginii din imaginea următoare:

Totuşi, cum at trebui realizata o pagină

Vom încerca să răspundem în cadrul acestui manual, unde vom descrie modul de realizare a paginilor web cu ajutorul editorului Microsoft FrontPage.

Page 5: Intro Web Design

Despre HTML

HTML este utilizat pentru crearea paginilor Web. Hyper Text Markup Language a fost creat în Elveţia, în anul 1989, de către un fizician de la CERN, pe nume Tim Berners-Lee. în prezent este director al World Wide Web Consortium (pe scurt W3C), organizaţie care coordonează dezvoltarea web-ului în special prin impunerea de standarde pentru limbaje. HTML-ul a cunoscut o popularitate rapidă, aproape toate paginile web fiind scrise în acest limbaj. Este o „colecţie" de instrucţiuni stilistice detaliate introduse într-un document text care va fi publicat pe World Wide Web. El reprezintă practic un mod de a cere programului de explorare (browser-ului de Internet) ce să afişeze pe ecran şi cum anume să se facă asta. Dacă se utilizează HTML, întâi se efectuează scrierea textului, a tabelelor şi a referinţelor la imaginile încadrate în pagina web şi ulterior se adaugă tag-urile HTML care descriu amplasarea elementelor în pagină. Fiind un limbaj de marcare, HTML nu utilizează instrucţiuni (ca Pascal-ul sau C-ul), nici comenzi (ca Fox-ul), ci etichete numite balize, elemente sau tag-uri, cărămizile HTML -ului.

Tag-urile sunt marcaje incluse în textul paginii, pe care browser-ul ştie să le interpreteze. HTML dispune de un set de predefinit de tag-uri, nu puteţi creea tag-uri proprii. Acestea sunt separate de restul textului din pagină, prin includerea lor între paranteze ascuţite: simbolurile „mai mic" (<) şi „mai mare" (>). Cele mai multe tag-uri sunt pereche - prin primul se spune programului de explorare să înceapă o acţiune, iar prin tag-ul corespondent se spune programului să se oprească. Tag-urile de

I Introducere

HTML-ul este independent de platformă!

v:

HTML-ul nu e un limbaj case-sensitive, pentru că în HTML nu se

face distincţia între literele mari şi cele mici!

Page 6: Intro Web Design

Există versiuni diferite de browsere şi versiuni diferite ale

limbajului HTML; un fag recunoscut de un browser nu poate fi

recunoscut de alt browser diferit sau mai puţin recent!

Exemple de tag-uri HTML:

1. <b>...</b> Pentru text bold

2. <l>...</1> Pentru text italic

3. <u>...</u> Pentru text subliniat

4. <P>...</P> Pentru a începe un paragraf nou

5. <TABLE>...< / TABLE> Pentru a insera un tabel

6. <TITLE >...</TITLE> Pentru a intitula o pagină

Prima pereche de tag-uri din orice document HTML conţine tag-ul care spune browser-ului că acea pagină pe care trebuie să o încarce este un document HTML. Deci orice pagină web va începe cu <html> , iar ultimul tag de pe pagină va fi perechea sa: </html>. Tot ceea ce va conţine pagina se va găsi între aceste două tag-uri.

între aceste marcaje pagina va avea un antet (head) şi un conţinut (body). Aceste două secţiuni sunt fiecare în parte precedate şi, respectiv, urmate de către o pereche de tag-uri. Tot ceea ce se găseşte între tag-urile <head> şi < /head> aparţine antetului paginii, iar tot ceea ce se găseşte între <body> şi </body> aparţine corpului acesteia.

\

Exceptând titlul paginii, numai ceea ce se găseşte în „corpul"

documentului va fi afişat de către browser.

_______________________________,____________________________________J

în continuare se scrie titlul paginii în interiorul secţiunii head. Tot ceea ce se găseşte între tag-urile <title> şi </title> va fi titlul paginii HTML.

Puteţi vizualiza codul sursă al unei interfeţe web cu ajutorul unui browser. Să luăm spre exemplu www.yahoo.com.

Prin clic dreapta în pagină se va deschide un meniu derulant din care puteţi alege opţiunea View Source. Acelaşi lucru se poate întâmpla dacă utilizaţi meniul View -> Source. Se deschide codul sursă în editorul de texte Notepad.

Introducere

Page 7: Intro Web Design

Introducere

Introduceţi adresa www.yahoo.com în bara de adrese a browserului şi

veţi putea vizualiza ceea ce apare în figura următoare:Bară de navigare Antet Zonă de conţinut

Page 8: Intro Web Design

Introducere

acestei ştiinţe include: istoricul scrisului folosit în codice, în cărţi manuscrise, suportul său, instrumentele de scris, tehnica tiparului, fabricarea, legatul şi ilustrarea cărţii, punerea ei în circulaţie, publicaţiile bibliografice, organizarea bibliotecilor, alcătuirea cataloagelor.

Bibliotecile, ca deţinătoare ale tezaurului de cunoştinţe şi ca centre de difuzare ale acestora, sunt verigi ale culturii în orice timp şi societate, continuând să fie şi în epoca contemporană izvoare de informare şi documentare. Este cunoscut faptul că de la apariţia televiziunii şi a calculatoarelor, numărul cărţilor în lume nu a scăzut, ci, dimpotrivă, a crescut de aproape patru ori. Aşadar, în viitor cartea va rămâne un mijloc de învăţare, de educaţie, de creaţie şi de cercetare.

Arhivistică este ştiinţa care se ocupă cu teoria şi practica în arhive, iar prin cercetările ei fundamentale şi aplicative, are drept scop crearea celor mai bune condiţii pentru munca în arhive. Indiferent de forma pe care o au astăzi materialele arhivistice, toate arhivele din lume conţin izvoare istorice care lămuresc aspecte economice, sociale, politice, culturale ale unui popor sau se referă la relaţiile internaţionale.

Despre proiecte

Pe parcursul studiului acestui manual veţi dezvolta un proiect de echipă având ca scop crearea unei pagini web utilizând editorul de pagini web Microsoft FrontPage. Echipele pe care le veţi forma vor avea 2-3 membri. Vă sugerăm următoarele teme dintre care să vă alegeţi :

► pagina web personală

► pagina web a unei biblioteci

► pagina web a unei societăţi de protecţia animalelor

► pagina web a clasei voastre

► revista clasei în format web

► pagina web a unei edituri

► pagina web a liceului vostru (dacă ea nu există deja!)

Până veţi face primii paşi în Microsoft FrontPage, vă veţi pregăti pentru proiectarea paginii web. Aceasta presupune să analizaţi cu atenţie sistemul pe care îl alegeţi, să înţelegeţi cum sunt ierarhizate informaţiile pe care le veţi utiliza în prezentare.

Page 9: Intro Web Design

Acordaţi atenţie deosebită etapei de proiectare a site-ului web!

Gândiţi-vă la potenţialii vizitatori, la ce informaţii ardori aceştia să găsească în site-ul vostru!

Odată ce veţi avansa în editarea paginilor web veţi şti ce aveţi de făcut la fiecare pas. Veţi realiza cadre, liste, tabele, veţi insera obiecte hipermedia, veţi publica şi veţi testa pagina pe care o veţi alege ca proiect.

Recomandări pentru realizarea proiectelor

Unele teme pe care vi le propunem pot debuta cu studii de caz. Studiul de caz se referă la strângerea şi prezentarea de informaţii detaliate despre un individ/ grup mic sau grup ca întreg, incluzând adesea rapoarte sau mărturii ale subiecţilor înşişi. Este bazat pe interesul pentru explorarea detaliilor şi descrierea sistemului examinat.

Spre deosebire de metodele cantitative de cercetare pe care le-aţi mai putea aplica, de tipul sondajului (care adresează întrebări de tipul cine, ce, unde, cât sau câţi) sau al analizei de arhivă (care situează în timp şi într-un context istoric), studiul de caz este de preferat atunci când se caută răspunsuri la întrebările de tip cum sau de ce. De obicei se recurge la studiul de caz atunci când focalizarea este pe un context de viaţă reală.

Pentru a colecta date se folosesc:

- observări directe sau observări ale participanţilor;

- interviuri;

- protocoale;

- teste;

- analiză de surse (scrise, orale, artefacte).

Nu există o reţetă universală a dezvoltării studiilor de caz. Sunt recomandate următoarele activităţi: întrebările, propoziţiile de bază, unităţile de analiză, legătura logică între datele culese şi propoziţii, formularea criteriilor pentru interpretarea rezultatelor.

Sarcinile celor implicaţi în realizarea unui studiu de caz constau în: alegerea entităţii de cercetat, colectarea datelor, analiza datelor, realizarea raportului de cercetare, discutarea validităţii şi a legitimităţii

Introducere

Page 10: Intro Web Design

Introducere

^roiectul pe care îl veţi realiza trebuie să fie un produs al imaginaţiei

voastre, în care să utilizaţi cunoştinţele însuşite, într-un context nou şi relevant. Veţi decide nu numai asupra conţinutului său, dar şi asupra formei de prezentare.

Etapele realizării unui proiect

în dezvoltarea proiectului ales veţi parcurge următoarele etape:

1. Alegerea temei.

2. Stabilirea obiectivelor - aici au loc discuţii şi negocieri asupra conţinutului, formei şi modalităţii de prezentare a proiectului.

3. împărţirea sarcinilor - fiecare membru al grupului îşi asumă o sarcină de lucru (profesorul monitorizează ca ele să fie egale ca dificultate).

4. Cercetare/creaţie/investigaţie - studiu individual al unor surse bibliografice, scrierea de articole, povestiri; intervievarea unor persoane.

5. Procesarea materialului (individual sau în grup) - este momentul în care profesorul poate semnala erorile de conţinut, de organizare a textului sau de acurateţe a limbajului

6. Realizarea formei finale - acum au loc discuţii în grup privind unitatea de concepţie, design-ul, editarea.

7. Prezentarea proiectului - membrii grupului decid asupra modului de prezentare, a rolurilor, a materialelor folosite, iar profesorul monitorizează şi evaluează.

8. Feed-back - obţinut de la profesor şi de la colegi (aprecieri, întrebări, schimb de idei, interevaluare etc.).

9. Autoevaluare.

La finalul proiectului vă propunem un exerciţiu interevaluare. Alcătuiţi împreună cu profesorul vostru o listă de criterii pe baza cărora veţi aprecia proiectele realizate de către colegii voştri din celelalte echipe. Vă propunem spre utilizare criteriile orientative din lista care urmează.

Page 11: Intro Web Design

După ce se termină susţinerea fiecărui proiect acordaţi pentru fiecare subcriteriu între 1 şi 3 puncte, în funcţie de gradul său de atingere. Efectuaţi suma punctelor obţinute pentru fiecare dintre proiecte.

Comunicaţi rezultatele profesorului care va stabili punctajele finale şi vă va acorda note.

Criterii orientative pentru evaluarea proiectelor

1. orientarea în sarcină/modul de tratare a temei alese

- alegerea/utilizarea surselor de documentare

- proiectarea paginii web

- selectarea şi filtrarea informaţiilor utilizate

2. realizarea site-ului web:

- structura şi navigarea între paginile sit-ului

- design-ul şi originalitatea paginilor

- tipul şi eficienţa elementelor inserate în pagină

3. prezentarea proiectului

- captarea atenţiei „publicului"

- exprimarea şi limbajul utilizat

- folosirea corectă a termenilor de specialitate

- planificarea bugetului de timp alocat pentru a nu plictisi

asistenţa