Webfejlesztés és dizájn 101

web_development_101Szeretné megismerni a webfejlesztés és a tervezés alapjait? Fantasztikus…


De van egy probléma ezzel a gondolatmenettel, vagy valójában számos ilyen ember…

  • Mi a célja egy weboldal létrehozásának?? Vajon mindenkinek szüksége van egyre??
  • Ha igen, hogyan készíthetsz egy minőségi weboldalt?? Vagy más szavakkal: hogyan tanulja meg az alapvető webes fejlesztéseket és tervezéseket, amelyek lehetővé teszik, hogy saját maga elkészítse ezt a minőségi weboldalt?
  • Ennél is fontosabb, hogy el tud-e készíteni egy minőségi weboldalt az első próbálkozáson? Vagy szükség van mögötted hosszú éves tapasztalatra, mielőtt bármilyen eredményt remélhet?

Válaszoljunk mindezt ebben kezdő útmutató a webfejlesztéshez és a dizájnhoz.

[Spoiler figyelmeztetés. Ja, minőségi weboldalt építhet fel az első próbálkozáson.]

Mit tartalmaz ez az útmutató?

Oké, először is az első, örülünk annak, hogy tovább olvasott, és úgy döntött, hogy próbálkozik a webfejlesztéssel! Így fog játszani:

A fejezetek nagyon egyszerűen vannak bemutatva, a fő tartalom a bal oldalon, a működőképes elemek pedig a jobb oldalon. Tetszik:

Útmutató bevezetéshez: 1. fejezet

Most, hogyan kell folytatni:

  • Mialatt az első olvasod: Javasoljuk, hogy olvassa el az egész dolgot fentről lefelé. Ez jó 10 000 láb képet nyújt a témáról, és segít megérteni a legfontosabb részeit. Alapvető eszközöket és módszereket is nyújt Önnek az egyes feladatok kezelésére.
  • Amíg a második olvasod, és tovább: Használd a TOC-t, és ugorj át arra a részre, amely a leginkább érdekli. Ezenkívül nyugodtan használhatja az egyes fejezetek melletti megosztási gombokat, és küldje el a linkeket magadnak vagy barátainak / követőinek, akiket érdekelhet.

Kész? Menjünk az 1. fejezethez.

Ki számára ez az útmutató?

Ha el szeretné tanulni az alapvető webes fejlesztéseket és a dizájnt, ez az útmutató az Ön számára. Bármi legyen is a motiváció.

Ezenkívül az induláshoz nincs szüksége előzetes műszaki ismeretekre (az „alapvető webes ismeretek” kivételével). Az útmutató lényege, hogy egyfajta „101” tanfolyam legyen mindenki számára, akit érdekel a weboldalak készítése és a webfejlesztés elsajátítása.

Íme néhány általános ok, amiért érdekli lehet:

  • 1. SZÖVEG egy webhelyet vállalkozása számára (és azt szeretné megtudni, hogy el tudja-e készíteni magad is).
  • 2. A webfejlesztést a szenvedélyből vagy ideiglenes érdeklődésből szeretné megtanulni (ebben semmi rossz).
  • 3. SZÖVEGNY egy weboldalt az iskolához.
  • 4. SEGÍTSEN egy barátot vagy családtagot, hogy weboldalad online legyen.

A fő ötlet, amely irányít minket

Ez fontos! És kérlek, ne haragudjon ránk, ha fejlett webfejlesztő vagy, aki ezt olvassa, de a fő ötlet, amely az egész webes fejlesztési és tervezési 101 erőforrás során irányít minket:

„A legkevesebb ellenállás megközelítése”

Itt állnak a legkevesebb ellenállású megközelítés három alapelve:

  • vagyunk nem bontja le a dolgokat molekuláris szinten. Azaz. nem fogjuk megismerni azt, hogy hogyan működnek a programozási nyelvek, vagy hogyan működik egy webszerver.
  • vagyunk nem feltalálta a kereket. Azaz. ha valaki már megoldott egy adott problémát és elérhetővé tette a megoldást, akkor ezt fogjuk használni.
  • vagyunk félelmetesvé teszi egy egyszerű megoldást, nem bonyolult és látszólag funkcionálisabb megoldás, hibás és nem érthető.

1. FEJEZET: A terv

Ötlete, webhely típusa, domain név és tárhely.

Mielőtt létrehozna egy webhelyet, szüksége lesz egy tervre

Ironikus, amilyennek hangzik is – a 80-as évek slágereiben az „A-csapat” megtanította nekünk, jó terv egy A siker kulcsa.

Ha már egy ideje egy webhely ült benned, akkor biztosan izgatott az egyetlen gondolat, hogy végre mások számára elolvassa és olvashatja és böngészheti.

Azt szeretné, hogy webhelye fantasztikus legyen. Valószínűleg tudod, hogy fog kinézni bizonyos mértékig. Vagy talán még a tökéletes logó is készen áll.

De…

Egyáltalán nem itt kell kezdenie. Ha előre meghatározott elvárásokkal kezdjük, akkor ez csak sok zavart okoz az út mentén, és a rész végén eredményt eredményez.

