Univerzita Karlova v Praze - Přírodovědecká fakulta
Katedra učitelství a didaktiky chemie
David Brenner
Výběr a tvorba nových materiálů pro podpůrný výukový web www.studiumchemie.cz
Selection and creation of new materials for supporting learning site www.studiumchemie.cz Diplomová práce
Vedoucí diplomové práce RNDr. Petr Šmejkal, Ph.D.
Praha 2012
Prohlašuji, že jsem tuto diplomovou práci vypracoval samostatně, pod vedením školitele RNDr. Petra Šmejkala, Ph.D., a že jsem všechny použité prameny řádně citoval. Souhlasím se zapůjčením mé diplomové práce ke studijním účelům. V Praze dne ..................................
Děkuji vedoucímu diplomové práce RNDr. P. Šmejkalovi, Ph.D. za odborné vedení, mnoho cenných rad a připomínek při psaní diplomové práce. Dále bych rád poděkoval Aleně Kubíkové za pomoc při tvorbě grafické podoby portálu www.studiumchemie.cz. V neposlední řadě musím také poděkovat své rodině za podporu při psaní diplomové práce.
David Brenner
Klíčová slova www.studiumchemie.cz, studium chemie, výuka chemie, vzdělávání v chemii, distribuce výukových materiálů, podpůrný výukový web
Keywords www.studiumchemie.cz, study of chemistry, chemistry education, distribution of educational materials, chemistry education supporting webpage
SEZNAM POUŽITÝCH ZKRATEK (v abecedním pořadí):
CD – Compact disc – kompaktní disk – optický disk pro ukládání digitálních dat. CSS – Cascading Style Sheets - tabulky kaskádových stylů. DUM – Digitální učební materiál. FID – Free induction decay - volné doznívání indukce FTP – File Transfer Protocol - protokol určený pro přenos souborů mezi počítači. GPL – General Public License – licence určená pro svobodný software. HTML – HyperText Markup Language - značkovací jazyk pro hypertext. HTTP – Hypertext Transfer Protocol - internetový protokol určený pro výměnu hypertextových dokumentů. IUPAC – International Union of Pure and Applied Chemistry – Mezinárodní unie pro čistou a užitou chemii JPEG – Joint Photographic Experts Group - formát souborů pro ukládání obrázků. KUDCh – Katedra učitelství a didaktiky chemie. LGPL – Licence určená pro šíření počítačových programů MIT – Svobodná licence vzniklá na Massachusetts Institute of Technology. MySQL – Volně šiřitelný databázový systém využívající jazyka SQL. NMR – Jaderná magnetická rezonance PDF – Portable Document Format – přenosný formát dokumentů vyvinutý společností Adobe. PHP – Z anglického Personal home page - dynamický skriptovací programovací jazyk pracující na straně serveru. PřF UK – Přírodovědecká fakulta Univerzity Karlovy. RTE – Rich text editor – editor s rozšířenými možnostmi formátování RVP – Rámcový vzdělávací program. RVP G – Rámcový vzdělávací program pro gymnázia. SEO – Search engine optimalization – optimalizace internetových stránek pro vyhledávače.
SFTP – Secure FTP – zabezpečená verze protokolu FTP. SQL – Structured Query Language – strukturovaný dotazovací jazyk. Jedná se o standardizovaný dotazovací jazyk používaný pro práci s daty v relačních databázích. SŠ – Střední škola. ŠVP – Školní vzdělávací program. TIFF – Tag Image File Format – souborový formát rastrové počítačové grafiky. TXT – Formát souborů pro ukládání jednoduchého neformátovaného textu. UI – User interface – uživatelské rozhraní. URL – Uniform Resource Locator - „Jednotný lokátor zdrojů“. Řetězec znaků s definovanou strukturou, který slouží k přesné specifikaci umístění zdrojů informací na internetu. VŠ – Vysoká škola. VŠCHT – Vysoká škola chemicko-technologická v Praze. WMV – Windows Media Video - komprimovaný souborový videoformát. XML – Extensible markup Language – rozšiřitelný značkovací jazyk. XML – Extensible Markup Language – rozšiřitelný značkovací jazyk. Formát pro hypertext, který vznikl ve snaze vylepšit možnosti html. ZŠ – Základní škola.
TYPOGRAFICKÉ KONVENCE V TÉTO PRÁCI •
Kurzívou jsou zapsány zkratky a cizojazyčné termíny.
•
Neproporcionálně
s
velikostí
písma
11
jsou v textu psány HTML
elementy a HTML tagy •
Neproporcionálně
na
samostatný blok kódu.
šedém
pozadí
s
velikostí
písma
10
je zapsán
Abstrakt Tato práce byla zaměřena na vývoj a tvorbu funkčních částí a nových materiálů pro účely podpůrného výukového webového portálu www.studiumchemie.cz a evaluaci jeho provozu. V rámci práce byly provedeny změny v grafické, strukturní i funkční části stánek, které byly navrženy na základě analýzy chování návštěvníků na stránkách a na základě přímých reakcí těchto návštěvníků. Změny se týkaly například struktury databáze chemických pokusů nebo vytvoření nových funkcí pro registrované uživatele, například hodnocení materiálů nebo personifikace uživatelského profilu. Ve spolupráci s odborným pracovištěm bylo zapracováno také několik nových materiálů, zaměřených na problematiku jaderné magnetické rezonance (NMR) a dále byly autorem připraveny dvě hry – Chemický pětiboj a Poznej molekuly. Nové materiály by měly sloužit k rozšíření portfolia výukových materiálů na webových stránkách. Dále bylo vytvořeno administrační rozhraní, které bylo navrženo tak, aby splňovalo editační potřeby přispěvatelů webu bez předchozí zkušenosti s programováním. Vyhodnocení statistik spojených s provozem webu ukazuje, že návštěvnost webu od jeho vzniku neustále roste a nejnavštěvovanější částí stránek je databáze výukových materiálů, zejména videí chemických experimentů. Současná návštěvnost webu se pohybuje okolo 25003000 unikátních uživatelů měsíčně.
Abstract This diploma thesis is focused on development and production of functional parts and new materials for the purpose of supporting educational website www.studiumchemie.cz on evaluation of its operation. The changes were made in graphical, structural and functional parts of website, which were designed based on the analysis of behavior of visitors to the website and by direct reaction of visitors. Changes were related to structure of database of chemical experiments or creating new features for registered users, such as evaluation of materials or personification of user profile. In cooperation with specialists have been incorporated several new materials, focusing on the issues of nuclear magnetic resonance (NMR). In addition to that, two new games have been prepared - Chemical pentathlon and Identify molecules. New materials should be used to expand the portfolio of educational materials on the website. Furthermore, the administration interface has been created and
designed to meet the needs of editorial contributors site without prior programming experience. Evaluation of the statistics associated with the operation of the site showed that web traffic continues to grow. The most visited parts of the site are database of educational materials and videos of chemical experiments. The current site traffic is around 2500-3000 unique visitors per month.
Obsah 1.Úvod..................................................................................................................................................11 2.Cíl práce.............................................................................................................................................16 3.Použitý software................................................................................................................................17 4.Vývojové a analytické nástroje..........................................................................................................19 4.1.HTML5........................................................................................................................................20 4.2.CSS..............................................................................................................................................21 4.3.XML.............................................................................................................................................23 4.4.JavaScript....................................................................................................................................24 4.4.1.Knihovna jQuery..................................................................................................................24 4.4.2.Knihovna jQuery UI..............................................................................................................25 4.4.3.Knihovna FancyBox..............................................................................................................25 4.4.4.Knihovna TinyMCE...............................................................................................................26 4.5.PHP ............................................................................................................................................27 4.6.MySQL........................................................................................................................................28 4.7.Google Analytics.........................................................................................................................28 5.Inovace na stránkách www.studiumchemie.cz .................................................................................31 5.1.Struktura.....................................................................................................................................31 5.1.1.Úvodní stránka.....................................................................................................................32 5.1.2.Výukové materiály...............................................................................................................33 5.1.3.Učitelé a Žáci........................................................................................................................36 5.1.4.Odpovědna..........................................................................................................................38 5.2.Zaregistrovaní učitelé.................................................................................................................38 5.3.Chybová hlášení .........................................................................................................................40 5.4.Sociální sítě.................................................................................................................................42 5.4.1.Profil na sociální síti Facebook.............................................................................................42 5.4.2.Vlastní kanál na sociální síti YouTube..................................................................................43 6.Tvorba nového obsahu......................................................................................................................44 6.1.NMR............................................................................................................................................44 6.1.1.Převod do jazyka HTML .......................................................................................................46 6.1.2.Obsah stránek NMR.............................................................................................................46 6.1.3.Interaktivní obsah stránek NMR..........................................................................................47 6.1.4.Návštěvnost stránek NMR...................................................................................................50 6.2.Rozhraní pro databázi pokusů....................................................................................................51 6.2.1.Návštěvnost Databáze chemických pokusů.........................................................................53 6.3.Rok chemie.................................................................................................................................54 6.3.1.Návštěvnost stránek Roku chemie na PřF UK v Praze..........................................................55 6.4.Flashové hry................................................................................................................................56
6.4.1.Chemický pětiboj.................................................................................................................58 6.4.2.Poznej molekuly...................................................................................................................60 7.Administrační rozhraní......................................................................................................................62 7.1.Výběr nástrojů pro tvorbu AR.....................................................................................................63 7.2.Struktura ....................................................................................................................................64 7.2.1.Přihlášení do administrace...................................................................................................64 7.2.2.Výukové materiály...............................................................................................................65 7.2.3.Databáze pokusů.................................................................................................................67 7.2.4.Online testy.........................................................................................................................69 7.2.5.Odpovědna..........................................................................................................................69 7.2.6.NMR.....................................................................................................................................70 7.2.7.Ostatní.................................................................................................................................71 8.Statistiky spojené s provozem webu.................................................................................................71 8.1.Vývoj návštěvnosti......................................................................................................................71 8.2.Zdroje návštěvnosti....................................................................................................................72 9.Závěr..................................................................................................................................................74
1.Úvod Studie vědců z University of South California říká, že v roce 2000 bylo 75% všech světových informací uloženo v analogové podobě, tedy na médiích jako jsou knihy, časopisy, noviny, vinylové desky nebo videokazety. Údaje z roku 2007 však již pozorují diametrálně odlišný vývoj. V tomto roce byl, podle informací studie, 94% podíl ze všech světových informací uložen v podobě digitální [1]. Velkou měrou k této informační revoluci přispěl rychlý vývoj v oblasti informačních technologií, zejména pak vzrůstající vliv sítě internet, jakožto primárního zdroje informací, na každodenní život lidí v moderním světě. Výhodou informací na internetu oproti těm tištěným je jejich snadná publikovatelnost, možnost úprav v reálném čase a také fakt, že lze i v relativně velkém objemu takových dat poměrně pohodlně vyhledávat potřebné informace. Například oproti realitě studentů před dvaceti a více lety, kteří si veškerá data ke svým pracím byli nuceni shánět v knihovnách a archivech, je dnešní opatřování informací výrazně snazší. Není tedy divu, že za současného stavu, kdy je internet k dispozici ve většině českých domácností [2], je po informacích v digitální podobě daleko větší poptávka než po těch tištěných. Ovšem stejnou měrou, jako se rozvíjí internet a roste množství informací, které na něm jsou dostupné, vzrůstá i potřeba uživatelů z obrovského množství těchto informací vybrat právě ty, které je zajímají a které jsou fakticky správné. Internetové vyhledávače samozřejmě operují s algoritmy, které se snaží pro uživatele v prostředí internetu vyhledat data co nejrelevantnější a nejpřínosnější, ale podobným tempem, jako se zdokonalují algoritmy internetových vyhledávačů, zdokonalují se i metody těch, kteří chtějí na internetovém provozu především vydělat. Může se tak snadno stát, že uživatel často narazí na data, která byla vytvořena za zcela jiným účelem než poskytnout jejich čtenáři užitečné a kvalitní informace. Typickým příkladem jsou reklamní a propagační texty nebo obsah, který vznikl za účelem distribuce škodlivého softwaru (počítačové viry, trojské koně, spyware, adware...). Z důvodu těchto hrozeb je poměrně velká část především starších uživatelů internetu konzervativní a navštěvuje zejména obsah ze zavedených zdrojů, které zná a může jim důvěřovat. Učitel, který posléze z internetu získaná data předává dál svým žákům, by měl na věrohodnost, správnost a aktuálnost těchto informací dbát obzvlášť. Velké množství článků, které lze na síti nalézt, není z valné většiny původní, a pokud jde o ty s odbornou tématikou, 11
málokterý je recenzovaný nebo oponovaný. U těchto článků pak hrozí riziko, že mohou být plné nejen chyb pravopisných, ale také chyb faktických a mohou obsahovat řadu nepřesností a zavádějících informací. S nedostatkem kvalitních zdrojů se ale samozřejmě potýkají také žáci, kteří na internetu hledají například materiály pro zpracování eseje, šablony laboratorních protokolů nebo se jen chtějí podívat na videozáznam průběhu určitého chemického pokusu. V tomto směru se nejen učitelům, ale i žákům, na českém internetu snaží pomoci řada specializovaných portálů, které si již získaly širší oblibu díky kvalitnímu obsahu, jenž nabízí. Takovým zdrojem, který nabízí velké množství recenzovaných a velmi dobře strukturovaných výukových materiálů je například Metodický portál RVP.[3] Již z názvu je patrné, že se jedná o portál, který vznikl jako metodická podpora rámcových vzdělávacích programů (RVP) a podle tohoto kurikulárního dokumentu jsou zde také jednotlivé Digitální výukové materiály (DUM) strukturovány. Materiálů zaměřených na chemii obsahuje web celkem přes 250, z toho více než 220 DUM tvoří materiály věnované výuce chemie na základních školách a zbylých cca 30 DUM je věnováno výuce chemie na školách gymnazijního typu. Výhodou zde přítomných materiálů je fakt, že byly recenzovány a jejich kvalita je tedy garantovaná. Na druhou stranu tyto materiály, vzhledem k velkému počtu rozdílných autorů, nemají jednotnou formu, co týče zpracování, obsahu i zaměření. Materiály jsou již z principu tříděny podle příslušných dokumentů RVP,
struktura tohoto třídění má následující čtyři hierarchické
úrovně: 1. Vzdělávací oblast (např. Člověk a příroda) 2. Vzdělávací obor (např. Chemie) 3. Tématický okruh (např. Anorganická chemie) 4. Očekávaný výstup (např. Využívá názvosloví anorganické chemie při popisu sloučenin) Toto třídění je samozřejmě pro učitele, kteří zde výukové materiály hledají, přínosné, protože podle dokumentů RVP jsou tvořeny školní vzdělávací programy (ŠVP) na školách a obsah výuky tak této struktuře odpovídá. Kromě DUM nabízí Metodický portál RVP také další, pro učitele užitečný obsah, jako jsou články psané samotnými učiteli, učitelské blogy a možnost diskutovat s učiteli nad vybranými tématy. Portál dříve těžil především ze skutečnosti, že byli autoři DUM, kteří byli z valné většiny externí, za publikaci těchto materiálů finančně odměňováni. Ke dni 21.4.2012 však finanční odměňování autorů skončilo 12
a dá se tak očekávat, že se publikování nových kvalitních DUM na tomto portálu zpomalí. Dalším na českém webu velmi kvalitním zdrojem informací pro zájemce o chemii jsou stránky, které jsou dostupné z URL adresy http://canov.jergym.cz/ [4]. Jedná se o chemicky zaměřený portál jednoho z pedagogů gymnázia Jeronýmova v Liberci, který nabízí velké množství kvalitních studijních materiálů z oblasti středoškolské, ale i vysokoškolské chemie. U výukových textů je kladen důraz na názornost a jsou zpravidla doplněny množstvím vzorců a grafických schémat. Web je vedle toho obohacen o množství žertovných koláží, fotografií a animací, které jej ovšem podle mého názoru značně znepřehledňují. K nepříliš dobré orientaci navíc přispívá i formátování grafického obsahu stránek pomocí HTML atributů, což působí nejednotně (fonty písma, barvy písma, barvy pozadí). I přes zmíněné nedostatky je ale obsah těchto stránek po informační stránce vyčerpávající a pokud tomu návštěvník věnuje čas, většinou najde informace, které hledá. Spíše na praktickou část středoškolské chemie se zaměřují stránky gymnázia F. X. Šaldy v Liberci [5]. Tyto stránky nemají tak široký záběr učiva jako předchozí dva zmíněné portály, přesto však nabízí obsah, který je kvalitní a hojně vyhledávaný. Hlavní náplní stránek je databáze videí chemických pokusů, návody k laboratorním pracím a procvičování názvosloví anorganických i organických sloučenin. Z tohoto výčtu vyplývá, že jsou stránky věnovány spíše žákům, ale přítomna je zde i užitečná pomůcka pro učitele chemie v podobě editoru testů z názvosloví anorganických sloučenin. Rozhraní stránek je přehledné a jednoduše ovladatelné, stránky však nejsou aktualizovány a jejich obsah je již několik let neměnný. Zajímavých webů poskytujících podporu pro učitele chemie, respektive zaměřujících se na distribuci výukových materiálů pro SŠ a ZŠ žáky je ale na českém internetu více. V roce 2010 spustily svůj provoz také internetové stránky s podtitulem WEBCHEMIE – podpora výuky chemie [6], které fungují pod hlavičkou Katedry analytické chemie Univerzity Palackého v Olomouci. V sekci výukové materiály stránky obsahují především odkazy na užitečné chemické materiály přítomné na jiných internetových stránkách (figurují zde například i materiály z www.studiumchemie.cz), ale nabízí také vlastní tvorbu, jako je podstránka věnovaná chemickým výpočtům nebo animace proteosyntézy vytvořená v programu Adobe Flash. O tom, že jsou stránky pravidelně aktualizovány svědčí upoutávky na 13
nejbližší akce s chemickou tématikou a sekce „novinky“, která upozorňuje na čerstvé objevy a zajímavosti ze světa chemie. Portál WEBCHEMIE samozřejmě nemůže být, co se týče rozsahu, porovnáván s předchozími třemi zmíněnými internetovými stránkami, ale jistě má ambice stát se důležitým zdrojem informací pro učitele chemie a jejich žáky. Dalšími přínosnými weby, které se věnují probírané tématice jsou například Projekt Alfa [7], stránky Laboratorní průvodce [8] nebo portál ECHO fungující pod hlavičkou VŠCHT [9]. Tyto projekty, ačkoli stále nabízí kvalitní obsah, již bohužel několik let nejsou aktualizovány. V reakci na existenci některých z výše zmíněných portálů a se vzrůstající potřebou média, které by umožnilo distribuovat materiály vytvořené na Katedře učitelství a didaktiky chemie (KUDCh) Přírodovědecké fakulty Univerzity Karlovy (PřF UK) v Praze, byl v roce 2008 uveden do provozu webový portál pro podporu výuky chemie na ZŠ a SŠ www.studiumchemie.cz. Tento web byl již od počátku koncipován jako distribuční médium určené ke zprostředkování přístupu k obsahům bakalářských, diplomových a rigorózních prací, které byly na KUDCh PřF UK, potažmo na sekci chemie PřF UK v praze, pro účely výuky chemie na SŠ a ZŠ vytvořeny [10,11]. Ve své původní formě obsahovaly stránky tři hlavní části: sekci věnovanou učitelům, sekci věnovanou žákům a sekci určenou k odpovídání na dotazy s chemickou tématikou. K těmto částem stránek byl přístup z hlavního menu umístěného v levé části stránek. Nejpodstatnější složkou webu byly výukové materiály, ke kterým měli návštěvníci webu přístup přes odkaz z horního orientačního menu stránek a rovněž ze zmíněných hlavních sekcí pro žáky a učitele. Kompletní seznam výukových materiálů zde bylo možné třídit podle kategorií dle dokumentu RVP G a dle typu materiálu (např. video, test, prezentace apod.). Zároveň byla u některých materiálů k dispozici verze určená učitelům, která obsahovala například řešení k příkladům, vyplněné laboratorní protokoly apod. K učitelským verzím měl ovšem přístup pouze přihlášený uživatel, který se na stránkách registroval jako učitel a prošel verifikací svých údajů. Pro učitele dále stránky obsahovaly také editor testů, v němž si učitel mohl ze zde přítomných otázek sestavit vlastní test a ten posléze vytisknout ve verzi, kterou rozdal žákům, i ve verzi pro učitele, která již obsahovala vyplněná správná řešení. K tomu, aby mohl daný učitel tuto pomůcku používat, musel být pochopitelně přihlášený také. Část věnovaná žákům obsahovala „Online testy“, ve kterých si mohli vyzkoušet své vědomosti z vybraného chemického oboru přímo na stránkách, a sekci „Laboratorní pomůcky“, což byl 14
malý přehled laboratorního nádobí včetně fotografií jednotlivých pomůcek. Pro širokou veřejnost byla na stránkách zřízena také sekce „Odpovědna“, kde mohl kdokoli z příchozích pokládat prostřednictvím webového formuláře otázky týkající se chemie nebo její výuky. Odpovědi, které byly zpracovávány pověřenými osobami na KUDCh, byly zveřejňovány na stránkách www.studiumchemie.cz a také zasílány tazateli emailem. Zpočátku byla návštěvnost stránek zanedbatelná, jelikož nebylo k dispozici příliš mnoho distribučních kanálů, ze kterých by se o jejich existenci případní zájemci mohli dozvědět. Postupem času se stránky dostaly prostřednictvím různých, zejména didaktických, konferencí a také díky indexaci obsahu webu internetovými vyhledávači do širšího povědomí a návštěvnost utěšeně vzrůstala. S rychlým rozvojem portálu bylo třeba řešit řadu otázek, které byly spojeny s povahou přibývajícího obsahu, s pokrokem webových technologií a s potřebami návštěvníků a autorů výukových materiálů. Pro nové typy materiálů bylo třeba vytvořit nová rozhraní („Laboratorní pomůcky“, „Chemická 3D videa“, „Databáze chemických pokusů“, „Templáty chemických vzorců“...) a nové sekce v databázi chemických pokusů („Mezioborová témata“, „Ostatní“...), což bylo samozřejmě spojeno se změnami v databázi i ve zdrojovém kódu stránek. Rozvoj sociálních sítí zavdal příčinu ke vzniku profilu na sociální síti Facebook a ke vzniku kanálu na sociální síti pro sdílení videí YouTube. S rychle přibývajícím počtem výukových materiálů navíc vyvstala potřeba vytvořit prostředí pro samotné autory, které by umožnilo tyto materiály na stránky vkládat. Během všech těchto změn se samozřejmě měnila i celá vnější podoba portálu. Změny po grafické a strukturní stránce probíhaly v souladu s empiricky zjištěným chováním návštěvníků na stránkách a v souladu se zpětnou vazbou, která byla získána přímo od jednotlivých návštěvníků portálu. Vyhodnocování dopadů portálu se provádělo především prostřednictvím nástroje Google Analytics [12], který poskytuje řadu užitečných dat popisujících chování návštěvníků na stránkách. Dle tohoto zdroje dnes navštíví stránky během školního roku cca 2500 – 3000 unikátních návštěvníků měsíčně.
15
2.Cíl práce Vzhledem k uvedeným skutečnostem je zřejmé, že rozvoj portálu, jakým je www.studiumchemie.cz je neustále popoháněn novými a novými potřebami, které jsou směřovány od uživatelů i od autorů výukových materiálů. Proto byl stanoven cíl práce, v podobě jednotlivých úkolů, který tyto potřeby reflektuje. Tyto úkoly budou prováděny v následujícím pořadí: • Úpravy vnější podoby webu na základě zpětné vazby od návštěvníků • Tvorba nových funkcí webu a zavedení nových služeb pro návštěvníky • Zlepšení funkcionality stávajících aplikací • Výběr již hotových materiálů a jejich vložení na web • Příprava nových materiálů • Administrační rozhraní pro snadné vkládání nových materiálů • Vyhodnocení statistik spojených s provozem webu www.studiumchemie.cz .
16
3.Použitý software PSPad editor (v3.81, autor:Jan Fiala ): Editor použitý k programování v jazycích HTML, PHP a k editaci kaskádových stylů (CSS). Komodo Edit (v7, autor:ActiveState Software Inc.): Editor použitý k programování v jazycích HTML, PHP a JavaScript a editaci kaskádových stylů (CSS). Adobe Flash (CS4, autor:Adobe Systems Incorporated): Program použitý pro tvorbu animací a her. Any Video Converter(v3.0.1, autor: AVCLabs Inc.): Program použitý při kompresích a změnách formátu videí. Paint.NET (v3.5.10, autor: Rick Brewster): Program použitý na grafické operace s obrázky Chemsketch (v12.01, autor: Advanced Chemistry Development, Inc.): Program použitý ke tvorbě chemických vzorců a k vizuálnímu ztvárnění molekul. WinSCP (v4.2.7, autor: Martin Přikryl): SFTP klient použitý k přenosu dat na server web.natur.cuni.cz. Apache (v2.4.1, autor: Apache Software Foundation): Softwarový webový server použitý ke zpracovávání PHP. PhpMyAdmin (v3.5.2.2, autor: Olivier Müller, Marc Delisle a Loïc Chapeaux): Nástroj sloužící pro tvorbu a správu tabulek. Mozila Firefox (v14.0, autor: Mozilla Corporation): Internetový prohlížeč použitý pro testování vzhledu stránek. Internet Explorer (v9, autor: Microsoft Corporation): Internetový prohlížeč použitý pro testování vzhledu stránek. Google Chrome (v21.0.1180.89, autor: Google Inc.): Internetový prohlížeč použitý pro 17
testování vzhledu stránek a jejich vývoj. Opera (v12.00, autor: Opera Software ASA): Internetový prohlížeč použitý pro testování vzhledu stránek.
18
4.Vývojové a analytické nástroje Při výběru vývojových a analytických nástrojů bylo kromě jejich funkčnosti a oblastí využití dbáno především na to, aby byly zdarma a volně šiřitelné. Všechny níže vyjmenované nástroje v rozsahu, v jakém byly použity při tvorbě www.studiumchemie.cz tyto podmínky splňují. HTML (v5, - ): Značkovací jazyk pro tvorbu obsahu webových stránek. CSS (v3, - ): Jazyk určený pro formátování vzhledu stránky (pozadí, fonty písma, velikosti písma, rozvržení stránky atd.) XML (v1.0, - ): Značkovací jazyk pro uchovávání malých objemů dat ve strukturované podobě a manipulaci s nimi (databázové soubory pro hry, RSS kanály apod.) JavaScript (-, autor: Brendan Eich): Skriptovací programovací jazyk použitý k obsluze událostí na straně uživatele (kliknutí myši, interaktivita formulářových polí, vizuální efekty). jQuery (v1.7.2, autor: John Resig): Knihovna usnadňující práci s JavaScriptem. FancyBox (v1.3.4, autor: fancybox.net ): Knihovna sloužící k tvorbě efektních a snadno ovladatelných fotogalerií. TinyMCE (v3.5.6, autor: Moxiecode Systems AB): Knihovna sloužící k tvorbě interaktivního editoru textového a dalšího obsahu PHP (v5.3, autor: Rasmus Lerdorf): Skriptovací jazyk použitý pro vykonávání událostí na straně serveru (ukládání dat do databáze a jejich načítání, vkládání obsahů stránek apod.). MySQL (v5.5.27, autor: Michael Widenius a David Axmark): Použitý databázový systém. Google Analytics (-, autor: Google Inc.): Nástroj umožňující analýzu údajů o příchozích návštěvnících a jejich chování na stránkách. Řada z těchto vývojových nástrojů již byla popsána v rámci mé bakalářské práce [11]. Nyní se tedy omezím spíše na informace o činnostech, které byly za přispění těchto nástrojů 19
realizovány v rámci této diplomové práce a na popis nástrojů nových.
4.1.HTML5 Stránky www.studiumchemie.cz byly ve své původní podobě vytvořeny ve verzi HTML 4.01 transational. S rozmachem prohlížečů, které podporují nejnovější a v jistém slova smyslu revoluční verzi tohoto jazyka, HTML5, jsem se rozhodl stránky přizpůsobit této verzi. Význam této změny spočívá především v usnadnění budoucích změn na stránkách v souladu s webovými trendy. HTML5 je poslední verzí značkovacího jazyka HTML, který slouží ke psaní internetových stránek. Zavádí do praxe řadu nových HTML tagů, které se dají rozdělit do skupin, podle úlohy, jakou v kódu plní: • tagy podporující strukturu obsahu: header, section, nav, footer apod. • tagy určené pro vkládání interaktivního obsahu: canvas, audio, video apod. • tagy určené pro různé typy seskupeného obsahu: figure, figcaption apod.
Kromě nových tagů však HTML5 zavádí do praxe také nové atributy, které lze k těmto tagům přiřadit. Z těch, které jsem při vývoji webu použil bych zmínil zejména atribut „required“, který se používá u formulářových elementů. Smysl atributu „required“ spočívá v tom, že prvky, ke kterým byl tento atribut přiřazen (nejčastěji textová pole) je uživatel povinen vyplnit. (Obr. 1) Pokud uživatel tento prvek nevyplní, formulář se neodešle ke zpracování.[13,14]
20
Obr.1: Ukázka použití tagu „required“ ve formuláři na webu (http://www.studiumchemie.cz/registrace.php)
4.2.CSS CSS (Cascading style sheets) je programovací jazyk, který je primárně určen k popisu vzhledu dokumentu vytvořeného ve značkovacím jazyce HTML. Hlavním smyslem masového používání tohoto jazyka je oddělit obsah reprezentovaný značkovacím jazykem HTML od formy, tedy vzhledu dokumentu. CSS jsem si pro formátování vzhledu vybral, protože se jedná o modernější ze dvou možných variant. Druhou variantou je definovat vzhled každého HTML elementu zvlášť za použití HTML atributů (color, font, bgcolor atd.). Tato možnost je bohužel, na rozdíl od použití CSS stylů, zbytečně pracná a pokud chceme, aby měly všechny podstránky většího celku podobný vzhled, není ani praktická. Přijde-li náhle potřeba grafický formát změnit, musí se u každého jednotlivého elementu zvlášť přepisovat jeho atributy. CSS místo toho nabízí formátování elementů za užití atributů „class“ (třída) a „id“ (identifikátor). Takže například všechny HTML elementy (tabulky, formulářové prvky, nadpisy, položky menu apod.), které mají mít na stránkách stejné grafické formátování mají název třídy stejný a v souboru CSS jsou styly této třídy definovány. Pokud chceme plošně změnit například 21
zobrazení textových polí, stačí změnit definici popis třídy v CSS souboru a následně se zobrazení u všech prvků s touto třídou změní i na stránce. Předně ovšem musí být daný soubor CSS do každé stránky, na niž má mít vliv, vložen. Vkládá se do hlavičky stránky, tedy do elementu head a vložení může vypadat například takto: … …
V kódu HTML se elementu přiřadí třída s určitým názvem:
Toto je rámec se šedým pozadím a zakulacenými rohy.
V kódu vloženého souboru styly.css se tato třída definuje: .rounded_grey_bg_box { background-color: #ECECEC; padding: 20px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
Tento kód definuje element, jehož barva pozadí má mít kód ECECEC, vnitřní odsazení textu od okrajů má být 20 pixelů a poloměr zakulacení rohů má být 15 pixelů (je zde definováno třikrát pro tři různé typy prohlížečů). Jak by vypadal výsledek vidíme na obr. 2.
Obr. 2: Ukázka použití CSS Zde uvedená ukázka s externím souborem CSS, který se načítá do stránky je jednou z variant, jak s CSS pracovat. Další možností je obsah uvedeného CSS souboru vložit do elementu style přímo do HTML kódu stránky, nebo přiřazovat styly přímo jednotlivým elementům za využití atributu „style“. První z výše zmíněných možností je ekvivalentní uvedené variantě, ale myslím, že kód mírně znepřehledňuje. Druhá možnost je neefektivní, 22
protože určuje styly pro každý HTML element zvlášť. Měla by tedy stejné nevýhody jako definování stylů za pomocí HTML atributů. [13,15]
4.3.XML Zkratka XML (eXtensible Markup Language) v přesném překladu z angličtiny znamená rozšířitelný značkovací jazyk. Jedním z hlavních rozdílů mezi XML a HTML, o kterém jsem psal výše, spočívá v tom, že oproti HTML lze do XML vkládat vlastní značky (tagy). Tedy například mezi tagy a umístíme určitý text a na ten se potom můžeme díky těmto tagům odkazovat. Tato funkce jazyka XML je užitečná především z hlediska uspořádávání a uchovávání dat v přehledné formě. Využívá se jí například při tvorbě RSS kanálů, které nejsou ničím jiným než dynamicky generovaným kódem jazyka XML, který je formátován podle pravidel určených pro danou verzi RSS. Při práci na vlastních materiálech určených pro www.studiumchemie.cz jsem dynamicky generované XML využil mimo jiné pro tvorbu databázového souboru pro hru Poznej molekuly. V souboru molekuly.php jsou uloženy potřebné údaje o jednotlivých molekulách, soubor tak obsahuje údaje o jejich názvu, o umístění souborů s jejich 2D a 3D obrázky, o jejich obtížnosti pro účel hry a o skupině chemických látek, do které patří.[14,16] V tomto případě byl jako prostředek pro uchovávání dat zvolen jazyk XML pro snadnou práci s daty v tomto formátu ve flashových aplikacích. <molekula> acetaldehydorganika2D/acetaldehyd.pngorganika3D/acetaldehyd.png2aldehydy <molekula> adeninorganika2D/adenin.pngorganika3D/adenin.png4heterocykly
23
4.4.JavaScript Jazyk
JavaScript
v
jeho
základní
podobě
jsem
při
tvorbě
obsahu
www.studiumchemie.cz využíval minimálně. Jeho hlavní využití spočívalo v ošetření formulářů před jejich zpracováním. Více jsem využíval knihovny, které mi práci s JavaScriptem usnadnily a byly v tomto jazyce napsány. Jednalo se o knihovny jQuery (viz 4.4.1.), jQuery UI (viz 4.4.2.), FancyBox (viz 4.4.3.) a TinyMCE (viz 4.4.4.). Všechny tyto knihovny byly jako soubory JavaScriptu vloženy do hlavičky HTML dokumentu, obdobně jako například soubory CSS.
4.4.1.Knihovna jQuery jQuery je knihovna na bázi JavaScriptu, která velmi usnadňuje psaní kódu v tomto programovacím jazyce. Zjednodušuje tvorbu animací, manipulaci s CSS styly, zpracovávání událostí na straně uživatele a zrychluje tak vývoj webových aplikací. Použita byla především k provádění drobných efektů na stránkách. Příkladem může být náhodná změna obsahu v reálném čase v sekci „Mohlo by Vás zajímat...“ na úvodní stránce bez nutnosti načítat tuto stránku znovu.[17,18] Přítomnost této knihovny je nutná také kvůli správnému fungování níže uvedených knihoven jQuery UI (4.4.2.) a FancyBox (4.4.3.).
24
4.4.2.Knihovna jQuery UI Jak již název napovídá, jQuery-UI je užitečný nástroj pro tvorbu UI (User Interface), který pracuje na bázi knihovny jQuery. jQuery UI disponuje řadou předdefinovaných prvků a funkcí, které usnadňují tvorbu UI. Mne z nabídky doplňků a funkcí, které tato knihovna nabízí zaujalo efektní „akordeonové“ menu (Obr. 3), které jsem použil při tvorbě administračního rozhraní. V budoucnu lze z této knihovny do stránek začlenit například funkci drag & drop (táhni a pusť), funkci automatického dokončování nebo interaktivní kalendář.[19] Obr. 3: „Akordeonové“ menu (http://www.studiumchemie.cz/admin)
4.4.3.Knihovna FancyBox FancyBox je nástroj vytvořený na bázi knihovny jQuery, který umí vytvářet efektní rozhraní pro prohlížení obrázků, HTML obsahu nebo multimédií. Je dostupný pod licencemi MIT a GPL. [20] V praxi funguje tak, že uživatel klikne na miniaturu obrázku, který se poté zvětší a přesune do popředí monitoru přes všechen ostatní obsah. V okně zvětšeného obrázku pak uživatel může šipkami přepínat na předchozí a následující obrázky v galerii. Kliknutím na ikonku křížku vpravo nahoře nad obrázkem nebo kamkoli mimo plochu obrázku uživatel režim prohlížení obrázků ukončí. Tuto knihovnu jsem zvolil, protože není náročná na implementaci, je uživatelsky přívětivá a vizuálně velmi zdařilá. Podobné galerie, vytvořené v knihovně FancyBox nebo v knihovně LightBox, která je její velmi podobnou alternativou, navíc najdeme na stránkách po celém světě. Mnoho uživatelů již tedy má s ovládáním fotogalerií založených na tomto 25
principu zkušenost. Galerie obrázků vytvořené za pomoci knihovny FancyBox byly použity na stránkách Roku chemie na PřF UK (Obr. 4) v Praze, na podstránkách věnovaných NMR a v sekci chemických pokusů.
Obr. 4: Ukázka použití knihovny FancyBox na stránkách Roku chemie na PřF UK v Praze (http://www.studiumchemie.cz/rokchemie/fotogalerie.php)
4.4.4.Knihovna TinyMCE TinyMCE je knihovna na bázi JavaScriptu, která umožňuje vkládat na webové stránky ovládací prvek Rich Text Editor (RTE). Tedy editor s rozšířenými možnostmi formátování textu. Knihovna byla uvolněna jako svobodný software s otevřeným zdrojovým kódem pod licencí LGPL společností Moxiecode Systems AB. TinyMCE umožňuje přeměnit HTML element textarea nebo jiné formulářové prvky jazyka HTML na instanci RTE editoru. [21] TinyMCE jsem využil především při tvorbě administračního rozhraní, jehož základním 26
smyslem je možnost editovat data na jednotlivých částech stránek www.studiumchemie.cz. Ovšem ne všechna data, která chtějí uživatelé na stránky vložit jsou ve formátu prostého textu. Někdy je potřeba na stránky vložit hypertextový odkaz, jindy pro chemii tak typické horní a dolní indexy. Uživatel bez znalostí jazyka HTML by ovšem tyto prvky přes jednoduché textové pole na stránky vložit nemohl. Proto jsem využil právě knihovny TinyMCE, která umožňuje z elementů textarea a text udělat prvky editovatelné pomoci jednoduchého RTE.(Obr. 5) Díky tomuto RTE uživatel může vkládaný text formátovat, přidávat hypertextové odkazy, horní a dolní indexy nebo vkládat obrázky.
Obr. 5: Ukázka použití knihovny TinyMCE
4.5.PHP Úloha PHP jakožto skriptovacího jazyka zpracovávaného na straně serveru spočívá v rámci stránek www.studiumchemie.cz především v komunikaci s databází MySQL. Prostřednictvím skriptů napsaných v jazyce PHP jsou data do databáze nahrávána a obdobně jsou i z databáze data získávána. PHP plní také důležitou úlohu při skládání webových stránek z jednotlivých částí. Například úvodní stránka portálu se skládá ze šablony, do které je prostřednictvím skriptu PHP vkládán obsah, který je na všech podstránkách portálu stejný, jako je hlavička stránek a levá část stránek obsahující hlavní menu. Tyto části stránek jsou vkládány příkazem „include“ jako jednotlivé soubory PHP. Obsahovou část již má každá podstránka portálu unikátní. Nezanedbatelná výhoda tohoto postupu spočívá zejména v tom, že pokud bude nutné 27
například přidat položku do hlavního menu, stačí tento úkon provést pouze v souboru menu.php a změna se projeví na všech stránkách portálu. Dalšími důležitými funkcemi PHP, které jsou použity na www.studiumchemie.cz jsou například načítání dat na server, čehož je hojně využíváno v administračním rozhraní nebo odesílání informativních e-mailů v případě vložení nových dotazů od uživatelů do odpovědny.
4.6.MySQL V databázi MySQL bylo za dobu fungování stránek www.studiumchemie.cz vytvořeno přes 40 tabulek, ve kterých jsou uloženy například informace o výukových materiálech, celý obsah databáze chemických pokusů, data registrovaných učitelů, dotazy z odpovědny, aktuality nebo data k vytvořeným či připravovaným hrám. Citlivé údaje, jako jsou hesla registrovaných uživatelů jsou v databázi šifrována algoritmem MD5, aby nemohlo dojít k jejich zneužití. Databáze je pravidelně zálohována, aby v případě nehody nedošlo ke ztrátě cenných dat.
4.7.Google Analytics Služba
Google
Analytics,
ke
které
je
přístup
z
internetové
adresy
http://www.google.com/analytics je hlavním analytickým nástrojem pro sledování dopadu stránek www.studiumchemie.cz na jejich návštěvníky. Poskytuje informace o počtu návštěvníků stránek v určitém časovém rozmezí, o tom ze kterých zdrojů tito návštěvníci přišli, a o atraktivitě a návštěvnosti jednotlivých podstránek. Služba je tyto údaje schopná měřit díky úseku kódu, který je nutno na každou podstránku daného portálu vložit.[12]
28
Obr. 6: Rozhraní nástroje Google Analytics (http://www.google.com/analytics) Z údajů o návštěvnících, které jsou v Google Analytics k dispozici pod položkou „Cílové publikum“ je asi nejpodstatnějším údajem celkový počet unikátních návštěvníků, kteří si ve zvoleném časovém rozmezí našli na stránky cestu. Jsou zde ale i další zajímavé statistiky, jako je například poměr nových návštěvníků a těch, kteří již portál v minulosti navštívili nebo údaje o prohlížečích a operačních systémech, které návštěvníci nejčastěji používají. Poslední zmíněná statistika je například velmi užitečná při testování stránek, protože ukazuje pro jaké prohlížeče je stránky zapotřebí optimalizovat. Položka „Zdroje návštěvnosti“ ukazuje, jaký je podíl jednotlivých zdrojů provozu. Zdroje provozu se dělí do tří kategorií: • Provoz z vyhledávání • Návštěvnost z odkazujících stránek • Přímá návštěvnost Prakticky tato statistika tedy ukazuje poměr mezi tím, jak moc atraktivní jsou klíčová slova na stránkách pro webové vyhledávání, jak dobře jsou ve webových vyhledávačích zaindexovány, kolik návštěvníků přijde na stránky www.studiumchemie.cz přes odkazy z jiných stránek a kolik návštěvníků chodí na stránky přímo po zadání jejich URL adresy do internetového prohlížeče. V části věnované provozu z vyhledávání jsou dále výjimečně důležité údaje o nejfrekventovanějších klíčových slovech, přes která se návštěvníci z vyhledávače na web www.studiumchemie.cz dostali, protože to v zásadě ukazuje, jaké oblasti obsahu stránek je nejvíce zajímají a jaká témata jsou v současné době aktuální. 29
V položce „Obsah“ se vyskytují statistiky jednotlivých podstránek webu. O jednotlivých stránkách se tak například můžeme dozvědět počet návštěvníků, kteří je za určitý časový úsek navštívili a kolik času na nich strávili. Všechny jmenované statistiky jsou mimořádně přínosné především v situacích, kdy je na stránky vkládán nový obsah a je třeba zhodnotit jeho přínosnost pro návštěvníka. Takováto analýza byla provedena například v případě stránek Roku chemie na PřF UK v Praze (viz 6.3.), podstránek věnovaných NMR (viz 6.1.).
30
5.Inovace na stránkách www.studiumchemie.cz Od roku 2008, kdy byly stránky uvedeny do provozu došlo k přehodnocení řady postupů, jimiž byly původně tvořeny. Byly zařazeny některé nové vývojové a analytické nástroje a také struktura webu se v souladu se zkušenostmi s jeho provozem výrazným způsobem proměnila. Těmto změnám předcházela analýza dat na Google Analytics a reakce na přímé ohlasy návštěvníků. Shromažďování ohlasů vyvrcholilo čtyřmi cílenými rozhovory s příležitostnými návštěvníky portálu, kteří se vyjádřili ohledně toho, co by na stránkách vylepšili a co se jim na nich naopak nelíbí. Vyhodnocení všech shromážděných informací následně vedlo k některým změnám ve strukturní, grafické, ale i obsahové části stránek.
5.1.Struktura Po organizační stránce došlo na stránkách www.studiumchemie.cz hned k několika zásadním změnám. Z původního umístění u levého okraje okna prohlížeče byl web přemístěn na střed tohoto okna. Důvodem této úpravy byly především nepříliš vzhledné náhledy v některých internetových vyhledávačích a všeobecný trend dnešní doby, který upřednostňuje stránky vycentrované. S ohledem na význam jednotlivých podstránek portálu byla také pozměněna struktura levého (hlavního) i horního (orientačního) menu. Vzhledem k tomu, že páteřní část obsahu tvoří zejména výukové materiály, byla tato položka umístěna do levého menu na první místo. Následně byly položky tohoto menu dále seřazeny na základě jejich předpokládaného a současně také empiricky zjištěného významu. Pod levým menu je umístěn přihlašovací formulář pro registrované učitele, obrázek dveří budovy PřF UK v Hlavově ulici sloužící jako odkaz na webové stránky PřF UK v Praze a odkaz na facebookový profil Studiumchemie.cz. Horní menu bylo zúženo na čtyři položky „Domů“, „O projektu“, „Kontakt“ a „Registrovat jako učitel“.
31
5.1.1.Úvodní stránka Změnil se také obsah úvodní stránky, který byl tvořen průvodním textem k projektu www.studiumchemie.cz. Dnes je na úvodní stránce přítomno několik panelů, z nichž každý má určitou informativní funkci. Panel „Aktuality“ informuje o posledních změnách na stránkách, v panelu „Poslední přidané materiály“ jsou vypsány nejnovější materiály, které byly přidány do databáze www.studiumchemie.cz a zároveň jsou v něm zobrazeny celkové počty všech výukových materiálů v jednotlivých chemických sekcích. Panel „Poslední zodpovězený dotaz“ obsahuje poslední zaznamenanou odpověď na otázku položenou v sekci „Odpovědna“. V pravé horní části hlavní stránky je k dispozici okno „Mohlo by Vás zajímat..“, které upozorňuje na nejpodstatnější části stránek, případně na aktuální akce určené učitelům a žákům SŠ a ZŠ na KUDCh. Nová struktura úvodní stránky má význam i z hlediska optimalizace pro internetové vyhledávače SEO. Indexovací roboti přiřazují větší význam stránkám, jejichž obsah se aktualizuje, než statickému obsahu a klíčová slova v podobě názvů posledních přidaných materiálů jsou také důležitým faktorem. Zároveň je na úvodní stránce množství hypertextových odkazů, přes které se indexovací roboti mohou přímou cestou dostat k dalšímu obsahu portálu.
5.1.2.Výukové materiály Hlavním obsahem stránek jsou výukové materiály, kterých v současnosti obsahuje databáze www.studiumchemie.cz přes 270. Všechny tyto materiály bez výjimky pochází ze zdrojů PřF UK v Praze, z valné většiny z KUDCh. Sekce, ve které jsou materiály přítomny doznala z důvodu zpřehlednění a zlepšení použitelnosti drobných změn. V původní verzi bylo třídění zprostředkováno dvěma 33
formulářovými prvky pro výběr požadovaných parametrů. V prvním si mohl uživatel vybrat chemický obor („Obecná chemie“, „Anorganická chemie“, „Organická chemie“ nebo „Biochemie“), v druhém si mohl vybrat formu, ve které byl materiál v databázi přítomen (na výběr byly formáty „pdf“, „video“, „hry“ a „www“). Po stisknutí tlačítka „zvolit“ se seznam zúžil pouze na materiály odpovídající zvoleným kritériím. V jednotlivých sloupcích výpisu materiálů potom figurovaly následující položky: „Název“, „Autor“, „Žáci“ (materiály pro žáky), „Učitelé“ (materiály pro učitele) a „Forma“. (Obr. 8)
Obr. 8: Jedna z prvních verzí sekce Výukové materiály Nová verze této sekce se změnila především po strukturní stránce. Třídění je nyní místo formulářových prvků pro výběr reprezentováno soustavou hypertextových odkazů. Opět jsou použita dvě kritéria třídění výukových materiálů, a to výběr na úrovni chemických oborů a podle typu materiálu. Třídění podle chemických oborů má oproti minulé verzi dvě úrovně. Hlavní chemické obory podle RVP G byly doplněny o „Mezioborová témata“ a „Ostatní“ a po vybrání jednoho z těchto oborů je uživateli nabídnuta nižší úroveň, jejíž struktura je rovněž odvozena od dokumentu RVP G. Na obrázku vidíme, že například po vybrání hlavního chemického oboru 34
„Obecná chemie“ je uživateli nabídnuto ještě přesnější třídění na podobory jako jsou „Soustavy látek a jejich složení“, „Veličiny a výpočty v chemii“, „Stavba atomu“apod. Třídění podle typu materiálu je jednoúrovňové. Reprezentují jej tyto položky: • Test • Prezentace • Pracovní listy • Učební texty • Video • WWW stránky • Hry a kvízy Uživatel má samozřejmě na výběr, zda bude materiály třídit podle jednoho z třídících mechanismů nebo podle obou současně. Může si tak vybrat například všechna videa, která se týkají tepelné změny při chemických reakcích (obecná chemie) nebo si nechat vypsat pouze všechna videa či pouze všechny materiály týkající se tepelné změny při chemických reakcích.
Seznam výukových materiálů byl změněn i po grafické stránce. Obsahuje sloupce „název“, „žáci“, „učitelé“, „formát“ a „hodnocení“. Sloupec autor byl z hlavního okna pro výpis odebrán, protože má své místo v detailu materiálu, kde jsou vypsány i ostatní informace o materiálu jako je datum vzniku, školitel, pod jehož vedením materiál vznikal a případný popis. Okno detailu se uživateli otevře po kliknutí na název daného materiálu. Pokud se jedná o registrovaného uživatele a je-li přihlášen, má možnost si zde materiál přidat do oblíbených nebo jej ohodnotit odpovídajícím počtem hvězdiček. Po kliknutí na ikonku modré šipky je možné si materiál stáhnout nebo prohlédnout (záleží na jeho formě). Stáhnout nebo otevřít materiál může uživatel i z okna detailu tohoto materiálu.
5.1.3.Učitelé a Žáci Tyto dvě sekce slouží spíše k rozlišení toho, který obsah je určen které skupině návštěvníků, a z velké části mají obsah shodný. Jedná se o „Výukové materiály“, „Laboratorní pomůcky“, „Chemická 3D videa“ a odkaz na stránky Roku chemie, v jehož rámci na PřF UK proběhla v roce 2011 řada akcí. Kromě těchto společných částí je v sekci „Učitelé“ navíc k dispozici „Databáze chemických pokusů“ (viz 6.2), „Editor testů“ (viz 5.2.), „Templáty chemických vzorců“, některá autorská řešení výukových materiálů a testy a odkazy na sborníky z konferencí věnujících se tématu chemického vzdělávání. Žákům jejich sekce zase může nabídnout možnost vyzkoušet si své vědomosti z hlavních chemických oborů online v části Online testy nebo zamířit na podstránku „Projekty na PřF UK pro studenty SŠ“. Část Laboratorní pomůcky nabízí fotogalerii laboratorních pomůcek a přehled demonstračních videí, která slouží k ukázce některých laboratorních metod a postupů. Videa lze na stránkách přehrávat v přehrávači YouTube. (obr. 10)
36
Obr. 10: Laboratorní pomůcky (http://www.studiumchemie.cz/laboratorni_pomucky.php?stranka=2) Chemická 3D videa nabízí soubor cca 35 videí, která byla pořízena 3D kamerou a jsou určena pro přehrávání na zařízeních, která 3D zobrazení podporují. Autory těchto videí jsou Eva Vrzáčková, Jan Břížďala a Ondřej Říha, kteří je zpracovávali pod vedením RNDr. Petra Šmejkala, Ph.D. Templáty chemických vzorců jsou pomůckou pro učitele, kteří tvoří test nebo výukový materiál a potřebují do něj vložit vzorce chemických látek. Tato sekce obsahuje přehledný seznam tématicky rozdělených šablon vzorců chemických látek, které jsou ke stažení ve třech možných formátech – PDF, TIFF, SK2. Obsah této sekce vytvořil kolega Martin Švehla. Pokud si chce student vyzkoušet své chemické vědomosti online, může využít sady chemických otázek v Online testech. Otázek v databázi je zatím 120, tedy 30 z každého z 37
hlavních chemických oborů vymezených dokumentem RVP G. Jelikož v současné době již lze otázky do databáze přidávat prostřednictvím administračního rozhraní, dá se očekávat, že se jejich počet bude dále zvyšovat.
5.1.4.Odpovědna Tato sekce je určená k zodpovídání dotazů návštěvníkům portálu. Dotazy mohou návštěvníci pokládat a odesílat přes webový formulář. „Odpovědna“ je jednou z mála sekcí, ve které nedošlo ke strukturním, ani funkčním změnám. Drobně se změnila grafika této sekce, ale tato úprava proběhla pouze v duchu jednotné grafické přeměny celého portálu. „Odpovědna“ se skládá ze dvou částí, z formuláře pro kladení otázek s chemickou tématikou, jehož služeb mohou využívat všichni návštěvníci webu, tedy jak registrovaní, tak neregistrovaní uživatelé, a ze seznamu již zodpovězených dotazů. Za dobu fungování odpovědny se podařilo zodpovědět více než 20 dotazů a v poslední době se četnost kladených dotazů stále zvyšuje. Pro ilustraci, v prvních měsících portálu přišel cca 1 dotaz za půl roku, dnes již přichází 1-3 dotazy za měsíc.
5.2.Zaregistrovaní učitelé Každý vyučující chemie působící na české ZŠ, SŠ nebo VŠ má možnost se na stránkách www.studiumchemie.cz registrovat. Registrace přináší učiteli hned několik výhod. Získá přístup k některým výukovým materiálům, které jsou určeny pouze pro učitele, bude veden v seznamu pro rozesílání emailů o zajímavých akcích pořádaných na PřF UK a v neposlední řadě získá přístup do editoru chemických testů. Přibyly také nové možnosti, které registrovaní uživatelé mají. Pokud se některé materiály registrovanému uživateli líbí a nechce je po každé návštěvě opětovně vyhledávat, má možnost si je přidat do složky „Oblíbené materiály“ a kdykoli se k nim dostat ze svého uživatelského profilu.
38
Obr. 11: Oblíbené materiály na uživatelském profilu (http://www.studiumchemie.cz/profil.php?stranka=2) Materiál si mezi oblíbené může registrovaný uživatel přidat po kliknutí na detail materiálu v sekci „Výukové materiály“ a poté vybrat možnost „Přidat k oblíbeným“. V detailu materiálu se nachází také možnost „Ohodnotit výukový materiál“, která umožňuje uživateli přidělit danému materiálu jednu až pět hvězdiček a dát tak najevo, jak byl s uvedeným materiálem spokojený. Zároveň může použít tlačítko „To se mi líbí“ a dát tak vědět o materiálu svým přátelům na sociální síti Facebook.
39
Obr. 12: detail výukového materiálu (http://www.studiumchemie.cz/materialy_info.php?id=45 ) Jelikož mají zaregistrovaní uživatelé oproti ostatním některé výhody, je registrace ověřována. Kontrola probíhá tak, že se uživatel zaregistruje a na e-mail, který do formuláře uvedl, mu přijde potvrzovací kód ve formě hypertextového odkazu. Teprve po kliknutí na tento hypertextový odkaz v e-mailu se jeho registrace v databázi aktivuje. Identita učitele je také ověřena manuálně prostřednictvím internetové rešerše. Pokud není uživatel identifikován, je jeho účet smazán. Databáze registrovaných uživatelů, která v současnosti čítá okolo 350 kontaktů je pravidelně kontrolována a duplicitní, neaktivní nebo podezřelé kontakty jsou z ní mazány ručně.
5.3.Chybová hlášení Při provozu webových stránek se často stává, že se změní URL adresa některé z částí stránek, na něž se chtěl uživatel dostat. Tyto změny jsou spojeny například s přesunem stránek, smazáním stránek nebo změnou údajů v databázi. Pokud chce potom návštěvník stránek adresu URL, která již není aktuální navštívit, v prohlížeči se mu objeví okno se 40
zprávou o chybě 404 nebo hláška „Not found“. Jedná se o chybovou zprávu, která je standardní odezvou protokolu HTTP a znamená, že prohlížeč byl schopen komunikovat se serverem, ale server nemohl najít obsah, který byl požadován [22]. Tuto odpověď prohlížeče samozřejmě vyvolají i překlepy uživatele. Druhým případem chybového hlášení je tzv. Chyba 403 („Forbidden“), která se zobrazuje v případě, že obsah existuje, ale uživatel k němu nemá potřebná přístupová práva [23]. Tato chybová hlášení si je ovšem možno za pomocí konfiguračního souboru .htaccess přizpůsobit a vytvořit pro ně podobu dle vlastního uvážení a potřeb. V případě stránek www.studiumchemie.cz bylo přihlédnuto k tomu, že nejčastěji hledanými klíčovými slovy jsou názvy pokusů nebo výukových materiálů. Při změnách v databázi se přitom snadno může stát, že dozná URL adresa drobných změn a rázem není daný materiál uživateli pod adresou, kterou dříve znal a používal, k dispozici. Nová podoba chybového hlášení mu tedy má být ve vyhledání materiálu co nejvíce nápomocna. Současná podoba chybového hlášení pro případ chyb 403 a 404 má podobu standardní podstránky www.studiumchemie.cz, v jejímž obsahu se nachází možné vysvětlení, proč nebyl obsah k nalezení a dvě okna pro fulltextové vyhledávání, v již zmíněných kategoriích „Výukové materiály“ a „Chemické pokusy“ (obr. 13). [24]
41
Obr. 13: Stránka nastavená v případě chyb 403 a 404 (http://www.studiumchemie.cz/)
5.4.Sociální sítě Přítomnost na sociálních sítích může být pro portál prostředkem, jak se spojit se svými návštěvníky, získat od nich zpětnou vazbu a další nové potenciální návštěvníky oslovit. Stránky www.studiumchemie.cz mají svůj profil na sociální síti Facebook, kde jsou sdíleny zejména informace o nových výukových materiálech, o změnách na stránkách nebo o blížících se akcích, které jsou pořádány pro učitele a studenty chemie.[25] Relativně nedávno byl založen také kanál (YouTube channel) stránek www.studiumchemie.cz na sociální síti YouTube za účelem šíření chemických videí využitelných ve výuce chemie.[26]
5.4.1.Profil na sociální síti Facebook Facebook je největší sociální síť současnosti. Využívá ji přes 950 milionů aktivních uživatelů (duben 2012) [27] po celém světě, a to je také důvodem, proč je hojně využíván k propagaci a marketingu. Mnoho komerčních i nekomerčních institucí dnes využívá prezentaci na Facebooku jako jeden z hlavních zdrojů návštěvnosti svých internetových stránek. 42
S tímto záměrem byl vytvořen i facebookový profil pro stránky www.studiumchemie.cz. Primárně je tento profil určen k informování o nových materiálech, které se na stránkách objevily, a vedle toho o činnostech, které jsou pro učitele a studenty chemie na KUDCh, potažmo na PřF UK v Praze, pořádány.
Obr. 14: Facebookový profil Studiumchemie.cz (http://www.facebook.com/studiumchemie.cz) V současnosti má profil s názvem Studiumchemie.cz na Facebooku přes 70 fanoušků a je jedním z menších zdrojů návštěvnosti stránek www.studiumchemie.cz. Návštěvnost z tohoto zdroje však není kontinuální a záleží především na tom, jak moc atraktivní jsou pro uživatele Facebooku odkazy, které jsou na profil umisťovány. Za dobu existence profilu Studiumchemie.cz na Facebooku přišlo z tohoto zdroje více než 1300 návštěvníků. To řadí Facebook mezi stránkami, ze kterých lidé na www.studiumchemie.cz zavítají na druhé místo za oficiální stránky PřF UK v Praze. Nejvyšší návštěvnost stránek www.studiumchemie.cz z Facebooku je spojována především s Mezinárodním rokem chemie 2011, v jehož rámci byla na PřF UK v Praze pořádána řada velmi atraktivních akcí s chemickou tématikou.
43
5.4.2.Vlastní kanál na sociální síti YouTube Na portálu www.studiumchemie.cz je video nejvíce zastoupeným typem výukových materiálů. V databázi se nachází celkem přes 180 chemických videí, která byla vytvořena pro potřeby výuky. Od července 2011 bylo na stránkách www.studiumchemie.cz zaznamenáno více jak 8000 unikátních zobrazení stránek s jednotlivými videi, což ukazuje, že poptávka po tomto typu materiálu je vysoká a videa, která jsou zde přítomna mají vysokou kvalitu. Prostředkem, jak tato videa přiblížit větší skupině lidí je umístit je na sociální síť YouTube, která se zaměřuje na sdílení video souborů. K tomuto účelu byl na této síti vytvořen kanál s názvem „studiumchemie cz“, který by měl sloužit k zvýšení dostupnosti těchto videí na internetu. Videa, u kterých autor souhlasí s jejich umístěním na server YouTube, jsou zařazena do kategorie vzdělávání a pedagogika a v jejich popisu je vždy uvedeno jméno autora, jméno katedry, na které materiál vznikl a hypertextový odkaz na stránky www.studiumchemie.cz. Kromě zvýšení dostupnosti těchto videí a propagace portálu www.studiumchemie.cz má umístění videí na server YouTube další výhodu a tou je snadné vkládání přehrávače YouTube s daným videem do webových stránek. Užitečné je to především proto, že dosud byla většina videí do stránek www.studiumchemie.cz načítána přímo ve formátu WMV, což činilo některým uživatelům problémy s jejich přehráváním. S nahráním videí na server YouTube však tyto problémy odpadnou, jelikož budou videa vkládána na stránky přímo i s YouTube přehrávačem a neměly by tak vznikat problémy s jejich přehráváním.
44
6.Tvorba nového obsahu 6.1.NMR Cílem stránek www.studiumchemie.cz je pokud možno co nejkomplexněji postihnout obsah učiva na středních školách. Výuka chemie na středních školách zahrnuje například i vyučovací jednotky, jakými jsou chemické semináře. Tedy hodiny, na které se žáci přihlásí většinou z vlastního zájmu o předmět, z touhy dozvědět se něco nového a rozšířit si obzory. I této skupině žáků jsou na stránkách věnovány například výukové materiály s podtitulem „nano“,[28] které se zabývají tématem nanotechnologií. Tyto materiály se jim snaží tuto v poslední době velmi progresivně se rozvíjející oblast technologického vývoje přiblížit. Skupina výukových materiálů, které se týkají nanotechnologií byla první na stránkách www.studiumchemie.cz, kterou se nepodařilo zařadit do žádného z chemických kategorií podle dokumentu RVP G. Byla pro ně tedy v sekci výukových materiálů vytvořena kategorie „Ostatní“, která je na úrovni hlavních chemických oborů (obecná chemie, anorganická chemie, organická chemie a biochemie) a doprovodné kategorie „Mezioborová témata“. Do kategorie mezioborových témat bezpochyby patří také téma jaderné magnetické rezonance, neboli NMR, velmi moderní a využívaná metoda studia struktury chemických látek. Základem pro vytvoření internetové prezentace zaměřující se na téma NMR je obsah předmětů Spektrální metody NMR I (MC270P06B) a Spektrální metody NMR II (MC270P09), které jsou vyučovány na PřF UK v Praze. Právě vyučující těchto dvou předmětů, RNDr. Martin Dračínský Ph.D. dal první impuls k tomu, aby se skripta k předmětu Spektrální metody NMR I [29] převedla do formy webových stránek a mohl k nim být přidružen například interaktivní obsah, studijní materiály ke stažení nebo fotogalerie. Web www.studiumchemie.cz tedy rozšiřuje svoji působnost i na studenty nižších ročníků VŠ, kteří také mohou na webu najít vhodné materiály pro své studium.
45
6.1.1.Převod do jazyka HTML Převod NMR skript, které byly původně publikovány ve formátu PDF do značkovacího jazyka HTML má hned několik výhod: • možnost vložení interaktivního obsahu
• snadnější dostupnost pro případné zájemce o téma • snadná editace a oprava chyb v administračním rozhraní Pokud mluvíme o interaktivním obsahu, u stránek NMR se jedná především o videa, animace a hypertextové odkazy. Videa a animace umožní čtenáři lépe pochopit obsah skript, hypertextové odkazy potom mohou provázat jak jednotlivé kapitoly mezi sebou, tak například odkázat na zajímavý externí obsah. Dostupnost materiálu se s převodem do HTML a vložením na webovou stránku může zlepšit například s vytvářením zpětných odkazů, které budou na tento materiál odkazovat a také indexací vyhledávacích robotů. Ti prochází webové stránky automaticky a zaznamenávají jejich obsah. Odkaz na tento obsah lze následně najít prostřednictvím vyhledávačů (google.cz, seznam.cz), pro které tito roboti obsah webu zpracovávají.
6.1.2.Obsah stránek NMR Orientace na stránkách NMR je zprostředkována horním menu, v jehož nabídce figurují následující položky: „Skripta“, „Pdf skripta“, „Fotogalerie“, „Odkazy“ a „Kontakt“. S výjimkou položky „Pdf skripta“, která odkazuje na umístění původních skript k předmětu Spektrální metody NMR I ve formátu PDF, lze všechny ostatní části stránek spravovat v administračním rozhraní (7.2.6.). Základní náplní stránek NMR je HTML verze již výše zmíněných skript k předmětu Spektrální metody NMR I, kterou návštěvník nalezne pod prvním položkou menu s názvem „Skripta“. Na této stránce, která je také stránkou úvodní, je rozepsaný obsah skript, který obsahuje odkazy na jednotlivé kapitoly ve formě hypertextových odkazů. Obsah skript tvoří celkem 13 kapitol (Obr. 15).
46
Obr. 15: Úvodní stránka portálu NMR (http://www.studiumchemie.cz/NMR) Tyto kapitoly byly převedeny do HTML kódu manuálně z původního dokumentu ve formátu PDF. Mezi hlavní činnosti při převodu patřilo formátování obsahu, zarovnávání obrázků, vytváření tabulek a jejich jednotné formátování nebo převádění řeckých písmen a dalších nestandardních znaků na HTML entity, ve kterých jsou ukládány do databáze, aby mohly být správně zobrazovány. V sekci skripta jsou dále v části Chemické posuny k dispozici studijní materiály ve formátu PDF obsahující ukázky chemických posunů vybraných izotopů. Část „Fotogalerie“ nabízí malý přehled obrázků techniky, která se k měření spekter v NMR využívá. Fotogalerie byla vytvořena za použití knihovny FancyBox (viz 4.4.3.), což umožňuje pohodlné a efektní prohlížení obrázků. Pod položkou „Přehled odkazů“ návštěvník nalezne přehled užitečných odkazů týkajících se NMR spektroskopie, které jsou doprovázeny krátkým komentářem.
6.1.3.Interaktivní obsah stránek NMR Jelikož je obsah učiva týkající se NMR velmi abstraktní a náročný na pochopení, byly k 47
některým kapitolám vytvořeny v programu Adobe Flash CS4 doprovodné animace, které měly schématickou formou látku probíranou v textu přiblížit. Pulzy, pulzní sekvence Pro potřeby doplněn kapitoly „Pulzy, pulzní sekvence“ byla vytvořena animace znázorňující proces akvizice po radio frekvenčním pulzu, který sklopí vektor magnetizace o 90° ze směru osy z do směru osy x. Následně vykonává vektor magnetizace precesní pohyb kolem osy z a vrací se zpět do své původní rovnovážné polohy. V animaci je tento děj zjednodušeně popisován jako přímka rotující v rovině xy, která se stále zmenšuje – nabývá tedy stále více složky ve směru osy z.
Obr. 16: Animace precesního pohybu vektoru magnetizace po 90° pulzu (http://www.studiumchemie.cz/NMR/index.php?stranka=skripta&kapitola=5)
48
Fourierova Transformace Animace znázorňuje časový záznam intenzity indukovaného proudu v měřící cívce během akvizice. V animaci jsou nastavitelné hodnoty frekvence a relaxačního času. Uživatel může také převést převést výsledný FID Fourierovou Transformací na spektrum, které zobrazuje závislost spektrální intenzity na frekvenci.
Obr. 17: Animace Fourierova transformace (http://www.studiumchemie.cz/NMR/index.php?stranka=skripta&kapitola=6) Přístroje a technika V kapitole „Přístroje a technika“ byl původní obrázek s popisky částí NMR spektrometru nahrazen animací vytvořenou v programu Adobe Flash. Po najetí myší na jednotlivé části se v rámečku zobrazí jejich název. Možné je pustit si i jednoduchou ukázku toho, jakým způsobem se vzorek dostává do měřící části přístroje.
6.1.4.Návštěvnost stránek NMR Obsah stránek věnujících se NMR samozřejmě nemá takový potenciál klíčových slov, jako mají například sekce věnující se výukovým materiálům nebo chemickým pokusům. Učivo, které je zde předkládáno, ačkoli je velmi atraktivní, je určené poměrně malému množství lidí. Proto ani výsledek statistik návštěvnosti není nikterak překvapující. Na celkovém
zobrazení
stránek
portálu
www.studiumchemie.cz
se
podílí
cca
3%.
Nejnavštěvovanější kapitolou je „Určování struktury z NMR spekter“.(Obr. 19) Hlavním zdrojem provozu takto úzce zaměřených stránek by určitě měly být zpětné odkazy z jiných stránek. Stránky NMR však zatím fungují velmi krátkou dobu a pravděpodobně bude ještě nějaký čas trvat, než se dostanou do širšího povědomí. Pomoci by tomu mohl také nový obsah, včetně toho interaktivního.
6.2.Rozhraní pro databázi pokusů Ke školním hodinám chemie neoddělitelně patří chemické pokusy, které jsou žáky zpravidla hodnoceny jako nejpřínosnější složka výuky tohoto předmětu. Typickými pokusy, které učitelé žákům na ZŠ a SŠ prezentují, jsou ty vizuálně nejefektivnější a zároveň ty, které jsou pokud možno co nejméně náročné na instrumentaci. Jako příklad je možné uvést například reakci sodíku s vodou, „Chemické jojo“, „Sopka“ nebo různé druhy plamenných zkoušek. Pokud však chce učitel chemie překročit hranice stereotypu a žákům předvést i něco navíc, často mu zabere mnoho času, než najde věrohodný zdroj informací a především pak vhodný pokus, který se týká právě probíraného učiva. Důležitými atributy daného pokusu jsou pro něj zejména časová a materiální náročnost, dostupnost chemikálií, a také názornost tohoto pokusu. Z výše zmíněných charakteristik vyplývá, že ideální zdroj informací o chemických pokusech by měl splňovat následující požadavky: ◦ pokusy by zde měly být prakticky strukturované podle tématu chemického učiva ◦ měl by obsahovat přehledný postup práce včetně principu, na kterém daný pokus funguje ◦ měl by obsahovat údaje o časové a materiální náročnosti jednotlivých pokusů ◦ měl by obsahovat informace o použitých laboratorních pomůckách a chemikáliích ◦ měl by obsahovat údaje o bezpečnosti pokusu 51
◦ pro názornost by měl obsahovat také doprovodný multimediální obsah, jako jsou fotografie nebo videa Vytvoření databáze chemických pokusů, která by splňovala zmíněné požadavky bylo součástí bakalářské práce Evy Vrzáčkové [30]. Jelikož se měla tato databáze stát součástí stránek www.studiumchemie.cz, byla v administračním rozhraní vytvořena část do které Eva údaje o jednotlivých pokusech editovala (viz 7.2.3.) a následně byla vytvořena také zobrazovací část, která je na stránkách www.studiumchemie.cz přístupná z hlavních sekcí „Učitelé“ a „Žáci“.
Obr. 20: Databáze chemických pokusů (http://www.studiumchemie.cz/pokusy.php) Rozhraní databáze chemických pokusů má podobu seznamu jednotlivých pokusů, které jsou řazeny abecedně a lze je třídit za pomocí víceúrovňového výčtu kategorií umístěného v pravé části stránek. Zařazení pokusů do jednotlivých kategorií je velmi specifické, neboť například jedna z hlavních kategorií, „Obecná chemie“ může obsahovat až tři nižší úrovně třídění. Pokus tedy může být zařazen například v podkategorii „Chromatografie“ (Obr. 20), která je začleněná do podkategorie „Dělení látek“, která je součástí kategorie „Klasifikace 52
látek“. Klasifikace látek již je téma učiva, které patří podle RVP G do chemického oboru „Obecná chemie“. Jednotlivé pokusy lze v seznamu kromě třídění nalézat také za pomoci fulltextového vyhledávání, které však zatím vyhledává pouze v názvech pokusů. Po kliknutí na jeden z pokusů v seznamu se již zobrazí informace o vybraném pokusu, které jsou rozděleny do několika částí. K dispozicí je k pokusům kromě psaných informací také multimediální obsah, jako jsou fotografie nebo videa spustitelná přímo na stránce pokusu díky vloženému přehrávači YouTube. Ke každému pokusu je přiložena také řada odkazů, které směřují na externí obsah s tímto pokusem spojený.
Obr. 21: Náhled pokusu v databázi chemických pokusů (http://www.studiumchemie.cz/pokus.php?id=26 )
53
6.2.1.Návštěvnost Databáze chemických pokusů
Obr. 22: Návštěvnost Databáze chemických pokusů (http://www.google.com/analytics) Databáze chemických pokusů se již od svého uvedení do provozu v červnu 2011 stala jednou z nejnavštěvovanějších součástí stránek www.studiumchemie.cz. Z obr.22 je patrné, že za dobu své dosavadní existence tvořila návštěvnost databáze chemických pokusů více jak čtvrtinu celkové návštěvnosti webu. Vysokou míru okamžitého opouštění (více jak 70%) lze přičíst skutečnosti, že se většinou návštěvník do databáze dostal z internetového vyhledávače rovnou na konkrétní pokus. Toto vysoké číslo tedy nemusí znamenat nic negativního, pouze skutečnost, že návštěvník rychle našel, co hledal. Zajímavé jsou také statistiky jednotlivých pokusů. Nejnavštěvovanějším byl pokus „Reakce s Fehlingovým a Tollensovým činidlem“, který za dobu existence databáze navštívilo celkem 1145 unikátních návštěvníků, kteří na stránce tohoto pokusu strávili v průměru dobu delší než čtyři minuty.
6.3.Rok chemie Rok 2011 byl mezinárodní organizací UNESCO a Mezinárodní unií čisté a aplikované chemie IUPAC vyhlášen Mezinárodním rokem chemie (International Year of Chemistry, IYC). Z tohoto důvodu proběhla i na PřF UK v Praze řada zajímavých akcí, které si kladly za cíl chemii popularizovat a přiblížit ji především mladé generaci.[31] K tomuto účelu byly pod hlavičkou www.studiumchemie.cz vytvořeny nové webové stránky, dostupné z URL adresy http://www.studiumchemie.cz/rokchemie, jejichž smyslem bylo informovat o akcích, které se v rámci Roku chemie na PřF UK konaly, a usnadnit organizaci spojenou s přihlašováním na tyto akce. 54
Obr. 23: Rok chemie na PřF UK v Praze (http://www.studiumchemie.cz/rokchemie ) Stránky obsahovaly přehled nejbližších termínů akcí, na které se přes formulář na stránkách uživatel mohl přihlásit. Dále obsahovaly seznam akcí s krátkým popisem ke každé z nich a fotogalerie se snímky z již proběhlých akcí.
6.3.1.Návštěvnost stránek Roku chemie na PřF UK v Praze
Obr. 24: Návštěvnost stránek Rok chemie na PřF UK v Praze (http://www.google.com/analytics) Stránky Roku chemie na PřF UK přilákaly od května roku 2011, kdy vznikly, poměrně velký počet návštěvníků a za tuto dobu se podílely na celkovém počtu unikátních zobrazených stránek webu www.studiumchemie.cz z více než 17%.(Obr. 24) Relativně vysoká návštěvnost 55
byla dána výjimečností akce a především její propagací v médiích a na sociálních sítích. Například extrémně vysoká návštěvnost ze dne 5.12.2011, kdy stránky zaznamenaly 817 unikátních zobrazení byla zapříčiněna přímým odkazem na stránky Roku chemie na PřF UK z článku, který zval na akci „Praha alchymistická“ na zpravodajském serveru Novinky.cz. [32]
6.4.Flashové hry Hra obecně je podle jedné z definic taková činnost, jejíž smysl je obsažen v jejím samotném provádění, které přináší člověku, který hru provozuje, uspokojení.[33] Toto uspokojení může být různého charakteru. Může se jednat o naplnění určité potřeby, zábavu, poučení, prožitek apod. Hra je pro žáky ZŠ a SŠ běžnou a přirozenou aktivitou, během školních přestávek hrají karetní nebo pohybové hry, během tělesné výchovy provozují hry sportovní a když přijdou ze školy domů, mnoho z nich zasedne k počítači a věnuje se hrám počítačovým. V roce 2010 byl v rámci projektu „Není nám to jedno“ prostřednictvím dotazníkového šetření zpracován průzkum mezi 1500 dětmi s cílem zjistit, jak tráví svůj volný čas. Není příliš překvapujícím zjištěním, že více jak 30% z těchto dětí uvedlo, že tráví hraním her na počítači a internetu více jak hodinu denně.[34] Ovšem ne všechny tyto počítačové hry musí nutně mít destruktivní účinky. Na internetu se nachází řada úspěšných počítačových her, které se již velmi definici didaktické hry blíží. Podněcují k rozumové činnosti a kreativitě a hráč si při nich může například procvičit své matematicko-logické schopnosti nebo rozšířit vědomosti, které mu budou užitečné i ve škole. Například hra Brain Buddies, která je svou povahou zaměřená zejména na paměť a logické uvažování, má na sociální síti Facebook více než 2 miliony fanoušků po celém světě a každý měsíc si ji zahraje přes 450 000 uživatelů této sociální sítě (údaje platné k září 2012). Hra je rozdělená do 4 disciplín, z nichž každá je zaměřená na určitý okruh duševních schopností. Jednotlivé disciplíny jsou zaměřeny na paměť, logické uvažování, schopnost rychle počítat a vizuální představivost. Každá disciplína má vymezený čas 1 minuty, po který může hráč sbírat body za správná řešení. Obtížnost začíná zpravidla na velmi jednoduchých úlohách, čím více správných řešení ale hráč nasbírá, tím obtížnější každá další úloha je. Za každou disciplínu získá hráč určitý počet bodů a ty se nakonec sečtou. Základem úspěchu této hry je ovšem kromě velmi atraktivního herního prostředí také skutečnost, že může hráč v prostředí Facebooku poměřovat své výsledky s přáteli a známými.[35] 56
Geosense je hra zaměřená na zeměpisné znalosti. Funguje na samostatné webové stránce a je na Facebooku nezávislá. Hráč se nemusí nikde registrovat a může ji hrát i anonymně, jako host. Princip hry je jednoduchý, na mapě světa má hráč v co nejrychlejším čase co nejpřesněji určit polohu města, které hra vygeneruje. Počet bodů, které hráč za každou odpověď dostane, je úměrný přesnosti, s jakou se správné poloze města přiblížil, a času, který na odpověď spotřeboval. Po absolvování všech 10 kol je hráči zobrazena statistika s údaji o tom, jak odpovídal, a pokud byl opravdu úspěšný, má možnost zapsat se do tabulky nejlepších výsledků.[36] V českém prostředí je velmi populární flashovou vědomostní hrou hra Dobyvatel, která je českou mutací celosvětově velmi populární hry Conquiztador. Hra spočívá v co nejrychlejším a nejsprávnějším odpovídání na otázky z různých odvětví lidské činnosti. Ke každé otázce má hráč na výběr ze čtyř nabízených odpovědí, z nichž pouze jedna je správná. Na začátku hry je každý ze tří hráčů, kteří proti sobě hrají umístěn do jednoho kraje na mapě České republiky. O ostatní kraje tito hráči soutěží právě odpovídáním na otázky, které jsou jim pokládány. Pokud je více hráčů, kteří odpověděli správně, vyhrává ten, který odpověděl nejrychleji. Protože je ale hra komerční, má hráč například možnost koupit si nápovědy k otázkám a s jejich pomocí svého protivníka porazit.[37] Princip úspěchu těchto her spočívá v přirozené lidské soutěživosti, která člověka motivuje k vylepšování svých výsledků za účelem poražení svého protivníka. V prostředí Facebooku je motivace ještě silnější, protože se snažíte v disciplínách překonat své přátele. Stále však platí, že hraním těchto her může člověk často nevědomky a zábavou formou získat nové vědomosti, procvičit svou paměť nebo se procvičit v logických a matematických myšlenkových operacích. Chemicky zaměřených her je na internetu řádově o mnoho méně než zmíněných her logických nebo vědomostních. Důvody bych spatřoval především v tom, že chemické učivo již ze své podstaty v sobě oba tyto aspekty, tedy logické uvažování a nutnost znalosti alespoň základních fakt, kombinuje. Chemické hry tak mají potenciál přitáhnout zejména žáky, kteří si chtějí procvičit své znalosti ze školy případně jedince, kteří se o chemii zajímají. Na českém internetu se chemicky zaměřených počítačových her vyskytuje minimum. Zejména se jedná o
alternativy karetních a stolních her nebo her založených na principu 57
některých televizních soutěží s chemickou tématikou, které jsou určeny především učitelům chemie jako prostředek zpestření a obohacení výuky. Žáky v těchto hrách motivuje především skutečnost, že místo mnohdy jednotvárné frontální výuky mají rázem možnost procvičovat své znalosti i zábavnou formou.[38,39] Ze zahraniční internetových chemických her bych zmínil zejména sadu her zaměřenou na znalosti z periodické tabulky prvků na stránkách amerického vývojáře vzdělávacích her, Sheppards software [40]. Návštěvník si zde může zahrát hru, ve které má za úkol identifikovat jednotlivé skupiny tabulky podle jejich textového popisu (Obr. 25), hru ve které má za úkol zařadit prvek na jeho správné místo ve slepé periodické tabulce. Nebo určit, který prvek patří do periodické tabulky na zvýrazněné políčko.
Obr. 25: Hry s chemickou tématikou na stránkách www.sheppardsoftware.com (http://www.sheppardsoftware.com/Elementsgames.htm) Hráče ke správnému řešení motivují zvukové efekty a statistika úspěšnosti, která je během hry aktualizována. K dispozici jsou i různé obtížnosti her.
58
6.4.1.Chemický pětiboj V rámci předmětu Didaktika organické chemie jsem v kolektivu s kolegy Terezou Třeštíkovou, Ivanou Petrovou a Petrem Vaculíkem vytvořil hru v programu Adobe Flash s názvem Chemický pětiboj. Jak již název napovídá, jedná se o hru skládající se z pěti chemických disciplín, z nichž každá je trochu jinak zaměřená, ale všechny mají společné to, že se skládají z otázek, na které má hráč na výběr ze čtyř odpovědí. Na každou z těchto disciplín mají také vymezenou dobu jedné minuty, po kterou mohou na otázky odpovídat. Na hře se autoři podíleli následující autoři: •
Tereza Třešťíková – Otázky k úloze „Vlastnosti chemických látek“
•
Ivana Petrová - Otázky k úloze „Chemická aparatura a piktogramy“
•
Petr Vaculík- Otázky k úloze „Doplňování činidel do chemických reakcí“
•
Alena Kubíková – herní grafika
•
David Brenner – Naprogramování hry v jazyce ActionScript 3 a Otázky k úlohám
„Poznej molekuly“ a „Zařaď molekuly“
59
Obr. 26: Ukázka ze hry Chemický pětiboj Hra je spíše demonstračního charakteru, v každé z pěti disciplín se nachází pouze 15 otázek, které navíc v každé hře přicházejí stále ve stejném pořadí. Účelem vytvoření této hry bylo především vyzkoušet si programování chemické hry v praxi. Výhodou her naprogramovaných ve vývojovém prostředí Adobe Flash je poměrně jednoduchá rozšiřitelnost a pozměnitelnost. Chemický pětiboj tedy sloužil jako předloha pro budoucí pokusy vytvořit program, který by žáky zároveň bavil, vzdělával a povzbuzoval k tomu, aby se o chemii dozvěděli něco nového.
6.4.2.Poznej molekuly Hra poznej molekuly vychází z klasických vědomostních her na bázi kvízu, ve kterých je úkolem hráče vybrat správnou odpověď na zadanou otázku ze čtyř nabízených možností. Místo odpovídání na otázky je hlavním úkolem hry Poznej molekuly poznat co nejvíce molekul v limitovaném časovém úseku. 60
K účelům hry byla vytvořena databáze obrázků 120 základních organických molekul, z nichž každá je v databázi umístěna ve dvou typech zobrazení, jako chemický vzorec a jako 3D zobrazení této molekuly. Všechny tyto vzorce byly vytvořeny v programu Chemsketch. Při tvorbě 3D molekul byl využit nástroj 3D Viewer, který je také součástí tohoto programu. Pro potřeby hry byla každá molekula zařazena do skupiny chemických látek a každé byla subjektivně přiřazena obtížnost v rozsahu 1-5 podle složitosti struktury dané molekuly (například methan má obtížnost 1, kyselina pantothenová má obtížnost 5). Tato data byla vložena prostřednictvím rozhraní PhpMyAdmin do databáze MySQL a mohou být tedy použita i k jiným účelům, než pouze pro účely této hry. Do hry jsou data načtena sérií dvou kroků. Nejprve je z databáze skriptem napsaným v jazyce PHP (viz 4.5.) vygenerován dokument, který má strukturu klasického XML (viz 4.3.) a z tohoto dokumentu jsou posléze data nahrána do hry. Po spuštění hry přivítá hráče hlavní menu ve kterém má na výběr, zda si chce hru zahrát, prostudovat si část „O hře“, nebo hru ukončit. V části „O hře“ se hráč dozví informace o ovládání hry a o jejím bodování. Po stisknutí tlačítka „Hrát hru“ se zapne herní prostředí a na ukazateli zbývajícího času, který je umístěn v horní části okna začíná čas po vteřinách ubývat. Do hlavního pole se načte náhodný obrázek molekuly s obtížností 1 a na náhodné pole odpovědi se načte její název. Současně s tím se načtou do zbývajících políček pro odpovědi náhodně vygenerované názvy chemických látek z databáze, které ovšem nepatří do stejné skupiny chemických látek jako hádaná molekula. Po kliknutí na jednu z možných odpovědí se odpověď vyhodnotí a do modrého hvězdicovitého pole se v závislosti na správnosti odpovědi přičte odpovídající počet bodů. Pokud byla odpověď správná přibude na stupnici hvězdiček jedna zelená navíc a v informačním boxu se zobrazí heslo „správně“. Pokud byla odpověď špatná, všechny zelené hvězdičky ze stupnice zmizí a v informačním boxu se zobrazí heslo „špatně“. Načte se nová molekula a postup se opakuje. Součástí hry je algoritmus, který na základě poměru dobrých a špatných odpovědí vybírá obtížnost úkolů. Čím je hráč úspěšnější, tím vyšší obtížnost molekul dostává a odpovědi jsou vybírány tak, aby si chemické látky v jednotlivých variantách odpovědí byly co nejpříbuznější. Naopak pokud se hráči nedaří, stále dostává molekuly s obtížností 1 a varianty chemických látek v odpovědích si příbuzné nejsou.
61
Obr. 26: Ukázka ze hry Poznej molekuly Počet zobrazených zelených hvězdiček má význam bodových a časových bonusů. Hráč má k dispozici nápovědu v podobě legendy, ve které jsou zobrazeny barvy jednotlivých prvků. Další nápovědou je možnost přepnout si stisknutím tlačítka „2D“ molekulu z 3D zobrazení do zobrazení vzorce. Po uplynutí časového limitu je hráči oznámen konečný počet bodů. Pokud toto číslo stačí na pořadí nejlepších deseti hráčů měsíce, je mu umožněno zapsat se do tabulky. Hráč se může také podívat na správné názvy molekul, které ve hře pojmenoval špatně. Pokud by se ukázalo, že má smysl v rozvoji této hry pokračovat, nabízí se například napojení hry na sociální síť Facebook prostřednictvím aplikačního rozhraní této sítě (Facebook API). V budoucnosti je v plánu rozšířit hru také o databázi anorganických molekul a přidat některé herní módy, jako je například zařazování molekul do skupin chemických látek. 62
7.Administrační rozhraní Pokud má mít ke správě a editaci internetových stránek přístup více osob, je třeba vytvořit grafické rozhraní, které bude nadstavbou zdrojového kódu, a které administrátorům práci pokud možno co nejvíc ulehčí. Musí se počítat s tím, že ne každý ovládá jazyk HTML (nemluvě o dalších programovacích jazycích a doplňcích) alespoň na základní úrovni, a přizpůsobit ovládání tohoto rozhraní tak, aby jeho obsluha nedělala problém žádné z osob, které obdrží přístupové údaje. Administrační rozhraní je vpodstatě sadou formulářů, jejichž ovládání je většině uživatelů internetu důvěrně známé například z obsluhy e-mailů, registrace na některých webových stránkách nebo psaní blogu. Díky formulářům v administračním rozhraní je uživateli umožněno vkládat data do databáze, data může z databáze také načítat a následně je měnit nebo je může mazat. Tyto operace umožňuje komunikace programovacího jazyka (v tomto případě PHP) s databází (v tomto případě MySQL). Před tvorbou administračního rozhraní (AR) je třeba zvážit několik faktorů: • jaké sekce stránek je třeba editovat • jakou technologii pro tvorbu administračního rozhraní použít • jakou vizuální podobu administračnímu rozhraní dát Jaké jsou ale důvody tvorby AR? Do dnešního dne byla většina editačních operací na stránkách prováděna až na výjimky přímo editací dat v databázi nebo změnami ve zdrojovém kódu. Tato praxe měla mnoho nevýhod. Jelikož jsem měl k těmto částem stránek přístup pouze já, nebyl v mé nepřítomnosti nikdo jiný schopen materiály na stránky vložit, což samozřejmě rozvoj stránek citelně zpomaluje. Dalším velmi důležitým impulsem byla časová náročnost zadávání dat přímo do rozhraní PhpMyAdmin nebo do zdrojového kódu a nepřehlednost, která provázela každou takovouto operaci. Zároveň bylo ruční zadávání dat velmi náchylné na tvorbu chyb.
63
Důvody tvorby AR jsou tedy následující: • AR zpřístupní administraci internetových stránek většímu počtu osob, • zautomatizuje řadu procesů, které by jinak byly časově náročné, • zpřehlední editaci dat, • omezí tvorbu chyb zaviněných lidským faktorem
7.1.Výběr nástrojů pro tvorbu AR V současné době je na trhu hned několik systémů pro správu obsahu (CMS), které jsou k zdarma k dispozici jako open source a zároveň jsou plně funkční. Jako nejpopulárnější z nich bych zmínil zejména systémy Drupal, Joomla! nebo WordPress. Zvlášť jsem zvažoval použití každého z nich, ale nakonec jsem zvolil jinou cestu a to, že administrační rozhraní vytvořím sám podle potřeb budoucích administrátorů. Hlavním důvodem bylo to, že stránky www.studiumchemie.cz již byly hotové a funkční a databázi včetně celé podoby stránek by bylo zbytečně obtížné od základů měnit. Nehledě na to, že mé zkušenosti s používáním těchto CMS produktů byly do té doby minimální. Pro tvorbu AR jsem proto zvolil klasickou kombinaci HTML (viz 4.1.) + CSS (viz 4.2.) + JavaScript (viz 4.4.] (jQuery) + PHP (viz 4.5.) + MySQL (viz 4.6.). Jako užitečné doplňky se osvědčily knihovna TinyMCE (viz 4.4.4.) pro tvorbu interaktivních formulářových polí a knihovna jQuery UI (viz 4.4.2.), ze které jsem využil předdefinované funkční doplňky pro grafickou část AR, jako jsou rozbalovací menu a kalendář.
64
7.2.Struktura AR je tvořeno levým „akordeonovým“ menu (Obr. 3) a pravou částí určenou pro editaci zvoleného obsahu stránek. Editovatelný obsah stránek je rozdělen do šesti kategorií: ◦ Výukové materiály ◦ Databáze pokusů ◦ Online testy ◦ Odpovědna ◦ NMR ◦ Ostatní
7.2.1.Přihlášení do administrace Administrační
rozhraní
je
přístupné
na
URL
adrese
http://www.studiumchemie.cz/admin. Protože se jedná o část, ve které může uživatel obsah stránek přidávat, odebírat, měnit a prostřednictvím webového formuláře dokonce rozesílat emaily jménem KUDCh, je samozřejmě přístup do administračního rozhraní chráněn přístupovými údaji. Na vstupní stránce jsou vyžadovány přístupové údaje v podobě jména a hesla. Tyto přístupové údaje jsou zatím pro všechny případné administrátory stejné, v budoucnu se však plánuje omezit řadovým administrátorům přístup pouze ke specifickým oblastem AR, pro jejichž správu mají potřebné pravomoci. Do ostatních oblastí jim nebude přístup umožněn, aby se zamezilo chybám vzniklým omylem nebo nedbalostí.
7.2.2.Výukové materiály Položka „Výukové materiály“ má dvě části „Nový materiál“ a „Seznam materiálů“. První ze zmíněných částí je určená pro přidávání nových výukových materiálů na stránky. Druhá umožňuje již přidané materiály editovat nebo mazat. Jelikož jsou výukové materiály na stránkách www.studiumchemie.cz velmi specificky tříděny, bylo třeba vytvořit takové rozhraní pro přidávání a editaci těchto materiálů, které administrátora provede těmito procedurami krok za krokem. Z důvodu velkého objemu informací, které musí administrátor o materiálu uvést byl tedy postup pro přidávání 65
výukového materiálu rozdělen do čtyřech částí: • nahrání souborů • editace základních informací o materiálu • zařazení materiálu podle RVP • kontrola
publikovaných
údajů
a
publikování
materiálu
na
www.studiumchemie.cz Nahrání souboru obsahuje pouze dvě políčka pro vložení souborů. V tomto kroku může administrátor vybrat z umístění na svém počítači jeden soubor výukového materiálu určený žákům a jeden určený učitelům. Samozřejmě není vyloučeno přidat pouze jeden z nich, pokud žákovská nebo učitelská verze chybí. Pokud se jedná o celky složené z více souborů, doporučuje se je komprimovat do archivačního souboru (RAR, ZIP, 7Z apod.). Po nahrání souboru, který by neměl překračovat velikost 10MB se uživateli zobrazí zpráva o úspěšnosti této procedury a možnost přejít na další krok.
Obr. 27: Nahrání výukového materiálů v administračním rozhraní (http://www.studiumchemie.cz/admin) Druhým krokem je uvedení základních informací o materiálu (Obr. 27). Administrátor je povinen uvést jméno materiálu, autora materiálu a zařadit jej podle typu z nabízených možností (test, prezentace, pracovní listy, učební texty, video nebo hry & kvízy). Ostatní 66
položky jako jsou „Školitel“, „Rok vzniku“ a „Popis“ jsou nepovinné. Popis je limitován délkou 1500 znaků. Po zadání všech povinných údajů je uživatel vybídnut k pokračování dále na zařazení materiálu podle RVP. Zařazení materiálu dle RVP je zprostředkováno formulářovým prvkem pro výběr, ve kterém má uživatel možnost zvolit jednu z nabízených sekcí chemického učiva pro jeho zařazení nebo pokračovat dál bez přidání zařazení. V případě, že materiál do sekce zařadí, má možnost vybrat další sekci, do které materiál svým zaměřením patří, nebo pokračovat na poslední krok. Počet zařazení podle RVP, které lze materiálu přiřadit je neomezený. Posledním krokem publikování materiálu je kontrola uložených údajů, spojená s možností kterýkoli z těchto údajů změnit (včetně nahrávání souborů). Pokud si administrátor ověří, že jsou všechny údaje tak, jak mají být, materiál je správně zařazen a byly nahrány správné soubory, nic nebrání v jeho publikování na webovou stránku. Po publikování materiálu je k dispozici ještě možnost materiál skrýt. Materiál tedy bude se všemi údaji a zařazeními přítomen v databázi, na webových stránkách se ovšem zobrazovat nebude. Tato možnost má využití například v případě, že si administrátor materiál pouze připravuje pro budoucí publikování, nebo si v danou chvíli například není jistý některými údaji. „Seznam materiálů“ je jak již bylo řečeno část administračního rozhraní, která slouží k editaci výukových materiálů. Součástí je kompletní přehled výukových materiálů přítomných na www.studiumchemie.cz, který lze řadit podle jednotlivých sloupců, tedy podle názvu, autora nebo typu materiálu. Materiály lze kliknutím na ikonku ikonku
smazat a kliknutím na
editovat. Pro editaci se otevře stejné okno jako při závěrečných úpravách
materiálu před jeho přidáním na web.
7.2.3.Databáze pokusů Administrace databáze chemických pokusů se skládá ze čtyř možností editace: • Nový pokus • Změnit znění pokusu • Přidat/změnit zařazení pokusu 67
• Přidat k pokusu fotografie/obrázky Vložení nového pokusu má podobu klasického formuláře, složeného z elementů text a textarea. Elementy text jsou určeny pro vkládání jednoduchého neformátovaného textu,
elementy textarea jsou upraveny za využití knihovny TinyMCE na RTE pole, ve kterém je možné písmo formátovat, přidávat hypertextové odkazy a přidávat interaktivní obsah jako jsou obrázky, videa nebo animace. Do těchto elementů jsou přidávány informace popisující pokus z hlediska použitých chemikálií, laboratorních pomůcek, postupu práce apod. (Obr. 28) Posledním formulářovým prvkem, který formulář obsahuje je prvek pro výběr, ve kterém administrátor vybere zařazení pokusu z nabízených možností. Pokus může být zařazen do kterékoli z hierarchických úrovní. Může být tedy zařazen i přímo do jedné z hlavních kategorií, jako jsou „Obecná chemie“ nebo „Biochemie“, ale doporučuje se zařadit pokus co nejspecifičtěji a vybrat kategorii na co nejnižší hierarchické úrovni.
Obr. 28: Publikování nového pokusu v administračním rozhraní (http://www.studiumchemie.cz/admin) Pod položkou „změnit znění pokusu“ se zobrazí kompletní abecední seznam pokusů, ze kterého má administrátor možnost jeden vybrat a editovat. Zobrazí se identická formulářová struktura, jako v případě vkládání nového pokusu, jen je ve všech příslušných oknech vyplněn jejich obsah. Po provedení změn a stisknutí tlačítka „změnit popis pokusu“ se změny 68
okamžitě projeví i na stránkách. Následně lze vybrat další pokus k editaci ze seznamu, který je pod formulářem. Zařazení pokusu se edituje v další položce. Administrátor opět vybere pokus z abecedního seznamu zobrazí se seznam všech kategorií do kterých byl pokus zařazen a formulářové pole pro výběr, ze kterého může zvolit nové zařazení, které pokusu přidělí. Každému pokusu může být přidělen neomezený počet zařazení. Zařazení lze kliknutím na ikonku
od pokusu odebrat.
Analogicky se postupuje i při přidávání fotografií/obrázků k pokusu. Ze seznamu pokusů se vybere jeden, který chce administrátor editovat a k němu může nahrát soubor ve formátu JPG a přidat k němu popis. Počet nahraných obrázků ke každému pokusu je neomezený a je možné je mazat kliknutím na ikonku
.
7.2.4.Online testy Položka „Online testy“ nabízí dva typy akcí, které je možné s databází chemických otázek provádět. Tou první je přidání nové otázky a druhou editace otázek, které již v systému přítomny jsou. Rozhraní pro přidání nové otázky nabízí pět textových polí, která jsou obohacena o možnost vkládání horních a dolních indexů. Jedno z těchto polí je určeno pro zadání otázky a ostatní čtyři, vedle kterých je přítomno ještě zaškrtávací formulářové pole (tzv. checkbox), jsou určeny pro vložení odpovědí. V zaškrtávacím poli následně administrátor označí tu odpověď, která je správná. Celá procedura se uzavírá výběrem chemického oboru, do které otázka patří, a její uložení do systému. Editace již existujících otázek je k dispozici pod položkou „Seznam otázek“. Otázky jsou zde řazeny podle abecedy od prvního písmene, kterým začínají. Po kliknutí na jednu z těchto otázek se zobrazí okno podobné tomu pro vkládání nové otázky, jen s tím rozdílem, že všechna formulářová pole jsou zde již vyplněna. Po provedení úprav jako je změna znění otázky, změna znění odpovědi, změna výběru správné odpovědi nebo změna zařazení má administrátor možnost otázku nově publikovat a nahradit tak její staré znění.
69
7.2.5.Odpovědna Jedním z hlavních důvodů vzniku administračního rozhraní bylo spravování dotazů formulovaných v „Odpovědně“. Dříve byla praxe taková, že po položení dotazu návštěvníkem stránky byl e-mailem automaticky informován správce webu, který dotaz přeposlal osobě, která zpracovala odpověď. Ta tuto odpověď poslala zpět správci webu, který ji odeslal emailem zpět tazateli a zároveň ji v rozhraní PhpMyAdmin publikoval přímo do databáze. Tato praxe byla poněkud zdlouhavá a často se stalo, že se odpověď, kvůli zbytečně složitému putování po ose „tazatel – správce webu – osoba, která dotaz zodpovídá, a zpět“ velmi zpomalila. Proto byla v administračním rozhraní vytvořena část, ve které je možné na otázky odpovídat přímo, bez jakýchkoli dalších prodlev. V této části AR jsou jednotlivé dotazy vypsány chronologicky za sebou s tím, že nezodpovězené dotazy se nacházejí v horní části tohoto seznamu. Dotazy, které dosud nebyly zodpovězeny, mají přidruženo textové pole, určené k odpovědi na dotaz. Po formulování odpovědi a stisknutí tlačítka „publikovat a uložit“ se tato odpověď publikuje na stránkách a zároveň se znění odpovědi odešle tazateli na e-mailovou adresu, kterou uvedl při pokládání dotazu v „Odpovědně“. Odpovědi na dotazy je možné také z databáze mazat kliknutím na ikonku
a zpětně je opravovat kliknutím na ikonku
. Tyto operace již nejsou
doprovázeny odesíláním e-mailu.
7.2.6.NMR Možnost spravovat webové stránky NMR byla do AR přidána z důvodu, aby bylo umožněno editovat jednotlivé kapitoly NMR skript i panu RNDr. Martinu Dračínskému, Ph.D., který vznik těchto stránek inicioval a poskytl faktické a odborné informace pro vytvoření obsahu. V této části je možné editovat obsah jednotlivých kapitol NMR skript, editovat fotogalerii, editovat seznam odkazů a editovat obsah části „Kontakt“ na stránkách NMR. V části určené pro editaci kapitol skript je přítomen seznam jednotlivých kapitol, z něhož je možné vybrat kliknutím na název kapitolu, která má být upravena. Zobrazí se velké textové okno s editovatelným obsahem, ve kterém je zobrazen aktuální obsah kapitoly. Jelikož je toto okno upraveno knihovnou TinyMCE, je možné v něm měnit styly písma, přidávat a odebírat hypertextové odkazy, přidávat obrázky a jiný multimediální obsah nebo 70
editovat celý obsah v kódu HTML. Po stisknutí tlačítka „změnit obsah kapitoly“ se změny projeví i na stránkách. Další editovatelnou částí stránek NMR je fotogalerie. Zde je přítomný malý formulář, ve kterém lze nahrát obrázek a přidat k němu popis. Po stisknutí tlačítka „přidat obrázek“ se obrázek nahraje do databáze a okamžitě je i viditelný ve fotogalerii stránek NMR. Pod tímto formulářem je vypsán seznam obrázků s jejich popisy v editovatelných textových polích. Pro změnu popisu obrázku stačí změnit text v poli a tisknout tlačítko „zvolit“. Mazat obrázky z galerie je možné kliknutím na ikonku
vedle tohoto obrázku.
Části Kontakt a Odkazy se editují stejným způsobem. Obsah těchto stránek je zobrazen v editovatelném textovém poli. Po provedení zamýšlených změn administrátor pouze stiskne tlačítko „uložit“ a změny se okamžitě projeví na stránkách.
7.2.7.Ostatní Položka „Ostatní“ umožňuje editovat nové aktuality na stránkách a prohlížet, případně promazávat databázi registrovaných učitelů. Přidávání aktualit je realizováno dvěma textovými poli. Polem, které je určeno pro editaci data aktuality a polem, které je určeno pro vložení vlastního obsahu tohoto příspěvku. Datum aktuality je v uvedeném políčku přednastavené na aktuální datum daného dne, ale je možné výběrem z kalendáře vybrat aktualitě i budoucí datum a v tento den bude na stránkách publikována. Editace vlastního obsahu aktuality je potom omezena na vkládání jednoduchého textu, který může být obohacen pouze o hypertextové odkazy a horní a dolní indexy. Toto opatření je zde proto, aby administrátoři do pole nevložili například velkou fotografii, která by zcela změnila rozvržení na úvodní stránce. Pod položkou Seznam registrovaných je k dispozici seznam všech registrovaných učitelů, kteří prošli procesem e-mailové verifikace, včetně jejich e-mailových adres. Podezřelé adresy (například neexistující domény, zahraniční adresy) je možné ze seznamu mazat kliknutím na ikonku
.
71
8.Statistiky spojené s provozem webu 8.1.Vývoj návštěvnosti Než se webové stránky dostanou do širšího povědomí, vždy to nějaký čas trvá. Úspěch tohoto procesu závisí na mnoha faktorech. Například na kvalitním obsahu daného webu, na optimalizaci pro vyhledávače, na propagaci webových stránek a v neposlední řadě také na kvalitě a kvantitě zpětných odkazů, které na tento web cílí. Z vývoje návštěvnosti je patrné, že web se začínal dostávat do povědomí na jaře roku 2011, kdy se počet měsíčních návštěv na www.studiumchemie.cz pohyboval kolem 2500. Ve školním roce 2011/2012 již počet návštěv za měsíc přesahoval cifru 4000 a zhruba na této hladině se měsíční návštěvnost pohybuje i dnes.
Obr. 29: Přehled návštěvnosti portálu www.studiumchemie.cz od 4.1.2010 do 30.6.2012 (http://www.google.com/analytics)
72
8.2.Zdroje návštěvnosti V současné době tvoří hlavní zdroje provozu internetové vyhledávače, ze kterých proudí na stránky v posledních měsících kolem 80% všech návštěvníků. Toto číslo je ovšem poněkud zavádějící neboť mnoho návštěvníků přijde na stránky po zadání hesel: „studium chemie“, „http://www.studiumchemie.cz“, „www.studiumchemie.cz“ nebo „studiumchemie.cz“. Je tedy jasné, že již při zadávání vyhledávacího dotazu se chtěli tito uživatelé na stránky www.studiumchemie.cz dostat. Mohli bychom je tedy zařadit do přímé návštěvnosti, která tvoří stejně jako návštěvnost z odkazujících stránek 10% provozu. (Obr. 29)
Obr. 30: Přehled zdrojů návštěvnosti portálu www.studiumchemie.cz (http://www.google.com/analytics) Statistiky týkající se celé doby monitoringu nástrojem Google Analytics (od 4.1.2010) jsou ovšem od těch aktuálních mírně odlišné. Provoz z vyhledávání tvoří 61,25%, návštěvnost z odkazujících stránek 20,44% a přímá návštěvnost 18,31% z počtu všech příchozích návštěvníků.
73
9.Závěr V rámci této diplomové práce byly provedeny změny ve struktuře funkčnosti a vnější podobě stránek www.studiumchemie.cz na základě zkušeností s provozem webu, vyhodnocení statistik návštěvnosti a přímých ohlasů návštěvníků. K účelu přestavby webu byly do vývoje stránek zapojeny nové technologie, jakými byly například poslední verze jazyka HTML, HTML5, populární knihovna jQuery fungující na bázi JavaScriptu nebo analytický nástroj Google Analytics, který umožňuje analyzovat chování návštěvníků na stránkách. Se zvyšujícím se zájmem o obsah portálu byly zahájeny také některé aktivity na sociálních sítích Facebook a YouTube za účelem dále rozšiřovat výukové materiály mezi větší množství uživatelů internetu. Jelikož tvoří největší podíl návštěvníků učitelé chemie, byly na portál implementovány některé nové funkce určené právě pro tuto skupinu uživatelů. Registrovaní učitelé si nyní na portálu mohou tvořit vlastní seznamy oblíbených materiálů nebo je hodnotit a informovat tak ostatní učitele o jejich kvalitě. Z důvodu rozšiřujícího se portfolia výukových materiálů na stránkách byly také přidány pokročilejší možnosti tyto materiály třídit. Třídění vychází z dokumentu RVP G a proto kopíruje strukturu obsahu učiva chemie na SŠ. Různorodý charakter materiálů publikovaných na www.studiumchemie.cz dal také vzniknout některým novým sekcím portálu, jako jsou „Chemická 3D videa“, „Templáty chemických vzorců“ nebo demonstrační videa v rámci sekce „Laboratorní pomůcky“. Vedle výukových materiálů byl na stránkách zahájen také provoz Databáze chemických pokusů. U jednotlivých pokusů je stejně jako u výukových materiálů dáván, kromě kvalitního oponovaného obsahu, důraz také na třídění, které zde může mít až čtyři úrovně. V roce 2011 proběhla na PřF UK v Praze řada akcí zaměřených na propagaci chemie. K tomuto účelu byly na portálu www.studiumchemie.cz vytvořeny podpůrné podstránky, které o jednotlivých akcích informovaly. Prostřednictvím těchto stránek se bylo možné na jednotlivé akce přihlašovat. Dalšími podstránkami, které byly vytvořeny v rámci této diplomové práce byly stránky věnující se tématu NMR. Během práce na tomto portálu byly zhotoveny 3 doprovodné animace doplňující odborný text. Pro potřeby autorů, kteří na portál přispívají svými výukovými materiály a jejichž počet 74
se neustále rozrůstá, bylo vytvořeno administrační rozhraní, které reflektuje potřeby autorů, neklade přílišné nároky na jejich počítačové znalosti a umožňuje jim upravovat pouze určité sekce stránek tak, aby nebyl narušen chod portálu. Hlavními funkcemi administračního rozhraní je vkládání a editace výukových materiálů, vkládání a editace chemických pokusů, přidávání nových otázek pro potřeby sekcí „Online testy“ a „Editor testů“, editace portálu NMR nebo přidávání nových aktualit na stránky. Analýza návštěvnosti stránek www.studiumchemie.cz ukázala, že stránky za dobu existence navštívilo přes 30 000 unikátních návštěvníků, kteří navštívili přes 130 000 jednotlivých webových stránek. Nejnavštěvovanější částí portálu byly „Výukové materiály“, která se na celkovém provozu portálu podílely téměř ze 40%, měly přes 50 000 shlédnutí jednotlivých stránek. Z nového obsahu portálu je velmi oblíbená zejména „Databáze chemických pokusů“, kterou za rok existence navštívilo přes 30 000 unikátních návštěvníků. Návštěvnost portálu se podařilo zvýšit z původních cca 1000 unikátních návštěvníků za měsíc (leden 2010) na dnešních 2500-3000 unikátních návštěvníků za měsíc. Stránky v současné době obsahují 293 výukových materiálů, 93 chemických pokusů a přes 180 chemických videí vytvořených pro potřeby výuky. Databáze MySQL obsahuje 40 jednotlivých tabulek s daty, která se váží k portálu www.studiumchemie.cz. Stránky www.studiumchemie.cz obsahují celkem kolem 200 souborů zdrojového kódu, které byly ručně naprogramovány v prostředí editorů PSPad a Komodo Edit.
75
Použité zdroje [1] STEWART, Jon. Global data storage calculated at 295 exabytes. BBC. BBC [online]. 2011 [cit. 2012-09-05]. Dostupné z: http://www.bbc.co.uk/news/technology-12419672 [2] CHRÁMECKÝ, Tomáš a Romana MALEČKOVÁ. Na internet je připojeno 62 českých domácností ze sta. Český statistický úřad [online]. 2011 [cit. 2012-09-05]. Dostupné z: http://www.czso.cz/csu/tz.nsf/i/na_internet_je_pripojeno_62_ceskych_domacnosti_ze_sta201 11129 [3] Metodický portál RVP.CZ [online]. [cit. 2012-09-05]. Dostupné z: http://rvp.cz [4] CANOV, Michael. Dobrý den, zájemce o trošku chemie vítá [online]. [cit. 2012-09-01]. Dostupné z: http://canov.jergym.cz/ [5] KUGLEROVÁ, Jindra, Ondřej NEŠPOR a Matěj HUMPÁL. Chemie.gfxs.cz: Chemický vzdělávací portál [online]. 2003 [cit. 2012-09-03]. Dostupné z: http://chemie.gfxs.cz/ [6] ŠVANDOVÁ, Veronika, Ondřej KOCIAN a Klára ZAHRADNÍČKOVÁ. Webchemie: Podpora výuky chemie [online]. 2010 [cit. 2012-09-05]. Dostupné z: http://www.webchemie.cz [7] VLAS, Tomáš. Projekt Alfa [online]. [cit. 2012-09-01]. Dostupné z: http://projektalfa.ic.cz/ [8] ADAMEC, Mojmír. Laboratorní průvodce [online]. [cit. 2012-09-05]. Dostupné z: http://www.labo.cz/ [9] VŠCHT. ECHO: Elektronické opory pro výuku chemie [online]. [cit. 2012-09-04]. Dostupné z: http://vydavatelstvi.vscht.cz/echo [10] BRENNER, David a Petr ŠMEJKAL. Studiumchemie.cz: Podpora výuky chemie na ZŠ a SŠ [online]. 2008 [cit. 2012-08-27]. Dostupné z: http://www.studiumchemie.cz [11] BRENNER, David. Příprava materiálů pro projekt podpůrného webu www.studiumchemie.cz. Praha, 2009. Bakalářská práce. PřF UK. [12] GOOGLE INC. Google Analytics [online]. [cit. 2012-09-02]. Dostupné z: http://www.google.com/analytics/ [13] HOGAN, Brian P. HTML5 a CSS3: výukový kurz webového vývojáře. Vyd. 1. Brno: Computer Press, 2011, 272 s. ISBN 978-80-251-3576-1. [14] W3C. World Wide Web Consortium (W3C) [online]. [cit. 2012-09-02]. Dostupné z: http://www.w3.org/ 76
[15] MEYER, Eric. Eric Meyer o CSS - pokračujeme s kaskádovými styly profesionálně!. Vyd. 1. Brno: Zoner Press, 2005, 285 s. ISBN 80-868-1517-X. [16] KOSEK, Jiří. PHP a XML. 1. vyd. Praha: Grada, 2009, 367 s. ISBN 978-80-247-1116-4. [17] EXPERTI KOMUNITY JQUERY. JQuery: kuchařka programátora. Vyd. 1. Brno: Computer Press, 2010, 436 s. ISBN 978-80-251-3152-7. [18] RESIG, John. JQuery: The Write Less, Do More, JavaScript Library [online]. [cit. 201209-05]. Dostupné z: http://www.jquery.com [19] JQUERY FOUNDATION. JQuery UI [online]. [cit. 2012-09-05]. Dostupné z: http://jqueryui.com/ [20] FANCYBOX.NET. Fancybox [online]. [cit. 2012-09-06]. Dostupné z: http://www.fancybox.net/ [21] MOXIECODE SYSTEMS AB. TinyMCE [online]. [cit. 2012-09-05]. Dostupné z: http://www.tinymce.com/ [22] HTTP 404. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2012-09-05]. Dostupné z: http://en.wikipedia.org/wiki/HTTP_404 [23] HTTP 403. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2012-09-05]. Dostupné z: http://en.wikipedia.org/wiki/HTTP_403 [24] Htaccess. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2012-09-05]. Dostupné z: http://en.wikipedia.org/wiki/ Htaccess [25] Studiumchemie.cz na Facebooku. Facebook.com [online]. [cit. 2012-09-05]. Dostupné z: http://www.facebook.com/studiumchemie.cz [26] Studiumchemie cz - YouTube. YouTube: Broadcast Yourself [online]. 2012 [cit. 201209-05]. Dostupné z: http://www.youtube.com/studiumchemiecz [27] List of virtual communities with more than 100 million users. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2012-09-05]. Dostupné z: http://en.wikipedia.org/wiki/List_of_virtual_communities_with_more_than_100_million_user s
77
[28] HÁJKOVÁ, Zdeňka. Návrh implementace nových poznatků z interdisciplinárního oboru „nanotechnologie“ do výuky přírodovědných předmětů na SŠ. Praha, 2009. Diplomová práce. PřF UK. [29] DRAČÍNSKÝ, Martin. Jaderná magnetická rezonance. Ústav organické chemie a biochemie [online]. [cit. 2012-09-05]. Dostupné z: http://www.uochb.cz/web/document/cms_library/747.pdf [30] VRZÁČKOVÁ, Eva. Tvorba databáze experimentů pro výuku chemie. Praha. Bakalářská práce. PřF UK. [31] Mezinárodní rok chemie 2011 [online]. 2011 [cit. 2012-09-05]. Dostupné z: http://www.rokchemie.cz/ [32] Univerzita Karlova zve na kurz Praha alchymistická. NOVINKY.CZ. Novnky.cz [online]. [cit. 2012-09-05]. Dostupné z: http://www.novinky.cz/veda-skoly/252570-univerzita-karlovazve-na-kurz-praha-alchymisticka.html [33] NAKONEČNÝ, Milan. Encyklopedie obecné psychologie. 2., rozšířené vyd., v Academii vyd. 1. Praha: Academia, 1997, 437 p. ISBN 80-200-0625-7. [34] HENKEL ČR. Není nám to jedno! [online]. 2011 [cit. 2012-09-05]. Dostupné z: http://www.neninamtojedno.cz/jak-dopadl-pruzkum/ [35] Brain Buddies. WOOGA GMBH. Facebook.com [online]. [cit. 2012-09-03]. Dostupné z: http://www.facebook.com/BrainBuddies [36] Geosense: an online world geografy game. GEOSENSE.NET. [online]. [cit. 2012-0905]. Dostupné z: http://www.geosense.net/ [37] ABC MILL LTD. Dobyvatel: strategická a znalostní hra [online]. [cit. 2012-09-05]. Dostupné z: http://dobyvatel.nova.cz/ [38] ROŠTEJNSKÁ, Milada. Biochemické pexeso. Studiumchemie.cz [online]. 2008 [cit. 2012-09-05]. Dostupné z: http://www.studiumchemie.cz/materialy_info.php?id=47 [39] ROŠTEJNSKÁ, Milada. Riskuj!. Studiumchemie.cz [online]. 2008 [cit. 2012-09-03]. Dostupné z: http://www.studiumchemie.cz/materialy_info.php?id=48 [40] SHEPPARD, Brad. Sheppard Software [online]. [cit. 2012-09-05]. Dostupné z: http://www.sheppardsoftware.com/Elementsgames.htm
