HollarkaVOŠ - 3. ročník 2023/2024
Created by Jiří Kofránek
Komunikační rozhraní při výuce programování interaktivní grafiky VOŠ
POSTUP VYTVOŘENÍ APLIKACE
Kostra webu závěrečné práce
UKÁZKOVÁ APLIKACE PRO KOSTRU WEBU ZÁVĚREČNÉ PRÁCE:
odkaz na aplikaci "Metabolismus železa":
https://egolem.online/ironmetabolism/#iron1intake.md
odkaz soubor data.json:
https://docs.google.com/document/d/1XlTM0QIZjWzADpJEPpxEkqF_jSQgCIsZfdJVpP1Ffgs/edit?usp=sharing
odkaz na git.hub se zdrojovým textem programu
https://github.com/kofranek/Kostra
NAKLONOVÁNÍ HOTOVÉ APLIKACE Z GITHUBU
Některá videa o orgpadu
Bootstrap!!!
Pro usnadnění vytváření CSS je velmi vhodné používat framework Bootstrap:
https://getbootstrap.com/
Bootstrap je open-source sada nástrojů kaskádových stylů pro tvorbu webových aplikací. Obsahuje návrhářské šablony založené na HTML a CSS, sloužící pro úpravu typografie formulářů, tlačítek, navigace a dalších komponent rozhraní, stejně jako další volitelná rozšíření programovacího jazyka JavaScript.
Pro použití Bootstrapu jsou nutné jen základní znalosti HTML a CSS, interaktivní prvky jako jsou tlačítka, boxy, menu a další kompletně nastavené a graficky zpracované elementy je totiž možné vložit pouze pomocí HTML a CSS,
Používání frameworku Bootstrap je velmi jednoduché. Pro jeho použití existuje řada tutoriálů, např.
Odkazy na některé vysvětlující orgpstránky
Moje práce
Vue Mastery - úkol do 23.2.!
ÚKOLY:
- NAUČIT SE PRACOVAT A VYUŽÍVAT ORGPAD (podívejte se na řadu tutoriálů a vysvětlujícíh orgstrábek).
- VYTVOŘIT V ORGPADU VLASTNÍ PREZENTACI O SOBĚ (fotku, kontakt, portfolio, plány, zájmy…)
- NAUČIT SE ZÁKLADY GITu
plány
klidný život s přítelem
psaní vlastních příběhů
kontakty
natalie.novackova@hollarka.cz
natalienovackova@seznam.cz
Vue 3 crash course
Velmi přístupné vysvětlení Vue3 během 2 hodin
Jiří Kofránek
Já
Moje koníčky
hraní
psaní
dívání se na filmy
vue úkol
ulohy
https://github.com/Ywiaris/vue
Adéla Zaťková
Vue School - Getting Started Vue.js and the Composition API
někdy kreslim
Vue Composition API
Natalie Nováčková
Zde vytvořte obsah vaší prezentace… ඞ
hobbies
workout
videogames
cosplay
video editing
Git a Github
kontakty
- Jiří Kofránek kofranek@gmail.com tel. 777-686868
- Anna Marie Thořová annamarie.thorova@hollarka.cz
- Barbora Čechová barabezzubka@seznam.cz
- Nikola Lišková liskova.nikca@gmail.com
- Nela Somogyiová nela.somogyiova@seznam.cz
- Alžběta Anna Hlavinková alzbetaanna.hlavinkova@hollarka.cz
- Daniel Farkaš daniel.farkas@hollarka.cz
- Natalie Nováčková natalie.novackova@hollarka.cz
- Adéla Zaťková adela.zatkova@hollarka.cz
- Eliška Nechvátalová eliska.nechvatalova@hollarka.cz
- Michaela Kolačkovská mich.kolackovska@gmail.com
annamarie.thorova@hollarka.cz,
barabezzubka@seznam.cz
liskova.nikca@gmail.com
nela.somogyiova@seznam.cz
alzbetaanna.hlavinkova@hollarka.cz
daniel.farkas@hollarka.cz
natalie.novackova@hollarka.cz
adela.zatkova@hollarka.cz
eliska.nechvatalova@hollarka.cz
mich.kolackovska@gmail.com
animace - github
Anna Marie Thořová
:
Daniel Farkaš
kontakt
adela.zatkova@hollarka.cz
Co je Single Page Application
https://www.bloomreach.com/en/blog/2018/what-is-a-single-page-application
Nikola Lišková
hmm
dog
<3
:3
úkol?
vue . problém -unity
Barbora Čechová
Amuuugus
Alžběta Anna Hlavinková
ukoly
https://github.com/eliskanech/CounterApp
https://github.com/eliskanech/NoteAplication
úkoly
https://github.com/Bramburek7
Michaela Kolačkovská
Zde vytvořte obsah vaší prezentace…??
ʕ•́ᴥ•̀ʔっ👊💥💥💥💥💥 ☠
（ ^_^）o自自o（^_^ ） "Cheers"
Absolventka
Osvětový projekt na téma Sexualizované násilí
- Animovaný film
- Edukativní webová stránka pojednávající o péči oběti
Nela Somogyiová
Zde vytvořte obsah vaší prezentace… ❤️ᨐᵉᵒʷ
┌( ͝° ͜ʖ͡°)=ε/̵͇̿̿/’̿’̿ ̿ ლ(｀ー´ლ)
unity - skákačka
Eliška Nechvátalová
Zde vytvořte obsah vaší prezentace… ඞ
Vue 3 composition API
:p
ukol 1
https://github.com/Mich-Kol/vue-project
https://github.com/Mich-Kol/CounterVanilaJS
vuejs.org
DOMÁCÍ ÚLOHA:
Projděte si první část kurzu (0-1.39min)
NAPROGRAMUJTE PODLE INSTRUKTÁŽE ULOHU A ULOŽTE JI DO SVÉHO GITU A ODKAZ NA NĚJ ULOŽTE DO ORGPADU s šipkou na své jméno
- Tady je odkaz na github s řešením úlohy pomocí čistého (vanilla) javascriptu (tj. bez jakékoliv podpory externích knihoven či javascriptu): https://github.com/Hollarka/counter/
- Tady je odkaz na řešení pomocí frameworku Vue: https://github.com/Hollarka/CounterVueApp
- tady je finální řešení první úlohy: https://github.com/kofranek/Ultimate-Vue3-tutorial/tree/main/VueCounter21
ULTIMATE Vue 3 TUTORIAL: první projekt
ukoly
https://github.com/somogyiova/uloha
ukol 2
https://github.com/Mich-Kol/NotesAppl
hra v unity
scénář webové stránky:
- infinite page
- sticky navbar
- logo [přesune na úvod stránky]
- o projektu [přesun na kapitolu o projektu]
- trailer [přesun na trailer]
- stáhnout [přesun na konec]
- úvod
- animované pozadí
- call to action button = stáhnout
- o projektu
- video s ukázkou hry
- call to action - stáhnout
- footer s kontakty a odkazy na sociální sítě
karetní hra v unity
Webová stránka:
- Hlavní stránka
- Header s logem a tlačítkem "stáhnout hru" (po skrollování se zmenší + sticky)
- Malý úvod
- "Chcete vědět více?" → Button "O projektu" - dostane nás do sekce "O projektu"
- O projektu
- Více informací o projektu
- Slideshow
část vue mastery
https://github.com/Mich-Kol/real-world-vue
Bonus - 2. úloha
Jako bonus si zkuste druhou úlohu kurzu
tady je odkaz na github s řešením:
https://github.com/kofranek/NotesApp
ULTIMATE Vue 3 TUTORIAL: druhý projekt
Vue Boot Camp na UDEMI
Na této adrerse je celý kurz (6 úloh, 17.5 hodin videokutrzu, v 152 krátkých cca 6-7minutových krátkých videí, postupně vysvětlujících problematiku na příkladě 6 úloh):
https://www.udemy.com/course/the-vue-3-bootcamp-the-complete-developer-guide/
