www.arvutiklass.ee

Internet ja veebilahendused

ANU KURMI ARVUTIKLASSTäiskasvanute koolitusasutuswww.arvutiklass.ee

www.arvutiklass.ee

Veebilehtede loomise põhimõtted

www.arvutiklass.ee

Veebilehe komponendid

Valmis veebileht võib koosneda mitmetest erinevatest komponentidest:

HTML CSS programmeerimiskeeles kirjutatud

scriptid andmebaas graafika- ja helifailid

www.arvutiklass.ee

Veebilehtede loomise põhimõtted

Enne veebilehe tegemist tuleb leida vastused järgnevatele küsimustele:

Mis on selle veebilehe eesmärk? Kes on sihtgrupp? Millist informatsiooni tahate

edastada? Kuidas kavatsete informatsiooni lehel

organiseerida? Millega te esilehel äratate kasutaja

tähelepanu?

www.arvutiklass.ee

Veebilehe planeerimine

Graafiline kujundamine

Informatsiooni arhitektuur

Tüpograafia

Tarbijauuring Analüüs

Toote kasutamine

Informatsiooni kujundamineKasutajaliidese

kujundamine

Strateegia ja planeerimine

Kognitiivnepsühholoogia

Animatsioon Interaktiivne kujundamine

www.arvutiklass.ee

Veebilehe struktuur

Info organiseerimiseks veebileheltuleb esmalt koostada veebilehe struktuur, kus on üldjoontes ära näidatud:

Lehtede paigutus Linkide paiknemine Tekstide kasutus Piltide kasutus

www.arvutiklass.ee

Veebilehe struktuur

HIERARHILINE PAIGUTUS

http://www.sapdesignguild.org/community/design/

hierarchies_categories_vectors.asp

www.arvutiklass.ee

Veebilehe failistruktuurKohe alguses on oluline teha plaan ka failistruktuurist:

Pealehe fail peab üldjuhul olema nimega index

Ülejäänud failidele võib valida vabalt nimetused, kuid mitte kasutada täpitähti ja tühikuid. Failide laiendeid võib olla erinevaid: htm, html, php jne.

Pildifailid organiseerida soovitavalt eraldi kausta

Failinimed peaksid olema võimalikult lühikesed ja viitama nende sisule

www.arvutiklass.ee

Veebilehe tiitelleht

Tiitellehe soovitatav suurus on kuni 65 KB (100 KB), kuna sellisel juhul laetakse avaleht kiiresti kasutaja arvutisse. Kasutaja ei ole tavaliselt nõus ootama üle 10 sekundi ja siirdub mõnele teisele lehele

Mitte üle koormata suuremahuliste piltidega.

www.arvutiklass.ee

Lingid Kasutajal peab alati võimalus olema

linkide kaudu tagasi pöörduda pealehele ja liikuda erinevate teemalehtede vahel

Vajalik on, et lingid igal lehel oleksid ühesuguse välimusega, et kasutajal oleks kerge orienteeruda

Lingid võite teha tekstiga või kasutada graafikat

www.arvutiklass.ee

Info paigutus veebilehel Veebilehel on nähtav tavaliselt ainult

väike osa kogus informatsioonist. Järelikult on vajalik, et oluline info on nähtav kohe lehe avanemisel, mitte kerimisel

Mida vähem kasutaja peab kerimisribasid kasutama seda parem

www.arvutiklass.ee

Veebilehe avalikustamineKui veebileht on valmis ja kontrollitud, võib selle avalikustada. Selleks:

tuleb veebileht üles saata - veebilehe failid kopeeritakse eelnevalt välja valitud veebiserverisse

tuleb veebileht registreerida kataloogides ja otsingusüsteemides

muude reklaamikanalite kõrval saab kasutada veebireklaami. Võib osta bannereid portaalides jm suure külastatavusega veebilehtedes. Bannerile klikates jõuab vaataja siis otse teie veebilehele

Veebilehe tegemise vahendid

www.arvutiklass.ee

www.arvutiklass.ee

