Tīmekļa saskarņu izveidošana: kur sākt

Reklāma

21. gadsimta ekonomikas pamats ir ne tikai ķieģeļu un javas javas kods, bet arī pikseļi. Ja kādreiz esat pārlūkprogrammā apskatījis “Lapas avots” vai “Izstrādātāja rīki”, jūs, iespējams, esat saskāries ar nesakārtotu tekstu un domājāt, kā tas padara vietni darbīgu.

Web izstrādātāji zvana Grafisks User Esinterfeisi (GUI) kopīgi priekšpusē Web lapas pretstatā fona. Lietotne ir tā, ar kuru lietotājs var manipulēt, ar to rīkoties un citādi izmantot. Par aizmugurējo daļu var domāt par infrastruktūru, kas satur un atbalsta visu informāciju un uzdevumus, ko uzliek priekšējā daļa.

Šis raksts ir par front-end. Mēs izkārtosim teritoriju, lai jūs varētu iegūt izpratni par atšķirībām un iespējām, kas veido priekšplānu tas ir, un parādīs, kā sākt jēdzēt un izmantot tīmekļa izstrādātāju rīkus pievilcīga un interaktīva tīmekļa izveidošanai lapas.

Tīmekļa dizains salīdzinājumā ar priekšplāna attīstību

Lielajās organizācijās dizains un izstrāde ir uzdevumi, ko veic profesionāļu komandas ar dažādām prasmju kopām. Dizaineri izveidos īpašu vizuālo un mijiedarbības dizainu; front-end izstrādātāji to ieviestu.

Tomēr indivīdam nav iemesla aprobežoties ar jūsu izpēti: tas, ka jūs interesē attīstība, nenozīmē, ka jums nav redzējuma par dizainu, un otrādi. Nelielais zināšanu daudzums par pamata tīmekļa tehnoloģijām vai dizaina principiem var izrādīties ļoti noderīgs jūsu karjerā vai biznesā.

Front-end izstrāde ir vairāk un mazāk kodēšanas darbība. Vairāk tāpēc, ka tā domāšanā ir vairāk nekā puse dizaina: daudzi jēdzieni ir radīti no drukāšanas pasaules. Mazāk tāpēc, ka, kamēr tas izmanto datora kodu, šis kods ir daudzveidīgs, kas ir mazāk sarežģīts, vairāk piedodošs un prasa mazāk pamatzināšanu par programmēšanu nekā citas tīmekļa programmēšanas valodas (no kurām daudzas var atrast fona attēlos) Kura programmēšanas valoda jāapgūst - Web programmēšanaŠodien mēs apskatīsim dažādās tīmekļa programmēšanas valodas, kas darbina internetu. Šī ir ceturtā daļa iesācēju programmēšanas sērijā. 1. daļā mēs iemācījāmies ... Lasīt vairāk .

Tīmekļa priekšpuse: iezīmēšana, stila lapa un programmēšanas valodas

Lielākā daļa tīmekļa lapu ir veidotas, izmantojot trīs tehnoloģiju tehnoloģijas: hiperteksta iezīmēšanas valodu (HTML), kaskādes stila lapas (CSS) un JavaScript (JS):

• Iezīmēšanas valodas piemēram, HTML atzīmējiet dokumentu ar tagi. Tagi norobežo semantisko saturu un strukturē dokumentu. Strukturēti dokumenti var būt veidoti.
• CSS ir a stila lapas valoda un drukāšanas stila norāžu pēcnācējs pie lapas kompozitora (kurš izveido galīgo izdrukājamo attēlu tipogrāfijai); tīmeklī CSS diktē satura noformējumu, piemēram, tipogrāfiju un izkārtojumu, kā arī ievieto grafiku.
• JavaScript, atšķirībā no diviem iepriekšējiem, ir a programmēšanas valoda. JS apstrādā mijiedarbību un lietotāja ievadi, un ir vērsta uz notikumiem, kurus lietotājs rada. Lai mazliet vairāk aizpildītu attēlu, notikumu vadītas paradigmas pretstats ir tāds, kurā programmēšana tiek veikta neatkarīgi no lietotāja ievades.

