1
No

Description

Page

Task 1

HTML

5

Task 2

CSS

15

Task 3

Testing of the website & writing a test report

54

Task ...
Task 1
Introduction:

In my following task, I am going to show that m y website has been developed using XHTML
version 1.0...
Home

Opening
Times

Delivery
Rates

Category

Enquiry

Fig:1.1 Structure of the Website

Page Layout:
Layout Design
Old L...
Home: this is the main navigation page of my website. From this page it is possible to navigate to
other pages in the webs...
Fig 1.3: Home
Opening Times:

6
Fig 1.4: Opening Times
Delivery Rates:

7
Fig 1.5: Delivery Rates
Category:

8
Fig 1.6: Category

Enquiry:

9
Fig 1.7: Enquiry

Cross-browser compatibility testing:

10
Fig 1.8: Cross-browser compatibility testing

Conclusion:

In my above task, I have shown that my website has been develop...
Task 2
Introduction:
In my following task, I am going to show that I have produced only one external CSS file that
specifi...
#menu {height: 46px;padding-left: 14px;text-align:center;background:transparent url(../Flowers/images/bg.png) repeat-x; }/...
Fig:1.9 CSS code

Conclusion:
In my above task, I have shown that I have produced a single external CSS file that specifie...


No DTD rule violations



No typos and other minor errors



I have converted special characters to entity references...
Figure2.0: Checking the “index.html” HTML using W3C validation service.

16
Figure2.1: Checking the “OpeningTimes.html” HTML using W3C validation service.
The “Categories.html”, “DeliveryRates.html”...
Figure2.2: Checking the “Categories.html” HTML using W3C validation service.

18
Figure2.3: Checking the “DeliveryRates.html” HTML using W3C validation service.

19
Figure2.4: Checking the “EnquiryForm.html” HTML using W3C validation service.
Checking CSS using W3C validation service:

...
Checking CSS using W3

C validation service:
Figure2.5: Checking the “style.css” CSS using W3C validation service.

21
The “style.css” document was tentatively checked as CSS version 2.1. It passed without any errors
with 1 warning. The reas...
I think all the above testing and documentation has clearly demonstrated that I have tried to test
the website and provide...
1. The location of the shop which is displayed in Google Maps in “OpenningTimes.html” page is
dependent on an Internet con...
2. Many types of external CSS files could have been included in the website with features like
separate “print.css”, “tabl...
By clicking on the particular link, a user with accessibility issues will move directly to the content
which also hides th...
On some particular web pages, specific keyboard shortcuts are assigned to special
elements on the page. To focus or highli...
Figure2.9: Accesskey for button: “Submit/Reset” in “EnquiryForm.html”.

Support for mobile users:
Since, I am not allowed ...
Figure: multiple media types.
Then I have included a media specific (for mobile or handheld) style directly inside a style...
Figure3.0: media mobile.
Conclusion:
I think all the above analysis and critical evaluation has clearly demonstrated that ...
Bibliography
B, H. (2010). HTML and CSS: The Good Parts. O'Reilly Media.
B, K. (2006). HTML and XHTML: The Definitive Guid...
Upcoming SlideShare
Loading in …5
×

In some simple steps, your site can stand out from the rest. Here's how...

677 views

Published on

It's about how to develop a fully-fledged, mobile-ready ( floral ) website in easy steps...

Tools used: Adobe Dreamweaver, Adobe Illustrator, Adobe Photoshop, Sublime Text, Notepad++,

My most satisfactory project with the highest level of effort I've put into so far.

*Got a "Distinction" mark when I submitted this project as my assignment in my regular course at my university!

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
677
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

