Website Parc Industrial Cenei

WEBSITE PARC

INDUSTRIAL CENEI

Cuprins

Cap 1. Promovarea pe Internet

1.1. Aspecte generale

1.2. Internetul, mijloc de promovare a unei afaceri

1.3. Avantajele promovării pe internet

1.4. Etape în promovarea pe Internet a unei afaceri

1.5. Dificultăți de mentenanța și administrare a unui site

Cap 2. Proiectarea unui website

2.1. Aspecte generale

2.2. Design clasic versus design web

2.3. Scopul și obiectivele unui site

2.4. Principiile creării unui site

2.4.1. Utilizabilitatea

2.4.2. Simplitate și consistență

2.4.3. Stabilitatea funcțională designului

2.4.4. Ușurința navigării

2.4.5. Structura ierarhică a informației

2.4.6. Contactul cu utilizatorii

2.5. Etapele dezvoltării unui site

2.6. Crearea de conținut

Cap 3. Implementarea tehnică

3.1 Editarea parametrică a interfețelor

3.2 HTML

3.3 Selectori CSS

3.4 At-rules în CSS

3.5 Specificitatea regulilor CSS

3.6 Limitări în implementarea interfețelor

3.7 Proprietăți CSS

3.8 Tipuri de interfețe

3.9 JAVASCRIPT

3.9.1 Java, JavaScript si Jscript

Cap 4. Creare Website Parc Industrial Cenei

4.1 Crearea de conținut HTML

4.2 Creare si configurare in cazul de față

Bibliografie

Cap 1. Promovarea pe Internet

1.1. Aspecte generale

Este cunoscut faptul că fenomenul numit Internet a ajuns parte integrantă a vieții noastre de zi cu zi. În prezent Internetul este accesibil pentru cea mai mare parte din populația Europei. Studii efectuate în 2011 arătau ca 74% dintre europeni erau utilizatori de internet. Astăzi, cu siguranță, procentul este mai ridicat.

Beneficiind pe de o parte de dezvoltarea tot mai rapidă a tehnologiilor, iar pe de alta de apariția unor platform de socializare, forumuri și magazine online, Internetul s-a insinuat tot mai mult în viața fiecăruia, azi fiindu-ne greu să ne concepem existenta fără acest mediu. Se aude din ce în ce mai des remarca: Dacă nu ești pe Internet, nu exiști! Și tindem să credem că pe bună dreptate, mai ales atunci când un motor de căutare nu îți returnează nici un rezultat.

În cazul companiilor această remarcă se transforma în: Dacă nu ai site e ca și cum nu ai exista. Fapt ce a început să fie tot mai valabil și la noi, mai ales în condițiile în care acum, în România sunt accesate trei milioane și jumătate de site-uri. De multe ori popularitatea companiilor care apar pe Internet a devenit mult mai mare decât cea a companiilor care își desfășoară activitatea în lumea reală. Nu mai contează domeniul în care își desfășoară activitatea firma. De la companii de îmbrăcăminte, până la servicii de transport, de la clinici până la birouri de avocatură, de la magazine de electronice până la agenții de turism, toate sunt prezente pe Internet. Produse, servicii, informații, se găsesc acum on-line.Companiile au economisit timp și au câștigat bani datorita faptului ca au promovat afacerea pe Internet..

În zilele noastre, orice manager a luat cel puțin o dată în considerare promovarea afacerii sale pe internet, și s-a gândit la diverse modalități prin care să comunice constant cu potențialii clienți.

Există numeroase canale online prin care se poate face acest lucru, iar efortul de a le crea, optimiza, actualiza și administra este specific și pe măsură fiecărui canal.

Principalele efecte ale unei campanii reușite de promovare online sunt:

creșterea numărului de clienți proveniți de pe internet;

promovarea constantă și actualizarea site-ului și a blogului companiei;

îmbunătățirea reputației companiei în rețelele de socializare.

1.2. Internetul, mijloc de promovare a unei afaceri

Odată cu dezvoltarea industriei Internetului au apărut și activități conexe care oferă o informare alternativă pe toate domeniile vieții sau chiar posibilitatea de a avea acces instantaneu, online, la informație: e-learning, audio-learning cu ajutorul audiobooks ș.a. Mai mult decât atât, ca aplicație a Internetului a apărut întreaga branșă numită “e-commerce” – comerțul electronic, prin care furnizorii de mărfuri și servicii dispun suplimentar de o piață de desfacere enormă: Internetul.

Practic Internetul ofera acces la o piață globală multor întreprinderi mici și mijlocii, care fără aportul acestuia nu ar fi avut niciodată posibilitatea de a se adresa unor clienți la scară mondială. Astfel internetul a devenit și un important mediu de afaceri. Un mediu de afaceri cu milioane de potențiali clienți, care accesează site-urile din întreaga lume în căutarea de informații, servicii și idei pentru satisfacerea necesităților proprii.

De aceea, crearea unui site web de prezentare pentru propria companie devine un important instrument de marketing pentru imaginea companiei.

Realizarea marketingului unui site reprezintă procesul de îndreptare a tuturor eforturilor pentru a-l face cunoscut și a detemina potențialii clienții să-l viziteze și să acționeze. Tot aici se includ metodele și tehnicile prin care clientii sunt încurajati să revină.

Cu web-ul vin în contact milioane și milioane de oameni, dar nimeni nu le spune unde se află lucrurile dorite. Din acest motiv, rolul marketingului pe internet este vital pentru orice afacere din web.

Pentru a face publicitate există o mare varietate de modalități legale prin care ajungi la consumator. Având un produs de vânzare prin intermediul internetului, următorul pas este să-l promovăm pentru că:

să fie găsit ușor;

să atragă pe cei care nu știu că sunt interesți de acel produs;

să determine un raport convenabil între țintă și vizitatori.

Indiferent de domeniul în care activează, majoritatea firmelor au început cu câțiva ani în urma să exploateze potențialul internetului. De altfel, ca o condiție obligatorie pentru orice firmă ce se dorește a fi serioasă, este să dețină propriul site, de unde potențialul cumpărător să-și poată culege toate informațiile de care are nevoie. Îndrumați de specialiștii din domeniu, reprezentanții acestor firme care își propun să se promoveze prin intermediul internetului vor găsi cele mai bune metode pentru a realiza acest lucru. Odată realizat un site, se pot aplica, mai apoi, fel de fel de tehnici de promovare online. Bineînțeles că aceasta implica anumite costuri, însă fiecare are posibilitatea de a opta pentru anumite modalități de promovare, în funcție de bugetul de care dispune.

Atunci când vine vorba despre derularea unei campanii publicitare pe internet nu putem trece cu vederea aspectul financiar. Deși un simplu site de prezentare poate costa doar câteva sute de euro, cu certitudine o campanie deloc pretențioasă, realizată cu ajutorul unui site simplu, care să conțină prezentarea firmei și a produselor, poate ajunge la 1.000-2.000 de euro. În funcție de cât de intensă este promovarea afacerii online, trebuie să dispunem de sume de câteva zeci de euro. Și, chiar dacă pare aproape imposibil, exista campanii de promovare online cu costuri ce depășesc chiar suma de 200.000 de euro.

Mai presus de banii cheltuiți trebuie să punem, însă, conținutul respectivei campanii de promovare. În cazul în care aceasta nu se bazează pe informație esențială, interesantă pentru publicul țintă, putem considera campania deja compromisă. Pentru un succes garantat al unui site, care tinde spre 100%, contează atât conținutul, care să fie adecvat publicului ținta, cât și promovarea acestuia. Degeaba site-ul este de calitate și conține informații relevante pentru target-ul pe care ni l-am propus, dacă nu este promovat sau, mai mult, dacă nu apare în primele pagini ale motoarelor de căutare.

Aici intervine o operațiune de obicei efectuată de profesioniști, și anume optimizarea pentru motoarele de căutare (SEO), prin intermediul căreia să fie atras un număr cât mai mare de vizitatori pe site-ul respectiv. Este bine știut că succesul unui site este măsurat atât prin numărul vizitatorilor, cât și prin timpul pe care aceștia îl petrec pe site studiind oferta săi informația oferită. Printre alte metode utilizate, în afară de SEO, ar fi: postarea de conținut de calitate, atât pe site cât și în portalurile cu relevanță în activitatea respectivă, campanii de promovare, link-uri cu alte site-uri din domeniu, promovarea pe rețelele de socializare.

1.3. Avantajele promovării pe internet

Când vorbim despre promovarea unui site se pune următoarea întrebare: campanie de promovare pe internet sau campanie clasică? Ne putem această întrebare în primul rând din punct de vedere al costurilor. Nu știu dacă exista studii relevante și bine documentate pentru o astfel de comparație, dar majoritatea putem presupune, fără riscuri prea mari de a ne înșela, ca o campanie de promovare online poate fi chiar și de 10 ori mai ieftină decât una clasică.

Promovarea online nu are nevoie de prea multe explicații, pentru că oricine are o adresă de e-mail își imaginează măcar cum se derulează aceasta. Cu toții suntem bombardați zilnic de zeci de e-mail-uri și de tot atâtea mesaje publicitare, ori de câte ori utilizăm internetul. Campania publicitară clasica folosește drept suport hârtia, undele radio sau îmbinarea de sunet și imagine, specifică televiziunii. În această situație, costurile se reflecta mai ales în cumpărarea de spațiului de publicitate, ca să nu mai vorbim de plată agențiilor de publicitate și a actorilor fără de care spoturile pubilicitare, video sau audio, nu ar putea exista.

Pe de o parte, publicitatea online își folosește toate resursele, profesioniștii și banii, în producerea unui conținut de calitate, care să atragă consumatorul. Fiecare hotărăște dacă și cât de mult dorește să se pună accent pe notorietate sau pe relevanta. De o notorietate mai mare se bucura, firește, campaniile de promovare clasice, mesajul fiind transmis unui public foarte diversificat, fără a fi bine structurat un anumit public țintă, deși se fac eforturi în această direcție. Cu toate acestea, ca să fim pe deplin sinceri, trebuie să recunoaștem că se întâmplă de cele mai multe ori să schimbăm postul tv atunci când se anunța pauza de reclame!

Pe de altă parte, promovarea web are capacitatea de a i se adresa unui public foarte bine structurat, interesat de mesajul respectivului mesaj publicitar. Este limpede că nu am putea desemna vreun tip de promovare ca fiind cea mai potrivită, deoarece fiecare are avantaje și dezavantaje. Chiar dacă este mult mai ieftină și mai structurata, promovarea online se adresează, totuși, unui public mai restrâns, iar efectul său este de mult mai scurtă durată. Însă o campanie publicitară inspirată, promovată pe Internet, dar susținută și cu ajutorul radioului și al televiziunii va avea un impact asupra unui public divers, pentru multă vreme. Putem aminti aici recentele campanii radio-televizate ale site-urilor Mercador și Tocmai.

De asemenea printre avantajele de a fi vizibil online putem enumera:

Creșterea credibilitatea propriei companii, oferind un plus de încredere;

 Beneficierea de acoperire la nivel național și internațional prin utilizarea metodelor de promovare online;

Posibilitatea furnizării potențialilor client aunor informații nelimitate despre serviciile și produsele oferite;

Un site de prezentare oferă prestanță (o firmă serioasă investește în propria imagine);

Site-ul de prezentare oferă posibilitatea de a face crește imaginea companiei cu costuri mici și cu un randament eficient (reclama 24 ore din 24);

Costurile de realizare ale unui site web sunt relative reduse, în funcție de mărimea site-ului și de tehnologiile folosite pentru implementare;

Îmbunătățirea comunicării cu clienții prin furnizarea de informații actualizate, fără ca aceștia să fie nevoiți să contacteze compania pentru informații suplimentare.

1.4. Etape în promovarea pe Internet a unei afaceri

Realizarea unui site pentru prezentarea companiei și a serviciilor sau produselor.

Site-urile în Flash sunt frumoase, pline de animații și foarte interactive, dar pentru a putea fi găsit ușor de clienți în motoarele de cil online putem enumera:

Creșterea credibilitatea propriei companii, oferind un plus de încredere;

 Beneficierea de acoperire la nivel național și internațional prin utilizarea metodelor de promovare online;

Posibilitatea furnizării potențialilor client aunor informații nelimitate despre serviciile și produsele oferite;

Un site de prezentare oferă prestanță (o firmă serioasă investește în propria imagine);

Site-ul de prezentare oferă posibilitatea de a face crește imaginea companiei cu costuri mici și cu un randament eficient (reclama 24 ore din 24);

Costurile de realizare ale unui site web sunt relative reduse, în funcție de mărimea site-ului și de tehnologiile folosite pentru implementare;

Îmbunătățirea comunicării cu clienții prin furnizarea de informații actualizate, fără ca aceștia să fie nevoiți să contacteze compania pentru informații suplimentare.

1.4. Etape în promovarea pe Internet a unei afaceri

Realizarea unui site pentru prezentarea companiei și a serviciilor sau produselor.

Site-urile în Flash sunt frumoase, pline de animații și foarte interactive, dar pentru a putea fi găsit ușor de clienți în motoarele de căutare trebuie să renunțam la efecte în favoarea unui site curat, care se încarcă rapid și poate fi optimizat pentru motoarele de căutare (SEO).

În plus, dezvoltarea unor noi tehnologii precum jQuery, HTML5 și CSS3, permit ca acele animații și interacțiuni, inițial posibile doar în Flash, să poată fi înlocuite acum cu success. Nu trebuie uitat aici de logo, de slogan sau de alte elemente ce formează identitatea vizuală, care ar trebui să fie una dinstinctă și să transmită clienților valorile brandului.

Optimizarea site-ului pe cuvintele cheie relevante pentru afacere. Dacă scopul este vânzarea online de animale de companie, e clar că trebuie să includem cuvintele cheie relevante pentru nișa asta atât în cod, cât și în textele ce vor apare pe site. În prețul unui site ar trebui să fie incluse atât copywritingul cât și o minimă optimizare, realizată în urma unui audit SEO.

Din păcate, majoritatea clienților caută prețul cel mai mic pentru site și cumpără doar grafica, fără a vedea imaginea de ansamblu, iar după aceea se plâng că nimeni nu intră pe site-ul lor. Deși rețelele sociale generează tot mai mult trafic, în continuare e important să fii pe prima pagină în Google.

Contează să fii primul pe Google, dar depinde și de ce investiții sunt necesare pentru a ajunge acolo, în funcție de cuvintele cheie vizate, numărul de căutări lunare, concurență etc. Uneori e mai profitabil să investești banii în alte metode de atragere a vizitatorilor pe site, de exemplu campanii de promovare online sau asigurarea unei prezențe active în social media.

Marketingul prin conținut. Crearea de conținut pe site, conținut legat de obiectul de activitate, util și informativ, este mai eficient decât link building-ul pe termen lung deoarece generează mai multe rezultate, poate atrage mai multe linkuri și mai multe mențiuni în social media, iar costul de achiziție pe client scade.

Poate fi vorba de articole nișate, pe un blog instalat pe un subdomeniu legat de site, sau de o secțiune de noutăți pe site. Informațiile de genul ăsta aduc trafic valoros pentru orice afacere, pe lângă fidelizarea clienților existenți și stabilirea site-ului ca o sursă de informație pentru industria unde activează clientul. Intradevar, este de muncă, dar avantajul creării de conținut este că el va atrage mereu clienți, spre deosebire de campaniile de reclame care generează clienți doar pe o perioadă scurtă.

Crearea conturilor în rețelele sociale. Contrar celor spuse de unii specialiști, un brand nu trebuie să fie prezent în toate rețelele sociale. Cel mai important pentru o afacere care dorește să se promoveze online este să identifice acele rețele sociale unde publicul său țintă este activ. În România cel mai probabil este vorba de Facebook și Twitter, dacă vorbim de afaceri ce se adresează publicului larg, și LinkedIn, dacă ne adresăm altor companii. În rețelele sociale nu se atrag fani doar spunând cât de tare ești tu și ceea ce vinzi, trebuie discutat cu oamenii, trebuie creat conținut interesant, trebuie investit timp. Trebuie să fii autentic, real.

