Internship Final Thoughts

Six weeks of internship has past by at the speed of light. I am very thankful Wasserman + Partners Advertising has given me this opportunity. I’ve learned a lot over the past 6 weeks. Not only in the technical area (Symfony, Facebook API, Subversion, WordPress, etc.) but also the workings of an advertising agency.

The Interactive Design program from Capilano University has taught me a broad range of skills. Even though I was a Web Developer Intern, when the opportunities came, I was able to help out in the other areas (e.g., IA, Adobe Photoshop, etc.). Sure, I was asked to do something I didn’t know or taught. No school teaches everything you need in the real world. Sometime you have the luxury to ask your colleagues and or friends but sometime you do not. It is best to just accept the challenges and dive into the deep end of the unknown and learn on your own. Information / knowledge is readily available at your fingertips. You just have to google it.

Work programs like internship provides students the opportunity to see if what they imagine about a job is really what they expect / like. Internship also provides great opportunity for potential employers to find up-coming talents. I only wish Interactive Design at Capilano University offers a Co-Op program instead of an Internship. Co-Op provides multiple work terms and each work term is at least 4 months long. You get the opportunity to try out different type of jobs. I really enjoyed it when I was studying my Computer Science degree at Simon Fraser University.

Internship — Week 6

For my last week of internship (6th week), I got to do the followings:

• Learned more about Symfony
• Built more things with Symfony
• Learned more about Subversion (User Administration)
• Setup staging / testing environment for up-coming campion website
• More game playing (I mean testing)
• Slicing up mockups done in Adobe Photoshop into web images

Symfony: Getting the hang of generating data model, forms, filters, and modules in Symfony. Here are the general steps I have developed:

1. Define tables in database
2. Reverse engineer database table definitions to /config/schema.yml
   $ php symfony propel:build-schema
3. Generate the necessary models
   $ php symfony propel:build --model
   Note: If you do not want to regenerate all the models of all the tables in the database, make sure you trim /config/schema.yml. Though, don't forget to save a copy of it before trimming it and restoring it after these steps.
4. Generate the necessary filters
   $ php symfony propel:build --filters
5. Generate the necessary forms
   $ php symfony propel:build --forms
6. Generate the necessary modules
   $ php symfony propel:generate-module \
   --non-verbose-templates --with-show \
   <appName> <moduleName> <modelName>
   Where
   
   <appName> = the name of the application
   <moduleName> = the name of module for the application
   <modelName> = the name of the model for the module
   Note: If you don't know already, the black slash ("\") indicates the command continues on the next line (UNIX / Linux).
   Repeat this until all modules are generated.
7. If administrative modules (pages) are required, generate them by
   $ php symfony propel:generate-admin \
   --module=<adminModuleName> <appAdminName> <modelName>
   Where
   
   <adminModuleName> = the name of the administrative module for the application (to make things easier, use the same name as the non-administrative module if they are related)
   <appAdminName> = the name of the application for administrative purposes (assuming this is related to the non-administrative application, then just suffix that name with "admin" or "_admin")
   <modelName> = the name of the model for the administrative module
   Repeat this until all administrative modules are generated.

Subversion: If Subversion is configured to use HTTP, it is still possible to restrict access by user/password login. The following discussion is based off Apache web server.

As part of Apache configuration for Subversion you can direct Apache to a specific user/password file. Typically this file ends with .passwd. But storing user/password in plain text is pointless. No need to worry. There is a command you can use to create user and encrypted password entries in this file. Though you need to have root / administrative access to the server.

Here is the command:
$ sudo htpasswd -mb <userPasswordFile> <user> <password>
Where

<userPasswordFile> = fully qualified (full path) name of the user/password file configured in Apache for Subversion.

<user> = user id to be used for login

<password> = plain text format of the password

How does this encrypts the password? It's done by the option -m (MD5 encryption method). If you would like to use another encryption method, change -m to the corresponding option (-d: CRYPT and -s: SHA).

Option -b tells the system to use the password specified in the command line. Otherwise, you will be prompted to enter the password.

To delete a user from the file, execute the following command:
$ sudo htpasswd -D <userPasswordFile> <user>

Internship — Week 5

My week 5 internship ended well (got the hang of things with Symfony and Subversion and overall it was a productive week). I got to do the followings:

• Learned more about Symfony
• Built something using Symfony
• Learned more about Subversion
• Reconstructed / rebuilt a Subversion Repository
• Played (I mean tested) some games
• Data extraction

Symfony: Symfony documentation talks about defining database schema using YAML. Symfony uses the YAML definition (stored in /config/schema.yml) to generate data models, filter, forms, and modules. If you don't want to learn 'Yet Another Markup Language', you can define the database schema using the database of choice and then use Symfony reverse engineer the database into YAML. Though, I found a problem with this process (Symfony with Propel). ENUM data type was lost. Meaning, it does not generate the enumerated values defined in the database and it translated ENUM to CHAR.

$ php lib/vendor/symfony/data/bin/symfony propel:build-schema

The above command will reverse engineer all tables in the database.


Subversion: Apparently Subversion embeds the repository's URL in a file called entries (inside a hidden folder called .svn). If the repository has to be rebuilt from production source code (.svn folders must be in production as well) for whatever reason, it could difficult under the following conditions:

• Production source code was copied from Working Copy that was checked out with URL of localhost
• No access to original Working Copy's computer

The process I used to rebuild the repository was as follow:

• Copy production source code to a local computer (because Subversion information is in the production source code, this copy becomes a Working Copy
• Because Subversion information on the repository is based off localhost, I need to trick my local computer to think localhost as the Subversion repository on the server
• To do this, modify the local computer's hosts file
  
  • comment out: 127.0.0.1  localhost
  • add:      999.999.999.999  localhost
  where  999.999.999.999  = IP address of Subversion repository server
  
• Using an Subversion client (I used NetBeans IDE (Integrated Development Environment)) push the production source code to the repository (use the Update command) — may have to Merge changes (always accept local changes)

NetBeans: NetBeans IDE is not bad. Downloading the package was a lot less complicated than Eclipse (didn't have to deal with different package versions (for Java, PHP, JavaScript, etc.)). Setting up the project was a bit confusing for a new user. Subversion integration is good (though the setup isn't as straight forward). Contextual menu made it easy to check for changes or committing changes. The comparison functionality is user friendly.

Internship — Week 4

My week 4 internship was fun, nerve-racking, and satisfying. I got to do the followings:

• Learned more about Symfony
• Learned more about Facebook's Social Plug-ins, Dialogs, FQL (Facebook Query Language), and JavaScript SDK
• Participated in discussions on an up-coming web/Facebook game and contest web/Facebook app
• Learned about Subversion
• Mapped a Hori Real Arcade Pro V3 SA game controller to control the mouse and keyboard in a Microsoft Windows 7 touch-screen computer
• Learned about DNS (Domain Name System) / NS (Name Server Record) Maintenance
• Launched Granville Island Brewing's new website

Symfony: Symfony provides a way for an application to sets its global configuration / settings. They are like global variables. All you need to do is enter them in app.yml and save this file in apps/AppName/config/.

As much as I appreciate what Symfony offers, I really question the value of it on websites with 85% to 90% static pages and less than or equal to 5 database tables. Website that uses the database tables for simple data storage not transactional like e-commerce.

One of the argument I have been given (and read online) is that the framework will prevent SQL injection. As it so happened this past week, we all heard / saw one of the largest SQL injection attack. So, does a framework like Symfony can prevent this kind of attack? Is it worth the extra complexity in development? Is it not enough to use mysql_real_escape_string function (in PHP) or equivalent?

Another argument I have read is because it is Object-Oriented (OO). I think this is similar to Beta versus VHS or Blue-Ray vs High-Definition DVD. In my opinion, Object-Oriented programming / development Does Not make applications better. Nor does Structured Programming / development. I truly believe skilled designers and developers, experience, and proper testing make good applications. OO, Structured Programming, Symfony, etc. are just methodologies / tools.

If you have an opinion on this, please comment on this blog entry.



Subversion: is an open source version control system. By the way, did you know it comes installed on Mac OS X? A version control system comes in handy when multiple people are working on the same set of files / documents. It provides a check-in / check-out service, versioning (maintaining all versions of the same file), comparison of different versions, merging of different version, etc.

So far, I haven't found a good open source GUI (Graphical User Interface) client for Mac OS X or Ubuntu Linux or web based. Yes, I'm not much of a command prompt person. Why memorize commands when you can do things via nice GUI.

If you know of a nice GUI client (anything but Microsoft Windows) that does everything (i.e., create a repository (one that can be access via http or https with user authentication), import the original set of files, maintain different environments (i.e., development, testing, production), maintain product releases (i.e., release 1, release 2, etc.), etc.), please let me know via comment of this blog entry.



Fun and Game: Playing games as a job was fun and attention getter. Before I was able to play, I had to figure out how to make a Hori Real Arcade Pro V3 SA game controller manipulate the mouse and or the keyboard in a Microsoft Windows 7 touch-screen PC. This particular game controller was made specifically for Sony PS3 and does not come with drivers or documentation. After Googling forum after forum and trying a few emulation software, Success.

It turns out the game controller's Stick Control Toggle switch was the magic switch. By switching it to the middle, the emulation software was able to detect the stick movements and map them to move the mouse and or press keys.

Game Time: 2 of the 3 prototype games were harder than expected (this was not just my opinion). For the final product, these games will be dialed back to make it a bit easier as they are meant to be played within 1 minute each.

Next week, I will configure another touch-screen PC with a second Hori Real Arcade Pro V3 SA game controller. More play time. :-)



Challenge: Being the only web developer on staff is challenging. Asking a couple external resources for advice was a lot harder than I thought. They explained the options but they never provide a solid direction. They all say, "It's up to you. Do what you are comfortable with." Well, being new in the field (hence, interning) comments like these are definitely not helpful. I thought experienced professionals would be more forthcoming with their wisdoms / guidance.

I have come to realize part way through this week I will have to make my own decisions on how things will be done. I just have to rely on my gut-instincts, my past experience, and what I've learned in school.

Internship — Week 3

My week 3 internship was as interesting as the previous weeks. This past week I:

• Learned more about Symfony
• Learned how to integrate most recent Twitter tweets in a website
• Learned how to change the number of recent entries in the Recent Content block in Drupal 6
• Participated in a couple of brainstorming/walk-through sessions on an up-coming contest web/Facebook app
• Investigated/experimented with Facebook's Social Plug-ins, Dialogs, and FQL (Facebook Query Language)
• Investigated/experimented with Omega (960gs & HTML5) Theme (in conjunction with Context, Delta, and Omega Tools modules) for Drupal
• Investigated/experimented with mobile device friendly WordPress and Drupal themes

