Web Design Suport de Curs Pc

PROGRAMUL DE FORMARE PROFESIONALA- CALIFICARE - PENTRU OCUPATIA -

WEB DESIGNER

SUPORT DE CURS

BUCUREŞTI 2010

CUPRINS

1. Analiza si proiectarea structurii site-ului 2. Limbajul HTML 3. Limbajul PHP

I ANALIZA SI PROIECTAREA STRUCTURII SITE-ULUI 1. Noţiuni introductive

Pentru a lucra pe internet este necesar să înţelegeţi notiunile de client şi server. Majoritatea informaţiilor pe care le veţi accesa pe Internet sunt stocate în calculatoare numite servere. Orice tip de calculator poate fi server, ce îl face server este rolul pe care îl joacă: depozitează informaţii pentru a fi folosite de către clienţi. Un client este un computer sau un program specific de computer care ştie să comunice cu un anumit server pentru a folosi informaţiile existente pe server sau pentru a stoca informaţii pe acesta. Un exemplu de client este browserul Web pe care îl folosiţi când comunicaţi cu un computer pe care sunt stocate paginile Web - serverul Web. Internetul nu inseamnă doar pagini Web. Pentru a folosi poşta electronică este necesar un client de mail pentru a comunica cu un server de mail. Această tehnologie arată ce este de fapt Internetul - un mediu de comunicare. Diferitele tipuri de clienti şi servere şi nu Netul în sine sunt cele care permit executarea unor activităţi variate Termenul „Web” este folosit atât de des de media pentru a descrie şi ilustra Internetul, încât multe persoane cred că Web-ul şi Internetul sunt identice. Dar nu sunt. Web-ul este doar o parte a Internetului şi este cel mai captivant deoarece are evoluţia cea mai rapidă şi este partea cea mai uşor de folosit a Internetului. World Wide Web este alcătuit din site-uri web. Acestea sunt locaţii care grupează pagini web (fişier HTML) la care se adaugă sau nu fişiere de alt tip. Un site web se compune dintr-o pagină principală ("home page") la care se adaugă un număr variabil de pagini şi eventual de fişiere (multimedia, executabile, etc.), toate fiind interconectate prin hiperlegături (hiperlink). Fiecare site are o adresă precisă care este în general adresa paginii principale. Fiecare pagină şi fiecare fişier prezente pe site au de asemenea câte o adresă care este formată pornind de la adresa site-ului. Adresa unui fişier (pagina web sau alt fel de fişier) prezent pe internet este numită URL (Uniform Resource Locator) şi este unică pentru fişierul respectiv în aşa fel încât acesta să poată fi găsit cu uşurinţa şi să nu fie confundat cu un alt fişier. Site Web şi pagină Web sunt termeni folosiţi flexibil, dar un site Web este în general un server Web sau o parte dintr-un server Web unde este stocată o colecţie de pagini Web despre un anumit subiect. 2. Glossar de termeni şi acronime Browser

CGI

CSS

Flash FTP GET

hiperlink

HTML HTTP JavaSript MySQL PHP

