Jscrip, Jquery PHP and God damit!

I am currently working on a feature for the wild project which I envisioned when I was drafted in to help. When a tutor wants to add, edit or embed an activity, they will need to get the correct one from an activity set. Let me put this context:

Dr. Livingstone (no not that famous guy) teaches the University of Hamburg(er). The good Doctor is building a presentation for a lecture on the African jungles, and has decided to use an existing activity from another lecture he made with the wild project. Doc L picks the Activity set in the tutor interface via a drop down list and selects the "jungle bells: stories from the green forests" activity set. The next selection drop down list is then populated with the activities from that set, in which Doc L picks "the hills of stranglethorn vale" activity.

On to my problem:

That "cannot" be done with PHP (I "" because I haven’t found an example of it been done) you can set up the query, but that’s about it. Now it can be done with Jscript and something called JQuery which is a Library for java script. I have been looking at Different examples of JQuery and I find it could be useful in a lot of different things for wild, but it something we will be looking at later versions.

I have done some searching around and found a good example of what I am trying to achieve:

http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

(Thanks Remy)

at the moment I am trying to follow the Example he has given but am struggling to get it working locally (not sure I have the correct code in the correct files Etc) but I am confident I can convert this to use a database Ids rather than the values of the select or use the Values of the select to reference the table ids.

~Keith

Amusing Interface Quirks!

I have spent a few days building templates for the interface for wild. I have found a few things that amuse me with Mozilla FireFox and IE (7/8). I will show you what I mean shortly but first i want to talk interface!

Client:

Originally I envisaged the client being to different interfaces (one for high end devices, one for mobile devices)

But after some tweaking I feel that we might be able to work the larger interface for the mobile devices, simply because of the way the browsers (IE and Firefox) scale the web page:

moving on...

Tutor:

In the previous post I stated that I wish to move away from the traditional web page. its hard for me to explain what I mean but I am going to give it ago.

My idea is to make the web interface feel and work like something you would have in a kiosk or information booth, for instance the interface will not have a navigation bar, in the traditional sense. Also all navigation will happen within an area of the page (a bit like frames but not as evil) and will be in sequence or will be fluent (so one option will lead on to the next until completion).

So I went about creation the tutor interface to mirror the client. The thing I found this was the Scale effect for the tutor client became annoying and I mean REALLY annoying. If I where a lecturer or a teacher, I think I would of being seriously narked with the thing and ditched it.

After this, I decided to set the whole thing as absolute positioning with in the CSS (some people say this is a no no, well to you I :P ) the interface looks and feels a lot neater with this and I have give it some scalability for different browser sizes, I might have also fallen in the trap of creating for 1024X768 but then we cant change this at a later stage.



Display:

the display page was really a no brainer, its just a simple page that displays the data. i had little problems with setting this up.

Right the browser quirks:

as daft as it sounds there is one little quirk that i have noticed;

Firefox:

IE:

I'm using a reset CSS file.... but still it happens... love IE!

~Keith

Interface Design

First and foremost I am no designer, never have been, never will be. I have the artistic talent of donkey, so if this designs don’t look “pretty” go figure. :D

To start with I tried to make a “nice” design; I thought about themes and wanted something “wild” looking, as in wild life or jungle. So I came up with this:

After been told off by my partner (she is a web developer) I was force to re-think, So I decided to go with something more simple and use more neutral colours. I also decided that I would like to move away from a traditional web site, and Try and make the site look more like a system interface, to make it feel more like a program and make the user forget it is really just a web client.

So I created this:



It’s not pink….its blue…I swear!

This interface was "built" in Photoshop and am hoping that i can use the layers to construct the full working interface from it.

~Keith

Creating Functions and Beating Web Servers

1st week of sprint one of the wild project, has seen one of the main parts of the project near completion.

DM and KD Set about and successfully get the add-in for PowerPoint to a working standard (all credit to DM for been so persistent with VBA). DM created an add-in that creates a web browser on the slide, with an invisible text box to enter the URL into. The web browser, on slide change, then takes the URL and displays in the slide show with out the need for a click or action.

On to the web interface/server. KD has created some designs of the interface (which you can view in the documentation, they are pink, but he swears they are light blue on his laptop. KD has also started the functions needed to add activities and other data to the database. KD Wrote them in MySQL but there will be some form of conversion to Postgres also, DS was looking at using the DBX extension in PHP, but currently the installation does not work.

KD has spent a few days trying to install a working web server on to his laptop and to his dismay found that his laptop needs a format. Since previous installs have effected the installation of the PHP ( it cannot find the extentions).

The team are now moving into the second week of the sprint with a view to have the basic system in place. They want:
• the add-in working (check)
• the interface in a basic form(check)
• the interface to take input and store it the database
• the server to generate the client slide interface

The next week (the 2nd week of sprint 1) they will be looking for the response data return and display the response on the embedded slide.

Diagrams and tools

This week (2) in the WILD house, the house mates created a large proportion of the UML and miscellaneous diagrams that are needed for the documentation and journal paper.

Diagrams that were created where:

• Class Diagram
• Sequence Diagrams
• Collaboration Diagrams
• Use case Diagram
• Interface Design
• Story Board

The UML diagrams have been create by a program called Visual Case (http://visualcase.com/index.htm). Although this program if not free, is a reasonable tool for creating UML diagrams. Other tools looked at were ARGO (http://argouml.tigris.org/) and Altova (http://www.altova.com/features_visual_tools.html) of which ARGO is free and powerful and altova is superb but expensive

Some major changes and ideas:

• We are no longer treating the system as just dealing with questions and answers. The system will focus on a wide range of activities and their responses (e.g. A tutor will ask his students to take pictures and send them to the embed)
• Limited action from the environment plug-in. The plug-in will simply open and close a web browser and automatically place a embed area in the presentation.

Working Environment.

KD has listed a short-list of possible environments to begin programming in. in this, we mean programs, not languages. Two environment picked to used were scite and eclipse. Scite is a free to use editor which a can work with most languages. Eclipse is also free, but has a PHP only software that auto fills tags, making typing code much faster.

KD will be opting for eclipse.

Work flow

DM - created and edited the journal, as when diagrams became available and edited them where necessary.

DS - Worked on XML DTD, helped on interface designs and worked on a schemer.

KD – Created UML and other designs, created some interface designs and finished the storyboard.

Sprint 1:-

The main objective of this 4 week period is to get the main bulk of the programming out of the way. The focus will be on the Add-in in the first week and possibly the second week. The remaining time will be aimed at getting a working beta of the client and tutor interface, including a working back end.

Next time on WILD tool:

Interface design: style, function and moving away from a web page.