Koder / front-end developer: Porovnání verzí
| (Není zobrazeno 16 mezilehlých verzí od stejného uživatele.) | |||
| Řádek 1: | Řádek 1: | ||
| − | + | <p><b>Autor:</b> Michal Brezovský | |
| − | + | </p><p><b>Klíčová slova:</b> webdesign, kódování, kodér, front-end developer | |
| − | + | </p><p><b>Související pojmy:</b> | |
| − | + | </p> | |
| − | |||
| − | |||
<blockquote> | <blockquote> | ||
| − | + | <i>nadřazené</i> - web</blockquote> | |
<blockquote> | <blockquote> | ||
| − | + | <i>podřazené</i> - ---</blockquote> | |
| − | + | <p><br /> | |
| − | + | </p> | |
| − | + | <h2>Charakteristika</h2> | |
| − | + | <p>Front-end development, nebo-li vývoj klientské části webového rozhraní, je jedna z nejklasičtějších programátorských disciplín. | |
| − | Front-end development, nebo-li vývoj klientské části webového rozhraní, je jedna z nejklasičtějších programátorských disciplín. | ||
Historicky je tato role známá pod několika pseudonymy: webdesigner, kodér, frontender a podobně. Základní funkce a úkoly však zůstávají | Historicky je tato role známá pod několika pseudonymy: webdesigner, kodér, frontender a podobně. Základní funkce a úkoly však zůstávají | ||
stejné a s rozvojem internetu se i víceméně rozšiřují. | stejné a s rozvojem internetu se i víceméně rozšiřují. | ||
| − | + | </p><p><br /> | |
| − | + | </p> | |
| − | + | <h2>Funkce</h2> | |
| − | + | <p>Povolání kodéra především vyžaduje estetickou citlivost a přesnost. V praxi se dá říci, že úlohou kodera je přetvořit předem navržený screenu nebo [[wireframe]] na webovou stránku pomocí různých kódovacích jazyků<ref>ŘEZÁČ, Jan. Jak začít z webdesignem [online]. Dostupný z WWW: <http://blog.filosof.biz/jak-zacit-s-webdesignem/></ref>. Problémem často bývá přízpůsobování stránek různým webovým prohlížečům nebo rozhraním. K tomu slouží celosvětové standardy dané World Wide Web Consortiem ([[W3C]])<ref>What does a front-end web developer do? [online]. Dostupný z WWW: <http://www.onlinetools.org/articles/fed2.html></ref>, díky kterým se dá předcházet různým chybovým záležitostem při zobrazování webových stránek vytvořených koderem. V neposlední řadě je nutno dodat, že práce kodera v sobě zahrnuje několik na první pohled odlišných subelementů. | |
| − | Povolání kodéra především vyžaduje estetickou citlivost a přesnost. V praxi se dá říci, že úlohou kodera je přetvořit předem navržený screenu nebo wireframe na webovou stránku pomocí různých kódovacích jazyků. Problémem často bývá přízpůsobování stránek různým webovým prohlížečům nebo rozhraním. K tomu slouží celosvětové standardy dané World Wide Web Consortiem (W3C), díky kterým se dá předcházet různým chybovým záležitostem při zobrazování webových stránek vytvořených koderem. V neposlední řadě je nutno dodat, že práce kodera v sobě zahrnuje několik na první pohled odlišných subelementů. | ||
Zde je přehled některých z nich: | Zde je přehled některých z nich: | ||
| − | + | </p><p><br /> | |
| − | + | </p> | |
| − | + | <h3>HTML</h3> | |
| − | + | <p>Jazyk HTML a formování struktury webu je naprostým základem tvorby webových stránek. Struktura webu je dále nezbytná pro optimalizaci | |
| − | Jazyk HTML a formování struktury webu je naprostým základem tvorby webových stránek. Struktura webu je dále nezbytná pro optimalizaci | ||
pro vyhledávače (principy SEO). V jednoduchosti se HTML stará o zařazování jednotlivých prvků, které budou poskytovat styl a interakci, do textu. | pro vyhledávače (principy SEO). V jednoduchosti se HTML stará o zařazování jednotlivých prvků, které budou poskytovat styl a interakci, do textu. | ||
Mezi jednotlivé prvky patří nadpisy, odstavce, odkazy, změna fontu textu a další. Pro kodéra spočívá využití HTML právě v obalení požadovaného textu kýženým formátováním. | Mezi jednotlivé prvky patří nadpisy, odstavce, odkazy, změna fontu textu a další. Pro kodéra spočívá využití HTML právě v obalení požadovaného textu kýženým formátováním. | ||
| − | + | </p> | |
| − | + | <h3>CSS</h3> | |
| − | + | <p>CSS, nebo-li kaskádové styly, přinášejí základní funkci zapouzdření stylů. Mohou být uloženy ve speciálním souboru a tak se snadněji | |
| − | CSS, nebo-li kaskádové styly, přinášejí základní funkci zapouzdření stylů. Mohou být uloženy ve speciálním souboru a tak se snadněji | ||
přizpůsobovat složitějším změnám v designu. Dále kaskádové styly přinášejí nové vlastnosti, které rozšiřují možnosti napsání pohledného webu. | přizpůsobovat složitějším změnám v designu. Dále kaskádové styly přinášejí nové vlastnosti, které rozšiřují možnosti napsání pohledného webu. | ||
Důležitým aspektem kaskádového stylu je nutnost kontroly v rozlišných prohlížečích. Taková kontrola samozřejmě souvisí i s ostatními prvky front-endového | Důležitým aspektem kaskádového stylu je nutnost kontroly v rozlišných prohlížečích. Taková kontrola samozřejmě souvisí i s ostatními prvky front-endového | ||
návrhu webu, nicméně právě u kaskádových stylů bývá nejčastěji řešena. Z hlediska kódera představuje v dnešní době kaskádový styl prakticky nejmocnější nástroj pro tvorbu webových stránek. | návrhu webu, nicméně právě u kaskádových stylů bývá nejčastěji řešena. Z hlediska kódera představuje v dnešní době kaskádový styl prakticky nejmocnější nástroj pro tvorbu webových stránek. | ||
| − | + | </p> | |
| − | + | <h3>Javascript, AJAX a další</h3> | |
| − | + | <p>Javascript je čistě programovací jazyk, který bývá na webových stránkách využíván pro aktivní reakci na nějakou událost. | |
| − | Javascript je čistě programovací jazyk, který bývá na webových stránkách využíván pro aktivní reakci na nějakou událost. | ||
AJAX (Asynchronous JavaScript and XML) je obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovunačítání. Vyžadují použití moderních webových prohlížečů. | AJAX (Asynchronous JavaScript and XML) je obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovunačítání. Vyžadují použití moderních webových prohlížečů. | ||
| − | Mezi další programovací nástroje patří jazyk PHP, ActionScript a další populární jazyky pro front-endový vývoj. | + | Mezi další programovací nástroje patří jazyk PHP, ActionScript a další populární jazyky pro front-endový vývoj<ref>What is front-end development? [online]. Dostupný z WWW: <http://www.guardian.co.uk/help/insideguardian/2009/sep/28/blogpost></ref>. |
| − | + | </p> | |
| − | + | <h2>Požadavky na front-end</h2> | |
| − | + | <h3>Použitelnost</h3> | |
| − | + | <p>Použitelnost v rámci klasifikace front-endových rozhraní znamená, že web by neměl obsahovat faktické sémantické či syntaktické chyby, | |
| − | |||
| − | Použitelnost v rámci klasifikace front-endových rozhraní znamená, že web by neměl obsahovat faktické sémantické či syntaktické chyby, | ||
měl by být názorný a každá vlastnost by měla fungovat tak, jak uživatel primárně očekává. | měl by být názorný a každá vlastnost by měla fungovat tak, jak uživatel primárně očekává. | ||
| − | + | </p> | |
| − | + | <h3>Přístupnost</h3> | |
| − | + | <p>Web by měl být přístupný i lidem s určitým technologickým nedostatkem či dokonce fyzickým postižením - například nabízet čtenou verzi webu, možnost ovládat web pouze myší nebo pouze klávesnicí | |
| − | Web by měl být přístupný i lidem s určitým technologickým nedostatkem či dokonce fyzickým postižením - například nabízet čtenou verzi webu, možnost ovládat web pouze myší nebo pouze klávesnicí | ||
(v případě, že je z uživatelovy strany nějaká z uvedených technologií nedostupná). | (v případě, že je z uživatelovy strany nějaká z uvedených technologií nedostupná). | ||
| − | + | </p> | |
| − | + | <h3>Výkon</h3> | |
| − | + | <p>Web by neměl obsahovat žádné příliš náročné prvky na zobrazení, kodér by měl ve zdrojovém kódu používat maximum osvědčených technik. | |
| − | Web by neměl obsahovat žádné příliš náročné prvky na zobrazení, kodér by měl ve zdrojovém kódu používat maximum osvědčených technik. | ||
Zároveň by měl web existovat v několika verzích (např. pokud tvoříme flashový web, kodér by měl uvažovat i nasazení na slabších | Zároveň by měl web existovat v několika verzích (např. pokud tvoříme flashový web, kodér by měl uvažovat i nasazení na slabších | ||
| − | počítačích a nabízet čistě HTML verzi stránek). | + | počítačích a nabízet čistě HTML verzi stránek).<ref>What is front-end development? [online]. Dostupný z WWW: <http://www.guardian.co.uk/help/insideguardian/2009/sep/28/blogpost> </ref> |
| − | + | <h2>Zdroje</h2> | |
| − | + | <references/> | |
| − | + | </p> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Aktuální verze z 28. 6. 2012, 13:24
Autor: Michal Brezovský
Klíčová slova: webdesign, kódování, kodér, front-end developer
Související pojmy:
nadřazené - web
podřazené - ---
Charakteristika
Front-end development, nebo-li vývoj klientské části webového rozhraní, je jedna z nejklasičtějších programátorských disciplín. Historicky je tato role známá pod několika pseudonymy: webdesigner, kodér, frontender a podobně. Základní funkce a úkoly však zůstávají stejné a s rozvojem internetu se i víceméně rozšiřují.
Funkce
Povolání kodéra především vyžaduje estetickou citlivost a přesnost. V praxi se dá říci, že úlohou kodera je přetvořit předem navržený screenu nebo wireframe na webovou stránku pomocí různých kódovacích jazyků[1]. Problémem často bývá přízpůsobování stránek různým webovým prohlížečům nebo rozhraním. K tomu slouží celosvětové standardy dané World Wide Web Consortiem (W3C)[2], díky kterým se dá předcházet různým chybovým záležitostem při zobrazování webových stránek vytvořených koderem. V neposlední řadě je nutno dodat, že práce kodera v sobě zahrnuje několik na první pohled odlišných subelementů. Zde je přehled některých z nich:
HTML
Jazyk HTML a formování struktury webu je naprostým základem tvorby webových stránek. Struktura webu je dále nezbytná pro optimalizaci pro vyhledávače (principy SEO). V jednoduchosti se HTML stará o zařazování jednotlivých prvků, které budou poskytovat styl a interakci, do textu. Mezi jednotlivé prvky patří nadpisy, odstavce, odkazy, změna fontu textu a další. Pro kodéra spočívá využití HTML právě v obalení požadovaného textu kýženým formátováním.
CSS
CSS, nebo-li kaskádové styly, přinášejí základní funkci zapouzdření stylů. Mohou být uloženy ve speciálním souboru a tak se snadněji přizpůsobovat složitějším změnám v designu. Dále kaskádové styly přinášejí nové vlastnosti, které rozšiřují možnosti napsání pohledného webu. Důležitým aspektem kaskádového stylu je nutnost kontroly v rozlišných prohlížečích. Taková kontrola samozřejmě souvisí i s ostatními prvky front-endového návrhu webu, nicméně právě u kaskádových stylů bývá nejčastěji řešena. Z hlediska kódera představuje v dnešní době kaskádový styl prakticky nejmocnější nástroj pro tvorbu webových stránek.
Javascript, AJAX a další
Javascript je čistě programovací jazyk, který bývá na webových stránkách využíván pro aktivní reakci na nějakou událost. AJAX (Asynchronous JavaScript and XML) je obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovunačítání. Vyžadují použití moderních webových prohlížečů. Mezi další programovací nástroje patří jazyk PHP, ActionScript a další populární jazyky pro front-endový vývoj[3].
Požadavky na front-end
Použitelnost
Použitelnost v rámci klasifikace front-endových rozhraní znamená, že web by neměl obsahovat faktické sémantické či syntaktické chyby, měl by být názorný a každá vlastnost by měla fungovat tak, jak uživatel primárně očekává.
Přístupnost
Web by měl být přístupný i lidem s určitým technologickým nedostatkem či dokonce fyzickým postižením - například nabízet čtenou verzi webu, možnost ovládat web pouze myší nebo pouze klávesnicí (v případě, že je z uživatelovy strany nějaká z uvedených technologií nedostupná).
Výkon
Web by neměl obsahovat žádné příliš náročné prvky na zobrazení, kodér by měl ve zdrojovém kódu používat maximum osvědčených technik. Zároveň by měl web existovat v několika verzích (např. pokud tvoříme flashový web, kodér by měl uvažovat i nasazení na slabších počítačích a nabízet čistě HTML verzi stránek).[4]
Zdroje
- ↑ ŘEZÁČ, Jan. Jak začít z webdesignem [online]. Dostupný z WWW: <http://blog.filosof.biz/jak-zacit-s-webdesignem/>
- ↑ What does a front-end web developer do? [online]. Dostupný z WWW: <http://www.onlinetools.org/articles/fed2.html>
- ↑ What is front-end development? [online]. Dostupný z WWW: <http://www.guardian.co.uk/help/insideguardian/2009/sep/28/blogpost>
- ↑ What is front-end development? [online]. Dostupný z WWW: <http://www.guardian.co.uk/help/insideguardian/2009/sep/28/blogpost>
