Webový vývoj a design 101

web_development_101Chcete znát základy webového vývoje a designu? Skvělý…


Ale je tu problém s touto myšlenkou, nebo s řadou z nich …

  • Jaký je účel webové stránky? Opravdu to každý potřebuje?
  • Pokud ano, jak vytvoříte kvalitní web? Nebo jinými slovy, jak se naučíte základní vývoj webových aplikací a design, který vám umožní vytvořit si kvalitní web sami?
  • Ještě důležitější je, že si můžete při prvním pokusu vytvořit kvalitní web? Nebo potřebujete roky zkušeností za sebou, než budete moci doufat v jakýkoli výsledek nad strašlivým?

Odpovězme na to vše průvodce pro vývojáře a design webových stránek.

[Varování: spoiler. Jo, na první pokus si můžete vytvořit kvalitní web.]

Co je obsaženo v této příručce?

Dobře, nejprve to první, jsme rádi, že jste si neustále četli a že jste se rozhodli vyzkoušet vývoj webu! Zde je návod, jak se bude hrát:

Kapitoly jsou prezentovány velmi jednoduchým způsobem, přičemž hlavní obsah je vlevo a akční položky vpravo. Jako tak:

Průvodce úvodem: Kapitola 1

Jak postupovat:

  • Během prvního čtení: Doporučujeme si přečíst celou věc shora dolů. To vám poskytne dobrý pohled na téma 10 000 stop a pomůže vám pochopit jeho nejdůležitější části. Poskytne vám také základní nástroje a metody, jak zvládat jednotlivé úkoly.
  • Na druhé čtení a dále: Použijte TOC a přeskočte na část, která vás nejvíce zajímá. Nebojte se použít tlačítka sdílení vedle každé kapitoly a pošlete odkazy sami sobě nebo svým přátelům / následovníkům, kteří by vás mohli zajímat..

Jste připraveni? Pojďme na kapitolu 1.

Pro koho je tento průvodce určen?

Pokud se chcete naučit základní vývoj webových aplikací a design, tato příručka je pro vás. Ať už je vaše motivace jakákoli.

Rovněž nepotřebujete žádné předchozí technické znalosti, abyste mohli začít (kromě základních „webových dovedností“). Celým smyslem této příručky je být jakýmsi kurzem „101“ pro všechny zájemce o vytváření webových stránek a učení se vývoji webových aplikací.

Zde jsou některé běžné důvody, proč by vás mohly zajímat:

  • 1. POTŘEBUJETE web pro své podnikání (a chcete zjistit, zda si ji můžete postavit sami).
  • 2. Chcete se naučit vývoj webu z vášně nebo dočasného zájmu (na tom nic špatného).
  • 3. POTŘEBUJETE web pro školu.
  • 4. POMÁHÁTE příteli nebo rodinnému příslušníkovi, aby se jejich web stal online.

Hlavní myšlenka, která nás povede

Toto je důležité! A nebuďte na nás naštvaní, pokud jste pokročilý vývojář webu, který si toto přečte, ale hlavní myšlenka, která nás povede skrz celý tento webový vývojový a konstrukční zdroj 101, je:

„Nejméně odolný přístup“

Zde jsou tři principy přístupu s nejmenším odporem:

  • Jsme nerozkládat věci na molekulární úrovni. Tj. nebudeme se dostávat na konec toho, jak programovací jazyky fungují nebo jak webový server funguje.
  • Jsme nevynalézat kolo. Tj. Pokud již daný problém vyřešil a dané řešení zpřístupnil, použijeme jej.
  • Jsme takže je jednoduché řešení úžasné, spíše než komplikované a zdánlivě funkčnější řešení buggy a nesrozumitelné.

KAPITOLA 1: Plán

Váš nápad, typ webových stránek, název domény a hosting.

Než nastavíte web, budete potřebovat plán

Je ironické, jak by to mohlo znít – hit 80. let ukazuje, že „tým A“ nás naučil, dobrý plán je klíč k úspěchu.

Pokud v sobě už nějakou dobu sedíte web, pak jste určitě nadšeni jediným nápadem, jak to konečně dostat, aby ostatní mohli číst a procházet..

Chcete, aby vaše webové stránky byly úžasné. Pravděpodobně víte, jak to bude do určité míry vypadat. Nebo možná máte perfektní logo připravené.

Ale…

To není vůbec to, kde byste měli začít. Pokud začnete s předem stanovenými očekáváními, povede vás to pouze k velkému zmatku podél cesty a na konci dílčího výsledku.

Místo toho zvažte následující:

  1. Oddělte se od všech technických cílů, které byste mohli mít. Jako například cíl učení webových technologií nebo určitého webového softwaru.
  2. Položte si jednu hlavní otázku: “Na co potřebuji web?”

Nejde o vás, jedná se o cíl webu.

Otázky, které musíte položit, než nastavíte svůj web

  1. Co má web dosáhnout?
  2. Co bude hlavní „věcí“ prezentovanou na webu? (např. vaše firma, produkt, vaše blogové příspěvky atd.)
  3. Bude mít web nějaký zvláštní účel? (např. obchod s elektronickým obchodem, portfolio fotografů atd.)
  4. Kdo je cílová skupina?
  5. Proč se zajímají o téma webu?
  6. Jaké bolesti web řeší pro jednotlivé členy publika?

Pokud jde o tyto poslední 3 otázky, promluvme si na chvíli publikum …

Pro tvorbu webových stránek existují 2 hlavní pravidla. Zde je pravidlo č. 1:

 Čtenář / návštěvník je na prvním místě. Jsou to hlavní osoby, které váš web musí potěšit.

Svůj web určitě není váš. Je to jejich.

(Pravidlo č. 2 probereme za minutu.)

Zapomněli jste na toto jednoduché vodítko, které vás může vést úplně špatně, a to až do okamžiku, kdy se ocitnete s webem, který je matoucí pro všechny kolem vás, ale vy.

“Uh! Lidé prostě nechápou, o čem tento web je. Jak mohou být tak nevědomí ?! “ – nakonec přemýšlíš. Ale jak se ukázalo, ten nevědomý jsi byl ty.

Jediným způsobem, jak se tomu vyhnout, je vytvořit si svůj web s ohledem na čtenáře hned od začátku.

Takže … vezměte ten kus papíru a odpovězte na všechny výše uvedené otázky.

Až budete hotovi, budete mít konečný soubor pokynů, které budete při práci na svém webu jednat.

Tyto odpovědi budou během cesty mimořádně výkonným nástrojem. Budete se k nim moci vrátit, kdykoli budete čelit rozhodnutí ohledně svého webu.

Měli byste to udělat * nebo *? Přejděte na odpověď a zjistěte to. Měli byste použít široký nebo úzký postranní panel? Přejděte na odpovědi a zjistěte, která je pravděpodobnější, že rezonuje s cílovým čtenářem. Atd.

Názvy domén a webhosting

Pokud chcete být vlastníkem webových stránek, potřebujete doménové jméno a web hostitele.

Dobře, technicky řečeno, můžete si vytvořit testovací web na svém počítači a poté jej spustit z místního webového serveru (také nainstalovaného jako software ve vašem počítači), ale to by nebylo použitelné řešení pro 99% případy, tak to prostě přeskočíme.

Takže hostitel a doména…

Špatnou zprávou je, že oba stojí peníze.

Dobrá zpráva … ve velkém schématu věcí není tolik peněz. Navíc, jak se učíte, můžete dokonce spouštět několik malých webů na jednom doménovém jménu a pod jedním webovým hostitelem.

Začněme ale na začátku.

Weboví hostitelé:

  • Zjednodušeně řečeno, webový hostitel je místo, kde váš web sedí, a kde ho vaši návštěvníci najdou. Weboví hostitelé webů jsou svým způsobem stejně jako byty pro lidi. Pod kapotou jsou weboví hostitelé společnosti, které si pronajímají své servery výměnou za peníze (… malé byty pro vaše webové stránky).
  • Chcete-li začít, provede se standardní plán sdíleného hostování. Můžete si je pro cokoli začínat již od $ 3 / měsíc. Zde je pěkné srovnání populárních webových hostitelů. Podívejte se na to a rozhodněte se, která z těchto společností se vám jeví jako nejvhodnější. Naše doporučení však platí pro SiteGround, A2 Hosting a Dreamhost.

Domény:

  • Pokud je webový hostitel bytem, ​​pak je doménou adresa tohoto bytu. Doménou tohoto webu je například hostingfacts.com.
  • Způsob, jak začít, je vybrat požadované doménové jméno a poté jej koupit od registrátora. Zde je komplexní průvodce, jak koupit doménové jméno, a zde je seznam generátorů doménových jmen.

 

Návrhy a tipy pro výběr doménového jména

Dobře, takže jít do nějakého registrátora domény a vlastně koupit doménu je jedna věc, ale jak si vybrat správné doménové jméno?

