Pokud v?me, ?e bloky lze m?nit tak a tak, pak toho m??eme vyu??t ve sv? pr?ci.

front-end frameworky

Existuj? tak? frameworky. Takzvan? frontendov? r?mce. Nejobl?ben?j?? je bootstrap. Tak? v?m uk??u, co to je. Stru?n? ?e?eno, toto je sada komponent, kter? ji? lze na va?em webu pou??t. Tedy oni r?zn? velikosti, funguj? ur?it?m zp?sobem. Tuto sadu komponent lze p?edat projektantovi layoutu a ten na z?klad? t?chto komponent sestav? v?e. To v?e zjednodu?uje, to znamen?, ?e m?sto toho, abyste tyto v?ci vym??leli sami, m??ete si vz?t hotov? a pou??vat je. Nejobl?ben?j?? jsou getbootstrap, foundation, pure, s?mantick? atd. (Obr.3,4).

Obr.3 Frontendov? r?mce

Obr.4 Frontendov? r?mce

Existuj? anima?n? r?mce (obr. 5). M??eme vz?t i hotov? prvky a na jejich z?klad? vytvo?it n?jak? v?ci. M??eme n?co kroutit, n???m h?bat, n?co napl?ovat barvou, h?bat pod ?hlem, h?bat zkreslen?, zv?t?ovat. To v?e n?m d?v? nov? mo?nosti vyj?d?en?. Jedna v?c je, ?e stiskneme tla??tko v rozhran?, druh? v?c je, kdy? m? n?jakou dal?? animaci. Samoz?ejm? byste s t?m m?li b?t opravdu opatrn? a implementovat to, jen kdy? je to d?le?it? a nutn?.

R??e. 5 anima?n?ch r?mc?

Op?t je v?e p?ipraveno a m??ete jednodu?e d?t odkaz sv?mu n?vrh??i rozvr?en? a jasn? uk?zat, co pot?ebujete, aby ud?lal.

Proto je ve sch?matu (obr. 6) n?vrh??em rozlo?en? v?le (obr. 7), jako v p??kladu s autem, kdy? oto??me volantem doleva a kola se za?nou ot??et a? po ur?it? ?asov? obdob?. Podle toho tak? v designu. ?eknete design?rovi layoutu, aby n?co ud?lal, on to n?jak pochop? po sv?m a po chv?li dostanete n?jak? v?sledek. Mus?te s n?m v?ce komunikovat.

R??e. 6 Sch?ma s n?vrh??em rozvr?en?

R??e. 7 V?le

Design webov?ch str?nek v html/css

Pokud je dobr? technolog. (obr. 8) Jde o ?lov?ka, kter? jen nevytv??? str?nky v bloc?ch, ale o ?lov?ka, kter? technick? ??sti rozum? a zn? velmi do hloubky, rozum? l?pe ne? vy, s?m je p?ipraven n?co nab?dnout. M?t v t?mu technologa je velk? plus. Nebude d?lat jen z?kladn? v?ci, p?jde mu to mnohem l?pe, p??jemn?ji, n?co zjemn? a t?m je v?sledek mnohem vy???.

R??e. 8 Sch?ma s technologem

Technolog je va?e p?ka (obr. 9). Kl??, kterou m??ete vybrat v z?vislosti na ?kolu.

Obr.9 P?ka

Pokud je konstrukt?r technolog. Obecn? je skv?l?, kdy? s?m zn?te mo?nosti v animaci (frontent) a sami je implementujete, zkou??te, experimentujete, t?eba vytv???te n?co nov?ho atd. A to je ide?ln?. Proto?e ??m p?esn?j?? kontrola nad v?sledkem, t?m lep?? v?sledek.

R??e. 10 N?vrh??-technolog

Existuje software, kter? umo??uje navrhnout web v html / css bez znalosti k?du (obr. 11): Adobe Muse, Adobe Edge Animate, Macaw, Webflow. Na tyto programy existuj? kurzy, podle toho studujte a zkou?ejte.

Obr. 11 Programy pro pr?ci s designem webu na html / css bez znalosti k?du

Stru?n? ?e?eno, je nutn? zn?t html ve webdesignu? Ne.

Design?r nemus? s?zet, ale v?d?t a rozum?t tomu, jak se stav? str?nky (html / css), pochopen? frameworku ano, proto?e design?r mus? rozum?t materi?lu, se kter?m pracuje.

Zjist?te v?ce o profesi webov?ho design?ra v m? bezplatn? mistrovsk? t??d?.

Pod?vejme se na ka?dou mo?nost zvl??? a pokusme se zjistit jej? vlastnosti.

1) HTML je hypertextov? zna?kovac? jazyk. P??eme text podle ur?it?ch pravidel a z?sk?me kr?snou webovou str?nku. ?ekn?me to takto: jde o ?asov? nejn?ro?n?j?? zp?sob tvorby webu. K ov??en? sta?? otev??t k?d i mal? html str?nky a pod?vat se, kolik je tam naps?no. Nen? snadn? napsat tolik k?du, i kdy? pou??v?te html editor, ?e? A pokud je pot?eba v tomto k?du n?co zm?nit, um?te si p?edstavit, jak dlouho to m??e trvat?

2) Website Builder je program, kter? v?m umo?n? vytvo?it si vlastn? web z hotov?ch ?ablon.

Nejprve lze programy tohoto druhu rozd?lit do dvou skupin:
- Off-line konstruktory - mohou pracovat bez p?ipojen? k internetu. Toto p?ipojen? budete pot?ebovat pouze tehdy, kdy? pot?ebujete publikovat web v s?ti nebo prov?st zm?ny na ji? b???c?m webu.
- On-line konstruktory - tady je to naopak. Cel? proces tvorby webu prob?h? p??mo na webu.

Mo?nosti takov?ch program? jsou t?m v?t??, ??m v?ce za n? zaplat?te. Pokud pou?ijete bezplatnou verzi, riskujete velk? zklam?n?. Placen? verze tv?rc? webov?ch str?nek v?m obvykle umo??uj?:
- rychle zm?nit design webu;
— upravovat str?nky v on-line re?imu;
— p?ipojit softwarov? moduly (slu?by vyhled?v?n? na str?nk?ch, hlasov?n?, Zp?tn? vazba, zdroj zpr?v atd.);
- kontaktujte podporu.

Co um? bezplatn? verze? V?e z?le?? na tom, co p?esn? pou??v?te. Ale nej?ast?ji svobodn? konstrukt??i weby maj? ve sv?m arzen?lu n?kolik ?ablon designu a v z?sad? zde jsou jejich mo?nosti vy?erp?ny.

3) CMS (Content Management System). Jedn? se o program napsan? ve webov?m programovac?m jazyce, kter? je nainstalov?n na va?em webu a pln? spravuje informace na n?m. Po instalaci takov?ho syst?mu se nemus?te starat o design, sta?? zadat text a obsah. O zbytek se postar? program. M?j n?zor: toto je nejfunk?n?j?? ?e?en?. Existuj? v?echny mo?nosti pro vytvo?en? profesion?ln?ho webu. Takovou str?nku m??ete spravovat p??mo on-line. A co je nejd?le?it?j??, zde m??ete naj?t velmi dobr? bezplatn? ?e?en?.

Ale jakkoli se n?m tyto nov? technologie a programy mohou zd?t atraktivn?, st?le n?s nezbavuj? znalost? HTML, CSS atd. Ano, netvrd?m, ?e je mo?n? vytvo?it web bez t?chto znalost?, ale je nepravd?podobn?, ?e bude mo?n? jej udr?et ?ivotaschopn?, obl?ben? a slavn?.

Jak v?te, zp?soby, kter? jsem uvedl v??e, jsou str?nky vytvo?eny z hotov?ch ?ablon. Jste na nich z?visl?. P?edstavte si, ?e pot?ebujete doladit n?jakou mali?kost, ale takov? ?ablona prost? neexistuje. Co d?lat? A nainstalovat tuto revizi je prost? ?ivotn? d?le?it?. To je dobr?, pokud pou??v?te placen? CMS nebo tv?rce webov?ch str?nek s podporou. V tomto p??pad? m??ete napsat dopis a va?e osobn? ?ablona bude vytvo?ena za v?s. A pokud nen? mo?nost vyu??vat placen? slu?by? Pak se mus?te nau?it HTML a d?lat v?e sami. Na bezplatn?ch syst?mech v?m nikdo nepom??e.

Domn?v?m se, ?e ?lov?k, kter? se chyst? tvo?it sv? str?nky na internetu, by v ka?d?m p??pad? m?l m?t alespo? z?kladn? znalosti HTML. Kdy? nap??klad zve?ejn?m nov? ??slo newsletteru, zve?ejn?m nov? ?l?nek, ano i kdy? nech?m zpr?vu ve f?ru, abych musel pou??t HTML. P?edstavte si, a to je jen mal? zlomek toho, co webov? tv?rce mus? ud?lat!

Ale jsou i v?jimky. Existuj? lid?, pro kter? nen? design tak d?le?it? a nejsou pot?eba zvl??tn? p??le?itosti. Cht?j? jen webovou str?nku, kter? uchov?v? trochu informac?. Obvykle se jedn? o mini-str?nky, kter? se skl?daj? z n?kolika str?nek. Nap??klad mini-str?nky ?asto vyu??vaj? mal? organizace ke zve?ejn?n? informac? o sob?. Mohou to b?t str?nky r?zn?ch z?bavn?ch podnik?, krou?k?, odd?l?, hasi?sk?ho sboru, mal? obchod a dal??. Jejich hlavn?m c?lem je informovat lidi prost?ednictv?m internetu, ?e takov? m?sto existuje. Pro takov? p??pad sta?? web builder nebo CMS.

No a to je v?e, co jsem v?m cht?l t?mto ?l?nkem ??ci. Douf?m, ?e v?m to alespo? trochu pomohlo v rozhodov?n?.
P?eji ti ?sp?ch!

S jistotou lze ??ci, ?e 21. stolet? je v?kem internetu. V ka?d?m dom? jsou zdroje tohoto ??asn?ho vyn?lezu lidstva. Jsme online, otev?r?me str?nky webov?ch str?nek, z?sk?v?me informace, bav?me se nebo nakupujeme. Ale nikdo z n?s, u?ivatel?, nep?em??l? o tom, jak jsou postaveny a k?m jsou v?echny tyto zdroje vytvo?eny. Z velk? ??sti to nepot?ebujeme. Nestudujeme podrobn?, jak po??ta? funguje. Funguje dob?e s?m o sob?. Pou??v?me to a je to v po??dku.

Ale n?kdy jsou p??pady, kdy je pot?eba n?jak? dal?? znalosti. A tady u? jeden „dobr?“ a „v po??dku“ nevystoup?. Nap??klad n?kter? pr?ce na internetu sama o sob? ji? p?edpokl?d? z?kladn? znalost HTML. Nap??klad pr?ce s texty. Tyto znalosti jsou pot?eba alespo? k tomu, aby bylo mo?n? jednodu?e form?tovat stejn? text.

Co to v?bec je HTML? Zkratka HTML znamen? HyperText Markup Language. P?elo?eno z angli?tiny - Hypertext Markup Language. Je t?eba si uv?domit, ?e HTML nen? programovac? jazyk, jak se n?kte?? myln? domn?vaj?, ale zna?kovac? jazyk. Je docela snadn? se to nau?it. Hlavn?m ??elem HTML je zprost?edkovat str?nku pomoc? r?zn?ch zna?ek. zvl??tn? druh. Na jeho z?klad? m??ete vytvo?it jednoduch? web. Na takov? web m??ete um?stit informace o sob? jako autorovi, sv? portfolio, kontaktn? ?daje a dal??. Obecn? v?e, co v?s napadne.

