Web-tekniikat / Johdanto

Web toimintaympäristönä

Webin toiminta perustuu asiakas-palvelin-malliin. Tähän malliin kuuluu yleisellä tasolla kolme osaa:

a) Web-asiakastekniikat

• client-side, asiakaspuoli (tähän keskitytään tällä opintojaksolla )
• ohjelma toimii selaimessa asiakkaan tietokoneella (esim: Firefox, Chrome, IE, Opera, Safari, ...)
• opintojaksolle kuuluvat käsitteet: HTML, HTML5, CSS, (JavaScript)
• JavaScriptillä ohjataan HTML-dokumenttien toimintaa selaimessa

b) Web-palvelinohjelmointi

• server-side, palvelinpuoli
• ohjelma toimii web-palvelimella, esim. Apache, IIS
• Web-palvelinohjelmointi: JSP, PHP, ASP.NET (.NET), CGI, MySQL,...

c) yhteyskäytäntö

• protokolla, joka määrittelee asiakasohjelman ja palvelinohjelman viestintämuodon

• Webissä asiakasohjelmana (käyttäjäagenttina, user agent) toimii yleensä web-selain, jonka avulla käyttäjä lähettää palvelupyyntöjä web-palvelimelle
• Web-palvelin ottaa vastaan palvelupyyntöjä ja lähettää esim. web-sivun takaisin asiakasohjelmalle näytettäväksi

HTML (HyperText Markup Language)

• mahdollistaa dokumentin näyttämisen web-selaimessa
• HTML:n eräs tärkeimpiä ominaisuuksia: tuki hypertekstilinkeille
• mahdollisuus ohjelmointiin (JavaScript) ja tyylisivujen käyttöön (CSS)
• dokumenttien kuvauskielen oikeellisuus voidaan tarkistaan HTML-tarkistimilla (validator.w3.org/,  validator.w3.org/nu, validator.nu)
• HTML on kehittynyt useiden välivaiheiden kautta (standardit/valmistajakohtaiset laajennokset) => toimivuusongelmia erilaisilla selaimilla

HTML perusidea

• Dokumentin rakenteen kuvaaminen

• HTML-dokumentti koostuu
• pelkästä tekstistä (plain-text)
• loogisen rakenteen ilmoittavasta merkkauksesta (otsikot,luettelot, ...)
• viittauksista muihin dokumentteihin (esim. kuvat)

• HTML-dokumentti jakaantuu
• tietosisältöä kuvailevaan metatietoon (HEAD-elementti)
• varsinaiseen tietosisältöönsä (BODY-elementti)

Onko HTML ohjelmointikieli? Ei.

HTML:n vahvuudet

• "Laiteympäristöriippumattomuus": Mukautuu oikein käytettynä erilaisiin esitystilanteisiin (esim. erilaiset selaimet, erikokoiset selainikkunat, käytettävissä olevat fontit, multimedialaajennukset, ...)
• Siirrettävyys ja helppokäyttöisyys
  • Kieli on jossakin mielessä "pieni" -> Useat laitteet voivat käsitellä
  • Kaikki tieto dokumentin esittämistä varten on selaimessa ->Siirrettävä tietona on ainoastaan dokumentti itse!
• HTML-dokumentteja voi kirjoittaa millä tahansa tekstieditorilla ja niitä voidaan tulkita sekä ohjelmallisesti (selaimet, hakurobotit,...) että ihmissilmällä.
• Voidaan kehittää (tosin rajoitetusti) "universaaleja" indeksointimenettelyjä (Google, jne).
  

HTML:n heikkoudet

• HTML sallii useita ilmaisuja samalla asialle
• Esim. kappale-elementti voidaan merkitä
  
• <P>Olen kappale<P>Olen toinen
  
• <p>Olen kappale<p>Olen toinen
  
• <p>Olen kappale</p><p>Olen toinen...
  
• jne.
• Selaimista kasvaa "isoja", koska ne joutuvat varautumaan "kaikkeen".
• Lisäksi epävalidia HTML:ää on tarjolla runsaasti, koska selaimet ovat sen perinteisesti hyväksyneet. Tämä lisää entisestään selainten kokoa.

HTML5

• Viimeisin HTML:n versio, yhteensopiva aiempien versioiden kanssa
• Suunniteltu korvaamaan HTML4, XHTML ja DOM2
  
• Jatkuvassa kehityksessä: W3C:n suositukset ja WHATWG:n "elävä standardi"
  
• Uusia elementtejä ja määritteitä, CSS3-tuki
  
• Erityisesti suunniteltu monimuotoisen mediasisällön jakamiseen ilman pluginien tarvetta
  
• Tätän uusia käytänteitä mm. videoon, audioon, 2D/3D-grafiikkaan, web-sovelluksiin, ...

Muita tekniikoita

CSS (Cascading Style Sheets)

• tyylit HTML/XML-dokumentteihin
• verrattavissa tekstinkäsittelyohjelmien tyyleihin: muutetaan fontteja, värejä, layoutteja, jne...
  
• CSS ei korvaa HTML:ää, vaan se toimii sen lisäksi apukielenä.

• Style = "tyyli" eli elementtien ulkoasun esittäminen käyttäen erityisiä tyylisääntöjä
• Style sheet = "tyyliarkki" = tyylisäännöt kootaan tyylisäännöstöiksi; yksittäinen tyylisäännöstö on paikka, jossa on yksi tai useampia tyylisääntöjä.
• Cascading = tyylisäännöstöt voidaan limittää keskenään. Eräs suommennos: limitetyt tyylisäännöstöt

JavaScript

• JavaScript on skriptikieli, jossa käyttöliittymä (GUI) tehdään HTML/XML-kielillä
• vaatii toimiakseen isäntäsovelluksen (host application), esim. web-selain
• JavaScript-koodi upotetaan/liitetään HTML-dokumenttiin ja tulkataan selaimessa
• nopea lataus ja suhteellisen pieni kaistaleveyden kulutus verkossa (koska JavaScript on pelkkää tekstiä)

Java

• Oikea olio-ohjelmointikieli
• Käytetään paljon esim. palvelinohjemoinnissa ja Android-laitteissa

JavaScript / Java

• JavaScript-kieli EI OLE Java-kieli, vaikka se pohjautuu Javaan
• molemmat ovat oliopohjaisia ja niiden komennoissa on samankaltainen rakenne
• Java-kieli skaalautuu huomattavasti useampiin käyttötarkoituksiin kuin JavaScript
• Java toimii omassa "hiekkalaatikossa", mutta JavaScript-tulkki on liitetty selaimeen

AJAX

• Ajax-tekniikassa selainohjelma vaihtaa pieniä määriä dataa palvelimen kanssa taustalla niin, ettei koko verkkosivua tarvitse ladata uudelleen joka kerta käyttäjän tehdessä muutoksen.
• parantaa verkkosivun vuorovaikutteisuutta, nopeutta ja käytettävyyttä.
• Yleistynyt web-palveluissa runsaasti lähivuosina
• Ajax koostuu seuraavien tekniikoiden yhdistelmästä: HTML, CSS, DOM, XML, XMLHttpRequest-objekti