Realizarea de campanii pentru generarea de trafic pe site prin Facebook Ads, Google Adwords. Dacă aveți un buget stabilit puteți analiza și posibilitatea unor campanii targetate pe cuvinte cheie prin Google Adsense sau pe interese ale utilizatorilor de Facebook, prin Facebook Ads. Orice tip de campanie ați face, creați un landing page dedicat pentru cei care fac clic pe reclame, nu îi duceți pe prima pagină a site-ului. Nu uitați să analizați ce fac vizitatorii pe site, Google Analytics e un tool eficient și gratuit.

Link building. E important pentru un site să obțină constant linkuri, dacă vrea să fie pe primele poziții în Google. Linkurile pot fi obținut prin mai multe variante: cumpărarea de linkuri pe cuvinte cheie pe site-uri, bloguri sau obținerea lor prin lăsarea de comentarii pe bloguri, portaluri, site-uri de știri. Oricum ar fi, nu comentați cu Piese auto sau Laptopuri ieftine, dacă vreți ca să nu fie șterse comentariile voastre.

Monitorizarea constantă a discuțiilor despre brand. Trebuie să verifici ce se discută despre afacerea ta, pentru a răspunde comentariilor și a preveni apariția unor discuții ce pot afecta imaginea companiei.

1.5. Dificultăți de mentenanța și administrare a unui site

Alegerea între HTML și un sistem de management al conținutului (CMS) pentru a proiecta și menține un site web poate fi o alegere dificilă pentru orice companie care își dorește un site. HTML este în general considerat a fi metoda tradițională pentru proiectarea unui website. Limbajul de codare este coloana vertebrală a paginilor web. Structura, conținutul și proiectarea unui site cuprinde sute de linii de cod HTML. Un CMS este o platformă software server-side, “alimentată” de o bază de date. Toate datele și informațiile site-ului sunt stocate în această bază de date, mai degrabă decât în paginile web. CMS creează în mod automat structura principală și designul (precum și HTML-ul complicat) ale unui site. Un CMS asigură utilizatorului o interfață prietenoasă, bazată pe interfața browser-ului, astfel încât conținutul nou să poată fi creat ușor, iar configurațiile site-ului să poată fi schimbate cu ușurință. Cele două abordări pentru web design sunt radical diferite și ambele au adus avantaje și dezavantaje pe care noi site-uri web pentru afacerile mici, trebuie să le ia în considerare.

Avantajele site-urilor statice:

Un avantaj al unui site web HTML static este că acela de a avea control mult mai strict asupra structurii de fișiere, a designului și a eforturilor de SEO. Deoarece conținutul nu este generat de o bază de date, efectuarea de modificări la informațiile meta, schimbarea adreselor URL ale paginilor, micile modificări de implementare pentru o singură pagină a site-ului etc se fac prin simpla deschidere a fișierului HTML referitor la acea pagină și efectuarea modificării.

Un alt avantaj principal este faptul că un site web simplu, static, se va încărca mult mai repededecât un simplu site web CMS. Acest lucru se datorează faptului că nu există nici o adăugare suplimentară de informații la conținutul său la apelarea bazei de date. Toate informațiile pentru o pagină sunt conținute într-un singur fișier HTML care este legat la un fișier CSS pentru formatare, ceea ce înseamnă că pagină ar trebui să aibă un timp de încărcare foarte mic.

Dezavantajele site-urilor statice:

Pentru că toate modificările sunt realizate folosind limbaje de programare web – HTML și CSS, nu se pot face modificări la site de unul singur, dacă de către cineva care este familiarizat cu aceste limbaje de programare

Proiectarea trebuie replicată pentru fiecare pagină, precum și pentru fiecare modul suplimentar care afișează informații intr- un număr de pagini.

Durează foarte mult pentru a face schimbări de structură la site, pentru că aceste schimbări trebuie în general să fie făcute pentru fiecare pagină, mai ales în cazul de site-urior simple care nu dispun de nici o bază de date.

Nu există nici un fel de “plug-in” sau “extensie” pentru un site static. Fiecare funcționalitate în parte trebuie fie codata, fie trebuie găsit sau cumpărat un script pentru a efectua acea funcționalitate. Acest script trebuie apoi să fie integrat în site-ul, ceea ce necesită de multe ori o experiență de codificare .

Exista template-uri HTML/CSS statice disponibile gratis sau contra cost, dar conținutul site-ului trebuie să fie codificat în acel model pentru fiecare pagină a site-ului.

Un CMS este ceea ce numim un website dinamic. În esență, folosind un CMS pentru realizarea site-ului, acesta se execută dintr-un fel de cadru (framework).

Un site web implementat folosind un CMS va avea un întreg depozit de funcții, reguli și bucăți de cod care poate fi aplicate oricând, la orice pagină, fără a fi nevoie de a introduce codul pe fiecare pagină a site-ului. În plus, în loc de a reproduce designul pentru fiecare pagină a site-ului, un șablon este întotdeauna acolo, iar CMS introduce conținutul text și aranjează elemente instant.

Frumusețea de a avea totul stocat în această bibliotecă de cod este că site-ul are acces la o mulțime de funcționalități fără a fi nevoie de a coda, fără cunoștințe de programare. Această funcționalitate este disponibilă ori de câte ori este nevoie de ea

Avantajele site-urilor dinamice:

Codificarea se face cel mult o dată. După ce template-ul, extensiile, modulele și plugin-urile sunt stabilite o dată, tot ce este necesar este de a alege ce tip de conținut se dorește introdus.

Oricine poate face modificări la site-ul web. Acest lucru se datorează faptului că schimbarea conținutului de tip text este la fel de ușoara că folosirea programului Word, deoarece toate sisteme de management de conținut populare fac uz de editoare de text ușor de utilizat, de tipulWYSIWYG .

Dacă se face o schimbare de structură a template-ului sau în panoul de administrator al site-ului, aceasta se realizează în tot site-ul în mod automat. Nu este necesară schimbarea fiecărei pagini.

Deoarece soluții CMS, cum ar fi WordPress, Joomla! sau Drupal sunt atât de populare, există literalmente mii de extensii (gratuite sau premium) care pot adăuga aproape orice funcționalitate

site, practic prinntr-o apăsare de buton.

Există foarte multe teme, template-uri și cadre disponibile pe net, care ajuta la construirea unui website care arata decent, chiar dacă bugetul este strâns. Desigur, este foarte probabil că și altcineva de pe Internet să aibă același aspect, dar este foarte puțin probabil că acela să fie unul dintre competitori.

Modificările la un site web CMS, în general, iau mult mai puțin timp decât cele pentru un site web static. Acest lucru se datorează faptului că un sistem de management de conținut este proiectat să facă exact acest lucru – să permită gestionarea de conținut rapid și fără efort .

Este mult mai ieftin să plăteasti un web designer pentru a proiecta și dezvolta un site folosind un

CMS decât pentru a proiecta un site web static.

Menținerea site-ul sigur și actualizat este simplă.

Dezavantajele site-urilor dinamice:

Sunt mai scumpe de dezvoltat și presupun o pregătire informatică superioară.

Personalizarea unui site poate costa mai mult decât a unuia static, mai ales dacă se pune problema rescrierii codului de bază sau a bazei de date.

Necesită un server robust.

Dincolo de toate acestea, foarte important este faptul că proprietarul deține controlul complet al site-ului.

O interfață de administrare variază ca structură și facilitați oferite de la un site la altul sau chiar de la un client la altul, în funcție de complexitate și necesități. Pentru un site simplu de prezentare, de exemplu, facilitățile oferite de interfață sunt destul de restrânse: îi oferă administratorului dreptul de a modifica informațiile de pe o pagină, adresa de contact, cel mult adăugarea unor servicii sau imagini la portofoliu. Pe de altă parte, un site complex cum ar fi un magazin online sau un site tip portal, beneficiază de o gamă mult mai mare de facilități oferite de interfața de administrare, cum ar fi: adăugarea și modificarea de produse, cu una sau mai multe poze aferente, setarea ofertelor speciale, informații despre utilizatori/clienți, statistici cu privire la vânzări, managementul newsletterelor, controlul asupra aspectulului general al siteului.

Unul dintre elementele definitorii pentru o interfață de administrare este simplitatea în utilizare. Dacă este corect concepută, ea va putea fi cu ușurință utilizată de către posesorul site-ului. Orice persoană care se poate descurca într-un editor de text și are un minim de experiență în navigarea pe internet, cu siguranță nu va întâmpina nici o problemă în cadrul interfeței de administrare.

Prețul inițial, pe care proprietarul site-ului îl achita în schimbul acestei interfețe, poate fi chiar jumătate din prețul site-ului, dar mai mult ca sigur se va amortiza în maximum câteva luni. Aceasta deoarece este un fapt știut că totalul cheltuielilor de mentenanța a unui site depășește în scurt timp prețul de realizare.

În concluzie, o interfață de administrare este recomandată pentru orice tip de site, chiar și de prezentare, utilitatea acesteia fiind vizibilă pe termen lung.

Cap 2. Proiectarea unui website

2.1. Aspecte generale

Utilizatorii Web nu doar cauta informații, ci si interacționează cu ele într-o manieră deosebită, fără precedent în designul documentelor scrise. Interfața grafică cu utilizatorul a unui sistem computerizat include metafore de interacțiune, bazandu-se pe imagini si concepte folosite pentru a transmite funcționalitate și inteles într-un mod vizual.

Caracteristicile fiecărei dintre componentele de interfață și secvențele funcționale ale interacțiunilor cu utilizatorul produc aspectul dar și percepția paginilor Web și relațiile dintre pagini. Designul grafic nu are ca scop doar sa invioreze informația, grafica paginilor Web fiind o parte integrantă a experienței vizitatorului site-ului respectiv. În cazul documentelor interactive este imposibil să se separe complet designul grafic de funcțiile designului de interfață.

2.2. Design clasic versus design web

Multe dintre conceptele curente privind structurarea informației derivă din organizarea cărților tipărite și a periodicelor. Sistemele automate de cataloage și de indexare s-au dezvoltat în contextul informației tipărite. Standardele de interfață cu cititorul ale tipăriturilor sunt bine stabilite și respectate, instrucțiuni detaliate pentru crearea cărților putând fi găsite în diverse ghiduri de tehnoredactare computerizată. Fiecare caracteristică a cărții, începând de la cuprins până la indexul final sau notele de subsol, a evoluat de-a lungul secolelor, iar cititorii primelor cărți tipărite au întâmpinat unele dintre problemele de organizare cu care se confruntă utilizatorii de documente hipermedia de astăzi.

Documentele Web trebuie să evolueze, iar proiectanții lor trebuie să urmeze diverse standarde privind organizarea și prezentarea informațiilor în formă electronică. Trebuie însă ținut cont de faptul că, deși documentele hipermedia interactive ridică noi provocări pentru designerii de informație, o mare parte din cunostiințele necesare în vederea proiectării, generării, asamblării, editării și organizării multiplelor forme de medii de comunicare nu sunt foarte diferite de cele folosite curent în cadrul mediilor tipărite. Multe dintre documentele Web trebuie să fie conforme convențiilor utilizate de tehnoredactorii de materiele tipărite, în ceea ce privește stilul editorial și organizarea textului.

Principalele diferențe între publicații și web le prezentăm în tabelul următor.

Tabel 1. Diferențele intre publicațiile clasice și publicațiile online

Publicatiile clasice Publicatiile web

Aceste diferențe ne arată că multe din aceste publicații nu mai au același efect și impact puternic cum obișnuiau să aibă. Un proiect web care folosește grafice, elemente video și elemente audio oferă utilizatorului un mediu în care poate experimenta o temă până la cel mai mic detaliu.

Datorită interacțiunii care rezultă în urma discuțiilor asupra unui material pe e-mail cu alți participanți și cu autorul, într-un mod constant, web-ul va face ca cititorii să interacționeze cu materialul într-un mod colaborativ, iar efectele să fie stimulante.

2.3. Scopul și obiectivele unui site

Identificarea și înțelegerea nevoilor vizitatorilor sitului dorit a fi proiectat au în vedere stabilitatea scopului acestuia. Oricare ar fi specificul sitului Web, primul pas este acela de a ne asigura că ne-am definit un set de obiective, adică știm ce dorim să realizăm o dată cu demararea activităților de construire și dezvoltare a site-ului. Fără o frază clară menită a preciza scopul și obiectivele – proiectul nu va avea succes. Conștientizarea scopului dorit a fi materializat și grija planificării activităților sunt cruciale, mai ales dacă facem parte dintr-o echipă de design a unui site.

Înainte de a începe construirea site-ului respectiv, trebuie să avem în vedere:

identificarea publicului țintă;

stabilirea scopului site-ului;

cunoașterea obiectivelor principale;

întocmirea unui plan concis privitor la informațiile disponibile pe site.

În paralel, va trebui demarată activitatea de identificare a tuturor informațiilor textuale grafice și multimedia și a resurselor disponibile pe care va fi necesar să le colectăm sau să le creăm pentru a atinge obiectivele stabilite.

Stabilirea obiectivelor finale

Principiul de design al site-ului este furnizat de sloganul sub care urmează a se desfîsura întreaga activitate. Trebuie să avem o motivaăie precisă în crearea unui site Web, iar pentru aceasta este imperios necesar să explicăm obiectivele, în funcție de îndeplinirea acestora urmând a analiza viitorul succes al site-ului nostru.

Pentru a defini obiectivele care trebuie atinse un proiectant trebuie să-și pună următoarele întrebări:

care este misiunea organizației?

cum va susține un site Web misiunea organizației?

care sunt cele mai importante două, trei cele mai importante scopuri ale site-ului?

cine va fi interesat de site-ul Web?

ce impresie dorim să lăsăm audienței?

ce strategii se vor folosii pentru atingerea scopurilor?

cum se va evalua succesul site-ului?

cum se va reuși o întreținere adecvată a site-ului finit?

Procesul de constituire a unui site se desfășoară în mai multe etape, informațiile puse la dispoziție prin intermediul lui schimbându-se frecvent. Editarea pe termen lung a informației și dezvoltarea tehnică a site-ului trebuie să facă parte din planurile noastre importante legate de design. Fără acestă perspectivă pe termen lung, site-ul Web va avea aceeași soartă ca multe publicații tipărite, care au debutat în condiȚii favorabile, dar nu au avut continuitate.

Cunoașterea audienței

Un bun start pentru a stimula personalul să lucreze la conturarea unei imagini cât mai benefice asupra organizației este evaluarea avantajelor pe care ar putea să le aibă utilizatorul care va aloca din timpul său câteva minute pentru a ne vizita site-ul.

Identificarea potențialilor vizitatori ai site-ului este crucială. Structurarea designului site-ului se va face în concordanță cu nevoile și așteptările audienței. Gradul de instruire, interesele și dorințele utilizatorilor vor varia de la novicii care au nevoie de o introducere atent structurată până la utilizatorii experți iritați de orice aspect care le întârzie accesul la informație. Un site Web bine proiectat ar trebui să fie capabil să se acomodeze unei game largi de interese și aptitudini ale utilizatorilor. De exemplu, în contextul intranetului, dacă scopul site-ului este de a furniza informații interne privitoare la firmă (documente despre resursele umane, noi oportunutăți apărute în cadrul companiei sau alte informații care de obicei sunt tipărite), site-ul va fi folosit de angajații acelei organizații, fiind vizitat chiar de mai multe ori pe zi.

Va trebui, așadar, să descoperim ce informații ar putea avea valoare pentru vizitatori și să le oferim în cadrul site-ului.

În primul rând trebuie să ne concentrăm asupra primei impresii pe care le-o face vizitatorilor site-ul nostru. Prima pagină ar trebui să fie asemeni copertelor de reviste. Obiectivul este de a atrage utilizatorii ocazionali prin intermediul unor imagini plăcute și al unor sloganuri prezentând conținutul. Toate legăturile din pagina de start trebuie să conducă spre paginile subiectelor importante din cadrul site-ului.

Pentru aceasta trebuie să mulțumim mai multe categorii de utilizatori ai site-ului, care pot fi:

Utilizatorii novici și cei ocazionali. Posibilitățile de înțelegere și orientare ale acestora sunt dependente de o structură clară a site-ului și de un acces facil către schemele de organizare a informațiilor disponibile. Novicii sunt intimidați de meniurile-text complexe și nu vor cerceta în detaliu site-ul dacă pagina de start nu oferă imagini atractive și nu este judicios organizată. După studiile lui Jakob Nielsen – unul dintre specialiștii notorii în utilizarea interfețelor – mai puțin de 10% din cititorii unei pagini Web au derulat documentul pentru a parcurge și informațiile din partea inferioară a acestuia.

