laupäev, 25. mai 2019

HTML ja CSS erinevates veebikeskkondades

Veebilehekülgede tegemiseks ei pea kõike algusest peale ise HTML-is kirjutama. Võimalusi oma tegemisi internetis kajastada on väga palju ning kodulehe või blogi tegemiseks ei pea tegelikult isegi HTML-i oskama.
Küll aga annab arusaamine HTML-ist ja CSS-ist võimaluse veebilehekülge omanäolisemaks ning mallidest erinevamaks "tuunida".

Keskkonnad, kus saab endale kerge vaevaga kena kodulehe või blogi, on näiteks

Blogger www.blogger.com (www.blogspot.com) - seda keskkonda saab kasutada Google kontoga ehk ka kooli e-postiaadressiga. Võimalus on kasutada valmis "malle". Kodulehe või blogi veebiaadressiks saab tasuta konto puhul sinuantudnimi.blogspot.com

Weebly http://www.weebly.com/ - keskkonna kasutamiseks tuleb luua kasutajakonto. Edasi on võimalik kasutada valmis "malle". Tasuta konto puhul on kodulehe aadressiks sinuantudnimi.weebly.com
Juhendid: http://multimeediaring.blogspot.com/2014/02/kodulehekulje-tegemine-weebly-keskkonnas.html
ja http://multimeediaring.blogspot.com/2014/02/kodulehekulge-tegemine-weebly.html

Wix http://www.wix.com/ - keskkonda saab kasutada ka Google kontoga (ka kooli e-postiaadressiga). See on ilmselt eelnimetatutest kõige rohkem erinevaid võimalusi pakkuv keskkond! Kasutada saab valmis "malle", millele on lisatud juba animatsioone. Enamasti saab kasutada tervet valmis leheküljestikku, millele siis tuleb lihtsalt oma sisu lisada.
Tasuta konto puhul on kodulehe aadressiks sinukasutajanimi.wix.com/leheküljenimi
Juhend: http://multimeediaring.blogspot.com/2013/01/kodulehe-tegemine-wwwwixcom.html

Wordpress http://www.wordpress.com/ - palju kasutatud keskkond, kahjuks veebipõhine tasuta leht ei võimalda eriti valmis "mallide" muutmist (HTML ja CSS lisamist). Samas on võimalik Wordpressi programm ka enda arvutisse installeerida ning siis on juba kõik võimalused ka koodi muutmiseks olemas. Rohkem infot leiab lehelt: https://et.wordpress.org/

kolmapäev, 22. mai 2019

HTML koodi tutvustus, pildi ja lingi lisamine

Proovime täna selle lehekülge abiga kirjutada html-keeles lehekülje ning seda siis veebilehitsejaga vaadata.

Lehekülje kirjutame programmis Notepad. Selleks ava oma arvutis Start -> All Programs -> Accessories -> Notepad

Sinna võid kirjutada näiteks järgmise koodi:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Lehekülje pealkiri</TITLE>
</HEAD>

<BODY>
<h1>Suur pealkiri</h1>
<p>Siin on tekstilõik</p>
<img src="http://www.viimsi.edu.ee/public/kodulehe_pais7_1.jpg" />
</BODY>
</HTML>

Tuleta meelde eelmisel tunnil õpitud kood.
Kui see on meelest läinud, siis spikker on siin:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

HTML koodinäiteid saab testida siin:
http://www.w3schools.com/html/html_examples.asp

Notepad'i dokumendi salvestamine html-formaati.

Selleks, et veebilehitseja meie dokumenti oskaks avada, tuleb Notepadis valmis tehtud dokument salvestada HTML formaati.
Selleks klõpsa File -> Save As ning vali Save as type alt All Files (vt joonis allpool). Nüüd kirjuta File namereale oma faili nimi (näiteks esimene) ja lisa kohe nime järele punkt ning lühend html
Näiteks: esimene.html
Klõpsa save.
Nüüd leia oma dokument üles ning tee ta veebilehitsejaga lahti. Nüüd näed, milline see lehekülge internetis välja näeks.



Ülesanne 1
  1. Vaheta oma failis ära pilt (selleks otsi internetist meelepärane pilt vaata selle aadressi) ja lisa pildi alla ka link, kust pildi leidsid (osavamad võivad muuta pildi enda klikitavaks lingiks, kuidas seda teha, vaata siit).
  2. Lisa kodulehele pealkirjaks "Sinu eesnimi koduleht".
  3. Paiguta pilt pealkirja järele.
  4. Lisa kodulehele tekst, kus kirjutad, mida oled senistest programmeerimisetundidest teada saanud ja mida tahaksid veel teada saada!


reede, 10. mai 2019

Python - graafiline kasutajaliides

Esmalt lae siit alla fail nimega easygui.py ja salvesta see oma kausta kooli arvutivõrgus.
NB! See fail peab olema nende pythoni programmi failidega, mis seda funktsiooni kasutavad, samas kaustas!

Easygui funktsiooni kasutava programmi puhul tuleb funktsioon esmalt importida (nagu ka turtle funktsiooniga tegime).

from easygui import *

Graafilisel kasutajaliidesel on teateaken, mida kirjeldatakse funktsiooniga msgbox

Katseta programmi:

from easygui import *

msgbox("Kui näed seda akent, klõpsa OK")

Funktsioon buttonbox kuvab aknakese, milles on nupud ja mis registreerib nende nuppude vajutamise. Nuppudele ilmuvad kirjad saab funktsioonile ette anda muutujaga choices

Katseta programmi:

from easygui import *

buttonbox("Tahad programmeerimist õppida?", choices = ("JAH", "EI"))

Kui me soovime, et programm ka kasutaja valikule kuidagi reageeriks, siis tuleks nupuvajutus muutujasse salvestada (allolevas näites salvestatakse kasutaja tehtud valik muutujasse nimega valik).
Kolmandas reas anname kasutajale tema valikust teada msgbox funktsiooni kasutades.

from easygui import *

valik=buttonbox("Tahad programmeerimist õppida?", choices = ("JAH", "EI"))
msgbox("Sinu valik oli "+valik)

Võime vastamise teha ka valikust sõltuvaks, selleks saame kasutada tingimuslauset if ... else

from easygui import *
valik=buttonbox("Tahad programmeerimist õppida?", choices = ("JAH", "EI"))
if valik == "JAH":
    msgbox("Tore, et sulle meeldib programmeerimist õppida!")
elif valik == "EI":
    msgbox("Kahju!")
else:

    msgbox("Kas soovid akna sulgeda?") #Seda kuvatakse juhul, kui kasutaja proovib akent ristist sulgeda

Kasutajalt saab andmeid küsida enterbox abil.

from easygui import *

nimi=enterbox("Mis su nimi on?")

msgbox("Sinu nimi on: "+nimi)

Kui soovid küsida kasutajalt ainult arvu, siis saad kasutada funktsiooni integerbox. Siin on võimalik anda ette ka piirid, mille vahele vastus peab jääma (kui kirjutada piiridest väljaspoole jääv vastus, siis antakse sellest teada ja küsitakse uuesti).

vanus = integerbox("Kui vana te olete?", lowerbound = 1, upperbound = 100)


Ülesanne 19

Täienda tunni jooksul tehtud katsetusi nii, et saaksid kasutajaliidese, mis küsib kasutaja nime ja vanust ning väljastab teate "Tere, <nimi>! Oled <vanus> aastane!"

Ülesanne 20

