Transfer

Pentru mulți dintre noi, dezvoltatorii, Webkit - cutie neagră. Noi aruncăm HTML, CSS, JS și o grămadă de imagini și Webkit, cumva ... Magic, ne oferă o pagină web care arată și funcționează bine.
Dar de fapt, cum ar fi spune colegul meu Ilya Grigoric :

Kit Web. nu este cutie neagră. Aceasta este o cutie albă. Și nu doar alb, dar, de asemenea deschis cutie.

Deci, să încercăm să ne dăm seama în unele lucruri:

Ce este Webkit?
Care este webkit-ul?
Cum utilizează WebKit browserele webkit?
De ce mulți webkit nu sunt aceiași?

Acum, mai ales după vestea că Opera sa mutat la Webkit, suntem înconjurați de o mulțime de browsere webkit și este destul de greu de spus că sunt uniți și unde își duc drumul. Mai jos, sper că vom încerca să scot o mică lumină asupra acestei întrebări. Ca rezultat, puteți determina mai bine distincția dintre browser, trimiteți bug-uri către martorul potrivit și conduceți mai eficient dezvoltarea browserului încrucișat.

Componentele standard ale browserului web

Să menționăm mai multe componente ale browserelor moderne:

Analiza HTML, XML, CSS, JavaScript)
Layout)
Realizarea textului și a graficelor
Decodarea imaginilor
Interacțiunea cu GPU.
Accesul la rețea
Accelerarea hardware

Care dintre ele sunt comune tuturor browserelor Webkit? În mare măsură, numai primele două.

Componentele rămase fiecărui Webkit "Port" implementează în felul său. Să ne ocupăm de ceea ce înseamnă.

Porturile Webkit.

Există multe "porturi" webkit și vă oferim Aria Hidatyat, Hacker Webkit și aceștia. Director în Sencha dreptul de a spune despre acest lucru:

Cea mai populară asociere față de Webkit este de obicei vizualizarea web a Apple, care rulează pe Mac OS X (prima și originala bibliotecă webkit). După cum puteți ghici, diferite interfețe sunt implementate folosind diferite biblioteci native Mac OS X, mai ales În componenta COREFOUNDATION. De exemplu, dacă definiți un buton plat culoare, cu o rază specială de circuit, Webkit știe unde și cum să desenezi acest buton. În același timp, redarea finală a butonului (sub formă de pixeli Monitorul utilizatorului) scade pe umerii coregrafelor.

După cum am menționat mai sus, coregrafele utilizate este unic pentru fiecare Webkit Port. Chrome pentru Mac, de exemplu, folosește Skia.

La un moment dat, Webkit a fost "portat" pentru diferite platforme, atât desktop cât și mobil. Această variație este denumită în mod obișnuit "portul Webkit". Pentru ferestrele Safari, Apple, de asemenea, independent "Webkit Webkit" pentru a rula sub Windows utilizând Biblioteca CoreFoundation CoreFoundation (cu implementare limitată).

... În ciuda faptului că safari sub ferestre este acum mort.

În plus, au existat și multe alte "porturi" (a se vedea lista completă). Google a creat și continuă să-și susțină portul de crom. Există, de asemenea, un webkitgtk bazat pe GTK +. Nokia (și acum Trolltech, care a răsucite-o) sprijină portul QT WebKit, care a devenit popular ca un modul QTWebkit.

Unele porturi Webkit.

Safari.
- Safari sub OS X și Safari sub Windows două porturi diferite
- Adunarea Night WebKit este o ansamblu a codului sursă al portului Mac ", care este folosit pentru Safari, doar mai nou
Safari mobil.
- Dezvoltat într-o ramură privată, dar mai târziu a fost deschisă.
- Chrome sub iOS (utilizează Apple Webview; un pic mai târziu despre diferența)
Chrome (crom)
- Chrome sub Android (utilizează direct "Port" Crom)
- Cromul este, de asemenea, baza pentru browsere: Yandex ,, Sogou, și în curând, Opera.
Android Browser.
- Utilizează cel mai recent cod sursă Webkit disponibil în momentul eliberării.
Mai multe porturi: Silk Amazon, Dolphin, BlackBerry, Qtwebkit, WebkitgTk +, Portul EFL (TIZEN), WXWebKit, WebKitwince, etc

Diferitele porturi se pot concentra pe diferite sarcini. Focusul portului MAC - separarea între browser și sistemul de operare și furnizarea de legile Obj-C și C ++ pentru încorporarea redării motorului în aplicații native. Portul de crom Focus este pe deplin pe browser. Qtwebkit oferă portul său de utilizat împreună cu arhitectura de aplicații încrucișate, ca motor de redare.

Ceea ce este comun în toate browserele Webkit

În primul rând, să ne uităm la funcțiile generale care sunt utilizate în toate browserele Webkit:

Știți că este amuzant, am făcut câteva încercări de a scrie acest paragraf. Și de fiecare dată când membrii echipei Chrome mi-au corectat cum vedeți ...

Și, în primul rând, WebKit dezasamblează HTML în mod egal. Ei bine, cu excepția faptului că cromul este singurul port în acest moment, unde este activat suportul pentru parsarea HTML.
... bun, dar după parsarea HTML, Dom Arbore este proiectat în mod egal. Ei bine, de fapt, umbra DOM este inclusă numai pentru portul de crom, adică construirea DOM variază. De asemenea, pentru elementele de utilizator (elemente personalizate).
... Ei bine, Webkit creează ferestre și documente obiecte pentru toată lumea în mod egal. Adevărat, deși proprietățile și desenele pe care le oferă pot depinde de utilizarea comutatoarelor de caracteristici (steaguri de caracter).
... parsing css același lucru. Mâncarea CSS și convertirea acestuia în CSSM este destul de standard. Da, deși Chrome suportă doar -Webkit prefixe atunci când Apple și alte browsere suportă prefixe învechite -KHTML- și -Apple -App.
... Layout ... poziționarea? E ca și pâinea cu unt. Peste tot același lucru, nu? Ei bine, deja! Layout-ul de subpixeli și aritmetica de dumping saturat face parte din Webkit, dar diferă de portul la port.
Super.

Deci, este dificil.

Acum, să încercăm să rezumăm ceea ce este comun în lumea Webkit ...

Ceea ce este comun pentru fiecare port webkit.

Dom, fereastră, document
mai mult sau mai putin
Cssom.
Colaborare CSS, proprietate / valoare
diferențele de prefixe ale producătorilor
HTML Parsing and Dom
La fel, dacă uităm de componentele web.
Layout și poziționare
Flexbox, flotoare, bloc de formare bloc ... Toate totalul
Instrumente de interfață cu utilizatorul și instrumente de dezvoltatori, tip Chrome DevTools Este Inspector Webkit.
Deși din aprilie anul trecut, Safari își folosește propriul inspector de safari, non-Webkit, cu surse închise.
Funcții precum mulțumiri, pushastate, fișier API, cele mai multe transformări CSS Matematice, API audio web, localstatorage
Deși punerea în aplicare poate fi diferită. Fiecare port poate folosi propriul sistem de stocare pentru localist și poate utiliza diferite API audio pentru Web Audio API.

Nu devine cu totul clar, deci să încercăm să ne uităm la unele diferențe.

Acum, care nu este comună porturilor Webkit:

Toate conectate cu GPU
- Transformare 3D
- WebGL.
- Decodarea video
Reclamat 2d pe ecran
- tehnologia de netezire
- Renunțarea la gradienții SVG și CSS
Realizarea textului și a transferurilor
Tehnologii de rețea (SPDY, Pre-redare, Transport de webocket)
Motorul JavaScript
- motorul JavaScriptCore se află în depozitul WebKit. Dar există legături în Webkit și pentru el și pentru V8.
Realizarea elementelor formularului
Comportamentul etichetelor video și codecuri audio și suport
Decodarea imaginilor
Navigare înapoi / înainte
- Partea pushstate ()
Funcțiile SSL, cum ar fi securitatea strictă a transportului și pinii-cheie publică

Să aruncăm o privire la unul dintre ei: 2D grafică Depinde de port, folosim biblioteci complet diferite pentru redarea pe ecran:

Sau dacă intrați în detalii, funcția nou adăugată: CSS.Supports () a fost activată pentru toate porturile, cu excepția Win și WinCairo, pentru care sunt incluse caracteristicile condiționate CSS3 CSS3).

Acum, suntem în detalii tehnice ... timp pentru a deveni pedant. Chiar și cele de mai sus nu sunt în întregime corecte. De fapt, este Webcore, este o componentă comună. Webcore este un aspect, o redare și o bibliotecă DOM pentru HTML și SVG și, în principal, ceea ce cred oamenii când spun Webkit. De fapt, "Webkit" este un strat de legare între webcore și "porturi", deși în conversația obișnuită, această diferență nu este importantă în principal.

