MS SilverLight veebidisaini 6. osa

Andrus Rinde räägib pisut HTML'ist ja CSS'st.
HTML'i teab maailm juba aastast 1990, kui sündis WWW. WWW sündis CERNis tuumafüüsikute ühendamiseks.

HTML tekstielemendid: pealkirjad (h1 ... h5); tekstilõik (p); reavahetus (br); lõigu sees eraldi kujundatav fraas (span); loendid (ul, ol)

HTML teksti vormindamine: rasvane kiri (bold); kaldkiri (italic); eriti rõhutatud tekst (strong); suurendatud (big); üla- ja alaindeks

HTML pildielement: element (img), kaks kohustuslikku atribuuti src (viide piltifailile või URL) ja alt. Saab ka vaida laiust (width) ja kõrgust (height).

HTML hüperlink: element (a), üks kohustuslik atribuut href (lingitava materjali URL). Valikuline atribuut akna valikuks on target.

HTML tabel: enamus veebilehti on kujundatud tabelite abil. Tabeli loob element (table), rea loob (tr) ja lahtri loob element (td). Laiuse (width) saab anda pikselites või protsentides. (border) tegeleb äärtega, (cellspacing) ja (cellpadding) puhverdavad lahtreid. Joondus on horisontaalne (align) ja vertikaalne (valign). (colspan) ja (rowspan) võimaldavad lahtreid venitada üle teiste.

HTML alajaotused: element (div) aitab grupeerida objekte, et neid stiile kasutades kujundada.

CSS (Cascading Style Sheets) on astmelised stiililehed, milles märgitakse üles veebilehtede kujundus. Stiile võetakse arvesse järgmises järjestuses, kus viimane on kõrgeima prioriteediga:

• veebilehitseja vaikestiil;
• väline stiil ehk lingitud CSS lehed;
• sisemine stiil ehk HTML elemendid (head) osas defineeritud stiil;
• reastiil, konkreetse HTML elemendi sees määratud stiil.

Kujundusklasside (class) kasutamisel peab soovitud elementide algusmärgenditesse soovitud klass kirja panema.

CSS'i kommentaar on /* Kommentaar */

Kolm tähtsat osa on selector {property: value}, mitmetäheline väärtus pannakse jutumärkidesse. Erinevad omadused eraldatakse semikooloniga.

Klassid võimaldavad sama tüüpi elementidel erinevaid kujundusi luua: selector.class {property: value}. Universaalsed klassid sobivad erinevatele elementidele: .class {property: class}.

NB! 16 px = 1 em.

Näidiseid erinevatest (eba)kujundustest:

• https://e.bcskoolitus.ee/veebidisain/yks.html
• https://e.bcskoolitus.ee/veebidisain/yksyks.html
• https://e.bcskoolitus.ee/veebidisain/kaks.html
• https://e.bcskoolitus.ee/veebidisain/kakskaks.html

Samuti, saab panna DeepZoom objekti HTML'i faili ja seda palju lihtsamalt kui Silverlight objekti.

Näited uuest HTML5'st:

• http://www.youtube.com/html5
• http://www.youtube.com/watch?v=3R6sb4NO25E

Need on tehtud HTML ja CSS'dega, pole vaja mingit MS Sliverlight pluginit.

MS SilverLight veebidisaini 5. osa

Suure taasiseseisvumispüha hommiku avas Ilja Šmorgun, kes räägib täna veebirakenduse sidumisest XML andmebaasidega.

Kui eelmistel päevadel olime disaininud ja nuppe ehitanud, siis täna koostame küsimustiku vormi ja andmebaasilaadse XML'i (Extensible Markup Language) faili. XML'i kasutatakse veebiteenustes, andmevahetustes, uues MS Word'i dokumentide formaadis *.docx.

XML päises on toodud kodeering, mis hõlbustab programmil erisümbolitest arusaamist, nt täpitähed, kirillitsa jne.

Et Silverlight saaks hakkama XML'iga, tuleb nende vahele lisada veebiteenus - serverimaailmast võetud tükk, mis tagab andmevahetuse.

Code-behind failid *.cs:

• kui Blendis luua uus aken, siis luuakse fail UusAken.xaml ja koos sellega UuasAken.xaml.cs, mis ongi code-behind fail.
• Seda kasutatakse koodi jaoks ja on algselt peidetud.
• Sinna lisatakse, näiteks, tegevus, mida me soovime, et juhtuks kui klõpsatakse hiirt jne.

Vt ka koolitusmaterjaist 'Andmete sidumine XML'i abil'.

XML namespace (xmlns) kontrollib skeeme MS serveri skeemidega.

DataGrid (selle leiab Assets>Controls) on tabel, mida kasutatakse nimekirjade näitamiseks.

• IsReadOnly otsustab, kas andmeid tohib muuta;
• AutoGenerateColumns näitab andmebaasi kõiki välju;
• väike valge ruuduke ja 'Reset' võimaldab nullida väärtusi, näiteks veeristel;

Tabeli ridade ja veergude loomiseks tuleb valida 'Properties' alt otsingust 'ColumnDefinitions' ja 'RowDefinitions' ning klikkides lisada nii palju kui vaja ja paremast paneelist saab neid siis defineerida Auto või etteantud pikselite laiuseks.

Andmete salvestamise protsess koosneb 4 etapist (kuna Silverlight ja XML ei räägi teineteisega otse):

1. Loe XML'i andmed;
2. Salvesta andmed mällu;
3. Lisa uue isiku andmed;
4. Kirjuta vana XML üle.

Rakenduse publitseerimine

Windowsi server + ASP.NET tugi

MS SilverLight veebidisaini 4. osa

Uue projekti loomist tutvustab täna taas Jaana Metsamaa. Sel korral alustame MS Expression Design'is valmis tehtud ja tükeldatud alusega ja kopeerime selle NotePad abil MainPage.xaml faili.
Kõigepealt kopeerime tausta, siis järjekorras kõik õhupallid, millest teeme nupud.
Nuppude tegemiseks tuleb grupil klikkida hiire paremat nuppu ja valida 'Make Into control'. Seal valida 'Button', nimetada, valida 'Application' ja salvestada.

DeepZoom komplekteerimise paar väga olulist nippi:

1. lisada 'MultiScaleImage';
2. kataloogi 'ClientBin' tuleb kopeerida kogu kataloog ...\Expression\Deep Zoom Composer Projects\kylli_sugavuti\Exported Data\kylli_proov\GeneratedImages sisu;
3. peale fotode importimist tuleb tervele projekti failile teha 'Refresh';
4. 'Common Properties' alt tuleb valida 'Source' - dzc_output.xml

Et saada DeepZoom efekt ka tööle, selleks tuleb 'Projects' kataloogipuus klikkida paremat hiireklahvi põhi projektifataloogi peal ja valida 'Add Reference ...'. Seejärel tuleb üles otsida rägastikust selline fail: ...\Expression\Deep Zoom Composer Projects\kylli_sugavuti\Exported Data\kylli_proov\DeepZoomProject\Bin\Debug\DeepZoomProjects.dll

Assets'i alt vali Behaviors, vali 'DeepZoomInitializer' ja lohista 'MultiScaleImage' peale selles failis, millesse rakendust soovitakse.

MS SilverLight veebidisaini 3. osa

