Hack Your Life: comment créer sa propre carte de visite numérique

[Mise à jour du 29 septembre 2018: Liwei et moi avons publié https://firstnamebasis.app/ - un service gratuit permettant de générer votre carte de visite numérique personnelle]

Les cartes de visite sont assez pénibles à transporter.

On ne sait jamais combien il faut en apporter lors d'une réunion ou d'un événement lié au travail. Et c’est ce moment délicat à mi-manche où vous vous rendez compte que vous n’avez plus de cartes de visite.

Malgré toutes ces difficultés, les cartes de visite restent un excellent moyen d’échanger des informations de contact. Mais pouvons-nous le faire sans avoir besoin de cartes de visite physiques?

Numériser et enregistrer

Et si tout ce qu'il fallait pour échanger des informations de contact consistait en une simple analyse et sauvegarde?

Imaginez ceci: vous essayez d'obtenir les informations de contact de la personne A. La personne A affiche un code QR sur son téléphone et il ne vous reste plus qu'à numériser son téléphone à l'aide de l'appareil photo de votre iPhone. Leurs informations de contact sont automatiquement affichées sur votre téléphone et vous appuyez sur le bouton Enregistrer. Voilà, vous avez maintenant leurs coordonnées dans votre liste de contacts.

Si vous êtes actuellement sur votre ordinateur de bureau / ordinateur portable, vous voudrez peut-être saisir votre téléphone pour l’essayer.

QR code pour ma carte de visite numériqueInformations de contact affichées sur le site Web mobile (à gauche) et VCF dans l'application Contacts après téléchargement (à droite)

Tous les champs du site Web mobile sont interactifs. Si vous avez tapé sur le champ du numéro de contact, vous composeriez automatiquement le numéro affiché (pas mon numéro de mobile actuel).

Après avoir cliqué sur le bouton de téléchargement, un fichier de contact virtuel (VCF) sera téléchargé et synchronisé instantanément dans votre application Contacts.

Assez simple, n'est-ce pas?

Tutoriel: 7 étapes faciles

Maintenant, vous devez créer votre propre carte de visite numérique! Vous n’avez pas besoin d’expérience en programmation pour le faire - je vais vous expliquer quoi faire exactement. S'il vous plaît, n'hésitez pas à laisser des commentaires si vous êtes bloqué!

Étape 1: Créez un compte GitHub (si vous n’en avez pas déjà un)

Commençons par créer un compte GitHub et en vous connectant. La plupart de nos travaux seront effectués dans GitHub.

https://github.com/join

Qu'est-ce que GitHub?
GitHub est une plate-forme traditionnellement utilisée par les ingénieurs en logiciel pour stocker leur code et suivre les modifications apportées au fil du temps (contrôle de version a.k.a.).
Mais pour nos besoins, considérons simplement GitHub comme un document Word gigantesque qui stocke toutes nos informations de contact. C’est également là que nous allons modifier le code.

Étape 2: diviser à partir de mon référentiel de code (repo)

Dans cette étape, nous allons créer une fourchette - une copie - de mon rapport. Nous voulons faire cela afin que vous puissiez remplacer mes informations de contact par les vôtres.

Qu'est-ce qu'un repo?
Un référentiel, ou repo, est un endroit où les fichiers sont conservés. Imaginez-le comme un compartiment ou un dossier contenant plusieurs documents de code.
Qu'est-ce qu'une fourchette?
Un fork est une copie d'un référentiel. La création d'un référentiel vous permet d'expérimenter librement des modifications sans affecter le projet d'origine.

Ouvrez la fenêtre de votre navigateur et accédez à l’URL suivante (assurez-vous que vous êtes connecté à votre compte GitHub): https://github.com/prestonlimlianjie/digital-namecard

Repo GitHub contenant tous les fichiers pertinents.

Cliquez sur le bouton "Fork" en haut à droite de la page. Attends quelques instants!

Forking en cours! J'adore le fait qu'il y ait une fourchette littérale dans l'image.

Vous devriez alors voir un référentiel identique - mais au lieu d’avoir le nom prestonlimlianjie / digital-namecard en haut à gauche, le référentiel sera désormais [votre_nom_utilisateur] / digital-namecard. Dans mon cas, il s'agit de preston-test / digital-namecard. Vous avez maintenant créé une fourchette qui n'appartient qu'à vous!

Votre repo nouvellement fourchue!

Félicitations, vous avez créé une fourchette à partir de mon dépôt! Nous n’avons plus qu’une dernière étape préparatoire à effectuer avant de nous lancer dans le code.

Étape 3: Téléchargez votre photo de profil et le logo de votre entreprise.

Vous devrez préparer une image de profil et le logo de votre entreprise, au format .png, ou .jpg ou .svg.

Cliquez sur le bouton «Télécharger les fichiers» en haut à droite.

Le bouton «Télécharger des fichiers» se trouve dans la partie supérieure gauche de l’écran.

Vous arriverez à l'écran de téléchargement. Glissez et déposez votre photo de profil et le logo de votre entreprise!

La page de téléchargement.

Ma photo de profil est user.png et le logo de ma société est icon.png.

Une fois les fichiers téléchargés sur la page, cliquez sur le bouton "Valider les modifications" pour enregistrer les fichiers dans le référentiel.

N’oubliez pas de sauvegarder!

Vous devriez maintenant voir vos fichiers dans la page principale du repo.

user.png et icon.png sont désormais disponibles dans le référentiel.

Et maintenant nous sommes prêts à plonger dans le code. Mais avant cela, faisons un petit détour sur le fonctionnement de la carte de visite numérique. Il y a 3 composants principaux:

  1. Le code QR qui, une fois numérisé, amène l'utilisateur sur le site Web de votre carte de visite numérique.
  2. Le site Web mobile principal affiche la carte de visite numérique avec vos informations de contact. Il est créé principalement à l'aide de HTML.
  3. Le fichier de contact virtuel (VCF) qui sera téléchargé du site Web du mobile et sauvegardé dans l'application Contacts du téléphone.

Nous devrons apporter des modifications aux 3 composants afin de personnaliser la carte de visite numérique.

Mais prenons les choses une étape à la fois - en commençant par le HTML.

Étape 4: Éditez le HTML

Qu'est ce que le HTML?
Le langage HTML (HyperText Markup Language) est le langage responsable des sites Web.
Lorsque vous utilisez un navigateur (Chrome, Firefox, Safari, etc.) pour accéder à un site Web, le navigateur reçoit en fait le code HTML, qui est un ensemble de codes. Le navigateur lit ensuite le code HTML et crée les sites Web attrayants que nous avons l'habitude de voir.
Le site Web tel que l'utilisateur le voit (à gauche) et le code HTML sous-jacent (à droite) lu par le navigateur pour générer la version du site Web affichée à gauche.

Commençons par ouvrir index.html dans GitHub. Vous faites cela en cliquant sur les mots index.html dans le dépôt.

Vous verrez maintenant le fichier HTML dans toute sa splendeur.

Ne paniquez pas, HTML ne mordra pas.

Pour pouvoir le modifier, nous devons cliquer sur le bouton Modifier - celui avec l’icône du stylo en haut à gauche.

L'éditeur GitHub est prêt à être utilisé!

Il y a quelques choses que nous devons éditer dans le HTML. J'ai mis en évidence les zones du code que vous devez remplacer!

Remarque:
La plupart des langages de codage, y compris HTML, sont très spécifiques à la syntaxe. Faites donc de votre mieux pour ne remplacer que les parties du code que je spécifie.
Si vous supprimez accidentellement un caractère de trop, gardez cette règle à l'esprit: le code fonctionne comme une porte - si vous ouvrez quelque chose, vous devez le fermer. Par exemple, s'il y avait une attache angulaire d'ouverture <, il faudrait aussi une attache de fermeture>.

La photo de profil (preston.jpg) et le logo (assets / govtech-logo-blue.svg)

Remplacez preston.jpg par le nom de la photo de votre profil que vous souhaitez utiliser.
Remplacez assets / govtech-logo-blue.svg par le nom de votre fichier de logo.

Peasy facile!

Le nom (Preston Lim), le titre (Associate Software Engineer) et le nom de la société (Data Science Division, GovTech)

Remplacez Preston Lim par votre nom.
Remplacez Ingénieur logiciel associé par votre titre.
Remplacez la division Data Science, GovTech par le nom de votre entreprise.

Poussant lentement le long!

Maintenant vient une partie légèrement délicate. Vous devez faire chacune de ces étapes deux fois. Porter une attention particulière!

L'adresse électronique (preston@data.gov.sg), le numéro de téléphone (+65 9123–4567), l'URL du site Web (tech.gov.sg) et l'adresse de la société (1 Fusionopolis, Sandcrawler, n ° 09–01, 135877)

Remplacez preston@data.gov.sg par votre adresse électronique. Faites cela aux deux endroits indiqués ci-dessous.

Faites-le deux fois!

Remplacez le +6591234567 par votre numéro de téléphone. Faites cela aux deux endroits indiqués ci-dessous. (Je sais qu’ils sont légèrement différents, mais ce n’est pas grave)

Deux fois encore!

Remplacez https://www.tech.gov.sg par l'URL de votre site Web. Faites cela aux deux endroits indiqués ci-dessous.

Presque là!

Et maintenant, faites très attention. Nous allons remplacer 1 Fusionopolis, Sandcrawler, n ° 09–01, 135877 par l'adresse de votre société (c'est la deuxième chose mise en surbrillance).