Diagrama ar trebui să ajute:

Multe dintre componentele WebKit sunt comutate (afișate de gri).

De exemplu, JavaScript motor Webkit, JavaScriptCore, este motorul implicit în Webkit. Inițial, se bazează pe KJS (de la KDE) din zile când Webkit a început ca o ramură KHTML. În același timp, portul de crom, trece la motorul V8 și utilizează legături unice DOM.

Fonturile și redarea textului reprezintă o parte foarte mare a platformei. Există 2 căi separate pentru text în Webkit: rapid și complex. Ambele necesită suport specific platformei (implementat pe partea portului), dar numai rapid ar trebui să știe cum să redeschideze glifele (care cache-urilor web pentru platformă), când complexul transferă complet șiruri de caractere de la nivelul platformei și pur și simplu spune "Desenați acest lucru , Vă rog."

"Webkit este ca un sandwich. În alte chestiuni, în cazul cromului, este mai mult așa. Tacos gustos de tehnologii web.
Dmitri Glazkov, Hacker Chrome Webkit. Campionul componentelor web și al umbrei Dom.

Acum, să extindem revizuirea și să privim mai multe porturi și mai multe subsisteme. Mai jos sunt cinci porturi WebKit, acordă atenție modului în care setul de instrumente diferă pentru fiecare dintre ele, în ciuda componentelor generale:

	Chrome (OS X)	Safari (OS X)	Qtwebkit.	Android Browser.	Chrome pentru iOS.
Redare.	Skia.	Coregrafele.	QTGUI.	Android Stack / Skia	Coregrafele.
Rețele.	Stack de rețea de crom	Cfnetwork.	Qtnetwork.	Fork de stiva de rețea a cromului	CHROMUM SKING.
Fonturi.	CoreText prin Skia.	Coretext.	QT interne.	Android Stack.	Coretext.
JavaScript.	V8.	JavaScriptCore.	JSC (V8 este folosit în altă parte în QT)	V8.	Javascriptcore (fără jitting) *

* Nota de subsol despre Chrome pentru iOS. El folosește Uiwebview, după cum probabil știți. În conformitate cu posibilitățile UiwebView, aceasta înseamnă că poate utiliza aceeași redare a motorului, precum și Safari Mobile, JavaScriptCore (și nu V8) și un singur model filetat. Acum, un cod este împrumutat de la crom, cum ar fi un subsistem pentru a lucra cu o rețea, marcaje de infrastructură de sincronizare, omnibox, valori și rapoarte de eșec (Raportarea accidentului). (De asemenea, JavaScript este atât de rar pe un strangulare dispozitive mobileah, că absența compilatorului Jitting are un efect minim.)

Ei bine, de ce am venit la ce?

Și așa, toate Webkit este complet diferit acum. Sunt speriat.

Nu merita! Testele de acoperire webkit "LayoutTest" este uriașă. (28.000 de teste în conformitate cu cele mai recente estimări) și nu numai pentru funcțiile existente, ci și pentru toate regresiile găsite. De fapt, ori de câte ori ați studiat funcții noi sau "secrete" ale testelor DOM / CSS / HTML-5, testele "LayoutTest" au, de obicei, o demonstrație minimă excelentă.

În plus, W3C face eforturi pentru a standardiza setul de testare. Aceasta înseamnă că ne putem aștepta ca ambele porturi Webkit, cât și toate celelalte browsere vor fi testate prin aceleași teste de teste, care ne vor conduce la o scădere a quirk-urilor și o rețea mai interoperabilă. Pentru toți cei care și-au atașat eforturile vizitând testul de eveniment Web înainte ... Mulțumesc!

Opera sa mutat doar la WebKit. Ce se va întâmpla de la asta?

Robert Naiman și Rob Hawks au atins deja acest subiect, dar voi adăuga că una dintre cele mai importante părți a anunțului a fost asta Opera merge la crom. Aceasta înseamnă că formularele WebGL, Canvas, HTML5, implementarea graficelor 2D, toate aceste lucruri vor fi aceleași pe Chrome și Opera acum. Același API și implementarea la nivel scăzut. Deoarece Opera se bazează pe crom, puteți simți că vă reduceți munca, verificați compatibilitatea pe Opera și Chrome.
De asemenea, am nevoie de atenție tot Browserele de operă vor fi transferate la crom. Aceasta este, Opera pentru Windows, Mac, Linux și Opera Mobile (browser mobil cu drepturi depline). Chiar și Opera Mini, un client subțire, va fi comutat de la ferma actuală de redare pe baza Presto, pe alta, pe baza cromului.

... și Webkit de ansamblu de noapte. Ce este?

Acesta este un webkit care lucrează la același cod ca safari (deși unele biblioteci interne au fost modificate). Majoritatea Apple îi conduce, astfel încât comportamentul și setul de funcții corespund ceea ce puteți găsi în Safari. În multe cazuri, Apple se comportă conservator când vine vorba de includerea funcțiilor pe care alte porturi sunt implementate sau cu care se efectuează experimente. În orice caz, dacă utilizați analogii, gândiți-vă că ... Night Build Webkit pentru safari, este ca și cromul pentru crom. Adaugă etichete

Android și iPhone - războaie de browser

Partea 1. Webkit se grăbește pentru ajutor

Dezvoltarea unei cereri de browser responsabil pentru monitorizarea stării rețelei

Seria de conținut:

Platformele totale, iPhone și Android au mai mult de 100.000 de aplicații disponibile pentru descărcare dintr-o varietate de surse. În același timp, adică aplicații "native", adică. Aplicații care sunt dezvoltate și colectate prin intermediul SDK corespunzător și apoi instalate pe un dispozitiv mobil. Astfel de aplicații "native" fac posibilă implementarea eficientă a capacităților tehnice ale dispozitivului mobil, inclusiv suportul pentru rețelele fără fir, depozitele Bluetooth și de date, funcțiile de accelerometru sau compasul și alte minuni tehnologice și produse noi care fac ca dispozitive mobile să fie atât de atractive pentru utilizatori. Popularitatea aplicațiilor "native" pentru platformele iPhone și Android este extrem de ridicată, dar în plus, dispozitivele mobile oferă oportunități ample pentru dezvoltarea aplicațiilor web. Tehnologiile mobile au ieșit mult din epoca copiilor, iar cu ei au ajuns la o anumită maturitate și internet mobil.

Acest articol este primul dintr-o serie de două părți dedicate dezvoltării aplicațiilor browser pe platformele iPhone și Android. Scopul acestei serii este introducerea cititorului cu principiile de bază ale creării propriilor aplicații web mobile. Aplicațiile mobile nu sunt limitate la începutul site-ului web de pe dispozitivul mobil. Vom lua în considerare tehnologii de bază Și abordările utilizate în dezvoltarea aplicațiilor mobile care vă permit să alocați această secțiune a dezvoltării software-ului într-o disciplină separată independentă.

Popularitatea platformei web este explicată de faptul că utilizarea sa vă permite să rezolvați multe probleme în mod tradițional flagel de dezvoltatori și administratori de sistem. Printre ei:

Probleme de instalare: Instalarea aplicațiilor web nu provoacă probleme - instalați sau copiați-le pe server și vă vor spune clienților dvs., care URL trebuie specificată în browser.
Probleme de zoom: Aplicațiile web sunt ușor de scalat la grupul serverului de serie de date de înaltă performanță, iar instrumentele de service pentru aplicații sunt utilizate pentru a menține aplicațiile.
Probleme de arhivare și recuperare de date: aplicațiile web utilizează un depozit centralizat de date, simplificând astfel sarcina de recuperare în caz de defecțiuni.
Întrebări de interfață utilizator: Combinație de foi de stil HTML, cascadă (CSS), JavaScript și imagini grafice Vă permite să creați o interfață de utilizator multifuncțională care depășește în mod semnificativ capacitățile sale și interfețele de aspect dezvoltate prin intermediul SDK "nativ". Acesta din urmă, de regulă, nu este capabil să ofere un efect complet al prezenței pentru aplicațiile de joc și nu garantează funcționalitatea necesară pentru terminalele interactive de informare.
Ușor de utilizat: Majoritatea aplicațiilor necesită elemente simple și de interfață de utilizator care pot efectua cu ușurință operațiile de zi cu zi.

