WWW-sivujen kännyversiolle käyttöliittymä

[Tapio X]

Ei PHP:stä sulkuja voi puuttua. Sen Code Snippet tarkistaa luotettavasti. Esimerkistä taisi tosin päätös } jäädä pois.

Tosin WordPressistä saattaa löytyä funktio käyttäjätietojen muuttamiseen, jolla suorilla tietokantakäsittelyiltä vältytään.

Tuo MySQL-tietokannan käsittely löytyy melkein identtisenä eräältä nettisivulta. Hain sen Googlella. En enää nimittäin muista kuin osan siitä, miten noita SQL-funktioita ja SQL-lauseita tehtiin. Kun jotain ei käytä 15 vuoteen, ei homma ole heti ihan haskassa.

Tuohon tapaan siinä oli neuvottu, mutta SQL-komento oli eri ja mysql_query($query); otettiin muuttujaksi muuhun tarkoitukseen. Koska minulla ei ole muuta tarkoitusta, otin pois muuttujan edestä.

 

[Tapio X]

Sain muualta hieman opastusta. WordPressille on funktio

update_user_meta()

Se ei päivitä users-taulua vaan sen aputaulua. Minulta puuttuu siihen liittyvästä tietokanttaulusa yksi rivi. Niitä lisäillään yleensä lisäohjelmilla. Koska en tee lisäohjelmaa, sisäsin rivin suoraan.

Ehkä väliaikaisen koodin olisi voinut luoda, mutta uuden rivin luominen on kertatoimenpide, ja on ihan sama miten se tehdään.

get_user_meta() haetaan arvot.

Yritän siis tehdä homman uusiksi noita kahta funktiota käyttäen.

 

[Paapaa]

Joo, ei missään nimessä käyttäjän syötettä sellaisenaan tietokantakyselyyn. Siinä kerjää verta nenästään hyvin tehokkaasti.

 

[Tapio X]

Seuraava funktio toimi - sain oletusasetukset:

function getLayoutSettings($userLayoutSettings_ar){
if(is_user_logged_in()){
$current_user = wp_get_current_user();
$userLayoutSettings=get_user_meta( $current_user->ID, 'user_layout_settings',true);
if(!$userLayoutSettings){
    update_user_meta($current_user->ID,'user_layout_settings', '2,1,3,2,1,1');}
    }
else{
    $userLayoutSettings='1,1,3,2,1,1';
    }
$userLayoutSettings_ar = explode(',', $userLayoutSettings);
return $userLayoutSettings_ar;
}

Mutta tuon muuttaminen uudestaan ei onnistunut. Tämä tarkoittaa sitä, että jos joku tällä foorumilla haluaisi testata systeemiäni, hän saa oletusasetukset, joita ei pysty muuttamaan. Muutoskoodissa on vikaa, jota täytyy muuttaa.

Mitä optioon "POISTA KÄYTÖSTÄ/OTA KÄYTTÖÖN INTROTEKSTI:" tulee, se on väliaikainen. Laitan sen lopullisessa versiossa hidden-kentäksi eli automaattisesti poistuu, kun painaa asetussivulla TEE MUUTOKSET -painiketta.

 

[FinnMa]

Koodistasi pisti silmään että else roikkuu irrallisena, koska toisen if:in jälkeen on kaksi peräkkäistä sulkua. Päätä kumpaan if-ehtoon haluat sen liittyvän niin saat funktiostasi ihan eri tuloksen ulos.

 

[Tapio X]

Jouduin tekemään homman uusiksi.
Ongelma taitaa olla get-muuttujan käsittelyssä.

print_r($GET);
ei mitään.

Homma kaatui siihen, etten muistanut, että get-parametria ei käsitellä $GET vaan $_GET avulla. Kun laitoin oikean muuttujanimen, homma pelittää.

Puolustukseksi voin sanoa, että viimeksi kuin loin get-parametreilla toiminnallisuutta, aikaa on n. 15 vuotta. En kertakaikkiaan muistanut tuota asiaa.

Pidän toistaiseksi intro-tekstin valinnan käytössä. Kun testit on ohi, sen voi poistaa.

WordPress aiheutti taas kerran visuaalisen ongelman kirjautuneille käyttäjille. Hiivatti kanssa.

Jos jotain kiinnostaa, hän voi kirjautua ja kokeilla, missä paikassa valikkonappi tuntuu kivimmalta.

 

[Paapaa]

Yhä edelleen kannattaa opetella koodin muotoilu, se vähentää bugeja ja koodista näkee paljon helpommin esim. ehtolauseiden logiikan. Tässä sama muotoiltuna:

function getLayoutSettings($userLayoutSettings_ar)
{
   if (is_user_logged_in()) {
       $current_user = wp_get_current_user();
       $userLayoutSettings = get_user_meta($current_user->ID, 'user_layout_settings', true);
       if (!$userLayoutSettings) {
           update_user_meta($current_user->ID, 'user_layout_settings', '2,1,3,2,1,1');
       }
   } else {
       $userLayoutSettings = '1,1,3,2,1,1';
   }
   $userLayoutSettings_ar = explode(',', $userLayoutSettings);
   return $userLayoutSettings_ar;
}

PS. Ihan sama, mihin tykkää aaltosulkeita laittaa, oleellisinta on oikea sisentäminen.

 

[Tapio X]

Yritän laittaa ainakin toisten luettavaksi siistimpää koodia.

Se hallintapaneelin takia johtuvat CSS-ongelma näkyy tässä kuvassa.

Oletuksena tuossa tyhjässä tilassa on hallintapaneeli. Mutta kun en sitä näytä, pitäisi saada oikealla tavalla siirrettyä sisältö ylös. Bodylle -48px ei tehnyt siirtoa oikein.

Tuon ikävän näköisen CSS-ongelman lisäksi on pieniä marginaaliongelmia vielä, mutta ihan testattavissa - mutta testi edellyttää kyllä kirjautumista, mitä tuskin kukaan haluaa tehdä.

Ainakin kokeilu eri vaihtoehdoilla voi olla hauskaa.

 

[Tapio X]

Ja on se ihan hauskaa. Haluasin www-sivujen muistuttavan sovellutusten käyttöliittymää ennen kaikkea kännykkä pystysuunnassa.

Ihan vaan kokeiluna versio, jossa joka reunassa on jotain. Ylhäällä päävalikko, josta pääsee muihin. Keskellä toimintovalikko ja -aihevalikko, joista pääsee muihin. Alhaalla muutama kommenttien ja aiheiden luomiseen liittyvä pikavalinta (ei aloitteleville, koska toimintojen merkitys tulee opetella).



Jos nyt joku haluaa rullata sivua päästä päähän, sekin sallitaan, sillä kaikki nuo saa pois ja yläosan keskellä oleva painike jää sivun alkuun. Mutta jos haluaa minimoida rullauksen, sekin on mahdollista.

Tämä nyt on vain prototyyppi, jossa on puutteita. Mutta toivon, että tähän protyyppiin voitaisiin suhtautua kunnioituksella. Sen tarkoitus on herättää kysymään, miten käyttäjiä voitaisiin tulevaisuudessa paremmin huomioida.

Eivät kaikki halua rullata sivuja päästä päähän kokon ajan!

 

[Tapio X]

Vaakasuuntaan laitetta ei kannata kääntää - ulkoasu on vielä rikki.

Oli joo hyvä pystyttää erillinen kehittelysivusto. Siinä rikkinäisyys ei haittaa.

Muutan toistaiseksi live-sivustoa vain, jos siinä ilmenee suoranaisia bugeja. Ylös/alanuolet voisi laittaa huomaamattomammin melko vaalealla harmaalla (rgba(0,0,0,0.05)).

Ihan aidosti haluan huomioida kaikki käyttäjät. Asetuksilla voin ainakin itselleni laittaa Twitter-henkisen valikon (nyt vaihtoehtoja sille on kaksi, mutta voihan niitä olla niin paljon kuin haluaa luoda). Jos ei muut tykkää siitä, ei ole pakko tykätä.

Ilman perusteellisia testejä kehittelyversion ratkaisuja ei kannata live-versioon laittaa.

Oli vähän harmi, että ei järkevällä tavalla saanut evästeillä vastaavaa ja vaikka saisikin, se ei olisi kovin järkevää. Tosin ilman intro-tekstiä sen voisi antaa evästeilläkin - pitäkööt sitten evästeensä tai ei. Mutta evästeet eivät oikein tahtoneet lähteä toimimaan välittömästi kuten tietokantaan rakentamani systeemi.

Minulle voi kirjoittaa s-postiin ja voin pyynnöstä luoda käyttäjätunnukset. Tosin ongelmana on se, etää s-postiosoitteen pitää olla todellinen - muuten ei voi lähettää tietoa salasanasta. Parempi siis luoda itse. S-postiosoitteen ei tarvitse olla oikea. Avattaren saa vaihtaa.

 

[Tapio X]

Laitoin nyt sitten neljä eri vaihtoehtoa pikavalikollekin. Kun laitoin yläosan harmaan samaksi kuin avaajien, yläosa ei näytä pahalta. Jos kirjautuu, tietää jo mistä löytyy päävalikko, joten valikoiden avaaja ei tarvitse enää eteen tekstiä "VALIKOT >". Sitä olisi pitänyt säätämään, mutta helpoimmalla pääsin kun poistin sen.

Asetussivulla on kuvakaappauksia ja niihin liittyviä kuvayhdistelmiä.

Yksi muistuttaa alkuperäistä esitystä, mutta siinä on vain usein tarvittavia toimintoja.

 

[Tapio X]

HD/iPad vaakasuuntainen näyttö on melkein kunnossa. Jos sivuvalikot ovat päällä, en jostakin syystä saa määriteltyä valikoita saman levyisiksi enkä yhtä etäällä vasemmasta ja oikeasta reunasta.

Jotta sain toimimaan siististi, piti laittaa leveälle näytölle täysi leveys. Olen jonnekin sopimattomaan kohtaan lykännyt numeron 1, mikä rikkoo ulkoasua. En löydä kohtaa. Ylimääräistä tulee yleensä unohtuneesta debug-datasta tai <script> tai <style> eteen tulee vahingossa ylimääräistä.

 

[Tapio X]

Laitoin evästeilläkin.

Itse asiassa evästeet epäonnistuivat siksi, että en muistanut käytää alaviivaa tiettyjen muuttujien kanssa. Kun laitoin oikein, evästeetkin toimivat. Testasin print_r:llä.

Muuten samat määritykset, mutta intro-tekstiä en laittanut evästeiden varassa oleville, koska ne voi poistaa vaikka kesken istunnon.

Voi siis testata, vaikka ei kirjaudu. Pieniä CSS-virheitä varmasti löytyy, mutta mitään dramaattista ei pitäisi löytyä - paitsi sillon kun olen kaatanut jollakin tyhmällä mokalla ulkoasun tai koko sivuston.

_____________________

Se "1" arvoitus ratkesi. Erään muuttujan arvo on 1, jos sitä ei if-ehdolla muuta. Piti määrittää arvoksi '';

 

[Tapio X]

Tein testisivustolle sittenkin intro-tekstin. Mutta muutin sen lähinnä evästetiedotteeksi, jossa mainitsen mobiiliasetukset.

Sivusto käyttää evästeitä, niihin kuuluu mobiiliasetukset. OK, ÄLÄ NÄYTÄ TÄTÄ TEKSTIÄ UUDESTAAN. Sulje ikkuna

Mobiiliasetukset on linkki. "Sulje ikkuna" vain sulkee ikkunan.
_____________

Sivussa olevista valikon avaajista voi valita nyt vain toisen. Koska jokaisesta kolmesta mahdollisesta valikosta voi valikkoja kokonaan sulkematta vaihtaa toiseen, yhdelläkin pärjää. Eri avaajia käytettäessä oletuksena on esillä eri valikko.

Olisin kiitollinen testauksesta ja kommenteista. Ainakaan valinnanmahdollisuuksista ei ole pulaa. Jos laitan tämän testauksen jälkeen live-sivustolle, voin laittaa itselleni juuri sellaiset asetukset kuin haluan. Niistä kenenkään muun kuin minun ei tarvitse pitää. Jokainen saa valita itselleen sopivat valikoiden avaajat. Teoreettisia vaihtoehtoja on kymmeniä.

Oletusasetukset:

$userLayoutSettings='2,1,3,2,1';

Ks. arvot asetussivulta, jossa on lopussa väliaikaisesti esillä esim. "(1)".

Ehdotuksia oletusasetuksista saa esittää. Asetussivu on nyt dynaaminen eli se muistaa annetut asetukset ja esillä on ne asetukset, jotka on viimeksi määritelty. Lisäsin myös oletusasetusten palautuspainikkeen.

 

[Tapio X]

Evästeiden ongelma näyttää olevan se, että ne eivät tule heti voimaan. Vasta jos lataa sivun uudestaan tai siirtyy toiselle sivulle, niiden vaikutus näkyy.
Laitoin näin:

Evästeiden vaikutus ei välittömästi näy muutoksen jälkeen. Siirryttäessä toiselle sivulle niiden vaikutus pitäisi kuitenkin näkyä. Jos lataa sivun uudestaan, ne näkyvät asetussivullakin.

ÄLÄ NÄYTÄ UUDESTAAN -tekstin yhteydessä kun klikkaa linkkiä muulla kuin asetussivulla ja sen jälkeen sulkee ikkunan ja siirtyy toiselle sivulle, teksti häviää. Siinä kaiketi ihan OK.

HD-tablet-laitteella sekä kirjautuneena että ei-kirjautuneena ulkoasu on melko OK siinä mielessä, että marginaalit yms. ei ainakaan mitään merkittävää ongelmaa. Tosin huomasin asemointivirheitä ja taustavärivirheitä, joita pitää korjata ennen käyttöä live-sivustolla. Kyse ei ole suurista CSS-korjauksista.

Nyt kun on esittää suhteellisen valmis vaihtoehto, jossa käyttäjä aidosti voi vaikuttaa ulkoasuun, kiinnostus lopahti.

 

[Tapio X]

Jotta evästeissä ja tietokannassa olisi sama tieto, jos evästeet eivät ole oletusarvoissa, funktiosta täytyi tehdä mutkikkaampi. Jos on kirjautumatta tehnyt muutoksia ja kirjautuu, seuraavan funktion pitäisi päivittää data:

function getLayoutSettings($userLayoutSettings_ar){
if(is_user_logged_in()){
    if(intval($_COOKIE['sivupalkki']) ===2 || !(intval($_COOKIE['paavalikonsijainti'])===3) || intval($_COOKIE['nuolet']) ===1 || !(intval($_COOKIE['lisavalikko'])===1))
    { // oletusasetuksia on muutettu ja ne ovat evästeissä
$userLayoutSettings=$_COOKIE['intro'].','.$_COOKIE['sivupalkki'].','.$_COOKIE['paavalikonsijainti'].','.$_COOKIE['nuolet'].','.$_COOKIE['lisavalikko']; // käytetään evästeitä
    $userLayoutSettings_ar = explode(',', $userLayoutSettings);
    $current_user = wp_get_current_user();
    $userLayouts = explode(',', $current_user->user_layout_settings);
        if(!($_COOKIE['intro']==$userLayouts[0] && $_COOKIE['sivupalkki']==$userLayouts[1] && $_COOKIE['paavalikonsijainti']==$userLayouts[2] && $_COOKIE['nuolet'] ==$userLayouts[3] && $_COOKIE['lisavalikko']==$userLayouts[4]))
        { // jos tietokannassa on eri tieto kuin evästeissä, päivitetään tietokanta
         $updateValue = $_COOKIE['intro'].','.$_COOKIE['sivupalkki'].','.$_COOKIE['paavalikonsijainti'].','.$_COOKIE['nuolet'].','.$_COOKIE['lisavalikko'];
        update_user_meta($current_user->ID,'user_layout_settings', $updateValue);
        }
    }else{ // ei ole ennestään tietokannassa tietoa tai se on sama kuin evästeissä
    $current_user = wp_get_current_user();
    $userLayoutSettings=$current_user->user_layout_settings;
        if(!$userLayoutSettings){$userLayoutSettings='2,1,3,2,1';} // asetetaan oletustiedot
    $userLayoutSettings_ar = explode(',', $userLayoutSettings);
    }
}
elseif($_COOKIE['sivupalkki']){// löytyy evästeet
$userLayoutSettings=$_COOKIE['intro'].','.$_COOKIE['sivupalkki'].','.$_COOKIE['paavalikonsijainti'].','.$_COOKIE['nuolet'].','.$_COOKIE['lisavalikko'];
}else{ // evästeitä ei ole koska käyttäjä on poistanut ne
    $userLayoutSettings='2,1,3,2,1';}
    $userLayoutSettings_ar = explode(',', $userLayoutSettings);
return $userLayoutSettings_ar;
}

Tuon pitäisi taata se, että jos muutat tietoa kirjautumatta, muutos on voimassa kun kirjaudut. Samoin jos kirjaudut, muutos on voimassa jos kirjaudut ulos. Vain jos poistat evästeet etkä kirjaudu, menetät asetukset. Testasin, että toimii.

 

[Tapio X]

En ymmärrä, mikä väriskaalassa olisi pielessä. Kahta korostusväriä lukuun ottamatta on käytetty vain sinisen, mustan ja harmaan eri sävyjä.
_____________

Testasin ulkoasun myös halvahkolla älykännykällä (Samsung Galaxy J5) pystysuunnassa (laite ei vaihtanut orientaatiota enkä löytänyt säätöä, mistä orientaation saa automaattisesti vaihdettua). Korjasin pieniä ulkoasuvirheitä.

Koska ne laitteet, joilla pystyin testaamaan, toimivat odotetusti, otin käyttöön live-sivustollakin.

 

[Nightuser]

En ymmärrä, mikä väriskaalassa olisi pielessä.

Liian vaalea. Eikö tummaksi saa mistään.

 

[Tapio X]

Ei ainakaan sinistä käyttäen - isoina aloina tumma sininen on hänestä ruma. Vaihdoin siksi valikoihin WordPressin sinisen paletin vaalean siniseen kaikkialla. Itse asiassa vaaleampi sininen oli mobiilivalikoissa, mutta yhtenäistin tietokoneversion kanssa. Nyt yhtenäistin toisin päin eli tietokoneversion alivalikoissa on vaaleami sininen. Muuta muutosta en osannut tehdä.

Koska sivusto sinisen ohella pelaa valkoinen - harmaa - musta -skaalalla, tätä skaalaa voi muuttaa. bbPressin perusharmaat ovat bbPressin oletussävyjä. Määritelty kai mahdollisimman yleispäteviksi.

En kyllä osaa muuttaa minnekään suuntaan olemassa olevaa skaalaa. Tarvitsisin jostakin siihen välipalettiehdotuksen ja ehdotuksia missä mitäkin väriä käyttäisi.

Kun nyt tekniikka pelaa, ulkoasuun voisi yrittää panostaa. Sitä voi testailla testisivustolla.

Toki puuttuvia ominaisuuksia voisi tekniikkapuolella yrittää saada luotua.

Minkä todennäköisesti pystyisin lisäämään, on "uusi" -merkkaus yksittäisen kommentin kohdalla. Sen ei pitäisi olla kovin vaikea toteuttaa. Se on Todo-listalla.

Tällä sivustolla on erittäin kehittynyt tekstieditori, mutta näin kehittynyttä en tarvitse. Perusmuotoilut riittävät, joten yksinkertaisuus on sivustollani pikemminkin etu kuin haitta.

Editorin suhteen lähinnä harmittaa bbPressin varsin alkeellinen lainaus-toiminto. Siinä asiassa tämä sivusto on todella paljon kehittyneempi. Tässä asiassa koen kuitenkin, että olen saatavilla olevien lisäosien varassa.

 

[Xiyng]

Liian vaalea. Eikö tummaksi saa mistään.

On makuasia, tykkääkö vaaleasta vai tummasta, mutta vaaleatkin sivut toimivat ihan hyvin ja ovat nykyään itse asiassa hyvinkin yleisiä. Itse en osaa ainakaan tähän hätään eritellä, mikä värimaailmassa mättää, mutta "liian vaalea" ei ainakaan ole vikana ellei tavoitteena ole tumma teema (eikä näyttäisi olevan).

 

[Tapio X]

Ei ole tavoitteena tumma teema. Vain ns. header-osa on melko tumma.

Oli muuten iso työ saada valokuva sävytettyä suht. toimivan väriseksi kun ei ole siihen mitään muuta apuja kuin Adobe Photoshop Expressin suotimet ja säätimet, joilla vain kokeilin, mikä toimisi. Sävytetty kuva kaipaisi jonkin algoritmit, joka automaattisesti sävyttää kuvan halutun värin perusteella. Ehkä Photoshopissa se olisi.

Tyttären kommentit eivät juuri auta kun hän ei eritellyt muuta kuin kolme asiaa, jotka jo muutin.

 

[Nightuser]

On makuasia, tykkääkö vaaleasta vai tummasta, mutta vaaleatkin sivut toimivat ihan hyvin ja ovat nykyään itse asiassa hyvinkin yleisiä. Itse en osaa ainakaan tähän hätään eritellä, mikä värimaailmassa mättää, mutta "liian vaalea" ei ainakaan ole vikana ellei tavoitteena ole tumma teema (eikä näyttäisi olevan).

Tumma teema oli se mitä itse ajattelin. Käyttäjällä voisi olla mahdollisuus valita kumpaa käyttää.

 

[Tapio X]

Periaatteessa tuo on mahdollista, sillä käyttäjäasetuksia voi lisätä. Edellyttäisi kyllä CSS-tiedostojeni uudelleen rakentelua, jotta väri ja muut ominaisuudet eroteltaisiin toisistaan. Joskus väriteema oli erillinen, mutta ei enää. Ajatuksena oli joskus helppo väriteeman vaihto, mutta vähän hukkasin idean kun ajattelin, ettei se taida olla tarpeen. Aika iso lohko värimäärittelyjä on kuitenkin vieläkin yhdessä paketissa, joten saisin ison osan irrotettua tätä varten nykyisestä CSS:stä. Rippeitä pitäisi koota sieltä sun täältä.

