Mobilno kompatibilna WEB sjedišta

| 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Najvažniji dio glede Internet komunikacije je TCP/IP skup protokola. Gotovo svi današnji operativni sustavi koriste navedene skup protokola na isti način i navedeno savršeno funkcionira u prva četiri sloja OSI modela (Transport Layers). Ti su slojevi odgovorni za pristup fizičkom mediju, pristup odredištu i razmjenu podataka. Razlike postoje u narednim slojevima zaduženim za uporabu podataka i njihov prikaz (Application Layers). Na primjer, programi za razmjenu elektroničke pošte, zvučnih i video zapisa, te Internet sadržaja u web preglednicima ne moraju na jednak način prezentirati podatke. Web preglednici koriste na različitim uređajima, uključujući stolna računala, prijenosna računala, tablete i pametne telefone.

Web preglednik je programska potpora za pristup informacijama na World Wide Webu (WWW). Kada korisnik zatraži određenu web stranicu, web preglednik pronalazi potreban sadržaj s web poslužitelja, a zatim prikazuje rezultirajuću web stranicu na korisnikovom uređaju. Ključna programska komponenta svakog većeg web preglednika je mehanizam jezgre, također poznat i kao mehanizam prikaza ili motor renderiranja, ili jednostavno motor analogno koncepciji automobila.

WEB stranica u osnovi se sastoji od ovih dijelova:

HTML kod - 'HyperText Markup Language' je poput kostura web stranice. Stvara strukturu. Kao i podjelu web mjesta gdje se nešto treba smjestiti. Koristi oznake (TAG) za definiranje strukture.
CSS kod - 'Cascading Style Sheets' je poput kozmetičkog salona za HTML. Koristi definirana svojstva i vrijednosti kojima određuje stil odabranim oznakama (TAG-ovima) HTML-a.
JavaScript kod - Vrlo moćan skriptni jezik usklađen s prirodom web stranica, koji im dodaje interaktivnost i funkcionalnost. Koristi se za dodavanje dinamičkog sadržaja ili radnji na web sjedište, uključujući animacije, dinamično mijenjanje sadržaja i još mnogo toga. Može se koristiti jQuery knjižnica izgrađena s JavaScript-om.

HTML i CSS nisu programski jezici. Oni su strukturni jezici za označavanje. Osnovna pravila pisanja koda možete naći ovdje. Sve zajedno je pod nadzorom je 'web-browser engine'. Tijekom vremena koristile su se mnoge vrste 'engin-a'. Najpopularniji su:

WebKit - Safari preglednik, kao i svi preglednici koji se nalazi u iOS dučanu (App Store).
Blink - Google Chrome i svi ostali preglednici koji se temelje na Chromium projektu, kao što su Microsoft Edge, Brave i Opera.
EdgeHTML - Univerzalne aplikacije za Windows platformu razvijene od Microsofta; nekada u Edge pregledniku.
Gecko - Firefox preglednik i Thunderbird e-mail klient, te sljedbenici kao SeaMonkey i Waterfox.

Kako na samom početku uporabe navedenih komponenti za izradu web stranica, tako i danas, svaki web-browser engine ima 'svoje mišljenje' kako stranicu treba prikazati, što je popriličan problem u razvoju stranica sjedišta. Još kad se tome pridoda da se sadržaj nekog sjedišta mora čitljivo prikazati na različitim uređajima s vrlo različitim sklopovljem i veličinom prikaza na ekranu, razvoj stranica web sjedišta još se više komplicira.


Slika 6.1 Preslagivanje sadržaja stranice za mobilnu kompatibilnost.

Na slici 6.1 vidi se da prikaz na velikom monitoru mora rearanžirati ako se isti sadržaj želi prikazati na tabletu ili mobitelu. To znači da prikaz slike na velikom monitoru mora doživjeti promjene u smislu prilagođavanja veličine slike i teksta. U tom smislu rješenje je izrada istih sadržaja posebno za mobilne uređaje, ili automatsko podešavanje sadržaja prema veličini prikaza na zaslonu da bi se zadovoljila kompatibilnost prikaza za različite uređaje. Drugi opisani pristup mnogo je složeniji.

Moderna tehnologija omogućila je da mobilni uređaji imaju vrlo veliku rezoluciju. No to ne znači da se cijeli sadržaj s velikog monitora može samo prenjeti na mobilni uređaj jer bi u potpunosti postao nečitak zbog malih slova. S druge srane neki film može se prikazati u punoj fizičkoj rezoluciji monitora ali se veličina podnatpisa (titlova) mora prilagoditi. Znači treba zadovoljiti mnogo različitih zahtijeva glede programske potpore za mobitele.

