User Interfaces Degree in Computer Engineering
Charles III University of Madrid Polytechnic School
Degree in Computer Engineering
User Interfaces
November 1
User Interfaces Degree in
Computer Engineering
Course 2018/2019
Programming Exercises
(Statement)
Charles III University of Madrid
Polytechnic School
Degree in Computer Engineering
User Interfaces
November 2
Introduction
The second set of exercises aims to learn a scripting language that allows code execution in the browser as a
means to enhance interaction with the system. To do this, make a brief introduction to JavaScript, the basic
syntax of this programming language is displayed, a number of examples will be reviewed, will use this
language libraries and three programming exercises will be solved. This section provides a brief introduction to
the test conditions of the block of exercises: Estimated dedication, date of delivery and evaluation conditions.
At the above conditions and performance standards harvested late delivery herein shall be added.
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 are explained and examples thereof are
analyzed.
Delivery
The delivery of the programming exercise will take place in week seven quarter (see planning practices as
published in Aula Global "Calendar of practice"). Delivery is limited to one of three programming exercises.
Exercise to deliver will be different for each group of the subject and indicate the beginning of the delivery
session.
Evaluation
The evaluation criteria will focus, inter alia: the functionality, the code and the
User interface desing.
This second set of exercises will be worth 10% of the final grade of the continuous evaluation. Copy the
exercises both peers and involve Internet direct suspense continuous assessment for both group copy group to
the author of the original version (if any).
Charles III University of Madrid
Polytechnic School
Degree in Computer Engineering
User Interfaces
November 3
Client scripting languages
Scripting languages allow client code snippets program executed in the browser itself as a means to improve
the interaction of web applications. The client scripting languages are essential to have dynamic web
applications, whose behavior varies depending on the user's needs, the conditions of implementation, or the
execution context.
JavaScript
JavaScript is an interpreted language, object-oriented (although it uses typed weak) and executable in a host
environment (the web browser) that provides you with an execution context in the form of predefined objects
representing different elements of the browser and the page, as well as other facilities. The main features of
JavaScript, regarding user interfaces are:
Modification of text in an HTML document: it is possible to insert a document in a given text (eg the value of a
variable).
Reaction to events: You can associate the execution of a function to the occurrence of a certain event (eg the
page is loaded, the user has pressed a button). This feature is key for programming the behavior of the user
interface.
Read / modify HTML tags: JavaScript allows you to add, modify or delete any element of the HTML document,
which opens the possibility of modifying the structure, content, presentation or the linked information. This is
achieved by providing the programmer with a DOM interface (Document Object Model), allowing it to handle by
simple notation tree HTML document.
Validation input data: is simple schedule necessary to ensure that the data entered by the user are valid,
before being sent to a processing agent checks.
Different versions of browsers that implement JavaScript as to the DOM interfaces make programming in this
language is particularly laborious to ensure compatibility with different browsers. This feature should be taken
into account when designing interfaces for web.
For more information about JavaScript you should consult the following references: First, the w3c JavaScript
schools [1] tutorial, which contains examples using interactive language features, and provides a reference
Charles III University of Madrid
Polytechnic School
Degree in Computer Engineering
User Interfaces
November 4
extend the predefined objects and DOM objects. Similarly, in [2] offer both introductory tutorials and advanced
users (sometimes dependent on the browser) that can serve as a quick reference. Finally, we recommend
using books [3] and [4] as reference manuals. Both publications are available on Safari Books Online.
JavaScript libraries
The progressive increase in the functionalities provided by web applications
and especially the need for web applications with a richer interaction has increased considerably the
complexity of their development. To solve this problem, in recent times there have been a number of
JavaScript libraries that provide pre-deployed components that can be assembled during the development of a
web application. Examples of JavaScript libraries would Dojo Toolkit, Google Web Toolkit, Yahoo UI Library or
jQuery. This block will use this last exercise library, perhaps the most popular and used by the largest web
companies: Google, Microsoft, IBM, Netflix.
jQuery
jQuery is an open source library designed to facilitate the development of web interfaces and the use of
JavaScript. The aim of jQuery can be summarized with the slogan "write less, do more" (translation, "write
less, do more"): to provide pre-deployed components that allow to implement complex functions with a single
line of code, instead of multiple necessary if used alone JavaScript. In addition, the library is compatible with
most browsers in use today.
Being a JavaScript library, jQuery instructions are stored in JavaScript files.
The main feature of this library is that it allows you to change the content of a web page without recharging, by
manipulating the DOM object, events, effects and AJAX requests. It uses functions $ () or jQuery (). Thus, the
syntax is composed of a selector for selecting an HTML element followed by an action: $ ( selector) .action (). They
are now described the most known characteristics of the jQuery library.
Interaction with HTML documents Selection and manipulation of the components of the DOM tree and the
properties defined in the CSS.
HTML events management : Event handlers are methods that are executed when there is some interaction
with the HTML document. Generally, it is said
Charles III University of Madrid
Polytechnic School
Degree in Computer Engineering
User Interfaces
On November 5
such action or set of actions has been triggered ( "triggered" or "fired") by an event. For example, the
instruction $ ( document) .ready (function) link function function with the event ready object document and this will
run at the time you finish loading the document. Other examples of events are the
click, the double click and the mouseover mouse on a selected item. Effects and animations: special actions that
can be associated with HTML elements. Examples of effects include:
✓ hide () / show () to hide / show an element;
✓ slideDown () / slideUp () / slideToggle () an element to slide in different
addresses;
✓ Animate () to animate an element, specifying the CSS properties that
They want to encourage as input parameters.
For more information about jQuery you should consult the following references: First, the tutorial jQuery
w3cschools [5], which collected by interactive examples the features of the library, and offers an extensive
reference actions, effects and possible animations. Similarly, in [6] the official website of the library, with
various documentation and tutorials both introductory and advanced users that can serve as a quick reference
is provided. Finally, it is recommended to use the book [7] as a reference manual, available on Safari Books
Online.
Charles III University of Madrid
Polytechnic School
Degree in Computer Engineering
User Interfaces
November 6
Exercises
The second set of exercises brings together a total of three programming exercises, all considered as
mandatory or Deliverables. Then exercises will be exposed, proposing to use as reference examples and
the material provided for their realization.
Exercise 1
The objective of this exercise is to learn and practice with the main elements of JavaScript to develop a
dynamic page that teaches the user's personal information and allow editing.
The page must be the same version to exercise 2 previous practice (Block I - HTML5 and CSS3), which will
bring the following changes:
● By clicking on "latest opinions", the content of the right vertical container according to the b version of
the page will change.
● Clicking on "personal information", the contents of the right vertical container according to the version
of the page will change.
● In the "My Preferences" section, by clicking on the + button (or other icon) located next to the title, a
box which are already added. Initially the box does not contain any word and only have an X (or
another icon). The empty box can be edited with a word that will represent the new user search
preference. By clicking on the X (or other icon), the box is cleared. If there is an empty box that the
user has not yet written, you can not add another.
● Clicking on the name of one of the restaurants or hotels located in the "latest opinions" section, a
popup with additional information is opened, as a picture, full name, address, website, number of
phone, the accounts of social networks, a description, the type of food served, economic class, ...
This information may vary depending on the type of business you are visiting. The popup will also
contain the full review who wrote the user.
Solving exercise, you should consult the following entries JavaScript w3schools page: http://www.w3schools.com/js/default.asp
Include: DOM Css ( http://www.w3schools.com/js/js_htmldom.asp )
Charles III University of Madrid
Polytechnic School
Degree in Computer Engineering
User Interfaces
November 7
JS Functions ( http://www.w3schools.com/js/js_functions.asp ) JS Events ( http://www.w3schools.com/js/js_events.asp
) JS HTML DOM ( http://www.w3schools.com/js/js_htmldom.asp )
Exercise 2
The objective of this exercise is to learn and practice with the main elements of JavaScript to make a form for
conducting registration on a website.
From the website of the first exercise, we must make the following changes:
● One of the menu options will be "Logout". By giving this option, the central body of the page is empty
and the menu options "Register" and "Login" appear.
● By clicking "Register", the central body of the page will teach a form consisting of the following fields,
some of them mandatory and in a certain format as that specified
or Account information
▪ Username (Required)
▪ Password (8 characters, where Allowed characters are letters [az] and digits [0-9])
(Required)
or Personal information
▪ Name (required)
▪ E-mail (Will follow the nombre@dominio.extensión format)
(Required)
▪ Birth date (dd / mm / yyyy) (Required)
▪ Profile picture (optional)
▪ Address (required)
or I have read and accept the Terms of Use (Required)
or Button "save" and "delete"
Charles III University of Madrid
Polytechnic School
Degree in Computer Engineering
User Interfaces
November 8
or By clicking the button "save" a cookie will be stored with all the
information contained on the form. If there is a cookie with the same email, it will notify the
user that there is already associated with the specified email account.
or By clicking the button "delete", the initial information is reset
form.
or Form validation can be made by: HTML5,
JavaScript and jQuery.
● Clicking on "Login", the central body of the page show a form asking for e-mail and password. The
form will also have a button "Login". Clicking on the button, a cookie with the data entered is
searched. If the cookie exists, exercise page 1 of this same block will be charged. Personal data
page information Exercise 1 may be the same stored in the cookie. If there is no cookie, we will notify
the user that the email specified is not discharged.
● On the page of "personal information" you can modify the data stored in the cookie. By giving the
"save" button, if the user leaves a field empty, we must notify the error and the field will return to the
last saved value.
Solving exercise, you should consult the following entries JavaScript w3schools page: http://www.w3schools.com/js/default.asp
Include: Validation Forms ( http://www.w3schools.com/js/js_validation.asp ) HTML Forms and Input -
Explanation of form fields HTML5 Input Types - Explanation about new fields to enter data. DOM Css ( http://www.w3schools.com/js/) JS Functions ( http://www.w3schools.com/js/js_functions.asp ) JS Events ( http://www.w3schools.com/js/js_events.asp
) JS HTML DOM ( http://www.w3schools.com/js/js_htmldom.asp ) JS Cookie ( http://www.w3schools.com/js/js_cookies.asp
)
Charles III University of Madrid
Polytechnic School
Degree in Computer Engineering
User Interfaces
November 9
Exercise 3
The objective of this exercise is to learn and practice the main benefits of the jQuery library. This requires a
web home page for the application developed in the years 1 and 2 of this block is performed.
The structure of the page has to be the same from that developed for previous years, including three sections:
header, body and footer. the following modifications are provided:
● On the menu header options "Register" and "Login" will be included. The operation of these options
will be the same that has developed in Exercise 2 of this same block.
● In the central body of page two horizontal sections will. The first section is a search engine of hotels
and restaurants where the user can specify the name and location. In the second section, a gallery of
images of hotels, restaurants or trips will be taught. Each image will be accompanied by a text
describing what the image represents.
● The images will automatically change on a rotating or when the user clicks on an icon to go forward
or backward.
● The gallery will be implemented using one of the jQuery plugins available.
Solving exercise, you should consult the official website of jQuery (http://jqueryui.com/).
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 top note through three in block programming
exercises.
Charles III University of Madrid
Polytechnic School
Degree in Computer Engineering
User Interfaces
Nov. 10
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 deliver a single compressed file. zip or . rar by name:
one. ep01_grXX.rar
where XX It corresponds to the group identifier practices. For example, the group of group 5 81 practices
must generates a file named:
two. ep01_gr05.rar
The folder structure of the files must be delivered as follows:
▪ ej0N. Exercise root directory. HTML files.
▪ ej0N / style. Style sheets.
▪ ej0N / images. Images and graphics.
where N It 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
no case will be accepted
Charles III University of Madrid
Polytechnic School
Degree in Computer Engineering
User Interfaces
Nov. 11
practices delivered by email, tutoring, or after hours of the corresponding meeting.
References
[one] "JavaScript Tutorial" JavaScript Tutorial W3 Schools, available at
http://www.w3schools.com/js
[two] "JavaScript tutorials" available at http://www.javascriptkit.com/javatutors
[3] "The JavaScript PocketGuide" Lenny Burdette, Ed. Peachpit Press, 2010 [4] "JavaScript Step by
Step" Steve Suehring, Ed. Microsoft Press, 2008 [5] "Eloquent JavaScript" available at http://eloquentjavascript.net
[6] "JQuery Tutorial" jQuery Tutorial W3 Schools, available at
http://www.w3schools.com/jquery/default.asp
[7] "JQuery Official WebSite" available at http://jquery.com
[8] "Learning jQuery" Jonathan Chaffer, Ed. PCKT Publishing, 2011 [9]
"MDN Web Docs - Mozilla" available at https://developer.mozilla.org/es/