Plugin Pixel perfect. Să facem cunoștință cu Pixel Perfect. Referință rapidă la utilizarea scriptului pixLayout
Revizuirea pluginurilor și scripturilor pentru lucrul în tehnologie Pixel Perfect.
În primul rând, ce este tehnica Pixel Perfect? Totul este simplu și puteți ghici după nume - aceasta este o tehnică de aspect în care aspectul șablonului HTML se potrivește exact (pixel-pe-pixel) aspectului PSD original.
Cu alte cuvinte, dacă suprapuneți „imaginea” șablonului HTML proiectat pe imaginea aspectului PSD original, atunci ambele imagini ar trebui să se potrivească. Toate elementele imaginilor trebuie combinate - text, imagini, elemente grafice.
Conform cerințelor moderne pentru aspect, Pixel Perfect este aproape un standard de facto. Deci este vital să studiezi această problemă dacă ai dorința și dorința de a avea multe comenzi și clienți.
La momentul scrierii, tehnica Pixel Perfect este implementată folosind plugin-uri adecvate de browser sau folosind scripturi specializate. Două plugin-uri și două scripturi vor fi discutate pe scurt mai jos, dar în toate cazurile pașii pentru a testa Pixel Perfect sunt aceiași.
Inițial în program Photoshop aspectul PSD original este salvat ca imagine în format
| 1 | .png |
Aceasta este întreaga procedură simplă Pixel Perfect pentru verificarea aspectului paginii. Acolo unde elementele de pe pagină nu se potrivesc cu originalul, valorile din fișierele de stil sunt corectate.
Pixel Perfect pentru FirefoxPentru browserul Firefox există un plugin Pixel Perfect pentru verificarea aspectului paginii cu același nume.
După instalarea pluginului Pixel Perfect, pictograma acestuia va apărea în bara de instrumente a browserului Firefox. Merită spus că pluginul Pixel Perfect doar suporturi ultimele versiuni browser Firefox(de exemplu, în versiunea v.31 acest plugin nu va funcționa).
Acum trebuie să deschideți aspectul PSD original în Photoshop și să îl salvați în întregime ca imagine în format
| 1 | .png |
Important! Înainte de a exporta într-o imagine PNG, aspectul PSD trebuie adus la dimensiunea inițială! În acest scop, combinația de taste rapide este rezervată în Photoshop: Ctrl+1 - pentru Windows\Linux, Cmd+1 - pentru Mac OS X.
De îndată ce copia PNG a aspectului PSD este pregătită și salvată, deschideți pagina HTML pe baza acestui aspect în fereastra browserului Firefox.
Lansați pluginul Pixel Perfect făcând clic pe pictograma acestuia din bara de instrumente a browserului. Va apărea imediat o fereastră de plugin în care ne va solicita să selectăm o imagine PNG pregătită în prealabil (o copie a aspectului PSD):
Faceți clic pe butonul „Adăugați strat”, selectați imaginea PNG pregătită și obțineți rezultatul - suprapunerea a două straturi (proiectate și originale):
Vedem cum textul și butonul paginii HTML nu se potrivesc cu originalul PNG. Prin urmare, deschideți fila de stiluri în Firebug (acest plugin este activat automat când lansați pluginul Pixel Perfect) și începeți editarea/ajustarea:
Acordați atenție modului „Inversare” al pluginului Pixel Perfect - cu acesta puteți ajusta foarte precis elementele paginii HTML.
Procesul descris mai sus constă în lucrul cu pluginul Pixel Perfect, precum și cu aspectul Pixel Perfect ca atare. Totul este extrem de simplu.
Mai jos este un videoclip care arată procesul de lucru cu pluginul Pixel Perfect (videoclipul nu este al meu, așa că nu sunt responsabil pentru calitate în toate sensurile) - pentru claritatea muncii, va merge:
Revizuirea pluginului Pixel Perfect pentru browserul Firefox s-a încheiat.
PerfectPixel sub Google ChromePentru a vă conecta la pagina testată, trebuie să vă înregistrați set de bază linii:
$ (funcție ()( $ . pixlayout ( "/calea_la_picture/picture.ext" ); ));Puteți completa setul de bază prin specificarea parametrilor în script ( preluat de pe site-ul oficial):
$ (funcție ()( $ . pixlayout (( src : "/img/layout.jpg " , opacitate : 0,8 , sus : 50 , centru : adevărat , clip : adevărat , afișare : adevărat ), " .wrapper " ); ) );Referință rapidă la utilizarea scriptului pixLayout O referire rapidă la utilizarea scriptului pixLayout este oferită în cele două paragrafe de mai jos ():
preluat tot de pe site-ul oficial- În mișcare
- butoane: „stânga”, „dreapta”, „sus”, „jos”
- butoane: W , A , S , D când imaginea este vizibilă
- Operațiuni Distruge ( eliminați tot html și cod css pixLayout din pagină
- ) - o cruce în colțul din dreapta sus al panoului;
- Fixați panoul - pictograma în colțul din dreapta sus al panoului;
- Referință rapidă - semn de întrebare în colțul din dreapta sus al panoului;
- Restrângeți parametrii - săgeata „sus” din partea de jos a panoului;
Afișează/ascunde imaginea - butonul central al panoului de navigare sau Shift + E. Mai jos este video oficial
, demonstrând cum să lucrați cu scriptul pixLayout:În această scurtă recenzie, ne-am familiarizat cu patru instrumente pentru aspect perfect pixel. Două dintre ele sunt pluginuri gratuite pentru browsere. Celelalte două sunt scripturi JavaScript pentru a se conecta la o pagină HTML.
Ce să alegi pentru munca ta este la latitudinea fiecăruia.
Cel mai bun lucru despre pluginurile de browser este că sunt gratuite, ușor de instalat și ușor de utilizat.
Dezavantajul scriptului X-Precise este că este plătit (5 USD), necesită o conexiune la pagina HTML care este verificată și depinde de biblioteca jQuery. Dezavantajul pixLayout se mai poate spune că, pentru ca acesta să funcționeze, necesită „tam-tam” suplimentar cu conectarea la pagina HTML.
Cu toate acestea, avantajul ambelor scripturi este faptul incontestabil că aceasta este o soluție cross-browser, absolut independentă de orice browser (Firefox, Chrome, Opera, Safari) sau de versiunea unui anumit browser. Scripturile vor funcționa la fel în toate cazurile.
Extensia PerfectPixel pentru Google Chrome îi ajută pe designerii de aspect și dezvoltatorii web să creeze machete de site-uri web care se potrivesc cel mai bine cu designul aprobat de client.
Deschideți pagina pe care o dezvoltați în Chrome, lansați PerfectPixel, adăugați strat nou- o imagine a sarcinii, iar acum puteți suprapune imaginea rezultatului în timp real, compara și corecta defectele. Puteți vedea cum funcționează extensia urmărind acest videoclip:
Sunt acceptate mai multe straturi pe pagină, iar setul de straturi este diferit pentru diferite domenii. Straturile adăugate și atributele lor sunt salvate dacă închideți browserul și opriți computerul.
Pentru confortul dezvoltatorului, există o funcție de blocare - atunci când este activată, puteți interacționa cu elementele paginii care se află sub stratul activ. De asemenea, puteți modifica transparența stratului, îi puteți da coordonate explicite, puteți schimba scara (utilă pentru Testarea retinei imagini).
Pentru cei care doresc să lucreze cu instrumentul cât mai eficient posibil, sunt acceptate tastele rapide și modurile de operare ale mouse-ului, lista completa care sunt disponibile pe site-ul oficial al proiectului: www.welldonecode.com/perfectpixel/shortcuts.
Panoul de control poate fi minimizat la marginea dreaptă a ecranului făcând dublu clic pe titlu. Modul mini este util atunci când testați design-uri receptive pe ecrane de dimensiuni mici.
Extensia este actualizată în mod regulat, sunt adăugate noi funcții și taste rapide, iar erorile sunt remediate. Așteptăm orice comentarii și sugestii, vă rugăm să ne scrieți pe e-mail: [email protected]. În viitorul apropiat, este planificată să lanseze versiuni pentru alte browsere: Firefox, Safari, IE și să implementeze sincronizarea straturilor și setărilor prin cloud. Abonați-vă la newsletter pentru a fi la curent cu datele de lansare ale noii funcționalități pe site-ul oficial: www.welldonecode.com/perfextpixel.
Voi fi bucuros să vă răspund la întrebări aici, în comentarii sau prin e-mail.
Mă bucur să vă cunosc în comunitatea Chrome.RF!
Dacă abia începi să stăpânești computerul și să folosești diverse programe și ai nevoie de un program pentru vizualizarea imaginilor, descarcă Pixel Perfect. Acest vizualizator este implementat atât de simplu încât chiar și un utilizator fără experiență îl poate stăpâni cu ușurință, în ciuda faptului că dezvoltatorii nu au vrut să-și facă griji cu privire la localizarea produsului pentru utilizatorii vorbitori de limbă rusă (și, în general, și-au abandonat creația acum zece ani).
Despre interfataDupă cum am menționat mai devreme, Pixel Perfect are o funcționalitate destul de slabă. Poate părea foarte limitat la acei utilizatori care sunt obișnuiți cu vizualizatori multitasking care nu pot doar să afișeze fotografii și imagini, ci și să le editeze, să le imprime sau chiar să le publice online. Prin urmare, dacă aveți nevoie de multe funcții, vă recomandăm să ocoliți acest software prin găsirea unui analog, de exemplu -.
Pixel Perfect vă permite să deschideți și să vizualizați imagini în formate JPEG, PNG, GIF și BMP. Cu toate acestea, programul nu acceptă trecerea de la o imagine la alta și, din cauza faptului că nu există un buton de „întorsătură”, fiecare imagine va trebui deschisă separat. În timp ce deschideți un fișier, vizualizatorul din partea de jos a ecranului arată toate informatii tehnice despre obiect, ceea ce este destul de convenabil. Când vizionează, utilizatorii pot centra imaginea și o pot întinde.
Caracteristicile munciiPixel Perfect este distribuit într-un format portabil, ceea ce simplifică și mai mult experiența utilizatorului. Nu este nevoie să vă faceți griji cu privire la instalare, doar dezarhivați arhiva descărcată și rulați fișierul executabil. Vizualizatorul identifică cerințe neesențiale pentru hardware-ul PC-ului și versiuni Windows, care nu este instalat.
Rezultate- lipsa unei interfețe rusificate;
- distribuit în format portabil;
- Instrumentele programului se bazează pe realizarea unei singure funcții - afișarea fișierelor grafice;
- demonstrarea datelor tehnice în timpul vizualizării imaginii;
- produs software nu mai este susținută de dezvoltatori.
Voi începe de departe. Nu cu mult timp în urmă m-am alăturat Academiei HTML ca mentor. Pe lângă faptul că mentorat vă ajută să vă organizați cunoștințele, stimulează uimitor dezvoltarea diverselor lucruri utile, deoarece în acest proces apar sarcini interesante, a căror soluție poate fi automatizată convenabil.
Elevii primesc un design de instruire de trei pagini, fiecare cu machete pentru trei stări: mobil, tabletă și desktop - pentru un total de nouă machete. În procesul de aranjare a unei pagini adaptive, este logic să schimbați periodic dimensiunea ferestrei și să verificați dacă, atunci când adăugați stiluri pentru versiunea desktop, de exemplu, cea mobilă nu s-a rupt. Care este cel mai bun mod de a verifica conformitatea cu aspectul?
Capturile de ecran, care sunt folosite în proiecte mari, sunt prea grele pentru o astfel de sarcină, avem nevoie de ceva foarte simplu pentru ca orice începător să le poată folosi.
Primul lucru la care m-am gândit, desigur, a fost pluginul Pixel Perfect (cel puțin este disponibil pentru Chrome și Firefox), dar nu este potrivit din mai multe motive. De exemplu, aspectele încărcate nu se pot schimba atunci când comutați între pagini și când schimbați fereastra browserului, iar comutarea lor manuală de fiecare dată va deveni rapid plictisitoare. În plus, există expresii media care pot schimba perfect aspectul pentru noi.
Prima mea soluție a arătat așa:
BODY ( background-repeat: nu-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); ) @media (min-width: 768px) ( BODY ( background- imagine: url("img/index-tablet.png" ) ) @media (lățime minimă: 1024px) ( BODY ( imagine de fundal: url("img/index-desktop.png"); ) )
Acest cod este introdus în fiecare pagină. Setează expresiile media necesare, iar linkurile către imagini sunt modificate în aspectul curent pentru fiecare pagină specifică.
Aspectele se schimbă la comutarea între pagini și la redimensionarea ferestrei, acest lucru poate fi deja folosit și este destul de convenabil. Aspectele se află direct sub marcaje, așa că nu trebuie să mergeți tot timpul la magazin pentru a le obține. editor grafic, deci chiar și asta design simplu poate economisi timp semnificativ.
Dar pe măsură ce stilurile sunt scrise, pagina apare cu propriile fundaluri și imagini, iar aspectele din stratul inferior devin invizibile. Ce ar trebuii să fac?
Următoarea mea soluție a fost o extensie pentru Chrome, care creează strat translucid cu machete. Când redimensionați fereastra, machetele sunt modificate folosind expresii media, ca în cazul precedent. Ca bonus, am adăugat control asupra transparenței stratului de aspect și abilitatea de a activa modul de amestecare a diferențelor pentru a facilita găsirea diferențelor.
S-a dovedit a fi un lucru minunat. Dar funcționează doar în Chrome, puncte cheie pentru a comuta aspectele și căile către imagini, trebuie setate în configurațiile extensiei în sine, imaginile de aspect trebuie să fie situate în interiorul extensiei și au existat tot felul de alte restricții. În general, nu universal, pentru fiecare proiect nou veți avea nevoie setare manuală iar acest lucru nu este deloc potrivit pentru începători.
Am vrut să găsesc o soluție foarte, foarte simplă, astfel încât oricine să poată face față instalării și instalării și, în același timp, să înțeleagă cel puțin aproximativ ce face.
Pentru a compara marcajul cu machetele, aveți nevoie de două straturi: un strat cu marcaj și un strat cu machete. Pe de o parte, puteți insera manual un strat cu machete în aspectul paginii, pe de altă parte, există un risc mare de a-l uita acolo când nu mai este necesar, așa că următoarea opțiune a fost să folosiți elementele de pagină existente ca straturi.
Dacă setați machete ca fundal pentru , atunci când modificați transparența, machetele vor deveni, de asemenea, translucide, deci este mai bine să utilizați elementul ca strat cu machete:
HTML ( background-repeat: nu-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); ) @media (min-width: 768px) ( HTML ( background- imagine: url("img/index-tablet.png" ) ) @media (lățime minimă: 1024px) ( HTML ( imagine de fundal: url ("img/index-desktop.png"); ) )
Ca și în cazul precedent, machetele se vor afla sub marcaj, dar acum, dacă este specificat un fundal, acestea nu vor fi vizibile. Să facem stratul de marcare semi-transparent adăugând opacitate pentru:
/* Utilizați ca strat cu aspect */ HTML ( background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); ) @media (min - lățime: 768 px) ( HTML ( imagine de fundal: url("img/index-tablet.png"); ) ) @media (lățime minimă: 1024 px) ( HTML ( imagine de fundal: url("img/index- desktop .png"); ) ) /* Faceți stratul de marcare semi-transparent */ BODY ( opacitate: .5; )
Acest lucru poate fi folosit și cumva, dar acestei soluții nu aveau controale convenabile de transparență, așa că am scris un mic script care adaugă următorul panou la pagină:
Vă permite să controlați transparența (în acest caz, în locul machetelor există pur și simplu un fundal cu dungi), poate fi tras în jurul paginii și poate fi dezactivat dacă nu este necesar.
Am decis să nu fac o extensie de browser pentru a nu limita numărul de browsere în care poate fi folosit.
Instalarea sfârșește prin a arăta astfel:
După părerea mea, s-a dovedit a fi un instrument destul de convenabil, dar cu siguranță ceva ar putea fi îmbunătățit. Dacă aveți idei în acest sens, scrieți-mi în comentarii. De asemenea, voi fi interesat de modul în care rezolvați astfel de probleme și ce instrumente folosiți pentru aceasta.
UPD: biblioteca s-a mutat la npm, mulțumiri tuturor participanților
Bună ziua, prieteni. Zilele trecute Dima Shuleshov m-a contactat și mi-a oferit un subiect pentru un articol interesant (Dima, salut!). Ei bine, pentru mine este interesant și relevant, sper să fie util și ție, pentru cineva. Acestea sunt câteva rânduri de cod care vă vor ajuta să dispuneți pagina de destinație exact cu aspectul.
În plus, veți reduce semnificativ timpul petrecut cu măsurarea distanțelor și comutarea între Photoshop, fereastra browserului și un editor de text.
Rezultatul final se rezumă la faptul că aveți un buton în proiectul dvs., fixat în colțul din stânga sus (orice loc), atunci când faceți clic pe el, un aspect (imagine) cu o anumită transparență este suprapus pe aspectul dvs. și puteți evalua cât de precise sunt indentările dvs., dimensiunile, poziționarea corespunde designului. Pentru a înțelege, trebuie să încerci. Recomand să descărcați sursa și să vedeți cum funcționează sau să redați acest scurt videoclip:
Deci, dacă ați avut probleme cu clienții meticuloși care verifică fiecare pixel, atunci acum o astfel de problemă nu ar mai trebui să apară. Să ne dăm seama în sfârșit de acest efect.
În primul rând, așa cum se întâmplă adesea, conectăm biblioteca jQuery:
Deoarece în majoritatea proiectelor este deja conectat, asigurați-vă că nu mai faceți acest lucru. Acest lucru poate provoca conflicte și vă va dura mult timp să vă dați seama exact de ce apare.
Acum, să adăugăm câteva etichete în proiectul nostru. Pentru mine arata asa:
Pixel Perfect
Unde primul div este un bloc responsabil pentru buton, iar al doilea este pentru suprapunerea aspectului nostru. Pentru ca acesta să fie aplicat corect, trebuie să faceți câteva setări simple:
P ( fundal: url(../images/maket.jpg) no-repeat; /* aspectul dvs. */ lățime: 1255px;/* lățime aspect */ înălțime: 750px;/* înălțime aspect */ stânga: calc(50) % - 627,5px);/* a doua valoare - jumătate din lățimea aspectului */ poziție: absolută: 0,4 !important z-index: 97);
Iată 4 parametri care sunt însoțiți de un comentariu și trebuie înlocuiți cu al tău. Totul este simplu!
Acum, să modelăm butonul. Daca iti pasa aspect, apoi editați, altfel îl puteți lăsa așa cum este.
#p ( poziție: fix; stânga: 0; sus: 0; lățime: 200px; înălțime: 75px; fundal: #c36c2c; z-index: 99; cursor: pointer; text-align: center; font-size: 25px; line-height: 0px; culoare: #c36c2c: tranziție: .3s )
Ei bine, tot ce rămâne este să adăugați o reacție la un clic pe buton. Pur și simplu vom adăuga/elimina o clasă și vom schimba transparența blocului cu aspectul pe fundal:
$(document).ready(function () ( $("#p").click(function () ( $("#pp").toggleClass("p") ));));