Monday, May 26, 2014

Üle-Euroopaline konkurss mängu programmeerimises (keskkond Kodu Game Lab)

Avaldan sellel leheküljel info ühe põneva konkursi kohta (auhinnaks reis Brüsselisse).
http://www.kodukup-europe.org/

Konkursitööde tähtaeg on 15. september 2014

Mängude osas on järgmised nõuded:
See peaks olema kas:
1) klassikaline arkaadmäng (vaata näiteid siit: http://www.classicgamesarcade.com/)
2) mäng, mille sisuks on teadlik vee kasutamine
3) mäng, mille sisuks on Marsi avastamine

Mängu võib programmeerida üksi või kuni 4 liikmelises rühmas (aga kõik rühmaliikmed peavad olema ühest koolist, vanuses 6 - 16 aastat).
Mängu idee peab olema ise välja mõeldud, kasutada saab Kodu Game Lab tegelasi ja taustu.

Kui oled huvitatud osalemisest, siis anna sellest teada vilve@viimsi.edu.ee (pean huvilised võistlusele registreerima)

Täpsemad juhised inglise keeles

Mängu programmeerimiseks kasutatakse programmi, nimega Kodu (see on vabavara ja seda saab tasuta alla laadida ning oma arvutisse installeerida SIIT).
Kahjuks meie kooli arvutid on programmi jaoks liiga "lahjad" ning koolis me programmeerimisega tegeleda ei saa.

Sellepärast pakun huvilistele välja võimaluse seda keskkonda niiöelda e-õppes tundma õppida.
e-Õppe materjalid hakkavad ilmuma sellele lehele: http://koduproge.blogspot.com/
Lisaks jagan seal ka materjale, mida teiste koolide õpetajad on juba valmis teinud.





Sunday, May 18, 2014

CSS kood kodulehe kujundamises

Eelmistel tundidel oleme õppinud, kuidas saab HTML koodi abil muuta pealkirjade suurust, kujundada tabelit ja edasi anda värve.
Kui soovime sama kujundusega teha aga valmis mitu lehte, siis on targem kasutada CSS-i.

CSS failis kirjeldatakse HTML dokumendi kujundus. Nii saame näiteks ka uutele HTML lehtedele anda ühesuguse kujunduse (näiteks pealkirjad H1 alati rohelised ja paksus kirjas, pealkirjad H2 sinised ja kaldu jne).

Õppimiseks teeme kõigepealt valmis ühe lihtsa veebilehe.
Avage Notepad ja kopeerige sinna allolev kood:

<!DOCTYPE html>
<html>
<head>
         <title>CSS koodi katsetamine</title>

</head>
<body>

         <h1>Pealkiri 1</h1>
        <p>Siin on suur ja ilus pealkiri. Pealkirja all on lõik.</p>
       <h2>Pealkiri 2</h2>
       <p>Ka pealkirja 2 all on veidikene teksti.</p>

</body>

</html>


Salvestage fail nimega katsetus.html oma arvuti võrgukettale. NB! Salvestamisel meenuta neid juhiseid!

Vaata oma faili veebilehitsejaga.

CSS koodi võib lisada otse html dokumendi sisse. Sellisel juhul lisatakse see lehe päisesse <head> ... </head> märgendite vahele.

Kirjutage päissesse (või kopeerige siit) järgmised read:

 <style type="text/css">
H1 {
color: green;
font-weight: bold;
font-size: 22 pt;
}
</style>


Salvestage dokument ja vaadake uuesti veebilehitsejaga. Mis juhtus pealkirjaga?
Lisage HTML dokumenti veel üks pealkiri stiiliga H1 ja salvestage dokument. Millise välimuse omandas lisatud pealkiri?

Kui soovime lisada samasugust väljanägemist ka järgmise lehekülge pealkirjadele, siis praegusel juhul tuleks ka selle päisesse stiilikoodid lisada.

Sellisel juhul on lihtsam salvestada stiilikoodid eraldi CSS faili

Selleks avage Notepadis uus dokument, salvesta see (jälle valige enne salvestamist Notpadis All files ja siis kirjutage failinimi koos laiendiga, näiteks laadid.css)

Nüüd kopeerige faili laadid.css järgmised read

H1 {
color: blue;
font-weight: bold;
font-size: 22 pt;
}

