Designing and Developing a Website : MardiDrama Club
Introduction
MardiDrama Club is a fun after school and weekend club that is open to children between
the ages of 5-16. It offers a fun programme but also teaches children some of the
fundamentals about speaking and helping them develop confidence.
Scenario
MardiDrama Club have approached you and asked you to develop a new website for
them. Although they currently won’t be taking any payments online, they hope to develop
this later in the year. They need you to create a website which will allow parents to find
out about the different drama classes that are available and to register for these. The
website should be visual and should be viewable on different devices.
MardiDrama have the following basic requirements for the contents of the website:
• Home Page: This page will advertise the different classes (Musical Theatre, After
School, Holiday Programmes) and should have three image links to these classes.
Relevant social media buttons and search bar should be included on a clean
looking home page which includes interactive elements which grabs the attention of
the visitor.
• Blog: This page will provide up to date information about events and classes
happening in the Drama Club.
• Register: This page will allow parents to register their child for one of the classes.
Registration will be via email following the completion of an online form.
• About: This page should give parents an overview of the different classes and the
club which started in 2001. It should have space for information about the teacher
and links back to the contact page and blog.
• Where: This page should include an interactive map of the club’s location in
Taunton.
• Classes: This page should provide videos and information about the different
classes including payment information (£15.00 or equivalent per hour).
• Events: This page provides a list of the events that take place in the drama club
such as Nativity, Summer Play or guest appearances from well-known stars from
the industry.
At the initial stage of the development process, you are required to make an HTML/CSS
prototype of the website that will clearly show MardiDrama Club how the final website
could work.
Content hasn’t been provided. Suitable content can be found on the web e.g. images of
drama clubs. Use creative commons (https://ccsearch.creativecommons.org/) or
Wikimedia Commons (http://commons.wikimedia.org/wiki/Main_Page) as a starting point
to find content. Remember the content you include in your site must be licensed for re-use.
Do not spend excessive amounts of time researching and gathering content. The
purpose is to provide a clear indication of how the final website could look and function.
The client would provide the actual content at a later point if they are happy with the
website you have proposed.
Task 1 – HTML
The website must be developed using XHTML 1.0 Strict or HTML 5 and feature a
minimum of SEVEN (7) interlinked pages which can be viewed also on a mobile device.
The website must feature the content described above and meet the following criteria:
• Feature between 7 and 10 HTML pages.
• Have a lightblue background colour.
• Be usable in at least TWO (2) different web browsers including a mobile device.
You should consult your tutor for guidance on the specific browsers and versions
you should use.
• Be viewable on monitors with screen resolutions of 1024×768 without users having
to scroll horizontally.
• Integrate and use a range of media appropriately.
• Embed functional multimedia components in your site.
• Demonstrate a good application of web design principles and be easy to navigate
and use and really captures the attention of the parents.
=>
I have used HTML 5 for designing website. HTML 5 is latest version of HTML. We use <!DOCTYPE html> syntax for declaration. The default character encoding in HRML 5 is UTF-8.
HTML 5 consists of new element such as <header>, <section>, <article>, <svg>, <canvas>, <audio>, <video>, <footer> and attributes like number, date, time, calendar, and range.
Types of images
I have used PNG format for my design of website. PNG file format has many advantages over jpeg and gif. PNG has higher compression rate. It has better compression rate. This type of file is easy to low while user has low internet connection.
PNG helps in transparency layer image. It also has built in gamma correction due to which user can see an image which was meant to see while captured. It is open standard and free license which is developed by W3C and will always be free. This is why I choose PNG format for websites.
Accessibility features used in your media
There is not much accessibility feature in this web design. Though I have used alt tags for image alternative. Placeholder are used for thumbnail so that it’s easy for video preview. There is play, pause, Fullscreen, play picture in picture and also user can download for offline on the go.
Task 2 – CSS
Create external CSS file that specifies the design for the website. Each of the HTML pages must link to this CSS file. There should be no use of the style attribute or the <style> element in the website.
The boxes on the home page should include relevant elements such as border radius,
box-shadow, hover etc.
Include CSS animation-timing for at least one of the elements on the home page.
Add in a mediarule which changes the background colour from lightblue to white when the
browser window is 600px wide or less
=> CSS stands for Cascading Style Sheets. The way I used external CSS because It is style sheet language used for explaining the presentation of document written in a markup language like hyper text mark of language. It is useful for designing the website with its respective viewing specific experience.
CSS selectors
Id: It identify one element. It is indicated as “#” in CSS.
Class: It identifies one and more than one CSS elements. It is indicated as “.” In CSS.
Inheritance: It is last thing we need to investigate for all the information. It is also used to understand what style is applied in the element.
Multiple selectors: It is usually used for grouping. Any type of valid selector can be placed in that group and match up as same style-based property.
Descendant: All the elements that are descendants of a specified element are always matched with descendant selector.
Task 3 – Test the Website and Write a Test Report
You must use the W3C validation service (http://validator.w3.org/) to check your HTML and
CSS code. You should attempt to remove as many non-compliant features as possible.
Make sure ‘show source’ is selected and save the output from this tool.
Test the website using at least TWO (2) different web browsers. Record any significant
differences between the rendering of the two browsers and attempt to diagnose the cause.
You do NOT need to modify your code to correct any differences between browsers.
Please consult your tutor for advice on the specific browsers you should use for testing.
Write a short report describing your testing. Provide a description of any outstanding
problems and recommendations for fixing them and include a clear description of the
differences between the brewers and the reasons for these. Add in a description of how
the site works on a mobile device and the reasons for these.
Validation and Browser testing:
Browser testing was done. While testing in chrome Version 73.0.3683.86 (Official Build) (64-bit) I found the design and layout was awesome. It looked well designed in width 600px. I also tested my design in Firefox Quantum 66.0.3 (64-bit). The result was quite different. I found that search bar icon was not in place. While I looked for 600px width I found that everything was working well and design was awesome.
All HTML page validation
There was same warning Because of header and footer and I found one error in google maps embedded link and also there were some warnings.
CSS validation
Findings
At the end, I have corrected the warning and errors while testing all the design of website. There was some mismatch in paragraph. I corrected headers and navigation too. After completion I found some warning. Some warning was ignored and many were removed. I also found error in google maps embedded link which was ignored. Now. After all validation I have seen no errors to be corrected.
There were lots for problem and mismatch code due to which there was mismatch in overall design. Finally, after solving all problem on chrome, the design in chrome seems to be perfect. There was the same design as I had designed in photoshop.
After that, I looked same code on Firefox I found that the search icon was somehow below. There was design mismatch. So, these are the only problem that I faced while seeing output on both web browser. First of all, I looked into code to find some error but I only found warnings which didn’t affect website.
The recommendation of fixing is to see output on different website and the give extra code that fixes all the design mismatch for all the browser individually.
Task 4 – Critical Evaluation
Analysis of the website
You are required to write a short report (500 words) analysing the website you have
submitted.
You should:
• Evaluate and demonstrate an understanding of accessibility issues
• Evaluate the effectiveness of the CSS and what improvements you feel should be
made to this file now you have completed it
• Explain the advantages and disadvantages of using various types of multimedia file
formats
• Explain the advantages and disadvantages of different types of multimedia
elements in relation to different contexts
• Recommend improvements for further development of the website.
This analysis must include a discussion of the accessibility of the website and the ways in
which the website has been designed to support mobile users.
Additional Information for Clarification
Consult with your tutor/lecturer if you are uncertain about any aspects of the assignment.
The website must be developed using XHTML 1.0 Strict or HTML 5 and CSS. No other
technologies should be used. You do not need to write any computer programs for this
assignment.
The purpose of this assignment is to show abilities in web design. Although you should be
wary of needlessly adding features, websites that demonstrate a range of HTML features
used appropriately have the potential to gain higher marks. For example, a form that
features a range of different form elements applied in a useful and relevant way would
generally score a higher mark than a simple form that only uses text boxes to gather data.
Accessibility of the website:
Internet is vast, World Wide Web have conquered the world. Accessibility of website is very import on modern website designing and developing. In this modern world almost, all website is designed as accessible. In the current world there is room for all the differently able people. This is understood by designer and developer too. This website has much accessibility feature in this web design. Though I have used alt tags for image alternative. Placeholder are used for thumbnail so that it’s easy for video preview. There is play, pause, Fullscreen, play picture in picture and also user can download for offline on the go.
Designed to support mobile users
There is lot of mobile device than laptop in hand of people. Everyone takes mobile devices anywhere they want because they are portable and are cheaper comparatively laptop. There are more people surfing internet in their mobile devices so it’s also important to develop a well designed mobile friendly website for user accessibility too. As the task, I have also designed for the mobile devices that has less than 600px width. So, there is white background and beautifully designed website on every mobile device. They can easily read the content of web page. Photo and video have simplified there is all sort of feature included so that user can use as what they find easy.
Effectiveness of the CSS
CSS (Cascading Style Sheets) is an external file which is linked in HTML (Hyper Text Mark of Language). Since our website is viewed in many screen sizes, we also need to provide specific media query to each screen size which can be frustrating in HTML. This can be used for one CSS file rather than editing bulky content pages. For each site, all the CSS ought to be structured by a single, focal plan gathering. Two reasons: First, brought together plan is the best way to guarantee a steady style and receive one of the principle rewards of templates. Second, most of Web content makers are not equipped for planning and composing great templates.
Multimedia file formats
Adding Video and Audio elements to a Site page make it simpler to grab user attention users. Visual is the most prominent sight and sound options, locales additionally add audio and intuitive substance to crave in and hold the taking of consideration of the users which is major advantage. While HTML5 content-based sites are more intricate than site of the past, they are yet limited from numerous points of view. It is hard to speak to a brand/brand’s picture without including audio or video substance to help it. All things considered, mixed media departments are every now and again favored by promoting offices as a result of their capacity to totally show banding.
There are also some drawbacks too. Loading time of video can increase which is not to for modern website developers, compatibility of video differs with web browser. There are lots of web browser currently and many people has their choice in browsers. It is also harmful for search engine ranking.
Types of multimedia elements
Text is one of the media components utilized in the site. Ordinarily we can discover it from Web. Human are utilizing texts to speak with other individuals. From Web we can utilize Email to send instant message to other individuals, we additionally can utilize share status or offer anything you need to share to give your companion or family realize what is at the forefront of your thoughts. We likewise can share or give data in forum. While most Internet browsers suit numerous audios, video, and visual photo documents groups, problem can occur.
Conclusion
In this assignment I have designed well accessible website for Mardi Drama Club. I also have done testing of website and I also have done critical evaluation to find better version of this website. I have only used HTML and CSS for this website.
Reference
Fileformat.info. (2019). Multimedia File Formats. [online] Available at: https://www.fileformat.info/mirror/egff/ch10_02.htm [Accessed 30 Apr. 2019].
Preview Website
Mardi Drama Club
Thank you, I have just been looking for info about this subject for
a long time and yours is the greatest I’ve came upon till now.
However, what about the bottom line? Are you sure in regards to the source?
Welcome, This is just an assignment I have designed well accessible website for Mardi Drama Club. I also have done testing of website and I also have done critical evaluation to find better version of this website. I have only used HTML and CSS for this website.