HUMAN COMPUTER INTERACTION - Uoc.gr

1y ago
7 Views
3 Downloads
2.41 MB
58 Pages
Last View : 20d ago
Last Download : 2m ago
Upload by : Eli Jorgenson
Transcription

UNIVERSITY OF CRETEFACULTY OF SCIENCES AND ENGINEERINGCOMPUTER SCIENCE DEPARTMENTCOURSE CS-364 (OPTIONAL)HUMAN – COMPUTER INTERACTIONECTS: 6Prerequisite: CS-150HY-364: Επικοινωνία Ανθρώπου - ΜηχανήςSlide 1

Introduction HTML HTML infoTag AttributesBasic HTML DOMXHTML !DOCTYPE tagMeta tagsBasic HTML TagsLinksTablesListsForms and data inputImagesDiv και Span elementsHTML stylingEvents in HTML 4.0Scripts (Javascript)CS-364: Introduction to Human – Computer Interaction CSS CSS stylingWhy is CSS needed;CSS syntaxCSS BackgroundCSS TextCSS FontCSS BorderCSS MarginCSS PaddingReferencesSlide 2

What is HTML; It is a language that describe webpages Hyper Text Markup Language The HTML documents are text files that contain markup tags Τα markup tags informs the browser the way that the webpage shouldbe presented File extension: htm or html To create an html file a text editor is enoughCS-364: Introduction to Human – Computer InteractionSlide 4

HTML are documents that contain HTML elements The HTML elements are determined using HTML tags HTML tags usually used in pairs, for example b (opening tag) και /b (closing tag) The text between the opening and closing tag is the content of theelement HTML is not case sensitiveCS-364: Introduction to Human – Computer InteractionSlide 5

Tags may contain attributes. Attributes provide moreinformation about an HTML element. e.g. table border "0" name-value pairs (name “value”) They are determined in the opening tag of an HTMLelementCS-364: Introduction to Human – Computer InteractionSlide 6

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” html head title . /title meta name "keywords" content “C, C , C#“ / . /head body . /body /html CS-364: Introduction to Human – Computer InteractionSlide 7

Extensible Hypertext Markup Language A stricter version of HTML The HTML 4.01 elements correspond with the XML syntax Recommended by W3CCS-364: Introduction to Human – Computer InteractionSlide 8

This tag informs the browser about the HTML orXHTML version that the file usesHTML Strict DTDUse this version for clear markup, without unnecessary elements. Useit combined with CSS. !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd" CS-364: Introduction to Human – Computer InteractionSlide 9

HTML Transitional DTDUse this version when the website is intended to be used by userswho have browsers that don’t support CSS !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 .dtd" CS-364: Introduction to Human – Computer InteractionSlide 10

HTML also contains meta elements which are included in the headof the HTML file Provides meta-information about the file Describes the contents of the file meta name "description" content “Source code for C, C , C#" meta http-equiv "Content-Type" content "text/html; charset utf-8" meta name "keywords" content “C, C , C#" CS-364: Introduction to Human – Computer InteractionSlide 11

HeadingsHeadings are defined using the tags h1 to h6 . The h1 defines thebiggest and most important hierarchically heading. Respectively the tag h6 defines the smallest heading. h1 CS-364: Introduction to HCI /h1 h2 CS-364: Introduction to HCI /h2 h3 CS-364: Introduction to HCI /h3 h6 CS-364: Introduction to HCI /h6 ParagraphsParagraphs are defined using the tag p E.g. p This is a paragraph /p CS-364: Introduction to Human – Computer InteractionSlide 12

Line BreaksThe tag br produces a line break in textThe br tag is an empty tag which means that it has no end tag Non-breaking SpaceTo add a space character in your text, use the   CommentsThey are surrounded by the opening tag !-and by the closing tag -- e.g. !-- This is a comment -- CS-364: Introduction to Human – Computer InteractionSlide 13

To create a hyperlink to another document, use the tag a (anchor) It can redirect to any web resources (HTML page, image, sound file,video, etc.) The href attribute specifies the URL of the page the link goes to a href "http://www.google.gr/" target " blank" Google /a Target attributeblank: opens the linked document in a new window or tabself: opens the linked document in the same frameparent: opens the linked document in the parent frametop: opens the linked document in the full body of the windowCS-364: Introduction to Human – Computer InteractionSlide 14

Named Anchors With the use of named anchor we can create links that go directly to aspecific area of our webpage We use the attribute name to create a bookmark inside an anchor a name "tips" Helpful tips /a Use the “href” that goes to the bookmark a href "#tips" Go to the helpful tips /a CS-364: Introduction to Human – Computer InteractionSlide 15

A table consist of rows (that are defined using the tr tag), And every row consistof table cells (that are defined using the td tag) A table cell can contain text, images, lists, paragraphs, forms, horizontal lines,tables,etc. table border "1" tr th Heading 1 /th th Heading 2 /th /tr tr td 1,1 /td td 1,2 /td /tr /table CS-364: Introduction to Human – Computer InteractionSlide 16

colspan and rowspan attributes table border "1" caption Header /caption tr th Office /th th colspan "2" Telephone /th /tr tr td postgraduate secretariat /td td 30-2810-1234567 /td td 30-2810-1234568 /td /tr /table CS-364: Introduction to Human – Computer InteractionSlide 17

width and height attributes Static: using Pixels Percentage: percentage of the available vertical or horizonal space Usage of percentage is recommended table border "1" width “40" height “35" table border "1" width "50%" height “40%" CS-364: Introduction to Human – Computer InteractionSlide 18

HTML supports ordered, unordered, definition and nested lists Unordered ListsIn an unordered list the list items will be marked with bullets Ordered ListsIn an order list the list items will be marked with numbers by default Description ListsA description list is not an element list. A description list is a list ofterms, with a description of each term.CS-364: Introduction to Human – Computer InteractionSlide 19

Ordered ListUnordered ListDescription List ol li Red /li li Green /li li Blue /li /ol ul li Red /li li Green /li li Blue /li /ul dl dt Coffee /dt dd Black drink /dd dt Milk /dt dd White drink /dd /dl CS-364: Introduction to Human – Computer InteractionSlide 20

Nested List ul type "square" li Specific ol type "lower-roman" li RDF Validator /li li Feed Validator /li li P3P Validator /li /ol /li li Basic ul type "circle" li MarkUp Validator /li li CSS Validator ol type "A" start "3" li by URI /li li by File Upload /li /ol /li /ul /li /ul CS-364: Introduction to Human – Computer InteractionSlide 21

Forms A form is an area that can contain form elements The form elements are elements that allow the user to inputinformation (for example text fields, textarea fields, drop-downmenus, radio buttons, checkboxes, etc.) The form is defined by the tag form /form Input The most commonly used form element is the input tag. The inputtype is determined from the type attribute(Text Field, Radio Button,Checkbox) Drop Down Boxes, TextAreasCS-364: Introduction to Human – Computer InteractionSlide 22

Text fields / PasswordThey are used to input letters, numbers, etc. in a form. For the password fields set thetype attribute as type “password”. form Name: input type "text" name "firstname" /form Radio ButtonsThey are used to choose one option between a predefined set of options form input type "radio" name "sex" value "male" Boy br input type "radio" name "sex" value "female" Girl /form CS-364: Introduction to Human – Computer InteractionSlide 23

CheckboxesThey are used to choose one or more options from a predefined set ofoption input type "checkbox" name "vehicle" value "Bike" / Bicycle br input type "checkbox" name "vehicle" value "Car" / Car br input type "checkbox" name "vehicle" value "Airplane" / Airplane br Drop Down Boxes select name "cars" option value "volvo" Volvo /option option value "saab" Saab /option option value "fiat" Fiat /option /select CS-364: Introduction to Human – Computer InteractionSlide 24

Text area textarea rows “5" cols “25" This is a text area /textarea Hidden Fields Not visible by the user Commonly used to store a default value input type “hidden” name “languageID” value “2” / CS-364: Introduction to Human – Computer InteractionSlide 25

Action and Method Attributes Action attribute Defines the name of the file where the form content will besent Method attribute GET: This method sends the form’s content to a URL that isdetermined with pair name-value Useful for bookmarking the result POST: this method sends the form’s content as an HTTPtransaction More secure than get and no size limitCS-364: Introduction to Human – Computer InteractionSlide 26

Submit ButtonInforms the browser to collect all the options, values and text that isinputted to the form elements and to send them to the form handler whichis specified in the form's action attribute Reset ButtonResets the form to its initial stateCS-364: Introduction to Human – Computer InteractionSlide 27

form action "test action.asp" method "get" input type "checkbox" name "vehicle" value "Bike" checked "checked"/ Bicycle br/ input type "checkbox" name "vehicle" value "Car" / Car br/ input type "checkbox" name "vehicle" value "Airplane" / Airplane br/ br/ input type "submit" value "OK" / input type "reset" value "Clear" / /form CS-364: Introduction to Human – Computer InteractionSlide 28

Usage of the tag img Attribute src (the source of the image file) Attribute alt (the alternative text of the image) img src "/images/test.gif" alt "test image" width "144" height "50" / img src "http://www.w3schools.com/images/ie.gif" / CS-364: Introduction to Human – Computer InteractionSlide 29

