torek, 11. junij 2013

Scratch

Pa smo prišli do zadnje šeste teme našega E-portfelja! Zadnja tema je Scratch in programiranje animiranih računalniških iger. Izdelali bomo računalniško igro na temo spletnih brskalnikov. Igra morda nebo tako zelo poučna, vendar pa bo zato precej bolj zanimiva, kot pa če bi izdelal igro na temo kviza ali česa podobnega ;). Igrico bom izdelal v programu Scratch, ki je programsko okolje, ki je namenjeno začetnikom programiranja, da si pridobijo algoritemsko razmišljanje.

Skratka, še zadnjič...

Veselo na delo!


Zasnova igrice


Ideja je naslednja. V svetu internetnih brskalnikov živi glavni junak Hero, ki se prehranjuje z logotipi spletnega brskalnika Mozilla Firefox. Pri tem, pa ga nenehno preganjajo počasni logotipi Internet Explorerja in hitri logotipi Google Chroma. Herova naloga je, da poje vse logotipe Mozille Firefox in zbeži domov, prede ga ujamejo Explorerjevi ali Chromovi logotipi.

Naloga uporabnika pri tej igri je, da krmili Hera z navigacijskimi tipkami in mu pomaga opraviti zastavljeno nalogo.

Izdelava igrice v programu Scratch

 
Igrico sem izdelal v programu Scratch, ki ga lahko brezplačno naložite tukaj.

Za začetek lahko na polje vstavimo kakšen lih. To storimo tako, da kliknemo na "Nariši novo skupino slik", kot prikazuje slika 1.

Slika 1: Uvoz lika
 Nato izberemo "Uvozi" in poiščemo primenega junaka.

Slika 2: Uvoi

Sam sem izbral tega na sliki 3. Nekoliko sem ga še pomanjšal z orodjem, ki je na sliki obkroženo.

Slika 3: Pomanjšaj


Nadaljujemo lahko z vstavljanjem ozadja. To storimo tako, da kliknemo na "Stage" (točka 1), nato na "Ozadja" (točka 2) in nato "Uredi" (točka 3). Postopek je opisan na sliki x. Od tu nadaljujemo enako, kot pa pri likih.

Dodamo še druge like, v našem primeru nekaj logotipov različnih brskalnikov.
Prav tako dodamo še gradnik "Start", kjer bo naš Hero začel svoje potovanje in kvadrat, ki bo predstavljal njegov dom.

Sedaj lahko začnemo s "kodo".

Na spodnji sliki vidimo kodo, ki je dodeljena našemu Heru:

Slika 4: Koda za Hera
Prvi del kode pomeni, da če se hero dotakne kateregakoli logotipa Chroma ali Explorerja gre nazaj na start.

Drugi del kode pomeni, da se ob zagonu igre postavi nazaj na start.

Naslednji štirje deli kode služijo navigaciji Hera

Zadnji del kode pa služi temu, da če hero pride v dom pove, da je zmagal.


Sovražne brskalnike sem definiral takole:

Slika 5: Koda za sovražne brskalnike
Za Explorerjeve loge, pa sem uporabil nekaj počasnejše gibe


Za Mozilline logote, ki jih Hero poje, je koda takšna:

Slika 6: Koda za Mozilline logotipe

Za dom, pa je koda naslednja:

Slika 7: Koda za dom

To je vsa koda, sedaj igra deluje. Čestitke!

Izgled igre pa je takšen:

Slika 8: Končna podoba igre

 

Poročilo o igri


Igra poteka takole. Igralec mora najprej pobrati vse tri logotipe Mozille Firefox, pri tem pa se mora izogibati ostalim logotipom. Ko pobere vse tri logotipe se na sredini slike pojavi Herov dom. Hero mora iti v dom. Ko varno prispe v dom zmaga.
Hera se uprlavjla z navigacijskimi tipkami.