Le premier bloc en surbrillance est l’URL menant à une recherche Google Maps de l’adresse de votre entreprise. Ce que vous voulez faire maintenant est d'aller dans Google Maps, entrez l'adresse de votre entreprise, puis copiez et collez l'URL obtenue. Remplacez le bloc de code en surbrillance par l'URL.

Dernier promis!

Faites défiler vers le bas de la page et cliquez sur ‘Valider le changement’!

Yay!

Nous en avons terminé avec l’édition du code HTML!

Étape 5: Créez votre site web en utilisant GitHub Pages

Nous avons maintenant terminé la modification du site Web mobile principal! Cependant, nous avons un problème: le site Web se trouve actuellement dans le dépôt GitHub en tant que fichier HTML. Comment pouvons-nous faire en sorte que le fichier HTML soit montré à quiconque veut le voir?

Nous devons héberger notre site.

Qu'est-ce que l'hébergement?
L'hébergement consiste à connecter vos fichiers HTML (et donc votre site Web) à Internet. Votre site Web reçoit une URL - une adresse à laquelle les utilisateurs peuvent accéder sur Internet s'ils souhaitent accéder à votre site Web.

Heureusement, GitHub a un service d'hébergement appelé GitHub Pages. Continuons pour que notre fichier HTML soit hébergé!

