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 - 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...

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...

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.