Ustvarjanje spletnih vmesnikov: kje začeti

Oglas

Temelj gospodarstva 21. stoletja so več kot opečna in malta, računalniška koda in slikovne pike. Če ste v svojem brskalniku kdaj pogledali »Vir strani« ali »Orodja za razvijalce«, ste verjetno naleteli na zmedo besedila in se spraševali, kako to spletno stran deluje.

Spletni razvijalci pokličejo Grafično User jaznterface (GUI) skupaj sprednji del spletne strani v nasprotju s hrbtnim delom. Sprednji del je tisto, kar lahko uporabnik manipulira, ukrepa z njim in drugače uporablja. Na zadnji del je mogoče razmišljati kot o infrastrukturi, ki vsebuje in podpira vse informacije in naloge, ki jih nalaga prednji del.

Ta članek govori o sprednjem delu. Omogočili bomo zemljevid ozemlja, tako da boste lahko razumeli razlike in zmogljivosti, zaradi katerih je prednja stran in pokazati, kako začeti smisel - in uporabljati - orodja spletnega razvijalca za ustvarjanje privlačnega in interaktivnega spleta strani.

Spletno oblikovanje v primerjavi s Front-End razvojem

V velikih organizacijah so oblikovanje in razvoj naloge, ki jih izvajajo skupine strokovnjakov z različnimi nabori spretnosti. Oblikovalci bi ustvarili poseben vizualni in interaktivni dizajn; front-end razvijalci bi ga izvajali.

Za posameznika pa ni razloga, da bi se omejil na raziskovanje: samo zato, ker vas zanima razvoj, ne pomeni, da nimate vizije za oblikovanje in obratno. Zmerna količina znanja o osnovnih spletnih tehnologijah ali načelih oblikovanja lahko izkaže za zelo koristno v vaši karieri ali poslu.

Procesni razvoj je tako bolj kot manj aktivnost kodiranja. Bolj zato, ker je v svojem razmišljanju več kot polovica oblikovanja: veliko konceptov je črpljenih iz sveta tiskarne. Manj, ker ta koda uporablja računalniško kodo, ki je manj zapletena, odpuščajoča in zahteva manj temeljnega znanja programiranja kot drugi jeziki za programiranje (od katerih jih je veliko na zadnji strani) Kateri programski jezik za učenje - spletno programiranjeDanes si bomo ogledali različne jezike spletnega programiranja, ki napajajo internet. To je četrti del v seriji programiranja za začetnike. V prvem delu smo se naučili osnovnega ... Preberi več .

Front-End v spletu: oznaka, tabela sloga in jeziki za programiranje

Večina spletnih strani je sestavljena s trio tehnologij: jezik označevanja hiperteksta (HTML), kaskadni listi slog (CSS) in JavaScript (JS):

• Označevalni jeziki kot je HTML označi dokument z oznake. Oznake razmejujejo pomensko vsebino in strukturo dokumenta. Strukturirani dokumenti so lahko oblikovan.
• CSS je a jezik stilskega lista in potomec navodil v slogu tiska do skladatelja strani (ki ustvari končno sliko za tiskanje tiskarne); Na spletu CSS narekuje predstavitev vsebine, kot sta tipografija in postavitev na splošno, pa tudi postavljanje grafike.
• JavaScript je v nasprotju s prejšnjima dvema programski jezik. JS obravnava interakcijo in vnos uporabnika ter je osredotočen na dogodke, ki jih uporabnik ustvari. Če želite nekoliko več zapolniti sliko, je nasprotno od dogodkov usmerjene paradigme tista, pri kateri se programiranje izvaja ne glede na vnos uporabnika.

HTML

Minilo je že dvajset let, osnovni namen HTML-ja pa ostaja isti: ločiti besedilo, ki je namenjeno bralcu, od strukture, ki je potrebna za razčlenitev dokumenta.

Zakaj ga potrebuješ

Zakaj je HTML še vedno pomemben? Preprosto povedano, v tem HTML je skrivnostni pomen vaše vsebine. To je potrebno za bralnike strojev, kot so pajki iskalnikov in bralniki zaslonov (za dostopnost). Sčasoma je pomembnost ločevanja tistega, kar je semantično, in strukturnega, sčasoma naraščala, ne pa manjšala. Najnovejša različica HTML (5) je predstavila oznake, kot so

,

Anatomija elementa HTML

