Co je WebKit a jak souvisí s CSS? Motory webových prohlížečů - co to je a co to je Dobře, tak kam jsme to dospěli?

• Překlad

Pro mnoho z nás vývojářů je WebKit černou skříňkou. Hodíme na to HTML, CSS, JS a hromadu obrázků a WebKit nám nějak... magicky dá webovou stránku, která vypadá a funguje dobře.
Ale ve skutečnosti jak říká můj kolega Ilja Grigorik :

• Co je WebKit?
• Co WebKit není?
• Jak WebKit používají prohlížeče WebKit?
• Proč mnoho WebKitů není stejných?

• Analýza (analýza HTML, XML, CSS, Javascript)
• Rozložení
• Vykreslování textu a grafiky
• Dekódování obrazu
• Interakce s GPU
• Přístup k síti
• Hardwarová akcelerace

Každý „port“ WebKit implementuje zbývající komponenty odlišně. Pojďme zjistit, co to znamená.

Existuje mnoho "portů" WebKit a já poskytuji Ariya Hidayat, WebKit hacker a tech. Ředitel společnosti Sencha má právo o tom mluvit:

Jak jsem uvedl výše, použitá CoreGraphics je jedinečná pro každý port WebKit. Chrome pro Mac například používá Skia.

• Safari
  - Safari pro OS X a Safari pro Windows jsou dva různé porty
  - Noční sestavení WebKit je sestavení „portu“ zdrojového kódu Mac, který se používá pro Safari, pouze novější
• Mobilní Safari
  - Vyvinuto v soukromé pobočce, ale později bylo otevřeno.
  - Chrome pro iOS (používá Apple WebView; více o rozdílu později)
• Chrome (Chromium)
  – Chrome pro Android (používá přímo „port“ Chromium)
  - Chromium je také základem pro prohlížeče: Yandex, Sogou a brzy i Opera.
• Android prohlížeč
  - Používá nejnovější zdrojový kód WebKit dostupný v době vydání.
• Ještě více portů: Amazon Silk, Dolphin, Blackberry, QtWebKit, WebKitGTK+, Port EFL (Tizen), wxWebKit, WebKitWinCE atd.

Nejprve se podívejme na společné funkce, které se používají ve všech prohlížečích WebKit:

Víte, je to vtipné, několikrát jsem se pokusil napsat tento odstavec. A pokaždé mě členové týmu Chrome opravili, jak uvidíte...

Takže je to těžké.

Nyní se pokusme shrnout, co má svět WebKit společného...

• DOM, okno, dokument
  víceméně
• CSSOM
• Analýza CSS, vlastnost/hodnota
  rozdíly v prefixech výrobce
• Analýza HTML a vytvoření DOM
  Je to stejné, pokud zapomeneme na Web Components.
• Rozložení a umístění
  Flexbox, Floats, kontext formátování bloků... vše je společné
• Nástroje uživatelského rozhraní a vývojářské nástroje, jako je Chrome DevTools aka WebKit inspector.
  Ačkoli od loňského dubna Safari používá svůj vlastní Safari Inspector, který není WebKit, uzavřený zdroj.
• Funkce jako contenteditable, pushState, File API, většina SVG, CSS transformační matematika, Web Audio API, localStorage
  I když provedení se může lišit. Každý port může používat svůj vlastní úložný systém pro localStorage a může používat různé audio API pro Web Audio API.

• Vše, co souvisí s GPU
  - 3D transformace
  - WebGL
  - Dekódování videa
• Vykreslování 2D na obrazovku
  - Anti-aliasingové technologie
  - Vykreslování přechodů SVG a CSS
• Vykreslování textu a dělení slov
• Síťové technologie (SPDY, předběžné vykreslování, přenos WebSocket)
• JavaScript engine
  - Modul JavaScriptCore je v úložišti WebKit. Ve WebKitu však existují vazby jak pro něj, tak pro V8.
• Vykreslování prvků formuláře
• Chování video a audio tagů a podpora kodeků
• Dekódování obrazu
• Navigace zpět/vpřed
  - Part pushState()
• Funkce SSL, jako je Strict Transport Security a Public Key Pins

Nebo abychom šli do podrobností, nedávno přidaná funkce: CSS.supports() byla povolena pro všechny porty kromě win a wincairo, které nemají povoleny podmíněné funkce css3.

Nyní dostáváme technický... čas na pedantství. Ani to, co bylo řečeno výše, není úplně správné. Toto je ve skutečnosti WebCore, generická komponenta. WebCore je knihovna rozvržení, vykreslování a DOM pro HTML a SVG a je v podstatě tím, co si lidé představí, když se řekne WebKit. Ve skutečnosti je „WebKit“ technicky vrstvou vazeb mezi WebCore a „porty“, ačkoli v běžné konverzaci je tento rozdíl do značné míry nedůležitý.

Schéma by mělo pomoci:

Mnoho komponent WebKitu je přepínatelných (zobrazeno šedě).

Například JavaScriptový engine WebKit, JavaScriptCore, je výchozím modulem WebKitu. Původně je založen na KJS (z KDE) z dob, kdy WebKit začínal jako fork KHTML. Port Chromium se zároveň přepne na engine V8 a používá unikátní vazby DOM.

Písma a vykreslování textu jsou velmi velkou součástí platformy. Ve WebKitu existují 2 samostatné cesty pro text: Rychlá a Tvrdá. Oba vyžadují podporu specifickou pro platformu (implementovanou na straně portu), ale Fast potřebuje vědět, jak blitovat glyfy (které WebKit ukládá do mezipaměti pro platformu), zatímco Complex převádí vykreslování řetězců zcela na úroveň platformy a říká pouze „nakresli toto , prosím."

