Sunteți pe pagina 1din 75

PROBLEME REFERITOARE LA

PROIECTAREA SI REALIZAREA
AFACERILOR PE INTERNET

Principii de proiectare a site-urilor Web de prezentare


Cuprins
- Tehnologii de creare a paginilor Web
◦ web, net, Hypertext
◦ HTML, XHTML
◦ Browsere web
◦ Aplicatii ajutatoare, plugins, playere
◦ HTTP
◦ Servere web
◦ cookies

- Creare de pagini web – principii de baza


• Unelte, elemente principale ale paginilor
• Formatari/stiluri
• Extensii, scripturi, programe
• Testare, postare, gazduire

- Pagini web in contextul e-business/e-commerce


• Etape de proiectare si principii
• Exemple si contraexemple
Browser web  server web
Notiuni si aplicatii
Web =
Hypertextul =
Document HTML =
HTML =

- aplicatii ajutatoare (Helper Applications)


- extind capacitatea bowserelor de a luca cu diferte formate de fisiere

- plug-in-uri - orice aplicatie ajutatoare care ajuta browserul sa afiseze


un anumit format de fisier
Cookies HTTP
- “bucati” de infomatie generate de catre un server Web si
stocat in HDD-ul computerului, folosit ulterior

Computerul nu trebuie sa accepte neaparat cookies, dar poate afecta


capacitatea de a face anumite activitati online, cum ar fi procurarea de
produse, servicii
Servere Web
- includ software-ul HTTP pentru a duce la
bun sfarsit cererile HTTP
- pot manipula mii de cereri pe secunda
- prea multe cereri pot duce la intreruperea
functionarii serverului
-HTTP foloseste portul de comunicare 80
Creare de pagini web - principii
- unelte de creare pagini web
- componente de baza ale paginii web
- formate, stiluri
- grafice, sunete, animatii
- link-uri, butoane
- forme HTML
- tabele si frame-uri sau cadre
- testare si pozitionare pagini web
Unelte de creare pagini web
Editoare text
 Salvate ca .htm/.html
 Similare cu procesarea documentelor word

Software dedicate pentru web


 Microsoft FrontPage
 Dreamweaver
 Wordpress
<html>  Macromedia
<head>
<title>
Text care apare in bara de titlu in fereastra
navigatorului ca pagina web
</title>
</head>
<body>
Textul afisat efectiv in corpul pagini web afisate
in browser
</body>
</html>
Elementele unei pagini web
Titlul documentului

Adresa (URL)

Banner
Titlul paginii Unelte de navigare
web

Motor de cautare

Elemente grafice
Tabel /
Hyperlinks
Unelte de navigare

Content

Hyperlinks

Frames

Footer /
Copyright
9
Elementele unei pagini web
Titlul – titlul paginii web

Adresa Web – URL-ul paginii afisata de browser

Continutul – informatiile de pe pagina: text, grafica si alte mijloace media

Design – stilul paginii, fonturi, culori, background, elemente vizuale etc

Structura – scheletul paginii, titlul, heading, footer, tabele, frame-uri, unelte de


navigare etc

Hyperlinks – legaturi catre surse indicate

10
Formatari, stiluri, CSS etc
- exista tag-uri specifice pentru formatare text in HTML
- CSS (Cascading Style Sheet) reprezinta elemente de formatare specific
pentru paginile web – adauga elemente de design scheletului HTML

- Se pot adauga fisiere de imagini,


<body>
animatii, video embedded, sunete,
ancore, butoane, tabele,
p { font-size: 12p; font-family:
formulare, cadre sau frames
Garamanond;}
h2{ color: green; font-
weight:bold; font-size:15 p;}

</body>
Extensii, scripturi si programe
- DHTML
- XML (eXtensible Markup Language) si XSL (eXtensible Stylesheet
Language)
-JavaScript
-Java Applets
-ActiveX Controls

Scripturile instruiesc browserul sa realizeaze anumite actiuni sau sa


