HUMAN COMPUTER INTERACTION · 2020-02-07 · Bootstrap is one of the most popular HTML, CSS, and...

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


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


<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


<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


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


localStorage.lastname = "Smith";

document.getElementById("result").innerHTML="Last name: “ +

localStorage.lastname;

sessionStorage.lastname="Smith";

New Form Elements

Datalist

Output


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


CSS3 offers:

rounded borders

boxes with shadow

borders from image


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


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


@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.


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


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


@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.


/* 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


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


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"


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


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)


$(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>


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


$("#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



$("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>


$("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)


$("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


$("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


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


$(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


You can include bootstrap from MaxCDN (Content Delivery Network).

jQuery is also required in order for bootstrap to work


<link rel="stylesheet“ href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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


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


<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






https://getbootstrap.com/

https://www.w3schools.com/bootstrap/default.asp

HUMAN COMPUTER INTERACTION · 2020-02-07 · Bootstrap is one of the most popular HTML, CSS, and...

Documents

Transcript of HUMAN COMPUTER INTERACTION · 2020-02-07 · Bootstrap is one of the most popular HTML, CSS, and...