Tänane hommik hakkas peale MicroSofti tutvustusega Andres Sirel MS Eestist (http://blogs.msdn.com/evangelism, andres.sirel@microsoft.com). MS Live Mesh ja PhotoSynth on põnevad veebipõhised vabavarad, mida tasub koolis katsetada.
MS haridusprogrammid:

• DreamSpark - aitab teostada õpilaste unistusi, annab tasuta õpilastele MS tarkvara. Õppuril peab olema ISIC kaart või liituvad koolid tervikuna ja selle teeb üks õpetaja;
• msdn Academic Alliance - annab koolile uusima MS tehnoloogia. Designer AA on mõeldud õppetoolidele, mis õpetavad kujundamist, illustreerimist jne. Veebistuudiumi kursuslased saavad $399 maksva programmi tasuta.
  • mugav veebipõine tarkvara jagamine (ELMS);
  • tarkvara tohib installida Veebistuudiumi kursusel kasutamisel kasutatavasse arvutiklassi;
  • tarkvara võib kasutada ainult mittekommertslikel eesmärkidel;
  • tarkvara ei ole lubatud kasutada IT infrastruktuuris;
  • ei ole mõeldud ilma OP süst arvutite installimiseks;
  • õpilased ei pea tarvara kooli lõpetamisel maha installima
• Tooted selles programmis:
  • MS Expression
  • Windows 7 - install käivitub mälupulgalt või CD'lt
  • MS Visual Studio - Team System: mõeldud nendele, kes hakkavad koodi kirjutama;
  • MS Office Project - projektide haldamiseks
  • MS Office Visio - visuliseerimiseks, modelleerimiseks, graafikud, joonised
  • Windows Server
  • MS SQL Server

Kuidas toimub tarkvara allalaadimine? Vaata msdn62.e-academy.com ja logi sisse.

Kõigile Eesti õpilastele on mõeldud http://www.dreamspark.com/, lahtris saab kool ennast registreerida.

Designer AA liikmeks registreerib MS Eesti ja saadab info kooli. Kooli admin täidab veebipõhise vormi ELMS süsteemi aktiveerimiseks. ELMS on valmis 5 päeva jooksul.

MS Student Partners - Eesti on neid 9 tudengit, kes õpivad ülikoolis disaini või IT erialadel. Vt http://www.student-partners.com/. Kooli võib partner tudengeid külla kutsuda, et nad tutvustaksid mõnda põnevat tehnoloogiat. Meie lektorid Jaana ja Ilja on ka ühed nendest.

Matching-up on õpilaste (16+) võistlus IT vallas (http://www.imaginecup.com/). 2010 aasta finaal toimub Poolas.

Faculty Connection (http://www.facultyconnection.com/) on õppejõudude platvork, kust võib leida ka õppekavu.

Vaata ka aktiivgruppi http://www.mug.ee/, MS User Group eesti lehekülg.

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
  

MS SilverLight veebidisaini koolitus Tallinnas

Terve see nädal on täidetud õppimisega. Olen Mustamäe mändide vahelt kolinud Tallinna kesklinna moodsasse ärirajooni Ahtri tänavale BCS Koolituse ruumidesse. Veedan siin selle nädala viimased tööpäevad ja ka järgmise nädala paar päeva.

Alguse tegi Tallinna Ülikooli õppejõud Andrus Rinde, kes mängis meile maha ka Saksamaa MS Designer Marketing Manager Michael Kösteri video tervituse, kuna ta ei saanud ise kohale tulla.
Mõningad mõtted Michael Kösteri videost kasutaja kogemuse kohta:

• User eXperience (UX) is an artistic part of Software Development.
• Important blocks of UX are functionality, beauty (form), affinity (creating the bond b/w the product and the user), story.
• UX, if designed well, differentiates a product or service, opens new business opportunities and improves efficiency. UX advances business! vt http://www.nike.com/
• Tutvu http://www.microsoft.com/ lehel paljude firmade veebidisainimise protsessidega.

Tundub, et kogu me kool, kaasaarvatud õpetajate koduarvutid, saavad aasta jooksul tasuta installida Windiws 7 oma arvutitesse ja selle kasutamise õigus jääb kestma lõpmatult. See on küll hea uudis, sest ega me ilmselt oma OP-süsteemi radikaalselt muutma ei hakka.

Veel mõningaid märksõnu:

• multi-touch ekraanid ja muud seadmed;
• mõtetelugemise mütsike;
• hääletuvastusseade;
• Microsoft .NET platform ja selle kolm osa: ASP.NET, Windows Presentation Foundation ja Silverlight;
• MS Expression Blend ja MS Expression Design (disaineritele) ja MS Visual Studio (tarkvara arendajatele).

Saabus Jaana Metsamaa ja hakkas kohe rakendustega pihta. Vaadata saab siit: http://www.silverlight.net/GetStarted ja isegi prooviversioonid 30-60 päevaks tasuta installida.

Vt deep-zoom näidet siit: http://memorabilia.hardrock.com/ ja see võtab pahviks. Tutvu sellega lähemalt liveID abil http://silverlight.live.com/.

ControlStoryboardAction mõjub vaid animatsioonidele.