Hack Your Life: Com fer la vostra pròpia targeta de visita digital

[Actualització del 29 de setembre de 2018: Liwei i jo hem publicat https://firstnamebasis.app/: un servei gratuït per crear la vostra targeta de visita digital personal]

Les targetes de visita són tot un problema.

Mai se sap exactament quants n’haureu de portar a una reunió o esdeveniment empresarial. I hi ha aquell moment incòmode al mig de la vostra encaixada de mans quan us heu quedat sense targetes de visita.

Malgrat tota la il·lusió, les targetes de visita continuen sent una eina excel·lent per compartir informació de contacte. Però, podem fer-ho sense necessitat de targetes de visita físiques?

Escaneja i desa

Què passaria si només calia compartir informació de contacte per escanejar-lo i desar-lo?

Imagineu-vos el següent: Esteu intentant obtenir la informació de contacte de la persona A. La persona A està veient un codi QR al seu telèfon. Tot el que heu de fer és escanejar el telèfon amb la càmera de l'iPhone. La vostra informació de contacte apareixerà automàticament al telèfon i feu clic al botó Desa. Voila, ara teniu la vostra informació de contacte a la vostra llista de contactes.

Si esteu actualment a l'escriptori / portàtil, potser voldreu agafar el telèfon per provar-ho.

Codi QR de la meva targeta de presentació digitalInformació de contacte que es mostra al lloc web per a mòbils (esquerra) i en VCF a l'aplicació de contacte després de la descàrrega (dreta)

Tots els camps del lloc web per a mòbils són interactius. Quan toqueu el camp del número de contacte, marcarà automàticament el número que es mostra (no el meu número de telèfon mòbil real).

Després de fer clic al botó de baixada, es descarregarà un fitxer de contacte virtual (VCF) i se sincronitzarà immediatament amb l'aplicació de contacte.

És prou fàcil, no?

Tutorial: 7 senzills passos

Ara podeu fer la vostra pròpia targeta de visita digital. No cal que tingueu experiència en programació per fer-ho; us explicaré què cal fer exactament. Si us plau, deixeu comentaris si us quedeu atrapats.

Pas 1: creeu un compte de GitHub (si encara no en teniu)

Comencem creant un compte de GitHub i registrant-nos. La major part del nostre treball es realitza a GitHub.

https://github.com/join

Què és GitHub? GitHub és una plataforma que tradicionalment utilitzen els enginyers de programari per desar el seu codi i fer un seguiment dels canvis que s’han fet al llarg del temps (també conegut com a control de versions).
Però, per als nostres propòsits, pensem en GitHub simplement com un gegantí document de Word que emmagatzema tota la nostra informació de contacte. Aquí és on també farem canvis al codi.

Pas 2: bifurcació del dipòsit de codis (reposició)

En aquest pas estem fent una bifurcació (una còpia) del meu repositori. Ens agradaria fer-ho perquè pugueu substituir la meva informació de contacte per la vostra.

Què és un repo? Un dipòsit, o repositori en breu, és un lloc on es guarden els fitxers. Imagineu un dipòsit o carpeta que contingui una sèrie de documents de codi.
Què és una forquilla? Un fork és una còpia d’un dipòsit. En ramificar un dipòsit, podeu experimentar lliurement amb canvis sense afectar el projecte original.

Obriu la finestra del navegador i aneu a la següent URL (assegureu-vos que esteu connectat al vostre compte de GitHub): https://github.com/prestonlimlianjie/digital-namecard

Reposició de GitHub amb tots els fitxers rellevants.

A la part superior dreta de la pàgina, feu clic al botó Forquilla. Espera un moment!

Forquilla en curs! M'encanta com hi ha una bifurcació literal a la imatge.

Aleshores hauríeu de veure un repo idèntic, però en lloc de tenir el nom prestonlimlianjie / digital-namecard a la part superior esquerra, el repo és ara [your_username] / digital-namecard. En el meu cas, es tracta de Preston-Test / Digital-Namecard. Ara heu creat una forquilla que només és vostra.

El vostre repositori recentment bifurcat.

Enhorabona, heu creat una forquilla des del meu repositori. Ara només tenim un últim pas de preparació abans de saltar al codi.

Pas 3: pengeu la imatge de perfil i el logotip de l'empresa

Haureu de crear una imatge de perfil i un logotip d’empresa, ja sigui a .png, .jpg o .svg.

Feu clic al botó Penja fitxers a l'extrem superior dret.

El botó

Se us dirigirà a la pantalla de pujada. Arrossegueu i deixeu anar la imatge de perfil i el logotip de la vostra empresa.

La pàgina de càrrega.

La meva foto de perfil és user.png i el logotip de la meva empresa és icon.png.

Un cop carregats els fitxers a la pàgina, feu clic al botó "Aplica els canvis" per desar els fitxers al dipòsit.

No oblideu estalviar!

Ara hauríeu de veure els vostres fitxers a la pàgina principal de la reposició.

user.png i icon.png ara es poden trobar a la reposició.

I ara estem preparats per endinsar-nos en el codi. Abans de fer-ho, donem una ullada ràpida al funcionament de la targeta de presentació digital. Hi ha 3 components principals:

  1. El codi QR que porta l’usuari al lloc web de la vostra targeta de visita digital després d’escanejar-lo
  2. El lloc web principal per a mòbils que mostra la targeta de visita digital amb la vostra informació de contacte. Això es crea principalment amb HTML.
  3. El fitxer de contactes virtuals (VCF) que es descarrega del lloc web per a mòbils i es desa a l'aplicació Contactes del telèfon.

Hem de fer canvis als tres components perquè la vostra targeta de visita digital sigui vostra.

Però anem a fer-ho pas a pas, començant per HTML.

Pas 4: editeu el codi HTML

Què és html HyperText Markup Language (HTML) és el llenguatge responsable dels llocs web.
Quan utilitzeu un navegador (Chrome, Firefox, Safari, etc.) per accedir a un lloc web, el navegador realment rep HTML, un munt de codi. A continuació, el navegador llegeix el codi HTML i crea els llocs web atractius visualment als quals estem acostumats.
El lloc web tal com ho veu l'usuari (a l'esquerra) i el codi HTML subjacent (a la dreta) llegit pel navegador per generar la versió del lloc web que es mostra a l'esquerra.

