"Ajax Weather Box" - Script Καιρού - V. 1.0.0

Σε αυτή την περιοχή μπορείτε να βρείτε ή να αναζητήσετε πληροφορίες σχετικές με την PHP

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

"Ajax Weather Box" - Script Καιρού - V. 1.0.0

Δημοσίευση από fafos » 13 Σεπ 2012 23:42

Αφού η weather.com και η google μας άφησαν στα κρύα του λουτρού καταργώντας τα API που έδιναν ελεύθερα, ήρθε ο καιρός να δοκιμάσουμε και το API της www.msn.com (το οποίο παίρνει τα στοιχεία από την www.foreca.com ).

Το script ανήκει στην webat.gr και δίνετε ελεύθερα μόνο στο freestuff.gr και στους πελάτες της εταιρείας! Μπορείτε να το χρησιμοποιήσετε ελεύθερα στις ιστοσελίδες σας (προσωπικές ή επαγγελματικές) αλλά δεν μπορείτε να το παρουσιάζετε σαν δικό σας ή να το πουλάτε σαν ξεχωριστή εφαρμογή οπουδήποτε!

Όπως λέει και ο τίτλος, είναι ένα Ajax (jquery) script καιρού και τα κύρια χαρακτηριστικά του είναι τα εξής:

Γενικά Χαρακτηριστικά:
Εμφάνιση καιρικών συνθηκών τώρα και πρόβλεψη έως 5 επόμενες ημέρες.
Πολύγλωσσο (έρχεται με Ελληνικά και Αγγλικά αλλά είναι πολύ εύκολο να βάλετε όποια γλώσσα θέλετε)
Βοηθητικά "tabs" αριστερά ή δεξιά του πλαισίου του καιρού για αναζήτηση πόλης καιρού, αλλαγή μονάδας μέτρησης καιρού, αλλαγή γλώσσας και εμφάνιση σχετικού google χάρτη με τις τυχόν νεφώσεις που επικρατούν στην περιοχή (radar layer).
10+1 sets εικονιδίων καιρού!
4 διαφορετικά styles (μπορείτε να δημιουργήσετε εύκολα το δικό σας)
Autocomplete όταν γράφετε την πόλη αναζήτησης!

Καιρικές Συνθήκες τώρα:
Εμφανίζει: Πόλη καιρού (στα Λατινικά ή Αγγλικά), Ημερομηνία και ώρα τελευταίας ενημέρωσης, εικονίδιο καιρού (100Χ100 πίξελς), θερμοκρασία, αίσθηση θερμοκρασίας, άνεμος (διεύθυνση, ταχύτητα -σε χιλ ή μίλια + μποφόρ -τα μποφόρ μπορείτε να τα απενεργοποιήσετε από τις ρυθμίσεις-), υγρασία.
Οι μονάδες μέτρησης αλλάζουν από τα tabs δίπλα...

Πρόγνωση Καιρού:
Εμφανίζει: εικονίδιο καιρού (48Χ48 πίξελς), θερμοκρασία, πιθανότητα βροχής (%) και ημερομηνία. Μπορείτε να εμφανίζετε από 1 έως 5 ημέρες πρόβλεψης μέσω των ρυθμίσεων.


ΑΠΑΙΤΗΣΕΙΣ: PHP 5+, cUrl, allow_fopen=ON, οι σελίδες να είναι UTF-8


Εγκατάσταση:

Κατεβάζετε από εδώ τα αρχεία: http://www.webat.gr/cc/fw/box/weather-box.zip

Αποσυμπιέζετε το zip και ανοίγετε με έναν editor (π.χ. Notepad++) το αρχείο "settings.php". Κάνετε τις αλλαγές που θέλετε και σώζετε το αρχείο (οδηγίες μεταβλητών παρακάτω)

Ανεβάστε τον φάκελο με όλα τα αρχεία στον ROOT της ιστοσελίδας σας...

Τρέξτε το αρχείο: www.tositesas.gr/weather-box/demo.php να δείτε αν δουλεύει το script..

