- Understand core concepts of building web apps using HTML
- Understand core concepts of building web apps using CSS
- Basic understanding of computers
- Introductory knowledge of Visual Studio
ContosoConf is an annual technical conference that describes the latest tools and techniques for building HTML5 web applications. The conference organizers have created a website to support the conference, using the same technologies that the conference showcases.
You decide to start by building a prototype website consisting of a Home page that acts as a landing page for conference attendees, and an About page that describes the purpose of the conference. In later labs, you will enhance these pages and add pages that allow attendees to register for the conference and provide information about the conference sessions.
To assist conference attendees, you have been asked to add a Schedule page that lists the tracks and sessions for the conference to the ContosoConf website.
The server-side code already exists to process the attendee data. However, the registration page performs minimal validation and is not user-friendly. You have decided to add client-side validation to the form to improve the accuracy of the registration data entered by attendees and to provide a better user experience.
In addition, the conference organizers asked whether it was possible for conference attendees to be able to indicate which sessions they would like to attend. This will enable the conference organizers to schedule popular sessions in larger rooms. The Schedule page has been enhanced to display star icons next to each session. An attendee can click a star icon to register their interest in that session. This information must be recorded in a database on the server and you send this information to another web service that updates the corresponding data in the database.
For popular sessions, the web service will return the number of attendees who have selected it. You will need to handle this response and display a message to the attendee when they have selected a potentially busy session.
You will be working on the Home and About pages. The HTML page structure has already been created. You will use Cascading Style Sheets (CSS) to style various parts of the pages, to make them match the designs. Much of the CSS that you create, such as the navigation links bar, will be reused by other pages.
Some aspects of the design are complicated and would have required images with previous versions of CSS. However, by using CSS3, you will not need to create any images.
You have decided to make parts of the web application available offline by using the offline web application features of HTML5. After an attendee has visited the online website once, their browser will have downloaded and cached the important pages. If a Wi-Fi connection is unavailable, the attendee will still be able to view the website by using the cached information.
The conference speakers need badges with their photo, name, and ID. The ID is in the form of a barcode to make it easy for security personnel to scan and verify the holder’s identity before allowing backstage access. You have been asked to create a webpage that enables a speaker to create a badge.
You decide to animate the Register link that is displayed on the Home page. When the user places the mouse pointer over this link, you will make it rotate slightly to highlight it.
The Feedback page contains a form that enables an attendee to provide their assessment of the conference and to make additional comments. This information is submitted by the Feedback page to a data-collection service. You have decided that you can make this page more interesting by animating the stars as the user places the mouse pointer over them, and by making the feedback form fly away when the user submits their feedback.
On the website, all questions must be displayed in real-time without reloading the page, so that all attendees and the speaker can see what has been asked. To support this requirement, a web socket server has been created. You need to update the web application to send the details of the questions to the socket server, and also to receive and display questions submitted by other attendees.
Note: The web socket server is implemented by using ASP.NET and C#. The details of how this server works are outside the scope of this lab.
Conference organizers are concerned about people asking inappropriate questions. Therefore, a back-end moderation system is also being developed. Conference attendees should be able to report a question that they think is inappropriate. Administrators can then mark this question for removal. The web socket server will transmit a message to all connected clients, and the web page must be updated to remove the question.
However, processing large images will cause the web browser to become unresponsive while it performs this processing. You, therefore, decide to use a web worker to move the image conversion as a background process, enabling the web browser to remain responsive.
Therefore, you will want to bundle your website files into one file.