Crearea de interfețe web: de unde să începeți

Publicitate

Mai mult decât cărămida și mortarul, codul computerului și pixelii sunt fundamentul economiei secolului XXI. Dacă v-ați uitat vreodată la „Sursa paginii” sau „Instrumente pentru dezvoltatori” în browserul dvs., ați întâlnit probabil o mizerie de text și v-ați întrebat cum face să funcționeze pagina web.

Dezvoltatorii web apelează Graphical User eunterfaces (GUI) colectiv în față a unei pagini web, spre deosebire de back-end. Front-end-ul este ceea ce utilizatorul poate manipula, acționa și utiliza în alt mod. Back-end-ul poate fi gândit ca infrastructura care conține și acceptă toate informațiile și sarcinile implicate de front-end.

Acest articol este despre front-end. Vom cartografia teritoriul astfel încât să puteți înțelege distincțiile și capacitățile care fac din front-end ce este și vă arată cum să începeți să aveți sens - și să folosiți - instrumentele dezvoltatorului web pentru crearea unui web atractiv și interactiv pagini.

Design web versus dezvoltare frontală

În organizațiile mari, proiectarea și dezvoltarea sunt sarcini întreprinse de echipe de profesioniști cu diferite seturi de abilități. Designerii ar crea un design vizual specific și de interacțiune; dezvoltatorii front-end o vor implementa.

Cu toate acestea, pentru o persoană, nu există niciun motiv să vă limitați explorarea: doar pentru că sunteți interesat de dezvoltare, nu înseamnă că nu aveți o viziune pentru design și invers. O cantitate modestă de cunoștințe despre tehnologiile web de bază sau principiile de proiectare se poate dovedi extrem de avantajoase în cariera sau afacerea dvs.

Dezvoltarea frontală este din ce în ce mai puțin o activitate de codificare. Mai mult pentru că are mai mult de jumătate de design în gândirea sa: multe concepte sunt trase din lumea producției de imprimare. Mai puțin deoarece, în timp ce utilizează codul computerului, codul este o varietate care este mai puțin complexă, mai iertătoare și necesită mai puține cunoștințe fundamentale despre programare decât alte limbaje de programare web (multe dintre ele putând fi găsite în back-end) Care limbaj de programare să înveți - Programare webAstăzi vom arunca o privire asupra diferitelor limbaje de programare web care alimentează Internetul. Aceasta este a patra parte dintr-o serie de programare pentru începători. În partea 1, am învățat elementele de bază ale ... Citeste mai mult .

Front-End-ul Web: Marcarea, Fișa de stil și Limbile de programare

Majoritatea paginilor web sunt construite cu un trio de tehnologii: limbaj de marcare hipertext (HTML), foi de stil în cascadă (CSS) și JavaScript (JS):

• Limbi de marcare cum ar fi marcarea HTML a unui document cu Etichete. Etichetele demarcă conținut semantic și structură documentul. Documentele structurate pot fi stil.
• CSS este a limbajul foii de stil și descendent al indicațiilor în stil de imprimare către un compozitor de pagini (care creează imaginea finală de tipărire pentru o presă); pe web, CSS dictează prezentarea de conținut precum tipografia și aspectul în general, precum și plasarea graficelor.
• JavaScript, spre deosebire de cele două precedente, este un limbaj de programare. JS gestionează interacțiunea și intrarea utilizatorului și este axat pe evenimentele pe care le produce un utilizator. Pentru a completa puțin imaginea, opusul unei paradigme bazate pe evenimente este una în care programarea se execută indiferent de intrarea utilizatorului.

HTML

Au trecut peste douăzeci de ani, iar scopul principal al HTML-ului rămâne același: a separa textul destinat unui cititor de structura necesară pentru a analiza documentul.

De ce ai nevoie

De ce este încă HTML important? Cu alte cuvinte, HTML este locul în care se află sensul semantic al conținutului tău. Acest lucru este necesar pentru cititorii de mașini, cum ar fi păianjenii pentru motoarele de căutare și cititorii de ecran (pentru accesibilitate). De-a lungul timpului, relevanța de a separa ceea ce este semantic față de ceea ce este structural a crescut mai degrabă decât a scăzut în timp. Cea mai recentă versiune de HTML (5) a introdus etichete de genul

,

Anatomia unui element HTML