Utilizatorii ocazionali trebuie să beneficieze de pagini prezentând rezumate ale informațiilor importante, de hărți ierarhice ale conținutului site-ului, de imagini sugestive care să-i ajute să-și amintească localizarea informațiilor din cadrul site-ului. Pagini conținând un glosar de termeni, acronime și abrevieri, plus o listă cu “întrebări frecvente” (documentele de tip FAQ – Frequently Asked Questions) pot fi de ajutor utilizatorilor ocazionali sau primilor veniȚi, mai ales în cazul unor site-uri prezentând un conținut complex.

Utilizatorii frecvenți și experții. Această categorie vizitează site-ul cu scopul de a obține, rapid și cu un grad mare de acuratețe, informațiile dorite. Utilizatorii experți nu au răbdare să folosească meniuri grafice multiple oferind de la două până la șase opțiuni la un moment dat. Ei solicită meniuri-text care se încarcă rapid și care pun la dispoziție legături spre subiectele importante. Grafica inutilă enervează acest tip de audiență. Utilizatorii experți și cei frecvenți au formulate în general scopuri specifice și vor aprecia legăturile spre informațiile de detaliu, motorul de căutare internă sau indexul site-ului.

Utilizatorii internaționali. Proiectarea Web trebuie să țină cont și de internaționalizare. Vizitatorii site-ului pot proveni din medii și state diferite. Pentru a avea o audiență largă, la nivel mondial, va trebui să oferim traduceri, în cele mai frecvent folosite limbi, cel puțin pentru paginile importante.

Trebuie evitate elementele de jargon sau acronimele tehnice obscure în cadrul paginilor introductive. De asemenea, nu trebuie să presupunem că fiecare cititor este familiarizat cu convențiile locale privitoare la dată și la timp. De exemplu, 4/9/02 pentru un american va înaemna data de 9 aprilie 2002, dar pentru utilizatorii din europa s-ar putea interpreta această abreviere drept 4 septembrie 2002. Aceeași observație este valabilă și pentru unitățile de măsură.

Stabilirea cerințelor

Proiectarea site-ului trebuie să ia în considerare cerințele impuse de beneficiarul acestuia. Se impune așadar discutarea cu beneficiarul, în amănunțime, a cerințelor, căzându-se de comun acord asupra unor aspecte generale și/sau particulare ale site-ului respectiv. Beneficiarul, autorul ori ambii pot decide, printre altele, care vor fi:

platforma-țintă (sistemul hardware, sistemul de operare, serverul Web, clientul/clienții Web);

limbajul sau limbajele de programare utilizate și modul de procesare a datelor (dacă este cazul);

nivelul programării Web (pe server, la client sau o abordare mixtă);

sistemul de management al bazelor de date și a altor resurse;

cerințele de securitate;

designul general al site-ului;

audiența și specificul conținutului.

Problemele practice de construire și de menținere a unui site Web de dimensiuni moderate (100 de pagini) pot fi multiple. Dintre acestea se pot enumera:

modificarea frecventă a documentelor având conținut dinamic, dificil de controlat;

asigurarea integrității legăturilor dintre pagini;

modificarea substanțială a structurii site-ului drept consecință a schimbării conținutului;

contradicția dintre design și funcționalitate.

Tipuri de site-uri

Prezentarea informației, indiferent de metoda folosita (mass-media clasice, CD-ROM, Web etc.) este guvernata de o serie de reguli,care sunt determinate de obiectivele propuse, de logistica efectivă in functie de mediului ales și de natura publicului căruia ne adresăm.

O clasificare a tipurilor de site-uri poate fi făcută astfel:

site-uri de tip e-business

site-uri de tip intranet

site-uri tematice

site-uri personale

site-uri colaborative

Exista trei mari categorii de site-uri bazandu-se pe principalele strategii de prezentare a informatiilor:

intranet;

de conținut;

de prezentare;

Site-ul intranet al unei organizații. Există patru metode majore în furnizarea informațiilor în intranet în funcție de două criterii : gradul de liniaritate al prezentării și lungimea timpului de contact cu utilizatorul tipic. În concordanță cu acestea, în intranet, pentru siteurile care au conținut educațional sau ale unor firme care doresc să-și instruiască personalul folosind tehnologiile Web, se pot lua în calcul următoarele aspecte:

Instruirea. Aplicațiile de instruire bazate pe Web organizeaza informațiile într-o formă plată, extrem de lineară, bazată pe metafora cărții tipărite. Nu se deviaza de la idea centrala a prezentarii.

Pentru facilitarea navigării sunt puse la dispoziție legături de navigare, de genul “Înainte” și “Înapoi”, oferindu-se astfel cititorului o modalitate lineară de parcurgere a întregului conținut. Prin aceasta se permite realizarea de aprecieri mai exacte referitoare la timpul petrecut de utilizator pe site.

Multe prezentări,care sunt axate pe subiecte concrete, presupun un timp de contact foarte scurt sau sunt divizate în sesiuni cu întindere de maxim o oră (este cazul cursurilor on-line). Trebuie să informăm utilizatorii asupra timpului petrecut pentru parcurgerea întregii sesiuni și să nu se abată de la materialul necesar,mai cu seamă dacă doresc să obțină un atestat pentru acel curs de instruire.

Învățarea. Aplicațiile Web de învățare sunt, de asemenea, construite în jurul unei expuneri centrale, dar de obicei oferă mai multe oportunități pentru studenți. Un atu major este cel de a se putea urmări digresiuni interesante de la temele principale ale site-ului, existând permanent posibilitatea revenirii la prezentarea centrală. Informația prezentată este mai sofisticată și mai delicată decât în cazul aplicațiilor de instruire. Structurile hipertext prea complicate pot distrage atenția și pot astfel împiedica vizitatorii să parcurgă prezentarea de bază. Dacă dorim să furnizăm utilizatorilor legături către alte resurse Web suplimentare, va trebui să le grupăm într-o pagină separată, nu în cadrul materialului principal.

Educația. Publicul orientat către o învățare euristică, directă, va fi iritat de strategiile de design lineare. Adesea, utilizatorul tipic al aplicațiilor educative posedă deja un anumit grad de cunostiinȚe.

Structurile hipertext nelineare, interactive, flexibile sunt cele mai potrivite pentru a organiza informațiile destinate acestor utilizatori. Designul trebuie să permită accesul rapid la o gamă largă de subiecte. Uzual, sunt prezente mai multe legături către materiale pe aceeași temă din cadrul site-ului și din site-uri externe. Listele cu legături text pot fi văzute ca fiind cuprinsul său indexul temelor principale, deoarece se încarcă rapid și cuprind multă informație. Publicul țintă însă se poate plictisi relativ repede și are nevoie de “stimulente” pentru focalizarea atenției: imagini cu impact sau elemente grafice aspectuase care să incite la parcurgerea materialului. Un dezavantaj al acestei abordări este imposibilitatea aprecierii duratei de vizitare. Aceasta de cele mai multe ori va fi mai scurtă decât în cazul site-urilor de instruire sau de învățare pentru că utilizatorii sunt de obicei sub presiunea timpului. Aspectul pozitiv îl constituie ulterioară revenire pe site a vizitatorilor interesați de alte informaȚii oferite sau de aprofundarea celor deja parcurse.

Documentarea. O altă categorie este cea a site-urilor Web care permit accesul la diverse informații documentare sau la referințe bibliografice privitoare la un anumit subiect. O proiectare bună va permite utilizatorilor să navigheze rapid, să găsească ușor ceea ce caută și apoi să tipărească facil sau să salveze informațiile corespunzătoare. Nu există reguli generale, iar modelele folosite sunt în totalitate nelineare. Conținutul și structura meniurilor de subiecte trebuie să fie organizate în mod profesionist pentru a permite o căutare rapidă, ierarhică, o descîrcare facilă a documentelor și o accesare comodă a opțiunilor de tipărire a informațiilor. Grafica trebuie să fie minimală pentru a micșora timpul de încărcare a paginilor. Site-ul trebuie să includă un motor de căutare internă și un index de domenii. Pentru acest tip de site, utilizatorul trebuie să petreacă un timp minim în vederea îndeplinirii scopului său.

Site-uri de conținut. Acestea acumulează vizitatori interesați de informațiile oferite gratuity in majoritatea cazurilor și devin generatoarele de trafic pentru site-urile care au un caracter comercial. Astfel, vizitatorii site-urilor de conținut pot deveni ulterior clienți ai altor site-uri conexe, dedicate comercializării de bunuri și servicii.

Domeniul de specializare a informațiilor puse la dispoziție de un site de conținut trebuie să reprezinte o nișă cu arie mică de interes.

Unul dintre scopurile majore urmărit de un site de conținut este cel de a capta atenția unui număr cât mai larg de vizitatori, ceea ce conduce la un trafic accentuat și la posibilitatea de câștig prin expunerea unui număr cât mai mare de afișe publicitare ale unor site-uri comerciale sau prin racolarea de clienti

Obiectivele principale ale unui site de conținut pot fi:

lider în domeniul de specializare al site-ului. Este foarte important sa ne prupunem sa fim primii,altfel nu vom avea șansa să ocupăm nici măcar locul secund.

Site-ul trebuie să acopere toate nivelurile calitative pentru domeniului său de specializare. Deși trebuie acordata prioritate informațiilor de nivel mediu, care sunt accesibile marelui public, informațiile prețioase, de calitate, din cadrul domeniului trebuie să constituie o condiție excelenta cand vine vorba de credibilitate.

Primul avantaj este că audiența v-a observa prezența acestui nivel superior. Cel de-al doilea câștig provine datorita faptului că nivelul superior v-a determina formarea în timp a unei comunități a experților în domeniu, comunitate care se v-a asocia site-ului și ii v-a putea face reclamă indirectă, conducând la creșterea valorii acestuia.

Site-ul trebuie să genereze trafic constant pentru o parte din public care este cât mai bine definit. Pentru viitorii cumpărători de spațiu publicitar în cadrul site-ului nostru este foarte important să existe un public-țintă bine definit.

Site-ul de prezentare a unei companii sau organizații. Principalul aspect de care trebuie să ținem seama este acela că audiența site-ului unei organizații nu este și nici nu se dorește reprezentată exclusiv de conducerea acesteia. Site-urile focalizate pe descrierea companiei, a misiunii și istoriei acesteia, eventual chiar având fotografia managerului general în prim-plan nu vor capta atentia clienților firmei, aceștia dorind informații concrete, utile. Site-ul Web nu trebuie conceput după dorința personalului de conducere al organizației, ci conform obiectivelor acesteia și audienței reale.

În același timp, site-ul nu trebuie să fie o oglindă fidelă a companiei, pentru că vizitatorii ocazionali nu sunt interesați să deducă structura firmei din modul de organizare a site-ului. Chiar dacă este mai ușor să se distribuie mai multor departamente responsabilitățile interne în ce privește dezvoltarea și înreținerea site-ului, scopul principal este asigurarea consistenței și orientarea site-ului către interesele posibilor clienți. Deseori se dovedește necesar ca informația provenită de la un singur departament să fie distribuită pe mai multe pagini sau, dimpotrivă, în cadrul unei singure pagini să coexiste date referitoare la activitatea mai multor departamente. Interesele utilizatorilor sunt cele care dictează organizarea site-ului și nu structura internă a companiei.

Sunt situații în care o companie furnizează un mod foarte avantajos de prezentare pentru medii de comunicare tradiționale, dar obține rezultate slabe în ceea ce privește prezența pe Web. Problema provine din faptul că spațiul WWW este un mediu nou, fără asemănare cu mass-media. Nu se poate crea un site bun al firmei preluând informațiile și designul dintr-o broșură sau dintr-un catalog de prezentare, chiar dacă acestea s-au bucurat de succes. Web-ul nu trebuie tratat ca mediu de importanță secundară.

Conținutul propriului site Web al companiei trebuie să aibă în vedere specificul comunicării pe Internet.

4. Site de vânzare online. Comerțul electronic (în engleză: Electronic Commerce sau e-Commerce) este activitatea de cumpărare sau vânzare prin intermediul transmiterii de date la distanță, activitate specifică politicii expansive a marketingului companiilor comerciale. Prin intermediul Internetului se dezvoltă o relație de servicii și schimb de mărfuri între ofertant și viitorul cumpărător. În anii 1990 compania IBM, printr-o campanie publicitară corespunzătoare, a făcut popular și termenul echivalent Electronic Business. Un termen înrudit este E-Trade, care se referă la tranzacțiile bursiere electronice.

Utilizarea tuturor mijloacelor electronice pentru participarea la o activitate de comerț electronic poartă denumirea de tranzacție electronică.

Strâns legate de comerțul electronic pot fi și alte activități electronice, de exemplu servirea cumpărătorilor, livrarea mărfii (dacă e vorba de medii electronice), colaborarea cu partenerii de afaceri sau și conducerea unei organizații prin mijloace electronice.

În tranzacțiile comerciale clasice se disting următoarele etape:

informarea comercială referitoare la tranzacție și anume cercetarea de marketing;

încheierea contractului comercial general;

comandarea/vânzarea produsului său a serviciului;

plata.

În cadrul comerțului electronic pot fi tranzacționate bunuri și servicii digitale (sunt excluse fazele logistice), iar locul în care sunt tranzacționate aceste bunuri digitale poartă denumirea de piață electronică (în limba engleză e-marketspace) – contextul virtual în care cumpărătorii și vânzătorii se găsesc unii pe alții și tranzacționează afaceri electronice.

Categoriile comerțului electronic

Comerțul electronic permite participarea atât a persoanelor fizice și juridice, cât și a statului sau a instituțiilor acestuia. În funcție de relațiile dintre acești participanți au luat naștere mai multe categorii de comerț electronic:

B2B (business-to-business) Este un model de comerț electronic în care toți participanții sunt companii sau alte organizații.

B2C (business-to-consumer) Model de comerț electronic în care companiile vând la cumpărători individuali – persoane fizice.

C2B (consumer-to-business) Acest model de comerț electronic se referă la persoanele fizice (consumatori) care utilizează Internetul pentru a-și vinde produsele sau serviciile firmelor și pentru a căuta vânzători care să liciteze pentru produsele sau serviciile de care au nevoie

C2C (consumer-to-consumer) Acest model se referă la consumatorii care vând direct la alți consumatori. Un exemplu din acest domeniu care are un succes enorm în întreaga lume este sistemul eBay.

E-government Această formă de comerț electronic este întâlnită în următoarele forme: B2G (business to government), G2B (government to business), G2C (government to consumer). Aici prin "government" se înțelege administrația statului respectiv.

Beneficiile comerțului electronic

Având ca suport rețeaua Internet și eventual și utilizarea unor pachete de programe software specifice, comerțul electronic a avut și are avantaje și beneficii pentru firme, consumatori individuali și societate:

Pentru companii

Extinderea pe piețele internaționale prin asigurarea de servicii și performanță;

Asigurarea unei deschideri totale în privința relațiilor cu clienții: aceștia pot căpăta o imagine aproape completă asupra tuturor angajaților, ofertanților și partenerilor lor.

Scăderea costului de creare, procesare, distribuire, păstrare și regăsire a informației, până acum bazată pe hârtie, prin crearea unui sit web atractiv cu funcția unui magazin virtual. Siturile web personalizate, sugestiile pentru cumpărare și ofertele speciale personalizate pot într-o oarecare măsură substitui interacțiunile de tip față în față, de tip tradițional;

Creează posibilitatea modelării produselor și serviciilor după nevoile cumpărătorilor și simplificarea procedurilor;

Costuri de comunicație mai mici.

Seriozitate și siguranță. Serverele paralele, redundanța hardware-ului, tehnologia fail-safe, încriptarea informației și firewall-urile pot îndeplini această cerință;

Creșterea competitivității și raționalizarea proceselor de afaceri, prin restructurări interne și prin tehnologii ale informației.

Construirea unui lanț valoric electronic, în care se pune accentul pe un număr limitat de competențe-cheie – opusul unui magazin "cu o singură oprire". (Magazinele electronice pot fi atât speciale cât și generale, dacă sunt programate corect.)

Pentru consumatori

Posibilitatea consumatorilor să cumpere sau să facă tranzacții la orice oră din zi, în tot timpul anului, din aproape orice locație;

Acordă consumatorilor mai multe posibilități de alegere a produselor și prețurilor;

