Kako napraviti dizajn ovisan o vremenu?

Ban Kroativčić je pokisnuo

U ovom tutorialu naučit ćete kako na relativno jednostavan (kad vam mi objasnimo :)) način svojim posjetiteljima poslužiti drugačiji dizajn ovisno o vremenskim uvjetima u nekom gradu. Koristi ćemo PHP programski jezik, CSS i malo Kroativ čarolije. Za ovu svrhu poslužit ćemo se Yahoo Weather servisom.

Yahoo! Weather RSS Feed je zgodan servis putem kojeg možete dobiti vremenske uvjete za neki grad u XML obliku. Naša php skripta dohvaća RSS feed za određeni grad, preuzme nama zanimljive vrijednosti, napravi par usporedbi i po rezultatu ispisuje CSS stil. Kao što možete primijetiti princip je jednostavan, napravili smo par različitih css stilova za razne vremenske uvjete, pitali smo Yahoo kakvo je vrijeme i po tome poslužili CSS datoteku.

Ovdje možete pogledati demo ili skinuti source

Pogledajmo cijelu php skriptu pa ćemo sve pobliže objasniti.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

< ?php
	$url = "http://weather.yahooapis.com/forecastrss?p=HRXX0005&u=c";
	$vrijeme = getResource($url);
 
	$kakvo = preg_match("/<yweather:condition  text=\"(.*)\"/isU", $vrijeme, $kroativ);
 
	$kakvo_vrijeme = strtolower($kroativ[1]);
 
	preg_match('%<yweather:astronomy sunrise="(.*)"   sunset="(.*)"/>%', $vrijeme, $sunce);
 
	$sunrise = $sunce[1];
	$sunset = $sunce[2];
 
	$sunrise_time = explode(" ", $sunrise);
	$sunrise_am = $sunrise_time[0];
	$sunrise_split = explode(":", $sunrise_am);
	$izlazak_sunca = $sunrise_split[0].$sunrise_split[1]+30;
 
	$sunset_time = explode(" ", $sunset);
	$sunset_am = $sunset_time[0];
	$sunset_split = explode(":", $sunset_am);
	$sunset_sat = $sunset_split[0]+12;
	$zalazak_sunca = $sunset_sat.$sunset_split[1]+30;
 
	function getResource($url){
        $ch = curl_init();
		$timeout = 5;
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
        $result = curl_exec($ch);
        curl_close($ch);
 
        return $result;
	}
 
	$koliko_je_sati = getdate(time());
	$sat = $koliko_je_sati['hours'];
	$minuta = $koliko_je_sati['minutes'];
 
	if ($minuta < 10) {
		$minuta = "0".$minuta;
	}
 
	$sada = "$sat$minuta";
 
	$sunce = array("sunny", "fair day", "fair", "hot");
	$kisha = array("tropical storm", "severe thunderstorms", "thunderstorms", "mixed rain and sleet","freezing rain","showers","mixed rain and hail","isolated thunderstorms","scattered thunderstorms","scattered showers","isolated thundershowers","rain","light rain","heavy rain","thundershowers");
	$snijeg = array("mixed rain and snow", "mixed snow and sleet", "snow flurries", "light snow showers","blowing snow","snow","heavy snow","scattered snow showers","heavy snow","snow-showers","light-snow");
 
	if (($sada > $izlazak_sunca) && ($sada < $zalazak_sunca))
	{
		if (in_array($kakvo_vrijeme, $sunce))
		{
			echo "<link rel='stylesheet' href='sunce.css' type='text/css' />";
		}
		else if (in_array($kakvo_vrijeme, $kisha))
		{
    		echo "<link rel='stylesheet' href='kisha.css' type='text/css' />";
		}
		else if (in_array($kakvo_vrijeme, $snijeg))
		{
    		echo "<link rel='stylesheet' href='snijeg.css' type='text/css' />";
		}
		else
		{
			echo "<!-- vrijeme nije pronađeno -->";
		}
	} else {
			echo "<link rel='stylesheet' href='noch.css' type='text/css' />";
	}
 
?>

U sourcu se nalazi cijela skripta sa popratnim komentarima za lakše snalaženje.

Između linija 2-9 nalazi se osnova. Variabla $url sadrži url do našeg XML-a sa vremenom. p=HRXX0005&u=c dio sadrži vremenski Yahoo kod našeg grada, u ovom slučaju HRXX0005 za Zagreb. Oznaka p znači lokacija, ID grada ili ZIP kod. ZIP kod radi većinom samo za USA gradove pa stoga mi koristimo ID grada. Oznaka u označava mjernu jedinici, f: Fahrenheit i c: Celsius. Za sve mogućnosti možete pogledati Yahoo! Weather RSS Feed stranicu. Da bi dobili kod vašeg grada potrebno je otići na stranice http://weather.yahoo.com/ i upisati ime vašeg grada. Kada ste ga našli kliknite na go ili ćete biti automatski prebačeni na stranicu sa vremenskim uvjetima odabranog grada. Obratite pažnju na vaš adress bar, vidjet ćete URL u ovom formatu http://weather.yahoo.com/forecast/HRXX0005.html , nas zanima samo dio koji smo ovdje podebljali. To je kod vašeg grada. Kopirajte ga i zamijenite HRXX0005 na liniji 2 sa vašim kodom..

Vidite i sami da je kod relativno jednostavan, prost te bi svakako mogao biti optimiziran. Ako napravite bolju verziju, javite nam i mi ćemo je objaviti.
Dio za naprednije:
Pogledajte source kod ove stranice. Vidite XML formatirane vremenske uvjete. Mi u skripti jednostavno sa preg_match php funkcijom dođemo do željenog dijela i uzmemo što nam treba. U našem slučaju vremenske uvjete te izlazak i zalazak sunca. Nakon toga sa funkcijom explode rastavljamo dobiveni sadržaj na nama korisne dijelove. Npr. izbacujemo AM i PM oznake kako bi iz vremena dobili cijeli broj koji ćemo usporediti sa trenutnim vremenom. Na taj način možemo precizno vidjeti jeli dan ili noć.
Kraj za napredne

Između linija 9 – 23 nalazi se kod za preuzimanje i obradu vremena izlaska te zalaska sunca. Variabla $kakvo_vrijeme sadrži naš vremenski uvjet (npr. Light Rain) konvertiran u mala slova za lakšu usporedbu. Variabla $izlazak_sunca sadrži vrijeme izlaska plus 30 minuta jer nikad nije odmah dan kada sunce počne izlaziti. Variabla $zalazak_sunca sadrži naravno vrijeme zalaska kojem smo dodali 12 sati da bi dobili 24h vrijeme i opet 30 minuta jer nikad nije odmah noć po zalasku sunca.

Linije koda 25-30 sadrže funkciju za parsiranje tog xml-a sa našim vremenskim uvjetima. Na ovim stranicama možete pogledati opise te neke druge upotrebe te funkcije.

Na linijama 37 – 45 dobivamo trenutno vrijeme. Funkcija time() prikazuje vrijeme 12:01 u formatu 121 što nama ne koristi. Zašto? Mi uspoređujemo izlazak sunca i zalazak sunca u obliku cijelog broja sa trenutnim vremenom. Ako je trenutno vrijeme u obliku cijelog broja veće od izlaska sunca i manje od zalaska onda je dan. Zato smo dodali funkciju na linijama 41 – 43 koja jednostavno dodaje nulu ako je manje od 10 minuta. Sa funkcijom getdate samo rasčlanjujemo time() funkciju na minute i sate.

Između linija 47 – 49 napravili smo array-e sa mogućim vremenskim uvjetima. Ovdje možete pogledati cijelu tablicu mogućih vremenskih uvjeta:

Linije 51 – 71 sadržavaju naše ispisivanje CSS stila uvjetovanog vremenskim uvjetima. Prvo radimo jednostavnu provjeru, ako je trenutno vrijeme veće od vremena izlaska te manje od vremena zalaska sunca onda je dan, u suprotnom pretpostavljamo da je noć. Ako je dan onda pogledaj koji je vremenski uvjet. if (in_array($kakvo_vrijeme, $sunce)) znači, ako se u Array-u $sunce nalazi vremenski uvjet dobiven od Yahoo-a, posluži CSS stil sunce.css. Na ovaj način prolazimo sve mogućnosti koje smo definirali u arrayima $sunce, $kisha i snijeg, ako nema pogodka nemoj poslužiti ništa i naš default.css će biti primijenjen. Malo niže je i to pojašnjeno.

Pitate se kako sad to sve uključiti?

Princip je vrlo jednostavan. Ako ste skinuli naš source u njemu se nalazi php skripta vrijeme.php. Nju ćemo uključiti u naš dokument na sljedeći način:

< ?php @include "vrijeme.php"; ?>

Naša skripta vrijeme.php ne radi ništa drugo nego samo ispisuje liniju za uključivanje CSS stila u dokument. Jednostavno ju uključimo u našu php stranicu sa funkcijom include. Mogli ste primijetiti znak @ ispred include funkcije. Monkey znak ispred funkcije znači da php neće ispisati grešku na naše stranice ako smo krivo napisali putanju dokumenta ili nešto slično. On nije potreban ali smo ga stavili da se ljudi u slučaju pogreške ne uplaše 🙂

Naš prijedlog vam je da napravite jedan normalni css file tipa default.css. Nakon toga napravite stilove za druge vremenske uvjete. Jednostavno kopirajte klase i id-ove iz default.css-a i izmijenite što želite. Nakon toga uključite vrijeme.php na sljedeći način.

<head>
 
	<title>Moja Stranica</title>
 
	<link rel="stylesheet" type="text/css" media="all" href="default.css" />
	< ?php @include "vrijeme.php"; ?>
 
</head>
 
<body>
Sadržaj
</body>

Znači include funkciju pozovite nakon definicije default.css stila. Zašto? Vaša stranica će uvijek koristiti CSS koji je zadnje naveden. Znači ako imate dvije iste klase sa različitim definicijama u dva različita CSS-a, uvijek će se koristiti druga. Na ovaj način u slučaju greške stranica će normalno prikazati default.css, a ako je sve 5 onda idu vaši vremenski stilovi.

Za kraj vam želimo dati još jedan savjet. Nemojte pretjerivati sa ovom skriptom. Ako vršite izmjene vršite ih u smislu boje, koje slike itd., a ne pozicije elemenata i generalnog dizajna. Vaši su posjetitelji naučeni na vašu navigaciju, vaše pozicije elemenata i već surfaju vašim stranicama po podsvjesnoj šabloni. Nemojte ih zbunjivati već ih ugodno iznenadite.

Ako želite ikone vremenskih uvjeta kakve koristi i Yahoo, možete ih besplatno skinuti ovdje.

Otvoreni smo za sve prijedloge u svezi ove skripte, komentari su tu… Lijep pozdrav do sljedećeg tutoriala, vaš Kroativ Tim!