Korinaa kuopasta

Jo 583 juttua!

Tilaa RSS tai Atom

Ota selaimesta enemmän irti

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.

Koska aika on arvokasta, kannattaa tutustua tähän alla näkyvään listaan jos mielit löytää tämän nettisivuston parhaat kirjoitukset. Tässä alapuolella on kaikkein luetuimpia kirjoituksia Korinaa kuopasta -blogin aarreaitasta. Kirjoitukset on järjestetty suosituimmuusjärjestykseen siten, että luettelon kärjessä on tällä hetkellä eniten lukukertoja saaneet kirjoitukset.

Luetuimpia blogimerkintöjä

Blogimerkintää "Ota selaimesta enemmän irti" muokattiin viimeksi 364 päivää sitten, eli torstaina 12.03.2009 kello 12:12. Kirjoitukseen on julkaistu kommentteja 6 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.

Julkaisun kommentit

Bitten kommentoi 891 päivää sitten

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

Petteri The kierrätysmyymälän myyjätär Number One kommentoi 891 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.

Emil Virkki kommentoi 891 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 ;)

Gocom kommentoi 891 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ä.

Aleksi kommentoi 891 päivää sitten

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

Sonja kommentoi 891 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. :)

Oho! Tämän julkaisun kommentointi onkin jo 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.

Korinaa kuopasta: Ota selaimesta enemmän irti.

Selaat tällä hetkellä blogimerkintää Ota selaimesta enemmän irti.. Se julkaistiin %. päivä lokakuuta 2007. Voit siirtyä lukemaan blogin tuoreimpia kirjoituksia klikkaamalla tiesi weblogin etusivulle. Tässä blogissa julkaistaan kiinnostaviksi katsomiani asioita, joten jos tiedät kiinnostavan nettiin liittyvän aiheen, josta kannattaisi kirjoittaa, laita palautetta!