The goal of this assignment is for you to build the core interface design and elements for a Twitter-like micro-blogging website that allows users to post status updates, re- post the updates of others, and like or dislike a post. In the subsequent assignments, you will implement form validation in JavaScript (Assignment #3), design and implement the database (Assignment #4), implement the back-end programming in PHP (Assignment #5), and implement AJAX-based updating (Assignment #6). Because the other assignments build upon this one, you should take care to make a complete interface with all of the required elements (listed below). However, you will have a chance (and in some cases, be required to update your previous work in the subsequent assignments. The first step in creating the micro-blogging website is to create the interface design and mock-up. There are a number of critical pages that will need to be designed, created, and linked together to illustrate the interface features. For those pages that will ultimately contain user-contributed data, they can be loaded with sample data to illustrate your design. You should start by (1) sketching each page and refine your sketches until you are satisfied with the design, (2) draw storyboards of the critical task to be completed in the application, and then (3) build the pages using HTML5 and CSS. You are not permitted use third-party libraries that simplify or abstract the HTML or CSS coding. The following pages are to be created: 1. Login Page The purpose of this page is to allow a user to enter their username and password to login. 2. Sign-up Form This form should collect the information required for creating a new account on your micro-blogging site. At the least, it should collect an email address, screenname, date of birth, avatar image/graphic, and a password. The form should ask the user to provide their password twice, to ensure that it is entered properly. 3. Post List Page This is the default page for the micro-blogging site, showing the posts of all users ordered by date/time of entry (most recent first), and providing a link or button for a user to start a new post. Eventually, it will be loaded CS 215 (Winter 2021): Assignment #2 with content extracted from the database: for now, it can be loaded with sample information order to illustrate the design. Each posting should include the content of the micro-blogging post, the date/time of the post, the screenname of the post author, and the avatar image/graphic of the post author. For each post, there should be a link for a user to repost this post (with additional post content), two icons that allow the user to like or dislike the past, and counters for the number of likes and dislikes. At least one of the sample posts should be a repost, with the original post (content, author, date/time) embedded below the content of the repost Note that this will be the home page for the application. In the final version, this can be viewed by anyone, but only those who are logged in will be able to post, repost, or indicate that they like or dislike a post. These details will be implemented in subsequent assignments. 4. Post/Repost Form This is the form that will be used to make a new post or a repost of someone else's post. It should allow the user to enter the text content of their post/repost. Eventually, you will write software to ensure that only logged-in users can make post or reposts, and control the length of the post. 5. User Detail Page This is the page that will be shown when a user clicks the screenname of a post author. It should show the details for the selected user, along with an ordered list of all of their posts and reposts in the same format as the post list page). All of these files should be linked together, so that it is possible to click through the pages to evaluate the design and implementation. You must ensure that each of these pages makes appropriate use of HTML5 (following the syntax rules of XTHML) and CSS, and construct them such that there is a proper separation of the specification of the content from the specification of the presentation rules. Your submission should include six sketches (one per page), a set of storyboards, six HTML5 pages, and a single CSS file. Grading Scheme This assignment will be graded out of 10 marks, based on the following criteria: 2 marks Sketches of the interface pages, following appropriate design principles 2 marks: Storyboards of the key user tasks 4 marks: HTMLS that follows XHTML syntax rules for all five pages 2 marks: A single CSS file to specify the presentation details The goal of this assignment is for you to build the core interface design and elements for a Twitter-like micro-blogging website that allows users to post status updates, re- post the updates of others, and like or dislike a post. In the subsequent assignments, you will implement form validation in JavaScript (Assignment #3), design and implement the database (Assignment #4), implement the back-end programming in PHP (Assignment #5), and implement AJAX-based updating (Assignment #6). Because the other assignments build upon this one, you should take care to make a complete interface with all of the required elements (listed below). However, you will have a chance (and in some cases, be required to update your previous work in the subsequent assignments. The first step in creating the micro-blogging website is to create the interface design and mock-up. There are a number of critical pages that will need to be designed, created, and linked together to illustrate the interface features. For those pages that will ultimately contain user-contributed data, they can be loaded with sample data to illustrate your design. You should start by (1) sketching each page and refine your sketches until you are satisfied with the design, (2) draw storyboards of the critical task to be completed in the application, and then (3) build the pages using HTML5 and CSS. You are not permitted use third-party libraries that simplify or abstract the HTML or CSS coding. The following pages are to be created: 1. Login Page The purpose of this page is to allow a user to enter their username and password to login. 2. Sign-up Form This form should collect the information required for creating a new account on your micro-blogging site. At the least, it should collect an email address, screenname, date of birth, avatar image/graphic, and a password. The form should ask the user to provide their password twice, to ensure that it is entered properly. 3. Post List Page This is the default page for the micro-blogging site, showing the posts of all users ordered by date/time of entry (most recent first), and providing a link or button for a user to start a new post. Eventually, it will be loaded CS 215 (Winter 2021): Assignment #2 with content extracted from the database: for now, it can be loaded with sample information order to illustrate the design. Each posting should include the content of the micro-blogging post, the date/time of the post, the screenname of the post author, and the avatar image/graphic of the post author. For each post, there should be a link for a user to repost this post (with additional post content), two icons that allow the user to like or dislike the past, and counters for the number of likes and dislikes. At least one of the sample posts should be a repost, with the original post (content, author, date/time) embedded below the content of the repost Note that this will be the home page for the application. In the final version, this can be viewed by anyone, but only those who are logged in will be able to post, repost, or indicate that they like or dislike a post. These details will be implemented in subsequent assignments. 4. Post/Repost Form This is the form that will be used to make a new post or a repost of someone else's post. It should allow the user to enter the text content of their post/repost. Eventually, you will write software to ensure that only logged-in users can make post or reposts, and control the length of the post. 5. User Detail Page This is the page that will be shown when a user clicks the screenname of a post author. It should show the details for the selected user, along with an ordered list of all of their posts and reposts in the same format as the post list page). All of these files should be linked together, so that it is possible to click through the pages to evaluate the design and implementation. You must ensure that each of these pages makes appropriate use of HTML5 (following the syntax rules of XTHML) and CSS, and construct them such that there is a proper separation of the specification of the content from the specification of the presentation rules. Your submission should include six sketches (one per page), a set of storyboards, six HTML5 pages, and a single CSS file. Grading Scheme This assignment will be graded out of 10 marks, based on the following criteria: 2 marks Sketches of the interface pages, following appropriate design principles 2 marks: Storyboards of the key user tasks 4 marks: HTMLS that follows XHTML syntax rules for all five pages 2 marks: A single CSS file to specify the presentation details