raspunda actiunilor unor utilizatori ;
Pot rula la client sau la server;
Testarea si postarea paginilor create
- se testeaza pagina local

- se transfera paginile pe un server web

- se testeaza toate paginile si linkurile create

- se actualizeaza si se mentine site-ul creat


Gazduirea (Hosting)
oGazduirea indica locatia fizica unde site-ul web este stocat, mentinut si
monitorizat.

- “auto-gazduirea“(Self-hosting): organizatia opereaza si gestioneaza site-ul


web
- Co-locatia: organizatia opereaza si gestioneaza site-ul web, dar isi
localizeaza fizic sistemul prin facilitati oferite de o firma de gazduire
- gazduire dedicata: organizatia contracteaza cu o companie terta partea de
management si activitati de support a site-ului, dar acesta si sistemul sunt
fizic localizate pe un server dedicat exclusiv organizatiei
- gazduire pe un server comun: similar cu gazduirea dedicata, dar site-ul
rezida pe server comun, impartit
Gazduirea (Hosting)
- Performanta: rentabilitatea pe termen lung a investițiilor în
sisteme
- scalabilitatea: capabilitatea sistemului sa creasca in dimensiuni, daca
creste cererea
- Disponibilitate: capacitatea de a satisface cererea continuă;
- Fiabilitate: robustețea tehnologică a sistemelor;
- Simplitate: ușurința navigării și utilitatea;
- Integrarea: măsura în care sunt legate sistemele cu alte sisteme
existente;
- Securitate: protecția împotriva atacurilor criminale
Gazduirea gratis
1. reclame (advertising) - majoritatea impun adaugarea de reclame, care
acopera costurile gazduirii si a serviciilor asociate
2. spatiul – majoritatea site-urilor folosesc mai putin de 5MB
3. acces FTP – cea mai comuna metoda de a transfera paginile web si alte
fisiere din computerele personale pe serverul de gazduire
4. tipurile de fisiere si limitari de capacitate
5. mentenanta si viteza de accesare – acces incetinit frustreaza
vitizatorul; trebuie facute verificari pe intervale orare
6. alocarea largimii de banda – in general, un trafic de 100MB pe luna
este considerat mic, 1-4 GB este considerat adecvat pentru un site simplu
Gazduirea pe un site comercial
1. fiabilitate si viteza de acces
2. transferul de date (traffic) – cantitatea de bytes transferati de pe site
inspre vizitatorii site-ului
3. suport tehnic – 24/7
4. PHP, FTP, MySQL etc
5. SSL (Secure server) – https:// - plati online
6. Email, raspuns automat, forward e-mailuri etc
7. OS – sisteme UNIX, servere Apache
8. pret – plata lunara/anuala/semestriala
Gazduirea
Trei posibilitati de gazduire a site-ului web:

◦ Server propriu
◦ Gazduire gratuita pe un site comercial
◦ Gazduire cu taxa pe un site comercial

Alegerea se bazeaza pe: scopul site-ului, clientul tinta, informatiile si serviciile


oferite, resurse umane, material si financiare

Trebuie luate in considerare cateva “provizii” in cazul in care va exista o


extindere/ dezvoltare a afacerii respective pe web

18
Preambul
Vestea buna: Oricine poate crea o pagina web sau un site web

Vestea proasta: Oricine poate crea o pagina web sau un site web .

Indiferent de soft-urile folosite pentru realizarea paginii web:


Macromedia Dreamweaver, Microsoft FrontPage sau, pur si simplu,
programare de baza (HTML< CSS, Javascript etc) – “hand coded”, exista
un set de ‘reguli’ de care trebuie tinut cont, indiferent ce anume creezi
pentru introducerea pe web.
Pagini web in contextul e-business
Internetul ofera organizatiilor acces global la piete, dar paginile web trebuie
sa reflecte conditiile locale;

- diferente de limbaj, cultura, tehnice, tipuri de produse si servicii cerute pe


diferite regiuni/zone;

- modelul traditional de comert unei audiente globale se baza pe vinderea


