The first set of exercises is designed to meet the basic conditions for the development of a website technologies: HTML5 and CSS3. To do this, make a brief introduction to the technology, the basic syntax of both specifications will be displayed, they will be reviewed a number of examples and three programming exercises will be solved. This section makes the introduction to the conditions of carrying out the block of exercises: Estimated dedication, date of delivery and evaluation conditions.

Dedication

Conducting block programming exercises require an estimated ten hours per student, spread over three weeks of work and three small classroom sessions dedication. During sessions in small classroom, as well as answer questions of a general nature, the technologies involved will be explained.

Delivery

The delivery of the programming exercise will take place in week four of the semester (see planning practices as published in Aula Global “Calendar of practice”). Delivery is limited to one of three programming exercises. Exercises to deliver will be different for each group of the subject and indicated at the beginning of the delivery session.

Evaluation

The evaluation criteria will focus, inter alia: functionality, code

and the design of the user interface.

This first set of exercises will be worth 10% of the final grade of the continuous evaluation. Copy the exercises both peers and Internet involve direct suspense of continuous assessment for both group copy group to the author of the original version (if any).

Websites

A website is defined as a set of web pages and resources housed within one domain and accessed via a web browser using Hypertext Transfer Protocol (HTTP) as the transport protocol. A particular type of website are static websites. A static website is one whose content is stored on the server in a format that allows shipment to the customer without performing any processing. The web pages of a static website are encoded in Hyper Text Markup Language (HTML) specification using Cascade Style Sheets (CSS) to modify the layout of the pages.

Hyper Text Markup Language (HTML)

HTML stands for Hyper Text Markup Language, is a markup language oriented structure and presentation of information, so it is characterized by containing marks that define the structure of the document and its appearance in the display space. The main problem lies in the absence HTML semantics; that is, an HTML document is not ‘aware’ of its contents simply defines how to structure and presented to the user. The HTML language is defined by the W3 Consortium (www.w3c.org).

HTML5 is the fifth revision of the language of “core” of the World Wide Web, HTML programming. This new version aims to replace the current (X) HTML, correcting problems that web developers are updating the code to new needs demanded by today’s web and adding some semantic content with new labels.

For more information about the HTML you should consult the HTML tutorial w3schools [1], which collected by interactive examples the essential characteristics of language. Similarly, the HTML specification [2] language will serve as a reference and reference material for advanced topics. HTML5 is still under development, but you can also check your specification [3].

Cascade Style Sheets (CSS)

The specification Cascading Style Sheets (CSS) allows grouping of HTML presentation elements into categories that facilitate and simplify reuse HTML code. Thus, display characteristics (color, size, etc.) can be defined in CSS leaves (normally described in a separate file) and HTML is used to define the structure (sections, subsections, etc.) of the document . Currently, there are three versions of CSS, CSS1, CSS2 and CSS3. Level 3 version does not contradict the CSS specification version CSS21; only adds functionality and refined definitions.

The fundamental objectives of the CSS specification are basically the following:

Solve the problem with HTML to clearly separate content and styles. HTML was originally a language designed to define the content of a document. As attributes were added, it was difficult to create document pages. Stylesheets were created from HTML 4.0 to clearly separate content and styles.

Save job scheduler. Normally, a website styles are common throughout all pages. Defining these styles in a common sheet, the pages are far simpler.

For more information on CSS specification should consult the following references: First, the CSS tutorial w3schools [4], which includes a section that allows you to test various CSS elements interactively observing the result in the browser. Some more elaborate examples and demos can be found in [5]. Finally, the official specifications of CSS1 [6] and CSS2 [7] W3C consortium serve as a reference for advanced topics. Finally, it is recommended to use the book [9] as a reference manual both HTML and CSS.

Exercises

The first set of exercises brings together a total of three programming exercises, all considered as mandatory or Deliverables. Then exercises will be exposed, proposing use as reference examples (not to copy) and the material provided and required for its realization.

IMPORTANT: All exercises should provide the style in external CSS style sheet linked to the HTML file.

Exercise 1

The objective of this exercise is to learn and practice with the main elements of HTML5 and CSS3. To do this it will work with HTML elements related to the use of paragraphs, lists, links, images, containers, etc. Develop the website is the personal page of a user of an application to search and publish Restaurant Reviews or hotels.

Develop the website should be similar to that shown in the image. It shall be composed of the following sections: header, menu, body and footer. In addition, they must meet the following requirements:

The header should contain a logo and / or title page, and a horizontal menu. The menu will have at least 3 options.
The body of the page will be divided into two containers vertically

The first container will occupy one third of the total space occupied by the body of the page and will list the information available in the user’s profile, organized into three groups: personal information, latest published opinions, preferences. Personal information is represented with a title followed by the user’s name, their country of origin, and year high in the application (for example, “member since 2008”). The last section published opinions will be represented by a title followed by a list of at least three (or more) restaurants or hotels opinions. Every opinion will have the name of the restaurant or hotel as the title followed by a text about four lines as opinion. Preferences will be a set of keywords that the user has chosen for your searches for restaurants or hotels. It will be necessary

put at least three words (or more). Each word will be contained in a box and followed by an X (or another icon) to delete it. The title “my preferences” will be followed by a + (or other icon) to add new words. Functions delete and add words will not implement them.

The second container will occupy the remaining two thirds of the total space occupied by the body of the page will be empty.

The footer should contain three or more links divided by a vertical bar. Among them may include copyright page and icons of social networks Facebook, Twitter or other student’s choice.
The content of the page (logo, titles, images, text, links, …) must be real. no dummy content will not be accepted, such as the text “Lorem ipsum”.

Solving exercise, you should consult the following explanations of HTML and CSSS page w3schools (www.w3schools.com/html/default.asp):

HTML Layouts – Examples on how to use the DIV HTML document structure.

New Elements in HTML5 – Explanation about new HTML5 elements. HTML Images – Examples for handling images in HTML documents. HTML Links – Examples on how to include links to other pages.

HTML Styles – Examples on how to modify the style of HTML elements.

HTML Video – Examples on How to get videos on a webpage. Floating CSS – Explanation of positioning elements. CSS Margin – Explanation on the margin

CSS Padding – Explanation of the padding

CSS Navigation Bar – Explanation of the navigation menu

Exercise 2

The objective of this exercise is to learn and practice with the main elements of HTML5 and CSS3.

From the website of the first exercise, we must develop two new versions providing the following modifications:

In the vertical container on the left, the titles “personal information” and “latest opinions” have to be binding. Clicking on each will be accessible to a different version of the page.
Clicking on “personal information”, the website should be similar to that shown in the image version a. In the vertical container two horizontal sections will. The first will have a title and an editable form with the name, surname, email, address, phone number and date of birth. The second will have a title and 4 icons representing user activities on page: accumulated points, the level reached, opinions and photos published.
Clicking on “latest opinions”, the website should be similar to that shown in the picture Version b. In the vertical container will be a title and boxes (at least two) with an image of the restaurant or hotel, its name, its location, the date of the opinion and the written opinion by the user.

version

version b

Solving exercise, you should consult the following explanations of HTML and CSSS page w3schools (www.w3schools.com/html/default.asp):

HTML Layouts – Examples on using the DIV element structure for HTML documents.

HTML Styles – Examples on how to modify the style of HTML elements.

Floating CSS – Explanation of positioning elements. CSS Margin – Explanation on the margin

CSS Padding – Explanation of the padding

CSS Navigation Bar – Explanation of the navigation menu

Exercise 3

The objective of this exercise is to make the exercise version 2 on a responsive website so that the website fits the size of the browser as this change.

To do this, it is requested that at least two breakpoints are implemented: one tablet change (768px) and a mobile exchange (600px). The layout should be changed as follows:

Version to – TabletVersión a – Mobile

OPTIONAL ITEM 1: the layout of Version 2 b of exercise also becomes as follows:

Version b – TabletVersión b – Mobile

Solving exercise, you should consult the following explanations of HTML and CSSS w3schools page (HTML – http://www.w3schools.com/html/default.asp yCSS – http://www.w3schools.com/css/default.asp):

Viewport RWD – Explanation property viewport

RWD Media Queries – Explanation of the use of media queries

RWD Images – Explanation of the use of property to make responsive images.

Material required

To carry out the exercises will not be able to use any HTML editor pages, frameworks or specific tools, such as Dreamweaver. However, it is recommended to use some free style editor Notepad ++, HTML-Kit, Visual Studio Code, Sublime Text, Brackets or Atom. Subject teachers will not support these tools.

Normative

The completion and delivery of the programming exercises will governed by the following rules. Failure to comply with any of these rules make it impossible to obtain a higher note three block programming exercises.

Performance standards

The resolution of programming exercises must comply with the following standards:

The exercises should be performed in groups of two. Team members must be the same group practices can not change during programming exercises.
The exercises will be solved using valid code HTML 5 and CSS 3.
All exercises should be tested in Firefox 16, Chrome 26 or higher.

IMPORTANT. The resolution of questions of particular character will be in tutorials. In any case email questions will be resolved.

Delivery Standards

Delivery corresponding programming exercise will take place at the beginning of the session indicated in the introduction of this statement. Delivery must comply with the following standards:

Delivery will be made through Aula Global. It should provide a single compressed .zip or .rar file name:

where xx corresponds to the group identifier practices. For example, the group of group 5 81 practices must generates a file named:

The folder structure of the files must be delivered as follows:

Exercise root directory. HTML files.

ej0N / style. Style sheets.

ej0N / images. Images and graphics.

where N corresponds to the number of the programming exercise (1 to 3) to be delivered. For example, one group must deliver Exercise 3 should have a root directory ej03 name.

IMPORTANT. For delivery practices is compulsory attendance for at least one member of the group practice. In any case, practice delivered by e-mail, tutorials, or after hours the corresponding session will be accepted.

References

“HTML Tutorial” HTML Tutorial W3 Schools, available at http://www.w3schools.com/html/
“HTML 4.01 Specification”, W3C Recommendation, available at http://www.w3.org/TR/html4
“HTML5” W3C recommendation, available at
http://www.w3.org/TR/html5/
“CSS Tutorial” W3 Schools CSS Tutorial, available at http://www.w3schools.com/css/
“CSSplay”, demonstrations and examples CSS, available at http://www.cssplay.co.uk/index.html
“Cascading Style Sheets, level 1” W3C specification, available at http://www.w3.org/TR/REC-CSS1
“Cascading Style Sheets, level 2,” W3C specification, available at http://www.w3.org/TR/REC-CSS2
“HTML5 and CSS3: Visual QuickStart Guide, Seventh Edition,” Elizabeth Castro; Bruce Hyslop. Ed. Peachpit Press, 2011

Introduction