HTML

Ir pagājuši vairāk nekā divdesmit gadi, un HTML pamatmērķis nemainās: nodalīt lasītājam paredzēto tekstu no struktūras, kas nepieciešama dokumenta parsēšanai.

Kāpēc jums tas ir vajadzīgs

Kāpēc HTML joprojām ir svarīgs? Vienkārši sakot, HTML ir tā satura semantiskā nozīme. Tas ir nepieciešams mašīnu lasītājiem, piemēram, meklētājprogrammu zirnekļiem un ekrāna lasītājiem (piekļuves nodrošināšanai). Laika gaitā semantiskā un strukturālā atšķiršanas nozīme laika gaitā ir pieaugusi, nevis mazinājusies. Jaunākā HTML versija (5) ieviesa tādus tagus kā

,

HTML elementa anatomija

HTML elementi ir vismaz tagu atvēršana un aizvēršana, katra atzīme ir ievietota , piemēram, rindkopas tags, kas atrodas zemāk ciānveidā. Elementi var paņemt atribūti, kā norādīts zemāk magenta valodā, piemēram, “klase”, kas elementu padarītu par grupas locekli, kuru var ietekmēt HTML un JS. stils atribūts, kura saturs ir uzrakstīts sarkanā krāsā zemāk, faktiski ir veids, kā izveidot vienotu CSS kārtulu tieši šim elementam. (CSS vislabāk ir uzrakstīts vietnes vai lapas līmenī, kā mēs apspriedīsim turpmāk.)

Šīs iezīmēšanas rezultāts:

Šeit vienkārša rindkopas teksts.

Papildus kredīts (uzlabots)

Visu veidu izstrādātāji ir apsēsti ar izpildes ātrumu. Šajā nolūkā viņi optimizēs pašas valodas, lai ātrāk rakstītu un izveidotu lasāmās līnijas. To sauc sintaktiskais cukura pārklājums. HTML kopiena ir sagatavojusi dažus no šiem centieniem.

Kāpēc izmantot uz izstrādātāju orientētu saīsni, ja, domājams, esat iesācējs? Izveidojot lietas vienkāršākā marķējumā, jūs varat koncentrēties uz nodomu, nevis uz izteiksmi, vienlaikus pārbaudot, vai tas ir standartizēts. Avoti faili, kurus ģenerējat vienkāršotajā iezīmēšanā, tiks vai nu apkopoti derīgā HTML formātā, vai arī kompilators parādīs kļūdu noteiktā rindas numurā. Jums varētu šķist, ka tas ir daudz pamācošāk nekā meklējot trūkstošo leņķa kronšteinu “tagu zupa”. Katram no tiem ir nepieciešams starpnieks programmatūras vienums, lai tos pārkompilētu HTML. (Tas ir papildus galu galā kredīts.)

