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 ;D
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 ;D
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ä ;D
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ö ;D
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 ;D
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..
Lainaus käyttäjältä: weatherc - perjantai, 19.02.2010, 19:37
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ää :)
LainaaAi 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ä.
;D
Lainaus käyttäjältä: weatherc - perjantai, 19.02.2010, 21:07
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.
Lainaa/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.
Lainaus käyttäjältä: weatherc - perjantai, 19.02.2010, 22:28
Lainaa/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.
Juu, tarkistettuna sehän toimii ihan ok, itselläkin tuo sivu=xx joka tuuppaa etusivua jollei löydy listasta.
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?
Lainaus käyttäjältä: Snowi - lauantai, 20.02.2010, 16:18
Itse en mielellään haluaisi noihin linkkeihin noita vaikeita päätteitä, vaan että ne olisivat mahdollisimman selkeitä.
Monella tapaahan noita voi tehdä ja ihan tarpeen mukaan. Tarkennetaan kuitenkin senverran, ettei tuon ketjun tarvitse olla niin pitkä, mitä esitin. Eikä sitä tarvitse käyttää jokaisessa paikassa. Esimerkkinä vaikkapa sivu, jossa on normaalisti tuoreimmat havainnot ja samalla "ulkoasulla" tarkoitus selata myäs historiaa. Sivu voisi olla vaikkapa havainnot.php ja sille surffaaminen näyttäisi aina senhetkisen tilanteen. Ja historian puolelle mennessä osoite olisikin havainnot.php?historia=viimeviikko havainnot.php?historia=viimevuosi tms.
Lainaa
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?
Riippuu siitä, että miten asioita toteuttaa ja mitä haluaa includella sivuille sisällyttää. Asian voi tehdä toki niinkinpäin, että valikko on sivukohtainen ja includella varsinainen leipäteksti ja mahdolliset muut asiat, jotka ovat useammalla sivulla samat.
Pelkästään sisällönkin osalta include on välillä ihan kätevä. Jos itse runko on kovin raskas ja monimutkainen, niin voi olla helpompi tuottaa sisältö omana filunaan. Tai jos jokaisella sivulla on sama "uutisikkuna" tms, niin sellaisen päivittäminen jokaiselle sivulle erikseen olisi toivottoman työlästä sensijaan, että yhteen tiedostoon ja includella.
Monella lailla voi samaan lopputulokseen päästä ja kyllä ne valikotkin toimimaan saa. En kuitenkaan ole tullut katsoneeksi, että miten olet ne nyt tehnyt? Ilmeisesti suoraan alleviivaamalla?
Helpoiten sen tekee miten mulla on ukkostutkat.fi:ssä, eli sellainen ihan perus if-tarkistus tuota varten, koska käytän siinä page=numero niin tarkistan php:llä numeron ja jos osuu haarukkaan niin <b></b> eteen ja takkse muuten ei mitään.
Tuon voi tehdä myös niin ett taristaa php:llä sivun nimen (kuten sivu.php), tagi löytyy php.n perussetistä eli ei vaadi mitään erikoistakaan eli $_SERVER["SCRIPT_NAME"]; kannataa toki taistaa ensin echolla mitä tuo anataa ulos että saa if-tarkistuksen oikein ;)