Webes felületek létrehozása: Hol kezdjem

Hirdetés

A 21. századi gazdaság alapját több, mint a tégla és a habarcs, a számítógépes kód és a képpontok képezik. Ha valaha megnézi a „Oldal forrását” vagy a „Fejlesztői eszközöket” böngészőjében, akkor valószínűleg szöveges rendetlenséggel találkozott, és azon tűnődött, vajon mi okozza a weboldal működését.

Webfejlesztők hívnak Gvetően User énn felületek (GUI) együttesen a front-end egy weboldal, ellentétben a háttérrel. Az előtér az, amellyel a felhasználó manipulálhat, cselekedhet és más módon használhat. A háttérképet olyan infrastruktúrának lehet tekinteni, amely tartalmazza és támogatja a front-end által felvetett összes információt és feladatot.

Ez a cikk az előtérről szól. Kiszámoljuk a területet, hogy megértsük azokat a megkülönböztetéseket és képességeket, amelyek az előtérbe állítják ez, és megmutatja, hogyan lehet értelmezni és felhasználni a webfejlesztő eszközeit vonzó és interaktív web létrehozására oldalakon.

Webdesign és front-end fejlesztés

Nagy szervezetekben a tervezés és fejlesztés olyan feladatok, amelyeket különböző szakértelemmel rendelkező szakemberek csoportjai végeznek. A tervezők sajátos vizuális és interakciós kialakítást készítenek; a front-end fejlesztők megvalósítanák.

Magánszemélyek számára azonban nincs ok a kutatás korlátozására: pusztán azért, mert érdekli a fejlesztés, nem azt jelenti, hogy nincs látásod a tervezésre, és fordítva. Az alapvető webes technológiákkal vagy a tervezési alapelvekkel kapcsolatos szerény ismeretek rendkívül hasznosak lehetnek karrierje vagy üzleti életében.

A front-end fejlesztés egyre inkább kódolási tevékenység. Többet azért, mert gondolkodásának több mint a fele a formatervezése: sok fogalom a nyomtatás világából származik. Kevésbé azért, mert amíg számítógépes kódot használ, ez a kód kevésbé összetett, megbocsátóbb, és kevesebb alapismeretet igényel a programozásban, mint egyéb webes programozási nyelvek (amelyek közül sok megtalálható a háttéroldalon) Melyik programozási nyelvet kell megtanulni - Webes programozásMa áttekintjük a különféle internetes programozási nyelveket, amelyek táplálják az internetet. Ez a kezdő programozási sorozat negyedik része. Az 1. részben megtanultuk a ... Olvass tovább .

A web front-end: jelölés, stíluslap és programozási nyelvek

A legtöbb weboldal három technológiával készül: hipertext jelölő nyelv (HTML), lépcsőzetes stíluslapok (CSS) és JavaScript (JS):

• Jelölő nyelvek például a HTML jelölje meg a dokumentumot a címkék. A címkék körülhatárolják a szemantikai tartalmat és felépítik a dokumentumot. A strukturált dokumentumok lehetnek stílusú.
• A CSS egy stíluslap nyelv és nyomtatási stílusú útmutatások leszármazottja az oldalkompozitornak (aki létrehozza a nyomtatható nyomtatás végső képét a nyomda számára); Az interneten a CSS diktálja a tartalom bemutatását, például általában a tipográfia és az elrendezés, valamint a grafikák elhelyezését.
• A JavaScript, az előző kettővel ellentétben, a programozási nyelv. A JS kezeli az interakciót és a felhasználói bemenetet, és azokra az eseményekre összpontosít, amelyeket egy felhasználó készít. A kép kissé kitöltéséhez az eseményvezérelt paradigma ellentéte az, amelyben a programozás a felhasználói bemenetektől függetlenül végrehajtódik.

HTML

Több mint húsz év telt el, és a HTML alapvető célja ugyanaz marad: az olvasó számára szánt szöveget el kell különíteni a dokumentum elemzéséhez szükséges struktúrától.

Miért van szüksége?

Miért továbbra is fontos a HTML? Egyszerűen fogalmazva: a HTML az, ahol a tartalom szemantikai jelentése rejlik. Erre a gépolvasók, például a keresőmotor-pókok és a képernyőolvasók (a hozzáférhetőség érdekében) szükségesek. Az idő múlásával a szemantikai és a strukturális elválasztás fontossága az idővel inkább növekedett, mint csökkent. A HTML legújabb verziója (5) olyan címkéket vezetett be, mint a

,

HTML elem anatómiája

A HTML elemek legalább párosak címkék nyitása és zárása, mindegyik címke be van zárva , mint például az alábbiakban a bekezdést tartalmazó cimke. Az elemek eltarthatnak attribútumok, mint az alábbiakban a bíborvörös formában, például egy „osztály”, amely az elemet egy olyan csoport tagjává teszi, amelyet a HTML és a JS befolyásolhat. Az stílus Az attribútum, amelynek tartalmát alul piros színű írja, valójában egyfajta CSS-szabály létrehozásának módja az adott elem számára. (A CSS-t legjobban a webhely vagy az oldal szintjén kell írni, amint azt az alábbiakban tárgyaljuk.)

A jelölés eredménye:

Sima bekezdés szöveg itt.

Extra hitel (haladó)

Mindenféle fejlesztő megszállottja a végrehajtás sebességének. E célból optimalizálják a nyelveket az írás gyorsasága és az olvasható vonalak létrehozása érdekében. Ezt nevezik szintaktikus cukorbevonat. A HTML közösség készített néhány ilyen erőfeszítést.

Miért érdemes fejlesztőközpontú parancsikont használni, ha feltehetően kezdő vagy? A dolgok egyszerűbb jelöléssel történő létrehozásával összpontosíthat a szándékra, nem pedig a kifejezésre, miközben érvényesítheti a szabványt legutóbb. Az egyszerűsített jelölésben létrehozott forrásfájlok vagy érvényes HTML formátumba fordulnak, vagy a fordító hibát dob ​​egy adott sorszámra. Lehet, hogy sokkal oktatóbb, mint a hiányzó sarokkonzol vadászata a „címkeleves” segítségével. Mindegyiküknek közvetítő szoftverre van szüksége a HTML-be történő újrafordításhoz. (Ez külön- végül is hitelt.)

• Haml (HTML absztrakciós jelölőnyelv) Igényel Rubin (amiről elgondolkodva írtunk már korábban 3 interaktív, szórakoztató, ingyenes módszer a Ruby programozási nyelv elsajátításáhozA Ruby kifejező, nagyon magas szintű szkriptnyelv. Az interneten elsősorban a Ruby on Rails webes fejlesztési keretének részeként, de önmagában is használják. Ha kíváncsi, hogy mi a Ruby (nem ... Olvass tovább ) összeállít
• Jade [Törött URL eltávolítva] | Igényel node.js (itt található egy bevezetés Mi a csomópont? JS és miért érdekelne? [Webfejlesztés]A JavaScript csak egy ügyféloldali programozási nyelv, amely a böngészőben fut, igaz? Többé nem. A Node.js a JavaScript futtatásának egyik módja a szerveren; de ez is sokkal több. Ha... Olvass tovább ) összeállít
• Vékony | A Ruby-hoz fordítást igényel (mint fent)

CSS

A CSS lehetővé teszi a szemantikai tartalom és a dokumentummegjelenítés külön elhelyezését, így a stílusos jellemzők, például az elrendezés, a színek és a tipográfia hordozhatóak és alkalmazhatók a különféle dokumentumokban. Ha a tartalom és a vizuális formatervezés külön van, akkor a fejlesztő nagyobb rugalmasságot és következetességet nyer a vizuális formatervezésben.

Miért van szüksége?

A nem stílusos webhelyek szörnyűnek és vonzónak tűnnek. Bár a CSS olvasható, a CSS a vizuális információ hierarchiájának sarokköve az engedélyezett elrendezés miatt. Például az alábbi ábra részben szemlélteti a jelenlegi felső navigációs menüt makeuseof.com, CSS alkalmazása nélkül.

Vegye figyelembe, hogy a tipográfia és a szín kivételével a nem írott menü függőleges, mert ez a böngésző alapértelmezett stílusa. Nem valószínű, hogy újjá szeretné létrehozni az 1990-es évet, ezért egészséges és folyamatos adag CSS tudást szeretne, hogy valóban kompetens legyen. Ezenkívül a különféle méretű és csatlakoztatott eszközök, például az iPhone, a tablet, az ettera, megjelenésével A legfontosabb képességek közül „Responsive Design”, vagy a különböző képernyőkre alkalmazkodó weboldalak váltak méretben. Mindezt a CSS-en keresztül lehet elérni.

A CSS szabály anatómiája

A CSS szabályokat három helyett az egyik írja: a) egy elemen belül inline, b) a

Ideális esetben a stílusokat külön stíluslapokban írják, amelyekre több weboldal hivatkozhat. Ugyanazon szabályok használatával a szerzők időt takaríthatnak meg, és vizuális megjelenítést hozhatnak létre nagyobb renddel és következetességgel. (A beillesztett stílusok nem segíthetnek a webhely vagy akár az oldal szintjén kialakított stílus alapjainak kialakításában - ezért használják őket a legmegfelelőbben a speciális igények kielégítésére.)

A CSS szabályai a következővel kezdődnek: választó, alul zöld színben. Ebben az esetben a szabály választója p, bekezdés: a szabály vonatkozik a bekezdési elemekre. A szabályt {göndör zárójelek} zárták be, ellentétben a szabályokkal . Ebben az esetben a szabály normálissá teszi a bekezdésszöveget.

A CSS-szabályok bonyolultabbá és bonyolultabbá válhatnak, mint ezt a bevezetés megengedi. Ezért számíthat az elkötelezett idő tekintetében A CSS-nek sokkal hosszabb idő szükséges a HTML elsajátításához.

Extra hitel (haladó)

A HTML-hez hasonlóan a CSS optimalizálja azokat is, akik többet akarnak elérni, gyorsabban.

• SASS (és SCSS) | A fentiekhez hasonlóan Rubint igényel
• Kevésbé | A fentiekhez hasonlóan Node.js-t igényel

JavaScript

Amikor sokan gondolkodnak a kódolásról, úgy gondolják, hogy ez a számítógép utasítása hogyan kellcsinál valami. Ez egy programozási nyelv feladata, az utolsó kiegészítés a front-end egyenlethez.

A programozási nyelveket általában az absztrakció szintje szerint osztályozzák, amelyet szemantikájukban alkalmaznak, az őseik nyelvét, paradigmák, és övék gépelési tudományágak. A JavaScript nem bírja az egyszerű osztályozást, mert oly sok keretre kiterjesztették, hogy oly sok különböző célt szolgáljon. Ez egy rugalmas, homályosan származtatott, a C-családból származó, multi-paradigma, lazán tipizált hibrid kaméleon, játszó szarka kódoló fogalmakkal. Ez vagy nagyon jó példa egy nagyon általános célú nyelvre, vagy nagyon különféle példák sokféle nyelvre.

Miért van szüksége?

Miért tanulja meg a JavaScriptet? Amint a kollégám rámutat, a JavaScript rendelkezik bajnokaival és levonóival 6 legegyszerűbb programozási nyelv a kezdők számáraA programozás megtanulása a megfelelő nyelv megtalálásáról szól, ugyanúgy, mint a szerkesztési folyamatról. Itt található a hat legegyszerűbb programozási nyelv kezdőknek. Olvass tovább , különösen az első alkalommal tanulók számára való alkalmasság esetén. Ez esetleg az a mai legnépszerűbb programozási nyelv. Noha ez nem ad erős alapot a kódoló királyság többi részének megértéséhez, jó érv szól, hogy a JS-t Ruby vagy PHP mellett megtanuljuk.

A vanília JS nem megy túl messzire - a ma a weboldalak felelősek a keretekért.

Népszerű keretek

• Szögletes, a Google JS-rendszere olyan webes alkalmazásokhoz, mint a GMail és a többi.
• JQuery A web interaktívvá tétele: Bevezetés a jQuery-baA jQuery egy ügyféloldali szkriptkönyvtár, amelyet szinte minden modern webhely használ - interaktívvá teszi a webhelyeket. Ez nem az egyetlen Javascript könyvtár, de a legfejlettebb, leginkább támogatott és legszélesebb körben használt ... Olvass tovább , amelyet már a MUO fedezett itt A web interaktívvá tétele: Bevezetés a jQuery-baA jQuery egy ügyféloldali szkriptkönyvtár, amelyet szinte minden modern webhely használ - interaktívvá teszi a webhelyeket. Ez nem az egyetlen Javascript könyvtár, de a legfejlettebb, leginkább támogatott és legszélesebb körben használt ... Olvass tovább , amely a WordPress alkalmazást támogatja más alkalmazások között.
• Reagál, amelyet a Facebook mérnöki légiók építettek, felhasználói felületek létrehozására készültek.

Extra hitel (haladó)

A JavaScript palimpsest természete kéri a szerkezet valamilyen bevezetését. Az alábbiakban felsorolt ​​összes cukorbevonat a megvalósítás irányába mutat

• CoffeeScript | A fentiekhez hasonlóan Node.js-t igényel
• Gépelt | A fentiekhez hasonlóan Node.js-t igényel

Hol kezdjem a tanulást

Mivel a front-end fejlesztést széles körben tekintik kritikus munkaképességnek mindenfajta tudásmunkás számára, e-tanulási tanfolyamok formájában számos kiindulási pontot talál. Itt van egy kurátus lista, amelyet az olvasóink számára készítettünk:

• coursera (Fizetett)
  A Coursera online tanfolyamokat gyűjt az egyetemektől és a tanulási intézményektől. Az ártartomány 50–250 USD-t esik egy tanfolyamra, de magas szintű tudást és magas kompetencia-eredményt hirdetnek.
• Közgyűlés Dash (Ingyenes)
  A Közgyűlés népszerű alternatívája a fizetett szakképzésnek. A Dash az ingyenes ajánlatuk, és kiterjed a HTML / CSS / JS-re.
• MakeUseOf.com - A 2017-es csomag kódolása (Fizetett, csatlakozó)
  Élethosszig érhető el 10 osztály, amely a front- és a back-end webfejlesztés színvonalát fedezi, mindössze 20 USD-ért.
• Mozilla fejlesztői hálózat (Ingyenes)
  Az MDN hiteles, ám inkább a dokumentáció stílusát veszi figyelembe, mint az osztálytermi utasításokat vagy a kizárólag online ajánlatokat.
• Faház (Fizetett)
  Egy másik online ajánlat, ez havonta fizetett, nem pedig kurzus. Ez Karen X Cheng ajánlása alapján, vírusos közepes üzenetébenHogyan szerezzünk munkát tervezőként anélkül, hogy tervezőiskolába járnánk?.”
• Az Envato Tuts + webdesign oktatóanyagai (Egyenlő minőségű ingyenes és fizetett tartalom keverve)
  Egy sor egyedi cikkből és többrészes sorozatból, kiváló minőségű, specifikus és célzott információkból, általában egy témáról.

Elkezdeni

Az egyik előnye, hogy a front-end fejlesztés a kezdők számára is megmarad, az általában nem igényel drága szabadalmaztatott eszközök: a front-end fejlesztés legalapvetőbb eszköze a szövegszerkesztő és az Ön böngészője választás:

• A szövegszerkesztőknek tetszik A Git Atom szövegszerkesztője, Fenséges szöveg (fizetett), vagy VS kód a Microsoft által
• Böngészők, például Mozilla Firefox vagy Google Chrome
• Hasznos, de e cikk alkalmazási körén kívül található meg tárhely vagy helyi szerver (például XAMPP) beállít.

Kényelmesebb, ha kevésbé állandó jellegű alternatívák a web alapú élő szerkesztők, például:

• Codepen.io
• JSbin.com

Rövid vágások

A HTML struktúrák nagyrészt jól érthetőek, és nem pontosan érdemesek megismételni nagy gyakorisággal. A CSS esetében az átlagos webhely stíluslapja több ezer sor hosszú, és fogadhat, hogy kevés modernet írnak kizárólag kézzel. És az interaktivitás szempontjából bizonyos szabványok jelentek meg. Ezen tények alapján azt tapasztalhatja, hogy sok front-end fejlesztő az előre elkészített keretrendszereket gerincként használja, majd szükség szerint finomítja, eltávolítja vagy helyettesíti.

• bootstrap, amelyet eredetileg a Twitter fejlesztett ki, HTML, CSS és JS sablonokat tartalmaz, amelyek ma széles körben megtalálhatók az interneten. A bootstrap majdnem egy lingua franca a webfejlesztés kezdetén.
• Alapítvány a világ legfejlettebb keretének számít, és a kis méretre és a sebességre összpontosítva épül.

Referencia anyag

• Lista apart - A-listás kiadvány „Az emberek számára, akik weboldalakat készítenek”
• Használhatom - „Táblázatok a HTML5, CSS3 stb. Számára”
• CSS-trükkök - Központ a CSS közösség számára, és a legjobb gyakorlatokkal és a kompatibilitással kapcsolatos ismeretek szökőkútja
• HTML Living Standard dokumentáció - „Életminőség - kiadás webfejlesztőnek”
• HTML5 kérem - „Használja az új és fényes felelõsségteljesen”
• Smashing Magazine - “Professzionális webes tervezők és fejlesztők számára”

Következtetés

Reméljük, hogy élvezte ezt az irányítást a front-end világában. Mint láthatja, a front-end fejlesztés egy olyan terület, amely sok lehetőséggel van tele, de sok belépési ponttal rendelkezik. Ennek megtanulása lenyűgöző képességeket ad a portfóliójához, és lehetővé teszi a karrier következő lépésének megtételét, vagy egy teljesen új szintre való áttérést.

Fejlesztők: Mi van a front-end veremben?

Kezdők: Mit tehettünk volna még ön orientálására?