TechEd Europe

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

  • Comments 7

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 úkoluVideo 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: http://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 http://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='http://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 http://www.popfly.com/users/Dokazesto/Obrazky - jednoduchý zdoj dat, http://www.popfly.com/users/Dokazesto/czcarousel počeštěný Carousel z videa Michala a výsledný projekt Štěpána http://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 http://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 http://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

  • Možem sa do tejto súťaže prihlásiť aj keď bývam na Slovensku, alebo je to len pre Českú republiku?

  • Možem sa do tejto súťaže prihlásiť aj keď bývam na Slovensku, alebo je len pre Českú Republiku?

  • Co se tyka Slovenska tek jediny problém vidim v zasláni trika nebo mysi na Slovensé adresy. Pokud mate moznost si nechat poslat do Cech, tak lepe. Pokud nikoli tak dejte SK adresu, pokusime se to nejak domluvit s kolegama na Slovensku. Jine zeme nez Slovensko ale neakceptujeme. JB

  • Super, to som rad :)

    Inak je fajn ze takto prezentujete nove technologie... Pre mladych to je aspon zaujimave a maju motivaciu nieco nvoe sa naucit..

    Inak, po registracii do sutaze mi neprisiel ziadny potvrdzovaci mail ze som bol zaradeny, je to OK?

  • Suhlasim, ani mne nepsisiel potvrdzovaci mail. Takze to asi bude v poriadku.

  • Dobry den vespolek,

    Potvrzovaci e-maily registrace neposila, ale pokud vse dobre dopadne pak by se mela po registraci objevit stranka s podekovanim/potvrzenim registrace.

    JB

  • inak mam otazku, kedy sa chysta silverlight plugin do opery? zacal by som ho totiz nahradzat resp. ponukat alternativu za flash ale akosi bez funkcnych vsetkych majoritnych prehliadacov to nema zmysel

Page 1 of 1 (7 items)
Leave a Comment
  • Please add 8 and 8 and type the answer here:
  • Post