Consumatorilor li se dă siguranță asupra valorii. Vânzătorii pot realiza acest lucru oferind un produs sau o linie de produse care atrage potențialii clienți prin prețuri competitive, la fel ca și în comerțul ne-electronic;

Permite o livrare rapidă a produselor și/sau serviciilor (în anumite cazuri);

Consumatorii pot să primească informații relevante în decursul câtorva secunde, și nu zile sau săptămâni;

Asigurarea motivației consumatorilor de a cumpăra și, la nevoie, de a și returna. Vânzările promoționale pot implica cupoane, oferte speciale sau reduceri. Linkurile de pe alte situri web și programele afiliate de reclame pot fi de asemenea de ajutor;

Face posibilă participarea în licitații virtuale;

Îndemnarea consumatorilor la consum. Comercianții din Internet pot asigura acest tip de ajutor printr-o amplă informare comparativă și prin facilități bune de căutare;

Permite consumatorilor să interacționeze cu alți cumpărători în comunități electronice și să compare experiențele;

Lăsând clienții să se ajute singuri. Asigurând funcționarea unui sit de autoservire, ușor de folositfără asistență, poate fi de ajutor în acest sens;

Facilitează competiția, ceea ce rezultă în scăderea prețurilor.

Familiarizează consumatorii cu tehnologia și îi ține pe aceștia în pas cu ultimele noutăți.

Pentru societate

Crearea unui "simț comun" al comunității comerciale, de exemplu prin chaturi, foruri ce solicită implicarea clientului, scheme de loialitate și programe de afinitate;

Dă posibilitatea mai multor persoane să lucreze / să cumpere de acasă, ceea ce micșorează traficul rutier și poluarea aerului;

Permite ca anumite mărfuri să fie vândute la prețuri mai scăzute, cu avanateje pentru cei cu venituri mai mici;

Crește eficiența și/sau îmbunătățesc calitatea;

Pune la dispoziție o organizare suficient de atentă și agilă pentru a răspunde rapid la orice schimbări din mediul economic, social și fizic.

2.4. Principiile creării unui site

Există anumite principii pe care trebuie să le respectăm în proiectarea site-urilor web. Acestea pot fi principii general valabile, aplicabile oricărui produs sau tehnologii sau pot fi specifice tehnologiei web.

Pe baza criteriilor de testare putem grupa aceste principii în 2 mari categorii: funcționale și non-functionale.

După cum îi spune și numele, testarea funcțională se ocupa cu funcționarea site-ului. Toate linkurile trebuie să fie funcționale, să nu ducă spre pagini inexistente sau șterse. În cazul în care totuși se întâlnesc aceste situații să existe așa-numita pagina 404, de eroare, care să dea un mesaj prietenos și, eventual, să sugereze modalități de rezolvare a problemei întâmpinate. Tot aici se va testa funcționalitatea formularelor de contact sau de comandă în cazul magazinelor online.

Testarea non-functionala se va ocupa de testarea site-ului bazându-se pe criterii non funcționale cum ar fi:

Compatibilitatea: se va testa site-ul pe mai multe browsere, pe mai multe platforme, pe mai multe device-uri

Utilizabilitatea: ușurință în folosire a site-ului de către utilizatori

Conformitatea: se testează ca site-ul este ceea ce și-a dorit clientul

Soliditatea (reliability): testează faptul că site-ul funcționează conform așteptărilor, în anumite condiții date, pentru o anumită perioadă de timp

Încărcarea: se testează site-ul cu cât mai mulți utilizatori care-l accesează concomitent

Localizarea și internaționalizarea: se testează faptul că site-ul funcționează corect pentru toate limbile existente, paginile nu “sar” de la o limbă la alta etc.

Performanta: se testează viteza cu care operează site-ul sau părți din el, în anumite condiții deîncărcare.

Securitatea: se testează dacă produsul este sigur sau nu, dacă cineva care nu are drepturi se poate autentifica, dacă datele stocate sunt păstrate în siguranță.

Timpul de recuperare: se testează rapiditatea și precizia cu care site-ul își revine după ce a suferit un crash de natura software sau hardware

Scalabilitatea: testează ușurință cu care produsul își adaptează performanțele non-functionale cum ar fi încărcarea, numărul tranzacțiilor, volumul de date etc.

Volumul: testează performanța unui site, atunci când baza de date aferenta este încărcată la maxim.

Stresul: testează performanța unui site, atunci când baza de date aferenta este încărcată peste maxim, pentru o mare perioadă de timp

Mai jos vor fi descrise câteva dintre cele mai folosite criterii non-functionale folosite atunci când avem în vedere crearea unui site, majoritatea specifice tehnologiei web.

2.4.1. Utilizabilitatea

Cel mai important aspect al realizării unui website îl constituie utilizabilitatea acestuia (calitatea de a fi plăcut și comod în utilizare). Nu putem considera că am realizat un site util dacă acesta arată foarte bine, dar conținutul paginilor se afișează greu sau navigarea este dificilă, neintuitiva. Este important de știut că utilizatorul dorește să găsească informația solicitată în cel mai scurt timp posibil, în caz contrar el o va căuta în altă parte.

Înainte de a trece la realizarea unui site, trebuie să ne gândim cui îi este adresată informația și nu trebuie să sacrificăm gradul de utilizabilitate în favoarea aspectului general. Utilizabilitatea site-ului depinde în mare măsură de scopul acestuia și de cei căruia îi este adresat.

Trebuie să ne punem tot timpul întrebarea: "Ce cauta vizitatorii pe un site?" Răspunsul este simplu: informații.

Exact ca la un hamburger, ceea ce se afla în mijloc contează cel mai mult. Altfel spus, utilizatorilor le pasă în mod special de conținut. Prin urmare, utilitatea unui website este mai degrabă o consecință a unei bune administrări, deși designul și accesibilitatea au rolul lor în fidelizarea vizitatorilor. Cele mai multe greșeli de proiectare și administrare a unui website decurg din sub-evaluarea conținutului.

Atunci când se realizează conținutul unui site trebuie avute în vedere diferențele dintre o pagină de internet și o publicație tipărită. Pe internet, tendința cititorilor este de a scana conținutul paginii, încercând să găsească exact informațiile care îi interesează. Prin urmare, exista un set de reguli specifice în ceea ce privește redactarea textului pentru un site:

Se foloseste un limbaj cat mai simplu si clar

Datorita faptului ca parcurgerea unui text pe monitor este obositoare pentru ochi și cu 25% mai dificilă decât citirea unui text printat,trebuie evitate frazele complexe folosindu-se cuvinte cat mai scurte.

Se limiteaza fiecare paragraph la o singura idee

Astfel, vizitatorii pot parcurge cu ușurință acel paragraf, chiar dacă nu parcurg textul total important e sa se retina idea principala. O metodă eficientă pentru scoaterea în evidență a ideei centrale este punerea concluziei la început, urmand apoi explicații – ce? cum? sau unde. Pentru a redacta un text potrivit folosirii pe o pagină de internet concluzia textului trebuie să se regăsească în primul paragraf.

Se folosesc subtitluri sugestive

Divizarea conținutului în secțiuni precedate de subtitluri clare permite vizitatorilor să urmărească ideile principale din text și să le aleagă pe cele de care sunt interesați.

Îngroșarea cuvintelor cheie

Nu trebuie abuzat de aceasta metodă. Este suficientă îngroșarea a 2-3 cuvinte cheie prin care să se permită înțelegerea ideii principale din paragraf de către persoanele care scanează doar conținutul paginii.

Se folosesc enumerări

Expunerea ideilor într-o formă cât mai concisă, prin folosirea listelor, permite totodată parcurgerea informațiilor pe verticală.

Alinierea la stânga a textului

Este mai ușor de citit un text aliniat la stânga decât unul „justify”. Aceasta deoarece în cazul textelor aliniate la ambele capete, spațierea între cuvinte diferă, ochii trebuind să caute începutul noului cuvânt.

Odată creat conținutul site-ului, acesta trebuie actualizat în mod curent în așa fel încât informația prezentată să fie mereu valabilă și utilă vizitatorului. O soluție pentru cei care doresc să-și modifice frecvent conținutul paginii web, fără a apela la specialiști, este Content Management System, un modul de administrare, despre care vom vorbi în numărul viitor.

2.4.2. Simplitate și consistență

În general utilizatorii nu sunt impresionați de complexitatea site-ului, în special cei care doresc de la site-ul vizitat informații clare și actuale. Pentru lizibilitate și funcționalitate maximă designul paginii și al site-ului trebuie să fie construit după un model consistent de unități modulare, toate conforme aceluiași plan de bază, recurgând la aceleași teme grafice, convenții editoriale și ierarhii de organizare. Scopul este acela de a fi consistenți și predictibili astfel încât utilizatorii să exploreze confortabil site-ul. Identitatea grafică a unor serii de pagini din site-ul furnizează indicații vizuale cu privire la continuitatea informației.

Graficul din antetul prezent pe fiecare pagină a site-ului creează o interfață consistentă și o identitate de necontestat a organizației. Chiar dacă paginile nu utilizează elemente grafice o abordare consistentă a înfățișării titlurilor, subtitlurilor, a subsolurilor de pagină și a legăturilor spre pagina de start sau către alte pagini va întări de asemenea simțul de orientare pe site.

Pentru că un site să-și păstreze consistența trebuie să menținem poziția siglei, a meniului de navigare, precum și a titlurilor. Se va evita modificarea poziției de navigare din pagină Web, deoarece modificarea poziției obligă utilizatorul să reînvețe modul de navigare, ceea ce va avea ca efect obosirea, derutarea sau chiar plictisirea acestuia.

2.4.3. Stabilitatea funcțională designului

Pentru a convinge utilizatorii că informațiile disponibile pe site sunt de încredere și clar prezentate, proiectarea site-ului web se va realiza cu atenția cu care s-ar realiza orice alt tip de document informativ al firmei, folosindu-se aceleași standarde de editare și de design ireproșabil.

Un site neglijent construit, având un design vizual slab, nu va inspira încredere vizitatorilor, mai ales în domenii precum comerțul electronic. Stabilitatea funcțională în designul web înseamnă asigurarea funcționării elementelor interactive ale site-ului în vederea exploatării eficiente a acestuia. Stabilitatea funcțională presupune două componente:

realizarea optimă a site-ului chiar de la prima versiune a acestuia, din momentul construirii și implementării

și menținerea unei bune funcționări a site-ului de-a lungul existenței sale.

2.4.4. Ușurința navigării

Modul de navigare prin site-ul creat de către noi constituie cel mai important aspect al realizării acestuia. Modul de navigare permite utilizatorului să știe unde se află și cum poate ajunge la informația dorită. De asemenea modul de navigare trebuie să furnizeze o vizualizare ierarhică a informației oferite în cadrul site-ului. Un mod de navigare ușor reflectă o structură a site-ului bine gândită.

Modul de navigare conține de obicei următoarele elemente:

logo

titlul site-ului

meniul principal de navigare

indicatorul poziției curente (breadcrumb)

butonul/link-ul “Pagina de start” (home)

harta site-ului

Titlul site-ului trebuie să fie dispus întotdeauna în partea superioară a paginii. Acest titlu trebuie să fie relevant pentru pagină web curentă. De asemenea titlu trebuie introdus în codul sursă al paginii web pentru că acesta să fie afișat în bară de titlu a ferestrei navigatorului.

Meniul de navigare (panoul de navigare) este de fapt un set de legături (links) dispus de obicei fie în partea de sus a paginii, sub logo, fie în partea din stânga a paginii web. Acest set de legături poate fi de tip text sau imagini. Este indicat că meniul de navigare să ocupe cât mai puțin spațiu din fereastră browserului de navigare. Nu este indicat să schimbăm poziția meniului de navigare în interiorul site-ului. Trebuie să fim foarte atenți atunci când utilizăm imagini pentru meniul de navigare, deoarece, dacă imaginile nu sunt sugestive sau utilizatorul nu va poziționa cursorul mouse-ului pe imagine, legătura s-ar putea să nu fie remarcată și deci să devină inutilă. De aceea este indicat că pe lângă meniul de navigare realizat prin intermediul imaginilor să se introducă și o versiune de tip text a acestui meniu, dispusă de obicei în partea inferioară a paginii web. Acest lucru este util totodată și pentru a ajuta utilizatorul să nu mai facă scroll până în partea de sus a paginii, odată ce a citit informația și a ajuns la final de pagină.

Indicatorul poziției curente (breadcrumb) este bine să fie introdus în toate paginile web din care este compus site-ul. El poate fi totuși omis în de pagina de start. Acest indicator este util doar pentru site-urile complexe unde utilizatorul poate fi derutat de cantitatea mare și modul de dispunere a informațiilor. Indicatorul poziției curente trebuie să fie cât mai concis, iar elementele precedente vor fi legături. Ultimul element al indicatorului poziției curente nu va fi o legătură, deoarece reprezintă pagina curentă.

Butonul “Pagina de start” va face legătura către pagina ce va fi afișata inițial la accesarea site-ului. Acest buton poate fi de tip text sau imagine (imagine compusă din sigla firmei și textul “Home page”) și trebuie plasat de obicei în colțul din stânga-sus al ferestrei navigatorului, De asemenea trebuie să ne asigurăm că există și varianta tip text a acestui buton. Acest buton poate fi introdus chiar și în indicatorul poziției curente.

Accesul direct și rapid

Trebuie concepută o ierarhie eficientă a informației pentru a reduce numărul pașilor de parcurgere a meniurilor de legături ale paginilor. Vizitatorii preferă o serie de pagini relativ dense, incluzând liste de opțiuni, în locul mai multor pagini ce oferă meniuri simplificate. Pentru că utilizatorii să aibă acces la informațiile dorite, trebuie că încărcarea documentelor să se realizeze rapid. Cercetările au arătat că pentru majoritatea activităților executate pe calculator pragul de frustrare este de aproximativ 10 secunde.

Legăturile (hyperlinks)

Este indicat că, atunci când un site conține foarte multă informație de tip text, legăturile să apară subliniate sau să se utilizeze culori care să le evidențieze. Este total contraindicat să subliniem un text, dacă acesta nu constituie o legătură. Nu trebuie să ne bazăm pe faptul că utilizatorul va ghici unde este legătura. Trebuie să oferim legături în interiorul paginilor web care constituie site-ul pentru a face navigarea mult mai ușoară (deplasări de la un capitol la altul al unei lucrări, trimiteri către explicații aferente anumitor termeni)

În cazul în care structura paginii web și funcționalitatea site-ului permit, trebuie să furnizăm legăturile sub forma unei stive și nu trebuie să le dispunem în cuprinsul textului din pagină. Legăturile introduse în interiorul unui text pot reduce ritmul de parcurgere al informațiilor dintr-o pagină web, dar pot fi utile atunci când dorim să evidențiam anumiți termeni (termeni pentru care oferim explicații suplimentare).

Pe cât posibil trebuie făcută o diferențiere între legăturile interne (legături către pagini din cadrul site-ului) și legăturile externe (legături din alte site-uri). Dacă introducem o legătură externă, este indicat să introducem adresa completă în textul legăturii. Introducerea adresei complete este utilă atunci când dorim să-i indicăm utilizatorului că executarea unui click pe legătură va avea ca efect deplasarea la un nou site (accesarea unui nou site). Atunci când legătura are ca efect deschiderea unui document cu dimensiuni mari în KB, trebuie să indicăm între paranteze mărimea să tipul fișierului pentru informarea corectă a utilizatorului. Trebuie să ne asigurăm că utilizatorul va putea ști ce legături a vizitat.

Harta site-ului

Harta site-ului (site map) reprezintă de fapt o pagină web care conține o structură ierarhică a legăturilor către toate paginile web relevante ale site-ului. Trebuie să introducem o legătură către această hartă în fiecare pagină web din care este construit site-ul.

2.4.5. Structura ierarhică a informației

Structura se referă în general la modul de realizare a site-ului (ierarhia și simplitatea acestuia), precum și la structura paginilor web componente ale site-ului. O structură generală bine gândită face ca informația să fie mai ușor de găsit și înțeles.

Este indicat că, înainte de ase crea paginile web componente ale site-ului, să se realizeze strcuctura site-ului (organizarea ierarhică a site-ului).

Structura unei pagini depinde în mare măsură de conținutul ei, dar există câteva reguli generale care se aplică oricărei pagini web, ca de exemplu dispunerea informației de maximă importanță în partea superioară a paginii web.