Je jasn?, ?e komer?n? projekty a slo?it?j?? str?nky vznikaj? jinak. Ve zp?sobu jejich tvorby hraje HTML t?m?? posledn? roli. Tyto metody v?ak ?asto vy?aduj? tak? HTML. A kam bez n?j? Lze jej pou??t k n?prav? vzhled web, jeho p??padn? formy a tak d?le.

Dnes se samoz?ejm? bez HTML v?bec obejdete. Na p??n? je mo?n? vytvo?it web pouze pomoc? speci?ln?ho konstruktoru. Takov? programy p?ich?zej? v offline a online verzi. Pokud se pr?ce na vytv??en? vlastn?ho zdroje prov?d? pomoc? konstruktoru offline, lze v?echny akce prov?d?t bez p?ipojen? k internetu. Teprve na sam?m konci, kdy? je zdroj ji? vytvo?en, p?i jeho nahr?v?n? na internet je pot?eba p?ipojen?. No, online - je jasn?, ?e v bez chyby je vy?adov?na s??.

Pomoc? konstruktoru nem??ete p?em??let o sv?ch vlastn?ch znalostech hypertextov?ho zna?kovac?ho jazyka. Pokud v?ak pot?ebujete prov?st n?jak? ?pravy a nem??ete naj?t speci?ln? ?ablony, pak bez HTML to nebude moc dobr?. Koneckonc?, vedeni z?kladn?mi znalostmi tohoto jazyka, m??ete snadno prov?st pot?ebn? zm?ny. Nav?c – majitel webu u? nebude moc z?visl? na ?ablon?ch. Na?t?st? pokud je placen? konstruktor, kter?m byl web vytvo?en. Pak to m??ete napsat tv?rc?m a oni mo?n? posypou pot?ebnou ?ablonu. No, je to pohodln?? V?echno je lep??, kdy? va?e znalosti ?ij? ve va?? hlav?. Proto byste si m?li p?ed vytvo?en?m webu dob?e promyslet a poznamenat si, jak? znalosti mohou b?t pot?eba a co je t?eba zanedbat.

Chce?, abych ti ?ekl tajemstv?? Vytvo?it si vlastn? web je mnohem jednodu???, ne? si mysl?te, a mohou za to nov? technologie a programy. Mysl?te si, ?e k tomu je pot?eba znalost HTML, CSS atd. Nic takov?ho, te? u? zvl?dne vytvo?it web i 10let? d?t?.
?eknu v?m, jak to lze ud?lat.

V?echny zp?soby tvorby webu lze rozd?lit do t?? kategori?. Posledn? dva zp?soby jsou zcela nov? technologie a programy.
M??e?:
1) vytvo?it web ru?n? pomoc? HTML, CSS, PHP;
2) pou??t n?stroj pro tvorbu webov?ch str?nek;
3) nainstalujte na str?nky redak?n? syst?m (CMS).

Pod?vejme se na ka?dou mo?nost zvl??? a pokusme se zjistit jej? vlastnosti.
1) HTML je hypertextov? zna?kovac? jazyk. P??eme text podle ur?it?ch pravidel a z?sk?me kr?snou webovou str?nku. ?ekn?me, ?e jde o ?asov? nejn?ro?n?j?? zp?sob tvorby webu. K ov??en? sta?? otev??t k?d i mal? html str?nky a pod?vat se, kolik je tam naps?no. Nen? snadn? napsat tolik k?du, i kdy? pou??v?te html editor. Nen? to ono? A pokud je pot?eba v tomto k?du n?co zm?nit, um?te si p?edstavit, jak dlouho to m??e trvat?
2) Website Builder je program, kter? v?m umo?n? vytvo?it si vlastn? web z hotov?ch ?ablon.

Nejprve lze programy tohoto druhu rozd?lit do dvou skupin:
- Off-line konstruktory - mohou pracovat bez p?ipojen? k internetu. Toto p?ipojen? budete pot?ebovat pouze tehdy, kdy? pot?ebujete web publikovat v s?ti nebo prov?st zm?ny na ji? b???c?m webu.
- On-line konstruktory - tady je to naopak. Cel? proces tvorby webu prob?h? p??mo na webu.

Mo?nosti takov?ch program? jsou t?m v?t??, ??m v?ce za n? zaplat?te. Pokud pou?ijete bezplatnou verzi, riskujete velk? zklam?n?. Obvykle placen? verze tv?rc? webov?ch str?nek mohou:
— Rychl? zm?na designu webu.
— Schopnost upravovat str?nky v on-line re?imu.
- Mo?nost p?ipojen? softwarov?ch modul?(slu?by vyhled?v?n? na webu, hlasov?n?, zp?tn? vazba, zpravodajstv? atd.)
- Pr?b??n? podpora.

Co um? bezplatn? verze? V?e z?le?? na tom, na koho naraz?te. Nej?ast?ji v?ak tv?rci webov?ch str?nek zdarma maj? ve sv?m arzen?lu n?kolik ?ablon n?vrhu a v z?sad? jsou zde jejich mo?nosti vy?erp?ny.

3) CMS (Content Management System). Jedn? se o program napsan? ve webov?m programovac?m jazyce, kter? je nainstalov?n na va?em webu a pln? spravuje informace na n?m. Po instalaci takov?ho syst?mu se nemus?te starat o design, sta?? zadat text a obsah. O zbytek se postar? program. Podle m?ho n?zoru je to nejfunk?n?j?? ?e?en?. Existuj? v?echny mo?nosti pro vytvo?en? profesion?ln?ho webu. Takovou str?nku m??ete spravovat p??mo on-line. A co je nejd?le?it?j??, m??ete zde naj?t velmi dobr? bezplatn? ?e?en?.

Ale a? se n?m tyto nov? technologie a programy zdaj? jakkoli atraktivn?, st?le n?s nezbavuj? znalost? HTML, CSS atd. Ano, netvrd?m, ?e je mo?n? vytvo?it web bez t?chto znalost?, ale je nepravd?podobn?, ?e bude mo?n? jej udr?et ?ivotaschopn?, obl?ben? a slavn?.

Jak v?te, zp?soby, kter? jsem uvedl v??e, jsou str?nky vytvo?eny z hotov?ch ?ablon. Jste na nich z?visl?. P?edstavte si, ?e pot?ebujete doladit n?jakou mali?kost, ale takov? ?ablona prost? neexistuje. Co d?lat? A nainstalovat tuto revizi je prost? ?ivotn? d?le?it?. To je dobr?, pokud pou??v?te placen? CMS nebo tv?rce webov?ch str?nek s podporou. V tomto p??pad? m??ete napsat dopis a va?e osobn? ?ablona bude vytvo?ena za v?s. A pokud nen? mo?nost vyu??vat placen? slu?by? Pak se mus?te nau?it HTML a d?lat v?e sami. Na bezplatn?ch syst?mech v?m nikdo nepom??e.

Domn?v?m se, ?e ?lov?k, kter? se chyst? vytvo?it vlastn? str?nky na internetu, by v ka?d?m p??pad? m?l m?t alespo? z?kladn? znalosti HTML. Kdy? nap??klad publikuji nov? ??slo newsletteru, publikuji nov? ?l?nek a dokonce publikuji na f?ru, mus?m pou??t HTML. P?edstavte si, a to je jen mal? ??st toho, co mus?m ud?lat!

Ale najdou se i v?jimky. Existuj? lid?, pro kter? nen? design tak d?le?it? a nejsou pot?eba zvl??tn? p??le?itosti. Cht?j? jen webovou str?nku, kter? uchov?v? trochu informac?. Obvykle se jedn? o mini-str?nky, kter? se skl?daj? z n?kolika str?nek. Nap??klad mini-str?nky ?asto vyu??vaj? mal? organizace ke zve?ejn?n? informac? o sob?. Mohou to b?t str?nky r?zn?ch z?bavn?ch podnik?, krou?k?, odd?l?, hasi?sk?ho sboru, mal?ho obchodu a dal??. hlavn?m c?lem takov? str?nka, kter? lidi prost?ednictv?m internetu informuje, ?e takov? m?sto existuje. V tomto p??pad? by bylo velmi v?t?no pou?it? tv?rce webov?ch str?nek nebo CMS.

Dne?n? p??sp?vek bude reakc? na z?jem Zeptejte se, kterou jsem ned?vno dostal od jednoho z p?edplatitel?. Zde je text dopisu:

Ahoj Eugene!

V V posledn? dob?, st?le ?ast?ji jsem se za?al v?novat materi?l?m na CMS a z toho, co jsem ?etl a poslouchal, moje n?lada st?le v?ce klesala)))).

Faktem je, ?e podle recenz? nemaj? hotov? motory prakticky ??dn? m?nusy, solidn? plusy a obecn? je m??e pou??vat ka?d?, kdo o tom nem? pon?t?
programov?n?. To znamen?, ?e to byli webov? program?to?i design??i rozlo?en? ano
a ka?d?, kdo je s t?m spojen, m??e j?t odpo??vat (jeliko? se na?el „v?el?k“).

Ale jak ukazuje moje praxe, nestane se, ?e by se n?co, za co se d??ve platily pen?ze a na tom pracovali lid? s ur?it?mi zku?enostmi a dovednostmi, najednou uvolnilo a znalosti se staly tak? obecn? nepot?ebn?mi, sta?? si p?e??st n?vod na
Zd? se, ?e pou??v?n? CMS a tlust?ch knih o programov?n? se stalo zbyte?n?m ...

Rozhodl jsem se tedy obr?tit na v?s s ot?zkou, jak se v?ci doopravdy maj? a jak? m?sto zauj?maj? ready-made CMS v profesion?ln?m sitebuildingu?

Ve skute?nosti je nyn? trend k tomu, ?e se pro tvorbu str?nek st?le ?ast?ji pou??vaj? r?zn? hotov? enginy (CMS), jako je Joomla, Drupal, Wordpress, DLE atd.

Koneckonc?, ve skute?nosti, pokud web pot?ebuje implementovat pouze z?kladn? funkcionalitu a neexistuj? ??dn? speci?ln? po?adavky, pak nen? t?eba znovu vym??let kolo a je jednodu??? vytvo?it web zalo?en? na nejvhodn?j??m CMS pro tento ?kol.

Ale na druhou stranu si mysl?m, ?e je p??li? brzy odepisovat HTML, CSS a PHP, proto?e bez znalosti t?chto v?c? bude obt??n? vytvo?it skute?n? hodnotn? a jedine?n? web. CMS toti? nen? v?el?k a velmi ?asto se mus?te hrabat v syst?mov?m k?du, abyste dos?hli po?adovan?ho v?sledku. A k?d v?t?iny CMS je shluk HTML+CSS+PHP.

Moment?ln? pracuji na kurzu obl?ben?ho CMS syst?mu. A ka?d? den tr?v?m spoustu ?asu prac? s t?mto syst?mem. A mohu ??ci, ?e nebylo dne, kdy bych nevyu?il znalosti HTML, CSS a PHP.

Ano, m??ete vytvo?it web na CMS, p?ipojit n?jak? druh voln? design, napl?te materi?ly a z?skejte web, kter? je jako dvoj?e podobn? jin?m web?m vytvo?en?m stejn?m zp?sobem.

Ale dnes s takov?m webem daleko nedojdete, pot?ebujete jedine?nost, mus?te web vylep?it, aby vyhovoval va?im pot?eb?m, a to vy?aduje znalosti.

Tak?e v t?to f?zi v?voje internetu se mi zd?, ?e by se studium nem?lo zanedb?vat z?kladn? jazyky webov? programov?n?, na kter?m tyto motory pracuj?, ale tak? nezanedb?vat ty nejcenn?j?? CMS syst?my, proto?e. ?asto s jejich pomoc? m??ete vytvo?it web nebo m???ku web? mnohem rychleji, ne? si v?e ps?t sami.