Hieman myös nyt rakennetut valinnat monimutkaistavat asioita.

Väriteemoille sinänsä voi luoda oman Code Snippet -tietueen tai vaikka useita, jos koko koodin laittaa yhden käyttäjäasetuksen alle yhtä ehtoa käyttäen.

Header-kuva pitäisi kuitenkin pitää samana, sillä sen luomisessa oli tosi iso työ.

Melko monimutkaisen toteutuksen takia on kuitenkin aika hankala pitää kahta väriteemaa. Ainakin yksi pitäisi olla ensin täysin tiptop.

Harkitsen asiaa. Olisihan siitä se hyöty, että väriteemoja voisi kokeilla useita luomalla väriä koskevaan käyttäjäasetukseen useita vaihtoehtoja. Niistä sitten valitisisi toimivimmat live-versioon.

No ikuisuusprojektihan minulla on - vähän niinkuin vanhojen autojen kunnostus.

 

[Tapio X]

Rehellisesti nyt kuitenkin täytyy todeta, että minulla ei ole osaamista tumman version tekemiseen. Jos jotakuta kiinnostaa jakaa harrastukseni, voin yrittää koota kaikki väriominaisuude yhteen Code Snippet -tietueeseen, mistä voi etsiä ja korvata värimäärityksiä.

Nykyisen rinnalla voin luoda testitarkoitukseen käyttäjäasetuksia. joissa voi kokeilla korjauksia ja vertailla helposti alkuperäisen kanssa - Vivaldilla helposti vaikka rinnakkain. Toisessa ikkunassa uudempi ja toisessa vanhempi. Niin kauan kuin molempia ikkunoita ei päivitä, vertailu onnistuu.

 

[Tapio X]

Niille, jotka vihaavat ylimääräisiä painikkeita, oikean reunan AIHEVALIKKO-valikon avaaja on näppärä.

Tällä sivustolla vastaava on se, että jos kännykkä on pystysuunnassa oikealta avautuisi IO-TECH.FI UUTISET, UUTISET LYHYESTI ja UUDET VIESTIT. Ne saisi esille milloin vain, ilman rullaamista, ilman nuolien käyttöä, varmasti taaten sen, että ei siirry minnekään, jos ei varta vasten klikkaa jotain linkkiä.

Hirveän kaukana ne eivät ole - sivut eivät ole samalla lailla järkyttävän pitkiä kuin MTV 3:n uutissivut, joissa hirvittävän suuri osa sivua on sellaista, jota ihmiset tuskin jaksavat selata läpi.

Toki ajattelen vain mututuntumalla. Minä en jaksa rullata sivuja kovinkaan pitkälle tablet-laitteellani. Kun sivuja suunnitellaan, on mietittävä myös sitä, kuinka paljon ihmiset jaksavat rullata samaa sivua. Minulla kärsivällisyys loppuu lyhyeen, jollakin on pitempi pinna (yli)pitkien sivujen kanssa.

Minulle siis meneminen siitä mistä aita on matalin - kaikki yhteen pötköön - ei toimi. Vain omat sivuni toimivat netissä suht. sillä tavalla kuin toivoisin yleisesti sivujen toimivan. Minunlaisiani www-suunnittelu ei tunnu ottavan juuri koskaan huomioon.

Minulla ei ole harmaata ajatustakaan, mikä on keskiarvo.

Mutta koska kaikki eivät siitä pitäisi, olisi luotava käyttäjäasetukset. En tunne XenForon koodausta, miten iso työ siinä olisi. Minunkin täytyy kaivaa tietoa ja pohtia aika lailla, että sain systeemin toimimaan halutusti.

Periaatteessa tällä sivustolla luominen olisi yksinkertaisempaa, sillä riittäisi vain tietokantapäivitys eikä evästeitä tarvitsisi luoda. Eihän täällä ilman kirjautumista voi kirjoittaa ja satunnainen kävijä tuskin kaipaisi evästeisiin perustuvia käyttäjäasetuksia.

AIHEVALIKKO-valikon rakentelu tälle sivustolle olisi sitäpaitsi yksinkertaisempaa kuin itselläni, sillä sivutyyppejä on vähemmän. Minulla niitä on viisi erilaista (foorumit, blogi, ristikkoavut, artikkelit ja muut sivut). Että toimivat halutusti, oli näpertelemistä.

Halusin yleisesti herätellä ajattelemaan www-suunnittelua uusista näkökulmista, mutta onhan tässä olo kuin Don Quitella. Jään syrjään.

No kehittely on sinänsä hauska harrastus. Kun nyt noita käyttäjäasetuksia on, voisihan sivun alkuun laittaa niille, jotka pitävät rullailusta kiinteän haun ja piilottaa haut tai haku valikoista. Kun nyt sain toimivan systeemin, sitä voi erittäin helposti täydentää. Saa nähdä yleistyykö ajatus käyttäjäasetuksista. Ei niiden laatiminen kuitenkaan mitään rakettitiedettä ole. Aikaa se tosin vie rutkasti.

 

[Tapio X]

En ole vieläkään päässyt ulkoasun kehittämiseen kun lisäilin joitakin elementtejä säätöihin ja testasin niitä.

Kokeilin yhdellä kapealla (viewport-arvoissa mitattuna 20px) sivupalkilla. Lisäsin toiminto- ja aihevalikoihin ylösalasnuolet, jos niitä ei ole suoraan esillä. Toimii homma niinkin. Yhden painikkeen takaa löytyy:

1. haut
2. toimintovalikko
3. päävalikko
4. aihevalikko
5. ylös/alas - nuolet

Käyttöliittymä on laitettu lähes absoluuttiseen minimiinsä.
Absoluuttinen mini olisi sitä, että mukana olisi:

1. sivuston pääryhmät
2. murupolut

Kyllä sekin on mahdollista, mutta ei minustakaan enää järkevää. Mutta käyttöliittymä on kyllä teoriassa minimoitavissa ja se on vielä varsin helposti toteutettavissa.

Ainakin sivuston sivujen pääryhmät on oletuksena hyvä olla suoraan esillä, jotta tulija tietää suoraan, mitä sivulta löytyy. Mutta jos käyttää sivuja enemmän, nekin voisi piilottaa. Mitään hyötyä piilotuksesta tosin ei ole. Niiden poisto ei tuo lisää ruutupinta-alaa. Ns. leivänmurujen poisto suoraa näkymästä sitä hieman toisi.

Toisaalta valinnaisesti voisi laittaa esille myös haun kiinteäksi, mitä se oli pitkään, vaikka näin:

https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20191001_220136.jpg

Testisivustolla saa nuo joko pysymään kiinteästi sivun ylälaidassa tai rullautumaan sivun mukana. Miten vaan itse kukin parhaaksi katsoo.

Voisihan sen valikkopainikkeen oletussijaintikin olla vasemmalla, mutta sinne ei aputeksti oikein visuaalisesti sovi, koska siellä on sivuston nimi.

 

[Tapio X]

Vähän harmittaa, että tuli laitettua asetukset jo live-sivustolle. living_death tai Nightuser ehdotti valikkon avaimen vasemmalle. Se ehkä olisi ihan hyvä oletusasetus. Paras asetus olisi ehkä:

• Vasen ylä: navigaation avaus
• Vasen oikea: haku
• Oikea alareuna: ylös/alas-nuolet.

