Näin se on tehty VUO:lla

Pihka Puusepänverstas on kuvitteellinen yritys. Sivusto on rakennettu VUO-julkaisujärjestelmällä, ja tämä sivu kertoo mitä siitä näkyy julkisella puolella ja mitä hallinnassa.

Kuvitteellinen sivusto, oikea järjestelmä

Pihka Puusepänverstasta ei ole olemassa. Nimi, tarina, palvelut ja kuvat on laadittu tätä demoa varten, eikä sivuston kautta voi tilata mitään. Kaikki muu on oikeaa: sivusto pyörii VUO-julkaisujärjestelmän tuotantoversiolla täsmälleen samoin kuin asiakassivusto.

Jokaisen sivun alalaidassa on oranssi VUO-esimerkki-laatikko. Se kertoo, mitä VUO:n ominaisuutta sivulla on käytetty ja miten se tehdään hallinnassa muutamalla askeleella.

Mitä julkisella puolella näkyy

  • Etusivu – ryhmittäjä ja ruudukko (palvelukortit), scroll-paljastus, hover-nosto
  • Palvelut – alasivut, alanavigaatio, leivänmurupolku, pudotusvalikko, automaattinen sivunostoalue, ladattavat PDF-tiedostot, taulukko
  • Työnäytteet – kuva-alueet, sivun pääkuva, eri kokoiset kuvaversiot
  • Verstas – kuva-albumi ja kuvaselain, videoupotus (YouTube), Verstaalta-nosto
  • Verstaalta – ajankohtaisjutut alasivuina, RSS-syöte, JSON-rajapinta, Article-rakennetieto, automaattinen juttulista
  • Yhteys – lomake liitetiedostolla ja roskapostisuojalla, FAQ-merkintä hakukoneille
  • Puuesineet – verkkokauppa: tuotesivut hinnalla ja varastosaldolla, katalogi-nosto, kelluva ostoskori, tilaussivu ALV-erittelyllä ja toimituskuluilla
  • Projektisivu – suojattu sivu käyttäjäryhmälle (demotunnus asiakas / pihka2026), kirjautumislomake automaattisesti
  • Kaikilla sivuilla: selkokieliset osoitteet, haku, sivukartta, some-linkit, evästeilmoitus ja tietosuojaseloste, JSON-LD-rakennetiedot (Organization, WebSite, WebPage, BreadcrumbList, FAQPage), sitemap.xml, robots.txt ja llms.txt

Mitä hallinnassa on, mutta mitä et näe täältä

  • Sivueditori: sisältö muokataan suoraan sivulla, alueet raahataan paikoilleen, viimeisin muutos perutaan Ctrl/Cmd+Z:lla
  • Versiohistoria jokaiselle tekstialueelle
  • Sivun kuvat -ruutu: pääkuva ja taustakuva live-esikatselulla
  • Ulkoasu-paletti: sivuston värit, fontit ja välit ilman koodia
  • Tekoälyavustimet: teksti, otsikko, kuvaus ja avainsanat sivun omasta aineistosta
  • Roolit ja muokkauslukot usealle sisällöntuottajalle
  • Syötteet: RSS ja JSON-rajapinta API-avaimella
  • AI-hakukoneiden pääsy botti kerrallaan, llms.txt automaattisesti
  • Tumma teema, kielivalinta (FI/EN), sisäänrakennettu Ohjeet-osio ja järjestelmän omat savutestit

Näin sivusto rakennettiin

  1. Asennus palvelimelle ja ensimmäinen kirjautuminen: asentaja loi tietokannan ja tarjosi sivupohjat.
  2. Sivupohjaksi valittiin Soft light – yksi neljästä mukana tulevasta teemasta.
  3. Sivut, tekstit, kuvat ja lomake lisättiin hallinnasta ilman koodia.
  4. Sivuston oma lisätyyli (yksi CSS-tiedosto) antoi scroll-paljastuksen, korttien hover-noston ja nämä VUO-esimerkki-laatikot.

Lisätietoja: vuodesign.fi