WordPress-linkkejä

Joitakin WordPress-lisäosia

Huom. kaikki tässä mainitut lisäosat voit asentaa yleensä suoraan WordPressin hallintaliittymästä kohdasta Lisäosat > Lisää uusi

  • WP DB Backup – WordPressin tietokannan automaattiseen varmuuskopiointiin
    • Varmuuskopiot voi esim. asettaa päivittäisiksi ja lähtemään automaattisesti haluamaasi sähköpostiosoitteeseen
  • WP e-Commerce – ilmainen lisäosa verkkokaupan luomista varten
  • GigPress – esim. bändin keikkojen tai muiden tapahtumien listaamiseen
  • BuddyPress – tee WordPressistä yhteisösivusto, jossa kävijät voivat rekisteröityä, lähettää toisilleen yksityisviestejä, luoda ryhmiä jne.
    • Suomenkielisen kielitiedoston ja ohjeet sen asentamiseen löydät osoitteesta fi.buddypress.org

Kurssilla mainittuja ilmaisia teemoja

  • TwentyTen, WP:n oletusteema (valmiina WP:ssä).
  • Platform, melko joustava, hallintaliittymästä muokattava teema (olemassa myös maksullinen Pro-versio)
  • Autofocus, erinomainen ja minimalistinen valokuvablogiteema

Asenna WordPress omalle koneellesi (Mac)

WordPress-sivustojen kehittämisessä on hyödyllistä asentaa oma paikallinen testiympäristö, eli omalle koneelleen. Uusien ominaisuuksien testaus on siten helpompaa eikä tiedostoja tarvitse jatkuvasti siirrellä FTP:llä palvelimelle.

Käyn tässä läpi, miten voit asentaa WordPressin Mac OS X:ään. Vaiheet:

  1. Lataa ja asenna MAMP
  2. Muokkaa /etc/hosts-tiedostoasi (valinnainen)
  3. Lataa WordPress ja siirrä tiedostot palvelimen juurihakemistoon
  4. Avaa sivusto selaimeesi ja asenna WordPress

Vaihe 1: Lataa ja asenna MAMP

WordPressin asentaminen edellyttää tukea PHP-kielelle ja MySQL-tietokannoille. OS X sisältää jo oman version edellä mainituista ohjelmistoista, mutta tyypillistä web-tuotantoympäristöä vastaavan kokonaisuuden saat helpoiten asentamalla MAMP-ohjelmiston, joka on lyhenne sanoista “Mac, Apache, MySQL, PHP”.

Lataa MAMP.

Asenna MAMP raahaamalla MAMP-kansio Ohjelmat-kansioosi.

Käynnistä MAMP. Tämä avaa automaattisesti selaimeen MAMP-aloitussivun, joka toimii samalla vahvistuksena sille, että palvelin toimii normaalisti. Sivulla on myös linkit phpMyAdmin-ohjelmistoon, jota käytetään tietokannan hallinnoinnissa.

Jos sinulla ei ole muita web-palvelimia asennettuna koneellesi, kannattaa ohjelman asetuksista (Preferences) valita välilehti Ports ja klikata painiketta, jossa lukee “Set to default Apache and MySQL ports”.

Voit myös halutessasi muuttaa Apache-välilehdeltä palvelimen juurihakemiston sijaintia.

Avaa sen jälkeen phpMyAdmin MAMP-aloitussivulta ja luo uusi tietokanta WordPressiä varten. Pistä tietokannan nimi muistiin.

Vaihe 2: Muokkaa /etc/hosts-tiedostoasi (valinnainen)

Jos haluat WordPress-asennuksellesi yksilöllisemmän paikallisen URL:n, joudut muokkaamaan /etc/hosts-tiedostoa. Avaa tätä varten Pääte (Terminal).

Syötä seuraava komento:

sudo nano /etc/hosts

Tämä avaa hosts-tiedoston muokattavaksi. Joudut syöttämään järjestelmänvalvojan salasanan.

Lisää hosts-tiedoston loppuun tyhjä rivi ja kirjoita siihen seuraava sisältö, käyttäen tabulaattoria erottimena:

Syötä seuraava komento:

127.0.0.1      wp.dev

Huom! Valitsemasi URL voi olla mikä tahansa (tässä tapauksessa wp.dev). Käytä jotain lyhyttä ja helposti muistettavaa.

Tallenna tiedosto painamalla Control + O ja paina Enteriä. Testaa osoitteen toimivuutta avaamalla selaimeen edellä valitsemasi URL:in.

Vaihe 3: Siirrä WordPress-tiedostot palvelimen juurihakemistoon

Lataa WordPress ja siirrä puretun zip-paketin sisältö palvelimen juureen, joka on oletusarvoisesti /Ohjelmat/MAMP/htdocs/ (/Applications/MAMP/htdocs/). Jos muutit vaiheessa 1 Apachen juurihakemiston sijaintia, siirrä WordPress-tiedostot sinne.

Vaihe 4: Avaa sivusto selaimeesi ja asenna WordPress

Helpoin tapa asentaa WordPress on vain avata se selaimeen ja vastata kysymyksiin. Syötä tietokannan nimeksi aikaisemmin luomasi tietokannan nimi. Tietokannan käyttäjän tunnus on root ja salasana root. Tietokantapalvelimen osoite on yksinkertaisesti localhost. Valitse itsellesi sopiva käyttäjätunnus ja anna palaa. Sinulla on nyt oma testi-WordPress!

Johdanto: HTML, CSS ja Javascript

Alkuperäinen artikkeli: The Web Standards model: HTML, CSS & Javascript (Jonathan Lane). Sekä alkuperäisen että tämän käännöksen oikeudet : Creative Commons Attribution, Non Commercial – Share Alike 2.5.

Miksi erikseen?

Yleensä ensimmäinen kysymys, mitä web-standardeihin liittyen nousee esiin on se, miksi sisältö, tyylit ja toiminnallisuus pitäisi erottaa toisistaan. Sisällön, tyylittelyt ja asettelut on mahdollista toteuttaa pelkkiä HTML-fonttielementtejä ja taulukoita käyttäen, joten miksi pitäisi vaivautua? Vanhoina huonoina aikoina HTML:n taulukkoelementtejä käytettiin yleisesti web-sivujen taittoon, ja jotkut tekevät niin edelleen. Näitä menetelmiä ei kuitenkaan käsitellä tässä. Tässä joitakin tärkeimpiä syitä CSS:n ja HTML:n käyttöön vanhojen menetelmien sijasta:

Koodin tehokkuus: Mitä suurempi tiedosto on, sitä pitempään sen lataaminen palvelimelta kestää. Hitaasti latautuvat sivut heikentävät käyttökokemusta ja voivat aiheuttaa kävijöille jopa lisäkustannuksia (mm. vanhojen modeemien varassa oleville sekä monille mobiilikäyttäjille). Ei siis kannata tuhlata kaistaa suuriin sivuihin jotka sisältävät tyyli- ja asetteluinformaatiota jokaisessa HTML-sivussa. Paljon parempi vaihtoehto on tehdä HTML-tiedostoista mahdollisimman lyhyitä ja siistejä, ja sisällyttää kaikki tyyli-informaatio vain kerran ladattavaan, erilliseen CSS-tiedostoon. Hyvä käytännön esimerkki on A List Apartin toteuttama suositun uutissivuston uudelleenkoodaus HTML/CSS:ää käyttäen: the A List Apart Slashdot rewrite article (http://www.alistapart.com/articles/slashdot/).

Ylläpidon helppous: Edellisestä seuraa myös se, että sinun tarvitsee tehdä muutokset vain yhteen paikkaan, jos olet keskittänyt tyylitiedot yhteen tiedostoon.

Saavutettavuus: Näkövammaiset webin käyttävät voivat käyttää ruudunlukijaohjelmistoa webbisivujen selaamiseen. Näiden lisäksi monet liikuntarajoitteiset käyttävät puheohjattuja ohjelmia, jotka hyötyvät hyvin rakennetuista semanttisista web-sivuista. Mitä vähemmän vain ulkoasuun liittyvää koodia seassa on, sitä helpommin ruudunlukijat ja muut avustavat teknologiat pääsevät “itse asiaan” eli sisältöön käsiksi. Ruudunlukijat eivät pääse käsiksi kuviin upotettuihin teksteihin, eivätkä aina ymmärrä kaikkea JavaScriptin käyttötapoja. Varmista että tärkein sisältösi on kaikkien saatavilla!

Laiteyhteensopivuus: Koska HTML-sivusi sisältää vain sisällön merkkausta, ei ulkoasuun viittaavia elementtejä, sama sisältö voidaan esittää useissa erilaisissa päätelaitteissa, pelkkää CSS-tyylitiedostoa vaihtamalla. CSS tukee myös natiivisti erilaisten tyylisääntöjen luomisen eri esitystavoille, kuten näyttökatseluun, tulosteisiin ja mobiililaitteille.

Hakukoneet: Todennäköisesti haluat hakukoneiden löytävän sisältösi. Jos hakukoneen hakurobotilla on vaikeuksia sivustosi selaamisessa esimerkiksi siksi, ettei otsikoita ole koodissa määritelty oikein, hakusijoituksesi todennäköisesti kärsii siitä.

Se on vain hyvä tapa: Tämä ei ole mikään erityisen painava syy, mutta kysypä keneltä tahansa standardeista perillä olevalta web-suunnittelun ammattilaiselta asiasta, niin saat vastaukseksi että sisällön, ulkoasun ja toiminnallisuuden erottaminen on yksinkertaisesti paras tapa kehittää ohjelmistoja ja web-palveluita.

Paha esimerkki: Microsoft Wordin tuottama yksinkertainen www-sivu

Koodi, jokaisen sivuston perusta

HTML ja XHTML ovat merkkauskieliä, jotka koostuvat elementeistä, jotka sisältävät attribuutteja. Jotkut näistä elementeistä ja attribuuteista ovat pakollisia, toiset eivät. Näillä elementeillä merkitään asiakirjan sisältämät eri sisällöt, ja määritellään mm. mitkä osat siitä ovat otsikoita, listoja ja tekstikappaleita.

Kuten saatat arvata, elementit määrittelevät varsinaisen tietotyypin, ja attribuuteilla määritellään lisätietoja kuten yksilöivä ID tai linkin osoite. Huomaa että merkkauksen eli koodin pitäisi olla mahdollisimman semanttista, ts. sen pitäisi kuvata sisällön merkitystä niin hyvin kuin mahdollista.

Mitä on XHTML?

XHTML:n X-kirjain on lyhenne sanasta “extensible”. Yksi yleisimmistä aloittelijoiden kysymyksistä liittyy siihen, pitäisikö käyttää HTML:ää vai XHTML:ää. Molemmat tekevät pitkälti samaa asiaa, isoin ero on rakenteessa.

En huolehtisi aluksi liikaa siitä, kumpaa käytät. Uusi HTML5-standardi  sallii kummatkin merkkaustavat, joten voit valita sen mikä tuntuu itsestäsi selkeimmältä.

Mitä on validointi?

Koska HTML, XHTML ja CSS ovat standardeja, niitä valvova taho World Wide Web Consortium (W3C) on luonut validaattoreita, joita voit käyttää tarkistaaksesi koodin oikeellisuuden. Ne huomauttavat esimerkiksi puuttuvista sulkutageista (puhutaan näistä myöhemmin…) tai lainausmerkeistä attribuuttien ympärillä. HTML-validaattori löytyy osoitteesta http://validator.w3.org CSS-koodisi voit tarkistaa osoitteessa

http://jigsaw.w3.org/css-validator/

CSS

Cascading Style Sheet -tyylikielellä voit säätää hyvin tarkasti sivusi  ulkonäköä ja asettelua. Voit muuttaa ja lisätä värejä, taustakuvia, muuttaa fonttikokoja ja tyylejä ja jopa asetella elementit haluamallasi tavalla sivulle. Tyylien määrittelyyn on kolme pääasiallista tapaa: elementin uudelleenmäärittely, tyylin määrittely jollekin ID:lle tai tyylin määrittely luokalle.

1. Elementin uudelleenmäärittely. Voit muuttaa tapaa, jolla mikä tahansa HTML-elementti esitetään määrittelemällä sille tyylisäännön. Jos haluat kaikkiin tekstikappaleisiisi kaksinkertaisen rivivälin ja vihreän tekstin, tekisit CSS-tiedostoosi seuraavanlaisen säännön:

p {
  line-height: 2;
  color: green;
}

Nyt kaikki teksti, joka on <p></p> -tagien sisällä näytetään kaksinkertaisella rivivälillä ja vihreällä tekstivärillä.   2. ID:n määrittely. Voit antaa mille tahansa elementille ID-attribuutin, joka määrittelee sen yksilöllisesti. Sama ID-arvo voi esiintyä samalla sivulla vain yhden kerran, esim. id=”valikko”. Näin voit tarkemmin hallita sivun ulkoasua, jos haluatkin esim. vain yhden tekstikappaleen tuplarivivälillä ja vihreällä värillä.   Annetaan ensin haluamallemme elementille ID:

<p id="korostus">Korostettava tekstikappale</p>

 

Sitten määritellään vastaava CSS-sääntö:

#korostus {
  line-height: 2;
  color: green;
}

 

