Plugin pixel i përsosur. Zgjerimi PerfectPixel nga WellDoneCode

Pasqyrë e shtojcave dhe skripteve për të punuar në teknikën Pixel Perfect.

Së pari, cila është teknika Pixel Perfect? Gjithçka është e thjeshtë dhe ju mund ta merrni me mend me emrin - kjo është një teknikë e paraqitjes në të cilën shablloni i dhënë HTML (piksel-për-piksel) përputhet saktësisht me paraqitjen origjinale, PSD.

Me fjalë të tjera, nëse mbivendosni "imazhin" e shabllonit të dhënë HTML në imazhin e paraqitjes origjinale të PSD, atëherë të dyja imazhet duhet të përputhen. Të gjithë elementët e fotografive duhet të kombinohen - teksti, imazhet, elementët grafikë.

Sipas kërkesave moderne të paraqitjes, Pixel Perfect është pothuajse një standard de fakto. Pra, është jetike të studiohet kjo çështje nëse ka dëshirë dhe dëshirë për të pasur shumë porosi dhe klientë.

Në kohën e këtij shkrimi, zbatimi i teknikës Pixel Perfect kryhet duke përdorur shtojcat e duhura për shfletues ose duke përdorur skriptet e specializuara. Dy shtojca dhe dy skripta do të shqyrtohen shkurtimisht më poshtë, megjithatë, në të gjitha rastet, hapat për të kontrolluar Pixel Perfect janë të njëjta.

Fillimisht, në Photoshop, faqosja origjinale e PSD ruhet si imazh në format

Kjo është e gjithë procedura e thjeshtë e Pixel Perfect për të kontrolluar paraqitjen e faqes. Aty ku elementet në faqe nuk përputhen me origjinalin, vlerat në skedarët e stilit korrigjohen.

Pixel Perfect për Firefox

Për shfletuesin Firefox, ekziston një shtojcë Pixel Perfect për të kontrolluar faqen e dhënë me të njëjtin emër.

Pas instalimit të shtojcës Pixel Perfect, ikona e tij do të shfaqet në shiritin e veglave të shfletuesit Firefox. Vlen të thuhet se shtojca Pixel Perfect vetëm mbështet versionet e fundit Shfletuesi Firefox(për shembull, në versionin v.31 kjo shtojcë nuk do të funksionojë).

Tani duhet të hapni paraqitjen origjinale të PSD-së në Photoshop dhe ta ruani tërësisht si imazh në format

E rëndësishme! Përpara eksportimit në një imazh PNG, faqosja e PSD duhet të jetë sillni në madhësinë origjinale! Për ta bërë këtë, kombinimi i tasteve të nxehtë është rezervuar në Photoshop: Ctrl + 1 - nën Windows\Linux, Cmd + 1 - nën Mac OS X.

Sapo të përgatitet dhe ruhet kopja PNG e paraqitjes PSD, hapni faqen HTML të bërë sipas kësaj paraqitjeje në dritaren e shfletuesit Firefox.

Hapni shtojcën Pixel Perfect duke klikuar në ikonën e saj në shiritin e veglave të shfletuesit. Dritarja e shtojcave do të shfaqet menjëherë, në të cilën do të na shtyjë të zgjedhim një imazh PNG të përgatitur paraprakisht (një kopje e paraqitjes së PSD):

Klikoni në butonin "Shto shtresë", zgjidhni imazhin e përgatitur PNG dhe merrni rezultatin - mbivendosja e dy shtresave (të krijuara dhe origjinale):

Ne shohim se si teksti dhe butoni i faqes HTML nuk përputhen me origjinalin PNG. Prandaj, hapni në Firebug (kjo shtojcë aktivizohet automatikisht kur filloni shtesën Pixel Perfect) një skedë me stile dhe filloni të redaktoni/përshtatni:

Kushtojini vëmendje mënyrës "Invert" të shtojcës Pixel Perfect - me të mund të rregulloni me shumë saktësi elementët e faqes HTML.

Procesi i përshkruar më sipër është puna me shtojcën Pixel Perfect, si dhe paraqitjen Pixel Perfect si e tillë. Gjithçka është jashtëzakonisht e thjeshtë.

Më poshtë është një videoklip që tregon procesin e punës me shtojcën Pixel Perfect (videoja nuk është e imja, kështu që unë nuk jam përgjegjës për cilësinë në çdo kuptim) - për qartësi, puna do të shkojë:

Rishikimi i shtojcës Pixel Perfect për shfletuesin Firefox ka përfunduar.