Nyní rozšíříme přehled a podíváme se na několik portů a několik subsystémů. Níže je uvedeno pět portů WebKit, všimněte si, jak se sada nástrojů pro každý z nich liší navzdory společným komponentám:

* Poznámka pod čarou o prohlížeči Chrome pro iOS. Používá UIWebView, jak asi víte. Podle možností UIWebView to znamená, že může používat pouze stejný vykreslovací engine jako Mobile Safari, JavaScriptCore (nikoli V8) a jednovláknový model. Některý kód je však vypůjčen z Chromia, jako je síťový subsystém, infrastruktura synchronizace záložek, omnibox, metriky a hlášení o selhání. (Také JavaScript je tak zřídka úzkým hrdlem na mobilních zařízeních, že absence kompilátoru JITting má minimální dopad.)

Nestojí za to! Pokrytí testů "layoutTest" WebKit je obrovské. (28 000 testů při posledním počtu), a to nejen pro existující funkce, ale také pro všechny nalezené regrese. Ve skutečnosti, kdykoli se učíte nové nebo „tajné“ funkce DOM/CSS/HTML-5, testovací sady „layoutTest“ mají obvykle vynikající minimální demo.

Kromě toho se W3C snaží standardizovat testovací sadu. To znamená, že můžeme očekávat, že oba porty WebKit a všechny ostatní prohlížeče budou testovány se stejnými testovacími sadami, což nás povede k menšímu počtu vtipů a interoperabilnějšímu webu. Všem, kteří si dali námahu a zúčastnili se akce Test The Web Forward...děkujeme!

Přidejte značky

Zrovna nedávno jsem narazil na otázky s tagem "webkit". Takové otázky se obvykle týkají webových problémů souvisejících s CSS, jQuery, rozvrženími, problémy s kompatibilitou mezi různými prohlížeči atd.

Aktualizovat

Takže z dosavadních odpovědí... WebKit je vykreslovací engine HTML/CSS webového prohlížeče pro Safari/Chrome. Existují takové mechanismy pro IE/Operu/Firefox a jaké jsou rozdíly, výhody a nevýhody jejich použití? Mohu používat funkce WebKit například ve Firefoxu?

Aktualizace 2

Všechny hlavní prohlížeče používají různé vykreslovací motory. Myslím, že to je velký důvod, proč existuje tolik problémů s kompatibilitou mezi různými prohlížeči!

Existuje tedy nějaký projekt nebo pohyb pro standardní vykreslovací modul, který budou používat VŠECHNY prohlížeče? Vyřeší HTML5 problémy s kompatibilitou mezi různými prohlížeči?

Část 1. WebKit k záchraně

Celkově mají platformy iPhone a Android k dispozici více než 100 000 aplikací ke stažení z různých zdrojů. To se týká „nativních“ aplikací, tzn. aplikace, které jsou vyvinuty a sestaveny pomocí příslušné sady SDK a poté nainstalovány do mobilního zařízení. Takové „nativní“ aplikace umožňují efektivně implementovat technické možnosti mobilního zařízení, včetně podpory bezdrátových sítí, Bluetooth a datových úložišť, funkcí akcelerometru nebo kompasu a dalších technologických zázraků a inovací, díky kterým jsou mobilní zařízení pro uživatele tak atraktivní. Obliba „nativních“ aplikací pro platformy iPhone a Android je extrémně vysoká, ale navíc mobilní zařízení poskytují dostatek příležitostí pro vývoj webových aplikací Mobilní technologie dávno opustily dětství a s nimi i mobilní internet dozrál .

Tento článek je prvním ze dvoudílné série o vývoji aplikací prohlížeče pro iPhone a Android. Účelem této série je seznámit čtenáře se základními principy tvorby vlastních mobilních webových aplikací. Možnosti mobilních aplikací se neomezují pouze na provozování webu na mobilním zařízení. Podíváme se na základní technologie a přístupy používané při vývoji mobilních aplikací, které umožňují odlišit tento úsek vývoje softwaru do samostatné samostatné disciplíny.

Popularita webové platformy je vysvětlena skutečností, že její použití umožňuje řešit mnoho problémů, které byly tradičně prokletí vývojářů a systémových administrátorů. Mezi nimi:

• Problémy s instalací: Instalace webových aplikací je bezproblémová – stačí je nainstalovat nebo zkopírovat na server a sdělit svým klientům, na jakou adresu URL mají v prohlížeči odkazovat.
• Problémy se škálováním: Webové aplikace se snadno škálují na skupinu serverů ve vysoce výkonném datovém centru a k obsluze aplikací se používají hotové nástroje pro správu webových stránek.
• Problémy s archivací a obnovou dat: Webové aplikace využívají centralizované úložiště dat, čímž se zjednodušuje úloha obnovy v případě selhání.
• Úvahy o uživatelském rozhraní: Kombinace HTML, kaskádových stylů (CSS), JavaScriptu a grafiky vám umožňuje vytvořit bohaté uživatelské rozhraní, které je svou funkčností a vzhledem výrazně lepší než rozhraní vyvinutá pomocí nativních sad SDK. Ty zpravidla nejsou schopny poskytnout plnohodnotný prezenční efekt pro herní aplikace a nezaručují potřebnou funkčnost pro interaktivní informační terminály.
• Snadné použití: Většina aplikací vyžaduje prvky uživatelského rozhraní, které jsou jednoduché a snadno použitelné, což vám umožní snadno provádět každodenní operace.

