Reflection

Name: Judi Wilkinson
Student Number: 81299888

Introduction

The goal of my web project was to create a fresh new site for local fitness training company 'Attitude to Burn' with revitalised content, design and new interactive elements to assist in communicating with existing clients and draw new business. The project scope was to create

Tools & technologies

As stated in my Technology analysis, I envisaged this build would require the use of

All of these technologies were deployed during the build of the site, with code sourced from a variety of online resources as referenced in the code and listed in Appendix A. In addition some parts of the site, such as the Facebook custom feed, were achieved through the use of Ajax and Json code.

As planned the single page responsive design was achieved through the use of a Bootstrap framework, JavaScipt and CSS files. In addition I crafted a customised CSS file to extend on the framework capabilities. Other elements that I built into the framework from code snippets found online included a sticky menu bar, a sticky contact form button with CSS3 transition effect and smooth scrolling transitions from the menu bar.

Jumbotron original image

Included in the scope was the desire to create a WordPress theme from the Bootstrap framework to allow easier future management of the site. This was researched with simple documentation and a tutorial found, but not achieved due to time constraints. It is a consideration for the site moving forward, however much of the custom styling and content developed will need to be removed, then re-applied, to achieve this.

Facebook feed image

A plug in was used for the Google map. Consideration was given to include a Google calendar as well, however following peer feedback I chose to style my own calendar with responsive elements such as 'tips' on hover and a horizontal scroll bar for use on narrow width devices.

The Facebook feed was custom built to ensure content could be easily accessed as content for SEO, rather than have it appear in an iFrame or by using the Facebook likebox SDK tool. This was difficult to achieve, however the result is a seamless integration of Facebook information into the style of the site.

The use of both Google maps and Google analytics on the site was a deliberate ploy to gain potential 'reward' from Google search for using their products, thereby improving search ranking.

The 'design your own workout' tool was completed as anticipated using PHP and MySQL. The design of this was kept simple and includes the ability to print a workout once created.

Key features at a glance

To enhance the single page responsive design, the following tools and styling features were applied:

site features image

tooltip image

popover image

workout tool image

modal image

 

Design vs outcome

The site was envisaged as primarily a single page site design, incorporating modals and with the only additional pages being for the custom workout tool, as shown in the diagram below included in my final System plan.

The eventual design did not differ significantly from this. The only exceptions being:

1. Lack of a 'member login/sign up' form

This was not completed primarily because of time constraints but also because research into user experience best practice raised concerns that adding an un-necessary barrier like a login may actually cause users to leave the site. A discussion forum was beyond the scope of this project but is seen as a useful future tool. A login ability for members would be best left until the forum is launched.

2. Addition of a contact form 'reply' page

While the contact form launches within a modal, so users do not leave the main single page, having the form 'reply' page appear within this modal while at the same time achieving all validation required for the form data to submit to the backend SQL database proved impossible for me to complete. It appears the Bootstrap validation method conflicted with the Ajax call to re-load the reply into the modal and time restraints forced me to abandon this, opting instead for a reply page clearly branded with navigation back to the main page.

3. Addition of header.php file

This allowed for a single copy of the sticky header to be included on all site pages.

4. Addition of a contact.php file

As above, this allowed for a single copy of the 'sticky' contact us button which triggers a pop-up modal with contact form to be included on all site pages.

See Appendix B for a complete list of files used to build this site.

Architecture

The following diagram demonstrates the relationship between technologies that were planned to complete this project, and their location in the overall website system architecture. Apart from the omission of the 'sign up/sign in' forms, this diagram remains a correct representation of the actual final design.

Validation

My site conforms to HTML5 validation standards as established by W3C.

CSS3 validation for the Bootstrap provided CSS style sheets was not to standard due to their unique compilation methods.

The custom style sheet I developed for the site did validate to CSS3 W3C standards, apart from the use of the 'at-rule' for @-webkit-keyframes and @-moz-keyframes necessary to achieve CSS3 transitions.

A HTML5 and CSS3 validation report is provided in Appendix C

Learning objectives vs outcomes

In my Learning Proposal I stated my key learning objectives as being:

  1. Learn how to code correctly
  2. Understand all the technologies that make up a website
  3. Build a functioning website styled with CSS, learn more about using different types of content management systems and alternatives such as responsive frameworks
  4. Learn more about building backend databases for websites to encourage user interaction
  5. Discover & apply web design elements that enhance user experience
  6. Know how to best manage content for SEO & SEM