Itse asia tuo asetelma on se, mikä on tällä sivustolla. Laitoin tuon nyt oletukseksi. Se näyttää mm. tältä:
https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20191002_172905.jpg

Mutta jos koodaan noin, tulee muutos nykyisiin oletuksiin ja sivun nimeä pitää ehkä laskea hieman alemmaksi.

Jos poistaa haun suoraan näkymästä, se näkyy muualla. Jos poistaa ylös/alas-nuolet ne tulee esille muissa valikoissa.

Sitten vaikka AP voisi poistaa mitä haluaa poistaa tai siirtelee minne siirtelee. Joku toinen voi lisätä, mitä haluaa lisätä ja voi siirrellä apuelementit minne haluaa. Vain haun paikkaa ei voisi vaihtaa. Sen voisi vain pitää kiinnitetty, pitää rullautuvana tai poistaa suoraan näkymästä.

LinkedInin porukasta en ole saanut keskustelukumppania. No AP ym. kriittiset palautteet ovat olleet sikäli tarpeen, että en olisi saanut aikaiseksi käyttäjäasetusten laatimista muuten. Ilman käyttäjäasetuksia en millään saa sivujani toimimaan niin, että erityyppiset käyttäjät olisivat kovinkaan tyytyväisiä. Ilman käyttäjäasetuksia vaan joutuisi tekemään liian paljon kompromisseja.

Jonkun kritiikki siitä, että teen sivut vain itselleni, on osittain oikeutettua. Haluan, että sivusto on sellainen, josta itse voin pitää. Haluan sivuni olevan juuri sellainen, josta itse pidän. Mutta haluan kyllä aidosti huomioida toisenlaiset käyttäjät, jotka arvostavat eri asioita. Jotta nämä molemmat voivat toteutua, muuta vaihtoehtoa ei tosiaan ollut kuin käyttäjäasetukset.

Oletusasetukset pitäisi vain olla sellaiset, että ne olisivat kaikille suht. siedettävät. Kyseessä on kaikille käyttäjille kompromissiratkaisu.

Näytöllä voi olla 0-6 toimintoa (painike tai painikeryhmä). Yhdelläkin pärjää varsin hyvin. O:llakin voi kohtalaisesti selata (jäljellä on leivänmurut + viisi päälinkkiä). Sen yhden takana on sitten sama kuin tällä sivustolla on näissä yhteensä:

1. Päävalikko
2. Haku
3. Kirjautumis- ja rekisteröintilinkit
4. Pikanavigoinnit
5. Footer-ostan menu
6. Ylös/alas-nuolet.
7. Sivun oikean reunan/lopun luettelot kuten IO-Tech uutiset ja viimeisimmät viestit

Jos nyt pistää yhden painikkeen jonnekin, noita asioita ei tarvitse etsiä muualta! Vain hälytystoiminto puuttuu ja sitä ei voi mihinkään pikavalikkoon laittaa.

 

[Tapio X]

Uudelleenlatausongelma ratkaisu. Eräs henkilö Suomi24 ystävällisesti auttoi:

setcookie("testi", "on", time()+86400, "/", "sanaristikkofoorumi.net", 1);
if(isset($_COOKIE["testi"])){

... muutokset
jos tullut muutoksia ladataan uudelleen ILMAN parametreja:

if (!($_GET["intro"]==$_COOKIE["intro"] && $_GET["sivupalkki"]==$_COOKIE["sivupalkki"] && $_GET["paavalikonsijainti"]==$_COOKIE["paavalikonsijainti"]
&& $_GET["lisavalikko"]==$_COOKIE["lisavalikko"] && $_GET["nuolet"]==$_COOKIE["nuolet"] && $_GET["haku"]==$_COOKIE["haku"]))
    {
    $myUrl = "https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    $myUrlPos= stripos($myUrl,'?');
    $myUrl=substr($myUrl,0,$myUrlPos);
    header("Location: ".$myUrl);
   }
}

Tuon testi tarkoituksena on vain testata, hyväksyykö käyttäjä ylipäätänsä evästeet. Jos sitä ei hyväksytä, on turha varsinaisia evästeitä laittaakaan.

 

[Tapio X]

Yritän nyt kasata värit yhteen Code Snippettiin - jos vaikka joku tutkisi sitä ja ehdottaisi muutoksia.

 

[Tapio X]

Kasasin väreihin liittyvät ominaisuuden yhteen (color,background,border,outline,text-shadow,box-shadow,opacity).

Tuli aika monimutkainen PHP-tiedosto. Koska on monentyyppisiä sivuja, huomioitu monenlaisia laitteita ja on runsaasti asetuksia, CSS on osissa. Alla pääjaottelut:

1. Kaikille yhteinen CSS
2. Joko foorumiosion CSS tai muiden sivujen CSS
3. Joko tietokoneen CSS tai mobiliilaitteiden CSS

Kun noista otti kaikista pois värit ja taustakuvat, nuo kaikki piti ottaa huomioon yhdessä tiedostossa. Samoja ominaisuuksia voisi vielä kasailla, mutta etsi ja korvaa -periaateella voi helpohkosti vaihtaa värejä.

Varasin testisivustolle väriteemaa varten yhden kohdan. Alla koodi, johon voi tehdä uuden väriteeman:

perusvari.php.txt

Kannattanee ensin vähän purkaa CSS:ää.

 

[Tapio X]

Jos luo uuden värimaailman, ehkä haluaisi muuttaa myös border-radius-arvoja. Pitäisikö värien lisäksi olla mukana border-radius-ominaisuus?

Laitoin tuon koodin haettavaksi, jotta siitä löytää käytetyt värit. Värikoodien perusteella helppo esittää korjausehdotuksia. Koska minulta puuttuu täysin osaaminen tumman teeman luomiseen, en sitä itse edes yritä, mutta ehdotukset voin ottaa vastaan ja laittaa esille vaikka useampia.

Laitoin yleisasetukseksi box-sizing:border-box (poikkeuksena jossakin box-sizing:content-box). Näin reunaviivojen paksuunnus tai ohennus ei pitäisi vaikuttaa elementtien kokonaisleveyksiin tai korkeuksiin.

 

[Tup3x]

Olisi paljonkin sanottavaa tuosta ratkaisusta ja itse CSS:tä, mutta suosittelen tutustumaan tähän:
Sass: Sass Basics
sass/dart-sass
Helpottaa huomattavasti CSS:än tekoa.

Tuo on helppo ottaa itselle käyttöön oikeastaan mihin vain projektiin. Laittaa vain automaattisesti kääntämään .scss:t (sass --watch .:.).

CSS pois PHP filuista ja ei inlinenä internalina. Tarpeen mukaan annat bodylle sopivan luokan, jota sitten käytetään apuna tyylittelyssä.

 

[Tapio X]

CSS pois PHP filuista ja ei inlinenä.

Inlinellä tarkoitetaan yleensä style="..". Jos tarkoitat style-tägiä, sitä käytän varta vasten. Käyttämäni ratkaisu tuo joustavuutta. Style-tägiä käyttäen saa tehtyä muutokset tietokantaan. Link-tägin käyttö veisi CSS:n pois tietokannasta, mitä en halua.

On etu, että omat PHP, JavaScript ja CSS-koodaukset ovat kaikki Code Snippet tietueina. Ei tarvita FTP-siirtoja. Tietueita on helpompi versioida kuin tiedostoja.

Erillistiedostot eivät myöskään jousta. Niitä ei voi koodata joustavasti kuten JavaScriptiä tai PHP:tä.