Loo kasutajaliides (võid kasutada ühel varasemal tunnil valminud matemaatika programmi), kus kasutaja saab sisestada 2 arvu (kaks integerbox'i) ning edasi valida, millise tehte ta nendega teeb (liidab, lahutab, korrutab või jagab). Edasi kuvatakse talle teade, kus on toodud arvud, nendega tehtud tehe ja vastus.
Näiteks:

NB! Selleks, et jagamisel kuvataks lõpmatute kümnendmurdude puhul vastuses näiteks ainult 2 komakohta, tuleb kasutada funktsiooni round
round(arv1/arv2,2) - jagatis ümardatakse sajandikeni (2 kohta peale koma).

Ülesanne edasijõudnutele

Uuri alloleval lingil olevat näidet pildi lisamise kohta buttonbox'i. Otsi internetist sobiv pilt ja programmeeri vastav liides näiteks küsimusega, kas pilt meeldib või mitte (nupud) ning vastus erinevatele valikutele (näiteks: "Tore, et pilt sulle meeldib!", "Kahju, et pilt ei meeldinud" vms).

http://easygui.sourceforge.net/tutorial.html#how-to-show-an-image-in-a-buttonbox

kolmapäev, 1. mai 2019

Python - funktsioonid

Eelmistel tundidel rääkisime, et Pythonis ei saa anda muutujatele nimeks selliseid sõnu, nagu print, input, sest neid sõnu kasutab Python ise oma programmi koodis.
Tegelikult tähendavad need sõnad Pythonisse sisse ehitatud funktsioone, mida me programmi kirjutamisel kasutada saame.

Funktsioonid on programmilõigud, mis määravad ära mingi konkreetse (või mingid konkreetsed) tegevused ning mida saab vajadusel programmi eri osades välja kutsuda.

Funktsiooni kirjeldus algab lühendiga def edasi  tuleb funktsiooni nimi ning sulud (sulgudesse saab lisada parameetri, aga kui seda ei ole, siis tühjad sulud tuleb ikkagi kirjutada. Rea lõpetab koolon!
Funktsiooni sisu kirjutatakse taandega ehk trepitakse!

Ilma parameetrita funktsioon

def loenda():
    i = 10
    while i > 0:
          print(i)
          i = i - 1
loenda()

Parameetriga funktsioon

def loenda(i):
     while i > 0:
          print(i)
          i = i - 1
loenda(10)

NB! Funktsioonid peavad olema kirjeldatud enne, kui neid programmis välja kutsutakse! Tavaliselt kirjeldatakse funktsioonid ära programmi alguses.

Funktsiooni väljakutsumiseks kirjutatakse funktsiooni nimi ja selle järel ümarsulud (või ümarsulgudes parameeter).

Näiteks loenda(10) kutsub viimases näites välja funktsiooni loenda ning annab parameetri kaudu teada, et loendamist tuleb alustada 10-st.


Ülesanne 14
Testi ülalolevaid funktsioone! Kas nende poolt väljastatud tulemuses on mingi erinevus?


Parameetri (antud näidete puhul selle arvu, millest me hakkame alla loendama), saame ka kasutajalt küsida.

Näiteks küsib allolev programm kasutajalt arvu, millest saa soovib allapoole loendama hakata ning funktsiooni parameetriks saabki see arv:

def loenda(i):
    while i > 0:
        print (i)
        i = i-1
n = int(input("Sisesta arv: "))     
loenda(n)

Ülaltoodud näidetes väljastas funktsioon midagi (printis ekraanile numbreid). Vahel on aga vaja, et funktsioon lihtsalt arvutaks midagi välja ning annaks meile vastuse (ja meie saame selle vastusega edasi tegeleda).
Väärtuse väljastamiseks on käsklus return

Näiteks allolev funktsiooninäide liidab funktsiooni nimetuse juures sulgudes antud arvud, aga vastust välja ei prindi.

def liitmine(a,b):
    return a + b

Ka funktsiooni väljakutsumisel ei prindita midagi. Selleks, et näha, kas funktsioon ka õigesti töötab, tuleb lisada käsklus print.

def liitmine(a,b):
    return a + b
print(liitmine(2,4))



Ülesanne 15
Kasutades ülalolevat näidet loo programm, mis küsib kasutajalt 2 arvu (näiteks a ja b) ning väljastab nende summa. Väljastamisel võiks progamm ka öelda, et a ja b summa on ... 

Ülesanne 16
Täienda eelmist programmi lahutamise funktsiooniga nii, et peale arvude sisestamist väljastaks programm nii nende summa kui vahe!


Ülesanne 17
Täienda eelmist programmi selliselt, et kasutaja käest küsitakse, kumba tehet ta teha soovib ning vastavalt sellele käivitatakse funktsioon ning kuvatakse tulemus.


Ülesanne 18
Tuleta meelde eelmisel tunnil õpitud kilpkonnagraafikat. Kuidas saab siin ülesandes 13 funktsiooni kasutada?

Koodinäide


reede, 26. aprill 2019

Python - graafikaelemendid

Senini oleme Pythonis tegelenud teksti sisestamise ning sellele tekstikujul ka vastuse saamisega.

Tegelikult saab Pythoniga tekitada ka joonistusi. Üks lihtsamaid võimalusi on turtle ehk kilpkonn - seda graafikat kutsutaksegi kilpkonnagraafikaks.

Selleks, et Python aru saaks, et tuleb joonistama hakata, tuleb esmalt seda talle teada anda - selleks kirjutame programmi esimesele reale käskluse

from turtle import *

Nüüd imporditakse Pythoni moodulist turtle vajalikud osad, et joonistamisega algust teha.

Käsklused, millega saab kilpkonna liigutada, on:

forward(x) - liigu edasi x piksli võrra
back(x) - liigu tagasi x piksli võrra
left(d) - pööra vasakule d kraadi
right(d) - pööra paremale d kraadi

Kopeerige järgmine programmilõik Thonny koodiaknasse ja käivitage (NB! Salvestamisel ei tohi failile nimeks anda turtle, sest seda nime kasutab Python ise oma programmis - seega andke failile nimeks näiteks kilpkonn).

from turtle import *             
forward(100)                      
left(90)                        
forward(100)                       
left(90)
forward(100)
left(90)
forward(100)

exitonclick()


Mis kujund joonistatakse?

Käsklus exitonclick() tähendab, et joonistusaken suletakse, kui selles hiirega klõpsata. Kui seda ei lisa, siis tuleb aken ristikesest sulgeda.

Eelmisel tunnil õppisime kirja panema tsükleid.


Ülesanne 10

Pane näiteülesanne kirja while-tsüklit kasutades!


Ülesanne 11

Pane kilpkonn joonistama võrdkülgset kolmnurka, mille küljepikkuseks on 200 pikslit.



Joonistamisel on võimalik ka kilpkonna värvi muuta ning joonistada erinevat värvi kujundeid.
Värvi valimiseks on käsklus color("värvinimi") - näiteks color("red") värvib joone punaseks.

Kui soovime kinnise joonega kujundit seest ära värvida, tuleb joonistamise trükli või käsurea algusesse kirjutada kood

begin_fill()

ja lõppu

end_fill()

Katseta järgmist koodi (kopeeri see Thonny koodiaknasse ja käivita):

from turtle import *               
color("red")
i=0 
begin_fill()
while i<4:
    forward(100)
    left(90)
    i=i+1
end_fill()


Joone paksust saab muuta käsklusega pensize(number)

Ülesanne 12

Täienda oma kolmnurga joonistamise programmi nii, et kilpkonn joonistaks sellise pildi (suurima kolmnurga küljepikkus on 200 ning väikseimal 100, värvid on inglise keeles green, red ja yellow).
Ülesanne 13

Kui eelmine kolmnurk valmis, siis täienda programmi nii, et selle käivitamisel joonistatakse selline kujund.
Kilpkonna saab joonistama panna ka ekraani erinevatest punktidest. Asukoha muutuseks sobib käsklus goto(x, y) ehk näiteks goto(100, 200) läheb punkti, mille x koordinaat on 100 ja y koordinaat 200.

Kui te mingit muud käsurida programmi ei lisa, siis alutab kilpkonn liikumist akna keskpunktist (0, 0) ja jätab uude punkti liikumisel maha joone.

Ilma jooneta joonistamiseks tuleb enne liikumist anda kilpkonnale käsklus penup() või lihtsat up() ja uuest nö pliiati paberile panekuks käsklus pendown() või down().

Lisaülesanne

Katseta käsklusi bgcolor("pink")




pühapäev, 13. jaanuar 2019

InO-Bot roboti programmeerimine Scratchis

InO-Bot on põrandal liikuv robot, mida saab programmeerida Scratchi abil.
Robotil on olemas terve rida andureid, mida saab programmeerimisel kasutada.

Esmalt on vaja robot arvutiga ühendada. Selleks peab arvutis bluetooth ühendus ja alla laetud ning installeeritud Scratch 2.0 (mitte Scratch Desktop, vaid vanem versioon!) ja Scratch Launcher  - ilma nendega ei ole võimalik InO-Bot robotit Scratchiga programmeerida.

InO-Boti ühendamine arvutiga.

Ülesanne 1 - roboti liikumise programmeerimine.

reede, 4. jaanuar 2019

Mäng agar.io ainetel (edasiarendus)

Agar.io mängu juhend (üks kasutaja poolt liigutatav täpp, mis sööb teisi täppe)


  • Lisa mängu teine "täpp", mis samuti koos sinu liigutatava objektiga hakkab teisi täppe sööma!
  • Kui teine täpp on suurem ja puutub kokkku sinu objektiga, siis süüakse sind ära!
  • Kui sinu objekt puudutab teist täppi ja on sellest suurem, siis süüakse teine täpp ära!

Töö käik:
  • Loo uus täpp, mis hakkab samuti teisi täppe sööma.
  • Tee teise sööva täpi jaoks uued muutujad suuruse ja kiiruse muutmiseks (nt suurus2 ja kiirus2).
  • Programmeeri täpp juhuslikult liikuma

  • Programmeeri söödavat täpid (kloonid) nii, et kui neid puudutab see teine täpp, siis nad kaovad sama moodi, nagu põhilise mängutäpi puudutusel. Samuti muutub täpp suuremaks (muutuja suurus2 muutumine) ja liikumine aeglasemaks (kiirus2 muutumine).

  • Nüüd lisa oma mängutäpi skripti suuruse kontroll. Juhul kui sinu täpp puutub kokku teise täpiga (sellega, mis ka sööb teisi täppe), siis vastavalt täppide suurusel süüakse kas sinu täpp ära või siis see teine täpp (nagu agar.io mängus käib).
  • Lisa tegevused vastavalt teadetele (et teade "söödud" peidaks teise täpi ja teade "mäng läbi" sinu täpi). Mängu võib lõpetada ka nii, et joonistad tausta kirjaga "Mäng läbi" ja see tuleb siis teate peale nähtavaks.