shiny & new

A brilliant example of all that was discussed in tonight’s lecture:
* http://hitask.com

Go on - sign-up!

A beautifully designed and implemented web application (IMHO) - and not another 37signals me too!
Bravo hitask.

* http://www.youtube.com/watch?v=E3B__ovj2jU
A beautiful advertisement for the French nuclear energy corporation Areva done in the exact same style as Royksopp’s Remind Me video. And nothing says “scary power company” than a commercial set to Funkytown. [source: http://wastered.com/ ]

* http://www.youtube.com/watch?v=KHEIvF1U4PM
Royksopp’s Remind Me video

* http://www.go2web20.net/

• A directory of web 2.0 applications and services
• Born around mid 2006
• 107 logos as of Sunday, April 15, 2007

1. Updated Sitemap
* Sitemap V2

I’ve been able to reduce the amount of pages in the original sitemap by optimising functionality and evolving the application UI concepts.

2. Wireframes
* Site Main Page V1
* Promoter Application Main Page V1
* Campaign Report V1

Full integration of the “Promoter login” and “Forgot my password” functionality into the site home page has made the ‘Login Helper’ screen redundant, this is great news both from a development and usability viewpoint. Here’s a wireframe detailing the screen in its default view. Fly-outs on the right capture some key interaction design standards, eg: standards for the display of forms, and how errors will be reported back to the user, I’m sure these Interaction Design (IxD) standards will evolve as I move into XHTML prototyping, but including them at this point has helped me evolve the UI design at a META level, eg: how the screen will update to display the login helper functionality etc.

While in Melbourne for the Easter break I purchased some new reads, one of which is the Taschen book “WEB DESIGN: MUSIC SITES“. Sidebar: The JB test to for a design book: If while flicking through the book in the shop I have a minimum of three “Eureka” moments I buy the book. Whats’ a Eureka moment? Inspiration. anyhow … one of the eureka moments I enjoyed while thumbing through this book was the way that the crew at PROD4ever used dynamic html to provide visitors to the Madonna site with a way to drag blocks of content around the screen. This got me thinking — why split the event creation and event creation preview screens into two separate transactions? why not borrow the IxD concept employed by PROD4ever and treat the event creation screen as an integrated set of functions, a blank canvas, with palettes of tools hovering above a blank canvas, conceptually similar to those found in applications like Illustrator and Photoshop. I’m quite excited by this streamlining of the creation process, I think it will enhance the user experience and provide that gee-wizz ingredient that sets your app apart from the competition. WATCH FOR THE PROTOTYPES!

3. Data Modeling
* Database Design Diagram V1
* Database Schema V1

Transforming the UI wireframes in my mind into a data model was fairly straight forward. I’m certain the design is not quite Third Normal Form compliant (3NF) I hope they’re well past the first (1NF). As with the IxD standards, I’m certain that the Schema will evolve as I dive deeper into design and development.

http://www.cakephp.org/

Similar to CodeIgniter, CakePHP is a development framework designed to assist developers build their web-apps .. fast.

I took a look at the documentation, and they’ve published some handy tutorials, but I’m still happy with CI.

4-5ft of South swell’s been hitting Sydney’s beaches for the last few days .. SWOT analysis declares ground swell as a definite weakness.

See you out there.
http://www.swellnet.com.au/surfcam.php?region_id=12&state_id=2&cam_id=4

I’m a scholar of Edward Tufte’s work, Envisioning Information is considered a seminal text for those stepping into the world of Information Architecture.

**Worldmapper is a great example of Tufte’s teachings .. 2d flat lands used to supreme effect! My fave: International demonstrations agaignst the Iraq war.

**source: http://www.37signals.com/svn

As a Typo3 lover, I must throw it’s name into the CMS hat being passed around; *ahem* Mambo server.

Mambo’s great - quick and simple, almost blogesk in it’s appeal, probably enjoys a huge following of Mac zealots .. Typo3’s great also - although the initial learning curve it quite steep, once your head snaps into the Typo way of doing things you soon start to understnd why the codebase is doing so well.

Great doco,
great knowledge base,
great extensibility.

Check it out: http://www.typo3.org

As I suspected, the CI code required to poke stuff into a database and pull it back out is trivial.

Two lines in the controller:

$this->load->model('Register_model','', TRUE);
$this->Register_model->add_promoter();

.. and two lines in the model:

$this->load->library('session');
$this->db->query("INSERT INTO table
(type, name, email, username, password, status, optin)
VALUES('".$this->session->userdata('sessionRegtype')."')");

Pulling stuff out for display is just as easy.

Here’s a simple “who’s registered for a Smoosfuel Promoter account” report: http://smoosfuel.com/administration/reports/promoter

Cool! Next step .. file uploading and manipulaing the file system with CI.

Once I’m able to upload a file to a dynanimally generated directory I’ll have a proven understanding of CI functionality required to implement the *must have* functionality:

• Forms handling
• Session Management
• Database insertion and retrieval CRUD!
• Email handling
• File upload
• File system manipulation: directory and file stuff

Oh, and one major piece of functionality :
User authentication/management, rather than building one myself (*ahem*) I’ll take a good look at this CI Community sponsored project : http://tomcode.com/inside/code-igniter/userauth/userauth_0.9.2t52/

I’m enjoying CodeIgniter (CI). The MVC way of developing in PHP is addictive, I’m constantly evaluating code included within my view templates asking myself “can I abstract this code into the controller?”.

Here’s the first app: http://smoosfuel.com/register/ .. It’s small, but developing it using the framework provided valuable ‘aha’ moments.
The app presents a form, upon submission a PHP controller class (register.php) grabs the session->userdata (the values posted) and stuffs each value into a session variable. Once in a session each value is tested using the CI validation class. If validator finds any errors is loads the registration view file (/register/register_view) displaying a message alerting the end user to the fields they need to fix before re-submitting.

Once the form has been completed and all field data passes validation, my controller class packages up the data and then uses the email class to send me an email, as well as a thank-you email to the end-user. I then call the session class to flush the session object before asking the loader class to present the user with the thank-you screen.

I’ve been using CI for three days now and the above functionality took me 82 lines of code! (the entire controller class) … give me a week, I reckon I’ll be able to refactor the code reducing the size by at least a third

Next steps .. pushing the submitted data into a database. (which, going by the tutorials looks dead easy)

A summary of the cool stuff I learned while developing this small registration app:

• a clear understanding of how the various MVC files work together in the CI framework
• working with sessions - how is easy is it to create and manage session data in CI
• email - how easy is it to construct and send ascii and html based email from CI?
• forms - what functionality is provided by the forms helper classes, including the forms builder, and a forms (data) validator.

I’m looking forward to using the framework to assist with the implementation of the rest of the site.