This document provides an agenda and introduction for a training session on HTML5. It discusses HTML5 features like new elements, canvas, SVG, drag and drop, geolocation, video, audio, forms, storage and more. The trainer is Mehdi Jalal from NETLINKS for the Afghanistan Workforce Development Program. Browser support for HTML5 is still evolving as the specification is not fully complete.
The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.
1. HTML5 is a major revision to the HTML standard that is still under development and aims to be the future of the web.
2. It includes new elements like <video>, <audio>, and <canvas> that allow embedding multimedia without plugins, as well as features like geolocation.
3. The HTML5 specification is very large, covering HTML, SVG, CSS, and APIs. It aims to provide a common standard for web applications.
4. HTML5 is not just a marketing term - it represents an ongoing effort to develop a unified standard for the next generation of the web.
This document outlines an agenda for an HTML5 essential training. It covers front-end technologies, HTML basics and evolution, terminology, document structure, common elements, section elements, semantic elements, features beyond basics, and useful resources. The training includes live demos of common elements and <div> usage. It compares using HTML4 divs versus HTML5 semantic elements for page structure.
Developers keep hearing a lot about HTML5, but many don’t know what it actually means or is truly capable of. In this deep dive you will learn how to use HTML5 to solve existing challenges on the web and how to design and develop stunning HTML5 application. You will also preview HTML5 application runs cross platforms, in the desktop browsers as well as on the Phones. What will be covered in the session:
• Introduction to CSS3, Canvas, SVG, Video, and Audio
• What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript?
• Canvas and SVG comparison, and when to use what
• Best Practices of writing good HTML5 application
• Come and see a collection of the best HTML5 application on Games, Videos, Movies, Comics, Travel, Music and Art
• Expect a lot of demos and code
Presentation and demo will be available at http://blogs.msdn.com/b/dorischen/
HTML5 contains many new interesting features that make the platform a capaple development platform. Sockets, SVG, geolocation, local storage and many more are included in the platform. In this one hour session, we will look at cool implementations of 10 features of HTML5
The document discusses HTML5 and SVG. It provides an overview of SVG, including that SVG describes 2D vector images, has full DOM support and scripting capabilities, and is an open standard supported by modern browsers. It also discusses how SVG and HTML5 can be used together, with examples of embedding SVG inline within HTML5, using SVG objects within HTML5, and combining SVG and HTML5 on the same page.
This document provides an overview of HTML5 and related technologies. It discusses how HTML5 is more than just HTML, and covers the HTML5 specification process and components. It then provides a tour of new HTML5 features like <video>, <audio>, SVG, <canvas>, geolocation, and CSS3 specifications including borders, colors, shadows, backgrounds, fonts, media queries and transforms. The document demonstrates several of these features and provides resources for further information.
SVG For Web Designers (and Developers) Sara Soueidan
1. The document discusses using SVG for web design, including creating SVG images, optimizing them, and embedding them onto web pages.
2. Designers are advised to use simple shapes over complex paths and to simplify paths when creating SVG images.
3. SVG images can be combined into a single file and referenced on web pages using the <symbol> and <use> elements, providing a method of "spriting" SVG images.
The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.
1. HTML5 is a major revision to the HTML standard that is still under development and aims to be the future of the web.
2. It includes new elements like <video>, <audio>, and <canvas> that allow embedding multimedia without plugins, as well as features like geolocation.
3. The HTML5 specification is very large, covering HTML, SVG, CSS, and APIs. It aims to provide a common standard for web applications.
4. HTML5 is not just a marketing term - it represents an ongoing effort to develop a unified standard for the next generation of the web.
This document outlines an agenda for an HTML5 essential training. It covers front-end technologies, HTML basics and evolution, terminology, document structure, common elements, section elements, semantic elements, features beyond basics, and useful resources. The training includes live demos of common elements and <div> usage. It compares using HTML4 divs versus HTML5 semantic elements for page structure.
Developers keep hearing a lot about HTML5, but many don’t know what it actually means or is truly capable of. In this deep dive you will learn how to use HTML5 to solve existing challenges on the web and how to design and develop stunning HTML5 application. You will also preview HTML5 application runs cross platforms, in the desktop browsers as well as on the Phones. What will be covered in the session:
• Introduction to CSS3, Canvas, SVG, Video, and Audio
• What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript?
• Canvas and SVG comparison, and when to use what
• Best Practices of writing good HTML5 application
• Come and see a collection of the best HTML5 application on Games, Videos, Movies, Comics, Travel, Music and Art
• Expect a lot of demos and code
Presentation and demo will be available at http://blogs.msdn.com/b/dorischen/
HTML5 contains many new interesting features that make the platform a capaple development platform. Sockets, SVG, geolocation, local storage and many more are included in the platform. In this one hour session, we will look at cool implementations of 10 features of HTML5
The document discusses HTML5 and SVG. It provides an overview of SVG, including that SVG describes 2D vector images, has full DOM support and scripting capabilities, and is an open standard supported by modern browsers. It also discusses how SVG and HTML5 can be used together, with examples of embedding SVG inline within HTML5, using SVG objects within HTML5, and combining SVG and HTML5 on the same page.
This document provides an overview of HTML5 and related technologies. It discusses how HTML5 is more than just HTML, and covers the HTML5 specification process and components. It then provides a tour of new HTML5 features like <video>, <audio>, SVG, <canvas>, geolocation, and CSS3 specifications including borders, colors, shadows, backgrounds, fonts, media queries and transforms. The document demonstrates several of these features and provides resources for further information.
SVG For Web Designers (and Developers) Sara Soueidan
1. The document discusses using SVG for web design, including creating SVG images, optimizing them, and embedding them onto web pages.
2. Designers are advised to use simple shapes over complex paths and to simplify paths when creating SVG images.
3. SVG images can be combined into a single file and referenced on web pages using the <symbol> and <use> elements, providing a method of "spriting" SVG images.
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
This document summarizes different vector graphic options for use on the web. It discusses the differences between vector and raster graphics, and why vectors are preferable for resolution independence and smaller file sizes. It then examines SVG, Canvas, VML, and CSS3 as vector graphic options, outlining browser support, APIs, and common uses for each. While SVG is ideal theoretically, browser support is still limited, so libraries like SVG Web and Raphael.js are recommended to abstract cross-browser differences. In the end, SVG is generally better than Canvas for interactive graphics with events, while Canvas may be better for full-screen animations and games.
HTML5 is a new version of HTML that includes new elements and features. It introduces elements for embedding graphics and media, like <canvas> for drawings and <video> and <audio> for media playback. It also includes new form input types, drag and drop functionality, and geolocation. HTML5 provides semantic elements to better describe content. It enables offline web applications and web storage. While browser support is still evolving, many new HTML5 features can already be used today.
The document discusses using Java with HTML5 and related technologies like CSS3 and WebSockets. It provides an overview of HTML5 features like Canvas, SVG, CSS3 animations, and WebSockets. It describes how these features can be used to build interactive client-side applications and how Java servers can integrate with HTML5 apps by saving/retrieving application state and graphics from the client. Java servers can generate graphics like SVG dynamically based on data from HTML5 clients.
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Guillaume Kossi
Scalable Vector Graphics, or SVGs, are the new "big thing" in web design today, and for a good reason. With the proliferation of retina screens and high resolution displays, we need to adopt techniques that allow us to serve graphics that look good on all screens in all circumstances, and because SVGs offer resolution-independent, fully scalable and crystal clear graphics, it is safe to say that they are the future graphics format of the web.
In this talk we're going to see how SVGs can be styled in CSS, and how they can be animated using CSS animations and transitions. We're also going to cover "responsifying" SVGs using CSS media queries, and how we can control the size and looks of SVGs allowing them to adapt to different screen sizes. We'll cover a short workflow from a vector graphics editor to a responsive animated graphic on screen.
This document discusses HTML5 and provides an overview of its key features. It explains that HTML5 is not just the HTML language, but also includes related APIs that allow richer functionality. Some of the major areas covered include semantics and accessibility, rich internet applications using new APIs, and specific technologies like canvas, video/audio, web storage, and web workers. The document emphasizes that HTML5 is still evolving and aims to unify web development across browsers.
This document provides an overview and summary of Scalable Vector Graphics (SVG). It begins with a brief introduction to SVG concepts like basic shapes. It then discusses the history and evolution of SVG standards over time. It outlines how SVG is commonly used today in areas like logos, icons, charts and graphics. Examples are given of tools for editing, optimizing and automating SVG. Reasons for using SVG like crisp images, scriptability, animations and small file sizes are explained. The document discusses how SVG is used and its potential in Drupal. It concludes with an overview of the future SVG 2 standard and resources for learning more about SVG.
This document introduces Scalable Vector Graphics (SVG) and provides an overview of its history, capabilities, and structure. Key points include:
- SVG was developed as an open standard by the W3C to provide rich, reusable visual content for the web using XML.
- SVG allows for vector graphics that can be scaled, manipulated via scripting, styled with CSS, and more. It provides many advantages over raster graphics.
- As an XML format, SVG files are small in size, resolution-independent, and can be dynamically generated and styled on the client-side via JavaScript.
- The document outlines SVG's emergence and development timeline, its structure as an XML language, and its
SVG (Scalable Vector Graphics) is a XML-based format for defining vector graphics. It allows graphics to be scalable, zoomable and searchable. Common SVG shapes that can be created include circles, rectangles, ellipses, lines, and paths. Attributes like cx, cy, r are used to define properties of circles and ellipses, while x1, y1, x2, y2 define the start and end points of a line. SVG graphics do not lose quality when resized.
This document discusses technologies for creating and maintaining web applications. It covers Ruby and the Rails framework. Ruby is designed to be programmer-focused rather than machine-focused, helping create dynamic and self-explained code. Rails enables quickly building web servers through conventions, reuse, single responsibility principles, and features that provide quick setup, deployment, and built-in scalability. The document also discusses front-end architecture with client-side logic, and Rails features for development, deployment, databases, assets, and multi-environment configuration.
Microsoft Silverlight is a cross-browser plugin that allows developers to build rich interactive applications and media experiences for the web. Key features include vector graphics, media playback, animation, and integration with existing web pages. Silverlight uses XAML for markup and a .NET subset for programming. It provides a sandboxed runtime environment and supports common development scenarios like media, rich content, and rich internet applications. Developers can use XAML to build user interfaces with shapes, brushes, text and images, and add interactivity through transforms and animation.
HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
HTML5 is a new version of HTML that aims to improve the semantic structure and functionality of web pages. It introduces new elements like <header>, <nav>, <article>, and <footer> to better define page sections. While browser support is still evolving, many modern browsers support key HTML5 features. The HTML5 specification is developed by the World Wide Web Consortium to advance web standards.
HTML5 is the new standard for HTML that provides new semantic elements and APIs to create more engaging web experiences. Some key features include less code needed in page headers, more semantic HTML tags like <article> and <nav> to structure content, media elements like <video> and <audio> to embed multimedia, the canvas element to draw graphics, and web storage APIs like localStorage to store data on the client side. HTML5 development is a collaboration between the W3C and WHATWG to create a standard that reduces the need for plugins, has better error handling, and makes the web more device independent.
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007Eugene Lazutkin
Eugene Lazutkin's keynote on DojoX GFX at SVG Open 2007.
(The seminar notes are here: http://www.slideshare.net/elazutkin/dojox-gfx-session-eugene-lazutkin-svg-open-2007/)
The document discusses using SVG images and CSS techniques to improve accessibility in WordPress themes. It provides tips for using SVG images in an accessible way, such as adding the "role=img" attribute to SVG files and using the <title> or <desc> elements for inline SVGs. It also suggests using CSS classes to hide non-essential text from sighted users while retaining it for screen readers. The document demonstrates how highlighting different page elements in the CSS can help test that landmarks and other accessibility standards are properly implemented.
Performant, accessible animations with CSS & a dash of JavaScriptsoyarsauce
Animations have potential to add detail and flair to your user experience, but may introduce some issues for assistive technology and render performance. It’s now common practice to include some animation in web apps to enhance user experience.
We'll go over common accessibility issues with CSS animations, why people may not be aware of the fact that some of their CSS animations are not accessible, and some simple ways this can be resolved with minimal JavaScript. We will also do a quick dive into the performance differences across various animation methods.
This document provides biographical information about Walter. It states that he was born in May 1992 in Puyo, Ecuador and grew up there as the first of four children. It lists his parents, Mecias Almendariz who was born in Mocha and Rosa Paguay who was born in Puela. Additionally, it specifies that Walter is currently a fifth semester student studying Industrial Psychology in the faculty of human sciences and education.
El documento explora los conceptos de prospectiva y prospectiva tecnológica. La prospectiva se define de diferentes maneras pero en esencia busca iluminar el presente con la luz de los futuros posibles a través de métodos como la construcción de escenarios. La prospectiva tecnológica identifica las tecnologías emergentes que podrían generar beneficios económicos y sociales mediante procesos participativos con expertos. El documento describe algunas metodologías y los pasos de un proceso de prospectiva tecnológica.
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
This document summarizes different vector graphic options for use on the web. It discusses the differences between vector and raster graphics, and why vectors are preferable for resolution independence and smaller file sizes. It then examines SVG, Canvas, VML, and CSS3 as vector graphic options, outlining browser support, APIs, and common uses for each. While SVG is ideal theoretically, browser support is still limited, so libraries like SVG Web and Raphael.js are recommended to abstract cross-browser differences. In the end, SVG is generally better than Canvas for interactive graphics with events, while Canvas may be better for full-screen animations and games.
HTML5 is a new version of HTML that includes new elements and features. It introduces elements for embedding graphics and media, like <canvas> for drawings and <video> and <audio> for media playback. It also includes new form input types, drag and drop functionality, and geolocation. HTML5 provides semantic elements to better describe content. It enables offline web applications and web storage. While browser support is still evolving, many new HTML5 features can already be used today.
The document discusses using Java with HTML5 and related technologies like CSS3 and WebSockets. It provides an overview of HTML5 features like Canvas, SVG, CSS3 animations, and WebSockets. It describes how these features can be used to build interactive client-side applications and how Java servers can integrate with HTML5 apps by saving/retrieving application state and graphics from the client. Java servers can generate graphics like SVG dynamically based on data from HTML5 clients.
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Guillaume Kossi
Scalable Vector Graphics, or SVGs, are the new "big thing" in web design today, and for a good reason. With the proliferation of retina screens and high resolution displays, we need to adopt techniques that allow us to serve graphics that look good on all screens in all circumstances, and because SVGs offer resolution-independent, fully scalable and crystal clear graphics, it is safe to say that they are the future graphics format of the web.
In this talk we're going to see how SVGs can be styled in CSS, and how they can be animated using CSS animations and transitions. We're also going to cover "responsifying" SVGs using CSS media queries, and how we can control the size and looks of SVGs allowing them to adapt to different screen sizes. We'll cover a short workflow from a vector graphics editor to a responsive animated graphic on screen.
This document discusses HTML5 and provides an overview of its key features. It explains that HTML5 is not just the HTML language, but also includes related APIs that allow richer functionality. Some of the major areas covered include semantics and accessibility, rich internet applications using new APIs, and specific technologies like canvas, video/audio, web storage, and web workers. The document emphasizes that HTML5 is still evolving and aims to unify web development across browsers.
This document provides an overview and summary of Scalable Vector Graphics (SVG). It begins with a brief introduction to SVG concepts like basic shapes. It then discusses the history and evolution of SVG standards over time. It outlines how SVG is commonly used today in areas like logos, icons, charts and graphics. Examples are given of tools for editing, optimizing and automating SVG. Reasons for using SVG like crisp images, scriptability, animations and small file sizes are explained. The document discusses how SVG is used and its potential in Drupal. It concludes with an overview of the future SVG 2 standard and resources for learning more about SVG.
This document introduces Scalable Vector Graphics (SVG) and provides an overview of its history, capabilities, and structure. Key points include:
- SVG was developed as an open standard by the W3C to provide rich, reusable visual content for the web using XML.
- SVG allows for vector graphics that can be scaled, manipulated via scripting, styled with CSS, and more. It provides many advantages over raster graphics.
- As an XML format, SVG files are small in size, resolution-independent, and can be dynamically generated and styled on the client-side via JavaScript.
- The document outlines SVG's emergence and development timeline, its structure as an XML language, and its
SVG (Scalable Vector Graphics) is a XML-based format for defining vector graphics. It allows graphics to be scalable, zoomable and searchable. Common SVG shapes that can be created include circles, rectangles, ellipses, lines, and paths. Attributes like cx, cy, r are used to define properties of circles and ellipses, while x1, y1, x2, y2 define the start and end points of a line. SVG graphics do not lose quality when resized.
This document discusses technologies for creating and maintaining web applications. It covers Ruby and the Rails framework. Ruby is designed to be programmer-focused rather than machine-focused, helping create dynamic and self-explained code. Rails enables quickly building web servers through conventions, reuse, single responsibility principles, and features that provide quick setup, deployment, and built-in scalability. The document also discusses front-end architecture with client-side logic, and Rails features for development, deployment, databases, assets, and multi-environment configuration.
Microsoft Silverlight is a cross-browser plugin that allows developers to build rich interactive applications and media experiences for the web. Key features include vector graphics, media playback, animation, and integration with existing web pages. Silverlight uses XAML for markup and a .NET subset for programming. It provides a sandboxed runtime environment and supports common development scenarios like media, rich content, and rich internet applications. Developers can use XAML to build user interfaces with shapes, brushes, text and images, and add interactivity through transforms and animation.
HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
HTML5 is a new version of HTML that aims to improve the semantic structure and functionality of web pages. It introduces new elements like <header>, <nav>, <article>, and <footer> to better define page sections. While browser support is still evolving, many modern browsers support key HTML5 features. The HTML5 specification is developed by the World Wide Web Consortium to advance web standards.
HTML5 is the new standard for HTML that provides new semantic elements and APIs to create more engaging web experiences. Some key features include less code needed in page headers, more semantic HTML tags like <article> and <nav> to structure content, media elements like <video> and <audio> to embed multimedia, the canvas element to draw graphics, and web storage APIs like localStorage to store data on the client side. HTML5 development is a collaboration between the W3C and WHATWG to create a standard that reduces the need for plugins, has better error handling, and makes the web more device independent.
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007Eugene Lazutkin
Eugene Lazutkin's keynote on DojoX GFX at SVG Open 2007.
(The seminar notes are here: http://www.slideshare.net/elazutkin/dojox-gfx-session-eugene-lazutkin-svg-open-2007/)
The document discusses using SVG images and CSS techniques to improve accessibility in WordPress themes. It provides tips for using SVG images in an accessible way, such as adding the "role=img" attribute to SVG files and using the <title> or <desc> elements for inline SVGs. It also suggests using CSS classes to hide non-essential text from sighted users while retaining it for screen readers. The document demonstrates how highlighting different page elements in the CSS can help test that landmarks and other accessibility standards are properly implemented.
Performant, accessible animations with CSS & a dash of JavaScriptsoyarsauce
Animations have potential to add detail and flair to your user experience, but may introduce some issues for assistive technology and render performance. It’s now common practice to include some animation in web apps to enhance user experience.
We'll go over common accessibility issues with CSS animations, why people may not be aware of the fact that some of their CSS animations are not accessible, and some simple ways this can be resolved with minimal JavaScript. We will also do a quick dive into the performance differences across various animation methods.
This document provides biographical information about Walter. It states that he was born in May 1992 in Puyo, Ecuador and grew up there as the first of four children. It lists his parents, Mecias Almendariz who was born in Mocha and Rosa Paguay who was born in Puela. Additionally, it specifies that Walter is currently a fifth semester student studying Industrial Psychology in the faculty of human sciences and education.
El documento explora los conceptos de prospectiva y prospectiva tecnológica. La prospectiva se define de diferentes maneras pero en esencia busca iluminar el presente con la luz de los futuros posibles a través de métodos como la construcción de escenarios. La prospectiva tecnológica identifica las tecnologías emergentes que podrían generar beneficios económicos y sociales mediante procesos participativos con expertos. El documento describe algunas metodologías y los pasos de un proceso de prospectiva tecnológica.
Modul ini membahas tentang merakit komputer pribadi dan mencakup pengenalan sistem komputer, perangkat penyusun komputer, cara merakit komputer, dan pemecahan masalah perakitan komputer. Modul ini berisi materi pembelajaran, video tutorial, dan kuis untuk menguji pemahaman siswa.
After the Civil War, groups of women searched battlefields to recover and identify the remains of Confederate soldiers who were buried in mass graves. They established cemeteries like Marietta City & Confederate Cemetery and Marietta National Cemetery to properly bury the Union and Confederate dead. Historic Oakland Cemetery in Atlanta also contains a Confederate section known as the "Garden of Heroes" where approximately 3,900 Confederate soldiers are interred alongside monuments honoring the Confederate dead. These cemeteries helped preserve the memory of those who lost their lives during the Civil War.
This document provides an overview of key concepts in biology, including what defines life, evolution, and how scientists study life. It discusses that life is defined by cells, use of energy and materials, homeostasis, growth, reproduction, and evolution. Evolution occurs through mutations, genetic variation, and natural selection acting on this variation over generations. Scientists study life at different levels, from molecules to ecosystems, and classify organisms based on evolutionary relationships and characteristics like cell structure, number of cells, and energy acquisition.
Role and responsibilities of an allied health professionalNasreen Begum
The document outlines the roles and responsibilities of Allied Health Professionals in India. It discusses how Allied Health Professionals play important roles in health promotion, health improvement, and supporting those with long-term conditions or disabilities. It also outlines several guiding principles and standards that Allied Health Professionals must follow, including providing competent, safe care to clients; effective communication and maintaining professional boundaries with clients; and engaging in continuing professional development and practicing within their scope.
Preparing foods with nutrition and safety in mindNasreen Begum
Proper food handling and preparation techniques can maximize the nutrient quality and flavors of foods. Specifically:
- Washing all fresh fruits and vegetables with cool tap water while avoiding soaking helps retain vitamins.
- Leaving edible skins on and trimming as little as possible preserves vitamins and minerals found in outer layers.
- Quickly cooking vegetables until just tender-crisp minimizes heat-related nutrient destruction.
- Microwaving and steaming foods retains nutrients by reducing cooking times and avoiding nutrient-leaching cooking water.
This document discusses search engine optimization (SEO) and provides details on an SEO strategy and implementation plan. The strategy involves on-page optimization such as keyword research, meta tag optimization, and content optimization. It also involves off-page optimization activities like article submission, social bookmarking and directory submission. A multi-month implementation schedule is provided that outlines specific on-page and off-page optimization tasks to be completed each month. Technical testing of the website is also recommended to analyze SEO factors and identify areas for improvement.
This training presentation educates food handlers on food safety and hygiene. It summarizes that foodborne diseases kill over 2 million people annually. Food can be contaminated by physical, chemical, or microbiological hazards like bacteria, which need specific conditions like water, food, temperature and time to multiply rapidly and cause food poisoning. Common sources of food poisoning bacteria are food handlers, raw foods, pests, air, and dirt. Proper temperature control and avoiding cross-contamination are important to prevent bacterial growth. Thorough cleaning, pest control, personal hygiene, and safe food handling practices are essential to ensuring food safety.
The document summarizes music genres and forms from the pre-Spanish and Spanish periods in the Philippines. It describes that pre-Spanish music was simple with two-note melodies and recitative styles. Examples included dal-lot, pamulinawen, and dung-aw. During the Spanish period, sacred music became more conservative while secular forms like kumintang, awit, and balitaw emerged and were influenced by Spanish musical traditions. The kundiman was a traditional love song and serenade, while the harana was a courting tradition where men would sing love songs to women.
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.
This document provides an overview of fundamentals of web development including HTML, CSS, JavaScript, and frameworks. It covers topics such as the importance of web development, differences between web designers and developers, front-end and back-end development, and introductions to HTML, CSS, JavaScript, jQuery, and advanced web development topics. The document aims to provide learners with knowledge to develop interactive websites using core web technologies.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
This document provides an overview of fundamentals of web development including HTML, CSS, JavaScript, and frameworks like jQuery and React. It discusses the importance of web development and differences between web designers and developers. It also explains front-end and back-end development, provides descriptions of HTML, CSS, and JavaScript, and covers additional topics like hosting, DOM, and CSS3 transformations.
HTML5 is a draft specification from the W3C that adds new elements like canvas, video and audio to HTML and changes some older elements. It is not yet finalized and continues to evolve. HTML5 allows embedding multimedia like video without plugins through new elements like <video> and <audio>. It also introduces new canvas element for drawing 2D graphics and SVG for vector graphics. HTML5 supports local storage and geolocation in the browser.
This document provides an introduction and overview of HTML5. It discusses the new features and elements in HTML5, including video/audio, canvas, drag and drop, geolocation, web storage, web workers, and new form elements. It also covers browser support for various HTML5 features and provides examples of how to implement many of the new technologies.
This document provides an overview and history of HTML5, summarizing some of the key new features in 3 sentences or less:
HTML5 aims to simplify HTML markup and make it more semantic with new elements like <section> and <nav>. It also introduces new JavaScript APIs, richer media like <audio> and <video>, and the <canvas> element for drawing. The development of HTML5 was a collaborative effort between browser vendors to create a common standard that is backwards compatible and supports modern web applications.
HTML5 is a new version of HTML that includes new elements, forms, audio/video playback, drawing, and more. It can be used to build dynamic UIs and web applications. The speaker will provide an introduction to HTML5, demonstrate new elements like <canvas> and audio/video playback, discuss browser support, and provide tutorials and live demos.
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!
The document provides an overview of fundamentals of web development, including:
- The importance of web development for businesses to connect with customers online.
- The differences between web designers and developers, emphasizing the skills needed for front-end development.
- An introduction to front-end technologies like HTML, CSS, and JavaScript for structuring, styling and adding interactivity to web pages.
- Frameworks like jQuery that simplify client-side scripting and dynamic content on websites.
The document provides an overview of fundamentals of web development including:
- The importance of web development for businesses to connect with customers online.
- The differences between web designers and developers and the skills required for each.
- An introduction to front-end and back-end web development.
- Overviews of HTML, CSS, JavaScript, jQuery and other advanced topics.
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.
This document provides an introduction to HTML5. It describes HTML5 as a draft specification from the W3C that is over 1100 pages and is not yet complete, as it continues to evolve. It adds new elements like canvas, video, audio, and inline SVG, and changes or removes some older elements and attributes. The document outlines the status and roadmap for the HTML5 specification. It also provides examples and demonstrations of new HTML5 features like video, audio, canvas, and geolocation.
This document provides an introduction to HTML5. It describes HTML5 as a draft specification from the W3C that is over 1100 pages and is not yet complete, as it continues to evolve. It adds new elements like canvas, video, audio, and inline SVG, and changes or removes some older elements and attributes. The document outlines the status and roadmap for the HTML5 specification. It also provides examples and demonstrations of new HTML5 features like video, audio, canvas, and geolocation.
HTML5 provides richer semantics and improved compatibility compared to previous versions of HTML. It allows for richer internet applications through features like multimedia, graphics, offline web applications, web workers and device APIs. HTML5 aims to improve the web experience across browsers and devices.
HTML5 is the newest version of HTML that adds new semantic elements, built-in audio and video playback, and features like the canvas element for drawing graphics. It simplifies the syntax of earlier HTML versions and aims to make web pages more semantic, reduce the need for plugins, and work across devices. New elements in HTML5 include <header>, <footer>, <nav>, <video>, <audio>, <canvas>, and new form input types. It is still a work in progress with partial browser support.
Top 10 HTML5 features every developer should know!Gill Cleeren
The document summarizes 10 key HTML5 features that every developer should know. It begins with an introduction and agenda listing the features to be covered, including new elements, data input and validation, canvas, SVG, audio and video, feature detection, drag and drop, geolocation, local storage, and the file API. For each feature, it provides details on the new capabilities in HTML5 and examples of how to implement the features in code.
The document discusses HTML5 and provides an overview of its key elements and features. It begins with a definition of HTML5 as a draft specification from the W3C that adds new elements like canvas, video and audio. It then provides summaries of important HTML5 elements and features like video, audio, canvas, SVG, CSS3, DOM scripting, geolocation and more. The document concludes by discussing resources for learning more about HTML5 and considerations around using HTML5 versus apps or other technologies on mobile.
The document introduces HTML5 Canvas, which provides a plug-in free 2D drawing surface for creating graphics in the browser. It describes how Canvas was originally developed by Apple and became part of the HTML5 specification in 2012. It explains how to get the Canvas context and use various drawing methods like fillRect(), moveTo(), lineTo(), arc(), and fillText() to draw shapes, paths, and text. It also discusses browser support for Canvas and how to check for compatibility.
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUpanagenda
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-und-domino-lizenzkostenreduzierung-in-der-welt-von-dlau/
DLAU und die Lizenzen nach dem CCB- und CCX-Modell sind für viele in der HCL-Community seit letztem Jahr ein heißes Thema. Als Notes- oder Domino-Kunde haben Sie vielleicht mit unerwartet hohen Benutzerzahlen und Lizenzgebühren zu kämpfen. Sie fragen sich vielleicht, wie diese neue Art der Lizenzierung funktioniert und welchen Nutzen sie Ihnen bringt. Vor allem wollen Sie sicherlich Ihr Budget einhalten und Kosten sparen, wo immer möglich. Das verstehen wir und wir möchten Ihnen dabei helfen!
Wir erklären Ihnen, wie Sie häufige Konfigurationsprobleme lösen können, die dazu führen können, dass mehr Benutzer gezählt werden als nötig, und wie Sie überflüssige oder ungenutzte Konten identifizieren und entfernen können, um Geld zu sparen. Es gibt auch einige Ansätze, die zu unnötigen Ausgaben führen können, z. B. wenn ein Personendokument anstelle eines Mail-Ins für geteilte Mailboxen verwendet wird. Wir zeigen Ihnen solche Fälle und deren Lösungen. Und natürlich erklären wir Ihnen das neue Lizenzmodell.
Nehmen Sie an diesem Webinar teil, bei dem HCL-Ambassador Marc Thomas und Gastredner Franz Walder Ihnen diese neue Welt näherbringen. Es vermittelt Ihnen die Tools und das Know-how, um den Überblick zu bewahren. Sie werden in der Lage sein, Ihre Kosten durch eine optimierte Domino-Konfiguration zu reduzieren und auch in Zukunft gering zu halten.
Diese Themen werden behandelt
- Reduzierung der Lizenzkosten durch Auffinden und Beheben von Fehlkonfigurationen und überflüssigen Konten
- Wie funktionieren CCB- und CCX-Lizenzen wirklich?
- Verstehen des DLAU-Tools und wie man es am besten nutzt
- Tipps für häufige Problembereiche, wie z. B. Team-Postfächer, Funktions-/Testbenutzer usw.
- Praxisbeispiele und Best Practices zum sofortigen Umsetzen
Maruthi Prithivirajan, Head of ASEAN & IN Solution Architecture, Neo4j
Get an inside look at the latest Neo4j innovations that enable relationship-driven intelligence at scale. Learn more about the newest cloud integrations and product enhancements that make Neo4j an essential choice for developers building apps with interconnected data and generative AI.
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Speck&Tech
ABSTRACT: A prima vista, un mattoncino Lego e la backdoor XZ potrebbero avere in comune il fatto di essere entrambi blocchi di costruzione, o dipendenze di progetti creativi e software. La realtà è che un mattoncino Lego e il caso della backdoor XZ hanno molto di più di tutto ciò in comune.
Partecipate alla presentazione per immergervi in una storia di interoperabilità, standard e formati aperti, per poi discutere del ruolo importante che i contributori hanno in una comunità open source sostenibile.
BIO: Sostenitrice del software libero e dei formati standard e aperti. È stata un membro attivo dei progetti Fedora e openSUSE e ha co-fondato l'Associazione LibreItalia dove è stata coinvolta in diversi eventi, migrazioni e formazione relativi a LibreOffice. In precedenza ha lavorato a migrazioni e corsi di formazione su LibreOffice per diverse amministrazioni pubbliche e privati. Da gennaio 2020 lavora in SUSE come Software Release Engineer per Uyuni e SUSE Manager e quando non segue la sua passione per i computer e per Geeko coltiva la sua curiosità per l'astronomia (da cui deriva il suo nickname deneb_alpha).
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceIndexBug
Imagine a world where machines not only perform tasks but also learn, adapt, and make decisions. This is the promise of Artificial Intelligence (AI), a technology that's not just enhancing our lives but revolutionizing entire industries.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
Infrastructure Challenges in Scaling RAG with Custom AI modelsZilliz
Building Retrieval-Augmented Generation (RAG) systems with open-source and custom AI models is a complex task. This talk explores the challenges in productionizing RAG systems, including retrieval performance, response synthesis, and evaluation. We’ll discuss how to leverage open-source models like text embeddings, language models, and custom fine-tuned models to enhance RAG performance. Additionally, we’ll cover how BentoML can help orchestrate and scale these AI components efficiently, ensuring seamless deployment and management of RAG systems in the cloud.
HCL Notes and Domino License Cost Reduction in the World of DLAUpanagenda
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-and-domino-license-cost-reduction-in-the-world-of-dlau/
The introduction of DLAU and the CCB & CCX licensing model caused quite a stir in the HCL community. As a Notes and Domino customer, you may have faced challenges with unexpected user counts and license costs. You probably have questions on how this new licensing approach works and how to benefit from it. Most importantly, you likely have budget constraints and want to save money where possible. Don’t worry, we can help with all of this!
We’ll show you how to fix common misconfigurations that cause higher-than-expected user counts, and how to identify accounts which you can deactivate to save money. There are also frequent patterns that can cause unnecessary cost, like using a person document instead of a mail-in for shared mailboxes. We’ll provide examples and solutions for those as well. And naturally we’ll explain the new licensing model.
Join HCL Ambassador Marc Thomas in this webinar with a special guest appearance from Franz Walder. It will give you the tools and know-how to stay on top of what is going on with Domino licensing. You will be able lower your cost through an optimized configuration and keep it low going forward.
These topics will be covered
- Reducing license cost by finding and fixing misconfigurations and superfluous accounts
- How do CCB and CCX licenses really work?
- Understanding the DLAU tool and how to best utilize it
- Tips for common problem areas, like team mailboxes, functional/test users, etc
- Practical examples and best practices to implement right away
4. Agenda
• HTML5
Form
Elements
• HTML5
Form
APributes
• HTML5
Seman4c
Elements
• HMTL5
Web
Storage
• HMTL5
Applica4on
Cache
• HMTL5
Web
Workers
5. HTML5
Introduc4on
• What
is
HTML5?
– HTML5
will
be
the
standard
for
HTML
– HTML
4.01
came
in
1999.
Web
changed
a
lot!
– HTML5
is
s4ll
work
in
progress
– Major
browsers
support
HTML5
elements
&
API
• How
Did
HTML5
Get
Started?
– Coopera4on
between
World
Wide
Web
Consor4um
(W3C)
and
Web
Hypertext
Applica4on
Technology
Working
Group
(WHATWG)
6. HTML5
Introduc4on
• The
HTML5
<!DOCTYPE>
– There
is
only
one
<!DOCTYPE>
declara4on.
Simple
<!DOCTYPE html>
7. HTML5
Introduc4on
• Minimum
HTML5
Document
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
8. HTML5
Introduc4on
• HTML5
New
Features
– The
<canvas>
element
for
2D
drawing
– The
<video>
and
<audio>
elements
for
media
playback
– Support
for
local
storage
– New
content-‐specific
elements,
like
<ar4cle>,
<footer>,
<header>,
<nav>,
<sec4on>
– New
form
controls,
like
calendar,
date,
4me,
email,
url,
search
9. HTML5
Introduc4on
• Browser
Support
for
HTML5
– Not
full
standard!
– No
browser
has
full
support
– In
a
con4nuous
development
(Chrome,
Safari,
Internet
Explorer,
Firefox,
Opera)
10.
11. HTML5
New
Elements
• Use
of
internet
changed
a
lot
since
HTML
4.01
(1999)
• Several
HTML
4.01
elements
are
obsolete,
never
used
or
never
used
the
way
they
were
intended
• To
bePer
handle
todays
internet,
HTML5
brings
new
changes:
New
elements
for
drawing
graphics,
adding
media
content,
bePer
page
structure,
bePer
form
handling,
and
several
APIs
to
drag/drop
elements,
find
Geoloca4on,
include
web
storage,
applica4on
cache,
web
workers,
etc.
18. HTML5
Canvas
• The
<canvas>
element
is
used
to
draw
graphics,
on
the
fly,
on
a
web
page.
• What
is
Canvas?
– The
HTML5
<canvas>
element
is
used
to
draw
graphics,
on
the
fly,
via
scrip4ng
(usually
JavaScript).
– The
<canvas>
element
is
only
a
container
for
graphics.
You
must
use
a
script
to
actually
draw
the
graphics.
– Canvas
has
several
methods
for
drawing
paths,
boxes,
circles,
characters,
and
adding
images.
19. HTML5
Canvas
• Browser
Support
– Internet
Explorer
9+,
Firefox,
Opera,
Chrome,
and
Safari
support
the
<canvas>
element.
– Note:
Internet
Explorer
8
and
earlier
versions,
do
not
support
the
<canvas>
element.
• Crea4ng
a
Canvas
<canvas id="myCanvas" width="200"
height="100"></canvas>
20. HTML5
Canvas
• Tip:
You
can
have
mul4ple
<canvas>
elements
on
one
HTML
page.
• Canvas
example:
<canvas id="myCanvas" width="200"
height="100"
style="border:1px solid #000000;">
</canvas>
21. HTML5
Canvas
• Draw
Onto
The
Canvas
With
Javascript
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
22. HTML5
Canvas
• Canvas
Coordinates
• This
means:
Start
at
the
upper-‐le5
corner
(0,0)
and
draw
a
150x75
pixels
rectangle.
23. HTML5
Canvas
• Canvas
Paths
– To
draw
straight
lines
on
a
canvas,
we
will
use
the
following
two
methods:
• moveTo(x,y)
defines
the
star4ng
point
of
the
line
• lineTo(x,y)
defines
the
ending
point
of
the
line
– To
actually
draw
the
line,
we
must
use
one
of
the
"ink"
methods,
like
stroke().
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
24. HTML5
Canvas
• To
draw
a
circle
on
a
canvas,
we
will
use
the
following
method:
– arc(x,y,r,start,stop)
• To
actually
draw
the
circle,
we
must
use
one
of
the
"ink"
methods,
like
stroke()
or
fill().
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
25. HTML5
Canvas
• To
draw
text
on
a
canvas,
the
most
important
property
and
methods
are:
– font
-‐
defines
the
font
proper4es
for
text
– fillText(text,x,y)
-‐
Draws
"filled"
text
on
the
canvas
– strokeText(text,x,y)
-‐
Draws
text
on
the
canvas
(no
fill)
Using
fillText():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
26. HTML5
Canvas
Using
strokeText():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
27. HTML5
SVG
• HTML5
has
support
for
inline
SVG.
• What
is
SVG?
– SVG
stands
for
Scalable
Vector
Graphics
– SVG
is
used
to
define
vector-‐based
graphics
for
the
Web
– SVG
defines
the
graphics
in
XML
format
– SVG
graphics
do
NOT
lose
any
quality
if
they
are
zoomed
or
resized
– Every
element
and
every
aPribute
in
SVG
files
can
be
animated
– SVG
is
a
W3C
recommenda4on
28. HTML5
SVG
• Advantages
of
using
SVG
over
other
image
formats
(like
JPEG
and
GIF)
are:
– SVG
images
can
be
created
and
edited
with
any
text
editor
– SVG
images
can
be
searched,
indexed,
scripted,
and
compressed
– SVG
images
are
scalable
– SVG
images
can
be
printed
with
high
quality
at
any
resolu4on
– SVG
images
are
zoomable
(and
the
image
can
be
zoomed
without
degrada4on)
29. HTML5
SVG
• Internet
Explorer
9+,
Firefox,
Opera,
Chrome,
and
Safari
support
inline
SVG.
• Embed
SVG
Directly
Into
HTML
Pages
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" height="190">
<polygon points="100,10 40,180 190,60
10,60 160,180"
style="fill:lime;stroke:purple;stroke-
width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
30. HTML5
SVG
• Differences
Between
SVG
and
Canvas
– SVG
is
a
language
for
describing
2D
graphics
in
XML.
– Canvas
draws
2D
graphics,
on
the
fly
(with
a
JavaScript).
– SVG
is
XML
based,
which
means
that
every
element
is
available
within
the
SVG
DOM.
You
can
aPach
JavaScript
event
handlers
for
an
element.
– In
SVG,
each
drawn
shape
is
remembered
as
an
object.
If
aPributes
of
an
SVG
object
are
changed,
the
browser
can
automa4cally
re-‐render
the
shape.
– Canvas
is
rendered
pixel
by
pixel.
In
canvas,
once
the
graphic
is
drawn,
it
is
forgoPen
by
the
browser.
If
its
posi4on
should
be
changed,
the
en4re
scene
needs
to
be
redrawn,
including
any
objects
that
might
have
been
covered
by
the
graphic.
32. HTML5
Drag
&
Drop
• Drag
and
drop
is
a
part
of
the
HTML5
standard.
• Drag
and
drop
is
a
very
common
feature.
It
is
when
you
"grab"
an
object
and
drag
it
to
a
different
loca4on.
• In
HTML5,
drag
and
drop
is
part
of
the
standard,
and
any
element
can
be
draggable.
• Internet
Explorer
9+,
Firefox,
Opera,
Chrome,
and
Safari
support
drag
and
drop.
33. HTML5
Drag
&
Drop
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69”>
</body>
</html>
34. HTML5
Geoloca4on
• HTML5
Geoloca4on
is
used
to
locate
a
user's
posi4on.
• The
HTML5
Geoloca4on
API
is
used
to
get
the
geographical
posi4on
of
a
user.
• Since
this
can
compromise
user
privacy,
the
posi4on
is
not
available
unless
the
user
approves
it.
• Browser
Support
– Internet
Explorer
9+,
Firefox,
Chrome,
Safari
and
Opera
support
Geoloca4on.
– Note:
Geoloca4on
is
much
more
accurate
for
devices
with
GPS,
like
iPhone.
35. HTML5
Geoloca4on
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="Geolocation is not supported by this
browser.";
}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
36. HTML5
Geoloca4on
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
37. HTML5
Geoloca4on
• Displaying
the
result
in
a
map
function showPosition(position)
{
var latlon=position.coords.latitude
+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/
staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img
src='"+img_url+"'>";
}
38. HTML5
Video
• Many
modern
websites
show
videos.
HTML5
provides
a
standard
for
showing
them.
• Un4l
now,
there
has
not
been
a
standard
for
showing
a
video/movie
on
a
web
page.
• Today,
most
videos
are
shown
through
a
plug-‐in
(like
flash).
However,
different
browsers
may
have
different
plug-‐ins.
• HTML5
defines
a
new
element
which
specifies
a
standard
way
to
embed
a
video/movie
on
a
web
page:
the
<video>
element.
• Internet
Explorer
9+,
Firefox,
Opera,
Chrome,
and
Safari
support
the
<video>
element.
– Note:
Internet
Explorer
8
and
earlier
versions,
do
not
support
the
<video>
element.
39. HTML5
Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
40. HTML5
Video
<!DOCTYPE html>
<html>
<body>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
41. HTML5
Audio
• HTML5
provides
a
standard
for
playing
audio
files.
• Un4l
now,
there
has
not
been
a
standard
for
playing
audio
files
on
a
web
page.
• Today,
most
audio
files
are
played
through
a
plug-‐in
(like
flash).
However,
different
browsers
may
have
different
plug-‐ins.
• HTML5
defines
a
new
element
which
specifies
a
standard
way
to
embed
an
audio
file
on
a
web
page:
the
<audio>
element.
• Internet
Explorer
9+,
Firefox,
Opera,
Chrome,
and
Safari
support
the
<audio>
element.
– Note:
Internet
Explorer
8
and
earlier
versions,
do
not
support
the
<audio>
element.
42. HTML5
Audio
• HTML5
Audio
–
How
it
Works
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/
mpeg">
Your browser does not support the audio
element.
</audio>
44. HTML5
Input
Types
• HTML5
has
several
new
input
types
for
forms.
These
new
features
allow
bePer
input
control
and
valida4on.
– color
– date
– date4me
– date4me-‐local
– email
– month
– number
– range
– search
– tel
– 4me
– url
– week
• Note:
Not
all
major
browsers
support
all
the
new
input
types.
However,
you
can
already
start
using
them;
If
they
are
not
supported,
they
will
behave
as
regular
text
fields.
45. HTML5
Form
Elements
• HTML5
has
the
following
new
form
elements:
– <datalist>
– <keygen>
– <output>
• Note:
Not
all
major
browsers
support
all
the
new
form
elements.
However,
you
can
already
start
using
them;
If
they
are
not
supported,
they
will
behave
as
regular
text
fields.
46. HTML5
Form
Elements
• <datalist>
– HTML5
<datalist>
Element
– The
<datalist>
element
specifies
a
list
of
pre-‐
defined
op4ons
for
an
<input>
element.
– The
<datalist>
element
is
used
to
provide
an
"autocomplete"
feature
on
<input>
elements.
Users
will
see
a
drop-‐down
list
of
pre-‐defined
op4ons
as
they
input
data.
– Use
the
<input>
element's
list
aPribute
to
bind
it
together
with
a
<datalist>
element.
47. HTML5
Form
Elements
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
48. HTML5
Form
Elements
• <keygen>
– The
purpose
of
the
<keygen>
element
is
to
provide
a
secure
way
to
authen4cate
users.
– The
<keygen>
tag
specifies
a
key-‐pair
generator
field
in
a
form.
– When
the
form
is
submiPed,
two
keys
are
generated,
one
private
and
one
public.
– The
private
key
is
stored
locally,
and
the
public
key
is
sent
to
the
server.
The
public
key
could
be
used
to
generate
a
client
cer4ficate
to
authen4cate
the
user
in
the
future.
49. HTML5
Form
Elements
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
50. HTML5
Form
Elements
• <output>
– The
<output>
element
represents
the
result
of
a
calcula4on
(like
one
performed
by
a
script).
<form oninput="x.value=parseInt(a.value)
+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
51. HTML5
New
Form
Elements
• HTML5
has
several
new
aPributes
for
<form>
and
<input>.
• New
aPributes
for
<form>:
– autocomplete
– Novalidate
• New
aPributes
for
<input>:
– autocomplete
– autofocus
– form
– formac4on
– formenctype
– formmethod
– formnovalidate
– formtarget
– height
and
width
– list
– min
and
max
– mul4ple
– paPern
(regexp)
– placeholder
– required
– step
52. HTML5
Seman4c
Elements
• What
Are
Seman4c
Elements?
– A
seman4c
element
clearly
describes
its
meaning
to
both
the
browser
and
the
developer.
– Examples
of
non-‐seman4c
elements:
<div>
and
<span>
-‐
Tells
nothing
about
its
content.
– Examples
of
seman4c
elements:
<form>,
<table>,
and
<img>
-‐
Clearly
defines
its
content.
– Internet
Explorer
9+,
Firefox,
Chrome,
Safari
and
Opera
supports
the
seman4c
elements
described
in
this
chapter.
54. HTML5
Web
Storage
• What
is
HTML5
Web
Storage?
– With
HTML5,
web
pages
can
store
data
locally
within
the
user's
browser.
– Earlier,
this
was
done
with
cookies.
However,
Web
Storage
is
more
secure
and
faster.
The
data
is
not
included
with
every
server
request,
but
used
ONLY
when
asked
for.
It
is
also
possible
to
store
large
amounts
of
data,
without
affec4ng
the
website's
performance.
– The
data
is
stored
in
key/value
pairs,
and
a
web
page
can
only
access
data
stored
by
itself.
– Web
storage
is
supported
in
Internet
Explorer
8+,
Firefox,
Opera,
Chrome,
and
Safari.
55. HTML5
Web
Storage
• localStorage
and
sessionStorage
– There
are
two
new
objects
for
storing
data
on
the
client:
• localStorage
-‐
stores
data
with
no
expira4on
date
• sessionStorage
-‐
stores
data
for
one
session
– Before
using
web
storage,
check
browser
support
for
localStorage
and
sessionStorage:
if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}
56. HTML5
Web
Storage
• The
localStorage
Object
– The
localStorage
object
stores
the
data
with
no
expira4on
date.
The
data
will
not
be
deleted
when
the
browser
is
closed,
and
will
be
available
the
next
day,
week,
or
year.
localStorage.lastname="Smith";
document.getElementById("result").innerHTML
="Last name: "
+ localStorage.lastname;
57. HTML5
Web
Storage
• The
sessionStorage
Object
– The
sessionStorage
object
is
equal
to
the
localStorage
object,
except
that
it
stores
the
data
for
only
one
session.
The
data
is
deleted
when
the
user
closes
the
browser
window.
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked
the button " + sessionStorage.clickcount + " time(s) in this
session.";
58. HTML5
Applica4on
Cache
• With
HTML5
it
is
easy
to
make
an
offline
version
of
a
web
applica4on,
by
crea4ng
a
cache
manifest
file.
• HTML5
introduces
applica4on
cache,
which
means
that
a
web
applica4on
is
cached,
and
accessible
without
an
internet
connec4on.
• Applica4on
cache
gives
an
applica4on
three
advantages:
– Offline
browsing
-‐
users
can
use
the
applica4on
when
they're
offline
– Speed
-‐
cached
resources
load
faster
– Reduced
server
load
-‐
the
browser
will
only
download
updated/changed
resources
from
the
server
59. HTML5
Applica4on
Cache
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
FALLBACK:
/html/ /offline.html
60. HTML5
Web
Workers
• A
web
worker
is
a
JavaScript
running
in
the
background,
without
affec4ng
the
performance
of
the
page.
• When
execu4ng
scripts
in
an
HTML
page,
the
page
becomes
unresponsive
un4l
the
script
is
finished.
• A
web
worker
is
a
JavaScript
that
runs
in
the
background,
independently
of
other
scripts,
without
affec4ng
the
performance
of
the
page.
You
can
con4nue
to
do
whatever
you
want:
clicking,
selec4ng
things,
etc.,
while
the
web
worker
runs
in
the
background.
61. HTML5
Web
Workers
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not
support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
62. HTML5
Web
Workers
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Demo_workers.js