Share
Această parte finală a rundei seriei Google Maps API pentru designeri se ocupă de designul receptiv, imaginile retinei și o serie de instrumente de testare și depanare care fac viața mult mai ușoară. Acesta oferă un tur de oprire a fluierului printr-o întreagă gamă de zone, pe care le puteți explora mai departe în propriile proiecte.
Pagina principală responsabilă. Stânga - stil mobil. Drept - stil laptop / desktop / tabletă. Cu excepția cazului în care ați fost amizând sub un tufiș în ultimii ani, veți ști că designul receptiv vizează modificarea și adaptarea unui site web în funcție de dispozitivul pe care îl vedeți.
Pagina de pornire a acestei demonstrații (de mai sus) utilizează, de asemenea, un design receptiv pentru a prezenta oamenilor o versiune modificată a hărții în funcție de dispozitiv sau, mai exact, de lățimea ecranului pe care o utilizează.
Primul pas înainte de a face orice altceva este să vă asigurați că meta tag-ul din portul de vizualizare este setat în cap din pagina dvs..
Notă: Exact atributele de vizualizare pe care le folosiți pentru a seta lucrurile depinde de dvs. Citiți ghidul nostru pentru mai multe detalii.
Abordarea populară în abordarea designului receptiv pe care îl vom folosi aici este să aplicăm solicitări media în cadrul CSS. Întrebările media sunt o modalitate de segmentare a CSS-ului și de aplicare a diferitelor stiluri în funcție de, de exemplu, lățimea portului de vizualizare pe care site-ul Web este vizionat.
Lista de coduri de mai jos este destul de lungă, dar este util să vedem ce se întâmplă. Pentru a vedea acest cod în acțiune, aruncați o privire la pagina de pornire. Dacă o vizualizați pe un ecran mai mare, trageți partea laterală a browser-ului pentru ao face mai restrânsă. Când lățimea browserului dvs. ajunge sub 640 de pixeli, designul ar trebui să se modifice.
Întrebarea media în acest caz este @media (min-width: 641px) codul de la linia 101 și CSS ulterior în parantezele curbate. Această interogare media verifică lățimea dispozitivului.
Este bine să utilizați o primă abordare mobilă; aceasta este ideea că stilul implicit este destinat dispozitivelor mobile și apoi excepțiile sunt adăugate progresiv folosind interogările media, deoarece porturile de vizualizare devin mai mari. Această abordare ajută site-urile să se încarce mai repede pe dispozitivele mobile. De exemplu, lucruri precum imaginea de fundal pe care am utilizat-o sunt încărcate numai pentru dispozitivele de ecran mai mari.
Deci, în codul de mai sus, prima parte a codului (adică deasupra interogării mass-media - @media (min-width: 641px) ) se va încărca în mod prestabilit pe fiecare dispozitiv. Apoi @media (min-width: 641px) interogarea media încarcă stilurile din parantezele curbate pentru dispozitive a căror lățime este de peste 641 de pixeli lățime.
O întrebare obișnuită este:
"Unde ar trebui să fie punctele de intersecție în design?"
Punctul de întrerupere din acest exemplu este de 641 de pixeli. Acest demo utilizează doar un singur punct de întrerupere, dar de multe ori doriți mai mult de unul. Acest lucru depinde foarte mult de conținutul dvs. și de gama de dispozitive pe care le vizați și de rezoluțiile populare ale ecranului de pe piață.
În acest exemplu, iPhone (latimea este de 640 pixeli) va afișa stilul mobil implicit, în timp ce iPad2 (lățimea este 768) va afișa versiunea desktop. Punctul de întrerupere ales este potrivit pentru această hartă, deoarece grafica este prea mare pentru telefon. Cu toate acestea, alte site-uri web bazate pe text pot descoperi că numai atunci când ajungeți la dimensiuni mult mai mici ale ecranului, stilul trebuie schimbat în mod semnificativ, astfel că punctele de întrerupere pot fi mai mici.
Notă: Atunci când alegeți puncte de întrerupere este adesea înțelept să luați în considerare pur și simplu designul, observând unde este pauze, mai degrabă decât să vizeze rezoluții specifice ale dispozitivelor. Dimensiunile ecranului sunt atât de largi și variate, plus se schimbă odată cu trecerea timpului, încât pur și simplu nu există nicio modalitate de urmărire precisă a acestora.
Este uneori potrivit să prezinți utilizatorilor versiuni diferite de conținut, în funcție de circumstanțele lor de vizionare.
În cazul nostru, acest lucru se face folosind două div (de exemplu,. button_to_map_mobile și button_to_map_standard), fiecare conținând o legătură diferită și un buton verde "vizitați hartă" ușor diferit. Dacă vă aflați pe un laptop sau pe un computer desktop, vizualizați pagina de pornire și trageți partea laterală a browserului dvs. până când proiectul se modifică la aspectul mobil. Ar trebui să observați că butonul verde "hartă vizită" se modifică ușor pentru a include cuvântul "mobil". Dacă faceți clic pe acest buton acum, veți primi o versiune mobilă a hărții.
Interogarea mass-media este utilizată pentru a alterna ce div este în prezent vizibilă. I.E. dacă aruncați o privire la lista de coduri de mai sus, puteți vedea că button_to_map_standard are display: none; se aplică atunci când se utilizează stilul mobil implicit, dar atunci când interogarea media detectează ecranul are o lățime de peste 641 pixeli, aplică display: block; la button_to_map_standard. (Interogarea media face inversa la button_to_map_mobile div).
Dacă urmăriți acest tutorial făcându-vă propria pagină web, uitați-vă bine la codul sursă disponibil de la link-ul din partea de sus a acestei pagini. Personal mi-a fost mai ușor să obțin ceva de lucru inițial folosind abordarea "mobilă în primul rând" și un punct de întrerupere, înainte de extinderea acestuia la un design mai complex.
Merită menționat faptul că alegerea între alternativă conținut și sensibil conținutul este un lucru pe care trebuie să-l acordați cu adevărat, atunci când dezvoltați site-uri web pentru mai multe dispozitive.
Sperăm că tocmai ați aruncat o privire la noua versiune mobilă a hărții. Vom reveni la asta în doar un minut. Dar, mai întâi, merită să aruncăm o privire asupra modului în care pagina de pornire utilizează imaginile proiectate pentru ecranele retinei.
Ecranele retinei (și alte densități de înaltă densitate) au atât de mulți pixeli, atât de aproape împreună, încât este aproape imposibil ca retina într-un ochi uman să distingă pixelii individuali. Ecranele retinei sunt considerate a fi următoarea generație de ecrane, iar un număr tot mai mare de dispozitive le au deja, cum ar fi iPhone 4 și 5 și unii specialiști de la MacBook. Cu toate acestea, dezavantajul este că grafica care nu este pregătită cu aceste ecrane în minte va părea de fapt puțin cam neclară.
Din fericire, există câteva moduri în jurul acestui lucru. Abordarea pe care o alegeți depinde de natura imaginii în sine. Această demonstrație utilizează două abordări; retina.js și grafice SVG.
Retina.js este o bibliotecă JavaScript ușoară, care este gratuită pentru descărcare. Trebuie doar să salvați fișierul JavaScript adiacent site-ului dvs. de pe serverul dvs. și adăugați următoarea linie de cod chiar înainte de închidere corp etichetă.
Apoi salvați două versiuni ale fiecărei imagini; o dimensiune de două ori mai mare decât cea pe care o vizualizați la un ecran standard și cealaltă la dimensiunea normală. Trucul pentru obținerea acestei biblioteci este că trebuie să salvați imaginile în același folder de pe serverul dvs. și să urmați convenția strictă de numire -
Apoi, adăugați imaginea la marcajul paginii ca de obicei, adăugând doar versiunea standard de rezoluție -
Când cineva vizualizează site-ul dvs. pe un afișaj cu retină, prezența scriptului retina.js indică site-ul dvs. web pentru a verifica dacă există o versiune de înaltă rezoluție disponibilă.
Deși retina.js are limitarea timpului necesar pentru salvarea a două versiuni pentru fiecare imagine, poate fi foarte util pentru imaginile de tip fotografic sau de tip vectorial.
Ecranul "vizitați harta" din pagina de pornire utilizează pluginul retina.js. Pentru a vedea acest lucru în acțiune, încercați să vizualizați site-ul pe un dispozitiv cu retină, de ex. iPhone 4 sau 5, și uita-te la cât de clare este textul pe butonul verde. Dacă ați descărcat propria copie a codului, eliminați pluginul retina.js și vizualizați din nou site-ul de pe dispozitivul retinei. Ar trebui să observați că calitatea butonului (de exemplu liniile albe din text) este mai săracă.
Aș recomanda să folosiți retina.js pentru imagini cheie de tip fotografic sau de tip non-vector care nu se schimbă frecvent, pe pagina dvs. de pornire sau încorporate în șablonul dvs. Cu toate acestea, dacă, de exemplu, aveți un blog cu mai mulți autori, este probabil nerealist să vă așteptați să creeze două versiuni pentru fiecare imagine.
O altă abordare a creării unei grafice clare pentru ecranele retinei este folosirea imaginilor SVG. SVG reprezintă, de fapt, o imagine grafică scalabilă. După cum sugerează și numele acestora, imaginile SVG sunt potrivite pentru imagini de tip vector (adică nu imagini!)
Deoarece grafica vectorială este mărită, ei își păstrează claritatea. Pentru a vedea un exemplu, aruncați o privire la pagina de pornire. Pictograma roată și piuliță este o imagine SVG. Lățimea sa este stabilită la 50%. Pe măsură ce redimensionați browserul dvs., ar trebui să puteți vedea că acesta rămâne întotdeauna perfect clar. De asemenea, rămâne perfect clar dacă măriți browserul (de exemplu, pe telefon).
Graficele SVG sunt de fapt un format vectorial bazat pe XML. Aceasta înseamnă că puteți să le editați direct, dacă doriți, utilizând un editor de text de bază. Codul de mai sus creează o imagine a cercului galben de mai jos.
Demo simplă SVG (screenshot). Puteți introduce imagini SVG în paginile dvs. web în același mod în care inserați o imagine jpg sau orice altă imagine.
SVG sunt acceptate de toate browserele moderne, inclusiv cele utilizate pe dispozitivele retinei precum iPhone 4 și 5. Cu toate acestea, este important să oferiți o revizuire pentru browserele mai vechi care nu le suportă, de exemplu IE 8. Dacă sunteți folosind Modernizr (vezi mai jos) deja pentru restul site-ului dvs., atunci aceasta este o abordare sensibilă. Cu toate acestea, există și un plugin JavaScript dedicat, SVGeezy, care se va ocupa de acest lucru.
Pentru a utiliza acest plugin, descărcați scriptul și păstrați-l lângă site-ul dvs. pe server. Apoi adăugați următoarea linie de cod înaintea etichetei pentru corpul închis.
Similar cu pluginul retinei discutat mai sus, veți oferi de fiecare dată două imagini; fișierul SVG și fișierul jpeg sau png fallback. Ambele trebuie să fie stocate în același loc pe serverul dvs. Când pluginul SVGeezy observă că browserul dvs. nu acceptă fișiere SVG, va folosi versiunea alternativă a imaginii.
Dacă ați descărcat fișierele sursă pentru demo de la link-ul din partea de sus a acestei pagini, aruncați o privire la fișierul SVG refresh.svg și cum tutorial4_index.html fișierul folosește această imagine.
Când vine vorba de crearea fișierelor SVG, ideea de a codifica manual un fișier de imagine este suficientă pentru a face chiar și geekest geek rula o mila! Din fericire, puteți salva imagini ca fișiere SVG din Adobe Illustrator (Faceți clic pe Fișier> Salvare> SVG) sau software-ul de editare a imaginilor vectoriale open source, Inkscape. Spunând asta, aș recomanda să faceți câteva runde de încercare pentru a vă asigura că desenele dvs. apar așa cum era de așteptat în browser.
Există, de asemenea, o mulțime de site-uri în jurul valorii de care oferă gratuit iconițe SVG pentru a descărca. Icoanele folosite în acest demo sunt de la Joc Icoane. Un alt site bun este Icon Finder, care afișează formatele disponibile alături de toate rezultatele căutării. Icon Finder este, de asemenea, destul de util pentru a obține o senzație pentru ce fel de imagini pot fi produse ca fișiere SVG.
Deși fișierele SVG vor funcționa numai pentru anumite tipuri de imagini, dacă sunt exploatate cu atenție, acestea pot oferi o modalitate puternică de a furniza grafică clare pentru toate dispozitivele. Înainte de a continua, merită menționat faptul că există și alte modalități de implementare a imaginilor retinei care nu sunt implementate în acest demo, cum ar fi utilizarea unei soluții PHP bazate pe server care utilizează fișiere cookie și fișier modificat .htacces sau folosind fonturi pictograme.
Această demonstrație are două versiuni ale hărții; o versiune laptop / desktop / tabletă și o versiune mobilă.
Atât harta mobilă, cât și cea desktop utilizează aceleași date (adică fotografiile) stocate pe Flickr. Crearea a două versiuni poate părea a fi inselat ușor. Și, pentru marea majoritate a site-urilor web, nu aș recomanda versiuni separate pentru dispozitive mobile și desktop datorită cheltuielilor de întreținere evidente. Cu toate acestea, noul tip de hartă Google pe care l-am construit este un caz când două versiuni sunt sensibile.
Cu toate acestea, nu avem de gând să duplicăm datele. In schimb, ambele versiuni ale hărții trag din același set de date pe Flickr. Acest lucru înseamnă că cheltuielile a două versiuni sunt minime și avem flexibilitatea de a personaliza aspectul hărții în funcție de dispozitiv.
Am extins exemplul din ultimul tutorial. Tutorialul extrage date din acest nou cont Flickr (id utilizator: 99915664 @ N08). (Memento - fiecare Flickr are un username ușor de reținut, în acest caz bennett1671, și un număr de identificare al utilizatorului, în acest caz 99915664 @ N08.) Deci, dacă urmăriți în funcție de ceea ce ați făcut în ultimul tutorial, trebuie să indicați harta pe acest nou cont Flickr.
Acest nou cont Flickr include fotografii pentru toate festivalurile, incluzând atât evenimentele mai mici cât și cele principale. Contul Flickr folosit în tutorialul anterior a inclus fotografii pentru festivalurile mai mici. Fotografiile pentru evenimentele principale nu au fost stocate pe Flickr.
Etichetarea fotografiilor în Flickr este cheia pentru a face acest lucru să funcționeze. Fiecare fotografie din Flickr este etichetată pentru a indica dacă este o fotografie Evenimentul principal sau a smallevent (aceste etichete sunt necesare pentru versiunea pentru laptop / desktop / tablet) și dacă acestea sunt englandevent, scotlandevent, walesevent sau irelandevent (aceste etichete sunt necesare pentru versiunea mobilă).
Când se face clic pe butonul portocaliu Evenimente mai mici pe versiunea laptop / desktop / tablet, se efectuează următorul apel API Flickr. Aceasta apelează contul 99915664 @ N08 Flickr și filtrează rezultatele după etichetă smallevent.
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=smallevent&has_geo=1&extras=geo&format=json&jsoncallback=?
Pe versiunea mobilă, am grupat marcajele în funcție de țară și am colorat icoanele în consecință. De exemplu, când faceți clic pe marcatorul alb al Angliei, se efectuează următorul apel API Flickr. Acest apel API este același cu cel precedent, cu excepția faptului că filtrează rezultatele bazate pe etichetă englandevent.
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=englandevent&has_geo=1&extras=geo&format=json&json&jsoncallback=?
Consultați tutorialul anterior pentru o descriere completă a modului în care sunt procesate rezultatele acestor apeluri API Flickr. Ambele utilizează metoda flickr.photos.search din API-ul Flickr.
Toate marcatorii de hartă din versiunea mobilă sunt fișiere SVG (vedeți mai sus). Prin urmare, deși sunt puțin mai simple decât pictogramele de pe versiunea laptop / desktop / tablet, acestea rămân mereu clare atunci când sunt vizualizate pe ecranele retinei, cum ar fi iPhone 4 sau 5.
Pentru a încheia această serie de tutori, vreau doar să evidențiez câteva instrumente pe care le consider utile atunci când dezvoltăm hărți sau orice altceva online pentru asta. Știu că există sute, poate mii, de unelte în jur, deci nu este o listă exhaustivă prin orice mijloace. În schimb, este "setul de instrumente" pe care îl folosesc pentru a testa lucrurile și pentru a afla ce nu a planificat ceva.
Aceste instrumente sunt utile, poate esențiale, pentru a evita coșmarul obținerii unui site web care să funcționeze perfect pe mașina proprie, doar pentru a descoperi că face ceva neașteptat pe un client sau pe o mașină a clienților.
Pentru a accesa instrumentele dezvoltatorului Chrome, deschideți Chrome și dați clic pe Butonul Meniu în partea dreaptă sus și apoi Unelte, atunci Instrumente de dezvoltare.
Fila Elemente din instrumentele Google Chrome pentru dezvoltatori vă permite să faceți clic pe anumite părți ale paginii dvs. web pentru a dezvălui informații despre modul în care a fost redat de browser. Aceasta face o cantitate enormă de lucruri; suficient pentru a umple un tutorial întreg pe cont propriu! Câteva biți pe care le folosesc de multe ori sunt:-
Fișa Rețea vă spune cât timp fiecare parte a unei pagini Web este încărcată. Nu toate browserele suportă toate funcțiile HTML și CSS. Acest lucru poate fi problematic atunci când doriți să profitați de caracteristicile mai interesante ale HTML5 și CSS3, asigurându-vă, de asemenea, că persoanele care au cea mai veche copie a IE pot accesa și site-ul dvs..
Dar dacă nu aveți o memorie extraordinară (nu am!), Este aproape imposibil să vă amintiți ce browsere fac obiectul căror caracteristici. Aici este locul unde site-ul caniuse vine foarte util. Acest site oferă un rezumat a căror caracteristică HTML, CSS, SVG etc. este compatibilă cu versiunile a căror browsere.
De asemenea, dacă doriți să utilizați o funcție nouă, dar browserele mai vechi nu o acceptă, puteți utiliza biblioteca JavaScript Modernizr. După cum explică pe site-ul lor:
"Profitând de noile tehnologii de web cool este o distracție extraordinară, până când trebuie să sprijiniți browserele care rămân în urmă. Modernizr vă face ușor să scrieți JavaScript și CSS condițional pentru a gestiona fiecare situație, indiferent dacă un browser acceptă o caracteristică sau nu. "
Dacă browserul unui utilizator nu acceptă o caracteristică particulară, Modernizr vă permite să specificați și o caracteristică de recuperare. Acesta este foarte asemănător pluginului SVGeezy descris mai sus.
În plus față de planificarea suportului browserului și a căderii în timp ce construiți site-ul dvs., este, de asemenea, important să îl testați pe diferite browsere. Browserstack-ul este o modalitate eficientă de a face acest lucru. Acesta vă permite să trimiteți o adresă URL și apoi să aruncați o privire asupra modului în care site-ul funcționează în diferite browsere. Singurul dezavantaj este că implică o taxă de abonament. Deși acest lucru este cu siguranță mai ieftin decât având o bancă de mașini și dispozitive reale disponibile pentru testare. O încercare gratuită este de asemenea disponibilă, astfel încât să puteți arunca o privire și să vedeți ce credeți.
Un alt instrument util de testare a browserului atunci când vine vorba de misterele de a obține lucruri care lucrează în IE, este site-ul Modern.IE. După cum sugerează și numele, este numai pentru IE. Dar este gratuit și este încă o resursă foarte utilă.
Înainte de a examina site-ul dvs. în Browserstack sau ModernIEIE, este important să vă validați codul pentru a elimina orice erori de sintaxă.
Un validator este o aplicație web gratuită care vă verifică codul în raport cu standardele actuale. Standardele sunt importante pentru a asigura funcționarea site-ului dvs. într-un mod previzibil în diferite browsere și dispozitive.
Există, de asemenea, un număr de instrumente care vă vor ajuta să vă verificați sintaxa JavaScript. Closure Compiler este de fapt un instrument de comprimare a JavaScript-ului dvs. (pe care, de asemenea, doriți să-l faceți în cazul în care dimensiunea fișierului este masivă), dar este utilă și pentru verificarea erorilor de sintaxă. de exemplu. plictisitoare lipsesc semi-colonii care ne prind pe toți! Dacă copiați și inserați în codul dvs. și apăsați Compilați, erorile vor fi evidențiate sub fila Erori. Un alt site util pentru verificarea codului este JSHint.
Viteza paginii este importantă deoarece nu numai că vizitatorii vor fi eliminați dacă va dura mult timp pentru a încărca site-ul dvs. Google poate lua în considerare acest lucru atunci când comandă rezultatele căutării.
Există o serie de instrumente care vă vor permite să testați acest lucru, inclusiv -
Aceste instrumente vin, de asemenea, cu sugestii de îmbunătățire a performanțelor pe care le puteți face. De exemplu, o îmbunătățire comună pe care o puteți face este să comprimați imaginile în continuare. Puteți utiliza aceste instrumente în legătură cu fila Rețea din Instrumentele dezvoltatorilor Google Chrome (de mai sus) pentru a investiga eventualele probleme.
OK - asta e! După cum am spus la începutul acestui tutorial, ar fi un tur de oprire a fluierului! Sperăm că după această serie de tutoriale sunteți acum echipat pentru a vă crea propriile creații Google hărți. A se distra!
Creditele pentru majoritatea imaginilor (de ex. Fotografiile festivalului) pot fi găsite la sfârșitul tutorialelor anterioare 1 și 3. Acestea sunt noii biți pentru acest tutorial:
Accentsconagua