Domů > Odborné články > Základní vzdělávání > Tvorba a design webových stránek 2
Odborný článek

Tvorba a design webových stránek 2

10. 4. 2018 Základní vzdělávání
Autor
Mgr. Karel Šimeček

Anotace

Seriál Tvorba a design webových stránek se dělí na 2 díly. Druhý díl obsahuje 3 témata: Umístění webu (webhosting), Tvoříme web snadno a rychle a Redakční systémy. První téma Umístění webu (webhosting) dává na výběr z některých serverů, které nabízí hosting zdarma (tzv. freehosting). Druhé téma Tvoříme web snadno a rychle popisuje některé zajímavé programy a webové aplikace, které umožňují vytvářet webové stránky bez znalosti HTML, CSS a programovacích jazyků. A poslední téma Redakční systémy popisuje hotová řešení pro správu a úpravu webu několika uživateli, kteří mají různé přístupy a práva.

Úvod

Tento článek je pokračováním a rozšířením článku Tvorba a design webových stránek 1. Ve druhém díle se budeme zabývat tématy, jak vhodně umístit svůj web na internet, a zmíníme pro a proti některých freehostingových poskytovatelů, dále nahlédneme do možnosti vyzkoušet si vytvořit webovou stránku bez znalosti HTML, CSS a programovacích jazyků a nakonec zavítáme do tajů redakčních systémů. 

Umístění webu (webhosting)

Samozřejmě nejlepší variantou je mít vlastní server, kde běží webové stránky školy (školského zařízení), a na něm mít všechny podporované služby v aktuálních verzích od HMTL přes MySQL až po PHP, kde účastníci vzdělávání mohou pod svými uživatelskými účty upravovat svůj web. Následující příklady jsou pro případ, že tuto možnost z nějakého důvodu nemáte a máte tedy zájem o tzv. freehosting.

Webzdarma

U služby Webzdarma máte možnost výběru ze tří variant služby webové prezentace Premium s doménou za 44 Kč měsíčně (bez reklam, větší úložiště s SSD disky na e-maily a stránky, garantovaná podpora a doména druhého řádu s podporou e-mailu na vlastní doméně), Premium za 28 Kč měsíčně (stejné bez vlastní domény a e-mailů) a nakonec zřejmě nejpoužívanější varianta Zdarma, u které lze využít e-mailové služby (50 MB), omezené úložiště pro váš web (až 0,5 GB pro web podle nastavení reklam) a fórum podpory. Samozřejmostí je možnost využití serverového programovacího jazyka PHP, databázového serveru MySQL (20 MB) a redakčního systému. Je nutné se však smířit s tím, že jednotlivé verze spravují pouze administrátoři Webzdrama. Zapotřebí je mít pouze vlastní e-mailovou schránku. Vyzkoušet lze mj. i některý z redakčních systémů.

Endora

Freehosting Endora funguje velmi obdobně, s vloženou reklamou a aktivitou na webu získáváte až 2 GB místa pro váš web a přesměrování vašich e-mailů. Drobnou nevýhodou je 30 GB traffic (neboli objem přenesených dat) za měsíc zdarma v možnosti Free. Další možností je Plus, která za 14 Kč měsíčně již neobsahuje reklamu, ani není nutná aktivita na webových stránkách, 10 GB volného místa 500 MB místa pro e-maily, 100 GB traffic za měsíc, SSL certifikát a navíc běží na SSD discích. Poslední variantou je Mega, opět bez vložené reklamy, 30 GB místa pro web, 3 GB místa pro e-maily, neomezený traffic a SSL certifikát zdarma za 60 Kč. Samozřejmostí je ve všech variantách podpora PHP, MySQL, FTP atd.

PHP5.cz

Dalším příkladem je služba PHP5.cz freehosting od společnosti ZONER software, a. s. Projekt podporuje programátory, uživatele a vývojáře, kteří chtějí pracovat s nejnovějšími technologiemi PHP (7.0 (5.6)) a MySQL 5.7 v ostrém provozu. Webový prostor je o velikosti 100 MB, kde je možné si vytvořit doménu 3. řádu s koncovkou php5.cz a přistupovat k ní skrze protokoly FTP a SSH. Na projektu je zřejmě nejzajímavější, že zde neexistují placené verze a aktuálnost používaných technologií.

