Title: Web dizains
1Web dizains
- Piezimes, konspekti
- Imants Gorbans2003.
2"The power of the Web is in its universality.
Access by everyone regardless of disability is an
essential aspect." -- Tim Berners-Lee, W3C
Director and inventor of the World Wide Web
http//www.w3.org/
Web Accessibility Initiative (WAI) http//www.w3.o
rg/WAI/
33 lietas, ko der nodalit Web lapa
4Parlukprogrammas
To jaunakas versijas /Top-3/ MS IE 6.0, Opera
7.21, Netscape 7.1 To vecakas vel lietotas
versijas /Top-2/ MS IE 4.0, Netscape
4.7x Popularakas /Top-10/ ... Mozilla
1.5, Lynx Konqueror ...
5A---W
AWeb AmiTrix Beonex Ben Bucksch Bobby Center
for Applied Special Technology Bohemian Net
Browser BohemianNet BrownIE Compunet
Browse2000 1st Choice Software CAB Alexander
Clauss Cello Thomas Bruce Charlie Mundial
Avenue
1x Science Traveller International Air Mosaic
Demo Sprynet AllWorld Explorer G.O.
International Air Service Amaya W3C
Arachne xChaos ArcWeb Stewart Brodie
Ariadna Advanced Multimedia System Design
AtomNet Change 7
6ChiBrow KCS Associates Chimera University of
Nevada Las Vegas Contiki Adam Dunkels Custom
Browser LION Cyberdog Apple Computer, inc.
CyberGate BlackSun Interactive Cyber
Passage Sony DigiCams DigiBand
DOSLynx University of Kansas DR-WebSpyder Cald
era
Emacs-W3 William M. Perry Emissary Attachmate
FreeWebBrowser Yellow Tree Services
Galahad Jean van Waterschoot goAnywhere! Mikey
LeBeau Grail Corporation for National Research
Initiatives GrassHopper MDI Explorer Santrim
Software HandWeb Smartcode Software HexaBit
Junior HexaBit Home Page Reader IBM
7HotJava Sun Microsystems I-comm Talent
Communications I-O-D-4 - The Web Stalker Escape
I-View EnReach Technology iBrowse Omnipresence
International iCab Alexander Clauss iCab
Company Internet Explorer Sprynet Internet
Explorer Microsoft Internet Plus Dean Software
Design Internet WorkHorse MarketNet
KidNet Explorer Resource Communications KidSafe
Explorer Arlington Technology LIS Web
Browser Lahman Internet Services
Lynx Distributed Computing Group
MacLynx Olivier Gutknecht MacWeb TradeWave
(EINet) MacWWW (Samba) CERN MathBrowser MathSo
ft Microviet First Explorer Microviet
Minuet University of Minnesota
8Mosaic National Center for Supercomputing
Applications Mosaic QuarterDeck Mosaic SpryNet
Mosaic Spyglass Mozilla The Mozilla
Organization Multilingual Mosaic Accent
Software MultiWeb Viewer MultiSource
MyBrowser Softorange Navigator Netscape
Communications Corporation
NCompass ExCITE NeoPlanet NeoPlanet
Net-Tamer Net-Tamer NetCaptor Stilesoft
NetCruiser Netcom NetForKids WebData
Communications Net M_at_anager Virtual Innovations
Netomat Maciej Wisniewski NetPositive Be,
Inc. NetSentry Natdat
9NetShark InterCon NetShift NetShift Software
Nuthin' But Net PAKSoft Productions Off By
One Home Page Software OmniWeb OmniGroup
Opera Opera Software PowerBrowser Oracle
ProStream Browser PS Group pwWebSpeak
Plus The Productivity Works Pythia Appian
Interactive
QuickScape Quickscape Santa's Browser Branded
Browser Technologies SimulBrowse Seaglass
Software SiteKiosk ProVisio GmbH
SlipKnot MicroMind Softerm Plus Softronics
SuperHighway Browser Frontier Technologies
Surfin' Annette SpyCatcher SurfMonkey MediaLiv
e Talking Browser WeMedia
10Talva Document Explorer Talva Tango
Multilingual Alis Technologies The Other
Browser-Emailer Pixelogic UdiWWW Bernd Richter
Video On Line Browser Video On Line
Voyager VaporWare WannaBe David T. Pierson
Web-O-Matic Digital Browser Circle Group
Internet, Inc. Web SurfACE ToolPool
Web-Talkit Grover Industries x
WebExplorer IBM WebProwler MacroByte
WebRacer Software Savvy Websurfer NetManage
WebTV Viewer WebTV Networks WebView South
Pacific Information Services WebWhacker Blue
Squirrel Wildcat Navigator Harmony
International WinWEB TradeWave (EINet)
WorldWideWeb (Nexus) Tim Berners-Lee
11Popularakas /Top-10/
- Netscape http//www.netscape.com/
- Microsoft Internet Explorer (IE)
http//www.microsoft.com/windows/ie/ - Mozilla http//www.mozilla.org/
- Opera http//www.opera.com/
- Amaya - W3C's testbed browser
http//www.w3.org/Amaya/ - Lynx http//www.ku.edu/grobe/docs/Lynx_users_
guide.html - Neoplanet http//www.neoplanet.com/
- Apple Safari - from Apple Computer
http//www.apple.com/safari/ - Konqueror - Unix-based Web browser, file
manager, and universal viewer from KDE
http//www.konqueror.org/ - iCab - web browser for Macintosh
http//www.icab.de/
12Tas, ko sauc par kludam
Veidojot laps tikai priek MS IE, tiek zaudeti
5...15 apmekletaju.
13(No Transcript)
14Veca skola
Ciena pret apmekletaja laiku un provaidera
noslodzi tiei vai netiei ir jamaksa ir ari par
Web servera izejoo trafiku
15Modernas lapas
adas attelu lapas modificeana nozime tas daleju
parbuvi- atteli javeido, jasagrie, jaoptimize no
jauna. Statiskums, neelastiba. Likt eit teksta
linkus- dizains bus sabojats (lidzigas problemas
ir ari Flash).
16Tomer viens attels biei ir simtiem vardu verts.
17Ir jadoma ari par negrafiskiem browseriem,
piemeram lappuses apaka liekot velreiz linkus.
18Struktura, prezentacija, notikumi
- Struktura. XHTML ir XML, kas darbojas ka HTML.
To izmanto Palm Pilot, plaukstas datori, Web
mobilie telefoni. XHTML ir standarts, kas tuvojas
HTML 4 vieta. - CSS1, CSS2.Stilu lietoana lauj maksimali
atdalit izskatu no strukturas un notikumierm.
Veidojami atseviki stili parlukprogrammam,
printerim, citam klienta iericem. - Notikumi.Dinamiskas lapas jarekinas, lai
notikumi nav tika IE vai tikai Netscape
saprotami. im nolukam viens no polularakajiem
risinajumiem ir PHP (konkurekoi produkti ir ASP,
Perl u.c.).
19Lapa plaukstas datora- bez speci alas versijas,
WAP
20Normalskata un izdrukas versija (ar CSS)
21Daadas pieejas
Klasiska Web lapu projekteanas pieeja
(dargi) lietot tikai licenzetus, orginalus
skriptus, detektet parlukprogrammu un ieladet
atbilstoo lapas versiju, parlukprogrammu
ipatnibu ieveroanu (versijas...) Jaunakas
tendences (letak) lietot modulu
strukturu, detektet parlukprogrammu un ieladet
atbilstoo CSS, bet lappuse paliek
viena, veidot XHTML, stingru kodu, lietot
tabulas, bet ne bez vajadzibas, ja lapu skatis
ari altenativajos ekranos, maksimali daudz
lietot stilus, nelietot tieus, piem., fontu
formatejumus.
22Web lapas veidoana
- Konceptualie modeli
- izteloties, ka lapa stradas un ka ar interfeisu
vares to darbinat, javeido blokshema kopa ar
pasutitaju. - Izstrades modeli
- tehnisko risinajumu varianti, to nesaskanoana
ved pie kludam, nelietot viena projekta parak
daudz valodas. - Dizaina modeli
- padarit idejas redzamas
- izveidot labi atrodamas saites, rikus
- veidot norades, palidzibu
23Bieak lapas izmantotais riks ir mekletajs,
cilvekus nogurdina linku lasiana Otrs bieak
izmantotais ir palidziba, apraksts
- Web lapa satur
- Lietotajiem redzamo informaciju
- Navigacijas vienibas, ieskaitot gramatzimes
ielikanu, hipersaites - Informaciju, ieskaitot attelus
- Pakalpojumu, ko ta interaktivi sniedz
apmekletajam (is klust pedeja laika galvenais
Web lapas merkis)
24Piesleganas pakalpojumam
a) Desktop bazets risinajumsb) Web bazets
risinajums
25Desktop un Web salidzinajums
- Back (previous) desktop vedni
- parasti atcel pedeja soli veikta izmainas
- Back Web lapas
- back poga parlukprogramma ne vienmer ir tas
pats, kas atcelt darbibu serverim ir jadod
noteiktas komandas, lai tas var veikt noteiktas
darbibas ar sesiju, parasts back biei partrauc
sesiju katastrofiskas atteices reima - vai var dot userim vienmer back iespeju?- var
(ar zinamu darbu...), bet ta nav laba ideja - Skaidri defineta izeja no vedna
- acim redzama desktop risinajuma, bet parasti nav
Web.
26(No Transcript)
27Es neatceros, ko perku...
Desktop ir dialoga logi, kas mazaki par pamatlogu
un palidz saglabay konteksta izjutu. Web aiziet
uz jaunu lappusi, kas tikpat liela ka
iepriekejas, biei nakas iet atpakal, lai
saprastu, kur atrodies, safukart pec tam ejot
forward biei pazaudejas saliktas izveles,
keki (ja vispar nav pazudusi sesija). Ilgais
ielades laiks biei vienkari spie atcereties
visu lapu no galvas vai pierakstit. Risinajumi
iet celu- jaunas informacijas dinamiska
pievienoana lappuse (kas apmekletajam visu laiku
jaredz?), domat par lapas atrdarbibu (optimizet
grafiku un celt servera raibu).
28Lapas efektivitate
- 10 SEKUNU LIKUMS
- Tas ir tipisks cilveka gaidianas laiks, lidz
jauna lappuse atveras, vai ari zud interese par
to (izriet no medicinas) - 15 SEKUNDES VEL IR PIENEMAMAS WWW
- Cilveki ir iemacijuies gaidit, bet tikai pec
kaut ka svariga un nedaudzas reizes - SKUMJA PIEREDZE
- Darbam vajadzigas lapas ir diena parslogotas un
nakas tas browset vakara. Internets kopuma neklus
daudz atraks, biei pat lenaks sakara ar lielo
muzikas, video un update trafiku.
29LAPAS STRUKTURA Veidot skaidru, logisku strukturu
un atbilstou lapas karti, tai japalidz
apmekletajam skaidri saprast, kur es
atrodos. LAPAS LOGO tam ir links uz pirmo
lappusi- majas. Katrai lappusei ir jasatur
identifikacija- kuram Web mezglam ta pieder TURET
LAPAS ATJAUNOTAS likt norades uz jaunumiem,
paredzet iespeju sekretarei viegli mainit vismaz
dalu satura, novakt novecojuu informaciju. Lapas
bez datuma rada neuzticibu.
30HIPERSAITES tam jabut neparprotami pamanamam
teksta (ari tad, ja nelieto nokluseto
zils/sarkans/violets). Ir labi, ja saiu panelis
vienlaikus palidz saprast, kur es
atrodos. RITJOSLAS LIETOJUMS Daudzi lietotaji
medz nmeskrullet arpus redzamas ekrana dalas.
Svarigakajam jabut redzamam uzreiz ieejot lapa,
tas augdala. Vairak par 3 ritjoslas klikkiem
(ekraniem) lapai garakai noteikti nevajadzetu
but.
31NAVIGACIJA Lapas navigacijas joslai jabut pec
iespejas garakai, galvenajiem linkiem ir
neparprotami jadomine. Apmekletajam nav jaiet
visam lapam cauri lai nonaktu uz
vajadzigo.Apmekletajam nav jaiet atpkal, lai
nonaktu uz sakumlapu
KAS PIEMERA NAV LABI?
32Hipersaitem jabut cilveciski lasamam, tas noder
lappusi saglabajot, liekot gramatzimi (nevis
newpage127.html Lietot visiem pazistamus
simbolus, daudzi nezin, ka iegut tildes zimi
. DODIET CILVEKAM MIERU, LAI VAR LASIT
TEKSTU! Nelietot muigi kustigus elementus, tie
nogurdina apmekletaju. Fona melodiju japaredz
iespeju izslegt. Necentieties but parak aspratigi
vai saregiti ja Jusu lapa dators pakarsies,
cilveks taja vairs neatgriezisies.
33Neatstat lapa nevienu nestradajou saiti, neesou
attelu. Cieniet citus neatveriet sveas lapas
savejas ramjos (frame). Mekletajiem ir problemas
ar freimjiem, pareizi jasaliek metakomandas- ko
indekset, ko ne. Vismaz 70...90 lapu nelieto
ramjus.
34- Nielsens top 10 list (required reading)
- http//www.useit.com/alertbox/9605.html
- Web pages that suck
- http//www.webpagesthatsuck.com/
- Net tips for designers
- http//www.dsiegel.com/tips/
- User Interface Engineering
- http///www.uie.com
35Web veidoanas process
36Atklaana klienta specifikacijas, lietotaju
raksturojums
Petiana ideju vizualizacija, grafikas
uzmetumi, navigacija
Idejas attiriana detalizacija, grafikas
noslipeana
Tehniska realizacija ar visam detalam
... ar sekojou uztureanu, atjaunoanu
37(No Transcript)
38(No Transcript)
39(No Transcript)
40Lapas izveides likumi (dai)
Skaidrs pirmais iespaids, sadarbojas virsraksti
un logo, saprotama navigacija Lapai jabut viegli
apdeitojamai, atjaunojamai, papildinamai. Pilna
navigacija kreisaja vai labaja mala, izcelas
galvenie- merka raksti Ir detalizetas
apaksekcijas pa temam Biznesa lapas parasti ir
kopuma gaias, nav raibas, nav vienkrasainas
41Rupejieties par pozitivu pirmo iespaidu. Lai lapa
nekrit uz nerviem, ilgi atstata uz ekrana ka
fons, darbavietas dekoracija (ari). Ari cieminam
ir kaut kas jasanem, ne tikai autorizetiem
lietotajiem. Valodai ir parlukprogramma
jadetektejas automatiski Ko cilveks lapa ierauga
pirmo. Tam jabut tam, ko mekle, kas taja galvenais
42Portaliem jadod iespeja personalizet izskatu,
temas Lieki nenoslogot lapas, piem. 29 FrontPage
Hower Buttons var radiit ielades problemas lidz
pat katastrofiskai datora atteicei, restartiem
43Veidi radit labu lapu
- Fokuseties uz vienu pamattemu, atzimet to ka
lielaku, pamanamu - Testejiet lapu, radiet vairakas dizaina versijas
patikamu ieladi- bez tabulu lecieniem - Lietojiet saderigas krasas
- Kaut kam lapa jabut orginalam
- Vienkara, produktiva navigacija, piedavajiet
vairakas navigacijas iespejas, ari lapas karti,
mekletaju - Iekardiniet lietotaju atgriezties, regulari
atjaunot - Lapai jaieladejas daas (2...3) sekundes, Pec
iespejas lietot daudz HTML tekstu
448. Strukturejiet tekstu
459. Teksta izmantojiet iekejas saites, saites uz
citam lapam 10. Tekstam jasakas ar kaut ko labu
un jaturpinas ar galveno 11. Publicejiet 50 no
ta apjoma, ko varetu publicet 12. Lapai ir jarada
uzticiba, pirms lietotajam liek ierakstit savus
personas datus
46Sadarbosimies ar pasauli ap mums!
47Literatura
http//bmrc.berkeley.edu/courseware/cs160/fall00/L
ectures/ http//www.useit.com/alertbox/ http//br
owsers.evolt.org/ Luke Welling and Laura Thomson.
PHP and MySQL Web Development. SAMS. 2000.
48(No Transcript)