Hakige oma elu: kuidas teha oma digitaalne visiitkaart

[Värskendage 29. septembrit 2018: Liwei ja mina andsime välja https://firstnamebasis.app/ - tasuta teenuse teie isikliku digitaalse visiitkaardi genereerimiseks]

Visiitkaardid on üsna valus kaasas kanda.

Kunagi ei või täpselt teada, mitu inimest koosolekule või tööga seotud üritusele kaasa saab. Ja seal on see ebamugav hetk käepigistuse ajal, kui olete aru saanud, et teil pole visiitkaarte.

Vaatamata kõigile askeldustele on visiitkaardid endiselt suurepärane vahend kontaktteabe vahetamiseks. Kuid kas me saame seda teha ilma füüsilisi visiitkaarte vajamata?

Skaneerige ja salvestage

Mis siis, kui kontaktteabe vahetamiseks kulus vaid lihtne skannimine ja salvestamine?

Kujutage ette: proovite saada inimeselt A. kontaktteavet. Isik A kuvab tema telefonis QR-koodi ja peate vaid skannima tema telefoni oma iPhone'i kaamera abil. Nende kontaktteavet kuvatakse teie telefonis automaatselt ja vajutate nuppu Salvesta. Voila, nüüd on teil nende kontaktandmed kontaktide loendis.

Kui kasutate praegu oma laua- või sülearvutit, võiksite selle telefoni saamiseks haarata telefoni.

Minu digitaalse visiitkaardi QR-koodPärast allalaadimist (paremal) mobiiltelefonide veebisaidil (vasakul) ja VCF-is kuvatav kontaktteave rakenduses Kontaktid

Kõik mobiiliveebisaidi väljad on interaktiivsed. Kui koputate kontakti numbri väljale, valiksite automaatselt kuvatud numbri (mitte minu tegeliku mobiilinumbri).

Pärast allalaadimisnupul klõpsamist laaditakse virtuaalne kontaktfail (VCF) alla ja sünkroonitakse kohe teie rakenduses Kontaktid.

Piisavalt lihtne, kas pole?

Õpetus: 7 lihtsat sammu

Nüüd saate luua oma digitaalse visiitkaardi! Selleks ei pea te kodeerimise kogemust olema - ma selgitan, mida täpselt teha. Kui jääte ummikusse, jätke kommentaarid.

1. samm: looge GitHubi konto (kui teil seda veel pole)

Alustame GitHubi konto loomisega ja sisse logimisega. Suurem osa meie tööst tehakse GitHubis.

https://github.com/join

Mis on GitHub?
GitHub on platvorm, mida tarkvarainsenerid kasutavad traditsiooniliselt oma koodi salvestamiseks ja aja jooksul tehtud muudatuste jälgimiseks (nt versiooni juhtimine).
Kuid käsitleme oma eesmärkidel GitHubi lihtsalt kui hiiglaslikku Wordi dokumenti, mis salvestab kogu meie kontaktteabe. Samuti teeme selles koodis muudatusi.

2. samm: kahvel minu koodide hoidlast (repo)

Selles etapis teeme mu repost kahvli - koopia. Tahame seda teha nii, et saaksite minu kontaktteabe endaga asendada.

Mis on repo?
Hoidla ehk lühidalt repo on failide hoidmise koht. Kujutage seda kui ämbrit või kausta, milles on hunnik kooddokumente.
Mis on kahvel?
Kahvel on hoidla koopia. Hoidla forkimine võimaldab muudatustega vabalt katsetada, ilma et see mõjutaks algset projekti.

Avage brauseriaken ja minge järgmisele URL-ile (veenduge, et olete oma GitHubi kontole sisse loginud): https://github.com/prestonlimlianjie/digital-namecard

GitHubi repo, mis sisaldab kõiki asjakohaseid faile.

Klõpsake lehe paremas ülanurgas nuppu „Kahvel“. Oota mõni hetk!

Forksimine pooleli! Mulle meeldib, kuidas pildil on sõnasõnaline kahvel.

Seejärel peaksite nägema identset repot - kuid selle asemel, et vasakus ülanurgas oleks nimi prestonlimlianjie / digital-namecard, on repoks nüüd [your_username] / digital-namecard. Minu puhul on see preston-test / digital-namecard. Olete nüüd loonud kahvli, mis kuulub ainult teile!

Teie äsja kahveldatud repo!

Palju õnne, olete minu repo alt kahvli loonud! Nüüd on meil alles üks viimane ettevalmistav samm, enne kui koodi sisse hüppame.

3. samm: laadige üles oma profiilipilt ja ettevõtte logo

Peate valmistama profiilipildi ja ettevõtte logo - kas .png, .jpg või .svg.

Klõpsake paremas ülanurgas oleval nupul „Laadi failid üles”.

Nuppu „Laadi failid üles” leiate ekraani vasakust ülaservast.

Saabud üleslaadimiskuvale. Lohistage oma profiilipilt ja ettevõtte logo!

Üleslaadimisleht.

Minu profiilipilt on user.png ja minu ettevõtte logo on icon.png.

Kui failid on lehele üles laaditud, klõpsake failide hoidlasse salvestamiseks nuppu "Muudatuste kinnitamine".

Ärge unustage salvestada!

Peaksite oma faile nägema repo avalehel.

user.png ja icon.png on nüüd repos leitavad.

Ja nüüd oleme valmis koodi sisse sukelduma. Kuid enne, kui seda teeme, vaatame lühidalt, kuidas digitaalne visiitkaart töötab. Seal on 3 peamist komponenti:

  1. QR-kood, mis pärast skannimist viib kasutaja teie digitaalse visiitkaardi veebisaidile
  2. Peamine mobiilne veebisait, kus kuvatakse digitaalne visiitkaart koos teie kontaktandmetega - see luuakse peamiselt HTML-i abil.
  3. Virtuaalne kontaktfail (VCF), mis laaditakse alla veebisaidilt ja salvestatakse telefoni rakendusse Kontaktid.

Peame tegema muudatused kõigis 3 komponendis, et muuta digitaalne visiitkaart teie enda omaks.

Kuid võtkem see üks samm korraga - alustades HTML-ist.

4. samm: muutke HTML-i

Mis on HTML?
Veebisaitide eest vastutab hüperteksti märgistuskeel (HTML).
Kui kasutate veebisaidile pääsemiseks brauserit (Chrome, Firefox, Safari jne), saab brauser tegelikult HTML-i - mis on hunnik koodi. Seejärel loeb brauser HTML-i ja loob visuaalselt atraktiivsed veebisaidid, mida oleme harjunud nägema.
Veebisaiti kui kasutaja näeb vasakpoolses veebisaidi versiooni genereerimisel seda (vasakul) ja selle aluseks olevat HTML-koodi (paremal) brauseri poolt loetud.

Alustame avades GitHubis index.html. Selleks klõpsate repos sõnu index.html.

Nüüd näete HTML-faili täies hiilguses.

Ära väri, HTML ei hammusta.

Selle muutmiseks peame klõpsama redigeerimisnupul - sellel, mille vasakus ülanurgas on pliiatsiikoon.

GitHubi redaktor on kasutamiseks valmis!

HTML-is peame redigeerima mõnda asja. Olen koodis välja toonud valdkonnad, mida peaksite asendama!

Märge:
Enamik kodeerivaid keeli, sealhulgas HTML, on süntaksi osas üsna eriline. Proovige oma parimat, et saaksite asendada ainult need osad, mille ma täpsustan.
Kui kustutate kogemata ühe märgi liiga palju, pidage seda reeglit meeles: kood töötab nagu uks - kui midagi avate, peate selle sulgema. Näiteks kui oleks avanev nurgalüli <, siis peaks olema ka sulgev>.

Profiilipilt (preston.jpg) ja logo (varad / govtech-logo-blue.svg)

Asendage preston.jpg oma profiilipildi nimega, mida soovite kasutada.
Asendage varad / govtech-logo-blue.svg oma logofaili nimega.

Lihtne!

Nimi (Preston Lim), pealkiri (Associate Software Engineer) ja ettevõtte nimi (Data Science Division, GovTech)

Asendage Preston Lim oma nimega.
Asendage assotsieerunud tarkvarainsener oma ametinimetusega.
Asendage Data Science Division, GovTech oma ettevõtte nimega.

Aeglaselt chugging mööda!

Nüüd tuleb veidi keeruline osa. Kõiki neid toiminguid peate tegema kaks korda. Pane hoolega tähele!

E-posti aadress (preston@data.gov.sg), telefoninumber (+65 9123–4567), veebisaidi URL (tech.gov.sg) ja ettevõtte aadress (1 Fusionopolis, Sandcrawler, # 09–01, 135877)

Asendage preston@data.gov.sg oma e-posti aadressiga. Tehke seda kahes allpool esile tõstetud kohas.

Tehke seda kaks korda!

Asendage +6591234567 oma telefoninumbriga. Tehke seda kahes allpool esile tõstetud kohas. (Ma tean, et need on pisut erinevad, kuid see ei oma tegelikult tähtsust)

Kaks korda jälle!

Asendage https://www.tech.gov.sg oma veebisaidi URL-iga. Tehke seda kahes allpool esile tõstetud kohas.

Peaaegu kohal!

Ja nüüd pöörake tähelepanelikult tähelepanu. Asendame teie ettevõtte aadressiga 1 Fusionopolis, Sandcrawler, nr 09–01, 135877 (see on teine ​​asi, mida esile tõstetakse).

Esimene esiletõstetud plokk on teie ettevõtte aadressi Google Mapsi otsingu URL. Nüüd soovite minna Google Mapsi, sisestada oma ettevõtte aadress ning kopeerida ja kleepida saadud URL. Asendage esiletõstetud koodiplokk URL-iga.

Viimast luban!

Kerige lehe alaossa ja klõpsake nuppu „Muuda muudatusi”!

Jah!

Nüüd on HTML-i redigeerimine tehtud!

5. samm: looge oma veebisait GitHubi lehtede abil

Nüüd oleme peamise mobiiliveebisaidi redigeerimise lõpetanud! Kuid meil on probleem - veebisait istub praegu lihtsalt GitHubi repos HTML-failina. Kuidas muuta see selliseks, et HTML-faili näidatakse kõigile, kes seda näha tahavad?

Me peame oma saiti hostima.

Mis on hostimine?
Hostimine on teie HTML-failide (ja seega ka teie veebisaidi) Interneti-ühenduse loomise protsess. Teie veebisait saab URL-i - aadressi, kuhu inimesed saavad Internetis minna, kui nad soovivad teie veebisaidile juurde pääseda.

Õnneks on GitHubil hostimisteenus nimega GitHub Pages. Jätkame meie HTML-faili hostimist!

Klõpsake nuppu Seaded kuskil lehe ülaservas ja keskel.

Kas leiate nuppu Seadistused? See on lähedal nupule Vaata.

Te peaksite nägema allolevaga sarnast lehte. Kerige alla, kuni kuvatakse „GitHubi lehed”.

Repo seadete leht.

Klõpsake allikaväljal nuppu Puudub. Peaksite nägema rippmenüüd.

GitHub Pages'i seaded - valige allikaks Master filiaal

Valige „peaharu”. Seda tehes ütlete GitHubi lehtedele, et see muudaks teie repot reaalajas veebisaidiks!

Klõpsake nuppu Salvesta. Genereeritakse URL. See on teie mobiilisaidi URL, mis sisaldab digitaalset visiitkaarti.

Klõpsake URL-il - peaksite nägema oma kontaktandmetega täidetud veebisaiti!

Voila!

6. samm: muutke VCF-i

Nüüd jätkame VCF-i muutmist.

VCF on fail, mis laaditakse alla ja salvestatakse rakendusse Kontaktid, kui keegi klõpsab veebisaidil nuppu Laadi alla.

Minge tagasi repo avalehele. Klõpsake faili user.vcf.

Peaksite jõudma VCF-i eelvaate lehele. Klõpsake redigeerimise nuppu (pliiatsiikoon lehe paremas ülanurgas).

Olen rõhutanud piirkondi, mis tuleks asendada teie kontaktteabega. Olge väga semikoolonite kustutamine ettevaatlik!

Märkus VCF-i süntaksi kohta:
Uue rea sisestamiseks peate rea lisama \ n.
Koma sisestamiseks peate rea lisama \.

Siin on väljad, mida tuleks redigeerida, ja nende tähtajad:

N: nimi
FN: täisnimi
ORG: organisatsioon
PEALKIRI: ametinimetus (\ n on uue rea süntaks)
EMAIL: e-posti aadress
TEL: mobiilinumber
item1.ADR: aadress
item2.URL: veebisaidi URL

VCF-i salvestamiseks klõpsake nupul „Muudatuste kinnitamine”!

Nüüd, kui oleme teinud 3 peamist sammu 2 - HTMLi ja VCF-i redigeerimist -, on meil vaja vaid luua QR-kood, mis juhendab kasutajaid teie veebisaidile!

6. samm: looge oma digitaalse visiitkaardi jaoks QR-kood

Minge tasuta QR-koodigeneraatori veebisaidile - kasutasin qr-code-generator.com.

Kui olete kohal, sisestage oma GitHubi lehtede veebisaidi URL ja genereerige QR-kood. Ärge unustage seda alla laadida ja salvestada!

Genereerige oma GitHubi lehtede URL-ile spetsiifiline QR-kood

Kui teil on QR-kood, skannige see oma mobiiltelefoni abil. Teie digitaalne visiitkaart on nüüd kasutamiseks valmis! Tehke sellest foto või laadige see oma telefoni / arvutisse alla.

Palju õnne, teil on oma digitaalne visiitkaart! See polnud nii hull, kas see oli? Kui leidsite selle nii lihtsa, võiksite proovida tutvuda järgmise valikulise sammuga allpool: edasine kohandamine!

7. samm (valikuline): tehke see ise!

See on teie jaoks, kui soovite minna kaugemale ja oma digitaalset visiitkaarti veelgi kohandada. Veebisaidi värvi saate muuta, tehes samas repos faili main.css muudatusi - ma jätan teile selle välja mõelda ja CSS-i dokumentatsiooni otsimiseks peaksite kasutama Google'i.

Mis on CSS?
Kaskaadlaadistiilid ehk CSS on keel, mis määrab teie HTML-i veebisaidi väljanägemise.
Siin on lõbus analoogia. Kui veebisait oli inimene, siis HTML on inimese skeleti struktuur ja CSS on inimese nahk ja juuksed.

Ainult selleks, et anda teile aimu, mida saab teha: Olen teinud mõned ülaltoodud digitaalse visiitkaardi kujunduse variatsioonid, kasutades kujundustööriista Figma.

Figma veebisaidi alternatiivsed kujundused

Lõpetavad mõtted

Nüüd, kui olete oma digitaalse visiitkaardi nii kerge vaevaga üles töötanud ja kutsun teid üles proovima ette kujutada, mida saaksite veel samade tööriistade abil ehitada!

Täname, et andsite selle juhendaja torke alla! Loodan, et teile meeldis õppematerjali läbimine ja saite isikupärastatud digitaalse visiitkaardi loomisest sama palju osa kui mina!

Kui teil on kommentaare või küsimusi, palun jätke mulle teade! See on minu esimene kord, kui kirjutate õpetust ja ootan huviga, mida te poisid arvate!