Webové Technologie: Cesta Z HTML na Webu 3.0

Tento článek je zejména pro ty čtenáře, kteří se snaží získat nějaké znalosti o, nebo se zajímají o práci jako webové vývojáře, nebo na jakýkoliv jiný aspekt webu.

v tomto článku se zaměříme na natvrdlý-kostrbatý některých známých-stejně jako některé nepříliš známé-webové technologie. Po rychlém a jednoduchém úvodu do webové technologie, projdeme základy různých typů webové technologie.

v průběhu naší diskuse, budeme také pokrývat stručná historie webových technologií, stejně jako některé vlastnosti a funkce každého typu technologie, o které mluvíme.

Co Jsou Webové Technologie?

Webové technologie jsou různé nástroje a techniky, které jsou využívány v procesu komunikace mezi různými typy zařízení přes internet.

abychom lépe porozuměli tomuto pojmu, rozdělíme jej na dvě části: „web“ a „technologie“.

web v tomto případě odkazuje na World Wide Web, běžněji známý jako WWW. Poprvé vznikl v roce 1989, kdy slavný vědec a inženýr Tim Berners-Lee přišel s účinným mechanismem sdílení zdrojů mezi vědci z celého světa.

Koncept webu lze snadno vysvětlit pomocí příkladu.

předpokládejme, že hledáte obrázek roztomilé Lamy. Píšeš „www.google.com‘ do vašeho webového prohlížeče. Do vyhledávacího pole zadáte „cute Lama“ a kliknete na kartu „Obrázky“. Google vám dává nepřeberné množství Lamy obrázků shromážděných z milionů různých zdrojů.

Po rolování na chvíli, budete myslet, „Ach, tahle fotka se mi líbí!“Ale musíte vidět obrázek v plné velikosti, než jej stáhnete. Takže, otevřete původní obrázek a dorazí na této stránce:

Všimněte si, že červené pole?

to je URL (Typ identifikátoru) pro tento konkrétní obrázek. Stejným způsobem by každý obrázek Lamy, který jste si prohlédli, měl jinou adresu URL, která by pomohla najít tento obrázek na internetu.

všechny tyto webové stránky, dokumenty a další zdroje jsou identifikovány a umístěny pomocí jejich adres URL. Ty společně tvoří to, co označujeme jako World Wide Web.

znalosti, které nashromáždíte o webu a o tom, jak funguje, je třeba použít, aby bylo možné jej lépe pochopit. K tomu potřebujete znát základy některých běžných webových technologií. Abychom lépe porozuměli webu, podívejme se na některé základní typy a příklady webové technologie, které se v této oblasti běžně používají.

jaké jsou různé typy webových technologií?

vzhledem k tomu, že máme omezený prostor pro zkoumání široké škály dostupných webových technologií, vybrali jsme několik, které nejčastěji používají začátečníci i odborníci v oboru. Rozdělili jsme je do následujících částí:

1. základy, které se bude týkat webových prohlížečů a některé webové aplikace rozvoj základy
2. Programovací jazyky a rámce, které jsou používány v rozvoji webových stránek
3. Databází, které jsou používány na backend pro ukládání dat, požadované nebo shromážděné prostřednictvím webových stránek
4. Některé protokoly, to znamená, že pravidla pro komunikaci na webu
5. Grafické, audiovizuální, a další multimediální prvky
6. Některé datové formáty, které jsou obvykle používané k přenosu dat přes internet
7. Další různé webové technologie

Zatímco jsme začne se základy, naše diskuse může mít o něco techničtější povahu, jak v článku dále postupujeme.

nyní se podívejme na podrobnosti o každé součásti, kterou jsme uvedli.

základy

v této části budeme hovořit o webových prohlížečích a některých dalších základech webu.

webové prohlížeče

webové prohlížeče, často nazývané prohlížeče, nám umožňují zobrazit všechny zdroje, které jsou součástí World Wide Web. Jsou založeny na architektuře klient-server. Klient je prohlížeč v tomto scénáři. Server můžete považovat za kombinaci softwaru a hardwaru, který přijímá požadavky klienta a poté odešle požadovaný zdroj klientovi.