The tags span and div are really important while using CSS div Is used are a container of other tags Alternative way to present content (other way is using tables) Creates a line change before and after the element Attributes : id, width, height, style, align, . span This tag is used to group inline-elements in a document This tag provides no visual change by itself Does not support the attribute alignCS-364: Introduction to Human – Computer InteractionSlide 30

div id "menu" align "right" a href "" HOME /a     a href "" CONTACT /a     a href "" ABOUT /a /div div id "content" align "left" bgcolor "white" h5 Content Articles /h5 p This paragraph would be your span style "color: red;" content paragraph /span with all of your readable material. /p /div CS-364: Introduction to Human – Computer InteractionSlide 31

Colors 16 basic colors(black, yellow, blue, green, navy, red, lime, .) RGB (Red, Green, Blue)Each parameter can be from 0 (no usage of this color) to 255 (fullcolor)e.g. (0,0,255) blue, (255,255,255) white Font font /font size (1 to 7) color type (Arial , Book Antiqua, Garamond, .)CS-364: Introduction to Human – Computer InteractionSlide 32

p font size “6" face "Georgia, Arial" color “maroon“ C /font ustomize your font to achieve a desired look. /p Attribute bgcolor It is used to customize the color of the font in an HTML file, the webpageand the font of the tables Use CSS to customize the font in more detail body bgcolor "Silver" table bgcolor "rgb(0,0,255)" border "1" CS-364: Introduction to Human – Computer InteractionSlide 33

Events trigger browser actions, for example when a user chooses, using his mouse,an html elementWindow Events(onload, onunload)Form Element Events(onchange, onsubmit, onfocus, .)Keyboard Events(onkeydown, onkeypress, .)Mouse Events(onclick, ondblclick,onmousemove,onmouseover, .)CS-364: Introduction to Human – Computer Interaction form input type "button"onclick "myfunction('Hello')"value "Call function" /form Slide 34

Client-side scripting language Adds interactive characteristics to the HTML pages It is used to: add text dynamically in an HTML page read/write the content of HTML elements Validate forms identify the user's browser create cookiesCS-364: Introduction to Human – Computer InteractionSlide 35

Where is JavaScript placed In the Head or Body head script type "text/javascript" . /script /head External script head script src "myScript.js" /script /head CS-364: Introduction to Human – Computer InteractionSlide 36

Cascading Style Sheets Separates the HTML file content from the presentation of the documentp { text-align: center; color: black; font-family: arial; } Multiple style definitions, in ascending order of priority: Browser default External style sheet Internal style sheet inside the head tag Internal style, inside an HTML element For common definitions, the last statement takes precedence For example an internal style has higher priority, which means that it willoverrule a style that is defined in the head tagCS-364: Introduction to Human – Computer InteractionSlide 38

External Style Sheet head link rel "stylesheet" type "text/css" href "mystyle.css" /head Internal Style Sheet head style type "text/css" body {background-color: red;} p {padding-left: 20px;} /style /head Inline Style p style "color: red; padding-left: 20px;" This is a paragraph /p CS-364: Introduction to Human – Computer InteractionSlide 39

The HTML tags initially designed to define the content of a document The presentation of the document would have to be ensured by thebrowser without the use of additional tags While all leading browsers add new proprietary HTML tags in the initialHTML definition, the process for creating HTML documents, where thecontent was separate from the way it was presented was getting moredifficult. To solve this problem W3C created STYLES in addition to HTML 4.0CS-364: Introduction to Human – Computer InteractionSlide 40

Τhe CSS syntax consists of three parts: the selector, a property and avalue selector {property: value} Selector is usually an HTML element/tag that you would like to define Property is the parameter/attribute you would life to configure Every property can have a valuebody {color: black}p {font-family: "sans serif"}CS-364: Introduction to Human – Computer InteractionSlide 41

You can group the selector Separate each selector with a commah1, h2, h3, h4, h5, h6{color: green} Thee comments in a CSS start with “/*” and close with “*/”e.g. /* This is a comment */CS-364: Introduction to Human – Computer InteractionSlide 42

Class With classes you can define different styles in the same HTML element For example, a document needs to type of paragraphs: one with leftalignment and one with center alignment The styles are:p.right {text-align: right}p.center {text-align: center} In the HTML, we set the classes in the class attribute: p class "right" This paragraph will be right-aligned. /p p class "center" This paragraph will be center-aligned. /p CS-364: Introduction to Human – Computer InteractionSlide 43

