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

Hei Samuel! Juuri tätä tarkoitin.

  • Julkaistu: 28.04.2008
  • Kategoria:
  • 7 kommenttia

Taustakuvatesti on päivän sana. Tai linkki. Tuolla testisivulla on siis sellainen jännittävä efekti, jossa parin kuvatiedoston ja CSS-merkkauksen avulla on luotu kolmiulotteista menoa ja meininkiä. PNG-kuvatiedostot, jotka on tallennettu 24-bittisiksi ja osittain läpinäkyviksi (alpha channelilla) on sijoitettu toinen toisensa päälle.

Tällaisen efektin näin ensimmäistä kertaa jollakin englanninkielisellä nettisivustolla, jossa oli ikään kuin viidakon pöpelikköä toteutettu nettisivuston ulkoasuun tällä tavalla.

Tagit: ,

Avasin sotafoorumin.

  • Julkaistu: 13.04.2008
  • Kategoria:
  • Kommentointi suljettu.

Suomen Sodat on nyt avattu. Se on jälleen uusi foorumi, mutta kuitenkin erikoistunut nimensä mukaisesti vain hyvin tarkasti rajattuihin aiheisiin. Tulen itsekin tuolla pyörimään aina silloin tällöin. Osallistun paljon sen toimintaan etenkin alkuaikoina, koska keskustelijoista on vallan huutava pula, mutta luonnollisesti myös myö… Joo. Eiköhän tämä tullut selväksi. Liittykää!

(IdeaCafekin avaa foorumin lähiaikoina.)

Tagit: ,

Hallitse ulkoasua CSS:n ja body-elementin avulla.

  • Julkaistu: 10.03.2008
  • Kategoria:
  • Kommentointi suljettu.

Tyylitiedostojen avulla voidaan hallinnoida koko nettisivuston ulkoasua. Jokaisen sivuston sivun. CSS:n teho on juuri siinä, että hyvin pienellä vaivannäöllä, ideaalitilanteessa vain yhden tyylitiedoston, kautta voidaan muokata kaikkien sivuston ulkoasussa olevien tavaroiden esitystapaa.

Joskus voi vastaan tulla sellainen tilanne, jossa halutaan tehdä globaalilla tasolla toimivan tyylitiedoston kautta muutoksia vain johonkin sivustolla olevaan sivuun. Hämärältä kuulostaa, mutta tarkoitan tällä sitä, että jos meillä on koko nettisivuston alueella toiminnassa tyylitiedosto “oletus.css” ja halutaan siitä käsin vaikuttaa esimerkiksi vain jotakin yhtä haluttua osiota. Tämä on mahdollista tehdä asettamalla nettisivun lähdekoodiin haluttuun osioon haluttu id-tunniste avaavaan body-tagiin. Esimerkiksi näin:

<body id="yhteydenotto">

Tämän tunnisteen avulla voi koko sivun sisältöön tarrautua CSS:n avulla. Hyvin yksinkertaista, mutta tätä ei nähdäkseni kovin usein toteuteta. Syynä lienee se, ettei kansa tunne tämänlaisen ratkaisun olevan olemassa. Syynä tähän ilmiöön voi tietysti olla myös julkaisujärjestelmän kankeus.

Demonstroidaan (tämä on päivän fiini sana, jota pyrin jatkossakin suoltamaan suustani) vielä jonkin verran. Jospa nettisivuilla on vaikka yhteinen ulkoasun rakenne. Esimerkkitilanteessa sivuston rakenne on laitettu div-palikoilla läjään. Elementit on sijoitettu CSS:n avulla. Vau. Mitä mahdollisuuksia nyt avautuukaan! Asettamalla uniikin id-selektorin halutuille osioille voimme vaikka vaihtaa haluttujen osioiden palstojen leveyttä, sijaintia, fontin väriä, koko ulkoasun grafiikkaa… Kaikki sivuston ulkoasun tavarat kun on sijoitettu polveutuvasti body-elementin väliin. Esitellään tätä ajatusta näin:

Meillä on sivusto, siinä on useita eri sivuja. Laitamme etusivulle body-elementtiin CSS-selektoriksi “etusivu”. Sitten vaan tyylitiedostoa kopeloimaan.

body { background: #fff; }
body p { color: #000; }
body#etusivu { background: #000; }
body#etusivu p { color: #fff; }

Oheisessa esimerkkimerkkauksessa kaksi ylintä riviä käskyttävät kaikkia sivuston osioita, mutta kaksi alempaa riviä kumoavat ylimpien rivien ehdottamat temput.

Tagit: ,

Suomen Parhaat Verkkosivut.

  • Julkaistu: 04.02.2008
  • Kategoria:
  • Kommentointi suljettu.

Jälleen on aika kilpailla. Viime vuonna järjestetty Suomen Parhaat Verkkosivut -kilpailu on jälleen käynnistynyt. Kisa on avoinna aikavälillä 1.1.–31.10.2008. Viime vuonna osallistuminen kilpailuun maksoi muistaakseni satakin euroa, mutta nyt se on kaikille avoin. Tosi fantsua. Tosi epäfantsua. Kaikenlaista sitä tässä maailmassa kehitelläänkin. Kilpailussa on kieltämättä hienoja ja aidosti hyödyllisiä palkintoja tarjolla, kuten radiomainoskampanjaa (arvo jopa 7000 euroa) ja Googlen AdWords-kampanjaa satojen eurojen edestä.

Kilpailun nettisivut sijaitsevat osoitteessa www.suomenparhaatverkkosivut.com.

Tässä tapauksessa kulmakarvojani nostelee se tapa miten verkkosivujen “parhautta” pyritään mittaamaan. Arvovaltainen tuomaristo pääsee valitsemaan kandidaattien keskuudesta parhaiksi katsomansa sivustot ja jakamaan niille pystiä ja pyteliä. Kisassa jaetaan lisäksi kuukausipalkintoja yleisön suosimille ehdokkaille. Kilpailun nettisivuilta löytyy vuoden 2007 tuomaristoon kuuluneen kaikenmaailman johtajia ja päätoimittajia. He arvostelivat parhaansa mukaan viime vuoden kisassa voittajaehdokkaat näiden mukaan:

  • Ulkoasu
  • Sisältö
  • Käytön helppus
  • Tekninen toimivuus

Näiden lisäksi lautamiehet saattoivat harkintansa mukaan tuomaroida käyttäen sellaisia kriteerejä kuin:

  • Sivuston kohderyhmä
  • Viestin kohdentuvuus

Kuinkahan moni näistä raatiin valituista hepuista on erikoistunut tai edes joskus osallistunut nettisivujen toteuttamiseen?

Päivitys 11.2.2008: Sain sähköpostia kilpailua järjestävältä taholta, herra Pauli Vuoriolta, joka ystävällisesti informoi kilpailun kehittämiseen tähtäävistä suunnitelmista ja sen edellisen vuoden raadin jäsenten taustoista. Vuorion suostumuksella liitän tähän suoran lainauksen sähköpostiviestistä, joka kolahti sähköpostilaatikkooni viime lauantaina.

Kaikki ovat osallistuneet verkkosivujen toteuttamiseen, mutta kaikki eivät itse ole tehneet sivuja. Viime vuoden tuomaristossa todennäköisesti Nitro Fx:stä ja Suunnittelutoimisto Tuulettimesta tuli parhain asian tekninen tietämys ja Hakukonemediat Oy:n toimitusjohtaja taas tiesi parhaiten sivujen löydettävyyteen liittyvistä asioista.

Joukossa on sekä isojen, että pienempien yritysten edustajia, että myös ikähaarukka, kokemusvuodet mainonnasta siis ovat laajat.

Olli Linjala on varsin kuuluisa kouluttaja Suomessa ja vaikka hänellä onkin aikaisempi vankka mainosmiehen tausta hän toimi "maallikkojäsenenä". Vuoden 2008 Suomen Parhaat Verkkosivut -kilpailun tuomariston valintaa ja ja koko kilpailun voittajien valintaa tullaan kuitenkin uudistamaan.

Toimitusjohtaja mainitsi myös, että tälle kilpailusivustolle aiotaan lisätä palauteosio, minkä välityksellä voidaan lähettää palautetta suoraan kilpailun järjestävälle taholle.

Tagit: , ,

Tulevia kananlentoja.

  • Julkaistu: 09.12.2007
  • Kategoria:
  • Kommentointi suljettu.
  • Gootti.net tulee uudistumaan ulkoasun ja rakenteen osalta aika radikaalisti. Jossain välissä tätä kuuta, tai sitten tammikuun alkupuoliskon aikana. Tämä on tällä hetkellä omien projektien osalta tärkeimmästä päästä, koska sivusto voi kehittyä entisestäänkin jos vain saadaan tuo saitin ulkoasu vastaamaan sivuston tämänhetkisiä tarpeita. Nykyinen sivupohja sivustolla valmistui muistaakseni viime vuoden heinäkuussa, jonka jälkeen siihen on tehty paikkauksia ja lisäyksiä aina tarvittaessa. Alkaa muistuttamaan tilkkutäkkiä “konepellin” alla, joten uudistus on paikallaan. Kohtalaisen iso urakka yhden miehen tehtäväksi, mutta eipä minulla muuta olekaan kuin aikaa. Tämän saitin mainostuloilla maksan itse asiassa kämpän vuokran.
  • Supersuositut on vieläkin salasanan takana. Siellä on muutamia toimintoja tekemättä, enkä tällä hetkellä taida saada niitä ikuna valmiiksi, joten ehkäpä tästä tullaan julkaisemaan toiminnallisuuksien osalta riisuttu versio lähiaikoina. Tämä sivusto on sellainen ulkoasugallerian ja linkkihakemiston hybridi. Sivusto pyörii Textpatternilla. Toinen ulkoasugaltsu, jota em. järjestelmä pyörittelee, ja joka ei ole meikäläisen saitti, on englanninkielinen welovetxp.com.
  • Asun täällä Porvoossa. Meinasin jossain välissä kehitellä Google Maps -karttoja hyödyntävän kaupunkioppaan. Sivustolle on annettu nimikin. Se on Pompassi. Se tullaan aikanaan löytämään osoitteesta www.pompassi.com. Tällä sivustolla on vielä tekemättä parin JavaScript-kikkareen yhdistäminen ja eräiden toimintojen hienosäätö, mutta muuten alkaisi olemaan julkaisukunnossa. Pitäisi ehtiä ja viitsiä syöttää sisältöä jossain välissä.

Tuo lyhytosoitepalvelu *Lyhyt on myytävänä, että jos jotakuta kiinnostaa helppohoitoisen hyötysivuston omistaminen niin nyt jos koskaan kannattaa ottaa yhteyttä. Minuun. Vaikka sähköpostitse. Tämä sivusto on alkanut viime viikkoina saamaan jonkin verran normaalia tiuhempaan tahtiin uusia jäseniä, sillä eräs toinen suomalainen lyhytosoitteita tarjoava palvelu on mennyt nurin. *Lyhyt-sivuston statistiikkoja en ole vielä saanut kaivettua noiden käyttäjien luomien lyhytosoitteiden suunnalta, kun Google Analytics ei suostu toimimaan niissä. Eivätkä palvelimen omat tilastointiskriptit kykene ymmärtämään niitä.

Tagit: , ,

Päivän kummajaiset.

  • Julkaistu: 02.12.2007
  • Kategoria:
  • Kommentointi suljettu.
  • Metallimusiikki.net-sivustolta joku yli-innokas kyseisen musiikkigenren fanittaja käy kopioimassa suoraan kokonaisia artikkeleita. Vau. Tosi fantsua. Tyyppi jäi kiinni siitä kun linkitti suoraan artikkelikuviin, jotka on tallennettu tuonne sivustoni syövereihin. Sivuston ylläpitäjälle lähti sähköpostia. Seuraan tilannetta. Jos kyseisen saitin omistaja ei poista artikkeleita tai muokkaa niitä tai edes mainitse artikkelin lähdettä, niin mitä voin tehdä? Tuskin viranomaisia kiinnostaa kovinkaan paljon vaikka muutamia satoja sanoja olisi käyty nyysimässä.
  • Sain sähköpostia joltakin, ties miltä, joka pyytää tekemään ilmaiseksi ulkoasun tai merkkaamaan ulkoasun grafiikan valmiiksi sivupohjaksi. Saan siten kuulemma mahdollisuuden päästä taivaaseen enkä helvettiin. Jepajee. Tämä on yksi niistä once in a lifetime -kokemuksista.

Tagit: , ,

Mesenet.org on auki.

  • Julkaistu: 10.11.2007
  • Kategoria:
  • Kommentointi suljettu.

Joitakin kuukausia sitten tekemäni ulkoasu Mesenet.org-sivustolle on nyt otettu käyttöön. Saitti avattiin eilen iltapäivällä sen oltua huoltotilassa hiljattain sattuneen salasanavuodon jälkeen.

Tagit:

Nettilinkkejä, osa 2.

  • Julkaistu: 05.10.2007
  • Kategoria:
  • Kommentointi suljettu.
  • Smashing Magazinen eilen 4. päivä julkaisema juttu niinkin arkipäiväisestä asiasta kuin näytönsäästäjistä on saatu kuulostamaan kiehtovammalta kuin koskaan aikaisemmin.
  • Lukekaa Aatoksia! Siellä möllöttää kyhäämäni ulkoasu. Eikö olekin nätti? Blogin sivupalkista löytyvät numeroidut listat esittävät luettelorivit roomalaisin numeroin. CSS:n kautta voi säätää luetteloiden rivien alussa näkyvät symbolit tai numerot tai kirjaimet halutunlaisiksi. Roomalaiset kirjaimet versaalilla saa laitettua normaalin numeroinnin tilalle asettamalla tyylitiedostoon koodin list-style-type: upper-roman siihen kohtaan missä listan ulkoasu määritellään. Saman voi toteuttaa myös pienin kirjaimin, jolloin koodi on: list-style-type: lower-roman.

Tagit: ,

Jutun juurta.

  • Julkaistu: 20.09.2007
  • Kategoria:
  • Kommentointi suljettu.

Onpas siitä taas kulunut pitkä aika kun viimeksi kirjoittelin tänne. On ollut kiireitä, niitä on edelleen. Kunhan sitä kullankallista luppoaikaa alkaa ilmaantumaan, voisin kirjoitella esimerkiksi näistä jutuista:

Tiedostonsiirtolomakkeen ulkoasun muokkaaminen CSS:n avulla. Tästä on olemassa jo toimiva demo, jonka innoittajana toimi Niceonen blogissa mainittu Shaun Inmanin esittelemä keino säätää file inputin ulkoasua JavaScriptia ja CSS-merkkausta käyttäen. Meitsin kikka kakkonen ei tarvitse lainkaan JS-koodia, joten who’s the man?

Aamulla herätessäni yöunilta heräsi sellainen vänkä idea. Siinä Textpatternin avulla voidaan luoda kullekin blogimerkinnälle uniikki ulkoasu. Joo-o.

Lue loputkin…

Tagit: , , ,

Ärsyttäviä asioita.

  • Julkaistu: 03.09.2007
  • Kategoria:
  • Kommentointi suljettu.

Aloitetaan vaihteeksi teistä. Ärsyttämistä voi harrastaa vaikkapa leuhkimalla: Kuopassa.com uusi nahkansa! Ähäkutti.

  • Futuron Internetin hoivissa majailevat nettisivustoni Viihdeuutinen.net ja Suositut.net eivät päästä meikäläistä sisään. En voi katsoa mitä niille kuuluu, enkä lukea niiden sähköposteja. Tämä johtuu ilmeisesti palvelimen palomuurista, joka on jostain syystä blokannut IP-osoitteeni. Tätä on jatkunut viikonlopun yli.
  • Pari päivää sitten Kuopassa.com-sivustolla oli sama vika, mutta se korjaantui lauantaina. Sitä ennen oli muutamia päiviä, jolloin tämän blogin MySQL-kanta ei oikein pelannut. Ja tuossa ilmeisesti viime viikolla on ollut päiviä, jolloin sähköpostiosoitteeseen petri.ikonen@kuopassa.com lähetetyt viestit eivät ole saapuneet perille. Jälkimmäisestä olen hyvin tuohtunut. Päivitys: Itse asiassa tänäänkään en saa luettua maileja. Näppärää.
  • Metallimusiikki.net-sivuston cPaneliin ei tällä hetkellä ole mitään asiaa. Vaikuttaa siltä kuin joku olisi vaihtanut hallintapaneelin salasanan tai käyttäjätunnuksen. Tai molemmat. Vau! Tosi jännä juttu. Harmin paikka siinä mielessä, että en pääse mm. ottamaan varmuuskopiota sivustosta. Lataan nääs backupit manuaalisesti, sillä automaattisesti otettava päivittäinen varmuuskopio on maksullinen lisäpalvelu. Tämäkin saitti on FI:n palvelimella.

Tilanne voisi olla vieläkin hullumpi. Jos nimittäin kaikki sivustojen webhotellit olisi hankittu samasta paikasta. :-)

Tagit: ,

Askarrellaan, paskarrellaan.

  • Julkaistu: 19.08.2007
  • Kategoria:
  • Kommentointi suljettu.

Yritin mennä aikaisemmin tänään päivällä osoitteeseen www.rolleweb.net. Se ei kuitenkaan onnistunut, sillä olen epäonnistuja. Taltioin kuitenkin tapahtuneen OpenSource-projektina kulkevan CamStudio-ohjelman avulla. Sillä pystyy nauhoittamaan monitorilla tapahtuvia asioita. Videoklipit voi tallentaa oletuarvoisesti .avi-päätteiseksi tiedostoksi, mutta ohjelman sisältä löytyy myös mahdollisuus muuntaa taltioitu kotielokuva .swf-muotoon. Jälkimmäisen tiedoston kylkiäisiksi siihen voidaan ympätä myös elokuvan toistoa tottelevat nappulat. En tiedä miksi niitä namiskoita virallisesti kutsutaan, mutta tarkoitan niillä noita sinisiä palluroita, joiden avulla videoklippiä voi toistaa. Itse .swf-päätteisellä tiedostolla tarkoitan taas Flash-elokuvaa, joka voidaan toistaa nettiselaimen avulla, mikäli siihen on asennettu liitännäinen sitä varten.

Nettiselaimestasi puuttuu vaadittava lisäosa. Ilman puuttuvaa lisäosaa tätä videoleikettä ei voi katsella. Lataa Flash-liitännäinen.

CamStudion avulla monitorilta nauhoitettavaa toimintaa voidaan rajata joko halutun alueen kohdalta (kuten yllä näkyvässä esimerkissä on tehty), tai sitten nauhoittaa koko kuvaruudun alueella tapahtuvat asiat. Voidaan myös käyttää oletuksena näkyvää pientä kuva-aluetta, joka on kooltaan suunnilleen 500×500 kuvapikseliä. Nauhoitettavaa aluetta voidaan tietysti siirtää haluttuun kohtaan hiiren avulla. Hiiren kursorin liikkeet saadaan tallennettua. (Onpas tämä aika kehnosti jäsenneltyä tekstiä. Onpahan hieman haastetta elämään teillekin, perskuta.) Osoittimen ympärille voidaan laittaa elokuvaa kuvattaessa sen liikkeiden hahmottamista helpottamaan korostus. Korostus voi olla muodoltaan esimerkiksi ympyrä tai neliö ja se näkyy hiiren osoittimen ympärillä osittain läpinäkyvänä. CamStudiolla pystyy ilmeisesti nauhoittamaan myös ääntä, jota tosin oheisessa videoklipissä ei kuulla, sillä meikäläisellä ei ole mikrofonia.

Täällä blogin suunnalla saatamme jossain vaiheessa tulevaisuutta nähdä esimerkiksi ulkoasun grafiikan tekemistä käsittelevän blogimerkinnän, jota videoklipit täydentävät.

Tämä CamStudio on ilmainen. Ohjelman nettisivut löytyvät osoitteesta www.camstudio.org.

Tagit: , ,

"Korku"-teema.

  • Julkaistu: 02.08.2007
  • Kategoria:
  • Kommentointi suljettu.

Tässäpä jotain ilmaiseksi. Ilmainen “Korku”-niminen teema WordPressin käyttäjille. Korku on kurko. Se on kohtalaisen yksinkertainen, pelkistetty ja tummasävyinen ulkoasu. Siitä on riisuttu paljon turhilta tuntuvia toimintoja ja jätetty jäljellä vain kaikkein tärkeimmät toiminnot. Toimiva demokin löytyy. Jos teema tuntuu menevän “kaupaksi”, niin siitäpä sitten tullee tarjolle myös englanninkielinen versio.

Päivitys 4.8.: Ulkoasusta on nyt tarjolla myös Textpattern-versio. Korkun TXP-version live-demokin on tarjolla.

Tagit: ,

Textplates '07 jatkoajalla.

  • Julkaistu: 03.07.2007
  • Kategoria:
  • Kommentointi suljettu.

Textplates '07Textplates ’07, minkä nettisivut sijaitsevat aivan yllättäen osoitteessa www.textplates.com, kertoo uutisosiossaan laittaneensa kyseisen Textpattern-templatekilpailun jatkoajalle. Kisan oli tarkoitus päättyä jo kesäkuun lopussa, mutta vähäisen osallistujamäärän vuoksi kilpailuaikaa on jatkettu ensi viikon keskiviikkoon asti. Kilpailu päättyy siis 11. päivä kuluvaa kuukautta.

Tuo on siis sellainen ulkoasukilpailu, missä jaetaan aivan tajuttomasti palkintoja. Palkintoja on tarjolla yhteensä yli 11 000 USD:n edestä, joka on yli 8000 euroa. (8000 € = n. 47 000 Suomen markkaa.) Palkkioita ryöppyää päävoittajille ja 50 ensimmäiselle osallistujalle. Pääpottina on Sitegroundin lahjoittama Mac Mini. Sen lisäksi Grand Prize -sijalle kivunnut kilpailija saa Foingilta muhkean hostingpaketin ja lisenssin Style Master CSS Editor -ohjelmaan.

Tärkeimpiä Textplates ’07:n kilpailuohjeita:

  • Kilpailuun lähetetyt Textpattern-“teemat” tulee julkaista GPL-lisenssin alla (tai vastaavalla lisenssillä).
  • Kilpailutyö tulee lähettää .zip-päätteisenä pakettina ja sen mukana tulee kulkea 125×125 kuvapikselin kokoinen kuvakaappaus kilpailutyön ulkoasusta.
  • Työn mukaan tulee liittää linkki toimivaan kilpailutyötä esittelevään demoversioon.
  • Sama henkilö voi osallistua useammakin työllä.
  • Templaten tulee toimia yleisimmillä graafisilla nettiselaimilla.

Textplatesin nettisivuilla kerrotaan viime vuoden kilpailun olleen erittäin suosittu. Se keräsi yhteensä n. 40 kilpailutyötä. Viime vuoden kilpailutöitä on ko. nettisivuston mukaan ladattu ainakin 100 000 kertaa.

Tämän vuoden Textplates-tuomaristoon kuuluu seuraavat alan asiantuntijat:

Tagit: ,

Ulkoasun valmistuskaari — yksi tapa.

  • Julkaistu: 14.06.2007
  • Kategoria:
  • Kommentointi suljettu.

Internetsivun ulkoasun synty on monivaiheinen prosessi. Se pitää sisällään ainakin kaksi vaihetta:

  1. Ulkoasun grafiikan piirtäminen
  2. Merkkaaminen valmiiksi sivupohjaksi

Tutkimalla useaa web-suunnittelijaa työssään voitaisiin selvittää, kuinka yksilöllisiä tapoja ko. prosessin suorittamiseen löytyy. Kuinka pitkälti teemme nettisivuja saman kaavan mukaan? Minä en tiedä, mutta tämän artikkelin luettuasi sinä tiedät ainakin sen, missä määrin omat tapasi eroavat minun tavoista.

Omalla kohdallani ulkoasun tekeminen ei käynnisty ideasta, tavallisesti ainakaan. Pääni on siinä vaiheessa tyhjä, kun avaan Photoshop’n. Homma lähtee liikkeelle epämääräisten kuvioiden piirtelyllä ja väriyhdistelmien kokeiluilla, kunnes yhtäkkiä huomaan monitorilla jotain kelvollista. Tässä vaiheessa näen ehkä pari eriväristä palikkaa tietyn värisellä taustalla, ja ne sytyttävät hehkulampun päässäni. Valmiista ulkoasusta muodostuneen mielikuvan turvin piirrän loputkin palikat. Grafiikka on nyt valmis.

Lue loputkin…

Tagit:

Uuden aika.

  • Julkaistu: 27.10.2006
  • Kategoria:
  • Kommentointi suljettu.

Korinaa kuopasta. On weblog. Niinpä, näinpä. Oman mainostaminen on aina kivaa, eli: tämän blogin ulkoasu vaihtuu. Eipä tässä muuta. Laitan uutta ulkoasua paikoilleen lähipäivien aikana. Ulkoasun vaihtumisen lisäksi ei taida olla paljon muita muutoksia luvassa.

Tagit:

Asioiden laittamista, sijoittamista.

  • Julkaistu: 01.09.2006
  • Kategoria:
  • Kommentointi suljettu.

Tänään tuntuu siltä, että position: relative; ja position: absolute; ne yhteen soppii, pannaan ne...

CSS:n avulla voi sijoittaa nettisivun lähdekoodiin ilmoitettuja elementtejä haluttuun kohtaan nettisivun ulkoasussa. Lähdekoodiin merkattu navigaatio saattaa löytyä sivun lähdekoodin lopusta, kun se ulkoasussa näkyykin aivan sivun yläosassa.

Tein tuossa jokin aika sitten erään Eskon kotisivuille ulkoasua. Ulkoasun yläosassa näkyy navigaatio (eli se linkkivalikko, josta voi siirtyä sivuston eri osioihin) — navigaation alapuolella näkyy logo. Lähdekoodia katsomalla navigaatio kuitenkin näkyy sivuston logon alapuolella ja logo navigaation yläpuolella. Kuvattu tilanne on tällainen:

<div id="runko">
<div id="header">
    <h1><a href="./">Sivuston nimi</a></h1>
</div>
<div id="navigaatio">
<ul
    ><li id="eka"><a href="./">Etusivu</a></li
    ><li><a href="#">Info</a></li
    ><li><a href="#">Linkit</a></li
    ><li><a href="#">Kotisivut</a></li
    ><li><a href="#">Kuvagalleria</a></li
    ><li><a href="#">Lataamo</a></li
    ><li><a href="#">Vieraskirja</a></li
></ul>
</div>
</div>

Ja kuitenkin se näyttää tältä. Tosi superia. Vau. Ihq. Tai sitten ei. Tämän tempun ja systeemin tekninen toteutus on hyvin helppo kenen tahansa oppia ja sitten mahdollisesti jopa soveltaa käytännössä. Vaihtoehtoja tuollaisen elementtien sijoittelun toteuttamiseen on varmaankin useita — tässä mahtioppaassa kuitenkin kerrotaan vain yksi niistä tavoista.

Laitetaan ensin header kuntoon. Laitetaanpa siis div-palikalle, jonka selektori on #header, seuraavanlaista CSS-muotoilua:

#header {
    height: 100px;
    background: #D73939 url(../kuvan/tiedostonimi.png) no-repeat 0 0;
    }

Tuossahan vaan laitetaan #header-elementille korkeus ja taustakuva. Leveys on jo aiemmin määritelty jossain muualla (tässä tapauksessa elementissä #runko), mutta toki sen voi tässäkin ilmoittaa. Tässä vielä laitettiin #header-palikalle taustaväri ja taustakuva.

Sitten itse asian ytimeen, eli navigaatioon. Navigaatio on laitettu järjestämättömäksi listaksi, jonka ympärille on kääritty div-palikka, jonka selektoriksi on ilmoitettu #navigaatio. Tarraudutaan tuohon selektoriin ja laitetaan koko navigaatio logo yläpuolelle:

#navigaatio {
    position: absolute;
    top: 0;
    left: 0;
    width: 740px;
    height: 100px;
    background: #ABD24E url(../kuvan/tiedostonimi.png) no-repeat 0 0;
    }

Äskeisessä CSS-litaniassa tärkeää on oikeastaan vain kolme ylintä riviä — merkkaus voisi näyttää tiivistettynä tältä:

#navigaatio {
    position: absolute;
    top: 0;
    left: 0;
    }

Jos nyt rohkenisimme katsoa ulkoasun tilannetta, näyttäisi ulkoasu menneen aika pitkälti päin helvettiä. Laitetaan div-elementtiin, joka ympäröi koko ulkoasua, tällaista tavaraa:

#runko {
    width: 740px;
    position: relative;
    padding-top: 100px;
    }

Tuossa siis määritellään koko ulkoasun leveys, joka on kiinteät 740 kuvapikseliä, sekä julistetaan #runko-elementti relatiiviseksi. Tämän lisäksi tehdään ulkoasun yläpäähän tilaa navigaatiota varten asettamalla paddingia, ts. merkkaamalla padding-top: 100px;.

Se, kun laitettiin #runko-mötikkä relatiiviseksi, tarkoittaa oikeastaan vain sitä, että navigaatio (joka sijoitetaan absoluuttisesti) ymmärtää olevansa aidattu #runko-elementin sisään.

Tagit: ,

Gootti.net taas.

  • Julkaistu: 12.08.2006
  • Kategoria:
  • Kommentointi suljettu.

Olipas muuten melkoinen urakka laittaa tuo goottisivusto kuntoon. Osa sivustoa toimii Textpatternilla, mutta sieltä löytyy lisäksi keskustelufoorumia, tapahtumakalenteria ja blogijuttuja, jotka kaikki oli erikseen päivitettävä. Taitaa jäädä tuollaiset isommat päevitysoperaatiot hieman vähemmälle. Oli kivulias kokemus.

Sivusto laitettiin siis eilen perjantai-iltana uusiksi, tai lähinnähän tuossa vain ulkoasu vaihdettiin. Navigaatio tulee vielä lähiaikoina pullistumaan jonkin verran, kunhan ensin ainakin tuo Aivovamma.net:in herra saa tehtyä taikojaan…

Tagit: ,

Mahdollisesti ulkoasun 7. versio.

  • Julkaistu: 20.07.2006
  • Kategoria:
  • Kommentointi suljettu.

Kuopassa

Pitkästä aikaa Kuopassa.com sai uuden tyylin ja ulkoasun. Tällä kertaa ei kovin ihmeellisiä temppuja ulkoasussa ole nähtävissä, paitsi että CSS:n float-komentoja on nyt käytetty hyvin vähän.

Tagit:

Taitaa olla businessblogi.

  • Julkaistu: 06.06.2006
  • Kategoria:
  • Kommentointi suljettu.

Nyt tavoitellaan sitä läpinäkyvyyttä. Uusitun FlinkDesignsin ulkoasun, ja jossain määrin myös uusitun sisällön, lisäksi sivustolla on avattu blogi. FD:n uutiset, tiedotteet ja muut jutut voidaan siis jatkossa julkaista sivuston omassa blogissa, sen sijaan että niitä täällä Kuopassa.com:in blogissa toitotettaisiin.

Käytetään Flinkin nettisivuilla tuota Textpatternia ja sillä myös weblog toimii. Ainakin vielä tällä hetkellä kommentointi on sallittu, eli ihmiset voivat jättää mietteitään ja mielipiteitään sivustolla julkaistuihin blogimerkintöihin. Mikäli käy niin ikävästi, että blogiin alkaa tulemaan turhan alatyylistä kommenttivyöryä, on kommentteja jouduttava sensuroimaan — mahdollisesti jopa kommentointi kokonaan suljetaan. Kommentointi tuollaisilla sivustoilla on nähdäkseni aikamoinen harvinaisuus. Ehkä alan muut yrittäjät eivät halua vastaanottaa tuollaisen julkisen kanavan kautta palautetta, tai ehkä he pelkäävät palautteen olevan hyvin negatiivista. Flinkin porukoita ei pelota.

FlinkDesignsin blogiin tulee merkintöjä kirjoittelemaan minun lisäkseni ainakin Sami “The Big Boss” Pekkanen sekä Riku Immonen, joka on monille meistä tuttu & tunnettu hänen Orkidea.org-sivustostaan. Mahdollisesti neljäskin blogimerkintöjen naputtelija saattaa julkaisuja tehdä, mutta hänen nimensä jääköön toistaiseksi paljastamatta.

Neljännen blogimerkintöjä naputtelevan henkilön nimi olkoon nyt teillekin tunnettu: Lauri Niskanen.

Tagit: , , ,

Forumforfree.info maailmalle.

  • Julkaistu: 23.05.2006
  • Kategoria:
  • Kommentointi suljettu.

Forumforfree.info on nyt sitten avattu kaikille kansoille. Jokainen voi hankkia palvelusta itselleen keskustelufoorumin, ilmaiseksi. Palveluun valmistamiani ulkoasuja on tällä hetkellä vaivaiset kaksi kappaletta, mutta uusia ulkoasuja on tulossa valikoimaan lähes jatkuvalla syötöllä. Foorumipalvelua pyörittää Tomi (www.hakukoneoptimointia.com).

Tässä vielä muutama detalji foorumipalvelusta:

  • keskustelufoorumi on täysin ilmainen
  • foorumin asentaminen on erittäin helppoa
  • helpdesk vastaa lyhyellä viiveellä ja veloituksetta
  • palveluun lisätään uusia ulkoasuja usein

Tagit: ,

Tämän päivän kunniaksi.

  • Julkaistu: 01.04.2006
  • Kategoria:
  • Kommentointi suljettu.

Emil laittoi kotisivunsa kuntoon aprillipäivän kunniaksi. Sivu näyttää olevan luotu Word-tekstinkäsittelyohjelmalla. Varautukaa järkyttymään.

Päivitys: Aprillipila poistui päivän vaihtumisen myötä. Kuvakaappaukset (1 ja 2) on kuitenkin otettu ja tallennettu muistoksi tästä tapauksesta.

Tagit:

Kuvagallerian ulkoasu.

  • Julkaistu: 30.03.2006
  • Kategoria:
  • Kommentointi suljettu.

MeseNet-Galleria

Kiirettä pitää. Esittelyvuorossa on juuri julkaistu MeseNet-Galleria, joka on kuvagalleria MSN Messengerin käyttäjille. Suomessa MSN Messengerin käyttäjiä on yli miljoona kappaletta.

Tein sivustolle ulkoasun, joka ei uskoakseni ole vieläkään täysin valmis. Koska MeseNet-Galleria -sivusto on jatkuvassa kehitystilassa ja siihen rakennetaan uusia ominaisuuksia ja osioita, on tarvetta myös ulkoasun muokkaamiselle jatkossakin. “Elävän” ja rönsyilevän sivuston ulkoasun pitäminen läjässä on hyvin hankala tehtävä.

Tagit:

Valokuvaajan uudet nettisivut.

  • Julkaistu: 29.03.2006
  • Kategoria:
  • Kommentointi suljettu.

TimoJunttila.com

Muistatteko, kun viime helmikuun alussa tuolla eräässä hakukoneoptimointiblogissa oli ilmoitus, jossa luvattiin yrittää parantaa yhden verkkosivuston hakukonenäkyvyyttä? Silloin kerättiin ehdokkaita ja ehdoteltiin optimoitavia sivustoja. Hakukoneoptimoinnin kohteeksi valittiin lopulta valokuvaaja Timo Junttilan nettisivut.

Tänään tuo Timo Junttilan uusittu ja optimoitu sivusto julkaistiin. Enemmän luettavaa tästä aiheesta on Hakukoneoptimointia.com:in asiantuntija kirjoittanut. Tämä on oikeasti mielenkiintoinen tapaus.

Tagit: ,

Moni on muuttunut.

  • Julkaistu: 28.03.2006
  • Kategoria:
  • Kommentointi suljettu.

Päivittelen tänään vielä hetken ajan tätä uutta ulkoasua. Joitakin yllättäviä pikku kummallisuuksia saattaa vilahdella täällä ja tuolla.

Korjattavaa löytyy:

  • Pitää muistaa jotenkin siistiä tuo aktiivisten navigaation linkkien outline-ongelma.
  • Testataan blogin hakukoneen toimivuus vielä erikseen jokaisessa osiossa.

Päivitys: Outline-ongelma on korjattu. Aktiiviset navigaation linkit saavat CSS-tiedostosta käskyn laittaa linkkitekstin koristeeksi alleviivauksen. Viritelmä toimii myös näppäimistöllä: kun tabulaattori-näppäimellä siirrytään johonkin navigaation linkkiin, muuttuu linkkiteksti alleviivatuksi. CSS-merkkaus tämän muotoilun luomiseksi on hyvin yksinkertainen:

#bloginavi li a:focus {
    outline: none;
    text-decoration: underline;
    }

Tagit:

On raakile, mutta makia.

  • Julkaistu: 22.02.2006
  • Kategoria:
  • Kommentointi suljettu.

Gootti.net:in keskustelufoorumi on tällä ilmoituksella avattu suurelle yleisölle. Foorumisoftana toimii miniBB. Foorumin ulkoasulle tehdään vielä hieman remonttia, jonka arvioin valmistuvan pian.

Foorumin osoite on keskustelu.gootti.net. Käykää siellä ja katselkaa, lukekaa, kirjoittakaa ja rekisteröitykää.

Aikamoinen työ oli laittaa keskustelulauta edes tuollaiseen jamaan. MiniBB:lle ei ollut edes suomenkielistä kielipakettia, joten jouduin sellaisen itse tekemään. Suomennokset ovat siis vähän mitä sattuu. Foorumin ulkoasu piti ensin merkata uusiksi (ja sitten upottaa se ulkoasuun), kun olivat niin huonolaatuista jälkeä tehneet alkuperäisen leiskan suunnittelijat.

Päivitys: MiniBB:n suomenkielisen kielipaketin voi ladata tästä (ZIP-paketti, koko noin 6 kilotavua). Tämä kielipaketti ei välttämättä ole ihan ammattimaista jälkeä ja osan käännetyistä termeistä olisi varmaan voinut kääntää paremminkin.

Tagit:

Nojatuoli.net:in ulkoasu.

  • Julkaistu: 21.02.2006
  • Kategoria:
  • Kommentointi suljettu.

Nojatuoli.net

Juuri avattu Marko Tarvaisen blogi, joka oivaa nimeä Nojatuoli.net kantaa, käyttää sille tekemääni ulkoasua.

Ulkoasuja sekä kokonaisia nettisivustoja rakennan edelleen tilauksesta. Jos siis tarvetta ja käyttöä taidoilleni löytyy, voi meikäläiseen ottaa yhteyttä naputtelemalla sähköpostia osoitteeseen petri.ikonen@kuopassa.com.

Tagit:

Päivän pikainen.

  • Julkaistu: 17.02.2006
  • Kategoria:
  • Kommentointi suljettu.

Ihan vinkkinä vaan heille ja teille, jotka rakennatte nettisivuja ja toteutatte niiden ulkoasuja:

Etenkin Firefoxissa kirjasimen koon vaihtaminen onnistuu lähes huomaamatta. Kannattaa aina ennen webbisivun rakennusurakan aloittamista tarkistaa, onko käytössä olevan Internet-selaimen fonttikokoa tullut säädettyä jossain vaiheessa.

Tagit:

Se mitä on tapahtunut.

  • Julkaistu: 24.12.2005
  • Kategoria:
  • Kommentointi suljettu.

Viime aikoina ei kovin hartaasti ole tullut naputeltua tekstiä tänne blogin puolelle. Syynä moiseen on se, että aikaa ei ole yksinkertaisesti riittänyt blogimerkintöjen julkaisemiseen.

MeseNet.org on jossain määrin syypäänä tai pääsyynä tämän saitin hiljaiseloon. Kun MeseNet.org julkaisi oman kuvagallerian, jonne voivat rekisteröityneet käyttäjät (kuten minä) lisätä omia kuviaan, on huomattu ettei sivuston nykyinen ulkoasu välttämättä ole siihen tarkoitukseen kaikkein sopivin. Kaikenlaisia muitakin toimintoja ja uusia ominaisuuksia on sivustolle lisätty.

Tarkoitus on nyt tehdä uusi ulkoasu, joka korvaa nykyisen MeseNetin leiskan. Ainakin nyt on tiedossa mitä toimintoja ja elementtejä on sivupohjaan saatava asetettua, toisin kuin muutama kuukausi sitten kun MeseNetin nykyistä sinisävyistä ulkoasua ryhdyin työstämään.

Uusi ulkoasu MeseNetille todennäköisesti valmistuu joulun jälkeen. Tätä kirjoittaessani on ulkoasun runko ja grafiikat saatu luotua, jäljellä on enää parin yksityiskohdan viilaaminen ja tietenkin sivupohjan toimivuuden testaaminen eri webbiselaimilla.

Tagit:

Kuoppakuoriainen.

  • Julkaistu: 01.12.2005
  • Kategoria:
  • Kommentointi suljettu.

KuopassaPäivitin sivuston juuri hetki sitten. Sieltä saattaa löytyä vielä pieniä virheitä ja kummallisuuksia, mikä ei liene yllätys kenellekään joka on näitä hommia joskus tehnyt. ;-)

En oikeastaan ole edes laskenut kuinka monta kertaa tämän vuoden aikana on tullut uusittua saitin ulkoasu. Varmaan ainakin kerran, ellei toisenkin.

Erään yksityiskohdan tarina

Sivuston taustakuvaksi on tapetoitu tuollainen tiiliseinä. Se on toteutettu CSS:llä siten, että jotta juupa joopa näin:

body {
background: #000 url(../images/musta/bg1.jpg)
repeat-x 0 100% fixed;
}

Sivun body-elementtiin tuodaan musta taustaväri (värikoodi #000) jonka jälkeen tuodaan itse taustakuvaksi asetettava kuvatiedosto, joka on nimeltään "bg1.jpg". Kyseistä kuvaa toistetaan vaakatasossa (repeat-x) ja se sijoitetaan sivun alaosaan (100%). Taustakuva on liimattu ruudulle käyttämällä ominaisuutta fixed.

Jos olisi haluttu laittaa taustakuva rullaamaan kun sivun vierityspalkkia liikutetaan, olisi voitu asettaa arvo scroll nykyisen arvon fixed sijaan.

Vielä selvennykseksi kuvatiedoston toistamiseen ruudulla: yllä näkyvässä koodiesimerkissä on ominaisuuden repeat-x jälkeen laitettu luku 0. Tämä tarkoittaa, että kuvatiedoston sijainti body-elementissä on sivun vasemmassa laidassa. Luku olisi voinut olla vaikkapa 100%, jolloin taustakuva olisi sijoitettu bodyn oikeaan laitaan. Tällä arvolla ei ole tässä tapauksessa juurikaan merkitystä, sillä kuvatiedostoa toistetaan joka tapauksessa horisontaalisesti.

Tagit:

Uusi sivupohja Warfare Databaselle.

  • Julkaistu: 28.11.2005
  • Kategoria:
  • Kommentointi suljettu.

Warfare Database
Uusi ulkoasu sivustolle, joka on viimeiset kuukaudet käyttänyt aiemmin tekemääni ulkoasua.

Tagit:

MeseNet.org

  • Julkaistu: 20.11.2005
  • Kategoria:
  • Kommentointi suljettu.

MeseNet.org Nyt eilen illalla julkaistu uusi MeseNet.org käyttää ulkoasua, jonka tein sivustolle joskus kesä-heinäkuussa.

Tagit:

Uusitaan kun ehditään.

  • Julkaistu: 19.11.2005
  • Kategoria:
  • Kommentointi suljettu.

Uutta ulkoasua ja massiivista päivitystä luvassa lähiaikoina sivustolle. Tarkoitus on nyt vihdoinkin päivittää rankalla kädellä Kuopassa.com:in ulkoasun lisäksi myös itse sisältöä.

Tagit:

Osittain elastinen on elukoiden toinen versio.

  • Julkaistu: 01.10.2005
  • Kategoria:
  • Kommentointi suljettu.

Elukat.netSen lisäksi että tänään latasin ja asensin Macromedia Dreamweaver 8:n demoversion, sain valmiiksi myös ulkoasun sivustolle Elukat.net. Tuo eläinten ystävien yhteisön ulkoasu käyttää sivun ylä- ja alaidan navigaatioissa aiemmin tässä blogissa mainittua kuvanvaihtotemppua, joka tunnetaan myös nimellä Matrix Reloaded.

Tagit:

Leiska nuorelle yritykselle.

  • Julkaistu: 19.09.2005
  • Kategoria:
  • Kommentointi suljettu.

SamiWeb Solutions SamiWeb Solutionsin verkkosivuille tekemäni ulkoasu on otettu julkisesti käyttöön tänään.

Tagit:

Tältä näytti vuoden 2005 alussa…

  • Julkaistu: 13.08.2005
  • Kategoria:
  • Kommentointi suljettu.

Kuopassa.comin ulkoasu vuoden 2005 alussa

Tagit:

Tämän sivuston ulkoasu ja rakenne tehdään palasista.

  • Julkaistu: 10.08.2005
  • Kategoria:
  • Kommentointi suljettu.

Tässä on eräänlaisen template -tiedoston lähdekoodi:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--#include file="http://www.kuopassa.com/lastut/head.txt" -->

<title>[kirjoita tähän sivun nimi] |<!--#include file="http://www.kuopassa.com/lastut/title_nimi.txt" --></title>

</head>

<body id="www-kuopassa-com">

<!--#include file="http://www.kuopassa.com/lastut/latvusto.txt" -->

[sisältö tulee tähän] <!--#include file="http://www.kuopassa.com/lastut/juuristo.txt" -->

</body>
</html>

Yllä näkyvä litania sisältää normaalin Web-sivun, johon kutsutaan SSI:llä erilaisia tiedostoja mukaan. Nykyinen Kuopassa.comin sivupohja on siis pirstottu ja tallennettu tekstitiedostoiksi (head.txt, title_nimi.txt, latvusto.txt ja juuristo.txt).

Sivuston päivittäminen ja muokkaaminen on kätevää, sillä yhtä tekstitiedostoa muokkaamalla siihen tehdyt muutokset vaikuttavat jokaiseen sivuston sivuun.

Tagit:

Tuubista kännykkään.

  • Julkaistu: 24.07.2005
  • Kategoria:
  • Kommentointi suljettu.

Tuubi.orgTäysin uusi nettisivusto Tuubi.org käynnisti palvelunsa tänään illalla.

Sain kunnian rakentaa Tuubille lay-outin. Leveyttä ja kokoa sivustolla on aika runsaasti, sillä haluttiin antaa paljon tilaa sivustolla käytettävää materiaalia varten. Tuubin ulkoasusta toivottiin värikästä, raikasta ja modernia. Uskon täyttäneeni tilauksen tehneen henkilön toivomukset melko hyvin…

Tagit:

Attel.org

  • Julkaistu: 07.07.2005
  • Kategoria:
  • Kommentointi suljettu.

Atte tilasi minulta hieman yli kuukausi sitten sivupohjan webbisivustolleen. Hänelle tekemäni ulkoasu on nyt vihdoinkin otettu käyttöön, se löytyy osoitteesta www.attel.org.

Sivupohja oli alunperin tarkoitettu blogin ulkoasuksi, mutta sen käyttötarkoitus vaihtui ulkoasun rakennusvaiheessa.

Tagit:

Ei taulukoita, ei divejä.

  • Julkaistu: 01.07.2005
  • Kategoria:
  • Kommentointi suljettu.

CSS:n avulla ainakin yksinkertaisen verkkosivun ulkoasun rakentaminen onnistuu ilman noita table- tai div-elementtejä. Tässä minun aikaansaannokseni: blogileiska.

Tagit: , ,

Huuhtele vanhat pois, paina F5.

  • Julkaistu: 26.06.2005
  • Kategoria:
  • Kommentointi suljettu.

Vanhat grafiikat ja mömmöt saa huuhdeltua pois päivittämällä sivun. (Kokeile napsauttaa pari kertaa näppäimistön nappulaa F5.)

Uusi ulkoasu on siis laitettu nettiin pari minuuttia sitten. Oletan, että joitakin virheitä ja kummallisuuksia näkyy vielä jonkin aikaa — menee hetkinen jos toinenkin kun paikallistan noita epäkohtia.

Uusi toiminto tässä Kuopassa.comin versiossa on tekstin zoomaus, joka onnistuu kätevästi klikkaamalla sivuston oikeassa yläkulmassa näkyvää nappulaa. Oikeassa reunassa olevaa kuvaketta klikkaamalla saa tekstin kokoa kasvatettua ja keskimmäistä näppylää nylkyttämällä teksti pienenee taas normaaliin kokoon. Samat toiminnot on havaittavissa ja käytettävissä myös sivuston oikeassa alakulmassa.

Tagit:

  • Edellinen sivu
  • Seuraava sivu
Blogmaster:
Petri Ikonen, petri.ikonen@kuopassa.com, www.kuopassa.com