PerfectPixel ekstenzija od WellDoneCode. Upoznavanje Pixel Perfect PerfectPixel za Google Chrome
Dobar dan prijatelji. Neki dan me kontaktirao Dima Šulešov i ponudio mi temu za zanimljiv članak (Dima, zdravo!). Pa meni je zanimljivo i relevantno, nadam se da će i vama biti od koristi, nekome. Ovo je nekoliko linija koda koji će vam pomoći da svoju odredišnu stranicu postavite točno s izgledom.
Osim toga, značajno ćete smanjiti vrijeme provedeno u mjerenju udaljenosti i prebacivanju između Photoshopa, prozora pretraživača i uređivača teksta.
Gotov rezultat se svodi na to da imate dugme u svom projektu, fiksirano u gornjem levom uglu (bilo koje mesto), kada kliknete na njega, na vaš izgled se postavlja raspored (slika) određene transparentnosti i možete procijeniti koliko su vaša udubljenja tačna, dimenzije, pozicioniranje odgovara dizajnu. Da biste razumjeli, morate pokušati. Preporučujem da preuzmete izvor i vidite kako funkcionira ili pustite ovaj kratki video:
Dakle, ako ste imali problema s pedantnim kupcima koji provjeravaju svaki piksel, onda se takav problem više ne bi trebao pojaviti. Hajde da konačno shvatimo ovaj efekat.
Prije svega, kao što se često dešava, povezujemo jQuery biblioteku:
Budući da je u većini projekata već povezan, pobrinite se da to više ne radite. To može uzrokovati konflikt i trebat će vam mnogo vremena da shvatite zašto tačno nastaje.
Sada, dodajmo neke oznake unutar našeg projekta. Za mene to izgleda ovako:
Pixel Perfect
Pri čemu je prvi div blok odgovoran za dugme, a drugi je za preklapanje našeg izgleda. Da bi se pravilno primijenio, potrebno je izvršiti nekoliko jednostavnih postavki:
P ( background: url(../images/maket.jpg) bez ponavljanja; /* Vaš raspored */ širina: 1255px;/* širina rasporeda */ visina: 750px;/* visina izgleda */ lijevo: calc(50 % - 627,5px);/* druga vrijednost - polovina širine izgleda*/ pozicija: apsolutna; vrh: 0; neprozirnost: 0,4 !važno; prijelaz: .3s; z-indeks: 97; )
Evo 4 parametra koji su popraćeni komentarom i koje treba zamijeniti svojim. Sve je jednostavno!
Sada, stilizirajmo dugme. Ako vam je izgled važan, uredite, inače možete ostaviti kakav jeste.
#p ( pozicija: fiksna; lijevo: 0; vrh: 0; širina: 200px; visina: 75px; pozadina: #c36c2c; z-indeks: 99; kursor: pokazivač; text-align: centar; veličina fonta: 25px; visina linije: 0px; boja: #c36c2c; lijevo: -150px; vertikalno poravnanje: sredina; font-weight: 700; prijelaz: .3s ) #p:hover (lijevo: 0; visina linije: 80px; pozadina: #88d3c2; )
Pa, sve što ostaje je dodati reakciju na klik na dugme. Jednostavno ćemo dodati/ukloniti klasu i promijeniti transparentnost bloka s izgledom na pozadini:
$(document).ready(function () ( $("#p").click(function () ( $("#pp").toggleClass("p") ));));
Pregled dodataka i skripti za rad sa Pixel Perfect tehnikom.
Prije svega, šta je Pixel Perfect tehnika? Sve je jednostavno i možete pogoditi po imenu - ovo je tehnika rasporeda u kojoj se izgled HTML šablona tačno (piksel za piksel) podudara sa originalnim PSD izgledom.
Drugim riječima, ako "sliku" dizajniranog HTML predloška postavite na sliku originalnog PSD izgleda, tada bi se obje slike trebale podudarati. Svi elementi slika moraju biti kombinovani - tekst, slike, grafički elementi.
Prema modernim zahtjevima za izgled, Pixel Perfect je gotovo de facto standard. Stoga je bitno proučiti ovo pitanje ako imate želju i želju da imate mnogo narudžbi i kupaca.
U vrijeme pisanja, Pixel Perfect tehnika je implementirana korištenjem odgovarajućih dodataka za pretraživač ili korištenjem specijaliziranih skripti. Dva dodatka i dvije skripte će biti ukratko razmotrene u nastavku, ali u svim slučajevima koraci za testiranje Pixel Perfect-a su isti.
U početku, u Photoshopu, originalni PSD izgled se čuva kao slika u formatu
| 1 | .png |
Ovo je cijela jednostavna Pixel Perfect procedura za provjeru izgleda stranice. Ako elementi na stranici ne odgovaraju originalu, vrijednosti u datotekama stila se ispravljaju.
Pixel Perfect za FirefoxZa Firefox pretraživač postoji dodatak Pixel Perfect za provjeru izgleda stranice istog imena.
Nakon instaliranja dodatka Pixel Perfect, njegova ikona će se pojaviti na traci sa alatkama Firefox pretraživača. Vrijedi reći da je dodatak Pixel Perfect Podržava samo najnovije verzije pretraživača Firefox(na primjer, u verziji v.31 ovaj dodatak neće raditi).
Sada morate otvoriti originalni PSD izgled u Photoshopu i spremiti ga u potpunosti kao sliku u formatu
| 1 | .png |
Bitan! Prije izvoza u PNG sliku, PSD izgled mora biti doveden u originalnu veličinu! U tu svrhu, Photoshop ima rezervisanu kombinaciju prečica: Ctrl+1 - za Windows\Linux, Cmd+1 - za Mac OS X.
Čim je PNG kopija PSD izgleda pripremljena i sačuvana, otvorite HTML stranicu na osnovu ovog izgleda u prozoru pretraživača Firefox.
Pokrenite dodatak Pixel Perfect klikom na njegovu ikonu na traci sa alatkama pretraživača. Odmah će se pojaviti prozor dodatka u kojem će nas tražiti da odaberemo unaprijed pripremljenu PNG sliku (kopiju PSD izgleda):
Kliknite na dugme "Dodaj sloj", odaberite pripremljenu PNG sliku i dobijte rezultat - preklapanje dva sloja (dizajniran i originalan):
Vidimo kako tekst i dugme HTML stranice ne odgovaraju PNG originalu. Stoga otvorite karticu stilova u Firebugu (ovaj dodatak se automatski aktivira kada pokrenete dodatak Pixel Perfect) i počnite uređivati/prilagođavati:
Obratite pažnju na "Invert" način dodatka Pixel Perfect - s njim možete vrlo precizno prilagoditi elemente HTML stranice.
Gore opisani proces sastoji se od rada sa Pixel Perfect dodatkom, kao i Pixel Perfect izgleda kao takvog. Sve je krajnje jednostavno.
Ispod je video koji prikazuje proces rada sa Pixel Perfect dodatkom (video nije moj, tako da nisam odgovoran za kvalitetu u svakom smislu) - radi jasnoće rada ide:
Recenzija dodatka Pixel Perfect za Firefox pretraživač je završena.
PerfectPixel za Google ChromeDa biste se povezali na stranicu koja se testira, morate napisati osnovni skup linija:
$ (funkcija ()( $ . pixlayout ( "/path_to_picture/picture.ext" ); ));Možete dopuniti osnovni skup navođenjem parametara u skripti ( preuzeto sa službene web stranice):
$ (funkcija ()( $ . pixlayout (( src : "/img/layout.jpg" , neprozirnost : 0,8 , vrh : 50 , centar : true , clip : true , show : true ), ".wrapper" ); ) ); Brza referenca za korištenje skripte pixLayoutBrza referenca za korišćenje pixLayout skripte je data u dva paragrafa ispod ( također preuzeto sa službene web stranice):
Kretanje- dugmad: 'lijevo', 'desno', 'gore', 'dolje'
- dugmad: W , A , S , D kada je slika vidljiva
- dugmad navigacijske trake
- Uništiti ( uklonite sav html i css kod pixLayouta sa stranice) - krst u gornjem desnom uglu panela;
- Pin panel - ikona u gornjem desnom uglu panela;
- Brza referenca - upitnik u gornjem desnom uglu panela;
- Skupi parametre - strelica „gore“ na dnu panela;
- Prikaži\sakrij sliku - centralno dugme navigacionog panela ili Shift + E.
Ispod je službeni video koji pokazuje kako raditi sa skriptom pixLayout:
ZaključakU ovom kratkom pregledu upoznali smo se sa četiri alata za pixel perfect layout. Dva od njih su besplatni dodaci za pretraživač. Druge dvije su JavaScript skripte za povezivanje na HTML stranicu.
Šta ćete izabrati za svoj rad, na svakom je da odluči.
Najbolja stvar kod dodataka za preglednik je to što su besplatni, jednostavni za instalaciju i jednostavni za korištenje.
Loša strana skripte X-Precise je ta što se plaća (5$), zahtijeva vezu sa HTML stranicom koja se provjerava i ovisi o jQuery biblioteci. Nedostatak pixLayout-a može se reći i to što je potrebno dodatno “mučenje” sa povezivanjem na HTML stranicu da bi funkcionisao.
Međutim, prednost obje skripte je neosporna činjenica da se radi o cross-browser rješenju, apsolutno nezavisno od bilo kojeg pretraživača (Firefox, Chrome, Opera, Safari) ili verzije određenog pretraživača. Skripte će raditi isto u svim slučajevima.
Ekstenzija PerfectPixel za Google Chrome pomaže dizajnerima izgleda i web programerima da kreiraju izglede web stranice koji najbolje odgovaraju dizajnu koji je odobrio kupac.
Otvarate stranicu koju razvijate u Chromeu, pokrećete PerfectPixel, dodajete novi sloj - sliku zadatka i sada možete preklapati sliku na rezultat u realnom vremenu, upoređivati i ispravljati nedostatke. Kako ekstenzija funkcionira možete vidjeti gledajući ovaj video:
Podržano je više slojeva po stranici, a skup slojeva je različit za različite domene. Dodati slojevi i njihovi atributi se čuvaju ako zatvorite pretraživač i isključite računar.
Za praktičnost 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 transparentnost sloja, dati mu eksplicitne koordinate, promijeniti skalu (korisno za testiranje Retina slika).
Za one koji žele da rade sa alatom što efikasnije, podržane su prečice i režimi rada miša, čija je potpuna lista dostupna na zvaničnom sajtu projekta: www.welldonecode.com/perfectpixel/shortcuts.
Kontrolni panel se može minimizirati na desnu ivicu ekrana dvostrukim klikom na naslov. Mini način rada je koristan kada testirate responzivne dizajne na malim ekranima.
Ekstenzija se redovno ažurira, dodaju se nove funkcije i prečice, a greške su ispravljene. Pozdravljamo sve komentare i sugestije, pišite nam na e-mail: [email protected]. U bliskoj budućnosti planira se izdavanje verzija za druge pretraživače: Firefox, Safari, IE, te implementacija sinhronizacije slojeva i postavki putem oblaka. Pretplatite se na bilten kako biste bili informisani 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 putem e-maila.
Drago mi je što smo se upoznali u zajednici Chrome.RF!
13/01/2017Počeću izdaleka. Nedavno sam se pridružio HTML akademiji kao mentor. Osim što mentorstvo pomaže u organizaciji vašeg znanja, ono nevjerojatno stimulira razvoj raznih korisnih stvari, jer se u procesu pojavljuju zanimljivi zadaci čije se rješavanje može jednostavno automatizirati.
Učenici dobijaju nastavni dizajn od tri stranice, svaki sa rasporedom za tri stanja: mobilni, tablet i desktop - 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 verzija nije pokvarila. Koji je najbolji način da provjerite usklađenost sa izgledom?
Snimci ekrana, 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 šta sam pomislio, 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 se ne mogu promijeniti prilikom prebacivanja između stranica i prilikom promjene prozora pretraživača, a njihovo ručno prebacivanje svaki put će brzo postati dosadno. Štaviše, postoje medijski izrazi koji mogu savršeno mijenjati izgled umjesto nas.
Moje prvo rješenje je izgledalo ovako:
TIJELO (ponavljanje pozadine: bez ponavljanja; pozicija pozadine: 50% 0; background-image: url("img/index-mobile.png"); ) @media (min. širina: 768px) ( TIJELO (pozadina- image: url("img/index-tablet.png"); ) ) @media (min. širina: 1024px) ( TIJELO (pozadinska slika: url("img/index-desktop.png"); ) )
Ovaj kod se ubacuje u svaku stranicu. Postavlja potrebne medijske izraze, a veze do slika se mijenjaju na trenutne izglede za svaku određenu stranicu.
Izgledi se mijenjaju prilikom prebacivanja između stranica i prilikom promjene veličine prozora, to se već može koristiti i prilično je zgodno. Rasporedi leže direktno ispod oznake; ne morate stalno ići u grafički uređivač da biste ih dobili, pa čak i tako jednostavan dizajn može značajno uštedjeti vrijeme.
Ali kako se stilovi pišu, stranica se pojavljuje s vlastitim pozadinama i slikama, a rasporedi u donjem sloju postaju nevidljivi. Sta da radim?
Moje sljedeće rješenje bilo je proširenje za Chrome koje stvara proziran sloj sa rasporedom na svakoj stranici. Kada promijenite veličinu prozora, rasporedi se mijenjaju pomoću medijskih izraza, kao u prethodnom slučaju. Kao bonus, dodali smo kontrolu nad transparentnošću sloja rasporeda i mogućnost da omogućimo način miješanja razlika kako bismo olakšali pronalaženje razlika.
Ispostavilo se da je to divna stvar. Ali radi samo u Chromeu, ključne tačke za prebacivanje rasporeda i putanja do slika moraju biti postavljene u konfiguracijama samog proširenja, slike izgleda moraju biti unutar ekstenzije, a bilo je i raznih drugih ograničenja. Općenito, nije univerzalan, svaki novi projekt zahtijevat će 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 svako mogao nositi sa postavom i instalacijom, a da bi u isto vrijeme barem otprilike shvatio šta radi.
Da biste uporedili oznake sa rasporedima, potrebna su vam dva sloja: sloj sa oznakama i sloj sa rasporedima. S jedne strane, možete ručno umetnuti sloj sa rasporedom u izgled stranice, s druge strane postoji veliki rizik da ga zaboravite tamo 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, pa je bolje koristiti element kao sloj sa rasporedima:
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-tablet.png"); ) ) @media (min-width: 1024px) ( HTML ( background-image: url("img/index-desktop.png"); ) )
Kao iu prethodnom slučaju, rasporedi će ležati ispod oznake, ali sada ako je određena pozadina, oni neće biti vidljivi. Učinimo sloj za označavanje polutransparentnim dodavanjem neprozirnosti za :
/* Koristi se kao sloj rasporeda */ HTML ( background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); ) @media (min- širina: 768px) ( HTML ( background-image: url("img/index-tablet.png"); ) ) @media (min-width: 1024px) ( HTML ( background-image: url("img/index-desktop .png"); ) ) /* Učinite sloj za označavanje polutransparentnim */ BODY (prozirnost: .5; )
Ovo se takođe može nekako iskoristiti, ali ovom rješenju su nedostajale zgodne kontrole transparentnosti, pa sam napisao malu skriptu koja na stranicu dodaje panel kao što je ovaj:
Omogućava vam da kontrolišete transparentnost (u ovom slučaju, umjesto izgleda jednostavno je prugasta pozadina), može se prevlačiti po stranici i isključiti ako nije potrebno.
Odlučio sam da ne pravim proširenje pretraživača kako ne bih ograničio broj pretraživača u kojima se može koristiti.
Instalacija na kraju izgleda ovako:
Po mom mišljenju, pokazalo se da je to prilično zgodan alat, ali nešto bi se sigurno moglo poboljšati. Ako imate bilo kakvu ideju po ovom pitanju, napišite mi ih u komentarima. Također će me zanimati kako rješavate takve probleme i koje alate za to koristite.
UPD: biblioteka je prešla na npm, hvala svim učesnicima
Ako tek počinjete da savladavate računar i koristite razne softvere i potreban vam je program za pregled slika, preuzmite Pixel Perfect. Ovaj preglednik je implementiran tako jednostavno da ga čak i neiskusan korisnik može lako savladati, unatoč činjenici da programeri nisu htjeli brinuti o lokalizaciji proizvoda za korisnike koji govore ruski (i općenito su napustili svoju zamisao prije deset godina).
O interfejsuKao što je ranije spomenuto, Pixel Perfect ima prilično oskudnu funkcionalnost. Može se činiti vrlo ograničenim na one korisnike koji su navikli na gledaoce koji obavljaju više zadataka koji ne samo da mogu prikazati fotografije i slike, već ih i uređivati, ispisivati ili čak objavljivati na internetu. Stoga, ako vam treba mnogo funkcija, preporučujemo da zaobiđete ovaj softver pronalaženjem analognog, na primjer -.
Pixel Perfect vam omogućava da otvorite i pregledate slike u JPEG, PNG, GIF i BMP formatima. Međutim, program ne podržava prelazak sa jedne slike na drugu i, zbog činjenice da nema dugmeta za „okretanje“, svaka slika će se morati otvoriti zasebno. Prilikom otvaranja datoteke, preglednik na dnu ekrana prikazuje sve tehničke informacije o objektu, što je prilično zgodno. Prilikom pregleda, korisnici mogu centrirati sliku i rastegnuti je.
Karakteristike radaPixel Perfect se distribuira u prijenosnom formatu, što dodatno pojednostavljuje korisničko iskustvo. Nema potrebe da brinete o instalaciji, samo raspakujte preuzetu arhivu i pokrenite izvršni fajl. Pregledač identifikuje nebitne zahteve za hardver računara i za verziju Windows-a koja je na njemu instalirana.
Rezultati- nedostatak rusifikovanog interfejsa;
- distribuira u prenosivom formatu;
- Alati programa bazirani su na obavljanju jedne funkcije – prikazivanje grafičkih datoteka;
- demonstracija tehničkih podataka prilikom gledanja slike;
- programeri više ne podržavaju softverski proizvod.