když zadáte URL do prohlížeče adresního řádku, to relé se váš požadavek na server a pak se načte a zobrazí, co uživatel požadoval.

Některé populární webové prohlížeče jsou Opera, Mozilla Firefox, Google Chrome a Safari.

Frontend vs Backend Development Technologies

co je vývoj webu?

Vývoj webu označuje proces vytváření webových stránek. Tento proces je založen na řadě kroků, které se budeme podrobněji zabývat, když prozkoumáme nástroje zapojené do každého procesu.

dvě části typického webu

jak jdeme dále, budeme diskutovat o jednotlivých technologiích vývoje webových stránek a nástrojích používaných k vytváření webových stránek. Ale předtím musíme mít jasno ve dvou odlišných částech webu: frontendu a backendu.

Frontend odkazuje na všechny ty části webových stránek, které uživatel může vidět na své obrazovce a komunikovat s nimi.

Backend označuje přesný opak toho. Zahrnuje skryté mechanismy, které vytvářejí funkci webové stránky. Typický uživatel si obecně neuvědomuje, co se děje na backendu.

v procesu návrhu a vývoje webu se používají různé webové technologie.

zde je stručný přehled rozdílů mezi oběma kategoriemi vývoje webu.

Frontend	Backend
na straně Klienta	Server-side
Web design	Databáze
UI/UX	Servery
Některé UI technologie:	Některé backend technologií:
HTML	PHP
CSS	Java
JavaScript	Python
AJAX	Ruby
	.Síť

HTML

Hypertext Markup Language, více obyčejně odkazoval se na jako HTML, je místo, kde WWW začal. Je to kritická součást všech úvodních lekcí, které pokrývají základy webu. Jedná se o jazyk na straně klienta, který se používá ke kódování frontendu webové stránky. Pomáhá vývojářům definovat, jak bude webová stránka strukturována, a to pomocí prvků, které jsou identifikovány značkami.

zde je velmi základní příklad kódu napsaného v HTML:

<!DOCTYPE html><html><body><h1 style="background-color:SteelBlue; color:LightSteelBlue; font-family:Cambria; font-size:200%">Hello, We Are GoodCore Software.</h1><p style="background-color:LightSteelBlue; color:SteelBlue; font-family:Calibri; font-size:150%">Good to the Core! &#128513;</p></body></html>

každá položka uzavřená v závorkách < > je prvek. DOCTYPE je však pouze prohlášení, které sdělí prohlížeči, že to, co se chystá načíst, je dokument HTML. Prvek < body> definuje veškerý obsah, který tvoří tělo dokumentu. < h1> a <p> označují začátek nadpisu a odstavce. < / body>, < / h> a </p> jsou uzavírací značky. Označují, kde končí tělo, Nadpis a odstavec.

v tomto příkladu se atribut style používá k přiřazení konkrétní barvy pozadí, barvy písma, rodiny a velikosti textu. Může být dále rozšířen o styl písma (tučné, kurzíva,…), zarovnání (uprostřed, vlevo,…) atd. Jiné atributy kromě stylu lze také použít k úpravě prvků podobným způsobem.

(řetězec náhodných znaků &#128513; na konci odstavce je překvapivý prvek, který můžete vidět na výstupní obrazovce níže!)

CSS

CSS je jednou z nejzákladnějších technologií designu webových stránek. Chcete-li své webové stránky dále zkrášlit, můžete do kódu HTML integrovat CSS (kaskádové styly).

proces aplikace určitých stylů na určité prvky kódu HTML se může změnit na opakující se úkol. Chcete-li ušetřit čas a energii, CSS lze použít k zefektivnění procesu stylování vašich stránek na celém webu. Jakmile si připravit stylem s všechny výchozí styly písma, barvy a další vlastnosti týkající se celkové rozložení webové stránky, můžete použít site-wide. CSS je také v kombinaci s Bootstrap navrhnout mobilní první webové aplikace.

programovací jazyky a rámce

programovací jazyky jsou nejzákladnější součástí tvorby webových stránek. Chcete-li kódovat web, musíte se seznámit s několika programovacími koncepty, některými jazyky a jejich syntaxí a dobrým vývojovým IDE. Některé z těchto jazyků mohou být univerzální, ale jiné jsou speciálně vytvořeny pro účely vývoje webu.

Níže jsou uvedeny některé příklady běžně používaných vývoj webových jazyků.

1. Java

Java byla založena v roce 1991 jako univerzální programovací jazyk, ale pomalu se vyvinul hrát významnou roli ve vývoji webu v polovině 90.let.

Java je dobře známo, vzhledem k některé z jeho úžasné vlastnosti, včetně jeho

• Objektově orientované povahy
• Přenositelnost a platformě-nezávislost
• Jednoduchá syntaxe
• Naučitelnost
• Odolnost

Když přijde na vývoj webových aplikací, Java se obvykle používá na straně serveru.

2. JavaScript

JavaScript byl poprvé vytvořen v roce 1995. Dnes je oblíbeným developerem po celém světě. Nyní je důležitou součástí vývoje webu, který pomáhá vytvářet dynamické prvky webových stránek.

zavedení JavaScriptu přineslo revoluční vlnu interaktivních webových stránek. Dnes, zahrnutí grafických prvků, integrace databáze, a celková dynamika webu je možná díky příchodu JavaScriptu.

zatímco JavaScript byl původně představen jako jazyk pro vývoj frontendu, nyní se stává populární volbou pro vývoj backendu.

3. Python

Python existuje již několik let, ale teprve nedávno získává popularitu díky své extrémně snadno naučitelné, čitelné syntaxi a vysoké produktivitě. Úkol, který by mohl použít 10 řádků kódu, když je napsán v jakémkoli jiném programovacím jazyce, lze snadno dosáhnout v 2-3 řádcích kódu Pythonu.

pro vývoj webu na straně serveru se Python často používá ve spojení s frameworky Django nebo Flask, což dále zjednodušuje proces vývoje.

v letošním roce StackOverflow oznámil, že Python porazil popularitu jako Java A C a umístil se na 2. místě v seznamu nejoblíbenějších programovacích jazyků.

4. PHP

PHP, rekurzivní zkratka, znamená PHP: hypertextový preprocesor. Je to nejoblíbenější a nejpoužívanější skriptovací jazyk preferovaný jak nováčky, tak zkušenými profesionály v oboru vývoje webových aplikací. Je velmi snadné se naučit a je zcela zdarma.

Při použití s Apache (nebo jakékoli jiné) HTTP server na backend, PHP umožňuje dodávat efektivní, vysokorychlostní a vysoce výkonné vývoj webových projektů. Taky, protože PHP existuje už roky a roste jen větší a lepší, je snadno dostupná rozsáhlá podpora komunity vývojářů.

5. Ruby

Ruby, představený v polovině 90. let, je výkonný univerzální programovací jazyk, který se v průběhu let stal populárním mezi vývojáři backendu. To je často používáno ve spojení s jeho populárním rámcem Ruby on Rails. Ruby se doporučuje zejména pro weby náročné na provoz a ty, které vyžadují hodně práce na konci databáze. Je také užitečné pro psaní škálovatelných aplikací.

populární weby jako Twitter a Shopify byly postaveny s Ruby na backendu.

6. Objective-C & Rychlé

Jak Objective-C a Swift jsou univerzální programovací jazyky, které se používají speciálně stavět aplikace pro zařízení Apple, které běží macOS a iOS.

Objective-C staví na C, zatímco Swift je silně založen na syntaxi c++. Zatímco Objective-C existuje již mnoho let než Swift, první z nich pomalu ztrácí následovníky, protože je stále zastaralejší. Očekává se, že Swift postupně nahradí Objective-C jeho pokročilejšími funkcemi, snadností použití a bezpečností. Od té doby, co byl Swift otevřený, vývojáři jej používají také pro vývoj webových aplikací.

frameworky

Zjednodušeně řečeno lze framework definovat jako skeletový kód. Ber to jako hrubý obrys bez jemných detailů. Rámec definuje základní funkce nebo úkoly, které kód očekává. Aby však bylo možné říci, že konkrétní program, jak provádět tyto funkce, budete muset napsat nějaké podrobnější, specifické pokyny.

pojďme se podívat na několik rámců, které kodéry běžně používají pro účely vývoje backendového webu, spolu s jazyky, se kterými nejlépe pracují. Tento seznam obsahuje některé z nejnovějších webových technologií.

Frameworky	Jazyky
Vue.JS	JavaScript
Expresní uzel	.JS (JavaScript)
reaguj.js	JavaScript
AngularJS	JavaScript
Django	Python
Baňky	Python
Laravel	PHP
Ruby on Rails	Ruby
Katalyzátor	Perl
Kakaové & Cocoa Touch	Swift

Výběr z těchto možností závisí na vašich potřeb rozvoje. Musíte určit, který rámec a Jazyková kombinace bude nejlépe splňovat vaše požadavky na škálovatelnost, bezpečnost a produktivitu, aniž byste hodně investovali do učení samotné technologie.

databáze

všechna data, která jsou vyměňována na webu, musí být někde uložena. Za tímto účelem má většina webových stránek s nimi spojené vlastní databáze.

Níže je seznam některých databází – některé relační a další, non-relační – které se běžně používají pro webové aplikace.

• MySQL
• SQL Server
• Postgres
• Oracle
• MongoDB
• Redis

Formáty Dat

vždy, když je třeba pro výměnu dat mezi dvěma zařízeními na internetu, správný postup je následován. Data jsou správně zabalena pro přenos ze zdroje do místa určení. Speciální rozhraní API (Application Programming Interfaces) jsou navržena a integrována do webových stránek pro pohodlnou výměnu dat. Uspořádají data tak, aby je přijímač mohl snadno dekódovat a pochopit.

Níže jsou uvedeny dva běžné datové formáty používané při vývoji webu.

1. XML

XML je zkratka pro Extensible Markup Language. Na začátku tohoto článku jsme diskutovali o syntaxi pro HTML. XML funguje podobným způsobem v tom, že rozděluje data na prvky identifikované různými typy značek. S XML však můžete vymyslet vlastní značky, abyste lépe popsali svá data. Tato data, po dosažení webové aplikace nebo serveru, lze snadno pochopit a analyzovat.

podívejme se na příklad záznamu studenta, jeho biodata a její registrované kurzy na univerzitě. Takto by to vypadalo uloženo v XML:

<student><studentname>Regina George</studentname><year>2</year><courses><course>Compiler Design</course><course>Film Studies</course><course>Accounting</course></courses></student>

zde je hlavní nebo kořenový uzel student. jméno studenta, rok, a kurzy jsou podřízené uzly. Dalo by se říci, že se jedná o atributy kořenového uzlu. Stejně jako v případě HTML se data XML zapisují také mezi Otevírací a zavírací značky podřízených uzlů.

2. JSON

Po letech zažívá XML je objemnost a těžké spotřebu šířky pásma, odborníci přišli s JSON (JavaScript Object Notation). Na rozdíl od XML se JSON zaměřuje spíše na rychlou a snadnou výměnu dat než na podrobnou definici a modelování dat. Eliminuje také veškeré další zatížení, které XML nese ve formě opakujících se značek.

JSON je založen na známém mechanismu dvojice klíč-hodnota. Jeho syntaxe se podobá syntaxi JavaScriptu, což usnadňuje čtení a porozumění.

podívejme se, jak by se náš předchozí příklad studentského záznamu objevil při uložení JSON:

{"studentname": "Regina George","year": "2","courses": }

zde je student předmětem. jméno studenta je příkladem klíče, který je atributem předmětu student. Jeho přidruženou hodnotou je Regina George. Stejně tak jsou klíčové i kurzy. Je však ve formě pole (označeného hranatými závorkami), protože s ním je spojeno více hodnot, tj.

protokoly

webové protokoly jsou některá předdefinovaná pravidla, která musí dodržovat všichni komunikující přes web.

HTTP

HyperText Transfer Protocol, lépe známý jako HTTP, je webový protokol, který definuje dva pojmy:

1. Jak požadavky klienta jsou přeneseny na servery
2. Jak servery reagovat na požadavky klientů

požadavek musí specifikovat následující čtyři položky:

1. URL pro zdroj, který chce klient
2. metoda jako GET (který se používá k načtení dat ze serveru) nebo POST (který se používá pro odesílání dat, které musí být aktualizovány na server)
3. seznam hlaviček (záhlaví Požadavku může obsahovat různé informace o klientovi, nebo zdroje, které mají požadované, jako klienta, název prohlížeče, operační systém, velikost zprávy, čas a datum žádosti, informace o řízení přístupu/přihlašovací údaje atd.)
4. tělo, které obsahuje informace, které klient chce odeslat na server

server odešle odpověď z druhého konce, jakmile žádost byla vyřízena. Tuto odpověď uvádí tři prvky:

1. kód stavu, který je ve formě 3-místné číslo (kód stavu, který jste mohli vidět během vaší každodenní prohlížení webových stránek zasedání je 404, což znamená, že požadovaný zdroj nebyl nalezen.)
2. seznam hlaviček (záhlaví odpovědí se ve struktuře podobají hlavičkám požadavků a mohou obsahovat informace, jako je velikost zprávy, typ obsahu atd.)
3. tělo, které obsahuje informace, které klient vyžádal od serveru

Další Protokoly

Níže je uveden seznam dalších běžných webových protokolů a jejich použití.

Protokol	je Zkratka pro	Použití
TCP	Transmission Control Protocol	Pro navázání spojení mezi dvěma zařízeními na webu a řízení dodávky datových paketů
IP	Internet Protocol	Pro přenos datových paketů mezi dvěma zařízeními na webu
TCP/IP		Tyto dvě webové technologie často pracují společně.
UDP	User Datagram Protocol	Pro navázání spojení mezi dvěma zařízeními na webu
FTP	File Transfer Protocol	Pro přenos souborů mezi klientem a serverem
SMTP	Simple Mail Transfer Protocol	Pro odesílání e-mailových zpráv na server
POP	Post Office Protocol	Pro načítání e-mailových zpráv ze serveru
MÝDLO	Simple Object Access Protocol	Pro odesílání XML zprávy přes HTTP

grafika

grafické prvky jsou klíčovým prvkem každé webové stránky. Přispívají nejen ke zkrášlování stránky, ale mohou být také použity k lepšímu vyjádření důležitých bodů než text.

1. Plátno

plátno je prvek, který je součástí HTML. Při použití spolu s JavaScriptem (nebo jiným skriptovacím jazykem) můžete kreslit grafiku na webové stránce kousek po kousku. Aspekt JS poskytuje interaktivitu v grafice plátna, včetně animace.

plátno funguje nejlépe v situacích, kdy je třeba na webové stránce načíst velké množství grafických objektů. V tomto ohledu je rychlý a lehký. Nicméně, to není příliš výjimečné, pokud jde o změnu velikosti grafiky a jejich škálování, protože je rastrové bázi.

2. SVG

SVG je zkratka pro škálovatelnou vektorovou grafiku. Je založen na XML a funguje velmi dobře s HTML. lze jej také snadno manipulovat pomocí CSS.

tajemství jeho popularity je v jeho jménu: škálovatelnost. Co odlišuje SVG od jiných grafických stylů, jako jsou JPEG a PNG, je to, že není založen na pixelech. Spoléhá se na číselné rozměry (vektory), které lze snadno zmenšit nahoru nebo dolů bez ztráty kvality.

Pokud jde o použití grafických prvků na webových stránkách, kvalita grafiky je kritickým faktorem. SVG dosahuje nejen vysokého výkonu pro větší grafiku, ale také zajišťuje interaktivitu. Z těchto důvodů je SVG v současné době jednou z nejvýhodnějších grafických webových technologií.

3. WebGL

Webová grafická knihovna, lépe známá jako WebGL, je prostředek webové technologie, který umožňuje prohlížečům vykreslovat 2D i 3D obrázky na obrazovce. Eliminuje potřebu externích zásuvných modulů a je kompatibilní s desktopovými i mobilními prohlížeči.

Ostatní

zde jsou některé další webové technologie, o kterých jste možná ještě neslyšeli. Cítíme, že si zaslouží čestnou zmínku v našem článku.

1. Perl & CGI

Perl je univerzální multiplatformní programovací jazyk, který postupně získává popularitu v prostředí vývoje webu. Staví na jazycích jako C A BASIC a hladce pracuje s HTML, nejčastěji používaným značkovacím jazykem. Perl také dobře pracuje s běžnými databázemi, jako jsou MySQL a Oracle.

Perl se používá pro psaní aplikací, které implementují CGI (Common Gateway Interface). CGI je webový protokol, který definuje, jak aplikace komunikuje s webovým serverem při provádění požadavků HTTP. Tyto skripty CGI zefektivňují proces načítání zdrojů.

2. MathML

podobně jako HTML je MathML (Mathematical Markup Language) značkovací jazyk. Používá se však speciálně pro přesné a správné znázornění matematických a vědeckých rovnic na webu.

MathML nejen zajišťuje, že rovnice jsou zobrazeny správně, ale také přiřadí význam matematického obsahu. To vše je dosaženo použitím prvků XML pro reprezentaci matematického obsahu a symbolů. Například prvek msqrt se překládá na symbol druhé odmocniny, trigonometrická sinusová funkce je reprezentována prvkem sin a tak dále.

3. XSL, XSLT & EXSLT

XSL (Extensible Stylesheet Language) je jazyk, který se používá k definování tak, že XML data musí být ve formátu, kdy jsou zobrazeny na klienta. Zatímco XML se zabývá samotnými daty, XSL řídí její transformaci, rozvržení a prezentaci. Můžeme říci, že XSL slouží XML stejnému účelu jako CSS HTML.

web W3 uvádí dvě složky XSL: a) XSLT (transformace) pro zpracování transformací a b) XSL-FO (formátování objektů)pro zpracování formátování, stránkování atd. V roce 2013 však byl XSL-FO přerušen a nahrazen CSS3.

XSLT (Extensible Stylesheet Language Transformations) je jazyk, který určuje, jak se XML dokumenty mají být převedeny do jiné, více čitelné formáty jako HTML. Aplikuje styly XSL na dokumenty XML pomocí procesoru XSL, aby zkrášlil data XML.

EXSLT je prostředek k rozšíření funkčnosti XSLT. Není to oficiální součást XSLT, ale je to komunitní projekt. Jeho cílem je zvýšit přenosnost stylů XSL a zvýšit jejich funkčnost a podporu přidáním dalších funkcí.

Budoucnost Webových Technologií

zpráva Cisco předpovídá, že téměř 52% světové populace bude mít přístup k internetu do roku 2020. World Wide Web poroste s úžasnými sazbami, aby zahrnoval vyšší počet lidí, zařízení, a zdroje dostupné online. Očekává se proto, že se webové technologie rozšíří. V důsledku toho se tech profesionálové budou snažit poskytovat přístupnému webovému obsahu uživatelům všude. K ochraně soukromého webového obsahu před škodlivými kybernetickými útoky budou muset být přijata přísnější bezpečnostní opatření.

WWW začal jako Web 1.0 se statickými webovými stránkami napsanými v obyčejném starém HTML. Poté se přesunul na Web 2.0 s příchodem JavaScriptu a dalších technologií, které uživatelům umožnily komunikovat s webovým obsahem a vytvářet vlastní.

brzy půjde Web o krok dále a vstoupí do třetí fáze, tj. Web 3.0, který bude mnohem decentralizovanější než dnes. Moderní technologie jako AI a IoT brzy ovládnou Web. Vše bude mnohem automatizovanější z hlediska vývoje i spotřeby nového obsahu.

doufáme, že vám tento článek pomohl získat cenné poznatky o vývoji a budoucnosti webových technologií. Sledujte náš blog a sledujte další zajímavý vývoj v krajině WWW!