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 to us) WWW conference (submissions due in Oct, conference in April/May the following year) CS102: Monsoon 2015 2
Reminder: HTML & CSS Intro https://www.codecademy.com/en/tracks/htmlcss (Complete the whole course) CS102: Monsoon 2015 3
Recap CS102: Monsoon 2015 4
HTML and HTTP 5 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 CS102: Monsoon 2015 6
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> CS102: Monsoon 2015 7
Inspecting HTML and HTTP Go to http://ashoka.edu.in Document Object Model CS102: Monsoon 2015 8
Cookies: fi rst access CS102: Monsoon 2015 9
Cookies: second access CS102: Monsoon 2015 10
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 CS102: Monsoon 2015 11
Caching: max-age CS102: Monsoon 2015 12
Caching: max-age After modi fi cation (< 60 seconds) CS102: Monsoon 2015 13
Caching: max-age After modi fi cation (> 60 seconds) CS102: Monsoon 2015 14
Caching: fi rst access CS102: Monsoon 2015 15
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 CS102: Monsoon 2015 16
Compression (needs server setup) CS102: Monsoon 2015 17
Compression CS102: Monsoon 2015 18
Ajax request CS102: Monsoon 2015 19
Ajax response CS102: Monsoon 2015 20
HTTP performance tips CS102: Monsoon 2015 21 http://stevesouders.com/examples/rules.php
HTTP performance tips 1. Make fewer HTTP requests 8. External CSS and JS 2. Use a CDN 9. Reduce DNS lookups 3. Add an expires header 10. Minify Javascript (max-age) 11. Avoid redirects 4. Gzip components 12. Remove duplicate scripts 5 & 6. Put stylesheets at the 13. Con fi gure Etags top, scripts at the bottom. 14. Make AJAX cacheable 7. Avoid CSS expressions CS102: Monsoon 2015 22
CSS 23 CS102: Monsoon 2015
Cascading style sheets HTML is for content, CSS is for display Declarative syntax “Aspect-oriented” design Styles cascade in speci fi ed order Neat separation of View from Model CS102: Monsoon 2015 24
CS102: Monsoon 2015 25 http://csszengarden.com/
Basic CSS bindings Format: selector { prop1: val1; prop1: val1 } Selectors: tags, classes, ids, … div { color: green; } <div>…</div> .my_class { color: green; } <div class=“my_class”>…</div> #my_class { color: green; } <div id=“my_id”>…</div> … CS102: Monsoon 2015 26
Basic CSS properties Box properties (padding, margin, border) Color and background Font and text (letter spacing, line-height, …) Visual layout (display, fl oat, dimensions, z-index, …) Pagination, cursor, etc. (Lots more in CSS 3) CS102: Monsoon 2015 27
CSS box model CS102: Monsoon 2015 28
Playing with CSS CS102: Monsoon 2015 29
Recommend
More recommend