Comencem obrint index.html a GitHub. Per fer-ho, feu clic a les paraules index.html de la reposició.

Ara veureu el fitxer HTML en la seva màxima esplendor.

No us espanteu, l’HTML no mossega.

Per fer-hi canvis, heu de fer clic al botó Edita: el botó amb la icona de llapis a la part superior esquerra.

L'editor de GitHub ja està a punt.

Hi ha un parell de coses que hem d’editar en HTML. He ressaltat les àrees del codi que heu de substituir.

Nota: La majoria dels llenguatges de programació, inclòs l'HTML, tracten de forma bastant estreta la sintaxi. Així que feu el possible per substituir només parts del codi que he proporcionat.
Si accidentalment elimineu massa caràcters, tingueu present aquesta regla: el codi funciona com una porta; quan obriu alguna cosa, l’heu de tancar. Per exemple, si hi ha un claudàtor d'obertura donar.

La imatge de perfil (preston.jpg) i el logotip (assets / govtech-logo-blue.svg)

Substituïu preston.jpg pel nom de la vostra foto de perfil que vulgueu utilitzar. Substitueix assets / govtech-logo-blue.svg pel nom del fitxer del logotip.

Molt fàcil!

Nom (Preston Lim), títol (Associate Software Engineer) i nom de l'empresa (Data Science Division, GovTech)

Substitueix Preston Lim pel teu nom. Substituïu enginyer de programari associat pel vostre títol. Substituïu la divisió de ciències de dades, GovTech pel nom de la vostra empresa.

Chug lentament!

Ara ve una mica complicat. Heu de fer cadascun d’aquests passos dues vegades. Tingueu cura!

L'adreça electrònica ([email protected]), el número de telèfon (+65 9123-4567), l'URL del lloc web (tech.gov.sg) i l'adreça de l'empresa (1 Fusionopolis, Sandcrawler, núm. 09-01 ). 135877)

Substituïu [email protected] per la vostra adreça de correu electrònic. Feu-ho als dos llocs ressaltats a continuació.

Feu-ho dues vegades!

Substituïu +6591234567 pel vostre número de telèfon. Feu-ho als dos llocs ressaltats a continuació. (Sé que són una mica diferents, però no importa.)

Un cop més!

Substituïu https://www.tech.gov.sg per l'URL del vostre lloc web. Feu-ho als dos llocs ressaltats a continuació.

Casi allà!

I ara vés amb compte. Substituirem 1 Fusionopolis, Sandcrawler, núm. 09-01, 135877 per l'adreça de la vostra empresa (això és el segon que es ressaltarà).

El primer bloc ressaltat és l'URL d'una cerca de Google Maps per a l'adreça de la vostra empresa. Ara aneu a Google Maps i introduïu l'adreça de la vostra empresa. Copieu i enganxeu l'URL resultant. Substituïu el bloc de codi ressaltat per l'URL.

L'últim que ho prometo!

Desplaceu-vos fins a la part inferior de la pàgina i feu clic a "Confirma el canvi".

Visca!

L'edició del codi HTML ja s'ha completat.

Pas 5: creeu el vostre lloc web amb GitHub Pages

Ja hem acabat d’editar el lloc web principal per a mòbils. Tanmateix, tenim un problema: el lloc web només es troba actualment a la reposició de GitHub com a fitxer HTML. Com el configurem perquè el fitxer HTML es mostri a tothom que vulgui veure-ho?

Hem d’allotjar el nostre lloc.

