Weathermaster's corner

Configuration needed:

This section is optional, but if you are beginers in Webmastering domain and want to follow Weather by You projects, I suggest you to read that section and install suggested softwares. Sure, many other softwares could do the job, but I recommend these softwares as they are free, easy to learn, to operate and widely spread... and because I know them quite a few, then when you'll need support for your installation, things will be a lot easier!

Text editor: Notepad++

As you probably already know, text editor is better to use than webpage editor or wordprocessor, because these software often change Cumulus essential codes (webtags) to something else. Then, this break your pages and often add unwanted "junk" to your page.

For these reasons, we have to use a Text editor. A lot of editors can fit our needs, but an easy and powerful choice is Notepad++. It's my choice because it has all editing facilities, plus many more. One of the more useful is its Syntax Highlighting feature.

Notepad++ screen with html files open and side menu component for file browsing.

Like you could see in this example, each color represent a different part of a file:

• GREEN represents comments in your pages, ex: <-- End of solar data -->
• BLUE is for normal html command, ex: <td>
• RED is for layout commands, ex: class
• PURPLE BOLD is for layout operand and identifiers, ex: td_temperature_data
• BLACK show where are Cumulus webtags, ex: <#SolarRad>
• BLACK BOLD is for where are ordinary texts to display in your page, ex: Solar Radiation
• YELLOW BACKGROUND is for special text commands, ex: &sup2 (for superscript text)
• BLUE ON PURPLE is to show command pairing (open and close), ex: <tr> ... </tr>
  (Like that you'll never forget it: with XHTML Strict standard all that is open, have to be closed!)

Also, In Notepad++, you could have many files opened at the same time, have text displayed in size you want (useful for old eyes like mine) and without forgetting Complements. Notepad++ offer many "add-ins" to extend capabilities of the editor with a wide array of extensions; You see at right a File Explorer to manage files into the editor.

Web browser: Firefox

I know that you have probably a prefered browser and feel a bit agressed by others offering the allways "lot better" browser. You're probably accustomized to your lovable browser and never thinked about quiting it for an other one... but don't be too affraid we are not talking about leaving your every days browser, but instead discover what is a "browser for developper"

Netscape (Firefox ancestor) was with Internet Explorer the oldest browser. After a long battle between IE and Netscape, Firefox is born, but not with the vision to fight against IE to be THE right browser, but to be THE browser to use for web developement! Microsoft wasn't interested to help developpers into Internet Explorer because he wanted to make some more $$$ with a software: FrontPage (Now WebExpression)

Then, in latest version (IE8+), Microsoft try to do a better job for developpers, but Firefox have more then 10 years of experience in helping freely developpers with many thousands extensions for Firefox, mainly geared on developpers! Then the big (IE) boat has changing his way, Opera is prettier, Chrome is faster... But Firefox IS the leader in web developpement.

Then, Like you'll discover, Firefox is made like many other browser with navigation bar, search bar and web pages tab to have more then one page open at the same time. What is special is its extension catalog, that you will find in the Tools menu. I present you here my favorite ones. Don't be surprised that some parts of these images are not in English, as I am French... and my Pc too!

HTML Validator

One important thing to be referenced better by search engines is to have compilant pages without errors. To do so, we have to do tedious task to verify them with validator.w3.org site. This official web page validator could point errors on your pages.

With HTML Validator, you don't have to send pages anymore and you will have far more infos on your errors. If you check above page, you see in upper part an highligted line to point on which line is located your error. Below is divided in 2 boxes: at left, you see brief info about what is wrong in your page. Yellow indicate a warning and Red show an error; at each line you have error/warning type, on which line and column it occurs and a brief description of that problem.

On the right side, you see for each problem a detailed explanation; a red icon show an example of what could be your error, and in green what is the way to correct that example problem. Also, you have a link to more detailed explanation and an other link to the official rule explanation that applies to your problem.

Finally, you have a link to "Clean up the page"; this link open a new frame that show you 4 tabs: First is your code cleaned from errors, then, your original page with errors not corrected, in 3rd tab you see the page corrected as seen by visitors and the last tab for original page (with errors) as seen by visitors too. As these automatic corrections couldn't solve correctly all possible errors, you have to confirm if proposed corrections are right for you! This tool could save you many headaches!

Firebug

Firebug is a valuable swiss knife tool, so powerful that it has its own list of extension installable in Forebug extension itself! But to stay basic, this tool deserv 2 main needs; check layout and see what is wrong! Most practical feature is to "walk" thru your code and see on your page what do each of your line. You could work with page divided with your browser page and the lower part for Firebug or in any time open Firebug in a separate page (like a separate program) to work side by side... Take note that I'm not responsible if you "need" 2 monitors as this function could be "essential" for you!

When walking in your code, you will see any margin and padding applied to all parts, useful to find a problem in page layout! Console tab show you if a problem ocur with a javascript, and Script tab could execute your script line by line to find where is the problem! The "Net" tab show you each and every part of you page that have to be downloaded to build your page; Html, Php, Css, Scripts, Images with time elapsed for downloading each of these files. Then you could see if an image is taking too long to be downloaded fastly due to its size or if a library could not be found!

YSlow

YSlow, is an extension to add to Firebug and it answer to 1 question; Why Slow? This utility analyse every part of your page and give to them a "Grade" depending of more then 20 factors and give you some informations on each aspect needing attention. It gives total components needed to display your page and total size of your whole page first time it is visited (Empty cache) and subsequent visits (Primed cache).

Finally, it offer some tools to accelerate your page by shrinking .css and .js files (in a "minified" format: comments or white spaces removed). Also it include an image optimizer that check your page to find every images and try to reduce their size. It display result as current size, compressed size and space saved, optionnaly you could download "squeezed" files.

Web Developer

Last tool to extend Firefox is Web Developer, an other useful swiss knife tool. As a browser bar it adds many buttons to work on your page. Picking only a few ones, I like these:

• In first button "Disable" (Not shown) I love "Disable cache" to avoid problem hidden by cache.
• In images button, I like to view images size (kb or width).
• Into information, I like Informations on colours as it show all colorsused in that page.
• In Miscellaneous, Ruler help me often to measure a part of my pages (to include an image).
• In Outline, table layout is easier to verify outlined... or find "Not recommended" commands.
• Resize is useful when you have a big (or 2) screen, to display your page like on smaller screen.
• Finally, Tools (Not shown) include all option to validate Htlm, Css, Links and accessibility facility.

Ftp client: FileZilla

To manage a web site, an essential software is the transfer program. To do that job, a popular choice is FileZilla. This software is free and is available since a long time.

You find on it most useful feature:

• Side-by-side folder display to see all files on you Pc (local) and on your website (remote).
• Site Manager (adress book) to manage your sites and Quickconnect for one time site logging.
• Synchronized directory browsing, to be always in same directore locally and remotely.
• Supprot transfer resume, to continue interupted transfers.
• Comparaison between local and remote folder.

Many other softwares could be a great choice for file transfer as these sotwares are doing the same job, in a very similar way.

Developement environement

As you see in this section, to work and have fun with your website, you need to have some basic tools grouped together to form an efficient developement environement. I've presented you an all free solution to work like professionals. These softwares are easy enough to be used by beginers, but powerful enough to follow you all the way in your web skills evolution.

But if you want to go a step farther, I'll present you a last and very powerful tool to speed-up your web developements; Virtual Servers.

Optional step... WAMP Servers!