JWT 2016 Johdatus www-tekniikoihin 5 op Aulikki Hyrskykari (luennot) sposti: Aulikki.Hyrskykari@uta.fi Antti Sand (harjoitukset) sposti: Antti.Sand@uta.fi 1
Luento 1 o Kurssin sisältö o Kurssin järjestelyistä kurssimateriaalit: on line / kurssikirjat opetus ja kurssin suoritus kurssilla käytettävät työkalut o Web terminologiaa o HTML-kertausta (HTML5) HTML-elementti Globaalit attribuutit HTML Syntaksi koodin kirjoitustyyli, validointi HTML5, semanttinen merkkaus interaktiiviset elementit DOMista (Document Object Model) alustavasti 2
Kurssin sisältö (karkeasti,voi muuttua) www-sivujen toteuttamiseen liittyvät tekniikat kehittyvät hurjaa vauhtia, aktiivisen tiedon hakemisen asenne tärkeä o HTML5&CSS kertausta ja täydennystä (CSS3) o Vierailuluento ti 15.3. Antti Mattila / Futurice työelämänäkulman webkehitykseen, tämän hetkisiä tekniikoita ja trendejä. o JavaScript perusteet o DOM o Tapahtumat ja tapahtumankäsittely o JavaScript funktiot, objektit ja metodit o jquery o Rajapinnoista (HTML5 JavaScript APIs) o AJAX ja JSON + (mahdollisia erityisaiheita) 3
Kurssin oheismateriaalia: Internet o Web on pullollaan (todella!) selainohjelmointiin liittyviä dokumentteja ja muita sivustoja, tutoriaaleja, työkaluja ja artikkeleita o Virallinen totuus: W3C, HTML5 (W3C-standardointiprosessi): W3C HTML5 Recommendation (28 Oct 2014) : https://www.w3.org/tr/html5/ CSS present status: https://www.w3.org/tr/css/ o Muita (HTML, CSS, JavaScript, DOM, ) Web Platform Docs: http://docs.webplatform.org/wiki/ webin tärkeimpien kehittäjien yhteisesti ylläpitämä sivusto myös virallinen (W3C mukana yhteisössä) MDN, Mozilla Developers Network: https://developer.mozilla.org Web Platform Technologies: HTML, CSS, JavaScript) erinomaisia tutoriaaleja W3Schools: http://www.w3schools.com/ interaktiivisia esimerkkejä, erittäin näppärä kokeilualusta 4
Kurssin oheismateriaalia: Kirjoja o Jon Duckett (2014): JavaScript & jquery: interactive frontend web development o Stoyan Stefanov and Kumarru Chetan Sharma (2013): Object-Oriented JavaScript 5
Opetus o o o o o o o 12 luentokertaa: ti 10-12: PinniB1096, to 14-16: PinniB1097 7 harjoitusta: pe 10-12: Linna ML51, ma 12-14: TietoPinni ML9 harjoitusryhmiin voi mennä saamaan apua harjoitusten teossa, niihin ei ole pakko osallistua Tekemällä harjoitukset H1 ja H2 ryhmissä pyritään varmistamaan, että kaikki pääsevät kurssilla vauhtiin H1: HTML/CSS kertausta ja täydennystä, H2:JavaScript-ohjelmoinnin alkeita ryhmässä hyvä web-sivujen tekijä ja hyvä ohjelmoija ryhmän palauttaa saman ratkaisun, mutta jokainen julkaisee ratkaisun omalla kotisivullaan ryhmä vastuussa siitä, että kaikki saavat ratkaisun julkaistuksi tehdyksi, kaikki ryhmän jäsenet saavat saman pistemäärän ratkaisuja kannattaa tehdä itsenäisesti pari päivää, ja sen jälkeen kokoontua ryhmän kanssa tekemään yhdessä eteenpäin, ja tekemään tekemättä jääneitä yhdessä paras tapa oppia jokin asia on opettaa se jollekulle toiselle Loput harjoitukset (H3-H6) kukin tekee itse jos ryhmä toimi hyvin, voi edelleen kokoontua pohtimaan ratkaisuja mutta ei saa jättää samaa työtä saman työn jättäminen katsotaan kopioinniksi Ratkaisut julkaistaan web-sivuina yliopiston palvelimella ja sivun osoite palautetaan Wetoon Palautusajan jälkeen kaikki pisteyttävät oman työnsä annettujen malliratkaisujen pohjalta + yhden vertaistyön Harjoitustyön tehtävänanto jaetaan huhtikuun puolenvälin jälkeen 6
Kurssin suoritus o Kurssin arvosanaan vaikuttavat osasuoritukset viikkoharjoitukset 40% harjoitustyö 40% tentti 20% o Tentti lähinnä testaa sen, että viikkoharjoitukset ja harjoitustyö on tehty itse tentti ei ole vaikea niille, jotka ovat tehneet kurssityöt itse, mutta ellei ole tehnyt tentistä tuskin pääsee läpi) 7
Kurssilla käytettävät järjestelmät o WETO (https://weto.sis.uta.fi/weto5) Luennot Harjoitukset: tehtävänannot ratkaisut voi tehdä aina toimiviksi ensin omalla koneella, ja julkaista ne sitten (ellei toisin ohjeisteta) yliopiston palvelimella, esim. http://people.uta.fi/~sukunimi.etunimi.x/jwt/harjoitukset/h1t1.html Harjoitukset: palautukset Wetoon palautetaan tekstitiedosto, jossa julkaistujen ratkaisujen osoitteet o MOODLE (https://learning2.uta.fi/course/view.php?id=8445) Moodlessa keskustelufoorumi, TIETA9 Johdatus www-tekniikoihin, kurssiavain: jwt16 muissakin selaimissa löytyy vastaavanlaiset työkalut o Yliopiston palvelimen käyttö Et ole ole julkaissut sivuja yliopiston palvelimella? ohjeet sivujen julkaisuun, kotisivuohje: https://intra.uta.fi/portal/group/tietopankki/kotisivuohje ohjeita T3-kurssin materiaalista: oikeuksien haku, ilmoitus 6.10. osoitteessa: http://www.uta.fi/sis/tie/t3/2015-syksy/ajankohtaista.html julkaiseminen webissä (Luku 3) http://www.sis.uta.fi/~jwt/16/res/julkaiseminen-webissa.pdf 8
Kurssilla käytettävät työkalut o HTML/CSS/JavaScript editori Sublime Text 3 ilmainen kurssi (hups! ennen oli kokonaan ilmainen, osat löytyvät YouTubesta edelleen) http://code.tutsplus.com/courses/perfect-workflow-in-sublime-text-2 Muita editoreitakin saa toki käyttää: Notepad++, Netbeans, jne. o Selaimeen integroidut webkehittäjätyökalut käytetään luennoilla Chromen työkaluja (Developer Tools, F12) muissakin selaimissa löytyy vastaavanlaiset työkalut o Demoilutyökaluja, esim. JSFiddle W3School 9
Web terminologiaa: selain, selainmoottori, HTTP o Selain on asiakasohjelma (client program, esim. Firefox, Chrome, ), joka pyytää (ja saa) sivuja, renderöi sivut, suorittaa skriptejä HTTP on yksi protokollista, joita käytetään koneiden keskinäiseen kommunikointiin (FTP, telnet, ) huolehtii virheettömästä tiedon siirtämisestä käyttää sivujen renderöintiin selainmoottoria (rendering engines, web browser engines) Chrome, Safari: WebKit (-webkit) Firefox: Gecko (-moz) IE: Trident (-ms) Opera: Presto (-o) 10
Web terminologiaa: Palvelin, Intenet o Palvelin on tietokone, joka saa wwwsivupyyntöjä asiakaskoneilta, ja toimittaa sille takaisin sivuja palvelimelle tallennettuja sivuja usein lennossa dynaamisesti tietokannan ja ohjelmistojen avulla generoituja sivuja DNS-palvelin (domain name system), erityinen palvelin, joka muuntaa URLosoitteen IP-osoitteeksi o Internet on globaali infrastruktuuri joka yhdistää palvelin- ja selaintietokoneet mahdollistaa esim. www:n toiminnan Database Database Web Service 11
Dynaamisesti muodostettavat www-sivut o Alkuaikoina palvelimilla tallessa staattisia sivuja joita pyynnöstä lähettivät selaimella o Nykyisin HTML tuotetaan palvelimella: back-end web programming käyttäen hyväksi palvelimelle tallennettuja tietokantoja selaimessa: front-end web programming Database Database Web Service 12
Selainohjelmointi Kolme yhdessä toimivaa standardia ( kieltä ) o HTML hypertext mark-up language kuvaa sivun sisällön ja rakenteen o CSS3 cascading stylesheets kuvaa sivun esitysmuodon o JavaScript - suoraan selaimessa tulkittavaa ohjelmakoodi saa aikaan toimintaa selaimessa 13
Content Management System (CMS ) o Sisällönhallintajärjestelmä kehitetty digitaalisen informaatiosisällön hallinnan helpottamiseksi o Tietokanta ja siihen liitetty sivunmääritystyökalupakki, jonka avulla sivuston toteutus, päivittäminen ja ylläpito helpottuu o Sivun esitysmuodon pääsee määrittelemään interaktiivisesti HTML ja CSS muodostetaan automaattisesti o WordPress webin laajimmin käytetty sisällönhallintajärjestelmä 14
Mikä on HTML5? 1) Suppeampi käsitys HTML-kielen uusi kehitysvaihe kehitystyön aloitti WHATWG Web Hypertext Application Technology Working Group (Mozilla, Opera ja Apple) huolissaan, ettei W3C:n XHTML2-kehitys ollut tarpeeksi yksityiskohtaista selainvalmistajat toteuttivat omia lisäominaisuuksiaan W3C otti jatkaakseen HTML5:n kehitystyötä 2006 (XHTML2 kehitys lopetettiin) WHATWG edelleen olemassa ja kehittää versiota HTML5.1 ( living HTML ) 15
Mikä on HTML5? 2) Laajempi käsitys: Interaktiivinen HTML5-kielen piirteitä hyväksi käyttävä sovellus sovellus, joka toimii selainmoottorinperustalla kehitettiin vastaamaan mobiililaitteiden haasteisiin vastineeksi laitekohtaisille tai suljetuille (FLASH) tekniikoille käyttää avoimia tekniikoita: HTML, CSS, JavaScript 16
Yksinkertainen HTML-dokumentti headelementti h1- elementti <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>html-sivu</title> </head> <body> <h1> Elementtejä ja attribuutteja </h1> <p> Tällä sivulla on otsikko ja kaksi kappaletta (tämä on kappaleista ensimmäinen). </p> <p> Tämä on <em>toinen</em> kappale ja tässä on kuva <a href="http://www.visittampere.fi">tampereesta</a><br> <img src = "img/01-tampere.jpg" alt="tampereen Hämeensilta"> </p> </body> </html> http-, src- ja alt-attribuutit o Elementtejä ja attribuutteja o Palvelimelle vietynä tulee julkaistuksi webissä o Voidaan kuitenkin katsoa myös samalle koneelle tallennettuna suoraan selaimessa 17
HTML elementti attribuutti (attribute) <p id="tunnus">elementin sisältö</p> alkutunnus (start tag) lopputunnus (start tag) o Elementillä voi olla useita (tai ei yhtään) attribuuttia: [attribute] * o Attribuuttien avulla välitetään lisätietoa siihen miten elementti piirretään (renderöidään) sivulle o Elementti voi olla tyhjä, jolloin lopputunnus puuttuu esim. <img src="img/kuva.png /> 18
Globaalit attribuuti o Kaikille elementeille voi antaa minkä tahansa gobaaleista attribuuteista o Kullekin elementille määritelty erikseen mitä muita attribuutteja elementti voi saada o Globaalit attribuutit ovat accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title, translate o tärkeät attribuutit class ja id 19
HTML5 syntaksi https://www.w3.org/tr/html5/syntax.html o Syntaksi on hyvin salliva verrattuna aiempaan versioon (XHTML) esimerkiksi joskus lopputunnuksen saa jättää pois syntaksissa määritelty miten selaimen tulee se tulkita o Usein vaarallista (!) käyttää tätä sallivuutta hyväkseen esimerkiksi: <p class=important warning> </p> <p class="important warning"> </p> ensimmäisessä p kuuluu luokkaan important ja sillä on boolean-attribuutti warning toisessa p kuuluu kahteen luokkaan, important ja warning o syntaksin mukaan attribuuttien arvot voivat olla joko hipsuissa, lainausmerkeissä tai ilman erottimia ympäröi kuitenkin aina arvot lainausmerkeillä: attribuutin-nimi = "arvo" 20
Koodin kirjoituksen tyylisäännöt o Koodin kirjoituksessa paljon yleisesti hyväksyttyjä tyylisääntöjä nimeämiskäytännöt, ohjelmistotaloissa yleensä talon omat tyylisäännöt, joita tulee noudattaa ks. esimerkiksi Google: https://google.github.io/styleguide/htmlcssguide.xml (kommentointi: http://www.sitepoint.com/google-html-css-javascript-style-guides/) W3School: http://www.w3schools.com/html/html5_syntax.asp o Kyse paljon isommasta asiasta kuin pelkästä hyvästä tyylistä omasta mielestä hyvä ja yhtenäinen tyyli parempi kuin ei mitään mutta se ei riitä: Paul Jones: Why Coding Standards Matter? isoissa projekteissa joutuu usein ottamaan nopeasti toisen kirjoittama koodi haltuun mikä on minusta hieno on toisen mielestä raivostuttava jokaisen omasta tyylistä ei voi tehdä standardia Nicholas Zakas: Why Coding Style Matters? o Erityisen tärkeää sallivassa HTML5:ssa (sallivuuteen pätevät syyt) 21
Validointi (!) o Validointi tärkeätä tuo esiin virheitä, jotka muuten jäisivät huomaamatta useimmiten selaimet renderöivät sivun virheistä huolimatta virheellisen koodin tulkinta vaihtelee eri selaimissa o HTML Validointi http://validator.w3.org/ koodin voi viedä validaattoriin antamalla julkaistun html-sivun osoite uploadaamalla html-tiedosto kopioimalla koodin leikepöydän kautta o CSS Validointi https://jigsaw.w3.org/css-validator/validator.html.en jos viedä css-koodin tai julkaistun html-sivun osoitteen, jolloin myös sivuun liitetty CSS-koodi validoidaan 22
JWT-koodaussäännöt: HTML / CSS attribuuttien arvot aina lainausmerkkeihin ("kaksoishipsuihin") elementtien nimet pienellä, esim: <html> ei: <HTML> luokkien ja tunnusten nimet merkityksellisiä, sanojen erotus väliviivalla, esim: <p class="tunnistus-virhe" > ei: <p class = punainen > koodirivit mahdollisuuksien mukaan alle 80 merkin mittaisia yli rivin mittaisissa elementeissä alku- ja lopputunnukset allekkain, sisältö sisennettynä kontekstin määrittävien prefiksien käyttö nimissä suotavaa, esim: <aside class="info-note"> <p class= "info-teksti >... </p>... </aside> suljetaan elementit aina, myös tyhjät elementit, esim: <img src= img/kuva.jpg /> aakkostetaan samaan elementtiin kohdistuvat CSS-säännöt (selainmottoriprefiksit kuitenkin jätetään huomiotta) esim: 23