de produse folosind tehnici de marketing si distributie;

- acest model a fost inlocuit cu cel online care cuprinde nevoile locale si le
include intr-un model de piata la nivel global;
Etape de proiectare
Fixarea scopului site-ului Web
Stabilirea cerinţelor
Analiza activităţilor publicului ţintă
Proiectarea interfeţei
Evaluarea interfeţei
Programarea interfeţei
Reiterarea etapelor anterioare

Sursa: Mihaela Brut, Curs Comunicare în medii electronice


Principii de baza simple pentru proiectarea
paginilor web
Principii de baza in proiectarea paginilor web pentru
e-business:

- Grafica mentinuta la minim


- Imagini cu produsele
- Asezare simpla in pagina
- Navigare facila
- Limitarea sau dispersarea bannerelor de reclama
Indicatori de performanta

- Numărul de "hit-uri" de pe site-ul potențialilor clienți;


- Durata de timp în care clientul potențial a rămas pe site-ul web;
- Ce tipuri de produse sau servicii au fost vizualizate de potentiali clienti;
- Navigarea pe site-ul web, fie că este o singură oprire sau mai multe;
- Numărul de "hit-uri" transformate în vânzări reale;
- Valoarea vânzărilor realizate;
- tipurile de produse și servicii vândute;
- Numărul de clienți repetați;
- Caracteristicile clienților - vârsta, sexul, ocuparea forței de muncă, locație etc .;
Elemente fundamentale de creare a paginii web

Scopul Web Design-ului


◦ Informare/Educatie
◦ A convinge

Influente in Web Design


◦ Tehnologia folosita atat de audienta vizata cat si de proiectant
◦ Natura continutului
◦ Economice (buget, timp etc)
◦ Cantitatea si tipul de elemente vizuale incluse
◦ Intrunirea obiectivelor din punct de vedere al utilitatii lor

25
Crearea unui design corespunzator
Continutul este important, dar nu va putea, singur, sa asigure functionalitatea
paginii web.

Un bun design inseamna:

Usor de inteles
Interesant
Usor de utilizat
Uniform in ceea ce transmite

Realizat din punctul de vedere al vizitatorului:


WYSIWYW (What You See Is What You WANT)

26
Etapa de pre-proiectare a paginii web
oMisiunea organizatiei pentru care se creaza pagina

oDefinirea publicului tinta

oObiectivele site-ului sunt menite pentru:


◦ Perioada imediata
◦ Perioada lunga de timp

oOrganizarea continutului
◦ Organizarea si stabilirea ierarhiei continutului
◦ Divizarea continutului in unitati logice de informatie
Crearea unei schite sau a planului pentru
continut

-Crearea paginii web pe hartie, prin folosirea de structuri ierarhizate despre


cum vor naviga utilizatorii de la o pagina la alta

-Luarea in considerare a tuturor elementelor si fisierelor care vor fi incluse in


pagina html: PDF, grafice, animatii, sunet etc
- Unde vor fi plasate?
- In ce fel le vor putea accesa utilizatorii?

- Organizarea logica a fisierelor, astfel incat echipa de dezvoltare sa inteleaga


ierarhia paginilor incluse in site.

28
Stabilea scopului site-ului
Acest stadiu initial defineste obiectivele pentru site si inceperea
procesului de colectare si analizare a datelor necesare pentru
justificare bugetului si resurselor.

Identificarea publicului ţintă şi a tipologiei acestuia:


Utilizatori novici & ocazionali
Utilizatori frecvenţi & experţi
Utilizatori internaţionali

Stabilirea scopului şi a obiectivelor principale.

Stabilirea informaţiilor ce vor fi disponibile pe site.

Este foarte importantă motivaţia avută în vedere!


Sursa: Mihaela Brut, Curs Comunicare în medii electronice
-Din punct de vedere al procesului de productie, sunt
cateva probleme care trebuie anticipate:

oDin cine va fi formata echipa de productie: interni,


