Landing-page - Report - Review -- 2
Budget: €8 – €30 EUR
Construct a static website for a specific purpose. You must select the appropriate tools to use in order to achieve this, and you must communicate your ideas clearly and concisely.
In the first part you will undertake some practical development work. In the second part you will write a report covering a range of topics. In the final part you will undertake a post-mortem analysis of the strengths and weaknesses of your development process and solution.
You will only work on the index.html and styles.css files, adding the required content so that they meet the following criteria:
The index.html should be syntactically error-free and should validate as HTML5.
The styles.css should be syntactically error-free and should validate as CSS (level 3).
The two files together implement the wireframe layout provided in wireframe.png and follow the style guide defined in styleguide.pdf.
The resulting web page must be usable.
The resulting web page must be accessible.
Part 1:
Header
The landing page header consists of four links to the four sections of the completed website. The texts to display for each link are given in the wireframe and must be used as provided.
Main content
The main content area of the landing page consists of the museum name, museum location, and the sample of 6 items. For each sample item where the wireframe indicates the ‘Image title’, you may include whatever metadata you wish to use from the metadata provided. Each image and its title must link to the URL provided in the metadata file for that image.
News sidebar
The news sidebar shows two recent news entries on the right side of the design. include your own sample text for the two news items. Each item consists of a title, date, and the text of the news item.
**
When implementing the three features, you must follow the following rules:
Your implementation must follow the layout provided in the wireframe. Your solution will not be a pixel-exact implementation of the wireframe.
Where the wireframe contains pre-defined text (header links, museum name, museum location), you must use the text as provided in the wireframe.
Your implementation must follow the styles defined in the style guide.
Your code must be cleanly and consistently structured. You can of course also clean and structure the code by hand. If you use a tool, then you should refer to this in your report.
You must include comments in both the index.html and styles.css files documenting how your HTML and CSS work.
Your code must validate as HTML5 (for the index.html file) and as CSS Level 3 (for the styles.css file).
When adding comments to the two files, use the following syntax for HTML and CSS respectively:
<!--This is a HTML comment. -->
/*This is a CSS comment*/
Your completed HTML files will be tested for standards compliance using the W3C HTML validator, and your CSS will be tested using the W3C CSS validator.
Part 2:
In your own words, define what standards-compliance of HTML and CSS means and explain why it is important. Then, describe what you did in the development of the landing page wireframe to ensure that the solution you developed is standards-compliant. If you used a tool to help with structuring and cleaning your code, then you should mention this here. Please note this question is about standards-compliance and not usability.
b)
In your own words, define what ‘accessibility’ in terms of websites means and explain why it is important. Then, describe how in the development of the landing page wireframe you ensured that your solution meets the accessibility requirements.
Part 3
In the post-mortem, you should critically analyse the work you have undertaken. You are required to use the table structure in Table 1 to structure your analysis. You should write this as if you were writing instructions to assist another developer.
In the first part you will undertake some practical development work. In the second part you will write a report covering a range of topics. In the final part you will undertake a post-mortem analysis of the strengths and weaknesses of your development process and solution.
You will only work on the index.html and styles.css files, adding the required content so that they meet the following criteria:
The index.html should be syntactically error-free and should validate as HTML5.
The styles.css should be syntactically error-free and should validate as CSS (level 3).
The two files together implement the wireframe layout provided in wireframe.png and follow the style guide defined in styleguide.pdf.
The resulting web page must be usable.
The resulting web page must be accessible.
Part 1:
Header
The landing page header consists of four links to the four sections of the completed website. The texts to display for each link are given in the wireframe and must be used as provided.
Main content
The main content area of the landing page consists of the museum name, museum location, and the sample of 6 items. For each sample item where the wireframe indicates the ‘Image title’, you may include whatever metadata you wish to use from the metadata provided. Each image and its title must link to the URL provided in the metadata file for that image.
News sidebar
The news sidebar shows two recent news entries on the right side of the design. include your own sample text for the two news items. Each item consists of a title, date, and the text of the news item.
**
When implementing the three features, you must follow the following rules:
Your implementation must follow the layout provided in the wireframe. Your solution will not be a pixel-exact implementation of the wireframe.
Where the wireframe contains pre-defined text (header links, museum name, museum location), you must use the text as provided in the wireframe.
Your implementation must follow the styles defined in the style guide.
Your code must be cleanly and consistently structured. You can of course also clean and structure the code by hand. If you use a tool, then you should refer to this in your report.
You must include comments in both the index.html and styles.css files documenting how your HTML and CSS work.
Your code must validate as HTML5 (for the index.html file) and as CSS Level 3 (for the styles.css file).
When adding comments to the two files, use the following syntax for HTML and CSS respectively:
<!--This is a HTML comment. -->
/*This is a CSS comment*/
Your completed HTML files will be tested for standards compliance using the W3C HTML validator, and your CSS will be tested using the W3C CSS validator.
Part 2:
In your own words, define what standards-compliance of HTML and CSS means and explain why it is important. Then, describe what you did in the development of the landing page wireframe to ensure that the solution you developed is standards-compliant. If you used a tool to help with structuring and cleaning your code, then you should mention this here. Please note this question is about standards-compliance and not usability.
b)
In your own words, define what ‘accessibility’ in terms of websites means and explain why it is important. Then, describe how in the development of the landing page wireframe you ensured that your solution meets the accessibility requirements.
Part 3
In the post-mortem, you should critically analyse the work you have undertaken. You are required to use the table structure in Table 1 to structure your analysis. You should write this as if you were writing instructions to assist another developer.