Registrační číslo projektu: CZ.1.07/1.4.00/21.3712 Škola – adresa: Základní škola T. G. Masaryka Ivančice, Na Brněnce 1, okres Brno-venkov, příspěvková organizace www.zstgmivancice.cz
[email protected] Na Brněnce 1, Ivančice, okres Brno-venkov Šablona: III/2 č. 4 Ověření ve výuce (dne): 25. 9. 2012 Třída: 9. A, 9. B, 9. C Název:
Pořadové číslo hodiny: 7 Předmět: Tvorba webových stránek
Design webu
Anotace: Výukový materiál směruje žáka při tvorbě webových stránek k účelné, přehledné a snadno použitelné webové prezentaci psané srozumitelným a jednoduchým jazykem. Výklad je doplněn ukázkami webů s různým designem. Prezentace je součástí výuky tvorby webových stránek bez znalosti HTML jazyka. Zápis s dalšími úkoly je k dispozici na http://www.zstgmivancice.cz/studium/info9/kap03.html. Autor: Mgr. Otmar Němec Jazyk: čeština Očekávaný výstup: Uvědomuje si základní standardy a doporučení webové prezentace. Klíčová slova: design, web, webová prezentace Rozvíjené klíčové kompetence: KU, KŘP Druh učebního materiálu: prezentace Druh interaktivity: kombinované Cílová skupina: žák Stupeň a typ vzdělávání: základní vzdělávání – druhý Ročník: devátý Celková velikost: 2,07 MB
Design webu Vysvětlení pojmu Webdesigner úlohou webdesignera není oslnit případné návštěvníky webu hlavním účelem každého webu je podat informace svým návštěvníkům, u komerčních webů je pak prvořadým cílem získat a udržet zákazníka účelná, přehledná a snadno použitelná prezentace psaná srozumitelným a jednoduchým jazykem představuje důležitý krok k získání pravidelných návštěvníků webu webdesign se řídí pevně danými základními standardy a doporučeními, bez jejichž pochopení nelze vytvořit použitelné a přístupné webové stránky Samostatná práce v hodině: jaká webová prezentace tě v poslední době oslovila svojí přehledností a grafickými prvky?
Design webu Úspěch u návštěvníků webu Splněním pravidel dobrého webu získáme důležité návštěvníky pro náš web dojde k ovlivnění návštěvníků webu (zpětná vazba) návštěvníci se na web vrací a věnují se stejné či jiné činnosti na webu web návštěvníky zaujme do té míry, že o něm mluví s dalšími členy cílové skupiny webu
Design webu Rady a tipy pro dobrý web Na co dbát při tvorbě webové prezentace? být k nalezení - pro cílovou skupinu s využitím vyhledávačů, sociálních sítí být dostupný - bezproblémové fungování webu včetně rychlého načítání
Samostatná práce v hodině: jak co nejlépe řešit výše zmíněné prvky při tvorbě webu?
Design webu Rady a tipy pro dobrý web Na co dbát při tvorbě webové prezentace? být přístupný - web disponuje přizpůsobením se pro zobrazení na mobilních telefonech, pro handicapované atd. - uživatelé nejsou odkázáni jen na jeden prohlížeč - web je přístupný i bez podpory javascriptu či flashe být použitelný - aneb v jednoduchosti je síla = web je jednoduchý pro používání, návštěvník se velmi rychle zorientuje na hlavní straně webu - těžkopádné ovládání může být frustrující Samostatná práce v hodině: jak co nejlépe řešit výše zmíněné prvky při tvorbě webu?
Design webu Rady a tipy pro dobrý web Na co dbát při tvorbě webové prezentace? být intuitivní - ovládání webu je na první pohled jasné - každá stránka by měla být opatřena informací, kde se uživatel nachází, kam může pokračovat - navigační prvky by měly být jednotné být důvěryhodný - web je věrohodný pro návštěvníky
Samostatná práce v hodině: jak co nejlépe řešit výše zmíněné prvky při tvorbě webu?
Design webu Rady a tipy pro dobrý web Na co dbát při tvorbě webové prezentace? být přesvědčivý - web svým celkovým provedením působí na návštěvníka přesvědčivě být emocionálně propojen - web využívá emocí návštěvníků pro lepší zapamatování si ho a případný návrat na web
Samostatná práce v hodině: jak co nejlépe řešit výše zmíněné prvky při tvorbě webu?
Design webu Rady a tipy pro dobrý web Na co dbát při tvorbě webové prezentace? být příjemný - používání webu zanechává v návštěvníkovi kladný pocit (užitečný obsah, psychologie) - vždy platí, že „méně je někdy více“ (vyumělkovanost, obrázkové pozadí stránky a další značné efekty mohou znepříjemňovat návštěvníkovi procházení webu) - vždy je doporučováno držet se světlého pozadí, tmavého textu a barevně výraznějších odkazů (tj. šetřit barvami) být smysluplný - web se stává cílem návštěvníkova brouzdání po internetu Samostatná práce v hodině: jak co nejlépe řešit výše zmíněné prvky při tvorbě webu?
Design webu Rady a tipy pro dobrý web Na co dbát při tvorbě webové prezentace? členění textu - u delších textů je vhodné používat dílčí nadpisy - návštěvník se tak může začíst přímo do pasáže, která ho zajímá - text nesmí odrazovat svou délkou (návštěvníci web většinou jen prohlíží, nepročítají jej) - důležité pasáže textu mohou být psané tučným písmem (nikoliv podtržené, to přísluší pouze odkazům) - nejvhodnějšími fonty pro zápis na webu jsou fonty bezpatkové, protože se na monitoru lépe čtou (Arial, Verdana, Tahoma) Samostatná práce v hodině: jak co nejlépe řešit výše zmíněné prvky při tvorbě webu?
Design webu Rady a tipy pro dobrý web Jak na tvorbu pěkně vypadajícího webu? s HTML jazykem, CSS styly a grafikou - pokud ovládáme jazyk HTML a CSS styly, jsme schopni za přispění grafického programu vytvořit pěkně vypadající web - pomůckou na míchání barev na webu může být http://www.colorschemedesigner.com s částečnou znalostí HTML jazyka a CSS stylů - např. na serveru http://www.freewebtemplates.com lze zdarma vybírat mezi desítkami hotových šablon webů, které uživatel upraví podle svých požadavků Samostatná práce v hodině: vyzkoušej výše zmíněné odkazy.
Design webu Ukázky hotových webů
Samostatná práce v hodině: kterou z popsaných rad tento web na adrese http://www.zstgmivancice.cz určitě splňuje a kterou nikoliv?
Design webu Ukázky hotových webů
Samostatná práce v hodině: kterou z popsaných rad tento web na adrese http://www.zstgmivancice.cz/souteze určitě splňuje a kterou nikoliv?
Design webu Zdroj
Wikipedie: Otevřená encyklopedie: Webdesign [online]. c2012 [citováno 19. 09. 2012]. Dostupný z WWW:
Použité obrázky z webů jsou vlastní tvorbou autora. Další obrázky jsou dostupné pod licencí Microsoft Office verze 2010 na http://office.microsoft.com.