Nejatraktivnějším aspektem modelu distribuce internetových aplikací je to, že umožňuje, aby se software stal jakousi předplatitelskou službou, oboustranně výhodným způsobem dodávání softwaru. "Jak?" – ptáte se. Podívejme se na tuto problematiku podrobněji.

Webový model distribuce softwaru umožňuje zákazníkům vyzkoušet si produkt před nákupem s minimálním rizikem a za minimální cenu. Pokud se klientovi zkušební verze líbila, pak jediné, co od něj k dalšímu používání softwarového produktu vyžaduje, je zaplatit nákup kreditní kartou (nebo pomocí PayPal). Model software jako služba (SaaS) navíc uživatelům poskytuje pohodlný a nákladově efektivní způsob nákupu softwaru bez jakýchkoli významných vstupních nákladů, což zajišťuje návratnost investice během prvního měsíce používání, nikoli ve vzdálené budoucnosti.

Faktem je, že na mobilních zařízeních prakticky neexistovala podpora webových prohlížečů. Situace se dramaticky změnila s příchodem technologie zvané WebKit, která sebevědomě zaujala své místo na poli mobilních zařízení díky iPhonu.

Za pouhých pár let se platforma iPhone stala webovým klientem číslo jedna na světě. Proč? Protože WebKit ve spojení se spolehlivým internetovým připojením umožnil používat webové služby na mobilních zařízeních mnohem efektivněji než na jakémkoli jiném moderním prohlížeči. Nové technologie si všimli i další hráči na trhu mobilních zařízení a celý trh lze nyní rozdělit na společnosti, které používají WebKit, společnosti, které se chystají používat WebKit, a společnosti, které si vymýšlejí výmluvy, aby WebKit nepoužívaly. .

Co je tedy WebKit?

WebKit je prohlížeč používaný k podpoře prohlížeče Mobile Safari na platformě iPhone i prohlížeče na platformě Android. WebKit se samozřejmě používá i v jiných mobilních zařízeních, ale pro účely tohoto článku se omezíme na platformy iPhone a Android.

WebKit je open source projekt, který pochází z vývoje K Desktop Environment (KDE). Moderní webové aplikace pro mobilní zařízení vděčí za svůj vznik projektu WebKit. Technologické a designové vlastnosti mobilního zařízení jistě hrají důležitou roli, ale mobilní uživatele zajímá především obsah. Pokud mobilní zařízení poskytuje přístup pouze k malé části internetového obsahu, je nepravděpodobné, že se dostane na první místo v seznamu nejoblíbenějších zařízení.

Většina z nás dává přednost životu naplňujícímu: pokud otevřeme webovou stránku na notebooku, zatímco sedíme doma, očekáváme, že stejný obsah uvidíme, když ji otevřeme ve vlaku. Obsah je hlavním problémem mobilních aplikací. Bez ohledu na to, kde jsme nebo co děláme, potřebujeme přístup k údajům, které nás zajímají. Technologie WebKit poskytuje bohatý obsah na platformách iPhone a Android.

Za zmínku stojí, že WebKit se používá také na stolních počítačích, jako je prohlížeč Safari, který je hlavním prohlížečem platformy Mac OS X Bez ohledu na to, zda se jedná o verzi pro stolní počítače nebo o jádro prohlížeče pro iPhone nebo Android, WebKit zůstává nejpokročilejší dostupnou technologii podporující HTML a CSS. WebKit ve skutečnosti podporuje styly CSS, které ještě prohlížeče na jiných enginech nevykreslují – například řadu vlastností definovaných specifikací HTML5.

HTML5 je sada předběžných technických specifikací, které definují technologie založené na prohlížeči, jako je ukládání dat na straně klienta s podporou SQL, přesuny, transformace a tak dále. Specifikace HTML5 je stále ve vývoji, ale jakmile budou základní principy jasně definovány a implementovány do prohlížečů na většině platforem, stanou se skromné ​​začátky webových aplikací minulostí. Vývoj webových aplikací bude zabírat významný segment odvětví vývoje softwaru a nemluvíme pouze o aplikacích pro desktopové prohlížeče, ale také pro mobilní prohlížeče. Mobilní aplikace se změní z vedlejšího produktu na hlavní produkt na trhu webových aplikací.

Pokud se rozhodnete ovládat technologie vývoje webu, máte k dispozici velmi omezený výběr nástrojů. Aplikaci lze nejprve vytvořit přímo na serveru jako soubor obsahující HTML, CSS a JavaScript kód. V tomto případě může být obsah HTML dodáván ve formě statických HTML souborů nebo může být generován dynamicky pomocí různých technologií, které fungují na straně serveru, například PHP, ASP.NET, Java Servlets atd. V každém případě, od bodu Pro účely tohoto článku se to všechno týká kódu HTML a nejdůležitějším bodem pro nás je, že technologie WebKit umožňuje prohlížečům vykreslovat HTML na mobilních zařízeních.

Chcete-li spustit webovou aplikaci na mobilním zařízení (iPhone nebo Android), musí uživatel spustit prohlížeč a zadat adresu URL příslušné služby, například: http://název vaší společnosti.com/url aplikace.

Rozsah navrhovaných mobilních webových aplikací je přitom poměrně široký: od standardního webu až po mobilní webovou aplikaci vyvinutou speciálně pro konkrétní mobilní platformu.

Engine WebKit v kombinaci s intuitivním a uživatelsky přívětivým uživatelským rozhraním platforem iPhone a Android vám umožňuje prohlížet téměř všechny webové stránky na vašem mobilním zařízení. Webové stránky se zobrazují zcela korektně, na rozdíl od předchozí generace mobilních prohlížečů, které náhodně přenášely fragmenty obsahu nebo je nezobrazovaly vůbec. Když jsou stránky načteny v prohlížeči s podporou WebKit, obsah stránky má tendenci se škálovat. Měřítko je v tomto případě zvoleno tak, aby se na obrazovku vešla celá stránka, i když ve značně zmenšené, často nečitelné podobě, jak je znázorněno na obrázku 1. Stránku je však možné posouvat, zvětšovat, přesouvat, což poskytuje pohodlný přístup k všechny prvky obsahu. Ve výchozím nastavení prohlížeč používá okno o šířce 980 pixelů.

Plné zobrazení webové stránky v okně prohlížeče sice představuje výrazné zlepšení oproti předchozí generaci prohlížečů, ale možnosti moderních mobilních technologií se neomezují pouze na toto.

Pokud chcete, aby vaše webová stránka byla přístupná nejen běžným uživatelům webu, ale také uživatelům mobilních zařízení, existuje několik dalších možností, jak optimalizovat mobilní webové aplikace.

Přestože WebKit umožňuje správné zobrazení webové stránky na obrazovce mobilního zařízení, existují určité rozdíly mezi zařízeními s myší, jako jsou notebooky nebo stolní počítače, a dotykovými zařízeními, jako jsou iPhone nebo smartphony Android. Dotyková zařízení se liší fyzickými rozměry „klikací“ oblasti, absencí funkce pro najetí kurzorem na jakýkoli prvek a jiným sledem událostí. Pokud tedy chcete vytvořit web, který je vhodný pro běžné i mobilní uživatele, musíte zvážit následující vlastnosti mobilních zařízení:

• Prohlížeče pro iPhone a Android jsou schopny vykreslit celou webovou stránku v poměrně čitelné podobě – kvalita vykreslování těchto prohlížečů je mnohem vyšší než u standardních mobilních prohlížečů – takže se zjednodušením návrhu webu nespěchejte.
• Velikost konečků prstů je výrazně větší než velikost ukazatele myši. Vezměte tento faktor v úvahu při vývoji prvků navigace na webu. Neumisťujte odkazy příliš blízko sebe, jinak uživatel nebude moci kliknout na jeden odkaz, aniž by zasáhl další.
• Prvky ukazatele myši nebudou fungovat na mobilních zařízeních. Uživatel prostě nemůže „ukázat“ prstem na jakýkoli prvek stejným způsobem jako kurzor myši.
• Události definované stisknutím a podržením tlačítka myši, tažením myši atd. jsou na dotykových obrazovkách implementovány jiným způsobem. Některé z těchto událostí mohou fungovat i na mobilních zařízeních, ale obecně byste neměli očekávat, že mobilní prohlížeč a prohlížeč na počítači budou provádět stejnou sekvenci akcí.

Podrobnou diskusi o těchto aspektech lze nalézt v článku " iPhone v akci“ (viz část). V našem článku se omezíme na zvážení výhod WebKitu, nikoli jeho nevýhod.

Podívejme se na nejzřetelnější problém, kterému uživatelé iPhone nebo Androidu čelí při přístupu na webové stránky: omezená velikost obrazovky. Ve skutečnosti je velikost obrazovky moderního mobilního zařízení 320x480 nebo 480x320 za předpokladu, že uživatel upřednostňuje zobrazení webového obsahu v konfiguraci na šířku. Jak můžete vidět na obrázku 1, WebKit je schopen správně zobrazit webovou stránku určenou pro standardní stolní počítače. Při změně měřítka webové stránky však může být text příliš malý na čtení, takže uživatel musí před čtením textu posouvat, posouvat a přibližovat. Jak se s tímto omezením vypořádat?

Nejjednodušší způsob, jak vytvořit stránku, která se zobrazuje stejně dobře v okně mobilního prohlížeče i v okně prohlížeče na počítači, je použít speciální metaznačku výřez.

Meta tag je HTML tag umístěný v záhlaví HTML dokumentu. Nejjednodušší příklad použití značky viewport vypadá takto: .

Přidáním této metaznačky na stránku HTML se její zobrazení v okně mobilního prohlížeče přizpůsobí nejoptimálnějším způsobem (viz obrázek 2). Prohlížeče, které nepodporují výřez, tuto značku jednoduše ignorují.

Chcete-li definovat konkrétní možnosti přiblížení, zadejte přesnou hodnotu atributu obsahu zobrazované oblasti: meta tag. Změnou hodnoty parametru počátečního měřítka lze obraz zmenšit nebo zvětšit. Pro platformy iPhone a Android je lepší používat hodnoty od 1,0 do 1,3. Metaznačka viewport také podporuje minimální a maximální přiblížení, což umožňuje omezit možnost uživatele upravovat přiblížení stránky při jejím načítání.

Zatímco designové vlastnosti iPhonu, zejména velikost displeje 320x480, se od jeho uvedení prakticky nezměnily, parametry zařízení na platformě Android mají poměrně široký záběr, protože mobilní zařízení na této platformě vyrábí různí výrobci a jsou určené pro širokou škálu skupin uživatelů. Pokud tedy chcete, aby byla vaše webová aplikace oblíbená u mobilních uživatelů, měli byste zvážit možné rozdíly ve velikostech obrazovky, rozlišení a konstrukčních funkcích zařízení Android.

