Artefact 5 - Testing

Summary

My fifth artefact required testing on a hand-held device and is built using Flash Builder. The app is built from we7 and populated using there content. The app was tested on the Android SDK (http://developer.android.com/sdk/index.html) using the 'android-sdk_r10-windows.zip' version r10. The application was setup and ran from my desktop where i packaged up the required files in order to test 'as a developer' for debugging.

The app needed packaging which was learnt using Lynda.com online tutorials...

Tutorial Details:

Flash Professional CS5: Creating a Simple Game for Android Devices
Author: Paul Trani
Released: 2/15/2011
Duration: 03:35:00
Level: Intermediate

The tutorials gave me an insight into deploying a game which was not relevant but some parts were useful to take notes from. This lead me onto selecting the appropriate files to include before packaging.

The packaging process was used using the 'command line' on a windows based computer and successfully created an .apk using the following code...

cd C:/Users/Family/Desktop/AdobeAirSDK/bin/

(this was to set the folder location)

adt -package -target apk -storetype pkcs12 -keystore mycert.p12 we7.apk we7-app.xml we7.swf 36.png 48.png 72.png

(this was to target the swf and other files to make the app)

The video below shows as recording of me using the app on the Android Emulator for analysing purposes.

Artefact 5 - Music

The whole point of my app is to test the 'navigation' results from arefact 3. This will be tested but i need some content and music examples to engage with upon testing. So i have looked into adding in a mp3 player which will sit within the app and can play local/cashed music from the original website. This feature if i could build it would let users link online via Wi-fi and would be able to sync music with this app. This would provide and extra feature which would enhance the users experience.

So far i have managed to include some script which links a local .mp3 file which plays upon pressing the 'play' button within the app (screenshot below).

Artefact 5 - Progress

After researching endlessly on crating apps for my 5th artefact i stumbled across building my app within Flash Builder. This would provide me the best viable chance of producing a working app which i could publish on an Android phone. This is crucial to gathering results as it will need a touch screen interface.



So far i have delved into building the app and heres my progress so far...

What Ive got left to do...

• Finish the apps interface


• Add in some content


• Publish the app


• Test the app and evaluate

Artefact 5 - Update

From posting last i realised just how hard it is to build an app with know experience or guidance. I have looked further into building applications for IPhone or Android. I found a few tutorials and looked further into Eclipse for Javascript builders. This software is designed for coders but would allow me to build apps quicker than the Flash route. Speed is an issue due to having to test this app afterwards. My main concern is to build the app in time to get results, so i have decided to do a summary of this artefact and focus upon testing in artefact 6.

Here's screenshots of me working in Eclipse...

Client Project - VALIDATED

Now that i managed to fix the error from the previous validation attempt. I have successfully passed my first HTML5 / CSS3 Website!

Wooooooop!!!!!!

Client Project - W3c Validator

Before the project began i planned to check my website against W3C (http://validator.w3.org) and used my skills from the previous project (last year) and marked my HTML code up properly through the duration of the project hoping i wouldn't get 60 odd errors :(.

Now that my website is almost complete i ran the URL through the validator and got back 1 error!!!. Well good! 59 less than last time!!!.

Here is the error...



Heres what the error is...



From looking around through several fourms and google search i found a few useful websites.

http://wiki.modxcms.com/index.php/Beginner's_Guide_to_MODx
http://www.w3schools.com/html5/tag_base.asp

Ive looked into changing the way the code is written. I managed to alter the code and take away the 'base' from the end HTML markup.

From:



To:

Client Project - Survey

For my client project i though it would be a good idea to gather responses about the overall design of the palmhive website. I came up with a few questions which would provide me with useful criticism. I put my website link on a forum and asked what members thought.

Below is one of the responces i had from a member called 'dap' who's comments were quite useful. He points out that a better font to use would be 'Georgia' 'Verdana'. I tried these within my website and found that there was a drastic improvement. Here's what he said...

'try Georgia or then just plain Verdana

also increase the text size a little - and make it left aligned (not fully justified)

increasing the text size in my browser means the text is hidden by the footer

i would rather see a product picture(s) than a boring photo of the facility that serves no purpose - you could make quite nice 'patchwork' of those fabric hexagons for the header

good job overall though

i like the way you've put contact form in the footer'

Client Project - Mobile Website

Here is the mobile website version of Palmhive Textiles Ltd...

Client Project - Surveymonkey

For my client project i sent out a survey to collect responses for the complete Palmhive website. The survey consisted of the following questions;


1.What Browser did you view this website on?

Firefox/IE/Chrome/Safari etc

2.How did you find Palmhive website?

Please rate below (Very good/Good/Average/Poor/Very poor)

-Design/Look
-Navigation
-Finding content
-Readability of text
-Loading time of each page
-Clarity of labelling
- Availability of information

3. On a scale of 1-5 how would rate the overall website?
4. Can you think of anything else that could be included on the website?
5. Are there improvements that you could suggest to make the website more appealing?



Survey link: http://www.surveymonkey.com/s/3WWYWBR

From the survey i got a fair number of respondents (20) which only a handful commented upon question 5. Some of the criticism are shown below:

'No, its very good. gives the client what they need'

'Your about us page is very informative but when i go to a page homepage i dint want to be greeted with a novel, why not shorten this to one paragraph like a summary of what you do etc.. and add some products/examples, news or something like that.'

'I think the logo is too big yeah you want it to be memorable but i would reduce the size.'

Overall, the respondents rated my website 'very good' (4/5) on the survey scale. This is useful information to consider upon finishing the website.

Client Project - Cross Browser Test

Now that I'm soooooo close to the end, Ive been looking at AdobeLabs browser testing software to use as a means of testing Palmhive website in many browsers as possible. Here are the 14 browsers i got it working in...

Chrome 8 - Windows



Chrome 9 - Windows



Chrome 10 - Windows



Firefox 3.0 - OSX



Firefox 3.0 - Windows



Firefox 3.6 - OSX



Firefox 3.6 - Windows



Firefox 4 - Windows



Internet Explorer 7



Internet Explorer 8



Internet Explorer 9



Safari 3



Safari 4



Safari 5

Analytics

Before i can finish my template I need to incorporate Google Analytics into the websites design. This had to be done first as i need to duplicate the template for various pages and don't want to go through each one after including the necessary code. Below are pics showing me going through the process from signing up to placing the code into my template.

Signed up to Google Analytics

Inserted the provided code into my template within Modx

Client Project - Contact Form

Palmhive website has a contact form which sits on every page within the footer of the HMTL. This form is PHP generated and uses Modx core functions to send the imputed message to a specified email within the Modx management. I have filled out the form to recieving the email which show the relevant fields and the message specifications.

Pic 1 - Filling out form



Pic 2 - Message sent



Pic 3 - Received email

Client Project - SEO

As promised within my cient brief i have included Google Analytics' and have now put in the meta keywords which we agreed upon during our first meeting. Below show me including this within the websites CMS (Modx) which acts as a 'Template Variable' which draws in 4 keywords which were the following;

mesh fabric
technical textiles
industrial textiles
spacer fabric

I used the 'meta; HTML tag and checked it against Modx rules which are very similar. Here is a pic showing the code.

Client Project - Favicon

During my research stages i stumbled across how to include a 'favicon' within my website. I know it not that important, but its cool. Here is me putting in my Favicon (Hexagon from the logo). Code: link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"' Here what i looks like in the browser and a Desktop shortcut...

Client Project - Final Feeback

Now that i have added in all of the content provided by my client, i uploaded it temporarily to my server so i could show her. After overlooking the website she came back to me with some amendments (below). There was nothing major, just simple stuff.

Changes
•Check picture capital letters

Automotive
•R6112 – change ‘scour and set’ to ‘set only’

Contract Furnishings
•R3678 / G8161 – add ‘black and colours also available’

Industrial
•R5209– add ‘black and colours also available’

Medical
•G8425– add ‘acetate yarn’ and ‘available in different widths’
•G8056- add ‘greige’ add ‘bodywrap bandages’
•R3678/G8161- – add ‘black and colours also available’

Safety
•R8372 yellow – rotate 90c

Sport
•R8326 – Delete ‘white’ replace with ‘navy and black’
•Add ‘Print’ Button and style sheet

Client Project - Validate Checker

I thought before i duplicated my template throughout Modx i went onto W3C online HTML5 Validator. I got 2 errors! (below)



1. Line 6, Column 26: Bad value [(site_url)] for attribute href on element base: Illegal character in path component.
Syntax of IRI reference:
Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.

2. Line 6, Column 33: Stray end tag base.

I'm going to look into these errors and update this post later...

Client Project - Feeback 4

My next task was to populate the sites content and to arrange what fabrics were going on each page of the website. I arranged a meeting where we discussed what was going on each page. I left her the task of writing up the body text and what images to use on each page/sub-category.

Here is the email she sent me...



Here is what the email said...

Hi Nick

Below is the wording we want you to use for the individual market sectors:

Home Page:

Palmhive is one of Europe's leading technical textile manufacturers with production and distribution facilities located in the heart of England.

Palmhive offers a complete solution - from Research & Development, through to Quality Assessment, Palmhive undertake the entire production process ensuring quality levels are maintained throughout.

Utilising a wide range of quality yarns including polyester, polypropylene, Nomex® , glassfibre and cotton, Palmhive are able to develop customised technical textiles in partnership with clients to solve specific requirements.

We have substantial stock holding with standard quality fabrics available for immediate delivery.

Using Raschel and Tricot warp knitting machines, we can produce mesh and solid fabrics in natural, synthetic and specialist yarns, which gives us a range of fabrics that are interchangeable between several market sectors.

Palmhive have Quality accreditation to ISO 9001.

Military:

Palmhive currently supply many fabrics into the defence industry, these include, load bearing meshes, tent fabrics, mosquito netting, cotton veils, Infra Red Reflective meshes and many more.

Fabrics can be made using various yarns, from High Tenacity Polyesters, Cotton, Nylon, Nomex®, Kevlar®. We can include Flame Retardent, Water Repellant and Infra Red Reflective finishes, and even DPM prints.

We pride ourselves on our flexibility and product developments and are happy to work with the military to create new and exciting fabrics.

Sport/Apparel:

Using the latest Spacer technology we can bespoke fabrics with breathability, variable thickness, variable compression and even use different yarn combinations. We can include anti bacterial yarns or treat the fabrics with Flame Retardant, Anti Fungal and Water Resistant finishes.

We have various meshes that can be used in sports apparel, shoes or simply to line jackets, to high tenacity fabrics that can be used for Rucksacks and archery nets.

Our Equestrian range includes fabrics for body protection, sweat rugs and insect hoods to high visibility fabrics for rider safety.

Contract Furnishing:

Supplying the Furniture industry with fabrics for office furniture to three piece suites, we are continually increasing our range, we are happy to bespoke our products to suit our customer's requirements.

Using the latest Spacer Fabrics or simply using High Tenacity or Polyester fabrics, our furnishing fabrics are hard wearing and durable.

Automotive/Hose Reinforcement:

Our knitted fabrics are used in hoses, diaphragms, seals and many other rubber products. They are specially designed using various yarns including Nomex®, Kevlar®, Polyamides and Polyester.

They have to perform to the highest quality standards in order to be used in such vital components; this makes us an ideal choice for any rubber or silicone reinforcement fabrics.

Medical:

We currently supply many of the leading healthcare companies with our load bearing meshes for patient lifting slings and we have to conform to the highest quality standards. Available in a range of colours and weights to suit your needs.

From wound care to mattress covers, wheelchair fabrics to hoist materials, we have a medical range to suit many end uses.

Industrial: -

From using the latest Spacer fabrics, through to Filtration, Equestrian, Reinforcement, and laundry fabrics, to name a few, our Industrial range covers a vast range of end uses.

We specialize in product development and are happy to look at any knitted fabric and we can even add a wide range of finishes to suit your every requirement.

Safety – Hi Visibility/Body Armour

By working with our customers we can now offer a comprehensive range of fabrics for body armour, this includes spacer fabrics and breathable meshes. We can offer a number of finishes which include, Flame Retardant, Water Resistant and we can also use inherently flame retardant yarns.

Our high visibility fabric conforms to the EN471 standard and we also offer a range of High visibility meshes in both heavy weight and light weight options, including various finishes.

From Archery Nets to Bomb Blast Protection, Chainsaw Fabrics to High Visibility and Body Armour we have a comprehensive range of Safety fabrics to suit many applications.

Nick – we are thinking of maybe changing the Industrial sector, maybe once you have put things together and read through it all, you might have some suggestions to make which would be appreciated.

Hope the above helps, if you need anything else let me know.

Kind regards


Anne-Marie



Anne-Marie Beard BA (Hons)

Office Manager

Modx - Gallery 1

My clients website requires a gallery which not only is different on each page, it has to have a 'Lightbox' effect and make each individual picture appear as a Hexagon shape (to mach the theme). This can be achieved through using MaxiGallery.

http://wiki.modxcms.com/index.php/MaxiGallery



The problem with using this is that it took a while to get used to the terminology of each individual parameter provided. Due to copyright infringement, im going to have to include a template which will cover the 'Big' picture viewed in Lightbox. According to Maxigallery documentation, i could achieve this. So I created a 'Image mask' which sat on top. The problem with this is that the original picture uploaded would appear venerable as you can simply 'right button' and save the pic in the websites folder.

I used the '&disable_rightclick'(this would prevent anyone from downloading it from the browser'

I also needed to stop users from simply typing the url in to get the pic. So i used...&pic_use_imagemask=`1`

To get the pics to appear as a 'Hexagon' i used the 'ImageMask' above and assigned a png file to it.



Here is a pic showing where i have to upload the pics (form) which hasn't been styled yet (for end user purpose)




Here is a pic showing what the thumbnails would appear like on one of the pages...

Artefact 5 - Idea

From my previous arefact where i looked further into the navigation as being a crucial aspect in using app/websites on devices which can affect the user experience. This lead me onto looking into incorporating speech recognition as an additional test to add to my prototype which could be tested as well as the navigation when i create an app.

My next artefact is going to take a step back and hopefully build a working app of the we7.com website. This artefact will hopefully be deployed onto several hand-held devices for testing purposes. The results of this will be carried forward to build upon this for a final summary and to hopefully answer my question. 'Does redeployment of a website onto a hand-held devices enhance the users experience?.

The Task...

What I'm going to build? - I'm going to make an app using Flash builder and incorporating all of the content from artefact 3.

Why am i doing this? - To show a website in an app form which hopefully will be a prototype which shows how apps can enhance the website version.

Where I'm going to test? - I'm going to deploy the app onto varied hand-held devices and test through survey/questionnaire in focus groups. To get started I'm going to delve into the world of apps via looking into Adbobe Builder and Air. Ive found some useful tips on there website at adobe.com

Apps - Experimenting

To begin with understanding how apps work, i looked at Googles App Inventor. App Inventor is a part of Google Labs, a playground for Google Engineers and adventurous Google users.

You can build many different types of apps with App Inventor. Often people begin by building games like MoleMash or games that let you draw funny pictures on your friend's faces. You can even make use of the phone's sensors to move a ball through a maze based on tilting the phone.

But app building is not limited to simple games. You can also build apps that inform and educate. You can create a quiz app to help you and your classmates study for a test. With Android's text-to-speech capabilities, you can even have the phone ask the questions aloud. To use App Inventor, you do not need to be a professional developer. This is because instead of writing code, you visually design the way the app looks and use blocks to specify the app's behavior.




I have attempted the 'cat' tutorial to understand what is involved in the creation/distribution of Android Apps. Below is a screenshot of me using App inventor.

Modx - Coding

At the moment im working on getting Modx to redirect pages to the first sub nagivation link. This is because when you set up a 'folder' or 'container' in Modx it uses it as a page also. This is causing me probles with having several blank pages thorughout the website. I have found a Modx addon called 'phiRedirect' which could do the job. Im going to try this and write the next part of my blog post to let you know if it works.

phiRedirect 1.1.0

Use this snippet to redirect users to the document you'd like to show.
This is often useful, for example, in the case of emulating the behavior of traditional Web sites' folders.

If no document is found, this snippet redirects users to error page.

Installation Instructions
e.g. Redirect to document(ID is 1)

[[phiRedirect? &id=`1`]]

e.g. Redirect to the parent of current document.

[[phiRedirect? &to=`parent`]]

e.g. Redirect to the first child of current folder document.

[[phiRedirect? &to=`child`]]

e.g. Redirect to the parent of document(ID is 5).

[[phiRedirect? &to=`parent` &id=`5`]]

e.g. Redirect to the first child of the folder document(ID is 6).

[[phiRedirect? &to=`child` &id=`6`]]




This works!!! I have used the ID attribute to redirect to page '12' in my documents.

Modx - Progress

Today I have managed to get the footer working with the email server. I have laid out the footer and added in the contact information in the top right hand corner.





Whats Next...

1. I've got to add in all the content for each of the 18 pages


2. create template variables for the navigation pages


3. Include google maps


4. Add in Google Analytics Retake photos for gallery

Modx - Footer

Currently i am adding Modx code into my HTML template to bring in certain aspects of Modx addons e.g. Chunks. At the moment I'm adding in the footer chunk using Wayfinder (site navigation). Below is the way i went about adding in the footer.

Step 1

First i used the Wiki guide on Wayfinder to find the appropriate markup (http://wiki.modxcms.com/index.php/Wayfinder)

[!Wayfinder? &startId=`0`!]

Step 2

Then i added certain 'Parameters' based upon what i wanted within my website

Wayfinder? &startId=`0` &includeDocs=`1,7,8,9,10,29`&outerTpl=`menuContainer` &rowTpl=`menuRows` &level=`1`]]{{Copyright}}

The '&includeDocs=' allowed me to just include the relevant site ID's which i want to bring into my footer navigation Step 3

I added this into my template which i named Palmhive (pic below)

Step 4

Once i added in the code, i used my current style sheet to style the 'ul, l, a' of the div element which is used for the look and dropdown features. Style i used here is the footer section with the main navigation buttons (not including the sub-navigation).

< span style="font-family:Arial;">

Here is the result...