• Hamls (HTML abstrakcijas iezīmēšanas valoda) Nepieciešams Rubīns (par ko mēs iepriekš esam pārdomāti rakstījuši 3 interaktīvi, jautri, bezmaksas veidi, kā sākt mācīties Ruby programmēšanas valoduRubīns ir izteiksmīga, ļoti augsta līmeņa skriptu valoda. Tas tiek izmantots tīmeklī galvenokārt kā daļa no tīmekļa vietnes Ruby on Rails attīstības sistēmas, kā arī patstāvīgs. Ja jums ir interese par to, kas ir Rubīns (ne ... Lasīt vairāk ) apkopot
• Nefrīts [noņemts sabojāts URL] | Nepieciešams Node.js (šeit atradīsit ievadu Kas ir mezgls. JS un kāpēc man vajadzētu rūpēties? [Web izstrāde]JavaScript ir tikai klienta puses programmēšanas valoda, kas darbojas pārlūkprogrammā, vai ne? Vairs ne. Node.js ir JavaScript palaišanas veids serverī; bet tas ir arī daudz vairāk. Ja ... Lasīt vairāk ) apkopot
• Tievs | Apkopošanai nepieciešams Rubīns (kā minēts iepriekš)

CSS

CSS ļauj semantisko saturu un dokumentu noformējumu izvietot atsevišķi, padarot stilistiskās iezīmes, piemēram, izkārtojumu, krāsas un tipogrāfiju pārnēsājamu un piemērojamu dažādiem dokumentiem. Ja saturs un vizuālais dizains ir nodalīti, izstrādātājs iegūst lielāku elastību un konsekvenci vizuālajā dizainā.

Kāpēc jums tas ir vajadzīgs

Neizveidotas vietnes izskatās drausmīgas un nepievilcīgas. Lai arī tie varētu būt lasāmi, CSS ir vizuālās informācijas hierarhijas stūrakmens, jo to atļauj izkārtojums. Piemēram, zemāk redzamais attēls daļēji ilustrē pašreizējo navigācijas izvēlni makeuseof.com, nelietojot nevienu CSS.

Ņemiet vērā, ka nesvītrotā izvēlne, izņemot tipogrāfiju un krāsu, ir vertikāla, jo tas ir pārlūka noklusējuma stils. Maz ticams, ka vēlaties atjaunot 1990. gada internetu, tāpēc jūs vēlēsities, lai veselīgas un nepārtrauktas zināšanas CSS būtu patiesi kompetentas. Turklāt, pieaugot dažāda lieluma un savienotām ierīcēm, piemēram, iPhone, planšetdatoriem un citām par vissvarīgākajām prasmēm ir kļuvis “Responsive Design” jeb tīmekļa lapas, kas pielāgojas dažādiem ekrāniem izmēri. Tas viss tiek paveikts, izmantojot CSS.

CSS noteikuma anatomija

CSS noteikumi tiek uzrakstīti vienā no trim vietām: a) elementa iekšienē, b) izveidojot a

Ideālā gadījumā stili tiek uzrakstīti atsevišķās stilu lapās, uz kurām var atsaukties vairākas tīmekļa lapas. Izmantojot to pašu noteikumu kopumu, autori var ietaupīt laiku un izveidot vizuālu noformējumu ar lielāku kārtību un konsekvenci. (Iekļautie stili nevar palīdzēt veidot vietnes vai pat visas lapas stila pamatus - tāpēc tos vislabāk izmanto taupīgi, lai apmierinātu īpašas vajadzības.)

CSS noteikumi sākas ar selektors, kas uzrakstīts zaļā krāsā zemāk. Šajā gadījumā ir izvēles rīks lpp, rindkopai: noteikums attiecas uz rindkopas elementiem. Noteikums ir ievietots {cirtainās lencēm} pretstatā . Šajā gadījumā noteikums padara rindkopas teksta burtu normālu.

CSS noteikumi var kļūt sarežģītāki un sarežģītāki, nekā pieļauj šis ievads. Tāpēc, ņemot vērā atvēlēto laiku, jūs varat sagaidīt CSS apgūšana prasīs daudz ilgāku laiku nekā HTML.

Papildus kredīts (uzlabots)

Līdzīgi kā HTML, CSS ir arī optimizācijas tiem, kas vēlas sasniegt vairāk un ātrāk.

• SASS (un SCSS) | Nepieciešams Ruby, tāpat kā iepriekš
• Mazāk | Nepieciešams Node.js, tāpat kā iepriekš

JavaScript

Kad daudzi cilvēki domā par kodēšanu, viņi to domā kā datora instrukciju kādarīt kaut kas. Tas ir programmēšanas valodas uzdevums, kas ir pēdējais papildinājums pie priekšējā vienādojuma.

Programmēšanas valodas parasti klasificē pēc abstrakcijas līmeņa, ko viņi izmanto semantikā, viņu senču valodās, viņu valodās paradigmas, un viņu mašīnrakstīšanas disciplīnas. JavaScript nav vienkārša klasifikācija, jo tā ir paplašināta tik daudzos ietvaros, lai ietilptu tik daudziem dažādiem mērķiem. Tā ir elastīga, neskaidri atvasināta no C-ģimenes, daudzparadigma, brīvi rakstīts hibrīds hameleons, kas spēlē burvju zīmi ar kodēšanas koncepcijām. Tas ir vai nu lielisks ļoti vispārējas nozīmes valodas piemērs, vai ļoti slikts daudzu dažādu valodu valodu piemērs.