Ehelyett gondoljon a következőkre:

  1. Válassza el magát minden esetleges technikai céltól. Mint például a weboldal-technológiák vagy bizonyos weboldal-szoftverek tanulásának célja.
  2. Tegyen fel egy fő kérdést: – Mire kell a webhely?

Ez nem rólad szól, hanem a weboldal céljáról.

Kérdések, amelyeket fel kell tenned magadtól, mielőtt beállítanák a webhelyet

  1. Mit szándékozik elérni a webhelyen??
  2. Mi lesz a webhelyen bemutatott fő „dolog”? (például vállalkozása, termék, blogbejegyzéseid stb.)
  3. Van-e a weboldalnak speciális célja? (például egy e-kereskedelmi áruház, fotós portfóliója stb.)
  4. Ki a célközönség??
  5. Miért érdekli őket az oldal témája??
  6. Milyen fájdalmat okoz az oldal az egyes közönség tagjai számára?

Az utolsó 3 kérdésről beszéljünk egy percig a közönségről …

2 fő szabály van a weboldal készítésére. Itt van az 1. szabály:

 Az olvasó / látogató jön az első. Ők a fő személyek, akiknek a webhelyednek kellemesnek kell lennie.

Bizonyos szempontból a webhelye nem a sajátja. Az övék.

(A 2. szabályt egy perc alatt megvitatjuk.)

Ha elfelejti ezt az egyszerű irányelvet, akkor teljesen rossz irányba vezethet, egészen addig a pontig, amikor egy olyan webhelyre találja magát, amely zavaró mindenki számára, kivéve az ön környékén.

„Huh! Az emberek csak nem értik, mi az a webhely. Hogy lehetnek olyan tudatlanok ?! ” – végül gondolkodsz. De amint kiderül, a tudatlan voltál te.

Ennek elkerülésének egyetlen módja az, ha a weboldalt az olvasóval szem előtt tartva alakítja ki közvetlenül a get-go programból.

Tehát… vegye be ezt a darabot, és válaszoljon a fenti kérdésekre.

Miután elkészült, megvan a legfontosabb iránymutatások, amelyekre a webhelyén végzett munka során fog lépni.

Ezek a válaszok rendkívül hatékony eszköz lesz, ahogy megy. Ön bármikor visszatérhet hozzájuk, amikor a webhelyével kapcsolatos döntéssel szembesül.

Meg kellene tennie * ezt * vagy * azt *? Lépjen a válaszlapra, és megtudja. Használjon széles vagy keskeny oldalsávot? Keresse meg a válaszokat, megtudja, melyik valószínűbb, hogy visszhangzik a célolvasóval. Satöbbi.

Domain nevek és webtárhely

Ha webhelytulajdonos akar lenni, akkor domainnevére és egy internetes hostra van szüksége.

Nos, oké, műszaki szempontból mindegyik teszt webhelyet felépítheti saját számítógépére, majd futtathatja egy helyi webszerverből (a számítógépre szoftverként telepítve is), de ez nem lenne használható megoldás a webhely 99% -ának. esetekben, szóval hagyjuk ki.

Tehát egy gazdagép és egy domain…

A rossz hír az, hogy mindkettő pénzbe kerül.

A jó hír … ez nem annyira pénz a dolgok nagy rendszerében. Ráadásul a tanulás során akár több kis webhelyet is elindíthat egyetlen domain névvel és egyetlen webgazda alatt.

De kezdjük el az elején.

Webgazda:

  • Egyszerűen fogalmazva: egy internetes házigazda az, ahol az Ön weboldala található, és ahol a látogatók megtalálhatják. Bizonyos értelemben a webhelyek webtárhelyei ugyanúgy vannak, mint az emberek apartmanjai. A motorháztető alatt az internetes házigazdák olyan vállalatok, amelyek pénzért cserébe bocsátják ki kiszolgálóikat (… kis lakások az Ön webhelyére).
  • Az induláshoz egy megosztott tárhely-terv készül. Ezek bármiért megszerezhetők, akár 3 dollárból is havonta. Íme egy szép összehasonlítás a népszerű internetes gazdagépekről. Nézze meg, és döntse el, melyik vállalkozás tűnik Önnek legmegfelelőbbnek. Ajánlásaink azonban a SiteGround, az A2 Hosting és a Dreamhost webhelyekre vonatkoznak.

Domain:

  • Ha egy webgazda lakás, akkor egy domain a lakás címe. Például ezen webhely domainje a hostfacts.com.
  • Az indulás módja az, ha kiválasztja a kívánt domain nevet, majd megvásárolja azt egy nyilvántartóból. Itt található egy átfogó útmutató a domain név megvásárlásához, és itt található a domain név generátorok listája.

 

Javaslatok és tippek a domain név kiválasztásához

Oké, tehát egy dolog valamelyik domainregisztrátorhoz fordulni, és valójában a domain megvásárlása egy dolog, de hogyan kell kiválasztani a megfelelő domain nevet?

Van néhány iskola:

  • Márkás domainnevek. Ezek olyan domainek, amelyek nem létező szavakból állnak. Gondolj olyan dolgokra, mint a Google.com vagy a Yahoo.com. Mielőtt ezek a társaságok jöttek volna, ezek a szavak nem jelentettek semmit. A márkás domain név hátránya, hogy ez… jól, erősen márkázható, emlékezetes és könnyű megkülönböztetni webhelyét a többitől.
  • Kulcsszó alapú nevek. Ezek létező szavakból állnak, egy sorrendbe helyezve, amely leírja a webhely célját. Gondolj olyan dolgokra, mint a Pizza.com vagy a StartBloggingOnline.com. Ilyen domain névvel a látogatók pontosan meg tudják jósolni, hogy milyen webhelyet éppen látogatnak. A hátránya, hogy ezek a domének általában kevésbé márkázhatók.
  • Kombinált nevek. Ezek márkás és kulcsszó-alapú domainek összesítve. Gondolj, a Facebook.com vagy a Copyblogger.com. Az ilyen nevek a webhely természetének „valamilyen” részét sugallják a látogató számára, ám ezek továbbra is erősen márkázhatók.

Néhány általános útmutató, függetlenül a választott domain típusától:

  • A domain könnyen megjegyezhetővé tétele.
  • Legyen rövid és egyszerű. Minél hosszabb a domain, annál zavarosabb.
  • Szerezzen be .com-t (ha lehetséges). A .com a fő elérhető „felső szintű domain”. Ne rendezzen mással.
  • Próbálja meg elkerülni a kötőjeleket. Kérje meg nevét egyetlen blob formában, például „cakerecipes.com” a „cake-recipes.com” helyett

A fejezet után készen kell lennie:

  • Domain név.
  • Egy webgazda.
  • A válaszlapod – a webhely céljai és hogyan fogják kiszolgálni a közönséget.

További segítségre van szüksége? Itt van további olvasmány az Ön számára:

  • Miért megosztott tárhely? A házigazdák főbb típusai összehasonlítva
  • 10 dolog, ami jóvá teszi az internetes hostot
  • 12 szabály a megfelelő domain név kiválasztására
  • Átfogó webhelytervezési útmutató

2. FEJEZET: Tervezés és huzalkeretezés

Vegye ki a papírt és a tollat, és karcolja meg a webhely felépítésével

Oké, lépjünk be a tervezési szakaszba.

Először: itt van a munka etika, amellyel továbblépünk:

  • Addig tollat ​​és papírt használunk, ameddig csak lehetséges, és csak akkor váltsunk át a számítógépre. Hidd el nekünk, minden olyan perc, amelyet papíron dolgozunk a formatervezésen, egy óra megtakarítva, amikor elkezdi hangolni a dolgokat a számítógépen.
  • Iteratív munkát végezünk … »ellenőrizzük az eredményeket» javítsuk »ellenőrizzük az eredményeket» ismételjük meg, amíg kész.

Az 1. fejezetben megemlítettünk valamit, amelyet a weboldalépítés 1. szabályának hívtunk. Itt az ideje a 2. szabálynak:

A weboldalépítés 2. szabálya:

Először gondoljon a tartalomra.

A weboldalon a tartalom számít. Nem a dizájnt. Tartalom.

Az emberek jönnek a tartalomért. Nem a tervezésért jönnek. A formatervezés csak a tartalom szállítására szolgáló eszköz.

Soha ne kezdje el azzal, hogy webhelye hogyan néz ki. Kezdje a tartalommal. Tartalom. Tartalom. Tartalom.

Tehát mit értünk a „tartalom” alatt? Röviden: az a dolog, amit az emberek meg akarnak szerezni az Ön webhelyéről. Blogbejegyzések, áruházban lévő termékek, fórumszálak, ha fórumot épít, hírcikkek, üzleti ajánlata stb.

“Igazán? A kinézet valóban nem számít? ” – Kérdezed.

Ahelyett, hogy legyőznénk ezt, nézd meg ezt az oldalt:

Egyszerű weboldal

Ez az egyszerű weboldal messze a legjobb magyarázat arra, hogy mi a kialakítás és milyen célból szolgálja az internetet.

Tehát ne felejtsd el, először a tartalmat!

A weboldal tartalma és felépítése

Oké, tehát mivel a tartalom a legfontosabb dolog, előbb (legtöbb) készen kell állnia. Vagy legalább jól kell tudnod, hogy mekkora tartalom lesz és milyen formában.

Jegyzet. Tudjuk, hogy ez a rész nehéz lehet. A tartalommal való kezdés meglehetősen természetellenesnek tűnik a weblaptervezés szempontjából, de valójában ez a legjobb módja annak, hogy kiváló eredményt érjen el a végén. Tehát gondoljon arra a tartalomra, amelyet meg szeretne osztani az olvasóval, és hogyan kívánja bemutatni.

A következő lépés az, hogy kiválassza a szükséges oldaltípusokat (például kezdőlap, termékoldal, kategóriaoldal, egy oldalról, kapcsolattartó oldal, a fő értékesítési oldal, néhány hírlevél előfizetési céloldal, fő blogbejegyzés, egyes hozzászólások, esetleg üzlet, és bármi másra szükség van).

Gondoljon bele, mi a leghatékonyabb módja a tartalom weboldalon történő megszervezésének?

Mindezt papíron csináld. Valószínűleg könnyebb és gyorsabb lesz neked, mint ha megtanul egy darab rajzoló szoftvert a helyszínen.

Példa:

tartalom-struktúra

Scratch össze egy drótváz

A drótváz a webdizájnban egyszerűen csak egy sematikus oldal vagy tervrajz – egy weboldal keretét ábrázoló vizuális útmutató (a Wikipedia elmondja nekünk).

A drótvázak fantasztikusak! A legtöbb dolgunkban felhasználjuk őket, amelyek célja az online megjelenés. Íme például egy drótváz ennek a nagyon útmutatónak:

Kapcsolja össze a drótvázat

Mint láthatja, ez is papíron van. Annak ellenére, hogy többféle alkalmazás létezik ilyen jellegű munkára, valójában nem javasoljuk ezek használatát. Lehet, hogy nagyszerűek a profi tervezők számára, de a kezdő vagy a középhaladó személy csak időt veszít azok tanulásáért, és végül nem fog sok javulást elérni abban, amit tollal és papírral érne el..

Szóval, hogyan kell bekeretezni?

Nos, ha kezdő vagy, kétféle megközelítés létezik:

  • Menjen az áramláshoz, ha erősnek érzi magát, és csak húzzon el (nem mindig tökéletes megoldás).
  • Gyors ismereteket szerezhet a megfelelő drótváz kialakításáról (általában jobb).

Az utóbbi esetében menj ide – egy nagyszerű útmutató.

(Ügyeljen arra, hogy hozzon létre egy keretkeretet az összes fontos típusú oldalról, amelyet az előző lépésben felsorolt.)

A fejezet után készen kell lennie:

  • A webhely tartalmának nagy része, vagy legalábbis a legtöbb jósolta (például ha a felhasználó által létrehozott tartalomra támaszkodik, akkor nehéz ezt előzetesen megszerezni).
  • Webhelyének tartalmi struktúrája grafikonként elkészítve.
  • Az egyedi típusú oldalakat tartalmazó keret, amelyre szüksége lesz.

További irodalom:

  • 9 lépés a weboldal tartalmának tervezéséhez
  • Új a webdizájnban? Kezdd itt.

3. FEJEZET: UX és UI

Soha nem szabad alábecsülni a felhasználói élmény és a felhasználói felület fontosságát

Mint a felhasználói élmény és a felhasználói felület.

A WebDesignerDepot a következők meglehetősen költői definícióját adja meg:

A felhasználói felület a nyereg, a botok és az uralkodók.

Az UX az az érzés, hogy képes lovagolni és szarvasmarhát kötélre.

Praktikusabb meghatározás:

  • Az UI az, amit a felhasználó lát, amikor az Ön webhelyére pillant.
  • Az UX hogyan érzi magát ezzel.

A pár és annak kivitelezésének alapja meghatározza webhelyének hasznosságát a végfelhasználó / látogató számára.

Az UX és az UI kialakítása önmagában is nagy téma, és van egy csomó kisebb elem is, amelyek szerepet játszanak a végeredményben.

Röviden: még sokat kell tanulni, ha csak az utazása kezdődik.

Tehát ahelyett, hogy itt egy egész UX és UI tervezési kurzust próbálnánk lerázni, mutassunk meg egy maroknyi fontos elemet, majd küldjük el valahol máshová további olvasáshoz.

Felhasználói célok

Az UX a felhasználói célokról szól … Nem annyira a céljairól … Felhasználói célokról.

Oké, mit jelent ez? Mindenekelőtt térjen vissza webhelye céljára – arra a dologra, amelyen az előző fejezetekben dolgozott. Az az oka, hogy miért építi ki a weboldalt, és hogyan segíti a felhasználót / látogatókat.

Hogyan lehet ez a látogató célja? … Mi az, amit a látogató szeretne elérni vagy elérni, amikor az Ön webhelyére jön? Ez a célja.

Mennyire könnyű elérni ezeket a célokat?

Ezután összpontosítson a következő kérdésre:

  • Tud-e a látogató könnyen elérni célját? – Megtalálhatják-e a pontos információt egy egyszerű módon?

Ennek megválaszolásához vissza kell térnie a drótvázhoz, a tartalmi struktúrához és ellenőriznie kell a dolgokat.

Győződjön meg arról, hogy a tartalmi struktúra és az Ön által felállított oldalak a felhasználó szempontjából értelmesek-e. Ügyeljen arra, hogy a fontos oldalak között szabadon és nem zavaró módon tudnak navigálni.

Alapvetően itt azt győződjük meg, hogy a webhely értéket ad a látogatóknak.

Nehéz ezt egyedül kitalálni, nem az?

Nagyon ajánlott, hogy nézd meg a fejezet „további olvasata” szakaszában felsorolt ​​forrásokat … de kipróbálhatod a hacket is.

Nevezetesen gondoljon arra, mi zavar téged olyan webhelyek felkeresésekor, amelyek hasonlóak az építeni kívánthoz? Talán van olyan információ, amelybe nagyon nehéz hozzáférni, vagy olyan felület, amely zavarossá teszi a webhelyet.

Jegyezzen fel, következtetéseket vonjon le, ne tévessze fel ugyanazokat a hibákat az Ön webhelyén.

Az érzelem mint eszköz használata

Amikor webhelyének felhasználói felületén és felhasználói felületén dolgozik, alapvetően arra törekszik, hogy bizonyos érzelmeket hívjon fel a látogatóban.

Azt akarja, hogy bizonyos módon érezzék magukat, ami rá fogja győzni őket, hogy bizonyos módon viselkedjenek. Így webhelye valóban hasznossá válik.

A munka érzelmi részének kezeléséhez az egyik legjobb eszköz a szín.

A színeknek különböző jelentése van a különböző kultúrákban. Ezen különbségek megértése sokkal könnyebbé teheti a munkáját. Itt egy szép csaló lap.

Miután befejezte a ballparkban, hogy milyen színeket kíván (esetleg) használni, íme néhány általános útmutató a színekkel való munka során:

  • Válasszon egy fő színsémát, amely egy pár, egymáshoz jól illeszkedő színből áll. Ez egy nagyszerű színösszeállítás-generátor.
  • Válasszon egy olyan színt, amely az Ön színe lesz – az a szín, amelyet a műveleti gombokhoz, a vásárlásgombokhoz stb. Fog használni. Alapvetően bármi, ami a felhasználó figyelmét igényli.

Tipográfia

Sok esetben a tipográfia az, ahol megnyeri (vagy elveszíti) a weboldalépítés játékát.

Olyan annyira könnyű elfelejteni a tipográfiát, hogy mindenhez csak az Arial-t használja.

Nem ajánlott.

Manapság az egyéni betűtípusokkal való munka rendkívül egyszerű, és Önnek semmit sem kell tennie technikailag, hogy engedélyezze ezeket az egyéni betűkészleteket a webhelyén..

A nagy, nagyszerű tipográfia manapság nagyon divatos, és ez is megkönnyíti a tervező munkáját – különösen a kezdő tervező munkáját – és megkönnyíti a tervező munkáját..

Nézze meg például ezt a webhelyet:

bonobók

Nem vett észre semmit? Igen, a betűtípusok hatalmasak, és jól néznek ki!

A következő módon dolgozhat tovább:

  • Általában minden webhelytervezésnek kétféle szövegre van szüksége: fejezetek és bekezdések. A legtöbb esetben mindegyiknél csak egy betűkészlet fog működni.
  • Lépjen a Google Fonts oldalra – a Google saját betűtípusok könyvtárára, amelyet használhat a webhelyén -, és keressen egy olyan címsort, amelyet igazán élvez.
  • Ezután vegye fel a betűtípus nevét, és keresse meg a Font Pair-en – ez egy előre elkészített betűkészlet-párosítás, amely jól illeszkedik egymáshoz.
  • Válasszon egy párosítást, amely fantasztikusnak tűnik.
  • Írja le mindkét betűkészlet nevét, később szüksége lesz rájuk.

Ha így tenné, felgyorsítja a folyamatot, és mégis nagyszerű eredményeket hoz.

Példa találtunk egy Bree Serif nevű betűtípust a Google Fonts-ban, amelyet nagyon élvezünk:

Bree-Serif

Ezután a Font Pair-hez vittük, és az oldal azt sugallta, hogy Bree Serif jól működik az Open Sans-szel. Tökéletes:

Bree-Serif-open-sans

A végső felépítés

Végül az utolsó lépés!

Ennek a fejezetnek az a lényege, hogy egy végleges elrendezésre / szerkezetre szálljon, amelyet a webhelyén használni fog. Ezen a ponton szinte biztosnak kell lennie a dizájnnal és az felhasználói felülettel kapcsolatos dolgokról.

A fejezet után készen kell lennie:

  • A felhasználói célok világosan fel vannak sorolva.
  • A drótvázát két alkalommal ellenőrizte, hogy megbizonyosodjon arról, hogy ezek a célok nem zavarják-e meg őket.
  • A kiválasztott színséma.
  • A tipográfia kitalált.
  • A teljes webhely elrendezése / felépítése / szervezése.

További irodalom: 

  • UX Magazine
  • UX Booth
  • A színek mögött álló pszichológia és érzelmek a webdesignban
  • Mi a felhasználói élmény kialakítása? Áttekintés, eszközök és források
  • Intelligens üzleti célok meghatározása egy weboldal számára
  • A hatékony tipográfia létrehozásának 8 szabálya

4. FEJEZET: WordPress, HTML vagy sablonok?

Döntse el, hogy melyik utat választja – tartalomkezelő rendszerek, vagy kódolja azt a semmiből

Itt kezdődik az igazi, kézzel szennyezett, motorháztető alatt működő munka!

Ez valószínűleg a folyamat legfélelmetesebb része is (elismerjük!).

Egyszer itt a megfelelő idő, hogy tegye félre a tollat ​​és a papírt, és kezdjen el dolgozni valamilyen szoftverrel.

És közvetlenül a kapunál van egy csomó kérdés …

  • Tanulnom kellene HTML-t?
  • Mi a helyzet a CSS-sel??
  • A kész HTML webhelysablonok megmutatják nekem a trükköt?
  • Tanulnom kell olyan programozási nyelvet, mint a PHP?
  • Hallottam, hogy manapság a WordPress a webhely felépítésének módja.
  • Láttam a Squarespace Super Bowl hirdetést. Mi van vele??
  • Mi ez a Joomla nevű dolog? vagy Drupal?
  • és tovább, és tovább.

Mindezen kérdésekre a válasz igen.

Mint itt: igen, megteheted ezeket a dolgokat, vagy mindegyiket, és csak rajtad múlik, hogy eldönti, melyik utat választja.

Amit meg akarunk mondani, hogy itt nincs a # 1 legjobb megközelítés. Minden attól függ, hogy mennyire részt vesz a webfejlesztésben, mennyi webhely-készítési alapot szeretne megtanulni, milyen gyorsan szüksége van egy minőségi webhely elkészítésére, és milyen testreszabhatóvá kívánja tenni utána.

Tehát itt van, hogyan folytathatjuk ezt a fejezetet előre. Első, válassza ki a legmeghatározóbb személyt:

  • a) Meg akarom tanulni, hogy mi szól a webfejlesztésről, a webhely összes alapjáról, minden belső működéséről és minden olyan mechanizmusról, amely a web működését teszi lehetővé.
  • b) Meg akarom tanulni egy megbízható weboldal-készítő használatát, amely számomra a nehéz emelők nagy részét fogja kezelni.
  • c) Nem tudom, mit tegyek. Csak egy olyan weboldalt akarok, amelyet el tudok készíteni, és amely megfelelően működik.

Válaszolt a)? Folytassák az 5. fejezettel.

Megválaszolt b)? Folytassák a 6. fejezettel.

Megválaszolt c)? Nyugodtan nézze meg ezt a cikket, majd térjen vissza (ez segíthet a tökéletes út kiválasztásában):

  • 8 legjobb blogszerzési és weboldalépítő platform áttekintése … Minden platformot ismertetik annak előnyeivel és hátrányaival együtt, és az erőforrás javasolja az Ön igényeinek leginkább megfelelő választást (Wix vagy SB)..

Elolvasta? Nagy! Tehát a fenti személyek közül melyik jellemzi a legjobban – a) vagy b)?

Az eszközök, amelyek hasznosak lehetnek az út mentén:

  • Grafika: Paint.NET, Gimp, Pixlr.
  • Kódírás: Notepad ++, TextWrangler, SublimeText.
  • Munkamenedzsment: Trello.
  • Tervezés: színsémák, Google betűtípusok, az itt elérhető eszközök.
  • Fotózás: Unsplash, AllTheFreeStock

5. FEJEZET: Bevezetés a HTML-be, a CSS-be & Javascript

Hogy a webhelyek beépített valóság?

Ebben a fejezetben rámutatunk a webfejlesztés csupasz alapjaira, magyarázzuk el a legfontosabb fogalmakat, majd átadjuk Önt bizonyos speciális forrásokhoz, ahol tovább tudjuk továbbfejleszteni tudásodat és készségeidet..

HTML

A HTML a webhelyek nyelve. Minden weboldal valamikor épül vagy HTML formátumra konvertálódik.

Például ahhoz, hogy megnézze ennek az itt olvasott útmutatónak a HTML szerkezetét, csak nyomja meg a billentyűzeten a „Ctrl + U” billentyűt.

A HTML minden weboldalon megjelenő blokkot meghatároz. A nap végén ahhoz, hogy bármit meg lehessen jeleníteni egy weboldalon, HTML formátumra kell konvertálni.

A HTML hatékony megtanulásához azt javasoljuk, hogy jelentkezzen be az interneten elérhető (ingyenes vagy fizetett) kurzusokra. A legjobbak közül néhány megtalálható a Codeacademy-ben vagy a Treehouse-ban.

Például, itt található egy speciális szakasz a Codeacademy-ről, amely a HTML-ről és a CSS-ről szól.

A CodeCademy honlapja

Tehát ez a HTML átfogó megközelítése.

CSS

A CSS – az unalmas műszaki részek átugrása érdekében – mindazok kialakításáért felelős, amelyek a weboldalon láthatóak.

A CSS elkészíti a HTML-címkéket, majd felépíti és stílusokat ad hozzá. Ilyen dolgok: vastag szöveg, színbeállítások, árnyékok, elrendezések és akár animációk is, főleg a CSS segítségével történik..

Annak érdekében, hogy jobban megértse, hogyan működik ez pontosan, ugorjon erre a gyors tanfolyamra a Codeacademynél.

A mélyebb tanulás érdekében ellenőrizze a CSS szakaszokat is a Codeacademy vagy a Treehouse oldalon.

JavaScript, jQuery, Bootstrap stb.

A JavaScript egy programozási nyelv, amely lehetővé teszi néhány dinamikus művelet bevezetését a webhelyén. Például megteheti az internetes űrlapokat és ellenőrizheti a felhasználót, anélkül, hogy újra kellene töltenie a jelenlegi oldalt. Ez egy szép bemutató a w3schools-nak.

Ezt szem előtt tartva, a jQuery egy JavaScript könyvtár, amely lehetővé teszi fejlett dolgok létrehozását kevesebb kódolással. Nagyon praktikus egy webfejlesztő számára. Tudjon meg többet itt.

Végül, a Bootstrap egy nagyon érdekes találmány. Az eredetileg a Twitter által bevezetett alapvetően egy olyan felhasználói felület, amely felgyorsítja a weboldal létrehozásának folyamatát azáltal, hogy a legtöbb előre elkészített webhely-elemet átadja. Bonyolultnak hangzik, nem igaz?

De nem az. Csak nézd meg ezt a kezdő tanfolyamot a Codeacademy-n (egyébként ez az, amire eredetileg megtanultuk a Bootstrap-ot).

A fejezet után készen kell lennie:

  • Alapvetően a HTML / CSS webhelyének első terve teljesen elkészült. Innentől kezdve iterálhatja és javíthatja a végeredményt.

6. FEJEZET: Weboldal-készítő platformok

Az első webhely felállítása? Próbálja ki ingyenes webhely-platformokat, például a WordPress, a Joomla vagy a Drupal

6. fejezet: Weboldal-készítési platformok

  • Squarespace
  • WordPress
  • Joomla & Drupal

Több weboldal-készítő van odakinn, mint amennyit rázni tud. (Ha olyan ember vagy, aki rázza a dolgokat.)

Oké, félre viccelődsz.

Nyilvánvaló, hogy ha nem akarja megtanulni, hogyan kell kódolni a dolgokat kézzel, akkor biztosan több megoldás is segít,.

Jegyzet. Kérjük, ne feledje, hogy minden más, amelyet az 1-4. Fejezetben tárgyaltunk, itt is érvényes. Még akkor is, ha egy olyan webhely-kiépítési megoldással jár, amely valamilyen kézbesítést jelent, továbbra is óvatosnak kell lennie, hogy a végterméket barátságosvá tegye a felhasználók számára, és összhangban álljon mindenki céljaival. Ezek a site-building eszközök pontosan azok a szerszámok.

Kezdve azokkal, amelyeket a legkönnyebben meg lehet ragadni:

Squarespace

Az egyetlen webhely-platform, amely a Super Bowl során hirdet.

Röviden: egy nagyon praktikus megoldás, amelyet bárki felhasználhat. Nincs szükség előzetes készségekre.

Ez lehetővé teszi klasszikus webhelyek, blogok, akár e-kereskedelmi boltok készítését is. A felületet és a teljes felhasználási folyamatot meglehetősen könnyű megérteni, a Squarespace srácok pedig sok érdekes útmutatást nyújtanak. Nézze meg őket itt.

WordPress

Őszintén szólva, szeretjük a WordPress-t.

Leggyakrabban ez a tökéletes platform egy weboldal létrehozásához. A tökéletes egyensúly a komplexitás és a könnyű használat között, és alapvetően végtelenül testreszabható.

WordPress animáció

Ezenkívül jelenleg ez a legnépszerűbb webhely-platform mindegyiküknél. Mint a WordPress alkotója – Matt Mullenweg -, a WordPress most az egész internet 25% -át birtokolja. Vajon mindenki tévedhet??

Oké, tehát a WordPress használatának megkezdéséhez alapvetően csak a domainre és a hostra van szüksége. Maga a WordPress szoftver teljesen ingyenes.

A kezdéshez nyugodtan kövesse az alábbi utak egyikét:

a) „A gyors indulási út”

  • Ide kattintva megismerheti a WordPress egyszerű telepítésének módját és a webhely délután indítását.
  • Válasszon egy ingyenes témát a hivatalos könyvtárból – ellenőrizze, hogy az összhangban áll-e a webhely céljaival, és hogy az elrendezés / forma ne legyen messze a kívánt struktúrától (kissé módosítani fogja).
    • Ellenőrizze a két forrást, hogy megtanulja, hogyan lehet testreszabni egy meglévő témát.
    • Alternatív megoldásként választhat egy többcélú prémium témát, amelyet beállíthat egy praktikus felhasználói felületen (kódolás nélkül). Az X téma jó példa erre.
  • Telepítse a legnépszerűbb és a legjobb bővítményeket az extra szolgáltatások eléréséhez.

b) „A mély út”

  • Kezdje a WordPress online tanfolyamon történő megtanulásával. A Treehouse fantasztikusat kínál.
  • Válaszd ki a témát és a bővítményeket, ahogy a fentiekben is. Alternatív megoldásként építheti fel saját témáját az alapoktól kezdve.