Zkušenosti ukazují, že kromě konstrukčních rozdílů, které existují mezi různými mobilními zařízeními Android, se software Android sám pokouší nastavit nastavení načtené webové stránky v závislosti na vlastnostech prohlížeče mobilního zařízení. Kromě stability má platforma Android neustále se měnící sadu funkcí a schopností. Nastavení vašeho konkrétního zařízení Android se pravděpodobně bude lišit od vašeho vývojového prostředí v závislosti na verzi SDK a výrobci zařízení. Obrázek 4 ukazuje obrazovku nastavení prohlížeče ve verzi 1.6 Android Emulator. Nastavení obrazovky poskytuje uživateli možnost určit úroveň měřítka obrazu na obrazovce (daleko, blízko, střední) nebo zvolit režim automatického měřítka stránky.

Ve světě mobilních zařízení je nejstálejší změna, takže je třeba brát v úvahu vývoj a obnovu trhu s mobilním softwarem. Například nastavení prohlížeče Sprint Hero obsahuje sadu možností, které se zcela liší od standardních nastavení používaných při načítání webové stránky. Prohlížeč Hero je postaven na platformě Android V1.5 s využitím řady úprav od HTC. Naštěstí použití metaznačky viewport ignoruje specifická nastavení Hero.

Zatím jsme viděli, že WebKit je docela schopný načíst webovou stránku, i když ve značně zmenšené a těžko čitelné podobě. Poté jsme rozšířili kontrolu nad tím, jak se stránka zobrazuje na obrazovce mobilního zařízení, pomocí metaznačky viewport. Zobrazená stránka je nyní mnohem snazší číst a orientovat se v ní. Ale to stále nestačí k tomu, aby naše stránka vypadala a fungovala jako webová aplikace.

Pojďme se zamyslet nad konstrukčními prvky webové stránky určené pro mobilní publikum. Jako konkrétní příklad zvažte registrační stránku pro e-mailovou službu Google GMail.

Takto vypadá stránka v okně prohlížeče na počítači:

Okno prohlížeče na ploše zobrazuje informační obsah na levé straně a samotné registrační okno je v pravém panelu. V okně mobilního prohlížeče má stejná stránka úplně jiný vzhled.

Stránka zobrazená na obrázku 6 je rozhodně určena pro mobilní uživatele. Na obrazovce se zobrazují pouze ty prvky stránky, které uživatel potřebuje pro další práci – není potřeba žádné další posouvání, posouvání nebo zoomování.

Nyní se podíváme na okno zobrazení e-mailu mobilní verze Gmailu. Protože prostor na obrazovce dostupný pro aplikaci je velmi omezený, má prohlížeč zpráv další tlačítka a navigační prvky. V tomto případě zobrazené navigační prvky překrývají okno pro prohlížení zpráv. Pokud se tomu můžete vyhnout, nepoužívejte příliš mnoho snímků nebo rolovacích prvků. Mobilní verze Gmailu tento problém řeší pomocí vyskakovací nabídky, která se zobrazí, jakmile uživatel dokončí rolování stránky. Vyskakovací nabídka obsahuje 3 tlačítka: Archivovat, Smazat a Další. Po klepnutí na tlačítko Více se zobrazí další položky nabídky (viz obrázek 7).

Toto je skutečně aplikace určená pro mobilní zařízení.

Je třeba si uvědomit, že nechceme záměrně ochuzovat design a snižovat zážitek mobilních uživatelů, kteří vyvinuli multifunkční prohlížeče pro platformy iPhone a Android. Z tohoto pohledu je užitečné věnovat pozornost prvku zobrazenému ve spodní části stránky Gmailu (viz obrázek 8):

Pokud uživatel preferuje rozšířenou funkčnost desktopové verze, dejte mu možnost stáhnout si příslušnou verzi stránky.

Nyní zvažte případ, kdy chcete vytvořit aplikaci, která využívá webové technologie, ale vypadá jako nativní mobilní aplikace.

Dalším krokem je vývoj obsahu specifického pro konkrétní mobilní platformu. Toto definuje formát stránky a rozhraní, takže výsledná stránka vypadá jako nativní aplikace pro konkrétní platformu, nikoli jako standardní veřejný web. Co rozumíme pod pojmem "nativní" aplikace?

Než se ponoříme do diskuze o tom, jak vytvořit webovou aplikaci co nejpodobnější nativní aplikaci pro konkrétní platformu, nechme stranou společné funkce prohlížečů iPhone a Android a krátce se dotkneme vizuálních rozdílů, které mezi těmito platformami existují. .

Aplikace pro iPhone mají svůj specifický vzhled a rozhraní. Ukažte někomu snímek obrazovky iPhonu, a pokud zrovna nedávno nespadl z Měsíce, téměř jistě okamžitě řekne, že je to iPhone. Ukažte stejné osobě snímek obrazovky mobilního zařízení Android a odpověď už nebude tak jasná. jaký je důvod? Existuje několik možných vysvětlení. Za prvé, iPhone se objevil na trhu mnohem dříve než zařízení s Androidem a dokázal si získat obrovské množství fanoušků. Přemýšlejte o lidech, kteří stojí ve frontě, aby zaplatili nejvyšší dolar za omezené funkce V1 iPhone. Ať už se vám iPhone líbí nebo ne, tento produkt Apple je v současné době lídrem na trhu. A co Android?

Platforma Android je relativně nový produkt a v mnoha ohledech působí jako protiklad k iPhonu, jelikož je určena především pro otevřenou komunitu. Platforma Android se používá v celé řadě zařízení (telefony a další domácí spotřebiče). Pro jednoduchost diskuze se v tomto článku omezíme na použití Androidu v mobilních telefonech.

Postupem času počet zařízení s Androidem na světě překoná počet iPhonů. Je to proto, že zařízení Android vyrábí různé společnosti a budou podporovány širokou škálou datových sítí. Při tak významném počtu hráčů na trhu mobilních zařízení Android bychom určitě měli očekávat určitou fragmentaci trhu na základě vzhledu a parametrů zařízení. Tento trend je vidět na rozhraní SenseUI od HTC. Tento atraktivní vzhled a dojem není podporován základní sadou Android SDK a není kompatibilní s jinými zařízeními Android. Motorola, Google a Verizon spojily své síly, aby vyvinuly nové zařízení DROID založené na Androidu. Jedná se o první komerční produkt na platformě Android 2.0.

Porovnejte různé systémy Android s konzistentním vzhledem a chováním iPhonu. iPhone je obzvláště cenným majetkem společnosti Apple. Vzhled aplikací pro iPhone se může v průběhu času mírně změnit, ale tyto drobné změny se pravděpodobně nevyrovnají různým verzím systémů Android, kterých je mnoho i nyní, kdy je platforma ve velmi raných dobách.

Co je tedy potřeba udělat, aby se vzhled a rozhraní aplikace co nejvíce přiblížily „nativním“ programům?

Pokud bychom této výzvě čelili před příchodem Webu 2.0, byl by to skutečně vážný problém. První pokusy o podporu více klientských prohlížečů (mobilních a stolních počítačů) se spoléhaly na několik přístupů, například:

• Vývoj zcela paralelních stránek
• Generování dynamického obsahu v závislosti na parametru userAgent
• Používání proxy serverů, které by mohly transformovat obsah v závislosti na každém konkrétním zařízení. Podobnou technologii úspěšně použila společnost RIM k poskytování přístupu k e-mailu z mobilního zařízení klienta.

Takové přístupy mohou být docela přijatelné v případech, kdy vývoj provádějí velké, dobře financované týmy. Co by měl dělat zbytek světa? Ne každý má značné finanční zdroje, vysoce kvalifikované specialisty a neomezený čas na implementaci takových strategií. Kromě toho, jak jsme již poznamenali, mobilní internet předchozí generace prohlížečů nelze nazvat pohodlným nebo oblíbeným, takže v žádném případě byste se neměli zabývat zastaralými metodami a přístupy.

Naštěstí to nebudeme muset dělat. V éře WebKitu a CSS lze rozdíly ve vzhledu a rozhraní různých mobilních zařízení překonat pomocí šablon stylů a mediálních dotazů, které umožňují použití různých stylů v závislosti na konkrétním typu zařízení. Technologie dotazů na média umožňuje získat informace o klientovi. Prohlížeč tradičně posílá serveru hodnotu userAgent, která serveru umožňuje identifikovat konkrétní prohlížeč a určit obsah, který by měl být odeslán klientovi. Pomocí dotazu na média si prohlížeč vybere styl stránky na základě svých možností. Následující příklad ukazuje výběr šablony stylů navržené pro chytré telefony: . A tento dotaz definuje šablonu stylů plochy: .

V době psaní tohoto článku zaujímal Internet Explorer V6 přibližně 20–30 % celkového trhu prohlížečů, nicméně diskuse o možnostech IE V6 je nad rámec tohoto článku.

Více informací o dotazech na média naleznete v návrhu specifikace (viz sekce).

Podívejme se na příklad použití dotazů na média k vývoji aplikace, která zobrazuje stav síťových serverů.

Účelem této aplikace je sledovat provoz několika serverů. Nezávislí vývojáři softwaru často potřebují podporovat více aplikací na více serverech. Pokud se vývojem softwaru zabýváte delší dobu, pravděpodobně jste se již setkali s různými typy serverů a různými typy aplikací. To vše znamená, že je dost možné, že nebudete moci pomocí jediného nástroje sledovat výkon všech potřebných aplikací. V tomto případě má smysl použít aplikaci pro monitorování mobilní sítě (netmon). Aplikace poskytuje všechny požadované funkce, přičemž zůstává flexibilní a snadno přístupná z mobilního zařízení.

Aplikace netmon obsahuje seznam serverů, které je třeba monitorovat. Pro každý server se shromažďují klíčové ukazatele výkonu (KPI). Klíčové ukazatele výkonnosti jsou primárním nástrojem, který studenti MBA používají již léta k posouzení současného stavu podniku. Z pohledu hostování webových aplikací lze jako KPI použít následující indikátory:

• Počet transakcí za poslední časové období
  • Objednávky
  • Žádosti o katalogy
  • e-maily
  • Počet zobrazení stránky
• Čas, který uplynul od poslední transakce
  • Objednávka
  • Elektronická výměna dat
  • Zprávy od obchodního partnera
  • Nahrání souboru od dodavatele přes FTP
• Je databáze dostupná?
• Datum poslední zálohy
• Průměrná částka objednávky (v dolarech)
• Množství volného místa na disku
• Šířka pásma za poslední hodinu, den, měsíc

Výše uvedené indikátory a další podobné provozní parametry umožňují posoudit stav konkrétního systému nebo aplikace. Například během prázdnin sledujeme počet objednávek zadaných na některých našich stránkách. Pokud data nevykazují stabilní nárůst počtu objednávek každou hodinu, provádíme podrobnější analýzu situace.

Protože každá aplikace má své vlastní požadavky a zdroje, musí být netmon dostatečně flexibilní, aby vyhovoval potřebám každé aplikace. Abychom zajistili tuto úroveň flexibility, začneme definováním nejobecnější datové struktury, která zohlední stavové parametry každého systému. V části 2 se blíže podíváme na to, odkud tato data pocházejí a jak jsou aktualizována. Prozatím se omezíme na následující informace:

• Název webu
• Adresa URL webu (domovská stránka)
• URL pro získání aktualizací
• Stav: OK nebo ne
• Rychlé shrnutí: Popis stavu serveru, který bude buď v pořádku, nebo bude obsahovat textový řetězec označující nejzávažnější problém pro daný server
• Prvky: Toto je sada párů název/hodnota, které budeme potřebovat k předání aktuálních hodnot KPI pro odpovídající web.

Naše aplikace zobrazí výsledné ukazatele výkonu ve formátu se snadnou navigací a plně využije CSS, jQuery a WebKit, aby upozornila uživatele na problémové oblasti. Jak jsme již uvedli, hlavním cílem při vývoji této aplikace je možnost provozovat ji na iPhone, platformě Android a na stolním počítači v prohlížeči Safari.

Moderní webové stránky musí být vytvořeny v deklarativní formě, která definuje organizační strukturu a obsah stránky. Umístění a formátování stránky se provádí pomocí kaskádových stylů (CSS) a ve většině případů pomocí JavaScriptu. Ve skutečnosti se JavaScriptové knihovny staly tak populární, že jejich použití je dnes spíše pravidlem než výjimkou. V aplikaci probírané v tomto článku použijeme oblíbenou JavaScriptovou knihovnu jQuery. Naše aplikace poběží na platformách iPhone, Android a desktop. Bude použit stejný HTML kód a všechny nezbytné rozdíly budou implementovány do stylů. Zde je třeba poznamenat, že jsme vědomě nevložili žádné významné úsilí do návrhu atraktivního vzhledu aplikace. Kromě toho byly jako pozadí záměrně zvoleny nápadné barvy, které spolu neladí, aby přitáhly další čtenářskou pozornost k uspořádání stylů. V části 2 mírně vylepšíme vzhled aplikace, ale prozatím HTML kód vypadá jako ten, který je uveden ve výpisu 1.

Rychlý pohled na navrhovaný kód HTML odhalí následující hlavní funkce:

• Kód používá dva externí soubory JavaScriptu: jeden soubor knihovny jQuery a jeden pomocný soubor pro naši aplikaci.
• Kód používá metaznačku viewport ke změně velikosti zobrazeného obsahu.
• Hlavní šablona stylů je definována souborem netmon.css.
• Parametr userAgent se používá k definování pomocné šablony stylů. V závislosti na jeho hodnotě se šablona stylů načte pro iPhone, Android nebo stolní prohlížeč.
• Proces načítání stránky používá k zobrazení dat jQuery a pomocnou funkci definovanou v souboru netmon.js.
• Kód hlavní stránky používá několik značek div.
• Nakonec kód obsahuje odkaz na stránku, která zobrazuje řetězec userAgent. Tento odkaz nemá nic společného s provozem aplikace a slouží pouze pro demonstrační účely.

Než se pustíme do detailů stylů a souboru netmon.js, které vlastně definují základní fungování aplikace, podívejme se na naši aplikaci v jejím aktuálním stavu. Znovu si prosím všimněte, že používáme tři různé šablony stylů: jednu pro každou ze tří podporovaných platforem. Aby byl proces vývoje aplikace vizuálnější, každá tabulka definuje svou vlastní barvu pozadí. Na obrázku 9 je naše stránka otevřená v prohlížeči Desktop Safari a má modré pozadí.

Obrázek 11 ukazuje vzhled aplikace v okně prohlížeče iPhone (barva pozadí je zelená).

Hlavní šablona stylů uložená v souboru netmon.js je uvedena ve výpisu 2.

Použití jiné šablony stylů pro každou platformu vám umožní dosáhnout následujících úkolů:

Výpis 3 zobrazuje kód pro soubor iphone.css.

