Advanced Web Design - Report Example

Advanced Web Design Assignment Dusan Pancik 23/12 Table of Contents Introduction 2 Planning 3 Architecture 5 Development 5 Implementation 11 Conclusion 12 Bibliography 13 Introduction The Internet is a wide-reaching collection of networks that connect the millions of organizations, government agencies, educational institutions, and individuals (Shelly, Cashman, & Vermaat, 2005). More than a one-half billion people all over the world make use of the Internet every day (Shelly, Cashman, & Vermaat, 2005, pp. 11-12) and (Norton, 2001, p. 339). For this project, I have created a small to medium enterprise business website for a holiday house called RS Holiday House which provides accommodation services. In this case, the client was my cousin who is the owner of the house. As the house is nearly due the opening, he requested a live-functioning web site in high standard, with user friendly and easy navigation characteristics. In this report, the experience of developing the RS Holiday House website is reflected and based on the skill areas learned in the workshop sessions. The project goal was, also to explore alternate techniques, implement functions using HTML5, CSS3, and JavaScript and allow us to submit online by making the website more user-friendly. The priority area was to develop a website to display information about the business that the RS Holiday House offers and the ability to book a reservation. The creation process is represented in the plan outlined below. Planning Architecture Development Implementation The available learning rescores and support are represented in the report, and interactions are critically analysed. Planning The process of web development varies from developing the easiest static pages with plain text to the highly complex web based electronic businesses, social network website or Internet applications (Alexander, 2009), (Shelly, Cashman, & Vermaat, 2005), and (Shelly, Cashman, & Vermaat, 2005). The planning process begins with the consultation between the client and the developer. In this phase of the website development, I have gathered customer requirements. At this stage, a discussion was carried out with the customer regarding his requirements. I also analyzed the main areas that will be addressed or covered in the website. This process was a good practice which, I have learned in the project conducted earlier on in week three. During this period, I had the opportunity to try out both sides of a client and a developer role. Knowing now how to ask right questions to find out clients requirements helped me to know how to prepare myself for this project. The outcome of the client-developer consultation was that the website should work on the highest standard. It should also be simple but, modern. One of the client’s requirements was that the customer would be able to book a reservation right away from the website. As the business owner does not consider himself as a novice user of the computer, he requested the site to be manageable by emails. Considering this, I have agreed that it would be extremely helpful to create a simple reservation and a contact form, where the customer would be able to send his query and book a stay at the RS Holiday House without leaving the web site. The client asked for something which will clearly represent the nature of the business regarding the logo. A prototype consisting of the wire frame and the logo was shown to the client after identifying the requirements and conditions. These are shown below in the Figure 1 and Figure 2. [Figure 1: wire frame prototype for the RS Holiday House] [Figure 2: creating logo for the RS Holiday House using Photoshop] For creating wire frame and logo, I have used software called Fireworks and Photoshop, which are parts of the Adobe CS5 package. Architecture Figure 3 is a graphical representation of the RS Holiday House’s pages needed for the website and the route to be followed to get to them. This is a generic website map; it shows the functions or pages most SMEs are likely to require on their website. A description of each page exists in the appendix. [Figure 3: site architecture for the RS Holiday House] Development This phase is the most significant phase for any web system development. It incorporates the utilization of splice tools regarding the design and development of the system (webarya, 2009) and (Alexander, 2009). I have chosen software called Adobe Dreamweaver as my web development application. I have decided to work with Adobe Dreamweaver mainly because I feel more familiar with the software application; using and creating forms, tables, and buttons together with all other adobe software such as Photoshop, Flash or Fireworks. I have chosen for HTML5 as the scripting language for this task. I have chosen HTML5 because of the culmination of the previous specs as well as newer and richer features. It is made to support existing content (backward compatible) and to support the creation of web applications. What is quite interesting is the fact that it does not only stop there. It states for the first time how browsers should deal with error handling. Together with HTML5, I have decided to use CSS3. CSS3 allows designers to enter one value and have this instantly synced and normalized for each vendor-specific prefix with the corresponding code generated automatically. At this point of the development process, I was ready to start building the actual web site. I have chosen basic grey combined with colors for the theme. As it was agreed earlier on with the client, this would give the whole look more professional touch. It is clearly illustrated in Figure 4. [Figure 4: theme for the RS Holiday House] After sorting out the theme, I was able to start building and adding content to the sites. Starting out with homepage I tried to keep it as simple as possible, according to client’s request. Therefore, the index page would include the basic layout adopted by the wire frame. Starting from the top below the logo and navigation bar, I have implemented a nice jQuery -slideshow. This gave the home page a professional look and clearly indicates what will be the purpose of the site. Underneath the slideshow, very useful links were placed to give the customer more information about the RS Holiday House itself, location and all the services that the business provides and offers etc. Customers are able to find information like weather, map, directions, activities and sightseeing on this page right-away. As it was another requirement by the client, every page of the RS Holiday House web site contains these useful links. This is shown below in Figure 5. [Figure 5: slideshow and pages for the RS Holiday House] The main function for RS Holiday House like reservation, prices and contact are located on the top of every site for RS Holiday House page. The reason I have located these links at the top is that it should be visible and easily noticeable by the customer, because the whole purpose of the site is to get customers to book a stay at RS Holiday House. This is shown below in Figure 6. [Figure 6: main link/functions for the RS Holiday House] What makes these links/pages very useful is that they contain forms where, the customers will fill their contact data and dates to book or reserve a stay at the RS Holiday House. After filling out specific fields with needed information, the customer will get a message saying that the query will be looked at. He will also receive a reply shortly with the confirmation. Customers query or a reservation will be automatically received by the owner of the business by an e-mail. The owner will have all the data needed regarding to book a stay or answer customer’s query. This is shown below in Figure 7. [Figure 7: reservation form for the RS Holiday House] Another feature of the main links/pages is the price list. I have included this in the main links/pages because the customer would appreciate the opportunity of calculating his stay and all expenses without leaving the web site. The final part of the main links is the contact section, where customers can again contact the owner of the business using the prepared form or just find out the information regarding contacting the RS Holiday House office. As it was mentioned earlier, more links regarding the nature of the business are located in the bottom half of every page structure for the RS Holiday House web site. The purpose of those links is to support and help decide customers to book a stay at RS Holiday House. The information about the business, restaurant, activities, directions, location and weather included provided via these links. Using these links customers would be able to plan their stay at the RS Holiday House again without leaving the web site as it contains all the information needed like, weather, directions and sightseeing possibilities. The weather and map page are live and updated. This is shown below in Figure 8 and Figure 9. [Figure 8: map page for the RS Holiday House] [Figure 9: weather page for the RS Holiday House] Combining the design, architecture, structure and functions of the RS Holiday House web site will deliver the full potential of the business. The content completes and supports the whole outcome of the web site. This was crucial because there are needs for the professionalism in terms of content as well as appropriateness for the website (webarya, 2009). Implementation At this stage, I was dealing with the finalisation and uploading of the RS Holiday House web site. I have chosen www.000webhost.com as my server provider. This provider offers free services with quick and simple registration. To upload the site, I have used software called Adobe Dreamweaver and the provided data from the server host. Another reason for choosing 000webhost.com, was that the ability to test the website ‘live’ before ordering and paying for the domain where, I would be able to choose the http address. After uploading and going ‘live’, the testing of the website was required. Eisenberg (2006) outlines that comprehensive web testing of a website is the main step to make the website operate correctly. There are a lot of tests regarding the insurance of the web based system usability and effectiveness of usage. These types include unit testing, combined testing, load testing, stress testing, and usability testing (Eisenberg, 2006). Conclusion In this report, I have presented a detailed analysis of the web based application development and implementation. I have also outlined some main aspects of the development of a web site for the RS Holiday House. The main topics covered in this report are planning, architecture, development, functions and implementation. I hope this will provide a deep insight into overall operational structure and functionality of the RS Holiday House web site. Bibliography Alexander, B. (2009). Web Site Development Process - The life-cycle steps. Retrieved Novemeber 08, 2009, from Macronimous.com: http://www.macronimous.com/resources/web_development_life_cycle.asp Danino, N. (2001, November 14). Human-Computer Interaction and Your Site. Retrieved November 08, 2009, from SitePoint.com: http://www.sitepoint.com/article/computer-interaction-site/ Demrow, D. (2007). The System Development Life Cycle (SDLC) of Web Development. Retrieved 11 08, 2009, from http://www.euro-innova.com/WebsiteSDLC.doc Dix, A., Finlay, J., Abowd, G., & Beale, R. (1998). Human-Computer Interaction. Hillsdale: Prentice Hall. Dolson, J. C. (2009). Web Accessibility and the Law. Retrieved November 08, 2009, from http://www.practicalecommerce.com/articles/1167-Web-Accessibility-and-the-Law Eisenberg, B. (2006). Four Steps to More Effective Web Site Testing. Retrieved November 08, 2009, from http://www.clickz.com/3624130 GeekInterview. (2009). SDLC for Web Development. Retrieved November 08, 2009, from GeekInterview.com: http://www.learn.geekinterview.com/it/sdlc/sdlc-web-development.html Helander, M., Landauer, T., & Prabhu, P. (1997). Handbook of Human-Computer Interaction. Amsterdam: Elsevier Science Pub Co. Henry, S. L. (2005). Introduction to Web Accessibility. Retrieved November 08, 2009, from http://www.w3.org/WAI/intro/accessibility Hewett, Baecker, Card, Carey, Gasen, Mantei, et al. (2009). ACM SIGCHI Curricula for Human-Computer Interaction. Retrieved August 22, 2009, from sigchi.org: http://sigchi.org/cdg/cdg2.html#D3 Kyrnin, J. (1999). What do the Accessibility Guidelines Mean to Me? Retrieved November 08, 2009, from http://webdesign.about.com/od/accessibility/a/accessibility_g.htm Leonard, S. (2006, August 23). E-Business and Its Advantages. Retrieved November 08, 2009, from EzineArticles.com: http://ezinearticles.com/?E-Business-and-Its-Advantages&id=280089 Miller, E. (2009). Five Rules of Effective Website Navigation. Retrieved November 8, 2009, from http://graphicdesign.about.com/od/effectivewebsites/a/web_navigation.htm Myers, B. A. (1998). A Brief History of Human Computer Interaction Technology. ACM interactions. Vol. 5, no. 2 , 44-54. Nielsen, J. (1994-b). Enhancing the explanatory power of usability heuristics. Proc. ACM CHI94 Conf. (Boston, MA, April 24-28), 152-158. Enhancing the explanatory power of usability heuristics. Proc. ACM CHI94 Conf. (Boston, MA, April 24-28), , 152-158. Nielsen, J. (1994-a). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods. New York, NY.: John Wiley & Sons. Norton, P. (2001). Introduction to Computers, Fourth Edition. Singapore: McGraw-Hill. Shannon, R. (2009). Website Navigation. Retrieved November 8, 2009, from http://www.yourhtmlsource.com/accessibility/navigation.html Shelly, Cashman, & Vermaat. (2005). Discovering Computers 2005. Boston: Thomson Course Technology. Read More