Huomaa #-merkki, jota käytetään CSS:ssä (mutta ei HTML:ssä) id:n merkitsemiseen.

3. Luokan määrittely. Luokat (class) toimivat samalla tavoin kuin id:t, sillä erotuksella että luokan voi määritellä useammalle elementille. Esim. näin:

<p>Yksi korostettu tekstikappale.</p>
<p>Toinenkin korostettu tekstikappale.</p>

CSS-sääntö tehdään vastaavasti, mutta luokkaa merkitsemään laitetaan eteen piste (.):

.korostus {
  line-height: 2;
  color: green;
}

JavaScript – toiminnallisuuden lisääminen web-sivulle

Lopuksi, JavaScript on ohjelmointikieli, jolla voit lisätä toiminnallisuutta web-sivuillesi. Voit esimerkiksi tarkistaa web-lomakkeeseen syötetyt tiedot ennen kuin ne lähetetään eteenpäin, luoda raahaa- ja pudota -toimintoja, muuttaa sivun tyylejä lennossa, animoida sivulla olevia elementtejä ja miljoona muuta asiaa. Moderni JavaScript toimii yleensä samalla idealla kuin CSS, eli etsitään kohde-elementti ja tehdään sille jotakin. Sen toimintapa ja kirjoitusmuoto ovat kuitenkin varsin erilaiset.   JavaScript on hyvin laaja aihe, ja yksinkertaisuuden vuoksi sitä ei tulla käsittelemään seuraavissa esimerkeissä.

Esimerkkisivu

Jätin tarkoituksella käymättä läpi useita yksityiskohtia, mutta niihin palataan myöhemmin. Otetaan tähän väliin oikea esimerkkisivu, jotta saat käsityksen siitä minkä tyyppisten juttujen parissa tulet kurssin aikana puuhastelemaan.   Alla oleva esimerkkisivu on lista viitteistä, joka voisi löytyä esimerkiksi jonkin raportin tai tutkielman lopusta. Lataa esimerkkikoodi.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>References</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="bggraphic"></div>
  <div id="header">
    <h1>References</h1>
  </div>
  <div id="references">
    <cite>Adams, J. R. (2008). The Benefits of Valid Markup:
     A Post-Modernistic Approach to Developing Web Sites.
     <em>The Journal of Awesome Web Standards, 15:7,</em> 57-62.</cite>
    <cite>Baker, S. (2006). <em>Validate Your Pages.... Or Else!.</em>
     Detroit, MI: Are you out of your mind publishers.</cite>
    <cite>Lane, J. C. (2007). Dude, HTML 4, that's like so 2000.
     <em>The Journal that Publishes Genius, 1:2, </em> 12-34.</cite>
    <cite>Smith, J. Q. (2005). <em>Web Standards and You.</em>
     Retrieved May 3, 2007 from Web standards and you.</cite>
  </div>
  <div id="footer">
    <p>The content of this page is copyright © 2007
     <a href="mailto:jonathan.lane@gmail.com">J. Lane</a>
    </p>
  </div>
</body>
</html>

En lähde ylläolevaa ruotimaan rivi riviltä, mutta muutamaan seikkaan voit kiinnittää nyt huomiota:

Rivillä yksi on ns. dokumenttityyppi, Document Type Declaration, tai ihan lyhyesti vain “doctype”. Tässä tapauksessa dokumenttityyppi on uuden HTML5-standardiehdotuksen mukainen. Se määrittelee mitä sääntöjä koodisi tulisi noudattaa, jotta validaattori osaa tarkistaa sivun oikein.

Rivillä 8 viitataan tyylitiedostoon, jossa olevia tyylisääntöjä sovelletaan tämän sivun näyttämiseen.

Jokaiselle viitetyypille (merkitty ‘cite’ -elementeillä) on merkitty oma luokkansa. Näin voin määritellä niille jokaiselle oman tyylisääntönsä.

Vilkaistaanpa ylläolevaa sivua varten tehtyjä CSS-tyylejä:

styles.css

body {
  background: #fff url('images/gradbg.jpg') top left repeat-x;
  color: #000;
  margin: 0;
  padding:0;
  border: 0;
  font-family: Verdana, Arial, sans-serif; font-size: 1em;
}
div {
  width: 800px;
  margin: 0 auto;
}
#bggraphic {
  background: url('images/pen.png') top left no-repeat;
  height: 278px;
  width: 362px;
  position: absolute;
  left: 50%;
  z-index: 100;
}
h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 1.5em;
  margin-bottom: 30px;
  background: url('images/headbg.png') top left repeat;
  padding: 10px 0;
}
#references cite {
  margin: 1em 0 0 3em;
  text-indent: -3em;
  display: block;
  font-style: normal;
  padding-right: 3px;
}
.website {
  border-right: 5px solid blue;
}
.book {
  border-right: 5px solid red;
}
.article {
  border-right: 5px solid green;
}
#footer {
  font-size: 0.5em;
  border-top: 1px solid #000;
  margin-top: 20px;
}
#footer a {
  color: #000;
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}

Tyylien luomisessa lähti vähän mopo käsistä, mutta saat niistä aavistuksen, mitä kaikkea CSS:llä on mahdollista tehdä.

Rivillä yksi määritellään joitakin oletusasetuksia kuten tekstin ja taustan värit, tekstin ympärille tulevan reunan leveys jne. Kaikki eivät välttämättä vaivaudu määrittelemään tällaisia oletusasetuksia, ja käytännössä kaikki modernit web-selaimet määrittelevät omat oletustyylinsä. Se on kuitenkin hyvä ajatus, sillä voit tarkemmin kontrolloida miltä sivusi näyttää eri selaimissa.

Seuraavalla rivillä olen määritellyt sivun leveydeksi 800px (tässä voisi olla prosenttiarvo, jolloin sivun leveys riippuisi selainikkunan leveydestä). Asettamani marginaaliarvo (margin) varmistaa että sisältö pysyy keskitettynä.

Tarkastellaan seuraavaksi sivulla käytettyjä taustakuvia (määritelty background: url -säännöillä). Sivulla on kolme erilaista taustaelementtiä. Ensimmäinen on liukuväri, joka toistuu sivun yläosassa. Toisena olen käyttänyt puoliksi läpinäkyvää PNG-tiedostoa kynää esittävässä kuvassa. Osittain läpinäkyvät kuvat eivät toimi Internet Explorerin versioissa 6 tai sitä vanhemmissa selaimissa, mutta toimivat lähes kaikissa moderneissa selaimissa. Lopuksi, olen käyttänyt toista puoliläpinäkyvää PNG-tiedostoa otsikon taustakuvana. Se antaa otsikolle hieman lisää kontrastia.

