Presentation is loading. Please wait.

Presentation is loading. Please wait.

SE 372: Web Page Design: HTML5 Week 1: Course Introduction Copyright © Steven W. Johnson January 1, 2015.

Similar presentations


Presentation on theme: "SE 372: Web Page Design: HTML5 Week 1: Course Introduction Copyright © Steven W. Johnson January 1, 2015."— Presentation transcript:

1 SE 372: Web Page Design: HTML5 Week 1: Course Introduction Copyright © Steven W. Johnson January 1, 2015

2 Go over: course syllabus policies & procedures disruptive technologies browsers text, images, links Today: 2

3 Steve Johnson Born in Kalamazoo, Michigan (ABD) Degrees: BBA in Business Management (WMU) MA: Training & Learning Technologies (UNM) PhD: Information Systems (Capella Univ.) Introduction: 3

4 Lived in: Kalamazoo, Michigan Dallas, Texas Albuquerque, New Mexico Bethel, Alaska Juneau, Alaska Izmir, Turkey Introduction: 4

5 SE 372Web Page Design: HTML5 SE 360 Advances in Software Development SE 480Client Side Scripting Languages SE 362Server Side Scripting Languages SE 370Programming Web Services SE 390Software Engineering for Mobile Apps SE 482E-Business Web Engineering (certificate): 5

6 Fundamentals of the HTML5 markup language The use of cascading style sheets The use of Photoshop Introduction to making movies in Flash This course: 6

7 Syllabus/course materials online: 372 Office: Room 413; Phone Office hours: Mon/Wed: 14:00 – 14:50 Fri: 11:00 – 11:50 This course: 7

8 The students who succeed in this course will be able to: Use HTML5 features effectively Create appropriate style rules to manage a page’s and a site’s appearance Incorporate Responsive Web Design principles into web content Identify different image formats and describe their intended use Build images or animations using Flash, Canvas, and SVG Learning objectives: 8

9 Course is 3 credits (2+2) ECTS weight is 150 Course statistics: 9

10 Based in IEU grading policy (AA >= 89.5) Grades are not curved or adjusted You must earn the grade that you want Grade: 10 ComponentPercentage Coding Assignments20% Midterm Exam40% Final Exam40%

11 Some people excel at physical things We excel at mental things We are otherwise the same My speech: 11

12 Coming to class (on time) is important Participating in class is doubly important You can’t learn by watching (or copying) Plan on being frustrated Don’t get in the way of other people’s learning My speech: 12

13 This isn’t the Lise I am not your mother I am not a drill sergeant I am your mentor Classroom: 13

14 You are responsible: yourself your learning meeting the obligations of the course you are the decision maker you are accountable for your actions you will get out of this what you put into it Classroom: 14

15 Socratic method: questions answered with questions lead, but not direct; self-discovery goal: self-sufficiency (yeterlilik) Teaching style: 15

16 Lectures mixed with labs Check prior week assignment Each week: 1 assignment Optional: vocabularies Optional: quizzes (basis for exams) “Normal” weekly plan: 16

17 Required by university policy; Ministry of Ed. Must attend 70% of classes (4 absences) Reason for absence is not important: you are responsible Must be present during first 30 minutes of class Attendance: 17

18 Late work is not accepted Student Services determines excused absences Make-up must be done within one week Make-up work: 18

19 Not allowed Plagiarized/copied work is “working together” is okay, but each person must have their own completed code No group assignments No group grading Sharing computer/work: 19

20 What to bring to class: 20 You Pencil/eraser Brain (working) (working) Laptop “gold guy 3d”

21 Weeks 01 – 07: HTML5 and CSS3 Week 08:Midterm exam Weeks 09 – 14:Digital imagery and media The semester: 21

22 tizag.com stackoverflow.com References/help with code: 22

23 Break 23

24 Disruptive technology (yıkıcı teknoloji) Invention (buluş) that changes our thinking and ways of doing things Improves life in unexpected way Causes old industry to die Example: benzene is free Disruptive technologies & mass medias 24

25 Disruptive technologies in communications: compress distance and time make learning and knowledge more accessible broaden scope of dissemination (yaymak) move control away from artists Disruptive technologies & mass medias 25

26 Printing press: Johannes Gutenberg (c1440) replaced written texts storehouse of information Disruptive technologies & mass medias 26

27 Telegraph Samuel F.B. Morse ( ) Original invention: 1794 first practical use: 1844 point-to-point asynchronous person-to-person 27 Disruptive technologies & mass medias

28 Samuel F.B. Morse ( ) Invented: single-wire telegraph 40 to 50 words per minute 28 Disruptive technologies & mass medias

29 Samuel F.B. Morse ( ) Invented: Morse code 29 Disruptive technologies & mass medias

30 Morse Code: Binary search tree 30 Disruptive technologies & mass medias: ← dots (dit)dashes (dah) → ← 0← 0 1 →

31 Telephone: 1874 Alexander Graham Bell (1847 – 1922) Adds voice to telegraph 31 Disruptive technologies & mass medias 1876 “Centennial” model

32 Records: 1877 Thomas Edison (1847 – 1931) creation of audio 32 Disruptive technologies & mass medias

33 Records: 1877 Berliner and Gramophone : Disruptive technologies & mass medias:

34 Player piano: Babbage’s punch cards on a piano Live performance of audio 34 Disruptive technologies & mass medias

35 Cinema: 1891 (kinetograph) W. K. L. Dickson (1860 – 1935) creation of video Video in a movie theatre 35 Disruptive technologies & mass medias

36 Radio: 1897 Guglielmo Marconi (1874 – 1937) Synchronous audio over a region 36 Disruptive technologies & mass medias

37 TV: 1927 Philo Farnsworth (1906 – 1971) adds video to radio’s audio synchronous regionally 37 Disruptive technologies & mass medias

38 WWW invented by Tim Berners-Lee (1990; 1993) For CERN (Center for European Nuclear Research) His invention in two parts: browsers (WorldWideWeb  Next OS) HTML Browsers 38

39 Mail Books (1450) Telephone (1877) Radio (1907) Television (1925) Computers (1940s) Communications technology 39

40 HTML based on SGML and CERN system Considered to be first web page by TBL 40 Disruptive technologies & mass medias

41 41 HTML: content-rich; format-poor HTML (1993): text with links Disruptive technologies & mass medias

42 42 Application used to view web content Generic name: user agent (over all devices) User agent: client application uses a network protocol (HTTP) communicates with server request documents handles server requests What is a browser?

43 Traditional browsing: 43 The InternetYour browser Browsers are thought of as viewers Browser as a compiler/interpreter of scripts

44 44 Browsers driven by product differentiation What is a browser?

45 “How Browsers Work” (in-class files) Seven major browser components: Browsers: 45

46 Browser components: Browsers 46 Rendering engine: interprets HTML, CSS draws text, images, etc. Defines the frame buffer’s values Scripting engine: interprets JavaScript DOM: Document Object Model

47 Web programming: must consider many interpretations; models executes/renders in unknown environment Browsers 47

48 Rendering/layout engine: render: draw or generate (yapmak) interprets HTML, CSS; color pixels Sends colors to frame buffer Browsers: 48

49 Separation of concerns: general engineering design principle 1 concern = 1 separation every thing has a place, every place has a thing ‘modular programming’ encapsulation code reuse Browsers 49

50 Separation of concerns: structure (.html) presentation (.css) logic (.js) data Browsers 50

51 Major web scripting efforts: Browsers: 51 HTML xhtml xml HTML5 JavaScript JScript ActionScript ECMAScript CSS CSS3

52 SE 372: Web Page Design: HTML5 Week 1: Course Introduction Copyright © Steven W. Johnson January 1, 2015

53 Isaac Newton ( ) “The Opticks” (1704): color not property of element color based in light waves Computer color: 53 File:GodfreyKneller-IsaacNewton-1689.jpg

54 Computer color: 54 White Light Colors (The spectrum) Prisms

55 Color made by emitted or reflected light: emitted: additive (RGB) ‘physics color’ reflected: subtractive (CMY) ‘natural color’ Computer color: 55 Absorbed by leaf

56 Reflected light: CMY Computer color: 56

57 Emitted light: RGB Computer color: 57

58 Pigment mixing: RYB Computer color: 58

59 Hue, Saturation, Brightness/Lightness Graphic arts/painters way to describe color Good color match system With or without alpha channel hue: a specific color from red to blue saturation: purity of the color (gray) lightness: moving from white to black HSL color model 59

60 HSL/B: Hue, saturation, lightness/brightness HSL color model: 60

61 Given a hue (slider), pick a saturation, brightness HSL color model: 61

62 Non-chromatic system: grayscale aka: ‘desaturated’ color Grayscale/achromatic colors: R = G = B = 255 R = G = B = 128 R = G = B =

63 L*a*b color: Lab color model: 63 RGB CMYK Lab

64 L*a*b color: Lab color model: 64 CCD filter pattern “Bayer Pattern” Lab Color model sRGB CMY

65 Translucence: the ability to ‘see through’ transparent:şeffaf translucent:yari şeffaf opaque:opak Defined as ‘opacity’ or ‘alpha’ Computer color: 65

66 Methods to describe color: CSS3 color primer: 66

67 Hexadecimal color has 3 (or 4) color channels: red FA (250) green 93 (147) blue CF (207) alpha.4 (40% opaque) CSS3 color primer: 67.classSelector { color: #FA93CF; color: rgba(250, 147, 207,.4); } 0255

68 New in CSS3: alpha channel, HSL RGB and Hex: use red, green, blue HSL: ‘artist’s colors: red, yellow, blue Keywords/X11: defined color names (be careful) CSS3 color primer: 68.classSelector { color: #FFCCCC; color: rgb(255, 204, 204); color: rgba(255, 204, 204,.5); color: red; color: hsl(128, 204, 102) color: hsla(128, 204, 102,.5); }

69 147 color names, 17 of which are standard Standard colors: Aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow ‘Standard colors’ may not be what you expect CSS3 color primer: 69 ‘green’ # #00FF00 ‘red’ #FF0000

70 #0F0#F00 ‘Minify’ colors: reduce hex to 3 characters Issue: reduce bandwidth Can you see the difference?? CSS3 color primer: 70 ‘green’ # ‘red’ #FF0000 ‘green’ # ‘green’ #080

71 General rule: use hexadecimal; all in caps Alpha: described in RGBA/HSLA set as opacity in style sheet CSS3 color primer: 71.classSelector { color: rgba(255, 204, 204,.5); }.classSelector { color: #FEE; opacity:.5; }

72 ‘colors’ folder: colors.html CSS3 color primer: 72

73 HTML primer 73 The Internet: a collection of web servers hosting content Web server: software that responds to HTTP requests Web servers: Apache IIS Java

74 HTML primer 74 Apache and IIS:

75 Server technologyApache web server Database DB Interface Stunnel/TLS HTML primer Web server packages come with these tools: 75

76 HTML primer 76 Web page is a program, written in a script ‘script’: uncompiled source code in a text document typically up to a few thousand lines of code browser serves as interpreter

77 Lab: text 77 Use Dreamweaver CS 6 in this course Dreamweaver: Adobe Systems (since 2005) commercial-grade web development tool supports all major technologies

78 Lab: text 78 Open Dreamweaver; turn on colors for elements Turn on line numbering, syntax coloring

79 Lab: text 79 Design window is NOT a browser; simulator Define two browsers for use: Activated by F12 and “CTRL”+F12 Recommendation: F12: Google Chrome “CTRL”+F12: IE (10+) or Firefox

80 Create a new page (File – New) Save the page as ‘index.html’ to desktop Lab: text 80

81 HTML files must be saved before use Reason: files connect to other files If page not located, links will be wrong unsaved = unlocated Save in Dreamweaver like save in any program Lab: text 81 Untitled-1.html index.html

82 .htm,.html, or.xhtml as the file extension? Short answer: don’t use.xhtml.htm or.html: doesn’t matter; be consistent HTML is a recommendation and an extension.htm is an extension only XHTML is a recommendation and a disassociated extension. NEVER use.xhtml Lab: text 82

83 83 Answer is found in ISO 9660 CDFS or Compact Disc File System File and directory naming restrictions: Level 1: ‘8.3’ (before Win 95) Level 2: Extended names, Win 95.html is ‘UNIX’ form while.htm is ‘Microsoft’ Consistency is important Lab: text

84 Filenames: universal: follow ISO 9660 Level 1 (8.3 rules) Main rules: use lower case only no spaces or symbols (letters, numbers only) Lab: text 84

85 Create new file (File – New...) Choose ‘HTML5’ from ‘DocType’ Lab: text 85

86 Web pages commonly made in web editors Dreamweaver is WYSIWYG editor Lab: text 86 Code Only Code Editor Only Unsaved work

87 Create text in a or paragraph tag (“Enter”) Text entered in code window not in element Lab: text 87

88 Lab: text 88 HTML document has 3 main elements: type of markup language information about page page’s content Basic web page This is text More text

89 Lab: text 89 Terms: tagindividual parts of an element elementthe whole thing attributesadded to the tag; name/value pair classrepeated use identifier idsingle use identifier Quotes not required on attributes Good idea for backwards compatibility Print me

90 Lab: text 90 Tags generally remain open until closed* ‘open tag’ (start) ‘close tag’ (end) Empty/void elements:,,, a ‘self-closing’ tag ( />) is gone Goal: limit attributes to id, class only Print me

91 DOCTYPE defines: how ASCII is interpreted the markup language being used which elements are valid Lab: text 91

92 Charset: glyphs (kabartma) allowed on page Possible choices (among many): iso English/Latin iso Turkish utf-8characters in European languages Lab: text 92 Text Lab by Steve

93 with and without language attribute Similar ideas: charset determines alphabet used language: dictionary intention: help with spelling/translation Lab: text Text Lab by Steve 93

94 Why a language? accessibility search engine optimization translation quite frankly, we don’t know yet Lab: text 94 Text Lab by Steve

95 95 Other meta tags: Insert – HTML _ Head Tags Lab: text Text Lab by Steve * { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/3385904/12/slides/slide_94.jpg", "name": "95 Other meta tags: Insert – HTML _ Head Tags Lab: text Text Lab by Steve *

96 Work in the design window!! is a block tag: no elements can go beside* added margin above and below (like Word) Made with “Enter” key element make by “Shift”+“Enter” Lab: text 96 Here is some text One Two Here is some text One Two

97 Type “Denizli” (Enter), “Pamukkale” (Enter) Select ‘Denizli’ and change Format to ‘h1’ Select ‘Pamukkale’ and change to ‘h2’ Lab: text 97 Denizli Pamukkale Denizli Pamukkale

98 through are ‘heading’ tags Block tags (like ), but are for larger text Original use: paper titles, section titles Today: defines structural use; change appearance with styles. Lab: text 98 Denizli Pamukkale Denizli Pamukkale

99 Lists: ordered unordered Lists hold list items ; used in Nav Bars Best to type list, select, change to list Lists are just like MS Word Lab: text 99

100 Unordered list: of equal value/importance Make an unordered list: Enter: Bread, Cheese, Flour, Eggs, Milk Hit ‘Enter’ after each list item Select the list (Properties bar) change to ‘unordered’ (bullet) list Lab: text 100

101 Add to list by clicking in the list and typing Lab: text 101 Bread Cheese Flour Eggs Milk

102 Ordered list: ranking/order important Make an ordered list: click on the page NOT in list enter: Wake up, Go to school, Come home hit ‘Enter’ after each list item select the list (properties bar) change to ‘ordered’ (numbered) list Lab: text 102

103 Lab: text 103 Wake up Go to school Come home Add to list by clicking in the list and typing

104 HTML has five generic families*: sans-serif serif monotype cursive fantasy Any font can be used, must be local Lab: text 104 font-family: primary font, secondary font, family;

105 Validating your HTML5: ‘validator.nu’ Lab: text 105

106 Validating your HTML5: ‘validator.nu’ Lab: text 106

107 Design window is not a browser Open ‘index.html’ in browser: F12 “CTRL”+12 double-click on ‘index’ open browser and drag-drop open browser and do a File - Open Lab: text 107

108 Break 108

109 Term coined by Ethan Marcotte (2010) site development paradigm site scales to hardware Responsive Web Design 109

110 Three principles of RWD: fluid-grid design scaling images conditional style rules Our engineering, fluid and scalable Responsive Web Design 110

111 Associated ideas: mobile first design progressive enhancement Responsive Web Design 111

112 Images a big part of your web page: impact on reader space in web site bandwidth to deliver Big challenge for x-device viewing Images and HTML 112

113 .html file rendered before images added Store images in separate folder; titled ‘images’ Three main file types:.jpg.gif.png Balance features/size with requirements Lab: images 113

114 Images added by Netscape; part of HTML ‘1’ tag is empty (no closing tag) Images can live side-by-side with other things Image moves to next available space Need to define a width/height (bounding box) For validation: must include ‘alt’ Lab: images 114

115 Image and HTML file must be saved locally Add image with Insert – Image – Browse Lab: images 115

116 Lab: images 116 Image size tells browser where bounding box is Page elements can be drawn, waiting for image

117 Images are block-inline hybrid (melez): block: has width and height consumes all unused space in the row inline: no width and height controls no additional space Lab: images 117

118 Lab: images 118 Uncontrolled HTML: image lays out within text line (part of text) line-height set by tallest element in line

119 Be careful about placement In this case, is child to parent Anything controlling impacts on Lab: images 119 “Pix”

120 Open ‘imagelab’ folder. Create ‘images’ folder Move 3 images into ‘images’ Open ‘index.html’ in ‘imagelab’ folder Insert one image after first block of text Steps: insert the image add ‘Alt’ text, manually add title text Lab: images 120

121 Insert one image after second paragraph Steps: insert the image add ‘alt’ text Insert one image inside the 3 rd paragraph Lab: images 121 Map of Denizli

122 These images are defined by pixel size RWD: define images by percentage of parent Set width to a percentage, height to ‘auto’ Lab: images 122 “Pix”

123 Open ‘index.html’ in browser: F12 “CTRL”+12 double-click on ‘index’ open browser and drag-drop open browser and do a File – Open Resize browser to see image resize Lab: images 123

124 Validating your HTML5: ‘validator.nu’ Lab: images 124

125 Images must have ‘alt’ to be valid Lab: images 125

126 Validating your HTML5: ‘validator.nu’ Lab: images 126

127 Different types of links: external to site (absolute or URL) internal to site (relative, a pathway) anchor Link appearance by default: blue (link) purple (visited) Lab: links 127

128 Links in HTML: Lab: links 128 Link Text Link Text //clickable telephone Link Text //clickable Skype Call me on Skype

129 Absolute addressing (URL): entire domain name/pathway used for any link not in site folder used when crossing from web to SSL Lab: links 129

130 Relative addressing: path describes ‘how to get there from here’ uses Unix conventions (similar to Microsoft):.. means go ‘up’ one level in directory tree / means open a folder \ is gibberish; a folder in an OS pathway Lab: links 130../pages/mypage.html mypage.html /pictures/1967/hippy.jpg

131 Lab: links 131 index.html three.html two.html one.html One Two Three two.html three.html Home one.html three.html Home one.html two.html Home

132 Create folder ‘links’ Create: ‘index.html’, ‘one.html’, ‘two.html’ and ‘three.html’ Generate proper HTML and tags Create ‘styles.css’ Link all pages to ‘styles.css’ Lab: links 132

133 Lab: links 133 index.html three.html two.html one.html One Two Three two.html three.html Home one.html three.html Home one.html two.html Home

134 Lab: links 134 Done! Save and test HTML5 check: CSS check:

135 1. To be considered ‘present’ for class: A.Within the first 10 minutes B.Within the first 30 minutes C.Within the first hour D.Who cares?? Quiz: 135

136 2. Your final grade is based on: A.Quizzes B.Labs C.Vocabularies D.Assignments E.Midterm F.Final Quiz: 136

137 3. A disruptive technology: A.Replaces ‘old’ ways with ‘new’ ways B.Changes the way we live life C.Cause industries to adapt/modernize or die D.Move profits toward innovators E.Move profits away from copyright holders Quiz: 137

138 4. The Internet has caused/allowed: A.A separating of media and communications B.A merging of media and communications C.Communications to be faster and more widespread D.Communications to be more expensive Quiz: 138

139 5. A user agent: A.An application/device that requests/uses HTTP traffic B.Looks for illegal content on the Internet C.Is a client application that handles server communications D.Manages user applications Quiz: 139

140 6. The main components of a browser for this course are: A.Image engine B.Script engine C.Rendering engine D.Browser engine Quiz: 140

141 7. The main components of a browser for this course are: A.Image engine B.Script engine C.Rendering engine D.Browser engine Quiz: 141

142 8. Separation of concerns: A.Is unique to computer science B.Should be avoided C.Achieved through encapsulation D.Makes for DRY coding Quiz: 142

143 9. HTML content is separated by: A.Images B.Text C.Structure D.Media E.Presentation F.Browser type G.Logic H.Data Quiz: 143

144 10. HTML/CSS uses these color models: A.Lab B.RGB C.HSL D.CMY E.Hexadecimal F.RYB G.Color names Quiz: 144

145 11. ‘Chroma’ is: A.A color where red, green, and blue are the same B.A color where red, green, and blue are different C.The amount of transparency D.How much gray is in the color Quiz: 145

146 12. ‘Saturation’ is: A.A color where red, green, and blue are the same B.A color where red, green, and blue are different C.The amount of transparency D.How much gray is in the color Quiz: 146

147 13. ‘Alpha’ is: A.A color where red, green, and blue are the same B.A color where red, green, and blue are different C.The amount of transparency D.How much gray is in the color Quiz: 147

148 14. ‘Opacity’ is: A.A color where red, green, and blue are the same B.A color where red, green, and blue are different C.The amount of transparency D.How much gray is in the color Quiz: 148

149 15. #FF8080 minified is: A.#F88 B.#F00 C.#F80 D.#F08 E.This color can’t be minified Quiz: 149

150 16. The main web servers are: A.Panda B.IIS C.Android D.Apache E.Apple Leopard F.Tomcat Quiz: 150

151 17. HTML is: A.Source code B.A compiled programming language C.A scripted programming language D.Not a programming language but a web page Quiz: 151

152 18..htm and.html: A.Are different extensions B.Are the same extension C.Are ‘interoperable’ extensions D.Do same thing, but can’t be interchanged Quiz: 152

153 19. The three main elements in an HTML document are: A. B. C. D. E. F. Quiz: 153

154 20. A tag looks like this: A. B. Text C. Text D. Text E. F. Quiz: 154

155 21. An element looks like this: A. B. Text C. Text D. Text E. F. Quiz: 155

156 22. An attribute: A. B. Text C. Text D. Text E. F. Quiz: 156

157 23. A class: A.Is not allowed in HTML B.Is a type of element C.Is a repeated identifier D.Uniquely identifies one element Quiz: 157

158 24. An id: A.Is not allowed in HTML B.Is a type of element C.Is a repeated identifier D.Uniquely identifies one element Quiz: 158

159 25. A block tag/element: A.Has visible borders B.Holds up layers, images, text C.Has width and height, holds content D.Uses what remains of the row Quiz: 159

160 26. An inline element: A.Has visible borders B.Holds up layers, images, text C.Has no width and height D.Does not control space outside of itself Quiz: 160

161 Assignment: first page 161 Create a page with 200 words (Lorem Ipsum okay) Insert at least 2 images (of your choice) Add 3 links (can go anywhere) Show me validation page

162 SE 372: Web Page Design: HTML5 Week 1: Course Introduction Copyright © Steven W. Johnson January 1, 2015


Download ppt "SE 372: Web Page Design: HTML5 Week 1: Course Introduction Copyright © Steven W. Johnson January 1, 2015."

Similar presentations


Ads by Google