Este un program care oferă o interfaţă între utilizator şi serverul de web de pe Internet. Browserul contactează serverul şi transmite cererea de informaţie apoi primeşte informaţia şi o afişează pe calculatotul clientului Common Gateway Interface - standard care defineşte o modalitate prin care serverele Web comunică cu programe externe şi vice-versa, astfel încât programele externe pot produce cod HTML sau imagini, iar serverul le tratează la fel ca orice cod HTML sau imagini care nu sunt generate de programe externe. Cascading Style Sheet Stilurile pun la dispoziţia creatorilor de site-uri web noi posibilităţi de personalizare a paginilor HTML. Un stil reprezintă un mod de formatare exactă a unui bloc de text (spre exemplu anumite caracteristici pentru font, mărime, culoare, aranjare în pagină, distanţare faţă de margini etc). Flash este un instrument cu ajutorul căruia se pot construi pagini web animate sau interactive File Transfer Protocol, cel mai simplu mod de a transmite fişiere între calculatoare pe Internet Metodă în protocolul HTTP, prin care datele dintr-un formular sunt trimise adăugând la sfârsitul URL-ului un semn de întrebare şi conţinutul formularului. Se creează un URL extins conţinând adresa paginii şi parametrii care trebuie trimişi scriptului (de exemplu http://www.domeniu.dom/cgi-bin/script.pl?name=John& tel=1274). Legăturile (link-urile) reprezintă partea cea mai importantă a unei pagini Web. Ele transformă un text obişnuit în hipertext s au hiperlegătură, care permite trecerea rapidă de la o informaţie aflată pe un anumit server la altă informaţie memorată pe un alt server aflat oriunde în lume. (HyperText Markup Language) Limbaj folosit pentru crearea paginilor Web Hypertext Transfer Protocol, protocol folosit de browserele de web pentru a transmite text, sunete, imagini video pe Internet JavaScript este un limbaj de scripting pentru client dezvoltat la origine de Netscape, permiţând scrierea de secvenţe de program care se execută la apariţia unui eveniment utilizator. Cel mai cunoscut şi folosit limbaj pentru bazele de date Hypertext Preprocessor - PHP este un limbaj de scripting pentru

Plug-in

POST URL www XML

server, asemănător javascript, în sensul că amândouă permit introducerea unor programe (scripturi) în paginile web Aplicaţiile de tip plug-in sunt similare celor de tip helper (Se folosesc pentru executarea fişierelor audio sau video sau pentru a afişa diverse formate grafice necunoscute de browser.), dar, spre deosebire de acestea, ele lucrează direct în interiorul browserelor Metodă din protocolul HTTP prin care datele din formular nu sunt trimise ca parte a URL-ului, ci sub forma unui fişier codat cu standardul MIME înglobat în corpul mesajului trimis către server. Uniform Resouce Locator - reprezintă unui site World Wide Web este un univers de informaţie disponibil prin protocol HTTP eXtensible Markup Language - Xml este un limbaj creat pentru a structura, stoca şi transmite informaţiile. Spre deosebire de HTML, care a fost creat pentru a afişa datele, XML a fost proiectat pentru a descrie datele

3.Tipuri de site-uri În funcţie de rolul pe care

si+l propun siteurile web, acestea sunt de mai multe tipuri.

Site-uri de prezentare de companie Site-uri care oferă informaţii despre o companie, incluzând profilul, istoricul, portofoliul, produsele şi serviciile, locaţia şi alte informaţii. Site-uri de prezentare de produs / eveniment Site-uri care oferă informaţii despre un produs, o gamă unitară de produse sau un eveniment. Portaluri generaliste Acestea sunt site-uri care ţintesc publicul larg. Este vorba despre portaluri "orizontale" care oferă linkuri sau directoare că tre alte site-uri, reunesc conţinut intern şi extern şi oferă servicii diverse pentru utilizatori, de tipul conturilor de e-mail. Magazine online Site-uri care vând online produse sau servicii şi facilitează tranzacţiile. Comunităţi virtuale Site-uri care facilitează interacţiunea şi comunicarea. Accentul este pus pe instrumente şi elemente care întăresc sentimentul de apartenenţă precum ştirile comunităţii, chat-uri, forumuri. Servicii şi tranzacţii online Site-uri care oferă servicii de recrutare, de vânzare a spaţiilor publicitare, servicii matrimoniale, servicii de trimitere a felicitărilor, albume foto online, agende, servicii de e-mail, calendare online, arhivarea fişierelor, download-uri, înregistrarea domeniului, etc. Mass-media Versiuni online ale publicaţiilor, televiziunilor sau radio-urilor care oferă ştiri, inclusiv site-uri de ştiri care au doar versiune online. Divertisment Site-uri dedicate jocurilor, hobby-urilor, sportului, muzicii sau umorului. Activism social Site-uri care promovează o cauză socială şi au ca obiectiv mobilizarea sau obţinerea sprijinului unor categorii de public. Celebrităţi şi personalităţi Site-uri care prezintă personalităţi publice, punând accentul pe rezultate deosebite, pe interese sau pe biografia completă etc. Site-uri dedicate unor muzicieni, actori sau actriţe, simboluri ale culturii, echipe de sport, personalităţi de televiziune, politicieni. E-guvernare Site-uri care au legătură cu serviciile guvernamentale, incluzând siteurile care oferă acces la serviciile online ale instituţiilor guvernamentale şi site-uri care diseminează informaţii

despre decizii guvernamentale. Artă şi cultură Site-uri de arte vizuale şi expresie artistică, teatru, literatură, muzică clasică, arhitectură. Siteurile includ elemente de conţinut precum cronici, recenzii, expoziţii, galerii, portofolii, etc. Pentru site-uri al căror obiectiv principal este vânzarea online a unor produse, inclusiv artistice, este recomandată secţiunea "Magazine online". Portaluri tematice Site-uri care acoperă cât mai mult un domeniu anume al cunoaşterii. Oferă referinţe şi informaţii pe o temă bine conturată. Site-uri ale instituţiilor Site-uri de prezentare a unor instituţii, primării, şcoli, licee, universităţi, care cuprind informaţii, istoric etc. Site-uri personale Site de prezentare; conţine CV, fotografii, date de contact, etc. 4.Structura unei pagini Web În afară de unele părţi opţionale, majoritatea paginilor Web conţin următoarele elemente. Aceste elemente trebuie cunoscute deoarece diversele browsere interpretează în mod diferit aceste părţi. Elementele prezentate sunt de obicei vizibile prin intermediul browserului: 1. Titlu - este afişat pe bara de titlu a ferestrei în care apare pagina. 2. Text - trasmite scopul şi conţinutul paginii 3. Semnătura - este afişată în partea de jos a paginii, identifică autorul paginii şi adesea include şi o adresă de e-mail a autorului (webmaster). 4. Linii orizontale - decorează pagina şi o împart în secţiuni logice. 5. Imagini - oferă mai multe informaţii în pagină. 6. Culoare sau model de fundal - reprezintă o culoare solidă sau o imagine integrată care este afişată în spatele textului. 7. Animaţii - text sau imagini care se mişcă într-un anumit fel. 8. Legături - conduc vizitatorul către alte locaţii (alte pagini Web, adrese de e-mail, fişiere tip document, videoclipuri, etc) 9. Hărţi de imagini - imagini 10. Formulare - locaţii unde vizitatorii pot răspunde la un chestionar online. Există şi alte elemente care aparţin paginii Web, dar care nu sunt vizibile: 1. Elementele de identificare - numele sau adresa de e-mail a autorului, un sistem special de codare, care ajută motoarele de căutare să descopere subiectul şi conţinutul paginii. 2. Comentarii - textul pe care autorul doreşte să îl facă vizibil doar atunci când este citit direct codul HTML, nu atunci când pagina este vizualizată cu un browser. 3. HTML - formatul de fişier în care paginile Web sunt stocate pe un computer. 4. Codul JavaScript - adaugă elemente dinamice paginii Web 5. Applet-uri Java - îmbunătăţesc interacţiunea dintre browser şi server. 5. Structura unui site Modul de structurare a site-ului se referă la navigarea în cadrul acestuia. O navigare uşoară între pagini presupune prezenţa unei bare de navigare în care să fie prezente alături de pagina gazdă şi paginile cele mai importante. Toate secţiunile unui site trebuie să se îmbine armonios în structura acestuia permiţânduse astfel trecerea uşoară de la o secţiune la alta. O structură bună se aseamănă cu structura unui arbore care ar avea şi nişte conexiuni între ramurile sale cele mai mari. Pe Web se întâlnesc mai multe moduri de organizare logică a informţiei într-un site: 1. Structura de tip panou de prezentare - o singură pagină simplă care descrie o personă, o afacere sau un produs. Multe pagini personale sunt realizate în acest mod: conţin legături către resurse

preferate pe Internet, dar nu şi către pagini din cadrul aceluiaşi document. 2. Structura liniară de o pagină - o pagină Web creată pentru a fi citită de sus până jos. Poate fi utilizat un cuprins pentru a-i ajuta pe vizitatori să facă salturi rapide către orice secţiune. 3. Structura liniară pe mai multe pagini - aceeaşi structură ca mai sus, numai că paginile curg una după alta. Vizitatorii sunt ghidaţi prin plasarea în josul fiecarei pagini a unei legături care conduce către pagina precedentă şi cea următoare. 4. Structura ierarhică - structura clasică întâlnită pe Web. Pagina gazdă (sau o pagina specială) trebuie sa conţină un fel de "cuprins" al site-ului, cu legături către paginile cele mai importante. Acestea din urmă sunt practic nişte porţi de intrare către secţiuni specializate ale site-ului, conţinând şi ele table de materii cu adresele paginilor web subordonate. 5. . Structura de tip reţea - este o structură ierarhică fără ierarhie. Orice pagină poate conţine o legătură către altă pagină. Există o pagină principală, dar apoi vizitatorii se pot plimba prin acea reţea fără o cale anume. Se pot realiza site-uri web, pornind de la cel de prezentare şi până la dezvoltarea de module dinamice şi soluţii pentru comerţul electronic şi vânzarea online. Tehnicile folosite sunt: HTML, Javascript, CSS, PHP, MySQL, Flash, XML, WML, WAP etc. Dacă dorim să creăm singuri site-ul va trebui să învăţăm limbajul HTML şi să învăţăm să folosim un program de editare HTML. Există şi opţiunea (recomandată pentru începători) să folosim un program de editare HTML de tipul VIZINT (vizual-intuitiv) care ne permite să creăm pagini web şi să adăugam elemente HTML la ele fără sa cunoaştem limbajul HTML. Programele de tip vizit sunt numite în limba engleza WYSIWYG ("what you see is what you get" - ceea ce vezi este ceea ce vei obţine) şi ele necesită din partea utilizatorului doar pricepere în aranjarea în pagina a conţinutului acesteia. Există foarte multe programe de editare HTML, dintre care o parte sunt gratuite. Un program de tipul VIZINT este "FrontPage" produs de compania Microsoft. Alte programe de editare HTML de tipul VIZINT sunt "OpenOffice.org HTML Editor" care este disponibil în suita gratuită OpenOffice.org (prezenta în mod periodic pe CD-urile unor reviste cu specific IT) şi "Trellian WebPage" (necesită înregistrare gratuită pe site-ul producătorului). 6. Criterii In realizarea proiectelor, un webdesigner se poate baza pe următoarele criterii: 6.1. Conţinut - obiectul declarat este uşor de recunoscut; - conţinutul este relevant, folositor şi captivant pentru vizitatori; - informaţia este clară şi concisă. - evitaţi folosirea unui limbaj strict tehnic, care nu poate fi inţeres pe deplin de toată audienţa Un site trebuie să aibă un conţinut original, bogat, interesant şi actualizat periodic pentru a deveni popular în rândul utilizatorilor. Un astfel de site va fi vizitat frecvent chiar dacă aspectul său grafic nu este la cel mai înalt nivel. Un rol important îl are alături de conţinutul în informaţie şi modul de scriere al materialelor. Acestea trebuie să fie redactate într-un stil uşor de citit, fără fraze excesiv de lungi şi complicate. Toate materialele trebuie să fie verificate pentru a nu conţine greşeli de ortografie. 6.2. Uşurinţă în folosire - textul este lizibil, iar imaginile şi celelalte elemente multimedia sunt optimizate pentru specificul publicului ţintă;

- organizarea informaţiilor este intuitivă; - folosiţi CSS (Cascading Style Sheets). Folosiţi fişiere css pentru formatarea textului. Puteţi schimba astfel foarte uşor formatarea întregului site iar dimensiunea paginilor se micşorează. - informaţiile importante sunt uşor de găsit. - adăugaţi o nota la paginile web prin care să reamintiţi vizitatorilor să facă un bookmark (semn de carte). Acest lucru va duce la creşterea şanselor ca vizitatorii să se întoarcă. 6.3. Design - designul este potrivit obiectului site-ului şi este adecvat utilizatorilor; - conceptul creativ este uşor de identificat şi coerent; - designul nu atrage atenţia de la conţinut; - folosiţi aceleaşi fonturi, dimensiune a textului şi culoare a fundalului pentru tot site-ul - folosiţi acelaşi aliniament (stânga, dreapta sau centru) pentru machetarea paginilor - designul este suficient de diversificat pentru a păstra atenţia utilizatorilor. Aspectul grafic al unui site se referă la aşezarea în pagină a materialelor şi la gama de culori folosite. Materialele de pe site trebuie să fie uşor de citit, adică trebuie să aibă un corp de literă adecvat, să fie scrise pe un fundal plăcut şi odihnitor pentru ochi şi să fie formatate (împărţite în paragrafe, etc.) special pentru o citire uşoară. De asemenea trebuie luată în calcul adăugarea de imagini şi tabele dacă este necesar acest lucru. Trebuie evitată cu orice preţ supraîncărcarea cu elemente grafice inutile a site-ului pentru că în caz contrar afişarea paginilor devine greoaie. Utilizatorii din toata lumea au drept caracteristică lipsa de răbdare şi ca urmare este foarte probabil să nu aştepte până la capăt descărcarea paginii şi să prefere mai degrabă vizitarea unui alt site. Elementele grafice cu dimensiuni în KB importante (de tipul animaţiilor Flash sau a imaginilor mari) trebuie folosite cu moderaţie şi doar dacă este necesar. Pe web mărimea contează. Pe de altă parte autorul unui site specializat în grafică web poate să pună pe site-ul său oricâte animaţii Flash şi imagini doreşte pentru că site-ul este cartea sa de vizită şi îi pune în evidenţă talentul. 6.4. Funcţionalităţi - site-ul este compatibil cu mai multe platforme; - timpul de încărcare al paginii este scăzut; - toate link-urile şi formularele funcţionează corect; Accesibilitatea reprezintă una dintre cerinţele de bază atunci când se proiectează o pagina web. Aceasta înseamnă că orice netsurfer poate să aibă acces la site-ul pe care l-aţi realizat, indiferent de browserul pe care-l foloseşte (inclusiv browsere text ca Lynx), rezoluţia sau dimensiunile ecranului, setările calculatorului sau eventualele disfuncţii ale vederii. Din aceste motive, nu trebuie să proiectaţi un sit web pentru un browser specific sau pentru o anumită rezoluţie a monitorului. Căutaţi să evitaţi inserarea în pagina principală a unor anunţuri de forma: "Acest site se vede cel mai bine cu Internet Explorer 5.5 " sau "Folosiţi o rezoluţie de 768 x 1024" în acest fel nu faceţi decât să îndepărtaţi cititorii care folosesc un alt browser sau o altă rezoluţie. Este puţin probabil ca aceştia să încarce browserul IE 5.5 sau să schimbe rezoluţia monitorului numai pentru a vedea în cele mai bune condiţii paginile dvs. Prin accesibilitate se înţelege şi oferirea unor informaţii necesare unui alt tip de vizitatori ai siteurilor web. Aceştia sunt roboţii motoarelor de căutare. Pentru ei trebuie să completaţi cu atenţie etichetele META corespunzătoare (TITLE, DESCRIPTION, KEYWORDS etc). Foile de stiluri (style sheets), scripturile, appleturile Java şi tehnologia Flash sunt noi apariţii în arsenalul webdesignerilor. Toate acestea trebuiesc însă folosite cu maximă atenţie deoarece nu toate browserele le pot suporta, iar unii utilizatori au dezactivate opţiunile respective. De asemenea, nu uitaţi să folosiţi atributele ALT, WIDTH şi HEIGHT asociate etichetei IMG. Realizarea unui site accesibil unor categorii cât mai largi de utilizatori implică imaginaţie şi multă muncă, dar rezultatele vor fi pe măsura efortului depus. 6.5. Culori Culoarea, pentru un designer grafic reprezentă o simplă noutate, fiind destinată doar pentru proiectele de anvergură şi pentru designul ambalajelor. Deşi anterior a fost considerată prea scumpă pentru a fi folosită fără rost, acum ea este ceva obişnuit. Alb-negrul a devenit avangardist şi artistic. Au trecut de asemenea zilele în care culoarea era folosită doar pentru a ne bucura de ea. Culorile au o semnificaţie culturală. Dumneavoastră, ca designer, aveţi responsabilitatea de a cunoaşte semnificaţia lor dar şi de a fi în pas cu tendinţele coloristice. Folosiţi culori pastelate pe fonduri albe. Identitatea voastră, dar nu în mod necesar sigla, poate fi asociată cu orice culoare pe care o dictează tendinţele actuale. Alte influenţe asupra preferinţelor coloristice le reprezintă problemele sociale şi stilul de viaţă. Dacă cineva este interesat de o problemă sau de o cauză, persoanele respective pot să prefere

culorile asociate acelei cauze. De exemplu, un ecologist poate fi subiectiv în faţa unor culori cum ar fi brunul sau verdele. Un militant al homosexualilor poate prefera culori mai vii şi mai vibrante, deoarece curcubeul este folosit foarte des pentru imaginea cauzei acestora. Un creştin conservator se va înclina spre culori conservatoare cum ar fi bleu-marin şi gri. Ar fi indicaţi să aveţi în vedere asemenea factori, când vă adresaţi unui anumit public-ţintă. Interesul culorilor Culorile au în general anumite implicaţii sociale. În timp ce nici o semnificaţie preconcepută nu poate fi considerată universală, cercetătorii consideră că următoarele înţelesuri sunt oarecum precise: Negru: Semnificaţie: Autoritate sau putere şi, uneori, răutate. Darth Vader era negru din toate aceste motive. Alb: Semnificaţie: Puritate, sterilitate sau inocenţă. Miresele poarta alb pentru a sugera puritatea şi inocenţa. Roşu: Semnificaţie: Furie, avertizare, conflict şi dragoste. Culoarea roşie poate chiar să provoace puls ridicat şi respiraţie accelerată. Folosit în anumite contexte, poate avea un efect negativ, pe când în altele poate avea un efect benefic. Albastru: Semnificaţie: Calm, pace - dar rece şi deprimantă -, nobilitate, loialitate. Costumele pentru afaceri sunt de multe ori bleu-marin pentru că aceasta implică loialitate; în acelaşi timp, sălile de clasă sunt deseori zugrăvite în albastru deschis, datorită efectului calmant al albastrului. În limbaj muzical, se vorbeşte deseori de “blues” (în engleză, blue = albastru), deoarece atât acest stil muzical cât şi culoarea pot avea un efect deprimant. Verde: Semnificaţie: Naturaleţe, prospeţime şi fertilitate. Legătura clară cu verdele este natura, dar folosirea acestei culori în spitale este similară cu efectul albastrului, verdele fiind şi el o culoare care calmează. Galben: Semnificaţie: Fericire, optimism şi concentrare. Galbenul îmbunătăţeşte capacitatea de concentrare şi ea poate contrasta cu aproape toate culorile. Violet: Semnificaţie: Regalitate, lux şi romantism. De-a lungul istoriei, familiile regale au fost asociate cu violetul datorită faptului că se întâlneşte rareori în natură şi trebuiau cheltuite sume mari pentru a putea crea vopsea de această culoare. Maro: Semnificaţie: solid, de încredere şi terestru.

7. Publicarea şi promovarea unui site Orice webmaster vrea, fie că o recunoaşte deschis sau nu, ca site-ul său să fie vizitat de cât mai mulţi utilizatori şi dacă se poate, cât mai des. Această dorinţă (care ţine de considerente financiare sau de ego) nu este însă realizabilă decât dacă webmasterul şi toţi ceilalţi implicaţi în administrarea siteului depun un efort constant pentru a menţine conţinutul şi aspectul site-ului cât mai aproape de cerinţele utilizatorilor. Succesul unui site, ca de altfel al oricărui produs, se datorează în mare măsură şi modului în care este promovat, cu alte cuvinte marketingul este aproape la fel de important ca şi calitatea unui produs. În această lume a internetului încă foarte tânără, experţii în crearea de site-uri Web sau redactorii de articole interesante nu sunt de obicei şi experţi în marketing. Tocmai din această cauză promovarea eficientă a unui site web este făcută de cele mai multe ori de către profesionişti. Aceştia îşi oferă serviciile contra cost şi la ei apelează companiile care vor să-şi construiască o prezenţă importantă pe Web. Sumele investite în marketingul profesional sunt impresionante şi în permanentă creştere. O caracteristică a Internetului este ca acesta, în calitatea sa de spaţiu virtual permite oricărui utilizator să-şi construiască un site Web, existând, spre deosebire de spaţiul real, destul loc pentru toată lumea. Mai mult, utilizatorul respectiv nu trebuie să aibă cunoştinţe avansate de limbaj HTML sau să plătească vreun ban pentru locul de pe Internet unde vrea să-şi construiască site-ul (se exclud bineînţeles cheltuielile legate de conectare). Există în momentul de faţă poate zeci de milioane de site-uri Web în toată lumea, cele mai multe dintre ele aparţinând unor utilizatori obişnuiţi şi nu unor companii sau instituţii. Site-urile mici sunt însă potenţiale surse de câştig material pentru proprietari, pentru că există

companii interesate să cumpere spaţiu publicitar chiar şi pe site-urile mici, cu condiţia ca acestea să fie vizitate des. Un site bine făcut şi care şi-a dobândit deja o "clientelă" de utilizatori constantă, poate fi la un moment dat cumpărat pentru o sumă importantă de către o companie mult mai mare, existând în plus posibilitatea ca administratorii site-ului să-şi păstreze locurile de muncă pentru a continua să menţină şi să îmbunătăţească site-ul. Ţinând cont de faptul ca utilizatorii români care sunt în acelaşi timp şi webmasteri vor să le fie vizitate siteurile, ei trebuie să înveţe să-şi facă singuri activitatea de marketing, pentru că nu au mijloacele financiare necesare pentru apelarea la specialişti. Multe firme româneşti care vor sa aibă site-uri web de succes sunt în aceeaşi situaţie, din cauza dificultăţilor financiare neputând fi luată în discuţie cumpărarea de spaţiu publicitar pe Internet sau angajarea unor specialişti în marketing. Greul promovării site-ului cade astfel pe umerii webmasterului, transformat peste noapte şi în responsabil cu marketingul. În cele ce urmează vor fi prezentate metodele prin care orice utilizator poate să-şi promoveze site-ul fără a fi nevoit să apeleze la profesionişti. Metodele cele mai eficiente de promovare a unui site sunt următoarele: 1) Optimizarea site-ului web pentru indexarea adecvată de către motoarele de căutare 2) Înscrierea site-ului în cataloagele de adrese ale portalurilor internaţionale şi româneşti 3) Promovarea site-ului pe forumurile on-line sau în grupurile de discuţii 4) Participarea la clasamentele site-urilor care fac topuri Primul pas este să alegem un domeniu pentru site-ul organizaţiei. Numele unui domeniu nu trebuie să conţină spaţii de aceea dacă vom folosi un cuvânt compus trebuie să folosim o liniuţa pentru a lega părţile sale componente. Al doilea pas care trebuie făcut este sa găzduim site-ul pe un server. Spre exemplu există servere care permit găzduire gratis cum ar fi : www.home.ro , www.3x.ro etc., iar la altele trebuie plătită găzduirea: www.myx.ro , www.elite.ro/web-hosting/ , www.apis.ro/domeniu.html . După ce am creat site-ul trebuie sa-l încărcăm pe serverul care îl găzduieşte. Acest lucru se realizează foarte simplu dacă suntem familiarizaţi cu programele de tip client FTP. Tot cu ajutorul programelor de acest tip se realizează şi actualizarea site-ului (ştergerea unor pagini, adăugarea unora noi, înlocuirea unor pagini cu versiuni mai noi). Aşa cum am mai spus, putem să scriem singuri conţinutul unui site şi să-l punem în pagină sau putem apela la serviciile unor specialişti. Este recomandat să ne compunem singuri materialele pentru că astfel putem să le revizuim ulterior introducând (fără a afecta stilul expunerii) anumite informaţii care nu erau disponibile la momentul scrierii iniţiale. Cu cât vom scrie mai mult cu atât vom progresa în domeniul expunerii clare a propriilor idei. Dacă socotim că "nu ne pricepem la scris" sau pur şi simplu nu avem timp pentru a scrie şi revizui materialele de pe site putem să apelăm la serviciile unor specialişti (de ex. studenţi la filologie sau jurnalistică). Noi putem să le dictăm acestora materialele iar ei se vor îngriji de partea stilistică a textelor. Pentru a cunoaşte cât de vizitat este site-ul pe care l-aţi realizat şi pentru a afla mai multe date despre numărul şi statistica vizitatorilor, informaţii care vă vor ajuta în realizarea unei campanii de marketing online eficiente, este bine să folosiţi contoare de pagină. Site-ul trebuie promovat. Mulţi manageri consideră că odată ce site-ul este finalizat şi postat pe Internet, lucrurile sunt încheiate. Din acest moment organizaţia este prezentă pe Internet iar utilizatorii interesaţi de serviciile şi produsele organizaţiei vor veni de la sine. Din păcate nu se întâmpla deloc aşa. Cel mai probabil, potenţialii dumneavoastră utilizatori / clienţi nu cunosc şi nu caută organizaţia dumneavoastră. Ei sunt în căutarea serviciilor sau produselor pe care le oferiţi, atât dumneavostră cât şi concurenţa. Dacă atunci când un utilizator caută produsele dumneavoastră, site-ul nu va fi printre primele afişate, cel mai probabil acea persoană va deveni clientul concurenţilor dumneavoastră. Un site nepromovat este la fel ca un magazin strălucitor şi plin de mărfuri plasat pe o străduţă întunecoasă, pe unde nu trece nimeni. Magazinul va da faliment în câteva luni. Site-ul va rămâne un obiect inutil care nu aduce organizaţiei dumneavostră nici un beneficiu. Un sistem de promovare a site-ului este şi banner exchange-ul. Banner Exchange înseamnă publicitate reciprocă în cadrul unei reţele de site-uri: în schimbul reclamelor (bannerelor) pe care le publicaţi pe site-ul dumneavoastră, site-urile partenere publică reclamele (bannerele) dumneavoastră. O astfel de publicitate reciprocă prin schimb de bannere se poate realiza între oricare două

sau mai multe site-uri, cu condiţia ca schimbul să fie echitabil. Un sistem centralizat de publicitate reciprocă (banner exchange / link exchange) asigură: echitatea schimbului în reţele cu un numar mare de participanţi, numeroase dimensiuni şi formate de banner, selecţia şi monitorizarea site-urilor participante, statistici ale campaniilor publicitare derulate etc. Site-ul trebuie actualizat. Ca şi promovarea, întreţinerea şi actualizarea site-ului sunt nişte operaţii foarte adesea neglijate. Nu odată am văzut pe Internet site-uri cu informaţii vechi, cu date de contact neactualizate, cu oferte care nu mai sunt valabile, cu rubrici de Noutaţi al căror conţinut nu a mai fost schimbat de la lansarea site-ului. Pentru un potenţial client care vizitează frecvent site-ul, o asemenea situaţie este un motiv puternic de a pune la îndoială seriozitatea organizaţiei dumneavoastră. Nu trebuie să uitaţi nici o clipă că, pe Internet, site-ul organizaţiei este însăşi organizaţia. Iar un site neactualizat este la fel ca un magazin cu mărfuri prăfuite şi cu termenul de garanţie expirat. Dumneavoastră aţi cumpăra ceva dintr-un asemenea magazin? Site-ul trebuie sa funcţioneze corect Deşi buna funcţionare a site-ului pare o condiţie de la sine înţeleasă, destul de des pot fi găsite site-uri cu pagini care nu se deschid, cu baze de date care dau erori, cu formulare care funcţionează incorect. Un site care dă erori la funcţionare îi va îndepărta definitiv pe potenţialii vizitatori care nu vor mai reveni pe site şi nici la organizaţia dumneavostră. Şi, fără îndoială, justificat. Nici dumneavoastră nu aţi mai reveni într-un magazin în care liftul s-a blocat între etaje sau casa de marcat s-a defectat tocmai când, după o aşteptare de jumătate de oră, aţi ajuns să plătiţi. Aşa încât, la finalizarea proiectului, rezervaţi-vă o oră pentru a vizita site-ul în întregime şi asiguraţi-vă că totul funcţionează fără greş.

8. Optimizare site Optimizarea paginilor web este o strategie aplicată de toţi specialiştii în marketingul site-urilor web şi se referă la "cosmetizarea" paginilor, în aşa fel încât ele să se afle în fruntea listei de pagini care este generată de un motor de căutare atunci când un utilizator caută paginile care conţin un anumit cuvânt sau o anumită sintagmă. Optimizarea unui site web pentru a fi indexat adecvat de către motoarele de căutare este un procedeu foarte simplu, însă în acelaşi timp destul de laborios în cazul în care avem un site cu multe pagini. Ea se referă la alegerea titlului paginilor, la alegerea unor cuvinte-cheie legate de conţinutul fiecărei pagini în parte şi la aranjarea textului în pagină. În general se spune despre orice pagină web că are o anumită temă şi conţine anumite cuvinte-cheie. Tema paginii este subiectul luat în discuţie iar cuvintele-cheie sunt cuvintele foarte importante (pentru înţelegerea temei dezbătute) care apar în text. Orice pagină web are o parte vizibilă, care este afişată de explorator ("browser") şi pe care o vedem noi când o vizităm. De asemenea, orice pagină web are şi o parte "invizibilă" pentru explorator, care este în fapt vizibilă doar dacă se deschide pagina respectivă cu un editor HTML sau cu un editor de text (de ex. Notepad). Această parte "invizibilă" conţine codul HTML al paginii şi unele marcaje ("tags") folosite în scopul unei indexări adecvate a paginii respective de către motoarele de căutare. Codul HTML al unei pagini poate fi văzut atunci când avem pagina afişată în explorator dacă facem clic pe meniul "View" şi apoi pe opţiunea "Source". Va fi lansat automat programul Notepad în care vom vedea codul HTML.

8.1. Optimizarea conţinutului paginii Web Motoarele de căutare sunt programate să utilizeze în mod optim baza de date obţinută de “roboţii târâtori” care indexează paginile de pe internet. Scopul lor este să prezinte foarte rapid utilizatorilor liste cu pagini web în care primele locuri să fie ocupate de pagini cu un conţinut informativ, util. Deci algoritmul de sortare a paginilor trebuie să fie foarte bine conceput pentru că el are rolul de a sorta mii sau zeci de mii de pagini întrun timp foarte scurt şi cu un rezultat care să fie pe placul utilizatorilor. Un robot târâtor nu vede paginile web aşa cum le văd oamenii, el acordă o importanţă covârşitoare textului unei pagini, fără a fi impresionat deloc de aspectul ei grafic. Ca urmare bazele de date ale motoarelor de căutare conţin pagini indexate după conţinutul lor scris şi nu după cel grafic. Acest conţinut scris este cel care dă 70% din relevanţa unei pagini web, restul de 30% fiind dat de optimizarea ("cosmetizarea") paginii web. Sarcina lingviştilor şi a matematicienilor implicaţi în dezvoltarea motoarelor de căutare a stat tocmai în crearea şi optimizarea unui algoritm care să poată să ordoneze un număr mare de pagini web în funcţie de utilitatea conţinutului lor scris. În mod evident, unele din caracteristicile algoritmului nu sunt uşor de sesizat de către persoanele care nu au lucrat la el. Alte caracteristici pot fi însă deduse analizând paginile web care apar în mod constant pe primele locuri ale listelor generate de motoarele

de căutare. Este uşor de intuit faptul că algoritmul favorizează paginile web care au un conţinut de text important, pentru că se consideră că aceste pagini conţin multă informaţie, iar utilizatorii caută în mod special această caracteristică a paginilor web. Nu se ştie precis cum este evaluat de către algoritm conţinutul de text al unei pagini dar este foarte posibil să fie luat în calcul numărul de caractere (litere) din pagină aşa cum a fost calculat de robotul târâtor care a indexat pagina. Asta nu înseamnă că pentru ca paginile noastre să aibă succes suntem obligaţi să le umplem cu text până la refuz, fără să ţinem cont şi de alte aspecte, cum este de exemplu calitatea expunerii informaţiilor din textul respectiv. Paginile cu mult text sunt pe placul algoritmilor dar oamenii sunt mai rafinaţi, ei preferă de cele mai multe ori o cantitate rezonabilă de text şi care în plus trebuie să fie interesant, util, bine scris şi formatat în aşa fel încât să fie plăcut de citit. Un alt aspect care nu trebuie neglijat este actualizarea periodică a conţintului site-ului şi adăugarea de noi materiale. Atunci când scriem textul dintr-o pagină trebuie să ne asigurăm că folosim şi sinonime pentru cuvintelecheie şi de asemenea că folosim şi variante mai puţin folosite ale acestora. De exemplu într-o pagină web care tratează un subiect despre site-urile web (găzduire de ex.) trebuie folosit în principal cuvântul "site" dar trebuie pusă în paranteză şi varianta "sit". În acest fel dacă un utilizator va căuta paginile care conţin sintagma "găzduire site web" avem toate şansele ca şi pagina noastră care tratează acest subiect să fie luată în seamă de motorul de căutare pentru includere pe lista rezulatelor căutării.

8.2. Înregistrarea site-ului la motoarele de căutare În general se consideră că nu este nevoie să ne înregistrăm site-ul la motoarele de căutare pentru că acestea îl vor indexa atunci când robotul târâtor îl va întâlni în "plimbările" sale periodice pe internet. Mulţi webmasteri preferă însă să fie siguri că site-ul va fi indexat cât mai repede şi atunci apelează la serviciul de propunere de site-uri prezent la toate motoarele de căutare. Acest serviciu este fie gratuit fie cu plată ( Looksmart , Lycos). Dacă site-ul nostru apare în listele generate de un robot de căutare nu mai trebuie să îl înregistrăm, este evident că paginile sale au fost deja indexate. Fiecare motor de căutare are o pagină specială numită "Add URL" (adaugă adresa unui site) sau cu un titlu asemănător ("Submit a Site"). În pagina respectivă scriem într-o casetă de text adresa site-ului (de exemplu http://www.masinidespalat.home.ro) şi în altă casetă un mic comentariu (descrierea site-ului sau nişte cuvintecheie) şi apăsăm butonul "Add URL". Nu este nevoie să înregistrăm decât adresa paginii gazdă a site-ului. Robotul motorului de căutare va indexa toate paginile site-ului pornind de la aceasta. În final, am căutat câteva modalităţi de urmărire a traficului pe site-ul web. Am setat două contoare de trafic. Unul românesc (www.trafic.ro) şi unul străin (www.sitemeter.com). Ambele sunt gratuite şi oferă o mulţime de informaţii utile despre numărul de vizitatori şi pagini web (page views) accesate, împărţite pe ani, luni, săptămâni. În plus, mai sunt precizate tipul de browser folosit, IP-ul, prima şi ultima pagină accesată etc. După ce vă înscrieţi la aceste site-uri web, veţi primi un cod HTML pe care trebuie să-l inseraţi (fără nici un fel de modificare) în pagina web, acolo unde doriţi ca el să apară. La Trafic trebuie să alegeţi categoria în care se încadrează site-ul dvs. Apoi, veţi putea urmări în fiecare săptămână evoluţia site-ului dvs. (nr. de vizitatori, creşterea faţă de săptămâna încheiată, poziţia obţinută în cadrul secţiunii respective etc.). 9. Protejarea conţinutului unui site Termenul de copyright este specific american, dar se foloseşte şi în Europa sau pe alte continente, cu aceeaşi semnificaţie: drept de autor. În România, dreptul de autor este reglementat juridic prin Legea nr. 8 / 1996. În conformitate cu prevederile acestei legi, opera de creaţie intelectuală este recunoscută şi protejată, independent de aducerea la cunoştinţă publică, prin simplul fapt al realizării ei, chiar neterminată (Art. 1, Alin. 2). Dreptul de autor este legat de persoana autorului şi comportă atribute de ordin moral şi patrimonial (Art. 1, Alin.1). Aşadar, un site web reprezintă o operă de creaţie intelectuală şi poate constitui obiect al dreptului de autor. Aceasta înseamnă că informaţiile pe care le introduceţi într-o pagină personală vă aparţin şi dreptul de autor vă revine în întregime asupra textului respectiv. Dacă însă lucraţi într-o echipă sau sunteţi angajat al unei firme de webdesign atunci sunteţi co-autor şi veţi fi protejat prin drepturi de autor asupra imaginilor pe care le-aţi creat, machetării paginii sau programelor pe care le-aţi realizat. Mulţi oameni consideră, în mod eronat, că se pot copia fără a cere acordul nimănui diverse materiale disponibile online (texte, imagini, sunete, fişiere video etc.) Există într-adevăr site-uri de unde se pot copia astfel de fişiere sau de unde se poate încărca software gratuit. Pe aceste site-uri veţi găsi o notă explicită care vă permite utilizarea acestora. Dacă nu găsiţi o notă în acest sens, este indicat să cereţi prin e-mail acordul webmasterului site-ului web de la care vreţi să copiaţi materialele respective. În majoritatea cazurilor vi

se va răspunde afirmativ. De asemenea, este bine să includeţi o notiţă de copyright în subsolul fiecărei pagini în care se vor preciza simbolul de copyright (©), autorul şi anul în care a fost făcută publică pagina respectivă. Dacă consideraţi necesar, puteţi să treceţi şi alte menţiuni specifice. Pe lângă protejarea conţinutului unui site, şi aspectul acestuia, modul tehnic de realizare, interacţiunea între componentele acestuia pot fi obiectul protecţiei. Sunt numeroase situaţiile în care un site poate fi protejat în sine, ca operă independentă, fără ca protejarea conţinutului acestuia să fie impusă sau să existe. În egală măsură, conţinutul unui site poate constitui obiectul protecţiei în timp ce elementele grafice şi funcţionale ale acestuia să fie libere. 10. Feedback (interacţiunea cu vizitatorii) Până acum, principala formă de comunicare între comercianţi şi clienţii lor era publicitatea. Dar această comunicare nu oferea o oportunitate de interacţiune între cele două părţi sau feedback. Odată cu răspândirea Internetului se poate realiza foarte uşor o comunicare în ambele sensuri. Îmbunătăţirea metodelor prin care utilizatorii interacţionează cu paginile unui site web este esenţială pentru crearea unui site bun. Folosirea feedback-ului este foarte importantă pentru creşterea numărului de vizitatori şi oferă posibilitatea ca aceştia să-şi exprime opiniile, sugestiile şi comentariile în legătură cu un site web. Emailul este cea mai importantă şi mai uşoară cale de a recepţiona mesaje de la cititori. Vă recomand să nu scrieţi nici o adresă de e-mail în clar, ci să o inseraţi ca imagine, pentru a evita spamul. O altă variantă este prezentată în imagine: De aceea, este obligatorie furnizarea adresei e-mail pe fiecare pagină. Pe de altă parte, un webmaster trebuie să fie capabil să răspundă în timp scurt pentru a menţine o relaţie de încredere reciprocă. Există pe Internet mii de site-uri web care vă oferă posibilitatea să vă creaţi gratuit unul sau mai multe conturi de e-mail. Câteva dintre cele mai cunoscute sunt următoarele: - http://www.hotmail.com - http://www.yahoo.com - http://www.geocities.com - http://www.freeservers.com - http://www.netadress.com - http://www.home.roCărţi de oaspeţi (guestbooks) Completarea formularelor este o practică des întâlnită pe Internet. Acestea permit colectarea de feedback-uri de la cititori într-un mod organizat. Un formular web se poate realiza uşor folosind direct codul HTML sau cu ajutorul unui editor HTML. Un exemplu de formular des întâlnit îl reprezintă aşa numitele cărti de oaspeţi unde cititorul poate să-şi scrie impresiile şi comentariile după vizitarea unui site. O carte de oaspeţi gratuită se poate obţine vizitând site-urile web următoare: - http://www.theguestbook.com - http://www.dreambook.com - http://www.guestbooks.net - http://www.countz.com/guestbook.html - http://www.freecenter.com/guestbook.html - http://www.lpage.com - http://www.bravenet.com - http://www.guestbook4free.com/en/ Camere de chat Pentru a aduce cât mai mulţi vizitatori la site-ul pe care l-aţi creat, puteţi să setaţi un serviciu propriu de chat. Unele site-uri oferă gratuit această facilitate, ca de exemplu: Action Chat ( http://www.ten-percent.com/ ) Ram-Page Chat ( http://www.ram-page.com/ ) Liste de discuţii Pentru a creşte gradul de interactivitate cu vizitatorii puteţi să setaţi în pagină o listă de discuţii. Există multe site-uri, ca de exemplu Topica sau Yahoogroups care oferă gratuit această facilitate. Mai multe informaţii despre acest subiect găsiţi în capitolul “Promovarea site-ului web”. 11. Greşeli Frecvente 1. Prea multe imagini Unii web designeri fac exces de zel în împodobirea paginilor cu grafică şi animaţii, din convingerea ca astfel vor fi mai atrăgătoare. Este o eroare frecventă mai ales pentru cei care intră în contact cu web designul prin graphic design. Imagini multe, mari, neoptimizate înseamnă viteză de încărcare a paginii drastic scăzută. Mai mult, nici un motor de căutare nu indexează încă imagini, deci un home page

constituit din imagini năucitor de atrăgătoare, şi nici o linie de text (html, nu desenat pe bitmap) va genera un număr constant de listări pe cuvinte cheie în Google: zero. În consecinţă, la ce foloseşte o pagină foarte frumos desenată, dacă doar câţiva ajung să o vadă (cei care nu s-au plictisit aşteptând să se descarce şi cei cu conexiuni de înalta viteză), sau cei care cunosc adresa din alte surse. 2. Imagini neoptimizate pentru web Din nou, greşeala frecventă la cei care au un background în design grafic. Pe web, mărimea contează. Programe de editare de imagine ca Adobe Photoshop oferă opţiuni de optimizare pentru web, dar există şi unelte mai simple şi mai putin costisitoare pentru optimizarea de imagini. 3. Exces agasant de animaţii Mulţi designeri cred că o pagină pe care se mişcă ceva în permanenţă este mult mai atractivă. Numai că principiul de „eye catching” se referă la un SINGUR element care focalizează atenţia. Şi deja am descoperit greşeala. În loc să atragă atenţia, elementele animate dintr-o pagină distrag atenţia cititorului, funcţionând ca nişte viziuni periferice. Acelaşi rezultat îl au şi efectele de tip Blink: ajung să agaseze vizitatorul, alungându-l de pe site, la fel de nedumerit cum a a venit. Aşadar, atenţie la dozarea animaţiilor! 4. Cod redundant şi dezordonat Oricine poate vedea conţinutul-cod al unei pagini web selectând opţiunea „View source”. Deocamdată, nu există un procedeu de ascundere a sursei unei pagini web. Nu încurajăm scripturile java de blocare a afişării conţinutului, acesta fiind un motiv de penalizare în motoarele de căutare, şi o metodă sigură de agasare a vizitatorului (care e obişnuit să folosească butonul dreapta al mouseului) însă dacă aveţi stiluri proprii în pagină, de pildă, este de preferat să le introduceţi într-un document separat (.css), către care să se lege fiecare pagină din site. Motivul principal este optimizarea codului: nu mai e nevoie să introduceţi stilul în fiecare pagină, reducând astfel considerabil codul. Pe de altă parte, la fel de important este de reţinut că executând modificări repetate în pagină cu ajutorul unui editor vizual de html, aveţi toate şansele să obţineti un cod încâlcit, redundant, cu taguri inutile rămase din porţiuni şterse etc - de aceea este recomandabil să executaţi codul „de mână” pe cât posibil. Suficient de „ameţit”, codul va genera rapid şi funcţionarea defectuoasă a site-ului. 5. Testare Evident, când creaţi o pagină web o verificaţi în browserul vostru să vedeţi cum arată. Dar nu e suficient, nici pe departe. O pagină care arată super în Internet Explorer 6.x, la rezoluţia voastră de 1024x768 se poate transforma într-un dezastru vizual la o rezoluţie diferită, cu un font size diferit, în Netscape, Opera sau Mozilla. Ţineţi cont şi de utilizatorii care au browserul setat să nu afişeze imagini, de cei care folosesc alt sistem de operare decât Windows. Creaţi-vă tabelele, imaginile, textele (daca nu folosiţi CSS) astfel încât să fiecompatibile cu vizualizarea în majoritatea situaţiilor (ideal în toate). 6. Feeback Formularele sunt o parte interactivă a unui site. Într-o pagină cu formular, te apropii de vizitator mai mult decât în celelalte. E stabilirea unei relaţii, şi începutul unui schimb. E poate partea cea mai personală a unui site, acolo unde userul iţi dă informaţii despre el, iţi împărtăşeşte opiniile sale, tu îi oferi un serviciu sau o oportunitate etc. De aceea modul în care execuţi formularele este foarte important pentru succesul site-ului tău. O relaţie se bazează pe respect şi încredere: dă-i vizitatorului ceea ce i-ai promis; afişează-i o pagină de confirmare / mulţumire după completarea formularului; afişează-i o pagină de eroare în cazul în care a completat greşit câmpurile sau a omis un câmp obligatoriu. Feedback, feedback, feedback. Şi bineînţeles, verifică-ţi scripturile, ca să te asiguri că formularul funcţionează. 7. Prea mult text Avem obişnuinţe rămase de la pagina de hârtie, şi de multe ori se vede pe web. O pagină de web nu e citită în autobuz sau în tren (să numărăm cate laptopuri cu conexiune wireless se plimbă acum cu rapidul BucureştiConstanţa?). Pentru cărţi, există varianta e-Book. Nu faceţi exces de text, pentru că nu va fi citit. Spargeţi textul în paragrafe, cu titluri relevante. În plus, sub 15% din utilizatori fac scroll pe o pagină web, aşa încât încercaţi să păstraţi informaţia esenţială în partea de sus a paginii. Internetul e un mediu dinamic, utilizatorii

obişnuiesc să acceseze mai multe pagini în acelaşi timp, şi evident sunt mai uşor distraşi de la conţinutul fiecăreia dintre ele. Evident, un text dozat pentru astfel de condiţii de citire nu înseamnă nicidecum un text laconic, din care vizitatorul să nu poată extrage nici o informaţie utilă. Dimpotrivă, oferiţi-i un coctail de esenţe, astfel încât să obţină cât mai multe informaţii într-un mod cât mai clar organizat, în cât mai puţin spaţiu. 8. Prea puţin text Totuşi, nu fiţi laconici. Cine ajunge pe pagină, doreşte să se infomeze. Oferiţi suficiente date, suficient conţinut, pentru vizitatori şi pentru motoarele de căutare. Oricum, de obicei site-urile web păcătuiesc prin prea mul text, nu prea puţin. 9. Text de tip sp@m / reclama Nu scrieţi: „Cel mai tare site de pe web”, „Cea mai bună firmă de consultanţă” sau "Cea mai mare colecţie de mp3-uri". Lasaţi-l pe vizitator să decidă, arătaţi-i respect. În plus, formulări prea comerciale au toate şansele să piardă vizitatorul. Şi el e sătul de reclamă, ca oricare dintre noi. Dacă a venit în căutarea unei informaţii, oferiţii informaţia, nu laude de sine. Sunteţi îndeajuns bun în ceea ce faceţi ca să-l convingeţi cu fapte, nu cu vorbe goale şi locuri comune care trec pe lângă ureche fără a fi procesate. Sublinierile (underline) se folosesc doar pe linkuri, lăsaţi-le acolo. Nu folosiţi cuvinte scrise cu majuscule, aceasta este o marcă a sp@mului, de care Internauţii s-au săturat până dincolo. Nu vreţi să fiţi asociaţi cu un fenomen negativ. 10. Site map Cu cât e mai mare un site, cu atât mai necesar devine un ghid de navigare. Utilizatorii sunt grăbiţi, deci trebuie să le arătaţi exact unde găsesc ceea ce caută. De asemena, şi agenţii de căutare găsesc foarte prietenoasă harta site-ului, din aceleaşi motive. 11. Mentenanţă Un site trebuie întreţinut. Nu lăsaţi informaţii vechi, „expirate”. Aduceţi mereu conţinut nou pentru vizitatori, dar şi pentru motoarele de căutare - dacă vreţi să aveţi un ranking bun. În fond, natura Internetului este dată de însuşi dinamismul său. Ţineţi pasul.

2. LIMBAJUL HTML

1. Structura paginii Cu ajutorul limbajului HTML (Hyper Text Markup Language) poti construi pagini web nu foarte pretentioase insa reprezinta un inceput pentru realizarea site-urilor profesionale. . Editarea acestora se poate face in orice program de editare texte, pornind chiar cu banalul Notepad din Windows. Toate notiunile prezentate in acest ghid pot fi puse in practica utilizand Notepad, astfel incat poti deschide Notepad acum. Desi exista mai multe programe care au grija de codul HTML atunci cand faci o pagina web, pentru a usura folosirea lor este nevoie de cel putin cateva notiuni elementare de HTML. Aceste programe se numesc editoare HTML si pot fi de doua tipuri: editoare clasice si editoare de tipul WYSIWYG (What You See Is What You Get, care se traduce prin ceea ce vezi este ceea ce obtii). In cazul celei de-a doua categorii de editoare HTML, utilizatorii nu trebuie decat sa se ocupe de partea grafica, de asezarea in pagina etc., scrierea codului HTML ramanand in seama acestor programe. O observatie demna de luat in seama este si aceea ca cele mai bune editoare HTML nu sunt gratuite. In concluzie, invatarea limbajului HTML are trei mari avantaje: • este foarte simpla si nu necesita mult timp • ofera controlul absolut asupra realizarii paginii web • poti folosi in cadrul paginilor pe care le vei realiza secvente de cod HTML "imprumutate" de la alte pagini web (pentru a vedea codul sursa al unei pagini web, in Internet Explorer intra in meniul View si apoi selecteaza Source)

Pentru a intra in posesia editoarelor HTML sau a variantelor demo ale editoarelor profesionale, le poti descarca de pe internet, dar daca nu ai o conexiune buna la internet, le poti gasi si pe CD-urile revistelor de IT. Fisierul pe care il vom edita se va numi index.html. In general fisierul principal al unui site internet (cel care se incarca atunci cand tastam o adresa de genul www.abc.abc) este numit index.html. Instructiunile pe care le folosim intr-o pagina HTML se numesc tag-uri si acestea indica browser-ului (Netscape, Internet Explorer, etc) modul de prezentare a informatiei din pagina. Tag-urile se scriu intre semnele < si >. Tag-urile nu trebuie scrise respectand reguli foarte stricte (nu e nevoie sa scrii numai cate un tag pe rand sau sa foloseti numai litere mari, etc).Un exemplu de utilizare a tag-ului FONT este: ABC

SRL

-

lider

pe

piata

serviciilor

Instructiunea de mai sus va determina afisarea textului "ABC SRL - Lider pe piata serviciilor" cu font arial si culoarea rosie. Dupa cum se poate observa, exista un tag inaintea textului si unul care incheie textul respectiv. Majoritatea tag-urilor functioneaza in acest mod: se pun inaintea informatiei pe care dorim sa o prezentam intr-un anume mod iar apoi la sfarsitul acesteia, ca in exemplul de mai sus. Continutul oricarui fisier HTML trebuie inclus intre tag-urile si . Aceasta inseamna ca tagul trebuie sa fie primul lucru care apare intr-un fisier HTML, iar tag-ul trebuie sa fie ultimul: ...aici

se

completeaza

informatia

de

prezentat

in

pagina...

Ca structura, o pagina HTML are doua parti: o parte delimitata de tag-urile si ce contine informatii de identificare a paginii si o parte delimitata de tag-urile si ce contine informatiile de prezentat efectiv in pagina. Asupra primei sectiuni nu vom insista prea mult. Cel mai important tag utilizat in sectiunea HEAD este cel care da titlul paginii. Acest titlu va fi incadrat de si . Un exemplu de pagina HTML foarte simpla, avand titlul "ABC SRL" este: ABC

SRL

...aici

se

completeaza

continutul

paginii...

Tag-urile ..., ..., ... si ... vor aparea o singura data in cadrul unui fisier HTML, dupa cum arata exemplul de mai sus. Apasa pe imaginea de mai jos pentru a vedea cum arata fisierul ce contine instructiunile de mai sus (se deschide intr-o fereastra separata pe care o poti inchide dupa consultare):

2. Despre texte

Cel mai important element al unei pagini internet este, desigur, textul. Intr-o forma simpla, acesta poate fi scris efectiv intr-o pagina HTML, dupa cum am vazut in exemplul anterior: am scris in fisierul HTML textul "...aici se completeaza informatia de prezentat in pagina..." si acesta s-a incarcat in mod identic in browser. Vom studia in continuare elemente de formatare a textului. Doua lucruri trebuie mentionate in primul rand, legate de formatarea textelor: utilizarea spatiilor si trecerea la un nou rand. Intr-un fisier HTML afisarea mai multor spatii consecutive nu este posibila prin scrierea directa in fisierul html ci folosind de mai multe ori sintagma  . Astfel, pentru a pune trei spatii intre cuvintele ABC si SRL in textul "ABC SRL" va trebui sa scriem in fisierul HTML astfel: ABC   SRL Trecerea la un nou rand nu se face apasand Enter in fisierul HTML, ci utilizand tag-ul (acest tag se utilizeaza singur; nu se foloseste cu ).Astfel, pentru a scrie "ABC" pe un rand, a lasa un rand liber, si "SRL" pe un rand separat, vom folosi: ABCSRL

Am utilizat mai sus de doua ori tag-ul BR: o data pentru a trece la un nou rand si o data pentru a lasa un rand liber. Tag-ul utilizat pentru formatarea modului de afisare a textului este .... Tag-ul FONT suporta mai multi parametri, printre care: - SIZE=x, unde x este dimensiunea fontului (1 fiind dimensiunea cea mai mica); - COLOR=#RRGGBB - culoarea cu care se va afisa fontul (vom reveni asupra acesteia in capitolul urmator).Culoarea implicita este negru; - FACE=font - fontul cu care va fi scris textul respectiv. Atentie! Vizitatorii paginii tale trebuie sa aiba fontul respectiv instalat pe calculator, deci utilizeaza numai fonturi "clasice". Fontul implicit este Times New Roman Acesti parametri poti fi utilizati separat sau simultan in cadrul tag-ului FONT. Astfel, instructiunea de mai jos afiseaza text folosind culoarea albastru: ABC

SRL

-

Lider

pe

piata

serviciilor

Instructiunea de mai jos afiseaza acelasi text cu font arial, culoare albastra si dimensiune mai mare: ABC SRL - Lider pe piata serviciilor

Dupa cum se poate vedea, se pot utiliza mai multi parametri in cadrul aceluiasi tag FONT. Acestia nu se despart prin virgula, ci printr-un spatiu.De retinut ca parametrul FACE poate primi mai multe fonturi. Astfel, un tag de tipul ... va instrui browserul sa utilizeze fontul Verdana, iar daca acesta nu este gasit, sa utilizeze Arial. Mai exista trei tag-uri utile pentru formatarea textelor: ... - utilizat pentru scrierea textelor cu bold, ... - utilizat pentru scrierea textelor cu italics (litere inclinate) si ... - pentru a scrie text subliniat. Desigur, pot exista combinatii intre tag-ul FONT si tag-urile de subliniare, ingrosare sau inclinare, ca de exemplu: Text

verde

ingrosat

Tine cont ca tag-urile trebuie inchise in aceeasi ordine in care au fost deschise. Pentru exemple concrete de utilizare a tuturor informatiilor de mai sus, apasa pe imaginea de mai jos (se deschide intr-o fereastra separata pe care o poti inchide dupa consultare):

In fisierul index.html deschis in Notepad, sterge randul cu "...aici se completeaza informatia de prezentat in pagina..." si inlocuieste-l cu: ABC

SRL

-

Lider

pe

piata

serviciilor

Acum, daca salvezi fisierul index.html si il reincarci in Browser, ar trebui sa arate cam asa (apasa pe

imaginea de mai jos - se va deschide intr-o fereastra noua):

:

Exemplu Blocuri paragraf Prima linie Lini generata de un paragraf (implicit paragraful este aliniat la stanga). Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta. Paragraf aliniat in centru.Paragraf aliniat in centru.Paragraf aliniat in centru.Paragraf aliniat in centru. Paragraf aliniat in centru.Paragraf aliniat in centru.Paragraf aliniat in centru.

3. Despre culori

Am vazut in capitolul anterior ca textele din paginile HTML pot avea diverse culori cu un tag de tipul .... Vom prezenta in continuare sistemul de codificare a culorilor pentru paginile web. Fiecare culoare este interpretata ca fiind compusa din diverse procente ale culorilor rosu, verde si albastru. Acestea sunt exprimate prin numere in baza 16. Astfel, numarul 00 reprezinta nivelul minim dintr-o anumita culoare iar numarul FF reprezinta nivelul maxim. Acordand ponderi exprimate prin aceste numere in baza 16 culorilor rosu, verde si albastru (Red, Green, Blue - RGB) se poate obtine orice culoare: rosu verde albastru galben

mov bleu negru (alb)

Culorile de mai sus vor fi mai putin "aprinse" daca in loc de FF se foloseste AA, spre exemplu: #00AA00.

Folosind acelasi sistem vom putea specifica culoarea de fundal (background) a unei pagini web, in cadrul tagului BODY despre care am vorbit la inceputul acestui ghid:

Tag-ul BODY mai poate contine si alte informatii interesante, ca de exemplu culoarea cu care vor fi afisate linkurile catre alte pagini (utilizand atributul LINK) si link-urile catre alte pagini care au fost vizitate deja (folosind atributul VLINK):

In fisierul index.html din Notepad, inlocuieste randul continand tag-ul cu cel de mai sus si salveaza fisierul (se inlocuieste tag-ul BODY de la inceputul fisierului, nu cel de la sfarsit care este ). Fundalul paginii tale ar trebui sa devina bleu:

4. Despre tabele Tabelele se utilizeaza folosind tag-ul .... Imaginati-va un tabel simplu deschis in Word care cuprinde mai multe casute. In fisierul HTML, casutele sunt organizate pe randuri (rows - linii orizontale de casute). La randul lor, randurile sunt organizate in elemente (casute): 1

Tabelul de mai sus contine 3 randuri, fiecare rand continand 5 elemente.In interiorul unui tag de tip TABLE, randurile sunt declarate folosind tag-ul ..., iar in cadrul fiecarui tag TR elementele sunt declarate cu tag-ul .... Fiecare element (casuta) poate contine text, imagini, link-uri, etc. Un tabel de tipul celui de mai sus ar fi codificat astfel: 1

In exemplul de mai sus avem un tag ... care delimiteaza tabelul si trei tag-uri ... corespunzand celor trei randuri ale tabelului. Fiecare tag TR contine cate 5 tag-uri .... Intre si se introduce continutul efectiv al fiecarei casute. In exemplul de mai sus numai casuta din stanga-sus are continut - cifra 1 (nu incercati exemplul de mai sus, intrucat casutele fara continut nu sunt afisate).

Tag-urile de definire a tabelelor pot avea diverse atribute, pentru formatarea tabelului. Astfel, tag-ul TABLE poate avea: - WIDTH=x sau WIDTH=x% - acesta specifica lungimea intregului tabel in pixeli (de exemplu WIDTH=500) sau

in procente fata de lungimea intregii ferestre (de exemplu WIDTH=50%); - HEIGHT=x sau HEIGHT=x% - similar cu WIDTH, dar pentru inaltimea intregului tabel (exemple: HEIGHT=300 sau HEIGHT=100%); - BORDER=x - daca x este 1 atunci tabelul va avea si "cadru" (linii de delimitare a elementelor. Daca x este 0, atunci acestea vor lipsi (deci BORDER=0 sau BORDER=1); CELLSPACING=x specifica spatiul dintre casute, in pixeli; - CELLPADDING=x - specifica spatiul dintre marginea unei casute si continutul acesteia, in pixeli. Si in acest caz pot fi folosite toate aceste atribute impreuna, numai o parte a lor, sau nici unul. Un tag TABLE ce le foloseste pe toate ar arata astfel:

Si tag-ul TD poate avea tot felul de atribute interesante: - WIDTH=x sau WIDTH=x% - lungimea casutei in pixeli sau ca procent din lungimea intregului tabel; - HEIGHT=x sau HEIGHT=x% - inaltimea casutei in pixeli sau ca procent din inaltimea intregului tabel; - BGCOLOR=#RRGGBB - culoarea fundalului casutei, ca de exemplu BGCOLOR=#EEEEDD. - ALIGN=RIGHT, ALIGN=LEFT sau ALIGN=CENTER - modul cum va fi pozitionat continutul casutei in casuta: la dreapta, la stanga sau central; - VALIGN=TOP, VALIGN=BOTTOM sau VALIGN=CENTER - similar, dar pentru pozitionarea pe verticala: sus, jos sau central. Tine cont de faptul ca textul din interiorul unei casute trebuie formatat si el la randul sau. O casuta ce ar contine un text rosu pe fond verde deschis s-ar codifica astfel: text

Va prezentam si doua tabele atipice: CELULA 1 CELULA 2 CELULA 3 CELULA 4 Un

asemenea

CELULA CELULA

astfel: 3 4

Noteaza utilizarea atributului COLSPAN=3 in prima celula a celui de-al doilea rand. Acesta spune ca celula respectiva se "intinde" pe lungimea a trei celule din structura normala a tabelului.Desigur, acest al doilea rand va contine numai o singura celula, nu trei. Similar se poate proiecta un tabel cu o celula care se intinde pe verticala pe spatiul a doua celule: CELULA 1 CELULA 2 CELULA 4 CELULA 5 Si CELULA CELULA 4CELULA

este:

2 3 5

Se observa utilizarea atributului ROWSPAN=2 in a treia celula a primului rand al tabelului. Acesta spune ca aceasta celula se intinde pe verticala pe "inaltimea" a doua randuri. Desigur, cel de-al doilea rand contine numai

doua

celule

(nu

trei),

intrucat

a

treia

vine

din

randul

de

sus.

Tabelele pot reprezenta un instrument foarte puternic in cadrul unui fisier HTML. O tehnica interesanta de pozitionare cat mai exacta a unor informatii consta in utilizarea unor tabele in tabele (tag-uri TD care au drept continut un tabel, de exemplu). In acest caz este foarte importanta succesiunea corecta a tag-urilor TD, TR si TABLE pentru o afisare corecta. O alta tehnica interesanta este utilizarea tabelelor cu BORDER=0 (fara cadru) pentru gruparea unor date fara a da impresia existentei unui tabel propriu-zis. 5. Exemple de tabele In continuare vom da doua exemple de tabele care pot fi incarcate si in fisierul index.html desxhis in Notepad:

Adresa: Bulevardul Independentei nr. 0, Bloc 0, Ap 0, Sector 0, Bucuresti Activitate: ABC SRL va ofera o gama larga de produse si servicii necesare dezvoltarii activitatii societatii Dumneavoastra. Ne recomandam prin structura deosebita a ofertei noastre precum si prin politica de preturi practicata.

Exemplul de mai sus nu contine decat notiuni explicate deja in capitolele anterioare: este vorba de un tabel "clasic" cu lungime de 700 pixeli (WIDTH=700), fara cadru (BORDER=0) si cu spatiu de 5 pixeli atat intre casute (CELLSPACING=5) cat si intre cadru si informatia din casuta (CELLPADDING=5); tabelul are doua randuri (continute intre cele doua perechi de tag-uri ...); fiecare rand contine cate doua casute: - prima de lungime 30% din total (WIDTH=30%) cu culoarea fondului bleumarin (BGCOLOR=#006666) si textul aliniat la stanga. Textul din aceasta casuta este scris cu font Verdana de dimensiune 2 si culoare alba (FONT FACE=VERDANA,ARIAL SIZE=2 COLOR=#FFFFFF) si este ingrosat (B). - a doua casuta cu fond bleu (BGCOLOR=#CCEEEE) si text aliniat de asemenea la stanga (ALIGN=LEFT). Contine text cu acelasi font Verdana de dimensiune 2, dar scris cu negru (implicit) si cu litere inclinate (I). Poti copia exemplul de mai sus in fisierul tau index.html deschis in Notepad (pozitioneaza-l intre ultimul tag si tag-ul de la sfarsitul fisierului). Incarcat intr-un browser, index.html ar trebui sa arate astfel:

Iti

mai

prezentam

inca

un

tabel,

ceva

mai

simplu:

NOU Incepand cu luna februarie societatea noastra aplica reduceri la produsele oferite de la 30% la 50%, in functie de cantitate. Va invitam sa ne apelati la telefon 000.0000 pentru informatii suplimentare. Va stam la

dispozitie si prin e-mail cu o oferta completa de preturi. Puteti vizita si pagina societatii XYZ cu care colaboram indeaproape: apasati aici.

Acest tabel are aceeasi lungime de 700 de pixeli (WIDTH=700), are si cadru (BORDER=1) si un spatiu de la cadru la textul din casute de 5 pixeli (CELLPADDING=5). Tabelul contine un singur rand si o singra casuta in acest rand. Casuta are fondul bleu (BGCOLOR=#CCEEEE).In interiorul casutei este un text scris cu font Verdana de dimensiune 2. Unele cuvinte din tabel sunt scrise cu bold (B).

Copiaza si acest exemplu in fisierul tau index.html deschis in Notepad (pozitioneaza-l intre tag-ul de jos si tag-ul de la sfarsitul fisierului). Incarcat intr-un browser, index.html ar trebui sa arate cam asa acum:

6. Link-uri si pozitionare Un element important al oricarei pagini web il constituie link-urile catre alte pagini. Acestea pot fi link-uri externe, care fac referire catre un alt site, sau link-uri interne care fac referire catre alte pagini ale aceluiasi site. Ambele tipuri se codifica asemanator prin folosirea unui tag de tipul ... (pentru un link intern) sau ... pentru un link extern. Astfel codul de mai jos va afisa textul "Apasati aici pentru pagina 2" care prin apasare va incarca fisierul pag2.html: Apasati

aici

pentru

pagina

2

Codul de mai jos va afisa "Apasati aici pentru pagina XYZ SRL", text care prin apasare va incarca pagina www.xyz.xyz: Apasati

aici

pentru

pagina

XYZ

SRL

In exemplul de mai sus poti specifica in ce mod se va incarca pagina respectiva folosind atributul TARGET: - TARGET="nume", unde nume este numele pe care vrei sa il dai unei noi ferestre unde se va incarca pagina. Poti folosi si TARGET="_blank" pentru o fereastra noua sau TARGET="_self" pentru incarcarea in aceeasi fereastra. O alta varianta este posiblitatea transmiterii unui e-mail. Astfel, codul de mai jos afiseaza "Scrie-ne!", text care prin apasare va deschide o fereastra pentru transmiterea unui mesaj la adresa [email protected]: Scrie-ne!

In acelasi mod o pagina HTML poate fi impartita in mai multe "capitole" (sectiuni), in caz ca este foarte lunga. Astfel, fiecarei sectiuni i se va asigna un nume, nume ce va putea fi utilizat in incarcarea paginii respecitve, astfel incat sa se afiseze exact sectiunea respectiva. Fie fisierul lucrare.html pe care il impartim in doua sectiuni.Codul care face acest lucru ar fi: Sectiunea pentru

sectiunea sectiunea

1 1... 2 2...

Apoi, daca dorim sa incarcam fisierul lucrare.html din alta pagina, dar astfel incat sa se incarce direct sectiunea 2, vom utiliza: Apasa

aici

Cel mai bine vom demonstra aceste lucruri printr-un exemplu (se deschide intr-o pagina separata):

In mod similar poti afisa fisiere text (cu extensia txt) sau poti da posibilitatea vizitatorului sa salveze pe disc un alt tip de fisier (zip de exemplu): Raport

sau

Salveaza

programul

Un alt element util in formatarea paginii web este tag-ul .... Acesta este utilizat pentru alinierea pe centru a unor elemente (texte, tabele imagini). Tot ce este scris intre tag-ul si va apare centrat.

In fisierul nostru deschis in Notepad vom folosi tag-ul CENTER pentru a pozitiona central elementele paginii. Astfel, vom introduce tag-ul imediat dupa tag-ul BODY de la inceputul fisierului () si vom mai introduce si imediat inainte de tag-ul de la sfarsitul fisierului. Mai facem o imbunatatire fisierului index.html deschis in Notepad, prin introducerea unor link-uri. Identifica in cel de-al doilea tabel din acest fisier textul "Va stam la dispozitie si prin e-mail" si inlocuieste email cu: e-mail

De asemenea identifica si textul "apasati aici" de la sfarsitul tabelului si inlocuieste cuvantul "aici" cu: aici

Fisierul nostru deschis in Notepad ar trebui sa arate acum cam asa:

Acum toate elementele tabelului (titlul si cele doua tabele) sunt pozitionate pe centru si exista link-uri pentru email si pagina XYZ. Exemplul 1: Comutarea intre doua pagini Pagina 1 Link catre pagina 2 Exemplul 2:

Link catre site-ul firmei Netscape Link catre site-ul firmei Netscape Netscape Corporation

7. Ultimele retusuri

Suntem foarte aproape de a da o forma finala fisierului nostru index.html deschis in Notepad si care a servit ca exemplu pana acum. Mai intai vom introduce si tag-ul . Acesta are un rol foarte simplu si anume - de a trasa o linie orizontala pe toata latimea ferestrei. Acest tag functioneaza la fel ca si BR (adica, nu se foloseste ). Tag-ul HR primeste si atributul WIDTH sub forma WIDTH=x sau WIDTH=x% care specifica lungimea liniei in pixeli sau ca procent din latimea totala a ferestrei. Exemplu:

In fisierul index.html deschis in Notepad introducem urmatoarele instructiuni intre ultimul tag si tag-ul de la sfarsitul fisierului: rezervate. 2001

anul

Mai introducem si un tag intre cele doua tabele pentru a le distanta (deci intre tag-ul al primului tabel si tag-ul al celui de-al doilea tabel). In acest moment fisierul index.html este gata in aceasta varianta si ar trebui sa arate cam asa:

Vom folsi aceasta ocazie pentru a prezenta si modalitatea de includere a unor comentarii intr-o pagina HTML. Acestea trebuie incluse intre ca in exemplul urmator:

Aici se incheie prima parte a ghidului. In continuare vom prezenta cateva notiuni despre imagini, cadre (frames) precum si despre graficCAP VIII - Despre imagini

Prezentarea imaginilor in pagini HTML se face folosind tag-ul , unde nume este numele unui fisier gif sau jpg. Exemplu: , va afisa (presupunand ca avem deja fisierul sigla.gif):

Tag-ul IMG poate primi si atributul BORDER cu formele BORDER=0 (implicit) sau BORDER=n - pentru un chenar in jurul pozei de dimensiune n pixeli. O poza intr-un chenar arata mai bine:

,

va

afisa:

Se poate folosi o imagine si drept link catre o alta pagina: ,

va

afisa:

Cu un click pe imaginea de mai sus se va deschide o fereastra pentru compunerea unui mesaj.Se mai pot folosi imagini si drept fundal pentru pagini internet. Pentru aceasta, vom introduce atributul BACKGROUND in cadrul tag-ului de la inceputul unui fisier:

Efectul unei asemenea comenzi va fi (presupunand ca avem deja fisierul bkg.gif):

a, design-ul si continutul unei pagini web. CONTINUT EXTREN . Un lucru foarte interesant in cazul paginilor web este ca sursa acestora poate fi vazuta in mod liber oricand. Astfel, daca navighezi pe internet si descoperi o pagina interesanta, poti face click pe fereastra respectiva cu butonul din dreapta al mouse-ului si selecta View Source. Astfel, vei putea studia modul de realizare a paginii respective si invata cate ceva. Desigur, proiectarea si programarea paginilor web nu se rezuma la limbajul HTML - acesta este doar punctul de plecare. In rest? Exista multe tehnologii precum php, asp, flash, java, cgi, etc pentru internet, tehnologii cu ajutorul carora se pot realiza tot felul de programe si imbunatatiri pentru pagini web. Probabil ai vazut pe alte site-uri asemenea programe - pentru evidenta numarului de vizitatori pe site (countere), modalitati de comunicare cu vizitatorii (guestbook, forum), etc - si ti-au facut cu ochiul. Din pacate ghidul de proiectare web al verde.ro se rezuma la HTML, cel putin la acest moment. Dar exista alte modalitati de includere a unor asemenea programe pe site-ul tau: folosirea unor servicii gratuite disponibile pe internet. Spre exemplu, exista site-uri care iti ofera in mod gratuit si simplu posibilitatea de a include un counter pe site-ul tau, pentru a afla cati vizitatori intra pe site, de unde vin, pe ce pagini merg, etc. Noi folosim counter-ul furnizat de sitemeter.com. Apasa aici pentru a iti crea si tu un counter sau pentru informatii suplimentare (se deschide intr-o fereastra separata). Care este procedura? te vei inregistra cu site-ul tau pe sitemeter, vei completa o serie de formulare, iar apoi vei copia un portiune de cod in pagina ta, conform indicatiilor date. Acel cod va afisa un mic element grafic (deci, atentie unde il pozitionezi pentru a se incadra in pagina) pe care, daca faci click, intri in pagina cu informatii despre vizitatorii tai. Precum acest serviciu, exista multe: servicii gratuite pentru un guestbook ("agenda" unde vizitatorii iti pot scrie impresii), forum de discutii, etc. Un serviciu interesant este cel oferit de humanclick.com care te lasa sa iei legatura in mod direct cu vizitatorii tai, atunci cand esti on-line. Ce trebuie sa faci pentru a identifica alte

asemenea servicii? Fii atent la paginile pe care le vizitezi: aceste servicii au cate un link (care poate fi text sau o sigla) catre pagina proprie, pagina de unde te poti inscrie si tu pentru un serviciu similar. Exista si site-uri care iti ofera in mod gratuit posibilitatea de a adauga continut pe site-ul tau: informatii despre timpul probabil, stiri, date financiare, astrologie, etc. Asemenea servicii au aparut si in Romana, trebuie doar cautate cu atentie. Incearca, insa, sa nu abuzezi de aceste elemente furnizate de alte site-uri: in definitiv, incerci sa faci singur un site. 9 Despre cadre (frames) Poti imparti fereastra in mai multe zone sau cadre (numite frames). Acest lucru este foarte util in mai multe situatii. Spre exemplu, poti imparti pagina pe verticala in doua zone: una mai mica unde poti avea un meniu cu mai multe optiuni, si una mai mare unde se incarca informatiile:

Exemplul de mai sus cuprinde mai multe fisiere html: ex11.html si ex11b.html - fisierele care indica modul de impartire a ferestrei in doua ecrane, fisierul ex11_idx.html - care reprezinta frame-ul din stanga cu meniul si fisierele ex11_dat.html si ex11b_dat.html cu frame-ul din dreapta continand informatia efectiva. Fisierul ex11.html arata cam asa:

Acesta declara un set de doua frame-uri (FRAMESET) organizate pe verticala, primul frame de 120 de pixeli latime si al doilea de restul (COLS="120,*"), fara cadru (FRAMEBORDER="NO") si fara spatiu intre ele (FRAMESPACING="0"). Frame-ul din stanga se va numi index si va afisa fisierul x11_dat.html (cel cu meniul) iar cel din dreapta se va numi main page si va afisa fisierul ex11_dat.html (cel cu informatiile despre ABC SRL). Fisierul ex11b.html este identic cu cel de sus cu exceptia faptului ca in frame-ul din dreapta afiseaza fisierul ex11b_dat.html cu informatii despre XYZ SRL. Fisierul ex11_idx.html ce contine meniul va arata cam asa:

ABC SRL> XYZ SRL> Acest fisier contine meniul din partea stanga cu doua link-uri ce afiseaza paginile de prezentare ale ABC SRL (ex11.html) sau XYZ SRL (ex11b.html). Un exemplu de impartire a ferestrei in doua cadre pe orizontala arata astfel:

Fisierul

care





Noteaza utilizarea atributului ROWS="50%,*

10- Proprietati de stil (CSS) Unul dintre cele mai importante aspecte în web-design este, în momentul de fata, folosirea modelelor de stiluri. Definirea proprietatilor elementelor care apar intr-un document HTML cu ajutorul modelelor de stiluri ofera o mult mai mare flexibilitate creatorilor de pagini Web în a stabili aspectul final pe care pagina respectiva o va avea în fereastra programului de navigare Web. Modelele de stiluri nu reprezinta în mod practic o parte a limbajului HTML ci se prezinta ca limbaj de sine statator. Exista diferite limbaje de modele de stiluri, cel mai cunoscut şi utilizat fiind Modelele de Stiluri în Cascada (Cascading Style Sheets - CSS) . Pentru a stabili limbajul implicit de modele de stiluri pentru un document se foloseste elementul META în antetul documentului. De exemplu, pentru a desemna limbajul implicit ca fiind CSS se foloseste urmatoarea sintaxa: Oricum, în caz ca în antetul sau în header-ul HTTP al documentului nu se specifica un limbaj de modele de stiluri aplicat, limbajul implicit se considera a fi CSS. Prezentarea proprietatilor de stil se poate face în 3 moduri: • la nivel de element, prin folosirea atributului style • la nivel de document, prin folosirea elementului STYLE definit în antetul documentului • prin creearea unui fisier de stiluri cu extensia "css" care poate fi aplicat mai multor documente HTML. Gruparea unuia sau mai multor modele de stil intr-un fisier extern sau în antetul unui document HTML formeaza o asa numita foaie de stil 10.1 Folosirea atributului style Aplicarea proprietatilor de stil la nivelul fiecarui element în parte se realizeaza cu ajutorul atributului style. Valoarea acestui atribut este formata dintr-o multime de perechi de forma proprietate:valoare separate prin caracterul ";". Exemplu: Text foarte important Trebuie stiut ca proprietatile de stil se mostenesc prin incluziune, adica o proprietate aplicata unui element "parinte" este valabila şi pentru elementele pe care acesta le include, cu exceptia cazurilor în care elementele continute nu definesc ele insele valori pentru aceasta proprietate. Pentru a specifica valori ale atributelor care reprezinta URL-uri ale unor fisiere se foloseste sintaxa url(cale spre fisier), unde "cale spre fisier" reprezinta URL-ul relativ sau absolut al fisierului referit. Exemplu: 10.2 Inglobarea foilor de stil în antetul documentului

Cu ajutorul elementului STYLE amplasat în sectiunea de antet a documentului se pot defini modele de stiluri aplicabile unuia sau mai multor elemente din cadrul acelui document. Un model de stil se poate aplica:

• unui singur element din document • tuturor elementelor de acelasi tip ale documentului • unei submultimi de elemente ale documentului care pot fi de acelasi tip sau de tipuri diferite Pentru a aplica un model de stil unui singur element se foloseste atributul id de identificare a elementului în cadrul documentului. Exemplu: #id1{font-size:18px ; text-align:center} PARAGRAFUL 2 Deoarece valoarea atributului id este unica în interiorul unui document stilul se aplica cel mult unui singur element din cadrul documentului în al carui antet este definit modelul de stil. Pentru a defini un model de stil ce urmeaza a se aplica tuturor elementelor de acelasi tip se rescriu proprietatile care urmeaza a defini caracteristicile tipulului respectiv. De exemplu, daca dorim ca toate elementele de antet h1 sa fie scrise cu culoare rosie pe fond galben se foloseste sintaxa: H1{ background:Yellow ;color:Red} Pentru a aplica un model de stil mai multor elemente fara a fi nevoie ca acele elemente sa fie de acelasi tip se definesc clase de stiluri aplicabile apoi unui element cu ajutorul atributului class, atribut pe care il au toate elementele care compun corpul unui document HTML. O clasa de stil poate fi aplicata obiectelor de acelasi tip sau poate fi aplicata unor obiecte de tipuri diferite, lucrul acesta depinzand de modul de definire al clasei. De exemplu, pentru a defini un stil aplicabil anumitor elemente antet H1, dar nu în mod obligatoriu tuturor elementelor H1 se foloseste formularea: H1.special{ background:Yellow ;color:Red} PARAGRAFUL 2 PARAGRAFUL 3 Astfel, elementul h1 corespunzator paragrafului 2 va avea proprietatile definite de clasa de stil "special", pe cand elementul h1 corespunzator paragrafului 3 nu va fi afectat de declaratia de stil din antet. Pentru a defini o clasa de stil aplicabila unor tipuri diferite de elemente se defineste clasa de stil fara a specifica un anume tip de element HTML: .special{ background:Yellow ;color:Red}

PARAGRAFUL 2 Asa cum se specifica în paragraful 2 ... Aceeasi clasa de stil este aplicata acum pentru a formata aspectul unui antet de tipul H1 şi a unui bloc de text marcat cu elementul SPAN. 10.3 Referirea foilor de stil externe Modalitatea care ofera creatorilor de documente HTML cea mai mare flexibilitate în crearea şi apoi intretinerea unuia sau mai multor documente legate intre ele şi eventual prezentate în cadrul aceluiasi "site" este definirea unor modele de stiluri în fisiere de sine statatoare - asa numitele Foi de Stil Externe - şi referirea lor din cadrul oricarui document care necesita acest lucru. In acest fel, pentru a modifica aspectul unui document fara a modifica continutul acestia, e suficient sa se modifice fisierul foii de stil externe, modificarea afectand automat toate documentele care fac referire la foaia de stil respectiva. Referirea unei foi de stil se face cu ajutorul elementului LINK din antetul documentului. Atributul href al elementului va reprezenta URL-ul foii de stil externe, iar atributul rel va lua valoarea "stylesheet". Optional mai pot fi prezente şi atributul type pentru a desemna limbajul de stil folosit, sau title pentru a identifica foaia de stil Exemplu: Trebuie stiut ca folosirea foilor de stil externe mareste timpul necesar incarcarii documentului în fereastra programului de navigare Web, metoda cea mai putin pretentioasa din acest punct de vedere fiind definirea stilurilor la nivelul fiecarui element. 10.4 Concurenta stilurilor în interiorul documentului In cazul în care un element cade în incidenta mai multor modele de stil definite în interiorul sau în exteriorul documentului stilul final va fi format dintr-o suma a proprietatilor care apar în fiecare dintre modelele de stil respective. In cazul în care aceeasi proprietate ia valori diferite în modelele de stil care se aplica aceluiasi element valoarea finala va fi data dupa urmatoarele reguli: • valorile din modelele de stil definite prin elementul STYLE au prioritate fata de valorile prezente în modelele de stil externe şi sunt, la randul lor, inlocuite de valorile aparute în stilurile definite la nivel de element. • daca aceeasi proprietate apare în doua sau mai multe modele de stil inglobate în antetul documentului atunci modelul de stil definit prin identificator are prioritate fata de clasa de stil, care, la randul ei, are prioritate fata de stilul definit pe tipuri de elemente. Exemplu: .special{ background:Yellow } H1{ background:Red} #id1{ background:Blue} PARAGRAFUL 2



In exemplul de mai sus toate cele trei modele de stil sunt aplicabile elementului H1 din document, dar valoarea finala a proprietatii "background" va fi "Blue". 10.5 Recunoasterea proprietatilor de stil Deoarece firmele producatoare ale programelor de explorare Web şi-au luat libertatea de a implementa dupa cum au crezut ele de cuviinta limbajele de modele de stil, adaugand fiecare dintre ele propriile proprietati de stil, este foarte dificil de prezentat lista tuturor proprietatilor de stil pe care le puteti folosi în documentele pe care le veti creea. Pentru o documentatie completa asupra acestui subiect vizitati site-urile oficiale ale celor doua companii producatoare.In cazul în care vreti sa va asigurati ca documentul dumneavoastra va putea fi interpretat fara erori de catre variantele mai vechi ale browserelor sau de catre browsere care nu recunosc deloc modelele de stil, intercalati definitiile stilurilor intre marcajele de comentariu: 10.6 Proprietati de stil pentru fundal Pentru a specifica unele caracteristici care privesc fundalul unor elemente se folosesc proprietatile: • BACKGROUND-COLOR - pentru a stabili culoarea fondului pasajului de text respectiv • BACKGROUND-IMAGE - pentru a stabili imaginea care va fi afisata în spatele textului • BACKGROUND-POSITION - pentru a specifica pozitia imaginii de fundal cu ajutorul a doua valori, una specificand asezarea pe verticala, iar cea de-a doua asezarea pe orizontala • BACKGROUND-REPEAT - determina modul în care imaginea din fundal va fi multiplicata în cazul în care nu acopera tot spatiul elementului. Optiunile posibile sunt: • REPEAT • NO-REPEAT • REPEAT-X • REPEAT-Y • BACKGROUND-ATTACHMENT - determina modul de dispunere a fundalului în momentul în care continutul elementului este derulat pe orizontala sau verticala. Optiunile posibile sunt: • SCROLL - imaginea din fundal se deplaseaza odata cu continutul elementului • FIXED - imaginea din fundal ramane fixa atunci cand continutul elementului se deplaseaza 10.7 Proprietati de stil ale textelor şi blocurilor de text Pentru a specifica proprietatile legate de prezentarea textelor în cadrul atributului style se folosesc urmatoarele proprietati de stil: • FONT-FAMILY - pentru alegerea corpului de litera. • FONT-SYZE - pentru alegerea dimensiunii fontului. Valorile acestei proprietati pot fi exprimate în pixeli, procentual, sau ca ajutorul catorva valori predefinite: • XX-SMALL • X-SMALL • SMALL • MEDIUM • LARGE

• X-LARGE • XX-LARGE

• • • • • • • • • • • de

FONT-STYLE pentru alegerea stilului de font cu variantele NORMAL ITALIC FONT-weightpentru specificarea grosimii fontului. Valorile atribuite pot fi: NORMAL BOLD DIRECTION pentru stabilirea directiei de scriere, avand ca valori posibile LTR pentru scrierea de la stanga la dreapta RTL pentru scrierea de la dreapta la stanga TEXT-ALIGN pentru alinierea pe orizontala a textului TEXT-INDENT pentru indentarea textului fata de marginea stanga sau deapta (în functie de directia

scriere) a elementului "container" care contine textul • TEXT-TRANSFORM pentru realizarea optiunilor litere mari-litere mici asupra textului. Valorile posibile sunt: • CAPITALIZE pentru a scrie primul caracter al fiecarui cuvant cu litera mare • LOWERCASE pentru a folosi în scriere doar litere mici • UPPERCASE pentru a folosi în scriere doar litere mari • NONE pentru a folosi modalitatea implicita (normala) de scriere • TEXT-DECORATION pentru a specifica unele efecte simple aplicate textului. Astfel, puteti folosi: • UNDERLINE pentru a sublinia textul • LINE-THROUGH pentru a taia textul • OVERLINE pentru a trasa o linie deasupra textului ( neimplementat în varianta Netscape 4.0) • NONE pentru anularea acestor efecte • COLOR pentru a stabili culoarea textului • DISPLAY pentru a alege modul de afisare a portiunii de text astfel: • NONE daca se vrea ca textul sa nu fie afisat • BLOCK pentru a oferi textul sub forma de "bloc de text". In felul acesta browser-ul va trece la linie noua inainte şi dupa afisarea continutului blocului. • LIST-ITEM pentru a prezenta continutul sub forma de element al unei liste. • INLINE pentru afisa textul fara a trece la linie noua, asezarea sa în interiorul elementului "container" fiind decisa doar de dimensiunea continutului sau (neimplementat în versiunea Netscape 4.7). 10.8 Proprietati de stil aplicabile listelor In general, proprietatile de stil pentru formatarea textului raman valabile şi pentru liste, cu conditia de bun simt ca elementele acestor liste sa fie de tip text. In plus exista cateva proprietati de stil specifice listelor şi care se refera indeosebi la semnul de marcare al itemilor unei liste: • LIST-STYLE-TYPE pentru a selecta tipul marcajului pentru item dintre cele prestabilite: • DISC • CIRCLE • SQUARE • DECIMAL • LOWER-ROMAN • UPPER-ROMAN • LOWER-ALPHA • UPPER-ALPHA • NONE • LIST-STYLE-POSITION pentru a stabili modul de aliniere al marcajului de item în cazul în care textul cuprins în item ocupa doua sau mai multe randuri: • OUTSIDE pentru ca marcajul sa ramana în afara blocului de text (valoare implicita) • INSIDE pentru ca marcajul sa fie cuprins în interiorul blocului de text • LIST-STYLE-IMAGE pentru a stabili imaginea (iconita) aplicata marcajului de item

Aceste proprietati sunt aplicabile listelor ordonate şi neordonate. Daca o lista are specificate atat atributul Type cât şi proprietatea de stil list-style-type, marcajul de item va fi decis de proprietatea de stil. Atributele şi proprietatile de stil pot fi aplicate intregii liste sau doar unor itemi ai listei, în functie de doleantele realizatorului documentului 10.9 Proprietati de stil pentru bordurile obiectelor Desi par numeroase, proprietatile de stil care vizeaza bordurile obiectelor se pot retine usor deoarece ele stabilesc doar trei atribute care se aplica fie tuturor bordurilor, fie uneia dintre cele 4 borduri posibile. Iata aceste proprietati: • BORDER-COLOR - determina culoarea bordurilor obiectului. Numarul de valori şi semnificatia lor sunt sunt analoage celor prezentate la atributul "margin" • BORDER-STYLE - determina stilul liniei de bordura. Acelasi stil se va aplica celor 4 borduri ale obiectului. Optiunile posibile sunt: • NONE - nu se afieaza bordura • DOTTED - bordura se afiseaza cu linie punctata pe platforme Machintosh şi cu linie continua pe platforma Windows sau Unix • DASHED - bordura se afiseaza cu linie intrerupta pe Machintosh şi cu linie continua pe platforma Windows sau Unix • SOLID - bordura se afiseaza cu linie continua • DOUBLE - bordura se afiseaza cu linie dubla Pentru a oferi un aspect tridimensional bordurilor folositi valorile: • GROOVE • RIDGE • INSET • OUTSET • BORDER-WIDTH stabileste grosimea liniei de bordura. Numarul şi semnificatia valorilor este analoaga celor prezentate la atributul "margin". • BORDER - stabileste caracteristicile bordurii printr-un numar de 3 valori separate prin spatiu, valori specificand, în ordine, dimensiunea, stilul şi culoarea bordurii. Exemplu: Aceleasi proprietati se pot specifica fiecarei borduri în parte folosindu-va de : • • • •

BORDER-TOP BORDER-RIGHT BORDER-BOTTOM BORDER-LEFT

10.10 Proprietati de stil pentru pozitionare Pozitionarea elementelor în cadrul documentului este una dintre sarcinile cele mai delicate ale unui creator de pagini Web care doreste sa ofere un aspect atragator documentului creat. Proprietatile de stil permit multa flexibilitate în aceasta privinta. Iata Cateva dintre acestea:

• POSITION - determina modul de pozitionare al elementului. Optiunile posibile sunt: • ABSOLUTE - elementul este pozitionat relativ la obiectul container care il contine • RELATIVE - elementul este pozitionat relativ la pozitia pe care ar trebui în mod normal sa o ocupe în document

• TOP - determina pozitia elementului în functie de marginea de sus a elementului relativ la care se face pozitionarea • BOTTOM - determina pozitia elementului în functie de marginea de jos a elementului relativ la care se face pozitionarea • LEFT - determina pozitia elementului în functie de marginea din stanga a elementului relativ la care se face pozitionarea • RIGHT - determina pozitia elementului în functie de marginea din dreapta a elementului relativ la care se face pozitionarea • HEIGHT - determina dimensiunea pe verticala a obiectului • WIDTH - determina dimensiunea pe orizontala a obiectului • CLIP - determina afisarea doar a unei portiuni "decupata" din elementul respectiv. Dreptunghiul decupat se exprima sub forma rect(sus,dreapta,jos,stanga), unde fiecare dintre cele 4 valori poate fi inlocuita cu valoarea auto, care lasa marginea respectiva nedecupata. Formularea clip:auto afisaza obiectul nedecupat. Aceasta proprietate este aplicabila doar obiectelor care au atributul position:absolute. • VISIBILITY - determina afisarea sau neafisarea elementului în document. Valorile posibile sunt: • INHERIT - obiectul isi mosteneste proprietatea de la elementul "parinte" • VISIBLE - obiectul este vizibil • HIDDEN - obiectul nu este vizibil • Z-INDEX - determina modul de suprapunere a obiectelor care au atributul position:absolute şi care impart o aceeasi suprafata din document. Obiectele avand valoarea z-index mai mare vor fi asezate "deasupra" obiectelor cu z-index mai mic. Doua obiecte care se suprapun şi au aceeasi valoarea pentru z-index vor fi asezate în ordinea în care apar în document. • CLEAR - stabileste daca un bloc de text admite sau nu obiecte în stanga sau în dreapta sa. Optiunile posibile sunt: • NONE - sunt permise obiecte în stanga şi în dreapta • LEFT - textul se deplaseaza în jos pozitionandu-se sub un eventaual obiect situat în stanga sa • RIGHT - textul se deplaseaza în jos pozitionandu-se sub un eventual obiect situat în dreapta sa • BOTH - textul se deplaseaza în jos pozitionandu-se astfel incat sa nu existe obiecte nici în stanga şi nici în dreapta sa • MARGIN - determina dimensiunile pe care le va avea marginile unui obiect. Pot fi specificate: 1. singura valoare care va fi aplicata tuturor celor 4 margini 2. doua valori - prima pentru marginile de sus şi de jos, iar a doua pentru marginile din stanga şi dreapta 3. trei valori - prima pentru marginea de sus, a doua pentru marginile din stanga şi dreapta şi a treia pentru marginea de jos 4. patru valori - în ordine pentru marginile de sus, dreapta, jos, stanga • • •

MARGIN- TOP MARGIN- RIGHT MARGIN- BOTTOM

•

MARGIN- RIGHT

•

PADDING - determina spatiul lasat intre marginile (eventual bordura) unui obiect şi continutul sau. Numarul şi semnificatia valorilor specificate sunt identice cu cele prezentate la proprietatea "margin"

. • • • •

PADDING-TOP PADDING-RIGHT PADDING-BOTTOM PADDING-LEFT

EXEMPLU: Proprietati de stil pentru pozitionarea elementelor Acest pasaj de text se suprapune imaginii Pozitionarea straturilor... cam asta ar fi.. Toate cuvintele par la locul lor...Nici mai sus, nici mai jos Suprapunerea şi decuparea imaginilor: Borduri şi chenare Chenar simplu



11 Grafica web Dupa ce in capitolele precendente am invatat notiunile HTML de baza, vom scrie cateva cuvinte si despre grafica web. Exista mai multe posibilitati in aceasta directie, cea mai simpla fiind utilizarea unor elemente grafice (poze, desene) din colectii de grafica specializate, colectii ce se pot gasi fie pe internet, fie impreuna cu programe precum Corel Draw, Photo Draw, etc. Desigur, exista si o posibilitate mai simpla de atat - copierea unor elemente grafice din alte pagini web. Acest lucru nu este recomandat insa, in primul rand datorita faptului ca elementele grafice respective vor fi rupte din context. In plus, pentru majoritatea exista drepturi de autor, astfel incat nu pot fi utilizate fara permisiune, in mod normal. Cel mai bun lucru de facut in aceasta directie este utilizarea unor elemente grafice ca sursa de pornire si prelucrarea acestora intr-un program specializat de tipul Adobe Photoshop. Acesta este un program excelent pentru grafica web ce permite diverse prelucrari ale pozelor si desenelor precum si crearea de la zero a unor elemente de grafica pentru pagina ta. Vom prezenta o serie de operatiuni de baza ce se pot aplica unei poze incarcate in Photoshop. Mai intai, mergi in Image/Mode si selecteaza RGB Color, daca acest mod nu este deja selectat. Sa incepem: modifcarea dimensiunilor unei poze prin marire/micsorare - Image/Image Size, modificarea dimensiunilor prin taiere/completare - Image/Canvas Size, rotire imagine Image/Rotate Canvas. Photoshop prezinta si o serie de unelte pentru completari/retusari ale imaginii (pencil, eraser, blur, paint bucket, etc). De asemenea, vei dori sa utilizezi si diversele filtre disponibile in meniul Filter - unele dintre ele sunt foarte reusite (nu uita sa setezi modul RGB pentru imagine inainte de folosirea filtrelor). O operatiune destul de simpla in Photoshop este crearea de texte pentru butoane, titluri, etc. Deschide un fisier nou (File/New) si selecteaza unealta Text din toolbar (cea cu un "T"). Fa click oriunde in imaginea ta - se va deschide o fereastra noua unde vei putea scrie textul dorit si stabili parametrii acestuia (font, dimensiune, culoare, etc). Pentru efecte aplicate textelor deschide fereastra Layers (Window/Show Layers, daca aceasta nu exista deja pe ecran), fa click cu butonul din dreapta pe Layer-ul (nivelul) care contine textul scris de tine, selecteaza Effects si testeaza diversele efecte disponibile. La sfarsit, selecteaza din Toolbar unealta din stanga sus (in forma de patrat cu linii punctate), incadreaza textul scris de tine cu ajutorul acesteia si mergi la Image/Crop pentru a dimensiunea in mod exact fisierul:

Dupa ce ai terminat cu prelucrarile, salveaza fisierul tau in formatul gif (File/Export/Gif 89A Export) sau jpg (File/Save a Copy). Fisierele gif au o calitate mai buna, dar dimensiuni mai mari; fisierele jpg sunt mai mici ca dimensiune, dar de o calitate mai slaba (nu mereu, insa). De regula, pe internet se folosesc fisiere jpg, dar noi recomandam fisiere gif pentru elementele de dimensiuni reduse, pentru o calitate mai buna. Desigur, Photoshop prezinta mult mai multe facilitati si optiuni. Ca sa nu mai vorbim de alte programe de prelucrare grafica sunt destule. Un alt aspect ce trebuie precizat in legatura cu grafica web este transparenta. Un element grafic (precum textul "verde.ro" de mai sus) are un fond de anumita culoare (in cazul de mai sus alb). In situatia in care avem pe pagina internet un fundal de o alta culoare sau un fundal reprezentand o poza, atunci textul nostru nu mai arata asa bine. In acest caz vom folosi un fond transparent:

36

In Photoshop, poti crea o imagine cu fond transparent selectand Transparent in campul Contents din fereastra New File (File/New). Poate ai vazut pe alte pagini internet mici animatii si te-ai intrebat cum sunt realizate. Acestea sunt de fapt fisiere gif animate create cu aplicatii specializate. De regula, vei avea pregatite toate imaginile din care vrei sa creezi animatia si le vei introduce intr-o asemenea aplicatie. In fisierul HTML nu vei scrie nimic special pentru gif-uri animate; acestea vor fi decodificate de catre browser din tag-ul ." pentru impartirea pe orizontala, in doua frame-uri egale.

3.LIMBAJUL PHP

Inceputurile PHP PHP (PHP: Hypertext Prepocessor), cunoscut în versiunile mai vechi şi sub numele de PHP/FI (Personal Homepage/Form Interpreter), iniţial a fost gândit a fi o simplă aplicaţie CGI pentru interpretarea formularelor definte prin HTML şi procesate de un program scris într-un limbaj Perl, script shell, executat pe server. În cazul interfeţei CGI era necesară permisiunea de a rula programe pe server, ceea ce ducea la lacune în securitate şi în plus la disocierea de documentul HTML a programului care procesa datele. PHP (în versiunea curentă PHP 4.0) reprezintă un pachet puternic care oferă un limbaj de programare accesibil din cadrul fişierelor HTML, limbaj asemănător cu Perl sau C, plus suport pentru manipularea bazelor de date într-un dialect SQL (dBase, Informix, MySQL, mSQL, Oracle, PostgreSQL, Solid, Sybase, ODBC etc.) şi acces la sisteme hipermedia precum Hyperwave. De asemeni, PHP suportă incărcarea fişierelor de pe calculatorul client: upload (standard propus de E. Nebel şi L. Masinter de la Xerox, descris în RFC 1867) şi oferă suport pentru cookies (mecanism de stocare a datelor în navigatorul client pentru identificarea utilizatorilor, propus de Netscape). Această aplicaţie este disponibilă gratuit pe Internet, pentru medii Unix şi mai nou pentru medii Windows (inclusiv sursele), integrându-se în popularul sever Apache. Istoria PHP-ului începe la sfârşitul anului 1994, când Rasmus Lerdorf dezvoltă prima versiune, ca proiect personal. PHP-ul este făcut public în debutul anului 1995 sub denumirea de Personal Home Page Tools, fiind considerat un analizor simplist care interpreta câteva macrouri ce puteau fi incluse în cadrul documentelor HTML, permiţând contorizarea accesului la paginile Web sau accesarea unei carţi de oaspeţi (guestbook). Analizorul a fost rescris la mijlocul aceluiaşi an şi denumit PHP/FI 2.0, unde FI era o 37

alta aplicaţie scrisă de Rasmus Lenford, un interpreter de formulare HTML. A fost adăugat şi suportul pentru bazele de date mSQL şi astfel PHP/FI a început să aibă succes, fiind disponibil gratuit pe Web. Se estimează că la sfârşitul lui 1996 cel puţin 15 mii de site-uri Web utilizau PHP/FI, iar în anul 1997 numărul acestora era de 50 de mii. Programatorii Zeev Suraski şi Andi Gutmans rescriu analizorul PHP şi noua aplicaţie formează nucleul versiunii PHP 3.0 care include o parte din vechile surse PHP/FI 2.0. Relativ recent, la începutul anului 2000, a fost facută publică versiunea PHP 4.0, utilizând puternicul motor de scriptare Zend şi oferind suport nu numai pentru servrul Apache ci şi pentru alte servere Web. De asemeni, PHP 4.0 oferă posibilitatea accesării documentelor XML via DOM. Se estimează că numărul site-urilor care folosesc în prezent PHP este de peste un milion. Deja, pe Web, exista o multitudine de aplicaţii şi utilitare concepute în PHP, care se regăsesc grupate şi în aşa-numitul PEAR (PHP Extension and Add-on Repository). Ce este PHP? PHP este un limbaj de script care funcţionează alături de un server Web. Exemplul 1.1.1 (exemplu introductiv): Exemple

Este de notat diferenţa cu alte limbaje script CGI scrise în limbaje precum Perl sau C: în loc de a scrie un program cu o multitudine de linii de comanda afişate în final într-o pagină HTML, veţi scrie o pagină HTML cu codul inclus pentru a realiza o acţiune precisă (în cazul nostru se va afişa un text). Codul PHP este inclus între tag-urile speciale de început şi de sfârşit care permit utilizatorului să treacă din "modul HTML" în "modul PHP". Faţă de alte limbaje script, precum Javascript, la PHP codul se execută pe server. Dacă pe serverul Web se află un script similar, clientul nu va primi decât rezultatul execuţiei scriptului, fără a avea nici o posibilitate de acces la codul care a produs rezultatul. Vă puteţi configura serverul de Web să prelucreze (analizeze) toate fişierele HTML ca fişiere PHP. Astfel nu există nici un mijloc de a distinge paginile care sunt produse dinamic de paginile statice.

Ce poate face PHP? Limbajul PHP posedă aceleaşi funcţii ca alte limbaje permiţând să se scrie scripturi CGI, să colecteze date şi să genereze dinamic pagini web sau să trimită şi să primească cookies. Marea calitate şi cel mai mare avantaj al limbajului PHP este suportul cu un număr mare de baze de date. A realiza o pagină web dinamic cu o baza de date este extrem de simplu. Următoarele baze de date sunt suportate de către PHP: Adabas D

InterBase

PostgreSQL

dBase

FrontBase

Sesam

Empress

mSQL

Solid

FilePro

Direct MS-SQL Sybase

Hyperwave MySQL

Velocis

IBM DB2

Unix dbm

ODBC 38

Informix

Oracle

Ingres

Ovrimos

Limbajul PHP are deasemenea suport pentru diverse servicii server utilizând protocoale precum IMAP, SNMP, NNTP, POP3 şi HTTP.

.2.2 Instalarea pe sistemele Windows 95/98/NT Acest gid de instalare vă va ajuta să instalaţi şi să configuraţi PHP pe serverele web ce rulează pe sistemele Windows 9x/NT. Acest gid aferă suport pentru: •

Personal Web Server

•

Internet Information Server 3 sau 4

•

Apache 1.3.x

•

Omni HTTPd 2.0b1

Principalele etape în instalare Următoarele etape trebuie parcurse la orice instalare, înainte de instrucţiunile specifice serverului: •

Dezarhivaţi fişierele din distribuţie într-un director pe care îl doriţi, de exemplu "c:\php";

•

Copiaţi fişierul "php.ini-dist" îm directorul "%windows%" şi redenumi7i-l la "php.ini". Directorul "%windows%" este de obicei: c:\windows pentru Windows 95/98 - c:\winnt sau c:\winnt40 pentru serverele NT

•

Editaţi fişierul "php.ini": o

Modificaţi setarea 'extension_dir' pentru a indica directorul în care a fost instalat PHP, sau directorul unde se află fişierele "php_*.dll", de exemplu "c:\php";

o

Dacă folosiţi Omni Httpd, săriţi peste pasul următor. Setaţi 'doc_root' astfel încât să indice documentul root ('document_root') al serverului web, de exemplu c:\apache\htdocs sau c:\webroot;

o

Alegeţi modulele care vreţi să fie încăcate atunci când porneş PHP-ul. Puteţi decomenta liniile 'extension=php_*.dll' pentru a încărca aceste module. Unele module necesită ca unele librării suplimentare să fie instalate pe sistemul dumneavoastră pentru a funcţiona corespunzător. PHP FAQ conţine mai multe informaţii despre locul de unde puteţi obţine librăriile necesare. Deasemenea, puteţi încărca dinamic module în scriptul dumneavoastră folosind dl("php_*.dll");

o

Pe PWS şi IIS, puteţi seta browscap.ini să indice 'c:\windows\system\inetsrv\browscap.ini' (în Windows 95/98) şi 'c:\winnt\system32\inetsrv\browscap.ini' (pe serverele NT). 39

Fişierele DLL pentru extensiile PHP sunt prefixate cu 'php_'. Aceasta previne confuzia între extensiile PHP şi librăriile necesare.

Windows 95/98/NT şi PWS/IIS 3 Modul de configurare recomandat pentru aceste servere este utilizarea fişierului INF inclus în distribuţie (php_iis_reg.inf). Puteţi edita acest fişier pentru a vă asigura că extensiile şi directorul de instalare al PHP corespund configuraţiei dumneavoastră. Puteţi urma etapele de mai jos pentru a face acest lucru. Observaţie: aceste etape implică lucrul direct cu regiţtrii Windows. O eroare provocată aici poate aduce sistemul într-o stare instabilă. Vă recomandăm să faceţi mai întâi o copie a regiştrilor. Dezvoltatorii de PHP nu vor fi responsabili dacă veţi distruge regiştrii. •

Rulaţi regedit;

•

Mergeţi la HKEY_LOCAL_MACHINE /Parameters /ScriptMap;

•

Din meniul Edit selectaţi New->String Value;

•

Introduceţi extensia pe care doriţi să o folosiţi pentru scripturile php, de exemplu .php;

•

Daţi dublu-click pe această valoare şi introduceţi calea spre php.exe în câmpul "Value data" (de exemplu c:\php\php.exe %s %s). '%s %s' este foarte important, PHP nu va funcţiona corect fară el;

•

Repetaţi aceşti paşi pentru fiecare extensie pe care doriţi să o asociaţi cu scripturile PHP;

•

În continuare mergeţi la HKEY_CLASSES_ROOT;

•

Din meniul Edit selectaţi New->Key;

•

Denumiţi cheia cu numele extensie pe care l-aţi introdus în secţinuea precedentă, de exemplu .php;

•

Selectaţi noua cheie în panelul din partea dreaptă, daţi dublu-click pe "Default value" şi introduceţi phpfile;

•

Repetaţi ultimul pas pentru fiecare extensie introdusă în secţiunea precedentă;

•

În continuare creaţi o nouă cheie în HKEY_CLASSES_ROOT şi numiţi-o phpfile;

•

Selectaţi noua cheie (phpfile) în panelul din partea dreaptă, daţi dublu-click pe "Default value" şi introduceţi PHP Script;

•

Daţi click dreapta pe cheia phpfile şi selectaşi New->Key, pe care o veţi numi Shell;

•

Daţi click dreapta pe cheia Shell, selectaşi New->Key şi denumiţi-o open;

•

Daţi click dreapta pe cheia open, selectaşi New->Key şi denumiţi-o command;

•

Selectaţi noua cheie (command) în panelul din partea dreaptă, daţi dublu-click pe "Default value" şi introduceţi calea spre php.exe, de exemplu c:\php\php.exe -q %1;

•

Închideţi regedit

/System

/CurrentControlSet

/Services

/W3Svc

Windows NT şi IIS 4 Pentru a instala PHP pe un server NT care rulează IIS 4 urmaţi următoarele instrucţiuni: •

În Internet Service Manager (MMC), selectaţi site-ul Web sau directorul unei aplicaţi;

•

Deschideţi foaia de proprietăţi a directorului şi selectaţi Home Directory, Virtual Directory sau Directory; 40

•

Daţi click pe butonul Configuration, şi apoi pe App Mappings;

•

Daţi click pe Add, şi introduceţi în căsuţa Executable c:\path-to-php-dir\php.exe %s %s;

•

În căsuţa Executable introduceţi extensia pe care doriţi să o asociaţi cu scripturile PHP. (Repetaţi paşii 5 şi 6 pentru fiecare extensie pe care doriţi să o asociaţi cu scripturile PHP. De obicei se folosesc extensiile .php şi .phtml.);

•

Setatţi modul de securitate corespunzător. Acest lucru este realizat în Internet Service Manager, iar dacă serverul dumneavoastră NT foloseşte sistemul de fişiere NTFS adăugaţi drepturi de execuţi pentru I_USR_ directorului care conţine php.exe.

Windows 9x/NT şi Apache 1.3.x Pentru a configura Apache astefel încât să lucreze cu interpretorul PHP CGI trebuie să editaţi fişierele srm.conf sau httpd.conf. Deşi pot exista unele variaţii în configurarea PHP sub Apache, metoda următoare este destul de simplă pentru a putea fi folosită de începători. Pentru următoarele directive de configurare vă recomandăm să consultaţi documentaţia serverului Apache. •

ScriptAlias /php/ "c:/path-to-php-dir/"

•

AddType application/x-httpd-php .php

•

AddType application/x-httpd-php .phtml

•

Action application/x-httpd-php "/php/php.exe"

Pentru a folosi the source code highlighting feature, creaţi un script PHP şi adăugaţii următorul cod:

2.

eregi (PHP3 , PHP4 ) Descriere int eregi (string pattern, string string [, array regs]) Funcţia se comportă identic cu ereg() nefăcând distincţie între literele mari şi mici la căutarea unei potriviri (nu este case sensitive).

eregi_replace (PHP3 , PHP4 ) Descriere string eregi_replace (string pattern, string replacement, string string) Funcţia se comportă identic cu ereg_replace() nefăcând distincţie între literele mari şi mici la căutarea unei potriviri (nu este case sensitive).

split (PHP3 , PHP4 ) Descriere array split (string pattern, string string [, int limit]) Returnează un tablou de string-uri, având ca elemente subşiruri ale string rezultate din împărţirea string conform pattern. Dacă apare şi limit, tabloul va conţine maximum limit elemente, ultimul element conţinând restul rămas din string. Dacă apare o eroare, split() va întoarce false. Pentru a prelua primele 5 câmpuri dintr-o linie din /etc/passwd: Example 1. Exemplu Split() $passwd_list = split (":", $passwd_line, 5);

Pentru a valida o dată calendarisitică, care poate fi delimitată de slash(/), punct(.) sau linie de despărţire(-) Example 2. Exemplu Split() $date = "04/30/1973"; //Delimitatori pot fi / . list ($month, $day, $year) = split ('[/.-]', $date); echo "Month: $month; Day: $day; Year: $year\n";

Atenţie, pattern este case-sensitive. Dacă nu aveţi nevoie explicit de expresii regulate, folosiţi unlinked explode(). Este mai rapidă. De asemenea pattern este o expresie regulată. Dacă doriţi să împărţiţi string după caractere speciale, va trebui să le securizaţi mai întâi. Dacă funcţia split() (sau orice altă funcţie regex) se comportă ciudat, citiţi manualul regex.7, aflat în subdirectorul regex/ unde e instalat PHP. Comanda man /usr/local/src/regex/regex.7

spliti (PHP4 >= 4.0.1) 94

Descriere array spliti (string pattern, string string [, int limit]) Funcţia se comportă identic cu split() nefăcând distincţie între literele mari şi mici la căutarea unei potriviri (nu este case sensitive).

95