Dokážeš to – návod. 3 část

  • Article

Při příležitosti rozdávání myší a triček programátorským začátečníkům a hráčům her kteří se chtějí chvilku odreagovat je připraveno malé praktické cvičení. Praktický návod jak si vyzkoušet novinky Microsoft pro programátory a designéry a jak dostat triko nebo myšku. Podrobnosti o hlodavci a oblečku najdeš na www.dokazesto.cz

Po první části úkolu– Video stream pomocí Silverlight a druhé části - Webový Windows Live Messenger IM Control,se nyní koukneme na  

Část třetí - 3D objekt v Silverlightu pomocí projektu Microsoft Popfly.

clip_image006PopflyMacclip_image002 

Úkolem bude „naklikat si“ interaktivní prostorový objekt typu Silverlight Carousel a ten umístit na svoji stránku. 
V našem případě nebudeme využívat nějaký externí hosting ani Live Spaces či cokoli jiného ale umístíme a veřejně vystavíme na svoji finální soutěžní stránku v Popfly.com doméně.

clip_image004

Finální vystavená stránka bez jakýchkoli grafických úprav obsahující všechny tri komponenty pak může vypadat podobně jako ta naše: https://www.popfly.com/users/Dokazesto/Dokazesto

Microsoft Popfly

je web obsahující nástroje pro vytváření a sdílení vlastních webových stránek i aplikací pomocí mixování různých existujících komponent bez nutnosti psát kód a bez hlubokých technických znalostí v oblasti tvorby webu. Více o Popfly v češtině např. v tomto článku.

Popfly je typický představitel prostředí Web 2.0 - webu a on-line nástroje s komunitou uživatelů, možností sdílet projekty a dokonce mixovat obsah ostatních členů. Skládá se z nástroje pro vytváření nebo mixování aplikací či komponent a dále z prostředí jejich administrace, sdílení nebo publikování. Pro programátory, kteří chtějí dělat složitější věci, je navíc připraven add-in Popfly Explorer for Visual Studio and Visual Studio Express

Pro využití Popfly je třeba, stejně jako v přechozích aplikacích mít založené Live ID, kterým se lze odkudkoli přihlásit a zároveň založit svůj profil.

V Popfly můžeme vytvářet nebo upravovat:

  • Běžné HTML stránky
  • „Mashupy“ - mixy komponent
  • Bloky - a to vizuální či nevizuální
  • Datové zdroje.

Začněme přípravou veřejné webové stránky

Pokud nemáš nikde prostor pro své webové stránky kam bys umístil komponenty, využij Popfly a připrav si svoji vlastní webovou stránku. Create Stuff – Webpage:

clip_image008

clip_image010clip_image012

Nyní je třeba stránku uložit (Save je vpravo nahoře) a pak veřejně vystavit : MyStuff – Projects – Share. Na linku Mash-out lze najít danou stránku, v našem případě to bylo https://www.popfly.com/users/Dokazesto/Dokazesto

Stránka pak může vypadat takto:

clip_image014

Vytvoření vlastní komponenty prostorového „kolotoče“ v Silverlight

Create Stuff – Mashup –Display a přetáhnout blok Carousel na plochu. … A je hotovo.

clip_image016clip_image018clip_image020

V Preview je pak vidět první náhled. Po klinutpí na symbol montážního klíče pak zdroj dat.
Nyní záleží pouze na kreativitě čím Carousel naplnit. Dobře funguje propojení s kostkou Image Scraper

Dalším typem je vytvoření vlastního zdoje dat (Data source)a propojení - naplnění carouselu udělat z něho.
Pro tento konkrétní cvičný případ si sahám na loga z našeho MS Webu.

clip_image022clip_image024clip_image026

V náhledu vše pak může vše vypadat takto:

clip_image028clip_image030

Uložme opět pod nějakým jménem - na našem případě ""Kolotoc" a sdílejme veřejně. 
Pozor pokud  se aplikace skládá z dalších částí, jako v našem případě např. datasetu, je třeba veřejně nasdílet i tyto další části.   

Pomocí Mash-Out dostaneme také kýžený IFRAME pro vložení na externí stránky.

<iframe style='width:100%; height:100%;' src='https://www.popfly.com/users/Dokazesto/Kolotoc.small' frameborder='no' allowtransparency='true'></iframe>

  • Štěpán Bechynský připravil video jak s Popfly pracovat a jak vložit  IM Control.
  • Michal Neuwirth udělal video jak použít Popfly Explorer for Visual Studio a upravovat nebo vytvářet své vlastní komponenty.

Podklady resp. Výsledky jsou jsou na adresách https://www.popfly.com/users/Dokazesto/Obrazky - jednoduchý zdoj dat, https://www.popfly.com/users/Dokazesto/czcarousel počeštěný Carousel z videa Michala a výsledný projekt Štěpána https://www.popfly.com/users/Dokazesto/DigiGirlz%20Rulez%20Animace

 

Sestavme nyní vše dohromady

Nakonec dejme všechny tři IFRAME elementy které jsme zatím udělali, tj.:

  1. Carousel s obrázky
  2. Streamované video z Silverlight.live.com
  3. Webový IM Control

do již připravené stránky https://www.popfly.com/users/Dokazesto/Dokazesto (nebo na libovolně jiný web)

V případě Popfly stačí na správné místo stránky vložit testově okopírované IFRAME řetězce a Popfly pozná, že se jedná o HTML a vše upraví.

clip_image034

Pozn. Do spaces.live.com je možné přidat tyto IFARAME elementy např. pomoci "Live Gadetu"  SANDBOX HTML a do něho vložit element.
V menu Přizpůsobit - Přidat Moduly -  Miniaplikace - Vybrat Webové miniaplikace - Filtrovat  V angličtině - Přidat Sandbox ...

Ukázka bez formátování je na https://dokazesto.spaces.live.com/

image image

Pokud je vše OK, stránka je určená k veřejnému sdílení a navíc je to Tvoje vlastní stránka s vlastními komponentamy (nikoli pouze okopírovaný příklad) nic nebrání k jejímu zařazení do reagistrace pro rozdávání myší a triček. Registrace bude funkční od 1.4 do 31.5.2008.

Přečti si i minulé díly ...

1. Dokážeš to – návod. 1 část : 10GB zdarma pro Videa, Streaming a přehrávání pomocí Silverlight

2. Dokážeš to – návod. 2 část : Jak si po Live Messengeru popovídat, aniž by protějšek musel mít své Live ID nebo musel mít Messenger nainstalovaný

J. Burian