Tvoříme web snadno a rychle

V této části se zaměříme na webové stránky, pro vytváření webů bez hlubší znalosti jazyků HTML, CSS, PHP apod. Bude se tedy jednat o aplikace, které nám většinou v grafickém prostředí umožňují vytvářet jednoduché weby, webové prezentace, blogy atd.

Weby Google

Prvním z velmi povedených počinů jsou Weby Google, které jsou kompletně v češtině. Po založení uživatelského účtu od společnosti Google spojeného se službou Gmail máte možnost vytvářet webové stránky s propojením všech googlovských technologií bez jakékoli znalosti kódu. K dispozici jsou rovněž předpřipravené šablony, které můžete upravovat dle vlastní fantazie (samozřejmě ne natolik, jako pokud píšete webovou stránku od začátku). Dalšími z funkcí jsou např. jednoduché vložení tabulek, formátování textu, vkládání obrázků, grafů, souborů, příspěvků z Google+, videí z Youtube a mnohé další. Pokud potřebujete trochu pokročilejší verzi, stojí za zmínku aplikace Google web designer, která ovšem není lokalizována do českého jazyka. 

Webnode

Dalším zajímavým českým projektem je Webnode. Tento projekt firmy Westcome, s. r. o., umožňuje zdarma velmi pohodlným způsobem vytvářet osobní stránky a e-shop. Webová aplikace je velmi intuitivní, multiplatformní (funguje na všech zařízeních), podporuje technologii drag and drop, registrace je rychlá a na první pohled, zdá se, velmi efektivní. Jsou zde však různá omezení. V modulu osobní stránky lze přidávat soubory pouze do 100 MB a traffic (přenos dat) pouze 1 GB. Pokud chcete web zálohovat, přidat Google analytics, registrovat uživatele, přidávat další jazyky na stránce, je nutné využít některý z placených balíčků, viz ceník. U modulu e-shop je situace velmi obdobná, vkládat lze maximálně 10 produktů, váš e-mail musí být registrován na jiném serveru, absence zálohování atd. Navíc lze přidávat k e-shopu různé doplňky. Jedním z takových zajímavých doplňků je smartlook. Tento doplněk umožňuje sledovat (natáčet), co na webu dělají vaši zákazníci. Pro lepší přehled viz ceník e-shop. Přesto všechno je vhodný pro rychlou zajímavou prezentaci, popř. pochopení principu e-shopových stránek. 

Wix.com

Podobnou platformou, jako je Webnode, je Wix.com. Ovšem tento původem cizojazyčný bratr, podporující češtinu, působí poněkud více sofistikovaně. Wix.com umožňuje nahrát vlastní obrázky, videa, hudbu, písma, vytvářet vlastní chaty, blogy, fóra, a to v nepřeberném množství šablon zdarma. Navíc používá velmi efektivně technologii drag and drop. I zde jsou však různá omezení, např. prostor pro vaše soubory je maximálně 500 MB, maximální velikost zvukového nebo video souboru je 50 MB a u dokumentů dokonce jen 15 MB. Wix.com je typickým představitelem typu freemium, ve kterém je základní část zdarma, avšak za dostupné rozšíření už si musíte připlatit. Toto připlácení probíhá u Wix.com pomocí tzv. prémiových plánů. Přesto je možné účastníkům vzdělávání na této stránce ukázat mnohé pokročilé technologie, popř. pro jednoduchý web je naprosto dostačující. V momentě, kdy narazíme na omezení, máme pak následně lepší motivaci si případně kód napsat sami.

Sway

Za zmínku také dále stojí nástroj Sway od společnosti Microsoft, který je dostupný zdarma v rámci balíčku Office 365 (pro realizaci je zapotřebí mít účet u společnosti Microsoft). Po přihlášení ke svému účtu máte možnost začít s jednotlivými předpřipravenými šablonami, nebo začít úplně od začátku. Přidávat můžete nadpisy, text, obrázky, videa, zvuky a mnohé další. Samozřejmostí je podpora microsoftích cloudových služeb. Celý výsledek pak může vypadat jako velmi hezká interaktivní webová prezentace.

Google Blogger

Google Blogger patří také do rodiny Google, nástroj je však určený spíš pro tvorbu blogu, který je zaměřen na vkládání jednotlivých příspěvků jednoho či více uživatelů (editorů). Na tyto příspěvky mohou ostatní uživatelé většinou reagovat. Ovšem zdá se, že služba Google Blogger se již nějakou dobu nevyvíjí, a proto např. nepodporuje sdílení souborů z Google disku. Nicméně nástroj je celý lokalizován do českého jazyka, lze v něm editovat své stránky a příspěvky v grafickém rozhraní, navíc s výhodou v přepínání do módu HTML.

Redakční systémy

Už jste někdy potřebovali stránky, ve kterých jste chtěli přihlašování jednotlivých uživatelů, kteří mají právo upravovat každý svoji sekci stránek, a neumíte programovat? Jestli ano, redakční systémy jsou tou pravou volbou pro vás. Redakční systém, jinak řečeno systém pro správu obsahu, vám tedy zajišťuje správu jednotlivých obrázků (galerií), audiovizuálních souborů, funkce kalendáře, diskuzí, chatů, statistik přístupů, a to vše a ještě mnohem více s konkrétními pravidly pro jednotlivé uživatele.

WordPress

Jedna z nejznámějších open source aplikací, která plně podporuje českou lokalizaci a pracuje na bází redakčního systému, se jmenuje WordPress. V základní verzi je navíc tento systém zcela zdarma a obsahuje nepřeberné množství doplňků a šablon, které jsou také nezpoplatněné. Samozřejmě v modu zdarma narazíte na několik omezení. Vaše stránky musí být pod subdoménou wordpress.com a musí mít 3 GB maximálního prostoru pro vaše úložiště. Další verze jsou osobní, premium a business. A prohlédnout si konkrétní vylepšení v jednotlivých verzích můžete v tomto ceníku. Existuje několik českých webů, které vám poskytují podporu pro práci s WordPressem jako např. WordPress.org Česko, WordPress – česká podpora atd. Pro příklad, jak lze využít Wordpress pro webovou prezentaci stránky školy, můžeme nahlédnout na stránky Katedry anglického jazyka a literatury Pedagogické fakulty Univerzity Karlovy v Praze, dále také na ZŠ Vodičkova v Praze nebo na ZŠ Lužice. Zajímavým doplněním je zcela jistě článek s názvem Jednotný, víceuživatelský web v praxi publikovaný na Učitelském spomocníku Jaroslavem Maškem.

Joomla!

Další možnou open source alternativou je redakční systém Joomla!. Tento systém funguje na velmi podobném principu jako Wordpress s tím rozdílem, že je celé řešení kompletně zdarma bez omezení. Stejně jako u Wordpressu i zde nalezneme velké množství šablon a doplňků zdarma. Ani zde nebudete mít problém s překládáním z cizích jazyků, neboť Joomla! je kompletně přeložená do češtiny a podporovaná českou komunitou na stránkách Joomlaportal (česká komunita). Pro příklad opět uvádím některé školy, které tento systém využívají v praxi – např. Soukromá základní škola Integrál pro žáky se SPU, s. r. o., Gymnázium Františka Palackého, Neratovice. Pro bližší vhled do této problematiky doporučuji nastudovat článek pana Mgr. Jakuba Běhounka s názvem Redakční systém Joomla! ve škole publikovaný na Učitelském spomocníku. 

Drupal

Dalším zajímavých opensource CMS systémem je Drupal. Tento další zástupce má poměrně velmi aktivní českou komunitu, kterou naleznete na webových stránkách www.drupal.cz. Celý projekt je tedy kompletně přeložen do českého jazyka. Tento redakční systém tedy umožňuje procházení logů, volbu vzhledu administrátorského rozhraní, tvorbu obsahu přes WYSIWIG editor, správu uživatelů s různými typy práv a v neposlední řadě přidávání dalších rozšíření. Zde si můžete prohlédnout některé funkční stránky škol, které mají webovou prezentaci založenou na Drupalu – např. Gymnázium Ústí nad Labem, Jateční 22 a Střední zdravotnická škola, Turnov, 28. října 1390.

Závěr

Ve druhé části seriálu Tvorba a design webových stránek jsme zmínili několik webhostingových serverů, na kterých lze také zdarma vyvěsit svoji webovou prezentaci, doplnili jsme předcházející článek o možnosti vytváření stránek „snadno a rychle“ pomocí online služeb, které nabízí základní verzi zdarma, a poukázali jsme na pozitiva a negativa. Na konci tohoto seriálu jsme krátce zmínili tři redakční systémy, které poskytují komplexní webové aplikace, které může ovládat více uživatelů najednou, navíc jsou opět v základní verzi zdarma. Všechna tato témata nemusí být nutně nedílnou součástí vyučování, ale dle mého názoru je velmi dobré, když mohou účastníci vzdělávání nahlédnout do nějakých hotových řešení, která mohou testovat dokonce mimo prostředí školy a vymýšlet alternativy, ve kterých mohou hledat nová a lepší řešení, nebo naopak jednoduché řešení pro jedince, kteří potřebují rychle vytvořit webovou stránku a nechtějí se dlouze zabývat programovacími jazyky, nebo chtějí využít webové prostředí v předmětu, který není zaměřen na IT, ale např. pro nějaký pokus v chemii, přírodopisu atp. Možností je tedy velké množství.

Licence

Všechny články jsou publikovány pod licencí Creative Commons BY-NC-ND.

Autor
Mgr. Karel Šimeček

Hodnocení od recenzenta

Tým RVP.CZ
10. 4. 2018
Článek má svým obsahem přesahuje vzdělávací cíle a očekávané výstupy oblasti ICT na základní škole. Nabízí tedy nástroje pro činnosti na školách s rozšířenou výukou ICT nebo pro zájmové útvary. Úvodní část článku pojednávající o webhostnigu je spíše shrnutím možností pro ty, kteří hodlají tvořit webové stránky sepisováním vlastního kódu. O poznání cennější pro učitele je část, která nabízí učitelům i žákům nástroje pro rychlé a snadné sestavování webů. Pro znalé a zkušené učitele a jejich žáky pak lze s využitím školních serverů nebo webhostingu pracovat s volně dostupnými redakčními systémy, které jsou zmíněny v závěru článku. Jejich nasazení sice může být za podpory zkušenějšího webmastera poměrně rychlé, nicméně je třeba si dobře promyslet účel. Udržovat provoz takových systémů vyžaduje nemalou dávku proaktivního přístupu.

Hodnocení od uživatelů

Janek Wagner
12. 4. 2018, 17:56
Prosím autora, aby dodržoval správnou podobu názvů produktů v textu i štítcích: WordPress nikoli Wordpress, Google Weby nikoli Google weby, Blogger nikoli Google Blogger, Google Disk nikoli Google disk atd.
Janek Wagner
12. 4. 2018, 18:11
A ještě poznámka k službě Blogger: poslední větší změny proběhly na podzim 2011 (viz https://www.you…MujWwUm8 ). Na produktovém blogu https://blogger…log.com/ za poslední rok nebyl jediný příspěvek, ale npříklad v posledních týdnech proběhl na českých blozích přechod na protokol https, který byl avizován už před dvěma lety. Vývoj je opravdu jen velmi malý, v roce 2015 byly například přidány nové výrazy do šablonovacího jazyka a došlo k propojení se službou Google Domains.

Váš komentář

Pro vložení komentáře je nutné se nejprve přihlásit.

Článek není zařazen do žádného seriálu.

Téma článku:

Informační a komunikační technologie