Hack your Life: Kako napraviti svoju digitalnu posjetnicu

[Ažuriranje 29. rujna 2018 .: Liwei i ja izdali smo https://firstnamebasis.app/ - besplatnu uslugu za generiranje vaše osobne digitalne posjetnice]

Posjetnice su prilično bol za nošenje.

Nikad ne znate koliko ponijeti sa sastankom ili nekim radnim događajem. A tu je i onaj nespretan trenutak kada ste shvatili da nemate posjetnica.

Unatoč svim žurbama, posjetnice su i dalje odličan alat za razmjenu podataka o kontaktima. Ali možemo li to učiniti bez potrebe za fizičkim posjetnicama?

Skenirajte i spremite

Što ako je sve bilo potrebno za razmjenu podataka o kontaktima bilo je jednostavno skeniranje i spremanje?

Zamislite ovo: pokušavate dobiti informacije o kontaktima od osobe A. Osoba A prikazuje QR kôd na njihovom telefonu, a sve što trebate učiniti je skenirati njihov telefon pomoću iPhone kamere. Njihovi podaci za kontakt automatski se prikazuju na vašem telefonu i pritisnete gumb za spremanje. Voila, sad imate njihove kontakt podatke na popisu kontakata.

Ako se trenutno nalazite na radnoj površini / prijenosnom računalu, možda biste trebali zgrabiti telefon da biste ovo iskoristili.

QR kod moje digitalne posjetnicePodaci za kontakt prikazani na mobilnoj web stranici (lijevo) i VCF u aplikaciji Kontakti nakon preuzimanja (desno)

Sva polja mobilne web stranice interaktivna su. Ako dodirnete polje kontakt broja, automatski biste birali prikazani broj (nije moj stvarni broj mobilnog telefona).

Nakon klika na gumb za preuzimanje, datoteka virtualnog kontakta (VCF) odmah će se preuzeti i sinkronizirati u vašu aplikaciju Kontakti.

Jednostavno, zar ne?

Vodič: 7 jednostavnih koraka

Sada morate kreirati svoju digitalnu posjetnicu! Ne morate imati iskustva s kodiranjem da biste to učinili - objasnit ću vam što točno raditi. Slobodno ostavljajte komentare ako se zaglavite!

1. korak: Kreirajte GitHub račun (ako ga već nemate)

Započnimo stvaranjem GitHub računa i prijavom. Većina našeg posla obavit ćemo u GitHubu.

https://github.com/join

Što je GitHub?
GitHub je platforma koju tradicionalno softverski inženjeri koriste za pohranjivanje svog koda i praćenje promjena koje su u toku tijekom vremena (a.k.a. kontrola verzija).
Ali u naše svrhe, samo tretiramo GitHub kao gigantski Wordov dokument koji pohranjuje sve naše kontakt podatke. Ovdje ćemo unositi i promjene u kodu.

Korak 2: Fork iz mojeg spremišta koda (repo)

U ovom koraku napravit ćemo vilicu - kopiju - mojeg repoa. Želimo to učiniti tako da moje podatke o kontaktima možete zamijeniti vlastitim.

Što je repo?
Repozitorij ili skraćeno repo mjesto je na kojem se nalaze datoteke. Zamislite to kao kantu ili mapu u kojoj se nalazi hrpa dokumenata s kodom.
Što je vilica?
Fork je kopija spremišta. Forkiranje spremišta omogućuje vam da slobodno eksperimentirate s promjenama bez utjecaja na izvorni projekt.

Otvorite prozor preglednika i idite na sljedeći url (provjerite jeste li se prijavili na svoj GitHub račun): https://github.com/prestonlimlianjie/digital-namecard

GitHub repo koji sadrži sve relevantne datoteke.

Kliknite gumb "Vilica" u gornjem desnom kutu stranice. Pričekajte nekoliko trenutaka!

Forking u tijeku! Volim kako se na slici nalazi doslovna vilica.

Tada biste trebali vidjeti identičan repo - ali umjesto da u gornjem lijevom kutu imate naziv prestonlimlianjie / digital-namecard, repo će sada biti [your_username] / digital-namecard. U mom slučaju to je preston-test / digitalna-razglednica. Sada ste stvorili vilicu koja pripada samo vama!

Vaš novoobnovljeni repo!

Čestitamo, stvorili ste vilicu od mog repo-a! Sada imamo samo posljednji pripremni korak prije nego što skočimo u šifru.

Korak 3: Prenesite sliku svog profila i logotip tvrtke

Morat ćete pripremiti sliku profila i logotip tvrtke - ili u .png, ili .jpg ili .svg.

Kliknite gumb "Prenesi datoteke" u gornjem desnom kutu.

Gumb

Doći ćete na zaslon za prijenos. Povucite i ispustite sliku profila i logotip tvrtke!

Stranica za prijenos.

Moja slika profila je user.png, a logotip moje tvrtke icon.png.

Nakon što se datoteke prenesu na stranicu, kliknite gumb "Obredi promjene" da biste ih spremili u spremište.

Ne zaboravite spremiti!

Sada biste trebali vidjeti svoje datoteke na glavnoj stranici repoa.

user.png i icon.png sada se mogu naći u repo.

I sada smo spremni zaroniti u šifru. No, prije nego što to učinimo, uzmimo za kratak opis načina funkcioniranja digitalne posjetnice. Postoje 3 glavne komponente:

  1. QR kod koji se jednom skenira dovodi korisnika na web mjesto vaše digitalne posjetnice
  2. Glavna mobilna web stranica koja prikazuje digitalnu posjetnicu s vašim kontaktnim podacima - to se uglavnom stvara pomoću HTML-a.
  3. Virtualna datoteka kontakata (VCF) koja će se preuzeti s mobilnog web mjesta i spremiti u aplikaciju Kontakti na telefonu.

Trebat ćemo promijeniti sve tri komponente kako bismo digitalnu posjetnicu učinili svojom.

No, napravimo to korak po korak - počevši od HTML-a.

4. korak: uredite HTML

Što je HTML?
HyperText Markup Language (HTML) jezik je koji je odgovoran za web stranice.
Kad za pristup web mjestu koristite preglednik (Chrome, Firefox, Safari itd.), Preglednik zapravo prima HTML - što je gomila koda. Tada preglednik čita HTML i stvara vizualno privlačne web stranice na koje smo navikli vidjeti.
Web stranica kao korisnik to vidi (lijevo) i temeljni HTML kôd (desno) koji čita preglednik kako bi stvorio verziju web stranice koja se vidi s lijeve strane.

Započnimo otvaranjem index.html u GitHub-u. To radite klikom na riječi index.html u repo.

Sada ćete vidjeti HTML datoteku u svom punom sjaju.

Ne brani se, HTML neće ugristi.

Da bismo ga ispravljali, moramo kliknuti gumb za uređivanje - onaj s ikonom olovke u gornjem lijevom kutu.

GitHub editor je spreman za upotrebu!

Nekoliko je stvari koje moramo urediti u HTML-u. Istaknuo sam područja u kodu koje biste trebali zamijeniti!

Bilješka:
Većina jezika kodiranja, uključujući HTML, prilično je specifična po pitanju sintakse. Zato se potrudite zamijeniti samo dijelove koda koje sam odredio.
Ako slučajno izbrišete jedan znak previše, imajte na umu ovo pravilo: kod djeluje poput vrata - ako nešto otvorite, morate ga zatvoriti. Na primjer, ako postoji otvorna kutna upornica <, trebala bi biti i zatvaranje>.

Slika profila (preston.jpg) i logotip (imovina / govtech-logo-blue.svg)

Zamijenite preston.jpg imenom vaše profilne slike koju želite koristiti.
Zamijenite imovinu / govtech-logo-blue.svg imenom vaše datoteke logotipa.

Lako grašak!

Naziv (Preston Lim), naziv (pridruženi softverski inženjer) i naziv tvrtke (Područje znanosti znanosti, GovTech)

Zamijenite Preston Lim svojim imenom.
Zamijenite pridruženi softver inženjer svojim nazivom.
Zamijenite Odjeljenje za znanost podataka, GovTech s imenom vaše tvrtke.

Polako čučeći uz sebe!

Sada dolazi malo lukav dio. Svaki od ovih koraka morate napraviti dva puta. Dobro obrati pozornost!

Adresa e-pošte ([email protected]), telefonski broj (+65 9123–4567), URL web stranice (tech.gov.sg) i adresa tvrtke (1 Fusionopolis, Sandcrawler, # 09–01, 135877)

Zamijenite [email protected] s adresom e-pošte. Učinite to na dva mjesta istaknuta dolje.

Učinite to dvaput!

Zamijenite +6591234567 sa svojim telefonskim brojem. Učinite to na dva mjesta istaknuta dolje. (Znam da se malo razlikuju, ali to zapravo i nije važno)

Još dvaput!

Zamijenite https://www.tech.gov.sg URL web stranice. Učinite to na dva mjesta istaknuta dolje.

Skoro tamo!

A sada obratite pozornost. Zamijenit ćemo 1 Fusionopolis, Sandcrawler, # 09–01, 135877 s adresom vaše tvrtke (ovo je druga stvar koja je istaknuta).

Prvi istaknuti blok je URL u Google Maps pretraživanju adrese vaše tvrtke. Ono što sada želite učiniti je otvoriti Google karte i upisati adresu vaše tvrtke te kopirati i zalijepiti rezultirajući URL. Zamijenite istaknuti blok koda URL-om.

Zadnji koji obećam!

Pomaknite se do dna stranice i pritisnite "Obredi promjenu"!

Yay!

Sada smo završili s uređivanjem HTML-a!

Korak 5: Stvorite svoju web stranicu pomoću GitHub Pages

Sada smo završili s uređivanjem glavne mobilne web stranice! Međutim, imamo problem - web stranica trenutno upravo sjedi u GitHub repo-u kao HTML datoteka. Kako to možemo učiniti tako da se HTML datoteka prikazuje svima koji je žele vidjeti?

Moramo ugostiti našu stranicu.

Što je hosting?
Hosting je postupak povezivanja HTML datoteka (a time i vaše web stranice) na Internet. Vaša web stranica dobiva URL - adresu na koju ljudi mogu ići putem Interneta ako žele pristupiti vašoj web lokaciji.

Srećom, GitHub ima uslugu hostinga pod nazivom GitHub Pages. Nastavimo s hostom naše HTML datoteke!

Kliknimo na gumb Postavke negdje na vrhu i u sredini stranice.

Možete li pronaći gumb Postavke? Blizu je gumba

Trebali biste vidjeti stranicu sličnu onoj prikazanoj u nastavku. Pomaknite se prema dolje dok ne vidite "GitHub stranice".

Stranica postavki vašeg repoa.

Kliknite na polje 'None' u polju Source. Trebali biste vidjeti padajući izbornik.

Postavke GitHub stranice - odaberite Glavni ogranak kao izvor

Odaberite "matična poslovnica". Pri tome poručujete GitHub stranicama da svoj repo pretvorite u web stranicu uživo!

Kliknite Spremi. URL će se generirati. Ovo je URL vašeg mobilnog web mjesta s digitalnom posjetnicom.

Kliknite URL - trebali biste vidjeti web mjesto ispunjeno vašim podacima za kontakt!

Voila!

Korak 6: Uredite VCF

Sada nastavljamo s izmjenom VCF-a.

VCF je datoteka koja se preuzima i sprema u aplikaciju Kontakti kada netko klikne gumb "Preuzmi" na web mjestu.

Vratite se na glavnu stranicu repoa. Kliknite datoteku user.vcf.

Trebali biste stići na stranicu za pregled VCF-a. Kliknite gumb za uređivanje (ikona olovke u gornjem desnom kutu stranice).

Istaknuo sam regije koje bi trebalo zamijeniti vašim kontaktnim podacima. Budite vrlo oprezni da ne brišete polukolone!

Napomena o VCF sintaksi:
Ako želite umetnuti novi redak, trebate dodati \ n u redak.
Ako želite umetnuti zarez, morate dodati \ u red.

Evo polja koja treba uređivati ​​i onoga što oni predstavljaju:

N: Ime
FN: puno ime
ORG: Organizacija
NASLOV: Naziv posla (\ n je sintaksa za novi redak)
EMAIL: Adresa e-pošte
TEL: Mobilni broj
item1.ADR: Adresa
item2.URL: URL web mjesta

Kliknite gumb "Uredi promjene" za spremanje VCF-a!

Sada kada smo završili s 3 glavna koraka - uređivanjem HTML-a i VCF-a - preostalo nam je samo stvoriti QR kod koji vaše korisnike vodi na vašu web stranicu!

Korak 6: Stvorite QR kod za svoju digitalnu posjetnicu

Idite na bilo koju besplatnu web stranicu generatora QR koda - koristio sam qr-code-generator.com.

Nakon što ste tamo, unesite URL svoje GitHub stranice i generirajte QR kôd. Ne zaboravite da ga preuzmete i spremite!

Generirajte QR kôd specifičan za vaš URL na GitHub stranicama

Sada kada imate QR kôd, skenirajte ga pomoću svog mobilnog telefona. Vaša je digitalna posjetnica sada spremna za upotrebu! Snimite fotografiju ili je preuzmite na svoj telefon / računalo.

Čestitamo, imate svoju vrlo digitalnu posjetnicu! To nije bilo tako loše? Ako vam je to lako, možda biste trebali pogledati sljedeći neobavezni korak u nastavku: daljnja prilagodba!

Korak 7 (izborno): Učinite to svojim!

Ovo je za vas ako želite prijeći dodatni kilometar i dodatno prilagoditi svoju digitalnu posjetnicu. Možete promijeniti boju web mjesta izmjenama u datoteci main.css u istom repu - ostavit ću vam da to shvatite, a vi biste trebali koristiti Google da potražite dokumentaciju za CSS.

Što je CSS?
Kaskadni listovi stilova ili CSS jezik je koji određuje kako izgleda vaša web stranica HTML.
Evo zabavne analogije. Ako je web lokacija bila ljudsko biće, HTML je skeletna struktura čovjeka, a CSS je koža i kosa ljudskog bića.

Samo da bih dobio dojam što se može učiniti: Napravio sam neke varijacije dizajna digitalnih vizitki koje vidite gore koristeći alat za dizajn nazvan Figma.

Alternativna dizajna web stranice na Figma

Zatvaranje misli

Sad kad ste postavili i pokrenuli svoju digitalnu posjetnicu tako lako, izazivam vas da zamislite što još možete napraviti s istim alatima!

Hvala što ste ovom udžbeniku stavili bod! Nadam se da ste uživali prolazeći kroz udžbenik i dobili ste potez u stvaranju personalizirane digitalne vizitke jednako kao i ja!

Ako imate komentara ili pitanja, pošaljite mi poruku! Prvi mi je put pisanje udžbenika, radujem se što čujem što mislite!