CSS. LBSC 690: Jordan Boyd-Graber. October 8, Adapted. from Dwight VanTuyl s slides. LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

Size: px

Start display at page:

Download "CSS. LBSC 690: Jordan Boyd-Graber. October 8, Adapted. from Dwight VanTuyl s slides. LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57"

Phoebe Sutton
5 years ago
Views:

1 CSS LBSC 690: Jordan Boyd-Graber October 8, 2012 from Dwight VanTuyl s slides Adapted LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

2 Goals What browsers are out there (so you know what to test on) Main point: CSS gives you tools to change what your pages look like Phishing: using these powers for evil Hands on experimentation LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

3 Outline 1 Assignment 1 2 Ecosystem of Browsers 3 Phishing 4 CSS LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

4 Question 1ab What s she doing? Each square corresponds to a power of two - they add up to the decimal number of the board. LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

5 Question 1ab What s she doing? Each square corresponds to a power of two - they add up to the decimal number of the board. LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

6 Question 1ab What s she doing? Each square corresponds to a power of two - they add up to the decimal number of the board = = LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

7 Question 1c The di erence of 3077 and 2053 is 1024, which is This corresponds to the second row, second column. LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

8 Question 2a 1TB 1 LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

9 Question 2a 1TB MB 1GB LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

10 Question 2a 1TB MB 1GB 210 GB 1TB LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

11 Question 2a 1TB MB 1GB 210 GB 1TB = 220 MB LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

12 Question 2a 1TB MB 1GB 210 GB 1TB = 220 MB =1, 048, 576MB (1) LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

13 Question 2a 1TB MB 1GB 210 GB 1TB = 220 MB =1, 048, 576MB (1) Hard drive was: 1TB Serial ATA (7200RPM) w/databurst Cache, 9ms read time Fine to use 2 10 or 10 3 (but make sure you say which you re using). If you use 10 3 or make other approximations, don t keep around too many significant digits I ! I 123,119,817! Make sure units cancel LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

14 Question 2b MB 1 LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

15 Question 2b MB 1 1min 1MB LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

16 Question 2b MB 1 1min 1day 1MB 60 24min = day LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

17 Question 2b MB 1 1min 1day 1MB 60 24min = day = 694day (2) 1440 Three minutes per song was a red herring Don t forget units Conversion factors LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

18 Question 2c 1000GB 1 LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

19 Question 2c 1000GB 1 1DVD 4.7GB LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

20 Question 2c 1000GB 1 1DVD apple 213DVD (3) 4.7GB There is no such thing as a half of a DVD (well, there is, but it s useless). LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

21 Question 3b How many bytes per record? 125 bytes 125B LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

22 Question 3b How many bytes per record? 125 bytes 125B GB 10 9 B LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

23 Question 3b How many bytes per record? 125 bytes 125B GB 10 9 B = GB LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

24 Question 3b How many bytes per record? 125 bytes 125B GB 10 9 B = GB = 37.5GB (4) 109 Write big numbers in scientific notation (million = 10 6 ) Careful with math LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

25 Question 3c-d 37.5GB 3.8% (5) 1000GB LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

26 Question 3c-d 37.5GB 3.8% (5) 1000GB 37.5GB 16GB 230% (6) LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

27 Question 3c-d 37.5GB 3.8% (5) 1000GB 37.5GB 16GB 230% (6) 4GB DDR3 SDRAM - 3 DIMMs, 50ns read time LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

28 Question 3c-d 37.5GB 3.8% (5) 1000GB 37.5GB 16GB 230% (6) 4GB DDR3 SDRAM - 3 DIMMs, 50ns read time RAM amounts are usually given as cumulative (no penalty if you assume otherwise) Make sure answers are reasonable (if it doesn t fit in RAM, it won t fit in HD) LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

29 Question 3e-f Hard drive RAM reads s = s 1 read (7) s 1day = 31.25day s (8) reads s read = s = 15s (9) Bonus points for looking up access time for 7200 RPM HD SI prefixes

30 Question 3e-f Hard drive RAM reads s = s 1 read (7) s 1day = 31.25day s (8) reads s read = s = 15s (9) Bonus points for looking up access time for 7200 RPM HD SI prefixes LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

31 Question 4 200GB 10min LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

32 Question 4 200GB 10min 103 MB GB LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

33 Question 4 200GB 10min 103 MB GB 8bit B LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

34 Question 4 200GB 10min 103 MB GB 8bit B 1min 60s 2600megabit s (10) This was to stress concept that moving data anywhere gives you a transfer rate What about latency? Mail and bike are often faster than the Internet Home network speeds (100s of Mbs) are much faster than Internet (10s of Mbs if you re lucky) I Sneakernet I Never underestimate the bandwidth of a station wagon full of tapes hurtling down the highway. Tanenbaum, Andrew S. Remember, bits 6= byte LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

35 Metadiscussion Reasonableness Units When converting, only multiply by things that are equal to 1 Scientific notation LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

36 Outline 1 Assignment 1 2 Ecosystem of Browsers 3 Phishing 4 CSS LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

37 Browser Engines Controls how you get from HTML file to what s displayed on screen Hardest part to get right The interface (buttons, bookmarks, etc.) is more flexible (parallel with HTML / CSS) Because the underlying engine is the same, you don t need to test every browser Images from webdesignerdepot LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

38 Engines LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

39 Engines Gecko - Apple Trident - Microsoft Webkit - Mozilla (formerly Netscape) Presto - Opera Lynx - GNU (text based) LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

40 Market Share LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

41 Trident LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

42 Gecko LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

43 Webkit LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

44 Presto LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

45 Getting it right Develop in one browser When you have a draft, try it in other browsers Also try in di erent versions (particularly for IE) Test for compliance with CSS / XHTML LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

46 Outline 1 Assignment 1 2 Ecosystem of Browsers 3 Phishing 4 CSS LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

47 What is phising 1 Definition: fishing for personal information using a phony website 2 Multiple vectors of attack 3 Multiple endgames LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

48 LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

49 Phishing Vectors 1 Send you an claiming to be from a site, give you a link 2 Asks you explicitly for information claiming to be from a site 3 Impersonate a site on the internet I Poisoned DNS (e.g. at an internet cafe) - man in the middle I Have a confederate site (e.g. web commerce site) LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

50 Phishing Endgames 1 Install software 2 Watch your interactions with a trusted site (man in the middle) 3 Get your login 1 Throw up phony page 2 When you get it wrong, redirect to legit site 3 Assuming you sometimes make mistakes, you might never notice LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

51 Outline 1 Assignment 1 2 Ecosystem of Browsers 3 Phishing 4 CSS LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

52 What is CSS? Cascading: Multiple styles can overlap Style: CSS controls the presentation Sheet: CSS files are typically separate from the HTML file LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

53 Why CSS? Richer appearance Reduce workload Consistent style across pages Reduce download size LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

54 Why not use CSS? Very old browsers don t support it (rare, and there are many other, bigger problems with older browsers) Makes it harder to create o ine versions of pages (but most browsers o er to save all associated files) For layout, tables are arguably better Makes phishing easier LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

55 Example Page Download from bit.ly/pknrko We ll make this pretty through this class If you look at the code, it s very simple LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

56 Making HTML play nice with CSS Link from a each page to (one or more) stylesheet(s) Order only matters if there are conflicts Should be in the head <link href= style1. css rel= stylesheet type= text/css media= screen /> LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

57 Div div tag creates a box around content You can give names to elements We ll see what this can do in a second Creates logical division of page <div id= footer > Page by <a href= mailto : jb </div> LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

58 Span span itself does nothing It allows a group of HTML to be modified by CSS However, it s meaningless semantically, so use it sparingly <span id= button > <ul> <li><a href= a. html >Alpacas</ <li><a href= b. html >Bears</a> <li><a href= c. html >Cats</a> <li><a href= d. html >Dogs</a> <li><a href= e. html >Elephants <li><a href= f. html > Ferrets</ </ul> </span> LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

59 Class class identifies what kind of an element it is It allows a a single tag to be modified by CSS Unlike id it can (and should) be used more than once <p class= question > Why d i d t <p class= answer > To get to t <p class= question > What kind <p class= answer >A monkey</a> LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

60 HTML / CSS Recap div blocks of many HTML tags id for unique, single HTML tags class for repeated, single HTML tags LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

61 What does CSS look like? Selector h1 Element Properties { } color: red; Style Block background: yellow; Style Values The Selector selects elements on the HTML page. The associated Style Block applies its Style Values to the selected Elements Properties LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

62 Selector Select elements to apply a declared style. Selector types: I Element Selectors: selects all elements of a specific HTML type (body, h1, p, etc.) I Class Selectors: selects all elements that belong to a given class. F CSS: selectorsthatstartwithaperiod F HTML: settheclass attribute to the selector I ID Selectors: selects a single element thats been given a unique id. F CSS: selectorsthatbeginwith# F HTML: settheid attribute to the selector I Pseudo Selectors: combines a selector with a user activated state :hover, :link, :visited LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

63 Color and decoration / Links should normally not be underlined unless hovered over / a { color : #ff6666 ; text decoration : none; } a:hover { text decoration : underline ; } LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

64 Background and paragraphs / By d e f a u l t, have black sans s e r i f t e x t on a gray background. / body { background color : #e1ddd9; font size : 12px; font family : Verdana, Arial, Sans Serif ; color : #000000; margin : 0; } / Paragraphs should have a l i t t l e more spacing and indentation / p { margin : 0px ; padding : 5px 20px 5px 20px ; text indent : 10px; text align : justify ; } LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

65 Fonts Changing font face I Generic family: Serif, Sans-Serif, Monospace I Font family: Times New Roman, Arial, or Courier I Can specify multiple - it will keep trying until it finds one Changing font size I 1em is equal to m in current font size (default is 16 pixels) I Can also use pt, but discouraged I Can also use percent LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

66 Text text-indent: indents first line of a paragraph according to size text-align: right; or left; or center; or justify; text-decoration: none; or underline; text-transform: Capitalize; Line-height: added vertical space to each line of text according to size LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

67 Background background-image: url(../location/of/image.jpg) background-repeat: tile image in background background-position: vertical (top, center, bottom, or size) horizontal (left, center, right, or size) background-attachment: (scroll or fixed) LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

68 Boxing, margins, and transformation / Create a footer that gives contrast / #footer { font size : 13px; font weight : bold ; text transform : uppercase ; text align : right ; background color : #90897a; padding : 5px 15px ; margin : 0px ; } LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

69 Margin vs. padding LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

Arranging content on the page / Create two columns on either side of the main body of the page. They will not occupy the full height ( unless the content is very skimpy ).

70 Arranging content on the page / Create two columns on either side of the main body of the page. They will not occupy the full height ( unless the content is very skimpy ). Thus if they have background, they should be the same as body. / #left, #right { / background color : red ; / position : absolute ; margin : 0px ; padding top : 40px ; color : #564b47; width : 100px ; } #left { left : } #right { right : } 0px; 0px; LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

Arranging content on the page / Set the content to have decent padding and margins and a white background. The bottom padding is important for the footer not encroaching on the left navigation.

71 Arranging content on the page / Set the content to have decent padding and margins and a white background. The bottom padding is important for the footer not encroaching on the left navigation. / #content, #p i c t u r e { margin : 0px 115px 0px 110px ; border left : 2px solid #564b47; border right : 2px solid #564b47; background color : #ffffff ; } #content { padding bottom : 35px ; } #picture { padding bottom : 0px ; } LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

72 Aligning text h1, h2, h3, h4, h5 { padding top : 5px ; padding left : 15px; padding right : 5px; padding bottom : 1px ; text transform : uppercase ; color : #564b47; background color : transparent ; } h3, h4, h5 { text align : center ; } #header { text transform : uppercase ; text align : right ; color : #564b47; background color : #90897a; } LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

73 Class properties p.question { font weight : bold ; } p.answer { font size:90%; } LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

Fancy display / Changes the font and sets the width / #button { width : 190px ; padding : 0; font family : Trebuchet MS, Lucida Grande, Verdana, Lucida, Geneva, Helvetica, Arial, sans serif ; } /

74 Fancy display / Changes the font and sets the width / #button { width : 190px ; padding : 0; font family : Trebuchet MS, Lucida Grande, Verdana, Lucida, Geneva, Helvetica, Arial, sans serif ; } / Makes the l i n k s appear as a block and gives them a border, removes underlining of l i n k s. / #button l i a { display : block ; padding : 5px 5px 5px 0.5em; border left : 10px solid #ff0000; border right : 10px solid #ff4444 ; background color : #cc9999; color : #ffffff ; text decoration : none; } LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

Changing lists / Changes the color of the link on a hover / #button l i a : h o v e r { border left :10px solid #ff1111; border right : 10px solid #ff5555 ; background color : #ccaaaa; color :

75 Changing lists / Changes the color of the link on a hover / #button l i a : h o v e r { border left :10px solid #ff1111; border right : 10px solid #ff5555 ; background color : #ccaaaa; color : #ffffff ; } / Removes padding from l e f t hand side and hides bullets / #button u l { list style : none; padding : 0em; } / Adds a border to the buttom of the buttons / #button l i { border bottom : 1px solid #90bade ; } LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

76 Display controls what the element looks like block has line break before and after table can make it appear like a table none can make it disappear LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

77 Recap The Browser ecosystem Style for evil Style for good LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

78 This Week s Discussion Readable CSS Take a look at this snippet of HTML from the NY Times (below). What s going on? Why? Take a look at the style sheet: Do you have any questions? What do you think of it? <link rel= stylesheet type= text/css href= styles. css > <! [if IE]> < style type= text/css url ( ie. css ); </style> <![ endif] > <! [if IE 6]> < style type= text/css url ( ie6. css ); </style> <![ endif] > LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

79 This Week s Discussion LBSC 690: Jordan Boyd-Graber () CSS October 8, / 57

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100 Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!