1 Course updates Project user understanding phase: writeup due - - PowerPoint PPT Presentation

▶
1 course updates
SMART_READER_LITE
LIVE PREVIEW

1 Course updates Project user understanding phase: writeup due - - PowerPoint PPT Presentation

Sep 01, 2022 326 likes •633 views

CS 102 Human-Computer Interaction Lecture 12: HTML, HTTP, CSS and Javascript CS102: Monsoon 2015 1 Course updates Project user understanding phase: writeup due Monday Oct 12 Home page for each student due Wednesday Oct 14 (email zip fi le

slide-1
SLIDE 1

CS102: Monsoon 2015

CS 102 Human-Computer Interaction Lecture 12: HTML, HTTP, CSS and Javascript

1

slide-2
SLIDE 2

CS102: Monsoon 2015

Course updates

Project user understanding phase: writeup due Monday Oct 12 Home page for each student due Wednesday Oct 14 (email zip file to us) WWW conference (submissions due in Oct, conference in April/May the following year)

2

slide-3
SLIDE 3

CS102: Monsoon 2015

Reminder: HTML & CSS Intro

https://www.codecademy.com/en/tracks/htmlcss (Complete the whole course)

3

slide-4
SLIDE 4

CS102: Monsoon 2015

Recap

4

slide-5
SLIDE 5

CS102: Monsoon 2015

HTML and HTTP

5

slide-6
SLIDE 6

CS102: Monsoon 2015

Evolution of HTML

Very interesting language features Error tolerant Declarative Non-context-free grammar Dangling links are ok Original idea: Users would be able to edit pages End user customizable

6

slide-7
SLIDE 7

CS102: Monsoon 2015

Common HTML tags

<html>, <body> <table>, <tr>, <td> <div>, <span>, <p> <img> <a href=“…”> and <a name=“…”> <form>, <input>, <select> <ul>/<ol>, <li> <h1>…<h6> <iframe>

7

slide-8
SLIDE 8

CS102: Monsoon 2015

Inspecting HTML and HTTP

Go to http://ashoka.edu.in

8

Document Object Model

slide-9
SLIDE 9

CS102: Monsoon 2015

Cookies: first access

9

slide-10
SLIDE 10

CS102: Monsoon 2015

Cookies: second access

10

slide-11
SLIDE 11

CS102: Monsoon 2015

HTTP caching

Browser need not fetch previously fetched resources (html, images, CSS, JS) if they have not changed Server can control browser’s caching behavior

11

slide-12
SLIDE 12

CS102: Monsoon 2015

Caching: max-age

12

slide-13
SLIDE 13

CS102: Monsoon 2015

Caching: max-age

After modification (< 60 seconds)

13

slide-14
SLIDE 14

CS102: Monsoon 2015

Caching: max-age

After modification (> 60 seconds)

14

slide-15
SLIDE 15

CS102: Monsoon 2015

Caching: first access

15

slide-16
SLIDE 16

CS102: Monsoon 2015

Caching: second access

Browser need not fetch previously fetched resources (html, images, CSS, JS) if they have not changed Server can control browser’s caching behavior

16

slide-17
SLIDE 17

CS102: Monsoon 2015

Compression

(needs server setup)

17

slide-18
SLIDE 18

CS102: Monsoon 2015

Compression

18

slide-19
SLIDE 19

CS102: Monsoon 2015

Ajax request

19

slide-20
SLIDE 20

CS102: Monsoon 2015

Ajax response

20

slide-21
SLIDE 21

CS102: Monsoon 2015

HTTP performance tips

21 http://stevesouders.com/examples/rules.php

slide-22
SLIDE 22

CS102: Monsoon 2015

HTTP performance tips

  • 1. Make fewer HTTP requests
  • 2. Use a CDN
  • 3. Add an expires header

(max-age)

  • 4. Gzip components

5 & 6. Put stylesheets at the top, scripts at the bottom.

  • 7. Avoid CSS expressions

22

  • 8. External CSS and JS
  • 9. Reduce DNS lookups
  • 10. Minify Javascript
  • 11. Avoid redirects
  • 12. Remove duplicate scripts
  • 13. Configure Etags
  • 14. Make AJAX cacheable
slide-23
SLIDE 23

CS102: Monsoon 2015

CSS

23

slide-24
SLIDE 24

CS102: Monsoon 2015

Cascading style sheets

HTML is for content, CSS is for display Declarative syntax “Aspect-oriented” design Styles cascade in specified order Neat separation of View from Model

24

slide-25
SLIDE 25

CS102: Monsoon 2015 25 http://csszengarden.com/

slide-26
SLIDE 26

CS102: Monsoon 2015

Basic CSS bindings

Format: selector { prop1: val1; prop1: val1 } Selectors: tags, classes, ids, … div { color: green; } .my_class { color: green; } #my_class { color: green; } …

26

<div>…</div> <div class=“my_class”>…</div> <div id=“my_id”>…</div>

slide-27
SLIDE 27

CS102: Monsoon 2015

Basic CSS properties

Box properties (padding, margin, border) Color and background Font and text (letter spacing, line-height, …) Visual layout (display, float, dimensions, z-index, …) Pagination, cursor, etc. (Lots more in CSS 3)

27

slide-28
SLIDE 28

CS102: Monsoon 2015

CSS box model

28

slide-29
SLIDE 29

CS102: Monsoon 2015

Playing with CSS

29