Web Development. HCID 520 User Interface Software & Technology

Size: px

Start display at page:

Download "Web Development. HCID 520 User Interface Software & Technology"

Marcia Wilcox
5 years ago
Views:

1 Web Development! HCID 520 User Interface Software & Technology

3 Web Browser Timeline 1993: NCSA Mosaic web browser First broadly adopted graphical browser URL bar, back/forward buttons, images, etc Creators go on to found Netscape

4 Web Browser Timeline 1993: NCSA Mosaic web browser First broadly adopted graphical browser URL bar, back/forward buttons, images, etc Creators go on to found Netscape! 1995: JavaScript enables in-page scripting!

5 Web Browser Timeline 1993: NCSA Mosaic web browser First broadly adopted graphical browser URL bar, back/forward buttons, images, etc Creators go on to found Netscape! 1995: JavaScript enables in-page scripting! ~2004: XMLHttpRequest (xhr), allows dynamic content loading, standardized across browsers.

6 Web Browser Timeline 1993: NCSA Mosaic web browser First broadly adopted graphical browser URL bar, back/forward buttons, images, etc Creators go on to found Netscape! 1995: JavaScript enables in-page scripting! ~2004: XMLHttpRequest (xhr), allows dynamic content loading, standardized across browsers.! 2008: Google s V8 and other new JavaScript engines significantly increase performance.

7 Major Browsers Today Name! Layout Engine JavaScript Engine IE Trident Chakra Chrome Blink/WebKit V8 Safari WebKit Nitro (SquirrelFish) Firefox Gecko SpiderMonkey Opera Blink V8! Gecko is derived from Netscape Navigator Blink is derived from Apple s WebKit Chromium is the open-source version of Chrome

8 Web Architecture

9 Server-Side Client-Side Web Server Web Browser Database

10 Server-Side Client-Side Web Server Web Browser Go to URL Database

11 Server-Side Client-Side Web Server HTTP Request Web Browser Go to URL Database

12 Server-Side Client-Side Route Request Web Server HTTP Request Web Browser Go to URL Database

13 Server-Side Client-Side Route Request Process Data Web Server HTTP Request Web Browser Go to URL Database

14 Server-Side Client-Side Route Request Process Data Web Server HTTP Request Web Browser Go to URL SQL Database

15 Server-Side Client-Side Route Request Process Data Build Response Web Server HTTP Request Web Browser Go to URL SQL Database

16 Server-Side Client-Side Route Request Process Data Build Response Send Response Web Server HTTP Request Web Browser Go to URL SQL Database

17 Server-Side Client-Side Route Request Process Data Build Response Send Response Web Server HTTP Request HTTP Response Web Browser Go to URL SQL Database

18 Server-Side Client-Side Route Request Process Data Build Response Send Response Web Server HTTP Request HTTP Response Web Browser Go to URL Get Response SQL Database

19 Server-Side Client-Side Route Request Process Data Build Response Send Response Web Server HTTP Request HTTP Response Web Browser Go to URL Get Response Render Page SQL Database

20 Hypertext Transfer Protocol How browsers and servers talk to each other. Two most common request types! GET: request with all info visible in URL! POST: request with extra data not in URL Example: the contents of a form submission.! To see this in action, type on a command line: telnet google.com 80 then enter GET /!

21 Request Response Headers Content

22 Server-Side Client-Side SQL Web Server HTTP Request HTTP Response Web Browser Database

23 Server-Side SQL Web Server Database Server Technologies Apache (basic server) Java Servlets PHP Ruby on Rails (Ruby) Django (Python) Web Node.js / JavaScript Browser and many others HTTP Request HTTP Response Client-Side Databases MySQL Postgres SQLite MongoDB and many others

24 Server-Side Client-Side Web Server HTTP Request HTTP Response Web Browser SQL What about interactivity? Database

25 HTML Forms <form action= process_form.php method= post > Name: <input type= text name= name ><br> Nationality: <select name= country > <option value= uk >United Kingdom</option> <option value= us >United States</option> </select><br> Agree?: <input type= checkbox name= name ><br> Comments: <textarea name= freetext ></textarea> <br><input type= Submit value= OK > </form>

26 Server-Side Client-Side Web Server HTTP Request HTTP Response Web Browser SQL Database What about interactivity? In the early days, users could submit forms. The server would process the results and return a new page.

27 Server-Side Client-Side Web Server HTTP Request HTTP Response Web Browser SQL Database What about interactivity? In the early days, users could submit forms. The server would process the results and return a new page.! Then, AJAX came along

28 AJAX for Dynamic Content AJAX = Asynchronous JavaScript and XML (Coined in 2005 by Jesse James Garrett) Q: Does anyone actually say this anymore?! Main idea: load new data without having to load an entirely new page. Popularized by new generation of apps: Google Maps, Gmail.! Within JavaScript, use XMLHttpRequest to load data (not just XML! JSON, text, ). then process data and dynamically update page.

29 Single Page Applications With increasing JavaScript performance we can change the relationship of client & server to provide richer web-based applications! Main idea: Never (or rarely) navigate away from a page, instead dynamically load data and update page in-place. Let JavaScript on client (rather than server) manage app flow.! Currently a hot topic and a moving target! Tools include: Backbone.js, Angular, Meteor

30 Server-Side Client-Side SQL Web Server HTTP Request HTTP Response Web Browser Database

31 Server-Side Client-Side Web Server HTTP Request HTTP Response Web Browser SQL Database Model-View-Controller Where is the model? Where is the view? Where is the controller?! It s complicated

32 Model-View-Controller (MVC) What is changing is the relationship of client and server with respect to the MVC pattern!!

33 Model-View-Controller (MVC) What is changing is the relationship of client and server with respect to the MVC pattern!! Forms: Server handles almost all MVC functions. Browser renders HTML (subset of view) and submits forms (subset of controller).!

34 Form Processing SQL Web Server HTTP Request HTTP Response Web Browser Database HTML, CSS, Images! Server provides page content, the browser s job is to render it.

35 Model-View-Controller (MVC) What is changing is the relationship of client and server with respect to the MVC pattern!! Forms: Server handles almost all MVC functions. Browser renders HTML (subset of view) and submits forms (subset of controller).! Single Page Application: Client handles most MVC functions. Client communicates with server to retrieve / update parts of model.!

36 Single Page Application SQL Web Server HTTP Request HTTP Response Web Browser Database Backing Data (JSON)! Server provides access to data. Browser generates HTML; supports interaction & navigation via JavaScript.

37 Model-View-Controller (MVC) What is changing is the relationship of client and server with respect to the MVC pattern!! Forms: Server handles almost all MVC functions. Browser renders HTML (subset of view) and submits forms (subset of controller).! Single Page Application: Client handles most MVC functions. Client communicates with server to retrieve / update parts of model.! In reality, apps often lie in-between!

38 Web Browser as Development Tool

39 Useful Functions to Know Inspect Elements See page structure, see computed CSS values. Modify elements/styles to test or prototype.! JavaScript Console & Debugger Write/test JavaScript directly in browser. Step through your code to find/fix bugs.! Performance Profiling How fast does my site load?

44 Discussion

45 Sara: What are WebKits and why are they important?! Taysser: What are XMLHttpRequest objects? What are Style, Layout, and Paint and what is the difference between them? What is DOM nodes?! Zhenxi: how to do web testing under the compatibility across different browsers?! Garrick: What are ways that the usability of the inspector could be enhanced even further for those with less [web dev] experience?

46 Kristen: I'm curious if it is reasonable to imagine a tool where you could create screens in something like Illustrator, tag it with specific functionalities (i.e. input fields, animation, etc.), and then directly translate it into working web/mobile friendly code. If it is not reasonable, what are the barriers to writing tools that allow for greater abstraction when it comes to web/ mobile design?

47 Stuart: In the FAQ section of the Ajax page, one of the questions asked what differentiates Ajax from other asynchronous processing architectures. The answer the developers gave was along the lines of "it's actually being used," in about ten times as many words, and I don't know if I buy that as an explanation. Why did Ajax overtake these solutions so strongly that this ten-year-old architecture is still widely used today?

48 Tobin: json.org has awesome illustrations of how JSON works, which helps to understand how information is sent from client to server these days.

49 JavaScript

50 JavaScript The programming language of the web browser Written by Brendan Eich at Netscape in 10 days. Originally called Mocha, then LiveScript, renamed to JavaScript for marketing purposes. Official standardized name is ECMAScript.! Dynamically-typed scripting language Syntax derived from C; design inspired by Self & Scheme. Has little in common with Java!! Now one of the most widely used languages

52 Time to play JavaScript Jeopardy! CATEGORIES:! Hello World! Express Yourself Nothing Compares 2 U Boolean Logic Strung Out Talk Data To Me Variables & Variability Find Your (Control) Flow What s Your Function?

53 Category: Hello World!

54 Category: Hello World! console.log("hello World!");

55 Category: Hello World! console.log("hello World!"); What is console output: Hello World!?

56 Category: Hello World! console.error("uh oh...");

57 Category: Hello World! console.error("uh oh..."); What is console output: Uh oh?

58 Category: Hello World! alert("boom!");

59 Category: Hello World! alert("boom!"); What is an alert dialog stating: BOOM!?

60 Category: Hello World! var num = 5; console.log(num.tofixed(3));

61 Category: Hello World! var num = 5; console.log(num.tofixed(3)); What is console output: 5.000?

62 Category: Hello World! console.log({x:1, y:2});

63 Category: Hello World! console.log({x:1, y:2}); What is console output: Object {x: 1, y: 2}?

64 Category: Express Yourself

65 Category: Express Yourself 2 + 3

66 Category: Express Yourself What is 5?

67 Category: Express Yourself * 5

68 Category: Express Yourself * 5 What is 14? Multiply (*) has higher precedence than add (+).

69 Category: Express Yourself 1 / 2

70 Category: Express Yourself 1 / 2 What is 0.5? Why might some consider this an odd result?

71 Category: Express Yourself 5 % 2

72 Category: Express Yourself 5 % 2 What is 1? This is the modulo (or remainder) operator. It can be very useful.

73 Category: Express Yourself 1 + Math.sqrt(4)

74 Category: Express Yourself 1 + Math.sqrt(4) What is 3? The Math object has many helpful functions and constants.

75 Category: Nothing Compares 2 U

76 Category: Nothing Compares 2 U 5 > 2

77 Category: Nothing Compares 2 U 5 > 2 What is true? JavaScript includes true and false as primitive values of type Boolean.

78 Category: Nothing Compares 2 U 3 <= 3

79 Category: Nothing Compares 2 U 3 <= 3 What is true? The comparison operators are: <, >, <=, >=, ==,!=, ===, and!==

80 Category: Nothing Compares 2 U 2 + 1!= 9 / 3

81 Category: Nothing Compares 2 U 2 + 1!= 9 / 3 What is false?!= is the not-equals operator. Here 3!= 3 is false

82 Category: Nothing Compares 2 U 1 == "1"

83 Category: Nothing Compares 2 U 1 == "1" What is true? Double-equals will convert data types sometimes with odd results!

84 Category: Nothing Compares 2 U 1 === "1"

85 Category: Nothing Compares 2 U 1 === "1" What is false? Triple-equals (a.k.a. strict equal) does not convert data types.

86 Category: Boolean Logic

87 Category: Boolean Logic false true

88 Category: Boolean Logic false true What is true? is the logical OR operator. It is happy if anything is true.

89 Category: Boolean Logic true && false

90 Category: Boolean Logic true && false What is false? && is the logical AND operator. It is happy only if nothing is false.

91 Category: Boolean Logic!true

92 Category: Boolean Logic!true What is false?! is the logical NOT operator.

93 Category: Boolean Logic!(true && false true)

94 Category: Boolean Logic!(true && false true) What is false? && has precedence over, not that it matters here.

95 Category: Strung Out

96 Category: Strung Out "a" + "bc"

97 Category: Strung Out "a" + "bc" What is abc? In addition to adding numbers, + concatenates text strings.

98 Category: Strung Out 'ab' + "c"

99 Category: Strung Out 'ab' + "c" What is abc? Strings can have either single or double quotes.

100 Category: Strung Out "abc".length

101 Category: Strung Out "abc".length What is 3?

102 Category: Strung Out 'abc'.touppercase()

103 Category: Strung Out 'abc'.touppercase() What is ABC? Strings include a number of utility methods.

104 Category: Strung Out "abc".slice(0,1)

105 Category: Strung Out "abc".slice(0,1) What is a? Slice is just one of many useful methods defined on String values.

106 Category: Talk Data To Me

107 Category: Talk Data to Me [0, 1, 2].length

108 Category: Talk Data to Me [0, 1, 2].length What is 3? Arrays are denoted by brackets [] and contain ordered sets of values.

109 Category: Talk Data to Me [4, 5, 6][1]

110 Category: Talk Data to Me [4, 5, 6][1] What is 5? Brackets are also used to lookup values. Array indices start at zero.

111 Category: Talk Data to Me [0, 1, 2].slice(-2)

112 Category: Talk Data to Me [0, 1, 2].slice(-2) What is [1,2]? A negative value tells slice to count backward from the end.

113 Category: Talk Data to Me ({x:1, y:3}).x

114 Category: Talk Data to Me ({x:1, y:3}).x What is 1? Objects contain named values; ({x:1, y:3})[ x ] does the same thing.

115 Category: Talk Data to Me ({x:1, y:3}).z

116 Category: Talk Data to Me ({x:1, y:3}).z What is undefined? z is not defined on this object, and so JavaScript reports undefined.

117 Category: Variables & Variability

118 Category: Variables & Variability var x = 3; x + 4

119 Category: Variables & Variability var x = 3; x + 4 What is 7? Variables store values for later use. Don t forget the var keyword!!

120 Category: Variables & Variability var a = 3; a += 1

121 Category: Variables & Variability var a = 3; a += 1 What is 4? a += 1 adds one to a, then stores the value back in a

122 Category: Variables & Variability var a = 3; a++

123 Category: Variables & Variability var a = 3; a++ What is 3? a++ increases the value of a by one, but returns the previous value

124 Category: Variables & Variability var x = 4, y = 2; x *= y; x + 1

125 Category: Variables & Variability var x = 4, y = 2; x *= y; x + 1 What is 9? *= first multiplies both sides, then updates the left-hand-side value.

126 Category: Variables & Variability var a = {}; var b = a; a.x = 5; b.x

127 Category: Variables & Variability var a = {}; var b = a; a.x = 5; b.x What is 5? Here variables a and b both point to the same object.

128 Category: Variables & Variability var a = []; a.push(1,2,3); a[2]

129 Category: Variables & Variability var a = []; a.push(1,2,3); a[2] What is 3? The push method adds values to an array.

130 Category: Find Your (Control) Flow

131 Category: Find Your (Control) Flow if (5 > Math.round(4.5)) { "Yes"; } else { "No"; }

132 Category: Find Your (Control) Flow if (5 > Math.round(4.5)) { "Yes"; } else { "No"; } What is No? 4.5 rounds up to 5, hence the if statement is false.

133 Category: Find Your (Control) Flow 1 + (1 < 2? 3 : 4)

134 Category: Find Your (Control) Flow 1 + (1 < 2? 3 : 4) What is 4? (a? b : c) is similar to if (a) { b } else { c }

135 Category: Find Your (Control) Flow var a = 0, b = 3; while (b > 0) { a += 1; b -= 2; } a

136 Category: Find Your (Control) Flow var a = 0, b = 3; while (b > 0) { a += 1; b -= 2; } a What is 2? While loops keep running until the test is false.

137 Category: Find Your (Control) Flow var list = [1, 2, 3, 4, 5]; var value = 0; for (var i=0; i<list.length; i+=1) { value += list[i]; } value

138 Category: Find Your (Control) Flow var list = [1, 2, 3, 4, 5]; var value = 0; for (var i=0; i<list.length; i+=1) { value += list[i]; } value What is 15? This for loop sums up the values in the array named list.

139 Category: Find Your (Control) Flow var list = [1, 2, 3, 4, 5]; var value = 0; for (var i=0; i<list.length; i+=1) { value += list[i]; } Initializer (evaluated once) Test (evaluated every loop, loop stops if false) Update (evaluated every loop, except the first one)

