Lekce 2 Ustanovení firmy

Obsah hodiny  Rozcvička – brainstorming (8)  Ustanovení imaginární firmy (20)  Název  Cíl  SWOT analýza firemního prostředí  Přestávka (5)  Algoritmizace – tréning abstraktního myšlení (10)  HTML – základní značky, seznamy(10)  Přestávka (5)  Vyplnění osobních karet žáků, ohodnocení lekcí (25)  HTML – obrázky, odkazy(10)  Možnosti specializace(5)  Přestávka (5)  Feedback, rozdání úkolů, konzultace(5 – 30)

 Na co vše lze použít plyšového medvídka? Rozcvička

 Název firmy?  Cíl firmy ?  Kvantifikovaný  Plánové obdbí  SWOT analýza  Strenghts – silné stránky  Weaknesses – slabé stránky  Opportunities - příležitosti  Threats – hrozby  Podrobný rozbor + vytvoření taktiky příště Ustanovení imaginární firmy

 Proměnná – velmi zjednodušeně nějaké písmeno, pod kterým se skrývá nějaké číslo  Čti(proměnná) – zeptá se to na číslo a to si potom uloží do proměnné  Piš(proměnná) – vypíše na obrazovku obsah proměnné  Proměnná := číslo – přiřadí číslo do proměnné ( a:=1 – v proměnné a je číslo 1)  Dokud podmínka opakuj příkazy – opakuje blok příkazů dokud je splněna podmínka  Podmínka - například proměnná>0  Příkaz – například čti(x); i := i+1; Algoritmizace - příkazy

 Určete součet p čísel, postupně ukládaných do proměnné číslo.  P = 1,2,3,4…  Číslo = …-1,0,1…  P i Číslo naklapeme na klávesnici, když se na něj program zeptá Algoritmizace – týmový úkol

začátek čti(p); součet:=0; i := 1; //čítač cyklu dokud i<=p opakuj začátek čti(číslo); součet := součet + číslo; i := i+1; //zvětšuje se než přestane platit podmínka konec piš(součet); konec Algoritmizace - řešení

 Některé značky ovlivňují pouze vzhled, některé však mají i sématický význam. To znamená, že říkají, který obsah nesou.  odstavec Můžeme očekávat, že obsah je nějaký blok textu, který představuje odstavec.  nadpis první úrovně  nadpis první úrovně  nadpis druhé úrovně  nadpis druhé úrovně  odskok na další řádek – měl by se používat pouze v rámci odstavce.  vodorovná čára - oddělovník HTML – základní značky

Některé značky o svém obsahu nic neříkají, snad jen, že je například tučný.  tučné Pouze tučný text. Nenese žádnou informaci o obsahu. Chceme-li ukázat, že některá slova jsou důležitá, použijte radši Důležitá informace nebo  tučné Pouze tučný text. Nenese žádnou informaci o obsahu. Chceme-li ukázat, že některá slova jsou důležitá, použijte radši Důležitá informace nebo  podtržené Podtrhávat se doporučuje pouze odkaz, jinak je to matoucí.  kurzíva Opět pouze značka ovlivňující vzhled.  Značky a jsou zastaralé HTML – základní značky

 - unordered list (nečíslovaný seznam) - list (položka seznamu) - list (položka seznamu) - konec položky seznamu - konec položky seznamu 1. - ordered list (číslovaný seznam) text - položka text - položka HTML - seznamy

Příklad kódu neuspořádaného seznamu: <ul> Polozka 1 Polozka 1 Polozka 2 Polozka 2 Polozka 3 Polozka 3 </ul> Na výstupu (v prohlížeči) se zobrazí tento seznam: Polozka 1Polozka 1 Polozka 2Polozka 2 Polozka 3Polozka 3<ul>

Příklad kódu uspořádaného seznamu: Polozka 1 Polozka 1 Polozka 2 Polozka 2 Polozka 3 Polozka 3 Na výstupu (v prohlížeči) se zobrazí tento seznam: 1)Polozka 1 2)Polozka 2 3)Polozka 3 <ol>

Osobní karta má složitou strukturu. Proto se jí nezajímeje a snažte se především vyplnit údaje zde uvedené. Pro zajímavost: Struktura karty: Vnější plovoucí kontejner kontejner pro obrázek konec kontejneru pro obrázek kontejner pro text konec kontejneru pro text Konec vnějšího kontejneru Vyplnění osobních karet

Pro nás je důležitý žlutý odstavec. Můžete si pohrát s barvou pozadí a s adresou obrázku, které jsou podtrženy. Neidentifikovaný HTML: Management: CSS: Grafika: JS: Databáze: Algoritmizace: Hardware: Vystupování: HTML kód karty

 Podtržené položky můžete měnit  background-color: je barva pozadí  src je adresa k obrázku.  Místo Neidentifikovaný napište svůj nick a ostatní položky doplníme společně.  Máte-li obrázek, můžete mi jej rovnou poslat a já jej dopním do vaší karty nebo se o to pokusit sami podle dalšího snímku  Budete-li chtít umístit obrázek sami, pošlete mi kód karty i s novou adresou obrázku. Vyplnění karty

 Src=„URL“ je adresa k vašemu obrázku. Do příští hodiny by tam mělo být vaše foto.  Přihlásíte se na  Zadáte jméno informatik, heslo vám řeknu  Rozkliknete si článek „odklad obrázků st“  Najdete tlačítko „soubor“, rozkliknete  V dialogovém okně napíšete název souboru a pomocí procházet řeknete, kde je uložen na disku, stisknete přidat  Od této chvíle je váš obrázek přístupný pro váš kód. Adresa k němu je vašeho obrázku (bez mezer a diakritiky) nebo jen wpimages/other/art45/název vašeho obrázku wpimages/other/art45/názevhttp://3zs.zabreh.cz/wpimages/other/art45/název wpimages/other/art45/název  Proč to tak je?... O tom si někdy můžeme udělat samostatnou lekci  Proč to tak je?... O tom si někdy můžeme udělat samostatnou lekci Uložení obrázku na server

 S osobními kartami je spjato i hodnocení  Ohodnoceny budou jak znalosti, tak i vynaložená práce a to body  V rámci specializace, bez které se žádná firma neobejde, budou body získávány v různých kategoriích  Celkové hodnocení může být dáno jednoduchým součtem bodů ve všech kategorií, ne všechny kategorie jsou však stejně cenné  S postupem času se pravděpodobně vyčlení další kategorie. Například grafika lze rozdělit na kresbu, vektorovou grafiku a rastrovou grafiku  Vyplňte svoji kartu a doplňte body, na kterých jsme se dohodnuli. Kód vaší karty mi poté pošlete na . Systém hodnocení

   zde jsou stránky mého učitele se všemi podrobnostmi  Místo URL lze použít i relativní adresy. HTML – obrázky

 Absolutní = URL  o.gif o.gif o.gif  Relativní adresa – je-li adresa volána ze stejného serveru, na který se odkazujete, není potřeba znovu udávat jméno serveru  wpimages/other/art45/foto.gif wpimages/other/art45/foto.gif HTML – cesta

 Ve své původní podobě to bylo propojení textů, což tvořilo základní kámen internetu. Také dnes tvoří odkaz základní kámen internetu. Jen již nespojuje pouze text.  element  element  seznam  seznam  Odkaz uvnitř dokumentu  Odkaz uvnitř dokumentu  uvnitř stránky  uvnitř stránky  Do odkazu lze zabalit i obrázek  Do odkazu lze zabalit i obrázek HTML - odkaz

 Kus papíru.. 1. Oznámkujte vaše zvládnutí jazyka HTML z první a druhé lekce ( Ať vím, jestli potřebujete spíše opakovat nebo jít dál ). 2. Oznámkujte srozumitelnost této prezentace. 3. Oznámkujte srozumitelnost výkladu této lekce. 4. Oznámkujte svého dnešního šéfa. 5. Oznámkujte celkový dojem. Feedback

 Do osobních karet nafotit obrázky.  Odměna: body do managementu  Termín: do středy (2 body); do pátku (1 bod)  Kvantita: nad 50% (1 bod); 100% (2 body)  Kvalita: 0 – 6 bodů  Bonusové prostředky: možno rozdat maximálně 3 body do grafiky, když fotky budou oříznuté, případně zmenšené na šířku 144 pixelů a výšku 127 pixelů. Požaduji také fotky v původní velikosti pro možnost pozdějších úprav. Fotky zašlete společně se jmény na  Hledáme nové „zaměstnance“? Jestli ano, tak někoho přiveďte. Úkol pro dnešního šéfa

1. Zjistěte rozdíl mezi a a vaše zjištění mi zašlete do příští hodiny na mail. Hodnocení: 0 – 2 body do HTML, úkol pro jednotlivce. 2. Obrázek má height=„82“ width=„93“. Potřebujete jej zvětšit na width=„143“. Jaká bude hodnota height? Hodnocení 1 bod do grafiky. Úkol pro jednotlivce. 3. HTML – rozšiřující literatura  Jíří Kosek  Tvorba dokonalých www stránek  Bez této knihy se obejdeme, ale není nad dostatečný zdroj informací. Kniha se dá sehnat za cca 300 Kč. Kdyby o ni někdo měl zájem, dejte mi vědět. Úkol pro všechny, rozšiřující literatura