Hakkeroita elämääsi: Kuinka tehdä oma digitaalinen käyntikortti

[Päivitys 29. syyskuuta 2018: Liwei ja minä julkaissimme https://firstnamebasis.app/ - ilmaisen palvelun henkilökohtaisen digitaalisen käyntikorttisi luomiseen]

Käyntikortit ovat melko tuskallisia kantaa.

Et koskaan tiedä kuinka monta kokousta tai työhön liittyvää tapahtumaa voi seurata. Ja siellä on hankala hetki kädenpuristuksen keskellä, kun olet huomannut, että sinulla ei ole käyntikortteja.

Kaikesta kohtelusta huolimatta käyntikortit ovat edelleen hieno työkalu yhteystietojen vaihtamiseen. Mutta voimmeko tehdä tämän ilman fyysisiä käyntikortteja?

Skannaa ja tallenna

Entä jos yhteystietojen vaihtamiseen tarvittiin vain yksinkertainen tarkistus ja tallennus?

Kuvittele tätä: Yrität saada yhteystietoja henkilöltä A. Henkilö A näyttää QR-koodin puhelimessaan, ja sinun tarvitsee vain skannata hänen puhelimessa iPhone-kameralla. Heidän yhteystietonsa näkyvät automaattisesti puhelimessasi ja napsautat Tallenna-painiketta. Voila, nyt heidän yhteystiedot ovat yhteystietoluettelossasi.

Jos olet tällä hetkellä työpöydälläsi / kannettavassasi, kannattaa ehkä tarttua puhelimeesi, jotta saat tämän liikkeelle.

QR-koodi digitaaliselle käyntikortilleniYhteystiedot, jotka näkyvät mobiilisivustolla (vasemmalla) ja VCF: ssä Yhteystiedot-sovelluksessa latauksen jälkeen (oikealla)

Kaikki mobiilisivuston kentät ovat vuorovaikutteisia. Jos napautat yhteyshenkilön numerokenttää, valitset automaattisesti näytetyn numeron (ei todellisen matkapuhelinnumeroni).

Kun olet napsauttanut latauspainiketta, virtuaalinen yhteystiedosto (VCF) ladataan ja synkronoidaan Yhteystiedot-sovellukseen heti.

Tarpeeksi yksinkertainen, eikö niin?

Opetusohjelma: 7 helppoa vaihetta

Nyt voit luoda oman digitaalisen käyntikortin! Sinulla ei tarvitse olla koodauskokemusta tämän tekemiseksi - selitän mitä tarkalleen tehdä. Voit vapaasti jättää kommentteja, jos joudut kiinni!

Vaihe 1: Luo GitHub-tili (jos sinulla ei vielä ole)

Aloitetaan luomalla GitHub-tili ja kirjautumalla sisään. Suurin osa työstämme tehdään GitHubissa.

https://github.com/join

Mikä on GitHub?
GitHub on alusta, jota ohjelmistosuunnittelijat käyttävät perinteisesti koodinsa tallentamiseen ja ajan myötä tehtyjen muutosten seuraamiseen (mm. Versionhallinta).
Mutta käsittelemme GitHubia vain tarkoitukseksi jättimäisenä Word-asiakirjana, joka tallentaa kaikki yhteystietomme. Tässä teemme myös muutoksia koodiin.

Vaihe 2: Haarukka koodivarastostani (repo)

Tässä vaiheessa aiomme tehdä haarukan - kopion - repostani. Haluamme tehdä tämän, jotta voit korvata yhteystietoni omilla.

Mikä on repo?
Varasto tai lyhyt repo on paikka, jossa tiedostoja pidetään. Kuvittele se ämpäriä tai kansiota, joka sisältää joukon koodidokumentteja.
Mikä on haarukka?
Haarukka on kopio arkistosta. Arkiston haarukoinnin avulla voit kokeilla muutoksia vapaasti vaikuttamatta alkuperäiseen projektiin.

Avaa selainikkuna ja siirry seuraavaan URL-osoitteeseen (varmista, että olet kirjautunut GitHub-tiliisi): https://github.com/prestonlimlianjie/digital-namecard

GitHub-repo, joka sisältää kaikki asiaankuuluvat tiedostot.

Napsauta sivun oikeassa yläkulmassa olevaa Haarukka-painiketta. Odota hetki!

Haarukka käynnissä! Rakastan kuinka kuvassa on kirjaimellinen haarukka.

Sinun pitäisi sitten nähdä identtinen repo - mutta sen sijaan, että prestonlimlianjie / digital-namecard-nimi olisi vasemmassa yläkulmassa, repo on nyt [käyttäjän_nimesi] / digital-namecard. Minun tapauksessani se on preston-test / digital-namecard. Olet nyt luonut haarukan, joka kuuluu vain sinulle!

Äskettäin haaroitettu repo!

Onnea, olet luonut haarukan repostani! Nyt meillä on vain yksi viimeinen valmisteluvaihe ennen kuin hyppäämme koodiin.

Vaihe 3: Lataa profiilikuvasi ja yrityksesi logo

Sinun on valmistettava profiilikuva ja yrityksen logo - joko .png- tai .jpg- tai .svg-muodossa.

Napsauta oikeassa yläkulmassa olevaa Lataa tiedostot -painiketta.

Lataa tiedostot -painike löytyy näytön vasemmasta yläkulmasta.

Saaput latausnäyttöön. Vedä ja pudota profiilikuvasi ja yrityksesi logo!

Lataa sivu.

Profiilikuvani on user.png ja yrityksen logo on icon.png.

Kun tiedostot on ladattu sivulle, tallenna tiedostot arkistoon napsauttamalla Sitoa muutokset -painiketta.

Älä unohda säästää!

Sinun pitäisi nähdä tiedostosi repon pääsivulla.

user.png ja icon.png löytyvät nyt reposta.

Ja nyt olemme valmiita sukeltamaan koodiin. Mutta ennen kuin teemme niin, käydään lyhyt kiertotie digitaalisen käyntikortin toimintaan. Pääkomponentteja on 3:

  1. QR-koodi, joka skannattuaan vie käyttäjän digitaaliseen käyntikorttisivustollesi
  2. Tärkein mobiilisivusto, jolla näytetään digitaalinen käyntikortti yhteystietojesi kanssa - tämä luodaan pääasiassa HTML: n avulla.
  3. Virtuaalinen yhteystiedosto (VCF), joka ladataan mobiilisivustolta ja tallennetaan puhelimen Yhteystiedot-sovellukseen.

Meidän on tehtävä muutokset kaikkiin kolmeen komponenttiin, jotta digitaalinen käyntikortti olisi oma.

Otetaan kuitenkin yksi askel kerrallaan - alkaen HTML: stä.

Vaihe 4: Muokkaa HTML-koodia

Mikä on HTML?
HyperText Markup Language (HTML) on kieli, joka vastaa verkkosivustoista.
Kun käytät selainta (Chrome, Firefox, Safari jne.) Päästäksesi verkkosivustoon, selain todella vastaanottaa HTML - joka on joukko koodia. Sitten selain lukee HTML: n ja luo visuaalisesti miellyttävät verkkosivustot, joita olemme tottuneet näkemään.
Verkkosivut, kun käyttäjä näkee sen (vasemmalla) ja sen alla olevan HTML-koodin (oikealla), jonka selain lukee, luodakseen verkkosivustosta sen version, joka näkyy vasemmalla.

Aloitetaan avaamalla index.html GitHubissa. Voit tehdä tämän napsauttamalla repossa sanoja index.html.

Näet nyt HTML-tiedoston täydessä kunniassaan.

Älä huijaa, HTML ei pure.

Jotta voimme muokata sitä, meidän on napsautettava muokkauspainiketta - sitä, jonka kynäkuvake on vasemmassa yläkulmassa.

GitHub-editori on käyttövalmis!

HTML-muodossa on joitain asioita, joita meidän on muokattava. Olen korostanut koodin alueet, jotka sinun pitäisi korvata!

merkintä:
Useimmat koodauskielet, mukaan lukien HTML, ovat melko erityisiä syntaksissa. Joten yritä parasta korvata vain määrittämäni koodin osat.
Jos poistat vahingossa yhden merkin liian monta, pidä tämä sääntö mielessä: koodi toimii kuin ovi - jos avaat jotain, sinun on suljettava se. Esimerkiksi, jos siellä oli aukko kulmatuki <, siellä pitäisi olla myös sulkeva aukko>.

Profiilikuva (preston.jpg) ja logo (omaisuus / govtech-logo-blue.svg)

Korvaa preston.jpg haluamasi profiilikuvasi nimellä.
Korvaa omaisuus / govtech-logo-blue.svg logotiedoston nimellä.

Helppo nakki!

Nimi (Preston Lim), nimi (Associate Software Engineer) ja yrityksen nimi (Data Science Division, GovTech)

Korvaa Preston Lim nimellä.
Korvaa Associate Software Engineer nimikkeelläsi.
Korvaa Data Science Division, GovTech yrityksesi nimellä.

Chugging hitaasti!

Nyt tulee hieman hankala osa. Jokainen näistä vaiheista on tehtävä kahdesti. Ole tarkkana!

Sähköpostiosoite ([email protected]), puhelinnumero (+65 9123–4567), verkkosivuston URL (tech.gov.sg) ja yrityksen osoite (1 Fusionopolis, Sandcrawler, # 09–01, 135877)

Korvaa [email protected] sähköpostiosoitteellasi. Tee tämä kahdessa alla korostetussa paikassa.

Tee se kahdesti!

Korvaa +6591234567 puhelinnumerollasi. Tee tämä kahdessa alla korostetussa paikassa. (Tiedän, että ne ovat hiukan erilaisia, mutta sillä ei ole väliä)

Kaksi kertaa uudelleen!

Korvaa https://www.tech.gov.sg verkkosivustosi URL-osoitteella. Tee tämä kahdessa alla korostetussa paikassa.

Melkein siellä!

Ja nyt kiinnitä erityistä huomiota. Korvaamme 1 Fusionopolis, Sandcrawler, # 09–01, 135877 yrityksesi osoitteella (tämä on toinen asia, joka korostetaan).

Ensimmäinen korostettu lohko on URL-osoite Google Maps -hakuun yrityksesi osoitteesta. Nyt haluat siirtyä Google Mapsiin, kirjoittaa yrityksesi osoite ja kopioida ja liittää tuloksena oleva URL-osoite. Korvaa korostettu koodilohko URL-osoitteella.

Viimeinen lupaan!

Vieritä sivun alaosaan ja paina 'Sitoa muutos'!

Jee!

Nyt HTML: n muokkaaminen on valmis!

Vaihe 5: Luo verkkosivustosi GitHub-sivuilla

Olemme nyt valmistaneet tärkeimmän mobiilisivuston! Meillä on kuitenkin ongelma - verkkosivusto istuu tällä hetkellä vain GitHubin repo-tiedostossa HTML-tiedostona. Kuinka voimme tehdä siitä sellaisen, että HTML-tiedosto näytetään kaikille, jotka haluavat nähdä sen?

Meidän on isäntä sivustollemme.

Mitä isännöi?
Hosting on prosessi, jossa HTML-tiedostot (ja siten verkkosivustosi) yhdistetään Internetiin. Verkkosivustosi saa URL-osoitteen - osoitteen, johon ihmiset voivat mennä Internetissä, jos he haluavat käyttää verkkosivustoasi.

Onneksi GitHubilla on isännöintipalvelu nimeltään GitHub Pages. Jatkamme HTML-tiedostomme isännöimistä!

Napsautetaan Asetukset-painiketta jossain sivun ylä- ja keskellä.

Löydätkö Asetukset-painikkeen? Se on lähellä Katso-painiketta.

Sinun pitäisi nähdä alla olevan kuvan kaltainen sivu. Vieritä alaspäin, kunnes näet GitHub-sivut.

Repo-asetusten sivu.

Napsauta Lähde-kentässä Ei mitään -painiketta. Sinun pitäisi nähdä avattava valikko.

GitHub Pages -asetukset - valitse lähdeksi Päähaaro

Valitse 'päähaara'. Kun teet niin, käsket GitHub-sivuja muuttamaan repot live-verkkosivustoiksi!

Napsauta Tallenna. Luodaan URL-osoite. Tämä on mobiilisivustosi URL-osoite, joka sisältää digitaalisen käyntikortin.

Napsauta URL-osoitetta - sinun pitäisi nähdä verkkosivusto, joka on täynnä yhteystietosi!

Voila!

Vaihe 6: Muokkaa VCF: tä

Nyt jatkamme VCF: n muuttamista.

VCF on tiedosto, joka ladataan ja tallennetaan Yhteystiedot-sovellukseen, kun joku napsauttaa verkkosivun Lataa-painiketta.

Palaa takaisin repon pääsivulle. Napsauta user.vcf-tiedostoa.

Sinun tulisi saapua VCF: n esikatselusivulle. Napsauta muokkauspainiketta (kynäkuvake sivun oikeassa yläkulmassa).

Olen korostanut alueita, jotka olisi korvattava yhteystietosi. Ole varovainen, ettet poista puolipisteitä!

Huomautus VCF-syntaksista:
Jos haluat lisätä uuden rivin, sinun on lisättävä \ n riville.
Jos haluat lisätä pilkun, sinun on lisättävä \ riville.

Tässä on kentät, joita tulisi muokata, ja mitä ne edustavat:

N: Nimi
FN: Koko nimi
ORG: Organisaatio
NIMI: Työnimike (\ n on uuden rivin syntaksi)
SÄHKÖPOSTI: Sähköpostiosoite
TEL: matkapuhelinnumero
item1.ADR: Osoite
item2.URL: Verkkosivuston URL-osoite

Napsauta 'Sijoita muutokset' -painiketta tallentaaksesi VCF: n!

Nyt kun olemme suorittaneet kaksi 3: sta päävaiheesta - HTML: n ja VCF: n muokkaaminen - meillä on jäljellä vain QR-koodi, joka ohjaa käyttäjiä verkkosivustollesi!

Vaihe 6: Luo QR-koodi digitaaliselle käyntikortillesi

Mene mihin tahansa ilmaiseen QR-koodigeneraattorisivustoon - käytin qr-code-generator.com-sivua.

Kun olet siellä, kirjoita GitHub-sivujen verkkosivustosi URL-osoite ja luo QR-koodi. Muista ladata se ja tallentaa se!

Luo GitHub-sivujen URL-osoitteellesi erityinen QR-koodi

Nyt kun sinulla on QR-koodi, anna se skannata matkapuhelimella. Digitaalinen käyntikorttisi on nyt käyttövalmis! Ota valokuva siitä tai lataa se puhelimeesi / tietokoneeseen.

Onnittelut, sinulla on oma digitaalinen käyntikorttisi! Eikä se ollut niin paha? Jos havaitsit niin helpon, kannattaa ehkä katsoa seuraavaa valinnaista vaihetta alla: jatka mukauttamista!

Vaihe 7 (valinnainen): Tee siitä oma!

Tämä on sinulle, jos haluat saavuttaa ylimääräisen mailin ja mukauttaa digitaalista käyntikorttiasi edelleen. Voit muuttaa verkkosivuston väriä tekemällä muutoksia main.css-tiedostoon samassa repo-tiedostossa - annan sinun selvittää tämän, ja sinun pitäisi käyttää Googlea etsimään CSS-dokumentaatiota.

Mikä on CSS?
CSS on CSC-kieli, joka määrittää HTML-verkkosivustosi näyttämisen.
Tässä on hauska analogia. Jos verkkosivusto oli ihminen, HTML on ihmisen luuranko ja CSS on ihon ja hiukset.

Vain antaakseni sinulle käsityksen siitä, mitä voidaan tehdä: Olen tehnyt joitain muunnelmia yllä olevasta digitaalisesta käyntikortin suunnittelusta käyttämällä Figma-nimistä työkalua.

Figman verkkosivuston vaihtoehtoiset mallit

Lopettavat ajatukset

Nyt kun olet saanut digitaalisen käyntikorttisi valmiiksi ja käynne niin vaivattomasti, haastan sinua kuvittelemaan, mitä muuta voit rakentaa samoilla työkaluilla!

Kiitos, että annoit tämän oppaan! Toivon, että nautit opetusohjelman läpikäynnistä ja sait potkut henkilökohtaisen digitaalisen käyntikortin luomisesta yhtä paljon kuin minä!

Jos sinulla on kommentteja tai kysymyksiä, lähetä minulle viesti! Se on ensimmäinen kerta, kun kirjoitan opetusohjelman, ja odotan innolla kuulevani teidän mielestänne!