HTML 5 - 5.6 : Créez votre activié personnelle
Poursuivez votre portfolio en intégrant des fonctionnalités mobiles avancées. Google Maps peut être intégrée simplement en lien : <a href="https://maps.google.com?q=adresse">. Remplacez les espaces dans l'adresse par des encodages URL (ex : avenue+des+Champs+Élysées). Des outils en ligne convertissent les adresses en URL valides. Cela permet à l'utilisateur d'accéder directement aux cartes avec sa destination pré-remplie.
Pour les itinéraires, utilisez les protocoles de votre plateforme : Apple Maps avec maps:// et Google Maps avec google.com/maps/. Spécifiez le mode de transport avec les paramètres : dir pour la conduite, walk pour à pied, transit pour les transports. Par exemple : maps://?saddr=départ&daddr=destination&dirflg=w (Apple) ou versions Google équivalentes. Cela offre une expérience mobile native optimale.
Ajoutez des actions rapides : SMS avec <a href="sms:+33123456789?body=message">, appels avec <a href="tel:+33123456789">, FaceTime avec <a href="facetime:contact@domain.com">. Pour les services tiers (WhatsApp, Messenger, Uber), utilisez leurs protocoles spécifiques (ex : whatsapp://, fb-messenger://). Définissez une hauteur uniforme en CSS (par exemple 120 pixels) pour que toutes les icônes d'activités aient la même taille.
Ces intégrations transforment un simple portfolio en une application web fonctionnelle. Les utilisateurs peuvent accéder directement à vos services depuis leurs appareils mobiles, avec expérience optimisée. C'est ainsi qu'on crée un véritable point de contact digital pour une activité personnelle.
En résumé
Cette leçon montre comment enrichir un site HTML5 personnel en y intégrant des cartes Google Maps, des liens d'itinéraires fonctionnels pour iOS (Apple Maps) et Android (Google Maps), ainsi que des options de navigation (à pied, en transports en commun, Uber). Elle couvre aussi l'encodage des adresses contenant des espaces et la normalisation des dimensions d'icônes avec l'attribut HTML.
Points clés
- Intégrer Google Maps via l'URL `https://maps.google.com/?q=adresse` pour afficher une carte cliquable
- Encoder les adresses avec espaces en utilisant un outil d'URL encoding avant de les intégrer dans les liens
- Créer des liens d'itinéraires Apple avec la syntaxe `maps:?daddr=adresse` pour les appareils iOS
- Utiliser `google.navigation:?q=adresse` pour créer des liens Google Maps sur Android
- Ajouter des paramètres de mode de déplacement (`mode=w` pour marche, `mode=transit` pour transports en commun)
- Uniformiser la taille des icônes avec l'attribut HTML5 `height` pour une meilleure cohérence visuelle
Questions fréquentes
Comment intégrer une carte Google Maps sur mon site HTML?
Utiliser un lien avec l'URL `https://maps.google.com/?q=adresse` où « adresse » est le lieu souhaité (ex. `paris`). Placer cette URL dans l'attribut `href` d'une balise `<a>` pour la rendre cliquable.
Comment gérer les adresses avec espaces dans l'URL?
Les espaces ne sont pas autorisés dans les URLs. Utiliser un outil d'URL encoding (disponible sur des sites spécialisés) qui transforme les espaces et caractères spéciaux en codes compatibles. Par exemple, « avenue des champs élysées » sera converti au format encodé.
Comment créer un lien d'itinéraire qui fonctionne sur iOS et Android?
Utiliser deux liens distincts : `maps:?daddr=adresse` pour Apple/iOS et `google.navigation:?q=adresse` pour Google/Android. On peut ajouter des paramètres comme `mode=w` (à pied) ou `mode=transit` (transports en commun) pour préciser le mode de déplacement.