Kāpēc jums tas ir vajadzīgs

Kāpēc mācīties JavaScript? Kā uzsver mans kolēģis, JavaScript ir savi čempioni un iznīcinātāji 6 vienkāršākās programmēšanas valodas, kas jāapgūst iesācējiemProgrammēšanas iemācīšanās ir pareizās valodas atrašana, tāpat kā rediģēšanas process. Šeit ir sešas labākās vienkāršās programmēšanas valodas iesācējiem. Lasīt vairāk , jo īpaši attiecībā uz tā piemērotību pirmreizējiem izglītojamajiem. Tas ir iespējams mūsdienu populārākā programmēšanas valoda. Lai arī tas neliecina par labu pārējās kodēšanas valstības izpratnei, ir labs arguments, lai mācītos JS līdzās Ruby vai PHP.

Tomēr vaniļas JS neiet ļoti tālu - par šodienas tīmekļa vietnēm ir atbildīgas struktūras.

Tautas ietvari

• Leņķiskais Google JS ietvars tīmekļa lietojumprogrammām, piemēram, GMail un pārējiem.
• JQuery Web padarīšana par interaktīvu: ievads jQueryjQuery ir klienta puses skriptu bibliotēka, kuru izmanto gandrīz katra modernā vietne - tā padara vietnes interaktīvas. Tā nav vienīgā Javascript bibliotēka, taču tā ir visattīstītākā, visvairāk atbalstītā un visplašāk izmantotā ... Lasīt vairāk , jau šeit ir iekļauts MUO Web padarīšana par interaktīvu: ievads jQueryjQuery ir klienta puses skriptu bibliotēka, kuru izmanto gandrīz katra modernā vietne - tā padara vietnes interaktīvas. Tā nav vienīgā Javascript bibliotēka, taču tā ir visattīstītākā, visvairāk atbalstītā un visplašāk izmantotā ... Lasīt vairāk , kas nodrošina WordPress starp citām lietojumprogrammām.
• Reaģēt, kuru būvējuši Facebook inženieru leģioni, ir paredzēts lietotāja saskarņu izveidošanai.

Papildus kredīts (uzlabots)

JavaScript palimpsest daba prasa kaut kādu struktūras uzlikšanu. Katrs no zemāk redzamajiem cukura pārklājumiem ir daļa no ieviešanas veida

• CoffeeScript | Nepieciešams Node.js, tāpat kā iepriekš
• Mašīnraksts | Nepieciešams Node.js, tāpat kā iepriekš

Kur sākt mācīties

Tā kā priekšlaicīga attīstība mūsdienās tiek plaši uzskatīta par būtisku darba prasmi visu veidu zināšanu darbiniekiem, e-apmācības kursu veidā jūs atradīsit daudz sākumpunktu. Šeit ir kuratoru saraksts, ko mēs izveidojām mūsu lasītājiem:

• Kursa (Apmaksāts)
  Coursera vāc tiešsaistes kursus no universitātēm un mācību iestādēm. Cenu diapazons ir no 50 līdz 250 USD par kursu, bet tie reklamē augstu zināšanu līmeni un augstu kompetences rezultātu.
• Ģenerālās asamblejas domuzīme (Bezmaksas)
  Ģenerālā asambleja ir populāra iespēja apmaksātai profesionālai izglītībai. Dash ir viņu bezmaksas piedāvājums, un tas attiecas uz HTML / CSS / JS.
• MakeUseOf.com - pakete “Iemācieties kodēt 2017. gadu” (Apmaksāts, kontaktdakša)
  Mūža pieeja 10 klasēm, kas aptver priekšējo un aizmugurējo tīmekļa attīstību, tikai par 20 USD.
