SkautIS Remote Components absolventská práce

Transkript

1 MUŠKA Moravská úřednická škola SkautIS Remote Components absolventská práce Martin Jašek Jedlík středisko Prof. Skoumala Přerov MUŠKA 2010/11

2 Obsah Úvod Seznámení se SkautIS komponentami Interaktivní mapa náborových informací Kontakty na jednotky Nastavení komponent základní parametry Interaktivní mapa náborových informací Kontakty na jednotky Vložení komponent do svých webových stránek Registrace Vložení zdrojového kódu Úprava zdrojového kódu pro nastavení komponent Pokročilá změna vzhledu komponent...25 Závěr Odkazy PŘÍLOHA

3 Úvod SkautIS se stává nedílnou součástí naší skautské činnosti. Některé informace vkládané do tohoto systému se nezřídka objevují také na webových prezentacích organizačních/výchovných jednotek. Začaly se objevovat myšlenky, že by se mohly tyto informační prvky propojit pro zjednodušení aktualizování a efektivnější předávání informací. Tým pod vedením Ondřeje Peřiny Jerryho začal s realizací výše uvedeného a již jsou k dispozici první výsledky. Absolventská práce si klade za cíl seznámit čtenáře s projektem SkautIS Remote Components, poukázat na možnosti nabízených komponent, ale také nabídnout přehledný praktický postup pro úspěšné vložení těchto komponent na webové stránky vaší jednotky. 1. Seznámení se SkautIS komponentami V této kapitole naleznete stručný popis komponent, jak fungují, v čem jsou přínosné. Nezabývá se nastavovacími parametry, možnostmi přizpůsobení - k tomu je určena kapitola Interaktivní mapa náborových informací Obrázek 1: Mapa náborových informací úvodní obrázek Zobrazení umístění kluboven na mapě, ve které se může návštěvník pohybovat, přibližovat, posouvat, se stává běžnou součástí webových prezentací jednotek. Tato komponenta je založena na kvalitní internetové aplikaci Google Mapy, navíc však obsahuje přídavné skautské funkce. Viz Obrázek 1. 3

4 V mapě se můžeme pohybovat různými způsoby dvojkliky tlačítky myši do místa na mapě pro přiblížení/oddálení, rolováním středového kolečka na myši rovněž pro přiblížení/oddálení, posouváním myši při stisknutém levém tlačítku myši pro posun na mapě, nebo využití pomůcek v levém panelu mapy. Dále mapa umožňuje satelitní zobrazení. Tyto základní funkce jsou intuitivní a dá se na ně rychle zvyknout. Viz Obrázek 2. Panáček v levém panelu se využívá pro aktivaci velmi zajímavé funkce Google Street View, která však zatím funguje pouze na některých místech a není předmětem této práce vás s ní blíže seznámit (maps.google.cz/intl/cs/help/maps/streetview). Obrázek 2: Mapa náborových informací - demonstrace přiblížení a satelitního vyobrazení Nyní se zaměříme na předeslané doplňkové skautské funkce. Jistě vás upoutal horní žlutý panel. Pomocí něj můžeme vyhledat oddíl (klubovnu) splňující námi předem definovaná kritéria. 4

5 Jakmile naše specifické požadavky zadáme a klikneme na tlačítko Hledat, vyobrazí se nám vyhovující klubovny (viz Obrázek 3). Více středisky se může pyšnit málokteré město a může se tak stát, že při velmi úzkém profilování požadavků se nám zobrazí klubovna v úplně jiném městě (viz Obrázek 4). Symbol domečku značí adresu, kterou jsme zadali, symbol bublinky pak nalezený výsledek. Obrázek 3: Mapa náborových informací - vyhledávání klubovny Obrázek 4: Mapa náborových informací - vyhledávání klubovny s užším výběrem 5

6 Možná vás napadne otázka můžeme vyhledat klubovnu v kterémkoliv městě? Podívejme se na Obrázek 5. Obrázek 5: Mapa náborových informací - vyhledání klubovny v Praze Jak je možné, že jsme v Praze nenašli žádné klubovny? Odpověď je jednoduchá. SkautIS komponenty jsou svázané určitým kódem s vaší jednotkou, pro kterou tyto komponenty registrujete (viz podkapitola 3.1) a vyobrazí pouze výsledky, které odpovídají působnosti dané jednotky. Výše použitá komponenta je zaregistrována a vložena na webových stránkách ORJ Přerov, která má v působnosti střediska Přerov, Brodek u Přerova, Kojetín, Hranice, Lipník nad Bečvou. Pomocí této komponenty nalezneme vyhledáváním pouze klubovny nacházející se ve vyjmenovaných lokalitách (viz Obrázek 6). Proto nacházíme v Obrázku 3 klubovnu v Kojetíně a Přerově, ale v obrázku 5 pražské klubovny nenalézáme. Obrázek 6: Mapa náborových informací - vyobrazení kluboven v působnosti ORJ Přerov 6

7 Na čím vyšší hierarchické úrovni daná jednotka je, tím více kluboven se jí v zaregistrované komponentě vyobrazí. Komponenta střediska Přerov vyobrazí nejvýše pouze její vlastní klubovnu, teoreticky vzato komponenta zaregistrovaná na ústředí by mohla vyobrazit veškeré klubovny v republice. Dobře, našli jsme si klubovny a co dále? Jistě si pamatujete, že vyhledané klubovny jsou zaznačeny symbolem. Klikneme-li levým tlačítkem myši na tento symbol, vyobrazí se nám základní informace o vyhledané klubovně (viz Obrázek 7). Klikneme-li na >>zobrazit další informace>>, otevře se nám informační stránka (viz Obrázek 8) obdobná komponentě Kontakty na jednotku, o které si za chvíli rovněž povíme. Obrázek 7: Mapa náborových informací - bližší údaje nalezeného Obrázek 8: Mapa náborových informací - podrobnější údaje nalezeného 7

8 1.2. Kontakty na jednotky Chtěli byste mít na svých webových stránkách pěkně vypadající komplexní přehled vašich kontaktních údajů, které se aktualizují za vás? Pak tato komponenta je pro vás jako stvořená. Informace v ní obsažené se automaticky mění se změnami provedenými ve SkautISu. Obrázek 9: Kontakty na jednotku středisko Přerov Některé údaje nemusí být vyobrazeny (viz srovnání obrázků 9, 10, 11), odvíjí se to od údajů, které jsou zaneseny do systému SkautIS. Obrázek 10: Kontakty na jednotku ORJ Přerov 8

9 Komponenta umí vyobrazit informace nejen o jednotce, pro kterou jsme komponenty zaregistrovali, ale také o podřízených jednotkách (viz Obrázek 11). Určujícími parametry se budeme zabývat v následující kapitole. Obrázek 11: Kontakty na jednotku středisko Přerov s podřízenými jednotkami 9

10 2. Nastavení komponent základní parametry SkautIS komponenty si můžeme také přizpůsobit vlastním představám. V následujících podkapitolách se dozvíte, jaké základní parametry lze upravovat a jakou změnu vyvolají. Veškeré tyto poznatky si můžete ihned vyzkoušet na ukázkových webových stránkách [1]. Jedná se pouze o seznámení s parametry, vlastní nastavení komponent, které budete vkládat do svých webových prezentací, probíhá úpravou vkládaného zdrojového kódu (viz podkapitola 3.3 a pokročilejší úprava viz kapitola 4) Interaktivní mapa náborových informací Obrázek 12: Mapa náborových informací - základní volitelné parametry [1] AppID jedinečný kód, který se získá zaregistrováním webových stránek jednotky pro používání komponent (viz kapitola 3); na ukázkovém webu [1] nelze změnit tento kód je svázaný s určitými webovými stránkami, bez správného kódu komponenty nebudou fungovat (viz Obrázek 13) Obrázek 13: Chybný parametr AppID 10

11 ID_Unit jedinečné interní evidenční číslo jednotky Junáka, lze zjistit zde: [2] Obrázek 14 do pole Ev. číslo vložte organizační číslo vaší jednotky (lze zjistit ve SkautISu) a po kliknutí na tlačítko Hledej se vám vyobrazí ID Unit vaší jednotky Obrázek 14: Zjištění čísla ID_Unit [2] právě tento parametr určuje, které klubovny budou vyobrazeny (viz kapitola 1 strana 6) Height výška zobrazené komponenty udána v pixelech px čím vyšší číslo, tím více je komponenta roztáhlá do výšky (viz Obrázek 15 a 16) Obrázek 15: Parametr Height = 50 Obrázek 16: Parametr Height = 150 Width šířka zobrazené komponenty udána v pixelech px čím vyšší číslo, tím více je komponenta roztáhlá do šířky na ukázkovém webu [1] nelze nastavit, ve zdrojovém kódu ano 11

12 Zoom určuje přiblížení mapy čím vyšší číslo, tím větší přiblížení (viz Obrázek 17 a 18) Obrázek 17: Parametr Zoom = 6 Obrázek 18: Parametr Zoom = 16 Lat, Lng jedná se o GPS souřadnice v desetinném tvaru, určují střed zobrazení mapy Lat zeměpisná šířka, Lng zeměpisná délka lze zjistit na [3] Obrázek 19 12

13 Obrázek 19: Zjištění GPS souřadnic [3] Obrázek 20: Parametry Lat= 49.46; Lng=

14 Adress zobrazení/nezobrazení vyhledávacího řádku Zobrazit poblíž adresy viz Obrázek 21 Obrázek 21: Parametr Adress= True (nahoře); Adress= False (dole) Occupation too zobrazení/nezobrazení kluboven, které nemají vyplněny náborové údaje viz Obrázek 22 Obrázek 22: Parametr Occupation too = True (nahoře); Occupation too = False (dole) Show markers zobrazení/nezobrazení všech dostupných výsledků ještě vyhledáváním pomocí políček viz Obrázek 23 14

15 Obrázek 23: Parametr Show markers = True (nahoře); Show markers = False (dole) BgColor barva pozadí, udává se v tzv. 16kovém RGB zápisu (google HTML barvy ) viz Obrázek 24 Obrázek 24: Parametr BgColor= ffffff (vlevo); BgColor= (vpravo) 15

16 Na závěr malá motivační ukázka, jak může vypadat tato komponenta po úpravě výše uvedených parametrů na webových stránkách (Obrázek 25). Parametry se upravují ve zdrojovém kódu komponenty, k čemuž se dostaneme v podkapitole 3.3. ID_Unit: Height: 500 Zoom: 10 Lat: Lng: Address: True OccupationToo: True Show Markers: True BgColor: ffffff Obrázek 25: Mapa náborových informací na webu ORJ Přerov 16

17 2.2. Kontakty na jednotky Obrázek 26: Kontakty na jednotku - základní volitelné parametry [1] Parametry AppID, ID_Unit, BgColor mají stejnou funkci jako u předchozí komponenty, popíši zde pouze parametry specifické pro komponentu v této podkapitole. ChildUnits zda zobrazit údaje o podřízených jednotkách (u střediska oddíly, u okresu střediska atd.) viz Obrázek 27 a 28 Obrázek 27: Parametr ChildUnits= False 17

18 Obrázek 28: Parametr ChildUnits= True ChildUnitsFirst váže se na předešlé; zda zobrazit jen první úroveň podřízených jednotek nebo všechny (u střediska jen oddíly nebo oddíly+družiny, u okresu jen střediska nebo střediska+oddíly+družiny atd.) =True pouze první úroveň; =False všechny úrovně ParentUnit zda zobrazit informace o rodičovské jednotce, jejíž ID_Unit jsme zadali = True viz Obrázek 28; =False viz Obrázek 29 Obrázek 29: Parametr ParentUnit= False 18

19 3. Vložení komponent do svých webových stránek Rádi byste se dozvěděli, jak vložit SkautIS komponenty do svých skautských stránek jednotky v úpravě parametrů podle vašich představ? V tom případě jste ve správné kapitole! 3.1. Registrace SkautIS komponenty lze využívat pouze na skautských webových stránkách fungující jednotky, které je nutné pro tento účel nejdříve zaregistrovat zde: [4] Zde se přihlašte pod svým SkautIS účtem (Obrázek 30). Obrázek 30: Přihlášení do registrace [4] Následně pod předvyplněnými kontaktními údaji vyplňte základní údaje o vašich skautských webových stránkách (Obrázek 31), na které budete chtít komponenty umístit. Obrázek 31: Vyplnění registračních údajů Možnost Nová webová aplikace slouží pro nové zaregistrování webových stránek pro vybrané komponenty, možnost Již registrovaná aplikace ve skautisu slouží pro doregistrování další komponenty k již registrovaným webovým stránkám. 19