Structura site-ului

Logica, simplitatea și funcționalitatea sunt esențiale în realizarea unui site atât pentru persoana care crează site-ul cât și pentru persoană care-l accesează. Cele trei caracteristici enumerate anterior permit editarea și /sau modificarea ușoară a site-ului, precum și navigarea simplă prin interiorul site-ului.

Dacă structura de bază este logică, atunci și navigarea prin site va fi logică pentru utilizator. Structura unui site trebuie să fie ierarhizată, permițându-i utilizatorului să obțină informații din ce în ce mai detaliate pe măsură ce navighează. Ideal ar fi ca utilizatorul să poată accesa oricare nivel al site-ului din orice pagină web componentă a site-ului.

Structura unui site trebuie să conțină următoarele:

Pagină web de start sau pagina principală (Home Page) localizată în directorul rădăcină.

Subdirectoarele care conțin la rândul lor o pagină de start. De obicei aceste subdirectoare sunt utile atunci când site-ul reprezintă o colecție de site-uri.

Subdirectoare specifice fiecărei categorii de informații din cadrul site-ului. În aceste subdirectoare se vor afla paginile Web necesare afișării informației.

Dacă site-ul este unul de dimensiuni reduse, va exista un director care va conține imaginile, dacă este vorba despre un site complex, atunci în fiecare director specific unui anumit tip de informație vă exista un subdirector care va conține imaginile utilizate.

În cazul unui site simplu, în directorul rădăcină se va afla fișierul cu extensia „*.css”, fișier care va conține definițiile stilurilor utilizate. Dacă site-ul este unul complex, caz în care se poate întâmpla să fie utilizate mai multe fișiere cu definiții pentru stiluri este indicat să existe un director unde vor fi stocate aceste fișiere. Numele acestui director poate fi „styles” sau „stiluri”.

Pașii ce trebuie urmați pentru a realiza structura unui site

Trebuie să divizăm informația ce urmează a fi conținută de către site în secțiuni logice. Aceste secțiuni vor construi directoarele site-ului.

Trebuie să creem directoarele pentru imagini și stiluri. 17

Trebuie să realizăm pagina de start pentru site și să salvăm fișierul sub numele “index.html” sau “index.htm”. În cazul unui site complex, trebuie să creem paginile de start pentru fiecare subdirector în parte. De asemenea dacă site-ul conține secțiuni cu informații care vor fi utilizate independent de pagina de start, atunci pentru fiecare secțiune în parte se va crea un director în care se va crea și se va salva un fișier tip pagină de start.

Trebuie să creem paginile Web specifice fiecărei secțiuni logice în parte.

În cazul în care este necesar, trebuie să creem atâtea directoare câte sunt necesare pentru că informația să fie structurată cât mai logic

Structura unei pagini Web

Există o multitudine de stiluri (formate) pentru structura unei pagini web, multitudine generată de fapt de conținutul paginii web. Selectarea unei structuri optime devine mult mai simplă odată cu acumularea experienȚei în realizarea și optimizarea paginilor web.

Structura unei pagini web poate fi grupată în patru elemente (componente) principale:

pagina de start diferită față de paginile Web componente ale site-ului;

antetul unei pagini Web;

meniul de navigare;

conținutul paginii Web.

Citirea unei pagini Web se face începând din colțul din stânga-sus al paginii și de la stânga la dreaptă coborând în zig-zag către colțul di dreapta-jos al paginii. Deși meniul de navigare constituie o facilitate de maximă importanță, acesta nu trebuie să ocupe prea mult spațiu din pagină Web.

Informația importantă trebuie plasată în zona superioară a paginii pentru a putea fi vizualizată fără a se utiliza bara de derulare verticală. Pagină web ar trebui să înceapă cu concluzia și să fie dezvoltat în continuare subiectul tratat. În cazul în care informația importantă este plasată la sfârșitul paginii, iar pagina va fi afișata pe mai multe ecrane, există posibilitatea ca utilizatorul să renunțe la căutarea informației. Prin structura sa, pagină web trebuie să trezească interesul utilizatorului, iar acesta trebuie să utilizeze bara verticală de derulare pentru a parcurge informația. În pagina de start, nu este indicat să obligăm utilizatorul să folosească bara de derulare verticală.

Pagina de start

Aspectul acestei pagini trebuie să fie diferit de cel al paginilor componente ale site-ului. Totuși această diferență nu trebuie să fie totală. Această pagină nu va avea inclus un buton de reîntoarcere la ea însăși.

Pagina de start trebuie să conțină scopul acesteia, astfel încât utilizatorul să știe unde se află și ce conține acest site. În pagina de start trebuie scoase în evidență noutățile apărute în cadrul siteului.

Pagina de start trebuie să conțină meniul de navigare care să-i permită utilizatorului să acceseze informațiile existente.

Antetul unei pagini Web

Antetul unei pagini este indicat să conțină următoarele:

sigla firmei sau numele site-ului dispus în partea superioară a paginii, în stânga;

indicatorul poziției curente a utilizatorului care îi permite acestuia să se reîntoarcă la

paginile anterioare;

legătura care să permită utilizatorului să se reîntoarcă la pagina de start.

Meniul de navigare sau panoul de navigare

Acesta trebuie să permită o deplasare logică spre celelalte pagini componente ale site-ului. Pentru acest meniu se pot utiliza imagini sau text combinat cu tabele. Culorile utilizate pentru meniul de navigare trebuie să fie cât mai sugestive și să sublinieze scopul acestui site.

Meniul de navigare trebuie să ocupe cât mai puțin spațiu și nu este indicat să conțină opțiuni (legături) fără importanță.

Accesabilitatea unui site Web

Conținutul unei pagini trebuie să fie concis și logic. Cuvintele importante trebuie evidențiate. Accesibilitatea site-ului îi va facepe vizitatorii acestuia să se reîntoarcă la el de câte ori vor avea ocazia. Pentru că accesibilitatea unui site să crească trebuie avute în vedere următoarele chestiuni:

testarea site-ului în principalele navigatoare, precum și în diferite versiuni ale acestora;

se verifică dacă site-ul funcționează corect fără a trebui descărcate anumite componente;

se utilizează foile de stil în cascadă pentru a delimita conținutul paginii web de prezentarea acestuia;

se testează site-ul în diferite stadii de realizare pentru a vedea dacă acesta funcționează

corect, se testează în diferite sisteme de operare;

diferențierea dintre secțiunile de informații nu trebuie făcută numai prin intermediul culorilor.

2.4.6. Contactul cu utilizatorii

Un website poate conține sau nu link-uri către compania de webdesign sau către webmaster, dar este obligatorie prezența unor link-uri către beneficiarul site-ul, către cel care are responsabilitatea administrării lui. Păstrarea legăturii cu utilizatorii este vitală pentru succesul pe termen lung, de aceea pagina de contact este obligatorie.

Unele site-uri își încurajează vizitatorii să-și noteze impresiile în cărțile de oaspeți (guestbooks). În general acestea permit oricărui utilizator răsfoirea impresiilor altor vizitatori. Alte site-uri, în general cele de blog sau news, permit adăugarea de comentarii. Pentru că aceste facilitați să nu se întoarcă împotriva noastră (prin adăugarea de comentarii denigratoare, batjocoritoare sau de înjurături) este recomandat să se facă moderarea lor. Administratorul site-ului trebuie să examineze regulat conținutul unei asemenea liste și să poată permite publicarea sau ștergerea mesajelor.

2.5. Etapele dezvoltării unui site

Proiectarea unui sit Web reprezintă un caz particular de proiectare a unei interfețe cu utilizatorul. Grijă deosebită acordată proiectării interfeței cu utilizatorul, indiferent de tipul aplicației software dezvoltate, se datorează faptului că utilizatorul final percepe complexitatea și utilitatea aplicației exclusiv prin intermediul interfețelor. Realizarea unei interfețe deplin funcționale, ergonomice, productive și agreabile este o activitate complexă și dificilă, care necesita combinarea mai multor tehnologii și conlucrarea unor echipe diverse de profesioniști (graficieni, programatori, experți în relații cu publicul și chiar utilizatorul final).

Procesul dezvoltării unei interfețe constituie un proces iterativ, compus din mai multe faze, fiecare dintre acestea putându-se repeta în vederea rafinării interfeței până când aceasta se conformează cerințelor. Este un proces care, în literatura de specialitate, se numește ciclul de viață al aplicației – software life cycle.

Procesul dezvoltării interfeței poate cuprinde următoarele etape:

Identificarea și înțelegerea nevoilor utilizatorilor finali;

Analiza activităților și a contextului interacțiunilor dintre om și mașina;

Prototipizarea interfeței;

Evaluarea interfeței;

Programarea interfeței;

Reiterarea etapelor precedente.

Stabilirea scopului site-ului



Pentru a putea identifica nevoile utilizatorilor este nevoie, în primul rând, de stabilirea cu precizie ascopului sitului web. Este necesar să stabilim de la bun început un set de obiective ce vor fi atinse prin dezvoltarea sitului, formulând apoi, într-o frază clară și coerentă, scopul sitului pe care îl dezvoltăm.

Scopul identificat trebuie să conțină elemente ce denotă eficientizarea activității organizației sau firmei pentru care dezvoltăm aplicația. Scopul trebuie enunțat astfel încât succesul respectivului sit să poată fi evaluat și cuantificat în termeni calitativi și cantitativi.

Un prim pas în stabilirea scopului sitului poate fi făcut printr-o bună cunoaștere a tipului de vizitator căruia ne adresăm, adică a audientei sitului. Structurarea sitului și stabilirea designului acestuia se face în concordanță cu nevoile și așteptările potențialilor vizitatori. Nu trebuie să pierdem din vedere și gradul de instruire în domeniul IT al vizitatorilor, astfel încât să putem furniza o interfață utilizabila în egală măsură atât de către novici cât și de către utilizatorii experimentați. Din punct de vedere al experentei și interesului manifestat de vizitatori, putem identifica trei categorii de utilizatori:

Utilizatorii novici și cei ocazionali. Acești utilizatori vor fi atrași de structura clară a sitului și de navigarea facilă în cadrul structurii informaționale furnizate. Pagina de primire trebuie să fie organizată judicios, să aibă un design atractiv și să ofere de la primă privire o imagine generală privind informația ce poate fi găsită aici. Studii efectuate de specialiști releva faptul că mai puțin de 10% din cititorii unei pagini Web derulează documentul pentru a vedea partea inferioară a paginii.

Utilizatorii frecvenți și experții. Această categorie de utilizatori apreciază, în primul rând, accesul rapid și acuratețea informațiilor obținute. Utilizatorii experți nu au răbdare să utilizeze meniuri grefice complicate, care se încarcă relativ greu; sunt apreciate meniurile text, care permit accesul rapid la informația dorită.

Utililizatorii internaționali și utilizatorii cu dizabilități. Dacă situl nostru se adresează unei largi categorii de vizitatori, care ar putea cuprinde și utilizatori din alte țări, atunci trebuie să furnizăm în cadrul interfeței facilități pentru aceștia: traduceri în limbile de largă circulație internațională pentru informațiile cele mai importante, atenție sporită la conventile locale privitoare la data, timp și unități de măsură.

Pentru utilizatorii cu dizabilități (persoane nevăzătoare, hipoacuzici etc) trebuie să furnizăm facilități de accesibilizare a site-ului, cum ar fi: posibilitatea schimbării dimensiunii fontului, atașarea de texte explicative elementelor grafice, realizarea de scurtături pentru accesul la elementele importante, variante text only pentru paginile principale etc.

Stabilirea cerințelor

Proiectarea sitului nu poate fi realizată fără un dialog eficient intre echipa de dezvoltatori și beneficiarul proiectului. Cerințele vor fi discutate în amănunțime cu beneficiarul, ajungându-se la un acord în privința unor aspecte generale și/sau particulare ale sitului respectiv. În general, cerințele pot fi împărțite în trei categorii:

Cerințe absolut necesare, care sunt obligatoriu de implementat. Aceste cerințe se referă la funcționalitățile indispensabile pentru acel site. Cerințe opționale. Această categorie cuprinde cerințele care vor fi incluse după prima evaluare a sitului, realizată după implementarea facilităților de bază. Oportunitatea implementării cerințelor opționale va fi stabilită după această primă evaluare, pe criterii de funcționalitate, necesitate și după criterii economice.

Cerințe ce pot fi/vor fi implementate ulterior. Această categorie cuprinde cerințele ce vor fi implementate, cel mai probabil, într-o versiune ulterioară a apolicatiei, mai ales dacă necesitatea acestora vă fi probata în practică, după lansarea sitului.

Echipa de dezvoltatori ți beneficiarul pot decide, printre altele, în privința următoarelor cerințe:

Platforma tinta – echipamentele hardware, sistemul de operare, serverul/clientul –Web

Limbajele de programare autilizate și sistemul de gestiune a bazelor de date folosit, dacă este cazul

Nivelul programării Web: la nivel de client, la nivel de server sau mixt

Cerințele de securitate, vizând categoriile de utilizatori și nivelele drepturilor de acces la aplicație

Designul general

Audiență și specificul conținutului

Frecvența de actualizare a conținutului

Cerințe speciale privind utilizatorii internaționali și a celor cu dizabilități

Cerințe privitoare la administrarea ulterioară a sitului

Aspecte generale ale proiectării interfeței Web

Interacțiunea dintre vizitator și interfața Web se realizează mult diferit față de interacțiunea dintre cititor și clasicul material tipărit. Interfața grafică a unui sistem software include metafore de interacțiune, imagini și concepte utilizate pentru a exprima funcționalitate și semantica într-un mod vizual.

Caracteristicile componentelor interfeței și interacțiunea acestora cu vizitatorul contribuie la crearea unei identități proprii a sitului, a unei unități în aspect, design și funcționalitate.

În continuare vom prezenta acele aspecte de care proiectantul interfeței Web trebuie să țină cont.

Tipul designului

Conceptele de bază ale publicațiilor Web, atât în ceea ce privește ierarhizarea informației cât și a aspectului general, sunt preluate din modul de organizare a tipăriturilor clasice, cuprinse în ghidurile de tehnoredactare computerizată.

Chiar dacă designul documentului Web evoluează, prin înglobarea diverselor tipuri de medii purtătoare de informație(imagine, video, aplicații Java), majoritatea documentelor se vor conforma organizării clasice ale unei tipărituri: ierarhizarea informației în capitole, subcapitole și secțiuni, indexarea, notele de subsol, cuprinsul, trimiterile bibliografice.

Designerul Web va trebui să ia o decizie în privința designului general folosit, dar majoritatea acestora optează pentru o variantă mixtă, combinând metafora cărții tipărite cu tehnologiile multimedia.

Cine, ce, când, unde…

Spațiul WWW este atât de vast încât un vizitator se poate “pierde” ușor atât în spațiu cât și în timp.

Este foarte important, mai ales pentru credibilitatea informației furnizate de site, să precizăm fără echivoc natura informațiilor oferite (ce?), sursa informațiilor (cine?), dată când am postat informația (când?) și locatizarea spațială a documentului (unde?).

Designul de bază al site-ului

Procesul de proiectare al interfeței Web trebuie să aibă ca punct central utilizatorul, cu nevoile și așteptările sale. Proiectantul trebuie să adapteze tehnologiile Web utilizate la așteptările utilizatorilor, la gradul lor de instruire. Informațiile privitoare la așteptările utilizatorilor potențiali se pot stabili fie prin sondaje, fie prin construirea apriori a unui tip de utilizator generic, realizând o estimare.

Designul de bază al sitului va fi stabilit în funcție de următoarele aspecte:

Navigarea prin sit

Contextul

Accesul direct și rapid

Asigurarea simplității să consistentei

Stabilitatea designului

Asigurarea accesibilității

Contactul cu utilizatorii

Un design bine conceput va furniza utilizatorilor posibilitatea navigării rapide în structura de documente a sitului. Utilizatorii trebuie să se poată întoarce întotdeauna la pagina de start și la oricare din punctele importante de navigare. Cuprinsul, meniurile bine structurate și hărțile ce descriu structura sitului dau utilizatorului siguranță că știu unde se afla în structura hipertext. Elementele de navigare trebuie să aibă o zonă fixa în cadrul oricărei pagini a sitului, să aibă aceeași structură și aspect identic.

