Documente Academic
Documente Profesional
Documente Cultură
PROIECTAREA SI REALIZAREA
AFACERILOR PE INTERNET
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
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
</body>
Extensii, scripturi si programe
- DHTML
- XML (eXtensible Markup Language) si XSL (eXtensible Stylesheet
Language)
-JavaScript
-Java Applets
-ActiveX Controls
◦ Server propriu
◦ Gazduire gratuita pe un site comercial
◦ Gazduire cu taxa pe un site comercial
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 .
- 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
25
Crearea unui design corespunzator
Continutul este important, dar nu va putea, singur, sa asigure functionalitatea
paginii web.
Usor de inteles
Interesant
Usor de utilizat
Uniform in ceea ce transmite
26
Etapa de pre-proiectare a paginii web
oMisiunea organizatiei pentru care se creaza pagina
oOrganizarea continutului
◦ Organizarea si stabilirea ierarhiei continutului
◦ Divizarea continutului in unitati logice de informatie
Crearea unei schite sau a planului pentru
continut
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.
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ă:
Asigurarea contextului
- Utilizatorul nu are acces la întreaga informaţie
disponibilă pe un site
Utilizarea majusculelor
Dimensiunea
Tipul corpului de literă (font)
Gruparea & aranjamentul
Spatierea
Alinierea
Utilizarea titlurilor/subtitlurilor
Titlul paginii
Alegerea domeniului
http://blog.trafic.ro/2011/07/19/7-reguli-pentru-alegerea-domeniului-perfect/
Alegerea domeniului – Reguli
http://blog.trafic.ro/2011/07/19/7-reguli-pentru-alegerea-domeniului-perfect/
Alegerea domeniului - reguli:
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
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
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
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