Igra je primerna za spoznavanje spletnih brskalnikov, saj vsebuje logotipe spletnih brskalnikov. Učenci skozi igro spoznavajo spletne brskalnike.


Gospod Chroziller pa nam je TUKAJ pričaral še povezavo do zagonske (.exe) datoteke naše igre.


Gospod Chroziller


Gospod Chroziller je še vedno užaljen, ker ni sme nastopiti v naši igri, vendar pa bi vam za konec našega potovanja po internetnih brskalnikih vseeno rad nekaj sporočil.


Zvok in zajem zaslona

Šolsko leto se bliža koncu, mi pa smo tik pred koncem in sicer pri peti, predzadnji temi. Tokratna tema je zvok in zajem zaslona. Ideja za zvok je sila preprosta. Vzel bomonekaj naključnih melodij in jih po občutku zmešal v nek glasbeni mix. Program ki ga bom uporabil pa se imenuje Audacity. Poizkusil bom narediti še nekaj sličic, ki bodo smiselno sovpadale z zvokom. Kako mi bo uspelo bomo videli ob koncu. Kar se tiče zajema zaslona, pa sem se odločil, da si pogledamo kako je s shranjevanjem gesel v spletnem brskalniku. Za primer sem vzel brskalnik Mozilla Firefox. 
Za to temo sem se odločil, ker sploh mlajši uporabniki ne vejo, da se shranjena gesla da enostavno pregledati v Možnostih brskalnika, zato je dobro, da jim to pojasnimo in jim pokažemo, kako se shranjeno geslo lahko odstrani.
Video bom posnel s programom Camtasia Recorder, nato pa ga bom obdelal v programu Camtasia Studio.

Veselo na delo!


Izdelava avdio posnetka v programu Audacity


Audacity je preprost program za obdelavo zvočnih posnetkov, ki ga lahko brezplačno prenesemo tukaj.

Program odpremo in za začetek moramo uvoziti vsaj en zvočni posnetek, to naredimo tako, kot prikazuje slika 1. Najprej kliknemo Datoteka, nato "Uvozi" in še "Zvok...". Poiščemo datoteko na računalniku in jo uvozimo.


Slika 1: Uvoz zvočnega posnetka

Dobro je da zapis zvočnega posnetka nekoliko povečamo. To storimo s povečevalnim steklom, ki je prikazano na sliki 2. Ko kliknemo na to orodje samo še klikamo na zvočni zapis, ki se ob vsakem kliku širi.

Slika 2: Povečevalno steklo

Pri prvem posnetku pustimo samo prvi nekaj sekund posnetka (slika 3), medtem ko preostali del posnetka odrežemo. To storimo tako, da ga označimo z orodjem, ki se nahaja nad povečevalnim steklom in označeni del preprosto izbrišemo ali odrežemo.

Slika 3: Izrezek

Del posnetka lahko skopiramo in ga večkrat vrinemo v posnetek, to smo storili na sliki 4.

Slika 4: Vrivanje

Nato vstavimo nov posnetek in odrežemo željeni del, ki ga bomo uporabili pri našem mixu (slika 5).

Slika 5: Nov izrezek

Nov izrezek pripepimo k zgornjemu posnetku (slika 6). Pazimo na lep prehod med obema posnetkoma. Po potrebi posneka na stičišču še nekoliko obrežemo (slika7.

Slika 6: Združitev izrezkov

Slika 7: Fin obrez


Neuporaben posnetek nato odstranimo iz izbora, tako kot kaže slika 8.

Slika 8: Odstranitev ostankov
Tako lahko dodamo še nekaj posnetkov, jih obrežemo in naredimo zanimiv mix.

Na posameznik prehodih lahko nastavimo tudi zviševanje ali zniževanje glasnosti (predvsem na koncu posnetka), to naredimo tako (slika 9), da  označimo željen del zapisa, nato pa kliknemo na Učinek->Zvišuj glasnost/Znižuj glasnost (slika 10).

Slika 9: Zviševanje glasnosti

Slika 10: Zniževanje glasnosti
Sedaj je mix končan in pripravljen da ga izvozimo. To naredimo tako, da kliknemo Datoteka->Izvozi...
Odpre se nam okno, kjer izberemo ime datoteke in format v katerega želimo shraniti posnetek (slika 11). Mi bomo izbrali kar mp3 format.

Slika 11: Izvoz datoteke

Nato se nam odpre okno (slika 12), kjer nastavimo lastnosti zvočnega posnetka.

Slika 12: Lastnosti datoteke

Če še nimamo naložene lame datoteke, nas program opozori na to, da ji moramo naložiti in nam ponudi tudi povezavo, da jo naložimo (slika 13).

Slika 13: Manjkajoča Lame datoteka

Pa smo končali.
Dodal bom še nekaj sličic, ki jih bom poizkusil uskladiti z zvokom, nato pa bom video objavil na Youtube in ga prilepil na blog.


Tukaj je naš video:



Gospod Chroziller


Gospod Chroziller pravi, da je nenormalno užival v zvočnem mixu, le da se mu še nekoliko vrti od norih akrobacij. Zato bo tokrat svoj topel nasvet izpustil.



Zajem zaslonske slike s programom Camtasia Recorder


O programskem okolju Camtasia sem nekaj več povedal že v prejšnji temi, tako da bom ta del tokrat kar izpustil in takoj prešel na bistvo, torej snemanje zaslona s programom Camtasia Recorder.

Ko odpremo program se nam odpre okno, kot ga vidimo na sliki 1. Pod točko 1 izberemo kako velik del ekrana bomo snemali, pod točko 2 pa zaženemo snemalnik. Snemati prenehamo z F10.

Slika 1: Začetek snemanja

Ko video posnamemo se nam odpre okno prikazano na sliki 2.

Slika 2: Konec snemanja
 Če želimo video shraniti kliknemo na Save and Exit, kot kaže slika 3.

Slika 3: Shranjevane

Odpre se nam okno, kjer izberemo, kam bomo video shranili (slika 4).

Slika 4: Izbira shranitve

Sedaj lahko začnemo video obdelovati v Camtasia Studio. Nekaj prijemov tega početja smo že obdelali v prejšnji temi, tako da bom sedaj pokazal samo tiste podrobnosti, ki jih prejšnjič nismo uporabili.

Prva taka stvar so učinki na kurzorja, kar vidimo na sliki 5. Kurzor lahko osvetlimo z rumeno obrobo, ga povečamo, lahko pa nastavimo tudo posebne učinke ob kliku.

Slika 5: Učinek kurzorja

V svojem videu sem spremenil tudi hitrost izrezka. In sicer sem hitrost 2x pomanjšal. To sem storil tako, da sem desno kliknil na izrezek in izbral možnost "clip speed", kot kaže slika 6.

Slika 6: Hitrost izrezka
Nato pa sem hitrost nastavil na 50% (sika 7).

Slika 6: Nastavitev hitrosti

Naslednja stvar, ki sem jo uporabil v videu je povečava izrezka. To storimo tako, da izberemo možnost "Zoom In", kot kaže slika 8 in nato z drsnikom (korak 2) nastavimo bližino videa.

Slika 8: Približanje videa

Zadnja stvar, ki sem jo še uporabil v posnetku je zameglitev dela zaslona. Glede na to, da sem z zaslonskim posnetkom zajel del, kjer so vidna gesla je dobro, da ta del zatemnim. To storimo tako, da izberemo možnost "Callout" kot kaže slika 9 in nato izberemo "blur" (korak 2). Gradnik nato ustrezno razpotegnemo čez video.

Slika 9: Zameglitev videa

Video le še sestavimo in shranimo, tako kot smo se to naučili v prejšnji temi.
Video bomo prav tako objavili na spletni strani Youtube.

Tukaj je naš video:



Gospod Chroziller

Video in ...tube

Kot četrto temo, bomo obdelali video in objavo tega videa na enem izmed ustreznih ...tube-ov. Ker je naša tema spletni brskalniki, bo tudi ta video narejen na temo spletnih brskalnikov. Razmišljal sem, kaj bi lahko prestavil v videu in prišel na idejo, ki je kar se spletnih brskalnikov tiče zelo uporabna in nam prihrani kar precej časa, če se te stvari poslužujemo. Govorim namreč o spletnih zaznamkih. S programom Camtasia Recorder bom posnel vodič, nato pa bom video obdelal v Camtasia Studio. Za konec bom končen izdelek objavil tudi na spletni strani Youtube.

Veselo na delo!


Izdelava videla v programskem okolju Camtasia


Programsko okolje Camtasia je sicer plačljivo, vendar pa nam je na voljo 30 dnevna bezplačna različica, ki jo lahko dobimo tukaj.

Kako posnamemo video bomo spoznali nekoliko kasneje. Tokrat se bomo naučili predvsem obdelave videla.

Odpremo Program Camtasia studio. Naj povem tudi, da so ostali programi za obdelavo videa (npr. Windows movie maker zelo podobni).

Za začetek želimo vstaviti v izbor nekaj slik in videov, to storimo tako, da klinemo na "Import medila", kot prikazuje slika 1 in vstavimo željene datoteke.

Slika 1: Vstavljanje medija v izbor

Za začetek videa najprej izberemo naslovni diapozitiv, kot kaže slika 2. Kliknemo na "Libary" (korak 1), nato izberemo mapo z naslovi (korak 2) na koncu pa še željeni naslovni diapozitiv (korak 3).

Slika 2: Izbira naslova

Naslov z miško potegnemo na časovnico, kot prikazuje slika 3.

Slika 3: postavitev naslova

Tako dodamo še druge gradnike. Sam bom recimo dodal še napis, ki bo opisal, kaj bomo v videu prikazali. Temu napisu želim spremeniti dolžino. To storim tako, da kliknem na rob gradnika in ga enostavno potegnemo na željeno dolžino (slika 4).

Slika 4: Razteg videa

Sedaj vstavimo nekaj video izrezkov in jih ustrezno oblikujemo, če želimo kak del izrezati enostavno kliknemo na rob videa in ga skrajšamo s potegom navznoter.

Na video lahko dodajamo tudi razne gradnike, kot so puščice, oblačke, besedilo. To storimo tako, kot prikazuje slika 5. Kliknemo na "Callouts" (korak 1), nato pa izberemo gradnik (korak2), tako da kliknemo nanj. Pojavi se nam na videu, kjer ga ustrezno oblikujemo (korak 3).

Slika 5: Vstavljanje puščice

Ko video po želji oblikujemo in smo zadovoljni s potekom videa lahko za konec dodamo še prehode med posameznimi diapozitivi. To storimo tako, da kliknemo na "Transitions", kot vidimo na sliki 6, izberemo prehod in ga vstavimo med dva diapozitiva s potegom miške.

Slika 6: Dodajanje prehodov

Za konec dodamo še zvok, tako kot prikazuje slika 7. Kliknemo na "Libary (korak 1) in dodamo pesem (korak 2).

Slika 7: Zvok

 To pa je vse, kar rabimo, da ustvarimo video, kot sem ga ustvaril jaz.

Video le še shranimo, tako, da izberemo "Produce and share" in video izvozimo v .mp4 formatu.

Tako je video končan, vendar pa ga bom še nekaj vrstic zadržal zase, ker bom video najprej objavil na spletni strani Youtube.


Dodajanje videa na spletno stran Youtube.


Odpremo spetno stran Youtube. Na spletno stran moramo biti predhodno prijavljeni s spetnim računom.
Video naložimo tako, da na spletni strani kliknemo na gumb prenesi, ki je na spodnji sliki označen s korakom 1, nato pa se nam odpre okno, kamor kliknemo (korak 2) in izberemo datoteko in jo odpremo (korak3).

Slika1: Izbira videa za prenos

Sedaj počakamo, da se nam video naloži. Nato lahko nastavimo nekaj lastnosti videa. Sam bom recimo izbral, da je video neobjavljen, tako da ga lahko vidijo samo tisti, ki dobijo povezavo do tega linka (Slika 2).

Slika 2: Lastnosti videa

Tako, video je shranjen. In sedaj ga lahko končno objavim na tej strani.


Video:




Gospod Chroziller


Gospoda Chrozillerja tokrat žal ne bomo mogli slišati, saj se mudi na računalniško konferenci v Miamiju. Z nami pa bo zagotovo že v prihodnji objavi. Do takrat pa lep pozdrav in prijetno učenje.

Spletna stran

Tretja tema našega E-portfelja je spletna stran. Spletna stran je zagotovo ena najbolj zanimivih računalniških aktivnosti, kar jih računalništvo ponuja. Je tudi eno najbolj uporabnih računalniških znanj. Dobra stvar vsega pa je, da enostavnih spletnih strani sploh ni težko narediti. Sam bom kreiral preprosto spletno stran, na temo spletnih brskalnikov. Vključil bom še CSS (Cascading style sheet) oblikovanje strani, izdelal pa jo bom v programu Notepad++ in sicer s html in css kodo. Stran ne bo nek estetski višek, bo pa zelo dober in nazoren vodič kako oblikovati html in css datoteko.

Veselo na delo!


Kreiranje spletne strani v programu Notepad++


Notepad++ je preprost program v obliki beležnice, ki zaznava ukaze različnih programskih in splenih jezikov. Brezplačno si ga lahko naložite tukaj.

Na začetku ustvarimo dva dokumenta in sicer enega s .html končnico, ki bo naša spletna stran ter drugega s .css končnico, ki bo naš css stil za oblikovanje strani. V mojem primeru bom začetno stran imenoval kar index.html, medtem ko bo CSS datoteka imenovana style.css.

Pa začnimo!

V html datoteko vstavimo značko za html dokument, značko za glavo in značko za telo, tako kot kaže slika 1.

Slika 1: Značke

Nato v glavo vstavimo nekaj ukazov. Prvi ukaz, ki ga na sliki 2 vidite v 3. vrstici nam poveča nabor znakov, tako da lahko uporabljamo tudi šumnike in podobne znake.
V 4. vrstici se nahaja povezava do naše CSS datoteke, v 5. pa je naslov spletne strani, ki se kasneje prikazuje v skrajnem zgornjem desnem robu brskalnika.

Slika 2: Glava

Nadaljujemo v telesu. Dodamo naslov celotne spletne strani. Sprememba je vidna na sliki 3 v 8. vrstici.

Slika 3: Naslov spletne strani

Sedaj začnemo urejati CSS datoteko. Datoteko odpremo, če je še nismo, jo še shranimo in vanjo napišemo kodo, ki jo vidimo na sliki 4.

Slika 4: Ozadje in naslov spletne strani v CSS

Najprej nastavimo ozadje spletne strani (od 1. do 5. vrstice), nato pa uredimo še naslov h1 (glavni naslov spletne strani) po lastnem okusu (od 9. do 16. vrstice). Več CSS ukazov si lahko poiščemo na internetu.

Nadaljujemo ponovno v html datoteki in sicer ustvarimo nekaj povezav za podstrani, kot vidimo na sliki 5. Povezav še nismo poimenovali, saj podstrani še nimamo. Podstrani bomo ustvarili tako, da bomo stran index.html shranili pod različnimi imeni, ampak šele ko bo osnovna oblika strani zaključena. To je majhen trik, da stvari, ki bodo na vseh straneh enake delamo samo enkrat.
Povezave so na sliki 5 od 9. do 12. vrstice. Značka razmak služi kot presledek med posameznimi povezavami, njeno funkcionalnost, pa bomo ustvarili v CSS datoteki.

Slika 5: Povezave

Nadaljujemo spet v CSS datoteki, kot vidimo na sliki 6.

Slika 6: Povezave v CSS datoteki

Razmak definiramo kot presledek 50ih pikslov. Z 'a' pa definiramo izgled povezav v naši spletni strani.

Sedaj priden a vrsto del urejanja samega besedila. Začnemo z naslovom podstrani. Najprej ga vstavimo v html datoteko (slika 7). Vstavimo tudi besedilo, ki ga želimo napisati. Več ga lahko dodamo pozneje. Besedilu smo dodali še značko "barvatexta", ki oblikuje besedilo, če je v tej znački. Značko bomo definirali kot že prej v CSS datoteki.

Slika 7: Dodajanje podnaslova in besedila v html datoteko

Nato pa ta dva dela spletne strani uredimo še vizualno v CSS datoteki, kot prikazuje slika 8.

Slika 8: Urejanje videza podnaslova in naslova v CSS datoteki

Tako, to je več ali manj vse, kar rabimo za našo spletno strani. Sedaj lahko spletno stran namnožimo tolikokrat, kot želimo imeti podstrani. Najbolj praktično je, da vnaprej napišemo imena vseh strani v povezave in jih šele nato ustvarimo, da so vse strani že v naprej povezane med sabo.

Za konec vam bom pokazal še, kako se v html jeziku v spletno stran vstavi slika. To prikazuje slika 9.

Slika 9: Vstavljanje slike

Tako, sedaj pa lahko začnemo z vsebinskim urejanjem spletne strani. Napišemo nekaj besedila, vstavimo nekaj slik, animacijskih slik itd...

Končni izgled moje strani pa si lahko ogledate TUKAJ.


Uporaba spletnih strani pri pouku


Spletne strani v šoli bi bile uporabne predvsem za to, da bi na njih pisali literaturo na bol doživet, zanimiv in vsem lažje dostopen način. Koristno bi bilo, da bi se literatura nahajala na spletnih straneh, ker bi se tako učenci naučili brskati po spletnih straneh in jih uporabljati. Spletna stran ponuja precej možnosti deljenja podatko in informacij na zelo enostaven način. Na spletno stran lahko prav tako pripenjamo datoteke.
Prav tako pa obstajajo posebne namenske spletne strani oz razna spletna mesta, kot so spletne učilnice, forumi, blogi, wikiji, ki vsak zase služijo svojemu namenu. Vsa ta spletna mesta so zelo uporabna v šolstvu za širjenje podatkov, literature, datotek, pa tudi komunikacijo in deljenje mnenj.


Nevarnost na spletu


Seveda pri brskanju po spletu na nas preži mnogo nevarnosti. Predvsem pa so tem nevarnostim izpostavljeni mlajši uporabniki, ki se jih še ne zavedajo v celoti. Zato je zelo pomembno, da učence podučimo o nevarnostih, kot so kraja in zloraba podatkov, razna lažna oglasna sporočila in mamljive ponudbe, neprimene vsebine itd...
Vendar pa menim, da moramo pri tem ohranjati neko zdravo mero, saj s svarjenjem ne smemo pretiravati. To pa je po mojem mnenju ened od problemov, ki se kar pogosto pojavljajo. Pogosto učitelji, pa tudi drugi viri informacij (mediji...), pretiravajo s svarjenjem in s tem prestrašijo otroke in tudi starše, ter jim dajejo lažni občutek ogroženosti. Tako recimo objava osnovnih osebnih podatkov, kot so rojstni datum in šola, katero učenec obiskuje, na spletnem omrežju Facebook ni tako kritična, kot opisujejo nekateri mediji.


Gospod Chroziller sporoča