Ota selaimesta enemmän irti.

  • Julkaistu: 02.10.2007
  • Kategoria:
  • Kommentointi suljettu. (6)

Kaikille web-sivun tekijöille lienee tuttua, että useimpien selainten valikoista saa poistettua CSS-muotoilut käytöstä ja näin tarkistettua, miltä sivu ilman CSS-muotoiluja näyttää. Eri selaimiin kätkeytyy kuitenkin — joko valmiina tai ladattavana lisäpalikkana — myös paljon muita web-sivujen teossa hyödyllisiä toimintoja, joiden olemassaolosta tavallinen tallaaja ei välttämättä tiedä yhtään mitään. Ohessa on esitelty kuusi hyödyllistä vipstaakkia koskien pääasiassa Mozilla Firefoxia ja Operaa.

Elementit näkyviin

Joskus web-sivuja tehdessä eteen tulee tilanne, jossa jokin sivun elementti käyttäytyy omituisesti ja aiheuttaa sivun tekijälle harmaita hiuksia. Tällöin on hyödyllistä, jos sivun elementtien reunat voidaan piirtää näkyviin ja tätä kautta paikallistaa mahdollisesti väärässä paikassa majaileva tai omituisesti käyttäytyvä elementti.

Kyseinen ominaisuus on saatavilla Mozilla Firefoxiin Web Developer -laajennuksen avulla. Web Developer sisältää myös valtavan monipuolisen läjän muita web-sivujen teossa hyödyllisiä toimintoja, joita kokeillessa paatuneemmankin sivunväkertäjän suu kaartuu leveään hymyyn.

Googlen etusivun elementtejä Operan rajaamina.

Operassa elementtien reunojen näyttäminen on sisäänrakennettu ominaisuus, jonka saa päälle valikosta Näytä > Tyylitiedosto > Reunaviivat. Samaisesta valikosta löytyy myös muita sivujen rakentelussa hyödyllisiä toimintoja, kuten esimerkiksi lomakkeiden ja rivinvaihtojen poistaminen käytöstä.

Maailma IiEen silmin

Microsoftin Internet Explorer tulkkaa sivujen lähdekoodia monesti omalla ainutlaatuisella tavallaan, ja vaatii siten sivuja rakennettaessa monesti erityishuomiota. Varsinkin selaimen seitsemäs versio saattaa kuitenkin olla kovin hidas käynnistymään, eikä ikkunaviidakosta viitsi välttämättä lähteä etsimään käynnistyskuvaketta.

Mozilla Firefoxiin on saatavilla useita lisäosia, jotka osaavat ympätä IE:n Firefoxiin. IETabin avulla IE:n voi avata Firefoxin välilehdessä, ja IE Viewin avulla halutun sivun voi avata IE:llä yhdellä hiiren painalluksella. IE View Lite puolestaan on IE Viewin kevytversio, jonka sivuilla on ohjeet mm. upotettavan ohjelman muuttamiseksi. Näin IE View Litella voi upottaa FF:ään vaikka komennon avata Opera tai Safari – tai vaikka vanhemman IE:n standalone-versio, jos siltä tuntuu. Selaimen eri versionumerot kun eivät tunnetusti tulkkaa kaikkea aivan samalla tavalla.

Validointi on pop

W3C:n validaattori on kätevä, mutta toisinaan sinne pääseminen tuntuu ylivoimaisen vaikealta. Tällöin auttaa Operaan sisäänrakennettu toiminto, jonka avulla voi lähettää halutun sivun suoraan validaattorille (hiiren oikea nappi > Validoi > Ok) ilman suurta navigointireissua.

Firefoxissa ei tällaista toimintoa valmiina ole, mutta siihen ympättävä lisäosa pistää vielä paremmaksi. Se nimittäin lisää selaimeen validaattorin, jonka pieni tietopalkki kertoo selattavien sivujen lähdekoodin tilan saman tien. Aivan samaa mieltä W3C:n online-validaattorin kanssa se ei tosin ole, mutta toimii ja tarjoilee korjausehdotuksia silloinkin, kun Internet on poikki.

Firefoxin validaattori toiminnassa.

Entiteetit muistiin

Operaan saa ladattua vimpaimen, joka listaa kätevästi ainakin yleisimmät HTML-entiteetit. Kun muistikatko iskee, eikä esimerkiksi saksalaisen kaksois-s:n merkintä putkahda mieleen millään, luntti on lähellä. Yksittäisen merkin entiteetin etsiminen Googlen kautta voi nimittäin olla hermoja raastavaa puuhaa.

Merkkien kääntäminen onnistuu myös Firefoxin lisäosalla Unicode Converter, joskin vaivalloisemmin.

Muuta pientä

Etenkin raskailla sivuilla on tärkeää, että sivut ovat käyttökelpoisia myös ilman kuvia. Operan avulla sivua voi katsella ilman kuvia koskematta lähdekoodiin (Näytä > Kuvat > Ei kuvia). Firefoxilla saman voi toteuttaa jo aiemmin mainitulla Web Developer -laajennuksella.

Toisinaan taas sivujen käyttäytymistä eri käyttöympäristöissä ja resoluutioilla voi olla hankala arvioida. Web Developer -laajennuksen avulla Firefoxin otsikkopalkkiin saa tiedon ikkunan senhetkisestä koosta. Opera puolestaan osaa zoomata sivua suuremmaksi ja pienemmäksi; näin voi ainakin yrittää arvioida, miltä sivu näyttää eri kokoisella näytöllä. Ja jos sivulla vierailee paljon kännykällä surffaavia vierailijoita, mutta itsellä ei ole mahdollisuutta sivuston toimivuutta mobiililaitteella testata, niin osaapa Opera imitoida kännykkääkin (Näytä > Tyylitiedosto > Mobiili).

Kaiken kaikkiaan sekä Operaan että Firefoxiin on tarjolla paljon web-sivujen tekoa helpottavia ominaisuuksia, joko valmiina tai lisäosina. Etenkin Operassa on monia hyödyllisiä ominaisuuksia sisäänrakennettuina, joten selaimen valikot kannattaa käydä läpi huolella, vaikka ei olisi mitään ylimääräistä asentanutkaan. Firefoxin tapauksessa taas kannattaa viettää tuokio Mozillan virallisella lisäosasivustolla.

Pienellä vaivannäöllä selaimestaan voi saada sivuja tehdessä huomattavasti enemmän irti, ja mikä tärkeintä — hampaita tulee kiristeltyä huomattavasti vähemmän.

Artikkelin kirjoittajasta

Kirjoitus on Pimeänpelkääjä-blogin ylläpitäjä Sonjan käsialaa.

Tagit: , , ,

  1. Bitten kirjoitti 223 päivää sitten:

    Html Tidy (Html Validator) on päätynyt siihen tulokseen, että korinoiden etusivulla on 6 varoitusta. Mistäs moinen?

  2. Petteri The kierrätysmyymälän myyjätär Number One kirjoitti 223 päivää sitten:

    Pieniä virheitä, jotka johtuu youtuben koodista, ehkä siitä puuttuu jokin merkki vain?

    Lisäisin vielä yhden FF laajennuksen kehiin: Screengrabin, joskus joutuu ottamaan screenshotin portfolioon itsetehdyistä sivuista, tällä saa sellaisen kuin haluaa.

  3. Emil Virkki kirjoitti 223 päivää sitten:

    Internet Explorer Developer Toolbar voi myös olla hyödyllinen – ehkä jopa hyödyllisempi kuin Firefoxin lisäosat, sillä Internet Explorerissahan niitä ongelmia yleensä esiintyy ;)

  4. Gocom kirjoitti 223 päivää sitten:

    Ja tietysti on olemassa Firebug-lisäosa tulikettuun, jonka avulla sivuja voi muokata suoraan sen kautta ja se myös kertoo sivun koodin validisuuden yhtä tarkasti kuin oikea validaattori.

    Sillä voi myös tehdä saman kuin Webdeveloper-lisäosan osien näyttämistoiminnolla. Tosin firebugissa voi valita minkä elementin haluaa näyttää. Samalla saa näkyviin elementin koodin ja javascript, sekä css muotoilut.

    Ja tietysti kuten kerroin voi ohjelmalla myös muokata suoraan koodia, samalla Firebugin automaattisesti sitä korjaillessa. Tosin Firebugissa on monia ongelmiakin, kuten se että se välillä tuntuu kaatuilevan tai jäävän kokonaan käynnistymättä. Se myös haluaa välillä näyttää koodin väärin, onhan välillä vähän vaikea yhdistää muotoilut, sekä elementit toisiinsa virheettömästi – eritoten jos valmiissa, tutkittavassa koodissa on miljoona virhettä.

  5. Aleksi kirjoitti 223 päivää sitten:

    ColorZilla (http://www.iosart.com/firefox/colorzilla/) on myös osoittautunut käteväksi pikku lisäosaksi FireFoxiin.

  6. Sonja kirjoitti 223 päivää sitten:

    Noita hyödyllisiä lisäpalikoitahan on eri selaimiin niin tuhoton määrä, että jos kaikki listaisi ja selittäisi, syntyisi kirja. Tuo artikkelissa tekemäni listaus on eittämättä vajaa, mutta johonkinhan se raja oli vedettävä.

    Rajasin aiheen aika tarkasti Firefoxiin ja Operaan, kun Internet Exploreria ei tällä koneella ole edes asennettuna (johtuu käyttiksestä, OS X). En aio laittaa kirjoituksiini mitään, mitä en itse omin kätösin tarkista, ja tässä tapauksessa IE (tai lähinnä sen lisäpalikat) oli sellainen. Nuo IE Viewit ja IE Tabit ja IE:n standalone-versiot olen tosin aikaisemmin testannut toimiviksi PC:n puolella, ja IE View Liten tapauksessa yhteensopivuus muiden ohjelmien kanssa tuli testattua Safarin ja Operan kanssa.

    Tuo Emil Virkin mainitsema IEDT vaikuttaa kyllä hyödylliseltä. Ja Tulikettuunhan on kivoja lisukkeita tarjolla kuin sieniä sateella. :)

Tämän julkaisun kommentointi on suljettu.

Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 6 kommenttia. Tämä artikkeli on lokeroitu kategoriaan . Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2007/10/02/ota-selaimesta-enemman-irti.

Blogmaster:
Petri Ikonen, petri.ikonen@kuopassa.com, www.kuopassa.com