Programmeerimise ring algajatele: April 2014

Monday, April 28, 2014

HTML - w3schools

http://www.w3schools.com/html/default.asp

w3schools on keskkond, kus on võimalik HTML koodi näiteid leida.

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 name reale 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.

Thursday, April 17, 2014

Tasuta koduleheruum www.zone.ee-s

https://www.zone.ee/et/tasuta-koduleheruum-registreeri/

Peale registreerimistaotluse kinnitamist (e-posti aadressile saadetav link) on lehekülg umbes 30 minuti pärast kasutusvalmis.

Valmis leheküljed saad sinna keskkonda üles laadida üle FTP. FTP programmi on võimalik oma arvutisse intalleerida.

Kui võimalus arvutisse installeerida puudub (nagu kooli arvutiklassis näiteks), siis saab kasutada ka veebipõhist FTP-d.

Veebiserveri aadress on web.zone.ee
Kasutajanimi: see, mille oma veebilehele välja mõtlesid
Parool: see, mille registreerimisel välja mõtlesid

Üks võimalus selleks on TXFTP

Veebilehitsejas avanev FTP klient

http://www.txftp.com/

Peale sisselogimist näed oma faile, mis veebiserveris asuvad. Sama töövahendiga saad sinna juurde teha ka kaustu.

Thursday, April 10, 2014

Mängu loomine Javaskriptiga (Silveri mängumootor)

Täna katsetame ühe mängu loomist ja vaatame veidi Javascripti koodi! Tegemist on GAG 11. klassi õpilase Silver Shnuri loodud programmiga, mida meie täiendame, et luua selle baasil oma mängu.

Mäng ise on näiteks selline: https://googledrive.com/host/0B6sVCcP1hKyCZFFWaTFka0lmak0/template.html

Selleks, et sellist mängu teha tuleb:
1. Otsida internetist üks pilt, mille peal olevate objektide kohta saate küsimusi esitada. Pildi pikem külg võiks olla kuni 800 pikslit.
2. Loo endale kas arvuti töölauale või parem oma võrgukettale kaust nimega "mang".
3. Salvesta pilt sellesse kausta. Muuda pildi nimi võimalikult lühikeseks ja ühesõnaliseks! Kindlasti pööra tähelepanu, mis tüüpi failiga on tegemist (jpg või png).
4. Nüüd ava link ja lae sealt alla kõik kaustas olevad failid.
https://docs.google.com/a/gag.ee/file/d/0BzdCsKohbshOdGZXZVpOaElrNXM/edit?pli=1

5. Salvesta need failid kõik samasse kausta, kus on ka sinu pildifail.
Kaustas peavad nüüd olema lisaks pildile sellised failid:

6. Nüüd otsi oma arvutist üles programm nimega Notepad (see peaks olema Start -> My Computer -> Accessories all) ja ava see. Ava Notepad'iga fail creator.html (selleks klõpsa File -> Open ja otsi üles kaust, kus see fail on ning siis selle sees olev fail).

Sulle avaneb mängu html kood, ole selle muutmisega ettevaatlik ja muudatusi tehes tähelepanelik!
7. Leia koodis üles joonisel näidatud koht ja kirjuta sinna jutumärkide vahele oma pildi nimi. Pilt peab kindlasti olema samas kaustas, kus creator.html fail ning sinna koodi sisse tuleb kirjutada pildi nimi koos faililaiendiga (see on tähelühend, mis asub peale punkti pildi nime taga).
8. Salvesta fail ja sulge.
9. Mine kausta, kuhu faili salvestasid ning klõpsa failil creator.html paremat hiireklahvi. Vali rippmenüüst "Open with" ja edasi mõni veebilehitseja, näiteks Google Chrome.

10. Ava fail veebilehitsejas.
11. Nüüd tuleb pildil olevate objektidega siduda küsimused. Hiljem, mängu mängides, kuvatakse vastajale küsimus ning tema peab pildil õiges kohas klõpsama.
Küsimuste sisestamiseks klõpsa pildil ning sisesta paremale tekkinud kastikesse küsimus või nimetus, mida mängija peab pildilt leidma.

12. Kui oled küsimuse sisestanud, siis märkad, et paremale ilmub tekst. Sisesta ära kõik küsimused, mida soovid küsida.
13. Ava nüüd Notepad programmiga fail template.html
14. Kopeeri pildi kõrvale tekkinud tekstiread. Ole tähelepanelik, et selekteeriksid välja AINULT need read, mitte kogu ekraanitäit!

15. Mine Notepadiga avatud template.html faili juurde ning kleebi see kood pildil näidatud kohale! Kirjuta koodi sisse ka mängu pealkiri (vt pilti) ning lisa pildi nimi (vt pilti).

16. Salvesta template.html fail ning sulge.
17. Ava fail template.html veebilehitsejaga (samamoodi, nagu avasid faili creator.html punktis 9.
18. Mängi mängu!

Juhend mängu loomiseks: http://www.scribd.com/doc/210459425/Silveri-mangu-loomine

Algallikas: https://www.smore.com/9c8q

Mängu avaldamine: http://www.scribd.com/doc/210469421/Silveri-mangu-avaldamine-GoogleDrive

Lehed