Etunimi.Sukunimi

Salasana

ATK-opetus

Opa

Vielä keskeneräinen. Tähän tulee ohjelmien käyttöohjeita koulun vaatimustason mukaisesti. Kuvia ei vielä toistaiseksi tule, harmi, mutta kuvien kanssa on mietintämyssy käynnissä. Työohjeet ovat muualla. Valitse ohjelma listasta.

Ohjelmat ovat joko avoimia tai muuten vapaita eli ilmaisia. Kaupallisia, maksullisia softia ei harrasteta täällä.

html- ja nettiohjelmointi

Linkki ohjelman sivulle: http://www.w3schools.com/

Lyhyet ohjeet

Yleistä

Käytämme html5-standardia css-tyylitiedostojen kanssa. Modernia kamaa, siis. Myös javascript kuuluu tähän kastiin.

Vihje 1/2

edellinen seuraava

1

Html, CSS ja JavaScript

HTML on sivunmerkkauskieli, eli nettiselain osaa lukea sitä ja näyttää sen joko nätisti tai vähemmän nätisti.

CSS puolestaan kertoo, miten ne näytetään. HTML-kielellä asiat ilmaistaan laatikoina, div:einä, ja css kertoo mihin ne tulevat, minkä värisenä ja vaikka mitä muuta. JavaScript muuttaa livenä, reaaliaikaisesti nettisivun asioita. 

Töiden ohjeet


jQuery-ohjelmointi I

Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).


jQuery-ohjelmointi III

Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).


jQuery-ohjelmointi IV

Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).


jQuery-ohjelmointi osa II

Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).


jQuery-ohjelmointi V

Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).


jQuery-ohjelmointi VI

Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).


Oma sivusto I

Työn ohjeet: Tee oma sivusto, johon laita kuvia yms. 


html: alku

Työn ohjeet: Tee HTML5-standardiin perustuva html-sivu, mikä tulostaa ruudulle

Lisää myös tyylit eli html-tiedoston alkuun <style>-tagi, jolla muutat


Lisää kuva

Työn ohjeet: Lisää kuva aikaisemmin tekemääsi html-sivustoon.


Hakusanat image html kertoo kaiken, tai voit kokeilla <img src=""> -tagia


Lista ja valikko

Työn ohjeet: Listan saat tehty <ul>-tagilla (unsorted list).  Listan alkiot ovat <li>- eli list item -tagien sisällä. Myös järjestetty lista on olemassa. Tee yksinkertainen lista.


Listat ovat käteviä ja esim. valikot tehdään nykyään listoilla ja css:llä. Tee hieno, nykyaikainen valikko listoilla ja css:llä. Katso netistä ohjeita. 


div:n leveys

Työn ohjeet: Tee css-määrittelyt, millä saat div-blokin koon muuttumaan järkevästi sekä siinä olevan tekstin että käytettävissä olevan ruudun leveyden mukaan.


display: inline-block


VL: dynaaminen palstoitus (kännykkä/ tietokone)

Työn ohjeet: http://www.luntti.net/atk-ohjeita/dynaamisetpalstat.html


Taustakuvan koko

Työn ohjeet: Tutki, miten css:llä saat ladattua eri päätelaitteille (tabu, kännykkä, tietokone) oman kokoisen (esim. 300px, 600px, 1024px, 2048px) taustakuvan. Pieni skaalaus sekaan.


jQuery

Työn ohjeet: Lataa netistä jQuery plugini ja koita saada se toimimaan koodissasi.


Bouncing-efekti

Työn ohjeet: Tee html5-sivu, joka bouncaa diviä klikatessasi sitä. Ohjeita, jos tarvitset, löytyy sivulta


http://viralpatel.net/blogs/jquery-bounce-effect-bounce-html-js/


jQuery (JS): Kellonaika

Työn ohjeet: Tulosta kellonaika ja pvm ruudulle. Käytä javascriptin Date funktiota ja aiempaa tehtävää, missä muutit div:n sisältöä.

Date-funktion käyttöohjetta löytyy esim. http://www.w3schools.com/jsref/jsref_obj_date.asp tai http://www.w3schools.com/js/js_dates.asp

Kannattaa huomata, että kirjoittamiseen nuo käyttivät hankalampaa javascriptin tapaa. jQuery helpottaa sitä hirveästi.


jQuery: dynaaminen teksti

Työn ohjeet: Muuta jQuery:llä jonkun div:n sisältöä. Eli nappia painamalla, teksti muuttuu. Katso ohjetta esim. http://api.jquery.com/html/.


Videon skaalaus

Työn ohjeet: Tee html5-sivustoon mobiililaitteille, tabletille ja tietokoneruudulle skaalautuva videoframe.


<p>Selvitä, mikä on mahdollista.</p>


bouncing numeroilla

Työn ohjeet: Jatka bouncing-työtä fiksaamalla se sellaiseksi, että laatikoissa on kuin kännykän näytössä numerot 1-9 ja jokainen on hieman eri näköinen ja jokaista klikkaamalla se bouncaa.


sivun muotoilu: linkkipalkki vasemmalle

Työn ohjeet: HTML5- ja css:llö jatka edellistä sivua,  mihin laitat div-elementtejä sisäkkäin. Sen jälkeen css:llä muutat sisemmän elementin sijaintia, leveyttä jne.


jCanvas

Työn ohjeet: Lataa jCanvas ja koita saada se toimimaan. Yritä piirtää kuva.


jCanvas: laatikko

Työn ohjeet: Piirrä jCanvas:lla punainen laatikko melkein keskellä selaimen ikkunaa.


jCanvas: auto

Työn ohjeet: Piirrä jCanvaksella auto. Käytä laatikoita, ympyröitä, eri värejä ja kaikkea.


jCanvas: auto

Työn ohjeet: Piirrä jCanvaksella auto. Käytä laatikoita, ympyröitä, eri värejä ja kaikkea.


jCanvas: hiirtä seuraava auto

Työn ohjeet: Tee jCanvas-auto, mikä seuraa hiirtä.


jCanvas: liikkuva auto

Työn ohjeet: Muuta autosi funktioksi, ja vaihda x-koordinaatit muuttujaksi x.


Tee silmukka (for loop) ja siten laita auto kulkemaan ruudun poikki. Kun auto on mennyt ruudun poikki, pistä se tulemaan toisesta reunasta takaisin.


Tj-kalenteri 1

Työn ohjeet: Tee kaunis nettisivu, jossa näkyy (1) kaikki jäljellä olevat päivät.


Tässä on siis 5 eri työtä. Aloita (1):stä, jatka seuraavaan jne. Jokaisesta saat palautuksen.


Tj-kalenteri 2

Työn ohjeet:

Tee kaunis nettisivu, jossa näkyy (1) kaikki jäljellä olevat päivät ja (2) viikonloput poistettu.

Tässä on siis 5 eri työtä. Aloita (1):stä, jatka seuraavaan.


Tj-kalenteri 3

Työn ohjeet:

Tee kaunis nettisivu, jossa näkyy (1) kaikki jäljellä olevat päivät, (2) viikonloput poistettu ja (3) pyhäpäivät poistettu.

Tässä on siis 5 eri työtä. Aloita (1):stä, jatka seuraavaan.


Tj-kalenteri 4

Työn ohjeet:

Tee kaunis nettisivu, jossa näkyy (1) kaikki jäljellä olevat päivät, (2) viikonloput poistettu, (3) pyhäpäivät poistettu ja (4) tet-viikko poistettu.

Tässä on siis 5 eri työtä. Aloita (1):stä, jatka seuraavaan.


Tj-kalenteri 5

Työn ohjeet:

Tee kaunis nettisivu, jossa näkyy (1) kaikki jäljellä olevat päivät, (2) viikonloput poistettu, (3) pyhäpäivät poistettu, (4) tet-viikko poistettu, (5) muut koulun vapaat poistettu.

Tässä on siis 5 eri työtä. Aloita (1):stä, jatka seuraavaan.


Kertolasku

Työn ohjeet: Tee php:lla kertolaskuohjelma formeilla ja $_POST:n avulla. 


VL: kytke nettsivu tietokantaan

Työn ohjeet: Php toimii ja tietokanta on tehty. Siis kytke tietokanta php:llä nettisivuun. Sitä varten teet uuden tiedoston, vaikka nimeltä tietokanta.php, johon talletetaan tarvittavat funktiot.

Tietokanta.php luetaan nettisivun alussa php:llä: <?php require_once 'tietokanta.php' ?> Ja sitten kytketään teitokanta päälle ja luetaan tiedot.

Tiedot näytetään html-sivulle.

Pyytäkää apua.


VL: WAMP eli tietokanta- ja php-serveri

Työn ohjeet: Asenna tietokoneelle WAMP. Luultavasti tarvitset minun tunnuksiani. Tätä tullaan tarvitsemaan, jotta saadaan luettua ja talletettua Välkkäliigan tilastot tietokantaan.


Kokeile weppipaneelia ja yritä luoda tietokantaa.

Yritä saada nettiselaisemsta php toimimaan, eli se perus-php-sivu. phpinfo(). Sitä varten pitänee selvittää, mihin hakemistoon talletetaan.


laskukone

Työn ohjeet: Lisää checkboxit, jotta voit valita laskun tyypin. Vaikka nelilaskin tai viisilaskin. 


Potenssilasku

Työn ohjeet: Sama kuin kertolasku, mutta pow-funktiolla.


Download

Työn ohjeet: Tiedostojen/ linkkien download-lataus serveriltä omalle koneelle.

Uploadaus vaatii php:tä, mutta ei ole vaikea toteuttaa.


MySQL/PDO

Työn ohjeet: Tallenna, tee ja tutki MySQL- ja PDO-skriptejä.


Tiedostonjakopalvelin

Työn ohjeet: Rankenna tiedostonjakopalvelin.

  • Tiedoston tallentaminen palvelimelle
  • Tiedoston lataaminen palvelimelta
  • PHP sivu, joka listaa tallennetut tiedostot
  • DB, joka pitää kirjaa tiedostoista
  • + käyttäjien hallinta ...


VL: sivuston suunnitelua

Työn ohjeet: Suunnittele Jyrkin välkkäliigaan tulosten esittämiseen hyvännäköinen esityssofta, mikä

Samalla html-sivulla saisi näkyä molemmat.

Sijoita sinne siis

Toetuta HTML:llä, CSS:llä. Tee kaikki kolme omilla div-elementeillä. Tutki miten ruudun leveys vaikuttaa niiden sijoitteluun. Keksi sijoitukset, pistepörssi ja otteluohjelma. Ne luodaan myöhemmin automaattisesti PHP:llä sivulle.

Tee yhteistyössä muiden (Riku, Eero, Tuomo, ?) kanssa.


Haluatko aivan varmasti tehdä tämän tehtävän?