PerfectPixel proširenje WellDoneCode. Upoznajte Pixel Perfect PerfectPixel za Google Chrome
Dobar dan prijatelji. Neki dan mi se javio Dima Shuleshov i ponudio mi temu za zanimljiv članak (Dima, zdravo!). Pa, za mene je to zanimljivo i relevantno, nadam se da će i vama biti korisno, za nekoga. Ovo je nekoliko redaka koda koji će vam pomoći da svoju odredišnu stranicu rasporedite točno s izgledom.
Osim toga, znatno ćete smanjiti vrijeme provedeno u mjerenju udaljenosti i prebacivanju između Photoshopa, prozora preglednika i uređivača teksta.
Gotov rezultat svodi se na činjenicu da imate gumb u svom projektu, fiksiran u gornjem lijevom kutu (bilo koje mjesto), kada kliknete na njega, izgled (slika) s određenom transparentnošću se superponira na vaš izgled, i možete procijeniti koliko su točne vaše uvlake, dimenzije, pozicioniranje odgovaraju dizajnu. Da biste razumjeli, morate pokušati. Preporučam da preuzmete izvor i vidite kako radi ili pustite ovaj kratki video:
Dakle, ako ste imali problema s pedantnim kupcima koji provjeravaju svaki piksel, sada se takav problem više ne bi trebao pojaviti. Idemo konačno shvatiti ovaj učinak.
Prije svega, kao što se često događa, povezujemo jQuery biblioteku:
Budući da je u većini projekata već povezan, pobrinite se da to više ne učinite. To može izazvati sukob, a trebat će vam dosta vremena da točno shvatite zašto do njega dolazi.
Sada, dodajmo neke oznake unutar našeg projekta. Kod mene to izgleda ovako:
Savršen piksel
Gdje je prvi div blok odgovoran za gumb, a drugi je za preklapanje našeg izgleda. Kako bi se pravilno primijenio, morate napraviti nekoliko jednostavnih postavki:
P ( pozadina: url(../images/maket.jpg) no-repeat; /* Vaš izgled */ širina: 1255px;/* širina izgleda */ visina: 750px;/* visina izgleda */ lijevo: calc(50 % - 627.5px);/* druga vrijednost - polovica širine izgleda */ položaj: apsolutno; vrh: 0; neprozirnost: 0.4 !važno; prijelaz: .3s; z-indeks: 97; )
Ovdje su 4 parametra koja su popraćena komentarom i potrebno ih je zamijeniti svojim. Sve je jednostavno!
Sada stilizirajmo gumb. Ako vam je izgled važan, uredite, inače ga možete ostaviti kakav jest.
#p ( pozicija: fiksna; lijevo: 0; gore: 0; širina: 200px; visina: 75px; pozadina: #c36c2c; z-index: 99; pokazivač: pokazivač; poravnanje teksta: središte; veličina fonta: 25px; line-height: 0px; color: #c36c2c; left: -150px; vertical-align: middle; font-weight: 700; prijelaz: .3s ) #p:hover ( lijevo: 0; line-height: 80px; pozadina: #88d3c2; )
Pa, preostaje samo dodati reakciju na klik na gumb. Jednostavno ćemo dodati/ukloniti klasu i promijeniti transparentnost bloka s izgledom u pozadini:
$(document).ready(function () ( $("#p").click(function () ( $("#pp").toggleClass("p") ));));
Pregled dodataka i skripti za rad s tehnikom Pixel Perfect.
Prije svega, što je tehnika Pixel Perfect? Sve je jednostavno i možete pogoditi po nazivu - ovo je tehnika izgleda u kojoj izgled HTML predloška točno odgovara (piksel za piksel) originalnom PSD izgledu.
Drugim riječima, ako postavite "sliku" dizajniranog HTML predloška na sliku izvornog PSD izgleda, tada bi se obje slike trebale podudarati. Svi elementi slike moraju biti spojeni - tekst, slike, grafički elementi.
Prema modernim zahtjevima za izgled, Pixel Perfect je gotovo de facto standard. Stoga je važno proučiti ovo pitanje ako imate želju i želju da imate mnogo narudžbi i kupaca.
U vrijeme pisanja teksta, tehnika Pixel Perfect implementirana je pomoću odgovarajućih dodataka preglednika ili pomoću specijaliziranih skripti. U nastavku će se ukratko raspravljati o dva dodatka i dvije skripte, ali u svim slučajevima koraci za testiranje Pixel Perfecta su isti.
U početku se u Photoshopu originalni PSD izgled sprema kao slika u formatu
| 1 | .png |
Ovo je cijela jednostavna Pixel Perfect procedura za provjeru izgleda stranice. Gdje elementi na stranici ne odgovaraju izvorniku, vrijednosti u datotekama stilova se ispravljaju.
Pixel savršen za FirefoxZa preglednik Firefox postoji istoimeni dodatak Pixel Perfect za provjeru izgleda stranice.
Nakon instaliranja dodatka Pixel Perfect, njegova ikona pojavit će se na alatnoj traci preglednika Firefox. Vrijedno je reći da dodatak Pixel Perfect Podržava samo najnovije verzije preglednika Firefox(na primjer, u verziji v.31 ovaj dodatak neće raditi).
Sada morate otvoriti izvorni PSD izgled u Photoshopu i spremiti ga u cijelosti kao sliku u formatu
| 1 | .png |
Važno! Prije izvoza u PNG sliku, PSD izgled mora se vratiti na izvornu veličinu! U tu svrhu Photoshop ima rezerviranu kombinaciju prečaca: Ctrl+1 - za Windows\Linux, Cmd+1 - za Mac OS X.
Čim se PNG kopija PSD izgleda pripremi i spremi, otvorite HTML stranicu na temelju ovog izgleda u prozoru preglednika Firefox.
Pokrenite dodatak Pixel Perfect klikom na njegovu ikonu na alatnoj traci preglednika. Odmah će se pojaviti prozor dodatka u kojem će se tražiti da odaberemo unaprijed pripremljenu PNG sliku (kopija PSD izgleda):
Kliknite na gumb "Dodaj sloj", odaberite pripremljenu PNG sliku i dobijte rezultat - preklapanje dvaju slojeva (dizajniranog i originalnog):
Vidimo kako tekst i gumb HTML stranice ne odgovaraju PNG izvorniku. Stoga otvorite karticu stilova u Firebugu (ovaj dodatak se automatski aktivira kada pokrenete dodatak Pixel Perfect) i počnite uređivati/podešavati:
Obratite pozornost na način rada "Invert" dodatka Pixel Perfect - pomoću njega možete vrlo precizno prilagoditi elemente HTML stranice.
Gore opisani proces sastoji se od rada s Pixel Perfect dodatkom, kao i Pixel Perfect rasporedom kao takvim. Sve je krajnje jednostavno.
Ispod je video koji prikazuje proces rada s dodatkom Pixel Perfect (video nije moj, tako da ne odgovaram za kvalitetu u svakom smislu) - radi jasnoće rada to će ići:
Završena je recenzija dodatka Pixel Perfect za preglednik Firefox.
PerfectPixel za Google ChromeZa spajanje na stranicu koja se testira, trebate napisati osnovni skup redaka:
$ (funkcija ()( $ . pixlayout ( "/put_do_slike/slika.ext" ); ));Osnovni skup možete nadopuniti određivanjem parametara u skripti ( preuzeto sa službene stranice):
$ (funkcija ()( $ . pixlayout (( src : "/img/layout.jpg" , neprozirnost : 0,8 , vrh : 50 , središte : točno , isječak : točno , prikaz : točno ), ".wrapper" ); ) ); Brzi pregled korištenja skripte pixLayoutBrzi pregled korištenja skripte pixLayout nalazi se u dva odlomka u nastavku ( također preuzeto sa službene stranice):
Kretanje- tipke: 'lijevo', 'desno', 'gore', 'dolje'
- tipke: W , A , S , D kada je slika vidljiva
- gumbi navigacijske trake
- Uništi ( uklonite sav html i css kod pixLayouta sa stranice) - križ u gornjem desnom kutu ploče;
- Pričvrstite ploču - ikona u gornjem desnom kutu ploče;
- Brzi pregled - upitnik u gornjem desnom kutu panela;
- Sažmi parametre - strelica "gore" na dnu ploče;
- Prikaži\sakrij sliku - središnji gumb navigacijske ploče ili Shift + E.
Ispod je službeni video koji pokazuje kako raditi sa skriptom pixLayout:
ZaključakU ovoj kratkoj recenziji upoznali smo se s četiri alata za pixel perfect layout. Dva od njih su besplatni dodaci za preglednik. Druge dvije su JavaScript skripte za povezivanje s HTML stranicom.
Što odabrati za svoj rad svatko odlučuje.
Najbolja stvar kod dodataka za preglednike je ta što su besplatni, jednostavni za instaliranje i korištenje.
Loša strana skripte X-Precise je ta što se plaća (5 USD), zahtijeva vezu s HTML stranicom koja se provjerava i ovisi o biblioteci jQuery. Nedostatak pixLayout-a također se može navesti da je za rad potrebna dodatna “muka” oko spajanja na HTML stranicu.
Međutim, prednost obje skripte je neosporna činjenica da se radi o cross-browser rješenju, apsolutno neovisno o bilo kojem pregledniku (Firefox, Chrome, Opera, Safari) ili verziji pojedinog preglednika. Skripte će raditi isto u svim slučajevima.
Proširenje PerfectPixel za Google Chrome pomaže dizajnerima izgleda i web programerima stvoriti izglede web stranica koji najbolje odgovaraju dizajnu koji je odobrio korisnik.
Otvorite stranicu koju razvijate u Chromeu, pokrenete PerfectPixel, dodate novi sloj - sliku zadatka i sada možete u stvarnom vremenu prekriti sliku na rezultat, usporediti i ispraviti nedostatke. Možete vidjeti kako proširenje radi gledajući ovaj video:
Podržano je više slojeva po stranici, a skup slojeva je različit za različite domene. Dodani slojevi i njihovi atributi spremaju se ako zatvorite preglednik i isključite računalo.
Radi praktičnosti programera, postoji funkcija zaključavanja - kada je aktivirana, možete komunicirati s elementima stranice koji se nalaze ispod aktivnog sloja. Također možete promijeniti prozirnost sloja, dati mu eksplicitne koordinate, promijeniti mjerilo (korisno za testiranje Retina slika).
Za one koji žele raditi s alatom što je moguće učinkovitije, podržani su tipkovni prečaci i načini rada miša, čiji je potpuni popis dostupan na službenoj web stranici projekta: www.welldonecode.com/perfectpixel/shortcuts.
Upravljačka ploča se može minimizirati na desni rub ekrana dvostrukim klikom na naslov. Mini način rada koristan je pri testiranju responzivnog dizajna na malim zaslonima.
Proširenje se redovito ažurira, dodaju se nove funkcije i tipke prečaca, a pogreške se ispravljaju. Pozdravljamo sve komentare i prijedloge, pišite nam putem e-pošte: [e-mail zaštićen]. U skoroj budućnosti planira se izdati verzije za druge preglednike: Firefox, Safari, IE, te implementirati sinkronizaciju slojeva i postavki putem oblaka. Pretplatite se na newsletter kako biste bili informirani o datumima izlaska nove funkcionalnosti na službenoj web stranici: www.welldonecode.com/perfextpixel.
Rado ću odgovoriti na vaša pitanja ovdje u komentarima ili e-poštom.
Drago mi je što smo se upoznali u Chrome.RF zajednici!
13/01/2017Počet ću izdaleka. Nedavno sam se pridružio HTML akademiji kao mentor. Osim što mentorstvo pomaže organizirati vaše znanje, ono nevjerojatno potiče razvoj raznih korisnih stvari, jer se u procesu pojavljuju zanimljivi zadaci čije se rješavanje može zgodno automatizirati.
Učenici dobivaju nastavni dizajn od tri stranice, svaka s izgledima za tri stanja: mobitel, tablet i stolno računalo - za ukupno devet izgleda. U procesu postavljanja prilagodljive stranice ima smisla povremeno mijenjati veličinu prozora i provjeriti da se prilikom dodavanja stilova za desktop verziju, na primjer, mobilna nije pokvarila. Koji je najbolji način za provjeru usklađenosti s izgledom?
Screenshotovi, koji se koriste u velikim projektima, preteški su za takav zadatak, potrebno nam je nešto vrlo jednostavno kako bi ga svaki početnik mogao koristiti.
Prvo na što sam se sjetio, naravno, bio je dodatak Pixel Perfect (barem je dostupan za Chrome i Firefox), ali nije prikladan iz više razloga. Na primjer, učitani izgledi ne mogu se mijenjati prilikom prebacivanja između stranica i prilikom promjene prozora preglednika, a njihovo ručno mijenjanje svaki put brzo će dosaditi. Štoviše, postoje medijski izrazi koji nam mogu savršeno promijeniti izgled.
Moje prvo rješenje izgledalo je ovako:
BODY (pozadinsko ponavljanje: bez ponavljanja; pozadinska pozicija: 50% 0; pozadinska slika: url("img/index-mobile.png"); ) @medij (min. širina: 768px) ( TIJELO ( pozadina- slika: url("img/index-tablet.png"); ) ) @media (min-width: 1024px) ( BODY ( background-image: url("img/index-desktop.png"); ) )
Ovaj kod je umetnut na svaku stranicu. Postavlja potrebne medijske izraze, a veze na slike mijenjaju se u trenutne izglede za svaku određenu stranicu.
Izgledi se mijenjaju prilikom prebacivanja između stranica i kod promjene veličine prozora, to se već može koristiti i prilično je zgodno. Izgledi leže izravno ispod oznake; ne morate cijelo vrijeme ići u grafički uređivač da biste ih dobili, pa čak i tako jednostavan dizajn može značajno uštedjeti vrijeme.
No kako se stilovi pišu, stranica se pojavljuje s vlastitom pozadinom i slikama, a izgledi u donjem sloju postaju nevidljivi. Što da napravim?
Moje sljedeće rješenje bilo je Chromeovo proširenje koje stvara proziran sloj s rasporedima na svakoj stranici. Kada promijenite veličinu prozora, izgledi se mijenjaju pomoću medijskih izraza, kao u prethodnom slučaju. Kao bonus, dodali smo kontrolu nad transparentnošću sloja izgleda i mogućnost omogućavanja načina stapanja razlika kako bismo lakše pronašli razlike.
Pokazalo se da je to divna stvar. Ali radi samo u Chromeu, ključne točke za promjenu izgleda i putanje do slika moraju biti postavljene u konfiguracijama samog proširenja, slike izgleda moraju biti unutar proširenja, a postojala su i razna druga ograničenja. Općenito, nije univerzalan, svaki će novi projekt zahtijevati ručnu konfiguraciju i to uopće nije prikladno za početnike.
Htio sam pronaći neko vrlo, vrlo jednostavno rješenje kako bi se svatko mogao nositi s postavljanjem i instalacijom, a da pritom barem otprilike razumije što radi.
Da biste usporedili označavanje s izgledima, potrebna su vam dva sloja: sloj s označavanjem i sloj s izgledima. S jedne strane, možete ručno umetnuti sloj s izgledima u izgled stranice, s druge strane, postoji veliki rizik da ga tamo zaboravite kada više nije potreban, pa je sljedeća opcija bila korištenje postojećih elemenata stranice kao slojeva.
Ako postavite rasporede kao pozadinu za , kada promijenite prozirnost, rasporedi će također postati prozirni, stoga je bolje koristiti element kao sloj s izgledima:
HTML ( pozadinsko ponavljanje: bez ponavljanja; pozadinska pozicija: 50% 0; pozadinska slika: url("img/index-mobile.png"); ) @medij (min. širina: 768 px) ( HTML ( pozadina- slika: url("img/index-tablet.png"); ) ) @media (min-width: 1024px) ( HTML ( background-image: url("img/index-desktop.png"); ) )
Kao iu prethodnom slučaju, izgledi će ležati ispod oznake, ali sada ako je navedena pozadina, neće biti vidljivi. Učinimo sloj označavanja poluprozirnim dodavanjem neprozirnosti za:
/* Koristi kao sloj izgleda */ HTML ( pozadinsko ponavljanje: bez ponavljanja; pozadinska pozicija: 50% 0; pozadinska slika: url("img/index-mobile.png"); ) @mediji (min- width: 768px) ( HTML ( background-image: url("img/index-tablet.png"); ) ) @media (min-width: 1024px) ( HTML ( background-image: url("img/index-desktop) .png"); ) ) /* Učini sloj označavanja poluprozirnim */ BODY ( neprozirnost: .5; )
Ovo se također može nekako koristiti, ali ovom rješenju nedostaju prikladne kontrole transparentnosti, pa sam napisao malu skriptu koja na stranicu dodaje ploču poput ove:
Omogućuje vam kontrolu prozirnosti (u ovom slučaju, umjesto izgleda postoji samo prugasta pozadina), može se povlačiti po stranici i može se isključiti ako nije potrebno.
Odlučio sam ne napraviti proširenje preglednika kako ne bih ograničio broj preglednika u kojima se može koristiti.
Instalacija na kraju izgleda ovako:
Po mom mišljenju, pokazao se kao prilično zgodan alat, ali nešto bi se sigurno moglo poboljšati. Ako imate bilo kakvih ideja o ovom pitanju, napišite mi ih u komentarima. Također će me zanimati kako rješavate takve probleme i koje alate koristite za to.
UPD: knjižnica se preselila u npm, hvala svim sudionicima
Ako tek počinjete svladavati računalo i koristiti razne softvere i trebate program za pregledavanje slika, preuzmite Pixel Perfect. Ovaj preglednik implementiran je tako jednostavno da ga čak i neiskusni korisnik može lako svladati, unatoč činjenici da se programeri nisu htjeli brinuti o lokalizaciji proizvoda za korisnike koji govore ruski (i općenito su napustili svoju zamisao prije deset godina).
O sučeljuKao što je ranije spomenuto, Pixel Perfect ima prilično oskudnu funkcionalnost. Može se činiti vrlo ograničenim onim korisnicima koji su navikli na multitasking preglednike koji ne samo da mogu prikazati fotografije i slike, već ih i uređivati, ispisivati ili čak objavljivati na internetu. Stoga, ako vam je potrebno mnogo funkcija, preporučujemo da zaobiđete ovaj softver pronalaženjem analognog, na primjer -.
Pixel Perfect vam omogućuje otvaranje i pregled slika u JPEG, PNG, GIF i BMP formatima. Međutim, program ne podržava pomicanje s jedne slike na drugu i, zbog činjenice da ne postoji tipka za "okretanje", svaka će se slika morati otvoriti zasebno. Prilikom otvaranja datoteke, preglednik na dnu zaslona prikazuje sve tehničke informacije o objektu, što je vrlo zgodno. Prilikom gledanja, korisnici mogu centrirati sliku i razvući je.
Značajke radaPixel Perfect distribuira se u prijenosnom formatu, što dodatno pojednostavljuje korisničko iskustvo. Nema potrebe brinuti o instalaciji, samo raspakirajte preuzetu arhivu i pokrenite izvršnu datoteku. Preglednik identificira nebitne zahtjeve za hardver osobnog računala i za verziju sustava Windows koja je na njemu instalirana.
Rezultati- nedostatak rusificiranog sučelja;
- distribuiran u prijenosnom formatu;
- Alati programa temelje se na obavljanju jedne funkcije - prikaz grafičkih datoteka;
- demonstracija tehničkih podataka tijekom pregledavanja slike;
- programeri više ne podržavaju programski proizvod.