Avage HTML fail katsetus.html ning <style> ... </style> märgendite asemele kopeerige päisesse rida:
 
<link rel="stylesheet" href="laadid.css" type="text/css" />

See rida tähendab, et dokumendi stiil võetakse failist laadid.css
Salvestage oma dokument ja vaadake nüüd veebilehitsejaga. Mida märkasite?

Täiendame laadid.css dokumenti veel ning lisame sinna järgmised read:

h2{
color:blue;
font-size: 16pt;
text-decoration:underline;
}

p {
font-size: 12pt;
font-style: italic;
}


Salvestage css fail ning vaadake dokumenti katsetus.html veebilehitsejaga.

Codecademy's on kursus ka CSS'i kohta! Kellel huvi, siis õppige edasi!
http://www.codecademy.com/courses/web-beginner-et-ir3wv/0/1?curriculum_id=52b7bca98c1ccc4e47003d56


Sunday, May 11, 2014

Scratch'is tehtud tervitus (16.mail toimuvale üritusele sissejuhatuseks)

Õppeaasta lõpul tuletame veel veidi meelde Scratchi ja teie ülesandeks on teha selles keskkonnas üks väike reklaam või tervitus programmeerimise ringile!

Tegemist peaks olema animatsiooniga ehk siis kogu klipikene töötab ise (ajastus skripti sisse, mitte klahvivajutusega) ja tegelased võiksid öelda või teha midagi toredat.

Parimad klipikesed tulevad ettenäitamisele 16.05. toimuval teadmiskeskuse aastalõpuüritusel!

NB! Palun jaga animatsiooni ka minuga ja postita link animatsioonile siia kommentaaridesse.
Juhend, kuidas Scratch programmi jagada, asub siin: http://programmeerimisring.blogspot.com/2014/03/mangu-jagamine.html

Monday, May 5, 2014

HTML - tabelid, loendid ja taustavärvid

Tabelid HTML-is

Tabel algab sildiga <table> ja lõppeb sildiga </table>
<tr> ... </tr> tähistab rida
<td> ... </td> tähistab andmekasti

Katseta tabeli tegemist siin: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table

Ülesanne!

  1. Katseta, mida teeb tabelis style="width:300px". Muuda numbrit 300 suuremaks ja väiksemaks. Peale muutmist klõpsa "Submit Code".
  2. Lisa <table> sildi sisse border="1" (kood peab peale lisamist välja nägema selline: <table style="width:300px" border="1">). Katseta border numbri muutmist. Mida see number näitab?
  3. Lisa <table> sildi sisse, style määrangule lisaks style="width:300px;background-color:yellow" (kood peab peale lisamist välja nägema selline: <table style="width:300px;background-color:yellow" border="1">). Muuda koodis background-color värve näiteks red, green, blue.

HTML värvikoodid
http://www.w3schools.com/html/html_colornames.asp

Taustale värvi lisamine: <body style="background-color:#FFFF00"> - body sildi sisse saab lisada värvi, mis värvib ära terve tausta.

Loendid
Täpploendit saad katsetada siin: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists4
Numbrilist loendit saad katsetada siin: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists

Ülesanne 2
Proovi teha värvilisele taustale värviline tabel!

Spikker:
<!DOCTYPE html>
<html>
<head>
<title>Minu lehekülg</title>
</head>

<body style="background-color:#FFFF00">

<h1>Minu esimene kodulehekülg</h1>

<table style="width:400px" border="1">
<tr style="background-color:red">
  <td></td>
  <td><b>Esimene veerg</b></td>
  <td><b>Teine veerg</b></td>
  </tr>
<tr style="background-color:green">
  <td>Teine rida</td>
  <td>Huvitav</td>
  <td>Keeruline</td>
</tr>
<tr style="background-color:blue">
  <td>Kolmas rida</td>
  <td>Lihtne</td>
  <td>Igav</td>
</tr>
</table>


</body>
</html>

Kel aega üle, siis proovige veebilehe koodi õppimist Codecademy lehel!
http://www.codecademy.com/courses/52ab6add1f6cf89a35000026/resume?curriculum_id=52b7bca98c1ccc4e47003d56


http://www.lego.com/en-us/mindstorms/funzone/fixthefactory/