Klient-server lahenduse mudel

Veebiinfosüsteemid on üles ehitatud kindlaarhitektuuri järgi.Kuskil asub mingi andmebaas, milles olevaidandmeid saab veebis näha ja vajadusel kaveebi kaudu muuta. Mis on selle kõige taga? Milliseid vahendeid selleks kõigeks on

vaja? Milliseid tarkvaralisi vahendeid selleks

kasutada?

www.arvutiklass.ee

Klient-server lahenduse mudel

Veeb oli algselt lihtne staatiliste linkide süsteem

Esimesteks infosüsteemideks veebis võib pidada otsingumootoreid, mis hakkasid koguma andmeid kogu selle linkide süsteemi kohta

Seejärel ilmusid juba erinevate andmebaaside veebiliidesed, kus veeb oli üheks paljudest väljunditest

Tänapäeval on aga praktiliselt iga infosüsteemi võimalik luua veebipõhisena

www.arvutiklass.ee

Veebiserverid Veebiserver on selline programm, mis

võimaldab arvutis leiduvaid teatud faile näidata kasutaja brauserisse, kui brauser neid küsib

Nagu nimi ütleb on veebiserver server, brauseri kohta võib öelda klient

www.arvutiklass.ee

Veebi programmeerimiskeeled

HTML (Hyper Markup Language) DHTML (Dynamic Hypertext Markup Language) SGML (Standard Generalized Markup Language) XFRML (Extensible Financial Reporting Markup

Language) JavaScript VBScript CGI (The Common Gateway Interface) ASP (Active Server Pages) PHP (Hypertext PreProcessor) PERL (Practical Extracting and Report Language) ActiveX jne

www.arvutiklass.ee

HTML (Hyper Text Markup Language)

HTML e hüpperteksti märkimiskeel, on

peamine WWW lehekülgede tegemiseks

kasutatav sümbolite süsteem. HTML ei ole sisuliseltprogrammeerimiskeel ning WWWlehekülje tegemine ei eelda mingitprogrammeerimisoskust.

www.arvutiklass.ee

HTML HTML on kasutuses World Wide Web

(WWW) võrgus alates 1990. aastast Esialgne HTML võimaldas kasutada

lihtsaid tekstivorminguid (lõik, reavahetus, nimistud), linke ja lihtsat graafikat. HTML versiooni 1.0 ametlikult ei eksisteeri, kuna alguses kasutasid erinevad grupid erinevaid tõlgendusi.

www.arvutiklass.ee

HTML Versioon 2.0 aastast 1994 oli

esimene laialdaselt heakskiidetud standard, mis võimaldas lisaks eelnevale kasutada ka sisestusvorme

Versioon 3.2 aastast 1996 - järgmine suurem standard (aasta varem ilmunud 3.0 jagas HTML+ saatust - palju uuendusi põhjustas lahkarvamusi ja standard ei leidnudki lõplikku heakskiitu), mis tõi laia kasutusse raamidega (frame) lehed, samuti tabelid ning HTMLi-väliste vahenditega loodud valmisprogrammid (applet)

www.arvutiklass.ee

HTML Versioon 4.0/4.01 aastast 1998 -

viimane klassikalise HTMLi versioonidest

Olulise muudatusena viidi kogu esituskuju määramisega tegelev osa (kirjastiilid, värvid jne) märgenditest välja (neid saab kasutada, kuid see on ebasoovitav) - stiililehed leidsid oma koha põhistandardis

Ka laiendati väliste objektide (eri programmeerimiskeeltes loodud skriptid jms) lisamise mehhanismi

www.arvutiklass.ee

XHTML (Extensible Hypertext Markup Language) HTMLi ja XMLi "kokkusulatamisel"

2001. aastal saadi XHTML, mis hetkel on W3C ametlikuks soovituseks.

XHTMLi eripäraks varasemate versioonidega võrreldes on suurem rangus - kõik märgendid on paaris, nõutav on väiketähtede kasutamine märgendites (XML on tõstutundlik) jne. Põhimõtteks on saavutada ühilduvus XMLiga, samal ajal täites ka HTML 4.01 nõudeid