Cel mai atractiv aspect al modelului de distribuție al aplicațiilor pe Internet este că vă permite să transformați software-ul într-un fel de serviciu de abonament, care este o metodă de livrare reciproc avantajoasă software.. "Cum?" - tu intrebi. Să luăm în considerare această întrebare mai mult.

Modelul de distribuție pentru utilizarea unei interfețe web permite cumpărătorilor să încerce produsul înainte de a cumpăra cu un risc minim și la cel mai mic preț. Dacă procesul mi-a plăcut clientul, atunci tot ceea ce este necesar pentru utilizarea în continuare a produsului software este de a plăti achiziționarea unui card de credit (sau utilizarea sistemului PayPal). Mai mult decât atât, modelul de software ca serviciu (SaaS) oferă utilizatorilor o modalitate convenabilă și profitabilă de a cumpăra software fără costuri semnificative în avans, garantând investiții în prima lună de utilizare și nu în viitorul îndepărtat.

Faptul este că suportul pentru browserele web pe dispozitivele mobile a absent practic. Situația sa schimbat dramatic cu apariția tehnologiei care a numit Webkit, care și-a luat locul în domeniul dispozitivelor mobile, cu precizie datorită iPhone-ului.

În doar câțiva ani, platforma iPhone a devenit clientul web numărul unu din lume. De ce? Deoarece Webkit cuplat cu o funcționare fiabilă a conexiunii la Internet a făcut posibilă utilizarea serviciilor web pe dispozitivele mobile mult mai eficient decât orice alte browsere moderne. Alți jucători de pe piața de telefonie mobilă au atras atenția asupra noilor tehnologii, iar acum întreaga piață poate fi împărțită în companii care utilizează Webkit, companiile care vor folosi Webkit și companiile care inventează scuze pentru a nu utiliza Webkit.

Deci, ce este webkit?

WebKit și HTML5.

Webkit este un motor de browser utilizat atât pentru a suporta browserul mobil Safari de pe platforma iPhone și pentru a susține browserul de pe platforma Android. Desigur, WebKit este, de asemenea, utilizat în alte dispozitive mobile, dar în cadrul acestui articol ne vom limita la luarea în considerare a platformelor iPhone și Android.

Webkit este un proiect open source, originar din dezvoltarea mediului desktop K (KDE). Proiectul WebKit este că aplicațiile web moderne pentru dispozitivele mobile sunt solicitate de aspectul lor. Caracteristicile tehnologice și de proiectare ale dispozitivului mobil, desigur, joacă un rol important, dar utilizatorii mobili sunt interesați în primul rând de conținut. Dacă dispozitivul mobil oferă acces numai la partea mică a conținutului de Internet, este puțin probabil ca acesta să intre în lista de sus a celor mai populare dispozitive.

Cei mai mulți dintre noi preferă să trăim o viață completă: dacă deschidem un site web pe un computer laptop care stătea acasă, ne așteptăm să vedem același conținut când deschidem acest site pe tren. Conținutul este principala problemă a aplicațiilor mobile. Indiferent de locul în care suntem, și ce facem, avem nevoie de acces la datele care vă interesează. Tehnologia WebKit oferă un conținut complet de pe platformele iPhone și Android.

Este demn de remarcat faptul că Webkit este utilizat și în computerele desktop, de exemplu, în browserul Safari, care este principalul browser al platformei Mac OS X. Indiferent dacă versiunea pentru computerele desktop sau un motor de browser pentru iPhone sau Android, WebKit rămâne cea mai avansată tehnologie, susținând HTML și CSS. De fapt, Webkit acceptă stiluri CSS, care nu sunt încă afișate de browsere pe alte motoare - ca exemplu, puteți specifica un număr de proprietăți definite de specificația HTML5.

HTML5 este un set de specificații tehnice preliminare care definesc tehnologii bazate pe utilizarea browserelor, cum ar fi depozitele de date pe partea clientului, cu suport SQL, deplasarea, conversia și așa mai departe. Dezvoltarea specificației HTML5 este încă depășită, de îndată ce principiile de bază sunt formulate și implementate în browsere pe majoritatea platformelor, o etapă inițială foarte modestă de dezvoltare a aplicațiilor web va deveni un trecut uitat. Dezvoltarea aplicațiilor web va avea un segment semnificativ în dezvoltarea software-ului, iar acest lucru nu este doar despre aplicațiile pentru browserele desktop, ci și pentru browserele mobile. Din produsul lateral, aplicațiile mobile se vor transforma în produsul principal de pe piața aplicațiilor web.

Caracteristici constructive ale dezvoltării aplicațiilor mobile web

Dacă ați decis să stăpâniți tehnologiile de dezvoltare web, atunci la dispoziția dumneavoastră este o alegere foarte limitată de fonduri. În primul rând, aplicația poate fi creată direct pe server ca fișier care conține codul HTML, CSS și JavaScript. În același timp, conținutul HTML poate fi furnizat sub formă de fișiere HTML statice și poate fi generat dinamic datorită utilizării diferitelor tehnologii care operează pe partea serverului, de exemplu, cum ar fi PHP, ASP.NET, servlets Java, etc. Oricum, din punctul de vedere al problemelor luate în considerare în acest articol, totul se apropie codul HTML.Și aici cel mai important lucru pentru noi este că tehnologia WebKit permite browserelor să redea HTML pe dispozitivele mobile.

Pentru a rula o aplicație web pe un dispozitiv mobil (iPhone sau Android), utilizatorul trebuie să pornească browserul și să intre pe adresa URL a serviciului relevant, de exemplu: http://yourcompanyname.com/applicationurl.

În acest caz, gama de aplicații web mobile propuse este destul de largă: de pe site-ul web standard la o aplicație web mobilă concepută special pentru o anumită platformă mobilă.

Afișați site-uri standard

Motorul WebKit în combinație cu o interfață utilizator intuitivă și ușor de utilizat a platformelor iPhone și Android vă permite să vizualizați aproape orice site web pe dispozitivul dvs. mobil. Paginile web sunt afișate corect, spre deosebire de generarea anterioară de browsere mobile, care au transferat aleatoriu fragmente de conținut sau nu le-au afișat deloc. La descărcarea de pagini într-un browser de asistență WebKit, conținutul paginii este de obicei scalat. În același timp, scara este aleasă astfel încât întreaga pagină să fie montată în întregime pe ecran, deși într-o formă puternic redusă, adesea necondiționată, după cum se arată în figura 1. Cu toate acestea, pagina poate fi derulată, crește, Deplasați, asigurați acces convenabil la toate elementele de conținut. În mod prestabilit, browserul utilizează o fereastră de 980 pixeli lățime.

În ciuda faptului că afișarea completă a paginii web din fereastra browserului este o realizare semnificativă în comparație cu experiența utilizării browserelor de generare anterioare, posibilitățile tehnologiilor mobile moderne nu se limitează la acest lucru.

Paginile web create luând în considerare caracteristicile mobile

Dacă doriți ca pagina dvs. web să fie disponibilă nu numai utilizatori obișnuiți Rețele, dar și utilizatorilor mobili, merită să luați în considerare încă câteva posibilități de optimizare a aplicațiilor web mobile.

În ciuda faptului că Webkit vă permite să afișați corect pagina web de pe ecranul dispozitivului mobil, există o anumită diferență între dispozitivele care utilizează un șoarece, cum ar fi computere portabile sau desktop și dispozitive touch, cum ar fi smartphone-uri iPhone. sau Android. Dispozitivele senzoriale se disting prin dimensiunile fizice ale zonei "Click", lipsa funcției Ghidului cursorului la orice element și o altă secvență de evenimente. Astfel, dacă doriți să creați un site web care ar fi convenabil atât pentru utilizatorii obișnuiți, cât și pentru cei mai mobili, trebuie să luați în considerare următoarele caracteristici ale dispozitivelor mobile:

Browserele iPhone și Android sunt capabile să afișeze întreaga pagină web "lizibilă" - calitatea afișării acestor browsere este semnificativ mai mare decât cea a browserelor mobile standard - deci nu vă grăbiți să simplificați designul site-ului dvs.
Dimensiunea pernelor degetelor depășește semnificativ dimensiunea indicatorului mouse-ului. Luați în considerare acest factor în dezvoltarea elementelor de navigație pe site. Nu așezați legăturile prea aproape unul de celălalt, altfel utilizatorul nu va putea face clic pe același link, care nu va fi înregistrat în același timp adiacent.
Elementele afișate la deplasarea cursorului nu vor funcționa pe dispozitivele mobile. Utilizatorul pur și simplu nu poate "mișca" un deget pe nici un element ca un cursor de mouse.
Evenimente definite prin apăsarea și menținerea butonului mouse-ului, tragând mouse-ul etc., ecranele tactile sunt implementate într-un alt mod. Unele dintre aceste evenimente vor putea lucra pe dispozitive mobile, dar, în general, nu ar trebui să conteze că browserul mobil și browserul desktop vor efectua aceleași secvențe de acțiuni.