Prema prethodno navedenom treba razlikovati fizičku rezoluciju mobilnog uređaja u odnosu na rezoluciju prikaza. Naredne tablice nabolje prikazuju taj odnos za različite tehnološke izvedve mobilnih uređaja.

Fizička i rezolucija prikaza za mobitele

Tablica* 6.2 Fizička rezolucija i rezolucija prikaza mobilnih uređaja. ( + / - )

Iz tablica je vidljivo da vrlo velika fizička rezolucija mobitela omogućava interpolirani i vrlo čitak prikaz u manjoj rezoluciji prikaza slike koja obično ne prelazi 500px po užoj strani mobitela (širini). Mobitel se uobičajeno koristi uspravno te je širina bitnije obilježje od visine.

Naredna slika prikazuje sadržaj stranice u rezoluciji od približno 360px × 780px, iako je fizička rezolucija mobitela mnogo veća, i prikazana je u lijevom gornjem uglu slike (JavaScript izračun).

Slika 3. Rezolucija prikaza.

Na slici 3 prikazan je samo vrh slike koja se na mobitelu prikazuje uspravno. Veličinu slike nadzire parametar koji se naziva VIEWPORT. Vrijednost ovog parametra može se skalirati u rasponu od 0.100-10.000. Za desktop monitor obično iznosi 1, ali ako je monitor UHD rezolucije može biti i veći od 1. Za mobitele je manji od 1 i njegova veličina regulira se pomoći CSS postavki i/ili JavaScript uradkom. Evo primjera kako bi reguliranje inicijalne veličine zaslona izgledalo u JavaScript kodu.