Què és l'allotjament? L’allotjament connecta els vostres fitxers HTML (i, per tant, el vostre lloc web) a Internet. El vostre lloc web té una URL: una adreça a la qual poden accedir els usuaris d’Internet quan vulguin accedir al vostre lloc web.

Afortunadament, GitHub té un servei d’allotjament anomenat GitHub Pages. Passem a allotjar el nostre fitxer HTML.

Feu clic al botó Configuració a la part superior i mitjana de la pàgina.

Podeu trobar el botó Configuració? Es troba a prop del botó

Hauríeu de veure una pàgina similar a la que es mostra a continuació. Desplaceu-vos cap avall fins que vegeu "Pàgines GitHub".

Pàgina de configuració de la vostra reposició.

Al camp "Font", feu clic al botó "Cap". Hauríeu de veure un menú desplegable.

Configuració de les pàgines de GitHub: seleccioneu la branca principal com a font

Trieu "Sucursal principal". Així expliqueu a les pàgines de GitHub que converteixin la vostra reposició en un lloc web en directe.

Feu clic a "Desa". Es genera un URL. Aquest és l’URL del vostre lloc web per a mòbils amb la targeta de presentació digital.

Feu clic a l'URL: hauríeu de veure un lloc web amb la vostra informació de contacte.

Voila!

Pas 6: editeu el VCF

Ara canviem el VCF.

El fitxer VCF es descarrega i es desa a l'aplicació Contactes quan algú fa clic al botó de baixada del lloc web.

Torneu a la pàgina principal de la reposició. Feu clic al fitxer user.vcf.

Hauríeu d’arribar a la pàgina de previsualització del VCF. Feu clic al botó Edita (la icona de llapis a la part superior dreta de la pàgina).

He ressaltat les regions que s'han de substituir per la vostra informació de contacte. Aneu amb compte de no suprimir els punts i coma.

Nota sobre la sintaxi de VCF: si voleu inserir una línia nova, heu d'inserir \ n a la línia. Si voleu incloure una coma, heu d'incloure \ a la línia.

A continuació, es mostren els camps que s’han d’editar i el que representen:

N: Nom FN: Nom complet ORG: Organització TÍTOL: Títol del treball (\ n és la sintaxi d'una nova línia) CORREU ELECTR :NIC: Adreça de correu electrònic TEL: Número de telèfon mòbil item1.ADR: Adreça item2.URL: URL del lloc web

Feu clic al botó "Aplica els canvis" per desar el VCF.

Ara que hem completat 2 dels 3 passos principals: editar HTML i VCF, tot el que hem de fer és crear el codi QR que porti els vostres usuaris al vostre lloc web.

Pas 6: creeu el codi QR per a la vostra targeta de visita digital

Visiteu un lloc web gratuït de generador de codi QR: he utilitzat qr-code-generator.com.

Quan hi sigueu, introduïu l'URL del lloc web GitHub Pages i creeu el codi QR. Recordeu-vos de descarregar-lo i desar-lo.

Genereu el codi QR específic de l'URL de la pàgina de GitHub

Després de rebre el codi QR, escaneu-lo amb el vostre telèfon mòbil. La vostra targeta de visita digital ja està llesta per utilitzar-la. Feu-ne una foto o descarregueu-la al vostre telèfon / ordinador.

Enhorabona, teniu la vostra pròpia targeta de visita digital. No era tan dolent, oi? Si ho trobeu fàcil, és possible que vulgueu fer una ullada al següent pas opcional: més personalitzacions.

Pas 7 (opcional): feu-ho vosaltres mateixos!

Aquesta és la vostra opció si voleu fer un pas més i personalitzar encara més la vostra targeta de presentació digital. Podeu canviar el color del lloc web editant el fitxer main.css al mateix dipòsit. Deixeu que ho descobriu i heu d’utilitzar Google per buscar la documentació CSS.

Què és CSS Fulls d'estil en cascada o CSS és un llenguatge que determina l'aspecte del vostre lloc web HTML.
Aquí hi ha una divertida analogia. Si un lloc web era un ésser humà, HTML és una estructura esquelètica humana i CSS és pell i cabell humà.

Per fer-vos una idea del que es pot fer, he fet algunes variacions del disseny de targetes de visita digitals que es mostren anteriorment mitjançant una eina de disseny anomenada Figma.

Dissenys alternatius del lloc web a Figma

Pensaments propers

Ara que ja teniu la vostra targeta de presentació digital en funcionament amb tan poc esforç, us demano que us imagineu què més podeu fer amb les mateixes eines.

Gràcies per donar un truc a aquest tutorial. Espero que us hagi agradat treballar el tutorial i que us divertiu tant creant una targeta de visita digital personalitzada com a mi.

Si teniu algun comentari o pregunta, envieu-me una línia. És la primera vegada que escric un tutorial i espero escoltar el que vosaltres penseu.