Expression Engine

News Sites Launched This Weekend for DAWC and Blaine Bartel

image

Client: Dental Assisting of West County
Website: http://www.dentalassistingwestcounty.com
Design: Kerry Layton
Platform: Expression Engine
Notes: used the Freeform module from Solspace to handle info request, registration, and contact forms


image

Client: Blaine Bartel, Pastor of Northstar Church
Website: http://www.blainebartel.com
Design: C1Design
Platform: Expression Engine
Notes: used Better Meta and Social Bookmarks from Leevi Graham, Tags from Solspace, and the Twitter plugin.


Categories: Case StudiesExpression EngineGeneralPermalink

Twitter Feed Updates

In my spare time, or when I just need a break from a crushing deadline, I’ve been continuing to work on the smaller details on this site. I find the tangent brings me back on task revitalized. But that’s another story about the fruitful benefits of adventuring down rabbit trails.

The original design for the site had my twitter feed just above in the red bar displayed in a slightly nicer, thicker font. I also had some of the other detail of the tweets such as the program used included. I decided to make this portion of the page into a little Flash widget and explore a little interactivity.

The PHP Part: Getting the Feed
The HTML only version which still displays on iPhone, mobile, and non-Flash displays is bring delivered via a simple, easy to use Expression Engine plugin: Twitter Timeline. I’ve also used this plugin on the Oceania Official band website. This plugin benefits from EE caching which is helpful because the Twitter API limits requests from an application to 100 / hours. By default the Twitter Timeline doesn’t expose all of the data provided by the Twitter API.

Because I wanted more data from Twitter, and I didn’t really want to hack up the plugin, I went looking for other PHP solutions. The solution I’m using is from arc90 labs. Using this library written by Matt Williams, it was an easy one two step to get all the data I wanted ready to go for Flash.

The Flash Part: Making it Look Better
Then in Flash I’m using the URLLoader to pull in the php feed which renders nicely formed XML. I decided for right now to create a timer that cycles the last 8 tweets every 12 seconds, or you can click on the text to transition to the next tweet.

The transition is a blur plus a fade tween using GTween. The FLA has a sprite called tweetView with a TextField inside of that. That code for the tweening looks like this:

[actionscript]var unblurTween:GTweenFilter = new GTweenFilter(tweetView,1,{blurX:0,blurY:0},{filterIndex:0,autoPlay:false,ease:Sine.easeIn});
var fadeIn:GTween = new GTween(tweetView,1,{alpha:1},{autoPlay:false,ease:Sine.easeInOut});
unblurTween.addChild(fadeIn,GTween.DURATION);

var blurTween:GTweenFilter = new GTweenFilter(tweetView,1,{blurX:20,blurY:20},{filterIndex:0,autoPlay:false,ease:Sine.easeOut});
var fade:GTween = new GTween(tweetView,0.6,{alpha:0},{autoPlay:false,ease:Sine.easeInOut});
blurTween.addChild(fade,GTween.END);
blurTween.addEventListener(Event.COMPLETE, _onBlurComplete);[/actionscript]

Then on my timer events I call:

[actionscript]unblurTween.play();[/actionscript]

or

[actionscript]blurTween.play();[/actionscript]

You’ll notice I have two components to each tween with the GTweenFilter being the parent to do the blur and the GTween as the child to do the alpha. I found that the parent-child relationship doesn’t work the other way around.

On the blurTween I have a listener on the complete event so I can trigger the text to update. That function in turn calls the unblurTween and the cycle repeats (not shown in the code, fyi).

Also worth pointing out regarding this use of GTween is the timing on the blurTween. The blur has a duration of 1 and the alpha has a duration of 0.6 however they are sequenced to match at the end (GTween.END), so the alpha waits for 0.4 before beginning. I really like how GTween handles this.

btw - if I wanted one tween to happen after the other in a chain I would have used nextTween() instead of addChild().

The Flash Part: Adding the Hyperlinks
The text coming from Twitter needs to be parsed so that urls are live links and twitter names also link to the appropriate profiles on twitter.com. I love to code, but I don’t love to solve problems already solved unless I’m playing Sudoku in order to fall asleep. So, I did a quick Google search and within just a few minutes found exactly what I needed on this blog courtesy of Jim Jeffers (@jimjeffers) and Brian Shaler (@brianshaler).

Future
I want to work out a navigation scheme that is intuitive telling the user that more posts exists and that you may interact with the feed. For now, it’s a little improvement.

Additional Resources
CodeIgniter has a twitter library here: http://codeigniter.com/wiki/CodeIgniter-Twitter_Library/
Zend has a twitter client here: http://framework.zend.com/manual/en/zend.service.twitter.html

AS3 Twitterscript - a Twitter API in actionscript: http://code.google.com/p/twitterscript/


Categories: FlashExpression EnginePermalink

Case Study: Shape Shifters by Derek Vreeland

Client: Dr. Derek Vreeland, author
URL: www.derekvreeland.com
Design: Kerry Layton

Overview
The site promotes Derek's first book "Shape Shifters" which he is self-publishing and, of course, self marketing. The site introduces the book, provides a free chapter, showcases endorsements and speaking events, and sells. Search Engine Optimization was of primary importance, as it almost always is.

For the CMS of the site I once again used Expression Engine. This tool really is a huge time saver and has been able to handle every challenge I've thrown at it. I have to actually remind myself that I can code PHP with it if I really want to; I just haven't found many cases that warrant it.

What Expression Engine is doing:
- the home page features some news items which come from a custom weblog and is available via RSS or Atom
- the Speaking Engagements form is a Solspace Freeform form
- the Contact form is a straight forward EE email contact form
- templates are constructed in distinct template groups, and common elements are brought together via sub-templates using the {embed=template} tags

I haven't stressed too much about the templating strategy I've used so far, primarily relying on the use of the embed tag, but I still feel like I'm doing old school ASP include tags. I would much prefer a solution more akin to the master templates in ASP.NET. Like I said, this works so I haven't stressed to much about that.

Derek currently blogs via Blogger. In the future we may bring that in to Expression Engine also.

Paypal to Sell
Derek has one product. While the book is carried at Amazon, Derek stands to make a little more if he can sell the book directly. To that end we simply setup a Premier Account (which you may upgrade to from a personal account). This allows him to accept most any payment type. Within Paypal he generates a button for the book which goes on his product page. Paypal handles all the shopping cart and payment services as well as allowing Derek to easily generate shipping details for labels and tracking.

I've been doing quite a bit of e-commerce lately and I still love the simplicity of the Paypal model for this kind of thing.

Couple More Technical Bits
I took the opportunity to utilize a couple of new techniques that I have been finding to be very useful. I deal with each of those in subsequent, short postings.

Transparent PNGs
CSS Menu Image Rollover Menus
Scrolling Text Box

 


Categories: Case StudiesExpression EnginePermalink