Uusiutunut nordicweather

[weatherc]

Koko homma lähti siitä kun uusi tutkanäyttö ei sopinut sille annettuun tilaan, eikä nyt tutkakuvaa haluta lähteä pienetämään, siitä lähti dominoefekti

Pohjana toimii Andreas Vilkundin 1024px-templatesta oleva taustakuva.

Nooh, samalla tuli yksi piiitkään mielessä ollut homma tehtyä, kuten aina niin ajan mittaan kertyy yhtä sun toista enemmän tai vähemmän käytössä olevaa tillpehööriä. Hyvänä esimerkkinä sivulla olleet nappulat tai tabsit sekä tuo lightboxi (kun klikkaa esim mittaria etusivulla), niitä on ajannut 2 eri javaskriptiä, uusi jQuery-pohjainen ja vanha niiltä osin kun ei ole vaihdettu. Toinen ikiuisuus-projekti on ollut sivun validointi w3-kaavan mukaan, totuus kun on se että moni sivu oli kaukaa valiidista  

Nyt kaikki sivut ovat valiideja W3 XHTML 1.0 Strict, ehkä jotain pientä lukuunottamatta.
Tabsit ym härpäkkeet ajetaan kaikki samalla jQuery-moottorilla. Tämä vähentää tarvittavien js-tiedostojen määrää varsinkin kun ovat nyt myös yhdistetty silleen sopivasti ryhmiin sen mukaan milloin niitä tarvitaan.

Tutkasivu, kuten kaikki muutkin sivut tuli siivottua ja katsottua pikkasen ettei mitään ei-tomivaa.

WXSIMin tuntiennuste on myös päivitetty uusimpaan versioon joten se puhuu nykyään suomea. Tosin se tuntiennuste-scripti on orginaalina kaukaa w3-valiidista, validaattori tais puskea 160+ virhettä siitä alunperin, joten piti "pikkasen" siivota sitä ja nyt se validoi.

Heräs kysymys tuossa kun koodailin että kuin ei kukaan ole löytänyt jQueryä aikasemmin? Koska sillä pystyy tekemään vaikka mitä pientä silausta sivuille, esimerkkinä iframet eivät validoi W3 Strictissä, mutta jQueryn avulla sen saa kierrettyä niin että selain näkee normi linkin jonka jQuery muuttaa iframeksi, näppärää.
Toinen reilussa käytössä oleva on että sama koskee target="_new":ta linkeissä, ei validoi, ja taas tuli jQuery pelastamaan.

Silmäherkkuna on sitten drop-shadow, eli varjostus eri lohkoille  

[Snowi]

Ohhoh. Näyttää kyllä todella hyvältä.
Sivuista tuli entistä selkeämmät ja nyt näyttäisi kaikki härpäke mahtuvan kunnolla sivulle  .
Myös tuon lämpötilan näkyminen yläreunassa on loistava juttu. Olen myös omille sivuille tuota kaavaillut, koska useasti kun katsoo vaikka ennustetta, niin haluaa sitten tarkistaa paljonko se lämpötila nyt olikaan 

Vaikka itse avasin omat sivut vasta pari kuukautta sitten, niin jo nyt on heti uudistus mielessä. Tulen muuttamaan ulkoasua pikkasen ja etusivu menee kokonaan uusiksi, tai voi olla että säilytän tuon vanhankin, mutta se ei olisi enää etusivuna.
Valitettavasti ei tässä kuukauden sisällä kauheasti kerkiä tekemään, mutta eiköhän uudistukset ja lisähärpäkkeet saada kesäkuuhun mennessä  

[weatherc]

Yllättävän helposti tuo siirto uuteen templateen sujui. Tosin voi olla osuutta asiaan että kävin kaikki sivut läpi etukäteen

Suurin ongelmahan mulla oli nuo "ylileveät" härpäkkeet kuten tutkanäyttö
Se yhdistettynä siihen että tavaraa on sen verran ettei tahdo saada sellaista ylämenyytä niistä näppärästi on pikkasen haasteena. Nyt tuli tehtyä kapeampi menyy noille leveille sivuille jota voi tarvittaessa käyttää. Tuo menyy on muuten ihan vakio CL-templaten flyout-menyy jonka css:ää pikkasen viilattu sekä laitettu jQueryn avulla varjostus.
wxsim/foreca-vertailu joka oli myös ylileveä tuuppas itses ihan itsestään raameihin ilman että tein mitään mikä yllätti.

