Byť webovým vývojárom v dnešnom svete znamená podporiť množstvo zariadení a platforiem, ktoré sa niekedy môžu stať skľučujúcou úlohou. Dokonca aj s najpresnejšie navrhnutým kódom, ktorý je v súlade s najnovšími webovými normami, môžete stále zistiť, že časti vašich webových stránok nemusia vyzerať alebo pôsobiť tak, ako ich chcete na určitých zariadeniach alebo rozlíšeniach. Keď sa stretnete s výzvou podporiť takú širokú škálu scenárov, mať k dispozícii správne simulačné nástroje, ktoré vám môžu byť neoceniteľné.
Ak ste jedným z mnohých programátorov, ktorí používajú Mac, vývojárske súpravy Safari sú vždy vhodné. S vydaním Safari 9 sa táto funkčnosť výrazne rozšírila, a to najmä vďaka Režimu reakcie, ktorý vám umožňuje prezerať, ako bude vaša stránka vykresľovať pri rôznych rozlíšeniach obrazovky, ako aj na rôznych zariadeniach iPad, iPhone a iPod touch.
Tento návod podrobne opisuje, ako aktivovať režim zodpovedného dizajnu, ako aj ako ho využiť pre potreby vývoja.
Predvoľby Safari
Najskôr otvorte prehliadač Safari.
Kliknite na safari v ponuke prehliadača umiestnenej v hornej časti obrazovky. Keď sa zobrazí rozbaľovacia ponuka, vyberte položku Preferencie v zobrazenom príklade.
Poznámka: Namiesto vyššie uvedenej položky ponuky môžete použiť nasledujúcu klávesovú skratku: COMMAND + COMMA (,)
02 z 05Zobraziť rozbaliť menu
Treba zobraziť dialógové okno Predvoľby Safari, ktoré prekryje okno prehliadača. Najprv kliknite na pokročilý ikona predstavuje prevodový stupeň a nachádza sa v pravom hornom rohu okna.
Rozšírené predvoľby prehliadača by mali byť teraz viditeľné. V spodnej časti je možnosť doplnená zaškrtávacím políčkom označeným Na paneli s ponukami zobrazte položku Vývoj a krúžil v príklade vyššie. Kliknutím na zaškrtávacie políčko aktivujete toto menu.
03 z 05Zadajte režim zodpovedajúceho návrhu
Nová možnosť by mala byť teraz k dispozícii v ponuke Safari, ktorá sa nachádza v hornej časti obrazovky a je označená vypracovať, Kliknite na túto možnosť.
Keď sa zobrazí rozbaľovacia ponuka, vyberte položku Zadajte režim zodpovedajúceho návrhuv znázornenom príklade.
Poznámka: Namiesto vyššie uvedenej položky ponuky môžete použiť nasledujúcu klávesovú skratku:OPTION + COMMAND + R
04 z 05Reagujúci režim návrhu
Aktívna webová stránka by sa teraz mala zobraziť v režime Reagujúci dizajn, ako je uvedené v príklade vyššie. Ak vyberiete jedno z uvedených zariadení iOS, napríklad iPhone 6, alebo jedno z určených rozlíšení obrazovky, napríklad 800 x 600, môžete okamžite zobraziť, ako sa stránka bude zobrazovať na tomto zariadení alebo v tomto rozlíšení displeja.
Okrem zobrazených zariadení a rozlíšení môžete inštruovať aj Safari, aby simuloval iného používateľského agenta - napríklad jedného z iného prehliadača - kliknutím na rozbaľovaciu ponuku zobrazenú priamo nad ikonami rozlíšenia.
05 z 05Rozbaliť ponuku: Ďalšie možnosti
Okrem Režimu zodpovedného dizajnu poskytuje ponuka vývoja Safari 9 aj mnoho ďalších užitočných možností, z ktorých niektoré sú uvedené nižšie.
- Otvoriť stránku s: Umožňuje otvoriť aktívnu webovú stránku v ľubovoľnom inom prehliadači, ktorý je momentálne nainštalovaný na vašom počítači Mac.
- Používateľský agent: Zmena používateľského agenta spôsobí, že webové servery identifikujú váš prehliadač ako niečo iné ako Safari 9.
- Pripojenie webového inšpektora: Webový inšpektor Safari 9 zobrazuje všetky zdroje webových stránok, poskytuje možnosť prezerať informácie CSS, metriky DOM a štruktúru, ako aj svoj pôvodný zdrojový kód.
- Zobraziť konzolu s chybami: Jednou z najpoužívanejších možností v ponuke Develop, táto konzola zobrazuje chyby a varovania jazyka JavaScript, HTML a XML a XML.
- Zobraziť zdroj stránky: Umožňuje zobraziť a vyhľadávať zdrojový kód aktívnej webovej stránky.
- Zobraziť zdroje stránky: Výberom tejto možnosti sa zobrazia dokumenty, skripty, CSS a iné zdroje z aktuálnej stránky.
- Zobraziť editor úryvkov: Poskytuje možnosť upravovať a vykonávať fragmenty kódu, na rozdiel od úplnej stránky. Táto funkcia je veľmi užitočná z hľadiska testovania.
- Zobraziť rozšírenie Builder: Umožňuje vám vytvoriť si vlastné rozšírenia Safari tak, že príslušným spôsobom balíte kód a pridáte metadáta.
- Začať nahrávanie časovej osi: Zaznamenáva množstvo položiek vrátane požiadaviek na sieť, vykonávania JavaScript, vykresľovania stránok a ďalších udalostí pre užívateľom definované obdobie, ktoré sa dajú zobraziť v rámci inšpektora WebKit.
- Prázdne vyrovnávacie pamäte: Kliknutím na túto možnosť sa v súbore Safari vymažú všetky uložené vyrovnávacej pamäte, nielen štandardné súbory cache webových stránok.
- Zakázať vyrovnávaciu pamäť: Pri vypnutom ukladaní do vyrovnávacej pamäte sú zdroje stiahnuté z webových stránok vždy, keď sa vykoná žiadosť o prístup, ako na rozdiel od využitia lokálnej vyrovnávacej pamäte.
- Povoliť JavaScript z inteligentného vyhľadávacieho poľa: V predvolenom nastavení je z bezpečnostných dôvodov zakázaná táto funkcia umožňuje zadávať adresy URL obsahujúce JavaScript do panela s adresou Safari.
- Nakupte certifikáty SHA-1 ako neisté: Krátka pre algoritmus Secure Hash Algorithm sa ukázalo, že hash funkcia SHA-1 je menej bezpečná, ako sa pôvodne myslelo, a preto je táto možnosť pridaná do Safari 9.
