Kotisivun tekokurssi

Kurssin idea on perehdyttää opiskelijat www -sivujen valmistukseen liittyviin seikkoihin.
Kurssilla luodaan katsaus HTML -esityskielen perusrakenteisiin, CSS -tyylikielen perusteisiin,sekä lopussa luodaan katsaus alan kuumimpiin trendeihin. Kurssin päätyttyä opiskelija ymmärtää HTML -sivujen perusrakenteen ja on valmistanut kurssilla yksinkertaiset nettisivut.

Kurssi alkaa torstaina 18.6. kello 11.00 ICT -luokassa ja kokoontumiset on kerran viikossa aina torstaisin.

Kurssi on avoin kaikille: Kurssi on maksuton TST Ry:n jäsenille ja henkilökunnalle.
Kurssille mahtuu ainoastaan 6 opiskelijaa ja paikat täytetään ilmoittautumisjärjestyksessä! Kurssilla on tilaa vielä 2 osallistujalle! Ilmottautuminen tapahtuu TST Ry:n toimitiloissa Kanslerintien infoon viimeistään keskiviikkona 17.6.2015 kello 14:00.

Linkki kurssin viralliseen tiedotteeseen TSTRY:n nettisivuilla.
Kurssilla valmistetaan kotisivuja ja kirjoitetaan koodia Muistiolla, joka löytyy luokan Windows -koneista. (Notepad) Koodia voi kirjoittaa millä tahansa tekstieditorilla.

Linkkejä ja oppimateriaalia

Ryhmän 2 linkit:

Viikko 1 – Eka kerta

Viikko 2 – Linkit ja taulukko

Viikko 3 – CSS

Viikko 4 – Lomaviikko

Viikko 5 – Kuumimpia trendejä ja Bootstrap -Framework -johdanto.

Viikko 5 – Kuumimpia trendejä ja Bootstrap -Framework -johdanto. – 16.7.2015

  • Bootrstrap on noussut maailman johtavaksi Front –end –kehityksen frameworkiksi. (Tilanne heinäkuussa 2015).
  • http://getbootstrap.com/ – Virallinen sivusto. Dokumentaatio ja tiedostot. Bootstrap on ilmaiseksi ladattavissa kaikille.
  • Kaikki Javascript Plug-in:it vaativat myös JQuerya, niin myös Bootstrap. Senkin saa ilmaiseksi osoitteesta https://jquery.com/download/

Tällä viikolla käydään läpi pääasiassa dokumentaatiota viralliselta sivustolta, ja keskitytään enemmänkin osioihin ”CSS” ja ”Components”. Javascript ja lomakkeet jätetään vähemmälle huomiolle.

Esimerkkejä Bootstrap –sivustoista:

https://bootstrapbay.com/blog/built-with-bootstrap/

Niinkuin huomaatte, vaikka pääasiassa on kyseessä class- attribuutin käytöstä, Bootstrapilla on mahdollista tehdä näyttäviäkin sivuja, jos vain osaamista, aikaa ja tahtoa riittää!

Viikko 4 – Lomaviikko (Ryhmät 1 ja 2)

Tämän viikon olen lomalla, joten tällä viikolla ei ole luentoja!

Viikko 3 – CSS – 02.07.2015

Saatan päivittää lomaviikkoni aikana (6.7.2015 – 12.7.2015 ) tarkemmin CSS – viikon materiaalia tähän, mutta tutustukaa aluksi vaikka CSS -materiaaliin W3schools.com -sivustolla, ja kerratkaa luentomonisteista sen lisäksi, että harjoittelette ulkoisen tyylitiedoston luontia vapaa -ajalla.

Viikko 2 – 25.6.2015 – Linkit ja taulukko

Tällä viikolla kerrattiin viime viikon lopulla ollutta kuvan lisäämistä sivulle. Uusina asioina tuli linkkien koodaus (sisäinen ja ulkoinen) ja <table> -tagin käyttö taulukoita luodessa. Oppitunnin lopussa kaivoin verkosta muutaman elämää helpottavan taulukko -generaattorin Google -hakutermillä “HTML Table Generator”.

Viikon linkit:

Kuvasta – W3 School -sivuston esitys img -tagista

Linkeistä – W3 School -sivuston esitys a -tagista. (Linkki -tagi)

Taulukosta – W3 School -sivuston esitys table -tagista.

Taulukko -generaattoreita verkossa:

Table -generaattori Quackit -sivustolla

Ei kannata hämääntyä tyyli -määrittelyistä.

Toinen Table -generaattori Textfixer -sivustolla.

 

Viikko 1 – 18.6.2015 – Eka kerta

Kurssilla aloitettiin tekemään yksinkertaisia nettisivuja Windowsin Muistiolla (Notepad), joka on voisi sanoa kantapään kautta oppimista. On hyvä oppia ja ymmärtää ensin joitain HTML –kielen perusrakenteita, vaikka käyttäisikin jotain WYSIWYG –html –editoria tai muuta kehittyneempää editoria kotisivujen valmistukseen.

WYSIWYG = What you see is what you get. (Linkki Wikipediaan.)

Esimerkkejä WYSIWYG –editoreista, joihin perusteiden jälkeen kannattanee tutustua: (Ei täydellinen lista)

About.com –sivusto, jossa on listattu ilmaisia, freeware –lisenssillä jaettavia WYSIWYG –HTML –editoreita.

Oma poimintani About.com –listalta:

Kompozer – Virallinen nettisivu (Hauskahko sanaleikki “Composer -säveltäjä” -sanasta…)

Lisäksi on olemassa joitain maksullisia ohjelmistoja, joista tarjotaan myös ilmaisia kokeiluversioita, jotka toimivat rajoitetun ajan.

Omat poimintani maksullisista HTML –editori –ohjelmistoista:

JetBrains Webstorm – Tehokas työkalu ihan ammattilaistenkin käyttöön. Jetbrains Webstormin valmistajan virallisilta sivuilta saa ladattua rajoitetun ajan voimassa –olevan kokeiluversion. Rajoittamattoman version, eli täyden lisenssin hinnat löytyvät nettisivuilta, jos kiinnostusta löytyy.

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s