140 Category: What s Your Function?

141 Category: What s Your Function? function square(x) { return x*x; } square(2);

142 Category: What s Your Function? function square(x) { return x*x; } square(2); What is 4?

143 Category: What s Your Function?! Function! Keyword Function Name!! function square(x) { return x*x; } Return Statement Function Arguments

144 Category: What s Your Function?! Function! Keyword Function Name!! function square(x) { return x*x; } Return Statement Function Arguments! Arguments are sometimes called parameters or inputs. The return statement determines the output. If omitted, undefined is returned.

145 Category: What s Your Function? function doubt(str) { return str + "?"; } doubt("i like hcid 520 );

146 Category: What s Your Function? function doubt(str) { return str + "?"; } doubt("i like hcid 520 ); What is i like hcid 520?? This is a function that simply adds? to its input.

147 Category: What s Your Function? var ponder = function(str) { return str + "?"; }; ponder("i can haz cheeseburger );

148 Category: What s Your Function? var ponder = function(str) { return str + "?"; }; ponder("i can haz cheeseburger ); What is i can haz cheeseburger?? This is very similar to the last one, but uses an anonymous function.

149 Category: What s Your Function? [0,1,2,3,4].filter(function(x) { return x > 2; });

150 Category: What s Your Function? [0,1,2,3,4].filter(function(x) { return x > 2; }); What is [3, 4]? Array.filter accepts a boolean-valued function as its argument.

151 Category: What s Your Function? function func1(x) { return x + 2; } function func2(f) { return 2 * f(1); } func2(func1);

152 Category: What s Your Function? function func1(x) { return x + 2; } function func2(f) { return 2 * f(1); } func2(func1); What is 6? Functions can be passed around like any other object / variable!

153 Bonus Round! DOMination

154 Assume you are on this page: <html> <body> <div id="header">title</div> <p class="quote">paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <body> </html>

155 Category: DOMination <html> <body> <div id="header">title</div> <p class="quote">paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <body> </html>! document.queryselector("#header");

156 Category: DOMination <html> <body> <div id="header">title</div> <p class="quote">paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <body> </html>! document.queryselector("#header"); What is <div id="header">title</div>? queryselector and queryselectorall take CSS selectors as input.

157 Category: DOMination <html> <body> <div id="header">title</div> <p class="quote">paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <body> </html>! document.queryselectorall("p");

158 Category: DOMination <html> <body> <div id="header">title</div> <p class="quote">paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <body> </html>! document.queryselectorall("p"); What is all paragraph elements? queryselector and queryselectorall take CSS selectors as input.

159 Category: DOMination <html> <body> <div id="header">title</div> <p class="quote">paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <body> </html>! var d = document.queryselector("div"); d.getattribute("id");

160 Category: DOMination <html> <body> <div id="header">title</div> <p class="quote">paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <body> </html>! var d = document.queryselector("div"); d.getattribute("id"); What is header? getattribute returns HTML attribute values

161 Category: DOMination <html> <body> <div id="header">title</div> <p class="quote">paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <body> </html>! var p = document.queryselector("p.quote"); p.style["font-style"] = "italic";

162 Category: DOMination <html> <body> <div id="header">title</div> <p class="quote">paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <body> </html>! var p = document.queryselector("p.quote"); p.style["font-style"] = "italic"; What is italicizes first quote paragraph? The style object allows you to programmatically set CSS styles.

163 Category: DOMination <html> <body> <div id="header">title</div> <p class="quote">paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <body> </html>! var p = document.queryselector("p.quote"); p.innertext;

164 Category: DOMination <html> <body> <div id="header">title</div> <p class="quote">paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <body> </html>! var p = document.queryselector("p.quote"); p.innertext; What is Paragraph 1? innertext is the text within an element (innerhtml is similar).

Networking & The Web. HCID 520 User Interface Software & Technology

Networking & The Web. HCID 520 User Interface Software & Technology Networking & The Web HCID 520 User Interface Software & Technology Uniform Resource Locator (URL) http://info.cern.ch:80/ 1991 HTTP v0.9 Uniform Resource Locator (URL) http://info.cern.ch:80/ Scheme/Protocol