Jak vidíme, barva pozadí značky těla je zelená (#00ff00) a velikost písma je upravena tak, aby bylo snazší číst na obrazovce mobilního zařízení. Nakonec se podívejme na soubor netmon.js, který definuje seznam serverů a funkci, která tiskne data každého serveru (používá se ve výpisu 4). Část kódu souboru byla pro stručnost vynechána, jeho plné znění je k dispozici v sekci ).

Pokud stavový řádek libovolného serveru není v pořádku, pak se odpovídající záznam serveru zobrazí červeně, jak je vidět z definice třídy v souboru CSS. Pokud navíc kontrola stavu serveru odhalí nějaké problémy (stav není v pořádku), zobrazí se dodatečně stručný popis problému. Obrázky 9-11 ukazují, že serveru 4 dochází volné místo na disku. Po kliknutí na řádek tohoto serveru se na obrazovce zobrazí podrobná zpráva o problému (viz obrázek 12).

Kliknutím na odkaz zobrazit vpravo od názvu serveru se otevře domovská stránka tohoto serveru. Mít takový odkaz je velmi výhodné ze dvou důvodů: za prvé vás to ušetří nepříjemné nutnosti zapamatovat si URL každého serveru a za druhé vás to ušetří ještě nepříjemnější nutnosti zadávat tuto adresu URL z klávesnice vaše mobilní zařízení (i to nejpohodlnější).

Pokud se nám tedy podaří úspěšně spustit netmon na mobilním zařízení, neměla by údržba serverů způsobovat žádné problémy.

Tento článek představuje principy vývoje webových aplikací pro iPhone a Android pomocí technologie WebKit. V části 2 rozšíříme možnosti naší aplikace přidáním funkce aktualizace dat pomocí volání Ajax.

Prohlížeč je speciální program, který pracuje s webovými stránkami. Zpracuje HTML stránku staženou z internetu a převede její kód na prezentaci, kterou znají uživatelé. Motory internetových prohlížečů se používají v samotných prohlížečích i v e-mailových klientech. Ne každý webový prohlížeč je postaven na vlastní jedinečné platformě. Mnoho z nich využívá oblíbená a léty prověřená řešení.

Tento článek zkoumá, jaké platformy existují pro vytváření prohlížečů a jak se od sebe liší.

• Používání vykreslovacích modulů k vytváření prohlížečů má mnoho výhod:
• Usnadňuje nalezení a opravu chyb kódu.
• Pohodlná příležitost vylepšit jednu komponentu v několika programech najednou.
• Proces změny grafického rozhraní aplikace je zjednodušen.

Snadné vytváření nových programů, které budou vyhovovat přáním konkrétního vývojáře nebo potřebám konkrétního uživatele.

Taková řešení se velmi často používají v programování: při vytváření videoher, operačních systémů pro složité programy a tak dále. Někteří specialisté pracují na vylepšení a optimalizaci motoru, zavádějí do něj nové vlastnosti a užitečné funkce. Jiní se zabývají tvorbou programů sami na základě vyvinuté platformy.

Pozoruhodným příkladem je engine Trident od Microsoftu. Pouze se používá v široké škále aplikací této společnosti. Jak se nadace vyvíjí, rozvíjejí se i odvozené projekty.

Trojzubec

Když si uživatel nainstaluje nový operační systém Windows, prvním webovým prohlížečem, se kterým se setká, je Internet Explorer. Jeho motor je proto v recenzi zvažován jako první.

Trident neboli MSHTML je poměrně stará softwarová součást vyvinutá společností Microsoft pro její potřeby. Projekt se neustále vyvíjí od roku 1997. Používá se ve webovém prohlížeči Microsoft - Internet Explorer, poštovní klient Outlook, Windows Explorer (program pro práci se soubory) a mnoho dalších aplikací od tohoto vývojáře.

S vydáním Windows 10 se platforma Trident vyvinula do EdgeHTML Vývojáři vzali za základ zastaralý neúspěšný engine a vytvořili nový, který splňuje všechny požadavky moderních uživatelů. Soudě podle benchmarků (softwarový test výkonu a rychlosti) Microsoft Edge (prohlížeč vytvořený na základě EdgeHTML) dohnal a dokonce předčil oblíbené programy používané k vytvoření prohlížečů Google Chrome a Mozilla Firefox.

Gecko je engine používaný v populárním internetovém prohlížeči Mozilla Firefox a mnoha dalších programech. Zdrojový kód programu je volně dostupný, to znamená, že každý si může vytvořit svůj vlastní prohlížeč nebo e-mailový klient založený na Gecko zcela zdarma.

Další výhodou Geko je multiplatformní. Funguje na velké většině moderních operačních systémů: jak pro osobní počítače, tak pro mobilní zařízení (na rozdíl od Internet Exploreru, který funguje pouze na OS Windows).

Gecko podporuje všechny moderní standardy a technologie používané k tvorbě webových stránek. Je to jedna ze dvou nejpopulárnějších platforem prohlížeče. Podporuje připojení pluginů. Benchmarky a osobní zkušenosti uživatelů ukazují, že prohlížeče založené na tomto enginu spotřebovávají nejmenší množství prostředků osobního počítače a spolehlivě pracují s velkým počtem karet (například několik stovek).

Na základě Geko vznikl populární internetový prohlížeč Mozilla Firefox, e-mailový klient Thunderbird, plánovač úloh Sunbird a anonymní webový prohlížeč s vestavěnou podporou technologií Tor VPN.

Málo známá platforma používaná k vytvoření Konqueroru, správce souborů KDE. Pro uživatele, kteří nejsou obeznámeni s operačními systémy rodiny Linux, je zajímavé, že na základě tohoto projektu vznikl nejpopulárnější engine na světě, o kterém bude řeč dále.

Tento engine byl vyvinut světoznámou společností Apple na základě výše uvedeného řešení - KHTML. Tento projekt, vydaný v roce 2001, prošel obrovským vývojem a stal se jedním z nejpoužívanějších na světě.

Na základě WebKitu vznikl webový prohlížeč Safari, standardně používaný v iOS zařízeních a lídr v oblíbenosti mezi prohlížeči – Google Chrome. Na WebKitu je založeno převážné množství moderních programů pro zpracování obsahu webových stránek. Kromě toho se používá v oblíbené aplikaci Steam, určené pro digitální distribuci počítačových her od Valve.

Podobně jako Gecko je WebKit multiplatformní a funguje perfektně na všech populárních platformách. Vykazuje vysokou stabilitu a výkon. Pro jeho enormní oblibu je naprostá většina rozšíření vyvíjena právě pro toto řešení. Používá se také v oblíbených mobilních platformách, jako je Android a iOS. Je to bezplatný engine, což znamená, že jej může kdokoli zdarma používat k vytváření vlastních aplikací.

V roce 2013 se od WebKitu oddělila nová pobočka vlastněná společností Google, Blink. Tento projekt tvořil základ Chrome verze 28 (a všech následujících verzí), stejně jako jeho open source bratr, Chromium. Chromium byl použit k vytvoření populárního prohlížeče Yandex v Rusku. Od verze 15 přešel na Blink také prohlížeč Opera.

Prohlížeč Presto, vytvořený v roce 2003, byl použit jako základ pro Opera. Vyvíjen více než 10 let. V roce 2013 se vývojáři Opery rozhodli opustit používání Presta ve prospěch výkonnějšího a populárnějšího Blink od Google. V tuto chvíli je vývoj projektu zastaven.

Byl článek užitečný?