Rozšírenie PerfectPixel od WellDoneCode. Zoznámte sa s Pixel Perfect PerfectPixel pre Google Chrome
Dobré popoludnie priatelia. Jedného dňa ma Dima Shuleshov kontaktoval a ponúkol mi tému na zaujímavý článok (Dima, ahoj!). No, pre mňa je to zaujímavé a relevantné, dúfam, že to bude užitočné aj pre vás, pre niekoho. Toto je niekoľko riadkov kódu, ktoré vám pomôžu rozložiť vašu vstupnú stránku presne podľa rozloženia.
Okrem toho výrazne skrátite čas strávený meraním vzdialeností a prepínaním medzi Photoshopom, oknom prehliadača a textovým editorom.
Hotový výsledok sa scvrkáva na skutočnosť, že vo svojom projekte máte tlačidlo upevnené v ľavom hornom rohu (na ľubovoľnom mieste), keď naň kliknete, rozloženie (obrázok) s určitou priehľadnosťou sa prekryje do vášho rozloženia a môžete posúdiť, aké presné sú vaše zarážky, rozmery, umiestnenie zodpovedá dizajnu. Aby ste pochopili, musíte vyskúšať. Odporúčam stiahnuť si zdroj a pozrieť sa, ako to funguje, alebo si prehrať toto krátke video:
Ak ste teda mali problémy s precíznymi zákazníkmi, ktorí kontrolujú každý pixel, potom by už takýto problém nemal nastať. Uvedomme si konečne tento efekt.
Najprv, ako sa často stáva, pripojíme knižnicu jQuery:
Keďže vo väčšine projektov je už pripojený, uistite sa, že to už nebudete robiť znova. To môže spôsobiť konflikt a bude vám trvať dlho, kým presne prídete na to, prečo vzniká.
Teraz pridajte niekoľko značiek do nášho projektu. U mňa to vyzerá takto:
Pixel Perfect
Kde prvý div je blok zodpovedný za tlačidlo a druhý je prekrytie nášho rozloženia. Aby sa správne uplatnil, musíte vykonať niekoľko jednoduchých nastavení:
P ( background: url(../images/maket.jpg) no-repeat; /* Vaše rozloženie */ šírka: 1255px;/* šírka rozloženia */ výška: 750px;/* výška rozloženia */ vľavo: calc(50 % - 627,5px);/* druhá hodnota - polovica šírky rozloženia */ pozícia: absolútna; horná časť: 0; nepriehľadnosť: 0,4 !dôležité; prechod: 0,3s; z-index: 97; )
Tu sú 4 parametre, ktoré sú doplnené komentárom a je potrebné ich nahradiť vlastným. Všetko je jednoduché!
Teraz upravme štýl tlačidla. Ak je pre vás vzhľad dôležitý, upravte ho, inak ho môžete nechať tak, ako je.
#p ( pozícia: pevná; vľavo: 0; hore: 0; šírka: 200px; výška: 75px; pozadie: #c36c2c; z-index: 99; kurzor: ukazovateľ; zarovnanie textu: stred; veľkosť písma: 25px; line-height: 0px; color: #c36c2c; left: -150px; vertical-align: middle; font-weight: 700; transition: .3s ) #p:hover ( left: 0; line-height: 80px; background: #88d3c2; )
No ostáva už len pridať reakciu na kliknutie na tlačidlo. Jednoducho pridáme/odstránime triedu a zmeníme priehľadnosť bloku s rozložením na pozadí:
$(document).ready(function () ( $("#p")).click(function () ( $("#pp").toggleClass("p") ));));
Recenzia pluginov a skriptov pre prácu s technikou Pixel Perfect.
Po prvé, čo je to technika Pixel Perfect? Všetko je jednoduché a môžete to uhádnuť podľa názvu – ide o techniku rozloženia, pri ktorej sa rozloženie šablóny HTML presne zhoduje (pixel-za-pixel) s pôvodným rozložením PSD.
Inými slovami, ak prekryjete „obrázok“ navrhnutej šablóny HTML na obrázok pôvodného rozloženia PSD, oba obrázky by sa mali zhodovať. Všetky prvky obrázkov musia byť kombinované - text, obrázky, grafické prvky.
Pixel Perfect je podľa moderných požiadaviek na rozloženie takmer de facto štandardom. Preto je nevyhnutné naštudovať si túto problematiku, ak máte túžbu a túžbu mať veľa objednávok a zákazníkov.
V čase písania tohto článku je technika Pixel Perfect implementovaná pomocou vhodných pluginov prehliadača alebo pomocou špecializovaných skriptov. Dva doplnky a dva skripty budú stručne popísané nižšie, ale vo všetkých prípadoch sú kroky na testovanie Pixel Perfect rovnaké.
Spočiatku sa vo Photoshope pôvodné rozloženie PSD uloží ako obrázok vo formáte
| 1 | .png |
Toto je celý jednoduchý postup Pixel Perfect na kontrolu rozloženia stránky. Ak sa prvky na stránke nezhodujú s originálom, hodnoty v súboroch štýlov sa opravia.
Pixel Ideálne pre FirefoxPre prehliadač Firefox existuje doplnok Pixel Perfect na kontrolu rozloženia stránky s rovnakým názvom.
Po nainštalovaní doplnku Pixel Perfect sa jeho ikona zobrazí na paneli s nástrojmi prehliadača Firefox. Stojí za to povedať, že doplnok Pixel Perfect Podporuje iba najnovšie verzie prehliadača Firefox(napríklad vo verzii v.31 tento doplnok nebude fungovať).
Teraz musíte otvoriť pôvodné rozloženie PSD vo Photoshope a celé ho uložiť ako obrázok vo formáte
| 1 | .png |
Dôležité! Pred exportovaním do obrázka PNG je potrebné rozloženie PSD uviesť do pôvodnej veľkosti! Na tento účel má Photoshop vyhradenú kombináciu klávesových skratiek: Ctrl+1 – pre Windows\Linux, Cmd+1 – pre Mac OS X.
Hneď ako bude kópia PNG rozloženia PSD pripravená a uložená, otvorte stránku HTML založenú na tomto rozložení v okne prehliadača Firefox.
Spustite doplnok Pixel Perfect kliknutím na jeho ikonu na paneli s nástrojmi prehliadača. Okamžite sa zobrazí okno doplnku, v ktorom nás vyzve na výber vopred pripraveného obrázka PNG (kópia rozloženia PSD):
Kliknite na tlačidlo „Pridať vrstvu“, vyberte pripravený obrázok PNG a získajte výsledok - prekrytie dvoch vrstiev (navrhnutých a originálnych):
Vidíme, ako sa text a tlačidlo HTML stránky nezhodujú s originálom PNG. Preto otvorte záložku štýlov vo Firebug (tento doplnok sa aktivuje automaticky pri spustení doplnku Pixel Perfect) a začnite upravovať/upravovať:
Venujte pozornosť režimu „Invertovať“ doplnku Pixel Perfect - pomocou neho môžete veľmi presne upraviť prvky stránky HTML.
Vyššie popísaný proces pozostáva z práce s doplnkom Pixel Perfect, ako aj s rozložením Pixel Perfect ako takým. Všetko je mimoriadne jednoduché.
Nižšie je video, ktoré ukazuje proces práce s doplnkom Pixel Perfect (video nie je moje, takže nie som zodpovedný za kvalitu v každom zmysle) - pre prehľadnosť práce to bude:
Recenzia doplnku Pixel Perfect pre prehliadač Firefox je u konca.
PerfectPixel pre Google ChromeAk sa chcete pripojiť k testovanej stránke, musíte napísať základnú sadu riadkov:
$ (funkcia ()( $ . pixlayout ( "/cesta_k_obrázku/obrázku.ext" ); ));Základnú sadu môžete doplniť zadaním parametrov v skripte ( prevzaté z oficiálnej stránky):
$ (function ()( $ . pixlayout (( src : "/img/layout.jpg" , nepriehľadnosť : 0,8 , hore : 50 , stred : true , clip : true , show : true ), ".wrapper" ); ) ); Rýchly odkaz na používanie skriptu pixLayoutRýchly odkaz na používanie skriptu pixLayout je uvedený v dvoch odsekoch nižšie ( prevzaté aj z oficiálnej stránky):
Sťahovanie- tlačidlá: „vľavo“, „vpravo“, „hore“, „dole“
- tlačidlá: W , A , S , D, keď je obraz viditeľný
- tlačidlá navigačnej lišty
- Zničiť ( odstráňte zo stránky všetok html a css kód pixLayout) - krížik v pravom hornom rohu panelu;
- Pripnúť panel - ikona v pravom hornom rohu panela;
- Rýchla referencia - otáznik v pravom hornom rohu panelu;
- Zbaliť parametre - šípka „hore“ v spodnej časti panela;
- Zobraziť\skryť obrázok - centrálne tlačidlo navigačného panela alebo Shift + E.
Nižšie je uvedené oficiálne video, ktoré ukazuje, ako pracovať so skriptom pixLayout:
ZáverV tejto krátkej recenzii sme sa zoznámili so štyrmi nástrojmi pre pixel perfect layout. Dva z nich sú bezplatné doplnky prehliadača. Ďalšie dva sú skripty JavaScript na pripojenie k stránke HTML.
Čo si vybrať pre svoju prácu, je na rozhodnutí každého.
Najlepšie na doplnkoch prehliadača je, že sú bezplatné, ľahko sa inštalujú a ľahko sa používajú.
Nevýhodou skriptu X-Precise je, že je platený (5 USD), vyžaduje pripojenie k kontrolovanej HTML stránke a závisí od knižnice jQuery. Nevýhodou pixLayout možno povedať aj to, že na to, aby fungoval, si vyžaduje ďalšie „popraskanie“ s pripájaním sa na HTML stránku.
Výhodou oboch skriptov je však neodškriepiteľný fakt, že ide o cross-browserové riešenie, absolútne nezávislé od akéhokoľvek prehliadača (Firefox, Chrome, Opera, Safari) či verzie konkrétneho prehliadača. Skripty budú fungovať vo všetkých prípadoch rovnako.
Rozšírenie PerfectPixel pre Google Chrome pomáha návrhárom rozloženia a webovým vývojárom vytvárať rozloženia webových stránok, ktoré najlepšie zodpovedajú dizajnu schválenému zákazníkom.
Otvoríte si stránku, ktorú vyvíjate v Chrome, spustíte PerfectPixel, pridáte novú vrstvu – obrázok úlohy a teraz môžete obrázok prekryť na výsledok v reálnom čase, porovnávať a opravovať chyby. Ako rozšírenie funguje si môžete pozrieť v tomto videu:
Je podporovaných viacero vrstiev na stránku a sada vrstiev je pre rôzne domény odlišná. Pridané vrstvy a ich atribúty sa uložia, ak zatvoríte prehliadač a vypnete počítač.
Pre pohodlie vývojárov je tu funkcia Lock - keď je aktivovaná, môžete interagovať s prvkami stránky, ktoré sa nachádzajú pod aktívnou vrstvou. Môžete tiež zmeniť priehľadnosť vrstvy, dať jej explicitné súradnice, zmeniť mierku (užitočné pri testovaní obrázkov Retina).
Pre tých, ktorí chcú s nástrojom pracovať čo najefektívnejšie, sú podporované klávesové skratky a prevádzkové režimy myši, ktorých úplný zoznam je k dispozícii na oficiálnej webovej stránke projektu: www.welldonecode.com/perfectpixel/shortcuts.
Ovládací panel je možné minimalizovať na pravý okraj obrazovky dvojitým kliknutím na nadpis. Mini režim je užitočný pri testovaní responzívnych návrhov na malých obrazovkách.
Rozšírenie sa pravidelne aktualizuje, pridávajú sa nové funkcie a klávesové skratky a opravujú sa chyby. Uvítame akékoľvek pripomienky a návrhy, napíšte nám na e-mail: [e-mail chránený]. V blízkej budúcnosti sa plánuje vydanie verzií pre ďalšie prehliadače: Firefox, Safari, IE a implementácia synchronizácie vrstiev a nastavení cez cloud. Prihláste sa na odber noviniek, aby ste boli informovaní o dátumoch vydania novej funkcionality na oficiálnej webovej stránke: www.welldonecode.com/perfextpixel.
Na vaše otázky rád odpoviem tu v komentároch alebo mailom.
Som rád, že vás spoznávam v komunite Chrome.RF!
13/01/2017Začnem z diaľky. Nie je to tak dávno, čo som sa pripojil k HTML Academy ako mentor. Okrem toho, že mentoring pomáha organizovať vaše vedomosti, úžasne stimuluje rozvoj rôznych užitočných vecí, pretože v procese sa objavujú zaujímavé úlohy, ktorých riešenie sa dá pohodlne automatizovať.
Študenti dostanú trojstranový inštruktážny návrh, každý s rozložením pre tri stavy: mobil, tablet a počítač – spolu deväť rozložení. V procese rozloženia adaptívnej stránky má zmysel pravidelne meniť veľkosť okna a kontrolovať, či sa pri pridávaní štýlov napríklad pre verziu pre stolné počítače nerozbila tá mobilná. Aký je najlepší spôsob kontroly súladu s rozložením?
Snímky obrazovky, ktoré sa používajú vo veľkých projektoch, sú na takúto úlohu príliš ťažké, potrebujeme niečo veľmi jednoduché, aby to mohol použiť každý začiatočník.
Prvá vec, na ktorú som samozrejme myslel, bol doplnok Pixel Perfect (aspoň je k dispozícii pre prehliadače Chrome a Firefox), ale nie je vhodný z niekoľkých dôvodov. Načítané rozloženia sa napríklad nemôžu meniť pri prepínaní medzi stránkami a pri zmene okna prehliadača a zakaždým ich manuálne prepínanie rýchlo omrzí. Navyše existujú mediálne prejavy, ktoré nám dokážu dokonale prepínať rozloženia.
Moje prvé riešenie vyzeralo takto:
BODY ( background-repeat: no-repeat; background-position: 50 % 0; background-image: url("img/index-mobile.png"); ) @media (min-width: 768px) ( BODY ( background- image: url("img/index-tablet.png"); ) ) @media (min-width: 1024px) ( BODY ( background-image: url("img/index-desktop.png"); ) )
Tento kód sa vkladá na každú stránku. Nastaví potrebné mediálne výrazy a odkazy na obrázky sa zmenia na aktuálne rozloženie pre každú konkrétnu stránku.
Rozloženie sa mení pri prepínaní medzi stránkami a pri zmene veľkosti okna, to sa už dá využiť a je to celkom pohodlné. Rozloženia ležia priamo pod označením, nemusíte neustále chodiť do grafického editora, aby ste ich získali, takže aj takýto jednoduchý dizajn môže výrazne ušetriť čas.
Pri písaní štýlov sa však stránka zobrazí s vlastným pozadím a obrázkami a rozloženia v spodnej vrstve sa stanú neviditeľnými. Čo mám robiť?
Mojím ďalším riešením bolo rozšírenie prehliadača Chrome, ktoré vytvára priesvitnú vrstvu s rozložením na každej stránke. Keď zmeníte veľkosť okna, rozloženia sa zmenia pomocou mediálnych výrazov, ako v predchádzajúcom prípade. Ako bonus sme pridali kontrolu nad priehľadnosťou vrstvy rozloženia a možnosť povoliť režim prelínania rozdielov, aby sme uľahčili hľadanie rozdielov.
Ukázalo sa, že je to úžasná vec. Funguje to ale len v Chrome, kľúčové body pre prepínanie rozložení a ciest k obrázkom je potrebné nastaviť v konfiguráciách samotného rozšírenia, obrázky rozloženia musia byť vo vnútri rozšírenia a existovali všetky možné ďalšie obmedzenia. Vo všeobecnosti to nie je univerzálne, každý nový projekt bude vyžadovať manuálnu konfiguráciu a to nie je vôbec vhodné pre začiatočníkov.
Chcel som nájsť nejaké veľmi, veľmi jednoduché riešenie, aby si s nastavením a inštaláciou vedel poradiť každý a zároveň aspoň zhruba pochopil, čo robí.
Na porovnanie značiek s rozloženiami potrebujete dve vrstvy: vrstvu so značkami a vrstvu s rozloženiami. Na jednej strane môžete manuálne vložiť vrstvu s rozložením do rozloženia stránky, na druhej strane je veľké riziko, že ju tam zabudnete, keď už nebude potrebná, takže ďalšou možnosťou bolo použiť existujúce prvky stránky ako vrstvy.
Ak nastavíte rozloženia ako pozadie pre , pri zmene priehľadnosti sa rozloženia tiež stanú priesvitnými, takže je lepšie použiť prvok ako vrstvu s rozloženiami:
HTML ( opakovanie na pozadí: bez opakovania; pozícia na pozadí: 50 % 0; obrázok na pozadí: url("img/index-mobile.png"); ) @media (min. šírka: 768px) ( HTML ( na pozadí- obrázok: url("img/index-tablet.png"); ) ) @media (min. šírka: 1024px) ( HTML (obrázok na pozadí: url("img/index-desktop.png"); ) )
Rovnako ako v predchádzajúcom prípade budú rozloženia ležať pod označením, ale teraz, ak je zadané pozadie, nebudú viditeľné. Urobme vrstvu značkovania polopriehľadnou pridaním nepriehľadnosti pre:
/* Použiť ako vrstvu rozloženia */ HTML ( background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); ) @media (min- width: 768px) ( HTML ( background-image: url("img/index-table.png"); ) ) @media (min-width: 1024px) ( HTML ( background-image: url("img/index-desktop" .png"); ) ) /* Značkovacia vrstva bude polopriehľadná */ BODY ( nepriehľadnosť: 0,5; )
Dá sa to tiež nejako použiť, ale tomuto riešeniu chýbali pohodlné ovládacie prvky transparentnosti, tak som napísal malý skript, ktorý na stránku pridá takýto panel:
Umožňuje vám ovládať priehľadnosť (v tomto prípade je namiesto rozložení jednoducho pruhované pozadie), dá sa pretiahnuť po stránke a v prípade potreby ho možno vypnúť.
Rozhodol som sa nerobiť rozšírenie prehliadača, aby som neobmedzil počet prehliadačov, v ktorých sa dá použiť.
Inštalácia nakoniec vyzerá takto:
Podľa môjho názoru sa to ukázalo ako celkom pohodlný nástroj, ale určite by sa dalo niečo vylepšiť. Ak máte nejaké nápady na túto tému, napíšte mi ich do komentárov. Tiež ma bude zaujímať, ako riešite takéto problémy a aké nástroje na to používate.
UPD: knižnica sa presťahovala do npm, vďaka všetkým zúčastneným
Ak ešte len začínate ovládať počítač a používať rôzny softvér a potrebujete program na prezeranie obrázkov, stiahnite si Pixel Perfect. Tento prehliadač je implementovaný tak jednoducho, že ho ľahko zvládne aj neskúsený používateľ, a to aj napriek tomu, že vývojári sa nechceli starať o lokalizáciu produktu pre rusky hovoriacich používateľov (a vo všeobecnosti opustili svoje duchovné dieťa pred desiatimi rokmi).
O rozhraníAko už bolo spomenuté, Pixel Perfect má skôr skromnú funkčnosť. Môže sa to zdať veľmi obmedzené pre používateľov, ktorí sú zvyknutí na multitaskingové prehliadače, ktoré dokážu fotografie a obrázky nielen zobrazovať, ale aj upravovať, tlačiť alebo dokonca publikovať online. Preto, ak potrebujete veľa funkcií, odporúčame vám obísť tento softvér nájdením analógu, napríklad -.
Pixel Perfect umožňuje otvárať a prezerať obrázky vo formátoch JPEG, PNG, GIF a BMP. Program však nepodporuje presúvanie z jedného obrázka na druhý a vzhľadom na to, že neexistuje tlačidlo „preklápať“, každý obrázok bude potrebné otvárať samostatne. Pri otváraní súboru prehliadač v spodnej časti obrazovky zobrazuje všetky technické informácie o objekte, čo je celkom pohodlné. Pri prezeraní môžu používatelia obrázok vycentrovať a roztiahnuť.
Vlastnosti prácePixel Perfect je distribuovaný v prenosnom formáte, čo ešte viac zjednodušuje používateľskú skúsenosť. Nie je potrebné sa starať o inštaláciu, stačí rozbaliť stiahnutý archív a spustiť spustiteľný súbor. Prehliadač identifikuje nepodstatné požiadavky na hardvér počítača a na verziu systému Windows, ktorá je na ňom nainštalovaná.
Výsledky- nedostatok rusifikovaného rozhrania;
- distribuované v prenosnom formáte;
- Nástroje programu sú založené na vykonávaní jednej funkcie - zobrazovanie grafických súborov;
- demonštrácia technických údajov pri prezeraní obrazu;
- softvérový produkt už vývojári nepodporujú.