HTML-editorit, CSS-kikat, sivuston testaaminen ja kertaus
Luennolla käydään läpi niitä asioita mitkä ovat jääneet vähemmälle huomiolle kurssin aikana.
HTML-editoreja
XHTML:ää ja CSS:ää voi kirjoittaa useilla erilaisia ohjelmilla. Editorit on jaettavissa tyypillisesti WYSIWYG-editoreihin, joissa tekemänsä tuotoksen näkee heti siinä muodossa kuin miltä se näyttäisi selaimella, ja tavallisiin tekstieditoreihin, joissa itse on kirjoitettava koodia, mutta ohjelmaan on upotettu koodin kirjoittamista helpottavia toimintoja. Esimerkiksi HTML-kit on ilmainen HTML/XML-editori. WYSIWYG-julkaisuohjelmien tyypillisimpänä ongelmana on se, että ne tuottavat helposti yhdellä alustalla toimivaa epävalidia ja esteellistä koodia.
Frontpage
- WYSIWYG-editori, joka tuottaa IE:llä sopivaa DHTML 4.0:aa.
- Voiko Frontpagella käsitellä XHTML-tiedostoa?
- Voi mutta on oltava tarkkana, ettei Frontpage lisää omia epävalideja määreitään. Tätä voi tarkkailla Split-näkymässä (tai FP2002:ssa vaihtelemalla Normal- ja HTML-näkymiä)
- Voiko Frontpagella luoda uutta XHTML-tiedostoa?
- Ei suoraan mutta kopioimalla XHTML-pohjan ja tallentamalla sen pohjaksi (Template) saa Frontpagen toimimaan XHTML-editorina välttävästi.
- Koodia voi siistiä XHTML-muotoon valitsemalla Apply XML Formatting Rules koodinäkymän context-valikosta oikealla hiiren napilla
- Voiko Frontpagella muokata ulkoasua CSS:n mukaisesti? Voiko CSS:ää kytkeä suoraan XHTML:ään?
- Perusmuotoilut menevät suoraan XHTML-koodiin.
- Tyylimuotoilut menevät XHTML:n
head-elementinstyle-osaan. Muotoilu pitää tapahtua valikosta Format | Style... - Tyylityökaluriviltä voidaan valita CSS-tiedostossa olevia muotoiluja, mutta muutoksia CSS:ään ei pysty tekemään muuten kuin käsipelillä.
- Tyylitiedostoja voi määritellä valikosta Format | Style Sheets...
- CSS:ää voi muokata valitsemalla css-tiedosto ja muokkaamalla sitä Format | Style -valikon kautta.
- Miten käytetään niin, ettei tuota epävalidia ja esteellistä koodia?
- Poista dynaamiset ominaisuudet pois (Tools | Page Setup | Compatibility).
- Jos tarvitset toiminnallisuutta, koodaa ne itse esteettömästi.
- Käytä aina tyylejä ja muokkaa tyylit tyylivalikon kautta.
- Sivuston luonti Frontpagella
- New | Web - tuottaa sivuston pohjarakenteen
- Hakemistolista
- Navigoinnin suunnittelu
Xetor
Tietotekniikan sovellusprojektina keväällä 2004 tuotettu XHTML:n tuottamiseen sopiva editori. Tällä hetkellä toteutettuja ominaisuuksia:
- Rakennenäkymä
- Automaattinen täydennys
- Elementtivalikko
- Automaattinen validointi ja virhelista
- Puunäkymä ja koodinäkymä toimivat yhtäaikaa
Vielä tulevaa:
- CSS-ominaisuuksien editointi elementtikohtaisesti
- Editointi rakennenäkymässä
- Virheiden värikoodaus
CSS-kikkoja
Seuraavilla toimenpiteillä voidaan kiertää eri selainten css-ongelmia ja luoda toiminnallisuutta sivustolle.
IE:n ja Netscape 4:n CSS-bugit hyötykäytössä
CSS-bugien kiertoa ja hyödyntämistä:
Netscapen CSS-ongelmat
Jossain vanhoissa koneissa saattaa olla vielä selaimena Netscape 4 Communicator. Netscape 4.X:n CSS-tuki on ikävän buginen. CSS-koodi saattaa Netscapessa aiheuttaa sivun muuttumisen käyttökelvottomaksi. Helpoiten ongelmat voidaan kiertää määrittelemällä Netscapella haitallisiksi huomatut CSS-määritykset erilliseen CSS-tiedostoon ja liittämällä se import-komennolla varsinaiseen CSS-tiedostoon. Netscape 4.X ei ymmärrä import-komentoa joten ongelmalliset CSS-määritykset jäävät siltä näkemättä. Sivun ulkoasu tietysti vähän kärsii Netscape 4.X:n käyttäjillä mutta pääasiahan on kuitenkin sivun sisältö. Esimerkki CSS-koodin piilottamisesta Netscape 4.X:ltä:
- HTML-tiedosto
<head> <link rel="StyleSheet" href="netscape.css" type="text/css" media="screen" /> <link rel="StyleSheet" href="main.css" type="text/css" media="screen" /> /* muut head-elementtiin sijoittavat määritykset */ </head> - Netscapen CSS-määritykset (netscape.css)
/* Tänne Netscapelle sopivat CSS-määritykset */ - Toimivat CSS-määritykset (main.css)
@import url("notfornetscape.css"); - CSS-määritykset joita ei anneta Netscapelle (notfornetscape.css)
/* Tänne kaikki ne CSS-määritykset, jotka aiheuttavat ongelmia Netscape 4.X:ssä /*
IE:n CSS-ongelmat
Jos haluat jonkin CSS-ominaisuuden toimivan vain muilla selaimilla kuin IE:llä, käytä valitsinta >, joka valitsee tietyn elementin lapsielementin. Valitsin ei toimi IE:ssä ja tekstin yhteenkirjoittamalla IE jättää nämä määrittelyt varmasti huomiotta. Merkitse tyylitiedostoon esimerkiksi seuraavasti:
html>body>.notforie {
/* Tänne määritykset, joita käytetään välittömästi body-elementin sisällä
olevassa elementissä, jonka luokka on notforie */
}
p>strong {
/* Tänne määritykset välittömästi tavallisen kappaleen sisällä olevalle
strong-elementille, jota ei haluta näyttää IE:ssä */
}
Toimimattomuuden voi todeta seuraavasta esimerkistä:
Pop-up menu
Yksinkertaistettu versio Eric Meyerin CSS/edge sivujen menudemosta:
Sivuston testaaminen
Käydään läpi ja kertaillaan vähemmälle huomiolle jääneitä työvälineitä:
DOM Inspector
- Vasemmassa ylälaidassa sivun puurakenne.
- Oikeassa ylälaidassa näkyvät valitun elementin ominaisuudet.
- Alhaalla näkyy graafisessa muodossa miten elementti sijoittuu ja millaisen tilan se varaa sivulta (ks. luento 2 laatikkomalli).
Erikoisemmat selaimet
Sivuston toimintaa kannattaa testata myös mikrotietokoneilla pyörivien graafisten selainten lisäksi harvinaisemmilla selaimilla. Kokeillaan seuraavia selaimia:
- Mobiiliselaimet: Nokia Mobile Browser Simulator 4.0
- Ääniselaimet: Home Page Reader
- Merkkiselaimet: Lynx Viewer
W3C:n LinkChecker
Sivujen linkkien toimintaa voi testata W3C:n LinkChecker -ohjelmalla. Valitse rekursiivinen haku ja vähintään 3 tasoa.
Bobby
Bobby tarkistaa esteettömyyden Web Accessibility Guidelines 1.0:n mukaan. Osan Bobby osaa tarkistaa koneellisesti, osassa kohdista Bobby kehoittaa käyttäjää tarkistamaan asian itse. Esteettömyyssuositus on jaoiteltu kolmeen tasoon, joista tärkeimmät perussuositukset ovat ensimmäisellä tasolla ja vaikeimmin toteuttavissa olevat viimeisellä tasolla.
Kertausta
Käytettävyys ja esteettömyys
- Tyypillisiä virheitä
- Top Ten Web-Design Mistakes of 2002 - Jakob Nielsenin Alertbox-kolumni
- Top Ten Web-Design Mistakes of 2003
- Skaalautuvuus. Suositaan suhteellisia arvoja (px, em) CSS:ssä ja vältellään kiinteitä määreitä (px). Mitään kokomääreitä ei saa sijoittaa XHTML:ään.
Kurssin anti
- XHTML-sivuston tekeminen
- Navigointi ja hakemistorakenne
- Ulkoasun muokkaaminen CSS:llä
- Lomakkeiden teko ja peruskäsittely
- Käytettävyys, esteettömyys ja mediatuki
- Apache-palvelimen perustoimintoja
Käyttäjien kommentit