Toinen mitä koitin on että itse pohja olisi mahdollisimman kevyt mahdollisimman vähillä kuvilla. Nyt itse pohja on 3 Kb html:ää sekä 1 alle 1 Kb:n taustakuva + yläreunan 2 kuvaa. Myös taulukot ovat nyt täysin css-pohjaisia.

Viilaamista on vielä mm. koittaa saada tutkasivun lopullinen koko pienemmäksi, kesän ruuhkia silmälläpitäen, nyt se huitelee siinä 200 Kb:n hujakoilla (jos mitään tiedostoa ei ole valmiiksi selaimen välimuistissa) josta 1/3 vie itse tutkakuva, mutta se on sellaista pikkuhiljaa-toimintaa. Ensimmäisen latauksen html-rquestit alkaa nyt olemaan aika hyvällä tasolla siinä (21 kpl), kun pahimmillaan ne lähenteli 100  

Vinkkinä Snowille, jollei käytä tuota CL-templatea, kannattaa rakentaa sivu siten että on helppo muuttaa, eli samat top- sidebar- ja footer-filut kaikissa sivuissa jolloin ei tarvi muuttaa kun yhdestä paikkaa. Sekä käyttää css:ää tyyleihin.
Hyvä testeri jossa voi testata sivuaan löytyy mm.:
http://www.websiteoptimization.com/services/analyze/ sekä
http://tools.pingdom.com/
Ne kertoilevat mm. puuttuvista kuvista sekä mitä kaikkea sivusi lataa yhden latauksen yhteydessä, näppärät jos haluaa siivota pois turhaa roskaa..

[Snowi]

Vinkkinä Snowille, jollei käytä tuota CL-templatea, kannattaa rakentaa sivu siten että on helppo muuttaa, eli samat top- sidebar- ja footer-filut kaikissa sivuissa jolloin ei tarvi muuttaa kun yhdestä paikkaa. Sekä käyttää css:ää tyyleihin.
Hyvä testeri jossa voi testata sivuaan löytyy mm.:
http://www.websiteoptimization.com/services/analyze/ sekä
http://tools.pingdom.com/
Ne kertoilevat mm. puuttuvista kuvista sekä mitä kaikkea sivusi lataa yhden latauksen yhteydessä, näppärät jos haluaa siivota pois turhaa roskaa..

Ai pystyykö nuo topbarit sun muut tekemään niin että muutat sen jostain yhdestä paikkaa ja se päivittyy sitten kaikkiin sivuihin?
Itse olen tällä hetkellä tehnyt ihan vain että ensin muuttanut sen topbain ja sitten olen kopioinut sen muille, koska niissä on prikuulleen sama sivu.
Mutta noi mun sivujen taustat tuun muuttamaan niin että joku yhden pikselin siivu jonka sitten vetää vaan repeatilla. Tällä hetkellä nekin on kokonaisina. Tuun myös omallekin sivulle laittamaan noi drop shadowit sit kun sen uudistuksen teen.

Noi linkit näytti oikein hyviltä. Pitänee ottaa ne käyttöö ja aina tarkistella mitäs se näyttää 

[weatherc]

Ai pystyykö nuo topbarit sun muut tekemään niin että muutat sen jostain yhdestä paikkaa ja se päivittyy sitten kaikkiin sivuihin?
Itse olen tällä hetkellä tehnyt ihan vain että ensin muuttanut sen topbain ja sitten olen kopioinut sen muille, koska niissä on prikuulleen sama sivu.
Mutta noi mun sivujen taustat tuun muuttamaan niin että joku yhden pikselin siivu jonka sitten vetää vaan repeatilla. Tällä hetkellä nekin on kokonaisina. Tuun myös omallekin sivulle laittamaan noi drop shadowit sit kun sen uudistuksen teen.

Tee esim. top.php-filu johon laitat top-osion ja sitten vaan lisäät sen sivulle tyyliin
<?php
include 'top.php';
?>

Eli sivu voi näyttää tyyliin tältä:

<?php
include 'top.php';
include 'sidebar.php';
echo 'itse sivu blablablaa';
include 'footer.php';
?>

Toi noin pelkistettynä.

[djmake]

Eli sivu voi näyttää tyyliin tältä:

<?php
include 'top.php';
include 'sidebar.php';
echo 'itse sivu blablablaa';
include 'footer.php';
?>

Toi noin pelkistettynä.

Noinhan se toimii yksinkertaisemmillaan ja pysyy yleensä hyvin hallinnassakin. Mutta samaa asiaa viilaten voi toki kasata linkkejä tyyliin munsaasivu.fi//index.php?ylavalikko=etusivu&sivuvalikko=tilastot&sisalto=sade_kk
Linkkinä ei enää synny niin siistiä, mutta php:ta hieman enemmän hyödyntäen voi nuo includettavat palikat syöttää suoraan linkissä. Ja nuo vaihtoehdot voivat olla toki nimettyjä ihan miten vaan haluaa. Esimerkkinä naputtelin järkevät, jotta idea käy ainakin hieman selville.
Omat hyvät ja huonot puolensa tuossakin. Huonona puolena tosiaan sitä hankalammat linkit, mitä enemmän siihen kamaa tunkee. Ja huonosti tehtynä voi "harrastusmielinen" includettaa mitä haluaa ja pahimmillaan saa palvelimen totaalisesti solmuun.

Ja tämäkin pelkistettynä tosiaan.

[weatherc]

/index.php?ylavalikko=etusivu&sivuvalikko=tilastot&sisalto=sade_kk

Tuohon iso varoituksen sana, nuo täytyy ehdottomasti tarkistaa koodi-puolella ennen käyttöä niin että käyttää vain esiasetut vaihtoehdot sekä aivan esimmäiseksi siivoaa pois kaikki html:ään/hhtp:hen viittavat pätkät ennen kuin tekee mitään muuta. Muuten on mahdollista ajaa tyliin index.php?ylavalikko=http://pahasivu.com.
Tuosta on nimittäin ihan omat pahat kokemukset joten kokemus puhuu tässä asiassa, tuloksena oli se että sivu jotui pannaan silloisen webhotellin toimesta alta minuutin.

Tuo linkkisysteemi on paljon haavoittuvampi siinä suhteessa kun hardkoodattu include.

[djmake]

/index.php?ylavalikko=etusivu&sivuvalikko=tilastot&sisalto=sade_kk

Tuohon iso varoituksen sana, nuo täytyy ehdottomasti tarkistaa koodi-puolella ennen käyttöä niin että käyttää vain esiasetut vaihtoehdot sekä aivan esimmäiseksi siivoaa pois kaikki html:ään/hhtp:hen viittavat pätkät ennen kuin tekee mitään muuta. Muuten on mahdollista ajaa tyliin index.php?ylavalikko=http://pahasivu.com.
Tuosta on nimittäin ihan omat pahat kokemukset joten kokemus puhuu tässä asiassa, tuloksena oli se että sivu jotui pannaan silloisen webhotellin toimesta alta minuutin.

Tuo linkkisysteemi on paljon haavoittuvampi siinä suhteessa kun hardkoodattu include.

Tuostahan tuossa jo kirjoitin, että huonosti tehtynä käy heikosti. Ja huonosti tehty tosiaan tarkoittaa sitä, että includettavaksi hyväksytään mitä tahansa. Moinen toteutus on vielä helppokin tehdä ja toimii, kunnes joku keksii sitä hyödyntää. Jätin vielä plussapuoletkin jokaisen omaan mietintään.

Turvallisin tuossa on toki käsipelillä koodiin naputellut vaihtoehdot ja kaikilla muilla jonkin oletus- tai virhesivun lataus. Itse olen tehnyt tuon niin, että esimerkiksi valikot ovat vaikkapa valikot-kansiossa. Tämän kansion sisältämien filujen nimistä tehdään automaattisesti taulukko ja osoiterivin syötettä verrataan ko taulukkoon. Mikäli vastaavuus löytyy, niin hyväksytään syöte includettavaksi, muuten ei.

Ja on tuosta itselläkin kokemusta. Vuosikausia tuota käytetty ilman ongelmia.

[weatherc]

Juu, tarkistettuna sehän toimii ihan ok, itselläkin tuo sivu=xx joka tuuppaa etusivua jollei löydy listasta.

[Snowi]

Kiitoksia neuvoista.
Itse en mielellään haluaisi noihin linkkeihin noita vaikeita päätteitä, vaan että ne olisivat mahdollisimman selkeitä.
Mitenkäs muuten kun minulla on nuo alaviivat noissa omissa valikoissa, eli se sivu mikä on valittuna on myös alleviivattu. Niin enhän silloin voi käyttää tuollaista sivua joka tulisi samanlaisena joka sivulle. Vai?