DesainWeb (1)AndriPranolo
Minggu ke2 (24September2011) ( b ) Perkembangan web web.
Mengenal dan menjelaskan perkembangan web.
Konsep awal Mengenal dan menjelaskan Konsep desain web
Sumberacuan Sumber acuan Lecture notes: Lecturenotes:
WebpageDesignbyDavidWatson;Schoolof
ArchitectureandConstruction.Universityof y Greenwich.UK
McIntire,P.2008.VisualDesignfortheModern
Web.NewRiders.Barkeley,USA. WebDesignPrinciplesChecklist.
http://mason.gmu.edu/~montecin/webdesign.ht
mtanggalakses24September2011Jam06.58
Perludesainweb? Perlu desain web?
Web? b?
Sejarah 1980 TimBernersLeemembangunsisteminformasidi
CERNSwitzerlandyangdinamakandenganENQUIRE. 1990
TBLandRobertCailliaumempublikasikanproposal WorldWideWeb. ld d b
akhirtahun1990 TBLmemilikisemuatoolyangdibutuhkan
untukWWW,termasukbrowserpertama. untuk WWW termasuk browser pertama
1991 WWWmenjadilayananpublikdiinternet. 1993
WWWmenjadilayanangratis. 1993
Browsergrafis.VersiasliMosaic,browserwebasli
pertama,dirilisNationalCenterforSupercomputing
Applications(NSCA).
h http://www w.w3.org/H History/1989/proposal l.html
TimBernersLee'soriginalWorldWideWebbrowser
(http://info.cern.ch/NextBrowser.html)
TimBernersLee'soriginalWorldWideWebbrowserin1993
http://info.cern.ch/NextBrowser.html)
TimothyBernersLee
PertumbuhanWeb
http://news.netcraft.com
http://news.netcraft.com
http://www.internetworldstats.com/stats3.htm#asia
WebStandards Web Standards World Wide Web Consortium (www w3
org) WorldWideWebConsortium(www.w3.org) DidirikanolehTimBernersLee
Sebagai Standardweb Sebagai Standard web
URI(UniversalResourceIdentifiers) HTTP (H
HTTP(HyperTextTransportProtocol) T tT t P t l)
HTML(HyperTextMarkupLanguage) d b h l i
danbahasalainnya:CSS(CascadingStyle CSS (C di S l
Sheets);XML(eXtensibleMarkupLanguage)
ClientServerInteraction
WebDesignPrinciples Web Design Principles
Primaryaudience Needs; interests technology; level of audience;
Needs;intereststechnology;levelofaudience; computerequipment
Purposeforthesite u pose o t e s te
Personal;profitearningbusiness;nonprofit
organization;educational;entertainment
Locationofthesite commercialInternetserviceprovider(ISP);
educationalinstitutionserver;organizationserver; educational
institution server; organization server; personalserver
Types of content Typesofcontent
text;graphics;video;applets;sound;formsorsurveys
foruserstofillout(someserversdonotaccomodate forms). f )
Informationprovidedonthe"home"page
a"whoweare"or"whoIam"message;amissionor " h " " h I " i i
purposestatement;contactinformation;update
notice;copyrightnotice;disclaimer(forex:Thoughwe
trytokeeptheinformationuptodate,some t t k th i f ti t d t
informationmaynotbethemostcurrent. OR "This
listdoesnotconstituteanendorsementofanyoneor moreoftheproducts.")
more of the products ")
Content should match the purpose, be well organized, be
shouldmatchthepurpose,bewellorganized,be
spellchecked,observecorrectenglish(orthe appropriatelanguage).
Somesiteshaveinformation inmorethanonelanguage,dependinguponthe g g
, p g p possibleaudiences.;
shouldbecurrentinformation,beappropriateforthe audience
LevelofWebtechnology Minimal style mostly text; little or no
graphics Minimalstyle mostlytext;littleornographics
Middleoftheroadstyle Somegraphics.. High tech style Lots of
graphics, animation, java Hightechstyle
Lotsofgraphics,animation,java applets,"art"text,videoclips,etc
Style professional ;scholarly;casual;teenoriented;child
friendly;artistic;etc.
P Pagedesign consistency,clarity,user d i it l it friendliness
Back to homelink;template;color;contrast;font; Backtohome link;
template; color; contrast; font;
importantinformation;scroling;categorizeand
hierarchy;layoutpage;etc..
Resolution Standard for screen resolution is 800 (width) by 600
Standardforscreenresolutionis800(width) by600 (height)
Graphics *.jpg;*.gif;*.tiff;flashanimation
Backgroundandtextcolors Patternedbackgrounds
Providesufficientcontrastbetweenbackgroundandtext Limit your font
colors Limityourfontcolors
Useofframes (outoffavor)
Hardtonavigate;Searchenginescan'talwaysindextheir contents
Observeaccessibilityforthedisabledguidelines Try out your site
on different browsers and different
Tryoutyoursiteondifferentbrowsersanddifferent
versionsofbrowsers(Ie,FF,Netscape;Safari,etc)
Whatisprotectedbycopyrightrulesonthe WWW:Everything WWW :
Everything WhencreatingaWebpage,youCAN:Linkto otherWebsites
WhencreatingaWebpage,youmaybeliableif you: Put the contents of
another person's or organizations Putthecontentsofanotherperson
sororganizations websiteonyourWebpage
Copyandpasteinformationtogetherfromvarious
Internetsourcestocreate"yourown"document I t t t t " "d t
Copyandpastelogos,icons,andothergraphicsfrom
otherwebsitestoyourwebpageunlessitisclearly
advertisedas"free"andyoufollowtheoriginal d i d "f " d f ll h i i l
source'sguidelinesforpostingmaterial. Etc
Protectyourprivacyandreputationonline y p y p
Don'tdiscloseprivateinformationaboutyourself orothers.
Don'tgiveouthomephonenumbersorhome addresses. What you link to
helps define who you are and Whatyoulinktohelpsdefinewhoyouareand
whatyourorganizationrepresents. Avoid exaggerated claims if
promoting a product Avoidexaggeratedclaimsifpromotingaproduct
ororganization. Citesourcesofinformation. Observecopyrightrules.
Useoriginalgraphicsorfreegraphicsorclipart
HowdoIbuildawebsite? How do I build a website?
Workflow
Whoisthewebsitefor? Who is the website for? Thedesigner? The
designer? Theclient? Theuser? h ? Knowyouraudience.
Applya"usercentred"designapproach.
Awebsitethatisnotuseableorusefulforits A website that is not
useable or useful for its targetaudienceisuseless.
Thewebdesignprocess
WebSiteDevelopmentLifeCycle
WebSiteConstructionIsaSpiral.
Anatomyofawebpage
Webpagecomponents Thestructurallayer XHTML Thepresentationlayer
CSS The behavioural layer JavaScript and/or other
Thebehaviourallayer JavaScriptand/orother Imagesinvariousformats
JPG,GIF&PNG Mediafiles audio,videoandFlash
Software Therearelotsofoptions,bothfreeandpaid.
Youmayprefertouseseparatetoolsforcodeediting
andFTPoryoumaypreferanintegrated developmentenvironment. You'll
also need an image editor. You llalsoneedanimageeditor.
You'llneedlotsofbrowsers,notjustIE.
CodeeditingandFTP Code editing and FTP
Editor:NotepadorNotepad++ FTP:SmartFTP orFileZilla
Integrateddevelopmenttools Integrated development tools
Dreamweaver orAptana Studio
Softwareapplications NotepadorNotepad++ SmartFTP orFileZilla
AdobeDreamweaverorAptana Studio AdobePhotoshoporPaint.NET p
Browsers:IE,FF,Opera,Safari,Chrome...
Anyothersoftwareyoufinduseful
Maturnuwun