CSS background properties allows the configuration of an element’s font color,you can set an image as a background, repeat the background imagehorizontally or mentSets whether a background imageis fixed or scrolls with the rest of thepagescroll, fixedbackground-colorSets the background color of anelementcolor-rgb, color-hex, color-name, Transparentbackground-imageSets one or more backgroundimages for an elementurl(URL), nonebackgroundpositionSets the starting position of abackground imagetop left, top center, top right, center left, centercenter, center right, bottom left, bottom center,bottom right, x% y%, xpos yposbackground-repeatSets if/how a background image willbe repeatedRepeat, repeat-x, repeat-y, no-repeatCS-364: Introduction to Human – Computer InteractionSlide 44

html head style type "text/css" body {background-color: yellow}h1 {background-color: #00ff00}h2 {background-color: transparent}p {background-color: rgb(250,0,255)} /style /head body h1 This is header 1 /h1 h2 This is header 2 /h2 p This is a paragraph /p /body /html CS-364: Introduction to Human – Computer InteractionSlide 45

CSS text properties allows the configuration of the way the text will bepresented. You can set color, increase or decrease the space betweencharacters,align text, etc.PropertyDescriptionValuecolorSets the text colorcolordirectionSpecifies the text direction/writingdirection.ltr, rtlline-heightSpecifies the line heightnormal, number, length, %letter-spacingIncreases or decreases the space betweencharacters in a textnormal, lengthtext-alignAligns the textleft, right, center, justifytext-decorationSpecifies the decoration added to textnone, underline, overline, line-through,blinktext-indentspecifies the indentation of the first line in atext-blocklength, %text-transformControls the capitalization of textnone, capitalize, uppercase, lowercaseCS-364: Introduction to Human – Computer InteractionSlide 46

html head style type "text/css" h1 {text-decoration: overline}h2 {text-decoration: line-through}h3 {text-decoration: underline}a {text-decoration: none} /style /head body h1 This is header 1 /h1 h2 This is header 2 /h2 h3 This is header 3 /h3 p a href "http://www.parliament.gr" This is a link /a /p /body /html CS-364: Introduction to Human – Computer InteractionSlide 47

CSS font properties allow the configuration of the following fies the font for an elementfamily-namegeneric-familyfont-sizeSets the size of a fontxx-small, x-small, small, medium,large, x-large, xx-large, smaller,larger, length%font-styleSpecifies the font style for a textnormal, italic, obliquefont-weightSets how thick or thin charactersin text should be displayed.normal, bold, bolder, lighter, 100,200300, 400, 500, 600, 700, 800, 900CS-364: Introduction to Human – Computer InteractionSlide 48

html head style type "text/css" h3 {font-family: times}p {font-family: courier}p.sansserif {font-family: sans-serif} /style /head body h3 This is header 3 /h3 p This is a paragraph /p p class "sansserif" This is a paragraph /p /body /html CS-364: Introduction to Human – Computer InteractionSlide 49

CSS border properties allow to set an elements frame style and colorPropertyDescriptionValueborderSets all the border properties in onedeclarationborder-width, border-style, border-colorborder-bottomSets all the bottom border properties in onedeclarationborder-bottom-width, border-style,border-colorborder-leftSets all the left border properties in onedeclarationborder-left-width, border-style, bordercolorborder-rightSets all the right border properties in onedeclarationborder-bottom-width, border-style,border-colorborder-styleSets the style of an element's four bordersnone, hidden, dotted, dashed, solid,double, groove, ridge, inset, outsetborder-topSets all the top border properties in onedeclarationborder-top-width, border-style, bordercolorborder-widthSets the width of an element's four bordersthin, medium, thick, lengthCS-364: Introduction to Human – Computer InteractionSlide 50

html head style type "text/css" p.dotted {border-style: dotted}p.dashed {border-style: dashed}p.solid {border-style: solid}p.double {border-style: double}p.groove {border-style: groove}p.ridge {border-style: ridge}p.inset {border-style: inset}p.outset {border-style: outset} /style /head body p class "dotted" A dotted border /p p class "dashed" A dashed border /p p class "solid" A solid border /p p class "double" A double border /p p class "groove" A groove border /p p class "ridge" A ridge border /p p class "inset" An inset border /p p class "outset" An outset border /p /body /html CS-364: Introduction to Human – Computer InteractionSlide 51

CSS margin properties generatespace around elementsPropertyDescriptionValuemarginSets all the margin properties in onedeclarationmargin-top, margin-right, marginbottom, margin-leftmargin-bottomSets the bottom margin of an elementautolength, %margin-leftSets the left margin of an elementautolength, %margin-rightSets the right margin of an elementautolength, %margin-topSets the top margin of an elementautolength, %CS-364: Introduction to Human – Computer InteractionSlide 52

html head style type "text/css" p.margin {margin: 2cm 4cm 3cm 4cm} /style /head body p This is a paragraph with no specified margins /p p class " margin" This is a paragraph with specified margins /p p This is a paragraph with no specified margins /p /body /html CS-364: Introduction to Human – Computer InteractionSlide 53

CSS padding properties configure the space between the frame and the contentof the elementPropertyDescriptionValuepaddingSets all the padding properties in onedeclarationpadding-top, padding-right,padding-bottom, padding-leftpadding-bottomSets the bottom padding of an elementlength, %padding-leftSets the left padding of an elementlength, %padding-rightSets the right padding of an elementlength, %padding-topSets the top padding of an elementlength, %CS-364: Introduction to Human – Computer InteractionSlide 54

html head style type "text/css" td.test1 {padding: 1.5cm}td.test2 {padding: 0.5cm 2.5cm} /style /head body table border "1" tr td class "test1" This is a tablecell with equal paddingon each side. /td /tr /table br / table border "1" tr td class "test2" This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm. /td /tr /table /body /html CS-364: Introduction to Human – Computer InteractionSlide 55

CS-364: Introduction to Human – Computer InteractionSlide 56

http://www.w3schools.com http://www.w3.org/html/ http://www.w3.org/Style/CSS/ 000920/#html-index http://www.alanwood.net/demos/wgl4.html http://www.htmlhelp.com/reference/html40/entities/ http://www.pitt.edu/ nisg/cis//web/cgi/rgb.htmlCS-364: Introduction to Human – Computer InteractionSlide 57

THE ENDCS-364: Introduction to Human – Computer InteractionSlide 58

What is HTML; It is a language that describe webpages Hyper Text Markup Language The HTML documents are text files that contain markup tags Τα markup tags informs the browser the way that the webpage should be presented File extension: htm or html To create an html file a text editor is enough CS-364: Introduction to Human -Computer Interaction Slide 4

Related Documents:

Documento de apoyo para el profesorado de la UOC _ 2 Actividades de aprendizaje. Documento de apoyo para el profesorado de la UOC Mayo de 2015 Esta guía ha sido elaborada por el equipo de Modelo Educativo del eLearn Center con la colaboración de la Comisión de Representantes de los Estudios en el eLC y del profesorado de la UOC eLearn Center.

El Buyer Persona Juan Pablo Sánchez uoc.edu . alumni.uoc.edu 01 ¿Qúe es el Buyer Persona? Tu cliente ideal. 00/00/00 2 . alumni.uoc.edu 3 Juan Pablo Sánchez CEO (owner) Asmalljob . · Le gusta HubSpot · Herramienta es fácil de usar · Puede aprender Inbound

Human Computer Interaction Notes Interaction Design ( Scenarios) Interaction Design is about creating user experiences that enhance and augment the way people work, communicate, and interact.1 Interaction Design has a much wider scope than Human Computer Interaction. ID is concerned with the theory and practice of designing user experiences for any technology or

Manolis Surligas (CSD, UoC) OSPF tutorial May 14, 2019 1 / 15 OSPF tutorial Computer Science Department, University of Crete Manolis Surligas surligas@csd.uoc.gr May 14, 2019. Open Shortest Path First (OSPF) OSPF is a dynamic routing protocol It is classi ed as an Interior Gateway Protocol (IGP) . (in RIP this was 15) OSPF uses IP multicast .

Tân Ước Lược Khảo (N ew Testament Survey) của Merrill C. Tenney và Walter M. Dunnett Thánh Kinh Lược khảo1 (Halley s Bible Handbook) của Henry H. Halley, nhà in Tin . Tân Ước New Testament

particularly concerned with computer systems. Human-Computer Interaction and Human Factors is particularly concerned with issues of usability, that is, how the design of technological systems impacts how efficiently and effectively people can use those systems. Human-Computer Interaction and Human Factors does not currently offer

Human Computer Interaction ACM SIG-CHI (2006) HCI is a discipline concerned with the design, implementation and evaluation of interactive computing systems for human use and with the study of major phenomena surrounding them. HCI has human in its core but requires the design of interaction of human with computer technology.

comprehensive quide to HCI and interaction design, Addison Wesley, 2005, 2010, 2014. -1 chapter: Designing interactive systems: a fusion of skills Jennifer Preece, Yvonne Rogers, Helen Sharp (2002, 2007, 2011). Interaction design: beyond human -computer interaction. John Wiley & Sons www.id-book.com -1 chapter: What is Interaction .