Share
Questa parte finale dell'API di Google Maps per la serie di designer completa le cose guardando al design reattivo, alle immagini retina e a una serie di strumenti di test e debug che rendono la vita molto più semplice. Dà un giro di fischietto attraverso una vasta gamma di aree, che puoi esplorare ulteriormente nei tuoi progetti.
Home page reattiva. Sinistra - stile mobile. A destra - stile laptop / desktop / tablet. A meno che tu non stia sonnecchiando da un po 'negli ultimi anni, saprai che il design reattivo è tutto incentrato sulla modifica di un sito web e l'adattamento in base al dispositivo su cui è visualizzato.
Anche la home page di questa demo (sopra) usa il responsive design per presentare alle persone una versione modificata della mappa a seconda del dispositivo, o più specificatamente della larghezza dello schermo, che stanno utilizzando.
Il primo passo prima di fare qualsiasi altra cosa è assicurarsi che il meta tag viewport sia impostato nel capo della tua pagina.
Nota: È esattamente a te decidere quali attributi della vista utilizzi per impostare le cose. Leggi la nostra guida per maggiori dettagli.
L'approccio popolare alla gestione del design reattivo che useremo qui è quello di applicare media query all'interno del CSS. Le query multimediali sono un modo per segmentare il CSS e applicare stili diversi a seconda, ad esempio, della larghezza della vista su cui il sito web viene visualizzato.
L'elenco di codici qui sotto è piuttosto lungo, ma è utile vedere cosa sta succedendo. Per vedere questo codice in azione, dai un'occhiata alla home page. Se lo stai visualizzando su uno schermo più grande, trascina il lato del browser per renderlo più stretto. Quando la larghezza del tuo browser raggiunge inferiore a 640 px, il design dovrebbe cambiare.
La query multimediale in questo caso è il @media (larghezza minima: 641 px) codice alla riga 101 e il successivo CSS tra parentesi graffe. Questa query multimediale sta verificando la larghezza del dispositivo.
È bene usare un primo approccio mobile; questa è l'idea che lo stile predefinito è rivolto ai dispositivi mobili, e quindi le eccezioni vengono progressivamente aggiunte utilizzando le query multimediali man mano che le visualizzazioni diventano più grandi. Questo approccio aiuta i siti web a caricare più velocemente sui dispositivi mobili. Ad esempio, cose come la grande immagine di sfondo che abbiamo usato sono caricate solo per dispositivi con schermo più grande.
Quindi, nel codice sopra, la prima parte del codice (vale a dire sopra la query multimediale - @media (larghezza minima: 641 px) ) caricherà di default su ogni dispositivo. Poi il @media (larghezza minima: 641 px) la query multimediale carica gli stili all'interno delle parentesi graffe per i dispositivi la cui larghezza è superiore a 641 pixel.
Una domanda comune è:
"Dove dovrebbero essere i breakpoint nel design?"
Il punto di interruzione in questo esempio è 641 px. Questa demo utilizza solo un punto di interruzione, ma spesso ne vorresti più di uno. Questo può dipendere molto dai tuoi contenuti, e anche dalla gamma di dispositivi che hai scelto come target e dalle diffuse risoluzioni dello schermo sul mercato.
In questo esempio, l'iPhone (larghezza è pari a 640 px) visualizzerà lo stile predefinito per i dispositivi mobili, mentre l'iPad2 (la larghezza è 768) visualizzerà la versione desktop. Il nostro breakpoint scelto è appropriato per questa mappa, perché la grafica è troppo grande per il telefono. Tuttavia, altri siti web basati su testo potrebbero scoprire che è solo quando si scende a dimensioni dello schermo molto più piccole che lo stile deve essere cambiato in modo significativo, e quindi i punti di interruzione potrebbero essere inferiori.
Nota: Quando si scelgono i breakpoint è spesso più saggio prendere semplicemente in considerazione il design, osservando dove pause, piuttosto che puntare a risoluzioni specifiche del dispositivo. Le dimensioni dello schermo sono così ampie e varie, e cambiano col passare del tempo, che semplicemente non c'è modo di tenerne traccia con precisione.
A volte è appropriato presentare agli utenti versioni del contenuto completamente diverse, a seconda delle loro circostanze di visualizzazione.
Nel nostro caso, questo viene fatto usando due div tag (ad es. button_to_map_mobile e button_to_map_standard), ciascuno contenente un link diverso e un pulsante verde "visita mappa" leggermente diverso. Se si utilizza un laptop o un computer desktop, visualizzare la pagina iniziale e trascinare il lato del browser fino a quando il disegno non viene modificato nel layout mobile. Dovresti notare che il pulsante verde "Mappa di visita" cambia leggermente per includere la parola "mobile". Se fai clic su questo pulsante ora, otterrai una versione mobile della mappa.
La query multimediale viene utilizzata per alternare quali div è attualmente visibile. Cioè se dai un'occhiata al codice sopra elencato, puoi vedere che il button_to_map_standard ha il display: none; applicato ad esso quando lo stile mobile predefinito è in uso, ma quando la query multimediale rileva che lo schermo è largo oltre 641 pixel applica il blocco di visualizzazione; a button_to_map_standard. (La query sui media fa il contrario al button_to_map_mobile div).
Se stai seguendo questo tutorial creando la tua pagina web, dai un'occhiata al codice sorgente disponibile dal link nella parte superiore di questa pagina. Personalmente ho trovato più facile ottenere qualcosa lavorando inizialmente usando l'approccio "mobile first" e un breakpoint, prima di estenderlo a un design più complesso.
Vale la pena notare che la scelta tra alternativa contenuto e di risposta il contenuto è qualcosa a cui prestare attenzione quando si sviluppano siti Web per più dispositivi.
Spero che tu abbia appena dato un'occhiata alla nuova versione mobile della mappa. Torneremo su questo in un minuto. Ma prima, vale la pena dare un'occhiata a come la home page utilizza le immagini progettate per gli schermi retina.
Gli schermi Retina (e altri pixel ad alta risoluzione) hanno così tanti pixel, così vicini tra loro, che è quasi impossibile per la retina in un occhio umano distinguere i singoli pixel. Gli schermi Retina sono considerati la prossima generazione di schermi e un numero crescente di dispositivi li ha già, come ad esempio gli iPhone 4 e 5 e alcuni MacBook Pro con specifiche elevate. Tuttavia, il lato negativo è che la grafica che non è stata preparata con questi schermi in mente apparirà un po 'sfocata.
Fortunatamente ci sono alcuni modi per aggirare questo. L'approccio che scegli dipenderà dalla natura dell'immagine stessa. Questa demo utilizza due approcci; libreria retina.js e grafica SVG.
Retina.js è una libreria JavaScript leggera, che può essere scaricata gratuitamente. Devi solo salvare il file JavaScript adiacente al tuo sito web sul tuo server e aggiungere la seguente riga di codice appena prima della chiusura corpo etichetta.
Quindi si salvano due versioni di ogni immagine; due volte più grande di quanto si vedrebbe l'immagine su uno schermo standard e l'altra con le dimensioni normali. Il trucco per far funzionare questa libreria è che è necessario salvare le immagini nella stessa cartella sul server e seguire la severa convenzione di denominazione -
Quindi aggiungi la tua immagine al markup della pagina come al solito, aggiungendo semplicemente la versione a risoluzione standard -
Quando qualcuno visualizza il tuo sito web su un display retina, la presenza dello script retina.js dice al tuo sito web di verificare se è disponibile una versione ad alta risoluzione.
Sebbene retina.js abbia il limite del tempo necessario per salvare due versioni per ogni immagine, può essere molto utile per immagini di tipo fotografico o di tipo non vettoriale.
Il pulsante verde "visita mappa" nella homepage utilizza il plugin retina.js. Per vedere questo in azione, prova a visualizzare il sito su un dispositivo di retina, ad es. iPhone 4 o 5, e guarda quanto è nitido il testo sul pulsante verde. Se hai scaricato la tua copia del codice, rimuovi il plug-in retina.js e visualizza nuovamente il sito web sul dispositivo retina. Dovresti notare che la qualità del pulsante (ad esempio le linee bianche all'interno del testo) è più scarsa.
Ti consiglio di utilizzare retina.js per immagini di tipo fotografico o senza immagini chiave che non cambiano spesso, sulla tua home page o incorporate nel modello. Tuttavia, se, ad esempio, gestisci un blog con più autori, probabilmente non è realistico aspettarsi che creino due versioni per ogni immagine.
Un altro approccio alla creazione di una grafica nitida per gli schermi retina è l'uso di immagini SVG. SVG in realtà sta per Scalable Vector Graphics. Come suggerisce il nome, le immagini SVG sono adatte per immagini di tipo vettoriale (ad esempio, non per le foto!)
Man mano che la grafica vettoriale viene ingrandita, mantengono la loro nitidezza. Per vedere un esempio, dai un'occhiata alla homepage. L'icona di ingranaggi e chiavi è un'immagine SVG. La sua larghezza è impostata al 50%. Quando ridimensioni il tuo browser dovresti essere in grado di vedere che rimane sempre perfettamente nitido. Rimane inoltre perfettamente nitido se si esegue lo zoom del browser (ad esempio su un telefono).
La grafica SVG è in realtà un formato vettoriale basato su XML. Ciò significa che puoi modificarli direttamente, se lo desideri, utilizzando un editor di testo di base. Il codice sopra crea un'immagine del cerchio giallo sottostante.
Semplice demo SVG (screenshot). Puoi inserire immagini SVG nelle tue pagine web nello stesso modo in cui inseriresti un jpg o qualsiasi altra immagine.
Gli SVG sono supportati da tutti i browser moderni, inclusi quelli utilizzati su dispositivi retina come gli iPhone 4 e 5. Tuttavia, è ancora importante fornire un fallback per i browser meno recenti che non li supportano, ad esempio IE 8. Se sei usando Modernizr (vedi sotto) già per il resto del tuo sito, allora questo è un approccio ragionevole. Tuttavia, è disponibile anche un plugin JavaScript dedicato, SVGeezy, che si occuperà di questo.
Per utilizzare questo plugin, scarica lo script e memorizzalo vicino al tuo sito web sul tuo server. Quindi aggiungi la seguente riga di codice prima del tag corpo chiuso.
Analogamente al plug-in retina discusso sopra, in realtà fornirai due immagini ogni volta; il file SVG e il file jpeg o png fall-back. Questi entrambi devono essere memorizzati nello stesso posto sul tuo server. Quando il plugin SVGeezy rileva che il tuo browser non supporta i file SVG, utilizzerà la versione alternativa dell'immagine.
Se hai scaricato i file sorgente per la demo dal link nella parte superiore di questa pagina, dai un'occhiata al file SVG refresh.svg e come il tutorial4_index.html il file usa questa immagine.
Quando si tratta di creare i file SVG, l'idea di codificare manualmente un file immagine è sufficiente per far correre anche il geek più geek! Fortunatamente, è possibile salvare le immagini come file SVG da Adobe Illustrator (Fare clic su File> Salva> SVG) o il software di modifica delle immagini vettoriali open source, Inkscape. Detto questo, mi raccomando di fare alcune prove per assicurarsi che i tuoi disegni appaiano come previsto nel browser.
Ci sono anche molti siti web che offrono icone SVG gratuite da scaricare. L'icona degli ingranaggi utilizzata in questa demo proviene dalle icone di gioco. Un altro buon sito Web è Icon Finder, che elenca i formati disponibili insieme a tutti i risultati di ricerca. Icon Finder è anche abbastanza utile per capire quale tipo di immagini possono essere prodotte come file SVG.
Sebbene i file SVG funzionino solo per alcuni tipi di immagini, se sfruttati con attenzione possono fornire un modo efficace per fornire grafici nitidi a tutti i dispositivi. Prima di proseguire, vale la pena ricordare che ci sono altri modi per implementare le immagini retina non implementate in questa demo, come ad esempio l'utilizzo di una soluzione PHP lato server che utilizza i cookie e il file .htacces modificato o usando i font di icone.
Questa demo ha due versioni della mappa; una versione per laptop / desktop / tablet e una versione mobile.
Sia la mappa mobile che quella desktop utilizzano gli stessi dati (ad esempio foto) memorizzati su Flickr. La creazione di due versioni potrebbe sembrare un po 'barare. Inoltre, per la maggior parte dei siti Web non consiglierei versioni separate per dispositivi mobili e desktop a causa degli evidenti costi di manutenzione. Tuttavia, il nuovo tipo di mappa di Google che abbiamo creato è un caso in cui avere due versioni è ragionevole.
Fondamentalmente, però, non duplicheremo i dati. Anziché, entrambe le versioni della mappa attingono dallo stesso insieme di dati su Flickr. Ciò significa che il sovraccarico di avere due versioni è minimo e abbiamo la flessibilità di personalizzare l'aspetto della mappa a seconda del dispositivo.
Ho esteso l'esempio dall'ultimo tutorial. Il tutorial richiama i dati da questo nuovo account Flickr (id utente: 99915664 @ N08). (Promemoria: in questo caso, ogni Flickr ha un nome utente facile (ish) da ricordare bennett1671, e un numero ID utente, in questo caso 99915664 @ N08.) Quindi, se stai seguendo la costruzione di ciò che hai fatto nell'ultimo tutorial, devi puntare la tua mappa su questo nuovo account Flickr.
Questo nuovo account Flickr include foto per tutti i festival, inclusi gli eventi più piccoli e principali. L'account Flickr utilizzato nel tutorial precedente includeva solo le foto per i festival minori. Le foto per gli eventi principali non sono state archiviate su Flickr.
Tagging le tue foto su Flickr è la chiave per farlo funzionare. Ogni foto in Flickr è taggata per indicare se sono a evento principale o a smallevent (questi tag sono necessari per la versione laptop / desktop / tablet) e se sono un englandevent, scotlandevent, walesevent o irelandevent (questi tag sono necessari per la versione mobile).
Quando si fa clic sul pulsante arancione Eventi più piccoli sulla versione per laptop / desktop / tablet, viene effettuata la seguente chiamata all'API di Flickr. Questo chiama l'account Flickr 99915664 @ N08 e filtra i risultati per tag 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=?
Sulla versione mobile, ho raggruppato i marcatori in base al paese e colorato di conseguenza le icone. Quindi, ad esempio, quando fai clic sul contrassegno bianco dell'Inghilterra, viene effettuata la seguente chiamata all'API di Flickr. Questa chiamata API è uguale alla precedente, tranne che filtra i risultati in base al tag 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=?
Si prega di consultare il tutorial precedente per una descrizione completa di come vengono elaborati i risultati di queste chiamate API Flickr. Entrambi utilizzano il metodo flickr.photos.search dall'API di Flickr.
Tutti gli indicatori di mappa sulla versione mobile sono file SVG (vedi sopra). Pertanto, sebbene siano un po 'più semplici delle icone sulla versione per laptop / desktop / tablet, rimangono sempre nitidi se visualizzati su schermi retina, come l'iPhone 4 o 5.
Per terminare questa serie di tutorial, voglio solo evidenziare alcuni strumenti che trovo utili per lo sviluppo di mappe o qualsiasi altra cosa online. So che ci sono centinaia, forse migliaia di strumenti in giro, e quindi questo non vuole essere un elenco esaustivo con qualsiasi mezzo. Invece, è il "kit di strumenti" che uso per testare le cose, e capire perché qualcosa non è andato a pianificare.
Questi strumenti sono utili, forse essenziali, per evitare l'incubo di far funzionare un sito web perfettamente sulla propria macchina, solo per scoprire che fa qualcosa di inaspettato su un client o una macchina dei clienti.
Per accedere agli strumenti dello sviluppatore di Chrome, apri Chrome e fai clic su Tasto Menu in alto a destra e poi Utensili, poi Strumenti di sviluppo.
La scheda Elementi negli strumenti di Google Chrome Developers ti consente di fare clic su parti della tua pagina web per rivelare informazioni su come è stato reso dal browser. Questo fa un'enorme quantità di cose; abbastanza per riempire un intero tutorial da solo! Alcuni bit che uso spesso sono:-
La scheda di rete indica per quanto tempo ciascuna parte di una pagina web viene caricata. Non tutti i browser supportano tutte le funzionalità HTML e CSS. Questo può essere problematico quando vuoi sfruttare le caratteristiche più interessanti di HTML5 e CSS3, assicurandoti anche che le persone con la copia più antica di IE possano anche accedere al tuo sito web.
Ma a meno che tu non abbia una memoria straordinaria (io no!), È quasi impossibile ricordare quali browser obiettano a quali caratteristiche. Questo è dove il sito Web di caniuse è molto utile. Questo sito Web fornisce un riepilogo di quali caratteristiche HTML, CSS, SVG, ecc. Sono compatibili con le versioni di quali browser.
Inoltre, se si desidera utilizzare una nuova funzione ma i browser meno recenti non la supportano, è possibile utilizzare la libreria JavaScript di Modernizr. Come spiegano sul loro sito web:
"Sfruttare le nuove tecnologie web è divertente, finché non devi supportare i browser che restano indietro. Modernizr semplifica la scrittura di JavaScript e CSS condizionali per gestire ogni situazione, indipendentemente dal fatto che un browser supporti o meno una funzione. "
Se il browser di un utente non supporta una particolare funzionalità, Modernizr ti consente anche di specificare una funzionalità di fallback. Questo è molto simile al plugin SVGeezy descritto sopra.
Oltre a pianificare il supporto del browser e i fallback durante la creazione del tuo sito, è anche importante testarlo su diversi browser. Browserstack è un modo efficace per farlo. Ti consente di inviare un URL e quindi dare un'occhiata a come il sito funziona in diversi browser. L'unico svantaggio è che si tratta di una quota di iscrizione. Anche se questo è probabilmente più economico di avere una banca di macchine e dispositivi reali disponibili per i test. È disponibile anche una versione di prova gratuita in modo da poter dare un'occhiata e vedere cosa ne pensi.
Un altro utile strumento di test del browser quando si tratta dei misteri di far funzionare le cose in IE, è il sito Web Modern.IE. Come suggerisce il nome, è solo per IE. Ma è gratuito ed è ancora una risorsa molto utile.
Prima di dare un'occhiata al tuo sito web in Browserstack o ModernIE, è importante convalidare il tuo codice per appianare eventuali errori di sintassi.
Un validatore è un'applicazione web gratuita che controlla il tuo codice in base agli standard correnti. Gli standard sono importanti per garantire che il tuo sito web funzioni in modo prevedibile su diversi browser e dispositivi.
Ci sono anche una serie di strumenti che ti aiuteranno a controllare la sintassi JavaScript. Closure Compiler è in realtà uno strumento per comprimere il tuo JavaScript (che potresti anche voler fare se le dimensioni del tuo file sono massicce), ma è anche utile per controllare gli errori di sintassi. per esempio. fastidiosi semi-colonici che ci catturano tutti! Se copi e incolli il tuo codice e premi Compile, eventuali errori verranno evidenziati nella scheda Errori. Un altro sito utile per il controllo del codice è JSHint.
La velocità della pagina è importante perché non solo i visitatori verranno portati via se ci vorrà molto tempo per caricare il tuo sito, Google potrebbe tenerne conto al momento dell'ordine dei risultati di ricerca.
Ci sono un certo numero di strumenti che ti permetteranno di testare questo, incluso -
Questi strumenti forniscono anche suggerimenti sui miglioramenti delle prestazioni che puoi apportare. Ad esempio, un miglioramento comune che puoi fare è comprimere ulteriormente le tue immagini. Puoi utilizzare questi strumenti in relazione alla scheda Rete su Google Chrome Developers Tools (sopra) per esaminare potenziali problemi.
OK - questo è tutto! Come ho detto all'inizio di questo tutorial, sarebbe un tour di fischietto! Speriamo che dopo questa serie di tutorial sei ora in grado di creare le tue creazioni di Google Maps. Divertiti!
I crediti per la maggior parte delle immagini (ad esempio le foto del festival) possono essere trovati alla fine delle precedenti esercitazioni 1 e 3. Questi sono i nuovi bit per questo tutorial:
Accentsconagua