Existuje několik škol:

  • Značková doménová jména. Jedná se o domény složené z neexistujících slov. Přemýšlejte například o Google.com nebo Yahoo.com. Než tyto společnosti přišly, tato slova nic neznamenala. Vzestupnou značkou značkového doménového jména je, že je … dobře, velmi značný, nezapomenutelný a je snadné odlišit váš web od ostatních..
  • Názvy na základě klíčových slov. Ty se skládají z existujících slov v sekvenci, která popisuje účel webu. Přemýšlejte například o Pizza.com nebo StartBloggingOnline.com. S takovým názvem domény budou vaši návštěvníci schopni přesně předpovědět, jaký web budou právě navštěvovat. Nevýhodou je, že tyto domény jsou obecně méně brandovatelné.
  • Kombinovaná jména. Jedná se o značkové domény a domény založené na klíčových slovech. Think, Facebook.com nebo Copyblogger.com. Taková jména naznačují návštěvníkovi „nějakou“ část webových stránek, ale jsou stále velmi značná.

Některé obecné pokyny bez ohledu na typ domény, který vyberete:

  • Usnadněte si zapamatování domény.
  • Ať je to krátké a jednoduché. Čím je doména delší, tím je matoucí.
  • Získejte .com (pokud je to možné). .Com je hlavní „dostupná doména nejvyšší úrovně“. Neuspokojte se s ničím jiným.
  • Pokuste se vyhnout spojovníkům. Získejte své jméno v podobě jednobunkových bloků, například „cakerecipes.com“ místo „cake-recipes.com“

Věci, které by měly být připraveny po této kapitole:

  • Název domény.
  • Webový hostitel.
  • Váš list odpovědí – cíle vašeho webu a způsob, jakým bude sloužit publiku.

Potřebujete další pomoc? Zde je další čtení:

  • Proč sdílený hosting? Porovnány hlavní typy hostitelů
  • 10 věcí, které web hostitele dobré
  • 12 pravidel pro výběr správného názvu domény
  • Komplexní průvodce pro plánování webových stránek

KAPITOLA 2: Navrhování a drátový model

Vezměte si papír a pero a poškrábejte se strukturou svého webu

Dobře, pojďme do fáze návrhu.

Nejdříve je tu pracovní etika, kterou jdeme sem:

  • Používáme pero a papír tak dlouho, jak jen můžeme, a teprve poté přepneme do počítače. Věřte nám, každou minutu strávenou prací na vašem návrhu na papíře ušetříte hodinu, jakmile začnete ladit věci v počítači.
  • Děláme iterační práci… děláme »kontrolujeme výsledky» zlepšujeme »kontrolujeme výsledky» opakujte do dokončení.

V kapitole 1 jsme zmínili něco, čemu říkáme pravidlo č. 1 při vytváření webových stránek. Nyní je čas na pravidlo č. 2:

Pravidlo č. 2 vytváření webových stránek:

Nejdříve přemýšlejte o obsahu.

Na obsahu záleží na obsahu. Ne design. Obsah.

Lidé přicházejí za obsah. Nepřišli na design. Konstrukce je pouze prostředkem k dodání obsahu.

Nikdy nezačínejte s tím, jak vypadá váš web. Začněte s obsahem. Obsah. Obsah. Obsah.

Co tedy myslíme pod pojmem „obsah“? Stručně řečeno, je to věc, kterou lidé chtějí získat z vašeho webu. Blogové příspěvky, produkty v obchodě, vlákna ve fórech, pokud vytváříte fórum, články se zprávami, obchodní nabídku atd.

“Opravdu? Na vzhledu opravdu nezáleží? “ – Ptáš se.

Místo toho, abychom to porazili, podívejte se na tuto stránku:

Jednoduchý web

Tato jednoduchá webová stránka je zdaleka nejlepším vysvětlením, co je design a jaký účel slouží online.

Takže pamatujte, nejprve se spokojte!

Obsah a struktura webových stránek

Dobře, takže protože obsah je nejdůležitější věc, musíte ji mít (většinu) připravenou předem. Nebo alespoň musíte mít dobrou představu o tom, kolik obsahu tam bude a v jaké formě.

Poznámka. Víme, že tato část může být těžká. Začátek s obsahem se pro design webových stránek jeví jako zcela nepřirozený, ale ve skutečnosti je to nejlepší způsob, jak nakonec dosáhnout skvělého výsledku. Takže přemýšlejte o obsahu, který chcete sdílet se čtenářem, a jak jej chcete prezentovat.

Dalším krokem je vyčlenění jednotlivých typů stránek, které budete potřebovat (jako je domovská stránka, stránka produktu, stránka kategorie, stránka o stránce, stránka kontaktu, hlavní stránka prodeje, vstupní stránka s předplatným zpravodaje, hlavní seznam blogů, jednotlivé příspěvky, snad obchod a cokoli dalšího, co se zdá být potřeba).

Přemýšlejte, jaký je nejúčinnější způsob uspořádání obsahu na webu?

To vše na papíře. Pravděpodobně pro vás bude snazší a rychlejší, než se naučit nějaký kus softwaru pro kreslení grafů na místě.

Příklad:

struktura obsahu

Poškrábejte drátový model

Drátový model ve webovém designu je jednoduše schéma stránky nebo plán – vizuální průvodce, který představuje rámec webové stránky (Wikipedia nám říká).

Drátové snímky jsou úžasné! Používáme je pro většinu věcí, které děláme a které se mají objevit online. Zde je například drátový model pro tento samotný průvodce:

Poškrábejte drátový model

Jak vidíte, znovu je to na papíře. Přestože pro tuto práci existuje více aplikací, ve skutečnosti je nedoporučujeme používat. Mohou být skvělé pro profesionální designéry, ale začátečník nebo přechodný člověk ztratí čas jen tím, že se je naučí, a nakonec nezíská moc zlepšení oproti tomu, čeho by dosáhli pomocí pera a papíru.

Jak tedy drátový model?

Pokud jste začátečník, existují dva přístupy:

  • Jestli se cítíte silní, jděte s proudem a prostě se odtáhněte (ne vždy dokonalé řešení).
  • Získejte několik rychlých znalostí o tom, jak správně drátový model (obvykle lepší).

Pokud jde o druhé, přejděte sem – skvělý průvodce.

(Nezapomeňte vytvořit drátový model všech důležitých typů stránek, které jste uvedli v předchozím kroku.)

Věci, které by měly být připraveny po této kapitole:

  • Většina obsahu webu nebo alespoň jeho většina předpovídala (například pokud se spoléháte na obsah generovaný uživateli, je obtížné jej předem získat).
  • Struktura obsahu vašeho webu připravená jako graf.
  • Drátový model jednotlivých typů stránek, které budete potřebovat.

Další čtení:

  • 9 kroků k plánování obsahu webových stránek
  • Nový web design? Začněte zde.

KAPITOLA 3: UX a UI

Nikdy nepodceňujte důležitost uživatelské zkušenosti a uživatelského rozhraní

Stejně jako v uživatelském prostředí a uživatelském rozhraní.

WebDesignerDepot nám dává poněkud poetickou definici těchto dvou:

UI je sedlo, třmeny a panování.

UX je pocit, že můžete jezdit na koni a pověsit si dobytek.

Pro praktičtější definici:

  • Uživatelské rozhraní je to, co uživatel vidí, když se podívá na váš web.
  • UX je, jak se o tom cítí.

Pár a jak dobře se provádí, v podstatě definuje užitečnost vašeho webu pro koncového uživatele / návštěvníka.

Design UX i UI jsou samy o sobě velkými tématy a ve finálním výsledku hraje roli celá řada menších prvků.

Stručně řečeno, je toho co se naučit, pokud právě začínáte svou cestu.

Takže namísto toho, abychom se zde pokusili stísnit celý kurz designu UX a UI, dovolte nám poukázat na hrst důležitých prvků a pak vás poslat někam jinam k dalšímu čtení.

Cíle uživatelů

UX je o uživatelských cílech … Ne tolik vašich cílů … Uživatelské cíle.

Dobře, co to znamená? Nejprve se vraťte k účelu svého webu – věci, na které jste pracovali v předchozích kapitolách. Důvod, proč vytváříte web a jak pomáhá uživateli / návštěvníkovi.

Jak se to promítne do cíle návštěvníka? … Co je to jediné, co chce návštěvník dosáhnout nebo dosáhnout, když přijde na váš web? To je jejich cíl.

Jak snadné jsou tyto cíle dosáhnout??

Dále se zaměřte na následující otázku:

  • Může návštěvník snadno dosáhnout svého cíle? – Mohou se snadno dostat k přesnému kusu informací, pro které přišli?

Chcete-li na to odpovědět, musíte se vrátit ke svému drátovému modelu, struktuře obsahu a zkontrolovat věci.

Ujistěte se, že struktura obsahu a stránky, které jste vymysleli, mají smysl z pohledu uživatele. Zajistěte, aby jim bylo možné procházet mezi důležitými stránkami volně a nezavádějícím způsobem.

V zásadě se zde ujišťujeme, že web přináší vašim návštěvníkům hodnotu.

Těžko na to přijít sami, není to tak?

Důrazně doporučujeme podívat se na zdroje uvedené v části „Další čtení“ této kapitoly … ale můžete také zkusit „hacknout“.

Konkrétně si představte, co vás frustruje, když navštívíte webové stránky, které jsou podobné těm, které chcete vytvořit? Možná existují nějaké informace, ke kterým je opravdu obtížné se dostat, nebo nějaký prvek rozhraní, díky kterému je web matoucí.

Dělejte si poznámky, vyvodzujte závěry, nedělejte na svém webu stejné chyby.

Použití emoce jako nástroje

Při práci na uživatelském rozhraní a uživatelském rozhraní vašeho webu v zásadě usilujete o vyvolání určité emoce návštěvníka..

Chcete, aby se cítili určitým způsobem, který je pak přesvědčí, aby jednali určitým způsobem. Díky tomu bude váš web opravdu užitečný.

Jedním z nejlepších nástrojů pro práci na emocionální části práce je barva.

Barvy mají v různých kulturách různé významy. Pochopení těchto rozdílů může vaši práci mnohem usnadnit. Tady je pěkný podváděcí list.

Jakmile jste v ballparku s tím, jaké barvy chcete (možná) použít, zde je několik obecných pokynů pro práci s barvami:

  • Vyberte si jedno hlavní barevné schéma skládající se z několika barev, které spolu dobře ladí. Tady je skvělý generátor barevných schémat.
  • Vyberte si jednu barvu, která bude vaší akcentní barvou – barvu, která bude použita pro akční tlačítka, tlačítka pro nákup atd. V podstatě cokoli, co vyžaduje pozornost uživatele.

Typografie

V mnoha případech je typografie místem, kde vyhrajete (nebo ztratíte) hru na vytváření webových stránek.

Je tak soooo snadné zapomenout na typografii úplně a použít Arial pro všechno.

Nedoporučeno.

V dnešní době je práce s vlastními fonty snadná a nemusíte dělat ani žádné technické kroky, abyste tato vlastní písma na svém webu povolili..

Velká, velká typografie je v dnešní době v módě velmi důležitá a také značně usnadňuje práci designéra – zejména práce začátečníka -.

Podívejte se například na tento web:

bonobos

Všimli jste si něco? Jo, písma jsou obrovská a vypadají skvěle!

Jak na tom pracovat:

  • Obecně platí, že každý návrh webových stránek potřebuje dva typy textu: nadpisy a odstavce. Ve většině případů to udělá jen jedno písmo.
  • Přejděte na Google Fonts – vlastní knihovnu bezplatných písem Google, kterou můžete použít na svých webových stránkách – a vyhledejte hlavní písmo, které se vám opravdu líbí.
  • Pak si vezměte jméno tohoto písma a podívejte se na něj na Font Pair – je to knihovna předem vytvořených párů fontů, které spolu dobře ladí.
  • Vyberte si párování, které vypadá skvěle.
  • Zapište si jména obou písem, budete je potřebovat později.

Tímto způsobem zrychlíte svůj proces a stále získáte skvělý výsledek.

Příklad: Našli jsme písmo s názvem Bree Serif v Google Fonts, které si docela užíváme:

Bree-Serif

Pak jsme to vzali na Font Pair a web navrhl, že Bree Serif jde dobře s Open Sans. Perfektní:

Bree-Serif-open-sans

Konečná struktura

Konečně poslední krok!

Celým bodem této kapitoly je přistání na konečném rozvržení / struktuře, kterou chcete použít pro svůj web. V tuto chvíli byste si měli být jisti, co se týká vašeho návrhu a uživatelského rozhraní.

Věci, které by měly být připraveny po této kapitole:

  • Vaše uživatelské cíle jsou jasně uvedeny.
  • Váš drátový model byl dvakrát zkontrolován, abyste se ujistili, že tyto cíle nejsou matoucí.
  • Vybrané barevné schéma.
  • Typografie na to přišla.
  • Celé rozvržení / struktura / organizace webu.

Další čtení: 

  • UX Magazine
  • UX Booth
  • Psychologie a emoce za barvou ve webdesignu
  • Co je to uživatelský dojem? Přehled, nástroje a zdroje
  • Stanovení inteligentních obchodních cílů pro web
  • 8 pravidel pro vytvoření efektivní typografie

KAPITOLA 4: WordPress, HTML nebo šablony?

Rozhodněte se, kterou cestou chcete jít – systémy pro správu obsahu nebo ji od začátku kódujte

Tady začíná skutečná práce špinavá pod kapotou!

Toto je pravděpodobně také nejděsivější část procesu (připusťte to!).

Zkrátka je ten pravý čas odložit pero a papír stranou a začít pracovat s nějakým softwarem.

A hned za branou, je tu spousta otázek …

  • Měl bych se naučit HTML?
  • A co CSS?
  • Bude pro mě připraven trik s webovými stránkami HTML?
  • Musím se naučit programovací jazyk, jako je PHP?
  • Slyšel jsem, že WordPress je v dnešní době způsob, jak vytvořit web.
  • Viděl jsem tu reklamu na Squarespace Super Bowl. Co je s tím?
  • Jak se jmenuje Joomla? Nebo Drupale?
  • a dál a dál a dál.

Odpověď na všechny z nich je ano.

Stejně jako v případě ano, můžete udělat jednu nebo všechny z těchto věcí a je jen na vás, kterou cestu zvolíte.

Snažíme se říci, že zde není nejlepší přístup č. 1. Vše záleží na tom, jak se chcete zapojit do vývoje webových stránek, kolik základů pro tvorbu webových stránek se chcete naučit, jak rychle potřebujete kvalitní web udělat a jak přizpůsobitelné chcete, aby to bylo poté.

Takto budeme postupovat od této kapitoly kupředu. za prvé, vyberte osobu, která vás nejlépe definuje:

  • A) Chci se dozvědět, o čem je vývoj webu, všechny základy, všechny vnitřní fungování webové stránky a všechny mechanismy, které fungují na webové stránce.
  • b) Chci se naučit, jak používat spolehlivého tvůrce webových stránek, který pro mě zvládne většinu těžkých zvedání.
  • C) Nevím, co mám dělat. Chci jen web, který si budu moci vybudovat a který bude správně fungovat.

Odpověděl a)? Přejděte na kapitolu 5.

Zodpovězeno b)? Přejděte na kapitolu 6.

Zodpovězeno c)? Neváhejte a podívejte se na tento článek a pak se vraťte (mělo by vám to pomoci vybrat perfektní cestu):

  • Bylo přezkoumáno 8 nejlepších platforem pro blogování a vytváření webových stránek … Každá platforma je popsána spolu se svými klady a zápory a zdroj také navrhuje nejlepší dostupnou volbu (Wix nebo SB) pro vaše specifické potřeby..

Četli jste to? Skvělý! Která z výše uvedených osobností vás tedy nejlépe popisuje – a) nebo b)?

Nástroje, které by se po cestě mohly hodit:

  • Grafika: Paint.NET, Gimp, Pixlr.
  • Psaní kódu: Notepad ++, TextWrangler, SublimeText.
  • Řízení práce: Trello.
  • Design: barevná schémata, Google Fonts, nástroje odtud.
  • Fotografie: Unsplash, AllTheFreeStock

KAPITOLA 5: Úvod do HTML, CSS & Javascript

Jak jsou webové stránky zabudovanou realitou

V této kapitole si ukážeme holé základy vývoje webových stránek, vysvětlíme nejdůležitější pojmy a poté vás pošleme k některým konkrétním zdrojům, kde můžete rozšířit své znalosti a dovednosti.

HTML

HTML je jazyk webových stránek. Každá webová stránka je v určitém okamžiku vytvořena nebo převedena na HTML.

Chcete-li například zobrazit strukturu HTML tohoto průvodce, který právě čtete, stačí stisknout „Ctrl + U“ na klávesnici.

HTML definuje každý blok, který vidíte na webové stránce. Na konci dne, aby se na webové stránce zobrazilo cokoli, je třeba ji převést do HTML.

Chcete-li se HTML efektivně naučit, doporučujeme vám zaregistrovat se na jeden z (bezplatných nebo placených) kurzů dostupných na webu. Některé z nejlepších najdete v Codeacademy nebo Treehouse.

Zde je například specifická sekce o Codeacademy o HTML a CSS.

Domovská stránka CodeCademy

To je komplexní přístup k HTML.

CSS

CSS – přeskočí nudné technické detaily – je zodpovědný za styl vše, co je vidět na webové stránce.

CSS převezme značky HTML a poté je strukturuje a přidává k nim styling. Věci jako: tučné písmo, úpravy barev, stíny, rozvržení, dokonce i animace, se nyní dělají hlavně pomocí CSS.

Pro lepší pochopení toho, jak to přesně funguje, přejděte do tohoto rychlého kurzu v Codeacademy.

Podrobnější informace získáte také v sekci CSS na Codeacademy nebo Treehouse.

JavaScript, jQuery, Bootstrap atd.

JavaScript je programovací jazyk, který vám umožňuje zavést některé dynamické akce na vašem webu. Můžete například provádět ověřování webových formulářů nebo interagovat s uživatelem efektivněji, aniž byste museli znovu načítat stránku, na které jsou. Zde je pěkný návod od w3schools.

JQuery je knihovna JavaScript, která vám umožňuje vytvářet pokročilé věci s menším kódováním. Velmi užitečné pro vývojáře webu. Více zde.

Nakonec je Bootstrap velmi zajímavým vynálezem. Původně představený na Twitteru, je to v zásadě front-end prostředí, které urychluje proces vytváření webových stránek tím, že poskytuje většinu z běžných prvků webu již předpřipravených. Zní to komplikovaně, že??

Ale není to tak. Jen se podívejte na tento startovací kurz v Codeacademy (mimochodem, takto jsme se původně naučili Bootstrap).

Věci, které by měly být připraveny po této kapitole:

  • V zásadě byl první koncept vašeho webu HTML / CSS kompletně vytvořen. Odtud můžete začít iterovat a vylepšovat konečný výsledek.

KAPITOLA 6: Platformy pro vytváření webových stránek

Nastavení prvního webu? Vyzkoušejte bezplatné webové platformy jako WordPress, Joomla nebo Drupal

Kapitola 6: Platformy pro vytváření webových stránek

  • SquareSpace
  • WordPress
  • Joomla & Drupale

Existuje více tvůrců webových stránek, než na ně můžete zatřepat. (Jste-li druh člověka, který se třese s věcmi.)

Dobře, vtipy stranou.

Pokud nemáte touhu naučit se kódovat věci ručně, určitě jsou to mnohá řešení, která vám mohou pomoci.

Poznámka. Mějte na paměti, že všechno ostatní, o čem jsme diskutovali v kapitolách 1-4, se zde stále vztahuje. I když jdete s řešením pro vytváření stránek, které je druhem hands-off, stále musíte být opatrní, aby byl finální produkt pro uživatele přátelský a v souladu s cíli všech. Tyto nástroje pro vytváření stránek jsou přesně tím… nástroji.

Počínaje těmi, které jsou nejjednodušší pochopit:

SquareSpace

Jediná webová platforma, která inzeruje během Super Bowl.

Stručně řečeno, velmi šikovné řešení, které může použít kdokoli. Nejsou vyžadovány žádné předchozí dovednosti.

To vám umožní vytvářet klasické webové stránky, blogy, dokonce i eCommerce obchody, které jsme o nich dokonce napsali recenzi. Rozhraní a celý proces jeho používání je docela snadné pochopit, plus kluci z Squarespace poskytují spoustu zajímavých tutoriálů. Zkontrolujte je zde.

WordPress

Upřímně řečeno, máme rádi WordPress.

Většinu času je to perfektní platforma, pomocí které lze vytvořit web. Má perfektní rovnováhu mezi složitostí a snadným používáním a je v podstatě nekonečně přizpůsobitelný.

Animace WordPress

V současné době je také nejpopulárnější webovou platformou ze všech. Jak sdílí tvůrce WordPress – Matt Mullenweg – WordPress nyní ovládá 25% celého internetu. Mohou se všichni tito lidé mýlit?

Dobře, takže abyste mohli začít s WordPress, v podstatě potřebujete pouze vaši doménu a hosting. Samotný software WordPress je zcela zdarma.

Začněte tím, že budete následovat jednu z těchto cest:

a) „Cesta rychlého startu“

  • Zde se dozvíte zjednodušený způsob instalace WordPressu a spuštění vašeho webu odpoledne.
  • Vyberte si z oficiálního adresáře bezplatný motiv – ujistěte se, že je v souladu s cíli vašeho webu a že rozložení / design není daleko od požadované struktury (budete jej mírně upravovat).
    • Na těchto dvou zdrojích se dozvíte, jak přizpůsobit existující motiv.
    • Alternativně si můžete vybrat víceúčelové prémiové téma, které lze upravit pomocí praktického uživatelského rozhraní (bez kódování). X téma je dobrým příkladem takové věci.
  • Nainstalujte si některé z nejoblíbenějších a nejlepších pluginů a získejte další funkce.

b) „Hloubková cesta“

  • Začněte učením WordPress prostřednictvím online kurzu. Treehouse nabízí úžasný.
  • Vyberte si téma a doplňky stejně jako výše. Případně vytvořte své vlastní téma od základů.

Nakonec je WordPress pravděpodobně nejvšestrannější webovou platformou na trhu. S ním můžete vytvářet prakticky jakýkoli typ webových stránek, nejen blogy nebo jednoduché obchodní weby. Zde je seznam 47 (!) Různých způsobů, jak používat WordPress, jen aby vás přemýšlel.

Joomla a Drupal

Joomla a Drupal, i když se od sebe navzájem mírně liší, jsou vynikajícími systémy správy obsahu pro pokročilejší webové projekty.

Nejedná se o tak silný design, ale jsou vysoce přizpůsobitelné a schopné zvládnout jakýkoli web, který byste mohli mít v plánu..

V závislosti na složitosti vašeho projektu mohou občas vyžadovat mnohem více času na zvládnutí a mnohem větší úsilí.

Pro podrobnější školení jsou na webu Lynda.com úžasné kurzy pro Joomlu i Drupala.

Věci, které by měly být připraveny po této kapitole:

  • První koncept vašeho webu byl vytvořen zcela bez ohledu na to, zda jste se rozhodli používat WordPress nebo jinou platformu.
  • Ujistěte se, že je v souladu s vašimi původními cíli, cílovým publikem a že poskytuje dobré UX.

KAPITOLA 7: Mobilní responzivní design

Více než 60% lidí používá k procházení webu mobilní telefony a tablety

Mobilní citlivost je nyní velmi důležitým aspektem vytváření webových stránek, pravděpodobně více než kdykoli předtím.

Tady je celý problém:

V současné době existuje více lidí, kteří používají mobilní zařízení k přístupu na web, než kdykoli předtím. Ve skutečnosti se odhaduje, že nyní existuje více uživatelů mobilního internetu než uživatelé stolních počítačů (75,1% vs. 52,7%).

Ale je tu problém.

Ne každý design webových stránek bude optimalizován pro prohlížení na mobilních zařízeních hned za branou.

Mezi běžné problémy patří:

  • písma jsou příliš malá,
  • samotné rozložení se vůbec neupravuje na menší obrazovku,
  • nebo technologie použitá k vytvoření webu, která není k dispozici na mobilu.

Zde přichází do úvahy myšlenka mobilní reakce.

Responzivní web reaguje na prostředí, na kterém se prohlíží. Pokud se jedná o stolní počítač, vykreslí se web určitým způsobem. Pokud je to mobilní, vykresluje se jiným způsobem.

Zde je lepší vysvětlení: Co The Heck je Responsive Web Design?

Teď byste tedy měli zkontrolovat a ujistit se, že váš web funguje na mobilních zařízeních. Ověřte to pomocí svých vlastních zařízení, ale vyzkoušejte také mobilní test společnosti Google nebo přejděte na nástroj, jako je Responsive Design Tester.

Pokud se vyskytnou problémy, musíte je opravit.

Některá řešení:

  • Responzivní webdesign – jak na to
  • Jak zajistit, aby web reagoval asi za 15 minut

KAPITOLA 8: Spojení všeho dohromady

Znáte základy, teď je řada na vás

Vydrž, už jsme skoro tam!

Toto je poslední kapitola naší poměrně dlouhé cesty.

V tomto okamžiku byste měli mít svůj první web vytvořený … Ať už s WordPress, ručně vytvořeným HTML / CSS, některým tvůrcem webových stránek nebo jakýmkoli jiným nástrojem, který jste pro úlohu vybrali..

Stručně řečeno, gratulujeme! Ale je tu ještě pár věcí, které stojí za to udělat:

  • Znovu zkontrolujte, o čem jsme diskutovali v kapitolách 1 a 2. Ujistěte se, že cíle skutečně fungují pro koncového uživatele a že web není matoucí..
  • Ověřte strukturu kódu pomocí služby ověřování značek W3C.
  • Zkontrolujte, zda na webu nejsou žádné bezpečnostní problémy. Použijte k tomu skener od společnosti Sucuri.
  • Získejte zpětnou vazbu od komunity. Zkontrolujte, co si ostatní myslí o vaší práci. Fóra na webu Sitepoint mohou být k tomu dobrá.

Pokud je toto vaše první čtení tohoto zdroje, pak vás opravdu doporučujeme, abyste se k němu několikrát vrátili a považovali jej za referenční soubor pro své další vzdělávání..

Jak jsme řekli na začátku, neváhejte používat TOC a přecházejte od kapitoly ke kapitole a zdroj ke zdroji, jak uznáte za vhodné..

A konečně, jsme zvědaví … jaká je vaše největší výzva, pokud jde o vytváření webových stránek, vývoj webových aplikací nebo design? Prosím, podělte se o komentáře nebo přes Twitter. Všichni jsme uši!

Díky za čtení, jste úžasní!

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

About the author

Adblock
detector