Végül a WordPress valószínűleg a legversenyképesebb webhely-platform a piacon. Ezzel szinte bármilyen webhelyet felépíthet, nemcsak blogokat vagy egyszerű üzleti webhelyeket. Az alábbiakban felsoroljuk a WordPress 47 (!) Különböző használatának módját, csak azért, hogy elgondolkodjon.

Joomla és Drupal

Bár a Joomla és a Drupal kissé különböznek egymástól, kiváló tartalomkezelő rendszerek a fejlettebb webprojektekhez.

Nem olyan erős a tervezés szempontjából, de nagyon testreszabhatók és képesek bármilyen webhely kezelésére, amely a tervek szerint lehetséges.

Időnként, a projekt összetettségétől függően, sokkal több időt igényelhet a mesterképzésre és sokkal több erőfeszítésre.

A mélyebb képzéshez fantasztikus tanfolyamok találhatók a Lynda.com webhelyen, mind Joomla, mind Drupal számára.

A fejezet után készen kell lennie:

  • A webhely első terve teljesen elkészült, függetlenül attól, hogy a WordPress-t vagy más platformat választotta-e.
  • Ellenőrizze, hogy összhangban áll-e a kezdeti célokkal, a célközönséggel, és hogy jó UX-t eredményez-e.

7. FEJEZET: Mobil érzékeny tervezés

Az emberek több mint 60% -a mobiltelefonokat és táblagépeket használ az internet böngészéséhez

A mobil válaszkészség ma nagyon fontos szempont a weboldal készítésében, valószínűleg inkább, mint valaha.

A következő kérdés szól:

Alapvetően manapság több ember használja mobil eszközöket az internet eléréséhez, mint valaha. Valójában a becslések szerint ma már több mobil internet-felhasználó van, mint asztali internet-felhasználó (75,1% vs 52,7%).

De van egy probléma.

Nem minden weboldal kialakítását fogják optimalizálni úgy, hogy a mobil eszközökön a kapun kívül is meg lehessen nézni.

Néhány általános probléma a következő:

  • a betűtípusok túl kicsik,
  • maga az elrendezés egyáltalán nem igazodik a kisebb képernyőhöz,
  • vagy a webhely felépítéséhez használt technológia, amely nem érhető el mobilon.

Itt játszik szerepet a mobil válaszkészség ötlete.

Egy érzékeny webhely reagál a megtekintett környezetre. Ha asztali számítógépről van szó, akkor a webhely bizonyos módon jeleníti meg. Ha ez egy mobil, akkor másképp teszi lehetővé.

Íme egy jobb magyarázat: Mi a Heck rugalmas webdesign?

Tehát a mostani tennivaló az lenne, hogy ellenőriznénk és ellenőrizzük, hogy webhelye működik-e mobil eszközökön. Használja saját eszközeit ennek ellenőrzéséhez, de próbálkozzon a Google mobiltesztjével, vagy ugorjon át egy olyan eszközre, mint a Responsive Design Tester..

Ha vannak problémák, akkor ezeket meg kell javítani.

Néhány megoldás:

  • Rugalmas webdesign – a használati útmutató
  • Hogyan lehet a weboldalt reagálni körülbelül 15 perc alatt

8. FEJEZET: Mindent összehozunk

Ismeri az alapokat, most a te sorod

Várj, majdnem ott vagyunk!

Ez a meglehetősen hosszú utazásunk utolsó fejezete.

Ezen a ponton el kell készítenie első webhelyét … Legyen szó a WordPressről, a kézzel készített HTML / CSS-ről, valamilyen weboldalkészítőről vagy bármilyen más eszközről, amelyet a munkához kiválasztott.

Röviden, gratulálok! De van még néhány dolgot érdemes megtenni:

  • Ellenőrizze újra az 1. és 2. fejezetben tárgyalt dolgokat. Győződjön meg arról, hogy a célok valóban működnek a végfelhasználó számára, és hogy a webhely nem zavarja meg.
  • Érvényesítse a kódszerkezetet a W3C jelölés-ellenőrző szolgáltatásán keresztül.
  • Ellenőrizze, hogy nincs-e biztonsági probléma a webhelyen. Ehhez használja a Sucuri szkennerét.
  • Kap visszajelzést a közösségtől. Ellenőrizze, hogy mások mit gondolnak a munkájáról. A Sitepointon átadott fórumok erre jóak lehetnek.

Ha ez az első olvasmány erről az erőforrásról, akkor valóban azt javasoljuk, hogy jöjjön vissza hozzá néhányszor, és kezelje referenciafájlként a továbbképzéséhez.

Mint az elején mondtuk, nyugodtan használhatja a TOC-t, és navigáljon fejezetekről fejezetekre és erőforrások között erőforrásokra, ahogyan te látja.

Végül kíváncsi vagyunk … mi a legnagyobb kihívás a weboldal készítése, a webfejlesztés vagy a dizájn szempontjából? Kérjük, ossza meg a hozzászólásokban vagy a Twitter segítségével. Mindannyian fülünk!

Köszönet az olvasást, fantasztikus vagy!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector