keskiviikko 2. toukokuuta 2018

Netin kuvatiedostot ja optimointi

Kuvittelin, että nykyään kuvien pakkaus ei olisi verkossa erityinen ongelma verkkonopeuksien kasvaessa, mutta toisin näyttää olevan, paikoitellen. Tosin samaa tahmausta saadaan aikaan myös ja edelleen videoilla ja Flash-introilla, jotka rajoittavat sivujen käyttötehokkuutta. Asiakas haluaa mahdollismman nopeasti päästä kiinni haluamaansa tietoon, hän ei suinkaan tule katselemaan upeita introja (normaalisti).

Useat ohjelmistot osaavat pakata lennossa verkkokelpoisia kuvia MUTTA näin ei ole asianlaita aina.
Varsinkin suuria kuvamääriä sisältäville sivuille on syytä tehdä hallitua kuvaoptimointia. Tämä oli verkon alkuaikoina ihan MUST.

Verkossa kulkevat kuvastandardit ovat GIF, JPG ja PNG. Muitakin kuvamuotoja saattavat selaimet osata esittää mutta näitä suosittelen ehdottomasti.

GIF oli ensimmäinen vakiintunut verkkokuvien standardi ja se on edelleen voimissaan varsinkin pakka-animaatioissa (animaatio joka koostuu kuvasarjasta). GIF hävittää kuvadataa ja se myös rasteroi kuvat, eli kaikkein kauneinta kuvalaatua sillä ei saa aikaiseksi, kaikkein keventä, kenties.

JPG tai JPEG kuvat voidaan pakata hyvin täyssävyisen kaltaisiksi, koska sen pakkaumenetelmä perustuu vähiten merkittävän kuvainformaation "hukkaamiseen". Pakkaustehokkuustasoja löytyy useita. PhotoShop tarjoaa 12 eri pakkaustehokkuusvaihtoehtoa. Verkkosivuille seiskalla saa jo upeaa jälkeä ja jos intoa riittää, tehokkuutta voi edelleen lisätä, tarkastelemalla pakkaustehonlisäyksen vaikutusta kuvalaatuun. GIF kuvassa taustan voi poistaa, valitsemalla taustaväri transparentiksi.

PNG tekee pakkauksen omavaltaisesti, eli sen pakkaustehokkuuteen ei ainakaan PhotoShopissa pysty vaikuttamaan. Pakkaus teho on heikompi kuin JPG:n. 2,7 Mt:n JPG kuvasta saattaa tulla 9,7 Mt:n kuva PNG:nä. PNG-muotoa kannattaa käyttää vain pienissä kuvissa, grafiikassa ja logoissa ym. tästä syystä.

Tärkeää on myös (vastoin tapoja), että verkossa esitettävä kuva pienennetään asiallisen kokoiseksi, eli suoraan digikamerasta tuotu kuva on ehdottomasti liian suuri. Nykyaikana kamerakuva voi olla kooltaan esim. 3264 x 2448 pixeliä, kun verkkosivun leveyteen mahtuu 1:1 koossa ainoastaan n. 1200 x 900 pixelin kokoinen kuva, joka siis peittäisi jo koko sivun pienemmissä näytöissä. Lue aikaisempi artikkelini standardiverkkosivun kokovaatimuksista. http://hannukuukkanen.blogspot.fi/2015/
Kuvan latausaika putoaa huomattavsti pienempikokoisena.

JA muistakaa kuvien oikea nimeämistapa verkkosivuille. Lue edellinen artikkeli.
http://hannukuukkanen.blogspot.fi/2018/05/kansioiden-ja-linkkien-nimista-varoitus.html

Kansioiden ja linkkien nimistä varoitus

Olen havainnut, että edelleen löytyy verkosta sellaisia linkkejä, joiden tiedostonimissä  tai poluissa (kansiot) esiintyy ääkkösiä tai välilyöntejä (sanaväli). Näitä eivät kaikki palvelimet ymmärrä ja kaikki selaimet tai verkkosivueditorit, eivät osaa niitä palvelimelle koodata. Linkki ei löydä koskaan perille.

Esimerkiksi: https://www.facebook.com/notes/verkonvaarat-sivuston-tukiryhmä/prismaviestien-poisto-ohje/prismat ja muut.html
(Esimerkkiin olen tarkoituksella lisännyt myös virheellisen tiedostonimen).

Linkin tulisi olla muodossa:
https://www.facebook.com/notes/verkonvaarat-sivuston-tukiryhma/prismaviestien-poisto-ohje/prismat_ja_muut.html
ELI ääkköset korvataan a:lla ja o:lla ta myös ruotsalainen å korvataan a:lla, väliviivat sanajakoina ovat OK tai alaviivat, kuten lisätyssä tiedostonimessä malliksi on laitettu.

Tiedostonimissä ei tule käyttää kansallaisia merkkejä å, ä ja ö (eikä saksalaisten ü-merkkiä), koska näitä merkkejä ei käytetä englannin kielessä ja käyttöjärjestelmät on kehitelty englanninkielisissä maissa. Kansallisista merkeistä tulee yleensä aina ongelmia.

Pisteitä ei tule käyttää erottimena myöskään, koska ne ovat pelvelimien järjestelmien omia standardi erottimia (mm. tiedoston tunnuksen erottimena). Myös kaksoispiste on varattu vain tiettyihin tarkoituksiin. Tiedoston nimi koostuu yleensä varsinaisesta nimestä sekä pisteen jälkeisestä tarkentimesta. Kaksoispistettä käytetään mm. verkko-osoitteissa.

Sallittuja merkkejä nimiosassa ovat englanninkielisen merkistön mukaan kirjaimet A-Z (tai a-z), numerot 0-9 ja erikoismerkit $ (dollari), %, ,-,_ (alleviivaus), ^ (hattu), @ (kissanhäntä tai miumau), {, }, ~ (mato), `, !, # (risuaita), (, ) ja &-merkki. Erikoismerkkien käyttö ei ole, alleviivausmerkkiä lukuunottamatta, suositeltavaa.

Verkon alkuaikoina oli syytä käyttää tiedostonimissä ainoastaan pieniä kirjaimia. Nykyään sekatekstit menevät ja tulevat läpi verkon MUTTA kansioiden ja tiedostojen kirjoitusasun tulee olla HTML-koodissa aina sama kuin itse tiedostonimessä. Tämä virhe syntyy vain jos koodaa käsin linkkejä.
Nykyään, kun verkkosivujen koodaus tehdään ohjelmistoilla, näitä lapsuksia pääsee verkkoon harvemmin enää MUTTA jos noudattaa aina palvelin standardin mukaista kirjoitusasua tiedostoissa, koskaan ei tule ongelmia myöskään palvelin puolella. Varsinkin Mac tietokoneiden käyttäjille tämä vaikuttaa olevan ylipääsemätön ongelma.

Windows 95 oli ensimmäinen Windows-versio, jossa voitiin käyttää ns. pitkiä 255:n merkin pituisia tiedostonimiä. Pitkät tiedostonimet eivät ole edelleenkään suositeltavia verkkokäytössä.


torstai 28. huhtikuuta 2016

Evästeet ja palvelinlokitiedot

Nykyinen tiedonkeruutapa verkkosivuilla on "evästeet" – ”keksit” - "cookies". Toisinaan niistä on käyttäjälle hyötyä, koska evästeiden tallennettu sivustokäyttäytymishistoriatieto saattaa olla avuksi verkkosivulla liikuttaessa tai esim. lomakkeita täytettäessä. Selain voidaan pyytää ilmoittamaan evästeistä. Myös EU säädökset edellyttävät nykyään tämän tiedon ilmoittamisesta sivustolle saavuttaessa. Toisinaan sivulle ei edes pääse, jos ei hyväksy evästeiden käyttöä. Sellainen ei ole aivan hyvän tavan mukaista ja toki kuluttajalla tai asiakkaalla on oikeus sulkea sivu siinä vaiheessa.
Sivujen suunnittelijan ja koodaajan tulee miettiä tarkoin, onko sivusto niin tärkeä asiakkaalle, että hän hyväksyy keksi-kyykyttämisen?

Hienostunein ja vanhin tapa on lukea palvelinlokia. Ohjelmistojakin on tarjolla tarkoitukseen. Lokista voi päätellä hyvin paljon sivustolla vierailevista asiakkaista. Uskon, että tämäkin tekniikka on edelleen käytössä valveutuneimmissa yrityksissä.
Lokitiedoista  (jos evästeiden käyttö on estetty palvelinloki toimii aina), voidaan lukea useita asioita. Sivukutsun lähde IP löytyy, vaikka sitä käyttäisi useampikin henkilö, se kertoo kuitenkin jo paljon. Se kertoo mistä sivuhaku on tulossa. Kansallisuuskin saattaa selvitä. Millä sivuilla kyseinen kone IP on käynyt palvelimella, kauanko on viipynyt sivuilla (poistumisaikaa ei saaada kiinni), jne…

HTML mahdollistaa myös asiakkaan selaimen kautta tulevan tiedonkeruun (ilman evästettä). Mikä selain ja versio ja minkä tyyppiseltä koneelta sivuhaku on peräisin. Mikä käyttöjärjestelmä, minkälainen näyttö on käytössä jne.
Kun laitetieto on tiedossa, voidaan päätellä asiakkaan profiilia edelleen. Mobiililaite, PC, Mac, Linux, Unix... Nämä kaikki kertovat asiakkaasta hyvin paljon kun tietoa vaivaudutaan tulkitsemaan. Varmasti ohjelmistojakin löytyy tämän tiedon keräämiseksi ilman syvällistä asiaan paneutumista.

Verkkosivuille voi laittaa kilpailun, tai jonkin muun palvelun jonka palkintojen tai palvelun saaminen edellyttää henkilötietoja. Tällä tekniikalla profiloin aikoinaan (aika ennen evästeitä) hyvin tarkasti asiakkaani verkkosivujen kävijäprofiilin. Palvelut / pelit toimivat yhtenä profiloinnin välineenä. 

Kaikesta tästä seurantamahdollisuudesta, voi tietysti välttyä anonymipalvelinpalveluja käyttämällä ja evästeet kieltämällä ja koneelta evästetiedot deletoimalla. Myös kone IP:tä "arvotaan" eli sama kone ei aina vastaa samaa IP tietoa. Näinhän ei normaali kuluttaja toimi joten tällainen käyttäytyminenkin kertoo sivustolla vierailijasta jotakin.

Kaikille verkkosuunniteelijoille erinomaista lukemistoa verkkosivujen käytettävyydestä tarjoaa:
https://www.w3.org/TR/WCAG20/

tiistai 19. toukokuuta 2015

NÄYTÖT JA VERKKOSIVUJEN SISÄLTÖ

Runsaasti ongelmia ovat tuottaneet eri näytöt ja näyttölaitteet, joiden kirjo on kasvanut entuudestaan. Perinteisen täyssävy RGB putken ja LCD (esim. läppäreissä) näyttöjen välillä on huomattava sävyero. Tumma, sävykäs kuva saattaa RGB (täyssävy) näytöllä sisältää runsaan määrän kuvainformaatiota, joka latistuu sävyalueeltaan LCD näytöllä. Jos kuvan tuottaa nimenomaan LCD näytöille, siitä saattaa tulla todella tylsä. On kuitenkin muistettava, että läppärit ja muut LCD näytöillä toimivat laitteet ovat jo tänään valta-asemassa. On vain odoteltava, että LCD näyttöjen sävymäärä kasvaa aikaa myöten ja tuotettava sillä aikaa tylsiä, latteasävyisiä kuvia.
Tämän päivän suositus verkkosivun merkittäväksi, näkyväksi alueeksi on kerrottu olevan 1024×768.

Tuosta pitää laskea pois selaimen vaatimat varat: "the most common class of desktop computer screen, dethroning the 1024 times;768 resolution that was long the target for web design". "...1024×768 held its position as the single-most popular resolution until this year".

Jos käsite "resoluutio" on vieras, se tarkoittaa näytössä olevien pikseleiden, eli kuva-alkioiden lukumäärää - leveys x korkeus. Mitä vähemmän pikseleitä, sitä heikompi kuvan piirtokyky näytöllä on.
Näyttöresoluutio ilmaistaan kuvankäsittelyssä termillä "72 pikseliä tuumalla". Se ei tarkoita, että kuva näkyy kaikkialla saman kokoisena vaan että kuvasta näkyy tuuman matkalla nuo 72 pikseliä. Kymmenen tuuman levyiselle (n. 25 cm) näytölle mahtuu 720 pixeliä leveyssuunnassa.

Eli 1024×768 esitystilasta lähdetään ja tulos on turvalliselle alueelle = suositeltu web safe: for all browsers 849 x 507 (lähde: http://designerstoolbox.com/designresources/safearea/compare/).
Tiedän, että tuo 849 x 507 on kuritusta mutta se on tämän hetkinen suositus, kuten mainittu. Sivuja tehdään tietysti muillakin mitoilla. Pitää muistaa laitteistojen laaja kirjo. Tottakai voidaan rakentaa index-sivulle snifferi joka haistelee, minkä kokoisella näytöllä selain on tulossa MUTTA takaan, että työ ei tule verkkosuunnittelijalta loppumaan, jos joka laitteelle tehdään se oikea visuaalinen syöte, vaikka asia on suunnattomasti helpottunut style-sheettien ja PHP:n keinoin. Jos snifferiin mennään, niin kenties olisi järkevää tarjota esim. kolme versiota tai minimissään kaksi. Toinen muille laitteille ja toinen puhelimille.
Vaikka älypuhelimet taipuvat näyttämään hankalia ja raskaitakin näyttöjä, sivujen käytettävyys ei ole yhtä mukavaa, kuin perus PC:llä tai Macillä. Zoomailu pienellä näytöllä on aikaa vievää.

En pidä 950 leveyttä aivan pahana 1024×768 näytölle mahtuu enemmänkin tavaraa, kuin tuo suositus 849 x 507. On myös mahdollista ja suositeltavaakin, riippuen sivun graafisesta ulkoasusta, antaa sivun kaveta leveyssuunnassa jos näyttö on kapeampi? Scrolleri (vieritys) vie n. 20 pixeliä ja vasemmalle laidalle ei juuri tarvitse tilaa muutoin kuin marginaalien vuoksi. Jos marginaalit ajetaan minimiin, mahtuu tuollainen 950 pixelin leveä asiaikkuna turvallisesti näytölle. Visuaalisuus on aina asia erikseen. Haluatko antaa "ilmaa" sisällölle jne. Muistaa sopii myös, että verkossa luettavissa olevan palstan leveys on pienempi kuin painetussa tekstissä. Palstan leveys on suhteessa käytettyyn fonttikokoon (kirjainkoko) joten mikään ei ole yksiselitteistä. Tähän fonttijuttuun (palstat ja kirjainleikkaukset) voinkin palata seuraavassa jutussa erikseen.

Lisätietoa aiheesta:
https://www.w3.org/  (W3C on Web-standardien ylläpitäjä ja kehittäjä)
https://www.w3.org/TR/WCAG20/ (kaikille verkkosuunniteelijoille erinomaista lukemistoa)

KIRJAINLEIKKAUKSISTA NÄYTÖLLÄ (Fonteista)

Näyttölaitteisiin suositellaan, lukututkimusten mukaan, niin kutsuttuja "sans serif"-leikkauksia: font-family:Arial, Helvetica, sans-serif; (ja vastaavat).
Fonttien (kirjasinten) luettavuuden huomioiminen on erittäin tärkeää pienemmissä näytöissä kuten matkapuhelimet ja älypuhelimet.

Nykyisin käytössä olevilla tietokonenäyttöjen resoluutioilla, kirjasinleikkausten finenssit saadaan ainakin otsakkeissa hienosti esille. MUTTA. Haluatko koodata sivusi Flashillä tai sellaisilla menetelmillä, jotka takaavat kirjainleikkausten siirtymisen asiakaskoneelle? Sellainen ei ole kovin asiakasystävällistä, koska Flash vaatii selaimelle asennettavan ja päivitettävän plug-in ohjelman. On asiakkaan kyykyttämistä kun hän sivuille saapuessaan saa ensimmäisenä vastaan ilmoituksen, että hänen selaimensa ei tue näitä sivuja, "lataa Flash" tai "käy päivittämässä Flash-versiosi". Tai asiaks lukee varoituksia, kuinka Flashissa on turvallisuuaukko jne.  Noloa.
Nykyään Flash alkaa olla kirosana jo muuallakin, kuin vain omassa puheessani.

Web- standardin mukaisten kirjasinten kokoa voidaan nykyään säätää suoraan asiakasselaimelta MUTTA, jos koodari ei sitä ole esim. Flash sovelluksissaan huomioinnut, kirjainkoon muuttaminen ei asiakkaalta onnistu.

Jos olet varma, että jokainen verkkosivuasiakkaasi  käyttää standardin mukaista selainta (esim. suljettu yrityssivusto), kuten Opera, Firefox, Safari, jne. voit käyttää CSS3 ja HTML5 ominaisuuksia, joiden avulla voidaan hyödyntää web palvelimilta ladattavia, erikoisempiakin kirjasinleikkauksia. Chrome ja Internet Explorer 9 tukee myös CSS3 ja HTML5 toteutettuja verkkosivuja.
Kokenut ja verkkoasiakkaita (loppukäyttäjä) arvostava verkkosivuntekijä varmistaa, että sivut voidaan lukea kaikilla valtaselaimilla muutaman version iästä huolimatta. Ikääntyville tarkoitettujen sivujen tulee näkyä myös vanhemmilla valtaselainversioilla - ja - tulee ajatella mikä olikaan valtaselain joitakin vuosia takaperin. Ikääntyvä ei seuraa trendejä vaan käyttää verkkoa kuten ennenkin.

Google fonts- tarjoaa myös mahdollisuuden lukuisiin eri tekstityyppeihin verkkosuunnittelijalle. Joukosta löytyy varmasti jokaiselle jotakin. MUTTA. On muistettava, että fontti (kirjasintyyppi) ei saa haitata viestin perillemenoa. Useamman eri fontin sekamelskaa ei kukaan jaksa lukea. Pidä aina ensisijalla sivusi luettavuutta.
Samoin tekstin väreistä musta on ehdoton ykkönen (vaaleat taustat). Jos haluat rikastaa tekstiäsi värein, on turvallisinta pitäytyä mahdollisesti esim. otsakkeiden yhden ja saman värin käyttöä läpi sivuston. Siten sivustosi pysyy yhtenäisenä, eikä aiheuta hämmennystä erivärisine otsakkeineet. "Olenko vielä sillä sivustolla jonne alunperin menin?"
Valkoinen teksti tummilla taustoilla ei ole erityisen luettavaa. Varsinkin pidemmissä teksteissä silmät rasittuvat tarpeettomasti.

Lisätietoa aiheesta kiinnostuneille:
https://www.w3.org/Fonts/ (W3C on Web-standardien ylläpitäjä ja kehittäjä)
https://www.w3.org/TR/WCAG20/ (kaikille verkkosuunniteelijoille erinomaista lukemistoa)
http://www.webtypography.net/
https://www.google.com/fonts (Google fonts. Muistakaa antaa erikoiskirjaimille aina standardi vaihtoehto. Vain siten koodaajalle jää jokin vaikutusmahdollisuus asian luettavuuteen tai ilmeeseen)

Web safe fonts 2013 (HTML5)
http://forbrains.co.uk/web_safe_fonts/web_safe_fonts
http://www.w3schools.com/css/css_font.asp

keskiviikko 30. syyskuuta 2009

Käytettävyys yritysten verkkosivuilla

Suuri joukko yritysten julkisiksi verkkosivuiksi tarkoitettuja - domain nimien jatkoksi asennettuja Flash-sovelluksia - tappaa kättelyssä keskivertokävijän mielenkiinnon.
"Kaunis" tai "kiva Jippo", ei kaikissa tapauksissa tarkoita mielenkiintoista tai käytettävissä olevaa informaatiopalvelua.

Jos sivuston tekijä omaa itse syvän mielenkiinnon Flash-plugin päivitykseen ja pitkän Flash-intron tai mainosanimaation katseluun, se ei tarkoita, että kaikki muutkin tulevat rakastamaan niitä.

Hyvän verkkosivuston suunnittelu kannattaa lähteä vaikka ihan suppeastakin kohderyhmäanalyysistä: "mitä olemme tarjoamassa ja kenelle".
Seuraavaksi tärkein asia on: "pystyvätkö kaikki kohderyhmämme henkilöt" käyttämään tarjoamaamme palvelua - löytävätkö he ja saavatko he vaivatta ja mahdollisimman nopeasti sieltä tarvitsemansa palvelun tai tiedon.

Lisätietoa kaikille verkkopalvelusuunnittelijoille ja toteuttajille verkkosivujen käytettävyydestä:
(W3C on Web-standardien ylläpitäjä ja kehittäjä)
https://www.w3.org/TR/WCAG20/