Sunday, March 27, 2011

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).

Sunday, March 20, 2011

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.

Sunday, March 13, 2011

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).

Monday, March 7, 2011

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.