20. Moderní webové technologie

standardy používané webovou službou

– protokoly HTTP/HTTPS (slouží k přenosu zdrojových kódů mezi serverem a klientem a předávání požadavků mezi klientem a serverem = požadavek GET url —- server odpoví HTTP 200 ok …. dál hlavičky a případně dál zdrojový kód)

– DNS – systém překladu doménových jmen (nemusíme si pamatovat IP čísla), v Internetu má každý soubor jedinečnou URL

– jazyky kterými jsou vytvořené www stránky – HTML, skriptovací jazyky pro dynamiku webu – JavaScript, PHP, ASP, JSP …

– datové prostředky – prostě úložiště dat – adresářový prostor pro webové soubory – lze data ukládat do obyčejných txt souborů (rychlé řešení ale neoptimální pro rozsáhlé projekty – nelze strukturovaně vybírat data, i když existují souborové databáze typu LiteSQL), nejběžnější způsob ukládání dat z webu je databázový systém MySQL (relační databáze)

– další služby na serveru – automatické spouštění skriptů – bot (CRON), automatické zálohy, nastavení HTTP serveru pomocí souboru .htaccess (zde lze nastavit např. omezení přístupu na web určitým IP adresám nebo použití tzv. NiceLinks, PrettyLinks)

  • web 2.0 a současnost – současné požadavky na web

– web první generace se chápe jako statický, typický web z 90. let (grafika využívá spíše GIF než PNG, layouty jsou často tabulkové, zastaralé interaktivní prvky (formuláře))

– web druhé generace – weby po roce 2000 – disponuje možností např. přidávat komentáře, lajkování, facebooková interaktivita, vzhled je spíše pomocí oddílů a umístění je relativní (vlastnosti float, clear, padding, margin …) – nově se začíná objevovat rozdělení layoutů na fixní a fluidní, centrovaný a zarovnaný do strany, web už nepoužívá gif, ale CSS animaci (hover efekty)

– někdo už ale mluví o tzv. webech třetí generace – časově po roce 2012 – moderní layouty, responzivita, HTML5 interaktivita, CSS3 – deriváty kaskadových stylů LESS …, nové ovládací prvky formulářů, nový způsob integrace multimédií, integrace vektorové grafiky, dynamika obsahu je závislá na nejnovějších verzích skriptovacích jazyků (PHP7), JavaScript se spíše přesouvá do CDN (načítání ze serverů třetích stran případně se používají knihovny jQuery) …

  • frameworky, bootstrap šablony

– frameworky – smysl – ulehčení práce, jde o to, že už není zapotřebí programovat jednotlivé komponenty a stačí pouze je parametrizovat, frameworky se instalují podobně jako redakční systémy, mají tzv. složku sandbox (pískoviště), kde vaše projekty tvoříte – prostě komponentové programování, dříve bylo zapotřebí doslova vykrádat skriptové knihovny – např. https://www.hotscripts.com/ kopírování částí skriptů – nevýhodou bylo, že ne všechny uspokojivě fungovaly

– příklady PHP frameworků Nette, Symphony, nejznámější Zend Framework …

– bootstrap – grafická knihovna pro tvorbu webové grafiky (HTML5 a CSS3) – k dispozici je CSS jádro, programátor pouze dodržuje správný zápis v HTML a používá předdefinované třídy u jednotlivých objektů

– bolilerplate – předpřipravené prázdné šablony např. pro responzivitu s HTML5shiv, vyresetování stylů … příprava kvůli kompatibilitě prohlížečů apod.

  • sdílení dat – API (OpenGraph, JSON, RSS)

– weby třetí generace využívají pokročilá datová rozhraní např. API pro integraci článků z facebooku – OpenGraph – je to dohodnutá struktura HTML značek, které jsou rozpoznávány na API serveru při načtení obsahu stránky pomocí PHP funkce file_get_contents(); funkcionalita se projevuje např. tak, že když vložíte do statusu na FB odkaz, facebook si z vložené adresy najde náhledový obrázek, vhodný titulek a popisek statusu, který web nabízí pomocí tagů v headu např.

<meta property=“og:title“ content=“The Rock“ />

<meta property=“og:type“ content=“video.movie“ />

<meta property=“og:url“ content=“http://www.imdb.com/title/tt0117500/“ />

<meta property=“og:image“ content=“http://ia.media-imdb.com/images/rock.jpg“ />

více info na http://ogp.me/

– JSON – Javascript Object Notation – datová struktura – jedná se o textový řetězec, který je vhodně strukturován, aby bylo možno rozpoznat, co je datový klíč a co jsou data – používá se např. v určitých API, načtení článků mezi servery, statistika

– RSS – Realy Simple Syndication – je datový výstup webu v podobě textového řetězce – jedná se o hierarchickou datovou strukturu formátu XML (značkovací kód), RSS je standardizován tak, aby se z řetězce bylo možno vyčíst název webu, titulky článků, texty článků a případně další informace o článcích … nejčastější použití pro zpravodajské servery, blogy a jiné rychle se měnící weby … RSS zdroj lze číst pomocí čtečky (jako rozšíření webového prohlížeče), nemusíme neustále hlídat nové články, tím, že navštívíme web, přehled nových článků nám ukáže čtečka

  • AJAX, jQuery

– AJAX – Asynchronous Javascript and XML – technologie slouží především k předáváním a přijímáním HTTP požadavků či odpovědí na pozadí webové aplikace … není třeba obnovovat okno prohlížeče. Často slouží např. jako našeptávač ve vyhledávání na Googlu, na Facebooku např. k dynamickému načítání zpráv (vidíme dokonce v chatu, že protistrana píše do textového pole), Eshopy využívají např. pro automatické přepočítávání košíku

– jQuery – Javascriptová knihovna, již předpřipravené aplikační komponenty lze parametricky ovládat na webové stránce. Užití např. automatická kontrola formuláře, animace, metoda ovládání drag and drop, rozbalovací nabídky, slidery apod. na webu … Komponenty lze do webu začlenit jako CDN nebo JS soubory začlenit linkem, existuje mnoho předpřipravených řešení v podobě pluginu více na oficiální stránce

– jQuery mobile – http://demos.jquerymobile.com/1.4.5/ – zde naleznete mnoho již připravených komponent pro interakci v prostředí mobilních zařízení