Mikseri.net
Mikseri.net on ilmaisen ja teostovapaan musiikin jakeluun keskittyvä sivusto/yhteisö. Mikseri tarjoaa rekisteröityneille käyttäjille mahdollisuuden mm. kommentoida muiden kappaleita, lisätä omia tuotoksiaan sivuille, soittostatistiikat, kuvagallerian, aktiivisen foorumin ja mahdollisuuden hienosäätää omia artistisivujaan. Seuraavasta jutusta löydät vinkkejä juuri viimeksi mainittuun.
Mikseri.net-artistisivun muokkaus
Tämä opas keskittyy artistisivun muokkaukseen lähinnä CSS-tyylikielellä. Yritän selittää asiat mahdollisimman maallikkotermein, mutta edes alkeellisesta HTML ja/tai CSS-taidoista on hyötyä. Internet on täynnä hyviä HTML- ja CSS-oppaita niin englanniksi, kuin suomeksikin. Erittäin suositeltava osoite kumpaiseenkin kieleen tutustumiseen ja opiskeluun on W3 Schools. En edes yritä listata jokaista mahdollista modausvaihtoehtoa, vaan yritän ennemminkin antaa välineet alkuun pääsemiseen.
Tämä on ensimmäinen välihuomautus. Huutomerkillä merkityissä kohdissa kerron aina jotain edelliseen aiheeseen liittyvää. Kursiivi tarkoittaa uutta termiä, lihavointi taas esimerkkiä tai koodinpätkää. Alleviivatuista lyhenteistä tai termeistä saat lisätietoa viemällä hiiren niiden päälle.
Sen pidemmittä löpinöittä, mennäänpä asiaan:
Alkeet
HTML -kieltä käytetään verkkosivuilla kuvaamaan mitä sisältöä sillä näytetään. CSS -kielellä taas kuvataan miten sisältö näytetään. Artistisivun muokkauksessa taikasana on juuri "miten".
HTML-koodin sekaan lisätty CSS-koodi alkaa aina <style type="text/css">-tagilla. Tämä tagi kertoo selaimelle, että sitä seuraa CSS -koodia. Koodin suoritus loppuu </style>-tagiin. Artistisivun asetuksista löytyvässä Artistisivun CSS-laatikossa nämä kuitenkin jätetään pois. Jos haluat katsoa mallia muiden Mikseriläisten koodailuista, etsi heidän artistisivunsa lähdekoodista heidän CSS-tiedostonsa osoite. Osoiteen tunnistaa sen .css-päätteestä.
Takaisin sivun alkuunKommentointi
Artistisivun, kuten nykyisellään käytännössä kaikkien nettisivujen, muotoilu on toteutettu siis CSS-kielellä. CSS on yleensä sijoitettu omaan tiedostoon, jonka pääte on .css. Näin myös Mikserissä. Artistisivun muotoilut löytyvät osoitteesta http://www.mikseri.net/styles/artistpage.css. Mennäänpä vilkaisemaan:
/************************************************
* SIVUN PERUSASETUKSET *
************************************************/
Tiedoston avatessasi, ensimmäisenä näet copyright- muistutuksen, sekä yllä näkyvän SIVUN PERUSASETUKSET-tekstin. Nämä kaksi kohtaa ovat kommentteja. Kommentit eivät näy missään nettisivulla ja selaimet ohittavat kommentit huomiotta. Kommentti alkaa /* merkinnällä ja kommentti lopetetaan vastaavasti */ merkinnällä. Eli tähän tyyliin:
/* Tämä on kommentti */
Miksi sitten käyttää kommentteja, jos ne eivät näy valmiilla sivulla? Kommentteja kannattaa käyttää, koska ne auttavat sinua muistamaan mitä olet säätänyt aikaisemmin. Kommentit auttavat muitakin ymmärtämään mitä olet tehnyt. Kommenteilla voit myös rajata väliaikaisesti pois osia koodistasi. Tämä on erittäin käytännöllistä silloin, kun yrität säätää useampaa muokkausta kerralla.
<!-- HTML:ssä kommentoidaan näin -->
Mikä ihmeen luokka?
Seuraavana eteen tulee:
body {
margin: 0px;
padding: 0px;
background-color: #aabbcc;
}
Yllä näkemäsi koodinpätkä vaikuttaa HTML-elementtiin nimeltään body. Kun artistisivun lähdekoodissa viitataan tähän elementtiin, luetaan tämä kohta CSS-koodista. body sanaa seuraa avoin aaltosulku {, tämän jälkeen muotoilut erotettuna toisistaan puolipisteillä ; ja lopuksi vielä muotoilut suljetaan aaltosululla }.
Eli siis artistpage.css -tiedosto on kokoelma muotoiluja varsinaisen artistisivun HTML-elementeille. Nämä muotoilut kertovat selaimelle, miten sivu näytetään. Itse artistisivun perusrakenteeseen et pysty vaikuttamaan, sillä sivun lähdekoodi on tallennettu Mikserin palvelimelle ja ainoastaan yllä pidolla on valta puuttua siihen, mutta koska selain lataa oman CSS -koodisi vasta artistpage.css -tiedoston luvun jälkeen, on omalla CSS -koodilla suurempi prioriteetti. Tämä mahdollistaa sivujesi modaamisen.
Tämän sivun lopusta löydät listan yleisimmin muokatuista elementeistä.
Takaisin sivun alkuunMitä voi modata? / Eka modaus
Miltein kaikkia artistisivun osia pystyy muokkaamaan lähtien ylälaidan mustanharmaasta valikkopalkista viimeiseen copyright -huomautukseen. Rajana on oikeastaan vain oma mielikuvitus ja innostuksen taso säätämiseen. Kun löydät sivusi lähdekoodista viittauksen luokkaan ( class="jokin_luokka" tai id="jokin_luokka" ) ja löydät myös kyseisen luokan artistpage.css:stä ( .jokin_luokka tai #jokin_luokka ), voit olla varma, että kyseistä luokkaa voi muokata.
CSS-luokkaan voidaan viitata HTML:n puolella kahdella eri tavalla. class="luokka" löytyy CSS-tiedostosta muodossa .luokka ja id="luokka" muodossa #luokka. Voit myös tehdä muotoiluja "luokattomille" HTML-elementeille, kuten aiemman esimerkin body-elementille, mutta usein vaikutus leviää sivuilla laajemmalle alueelle, kuin ehkä oli tarkoitus.
Katsotaanpas taas yksi esimerkki. Kuvitellaan, että haluat tehdä biisiesi ympärille laatikot. Ensimmäisenä avaat artistisivusi lähdekoodin tarkasteltavaksi. Nyt käytä etsi/find-toimintoa ja etsi seuraavanlainen rivi:
<!-- song -->
Etsi-toiminto on näissä hommissa kultaakin kalliimpi apu. Toiminto aukeaa useimmiten painamalla Ctrl + F
Tästä alkaa biisien esityksestä sivuillasi vastaava HTML-koodi. Muutama rivi alaspäin tästä näet seuraavanlaisen rivin:
<td class="artist_song">
Tätä luokkaa ei löydy artistpage.css:stä, koska sille ei ole asetettu mitään muotoilusääntöjä. Se ei kuitenkaan tarkoita sitä, etteikö niitä voisi tehdä itse. Mene Kotisivun ulkoasu-sivulle ja siellä Artistisivun CSS-kohtaan ja kirjoita seuraava:
.artist_song {
border: medium solid #ffffff;
}
Paina nyt Päivitä tiedot-nappia ja mene takaisin artistisivullesi. Kappaleidesi ympärille on nyt ilmestynyt valkoiset kehykset. Jos ei, palaa takaisin asetuksiin ja tarkista, kirjoititko koodin varmasti oikein. Juuri muokkaamasi luokka ei sisällä kuin yhden muotoilun: border, jolle on annettu arvot medium, solid ja #ffffff. Border-käsky piirtää reunuksen, medium kertoo reunuksen olevan normaali kokoa, solid taas kertoo reunuksen olevan "jatkuva" ja #ffffff ilmoittaa reunuksen värin Heksoina. Koita vaihtaa border:in arvot muotoon 3px dotted #000000 ja katso mitä tapahtuu.
Takaisin sivun alkuunMikserin CSS:n "korjailu"
Mainitsin aiemmin, että käyttäjän omalla CSS:llä on suurempi prioriteetti, kuin artistpage.css:tä löytyvällä koodilla. Mitä tämä sitten käytännössä tarkoittaa? Kun artistivu ladataan kävijän ruudulle, selain hakee sivun muotoilut aina ensin artistpage.css:tä, mutta kun artistisivun HTML:n latauksessa päästään vaiheeseen, jossa alkavat käyttäjän oma CSS -koodi, korvautuvat alkuperäiset tyylimääritykset uusilla, käyttäjän antamilla määrityksillä. Otetaanpa jälleen esimerkki:
Artistpage.css -tiedostosta löytyy seuraavanlainen kohta:
.tekno {
border: 1px solid #000000;
background: #eeeeee;
color: #000000;
font-family: verdana, arial, helvetica;
font-size: xx-small;
font-weight: bold;
}
Tämä luokka vastaa artistihaku- ja arvosanakenttien muotoilusta. Ajatellaan, että haluat muuttaa näiden kenttien taustaväriksi vaikka punaisen ( #ff0000 ) ja tekstin väriksi valkoisen ( #ffffff ). Taustavärin määritys löytyy kohdasta background ja tekstin väri kohdasta color. Mennäänpä tekemään nämä muutokset jälleen Artistisivun CSS -kenttään:
.tekno {
background: #ff0000;
color: #ffffff;
}
Huomaat, että juuri tekemäsi luokka on huomattavasti pienempi, kuin alkuperäinen .tekno -luokka. Tällä ei ole merkitystä, sillä uusi koodi korvaa alkuperäisen luokan määrittelyjä vain niiltä osin, kuin se on muuttunut alkuperäisestä. Eli tässä on syy, miksi ei kannata kopioida kokonaisia luokkia, jos on esimerkiksi muuttamassa vain yhtä tai muutamaa määritystä.
Takaisin sivun alkuunOmien kuvien käyttö artistisivuilla
Eteesi voi tulla tilanne, jolloin pelkkä fonttien säätely ja biisien laatikointi ei riitä tyydyttämään taiteellista kunnianhimoasi ( /säätämisen tarvettasi), vaan haluat lisätä artistisivullesi enemmän persoonallisia yksityiskohtia. Tämä onnistuu esimerkiksi lisäämällä erilaisia kuvia tehostamaan sivusi visuaalista antia. Mikseri.net tarjoaa käyttäjilleen kätevän kuvapankin Kuvagallerian muodossa.
Jos et halua sotkea galleriaasi kasalla pikkukuvia, jotka eivät omillaan ole kovin mieltäkiihottavaa katseltavaa, voit myös käyttää esim. yhteydentarjoajasi tarjoamaa kotisivutilaa kuviesi säilytykselle. Myös ilmaisia vaihtoehtoja kuviensäilytyspaikaksi on netti pullollaan, mutta kannattaa muistaa, että usein tälläiset palvelut on naitettu yhteen jonkinlaisen ip -osoitteita urkkivan mainospalvelun kanssa. Jos sivuillesi tuleva vierailija käyttää jotain urkintayrityksiä blokkaavaa ohjelmaa (esim. PeerGuardian), voi häneltä jäädä hienot tehostekuvasi näkemättä, jos säilytät kuviasi jossain mainosvetoisessa palvelussa.
Kuvan maksimikoko Mikserin galleriassa on noin 640 x 480 pikseliä. Tätä suuremmat kuvat pienennetään automaattisesti lisäyksen yhteydessä. Kuvien pakkausta saatetaan myös tehostaa, jolloin galleriaan lisättyihin kuviin saattaa ilmestyä virheitä. Virheet näkyvät erityisesti yksivärisillä pinnoilla.
Otetaanpas jälleen tuttu .artist_song -luokka käyttöön. Kuvitellaanpa, että haluat erottaa biisilaatikkosi selkeästi muusta sivusta laittamalla taustakuvan laatikoihin. Käytetään taustakuvana tällä kertaa samaa kuvaa, millä biisien välissä olevat mustat viivat on tehty, eli hl_pixel.gif .
Seuraavaksi lisäämme hieman koodia .artist_song -luokkaasi:
.artist_song {
border: medium solid #ffffff;
background-image: url("http://static.mikseri.net/images/hl_pixel.gif");
}
Nyt artistisivullasi pitäisi näkyä biisilaatikoiden sisällä musta raidoitus. Kannattaa myös pitää mielessä kuvia lisäillessä .gif -kuvaformaatin mahdollistama kuvien läpinäkyvyys.
Takaisin sivun alkuunYleisiä vinkkejä
- Jos koodisi ei toimi...
...niin CSS -validaattorista on iso apu bugien metsästykseen. Surffaa osoitteeseen http://jigsaw.w3.org/css-validator/ ja syötä CSS -koodisi osoite Address: -kenttään. Tulos kertoo, onko koodissasi virheitä.
- Älä tee sivuistasi turhan raskaita
Vaikka eletään laajakaista-aikaa, ei silti kannata tunkea sivujasi täyteen kaikenmaailman GIF-animaatioita yms. hässäköitä. Muista myös, että suurien kuvien käyttöä tulee välttää viimeiseen asti. Sivusi voivat latautua itselläsi nopeasti, sillä kuvat ovat tallessa selaimesi välimuistissa, mutta sivuillasi vierailevat joutuvat lataamaan koko kuvakavalkadisi kerralla.
- Mieti värien käyttöä
Huonoilla värivalinnoilla on helppo pilata sivusi yleisilme sekä luettavuus. Värivalinnat ovat pitkälti makuasioita, mutta hyvä nyrkkisääntö on välttää liian samansävyisiä värejä tekstin ja taustan välillä. Myös liian monimutkainen taustakuva pilaa helposti luettavuuden.
- Kohtuus kaikessa
Vaikka artistisivulla melkein kaikkea voi muuttaa, se ei tarkoita kuitenkaan sitä, että kaikkea pitää muuttaa. Muokkaukset ovat tehokeino, jolla voi antaa kävijälle ammattimaisen kuvan omasta tuotannosta. Älä nosta modauksia sivuillasi pääosaan.
- Opi muilta
Jos näet Mikserissä surffaillessasi hienon artistisivun, niin kurkaa rohkeasti sen lähdekoodiin ja katso miten muokkaukset on tehty. Älä kuitenkaan kopioi toisten koodia suoraan. Toisen työn varastaminen on vain säälittävää.
- Ihmiset ovat erilaisia
...niin myös heidän tietokoneensa. Testaa sivusi vähintään kolmella suosituimmalla selaimella (Opera, Firefox, Explorer) ja eri näyttötiloilla (vähintään 800x600 - 1280x1024).
- Tee parempaa musiikkia
Hieno artistisivu voi antaa kävijälle hyvän ensivaikutelman, mutta jos itse sisältö on kuraa, ei fanitusnappula tule kulumaan ; ).
Näillä ohjeilla sinun pitäisi päästä jo hyvin alkuun modailu-urallasi. Jos sinulle on kuitenkin herännyt kysymyksiä tai sinulla on vaikka parannusehdotuksia tähän oppaaseen, niin laita ihmeessä pikaviestiä Mikserissä tai vaihtoehtoisesti sähköpostia.
Takaisin sivun alkuunLuokat
Tässä on lista muutamista tärkeimmistä luokista artistisivun modaukseen. Luokkia on muitakin ja voit etsiä niitä itse artistisivun CSS -tiedostosta osoitteesta http://www.mikseri.net/styles/artistpage.css tai artistisivusi lähdekoodista.
| Luokka | Käyttötarkoitus |
| .artistbar | Projektin nimi |
| .search | Artistihaun muotoilut |
| .artistlinkbar | Hallintaan / Lofi / Hifi ja jne. -palkki |
| .nappi | 'OK' -nappi |
| .tekno | Artistihaku- ja arvosanakenttien muotoilu |
| .artist_line | Mustat väliviivat biisien välissä |
| .artist_rates | Arvostelupalkki |
| .artist_song | Biisien uloin 'laatikko' |
| .songdata | Biisin nimen 'laatikko' |
| .songname | Biisin nimen muotoilu |
| .songdescription | Biisin esittelyteksti |
| .copynote | Copyright -huomautus sivun lopussa |
| .songbuttons | HiFi/LoFi/Dl -napit |
| .songgenre | Genreteksti |
| .artist_idols | Idolit/vaikutteet |
| .artist_history | Historia |
| .artist_members | Jäsenet |
| .artist_equipment | Laiteisto |
| a.topmenu:link | Selauspalkin linkkien väri |
Vieraskirjan kaikki luokat
| Luokka | Käyttötarkoitus |
| #artist_guestbook | Otsikko ja viestien väri |
| #guestbook_container | Ylä- ja alareunan taustan väri |
| #guestbook_title | "Vieraskirja" -teksti |
| #guestbook_messages | Viestikentän muotoilu |
| .guestbook_bg1.guestbook_bg2 | Parillisten ja parittomien viestien taustat |
| .guestbook_entry_date | Viestin päivämäärä ja kellonaika |
| .guestbook_entry | Tyhjä tila jätettyjen viestien ympärillä |
| .guestbook_entry_username | tuntemattoman nimimerkin fontti |
| a.guestbook:link, a.guestbook:visited ja jne... | Mikseriläisten nimilinkin väri |
| .guestbook_entry_message | Viestien tekstin muotoilu |
| .guestbook_entry_separator | Viestejä erottava väliviiva |
| #guestbook_comment | tyhjä tila alareunan ympärillä |
| guestbook_cell_submit_title, #guestbook_cell_message_title, #guestbook_cell_username_title | "Nimi" ja "Viesti" -tekstien muotoilu |
| #guestbook_message, #guestbook_username | "Nimi" ja "Viesti" -kenttien tekstin muotoilu |
| #guestbook_cell_message_input | Viestinkirjoituskentän reunus |
| #guestbook_message | Viestinkirjoituskenttä |
| #guestbook_submit | Viestin lähetysnappi |