Orice interfață Web trebuie să țină cont de context, astfel încât utilizatorul să fie conștient de poziția sa în cadrul structurii informaționale a sitului. Accesând o hiperlegătură, vizitatorul nu poate fi niciodată sigur că destinația către care este condus este cea așteptată sau că va găsi o informație cu același grad de relevanță cu informația sursa a legăturii. Pentru a realiza un context consistent, proiectantul sitului Web trebuie să ierarhizeze informația în funcție de relevanță acesteia: structura liniara pentru informația cu același grad de relevanță, hiperlegături către informațiile subordonate, către cuprins, glosare de termeni sau indexuri de noțiuni. Utilizatorul va trebui să aibă permanent la dispoziție elementele de navigare care să-i permită parcurgerea materialului în ordinea prestabilită.

Accesul direct și rapid la informație este un aspect de care trebuie să ținem cont pentru a atrage utilizatorii experți și utilizatorii care să devină vizitatori frecvenți. Pe lângă proiectarea atentă a meniurilor și listelor de opțiuni, va trebui să ținem cont și de viteză de încărcare a paginilor sitului, realizând un compromis între paginile cu elemente multimedia și cele cu informații de tip text. Alegerea se va face și în funcție de calitățile serverului ce va găzdui situl Web: dacă situl se afla pe un server rapid sau este accesat preponderent din rețeaua locală a organizației, se va putea opta pentru elemente multimedia consistente.

Designul ales trebuie să fie simplu dar consistent, elementele de interacțiune cu utilizatorul fiind puține, alese potrivit cu scopul acestora și utilizate consecvent, în toate paginile sitului. O interfață consistenta este aceea care determină crearea unui traseu mental vizitatorului. Un set de reguli aplicate consecvent în toate paginile sitului dau caracterul de stabilitate interfeței proiectate. Stabilitatea funcțională a sitului trebuie să fie o preocupare constantă încă din etapa de proiectare, iar pe măsură ce implementarea avansează se vor face verificări asupra validității legăturilor și asupra conținutului paginilor indicate de legături. Stabilitatea unui sit se manifestă și prin menținerea unei bune funcționari de-a lungul existenței sale.

Accesibilitatea sitului se referă la capacitatea acestuia de a oferi servicii de calitate unei game largi de utilizatori. De exemplu, nu toți vizitatorii vor putea beneficia de bogăția multimedia oferită de sit, fie pentru că nu le permite conexiunea Internet, fie pentru că au dizabilități (nevăzători, eficienți de auz). Proiectantul trebuie să gândească interfața astfel încât și aceste categorii de utilizatori să aibă acces la informație.

Contactul cu utilizatorul trebuie să fie permanent, pentru a putea cunoaște dorințele și trebuințele acestora. La nivel minimal, interfața sitului trebuie să conțină, în fiecare pagină, o legătură către pagina ce conține datele de contact ale organizației ce deține situl și ale persoanei/departamentului care îl administrează. Multe situri permit utilizatorului să insereze comentarii și recomandări privind serviciile oferite de situl respectiv, eventual se realizează periodic, prin intermediul unui formular online, sondaje de opinie.

Concluzii

Etapă ce urmează proiectării și evaluării interfeței este cea de implementare a interfeței utilizând limbajele stabilite în etapa de analiză a cerințelor. Etapa de testare a interfeței poate determina reiterearea întregului proces de proiectare în vederea eliminării erorilor și a extinderii aplicației cu noi funcționalități.

Numărul interatiilor procesului de dezvoltare este dependent atât de calitatea proiectării și implementării, cât și de calitatea comunicării dintre executant și beneficiar și, bineînțeles, de bugetul alocat proiectului.

2.6. Crearea de conținut

Conținutul înseamnă cunoștiințe. Cu cât cunoștiințele și informațiile pe care le oferă un site sunt mai variate cu atât acesta va fi mai folositor și mai căutat de utilizatori.

Conținutul reprezintă relaționarea sau asocierea informațiilor, îi determină pe cititori să exploreze și să gândească și totodată reprezintă un instrument de orientare care îi ajută pe utilizatori să exploreze site-ul efectiv. Conținutul include imagini de ansamblu, descrieri, hărți, bibliografii, locații ale informațiilor, indexuri și glosării, realizări, obiective și misiuni, opinii, foarte des întrebări, critici etc.

Conținutul care se pune la dispoziția utilizatorilor este realizat în funcție de felul site-ului care se proiectează. De asemenea conținutul introdus depinde și de scopul site-ului. Nu tot ce se află în fișierele unei firme trebuie transmis pe Web, doar conținutul care-i ajută pe utilizatori să ia anumite decizii sau să se distreze ar trebui transmis. Conținutul trebuie să fie din abundență, dar trebuie să fie plin de înțeles.

Un site este mai mult decât o simplă reclamă a serviciilor sau a produselor unei firme. Dacă pagina va fi proiectată doar pentru publicitate va atrage puțini vizitatori, însă dacă oferă informații din toate sursele atunci numărul utilizatorilor care interacționează cu site-ul va crește.

Lucrurile pe care un bun conținut ar trebui să le includă sunt:

prezentarea firmei;

prezentarea obiectului de activitate;

explicarea motivului pentru care firma are acest obiect de activitate;

explicarea modului în care firma își exercită activitatea.

O firmă își poate crea propriul său conținut sau poate lucra cu parteneri (proiectanți de profesioniști), care sunt furnizori de conținut. Furnizorii de conținut pot oferi o privire obiectivă asupra produselor firmei și mai pot oferi și ultimele informații de marketing din punctul de vedere al consumatorilor. Foarte important este aceea că furnizorii de conținut pot menține calitatea și acuratețea informațiilor.

Conținut complet, media complet. Pentru a ne asigura că toate tipurile de conținut sunt disponibile pentru toate produsele, trebuie să ne asigurăm că sunt incluse elemente de sunet, mișcare, animație sau video. Utilizatorii vor dori să experimenteze în cât mai multe moduri posibile un site. Web-ul este un rai pentru experiența utilizatorilor și pentru multimedia. Ca proiectant, trebuie să îmbogățim cât mai mult posibil această experiență.

Cap 3. Implementarea tehnică

La nivel digital, imaginile sunt făcute fie în mod bitmap (raster, editare la nivel de pixeli), fie în mod parametric și vectorial. În editarea bitmap se manipulează în mod direct pixelii. Acest mod de lucru este folosit adesea în desenare digitală. În editarea vectorială și parametrică, fiecare element este dinamic și manipulabil în mod succesiv. Se folosesc obiecte de diferite tipuri, cu proprietăți și caracteristici variate.

3.1 Editarea parametrică a interfețelor

În design de interfețe sau în DTP3 se folosește în mod uzual editarea vectorială. În acest mod de editare liniile sunt spline-uri. Un spline este o funcție polinomială definită pe porțiuni, intervale. Utilizarea spline-urilor în design este facilă, deoarece pot fi definite linii sau curbe doar prin câteva puncte de control, care au ca parametrii tensiunea și modul de flexiune a curbei. Pentru orice tip de linie, chiar frântă sau ascuțită, acest mod de editare permite modificări ulterioare mult mai facil și mai frecvente. Pentru spline-uri se folosesc diferite funcții de interpolare a punctelor de control definite de designer. Imaginea alăturată ilustrează câteva tipuri de interpolări.

Figura 1:

Comparație între tipuri de interpolare:

bézier, cubic și liniar

În diverse aplicații precum Adobe Photoshop, interfețele sunt realizate printr-o combinatie de editare bitmap cu editare parametrică și vectorială. Obiectele, adică elementele vizuale în aplicație, pot fi bitmap sau vectoriale. Formele pot fi definite în ambele moduri. Când un designer dorește să se asigure că unele elemente își vor păstra calitatea vizuală și nu vor deveni pixelizate, încețoșate, în urma aplicării repetate de transformări (red-mensionare, rotire), folosește forme vectoriale obținute din spline-uri. Se poate aplica o gamă foarte variată de efecte dinamice (parametrice) și non-dinamice (aplicate în mod bitmap) asupra diverselor obiectelor. Dintre efectele dinamice amintim: umbră, contur, transparență, bizotare, estampare, halo, etc. Modul de lucru într-o astfel de aplicație software este bazandu-se pe conceptul de straturi. Fiecare obiect este un strat, iar ordinea lor în listă corespunde cu adâncimea lor (z-index, imaginea alăturată ilustrează acest mod de lucru), având și posibilitatea de a le grupa. Designerul are la dispoziție o varietate de unelte pentru a crea tipuri diferite de obiecte: forme și linii de tip bitmap sau vectorial, contururi, texte, etc. Și unelte de manipulare: redimensionare, rotire, repo-ziționare, selecție, etc.

Figura 2:

Ordinea straturilor reflectă adâncimea elementelor

În principal, un designer creează o imagine statică a site-ului, așa cum dorește să arate. Această imagine statică in general include mai multe amănunte despre site: de-sign (layout, așezarea elementelor, aliniere, proporții), culori, tipografie (fonturi, texte și conținut Lorem ipsum pentru a ilustra mai bine cum arată site-ul). Într-un design bine făcut sunt prevăzute diferite funcționalități, modul de interacțiune și instanțe diferite ale site-ului (de ex. anumite pagini). La final, când interfața este acceptată de client, se trece la implementarea tehnică a acesteia.

Implementarea tehnică a unui design de interfață constă, în prima fază, în tranșarea imaginii în bucăți, în fișiere de tip imagine care conțin diferite elemente din design: butoane, antet, subsol, etc. Toate obiectele parametrice, vectoriale și efectele dinamice sunt transformate în imagini bitmap, pixelizate, și sunt salvate în formate specifice pe web: JPEG sau PNG. JPEG (Joint Photographic Experts Group) este un format care comprimă imaginea folosind algoritmi care degradează calitatea vizuală a imaginilor alterând pixelii. PNG (Portable Network Graphics) este un format care nu utilizează acest tip de algo-ritmi. Compresia în formatul PNG nu este la fel de eficientă, însă se păstrează imaginile integre, nealterate. Mai mult, formatul PNG are suport pentru RGBA, transparențe. Când o interfață este tranșată, adesea elementele vizuale au fie umbre, fie sunt forme organice și este necesară utilizarea formatului PNG pentru a menține transparența. În mod obișnuit, imaginile de tip poză sunt în format JPEG pe web, deoarece necesită o lățime de bandă mai redusă. Pentru elementele din designul interfeței, formatul PNG este de preferat.

3.2 HTML

Întregul proces de tranșare a interfeței trebuie să fie efectuat luându-se în calcul modul în care va fi implementat designul în HTML și CSS. Programatorul de HTML și CSS decide ce structură va avea HTML-ul, iar în funcție de asta tranșează interfața. Structura HTML este influențată în mod direct de layout-ul designului și de competențele programatorului. Implementarea tehnică poate fi și percepută ca o transformare a unei imagini statice într-o aplicație interactivă.

HTML (HyperText Markup Language) este descries ca fiind un limbaj standard de marcaj pentru pagini web și stă la baza oricărui site. În HTML programatorul definește o structură ierarhică de tag-uri (etichete) în perechi de forma: <body> </body>, <div> </div>,<h1> </h1>, <p> </p>, etc. Se poate observa că fiecare tag este deschis sub forma <exemplu> și închis sub forma </exemplu>. Fiecare tag poate avea atribute care se definesc sub forma: <tag atribut="valoare">conținut</tag>. Teoretic se pot folosi orice tag-uri, însă în standardele web HTML 1, 2, 3 și 5 (ultima versiune) sunt definite clar ce tag-uri sunt permise, ce atribute pot avea și cum trebuie afișate și interpretate semantic de navigatoarele web. Există o multitudine de tag-uri și atribute care ajută la definirea structurii documentelor. HTML permite răspândirea de conținut pe web cu structură semantică, deoarece fiecare tag are o valoare semantică. Actualmente se tinde spre un web semantic. Într-o pagină HTML pot fi integrate obiecte externe, imagini, JavaScript-uri pentru interactivitate, CSS-uri pentru stilare și pot fi făcute formulare.

Exemplul următor ilustrează structura unui HTML și cum se poate defini o structură semantică pentru articole.

1. <!doctype html>

2. <html>

3. <head>

4. <title>HTML este un limbaj simplu</title>

5. <link rel="stylesheet" href="/stilare.css" type="text/css" media="all"/>

6. </head>

7. <body>

8. <h1>Titlul capitolului</h1>

9. <p>Exemplu de pagină web.</p>

10. <p>Conțínut</p>

11. <h2 lang=”en”>This is a subchapter</h2>

12. <p>Acest capitol este scris <em>în engleză</em>.</p>

13. <ul>

14. <li>O listă ordonată sau neordonată</li>

15. <li>Poate fi definită foarte ușor.</li>

16. </ul>

17. </body>

18. </html>

Prima linie a codului este inițializarea modului de afișare specific fiecărei versiuni de HTML – doctype. Tag-ul <html> este punctul de pornire a structurii paginii. În tag-ul <head> pot fi definite meta-date care descriu pagina sau site-ul: autorul, titlul paginii, referințe la fișiere sau elemente externe (CSS-uri, JS-uri), etc. Atributele rel și href determină ce tip de referință și ce fișier extern este integrat în pagină. În acest caz, a fost inclus un fișier CSS pentru stilarea paginii. În <body> apare conținutul propriu-zis al paginii pe care navigatorul web o afișează pe ecran: <h1> definește un titlu de nivelul întâi, iar <h2> este de nivelul doi. Pentru <h2> s-a folosit atributul lang pentru a preciza în ce limbă este scris. Tag-ul <p> reprezintă un paragraf, iar <em> este pentru a emfaza ce s-a spus. În final, tag-urile <ol> sau <ul> sunt folosite pentru a defini liste ordonate, respectiv neordonate. Pentru a delimita elementele listei se folosește tag-ul <li> în ambele cazuri.

Exemplul de HTML de mai sus este foarte ușor de înțeles și de prezentat. La nivel de site, este necesar ca programatorul să facă o distincție foarte clară între conținut și prezentare. În HTML nu se definește nimic despre cum arată pagina web pe ecran. Navigatoarele au setări implicite, definite în standard, cum trebuie afișate tag-urile. Însă, pentru a realiza un design, pentru a stila conținutul se folosește CSS (Cascading Style Sheets). CSS este un limbaj folosit pentru stilare și formatare a elementelor semantice dintr-un limbaj de marcaj, precum (X)HTML sau orice tip de fișier XML. Separarea conținutului de prezentare, permite programatorilor web să folosească același fișier CSS pe toate paginile dintr-un site și să ofere moduri diferite de prezentare a site-ului, a con-ținutului în funcție de rezoluția ecranului sau dispozitiv. Prin utilizarea corectă a CSS-ului se asigură o accesibilitate mai mare a site-ului, deoarece pot fi făcute design-uri specifice pentru platforme diferite. Mai mult decât atât, orice utilizator pe Internet poate dezactiva stilurile CSS în funcție de necesitățile sale. Programe de citit în Braille sau de sintetizare vocală pot fi folosite mult mai ușor pe astfel de site-uri. Ambele standarde, CSS și HTML, au fost create și sunt menținute de W3C (World Wide Web Con-sortium).

3.3 Selectori CSS

Un CSS este foarte ușor de scris și de citit de cunoscătorii de limba engleză. Programatorul definește blocuri de reguli de prezentare și stilare delimitate de acolade {}. Într-un bloc de reguli se definesc declarații CSS delimitate cu semnul ; (punct și virgulă). Proprietățile CSS sunt cuvinte în engleză ce trebuie urmate de o valoare: proprietate: valoare;. O declarație CSS este perechea formată dintr-o proprietate și o valoare. Fiecare bloc de reguli începe cu un selector sau mai multe selectoare separate de virgulă: selector1, selector2, selector3 {proprietate: valoare;}. Exemple de proprietăți și valori: font-size: 10px; position: absolute; margin: 15px, etc.

În CSS fiecare element din limbajul de marcaj este considerat o cutie, un ”box model”. Orice tag din HTML este afișat în modelul de cutie. Modelul de cutie în CSS este constituit din margine, bordură, umplutură (padding) și conținu-tul propriu-zis. Aceste proprietăți de stilare a cutiei în CSS sunt pentru ajustarea spațiului între ele-mentele din limbajul de marcaj. Marginea repre-zintă spațiul exterior față de element și nu are cu-loare, este transparent. Bordura poate fi stilată în mai multe moduri: linie continuă, punctată, în cu-lori, etc. Umplutura este un spațiu între bordură și conținutul propriu-zis care preia culoarea sau fundalul stabilit pentru element, nu poate avea o culoare specific setată. Când mai multe elemente se află unul lângă altul, mar-ginile lor se contopesc. În implementarea unei interfețe aceste proprietăți sunt indispen-sabile pentru layout și nu se poate obține o interfață avansată fără manipularea acestora.

Figura 3: CSS Box Model

Selectoarele sunt expresii care determină asupra căror elemente (atribute sau tag-uri) din limbajul de marcaj (de ex. HTML) sunt aplicate proprietățile de stilare CSS. Selectoarele sunt clasificate în funcție de tipul de elemente: universal, element, clasă, id și atribut.

Un selector de elemente aplică regulile de stilare pe toate elementele de un anumit fel ce se găsesc în document, de exemplu tag-urile <p> sau <h3> succedate de blocul de reguli {proprietăți: valori;}.

Selectorul de tip atribute aplică proprietățile CSS în funcție de atributele elemen-telor. Acesta este de forma [atribut=”valoare”] {proprietăți: valori;}, opțional poate fi precedat de un alt element, de orice tip, pentru a preciza mai specific unde se găsește atributul și nu este imperativ să se specifice valoarea: selector [atribut] {proprietăți: valori;}.

Pentru implementarea tehnică a unei interfețe întotdeauna este necesară stilarea unor anumite tag-uri sau a unor seturi de tag-uri cu proprietăți CSS comune. Fiecare tag HTML poate avea atributul id=”nume-de-identificare” sau class=”o-categorie-de- elemente”. Se pot marca mai multe tag-uri de același tip sau tipuri diferite folosindu-se atributul class pentru a permite ulterior stilarea acestora în CSS utilizând selectoare de tip clasă, având forma .nume-clasă; numele clasei este precedat de un punct. Atributul id trebuie să aibă o valoare unică pentru fiecare tag marcat în acest mod. Selectorul pentru id-uri este precedat de semnul # (diez). Cele două tipuri de selectoare sunt foarte des utilizate în implementarea de interfețe. În general, pentru a realiza o interfață de site se folosește tag-ul <div> foarte des, cu diferite id-uri, pentru a facilita procesul de sti-lare și de design. Acest tag nu are nici o valoare semantică, însă este utilizat pentru a structura arborele logic al documentului astfel încât să permită implementarea tehnică a designului.

Selectorul universal precedat de semnul * (asterisk). Acesta este implicit pentru selectoarele de tipul: *.nume-clasă, *[atribut], etc. Însă, dacă semnul * este utilizat pentru înlănțuirea de elemente într-un selector, atunci elementul secundar specificat trebuie să fie absolut un descendent oarecare. Asta înseamnă că dacă există elemente secundare în relație de descendență directă față de primul element specificat din selec-tor, acestea sunt excluse și nu vor fi stilate.

Pentru a specifica relația la nivel ierarhic între elementele unui selector, există mai multe moduri de înlănțuire a acestora: descendență oarecare, descendență directă, adia-cență și generală. Relația între elementele unui selector este stabilită prin caracterul fo-losit între acestea.

Relațiile de tip descendență oarecare și descendență directă pot fi explicate utili-zând două selectoare de elemente ca exemplu pentru aceste moduri de înlănțuire: p span, li > em {proprietăți: valori;}. În acest exemplu, selectoarele vor aplica stilarea pe tag-urile <span> și <em> aflate ierarhic în tag-ul <p> și respectiv <li>. Diferența între cei doi selectori este importantă: în primul caz nu contează adâncimea ierarhică a tag-ului <span>, însă pentru al doilea selector, tag-ul <em> trebuie să fie descendent direct ierarhic în <li> pentru a fi găsit; dacă se află mai adânc, nu va mai avea proprie-tățile de stilare aplicate. Se poate înțelege cu ușurință că dacă se folosește un spațiu între elemente, nu contează adâncimea elementului secundar la nivel ierarhic, dar dacă se utilizează semnul > între ele, elementul secundar trebuie să fie descendent direct.

Elementele în selector pot fi înlănțuite și cu semnul + sau ~ (tilda). Pentru a se-lecta un element adiacent celuilalt, la nivel ierarhic, se folosește + între acestea. Dacă se dorește stilarea a unor elemente ce succed elementul specificat, se utilizează semnul ~ (tilda).

În CSS se pot folosi mai multe tipuri de elemente într-un singur selector și pot fi înlănțuite în diferite moduri. De exemplu: #antet ol > li .subliniate [lang=’fr’] {proprietăți: valori;}. În acest exemplu, proprietățile CSS sunt aplicate doar pe elemen-tele din HTML ce au atributele class=”subliniate” și lang=”fr”. Însă, construcția selec-torului impune mai multe criterii pentru a fi stilate. Prima condiție: elementele trebuie să se afle într-un element cu id=”antet”. Mai mult, indiferent cât de adânc în ierarhie, față de #antet, trebuie să se găsească o listă ordonată, <ol>, în care elementul <li> este obligatoriu descendent direct. Asta înseamnă că dacă lista ordonată este de mai multe nivele și se găsesc mai adânc în ierarhie alte elemente din clasa „subliniate” și au atributul lang=”fr”, nu vor fi stilate.

3.4 At-rules în CSS

At-rules în CSS sunt instrucțiuni și directive din antetul unui fișier CSS care permit programatorului să importe fonturi (@font-face) sau alte CSS-uri (@import), să specifice ce CSS trebuie utilizat în funcție de dispozitivul de afișare (@media), etc.

Un designer de interfață de site poate folosi orice font sau față tipografică dorește. În domeniul informatic au fost dezvoltate formate de fișiere specifice pentru fonturi sau fețe tipografice. Fețele tipografice sunt instalate în sistemul de operare, iar navigatorul le folosește pentru a afișa textele de pe site-urile web, în funcție de fonturile utilizate în design. Însă, designerul poate alege să includă în site fonturi care nu au o răspândire lar-gă. De obicei, la nivel de sistem de operare, pe Windows, fonturile sunt în format .TTF (TrueType Font). Au fost dezvoltate formate deschise de fonturi și fețe tipografice care pot fi incluse de designeri pe web, iar unii tipografi pun la dispoziție fonturi cu licențe ce permit redistribuirea lor. OpenType Font Format (.OTF) este predecesorul formatului .TTF și include suportul pentru multe caracteristici noi specifice tipografiei. Funcționalitatea standardizată în CSS 3 (@font-face rule) ce permite includerea de fonturi în site-uri este implementată de toate navigatoarele moderne.

3.5 Specificitatea regulilor CSS

O altă particularitate a CSS este specificitatea regulilor de stilare. De multe ori, când o interfață de site este complexă, sunt situații în care unele reguli de stilare CSS nu se aplică pe elementele din HTML, chiar dacă, aparent ar trebui. În standardul CSS a fost definită o ierarhie a specificității pentru tipurile de selectoare, elemente și modurile de înlănțuire. În general, dacă pe un element din HTML se aplică două selectoare, pro-prietățile CSS din selectorul cu specificitate mai mare prevalează. În caz că ambele selectoare au același nivel de specificitate, atunci prevalează cel ce apare ulterior în fi-șierul CSS. Selectoarele pentru elemente cu id, au o specificitate mai mare decât selec-toarele pentru atribute sau clase. Selectorul universal are specificitatea zero, minimă.

În CSS unele proprietăți sunt moștenite de elementele descendente ierarhic. A priori, nu toate elementele moștenesc de la părinți orice proprietate CSS. În standard sunt definite regulile de moștenire. De exemplu: #antet {color: red; background: wheat}. Proprietatea color va fi moștenită de toate elementele de marcaj descendente, însă background nu. În unele cazuri, se poate specifica anume dacă se dorește moște-nirea unei anumite proprietăți. În acest caz, dacă dorim un anumit tag descendent să moștenească valoarea pentru background, se utilizează background: inherit.

În standardul W3C pentru CSS sunt definite reguli pentru calcularea specificității unui selector, relativ simplu. Specificitatea este un număr format prin alăturarea a trei variabile: a, b și c. Se numără selectoarele de tip ID – variabila a. Pentru b, trebuie nu-mărate selectoarele de clase, de pseudo-clase și atribute. Iar pentru variabila c, numărul total de selectoare de elemente și pseudo-elemente.

3.6 Limitări în implementarea interfețelor

CSS este un limbaj mai mult pentru stilare, nu atât de mult pentru design de lay-out-uri. De aceea devine mult mai complicat un design de interfață fluidă. Poziționarea elementelor pe verticală este considerabil mai grea, decât pe orizontală. Lipsa suportului pentru expresii matematice la nivelul declarațiilor CSS este adesea evidentă, de exem-plu: #pătrat {width: 50% – 10px}. Expresiile matematice ar permite realizarea de coloa-ne într-un mod mai facil și layout-uri mai dinamice. Grupul de lucru de la W3C lucrează deja la implementarea suportului pentru expresii matematice.

După cum s-a putut observa, în CSS, la ora actuală, nu există nici un mod de a avea selectoare pentru elemente aflate în relație de ascendență. Mai precis, nu există posibilitatea de a aplica proprietăți CSS pe părintele unui element, la nivel ierarhic, în funcție de anumite criterii.

De altfel, un designer de interfață obișnuit cu aplicații ca Adobe Photoshop, este adeseori constrâns la un număr redus de efecte vizuale. În CSS nu există posibilitatea de a aplica în mod dinamic diferite tipuri de efecte pentru încețoșarea elementelor din HTML, reflexii calculate în timp real, bizotare sau estampare. În Photoshop fiecare strat / obiect poate fi suprapus folosind diferite moduri de supraimpunere / fuziune. În CSS nu pot fi folosite moduri de supraimpunere a elementelor vizuale. Așadar, un designer trebuie să evite astfel de efecte în design, dacă nu pot fi transformate în imagini de tip bitmap. În SVG și Canvas, standarde web noi definite de W3C care încep să fie implementate tot mai bine de navigatoarele moderne. Acest fapt permite utilizarea unui set mai larg de efecte care pot fi obținute cu Adobe Photoshop.

3.7 Proprietăți CSS

Anumite proprietăți din aplicația de design folosită pentru realizarea interfeței pot fi reproduse la nivel tehnic, în site, cu ajutorul CSS: umbre și halouri (box-shadow, text-shadow), colțuri rotunjite (box-radius), transparențe (opacity sau culori RGBA), degradeuri (linear-gradient), etc. Proprietățile menționate sunt nou introduse în CSS 3 și sunt în curs de implementare în navigatoarele moderne. La nivel tipografic, CSS oferă proprietățile necesare de a obține aceeași stilare a textelor ca în aplicațiile de design, cu un nivel de acuratețe remarcabil: line-height, letter-spacing, text-indent, font-size, font-family, etc.

În CSS culorile pot fi definite în RGB și HEX sub forma: #ff00aa (fiecare pereche de caractere reprezintă r, g, respectiv b). În CSS 3 se pot utiliza formatele HSL, RGBA și HSLA (A pentru alpha – transparență) pentru culori.

Proprietatea display din CSS oferă controlul asupra modului în care fiecare ele-ment este afișat în pagină. Display are următoarele valori posibile care ajută în acest sens: auto (implicit), none, hidden, inline, block și multe alte mai rar utilizate. Toatele elementele sunt afișate implicit, dar dacă se dorește ascunderea unuia se utilizează display: none sau display: hidden. În primul caz, afișarea layout-ul nu va fi afectată de prezența elementului în arborele logic al documentului, însă în al doilea caz, elementul va continua să afecteze modul de afișare a layout-ului și va fi luat în calcul pentru formatarea acestuia, însă nu va fi afișat pe ecran. Unele elemente din limbajul de marcaj sunt afișate ca un bloc care forțează un rând nou înaintea și după element și ocupă întreaga lățime a elementului părinte: <p>, <div>, <ol>, etc. Alte elemente sunt afișate inline, în linie. Acestea nu forțează rând nou și nici nu ocupă toată lățimea: <span>, <em>, <a>, etc. CSS permite schimbarea modului de afișare, astfel putem avea <p> sau <div> afișat în linie, ori <span>, <em> afișate ca blocuri. Un programator, utili-zând aceste moduri de afișare, poate obține alinierea fie pe verticală, fie pe orizontală a unor elemente din interfață, de exemplu: o bară de meniuri.

În CSS elementele vizuale pot fi reașezate pe orizontală folosind proprietatea float cu valorile: left, right sau center. Elementul cu această proprietate aplicată este mutat din poziția lui inițială pe orizontală în stânga, centru sau în dreapta conținutului, iar modul de afișare este de tip bloc, nu în linie. Lățimea conținutului este dată de primul element părinte cu modul de afișare bloc (display: block). Toatele elemente de marcaj afișate în linie (cu display: inline) aflate la același nivel în structura documentului sau mai adânci față de elementul pe care se aplică declarația CSS float, se mulează după acesta, excepție făcând elemente care la nivel de cod se află înaintea acestuia. Un element cu float poate fi redimensionat utilizând proprietățile width și height, ce permit valori procentuale sau în pixeli. Proprietatea float este utilizată pentru poziționarea po-zelor în pagină, astfel încât textele să se muleze după poze. În cazul layout-urilor, se fo-losește pentru poziționarea într-o extremă sau alta a unor elemente, cum ar fi sigla site-ului în stânga, iar bara de meniuri în dreapta, ambele la același nivel pe verticală.

Într-o interfață avansată apare adeseori nevoia de a repoziționa elementele vizuale în funcție de alte elemente și de a controla modul în care acestea afectează layout-ul. Proprietatea position din CSS oferă programatorului mai multe moduri de a repoziționa elementele: static, fixed, relative, absolute. A priori, toate elementele din limbajul de marcaj sunt afișate folosind position: static.

Pentru a deplasa un element în spațiul disponibil al ferestrei navigatorului, se folosește position: fixed. În acest mod, chiar dacă este derulată pagina, elementul ră-mâne poziționat fix în cadrul ferestrei, deoarece fereastra propriu-zisă este blocul care-l conține. Astfel, elementul nu mai influențează restul layout-ului, nu mai ocupă spațiu. Repoziționarea se face folosind proprietățile CSS cu valori în pixeli: top, right, bottom, left.

Când se utilizează position: relative, elementul are ca pivot poziția sa inițială în layout, adică repoziționarea este relativă. Spațiul ocupat inițial în layout rămâne, astfel, doar unde este afișat poate fi definit. În acest caz, proprietățile CSS top, right, bottom, left pot avea și valori negative în pixeli.

Un element din limbajul de marcaj poate fi ancorat într-o parte sau alta față de un element părinte în ierarhia arborelui logic al documentului HTML utilizând declarația CSS position: absolute. În acest caz, position: absolute folosește ca pivot pentru ele-mentul stilat, primul element părinte care are declarația position: relative aplicată. Elementul poziționat cu declarația position: absolute este eliminat din structura vizuală a layout-ului, adică nu ocupă nici un spațiu și toate celelalte elemente nu sunt influen-țate de acesta. Modul de afișare al acestui element este display: block.

3.8 Tipuri de interfețe

Un design de interfață poate fi pe stânga, dreapta sau centrat. Navigarea poate fi pe verticală (cel mai des) sau pe orizontală (foarte rar). O interfață fluidă are o lățime variabilă, procentual, și este mult mai dificil de implementat decât una cu lățime fixă. Designerul din procesul de creație, într-o aplicație precum Photoshop, trebuie să aibă în considerare cum dorește să fie interfața implementată în final. Dacă dorește să aibă o interfață fluidă, atunci elementele vizuale și structura vizuală trebuie gândite astfel încât să permită implementarea propriu-zisă. În principal, trebuie avut în vedere cum vor fi transformate în bitmap și tranșate imaginile, astfel încât să arate la fel. Un alt aspect care trebuie prevăzut este modul în care se lățește interfața, ce elemente trebuie să se redimensioneze, ce imagini trebuie fie repetitive sau să permită lățirea interfeței și cum se poate face să-și mențină proporțiile când se lățește mult. Aceste amănunte trebuie luate în calcul pentru a avea un design care se adaptează la diferitele dimensiuni posibile a ferestrei navigatorului web.

HTML și CSS sunt tehnologii web standard, client side, care rulează pe calcu-latorul utilizatorului de Internet. Însă, funcționalități mai mult sau mai puțin avansate sunt implementate folosind tehnologii server side, care rulează pe calculatorul de la dis-tanța de tip server: PHP, ASP, mySQL, etc. Aceste tehnologii permit implementarea celor mai cunoscute funcționalități pe site-uri: schimbarea limbii, căutare, hartă site, conturi, etc. La nivel de interfața se folosește JavaScript pentru a implementa funcționa-lități ce țin de modul de interacțiune cu site-ul: meniuri în cascadă, sugestii pentru ter-menii de căutare, încărcare a unor secțiuni din site în mod dinamic, etc. O altă tehno-logie frecvent utilizată este Adobe Flash pentru interfețe interactive și în special pentru integrarea de video-uri pe web.

3.9 JAVASCRIPT

JavaScript (JS) poate fi descries ca un limbaj de programare orientat obiect care este bazat pe conceptul prototipurilor, rolul principal al acestuia fiind introducerea unor funcționalități în paginile web, codul Javascript din aceste pagini fiind ulterior rulat de către browser. Limbajul este foarte cunoscut datorita faptului ca este folosit adesea la construirea siturilor web, dar este folosit și pentru acesul la obiecte încastrate si anume embedded objects în diverse aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.

În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java.

Până la începutul lui 2005, ultima versiune existentă a fost JavaScript 1.5, care corespunde cu Ediția a 3-a a ECMA-262, ECMAScript, cu alte cuvinte, o ediție standardizată de JavaScript. Versiunile de Mozilla începând cu 1.8 Beta 1 au avut suport pentru E4X, care este o extensie a limbajului care are de a face cu XML, definit în standardul ECMA-357. Versiunea curentă de Mozilla, 1.8.1 (pe care sunt construite Firefox și Thunderbird versiunile 2.0) suportă JavaScript versiunea 1.7.

3.9.1 Java, JavaScript si Jscript

Schimbarea numelui din LiveScript în JavaScript s-a făcut cam în același timp în care Netscape încorpora suport pentru tehnologia Java în browserul web Netscape Navigator.

Microsoft a implementat limbajul JavaScript sub numele de JScript, cu o serie de modificări și extensii față de implementarea Netscape. Pe platforma Windows, JScript este unul din limbajele executabile de către Windows Script și, deci, poate fi folosit pentru scriptarea aplicațiilor ce suportă Windows Script, de exemplu Internet Explorer, sau chiar sistemul de operare Windows.

Asociația ECMA a standardizat limbajul JavaScript/JScript sub numele ECMAScript (standardul ECMA-262)

Utilizare

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate.

Browserele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte poartă numele de Document Object Model sau DOM. Există un standard W3C pentru DOM-ul pe care trebuie să îl pună la dispoziție un browser, ceea ce oferă premiza scrierii de script-uri portabile, care să funcționeze pe toate browserele. În practică, însă, standardul W3C pentru DOM este incomplet implementat. Deși tendința browserelor este de a se alinia standardului W3C, unele din acestea încă prezintă incompatibilități majore, cum este cazulInternet Explorer.

O tehnică de construire a paginilor web tot mai întâlnită în ultimul timp este AJAX, abreviere de la „Asynchronous JavaScript and XML”. Această tehnică constă în executarea de cereri HTTP în fundal, fără a reîncărca toată pagina web, și actualizarea numai anumitor porțiuni ale paginii prin manipularea DOM-ului paginii. Tehnica AJAX permite construirea unor interfețe web cu timp de răspuns mic, întrucît operația (costisitoare ca timp) de încărcare a unei pagini HTML complete este în mare parte eliminată.

Cap 4. Creare Website Parc Industrial Cenei

Această pagină web a fost realizată prin folosirea următoarelor tehnologii:

-HTML

-CSS

-JAVASCRIPT

4.1 Crearea de conținut HTML

Toate paginile HTML încep cu eticheta și se termină tot cu eticheta , in interiorul acestor etichete găsind perechea și perechea .

Zona head conține titlul paginii între etichetele &lt;span contextMenu="true" contextOptions="și,si,sî,șî" style="color:#f54e4b;border-bottom:0px dotted red;"&gt;și&lt;/span&gt; , descrieri de tip &lt;meta&gt;, stiluri pentru formatarea textului, scripturi și linkuri către fișiere externe (de exemplu scripturi Javascript, fișiere de tip CSS sau favicon).

Conținutul etichetei “title” este afișat de browser pe cea mai de sus linie (bandă albastră de sus).

Etichetele de tip meta conțin cuvinte cheie, descrierea paginii, date despre autor, informații utile motoarelor de căutare și au următorul format:

&lt;meta name="nume" content="conținut"&gt;

Exemplu: link către un fișier extern CSS:

css" href="css.css"&gt;

Zona body găzduiește practic toate etichetele afișate de browser pe ecran.

Exemplu: o pagină HTML cu titlul Exemplu iar conținutul Conținut pagină

<html>

<head>

<title>Titlu</title>

</head>

<body>

Continut pagina

</body>

</html>

Comentariul în HTML, care bineînțeles nu va fi afișat de browser, poate fi introdus astfel:

Acesta este un comentariu în HTML –>

4.2 Creare si configurare in cazul de față

Pagină este structurată pe 5 secțiuni, realizate prin folosirea comenzii (lista) și &lt;li&gt; (elementele din lista) care formează Meniul Principal al paginii.

Fiercare element din lista conține un link către un anumit "dată-tab" unde s-au introdus texte informative despre elementul selectat din lista.

Dată-tab-urile că și celelalte elemente din pagină au fost structurate și aranjate cu ajutorul etichetei "".

Centrarea elementelor pe mijloc s-a realizat cu ajutorul etichetei .

Format-ul textului, etichetelor, titlului, cadranelor, spațierea, fundalul s-au făcut prin declararea claselor în fișierul style.css din folderul CSS iar ulterior aperalea lor s-a făcut cu ajutorul comenzii "class=" în interiorul etichetelor &lt;li&gt;,,, s.a.m.d.

Mai jos se regăsește codul din spatele site-ului.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Lucrare de licență</title>

<link rel="stylesheet" href="css/style.css" media="all" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/functions.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" >

var markerArray = [];

function initialize() {

var options = {

'mapTypeId': google.maps.MapTypeId.ROADMAP

};

var center= new google.maps.LatLng(45.725938, 20.906765);

var map = new google.maps.Map(document.getElementById("map"), options);

map.setZoom(11);

map.setCenter(center);

var marker = new google.maps.Marker({

map: map,

position: center,

});

}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!– Add jQuery library –>

<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>

<!– Add mousewheel plugin (this is optional) –>

<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!– Add fancyBox main JS and CSS files –>

<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>

<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />

<script type="text/javascript">

$(document).ready(function() {

/*

* Simple image gallery. Uses default settings

*/

$('.fancybox').fancybox();

/*

* Open manually

*/

$("#fancybox-manual-a").click(function() {

$.fancybox.open('1_b.jpg');

});

$("#fancybox-manual-b").click(function() {

$.fancybox.open({

href : 'iframe.html',

type : 'iframe',

padding : 5

});

});

$("#fancybox-manual-c").click(function() {

$.fancybox.open([

{

href : '1_b.jpg',

title : 'My title'

}, {

href : '2_b.jpg',

title : '2nd title'

}, {

href : '3_b.jpg'

}

], {

helpers : {

thumbs : {

width: 75,

height: 50

}

}

});

});

});

</script>

<style type="text/css">

.fancybox-custom .fancybox-skin {

box-shadow: 0 0 50px #222;

}

body {

max-width: 700px;

margin: 0 auto;

}

</style>

</head>

<body onload="initialize()" background="img/background.jpg">

<div class="center">

<h1>Prezentarea locației din Comuna Cenei în vederea dezvoltării unui parterneriat româno-italian</h1>

<ul class="tabs">

<li class="tab-link current" data-tab="tab-1">Poziționarea locației</li>

<li class="tab-link" data-tab="tab-2">Descrierea locației</li>

<li class="tab-link" data-tab="tab-3">Utilități</li>

<li class="tab-link" data-tab="tab-4">Facilități</li>

<li class="tab-link" data-tab="tab-5">Forma de asociere juridică</li>

</ul>

<div id="tab-1" class="tab-content current">

<center> <p> Pe drumul national Timisoara – Jimbolia ramificatie spre Deta – Stamora Moravita.</p>

<p> * aproape de frontiera Cenad (punct vamal spre Ungaria ) 30 km;</p>

<p> * aproape de frontiera Jimbolia (punct vamal spre Serbia Montenegru ) 20 km</p>

<p> * autostrada Seghet la de 60 km</p>

<img class="hall" src="img/hala.jpg" title="Hala" alt="Hala" />

<center> <div id="map" style="height:300px; width: 400px; border:1px solid #000000;"></div></center></p>

</div>

<div id="tab-2" class="tab-content">

<p> * Suprafata pe care este asezat complexul este de aproximativ 15 hectare ( 150.000 metri patrati )</p>

<p> * S-a construit o hala industriala noua in suprafata de 1000 m patrati ,cu birouri,vestiare,in tehnologie moderna cu panouri sandwich;</p>

<p> * Drumurile interioare de acces acopera intreaga suprafata fiind asfaltate.</p>

<p> * Pe o suprafata de 10.000 metri patrati se afla plasate cladiri agro industriale care solicita renovare.</p>

<p> * Intreaga suprafata dintre constructii aproximativ 120.000 mii metrii patrati poate fi construita cu noi obiective.</p>

<p>

<a class="fancybox" href="img/image-1.jpg" data-fancybox-group="gallery" title="Birou 1"><img src="img/thumb-1.jpg" width="140" height="100" alt="" /></a>

<a class="fancybox" href="img/image-2.jpg" data-fancybox-group="gallery" title="Birou 2"><img src="img/thumb-2.jpg" width="140" height="100" alt="" /></a>

<a class="fancybox" href="img/image-3.jpg" data-fancybox-group="gallery" title="Birou 3"><img src="img/thumb-3.jpg"width="140" height="100" alt="" /></a>

<a class="fancybox" href="img/image-4.jpg" data-fancybox-group="gallery" title="Birou 4"><img src="img/thumb-4.jpg" width="140" height="100"alt="" /></a>

</p>

</div>

<div id="tab-3" class="tab-content">

<p> * Exista un transformator propriu cu 400 KW impreuna cu circuitele de distributie generale</p>

<p> * Reteaua de apa este realizata prin foraje proprii</p>

<p> * Reteaua de gaz este in curs de finalizare</p>

</div>

<div id="tab-4" class="tab-content">

<p> * Forta de munca este ieftina, salariu maxim fiind de aproximativ 130 euro </p>

<p> * Usurinta de obtinere a autorizatilor de mediu si a celorlate autorizatii de functionare.</p>

</div>

<div id="tab-5" class="tab-content">

<p>* Independent de forma de asociere juritica se propun urmatoarele aporturi :</p>

<p>* partea romana pune la dispozitie terenul , constructile cu utilitatile aferente , forta de munca , logistica si eventual o parte din capital ; </p>

<p>* parte straina va asigura linile tehnologice si oportunitati pe pietele de desfacere.</p>

<p>* Creerea unei societati comerciale noi cu capital mixt</p>

<p>* Asociere in participatiune (Joint venture )</p>

<p>* Inchiriere.

</div>

<h2>Info. Suplimentare Tel . 0745521710 – persoana de contact Titus Slavici</h2>

<a href="http://www.slavici.ro">www.slavici.ro</a>

</div>

</body>

</html>

Mai jos urmează explicații pentru fiecare Tab în parte.

I. Poziționarea locației

Conține 4 secțiuni:

a) informații text referitoare la poziția geografică

b) imagine cu hala resprectiva

c) Harta cu un Marker ce indică poziția exactă cu ajutorul API-ului Google Map.

Javascriptul folosit este declarat la începutul fișierului HTML în secțiunea indicând către fișierul "JS" online:src="http://maps.google.com/maps/api/js?sensor=false"

Pentru încărcarea hărții se apeleaza funcția "initialize" în interiorul etichetei : onload="initialize()";

În această funcție se declara o nouă harta cu următorii parametri: centrarea hărții, tipul hărții, nivelul de focalizare și poziționarea markerului ce indică poziția exactă unde se găsește hala industrială.

Pentru afișarea hărții am introdus doar o secțiune de "div" cu ID-ul hărții intializate anterior;

d) informații suplimentare

Imagine 1: Pozitionarea locatiei

II. Descrierea locației"

Conține 3 secțiuni:

a) informații text

b) un colaj de imagini care sunt afișate folosing javascripturile din folderul lib: jquery.mousewheel-3.0.6.pack, jquery-1.9.0.min, jquery-1.10.1.min

Javascripturile sunt declarate la începutul fișierului HTML în secțiunea iar apoi

apelate prin comandă:<a class="fancybox" href="img/image-1.jpg" dată-fancybox-group="gallery" title="Birou 1"&gt;alt="" /&gt;</a> pentru afișare;

c) informații suplimentare

Imagine 2: Descrierea locației

III. Utilități

a) informatii text

b) informatii suplimentare

Imagine 3: Utilități

IV. Facilități

a) informații text

b) informații suplimentare

Imagine 4: Facilități

V. Formă de asociere juridică

a) informații text

b) informații suplimentare

Imagine 5: Forma de asociere juridică

Bibliografie

Eugenia Lucia Stamate, Crearea si publicarea unui site web. Limbajul HTML si elemente de

web design, 2005

Acu, Călin Ioan, Optimizarea paginilor Web, Editura Polirom, 2003

Jon Duckett, Web Design with HTML, CSS, JavaScript and jQuery Set,2014

Buraga, Sabin, Proiectarea siturilor Web. Design si funcționalitate, Editura Polirom, 2002

Jon Duckett,HTML & CSS: Design and Build Web Sites,2011

Jennifer Niederst Robbins,Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics,2012

Ben Frain,Responsive Web Design with Html5 and Css3,2012

Sue Jenkins,Web Design All-in-One For Dummies,2013

http://www.bweb.ro/administrare-site.html

http://www.bweb.ro/site-de-succes.html

http://www.creeaza.com/referate/informatica/php/Etapele-dezvoltarii-unui-sit-w527.php

http://www.designlabs.ro/intrebari-frecvente-web-design.php

http://www.drconsultants.ro/cresti-afacerea-imm-online

http://www.drconsultants.ro/metode-atragere-clienti-site

http://www.dummies.com

http://www.hfdesign.ro/internetul-un-mijloc-eficient-de-promovare-unei-afaceri

http://istqbexamcertification.com/what-is-non-functional-testing-testing-of-software-product-characteristics

Vreau să îmi promovez afacerea pe internet. De unde încep?

http://publicis.tripod.com/Resurse/Promovarea_pe_internet.htm

http://ro.wikipedia.org/wiki/Internet

http://ro.wikipedia.org/wiki/Comer%C8%9B_electronic

Bibliografie

Eugenia Lucia Stamate, Crearea si publicarea unui site web. Limbajul HTML si elemente de

web design, 2005

Acu, Călin Ioan, Optimizarea paginilor Web, Editura Polirom, 2003

Jon Duckett, Web Design with HTML, CSS, JavaScript and jQuery Set,2014

Buraga, Sabin, Proiectarea siturilor Web. Design si funcționalitate, Editura Polirom, 2002

Jon Duckett,HTML & CSS: Design and Build Web Sites,2011

Jennifer Niederst Robbins,Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics,2012

Ben Frain,Responsive Web Design with Html5 and Css3,2012

Sue Jenkins,Web Design All-in-One For Dummies,2013

http://www.bweb.ro/administrare-site.html

http://www.bweb.ro/site-de-succes.html

http://www.creeaza.com/referate/informatica/php/Etapele-dezvoltarii-unui-sit-w527.php

http://www.designlabs.ro/intrebari-frecvente-web-design.php

http://www.drconsultants.ro/cresti-afacerea-imm-online

http://www.drconsultants.ro/metode-atragere-clienti-site

http://www.dummies.com

http://www.hfdesign.ro/internetul-un-mijloc-eficient-de-promovare-unei-afaceri

http://istqbexamcertification.com/what-is-non-functional-testing-testing-of-software-product-characteristics

Vreau să îmi promovez afacerea pe internet. De unde încep?

http://publicis.tripod.com/Resurse/Promovarea_pe_internet.htm

http://ro.wikipedia.org/wiki/Internet

http://ro.wikipedia.org/wiki/Comer%C8%9B_electronic