Web dizains

1
Web 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/
3
3 lietas, ko der nodalit Web lapa
4
Parlukprogrammas
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 ...
5
A---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
6
ChiBrow 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
7
HotJava 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
8
Mosaic 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
9
NetShark 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
10
Talva 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
11
Popularakas /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/

12
Tas, ko sauc par kludam
Veidojot laps tikai priek MS IE, tiek zaudeti
5...15 apmekletaju.
13
(No Transcript)
14
Veca skola
Ciena pret apmekletaja laiku un provaidera
noslodzi tiei vai netiei ir jamaksa ir ari par
Web servera izejoo trafiku
15
Modernas 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).
16
Tomer viens attels biei ir simtiem vardu verts.
17
Ir jadoma ari par negrafiskiem browseriem,
piemeram lappuses apaka liekot velreiz linkus.
18
Struktura, 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.).

19
Lapa plaukstas datora- bez speci alas versijas,
WAP
20
Normalskata un izdrukas versija (ar CSS)
21
Daadas 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.
22
Web 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

23
Bieak 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)

24
Piesleganas pakalpojumam
a) Desktop bazets risinajumsb) Web bazets
risinajums
25
Desktop 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)
27
Es 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).
28
Lapas 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.

29
LAPAS 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.
30
HIPERSAITES 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.
31
NAVIGACIJA 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?
32
Hipersaitem 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.
33
Neatstat 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

35
Web veidoanas process
36
Atklaana 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)
40
Lapas 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
41
Rupejieties 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
42
Portaliem jadod iespeja personalizet izskatu,
temas Lieki nenoslogot lapas, piem. 29 FrontPage
Hower Buttons var radiit ielades problemas lidz
pat katastrofiskai datora atteicei, restartiem
43
Veidi 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

44
8. Strukturejiet tekstu
45
9. 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
46
Sadarbosimies ar pasauli ap mums!
47
Literatura
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)