Post on 11-Jul-2020
HY-364: Επικοινωνία Ανθρώπου - Μηχανής Slide 1HY-364: Επικοινωνία Ανθρώπου - Μηχανής Slide 1
COURSE CS-364 (OPTIONAL)
HUMAN – COMPUTER INTERACTION
UNIVERSITY OF CRETEFACULTY OF SCIENCES AND ENGINEERING
COMPUTER SCIENCE DEPARTMENT
ECTS: 6
Prerequisite: CS-150
HTML5 will be the new standard for HTML, XHTML, and the HTML DOM
The previous version of HTML came in 1999
the web has changed a lot since then
HTML5 is still a work in progress
most modern browsers have some HTML5 support
Introduces new features
The <canvas> element for 2D drawing
The <video> and <audio> elements for media playback
Support for local storage
New content-specific elements▪ <article>, <footer>, <header>, <nav>, <section>
New form controls, ▪ calendar, date, time, email, url, search
Slide 3CS-364: Human – Computer Interaction
uses JavaScript to draw graphics on a web page
offers several methods for drawing paths, boxes, circles, characters, and adding images
Slide 4CS-364: Human – Computer Interaction
The canvas element is used to draw graphics on a web page
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle ="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body> </html>
Many modern websites show videos
HTML5 provides a standard for showing videos
Video Formats
Currently, there are 3 supported video formats
Example
Slide 5CS-364: Human – Computer Interaction
<video width="320" height="240“ controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>
HTML5 provides a standard for playing audio
Audio Formats
Currently, there are 3 supported audio formats
Example
Slide 6CS-364: Human – Computer Interaction
<audio src="song.ogg" controls="controls"></audio>
HTML5 offers two new objects for storing data on the client:
localStorage - stores data with no time limit
sessionStorage - stores data for one session
Earlier, this was done with cookies
Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective
In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for
It is possible to store large amounts of data without affecting the website's performance
The data is stored in different areas for different websites, and a website can only access data stored by itself
HTML5 uses JavaScript to store and access the data
Slide 7CS-364: Human – Computer Interaction
The localStorage Object
stores the data with no time limit
the data will be available the next day, week, or year
The sessionStorage Object
stores the data for one session
data deleted when the user closes the browser window
Slide 8CS-364: Human – Computer Interaction
localStorage.lastname = "Smith";
document.getElementById("result").innerHTML="Last name: “ +
localStorage.lastname;
sessionStorage.lastname="Smith";
New Form Elements
Datalist
Output
Slide 9CS-364: Human – Computer Interaction
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0 <input type="range" name="a" value="50" /> 100 + <input type="number" name="b"
value="50" />
= <output name="x" for="a b"></output></form>
New input attributes: autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height and width
list
min, max and step
multiple
pattern (regexp)
placeholder
required
Slide 10CS-364: Human – Computer Interaction
CSS3 offers:
rounded borders
boxes with shadow
borders from image
Slide 12CS-364: Human – Computer Interaction
div {border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}
div {box-shadow: 10px 10px 5px #888888;}
div {border-image:url(border.png) 30 30 round; /* Firefox */-moz-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ -webkit-border-image:url(border.png) 30 30 round;/* Opera */ -o-border-image:url(border.png) 30 30 round; }
Property Description
hanging-punctuation Specifies whether a punctuation character may be placed outside the line box
punctuation-trim Specifies whether a punctuation character should be trimmed
text-align-lastDescribes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"
text-emphasisApplies emphasis marks, and the foreground color of the emphasis marks, to the element's text
text-justify Specifies the justification method used when text-align is "justify"
text-outline Specifies a text outline
text-overflow Specifies what should happen when text overflows the containing element
text-shadow Adds shadow to text
text-wrap Specifies line breaking rules for text
word-break Specifies line breaking rules for non-CJK scripts
word-wrap Allows long, unbreakable words to be broken and wrap to the next line
Slide 13CS-364: Human – Computer Interaction
text-shadow: 5px 5px 5px #FF0000;
With CSS3, web designers are no longer forced to use only “web-safe” fonts
The @font-face rule allows the definition of a name for the font, and the URL to the font file
Slide 14CS-364: Human – Computer Interaction
@font-face {
font-family : myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot') format("opentype"); /* IE */
}
div {
font-family : myFirstFont;
}
2D Transforms
translate, rotate, scale, skew, matrix, etc.
3D Transforms
rotateX, rotateY, etc.
Slide 15CS-364: Human – Computer Interaction
div {transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */}
div{Transform: rotateX(120deg);-webkit-transform: rotateX(120deg); /* Safari & Chrome */-moz-transform: rotateX(120deg); /* Firefox */}
Add an effect when changing from one style to another, without using Flash animations or JavaScript Specify the CSS property you want to add an effect to
Specify the duration of the effect
Example: Add effects on the width, height, and the transformation
Slide 16CS-364: Human – Computer Interaction
div {
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
@keyframes rule is where the animation is created
By specifying a CSS style inside the @keyframes rule, the animation will gradually change from the current style to the new style
Step 1: Create the animation in the @keyframes
Step 2: Bind the animation to a selector
Slide 17CS-364: Human – Computer Interaction
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
Div {
animation: myfirst 5s;
}
Media Queries use @media rule to include a block of CSS properties only if a certain condition is true.
Slide 18CS-364: Human – Computer Interaction
/* For desktop: */.my-class{
display: inline;width: 90%;
…}
@media only screen and (max-width: 768px) {/* For mobile phones: */.my-class {display: block;width: 50%;
…}
}
Desktop
Mobile
jQuery is a new kind of JavaScript Library fast and concise
An open source project
Simplifies: document traversing
event handling
animating
Slide 20CS-364: Human – Computer Interaction
The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s)
Basic syntax is: $(selector).action()
A dollar sign to define jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides current element
$("p").hide() - hides all paragraphs
Slide 21CS-364: Human – Computer Interaction
Used to select HTML elements / groups of elements by element name, attribute name or by content
jQuery Element Selectors CSS selectors to select HTML elements
$("p") - selects all <p> elements
$("p.intro") - selects all <p> elements with class="intro"
$("p#demo") - selects all <p> elements with id="demo"
Slide 22CS-364: Human – Computer Interaction
jQuery Attribute SelectorsXPath expressions to select elements with given attributes
$("[href]") - select all elements with an href attribute
$("[href='#']") - select all elements with an href value equal to "#"
$("[href!='#']") - select elements with an href value NOT equal to "#"
$("[href$='.jpg']") - select elements with an href value ending with ".jpg"
jQuery CSS SelectorsCSS selectors to change CSS properties for HTML elements $("p").css("background-color","yellow") - select all <p> elements and
set their background color to yellow
Slide 23CS-364: Human – Computer Interaction
Event handlers are method that are called when "something happens" in HTML
The term "triggered (or "fired") by an event" is often used
The Document Ready Function
Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded
This to prevent any jQuery code from running before the document is finished loading (is ready)
Slide 24CS-364: Human – Computer Interaction
$(document).ready(function(){
// jQuery functions go here...
});
<html><head>
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">
$(document).ready(function(){$("button").click(function(){
$("p").hide();});
});</script>
</head>
<body><h2>This is a heading</h2><p>This is a paragraph.</p><button>Click me</button></body>
</html>
Slide 25CS-364: Human – Computer Interaction
A function is called when the click event for the button is triggered
$("button").click(function() {..some code... } )
The method hides all <p> elements:
$("p").hide();
Hide & Show optional params: speed and callback
Toggle toggles the visibility of HTML elements using show or hide
Slide - slideDown, slideUp, slideToggleoptional params: speed and callback
Slide 26CS-364: Human – Computer Interaction
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("button").click(function(){
$("p").toggle();
});
$(".flip").click(function(){
$(".panel").slideDown();
});
Fade - fadeIn, fadeOutoptional params: speed and callback
Fade - fadeTooptional params: speed, opacity,callback
Custom Animations$(selector).animate({params},[duration],[easing],[callback])
params define the CSS properties that will be animated
Slide 27CS-364: Human – Computer Interaction
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
<script type="text/javascript"> $(document).ready(function(){$("button").click(function(){
$("div").animate({left:"100px"},"slow");$("div").animate({fontSize:"3em"},"slow");
});});</script>
$("button").click(function(){
$("div").fadeOut(4000);
});
JavaScript statements are executed line by line
However, with animations, the next line of code can be run even though the animation is not finished
This can create errors
A callback function is executed after the current animation is 100% finished
Typical Syntax
$(selector).hide(speed,callback)
Slide 28CS-364: Human – Computer Interaction
$("p").hide(1000,function(){alert("The paragraph is now hidden");
});
Changing HTML Content $(selector).html(content)
changes the contents of matching HTML elements
Adding HTML content $(selector).append(content)
appends content to the inside of matching HTML elements
$(selector).prepend(content)"prepends" content to the inside of matching HTML elements
$(selector).after(content)inserts HTML content after all matching elements
$(selector).before(content)inserts HTML content before all matching elements
Slide 29CS-364: Human – Computer Interaction
$("p").html("W3Schools");
$("p").append(" W3Schools");
jQuery has one important method for CSS manipulation: css()
Three different syntaxes, to perform different tasks
css(name) - Return CSS property value
css(name,value) - Set CSS property and value
css({properties}) - Set multiple CSS properties and values
Slide 30CS-364: Human – Computer Interaction
Return CSS Property Use css(name) to return the specified
CSS property value of the FIRST matched element
Set CSS Property and Value Use css(name,value) to set the
specified CSS property for ALL matched elements
Set Multiple CSS Property/Value Pairs Use css({properties}) to set one or
more CSS property/value pairs for the selected elements
height() and width() Methods Size manipulation
Slide 31CS-364: Human – Computer Interaction
$(this).css("background-color");
$("p").css("color","yellow")
$("p").css({“color":"yellow","font-
size":"200%"})
$("#div1").height("200px");
Bootstrap is one of the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites
Its a free front-end framework for faster and easier web development
It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation and many other, as well as optional JavaScript plugins
It gives you the ability to easily create responsive designs
Advantages of Bootstrap:
Easy to use
Responsive features
Mobile-first approach
Browser compatibility
Slide 33CS-364: Human – Computer Interaction
You can include bootstrap from MaxCDN (Content Delivery Network).
jQuery is also required in order for bootstrap to work
Slide 34CS-364: Human – Computer Interaction
<!-- Latest compiled and minified CSS --><link rel="stylesheet“ href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Bootstrap Grid System
Allows up to 12 columns across the page
You can also group the columns together to create wider columns
It is responsive, and the columns will re-arrange automatically depending on the screen size
Slide 35CS-364: Human – Computer Interaction
Grid Classes
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
Three Equal Columns
Slide 36CS-364: Human – Computer Interaction
<div class="row"><div class="col-sm-4">.col-sm-4</div><div class="col-sm-4">.col-sm-4</div><div class="col-sm-4">.col-sm-4</div>
</div>
Two Unequal Columns
<div class="row"><div class="col-sm-4">.col-sm-4</div><div class="col-sm-8">.col-sm-8</div>
</div>
HTML5
http://www.w3schools.com/html5/default.asp
CSS3
http://www.w3schools.com/css3/default.asp
jQuery
http://jquery.com/
http://www.w3schools.com/jquery/default.asp
Bootstrap
https://getbootstrap.com/
https://www.w3schools.com/bootstrap/default.asp
Slide 37CS-364: Human – Computer Interaction