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