01 od 06
Aktivirajte i koristite način responzivnog dizajna u Safaru 9
Biti web developer u današnjem svijetu podrazumijeva podršku čitav niz uređaja i platformi, što ponekad može biti zastrašujući zadatak. Čak i uz najbolje oblikovane kodove koji se pridržavaju najnovijih web standarda, i dalje možete pronaći da dijelovi vaše web stranice možda neće izgledati ili djelovati onako kako ih želite na određenim uređajima ili rezolucijama. Kada se suočite s izazovom podupiranja takvog širokog spektra scenarija, imate prave alate za simulaciju na raspolaganju neprocjenjivo.
Ako ste jedan od mnogih programera koji koristi Mac, Safariov alat za razvojne programere uvijek je bio praktičan. S izdavanjem Safari 9 širina ove funkcionalnosti znatno se proširila, prvenstveno zahvaljujući načinu responzivnog dizajna koji vam omogućuje da pregledate kako će se Vaša stranica prikazivati na različitim razlučivostima zaslona, kao i na različitim iPad, iPhone i iPod touch buildovima.
Ovaj vodič detalje o aktivaciji reaktivnog dizajna, kao io tome kako ga iskoristiti za vaše razvojne potrebe.
Najprije otvorite Safari preglednik.
02 od 06
Postavke Safari
Kliknite na Safari u izborniku preglednika koji se nalazi na vrhu zaslona. Kada se prikaže padajući izbornik, odaberite opciju Preferences_ zaokruženu gore navedenim primjerom.
Imajte na umu da umjesto gore spomenute stavke izbornika možete koristiti sljedeći prečac na tipkovnici: COMMAND + COMMA (,)
03 od 06
Prikaži Razviti izbornik
Sada bi se trebao prikazati dijaloški okvir Safari's Preferences, preklapajući prozor vašeg preglednika. Najprije kliknite ikonu Napredno označeno zupčanikom i nalazi se u gornjem desnom kutu prozora.
Sada bi trebalo biti vidljivo napredne postavke preglednika. Na dnu je opcija popraćena potvrdnim okvirom, označen Prikaži izbornik Izrada u traci izbornika i zaokružen gore navedenim primjerom. Kliknite jedan potvrdni okvir da biste aktivirali ovaj izbornik.
04 od 06
Unesite način responzivnog dizajna
Nova opcija sada bi trebala biti dostupna u vašem Safari izborniku, koji se nalazi na vrhu zaslona i nazvanu Razvoj . Kliknite ovu opciju. Kada se prikaže padajući izbornik, odaberite Unesite responzivni način izvođenja _ okružen gore navedenim primjerom.
Imajte na umu da umjesto gore spomenute stavke izbornika možete koristiti sljedeći prečac na tipkovnici: OPTION + COMMAND + R
05 od 06
Odgovorni način izvođenja
Aktivna web stranica sada bi trebala biti prikazana u reaktivnom načinu dizajna, kao što je prikazano u gornjem primjeru. Odabirom jednog od ponuđenih iOS uređaja kao što je iPhone 6 ili jedne od dostupnih razlučivosti zaslona, kao što je 800 x 600, možete odmah vidjeti kako će se stranica prikazivati na tom uređaju ili u toj rezoluciji zaslona.
Osim prikazanih uređaja i rezolucija, također možete uputiti Safari da simulira drugi korisnički agent - poput one iz drugog preglednika - klikom na padajući izbornik prikazan izravno iznad ikona razlučivosti.
06 od 06
Razviti Izbornik: Ostale opcije
Osim reaktivnog dizajna, izbornik Safari 9 nudi i mnoge druge korisne opcije - neke koje su navedene u nastavku.
- Otvaranje stranice sa: Omogućuje vam otvaranje aktivne web stranice u bilo kojem drugom pregledniku koji je trenutno instaliran na Mac računalu.
- Korisnički agent: Promjena korisničkog agenta uzrokuje da web poslužitelji prepoznaju vaš preglednik kao nešto drugo osim Safari 9.
- Povežite web preglednik: web preglednik Safari 9 prikazuje sve resurse web stranice, pružajući mogućnost da proučite CSS informacije, metode i strukturu DOM-a, kao i izvorni izvorni kod.
- Prikaži konzolu pogreške: jedna od najčešće korištenih opcija u Izborniku za razvoj, ova konzola prikazuje pogreške JavaScript i HTML i XML i upozorenja.
- Prikaži izvor stranice: Omogućuje vam pregled i pretraživanje izvornog koda aktivne web stranice.
- Prikaži resurse stranice: Odabirom ove opcije prikazuju se dokumente, skripte, CSS i ostali resursi s trenutne stranice.
- Prikaži uređivač isječaka: Omogućuje uređivanje i izvršavanje ulomaka koda, za razliku od potpune stranice. Ova značajka je vrlo korisna iz perspektive testiranja.
- Prikaži Extension Builder: Omogućuje vam da izradite vlastita proširenja za Safari tako što ćete ih pakirati tako da dodate metapodatke.
- Započnite snimanje vremenske trake: bilježi niz stavki, uključujući zahtjeve za mrežu, izvršavanje JavaScripta, renderiranje stranica i druge događaje za korisnički definirano razdoblje - sve ih se može vidjeti u pregledniku WebKit.
- Prazne predmemorije : Klikom na tu opciju brišu se sve pohranjene predmemorije unutar Safari, a ne samo standardne datoteke predmemorije web stranica.
- Onemogućite predmemoriranje: ako je omogućen predmemoriranje, resursi se preuzimaju s web-mjesta svaki put kada se radi o zahtjevu za pristup umjesto korištenja lokalne predmemorije.
- Dopusti JavaScript from Smart Search Field: Onemogućen je prema zadanim postavkama iz sigurnosnih razloga, ova značajka omogućuje unos URL-ova koji sadrže javascript: u Safari adresnoj traci.
- Prihvatite certifikate SHA-1 kao nesigurne: Kratki za sigurnu algoritam algoritma, SHA-1 hash funkcija dokazano je manje sigurna nego što je izvorno mislilo, stoga dodatak ove opcije u Safari 9.
Srodno čitanje
Ako ste ovaj vodič pronašli korisno, svakako proučite ostale Safari 9 postupke.
- Kako upravljati obavijestima o oglašavanju na webu
- Kako izvesti web stranicu u PDF datoteku
- Kako konfigurirati Safari 9 ekstenzije za automatsko ažuriranje
- Kako koristiti značajku zabodene web stranice