html – Tarkkaamo

Full Page Background Video Styles

Jussi Linkola — Mon, 29 May 2017 06:09:47 +0000

Video verkkosivun taustana voi olla vaikuttava suunnitteluelementti. Chris Coyier on tehnyt aiheesta mainion ohjeen: Full Page Background Video Styles – The Media Temple Blog

Ääntä websivulle

Jussi Linkola — Mon, 21 Jan 2013 11:22:20 +0000

Miten lisätään ääntä verkkosivulle? Tähän löytyy useita mahdollisuuksia, joista esittelen tässä muutaman.

Käytän esimerkkinä musiikkikappaletta, jonka olen tallentanut www-palvelimelle osoitteeseen:

http://jml.kapsi.fi/pore/music/Pore_02_-_I_know_where_I_stand.mp3

Minulla on siis mp3-tiedosto nimeltään Pore_02_-_I_know_where_I_stand.mp3, joka sijaitsee palvelimella jml.kapsi.fi hakemistossa /pore/music/. Näin se saadaan soimaan:

1. Suora linkki tiedostoon

Ensimmäinen tapa tarjota kyseinen tiedosto on tehdä siihen normaali linkki:

I Know Where I Stand (mp3 3.5M).

Se, mitä linkkiä klikkaamalla tapahtuu, riippuu www-selaimesta. Selain saattaa osata soittaa tiedoston tai mahdollisesti se ehdottaa lataamaan tiedoston omalle koneelle, mistä sen voi toistaa koneen mediasoittimella. Tiedoston voi yleensä tallentaa myös klikkaamalla sitä hiiren oikeanpuoleisella napilla ja valitsemalla tallenna nimellä tai jotain vastaavaa. Tapa sopiikin parhaiten sellaisiin tilanteisiin, joissa halutaan jakaa tiedosto tallennettavaksi ja käyttäjän omilla audiosoittimilla kuunneltavaksi.

2. HTML5 & -elementti

Seuraava tapa voisi olla hyödyntää HTML5-kuvauskielen -elementtiä sivun koodauksessa seuraavasti:



Valitettavasti selaimesi ei tue tätä audiomuotoa

Tämän tuloksena nykyaikainen www-selain esittää audiosoittimen ja vanhentunut selain ilmoittaa virheestä:

Valitettavasti selaimesi ei tue tätä audiomuotoa

Tämä on suhteellisen helppo ja kevyt toimitatapa, joka vaatii jonkin verran HTML-osaamista. Miinuspuolena on HTML5-vaatimus, jota vanhemmat www-selaimet eivät välttämättä tue (jos et näe yllä audiosoitinta, päivitä www-selaimesi).

3. Sivuille asennettu soitin

Verkosta löytyy useita audiosoittimia, jotka voi asentaa omalle sivustolle. Tässä esimerkki MP3 Player -soittimesta, jonka olen asentanut Tarkkaamo-blogiin:

Soittimen HTML-koodi näyttää tältä:

On huomioitava, että tämä vaatii riittäviä oikeuksia www-palvelimelle, jolla sivusto toimii. Jos käytössä on esimerkiksi Blogger -blogialusta, ei tätä vaihtoehtoa voi käyttää, koska palveluun ei ole mahdollista asentaa tarvittavaa Flash-tiedostoa.

Myös tämän esimerkin soittimessa miinuksena on Flash-toteutus, eli se ei toimi iPadissä eikä iPhonessa. Vaihtoehtona voisi käyttää jotain HTML5-soitinta, esimerkiksi:

MediaElements.js tai
JPlayer

4. Äänen tallennukseen ja jakamiseen tarkoitettu verkkopalvelu

Viimeinen, monia etuja tarjoava keino on tallentaa äänitiedostot tätä tarkoitusta varten kehitettyyn verkkopalveluun ja käyttää palvelun tarjoamia jakamis- ja upotusmahdollisuuksia. Suosittelen tähän SoundCloud -palvelua. Sen avulla tiedoston voi upottaa monipuolisen soittimen avulla osaksi www-sivua, ja se mahdollistaa myös muita jakamistapoja:

Yllä oleva upotus toimii seuraavan koodin avulla:

SoundCloudin soitin toimii myös iPadilla, ja palvelussa on mainiot mahdollisuudet kommentoimiseen ja kuuluvuuden lisäämiseen, jos se on tavoitteena. Kaupan päälle saa myös tilastointia tiedostojen soittomääristä.

Simple Styles for Horizontal Rules | CSS-Tricks

Jussi Linkola — Wed, 23 Nov 2011 06:58:48 +0000

Simple Styles for Horizontal Rules | CSS-Tricks.

Muutama CSS-muotoilu tuomaan vaihtelua

-elementin muotoiluun.

Googlen web-fontit

Jussi Linkola — Sun, 03 Jul 2011 08:51:09 +0000

Webdesignereiden perinteinen riesa on www-sivujen ulkoasun ja sivunrakennustekniikoiden ristiriita; HTML ja CSS eivät luonnostaan tarjoa riittäviä mahdollisuuksia sivujen ulkoasujen visiuaaliseen esittämiseen. Myös käytettävissä oleva fonttivalikoima on varsin rajoittunut riippuvainen käyttäjien konelle asennettua oleviin fontteihin. Fonttirajoitusta on pyritty kiertämään erilaisilla tekniikoilla. Nyt Google on julkaissut oman ratkaisunsa fonttiongelmaan.

Google Web Fonts tarjoaa erinomaisen fonttiselaimen, jonka avulla on mahdollista selata lähes kahtasataa vapasti käytettävää fonttia.

Fonttikirjastosta voi valita suosikkifontteja omaan kokoelmaansa ja fonttien käyttäminen omilla www-sivuilla on helppoa. Fontti liitetään sivulle yhdellä -osioon määriteltävällä linkillä, CSS-importilla tai Javascriptillä.

Kokelin tekniikkaa omalla käyntikorttisivullani ja se tuntuu toimivan oikein mukavasti. Käyttöönotto meni näin:

Googlen Web-fonttien käyttöönotto

Ensiksi etsin fonttiselaimella sopivan fontin, jonka upotuslinkin lisäsin sivun -osioon:

Sen jälkeen lisäsin fontin sivun CSS-määrityksiin:

font-family: 'Quattrocento', georgia, serif;

Siinä kaikki :)