The document discusses the history and features of HTML and HTML5. It provides an overview of HTML, including common tags and document structure. It then covers the evolution of HTML over time, from early versions to modern standards like HTML5. The document also describes some of the new features introduced in HTML5, such as enhanced multimedia support, forms, and the canvas element for drawing graphics.
Semantic Web and Web 3.0 - Web Technologies (1019888BNR)Beat Signer
The document discusses the vision of the Semantic Web and its key components:
- The Semantic Web aims to make data on the web machine-readable so machines can process and understand it.
- Key technologies include RDF, RDFS, and OWL which add structure and semantics to data through metadata.
- SPARQL is the query language used to extract and manipulate semantic data.
- Semantic frameworks like Jena and tools like Protégé help develop and work with semantic data.
Web Architectures - Web Technologies (1019888BNR)Beat Signer
The document discusses the basic client-server web architecture. It describes how when a user enters a URL in their browser, the browser uses DNS to find the IP address of the web server, then establishes a TCP connection and sends an HTTP request. The web server receives the request, fetches the requested resource, and sends an HTTP response which is then displayed in the browser.
Web Application Frameworks - Web Technologies (1019888BNR)Beat Signer
A web application framework is software designed to support development of dynamic websites and web applications. It aims to reduce overhead of common web development tasks like database access, templating, and session management. Many frameworks follow the Model-View-Controller pattern to increase modularity. Popular frameworks include Struts, Spring, Ruby on Rails, Django, and ASP.NET MVC, which provide libraries and tools to develop web applications in Java, PHP, Python, JavaScript, and .NET languages respectively.
Web Search - Lecture 10 - Web Information Systems (4011474FNR)Beat Signer
This document discusses search engine result pages (SERPs) and algorithms used by web search engines. It provides an overview of the history of search engines and technologies like PageRank, which ranks webpages based on the number and quality of inbound links. The document also describes the major components of a web search engine, including the web crawler that indexes pages and the index used to return results for user queries.
The document introduces the Semantic Web and how it allows for the integration and merging of disparate datasets. It provides an example of merging two bookstore datasets that have similar information but are structured differently. By exporting the datasets as RDF triples, mapping identical resources, and adding a few statements to link equivalent terms, the datasets can be merged. This allows for new queries to be answered by combining information from both original datasets. The Semantic Web provides technologies to automate this kind of data integration and enable more powerful queries across multiple sources of data.
The document discusses the agenda for a presentation on the Semantic Web. The agenda includes an overview of the World Wide Web, an introduction to the Semantic Web, tools and applications for the Semantic Web, Linking Open Data, the Social Semantic Web, and Open Government. Each section provides details on the topic covered.
Silverlight is a Microsoft web development framework for building rich interactive applications and media experiences. It allows developers to use .NET skills to build desktop-like applications that run in a web browser. Silverlight applications are built using XAML markup and code-behind files. Data binding enables applications to retrieve and display data. Cross-domain policies allow accessing web services across different domains. Common patterns used with Silverlight include MVVM and MEF.
These slides were originally a tutorial presented for the SIG preceding the May 2009 meeting of the PRISM Forum.
They attempt to give a survey of the technologies, tools, and state of the world with respect to the Semantic Web as of the first half of 2009.
Semantic Web and Web 3.0 - Web Technologies (1019888BNR)Beat Signer
The document discusses the vision of the Semantic Web and its key components:
- The Semantic Web aims to make data on the web machine-readable so machines can process and understand it.
- Key technologies include RDF, RDFS, and OWL which add structure and semantics to data through metadata.
- SPARQL is the query language used to extract and manipulate semantic data.
- Semantic frameworks like Jena and tools like Protégé help develop and work with semantic data.
Web Architectures - Web Technologies (1019888BNR)Beat Signer
The document discusses the basic client-server web architecture. It describes how when a user enters a URL in their browser, the browser uses DNS to find the IP address of the web server, then establishes a TCP connection and sends an HTTP request. The web server receives the request, fetches the requested resource, and sends an HTTP response which is then displayed in the browser.
Web Application Frameworks - Web Technologies (1019888BNR)Beat Signer
A web application framework is software designed to support development of dynamic websites and web applications. It aims to reduce overhead of common web development tasks like database access, templating, and session management. Many frameworks follow the Model-View-Controller pattern to increase modularity. Popular frameworks include Struts, Spring, Ruby on Rails, Django, and ASP.NET MVC, which provide libraries and tools to develop web applications in Java, PHP, Python, JavaScript, and .NET languages respectively.
Web Search - Lecture 10 - Web Information Systems (4011474FNR)Beat Signer
This document discusses search engine result pages (SERPs) and algorithms used by web search engines. It provides an overview of the history of search engines and technologies like PageRank, which ranks webpages based on the number and quality of inbound links. The document also describes the major components of a web search engine, including the web crawler that indexes pages and the index used to return results for user queries.
The document introduces the Semantic Web and how it allows for the integration and merging of disparate datasets. It provides an example of merging two bookstore datasets that have similar information but are structured differently. By exporting the datasets as RDF triples, mapping identical resources, and adding a few statements to link equivalent terms, the datasets can be merged. This allows for new queries to be answered by combining information from both original datasets. The Semantic Web provides technologies to automate this kind of data integration and enable more powerful queries across multiple sources of data.
The document discusses the agenda for a presentation on the Semantic Web. The agenda includes an overview of the World Wide Web, an introduction to the Semantic Web, tools and applications for the Semantic Web, Linking Open Data, the Social Semantic Web, and Open Government. Each section provides details on the topic covered.
Silverlight is a Microsoft web development framework for building rich interactive applications and media experiences. It allows developers to use .NET skills to build desktop-like applications that run in a web browser. Silverlight applications are built using XAML markup and code-behind files. Data binding enables applications to retrieve and display data. Cross-domain policies allow accessing web services across different domains. Common patterns used with Silverlight include MVVM and MEF.
These slides were originally a tutorial presented for the SIG preceding the May 2009 meeting of the PRISM Forum.
They attempt to give a survey of the technologies, tools, and state of the world with respect to the Semantic Web as of the first half of 2009.
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...Beat Signer
The document discusses the history and features of HTML5. It describes how HTML5 aims to evolve the HTML standard to enable richer web applications while maintaining compatibility. Key features discussed include new semantic elements, forms improvements, video/audio playback, 2D/3D canvas drawing, and local storage APIs to store data on the client-side. The document provides examples and browser support information for various HTML5 features.
2013년 11월, HTML5 융합기술 포럼 창립 기념 세미나 발표자료
전자출판표준인 EPUB3는 HTML5, CSS3, Java Script를 근간으로 한 일종의 프로파일링 표준이다. 왜 EPUB3를 개발하게 되었는지에 대한 배경과 HTML5의 킬러 애플리케이션으로서 전자출판 분야에 대한 역할과 기대를 설명한 자료이다.
HTML5 의 표준 권고안이 채택되면서 HTML5는 엄청난 속도로 웹 전반에 걸쳐 보급되고 있습니다. HTML5 와 기존의 HTML4 / XHTML 1.1 과의 가장 큰 차잇점은 웹을 바라보는 관점입니다. 웹브라우저를 저작 플랫폼이 아닌 실행 환경으로 바라보는 HTML5의 독특한 관점은 webcomponent 에 잘 드러나 있습니다. 이 발표에서는 webcomponent 의 개념 및 역사를 훑고, webcomponent 오픈소스 구현체들인 webcomponents.js 및 구글의 Polymer, 모질라의 x-tag 과 함께 페이스북의 React 와의 비교 및 브라우저 대응에 대한 내용을 다룹니다.
HTML5 and the Open Web Platform - Web Technologies (1019888BNR)Beat Signer
The document discusses the history and features of HTML and HTML5. It provides an overview of HTML, including common tags and document structure. It then covers the evolution of HTML standards over time, from early versions to HTML5. Key features of HTML5 are described, such as new semantic elements, forms, video/audio playback, and the canvas element for drawing with JavaScript.
The document discusses the history and development of HTML5. It notes that HTML 4.0 and 4.01 were released in 1997 and 1999, but the W3C decided not to further evolve HTML in 1998. This led to the creation of XHTML 1.0 and 1.1 from 2000-2001. In 2004 the WHATWG was founded to continue developing web standards, releasing specifications for HTML5. In 2006 the W3C began working with the WHATWG on HTML5. The specification is currently developed by both groups. HTML5 adds new elements, forms functionality, multimedia features like video without plugins, and APIs to enable richer web applications.
Rails Girls - Introduction to HTML & CSSTimo Herttua
This document provides an agenda and overview for an introduction to HTML and CSS workshop by Rails Girls Helsinki. It discusses why HTML and CSS are crucial skills, both for understanding web technologies and getting a job as a developer. It explains how HTML, CSS, and JavaScript power everything seen on the internet and in web and mobile apps. The document outlines the division of labor between frontend and backend technologies. It introduces the Frontend Bentobox model for understanding different components like HTML, CSS, JavaScript, JSON, etc. It previews exercises for attendees to complete, including a live coding demo and extra credit options.
Material for this slide includes:
1. Introduction of bootstrap framework
2. Reasons for using bootstrap framework
3. Bootstrap framework installation and directory
4. How to use bootstrap framework
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
This slideshow provides an introduction to HTML5. The target audience should have an understanding of web development, javascript, and previous standards of HTML. This tutorial contains a brief background on the language and an overview of the most popular features. Features covered include native audio/video support, geolocation, canvas, drawing API, web forms 2.0, drag and drop, and more. Also covered is backwards compatibility and section 508 compliance. Extras include polyfills, modernizr, and a brief introduction to CSS3. Enjoy!
An introduction to HTML5 and its API's for the extream beginners those who already know what is HTML. Presentation also includes few features the CSS3.
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization.
HTML5 is the latest version of HTML that aims to improve the language with new multimedia and web application features while keeping it easily readable by humans and consistently understood by computers. It is still a work in progress but supported by major browsers. Key features include new elements for media playback, local storage APIs, and form controls. HTML5 also introduces new APIs for graphics, offline apps, and other features. It allows for cross-platform programming and powers mobile apps on platforms like Tizen, Firefox OS, and Windows 8.
- IE9 provides faster performance for HTML5 features like video and audio as well as CSS3 capabilities. It supports standards like HTML5, CSS3, SVG and DOM more completely than previous versions of IE.
- Microsoft is actively involved in the relevant standards bodies to help drive the evolution of web standards. Interoperable markup and a standards-aligned approach are priorities for IE9.
- IE9 features hardware-accelerated rendering for graphics-intensive HTML5 capabilities, improving performance significantly over IE8 for sites using these new features.
The document discusses HTML5, which is more of a movement than a single technology. It provides an overview of what HTML5 is, including that it is a new specification that builds upon HTML, CSS3, and JavaScript. Some of the major new features that HTML5 introduces are richer semantics, a simpler doctype, multimedia elements like audio and video, the canvas element, and new form controls. It also notes that HTML5 is still being developed and implemented across browsers.
HTML5 introduces several new features including new semantic elements, support for embedded video and audio, canvas element for 2D/3D graphics, offline web applications, and drag and drop. It also removes some older HTML elements. HTML5 is still a work in progress but is supported by all major browsers. It aims to make web pages more compatible with new technologies and reduce the need for browser plug-ins.
HTML5 defines the latest revision of HTML that adds new semantic elements and graphical capabilities. It is still being developed by the W3C, but browsers already support some features like canvas, video, and geolocation. HTML5 provides features like native audio and video playback, offline web applications, and an improved drawing surface, along with other capabilities, without requiring browser plugins. However, there are still ongoing discussions around issues like video formats and concerns about privacy controls as HTML5 enables new ways of tracking users.
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
HTML5 is the next generation web development standard that improves upon HTML4 and XHTML. It focuses on features rather than syntax, and includes new elements like <article> and <section>, native audio/video support, drawing APIs, geolocation, drag and drop, web forms 2.0, and more. HTML5 aims to improve multimedia capabilities while keeping code readable by humans and machines. It is supported by all major browsers, though support for specific features may vary, and polyfills can help with backwards compatibility.
HTML5 Deciphered discusses HTML5 specifications and their development process. It introduces several new HTML5 elements such as <header>, <footer>, <nav>, <aside>, and <section> that provide semantic structure. It also covers new input types, native audio and video, geolocation, and the canvas element for drawing graphics. The document explains how these new features work and their current browser support.
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
Front-end development involves building the elements of a website that users interact with directly. This document provides an overview of HTML, CSS, semantic markup, responsive design, and tools for front-end development. It defines HTML as the standard markup language for web pages and CSS as the style sheet language used to describe document formatting. Semantic HTML uses meaningful markup to reinforce content semantics rather than just presentation. Responsive design approaches like separate files or media queries allow content to adapt to different devices. Development tools like Chrome DevTools, WebStorm IDE, and Grunt help automate tasks.
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...Beat Signer
The document discusses the history and features of HTML5. It describes how HTML5 aims to evolve the HTML standard to enable richer web applications while maintaining compatibility. Key features discussed include new semantic elements, forms improvements, video/audio playback, 2D/3D canvas drawing, and local storage APIs to store data on the client-side. The document provides examples and browser support information for various HTML5 features.
2013년 11월, HTML5 융합기술 포럼 창립 기념 세미나 발표자료
전자출판표준인 EPUB3는 HTML5, CSS3, Java Script를 근간으로 한 일종의 프로파일링 표준이다. 왜 EPUB3를 개발하게 되었는지에 대한 배경과 HTML5의 킬러 애플리케이션으로서 전자출판 분야에 대한 역할과 기대를 설명한 자료이다.
HTML5 의 표준 권고안이 채택되면서 HTML5는 엄청난 속도로 웹 전반에 걸쳐 보급되고 있습니다. HTML5 와 기존의 HTML4 / XHTML 1.1 과의 가장 큰 차잇점은 웹을 바라보는 관점입니다. 웹브라우저를 저작 플랫폼이 아닌 실행 환경으로 바라보는 HTML5의 독특한 관점은 webcomponent 에 잘 드러나 있습니다. 이 발표에서는 webcomponent 의 개념 및 역사를 훑고, webcomponent 오픈소스 구현체들인 webcomponents.js 및 구글의 Polymer, 모질라의 x-tag 과 함께 페이스북의 React 와의 비교 및 브라우저 대응에 대한 내용을 다룹니다.
HTML5 and the Open Web Platform - Web Technologies (1019888BNR)Beat Signer
The document discusses the history and features of HTML and HTML5. It provides an overview of HTML, including common tags and document structure. It then covers the evolution of HTML standards over time, from early versions to HTML5. Key features of HTML5 are described, such as new semantic elements, forms, video/audio playback, and the canvas element for drawing with JavaScript.
The document discusses the history and development of HTML5. It notes that HTML 4.0 and 4.01 were released in 1997 and 1999, but the W3C decided not to further evolve HTML in 1998. This led to the creation of XHTML 1.0 and 1.1 from 2000-2001. In 2004 the WHATWG was founded to continue developing web standards, releasing specifications for HTML5. In 2006 the W3C began working with the WHATWG on HTML5. The specification is currently developed by both groups. HTML5 adds new elements, forms functionality, multimedia features like video without plugins, and APIs to enable richer web applications.
Rails Girls - Introduction to HTML & CSSTimo Herttua
This document provides an agenda and overview for an introduction to HTML and CSS workshop by Rails Girls Helsinki. It discusses why HTML and CSS are crucial skills, both for understanding web technologies and getting a job as a developer. It explains how HTML, CSS, and JavaScript power everything seen on the internet and in web and mobile apps. The document outlines the division of labor between frontend and backend technologies. It introduces the Frontend Bentobox model for understanding different components like HTML, CSS, JavaScript, JSON, etc. It previews exercises for attendees to complete, including a live coding demo and extra credit options.
Material for this slide includes:
1. Introduction of bootstrap framework
2. Reasons for using bootstrap framework
3. Bootstrap framework installation and directory
4. How to use bootstrap framework
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
This slideshow provides an introduction to HTML5. The target audience should have an understanding of web development, javascript, and previous standards of HTML. This tutorial contains a brief background on the language and an overview of the most popular features. Features covered include native audio/video support, geolocation, canvas, drawing API, web forms 2.0, drag and drop, and more. Also covered is backwards compatibility and section 508 compliance. Extras include polyfills, modernizr, and a brief introduction to CSS3. Enjoy!
An introduction to HTML5 and its API's for the extream beginners those who already know what is HTML. Presentation also includes few features the CSS3.
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization.
HTML5 is the latest version of HTML that aims to improve the language with new multimedia and web application features while keeping it easily readable by humans and consistently understood by computers. It is still a work in progress but supported by major browsers. Key features include new elements for media playback, local storage APIs, and form controls. HTML5 also introduces new APIs for graphics, offline apps, and other features. It allows for cross-platform programming and powers mobile apps on platforms like Tizen, Firefox OS, and Windows 8.
- IE9 provides faster performance for HTML5 features like video and audio as well as CSS3 capabilities. It supports standards like HTML5, CSS3, SVG and DOM more completely than previous versions of IE.
- Microsoft is actively involved in the relevant standards bodies to help drive the evolution of web standards. Interoperable markup and a standards-aligned approach are priorities for IE9.
- IE9 features hardware-accelerated rendering for graphics-intensive HTML5 capabilities, improving performance significantly over IE8 for sites using these new features.
The document discusses HTML5, which is more of a movement than a single technology. It provides an overview of what HTML5 is, including that it is a new specification that builds upon HTML, CSS3, and JavaScript. Some of the major new features that HTML5 introduces are richer semantics, a simpler doctype, multimedia elements like audio and video, the canvas element, and new form controls. It also notes that HTML5 is still being developed and implemented across browsers.
HTML5 introduces several new features including new semantic elements, support for embedded video and audio, canvas element for 2D/3D graphics, offline web applications, and drag and drop. It also removes some older HTML elements. HTML5 is still a work in progress but is supported by all major browsers. It aims to make web pages more compatible with new technologies and reduce the need for browser plug-ins.
HTML5 defines the latest revision of HTML that adds new semantic elements and graphical capabilities. It is still being developed by the W3C, but browsers already support some features like canvas, video, and geolocation. HTML5 provides features like native audio and video playback, offline web applications, and an improved drawing surface, along with other capabilities, without requiring browser plugins. However, there are still ongoing discussions around issues like video formats and concerns about privacy controls as HTML5 enables new ways of tracking users.
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
HTML5 is the next generation web development standard that improves upon HTML4 and XHTML. It focuses on features rather than syntax, and includes new elements like <article> and <section>, native audio/video support, drawing APIs, geolocation, drag and drop, web forms 2.0, and more. HTML5 aims to improve multimedia capabilities while keeping code readable by humans and machines. It is supported by all major browsers, though support for specific features may vary, and polyfills can help with backwards compatibility.
HTML5 Deciphered discusses HTML5 specifications and their development process. It introduces several new HTML5 elements such as <header>, <footer>, <nav>, <aside>, and <section> that provide semantic structure. It also covers new input types, native audio and video, geolocation, and the canvas element for drawing graphics. The document explains how these new features work and their current browser support.
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
Front-end development involves building the elements of a website that users interact with directly. This document provides an overview of HTML, CSS, semantic markup, responsive design, and tools for front-end development. It defines HTML as the standard markup language for web pages and CSS as the style sheet language used to describe document formatting. Semantic HTML uses meaningful markup to reinforce content semantics rather than just presentation. Responsive design approaches like separate files or media queries allow content to adapt to different devices. Development tools like Chrome DevTools, WebStorm IDE, and Grunt help automate tasks.
This document provides an introduction to building modern websites using HTML5 and CSS3. It discusses several new features in HTML5, including semantic elements, the <canvas> element for 2D drawing, <audio> and <video> elements for multimedia, local storage for offline applications, and other new elements and APIs. The document recommends installing the latest versions of Firefox, Safari, Opera, and Chrome for full browser support. It will demonstrate these new features by developing a sample website using HTML5 and CSS3.
This document provides an introduction to building modern websites using HTML5 and CSS3. It discusses several new features in HTML5, including semantic elements, the <canvas> element for 2D drawing, <audio> and <video> elements for multimedia, local storage for offline applications, and other new elements and APIs. The tutorial assumes an intermediate level of experience with HTML, CSS, and JavaScript and provides code examples to demonstrate how to implement these new features.
This document discusses client-side frameworks and responsive design. It introduces responsive CSS frameworks like Bootstrap and Materialize which help create responsive web pages that adapt to different devices. It also discusses client-side JavaScript frameworks like AngularJS, React, and Ember which help manage dynamic web application logic and user interfaces. These frameworks help address issues like separating concerns, data binding, and component-based development. The document provides overviews of popular frameworks and compares advantages.
HTML5 is becoming the preferred technology for automotive HMI systems due to its rich set of features that allow for the creation of robust applications. Key features include local storage options like Web Storage and IndexedDB for offline use, multimedia support through <audio> and <video> tags, device access APIs, and rendering controls like <canvas> that enable precise graphics. The emergence of HTML5 has also influenced development practices, with more use of patterns like MVC to separate application logic from presentation.
Similaire à HTML5 and the Open Web Platform - Web Technologies (1019888BNR) (20)
This document outlines the course organization, goals, schedule, and content for a Human-Computer Interaction course. It provides contact information for the instructor, Prof. Beat Signer, and TAs. The course will cover HCI principles, the interaction design process, requirements analysis, prototyping, evaluation methods, and use cases. Students will complete an assignment involving the design of parts of a new university website and take a final exam. The course will involve lectures, exercises, and group work.
Indoor Positioning Using the OpenHPS FrameworkBeat Signer
The OpenHPS framework is an open source hybrid positioning system that allows for flexibility in technologies, algorithms, use cases, and output. It features a process network design that connects different positioning techniques and data sources. The framework includes core components, abstractions, data storage options, and communication abilities. It was demonstrated through an indoor positioning use case and validated for accuracy and effectiveness. OpenHPS aims to support developers and researchers in indoor positioning applications.
Personalised Learning Environments Based on Knowledge Graphs and the Zone of ...Beat Signer
Presentation given at CSEDU 2022, Virtual Event.
The learning of new knowledge and skills often requires previous knowledge, which can lead to some frustration if a teacher does not know a learner's exact knowledge and skills and therefore confronts them with exercises that are too difficult to solve. We present a solution to address this issue when teaching techniques and skills in the domain of table tennis, based on the concrete needs of trainers that we have investigated in a survey. We present a conceptual model for the representation of knowledge graphs as well as the level at which individual players already master parts of this knowledge graph. Our fine-grained model enables the automatic suggestion of optimal exercises in a player's so-called zone of proximal development, and our domain-specific application allows table tennis trainers to schedule their training sessions and exercises based on this rich information. In an initial evaluation of the resulting solution for personalised learning environments, we received positive and promising feedback from trainers. We are currently investigating how our approach and conceptual model can be generalised to some more traditional educational settings and how the personalised learning environment might be further improved based on the expressive concepts of the presented model.
Research paper: https://beatsigner.com/publications/personalised-learning-environments-based-on-knowledge-graphs-and-the-zone-of-proximal-development.pdf
Cross-Media Technologies and Applications - Future Directions for Personal In...Beat Signer
Webinar given at icity Lab Talks - The Digital Value Chain
In this talk, I will first provide an overview of the lab’s research on a general data-driven approach for cross-media information system and architectures based on the resource-selector-link (RSL) hypermedia metamodel. We will then have a look at several cross-media applications for personal information management and next-generation presentation solutions (MindXpres). Finally, I will outline the lab’s most recent research on tangible interaction and dynamic data physicalisation.
Bridging the Gap: Managing and Interacting with Information Across Media Boun...Beat Signer
The document discusses cross-media information spaces and architectures (CISA). It describes Prof. Beat Signer's research group which focuses on managing and interacting with information across media boundaries using a data-centric approach based on a hypermedia metamodel. The group develops technologies for cross-media linking, flexible document representation, and cross-media user interfaces. Several projects are mentioned, including systems for personal information management, content-driven presentations, interactive paper, and dynamic data physicalization.
Codeschool in a Box: A Low-Barrier Approach to Packaging Programming CurriculaBeat Signer
Presentation given at CSEDU 2023, Prague, Czech Republic.
The tech industry is a fast-growing field, with many companies facing issues in finding skilled workers to fill their open vacancies. At the same time, many people have limited access to the quality education necessary to enter this job market. To address this issue, various small and often volunteer-run non-profit organisations have emerged to up-skill capable learners. However, these organisations face tight constraints and many challenges while trying to design and deliver high-quality education to their learners. In this position paper, we discuss some of these challenges and present a preliminary version of a curriculum packager addressing some of these issues. Our proposed solution, inspired by first-hand experience in these organisations as well as computing education research (CER), is based on a combination of micromaterials, study lenses and a companion mobile application. While our solution is designed for the specific context of small organisations providing vocational ICT training, it can also be applied to the broader domain of learning environments facing similar constraints.
Research paper: https://beatsigner.com/publications/codeschool-in-a-box-a-low-barrier-approach-to-packaging-programming-curricula.pdf
Towards a Framework for Dynamic Data PhysicalisationBeat Signer
This document proposes a framework for dynamically physicalizing data. It describes the Tangible Hologram (TangHo) platform, which uses a 6 degree of freedom robotic arm prototype built from Lego Mindstorms. The arm can interact bidirectionally with a user through holograms displayed via HoloLens. Challenges include inverse kinematics since the final system will be body mounted. The document concludes that the conceptual framework and TangHo prototype allow for data-driven physicalization of large multi-dimensional datasets through dynamic and interactive designs.
A review of the growth of the Israel Genealogy Research Association Database Collection for the last 12 months. Our collection is now passed the 3 million mark and still growing. See which archives have contributed the most. See the different types of records we have, and which years have had records added. You can also see what we have for the future.
Assessment and Planning in Educational technology.pptxKavitha Krishnan
In an education system, it is understood that assessment is only for the students, but on the other hand, the Assessment of teachers is also an important aspect of the education system that ensures teachers are providing high-quality instruction to students. The assessment process can be used to provide feedback and support for professional development, to inform decisions about teacher retention or promotion, or to evaluate teacher effectiveness for accountability purposes.
हिंदी वर्णमाला पीपीटी, hindi alphabet PPT presentation, hindi varnamala PPT, Hindi Varnamala pdf, हिंदी स्वर, हिंदी व्यंजन, sikhiye hindi varnmala, dr. mulla adam ali, hindi language and literature, hindi alphabet with drawing, hindi alphabet pdf, hindi varnamala for childrens, hindi language, hindi varnamala practice for kids, https://www.drmullaadamali.com
This presentation was provided by Steph Pollock of The American Psychological Association’s Journals Program, and Damita Snow, of The American Society of Civil Engineers (ASCE), for the initial session of NISO's 2024 Training Series "DEIA in the Scholarly Landscape." Session One: 'Setting Expectations: a DEIA Primer,' was held June 6, 2024.
How to Build a Module in Odoo 17 Using the Scaffold MethodCeline George
Odoo provides an option for creating a module by using a single line command. By using this command the user can make a whole structure of a module. It is very easy for a beginner to make a module. There is no need to make each file manually. This slide will show how to create a module using the scaffold method.
How to Add Chatter in the odoo 17 ERP ModuleCeline George
In Odoo, the chatter is like a chat tool that helps you work together on records. You can leave notes and track things, making it easier to talk with your team and partners. Inside chatter, all communication history, activity, and changes will be displayed.
The simplified electron and muon model, Oscillating Spacetime: The Foundation...RitikBhardwaj56
Discover the Simplified Electron and Muon Model: A New Wave-Based Approach to Understanding Particles delves into a groundbreaking theory that presents electrons and muons as rotating soliton waves within oscillating spacetime. Geared towards students, researchers, and science buffs, this book breaks down complex ideas into simple explanations. It covers topics such as electron waves, temporal dynamics, and the implications of this model on particle physics. With clear illustrations and easy-to-follow explanations, readers will gain a new outlook on the universe's fundamental nature.
Main Java[All of the Base Concepts}.docxadhitya5119
This is part 1 of my Java Learning Journey. This Contains Custom methods, classes, constructors, packages, multithreading , try- catch block, finally block and more.
A workshop hosted by the South African Journal of Science aimed at postgraduate students and early career researchers with little or no experience in writing and publishing journal articles.
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
How to Manage Your Lost Opportunities in Odoo 17 CRMCeline George
Odoo 17 CRM allows us to track why we lose sales opportunities with "Lost Reasons." This helps analyze our sales process and identify areas for improvement. Here's how to configure lost reasons in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
HTML5 and the Open Web Platform - Web Technologies (1019888BNR)
1. 2 December 2005
Web Technologies
HTML5 and the Open Web Platform
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
http://www.beatsigner.com
2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 14, 2016
Hypertext Markup Language (HTML)
HTML is an application of the Standard Generalized
Markup Language (SGML)
simple human-readable markup language with a number of
markup tags that can be manipulated by any text editor
Various markup tags to define the structure and
presentation of a HTML document (webpage)
root element (<html>), header (<head>), body (<body>) and
title (<title>)
headings (<h1>, ... <h6>) and paragraphs (<p>)
tables (<table>, <tr> and <td>) and lists (<ol>, <ul> and <li>)
images (<img>)
w3schools provides a detailed list of tags
http://www.w3schools.com/tags/
3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3October 14, 2016
Hypertext Markup Language (HTML) ...
Tags can be nested and attributes (key/value pairs) can
be added to a tag
HTML documents are transformed into a Document
Object Model (DOM) by the browser
tree of elements (and attributes) with textual content
HTML DOM defines objects and properties for HTML elements
- document node, element nodes, text nodes, attribute nodes
and comment nodes
standard to create, read, update and delete HTML elements
Hyperlinks to connect different HTML documents
only unidirectional embedded hyperlinks are supported
4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4October 14, 2016
HTML Example
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vrije Universiteit Brussel</title>
</head>
<body>
<h1>News</h1>
<p>Internationalisation was this years theme of the academic opening of
the <a href="http://www.vub.ac.be">Vrije Universiteit Brussel</a>.
</p>
<p>The Vrije Universiteit Brussel will organise the new International
Business Arbitration post-graduate course from the new academic year
onwards.<img src="course.jpg" width="120" height="100" alt="Course">
</p>
...
</body>
</html>
5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5October 14, 2016
HTML DOM Example
News
html
head body
document
title
Vrije Univer ...
h1 p p …
…
aInternationa ...
Vrije Uni ...
href
http:// ...
document node
element node
attribute node
text node
root node
6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6October 14, 2016
History of HTML
HTML 1.0 (1993)
HTML 2.0 (1995)
at that time the Netscape Navigator offered much more
functionality than the HTML standard
- "browser war" between Netscape and Internet Explorer
HTML 3.2 (1997)
first version that was developed exclusively by the Word Wide
Web Consortium (W3C)
introduced tables
introduced a lot of new elements for the visual appearance of a
document (that was not the original idea of HTML!)
- e.g. <font> element or color attribute
- most elements now deprecated and cascading style sheets should be used
7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7October 14, 2016
History of HTML ...
HTML 4.0 (1997) and HTML 4.01 (1999)
internationalisation (Unicode)
introduction of Cascading Style Sheets (CSS)
In 1998 the W3C decided to not further evolve HTML!
XHTML 1 (2000) and XHTML 1.1 (2001)
XML version of HTML (draconian error handling)
XHTML 2.0 (never finished, discontinued in 2009)
revolutionary changes breaking backwards compatibility
Web Hypertext Application Technology Working Group
(WHATWG) founded in 2004 (led by Ian Hickson)
Web Forms 2.0 and Web Applications 1.0 HTML5
8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8October 14, 2016
History of HTML ...
In 2006 the W3C decided to work on HTML again
based on WHATWG's Web Applications specification
HTML5 specification is currently developed
simultaneously by the WHATWG and the W3C
HTML Working Group
HTML – Living Standard, WHATWG
HTML5 – A Vocabulary and Associated APIs for HTML and
XHTML
HTML5 is a W3C Recommendation since October 2014
9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 14, 2016
Problems with HTML
Mix of content, structure and presentation
no separation of concerns
structure of content defines the presentation in the browser
"Forgiving" browsers weaken the standard
an HTML document with errors (e.g. missing tags etc.) will still be
rendered without any error messages
HTML documents can be checked against the standard
- http://validator.w3.org
most existing websites (>99%) contain errors
- exercise: can you find a webpage without any errors?
Lack of support for multiple presentations
10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10October 14, 2016
XHTML
XHTML is a reformulation of HTML to make
it an XML application (instead of SGML)
we accept that HTML is here to stay
improve HTML by using XML (e.g. nesting or closing of tags)
use benefits of XML with minimal effort
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vrije Universiteit Brussel</title>
</head>
<body>
...
</body>
</html>
11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11October 14, 2016
HTML5
... HTML5 does not belong to a company or a specific
browser. It has been forged by a community of people
interested in evolving the web and a consortium of
technological leaders that includes Google, Microsoft, Apple,
Mozilla, Facebook, IBM, HP, Adobe, and many others. The
community and consortium continue to collaborate on
universal browser standards to push web capabilities even
further. The next generation of web apps can run high-
performance graphics, work offline, store a large amount of
data on the client, perform calculations fast, and take
interactivity and collaboration to the next level. ...
Why HTML5 Rocks, http://www.html5rocks.com
12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12October 14, 2016
HTML5 Design Principles
Compatibility
evolve the language for easier authoring of web applications
Utility
solve real problems (pragmatic approach)
separation of content and presentation (CSS)
Interoperability
interoperable browser behaviour
identical error handling across browsers resulting in the same
DOM tree for broken HTML
Universal Access
features should preferably work across different platforms
(cross-platform), devices and media
design features should be accessible to users with disabilities
13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13October 14, 2016
HTML5 Design Principles ...
Simple is better
new doctype: <!DOCTYPE html>
HTML5 APIs
...
Avoid external plug-ins
plug-ins are often not nicely integrated with HTML documents
plug-ins can be disabled or blocked (e.g. Adobe Flash on iPad)
plug-ins may crash
...
14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 14, 2016
HTML5 and Open Web Platform APIs
W3C Recommendation
W3C Candidate Recommendation
Working Draft
W3C Working Group Note
Non-W3C Specification
HTML
Markup
Canvas
2D
Web
Messaging
Audio
Video
Web
Sockets
Drag
and
Drop
Web
Workers
Micro
data
Web SQL
Web
Storage
HTML+
RDFa
XmlHTTP
Request
File API
Media
Capure
Indexed
Database
Contacts
API
Screen
Orientation
Timing
Control
Touch
Events
Geo
Location
RDFa
Web Open
Font
Navigation
Timing
Selectors
L1
SVGMathML
3.0
CSS3
Battery
Status
API
Fullscreen
JavaScript
WebGL
Deprecated
based on https://en.wikipedia.org/wiki/HTML5#/
Simplifies implementation
of cross-platform applications
Standard way for accessing
specific functionality
No need for plug-in installation
15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15October 14, 2016
JavaScript/ECMAScript
Growing use of JavaScript frameworks and AJAX
JavaScript engine race
in 2006 Adobe donated their just-in-time (JIT) compilation engine
and ECMAScript virtual machine to the Mozilla project
healthy competition among browser vendors
- bring JavaScript performance closer to that of native desktop application code
www.codeeval.com http://www.whatbrowser.org
Most Popular Coding Languages of 2016
16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16October 14, 2016
Browser Performance
17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 14, 2016
Web Browsers (1990–2016)
WorldWideWeb
Internet Explorer
Trident Engine
Mozilla
Firefox
WebKit Engine
Safari
Gecko Engine
http://en.wikipedia.org/wiki/File:Timeline_of_web_browsers.svg
18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18October 14, 2016
HTML Markup
Some elements have been added
structural elements such as <article>, <section>, <header>,
<footer> or <nav>
media elements including <video>, <audio> or <embed>
a <canvas> drawing element
Other elements have been removed
<big>, <font>, <strike>, <u>, <center>, ...
New form functionality (originally Web Forms 2.0)
form elements such as <datalist> or <output>
input types such as date, color, email, tel, range, ...
native functionality for client-side validation (without scripting)
W3CRecommendation
19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19October 14, 2016
HTML Forms
20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20October 14, 2016
HTML Forms ...
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<form action="submit.html" method="post">
Name (required) <input type="text" name="name" required autofocus>
Title <input type="text" name="title">
Shoesize <input list="range" min="10" max="30" name="shoesize">
Email (required) <input type="email" name="mail" required>
Webpage <input type="url" name="webpage">
Date of Birth <input type="date" name="birthday">
<input type="hidden" name="id" value="S8798349">
<input type="submit" name="Submit">
</form>
</body>
</html>
21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21October 14, 2016
HTML Forms ...
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<form action="submit.html" method="get">
Course <input list="courses" name="course">
<datalist id="courses">
<option value="Web Information Systems">
<option value="Web Technologies">
<option value="Next Generation User Interfaces">
<option value="Advanced Topics in Information Systems">
<option value="Databases">
</datalist>
<input type="submit" name="Submit">
</form>
</body>
</html>
22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22October 14, 2016
HTML Forms ...
Filled in information is sent to the server as name/value
pairs in an HTTP GET or HTTP POST request
HTML5 forms simplify the client-side validation of input
fields
validation based on input type and other optional attributes
valid input for text input fields can be defined via the pattern
attribute (regular expression)
no longer necesarry to use JavaScript for client-side validation
23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23October 14, 2016
HTML Links
Only unidirectional embedded liks are supported
Linking to parts of another document
only possible if we can add id attributes
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<a href="http://www.vub.ac.be">VUB</a> <!– simple link -->
<a href="http://www.vub.ac.be" target="_blank" >VUB</a>
<a href="contact.html">Contact us</a> <!– link to same folder -->
<a href="mailto:john@xyz.org">Email John</a> <!– link to email -->
<a href="#introduction">Introduction</a> <!– link to parts of the same
page (identified via an id attribute with the corresponding name) -->
</body>
</html>
24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24October 14, 2016
Video
<video> element can be used to play videos
in HTML pages
element has methods, properties and events
no external plug-in (e.g. Adobe Flash) is required
e.g. in early 2015 YouTube switched from Flash to HTML5 video
as the default
Multiple video formats are supported
MP4, WebM and Ogg
<video width="640" height="480" controls="controls" autoplay="autoplay">
<source src="bullhead.mp4" type="video/mp4" />
<source src="bullhead.webm" type="video/webm" />
The video tag is not supported by your browser!
</video>
W3CRecommendation
25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25October 14, 2016
Video ...
Current limitations
no copy protection
limited access to web cams and microphones but this is going to
change in the near future (via the Media Captue API)
HTML5 Video vs. Adobe Flash
... Our future work with Flash on mobile devices will be focused on
enabling Flash developers to package native apps with Adobe AIR for all
the major app stores. We will no longer continue to develop Flash Player
in the browser to work with new mobile device configurations (chipset,
browser, OS version, etc.) following the upcoming release of Flash
Player 11.1 for Android and BlackBerry PlayBook. ...
Adobe Systems Incorporated, November 9, 2011
W3CRecommendation
26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26October 14, 2016
Audio
<audio> element can be used to play audio
in HTML pages
element has methods, properties and events
<audio controls="controls">
<source src="intro.mp3" type="audio/mpeg" />
<source src="intro.ogg" type="audio/ogg" />
The audio tag is not supported by your browser!
</audio>
W3CRecommendation
27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27October 14, 2016
Canvas 2D
<canvas> tag can be used in combination with
JavaScript to draw on a webpage (raster graphics)
define a canvas with an id and use it in the JavaScript code
draw lines, shapes (with optional gradient filling) etc. or add text
<canvas id="drawingArea" width="200" height="200">
The canvas tag is not supported by your browser!
</canvas>
<script type=“application/javascript">
var canvas = document.getElementById("drawingArea");
var context = canvas.getContext("2d");
context.fillStyle = "#0000FF";
context.fillRect(50,50,100,50);
context.moveTo(0,0);
context.lineTo(200,200);
context.stroke();
</script>
W3CRecommendation
28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28October 14, 2016
HTML5 Canvas and JavaScript Demo
http://www.youtube.com/watch?v=cnexWE5Rbx4
29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29October 14, 2016
Scalable Vector Graphics (SVG)
Vector graphics alternative to Canvas 2D
resolution independent
define graphics in XML format (embeddable in HTML)
good support for animations (declarative description)
full control over each element via the SVG DOM API
On the other hand, Canvas 2D offers better performance
W3CRecommendation
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="50" cy="50" r="100" fill="blue" />
</svg>
</body>
</html>
30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 14, 2016
Web Graphics Library (WebGL)
3D graphics API for JavaScript
getContext("3d") might be used in the future
currently getContext("webgl") or getContext("webgl2")
GPU accelerated
31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31October 14, 2016
ZygoteBody (WebGL) (Video)
32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32October 14, 2016
Offline Web Applications
Application cache is used for
offline browsing where users can use the web application while
they are offline
increased performance due to cache hits and reduced server load
Managed via a cache manifest (on every page)
W3CWorkingGroupNote
<!DOCTYPE html>
<html lang="en" manifest="myApp.appcache">...</html>
CACHE MANIFEST
CACHE:
index.html
default.js
NETWORK:
dynamic.js
FALLBACK:
time.js fallback-time.js
#version 3
33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 14, 2016
Web Storage API
localStorage and sessionStorage JavaScript
objects to store data (key/value) on the client
localStorage has no time limit whereas sessionStorage is
deleted when the browser window is closed
- localStorage with same-origin policy and sessionStorage per window
replace cookies for large amounts of data
- cookies are limited in size (maximal 4 KB) and are sent with each request
W3CRecommendation
<script>
if (localStorage.counter) {
localStorage.counter = Number(localStorage.counter) + 1;
}
else {
localStorage.counter = 1;
}
document.write("Total of " + localStorage.counter + " visits");
</script>
34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34October 14, 2016
Indexed Database API
Low-level indexed storage capabilities
object store
changes happen within transactions
same-origin policy (domain, protocol and port)
other libraries to be developed based on top of the indexed core
In contrast to the Web Storage API, an object store may
have an arbitrary number of indexes
No space limit such as in the Web Storage API
Likely going to become the future structured storage
replacing the Web SQL API (which is now deprecated)
Introduces the concept of transactions and cursors
W3CRecommendation
35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35October 14, 2016
File API
Handling of files in web applications
can only read but not write to the local file system
reading of File, FileList and Blob objects
File object with various attributes (name, size, type,
lastModifiedDate)
FileReader can be used to read file content
W3CWorkingDraft
<input id="f1" type="file">
var fileInput = document.getElementById("f1");
var fileList = fileInput.files;
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
// handle individual file
}
36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36October 14, 2016
Drag and Drop
Drag items and drop them anywhere in the browser
define draggable elements via the draggable attribute
define elements that can accept drops
exchange information via the dataTransfer object
Items can also be drag and dropped from the desktop to
the browser
W3CRecommendation
37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37October 14, 2016
Drag and Drop ...
<!DOCTYPE html>
<html>
<head>
// style sheet information for the div elements
<script>
function drag(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
function drop(event) {
event.preventDefault(); // avoid default behaviour of opening as link
var data=event.dataTransfer.getData("text/plain");
event.target.appendChild(document.getElementById(data));
}
function allowDrop(event) {
event.preventDefault();
}
</script>
</head>
W3CRecommendation
38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38October 14, 2016
Drag and Drop ...
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="wise.gif" draggable="true" ondragstart="drag(event)" id="d1">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
W3CRecommendation
39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39October 14, 2016
Web Workers
When executing JavaScript in an HTML page, the
page becomes non-responsive until the script is finished
Web Workers can be used to execute JavaScript code in
a background process (thread)
to avoid the complexity of multi-threaded programming, Web
Workers have independent JavaScript contexts and can only
interact with each other via event-driven message passing
W3CWorkingDraft
<script>
var worker = new Worker("myScript.js");
worker.onmessage = function(event) {
alert("The worker received this: " + event.data);
// web worker sends a message back
postMessage("I got your call and will work on it");
...
};
40. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40October 14, 2016
Web Workers ...
Note that Web Workers have no access to
window.document (page or DOM API)
"clean up" Web Workers via terminate() method
// add a listener to receive messages from the web worker
worker.addEventListener("message", handle, false);
function handle(e) {
// process message from the web worker
}
worker.postMessage("Hello worker!");
</script>
W3CWorkingDraft
41. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41October 14, 2016
Web Socket API
Bidirectional, full-duplex socket connection between
the server and browser for real-time web applications
(low latency) with asynchronous partial updates
server-initiated updates become possible!
client and server upgrade from the HTTP protocol to the
WebSocket protocol (initial HTTP handshake)
- via Connection: Upgrade and Upgrade: websocket HTTP header fields
- browser as well as server have to support the Web Socket protocol
reduced "overhead" since no HTTP headers
no longer necessary to do any polling or long polling
- faster since in the polling approach the server can send nothing while a client
request is transmitted
similarly an EventSource object can be used if only the server
has to push information (server-sent events)
W3CCandidateRecommendation
42. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42October 14, 2016
Web Socket API ...
<script>
var socket = new WebSocket("ws://chat-server.com");
socket.onopen = function(e) { alert("Opened connection ..."); };
socket.onmessage = function(e) {
var message = JSON.parse(e.data));
alert("Message received.");
...
};
socket.onclose = function(e) { alert("Closed connection."); };
socket.onerror = function(e) { alert("WebSocket Error" + e); };
socket.send("Hellow World");
// connection stays open and server can send multiple things
...
socket.close();
</script>
W3CCandidateRecommendation
43. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43October 14, 2016
Geolocation API
Standard interface for accessing geographical
location information on the client device
transparent access to different location information sources
- GPS, GSM cells, IP address, RFID, Wi-Fi connection etc.
Firefox uses the Google Location Service as default
lookup service
send IP address and information about nearby wireless access
points to the Google Location Service and an approximate
location will be computed
W3CRecommendation
44. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44October 14, 2016
Geolocation API ...
JavaScript access to the Geolocation API
access via the geolocation child object of the navigator object
we can also continuously monitor the client's position
function showPosition(position) {
alert(position.coords.latitude + " " + position.coords.longitude);
}
function showError() {
alert("Your current position cannot be computed!");
}
navigator.geolocation.getCurrentPosition(showPosition, showError,
{timeout:10000});
navigator.geolocation.watchPosition(showPosition);
W3CRecommendation
45. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45October 14, 2016
Geolocation Example: Google Maps
46. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 46October 14, 2016
Fullscreen API
Can be used to show elements in fullscreen mode
requestFullscreen() and exitFullScreen()
W3CWorkingGroupNote
<video id="video1" width="640" height="480">
<source src="bullhead.mp4" type="video/mp4" />
</video>
var video = document.getElementById("video1");
if (video.requestFullscreen) { // different browser implementations
video.requestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
47. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47October 14, 2016
Screen Orientation API
Provides access to the orientation of the screen
portrait-primary, portrait-secondary,
landscape-primary or landscape-secondary
W3CWorkingDraft
// add a listener to react to changes of screen orientation
screen.orientation.addEventListener("change", function () {
console.log("The orientation of the screen is: " + screen.orientation);
});
// lock the screen in portrait or landscape orientation
screen.orientation.lock("landscape");
// unlock the screen
screen.orientation.unlock();
screen.orientation.lock('portrait')
48. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48October 14, 2016
Page Visibility API
Provides information about the current visibility
of a page
we can adapt behaviour if a page is not visible (e.g. minimised)
- change update frequency (e.g. checking for emails) to save resources
- pause video or game
- do not charge for ads
W3CRecommendation
var video = document.getElementById("video1"); // assume we have a video
document.addEventListener("visibilitychange", handle, false);
function handle() {
if (document.hidden) {
video.pause();
} else {
video.play();
}
}
49. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 49October 14, 2016
Pointer Lock API
Provides access to raw (relative) mouse movements
single element gets all the mouse events
mouse cursor is removed from view (exit via Esc key)
input for first person perspective and 3D modelling software
W3CProposedRecommendation
<canvas id="c1" width="200" height="200"></canvas>
var canvas = document.getElementById("c1");
canvas.requestPointerLock();
document.addEventListener("pointerlockchange", change, false);
document.addEventListener("mousemove", move, false);
function change(e) {
// react to change of the lock status
}
50. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 50October 14, 2016
Pointer Lock API ...
W3CCandidateRecommendation
function move(e) {
var x = e.movementX; // movement of x in pixels
var y = e.movementY; // movement of y in pixels
// do something with the x,y movement
}
// Pointer lock released via exitPointerLock() or by pressing the Esc key
document.exitPointerLock();
51. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 51October 14, 2016
Battery Status API
Provides Information about the battery status of the
hosting device
e.g. to reduce battery drain when the battery is low
W3CCandidateRecommendation
var battery = navigator.battery;
console.log("Battery level: " + Math.floor(battery.level * 100) + "%");
console.log("Device is " + (battery.charging ? "charging" : "discharging");
console.log("Battery charged in " + battery.chargingTime + "s");
console.log("Battery empty in " + battery.dischargingTime + "s");
// we can further register to the following events:
chargingchange, levelchange, chargingtimechange and dischargingtimechange
battery.onlevelchange = function() {
...
}
52. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 52October 14, 2016
Vibration API
Provide simple tactile feedback
simple vibration or pattern of on/off pulses
feedback for mobile phones and other devices
for devices not supporting vibrations, the methods have no effect
W3CRecommendation
// single vibration for 300ms
navigator.vibrate(300);
// pattern with pauses of 50ms
navigator.vibrate([300, 50, 300, 50, 1000]);
// ongoing vibrations can be cancelled at any time by calling the vibrate
method with a value of zero
navigator.vibrate(0);
53. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 53October 14, 2016
Web Notifications API
Display notifications to alert users outside the
context of a web page
show standard desktop notifications (e.g. lower right corner)
W3CRecommendation
Notification.requestPermission(); // ask for permission
var options = {
body: "This is the body of my message",
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhE"
};
var notification = new Notification("My Title", options);
54. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 54October 14, 2016
Example: Multiplayer Port of Quake II
Google's browser port of Quake II uses
canvas and WebGL
<audio> for sound
<video> for in-game videos
Web Sockets for communication with the server (other players)
Local Storage for managing preferences and saved games
55. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 55October 14, 2016
Other HTML5 Features
Media Capture and Streams
access local multimedia devices such as microphones or video
cameras
Web Messaging
communication between documents (e.g. in different frames, tabs
or windows) regardless of their source domain
messages should only be accepted from domains we expect to
receive messages from
WebRTC 1.0: Real-time Communication Between
Browsers
real-time browser-to-browser applications for voice calling, video
chat etc.
56. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 56October 14, 2016
Other HTML5 Features …
Note that some other HTML5 features are
introduced later in the course
Microdata
…
57. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 57October 14, 2016
Exercise 3
HTML5 and the Open Web Platform
58. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 58October 14, 2016
References
HTML – Living Standard, WHATWG
http://www.whatwg.org/html
HTML5 – A Technical Specification for Web Developers
http://developers.whatwg.org
HTML5 – A Vocabulary and Associated APIs for HTML
and XHTML, W3C Recommendation
http://www.w3.org/TR/html5/
HTML Design Principles, W3C Working Draft
http://www.w3.org/TR/html-design-principles/
HTML Tutorial
http://www.w3schools.com/html/
59. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 59October 14, 2016
References ...
HTML Canvas 2D Context, W3C Working Draft
http://www.w3.org/TR/2dcontext/
Simon Sarris, HTML 5 Canvas: A Web Standard
for Dynamic Graphics (refcardz #151)
http://refcardz.dzone.com/refcardz/html5-canvas-web-standard
HTML5 Canvas and JavaScript Demo
http://www.youtube.com/watch?v=cnexWE5Rbx4
Scalable Vector Graphics (SVG) 1.1
http://www.w3.org/TR/SVG11/
60. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 60October 14, 2016
References ...
HTML Tutorial
http://www.w3schools.com/html/
Andy Harris, Core HTML (refcardz #64)
http://refcardz.dzone.com/refcardz/core-html
James Sugrue, HTML5: The Evolution
of Web Standards (refcardz #123)
http://refcardz.dzone.com/refcardz/html5-new-standards-web-interactivity
Mark Pilgrim, HTML5: Up and Running - Dive Into the
Future of Web Development, O'Reilly Media, August
2010, ISBN-13: 978-0596806026
61. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 61October 14, 2016
References ...
Offline Web Applications, W3C Working
Group Note
http://www.w3.org/TR/offline-webapps/
Max Firtman, HTML5 Mobile Development,
(refcardz #186)
http://refcardz.dzone.com/refcardz/html5-mobile-development
W3C Markup Validation Service
http://validator.w3.org
ZygoteBody
https://www.youtube.com/watch?v=_n2Us7oGmRA
62. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 62October 14, 2016
References
Web Storage, W3C Recommendation
http://www.w3.org/TR/webstorage/
Indexed Database API, W3C Recommendation
http://www.w3.org/TR/IndexedDB/
Gerard Gallant, HTML5: IndexedDB,
(refcardz #195)
http://refcardz.dzone.com/refcardz/html5-indexeddb
File API, W3C Working Draft
http://www.w3.org/TR/FileAPI/
Web Workers, W3C Working Draft
http://www.w3.org/TR/workers/
63. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 63October 14, 2016
References ...
Gerard Gallant, HTML5 Web Workers:
Multithreaded JavaScript for High-Performance Web
Apps (refcardz #177)
http://refcardz.dzone.com/refcardz/html5-web-workers
Web Sockets API, W3C Candidate Recommendation
http://www.w3.org/TR/websockets/
Geolocation API, W3C Recommendation
http://www.w3.org/TR/geolocation-API/
Fullscreen API, W3C Working Group Note
https://www.w3.org/TR/fullscreen/