Mala kniha programovania Autor Vydavatel Licencia Vydanie Autor obalky Stanislav Hoferek Greenie kniznica CC-BY-NC-ND Prve (2021) Stanislav Hoferek O knihe Podme varit spagety. Ano, nie je to typicka veta, ktoru by ste ocakavali pri knihe o programovani. Tato kratka kniha za vas nic nenaprogramuje a nevyriesi vsetky problemy sveta. Dokonca to nie je ani kucharka. Nauci vas vsak mysliet ako programator ci ako niekto, kto pracuje s akymkolvek kodom. Bez ohladu na mnozstvo zatvoriek a uvodzoviek. Poslanie je tak mimoriadne jednoduche – vysvetlit zaklad, informovat o tom, ako sa da narabat s informaciami a pritom pouzit vela prirovnani. Varovanie: Ak neviete urobit spagety, toto nie je kniha pre vas! Na co je dobre mat myslenie ako programator? Na vela veci. Okrem ineho na to, aby ste mali lepsi plat, aby ste sa menej narobili a aby ste mohli zarabat aj vtedy, ked oddychujete. Tato kniha hovori o zakladoch myslenia a je na kazdom, kolko z toho si zoberiete. Styl pisania knihy je viac vesely, ako vazny. Mala kniha programovania je tiez vhodna prirucka pre skoly a vsetkych samoukov, ktori uvitaju takuto pomocku v slovencine. Obsah Mala kniha programovania 1 O knihe 2 Obsah 3 Kapitola I: Spagety. Co su to spagety? 4 Kapitola II: Vodu mame? A sol? 5 Kapitola III: Priblizenie 6 Kapitola IV: Nevedeli sme, ako chuti prst na nohe 7 Kapitola V: Kde sa to mam vsetko naucit? 8 Kapitola VI: Potrebujem odbornika? 9 Kapitola VII: Idem na to. Co potrebujem? 10 Kapitola VIII: Kde som to mal zabocit? 11 Kapitola IX: Mam dvoch drakov a ziadnu princeznu 12 Kapitola X: Kostra v skrini 13 Ukazka kostry webovej stranky 14 Ukazka HTML 15 Ukazka CSS 16 Ukazka JavaScript 17 Ukazka PHP 18 Ukazka Python 19 Uzitocne odkazy 20 Kapitola I: Spagety. Co su to spagety? Televizna sutaz milionar. Posledna otazka. Ide sa domov s naozaj velkym balikom, alebo sa spadne na garantovanu hranicu a moze sa prerobit kupelna? Kazdy povie, ze vie, co su to spagety. Ale schvalne, kto z vas niekedy niekomu vysvetloval, co su to spagety? Mate niekedy diskusiu o spagetach? A kto moze vediet o spagetach viac, ako vy? Nasleduje logicka otazka – preco prave spagety? Preco nie nieco ine? V ktorom programovacom jazyku sa spominaju spagety? A preco prave toto jedlo v oblasti, ktora s jedlom velmi nesuvisi? Stary vtip hovori o tom, ze programator je stroj, ktory premiena pizzu na strojovy kod. Vie to pobavit, no hlavne je to velmi presne. Niekto, kto dokaze vyrabat kod, vyraba kod. Je to podobne, ako ked niekto, kto vie ucit nemcinu, uci nemcinu. Jasne, ze je to pre mozog narocne a treba si doplnat energiu. Vysledkom je vsak praca, ktora ma zmysel vtedy, ked sa robi dobre. V spominanom Milionarovi by mohli byt rozne odpovede na otazku, co su to spagety. Klasicke ABCD. Ktore bude spravne? Podla pravidiel sutaze moze byt spravna len jedna odpoved, zatial co v realnom zivote to tak nemusi byt. A inak popise spagety niekto z talianskeho mesta Bologna, nez niekto z Londyna, Bratislavy ci z Wellingtonu na Novom Zelande. Aj preto, ze klasicke spagety mozu vsade vyzerat inak. Tak, ako moze inak vyzerat pivo, palacinka ci napriklad bezny pracovny den. Ked poviem priatelke, ze chcem spagety, tak viem, ze mi ich zariadi. Svojou zenskou logikou by prisla k zaveru, ze chcem varene jedlo s omackou a so syrom. Ja, ako muz, by som mohol pochopit, ze chce, aby som v obchode okrem inych veci zobral aj dve alebo tri balenia spagiet. Len tak, do zasoby. A ked sa ma spyta, preco som doniesol tri balenia, tak automaticky a bez premyslania poviem, ze sa to nepokazi. Programovanie a myslenie programatora je ako spagety. Moze byt rozne, moze sa odlisovat. Zaklad vsak byva rovnaky a ciel tiez. Urobit nieco, co ma zmysel. A ak sa vsetko podari, tak bude dobre. Programator, podobne ako skuseny kuchar, chce dobry kod alebo recept. To dolezite, v dobrom poradi a bez zbytocneho balastu. Kapitola II: Vodu mame? A sol? Ludia, ktori nikdy nestavali dom, casto povedia, ze dom sa stavia od zakladov. Je to pravda, je to jednoduche… a keby niekto zacal realne stavat od strechy, bola by to automaticky katastrofa. Alebo nie? Janka pri vareni spagiet najskor otvori flasu s omackou a vyleje tuto zmes na panvicu. Az potom da hriat vodu, do ktorej v spravnom okamihu vlozi oblubenu podlhovastu cestovinu. Robi to tak ona, jej mama, babka, teta Zuzka, ten fuzaty pan z Hurbanova, fararova vnucka a aj ten podivin, co vie vymenovat vsetkych apostolov v desiatich jazykoch. Len Lukas, ktory dostal stvorku zo slovenskeho jazyka a zhodou okolnosti bol najlepsi na Slovensku v matematickej sutazi, da najskor hriat vodu. Je to rebel! A zaroven niekto, kto vie, ze na pripravu vody a uvarenie cestovin potrebuje viac casu, nez na pripravu omacky. Nema tuto mudrost od rodicov, ale prisiel na to sam, jednoduchym pozorovanim. Mozno vie, ze voda ma vysoku tepelnu kapacitu, alebo si na svojom telefone zapol stopky… alebo nieco celkom ine – ale vie to. A cuduje sa, ze to tak nerobia ostatni. Programovanie, stavba domu, varenie spagiet – na vsetko je nejaky postup. Niekedy sa to da skratit, inokedy nie. A je na nas, ci sa chceme zaujimat o to, ako to niekto robi lepsie. My, na Slovensku, ratame s tym, ze Taliani vedia urobit lepsie spagety, Nemci vedia po nemecky lepsie ako my a tiez to, ze priemerny Brazilcan vie lepsie tancovat a hrat futbal ako priemerny Slovak. Je to vzdy pravda? Nemusi byt. Ale logicky by to tak malo byt. Podobne, ako by malo byt logicke, ze dom sa stavia od zakladov. Potom pride John z Ameriky a ukaze, ze ak sa da vyrobit zaroven kazda stena, vsetky potrebne diely na strechu a par dalsich zlepsovakov, tak moze byt jednoduchy dom postaveny za par hodin. Toto sem, toto tam a hotovo. Mozno to nebude mat taku trvacnost ako stredoveky hrad, ale pokojne mohol byt prvy hotovy diel strecha. Zdvihne sa, polozi sa kde sa ma a pevne sa to spoji. Alebo sa rovno donesie hotovy dom na obrovskom aute aj s klucom a jedine, co je treba urobit, je pripojit na vodu a dalsie inzinierske siete. Programovanie je ako recept na spagety. Ak niekto chce urobit napriklad velmi pekny eshop, tak vie, ze potrebuje pripravit grafiku, texty, musi to doladit na rozne zariadenia, vychytat bugy a musi tomu dat jasnu strukturu. Tak, ako dobry kuchar potrebuje na naozaj dobre spagety vodu, sol, spominanu cestovinu, syr… a nejaku velmi dobru omacku, kde pojde to, co tam ma ist. Tak budu vsetci spokojni. A ak chce niekto viac syra, alebo napriklad inak urobene menu v eshope, tak sa to spravi. Vsak preco nie? Kapitola III: Priblizenie Mama uci svoju dceru, ako spravne urobit spagety. Varuje ju, co sa moze stat, ked sa budu varit prilis dlho alebo prilis kratko. Hovori o omacke, o syre… a dcera sa tvari, ze pocuva. Ovela radsej by isla von. Vsetky jej kamosky isli na ten super film, len ona musi ostat doma a ucit sa robit hlupe spagety. Stale spagety. Nema ich rada a po tom, co sa stalo, ich ma este menej rada. Na dalsi den ide s otcom na miestny hrad, kde su ukazky ludovych remesiel a rozne zaujimavosti zo zivota v stredoveku. Jej otec sermuje s velkym, obojrucnym mecom a nuti svoju dcerku, aby to skusala aj ona. Co ma robit? Skusi to, nech ma otec radost, ale ovela radsej by hladkala toho krasneho konika, ktoreho hladkaju ostatne deti. Prva vec, ktora je dolezita, je priblizenie. Je o tom vlastne aj tato kniha. Kto chce ist do kina na ten uzasny novy film, tak asi nechce tlacit do hlavy recept na spagety. Koho zaujme nieco, k comu sa nemoze dostat, ten sa nebude sustredit na nieco ine. Clovek, ktory sa chce naucit napriklad programovat, potrebuje spojit ucenie s niecim, co je mu blizke, co ho bavi. Dvaja chalani, jeden sachista a jeden futbalista, sa maju moznost naucit nieco o programovani. Zhodou okolnosti ich otec ma dokoncit dva eshopy. S kym bude pracovat na eshope s futbalovymi dresmi a loptami a s kym na obchode, kde su sachovnice a knihy o sachovych velmajstroch? Pri troche snahy sa da vsetko so vsetkym spojit. Urobit dobru webovu stranku moze byt ako uvarenie dobrych spagiet, alebo ako vitazstvo nad silnejsim superom v akomkolvek sporte. Treba na to pripravu, zaistit vsetko potrebne a hlavne odhodlanie a trpezlivost. Kapitola IV: Nevedeli sme, ako chuti prst na nohe Ked sa narodil Herkules, tak bol okamzite silnejsi ako dospely muz. Tato a mnohe dalsie legendy je spojena s niekym naozaj vynimocnym. Realita je vsak taka, ze legendy ostavaju legendami a na zaciatku nasho zivota nevieme nic. Nevieme, kolko je 1+1. Nevieme, ze existuje nejaky den a nejaka noc. Nevieme poslednu cislicu cisla pi, ale to je normalne – lebo nevieme, co je to cislica co je to matematika. Na zaklade pozorovania a od inych ludi sa dozvedame, ze niekedy prsi, inokedy snezi a ze v telke je neskutocne vela reklamy. Nevieme, ako chuti prst na nasej nohe a tak to musime preskumat. Instruktor lyzovania kedysi vobec nevedel lyzovat. Majster sveta v hode kladivom niekedy nevedel zdvihnut lyzicu. Clovek, ktory kracal po Mesiaci, niekedy nevedel kracat po vlastnych tu na Zemi. Ale… zvladli sme to. Postupne. Nie vsetko naraz. Od zakladov. Od jednoduchych veci, kde sa neda velmi co pokazit, po nieco, co je narocne, citlive na najroznejsie omyly a niekedy aj nebezpecne, ale vysledok stoji za to. Ked sa niekto uci programovat, velmi casto zacina s Hello World. Jednoduchym kodom, ktory ukaze, ci dana technologia funguje spravne. Ako tvrdi expert na rozne programovacie jazyky a zaroven jablka, svet nezaujima, ze ho zdravis. Zaklad je vsak dobry. Mnohe programovacie jazyky a vlastne cokolvek, co ma svoju postupnost, sa ucia od toho najjednoduchsieho. Pamatate si, ked ste prvykrat otvorili Word alebo nieco na pisanie a dali ste do toho prve pismena? Pravdepodobne nie. Videli ste papier, hore ikonky a na ten papier sa dalo pisat klavesnicou. Ulozi sa, vytlaci sa, posle sa mailom a hotovo. Netreba na to ziadne skolenie. Ak by ste ale chceli, aby napriklad v Exceli kazda bunka svietila na zeleno, zlto ci cerveno podla toho, ake tam je cislo, tak by ste sa to museli naucit. A mozno by ste to pouzivali casto, pretoze je to tak jednoduche a hlavne prehladne. V tomto pripade ide napriklad o podmienene formatovanie, ktore sa da vyborne pouzit. Programovanie je zaujimave uz v tom, ze jednoduche veci mozu mat ohromny zmysel. Dobrym prikladom su chyby. Staci si zobrat napriklad recept. Pise sa v nom, ze do cesta treba 2 vajicka, ale kazdy sa uz naucil, ze na tento recept je ovela lepsie dat 4 vajicka. Nebude potrebny clovek, ktory by tomu dalsiemu hovoril, ze okrem vsetkych instrukcii treba este zmenit pocet vajec. Jednoducho sa pri prepisovani receptu z papiera do elektronickej podoby nenapise 2 vajicka, ale 4 vajicka. Jednoduche, rychle, prehladne. A bez hlupych vynimiek. Ked som zacal pracovat na urade, stretol som sa s tym, ze kazdy clovek dostal 3 papiere, ktore boli zosivackou spojene. Papiere boli asi 100x okopirovane a uz bolo len tazke vidiet vsetky ciary a pismena. Kto nieco potreboval, musel vypisat cast papieru 1, vacsinu papieru 2 a zase cast papieru 3. Nasledne sa podpisat tam, kde nebolo miesto na podpis. Takto to fungovalo a nebolo to potrebne menit, vsak by to fungovalo este roky. Alebo je zmena dobry napad? Zmenil som text tak, aby bolo miesto na potrebne veci. Vsetko nepotrebne sa vyhadzalo, opravili sa chyby v texte a bol z toho dokument na jednu stranu, kde nemusel nikto nic vysvetlovat. Nebola potrebna zosivacka a vsetko sa urychlilo, pricom sa starsi ludia prestali stazovat na drobne a velmi svetle pismena na bielych papieroch. Na zmenu k lepsiemu presli vsetky kancelarie za jednu minutu, pricom priprava textu trvala 10 minut. Kapitola V: Kde sa to mam vsetko naucit? Ked sa s niekym rozpravam o programovani, tak casto pocujem od ineho cloveka, ze to nie je pre neho. Nema na to skolu. Prve, co mi napadne, ze ked Mozart vo velmi mladom veku hral na klaviri, tak na to asi tiez nemal styri vysoke skoly. Ale hral. Sachisti nechodia na sachovu skolu, ale aj tak hraju sach. Automechanik, ktory nema skolu a vsetko ho naucil otec a starsi brat, dokaze opravovat auta. Skola nas nenaucila jazdit na bicykli ani jest pizzu. Skola nas naucila, ako pocitat kompoty u babicky. Ma 7 polic a v kazdej je 7 kompotov. Kolko je ich spolu? Skola vsak nenauci, ze ak sa daju vsetky kompoty na tu najvyssiu policu, tak je vacsia sanca, ze to cele spadne. Skola na informatike ukaze, co robi pocitacovy procesor, ale neporadi, ako si kupit novy pocitac, na ktory nebude treba nadavat uz od prveho dna. Najlepsim programatorom na skole moze byt pokojne dievca, ktore nema v laske pocitace, ale vie si najlepsie zapamatat konkretny priklad z knihy a zapisat ho na tabulu bez jedinej chybicky. Bude to vsak spravny clovek, ktory bude v buducnosti vyuzivat presne tento program? A bude vediet najst chybu v zlozitom programe, ktory po malych zmenach prestal fungovat? S programovanim je to ako s pisanim a citanim. Jasne, nieco sa vieme naucit sami. Na nieco ine sa zas hodi, ked s tym niekto pomoze. Na internetovych diskusiach je caste, ze niekto prida svoj kod a postazuje sa, ze to nerobi presne to, co chce. Pozrie sa na to niekto skusenejsi a rychlo zisti, ze program je napisany dobre, ale odkazuje na subor, ktory nefunguje spravne. Takato pomoc je pre niekoho spasou a vitazstvom v tazkom boji, zatial co profik uvidi chybu pomaly z kilometra a navrhne najjednoduchsie z viacerych rieseni. Tak, ako pri vareni spagiet alebo comkolvek inom je vhodne vzdelavat sa. Teoreticky i prakticky, sam i s inymi. Nie je ziadne tajomstvo, ze na Profesii a podobnych portaloch je velky zaujem o ludi, ktori ovladaju HTML + CSS + PHP + JavaScript + Python + SQL + Adobe PS + 300 dalsich veci. Logicky by tiez jazykova skola chcela zamestnat schopneho cloveka, ktory ovlada perfektne anglictinu, nemcinu, francuzstinu a rustinu a este bude svojim sarmom pritahovat ziakov od konkurencie. Kde sa to vsak vsetko naucit? V roku 1993 mal internet malokto, a tak bolo aj velmi malo expertov a tiez roznych manualov. Bol problem dostat sa k internetu, nie to este naucit sa vsetko, co bude mat nejaky realny zmysel az v buducnosti. V roku 2003 sa uz internet bezne pouzival u ludi, ktori mali na to velmi dobry dovod. V roku 2013 mal internet ktokolvek a uz to davno nie je miesto len pre pocitacovych odbornikov. Napriek tomu, ze je ovela viac navodov, lektorov, kurzov a vsetkeho mozneho je dlhodoby nedostatok programatorov, spravcov siete a tak podobne. Kazdy rok je ich potrebne viac a viac. Cim skor sa tak zacne, tym lepsie. HTML nie je programovanie v pravom zmysle slova. Da sa vsak povazovat za uplny zaklad myslenia. Vytvorenie jednoduchej stranky je jednoduche, da sa lahko naplnit informaciami, ktore dokaze zobrazit kazdy clovek na kazdom zariadeni. Pre mnohych je to dobry zaciatok. Hodi sa taktiez pre ludi, ktori chcu zjednodusit nejaku obycajnu cinnost. Napriklad vdaka ramcom, co je dnes uz velmi malo pouzivana technologia, sa da stranka zlozit z viac stranok. Nemusite tak sledovat styri stranky s vysledkami, uplne postaci jedina. Kapitola VI: Potrebujem odbornika? V sucasnosti je mnozstvo moznosti, ako sa nieco naucit. Ak chcete dobre strielat z luku, vytvarat si vlastne keramicke hrnceky ci recitovat Vergilia v latincine, tak mozete. Asi to bude chciet otvorit penazenku, zaobstarat si vsetko potrebne a potom to uz pojde. Ako je to s programovanim? Naucit sa programovat je mozne a casto aj jednoduche. V tomto pripade casto staci zobrat nieco z toho, co je volne na internete prave pre ludi ako ste vy. Najroznejsie navody, hotove kusky textov ci vysvetlene jednotlive moznosti roznych jazykov. Da sa povedat, ze pre cloveka, ktory vie vsetko, je na internete vsetko. Az na jednu malickost. Je uplne bezne, ze najdete kod, ktory napriklad skryva nepotrebnu cast textu a ukaze ju len vtedy, ked to bude potrebne. Zaroven najdete kod, vdaka ktoremu su niektore najdolezitejsie casti este viac zvyraznene. Co ak sa tieto dva kody dostanu do nejakeho konfliktu a vysledok bude vyzerat velmi zle? Napriklad tak, ze vobec nic nebude fungovat? Ziadne navody nemaju vsetko, co by cloveku mohlo napadnut. Je to zvlast pri vytvarani uplne noveho obsahu, ktory musi fungovat co najlepsie aj pre tych, ktori pouzivaju netypicky ci mimoriadne zastarali softver. Tu sa velmi hodi praca odbornika. Skutocni odbornici, ktori pomozu s kodom, nie su uplne lacni. Za jedinu hodinu si vedia vypytat celkom dost. Na druhej strane, ak sa pocas tej jednej hodiny naucite ovela viac, ako zo styroch hodin studovania navodov a vyriesi problem, ktory vas trapi uz treti den, tak sa takato pomoc skutocne oplati. Experti na rozne jazyky sa dokazu s vami dorozumievat napriklad cez softver na zdielanie plochy aj s audiom a vy priamo mozete pisat kod presne tam, kde to navrhne lektor. Vyhodou takychto skoleni je okrem ineho i to, ze okrem sposobu pisania sa naucite aj nieco dolezitejsie – sposob myslenia. Podari sa tak nielen urobit dobry kod, ale zaroven sa da lahko naucit dobry zlepsovak alebo sa da vyhnut zbytocnym chybam v buducnosti na ovela dolezitejsich projektoch. Mne napriklad dobre pomohol Petr „Pepa“ Pavel, ktory skoli tak firmy, ako i uplnych zaciatocnikov s programovanim. Okrem ineho robi mentora v zasielkovni. Existuju dva obrovske rozdiely medzi profesionalmi a laikmi. Jeden z nich suvisi s odbornymi, presnymi nazvami. Postup, ako postavit dom, urobit akukolvek pracu ci spravne organizovat cas, je algoritmus. Logicka postupnost. Taktiez sa rozlisuje frontend a backend. Frontend je to, co vidi akykolvek pouzivatel, ktory si spusti program alebo otvori webovu stranku. Backend je to, co je vo vnutri a sposobuje, ze to cele funguje. Priklad backendu: Vypis mi staty juznej Ameriky. Vyuzi tuto databazu. Staty zorad podla abecedy od A po Z. Oddel staty ciarkami. Priklad frontendu: Argentina, Bolivia, Brazilia, Chile, Ekvador, Falklandy, Francuzska Guayana, Guyana, Kolumbia, Paraguaj, Peru, Surinam, Uruguaj, Venezuela. Druhy rozdiel je v tom, ze skutocny profesional sa neustale vzdelava. Uci sa nove technologie, skusa nove moznosti a berie do uvahy aj bezpecnostne rizika ci optimalizaciu na rozne zariadenia. Kapitola VII: Idem na to. Co potrebujem? Pripraveni na pisanie kodu? Vyborne. Tato velmi strucna kapitola skusi povedat, co na to treba, pripadne mimoriadne pomoze. • Chut. Chut pustit sa do niecoho noveho, nepoznaneho. Dostat sa dalej, ako ste sa dostali doteraz. Nebude to vyprava na styl Star Trek, ale stale je to do neznama, ktore je pod tym, co vsetko pozname. Ak vas zaujima, ako v skutocnosti funguju veci a co sa da urobit, aby nieco fungovalo dobre, mame prvu ingredienciu. Islo by to aj bez chuti, ale bola by to otrava. A tu nikto nema rad. • Anglictina. Anglictina a technika ide dohromady. Mnozstvo terminov je v anglictine a pouzivaju ich aj Slovaci a Cesi. Namiesto komplikovaneho slovenskeho terminu sa casto pouzije anglicky, ktory je univerzalny a casto velmi vystizny. Iste, da sa naucit pracovat ako programator bez znalosti anglictiny, ale zakladne veci, ako napriklad kladenie rozumnych otazok, sa velmi hodia. Na internet pisu casto aj o technickych veciach ludia, ktori pouzivaju anglictinu ako druhy jazyk. Nepotrebujete tak ziadne statnice z anglictiny na uzasnej urovni, ale ak dokazete prejst 2-3 hry v anglictine, dokazete tiez vytvorit jednoduchy kod. • Pochopenie vstupu a vystupu. Ak viete, ako funguje pocitac z hodin informatiky, ste na dobrej ceste. Pri programovani sa casto pouziva metoda „if – then – else“, takze „ak – potom – inak“. Ak pojdem do mesta, urobim nakup. Inak budem lezat na gauci a utocit na slane tycinky. • Znalost zakladnych klavesovych skratiek. CTRL+C a CTRL+V vie pouzivat aj Andrej Danko. Zakladne skratky na kopirovanie a vkladanie, rychle ukladanie (CTRL+S), prepinanie okien (ALT+TAB), obnovenie stranky (F5) a niekolko dalsich je poziadavkou. Clovek, ktory sa nenauci nieco, co pouzije kazdy den velmi casto, bude mat obrovsky problem pri niecom zlozitejsom. Vacsina skratiek je rovnaka v roznych programoch a tak sa mnohi nemusia vobec nic ucit. • Textovy editor/IDE. Aj jednoduchy poznamkovy blok sa da pouzit na napisanie dobreho webu alebo programu. Postupne vsak kazdy prechadza zo zakladneho poznamkoveho bloku na pokrocilejsie textove editory alebo tzv. IDE. Je jedno, v com sa pise kod, ale dobry nastroj vam moze pomoct napriklad s doplnovanim potrebnych znakov ci farebnym odlisovanim. Inak povedane, s dobrym programom, s ktorym sa naucite pracovat, ste pri pisani produktivnejsi. Velmi popularny je napriklad Notepad++ alebo Atom. Medzi zname IDE (kompletny balik potrebnych nastrojov) patri NetBeans, Eclipse a podobne. Pri uceni mozu velmi dobre pomoct aj webove nastroje, napriklad codepen.io/pen. • Webovy prehliadac. Ziadna novinka. Ak sa pise napriklad webova stranka, potrebujete moderny prehliadac, cez ktory sa daju vychytavat chyby. Taktiez potrebujete nieco, co pouziva mnozstvo ludi, aby ste vedeli, ako to presne vyzera. Pri pisani webovej stranke je caste ukladanie aktualnych zmien v textovom editore a obnovovanie stranky vo webovom prehliadaci. Ak mate vacsi monitor, mozete dat tieto dve okna vedla seba, to velmi zrychli pracu. Najcastejsie riesenia su Google Chrome a Mozilla Firefox. • Ultra mega vykonny superpocitac. Potrebujete ho, ak chcete popri pisani kodu hrat najnovsie hry, strihat video a sledovat do toho film v Ultra HD rozliseni. V pripade, ze chcete hlavne pracovat s kodom, uplne postaci akakolvek sunka. Idealne vsak nieco, kde sa nebude 2 minuty spustat internetovy prehliadac. Vytvaranie kodu nie je vobec narocne na hardver a posluzit moze cokolvek. Kapitola VIII: Kde som to mal zabocit? Ako uz teraz urcite viete, existuje viac roznych programovacich jazykov. Kazdy ma svoje vyhody a niektore sa daju vyborne kombinovat. Jednotlive programovacie jazyky su dobre popisane na roznych miestach, napriklad na STUBA: http://www2.fiit.stuba.sk/~bielik/courses/flp-slov/jazyky/programovacie_jazyky.html Ak by vas specialne zaujimala historia, tak tu je klasicky napis Hello World hned v 50 roznych jazykoch: https://medium.com/javarevisited/70-years-of-hello-world-with-50-programming-languages-2400de893a97 • C++, Ruby, Python, Perl, JAVA a mnohe dalsie jazyky su velmi zjednodusene vhodne na klasicke aplikacie. Ak chcete vytvorit napriklad novu hru, mozete vyskusat napriklad niektory z nich. Podobnych jazykov je neuveritelne mnozstvo, vratane roznych velmi netypickych, urobenych z cistej recesie. Casto je dobre zacat s takym jazykom, ktory pouzivaju ostatni vo vasom okoli a vedia dobre poradit. S programovacim jazykom sa vacsinou pracuje tak, ze vytvarate kod, ktory je dobre pochopitelny z pohladu cloveka. Nasledne tento kod specialny softver skompiluje – upravi tak, aby ho dokazal spravne spustat pocitac. • Webove jazyky. Ak chcete urobit dobru webovu stranku, alebo menit akykolvek obsah na internete, velmi sa vam hodia znalosti HTML. HTML sa da vyborne kombinovat s CSS, PHP ci JavaScriptom, co znamena, ze najroznejsie funkcie sa daju vytvorit niekolkymi roznymi moznostami. Vyhodou HTML, CSS a JavaScriptu je tiez to, ze dokaze vytvorit peknu prezentaciu alebo iny druh obsahu bez akehokolvek specialneho softveroveho vybavenia. Ulozite, pustite napriklad v Google Chrome a hotovo. Webove jazyky sa daju vyborne ucit napriklad cez web w3schools.com, kde je tiez mnozstvo dobrych prikladov. ? HTML pouzijeme, ked chceme pridat tabulku, text, obrazok alebo iny obsah. ? CSS pouzijeme, ak chceme, aby dany obsah vyzeral pekne a uhladene. ? JavaScript pouzijeme, ked chceme pridat nieco, co sa generuje. Napriklad skript, ktory nahodne vyberie jeden z obrazkov alebo urobi jednoduchy vypocet ci celu kalkulacku. ? PHP je vhodne na pracu s pridavanim obsahu z databazy, vytvorenie prihlasenia a tak podobne. Spolu s JavaScriptom generuju obsah, zatial co HTML a CSS ho hlavne zobrazuje konecnemu pouzivatelovi. • Specialne programovacie jazyky, urcene napriklad na netypicke zariadenia. Sem sa da zaradit napriklad Assembler, vdaka ktoremu funguje vsetko neuveritelne rychlo, ale jeho pouzivanie rozhodne nie je nic pre zaciatocnikov. Povedzme, ze chceme vediet robit zakladne webove stranky. Staci prejst navodom, napriklad na vyssie uvedenom w3schools, kde je popisane, ako sa pridavaju obrazky, odkazy na ine stranky a tak podobne. Zaroven otvarat v ich vstavanom editore konkretne kody a menit ich. Len tak, vidiet co to urobi. A zaroven vytvarat svoju stranku, ci uz od zakladov, alebo z ktorejkolvek volnej webovej sablony. Google ich pozna celkom dost. Ak sa vyhlada napriklad free responsive html website, tak sa trafite do cierneho. Staci prepisat texty, urobit par zmien a postupne vyhadzat vsetko, co nepotrebujete. Nasledne nahrat na web. Kapitola IX: Mam dvoch drakov a ziadnu princeznu V roku 1997 pocitacovy softver porazil Garryho Kasparova v sachu. Mimoriadne vykonny pocitac, dobre napisany softver a bohata databaza sachovych partii na jednej strane. Na druhej strane bol vtedajsi majster sveta v sachu. Dnes su pocitace podstatne vykonnejsie a softver dokaze viac, no stale su najlepsi ludski hraci velmi podobni svojou vykonnostou s pocitacmi. Preco je to tak? Clovek sa nezmenil, no pocitace su omnoho vykonnejsie. Dovod je velmi jednoduchy – sach samotny je komplikovany. A to, co by pocitac vzdy oznacil za chybu, sa moze ukazat ako vyborny tah po niekolkych tahoch. Je to komplikovana veda a len ti najlepsi sachisti dokazu porazit pocitacove programy na vyssej narocnosti. Clovek ma desat prstov. Naucili sme sa pouzivat desiatkovu sustavu. Pocitac reaguje na jednoduche jednotky a nuly. Napriklad ide prud a nejde prud. Z toho sa da urobit akykolvek program, vratane akehokolvek obsahu. Idealnou kombinaciou je kombinovat silu pocitaca a kreativitu cloveka. Aj o tom je programovanie. Vyuzivat algoritmy tak, aby vsetko narocne robil pocitac, zatial co clovek moze robit nieco zaujimavejsie ako komplikovane vypocty. Dobrym prikladom je tzv. Debuggovanie, alebo jednoducho povedane vychytavanie much a roznych nedostatkov. Dobre to ukazuje zachrana princeznej, ktora je napriklad aj v tomto znamom vtipe: https://devhumor.com/content/uploads/images/October2016/toggl-how-to-save-the-princess-in-8-programming-languages.jpg Vyhodou programovania je to, ze sa da vyskusat cokolvek. Ak kod nefunguje, moze sa na to ist inym sposobom. Pridat par riadkov a vyskusat, pricom pridane riadky sa daju kedykolvek znovu odstranit. Jeden clovek tak moze v priebehu minuty vyskusat mnozstvo roznych rieseni. Povedzme, ze chceme zachranit princeznu. Niekedy mame dvoch rytierov, ale ani jedneho kona. V horsom pripade mame dvoch drakov, ale ani jednu princeznu. Alebo namiesto zachranenia princeznej program vyhodnoti, ze treba zachranit draka pred princeznou. Problem moze vzniknut napriklad pri farebnej scheme webovej stranky. Autor chce zmenit farbu odkazov z modrej na zelenu. Prepise hodnoty, ale odkazy su stale modre. Preco? Neulozil sa dokument so strankou? Nebola obnovena stranka v prehliadaci? Ina cast kodu je „silnejsia“ a ma prednost, cim sposobuje, ze odkazy su nadalej modre? Chyba bodka, zatvorka ci uvodzovka? Alebo su odkazy odteraz cervene? Aj to sa moze stat. Vo vacsine pripadov sa vsak da vratit k tomu, co fungovalo predtym a postupne hladat chybu. Da sa presne vystopovat, kedy to prestalo fungovat. Realny problem, ktory sa stal: Stranka nefunguje spravne, niektore jej casti sa nezobrazia vobec. Problem bol po dlhom uvazovani a skusani v tom, ze sa JavaScript spustil skor, ako sa mal. Prebehol v case, ked este neboli zadefinovane vsetky casti, ktore mal spracovat. Je to nieco podobne, ako ked date rano murarovi ulohu, aby vymuroval stenu. Vybije sa vam mobil a az vecer zistite, ze vsetky tehly na stavbe su este stale v inom okrese. Kapitola X: Kostra v skrini Pamatate si na Johna, ktory bol spominany v druhej kapitole? Ten, co staval dom, ale inak ako ostatni. Postavenie domu samozrejme ma byt od zakladov, ale on na tom isiel inak. Zohnal si cloveka (alebo inu bytost), ktora pripravi zaklady, podlahy, nosne steny, strechu a da to vsetko dohromady. V podstate je jedno, kde zacne, ak dokaze ziskat vsetko potrebne a urobit z toho dobry celok. Na to ale potrebuje to hlavne, skusenosti. John ide urobit web pre svoju kamaratku Betku, ktora ponuka ubytovanie pre turistov. Ma skusenosti, lebo v minulosti robil web pre inu kamaratku, Anicku. Samozrejme, ze kazda ma ine poziadavky, mozno mieri aj na inych navstevnikov a zaroven novy web vznika ovela neskor ako ten prvy, na ktorom sa aj John ucil. Web pre Anicku bol jednoduchy. Nieco sa zacalo pisat, do toho niecoho sa pridali obrazky, par odkazov a cele sa to urobilo tak, ako bolo vtedy normalne a v mode. Tabulky. Vela tabuliek. Pre Johna je jasne, ze nemoze urobit jednoduchu kopiu prvej stranky, lebo chce prekonat original a znovu sa chce aj nieco naucit. Zacne tak s kostrou. A to je dobry napad. Kostra, struktura alebo iny nazov je dolezita pre prehladnost. Betka bude mat istotne radost, ak bude stranka pekna, prehladna a ak si ju moze niekto pozriet bez ohladu na to, ci to bude cez pocitac alebo telefon. Taktiez chce stranku, cez ktoru si moze niekto urobit rezervaciu s tym, ze bude mat aj ona dobry prehlad o vsetkom potrebnom. Ako na to? Tu je jednoduchy napad, ako by to malo vyzerat: 1. Osobne stretnutie, prebratie moznosti, spisanie poziadaviek. 2. Zaciatok projektu, dodanie textov, fotografii, informacii o okoli. 3. Navrh riesenia. V tomto pripade webova stranka, ktora bude vyzerat dobre na roznych zariadeniach (responzivna), co vyzaduje dobre urobene CSS. 4. Vytvorenie prvej verzie stranky s tym, ze sa zaroven testuje jej pouzitelnost. Na to postacia akekolvek texty. Moze sa napriklad vyuzit a upravit niektora HTML+CSS sablona. 5. Vkladanie spravnych textov, obrazkov a vsetkeho ostatneho cez par dobre urobenych funkcii (PHP) 6. Priprava vyssich funkcii, ako je prihlasenie a rezervacie. 7. Kompletne otestovanie pred spustenim a kontrola stranky, ci je vhodne urobena a neobsahuje technicke ci textove chyby. 8. Spustenie stranky a priprava stranky na to, aby sa dala lahko najst cez Google, katalogy a podobne (SEO). Samozrejme, tento postup sa da zjednodusit, ale vysledkom bude produkt, ktory bude menej zaujimavy alebo viac chybovy v porovnani s tym, co ponukne konkurencia. Viac technologii sa pouzije preto, aby sa dal projekt udrzovat. Dobra kostra tiez zabezpeci, ze stranka nebude jeden obrovsky dokument na stovky riadkov, ale presny opak. Kratky dokument, ktory si vzdy a velmi prehladne vytiahne len to, co potrebuje. Tak moze byt hlavny subor, subor s dlhymi textami, subor s menu a tak podobne. Ak sa zmeni subor s menu, ovplyvni to kazdu podstranku a nebude sa musiet menit mnozstvo suborov. Ukazka kostry webovej stranky Ked sa urobi dobra kostra projektu, tak nemusi vsetko robit jeden clovek. Peter vie vyborne robit s CSS a postara sa o to, aby bola stranka esteticky pekna a lahko citatelna. Anezka vie pisat dobre, putave texty. Nie je ziadna programatorka, ale jej texty sa velmi hodia. Matus je expert na to, aby vsetko fungovalo ako ma. Pripravi databazu, zalohovanie a menu. John sa postara o zvysok. Az na obrazky. Povie si, ze to je praca pre grafika. Lukas je grafik a postara sa o to, aby boli obrazky presne orezane, posobili jednotne a aby boli dost male na to, aby sa dostatocne rychlo nacitali aj ludom s pomalym pripojenim na internet. Ukazka HTML

Hlavny nadpis

Tu je velmi jednoduchy text s klikatelnym odkazom na Google.com. Samozrejme sa da pridat akykolvek text, ktory moze byt hrubym, podciarknutym ci napriklad sikmym pismom. Alebo napriklad vsetkym naraz.

Mensi nadpis nad nakupnym zoznamom

Ukazka CSS Odkaz na stranku 1 Odkaz na stranku 2 Odkaz na stranku 3 Odkaz na stranku 4 Ukazka JavaScript

JavaScript opakovanie s podmienkou (Loop)

Tu bude narastat cislo az do zastavenia, na zaklade Javascriptu. Da sa to pouzit napriklad pri vypisovani poloziek eshopu alebo niekde, kde su podobne tovary s inym nazvom.

Ukazka PHP Server hlasi, ze momentalne je " . $t; echo " hodin, a tak ti praje:

"; if ($t < "10") { echo "Dobre rano! (lebo je menej ako 10 hodin)"; } elseif ($t < "20") { echo "Dobry den! (lebo je menej ako 20 hodin)
"; } else { echo "Dobru noc! (lebo nie je splnena ani jedna z podmienok)"; } ?> Ukazka Python # Tento program prepocita teplotu zo stupnov celzia (C) na fahrenheity (F) print('Staci zmenit cisla v tejto casti,') print('program to okamzite prepocita') print(' ') celsius1 = 100 celsius2 = 200 celsius3 = 1538 fahrenheit = (celsius1 * 1.8) + 32 print('%0.1f C = %0.1f F' %(celsius1,fahrenheit)) fahrenheit = (celsius2 * 1.8) + 32 print('%0.1f F zodpoveda %0.1f C' %(fahrenheit,celsius2)) fahrenheit = (celsius3 * 1.8) + 32 print('Teplota %0.1f C (%0.1f F) tavi zelezo' %(celsius3,fahrenheit)) Uzitocne odkazy Webove stranky, ktore vysvetluju rozne programovacie jazyky, vratane prikladov: https://www.w3schools.com/ https://www.learn-html.org/, https://www.learn-js.org/, https://www.learn-php.org/ a dalsie https://www.javatpoint.com/ https://www.jakpsatweb.cz/ https://www.zdrojak.cz/ https://www.root.cz/ Vypisovat velke mnozstvo stranok nema velky zmysel, pretoze to, co potrebujete, casto najde Google v priebehu sekundy. Staci sa len dobre opytat. Tak napriklad, ak by ste chceli vediet, aky je v CSS rozdiel medzi padding a margin, staci sa spytat Google. Toto zadanie: https://www.google.com/search?q=css+padding+vs+margin ma doviedlo sem: https://www.w3schools.com/css/css_boxmodel.asp Podobne knihy z Greenie kniznice: http://greenie.elist.sk/knihy/linux-ako-nieco-navyse http://greenie.elist.sk/knihy/linuxove-distribucie Samotna Greenie kniznica pouziva napriklad JavaScript pri kvizoch a kompetny web je prehladny HTML/CSS kod. Youtube toho vie naucit vela. Napriklad tuto Yablko pekne prebera ako sa pise HTML kod: https://www.youtube.com/watch?v=54bRQFfKlwk&ab_channel=Yablko Taktiez PHP, kde ukaze spojenie programovania a jeho oblubeneho serialu: https://www.youtube.com/watch?v=kMq5Ix-srRg&ab_channel=Yablko Martin Bugar ma svoj nazor na programatorske myslenie a ukaze, ako urobit napriklad pyramidu: https://www.youtube.com/watch?v=nyP6EEAiSrA&ab_channel=Kurzyprogramovania