Gymnázium a Střední odborná škola, Nový Jičín, příspěvková organizace Google weby Tutoriál projektu MOSS studentská verze Nový Jičín 2010 Mgr. Jan Bobek
Osnova 1 Úvodní informace... 3 2 Cloud Computing... 3 3 Google Weby... 5 3.1 Proč Google Weby... 5 3.2 Jak začít... 5 3.3 Úvodní nastavení celého webu... 6 3.4 Vložení nové stránky... 8 3.5 Úprava stránky... 10 3.5.1 Nabídka Insert... 12 3.5.2 Nabídka Format... 13 3.5.3 Nabídka Table... 13 3.5.4 Nabídka Layout... 14 3.6 Přílohy, komentáře... 14 3.7 More actions... 15 3.8 Manage Site... 16 3.9 Site Settings... 16 3.9.1 General... 16 3.9.2 Sharing... 17 3.10 Site appereance... 17 3.10.1 Site layout... 17 3.10.2 Colors and Fonts... 17 3.10.3 Themes... 17 3.11 Print Page... 18 3.12 Přesun stránky... 18 3.13 Delete Page... 19 3.14 Preview page as viewer... 19 3.15 Sdílení webu... 20 3.16 Úprava postranního panelu... 21 4 Závěr... 22
1 Úvodní informace Milí studenti, tento manuál vznikl jako jeden z dalších v rámci klíčových aktivit při realizaci projektu MOSS Můj studijní svět online a má za úkol Vás seznámit s principy tvorby, používání a sdílení webových stránek v prostředí Google tak, abyste si sami mohli jejich výhody vyzkoušet a oblíbili si jejich používání. Rozhodně nečekejte podrobnou příručku. Jste mladí a chytří a s počítači jste prakticky již vyrostli. I když jste na základních školách neměli Informatiku, máte účty na Facebooku, na Líbím se ti a ovládáte stovky onlajnovek. Naučili jste se to sami. Proto si autor dovolí předpokládat, že se dokážete naučit sami i práci se vším okolo Google Webů (tedy aplikaci Google, která funguje v tzv. cloudu ). Tento manuál Vám pouze ukáže, co vše lze dělat i jinak, než jste zvyklí. Od Vás se očekává zvědavost si vše vyzkoušet. Tutoriál spolu s ostatními je k dispozici volně ke stažení i pro kolegy z jiných škol na odkazech webu projektu www.mujstudijnisvetonline.eu stejně jako sada videotutoriálů, které Vás interaktivní formou provedou obtížnějšími postupy. Je ale jasné, že některé postupy budou muset transformovat kolegové z jiných škol na svou lokální situaci, kdy buď mají svůj vlastní poštovní účet na gmail.com (tam jsou jim jednotlivé aplikace dostupné taky) či již mají Google Apps zaregistrovány pro svou školní doménu (u nás je to gnj.cz). Pokud ne, možná propadnou Cloud Computingu a sociálním sítím natolik, že budou tlačit zodpovědné osoby na svých školách k takovým změnám, aby výhody Google Apps mohli využívat taky. 2 Cloud Computing Dnes každý, kdo používá pro svou práci počítač, musí investovat jednak do hardware (HW) a pak do celé sady softwarových (SW) aplikací, které potřebuje na tvorbu textu, tabulek, úpravu obrázků, e-mailovou komunikaci a plánování a podobně. Tyto aplikace se vyvíjejí a žádají zase náročnější HW a tak, i když ceny PC i přenosných počítačů rapidně 3
klesly, pořád je to nezanedbatelná investice a uživatel se dostává do spirály zbytečných výdajů. Řešením je takzvaný Cloud computing. Vše co potřebujete je středně výkonný počítač připojený relativně rychle do internetu a vhodný prohlížeč internetu. Veškerý potřebný SW běží na cizích počítačích, jejichž majitelé Vám umožní se připojit a tento SW používat. Jako službu. Proto se tomu říká SaaS Software as a service Software jako služba. A za službu platíte. Penězi nebo jinou službou informacemi o sobě. Rozhodně Vás ale vůbec nezajímá, kdo a jak se stará o to, že Vám vše hezky běží. Jako byste byli připojeni s počítačem k nějakému obláčku (cloud), kde vše správně funguje. Obrázek 1: Cloud computing Zkuste se připojit například na www.picnik.com. Intuitivně bez znalosti angličtiny pochopíte, že obrázek nejdříve nahrajete ze svého počítače někam do obláčku, do internetu, tam pomoci nástrojů přes prohlížeč upravíte a nakonec zase stáhnete do svého počítače. A těch nástrojů je tam rozhodně více, než ve vašich windowsech. A navíc Vám to umožní hned tento obrázek sdílet - na Facebooku, přes Flickr, přes Twitter no ano, záleží jen na 4
Vás, jak dalece se chcete zbavovat svého soukromí a být závislý na firmách, jež pracuji s Vašími daty, které vy takto nemáte pod kontrolou neboť tohle jsou hlavní argumenty odpůrců jak Cloud computingu, tak sociálních sítí obecně. Ale rozhodnutí je jen na Vás To byl jeden příklad. My se budeme podrobněji věnovat SaaS Google Apps konkrétně jedné její službě - Google Weby, neboli Google Sites. 3 Google Weby 3.1 Proč Google Weby Pomocí této aplikace si můžete vytvářet kvalitní webové stránky, aniž byste znali jazyky HTML a CSS, které jsou pro tvorbu stránek nezbytné a pro laika poměrně složité. Google Weby kromě běžných stránek mohou obsahovat přiložené soubory, umožní vám sdílet web buď s uživateli domény gnj.cz nebo také s celým světem a v neposlední řadě za vás vyřeší umístění stránek na internetu. A to všechno bezplatně. 3.2 Jak začít Přihlaste se do svého Gmailového účtu na adrese http://mail.gnj.cz a po přihlášení klepněte nahoře na odkaz Sites, viz obrázek 2. Obrázek 2: Jak začít 5
Přejdete tak na obrazovku, kde později uvidíte přehled vašich webů, dále možnost procházet všechny weby vytvořené v doméně gnj.cz a také máte možnost vytvořit si svůj nový web, viz obrázek 3. Obrázek 3: Vytvoření nového webu 3.3 Úvodní nastavení celého webu Po založení nového webu je potřeba vyplnit formulář se základními vlastnostmi webu, viz následující obrázky 4 a 5. Choose a template to use zde pro naše účely doporučuji vybrat prázdnou šablonu Blank Template, ostatní šablony jsou nachystané pro speciální účely jako např. Business collaboration nebo Personal & fanily. ame your Site hlavní název webu, který se bude zobrazovat v záhlaví celého webu Your site will be located at this URL část adresy je pevně daná (u nás http://sites/google.com/a/gnj/cz/) a zbytek adresy si volíte vy. V našem příkladu je to matematika. Správce Google na naší škole vám může tuto poměrně dlouhou a nezapamatovatelnou adresu nastavit na zkrácený tvar, např. matematika.gnj.cz. 6
Choose a theme vyberte z nabízených motivů vzhled vašeho webu Obrázek 4: Úvodní nastavení webu Site categories zadejte slova, která charakterizují obsah vašeho webu; při prohledávání webů, jsou weby seskupeny právě do těchto kategorií a ostatní si pak mohou najít váš web prohledáním kategorií Site description podrobnější specifikace obsahu webu, která se zobrazuje v různých přehledech webů Collaborate with máte možnost zadat osoby, které budou mít váš web dostupný. Everybody at gnj.cz jsou všichni studenti a učitelé našeho gymnázia. Můžete tak také vytvořit web, který bude viditelný jen u jisté skupiny osob, třídy apod. 7
Obrázek 5: Úvodní nastavení webu - pokračování 3.4 Vložení nové stránky Po založení webu je automaticky vytvořena první Domovská stránka. Ostatní stránky je potřeba vložit vpravo nahoře tlačítkem Create Page, viz obrázek 6. Obrázek 6: Vytvoření nové stránky Typy nových stránek Web Page běžná stránka Announcements stránka, která je určena k zobrazování častých krátkých sdělení 8
File Cabinet stránka, která bude obsahovat soubory Obrázek 7: Druhy nových stránek Obrázek 8: Druh stránky Web Page 9
Obrázek 9: Druh stránky - File Cabinet ame zadejte název stránky, bude se zobrazovat v navigaci v přehledu stránek po levé straně Put page at the top level stránka se zobrazí na stejné úrovni jako Domovská stránka Put page under. před založením nové stránky je potřeba v navigaci po levé straně označit stránku, pod kterou bude tato nová stránka vložena 3.5 Úprava stránky Stránku můžeme obsahově upravovat ihned po vložení nebo výběrem dané stránky v navigaci klepnutím na tlačítko Edit page vpravo nahoře, viz obrázek 10. 10
Obrázek 10: Úprava stránka Stránka se upravuje obdobně jako v textovém editoru Word pomocí panelu nástrojů nebo pomocí nabídek Insert, Format, Table, Layout (viz následující kapitoly). Zde si vysvětlíme jen některé funkce. Add link odkazovat se můžeme na stránku našeho webu resp. na stránku, kdekoliv na internetu. Označíme text na stránce, který bude sloužit jako odkaz, klepneme na tlačítko Link a vybereme ze seznamu stránku našeho webu resp. vybereme Web addess a do pole Link to this URL zadáme webovou adresu stránky v internetu. Nezapomeňte po každé změně stránku uložit tlačítkem Save, viz obrázek 11. 11
Obrázek 11: Uložení stránky 3.5.1 Nabídka Insert Stránka nemusí obsahovat jen text, ale také obrázky, automaticky vytvořený obsah stránky, Google Kalendář, Google Dokumenty, Google Video (viz další školení), mapu, oddělovací vodorovnou čáru apod. Obrázek 12: Typy objektů, které lze vložit na stránku Image ze souboru nebo přímo z webu 12
Table of contens do stránky se vloží blok s obsahem stránky. Obsah je vytvořen automaticky nadpisy stránky, pokud jsou naformátovány z nabídky Format Heading, Sub-heading nebo Minor heading. 3.5.2 Nabídka Format Další možnosti formátování písma. Pokud naformátujete text Heading, Sub-heading nebo Minor heading, budou automaticky zahrnuty do bloku obsahu stránky, viz předcházející kapitola 3.5.1 Insert. Obrázek 13: Formátování písma 3.5.3 Nabídka Table obrázek 14. Stránka může obsahovat tabulku, funkce pro práci s tabulkou viz následující 13
Obrázek 14: Vložení a úprava tabulky 3.5.4 Nabídka Layout Nově vložená stránka obsahuje jeden sloupec jeden blok. Zde máte možnost měnit počet bloků stránky, viz obrázek 15. Obrázek 15: Změna rozložení stránky 3.6 Přílohy, komentáře Ke každé stránce můžete připojit jakýkoliv soubor jako Přílohu a připsat Komentář, viz obrázek 16. 14
Obrázek 16: Přílohy a komentáře 3.7 More actions K dalším funkcím, možnostem a nastavením se dostaneme tlačítkem More actions, viz obrázek 17. Bližší popis pak v následujících kapitolách. Obrázek 17: Další nastavení 15
3.8 Manage Site Vybráním funkce Manage site, viz předcházející obrázek 17, se dostaneme k celkovému nastavení webu. Nejdůležitější funkce tohoto nastavení jsou popsány v následujících kapitolách. Zpět na obsah webu se vrátíme odkazem vlevo nahoře Return to site. Obrázek 18: Správa webu a návrat k webu 3.9 Site Settings 3.9.1 General Opět možno změnit název, kategorie a popis webu, viz kapitola 3.3 Úvodní nastavení celého webu. Landing Page stránka, která se zobrazí jako první při návštěvě vašeho webu, obvykle je to Domovská stránka 16
Site display language nastavení jazyka 3.9.2 Sharing Váš web můžete sdílet s dalšími uživateli. Počáteční sdílení jste již nastavili při založení webu, viz kapitola 3.3 Úvodní nastavení celého webu. Zde máte možnost toto nastavení změnit nebo upřesnit. As owners uživatelé, kteří mají nejvyšší oprávnění, mohou konat veškeré úpravy přidávat stránky, měnit rozložení webu, ale také např. web smazat As collaborators uživatelé, kteří mohou provádět běžné změny jako je editace stránek As viewers uživatelé, kteří mohou web jen číst Uživatele přidáme buď vypsáním jejich mailových adres do prázdného pole a nebo si pomůžeme vyhledáním z kontaktů z domény gnj.cz. 3.10 Site appereance 3.10.1 Site layout Na této stránce můžete změnit rozložení svého webu, včetně zadání výšky a šířky jednotlivých komponent a přidání či uspořádání položek v postranních panelech. 3.10.2 Colors and Fonts Změna vzhledu stránky (obrázek, pozadí, písmo, barva odkazů), záhlaví (barva, pozadí, obrázek), obsahu (barva textu, pozadí, obrázek) aj. 3.10.3 Themes Změna motivu webu, obdobně jako při založení webu. 17
3.11 Print Page Obrázek 19: Tisk stránky 3.12 Přesun stránky Na obrazovce zobrazíme stránku, kterou chceme přesunout, zavoláme funkci Move Page, viz obrázek 20. Obrázek 20: Přesun stránky 18
A ze seznamu stránek označíme stránku, pod kterou chceme naši stránku přesunout. 3.13 Delete Page obrázek 21. Zobrazíme stránku, kterou chceme smazat, a zavoláme funkci Delete page, viz Obrázek 21: Smazání stránky 3.14 Preview page as viewer Při úpravě stránky máme stránku v zobrazení vhodném pro editaci. Pokud si chceme ověřit, jak uvidí naši stránku běžný uživatel, zavoláme funkci Preview page as viewer, viz obrázek 22. 19
Obrázek 22: Zobrazení náhledu stránky 3.15 Sdílení webu Váš web můžete sdílet s dalšími uživateli. Počáteční sdílení jste již nastavili při založení webu. Zde máte možnost toto nastavení změnit nebo upřesnit stejně jako v kapitole 3.3 Úvodní nastavení celého webu. 20
Obrázek 23: Sdílení webu 3.16 Úprava postranního panelu Možnost přidání další položky postranního panelu, změny šířky, názvu a počtu úrovní stránek, které se mají v postranním panelu zobrazit. Obrázek 24: Úprava postranního panelu 21
Po klepnutí na odkaz Upravit postranní panel, přejdeme do okna, viz obrázek 25, kde vybráním funkce Edit můžeme nastavit např. název postranního panelu a počet úrovní, které se mají zobrazit v navigaci. 4 Závěr Obrázek 25: Úprava navigace Pokud byste chtěli vytvářet webové stránky od základu např. v jazyce HTML s využitím tzv. kaskádových stylů, strávili byste spoustu času učením značek jazyka. Jak jste viděli, Google Weby vám poskytly mocný a jednoduchý nástroj, pomocí kterého vytvoříte stránky za odpoledne či večer. Věřím, že pomocí Google Webů, si stránky bude schopen vytvořit každý poučený uživatel. Autor 22