1. desain web - konsep awal
Post on 17-Jul-2015
77 Views
Preview:
TRANSCRIPT
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
top related