Elementi HTML so vsaj pari odpiranje in zapiranje oznak, pri čemer je vsaka oznaka priložena , kot oznaka odstavka, spodaj v ciano. Elementi lahko prevzamejo lastnosti, kot je spodaj v magenti, na primer "razred", zaradi katerega bi element postal član skupine, na katero lahko vplivata HTML in JS. The slog atribut, katerega vsebina je spodaj napisana z rdečo barvo, je dejansko način ustvarjanja enkratnega pravila CSS samo za ta element. (CSS je najbolje napisati na ravni spletnega mesta ali strani, kot bomo razpravljali spodaj.)

Rezultat te oznake:

Tu je navadno besedilo odstavka.

Dodatni kredit (napredno)

Razvijalci vseh vrst so obsedeni s hitrostjo izvedbe. V ta namen bodo jezike optimizirali za hitro pisanje in ustvarjanje berljivih vrstic. To se imenuje skladenjski sladkorni premaz. Skupnost HTML je spodbudila nekaj teh prizadevanj.

Zakaj uporabljati bližnjico, ki je usmerjena v razvijalce, ko ste domnevni novinec? Z ustvarjanjem stvari v preprostejšem označevanju se lahko osredotočite na namen, ne na izraz, hkrati pa preverite v primerjavi s standardom. Izvorne datoteke, ki jih ustvarite v poenostavljeni označbi, bodo sestavljene v veljaven HTML ali pa bo prevajalnik vrgel napako na določeno številko vrstice. Morda se vam zdi to bolj poučno kot lov na "jušno oznako" za manjkajoč kotni oklepaj. Vsak od njih potrebuje vmesni del programske opreme, da jih lahko prevede v HTML. (Je dodatno kredit, navsezadnje.)

• Haml (HTML jezik označevanja abstrakcije) | Zahteva Ruby (o čemer smo premišljeno pisali že prej 3 Interaktivni, zabavni in brezplačni načini za začetek učenja programskega jezika RubyRuby je izrazit, scenaristski jezik na visoki ravni. V spletu se uporablja predvsem kot del okvira za razvoj spletnih kamer Ruby on Rails, lahko pa tudi samostojno. Če vas zanima kaj Ruby (ne ... Preberi več ) sestaviti
• Jade [zlomljen URL odstranjen] | Zahteva Node.js (tu boste našli uvod Kaj je vozlišče JS in zakaj bi me skrbel? [Spletni razvoj]JavaScript je samo programski jezik na strani odjemalca, ki deluje v brskalniku, kajne? Ne več. Node.js je način zagon JavaScript na strežniku; vendar je tudi toliko več. Če ... Preberi več ) sestaviti
• Tanek | Potrebuje Ruby (kot zgoraj)

CSS

CSS omogoča, da se semantične vsebine in predstavitev dokumentov ločeno loti, tako da so slogovne lastnosti, kot so postavitev, barve in tipografija, prenosljive in uporabne za različne dokumente. Ko sta vsebina in vizualno oblikovanje ločena, razvijalec pridobi večjo prožnost in doslednost pri vizualnem oblikovanju.

Zakaj ga potrebuješ

Neopažena spletna mesta izgledajo grozno in neprivlačno. Čeprav je morda berljiv, je CSS temelj postavitve hierarhije vizualnih informacij zaradi postavitve, ki jo omogoča. Spodnja slika na primer deloma prikazuje trenutni zgornji navigacijski meni makeuseof.com, brez uporabljenih CSS.

Upoštevajte, da je poleg tipografije in barve neokrnjeni meni navpičen, ker je to privzeti slog brskalnika. Malo je verjetno, da bi želeli znova ustvariti internet iz leta 1990, zato boste želeli, da bi zdravi in ​​stalni odmerek znanja CSS resnično kompetenten. Poleg tega se s porastom različnih velikosti in povezanih naprav, kot so iPhoni, tablice in drugo, pojavlja eno od najpomembnejših veščin je postal "Odziven dizajn" ali spletne strani, ki se prilagajajo različnim zaslonom velikosti. Vse to dosežemo s pomočjo CSS-a.

Anatomija pravila CSS

Pravila CSS so zapisana na enem od treh mest: a) vstavljen v element, b) z ustvarjanjem