In some simple steps, your site can stand out from the rest. Here's how...

  1. 1. 1
  2. 2. No Description Page Task 1 HTML 5 Task 2 CSS 15 Task 3 Testing of the website & writing a test report 54 Task 4 Critical Evaluation 63 Introduction: Old Lane Flowers is a little florist business entity located in UK. They have only one store and put up for sale a range of well-liked flowers such as roses, lilies, tulips and orchids. They also fabricate remarkable flowery design for weddings, birthdays and funerals, and for occasional events such as Mother’s day and Christmas. Clientele can get and gather flora from the store or can organize to have flowers deliver to location in the nearby vicinity. 2
  3. 3. Task 1 Introduction: In my following task, I am going to show that m y website has been developed using XHTML version 1.0 Strict and mark a minimum of seven interlinked webpage. My website must meet the subsequent criterion:  It is in working condition in both Internet Explorer and Mozilla Firefox.  It is viewable on monitor with screen resolutions of 1024x768 without the user having to scroll horizontally.  I have included and used a range of media properly.  I have verified first-rate application of web design principle and made sure it is easy to find the way around and make use of the site. Structure of the Website: Navigational Plan Old Lane Flowers 3
  4. 4. Home Opening Times Delivery Rates Category Enquiry Fig:1.1 Structure of the Website Page Layout: Layout Design Old Lane Flowers Home Opening Times left bar footer Delivery Rates Category Middle right bar footer Enquiry footer Fig:1.1 Page Layout 4
  5. 5. Home: this is the main navigation page of my website. From this page it is possible to navigate to other pages in the website. This page is the main attraction point for the users. Opening Times: This page gives basic information about the business such as Opening Times and the location of the shop. I wanted to give this page all information about tracing Old Lane Flowers from anywhere in the world and its opening hours. Delivery Rates: This page contains information about delivery rates & areas where Old Lane Flowers could deliver to. Category: Different types of pages for different categories are described here. Enquiry: This page provides the users to submit any new queries make enquiries about any possible orders and write their comments about the website. Summary: This page is built in a well organized way and users can have a good idea about honey and its different feature. Here are some screenshots of the website: Home: 5
  6. 6. Fig 1.3: Home Opening Times: 6
  7. 7. Fig 1.4: Opening Times Delivery Rates: 7
  8. 8. Fig 1.5: Delivery Rates Category: 8
  9. 9. Fig 1.6: Category Enquiry: 9
  10. 10. Fig 1.7: Enquiry Cross-browser compatibility testing: 10
  11. 11. Fig 1.8: Cross-browser compatibility testing Conclusion: In my above task, I have shown that my website has been developed using XHTML version 1.0 Strict and marked using a minimum of seven interlinked webpage. 11
  12. 12. Task 2 Introduction: In my following task, I am going to show that I have produced only one external CSS file that specifies the drawing for the site. Each one of the HTML pages has been associated to this CSS file. There has not been any use of the style attribute or the <style> element in the site. Here is the CSS file: @charset "utf-8"; /* CSS Document final */ img{position:absolute; left:0px; top:0px; z-index:-1; } h1,b,p{voice-family:jane, female; stress:40; richness:90;}#wholepage{width:974px; height:850px; margin-left:auto; margin-right:auto; position:inherit;}#header{ width:974px; height:200px; left:0px; right:0px; position:inherit; background-color:#009C99; background-repeat:repeat; }#font_header{color:#333033; letter-spacing:1px;}.link_header{color:#009C99; letter-spacing:1px; }#Header ul{ margin:0px; padding:0px; list-styletype:none;}/* CSS Document final */#Header li{ margin:0px;padding:0px; float:left;}#Header li a{ display:block; width:150px; background-color:#D4E09E; margin-right:5px; text-align:center;} a:link{ color:#666; }a:visited{ color:#999; }a:active{ color:#CCC; }a:hover{ color:#C78B67; }#nav_bar{ float:left; width:972px; height:50px; background-color:#D4E09E; border: 5px #7BC6B1; border-top-style:double ; border-right-style:solid;border-bottom-style:inset; border-left-style:solid; }#left_bar{ float:left; width:160px; height:450px; top:0px; left:0px; position:inherit; background-color:#CCCC99;}/* CSS Document final */#middle{ top:0px; left:0px; float:left; width:654px; height:450px; overflow:hidden; position:inherit; background-color:#D4E09E; background-repeat:repeat; }#middle, b{ text-align:center; }.font_middle{color:#ffffff;letter-spacing:1px; } #right_bar{ float:right; width:160px; height:450px; position:inherit; left:1000px; top:270px; text-align:center; background-color:#FFFFCC; } .font_right_bar{color:#000000; letter-spacing:1px; font-size:16px;}#footer{ clear:left; width:974px; height: 200px; letter-spacing:1px; position:absolute; left:auto; top:718px; text-align:center; background-color:#009c99;} #font_footer{color:#009C99; letter-spacing:1px;}p, u:first-letter{ font-size:15px; font-weight:300; color:#666666; background-color:#DFE7B4; } b:first-letter{ font-size:20px; font-weight:bold; color:#666666; }b{ font-size:20px; font-weight:bold; color:#666666; text-align:center; background-color:#ffffcc; text-transform:uppercase; }h1{ text-align:center;} /* CSS Document final */#menu * { margin: 0px; padding: 0px; list-style-type: none; text-decoration: none;}div#menu {position:relative; }#menu ul.menu { white-space: nowrap;} /* CSS Document final *//* Geometrical arrangement */#menu ul.menu li { display: inline-block; height: 40px; position: relative; }#menu ul.menu li div { position: absolute;top: 40px;left: 0px;}#menu ul.menu li div div {position: absolute; top: -6px;left: 188px;} /* Escaping style for lower levels */#menu ul.menu li div ul li {display: block;float: none;width: auto;height: auto;}/** Graphics **//* Horizontal sliding doors */ #menu ul.menu li a {padding-left: 14px;background-image:url(../Flowers/images/item1.png);background-repeat: no-repeat; background-position: left -1000px;display: inline-block; margin: 10px 2px;}#menu ul.menu li a span {padding-right: 14px; padding-left: 0px;background-image:url(../Flowers/images/item1.png);background-repeat: no-repeat; background-position: right -1000px;display: inline-block; height: 27px;line-height: 27px; cursor: pointer;}#menu ul.menu li:hover a {background-position: left -54px;}#menu ul.menu li:hover a span {background-position: right -81px;}#menu ul.menu li.active a {background-position: left 0px;}#menu ul.menu li.active a span {color: #E8F3F7;background-position: right -27px;}/* Escape Horizontal doors */#menu ul.menu li div ul li a {display: block;padding: 0px;margin: 0px;background: none;}#menu ul.menu li div ul li a span {display: block;padding: 0px;background: none;height: auto;width: 165px;line-height: 25px;padding: 7px 0 7px 9px;white-space: normal; }/* Vertical sliding doors */ #menu ul.menu li div { width: 200px; padding-top: 6px;background-image:url(../Flowers/images/submenu-top.png); backgroundrepeat: no-repeat; background-position: 0px top;}#menu ul.menu li div ul { padding: 6px 6px 9px 6px; padding-top: 0;backgroundimage:url(../Flowers/images/submenu-bottom.png); background-repeat: no-repeat; background-position: 0px bottom;} /* Hover Effect on Submenus */#menu ul.menu ul li:hover{}#menu ul.menu li.active ul li a span {color: #5E5E5E;width: 165px;}#menu ul.menu li.active ul li a span:hover {color:#09C6F5;}#menu ul.menu ul li a span:hover{color:#FFD473; }/* Main header line */ 12
  13. 13. #menu {height: 46px;padding-left: 14px;text-align:center;background:transparent url(../Flowers/images/bg.png) repeat-x; }/* Text shadow */#menu span{color: #A67300;}#menu li:hover>a>span { color: #E8F3F7;}/* Fonts */#menu ul.menu li a span{ font -family: Arial;font-size: 13px;font-weight: 600;}#menu ul.menu li div ul li a span{ color:#5E5E5E;font-family: Trebuchet MS;font-size: 12px;fontweight: 400;} /* Lines between li */#menu ul.menu li div ul{padding-bottom: 8px;}#menu ul.menu li div ul li:first-child{border-top-width: 0px;}/* Menu logic( newly added from here) */ #menu li>div { visibility: hidden; }#menu li:hover>div { visibility: visible; }/* */ /* Hover Effect on Submenus */#menu ul.menu ul li:hover{background-color: #fff;}/* Lines between li */#menu ul.menu li div ul li{background-image:url(../Flowers/images/hr.gif);background-repeat: repeat-x;background-position: left bottom;}#menu ul.menu ul a.parent { background:url(../Flowers/images/arrow-left.jpg) no-repeat right center; margin-right: -1px;} 13
  14. 14. Fig:1.9 CSS code Conclusion: In my above task, I have shown that I have produced a single external CSS file that specifies the sketch for the site. Each one of the HTML pages has been connected to this CSS file. There has not been any use of the style attribute or the <style> element in the site. Task 3 Introduction: I am required to use the W3C validation service to check my HTML and CSS for any possible errors. I should try to remove any non-compliant features that I come across. I have to write a short report describing my testing effort. Checking HTML using W3C validation service: The “index.html”, “OpeningTimes.html” documents were tentatively checked as XHTML strict 1.0. They passed without any errors with 1 warning. The reasons why they passed because:      My insertion or inclusion of a DOCTYPE declaration. Without its inclusion, the validator will never recognize which version of HTML or XHTML to validate against. I have included a hint of the character encoding for the document. My inclusion of required rules and attributes. I haven’t inserted any non-standard elements. No mismatched tags.  No nesting errors 14
  15. 15.  No DTD rule violations  No typos and other minor errors  I have converted special characters to entity references, for example, “ becomes &quot  I have made sure that all elements and attributes are defined in the XHTML 1.1 DTD; I have used CSS styles to replace deprecated presentation tags.   I have replaced > with /> at the end of all empty tags  I have matched with all the start tags with an enclosing tag.  I have converted all elements and attribute name to lowercase.   I have enclosed all attributes values in quotations(“”) I have declared XHTML 1.0 namespace in the html element that matches the DTD. As I have already mentioned, I have added a document type declaration that declares the XHTML 1.1 DTD. 15
  16. 16. Figure2.0: Checking the “index.html” HTML using W3C validation service. 16
  17. 17. Figure2.1: Checking the “OpeningTimes.html” HTML using W3C validation service. The “Categories.html”, “DeliveryRates.html”, “EnquiryForm.html” documents were checked as XHTML strict 1.0. They had some very minor and insignificant errors with some warnings. 17
  18. 18. Figure2.2: Checking the “Categories.html” HTML using W3C validation service. 18
  19. 19. Figure2.3: Checking the “DeliveryRates.html” HTML using W3C validation service. 19
  20. 20. Figure2.4: Checking the “EnquiryForm.html” HTML using W3C validation service. Checking CSS using W3C validation service: 20
  21. 21. Checking CSS using W3 C validation service: Figure2.5: Checking the “style.css” CSS using W3C validation service. 21
  22. 22. The “style.css” document was tentatively checked as CSS version 2.1. It passed without any errors with 1 warning. The reasons why it passed because:    I have tried to include all required rules and attributes. I think I haven’t tried to insert any non-standard elements. No incompatible tags.  No nesting error  No DTD rule violation  No typo and other small error Cross-Browser compatibility testing: Different web browsers apply slightly different formatting to each element. For example, Firefox actually uses a CSS style sheet to format HTML tags. To see it on a Windows, we’ll find the file in the C:Program FilesMozilla Firefoxreshtml.css. I have tested the website using both Internet Explorer and Mozilla Firefox. There are no significant differences between the renderings of the mentioned browsers. I will provide a list of possible causes why I think there were no differences:  All throughout my coding, I have applied consistent font sizes.  I have improved table borders and created consistent table cells.  I have removed or used padding and margins minimally or used it only when it was absolutely necessary.  I have removed borders from linked images if there were any.  I have set consistent list indents and bullet types.  I have removed quote marks from quoted material where it was possible or necessary. Conclusion: 22
  23. 23. I think all the above testing and documentation has clearly demonstrated that I have tried to test the website and provided a short description of all the problems and their possible remedies. Task 4: Introduction: I am required to highlight the strong and weak points, suggesting improvements, and proposing further improvements. Strong points: 1. Good navigation systems allow the user the full variety of pages they can check out 2. Color blending of my site is nice. All colors are carefully chosen after tinkering with several colors. All the colors are easy with the eyes and the hexadecimal color codes work finely with both browsers and passes with fine colors! 3. Ease of use, easy to find navigation options to locate information 4. My site is easily viewable or usable in most popular screen sizes (especially in 1024*768) without visitor having to scroll horizontally (left to right). 5. Link pages accurately work in both IE and Mozilla Firefox. 6. Links are underlined so that they are instantly viewable to the visitor, with hovering accessibility options for further tooltips or features. 7. All my codes are properly indented using proper conventions, with helpful hints or comments for easy and accessible code viewing. 8. I think my page banner or header image contain appropriate motif or theme for the website contents. Weak points: 23
  24. 24. 1. The location of the shop which is displayed in Google Maps in “OpenningTimes.html” page is dependent on an Internet connection which is a problem and the map fails to load when no Internet connection is available 2. My webpage is not a dynamic one. 3. The text which contains links is colored light blue and underlined. In some context, user may find discomfort or difficulty in reading the text in improper or poor lighting conditions. Further Improvements: 1. Using a single external CSS file for seven pages makes the CSS file large, complicated and difficult to manage or maintain, so I could have used multiple CSS files or single CSS file for every single HTML pages for the design of the site. 2. If I had used an external CSS file from the beginning of the coding, I would have saved a lot of time and gained a lot more control over my code. 3. If I had not used the “style” attribute in inline styling from the starting of the coding, I would have saved a lot of time & energy, especially finding and deleting inline CSS styling and replacing it appropriate coding is hectic to say the least. 4. If I had not used the “<style>” element in embedded styling from the starting of the coding, I would have saved a lot of time & energy. 5. I have tried to use HTML font attribute initially, but later decided to use all CSS font styling. Deciding this in the first place would have saved me a lot of time. Proposition for further developments: 1. Some actions or simply some JavaScript codes will do the trick for the “Enquiry.html” page to make it more functional and interactive. 24
  25. 25. 2. Many types of external CSS files could have been included in the website with features like separate “print.css”, “tablet.css” files for better user navigation and more accessibility. 3. I could have embedded some HTML5, CSS3 for further developments. Accessibility Issues: I have included an accessibility improvement feature like in-page browsing. It’s like having an option in the main navigation bar as a link to specific page content headings. Figure2.6: In-page browsing in “DeliveryRates.html”. 25
  26. 26. By clicking on the particular link, a user with accessibility issues will move directly to the content which also hides the header image from the view for better viewing of the content. Figure2.7: In-page browsing in “OpeningTimes.html”. 26
  27. 27. On some particular web pages, specific keyboard shortcuts are assigned to special elements on the page. To focus or highlight the cursor straightforwardly to one of these elements, press Shift+Alt+AccessKey. Figure2.8: Accesskey for label: “name” in “EnquiryForm.html”. Which key AccessKey depends upon the site. It is determined by the site admin or author, not Firefox. 27
  28. 28. Figure2.9: Accesskey for button: “Submit/Reset” in “EnquiryForm.html”. Support for mobile users: Since, I am not allowed to use more than one external CSS file, so I have resorted to use the following technique. I have specified multiple media types (namely screen, mobile & handheld) by separating them with commas: 28
  29. 29. Figure: multiple media types. Then I have included a media specific (for mobile or handheld) style directly inside a style sheet using the @media directive like this: 29
  30. 30. Figure3.0: media mobile. Conclusion: I think all the above analysis and critical evaluation has clearly demonstrated that I have tried to evaluate the website and provided a short description of all the strong and weak aspects and their possible improvements, propose ideas for further improvement. Final Conclusion: I think all the above testing and documentation has clearly demonstrated that I have tried to test the website and provided a short description of all the problems and their possible remedies. 30
  31. 31. Bibliography B, H. (2010). HTML and CSS: The Good Parts. O'Reilly Media. B, K. (2006). HTML and XHTML: The Definitive Guide. O'Reilly Media. Chrisholm, W. a. (May (2008)). Universal Design for Web Applications: Web Applications for Everyone. O’Reilly Media. Felke-Morris. (2010). Web Development & Design Foundations. Pearson. K, L. (2010). eCommerce 2010. Pearson. Lawson, B. a. (2010). Introducing HTML5. Pearson. Niederst, J. (2006). Web Design in a Nutshell. O'Reilly Media. 31

×