Exercise 1: Overview of HTML and CSS
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.
Exercise 2: Creating and Styling HTML5 Pages
You are a web developer working for an organization that builds websites to support conferences. You have been asked to create a website for ContosoConf, a conference that showcases the latest tools and techniques for building HTML5 web applications.
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.
The conference being organized by ContosoConf consists of a number of sessions that are organized into tracks. A track groups sessions of related technologies, and conference attendees can view the sessions in a track to determine which ones may be of most interest to them.
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.
Exercise 4: Creating Forms to Collect and Validate User Input
The delegates who want to attend ContosoConf will need to register and provide their details. You have been asked to add a page to the ContosoConf website that implements an attendee registration form.
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.
Exercise 5: Communicating with a Remote Server
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.
Exercise 6: Styling HTML5 by Using CSS3
The Contoso Conference web application needs to be visually appealing. A designer has produced mock-up designs of some of the pages that you have been asked to implement for the website.
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.
Exercise 8: Creating Interactive Pages by Using HTML5 APIs
The ContosoConf organizers want to highlight the latest HTML5 technologies to create an interactive experience for the visitors to the conference website. Specifically, the conference organizers have asked you to add the following features to the application: - Conference speakers need a way to generate their badges. Add a webpage that enables a speaker to drag-and-drop a profile picture to start creating their badge. - A video from a previous conference is available. Make this video available on the Home page. - Customize the Location page to display information about the visitor’s current physical location.
Exercise 9: Adding Offline Support to Web Applications
The conference organizers are concerned that the venue has poor Wi-Fi coverage in some locations, so the attendees might not always be able to access the conference website on their tablets and laptops. The Schedule page is especially important because attendees need to know when sessions are running.
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.
Exercise 10: Implementing an Adaptive User Interface
Most conference attendees are expected to use a laptop to view the live version of the Contoso Conference website, but some may wish to print a hard copy of some of the information. Other attendees might use smartphones or other handheld devices to view the website. The different requirements and form factors of a printer or a handheld device compared to a laptop make it necessary for the user interface of the web application to detect device capabilities and adapt itself accordingly. For example, some website elements, such as the header, are not necessary for printing, while the smaller screens of smartphones are not ideal for viewing full-sized websites.
Exercise 11: Creating Advanced Graphics
The conference organizers would like a venue map displayed on the website. The conference attendees will use the map to find out more about the rooms in the conference facility. Therefore, the map should be interactive and should respond to mouse clicks. The floor plans are available in a vector format, so they can be displayed in a resolution-independent format.
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.
Exercise 12: Animating the User Interface
You have been asked to make the Contoso Conference website more engaging by adding some animation.
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.
Exercise 13: Implementing Real-time Communication by Using Web Sockets
During conference sessions, attendees may wish to ask questions. Distributing microphones among members of the audience can be problematic and slow, so you have been asked to add a page to the website that enables attendees to submit questions. Speakers can either respond immediately or later, depending on the nature of the questions and the session.
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.
Exercise 14: Performing Background Processing by Using Web Workers
When a speaker creates a conference badge, the speaker drags and drops an image file of a photograph onto the web page. This photograph may be a color image. However, the conference speaker badges will be printed in grayscale. Therefore, the web page that creates the badges should render the speaker photograph in grayscale to give an accurate representation of the printed output.
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.