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
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
<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/VueCounter2 1
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/