Elementele HTML, cel puțin, sunt perechi de deschiderea și închiderea etichetelor, fiecare etichetă închisă în , cum ar fi eticheta de paragraf, mai jos în cyan. Elementele pot lua atribute, ca mai jos în magenta, cum ar fi o „clasă”, care ar face ca elementul să fie membru al unui grup pe care HTML și JS îl pot afecta. stil atributul, al cărui conținut este scris în roșu mai jos, este de fapt o modalitate de a crea o regulă CSS unică doar pentru acel element. (CSS este cel mai bine scris pe site sau pe pagină, după cum vom discuta mai jos.)

Rezultatul acestui marcaj:

Textul paragrafului simplu aici.

Credit suplimentar (avansat)

Dezvoltatorii de tot felul sunt obsedați de viteza de execuție. În acest scop, ei vor optimiza limbile în sine pentru a scrie rapid și a crea linii lizibile. Aceasta se numește acoperirea cu zahăr sintactică. Comunitatea HTML a produs câteva dintre aceste eforturi.

De ce să folosiți o comandă rapidă centrată pe dezvoltator atunci când sunteți, probabil, un novice? Prin crearea de lucruri într-un marcaj mai simplu, vă puteți concentra asupra intenției, nu a expresiei, validând în același timp un standard. Fișierele sursă pe care le generați în marcajul simplificat vor fi compilate în HTML valid, sau compilatorul va arunca o eroare la un număr de linie specific. S-ar putea să descoperiți că este mai instructiv decât să vânați prin „supă de etichetă” pentru un pachet de unghi lipsă. Fiecare necesită un software intermediar pentru a le transpila în HTML. (Este suplimentar credit, până la urmă.)

• Haml (Limbă de marcare a abstracției HTML) | necesită Rubin (despre care am scris cu gândire înainte 3 Moduri interactive, distractive, gratuite de a începe învățarea limbajului de programare RubyRuby este un limbaj de scripturi expresiv, la un nivel foarte înalt. Este utilizat pe Web, în ​​principal, ca parte a cadrului de dezvoltare web Ruby on Rails, dar și de sine stătător. Dacă sunteți curios despre ce este Ruby (nu ... Citeste mai mult ) a compila
• Jade [URL ruptă eliminată] | necesită Node.js (veți găsi o introducere aici Ce este Node. JS și de ce ar trebui să mă îngrijesc? [Dezvoltare web]JavaScript este doar un limbaj de programare din partea clientului care rulează în browser, nu? Nu mai. Node.js este o modalitate de a rula JavaScript pe server; dar este mult mai bine. Dacă... Citeste mai mult ) a compila
• Subţire | Necesită Ruby pentru a compila (ca mai sus)

CSS

CSS permite conținutul semantic și prezentarea documentelor să fie găzduite separat, făcând ca funcțiile stilistice precum aspectul, culorile și tipografia să fie portabile și aplicabile diferitelor documente. Când conținutul și designul vizual sunt separate, dezvoltatorul câștigă mai multă flexibilitate și coerență în designul vizual.

De ce ai nevoie

Site-urile neetilate arată groaznic și neapărat. Deși pot fi citite, CSS este piatra de temelie a ierarhiei informațiilor vizuale, datorită aspectului pe care îl permite. De exemplu, figura de mai jos ilustrează parțial meniul de navigare de top actual makeuseof.com, fără niciun CSS aplicat.

Rețineți că, în afară de tipografie și culoare, meniul nestilat este vertical, deoarece acesta este stilul implicit al browserului. Este puțin probabil să doriți să re-creați internetul din 1990, așa că veți dori ca o doză sănătoasă și continuă de cunoștințe CSS să fie cu adevărat competentă. În plus, odată cu creșterea unor dispozitive de dimensiuni diferite și conectate, cum ar fi iPhone-uri, tablete, etc. dintre cele mai importante abilități au devenit „Responsive Design” sau pagini web care se adaptează diferitelor ecrane dimensiuni. Acest lucru este realizat prin intermediul CSS.

Anatomia unei reguli CSS

Regulile CSS sunt scrise într-unul din trei locuri: a) în linie în interiorul unui element, b) prin crearea a

În mod ideal, stilurile sunt scrise în foi de stil separate pe care mai multe pagini web le pot face referiri. Folosind același set de reguli, autorii pot economisi timp și crea prezentare vizuală cu mai multă ordine și consecvență. (Stilurile în linie nu vă pot ajuta să formați baza de bază a site-ului sau chiar a paginii, de aceea sunt cel mai bine folosite pentru a răspunde nevoilor specifice).

Regulile CSS încep cu a selector, scris cu verde mai jos. În acest caz, selectorul pentru regulă este p, pentru paragraf: regula se aplică elementelor de paragraf. Regula este inclusă în {bretele}, spre deosebire de . În acest caz, regula face ca tipografia pentru textul alineatului să fie normală.

Normele CSS pot deveni mai complexe și complicate decât permite această introducere. Acesta este motivul pentru care, în termenii dedicați, vă puteți aștepta CSS va dura mult mai mult timp la master decât HTML.

Credit suplimentar (avansat)

La fel ca HTML, CSS are optimizările sale pentru cei care doresc să obțină mai mult, mai rapid.

• SASS (și SCSS) | Necesită rubin, ca mai sus
• Mai puțin | Necesită Node.js, ca mai sus

JavaScript

Atunci când mulți oameni se gândesc la codare, ei se gândesc la acesta ca la instrucțiunea computerului cum sădo ceva. Aceasta este sarcina unui limbaj de programare, completarea noastră finală la ecuația front-end.

Limbile de programare sunt de obicei clasificate în funcție de nivelul de abstracție pe care îl folosesc în semantică, în limbile strămoșilor, în limba lor paradigme, si al lor dactilografiere. JavaScript sfidează clasificarea simplă, deoarece a fost extins în atâtea cadre, pentru a se potrivi atât de mult în scopuri diferite. Este un cameleon hibrid flexibil, derivat vag din familia C, multi-paradigmă, tipat slab, care joacă vrăjitoare cu concepte de codare. Este fie un exemplu excelent de limbaj cu scop general, fie un exemplu foarte slab al multor tipuri diferite de limbi.

De ce ai nevoie

De ce să înveți JavaScript? După cum subliniază colegul meu, JavaScript are campioni și detractori 6 limbi de programare cel mai ușor de învățat pentru începătoriÎnvățarea la program înseamnă a găsi o limbă potrivită la fel de mult ca și despre procesul de edificare. Iată primele șase limbi de programare cele mai ușoare pentru începători. Citeste mai mult , în special în cazul adecvării sale pentru studenții pentru prima dată. Este eventual cel mai popular limbaj de programare din zilele noastre. Deși nu oferă o bază puternică pentru a înțelege restul regatului codificant, există un argument bun pentru învățarea JS alături de Ruby sau PHP.

Acestea fiind spuse, vanilia JS nu merge foarte departe - cadrele sunt responsabile pentru paginile web de astăzi.

Cadre populare

• Unghiular, cadrul JS Google pentru aplicații web precum GMail și restul.
• JQuery Crearea web interactivă: o introducere în jQueryjQuery este o bibliotecă de scripturi din partea clientului pe care aproape fiecare site-ul modern o folosește - face site-urile interactive. Nu este singura bibliotecă Javascript, dar este cea mai dezvoltată, cea mai susținută și cea mai utilizată ... Citeste mai mult , deja acoperit de MUO aici Crearea web interactivă: o introducere în jQueryjQuery este o bibliotecă de scripturi din partea clientului pe care aproape fiecare site-ul modern o folosește - face site-urile interactive. Nu este singura bibliotecă Javascript, dar este cea mai dezvoltată, cea mai susținută și cea mai utilizată ... Citeste mai mult , care alimentează WordPress printre alte aplicații.
• Reacţiona, construit de legiunile de inginerie Facebook, este creat pentru crearea de interfețe interioare.

Credit suplimentar (avansat)

Natura palimpsestă a JavaScript solicită o anumită impunere a structurii. Fiecare strat de zahăr de mai jos merge parțial spre implementare

• CoffeeScript | Necesită Node.js, ca mai sus
• manuscris dactilografiat | Necesită Node.js, ca mai sus

Unde să începeți învățarea

Întrucât dezvoltarea front-end este considerată acum pe scară largă o abilitate crucială în muncă pentru lucrătorii de cunoștințe de toate tipurile, veți găsi multe puncte de plecare sub forma unor cursuri de învățare electronică. Iată o listă curatată pe care am făcut-o pentru cititorii noștri:

• Coursera (Plătit)
  Coursera colectează cursuri online de la universități și instituții de învățare. Gama de prețuri coboară de la 50-250 USD pentru un curs, dar reclamă un standard ridicat de cunoștințe și rezultate de înaltă competență.
• Adunarea generală Dash (Gratuit)
  Adunarea generală este o opțiune populară pentru educația profesională plătită. Dash este oferta lor gratuită și acoperă HTML / CSS / JS.
• MakeUseOf.com - Pachetul Learn to Code 2017 (Plătit, Plug)
  Acces pe viață la 10 clase care acoperă gama de dezvoltare web front-and-end, pentru doar 20 USD.
• Rețea de dezvoltatori Mozilla (Gratuit)
  MDN este autoritar, dar participă mai degrabă la stilul de documentare decât la instrucțiuni în stilul clasei sau la ofertele oferite doar online.
• Casă in copac (Plătit)
  O altă ofertă online, aceasta plătită pe lună, mai degrabă decât cursul. Acest lucru vine la recomandarea Karen X Cheng în postarea ei virală „Medium“Cum să obții un loc de muncă ca designer fără a merge la școala de proiectare.”
• Tutoriale web design de Envato Tuts + (Amestecat de conținut gratuit și plătit de calitate egală)
  O serie de articole unice și o serie de informații de înaltă calitate, specifice și direcționate, de obicei despre un subiect.

Noțiuni de bază

Unul dintre avantajele pe care dezvoltarea front-end le are pentru începători este că, în cea mai mare parte, nu este necesar instrumente proprietare costisitoare: cel mai de bază instrument de dezvoltare front-end este editorul de text asociat cu browserul dvs. alegere:

• Editori de text le place Editorul de text al lui Git, Text sublim (plătit) sau Cod VS de Microsoft
• Navigatoare, cum ar fi Mozilla Firefox sau Google Chrome
• Este util, dar în afara domeniului de aplicare al acestui articol, să ai găzduire sau un server local (de ex XAMPP) înființat.

Mai convenabile, dacă sunt mai puțin permanente, alternativele sunt editorii live pe bază de web, cum ar fi:

• Codepen.io
• JSbin.com

Tăieturi scurte

Structurile HTML sunt, în cea mai mare parte, bine înțelese și nu sunt tocmai demne de re-chemat cu o frecvență mare. Pentru CSS, foaia de stil medie a site-ului este lungă de mii de linii și puteți paria că puține dintre cele moderne sunt scrise exclusiv de mână. Și în ceea ce privește interactivitatea, au apărut anumite standarde. În virtutea acestor fapte, veți constata că mulți dezvoltatori front-end folosesc cadre pre-construite ca coloana vertebrală, apoi modifică, elimină sau înlocuiește, după caz.

• bootstrap, dezvoltat inițial de Twitter, conține șabloane HTML, CSS și JS, care se găsesc pe scară largă pe web astăzi. Bootstrap este aproape un lingua franca la început dezvoltarea web.
• fundație se facturează ca fiind cel mai avansat cadru din lume și este construit cu accent pe dimensiuni mici și viteză.

Material de referinta

• O listă în afară - O publicație din lista A, „Pentru persoanele care realizează site-uri”
• Pot folosi - „Tabele de asistență pentru HTML5, CSS3, etc”
• CSS-trucuri - un hub pentru comunitatea CSS și fântâna cunoștințelor privind cele mai bune practici și compatibilitate
• Documentare HTML Living Standard - „The Living Standard - Edition for Web Developer”
• HTML5 Vă rugăm - „Folosește noul și strălucitor în mod responsabil”
• Revista Smashing - „Pentru proiectanți și dezvoltatori web profesioniști”

Concluzie

Sperăm că v-a plăcut această orientare către lumea front-end. După cum puteți vedea, dezvoltarea front-end este un câmp plin de posibilități, dar care are multe puncte de intrare. Învățarea acestuia va adăuga o abilitate impresionantă portofoliului dvs. și vă va permite să faceți următorul pas în cariera dvs. sau trecerea la unul complet nou.

Dezvoltatori: Ce se află în stiva dvs. front-end?

incepatori: Ce altceva am fi putut include pentru a vă orienta?