Izrada web sučelja: Gdje započeti

Oglas

Više od opeke i maltera, računalni kod i pikseli temelj su ekonomije 21. stoljeća. Ako ste ikada u pregledniku ikada pogledali "Izvor stranice" ili "Alati za razvojne programere", vjerojatno ste naišli na nered teksta i pitali se kako to funkcionira na web stranici.

Web programeri pozivaju Graphical User janterface (GUI) zajedno front-end web stranice, za razliku od stražnjeg dijela. Prednji dio je ono što korisnik može manipulirati, poduzeti nešto i koristiti na drugi način. Podloga se može smatrati infrastrukturom koja sadrži i podržava sve informacije i zadatke koje podrazumijeva prednji dio.

Ovaj članak govori o prednjem dijelu. Iscrtat ćemo teritorij kako biste mogli razumjeti razlike i mogućnosti koje čine "front-end" ono jest, i pokazati vam kako započeti smisla i koristiti alate web programera za stvaranje privlačnih i interaktivnih weba stranica.

Web dizajn nasuprot Front-End razvoju

U velikim organizacijama dizajn i razvoj su zadaci koje rade timovi profesionalaca s različitim setovima vještina. Dizajneri bi stvorili specifičan vizualni i interaktivni dizajn; napredni programeri bi ga implementirali.

Za pojedinca, međutim, nema razloga da ograničavate svoje istraživanje: samo zato što ste zainteresirani za razvoj, ne znači da nemate viziju dizajna i obrnuto. Skromna količina znanja o osnovnim web tehnologijama ili načelima dizajna može vam se pokazati vrlo korisnom u vašoj karijeri ili poslu.

Prednji razvoj je i više i manje kodiranje. Više zato što je više od pola dizajna u svom razmišljanju: mnogo je koncepata izvučeno iz svijeta proizvodnje tiska. Manje jer zato što koristi računalni kôd, taj kôd je raznolikost koja je manje složena, praštajuća i zahtijeva manje temeljno znanje programiranja nego ostale jezike web programiranja (od kojih se mnogi mogu naći u pozadini) Koji programski jezik za naučiti - web programiranjeDanas ćemo pogledati različite jezike web programiranja koji pokreću Internet. Ovo je četvrti dio u seriji za početnike programiranja. U prvom dijelu smo naučili osnovne ... Čitaj više .

Prednji kraj weba: oznake, tablice stilova i programski jezici

Većina web stranica izrađene su s triom tehnologija: jezikom za označavanje hiperteksta (HTML), kaskadnim tablicama stilova (CSS) i JavaScriptom (JS):

• Jezici za označavanje kao što je HTML označi dokument sa oznake. Oznake razlikuju semantički sadržaj i strukturu dokumenta. Strukturirani dokumenti mogu biti stil.
• CSS je a stilski jezik i potomak uputa u stilu ispisa do sastavljača stranica (koji stvara konačnu sliku za ispis za tiskaru); na internetu, CSS diktira prezentaciju sadržaja poput tipografije i izgleda općenito, kao i postavljanje grafike.
• JavaScript je, za razliku od prethodna dva, a programski jezik. JS upravlja interakcijom i korisničkim unosom i fokusiran je na događaje koje korisnik proizvodi. Da biste malo više ispunili sliku, suprotno paradigmi utemeljenoj na događajima je ona u kojoj se programiranje izvršava bez obzira na unos korisnika.

HTML

Prošlo je više od dvadeset godina, a osnovna svrha HTML-a ostaje ista: odvojiti tekst koji je namijenjen čitatelju od strukture potrebne za raščlanjivanje dokumenta.

Zašto vam treba

Zašto je HTML još uvijek važan? Jednostavno rečeno, u HTML-u se nalazi semantičko značenje vašeg sadržaja. To je potrebno za čitače strojeva poput pauka tražilice i čitača zaslona (radi pristupačnosti). S vremenom je važnost odvajanja semantičkog od strukturnog od onoga što je strukturno s vremenom rasla, a ne smanjivala. Najnovija inačica HTML (5) uvela je oznake poput

,

Anatomija HTML elementa

HTML elementi su u najmanju ruku parovi otvaranje i zatvaranje oznaka, svaka oznaka u prilogu , takva oznaka stavka, ispod cijan. Elementi mogu potrajati atributi, kao što je niže u magenti, kao što je "klasa", zbog čega bi element bio član grupe na koju HTML i JS mogu utjecati. stil atribut, čiji je sadržaj napisan crvenom bojom ispod, zapravo je način stvaranja jednokratnog CSS pravila upravo za taj element. (CSS je najbolje napisati na razini web mjesta ili stranice, kao što ćemo raspraviti u nastavku.)

Rezultat ovog markiranja:

Običan tekst odlomka ovdje.

Dodatni kredit (napredni)

Svi programeri opsjednuti su brzinom izvršenja. U tu svrhu optimizirat će jezike za brzinu u pisanju i stvaranju čitljivih linija. Ovo se zove sintaktički šećerni premaz. HTML zajednica uložila je nekoliko ovih napora.

Zašto koristiti prečac usmjeren na razvojnog programera kad ste, pretpostavljam, novak? Stvaranjem stvari jednostavnijim označavanjem možete se usredotočiti na namjeru, a ne na izraz, istodobno provjeravajući standardni standard. Izvorne datoteke koje generirate u pojednostavljenom obilježavanju sastavit će se u važeći HTML ili će prevoditelj pogriješiti pogrešku na određenom broju retka. Možda vam se čini da je to mnogo poučnije od lova kroz "juhu s pločicama" za nogom koji nedostaje ugao. Svaki od njih zahtijeva posrednički dio softvera kako bi ih prekompolirao u HTML. (To je ekstra kredit, na kraju krajeva.)

• Haml (HTML jezik za označavanje apstrakcije) | zahtijeva Rubin (o čemu smo prije zamišljeno pisali 3 interaktivna, zabavna, slobodna načina za početak učenja jezika programiranjaRuby je ekspresivan, skriptni jezik na visokoj razini. Na webu se koristi uglavnom kao dio okvira za razvoj web stranica Ruby on Rails, ali i samostalno. Ako vas zanima što Ruby (ne ... Čitaj više ) sastaviti
• Jade [Neispravan URL uklonjen] | zahtijeva Node.js (ovdje ćete naći uvod Što je Čvor. JS i zašto bih se trebao brinuti? [Web Development]JavaScript je samo programski jezik na strani klijenta koji se izvodi u pregledniku, zar ne? Ne više. Node.js je način pokretanja JavaScripta na poslužitelju; ali tako je i mnogo više. Ako... Čitaj više ) sastaviti
• vitak | Zahtijeva sastavljanje Ruby (kao gore)

CSS

CSS omogućuje semantički sadržaj i prezentaciju dokumenata odvojeno smjestiti, čineći stilske značajke poput izgleda, boja i tipografije prenosive i primjenjive na različite dokumente. Kad su sadržaj i vizualni dizajn odvojeni, programer postiže veću fleksibilnost i dosljednost u vizualnom dizajnu.

Zašto vam treba

Neuredne web stranice izgledaju strašno i neprivlačno. Iako su možda čitljivi, CSS je okosnica hijerarhije vizualnih informacija zbog izgleda koji omogućuje. Na primjer, donja slika djelomično ilustrira trenutni gornji navigacijski izbornik makeuseof.com, bez primjene CSS-a.

Primijetite da je osim tipografije i boja, neosigurani izbornik okomit jer je to zadani stil preglednika. Malo je vjerojatno da želite ponovo stvoriti internet iz 1990. godine, pa ćete htjeti zdravu i stalnu dozu znanja o CSS-u doista biti kompetentna. Uz to, s porastom uređaja različitih veličina i povezanih uređaja poput iPhona, tableta i slično, jedan od najvažnijih vještina postao je "responzivni dizajn" ili web stranice koje se prilagođavaju različitim ekranima veličina. Sve se to postiže putem CSS-a.

Anatomija CSS pravila

CSS pravila pišu se na jednom od tri mjesta: a) unutar unutar elementa, b) stvaranjem a

U idealnom slučaju stilovi su napisani u zasebnim listovima stilova na koje se može pozivati ​​više web stranica. Koristeći isti skup pravila, autori mogu uštedjeti vrijeme i stvoriti vizualnu prezentaciju s više reda i dosljednosti. (Inline stilovi ne mogu vam pomoći u formiranju temelja stila web stranice ili čak na cijeloj stranici - zato ih je najbolje koristiti za zadovoljavanje specifičnih potreba.)

CSS pravila započinju s selektor, zeleno napisano ispod. U ovom slučaju je izbornik za pravilo p, za stavak: pravilo se odnosi na elemente stavka. Pravilo je, za razliku od, priloženo u {curly braces} . U ovom slučaju pravilo čini pisač za tekst odlomka normalno.

CSS pravila mogu biti složenija i složenija nego što to uvod dopušta. Zato možete, s obzirom na vrijeme provedeno, očekivati CSS će savladati mnogo više vremena negoli HTML.

Dodatni kredit (napredni)

Slično kao i HTML, CSS ima svoje optimizacije za one koji žele postići više, brže.

• SAS (i SCSS) | Zahtijeva Ruby, kao gore
• Manje | Zahtijeva Node.js, kao gore

JavaScript

Kad mnogi ljudi razmišljaju o kodiranju, to smatraju instrukcijom računala kako dačini nešto. To je zadatak programskog jezika, naš konačni dodatak jednadžbi.

Programirani jezici obično se klasificiraju prema stupnju apstrakcije koju koriste u svojoj semantika, jezicima predaka, njihovom jeziku paradigme, i njihovi tipkati discipline. JavaScript prkosi jednostavnoj klasifikaciji jer je proširena u toliko okvira, da odgovara tako različitim ciljevima. To je fleksibilna, nejasno izvedena, iz porodice C, multi-paradigma, lagano tipizirani hibridni kameleon, koji se igra sopijom s konceptima kodiranja. To je ili sjajan primjer jezika opće namjene ili vrlo loš primjer mnogih različitih vrsta jezika.

Zašto vam treba

Zašto učiti JavaScript? Kao što moj kolega ističe, JavaScript ima svoje prvake i protivnike 6 najlakših jezika za programiranje za učenje za početnikeNaučiti programirati znači pronalaženje pravog jezika jednako koliko i postupak edifikacije. Slijedi prvih šest najlakših programskih jezika za početnike. Čitaj više posebno u slučaju njegove prikladnosti za učenike koji prvi put polaze. to je možda najpopularniji programski jezik današnjice. Iako ne daje jake temelje za razumijevanje ostatka kodirajućeg kraljevstva, postoji dobar argument za učenje JS-a zajedno sa Ruby-om ili PHP-om.

Međutim, vanilija JS ne ide jako daleko - okviri su odgovorni za današnje web stranice.

Popularni okviri

• Kutni, Googleov JS okvir za web aplikacije poput GMaila i ostalih.
• jQuery Izrada Interneta interaktivna: uvod u jQueryjQuery je biblioteka skripta na strani klijenta koju koristi gotovo svaka moderna web stranica - to čini web stranice interaktivnim. To nije jedina Javascript knjižnica, ali je najrazvijenija, najviše podržana i najčešće korištena ... Čitaj više , već pokriva MUO ovdje Izrada Interneta interaktivna: uvod u jQueryjQuery je biblioteka skripta na strani klijenta koju koristi gotovo svaka moderna web stranica - to čini web stranice interaktivnim. To nije jedina Javascript knjižnica, ali je najrazvijenija, najviše podržana i najčešće korištena ... Čitaj više , koji omogućuje WordPress između ostalih aplikacija.
• Reagirati, koju su sagradili Facebook inženjerski legioni, napravljen je za stvaranje korisničkih sučelja.

Dodatni kredit (napredni)

Javascript palimpsest prirode moli za neko nametanje strukture. Svaki donji šećerni kaput ide nekim postupkom prema provedbi

• CoffeeScript | Zahtijeva Node.js, kao gore
• kucana kopija | Zahtijeva Node.js, kao gore

Gdje započeti učenje

Budući da se napredni razvoj uvelike smatra ključnom radnom vještinom za sve radnike koji rade sa znanjem, naći ćete mnoga polazišta u obliku tečajeva za e-učenje. Slijedi popis odabranih stranica za naše čitatelje:

• Coursera (Plaćeno)
  Coursera prikuplja internetske tečajeve sa sveučilišta i institucija u kojima se uče. Raspon cijena pada za 50-250 USD za tečaj, ali oni oglašavaju visok standard znanja i ishode visoke kompetencije.
• Dash Generalne skupštine (Besplatno)
  Generalna skupština je popularna opcija za plaćeno stručno obrazovanje. Dash je njihova besplatna ponuda i pokriva HTML / CSS / JS.
• MakeUseOf.com - Paket naučiti kodirati 2017 (Plaćeno, priključak)
  Doživotni pristup 10 klasa koje pokrivaju spektar razvoja web-mjesta za prednje i zadnje strane za samo 20 USD.
• Mozilla Developer Network (Besplatno)
  MDN je autoritativan, ali sudjeluje u stilu dokumentacije više od instrukcija u stilu učionice ili u gamificiranim internetskim ponudama.
• Kućica na drvetu (Plaćeno)
  Još jedna internetska ponuda, i to jedna plaća mjesečno, a ne kurs. Ovo dolazi po preporuci Karen X Cheng u svom virusnom mediju "Kako dobiti posao dizajnera bez pohađanja škole dizajna.”
• Vodiči za web dizajn Envato Tuts + (Mješoviti besplatni i plaćeni sadržaj jednake kvalitete)
  Niz jednokratnih članaka i višedijelnih serija visokokvalitetnih, specifičnih i ciljanih informacija, obično o jednoj temi.

Početak rada

Jedna od prednosti koje front-end razvoj ima za početnike jest ta što ga, uglavnom, ne treba skupi vlasnički alati: najosnovniji alat naprednog razvoja je uređivač teksta uparen s vašim preglednikom izbor:

• Urednici teksta vole Gitov uređivač teksta Atoma, Uzvišeni tekst (plaćeno) ili VS kod tvrtke Microsoft
• Preglednici kao što su Mozilla Firefox ili Google Chrome
• Korisno je, ali izvan okvira ovog članka, imati hosting ili lokalni poslužitelj (kao što je XAMPP) postaviti.

Prikladnije, ako su manje trajne, alternative su web-uređivači uživo poput:

• Codepen.io
• JSbin.com

Kratki rezovi

HTML strukture su, uglavnom, dobro razumljive i nisu baš dostojne ponovnog klađenja s velikom učestalošću. Za CSS prosječna stranica stila web stranice dugačka je tisuće redaka, a možete se kladiti da je nekoliko modernih pisanih isključivo ručno. A što se tiče interaktivnosti, pojavili su se određeni standardi. Zahvaljujući tim činjenicama, ustanovit ćete da mnogi napredni programeri koriste unaprijed izgrađene okvire kao okosnicu, a zatim podešavaju, uklanjaju ili zamjenjuju prema potrebi.

• bootstrap, koju je izvorno razvio Twitter, sadrži HTML, CSS i JS predloške koji se danas široko mogu naći na webu. Bootstrap je gotovo a francuski jezik u početku web razvoj.
• Temelj računa se kao najnapredniji okvir na svijetu, a izgrađen je s naglaskom na malu veličinu i brzinu.

Referentni materijal

• A List Apart - Publikacija s A-popisa, "Za ljude koji čine web stranice"
• Mogu li koristiti - "Podrška tablice za HTML5, CSS3 itd."
• CSS-trikovi - sastajalište za CSS zajednicu i izvor znanja o najboljim praksama i kompatibilnosti
• Standardna dokumentacija HTML-a za život - "Životni standard - izdanje za web programere"
• HTML5 Molim te - "Koristite novo i sjajno odgovorno"
• Smashing Magazine - "Za profesionalne web dizajnere i programere"

Zaključak

Nadamo se da ste uživali u ovoj orijentaciji prema svijetu front-end-a. Kao što vidite, prednji razvoj je polje koje je ispunjeno puno mogućnosti, ali ima mnogo ulaznih točaka. Učenje će vam dodati impresivnu vještinu u vaš portfelj i omogućiti vam da napravite sljedeći korak u karijeri ili prijelaz na potpuno novi.

programeri: Što se nalazi u vašem snopu?

početnici: Što bismo još mogli uključiti da vas orijentiramo?