Our new website

This is the second website we’ve built for Sonika Studios Inc. and this one is a big  improvement from the last one. We’ve trimmed out the long text, simplified it, and made it more about the visuals and our clientele – after all that’s what really tells you what we’re capable of, and what we can offer you.

Key features of our new site:

• jQuery – we eliminated all needs for flash animation by using advanced jQuery animation. This ensures that our site looks and works gorgeously on all platforms, including the iPad and iPhone and all computers.
• Bigger photos – our portfolio items and artwork are displayed in much larger visuals.
• Social Media – we’ve incorporated some of the most advanced social media integration methods for Facebook & Twitter integration.

We would like to extend our thanks to all of our clients, both newer and older (and future ones) for growing with us in the past 5 years.

You can find us on Facebook at our company page, and also follow us on Twitter through @sonikastudios.

We will bring a fresh new vibe to the industry. Out with the old designs with too much clutter, lines, and boxes. In with our new designs that are clean, simple, elegant, user-friendly, and never gets old! Blend this with amazing functionality and cross-browser friendliness, and we can provide you with an excellent solution for your realtor websites.

Brixwork for Realtors features:

• Unlimited listings, and photos (as much as your web hosting account can physically hold!)
• An affordable monthly rate of $50 (plus applicable taxes)
• Easy to use listing updating system with tabs for easy navigation
• Built-in image cropper for precise thumbnail cutting
• AJAX-based user interface means faster, more intuitive navigation and control
• Video tour, PDF feature sheet, Floorplans uploadable
• Built-in Google Maps for showing the precise location of the listing, as well as streetview, and driving directions

By March, we will be offering free trials of the websites to feature our beautiful templates. Below are some screenshots of the back-end that our clients will enjoy.

Brixwork Product List

Brixwork Edit Window

1. We used to try to get people to stay on longer, and click on more pages until they decide to call us. It was a marketing hook. Nowdays, many people use their iPhones instead of dialing 411 or using Yellowpages. This means that it’s a good idea to have your phone number (in a standardized format so that iPhone users can click and dial) clearly visible on the very front page. Sometimes I go as far as putting the key contact info on the top of the website, close to the logo! Look at the top-right corner of the site you are on right now.
2. Putting interactive flash on the top of the front page used to be hip. It was a cool thing to have without compromising search engine placement. This could be a rotating banner, or a featured product intro – anything. Now keep in mind that an iPhone user will see a big blank with a tiny blue question mark box (that’s what the iPhone shows where Flash animation should be). Now we’ve moved on to more intelligent ways of handling it – using nifty Javascript frameworks such as jQuery and Mootools, we can create rotating banners and numbered headlines without using Flash!
3. To protect against spam, we often skipped displaying the email addresses, and used a contact form instead. But the contact forms often look tiny on the iPhone screen, and people would much rather use the regular email app on the iPhone rather than the formmail. So, now we use both. How do we prevent email addresses from being harvested for spam? We use the email address munger Javascript code which is very effective in keeping the spambots at bay.

To take things even further, you can use CSS styles that apply to specific media only. By defining “handheld” as the media type, you can choose to hide or show certain areas of the site, as well as change the colors and dimensions. For more information on using media-specific CSS stylesheets, check out the following links:

• http://www.howtocreate.co.uk/tutorials/css/mediatypes
• http://www.alistapart.com/articles/pocket/

Of course, Sonika Studios Inc. is an industry leader when it comes to applying WordPress as a CMS in order to deliver self-managed websites to clients who want them, and you can read more about how we use WordPress as a CMS here. WordPress and its plugins allow an excellent user experience for the business owner, without the headache of learning the vast complexities of other off-the-shelf CMS solutions such as Joomla or Drupal.

As a lighter alternative to our own semi-custom developed CMS platform, Brixwork, a professionally modified edition of WordPress can deliver you the results you need for a simple yet powerful CMS. Of course, if you want full-strength and a lot of custom development options, our Brixwork platform is your answer, but more than half of our website clients can sufficiently manage their sites with a WordPress system, so you could be one of them!

Wordcamp Fraser Valley is being held on August 22nd, between 9AM to 5PM, at the Surrey SFU campus. It’s near the Surrey Central Skytrain station, so either drive down, or hop on the Skytrain to get there! Tickets and other details can be found at the Wordcamp Fraser Valley Site.

For this exercise, you only need to know a few PHP commands. To open a PHP code snippet, you use <?, and to close, ?>. In some cases, opening with <?php is recommended, but I generally skip it – it’s not critical.

Once a PHP command is opened, here’s some basic commands. You can also look at this PHP Tutorial on W3Schools.com.

$: The dollar sign ($) denotes a variable. You can store any value you want to use later in the page, and use it repeatedly. For example,

$myName = "Jeff Kee";

This code stores the string “Jeff Kee” into the variable $myName. Note that ALL PHP LINES MUST END WITH ;. You can put multiple commands in one line, but each command MUST END WITH a ;. The exceptions are loops, but that’s too advanced for this tutorial.

echo: The echo command literally echoes out what’s typed out. You MUST enclose all strings in quotation marks, OR type in variables.

<title><? echo $myName; ?></title>

This would output

<title>Jeff Kee</title>

on your browser! Very simple eh? Now, if you wanted to put some strings together to make it a bigger piece:

<?
$myFirstName = "Jeff";
$myLastName = "Kee";
// the slashes indicate a comment line that is not shown on the browser, nor processed by PHP.
// now we intend to write out your name in a formal format:
echo 'First Name: <strong>'.$myFirstName.'</strong>, Last Name:<strong>'.$myLastName.'</strong';
?>

All that code above, will simply output this:

First Name: Jeff, Last Name: Kee

Simple eh? Note that you can connect strings (the stuff bewteen the ‘ ‘, which are not put into variables and used one-time only) and variables (the stuff that starts with $, which are pre-defined in the first two rows) using the period (.) – it’s like the plus sign (+) in Javascript. Missing the period will cause an error.

include: The include command will include another file (could be .php, or .html.. whatever you want) and put it straight in AS IF THE ENTIRE INCLUDED FILE IS PART OF THE MOTHER FILE. This is very different from calling in CSS files using the <style> tag, or external .js files using the <script> tag. This is literally splicing the code together to PRETEND that all the code was written into one file! You’ll understand this more later.

Now that we’ve covered the very very basics of PHP…

Here is the most common issue I see when I take over a website that was previously managed by somebody who only used HTML:

No inclusion of files!!!

Let’s say you have 10 pages to a site. If they all have the same menu structure, and the same footer structure, you do not NEED to make them all completely separate files. If you do that, you may end up having to change 10 files if you need to add a new menu item, or change some code near the top of the page. The best way I separate files is using header.php, page.php, and footer.php. Having a settings.php file as well as start.php and functions.php is optional too, which I will expain in another document altogether.

Let’s look at page.php:

<?
$titlevar = 'Company Information';
$descvar = '';
$keywordsvar = 'micromatter, ';

include 'header.php';
?>
 <div id="main_content">
 <h2><? echo $titlevar;?></h2>
 <p>MICROMATTER&trade; is an operating division of Advanced Applied Physics Solutions <a href="http://www.aapsinc.com/" target="_new">(AAPS)</a> and specializes in thin film  deposition technologies. </p>

 <p>AAPS is a nationally designated Centre of Excellence for Commercialization and Research, established by <a href="http://www.triumf.info/" target="_new">TRIUMF - Canada's National Laboratory for Particle  and Nuclear Physics</a>. AAPS&rsquo; mission is to improve the quality of life of people around the globe by developing  technologies emerging from physics research. To achieve this objective, AAPS collaborates with academic, government, and industry stakeholders to develop promising technologies.</p>

 <p>MICROMATTER Co. was originally founded in 1968 to manufacture <a href="dlc.php">thin carbon foils</a> for the scientific community. Over the  years, the business has expanded to include accelerator target foils  and <a href="xrf.php">X-ray fluorescence (XRF) calibration standards.</a> </p>

 <p>In  February 2009, AAPS acquired the assets of MICROMATTER Co. and is  continuing the company&rsquo;s forty-year commitment to manufacturing  excellence. MICROMATTER&trade; customers will continue to receive  the high-quality products that they have come to rely upon. In addition, the combination of MICROMATTER&rsquo;s unique vapor  deposition methods and AAPS&rsquo; established capabilities in diamond-like carbon synthesis create technical synergies that will accelerate AAPS&rsquo; research and development objectives in several key areas.</p>
 <?
include 'footer.php';
?>
 </p>
</div>

As you can see, this page does not have your typical <html> opening tag. But note that at the very top of the page, I have the section title defined in a variable like this:

$titlevar = ‘Company Information’;

Each of these pages you generate will have a different title to it.

Now let’s look at the header.php file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><? echo $titlevar;?> : MICROMATTER</title>
<link rel="stylesheet" type="text/css" href="micromatter.css">

<meta name="description" content="Micromatter specializes in thin foil deposition technologies. Carbon foils, carbon films, XRF equipment, XRF calibration standards." />
<meta name="keywords" content="carbon films, carbon foils, carbon, diamond-like carbon foils, dlc, custom coatings, XRF calibration standards, XRF equipment, micromatter, aaps, triumf, UBC, Vancouver, Canada, physics, research, scientific research" />

<meta http-equiv="description" content="Micromatter.com, operating division of AAPS, specializing in Carbon Foils, Carbon Films, XRF Calibration Standards, and other technical innovations" />
<meta http-equiv="keywords" content="carbon foil, carbon film, carbon, cyclotron, physics, nuclear, research, lab, lab products, XRF, XRF Calibration Standards, SEM, DLC, Diamond-like Carbon, diamond, imitation diamond, particle strippers, carbon strippers" />

</head>
<body>
<div>
 <div id="banner"><? echo $settings['company']?><br />
 <? echo $settings['address1']?><br />
 <? echo $settings['address2']?><br />
 Canada<br />
 Phone: <? echo $settings['office']?><br />
 Toll Free: <? echo $settings['tollfree']?><br />
 Fax: <? echo $settings['fax']?><br />
 <script type="text/javascript">infoEmail();</script>
 </div>
 <div id="top_nav">
 <a href="<? echo $settings['sitepath']?>"><img src="images/home.jpg" title="MICROMATTER.com Home Page" border="0" style="border:none;" /></a>
 <a href="/company.php"><img src="images/company.jpg" title="Company" border="0"/></a>
 <a href="/products.php"><img src="images/products.jpg" title="Products - Carbon Foils and XRF Calibration Standards" border="0"/></a>
 <a href="/custom_coatings.php"><img src="images/services.jpg" title="Custom Coatings" border="0"/></a>
 <a href="/contact.php"><img src="images/contact.jpg" title="Contact MICROMATTER" border="0"/></a>
 </div>
 <div id="content">

Now you see what looks like the beginning of an HTML file. This file contains the <head> tag, as well as the top portion of the <body> tag that contains the menus and such. By including the header via include 'header.php' as you saw in page.php, you now are sourcing the entire beginning to your pages via one single file. If you need to add a menu item, you simply edit the header.php file, rather than going through all the HTML files you have!

Also note the <title> tag. Having the page section title in each of the pages is a good practice for SEO. However, you’ll wonder how this works if I only have one header.php file. This is where that code snippet comes in: $titlevar = 'Company Information';. Each page can have a different $titlevar assigned to it. And then using the <title><? echo $titlevar;?> : MICROMATTER</title> snippet, you can then have variable page titles fore each section of your site.

Now, you can imagine what the footer.php file will look like:

</div>
 <div id="footer">MICROMATTER is an operating division of Advanced Applied Physics Solutions<br /><br />
<p align="center" style="color:#333;">Copyright &copy; 2009, All Rights Reserved.</p></div>

</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1422398-14");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>

In most cases I will be using a superfooter with more linkes in the footer.php. But for the sake of this excercise, I will keep it simple. Note the Javascript at the end, before the end of the </body> tag. That’s Google Analytics code. If you have the typical HTML file only setup, you will have to embed this Javascript as many times as you have files! However by having one universal footer.php file for your site, you only put it in once, and all the pages will have it.

A brief look at jQuery – it’s a javascript framework that allows you to quickly manipulate your document, while providing stylish animation effects without the need for flash. jQuery also has a daughter product called jQueryUI – a user-interface skin module that resides on top of jQuery. It also contains AJAX modules, nifty tab plugins, popup layer scripts, and more. jQuery, coupled with the jQueryUI platform, makes UI development and skinning quick and easy.

Now let’s look at Mootools – Mootools is more powerful in terms of string manipulation, array objects handling, and other deeper javascript applications. It’s AJAX functions support full XML, JSON, HTML, as well as regular text objects being returned, which makes it a more robust framework for programming upon. For more complicated and full-featured javascript applications, I would still stick with Mootools.

Which is better? I do not have an answer to that. Each framework has its own purpose, with different depths of application. When you want quick UI development with fast visual effects application, choose jQuery. If you need a more robust AJAX/JSON application, or a complicated Javascript application, go for Mootools for the heavier functions. I do find that Mootools is slightly more time consuming when it comes to visual effects applications.

Both javascript frameworks have plenty of 3rd party plugins developed (such as photo galleries and more!). Look up the plugins before you start developing, in order to choose the right framework from the beginning. Both frameworks are also compatible with all major browsers (IE6+, FF, Safari, and Opera).