Tvorba webových stránek - Historie editací

Jan Pecha: /* Serverový a klientský software pro provoz webového obsahu */

2012-04-23T07:54:39Z

Serverový a klientský software pro provoz webového obsahu

Jan Pecha: formátování

2012-04-22T21:52:51Z

formátování

Jan Pecha: /* Formuláře na webu */

2012-04-22T21:51:15Z

Formuláře na webu

Jan Pecha: /* CSS */

2012-04-22T21:21:15Z

CSS

Jan Pecha: /* ActiveX, Java Applet */

2012-04-22T21:10:45Z

ActiveX, Java Applet

Jan Pecha: /* Role W3C */

2012-04-22T20:02:00Z

Role W3C

Jan Pecha: /* Klientské skriptování a DOM */

2012-04-22T19:37:13Z

Klientské skriptování a DOM

Jan Pecha: /* Protokoly webu */

2012-04-22T19:05:18Z

Protokoly webu

Jan Pecha: /* Popis HTML (tagy párové a nepárové, příklady) */

2012-04-22T17:45:34Z

Popis HTML (tagy párové a nepárové, příklady)

Jan Pecha: e popis html

2012-04-22T17:22:06Z

e popis html

@@ Řádka 32: / Řádka 32: @@
 == Serverový a klientský software pro provoz webového obsahu ==
 * '''serverový software'''
-** '''webový server'''
+** '''webový server''' - zpřístupňuje uživateli požadované webové stránky na základě jeho požadavku
 *** např. Apache, nginx, ISS (od Microsoftu vyžaduje Windows)
 * '''klientský software'''
-** '''webový prohlížeč'''
+** '''webový prohlížeč''' - slouží k zobrazení webových stránek na koncovém zařízení - nejčastěji monitoru počítače
 *** např. Opera, Firefox, Chrome, Internet Explorer, Safari, Links (pracuje v textovém režimu), apod.

@@ Řádka 124: / Řádka 124: @@
 Druhou možností zabezpečení přenosu přes protokol HTTP je nadstavba protokolu HTTP ve verzi 1.1, která byla představena v RFC 2817. Tato metoda ale není příliš podporována prohlížeči, takže se pro zabezpečenou komunikaci častěji využívá HTTPS.
 == Role W3C (World Wide Web Consortium) ==
@@ Řádka 131: / Řádka 132: @@
 Vývoj specifikací W3C trvá velice dlouho, protože každý standard (doporučení) prochází několika fázemi (od pracovního návrhu (Working Draft), LastCallWorkingDraft, Candidate Recommendation, Proposed Recommendation až po W3C Recommendation). Doporučení je pak postupně revidováno prostřednictvím samostatně vydávaných errat (''Errata''). Když se nashromáždí větší množství těchto úprav, je vydána nová edice doporučení. Než doporučení projde do závěrečné fáze, může to trvat i několik let. Díky tomu je konsorciu často vyčítána malá pružnost a neschopnost reagovat na aktuální situaci v rychlém vývoji moderního webu.
 == Popis HTML (tagy párové a nepárové, příklady) ==
@@ Řádka 151: / Řádka 153: @@
 * <code>&lt;meta name="author" content="John Doe"></code> - sděluje informaci o tom, kdo je autorem stránky
 * <code>&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></code> - sděluje prohlížeči jakou stránka využívá znakovou sadu (kódování)
 == Struktura HTML dokumentu ==
@@ Řádka 187: / Řádka 190: @@
 * můžeme určit styl pro různá '''výstupní zařízení''' - máme tak možnost nadefinovat jiný styl pro tisk, projekt, mobil, PDA či webový prohlížeč. Specifikace CSS nezapomínají ani na zrakově postižené – je možno napsat styly pro hlasový syntetizátor nebo hmatovou čtečku Braillova písma
 * koncový uživatel si může napsat svůj vlastní CSS styl pro libovolnou stránku. Většina prohlížečů nějakým způsobem podporuje uživatelské styly, takže uživatel si může například nastavit, aby měl všechny odkazy na všech webech vždy podtržené nebo aby na tomto konkrétním webu mělo písmo vždy černou barvu
 == Formuláře na webu ==
@@ Řádka 200: / Řádka 204: @@
 Formuláře také mohou být zpracovány JavaScriptem na straně klienta - v takovém případě se data na server nepřenáší.
 == Klientské skriptování a DOM ==
@@ Řádka 205: / Řádka 210: @@
 Jelikož se jedná o skriptovací jazyky (a ne jazyky kompilované) je na straně klienta nutná přítomnost '''interpretu''', který je schopen do stránky vložený kód načíst a vykonat dané příkazy. Takový interpret bývá zabudován do webového prohlížeče. V posledních letech vedou tvůrci webových prohlížečů zuřivý boj o to, kdo z nich vytvoří rychlejší a méně chybový interpret JavaScriptu a tím nabídnou svých uživatelům možnost používat stále náročnější JavaScriptové aplikace. Díky JavaScriptu lze v dnešních prohlížečích editovat fotografie, psát dokumenty, vytvářet tabulky jako v Excelu, editovat prezentace, malovat, hrát hry (existují např. JavaScriptové emulátory pro staré hry - např. emulátor původního DOOMa). Spousta společností a služeb využívá JavaScript ve svých aplikacích - bez JavaScriptu si neškrtnete např. na Facebooku, Twitteru a spoustě dalších webových stránkách.
 === Využití ===
@@ Řádka 223: / Řádka 229: @@
 Pomocí DOM tak můžeme v JavaScriptu vybrat konkrétní elementy a dále s nimi manipulovat, upravovat a mazat je nebo vkládat zcela nové elementy.
 == ActiveX, Java Applet ==

← Starší verze		Verze z 22. 4. 2012, 21:51
Řádka 189:		Řádka 189:

	== Formuláře na webu ==		== Formuláře na webu ==
		+	Formuláře jsou nezbytnou součástí www stránek. Používají se například pro získání názoru čtenáře stránky, slouží k odesílání vzkazů z www stránek apod. Formulář je obsažen v HTML elementu <code><form></code> a obsahuje různá vstupní pole (textová políčka, rozbalovací seznamy, zaškrtávátka, přepínače, textová pole, pole pro hesla, pro výběr souboru, apod.) a tlačítka. Vstupní pole slouží k vyplnění a zadání daných údajů do formuláře, tlačítka slouží např. pro odeslání formuláře na server.

		+	Formuláře neodvratně patří k modernímu webu a hlavně k webových aplikacím. Můžou mít různou podobu a účel - např. registrační formulář, formulář pro přihlášení k e-mailu, anketní formulář, formulář pro napsání diskusního příspěvku, apod.
		+
		+	Data z formuláře by měla být vždy nějak zpracována - jinak přítomnost formuláře postrádá smysl. Data z formuláře bývají často odeslána na server, kde jsou zpracována nějakým programem nebo skriptem (např. registračním PHP skriptem). Pro odeslání formulářových dat na server se používají 2 metody - '''get''' a '''post'''.
		+
		+	* '''metoda GET''' - odešle data na server jako součást adresy HTTP požadavku. Tato data jsou v adrese umístěna za otazníkem. Protože je délka adresy omezena, nehodí se tato metoda pro odesílání většího množství dat. Jednotlivé údaje z formuláře jsou odděleny znakem <code>&</code>. Příklad adresy s odeslanými daty - <code>http://example.com/zbozi.php?hledej=televize&serad=sestup&maxcena=5000</code>. Data v adrese jsou na straně serveru zpracována nějakým programem nebo skriptem. Adresa s daty je normálně dostupná v historii prohlížeče - to může být nevýhoda, pokud chceme přenášená data skrýt.
		+	* '''metoda POST''' - odesílá data na server v těle HTTP požadavku a ne v jeho adrese. To umožňuje odesílat objemnější data (např. soubory), protože nejsme omezeni maximální délkou adresy. Také není přenášená data vidět v historii prohlížeče a v logovacích souborech webového serveru, proxy serverů a dalších zařízeních "po cestě". Tuto metodu se doporučuje používat hlavně v případech, kdy odesílaná data nějakým způsobem mění stav aplikace/serveru - např. když odesíláme diskuzní příspěvek, mažeme článek z webu, přihlašujeme se k webové aplikaci, apod. Takto se liší od metody GET, která se používá hlavně v případech, kdy chceme nějaká data získat (např. vyhledat všechny televize pod 5000 Kč v e-shopu) a nechceme data (např. v databázi) měnit.
		+
		+
		+	Formuláře také mohou být zpracovány JavaScriptem na straně klienta - v takovém případě se data na server nepřenáší.

	== Klientské skriptování a DOM ==		== Klientské skriptování a DOM ==

← Starší verze		Verze z 22. 4. 2012, 21:21
Řádka 175:		Řádka 175:

	== CSS ==		== CSS ==
		+	'''Kaskádové styly''' (v anglickém originále Cascading Style Sheets se zkratkou CSS) je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML.

		+	Jazyk byl navržen standardizační organizací W3C, autorem prvotního návrhu byl Håkon Wium Lie. Byly vydány zatím dvě úrovně specifikace CSS1 a CSS2, dne 7. června 2011 byla dokončena revize CSS 2.1 a pracuje se na verzi CSS3. Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu. Původně to měl umožnit už jazyk HTML, ale v důsledku nedostatečných standardů a konkurenčního boje výrobců prohlížečů se vyvinul jinak. Starší verze HTML obsahují celou řadu elementů, které nepopisují obsah a strukturu dokumentu, ale způsob jeho zobrazení. Z hlediska zpracování dokumentů a vyhledávání informací není takový vývoj žádoucí.
		+
		+	=== Výhody ===
		+	* rozsáhlejší možnosti formátování oproti vizuálním elementům v HTML
		+	* jednodušší údržba webové prezentace. Pokud chceme změnit nějaký detail, jako třeba barvu nadpisu, nemusíme složitě procházet HTML kód nebo různé HTML šablony, ale můžeme změnit pouze jednu vlastnost v CSS souboru, který je přilinkován ke všem stránkám.
		+	* '''oddělení struktury a stylu''' - v jednom (HTML) dokumentu budeme mít pouze sémanticky označen obsah a v druhém (CSS) dokumentu máme definice vzhledu stránek. Tím dosáhneme snadnějšího strojového zpracování samotného obsahu stránek, do kterého se nám nepletou prvky definující vzhled.
		+	* cachování stylů – webový prohlížeč si může soubor se styly uložit do cache paměti, čímž může být dosaženo zrychlení načtení stránky. Na druhou stranu při použití externího CSS souboru dochází k dalšímu HTTP požadavku navíc oproti tomu, když bychom použili buď online CSS nebo přímo formátování HTML
		+	* CSS vlastnosti jednotlivých elementů můžeme dynamicky měnit pomocí Javascriptu
		+	* můžeme určit styl pro různá '''výstupní zařízení''' - máme tak možnost nadefinovat jiný styl pro tisk, projekt, mobil, PDA či webový prohlížeč. Specifikace CSS nezapomínají ani na zrakově postižené – je možno napsat styly pro hlasový syntetizátor nebo hmatovou čtečku Braillova písma
		+	* koncový uživatel si může napsat svůj vlastní CSS styl pro libovolnou stránku. Většina prohlížečů nějakým způsobem podporuje uživatelské styly, takže uživatel si může například nastavit, aby měl všechny odkazy na všech webech vždy podtržené nebo aby na tomto konkrétním webu mělo písmo vždy černou barvu

	== Formuláře na webu ==		== Formuláře na webu ==

← Starší verze		Verze z 22. 4. 2012, 21:10
Řádka 204:		Řádka 204:

	== ActiveX, Java Applet ==		== ActiveX, Java Applet ==
		+	Kromě JavaScriptu je možné vložit do stránky také jiné objekty, které jsou schopné se stránkou nějakým způsobem manipulovat. Na rozdíl od JavaScriptu se nejedná o skriptovací jazyky, ale o externí programy, většinou zkompilované do podoby nějakého balíčku, který je vložen do webové stránky. Mezi tyto technologie patří např. '''ActiveX''' od Microsoftu a '''Java applety'''.
		+
		+	=== ActiveX ===
		+	ActiveX je technologie, kterou vyvinula společnost Microsoft pro sdílení informací mezi různými aplikacemi. ActiveX spolupracují pouze s aplikacemi, jako je Microsoft Word, Excel, Internet Explorer, PowerPoint a pracují pouze na počítači s operačním systémem Windows.
		+
		+	Nejznámější použití ActiveX je tzv. ActiveX Controls – jde o malé soubory kódů, které si mohou uživatelé prohlížeče Internet Explorer stáhnout a spustit v počítači. ActiveX Controls jsou psané v běžných programovacích jazycích, jako je Visual Basic a C++. Nejedná se o samostatné aplikace a mohou být spuštěny pouze z hostitelské aplikace jako například Internet Explorer, MS Office apod. ActiveX Controls lze přirovnat k Java Appletům, na rozdíl od nich však mají plný přístup k operačnímu systému, neboť jde o objekty COM a mají tak neomezený přístup k počítači. ActiveX Controls mohou přistupovat k místnímu systému souborů a měnit nastavení registru operačního systému.
		+
		+	Na webových stránkách lze ActiveX komponenty používat od roku 1996, kdy byla tato představena a zároveň byla vydána nová verze Internet Exploreru - verze 3.0. ActiveX komponenty jsou objekty postavené na technologii COM. Prakticky jakákoliv aplikace může být vytvořena v podobě ActiveX componenty. Lze implementovat jednoduché objekty zobrazující prostý text i složité objekty typu tabulek programu Excel apod.
		+
		+	Na stránku můžeme ActiveX objekt umístit pomocí tagu <code><object></code>, jemuž nastavíme parametr <code>classid</code>. Ten obsahuje hodnotu GUID (Global Unique IDentifier) – jednoznačné hexadecimální číslo identifikující COM objekt. Seznam objektů se na klientovi uchovává v systémovém registru Windows. Pokud na cílovém počítači ještě není přítomen objekt, na který se stránka odkazuje, je prohlížečem stáhnut z adresy dané parametrem CodeBase tagu <code><object></code> a nainstalován, tzn. jsou přidány záznamy do registru systému. Pak již lze COM objekt spustit a zobrazovat jeho grafický výstup v prohlížeči.
		+
		+	ActiveX jsou často zneužívány k virovým útokům. ActiveX se po stažení stávají součástí operačního systému se schopností manipulace s hardware i software počítače. Microsoft po kritice namísto omezení funkcí ActiveX zvolil v následujících verzích IE jinou cestu zabezpečení. Microsoft vyvinul systém registrací a certifikátů, díky nimž může prohlížeč prvky ActiveX ověřovat ještě před samotným zavedením. Je ponecháno na rozhodnutí uživatele, zda je ActiveX legitimní, nebo se jedná např. o trojského koně.
		+
		+	'''ActiveX je dnes již překonaná technologie, která navíc dokáže být nebezpečná a její používání se nedoporučuje.'''
		+
		+	Podobné funkcionality bývá v ostatních prohlížečích a na ostatních platformách dosaženo pomocí tzv. plug-inů. Je to knihovna, kterou prohlížeč načte při svém spuštění a která modifikuje vnitřní chování prohlížeče. Tímto způsobem přidává prohlížeči novou funkcionalitu a to různého typu. Některé plug-iny lze asociovat s MIME typem. Je-li pak pomocí tagu <embed> vložen do HTML stránky soubor určitého MIME typu, je spuštěn asociovaný plug-in (např. pro přehrávání videí a spuštění flashe (např. pro flash hry) bývá používán plug-in Flash Player, pro zobrazení PDF souborů plug-in Adobe Readeru, apod.).
		+
		+	=== Java Applet ===
		+	V programovacím jazyku Java je zdrojový kód nejprve napsán jako jednoduchý text a uložen do souborů s koncovkou <code>.java</code>. Tyto zdrojové soubory se potom kompilujjí do souborů s koncovkou <code>.class</code> pomocí Java kompilátoru. Soubor s koncovkou <code>.class</code> však neobsahuje kód, který dokáže přímo zpracovávat procesor; místo toho obsahuje tzv. bajtkód (bytecode) - instrukce pro virtuální počítač Java Virtual Machine (Java VM, JVM). Při spuštění Java programu, tak dojde ke spuštění JVM - pomocí něho je pak program spouštěn (interpretován). Java tak kombinuje vlastnosti kompilovaných jazyků (kompilace - program je rychlejší, než kdyby byl interpretován) a jazyků skriptovacích (interpretovaných) - snadná přenositelnost a nezávislost na kontrétní platformě či operačním systému.
		+
		+	'''Applety''' jsou malé programy, jejichž soubor <code>.class</code> s byte kódem je uložen na serveru - vždy je ale vykonáván na straně klienta v rámci jiného programu (nejčastěji webového prohlížeče). Aby bylo možno používat applety, musí být na klientském počítači instalován Java Virtual Machine a prohlížeč je musí podporovat.
		+
		+	Abychom v prohlížeči mohli spustit applet, vložíme do stránky HTML tag <code><applet></code> s atributem, který specifikuje umístění appletu na serveru. Jakmile prohlížeč načte tento tag, spustí tzv. Class Loader (součást JVM), jenž ze serveru stáhne kód appletu a kód všech potřebných tříd, na něž se applet odkazuje a které ještě nemá klient v počítači. Jsou-li všechny požadované soubory dostupné, je applet spuštěn.
		+
		+	Aby byla zajištěna nezbytná bezpečnost při běhu appletu, omezuje dostupnou funkcionalitu tzv. Security Manager, který umožňuje uživateli zvolit, jaké skupiny funkcí mají být povoleny či zakázány. Obvykle nemají applety přístup do souborového systému a nemohou navazovat spojení s jinými servery, než odkud byly stáhnuty.
		+
		+	Applety se používají především k implementaci složitějšího grafického prostředí na straně klienta, než je schopna poskytnout technologie dynamického HTML. Za tím účelem je appletu na stránce HTML vymezen obdélníkový prostor, jehož rozměry jsou dány dalšími atributy tagu <code><applet></code>. V této oblasti je veškeré vykreslování ponecháno na appletu a prohlížeč ho neovlivňuje.

@@ Řádka 41: / Řádka 41: @@
 == Protokoly webu ==
-=== HTTP (port 80) ===
+=== HTTP (port TCP/80) ===
-Standardním protokolem, který se používá pro komunikaci mezi klientem a serverem je protokol '''HTTP''', defaultně komunikující na '''portu 80'''. Protokol je textově orientovaný, nešifrovaný.
+Internetový protokol pro výměnu hypertextových dokumentů ve formátu HTML. Aktuální je verze 1.1 (definována v RFC 2616).
-=== HTTPS (port 443) ===
+V současné době je používán i pro přenos dalších informací. Pomocí rozšíření MIME umí přenášet jakýkoli soubor (podobně jako e-mail), používá se společně s formátem XML pro tzv. webové služby (spouštění vzdálených aplikací) a pomocí aplikačních bran zpřístupňuje i další protokoly, jako je např. FTP nebo SMTP.
-Pro zabezpečenou komunikaci přes protokol HTTP se používá jeho zabezpečená varianta známá jako '''HTTPS''', defaultně komunikující na '''portu 443'''.
 == Role W3C ==

@@ Řádka 52: / Řádka 52: @@
 == Popis HTML (tagy párové a nepárové, příklady) ==
-Zdrojový kód HTML je složen z textu a '''značek''' (tagů). Všechny značky jsou uzavřeny ve špičatých závorkách <code>&lt;</code> a <code>&gt;</code>. Tagy mohou obsahovat parametry - ty nazýváme '''atributy''' a nachází se mezi špičatámi závorkami hned za jménem značky.
+Zdrojový kód HTML je složen z textu a '''značek''' (tagů). Všechny značky jsou uzavřeny ve špičatých závorkách <code>&lt;</code> a <code>&gt;</code>. Tagy mohou obsahovat parametry - ty nazýváme '''atributy''' a nachází se mezi špičatými závorkami hned za jménem značky.
   <jmenoZnacky atribut1="hodnota atributu 1" atribut2="hodnota atributu 2">
@@ Řádka 58: / Řádka 58: @@
 Atributy upravují a nastavují výsledné zobrazení/chování značky. Např. chceme vložit obrázek, proto použijeme značku <code><img></code>. Když značku zapíšeme do dokumentu v této podobě, nic se víceméně nestane - prohlížeč totiž neví, jaký obrázek má na místě značky zobrazit (zobrazí bílé ohraničené místo, nebo také nic). Proto do značky doplníme atribut <code>src</code>: <code><img src="obrazek.jpg"></code>. Jestliže takový obrázek existuje prohlížeč ho zobrazí v místě, kde se ve zdrojovém kódu nachází značka <code><img></code>. Pokud ale takový obrázek existovat nebude, opět se nám nic nezobrazí. Proto můžeme tag rozšířit o další atribut <code>alt</code>: <code><img src="neexistujici-obrazek.jpg" alt="Obrázek stromu"></code>. Atribut <code>alt</code> obsahuje tzv. '''alt'''ernativní text - tzn. text, který se zobrazí místo obrázku, pokud daný obrázek nebude existovat. Nyní se nám místo bílého místa (v případě neexistující obrázku) zobrazí text "Obrázek stromu". Pomocí atributů lze upravit chování řady značek v HTML kódu.
 == Struktura HTML dokumentu ==

← Starší verze		Verze z 22. 4. 2012, 17:22
Řádka 52:		Řádka 52:

	== Popis HTML (tagy párové a nepárové, příklady) ==		== Popis HTML (tagy párové a nepárové, příklady) ==
		+	Zdrojový kód HTML je složen z textu a '''značek''' (tagů). Všechny značky jsou uzavřeny ve špičatých závorkách <code><</code> a <code>></code>. Tagy mohou obsahovat parametry - ty nazýváme '''atributy''' a nachází se mezi špičatámi závorkami hned za jménem značky.
		+
		+	<jmenoZnacky atribut1="hodnota atributu 1" atribut2="hodnota atributu 2">
		+
		+	Atributy upravují a nastavují výsledné zobrazení/chování značky. Např. chceme vložit obrázek, proto použijeme značku <code><img></code>. Když značku zapíšeme do dokumentu v této podobě, nic se víceméně nestane - prohlížeč totiž neví, jaký obrázek má na místě značky zobrazit (zobrazí bílé ohraničené místo, nebo také nic). Proto do značky doplníme atribut <code>src</code>: <code><img src="obrazek.jpg"></code>. Jestliže takový obrázek existuje prohlížeč ho zobrazí v místě, kde se ve zdrojovém kódu nachází značka <code><img></code>. Pokud ale takový obrázek existovat nebude, opět se nám nic nezobrazí. Proto můžeme tag rozšířit o další atribut <code>alt</code>: <code><img src="neexistujici-obrazek.jpg" alt="Obrázek stromu"></code>. Atribut <code>alt</code> obsahuje tzv. '''alt'''ernativní text - tzn. text, který se zobrazí místo obrázku, pokud daný obrázek nebude existovat. Nyní se nám místo bílého místa (v případě neexistující obrázku) zobrazí text "Obrázek stromu". Pomocí atributů lze upravit chování řady značek v HTML kódu.