Change Your Website’s Appearance With The Weather
This post is based on this tutorial. However, I made a few modifications to the way it’s displayed.
The PHP code is the same and can be seen below:
<?php /* get the weather from Yahoo */ $data = get_data("http://weather.yahooapis.com/forecastrss?p=XXXXX&u=f"); $weather_class = format_result(get_match('/<yweather:condition text="(.*)"/isU',$data)); /* format the result */ function format_result($input) { return strtolower(str_replace(array(' ', '(', ')'), array('-', '-', ''), $input)); } /* helper: does regex */ function get_match($regex,$content) { preg_match($regex,$content,$matches); return $matches[1]; } /* gets the xml data from Alexa */ function get_data($url) { $ch = curl_init(); $timeout = 5; curl_setopt($ch,CURLOPT_URL,$url); curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout); $xml = curl_exec($ch); curl_close($ch); return $xml; } ?> |
The only thing you have to change within the PHP is the line below:
$data = get_data("http://weather.yahooapis.com/forecastrss?p=XXXXX&u=f"); |
Replace the XXXXX with your zip code.
The PHP code goes out and grabs the weather condition from Yahoo. Then you can define a class with it like this:
<div class="header <?php echo $weather_class; ?>"> </div> |
After that, we need to style it with CSS and tell it what images to use as the background. With my CSS, I actually include all the conditions, instead of just a few.
.cold,.dust,.foggy,.haze,.smoky,.blustery,.windy,.sunny,.fair-day,.hot{background: url('../images/weather/clear.png') no-repeat top right} .clear-night,.fair-night{background: url('../images/weather/clear-night.png') no-repeat top right} .partly-cloudy-day,.partly-cloudy{background: url('../images/weather/few-clouds.png') no-repeat top right} .partly-cloudy-night{background: url('../images/weather/few-clouds-night.png') no-repeat top right} .cloudy,.mostly-cloudy-day,.mostly-cloudy-night{background: url('../images/weather/overcast.png') no-repeat top right} .tornado,.tropical-storm,.hurricane{background: url('../images/weather/severe-alert.png') no-repeat top right} .hail,.sleet,.thundershowers,.mixed-rain-and-hail{background: url('../images/weather/showers.png') no-repeat top right} .mixed-rain-and-snow,.mixed-rain-and-sleet,.freezing-drizzle,.drizzle,.freezing-rain,.showers,.scattered-showers{background: url('../images/weather/showers-scattered.png') no-repeat top right} .mixed-snow-and-sleet,.snow-flurries,.light-snow,.light-snow-showers,.blowing-snow,.snow,.heavy-snow,.scattered-snow-showers,.snow-showers{background: url('../images/weather/snow.png') no-repeat top right} .severe-thunderstorms,.thunderstorms,.isolated-thunderstorms,.scattered-thunderstorms,.isolated-thundershowers{background: url('../images/weather/storm.png') no-repeat top right} |
I’ve also packaged up all the icons that I used. There are three different sizes that you can choose. You can download them from here. They are originally from the Tango icon set.
If you want to see it in action, you visit this site and look in the upper-right corner. If you have any questions, let me know.
Impressive Website Navigation Menus
As a web designer, I view websites differently than the average user. I notice the physical layout, navigation menus and other interactive aspects of the site. I think it’s interesting to see how other people do things differently. I will admit something to you… I’m not very creative at all. Sometimes, I sit and wonder how that designer came up with something so unique and interesting. Designing websites is so much fun for me and I love to learn new things, but it’s so hard to force creativity. Anyways, I thought it would be a good idea to post some navigation menus that I personally enjoyed. These are in no particular order.
…and last, but certainly not least…
Ok… The last one might not be as great as the others, but it’s mine so I thought I’d add it.
Google AdSense – Section Targeting
What is section targeting and how do I implement it?
Section targeting allows you to suggest sections of your text and HTML content that you’d like us to emphasize or downplay when matching ads to your site’s content. By providing us with your suggestions, you can assist us in improving your ad targeting. We recommend that only those familiar with HTML attempt to implement section targeting.
To implement section targeting, you’ll need to add a set of special HTML comment tags to your code. These tags will mark the beginning and end of whichever section(s) you’d like to emphasize or de-emphasize for ad targeting.
The HTML tags to emphasize a page section take the following format:
<!-- google_ad_section_start --> content goes here <!-- google_ad_section_end --> |
You can also designate sections you’d like to have ignored by adding a (weight=ignore) to the starting tag:
<!-- google_ad_section_start(weight=ignore) --> content goes here <!-- google_ad_section_end(weight=ignore) --> |
You can use section targeting to make suggestions about as many sections of a page as you like. However, please be aware that we can’t guarantee results, and that it may take up to 2 weeks before our crawlers take into account any changes you’ve made to your site.
In order to properly implement this feature, you’ll need to include a significant amount of content within the section targeting tags. Including insufficient content may result in less relevant ads or PSAs. In addition, please keep in mind that this feature should only be used to emphasize significant sections of your site’s relevant content. It is against our program policies to manipulate the ad targeting to result in ads that are not relevant to the content of your pages.
https://www.google.com/adsense/support/bin/answer.py?answer=23168
Firefox Add-on: Firebug 1.3.0
If you use Firefox (which you should be) and you’re a web designer, then you need to install this free tool. I just recently started using Firebug when my layouts became more advanced and included more css.
“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”
After installation is complete, you should see a little bug icon at the bottom of the Firefox window (see image below). With the desired page in your browser, click on that bug icon to bring up the Firebug workspace. You can also press F12 to get the workspace up. To open it up in a new window press Ctrl + F12.
Once the workspace is up, you can navigate your HTML/CSS in the left section and then see the style properties in the right section. Something that I just learned is that you can click on “Layout” tab on the right and it will show you a picture of the various divisions/blocks. That comes in handy when making pixel-perfect layouts.
While you navigate the code in the left window, you can hover on different tags and it will highlight the corresponding item on the page. If you click that tag, it will show you the properties on the right. You can also click “Inspect” on the top left hand side and that will let you hover over an object on the page and it will highlight the corresponding code. As you can see from the image below, I’ve hovered my mouse over the “
For me this feature has proved to be a tremendous help when dealing with many nested divisions on a page. I’m sure that there are many features that I haven’t discovered yet, but so far this tool gets an A+ in my book.
For more information, or to download the add-on, please visit Firebug’s home page.
http://getfirebug.com
Using 301 redirects to avoid duplicate content
It has been brought to my attention that having a website that is accessible with and without the “www.” before the domain name is BAD!!! The reason for this is that search engines will consider this as two seperate sites that have duplicate content. The other problem is that an index.html file would also be seen as seperate page to a search engine. In order to understand this a little better, see the example below:
- http://bfxmedia.com
- http://bfxmedia.com/index.html
- http://www.bfxmedia.com
- http://www.bfxmedia.com/index.html
In the example above, all of those different URLs would have displayed the same page. In order to resolve this problem, use this Redirect Check SEO Tool. After you submit your website for testing, it will run through all the variations of the URL and give you the status code for each one.
To redirect all traffic from http://bfxmedia.com to http://www.bfxmedia.com, you would add the lines below to your .htaccess file:
RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.bfxmedia\.com
RewriteRule (.*) http://www.bfxmedia.com/$1 [R=301,L] |
Although, that didn’t work for me because of the way my subdomains are redirected. I had to use this instead:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^bfxmedia.com [NC]
RewriteRule ^(.*)$ http://www.bfxmedia.com/$1 [R=301] |
To redirect http://www.bfxmedia.com/index.html (and all other default page variations) to http://www.bfxmedia.com, you would add the lines below to your .htaccess file:
RewriteEngine on
Options +FollowSymLinks
RewriteCond %{THE_REQUEST} ^.*/index\.html
RewriteRule ^(.*)index.html$ http://www.bfxmedia.com/$1 [R=301]
RewriteCond %{THE_REQUEST} ^.*/index\.htm
RewriteRule ^(.*)index.htm$ http://www.bfxmedia.com/$1 [R=301]
RewriteCond %{THE_REQUEST} ^.*/index\.php
RewriteRule ^(.*)index.php$ http://www.bfxmedia.com/$1 [R=301]
RewriteCond %{THE_REQUEST} ^.*/index\.shtml
RewriteRule ^(.*)index.shtml$ http://www.bfxmedia.com/$1 [R=301]
RewriteCond %{THE_REQUEST} ^.*/index\.asp
RewriteRule ^(.*)index.asp$ http://www.bfxmedia.com/$1 [R=301]
RewriteCond %{THE_REQUEST} ^.*/index\.aspx
RewriteRule ^(.*)index.aspx$ http://www.bfxmedia.com/$1 [R=301]
RewriteCond %{THE_REQUEST} ^.*/index\.cfm
RewriteRule ^(.*)index.cfm$ http://www.bfxmedia.com/$1 [R=301]
RewriteCond %{THE_REQUEST} ^.*/index\.pl
RewriteRule ^(.*)index.pl$ http://www.bfxmedia.com/$1 [R=301]
RewriteCond %{THE_REQUEST} ^.*/default\.asp
RewriteRule ^(.*)default.asp$ http://www.bfxmedia.com/$1 [R=301]
RewriteCond %{THE_REQUEST} ^.*/default\.htm
RewriteRule ^(.*)default.htm$ http://www.bfxmedia.com/$1 [R=301] |
For the example site bfxmedia.com, I have corrected all the problems and now only one URL displays my “home” page. All the other variations are safely redirected.
Useful Links:
Redirect Check SEO Tool
SEO advice: url canonicalization
Canonical and Duplicate Versions of Content
Get Notified When We Post Updates
