01 od 06
Aktivirajte i koristite režim odzivnog dizajna u Safari 9
Budući da je web programer u današnjem svetu podrazumeva podršku uređaja i platformi, što ponekad može biti potezan zadatak. Čak i sa najpovoljnijim kodom koji se pridržava najnovijih Veb standarda, i dalje možete utvrditi da delovi vaše web stranice možda ne izgledaju ili postupaju onako kako ih želite na određenim uređajima ili rezolucijama. Kada se suočite sa izazovom podrške ovako širokom nizu scenarija, imati na raspolaganju prave simulacijske alate na neprocenjivom nivou.
Ako ste jedan od mnogih programera koji koriste Mac, Safari-ov alat za razvijanje je uvek bio zgodan. Sa oslobađanjem Safari 9 širina ove funkcionalnosti je značajno proširena, uglavnom zahvaljujući režimu odzivnog dizajna koji vam omogućava da pregledate kako će vaša stranica prikazati na različitim rezolucijama ekrana, kao i na različitim iPad, iPhone i iPod touch graditeljima.
Ovaj tutorijal detaljno opisuje kako aktivirati Režim odzivnog dizajna kao i kako ga iskoristiti za vaše razvojne potrebe.
Prvo, otvorite Safari pretraživač.
02 od 06
Safari Preferences
Kliknite na Safari u meniju pretraživača, koji se nalazi na vrhu ekrana. Kada se pojavi padajući meni, izaberite opciju Preferences_ circled u gore navedenom primeru.
Imajte na umu da možete koristiti sledeću prečicu na tastaturi umjesto gore pomenute stavke menija: COMMAND + COMMA (,)
03 od 06
Prikaži razvojni meni
Sada bi trebalo prikazati dijalog Safari's Preferences, prekrivajući prozor pregledača. Prvo, kliknite na Naprednu ikonu, koju predstavlja zupčanica, a nalazi se u gornjem desnom uglu prozora.
Napredne postavke pregledača bi sada trebale biti vidljive. Na dnu je opcija koja se nalazi u kvadratićima sa oznakom " Pokaži razvoj" u meniju i okružuje se u gore navedenom primeru. Kliknite na polje za potvrdu jednom da biste aktivirali ovaj meni.
04 od 06
Uključite režim reagovanja dizajna
Nova opcija sada treba da bude dostupna u meniju Safari, koja se nalazi na vrhu ekrana, označena kao Develop . Kliknite na ovu opciju. Kada se pojavi padajući meni, odaberite Enter Responsive Design Mode _ okružen u gore navedenom primeru.
Imajte na umu da možete koristiti sljedeću prečicu na tastaturi umjesto gore pomenute stavke menija: OPTION + COMMAND + R
05 od 06
Režim odzivnog dizajna
Aktivna Web stranica sada bi trebala biti prikazana u režimu "Odgovarajući dizajn", kako je prikazano u prethodnom primeru. Izborom jednog od navedenih iOS uređaja kao što je iPhone 6 ili jedne od određenih rezolucija ekrana kao što je 800 x 600, možete odmah da vidite kako će strana prikazati na tom uređaju ili u toj rezoluciji prikaza.
Pored uređaja i prikazanih rezolucija, možete takođe instruirati Safari-u da simulira različite korisničke agente - kao što je jedan iz drugog pretraživača - klikom na padajući meni prikazan direktno iznad ikonica rezolucije.
06 od 06
Razvijanje menija: druge opcije
Pored Reagensivnog režima dizajna, Safari 9's Develop meni nudi mnoge druge korisne opcije_ neke koje su navedene u nastavku.
- Otvori stranicu sa: Omogućava vam da otvorite aktivnu Web stranicu u bilo kom drugom pretraživaču koji je trenutno instaliran na vašem Mac računaru.
- Korisnički agent: Promena korisničkog agenta dovodi do toga da Web serveri identifikuju vaš pretraživač kao nešto drugo osim Safari 9.
- Povezivanje Web Inspektora: Web Inspector Safari 9 prikazuje sve resurse Web stranice, pružajući mogućnost perforiranja CSS informacija, DOM metrika i strukture, kao i izvornog izvornog koda.
- Prikaži konzolu grešaka: Jedna od najčešće korišćenih opcija u meniju Razvoj, ova konzola prikazuje greške i upozorenja JavaScript, HTML i XML.
- Show Page Source: Omogućava vam da pregledate i potražite izvorni kod aktivne Web stranice.
- Show Resources: Izbor ove opcije prikazuje dokumente, skripte, CSS i druge resurse sa trenutne stranice.
- Show Snippet Editor: Pruža mogućnost uređivanja i izvršavanja fragmenata koda, za razliku od kompletne stranice. Ova karakteristika je veoma korisna iz perspektive testiranja.
- Show Extension Builder: Omogućava vam da napravite sopstvene ekstenzije Safari tako što ćete pakirati svoj kôd u skladu s tim i dodavati metapodatke.
- Započinjanje snimanja vremenskog zapisa: Zapisuje niz stavki uključujući zahtjeve mreže, izvršenje JavaScript-a, prikazivanje stranica i druge događaje za korisnički definirani period-svi koji se mogu vidjeti unutar WebKit inspektora.
- Empty Caches: Klikom na ovu opciju briše se sve memorisane keš memorije unutar Safari-a, a ne samo standardne datoteke keširanja.
- Onemogućite kešove: pomoću keširanja onemogućeni su resursi sa web stranice svaki put kada se napravi zahtev za pristup, a ne korištenje lokalne keš memorije.
- Dozvoli JavaScript iz polja za pametno pretraživanje: podrazumevano onemogućeno iz bezbednosnih razloga, ova funkcija vam omogućava unos URL-ova koji sadrže javascript: u naslovnoj traci Safari-a.
- Sklonite SHA-1 certifikate kao nesigurne: kratko za Algoritam sigurnog haša, SHA-1 hash funkcija je dokazana manje sigurna nego što je prvobitno mislila - stoga je dodavanje ove opcije u Safari 9.
Srodno čitanje
Ako ste našli ovaj tutorial korisnim, obavezno pogledajte naše ostale Safari 9 korake.
- Kako upravljati obaveštenjima na veb lokaciji
- Kako izvoziti web stranicu u PDF datoteku
- Kako konfigurisati dodatke Safari 9 za automatsko ažuriranje
- Kako koristiti funkciju zabačenih lokacija