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ä.
Linkki ohjelman sivulle: http://www.w3schools.com/
Käytämme html5-standardia css-tyylitiedostojen kanssa. Modernia kamaa, siis. Myös javascript kuuluu tähän kastiin.
edellinen seuraava
HTML on sivunmerkkauskieli, eli nettiselain osaa lukea sitä ja näyttää sen joko nätisti tai vähemmän nätisti.
Työn ohjeet: Free Code Camp. Osa I.
Työn ohjeet: Ka href="https://www.freecodecamp.org/">Free Code Camp. Osa II.
Työn ohjeet: Free Code Camp. Osa 3
Työn ohjeet: Free Code Camp. Osa 4
Työn ohjeet: Free Code Camp. Osa I.
Työn ohjeet: Suunnittele ulkoasu koulun infotv:lle. Se saa olla sekä pysty- että vaakaversio (ruudulla ja kännykkään). Siinä saisi näkyä ainakin lämpötila, kellonaika, tämän päivän/ viikon tulevat kokeet, ruokalista ja pyörivä kuvakollaasi.
Työn ohjeet: Tee HTML5-standardiin perustuva html-sivu, mikä tulostaa ruudulle
Lisää myös tyylit eli html-tiedoston alkuun <style>-tagi, jolla muutat
Työn ohjeet: Lisää kuva aikaisemmin tekemääsi html-sivustoon.
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.
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.
Työn ohjeet: http://www.luntti.net/atk-ohjeita/dynaamisetpalstat.html
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.
Työn ohjeet: Lataa netistä jQuery plugini ja koita saada se toimimaan koodissasi.
Työn ohjeet: Tee html5-sivu, joka bouncaa diviä klikatessasi sitä. Ohjeita, jos tarvitset, löytyy sivulta
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.
Työn ohjeet: Muuta jQuery:llä jonkun div:n sisältöä. Eli nappia painamalla, teksti muuttuu. Katso ohjetta esim. http://api.jquery.com/html/.
Työn ohjeet: Tee html5-sivustoon mobiililaitteille, tabletille ja tietokoneruudulle skaalautuva videoframe.
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.
Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).
Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).
Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).
Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).
Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).
Työn ohjeet: jQuery-ohjelmointiopas. Yhteensä kuusi (6) osaa (unit).
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.
Työn ohjeet: Lataa jCanvas ja koita saada se toimimaan. Yritä piirtää kuva.
Työn ohjeet: Tee oma sivusto, johon laita kuvia yms.
Työn ohjeet: Piirrä jCanvas:lla punainen laatikko melkein keskellä selaimen ikkunaa.
Työn ohjeet: Piirrä jCanvaksella auto. Käytä laatikoita, ympyröitä, eri värejä ja kaikkea.
Työn ohjeet: Piirrä jCanvaksella auto. Käytä laatikoita, ympyröitä, eri värejä ja kaikkea.
Työn ohjeet: Tee jCanvas-auto, mikä seuraa hiirtä.
Työn ohjeet: Muuta autosi funktioksi, ja vaihda x-koordinaatit muuttujaksi x.
Työn ohjeet: Tee kaunis nettisivu, jossa näkyy (1) kaikki jäljellä olevat päivät.
Työn ohjeet:
Työn ohjeet:
Työn ohjeet:
Työn ohjeet:
Työn ohjeet: Tee php:lla kertolaskuohjelma formeilla ja $_POST:n avulla.
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.
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.
Työn ohjeet: Lisää checkboxit, jotta voit valita laskun tyypin. Vaikka nelilaskin tai viisilaskin.
Työn ohjeet: Sama kuin kertolasku, mutta pow-funktiolla.
Työn ohjeet: Tiedostojen/ linkkien download-lataus serveriltä omalle koneelle.
Uploadaus vaatii php:tä, mutta ei ole vaikea toteuttaa.
Työn ohjeet: Tallenna, tee ja tutki MySQL- ja PDO-skriptejä.
Työn ohjeet: Rankenna tiedostonjakopalvelin.
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.
Työn ohjeet: Tee interaktiivisia tehtäviä osoitteesta www.freecodecamp.org/learn/responsive-web-design/ Palauta kuvaruutukaappaus
Työn ohjeet: Tee interaktiivisia tehtäviä osoitteesta www.freecodecamp.org/learn/responsive-web-design/ Palauta kuvaruutukaappaus
Työn ohjeet: Tee interaktiivisia tehtäviä osoitteesta www.freecodecamp.org/learn/responsive-web-design/ Palauta kuvaruutukaappaus
Työn ohjeet: Tee interaktiivisia tehtäviä osoitteesta www.freecodecamp.org/learn/responsive-web-design/ Palauta kuvaruutukaappau
Haluatko aivan varmasti tehdä tämän tehtävän?