Hack Your Life: come creare il tuo biglietto da visita digitale

[Aggiornamento 29 settembre 2018: Liwei ed io abbiamo rilasciato https://firstnamebasis.app/ - un servizio gratuito per generare il tuo biglietto da visita digitale personale]

I biglietti da visita sono abbastanza dolorosi da portare in giro.

Non sai mai quanti da portare a una riunione o a un evento legato al lavoro. E c'è quel momento imbarazzante a metà della stretta di mano quando ti sei reso conto che hai finito i biglietti da visita.

Nonostante tutto il clamore, i biglietti da visita rimangono ancora un ottimo strumento per lo scambio di informazioni di contatto. Ma possiamo farlo senza bisogno di biglietti da visita fisici?

Scansiona e salva

E se tutto ciò che serve per scambiare le informazioni di contatto fosse una semplice scansione e salvataggio?

Immagina questo: stai cercando di ottenere le informazioni di contatto dalla persona A. La persona A visualizza un codice QR sul proprio telefono e tutto ciò che devi fare è scansionare il telefono usando la fotocamera del tuo iPhone. Le loro informazioni di contatto vengono visualizzate automaticamente sul telefono e si preme il pulsante Salva. Voila, ora hai le loro informazioni di contatto nell'elenco Contatti.

Se sei attualmente sul tuo desktop / laptop, potresti prendere il tuo telefono per provarlo.

Codice QR per il mio biglietto da visita digitaleInformazioni di contatto visualizzate sul sito Web mobile (a sinistra) e VCF nell'app Contatti dopo il download (a destra)

Tutti i campi nel sito Web mobile sono interattivi. Se si toccava il campo del numero di contatto, si componeva automaticamente il numero visualizzato (non il mio numero di cellulare effettivo).

Dopo aver fatto clic sul pulsante di download, un file di contatto virtuale (VCF) verrà scaricato e sincronizzato immediatamente nell'app Contatti.

Abbastanza semplice, no?

Tutorial: 7 semplici passaggi

Ora puoi creare il tuo biglietto da visita digitale! Non è necessario avere alcuna esperienza di codifica per farlo: ti spiegherò esattamente cosa fare. Non esitate a lasciare commenti se rimani bloccato!

Passaggio 1: crea un account GitHub (se non ne hai già uno)

Iniziamo creando un account GitHub e accedendo. Gran parte del nostro lavoro verrà svolto in GitHub.

https://github.com/join

Che cos'è GitHub?
GitHub è una piattaforma tradizionalmente utilizzata dagli ingegneri del software per memorizzare il loro codice e tenere traccia delle modifiche che sono state apportate nel tempo (controllo della versione a.k.a.).
Ma per i nostri scopi, trattiamo GitHub come un gigantesco documento Word che memorizza tutte le nostre informazioni di contatto. Questo è anche il punto in cui apporteremo modifiche al codice.

Passaggio 2: fork dal mio repository di codice (repository)

In questo passaggio, faremo un fork - una copia - del mio repository. Vogliamo farlo in modo che tu possa sostituire le mie informazioni di contatto con le tue.

Cos'è un repo?
Un repository, o repo in breve, è un luogo in cui si trovano i file. Immaginalo come un secchio o una cartella che contiene un sacco di documenti in codice.
Che cos'è una forchetta?
Un fork è una copia di un repository. Il fork di un repository consente di sperimentare liberamente le modifiche senza influire sul progetto originale.

Apri la finestra del browser e vai al seguente URL (assicurati di aver effettuato l'accesso al tuo account GitHub): https://github.com/prestonlimlianjie/digital-namecard

Repository GitHub contenente tutti i file rilevanti.

Fai clic sul pulsante "Fork" in alto a destra nella pagina. Aspetta qualche istante!

Forking in progress! Adoro come c'è una forchetta letterale nell'immagine.

Dovresti quindi vedere un repository identico, ma invece di avere un nome di prestonlimlianjie / digital-namecard in alto a sinistra, il repository ora sarà [your_username] / digital-namecard. Nel mio caso, è preston-test / digital-namecard. Ora hai creato un fork che appartiene solo a te!

Il tuo repository biforcuto di recente!

Complimenti, hai creato un fork dal mio repository! Ora abbiamo solo un ultimo passo preparatorio prima di passare al codice.

Passaggio 3: carica la foto del profilo e il logo dell'azienda

Dovrai preparare un'immagine del profilo e il logo dell'azienda - in .png, .jpg o .svg.

Fai clic sul pulsante "Carica file" in alto a destra.

Il pulsante

Arriverete alla schermata di caricamento. Trascina e rilascia l'immagine del tuo profilo e il logo dell'azienda!

La pagina di caricamento.

La mia immagine del profilo è user.png e il logo della mia azienda è icon.png.

Una volta caricati i file sulla pagina, fare clic sul pulsante "Salva modifiche" per salvare i file nel repository.

Non dimenticare di salvare!

Ora dovresti vedere i tuoi file nella pagina principale del repository.

user.png e icon.png possono ora essere trovati nel repository.

E ora siamo pronti per immergerci nel codice. Ma prima di farlo, facciamo una breve deviazione su come funziona il biglietto da visita digitale. Ci sono 3 componenti principali:

  1. Il codice QR che, una volta scansionato, porta l'utente sul sito Web del biglietto da visita digitale
  2. Il sito Web mobile principale che visualizza il biglietto da visita digitale con le informazioni di contatto - questo viene creato principalmente utilizzando HTML.
  3. Il file di contatto virtuale (VCF) che verrà scaricato dal sito Web mobile e salvato nell'app Contatti sul telefono.

Dovremo apportare modifiche a tutti e 3 i componenti per rendere il tuo biglietto da visita digitale tuo.

Ma facciamo un passo alla volta, a partire dall'HTML.

Passaggio 4: modifica l'HTML

Che cos'è l'HTML?
HyperText Markup Language (HTML) è il linguaggio responsabile dei siti Web.
Quando si utilizza un browser (Chrome, Firefox, Safari ecc.) Per accedere a un sito Web, il browser riceve effettivamente l'HTML, che è un gruppo di codice. Il browser quindi legge l'HTML e crea i siti Web visivamente accattivanti che siamo abituati a vedere.
Il sito Web come un utente lo vede (a sinistra) e il codice HTML sottostante (a destra) letto dal browser per generare la versione del sito Web visualizzata a sinistra.

Iniziamo aprendo index.html in GitHub. Puoi farlo facendo clic sulle parole index.html nel repository.

Ora vedrai il file HTML nella sua massima gloria.

Non impazzire, HTML non morde.

Per apportare modifiche, dobbiamo fare clic sul pulsante Modifica, quello con l'icona della penna in alto a sinistra.

L'editor GitHub è pronto per l'uso!

Ci sono alcune cose che dobbiamo modificare in HTML. Ho evidenziato le aree nel codice che dovresti sostituire!

Nota:
La maggior parte dei linguaggi di codifica, incluso HTML, sono piuttosto particolari sulla sintassi. Quindi fai del tuo meglio per sostituire solo parti del codice che specifico.
Se elimini accidentalmente un carattere di troppo, tieni presente questa regola: il codice funziona come una porta - se apri qualcosa, devi chiuderlo. Ad esempio, se ci fosse una parentesi angolare di apertura <, dovrebbe esserci anche una chiusura>.

L'immagine del profilo (preston.jpg) e il logo (assets / govtech-logo-blue.svg)

Sostituisci preston.jpg con il nome della tua immagine del profilo che desideri utilizzare.
Sostituisci assets / govtech-logo-blue.svg con il nome del tuo file logo.

Vai tranquillo!

Il nome (Preston Lim), il titolo (Associate Software Engineer) e il nome dell'azienda (Data Science Division, GovTech)

Sostituisci Preston Lim con il tuo nome.
Sostituisci Associate Software Engineer con il tuo titolo.
Sostituisci Data Science Division, GovTech con il nome della tua azienda.

Rallentando lentamente!

Ora arriva una parte leggermente complicata. Devi fare ciascuno di questi passaggi due volte. Fare particolare attenzione!

L'indirizzo e-mail ([email protected]), il numero di telefono (+65 9123–4567), l'URL del sito Web (tech.gov.sg) e l'indirizzo dell'azienda (1 Fusionopolis, Sandcrawler, # 09–01, 135877)

Sostituisci [email protected] con il tuo indirizzo email. Fallo nei due posti evidenziati di seguito.

Fallo due volte!

Sostituisci +6591234567 con il tuo numero di telefono. Fallo nei due posti evidenziati di seguito. (So ​​che sono leggermente diversi, ma non importa davvero)

Ancora due volte!

Sostituisci https://www.tech.gov.sg con l'URL del tuo sito web. Fallo nei due posti evidenziati di seguito.

Quasi lì!

E ora presta molta attenzione. Sostituiremo 1 Fusionopolis, Sandcrawler, # 09–01, 135877 con il vostro indirizzo aziendale (questa è la seconda cosa che viene evidenziata).

Il primo blocco evidenziato è l'URL di una ricerca su Google Maps dell'indirizzo della tua azienda. Quello che vuoi fare ora è andare su Google Maps e inserire l'indirizzo della tua azienda, quindi copiare e incollare l'URL risultante. Sostituisci il blocco di codice evidenziato con l'URL.

L'ultimo lo prometto!

Scorri fino alla fine della pagina e premi "Commit change"!

Sìì!

Ora abbiamo finito con la modifica dell'HTML!

Passaggio 5: crea il tuo sito Web utilizzando GitHub Pages

Ora abbiamo finito di modificare il sito Web mobile principale! Tuttavia, abbiamo un problema: il sito Web si trova attualmente nel repository GitHub come file HTML. Come possiamo renderlo tale che il file HTML sia mostrato a chiunque voglia vederlo?

Dobbiamo ospitare il nostro sito.

Che cos'è l'hosting?
L'hosting è il processo di connessione dei tuoi file HTML (e quindi del tuo sito Web) a Internet. Il tuo sito Web ottiene un URL: un indirizzo a cui le persone possono accedere su Internet se desiderano accedere al tuo sito Web.

Per fortuna, GitHub ha un servizio di hosting chiamato GitHub Pages. Procediamo per ospitare il nostro file HTML!

Facciamo clic sul pulsante Impostazioni da qualche parte nella parte superiore e centrale della pagina.

Riesci a trovare il pulsante Impostazioni? È vicino al pulsante

Dovresti vedere una pagina simile a quella mostrata di seguito. Scorri verso il basso fino a visualizzare "Pagine GitHub".

Pagina delle impostazioni del tuo repository.

Fai clic sul pulsante "Nessuno" nel campo Sorgente. Dovresti vedere un menu a discesa.

Impostazioni pagine GitHub: selezionare il ramo Master come sorgente

Seleziona "ramo principale". In tal modo, stai dicendo alle pagine di GitHub di trasformare il tuo repository in un sito Web live!

Clicca su Salva. Verrà generato un URL. Questo è l'URL del tuo sito mobile che contiene il biglietto da visita digitale.

Fai clic sull'URL: dovresti vedere un sito Web pieno di dati di contatto!

Ecco!

Passaggio 6: modifica il VCF

Ora, procediamo a modificare il VCF.

Il VCF è il file che viene scaricato e salvato nell'app Contatti quando qualcuno fa clic sul pulsante "Download" sul sito Web.

Torna alla pagina principale del repository. Fare clic sul file user.vcf.

Dovresti arrivare alla pagina di anteprima del VCF. Fai clic sul pulsante Modifica (l'icona della penna in alto a destra nella pagina).

Ho evidenziato le regioni che dovrebbero essere sostituite con le informazioni di contatto. Fai molta attenzione a non eliminare i punti e virgola!

Nota sulla sintassi VCF:
Se si desidera inserire una nuova riga, è necessario aggiungere \ n nella riga.
Se si desidera inserire una virgola, è necessario aggiungere \ nella riga.

Ecco i campi che dovrebbero essere modificati e ciò che rappresentano:

N: Nome
FN: Nome completo
ORG: Organizzazione
TITLE: Job Title (\ n è la sintassi di una nuova riga)
EMAIL: indirizzo e-mail
TEL: numero di cellulare
item1.ADR: indirizzo
item2.URL: URL del sito Web

Fai clic sul pulsante "Salva modifiche" per salvare il VCF!

Ora che abbiamo finito con 2 dei 3 passaggi principali - modifica dell'HTML e del VCF - tutto ciò che ci resta da fare è creare il codice QR che guida i tuoi utenti sul tuo sito web!

Passaggio 6: crea il codice QR per il tuo biglietto da visita digitale

Vai a qualsiasi sito Web gratuito di generatore di codice QR - Ho usato qr-code-generator.com.

Una volta che sei lì, inserisci l'URL del sito web delle tue pagine GitHub e genera il codice QR. Ricordati di scaricarlo e salvarlo!

Genera il codice QR specifico per l'URL delle tue pagine GitHub

Ora che hai il codice QR, esegui una scansione usando il tuo telefono cellulare. Il tuo biglietto da visita digitale è ora pronto per l'uso! Scatta una foto o scaricala sul tuo telefono / computer.

Congratulazioni, hai il tuo biglietto da visita digitale! Non è stato poi così male? Se lo hai trovato così facile, potresti voler dare un'occhiata al prossimo passaggio facoltativo di seguito: ulteriore personalizzazione!

Passaggio 7 (opzionale): personalizzalo!

Questo è per te se vuoi fare il possibile e personalizzare ulteriormente il tuo biglietto da visita digitale. È possibile modificare il colore del sito Web apportando modifiche al file main.css nello stesso repository: ti lascerò per capirlo e dovresti utilizzare Google per cercare la documentazione per CSS.

Che cos'è il CSS?
Fogli di stile CSS o CSS è un linguaggio che determina l'aspetto del tuo sito Web HTML.
Ecco un'analogia divertente. Se un sito Web era un essere umano, l'HTML è la struttura scheletrica dell'essere umano e il CSS è la pelle e i capelli dell'essere umano.

Solo per darti un'idea di cosa si può fare: ho apportato alcune varianti al design del biglietto da visita digitale che vedi sopra usando uno strumento di progettazione chiamato Figma.

Disegni alternativi del sito Web in Figma

Pensieri finali

Ora che hai messo in funzione il tuo biglietto da visita digitale in modo così semplice, ti sfido a immaginare cos'altro puoi costruire con gli stessi strumenti!

Grazie per aver dato a questo tutorial una pugnalata! Spero che ti sia piaciuto leggere il tutorial e che tu abbia iniziato a creare un biglietto da visita digitale personalizzato proprio come me!

Se hai commenti o domande, per favore mandami un messaggio! È la prima volta che scrivo un tutorial e non vedo l'ora di sentire cosa ne pensate voi ragazzi!