contracte cu externii, un mixt din cele 2 componente

oCine va supervisa procesul

oCine va tine legatura cu orice contractori externi

o Va functiona pentru o perioada lunga de timp si daca da,


cine va fi webmaster-ul sau editorul principal al sitului.
Cerinţe

Tehnologiile folosite;
Design-ul general al site-ului;
Frecvenţa actualizării şi dinamica sitului;
Audienţa & specificul conţinutului;
Bugetul alocat
Proiectarea

Principiul de bază:

“O interfaţă-utilizator e bine scrisă atunci când


programul se comportă exact aşa cum se aşteaptă
utilizatorii lui”.

Sursa: Mihaela Brut, Curs Comunicare în medii electronice


Proiectarea
Organizarea informatiilor
Divizarea informaţiei
• Opţiunile din meniu şi submeniuri

Stabilirea ierarhiei datelor


• Pagina de start (home page)
- Indexul (sumarul) sitului;
- Scop, tipul conţinutului, modalităţi de
parcurgere.
• Paginile subiectelor principale
- Subiecte de interes ale sitului;
•Paginile subsidiare
-Trebuie să contină legături de revenire la
pagina de start
Sursa: Mihaela Brut, Curs Comunicare în medii electronice
Proiectarea
Structura generală a unui site

Sursa: Mihaela Brut, Curs Comunicare în medii electronice


Exemplu de 2 structuri:

stanga - obliga meniul sa fie prea lung;


dreapta - poate deranja utilizatorii;
Alegerea structurii adecvate, conform continutului si publicului tinta
Proiectarea
Navigarea prin site
- Un sistem bun de navigare facilitează orientarea prin
site

Asigurarea contextului
- Utilizatorul nu are acces la întreaga informaţie
disponibilă pe un site

Asigurarea accesibilităţii informaţiilor

Sursa: Mihaela Brut, Curs Comunicare în medii electronice


Proiectare – elemente de design
Asigurarea simplităţii şi consistenţei
- Marimea / culoarea butoanelor, textului şi legăturilor
- Localizarea pe pagină a legăturilor navigaţionale
Trebuie să fie similare în întreg site-ul
- Contrast & Simplitate
Culorile legăturilor nevizitate trebuie să fie mai vii, mai
strălucitoare, mai saturate decât a celor deja vizitate , însă
trebuie să constituie variante de luminozitate ale aceleiaşi
culori.
Sursa: Mihaela Brut, Curs Comunicare în medii electronice
Proiectarea – alte elemente
Site-ul poate cuprinde

Colecţii de adrese Web favorite


Întrebări frecvente(FAQ)
Condiţii de utilizare (Disclaimer)
Politica de confidenţialitate (Privacy policy)
!Asigurarea continuităţii vizuale şi funcţionale.
Greseli
Lipsa simplităţii
Ignorarea vitezei de încărcare
Ierarhia vizuală
Direcţionarea atenţiei
Grafica abuzivă
Asigurarea consistenţei şi echilibrului
Sursa: Mihaela Brut, Curs Comunicare în medii electronice
Proiectarea

Designul conţinutului text ⇒ economie de mijloace:

Utilizarea majusculelor
Dimensiunea
Tipul corpului de literă (font)
Gruparea & aranjamentul
Spatierea
Alinierea
Utilizarea titlurilor/subtitlurilor
Titlul paginii

Sursa: Mihaela Brut, Curs Comunicare în medii electronice


Verificare integrităţii şi a corectitudinii codului sursă

modul de scriere a numelor de fişiere:

- sistemul de operare Windows nu face deosebirea


între minuscule şi majuscule şi paginile se vor vizualiza fără
probleme
- platformele Unix(Linux) fac deosebirea între literele
mici şi cele mari (case-sensitive).

Sursa: Mihaela Brut, Curs Comunicare în medii electronice


Publicarea site-ului

Server dedicat - trebuie ales serverul adecvat, ţinând cont


de factori precum performanţa, siguranţa, fiabilitatea, costul şi
platforma.