V idealnem primeru so slogi zapisani v ločenih slogih, na katere se lahko sklicuje več spletnih strani. Z istim naborom pravil lahko avtorji prihranijo čas in ustvarijo vizualno predstavitev z več reda in doslednosti. (Spletni slogi vam ne morejo pomagati oblikovati osnove sloga spletnega mesta ali celo celotne strani - zato jih je najbolje uporabiti redko za zadovoljevanje posebnih potreb.)

Pravila CSS se začnejo z a izbirnik, zeleno napisano spodaj. V tem primeru je izbirnik za pravilo str, za odstavek: pravilo velja za elemente odstavka. Pravilo je v nasprotju z: priloženo v {curly braces} . V tem primeru je zaradi pravila besedilo besedila za besedilo odstavka normalno.

Pravila CSS lahko postanejo bolj zapletena in zapletena, kot to omogoča ta uvod. Zato lahko glede na čas, ki ga imate, pričakujete CSS bo obvladal veliko več časa kot HTML.

Dodatni kredit (napredno)

Tako kot HTML ima tudi CSS svoje optimizacije za tiste, ki želijo doseči več, hitreje.

• SAS (in SCSS) | Zahteva Ruby, kot zgoraj
• Manj | Zahteva Node.js, kot zgoraj

JavaScript

Ko si mnogi mislijo o kodiranju, to mislijo kot poučevanje računalnika kakostori nekaj. To je naloga programskega jezika, naš končni dodatek k enačbi sprednjega dela.

Programske jezike običajno razvrščamo po stopnji abstrakcije, ki jo uporabljajo v svoji semantiki, jezikih prednikov in njihovem paradigme, in njihove tipkanje disciplin. JavaScript kljubuje preprosti klasifikaciji, ker je razširjena na toliko okvirov, da ustreza tako različnim namenom. Gre za fleksibilno, nejasno izpeljano družino iz skupine C, več paradigme, ohlapno hibridnega kameleona, ki igra magnovo s koncepti kodiranja. Je odličen primer zelo splošnega jezika ali pa zelo slab primer mnogih različnih vrst jezikov.

Zakaj ga potrebuješ

Zakaj se učiti JavaScript? Kot poudarja moj kolega, ima JavaScript svoje prvake in zastrupitve 6 najlažjih jezikov za programiranje za začetnikeNaučiti se programirati je iskanje pravega jezika prav toliko, kolikor gre za postopek edifikacije. Tu je prvih šest najlažjih programskih jezikov za začetnike. Preberi več zlasti v primeru njegove primernosti za prvošolce. je mogoče the danes najbolj priljubljen programski jezik. Čeprav ne daje močnih temeljev za razumevanje preostalega kodirnega kraljestva, je za učenje JS poleg Rubyja ali PHP-ja treba dober argument.

Kljub temu vanilija JS ne gre zelo daleč - za današnje spletne strani so odgovorni okviri.

Priljubljeni okviri

• Kotni, Googlov okvir JS za spletne aplikacije, kot je GMail in ostale.
• JQuery Izdelava spletnega interaktivnega: uvod v jQueryjQuery je skriptna knjižnica na strani odjemalca, ki jo uporablja skoraj vsako sodobno spletno mesto - spletna mesta naredijo interaktivne. To ni edina Javascript knjižnica, ampak je najbolj razvita, najbolj podprta in najbolj razširjena ... Preberi več , tukaj že zajema MUO Izdelava spletnega interaktivnega: uvod v jQueryjQuery je skriptna knjižnica na strani odjemalca, ki jo uporablja skoraj vsako sodobno spletno mesto - spletna mesta naredijo interaktivne. To ni edina Javascript knjižnica, ampak je najbolj razvita, najbolj podprta in najbolj razširjena ... Preberi več , ki omogoča WordPress med drugimi aplikacijami.
• Reagirajte, ki so ga zgradile Facebook inženirske legije, je narejen za ustvarjanje uporabniških vmesnikov.

Dodatni kredit (napredno)

Javascript palimpsest narave prosi za nekaj vsiljevanja strukture. Vsak od spodnjih sladkornih plaščev gre nekaj po poti

• CoffeeScript | Zahteva Node.js, kot zgoraj
• Tipkovnica | Zahteva Node.js, kot zgoraj

Kje začeti učiti

Ker se razvoj naprednega šteje za ključno delovno znanje za delavce z znanjem vseh vrst, boste v obliki e-učnih tečajev našli veliko izhodišč. Tu je seznam, ki smo ga pripravili za naše bralce:

• Coursera (Plačano)
  Coursera zbira spletne tečaje univerz in učnih ustanov. Razpon cen za tečaj pade od 50 do 250 USD, vendar oglašujejo visok standard znanja in rezultate visoko usposobljenosti.
• Generalna skupščina Dash (Prost)
  Generalna skupščina je priljubljena možnost za plačano strokovno izobraževanje. Dash je njihova brezplačna ponudba in zajema HTML / CSS / JS.
• MakeUseOf.com - Sveženj Learn to Code 2017 (Plačano, vtič)
  Doživljenjski dostop do 10 razredov, ki pokrivajo paleto naprednega in zadnjega spletnega razvoja, za samo 20 USD.
• Mozilla Developer Network (Prost)
  MDN je verodostojen, vendar sodeluje v slogu dokumentacije bolj kot pouk v slogu v učilnici ali v gamificirani ponudbi samo prek spleta.
• Hiša na drevesu (Plačano)
  Še ena spletna ponudba, ta se plačuje na mesec namesto tečaja. To je priporočilo Karen X Cheng v svojem viralnem mediju "Kako se zaposliti kot oblikovalec, ne da bi šel v šolo za oblikovanje.”
• Vadnice za spletni dizajn avtorja Envato Tuts + (Mešanica brezplačne in plačane vsebine enake kakovosti)
  Nabor enkratnih člankov in večserijskih visokokakovostnih, specifičnih in ciljno usmerjenih informacij, običajno na eno temo.

Uvod

Ena od prednosti, ki jo ima začetni razvoj za začetnike, je, da večinoma ne potrebuje draga lastniška orodja: najosnovnejše orodje naprednega razvoja je urejevalnik besedil, ki je v kombinaciji z vašim brskalnikom izbira:

• Urejevalniki besedil radi Git's Atom urejevalnik besedil, Vzvišeno besedilo (plačano) ali VS kodo Microsofta
• Brskalniki, kot so Mozilla Firefox ali Google Chrome
• Koristno je, vendar zunaj obsega tega članka, imeti gostovanje ali lokalni strežnik (npr XAMPP) nastaviti.

Primernejše, če so manj trajne, so alternativni spletni urejevalniki v živo, kot so:

• Codepen.io
• JSbin.com

Kratki rezi

Strukture HTML so večinoma dobro razumljive in niso ravno vredne ponovnega tipkanja z veliko frekvenco. Za CSS je povprečni slog strani na tisočih vrstic dolg in lahko stavite, da je nekaj sodobnih napisanih izključno ročno. In glede interaktivnosti so se pojavili nekateri standardi. Na podlagi teh dejstev boste ugotovili, da mnogi razvijalci vnaprej uporabljajo vnaprej izdelane okvire kot hrbtenico in jih nato po potrebi prilagodite, odstranite ali nadomestite.

• Škornji za prtljage, ki ga je prvotno razvil Twitter, vsebuje predloge HTML, CSS in JS, ki jih danes pogosto najdemo na spletu. Bootstrap je skoraj a lingua franca v začetku spletnega razvoja.
• Fundacija se ponaša kot najnaprednejši okvir na svetu in je zgrajen s poudarkom na majhnosti in hitrosti.

Referenčno gradivo

• Seznam apartmaja - publikacija na seznamu A, "Za ljudi, ki izdelujejo spletne strani"
• Lahko uporabim - »Podporne tabele za HTML5, CSS3 itd.«
• CSS-triki - vozlišče za skupnost CSS in vodnjak znanja o najboljših praksah in združljivosti
• Dokumentacija standardov HTML Living - "Življenjski standard - izdaja za spletne razvijalce"
• HTML5 Prosim - "Uporabite novo in sijoče odgovorno"
• Smashing Magazine - »Za profesionalne spletne oblikovalce in razvijalce«

Zaključek

Upamo, da ste uživali v tej usmerjenosti v svet front-enda. Kot vidite, je razvoj v ospredju polje, ki ima veliko možnosti, vendar ima veliko vstopnih točk. Če ga učite, bo v vaš portfelj dodal impresivno spretnost in vam omogočil, da naredite naslednji korak v svoji karieri ali prehod na povsem nov.

Razvijalci: Kaj je v sprednjem naboju?

Začetniki: Kaj bi še lahko vključili, da bi vas usmerili?