October 24, 2020
  • 11:10 pm Microsoft 365 – Salasanan resetointi itsepalveluna (SSPR)
  • 9:12 pm Exchange Online – Roskapostin estäminen top-level domainin (TLD) perusteella
  • 11:26 pm Windows 10 – Fiddler Web Debugger Proxyn asennus ja käyttöönotto
  • 3:00 am Microsoft 365 -käyttäjätilin kaappaamiseen reagointi – Tilanteen normalisointi
  • 12:40 am Microsoft 365 -käyttäjätilin kaappaamiseen reagointi – Tilin turvaaminen

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:

WH10

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:
WH1
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:
WH2
Oma rivi ja div kelloa varten:
WH3
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:
WH4

CSS-määritykset

Sivun ulkoasumääritykset. Kommentit selittävät hyvin, mitä mikäkin kohta tekee.
WH9

Lopputulos:

webhakemisto
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


TÄTÄ DOKUMENTTIA SAA KOPIOIDA JA MUOKATA GNU GENERAL PUBLIC LICENSE (VERSIO 3 TAI UUDEMPI) MUKAISESTI. HTTP://WWW.GNU.ORG/LICENSES/GPL.HTML
MARKUS PYHÄRANTA
Markus Pyhäranta

RELATED ARTICLES
LEAVE A COMMENT