Share
Cette dernière partie de la série Google Maps API For Designers est complétée par un design réactif, des images de la rétine et une gamme d'outils de test et de débogage qui simplifient grandement la vie. Il propose un tour de sifflet à travers toute une série de domaines que vous pourrez explorer davantage dans le cadre de vos propres projets..
Page d'accueil responsive. Gauche - style mobile. Droite - style ordinateur portable / bureau / tablette. Sauf si vous avez somnolé sous un buisson ces dernières années, vous saurez que la conception réactive consiste à modifier et à adapter un site Web en fonction du périphérique sur lequel il est visualisé..
La page d’accueil de cette démo (ci-dessus) utilise également responsive design pour présenter aux personnes une version modifiée de la carte en fonction de l’appareil, ou plus précisément de la largeur de l’écran qu’elles utilisent..
Avant de faire quoi que ce soit, la première étape consiste à vérifier que la balise méta viewport est définie dans le tête de votre page.
Remarque: C’est à vous de décider des attributs de la fenêtre de visualisation que vous utilisez pour configurer les éléments. Lisez notre guide pour plus de détails.
L’approche populaire pour traiter avec le design réactif que nous allons utiliser ici est d’appliquer questions des médias au sein de la CSS. Les requêtes multimédia permettent de segmenter le code CSS et d'appliquer différents styles en fonction, par exemple, de la largeur de la fenêtre d'affichage du site Web..
La liste de codes ci-dessous est assez longue, mais il est utile de voir ce qui se passe. Pour voir ce code en action, jetez un coup d'œil à la page d'accueil. Si vous le visualisez sur un écran plus grand, faites glisser le côté du navigateur pour le rendre plus étroit. Lorsque la largeur de votre navigateur atteint moins de 640 pixels, la conception devrait changer.
La requête du média dans ce cas est la @media (largeur minimale: 641px) code à la ligne 101 et les CSS subséquents entre accolades. Cette requête de média vérifie la largeur du périphérique.
C'est bien d'utiliser une première approche mobile; C'est l'idée que le style par défaut est destiné aux appareils mobiles, puis que des exceptions sont progressivement ajoutées à l'aide de requêtes multimédia à mesure que les fenêtres deviennent plus grandes. Cette approche permet aux sites Web de se charger plus rapidement sur les appareils mobiles. Par exemple, des éléments tels que la grande image d'arrière-plan que nous avons utilisée ne sont chargés que pour les appareils à grand écran.
Donc, dans le code ci-dessus, la première partie du code (c'est-à-dire au-dessus de la requête multimédia) - @media (largeur minimale: 641px) ) sera chargé par défaut sur chaque appareil. Puis le @media (largeur minimale: 641px) La requête multimédia charge les styles entre accolades pour les périphériques dont la largeur est supérieure à 641 pixels.
Une question commune est:
“Où devraient être les points de rupture dans la conception?”
Le point d'arrêt dans cet exemple est 641px. Cette démo utilise un seul point d'arrêt, mais vous en voudrez souvent plus d'un. Cela peut dépendre beaucoup de votre contenu, mais aussi de la gamme d'appareils que vous ciblez et des résolutions d'écran populaires sur le marché..
Dans cet exemple, l'iPhone (largeur 640px) affichera le style mobile par défaut, tandis que l'iPad2 (largeur 768) affichera la version de bureau. Le point d'arrêt choisi est approprié pour cette carte, car les graphiques sont trop volumineux pour le téléphone. Cependant, d'autres sites Web davantage basés sur du texte peuvent constater que le style doit être modifié de manière significative et que, par conséquent, les points d'arrêt peuvent être plus bas..
Remarque: Lors du choix des points de rupture, il est souvent plus sage de simplement considérer la conception, en observant où elle se trouve. pauses, plutôt que de viser des résolutions de périphérique spécifiques. Les tailles d'écran sont tellement larges et variées, et elles changent avec le temps, il n'y a tout simplement pas moyen de les garder avec précision.
Il est parfois approprié de présenter aux utilisateurs des versions de contenu entièrement différentes, en fonction des conditions d'affichage..
Dans notre cas, cela se fait en utilisant deux div balises (c'est-à-dire. button_to_map_mobile et button_to_map_standard), chacun contenant un lien différent et un bouton vert «Carte de visite» légèrement différent. Si vous êtes sur un ordinateur portable ou de bureau, affichez la page d'accueil et faites glisser le côté de votre navigateur jusqu'à ce que la conception change pour la présentation mobile. Vous remarquerez que le bouton vert "Carte de visite" change légèrement pour inclure le mot "mobile". Si vous cliquez maintenant sur ce bouton, vous obtiendrez une version mobile de la carte..
La requête du média est utilisée pour alterner laquelle div est actuellement visible. C'est à dire. Si vous regardez la liste de codes ci-dessus, vous pouvez voir que le button_to_map_standard a la affichage: aucun; appliqué lorsque le style mobile par défaut est utilisé, mais lorsque la requête multimédia détecte que l’écran a une largeur supérieure à 641 pixels, il applique le paramètre bloc de visualisation; to button_to_map_standard. (La requête de média fait l'inverse de la button_to_map_mobile div).
Si vous suivez ce didacticiel pour créer votre propre page Web, examinez de près le code source disponible à partir du lien en haut de cette page. J'ai personnellement trouvé plus facile de faire fonctionner quelque chose au départ en utilisant l'approche 'mobile first' et un point d'arrêt, avant de l'étendre à une conception plus complexe..
Il convient de noter que le choix entre alternative contenu et sensible le contenu est un élément à prendre en compte lors du développement de sites Web pour plusieurs appareils.
J'espère que vous venez de jeter un coup d'œil à la nouvelle version mobile de la carte. Nous y reviendrons dans une minute. Mais d’abord, il convient de regarder comment la page d’accueil utilise des images conçues pour les écrans de rétine..
Les écrans de rétine (et d’autres densités hi-pixel) ont tellement de pixels, si proches les uns des autres, qu’il est presque impossible pour la rétine d’un œil humain de distinguer les pixels individuels. Les écrans Retina sont considérés comme la prochaine génération d’écrans, et un nombre croissant d’appareils en sont déjà dotés, tels que les iPhones 4 et 5 et certains MacBook Pro hautes performances. Cependant, l’inconvénient est que les graphiques qui ne sont pas préparés avec ces écrans auront en fait un aspect un peu flou..
Heureusement, il existe plusieurs façons de contourner ce problème. L’approche choisie dépendra de la nature de l’image elle-même. Cette démo utilise deux approches; bibliothèque retina.js et graphiques SVG.
Retina.js est une bibliothèque JavaScript légère, téléchargeable gratuitement. Il vous suffit de sauvegarder le fichier JavaScript adjacent à votre site Web sur votre serveur et d’ajouter la ligne de code suivante juste avant la fermeture. corps étiquette.
Vous enregistrez ensuite deux versions de chaque image. une fois la taille de l'image affichée sur un écran standard et l'autre à la taille normale. L'astuce pour faire fonctionner cette bibliothèque est que vous devez enregistrer vos images dans le même dossier sur votre serveur et respecter la convention de dénomination stricte. -
Vous ajoutez ensuite votre image à votre balise de page comme d'habitude, en ajoutant simplement la version de résolution standard -
Lorsqu'une personne visualise votre site Web sur un affichage de la rétine, la présence du script retina.js indique à votre site Web de vérifier s'il existe une version haute résolution disponible..
Bien que retina.js limite le temps nécessaire pour enregistrer deux versions de chaque image, il peut s'avérer très utile pour les images de type photographique ou non vectoriel..
Le bouton vert "carte de visite" sur la page d'accueil utilise le plugin retina.js. Pour voir cela en action, essayez d’afficher le site sur un périphérique Retina, par exemple. iPhone 4 ou 5 et observez la netteté du texte sur le bouton vert. Si vous avez téléchargé votre propre copie du code, supprimez le plug-in retina.js et visualisez à nouveau le site Web sur le périphérique retina. Vous remarquerez que la qualité du bouton (les lignes blanches dans le texte, par exemple) est moins bonne..
Je vous recommande d'utiliser retina.js pour les images clés de type photographique ou non vectoriel qui ne changent pas souvent, sur votre page d'accueil ou intégrées à votre modèle. Toutefois, si, par exemple, vous utilisez un blog avec plusieurs auteurs, il est probablement irréaliste de s’attendre à ce qu’ils créent deux versions pour chaque image..
Une autre approche pour créer des graphiques nets pour les écrans de la rétine consiste à utiliser des images SVG. SVG signifie en réalité Scalable Vector Graphics. Comme leur nom l'indique, les images SVG conviennent aux images de type vectoriel (c'est-à-dire pas aux photos!)
Lorsque les graphiques vectoriels sont agrandis, ils conservent leur netteté. Pour voir un exemple, jetez un coup d'œil à la page d'accueil. L'icône engrenages et clé est un graphique SVG. Sa largeur est fixée à 50%. En redimensionnant votre navigateur, vous devriez pouvoir constater qu'il reste toujours parfaitement net. Il reste également parfaitement net si vous zoomez sur votre navigateur (par exemple, sur un téléphone)..
Les graphiques SVG sont en fait un format vectoriel basé sur XML. Cela signifie que vous pouvez les modifier directement, si vous le souhaitez, à l'aide d'un éditeur de texte de base. Le code ci-dessus crée une image du cercle jaune ci-dessous.
Démo SVG simple (capture d'écran). Vous pouvez insérer des images SVG dans vos pages Web de la même manière que vous insériez un jpg ou toute autre image..
Tous les navigateurs modernes, y compris ceux utilisés sur des appareils rétiniens tels que les iPhones 4 et 5, prennent en charge le format SVG. Il est toutefois important de prévoir un système de secours pour les anciens navigateurs qui ne les prennent pas en charge, par exemple IE 8. Si vous êtes Si vous utilisez Modernizr (voir ci-dessous) déjà pour le reste de votre site, il s'agit d'une approche judicieuse. Cependant, il existe également un plugin JavaScript dédié, SVGeezy, qui traitera de cette.
Pour utiliser ce plugin, téléchargez le script et stockez-le à proximité de votre site Web sur votre serveur. Puis ajoutez la ligne de code suivante avant la balise close body.
De la même manière que le plugin Retina mentionné ci-dessus, vous allez réellement fournir deux images à chaque fois. le fichier SVG et le fichier jpeg ou png de secours. Ces deux éléments doivent être stockés au même endroit sur votre serveur. Lorsque le plug-in SVGeezy constate que votre navigateur ne prend pas en charge les fichiers SVG, il utilise la version alternative de l'image..
Si vous avez téléchargé les fichiers source de la démo à partir du lien en haut de cette page, consultez le fichier SVG. refresh.svg et comment le tutorial4_index.html le fichier utilise cette image.
Lorsqu'il s'agit de créer des fichiers SVG, l'idée de coder manuellement un fichier image suffit à faire courir même le geek le plus geek! Heureusement, vous pouvez enregistrer des images au format SVG à partir d’Adobe Illustrator (Cliquez sur Fichier> Enregistrer> SVG) ou le logiciel d’édition d’images vectorielles open source, Inkscape. Cela dit, je vous conseillerais de faire quelques essais pour vous assurer que vos conceptions apparaissent comme prévu dans le navigateur..
Il existe également de nombreux sites Web proposant des icônes SVG gratuites à télécharger. L'icône engrenages utilisée dans cette démo provient de Game Icons. Icon Finder est un autre bon site, qui répertorie les formats disponibles avec tous les résultats de recherche. Icon Finder est également très utile pour avoir une idée du type d’images pouvant être produites en tant que fichiers SVG..
Bien que les fichiers SVG ne fonctionnent que pour certains types d’images, s’ils sont exploités avec prudence, ils constituent un moyen puissant de fournir des graphiques clairs et précis à tous les périphériques. Avant de poursuivre, il convient de mentionner qu'il existe d'autres méthodes pour implémenter des images Retina non implémentées dans cette démonstration, telles que l'utilisation d'une solution PHP côté serveur qui utilise des cookies et un fichier .htacces modifié, ou l'utilisation de polices de caractères.
Cette démo a deux versions de la carte; une version pour ordinateur portable / bureau / tablette et une version mobile.
Les cartes mobiles et de bureau utilisent les mêmes données (c'est-à-dire des photos) stockées sur Flickr.. Créer deux versions peut sembler tricher légèrement. Et, pour la grande majorité des sites Web, je ne recommanderais pas des versions séparées pour les ordinateurs de bureau et mobiles en raison des coûts de maintenance évidents. Cependant, le nouveau type de carte Google que nous avons créé est un cas judicieux..
Surtout, nous n'allons pas dupliquer les données. Au lieu, les deux versions de la carte sont issues du même ensemble de données sur Flickr. Cela signifie que la surcharge de deux versions est minimale et que nous avons la possibilité de personnaliser l'apparence de la carte en fonction du périphérique..
J'ai prolongé l'exemple du dernier tutoriel. Le tutoriel tire les données de ce nouveau compte Flickr (identifiant utilisateur: 99915664 @ N08). (Rappel: chaque Flickr a un nom d’utilisateur facile à mémoriser, dans ce cas, bennett1671, et un numéro d’identifiant, dans ce cas 99915664 @ N08.) Donc, si vous suivez en vous basant sur ce que vous avez fait dans le dernier tutoriel, vous devez pointer votre carte sur ce nouveau compte Flickr..
Ce nouveau compte Flickr comprend des photos de tous les festivals, y compris les plus petits et les principaux événements. Le compte Flickr utilisé dans le précédent tutoriel n'incluait que des photos destinées aux plus petits festivals. Les photos des principaux événements n'ont pas été stockées sur Flickr.
Le marquage de vos photos sur Flickr est la clé pour que cela fonctionne. Chaque photo de Flickr est étiquetée pour indiquer si elle est une événement principal ou un Smallevent (ces balises sont nécessaires pour la version pour ordinateur portable / bureau / tablette) et s’il s’agit d’une angleterreevent, scotlandevent, walesevent ou irelandevent (ces tags sont nécessaires pour la version mobile).
Lorsque le bouton orange Smaller Events est cliqué sur la version pour ordinateur portable / ordinateur de bureau / tablette, l'appel d'API Flickr suivant est effectué. Ceci appelle le compte Flickr 99915664 @ N08 et filtre les résultats en fonction du 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=jo8?
Sur la version mobile, j'ai classé les marqueurs par pays et coloré les icônes en conséquence. Ainsi, par exemple, lorsque vous cliquez sur le marqueur blanc de l'Angleterre, l'appel d'API Flickr suivant est effectué. Cet appel d'API est identique au précédent, à la différence qu'il filtre les résultats en fonction de la balise. angleterreevent.
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=englandevent&has_geo=1&extras=ge?
Veuillez vous reporter au didacticiel précédent pour une description complète du traitement des résultats de ces appels d'API Flickr. Ils utilisent tous les deux la méthode flickr.photos.search de l'API Flickr.
Tous les marqueurs de carte de la version mobile sont des fichiers SVG (voir ci-dessus). Par conséquent, bien qu'elles soient un peu plus simples que les icônes de la version pour ordinateur portable / ordinateur de bureau / tablette, elles restent toujours nettes lorsqu'elles sont affichées sur des écrans de la rétine, tels que l'iPhone 4 ou 5..
Pour terminer cette série de didacticiels, je voudrais simplement souligner quelques outils que je trouve utiles lors de l’élaboration de cartes ou de tout autre outil en ligne. Je sais qu'il existe des centaines, voire des milliers d'outils, et qu'il ne s'agit en aucun cas d'une liste exhaustive. Au lieu de cela, c'est la «trousse à outils» que j'utilise pour tester des choses et comprendre pourquoi quelque chose n'a pas fonctionné comme prévu.
Ces outils sont utiles, voire essentiels, pour éviter le cauchemar de faire en sorte qu'un site Web fonctionne parfaitement sur votre propre ordinateur, mais seulement pour découvrir qu'il a un effet inattendu sur un client ou sur la machine d'un client..
Pour accéder aux outils du développeur Chrome, ouvrez Chrome et cliquez sur le bouton Bouton de menu en haut à droite puis Outils, puis Outils de développement.
L'onglet Éléments des outils de développement de Google Chrome vous permet de cliquer sur des parties de votre page Web pour afficher des informations sur la manière dont le navigateur l'a rendue.. Cela fait une quantité énorme de choses; assez pour remplir un tutoriel tout seul! Quelques bits que j'utilise souvent sont:-
L'onglet Réseau vous indique le temps de chargement de chaque partie d'une page Web.. Tous les navigateurs ne prennent pas en charge toutes les fonctionnalités HTML et CSS. Cela peut être problématique lorsque vous souhaitez tirer parti des fonctionnalités les plus intéressantes de HTML5 et CSS3, tout en vous assurant que les personnes disposant de la version la plus ancienne d'Internet Explorer peuvent également accéder à votre site Web..
Mais à moins que vous n'ayez une mémoire extraordinaire (ce n'est pas mon cas!), Il est presque impossible de se rappeler quels navigateurs s'opposent à quelles fonctionnalités. C’est là que le site Web de caniuse est très utile. Ce site Web résume les fonctionnalités HTML, CSS, SVG, etc. compatibles avec les versions de quels navigateurs..
De plus, si vous souhaitez utiliser une nouvelle fonctionnalité mais que les anciens navigateurs ne la prennent pas en charge, vous pouvez utiliser la bibliothèque JavaScript Modernizr. Comme ils l'expliquent sur leur site web:
«Il est très amusant de tirer parti des nouvelles technologies Web géniales, jusqu’à ce que vous deviez supporter les navigateurs en retard. Modernizr vous permet d'écrire facilement du code JavaScript et CSS conditionnel pour gérer chaque situation, qu'un navigateur prenne en charge une fonctionnalité ou non. ”
Si le navigateur d'un utilisateur ne prend pas en charge une fonctionnalité particulière, Modernizr vous permet également de spécifier une fonctionnalité de secours. Ceci est très similaire au plugin SVGeezy décrit ci-dessus.
En plus de planifier la prise en charge et les solutions de remplacement du navigateur lors de la construction de votre site, il est également important de le tester sur différents navigateurs. Browserstack est un moyen efficace de le faire. Il vous permet de soumettre une URL, puis de voir comment le site fonctionne dans différents navigateurs. Le seul inconvénient est que cela implique des frais d'abonnement. Bien que cela soit sans doute moins cher que de disposer d’une banque de machines et d’appareils réels à des fins de test. Un essai gratuit est également disponible pour que vous puissiez jeter un coup d'œil et voir ce que vous pensez..
Le site Web Modern.IE est un autre outil de test de navigateur très utile pour résoudre le problème du bon fonctionnement d'Internet Explorer. Comme son nom l'indique, c'est pour IE uniquement. Mais il est gratuit et reste une ressource très utile.
Avant de consulter votre site Web dans Browserstack ou ModernIE, il est important de valider votre code pour éliminer les erreurs de syntaxe..
Un validateur est une application Web gratuite qui vérifie votre code par rapport aux normes en vigueur. Les normes sont importantes pour assurer le fonctionnement prévisible de votre site Web sur différents navigateurs et appareils..
Il existe également de nombreux outils qui vous aideront à vérifier votre syntaxe JavaScript. Closure Compiler est en fait un outil de compression de votre JavaScript (que vous pouvez également faire si la taille de votre fichier est énorme), mais il est également utile pour vérifier les erreurs de syntaxe. par exemple. embêtants manquants points-virgules qui nous attrapent tous! Si vous copiez et collez dans votre code et cliquez sur Compiler, les erreurs éventuelles seront mises en évidence sous l'onglet Erreurs. JSHint est un autre site utile pour vérifier le code..
La vitesse de la page est importante car non seulement les visiteurs seront chassés si le chargement de votre site prend beaucoup de temps, mais Google peut en tenir compte lors de la commande des résultats de recherche..
Il existe un certain nombre d’outils qui vous permettront de tester cela, notamment: -
Ces outils proposent également des suggestions d'amélioration des performances. Par exemple, une amélioration courante consiste à compresser davantage vos images. Vous pouvez utiliser ces outils en conjonction avec l'onglet Réseau des Outils de développement Google Chrome (ci-dessus) pour rechercher les problèmes potentiels..
Ok, c'est fini! Comme je l'ai dit au début de ce tutoriel, ce serait une tournée sifflet! J'espère qu'après cette série de tutoriels, vous êtes maintenant équipé pour créer vos propres créations Google Maps. S'amuser!
Les crédits pour la plupart des images (par exemple les photos du festival) se trouvent à la fin des tutoriels précédents 1 et 3. Voici les nouveaux éléments de ce tutoriel:
Accentsconagua