联系方式

  • QQ:99515681
  • 邮箱:99515681@qq.com
  • 工作时间:8:00-23:00
  • 微信:codinghelp2

您当前位置:首页 >> Web作业Web作业

日期:2020-09-28 11:19

Universidad Carlos III de Madrid

Escuela Politécnica Superior

Bachelor in Computer Science and Engineering

User Interfaces

1 de 11

User Interfaces

Computer Science and Engineering

Course 2020 / 2021

WEB TECHNOLOGIES – HTML5 & CSS3

Table of contents

WEB TECHNOLOGIES – HTML5 & CSS3........................................................................................... 1

TABLE OF CONTENTS ........................................................................................................................... 1

1. INTRODUCTION ......................................................................................................................... 2

ESTIMATED EFFORT.............................................................................................................................. 2

SUBMITTING THE EXERCISES ................................................................................................................. 2

ASSESSMENT ....................................................................................................................................... 2

ORGANIZATION OF THE DOCUMENT..................................................................................................... 2

2. WEBSITES..................................................................................................................................... 3

HYPER TEXT MARKUP LANGUAGE (HTML) ........................................................................................... 3

CASCADE STYLE SHEETS (CSS)............................................................................................................ 3

3. EXERCISES ................................................................................................................................... 5

DESCRIPTION OF THE EXERCISES......................................................ERROR! BOOKMARK NOT DEFINED.

4. RULES .........................................................................................................................................10

CONDUCTING THE EXERCISES.............................................................................................................10

SUBMITTING THE EXERCISES ...............................................................................................................10

5. REFERENCES .............................................................................................................................11

UniversidadCarlosIIIdeMadrid

Escuela PolitécnicaSuperior

BachelorinComputerScienceandEngineering

UserInterfaces

2 de 11

1. Introduction

This document presents the first programming exercise of the course. This

exercise aims at providing you with a hands-on introduction to emerging web

technologies: HTML5 and CSS3. We give a succinct overview of these

technologies and their specifications in Section 2. Subsequently, we present

an exercise in which you will create a web page and become familiar with

basic and more advanced aspects of HTML5 and CSS3. We set below the

conditions under which the exercises will be conducted.

Estimated effort

The estimated number of hours each student will need to devote to

conducting the exercises is 10, which will be distributed along three working

weeks and three sessions. The sessions will take place either online or face-toface.

In the sessions we will (i) introduce the technologies to the students, (ii)

go through a number of examples and (iii) solve general doubts or concerns.

Submitting the exercises

This exercise will be submitted on the fourth week of the course (see the

calendar of the labs available in Aula Global) during the session.

Assessment

In this exercise, we will evaluate: functionality (i.e. what you are asked to do),

code (e.g. can a person who is not you understand the code? Have you

written comments in the code?) and user interface design (e.g. think about a

human user interacting with your page – colors, size of text…)

This exercise corresponds to 10% of the final mark. Students will not pass the

course if they either copy the exercise from web pages or from another group

or allow them to copy their exercises.

Organization of the document

This document is divided into four sections. Section 2 gives an overview of

HTML5 and CSS3. Section 3 describes the exercise and the submission

procedure. Section 4 describes the realization and submission of the

programming exercise.

2. Websites

A website consists of web pages and resources, both hosted in the same

domain, which are accessed through a web navigator by using HTTP

(Hypertext Transfer Protocol). Static websites can be defined as a number of

web pages, which are written in HTML and CSS (Cascade Style Sheets), whose

content is both stored and processed in web servers, who manage requests

from clients.

Hyper Text Markup Language (HTML)

HTML stands for Hyper Text Markup Language. HTML is a language designed

to give some structure to web pages and present their information. This is

done by means of mark-up tags (e.g. <body>). One of the main problems of

HTML is that an HTML document is not aware of its content. HTML is defined

by W3C (www.w3c.org).

HTML5 is the fifth revision of the HTML standard. Its core aims have been to

improve the language with support for the latest multimedia while keeping it