20 Název webu název, kterým stránky prezentujete (např. Oficiální stránky přerovských skautů) Popis webu bližší informace o stránkách (např. skautské stránky přerovského střediska) URL adresa adresa vašich stránek (např. prerov.skauting.cz) IP adresa číselný tvar URL adresy, lze zjistit zadáním URL adresy sem: Ev. č. jednotky např (lze zjistit mimo jiné ve SkautISu) Následuje výběr komponent, ke kterým chcete získat povolení (viz Obrázek 32). O povolení na další komponenty lze později dodatečně požádat výběrem Již registrovaná aplikace ve skautisu viz Obrázek 31. Obrázek 32: Výběr komponent Nakonec potvrďte prohlášení o pravdivosti údajů, čímž se zpřístupní odesílací tlačítko. Viz Obrázek 33. Obrázek 33: Dokončení registrace Po odeslání vyplněných údajů vám přijde na kontaktní uvedený ve SkautISu potvrzovací zpráva o přijetí požadavku. Za několik dní dorazí další , který vám povolí/nepovolí využívání komponent. Bez povolení komponenty na vašich stránkách nebudou fungovat. 20

21 3.2. Vložení zdrojového kódu SkautIS komponenty se vkládají do webových stránek prostřednictvím HTML kódu, který obdržíte v příchozím u s povolením k jejich používání. Obsahuje již předvyplněné parametry AppID, ID_Unit, Height, BgColor (viz kapitola 2). Následující řádky předpokládají základní znalost tvorby webových stránek. <html> HTML kód stačí vložit bez jakýchkoliv úprav do těla stránky mezi <body> a </body>. <head> <title>skautské stránky</title> </head> <body> <iframe src=" tising.aspx?appid=xxxxxxxb59b-4b65-848cfbe8xxxxxxxxx&id_unit=26030&height=400&bgcolor=ffffff" style="background: #ffffff;" height="500px" width="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="yes" id="mapadvertising"> </iframe> </body> </html> Používáte-li redakční systém, nemusíte <body> vůbec hledat. Stačí kód jednoduše vložit do uživatelského rozhraní pro úpravu stránky. Na obrázku 34 je vyobrazen jeden z nejpoužívanějších redakčních systémů Wordpress. 21

22 Obrázek 34: Vložení HTML kódu do RS Wordpress Komponenta se však na stránce ještě nezobrazí správně (viz Obrázek 35). Obrázek 35: Chybné vyobrazení komponenty na stránce 22

23 Tento problém však lze jednoduše vyřešit. Stačí smazat veškeré vynechané řádky a nadbytečné mezery v HTML kódu komponenty (viz Obrázek 36 a 37). Obrázek 36: Vložení upraveného HTML kódu do RS Wordpress Obrázek 37: Zobrazení komponenty v RS Wordpress po úpravě HTML kódu 23

24 3.3. Úprava zdrojového kódu pro nastavení komponent V kapitole 2 jsme si povídali o nastavovacích parametrech komponent. Nyní se podíváme na jejich umístění do HTML kódu tak, aby se staly účinnými. Zaměříme se na komponentu Mapa náborových informací a připravíme si navolené parametry. ID_Unit: Height: 500 Zoom: 10 Lat: Lng: Address: True OccupationToo: True Show Markers: True BgColor: ffffff Dále tu máme HTML kód, kde se soustředíme na zvýrazněnou část. <iframe src= " style="background: #ffffff;" height="500px" width="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="yes" id="mapadvertising"> </iframe> Podle zvýrazněného schématu můžeme doplnit další parametry, které v kódu nejsou, případně upravit stávající <iframe src= " Zoom=10&Lat=49.455&Lng=17.450&Adress=True&OccupationToo= True&ShowMarkers=True" style="background: #ffffff;" height="500px" width="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="yes" id="mapadvertising"> </iframe> Stejným způsobem si můžeme upravit rovněž HTML kód komponenty Kontakty na jednotku. 24

25 3.4. Pokročilá změna vzhledu komponent Kromě funkcionality komponent můžeme rovněž upravit jejich vzhled tak, aby nám více ladil s grafickou koncepcí webových stránek (viz Obrázek 38 a 39). Tato technika je pokročilejší a vyžaduje hlubší znalosti z oblasti HTML a CSS. Obrázek 38: Kontakty na jednotku před úpravou CSS stylu Obrázek 39: Kontakty na jednotku po úpravě CSS stylu Nejdříve si vytvoříme textový soubor s příponou.css (např. v poznámkovém bloku). Nazveme si jej třeba styl_komponent.css. Uvnitř souboru bude zdrojový kód kaskádních stylů CSS (ukázku naleznete v příloze na konci této práce). Tento soubor si uložíme na internetové místo, ideálně k webovým stránkám. Bude tak přístupný přes určitou URL adresu, například Dále tento soubor nadefinujeme do HTML kódu komponenty (ať už se jedná o Mapu náborových informací nebo Kontaktů na jednotku). 25

26 <iframe src= " Zoom=10&Lat=49.455&Lng=17.450&Adress=True&OccupationToo= True&ShowMarkers=True&CSS= yl_komponent.css" style="background: #ffffff;" height="500px" width="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="yes" id="mapadvertising"> </iframe> V poslední fázi již měníme prvky v CSS souboru a vylaďujeme v závislosti na našich potřebách. Běžnou metodou zřejmě bude metoda pokus-omyl aneb vyzkoušíme, co se určitou úpravou změní na vzhledu komponenty a tu pak ponecháme, vyladíme nebo vrátíme na původní hodnotu. 26

27 Závěr SkautIS komponenty se neustále vyvíjí a je možné, že se brzy dočkáme nových. Dle mého názoru se jedná o velmi nadějný projekt, díky kterému můžete zlepšit design vašich stránek a zjednodušit aktualizaci údajů. Máte-li nápady či dotazy, navštivte [5]. Odkazy [1] Stránka pro seznámení s komponenty a možnost jejich vyzkoušení SkautIS [online] [cit ]. Remote Compoments. Dostupné z WWW: < [2] Zjištění čísla ID_Unit jednotky SkautIS [online] [cit ]. Zjištění interního čísla jednotky. Dostupné z WWW: < [3] Zjištění GPS souřadnic SkautIS [online] [cit ]. Zjištění GPS souřadnic pro určení pozice. Dostupné z WWW: < [4] Registrace vašich webových stránek pro používání komponent SkautIS : Remote Compoments [online] [cit ]. Registrace. Dostupné z WWW: < [5] On-line podpora Junáka SkautIS : On-line podpora Junáka [online] [cit ]. Přihlášení. Dostupné z WWW: < 27

28 PŘÍLOHA Zdrojový kód souboru CSS pro úpravu vzhledu komponent Zdroj: /********************************************************* * CSS (kaskadni styly): pro jednotliva hotova reseni ********************************************************/ /* zakladni styl cele stranky komponent */ body { font-family: Calibri, Arial, sans-serif; font-size: 11pt;} form { /*background-color: #fff;*/} #data { margin: 0; padding: 0; /*border: 1px solid #abadb3;*/ /*border-bottom: none;*/} #infodata { padding: 0px 5px 5px 5px;} #footer { font-size: 8pt; border: 1px solid #abadb3; border-top: 1px dotted #abadb3; background-color: #f2efe9; margin: 0 0 5px 0; padding: 5px 3px 3px 3px; display:none;} #footer.slogan { float: right; font-style: italic;}.left { text-align: left;}.right { text-align: right;}.center { text-align: center;}.justify { text-align: justify;}.clear { clear: both;} a, a:visited { color: #0097cf; text-decoration: none;} a:hover { color: #0097cf; text-decoration: underline;} h2 { color: #113d9c; margin: 5px 0;} /* informacni box (message box) */.message { border: 2px solid #0066d4; background-color: #c8dffa; margin: 10px auto; padding: 10px; width: 500px;} 28