• Izstrādātāju tīkls Mozilla (Bezmaksas)
  MDN ir autoritatīvs raksturs, taču tas vairāk attiecas uz dokumentācijas stilu, nevis uz klases stila norādījumiem vai tiešsaistes spēles piedāvājumiem, kas tiek atskaņoti tikai tiešsaistē.
• Koku māja (Apmaksāts)
  Vēl viens tiešsaistes piedāvājums, tas maksā mēnesī, nevis kursu. Tas nāk pēc Karen X Cheng ieteikuma viņas vīrusa vidējā postā “Kā iegūt dizainera darbu, neapmeklējot dizaina skolu.”
• Envato Tuts + tīmekļa dizaina konsultācijas (Sajaukts bezmaksas un maksas saturs ar vienādu kvalitāti)
  Plašs vienreizēju rakstu un daudzdaļīgu augstas kvalitātes, specifiskas un mērķtiecīgas informācijas sēriju klāsts, kas parasti attiecas uz vienu tēmu.

Darba sākšana

Viena no priekšrocībām, ko iesācējiem nodrošina priekšlaicīga attīstība, ir tāda, ka lielākoties tā nav nepieciešama dārgi patentēti rīki: visvienkāršākais interfeisa izstrādes rīks ir teksta redaktors, kas savienots pārī ar jūsu pārlūkprogrammu izvēle:

• Teksta redaktoriem patīk Git’s Atom teksta redaktors, Cildens teksts (apmaksāts) vai VS kods, ko izstrādājusi Microsoft
• Pārlūkprogrammas, piemēram, Mozilla Firefox vai Google Chrome
• Ir noderīgi, taču ārpus šī raksta darbības jomas, ja ir mitināšanas vai lokāls serveris (piemēram, XAMPP) uzstādīt.

Ērtākas, ja ne tik pastāvīgas, alternatīvas ir tīmekļa tiešraides redaktori, piemēram:

• Codepen.io
• JSbin.com

Īsi griezumi

HTML struktūras lielākoties ir labi saprotamas, un nav precīzi vērts tās atkārtot. CSS vidējā vietnes stila lapa ir tūkstošiem rindu gara, un jūs varat derēt, ka tikai dažas mūsdienu stila lapas ir rakstītas tikai ar roku. Un attiecībā uz interaktivitāti ir parādījušies noteikti standarti. Ņemot vērā šos faktus, jūs atradīsit, ka daudzi priekšplāna izstrādātāji izmanto iepriekš sagatavotus ietvarus kā mugurkaulu un pēc tam kniebj, noņem vai aizvieto pēc nepieciešamības.

• Bootstrap, kuru sākotnēji izstrādāja Twitter, satur HTML, CSS un JS veidnes, kuras mūsdienās ir plaši atrodamas tīmeklī. Bootstrap ir gandrīz a lingua franca Web attīstības sākumā.
• Fonds rēķina sevi kā visattīstītāko sistēmu pasaulē, un tā ir veidota ar uzsvaru uz mazu izmēru un ātrumu.

References materiāls

• Bez saraksta - A saraksta publikācija “Cilvēkiem, kas veido vietnes”
• Vai es varu izmantot - “HTML5, CSS3 utt. Atbalsta tabulas”
• CSS-triki - CSS kopienas centrs un zināšanas par labāko praksi un savietojamību
• HTML Living Standard dokumentācija - “Dzīves standarts - izdevums tīmekļa izstrādātājam”
• HTML5, lūdzu - “Atbildīgi izmantojiet jauno un spīdīgo”
• Smashing Magazine - “Profesionāliem tīmekļa dizaineriem un izstrādātājiem”

Secinājums

Mēs ceram, ka jums patika šī orientācija uz priekšējās pasaules pasauli. Kā redzat, priekšējās daļas izstrāde ir lauks, kas piepildīts ar daudz iespējām, bet kam ir daudz ieejas punktu. Apgūstot to, jūsu portfelis papildinās iespaidīgu prasmi un ļaus jums spert nākamo soli karjerā vai pāreju uz pilnīgi jaunu.

Izstrādātāji: Kas ir jūsu priekšējā blokā?

Iesācējiem: Ko vēl mēs varētu iekļaut, lai jūs orientētu?