Puteți găsi o discuție detaliată a acestor aspecte în articol " iPhone în acțiune."(Vezi secțiunea). În articolul nostru, ne vom limita la luarea în considerare a avantajelor webkit și nu defectele sale.

Luați în considerare cea mai evidentă problemă cu care sunt întâlnite utilizatorii iPhone sau Android atunci când accesează site-urile web, și anume dimensiunea limitată a ecranului. De fapt, ecranul unui dispozitiv mobil modern are o dimensiune de 320x480 sau 480x320, cu condiția ca utilizatorul să preferă să vizualizeze conținutul web în configurația peisajului. După cum se poate observa din Figura 1, Webkit este capabil să afișeze corect o pagină web concepută pentru desktop-uri standard. Cu toate acestea, atunci când scalarea unei pagini web, textul său poate fi prea mic pentru a citi, astfel încât utilizatorul va trebui să utilizeze funcțiile de defilare, schimbare și creștere înainte de a citi textul. Cum să se ocupe de această restricție?

Cea mai ușoară modalitate de a crea o pagină este la fel de bine afișată în fereastra browserului mobil și în fereastra browserului desktop, aceasta este utilizarea unei etichete metalice speciale viewport..

Eticheta Meta este o etichetă HTML plasată în antetul documentului HTML. Cel mai simplu exemplu de utilizare a etichetei de vizualizare arată astfel: . Atunci când adăugați această metatichetă la pagina HTML, cartografierea acestuia în fereastra browserului mobil este scalată în modul cel mai optim (a se vedea figura 2). Browserele care nu acceptă vizualizarea pur și simplu ignorați această etichetă.

În unele cazuri, este utilă predeterminarea parametrilor de scalare a ferestrelor, așa cum se arată în figura 3.

Pentru a determina parametrii specifici de scalare, specificați valoarea exactă a conținutului de conținut Meta tag: . Prin schimbarea valorii parametrului de scară inițială, imaginea poate fi redusă sau mărită. Pentru platformele iPhone și Android, este mai bine să utilizați valori de la 1,0 la 1.3. Tagul Meta de vizualizare acceptă, de asemenea, scala minimă și maximă, care vă permite să limitați capacitatea utilizatorului de a modifica scala paginii în timpul descărcării sale.

În timp ce constructiv caracteristicile iPhone.În particular, dimensiunea ecranului este de 320x480, aproape neschimbată de la aspectul său, parametrii dispozitivului de pe platforma Android au o gamă destul de largă, deoarece dispozitivele mobile pe această platformă sunt eliberate de diferiți producători și sunt destinate diferitelor grupuri de utilizatori. Astfel, dacă doriți ca aplicația dvs. web să fie populară cu utilizatorii mobili, ar trebui să luați în considerare o posibilă diferență de dimensiune și rezoluție a ecranului, precum și caracteristicile de proiectare ale dispozitivelor baza de date Android..

Experiența arată că, pe lângă diferențele constructive care există între diverse dispozitive mobile, bazate pe Android, software-ul Android în sine încearcă să seteze setările paginii web descărcabile în funcție de proprietățile browserului de dispozitiv mobil. În plus față de stabilitate, platforma Android se caracterizează printr-un set în continuă schimbare de funcții și capabilități. Configurația unui anumit dispozitiv bazată pe Android este cel mai probabil să difere de la setările mediului de dezvoltare, în funcție de versiunea SDK și de producătorul dispozitivului. Figura 4 prezintă ecranul de configurare a browserului în versiunea v1.6 Android Emulator. Setările ecranului oferă utilizatorului posibilitatea de a determina nivelul de scalare a imaginii de pe ecran (departe, aproape, mediu) sau selectați modul de scalare automată a paginii.

În lumea dispozitivelor mobile, cea mai constantă valoare este schimbarea, astfel încât să se ia în considerare dezvoltarea și actualizarea pieței software-ului mobil. De exemplu, setările browserului Sprint Hero includ un set de opțiuni care sunt fundamental diferite de parametrii standard utilizați la încărcarea paginii web. Browserul Hero este construit pe platforma Android V1.5 utilizând un rând de modificări realizate de HTC. Din fericire, când se utilizează Meta Tag Viewport, setările specifice ale eroului vor fi ignorate.

Până în prezent, am văzut că Webkit se confruntă pe deplin cu descărcarea paginii web, deși într-o formă puternic redusă și dificilă. Apoi am extins controlul asupra modului în care pagina este afișată pe ecranul dispozitivului mobil prin utilizarea etichetei Meta de vizualizare. Acum, pagina afișată este mult mai convenabilă pentru citire și navigare. Dar acest lucru nu este încă suficient pentru ca pagina noastră să se uite și să funcționeze ca o aplicație web.

Fabricat pentru dispozitive mobile

Să ne întoarcem la luarea în considerare a caracteristicilor de design ale unei balene web destinate publicului mobil. Ca exemplu specific, luați în considerare pagina de înregistrare serviciul Gmail Google Email.

Această pagină arată ca în fereastra browserului desktop:

În fereastra browserului desktop, conținutul informațiilor este afișat în partea stângă, iar fereastra de înregistrare însăși este în panoul din dreapta. În fereastra browserului mobil, aceeași pagină are un aspect complet diferit.

Pagina prezentată în Figura 6 este cu siguranță concepută pentru utilizatorii de telefonie mobilă. Numai elementele de pagină care sunt solicitate de utilizator sunt afișate pe ecran pentru o muncă ulterioară - nu este necesară scrollarea, decalajul sau scalarea suplimentară.

Acum luați în considerare fereastra de afișare a literelor electronice ale versiunii mobile a Gmail. Deoarece spațiul de pe ecran disponibil pentru aplicație este foarte limitat, fereastra de vizualizare a mesajului are butoane opționale și elemente de navigare. În acest caz, elementele de navigare afișate se suprapun fereastra pentru a vizualiza mesajele. În plus, nu trebuie să utilizați prea multe cadre sau elemente de derulare DIV dacă poate fi evitată. versiune mobila Gmail rezolvă această problemă utilizând meniul pop-up care apare de îndată ce utilizatorul încheie derularea paginii. Meniul pop-up conține 3 butoane: Arhiva., Șterge. și Mai mult. Apăsând butonul Mai mult Elemente de meniu suplimentare apar (a se vedea figura 7).

Aceasta este într-adevăr o aplicație dezvoltată pentru dispozitivele mobile.

Ar trebui să se țină cont de faptul că nu vrem să ștergem în mod deliberat designul și să reducem posibilitățile utilizatorilor de lucru mobili care au dezvoltat browsere multifuncționale pentru platformele iPhone și Android. Din acest punct de vedere, este util să se acorde atenție elementului afișat în partea de jos a paginii Gmail (a se vedea figura 8):

Dacă utilizatorul preferă versiunea extinsă a versiunii desktop, furnizați-l posibilitatea de a descărca pagina corespunzătoare.

Acum luați în considerare cazul când doriți să creați o aplicație utilizând tehnologia web, dar arată ca o aplicație mobilă "nativă".

Platformă specifică conținutului

Următorul pas este de a dezvolta conținut specific unei anumite platforme mobile. În același timp, formatul și interfața paginii sunt determinate astfel încât pagina să pară ca o aplicație "nativă" pentru o anumită platformă, și nu ca un site web partajat standard. Ce înțelegem prin aplicația "nativă"?

Înainte de a vă înlătura în discuția despre cum să faceți o aplicație web cât mai mult posibil pentru o aplicație "nativă" pentru o anumită platformă, să lăsăm la o parte proprietățile generale ale browserelor iPhone și Android și să se concentreze pe scurt pe diferențele vizuale care există între ele aceste platforme.

Aplicațiile iPhone au propriile lor specifice și interfețe. Afișați pe cineva Un instantaneu al ecranului iPhone și, dacă numai această persoană a căzut literalmente a doua zi de la Lună, el va spune aproape sigur că acesta este un iPhone. Afișați aceeași persoană o imagine a ecranului dispozitivului mobil bazat pe Android, iar răspunsul nu va fi atât de neechivoc. Care este motivul? Există mai multe explicații posibile. În primul rând, iPhone-ul a apărut pe piață dispozitive mult mai anterioare bazate pe Android și a reușit să obțină un număr mare de fani. Amintiți-vă că oamenii care stau în coada de așteptare pentru a plăti bani considerabili pentru caracteristicile limitate ale iPhone-ului V1. Îmi place iPhone-ul sau nu, acest produs Apple este în prezent lider de piață. Care este cazul cu Android?

Platforma Android este un produs relativ nou, iar în multe aspecte acționează ca un antipod iPhone, deoarece este proiectat în primul rând pentru comunitatea deschisă. Platforma Android este utilizată într-o varietate de dispozitive (telefoane și alte aparate de uz casnic). Pentru a ușura discuția în acest articol, ne vom limita la utilizarea Android în telefoanele mobile.

În timp, numărul de dispozitive din lume bazat pe Android va depăși numărul de iPhone. Acest lucru se explică prin faptul că dispozitivele platformei Android sunt emise de o serie de companii și vor fi susținute de cele mai diferite rețele de date. Cu un astfel de număr semnificativ de jucători de pe piața mobilă Android, este, fără îndoială, să se aștepte la o anumită fragmentare a pieței pe baza aspectului și a parametrilor dispozitivelor. Această tendință este urmărită pe exemplul interfeței senzuale de la compania HTC. Această aspect atractivă și interfață nu este acceptată de versiunile de bază ale Android SDK și nu sunt compatibile cu alte baze de date Android. Motorola, Google și Verizon și-au fuzionat eforturile pentru a dezvolta un nou dispozitiv Droid bazat pe Android. Acesta este primul produs comercial de pe platforma Android Versiunea 2.0.

Comparați o varietate de sisteme bazate pe Android cu un aspect uniform al iPhone-ului. iPhone este o proprietate deosebit de valoroasă a Apple. Aspect aplicații iPhone. Poate fi ușor schimbată în timp, dar aceste schimbări minore sunt puțin probabil să se compare cu diferitele versiuni ale sistemelor Android, numărul căruia este suficient de mare chiar și acum când platforma este la începutul dezvoltării sale.

Deci, ce trebuie făcut pentru a maximiza aspectul și o interfață de aplicație la programele "native"?

Dacă o astfel de sarcină se confrunta cu noi înainte de apariția Web 2.0, ar fi o problemă foarte gravă. Încercările timpurii de a sprijini mai multe browsere client (mobile și staționare) s-au bazat pe utilizarea mai multor abordări, de exemplu:

Dezvoltarea site-urilor complet paralele
Generarea dinamică a conținutului în funcție de parametrul de utilizare
Utilizați servere proxy care ar putea transforma conținutul în funcție de fiecare dispozitiv specific. Tehnologia similară a fost utilizată cu succes de către RIM pentru a organiza accesul la e-mail de la dispozitivul mobil al unui client.

Astfel de abordări pot fi destul de acceptabile în cazurile în care dezvoltarea este efectuată de echipe mari. Și ce să facă restul lumii? Nu toată lumea are resurse financiare semnificative, specialiști cu înaltă calificare și un timp nelimitat de timp pentru a pune în aplicare astfel de strategii. În plus, după cum am observat deja, internetul mobil al generației anterioare de browsere nu poate fi numit convenabil sau popular în utilizare, deci în orice caz nu trebuie să vă opriți metodele și abordările învechite.

Din fericire, nu trebuie să o facem. În epoca webkit și CSS, diferența în aspectul și interfața diferitelor dispozitive mobile poate fi depășită prin utilizarea stilului de stiluri și interogări media (interogare media), permițând utilizarea diferitelor stiluri în funcție de tipul specific de dispozitiv. Tehnologia de solicitare media vă permite să obțineți informații despre client. În mod tradițional, browserul trimite un usergent pe server care permite serverului să identifice un anumit browser și să definească conținut care trebuie transmis clientului. Folosind interogări media, browserul selectează stilul paginii pe baza capacităților sale. Următorul exemplu demonstrează selecția tabelului de stil proiectat pentru smartphone-uri: . Iar această solicitare determină tabelul de stiluri pentru computerele desktop: .

Internet Explorer V6.

La momentul acestei scrieri, Internet Explorer V6 a ocupat aproximativ 20-30% din piața browserului comun, dar luarea în considerare a capabilităților IE V6 nu este inclusă în sarcinile acestui articol.

Puteți găsi mai multe informații detaliate despre interogările media din versiunea preliminară a specificației (vezi secțiunea).

Luați în considerare un exemplu de utilizare a interogărilor media pentru a dezvolta o aplicație care afișează starea serverelor de rețea.

Programul de monitorizare a rețelei

Sarcina acestei aplicații este de a monitoriza funcționarea mai multor servere. Dezvoltatorii de software independenți trebuie să ofere adesea suport pentru mai multe aplicații pe mai multe servere. Dacă vă dezvoltați în orice moment, atunci ați întâlnit deja diferite tipuri de servere și diferite tipuri de aplicații. Toate acestea înseamnă că această situație este destul de posibilă atunci când nu puteți utiliza un singur instrument pentru urmărirea activității tuturor aplicațiilor necesare. În acest caz, este logic să profitați aplicatie de mobil Pentru monitorizarea rețelei (Netmon). Aplicația oferă toate funcționalitățile necesare, rămânând în același timp flexibil și convenabil pentru a accesa dispozitivul mobil.

Aplicația Netmon include o listă de servere a căror muncă trebuie urmărită. Pentru fiecare server, sunt colectați indicatori de performanță cheie (KPI). Indicatori cheie de performanță - instrumentul principal, care de mulți ani folosesc studenții MBA pentru a evalua situația actuală de afaceri. Din punctul de vedere al hostingului aplicațiilor web, următorii indicatori pot fi utilizați ca KPI:

Numărul de tranzacții în ultima perioadă de timp
- Comenzi
- Cereri de catalog.
- Mesaje de e-mail
- Numărul de vizualizări de pagini
Timpul a trecut de la ultima tranzacție
- Ordin
- Exchange datele electronice
- Mesaje de la partenerul de afaceri
- Descărcați fișierul de la furnizor prin FTP
Este disponibilă baza de date
Ultima dată de rezervă
Suma medie a comenzii (în dolari)
Spațiul liber pe disc
Lățime de bandă pentru ultima oră, zi, lună

Indicatorii de mai sus și alți parametri de operare similari vă permit să estimați starea unui anumit sistem sau a unei aplicații. Deci, de exemplu, în timpul sezonului de vacanță, vedem numărul de comenzi plasate pe unele dintre site-urile noastre. Dacă datele nu prezintă o creștere stabilă a comenzilor cu fiecare oră, efectuăm o analiză mai detaliată a situației.

Deoarece activitatea unei aplicații specifice necesită condițiile și resursele sale, NETMON trebuie să aibă o flexibilitate suficientă pentru a ține seama de caracteristicile fiecărei aplicații. Pentru a asigura un astfel de nivel de flexibilitate, vom începe cu definiția celei mai generale structuri a datelor care vă permite să luați în considerare parametrii de stare pentru fiecare sistem. În partea 2, vom discuta mai detaliat despre locul în care provin aceste date și cum sunt actualizate. Până în prezent, limitați-vă la următoarele informații:

Numele site-ului
URL-ul site-ului (pagina de pornire)
URL pentru actualizări
Stare: OK sau nu
Rezumat scurt: o descriere a stării serverului, care va avea fie valoarea OK, fie conține un șir de text care indică cea mai gravă problemă pentru acest server
Elemente: Acesta este un set de perechi de nume / valoare pe care trebuie să le transmitem valorile actuale ale KPI pentru site-ul corespunzător.

Aplicația noastră va afișa indicatorii de eficiență rezultată într-un formular convenabil pentru a naviga la utilizarea maximă a capabilităților CSS, jQuery și Webkit pentru a atrage atenția utilizatorului asupra zonelor problematice. După cum am menționat deja, obiectivul principal în dezvoltarea acestei aplicații este capacitatea de ao executa pe iPhone, platformă Android și pe desktop în browserul Safari.

Dezvoltarea unei cereri de monitorizare a rețelei

Paginile web moderne trebuie create într-un formular declarativ care definește structura organizatorică și conținutul paginii. Poziționarea și formatarea unei pagini se efectuează utilizând stiluri CSS cascadă și, în majoritatea cazurilor, utilizând JavaScript. De fapt, bibliotecile JavaScript au devenit atât de populare încât utilizarea lor astăzi este mai degrabă o regulă decât o excepție. În apendicele luate în considerare în acest articol, vom folosi biblioteca populară JavaScript JQuery. Aplicația noastră va fi efectuată pe platforma iPhone, Android și pe desktop. Acest lucru va folosi același cod HTML, iar toate diferențele necesare vor fi implementate în stiluri. Trebuie remarcat aici că noi nu am acordat eforturi semnificative pentru a dezvolta o apariție atractivă a cererii. Mai mult, riclurile au fost alese în mod conștient ca fundal, fără a armoniza reciproc cu o culoare diferită pentru a atrage atenția suplimentară a cititorului la organizarea foilor de stil. În partea a 2-a, vom îmbunătăți ușor apariția aplicației, în timp ce codul HTML arată ca arătat în listarea 1.

Listarea 1. Aplicația HTMLD

Resursele mele de rețea.

Agentul meu de utilizator.

O vizionare rapidă a codului HTML propus vă permite să alocați următoarele caracteristici principale:

Codul utilizează două fișier extern. JavaScript: un fișier de bibliotecă JQuery și un fișier auxiliar pentru aplicația noastră.
Pentru a scala conținutul afișat din cod utilizând eticheta Meta de vizualizare.
Foaia principală de stil este determinată de fișierul netMon.css.
Pentru a determina foaia de stil auxiliar, utilizați parametrul de utilizare. În funcție de valoarea sa, foaia de stil va fi încărcată pentru iPhone, Android sau pentru un browser desktop.
În procesul de încărcare a unei pagini, jquery și funcția auxiliară definită în fișierul Netmon.js sunt utilizate pentru a afișa datele.
În codul principal al paginii, se utilizează mai multe etichete DIV.
În cele din urmă, în cod există o legătură cu pagina care arată șirul de utilizare. Această legătură nu are nimic de-a face cu aplicarea cererii și este utilizată exclusiv pentru demonstrație.

Înainte de a continua analiza detaliată a foilor de stil și a fișierului Netmon.js, care, de fapt, determină operațiunea principală a aplicației, să aruncăm o privire la cererea noastră în starea sa actuală. Încă o dată, rețineți că folosim trei foi diferite de stil: una pentru fiecare dintre cele trei platforme acceptate. Astfel încât procesul de dezvoltare a aplicațiilor a fost mai vizual, fiecare tabel determină culoarea sa de fundal. În Figura 9, pagina noastră este deschisă în browser-ul desktop desktop și are un fundal albastru.

Figura 11 prezintă aspectul aplicației în fereastra de browser iPhone (culoarea de fundal - verde).

Tabelul principal al stilurilor stocate în fișierul Netmon.js este prezentat în listarea 2.

Listarea 2. Foaia de stil de bază

Corp (culoare: # 888888; Font-Family: Helvetica; Font-Dimensiune: 14px; Marginea: 0px; Padding: 0;) -Width: 1px; -Webkit-frontieră-stânga-rază: 8px; -Webkit-frontieră-dreapta-rază: 8px; -Webkit-Bord-Bord-Radius: 8px; -webit-frontieră-fund - dreapta-rază: 8px;) .ok (culoare: # 000000, stânga sus., Partea dreaptă, de la (#CCC), la (# 999)); ) .even (imagine de fundal: -webit-gradient (liniar, partea de sus, partea dreaptă, de la (# 999), la (#CCC));) Servertete (culoarea: # 000;) #header H1 (margine: 0; Hatding: 0; Text-align: centru; Culoare: # 000;)

Folosind tabelul de stiluri pentru fiecare platformă vă permite să implementați următoarele sarcini:

Modificați decizia de culoare a paginii. Acest lucru permite, în primul rând, să demonstreze clar rolul foii de stil și, în al doilea rând, să arate cât de ușor este să selectați foaia de stil dorită în funcție de valoarea parametrului de utilizare.
Setați dimensiunea diferită a fontului pentru platforma mobilă și desktop.
Verificați funcțiile Webkit corespunzătoare. Ar fi esențial dacă browserul a fost folosit pentru a lucra fără suport Webkit, de exemplu, Firefox.

Listarea 3 prezintă fișierul de cod iPhone.Css.

Listarea 3. Fișierul iPhone.Css

Corpul (fundal-culoare: # 00ff00;) .sertaRy (-Webkit-frontieră-stânga-rază: 8px; -Webkit-frontieră-dreapta-rază: 8px; -Webkit-frontieră-stânga-rază: 8px; -Webkit-Border-Bord-dreapta-Radius: 8px;) .Name (font-dimensiune: 2em;) .Summary (font-dimensiune: 1,5em;)

După cum vedem, ca culoare de fundal Eticheta corpului este utilizată verde (# 00F00), iar dimensiunea fontului este configurată pentru o citire mai convenabilă de pe ecranul dispozitivului mobil. În cele din urmă, să aruncăm o privire la fișierul Netmon.js, care definește lista de servere și o funcție care iese la fiecare server (utilizat în listarea 4). O parte din codul de fișier pentru Brevity este ratată, textul său complet este disponibil în secțiune).

Listarea 4. Fișierul Netmon.js

VAR NETMON \u003d (Inițializare: Funcție () (), Resurse: [Nume: "MISERVICES.com", Homeurl: "http://msisiservices.com", Pingurl: "http://msisiservices.com/netmon.php" , Stare: "OK", Rezumat: "OK", articole: [Nume: "DISKSPACE", valoare: "22.13 GB"), (Nume: "Baza de date Up?", Valoare: "Da")] (Nume: "Server 2", Homeurl: "http: //ruurl", Pingurl: "http: //someurl/netmon.jsp", Stare: "OK", Rezumat: "OK", articole: [Nume: "Diskspace", Valoare: "100,8 GB"), (Nume: "Baza de date în sus?", Valoare: "da")]), // intrări suplimentare tăiate pentru Brevety], Render: Funcție (index, ITM) (încercați var ret \u003d "; Ret + \u003d "

"; Ret + \u003d" "+ ITm.Name +" Spectacol.
"; dacă (iTm.Status! \u003d" OK ") (ret + \u003d" - "+ iTm.Summary +"
";) Ret + \u003d"

"jquery.ech (ITM.Items, Funcție (J, ItemDetail) (ret + \u003d"\u003e "+ itemDetail.name +" \u003d "+ itemDetail.value +"
";)); Ret + \u003d"

"; Ret + \u003d"

"; Return ret;) captura (e) (returnare

Eroare la randarea elementului ["+ \u200b\u200bITM.NAME +"] "+ E +"

"; } } };

Dacă bara de stare a unui server nu este egală cu OK, atunci înregistrarea serverului corespunzător este afișată în roșu, așa cum se poate observa din definiția clasei în fișierul CSS.. În plus, dacă verificarea stării serverului a dezvăluit unele probleme (starea nu este egală cu OK), ieșire suplimentară scurta descriere Probleme. În figurile 9-11, se poate vedea că serverul 4 nu are liber spatiu pe disc. Când faceți clic pe șirul acestui server, pe ecran este afișat un mesaj detaliat (a se vedea figura 12).

Când faceți clic pe link spectacol. În partea dreaptă a numelui serverului, se deschide pagina de pornire a acestui server. Prezența unei astfel de legături este foarte convenabilă din două motive: În primul rând, vă va scuti de nevoia neplăcută de a memora adresa URL a fiecărui server și, în al doilea rând, vă va salva de la o nevoie mai neplăcută pentru a intra în această adresă URL de la Tastatura unui dispozitiv mobil (lăsați chiar și cel mai confortabil).

Deci, dacă reușim să lansăm cu succes Notmon pe dispozitivul dvs. mobil, sarcina de suport pentru server nu ar trebui să provoace probleme.

Concluzie

Acest articol introduce principiile dezvoltării de aplicații web pentru iPhone și Android folosind tehnologia WebKit. În partea 2, vom extinde capacitățile aplicației noastre prin adăugarea funcției de actualizare a datelor utilizând apelurile AJAX.

Transfer

Kit Web. nu este cutie neagră. Aceasta este o cutie albă. Și nu doar alb, dar, de asemenea deschis cutie.

Deci, să încercăm să ne dăm seama în unele lucruri:

Ce este Webkit?
Care este webkit-ul?
Cum utilizează WebKit browserele webkit?
De ce mulți webkit nu sunt aceiași?

Componentele standard ale browserului web

Să menționăm mai multe componente ale browserelor moderne:

Analiza HTML, XML, CSS, JavaScript)
Layout)
Realizarea textului și a graficelor
Decodarea imaginilor
Interacțiunea cu GPU.
Accesul la rețea
Accelerarea hardware

Care dintre ele sunt comune tuturor browserelor Webkit? În mare măsură, numai primele două.

Componentele rămase fiecărui Webkit "Port" implementează în felul său. Să ne ocupăm de ceea ce înseamnă.

Porturile Webkit.

Există multe "porturi" webkit și vă oferim Aria Hidatyat, Hacker Webkit și aceștia. Director în Sencha dreptul de a spune despre acest lucru:

Cea mai populară asociere față de Webkit este de obicei vizualizarea web a Apple, care rulează pe Mac OS X (prima și originala bibliotecă webkit). După cum puteți ghici, diferite interfețe sunt implementate folosind diferite biblioteci native Mac OS X, mai ales În componenta COREFOUNDATION. De exemplu, dacă definiți un buton plat culoare, cu o rază specială de circuit, Webkit știe unde și cum să desenezi acest buton. În același timp, redarea finală a butonului (sub formă de pixeli Monitorul utilizatorului) scade pe umerii coregrafelor.

După cum am menționat mai sus, coregrafele utilizate este unic pentru fiecare Webkit Port. Chrome pentru Mac, de exemplu, folosește Skia.

La un moment dat, Webkit a fost "portat" pentru diferite platforme, atât desktop cât și mobil. Această variație este denumită în mod obișnuit "portul Webkit". Pentru ferestrele Safari, Apple, de asemenea, independent "Webkit Webkit" pentru a rula sub Windows utilizând Biblioteca CoreFoundation CoreFoundation (cu implementare limitată).

... În ciuda faptului că safari sub ferestre este acum mort.

În plus, au existat și multe alte "porturi" (a se vedea lista completă). Google a creat și continuă să-și susțină portul de crom. Există, de asemenea, un webkitgtk bazat pe GTK +. Nokia (și acum Trolltech, care a răsucite-o) sprijină portul QT WebKit, care a devenit popular ca un modul QTWebkit.

Unele porturi Webkit.

Safari.
- Safari sub OS X și Safari sub Windows două porturi diferite
- Adunarea Night WebKit este o ansamblu a codului sursă al portului Mac ", care este folosit pentru Safari, doar mai nou
Safari mobil.
- Dezvoltat într-o ramură privată, dar mai târziu a fost deschisă.
- Chrome sub iOS (utilizează Apple Webview; un pic mai târziu despre diferența)
Chrome (crom)
- Chrome sub Android (utilizează direct "Port" Crom)
- Cromul este, de asemenea, baza pentru browsere: Yandex ,, Sogou, și în curând, Opera.
Android Browser.
- Utilizează cel mai recent cod sursă Webkit disponibil în momentul eliberării.
Mai multe porturi: Silk Amazon, Dolphin, BlackBerry, Qtwebkit, WebkitgTk +, Portul EFL (TIZEN), WXWebKit, WebKitwince, etc

Ceea ce este comun în toate browserele Webkit

În primul rând, să ne uităm la funcțiile generale care sunt utilizate în toate browserele Webkit:

Știți că este amuzant, am făcut câteva încercări de a scrie acest paragraf. Și de fiecare dată când membrii echipei Chrome mi-au corectat cum vedeți ...

Și, în primul rând, WebKit dezasamblează HTML în mod egal. Ei bine, cu excepția faptului că cromul este singurul port în acest moment, unde este activat suportul pentru parsarea HTML.
... bun, dar după parsarea HTML, Dom Arbore este proiectat în mod egal. Ei bine, de fapt, umbra DOM este inclusă numai pentru portul de crom, adică construirea DOM variază. De asemenea, pentru elementele de utilizator (elemente personalizate).
... Ei bine, Webkit creează ferestre și documente obiecte pentru toată lumea în mod egal. Adevărat, deși proprietățile și desenele pe care le oferă pot depinde de utilizarea comutatoarelor de caracteristici (steaguri de caracter).
... parsing css același lucru. Mâncarea CSS și convertirea acestuia în CSSM este destul de standard. Da, deși Chrome suportă doar -Webkit prefixe atunci când Apple și alte browsere suportă prefixe învechite -KHTML- și -Apple -App.
... Layout ... poziționarea? E ca și pâinea cu unt. Peste tot același lucru, nu? Ei bine, deja! Layout-ul de subpixeli și aritmetica de dumping saturat face parte din Webkit, dar diferă de portul la port.
Super.

Deci, este dificil.

Acum, să încercăm să rezumăm ceea ce este comun în lumea Webkit ...

Ceea ce este comun pentru fiecare port webkit.

Dom, fereastră, document
mai mult sau mai putin
Cssom.
Colaborare CSS, proprietate / valoare
diferențele de prefixe ale producătorilor
HTML Parsing and Dom
La fel, dacă uităm de componentele web.
Layout și poziționare
Flexbox, flotoare, bloc de formare bloc ... Toate totalul
Instrumente de interfață cu utilizatorul și instrumente de dezvoltatori, tip Chrome DevTools Este Inspector Webkit.
Deși din aprilie anul trecut, Safari își folosește propriul inspector de safari, non-Webkit, cu surse închise.
Funcții precum mulțumiri, pushastate, fișier API, cele mai multe transformări CSS Matematice, API audio web, localstatorage
Deși punerea în aplicare poate fi diferită. Fiecare port poate folosi propriul sistem de stocare pentru localist și poate utiliza diferite API audio pentru Web Audio API.

Nu devine cu totul clar, deci să încercăm să ne uităm la unele diferențe.

Acum, care nu este comună porturilor Webkit:

Toate conectate cu GPU
- Transformare 3D
- WebGL.
- Decodarea video
Reclamat 2d pe ecran
- tehnologia de netezire
- Renunțarea la gradienții SVG și CSS
Realizarea textului și a transferurilor
Tehnologii de rețea (SPDY, Pre-redare, Transport de webocket)
Motorul JavaScript
- motorul JavaScriptCore se află în depozitul WebKit. Dar există legături în Webkit și pentru el și pentru V8.
Realizarea elementelor formularului
Comportamentul etichetelor video și codecuri audio și suport
Decodarea imaginilor
Navigare înapoi / înainte
- Partea pushstate ()
Funcțiile SSL, cum ar fi securitatea strictă a transportului și pinii-cheie publică

Să aruncăm o privire la unul dintre ei: 2D grafică Depinde de port, folosim biblioteci complet diferite pentru redarea pe ecran:

Diagrama ar trebui să ajute:

Multe dintre componentele WebKit sunt comutate (afișate de gri).

"Webkit este ca un sandwich. În alte chestiuni, în cazul cromului, este mai mult așa. Tacos gustos de tehnologii web.
Dmitri Glazkov, Hacker Chrome Webkit. Campionul componentelor web și al umbrei Dom.

	Chrome (OS X)	Safari (OS X)	Qtwebkit.	Android Browser.	Chrome pentru iOS.
Redare.	Skia.	Coregrafele.	QTGUI.	Android Stack / Skia	Coregrafele.
Rețele.	Stack de rețea de crom	Cfnetwork.	Qtnetwork.	Fork de stiva de rețea a cromului	CHROMUM SKING.
Fonturi.	CoreText prin Skia.	Coretext.	QT interne.	Android Stack.	Coretext.
JavaScript.	V8.	JavaScriptCore.	JSC (V8 este folosit în altă parte în QT)	V8.	Javascriptcore (fără jitting) *

* Nota de subsol despre Chrome pentru iOS. El folosește Uiwebview, după cum probabil știți. În conformitate cu posibilitățile UiwebView, aceasta înseamnă că poate utiliza aceeași redare a motorului, precum și Safari Mobile, JavaScriptCore (și nu V8) și un singur model filetat. Acum, un cod este împrumutat de la crom, cum ar fi un subsistem pentru a lucra cu o rețea, marcaje de infrastructură de sincronizare, omnibox, valori și rapoarte de eșec (Raportarea accidentului). (De asemenea, JavaScript este atât de rar o blocare pe dispozitivele mobile, care lipsa compilatorului Jitting are un efect minim.)

Ei bine, de ce am venit la ce?

Și așa, toate Webkit este complet diferit acum. Sunt speriat.

Opera sa mutat doar la WebKit. Ce se va întâmpla de la asta?

... și Webkit de ansamblu de noapte. Ce este?

browsere web

dezvoltare web

Adaugă etichete

Un motor de browser este un program special care funcționează cu pagini web. Procedează pagina HTML încărcată de pe Internet și transformă codul său în reprezentarea obișnuită. Motoarele de browser Internet sunt utilizate în browsere, precum și în clienții poștali. Nu fiecare browser web este creat pe propria platformă unică. Multe dintre ele folosesc soluții populare și testate. Acest articol discută care există platforme pentru a crea browsere și ceea ce diferă unul de celălalt.

Utilizarea motoarelor (motor de randare) pentru a crea browsere are multe avantaje:

Este facilitată de căutarea și eliminarea erorilor de cod.
Capacitatea convenabilă de a îmbunătăți o componentă separată în mai multe programe în mai multe programe.
Este facilitată de procesul de schimbare a interfeței grafice a aplicației.
Simplitatea creării de noi programe pentru dorințele unui anumit dezvoltator sau necesită un anumit utilizator.

Astfel de soluții sunt foarte des utilizate în programare: când creați jocuri video, sisteme de operare ale programelor complexe și așa mai departe. Unii specialiști lucrează la îmbunătățirea și optimizarea motorului, introducerea de noi oportunități și caracteristici utile. Alții sunt implicați în crearea programelor înșiși pe platforma dezvoltată.

Un exemplu viu este motorul Trident de la Microsoft. Este unul dintre seturile mari de aplicații ale acestei corporații. Dezvoltarea dezvoltă - dezvoltarea și proiectele derivate.

Fiecare decizie are avantajele și contra. De exemplu, mulți utilizatori observă că Mozilla Firefox funcționează mult mai bine cu un număr mare de file deschise decât concurenții. Aceasta este realizarea platformei pe baza căreia browserul este creat.

Trident

Când un utilizator instalează un nou sistem de operare Windows, primul browser web cu care se confruntă este Internet Explorer. Prin urmare, motorul său este luat în considerare în prima revizuire.

Trident, sau MSHTML - o componentă software destul de veche dezvoltată de Microsoft Corporation pentru nevoile sale. Proiectul evoluează în mod continuu din 1997. Folosit în Microsoft Web Explorer - Internet Explorer, Client Email Outlook, Windovs Explorer (Program pentru lucrul cu fișiere) și alte aplicații multiple ale acestui dezvoltator.

Utilizatorii sunt considerați unul dintre cele mai nereușite motoare de browser. Nu suportă expansiuni modulare terță parte - plug-in-uri, afișează incorect multe pagini de internet, nu are cea mai rapidă viteză de lucru.

Cu ieșirea Windows 10, platforma Trident a evoluat în Edgethtml. Dezvoltatorii au luat un motor nereușit înalți ca bază și a creat unul nou care îndeplinește toate cerințele utilizatorilor moderni. Judecând de repere (performanță de performanță și viteză), Microsoft Edge (observator creat pe Edshttml) a prins și chiar a depășit programele populare utilizate pentru a crea browserele Google Chrome și Mozilla Firefox.

Gecko.

Gecko - motorul utilizat în browserul de internet popular Mozilla Firefox și o varietate de alte programe. Codul sursă al programului este în acces liber, adică fiecare WISP vă poate crea propriul browser sau client de e-mail bazat pe Gecko.

Un alt avantaj al Heko - Cross-Platform. Funcționează la majoritatea covârșitoare a sistemelor de operare moderne: atât pentru computerele personale, cât și pentru dispozitivele mobile (spre deosebire de Internet Explorer, care operează numai pe Windows).

Gecko sprijină toate standardele și tehnologiile moderne utilizate la crearea de site-uri web. Este una dintre cele două platforme de browser cele mai populare. Suportă plug-in-urile. Benchmark I. experienta personala Utilizatorii arată că browserele de pe acest motor consumă cele mai puține resurse calculator personal și lucrați în mod stabil cu un număr mare de file (de exemplu, câteva sute).

Bazat pe Heke a creat un popular Browser de Internet Mozilla Firefox, clientul de e-mail Thunderbird, Sunbird Task Scheduler, precum și un browser web anonim cu suport încorporat pentru VPN-Technologies Tor.

Khtml.

Nu este o platformă deosebit de bine cunoscută folosită pentru a crea un manager de fișiere Konqueror al mediului KDE. Pentru utilizatorii care nu sunt familiarizați cu sistemele de operare ale familiei Linux, este interesant deoarece pe baza acestui proiect, a fost creat cel mai popular motor din lume, despre care vorbim.

Webkit.

Acest motor este proiectat de faimoasa Corporation Apple, bazată pe soluția menționată mai sus - KHTML. Lansat în 2001, acest proiect a primit dezvoltarea colosală și a devenit una dintre cele mai utilizate în lume.

Pe baza Webkit, browserul Web Safari a fost creat, utilizat în mod implicit în dispozitivele iOS și liderul renumit între browsere - Google Chrome. Numărul copleșitor programe moderne Pentru a gestiona paginile web de conținut, se bazează pe WebCikes. În plus, este folosit în aplicație populară Steam, conceput pentru distribuția digitală a jocurilor pe calculator de la supapă.

În mod similar cu Gecko, Webkit este încrucișată și a început perfect pe toate platformele populare. Arată o stabilitate ridicată și performanță. Datorită faimosului mare, marea majoritate a extensii sunt elaborate în temeiul prezentei decizii. De asemenea, utilizat în platforme mobile populare, cum ar fi Android și iOS. Este un motor gratuit, adică, poate fi folosit gratuit de orice persoană pentru a vă crea propriile aplicații.

În 2013, Webkit a fost separat o nouă ramurădeținute de Google - Blink Corporation. Acest proiect se bazează pe versiunea CHROME 28 (și toate ulterioare), precum și reconvenția sa open source - crom. Cromul este folosit pentru a crea un browser Yandex popular în Rusia. Începând cu a 15-a versiune, browserul de operă sa mutat pentru a clipi.

Presto.

Creat în 2003, motorul browserului Presto a fost utilizat ca bază pentru Opera. Dezvoltat timp de 10 ani. În 2013, dezvoltatorii de operă au decis să refuze să utilizeze Presto în favoarea clipirii mai puternice și mai populare de la Google. În prezent, dezvoltarea proiectului este oprită.

Articolul a fost util?

În acest articol vom analiza trei browser pe motorul web popular webkit. Când vorbim despre alegerea unui browser web, utilizatorii tind să se uite spre cele mai renumite programe: Google Chrome, Opera, Mozilla Firefox, Internet Explorer. În același timp, mulți uitați sau nu știu că același Firefox, Chrome și, mai recent, Opera sunt create pe baza proiectelor open source și, prin urmare, aceste programe pot fi modificate.

Această caracteristică duce la faptul că mulți programatori au creat mai mulți analogi populare browserecare oferă suficiente caracteristici interesante. Deci, luați în considerare mai mulți reprezentanți ai unui astfel de software.

Se aplică gratuit, are o interfață rusă, care rulează pe Windows, Android, Mac, iOS. Acest browser a fost cunoscut timp de zece ani în urmă, numit MyIE2 și a fost o adăugare la Internet Explorer, dar de atunci o mulțime sa schimbat și acum programul utilizează motorul implicit Webkit.

În ultima, versiunea a 4-a, browser-ul oferă mai multe funcții utile, dintre care cea mai interesantă este posibilitatea de a depozita informații în "nor". Acest lucru vă permite să transferați informații între diferite dispozitive din program pentru a transfera informații între diferite dispozitive, gadget Android, produs de campanie Apple sau PC staționar.

Interfața de browser Maxthon Cloud este realizată în stilul cromului, dar are mult mai multe caracteristici. Pe bara laterală afișează insigne pentru a accesa extensiile. Este convenabil că un singur clic puteți dezactiva sau activa toate add-on-urile instalate și puteți descărca noi de pe un site special.

Se aplică gratuit, are o interfață rusă, care rulează pe Windows. Produsul COMODO, care este mai cunoscut ca dezvoltator de software de protecție. Comodo Dragon nu mai dezvoltă, ci ca un ansamblu, deoarece nu este diferit de funcționalitatea din Chrome.

Diferențele față de browserul original au ieșit prea mult, iar toate se referă la probleme de securitate. Prima diferență cheie față de Google Chrome este într-adevăr mod incognito, COMODO Dragon nu utilizează ID-ul unic de utilizator și referință HTTP care nu vă permite să urmăriți utilizatorul în rețea.

A doua diferență este forma-cheie a securității comodo a utilizatorului. Asigură prezența serverelor DNS sigure pentru transmisia de trafic. În plus, la cererea utilizatorului, traficul poate merge nu numai Dragon, ci și toate celelalte aplicații. Serverele Safe DNS blochează automat accesul la site-urile care au fost notate ca fiind nesigure în rețeaua proprie de determinare a amenințărilor web ale Comodo.

Se aplică gratuit, are o interfață rusă, care rulează pe Windows. "Yandex.browser" - un browser recent bazat recent bazat pe crom de la compania rusă Yandex. În acest produs, dezvoltatorii au adăugat pur și simplu servicii Yandex la panoul de legătură Rapid. Modul "turbo", care poate fi găsit în Opera a fost de asemenea adăugat. În general, acesta a dovedit nici un browser rău destinat utilizatorilor Yandex.