29 /* filtr zobrazovanych dat v seznamu */ div.filters { font-size: 10pt; background: #ffc973; border: 1px solid #e48b00; padding: 5px;} div.filters input, div.filters select { vertical-align: middle; margin-right: 5px;} div.filters div.line { padding-bottom: 10px;} div.filters input.filterbutton { float: right;} div.filters p.instructions { margin: 3px 0;} /* mapa a prvky kolem */.MapBlock {}.MapBlock div.filters, #infodata div.filters { border: none; border-bottom: 1px dotted #abadb3;}.mapblock.resultinfo { padding: 2px 5px; background-color: #3883eb; border-bottom: 1px dotted #abadb3; color: #fff; display:none;} #infodata.filterparameters { margin: 0-5px; padding: 5px 10px; background-color: #f2efe9; border: 1px dotted #abadb3; border-left: none; border-right: none; font-size: 9pt;} #infodata.filterparameters p { margin: 0;} #infodata p.realtyposition { margin: px 0;} #infodata.unit.logo { min-height: 220px;} #infodata.unit.unitlogo { float: right; margin: 0-5px 15px 15px; padding: 7px; background: #fff; border: 1px dotted #abadb3; border-right: none;} #infodata div.filters { margin: -5px; margin-bottom: 0;} #infodata.unit h3 { margin: 0px -5px 5px -5px; padding: 0px 10px; /*border-top: 1px solid #abadb3; border-bottom: 2px solid #abadb3;*/ /* color: #fff;*/ color:#008dc7; font-size: 20pt; /*background-color: #008dc7;*/} #infodata.unit h3 span.smallername { font-size: 11pt; display:none;} 29

30 #infodata.unitdetail { margin-top: 0px; padding: 0 10px 10px 10px;} #infodata.unitdetail dl { margin: px 0; padding: 0;} #infodata.unitdetail dl dt { margin-top: 5px; font-weight: bold;} #infodata.unitdetail dl dd { margin: 0 5px; padding: 0;} #infodata.unitdetail p.advertisingnote { margin: -3px 0 3px 0;} #infodata.unitdetail.advertisingdetails { border-top: 1px solid #abadb3;} #infodata.unitdetail.advertisingdetails.item { padding: 3px; border-bottom: 1px dotted #abadb3;} #infodata.unitdetail.advertisingdetails.item.searched { background-color: #ffebcb;} #infodata.unitdetail.advertisingdetails.item:hover, #infodata.unitdetail.advertisingdetails.item.searched:hover { background-color: #f2efe9;} #infodata.unitdetail.advertisingdetails.item.indent { margin: 0 10px;} dl.mapadvertisingcategory { width: 95%;} dl.mapadvertisingcategory dt { font-size: 12pt; font-weight: bold; margin: 7px 0 0 0; padding: 1px 3px;} dl.mapadvertisingcategory dd { margin: 2px 0 2px 10px;} /* kontakty na jednotku (odlisnosti od detailu mapy ) */ #infodata.unit h3 { margin-top: 0;} #infodata.unit.first h3 { margin-top: -6px;} #infodata.unit.child h3 { background-color: #87b4f3; color: #444; font-size: 13pt;} #infodata.unitdetail div.meetingbox { margin-left: 15px;} #infodata.unitdetail dl.contacts dt, #infodata.unitdetail dl.leaders dt, #infodata.unitdetail h4.realty, #infodata.unitdetail h4.meeting { font-size: 13pt; font-weight: bold; color: #008dc7; padding: px; margin: 0; background-position: 0 2px; background-repeat: no-repeat;} #infodata.unitdetail dl.contacts dt { background-image: url(" f");} #infodata.unitdetail dl.leaders dt { background-image: url(" ");} 30

31 #infodata.unitdetail dl.leftcolumn { float: left;} #infodata.unitdetail dl.rightcolumn { float: left; margin-left: 30px;} #infodata.unitdetail h4.realty { margin-top: 10px; padding-left: 22px; background-image: url(" );} #infodata.unitdetail h4.meeting { background-image: url(" ");} 31