if(window.screen.availWidth<=240)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.191");}
else if(window.screen.availWidth<=265)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.205");}
else if(window.screen.availWidth<=285)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.217");}
else if(window.screen.availWidth<=304)
{document.querySelector("meta[name=viewport]".setAttribute("content","initial-scale=0.228");}
else if(window.screen.availWidth<=320)
{document.querySelector("meta[name=viewport]".setAttribute("content","initial-scale=0.238");}
else if(window.screen.availWidth<=334)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=0.247");}
          :
else if(window.screen.availWidth<=1366)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=1.000");}
else if(window.screen.availWidth>=1680)
{document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=1.240");}
                :

Kad je definirana veličina prikaza na uređaju, koja se mjeri u CSS-pikselima, tada svakom od tih prikaza treba pridružiti odgovarajuću veličinu fonta i osobitosti prikazivanja, kao što je u primjeru slijedećeg CSS dijela koda.

@media screen and (max-width: 240px) {
  html, body {
    font-size: 58.00px; font-stretch: ultra-condensed; line-height: 0.97}}
@media screen and (min-width: 265px) {
  html, body {
    font-size: 57.75px; font-stretch: ultra-condensed; line-height: 0.98}}
@media screen and (min-width: 320px) {
  html, body {
    font-size: 57.50px; font-stretch: ultra-condensed; line-height: 0.99}}
           :

Umjesto prethodnog podešavanja fontova za različite 'brakepoint' veličine, odnosno granične vrijednosti prema različitim skupinama uređaja, može se uporabiti matematička CSS formula kako je nadalje prikazano:

/* Promjena velicine fonta POCETAK */
/* Prevent scaling below this breakpoint */
/* 240px */
@media (max-width: 15em) {
  html, body, p, table, li {
    font-size: 3.25rem;
    line-height: 1.00}}

/* 240px */
@media (min-width: 15em) {
  html, body, p, table, li {
    /* 3.25rem(52px) @ 15rem(240px) decreasing to 3rem(48px) @ 37.5rem(600px) */
    /* Ems strongly recommended on media queries! */
    font-size: calc(3.25rem + ((1vw - 0.15rem) * -1.1111));
    /* Where: -1.1111 = 100 * font-size / viewport_width difference */
    line-height: 1.00;
    /* Safari resize fix */
    min-height: 0vw}}

/* 600px */
@media (min-width: 37.5em) {
  html, body, p, table, li {
    /* 3rem(48px) @ 37.5rem(600px) decreasing to 2.625rem(42px) @ 60rem(960px) */
    font-size: calc(3rem + ((1vw - 6px) * -1.6667));
    line-height: 1.04;
    min-height: 0vw}}

/* 960px */
@media (min-width: 60em) {
  html, body, p, table, li {
    /* 2.625rem(42px) @ 60rem(960px) decreasing to 2rem(32px) @ 85rem(1360px) */
    font-size: calc(2.625rem + ((1vw - 0.6rem) * -2.5));
    line-height: 1.08;
    min-height: 0vw}}

/* 1360px */
@media (min-width: 85em) {
  html, body, p, table, li {
    /* 2rem(32px) @ 85rem(1360px) decreasing to 1.125rem(18px) @ 100rem(1600px) */
    font-size: calc(2rem + ((1vw - 0.85rem) * -5.8333));
    line-height: 1.11;
    min-height: 0vw}}

/* 1600px */
@media (min-width: 100em) {
  html, body, p, table, li {
    /* 1.125rem(18px) @ 100rem(1600px) increasing to 1.3125rem(21px) @ 120rem(1920px) */
    font-size: calc(1.125rem + ((1vw - 1rem) * 0.9375));
    line-height: 1.15;
    min-height: 0vw}}

/* Prevent scaling beyond this breakpoint */
/* 1920px */
@media (min-width: 120em) {
    html, body, p, table, li {
    font-size: 1.3125rem;
    line-height: 1.16}}
/* Promjena velicine fonta KRAJ */

Uz malo truda svi se stilovi mogu objediniti kako prikazuje prethodni primjer. CSS se čita slijedno od početka do kraja i ne ponavlja se, što znači da svaki naredni red pobija postavke prethodnog ako se odnose na isti objekt. U primjeru je pet kalkulacija, pravci različitog nagiba, koje reguliraju veličinu fonta za pet različitih područja prikaza.

Komentari su sive boje, a aktivni stilovi u drugim bojama. Različiti izračuni glede veličine fonta daju bolji rezultat glede mobilne kompatibilnosti jer se u kalkulaciju unosi nelinearnost ako se gleda kakvu 'krivulju' tvore spojene granične točke svih pet područja. Nelinearnost je važna zbog premale veličine fonta u području 'srednjih' rezolucija prikaza. Tada stranice sjedišta na 'Google mobile compatibility' testu daju bolje rezultate. Elementi 'html, body' su u stvari pojednostavljena verzija za svestraniju oznaku ':root' koja obuhvaća i stranice koje nisu HTML tipa.

Prikazani JavaScript i CSS koriste se na ovom sjedištu, vrlo je jednostavna i regulira širinu prikaza na zaslonu uređaja (VIEWPORT), te uz adekvatno smanjenje prikaza, uz CSS gdje se podešava osnovni FONT prema pojmu 'pixel ratio' iz tablice 6.2, a također se smanjenje razmaka između redova teksta glede čitljivosti. Ostali parametri prema potrebi regulirani su u CSS postavkama. Dali je mogla biti bolja? Da ima više samopodešavanja? Jeste, ali i ovakva zadovoljava popriličnu kompatibilnost stranica ovog sjedišta glede mobilnih uređaja. Ako promet prema sjedištu naraste značajnije može se razmišljati o naprednijoj verziji rješenja. Kako izgleda jedna od stranica sjedišta na Android mobitelu 'Samsung Galaxy A40 DS' s različitim preglednicima prikazuju naredne slike. Vidi se da postoje značajne razlike u prikazu za različite web-preglednike. Razlog tome je što navedenu skriptu i CSS postavke svaki od njih tumaći na različit način, a razlog je prvenstveno u odrađivanju zadaće od strane 'web-browser engine'. Izgled stranice na iOS uređajima pomoću web-preglednika Safari koji koristi 'WebKit' sličan je prikazu na Firefoxu. Ovakvu programsku i sklopovsku zbrku, kao 'standardi' za mobilne uređaje, odavno nisam vidio.

Nekad je ova e-knjiga imala ogromnu posječenost, pogledajte zemaljsku kuglu na stranici sjedišta, ali je GOOGLE sa svojim uvjetima o mobilnoj kompatibilnosti pretvorio sve u 'kvadrate' koji se preslažu i nemaju puno korisnih sadržaja osim hrpe reklama. Desktop sadržaji gube prioritet. Najsmješnije je od svega je da skoro svaka stranica prođe ' TEST LIVE URL - URL Inspection Mobile Usability ', ali ne i analizu koju vrši ' Googlebot user-agent for crawling smartphone content '. Za jednu e-knjigu, kao ova, to je neprihvatljivo. Knjiga se može čitati ali bi trebalo ugađati CSS sadržaj gotovo za svaku stranicu posebno. Za mene, autora koji je već u poznim godinama, i koji od pisanja ovih sadržaja nema nikakve financijske podrške, to je prezahtjevna zadaća.

Slika*** 6.4 Prikaz na preglednicima Chrome, Samsung, Edge, Opera, Firefox, Dolphin ( + / - )

Različiti 'engin', te vrlo različiti izgled iste stranice. Isti su jedini dijelovi stranice koji imaju zadanu veličinu fonta u CSS kodu, poput naslova i izbornika. Ikone i slike definirane u HTML kodu također su iste. Ali postoji jedna mala opaska u vezi s ovom sjedištem. Sve slike su u .webp formatu, a video u .webm formatu. iOS ne zna što bi s njima. Prema iskustvu autora oni se nikada neće složiti. Na desktop računalu razlike između pojedinih web-preglednika glede prikaza slike nisu toliko izražene, ali na mobilnim uređajima jesu, osobito ako se pregledavaju na različitim verzijama Android OS. Prikazi na slici 6.4 pripadaju verziji 'Pie' (v9.0). Prikazi na verziji 'Q' (v10.0) bolje su usklađeni, ali nedovoljno. Prepuštam čitateljima da procijene koji je 'prikaz' valjan.

Ovo me podsjetilo na nadmudrivanje između 'IE' i 'Netscape' par desetljeća prije. Svaki od njih je tvrdio da ima najbolji web-preglednik na svijetu. Sad ih ima više 'najboljih' s mogućnostima koje su nenadmašne! Programiranje za mobilne uređaje kod kojih svaki vodi svoju 'politiku' prikaza slike na zaslonu sve više sliči na prolaz kroz 'minsko polje'. Posljedica ovog 'prilagođavanja' je da su stranice skoro svih sjedišta postale puno manje informativne. Hrpa kvadratića s vrlo malo opisa.

SAŽETAK:

Pokušaj da se Internet sadržaji kontoliraju pomoću HTML i CSS postavki na način da se sve postavke svedu na nulu (ili 100%), te da se veličina pojedinih vrsta teksta prilagođava prema ishodišnoj (root) vrijednosti izvšava se prilično dobro na 'Desktop' računalima kod svih preglednika, ali ovaj pristup uopće ne funkcionira kod preglednika za mobilne uređaje, što navodi na zaključak da se izradi programske potpore za mobilne uređaje nije primijenjena dovoljna pažnja. Osobito jadno se ponaša Google 'Chrome'. Velika je šteta što se HTML kod prilično razlikuje u verziji 5.x u odnosu na prokušanu i stabilnu verziju 4.01, te kompatibilnost novije verzije prema staroj verziji nije očuvana. Navedeno je jedan od razloga zašto autor ovih stranica nema volje gnjaviti se s Google mobilno kompatibinim sjedištima, iako se većina stranica ovog sjedišta može uredno čitati na mobitelu.

CSS daje fleksibilnost u korištenju različitih svojstava stila lokalno nadjačavanjem globalnih deklariranih vrijednosti ili deklariranih stilova u vanjskoj datoteci sa stilova.

) Inline style sheet - embedded styles
) Internal style sheet
) External style sheet

Također ima još dvije vrste stilova na strani klijenta. Jedan je korisnički definiran stil, a drugi je zadani stil preglednika. Onda je veliko pitanje zašto toliko stilova? Ako je definirano više od jednog stila, koji će se slijediti? Za to postoji definirana razina prioriteta i na temelju tog prioriteta uključuje se svojstvo stilova.

) User defined style
) Embedded or inline style sheet
) Internal style sheet
) External style sheet
) Browser default style

Unutar ova tri ( Inline, Internal & External ) redoslijed prioriteta je prvi Inline, zatim Internal i zadnji prioritet se daje vanjskim stilovima. Ovo je najveća prednost nadjačavanja svojstva globalnog stila i definiranja lokalno za svaku stranicu na sjedištu (site). Tko se ima volje s tim zezat može se učinkovito urediti sve stranice sjedišta.

Koga zanima može pogledati 'Dnevnik Promjena' ovog sjedišta. Uz dosta truda i 'staro' sjedište može se prilagoditi da bude mobilno kompatibilno.

| 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Citiranje ove stranice:
Radić, Drago. " Informatička abeceda " Split-Hrvatska.
{Datum pristupa}; https://informatika.buzdo.com/pojmovi/datoteka.
Copyright © by Drago Radić. Sva prava pridržana. | Odgovornost