Acțiune:
Crearea interfețelor Web de unde să începeți
Mai mult decât cărămizile, codul calculatorului și pixelii reprezintă fundamentul economiei secolului al XXI-lea. Dacă te-ai uitat vreodată “Sursa paginii” sau “Instrumente de dezvoltare” în browserul dvs., ați întâmpinat probabil o problemă de text și ați întrebat cum funcționează pagina web.
Dezvoltatorii web apel Graphical User eu(GUI) în mod colectiv în față a unei pagini web, spre deosebire de back-end-ul. Front-end-ul este ceea ce utilizatorul poate manipula, acționa și poate folosi altfel. Back-end-ul poate fi considerat ca fiind infrastructura care conține și sprijină 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 front-endul ceea ce este și să vă arătăm cum să începeți să înțelegeți - și să folosiți - instrumentele dezvoltatorului web pentru a crea aplicații atrăgătoare și pagini web interactive.
Design web versus dezvoltarea front-end
În organizațiile mari, proiectarea și dezvoltarea sunt sarcini întreprinse de echipe de profesioniști cu seturi diferite de competențe. Designerii ar crea un design vizual specific și de interacțiune; dezvoltatorii din front-end l-ar implementa.
Pentru un individ, cu toate acestea, nu există niciun motiv să vă limitați explorarea: doar pentru că sunteți interesat de dezvoltare, nu înseamnă că nu aveți viziune de design și invers. O cantitate modestă de cunoștințe despre tehnologiile web de bază sau despre principiile de proiectare se poate dovedi extrem de benefică în cariera sau afacerea dvs..
Dezvoltarea front-end-ului este tot mai mult o activitate de codificare. Mai mult pentru că are mai mult de jumătate de proiectare în gândirea sa: multe concepte sunt extrase din lumea producției de imprimare. Mai puțin pentru că, în timp ce utilizează codul computerului, acest cod este un soi mai puțin complex, mai iertător și necesită cunoștințe de bază despre programare mai puțin decât alte limbi de programare web (multe dintre acestea putând fi găsite pe back-end) Aflați - programarea pe Web ce limba de programare să învățați - Programare pe Web Astăzi vom examina diferitele limbi de programare web care alimentează Internetul. Aceasta este a patra parte dintr-o serie de programare pentru incepatori. În partea 1, am învățat de bază ... Citește mai mult .
Front-end-ul Web: marcaje, foi de stil și limbi de programare
Cele mai multe pagini web sunt construite cu un trio de tehnologii: limbaj HTML (HTML), foi de stil cascadă (CSS) și JavaScript (JS):
- Limbile de marcare precum HTML marchează un document cu Etichete. Etichetele delimitează conținutul semantic și structurează documentul. Documente structurate pot fi Styled.
- CSS este a stilul limbii și descendent al direcțiilor în stil tipărit unui compozitor de pagini (care creează imaginea finală imprimabilă pentru o imprimantă); pe web, CSS dictează prezentarea de conținut cum ar fi tipografia și aspectul în general, precum și plasarea graficelor.
- JavaScript, spre deosebire de celelalte două, este a limbaj de programare. JS se ocupă de interacțiune și de intrarea utilizatorului și se concentrează asupra evenimentelor pe care le produce un utilizator. Pentru a completa imaginea un pic mai mult, opusul unei paradigme conduse de evenimente este aceea în care programarea se execută indiferent de intrarea utilizatorului.
HTML
Au trecut peste douăzeci de ani, iar scopul principal al HTML rămâne același: separarea textului pentru un cititor de structura necesară pentru analiza documentului.
De ce aveți nevoie de el
De ce este HTML încă important? Pentru a spune pur și simplu, HTML este în cazul în care semnificația semantică a conținutului dvs. se află. Acest lucru este necesar pentru cititorii de mașini, cum ar fi păianjenii motoarelor de căutare și cititorii de ecran (pentru accesibilitate). De-a lungul timpului, relevanța separării a ceea ce este semantică față de ceea ce este structurală a crescut mai degrabă decât a diminuat în timp. Cea mai recentă versiune a HTML (5) a introdus etichete precum
Anatomia unui element HTML
Elementele HTML, cel puțin, sunt perechi de etichete de deschidere și închidere, fiecare etichetă inclusă
Rezultatul acestui marcaj:
Text paragraful simplu aici.
Credit suplimentar (avansat)
Dezvoltatorii de toate tipurile sunt obsedați de viteza de execuție. În acest scop, vor optimiza limbile în sine pentru viteza scrisă și pentru a crea linii ușor de citit. Aceasta se numește acoperire sintetică a zahărului. Comunitatea HTML a produs câteva dintre aceste eforturi.
De ce să utilizați o comandă rapidă centrat pe dezvoltatori 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 ultim. Fișierele sursă pe care le generați în marcarea simplificată se vor compila fie în HTML valid, fie compilatorul va arunca o eroare la un anumit număr de linie. S-ar putea să găsiți ceva mai instructiv decât vânătoarea prin “tag-ul supa” pentru un suport unghi lipsă. Fiecare dintre ele necesită un software intermediar pentru a le transporta în HTML. (Este suplimentar credit, la urma urmei.)
- Haml (limbaj de marcă de abstractizare HTML) Necesită Ruby (despre care am scris cu gânduri înainte de 3 Interactive, Distracție, Moduri gratuite de a începe să învățați Limba de programare Ruby 3 Moduri interactive, distractive, gratuite pentru a începe să învățați Limba de programare Ruby Ruby este o limbă de scriere expresivă, foarte înaltă .Acesta este folosita pe Web, in principal ca parte a framework-ului de dezvoltare web Ruby on Rails, dar si standalone.Daca esti curios despre ce Ruby (nu ... Citește mai mult)
- Jade | Necesită Node.js (veți găsi o introducere aici Ce este Node.JS și de ce ar trebui să mă intereseze?] [Dezvoltare Web] Ce este Node.JS și de ce ar trebui să am grija? [Dezvoltare Web] JavaScript este doar o parte client limbajul de programare care rulează în browser, nu mai este Node.js este un mod de a rula JavaScript pe server, dar este mult mai mult ... Dacă citiți mai multe) pentru a compila
- Slim | Necesită Ruby să compileze (ca mai sus)
CSS
CSS permite ca conținutul semantic și prezentarea de documente să fie adăpostite separat, făcând caracteristici stilistice precum layout, culori și tipografie portabile și aplicabile diferitelor documente. Atunci când conținutul și designul vizual sunt separate, dezvoltatorul câștigă mai multă flexibilitate și coerență în designul vizual.
De ce aveți nevoie de el
Site-urile web neplacute par teribile și neatractive. Deși pot fi citite, CSS este piatra de temelie a ierarhiei de informații vizuale din cauza aspectului pe care îl permite. De exemplu, figura de mai jos ilustrează parțial actualul meniu de navigare de sus al makeuseof.com, fără aplicarea aplicației CSS.
Observați că, în afară de tipografie și de culori, meniul nestingherit 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 o doză sănătoasă și continuă de cunoștințe CSS pentru a fi cu adevărat competentă. În plus, odată cu creșterea dispozitivelor de dimensiuni diferite și conectate cum ar fi iPhone, tablete și altele, una dintre cele mai importante abilități a devenit “Design Responsabil,” sau pagini web care se adaptează dimensiunilor diferite ale ecranului. Acest lucru este realizat prin CSS.
Anatomia unei reguli CSS
Regulile CSS sunt scrise într-una din cele trei locuri: a) inline în cadrul unui element, b) prin crearea unui