easily readable by humans and consistently understood by computers and

devices.

For further information about HTML, the HTML tutorial of the w3schools [1]

provides a number of interactive examples of the main characteristics of

HTML. The HTML elements and attributes are defined in the HTML

specification [2]. The most recent version of the HTML5 specification can be

found in [3]

Cascade Style Sheets (CSS)

CSS (Cascade Style Sheets) allow us to group HTML elements into categories.

These categories enable us to reuse and simplify the HTML code. For

example, the color and size of HTML elements can be defined in CSS style

sheets, which are usually coded in CSS files and linked to HTML, which is used

for defining the structure of the webpage. Nowadays, there are three versions

of CSS, CSS1, CSS2 and CSS3.

The main objectives of the CSS specification are to:

- solve the problem of HTML regarding the separation of content and

presentation. HTML was originally designed to define the content of a

web page. Over time, a number of attributes have been added to the

specification, increasing the complexity of web pages. CSS was created

after HTML 4.0 with the aim of making the separation between content

and styles clearer.

- help the web programmer by reusing styles and simplifying the HTML

code of web pages.

For further information on CSS, the tutorial of w3schools [4] provides a

number of interactive examples [5]. The official specifications provide further

information of CSS1 [6] and CSS2 [7], and a reference manual of HTML and

CSS can be found in [8].

3. Exercise

The aim of this exercise is to become familiar with the main elements of

HTML5 and CSS3. In this section, we will describe the assignment with

examples as references (YOU DON’T HAVE TO COPY THEM), as well as some

useful resources.

IMPORTANT: The exercise must have the style of the web page in an

external CSS style sheet linked to the HTML document.

Assignment

The website to develop is the page of an academic online course accessed by

a teacher.

The web page will be divided into four sections: i) heading with a menu, ii)

body, and iii) footer. These sections must be as follows:

? The page heading will display a logo and/or a title, and a horizontal

menu. The menu will include at least three options.

? The body section of the page will be divided into three vertical

containers.

o The container on the left and the one on the right will be each

25% of the body section's total width. The container on the left

will show the name of the course and a menu with these three

options: "Students", "Forum", and "Grades". The container on

the right will show last news (e.g., published assignments, new

messages in the forum, published resources, …) and next events

(e.g., next classes or assignments due date).

o The central container will be the remaining 50% of the body

section's total width, and initially, it will show a list of course

topics (minimum of three topics). Each topic will have a

representative image, a title, a short description (maximum five

lines), and three videos. Each video will have a title and a short

description (maximum of three lines).

o The central container's content will change depending on the

option of the menu in the left container.

§ When clicking the option "Students", the central container

will show students' list (minimum ten), each one with a

profile picture, name, surname, email, and an icon to

send a message. The icon will not work.

§ When clicking on the option "Forum", the central

container will show the list of themes (minimum five),

with a title, the number of messages, and the last

message's date and time.

§ When clicking on the option "Grades", the central

container will show a table with four columns and a

minimum of eleven rows. The first row will show the

headers of the columns: "student", "activity 1", "activity 2",

"activity 3". The remaining rows will contain the same

students from the previous list. For each student, each

activity will have a grade from 0.0 to 10.0.

? The page's footer will display at least three links (e.g., the copyright

and the privacy policy) separated by a vertical line.

? The website has to be responsive and adaptable to the dimensions of

the browser. Within this scope, you have to implement almost two

breakpoints: the first one for the tablet (768px) and the second one for

the smartphone (600px).

? The website and its tablet and mobile versions have to be similar to the

images, but not the same. IMPORTANT: It is mandatory to personalize

the colors, the texts, and the icons shown on the page. The information

in the page (i.e., logo, titles, images, texts, links, …) has to be real. No

fictitious content will be accepted, such as the text "Lorem ipsum".

DESKTOP

TABLET

MOBILE

We encourage you to look at

http://www.w3schools.com/html/html_examples.asp to complete this

exercise, namely:

? HTML Layouts introduces the usage of DIV element with several