Cliquez sur le bouton Paramètres quelque part en haut et au centre de la page.

Pouvez-vous trouver le bouton Paramètres? Il est proche du bouton

Vous devriez voir une page semblable à celle montrée ci-dessous. Faites défiler la liste jusqu’à ‘Pages GitHub’.

Page de paramètres de votre repo.

Cliquez sur le bouton "Aucun" dans le champ Source. Vous devriez voir un menu déroulant.

Paramètres GitHub Pages - sélectionnez branche principale comme source

Sélectionnez ‘branche principale’. Ce faisant, vous indiquez aux pages GitHub de transformer votre rapport en un site Web actif!

Cliquez sur Enregistrer. Une URL sera générée. Il s'agit de l'URL de votre site mobile contenant la carte de visite numérique.

Cliquez sur l'URL - vous devriez voir un site Web rempli avec vos coordonnées!

Voila!

Étape 6: Éditez le VCF

Nous passons maintenant à la modification du VCF.

Le fichier VCF est le fichier téléchargé et enregistré dans l’application Contacts lorsque l’utilisateur clique sur le bouton «Télécharger» du site Web.

Retournez à la page principale du repo. Cliquez sur le fichier user.vcf.

Vous devriez arriver à la page de prévisualisation pour le VCF. Cliquez sur le bouton Modifier (l'icône du stylo en haut à droite de la page).

J'ai mis en évidence les régions qui devraient être remplacées par vos informations de contact. Veillez à ne pas supprimer les points-virgules!

Note sur la syntaxe VCF:
Si vous souhaitez insérer une nouvelle ligne, vous devez ajouter \ n dans la ligne.
Si vous voulez insérer une virgule, vous devez ajouter \, dans la ligne.

Voici les champs qui doivent être édités et ce qu’ils représentent:

N: Nom
FN: Nom complet
ORG: Organisation
TITRE: Titre du travail (\ n est la syntaxe d'une nouvelle ligne)
EMAIL: Adresse Email
TEL: numéro de portable
item1.ADR: Adresse
item2.URL: URL du site Web

Cliquez sur le bouton ‘Valider les modifications’ pour enregistrer le fichier VCF!

Maintenant que nous avons terminé avec 2 des 3 étapes principales - éditer le HTML et le VCF - tout ce qui nous reste à faire est de créer le code QR qui guide vos utilisateurs vers votre site Web!

Étape 6: Créez le code QR pour votre carte de visite numérique

Allez sur n’importe quel site Web gratuit de générateur de code QR - j’ai utilisé qr-code-generator.com.

Une fois que vous y êtes, entrez l'URL du site Web de vos pages GitHub et générez le code QR. N'oubliez pas de le télécharger et de le sauvegarder!

Générez le code QR spécifique à l'URL de vos pages GitHub

Maintenant que vous avez le code QR, analysez-le avec votre téléphone portable. Votre carte de visite numérique est maintenant prête à être utilisée! Prenez-en une photo ou téléchargez-la sur votre téléphone / ordinateur.

Félicitations, vous avez votre propre carte de visite numérique! Ce n’était pas si mal c’était? Si vous avez trouvé cela aussi facile, vous voudrez peut-être jeter un coup d'œil à la prochaine étape facultative ci-dessous: personnalisation plus poussée!

Étape 7 (facultatif): personnalisez-le!

Ceci est pour vous si vous voulez faire un effort supplémentaire et personnaliser davantage votre carte de visite numérique. Vous pouvez modifier la couleur du site Web en apportant des modifications au fichier main.css dans le même dépôt. Je vous laisse le savoir, et vous devriez utiliser Google pour rechercher la documentation de CSS.

Qu'est-ce que le CSS?
Les feuilles de style en cascade ou CSS sont un langage qui détermine l'apparence de votre site Web HTML.
Voici une analogie amusante. Si un site Web était un être humain, le code HTML est la structure squelettique de l’être humain et le code CSS est la peau et les cheveux de l’être humain.

Juste pour vous donner une idée de ce qui peut être fait: j’ai fait quelques variations de la conception de carte de visite numérique que vous voyez ci-dessus à l’aide d’un outil de conception appelé Figma.

Conceptions alternatives du site web à Figma

Pensées de clôture

Maintenant que votre carte de visite numérique est opérationnelle sans effort, je vous mets au défi d'imaginer ce que vous pouvez créer avec les mêmes outils!

Merci d'avoir donné un coup de pouce à ce tutoriel! J'espère que vous avez apprécié le didacticiel et que vous avez eu le plaisir de créer une carte de visite numérique personnalisée, tout autant que moi!

Si vous avez des commentaires ou des questions, envoyez-moi un message! C’est la première fois que j’écris un tutoriel et j’ai hâte d’entendre ce que vous en pensez!