MS SilverLight veebidisaini 2. osa

Jätkub veebidisaini koolitus. Täna on disainipäev, rääitakse veebilehe kujundusest, värvidest, fontidest jne.

Andrus Rinde:

• Veebidisaini loomise meeskond koosneb projektijuhist, veebidisainerist (graafikadisainer, mutlimeediumidisainer, kasutajaliidese disainer, kasutajakogemuse disainer), veebiprogrammeerija ehk arendaja, dokumenteerija, testija, tellija ehk klient. Lisaks võib-olla kaasatud vajadusel valdkonna spetsialist, operaator (video puhul) jt.
• Elutsükkel: nõudmiste välja selgitamine, kavand, teostus, kontroll/test, tugiteenus.
• Arendusmudelid: koskmudel (waterfall), spiraalmudel (spiral), tähtmudel (star) jpt. MS kasutab spiraalmudelit, arendus toimub kõike uuel tasemel korrates.
• ADDIE mudel -
  • Analüüs: koguda funktsionaalsed ja kasutuskõlbulikkuse nõuded ning nõuded andmetele; veebilehe eesmärkide selgitamine; sihtgrupp; milliseid komponente kasutada ja kui olulised nad on (kriitilise tähtsusega, lihtsalt kasulikud, võiks lisada, kui nende jaoks resursse jätkub); kliendi soovid veebilehe välimuse osas; võimalused ja vajadused veebimajutuseks.
  • Disain: veebilehe struktuur, kuidas sisu organiseerida; prototüübid (võimaldab kliendi tagasisidet varajases staadiumis); sisukaardid.
  • Arendus (Development): spetsifikatsioonile vastava lehe loomine; kogu protsessi jooksul keskenduda kliendi vajadustele.
  • Rakendamine (Implementing): toimub testimine ja vigade leidmine ning parandamine; testserveril saab testida ka klient; koostatakse rakenduse dokumentatsioon; koolitatakse kasutajad (admin); veebileht publitseeritakse.
  • Hindamine (Evaluation): toimub pärast käiku andmist; formaalne kasutuskõlbulikkuse hindamine (nt Google Analytics, serveri logid jms); see jääb tihti tegemata kuna jääb kokkuleppimata.
• Näidisprojekti stsenaarium.
  • Kasutada .xml faili andmete elementaarseks säilitamiseks.
  • NB! C# - C sharp

Kersti Laidvee:

• Omandame MS Expression Design'i: http:/www. microsoft.com/expression/try-it/
• Eestikeelne juhend algusega lk 45.
• http://www.lynda.com/home/DisplayCourse.aspx?lpk2=339
• http://www.microsoft.com/video
• Studioe3 - abiks harjutuste välja mõtlemiseks;
• Programmi lühiülevaade
  • tutvumiseks ava Expression Design 3's >Help>Samples;
  • teistesse rakendustesse viimiseks vali >File>Export, kasuta XAML Silverlight 3 Canvas formaati (vektorformaat), et objekt oleks töödeldav edaspidi; .png ja .gif tunnistavad läbipaistvust, .jpeg ei tunnista; AntiAlias hägustab/teravustab serva;
  • minimeerib kõik aknad;
  • sisse toomiseks >File>Import, kui vailda Adobe PhotoShop file, siis tuuakse kihtide kaupa;
  • dokumendi resolutsioon tuleb hoida 96 px/inch (mitte 72 nagu tavaliselt), et eksportimisel säiliks suurus üks-ühele;
  • täidete ja kontuuride vaatamiseks >View>Display Quality
  • tööriistade ja tahvlite näitamine ekraanil käib läbi >Window
  • õpetaja soovitab kujundada teistes ja kasutada seda programmi tükeldamiseks (slicing);
• Lihtsamate graafiliste kujunduselementide loomine, töö objektidega
  • StopAlfa laseb muuta elemendi läbipaistvust;
  • hoides all klahvi, muutuvad kujundid korrapärasteks, nt ruut, ring;
  • hoides all klahvi, saad jooonistada alates keskpunktist;
  • hoides all tühikut, tekib käsi mis võimaldab liigutada;
  • + tühik annab luubi;
  • VALGE NOOL mõjub ankurpunktidele ja jätab kurvi muutmata;
  • PEN töörista alt saab valida ÕHUKESE NOOLE, see muubad ainult kurvi ühte poolt ja jätab taas punkti muutmata;
• Töö piltidega ja eksportimine
• >Object>Image>Create image object> lubab lõigata tükke pildist
• >Object>Image>Autotrace image abil saab objekti vektorjoonteks
• pilditöötluse vahendid on kõik EFFECT paleti all
• (valge) tausta eemaldamiseks PENiga joonista ümber objekti joon, seejärel vali taust koos objektiga ning vali >Object>Clipping Path>Make with Top Path
• raami lisamiseks ümber pildi tee sama: märgi mõlemad ja >Object>Clipping Path>Make with Top Path
• Veebikujundus (materjalis lk 54), värvide kasutamine (väike videoõpetus), kujunduse 3 nippi (kontrast, suurus, paigutus)
• www.totaltraining.com/expression2
• kasutada värviringi, valida viis värvi ja mängida hele-tumedustega;
• luua mugavuse mõttes New Swatch Library ja sealt valida kokkusobivaid värve;
• http://colorschemedesigner.com on väha vahva soovitus värvide kombineerimiseks;
• www.pagetutor.com/colorpicker/index.html
• Veebilehekujunduse tükeldamine
• Eksport - XAML ja raster