Korinaa kuopasta

Hyvä ihminen! Tämä ei ole blogin etusivu. Täällä on tagiin "nettisivut" kytketyt jutut.

Ota selaimesta enemmän irti.

Julkaistu: 02.10.2007
Kategoria: Vierailijat
Kommentointi suljettu.

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: firefox, ie, nettisivut, opera

Te olette parhaita.

Julkaistu: 22.04.2007
Kategoria: Web
Kommentointi suljettu.

Ruusu.net: Monen alan asiantuntija. Viime vuoden helmikuussa ilmoitti blogissaan tekemästään päivitystyökalusta. Mies on harmillisesti kirjoitellut blogiinsa juttuja viime kuukausina harvakseltaan.
Verilammikko: Miika tapasi julkaista blogissaan muun hölinän lisäksi informaatiota tekemistään nettisivuista. Hän aktivoitukoon!
Rahinaa ja Rähinää -blogi: Juttuja, jotka kertovat Jukan henkilökohtaisesta elämästä, mutta myös verkkosivustojen ulkoasuista ja sivustojen tekemisestä. Potentiaalia vaikka mihin.
Petterilahnala.fi: Välillä kiinni, välillä auki. Kun on auki, voi täältä löytää pohdintaa Internet-sivustojen tekemisestä. Kiinnostavia kirjoituksia.
Viasto: Jonkinasteinen Internet-tuttu jo vuosien takaa. Kirjoittelee elon tiellä sattuneista tapahtumista.
Pimeänpelkääjä: Andan blogissa merkintöjä kirjallisuudesta, mutta myös WordPress-blogityökalusta ja neidin omista nettisivuista.
Rolleweb.net: Legenda jo eläessään. Rolle on ryhtynyt viime aikoina tarinoimaan myös metallimusiikista, which is very nice.
Niceone on Aleksin blogisivusto. Tämä on jees.
Aatoksia on Textpatternilla toimiva blogi. Blogin ylläpitäjä on käynyt kommentoimassa aikoinaan täällä Korinaa kuopasta -weblogin suunnalla hyvinkin ahkerasti. (Tule takaisin.)
Kimmo. on jättänyt linkkivinkkien julkaisun taka-alalle — tätä juttua kirjoittaessani viimeisin Kimmon blogimerkintä löytyy helmikuun lopusta. Sivusto kuuluu TXP:n uljaaseen veljeskuntaan.

Tagit: lista, nettisivut, vinkki

Kuvia nettisivustojen rakenteista.

Julkaistu: 04.06.2006
Kategoria: Web
Kommentointi suljettu.

Selityksiä palleroiden väreille:

Sininen: hyperlinkit
Punainen: taulukot
Vihreä: div-tagit
Violetti: kuvatiedostot (img-palikka)
Keltainen: lomakkeet (esim. form, input ja textarea)
Oranssi: rivinvaihdot (br), kappaleet (p) ja blockquote-palikat
Musta: HTML-elementti
Harmaa: kaikki muut elementit

Tästä Java-viritelmästä löytyy lisätietoja Aharefin blogista. Suora osoite "Websites as graphs" -Java-applettiin on: www.aharef.info/static/htmlgraph. Sivut ovat englanninkieliset.

Tagit: nettisivut

Edellinen sivu
Seuraava sivu

Blogmaster:

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

Korinaa kuopasta — On weblog.