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

Toivoin vähän enemmän ja vähän avoimempaa kehittelyasennetta ihan yleisellä tasolla.
Dude, 13 14 sivun verran auttamista ja silti sivustosi on sellaisessa kunnossa missä on! Missähän sitä avoimuutta olisi tarvittu?

Jos sinä rakastat pompottelua, pompottele minun puolestani niin paljon kuin sielu sietää. Mutta älä ota sitä asennetta, että kaikkien netin käyttäjien pitäisi laillasi jähmettyä paikoilleen.
Jos sinä haluat "90-luvun netin" takaisin, niin älä ota sitä asennetta, että kaikkien pitäisi haluta se takaisin.
 
@Tender juuri näin.

Maailma on muuttunut ja sitä myötä päätelaitteiden suorituskyky + resoluutiot.

Nyt ei kukaan täyspäinen enää laske pikseleitä, vaan hoidetaan hyvä teema ja laitetaan sinne mielenkiintoista sisältöä ja css-koodia pitää ja voi muokata sen päälle. Ei rampauttaa peruskoodia ikinä.

Hyvään teemaan tulee automaattisesti päivityksiä, jotka pitävät huolen tietoturvasta sekä siitä, että toimivat kaikissa laitteissa.

Jos joutuu maksamaan 50€ siitä että ei itse tarvitse sekoilla ja joku voisi kiinnostua, ei ole iso raha.
 
Nyt ei kukaan täyspäinen enää laske pikseleitä
Lähtökohtaisesti valitsemassani teemassa oli hirveästi erilaisia pikselimäärittelyjä raja-arvoja. Poistin jonkin verran määriteltyjä pikselirajoja, mutta loin myös uusia. Joo, ihan hirveä viritelmä valitsemani teema oli ihan alusta lähtien. Kun siin oli älytön määrä raja-arvoja, olihan melkoinen sekasotku jo ihan alun alkaenkin ja minä sotkin sitä soppaa lisää. Ei ollut mikään yllätys, että vastaan tuli sitä sun tätä ongelmaa.

Tekemäni mobiiliversio on rakenteellisesti huomattavasti yksinkertaisempi kuin työpöytäversio. Siinä on vain kolme rajapistettä. Kyllä sen pohjalta teeman saisi korjattuakin kun vaan saisi sekä mobiilissa että työpöytäversiossa toimivan valikon.

Foorumissa on sitten oma CSS, joka tulee sovittaa teemaan. Siinä on työtä joka tapauksessa. En nyt tiedä olisiko teeman vaihto vähempitöinen vaihtoehto, koska olen käyttämässäni teemassa sovittanut foorumiosan teemaan. Tämä työ olisi edessä uuden teeman kanssa.Tosin uudemmalla teemalla päivityksiä tulisi usein.
 
Viimeksi muokattu:
Toimintavalikkoa kun klikkaa ja yrittää siirtää hiirtä sinne suoraan, niin valikko häviää kun tuhka tuuleen. Jos taas siirron tekee headerin kautta heti oikealle ja alas siirtäen niin homma toimii. En kyllä hiffaa miksi tuollainen erikseen painettava valikko pitäisi olla muutenkaan?

Käytössä Chrome + Windows 10.
 
Kokeilin äsken sen jälkeen kun kirjauduin ulos. Asemointi on vähän pielessä, mutta kun hearissa klikkaa linkkiä ja siirtyy alaspäin, siihen pääsee ongelmitta. Ei hävinnyt minulla tässä vaiheessa. En pysty todentamaan ongelmaa. Joskus ongelma oli olemassa. Voi olla, että jonnekin on puskuroitunut väärää CSS:ää.

Muutin asemoinnin kuntoon ei-kirjautuneille käyttäjille deskop 783+ kohdalla.

Asemointiongelmia syntyy, kun WordPress lisää kirjautuneelle käyttäjälle CSS:ää ja JS:ää. Minulla on aina ollut ongelmia tämän asian suhteen.

Tuossa kokonaisuudessa olisi parantamista, mutta en ole saanut aikaiseksi.

Työpöytäversiossa sulkeutumisen pitäisi tapahtua vasta kun siirtyy pois sen päältä. Ideana on, että kun siityy sisältöön, sitä ei tarvitse erikseen sulkea.

Siinä on kaikki varsinaiseen asiasisältöön kuulumattomat sivut. Poistin kaikki sellaiset sivut pois päävalikosta. Ei tarvitse etsiä sekundaarisluonteisia sivuja kuin yhdestä paikkaa. Lisäksi siellä on tiettyjä toimintoja. Jos sitä ei olisi, samat asiat tulisi helposti ripoteltua sinne sun tänne. En tykkää sinne tänne asioiden ripottelusta, joten pyrin sitä itsekin välttämään.

Väänsin vähän rautalankaa ja lisäsin desktop 783+ näyttöön tekstin:
Muut asiat löytyvät TOIMINTOVALIKKO & AIHEVALIKKO yhteydestä
Laitoin valikkojen nimet myös linkeiksi (en kuitenkaan ihan heti vaan 11.4.2020, jolloin muutin hieman tekstin sanamuotoa).

Sivupalkissa ei ole mitään tarpeetonta. Kaikki loput asiat todella löytyvät noista kahdesta valikosta (osan sivupalkkiin jätetyistäkin asioista voisi siirtää em. valikoiden alaisuuteen). Yleensä suurin osa olennaisista sivuun liittyvistä asioista rullautuu sivun mukana, mutta ei minulla. Olennaiset yleensä sivun alussa, lopussa tai sivupalkissa näytettävät asiat löytyvät noiden kahden valikon takaa. Ei niitä tarvitse muualta etsiä. Ei ole tarpeen juurikaan rullailla ja pomppia.

Ajatuksena olisi joskus laittaa yhteinen 783+ -näyttö, jossa olisi päällekäin n. 220px levyisessä tilassa:

HAKU
PÄÄVALIKKO
AIHEVALIKKO
TOIMINTOVALIKKO

Noiden lisäksi olisi joitakin asioita sivupalkissa, mutta vain muutama. Lopputulos olisi vähän tekninen, mutta sitten lähes kaikki siirtymät olisi minimoitu.

Ei olisi erikseen mobiili- ja desktop-versioita. Ensisijaisen muuntautumispisteet olisivat olisi tarkoitus vähentää arvoihin 783+ ja 482-782px ja alle 481. Noita tarvitaan, sillä myös bbPress sisältää kääntöpisteitä, joita ei kannata yrittää poistaa. Listaukset eivät toimi, jos CSS:ää karsii liikaa.

Leveä desktop-näyttö saattaisi näyttää vähän hassulta kun keskellä on sisältö ja toiminnot löytyisivät yhdestä keskitetystä paikasta. Jos paikka on keskeinen, ei toimintojen löytymisessä pitäisi olla ongelmaa.
 
Viimeksi muokattu:
Tietokoneella alle 783 näytöllä laitoin sivun lopussa näkymään linkit pää- ja apuvalikoihin. Nyt ei tarvitse vaivautua edes siirtämään hiirtä sivun yläosaan.

Tosin huomasin toiminto-ongelman. Valikko ei jää sivun yläreunaan. Lisäksi on pieni CSS-ongelma. En jaksa selvittää ongelmien syitä. Koko valikkosysteemi pitäisi rakentaa uusiksi, mutta en nyt jaksa.

Mobiilissa olisi vaivatonta, jos kaikki toiminnot olisivat alalaidassa joko eleen tai 1-5 painikkeen takana - ne saisi vaivattomasti peukalolla käyttöönä yhdellä kädellä kännykkää pidellen. Minä olen äärimmäisen laiska kännykän käyttäjä - mitä lähempänä kaikki olisi tavoitettavissa, sitä parempi. Mutta minkäs teet, kun ihmiset eivät tajua, että kaikki voisi oikeasti olla ihan toisin!

Vaivattomuus on se, mitä arvostan kaikkein eniten. Sitä puuttuu ihan hirveästi www-sivuilta.
 

Liitteet

  • 2020-04-11 15.24.04 www.sanaristikkofoorumi.net 15f6c98f623c.png
    2020-04-11 15.24.04 www.sanaristikkofoorumi.net 15f6c98f623c.png
    17,7 KB · Luettu: 80
Viimeksi muokattu:
Poistin tarpeettomana Twitter-sovelluksen ja käytän nettisivuja. Twitteriä voi verrata foorumiin.
Ainoa foorumiin verrattava sivusto, jossa on kunnon käyttöliittymä. Arvostan yli kaiken.
Netissä on siis vain yksi tämänkaltainen sivusto, josta pidän.

XenForosta tulkin pidän milloinkaan.

Kun joku ei pidä Twitterin nettisivuista, hän pitää niitä vuorostaan huonona.
Kaikkia ei voi miellyttää muuten kuin laittamalla todella paljo käyttäjäasetuksia.
Mutta osataanko niitäkään käyttää, on toinen juttu. Pitäisi olla sopivina paketteina.
 
No en mennyt Twitter-tyylin. Muutin tietokoneversion mobiilityyliseksi. Poistin kaiken erityisesti tietokoneelle tarkoitetut CSS:n ja kaiken muunkin erillisen koodin. Poistin mm. pudotusvalikon käytöstä. Google-haku vaati hieman omaa CSS:ää mobiilille ja tietokoneelle, mutta sitä on todella vähän. Tietyillä mobiililaitteilla Chromen kanssa fonttikoko-ongelmia. Yritin korjata asiaa, mutten onnistunut.

Oletuksena on esillä asiasisällön ohella kapealla näytöllä minimalistinen näkymä.

  1. YKSI kiinteästi asemoitu painike valikoille - ei pitäisi ketään haitata; sen takaa löytyy kaikki tarvittava, mm. haku ja kirjautuminen
  2. Tärkeimmät sivut esillä olevassa valikossa sivun alussa (rullautuu)
  3. Leivänmurut (rullautuu).

Yli 782px on 140x96px kiinteä elementti, mutta sille on tilaa. Isolla näytöllä on paljon valkoista tilaa, mutta optimoin CSS:n mobiililaitteille. En jaksa enää ylläpitää kovin monia versioita. Jos katsoo sekä mobiililaitteella että tietokoneella, sivut näyttävät samoilta. Siinä suoraan esillä on kaksi toimintoa suoraan esillä:
  • Haku
  • Kirjautuminen
Layoutin päämäärä on yksikertaisuus. Siinä ei toiminnallista footeria eikä toiminnallista sivupalkkia.
Sivun alkuun tai loppuun siirtymisiä ei koskaan tarvita toimintojen käyttämiseksi, mutta kylläkin 1-3 napautusta, jotta pääseen halutuille toiminnoille. Päävalikosta pääsee sivutasoja taaksepäin ja tärkeimmä sivut löytyvät päävalikosta, joten kohtien 2 ja 3 takia ei tarvitse siirtyä sivun alkuun.
 
Viimeksi muokattu:
Poistin tarpeettomana Twitter-sovelluksen ja käytän nettisivuja. Twitteriä voi verrata foorumiin.
Ainoa foorumiin verrattava sivusto, jossa on kunnon käyttöliittymä. Arvostan yli kaiken.
Netissä on siis vain yksi tämänkaltainen sivusto, josta pidän.

XenForosta tulkin pidän milloinkaan.

Kun joku ei pidä Twitterin nettisivuista, hän pitää niitä vuorostaan huonona.
Kaikkia ei voi miellyttää muuten kuin laittamalla todella paljo käyttäjäasetuksia.
Mutta osataanko niitäkään käyttää, on toinen juttu. Pitäisi olla sopivina paketteina.
Twitter on nääennäisessä yksinkertaisuudessaan käyttökelvottomin ja epäloogisin kötöstys mitä Internet tai some on ylipäätään maailmalle tuottanut. Foorumikeskustelun kanssa sillä ei ole mitään tekemistä, eikä oikeastaan ylipäätään keskustelun kanssa, kun se on sellaista sekavaa poikasta toiseen pomppimista ja huutelua. Siitä ei välttämättä kannata ottaa mallia mihinkään, vaikka se jostain kumman syystä suosittu onkin.
 
Tämän sivuston tietokoneversio on järkeistynyt. On kiinteästi ylälaitaan jäävä toimintopalkki. Hienoa, että suuresta osasta turhasta poukkoilusta ylös ja ala on täälläkin vihdosta viimein päästy eroon.

Itse asiassa toteutus on sellainen, jollaista ole kaivannut. Itsekin ajattelin saman tapaista, mutta en saa toimimaan kuten täällä. Siksi tyydyn vähän enemmän näpäytyksiä vaativaan systeemiin.

Saman tapaiseen on päätynyt myös Suomi24.

Mitens mobiili? Onko siellä ylös jäävä palkki. Jos on niin saattaisi tykätä. Jos ei, en viitisi mobiiliversiota käyttää.
 
Viimeksi muokattu:
Tämän sivuston tietokoneversio on järkeistynyt. On kiinteästi ylälaitaan jäävä toimintopalkki. Hienoa, että suuresta osasta turhasta poukkoilusta ylös ja ala on täälläkin vihdosta viimein päästy eroon.

Itse asiassa toteutus on sellainen, jollaista ole kaivannut. Itsekin ajattelin saman tapaista, mutta en saa toimimaan kuten täällä. Siksi tyydyn vähän enemmän näpäytyksiä vaativaan systeemiin.

Saman tapaiseen on päätynyt myös Suomi24.

Mitens mobiili? Onko siellä ylös jäävä palkki. Jos on niin saattaisi tykätä. Jos ei, en viitisi mobiiliversiota käyttää.
Kiinteäpalkki täällä on laitettu niin että sen saa halutessaan sivustoasetuksista pois. Itsellä niin koska en halua mitään turhia palkkeja kokoajan näkyviin.
 
Näemmä mobiilissakin toimii. UPEAA!!! Ainoa huomautuksen aihe minulla on se, että leveällä näytöllä puuttuu yläpalkista hakupainike. Jonkun olisi voinut siirtää alavalikkoon, jotta haun olisi saanut kiinteäksi. Pidän huomattavasti enemmän foorumin käytöstä mobiilissa laite pystysuunnassa. Pystysuuntainen mobiiliversion on hyvä. Kerrankin totetuttu foorumi sellaina, josta voi aidosti pitää.

Leveän näytön puutteesta huolimatta tämä on toistaiseksi paras foorumisovellus. On omaa systeemiäni kieltämättä parempi.


Voi kun osaisin saada itse saman, mutta bbPress ongelma on se, että se ei ole itsenäinen foorumi, vaan WordPressin lisäosa. Jotta se toimisi optimaalisesti, WP:llä pitäisi olla varta vasten bbPressiä varten luotu teema. Nyt on hirveästi sovittamista eikä lopputulosta millään saa haluamakseen. En siis pysty millään saamaan bbPressiä tämän tasoiseksi.

Voisin toki yrittää itse luoda tämän sivuston kaltaisen toimintopalkin. Näin klikkauksia olisi vähemmän, kun kaikki toiminnot eivät olisi välilehdissä.

Minä vaan inhoan syvästi sivustoja, joilta puuttuu kiinteä toimintopalkki tai valikkopainike. Tiedän, että jotkut mieluummin hyppivät ja pomppivat tai rullaavat hirvittävästi, kun kapea palkki käy niin hirveästi silmään.
 
Viimeksi muokattu:
Näemmä mobiilissakin toimii. UPEAA!!! Ainoa huomautuksen aihe minulla on se, että leveällä näytöllä puuttuu yläpalkista hakupainike. Jonkun olisi voinut siirtää alavalikkoon, jotta haun olisi saanut kiinteäksi. Pidän huomattavasti enemmän foorumin käytöstä mobiilissa laite pystysuunnassa. Pystysuuntainen mobiiliversion on hyvä. Kerrankin totetuttu foorumi sellaina, josta voi aidosti pitää.

Leveän näytön puutteesta huolimatta tämä on toistaiseksi paras foorumisovellus. On omaa systeemiäni kieltämättä parempi.


Voi kun osaisin saada itse saman, mutta bbPress ongelma on se, että se ei ole itsenäinen foorumi, vaan WordPressin lisäosa. Jotta se toimisi optimaalisesti, WP:llä pitäisi olla varta vasten bbPressiä varten luotu teema. Nyt on hirveästi sovittamista eikä lopputulosta millään saa haluamakseen. En siis pysty millään saamaan bbPressiä tämän tasoiseksi.

Voisin toki yrittää itse luoda tämän sivuston kaltaisen toimintopalkin. Näin klikkauksia olisi vähemmän, kun kaikki toiminnot eivät olisi välilehdissä.

Minä vaan inhoan syvästi sivustoja, joilta puuttuu kiinteä toimintopalkki tai valikkopainike. Tiedän, että jotkut mieluummin hyppivät ja pomppivat tai rullaavat hirvittävästi, kun kapea palkki käy niin hirveästi silmään.
Kyllä se haku siellä on, myös what's new -nappula, mutta jostain syystä piilotettu deskarissa tässä teemassa.
Screenshot 2021-04-20 202130.png
 
Minulla ei kyllä näy hälytyskellon jälkeen salamaa eikä hakupainiketta todella leveällä näytöllä.
Tulee esille n. 900px leveällä näytöllä. Outoa, sillä tuota leveämmällä näytöllä tilaa hakupainikkeelle kyllä olisi. Ei minusta aivan loppuun asti optimoitu palkki.

Oma sivustoni on ollut ei-kirjautuneille jonkin aikaa käyttämätön. Asensin huonon cache-lisäosan. Kun otin se pois käytöstä, sivusto pelasi.

Muutin leveän näytön kapean näytön kaltaiseksi. Sivuston ulkoasu ei hirveästi muutu orientaation tai leveyden vaihtuessa. Vain välttämättömät ikkuna- ja laitekohtaiset muutokset, mutta ne ovat lähinnä detaljeja. Testasin toista teemaa. Se olisi lähtökohtaisesti parempi, mutta muutosta olisi ihan mielettömästi, että foorumin saa kunnolla integroitua leiskaan. Kukaan ei ole tehtyt bbPresille varta vasten suunniteltua leiskaa, miksi vaihto on todella työläs.
 
Viimeksi muokattu:
Ei se näykään. Itse tuossa puukotin näkyviin. Deskarissa se sivun yläosan hakupalkin voisi poistaa ja nuo näyttää myös siinä. Vaihtoehtoisesti voisi näyttää, kun tuo palkki muuttuu stickyksi. Joka tapauksessa deskarissa enemmän tilaa, niin en tajua miksi otettu pois.
 
Ei se näykään. Itse tuossa puukotin näkyviin. Deskarissa se sivun yläosan hakupalkin voisi poistaa ja nuo näyttää myös siinä. Vaihtoehtoisesti voisi näyttää, kun tuo palkki muuttuu stickyksi. Joka tapauksessa deskarissa enemmän tilaa, niin en tajua miksi otettu pois.

Joo. Tuo palkki on varsin hyvä, mutta siinä on kehitettävää. Minusta haku voisi olla samalla lailla kaikissa versioissa kuten se on HD-tabletin pystynäytölla. Minusta palkissa on suunnittelumokia, mutta mokista huolimatta se on varsin hyvä. Suomi24:n kiinteässä palkissa haku on aina käytettävissä. Asia on korjattavissa. Toivottavasti mokat korjataan.
 
@Tapio X

Sun sivu näyttää mun näytöllä aika oudolta?

Ei oikein skaalaudu 3440x1440 näytölle.

tapiox.PNG
Korjasin katkeavan palkin. Olin unohtanut jonnekin leveysmäärityksen, jonka poistin.

En jaksa enää ylläpitää erilaisia versioita. Näyttöporttikohtainen CSS on nyt minimoitu. Se koskee vain leveysarvoja, marginaaleja, fonttikokoja sekä tekstin "VALIKOT" näkyvyyttä. Mikään muu ei enää muutu.

Tekstialueen leveys on nyt n. 750px. Jos tuo tuntuu liian pieneltä isoille näytöille, leveysarvoja voi ehdottaa.

Minulla oli rikki toimivuus kokonaan, kun olin asentanut yhden cache-lisäosan. Sivusto ei toiminut, jos ei ollut kirjautunut. Kun poistin lisäosan alkoi toimi taas. Oli jonkin aikaa toimimaton, kun en tajunnut testata sivustoa kirjautumattomana lisäosan kanssa. Outo tapaus.
 
Viimeksi muokattu:
Sivuston tunnuskuvat itseltä puuttuvat, mutta kannattaako niitä yrittää ympätä? Pienellä rakentelulla ne voisi ehkä yrittää luoda siirtämällä yksi sisältöalue, joka ei nyt ole käytössä sivun header-alueelle leivänmurujen yläpuolelle.

Valikoiden alla kuva ei ollut kovin toimivakaan, joten oli vain hyvä, että siellä taustakuva ei toimikaan.

Ihan alkuun en voi laittaa, koska en osaa. Pitäisi saada Js:ssä alun häivitys. Se ei välttämättä toimi, koska sellainen sivustolla leveälle näytölle oli.
Siitä seuraisi säätöjä, joten olisi aika ongelmallinen. Minkä kokoinen sen milloinkin pitäisi olla?
 
Ongelmista voi tiedottaa


tai

 
Näyttää olevan aika melkoiset latausajat sivuilla ihan sama mihin yrittää mennä.
 
Palvelin on *...*. Tein viimeksi siivousta poistamalla kommentteja sekä lähettämällä CSS-tiedostoja FTP:llä ja sitten lataamalla uudestaan. Palvelin kaatui. Kun tekee CSS-tiedostojen siirtoja, tyhjentää välimuistin ja lataa sivun, tulee seuraavat ilmoitukset hyvin herkästi:

Resource Limit Is Reached
The website is temporarily unable to service your request as it exceeded resource limit. Please try again later.
Service Unavailable
The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

Additionally, a 503 Service Unavailable error was encountered while trying to use an ErrorDocument to handle the request.
 
Viimeksi muokattu:
Ei pidä naureskella. No ei nyt vähään aikaan ole kaatunut. Yritin headerin alle uutta aluetta. Se tuli. Taustaväri toimi, mutta otsakekuva ei taustakuvana toimi.

div.header-image{background-image:url("https://www.sanaristikkofoorumi.net/wordpress/wp-content/uploads/tausta-pitka_grayscale.png");background-position:60px 100%;}
En keksi syytä. En laittanut otsakekuvapalkkia, kun taustakuva ei näy. Ihan ihmeellistä. Katsoin kansion asetukset ja ne on ihan ok. Kiinteä kuva ei oikein toimi, kun sitten leveällä näytöllä se täyttää vain osan ruudusta ja kapealla on vaikea määritellä koko sopivaksi.
 
Foorumini lähtösivu pitäisi peruskännykällä (esim. Samsung Galaxy J5) näyttää nyt seuraavan näköiseltä. Laitoin päälinkeille erottimet.

2021-04-23-18.53.08-www.sanaristikkofoorumi.net-7381bf329e57.png



Kuvassa oikealla oleva painike on käyttäasetusten kautta määritelty lisäys. Sivussa olevalla painikkeella avataan valikko AIHEET. Muuten tuo kuva vastaa oletusasetuksia. Näkymän pitäisi olla laitteesta riippumatta tuon kaltainen. Leveä näyttö tuo vain ja ainoastaan väljyyttä, mutta ei mitään muuta.

Huomautukset (en kertakaikkiaan ymmärrä taustakuvaongelmia, ovat perin juurin mystisiä):
  • Tarkoitus oli laittaa ns. leivänmurujen alapuolelle otsakekuva, mutta taustakuva ei näkynyt.
  • Olen määrittänyt kahdelle alemmalle taustakuvat, mutta jostakin syystä ne eivät näy.
 
Viimeksi muokattu:
Toki voisihan sitä yrittää luoda tämän sivuston tyylisen täysleveän header-kuvan, joka sitten pienee näytön mukana. On kyllä iso työ luoda sopiva kuva.

Tein muutamia visuaalisia kokeiluja. Korostin päälinkkejä liukuväritaustalla ja laitoin leivänmurujen alle nykyiset otsakekuvat. Käytössä oleva otsakekuva kyllä madaltuu jos leivänmurut menevät monelle riville.
 
Sivu on muuten hyvä, mutta se on käsittämättömän hidas, erittäin buginen, näyttää kauhealta, ei skaalaudu oikein mihinkään, sekava ja lisäksi sivustolla on vakavia ongelmia sen saavutettavuuden kanssa, koska usein palvelin tai koodi on täysin rikki.
 
Viimeksi muokattu:
pitäähän terveellä ihmisellä harrastuksia olla ja tämä kyllä sellaisen vaatimukset täyttää. Tapio on varmaan huomannut, että täältä on paljon hyviä vastauksia saatuu asiantuntijoilta, joista osa varmaan pystyisi tai tekeekin sitä leipätyönä.

Vinkkaisin opiskelemaan esim. W3 CSS:n tyyppistä ratkaisua, jolla saat skaalautumisesta helppoa ja harrastukseen menevä aika keskittyy enemmän sisällöntuottamiseen.
 
En ymmärrä nyt tuota skaalautuvuusongelmaa. Olen testannut toimivuuden kännykälläkin. Tavoite on nykyisin, että ulko on kaikilla laitteilla niin samalainen kuin mahdollista eli näyttöporttiriippuvaisia seikkoja on minimaalisesti.

En myöskään sekavuutta. En pysty organisoimaan asioita paremmin, koska on monentyyppisiä sivuja.

Mikä nyt ulkoasussa mättää?

Hitaus on ongelma. Pavelin kaatui viimekisi omaan virheesee. Mutta kaatuu, kun muuttaa CSS:ää ja lataa sivun uudestaan useampaan otteeseen.
 
Viimeksi muokattu:
En ymmärrä nyt tuota skaalautuvuusongelmaa. Olen testannut toimivuuden kännykälläkin.
Vähänkään leveämmällä ikkunalla ei leviä, itse asia, eli taitaa olla jokin max leveys määritys (oliko vielä pikseleinä), mihin tökkää.

Monet perus ärsytykset puuttuu, mutta pahiten tökkää siihen että palvelin tökkii. Jos käyttäjiä ei ole paljon, niin viittaa koodilliseen ongelmaan. Tämä juttu mikä pitää olla kunnossa, ulkoasut sun muut sitten sen jälkeen. Yksinkertainen on yleensä sellainen mikä toimii kaikissa.

Jotain ärsyttää että kamaa ladataan tieskuinka monelta palvelimelta, eli kaikenlaista scrptiä ajossa, muuta sitä on niin monessa muussakin paikkaa.
 
Maksimileveys on asetettu vajaaseen 800px. Voin toki isoa näyttöä ajatellen laittaa lisää leveyskohtaisia määrityksiä. Koen vain itse, että kovin leveä teksti on epämiellyttävää lukea.

Joku ammattilainen huomautti, että linkitän CSS-, JS ja kuvatiedostoja https://....
Muutin niin, että linkitän kaikessa omassa CodeSnippet-koodissani nuo relatiivisesti eli suhteessa palvelimen juureen. WordPressissä on lisäosia, jotka linkittävät miten linkittävät. Niiden toimintaan ei voi puuttua, koska silloin automaattisia päivitityksiä ei voi tehdä.

Kaikki CSS-tiedostojen oma CSS on minimoitu. Kehiteltäessä puran minimoinnin, mutta pakkaan sitten uudestaan.

Cache-lisäosia en uskalla käyttää. JS:n pakkaus ja yhdistys menee useasti pieleen. CSS:n yhdistäminen ja pakkaaminen voi mennä pieleen. Sivun HTML-koodin pakkaus yleensä onnistuu.
 
En ole tähän projektiin tarkemmin perehtynyt tai lukenut koko ketjua, mutta täytyy nyt kysyä että mikäs tämä hirvitys on? Jos siis syötän selaimen osoitepalkkiin https://www.sanaristikkofoorumi.net/, niin tuo kyseinen sivu avautuu. Se on näkyvillä pienen hetken, jonka jälkeen ohjataan automaattisesti tuonne Blogi | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa. Jos tämä sivu on tarkoitettu jotain muuta kuin vain itseäsi varten, niin korjaisin kyllä tämän mahdollisimman pian. Näyttää nimittäin aika hassulta.

Tuo koko näkymä on ilmeisesti kuva, mutta miksi se edes on tuolla?


Screenshot_20210424_161259.png



EDIT:
Hiukan tarkemmin tutkimalla sain selville, että olet ilmeisesti tehnyt tuon ohjauksen näin:

Koodi:
<meta http-equiv="refresh" content="0;url=https://www.sanaristikkofoorumi.net/wordpress/blogikirjoitukset/" />

Jos sulla on tarkoituksena ohjata kaikki kävijät tuonne Blogi | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa, niin voisit luultavasti tehdä tuon paljon siistimmin configuroimalla http palvelimen tekemään tuollaisen ohjauksen. Ellei sitten tarkoituksena ole nimenomaan näyttää tuota kuvaa hetken ajan.

EDIT2:
Hitto kun tämä foorumisofta muokkaa noita linkkejä automaattisesti. Tarkoitin siis, että se ohjaus on
Koodi:
https://www.sanaristikkofoorumi.net  ---->  https://www.sanaristikkofoorumi.net/wordpress/blogikirjoitukset/
 
Viimeksi muokattu:
On se vaan ihme, että toisella tavalla toimittuna jokin toimii ja toisella ei.

Minulla oli osa alifoorumeiden tunnuskuvien taustakuvista style-tägin sisällä ja kaikilla kuvien osoite https://... Siirsin kaikki määrittelyt minimoituun CSS-tiedostoon ja määritin suhteelliset polut kuville - ja kaikki kuvat näkyivät!
 
En ole tähän projektiin tarkemmin perehtynyt tai lukenut koko ketjua, mutta täytyy nyt kysyä että mikäs tämä hirvitys on? Jos siis syötän selaimen osoitepalkkiin https://www.sanaristikkofoorumi.net/, niin tuo kyseinen sivu avautuu. Se on näkyvillä pienen hetken, jonka jälkeen ohjataan automaattisesti tuonne Blogi | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa. Jos tämä sivu on tarkoitettu jotain muuta kuin vain itseäsi varten, niin korjaisin kyllä tämän mahdollisimman pian. Näyttää nimittäin aika hassulta.

Tuo koko näkymä on ilmeisesti kuva, mutta miksi se edes on tuolla?


Screenshot_20210424_161259.png



EDIT:
Hiukan tarkemmin tutkimalla sain selville, että olet ilmeisesti tehnyt tuon ohjauksen näin:

Koodi:
<meta http-equiv="refresh" content="0;url=https://www.sanaristikkofoorumi.net/wordpress/blogikirjoitukset/" />

Jos sulla on tarkoituksena ohjata kaikki kävijät tuonne Blogi | Sanaristikkofoorumi – sanaristikot & muuta pohdittavaa, niin voisit luultavasti tehdä tuon paljon siistimmin configuroimalla http palvelimen tekemään tuollaisen ohjauksen. Ellei sitten tarkoituksena ole nimenomaan näyttää tuota kuvaa hetken ajan.

EDIT2:
Hitto kun tämä foorumisofta muokkaa noita linkkejä automaattisesti. Tarkoitin siis, että se ohjaus on
Koodi:
https://www.sanaristikkofoorumi.net  ---->  https://www.sanaristikkofoorumi.net/wordpress/blogikirjoitukset/
Tuo on sulaa tyhmyyttä joo. Tuli ihan tyhmyyttäni laitettua sivut alihakemistoon, kun on rinnalla testisivusto.
Piti laittaa jonkinlainen ohjaus. Tuo vanha versio oli jäänyt kummittelemaan.
Ongelmana on se, että blogi ei ole itsenäinen osa sivustoa ja pitää päästä muuallekin kuten .../wordpress/forums/

Muutin sisällön:
Odota hetki, niin sinut ohjataan toiseen paikkaan. Wait a moment until you will be redirected to another place.
 
Toi sivusto on kaiken lisäksi aivan jäätävän hidas :dead:
Kiusaa itseänikin ja olen yrittänyt tehdä asialle jotain. Muutin kokonaisrakenteen mahdollisimman pelkistetyksi. Lisäosia on vain todelliseen tarpeeseen.
Pakkaan aina CSS-tiedostoni. Kokeilin vielä kerran autoptimize-lisäosaa, mutta siitä tuntuu olevan enemmän haittaa kuin hyötyä, joten otin pois käytöstä.

Sekavuutta en ymmärrä ollenkaan. Esillä on suoraan sivuston sisältö. Jos siirtyy sivuilla, voi leivänmurujen avulla navigoida eri osastoja.

Jos avaa valikot, tulee ekana päävalikko, josta näkee suurimman osan sivuja. Päävalikossa ei ole tarkoituksella kaikki sivut esillä. Tilanteeseen liittyvät toiminnot ja sivut löytyvät välilehdiltä.

Niissä ei ole mitään turhaa, mutta kaikki tarvittava on aina käytettävissä. Miksi sivun pitäisi olla täynnä tavaraa ja asioita pitäisi etsiä sieltä sun täältä.
Yritin mininmoida esillä olevat asiat ja maksimoida valikoiden sisältämät asiat.
 
Viimeksi muokattu:
Varmaan kannattaisi kurkata tuota sivua esim firefoxin "inspect element" -työkalulla, siellä näkyy heti ainakin yksi 404-virhe ja kasa warningeja joiden korjaamisella saattaisi heti ruveta sivu toimimaan paremmin.

Oli sen verran monia style-määrityksiä, skriptien latauksia ja css-tiedostoja sun muita että en jaksanut tuon pidemälle edes vilkaista.

Mielestäni nykypäivänä on aika turhaa "pakata" jotain css-tiedostoa kun sen jälkeen sen editointi on ikävää eikä tuossa kuitenkaan säästä kuin muutamia tavuja siirrettävää dataa.
 
Chromen kanssa olen jonkin verran elementtejä tarkistanut. Varoitukset ovat epästandardista CSS:stä. Ne itse asiassa ovat teeman alkuperäisiä määrityksiä. Jätin ne, koska kai niillä jokin tarkoitus on.

Olen joskus kauan sitten tarkistanu W3C:n sivuilta HTML-koodin. Muutamasta moninkertaisesta id-attribuutti validointi huomautti, mutta siitä en välittänyt enkä välitä, sillä niitä on vain pakko minulla olla. En selitä tarkemmin, miksi niin on. Ei vaikuta toimivuuten mitenkään.

Nyt sain: IO Error: Received fatal alert: handshake_failure

En ymmärrä, mistä on kyse.

Muutama moninkertainen id-attribuutti on, mistä validointi huomauttaisi, mutta siitä en välitä.
Mutta missä on 404, se on pahempi.

Sain pakatusta CSS:stä sen kuvan, että selain käsittelee sitä nopeammin. Tiedostokoon säästö on minimaalinen.
 
Viimeksi muokattu:
Katsoin lähdekoodia. Suurin osa CSS ja JS:ää on WordPressin itsensä tai sen lisäosien lisäämää. Ikävässä määrin ladattavaa lisäsi Social Warfare, sillä se lisäsi paljon fontteja. Se on aika turha, joten poistin sen käytöstä. Poistin aiemmin käytöstä Twitter Feedit, koska en Twitteriä juuri enää käytä.

Lisäosia, jotka lisäävät CSS:ää tai JS, pitää käyttää vain, jos niille on oikeasti tarvetta. Mutta jos ne lisäävät dataa, ei siihen oikein voi järkevällä tavalla puuttuakaan. Aliteemaan toki voi luoda oman CSS:n, joka voi olla alkuperäistä pienempi.
 
Viimeksi muokattu:
Katsoin lähdekoodia. Suurin osa CSS ja JS:ää on WordPressin itsensä tai sen lisäosien lisäämää. Ikävässä määrin ladattavaa lisäsi Social Warfare, sillä se lisäsi paljon fontteja. Se on aika turha, joten poistin sen käytöstä. Poistin aiemmin käytöstä Twitter Feedit, koska en Twitteriä juuri enää käytä.

Lisäosia, jotka lisäävät CSS:ää tai JS, pitää käyttää vain, jos niille on oikeasti tarvetta. Mutta jos ne lisäävät dataa, ei siihen oikein voi järkevällä tavalla puuttuakaan. Aliteemaan toki voi luoda oman CSS:n, joka voi olla alkuperäistä pienempi.

Yhtään nopeammaksi ei kuitenkaan tullut, muttei huomattavasti hitaammaksikaan :tup:
 
Nettituttu huomasi kirjoitusvirheen linkitetyssä CSS-tiedostossa. Selain yritti etsiä tiedostoa, jota ei ole olemassa.
Tämä saattoi olla 404 virhe, joka aiemmin mainittiin. Tuossa oli sellainen kirjoitusvirhe, jota en olisi ikinä tullut huomanneeksi.
 
Viimeksi muokattu:
PHP-koodiani muutin siten, että käsillä olevan sivun www-osoite on globaali.

Koodi:
$GLOBALS['currentUrl']='https://' . $_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI'];
// kun tarvitaan kutsutaan näin:

$currentUrl=$GLOBALS['currentUrl'];

Toivottavasti tämä korjasi nopeusongelman.
Tässä se funktio, jolla on merkitystä siihen, mitä milloinkin näkyy valikossa AIHEET, määrittää sivuston otsikon ja määrittää, kumpi otsakekuva on käytössä.
Ei nyt vaan onnistunut muuten. Jos joutuu poistaa, valikko AIHEET ei toimi halutusti ja sivuston otsikoita ja otsakekuvia voi olla vain yksi.
Koodi:
function pageLists($list){
global $post;
$currentUrl=$GLOBALS['currentUrl'];
//$currentUrl='https://' . $_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI'];
//$_SERVER['HTTP_HOST'] = www.sanaristikkofoorumi.net
//if($currentUrl=='https://www.sanaristikkofoorumi.net/wordpress/ristikkoapuneuvoja/')
//print_r( $_SERVER);

$vihjeanalyysit=stristr($currentUrl,'/'.SITEROOT.'/ristikot/vihjeanalyysit');
$ristikot=stristr($currentUrl,'/'.SITEROOT.'/ristikot/');
$videot=stristr($currentUrl,'/'.SITEROOT.'/ristikkoartikkelit/videot/');
$blogi=stristr($currentUrl,'/'.SITEROOT.'/blogikirjoitukset');
//$blogi =  (is_page('173') || ($post->post_parent=="173"));
$tag=stristr($currentUrl,'/'.SITEROOT.'/tag/ristikot/');
$a0=stristr($currentUrl,'/'.SITEROOT.'/ristikkoartikkelit/');
$a1=stristr($currentUrl,'/'.SITEROOT.'/parhaimmat-ja');
$a2=stristr($currentUrl,'/'.SITEROOT.'/suoraan-netissa');
$a3=stristr($currentUrl,'/'.SITEROOT.'/ristikkoapuneuvoja/');
$a4=stristr($currentUrl,'/'.SITEROOT.'/netin-ilmais');
$a5=stristr($currentUrl,'/'.SITEROOT.'/joidenkin-');
$a6=stristr($currentUr,'/'.SITEROOT.'/ristikkorenki');
$a7=stristr($currentUrl,'/'.SITEROOT.'/is-extra');
$a8=stristr($currentUrl,'/'.SITEROOT.'/ohjeita-ibispaint');
$a9=stristr($currentUrl,'/'.SITEROOT.'/autodesk-sketchbook/');
$a10=stristr($currentUrl,'/'.SITEROOT.'/riittavan-hyva');
$a11=stristr($currentUrl,'/'.SITEROOT.'/piirtaminen-');
$a12=stristr($currentUrl,'/'.SITEROOT.'/luonnostelu/');
$a13=stristr($currentUrl,'/'.SITEROOT.'/medibang-paint/');
$a14=stristr($currentUrl,'/'.SITEROOT.'/kyna-ja-muut-');
$a15=stristr($currentUrl,'/'.SITEROOT.'/kyna-halvalle-');
$a16=stristr($currentUrl,'/'.SITEROOT.'/paremman-laa');
$a17=stristr($currentUrl,'/'.SITEROOT.'/valokuvankasittely/');
$a18=stristr($currentUrl,'/'.SITEROOT.'/saantohahmotelma-');
$a19=stristr($currentUrl,'/'.SITEROOT.'/ilmaiset-foo');
$a20=stristr($currentUrl,'/'.SITEROOT.'/foorumien-omin');
$a21=stristr($currentUrl,'/'.SITEROOT.'/laajempi-foorumi');
$a22=stristr($currentUrl,'/'.SITEROOT.'/ehdotukseni-');
$a23=stristr($currentUrl,'/'.SITEROOT.'/pc-tablet-t');
$a24=stristr($currentUrl,'/'.SITEROOT.'/chrome-os-ja'); /*
$muu1=stristr($currentUrl,'/'.SITEROOT.'/muutokset/');
$muu2=stristr($currentUrl,'/'.SITEROOT.'/tietoja/');
$muu3=stristr($currentUrl,'/'.SITEROOT.'/linkkeja/');
$muu4=stristr($currentUrl,'/'.SITEROOT.'/ohjeita/');
$muu5=stristr($currentUrl,'/'.SITEROOT.'/keskustelusaannot/');
$muu6=stristr($currentUrl,'/'.SITEROOT.'/chatbox/'); 
$muu6=stristr($currentUrl,'/'.SITEROOT.'/ota-yhteytta/');
$muu7=stristr($currentUrl,'/'.SITEROOT.'/asetukset/');
$muu8=stristr($currentUrl,'/'.SITEROOT.'/muut/');
$muut = $muu1 || $muu2 || $muu3 || $muu4 || $muu5 || $muu6 || $muu7 || $muu8;
*/
$muut=stristr($currentUrl,'/'.SITEROOT.'/muut/');
$howAlt=$videot || $blogi || $tag || $ristikot || $a1 || $a2 || $a3 || $a4 || $a5 || $a6 || $a7  || $a8 || $a9 || $a10;
$articles=$tag || $a0 || $a1 || $a2 || $a3 || $a4 || $a5 || $a6 || $a7  || $a8 || $a9 || $a10 || $a11 || $a12 || $a13 || $a14 || $a15 || $a16 || $a17 || $a18 || $a19 || $a20 || $a21 || $a22 || $a23 || $a24;
$articles2=$tag || $a0 || $a1 || $a2 || $a3 || $a4 || $a5 || $a6 || $a7  || $a8 || $a9 || $a10 || $a11 || $a12 || $a13 || $a14 || $a15 || $a16 || $a17 || $a18 || $a19 || $a20 || $a21 || $a22 || $a23 || $a24 || $videot || $ristikot;
$articles3=$a1 || $a2 || $a3 || $a4 || $a5 || $a6 || $a7  || $a8 || $a9 || $a10;
$list =array();
$list[0]=$blogi;
$list[1]=$articles;
$list[2]=$articles2;
$list[3]=$muut;
$list[4]=$articles3;
$list[5]=$ristikot;
$list[6]=$videot;
$list[7]=$tag;
$list[8]=$vihjeanalyysit;
return $list;
}
 
Viimeksi muokattu:
Esitä parempi tuohon tarkoitukseen. Toinen vaihtoehto on WordPressin funktio, jolla jokainen sivu pitää erikseen luetella, koska ei ole sellaisia valintakriteerejä, joilla sivuja voisi erotella muuten toisistaan. post-parent saattaisi joissakin tilanteissa toimia.
Tiedän, että tuo on vähän brutaali ratkaisu.

Olennaista ei nyt ole koodin alkukantaisuus vaan se, aiheuttaako koodi liikaa töitä palvelimelle.

Olennaista on myös se, että saan käyttööni funktion palauttaman taulukkomuuttujan. Jos funktion saa toteutettua niin, että palvelin luo tarvitsemani taulukkomuuttujan nopeammin, voin yrittää luoda funktion uudestaan.

Jotta joku voi opastaa, olisi hyvä olla tuntemusta WordPressin kanssa työskentelystä.
 
Viimeksi muokattu:
On sivut jonkin verran nopeutuneet. CSS on vielä osittain järjestämättä. Ne, mitä voisi laittaa samaan tiedostoon, ei ole laitettu eikä kaikkea turhaa ole siivottu. Kuinka paljon tällainen osittainen sotkuisuus vaikuttaa selaimen toimintaan.
 
On sivut jonkin verran nopeutuneet. CSS on vielä osittain järjestämättä. Ne, mitä voisi laittaa samaan tiedostoon, ei ole laitettu eikä kaikkea turhaa ole siivottu. Kuinka paljon tällainen osittainen sotkuisuus vaikuttaa selaimen toimintaan.

No ei kyllä ole tippaakaan nopeutuneet ja nuo nykyiset ongelmat ei kyllä mistään css-tiedostoista johdu.
 
Jos noin simppelin sivun lataus kestää 14s, niin jotain on todella pahasti vialla. Pelkästään palvelimen ensimmäinen vastaus sivua ladattaessa tulee yli 5s viiveellä.

1619367231025.png


Oikeassa kulmassa on tällainen kauneusvirhe:
1619366946801.png


Ja oliko tarkoituksellista, että tuosta hampurilaiskuvakkeesta aukeaa tällainen koko ruudun täyttävä hässäkkä, jossa on useita sisäkkäisiä vierityspalkkeja?

1619366995328.png
 
Minulle ei tullut tuota valikkopainikkeen siirtymää väärään paikkaan kun testasin 900x1600px näytöllä. En pysty omalla tietokoneellani verifioimaan ongelmaa. Oletan, että tuo kauneusvirhe tulee Firefoxilla. Chromessahan tuota kauneusvirhettä ei tule. Firefoxia ei ole tullut käytettyä. En jaksaisi tapella eri selainten kanssa, joten antaa olla, jos koskee vain FF:ää.


Ylimääräiset vierityspalkit tietokoneella ovat kyllä pieni ongelma, mutta aukeavalla ikkunalla pitäää olla oma vierityspalkki, jotta se toimisi. Kun koko sivu tarvitsee oman vierityspalkin, niitä tulee pakosta kaksi. Jos tulee enemmän kuin kaksi, se on minulta suunnitteluvirhe.

Tuokin taitaa olla Firefoxin ongelma. Poistin Chromelta sisemmän vierityspalkin näkymästä epästandardilla CSS:llä. Siitä kyllä seuraa se, että hiiressä täytyy olla rulla, että aukeavaa ikkunaa voi rullata. Oletan, että tietokoneen hiirissä on aina rulla. Ymmärtääkseni poisto toimii myös Microsoftin selaimella ja taitaa toimia Safarillakin sillä toimii webkit-vendorprefixillä.

Firefoxilla pienin määritys on "thin", joka ei täysin poista näkymästä vierityspalkkia.

Mobiililaitteissa ei useita vierityspalkkeja tule ja vierityspalkin tilalla on vain ohut palkki, joka osoittaa, missä mennään. Systeemi on optimoitu mobiililaitteille. Jos tietokoneversio kärsii mobiilioptimoinnista, se on minulla hyväksyttävää.

Mitä tulee leveyteen, mobiililaitteilla leveys on suhteessa näyttöön järkevämpi. Isolla näytöllä voisi avautuvaa ikkunaa kaventaa, mutta en ole määritellyt erikseen leveyttä tietokoneille. Se on kyllä helppo, jos laittaa jostakin lähtien max-width-määrittelyn.
 
Minulle ei tullut tuota valikkopainikkeen siirtymää väärään paikkaan kun testasin 900x1600px näytöllä. En pysty omalla tietokoneellani verifioimaan ongelmaa. Oletan, että tuo kauneusvirhe tulee Firefoxilla. Chromessahan tuota kauneusvirhettä ei tule. Firefoxia ei ole tullut käytettyä. En jaksaisi tapella eri selainten kanssa, joten antaa olla, jos koskee vain FF:ää.

Kyllä tuo tulee myös Chromella.
 

Uusimmat viestit

Statistiikka

Viestiketjuista
258 773
Viestejä
4 498 690
Jäsenet
74 282
Uusin jäsen
Seizan

Hinta.fi

Back
Ylös Bottom