www.arvutiklass.ee

CSS (Cascade Style Sheet )

CSS on üks tähtsaid komponente veebilehe kujundamisel.Samuti on CSS hea lahendus lihtsaltlehekülgede korraldamiseks, kokkupanemiseks.Tegemist on lihtsa asjaga, mida on lihtnekirjutada ja ka aru saada.

www.arvutiklass.ee

CSS

CSS laseb teksti ja pilte paigutada suurema

täpsusega kui lihtsalt HTML. Samuti laseb ta

kergemini muuta teksti atribuute nagusuurus, värv jms

www.arvutiklass.ee

JavaScript

JAVASCRIPT on lihtneprogrammerimiskeel, mille on väljaarendanud Netscape 1995 aastal. JavaScript on mugav vahend tõstmaks

WWWlehekülgede interaktiivsust.

Kasutataksepalju.

www.arvutiklass.ee

PHP

PHP sai alguse juba 1994 aastal.

Rasmus Ledorf kasutas varaseid

avaldamata versioone oma kodulehel

selleks, et teada, kes vaatas tema CV-d,

mis veebis kättesaadav oli. Esimene

avalikustatud versioon oli saadaval

1995 aastal.

www.arvutiklass.ee

W3C (World Wide Web Consortium) Rahvusvaheline Interneti ja veebiga

tegelevate firmade konsortsium Asutati 1994. a Tim Berners-Lee poolt,

kes oli WWW esimene arhitekt Eesmärgiks on välja töötada avatud

standardeid, nii et veeb areneks kindlas suunas ja ei laguneks omavahel konkureerivateks osadeks

http://www.w3.org/

www.arvutiklass.ee

HTML validaator HTML validaator võimaldab kontrollida

HTML-keelse dokumendi korrektsust, lähtudes hetkel kehtivast soovitatavast standardist.

http://validator.w3.org/

www.arvutiklass.ee

Ülevaade veebilehtede loomiseks mõeldud programmidest

www.arvutiklass.ee

Tekstiredaktorid ja HTML toimetajad

HTML kirjutamiseks on loodud mitmeid erinevaid programme. Kõige elementaarsem neist on Notepade - tavaline tekstitöötlusprogramm, mis on kohe kaasas Windows-iga. Erinevaid HTML toimetajaid on võimalik alla laadida aadressil http://www.tucows.com/

www.arvutiklass.ee

Macromedia DreamweaverPeetakse heaks

laiatarbeprogrammiks,millega kodulehekülgi koostada. Häidteadmisi HTML-ist ei ole vaja.Programmile on lisatud ka teatudlisafunktsioon, mis kontrollib leheküljekokkusobivust eri Interneti

brauseritega.

www.arvutiklass.ee

Macromedia Flasch

Interaktiivne vektorgraafika ja veebianimatsioonide tegemise programm. Veebidisainerid kasutavad seda, et luua ilusaid ja uudseid navigatsioonisüsteeme, tehnilisi illustratsioone, pikki animatsioone ja teisi efekte oma leheküljele.

www.arvutiklass.ee

Frontpage

Programm on veebilehekülgedetegemisel küllalt laialt kasutusel.Programmi uuemad versioonid on tasulised.Frontpage programmi kohta saabinformatsiooni URL aadressilt

http://www.microsoft.com/eesti/businessportal/products/howto/buildwebsitefrontpage.mspx

www.arvutiklass.ee

Veebilehe loomise tarkvaradVeel võiks nimetada selliseid tuntumaid programme nagu MS Office paketis MS Publischer, StarOffice, HTML-Kit jne

www.arvutiklass.ee

Veebilehe sisuhaldustarkvarad

Näiteks sisuhaldustarkvarad: Mambo Typo3 Joomla

www.arvutiklass.ee

Kasutatud allikad http://et.wikibooks.org/wiki/

HTML:Ajalugu http://www.w3.org/ http://www.vallaste.ee/