Creative Web design & CMS Development - Assignment Example

? Website Design Table of Contents Introduction 3 2.Theoretical Research and Evaluation 3 3.Planning, Analysis and Design 5 A.Website 5 B.Website2 8 4.Applied Research and Implementation 10 A.Website 1 10 B.Website 2 24 5.Implementation Evaluation 31 6.Test 33 7.Appendix 41 A.Website 1 41 B.Website 2 43 8.References 47 9.Bibliography 47 1. Introduction “Fries Deli” is a small local fast food outlet located in a shopping mall that provides fries with various sauces to dip the fries in at decent pricing. Fries Deli provides a sitting area where the food is served in a lively atmosphere or if requested by the customer, the food can also be packaged in a way such that it is easy to carry around while shopping in the mall. Fries Deli also provides free delivery of packaged food items within the locality only if the requested items cost sum to a certain limit. At the outlet, the customers are handed the menu that contains the items with pricing. This menu is also displayed on top of the counter. But for the customer that request for home delivery the menu is informed to them over the phone from which the customer chooses. The purpose of this report is to review and convey the basic theoretical and implementation knowledge of web development through suggesting two enhancements to the existing setup of Fries Deli. The report presents an online static informational system for the Fries Deli and a dynamic feedback system for publishing user feedback regarding the various Fries Deli food services. It implicitly highlights how the technologies are picked from the available choices in view to the requirements of these two websites. 2. Theoretical Research and Evaluation Websites comprise of information coded in a form which can easily travel over the internet. The informational needs of a person or company keep varying [1]. In accordance to these ever changing requirements, websites are of different types. Websites could be informational (static pages where content remains the same) [2], data-driven (dynamic pages where the updated data is displayed) [3], interactive (where some type of input is required from the user), closed access (private i.e. accessible only to authorized users), open websites (accessible to public) and website with frequently updated content. In order to handle this wide variety of websites, there are different methods of creating them. In the earlier ages of web development, the developers used to build websites from scratch. With the increase in web complexity [4] and advancement of web technology, web tools and editors [5] were developed that either assisted with the coding process, or made the web designing process entirely visual or both. And finally the content management systems were introduced [6]. Whatever method was chosen, the websites created are required to be usable and accessible [7, 8]. The objective of the website is to share and access information. The website should be designed such that it is easy to use and learn them [9]. They must allow for both the abled and disabled users to be able to retrieve information. In order to access websites, they need to be assigned a domain name and be hosted onto some server wherefrom they can be accessed. The browser is a client application the runs on the user’s computer. It takes the request from user, transmits them onto the network and displays the server’s response to the request. Thus there are two areas where data can be manipulated; the client side and the server side. There are web standards that require to be followed by the websites created [10, 11]. XHTML, HTML is the standardized markup language used for presenting the content of a website i.e. the headings, contents, links, images, forms, etc. CSS is the standardized styling language used for defining the visual style of the website interface i.e. the colour of headings, text, links, etc. JavaScript, AJAX, JQuery, Flash are some of the language for programing the client side scripts. Php, Asp, .NET, etc. are some of the languages for programing server side scripts. XML, MySql, Oracle, etc. is the technology for storing data behind websites and applications. In view to the requirements of a person or company, the appropriate technology is selected and used. 3. Planning, Analysis and Design This section discusses the requirements and interface design of the two websites. A. Website 1 Website 1 is an informational site which does not require much user interaction and frequent content update. Therefore the website mainly has static pages. However, for the interactive contact page, both client and server scripting was used. An editor was used to build the webpages. Requirements The website shows any deal offered by Fries Deli. The website provides a small description of Fries Deli. Website provides the contact information of Fries Deli for ordering on phone. Website lists down all the sauces and toppings that are served with the fries along with their pricing. Website includes some method of sending email to Fries Deli. The length of the message must be limited to a certain length. Colour Scheme The colour scheme of the site would be gray, maroon, white and black. All headings would be maroon while the body text would be black. The footer would be gray. Page Layout Home Page: Gives a brief description of what Fries Deli is. About Page: Where the historical background and information about Fries Deli is mentioned. Menu Page: Where all the food items with their pricings are listed. Delivery Page: Where the delivery area and rates are stated. Contact Page: Where a form is provided to the user to contact the site. Template The template to be followed is shown in Figure. Figure 1 Basic Template for Website 1 Usability and Accessibility in the Proposed Design The feature of usability is provided by making the navigation easily understandable. The consistent navigation on each page makes all pages accessible from every page. The contact page provides confirmation of delivery of message. The links exist in two forms i.e. as part of menu and within text. The menu link spreads over the entire menu division. The in-text form of links is styled to stand out from the normal text. There are no blinking texts or graphics or popup boxes that can irritate the users. There are no unneeded splash screens or heavy graphics that waste user’s time and interest by taking too much time to load. A consistent template was used throughout the website. The color scheme is chosen such that the user does not require straining his eyes in order to read. B. Website 2 The website is a feedback system which requires considerable user interaction. The content gets updates frequently as well. Therefore a content management system was used for its development. All the content of the site is maintained in a MySql database. Figure 2 Content for Website 2 Saved in MySql Database Requirements Website must show all the areas separately that may require feedback. On the feedback page of each item, there must be a short description. The user can provide feedback without having to register or logging into the website. In order to post a feedback, the user has to provide Name and email. There is a limit to the length of message a user can send. The user can share an item on display with a friend. Colour Scheme The colour scheme of the site was would be similar to that of website 1; gray, maroon, white and black. All headings would be maroon while the body text would be black. The footer would be gray. Page Layout A total of 7 articles form the site. Home Page: Where the aim of the site is mentioned. Feedback Page: Provides the motivation to provide feedback to Fries Deli. Items Page: To collect feedback from the user about the items on the menu. Prices Page: To collect user feedback for the prices of items. Fries Page: To take user feedback for the fries. Toppings Page: To take user feedback for the toppings. Sauces Page: To take user feedback for the sauces. Template The template to be followed is shown in Figure. Figure 3 Basic Template for Website 2 Usability and Accessibility in the Proposed Design A simple and consistent design layout is provided which makes the website easily understandable. The links are styled to stand out from the normal text. Any page can be accessed from any opened page. There are no heavy graphics. The colour scheme facilitates ease in reading the text on screen. The font size can be adjusted according to the user’s preference. 4. Applied Research and Implementation A. Website 1 A small informational site was created using a free web template available on the Internet. The screenshot of the layout of the template is shown in figure below. Figure 4 Original Template Downloaded from Internet For the development of website 1, Adobe Dreamweaver CS5, a web development software was used. The WYSIWYG feature of the software facilitates the website creating process as the results of the coding can be seen simultaneously. Figure 5 Dreamweaver CS5 for Website 1 The template was loaded into the Dreamweaver and changes were made as per our needs. The template used a separate styling CSS file for styling the webpages pages. This CSS file called common.css as shown in Figure below. Figure 6 Common Style Sheet of Template The style sheet was tweaked i.e. the fonts and colours of the template were adjusted to match our needs and the final layout was set as shown in Figure 7. Figure 7 Customized Template for Website 1 The banner and logo for the site were created in Adobe Photoshop CS5, a graphics creating and edition tool. The Logo: The background was set to be transparent as the image when exported eventually as a jpeg would automatically take a white coloured background. The size of the logo was set to be 242x92 pixels. Figure 8 Logo Initial Settings The design of the logo was kept simple. It was designed using two layers of texts of different fonts and sizes but of the same colour, black. The text ‘Fries Deli’ was assigned the font ‘Bernard MT Condensed’ and given the size of 44pt. The text ‘fries that take your breath away…’ has the font ‘Gloucester MT Extra Condensed’ with 18pt size. Figure 9 Logo Layer Design The logo was then exported as a jpeg image. Figure 10 Saving the Image in Usable Form Figure 11 Setting jpeg as the Output Format The final logo is shown in Figure below. Figure 12 The Logo of Company The Banner: The banner was set to be of colour white with an image of fries in a plate. The image was obtained using Google Search from the link http://www.texaschicken.com.sg/menu-sides-french-fries.html. The size of the banner was set as 847x213 with transparent as the background initially. Figure 13 Setting the Banner Two layers were used in designing the banner; one for the background and one for the image. Figure 14 Layers of the Banner The banner was then exported as a jpeg image. Figure 15 Setting Output format of banner The final banner is shown in Figure below. Figure 16 Banner for Website 1 Once, the logo and banner were designed, the positions of the two images were set in the page, such that the logo resided on top of the banner. The image used in the About Page which depicts the sitting area of Fries Deli, was taken through a random Google search. The image was cropped to match our needs. Figure 17 About Page of Website 1 Since the website was designed to be an informational site, it required very little user interaction. The only interaction was in the contact page where the user can send an email to Fries Deli. Figure 18 About Page Containing Form for User Input In the contact page, DHTML was used. Client side scripting (Javascript) was used to validate user entries while server side scripting (php) was used to mail the message details filled in by the user. Figure 19 Portion of Contactus.php Form Showing Javascript Input Validation B. Website 2 The open source CMS, Joomla was used to build the second website. Joomla’s default template was used and customized to fit our needs. Figure 20 Joomla Default Template The unnecessary menu items and pages were removed and reset from the administrative panel. The relevant menu items, categories and content articles were added instead. The featured article which is displayed on opening the site and the ordering of menu items and articles is also set through this panel i.e. the Menu Manager of Joomla. Figure 21 Customized Menu for Website 2 The colours of the template, banner and logo etc. were adjusted in the underlying CSS to match with the proposed colour scheme and theme. The final layout of the page is shown in Figure below. Figure 22 Customized Template The banner and logo made for Website 1 was reused. The banner however was slightly adjusted to show a boundary. So the design of the layer comprised of three layers; the background, the image and the boundary. The banner formed is shown below. Figure 23 Banner for Website 2 As Joomla does not support posting of comments on the published articles, an external Joomla plugin, JComment, was used to achieve the desired functionality. The plugin was downloaded to a local directory from Internet. Figure 24 Downloading JComment from Online Joomla Extensions Directory It was installed by giving the downloaded file’s path in the extension manager. Figure 25 Installing JComment Using Extension Manager The add-on was then listed in the components menu of the site. Figure 26 JComments listed as a Component after Installation The extension was configured to allow comments for selective category. Figure 27 Configuring JComment to Apply on Selected Category Within a category, the JComment can be disabled for an article. Figure 28 Disabling JComment for an Article in a Selected Category 5. Implementation Evaluation All the requirements stated for both the websites have successfully been achieved. Website 1 provides complete information regarding the company in its different pages. And the feature of emailing Fries Deli has also been added to the website (See Figure 9). Website 2 provides a listing of all the areas that can require user feedback. The feedback feature is only available in the areas that require feedback. Figure 29 Feedback Request Page Furthermore, a user can also share a page. Figure 30 Form to Share Open When the EMail Icon is Clicked As part of future work, an online ordering system could be embedded within the Fries Deli setup. In that case, both the websites would require revision as then the users would have to register and log into the websites. Through an online ordering system, the revenue of the company would also increase. 6. Test In order to test the website, the sites need to be hosted onto a server. Using Xamp or Wamp, the personal computer was made a server and the sites were initially developed and run on them. But locally, the email sending feature does not work because a mailing server was required for the purpose. A free hosting server was used to upload and test both the sites. Website 1 can be accessed from the link: http://info.friesdeli.webege.com/ Figure 31 Website 1 Hosted While website 2 can be accessed from the link: http://friesdeli.webege.com/ Figure 32 Website 2 Hosted All links on the web pages work correctly for both the sites. Email gets posted to the specified email id for website 1. The email id is set in the file “contactform.php”. Figure 33 Setting Email Behind Website 1 Figure 34 Email Typed Figure 35 Email Sent Figure 36 Email Received The comments get posted for the associated articles in website 2. The user posts the comment; the administrator reviews it and publishes it. Once published, the comment is added to the article. Figure 37 Comment Posted on Website 2 The administrator panel can be accessed by the following link: http://friesdeli.webege.com/administrator The username is admin and the password is 1234. Once logged in the comments panel can be opened as follows. Figure 38 Comments Panel of Administrator Figure 39 Publishing the Comment 7. Appendix A. Website 1 Figure 40 Home Page Figure 41 About Page Figure 42 Contact Page Figure 43 Menu Page Figure 44 Delivery Page B. Website 2 Figure 45 Home Page Figure 46 Feedback Page Figure 47 Items Page Figure 48 Prices Page Figure 49 Fries Page Figure 50 Toppings Page Figure 51 Sauces Page 8. References [1] Ping Zhang1, Gisela M. von Dran (2000) Satisfiers and dissatisfiers: A two-factor model for website design and evaluation. Journal of the American Society for Information Science. Volume 51, Issue 14, pages 1253–1268, 2000 [2] Ricca, F. & Tonella, P. (2003) Using clustering to support the migration from static to dynamic web pages. Program Comprehension, 2003. 11th IEEE International Workshop. Pages 207-216 [3] K. Selcuk Candan,Wen-Syan Li, Qiong Luo, Wang-Pin Hsiung, Divyakant Agrawal (2001) Enabling dynamic content caching for database-driven web sites. Proceedings of the 2001 ACM SIGMOD international conference on Management of data. ACM SIGMOD Record, Volume 30 Issue 2, USA [4] Stephanie Hackett, Bambang Parmanto & Xiaoming Zeng (2004) Accessibility of Internet websites through time. Proceedings of the 6th international ACM SIGACCESS conference on Computers and accessibility. Issue 77-78 [5] Eric Rosebrock (2003) Creating Interactive Websites With Php and Web Services. Page 5. John Wiley & Sons [6] Sarah Baxter, Lisa C. Vogt (2002) Content management system. US Patent number 6356903 [7] Jakob Nielsen, Kara Pernice (2010) Eyetracking Web Usability. Page 37. New Riders [8] Julian Merget (2010) SKY BET - Business Report: An Analysis of the Use of Internet Technologies. Section 4.1. Page P-9. GRIN Verlag [9] Jenifer Tidwell (2005) Designing Interfaces. O'Reilly Media, Inc. [10] AJon Duckett (2011) Beginning Web Programming with HTML, XHTML, and CSS. John Wiley & Sons [11] K.L. James (2010) The Internet : a User's Guide. Page 192. PHI Learning Pvt. Ltd 9. Bibliography JComment. URL http://extensions.joomla.org/extensions/contacts-and-feedback/articles-comments/9985 Capture web with FireShot: screenshots and annotations for Firefox, Chrome and Internet Explorer! URL http://screenshot-program.com/fireshot/ Moving Joomla 2.5 from localhost to live site. URL http://www.jomsocial.com/blog/moving-joomla-25-from-localhost-to-live-site.html Free Web Hosting with PHP, MySQL and cPanel, No Ads URL http://www.000webhost.com/ Joomla Tutorial - How to create a Joomla site manual URL http://www.siteground.com/tutorials/joomla/ Filezilla URL http://filezilla-project.org Different Methods for Creating, Building Making & Designing Your Website | LearnWeb101 URL http://www.learnweb101.com/creating-and-building-websites-2.html There Are Many Different Ways To Make A Website | Basic Information URL http://www.the-website-teacher.com/pre-building/basic-information/there-are-many-different-ways-to-make-a-website.html Contact Form URL http://www.html-form-guide.com/contact-form/php-contact-form-tutorial.html Read More