Što je WebKit i kakav je odnos prema CSS-u? Motori web preglednika - što su i što su dobro, gdje smo došli?

• Prijevod

Za mnoge od nas programera WebKit je crna kutija. Nabacimo HTML, CSS, JS i gomilu slika, a WebKit nam, nekako... magično, daje web stranicu koja izgleda i radi dobro.
Ali u stvarnosti, kako kaže moj kolega Ilya Grigorik :

• Što je WebKit?
• Što WebKit nije?
• Kako WebKit preglednici koriste?
• Zašto mnogi WebKitovi nisu isti?

• Raščlanjivanje (Raščlanjivanje HTML, XML, CSS, Javascript)
• Izgled
• Prikaz teksta i grafike
• Dekodiranje slike
• Interakcije s GPU-om
• Pristup mreži
• Hardversko ubrzanje

Svaki WebKit “priključak” drugačije implementira preostale komponente. Hajdemo shvatiti što ovo znači.

Postoji mnogo WebKit "priključaka" i ja pružam Ariya Hidayat, WebKit hacker i tehničar. Direktor Sencha ima pravo govoriti o ovome:

Kao što sam već spomenuo, CoreGraphics koji se koristi jedinstven je za svaki WebKit priključak. Chrome za Mac, na primjer, koristi Skia.

• Safari
  - Safari za OS X i Safari za Windows dva su različita priključka
  - WebKit nightly build je build "porta" izvornog koda za Mac koji se koristi za Safari, samo noviji
• Mobilni Safari
  - Razvijen u privatnoj podružnici, ali je kasnije otvoren.
  - Chrome za iOS (koristi Appleov WebView; više o razlici kasnije)
• Chrome (Chromium)
  - Chrome za Android (izravno koristi "priključak" Chromiuma)
  - Chromium je također osnova za preglednike: Yandex, Sogou, a uskoro i Opera.
• Android preglednik
  - Koristi najnoviji WebKit izvorni kod dostupan u trenutku izdavanja.
• Još više portova: Amazon Silk, Dolphin, Blackberry, QtWebKit, WebKitGTK+, The EFL port (Tizen), wxWebKit, WebKitWinCE, itd

Prvo, pogledajmo zajedničke značajke koje se koriste u svim WebKit preglednicima:

Znate da je smiješno, nekoliko puta sam pokušao napisati ovaj paragraf. I svaki put su me članovi Chrome tima ispravili, kao što ćete vidjeti...

Dakle, teško je.

Pokušajmo sada sažeti što je zajedničko svijetu WebKita...

• DOM, prozor, dokument
  više ili manje
• CSSOM
• CSS raščlanjivanje, svojstvo/vrijednost
  razlike u prefiksima proizvođača
• Raščlanjivanje HTML-a i izgradnja DOM-a
  Isto je i ako zaboravimo na Web komponente.
• Izgled i pozicioniranje
  Flexbox, Floats, kontekst blok formatiranja... sve je uobičajeno
• Alati za korisničko sučelje i alati za razvojne programere, kao što su Chrome DevTools ili WebKit inspector.
  Iako od prošlog travnja, Safari koristi vlastiti Safari Inspector, koji nije WebKit, zatvoreni kod.
• Značajke kao što su contenteditable, pushState, File API, većina SVG, CSS transformacija matematike, Web Audio API, localStorage
  Iako implementacija može varirati. Svaki priključak može koristiti vlastiti sustav pohrane za localStorage i može koristiti različit audio API za Web Audio API.

• Sve vezano za GPU
  - 3D transformacija
  - WebGL
  - Video dekodiranje
• Renderiranje 2D na zaslon
  - Anti-aliasing tehnologije
  - Renderiranje SVG i CSS gradijenata
• Prikaz teksta i rastavljanje crtica
• Mrežne tehnologije (SPDY, predrenderiranje, WebSocket prijenos)
• JavaScript mehanizam
  - JavaScriptCore motor nalazi se u WebKit repozitoriju. Ali u WebKitu postoje vezanja i za njega i za V8.
• Prikaz elemenata obrasca
• Ponašanje video i audio oznaka i podrška za kodek
• Dekodiranje slike
• Navigacija natrag/naprijed
  - Dio pushState()
• SSL značajke kao što su Strict Transport Security i Public Key Pins

Ili da idemo u više detalja, nedavno dodana značajka: CSS.supports() je omogućen za sve portove osim win i wincairo, koji nemaju omogućene css3 uvjetne značajke.

Sada dolazi tehničko... vrijeme da postanemo pedantni. Čak ni ono što je gore rečeno nije sasvim točno. Ovo je zapravo WebCore, generička komponenta. WebCore je biblioteka izgleda, renderiranja i DOM-a za HTML i SVG, i to je u osnovi ono na što ljudi pomisle kada kažu WebKit. Doista, "WebKit" je tehnički sloj povezivanja između WebCorea i "portova", iako je u normalnom razgovoru ta razlika uglavnom nevažna.

Dijagram bi trebao pomoći:

Mnoge komponente WebKita mogu se mijenjati (prikazano sivom bojom).

Na primjer, JavaScript mehanizam WebKita, JavaScriptCore, zadani je mehanizam u WebKitu. Izvorno se temelji na KJS-u (iz KDE-a) iz dana kada je WebKit započeo kao fork KHTML-a. U isto vrijeme, Chromium port se prebacuje na V8 motor i koristi jedinstvena DOM povezivanja.

Fontovi i prikaz teksta vrlo su veliki dio platforme. Postoje 2 odvojena puta za tekst u WebKitu: Quick i Hard. Oba zahtijevaju podršku specifičnu za platformu (implementiranu na port strani), ali Fast samo treba znati kako blitirati glifove (koje WebKit sprema u predmemoriju za platformu), dok Complex preuzima renderiranje niza u potpunosti na razinu platforme i samo kaže "nacrtaj ovo , molim."

