tag:blogger.com,1999:blog-50951259301345042092024-03-22T06:08:58.497+01:00Pablo74: mobilní aplikacePablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.comBlogger68125tag:blogger.com,1999:blog-5095125930134504209.post-66192675559440677792021-10-26T17:24:00.004+02:002021-10-26T17:24:59.019+02:00Web scraping | Těžíme data z webu<p>Publikoval jsem videokurz, celkem deset videí (česky) s názvem "Web scraping | Těžíme data z webu". Jedná se o praktický návod, jak získat data z webových stránek.</p><p>Všechny použité nástroje jsou zdarma a obejdeme se bez programování.</p><p>Pokud vás toto téma zajímá, videa najdete na Youtube, na mém kanálu, v playlistu webové a mobilní aplikace: <a data-attribute-index="0" href="http://jdem.cz/fgt673" style="background-color: white; border: var(--artdeco-reset-link-border-zero); box-sizing: inherit; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: var(--font-weight-bold); line-height: inherit !important; margin: var(--artdeco-reset-base-margin-zero); padding: var(--artdeco-reset-base-padding-zero); position: relative; text-decoration: var(--artdeco-reset-link-text-decoration-underline); touch-action: manipulation; vertical-align: var(--artdeco-reset-base-vertical-align-baseline);">http://jdem.cz/fgt673</a></p><p><br /></p><p><br /></p>Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-31429292008050878822021-08-06T13:50:00.000+02:002021-08-06T13:50:25.252+02:00<h2 style="text-align: left;"> PWA aplikace: uživatelské nastavení jména a ikony před instalací</h2><div style="text-align: justify;">To máte tak: mám rád webové/mobilní aplikace a obzvlášť ty PWA. Jak z pohledu uživatele tak i z pohledu vývojáře.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Jako uživatel již naprogramované PWA aplikace nemůžu nijak ovlivnit její název a ikonu, které se použijí při instalaci na tabletu/telefonu s Androidem a zobrazí se na ploše (domovské obrazovce).</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Existuje dost dotazů na diskuzních fórech vývojářů, zda a jak je možné některé parametry (aspoň ikonu) nastavit dynamicky. Možné to je, a jde to slušně v případě generování souborů na webu.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Ovšem, pokud máme stránky na servru ve statické podobě, tj. již vygenerované, nejde to. Nebo velmi, velmi komplikovaně.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Podíval jsem se tomuhle problému na zoubek, vyšel jsem z práce a zkoumání předních vývojářů a hle: dal jsem dohromady funkční postup, jak toho docílit.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Postup je vlastně určen pro vývojáře, protože ten musí tyto kroky implementovat, aby následně nabídl tuto možnost uživateli.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Stačí tři kroky:</div><div style="text-align: justify;"><ul><li>vytvořit formulář, ve kterém si uživatel nastaví hodnoty dle svých preferencí (jméno aplikace a její ikonu)</li><li>získání těchto hodnot JS skriptem a předání jako parametry v url adrese PWA aplikaci (na kterou se přesměruje)</li><li>v PWA aplikaci se nejprve tyto parametry použijí v JSON objektu a ten se pak injektuje jako manifest.json v PWA aplikaci</li></ul><div>Zní to složitě? Možná, ale nic na tom není, implementace je opravdu jednoduchá. Publikoval jsem k tomuto tématu článek, kde je vše vysvětleno včetně odkazu na funkční řešení:</div><div><br /></div><div><h1 class="fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 long" style="background-color: white; box-sizing: border-box; color: #08090a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: var(--fs-5xl); font-weight: var(--fw-heavy); line-height: var(--lh-tight); margin-bottom: var(--su-4); margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: start;"><a href="https://dev.to/pablo_74/pwa-set-manifest-json-name-icon-dynamically-client-side-jabbadabbadoo-10h7" target="_blank">PWA: set manifest.json name & icon dynamically; client-side. Jabbadabbadoo!</a></h1></div></div>Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-84113482175229535172021-01-10T15:49:00.000+01:002021-01-10T15:49:30.743+01:003x rozšíření pro Google Chrome<p style="text-align: justify;">Napsal jsem si tři jednoduchý rozšíření pro Google Chrome a to v HTML + CSS + JS. Rozšíření nabízím včetně zdrojových kódů, takže není problém si je upravit pro svoje potřeby.</p><p style="text-align: justify;">1. Analog Time</p><p style="text-align: justify;">Jak už název napoví, zobrazí čas na analogových ručičkových hodinách. Snadno se dá modifikovat zejména barevné podání hodin, vše je vysvětleno ve videu:</p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/DLN96TGi8nk" width="439" youtube-src-id="DLN96TGi8nk"></iframe></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: justify;">2. Digital Time</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Tohle rozšíření zobrazí čas digitálně; opět je možné ho barevně modifikovat, je k dispozici zdrojový kód.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/fsQS9W5gUGQ" width="430" youtube-src-id="fsQS9W5gUGQ"></iframe></div><br /><div class="separator" style="clear: both; text-align: justify;"><br /></div>3. Battery<div><br /></div><div>Jednoduché rozšíření, které zobrazí procento nabití baterie v notebooku.</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/SarsTvzX3GY" width="426" youtube-src-id="SarsTvzX3GY"></iframe></div><br /><div><br /><p><br /></p><p><br /></p></div>Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-4337687054742368162017-08-08T12:58:00.001+02:002017-08-08T12:58:59.876+02:00Mobilní aplikace: Chemické názvosloví<div style="text-align: justify;">
Měl jsem na Google Play aplikaci Chemické názvosloví. Tuto původní jsem odstranil a nahradil novou aplikací.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Je určena pro výuku a procvičení základního anorganického názvosloví. Obsahuje info o stavbě hmoty, tabulku přípon (-ný, -natý, -itý, ...) a obecná pravidla pro tvorbu českého anorganického názvosloví.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Z názvosloví zahrnuje: oxidy, halogenidy, nitridy, hydroxidy, sulfidy, bezkyslíkaté a kyslíkaté kyseliny. Kromě výukové části nabízí i procvičení formou přiřazení správné koncovky.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Aplikace je zdarma dostupná na <a href="https://play.google.com/store/apps/details?hl=iw&id=ipk.app.Chemicke_nazvoslovi">Google Play: Chemické názvosloví</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
A taky vypadá líp než ta předchozí :-)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-81172416942890314102017-08-05T19:17:00.001+02:002017-08-05T19:17:59.220+02:00Framework7 + VueJS: aplikace Bitcoin price<div style="text-align: justify;">
Jako malé cvičení jsem udělal jednoduchou aplikaci, která zjistí aktuální cenu bitcoinu v dolarech a kurz České národní banky USD/CZK a zobrazí cenu bitcoinu v dolarech a v korunách.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Vizuální část aplikace</h3>
<div style="text-align: justify;">
Použil jsem aktuální (srpen 2017) verzi 1.6.4 knihovny Framework7. Zobrazí se jen informační pole a tlačítko pro aktualizaci ceny.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Datová část aplikace</h3>
<div style="text-align: justify;">
Tu jsem napsal ve VueJS 2.4.2 s využitím knihovny vue-resource, která umožní volat API funkce přes http protokol.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Cenu bitcoinu beru z webu coindesk, konkrétně získávám <a href="https://api.coindesk.com/v1/bpi/currentprice/USD.json">tento JSON</a>. Kurz dolaru beru ze stránek České národní banky, konkrétně <a href="http://www.cnb.cz/cs/financni_trhy/devizovy_trh/kurzy_devizoveho_trhu/denni_kurz.txt">tento TXT soubor</a>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Cenu bitcoinu v USD a CZK zobrazuji bez desetinných míst. Trochu mi dělala problém návaznost získání dat; proto jsem pozdržel volání funkce zjišťující kurz USD/CZK o 0.7 sekundy, aby se nejprve stihla načíst cena bitconu v dolarech. Občas to zazlobí (závisí na okolnostech), pak stačí jen stisknout tlačítko update a mělo by to být OK.<br />
<br />
<h3>
Aplikace</h3>
Po spuštění se cena načte automaticky, chyby při získání dat nejsou ošetřeny. Dělal jsem to jen jako lehké cvičení.<br />
<br />
(!!!) Aby vám to fungovalo, musíte mít v prohlížeči vyřešeno CORS, např. rozšířením <a href="https://chrome.google.com/webstore/detail/cors-toggle/jioikioepegflmdnbocfhgmpmopmjkim?utm_source=chrome-app-launcher-info-dialog">CORS Toggle</a> pro Google Chrome. (!!!)<br />
<br />
Zdrojový kód aplikace (HTML + CSS + JS) je k dispozici přes tyto odkazy (stejný obsah):<br />
<a href="http://play.ionic.io/app/6cf2fa2867bc">http://play.ionic.io/app/6cf2fa2867bc</a><br />
<a href="http://play.ionic.io/app/b518c1217666">http://play.ionic.io/app/b518c1217666</a><br />
<br />
Pokud si chcete kód upravit, použijte nejprve odkaz Fork v pravém horním rohu - dostanete tak svoji vlastní kopii.<br />
<br />
<h3>
Android aplikace</h3>
Pokud z toho chcete udělat androidí aplikaci (a nevíte jak), může se inspirovat mým bezplatným videokurzem <a href="https://www.naucmese.cz/kurz/video-vlastni-mobilni-aplikace-i">Vlastní mobilní aplikace</a>.<br />
<br />
<br />
<br />
<br />
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-88977365554032282612017-06-24T23:30:00.000+02:002017-06-24T23:30:37.056+02:00VueJS 2: píšeme komponentu - grafický přepínač (toggle) v SVG<div style="text-align: justify;">
Napsal jsem si a odladil komponentu sloužící jako přepínač (toggle). Mám pro ni použití ve své aplikaci, kterou píšu s využitím Framework7 a VueJS.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pro přepínač má Framework7 implementovaný switch:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"><div class="item-title label">Switch</div></span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"><div class="item-input"></span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> <label class="label-switch"></span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> <input type="checkbox"></span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> <div class="checkbox"></div></span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> </label></span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"></div></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nepodařilo se mi ho upravit podle mých potřeb, proto jsem se rozhodl ho nahradit vlastní komponentou. Pro zamýšlené použití se hodí SVG.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;">Vue.component("toggle-name", {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> props: {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> value: {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> type: Boolean,</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> default: false</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> name: {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> type: String,</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> default: ""</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> coloroff: {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> type: String,</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> default: "white"</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> coloron: {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> type: String,</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> default: "#886aea"</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> methods: {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> toggleValue: function(){</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> this.value = !this.value;</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> this.$emit("update:value", this.value);</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> computed: {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> cx: function(){</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> return this.value ? 36 : 16</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> fill: function(){</span></div>
<div style="text-align: justify;">
<span style="font-family: "Courier New", Courier, monospace;"> return this.value ? this.coloron : this.coloroff</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> template: '<svg @click="toggleValue()" width="52" height="32"><g ><rect x="0" y="0" width="52" height="32" rx="16" ry="16" stroke="lightgray" :fill="fill" /><circle :cx="cx" cy="16" r="16" stroke="lightgray" fill="white"/><text :x="cx" y="22" text-anchor="middle" font-size="16">{{name}}</text></g></svg>'</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;">})</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
V části <b>props</b> jsou definovány vlastnosti (properties), jako <b>value</b> (hodnota přepínače false/true = off/on), <b>name</b> (jednoznakové jméno, A, B, C, ...), <b>coloron</b> (barva v poloze true), <b>coloroff</b> (barva v poloze false).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
V části <b>methods</b> se při přepnutí volá metoda <b>toggleValue,</b> která kromě změny hodnoty emituje událost se změnou <i>(two-way-databinding)</i>, aby se změnila i hodnota proměnné, se kterou je přepínač svázán.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
V části <b>computed</b> se vypočítá x-ová poloha jezdce - <b>cx,</b> a barva výplně přepínače podle hodnoty (false/true) - <b>fill.</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
V části <b>template</b> je definován vzhled přepínače, jedná se o grafiku SVG. Přepínač se skládá z obdélníku se zaoblenými rohy a kružnice, která mění svoji polohu v závislosti na stavu přepínače (false/true). Dovnitř kružnice je vepsán název přepínače (jedno písmeno) - <b>name</b>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
V HTML kódu se komponenta použije např. takhle:</div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"><toggle-name :value.sync="A" name="A" class="toggle"></toggle-name></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-68562541048712880462017-06-19T21:22:00.001+02:002017-06-19T21:22:18.765+02:00Framework7 - vlastní build<div style="text-align: justify;">
Nové aplikace už dělám v kombinaci Framework7 (HTML + CSS) a VueJS (JS). </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Framework7 umožňuje provést vlastní build, tj. stručně řečeno nepoužít kompletně celý framework, ale jen dílčí část.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Návod na vlastní sestavení je srozumitelný a snadný, najdete ho v <a href="https://framework7.io/docs/custom-build.html">dokumentaci</a>. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vyzkoušel jsem to na malé aplikaci; po náhradě plného F7 za vlastní build obsahující jen základ a po odstranění spouštěcích obrazovek (splash screen) má výsledná aplikace (soubor .apk) jen 200 kB.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Paráda.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-36557515615067608342017-05-27T15:46:00.000+02:002017-05-27T15:46:25.525+02:00VueJS 2: píšeme komponentu - zobrazení chemické rovnice<h3 style="text-align: justify;">
Zadání</h3>
<div style="text-align: justify;">
Napíšeme si komponentu, která nám zobrazí chemickou rovnici na webové stránce. Použijeme knihovnu <a href="https://khan.github.io/KaTeX/">Katex</a> a <a href="https://vuejs.org/">VueJS 2</a>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Řešení</h3>
<div style="text-align: justify;">
Název komponenty bude <b>chemula</b> (chemical formula) a bude obsahovat jeden atribut <b>formula.</b> Zobrazí chemickou rovnici pomocí Katexu.</div>
<div style="text-align: justify;">
<br /></div>
<h4 style="text-align: justify;">
Deklarace komponenty</h4>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;">Vue.component("chemula", {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> replace: true,</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> props: {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> formula: {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> type: String,</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> default: ""</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> data: function(){</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> return {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz() +->=",</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> numbers: "0123456789",</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> upIndex: "^",</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> dnIndex: "_", </span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> leftBracket: "{",</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> rightBracket: "}"</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> computed: {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> textToKatex: function(){</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> var text, katexStr;</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> katexStr = "";</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> text = " " + this.formula + " ";</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> for (var i = 1; i < text.length-1; i++){</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> if (this.chars.indexOf(text[i]) !== -1){</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> if (this.numbers.indexOf(text[i-1]) !== -1)</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> katexStr = katexStr + this.rightBracket + text[i];</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> else </span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> katexStr = katexStr +text[i];</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> else </span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> if (this.numbers.indexOf(text[i]) !== -1){</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> if (this.chars.indexOf(text[i-1]) !== -1)</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> katexStr = katexStr + this.dnIndex + this.leftBracket + text[i];</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> else </span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> katexStr = katexStr + text[i];</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> };</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> </span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> katexStr = katexStr.replace(/\s\s+/g, ' ');</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> katexStr = katexStr.replace(/->/g, '\\rightarrow ');</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> katexStr = katexStr.replace(/=/g, '\\rightarrow ');</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> try {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> return katex.renderToString(katexStr, {throwOnError: false}); </span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> } catch (err) {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> return "" </span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> template: '<span v-html="textToKatex"></span>'</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;">});</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Do atributu <b>formula</b> vložíme zápis chemické rovnice. Ten se prochází znak po znaku a postupně se přidává do proměnné <b>katexStr</b> i se speciálními znaky (dolní index, složená závorka). Výsledný zápis se do HTML kódu vloží v části <b>template,</b> která zobrazí řetězec v <b>Katexu,</b> získaný v části <b>computed.</b></div>
<div style="text-align: justify;">
<b><br /></b></div>
<h3 style="text-align: justify;">
Použití v HTML kódu</h3>
<div style="text-align: justify;">
Do webové stránky vložíme komponentu s rovnicí, např.:</div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"><chemula formula="H2SO4 = H2O + SO3" ></chemula></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Jak to vypadá prakticky si můžete ověřit <a href="http://play.ionic.io/app/a9b15e5769ab">tady</a> (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-85321440824573007632017-05-26T21:29:00.000+02:002017-05-26T21:29:30.791+02:00VueJS 2: píšeme komponentu - zobrazení matematického výrazu (Katex) v SVG<div style="text-align: justify;">
Řešil jsem docela zajímavý problém. Jak zobrazit matematický výraz pomocí Katexu (implementace Latexu od Khan Academy) do vektorové grafiky SVG.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nevím o žádném přímém a bezprostředním řešení. Proto jsem experimentoval a přišel jsem na zajímavý trik, jak dostat vygenerovaný výraz do SVG tak, aby šel zobrazit.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Trik spočívá ve využití <span style="font-family: Courier New, Courier, monospace;"><foreignObject></span>, kterým lze do SVG dostat obsah, jež samotné SVG nepodporuje. S trochou práce a štěstí se mi podařilo docílit výsledku.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ukázka je dostupná tady: <a href="http://play.ionic.io/app/f3452825f611">http://play.ionic.io/app/f3452825f611</a></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-53105171654405288062017-05-12T18:53:00.000+02:002017-05-12T18:53:37.997+02:00Videokurz: Vlastní mobilní aplikace - I<div class="postbody" style="border: 0px; float: left; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.48em; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 724.021px;">
<div id="post_content1125802" style="border: 0px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<div class="content" style="border-top-color: rgb(238, 238, 238); border-top-style: solid; border-width: 1px 0px 0px; clear: both; font-stretch: inherit; font-variant-numeric: inherit; line-height: 1.5em; margin: 0px 0px 15px; min-height: 3em; overflow-x: auto; overflow-y: hidden; padding: 15px 0px 1px; vertical-align: baseline;">
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">Pro zájemce o vlastní mobilní aplikaci jsem publikoval videokurz <a href="https://www.naucmese.cz/kurz/video-vlastni-mobilni-aplikace-i">"Vlastní mobilní aplikace".</a></span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;"><br /></span></span>
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">Obejdeme se bez programování - nemusíte tedy umět programovat.</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;"><br /></span></span>
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">Kurz je česky a zdarma. K napsání vlastní aplikace, která zobrazí vámi vložený obsah (text, obrázky, ...) stačí jen znalost HTML. Celý postup je názorně vysvětlen v průběhu kurzu. Připravil jsem tři šablony pro vaši vlastní aplikaci.</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;"><br /></span></span>
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">Není třeba vůbec nic instalovat a konfigurovat. Psaní aplikace probíhá v online editoru.</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;"><br /></span></span>
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">Obsah kurzu (jednotlivá videa):</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">1. Představení kurzu</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">2. monaca, založení projektu</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">3. monaca debugger</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">4. monaca, sestavení aplikace</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">5. Framework7, ukázka funkcí</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">6. Framework7, ukázka aplikací</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">7. monaca a Framework7, import projektu</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">8. monaca a Framework7, úprav projektu</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">9. monaca a Framework7, import projektu (2)</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">10. monaca a Framework7, sestavení aplikace (.apk)</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">11. ukončení kurzu</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;"><br /></span></span>
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;">Výsledkem bude soubor .apk, který se nainstaluje do telefonu či tabletu. Stačí povolit instalaci z neznámých zdrojů v menu telefonu.</span></span><br />
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;"><br /></span></span>
<span style="color: #444444; font-family: open sans, sans-serif;"><span style="font-size: 14px;"><a href="https://www.naucmese.cz/kurz/video-vlastni-mobilni-aplikace-i">Vlastní mobilní aplikace</a></span></span><br />
<div style="color: #444444; font-family: "open sans", sans-serif; font-size: 14px; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;">
<br /></div>
</div>
</div>
</div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-65281183666941510402017-05-06T17:35:00.001+02:002017-05-06T17:35:53.946+02:00Připravuji videokurz: Vlastní mobilní aplikace - I<div style="text-align: justify;">
Právě pracuji na videokurzu Vlastní mobilní aplikace - I.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Cílem je ukázat jednoduchý a praktický způsob, jak si se základní znalostí HTML (a případně i CSS) vytvořit vlastní mobilní aplikaci pro Android.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
V kurzu (ještě není hotový) ukážu na praktickém příkladu, jak si vytvořit jednoduchou mobilní aplikaci, která zobrazí předem připravený obsah - tím můžou být nadpisy, odstavce textu, obrázky, atd.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mám připraveny tři šablony (se stejným obsahem), které můžete použít a upravit si je podle svého. Vytvářenou aplikaci lze testovat v mobilním telefonu a po jejím odladění si ji můžete vytvořit jako soubor s příponou .apk a nainstalovat ji do telefonu či tabletu.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Jednotlivé šablony: 11A-F7-blank, 12A-F7-pages a 13A-F7-tabs vypadají takhle:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCWDiL0vREOcIBEnjcNT-x9yB3FoX4RWP7XIsVysSLqGW7DmaLaNwjDeiIMp24JslV3rVV16uRW8hbQHKhI5tHs4y0U8bogHAgbq9Smj_yAjxCbl-A61BHOyJ3NQ1Ad5oq6IgX6mFa18s4/s1600/11A-F7-blank.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCWDiL0vREOcIBEnjcNT-x9yB3FoX4RWP7XIsVysSLqGW7DmaLaNwjDeiIMp24JslV3rVV16uRW8hbQHKhI5tHs4y0U8bogHAgbq9Smj_yAjxCbl-A61BHOyJ3NQ1Ad5oq6IgX6mFa18s4/s320/11A-F7-blank.png" width="180" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVQKGH9-TGvt3vS_XErSpIHvrBpIE5RjKKvzM5h7anU4R4CusnTOy7K9AEQwBEBEIMbJL85vHCM0fZv50mfac0fdjHFNRey5tFVVBAhhIfuQd16il7C6wRiuAr-lz8Vjavf6Dym0UnYqu/s1600/12A-F7-pages.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVQKGH9-TGvt3vS_XErSpIHvrBpIE5RjKKvzM5h7anU4R4CusnTOy7K9AEQwBEBEIMbJL85vHCM0fZv50mfac0fdjHFNRey5tFVVBAhhIfuQd16il7C6wRiuAr-lz8Vjavf6Dym0UnYqu/s320/12A-F7-pages.png" width="180" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW2zg348I2Gy5hKLNCcj48pcR7uxSDsLFJs8vykn4YChf6Q5j8qCvm0FwjJXER66xH04EejvMf7rwBgrSeZeG7QU_v13-1KuV2ZnbmwCZ9IbRVDb_ookwwf54sVh2PVOdmKTZib2fX3ShE/s1600/13A-F7-tabs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW2zg348I2Gy5hKLNCcj48pcR7uxSDsLFJs8vykn4YChf6Q5j8qCvm0FwjJXER66xH04EejvMf7rwBgrSeZeG7QU_v13-1KuV2ZnbmwCZ9IbRVDb_ookwwf54sVh2PVOdmKTZib2fX3ShE/s320/13A-F7-tabs.png" width="180" /></a>
</div>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-23999361279727945942017-05-01T17:45:00.001+02:002017-05-01T17:45:10.405+02:00Pracuji na aplikaci: Todo list - seznam úkolů<div style="text-align: justify;">
V těchto dnech pracuji na malé aplikaci Todo list (seznam úkolů). Přešel jsem z kombinace Ionic/Angular na Framework7/VueJS.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Aplikace je funkční. Ukládá data automaticky do telefonu (úložiště localstorage). Vypadá takhle:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" d="" drive.google.com="" file="" h54ckewzeuhyedvtmectuue="" https:="" style="clear: both;" usp="sharing" view="">
</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkuH_XVm1fYZzRUKnLgePOuGVGF3vHVNtNI1e_LNxKe3FfXSiaRmbh8Xh7MYSQMhuo8NG1tVVJ9y6WQSr-IFIwLAixHj0n6KStRZ2yQmax8sSk7YUNVWa6WsGNd2gBwswM1-dWI-lT3Uii/s1600/Screenshot_2017-05-01-17-07-17-921_ipk.app.todolist.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkuH_XVm1fYZzRUKnLgePOuGVGF3vHVNtNI1e_LNxKe3FfXSiaRmbh8Xh7MYSQMhuo8NG1tVVJ9y6WQSr-IFIwLAixHj0n6KStRZ2yQmax8sSk7YUNVWa6WsGNd2gBwswM1-dWI-lT3Uii/s320/Screenshot_2017-05-01-17-07-17-921_ipk.app.todolist.png" width="179" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3ia_wsdKgplUgO3u6aZNxc76GDGjS-sKb1fAUZVAQ5EMHJ4U-bFvivLWH8_xWE1XA8lrRD3pGq4IA1S_bUSRgWwoxe1sN0W7P2csfy0myrt_d5ZMlGk-priNGmKpuOSDef4HT0WOj0Qq/s1600/Screenshot_2017-05-01-17-07-27-676_ipk.app.todolist.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3ia_wsdKgplUgO3u6aZNxc76GDGjS-sKb1fAUZVAQ5EMHJ4U-bFvivLWH8_xWE1XA8lrRD3pGq4IA1S_bUSRgWwoxe1sN0W7P2csfy0myrt_d5ZMlGk-priNGmKpuOSDef4HT0WOj0Qq/s320/Screenshot_2017-05-01-17-07-27-676_ipk.app.todolist.png" width="179" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixRwj6oVG-2nmoUu9A0-zJnHuVM035R5FP1zZUBE0wx2LmdWyP4sqW2fNEa7X0s742kyGjp0kYqVBFlsFTViwWZjmLbli50p8Bt92jTg348lpm7z2O3NwkUJqREDgLmQbkEPxzcmjn5F9r/s1600/Screenshot_2017-05-01-17-08-07-694_ipk.app.todolist.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixRwj6oVG-2nmoUu9A0-zJnHuVM035R5FP1zZUBE0wx2LmdWyP4sqW2fNEa7X0s742kyGjp0kYqVBFlsFTViwWZjmLbli50p8Bt92jTg348lpm7z2O3NwkUJqREDgLmQbkEPxzcmjn5F9r/s320/Screenshot_2017-05-01-17-08-07-694_ipk.app.todolist.png" width="180" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVr2vIH_Maxw3NXXt_WmMDAcfUIwMCKe-EWwRz2_C5jEdvEBf2hGHfVrq3CE_J3GJcDeL7OWQuZRbDvSwE3ox9dm75nUCJM85rQvepG_t7lUpzIXb6F4SUY7roE5Y7K9dVqSDpPweFeg6D/s1600/Screenshot_2017-05-01-17-08-23-453_ipk.app.todolist.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVr2vIH_Maxw3NXXt_WmMDAcfUIwMCKe-EWwRz2_C5jEdvEBf2hGHfVrq3CE_J3GJcDeL7OWQuZRbDvSwE3ox9dm75nUCJM85rQvepG_t7lUpzIXb6F4SUY7roE5Y7K9dVqSDpPweFeg6D/s320/Screenshot_2017-05-01-17-08-23-453_ipk.app.todolist.png" width="180" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnAyVEMM1v5_0vry5Y9EiCZ-4BFIUW0LumK2nPiOgBnqKLKojw45qvm6h1bPEI1EoSM4PSPZcNdaLWT7wwP97Uoa1QBPWsRZ90PygiH2hqp8-KIytmA6ueSvxGnJeOWC27VtTG_37hGfR4/s1600/Screenshot_2017-05-01-17-08-35-683_ipk.app.todolist.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnAyVEMM1v5_0vry5Y9EiCZ-4BFIUW0LumK2nPiOgBnqKLKojw45qvm6h1bPEI1EoSM4PSPZcNdaLWT7wwP97Uoa1QBPWsRZ90PygiH2hqp8-KIytmA6ueSvxGnJeOWC27VtTG_37hGfR4/s320/Screenshot_2017-05-01-17-08-35-683_ipk.app.todolist.png" width="180" /></a>
<br />
Není to celé moje práce, vyšel jsem z této ukázky aplikace <a href="https://jsfiddle.net/Nikoniko/sa0u4791/11/">https://jsfiddle.net/Nikoniko/sa0u4791/11/</a><br />
kterou jsem upravil.<br />
<br />
<b>Co aplikace umí?</b><br />
<br />
1. Vytvořit nový úkol. Všechny úkoly se uloží do telefonu (localstorage). <i>Tlačítko plus vpravo nahoře.</i><br />
2. Přepínat mezi zobrazením úkolů (list), editací (edit) a mazáním (del). <i>Tlačítko vlevo nahoře.</i><br />
3. Přepínat mezi zobrazením od novějšího ke staršímu a naopak. <i>Tlačítko šipka vlevo nahoře.</i><br />
4. Upravit libovolný úkol.<br />
5. Smazat libovolný úkol (ať už je hotový nebo ne).<br />
6. Označit/odznačit úkol jako hotový.<br />
7. Zobrazuje počet hotových úkolů a celkový počet.<br />
<br />
<b>Co bych rád dodělal:</b><br />
<br />
1. Rád bych vyřešil (nevím jak...) situaci, kdy se zobrazí dialog pro zadání nového úkolu a zobrazí se klávesnice - dialog se posune nahoru, i když není klávesnicí překrytý a není to nutné.<br />
2. Podporu více jazyků a přepínání mezi nimi.<br />
3. Nastavení: barvy, výchozí řazení úkolů, ...<br />
<br />
Stažení aplikace:<br />
<br />
Máte-li zájem o funkční verzi (je nutné v telefonu povolit "instalování z neznámých zdrojů), <a href="https://drive.google.com/file/d/0B13Ph54ckEwzeUhYeDVtMEctUUE/view?usp=sharing">najdete ji tady.</a><br />
<br />
<br />
<br />Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-60833104248805222842017-02-15T19:12:00.003+01:002017-02-15T19:12:35.164+01:00Videokurz: Základy VueJS 2.xDnes byl publikován můj videokurz <a href="https://www.naucmese.cz/kurz/video-zaklady-vuejs-2-x">Základy VueJS</a><br />
<br />
Obsah kurzu<br />
1. Příprava, instalace Google Chrome a NetBeans. (01:17)<br />
<div>
<div>
2. Založení projektu v NetBeans. (02:38)</div>
</div>
<div>
<div>
3. Přidání VueJS do projektu, úvodní nastavení VueJS. (04:48)</div>
</div>
<div>
<div>
4. Provázání mezi HTML a JS, vypsání obsahu proměnné. (04:32)</div>
</div>
<div>
<div>
5. Data a funkce (1), práce s proměnnými a funkcemi. Praktický příklad - jednoduchá kalkulačka. Volání funkce po stisku tlačítka. (10:07)</div>
</div>
<div>
<div>
6. Data a funkce (2), práce s proměnnými a funkcemi. Podmíněný příkaz, podmínka. (05:18)</div>
</div>
<div>
<div>
7. Automatické funkce, automaticky vypočítané proměnné. (07:05)</div>
</div>
<div>
<div>
8. Podmíněné zobrazení části HTML při splnění podmínky. (04:51)</div>
</div>
<div>
<div>
9. Úprava struktury, umístění souborů v projektu. (06:05)</div>
</div>
<div>
<div>
10. Kaskádové styly CSS, vizuální vzhled aplikace. (06:15)</div>
</div>
<div>
<div>
11. Cyklus (1), vypsání více odstavců za sebou. (04:43)</div>
</div>
<div>
<div>
12. Cyklus (2), vypsání dat z JS do HTML pomocí cyklu. (05:03)</div>
</div>
<div>
<div>
13. Cyklus (3), vypsání dat (objektů) z JS do HTML pomocí cyklu, práce s objektem. (09:17)</div>
</div>
<div>
<div>
14. Změna hodnoty atributu v HTML, zakázání tlačítka na základě podmínky, nastavení CSS třídy podle podmínky. (04:54)</div>
</div>
<div>
<div>
15. Seznam osob (zadání projektu). Zadání vlastní samostatné práce - aplikace pro seznam osob. (08:09)</div>
</div>
<div>
<div>
16. Seznam osob (HTML kód) - ukázka řešení HTML kódu. (07:59)</div>
</div>
<div>
<div>
17. Seznam osob (HTML kód) - ukázka řešení VueJS kódu. (08:01)</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Úvodní video</div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/8rFLUeJqDPs/0.jpg" frameborder="0" height="270" src="https://www.youtube.com/embed/8rFLUeJqDPs?feature=player_embedded" width="480"></iframe></div>
<div>
<br />
Online videokurz najdete na <a href="https://www.naucmese.cz/kurz/video-zaklady-vuejs-2-x">naucmese.cz</a></div>
<div>
<br /></div>
<br />Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-81109987059377476332017-02-12T13:10:00.000+01:002017-02-15T19:02:53.620+01:00Připravuji videokurz: Základy VueJS<div style="text-align: justify;">
Pracuji na videokurzu, ve kterém se naučíte základy VueJS. Je to populární JS framework vhodný pro psaní webových a mobilních aplikací. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
VueJS je mnohem jednodušší než AngularJS, přesto je stejně mocný. Náplní kurzu bude praktické zvládnutí VueJS tak, abyste mohli samostatně naprogramovat jednoduchou aplikaci. Důraz je na praktickou část, vše si vysvětlíme a názorně ukážeme.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Je vhodné mít základní znalosti HTML, CSS a JS (není to podmínkou, ale hodí se). Dále potřebujeme vývojové prostředí (např. NetBeans) a prohlížeč Google Chrome.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Znalost základů VueJS otevírá cestu k vlastním webovým a mobilním aplikacím!<br />
<br />
=== Videokurz je již publikován ===<br />
<a href="https://www.naucmese.cz/kurz/video-zaklady-vuejs-2-x">https://www.naucmese.cz/kurz/video-zaklady-vuejs-2-x</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-1266901467507555262017-02-05T11:08:00.000+01:002017-02-05T11:08:04.053+01:00Parsování dat z webu, praktický návod: cena benzínu<h3 style="text-align: justify;">
Parsování dat</h3>
<div style="text-align: justify;">
Parsování dat je <i>(v tomto konkrétním případě)</i> proces získání informací z webové stránky. Získaná data pak můžeme použít např. ve webové nebo mobilní aplikaci, ale i jinak - fantazii se meze nekladou.</div>
<div style="text-align: justify;">
<br /></div>
<h4 style="text-align: justify;">
Google Spreadsheet (Google Sheet, tabulka Google)</h4>
<div style="text-align: justify;">
Co má tabulka Google (obdoba Exelu) společného s parsováním dat z webu? Je to zdarma dostupná možnost; stačí mít účet u společnosti Google (např. email ve tvaru <span style="font-family: Courier New, Courier, monospace;">[jmeno]@gmail.com</span>) a máme automaticky dostupné i online dokumenty. Využijeme šikovnou funkci <span style="font-family: Courier New, Courier, monospace;">ImportHTML</span>.</div>
<div style="text-align: justify;">
<br /></div>
<h4 style="text-align: justify;">
Zdroj dat</h4>
<div style="text-align: justify;">
Nejprve potřebujeme webovou stránku s požadovanými daty. Pro tento příklad jsem zvolil <a href="http://benzin.impuls.cz/">stránku s cenami benzínu a nafty</a>.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Praktická ukázka</h3>
<div style="text-align: justify;">
Nebudu zde popisovat celý postup, lepší bude vidět to celé "naživo". Publikoval jsem <a href="https://www.youtube.com/watch?v=nBaBQDh5SOs">video</a>, které vše krok za krokem vysvětluje.</div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-12296912938755306232017-02-04T13:27:00.000+01:002017-02-04T13:27:32.336+01:00VueJS 2: píšeme komponentu - zobrazení matematického výrazu (Katex/Latex)<div style="text-align: justify;">
Pomocí komponent si můžeme definovat vlastní HTML tagy a použít je na webové stránce. Na tomto blogu již vyšlo: <a href="http://pablo74-cz.blogspot.com/2017/01/vuejs-2-komponenty.html">VueJS 2: komponenty</a>, <a href="http://pablo74-cz.blogspot.com/2017/01/vuejs-2-piseme-komponentu-zobrazeni-veku.html">VueJS 2: píšeme komponentu - zobrazení věku</a>, <a href="http://pablo74-cz.blogspot.com/2017/01/vuejs-2-piseme-komponentu-schematicka.html">VueJS 2: píšeme komponentu - schématická značka (SVG grafika)</a></div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
Katex</h2>
<div style="text-align: justify;">
Pro psaní matematických symbolů, rovnic, ... byl vyvinut nástroj <a href="https://www.latex-project.org/">Latex</a>. Jeho modifikace od Khan Academy je <a href="https://khan.github.io/KaTeX/">Katex</a>.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Zadání</h3>
<div style="text-align: justify;">
Vytvoříme komponentu, která zobrazí matematický výraz (vzorec, rovnici, ...) pomocí nástroje Katex. </div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Řešení</h3>
<div>
<i style="text-align: justify;">Poznámka: jde o ukázku, nebude se provádět kontrola vstupních údajů (hodnoty atributů).</i></div>
<div>
<i style="text-align: justify;"><br /></i></div>
<div>
<span style="text-align: justify;">Komponenta bude mít název <b>katex </b>a bude obsahovat jeden atribut <b>expr </b>(expression). Zobrazí zadaný matematický výraz v konvencích Katexu/Latexu do webové stránky.</span></div>
<div>
<span style="text-align: justify;"><br /></span></div>
<h4>
<span style="text-align: justify;">Deklarace komponenty</span></h4>
<div>
<span style="text-align: justify;"><div>
<span style="font-family: Courier New, Courier, monospace;">Vue.component("katex", {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> replace: true,</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> props: {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> expr: {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> type: String,</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> default: ""</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> data: function(){</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> computed: {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> _expr: function(){</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> try {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> return katex.renderToString(this.expr, {throwOnError: false}); </span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> } catch (err) {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> return "" </span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> template: '<span v-html="_expr"></span>'</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;">});</span></div>
<div>
<br /></div>
<div>
Komponenta obsahuje jednu vlastnost a to <b>expr</b>, do které vložíme požadovaný matematický výraz. V části <b>template</b> se zobrazí obsah jako HTML kód vygenerovaný pomocí <span style="font-family: Courier New, Courier, monospace;">katex.renderToString()</span><span style="font-family: inherit;">, který se generuje v části <b>computed.</b></span></div>
<div>
<br /></div>
<h3>
Použití v HTML</h3>
<div>
Komponentu lze použít např. takhle:</div>
<div>
<div>
<span style="font-family: Courier New, Courier, monospace;"><p></span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> expression directly: <span v-katex="{expr: 'x_{1}=\\frac{1}{2} \\cdot a^2'}"></span></span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"></p></span></div>
</div>
<div>
<br /></div>
<div>
<h3 style="text-align: start;">
Výsledek</h3>
<div style="text-align: start;">
Jak vypadá výsledek se můžete podívat <a href="http://play.ionic.io/app/846e0ad7f79e">tady</a> (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).<br />
<div>
<br /></div>
</div>
<div style="text-align: start;">
</div>
</div>
</span></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-56639129435188314882017-01-21T12:39:00.000+01:002017-01-21T12:39:44.797+01:00VueJS 2: píšeme komponentu - schématická značka (SVG grafika)<div style="text-align: justify;">
O komponentách ve VueJS již na tomto blogu vyšlo: <a href="http://pablo74-cz.blogspot.com/2017/01/vuejs-2-komponenty.html">VueJS 2: komponenty</a> a <a href="http://pablo74-cz.blogspot.com/2017/01/vuejs-2-piseme-komponentu-zobrazeni-veku.html">VueJS 2: píšeme komponentu - zobrazení věku</a></div>
<h2 style="text-align: justify;">
Vlastní komponenta pomocí VueJS</h2>
<h3 style="text-align: justify;">
Zadání</h3>
<div style="text-align: justify;">
Vytvoříme komponentu, která zobrazí schématickou značku rezistoru. Použijeme přitom SVG grafiku.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Řešení</h3>
<div style="text-align: justify;">
<i>Poznámka: jde o ukázku, nebude se provádět kontrola vstupních údajů (hodnoty atributů).</i></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Komponenty se bude jmenovat <b>svg-resistor</b> (anglický název), bude mít atributy: <b>x</b> (x-ová souřadnice), <b>y</b> (y-ová souřadnice), <b>rotate</b> (úhel natočení), <b>color</b> (barva).</div>
<div style="text-align: justify;">
Na webové stránce se použije tímto způsobem (ovšem uvitř elementu <svg>!): </div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"><svg-resistor x="120" y="120" :rotate="-45" ></svg-resistor></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Každý z atributů <b>x, y, rotate, color</b> má svou výchozí hodnotu; nebude-li zadán (jako v tomto případě, kdy chybí color), bude použita výchozí hodnota.</div>
<div style="text-align: justify;">
<br /></div>
<h4 style="text-align: justify;">
Deklarace komponenty</h4>
<div style="text-align: justify;">
Vlastnosti (properties) komponenty jsou v části <b>props,</b> u každé je uveden datový typ a výchozí hodnota.</div>
<div style="text-align: justify;">
V části <b>computed</b> (vypočítané nebo vyhodnocené hodnoty) se skládá textový řetězec, jehož výsledek může vypadat např.: <span style="font-family: Courier New, Courier, monospace;">translate(100, 80), rotate(-90)</span><span style="font-family: inherit;">a slouží k posunu (translate) a otočení (rotate) komponenty při jejím vykreslení uvnitř elementu SVG.</span></div>
<div style="text-align: justify;">
Část <b>template</b> definuje vizuální podobu komponenty, tj. to, co VueJS vloží do webové stránky namísto komponenty <span style="font-family: Courier New, Courier, monospace;"><svg-resistor></svg-resistor></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: "Courier New", Courier, monospace;">Vue.component("svg-resistor", {</span></div>
<div style="text-align: justify;">
<div>
<span style="font-family: Courier New, Courier, monospace;"> props: {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> x: {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> type: Number,</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> default: 0</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> y: {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> type: Number,</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> default: 0</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> rotate: {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> type: Number,</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> default: 0</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> color: {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> type: String,</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> default: "black"</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> computed: {</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> transform: function(){</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> return "translate(" + this.x + ", " + this.y + "), " + "rotate(" + this.rotate + ")";</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> },</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> template: '<path :transform="transform" d="M 0, 0 h 10 v -7.5 h 30 v 15 h -30 v -7.5 M 40, 0 h 10 " :stroke="color" fill="none" />'</span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;">});</span></div>
<div>
<br /></div>
</div>
<h3 style="text-align: justify;">
Použití v HTML</h3>
<div>
<div>
<span style="font-family: Courier New, Courier, monospace;"><svg width="302" height="302"></span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> <svg-resistor x="120" y="120" :rotate="-45" ></svg-resistor></span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"> <svg-resistor x="30" y="80" :rotate="0" ></svg-resistor></span></div>
<div>
<span style="font-family: Courier New, Courier, monospace;"></svg></span></div>
</div>
<div>
<br /></div>
<h3>
Výsledek</h3>
<div>
<div>
Jak vypadá výsledek se můžete podívat <a href="http://play.ionic.io/app/5cd10f6398c0">tady</a> (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-57115599878390436992017-01-02T18:24:00.000+01:002017-01-02T18:24:12.563+01:00VueJS 2: píšeme komponentu - zobrazení věku<h2 style="text-align: justify;">
Vlastní komponenta pomocí VueJS</h2>
<h3 style="text-align: justify;">
Zadání</h3>
<div style="text-align: justify;">
Vytvoříme komponentu, která ze zadaného roku narození vypočítá a zobrazí věk.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Řešení</h3>
<div style="text-align: justify;">
<i>Poznámka: komponenta bude velmi jednoduchá, jde jen o ukázku; nebudou se kontrolovat vstupní data.</i></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Komponenta se bude jmenovat <b>age</b>, s jedním atributem <b>born</b> (rok narození). Použije se na webové stránce tímto způsobem: <span style="font-family: Courier New, Courier, monospace;"><age born="2000"></age></span></div>
<div style="text-align: justify;">
Výsledkem bude zobrazený věk.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
1. krok</div>
<div style="text-align: justify;">
<br /></div>
<div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;">Vue.component("age", {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> template: "<span>{{age}}</span>",</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;">});</span></div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Do HTML stránky se vykreslí obsah <b>template,</b> tj. <span style="font-family: "Courier New", Courier, monospace;"><span>{{age}}</span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Uvnitř spanu je ve dvojitých složených závorkách proměnná <b>age</b> <i>(nemá nic společného s názvem komponenty!). </i>Místo ní se vloží její hodnota, tj. vypočítaný věk.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">2. krok, přidání atributu born</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;">Vue.component("age", {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> template: "<span>{{age}}</span>",</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> props: ["born"],</span></div>
<div style="text-align: justify;">
<div style="display: inline !important;">
<span style="font-family: Courier New, Courier, monospace;">});</span></div>
</div>
<div style="font-family: inherit; text-align: justify;">
<br /></div>
</div>
<div style="font-family: inherit; text-align: justify;">
Přidali jsme do <b>props</b> atribut <b>born,</b> který použije naše komponenta. Tento atribut se chová jako proměnná, jejíž hodnotu zadáme. <span style="font-family: inherit;">To nám umožní ji použít stylem </span><span style="font-family: "Courier New", Courier, monospace;"><age born="2000"></age></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">3. krok, výpočet věku</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;">Vue.component("age", {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> template: "<span>{{age}}</span>",</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> props: ["born"],</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> computed: {</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> age: function(){</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> var actYear = new Date().getFullYear();</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> return actYear - this.born;</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"> }</span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;">});</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Přidali jsme do <b>computed</b> výpočet <b>age</b>; ve funkci se do lokální proměnné <b>actYear</b> uloží aktuální rok, funkce vrací návratovou hodnotu příkazem <b>return</b> (jako rozdíl mezi aktuálním rokem a rokem narození), která se vloží do proměnné <b>age.</b> Její hodnota (tj. vypočítaná hodnota) se zobrazí mezi dvěma spany. Pozor, atribut <b>born</b> musíme uvnitř funkce zapsat jako <b>this.born</b></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">4. použití v HTML</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Courier New, Courier, monospace;"><age born="1974"></age> <age born="2000"></age> <age born="2007"></age></span></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Výsledek</h3>
<div style="text-align: justify;">
Jak vypadá výsledek se můžete <a href="http://play.ionic.io/app/d2bb3175cc6f">podívat tady</a> (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-40399955647026161302017-01-01T20:02:00.000+01:002017-01-01T20:02:40.150+01:00VueJS 2: komponenty<div style="text-align: justify;">
Poslední dobou se prosazují webové komponenty (vysvětleno např. <a href="http://jiri.hybek.cz/Webove-komponenty-budoucnost-webu/">zde</a>). Krátce řečeno, jsou to uživatelsky definované tagy pro HTML. Buď jen zobrazí určitý obsah nebo umí i reagovat na hodnoty atributů a/nebo na události.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Webové komponenty se dají skvěle psát i pomocí frameworku <a href="https://vuejs.org/">VueJS</a>. Je k nim výborná, podrobná a srozumitelná <a href="https://vuejs.org/v2/guide/components.html">dokumentace</a>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vypůjčím si hotový příklad z dokumentace.</div>
<div style="text-align: justify;">
1. Registrace komponenty (definice)</div>
<pre style="-webkit-font-smoothing: initial; background-color: #f8f8f8; color: #525252; font-family: "Roboto Mono", Monaco, courier, monospace; font-size: 0.8em; line-height: 1.5em; padding: 1.2em 1.4em;"><div class="line" style="min-height: 1.5em;">
Vue.component(<span class="string" style="color: #42b983;">'my-component'</span>, {</div>
<div class="line" style="min-height: 1.5em;">
<span class="attr">template</span>: <span class="string" style="color: #42b983;">'<div>A custom component!</div>'</span></div>
<div class="line" style="min-height: 1.5em;">
})</div>
</pre>
<div style="text-align: justify;">
Název nové komponenty (HTML tagu) je <b>my-component,</b> tag se tedy zapíše <span style="font-family: Courier New, Courier, monospace;"><my-component> </span><span style="font-family: inherit;">(samozřejmě je to párový tag).</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><b>Template</b> je HTML šablona, neboli to, co se zobrazí v prohlížeči v místě, kde se použije komponenta.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">2. Vytvoření instance VueJS</span></div>
<pre style="-webkit-font-smoothing: initial; background-color: #f8f8f8; color: #525252; font-family: "Roboto Mono", Monaco, courier, monospace; font-size: 0.8em; line-height: 1.5em; padding: 1.2em 1.4em;"><div class="line" style="min-height: 1.5em;">
<span class="comment" style="color: #b3b3b3;">// create a root instance</span></div>
<div class="line" style="min-height: 1.5em;">
<span class="keyword" style="color: #e96900;">new</span> Vue({</div>
<div class="line" style="min-height: 1.5em;">
<span class="attr">el</span>: <span class="string" style="color: #42b983;">'#example'</span></div>
<div class="line" style="min-height: 1.5em;">
})</div>
</pre>
<div style="text-align: justify;">
3. Použití komponenty v HTML stránce</div>
<pre style="-webkit-font-smoothing: initial; background-color: #f8f8f8; color: #525252; font-family: "Roboto Mono", Monaco, courier, monospace; font-size: 0.8em; line-height: 1.5em; padding: 1.2em 1.4em;"><div class="line" style="min-height: 1.5em;">
<span class="tag" style="color: #2973b7;"><<span class="name">div</span> <span class="attr">id</span>=<span class="string" style="color: #42b983;">"example"</span>></span></div>
<div class="line" style="min-height: 1.5em;">
<span class="tag" style="color: #2973b7;"><<span class="name">my-component</span>></span><span class="tag" style="color: #2973b7;"></<span class="name">my-component</span>></span></div>
<div class="line" style="min-height: 1.5em;">
<span class="tag" style="color: #2973b7;"></<span class="name">div</span>></span></div>
</pre>
<div style="text-align: justify;">
4. Výsledný kód v prohlížeči (zobrazená HTML stránka)</div>
<pre style="-webkit-font-smoothing: initial; background-color: #f8f8f8; color: #525252; font-family: "Roboto Mono", Monaco, courier, monospace; font-size: 0.8em; line-height: 1.5em; padding: 1.2em 1.4em;"><div class="line" style="min-height: 1.5em;">
<span class="tag" style="color: #2973b7;"><<span class="name">div</span> <span class="attr">id</span>=<span class="string" style="color: #42b983;">"example"</span>></span></div>
<div class="line" style="min-height: 1.5em;">
<span class="tag" style="color: #2973b7;"><<span class="name">div</span>></span>A custom component!<span class="tag" style="color: #2973b7;"></<span class="name">div</span>></span></div>
<div class="line" style="min-height: 1.5em;">
<span class="tag" style="color: #2973b7;"></<span class="name">div</span>></span></div>
</pre>
<div style="text-align: justify;">
Na místě, kde je ve zdrojovém kódu zapsána komponenta <span class="tag" style="background-color: #f8f8f8; color: #2973b7; font-family: "Roboto Mono", Monaco, courier, monospace; font-size: 12.8px; white-space: pre;"><<span class="name">my-component</span>></span><span class="tag" style="background-color: #f8f8f8; color: #2973b7; font-family: "Roboto Mono", Monaco, courier, monospace; font-size: 12.8px; white-space: pre;"></<span class="name">my-component</span>></span> se zobrazí obsah šablony (to, co je definováno jako <b>template</b>).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Komponenty mohou mít i atributy, které mohou (nemusí) mít hodnoty. Také mohou reagovat na události.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Při psaní webových stránek a programování webových a hybridních mobilních aplikací se webové komponenty silně prosazují. Zpřehledňují kód a umožňují jednoduchým způsobem opakovaně použít již definovaný obsah a/nebo chování.</div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-90333138822623574302016-12-31T12:06:00.001+01:002016-12-31T12:06:35.582+01:00Framework7 + VueJS 2, oficiální podpora<div style="text-align: justify;">
V oficiální dokumentaci k frameworku pro vývoj hybridních mobilních aplikací - Framework7 - se objevila informace o provázání mezi Fr7 a VueJS, konkrétně <a href="http://framework7.io/vue/">na této stránce</a>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pro usnadnění práce vývojářům také zveřejnili tři výchozí šablony (viz odkazy dole na zmíněné stránce pod obrázkem).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nyní je tedy možné používat Fr7 v HTML pomocí (nových) tagů, např. <span style="font-family: Courier New, Courier, monospace;"><f7-view></span>, <span style="font-family: Courier New, Courier, monospace;"><f7-page></span>, ... podobně jako v Ionicu, ale s tím rozdílem, že Fr7 používá VueJS 2.x.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-42030004862491605062016-12-30T22:23:00.005+01:002016-12-30T22:23:50.837+01:00Framework7 playground<div style="text-align: justify;">
Při práci s Ionicem jsem si zvykl na jeho výbornou službu <a href="http://play.ionic.io/">playground</a>, ve které si můžu rychle ověřit nápad.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Poslední dobou se věnuji jinému frameworku - Framework7. Hledal jsem pro něj podobnou službu, jako je výše zmíněné hřiště Ionicu, ale nic jsem nenašel. Napadlo mě, zda by tedy nešlo hřiště Ionicu ohnout, aby se dalo použít s Framework7. Dalo :-)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="http://play.ionic.io/app/4262ba2dbce0">Framework7 playground</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-67468416848730302442016-12-25T17:35:00.000+01:002016-12-25T17:35:34.311+01:00Framework7 + VueJS 2<h2 style="text-align: justify;">
Hybridní aplikace</h2>
<div style="text-align: justify;">
Ve volném čase se zabývám vývojem mobilních aplikací pro Android, některé z nich jsem zveřejnil na <a href="https://play.google.com/store/apps/developer?id=Pavel+K%C5%99%C3%AD%C5%BE&hl=cs">Google Play</a>. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Všechny dosud publikované mobilní aplikace jsem programoval v <a href="http://ionicframework.com/docs/v1/">Ionicu</a> (verze 1.x). Během té doby jsem ze zájmu sledoval i další frameworky vhodné pro vývoj hybridních mobilních aplikací.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Framework7</h3>
<div style="text-align: justify;">
Jedním z přímých konkurentů Ionicu je (dle mého mínění) <a href="http://framework7.io/">Framework7</a>, o kterém jsem se tu <a href="https://pablo74-cz.blogspot.cz/2016/11/framework7-framework-pro-mobilni.html">krátce zmínil</a>. Na rozdíl od Ionicu je to (téměř jen) UI framework, tedy vhodný k použití pro vizuální část aplikace (HTML + CSS), i když s ním jde zařídit i routování <i>(zjednodušeně: přechody mezi stránkami).</i></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Zdánlivou nevýhodou může být fakt, že Framework7 nepoužívá žádný JS framework typu <a href="https://cs.wikipedia.org/wiki/Model-view-controller">MVC</a>, MVVM (jak je tomu u zmíněného Ionicu: ten používá AngularJS). </div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
VueJS 2.x</h3>
<div style="text-align: justify;">
Javascriptový framework VueJS (2.x) je mnohými považován za jednodušší a elegantnější než AngularJS. Také o něm jsem se tu před nějakou dobou <a href="https://pablo74-cz.blogspot.cz/2016/10/vuejs-verze-20.html">letmo zmínil</a>. </div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Framework7 + VueJS 2.x</h3>
<div style="text-align: justify;">
Podíval jsem se na to, zda by šlo používat oba frameworky společně a naprogramovat hybridní aplikaci. Šlo :-)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mám takové tušení, že tuto kombinaci možná používám odlišným způsobem než někteří další vývojáři, nicméně i můj lehce naivní způsob je funkční.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Oba frameworky mají dobře řešenou dokumentaci a pokud vím co hledám, naleznu a většinou i pochopím. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Zrovna pracuji na aplikaci s názvem Kuřim Info, která bude zdrojem některých informací pro občany města (otevírací doba institucí a obchodů, autobusové a vlakové spoje, aktuální počasí a další). Zatím je to ve fázi vývoje, nicméně tady je pár náhledů...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVbz_p9hkxw71ShRlrw_Z9Pq_LEsp1mQ25q0IujYo0lYHOoeCQMtQaVPIM0Tb9fRSOH66XVMfMf7DAjqozGdfPtRb0URyQBFUTGc-v3iDAet08KVN0EDJAryZalm4Xbb3ljQmQvmR1etE/s1600/KI_000.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVbz_p9hkxw71ShRlrw_Z9Pq_LEsp1mQ25q0IujYo0lYHOoeCQMtQaVPIM0Tb9fRSOH66XVMfMf7DAjqozGdfPtRb0URyQBFUTGc-v3iDAet08KVN0EDJAryZalm4Xbb3ljQmQvmR1etE/s1600/KI_000.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wGl9OBJNL8exoZLGAJj98EJPBoOmNRu12__DZ-BARt9XCRDhdkVnHo3snPkJiBbAz09M7yLzg7s7Yt5Nu-ZEMpl6dogYztBkGoMtIzWzoTau1PnLakzyI8z3c33aga0hodudK-hfEndn/s1600/KI_001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wGl9OBJNL8exoZLGAJj98EJPBoOmNRu12__DZ-BARt9XCRDhdkVnHo3snPkJiBbAz09M7yLzg7s7Yt5Nu-ZEMpl6dogYztBkGoMtIzWzoTau1PnLakzyI8z3c33aga0hodudK-hfEndn/s1600/KI_001.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj_4eIRIBdYaQMXIMne8MhHOL7RrPnymhoc_IYJS2zOx2kN2HT8DtUzVmoPl0v0mbIr_7E80jHHF0KhSvB2w15y0Xcee6M9XfUo2Tlo41jyGR1CXj9d_w9_TIAFezlwh9EV-g4beUZ3Yyb/s1600/KI_002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj_4eIRIBdYaQMXIMne8MhHOL7RrPnymhoc_IYJS2zOx2kN2HT8DtUzVmoPl0v0mbIr_7E80jHHF0KhSvB2w15y0Xcee6M9XfUo2Tlo41jyGR1CXj9d_w9_TIAFezlwh9EV-g4beUZ3Yyb/s1600/KI_002.png" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidIOY4D_zBi_tU6aJZd0PnV5-4c34NGjRhsCEeI28FkIAfxkW7s7nxzFtPbzZ0CR4IXmrBNzwC9ZdVG8OU_xVx0O29rIsWiXYtA2Jm-U4mEOBl1JdHx5UVFmHbFrIaBSg7hikZNFfOZq8H/s1600/KI_003.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidIOY4D_zBi_tU6aJZd0PnV5-4c34NGjRhsCEeI28FkIAfxkW7s7nxzFtPbzZ0CR4IXmrBNzwC9ZdVG8OU_xVx0O29rIsWiXYtA2Jm-U4mEOBl1JdHx5UVFmHbFrIaBSg7hikZNFfOZq8H/s1600/KI_003.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiChXtxlHz439Rm5vutLCAfpxVzCtl1Ih0jJiUiKYA2Jqcyh2m6Yk5jN-7Z6hUi1LVJdJTdcmVTxjeFGpeuemEIfQafXWnWRw6fg4DdMMlgXlfUgljXdMwfaiFDzZgMdxo-5fZjDMmGAvZy/s1600/KI_004.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiChXtxlHz439Rm5vutLCAfpxVzCtl1Ih0jJiUiKYA2Jqcyh2m6Yk5jN-7Z6hUi1LVJdJTdcmVTxjeFGpeuemEIfQafXWnWRw6fg4DdMMlgXlfUgljXdMwfaiFDzZgMdxo-5fZjDMmGAvZy/s1600/KI_004.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELW9qlvPJezgbISNqDqsiXyZK1hCgdDSq61hwqIfYEsiWVinzjEVmZ8UNqk2Hj5xVmZgJBGYoVQlTh4yGhO0sVw7mOH2LxsZZTTfOFIQ3UZH4dGofYq-S722IdGLxhCzLopJTtiBSySOv/s1600/KI_005.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELW9qlvPJezgbISNqDqsiXyZK1hCgdDSq61hwqIfYEsiWVinzjEVmZ8UNqk2Hj5xVmZgJBGYoVQlTh4yGhO0sVw7mOH2LxsZZTTfOFIQ3UZH4dGofYq-S722IdGLxhCzLopJTtiBSySOv/s1600/KI_005.png" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-92118241796704283642016-11-20T13:40:00.000+01:002016-11-20T13:40:46.450+01:00Framework7 - framework pro mobilní aplikace<div style="text-align: justify;">
<a href="https://play.google.com/store/apps/developer?id=Pavel+K%C5%99%C3%AD%C5%BE&hl=cs">Svoje aplikace</a> vyvíjím v <a href="http://ionicframework.com/">Ionicu</a>, jsem s ním spokojen. Používám jedničkovou verzi (v současnosti Ionic 1.3.2). Moje aplikace se ale spouští s prodlením a také zobrazení obsahu a přechod mezi stránkami se mi zdá pomalejší.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sleduji dění na vývojářské scéně a kromě Ionicu občas nakouknu jinam. Jedním z frameworků o kterých si držím přehled je Framework7.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Před pár dny vyšel <a href="http://framework7.io/">Framework7</a> verze 1.5.0. Zatím jsem si v něm zkusil jen jednoduchoučkou aplikaci, jen tak na zkoušku (tři stránky, dva grafy v SVG, jen pro ověření funkčnosti). Co se mi na něm líbí je rychlost spuštění aplikace a také rychlost přechodu mezi stránkami aplikace.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Zatím se rozkoukávám a snažím se pochopit způsob jak ve Frameworku7 vyvíjet (z Ionic jsem zvyklý na úplně jiné pojetí; zejména co se týká routování - zobrazení stránek). Pokud jde o logiku aplikace, začlenil jsem do ní <a href="https://vuejs.org/">Vue.js</a>. Zatím je to jen jednoduchý způsob, prosté vložení Vue.js skriptu do stránky, ale funguje mi to.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
A hlavně, spojením Frameworku 7 a Vue.js jsem dosáhl oproti Ionicu (stále mluvím o jedničkové verzi 1.x) zrychlení spouštění a odezvy aplikace. </div>
<div style="text-align: justify;">
<hr />
</div>
<div style="text-align: justify;">
<br />
<a href="https://www.youtube.com/channel/UCIG95yOKfZSaghux9ruHRNg">Youtube kanál</a><br />
<a href="https://play.google.com/store/search?q=Pavel+K%C5%99%C3%AD%C5%BE">Mobilní aplikace</a><br />
<br />
Moje online videokurzy (některé se slevou!):<br />
<a href="http://www.vaseakademie.cz/kurz/kurzid:187/angularjs-1-x-pro-zacatecniky/kampan:3R5djpuwMrroLGBsuZ3uyNCmAEqDKx">AngularJS 1.x pro začátečníky</a><br />
<a href="http://www.vaseakademie.cz/kurz/kurzid:206/jazyk-c-pro-zacatecniky/kampan:XCwQNOsWlsEv5c06j0C3EOmo4qKEvj">Jazyk C pro začátečníky</a><br />
<a href="http://www.vaseakademie.cz/kurz/kurzid:200/elektronika-srozumitelne/kampan:wSed1naZvZB1MI1npOiu069n936ahb">Elektronika srozumitelně</a><br />
<a href="http://www.vaseakademie.cz/kurz/kurzid:201/mobilni-aplikace-intel-xdk-ionic-technicky-uvod">Mobilní aplikace: Intel XDK + Ionic, technický úvod</a> (zdarma)<br />
<a href="http://www.vaseakademie.cz/kurz/kurzid:202/mobilni-aplikace-intel-xdk-ionic-rozvrh-hodin/kampan:rIbBn2hqf4iZK30IAuOg0cOoAQGI5s">Mobilní aplikace: Intel XDK + Ionic, rozvrh hodin</a><br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-91122695468243391932016-10-01T13:54:00.001+02:002016-10-01T13:54:51.341+02:00Vue.js, verze 2.0<div style="text-align: justify;">
Vyšla verze 2.0 javascriptového frameworku <a href="https://vuejs.org/">Vue.js.</a> </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vue.js se dá přirovnat k Angularu; obvykle se dodává, že Vue.js je jednodušší k naučení. Z <a href="https://vuejs.org/guide/#Getting-Started">dokumentace</a> je ta podobnost vidět. Ne vše ale řeší Vue.js stejně/podobně jako Angular.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Usilovně se pracuje i na frameworku pro mobilní aplikace, tj. kromě jiného s užitečným UI, prozatím to vypadá na <a href="http://alibaba.github.io/weex/">Weex.</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
K dispozici je i <a href="http://forum.vuejs.org/">fórum</a> pro novou verzi 2.0.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0tag:blogger.com,1999:blog-5095125930134504209.post-30076667731580873672016-09-02T15:16:00.002+02:002016-09-02T15:16:47.536+02:00Vytvořím rozvrh hodin jako mobilní aplikaci pro Android 4.1+<div style="text-align: justify;">
Nabízím vytvoření rozvrhu formou mobilní aplikace pro Android verze 4.1 a novější. Potřebuji přesné podklady k rozvrhu. Pokud je nějaká hodina dělená, v rozvrhu se zobrazí jen jedna z těchto hodin, proto budu potřebovat přesné instrukce.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
V aplikaci bude zobrazen už hotový rozvrh. Může vypadat nějak takhle:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAn3NSPnUtGpEf_wY6DqJUkZ34qPFPYBwefzZ0mY6XUzJZT8yEJcYg-vtounWNJ1lkvY0I8rpUm1A6blux1ZDcKVnijdvGk2J7fe_MjopQ-GbHpadXSK3D8T7-coftLygC44KMsGp57pu-/s1600/rozvrh.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAn3NSPnUtGpEf_wY6DqJUkZ34qPFPYBwefzZ0mY6XUzJZT8yEJcYg-vtounWNJ1lkvY0I8rpUm1A6blux1ZDcKVnijdvGk2J7fe_MjopQ-GbHpadXSK3D8T7-coftLygC44KMsGp57pu-/s320/rozvrh.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
V případě zájmu mne kontaktujte: ing.pavel.kriz[zavinac]gmail.com</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Dále nabízím vytvoření mobilní aplikace z vašeho obsahu (důležitého dokumentu), viz následující video:</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /><iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/__jKfVIbpHU/0.jpg" src="https://www.youtube.com/embed/__jKfVIbpHU?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Pablohttp://www.blogger.com/profile/03113638113597967136noreply@blogger.com0