I largely met these objectives by applying the following strategies:

  1. Completed Codecademy tutorial sessions in HTML (100%), CSS(100%) and JavaScript (80%). I did not complete online tutorials in PHP, SQL or other code used, however found much of what I had already learned could be modified and re-applied.
  2. Attended all DMT classes, watched all videos, blogged, interacted with others and consulted with the tutor/lecturer. I also extensively searched and researched online to find useful code for my site.
  3. Developed and launched my site to HTML5 and CSS3 validation standard using a Bootstrap responsive framework.(see note re validation above)
  4. Developed a database, both for the Workout Generator tool (3 tables) and for the input from the contact form.
  5. Improved my design abilities by creating a single page site and applied many features to enhance UX, however I did not extend my abilities in the use of images and infographics
  6. Researched SEO and applied some techniques to the site, such as the use of keywords, use of multiple Google tools and a search engine 'readable' Facebook feed. The application of further SEO tools, such as Adwords, is now a post-launch consideration once analytics are closely examined.

Site build schedule & exceptions

Below is the anticipated site build schedule. Tasks not completed are marked in red.

Task description

Deliver by

Minimum viable product

Complete scope

System plan & database design

29 April

  • Personas
  • Wireframes
  • Architecture
  • Database table structure draft

Finalise design & commence build

6 May

  • Responsive framework design
  • HTML pages & forms
  • Theme developed for Wordpress

Complete build - HTML & CSS

13 May

  • HTML content pages
  • Contact forms
  • Links
  • Pop-ups
  • Sticky menu
  • Sticky contact button

Include interactive elements - JavaScript & jQuery

20 May

  • Google maps
  • Facebook feed (plug in)
  • Calendar tool
  • Facebook feed (coded)
  • SEO tools
  • Analytics

Database connections & testing - PHP & MySQL

27 May

  • DB insert data scripts
  • DB query & retrieve data scripts

Final tweaks & validation

3 June

  • Validation HTML5
  • Validation CSS3

Project delivery

10 June

  • Basic website
  • JS interactive elements
  • Forms submitting to DB
  • Dynamic website
  • Managed in WordPress
  • CSS3 interactive elements
  • SEO & analytics
  • Forms query & output from DB

Conclusion

The task of planning, designing and building a website from scratch deploying both client side and server side technologies seemed completely overwhelming at the outset given the huge holes in my understanding of web technologies. Gaining an understanding of the structure of website frontend and backend design was an important first step in determining which technologies I would need to use to achieve my vision, and how they each worked together.

The overwhelming volume of online information did cause substantial confusion in my search for the correct code 'snippets' to make elements of my site work. However, over time, I learned where to look to find the right information plus I was able to consult with my peers, many of whom were also seeking similar solutions.

Having a fully functional website as a final project outcome is a substantial and worthwhile achievement. As a bonus I now have far greater confidence in my technical abilities, as well as my ability to research and use online resources to problem solve web development and design issues.

See the finished result: www.finalproject.wilkinweb.net

References

Planning

UTS Project Management 2006, Project Vision (Scope) Statement and Project Proposal, Sydney, viewed 21 March 2014, <http://www.projects.uts.edu.au/stepbystep/initiation7 >

St-Pierre, D. 2013, Six Revisions: Improve your web design projects with good project scope, viewed 22 March 2014, <http://sixrevisions.com/project-management/web-design-project-scope >

Wikipedia 2014, Responsive web design, viewed 28 March 2014, <http://en.wikipedia.org/wiki/Responsive_web_design>

Brown, D. 2010, Communicating Design: Developing Web Site Documentation for Design and Planning, 2nd edn, Peachpit, San Francisco, USA.

Balsamiq Studios, LLC, 2014, Balsamic. Rapid, effective and fun wireframing software, Sacramento, USA, viewed 23 April 2014 <http://balsamiq.com/ >

Gliffy, Inc (US), 2014, Online Diagram Software and Flowchart Software - Gliffy, San Francisco, USA, viewed 23 April 2014 <https://www.gliffy.com >

U.S. Department of Health & Human Services 2014, What & Why of Usability - Personas, Washington DC, USA, viewed 30 April 2014 <http://www.usability.gov/how-to-and-tools/methods/personas.html >

Technology

Raggett, D., Lam, J., Alexander, I. & Kmiec, M. 1998, Raggett on HTML 4, Addison Wesley Longman, Essex, UK.

Castro, E. & Hyslop, B. 2014, HTML and CSS (Eighth Edition), Peachpit Press, USA.

Lloyd, I. 2011, Build your own website the right way using HTML & CSS (3rd edition), Sitepoint Pty Ltd, Collingwood, Australia.

Taub, M. 2013, Teach yourself jQuery Mobile in 24 hours, Sams Publishing, Indianapolis, USA.

Valade, J. 2004, PHP5 for Dummies, Wiley Publishing Inc., Hoboken, USA.

Wikihow 2014, Create a secure login Script in PHP and MySQL, viewed 21 March 2014 <http://www.wikihow.com/Create-a-Secure-Login-Script-in-PHP-and-MySQL >

SourceCodester 2014, How to create a login page in PHP & MySQL, viewed 21 March 2014 <http://www.sourcecodester.com/tutorials/php/4341/how-create-login-page-phpmysql.html >

W3Schools 2014, Websecurity login (), viewed 21 March 2014 <http://www.w3schools.com/aspnet/met_websecurity_login.asp >

W3Schools 2014, CSS3 border radius property, viewed 24 March 2014 <http://www.w3schools.com/cssref/css3_pr_border-radius.asp>

Coders Guide YouTube Channel 2014, Bootstrap Tutorials, viewed March - April 2014 <https://www.youtube.com/user/CodersGuide>

Codecademy 2014, HTML, CSS, JavaScript tutorials, viewed March - June 2014, <http://www.codecademy.com/ >

Bootstrap v 3.1.1, 2014, CSS, Components & JavaScript documentation, viewed 31 March 2014 <http://getbootstrap.com/>

Brackett, J. 2013, 'Adding a Facebook news status feed to a website', John Does Design Journal, weblog, viewed 14 April 2014 <http://johndoesdesign.com/blog/2011/php/adding-a-facebook-news-status-feed-to-a-website/>

World Wide Web Consortium 2002, XHTML 1.0 The Extensible HyperText Markup Language (Second Edition), 1 August 2002, viewed 17 April 2014, <http://www.w3.org/TR/xhtml1/>

Grogan, N. 2013, 'HTML5 vs XHTML 1.0: Who is winning the race?', Downgraf design weblog for designers, weblog, viewed 17 April 2014,<http://www.downgraf.com/all-articles/html5-xhtml/>

World Wide Web Consortium 2013, Standards HTML & CSS, viewed 17 April 2014, <http://www.w3.org/standards/webdesign/htmlcss>

w3schools 2014, jQuery Introduction, viewed 17 April 2014, <http://www.w3schools.com/jquery/jquery_intro.asp>

The PHP Group 2014, What is PHP?, viewed 18 April 2014, <http://www.php.net/manual/en/intro-whatis.php>

Oracle Corporation 2014, MySQL, viewed 18 April 2014 <http://www.mysql.com/>

Gee, N. 2011, Coolest Guides on the Planet - Install and configure Apache, MySQL & PHP on OS X Lion 10.7 and 10.6 viewed 28 April 2014<http://coolestguidesontheplanet.com/how-to-install-php-mysql-apache-on-os-x-10-6/>

Bitnami 2013, Bitnami Documentation - installing MAMP stack, viewed 28 April 2014 <http://wiki.bitnami.com/ >

Gordon, Z. 2012, How to build a responsive wordpress theme with Bootstrap, Team Treehouse, viewed 12 May <http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial >

Quirk Tools, 2014, Screenfly - test your website on different devices, viewed 30 May <http://quirktools.com/ >

W3C Markup validation service 2014, viewed 1 June 2014, < http://validator.w3.org/check>

W3C CSS validation service 2014, viewed 1 June 2014, < http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options>

Research

Gillies, J. & Cailliau, R. 2000, How the Web was born: the story of the World Wide Web, Oxford University Press, Oxford, UK.

Pew Research Center 2014, The Web at 25 in the USA, USA, February 2014, viewed 12 March 2014, <http://www.pewinternet.org/2014/02/27/the-web-at-25-in-the-u-s>

Reddit 2014, I am Tim Berners Lee. I invented the WWW 25 years ago and I am excited and concerned about its future, 12 March 2014, AMA comments, viewed 13 March 2014 <http://www.reddit.com/r/IAmA/comments/2091d4/i_am_tim_bernerslee_i_invented_the_www_25_years/>