Jos yrittää muuten, täytyisi olla tosi paljon luokkia, jotta voisi näyttää tai piilottaa halutut elementit. Iso luokkamäärää on vaikea hallita ja tulee turhaa CSS:ää, kun kaikki vaihtoehdot pitäisi sisällyttää CSS-tiedostoihin.

Asetussivulla minulla on tämäntapaisia määrityksiä:

}elseif($CSS===3){
$CSS='@media screen and (max-width:782px){
#top-buttons-container{position:fixed;top:0;right:0;width:48px;height:32px}
#sidebar-top a,#sidebar-top a::before{position:fixed;top:0;right:0;border-radius:0 0 0 5px;}}';
}elseif($CSS===4){
$CSS='@media screen and (max-width:782px){
#top-buttons-container{position:fixed;top:47%;left:0;width:48px;height:32px}
#sidebar-top a,#sidebar-top a::before{position:fixed;top:47%;left:0;border-radius:0 5px 5px 0;}}';
}

Ei tarvitse laittaa ylimääräisiä luokkia. Kun CSS on vaihtoehtoista, homma pysyy hallinnassa, kun ei tarvitse miettiä, mikä luokka liittyisi mihinkin vaihtoehtoon. Kaikkia vaihtoehtoja ei tarvitse laittaa samaan CSS-tietueeseen ja siten kasvattaa tarpeettomasti CSS-tietueen kokoa.

Asetuksiin liittyvä CSS hoituu hallitummin PHP + CSS -koodauksella kuin luokilla ja pelkällä CSS:llä. Erillistiedostoina link-tägeillä homma ei pysyisi hallinnassa - ei ainakaan minulla. Menisin vain umpisolmuun käytettyjen luokkien kanssa. Homma karkaisi täysin lapasista.

Ongelma on lähinnä se, että border-radius-ominaisuus liittyy elementtien sijoitteluun. Siihen liittyvien border-radius-arvojen ainoa vaihtoehto on se, että kaikki kulmat on pyöristetty samalla lailla.

Ajattelen CSS:ää apuohjelmointikielenä, miksi haluan pitää sen joissakin tilanteissa lähellä varsinaista ohjelmointia. Jos tarvitse PHP-funktion, teen sen. Jos on siihen liittyy CSS:ää, joissakin tilanteissa on järkevää käsitellä CSS samassa yhteydessä CSS eikä laittaa sitä jonnekin muualle.

Samoin teen joissakin Code Snippet -tietueissa JavaScriptille. Enin JS on erillistiedostossa, mutta osa on juuri siinä tiedostossa, jossa sitä tarvitaan.

En tee ohjelmointiani minkään kaavan mukaan, vaan yritän olla mahdollisimman joustava. Ei aina kannata viedä meren taakse koodia ihan vaan periaatteen vuoksi.

En voi lisätä bodylle luokkia. Käytettävissä olevat luokat eivät aina riitä. Tällöin ainoa toimiva ratkaisu on PHP + CSS yhdessä. Seuraavaa koodi on tilanteille, joita ei Bodyn luokilla voi hallita:

if(function_exists('pageLists')){
$address = pageLists($list);
$y=0;
foreach ($address as $value) {
    if($y==0){$blogi=$value;}
    elseif($y==1){$articles=$value;}
    elseif($y==3){$muut=$value;}
    elseif($y==4){$articles3=$value;}
    elseif($y==5){$ristikot=$value;}
    elseif($y==6){$videot=$value;}
    elseif($y==7){$tag=$value;}
    $y++;
    }
$howAlt=$blogi || $ristikot || $videot || $tag || $articles3;
}

Vilasin esittämäsi Sass ideaa, jossa sanotaan mm:

Sass lets you use features that don't exist in CSS yet like variables

Itse asiassa tekemäni PHP & CSS -yhdistelmä hoitaa vähän samaa asiaa.

Voisihan värit omassa ratkaisussanikin laittaa muuttujina, jolloin eri väriteema edellyttäisi vain sitä, että esim. laitetaan etsi ja korvaa ja "color:#fff" tilalle vaikka '.$linkki_tummalle_pohjalle.'.

Tuo väriteeman CSS ei ole ihan järkevä siinä mielessä, että ei ole koottu samoja ominaisuuksia sisältäviä ominaisuuksia. Yritin kyllä sitä, mutta se yritys meni ihan pieleen. Piti heittää roskakoriin. Samaa asiaa pitäisi vähän virkeämpänä kyllä yrittää uudestaan. Jos saan järkevämmin kootun CSS:n, muuttujien käyttöä voisi ajatella.

Ajattelin joskus sisäkkäistä CSS:ää. Useimmat validaattorit pitävät sitä virheellisenä, joten tarkistus on ongelmallista muulla kuin sassilla.

Joutuisin irrottamaan PHP ja CSS -koodauksen erilleen, mistä en pidä. Varmasti sopii toisille. Ratkaisuni ikävin puoli on se, että Code Snippet toimii bugisesti. Kaikkiin sen tarkistuksiin ei voi luottaa.

Ehdotuksia saa esittää, mutta eiköhän jokainen meistä halua toimia sillä tavalla kuin itselle parhaaksi sopii. Olennaista on se, että homma on hallinnassa.

 

[Tapio X]

Yritän käyttötarkoituksettain ryhmitellä CSS-ominaisuuksia, jolloin on helpompi miettiä, mitä tekisi. Nykyisellään se on liian sekava, että sen pohjalta voisi ajatella värimuutosten miettimistä.

 

[Tapio X]

CSS olisi lähes pakattua, mutta lisäisi kommentteja tähän tapaan

// funktion alussa värimuuttujat seuraavaan tapaan:
/* header */
$header_color='#fff';
$header_text_shadow='3px 3px 3px #000'; // jos ei halua varjostusta, pitää laittaa väriksi "transparent"
/* valkoisen tekstin käyttö tummalle pohjalle */

/* widget */
$widget_color[1]='#fff'; // jos samalla alueella eri värejä, käytetään taulukkomuuttujaa
/* footer */
$footer_color='#fff';


//CSS:ssä:

/* valkoisen tekstin ja sille mahdollisen varjostuksen käyttö */
/* header */
...
/* valkoinen teksti tummalle pohjalle */
...
/* widget */
...{color:'.$widget_color[1].';}
/*footer */.site-footer,.site-info,.site-info a{color:'.$footer_color.';}
...

Jos muuttaisin ominaisuudet muuttujiksi, väriehdotukseksi riittäisi joukko muuttujia. Tuskin palvelinta suuresti rasittaa värien määritys muuttujina.

Uutta väreihin liittyvää Code Snippet -tiedostoa tarvittaisiin vain vähän hahmottamiseen, mutta jos joku haluaisi luoda väriehdotuksen, hänen ei tarvitsisi muuttaa värejä suoraan CSS:ään.

Yhteen värejä käsittelevään Code Snippettiin voisi laittaa useita väriehdotelmia ilman, että tietueesta muodostuisi kohtuuttoman pitkä.

Link-tägiä käyttävä CSS on vain iso puolidynaaminen tiedosto. Ongelmana tuossa ratkaisussa on validointi. Pitää ohittaa suuri osa virheilmoituksia. Tai sitten pitää kopioida lähdekoodia tarkistimeen.

 

[Tapio X]

Muuttujien sijaan noi voisi olla vakioita, jolloin voisi laittaa eri tiedostoon ilman globaali-ilmoitusta. Mutta on todella iso työ, koska arvoja on paljon. Niille pitäisi keksiä myös mielekkäät nimet, jotka helpottaisivat koodin ymmärtämistä.

Tämän verran sain aikaan, mutta väsähdin värkkäämiseen:

// yleiset
$outline='dotted thin';
$generic_color='#333';
$generic_link_color='#044774';
//$light_color='';
$white_color='#fff';// valkoinen väri tummalle taustalle
$highlight_color='#ffd700'; // 'gold' aihealueissa väri ja välilehdissä taustaväri
// varjostukset
$dark_box_shadow='2px 2px 2px #000';
$dark_text_shadow=$dark_box_shadow;
$semidark_box_shadow='2px 2px 2px #333';
$semidark_text_shadow=$semidark_box_shadow;
$medium_darker_box_shadow='2ps 2px 2px darkgray';//valkoista tekstiä vasten
$medium_box_shadow='2px 2px 2px #808080';// gray; valkoista tekstiä vasten
$medium_text_shadow=$medium_box_shadow;
$medium_text_shadow_thicker='3px 3px 3px #808080';
$light_box_shadow='2px 2px 2px #a9a9a9'; // lightgray; valkoista tekstiä vasten
$light_box_shadow_thick='5px 5px 5px #a9a9a9';
$light_text_shadow=$light_box_shadow;//valkoista tekstiä vasten
//taustavärit
$dark_blue='#044774';//rgb(4,71,116)
$semidark_blue='#0E81C1';//rgb(14,120,193)
$extra_window_bg='#efefef';
// erityiselementit
$dark_bg=$generic_link_color;
$dark_buttong_bg=$generic_link_color;
// header
$header_color=$white_color;
$header_text_shadow='3px 3px 3px #000'; // jos ei halua varjostusta, pitää laittaa väriksi 'transparent'
// pienet opastetekstit
$help_color=$white_color;
$help_background_color=$generic_color;
//leivänmurut
$breadcrumb_top_color=$generic_color;
$breadcrumb_top_color_before=$white_color;// eteen laitettavat ikonit
$breadcrumb_top_text_shadow_before=$dark_text_shadow;
/* välilehdet */
$tabs_dark_box_shadow=$tabs_dark_text_shadow=$dark_box_shadow;
$tabs_light_box_shadow=$light_box_shadow;
$tabs_white_color=$white_color;
$tabs_light_background='rgba(4,71,116,.3)';
$tabs_border_color='1px solid #044774';
$active_tab_text_shadow='0 0 1px #333';
$info_text_tab_color=$generic_link_color;
$tabs_border='1px solid #333';
// oletuksena valkoisen tekstin käyttö muissa erityiselementeissä
// widget
$widget_color[1]=$white_color;
// footer
$footer_color=$white_color;
$footer_bg=$semidark_blue;

Teemassa + bbPressissä on ihan hirveästi kaikenmoista väreihin liittyviä määrittelyjä. Tekee miten tahansa, teeman värien radikaali muuttaminen on työlästä. Väreihin liittyvää CSS:ää on yksinkertaisesti liikaa! Tämän Foorumin CSS:n muuttaminen olisi varmasti helpompaa, kun ei ole sorruttu liialliseen CSS:n käyttöön.

Osa on varsin vähäisiä, esim.:

border-color:rgba(255,255,255,.2)

Pitäisikö tuon kaltaiset huomioida vai ei?

 

[Tapio X]

Tuo taitaa olla niin huono idea, että se pitää kuopata. Sinänsä CSS-tiedostoja olisi järkevää laittaa loogisemmin.

Värejä voi vaihtaa kyllä myös vain etsi- ja korvaa-toiminnolla. Mutta värit pitäisi koota ainakin jollakin tavalla. Asia pitää miettiä uusiksi.

Ehkä SASSilla saisi tuon hallintaan. Mutta olisi silläkin tosi iso työ. Järkevissä puitteissa on melko vaikeaa luoda vaihtoehtoinen väriteema.

Keskustelin toisaalla CSS:tä. Siltä kannalta ratkaisuni on huono, että style-tägien sisällä CSS:ää ei voi samalla lailla laittaa cacheen.

Sivujen otsakekuviin ja eräisiin korosteväreihin liittyvä CSS on pakko olla PHP + CSS koodauksena, sillä muuten haluttua ulkoasumääritystä on mahdoton toteuttaa.

Asetuksiin liittyvät lyhyet CSS-pätkät pystyy hallitsemaan huomattavasti helpommin PHP + CSS -koodauksella kuin käyttämällä suurta määrää luokkia ja pelkkää CSS:ää.

Mutta isot staattiset ja valmiit CSS-tiedostot olisi järkevä laittaa link-tägeillä. Se taas ei live-sivustolla onnistunut. Tiedostoa ei lueta.

Kun lähdekoodia tutkiessani klikkasin absoluuttista osoitetta

https://www.sanaristikkofoorumi.net/wordpress/wp-content/themes/forum_css.css

tulee:

Forbidden
You don't have permission to access this resource.

Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.

Yleensä kun klikkaa jonkin sivuston linkitettyä CSS-tiedostoa "Näytä lähdekoodi" -tilassa, CSS-tiedoston saa luettavakseen. Sivustollani se ei onnistu.

hakemistossa /wordpress on .htaccess ja themes-hakemistossa on index.php.

Muutin hakemiston lukuoikeuksia niin, että kuka tahansa voi kirjoittaa, mutta se ei auttanut.

Sijoittaisin isot staattiset CSS-tiedostot /themes-hakemistoon.

 

[Tapio X]

Kyse lukuoikeuksista. Oletus on 0751. Kun laitoin 7755 linkitetty CSS toimi. On varmaan järkevää siirtää isot tiedostoihin, mutta pienehköt voi olla style-tägeillä.

Siirsin live-sivustolla isot CSS-tiedostot erillistiedostoiksi. Kaikki tiedostot joko 99% tai 100% minimoituja.

Tulipa taas sähläiltyä. Mutta käytäntönä jatkossa kannattaa se, että testisivustolla käytän tietokantaa. Kun saan riittävään kuntoon, pakkaan CSS:n ja siirrän live-sivustolle.

Tulipa vähän muutettua käytäntöjäni.

Mikähän on järkevä raja, että käyttää link-tägiä style-tägin sijasta?Nyt siirsin 5K ja 11K tiedostotkin. Ehkä ne turhaan.
Isoin style-tägin sisällä ollut CSS-data oli muuten 84kb.

 

[living_death]

Tämä oli varmaan ennestään tuttua / kerrottu?

Nettisivu auki Firefox selaimessa -> klikkaus hiiren kakkospainikkeella halutun elementin päällä -> valitaan "Inspect Element".

Kaikista näppärin tapa päästä katsomaan css-määrityksiä.

 

[Tapio X]

Käytän vastaavaa Chromium-selaimessa. En tosin käytä sitä juurikaan tuossa tarkoituksessa vaan lähinnä CSS:n kohdentamisen suunnittelussa.

Mutta siitä vaihtoehtoisesta väriteemasta.

Laskin, että jos haluaa dynaamisesti (muuttujia tai vakioita käyttävän) kootun style-tägin, lopullista CSS-koodia tulee tietokoneelle lähes 60kB. Laskin sen tallentamalla paloja ja laskemalla mitä tulee kokonaismääräksi tietokoneella kun mukana on perusosa, foorumiosa ja tietokonemäärittelyt.

Palvelin saa käsittelyyn biteissä enemmän mutta käsittelyssä vähemmän, sillä sille CSS on vain tekstiä, jota ei tarvitse prosessoida.

60 kB style-tägidataa ei oikein tunnu järkevältä (sen määrän selain muuten tällä hetkellä käsittelee testisivustolla eräässä style-tägissä). Ehkä SASS avulla saisi dynaamisen koodin, mutta silti moneen CSS-tiedostoon laitetun CSS:n?

Jos se tarjoaa vain osista kasaamisen, siitä ei minulle juuri ole enää hyötyä, koska CSS on jo olemassa.

Osa CSS:stä on silti ongelmallista, sillä se vaatii PHP:llä if-lausekkeita toimiakseen halutusti, koska BODY-elementin luokat eivät riitä CSS:n hallintaan. Osa värimäärityksestä jäisi SASS:lla pakosti ulkopuolle. Tosin aika pieni määrä. Kyseessä on lähinnä korosteväri ja taustakuvien käyttö. Ne pitäisi paikata jossakin erillisessä Code Snippetissä.

 

[Tapio X]

Mitään hyvää ratkaisua mahdolliselle vaihtoehtoiselle väriteemalle en siis löytänyt. Laitoin alihakemistoon värejä koskevat CSS-tiedostot. Helpoimmalla pääsee kun etsii ja korvaa tietyssä alihakemistossa olevien tiedostojen ominaisuuksia. Sinne kopioin myös kasaamistiedoston, jossa on PHP + CSS -koodausta, jota ei voinut värejä koskeviin CSS-tiedostoihin laittaa.

Otan testisivustolla tarpeen mukaan käyttöön style-tägit. Niiden kanssa versiointi on vain monin verroin helpompaa kuin erillistiedostojen kanssa. Versioita joistakin tiedostoista on tullut tehtyä yli 60 kpl, mutta olen vanhoja poistellut tarpeettomina.

Oli tosiaan tyhmää cachen takia käyttää massiivisia style-tägejä livesivustolla. Siitä huomautus oli ihan oikein.

Siirsin JS:ääkin erillistiedostoihin niin paljon kuin mahdollista. Kaiketi niissäkin on hyötyä, että tallennetaan cacheen.

 

[Tapio X]

Code Snippetin kanssa CSS:ää oli helppo tehdä versioita. Mutta erittäin huono kirjoittamiseen. Mikähän olisi paras ilmainen CSS-editori. Olisi kiva, jos se osaisi automaattisesti minimoida ja purkaa minimoinnin.

SASS olisi järkevä, jos tekisi muille sivuja, mutta yhden sivuston kanssa en koe mielekkääksi.

Entä CSS:n pilkkominen entistä pienempiin paloihin media-attribuuteilla, esim.
media="screen and (max-width: 782px)"

 

[Tapio X]

peruttu

 

[Tup3x]

Versiointi hoidetaan Git:illä tai jollain muulla versionhallinnalla. SASS sopii mihin vain ja helpottaa asioita. Se voi olla vaikka aivan puhdasta CSS:ää eli todella helppo ottaa käyttöön. Minifoinnit ym. voi tehdä erikseen vaikka Node.js:ää käyttäen Gulpilla siten kun haluaa siirtää kamat tuotantoon. G-zipattuna ja minimoituna tyylitiedosto tuskin vie paljon mitään.

Itselle ei ole tullut vastaan kerta kaikkiaan yhtään tilannetta, missä CSS olisi pakko pilkkoa eri sivuilla miten sattuu. Toistosta pääsee SASSilla eroon.

Lisäksi tämä on mahdollista:

// Vaikka bodyssa
.joku {
// CSS:ät tänne, jotka mätchytyvät vain tuon luokan lapsissa.
}

 

[Tapio X]

Minun on pakko jakaa CSS:ää paloihin ainakin mobiili ja tietokoneversioihin, koska ne poikkeavat niin paljon toisistaan.

Lisäksi halusin jakaa muut sivut ja foorumiosion eri paketteihin (n. 25kB). >782 ja 783+ voisi pilkkoa. Yleinen CSS-tiedosto on nyt 51kB.

SASSista saattaisi olla apu turhien määrittelyjen poistamiseksi. Joskus taas on hyvä, että jotkut ovat erikseen.

Jos muuttaa värejä, sillä jos muuttaa värejä, värien muutos ei tapahdu välttämättä niin, että kaikkialla sama väri korvataan samalla värillä. Käyttötarkoistus pitää myös huomioida.

Ja kuten moneen kertaan olen kertonut, BODYn luokilla ei voi hallita joka asiaa. Se nyt vaan ei onnistu.

Mikäli tarkoitat yleisesti sisäkkäisistä määrittelyistä, sen huomasin.

Olen minimoinut CSS Minifier

Tiedä häntä käyttäytyvätkö kaikki minimoijat samoin, mutta pikkasen tuossa ärsyttää se, että se muuttaa aina rgb:llä tai sanoilla määritetyt värit (gray jne) heksadesimaaleiksi.
____________

Koodin siivoaminen ei mennyt putkeen. Otin takaisin käyttöön aiemman koodin. No koodissa on vanhanaikaista onclick... koodausta vaikka moderni koodaus on korvata ne luokilla ja jQueryillä. Ei oikein maksa vaivaa vain ihan periaatesyistä yrittää koodata systemaattisesti modernisti. JS-koodi toimii, mutta ei täyty moderneja laatuvaatimuksia. Mutta kun tekee harrasteena, ei asia ole muu kuin kunniakysymys.

 

[living_death]

Sehän on järkevää jakaa eri css-tiedostot omikseen isossa kokonaisuudessa, näin ainakin itse teen.

Muista myös /* kommentti */ luokan yläpuolelle, jotta muistat jatkossa mihin mikäkin muutos vaikuttaa.

Tämä esimerkki omasta ylläpitämästäni sivustosta:

/* SIVUPALKKI: BLOGIT IKONI */
.swatch-white-red .sidebar-widget .post-icon i:before {
    content: "\f101" !important;
    font-family: FontAwesome !important;
    font-size: 32px !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 5px !important;
}

 

[Tapio X]

Mikähän on raja, jolloin pilkkominen on järkevää? Ihan kokeeksi jaoin 51 kB tiedoston. Alle 783 kokonaiskoko 40 kb ja yli 45kB. Säästöä 11kB ja 783+ 6kB.

 

[living_death]

Onko sillä oikeasti niin väliä?

Ei kellään ole enää puhelinmodeemia tai ISDN-yhteyttä ja matkapuhelinyhteydetkin vähintään 4G ja selaimet tallentavat osan vierailusta seuraavaa kertaa varten.

Joku 51kb kertaa 4 ei tunnu missään. Sivuja voi optimoida muulla tavalla nopeammaksi.

Olin yhden aika suuren oikealla rahalla pelattavan rahapelisivuston yksi "koodari" tuonnoin ja se meni jossain vaiheessa aina hitaaksi ja siihen löytyi cache työkalu, joka korjasi tilanteen kuntoon.

 

[Tapio X]

Värien irrotus muusta hieman kasvatti kokonaiskokoa, koska samoja elementtejä luokitellaan sekä muiden ominaisuuksien että väreihin liittyvien ominaisuuksien mukaan. Maksimissaan 170kB luokkaa teema + foorumi.

 

[living_death]

Oletko oikeasti testannut sivujesi nopeutta muuten kuin mutuilemalla.

internet page speed test - Google-haku