keskiviikko 26. helmikuuta 2014

HTML-perusteet

HTML-opetus notepadia käyttäen on mielestäni hidasta ja siihen hommaan löytyykin valmiita verkkokursseja. Esittelen tässä nopeasti W3Schools-palvelun, joka on erittäin selkeä ja helppotajuinen. Sivusto on englanninkielinen, mutta opettajan johdolla käytynä ongelmia ei pitäisi tulla. Edustamallani koululla on ollut tapana opetella HTML vasta yhdeksännellä luokalla ja minulla on tällä hetkellä ATK-opetuksessa vain kahdeksasluokkalaisia. Käyn kuitenkin heidän kanssaan HTML-perusteet, jotta pääsemme tutustumaan Wikipedian muokkaukseen hivenen kivuttomammin.

W3Schoolsin etusivulta pääsee suoraan valitsemaan HTML Tutorial-linkin, joka sisältää HTML:n perusteet, XHTML:n, HTML5:n ja CSS:n perusteet. Etusivulla on myös linkit vastaaviin oppaisiin, joissa käsitellään montaa muuta web-ohjelmoinnissa tarvittavaa taitoa.

 Esimerkit ovat selkeitä ja niissä edetään hyvin pienin askelin.
Melkein jokaisessa kohdassa on "Try it yourself"-nappi, jolla saa käynnistettyä editorin. Editorissa pääsee muokkaamaan koodia helposti ja nopeasti.



Koska tekstiä on paljon ja se on englanniksi (osa omista oppilaistani koki tämän ongelmaksi), voi suuri osa tiedosta hukkua matkan varrella, vaikka koodiosaaminen tarttuisikin. Lopussa on 20 kysymystä, joilla voi testata tietojaan.
Jokaisen kappaleen yhteydessä on esimerkkejä, jotka on listattu omalle sivulleen. "Examples explained"-kohdassa esimerkit käydään läpi rautalangan kanssa, joten tämän sivun avulla kuka tahansa voi opettaa HTML-kielen perusteet.



Oppilailla oli valtavan hauskaa, kun huomasivat voivansa tallentaa esimerkiksi Facebookin aloitussivun koneelleen ja pystyvänsä muokkaamaan sen tekstejä haluamikseen.


Mikäli tämä kuulostaa sopivalta harjoitukselta, voi tämänkin tehdä ohjatusti. Kopioimalla jonkun verkkosivun lähdekoodi ohjelmaan esim Notepad++ (Windows) tai TextWrangler (Mac), voi sivulta etsiä tiettyjä tekstipätkiä ja muokata niitä haluamikseen.



Kun muokatun sivun tallentaa .html-muodossa, muutokset tulevat näkyviin. Nokkelimpia muutoksia tekevät joutuvat tutkimaan koodia hyvinkin paljon, jotta saavat muokattua esim. FB:n kirjautumislomakkeen vaihtoehdot haluamikseen.

Kuten sanoin, kävin omien oppilaitteni kanssa läpi vain perusteet Wikipedian kieltä varten. W3Schools-sivulta löytyisi kuitenkin ammennettavaa melkein kokonaiseksi lukuvuodeksi.  Ehkäpä joku innostuu ja kääntää tämän tärkeimmät osat suomeksi. ;)

tiistai 18. helmikuuta 2014

Koodaustunti ja Code.org

Tämä blogi on viettänyt hiljaiseloa joulukuusta saakka. Olemme käyneet oppilaitteni kanssa läpi Open Office-ohjelmistoa, FB-turvallisuutta ja tehneet tekstinkäsittelyharjoituksia. Pakollista pullaa, mutta nyt pääsemme taas tekemään jotain toivottua. Eli jatkamaan ohjelmointia. Tämä blogaus käsittelee Koodaustuntia ja sen valvomista. Kirjoitin tämän melkein kokonaan jo viime vuoden puolella, mutta unohdin viimeistellä ja lähettää tämän. Tässä tämä nyt vihdoin on.

Koodaustunti järjestettiin joulukuussa ja kävin sen läpi kaikkien oppilaideni kanssa. Ongelmien ratkominen on kuulemma paljon hauskempaa kuin matematiikka tai fysiikka, mutta vika voi olla myös minun pitämissäni matfys-tunneissa. Koodaustunti kulki ulkomailla nimellä "Hour of Code" ja sen kotisivuna on Code.org.

Scratchiä käyttäneille ensimmäiset tunnit ovat erittäin helppoja ja kivoja tehdä. Ensimmäisten tehtävien ideana on liikuttaa Angry Bird-hahmo possun luo käyttäen "liiku eteenpäin-" ja "käänny" käskyjä.



Kun tehtävä on suoritettu, näkyviin tulee onnittelulaatikko. Laatikossa on teksti "Näytä koodi", jota klikkaamalla saa näkyviin palikoista rakennetun JavaScript-koodin. Tämä kohta muuttuu mielenkiintoisemmaksi, kun tehtäviä edetään pidemmälle.


Ensimmäiset 20 tehtävää saa tehtyä noin yhdessä tunnissa, ellei jää pahasti jumiin johonkin tehtävään. Tehtävä numero 9 on osoittautunut niin hankalaksi, että se saattaa lannistaa vähemmän motivoituneet. Sen ohitettuaan oppilaat pääsevät ihan mukavasti vauhtiin. Tunneilla kannattaa noudattaa Hour of Code-sivulla ehdotettua tapaa, eli kohdatessaan ylitsepääsemättömän ongelman, hän kysyy apua ensin kolmelta muulta oppilaalta ja vasta sitten opettajalta. Tällöin opettaja saa keskittyä "Wilmaviesteihin" ja kaikkeen muuhun tärkeään. ;) Näiden 20 tehtävän jälkeen voi jatkaa vielä eteenpäinkin kirjautumalla sisään täällä.

Oppilaille ja opettajille on erilliset rekisteröitymislinkit sivun yläreunassa


Palveluun voi rekisteröityä myös Google-, FB-, Twitter- ja Hotmail-tileillä.

Opettaja voi tehdä täällä itselleen profiilin, josta pääsee rakentamaan luokille omat ryhmät. Jokainen ryhmä saa oman kuusikirjaimisen koodin, jonka syöttävät "Opettaja"-kohtaan kirjauduttuaan sisään. Tämän jälkeen opettaja voi etänä seurata oppilaiden kehitystä ja etenemistä. Väärät vastaukset ja yrityskerratkin näkyvät, joten näitä voi surutta antaa kotitehtäväksi. "En osannut"-tekosyy ei ihan riitä, opettaja voi katsoa mitä on tehty ja mikä meni pieleen. Yleisesti ottaen nämä ovat olleet oppilaiden mielestä mukavia tehdä, eikä varsinaista vahtimista ole tarvinnut tehdä.
Jokaiselle opetusryhmälle voi tehdä oman ryhmän, johon oppilaat kirjautuvat käyttäen ryhmän omaa koodia. Kuvassa koodit sotkettu.

Opettaja pääsee seuraamaan jokaisen oppilaan kehitystä ja etenemistä. Ongelmakohdat erottuvat heti.

Tämä sivusto toimii hienosti alustuksena Scratchille tai vaikka tapana antaa läksyä ATK-tunneilta.