Client Project - Mobileok

As I'm still currently working on adapting my template for a mobile website before i proceed with adding it in to my CMS. I thought it would be a good idea to validate my website in a mobile checker via W3C. The results were surprising. Without adapting any of my code, my website is at 64%. This is a good start and I'll be looking further into this at a later stage.

Client Project - Update

At the moment im currently adapting my template for a mobile website. I have looked into using a seperate template at the moment as i dont know any mobile markup. There are some useful guides out there, but im just gonna have to give it a shot.

Here are some pics showing me adapting my code for Palmhive mobile website...

Whats Next...

- Style my mobile website further

- Style my website

- Add content in Gallery

- Retake photos for the gallery

p.s. not looking too good since the deadline is in 3 weeks!!!

Client Project - Error

At the moment I'm currently working on getting the PHP form to work within Modx. Modx has a package called 'Eform', this form is running in the background through a 'Snippet'. I have got to learn the coding to automate and email from the form i made in HTML. The downside to Modx compared to other CMS is that i have to develop my own code using the 'Parameters' from the online guide. This is tricky...

Here is my contact form viewed after creating it in Dreamweaver

I have stumbled across and error upon sending the email through Wamp (server). This server runs on a local computer and requires permissions to be setup in order to send the (Mail) function!!!

The error code: 'Main mail: Mailer was unable to send mailCould not instantiate mail function' I have no clue as to how to fix this yet, but I'm gonna have to look deeper into the 'Permissions' config file.

Client Project - Update

At the minute i an currently working on bringing my website into Modx. I am encountering errors when bringing my code into it. I have made a master template which will sit directly on each page and the content bought in (description, menu, contact form and gallery) through the Modx manager. Below is a screenshot of where i have got to so far.

Whats Next...

• Style the nav


• Style form


• Add gallery in


• Change background (make it fit to fit screen width)


• Check contact form after styling

Client Project - Testing

I'm currently merging my website into Modx (CMS) and I've incorporated the navigation. I have differences between the shape of the navigation button in IE8 and Firefox. The shape is supposed to be rounded corners (CSS3). It works in all Firefox versions and Internet Explorer 9 beta. This is not a major issue (in the design) but as my client runs IE8, I'm going to look into alternative styling so at least she can see it working. Here is the video showing my problem in IE8 (below).

Artefact 4: Evaluation

My fourth artefact looked deeper into navigation and the effect of voice control. Speech recognition provides an additional element which can help aid accessibility. My original route involved testing the navigation on users by creating a prototype; instead I have created voice controlled navigation as a prototype.

The structure for naming the links came from using the name of the navigation link in the speech recognition box; this provided an easy method for testing the links later on.

As I have limited skills within Android application SDK, I constructed the application using just HTML5, CSS3 and JavaScript. The speech API worked using Flash to control the microphone and to capture the voice sound. This was passed through JavaScript into the website, providing commands to certain HTML tags (e.g. ) creating an effective way to match the speed to that of a normal application.

I hosted the website on a local server to allow for greater speed upon testing. The website was tested through a browser (Firefox) which ran from a server (Wamp). I planned out several actions to perform e.g. testing links, which I planned using certain ‘words’ specified in the code that would be used to navigate around the website. This resulted in making several videos which was recorded using CamStudio.

The results from analysing the video concluded that sometimes links had to be repeated twice for the navigating to work. Other problems were that the scroll feature didn’t work and zooming in didn’t increase content size e.g. text size. Overall, the navigation experience of using voice was successful upon navigating. But I’m not going to continue to use speech recognition in my artefact as an additional element in the navigation. This is due to the lack of data currently out there in supporting the development of my application.

Artefact 4: Analysing

To analyse my artefact i recorded myself using the speechapi by talking to the browser to make the pages navigate as it would do on a hand-held device. Below is the videos of me doing this...

Video 1: Navigation

This video I'm talking to the browser to make it navigate across using tags within the HTML code (scrollable navigation from previous artefact).




Video 2: Paragraph

This video is extending upon using speechapi to read out paragraph number back to the end-user using an automated voice.





Video 3: Scroll

This video uses the extra features in javascript to help users scroll up and down using voice only.




Video 4: Example

This video is a mix off all the above features using navigation mixed with paragraph readings.

Artefact 4: Idea

For my 4th artefact I'm going to use Speechapi as the basis for creating the links. My artefact is supposed to be based upon creating an android app but as i have only 2 weeks to create this I had to find an alternative way. My idea is to simulate the website app as it would appear on a mobile phone. This can be done through an Android SDK which will run on Windows Vista. The reason why i can use a PC is due to the fact that i can talk through the PCs microphone (instead of a phone) and use the mouse in replacement for touchscreen.

To analyse this i will be recording me using the website through screen capture software (CamStudio). This is capable of recording my voice to show me navigating through various links. The speechapi also offers additional features (e.g. speech-to-text) which i will be also testing alongside the navigation.

Artefact 4: Research 2

Upon looking into speech controlled links i fount a website called (http://www.becauseclickingisso90s.com). This website is controlled not only via voice, it uses a webcam as a way for users to use movements e.g. hands to navigate around. This video gave me more inspiration to use the links within my artefact.

Here is a video showing Andreas Lutz website 'Because clicking is so 90s!'

ANDREAS LUTZ - Because clicking is so 90s! from Andreas Lutz on Vimeo.

Artefact 4: Research

One of the resources i have found is at (www.speechapi.com).

They use a combination of;

• Speech API server
• Use an array of coding languages for Speechapi; # Javascript

# Java
# PHP
# Python
# Ruby
# HTTP API
# Command Line Inteface (using Java Libraries)

• Use HTTP Protocols
• Provide Flash, Javascript and applet api's for browser side recognition

The javascript API has three modes. Basic, Advanced and Automatic. Basic mode is the best way to get started. It provides a simple set of methods and callbacks that you can use in your web pages. Advanced mode integrates nicely with modern javascript tool kits like jquery. In advanced mode you design the grammar segments that will create events, and you write the javascript callbacks that will process those events. Automatic mode allows you to add basic speech processing to your web page with minimal amount of code. You indicate which html tags you want to speech enabled and add some grammar hints to those tags.

The speechapi can be monitored using a 'developer ID' which will record all commands that run through the website.

Artefact 4: Plan

My last artefact was the effects design had upon various navigational menus on hand-held devices. The results concurred that the 'Scrollable' (across) navigation was the popular choice for end-users. This however was surprising and before testing this i want to bring in some of my research document via exploring accessibility. My research prior to this shown that there is a huge gap between disabilities not being able to use websites/apps. My idea is to bring 'speech recognition' to the navigation through voice controlled links.

Client - CMS Testing

So whilst I'm in the process of creating my website in Dreamweaver i am now going to experiment using Modx (CMS) so i can get used to using the terminology. Below is the process of me installing a 'component' into the template. The component I'm trying out is the 'Navigation' snippet called 'Wayfinder'. Wayfinder comes with Modx as a 'Package' installer which is quite easy to setup. The main problem I'm going to incur is with the styling of the forms boxes and implementing the code into my own style sheet.

The next step I'm updating the 'Header' text in HTML and inserting Modx commands.

I have now setup the Header elements and have inserted my first module 'Snippet'!!!! wooop. Now i get how Modx uses these snippets to control external elements. This changes my plan for structuring the HTML. One div box will be just text; this will be linked with the TinyMCE editor so my client can format text to her own pleasing, the other box will be the 'Snippet'. The next step is to integrate my style sheet into this...

My Snippet Working!!!

Client Project - Update 2

Currently i am in the process of building my website within Dreamweaver and have built the structure for all the CMS modules to sit within this. You can see my progress here ( http://www.nickcoxmedia.co.uk/uni/palmhive/ ). Due to the lack of knowledge within Modx (CMS) I'm having to stop building and focus on learning/experimenting with Modx.

One of the problems i think I'm going to encounter is styling the components e.g. gallery to fit within the design. My client wants the uploaded images to look like a hexagon; this is the shape of the company logo. Ive had the idea of overlaying a template so she can upload an image without editing it beforehand. The next step is to try out the gallery, email form and text fields.

Here is a list of some of the tasks ive got to do next:

• Set Modx up with WAMP
• Create a template website with Modx
• Learn what tags to use within my HTML5 website
• Incorporate Modx CSS within my own stylesheet

Client - Dreamweaver

At the moment i am currently building Palmhive website in Dreamweaver. I have layed out the appropriate boxed including divs and got HTML5 CSS3 working in both Firefox and Internet Explorer. For the websites background i have create a mesh net vector from one of the photos supplied from Palmhive. The material has been warped into looking 3D; this is to give the website more depth (screenshots below).

I am having problems with separating the (jagged) line running below the nav and at the footer of the website. I'm trying to set margins so it overlaps the current div box, but this is throwing it off!!! Ive found a couple of guides but will have to proceed and test them out :/

Client Project - Feeback 3 continued

After showing my client several differential designs of the chosen constructed website, she came to a decision and picked number 5 (shown below). She was very responsive and complimented me upon keeping to the comments she was providing and liked how i also provided her with alternative ideas. Now that i have a chosen design i can now go onto building the website in Dreamweaver.

Chosen Design

Here is an email she sent me following our meeting so i can provide proof of communiction between me and the client.

Email Confirmation

Heres what the email said...

Hi Nick

I have looked at all the pictures you have sent Thanks for taking on board the comments about a more defined fabric background. It was good that you used some alternative fabrics also.

In hind sight the SG8438 ribbed spacer does not seem to have worked as well as I thought.

I particularly liked the effect of the large hole mesh fabric background with the curved effect and the hexagonal viewing panes at the top. Therefore I think you should go ahead with No5, it gives the page an interesting view and makes you want to see what else there is on the site.

Thanks Nick, look forward to seeing the next phase.

Kind regards

Anne-Marie

Client Project - Feeback 3

The next step with my client was to get her to pick a design based upon several different designs from experimenting with various content positions and backgrounds. Here are the designs i sent her...

Artefact 3: Evaluation

Artefact 3: Evaluation

My third artefact looked at the effects that design can have on hand-held device application navigational experience. This was followed from the last artefact where ‘navigation’ was identified as one of the main contributing factors in browsing around a redeployed website. The last artefact was steering away from my objective and resulted in focusing back on this with the next artefact.

The creation of the application interfaces began with constructing several wireframes, based upon different navigation positions and types. Three designs were designed in Illustrator in order to correlate with the survey questions. The questions was based upon navigation content and touched upon how users of applications navigated around, providing them with selective answers to each question. In order to help understand the questions, several illustrations were created to sit alongside these answers; this provided a great visual representation for a greater response.

The survey was created and distributed thorough Instantsurvey; an online survey manager. This provided a quick and productive way of collecting responses, which resulted in collecting fifty two responses. Analysing the survey resulted in the following summaries; 'scrollable navigation' (65%) is preferred over 'menu style' and 'pop out menus', 'black text on white' (42%) is preferred over other combinations, both 'visuals and symbols together' are preferred together than separately on navigation links, 'navigation links' (81%) are preferred over using a 'search box', a 'medium' amount‘ (69%) of content is preferred over 'large' or 'small' amounts of content.

The design and construction of the interfaces were better than initially planned; this was due to allocated researching time beforehand into application UI. If I was to do this again I would have allowed more time for creating questions, this could have helped in gaining more in-depth information into the navigational experiences on hand-held devices.

Client Project - Feeback 2

Today i received feedback via email regarding the Layout plans for Palmhive website. Here's a screenshot of the email and written what she said.



Message...

Hi Nick

Have looked at all the pictures, all look good, but prefer 110 and 113. Maybe something of a mix of the two would be good.

The only comment I have is that I am not sure about the fabric in the background, it is a bit too dark, something more defined would probably look better, maybe the G1764 or even the SG8438, I think we have a navy version of this. See what you think.

Thanks

Anne-Marie

Client Project - HTML5 CSS3

To keep updated with new Internet trends and technologies i have decided to construct Palmhives website using HTML5 and CSS3. As i have never even created a website with this coding is going to make it difficult considering i have to implement it into a CMS aswell :/. So the best place i was told to start would be to look at cheatsheets to try and grasp the tags etc used.

Cheatsheet i found for HTML5 was at....

Smashingmagazine

CMS - Research

To begin understanding the way CMSMS works i have compiled a list of the common tags i will be using for Palmhives website...

{sitename}

- will add the sitename you can set in the Global Settings

{title}

- will be replaced by the title of the content (You can set title when creating content pages).

{stylesheet}

- This must be between the tags. It links all the stylesheets that you have attached to your template. If you forget this your page will appear without styles. If you rather want to use external stylesheets you can add a normal tag in the header.

{metadata}

- will add the meta data you can set in the Global Settings

{content}

- This will be replaced by the real content of the selected page, the content that you edit for each page in Content -> Pages (use {content block='another_content_area'} to add another editable area to the template). Some other info how to add multiple content blocks and modify your template to show block only if it has text.

{content_image}

- This will be replaced with the Image selected in the Edit Page window, at the bottom of the screen with the block name you specify (i.e. MyImage). (use {content_image block='MyImage' dir='images'} for immediate results).

{$content_obj->GetPropertyValue('image')}

- This will be replaced with the image filename selected on the Edit Page screen under Image. (use GetPropertyValue('image')}" /> for immediate results.).

{breadcrumbs}

- Will be replaced by a path to the selected content.

{menu}

- This is one of the most common menus. The entire menu will be automatically generated from your pages, where you put this placeholder. This tag can also take parameters, depending on how you want to display the menu. For example {menu collapse='1'} to collapse the sub items in the menu, so that only the sub items of the current menu item are shown.

Client Project - Update 2

I have recently been in contact with Anne-Marie at Palmhive regarding choosing a design for the website. The website she has chosen will further be developed by creating alterantive content placements and experimenting with use of colour. From this she will choose a design which will be constructed. My next task is to design content variations for the layout chosen.

I have looked at my Gantt Chart which was created for my client proposal and have compared where i am now to what i put in my timeline. I can say that i am spot on where i should be at the 'Artwork for the website' stage on my chart, which can be found at

http://coxy-blah.blogspot.com/2011/01/client-project-planning.html

What i need to do:

1. 
   
   Create Artwork for website


2. 
   
   Retake photos of material


3. 
   
   Construct an HTML5 CSS3 website


4. 
   
   Practice using CMSMS


5. 
   
   Learn CMSMS though tutorials and exersise files.

Artefact 3: Results

I have now gathered enough responses from my artefact survey (shown below). Some of the results was surprising.

http://www.nickcoxmedia.co.uk/uni/artefact3result.jpg

Here's what i found from my survey:

1. 'Scrollable navigation' (65%) is preferred over 'Menu style' and 'Pop out menus'.
   


2. 'Black text on white' (42%) is preferred over other combinations.



3. Both 'Visuals & Symbols' are preferred together than separately on navigation



4. 'Navigation Links' (81%) are preferred over using the 'Search box'.
   
   
5. A 'Medium' amount (69%) of content is preferred over a 'Large' and 'Small' amounts on device screens



6. People prefer using both screen orientations rather than vertical or horizontal

Client Project - Update 1

Its been over a week since I've done anything with the Palmhive website but i have now got to learn CMS before going ahead with the design of the website. I have found several tutorials using different CMS engines. The two that i am going to look further into are 'CMSMS' and 'Wordpress'. I have chosen these two because they offer easier building of websites from a designers end. This is what i am looking for to make my life easier when it comes to implementing Palmhive website into CMS.

Tutorials:

Lynda - Self-hosting a Wordpress Site

http://www.lynda.com/tutorial/749?srchtrk=index%3A5%0Alinktypeid%3A2%0Aq%3AWordpress%0Apage%3A1%0As%3Arelevance%0Asa%3Atrue%0Aproducttypeid%3A2

Wordpress 3 Essential Training

http://www.lynda.com/tutorial/71212?srchtrk=index%3A1%0Alinktypeid%3A2%0Aq%3AWordpress%0Apage%3A1%0As%3Arelevance%0Asa%3Atrue%0Aproducttypeid%3A2