Yli 70-vuotias isoäitini on viime aikoina yrittänyt harjoitella tietokoneen käyttöä. Tähän asti käyttö on rajoittunut lähinnä sähköpostin lukemiseen, joten tein tällaisen yksinkertaisen hakemiston hänelle hyödyllisistä verkkosivu-linkeistä.
Tämä toivottavasti helpottaa, nopeuttaa ja monipuolistaa hänen netin käyttöä. Varmasti soveltuisi myös muillekin vanhuksille, joille navigointi internetissä on liian raskasta.
Tyhjä HTML-pohja: https://github.com/PyhaMarkus/webhakemisto
Käytetyt kirjastot:
HTML-sivun perusrakenne
Sivu on koko näytön levyinen, ja jaettu BootStrapin grid-mallin mukaisesti 12 samankokoiseen palstaan, eli gridiin. Linkkejä sisältäviä rivejä on tällä hetkellä kolme, ja niiden lisääminen on tarpeen mukaan erittäin helppoa.
Esimerkki yhdestä ensimmäisen rivin palstasta:
Joudun valitettavasti linkkaamaan koodin kuvina, koska WordPress.com ei ainakaan tue HTML ja CSS-koodia code-tagien sisällä.
col-sm-1 -div määrittää palstan, ja niitä on yhdellä rivillä 12. Lopuksi pitää muistaa sulkea “row” ja “container-fluid” div:ien tagit kiinni.
Kellonaika
Laitoin sivulle myös simppelin kellon, ja haluan, että script ladataan heti sivun alkuun:
Oma rivi ja div kelloa varten:
Itse JavaScript sivuston loppuun ennen kuin-tag suljetaan. Hyvin yksinkertainen JS kello, joka löytyy myös W3Schoolsin tutorialista https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock:
CSS-määritykset
Sivun ulkoasumääritykset. Kommentit selittävät hyvin, mitä mikäkin kohta tekee.
Lopputulos:
Kaikki sivuston elementit skaalautuu näytön leveyden mukaan. Tietyllä välillä tekstit menee liian pieneksi, jolloin ne katoavat kokonaan siihen saakka, kunnes sivu menee mobiilinäkymään.
Sivun voi ladata paikallisesti tietokoneelle ja tallentaa sen vaikkapa selaimen kirjanmerkkeihin. Sitten sen voi laittaa kotisivuksi ja kirjanmerkkipalkin ensimmäiseksi vaihtoehdoksi.
GitHub: https://github.com/PyhaMarkus/Webhakemisto