PerfectPixel nën Google Chrome

Për t'u lidhur me faqen në provë, duhet të shkruani një grup bazë vargjesh:

Ju mund të plotësoni grupin bazë duke specifikuar parametrat në skript ( marrë nga faqja zyrtare):

Referencë e shpejtë për përdorimin e skriptit pixLayout

Një referencë e shpejtë për përdorimin e skriptit pixLayout jepet në dy paragrafët më poshtë ( marrë edhe nga faqja zyrtare):

duke lëvizur

• butonat: 'majtas', 'djathtas', 'lart', 'poshte'
• butonat: W , A , S , D kur fotografia është e dukshme
• butonat e shiritit të navigimit

Operacionet

• Shkatërroni (hiqni të gjithë kodin html dhe css të pixLayout nga faqja) - një kryq në këndin e sipërm të djathtë të panelit;
• Paneli i pin- ikona në këndin e sipërm të djathtë të panelit;
• Informacion i shkurtër- pikëpyetja në këndin e sipërm të djathtë të panelit;
• Opsionet e palosjes- shigjeta "lart" në fund të panelit;
• Shfaq/fsheh imazhin- butoni qendror i shiritit të navigimit ose Shift + E.

Më poshtë është videoja zyrtare që tregon se si funksionon skripti pixLayout:

konkluzioni

Në këtë përmbledhje të shkurtër, ne u njohëm me katër mjete për paraqitjen e përsosur të pikselit. Dy prej tyre janë shtojca falas nën shfletues. Dy të tjerët janë skriptet JavaScript për t'u lidhur me një faqe HTML.

Çfarë të zgjidhni për punën tuaj - të gjithë vendosin.

Në favor të shtojcave të shfletuesit, mund të themi se ato janë falas, të lehta për t'u instaluar dhe të lehta për t'u përdorur.

Nga ana negative e skriptit X-Precise, mund të themi se ai paguhet (5$), kërkon një lidhje me faqen HTML që po kontrollohet dhe varet nga biblioteka jQuery. Nga ana negative e pixLayout, mund të themi gjithashtu se për punën e tij kërkon "bujë" shtesë me lidhjen me faqen HTML.

Sidoqoftë, të dy skriptet mund të përfitojnë nga fakti i padiskutueshëm se kjo është një zgjidhje ndër-shfletuesish që është absolutisht e pavarur nga çdo shfletues (Firefox, Chrome, Opera, Safari) ose version i një shfletuesi të caktuar. Skriptet do të funksionojnë njësoj në të gjitha rastet.

Do të filloj nga larg. Kohët e fundit, unë iu bashkua Akademisë HTML si mentor. Përveç faktit që mentorimi ndihmon në organizimin e njohurive tuaja, ai stimulon zhvillimin e gjërave të ndryshme të dobishme në një mënyrë të mahnitshme, sepse në këtë proces shfaqen detyra interesante, zgjidhja e të cilave mund të automatizohet me lehtësi.

Studentët marrin një dizajn udhëzues me tre faqe, secila me paraqitje për tre gjendje: celular, tablet dhe desktop, për gjithsej nëntë paraqitje. Në procesin e paraqitjes së një faqeje adaptive, ka kuptim që periodikisht të ndryshoni madhësinë e dritares dhe të kontrolloni që kur shtoni stile për versionin e desktopit, për shembull, ai celular nuk u prish. Cila është mënyra më e mirë për të kontrolluar nëse paraqitja përputhet?

Pamjet e ekranit që përdoren në projekte të mëdha janë shumë të rënda për një detyrë të tillë, ju duhet diçka shumë e thjeshtë në mënyrë që çdo fillestar ta përdorë atë.

Para së gjithash, natyrisht, m'u kujtua shtojca Pixel Perfect (të paktën është e disponueshme për Chrome dhe Firefox), por nuk përshtatet për një sërë arsyesh. Për shembull, paraqitjet e shkarkuara nuk mund të ndryshojnë kur kaloni midis faqeve dhe kur ndryshoni dritaren e shfletuesit, dhe ndërrimi i tyre manualisht çdo herë do të mërzitet shumë shpejt. Për më tepër, ka shprehje mediatike që mund të ndryshojnë në mënyrë të përsosur paraqitjet për ne.

Zgjidhja ime e parë dukej kështu:

Ky kod është futur në çdo faqe. Ai vendos shprehjet e nevojshme të medias dhe lidhjet me imazhet ndryshohen në paraqitjet aktuale për secilën faqe specifike.

Strukturat ndryshojnë kur kaloni midis faqeve dhe kur ndryshoni madhësinë e dritares, kjo tashmë mund të përdoret dhe është mjaft e përshtatshme. Paraqitjet janë pikërisht nën shënimin, nuk keni nevojë të shkoni tek ata gjatë gjithë kohës redaktori grafik, kështu që edhe një dizajn kaq i thjeshtë mund të kursejë ndjeshëm kohë.

Por ndërsa shkruani stile, sfondet dhe fotografitë tuaja shfaqen në faqe dhe paraqitjet në shtresën e poshtme bëhen të padukshme. Si të jesh?

Zgjidhja ime tjetër ishte një shtesë e Chrome që krijon një shtresë të tejdukshme me paraqitje në secilën faqe. Kur madhësia e dritares ndryshohet, paraqitjet ndryshohen duke përdorur shprehjet mediatike, si në rastin e mëparshëm. Si një bonus, ne kemi shtuar kontrollet e transparencës për shtresën e modelit dhe aftësinë për të aktivizuar modalitetin e përzierjes së dallimeve për ta bërë më të lehtë identifikimin e dallimeve.

Doli të ishte një gjë e mrekullueshme. Por funksionon vetëm në Chrome, pikat kyçe për ndërrimin e paraqitjeve dhe shtigjeve te imazhet duhet të vendosen në konfigurimet e vetë shtesës, imazhet e paraqitjes duhet të shtrihen brenda shtesës dhe kishte lloj-lloj kufizimesh të tjera. Në përgjithësi, jo universale, çdo projekt i ri do të kërkojë vendosje manuale dhe nuk është aspak i përshtatshëm për fillestarët.

Doja të gjeja një zgjidhje shumë, shumë të thjeshtë, në mënyrë që çdokush të mund të përballonte konfigurimin dhe instalimin, dhe që në të njëjtën kohë ai të paktën të kuptonte përafërsisht atë që po bënte.

Për të krahasuar shënimin me paraqitjet, ju nevojiten dy shtresa: një shtresë shënjimi dhe një shtresë e paraqitjes. Nga njëra anë, mund të futni manualisht shtresën me paraqitje në shënimin e faqes, nga ana tjetër, ekziston një rrezik i lartë për ta harruar atë atje kur nuk është më i nevojshëm, kështu që opsioni tjetër ishte përdorimi i elementeve ekzistuese të faqes si shtresat.

Nëse paraqitjet janë caktuar si sfond për , kur ndryshoni transparencën paraqitjet do të bëhen gjithashtu të tejdukshme, kështu që është më mirë të përdorni një element si një shtresë me paraqitjet :

Ashtu si në rastin e mëparshëm, paraqitjet do të qëndrojnë nën shënimin, por tani nëse sfondi është vendosur, ato nuk do të jenë të dukshme. Le ta bëjmë shtresën e shënjimit gjysmë transparente duke shtuar opacitet :

Kjo tashmë mund të përdoret disi, por më mungonte një kontroll i përshtatshëm i transparencës në këtë zgjidhje, kështu që shkrova një skenar të vogël që shton panelin e mëposhtëm në faqe:

Kjo ju lejon të kontrolloni transparencën (në këtë rast, në vend të paraqitjeve, vetëm një sfond me vija), ai mund të tërhiqet zvarrë nëpër faqe dhe mund të fiket nëse nuk nevojitet.

Vendosa të mos bëj një shtesë të shfletuesit në mënyrë që të mos kufizoj numrin e shfletuesve në të cilët mund të përdoret.

Instalimi në fund duket si ky:

1. Instaloni paketën në dosjen e projektit nëpërmjet npm: npm i pixel-glass --save-dev
2. Vendosni fotografitë e paraqitjes në projektin tuaj në dosjen img (ose në një dosje tjetër me fotografi brenda projektit).
3. Ngjit brenda kodi i faqes si ky: Ndryshojeni atë për projektin tuaj: vendosni shprehjet e medias, ndryshoni adresat e imazheve në ato funksionale.
4. Rifresko faqen dhe shijohu.

Sipas mendimit tim, doli të ishte një mjet mjaft i përshtatshëm, por me siguri diçka mund të përmirësohet. Nëse keni ndonjë ide për këtë, më shkruani për to në komente. Do të më interesojë gjithashtu se si i zgjidhni probleme të tilla dhe cilat mjete përdorni për këtë.