HTML:ssä, CSS:ssä ja Javascriptissä ei ole mitään mystistä. Standardien mukaisella merkintätavalla saat kaikkein varmimmin aikaiseksi sivuja, jotka toimivat jatkossakin eri selainversioilla ja lukuisilla uusilla web-selaukseen käytetyillä laitteilla.

Opiskeluresursseja

Esimerkkitiedostoja

HTML

CSS

Muuta

FTP-ohjeita

Editorit

Kun Notepad ei oikein riitä… joitakin ilmaisia editoreita.

Ilmaisia HTML & CSS -pohjia

Lomakkeet

Mikä on Twitter?

Twitter on mikroblogipalvelu, jossa käyttäjät voivat kirjoittaa 140 merkin pituisia viestejä tai “tilapäivityksiä” ja lukea toistensa viestejä. Alkuperäinen ajatus on “Kerro mitä olet tekemässä”.

Kirjoittamasi viestit muodostavat “virran”, joka on lähtökohtaisesti julkinen. Muut käyttäjät voivat halutessaan seurata päivityksiäsi, niin että he näkevät viestisi henkilökohtaisella aloitussivullaan. Sinä voit myös seurata muiden käyttäjien päivityksiä. Seuraajapyyntöjä ei tarvitse erikseen hyväksyä, ellei ole tehnyt omista päivityksistään salaisia.

Twitterin suosion salaisuus

Twitterin voima on sen yksinkertaisuudessa. Käyttäjien väliset kontaktit ovat lähtökohtaisesti yksisuuntaisia, eli voin seurata kenen tahansa päivityksiä ilman, että tällä on velvoitetta seurata minua.

Miljoonien ympäri maailmaa olevien käyttäjien myötä Twitteristä on tullut loistava tapa seurata tiettyyn aihepiiriin liittyvää viestintää reaaliaikaisesti, esim. urheilutapahtumia, luonnonmullistuksia, seminaareja tms.

Merkittävä hyöty Twitterissä verrattuna vaikkapa Facebookiin on lisäksi sen avoimuus. Päivityksiä voi lukea ja kirjoittaa monilla eri ohjelmilla, ja tämän avoimuuden ansiosta Twitteriä hyödyntäviä ja sen päälle rakentavia palveluita on syntynyt tuhansia.

Twitter työssä

Erityisesti asiantuntija-ammateissa Twitter voi olla hyödyllinen työkalu omaan työhön liittyvien pulmien ratkaisussa, asiakaspalvelussa ja oman osaamisensa markkinoinnissa. Yrityksille se antaa mahdollisuuden viestiä asiakkaidensa kanssa henkilökohtaisemmalla tasolla.

Itse hyödynnän Twitteriä erityisesti verkostostoitumiseen oman alan ihmisten kanssa, sekä web-alan “rock-tähtien” tekemisten seuraamiseen.

Ongelmat

Twitter-sivusto on toistaiseksi vain englanninkielinen, joka voi hankaloittaa sen käyttöä. Viestejä voi tietenkin kirjoittaa millä kielellä tahansa, ja viime aikoina suomenkielinen yhteisö on kasvanut merkittävästi.

Muita selkeitä ongelmia Twitterissä on arvailu sen pitkän tähtäimen tulevaisuudesta: koska kaikki Twitterin käytössä on toistaiseksi ilmaista, on vaikea nähdä miten se alkaisi tuottaa joskus rahaa ja turvata olemassaolonsa. Tämä tekee palvelun sidonnaisuuden yhteen palveluntarjoajaan entistä ikävämmäksi. Koko elämää ei siis kannata rakentaa Twitterin varaan, ja muitakin vaihtoehtoja on, mm. avoimen lähdekoodin Identi.ca ja suomalainen Qaiku.