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

Viestiketju alueella 'Ohjelmointi, pelikehitys ja muu sovelluskehitys' , aloittaja Tapio X, 21.05.2019.

  1. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Äh sain sittenkin testisivuston toimimaan. Ongelmana oli se, että oletusarvoinen SQL-dump ei luonut avainkenttämääritystä. Piti muutamat taulut luoda uudestaan. Osaan vain lisäsin SQL-komennolla puuttuvan avainkenttämäärityksen.

    Harmi, että meni sähellykseksi, mutta WP:n oma siirtosysteemi nyt vain oli totaalisen käyttökelvoton.

    No ainakin seuraavan kokeilun saan testisivustolle. Siellä voi keskustellakin asiasta - jos kirjautuu ensin.

    Aihe: XenForon pikanavigoinnin ja tämän sivuston toimintavalikon vertailu | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa

    Vain perinteinen kirjautuminen.

    Seuraavaksi voisi kokeilla, miltä vastaava toimi HD /iPadd 9,7 vaakanäytöllä.

    Siitä on tällä hetkellä keskeneräinen versio testisivustolla. Koska se on keskeneräinen, kaikkiin seikkoihin ei kannata kiinnittää huomioita. Lähinnä vain itse perusideasta kannattaa esittää kommentteja.

    https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190908_211640.jpg
     
    Viimeksi muokattu: 08.09.2019
  2. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Testisivustolla voisi osiokohtaisesti testata erilaisia vaihtoehtoja laittamalla CSS:ää if-rajausten sisään. Mutta toivoisin tosta keskeneräisestä kommentteja. Kannattaako kokeilua jatkaa? Mitä pitäisi muuttaa? Mikä on liikaa? Mitä voisi lisätä?

    Tein pieniä korjauksia JS-komentoihin. Näemmä href="#" ... onclick="...;return false"; pitäisi luopua kokonaan, koska return false toimii epäluotettavasti. Välilehtiä vaihdettaessa href="#" palautti usean muutoksen jälkeen sivun alkuun. Korvasin välilehtivaihdot span onclick="..." ja ongelma hävisi. Jossakin saattaa vielä olla epäluotettavia href="#" onclick="... -toimintoja. Korjaan, jos aihettavat ongelmia.

    Poistin ylemmät hakulomakkeet, koska se on muutenkin esillä. Toteutuksessa on iso joukko ongelmia.

    Kaikista fiksuinta olisi tietenkin luopua onclick... kokonaan ja korvata JQuery-koodauksella.
     
    Viimeksi muokattu: 09.09.2019
  3. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Tätä kirjoitettaessa tilanne on tämä:

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

    Ulkonäössä on viilaamista ja parannusehdotuksia saa esittää. Suoranaisia virheitäkin löysin, joten töitä riittää ennen kuin uusin versio on käyttökelpoinen.

    Testisivustosta on ainakin se apu, että ei tarvitse näyttää keskeneräistä toteutusta. Kun testisivusto on netissä, sitä voi kommentoida paremmin.
    ____________

    Muutin pystynäyttöön tekstiksi LÖYDÄT VALIKOT TÄSTÄ.
     
    Viimeksi muokattu: 09.09.2019
  4. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Korjasin muutaman pienen CSS-virheen. Mietin, tarvitseeko HD-laite/iPad 9,7 -näyttötason omaava laite vaakasuuntaan päävalikkolinkkiä lainkaan vaan vain yhden valikkopainikkeen ja sen eteen tekstin VALIKOT (sekä mahdollisesti >-merkin perään)?
    _______________

    Ps. Unohdin, että ehdotettiinhan sitä helpompaakin tapaa kopoida sivusto.
    All-in-One WP Migration

    No kuvia en kaivannut. Olisin selvinnyt vain helpommalla.
     
    Viimeksi muokattu: 10.09.2019
  5. living_death

    living_death ★ Still alive ™

    Viestejä:
    2 540
    Rekisteröitynyt:
    15.11.2016
  6. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Sain siirrettyä riittävän hyvin phpMyAdmin avulla. Olen jo tehnyt muutoksia, joten uutta yritystä ei edes kannata yrittää enää.

    Sitäpaitsi klooniakin olisi tarvinnut korjata, jotta linkit toimisivat. Siihen on etsi ja korvaa -työkalu, jolla saa korvattua virheelliset linkit tietokannassa.

    Kuvien osoitteet jätin ennalleen, jolloin niistä ei tarvitse kopioita. Lopputulos on nyt parempi kuin klooni.

    Hyvä olla tosiaan erillään. Tuli asia, jota en ymmärrä.

    Suorittamisjärjestysongelmia | WordPress.org
     
    Viimeksi muokattu: 10.09.2019
  7. Xiyng

    Xiyng

    Viestejä:
    1 090
    Rekisteröitynyt:
    19.10.2016
    Heitän arvauksen, että pageLists-funktiota ei ole kutsuhetkellä ladattu. Jos pistät pageLists-kutsun toiseen funktioon, sitä toista funktiota ei suoriteta heti sillä hetkellä, kun se tulee koodissa vastaan, joten silloin ei haittaa, vaikkei pageLists-funktiota löytyisikään. Ongelma tulee vasta sitten, kun yrität kutsua tätä toista funktiota, sillä silloin tarvitaan välittömästi tietoa siitä, mikä funktio tämä pageLists on. Vähän toiselta kannalta: Jos kirjoitat pageLists-kutsuja ns. globaaliin scopeen, ne suoritetaan saman tien, joten funktiokutsunkin pitää onnistua. Jos taas kirjoitat samalle paikalle funktion, joka tekee pageLists-kutsuja, ei pageLists-kutsuja suoriteta saman tien vaan vasta kun myöhemmin kutsut tätä toista funktiota. Kun sitten myöhemmin kutsut tätä toista funktiota, myös pageLists-kutsut suoritetaan, jolloin tulee virheitä, jos pageLists ei ole "tiedossa".

    Oletettavasti tiedostossa, jossa käytät pageLists-funktiota onnistuneesti, on määritelty myös pageLists. Tällöin on tiedossa, missä moinen funktio on, joten funktiokutsukin onnistuu. Toinen tiedosto ei kuitenkaan itsekseen tiedä mitään eri tiedostossa määritellystä pageLists-funktiosta, joten tiedostoa pitää vähän avittaa. Käytännössä esim. require_once on tähän yksi tapa.
     
  8. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Ei, mutta prioriteetti on niin, että siinä, millä kutsutaan, on prioriteetti, joka määrittää tietueen latautumaan myöhemmin.
    Vaikutus on sama, jos funtio olisi ensimmäisenä samassa tietueessa.

    Kyseessä oli ns. shortcode-koodissa käytetty funktio. Koska siinä tapauksessa ongelmia ei ollut ajamisen suhteen, funktion täytyi olla käytettävissä. Shortcode ajetaan siis funktion kannalta sopivassa järjestyksessä.

    Code Snippet prioriteettimäärityksillä voi yrittää saada funktiot oikeaan suoritusjärjestykseen. Tosin WordPressillä on oma käsittelytapa, joka sekin on otettava huomioon. Joskus Code Snippet ei osaa sitä ottaa huomioon. Mutta onneksi testisivustolla ei niin väliä, jos sivusto koodausvirheiden takia kaatuu.

    Yritin kerran include... Ei toiminut. Code Snippet taitaa hylätä ne, koska ei pysty niiden syntaksia tarkistamaan.

    Laadin funktion väärin, joten siitä ei ollut hyötyä siinäkään kohdassa, jossa se oli käytettävissä.

    function pageLists($list){
    $blogi=stristr($currentUrl='https://' . $_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI'],'/test/blogikirjoitukset');
    ...
    $list[0]=$blogi;
    $list[1]=$articles1;
    $list[2]=$articles2;
    $list[3]=$muut;
    $list[4]=$howAlt;
    return $list;}
    ...

    function topOpenSidebar($forum_id = 0 ){
    $articles = pageLists($list[2]);
    $blogi = pageLists($list[0]);
    if($articles){...}elseif($blogi){...}else{...}
    ...

    Ei listannut oikeita valikoita. Tuli aina sama valikko.
    Idea oli määritellä sivuryhmät yhdessä funktiossa ja käyttää muualla array-muuttujaa käyttäen. Miten array-muuttujan yksittäisiä arvoja voisi käyttää ehtoina mikä tehtävä (tässä tapauksessa valikon printtaus) suoritetaan ja mikä ei.

    Tällaista ei tullut vastaan kun joskus puoliammattilaisesti koodasin.
    ___________

    Totesin, että LÖYDÄT VALIKOT TÄSTÄ on sittenkin liikaa "rautalangan vääntämistä". Laitoin vain VALIKOT. Poistin avautuvasta valikosta ylhäältä tekstin TOIMINNOT, koska välilehdistä näkee, mistä on kyse. Tarpeeton opastaminenkin on turhaa.

    ___________

    Sivustoni toimii oikeastaan ikäänkuin kahdessa suunnassa. Välilehdet eivät liikuta käyttäjää juurikaan pystysuunnassa vaan ovat vähän kuin rinnakkaisikkunoita.

    ___________

    Testisivustolla kokeilussa versio, jossa HD-näytöllä vaakasuuntaan on vain yksi valikkopainike. Siinäkin sivupalkki on nyt turhake. Ihan vain testimielessä poistin näkyvistä sivupalkin. Käyttöliittymä siinäkin on varsin minimalistinen, mutta ei ihan niin riisuttu kuin pystysuuntaisessa versiossa.

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

    Voisihan senkin minimoida pystynäytön tyyliseksi, mutta pari isoa kuvaketta oikeassa reunassa tuntuvat kivoilta.
    ___________

    Kolmannen välilehden teksti LISTAT ei tunnu hyvältä, mutta en keksinyt parempaakaan. Pääsääntöisesti kyse on linkkilistoista. Mikä olisi parempi teksti? Hirveän pitkä ei saisi olla. MUUTA? MUUT LINKIT? Jälkimmäisessä se, että ihan kaikki asiat eivät ole linkkejä. LISÄT? - kuvaa olemusta, mutta onko senkään parempi. Tuntuu nyt kuitenkin parhaimmalta vaihtoehdolta, joten vaihdoin. Napakan kuvaavan nimikkeen löytäminenkin on joskus hankalaa.

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

    Voihan nämä minun minimalistisuuskokeilut mennä överiksikin. Tavallaan haluan kyseenalaistaa liian ahdettuja sivustoja.

    Kyllähän sivuja rullaa, mutta ongelmaksi hyvin pitkällä sivulla esim. mtv3 uutiset muodostuu se, että hyvin äkkiä unohtaa, mitäs sitä sivulla oikein olikaan kun tavaraa on paljon. Kun sivu vain jatkuu ja jatkuu ja jatkuu loppupää kyllä jää usein katsomatta.

    Jos halutaan hyvin paljon asiaa samalle sivulle, mikään ratkaisu ei enää toimi.
     
    Viimeksi muokattu: 10.09.2019
  9. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Laitoin myös säännöt valikoiden yhteyteen. Nyt tosin vasta testisivustolla.

    Tyttäreltä sivusto sai tyylillisesti tuomion: "Ysäriä". Ruma fontti ja huonot värit. Huono väri koski tosin lähinnä valikoiden tummaa sinistä. Footerin vaaleampi sininen olisi valikoissa hänen mielestään parempi. Koin ongelmaksi sen, että tietokoneella oli ns. pudotusvalikoissa tumma sininen, mutta kapealla näytöllä avautui vaaleampi sininen. Yhtenäistin värit, mutta ehkä olisi pitänyt yhtenäistää sen toisen sinisen mukaan.

    Ysäriä on kyllä välilehtien visuaalinen toteutus. Se pitäisi saada moderniksi. Ehkä jokin muukin yksityiskohta. Vähän yksinkertaistin, mutta tytär piti tyyliä edelleen ysärinä. Olisiko kellään ehdotuksia välilehtien ulkoasuksi niin, että ne on vain CSS:llä toteutettavissa?

    Kokeilin testisivustolla vaaleampaa sinistä:
    https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190911_144230.jpg

    Fontin vaihdoin erikoisfontista perusfontiksi, että voisin välttää yhden fontin latauksen. Ehkä pitäisi palauttaa Google-fontti 'Lato'. Valikoiden taustalle on helppo vaihtaa toinen väri.

    Tein aikoinaan teknisiä toteutuksia. Välillä ne onnistuivat todella hyvin, mutta välillä takkuili. Olen teknisessä ajattelussa parempi kuin ulkoasutoteutuksessa.

    Myönnän avoimesti, että hyvän väriskaalan luominen ei kuulu vahvuuksiini, minkä vuoksi olen käyttänyt pääsääntöisesti annettujen palettien värejä.
     
    Viimeksi muokattu: 11.09.2019
  10. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    PHP-koodista Code Snippet -lisäosan kanssa on outo ongelma.

    Laitoin Code Snippet -tietueelle, jossa määritin funktion prioriteetin 1.
    Funtio, jossa oli kutsu, oli prioriteetilla 7.

    Oletin, että funktio löydettäisiin enkä saisi virheilmoitusta.

    Kun laitoin funktion samaan tietueeseen, missä sitä kutsuttiin, ongelmaa ei tullut.

    Jotenkin prioriteetit eivät toimi ihan oikein. Ymmärtääkseni 1-merkitty tietue pitäisi lukea ennen 7-merkittyä, mutta niin ei käynyt. Ei ainakaan Code Snippet -tietueen tallennusvaiheessa. Koodi olisi saattanut todellisuudessa toimia ilman virheilmoitusta netissä, jos sen olisi pystynyt tallentamaan. Ymmättääkseni lisäosa toimi tässä kohtaa bugisesti.

    Kysyin tästä asiasta tekijältä:
    Priority checking error? | WordPress.org
     
    Viimeksi muokattu: 11.09.2019
  11. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Testasin funktion palauttamia arvoja eri sivuilla

    print_r(pageLists($list));

    Se antoi käyttökelpoisia arvoja, kuten:

    Array
    (
    [0] => /test/blogikirjoitukset/
    [1] =>
    [2] =>
    [3] =>
    [4] =>
    [5] =>
    [6] =>
    [7] =>
    )
    Array
    (
    [0] =>
    [1] => 1
    [2] => 1
    [3] =>
    [4] =>
    [5] =>
    [6] =>
    [7] =>
    )

    Tosta array-muuttujasta pitäisi vain saada oikealla lailla testi ulos, eli tuleeko testistä 1 tai string eli antaako se lopputuloksena arvon true vai ei.

    $blogi = pageLists($list[0]);
    $articles= pageLists($list[2]);

    elseif($blogi)... ei silti toimi sillä arvo on aina true kohdassa if($articles)...

    Hiivatti kun en keksi oikeaa tapaa toteuttaa tämä. Eihän tämä kysymys tärkeä ole, mutta harmittaa niin *piip* kun en keksi, mikä mättää.
    ____________

    PS. Kyse vähän samasta asiasta, jos en hoksaa jonkin ristikon vihjeen ideaa.
     
    Viimeksi muokattu: 11.09.2019
  12. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Yritin eilen etsiä googlella funktiota, joka purkisi arrayn string-tyyppisiksi muuttujiksi. Oletan, että tähän olisi jokin valmis funktio, mutta en eilen osannut laittaa oikeaa hakusanaa.

    Yritin uudestaan "convert array into strings php". Tuli implode-funktion käyttöesimerkkejä.

    Esimerkeissä tulostettiin suoraan arvot käyttäen echo-komentoa, esim.:


    $arr = array('Hello','World!','Beautiful','Day!');
    echo implode(" ",$arr)."<br>";
    echo implode("+",$arr)."<br>";
    echo implode("-",$arr)."<br>";
    echo implode("X",$arr);

    Yhdessäkään ei neuvottu, miten luoda uusia muuttujia. Pitäisikö tässä luoda jokin silmukka?
     
  13. Nigel

    Nigel

    Viestejä:
    316
    Rekisteröitynyt:
    23.10.2016
    PHP:tä yhtään tuntematta oletan kuitenkin, että sun ei yksikerrallaan kannata tallentaa listan arvoja muuttujiin. Todennäköisesti for-loop tai joku map-funktio on oikea ratkaisu.
     
  14. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Itse asiassa yritän miettiä, miten saada ulos.
    Silmukkaesimerkki:

    $colors = array("red", "green", "blue", "yellow");

    foreach ($colors as $value) {
    echo "$value <br>";
    }
    Tuon pohjalta voisi kokeilla:

    Koodi:
    $address = pageLists($list);
    $x=0;// laskuri for-silmukan tapaan
    foreach ($address as $value) {
     if($x<3){
         if($x==0){
           $blogi=$value;
        }
        elseif($x==2){
          $articles=$value;
        }
      }
      else{break;}
    $x++
    }
     
    Viimeksi muokattu: 12.09.2019
  15. Paapaa

    Paapaa

    Viestejä:
    2 876
    Rekisteröitynyt:
    17.10.2016
    @Tapio X, laitapa koodi CODE -tagien sisään, niin helpompi lukea kun sisennykset pysyvät. Ja toiseksi: mitä tarkalleen yrität tehdä?
     
  16. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Kirjoitin tuon ilman sisennyksiä. Aika usein jätän sisennykset laittamatta ja teen varsin kompaktia koodia. Idea on saada silmukassa ulos yksittäisiksi muuttujiksi tietyt funktion pageLists($list) sisältämät array-muuttujan arvot, joita sitten käyttäysin testaamaan, mitä tulostetaan.

    Itse asiassa tuo toimi! Voit testata tuon koodin toimivuutta mobiililaitteella osoitteessa

    Foorumit | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa
    avaa valikko ja klikkaa LISÄT
    testaa sama blogiosiossa ja artikkeliosiossa.
    Tulee eri sisältö.
     
  17. Paapaa

    Paapaa

    Viestejä:
    2 876
    Rekisteröitynyt:
    17.10.2016
    En oikein keksi, miksi käytät for-silmukkaa. Tuossahan olet kiinnostunut vain talukon 1. ja 3. arvosta - jos ne taulukosta löytyvät. Muilla et tee mitään. Ja oikeasti kannattaa alkaa sisentää koodia. Sitä lukee nopeammin, hahmottaa helpommin lohkojen alut ja loput, sekä mihin joku satunnainen else liittyy jne. Ja jos kuka tahansa muu koodiasi joskus katsoo, niin ei katso ellei se ole kunnolla muotoiltu.
     
  18. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    foreach silmukka on näppärä array-muuttujalle. For-silmukasta lainasin vain tuon $x++; käyttämisen. Tuo oli ainoa koodi, jonka osasin koodata niin, että tekee, mitä haluan.

    Toisessa käyttöyhteydessä logiikka mulla vähän petti, mutta keksin, missä on vika. Kun ehdot voi määrittää yhdessä paikkaa, mahdollisia muutoksia ei tarvitse tehdä monessa tiedostossa.
     
    Viimeksi muokattu: 12.09.2019
  19. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Muokkasin välilehtien ulkoasua:
    https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190912_162039.jpg

    Varmaan parempi, mutta varmaan joku osaa esittää tyylikkäämmänkin toteutuksen. Ei aktiivisen välilehden avaajan (span) luokka on "normal-tab" ja aktiivisen "gold". Muutin JS-koodia niin, että välilehdillä on aina vain jompikumpi noista. Jos toinen on päällä ja klikataan, toinen poistetaan ja toinen lisätään. Poistot tehdään myös viereisiin välilehtiin. Yhteiset määrittelyt tulee tehdä span.normal-tab,span.gold{...}

    Lisäsin välilehtiin kevyen varjostuksen, kun ne minusta eivät näyttäneet näteiltä ilman varjostusta.

    Sulje valikko/Sulje ikkuna voisi ehkä kehystää? Tällöin sekä tummaa että vaaleaa taustaa vastaan voisi käyttää samoja värejä. Kokeilu, joka vaatii varmasti hiomista:

    https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190912_233043.jpg
     
    Viimeksi muokattu: 12.09.2019
  20. Xiyng

    Xiyng

    Viestejä:
    1 090
    Rekisteröitynyt:
    19.10.2016
    Ehdottaisin, että et liitä CSS-luokkien nimiin mitään ulkoasuun suoraan viittaavaa (esim. gold-sanaa) vaan pyrit nimeämään ne käyttötarkoituksen mukaan (esim. active-tab). Todennäköisesti olisi myös järkevää käyttää kaikkiin yhteistä luokkaa (esim. tab) ja tehdä siihen valittuun muutoksia omalla luokka (esim. se active-tab). Näin välilehdillä on jotain yhteistä myös luokkien osalta (ja onhan niillä oikeastikin jotain yhteistä: ne ovat kaikki välilehtiä), ja lisäksi esim. värimaailman muutokset eivät riko nimeämisen järkevyyttä. Nythän gold ei ole nimenä järkevä, jos muutat värimaailmaa jossain vaiheessa enemmänkin.

    Itse tykkäsin enemmän aiemmasta kulmikkaasta tyylistä, mutta enpä kyllä olekaan sen puoleen käyttöliittymäasiantuntija. Selaimista Chrome käytti ennen kulmikkaampaa tyyliä ja vaihtoi sitten pyöreämpään tyyliin, kun taas Firefoxissa oli ennen pyöreä tyyli ja nyt on kulmikas. Molemmat lienevät siis sinänsä ihan perusteltavissa olevia valintoja. Omasta mielestäni isoin ongelma on värimaailma, joka ei tosiaankaan ole ihan tätä päivää. Suoralta kädeltä en kuitenkaan osaa parempaakaan ehdottaa vaan vaatisi kokeilua. Todennäköisesti kannattaisi kuitenkin vaihtaa pääväri noinkin tummasta sinisestä johonkin vaaleampaan sävyyn (tai tummempaan, jos hakee tumma teema -trendin mukaista värimaailmaa, mutta tällöin pitäisi varmaan miettiä koko homma uusiksi).

    Lisäksi - joskin pikkukuvan perusteella on vaikea ottaa kantaa - kannattaisi mahdollisesti järjestää käyttöliittymä jotenkin niin, että välilehdellä valittavat elementit yhdistetään jotenkin paremmin siihen välilehteen itseensä. Perinteisesti tämä on taidettu tehdä usein jonkinlaisella reunuksella, joka sitoo välilehden ja sen vaikutusalueen toisiinsa, mutta voinee olla muitakin ratkaisuja. Tällä hetkellähän välilehtien alla oleva sisältö hukkuu vähän taustaan (mikä tosin on sekin nykyään varsin trendikästä - omasta mielestäni lähes järjenvastaisesti, mutta en tosiaan ole käyttäliittymäasiantuntija), sillä sen tausta on käytännössä yhteinen välilehtien "ulkopuolisen maailman" kanssa (esim. välilehtien yläpuolella olevan tilan kanssa).
     
  21. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Kiitti kommenteista. Kun kaikki oma koodi ja CSS on Code Snippet -tietueissa, kolme tietokannan ajoa muutti kaikkialla luokan gold nimelle active-tab. Kahdelle sivustolle tehtynä vei aikaa alle kaksi minuuttia.

    Yhteisen luokan muuttaminen ja joihinkin välilehtiin sen lisääminen veivät vähän enemmän aikaa, mutta varsin nopeasti sekin hoitui. Tein senkin tietokanta-ajona. Laitoin ihan ehdotuksesi mukaan, joka oli hyvä.

    Pikku muutosten suhteen työtapani on käyttää Code Snippet -lisäosaa on hyvä. Siinä on kyllä neljä perusongelmaa:
    1. Saattaa kaataa sivuston, sillä se ei osaa luotettavasti tarkistaa, onko funktio käytettävissä vai ei. Se tekee tämän asian suhteen kaikkia mahdollisia virheitä! Nämä ovat tulleet vastaan:
      1. Ei aina varoita siitä, että funktio ei ole käytettävissä. Virhe kaataa sivuston.
      2. Ei aina löydä määriteltyä funktiota. Estää käyttämästä toisessa tietueessa määriteltyä funktiota.
      3. Ei aina varoita siitä, että funktio on jo määritelty. Virhe kaataa sivuston.
    1. Jos koodissa on CSS:ää, se ei luotettavasti osaa etsiä koodista sulkujen päättymiskohtia.
    2. Siinä ei ole CSS:n syntaksin tarkistusta. Virheellinen CSS saattaa pilata totaalisesti sivuston ulkonäön.
    3. Siinä ei ole JavaScriptin syntaksin tarkistusta. Virheellinen JavaScript aiheuttaa sen, että osa sivuston toiminnallisuuksista on rikki.
    Se, että kaikki on tietokannassa helpottaa suuresti ylläpitoa ja systemaattisten muutosten teko on helppoa. Miten muuten tekisi sekä PHP-koodiin että CSS-koodiin tämän tyylin muutokset noin puolessa minuutissa koko sivustolle?

    Vaikka Code Snippet -lisäosassa on todella ilkeitä ja kavalia bugeja ja puutteita, sen käytössä on myös merkittävät etunsa. Minulle ne edut voittavat puutteet. Tosin kun olen virheherkkä, puutteet ja bugit ovat kyllä jonkin tason ongelma.

    Code Snippetillä olisi jopa järkevä tehdä jonkinlaisia lisäosia. Silloin kaikkinainen pikku muuttaminen olisi helppoa. Irrallisina lisäosina muutokset joutuisi tekemään erillisellä koodieditorilla. Pitää vain olla tietoinen siitä, että Code Snippet saattaa kaataa sivuston.

    Muutokset tulivat myös aiempiin versioihin, joten myös siinä kulmikkaan tyylin CSS:ssä on muutokset. Kulmikas, pyöristetty, varjostettu/ei-varjostettu ovat niin paljon makuasioita, että minulla on ihan yhtä epävarma tunne siitä, mikä on hyvä vaihtoehto.

    Sen huomasin, että pelkkä pyöristys on rumin vaihtoehto. Joko kulmikas kevyellä reunustuksella tai pyöristys varjon kanssa. Tämäkin on tosin mututuntumaa.

    Välilehtien sisältö on minulla tarkoituksellisesti hukutettu taustaan, koska reunustus olisi minusta ruma - ja se vaatisi lisää JavaScriptiä, että

    Olen saanut opetusta koodaamisesta. Sain käymästäni koulusta periaatteessa riittävän opetuksen verkkosivustojen pystyttämiseen, ylläpitoon ja niiden koodaamiseen PHP:llä, HTML:llä ja CSS:llä. JavaScript -opetusta oli niukasti - käytännön tarpeisiin nähden riittämättömästi. Lisäksi oli hieman opetusta Flashin ja Javan käytöstä, mutta kun niillä ei enää uusissa sivustoissa käytetä, niillä ei ole merkitystä. Ulkonäkösuunnittelua ei koulutukseeni kuulunut. Olen sen suhteen kyllä ihan täysi amatööri.

    Värimaailmaan koskemisen suhteen tunne oloni hyvin avuttomaksi. bbPress suhteen olen siihen kyllä koskenut vaihtamalla sen värejä teeman väreiksi. Teeman väreihin en ole muuten puuttunut kuin laittanut tummimpaan siniseen läpinäkyvyyttä + luonut omia korostuksia aktiivisille sivuille/sivuosioille ja välilehdille.
     
    Viimeksi muokattu: 13.09.2019 klo 11:23
  22. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Yhtenäistin SULJE VALIKKO, SULJE LISTA ja SULJE IKKUNA ulkoasun eli ne ovat kaikkialla ihan samat kuin kuvakaappauksessa. Hieman asemoin valikoiden sulkemispainikkeita niin, että ne ovat välilehtiin nähden nätimmin.
    https://www.sanaristikkofoorumi.net/test/wp-content/uploads/IMG_20190913_123424.jpg

    En nyt oikein osaa parantaa ulkoasua muussa suhteessa kuin hienosäätää marginaaleja ja dimensioita (niitä taasen voi hioa loputtomiin eikä koskaan ole tyytyväinen). Hioin jonkin verran marginaaleja paremmiksi.

    Sinänsä kivan ja ystävällisen tuntuinen Xiyng ei minua tässä asiassa osaa auttaa. Rakentavat ehdotukset muilta olisivat paikallaan.

    ____________

    Ihan vaan tiedoksi, että oli pakko vaihtaa live-sivustolle sama ulkoasu kuin testisivustolle, sillä HD-laitteella kapealla näytölle joskus näkyvä päävalikko oli ulkonäöllisesti ihan rikki. En jaksanut ruveta korjaamaan.

    ____________

    Täällä pikavalikossa on vain SULJE eikä SULJE VALIKKO. Onko täsmennys tarpeen kun minulla noiden ikkuinoiden merkitys vaihtelee vaikka kaikki sinänsä ovat avautuvia ikkunoita?
     
    Viimeksi muokattu: 13.09.2019 klo 19:10
  23. Zyrppa

    Zyrppa

    Viestejä:
    1 341
    Rekisteröitynyt:
    20.10.2016
    Itse en ainakaan jaksa enää keskustelua seurata tai sivulla käydä:
    upload_2019-9-13_12-48-44.png
     
  24. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Miksi osallistua sitten keskusteluun ollenkaan, jos sitä ei jaksa seurata? Jos ei voi esittää rakentavaa kommenttia, ei kannata esittää kommenttia lainkaan.

    Kiva, että täällä on Xiyng kaltaisia kommentoijia, joilla on aina asiaa.

    ____________

    Kiitos kuitenkin tuosta kuvakaappauksesta. Olin vahingossa poistanut index.htlm-tiedoston. Se oli rakentavaa osallistumista.
     
    Viimeksi muokattu: 13.09.2019 klo 17:27
    Nigel tykkää tästä.
  25. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Xiyngin ja tyttäreni mielestä tumma väri valikoissa oli huono, kokeilin testisivustolla vaihtaa sen vaaleamman sininiseen.

    Aihe: XenForon pikanavigoinnin ja tämän sivuston toimintavalikon vertailu | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa

    Jätin header-osan päälle tulevat hover-efektit sekä valikoiden hover-efektit ennalleen. Vaalensin valikoiden varjon väriä, koska vaaleammalle värille ihan musta varjo oli liian voimakas kontrasti.

    Toivoisin tästä kommenttia. Kapealla tietokoneruudulla valikolla on kuvassa näkyvän vaalean sinisen värinen taustaväri (sama kuin mobiiliversiossa)
     
  26. Nightuser

    Nightuser

    Viestejä:
    1 472
    Rekisteröitynyt:
    30.10.2016
    Aivan se ja sama minkä värisiä nuo ovat kunhan eivät vaan avautuisi kun hiirellä menee niiden kohdalle. Klikkaamalla auki niin olisi parempi.
     
  27. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Mielestäni tietokoneella hiirellä ylimeneminen ja siten avautuminen toimii. Sen tyyppisiä valikoita käytetään tietokoneella paljonkin.

    Tuo on teeman oletuskäytäntö eikä sen muuttaminen ole yksinkertaista. Vaatisi jQueryen luomista ja ehkä lisäluokkien määrittelyä avautuville valikoille. Kun on monta tasoa, JavaScriptistä tulisi aika monimutkainen. En edes ole yrittänyt, koska tuntuu aika kompleksilta.

    Toteutuksen liiallisen monimutkaisuuden vuoksi en yritä muuttaa tietokoneversiossa JavaScriptillä valikkoa klikattavaksi.

    Mobiilissa toiminta täytyy perustua klikkaamiseen. Mobiilissa ei leveälläkään näytöllä saisi olla :hover-toimintoon perustuvaa avautumista. Sellainen oli käyttämässäni teemassa, mistä syystä määritin valikot mobiiliin täysin uusiksi.

    Mobiiliin klikattava leveä valikko ei joka tapauksessa olisi käynyt, sillä valikko on monelle laitteelle liian korkea. Joka tapauksessa nykyinen mobiilivalikko olisi pitänyt määrittää ainakin HD-laitteille.

    Koska rullaaminen on mobiililaitteella varsin helppoa, sivustoni päävalikko ei mielestäni ole liian pitkä rullattavaksi. Toki jonkin toisen teeman valikko olisi ollut taso kerrallaan avattava. jQueryllä tietenkin tällaisenkin voisi toteuttaa, mutta koen tarpeettomaksi.

    Vaikka osaan hieman jQueryn käyttöä ja ymmärrän sen idean, en ole siitä kovinkaan hyvä.

    Se taas olisi tietänyt melko kompleksia mobiilisuunnittelua. Mobiililaitteille pitäisi määrittää useita päävalikoita, joista näyttää laitteesta riippuen eri valikon. Liian monimutkaista ja liian vaikeasti hallittavaa. Jo nyt hallinta on aika kompleksia. Enempää kompleksisuutta en kaipaa.

    ______________

    Jotta päivitys olisi helpompaa, laitoin kaikille yli 783px mobiililaitteitta HD-tyyppisen ratkaisun.

    1280x800 Chrome Android en saa millään edelleenkään fontteja näkymään oikean kokoisina. html{font-size:16px} lisäsin, mutta siitä ei ole apua. Selain ei osaa laskea relatiivisia fonttikokoja. Laittaa ne melkein ihan miten sattuu.

    Ainut keino saada selaimelle toimivat fonttikoot olisi pikselimääritetyt koot.
     
    Viimeksi muokattu: 14.09.2019 klo 21:01
  28. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Ihan omana subjektiivisena kokemuksena välilehdistä on se, että välilehden LISÄT käyttö on kapealla näytöllä mobiilissa paljon miellyttävämpää kuin tietokoneversion kapea näyttö, jossa välilehtiä ei ole. Pitää nuolella siirtyä sivun loppuun, että näkee foorumin listaukset. Ihan subjektiivisena kokemuksena sivukohtainen linkkilistaus toimii varsin paljon kivemmin kuin rullaaminen linkkien luokse tai meneminen sinne nuolilla. Kummassakin tapauksessa ikävä piirre on se, että pitää keskeyttää kommentin lukeminen ja pitää palata samaan paikkaan takaisin. Ainakin omasta mielestäni kapea mobiiliversio on kivempi kuin kapea tietokoneversio.

    Juuri tämä on välilehtien idea. Jos haluat jotain tarkistaa, sinun ei tarvitse keskeyttää tilannetta, jossa olet. Kaikki tarpeettomat keskeytykset ovat *piip* ärsyttäviä. Hyvin suunnitellulla pikanavigoinnilla niistä pääsee eroon.

    Joissakin tapauksissa keskeytystä voi välttää myös uusien välilehtien avaamisella. Ainakin kännykässä välilehtien käyttö on hankalaa, eikä linkkejä mielellään avaa uuteen välilehteen. Pikanavigoinnit sisäiset välilehdet vähentävät uusien välilehtien avaamisen tarvetta ihan yleisestikin.

    Jos olet kohdassa, jossa ei ole mitään linkkiä, keskeytykseltä ei ilman paikalla olevaa pikanavigointia voi välttyä. Selaimissa ei ole yleisesti ole ominaisuutta "tuplaa sivu", jonka saisi painamalla tyhjää tilaa pidempään tai hiiren oikealla klikillä. Huomaa, että kirjanmerkkinä olevan sivun avaaminen toiseen välilehteen tai osoiterivillä olevan sivun kopioiminen toiseen välilehteen on keskeytys sekin.
     
    Viimeksi muokattu: 15.09.2019 klo 11:02
  29. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Mottoani voisi parantaa:

    ____________

    Laitoin MT3:een twiitin, voisiko se muuttaa oikean yläkulman valikon aina käytettäväksi pikanavigoinniksi tyyliin, jonka olen täällä esittänyt.
     
    Viimeksi muokattu: 15.09.2019 klo 18:34
  30. Nightuser

    Nightuser

    Viestejä:
    1 472
    Rekisteröitynyt:
    30.10.2016
    Eivät varmaan reagoi tuohon pyyntöön mitenkään. Aika paksu noillakin tuo palkki on että vähän kyllä häiritsisi jos se olisi siinä aina sivua scrollatessa. Toki siitä saisi vähän ohuemman niin ehkä voisi toimia.
     
  31. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Heidänpähän on asiansa. Laitoin saman myös palautelomakkeella. Lisäsin siihen toisen Twitter-viestin.
    Kuvakaappaus löytyy Aihe: XenForon pikanavigoinnin ja tämän sivuston toimintavalikon vertailu | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa
     
  32. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Koin niin *piip* ärsyttäväksi oman sivustoni toimintovalikon käytön kapealla näytöllä, että laitoin siihen kaksi välilehteä. Ei tarvitse siirtyä sivun alalaitaan kun haluaa vain katsoa, mitä aiheita on viimeksi käsitelty. On se vaan *piip* ärsyttävää, jos listaa viimeisistä aiheista ja vastauksista pitää hakea sivun lopusta tai peräti joltakin toiselta sivulta.
     
  33. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    En ehdottanut sitä, vaan sitä, että valikkopainike jäisi pysyvästi oikeaan yläkulmaan. Mitä sisältöä avautuvaan valikkoon laittaisi, en osannut ehdottaa. Sisältö riippuu sivuston käyttötarkoituksesta ja valitusta alustasta.
     
    Viimeksi muokattu: 15.09.2019 klo 18:50
  34. Nightuser

    Nightuser

    Viestejä:
    1 472
    Rekisteröitynyt:
    30.10.2016
    Niin. En tiedä vaan onko tuo toteutettu tällä hetkellä niin että tuo koko palkki on osana tuota valikkoa että se sitten seuraisi perässä jokatapauksessa.

    Tämä siis tuli vaan mieleen että olisiko niin. En tiedä yhtään miten tuo on nyt toteutettu.
     
  35. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Vain se X sivun yläreunassa liittyy MTV 3 -uutissivustolla avautuvaan valikkoon. X + sen alapuolella olevat linkit ovat valikkoa. Valikko ei avaudu aivan sivun ylälaitaan vaan sulkemispainikkeen vievän tilan verran alemmaksi. Muistutan sitä ottamassani kuvakaappauksessa. Kuvakaappaus antaa väärän vaikutelman siitä, mikä kuuluu valikkoon.

    Tein raa'an vertailun oman sivustoni, XenForo-sivuston pikanavigoinnin (tämä sivusto) ja MTV3:n yläreunan valikon toimivuudesta nimen omaisesti pikanavigointina:
    Aihe: XenForon pikanavigoinnin ja tämän sivuston toimintavalikon vertailu | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa
     
    Viimeksi muokattu: 15.09.2019 klo 19:42
  36. Nightuser

    Nightuser

    Viestejä:
    1 472
    Rekisteröitynyt:
    30.10.2016
    Aika helvetin sekava tulisi tuosta mtv uutissivustosta jos se pikavalikko kattaisi kaikki kohdat mitä sinä haluaisit sen kattavan. Nythän siellä on ne tärkeimmät mitkä on hyvä olla. Ja noin tuokin näyttäisi olevan täysin riittävä.

    Toki scrollatessahan tuota ei saa auki että joku pysyvä pieni valikon aukaisija tuolla ylhäällä voisi olla.
     
  37. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Viimeksimainitun voisivat tehdä.

    Mutta olen kyllä osoittanut, että kaikki luettelemani asiat voi laittaa pikavalikkoon. Mielestäni pikavalikkoni ei ole *piip* sekava.

    Että kaikki saa pikavalikkoon, edellyttää välilehtien käyttöä.

    ________________

    PS. Testisivusto ei aina auta. Laitoin testisivustollani testaamani CSS:n varsinaiselle sivustolle. Tietokoneversio ei ole identtinen vaikka sen nyt pitäisi olla. Live-sivustolle tuli virheitä, joita testisivustolla ei ole.

    Näemmä johtui siitä, että minulla on auto-optimize -lisäosa. Se pakkaa CSS:ää. Tekee sen hieman väärin. CSS:n pakkaus oli otettava pois käytöstä. No pakkaan itse suurimman osan määrittämästäni CSS:stä.

    Voihan olla, että CSS:ssä on jotain virhettä, joka Autoptimizen kanssa tekee ongelmia.
     
    Viimeksi muokattu: 15.09.2019 klo 22:53
  38. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Ei sen suunnittelu on mitään rakettitiedettä ainakaan foorumisivuston suhteen:
    1. Vasemmanpuoleiseen välilehteen XenForon vasemmanpuoleiset linkit lisäten siihen yksi tai kaksi linkkiä, että yleislinkit ovat kattavia. Lisäksi joku tilannekohtainen linkki olisi paikallaan.
    2. Pääryhmittely keskimmäiseen - aika lailla sitä, mitä XenForossa on oikea puoli.
    3. Oikeanpuolimmaiseen välilehteen tilannekohtaiset apulistat.
    Sitten vaan määritellään järkevät dimensiot ja painike jäämään oikeaan kulmaan. Näin tälläkin sivustolla olisi ihan oikeasti pikanavigointi eikä kaksi turhakepainiketta.
     
    Viimeksi muokattu: 16.09.2019 klo 15:11
  39. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Kokeilin testisivustolla osittaista pikanavia tietokoneella leveällä näytöllä. Kaksi välilehteä. Ideana tuossa on se, että sivupalkki jää pitkällä sivulla kauaksi ja sitä pitäisi käydä katsomassa. Kun se on välilehdessä, sitä ei tarvitse käydä erikseen katsomassa.

    Aihe: XenForon pikanavigoinnin ja tämän sivuston toimintavalikon vertailu | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa

    Sivusuunnittelu on minun mielestäni yleisesti siinä, että kaikkea pitää hakea sieltä sun täältä ja vielä tuolta. Asioiden löytymiseen helpolla, nopeasti ja ilman tarpeetonta hakemista ei panosteta juuri mitenkään.

    Myönnän, että minun lähestymistavassa ongelmana on saada ihmiset huomaamaan valikkosetit. Ongelmana on myös nimetä kaikki järkevästi, että niiden käyttötarkoitus tulisi ymmärrettyä.

    Mutta mitään kehitystä ei voi saada aikaan, jos ei aidosti kokeile jotain ihan uutta.
     
    Viimeksi muokattu: 16.09.2019 klo 22:35
  40. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Ainakin MTV 3 luki Twitter-viestini
    Tuo uskoakseni on ihan vakiovastaus, joten tuo on vain lukemisilmoitus eikä siitä voi tehdä mitään päätelmiä, miten asiaan on oikeasti suhtauduttu.
     
    Viimeksi muokattu: 16.09.2019 klo 22:36
  41. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Muutin tietokoneversion leveänkin näytön live-versiossa kaksivälilehtiseksi, jotta eri leveydet olisivat yhtenevämpiä. Siirtyminen kapeammasta leveämpään näyttöön ei toiminut kunnolla. Siinä tuli outoja, hämmentäviä tilanteita.

    Kun tilaa tuli enemmän, lisäsin suoraan näkyviä linkkejä. Vain muutama sivu tarvitsee enää Lisää toimintoja/sivuja klikkaamisen. Alla kirjautuneen henkilön saamat linkit:

    https://www.sanaristikkofoorumi.net/test/wp-content/uploads/lisavalikot-1.png

    Vähän uudempi versio ei-kirjautuneelle henkilölle:

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

    Toiminnan täytyy olla johdonmukaista. Pitäisikö käyttää click vai mouseover avaamiseen, on asia, joka on pohdinnan alla.

    Toinen asia, mitä pohdin on missä listata sivukohtaiset linkit ja mahdollinen foorumin/säikeen informaation. Otin tietokoneversiosta testisivuston tapaan pois sivukohtaiset linkkilistat sivupalkista. Jätin sivupalkkiin foorumin/aiheen tiedot. Ne eivät ole avautuvassa valikossa.
     
    Viimeksi muokattu: 17.09.2019 klo 21:42
  42. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Suomi24:ssä tuotiin esille, että ratkaisu on mainosrahoitteisille sivuille huono.

    Jos mainosmielessä ajatellaan, ratkaisuni on mobiililaite pystysuunnassa käytettynä huono. Kun ei ole isoa header-osaa eikä suurimmassa osassa sivuja ole lainkaan footer-osaa, ainoa paikka mainoksille on kommenttien väliin. Mainokset kommenttien välissä olisivat äärimmäisen ärsyttäviä.

    Tosin Twitterissä ne eivät hirveästi ole häirinneet. On vähän vaikea kuvitella, miten vaikka se, että joka kuudes viesti olisi mainos, tuntuisi käyttäjästä.

    Itse asiassa vaakanäytöllä tilanne olisi mainostuksen suhteen erinomainen sivupalkissa. Siinä lähes koko sivupalkki olisi käytettävissä mainoksille.

    Mutta kun kännykän pystynäytössä ei ole järkevää paikkaa mainoksille nyt ollenkaan, ei hyvä mainostamista ajatellen.

    Kun tiedon etsimisen kannalta footeria ei tarvita, pelkästään mainosfooter ei oikein toimi. Jos et mitään hyödyllistä löydä footer-osasta, ei sinne pelkkien mainosten takia kannata mennä.

    ______________

    Tämän sivuston rakenteesta. Kun sivupalkki menee tietokoneessa kapella näytöllä loppuun, ainakaan minulla sitä ei tule usein katsottua. Ehkä mobiililla tulisi katsottua enemmän.

    Minulla tämän sivuston oikeanpuoleista ja kapealla näytöllä alas menevää sisältöaluetta vastaa minulla pikanavigaatiossa kolmas välilehti.

    En tiedä muista, mutta minut tulisi mieluummin katsottua em. sisältöalueen sisältö kiinteästä pikanavigaatiosta kuin sivun lopusta. Tämä nyt on vain oma mielipiteeni.

    Minä koen asian niin, että mitä pidemmäksi sivu menee, sitä vähemmän lopussa olevaa tietoa tulee luettua. Mutta en tiedä, tulisiko sama tieto useammin luettua pikanavigoinnin välilehdestäkään. Vaati kaksi klikkiä - avaa valikko ja siirry välilehteen.
     
    Viimeksi muokattu: 18.09.2019 klo 16:09
  43. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Kun nyt mietin tämän sivuston kaltaista perinteisesti suunniteltua sivustoa sen *piip piip* ärsyttävä seikka on ihan järjetön siirtymistarve kännykällä.

    Jos avaan tietyn säikeen ja haluan katsoa, mitkä ovat yleisimmät muuta aiheet, on *piip* ärstyttävän hankalaa käydä listaus katsomassa tai avata vaivalloisesti uusi välilehti ja palata takaisin samaan välilehteen - se on * piip piip * ärsyttävää.

    Kun seuraa tiettyä aihetta, on ihan totaalisen mahdoton millään järkevällä tavalla ja miellyttävällä tavalla kännykällä katsoa, mitkä ovat seuratuimmat aiheet. Ainut miellyttävä tapa olisi avata lisäikkuna.

    Jos halutaan, että sivusto oikeasti on näppärä käyttää kännykällä pystytasossa, sivujen pitäisi toimia kolmessa suunnassa.

    Näppärintä olisi avata vasemmalle toimintovalikko ja oikealle listaukset, esim. listaus ajankohtaisimmista kysymyksistä, uutisista. Vaatisi ikään kuin karusellinuolet. Ongelma on siinä, että kännykällä ei voi opastaa, mikä olisi sivunuolien tarkoitus, koska :hover ei toimi.

    Yritin luoda tämäntyyppisen ratkaisun, mutta en saanut toimimaan. Todennäköinen syy on siinä, että JavaScript-koodaukseen liittyy elementeissä kaksi samaa id-arvoa. Pitäisi koodata niin, että id:n sijasta on luokat, joihin JavaScript liittyy.

    Kolmas suunta on avata tärkeä informaatio apuikkunaan eli ylöspäin.

    Perinteinen suunnittelu ansaitsee minusta korkeintaan arvosanan 6 1/2-7. Sen korkeampaa arvosanaa en tästä sivustosta voi antaa.

    Mainostus pitäisi olla sekä pääaluen lopussa että sivusuunnassa olevien ikkunoiden lopussa.

    Yhteen suuntaan toimiva kännykkäsivusto on kyllä minusta perin antiikkinen. Tiedän kyllä, että jotkut vastustavat häiritseviä sivunuolia. Heillä ihan järjetön edestakainen liike on miellyttävämpi vaihtoehto. Ja heidän ehdoillaanhan sivut tehdään.
     
    Viimeksi muokattu: 19.09.2019 klo 17:24
  44. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    No ainakin Suomi24:ssä tietokoneversio on uudistunut. Anna näistä kehuja:

    Suomi24:
    1. valikko on esillä ja Nightuser esityksen mukaan klikattava. Eli tässä suhteessa ainakin Nightuser mielestä omaani parempi
    2. ydintoiminnot yläpalkissa - ei tarvitse hakea niitä mistään
    3. uuden kommentin luonti tulee kivasti kuvioihin mukaan. (XenForo ja oma foorumini ei kaipaa tätä, koska niissä ei ole mahdollisuutta vastata yksittäiseen kommenttiin, vaan riittää vastauspainike yksittäisen kommentin yhteydessä.)
    Seuraavista annoin risuja:
    1. Jos olisi vielä nuolet ylös/alas olisi vielä kivempi. Huomattavasti helppokäyttöisempi kuin tämä foorumi.
    2. Hiivatin ärsyttävää kyllä, kun kun tulee kirjautuneillekin kuva-arvoitukset.
    3. Murupolku saisi olla myös sivun alareunassa.
     
  45. Tapio X

    Tapio X

    Viestejä:
    303
    Rekisteröitynyt:
    27.03.2018
    Uudessa kokeiluversiossa on siis JavaScript-käsittelyongelma.

    Tämän rakenteiset funktiot:

    Koodi:
    function open1() {
    var y = document.getElementById("tab-b");
    if (y.style.display === "block") {y.style.display = "none";}
    var z = document.getElementById("tab-c");
    if (z.style.display === "block") {z.style.display = "none";}
    var x = document.getElementById("tab-a");
    if (x.style.display === "none") {x.style.display = "block";}} 
    +
    Koodi:
     onclick=" open1();return false;" 
    pitäisi muuttaa tämän tapaiksiksi:

    Koodi:
    jQuery(document).ready(function($){
    
    $('.side-opener-left').click(function() {
    var x = document.getElementById("tabA");
    if (x.style.display === "none") 
    {
       x.style.display = "block";
    }
    else{
       x.style.display = "none";
    }
    var y = document.getElementById("tabC");
    if (y.style.display === "block") 
    {
       y.style.display = "none";
    }
    })
    mutta niin, että haetaan getElementByClassName

    tämä on vähän mutkikkaampaan, koska W3C:n esimerkeissä mukana on indeksit

    Koodi:
    document.getElementsByClassName("example")[0];
    list.getElementsByClassName("child")[0].innerHTML = "Milk";
    jQuery esimerkeissä tuli "each" johonkin väliin (en nyt löydä esimerkkiä)

    Jotain siis:

    Koodi:
    $('.side-opener-left').each.click(function() {
    En nyt oikein tiedä, miten muuttaisin avaus/sulkufunktiot id:n sijaan class & JQuery hyödyntäviksi.
     
  46. Xiyng

    Xiyng

    Viestejä:
    1 090
    Rekisteröitynyt:
    19.10.2016
    @Tapio X: Oletko sattunut harkitsemaan, että opettelisit ohjelmoinnin ihan kunnolla? Nähtävästi näiden juttujen kanssa tulee kuitenkin säädettyä mutta ohjelmointitaidossa vaikuttaa olevan aukkoja. Saattaisi siis olla mielekästä panostaa perusteiden rautaiseen hallintaan. Se ei lopulta ole mitenkään mielettömän vaikeaa vaikka työtä varmasti vaatiikin.

    jQueryn each on funktio, joten ei sitä näin voi käyttää. Lisäksi se on luullakseni tuossa yhteydessä turha ja homma luultavasti toimii, jos ottaa välistä eachin pois. Helpoiten testaaminen käy varmaan näin:
    Koodi:
    $('KLIKATTAVIEN ELEMENTTIEN CSS-VALITSIN').click(function() {console.log("klikkaus!"); });
    Jos konsoliin tulostuu teksti, tämä menetelmä toimii ja konsoliin tulostamisen voi korvata halutulla toiminnallisuudella. Ilmeisesti haluttu toiminnallisuus on jotain tämäntapaista:
    Koodi:
    $('.luokanNimi').each(function() {
        var element = this;
        // element-muuttujalla voi nyt tehdä mitä haluaa
    });