![Local Storage
• Web storage
window.localStorage[‘value’] = ‘Save this!’;
• Session storage
sessionStorage.useLater(‘fullname’, ‘Garth
Colasurdo’);
alert(“Hello ” + sessionStorage.fullname);
• Database storage
var database = openDatabase(“Database Name”,
“Database Version”);
database.executeSql(“SELECT * FROM test”,
function(result1) {
…
});
http://dev.w3.org/html5/webstorage/](https://image.slidesharecdn.com/itandwebdesigning-161005045253/85/IT-and-web-designing-24-320.jpg)
IT and web designing
- 1. Internet Technology & Web Designing 6th KNOWLEDGE ENHANCEMENT PROGRAM & Chandiga rh Sarwan Singh NIELIT Chandigarh 1
- 2. Agenda • Importance of Design • Objective of course “Internet technology & web design”, Syllabus • HTML Timeline • Birth of WWW • HTML5 in web and mobile application • HTML5 extensions over HTML– Rich Internet Applications, local storage, forms, etc • Birth of dynamic web sarwan@nielit.gov.in 2
- 3. उमर भर ग़ालिब यही भूि करत़ा रह़ा धूि चेहरे पे थी और आईऩा सॉफ करत़ा रह़ा | 3sarwan@nielit.gov.in
- 4. Objective of course “ conceptual and technological developments in the field of Internet and web designing” 4sarwan@nielit.gov.in
- 5. Syllabus • Introduction to Internet, TCP/IP Protocol • Internet – Connectivity, Services, Functions, current trends • Electronic Mail • Web Publishing and Browsing • HTML Programming Basics • Interactivity Tools • Internet Security Management Concepts, Information Privacy and Copyright Issues 5sarwan@nielit.gov.in
- 8. Birth of WWW • Tim Berners-Lee invented the World Wide Web in 1989, at CERN, the European Particle Physics Laboratory. • He founded and Directs the World Wide Consortium (W3C) https://www.w3.org/People/Berners-Lee/ 8sarwan@nielit.gov.in
- 9. Year Version 1989 Tim Berners-Lee invented www 1991 Tim Berners-Lee invented HTML 1993 Dave Raggett drafted HTML+ 1995 HTML Working Group defined HTML 2.0 1997 W3C Recommendation: HTML 3.2 1999 W3C Recommendation: HTML 4.01 2000 W3C Recommendation: XHTML 1.0 2008 WHATWG ( Web Hypertext Application Technology Working Group ) HTML5 First Public Draft 2012 WHATWG HTML5 Living Standard 2014 W3C Recommendation: HTML5 2016 W3C Candidate Recommendation: HTML 5.1 9sarwan@nielit.gov.in
- 10. Birth of WWW By October of 1990, Tim had written the three fundamental technologies that remain the foundation of today’s Web • HTML: Hyper Text Markup Language. The markup (formatting) language for the Web. • URI: Uniform Resource Identifier. A kind of “address” that is unique and used to identify to each resource on the Web. It is also commonly called a URL. • HTTP: Hypertext Transfer Protocol. Allows for the retrieval of linked resources from across the Web. 10sarwan@nielit.gov.in
- 15. HTML5 ≈ HTML 5 + CSS 3 + JavaScript HTML5 is a suite of tools for: –Markup (HTML 5) –Presentation (CSS 3) –Interaction (DOM, Ajax, APIs) Brought on by the evolving use of the web http://slides.html5rocks.com/ 15sarwan@nielit.gov.in
- 16. Rich Internet Applications (RIA) • Space between the internet and the desktop • Apps that look good and behave well • Adobe Air/Flash, Java, Silverlight, Gears • Availability – Anywhere a web browser is available – As a desktop widget or application – Part of a mobile application store 16sarwan@nielit.gov.in
- 18. 5 HTML Enhancements • HTML • Forms • CSS • Offline applications • Local storage 18sarwan@nielit.gov.in
- 19. HTML Extended • Document Flow: div, section, article, nav, aside, header, footer • Audio, Video and Embed • Canvas: paths, gradients, image manipulation, events • Microdata for semantics and enhanced search engine results (Google Rich Snippets) 19sarwan@nielit.gov.in
- 20. HTML5 Header Navigation Aside Footer Section Article Footer Article Footer Article Footer Figure Image, Video, Quote, Table, etc… Legend 20sarwan@nielit.gov.in
- 21. Canvas <canvas id=“canvas” width=“150” height=“150”> </canvas> function draw() { var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10,10,55,50); ctx.fillStyle = “rgb(0,0,200)”; ctx.fillRect (30,30,55,50); } } 21sarwan@nielit.gov.in
- 22. Form Enhancements in HTML5 • Placeholder text • Specific text input: email, URL, number, search • Slider • Date picker • User Agent validation 22sarwan@nielit.gov.in
- 23. Local Storage • Beyond cookies- local storage – Manipulated by JavaScript – Persistent – 5MB storage per “origin” – Secure (no communication out of the browser) • Session storage – Lasts as long as the browser is open – Each page and tab is a new session • Browser based SQLite or IndexedDB
- 24. Local Storage • Web storage window.localStorage[‘value’] = ‘Save this!’; • Session storage sessionStorage.useLater(‘fullname’, ‘Garth Colasurdo’); alert(“Hello ” + sessionStorage.fullname); • Database storage var database = openDatabase(“Database Name”, “Database Version”); database.executeSql(“SELECT * FROM test”, function(result1) { … }); http://dev.w3.org/html5/webstorage/
- 25. Birth of Dynamic Web Server side, Client side scripting languages sarwan@nielit.gov.in 25 Source : http://royal.pingdom.com/
- 26. Demos • Chrome Experiments http://www.chromeexperiments.com • Apple HTML5 Showcase http://www.apple.com/html5/ • Canvas Demos http://www.canvasdemos.com • RIA Demos with browser support listed http://html5demos.com • Our Solar System http://neography.com/experiment/circles/solarsystem/ • Pure CSS3 Animated AT-AT Walker from Star Wars http://blog.optimum7.com/anthony/website-design/pure-css3- animated-at-at-walker-from-star-wars-2.html
- 27. Agenda • Importance of Design • Objective of course “Internet technology & web design”, Syllabus • HTML Timeline • Birth of WWW • HTML5 in web and mobile application • HTML5 extensions over HTML– Rich Internet Applications, local storage, forms, etc • Birth of dynamic web sarwan@nielit.gov.in 27
Editor's Notes
- #17: Coined in 2002 (Macromedia)