Γενικές Ρυθμίσεις:
Στο αρχείο "settings.php" μπορείτε να δώσετε τις ρυθμίσεις σας. προσέξτε ιδιαίτερα το url της ιστοσελίδας σας και τον φάκελο που είναι ο καιρός
(προτείνεται να τον αφήσετε όπως έχει.. αν τον αλλάξετε δώστε την διαδρομή στο αρχείο "weatherAjax.php" αλλάζοντας το include include $_SERVER['DOCUMENT_ROOT'].'/weather-box/functions.php'; με την νέα διαδρομή)
Για τις υπόλοιπες ρυθμίσεις διαβάστε τις οδηγίες και όπου κολλήσετε ρωτήστε εδώ μέσα (ΜΗΝ ρωτάτε την webat.gr.. ΔΕΝ θα σας απαντήσει ποτέ!)

Εμφάνιση στις σελίδες σας:

1. Τοποθετείστε τα js και css αρχεία στον header της σελίδας σας:

Κώδικας: Επιλογή όλων

		<script type="text/javascript" src="http&#58;//maps.google.com/maps/api/js?sensor=false&libraries=weather"></script>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.21.min.js"></script>

		<!--css files-->		
		<link rel="stylesheet" href="css/weather.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/blue.css" type="text/css" media="screen" />
		<!-- end css files-->
		<link rel="stylesheet" href="css/redmond/jquery-ui-1.8.20.custom.css">

Αν χρησιμοποιείτε ήδη την jquery ή και jquery UI στις σελίδες σας ΣΒΗΣΤΕ τα ανάλογα αρχεία!!

Μετά βάζουμε από κάτω ένα scriptaki που καλεί τον καιρό στο div που θα τοποθετήσουμε στην σελίδα μας:

Κώδικας: Επιλογή όλων

<script>	
$&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
	//load weather
	$&#40;'.weaBlue'&#41;.load&#40;'weatherAjax.php'&#41;;
&#125;&#41;;
</script>	

ΣΗΜΑΝΤΙΚΟ!! Δώστε την διαδρομή προς τον φάκελλο του καιρού στα παραπάνω αρχεία!!

(π.χ. <script type="text/javascript" src="http://www.tositesas.gr/weather-box/js/jquery-1.7.2.min.js"></script>)

Και τέλος, τοποθετείτε τον παρακάτω κώδικα στο σημείο της σελίδας που θέλετε να δείξετε τον καιρό:

Κώδικας: Επιλογή όλων

<!--START WEATHER-->
<div class="weaOuter weaBlue"></div>
<!--END WEATHER-->
Μελετήστε το αρχείο "demo.php" για να καταλάβετε πως δουλεύει το script..


Τα Styles:

Όπως γράφω παραπάνω το script έρχεται έτοιμο με 4 styles. Μπορείτε να κάνετε τις αλλαγές σας και να εφαρμόσετε όποιο από αυτά θέλετε κάνοντας τις παρακάτω αλλαγές:

1. Πρέπει να δώσετε την διαδρομή του css αρχείου... πχ:
<link rel="stylesheet" href="css/red.css" type="text/css" media="screen" />

2. Στον κώδικα script πρέπει να αλλάξετε την class:
$('.weaRed').load('weatherAjax.php');

3. Αλλάζετε την class και στο div που θα βάλετε στις σελίδες σας:
<div class="weaOuter weaRed"></div>

4. Ανοίγετε το αρχείο "weatherAjax.php" και αλλάζετε την class σε αυτήν την γραμμή:
var currentweadiv = '.weaRed';//change with your style

έτοιμο...


Γλώσσες (όχι μοσχαρίσες):
Μπορείτε να δημιουργήσετε τις δικές σας γλώσσες εύκολα... Σε αυτήν την σελίδα μπορείτε να δείτε τους κωδικούς κάθε γλώσσας: http://www.science.co.il/language/locale-codes.asp ("LCID string" στήλη).
Κλωνοποιήστε το αρχείο "langs/en-gb.php" και δώστε του σαν τίτλο τον κωδικό της νέας γλώσσας (π.χ. "fr-fr.php").
Μεταφράστε το 2ο μέρος κάθε μεταβλητής.. π.χ.:
"Today"=>"Today",
μεταφράζετε το πράσινο κείμενο. Σώστε το μεταφρασμένο αρχείο στον φάκελο "langs"
Ανοίξτε το αρχείο "weatherAjax.php" και βρείτε την λίστα με τις γλώσσες:

Κώδικας: Επιλογή όλων

		<!--languages list-->
		<div class="weaLanguages">
		<div class="weaLanguage" rel="el-gr">Ελληνικά</div>	
		<div class="weaLanguage" rel="en-gb">English</div>
		</div>
		<!--end languages list-->
προσθέστε ένα νέο div εκεί μέσα με την νέα γλώσσα:
<div class="weaLanguage" rel="fr-fr">French</div>
Σώστε το αρχείο και η γλώσσα είναι έτοιμη. Δοκιμάστε το script με την νέα γλώσσα να δείτε αν δουλεύει σωστά!


Εικονίδια καιρού:

Μπορείτε να κατεβάσετε 10 sets εικονιδίων καιρού εδώ: http://www.webat.gr/cc/fw/box/extra-icons.zip
Αποσυμπιέστε το zip και δείτε τα εικονίδια. Αν σας αρέσει κάποιο ανεβάζετε ΜΟΝΟ τους φακέλους "forecast" και "current" στον φάκελο "icons" της ιστοσελίδας σας!
Αν έχετε κάποιο δικό σας set εικονιδίων πρέπει:
Να έχουν τους ίδιους τίτλους με τα αντίστοιχα εικονίδια...
Τα εικονίδια που θα μπουν στον φάκελο "forecast" πρέπει να έχουν διαστάσεις 48Χ48 πίξελς και αυτά που θα μπουν στον φάκελλο "current" να έχουν διαστάσεις 100Χ100 πίξελς.


DEMOS:

http://www.webat.gr/cc/fw/box/
(άλλα demos στην ίδια σελίδα)

Όσοι γνωρίζουν τα βασικά από wordpress, joomla κλπ ετοιματζίδικα, μπορούν να το προσαρμόσουν εύκολα:

WP Demo: http://www.webat.gr/wp/ajax-weather-box/


Για οιανδήποτε ερώτηση ΜΟΝΟ ΣΕ ΑΥΤΟ ΤΟ ΦΟΡΟΥΜ! ΟΧΙ ΠΜ!
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 390
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

"Ajax Weather Box" - Script Καιρού - V. 1.0.0

Δημοσίευση από Insurer » 14 Σεπ 2012 14:49

Εύγε Fafo εξαιρετικό και δωρεάν!!
Ειδικά τα weather modules για joomla ήταν όλα μέσω google και όντως μείναμε ξεκρέμαστοι! Εξαιτίας αυτού άρχισα να ψάχνω μια εναλλακτική και τελικά έλυσα το θέμα μου με την εφαρμογή του κυρίου gr java με όνομα Full weather page στην "αστεία" τιμή των 7€. Σίγουρα όμως θα δοκιμάσω και το πανέμορφο script του fafos με το όμορφο layout.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

"Ajax Weather Box" - Script Καιρού - V. 1.0.0

Δημοσίευση από fafos » 14 Σεπ 2012 15:00

Insurer έγραψε:Εύγε Fafo εξαιρετικό και δωρεάν!!
Ειδικά τα weather modules για joomla ήταν όλα μέσω google και όντως μείναμε ξεκρέμαστοι! Εξαιτίας αυτού άρχισα να ψάχνω μια εναλλακτική και τελικά έλυσα το θέμα μου με την εφαρμογή του κυρίου gr java με όνομα Full weather page στην "αστεία" τιμή των 7€. Σίγουρα όμως θα δοκιμάσω και το πανέμορφο script του fafos με το όμορφο layout.
Thanks... toy idiou einai kai auto, ego aplos to eklepsa san neos Promitheas :lol: Ekana kapoies allages vevea...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 390
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

"Ajax Weather Box" - Script Καιρού - V. 1.0.0

Δημοσίευση από Insurer » 14 Σεπ 2012 15:09

Θα διαφωνήσω λίγο στο "νέος", κάποιος φίλος σου σε αποκαλεί πουρό!

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

"Ajax Weather Box" - Script Καιρού - V. 1.0.0

Δημοσίευση από fafos » 14 Σεπ 2012 15:19

Insurer έγραψε:Θα διαφωνήσω λίγο στο "νέος", κάποιος φίλος σου σε αποκαλεί πουρό!
pes tou na erthei na metrhthoume se ena 100ari na doume poios einai to pouro :lol:
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

"Ajax Weather Box" - Script Καιρού - V. 1.0.0

Δημοσίευση από vassilism » 26 Σεπ 2012 22:16

fafos έγραψε:pes tou na erthei na metrhthoume se ena 100ari na doume poios einai to pouro :lol:
Σε 100άρι μπύρες ενοείς πατρίδα? :lol:

Πολύ ωραίο και αυτό, εξαιρετικό!!!

Απάντηση

Επιστροφή στο “PHP Προγραμματισμός”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης