links for 2006-09-13

Koodinrikkoja kuriin

Web-standardien noudattaminen ei ole helppoa. Etenkin kun kaikki kotisivuille lisättävät ilmaiskikkareet tuntuvat rikkovan koodin niin pahasti, että validaattorista kuuluu vain tuskaista parahtelua. Ehkä paras esimerkki on Flickr-kuvapalvelun Badge, eli minikokoinen kuvagalleria, jollaisia näkyy melko monen blogin sivupalkissa.

Valitettavasti Flickr Badge ei pahemmin kuria kumarra, vaan on rehellisesti päin honkia kirjoitettu koodinpätkä. Esimerkiksi feldon.netin XHTML Strict -standardiin sovittaminen vaati hieman ihmettelyä ja monta epäonnistunutta yritystä. Säästääkseni teidän vaivaanne kirjoitin lyhyen oppaan, jolla Flickr Badge rupeaa futaamaan krantummassakin ympäristössä – ja vieläpä web-standardeja noudattaen!

Tämä ohje on tehty Flickr Badgen HTML-versiota varten. Olisi hyvä jos sinulta löytyisi jo valmiiksi Flickr-tili. Jos blogistasi löytyy jo Flickr Badge, sinun täytyy tehdä muutoksia ainoastaan Flickr Badgen koodiin ja sivustosi css-tyylitiedostoon. Jos et ole vielä uskaltanut tehdä omaa Badgea, voit ladata tekemäni valmiit tiedostot suoraan artikkelin lopusta ja liittää ne blogiisi.

1. Jos sivuillasi on jo Flickr Badge, avaa ensin tekstieditoriin se tiedosto, josta Badgen koodi löytyy. Tunnistat sen parhaiten “Start of Flickr Badge” -tägistä, sikäli mikäli olet jättänyt sen ennalleen. Flickrin tarjoama alkuperäinen koodi näyttää tältä:

Alkuperainen Flickr Badge

2. Kuten näkyy, alkuperäinen Flickr Badge on melkoinen merkkisoppa. Seuraavaksi sinun olisi löydettävä merkistön joukosta toimintoskripti, jonka tunnistat script-tägistä. Poista muu roska ja jätä script-tägit ja niiden välinen teksti ennalleen. Tuloksen pitäisi näyttää suunnilleen tältä, tosin sillä erotuksella, että käyttäjätunnuksen kohdalla lukee todennäköisesti jotain muuta.

Riisuttu skripti

3. Edelleen messissä? Loistavaa! Vaikein on takana. Seuraavaksi lisäät tekstieditorissa scriptin alkuun ja loppuun div-tägit, jolloin Flickr Badgelle voi määrittää omat tyyliasetukset CSS-tiedostossa. Sinun ei varsinaisesti tarvitse tietää mitä kaikki tämä tarkoittaa, riittää että Flickr Badgen koodi näyttää suunnilleen tältä:

Div-tagit HTML-koodin joukkoon

4. Seuraavaksi käydään css-tiedoston kimppuun. Avaa tekstieditorilla tyylitiedostosi ja lisää seuraavat rimpsut koodin loppuun:

Flickr Badge CSS -kuva-alue

Yllä siis määritellään varsinaisen kuva-alueen koko. Kuva-alue on se tila, jossa haluat esitellä pienoiskuviasi. Esimerkkitapauksessamme kuvia varten on varattu 200 x 300 pikselin suuruinen alue ja rajattu sopivasti tilaa sen ympäriltä.

Seuraavaksi säädetään miltä yksittäinen kuva-alueelle haettava kuva näyttää:

Flickr Badge CSS yksittaiset kuvat

Kuvat on siis keskitetty vasemmalle ja yksittäisen kuvan koko on 62 x 62 pikseliä. Samassa yhteydessä on määritelty myös kuvien taustaväri.

5. Kaiken pitäisi nyt olla valmista. Päivitä sivustosi ja tyylitiedostosi ja ihaile lopputulosta.

Pieni css-tietämys on tarpeen, jos tahdot muokata muita asetuksia. Flickr Badgessa näkyvien kuvien määrää voi puolestaan säätää muuttamalla skriptissä näkyvää numeroa. Nyt näkyvissä on 8 kuvaa:

Kuvien lukumaara

Jos et jaksa naputella CSS-koodia ja siistiä skriptiä itse, voit ladata ne tästä:

Kopioi ensimmäisen tiedoston sisältö ja liitä se blogisi tyylitiedostoon sellaisenaan.
Kopioi sitten toisen tiedoston sisältö suoraan kotisivujesi sivupalkkiosioon. Muista vaihtaa käyttäjänimeksi oma Flickr-tunnuksesi!

Tämä on ensisijaisesti laadittu omaksi muistiinpanoksi, mutta jos sait siitä jotain irti, paiskaa ihmeessä kommenttia!

links for 2006-08-15