SAMUEL LEROY JACKSON. Projekt webové stránky. Programové vybavení Jáchym Kubáček, IT3B Brno 2016

HTML
DOWNLOAD

Rozměr: px

Začít zobrazení ze stránky:

Download "SAMUEL LEROY JACKSON. Projekt webové stránky. Programové vybavení Jáchym Kubáček, IT3B Brno 2016"

Tereza Horáková
před 7 lety
Počet zobrazení:

1 Projekt webové stránky SAMUEL LEROY JACKSON Programové vybavení Jáchym Kubáček, IT3B Brno 2016 Střední škola technická a ekonomická Brno, Olomoucká, příspěvková organizace

2 Výběr tématu Poté, co jsem udělal návrh stránky, jsem stále neměl vybranou postavu. Původně jsem měl v plánu dělat tento web režisérovi Guy Richiem, ale měl málo fotek, co by se mi líbily, tak jsem zvolil Samuela L. Jacksona jako jednoho z mých nejoblíbenějších herců. Jednoduchá náhledová stránka by měla představovat osobnost tohoto herce splývající s jeho filmovými postavami. Projekt HTML & CSS webové stránky 2

3 Návrh a grafický design Stránku jsem chtěl velmi jednoduchou a přehlednou. Spíše takovou poctu svému oblíbenému herci. Asi hlavní inspiraci jsem měl při dělání kurzu na Codecademy. Původně jsem chtěl dělat web pomocí fullpage.js, což jsem si nakonec rozmyslel kvůli složitosti a zvolil jsem daleko jednodušší cestu. Pro psaní kódu jsem použil editor Sublime 3 a validační nástroj W3C online validátor pro ověření validity HTML a CSS. Dlouho jsem náhodně jezdil na než jsem našel hlavní barvu #E4BB97 a ostatní barvy na tuto barvu navazovaly. Projekt HTML & CSS webové stránky 3

#FFFFFF #E4BB97 #F7F7F7 #444444 h1 h2, li body h3, p, a Typograficky jsem se zaměřil na vyhledání dvou moderních velice rozdílných fontů podporujících českou

4 #FFFFFF #E4BB97 #F7F7F7 # h1 h2, li body h3, p, a Typograficky jsem se zaměřil na vyhledání dvou moderních velice rozdílných fontů podporujících českou diakritiku (Latin Extended) z Nakonec jsem vybral kombinaci Open Sans regular a bold s kurzívou Lobster. Projekt HTML & CSS webové stránky 4

5 Projekt HTML & CSS webové stránky 5

Popis layoutu a schéma Layout je jednoduchý. Stránka je rozdělena na záhlaví, tělo stránky a zápatí. Záhlaví obsahuje fotku a název stránky, Tělo stránky je rozděleno na 3 části.

6 Popis layoutu a schéma Layout je jednoduchý. Stránka je rozdělena na záhlaví, tělo stránky a zápatí. Záhlaví obsahuje fotku a název stránky, Tělo stránky je rozděleno na 3 části. První a poslední obsahuje texty a ta druhá fotogalerii a v zápatí jsou odkazy na dokumentaci, citace, kód atd. V mobilním zařízení se stránky nemění. Projekt HTML & CSS webové stránky 6

7 Webová stránka Projekt HTML & CSS webové stránky 7

8 Dynamická struktura PHP u mě na stránce je umístěno až v citacích. První PHP slouží jako kontrolní otázky. 1. <form method="post" action="<?php echo htmlspecialchars($_server["php_self"]);?>" c lass="center">kde se narodil Samuel L. jackson? <input type="text" name="mesto"><in put type="submit"></form> 2. <?php 3. if(($mesto == "Washington") or ($mesto == "Washington DC") or ($mesto == "Wosinkton" ) or ($mesto == "washington") or ($mesto == "washington DC") or ($mesto == "wosinkto n")) 4. echo "<h3>správně!</h3>"; 5. else if($mesto!= "") 6. echo "<h3>špatně! Správná odpověď je Washington.</h3>"; Druhé PHP slouží k obsluze SQL databáze a hry Třetí PHP slouží k obsluze SQL databáze. Projekt HTML & CSS webové stránky 8

Návrh databáze Udělal jsem anketu o nejoblíbenější film se S.L.Jaconem. Tato databáze je trivialní (protože vazbou 1:1) ale já to bral jako nácvik na svou databázi hry 1. <?php 2.

9 Návrh databáze Udělal jsem anketu o nejoblíbenější film se S.L.Jaconem. Tato databáze je trivialní (protože vazbou 1:1) ale já to bral jako nácvik na svou databázi hry 1. <?php 2. $servername = "localhost"; 3. $username = "jachym88"; 4. $password = "Chym1234"; 5. $dbname = 'samuelljackson'; 6. // Create connection 7. $conn = new mysqli($servername, $username, $password, $dbname); 8. if ($conn->connect_error) { 9. die("připojení se nezdařilo:: ". $conn->connect_error); 10. } 11. //echo "Úspěšně připojen"; if ($_POST['jmeno'] and $_POST['obfilm']) { 14. $result = $conn- >query("insert into Uzivatel(jmeno) VALUES('". $_POST['jmeno']. "')"); 15. $ID_uzivatel = $conn->insert_id; 16. $conn- >query("insert into filmuzivat(id_filmy, ID_uzivatel) VALUES(". $_POST['obfilm']. ", $ID_uzivatel)"); 17. } //var_dump($_post); $result = $conn- >query("select ID_filmy, count(1) as hlasy from filmuzivat group by ID_filmy order b y hlasy desc limit 1"); 22. $vytez = $result->fetch_assoc(); 23. //var_dump($vytez); 24. $sql = "SELECT * from Filmy where ID_filmy = ". $vytez['id_filmy']; 25. //echo $sql; die; 26. $result = $conn->query($sql); 27. //var_dump($result); Projekt HTML & CSS webové stránky 9

10 28. $nejfilm = $result->fetch_assoc(); 29. //var_dump($nejfilm); 30.?> 31. <!DOCTYPE html> 32. <html> 33. <head> 34. <title>samuel L. Jackson</title> 35. <link href=" rel="stylesheet"> 36. <link href=" rel="stylesheet"> 37. <link rel="stylesheet" type="text/css" href="style.css"> 38. <link rel="icon" href="img/hd.png" type="image/x-icon"/> 39. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 40. <meta charset="utf-8"> </head> 43. <body> <div class="header"> 46. <h1>samuel Leroy Jackson </h1> 47. </div> <ul> <h2>dotazník</h2> 52. <?php 53. $result = $conn->query("select * from Filmy"); 54. //var_dump($conn); 55. $filmy = $result->fetch_all(mysqli_assoc); 56. //var_dump($filmy); 57.?> <form name="userinformationform" method="post" action="#"> 61. Přezdívka : 62. <input name="jmeno" type="text" value="<?php echo $_POST['jmeno'];?>"><br/><b r/> 63. Oblíbený film: 64. <select name="obfilm"> 65. <option value=""></option> 66. <?php foreach ($filmy as $film) : //var_dump($film);?> <option value="<?php echo $film['id_filmy']?>" <?php if($_post['obfilm']==$ film['id_filmy']) echo "selected=selected";?>><?php echo $film['nazev']?></option> 69. <?php endforeach?> 70. </select> 71. <br/><br/> 72. <input name="btnsubmit" type="submit" value="submit"> 73. </form> <p>nejpopulárnejší film je <b><?php echo $nejfilm['nazev']?><b></p> 76. </ul> <div id="footer"> 79. <p><a href="index.html"><img src="img/hh.png" width="22" height="20" ></a><a href=" dokumentace_kubacek.pdf" download target="_blank">dokumentace</a><a href="kubacek.zi p" download target="_blank">kod</a><a href=" %2F%2Fsamuelljackson.8u.cz%2F">W3C HTML</a><a href=" =all&warning=1&vextwarning=&lang=cs">w3c CSS</a><a href=" href=" href=" sql.php">sql</a><a href="zdroje.php">ostatní</a></p> 80. </body> 81. </html> Projekt HTML & CSS webové stránky 10

Generátor Můj generátor funguj pomocí pěti tabulek nejdřív náhodně zvolí jednu postavu z databáze, pak vám dá životy, sílu, inteligenci a náhodně určí lokalitu která vám dá/ubere statistiky pak

11 Generátor Můj generátor funguj pomocí pěti tabulek nejdřív náhodně zvolí jednu postavu z databáze, pak vám dá životy, sílu, inteligenci a náhodně určí lokalitu která vám dá/ubere statistiky pak náhodně vybere událost a pokud máte dostatečnou sílu a inteligenci ji splnit dostanete body pokud umřete všechny body ztratíte pokud zakončíte na své výpravě body se vám uloží a můžete je porovnávat s dalšími uživateli. Projekt HTML & CSS webové stránky 11

12 Použité Nástroje Sublime Text - Tvorba kódu. Word - Tvorba dokumentace. w3c validátor - Kontrola HTML a CSS kódu. SEO testy - Kontrola rychlosti načítaní stránky. Paletton - Návrh barevného schématu. Corel foto paint - Úpravy fotek. Syntax Highlight Code in Word Documents uprava kodu. Projekt HTML & CSS webové stránky 12

13 Závěr Jsem spokojený s úvodním obrázkem, kdy jsem začal používat hodnotu VW se kterou jsem ještě nikdy nepracoval. Taky jsem měl problémy s galerií. Po různém zkoušení jsem se rozhodl pro javascript Lightbox, který slouží pro náhledy fotek nejlepších rolí Samuela L. Jacksona. Bohužel jsem nepřišel na to, jak se zbavit malého nenápadného bílého pruhu pod zvětšeným obrázkem. Ale jako velké plus beru nahrazení nudných nadpisů Samuelovými výstižnými citáty. Projekt HTML & CSS webové stránky 13

14 Zdroje Česko slovenská filmová databaze: ČSFD [online]. marion "movie" cobretti [cit ]. Dostupné z: 13 Samuel L. Jackson Quotes To Start Your Motherf***ing Week. Thrillist [online]. Ethan Wolff-Mann, 2014 [cit ]. Dostupné z: Životopis. Osobnosti [online]. [cit ]. Dostupné z: Projekt HTML & CSS webové stránky 14

Podobné dokumenty

PROJEKT WEBOVÉ STRÁNKY Conor Anthony McGregor

PROJEKT WEBOVÉ STRÁNKY Conor Anthony McGregor Adam Lindovský IT3B, Brno 2016 Střední škola technická a ekonomická Brno příspěvková organizace Obsah Výběr tématu... 3 Návrh a grafický design... 4 Generátor...