Vytváření webových rozhraní: Kde začít

reklama

Počítačový kód a pixely jsou základem ekonomiky 21. století více než cihla a malta. Pokud jste se v prohlížeči někdy podívali na „Zdroj stránky“ nebo „Vývojářské nástroje“, pravděpodobně jste narazili na nepořádek textu a přemýšleli jste, jak to způsobí, že webová stránka funguje.

Weboví vývojáři volají Graphical User Jánterfaces (GUI) společně front-end webové stránky, na rozdíl od back-end. Klientské rozhraní je to, s čím může uživatel manipulovat, podnikat kroky a jinak jej používat. Back-end lze považovat za infrastrukturu, která obsahuje a podporuje všechny informace a úkoly spojené s front-endem.

Tento článek je o front-endu. Mapujeme teritorium, abyste mohli porozumět rozdílům a schopnostem, díky nimž je front-end co je to a ukázat vám, jak začít dávat smysl a používat nástroje pro vývojáře webu pro vytváření přitažlivého a interaktivního webu stránky.

Webový design versus front-end vývoj

Ve velkých organizacích jsou design a vývoj úkolem týmů profesionálů s různými sadami dovedností. Návrháři by vytvořili konkrétní vizuální a interakční design; přední vývojáři by to implementovali.

Pro jednotlivce však není důvod omezovat váš průzkum: jen proto, že vás zajímá vývoj, neznamená to, že nemáte žádnou vizi designu, a naopak. Skromné ​​množství znalostí o základních webových technologiích nebo principech designu se může ukázat jako velmi prospěšné pro vaši kariéru nebo podnikání.

Vývoj front-endu je stále více kódovací aktivitou. Důvodem je více než polovina designu ve svém myšlení: mnoho konceptů vychází ze světa tiskové produkce. Méně proto, že zatímco používá počítačový kód, je to odrůda, která je méně složitá, odpouštějící a vyžaduje méně základních znalostí programování než další webové programovací jazyky (mnohé z nich najdete na pozadí) Jaký programovací jazyk se učit - webové programováníDnes se podíváme na různé webové programovací jazyky, které pohánějí internet. Toto je čtvrtá část programovací série pro začátečníky. V části 1 jsme se naučili základní ... Přečtěte si více .

Front-end webu: Markup, Style Sheet a Programming languages

Většina webových stránek je konstruována pomocí trojice technologií: značkovací jazyk pro hypertext (HTML), kaskádové styly (CSS) a JavaScript (JS):

• Značkovací jazyky jako HTML označte dokument pomocí značky. Značky vymezují sémantický obsah a strukturu dokumentu. Strukturované dokumenty mohou být stylizovaný.
• CSS je jazyk stylů a potomek směrů tiskového stylu ke skladateli stránky (který vytváří konečný tisknutelný obrázek pro tiskový lis); na webu, CSS diktuje prezentaci obsahu jako typografie a rozvržení obecně, stejně jako umisťování grafiky.
• JavaScript, na rozdíl od předchozích dvou, je programovací jazyk. JS zpracovává interakci a vstup uživatele a je zaměřena na události, které uživatel vytváří. Abychom vyplnili obrázek o něco více, opakem paradigmatu řízeného událostmi je ten, kde programování probíhá bez ohledu na vstup uživatele.

HTML

Bylo to přes dvacet let a hlavní účel HTML zůstává stejný: oddělit text určený pro čtenáře od struktury potřebné k analýze dokumentu.

Proč to potřebujete

Proč je HTML stále důležité? Jednoduše řečeno, HTML je místem, kde leží sémantický význam vašeho obsahu. To je nezbytné pro strojové čtenáře, jako jsou vyhledávače pavouků a čtečky obrazovek (pro usnadnění přístupu). Postupem času se význam oddělování toho, co je sémantické, od toho, co je strukturální, časem spíše zmenšil. Nejnovější verze HTML (5) zavedla značky jako

,

Anatomie prvku HTML

Prvky HTML jsou minimálně páry otevírání a zavírání značek, každá značka je uzavřena , jako je značka odstavce, azurová. Prvky mohou mít atributy, jak je uvedeno níže v magenta, jako je například „třída“, díky níž by se prvek stal členem skupiny, na kterou mohou mít vliv HTML a JS. styl Atribut, jehož obsah je níže napsán červeně, je ve skutečnosti způsob, jak vytvořit jednorázové pravidlo CSS právě pro tento prvek. (CSS se nejlépe píše na úrovni webu nebo stránky, jak budeme diskutovat níže.)

Výsledek tohoto označení:

Prostý text odstavce zde.

Extra kredit (pokročilý)

Vývojáři všeho druhu jsou posedlí rychlostí provádění. Za tímto účelem optimalizují samotné jazyky podle rychlosti psaní a vytváření čitelných řádků. Tomu se říká syntaktický cukrový povlak. Komunita HTML vytvořila několik těchto snah.

Proč používat zkratku zaměřenou na vývojáře, pokud jste pravděpodobně nováček? Vytvářením věcí v jednodušším značení se můžete zaměřit na záměr, ne na výraz, a zároveň ověřovat na poslední úrovni. Zdrojové soubory, které vygenerujete ve zjednodušené značce, se buď zkompilují do platného HTML, nebo kompilátor vyvolá chybu na konkrétní číslo řádku. Možná zjistíte, že je to poučné než lov pomocí „polévky na tag“ pro chybějící úhelník. Každý z nich vyžaduje přechodný kus softwaru, který je převede do HTML. (To je další konec konců.)

• Haml (HTML Abstrction Markup Language) Vyžaduje Rubín (o kterém jsme již dříve zamyšleně psali 3 interaktivní, zábavné a bezplatné způsoby, jak začít učit programovací jazyk RubyRuby je výrazný skriptovací jazyk na vysoké úrovni. Používá se na webu hlavně jako součást rámce pro vývoj webových aplikací Ruby on Rails, ale také jako samostatný. Pokud vás zajímá, co Ruby (ne ... Přečtěte si více ) sestavit
• Jade [nefunkční URL odstraněno] | Vyžaduje Node.js (najdete zde úvod Co je Node. JS a proč bych se měl starat? [Vývoj webu]JavaScript je pouze programovací jazyk na straně klienta, který běží v prohlížeči, že? Už ne. Node.js je způsob spouštění JavaScriptu na serveru; ale je to mnohem víc. Li... Přečtěte si více ) sestavit
• Štíhlý | Vyžaduje kompilaci Ruby (viz výše)

CSS

CSS umožňuje samostatné umístění sémantického obsahu a dokumentů, takže stylové prvky, jako je rozvržení, barvy a typografie, jsou přenosné a použitelné pro různé dokumenty. Pokud je obsah a vizuální design oddělený, získá vývojář větší flexibilitu a konzistentnost ve vizuálním designu.

Proč to potřebujete

Neotřesené webové stránky vypadají hrozné a přitažlivé. I když mohou být čitelné, CSS je základním kamenem hierarchie vizuálních informací kvůli rozložení, které umožňuje. Například níže uvedený obrázek částečně ilustruje aktuální horní navigační nabídku systému makeuseof.com, bez použití CSS.

Všimněte si, že kromě typografie a barev je neotřesená nabídka svislá, protože je to výchozí styl prohlížeče. Je nepravděpodobné, že byste chtěli znovu vytvořit internet v roce 1990, takže budete chtít, aby byla zdravá a nepřetržitá dávka znalostí CSS skutečně kompetentní. Navíc se vzestupem různě velkých a připojených zařízení, jako jsou telefony iPhone, tablety, atd., Jedno z nejdůležitějších dovedností se stal „responzivní design“ nebo webové stránky, které se přizpůsobují jiné obrazovce velikosti. To vše se provádí pomocí CSS.

Anatomie pravidla CSS

CSS pravidla jsou psána na jednom ze tří míst: a) inline uvnitř elementu, b) vytvořením a

V ideálním případě jsou styly psány v samostatných listech stylů, na které může odkazovat více webových stránek. Pomocí stejné sady pravidel mohou autoři ušetřit čas a vytvářet vizuální prezentace s větším pořádkem a konzistencí. (Inline styly vám nepomůžou vytvořit základní styl stylu webu nebo dokonce stránky - proto jsou nejlépe používány střídavě ke splnění konkrétních potřeb.)

Pravidla CSS začínají a volič, napsané zeleně níže. V tomto případě je výběrem pravidla pravidlo str, pro odstavec: pravidlo platí pro prvky odstavce. Pravidlo je uzavřeno v {složených závorkách}, na rozdíl od . V tomto případě pravidlo způsobí, že je písmo textu odstavce normální.

Pravidla CSS mohou být složitější a komplikovanější, než umožňuje tento úvod. To je důvod, proč můžete čekat, pokud jde o čas Mistrovství CSS bude trvat mnohem déle než HTML.

Extra kredit (pokročilý)

Stejně jako HTML má CSS své optimalizace pro ty, kteří chtějí dosáhnout více, rychleji.

• SASS (a SCSS) Vyžaduje Ruby, jak je uvedeno výše
• Méně | Vyžaduje Node.js, jak je uvedeno výše

JavaScript

Když mnoho lidí myslí na kódování, myslí si to jako na poučení počítače jakdělat něco. To je úkol programovacího jazyka, náš konečný doplněk k front-end rovnici.

Programovací jazyky jsou obvykle klasifikovány podle úrovně abstrakce, kterou používají ve své sémantice, jejich předcích jazycích, jejich paradigmata, a jejich psaní disciplín. JavaScript vzdoruje jednoduché klasifikaci, protože byl rozšířen do tolika rámců, aby vyhovoval tolika různým účelům. Je to flexibilní, vágně odvozená z rodiny C, multi-paradigma, volně typovaného hybridního chameleonu hrajícího díla s kódovacími koncepty. Je to buď skvělý příklad velmi obecného jazyka, nebo velmi špatný příklad mnoha různých typů jazyků.

Proč to potřebujete

Proč se učit JavaScript? Jak můj kolega zdůrazňuje, JavaScript má své vítěze a kritiky 6 nejjednodušších programovacích jazyků pro začátečníkyNaučit se programovat je o nalezení správného jazyka stejně jako o procesu editace. Zde je prvních šest nejjednodušších programovacích jazyků pro začátečníky. Přečtěte si více , zejména v případě, že je vhodný pro studenty, kteří se poprvé učili. to je možná nejpopulárnější programovací jazyk dneška. I když to nepředstavuje pevný základ pro pochopení zbytku kódovacího království, je třeba učinit dobrý argument pro učení JS spolu s Ruby nebo PHP.

To znamená, že vanilla JS nejde příliš daleko - za dnešní webové stránky jsou zodpovědné rámce.

Populární rámce

• Úhlová, JS framework společnosti Google pro webové aplikace, jako je GMail a ostatní.
• JQuery Vytvoření interaktivního webu: Úvod do jQueryjQuery je skriptovací knihovna na straně klienta, kterou téměř každý moderní web používá - díky tomu jsou webové stránky interaktivní. Není to jediná knihovna Javascript, ale je to nejrozvinutější, nejvíce podporovaná a nejrozšířenější ... Přečtěte si více , zde již MUO pokrývá Vytvoření interaktivního webu: Úvod do jQueryjQuery je skriptovací knihovna na straně klienta, kterou téměř každý moderní web používá - díky tomu jsou webové stránky interaktivní. Není to jediná knihovna Javascript, ale je to nejrozvinutější, nejvíce podporovaná a nejrozšířenější ... Přečtěte si více , který řídí WordPress mimo jiné aplikace.
• Reagovat, vytvořené inženýrskými legiemi Facebooku, je vytvořeno pro vytváření uživatelských rozhraní.

Extra kredit (pokročilý)

Největší přirozenost JavaScriptu prosí o uložení struktury. Každý z níže uvedených cukrových povlaků směřuje k realizaci

• CoffeeScript | Vyžaduje Node.js, jak je uvedeno výše
• Strojopis | Vyžaduje Node.js, jak je uvedeno výše

Kde začít učit

Protože front-end rozvoj je nyní široce považován za klíčovou pracovní dovednost pro znalostní pracovníky všeho druhu, najdete mnoho východisek ve formě e-learningových kurzů. Zde je kurátorský seznam, který jsme vytvořili pro naše čtenáře:

• Coursera (Placené)
  Coursera shromažďuje online kurzy od univerzit a vzdělávacích institucí. Cena se pohybuje od 50 do 250 USD za kurz, ale propaguje vysoký standard znalostí a výsledků s vysokou kompetencí.
• Generální shromáždění Dash (Volný, uvolnit)
  Valné shromáždění je oblíbenou možností placeného odborného vzdělávání. Dash je jejich bezplatná nabídka a zahrnuje HTML / CSS / JS.
• MakeUseOf.com - Balíček Learn to Code 2017 (Placené, Plug)
  Celoživotní přístup k 10 třídám, které pokrývají škálu front-a back-end vývoje webu, za pouhých 20 USD.
• Mozilla Developer Network (Volný, uvolnit)
  MDN je autoritativní, ale podílí se spíše na stylu dokumentace než na výuku ve třídě nebo na gamifikované nabídky online.
• Dům na stromě (Placené)
  Další online nabídka, tato nabídka platí spíše za měsíc než za kurz. Toto přichází na doporučení Karen X Cheng v jejím virovém médiu „Jak získat práci designéra, aniž by šel do školy designu.”
• Návody pro webový design od Envato Tuts + (Smíšený bezplatný a placený obsah stejné kvality)
  Hustota jednorázových článků a vícedílná řada kvalitních, konkrétních a cílených informací obvykle na jeden subjekt.

Začínáme

Jednou z výhod, které pro začínajícího hráče představuje vývoj front-end, je to, že z velké části to nevyžaduje drahé proprietární nástroje: nejzákladnějším nástrojem vývoje front-end je textový editor spárovaný s prohlížečem vašeho výběr:

• Textové editory jako Gitův textový editor Atom, Vznešený text (zaplaceno), nebo Kód VS od společnosti Microsoft
• Prohlížeče jako Mozilla Firefox nebo Google Chrome
• Je užitečné, ale nad rámec tohoto článku, mít hosting nebo lokální server (například XAMPP) založit.

Výhodnější, pokud méně trvalé alternativy, jsou webové živé editory, jako například:

• Codepen.io
• JSbin.com

Krátké řezy

HTML struktury jsou z velké části dobře srozumitelné a ne zcela hodné přepisování s velkou frekvencí. Pro CSS je průměrná šablona stylů stránek dlouhá tisíce řádků a můžete vsadit, že jen málo moderních je psáno výhradně ručně. A z hlediska interaktivity se objevily určité standardy. Na základě těchto skutečností zjistíte, že mnoho front-end vývojářů používá předpřipravené rámce jako páteř a podle potřeby je vyladí, odstraní nebo nahradí.

• Bootstrap, který původně vytvořil Twitter, obsahuje šablony HTML, CSS a JS, které jsou dnes na webu hojně dostupné. Bootstrap je téměř lingua franca na začátku vývoje webu.
• Nadace účtuje se jako nejpokročilejší rámec na světě a je postaven s důrazem na malou velikost a rychlost.

Referenční materiál

• Seznam kromě - Publikace A-list „Pro lidi, kteří vytvářejí webové stránky“
• Mohu použít - „Podpůrné tabulky pro HTML5, CSS3 atd.“
• Triky CSS - Centrum pro komunitu CSS a studnu znalostí o osvědčených postupech a kompatibilitě
• Dokumentace HTML Living Standard - „The Living Standard - Edition pro vývojáře webu“
• HTML5 Prosím - „Používejte nové a lesklé zodpovědně“
• Smashing Magazine - „Pro profesionální webové designéry a vývojáře“

Závěr

Doufáme, že se vám tato orientace líbila do světa front-end. Jak vidíte, vývoj front-end je pole, které je plné možností, ale má mnoho vstupních bodů. Jeho učení dodá vašemu portfoliu působivou dovednost a umožní vám podniknout další krok ve vaší kariéře nebo přechod na zcela nový.

Vývojáři: Co je ve vašem front-end zásobníku?

Začátečníci: Co jiného jsme mohli zahrnout, abychom vás mohli orientovat?