Yohana, D. 2014, '7 backstories behind everyday technology terms', weblog, Mashable, viewed 13 March 2014 <http://mashable.com/2014/03/11/tech-terms-history/>

Pew Research Center 2014, 15 Theses About the Digital Future, USA, March 2014, viewed 27 March 2014, <http://www.pewinternet.org/2014/03/11/15-theses-about-the-digital-future/>

Awwwards 2014, Best single page websites, viewed 7 April 2014 <http://www.awwwards.com/websites/single-page/>

Cognetis Pty Ltd, 2006, Website accessibility Issues, Australia, viewed 1 May 2014 <http://www.cogentis.com.au/website-accessibility-issues.html >

Australian Human Rights Commission, 2014, Bruce Lindsay Maguire v Sydney Organising Committee for the Olympic Games, Australia, viewed 1 May 2014 < http://www.humanrights.gov.au/bruce-lindsay-maguire-v-sydney-organising-committee-olympic-games >

Australian Government, 2011, Accessibility, Australia, viewed 1 May 2014, <http://webguide.gov.au/accessibility-usability/accessibility >

PowerMapper Software, 2014, Sortsite – website testing tool, viewed 1 May 2014, <http://www.powermapper.com/products/sortsite/index.htm >

Pew Research Center 2013, Who’s not online and why?, USA, September 2013, viewed 18 May 2014 <http://www.pewinternet.org/2013/09/25/whos-not-online-and-why/ >

Australian Bureau of Statistics 2014, Personal Internet Use, February 2014, viewed 19 May 2014 <http://www.abs.gov.au/ausstats/abs@.nsf/Lookup/8146.0Chapter32012-13 >

Gerber, S. 2013, '13 UX design practices startups shouldn’t overlook', The Next Web Blog, weblog, viewed 28 May 2014 <http://thenextweb.com/dd/2013/08/17/13-ux-design-practices-startups-shouldnt-overlook/ >

US Department of Health & Human Services, 2014, User experience basics, USA, viewed 30 May 2014 <http://www.usability.gov/what-and-why/user-experience.html >

Appendix A

Code resources & acknowledgements

Bootstrap included custom files

css/bootstrap.min.css

js/bootstrap.min.js

Google

Maps https://developers.google.com/maps/

Analytics http://www.google.com.au/analytics/

Code for custom Facebook feed developed from

http://pastebin.com/H9i3E1Ae

http://johndoesdesign.com

CSS code for contact us sticky button

http://graphicfusiondesign.com/blog/design/creating-fancy-css3-fade-in-animations-on-page-load

Code for smooth scrolling

http://css-tricks.com/snippets/jquery/smooth-scrolling/   and

http://stackoverflow.com/questions/21010336/jquery-smooth-scrolling-to-link-on-other-page-with-offset

PHP form submit code help thanks to

http://www.sitepoint.com/forums/showthread.php?1167611-I-want-to-display-success-message-after-form-submission-without-changing-URL

Appendix B

Complete list of site file assets:

HTML

home.html

Images

images/ATB_logo.jpg

images/Karen.jpg

images/boxing.jpg

images/Chris.jpg

images/personaltraining.jpg

images/toughmudder.jpg

images/favicon.ico

CSS

css/judicustom_home.css

css/bootstrap.min.css

css/print.css

JavaScript

js/bootstrap.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

PHP

php/analytics tracking.php

php/form_reply.php

php/details.php

php/workout_search.php

php/custom_workout.php

php/judicustomfacebookfeed.php

php/header.php

php/contact.php

MySQL

Database – Wilkinweb

Tables

  1. exercises
  2. warmup
  3. cooldown
  4. contacts
  5. members

Appendix C

HTML5 validation report

Home page - single page scrolling

HTML validation home page

Workout search page

HTML validation workout search page

Custom workout page

HTML validation custom workout page

Form reply page

HTML validation form reply page

CSS3 validation report

This report has thrown errors due to the heavily customised Bootstrap CSS as shown in part below.

The customer CSS that I developed is showing two errors only, both related to the 'at' property for keyframes animations

Bootstrap CSS

CSS validation bootstrap

Custom CSS

CSS validation custom

 

 

 

 

 


Judi Wilkinson 11 June 2014