Furnizor de găzduire Web(hosting) - elemente legate de


sistemul de plată, suportul tehnic şi lăţimea de bandă oferită.

Deseori, rolul de furnizor de servicii de găzduire Web este asumat


chiar de furnizorul de servicii Internet
Asocierea pictogramei de identificare
(https://favicon.io/)

Alegerea domeniului

Sunt preferate domeniile scurte din 1-2 cuvinte, usor de scris si de


pronuntat.
- numele domeniului trebuie sa fie înţeles şi reţinut cu uşurinţă
indiferent daca a fost citit sau auzit. Exemple pozitive: adevarul.ro, sport.ro,
cancan.ro, cinemagia.ro, acasa.ro etc.

http://blog.trafic.ro/2011/07/19/7-reguli-pentru-alegerea-domeniului-perfect/
Alegerea domeniului – Reguli

A se evita confuziile – prin alegerea unui domeniu unic sau


prin achiziţionarea domeniilor cu nume asemănatoare care pot
genera confuzii şi direcţionarea acestora spre situl principal.

A se evita utilizarea numelui brandurilor cunoscute –


numele brandurilor sunt protejate şi în acest caz există riscul de
pierdere a domeniului în favoarea deţinătorului de drept al mărcii.

http://blog.trafic.ro/2011/07/19/7-reguli-pentru-alegerea-domeniului-perfect/
Alegerea domeniului - reguli:

Se vor evita pe cât posibil numerele si cratimele in numele


domeniului.
- numere - 0(zero) poate fi uşor confundat cu litera ‘o’ în
numele domeniului
- cratime – fie nu sunt reţinute fie sunt plasate incorect
atunci când sunt mai multe.
5. domenii.ro vs domeniu.com.
Promovarea

- site-ul trebuie înscris la motoare de căutare şi directoare


web

- publicitatea pe internet - bannere publicitare afişate pe


diverse portaluri sau la marketingul prin e-mail

- modalităţi clasice de promovare: spoturi TV sau radio,


inserări în diverse publicaţii, etc.
Greşeli frecvente
Text greu de urmărit

Un text compact
Câteva metode de aerisire:
Subtitluri
Liste
Cuvinte evidenţiate
Paragrafe scurte
Un stil de exprimare concis şi clar
Greşeli frecvente

Titlul paginii (primele 66 caractere) este


preluat de motorul de căutare pentru a o afişa în lista
de rezultate ale unei interogări.

Titlul este preluat şi în lista de adrese favorite


de către utilizatorii interesaţi.

Este bine să înceapă cu numele companiei


/proprietarului , urmat de o foarte scurtă descriere
Greşeli frecvente
Animaţia în exces
Fundaluri stridente

Fundalurile audio proiectate în Flash sau Shockwave se


încarcă foarte greu şi nu sunt portabile.
Combinaţii ilizibile
Utilizarea unui număr prea mare de culori în
cadrul aceleiaşi pagini

http://www.costumesupercenter.com/mens+costumes-clown.html
Combinaţii lizibile
În privinţa textului, este necesar să se ţină cont
de “contrastul de luminozitate”: textul trebuie să aibă
o culoare luminoasă, iar fundalul una închisă, sau
invers.

http://www.cssmayo.com/cellar/ /

http://www.robotforce.com/web-design-blog/contrast-in-website-design/
Combinaţii ilizibile

http://www.webdesignerdepot.com/2010/09/fully-understanding-contrast-in-design/
Combinaţii lizibile

Ordinea de lizibilitate a combinaţiilor de culori


text/fundal:

1. Negru/galben; 7. Galben/negru;
2. Verde/alb; 8. Alb/verde;
3. Roşu/alb; 9. Alb/roşu;
4. Albastru/alb; 10. Alb/negru;
5. Alb/albastru; 11.Roşu/negru;
6. Negru/alb; 12.Verde/roşu.
Numărarea vizitatorilor

http://www.ewebsitecounter.com/
Legături învechite

http://sharepointwings.blogspot.ro/2013/06/recently-one-of-teammates-has-deleted.html
Legături învechite

http://www.stunningmesh.com/2012/01/135-impressive-404-error-page-not-found-samples-for-your-inspiration/
Legături învechite

http://www.stunningmesh.com/2012/01/135-impressive-404-error-page-not-found-samples-for-your-inspiration/
Pagină în construcţie
Importanta “web-design-ului” in
contextul actual
Popularitatea afacerilor pe internet si mai ales a partii de comert on line este
asigurata de avantaje cum ar fi: transparenta preturilor, disponibilitate ridicata,
astfel ca piata e-comertului va ajuge la 4,5 trilioane dolari in 2021.
La nivel al utilizatorului, forma si continutul paginii web este ceea ce are impact
imediat.
- Usurinta navigarii si atractivitatea paginii, incurajand vizitatorul sa
ramana pe pagini si sa realizeze actiuni (cumparare, distribuire, setari
preferentiale etc)
- Numeroase companii au inceput doar on-line, apoi si-au dezvoltat
afacerea de tip brick and mortar
- Competitia si calitatea afacerii depend direct de calitatea paginii web
- Combinarea princiilor clasice de design web atragator, cu inovatiile si
tehnologia moderna
Importanta “web-design-ului” in
contextul actual
Cateva trend-uri promitatoare in idea de creare de pagini web cu impact:
o Design cu impact
◦ Dimensiuni ecrane – adaptare
◦ Trafic mobil – adaptare de la 21 inch la 4 inch

o Continut video
o Imaginile statice nu sunt intotdeauna de efect
o Un video iti arata si cum sa folosesti un obiect/serviciu
o Fara scroll down, poti afla un istoric sau o prezentare a companiei

oDispunere cu grid
o Bazarea pe un caroiaj, cu ghidare orizonatala si vericala care ajuta organizarea
continutului si mentine o structura a proiectului
o Mentine partea estetica si contrlul asupra proceselor de dezvltare pentru designer si
dezvoltator
Importanta “web-design-ului” in contextul
actual
oMeniuri de tip “hamburger”
• Mod de a ascunde un meniu cand nu e necesar
• Utilizatorul se va concentra
• Site-ul va fi mai spatios si mai “curat”

o Recunoastere voce
o Butoane de “actiune”
o Vizitatorul va fi provocat sa actioneze cu butoane de genul: click here, buy now, try free,
register for free trial etc

o Scrolling lung
o Multi utilizatori considera util loadingul infinit la paginii;
o Ofera iritare in cazul siteurilor de stiri
Importanta “web-design-ului” in contextul
actual
oSpatii albe
◦ Mai elegant, mai profesionist, fara a inceca sa umpli toate spatiile albe din pagina

oEfecte Hover
◦ Un buton cu effect hover ii ofera utilizatorului idea a ceea ce se intampla daca apasa pe
buton sau element, prin diferite efecte care apar cand muti cursorul
◦ Site-urile devin interactive

o“Cinemagrafie”
◦ Imagini cu miscare, fotografie live
◦ Utilizatorul va sta in plus pe un astfel de site, fara elemente statice
◦ Arata mai aproape de realitate
Concluzii

• Tehnicile de proiectare pagini web sunt in dinamica continua

• Cerintele pentru paginile web sunt tot mai mari, proiectantii


de pagini web sunt provocati de tehnologie.

• Corelarea continutului web cu forma in scopul sustinerii unei


afaceri online, prin pagina web aferenta

• Pastrarea principiilor clasice de proiectare si adaptarea la


noile tendinte tehnologice
Exemple negative

http://themagicofbaltimore.blogspot.ro/
Exemple negative

http://www.msy.com.au/home.php
http://grovemade.com/

http://superlooper.universlabs.co
.uk/
https://babadum.com
http://www.latimes.com/
https://www.dropbox.com/business
free hosting - exemplu

000webhost.com

S-ar putea să vă placă și