examples.

UniversidadCarlosIIIdeMadrid

Escuela PolitécnicaSuperior

BachelorinComputerScienceandEngineering

UserInterfaces

8 de 11

? New Elements in HTML5 - Explanation about the new HTML5

elements.

? HTML5 Semantic Elements addresses important elements for this

exercise such as <section>, <article> and <header>

? HTML Images provides examples of how to manage pictures in

HTML documents.

? HTML Links provides examples of how to include links to other HTML

pages.

? HTML Styles provides examples of how to modify the style of HTML

elements.

? HTML Video – Ejemplos sobre como incluir videos en una página

web.

? CSS Floating introduces the positioning of the elements.

? CSS Margin explains how to specify the margins of an element.

? CSS Padding explains how to specify the content of an element.

? CSS Navigation Bar provides examples about the navigation menu of

the page.

? RWD Viewport introduces the viewport property.

? RWD Media Queries introduces the usage of the media queries.

? RWD Images introduces the properties to make the images

responsive.

UniversidadCarlosIIIdeMadrid

Escuela PolitécnicaSuperior

BachelorinComputerScienceandEngineering

UserInterfaces

9 de 11

4. Materials

Editors of web pages such as Macromedia Dreamweaver can’t be used, since

the aim of these exercises is to get familiar with HTML and CSS. However, we

encourage you to use a free text editor such as Notepad++, HTML-Kit, Visual

Studio Code, Sublime Text, Brackets o Atom. None of the lecturers will help

you to use these tools.

UniversidadCarlosIIIdeMadrid

Escuela PolitécnicaSuperior

BachelorinComputerScienceandEngineering

UserInterfaces

10 de 11

5. Rules

The realization and submission of the programming exercise is guided by the

following set of rules. If you do not comply with them, your mark won’t be

more than 3 in the exercise.

Conducting the exercises

The exercise will be carried out in groups of two people.

The members of each group will belong to the same lab group.

The members of the group cannot be altered throughout the course.

The exercise will be carried out by using HTML5 and CSS3.

The exercises will be tested with either Mozilla Firefox version 79 (or above)

or Chrome 84 (or above).

IMPORTANT: The resolution of problems of a particular nature will be made

during office hours.

Submitting the exercises

The exercise will be submitted during the day of the session indicated in the

introduction of this document. Exercises submitted afterwards will not be

considered.

The submission norms are:

? All the files will be submitted through Aula Global.

? All the files will be either zip or rar files, with the following filename:

PE01_grXX.zip

? XX is the ID of your group. For example, group 5 will submit as:

PE01_gr05.zip

The zip or rar files will have the following structure:

? Ex. Root folder. HTML files.

? Ex/style. CSS styles.

? Ex/images. Images and material.

UniversidadCarlosIIIdeMadrid

Escuela PolitécnicaSuperior

BachelorinComputerScienceandEngineering

UserInterfaces

11 de 11

6. References

[1] “HTML Tutorial”, HTML Tutorial, W3 Schools:

http://www.w3schools.com/html/

[2] “HTML 4.01 Specification”: http://www.w3.org/TR/html4

[3] “HTML5”, http://www.w3.org/TR/html5/

[4] “CSS Tutorial”, http://www.w3schools.com/css/

[5] “CSSPlay”, http://www.cssplay.co.uk/index.html

[6] “Cascading Style Sheets, level 1”, http://www.w3.org/TR/REC-CSS1

[7] “Cascading Style Sheets, level 2”, http://www.w3.org/TR/REC-CSS2

[8] “HTML5 and CSS3: Visual QuickStart Guide, Seventh Edition”

Elizabeth Castro; Bruce Hyslop. Ed. PeachPit Press, 2011


相关文章

【上一篇】:到头了
【下一篇】:没有了

版权所有:编程辅导网 2018 All Rights Reserved 联系方式:QQ:99515681 电子信箱:99515681@qq.com
免责声明:本站部分内容从网络整理而来,只供参考!如有版权问题可联系本站删除。