Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

TNPW1 Cvičení 1 13.2.2013

Podobné prezentace


Prezentace na téma: "TNPW1 Cvičení 1 13.2.2013"— Transkript prezentace:

1 TNPW1 Cvičení

2 Organizační úvod

3 TNPW1 Cvičení 1 O čem je TNPW1 Tvorba statických stránek v XHTML Strict Úprava vzhledu stránek pomocí CSS Základní zásady webdesignu a použitelnosti Na přednáškách také informace o moderních technikách (HTML5, CSS3,…)

4 TNPW1 Cvičení 1 Informace - cvičení materiály ke cvičení změny ve výuce a jiné aktuality k cvičení dotazy ke cvičení, domlouvání konzultací zasílání úkolů a projektu

5 TNPW1 Cvičení 1 Informace – projekty a přednášky požadavky na projekt – hodnotící kritéria přednášky ke stažení V DOWNLOADS / TNPW1 ostatní – velmi užitečný soubor projectguide.pdf – přečtěte si až začnete pracovat na projektu

6 TNPW1 Cvičení 1 Organizace cvičení Přednostní právo na židli mají ti, kdo mají předmět povinný ve studijním plánu, poté mají přednost řádně přihlášení před náhradníky Účast na cvičeních je nepovinná Na cvičeních je ale možnost získat bonusové body ke zkoušce za odevzdané úkoly (pro možnost získání bodů je nutná účast na konkrétním cvičení)

7 TNPW1 Cvičení 1 Podmínky pro zápočet Odevzdání samostatné práce - projektu Požadavky na projekt v kostce: – Statický web, validní XHTML Strict a CSS – Jednotné téma projektu – Minimálně 5 podstran – Správné použití probíraných HTML elementů – Podstatná je správnost a čistota kódu – Více na

8 TNPW1 Cvičení 1 Možnost zrychleného absolvování Odevzdání projektu je možné kdykoli během semestru, nejpozději ve stanovený deadline (poté budou sankce za pozdní odevzdání) Do 27/2 můžete zkusit odevzdat bez vedlejších následků (tj. pokud neuspějete, můžete odevzdat znovu v řádném termínu)

9 TNPW1 Cvičení 1 Zápočet a zkouška - body Zápočet – Projekt: možných 50 bodů, pro splnění zápočtu je potřeba min. 30 bodů – Cvičení: možných 10 bodů (pro splnění zápočtu není potřeba) Zkouška – zkouškový test (podmínky Ing. Štěpánek) – plus body ze zápočtu (ale max. do výše 50 bodů)

10 TNPW1 Cvičení 1 Další materiály Literatura – HTML, XHTML a CSS / Elizabeth Castro – 333 tipů a triků pro CSS / Martin Domes Internet – –

11 TNPW1 Cvičení 1 Otázky k organizaci?

12 Úvod do tvorby WWW

13 TNPW1 Cvičení 1 Technologie pro tvorbu webu HTML, XHTML – značkovací jazyk – struktura, obsah, odkazy - hypertext CSS – kaskádové styly – vzhled (rozvržení, formátování, jednoduché efekty) Javascript – skriptování na straně klienta – efekty, interakce, taky AJAX, jQuery PHP, ASP, Java, Perl, … - na straně serveru – dynamické stránky, aplikace, práce s databází MySQL, MSSQL - databáze

14 TNPW1 Cvičení 1 To není vše…

15 TNPW1 Cvičení

16 Práce na cvičeních

17 TNPW1 Cvičení 2 Vývojové prostředí Dle vaší volby, ale textové, ne WYSIWYG! PsPad, NetBeans, nebo třeba Poznámkový blok.. Na cvičeních doporučuji PsPad

18 TNPW1 Cvičení 2 Publikování na UHK Síťový disk w, na jakékoli učebně - zobrazí soubor index.html – výchozí soubor pro webovou prezentaci) a/soubor - můžete si vytvořit složky např. cviceni1, cviceni2, …

19 TNPW1 Cvičení 2 Přístup z domu Pro připojení k vašemu www adresáři mimo síť UHK je potřeba SFTP klient (např. WinSCP) Přihlašovací údaje – Adresa: lide.uhk.cz (pro domovský adresář je to hera.uhk.cz) – Login: [váš login do UHK] – Heslo: [vaše heslo]

20 TNPW1 Cvičení 2 !!! Validace stránek !!! V průběhu vaší práce nebo alespoň před odevzdáním, a hlavně v prvních několika cvičeních, používejte validátor Kontrolujte XHTML 1.0 Strict Úkoly i projekt musí být validní!

21 TNPW1 Cvičení 2 Validace stránek 2 Do zdrojového kódu svých stránek na cvičení přidávejte na konec tento kód (vytvoří přímý odkaz na validátor pro jednodušší kontrolu):

22 TNPW1 Cvičení 2 Poznámka k validaci Odkaz na validátor nebude fungovat, pokud nemáte prezentaci na internetu, v tom případě si to musíte zkontrolovat pomocí "Validate by File Upload na Pokud pracujete na disku W, validace je bez problému (publikováno na lide.uhk.cz)

23 Začínáme…

24 TNPW1 Cvičení 2 Úvod do XHTML HTML a XHTML jsou značkovací jazyky – používají značky / tagy k popsání obsahu tagy jsou klíčová slova v závorkách většinou jsou párové a prohlížeče interpretují tagy a podle toho zobrazují obsah (k tomu využívají CSS, pokud není tak defaultní styly prohlížeče)

25 TNPW1 Cvičení 2 Základní tagy / elementy HTML Hlava a tělo stránky Metadata, titulek Nadpisy Odstavce Odkazy

26 TNPW1 Cvičení 2 Struktura stránky Titulek stránky Hlavní nadpis stránky Odstavec na stránce

27 TNPW1 Cvičení 2 Základní XHTML dokument An XHTML 1.0 Strict standard template … Your HTML content here …

28 TNPW1 Cvičení 2 Metadata Zapisují se do hlavičky XHTML dokumentu (určení znakové sady) (popis stránky) (klíčová slova stránky oddělená čárkami) Obě výše zmíněné slouží pro indexaci a vyhledávání

29 TNPW1 Cvičení 2 Nadpisy Několik úrovní Nadpis první úrovně – nadpis celé stránky, jednou na každé stránce – uvádějte ho vždy a pojmenujte smysluplně – zásadní element při indexaci stránek, podobně jako titulek ! Nadpis druhé úrovně atd. – počet na stránce podle potřeby

30 TNPW1 Cvičení 2 Nadpisy 2 Nadpis sémanticky vyjadřuje podnadpis hlavního nadpisu atd. Obsah jde strukturovat až po nadpis Nadpisy dalších úrovní by neměly být použity, pokud neexistuje nadpis předchozí úrovně Nepřeskakujte úrovně (ne a za ním )

31 TNPW1 Cvičení 2 Nadpisy 3 - ukázka Stránka o zelenině Květák Květák je oblíbenou košťálovou zeleninou. Recepty s květákem Květáková polévka Očištěný květák rozdělíme na růžičky a opláchneme ve studené vodě… Jak pěstovat květák Květák vyžaduje vhodné stanoviště… Zelí Zelí je z rodu brukev.

32 TNPW1 Cvičení 2 Odkazy Hypertextové odkazy – absolutní a relativní Absolutní nás dostane vždy na stejnou adresu (použití při odkazování na jiný web) Relativní používáme při odkazování mezi stránkami a soubory jednoho webu (při změně umístění webu budou odkazy stále fungovat)

33 TNPW1 Cvičení 2 Odkazy 2 - atributy Seznam Můj obrázek Atributy href – cíl odkazu – URL (absolutní nebo relativní) name – jméno záložky (viz další stránka)

34 TNPW1 Cvičení 2 Odkazy 3 – v rámci stránky Stránka se odroluje na pozici záložky Místo atributu name lze použít atribut id Nadpis webu … Vrátit na nadpis webu …

35 TNPW1 Cvičení 2 Zkuste si Vytvořit složku „cviceni1” na disku W Vytvořit v ní soubor index.html s nějakým obsahem (nadpis, odstavec) – v PsPadu Zobrazit tento soubor v prohlížeči na adrese Doplnit v PsPadu jeden absolutní odkaz a vyzkoušet v prohlížeči (aktualizace okna F5)

36 TNPW1 Cvičení 2 Příští cvičení Obrázky Seznamy Tabulky Procvičení Bodovaný úkol


Stáhnout ppt "TNPW1 Cvičení 1 13.2.2013"

Podobné prezentace


Reklamy Google