CLT132 Poikkeukselliset sisällöt HTML-lomakkeet (viikko 6)

Esitys aiheesta: "CLT132 Poikkeukselliset sisällöt HTML-lomakkeet (viikko 6)"— Esityksen transkriptio:

1 CLT132 Poikkeukselliset sisällöt HTML-lomakkeet (viikko 6)

2 CLT132 – kevät 2008Sauli Nurmi Poikkeukselliset sisällöt Useimmissa tapauksissa (länsimaissa) HTML-dokumentin sisältö on suhteellisen triviaalia ASCII ei tuottane ongelmia... Kieliteknologille (ja muutenkin) tämä on kuitenkin riittämätön tila Tarvitaan tapoja esittää sisältöä myös silloin, kun se on “poikkeavaa”

3 CLT132 – kevät 2008Sauli Nurmi ÅÄÖ… etc. Pahimmillaan jo skandinaaviset aakkoset saattavat olla ongelmallisia И если писаем, например, на русском языке, всё ещё труднее... Puhumattakaan todella eksottisista kielistä… Tai merkeistä, jotka eivät ole minkään (luonnollisen) kielen symboleita tai transkriptiota Ongelmia on siis luvassa, etenkin jos on tehnyt elämässään niin huonon valinnan, että on päätynyt kielitieteilijäksi/teknologiksi...

4 CLT132 – kevät 2008Sauli Nurmi Merkinnän monet tasot Ongelmia eri aakkosissa/merkistöissä: Tukeeko tiedostojärjestelmä erikoisia merkkejä (=tiedoston nimi)? Tukeeko tiedoston formaatti erikoisia merkkejä (=tiedoston sisältö)? Tukeeko tiedoston lukeminen erikoisia merkkejä (=esim. selaimen kielituki)? Tukeeko ulosnäkyvä lopputulos erikoisia merkkejä (=käytettävissä olevat näyttöfontit)?

5 CLT132 – kevät 2008Sauli Nurmi Päätelmä Selvää on siis vain se, että kaikki on totaalisen epäselvää Rautalangasta väännettynä vain seuraavat merkit täysin turvallisia (yleensä…) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !?+-=<>/\*’,.;()[]{}@$£§^¨~”

6 CLT132 – kevät 2008Sauli Nurmi Ratkaisuja Perinteinen: käytetään vain edellämainittuja merkkejä Edellisen ongelma: rajoittaa ilmaisua ja voi muuttaa merkitystä, esim. Näin eilen useita tyttöjä rannalla Nain eilen useita tyttoja rannalla

7 CLT132 – kevät 2008Sauli Nurmi Ratkaisuja, jatkoa Vaihtoehto: käytetään jotain laajennettua merkistöä, jolloin ongelmaa ei pitäisi olla Usein käytössä huomaamatta Kuinka usein itse kukin miettii, mikä merkistö onkaan oikeastaan käytössä, kun kirjoittaa tietokoneella...? Toimii aina siihen asti, kunnes mennään oman kielen aakkoston ulkopuolelle

8 CLT132 – kevät 2008Sauli Nurmi Escape characters Ratkaisu moneen ongelmaan on escape characters, eli tapa kirjoittaa itse merkin sijaan kyseisen merkin koodi HUOM! Minkä tahansa merkin voi kirjoittaa tällä tavalla myös näppämistöltä, painamalla Alt + numerosarja HUOM 2! Ikävä kyllä HTML:n escape charit ja näppäimistön vaihtoehtokoodit eivät ole identtisiä, joten ne täytyy opetella erikseen, jos on molemmille tarvetta…

9 CLT132 – kevät 2008Sauli Nurmi HTML:n escape char Minkä tahansa merkin pystyy esittämään vaihtoehtoisesti, tässä muutamia esimerkkejä: a a AA bb BB ää ä Ä Ä Ä é é é ¿ ¿ ¿ ® ® ® < < < > > > Ŧ Ŧ

10 CLT132 – kevät 2008Sauli Nurmi ¿Lo comprendes? ”Pakomerkkejä” käytetään siis silloin kun Tiedosto, johon tallennetaan ei osaa käsitellä erikoismerkkejä Ohjelma/kone, jolla luetaan ei osaa käsitellä erikoismerkkejä Silloin kun sekä että Silloin kun näppäimistöltä ei saa (helposti) tuotettua tarvittavia merkkejä Esim. otsikon käänteinen kysymysmerkki

11 CLT132 – kevät 2008Sauli Nurmi Käytännössä Nykyiset WYSIWYG-ohjelmat tuottanevat useimmat merkit automaattisesti, eli käytännössä ongelma (ja korjaustarve) on pieni Tekstitiedostoja manuaalisesti editoidessa ongelma kuitenkin todellinen Pragmaattisesti VAIN NE merkit koodataan, jotka ovat ongelmallisia (ei siis kaikkia)

12 CLT132 – kevät 2008Sauli Nurmi Merkittävät poikkeukset Kirjoitettaessa mallikoodia merkit kirjoitetaan AINA escape chareilla Jos ei tee näin, selain tulkitsee merkit elementtien tagimerkinnöiksi Tuotemerkki-merkki™ Tälle merkille ei, yllättävää kyllä, ole omaa merkkiä Toteutetaan superscriptillä TM Vrt. subscript tekstiä

13 CLT132 – kevät 2008Sauli Nurmi Muuta merkistöistä Merkistön voi määrittää myös HEADin otsikkotiedoissa: Usein merkistöön ei tarvitse ottaa kantaa itse sivun koodissa (hoituu muuten esim. palvelin huolehtii)

14 CLT132 – kevät 2008Sauli Nurmi Lisää merkistöistä Laajennetun merkistön käyttö HTML:ssä http://www.cs.tut.fi/~jkorpela/html/chars-fi.html HTML Document Representation http://www.w3.org/TR/html401/charset.html Using Character Encodings http://htmlhelp.com/tools/validator/charset.html.en

15 CLT132 – kevät 2008Sauli Nurmi Lisää escape charactereista ASCII Table http://www.asciitable.com/ HTML Escape Characters: Complete List http://www.theukwebdesigncompany.com/articles/entity-escape- characters.php Unicode Entity Codes for Phonetic Symbols http://tlt.psu.edu/suggestions/international/bylanguage/ipachart.html

16 CLT132 – kevät 2008Sauli Nurmi Selaimen testaaminen Usein viimeinen lenkki saattaa olla heikoin lenkki, eli vaikka tiedostot, niiden sisällöt yms. olisivat kunnossa, selain ei vain osaa näyttää tekstiä http://www.unicode.org/iuc/iuc10/x-utf8.html Linkin takaa löytyvällä sivulla voi testata, kykeneekö selain näyttämään kaikki merkit Jos kaikki tuolla sivulla näkyvät, mutta omassa dokumentissa ei, on vika jossain muualla kuin selaimessa...

17 Sisällön liittäminen ”includella” HTML:ssä ei valitettavasti ole tapaa lisätä ”includella” sisältöä toisesta lähteestä Pari kiertotapaa on… OBJECT-elementti EMBED-elementti CLT132 – kevät 2008Sauli Nurmi

18 MITÄ ja MIKSI ihmeessä? Kyseessä on siis tapa liittää esim. toinen sivu osaksi toista Hyöty triviaaleissa sovelluksissa kyseenalainen, monimutkaisissa ja monikerroksisissa sovelluksissa tarve tälle voi olla aito ja suuri Periaatteessa tällä tavoin on mahdollista kikkailla, esimerkiksi liittää epävalidi dokumentti osaksi validia, ilman että jälkimmäisestä tulee myös epävalidi… CLT132 – kevät 2008Sauli Nurmi

19 Käytännön käyttö Usein käyttötarve voi olla hyvinkin luontevaa: esimerkiksi liittää jokin toistuva osio (navigaatiovalikko, yhteystiedot) osaksi joka sivua, ilman että jokaista sivua nysvätään käsityönä Generoitaessa koodia (esim. ASP) tämä tapahtuu serverin päässä, tarve varsinaiseen ”HTML-includetukseen” pientä CLT132 – kevät 2008Sauli Nurmi

20 Include-filosofointia Periaatteessa tällaista ominaisuutta voisi käyttää myös staattisilla, ei- generoitavilla sivuilla (yksityiset kotisivut) Selaimet eivät välttämättä tue Toiminta arpapeliä, etenkin vanhat versiot OBJECTin kuitenkin pitäisi toimia, koska se on täysin määritysten mukainen elementti CLT132 – kevät 2008Sauli Nurmi

21 Yleistä teoriaa asiasta Includettamalla saa periaatteessa (ei käytännössä!) minkä tahansa sisällön osaksi HTML-dokumenttia Esim. kuvan voisi liittää tällä tavalla, vaikka IMG-tagin vuoksi tämä olisi järjetön teko  Poikkeus: esim. Java-appletin vaihtoehtokuva koneille, joissa Java-tuki disabloitu CLT132 – kevät 2008Sauli Nurmi

22 OBJECT-elementti Esimerkki kuvan lisäämisestä: Here's a closeup of the Grand Canyon: This is a closeup of the Grand Canyon. Ei kovinkaan fiksua, mutta mahdollista OBJECTin attribuuteilla mahdollista määrittää tyyppiä, kokoa… CLT132 – kevät 2008Sauli Nurmi

23 Sisäkkäinen OBJECT-elementti Toiminta: sisemmän pitäisi latautua, jos ulompi ei toimi kohdekoneessa Yahtzee is my favorite game! http://htmlhelp.com/reference/html40/special/object.html CLT132 – kevät 2008Sauli Nurmi

24 K-18!!! EMBED-elementti Toinen tapa tehdä samat asiat on EMBED-elementti HUOM! EMBED-ELEMENTTI ON PERIAATTEESSA TUHMA JA KIELLETTY ASIA, KOSKA EI OLE VIRALLISTEN STANDARDIEN MUKAINEN!!!!!!!!!!!!!!!!!!!!!!! CLT132 – kevät 2008Sauli Nurmi

25 EMBED-elementti, jatkoa Vaikka emme halua suosia epästandardia toteutusta, ero OBJECTin ja EMBEDin välillä on toisinaan sama kuin ero välillä ei toimi ja toimii… Koska usein EMBED on ainoa vaihtoehto, sitä kannattaa käyttää Epästandardi toiminta lienee parempi vaihtoehto kuin standardi toimimattomuus CLT132 – kevät 2008Sauli Nurmi

26 EMBED-esimerkkejä http://www.htmlref.com/reference/appa/tag_embed.htm CLT132 – kevät 2008Sauli Nurmi

27 Pohdintaa include-asiasta Kaksi vaihtoehtoa, molemmat puutteellisia Ehkä tulevissa selainversioissa ja kuvauskielten standardeissa asiat paremmin Toistaiseksi näillä tultava toimeen Yrityksen ja erehdyksen kautta löytää kikan, joka toimii kulloisessakin tarpeessa CLT132 – kevät 2008Sauli Nurmi

28 HTML-lomakkeet Yksi käyttökelpoisimmista HTML:n ominaisuuksista on lomakemuoto Käytössä joka paikassa: sähköpostit, nettikaupat, kurssi-ilmot, yms. Toimii siis lähetettäessä dataa tietokantoihin yms. EI toimi tulostettuna yleensä Jos tarpeen tulostaa, parempi laatia PDF

29 CLT132 – kevät 2008Sauli Nurmi HTML-lomakkeet, jatkoa Idea ja toteutus tiettyyn rajaan saakka triviaalia: tagien välinen alue on lomake-elementti Lomakkeen sisällä useita ”alielementtejä”, kuten tekstikenttiä, pudotusvalikoita, radiobuttoneita… Lomakkeessa myös jokin nappula josta tapahtuu jotakin Mitä tarkalleen ottaen, riippuu tilanteesta, usein kuitenkin päädytään toiselle sivulle

30 CLT132 – kevät 2008Sauli Nurmi Lomakkeen elementtejä Teknisesti ottaen: vain yksi elementti, INPUT, joka saa muotonsa TYPE-attribuutilla Käytännössä: täysin eri asioita täysin eri tilanteisiin (vrt. tekstikenttä vs. nappula) Jokainen INPUT-elementti saa oman nimen NAME-attribuutilla Tähän viittamalla viitataan esim. tekstikentän tietosisältöön, valintojen tilaan, jne. Lomakkella myös oma nimensä Elementillä siis tavallaan kaksi nimeä…

31 Lomakkeen määritelmä <!ATTLIST FORM %attrs; -- %coreattrs, %i18n, %events -- action %URI; #REQUIRED -- server-side form handler -- method (GET|POST) GET -- HTTP method used to submit the form-- enctype %ContentType; "application/x-www-form-urlencoded" accept %ContentTypes; #IMPLIED -- list of MIME types for file upload -- name CDATA #IMPLIED -- name of form for scripting -- onsubmit %Script; #IMPLIED -- the form was submitted -- onreset %Script; #IMPLIED -- the form was reset -- accept-charset %Charsets; #IMPLIED -- list of supported charsets -- > http://www.w3.org/TR/html4/interact/forms.html CLT132 – kevät 2008Sauli Nurmi

32 Inputin määritelmä <!ENTITY % InputType "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" > <!ATTLIST INPUT %attrs; -- %coreattrs, %i18n, %events -- type %InputType; TEXT -- what kind of widget is needed -- name CDATA #IMPLIED -- submit as part of form -- value CDATA #IMPLIED -- Specify for radio buttons and checkboxes -- checked (checked) #IMPLIED -- for radio buttons and check boxes -- disabled (disabled) #IMPLIED -- unavailable in this context -- readonly (readonly) #IMPLIED -- for text and passwd -- size CDATA #IMPLIED -- specific to each type of field -- maxlength NUMBER #IMPLIED -- max chars for text fields -- CLT132 – kevät 2008Sauli Nurmi

33 Inputin määritelmä, jatkoa src %URI; #IMPLIED -- for fields with images -- alt CDATA #IMPLIED -- short description -- usemap %URI; #IMPLIED -- use client-side image map -- ismap (ismap) #IMPLIED -- use server-side image map -- tabindex NUMBER #IMPLIED -- position in tabbing order -- accesskey %Character; #IMPLIED -- accessibility key character -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- onselect %Script; #IMPLIED -- some text was selected -- onchange %Script; #IMPLIED -- the element value was changed -- accept %ContentTypes; #IMPLIED -- list of MIME types for file upload -- > http://www.w3.org/TR/html4/interact/forms.html CLT132 – kevät 2008Sauli Nurmi

34 Inputin attribuutit Input-elementin (type) attribuutit text|password|checkbox|radio|submit|reset |file|hidden|image|button Eli siis: teksti, salasana, rasti ruutuun, monivalinta, lähetys, tyhjennys, tiedosto, piilotettu kenttä, kuva, nappula Näillä pääsee jo pitkälle… CLT132 – kevät 2008Sauli Nurmi

35 INPUT-esimerkki First name: Last name: Eri lomakkeet eri palstoilla! Male Female Eri lomakkeet eri palstoilla! CLT132 – kevät 2008Sauli Nurmi http://www.w3schools.com/html/html_forms.asp

36 Lomakkeen elementtejä, jatkoa Edellä mainitun ”ainoan” INPUT- elementin lisäksi meillä on kuitenkin ”toinenkin ainoa”, eli SELECT-elementti Pudotuslistat/valikot tehdään SELECTillä, muuten INPUT riittää Lomakkeen voi toteuttaa ilman SELECTiä, ilman INPUTia ei oikeastaan voi…  Akateemisen hypoteettisesti: SELECTin ja esim. skriptikielen yhteiskäytöllä mahdollista… CLT132 – kevät 2008Sauli Nurmi

37 Selectin määritelmä <!ATTLIST SELECT %attrs; -- %coreattrs, %i18n, %events -- name CDATA #IMPLIED -- field name -- size NUMBER #IMPLIED -- rows visible -- multiple (multiple) #IMPLIED -- default is single selection -- disabled (disabled) #IMPLIED -- unavailable in this context -- tabindex NUMBER #IMPLIED -- position in tabbing order -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- onchange %Script; #IMPLIED -- the element value was changed -- > http://www.w3.org/TR/html4/interact/forms.html CLT132 – kevät 2008Sauli Nurmi

38 Selectin attribuutit Edellisen kalvon perusteella melko itsestään selviä Oleellisempaa lienee SELECTin elementit Mutta HUOM! Aiemmin esitetty lomakkeen toiminta ilman nappulaa perustuu juuri on[jotakin]- tilamuutosattribuutin laukaisemaan skriptitapahtumaan CLT132 – kevät 2008Sauli Nurmi

39 Selectin elementit OPTION-elementti on yksi valinta valintalistalla OPTGROUP-elementti on yhteenliittyvien OPTION-elementtien kooste Helppoa, eikö? Nimet todellakin kuvaavat sitä mitä ovat… Toisinaan näinkin, jopa tietotekniikassa… CLT132 – kevät 2008Sauli Nurmi

40 SELECT-esimerkki Which Web browser do you use most often? Firefox 2.0 or higher Firefox 1.5.x Firefox 1.0.x Microsoft Internet Explorer 7.0 or higher (Jatkuu toisella palstalla) Microsoft Internet Explorer 6.x Microsoft Internet Explorer 5.x Microsoft Internet Explorer 4.x Opera 9.0 or higher Opera 8.x Opera 7.x Safari Other CLT132 – kevät 2008Sauli Nurmi http://htmlhelp.com/reference/html40/forms/optgroup.html

41 POST ja GET Koska lomakkeilla olisi ihan kiva saada jotain tulostakin, täytyy niiden lähettää dataa etenpäin Kaksi vaihtoehtoa POST ja GET: GET: data enkoodataan URL:iin POST: data viestin rungossa Syvällisempi tarkastelu ja käyttö sivuutetaan tällä kurssilla… CLT132 – kevät 2008Sauli Nurmi

42 Lisää tietoa lomakkeista Forms in HTML documents http://www.w3.org/TR/html4/interact/forms.html HTML Forms and Input http://www.w3schools.com/html/html_forms.asp (sivulla paljon hyödyllisiä esimerkkejä, esim. alalaidan interaktiiviset tutoriaalit) Methods GET and POST in HTML forms - what's the difference? http://www.cs.tut.fi/~jkorpela/forms/methods.html CLT132 – kevät 2008Sauli Nurmi

43 Viikon oleellisin asia Oppia lomakkeen tekemisen perusteet Tietää, mitä ns. escape characterit ovat, miksi niitä käytetään ja omaksua valmius käyttämään niitä tarvittaessa (Rajatussa määrin) oppia liittämään sisältöä osaksi HTML-dokumenttia ns. include-tekniikalla