Advertisement
Guest User

Untitled

a guest
Apr 22nd, 2018
65
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.02 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <!-- saved from url=(0075)https://www.fit.vutbr.cz/study/courses/ITW/private/cviceni/projekt2.html.cs -->
  3. <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.    
  5.     <title>Tvorba webových stránek - Projekt 2</title>
  6.     <link rel="stylesheet" type="text/css" href="./Tvorba webových stránek - Projekt 2_files/itw.css">
  7.     <style type="text/css">
  8.       h3 { font-size: 100%; }
  9.       .alt { margin-left: 1.5em; margin-right: 1.5em; font-style: italic; }
  10.     </style>
  11. </head>
  12. <body>
  13.  
  14. <h1>Tvorba webových stránek</h1>
  15. <div class="kontakt">
  16. </div>
  17.  
  18. <div class="menu">
  19. <h2>Materiály k předmětu</h2>
  20. <ul>
  21. <li><a href="https://www.fit.vutbr.cz/study/courses/ITW/private/prednasky/.cs">Přednášky (slajdy)</a></li>
  22. <li><a href="https://www.fit.vutbr.cz/study/courses/ITW/private/cviceni/.cs">Materiály ke cvičení</a></li>
  23. <li><a href="https://www.fit.vutbr.cz/study/courses/ITW/private/kontakt.html.cs">Konzultace a kontakt</a></li>
  24. </ul>
  25. <hr>
  26. <ul>
  27. <li><a href="https://www.fit.vutbr.cz/study/courses/ITW/private/index.html.cs">Úvod</a></li>
  28. </ul>
  29. </div>
  30.  
  31.  
  32. <div class="contentbox">
  33.  
  34. <h2>Zadání projektu č. 2</h2>
  35. <p>Vytvořte stránky pro imaginární zařízení v jedné z následujících oblastí podle vlastního uvážení:</p>
  36. <ul>
  37. <li>Stavební firma</li>
  38. <li>Realitní kancelář</li>
  39. </ul>
  40.  
  41. <p>Zvolte takový název zařízení, aby se neshodoval s názvem žádné existující organizace, kterou lze na WWW již nalézt (viz. Google).</p>
  42. <p>Navrhněte vhodnou informační architekturu webu. Web musí mít nejméně tři hlavní informační sekce (např. základní informace, služby, kontakt), každá bude tvořena nejméně dvěma dokumenty (např. rodinné domy, byty). Web bude disponovat:</p>
  43. <ul>
  44.     <li>Úvodní stránkou obsahující obecné informace a sekci s aktualitami
  45.     (upoutávky, akce apod.)</li>
  46.     <li>Vhodně navrženou globální navigací, která je dostupná ze všech dokumentů</li>
  47.     <li>Lokální (kontextovou) navigací v každé sekci, která obsahuje více dokumentů. Jedná se o odkazy na jiné dokumenty ve stejné sekci, nikoliv o odkazy v rámci jednoho dokumentu.</li>
  48.     <li>Stálým záhlavím a zápatím</li>
  49.     <li>Mapou webu přístupnou z každé stránky (např. odkaz v zápatí)</li>
  50. </ul>
  51.  
  52. <h3>Grafické zpracování</h3>
  53. <ul>
  54. <li>Navrhněte grafický styl stránek, který odpovídá zaměření daného subjektu. Návrh zahrnuje minimálně odpovídající barevné schéma (lze použít i různé <a href="http://wellstyled.com/tools/">pomocné nástroje</a>) a obrázkové logo použitelné v záhlaví stránky (může se jednat i o stylizovaný text). Kvalita grafického návrhu není rozhodujícím kritériem hodnocení projektů, v extrémních případech ale může hodnocení ovlivnit (oběma směry).</li>
  55. <li>Obě varianty zadání skýtají rozsáhlé využití fotografií pro dosažení atraktivního vzhledu. Pokuste se to využít. Současně mějte ale na paměti praktické aspekty:
  56.     <ul>
  57.     <li>Načítání obrázků může trvat déle, případně se nemusí podařit. Dbejte na to, aby text webu byl čitelný, i když se obrázky nezobrazí (např. je-li obrázek použitý jako pozadí pod textem, použijte současně i odpovídající barevné pozadí).</li>
  58.     <li>Obrázek na pozadí obecně snižuje čitelnost textu. Věnujte pozornost tomu, aby byl text dostatečně kontrastní.</li>
  59.     </ul>
  60. </li>
  61. <li>Připravte odpovídající CSS styl stránek.</li>
  62. <li>Navíc připravte tiskovou verzi stylu, která se použije při tisku stránky z prohlížeče (lze zkontrolovat v náhledu pro tisk). Tisková verze nebude obsahovat navigaci, pouze obsah.</li>
  63. </ul>
  64.  
  65. <h3>Zvláštní požadavky</h3>
  66. <ul>
  67. <li>Na úvodní stránce implementujte pomocí JavaScriptu jednu oblast (box), která bude při prvním zobrazení skrytá a místo ní bude zobrazen pouze její titulek, ikona apod. Po kliknutí na ikonu se zobrazí obsah oblasti a dalším kliknutím se opět skryje. Pomocí cookies implementujte ukládání stavu těchto boxů tak, aby uživatel viděl při návratu na stránku boxy v takovém stavu (zobrazené nebo nezobrazené), v jakém je zanechal. Typické použití: část nabídky nebo doplňkové informace ve sloupci s nabídkou, podrobnější kontaktní údaje, podrobnější informace k údajům v textu.</li>
  68. </ul>
  69.  
  70. <h3>Pokyny ke zpracování</h3>
  71. <ul>
  72. <li>Výchozí dokument se bude jmenovat <strong>index.html</strong></li>
  73. <li>Texty použité na stránkách si vymyslete. V místech, kde lze předpokládat delší souvislý text (profil apod.) je možno použít generátor výplňkového textu
  74. (<a href="http://www.lipsum.com/">Lorem Ipsum</a>,
  75. <a href="http://www.wellstyled.com/tools/">Pseudo-čeština</a>). Použijte
  76. dostatečné množství textu formátovaného v souladu s předpokládaným obsahem tak, aby bylo patrné, jak bude stránka ve výsledku vypadat. Nepoužívejte souvislý text ze stránek třetích stran.
  77. </li>
  78. </ul>
  79.  
  80. <h3>Požadavky na technické zpracování</h3>
  81. <ul>
  82. <li>Stránky realizujte pomocí <strong>HTML 5</strong> a CSS. Použití experimentálních rozšíření CSS lze použít za podmínky, že se stránka korektně zobrazí v prohlížečích zmíněných níže.</li>
  83. <li>Kód stránek musí být validní při kontrole <a href="http://validator.w3.org/">validátorem W3C</a>.</li>
  84. <li><strong>Respektujte obecná <a href="http://www.pravidla-pristupnosti.cz/">pravidla přístupnosti</a> webových stránek</strong>.</li>
  85. <li>Veškeré navigační prvky musí být použitelné i bez zapnuté podpory JavaScriptu v prohlížeči. Skrývací box požadovaný výše musí být v takovém případě trvale zobrazen.</li>
  86. <li>Používejte sémantické značkování (záhlaví, sekce, nadpisy, seznamy apod.) tak, aby byl web bez problémů srozumitelný i bez podpory CSS.</li>
  87. <li>Nepoužívejte značky a atributy označené ve specifikaci jako zavržené nebo zastaralé.</li>
  88. <li>Tabulky používejte <strong>pouze</strong> k prezentaci tabulárních dat,
  89. nikoliv k realizaci vizuálního rozložení stránky.</li>
  90. </ul>
  91.  
  92. <h3>Umístění stránek</h3>
  93. <ul>
  94. <li>Vytvořené stránky umístěte na libovolný server přístupný z Internetu (např. fakultní, některý freehosting, ...).</li>
  95. <li>Titulek webu (záhlaví) bude fungovat jako odkaz na zvolené umístění webu (t.j. na hlavní stránku absolutním URL).</li>
  96. </ul>
  97.  
  98. <p><strong>Veškerý kód musí být vlastním dílem studenta.</strong> Při návrhu vzhledu je možno se inspirovat existujícími stránkami, nelze však převzít žádný kód z cizích webů ani z volně dostupných knihoven. Totéž platí i pro JavaScriptový kód. Využití obecných JS knihoven (např. JQuery) je povoleno. CSS frameworky (např. Bootstrap) <strong>nejsou</strong> povoleny. Přestože se frameworky v praxi často využívají, cílem projektu je ukázat vlastní zvládnutí technologií probíraných v rámci ITW.</p>
  99.  
  100. <h3>Odevzdání</h3>
  101. <p>Projekt se odevzdává jako jeden archiv ZIP, který obsahuje všechny
  102. soubory webu. Jméno odevzdávaného souboru musí být
  103. <strong><i>vaslogin</i>.zip</strong>. Tento soubor se odevzdá přes IS FIT. Pokud narazíte na limit velikosti odevzdávaného souboru (cca. 2 MB), odevzdejte v archivu pouze kód bez obrázků a dalších dat. Verzi dostupnou na WWW však samozřejmě nechte kompletní.</p>
  104.  
  105. <p>Projekt musí být funkční minimálně v prohlížečích Internet Explorer nebo Edge, Firefox a Chrome v aktuálních verzích (běžně dostupných přes automatické aktualizace).</p>
  106.  
  107. <p>
  108. <strong>Datum odevzdání:</strong> 2.5.2018<br>
  109. <strong>Hodnocení:</strong> max. 30 bodů<br>
  110. Hodnotit se bude splnění všech výše uvedených kritérií, kvalita zpracování a použitelnost pro daný účel. Samotné splnění všech kritérií neznamená automaticky plný počet bodů. Plného počtu bodů mohou dosáhnout pouze stránky evidentně propracované a použitelné pro daný účel.
  111. </p>
  112.  
  113. </div>
  114.  
  115.  
  116.  
  117. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement