Materiály ke kurzu Czechitas Tvořím web: HTML a CSS. Repozitář obsahuje:

• slajdy,
• zadání úkolů,
• jednotlivé výsledky samostatných cvičení.

Slajdy jsou vytvořené pro knihovnu Reveal.js. Pro zobrazení je zapotřebí spustit HTTP server. Nejsnazší je použít ten, který se využívá při úpravách.

Užitečné klávesové zkratky:

• s: zobrazí poznámky přednášejícího v novém okně
• f: přepne zobrazení na celou obrazovku
• m: zobrazí menu s přehledem všech slajdů
• ?: zobrazí nápovědu k dalším zkratkám

Obsah slajdů se nachází v adresáři slides/ ve formátu Markdown s dodatečnými značkami:

• ----: odděluje jednotlivé slajdy
• >>>: uvazuje poznámky přednášejícího
• <!-- .slide: data-state="trida-slajdu" -->: na začátku slajdu nastaví třídu slajdu

Další speciální vlastnosti jsou popsané v dokumentaci pro Reveal.js Markdown.

Pro práci na prezentaci je vhodné mít nainstalovaný Node.js (včetně npm).

1. Naklonujte repozitář
2. Nainstalujte závislosti příkazem npm i ve složce repozitáře
3. Spusťte vývojový server přes npm start

Do adresy stránky přidej ?print-pdf, tj. například: http://localhost:7410/?print-pdf nebo i https://czechitas.github.io/tvorim-web-1/?print-pdf. Zobrazí se verze vhodná pro tisk a uložení do PDF.

Viz Server Side Speaker Notes.

Ve složce prezentace spusťte

node plugin/notes-server

Server se spustí na localhost:1947 a je přístupný na externí adrese. Aktuální verze však nepodporuje mobilní zařízení.

Zadání úkolů je v souboru slides/tasks.md a na konci prezentace. Zadávání úkolů je připravené pro aplikaci Lístečky s jejímž využitím kurz počítá.

Obsahují vždy kompletní data pro daný krok. Smyslem je moci ukázat jak to má po dokončení úkolu vypadat a také umožnit v případě, že někdo úkol nestihne, aby to mohl využít jako záchytný krok.

Součást projektu je to kvůli spolupráci.

Pokud se nejedná o úpravu v posledním kroku, je potřeba vždy změnit to samé znovu ve všech následujících krocích. Všechny úpravy je potřeba následně nasadit na Thimble.

1. Přihlaš se na Thimble (pod účtem czechitas)
2. Otevři příslušný projekt (podle čísla, názvy se mohou lehce lišit) do nového tabu.
3. Drag&drop soubory do otevřeného projektu.
4. Klikni na Publish vpravo nahoře.
5. Zavři tab.
6. Opakuj krok 2. až 5. dokud nenahraješ všechny změněné stavy.
7. Zkontroluj z odkazů v tasks.md, že vše je jak má být.

Tip: Neotvírat více než jeden projekt najednou (do tabů např.) Thimble to špatně rozdýchává.

Není to nutné, ale pokud si chceš ušetřit práci s obnovováním stránky při změně CSS nebo HTML, spusť v /cviceni/ příkaz npm install a pomocí npm run watch se spustí Browsersync.

• Briefing se zástupkyní czechitas:
  • pravidla a průběh jsou ve slidech a říká to lektor hned po ní (je to i ve speaker notes)
  • na kdy načasovat oběd
• Otevři si v prohlížeči:
  • slajdy
  • admin pro lístečky
  • reklamu na sponzora (ideálně vložit logo do úvodního slajdu, viz jeho speaker notes)
• Kdyby Lístečky nefungovaly, tak mít nachystané papírové

Počítá se s zhruba hodinovými bloky a desetiminutovými přestávkami.

Na oběd je 40 minut, vzhledem k tomu, že je obvykle na místě to stačí.

Pokud se nestíhá ke konci, je lepší neudělat poslední úkol, než zrychlovat nebo rušit přestávku, které jsou opravdu potřeba.

Samozřejmě není potřeba dodržovat vše na minutu jednotlivé části trvají pokaždé trochu jinak.

Smyslem přehledu níže je mít možnost si zkontrolovat, zda vše zhruba probíhá podle plánu.

• Daniel Srb @benabraham
• Tomáš Kout @Kout
• Jan Vlnas @jnv
• Jan Pobořil @iBobik