UPD: biblioteka është zhvendosur në npm, falë të gjithë kontribuesve

Mirëdita miq. Ditën tjetër Dima Shuleshov më kontaktoi dhe më ofroi një temë për një artikull interesant (Dima, përshëndetje!). Epo, për mua - interesante dhe e rëndësishme, shpresoj që edhe ju të jeni të dobishëm për dikë. Këto janë disa rreshta kodi që do t'ju ndihmojnë të vendosni faqen e uljes saktësisht me paraqitjen.

Përveç kësaj, ju do të zvogëloni ndjeshëm kohën për matjen e distancave dhe kalimin midis photoshop-it, dritares së shfletuesit dhe redaktuesit të tekstit.

Rezultati i përfunduar zbret në faktin se keni një buton në projekt, të fiksuar në këndin e sipërm të majtë (kudo), kur klikoni mbi të, një paraqitje (foto) me një transparencë të caktuar mbivendoset në paraqitjen tuaj, dhe ju mund të vlerësojë se sa të sakta janë dhëmbjet tuaja, dimensionet, pozicionimi i korrespondon dizajnit. Për të kuptuar, duhet të provoni. Unë rekomandoj të shkarkoni burimin dhe të shihni se si funksionon, ose të luani këtë video të shkurtër:

Pra, nëse keni pasur probleme me klientët e përpiktë që kontrollojnë çdo piksel, atëherë tani ky problem nuk duhet të lindë më. Le të zbatojmë më në fund këtë efekt.

Para së gjithash, siç ndodh shpesh, ne përfshijmë bibliotekën jQuery:

Meqenëse është përfshirë tashmë në shumicën e projekteve, sigurohuni që të mos e bëni më. Kjo mund të shkaktojë një konflikt dhe do t'ju duhet shumë kohë për të kuptuar pse lind saktësisht.

Tani, le të shkruajmë disa etiketa brenda projektit tonë. Për mua duket kështu:

Ku div i parë është blloku përgjegjës për butonin, dhe i dyti është mbivendosja e paraqitjes sonë. Në mënyrë që ajo të mbivendoset saktë, duhet të bëni disa cilësime të thjeshta:

P ( sfond: url (../images/maket.jpg) pa përsëritje; /* Paraqitja juaj */ gjerësia: 1255 px;/* gjerësia e paraqitjes */ lartësia: 750 px;/* lartësia e paraqitjes*/ majtas: llogaritja (50 % - 627,5 px);/* vlera e dytë është gjysma e gjerësisë së paraqitjes*/ pozicioni: absolute; lart: 0; opaciteti: 0,4 !e rëndësishme; tranzicioni: .3s; indeksi z: 97; )

Këtu janë 4 parametra që shoqërohen me një koment dhe duhet të zëvendësohen me tuajin. Gjithçka është e thjeshtë!

Tani, le të stilojmë butonin. Nëse keni rëndësi pamjen, më pas modifikoni dhe kështu, mund ta lini ashtu siç është.

#p ( pozicioni: fiks; majtas: 0; lart: 0; gjerësia: 200 px; lartësia: 75 px; sfondi: #c36c2c; indeksi z: 99; kursori: treguesi; rreshtimi i tekstit: në qendër; madhësia e shkronjave: 25 px; lartësia e rreshtit: 0 px; ngjyra: #c36c2c; majtas: -150 px; rreshtimi vertikal: mes; pesha e shkronjave: 700; tranzicioni: 0,3 s ) #p:hover (majtas: 0; lartësia e rreshtit: 80 px; sfondi: #88d3c2;)

Epo, mbetet për të shtuar një reagim ndaj një klikimi në butonin. Ne thjesht do të shtojmë/heqim klasën dhe do të ndryshojmë transparencën e bllokut me paraqitjen në sfond:

$(dokument).ready(funksioni () ( $("#p").kliko(funksioni () ( $("#pp").toggleClass("p") ));));

Zgjatja PerfectPixel për Google Chrome ndihmon dizajnerët e paraqitjes dhe zhvilluesit e uebit për të krijuar shënjimin e faqes që përputhet më së miri me dizajnin e miratuar nga klienti.

Ju hapni faqen që po dizajnoni në Chrome, hapni PerfectPixel, shtoni një shtresë të re - një imazh të detyrës dhe tani mund ta mbivendosni imazhin në rezultat në kohë reale, të krahasoni dhe rregulloni defektet. Ju mund të njiheni me punën e shtesës duke parë këtë video:

Mbështeten shumë shtresa për faqe dhe grupi i shtresave është i ndryshëm për domene të ndryshme. Shtresat e shtuara dhe atributet e tyre ruhen nëse mbyllni shfletuesin dhe fikni kompjuterin.

Për lehtësinë e zhvilluesit, ekziston një funksion Lock / Lock - kur aktivizohet, mund të ndërveproni me elementët e faqes që janë nën shtresën aktive. Ju gjithashtu mund të ndryshoni transparencën e shtresës, t'i jepni asaj koordinata të qarta, të ndryshoni shkallën (e dobishme për testimin e imazheve të Retinës).

Për ata që duan të punojnë me mjetin në mënyrë sa më efikase, mbështeten butonat e nxehtë dhe mënyrat e miut, një listë e plotë e të cilave është e disponueshme në faqen zyrtare të projektit: www.welldonecode.com/perfectpixel/shortcuts .

Paneli i kontrollit mund të minimizohet në skajin e djathtë të ekranit duke klikuar dy herë mbi titull. Modaliteti mini është i dobishëm kur testoni dizajne të përgjegjshme në përmasat e ekranit të vogël.

Shtesa azhurnohet rregullisht, veçori të reja, shtohen çelësat kryesorë, rregullohen gabimet. Ne mirëpresim çdo koment dhe sugjerim, ju lutemi na dërgoni me email: [email i mbrojtur]. Në të ardhmen e afërt, është planifikuar të lëshohen versione për shfletues të tjerë: Firefox, Safari, IE, të zbatojnë sinkronizimin e shtresave dhe cilësimeve përmes cloud. Abonohu ​​në buletinin për të qenë në dijeni të datave të lëshimit të funksionalitetit të ri në faqen zyrtare të internetit: www.welldonecode.com/perfextpixel.

Do të jem i lumtur t'u përgjigjem pyetjeve tuaja këtu në komente ose me postë.

Gëzohem që takova komunitetin Chrome.RF!

Nëse sapo keni filluar të zotëroni kompjuterin dhe përdorni softuer të ndryshëm dhe keni nevojë për një shikues imazhi, shkarkoni Pixel Perfect. Ky shikues zbatohet aq thjesht sa që edhe një përdorues i papërvojë mund ta zotërojë lehtësisht, pavarësisht nga fakti se zhvilluesit nuk donin të kujdeseshin për lokalizimin e produktit për përdoruesit që flasin rusisht (dhe në përgjithësi braktisën idenë e tyre një duzinë vjet më parë) .

Rreth ndërfaqes

Siç u përmend më herët, Pixel Perfect ka një funksionalitet mjaft të dobët. Mund të duket shumë e kufizuar për ata përdorues që janë mësuar me shikuesit që kryejnë shumë detyra, të cilët jo vetëm që mund të shfaqin foto dhe fotografi, por edhe t'i modifikojnë, printojnë ose madje t'i publikojnë në ueb. Prandaj, nëse keni nevojë për shumë funksione, atëherë ju rekomandojmë të anashkaloni këtë softuer duke gjetur një analog, për shembull -.

Pixel Perfect ju lejon të hapni dhe shikoni imazhe JPEG, PNG, GIF dhe BMP. Në të njëjtën kohë, programi nuk mbështet kalimin nga një imazh në tjetrin dhe, për shkak të faktit se nuk ka buton "faqe", çdo imazh do të duhet të hapet veçmas. Gjatë hapjes së një skedari, shikuesi në fund të ekranit tregon të gjithë informacion teknik në lidhje me objektin, i cili është mjaft i përshtatshëm. Gjatë shikimit, përdoruesit mund ta përqendrojnë imazhin dhe ta zgjasin atë.

Karakteristikat e punës

Pixel Perfect shpërndahet në një format portativ, i cili thjeshton më tej përvojën e përdoruesit. Nuk ka nevojë të shqetësoheni për instalimin, thjesht nxirrni arkivin e shkarkuar dhe ekzekutoni ekzekutuesin. Shikuesi identifikon kërkesa të vogla për harduerin e kompjuterit dhe versionet e Windows, i cili nuk është i instaluar në të.

Rezultatet

• mungesa e një ndërfaqeje të rusifikuar;
• shpërndahet në një format portativ;
• paketa e veglave të programit bazohet në performancën e një funksioni - ekrani skedarë grafikë;
• demonstrimi i të dhënave teknike gjatë shikimit të imazhit;
• software nuk mbështetet më nga zhvilluesit.