Symfony: Why learning so much about Symfony? One of the projects is to refresh an existing website. This website was built with Symfony. It also has an integration with WordPress.

After  having gone through the beginner's tutorials looking at existing source code isn't too scary. Okay, at least until you see something those beginner's tutorial never talked about. This is exactly what happened. I was staring at some strangely named PHP files (all prefixed with an underscore) are being executed but I couldn't see the inclusions of these PHP files. I can tell the code inside these strangely named PHP files being executed. After some Googling / digging through Symfony's documentation, my Symfony lightbulb became brighter.

It turns out that an underscore ("_") prefixed PHP file name indicates that it is a Symfony's Partial. A Symfony Partial is a PHP file containing re-usable chunk of template code. They are stored in the module's templates directory and they are referenced in other PHP files by the Symfony function "include_partial." For example:

Module: mymodule
Partial: _mypartial.php
Usage: include_partial('mymodule/mypartial');



Twitter: There are a couple of ways to get your (or someone else's) Twitter feed to your own (or someone else's) website. One of the way (might be an older method) is retrieve the tweets as an RSS feed. Twitter provides a JavaScript to parse the tweets from the feed (in JSON format) into an un-order list (with id "twitter_update_list"). You will have to style the content yourself. Here is an example:

Twitter Account: TweetLukeLau
Number of Tweets to Retrieve: 5

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<ul id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/TweetLukeLau.json?callback=twitterCallback2&count=5"></script>
</ul>

The second method is use a Twitter Widget. Twitter provide a customization wizard. Basically you fill in some blanks, select / set the options, and generate the code. Styling the content is done through the options you set in the customization wizard. Here is an example:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('twitter').start();
</script>



Facebook: It is amazing how much information one can find out from Facebook about its users, activities, etc. without being a Facebook user or log into Facebook. Facebook has developed its own database query language (called FQL) that can be issued as part of an URL. The default result is in XML format. It can also return the result in JSON format.

FQL Query URL: https://api.facebook.com/method/fql.query?query=QueryString
FQL Query String: select ColumnList from Table where Condition

For Example, to get Like statistics about an URL:

Table: link_stat
ColumnList: url, normalized_url, share_count, like_count, comment_count, total_count, commentsbox_count, comments_fbid
Condition: url = "http://lukelauprojects.blogspot.com/search/label/2011 Interactive Design Internship"

The FQL Query URL would look like this:

https://api.facebook.com/method/fql.query?query=select url, normalized_url, like_count, comment_count, share_count, total_count from link_stat where url = 'http://www.lukelau.com/'

Drupal: Drupal's Omega (960gs & HTML5) theme in conjunction with Context, Delta, and Omega Tools modules is really cool! You can literally have a different layout for different context (Node Type, Path, Taxonomy Term, User Role, User Page, Views, etc.) without programming. First you configure the Omega (960gs & HTML5) theme. Then you use the Delta module to define / configure additional layouts. Now you are ready to tie these additional layouts defined in Delta via the Context module (all based on conditions).

Internship — Week 2

My tasks for week 2 were wide ranging:

• Continuation of comparing WordPress to Drupal for an up-coming project;
• Competitive analysis and first draft wireframes (desktop and mobile versions) for another up-coming project;
• Browser testing (Chrome, Firefox, MS IE6, IE7, and IE8, Opera, and Safari) on a soon-to-be-launched website;
• Content updates on a couple production websites; and
• Tracked down and fixed why a Drupal site was showing more recent blog posts than desired.

WordPress 3 vs. Drupal 7: The main focus of this comparison is around custom post type (WordPress) versus custom content type (Drupal). This is by no mean an in-depth comparison. The opinions and comments here are strictly my own and not that of Wasserman + Partners Advertising.

Not every website consists of blogs or articles or simple pages. There are times you want to provide content writers (non-technical staff) to easily create complex contents like events, product price list, etc. (something more than just a title and a body). In WordPress, this is done by creating custom post types. From what I have found so far, there are a couple of methods to do this: via theme's functions and via plug-ins. Creating custom post types via theme's functions requires you to understand WordPress API, PHP, and HTML. I followed a tutorial from a book called "WordPress 3 Complete."

From plug-ins perspective, I've tried one called Custom Post Type UI. This plug-in is great if you care not technical (know programming). Like the theme's functions method shown in the book "WordPress 3 Complete," it does not create a custom entry form with custom fields (fields other than title and body) for content writers to use. Every time a new post is created, the user needs to select the necessary custom fields (after they have been created the first time around).

Drupal on the other hand makes this task super easy. The process of creating custom content type, you get to decide all the fields required for that content type. You also get to define how the edit form looks and their validations (i.e., the order of the fields, mandatory vs. optional, length, minimum and maximum values, etc.). Custom fields can be of any data type (date type requires a Date module but this module a lot of features; features like popup calendar picker, date range, etc.). Custom fields can also be drop-down pick lists or check boxes.

Based on the above, I vote for Drupal. Please note that I am not saying there isn't a WordPress module that can do what Drupal can do. It's just that I haven't found that module yet. If you know of one, please let me know via the comment of this post. Thanks.

Internship — Week 1

How many new technologies or topics can one learn or research in 5 days? That would be 4: Symphony, Symfony, Facebook Connect, and WordPress. Other than Facebook Connect, I was able to install and have a working website with each of these technologies. In addition, there was even time to research GPS mobile phone tracking solutions and start comparing WordPress and Drupal.

Why am I learning all these things or doing the research? To get familiar with current environments and preparing for up-coming projects.


Symphony is an XSLT powered open source content management system (CMS). This is the smallest CMS package (zipped) I have ever seen. How small? 836 kilobytes (KB) small. To use this, developers should know XML, XSLT, HTML, and CSS. PHP knowledge is not necessary unless you are developing extensions (Drupal calls these modules and WordPress calls these plug-ins).

The online documentation is excellent and there are easy to follow step-by-step tutorials.

Similar to Drupal, user/developer can easily define the structures for the content. That is, a structure can have as many fields as it is necessary for that type of content (without programming).


Symfony is an open source PHP development framework. This framework is to streamline PHP development by generating standardized data access code. Unfortunately, to use this, developers need to know more than PHP, XML, HTML, and CSS. One needs to know one of two object-to-relational mapping (ORM) software for PHP (Doctrine and Propel),  YAML (used to describe data in XML like structure), object oriented programming (OOP), and model view controller framework (MVC). As well, he/she needs to be familiar and comfortable with server command line commands. Yes, that means, he/she will need to have access to server command line.

Although there are a fair amount of online documentation and step-by-step tutorials, they are not the easiest to follow / understand.


Facebook Connect / Authentication is an API (application programming interface) that users of your application to use their Facebook account to login to your application. Once logged in, your application would have access to user's information (given he/she has granted your application to access them). It also, allows your application to execute Facebook features like Post and Like.

There are two methods to use Facebook Connect: client-side and server-side. Client-side is where the user's browser making the calls to Facebook via Facebook JavaScript SDK (software development kit). Server-side is where your application on the server making the calls to Facebook via HTTP/HTTPS requests.


WordPress is a popular open-source CMS. WordPress originated as a bogging system; hence, contents are made up of posts. Perhaps it is this simplicity that makes WordPress easy to use/implement (at least on the surface).

WordPress core is not as feature rich or flexible as Drupal but there are many plug-ins to provide the missing functionalities. It is my option that the more plug-ins used, the more complicated / difficult it is to maintain / upgrade the software.

The online documentation / tutorials are not the most detail or easiest to follow. Fortunately there are many 3rd party sites / books to fill in the gaps (especially when it comes to step-by-step for beginners).

6-Week Internship

Part of the Interactive Design program at Capilano University is a six-week internship. For me, I will be interning as a Web Developer at Wasserman + Partners Advertising in Vancouver, BC, Canada.

Over the next six weeks, I will blog about the work I am doing and my experience as a Web Developer at an advertising agency.

The End of SEO Competition

After 5 weeks, the SEO competition is over. In this period (January 21, 2011 to February 25, 2011), there were a lot of learnings. Quantitive numbers were provided by Google Analytics. Officially the winner has not been declared. I like to think my team (documentaryfilms.ca) won. Then again, it depends on which metrics one uses to measure the winner. More importantly, it is all about what we learned from this competition.


Site Objectives

3 of the 4 competing sites have similar objectives (aside from being in the competition). The were tasked with promoting the work of the Documentary Film students at Capilano University and the program itself. The other site shows "hilarious videos of people doing crazy things" - unique obsession, bizarre bobby, etc. It has nothing to do with Capilano University, the Documentary Film program, or the Interactive Design program.


Approach

The strategy was for our documentarian partners post content daily. These posts are to range from the process of creating documentary films, documentary films from our partners and Capilano University Documentary Film Alumni, and events at the university and around town.

Each post is to contain a list of appropriate keywords (words / phrases best describe the content of the post). As well, each post is to be publicized via Facebook, Twitter, and other documentary channels.


Tools Used

All 4 teams built their website with WordPress with their own theme. We used the theme called "Sight."

As for plug-ins, our team used:

• Facebook Likes it! (Adds Facebook Like button)
• Google Analytics (Enables Google Analytics on all pages)
• Google XML Sitemaps (Generates a special XML sitemap which will help search engines like Google, Yahoo, Bing and Ask.com to better index your blog)
• Greg's High Performance SEO (Allows you to configure over 100 separate on-page SEO characteristics.)
• Tweet Blender (Provides several Twitter widgets: show your own tweets, show tweets for Twitter lists, etc.)
• Viper's Video Quicktags (Easily embed videos from various video websites such as YouTube, DailyMotion, and Vimeo into your posts.)

The Numbers

The final numbers between January 21, 2011 to February 25, 2011 are:

Observations

1. Google is the first / fastest search engine that recognizes newly submitted URLs (within days compared to weeks of other search engines).
2. Facebook drew more users than Twitter. They tend to stay a little longer and view more pages. The reason may be that Facebook users are our family and friends. They are more interested in what we are doing and content we have posted.
3. The skin of the website doesn't seem to make a different in traffic or user behaviour.
4. Fresh, constant, and enticing content, along with the appropriate publicity, does drive visitors to your site.
5. Twitter publicities (or tweets) are short lived compared to targeted or posts at related website publicizing our new content.
6. Proper use of hash tag (the "#" symbol) in tweets help Twitter users locate your content.
7. Irrelevant content or publicizing to unrelated audience increases Bounce Rate.
8. Due to the way Bounce Rate is calculated, single-page websites will have a higher Bounce Rate. This is also true for Pages per Visit and Pageviews.
9. New sitemap should be submitted to search engines whenever new content is added. This helps in making the new content searchable.
10. Content with keywords of hot topics (i.e., breaking news, major current events, etc.) drive traffic to you site but be prepare to have more than one post to keep your audience on your site. Otherwise, Bounce Rate will shoot off the chart or Average Time on Site will decrease dramatically.

Top Five Referral Sites

Every Spike Represents New Content / Activity

Bounce Rate and New Content / Activity

See Frequently Used Google Analytics Terms for definitions.


Conclusion

• Content does drive user behaviour on site.
• Develop a content strategy. Have a look at a recent article in UX Magazine, "Content Strategy and UX: A Modern Love Story."
• Training content writers (especially on the strategy) is important.
• Ensure keywords (especially hot topic keywords) are used within the content. But do not over use (keep it below 3%). Otherwise, search engine will tag the page as "keyword stuffing" / spam.
• Define marketing strategy on social media and other media. Not everyone has the save effect / success.
• Establish connections with other professionals, bloggers, magazines, etc. on cross promotions.
• If blogging is part of the website, ensure fresh content published regularly.
• Last but not least, Content is King. 

Frequently Used Google Analytics Terms

Frequently used Google Analytics Terms (as defined by Google).

Average Page Depth: The average number of pages on a site that visitors view during a single session.

Average Time on Site
The average duration of a visit to your site.

Bounce Rate: The percentage of single-page visits or visits in which the person left your site from the entrance (landing) page.

Keyword: A significant word or phrase, relevant to the web page or document in question.

Landing Page: The first page a user views during a session. It is also known as "Entrance Page."

Navigation: Describes the movement of a user through a website. It also indicates the system of available links and buttons that the user can use to navigate through the website.

New Visitor: Google Analytics records a visitor as new when any page on your site has been accessed for the first time by a web browser. This is accomplished by setting a first-party cookie on that browser. Thus, new visitors are not identified by the personal information they provide on your site, but are rather uniquely identified by the web browser they used.

Page: Any file or content delivered by a web server that would generally be considered a web document. This includes HTML pages (.html, .htm, .shtml), script-generated pages (.cgi, .asp, .cfm, etc.), and plain-text pages. It also includes sound files (.wav, .aiff, etc.), video files (.mov, etc.), and other non-document files.

Pageview: A pageview is an instance of a page being loaded by a browser. Google Analytics logs a pageview each time the tracking code is executed.

Referral: A site that refers traffic to the site you are tracking. When a user arrives at your site, referral information is captured, which includes the referrer URL if available, any search terms that were used, time and date information and more.

Referring Source: The URL of an HTML page that sends visitors to a site by means of a hyperlink.

Returning Visitor: Google Analytics records a visitor as "returning" when the _utma cookie (Google Analytics' tracking cookie) for your domain exists on the browser accessing your site.

Session: A period of interaction between a visitor's browser and a particular website, ending when the browser is closed or shut down, or when the user has been inactive on that site for a specified period of time. For the purpose of Google Analytics, a session is considered to have ended if the user has been inactive on the site for 30 minutes.

Tracking Code: The Google Analytics tracking code is a small snippet of code that is inserted into the body of an HTML page. When the HTML page is loaded, the tracking code contacts the Google Analytics server and logs a pageview for that page and captures information about the visit.

Unique Pageviews / Unique Views: A unique pageview, as seen in the Top Content report, aggregates pageviews that are generated by the same user during the same session. A unique view represents the number of sessions during which that page was viewed one or more times.

Unique Visitors / Absolute Unique Visitors: Unique Visitors represents the number of unduplicated (counted only once) visitors to your website over the course of a specified time period. Unique Visitors are determined using cookies.

Visitor: A Visitor is a construct designed to come as close as possible to defining the number of actual, distinct people who visited a website. There is of course no way to know if two people are sharing a computer from the website's perspective, but a good visitor-tracking system can come close to the actual number. The most accurate visitor-tracking systems generally employ cookies to maintain tallies of distinct visitors.

Designed Mobile Apps for the Vancouver Canucks

Completed a mobile application proposal for the Vancouver Canucks, an NHL hockey team in Vancouver, BC. The proposal designed the applications based on Apple iOS for iPhone but the design can be easily ported to Google Android, Blackberry, Microsoft Windows Phone, etc.

The biggest lesson here is this: When designing a mobile application, don't forget to think about potential back-end (back-office) requirements. I uncovered some critical back-end system requirements for one of the apps that can also be a revenue opportunity for the Vancouver Canucks.

I sure hope my university can help arrange a meeting with the Vancouver Canucks soon so my classmates and I can pitch our proposals to them.

As an added bonus, two of the applications I design can also be easily modified to fit into other businesses.

I can't share everything with the public but if you are interested, leave your contact information as comment to this post. If you are an Apple iOS or Google  Android or Blackberry developer, there might opportunities.

Learning Drupal and Building a Website in 7 Weeks - Final Update

Here are the statistics for this project:

Server and Drupal setup / installation	10 hours
Learning / testing out Drupal	54 hours
Researching a starter theme for A&T Systems Inc' website	11 hours
Developing A&T Systems Inc' website	74 hours

Creating content based on content types was not difficult at all. It was the easiest part of this project.

Majority of the time spent in developing A&T System's was "theming." That is, customizing the CSS, adding graphics, and creating custom templates. For someone that is not yet ready to develop Drupal templates or theme from scratch, finding a theme with a structure / layout is closest to the target is highly recommended. Having a solid understanding of HTML, CSS, and PHP will make the task a lot easier.

Header and Banner based on Theme Danland 

Header and Banner based on A&T Systems's Custom Theme 

Issues

Could not getting Drupal to use the custom templates defined. According to all documentation and examples, custom template needs to include the alias name. For example: If the custom template is for a node with an alias name "clients", then the name of the custom node template name should be "node--clients.tpl.php". It turns out that clean URL was not working properly on my Apple Mac laptop (URL contains "?q="). I tried a lot of the suggestions found at drupal.org (and elsewhere) and nothing was worked. Given the time constraint, my custom templates use the technical name instead of the alias.

Home Page based on Theme Danland

Home Page based on A&T Systems' Custom Theme

Lessons Learned

• Make sure the base web server is working properly before installing Drupal.
• Choose an appropriate initial administrator user id during the installation because in order to change this special user id, it is necessary to make a direct update in the database (table "users").
• May not want to use the latest and greatest release of Drupal. Research the support for all the modules and theme(s) to be implemented first. Then select the release of Drupal that best support those modules and theme(s).
• Make sure the base Drupal installation is working properly before customizing (theming) it.
• As a beginner, it's more important to select starter theme that is closest to the target structure / layout.
• Once a starter theme has been selected, content can be added to the system.
• To customize the contact form, create a "page--contact.tpl.php" template.
• Strip off as much unused HTML, CSS, PHP code as possible from based style sheets and templates.
• Remove as many unused modules as possible. This is to improve performance (especially during system startup).
• Remove as many unused themes as possible but don't remove the active administrative theme. This is to mainly reduce the installation size.

Contact Form based on Theme Danland

Contact Form based on A&T Sytems's Custom Theme

New Portfolio Site

Created (hand coded from scratch, no library or template) a portfolio site for myself based on the concept of boxes and lines. Minimal graphic design. Minimal trickery (a.k.a., JavaScript, JavaScript library, Flash, etc.). In fact, the only JavaScript is from Shadowbox.js.


All about the content

The focus is to showcase work (Information Architectural and User Interaction / Experience) I have done for the web and on mobile devices.

Process

1. Wrote a creative brief
2. Developed a sitemap
3. Created moodboards
4. Developed wireframes
5. Wrote up all the content
6. Sourced content images
7. Developed basic HTML / CSS framework
8. Test, test, test, test, and more test
9. Code content to pages
10. Test, test, test, test, and more test
11. Added Shadowbox.js
12. Test, test, test, test, and more test

Browsers

It has been tested under Apple Mac OS X, Apple iOS, and Microsoft Windows against Chrome, Firefox, Internet Explorer (6, 7, and 8), Opera, and Safari.

Was a bit surprised to find differences in Firefox between Max OS X and Windows. Actually, it is really due to the difference in screen resolution between the two operating systems. Windows is 96dpi and Mac OS X is 72dpi. Hence, min-width of say 300px in Mac OS X is not the same as min-width in Windows. Will tweak this as part of the effort to make this layout a true fluid layout.


Issues

Found an issue with Shadowbox.js in iPad's and iPhone's Safari. Shadowbox.js renders the shadowbox / overlay at the top of the page (not where you are at) after 'back to top of page' (an anchor tag that references an anchor name at the top of the page) has been clicked and then scroll back down the page. This does not happen with desktop browsers. The only way for the user to remedy this issue is remove the '#topOfPage' from the URL (which was added to the URL by the anchor tag). Will have to investigate if I can rewrite the URL so '#topOfPage' is never added to the URL.

Designing Apple iOS App

Did not do too much Apple iOS development with NimbleKit since the last update. An experiment that stood out would be porting one of the demos from Raphael JavaScript Library (the Multi-Chart). Since the library works for Safari 3.0+, there really should have any problem to make it run on an iOS device. Sure enough. Other than base NimbleKit coding, nothing was modified from the original demo HTML file.

Okay, there is a little bit of fixing to do. It is not with Raphael JavaScript Library but it is with Apple's iOS IDE (Integrated Development Environment), Xcode, behaviour. When a JavaScript file is dragged into a project, Xcode adds it as a source code requiring compilation. This happens to all JavaScript files dragged or added into a project. Because JavaScript is not a compilable language, a warning is generated during the Build cycle. To fix the problem, drag the JavaScript library file (raphael.js) from Targets -> (name of the Project) -> Compile Sources to Targets -> (name of the Project) -> Copy Bundle Resources.




Instead playing around with NimbleKit, I decided to develop a proposal for the Vancouver Canucks (a NHL, National Hockey League, team in Vancouver, BC, Canada). They have approached my school (Capilano University), specially the program I am in (Interactive Design) for some mobile app ideas.

To start, I did some research on what is already existing. It turns out there are 2 mobile apps by the Vancouver Canucks. One is free and the other is not. Both of them are available for iOS and Blackberry. Both are designed for smartphone screen size.

After a lot of research I came up with a few ideas.

As part of the proposal, I will put a business case together and I will make some flowcharts and wireframes demonstrating the app.

Unfortunately I will not be able to blog about the details of the proposal. If you are really interested, leave your contact information as a comment to this post. May be I will be able to give out some details in the future.

Learning Drupal and Building a Website in 7 Weeks - Update 3

Learned a lot since last update. Not only from David Mercer's book but also from a few video podcasts (Drupal School, Drupal Videos, and Lullabot).

What exactly was accomplished?

• Gone thru chapters 8 to 10 of "Drupal 7" by David Mercer
• Views
• Drupal Theming
• Multimedia
• Panels
• Theming Nodes
• Theming Pages
• Theming Views
• Video podcasts videos from Drupal School, Drupal Video,  Lullabot, and Lynda.com
• Drupal Video: Drupal 7 Alpha Preview
• Drupal Video: A Second Look at Drupal 7 Alpha
• Lullabot: Drupal 7
• Drupal Videos: Drupal 6 Theme Basics
• Drupal School: Theming with Zen
• Drupal School: Getting Started with Zen
• Drupal Videos: Custom Drupal Homepages
• Lynda.com: Drupal Essential Training
• Install/activated the following modules:
• Field UI
• CCK
• Node Reference
• Advanced Help
• Footermap
• Views, Views Exporter, and Views UI
• Install / enabled the following themes:
• o Point
• Austin
• Basic
• Danland
• Fusion
• Sky
• Created a "Meet the Team" data block using custom fields and Views
  
  
• Created a custom content type (Article Review) with a field that is a Node Reference
  
  
• Created a sub-theme under the Zen theme
  

  

  Rounded corners tab style menu (active tab is white)

• Started working on a new theme based on the Danland theme
  

  

  Changed site name font and floated the site slogan to the right

Issues

No real issues. The only thing I found is that some of the contributed modules and themes (especially the themes) are not compatible with Drupal 7 yet it is showing up in the search result when asked to filter only Drupal 7 items.


Experience So Far

From what I have seen so far, Drupal is flexible and complex at the same time. It's flexible because you can do pretty much anything you need to either with the help of modules or custom coding or theming. It is complex because there are so many pieces to the system and many ways to do achieve the same objectives. For example, to remove the RSS feed icon of the header, I could set display to none in the CSS or I could comment the code out of the page template (page.tpl.php). Now, commenting out of the page template is more efficient because the server doesn't have to process that piece of code. Hence, the final HTML going to the browser is smaller.

For a newbie, a browser based HTML / CSS / JavaScript developer tool like Firebug (a Firefox add-on) is super  helpful when it comes to theming. Tools like this let you see exactly which CSS classes or ids or elements need to be manipulated.

SEO Competition — DocumentaryFlims.ca

DocumentaryFilms.ca (http://documentaryfilms.ca/) is up and running. It is not branded yet (the team is working on it) but contents are beginning to populate the site. There are some interesting and thought provoking documentaries from some of the talented Capilano University Documentary Film students. Go take a look. If you like to be more inform on what is being uploaded to the site, follow me on Twitter (@TweetLukeLau).

The skills I've learned from our Multi-Media class are definitely useful in this project.

This is all I can report at this time. Once the competition is over, I will post more details.

More Apple iOS App Development

Heard about another template based SDK for development Apple iOS apps. It is called PhoneGap. It is an open source SDK. It can be used to develop mobile applications on multiple platforms (iOS, Android, Blackberry, webOS, and Symbian WRT).

Both NimbleKit and PhoneGap lack good documentation, especially how-to tutorials. The getting started document does get you started (standard "Hello World" application) but it leaves you hanging as to what to do next.

A few Apple iOS applications were developed to test out these SDKs. Ones that would use of navigation bar and tab bar. The main objective was to see how easy / difficult it is to develop an application to utilize some of these standard Apple iOS device elements.

As well, spend a bit of time to see how to include a launch screen image as well as including a multiple application icon files for different devices. Have to say, this is probably the easiest experiment.

Issues Encountered

One of the biggest learning so far with NimbleKit was proper selection of Product (NimbleKit's terminology of device family: iPhone or iPad or iPhone/iPad) is very important when creating a NimbleKit project. Found that if iPhone was selected, the application does not work properly on an iPad even if the Project Settings' "Targeted Device Family" is for iPad or iPhone/iPad is selected. For examples:

1. Content rotation is choppy / blocky when the device is rotated. That is, a series black blocks (looks like the size of an iPhone) appears as the device rotates..
2. Click events do not appear to fire or the application is not detecting events bewhen the application is ran on an iPad.

Another issue encountered with NimbleKit was with auto orientation detection / support or rotating content as the device is rotated. It turns out every page has to have the follow piece of JavaScript code in order for content to automatically rotating between portrait and landscape.
function NKIsPageSupportsAutoOrientation()
{
return "yes";
}


The above issues were not encountered when using PhoneGap. Though, PhoneGap appears to have the highest learning curve. Please note that this is by no mean an official evaluation or comparison between NimbleKit and Phone.

Learning Drupal and Building a Website in 7 Weeks - Update 2

It has been a productive since the last update. Learned a lot and can visualize how utilize what has been learned so far in real-life situations. Based on what I have learned so far I have to say Drupal is very flexible system. It reminds me of SAP's business solutions. Highly customizable.

What exactly was accomplished?

• Gone thru chapters 5 to 7 of "Drupal 7" by David Mercer
• Basic Content
• Advanced Content
• Multimedia
• Installed / activated the following modules:
• Aggregator
• Book
• File
• Forum
• Image
• PHP filter
• Poll
• Chaos Tool Suite
• Wysiwyg with CKEditor (like — wish images can be uploaded instead of URLs)
• Views
• Learned how to create:
• Content Types
• Feed Aggregators
• Forums
• Image Styles
• Menus
• System Actions (e-mail notifications)
• Taxonomy Vocabularies
• Text Formats
• Triggers
• Users, Roles, and Permissions
• Configured some system settings:
• Account Settings
• File System
• Performance Settings
• RSS Publishing
• Site Information
• Created contents based on the following Content Types:
• Basic Page
• Blog
• Book (thumbs up)
• Custom Content Type
• Forum
• Poll
• Feed Aggregator (very cool and you can categorize each article)

Issues

Didn't run into too many issues. The biggest one was the installation instruction for CKEditor was not very clear. It looks like it is not necessary to install the CKEditor module. The Wysiwyg module only needed the CKEditor library.

The other issue is very minor. It has to do with the fact that I'm running a localhost web server off a Mac OS X (10.6) laptop which FTP is not enabled. Due to time contraint and there is a simple work around (simply unzip and copy the files/folders) I didn't try to figure out how to enable FTP so Drupal can use it to install modules, get updates, etc.

What's Next?

Can't wait to learn about Views and Theming (chapters 8 and 9 David Mercer's Drupal 7 book). Plus, I would really like to see how to show lower level menu items to show as drop-down menu off the main navigation tab (or some ways to show second level menu items).

Driving Traffics for Documentary Films

How easy is it to draw Internet traffic to a website? Is it possible to be ranked number 1 (being 1st on the 1st search result page) by all search engines in 5 weeks without buying up ads? Why do people goes to a website? Why do people goes back to the same website? Is it all about content? Is it all about content structure? Is it all about visual design? Is it all about keywords? Is it all about promoting the website at as many social networks and other websites as possible? Is it all about interconnecting links?

If you want to know, stay tune. This is exactly what one of my project is about to do and find out. If you already know and have tips to give, please leave them as comments to this blog post.

In my Interactive Design's SEO (Search Engine Optimization) class at Capilano University, we have been divided into 4 teams. Each team is working with a team students from the Documentary Film program. Each team is tasked to build a website, fill it with content, promote it, drive as much as traffics (good traffics — measured by Google Analytics) to it as possible.

Updates to the status of this project will be limited as this is a competition. But I will share my team's finding at the end of the project. Then again, you'll never know, I might leak a tactics here and there. So, come back often.

If you would like to help or stay on top of what we are doing, then Like my team's Facebook page called DocumentaryFilms.ca. Then watch for the URL to new website. The content will be interesting, entertaining, and fascinating.

"Hello World" Apple iOS App

Developed and deployed an Apple iOS application to an Apple iPad as a class assignment. The application was developed using NimbleKit. It is an SDK (a template within xCode) that allows developers to default Apple iOS application using HTML and JavaScript.

This sample application was super easy to do. Here are the basic steps (high level):

1. Start xCode and select new project using NimbleKit template
2. Make some changes to the default main HTML file
3. Create some icons and drag them into the project
4. Assign the icons to the application's plist (property list)
5. Set the bundle identifier in the application's plist
6. Select a code signing identity in the project settings
7. Select appropriate targeted device family (i.e., iPad) in the project settings
8. Change iOS deployment target if require in the project settings
9. Set the NimbleKit serial number in the application's AppDelegate.m file
10. Build

Learning Drupal and Building a Website in 7 Weeks - Update 1

Tasks completed:

• Enabled my Mac's Apache and PHP
• Installed MySQL 5.5
• Installed Drupal 7 (sandbox)
• Gone thru chapters 1 to 4 of "Drupal 7" by David Mercer

Had to do a couple of fixes:

1. In order for MySQL to startup either automatically or via the System Preferences Panel, It is necessary to execute the following command in Terminal. It appears this is only necessary for MySQL 5.5. Earlier versions (according to support forums) do not need to this fix.
   
   "sudo chown -R root:wheel /Library/StartupItems/MySQLCOM"
   
   
2. To allow Drupal to rewrite the URL properly, it is necessary to change $base_url in settings.php (in folder sites/default/).
   
   “$base_url = ‘http://localhost/~luke/drupal’;"
   

The concept of modules, blocks, theme, roles, and permissions seems easy enough and make sense. Can't wait to learn more.

Learning Drupal and Building a Website in 7 Weeks

For my Interactive Design's Direct Study class (a.k.a., learn on your own) I will be learning Drupal (an open source CMS, Content Management System). To aid my learning I will be building a website for an IT service provider based in Richmond, BC (A&T Systems Inc.).

A&T Systems Inc. currently does not have a website. The main objectives of the website is to let visitors learn about the company, and team members, their services, and showcase projects. Their customers are small to medium sized companies in Canada, United States of America, and China.

I have selected the latest release, Drupal 7, for this project. Why? Just because...

Why 7 weeks? It is because this is the last term of my Interactive Design study at Capilano University and there are only 7 weeks for this project. The last 6 weeks of the term will be an internship. I'm for hire...

Searching for step-by-step Drupal 7 tutorials was a bit of a challenge. Most tutorials are for Drupal 6 and earlier. For now, iTunes podcasts (by Drupal School, Drupal Video, and Lynda.com) and a book called "Drupal 7" (by David Mercer) are my study aids.