Proširimo sada pregled i pogledajmo nekoliko portova i nekoliko podsustava. Ispod je pet WebKit priključaka, imajte na umu kako se skup alata za svaki razlikuje unatoč zajedničkim komponentama:

* Bilješka o pregledniku Chrome za iOS. Koristi UIWebView, kao što vjerojatno znate. Prema mogućnostima UIWebViewa, to znači da može koristiti samo isti mehanizam za renderiranje kao Mobile Safari, JavaScriptCore (ne V8) i model s jednom niti. Međutim, neki su kodovi posuđeni od Chromiuma, poput mrežnog podsustava, infrastrukture za sinkronizaciju knjižnih oznaka, višenamjenskog okvira, metrike i izvješća o padu programa. (Također, JavaScript je tako rijetko usko grlo na mobilnim uređajima da nedostatak JITting kompajlera ima minimalan utjecaj.)

Ne isplati se! WebKit pokriva "layoutTest" testove je golema. (28 000 testova prema zadnjem brojanju), i to ne samo za postojeće funkcije, već i za sve pronađene regresije. Zapravo, kad god učite nove ili "tajne" DOM/CSS/HTML-5 značajke, paketi testova "layoutTest" obično imaju odličan minimalni demo.

Osim toga, W3C ulaže napore da standardizira paket testova. To znači da možemo očekivati ​​da će i WebKit priključci i svi ostali preglednici biti testirani s istim paketima testova, što će nas dovesti do manje nedoumica i interoperabilnijeg weba. Svima onima koji su se potrudili prisustvujući događaju Test The Web Forward...hvala!

Dodajte oznake

Nedavno sam naišao na pitanja s oznakom "webkit". Takva su pitanja obično povezana s problemima s webom koji se odnose na CSS, jQuery, izglede, probleme kompatibilnosti s više preglednika itd.

Ažurirati

Dakle, iz dosadašnjih odgovora... WebKit je HTML/CSS motor za renderiranje web preglednika za Safari/Chrome. Postoje li takvi mehanizmi za IE/Operu/Firefox i koje su razlike, prednosti i mane korištenja jednog nad drugim? Mogu li, na primjer, koristiti WebKit značajke u Firefoxu?

Ažuriranje 2

Svi glavni preglednici koriste različite mehanizme za prikazivanje. Mislim da je to veliki razlog zašto postoji toliko problema s kompatibilnošću različitih preglednika!

Dakle, postoji li neki projekt ili pokret za standardni mehanizam za prikazivanje koji će koristiti SVI preglednici? Hoće li HTML5 riješiti probleme kompatibilnosti s više preglednika?

Dio 1. WebKit u pomoć

Ukupno, iPhone i Android platforme imaju više od 100.000 aplikacija dostupnih za preuzimanje iz raznih izvora. Ovo se odnosi na "nativne" aplikacije, tj. aplikacije koje se razvijaju i sastavljaju pomoću odgovarajućeg SDK-a, a zatim instaliraju na mobilni uređaj. Takve "native" aplikacije učinkovito ostvaruju tehničke mogućnosti mobilnog uređaja, uključujući podršku za bežične mreže, Bluetooth i pohranu podataka, funkcije akcelerometra ili kompasa i druga tehnološka čuda i inovacije koje mobilne uređaje čine tako privlačnim korisnicima. Popularnost “nativnih” aplikacija za iPhone i Android platforme je izuzetno velika, ali osim toga, mobilni uređaji pružaju široke mogućnosti za razvoj web aplikacija. Mobilne tehnologije su odavno izašle iz djetinjstva, a s njima je i mobilni Internet dosegao određenu zrelost .

Ovaj je članak prvi u dvodijelnoj seriji o razvoju aplikacija preglednika za iPhone i Android. Svrha ove serije je upoznati čitatelja s osnovnim principima izrade vlastitih mobilnih web aplikacija. Mogućnosti mobilnih aplikacija nisu ograničene na pokretanje web stranice na mobilnom uređaju. Osvrnut ćemo se na osnovne tehnologije i pristupe koji se koriste u razvoju mobilnih aplikacija, a koji omogućuju izdvajanje ovog dijela razvoja softvera u zasebnu samostalnu disciplinu.

Popularnost web platforme objašnjava se činjenicom da njezino korištenje omogućuje rješavanje mnogih problema koji su tradicionalno bili prokletstvo programera i administratora sustava. Među njima:

• Problemi s instalacijom: Instaliranje web aplikacija je jednostavno - samo ih instalirajte ili kopirajte na poslužitelj i recite svojim klijentima na koji URL da usmjere u pregledniku.
• Problemi sa skaliranjem: Web aplikacije se lako skaliraju na grupu poslužitelja u podatkovnom centru visokih performansi, a za posluživanje aplikacija koriste se gotovi alati za upravljanje web stranicama.
• Problemi s arhiviranjem i oporavkom podataka: Web aplikacije koriste centraliziranu pohranu podataka, čime se pojednostavljuje zadatak oporavka u slučaju kvarova.
• Razmatranja korisničkog sučelja: Kombinacija HTML-a, kaskadnih stilskih tablica (CSS), JavaScripta i grafike omogućuje vam stvaranje bogatog korisničkog sučelja koje je znatno superiornije u funkcionalnosti i izgledu u odnosu na sučelja razvijena pomoću izvornih SDK-ova. Potonji, u pravilu, nisu u mogućnosti pružiti potpuni učinak prisutnosti za aplikacije za igre i ne jamče potrebnu funkcionalnost za interaktivne informacijske terminale.
• Jednostavnost korištenja: Većina aplikacija zahtijeva elemente korisničkog sučelja koji su jednostavni i laki za korištenje, što vam omogućuje jednostavno obavljanje svakodnevnih operacija.

Najprivlačniji aspekt modela distribucije internetskih aplikacija je taj što omogućuje softveru da postane vrsta usluge pretplate, obostrano koristan način isporuke softvera. "Kako?" – pitate. Pogledajmo ovo pitanje detaljnije.

Model distribucije softvera temeljen na webu omogućuje korisnicima da isprobaju proizvod prije kupnje uz minimalan rizik i po minimalnoj cijeni. Ako se klijentu svidjela probna verzija, sve što je potrebno od njega za daljnje korištenje softverskog proizvoda je platiti kupnju kreditnom karticom (ili korištenjem PayPala). Štoviše, model softvera kao usluge (SaaS) korisnicima pruža prikladan i isplativ način kupnje softvera bez značajnih početnih troškova, osiguravajući povrat ulaganja unutar prvog mjeseca korištenja, a ne u dalekoj budućnosti.

Činjenica je da praktički nije bilo podrške za web preglednike na mobilnim uređajima. Situacija se dramatično promijenila dolaskom tehnologije pod nazivom WebKit, koja je zahvaljujući iPhoneu pouzdano zauzela svoje mjesto na polju mobilnih uređaja.

U samo nekoliko godina, iPhone platforma je postala broj jedan web klijent u svijetu. Zašto? Zato što je WebKit, zajedno s pouzdanom internetskom vezom, omogućio korištenje web usluga na mobilnim uređajima mnogo učinkovitije nego na bilo kojem drugom modernom pregledniku. I drugi igrači na tržištu mobilnih uređaja primijetili su novu tehnologiju, a cijelo se tržište sada može podijeliti na tvrtke koje koriste WebKit, tvrtke koje će koristiti WebKit i tvrtke koje izmišljaju izgovore da ne koriste WebKit .

Dakle, što je WebKit?

WebKit je mehanizam preglednika koji se koristi za podršku pregledniku Mobile Safari na platformi iPhone i pregledniku na platformi Android. Naravno, WebKit se koristi u drugim mobilnim uređajima, ali za potrebe ovog članka ograničit ćemo se na razmatranje iPhone i Android platformi.

WebKit je projekt otvorenog koda koji potječe iz razvoja K Desktop Environment (KDE). Moderne web aplikacije za mobilne uređaje svoje rođenje duguju projektu WebKit. Tehnološke i dizajnerske karakteristike mobilnog uređaja svakako igraju važnu ulogu, ali mobilne korisnike prvenstveno zanima sadržaj. Ako mobilni uređaj omogućuje pristup samo malom dijelu internetskog sadržaja, malo je vjerojatno da će doći na top listu najpopularnijih uređaja.

Većina nas preferira živjeti ispunjen život: ako otvorimo web stranicu na prijenosnom računalu dok sjedimo kod kuće, očekujemo da ćemo vidjeti isti sadržaj kada otvorimo tu stranicu dok sjedimo u vlaku. Sadržaj je glavni problem mobilnih aplikacija. Bez obzira gdje se nalazimo ili što radimo, potreban nam je pristup podacima koji nas zanimaju. WebKit tehnologija pruža bogat sadržaj na iPhone i Android platformama.

Vrijedno je napomenuti da se WebKit koristi i na stolnim računalima, kao što je preglednik Safari, koji je glavni preglednik platforme Mac OS X, neovisno o tome radi li se o desktop verziji ili motoru preglednika za iPhone ili Android, WebKit ostaje najnaprednija dostupna tehnologija koja podržava HTML i CSS. Zapravo, WebKit podržava CSS stilove koje još ne prikazuju preglednici na drugim motorima - na primjer, niz svojstava definiranih HTML5 specifikacijom.

HTML5 je skup preliminarnih tehničkih specifikacija koje definiraju tehnologije temeljene na pregledniku kao što je pohrana podataka na strani klijenta s podrškom za SQL, premještanja, transformacije itd. Specifikacija HTML5 još uvijek je u tijeku, ali kada se osnovni principi jasno definiraju i implementiraju u preglednike na većini platformi, skromni počeci web aplikacija postat će stvar prošlosti. Razvoj web aplikacija zauzet će značajan segment industrije razvoja softvera, a ne govorimo samo o aplikacijama za desktop preglednike, već i za mobilne preglednike. Mobilne aplikacije će se od nusproizvoda pretvoriti u glavni proizvod na tržištu web aplikacija.

Ako odlučite svladati tehnologije web razvoja, tada imate vrlo ograničen izbor alata na raspolaganju. Prije svega, aplikacija se može kreirati izravno na poslužitelju kao datoteka koja sadrži HTML, CSS i JavaScript kod. U ovom slučaju, HTML sadržaj može biti isporučen u obliku statičkih HTML datoteka ili se može generirati dinamički upotrebom različitih tehnologija koje rade na strani poslužitelja, na primjer, kao što su PHP, ASP.NET, Java Servleti itd. U svakom slučaju, za potrebe ovog članka, sve se svodi na HTML kod, a najvažnija točka za nas je da WebKit tehnologija omogućuje preglednicima da prikazuju HTML na mobilnim uređajima.

Za pokretanje web aplikacije na mobilnom uređaju (iPhone ili Android) korisnik treba pokrenuti preglednik i unijeti URL odgovarajuće usluge, na primjer: http://vašetvrtke.com/applicationurl.

U isto vrijeme, raspon predloženih mobilnih web aplikacija je prilično širok: od standardne web stranice do mobilne web aplikacije razvijene posebno za određenu mobilnu platformu.

WebKit mehanizam, u kombinaciji s intuitivnim i user-friendly korisničkim sučeljem platformi iPhone i Android, omogućuje vam pregled gotovo svih web stranica na vašem mobilnom uređaju. Web stranice se prikazuju prilično korektno, za razliku od prethodne generacije mobilnih preglednika koji su nasumično prenosili fragmente sadržaja ili ih uopće nisu prikazivali. Kada se stranice učitavaju u pregledniku koji podržava WebKit, sadržaj stranice ima tendenciju povećanja. U ovom slučaju, mjerilo je odabrano tako da cijela stranica stane na zaslon, iako u znatno smanjenom, često nečitljivom obliku, kao što je prikazano na slici 1. Međutim, stranica se može pomicati, povećavati, pomicati, pružajući prikladan pristup svi elementi sadržaja. Prema zadanim postavkama preglednik koristi prozor širine 980 piksela.

Iako je potpuni prikaz web stranice u prozoru preglednika značajno poboljšanje u odnosu na iskustvo preglednika prethodne generacije, mogućnosti modernih mobilnih tehnologija nisu ograničene na ovo.

Ako želite da vaša web stranica bude dostupna ne samo redovnim korisnicima weba, već i mobilnim korisnicima, postoji još nekoliko opcija koje treba razmotriti za optimizaciju mobilnih web aplikacija.

Iako WebKit omogućuje ispravan prikaz web stranice na zaslonu mobilnog uređaja, postoje određene razlike između uređaja koji se temelje na mišu, poput prijenosnih ili stolnih računala, i uređaja osjetljivih na dodir, poput iPhonea ili Android pametnih telefona. Uređaji osjetljivi na dodir razlikuju se po fizičkim dimenzijama “klik” područja, nedostatku funkcije za lebdenje pokazivača iznad bilo kojeg elementa i različitom slijedu događaja. Stoga, ako želite izraditi web stranicu koja je prikladna i za redovne i za mobilne korisnike, morate uzeti u obzir sljedeće značajke mobilnih uređaja:

• iPhone i Android preglednici sposobni su prikazati cijelu web-stranicu u prilično čitljivom obliku—kvaliteta prikaza ovih preglednika mnogo je viša od standardnih mobilnih preglednika—pa nemojte žuriti s pojednostavljivanjem dizajna svoje web-stranice.
• Veličina vrhova prstiju znatno je veća od veličine pokazivača miša. Uzmite u obzir ovaj čimbenik kada razvijate navigacijske elemente stranice. Ne postavljajte poveznice preblizu jedne drugima, inače korisnik neće moći kliknuti na jednu vezu, a da ne pritisne sljedeću.
• Elementi lebdenja neće raditi na mobilnim uređajima. Korisnik jednostavno ne može "pokazivati" prstom preko bilo kojeg elementa na isti način kao kursor miša.
• Događaji definirani pritiskom i držanjem tipke miša, povlačenjem miša itd. implementirani su na drugačiji način na zaslonima osjetljivim na dodir. Neki od ovih događaja mogu funkcionirati i na mobilnim uređajima, ali općenito ne biste trebali očekivati ​​da mobilni preglednik i preglednik stolnog računala izvode isti slijed radnji.

Detaljna rasprava o ovim aspektima može se pronaći u članku " iPhone u akciji"(vidi odjeljak). U našem ćemo se članku ograničiti na razmatranje prednosti WebKita, a ne njegovih nedostataka.

Pogledajmo najočitiji problem s kojim se korisnici iPhonea ili Androida suočavaju kada pristupaju web stranicama: ograničena veličina zaslona. Zapravo, veličina zaslona modernog mobilnog uređaja je 320x480 ili 480x320, pod uvjetom da korisnik preferira gledati web sadržaj u pejzažnoj konfiguraciji. Kao što možete vidjeti na slici 1, WebKit može ispravno prikazati web stranicu dizajniranu za standardna stolna računala. Međutim, kada se web stranica skalira, tekst može postati premalen za čitanje, pa se korisnik mora pomicati, pomicati i zumirati prije nego što može pročitati tekst. Kako se nositi s ovim ograničenjem?

Najlakši način za stvaranje stranice koja se jednako dobro prikazuje u prozoru preglednika na mobilnom uređaju i prozoru preglednika na stolnom računalu jest korištenje posebne meta oznake prozor za prikaz.

Meta oznaka je HTML oznaka smještena u zaglavlju HTML dokumenta. Najjednostavniji primjer korištenja oznake prozora izgleda ovako: .

Dodavanjem ove meta oznake na HTML stranicu, njezin se prikaz u prozoru mobilnog preglednika skalira na najoptimalniji način (vidi sliku 2). Preglednici koji ne podržavaju okvir za prikaz jednostavno ignoriraju ovu oznaku.

Da biste definirali određene opcije zumiranja, odredite točnu vrijednost atributa sadržaja okvira za prikaz: meta oznake. Promjenom vrijednosti parametra početnog mjerila, slika se može smanjiti ili povećati. Za iPhone i Android platforme bolje je koristiti vrijednosti od 1.0 do 1.3. Meta oznaka okvira za prikaz također podržava minimalno i maksimalno zumiranje, što vam omogućuje da ograničite mogućnost korisnika da mijenja zumiranje stranice dok se učitava.

Dok su karakteristike dizajna iPhonea, posebice veličina zaslona od 320x480, ostale gotovo nepromijenjene od njegovog predstavljanja, parametri uređaja na platformi Android imaju prilično širok raspon, budući da mobilne uređaje na ovoj platformi proizvode različiti proizvođači i namijenjen širokom spektru korisničkih skupina. Stoga, ako želite da vaša web aplikacija bude popularna među mobilnim korisnicima, trebali biste uzeti u obzir moguće razlike u veličini zaslona, ​​razlučivosti i značajkama dizajna Android uređaja.

Iskustvo je pokazalo da osim dizajnerskih razlika koje postoje između različitih Android mobilnih uređaja, sam Android softver pokušava postaviti postavke učitane web stranice ovisno o svojstvima preglednika mobilnog uređaja. Osim stabilnosti, platforma Android ima stalno promjenjiv skup značajki i mogućnosti. Postavke vašeg specifičnog Android uređaja vjerojatno će se razlikovati od vašeg razvojnog okruženja, ovisno o verziji SDK-a i proizvođaču uređaja. Slika 4 prikazuje zaslon za postavljanje preglednika u V1.6 Android Emulatoru. Postavke zaslona pružaju korisniku mogućnost određivanja razine skaliranja slike na zaslonu (daleko, blizu, srednje) ili odabira načina automatskog skaliranja stranice.

U svijetu mobilnih uređaja najstalnija stvar su promjene, stoga se mora voditi računa o razvoju i obnovi tržišta mobilnog softvera. Na primjer, postavke preglednika Sprint Hero uključuju skup opcija koje su potpuno različite od standardnih postavki koje se koriste prilikom učitavanja web stranice. Preglednik Hero izgrađen je na platformi Android V1.5 korištenjem brojnih izmjena koje je napravio HTC. Srećom, upotreba meta oznake prozora za prikaz zanemarit će postavke specifične za heroja.

Do sada smo vidjeli da WebKit radi prilično dobar posao učitavanja web stranice, iako u znatno smanjenom i teško čitljivom obliku. Zatim smo proširili kontrolu nad načinom na koji se stranica prikazuje na zaslonu mobilnog uređaja korištenjem metaoznake okvira prikaza. Prikazanu stranicu sada je mnogo lakše čitati i kretati se njome. Ali to još uvijek nije dovoljno da naša stranica izgleda i funkcionira kao web aplikacija.

Prijeđimo na razmatranje značajki dizajna web stranice namijenjene mobilnoj publici. Kao konkretan primjer, razmotrite stranicu za registraciju Googleove usluge e-pošte GMail.

Ovako stranica izgleda u prozoru preglednika radne površine:

U prozoru preglednika radne površine informativni sadržaj prikazan je na lijevoj strani, a sam prozor za registraciju nalazi se na desnom panelu. U prozoru mobilnog preglednika ista stranica ima potpuno drugačiji izgled.

Stranica prikazana na slici 6 je definitivno dizajnirana za mobilne korisnike. Zaslon prikazuje samo one elemente stranice koji su korisniku potrebni za daljnji rad - nije potrebno dodatno pomicanje, pomicanje ili zumiranje.

Sada pogledajmo prozor za prikaz e-pošte mobilne verzije Gmaila. Budući da je prostor na zaslonu koji je dostupan aplikaciji vrlo ograničen, preglednik poruka ima dodatne gumbe i navigacijske elemente. U tom slučaju prikazani navigacijski elementi preklapaju prozor za pregled poruka. Također, nemojte koristiti previše okvira ili pomicanje divova ako to možete izbjeći. Mobilna verzija Gmaila rješava ovaj problem korištenjem skočnog izbornika koji se pojavljuje čim korisnik završi s listanjem stranice. Skočni izbornik sadrži 3 gumba: Arhiviraj, Izbriši i Više. Kada kliknete gumb Više, pojavljuju se dodatne stavke izbornika (pogledajte sliku 7).

Ovo je doista aplikacija dizajnirana za mobilne uređaje.

Treba imati na umu da ne želimo namjerno osiromašiti dizajn i smanjiti iskustvo mobilnih korisnika koji su razvili multifunkcionalne preglednike za iPhone i Android platforme. S ove točke gledišta, korisno je obratiti pozornost na element prikazan na dnu Gmail stranice (vidi sliku 8):

Ako korisnik preferira poboljšanu funkcionalnost desktop verzije, dajte mu mogućnost preuzimanja odgovarajuće verzije stranice.

Sada razmotrite slučaj u kojem želite stvoriti aplikaciju koja koristi web tehnologije, ali izgleda kao izvorna mobilna aplikacija.

Sljedeći korak je razvoj sadržaja specifičnog za određenu mobilnu platformu. Ovo definira format stranice i sučelje tako da rezultirajuća stranica izgleda kao izvorna aplikacija za određenu platformu, a ne standardno javno web mjesto. Što mislimo pod "nativnom" aplikacijom?

Prije nego što se udubimo u raspravu o tome kako web aplikaciju učiniti što sličnijom izvornoj aplikaciji za određenu platformu, ostavimo po strani zajedničke značajke iPhone i Android preglednika i kratko se dotaknimo vizualnih razlika koje postoje između ovih platformi. .

iPhone aplikacije imaju svoj specifičan izgled i sučelje. Pokažite nekome snimku zaslona iPhonea i, osim ako neki dan nije pao s Mjeseca, gotovo će sigurno odmah reći da je to iPhone. Pokažite istoj osobi snimku zaslona Android mobilnog uređaja i odgovor više neće biti tako jasan. Koji je razlog? Postoji nekoliko mogućih objašnjenja. Prvo, iPhone se pojavio na tržištu mnogo ranije od uređaja temeljenih na Androidu i uspio je steći ogroman broj obožavatelja. Razmislite o ljudima koji čekaju u redu da plate najviše dolara za ograničene značajke V1 iPhonea. Bez obzira volite li iPhone ili ne, ovaj Appleov proizvod trenutno je vodeći na tržištu. Što je s Androidom?

Android platforma je relativno nov proizvod, iu mnogim aspektima djeluje kao antipod iPhoneu, jer je prvenstveno dizajnirana za otvorenu zajednicu. Android platforma koristi se u širokom spektru uređaja (telefoni i drugi kućanski uređaji). Radi jednostavnosti rasprave, u ovom članku ćemo se ograničiti na korištenje Androida u mobilnim telefonima.

S vremenom će broj Android uređaja u svijetu premašiti broj iPhonea. To je zato što Android uređaje proizvode razne tvrtke i bit će podržani od strane velikog broja podatkovnih mreža. S ovako značajnim brojem igrača na tržištu Android mobilnih uređaja, svakako treba očekivati ​​određenu fragmentaciju tržišta na temelju izgleda i parametara uređaja. Ovaj trend se može vidjeti u SenseUI sučelju iz HTC-a. Ovaj atraktivan izgled i dojam ne podržava temeljni Android SDK i nije kompatibilan s drugim Android uređajima. Motorola, Google i Verizon udružili su snage kako bi razvili novi DROID uređaj temeljen na Androidu. Ovo je prvi komercijalni proizvod na platformi Android 2.0.

Usporedite raznolikost Android sustava s dosljednim izgledom i dojmom iPhonea. iPhone je posebno vrijedno vlasništvo Applea. Izgled iPhone aplikacija može se neznatno promijeniti s vremenom, ali te male promjene vjerojatno se ne mogu usporediti s različitim verzijama Android sustava, kojih ima mnogo čak i sada kada je platforma u ranim danima.

Dakle, što je potrebno učiniti kako bi se izgled i sučelje aplikacije što više približili “nativnim” programima?

Da smo se suočili s ovim izazovom prije pojave Weba 2.0, to bi doista bio ozbiljan problem. Rani pokušaji da se podrži više klijentskih preglednika (mobilnih i stolnih) oslanjali su se na nekoliko pristupa, na primjer:

• Izrada potpuno paralelnih stranica
• Generiranje dinamičkog sadržaja ovisno o parametru userAgent
• Korištenje proxy poslužitelja koji bi mogli transformirati sadržaj ovisno o svakom specifičnom uređaju. RIM je uspješno upotrijebio sličnu tehnologiju za pristup e-pošti s mobilnog uređaja klijenta.

Takvi pristupi mogu biti sasvim prihvatljivi u slučajevima kada razvoj provode veliki, dobro financirani timovi. Što bi ostatak svijeta trebao učiniti? Nemaju svi značajna financijska sredstva, visokokvalificirane stručnjake i neograničeno vrijeme za provedbu takvih strategija. Osim toga, kao što smo već primijetili, mobilni internet prethodne generacije preglednika ne može se nazvati prikladnim ili popularnim za korištenje, tako da se u svakom slučaju ne biste trebali zadržavati na zastarjelim metodama i pristupima.

Srećom, nećemo to morati učiniti. U eri WebKita i CSS-a, razlike u izgledu i sučelju različitih mobilnih uređaja mogu se prevladati korištenjem stilskih tablica i medijskih upita, koji omogućuju korištenje različitih stilova ovisno o specifičnoj vrsti uređaja. Tehnologija medijskih upita omogućuje vam dobivanje informacija o klijentu. Tradicionalno, preglednik poslužitelju šalje vrijednost userAgent, koja omogućuje poslužitelju da identificira određeni preglednik i odredi sadržaj koji treba poslati klijentu. Pomoću medijskog upita preglednik odabire stil stranice na temelju svojih mogućnosti. Sljedeći primjer pokazuje odabir lista stilova dizajniranog za pametne telefone: . A ovaj upit definira tablicu stilova radne površine: .

U vrijeme pisanja ovog teksta, Internet Explorer V6 zauzimao je otprilike 20-30% ukupnog tržišta preglednika, međutim, rasprava o mogućnostima IE V6 je izvan opsega ovog članka.

Više informacija o medijskim upitima možete pronaći u nacrtu specifikacije (vidi odjeljak).

Pogledajmo primjer korištenja medijskih upita za razvoj aplikacije koja prikazuje status mrežnih poslužitelja.

Namjena ove aplikacije je praćenje rada više poslužitelja. Neovisni programeri softvera često moraju podržavati više aplikacija na više poslužitelja. Ako ste se neko vrijeme bavili razvojem softvera, vjerojatno ste se već susreli s različitim vrstama poslužitelja i različitim vrstama aplikacija. Sve to znači da je vrlo moguće da nećete moći koristiti niti jedan alat za praćenje rada svih potrebnih aplikacija. U tom slučaju ima smisla koristiti aplikaciju za nadzor mobilne mreže (netmon). Aplikacija pruža sve potrebne funkcionalnosti, a pritom ostaje fleksibilna i laka za pristup s mobilnog uređaja.

Aplikacija netmon uključuje popis poslužitelja koje je potrebno nadzirati. Ključni pokazatelji uspješnosti (KPI) prikupljaju se za svaki poslužitelj. Ključni pokazatelji uspješnosti primarni su alat koji studenti MBA već godinama koriste za procjenu trenutnog stanja poslovanja. Iz perspektive hostinga web aplikacije, sljedeći pokazatelji mogu se koristiti kao KPI-jevi:

• Broj transakcija u proteklom vremenskom razdoblju
  • Narudžbe
  • Zahtjevi za kataloge
  • E-pošta
  • Broj pregleda stranica
• Vrijeme proteklo od zadnje transakcije
  • Redoslijed
  • Elektronička razmjena podataka
  • Poruke poslovnog partnera
  • Prijenos datoteke od dobavljača putem FTP-a
• Je li baza podataka dostupna?
• Zadnji datum sigurnosne kopije
• Prosječan iznos narudžbe (u dolarima)
• Količina slobodnog prostora na disku
• Propusnost za zadnji sat, dan, mjesec

Gore navedene metrike i drugi slični operativni parametri omogućuju vam procjenu zdravlja određenog sustava ili aplikacije. Na primjer, tijekom blagdanske sezone gledamo broj narudžbi na nekim našim stranicama. Ukoliko podaci ne pokazuju stabilan porast broja narudžbi svakog sata, provodimo detaljniju analizu situacije.

Budući da svaka aplikacija ima svoje vlastite zahtjeve i resurse, netmon mora biti dovoljno fleksibilan da se prilagodi potrebama svake aplikacije. Kako bismo osigurali ovu razinu fleksibilnosti, počinjemo definiranjem najopćenitije strukture podataka kako bismo uzeli u obzir parametre stanja svakog sustava. U 2. dijelu pobliže ćemo pogledati odakle ti podaci dolaze i kako se ažuriraju. Za sada ćemo se ograničiti na sljedeće informacije:

• Naziv stranice
• URL stranice (početna stranica)
• URL za dobivanje ažuriranja
• Status: OK ili ne
• Kratki sažetak: Opis statusa poslužitelja koji će ili biti u redu ili sadržavati tekstualni niz koji ukazuje na najteži problem za taj poslužitelj
• Elementi: Ovo je skup parova ime/vrijednost koji će nam trebati za prosljeđivanje trenutnih KPI vrijednosti za odgovarajuću stranicu.

Naša će aplikacija prikazati dobivene pokazatelje učinka u formatu koji je jednostavan za navigaciju, koristeći u potpunosti CSS, jQuery i WebKit kako bi skrenula pažnju korisnika na problematična područja. Kao što smo već spomenuli, glavni cilj razvoja ove aplikacije je mogućnost pokretanja iste na iPhone, Android platformi i na stolnom računalu u Safari pregledniku.

Suvremene web stranice moraju biti izrađene u deklarativnom obliku koji definira organizacijsku strukturu i sadržaj stranice. Pozicioniranje i oblikovanje stranice vrši se pomoću Cascading Style Sheets (CSS) i, u većini slučajeva, JavaScripta. Zapravo, JavaScript biblioteke postale su toliko popularne da je njihova upotreba danas pravilo, a ne iznimka. U aplikaciji o kojoj se raspravlja u ovom članku koristit ćemo popularnu JavaScript biblioteku jQuery. Naša aplikacija radit će na iPhone, Android i desktop platformama. Koristit će se isti HTML kod, a sve potrebne razlike bit će implementirane u stilske listove. Ovdje treba napomenuti da nismo svjesno uložili značajan napor u dizajniranje privlačnog izgleda za aplikaciju. Štoviše, kričave boje koje se međusobno ne slažu namjerno su odabrane kao pozadina kako bi privukle dodatnu pozornost čitatelja na organizaciju stilskih listova. U 2. dijelu malo ćemo poboljšati izgled aplikacije, ali za sada HTML kod izgleda kao onaj prikazan u Ispisu 1.

Brzi pogled na predloženi HTML kod otkriva sljedeće glavne značajke:

• Kod koristi dvije vanjske JavaScript datoteke: jednu datoteku jQuery knjižnice i jednu pomoćnu datoteku za našu aplikaciju.
• Kôd koristi metaoznaku okvira prikaza za skaliranje prikazanog sadržaja.
• Glavni stilski list definiran je datotekom netmon.css.
• Parametar userAgent koristi se za definiranje pomoćnog lista stilova. Ovisno o svojoj vrijednosti, stilski list će se učitati za iPhone, Android ili preglednik stolnog računala.
• Proces učitavanja stranice koristi jQuery i pomoćnu funkciju definiranu u datoteci netmon.js za prikaz podataka.
• Kôd glavne stranice koristi nekoliko div oznaka.
• Na kraju, kod sadrži poveznicu na stranicu koja prikazuje niz userAgent. Ova poveznica nema nikakve veze s radom aplikacije i koristi se samo u demonstracijske svrhe.

Prije nego što uđemo u pojedinosti stilova i datoteke netmon.js koji zapravo definiraju osnovne operacije aplikacije, pogledajmo našu aplikaciju u njezinom trenutnom stanju. Ponovno imajte na umu da koristimo tri različita lista stilova: po jedan za svaku od tri podržane platforme. Kako bi proces razvoja aplikacije bio vizualniji, svaka tablica definira vlastitu boju pozadine. Na slici 9, naša stranica je otvorena u Desktop Safari pregledniku i ima plavu pozadinu.

Slika 11 prikazuje izgled aplikacije u prozoru preglednika iPhonea (boja pozadine je zelena).

Glavni stilski list pohranjen u datoteci netmon.js prikazan je u ispisu 2.

Korištenje različitog lista stilova za svaku platformu omogućuje vam postizanje sljedećih zadataka:

Ispis 3 prikazuje kod za datoteku iphone.css.

Kao što vidimo, boja pozadine body taga je zelena (#00ff00), a veličina fonta je prilagođena za lakše čitanje na zaslonu mobilnog uređaja. Na kraju, pogledajmo datoteku netmon.js, koja definira popis poslužitelja i funkciju koja ispisuje podatke svakog poslužitelja (korišteno u ispisu 4). Dio koda datoteke je izostavljen radi sažetosti; njegov puni tekst je dostupan u odjeljku ).

Ako statusna traka bilo kojeg poslužitelja nije u redu, tada se odgovarajući unos poslužitelja prikazuje crvenom bojom, kao što se može vidjeti iz definicije klase u CSS datoteci. Osim toga, ako se provjerom statusa poslužitelja otkriju problemi (status nije u redu), dodatno se prikazuje kratak opis problema. Slike 9-11 pokazuju da poslužitelju 4 ponestaje slobodnog prostora na disku. Kada kliknete na liniju ovog poslužitelja, na ekranu će se prikazati detaljna poruka o problemu (vidi sliku 12).

Klikom na vezu za prikaz desno od naziva poslužitelja otvara se početna stranica tog poslužitelja. Imati takvu vezu vrlo je zgodno iz dva razloga: prvo, spasit će vas od neugodne potrebe za pamćenjem URL-a svakog poslužitelja, i drugo, spasit će vas od još neugodnije potrebe da unesete ovaj URL s tipkovnice svoj mobilni uređaj (čak i onaj najprikladniji).

Dakle, ako uspijemo uspješno pokrenuti netmon na mobilnom uređaju, zadatak održavanja poslužitelja ne bi trebao uzrokovati probleme.

Ovaj članak predstavlja načela razvoja web aplikacija za iPhone i Android korištenjem WebKit tehnologije. U 2. dijelu proširit ćemo mogućnosti naše aplikacije dodavanjem funkcije ažuriranja podataka pomoću Ajax poziva.

Motor preglednika je poseban program koji radi s web stranicama. Obrađuje HTML stranicu preuzetu s interneta i pretvara njen kod u prezentaciju poznatu korisnicima. Motori internetskih preglednika koriste se u samim preglednicima, kao iu klijentima e-pošte. Nije svaki web preglednik izgrađen na vlastitoj jedinstvenoj platformi. Mnogi od njih koriste popularna i vremenski testirana rješenja.

Ovaj članak ispituje koje platforme postoje za izradu preglednika i kako se međusobno razlikuju.

• Mnogo je prednosti korištenja mehanizama za iscrtavanje za izradu preglednika:
• Olakšava pronalaženje i ispravljanje pogrešaka koda.
• Zgodna prilika za poboljšanje jedne komponente u nekoliko programa odjednom.
• Proces promjene grafičkog sučelja aplikacije je pojednostavljen.

Lakoća izrade novih programa koji odgovaraju željama određenog programera ili potrebama određenog korisnika.

Takva se rješenja vrlo često koriste u programiranju: pri izradi videoigara, operativnih sustava za složene programe i tako dalje. Neki stručnjaci rade na poboljšanju i optimiziranju motora, uvodeći u njega nove značajke i korisne funkcije. Drugi se bave izradom samih programa na temelju razvijene platforme.

Upečatljiv primjer je Trident engine iz Microsofta. Samo se koristi u velikom broju aplikacija ove korporacije. Kako se zaklada razvija, razvijaju se i izvedeni projekti.

Trozubac

Kada korisnik instalira novi Windows operativni sustav, prvi web preglednik s kojim se susreće je Internet Explorer. Stoga se njegov motor razmatra prvi u pregledu.

Trident ili MSHTML prilično je stara softverska komponenta koju je za svoje potrebe razvio Microsoft. Projekt se kontinuirano razvija od 1997. godine. Koristi se u Microsoft web pregledniku - Internet Explorer, Outlook email klijent, Windows Explorer (program za rad s datotekama) i mnoge druge aplikacije ovog programera.

Izlaskom Windowsa 10, platforma Trident razvila se u EdgeHTML kao osnovu uzeli su zastarjeli, neuspješni motor i stvorili novi koji zadovoljava sve zahtjeve modernih korisnika. Sudeći prema benchmarkovima (softverski test performansi i brzine), Microsoft Edge (preglednik kreiran na temelju EdgeHTML-a) sustigao je, pa čak i prestigao popularne programe koji se koriste za izradu preglednika Google Chrome i Mozilla Firefox.

Gecko je motor koji se koristi u popularnom Internet pregledniku Mozilla Firefox i mnogim drugim programima. Izvorni kod programa je besplatno dostupan, odnosno svatko može kreirati vlastiti preglednik ili klijent e-pošte temeljen na Gecku potpuno besplatno.

Još jedna prednost Geka je višeplatformski. Radi na velikoj većini modernih operativnih sustava: kako za osobna računala tako i za mobilne uređaje (za razliku od Internet Explorera koji radi samo na Windows OS-u).

Gecko podržava sve moderne standarde i tehnologije koje se koriste za izradu web stranica. To je jedna od dvije najpopularnije platforme preglednika. Podržava dodatke za povezivanje. Mjerila i osobna iskustva korisnika pokazuju da preglednici temeljeni na ovom motoru troše najmanje resursa osobnog računala i pouzdano rade s velikim brojem kartica (na primjer, nekoliko stotina).

Na temelju Geka kreiran je popularni internetski preglednik Mozilla Firefox, Thunderbird email klijent, Sunbird task scheduler te anonimni web preglednik s ugrađenom podrškom za Tor VPN tehnologije.

Malo poznata platforma korištena za stvaranje Konquerora, KDE upravitelja datotekama. Za korisnike koji nisu upoznati s operativnim sustavima Linux obitelji, zanimljivo je da je najpopularniji engine na svijetu nastao na temelju ovog projekta, o čemu će biti više riječi.

Ovaj motor razvila je svjetski poznata korporacija Apple na temelju gore navedenog rješenja - KHTML. Izdan 2001. godine, ovaj je projekt doživio ogroman razvoj i postao jedan od najčešće korištenih u svijetu.

Na temelju WebKita kreiran je web preglednik Safari, standardno korišten u iOS uređajima i vodeći po popularnosti među preglednicima - Google Chrome. Velik broj suvremenih programa za obradu sadržaja web stranica temelji se na WebKitu. Osim toga, koristi se u popularnoj aplikaciji Steam, dizajniranoj za digitalnu distribuciju računalnih igara tvrtke Valve.

Slično Gecku, WebKit je višeplatformski i radi savršeno na svim popularnim platformama. Pokazuje visoku stabilnost i performanse. Zbog njegove ogromne popularnosti, velika većina ekstenzija razvijena je za ovo rješenje. Također se koristi u popularnim mobilnim platformama kao što su Android i iOS. To je besplatan motor, što znači da ga svatko može besplatno koristiti za izradu vlastitih aplikacija.

Godine 2013. od WebKita se odvojila nova podružnica u vlasništvu Googlea, Blink. Ovaj je projekt formirao temelj Chrome verzije 28 (i svih kasnijih verzija), kao i njegovog brata otvorenog koda, Chromiuma. Chromium je korišten za stvaranje popularnog preglednika Yandex u Rusiji. Počevši od verzije 15, preglednik Opera također je prešao na Blink.

Napravljen 2003., mehanizam preglednika Presto korišten je kao osnova za Operu. Razvijan više od 10 godina. U 2013. programeri Opere odlučili su napustiti korištenje Presta u korist moćnijeg i popularnijeg Blinka iz Googlea. Trenutno je razvoj projekta zaustavljen.

Je li članak bio od pomoći?