The document provides an overview of HTML 5 features including:
- Semantic markup elements like <section>, <nav>, <article>, etc.
- Drawing capabilities using <canvas> and SVG
- Playing video and audio natively in the browser
- Accessing geolocation data using the Geolocation API
- Storing data locally using the Web Storage API
- Enabling offline access through a cache manifest file
It describes techniques for detecting browser support for HTML 5 features and ways to handle fallback for older browsers.
1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket
Learn HTML5 fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- What is HTML.
- Why HTML is a markup language.
- How is its basic structure.
- How to create your first HTML in 5 minutes.
2- Learn HTML Fundamentals / Text FormattingIn a Rocket
Learn HTML5 fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How to structure your content with headers.
- How to organize your ideas with paragraphs.
- How to force spaces and preformat text.
- How to format quotes with blockquote.
- How to tag relevant content with mark.
- How to create ordered, unordered and description lists.
- How to show/hide additional content with details.
- How to document your code with comments.
- How to display reserved and invisible characters with HTML entities.
Structures, Semantics, Controls, and More: HTML 5 is Here!Char James-Tanny
OK, so the estimated timeline says it will be 2012 before HTML 5 is a W3C Candidate Recommendation and 2022 before browsers fully recognize HTML 5. But that doesn't mean that we can't start using it now!
The Web Hypertext Application Technology Working Group (WHATWG) has proposed HTML 5 as the next standard. HTML 5 includes new elements for structure and external content (like audio, video, and graphics), and it adds new attributes to some existing elements. Backward compatibility is maintained so that HTML 5 documents and applications work (or degrade nicely) in existing browsers. The resulting code is very clean and, in some ways, could be considered minimal (especially when compared to HTML 4 or XHTML 1).
Come learn about the future of HTML! See demos and explanations, learn which browsers already support it, and get resources and references to more information.
1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket
Learn HTML5 fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- What is HTML.
- Why HTML is a markup language.
- How is its basic structure.
- How to create your first HTML in 5 minutes.
2- Learn HTML Fundamentals / Text FormattingIn a Rocket
Learn HTML5 fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How to structure your content with headers.
- How to organize your ideas with paragraphs.
- How to force spaces and preformat text.
- How to format quotes with blockquote.
- How to tag relevant content with mark.
- How to create ordered, unordered and description lists.
- How to show/hide additional content with details.
- How to document your code with comments.
- How to display reserved and invisible characters with HTML entities.
Structures, Semantics, Controls, and More: HTML 5 is Here!Char James-Tanny
OK, so the estimated timeline says it will be 2012 before HTML 5 is a W3C Candidate Recommendation and 2022 before browsers fully recognize HTML 5. But that doesn't mean that we can't start using it now!
The Web Hypertext Application Technology Working Group (WHATWG) has proposed HTML 5 as the next standard. HTML 5 includes new elements for structure and external content (like audio, video, and graphics), and it adds new attributes to some existing elements. Backward compatibility is maintained so that HTML 5 documents and applications work (or degrade nicely) in existing browsers. The resulting code is very clean and, in some ways, could be considered minimal (especially when compared to HTML 4 or XHTML 1).
Come learn about the future of HTML! See demos and explanations, learn which browsers already support it, and get resources and references to more information.
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Polandbrucelawson
Forget the empty "Web 2.0" buzzword! Web development, however, is changing. In this session, Bruce gives and overview of HTML5, its intelligent forms, scriptable images and native video. Together with CSS3 and SVG, it will change the way you work making it easier to develop exciting applications. The emergence of more and more Web-enabled devices presents headaches: do you write and test many sites for different devices, or make one site for all? Some simple techniques help you write one site to work everywhere, saving you time and grey hairs. Web development 2.0: Web workers of the world, relax!
A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP.
You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.
I presented this as a seminar in the partial fulfillment of my B.Tech. degree program at College of Technology, G B Pant University of Agriculture & Technology, Pantnagar, India.
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
For years web developers have used hacks, sweat and black magic to bend HTML and CSS into submission and achieve visual effects across browsers that really shouldn't be so difficult.
With HTML5 and CSS3 comes the promise that one day we will be able to play video, create animations and round corners without the need for plugins and with the guarantee that the same code will work in all browsers.
Back in the real world, developers have to navigate the complex issues around HTML5 and CSS3 caused by browser differences, backwards compatibility and an ever evolving standard. This talk introduces HTML5 and CSS3 using demos that will illustrate how to use these new technologies today, but ensure they don't break tomorrow.
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Polandbrucelawson
Forget the empty "Web 2.0" buzzword! Web development, however, is changing. In this session, Bruce gives and overview of HTML5, its intelligent forms, scriptable images and native video. Together with CSS3 and SVG, it will change the way you work making it easier to develop exciting applications. The emergence of more and more Web-enabled devices presents headaches: do you write and test many sites for different devices, or make one site for all? Some simple techniques help you write one site to work everywhere, saving you time and grey hairs. Web development 2.0: Web workers of the world, relax!
A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP.
You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.
I presented this as a seminar in the partial fulfillment of my B.Tech. degree program at College of Technology, G B Pant University of Agriculture & Technology, Pantnagar, India.
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
For years web developers have used hacks, sweat and black magic to bend HTML and CSS into submission and achieve visual effects across browsers that really shouldn't be so difficult.
With HTML5 and CSS3 comes the promise that one day we will be able to play video, create animations and round corners without the need for plugins and with the guarantee that the same code will work in all browsers.
Back in the real world, developers have to navigate the complex issues around HTML5 and CSS3 caused by browser differences, backwards compatibility and an ever evolving standard. This talk introduces HTML5 and CSS3 using demos that will illustrate how to use these new technologies today, but ensure they don't break tomorrow.
Web Visualization with HTML5, CSS3, and JavaScript is the course with the rapidly changing web development technologies, it has become important to stay in line with them to progress within the industry, which is why this course in web virtualization has been brought to you to spruce up your web designing and animating skills using HTML5, CSS3, and JavaScript. The latest features of HTML5, CSS3 and JavaScript are set to be provided to you through this course, hence, it is desired that you have basic knowledge on these programming languages for a smoother learning experience. This course will start off by walking you through the CSS3 virtualization techniques to design and animate webs. You will be taught how to create a 3D element using CSS transition and to transform animates into 2D and 3D, along with an insight into the elements of scalable vector graphics which is needed to create basic images and polygons and to animate. Our tutors will further take you through the canvas aspects of HTML5 to start drawing grids and animations using it. You will also get to learn how to create a callback and create and activate a queue that is needed in animating and the animation libraries that will be essential to your web designing projects. By the end of this course, you will have an outstanding knowledge of web visualization using HTML5, CSS3, and JavaScript to secure yourself a prominent place within the web development industry.
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.
Communications Mining Series - Zero to Hero - Session 1DianaGray10
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIVladimir Iglovikov, Ph.D.
Presented by Vladimir Iglovikov:
- https://www.linkedin.com/in/iglovikov/
- https://x.com/viglovikov
- https://www.instagram.com/ternaus/
This presentation delves into the journey of Albumentations.ai, a highly successful open-source library for data augmentation.
Created out of a necessity for superior performance in Kaggle competitions, Albumentations has grown to become a widely used tool among data scientists and machine learning practitioners.
This case study covers various aspects, including:
People: The contributors and community that have supported Albumentations.
Metrics: The success indicators such as downloads, daily active users, GitHub stars, and financial contributions.
Challenges: The hurdles in monetizing open-source projects and measuring user engagement.
Development Practices: Best practices for creating, maintaining, and scaling open-source libraries, including code hygiene, CI/CD, and fast iteration.
Community Building: Strategies for making adoption easy, iterating quickly, and fostering a vibrant, engaged community.
Marketing: Both online and offline marketing tactics, focusing on real, impactful interactions and collaborations.
Mental Health: Maintaining balance and not feeling pressured by user demands.
Key insights include the importance of automation, making the adoption process seamless, and leveraging offline interactions for marketing. The presentation also emphasizes the need for continuous small improvements and building a friendly, inclusive community that contributes to the project's growth.
Vladimir Iglovikov brings his extensive experience as a Kaggle Grandmaster, ex-Staff ML Engineer at Lyft, sharing valuable lessons and practical advice for anyone looking to enhance the adoption of their open-source projects.
Explore more about Albumentations and join the community at:
GitHub: https://github.com/albumentations-team/albumentations
Website: https://albumentations.ai/
LinkedIn: https://www.linkedin.com/company/100504475
Twitter: https://x.com/albumentations
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
Building RAG with self-deployed Milvus vector database and Snowpark Container...Zilliz
This talk will give hands-on advice on building RAG applications with an open-source Milvus database deployed as a docker container. We will also introduce the integration of Milvus with Snowpark Container Services.
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.
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
UiPath Test Automation using UiPath Test Suite series, part 6DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 6. In this session, we will cover Test Automation with generative AI and Open AI.
UiPath Test Automation with generative AI and Open AI webinar offers an in-depth exploration of leveraging cutting-edge technologies for test automation within the UiPath platform. Attendees will delve into the integration of generative AI, a test automation solution, with Open AI advanced natural language processing capabilities.
Throughout the session, participants will discover how this synergy empowers testers to automate repetitive tasks, enhance testing accuracy, and expedite the software testing life cycle. Topics covered include the seamless integration process, practical use cases, and the benefits of harnessing AI-driven automation for UiPath testing initiatives. By attending this webinar, testers, and automation professionals can gain valuable insights into harnessing the power of AI to optimize their test automation workflows within the UiPath ecosystem, ultimately driving efficiency and quality in software development processes.
What will you get from this session?
1. Insights into integrating generative AI.
2. Understanding how this integration enhances test automation within the UiPath platform
3. Practical demonstrations
4. Exploration of real-world use cases illustrating the benefits of AI-driven test automation for UiPath
Topics covered:
What is generative AI
Test Automation with generative AI and Open AI.
UiPath integration with generative AI
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofsAlex Pruden
This paper presents Reef, a system for generating publicly verifiable succinct non-interactive zero-knowledge proofs that a committed document matches or does not match a regular expression. We describe applications such as proving the strength of passwords, the provenance of email despite redactions, the validity of oblivious DNS queries, and the existence of mutations in DNA. Reef supports the Perl Compatible Regular Expression syntax, including wildcards, alternation, ranges, capture groups, Kleene star, negations, and lookarounds. Reef introduces a new type of automata, Skipping Alternating Finite Automata (SAFA), that skips irrelevant parts of a document when producing proofs without undermining soundness, and instantiates SAFA with a lookup argument. Our experimental evaluation confirms that Reef can generate proofs for documents with 32M characters; the proofs are small and cheap to verify (under a second).
Paper: https://eprint.iacr.org/2023/1886
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.
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!SOFTTECHHUB
As the digital landscape continually evolves, operating systems play a critical role in shaping user experiences and productivity. The launch of Nitrux Linux 3.5.0 marks a significant milestone, offering a robust alternative to traditional systems such as Windows 11. This article delves into the essence of Nitrux Linux 3.5.0, exploring its unique features, advantages, and how it stands as a compelling choice for both casual users and tech enthusiasts.
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
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.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
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.
2. HTML 5.0 Kristof Degravehttp://kristofdegrave.blogspot.com@kristofdegrave
3. Who am I? Kristof Degrave Ingelmunster, Belgium www.realdolmen.com Focus on web HTML 5.0, ASP.NET http://kristofdegrave.blogspot.com @kristofdegrave
4.
5. Agenda Introduction to HTML 5.0 Detecting HTML 5.0 Features HTML5 SemanticMarkupelements Drawingwith the browser Play video and audio Geolocation Storage Let’stakeit offline Form++ Microdata Websockets Improving performance
7. Fivethingsyoushouldknowabout HTML 5.0 It’s notone big thing Youdon’tneed to throwanythingaway It’s easy to getstarted <!DOCTYPE html> Italreadyworks It’s here to stay
8. Map of HTML 5.0 First Public Working Draft Working Draft Last Call Candidate Recommendation Recommendation
10. Detectiontechnique #1 Check if a certain property exists on a global object (such as window or navigator) function supports_geolocation() { return !!navigator.geolocation; }
11. Detectiontechnique #2 Create an element, then check if a certain property exists on that element function supports_canvas_text() { var supports_canvas = !!document.createElement('canvas').getContext; if (!supports_canvas) { return false; } vardummy_canvas = document.createElement('canvas'); var context = dummy_canvas.getContext('2d'); return typeofcontext.fillText == 'function'; }
12. Detectiontechnique #3 Create an element, check if a certain method exists on that element, then call the method and check the value it returns. function supports_h264_baseline_video() { var supports_video = !!document.createElement('video').canPlayType if (!supports_video) { return false; } var v = document.createElement("video"); return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); }
13. Detectiontechnique #4 Create an element, set a property to a certain value, then check if the property has retained its value. function supports_input_type_date() { vari = document.createElement("input"); i.setAttribute("type", "color"); return i.type !== "text"; }
14. Modernizer HTML 5.0 Detectionlibrary http://www.modernizr.com/ contains 40 feature detection if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( }
16. New Semantic Elements <section> Thematic grouping of content Typically with a heading A web sites home page couldbesplintintosectionsfor Introduction News items Contact information <nav> Section of a page that links to other pages or to parts within the page Only major navigationblocks Notfor links in the footer of the page
17. New Semantic Elements <article> Self-contained composition in a document, page, application, or site Typically Forum post Web log entry Any other independent item of content <aside> Consists of contant that is tangentially related to the content around the aside element Typically Typographical effects like pull quotes or sidebars Advertising Groups of nav elements Other content that is considered separate from the main content of the page.
18. New Semantic Elements <header> Group of introductory or navigational aids Intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but not required The header element can also be used: To wrap a section’s table of contents A search form Any relevant logos <hgroup> Represents the heading of a section The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. H2 – H6 elements do not turn up within the document structure
19. New Semantic Elements <footer> Footer for its nearest ancestor sectioning content or sectioning root element Typically contains information about its section such as: Who wrote it Links to related documents Copyright data <time> A time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar Optionally a time and a time-zone offset <mark> Represents a run of text in one document marked or highlighted for reference purposes
21. Hgroupexplenation HTML 4.0 <h1>This is a section</h1> <section> <h1>And this a subsection!</h1> <h2>Tagline, this is part of the h1 subsection</h2> <h1>And this a second subsection!</h1> </section> Document structure 1. This is a section 1. And this a subsection! 1. Tagline, this is part of the h1 subsection 2. And this a second subsection!
22. Hgroupexplanation HTML 5.0 <h1>This is a section</h1> <section> <hgroup> <h1>And this a subsection!</h1> <h2>Tagline, this is part of the h1 subsection</h2> </hgroup> <h1>And this a second subsection!</h1> </section> Document structure: 1. This is a section 1. And this a subsection! 2. And this a second subsection!
23. Whataboutolderbrowsers Use HTML 5 shim Creates dummy HTML elements <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script><![endif]--> Use HTML 5 Resetstylesheet All browsers render unknown elements inline, i.e. as if they had a display:inline CSS rule http://html5doctor.com/html-5-reset-stylesheet/
25. Canvas Canvas 2D API Bitmap Based, JavaScript Driven Rectangles, Paths, Lines, Fills, Arcs, Curves, etc. Gradients Adding images “Immediate Mode” Control <canvas> Notsupported </canvas> Fallback
26. Cancas Drawing a one-unit-line Draw a line from (1,0) to (1,3) draw a line from (1.5, 0) to (1.5, 3)
27. SVG SVG 1.1 Scalable Vector Graphics Vector Based Language for describing 2D-graphics and graphical applications in XML “Retained Mode”
28. SVG Shapes: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ and ‘polygon’ Text Solid Colors, Linear and Radial Gradients, Patterns Raster Images Styling (inline & CSS)
29. Whataboutolderbrowsers Fallback to Flash orSilverlight Fallback to images in some cases Somelibraries out there (someSilverlightplugins, RaphaelJavaScriptlibraryetc)
30. Exercise Canvas: Draw a twodemensionalgrid Draw a radialgradient Add a part of an image ad scaleit SVG Polygon Gradientelipse
31. Play video and audio Watchyourvideos without third-partyplugins
32. Video & audio Video containers Like a zip file Defines how to store things within them, not what Contains A video track (without audio) Oneor more audio tracks (without video) Metadata (title, cover, …) Examples MPEG 4 (H.264 Baseline Profile video and AAC low-complexity audio) Flash video Ogg (Theora video and Vorbis audio) WebM (VP8 video codec and Vorbis audio codec) Audio Video Interleave
33. Video & audio Video codecs Algorithm by which a video stream is encoded Lossyorlossless Examples H.264 (patent-encumbered) Theora (royalty-free codec) VP8 (royalty-free codec) Audio codecs Algorithm by which a audio stream is encoded Lossyorlossless Examples MP3 (patent-encumbered) Advanced Audio Coding (patent-encumbered) Vorbis (not patent-encumbered)
34. Video codec support * Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec” ** Although Android 2.3 supports WebM, there are no hardware decoders yet, so battery life is a concern. *** Safari will play anything that QuickTime can play, but QuickTime only comes with H.264/AAC/MP4 support pre-installed.
35. Video & audio Video workflow for maximum compatibility Make one version that uses WebM (VP8 + Vorbis). Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container. Make another version that uses Theora video and Vorbis audio in an Ogg container. Link to all three video files from a single <video> element, and fall back to a Flash- or Silverlight-based video player.
38. Geolocation Opt-in IP address Serverside Inaccurate Wireless network connection Basedon MAC adres Quick In- and outdoors Accurate Cell tower Needsenoughcoverage Mostlysmartphones Inaccurate
39. Geolocation Dedicated GPS Accurate Slow Notavailableindoors Assisted GPS Improvent of TTFF Hybrid SkyhookWireless Core Engine
40. Whataboutolder browser Gears Open source browser plugin from google Works on Windows, Mac, Linux, Windows Mobile, and Android Drive specifiek API Each platform has it’sonapi BlackBerry, Nokia, Palm, and OMTP BONDI
41. Geo.js Open source, MIT-licensed JavaScript library Smooths over the differences between the W3C geolocation API, the Gears API, and the APIs provided by mobile platforms Include at the end of the page (for performance) Addgears_initfirst to initializegears <script src="gears_init.js"></script> <script src="geo.js"></script> First, call an init() function to determine if the geolocationapi is available if (geo_position_js.init()) Afterthisyoucancall the getCurrentPosition methode
43. Past Cookies Included in every HTTP Request Slowing down the web app Sending data unencrypted Limited to 4KB Userdata hierarchical XML-based structure 64 KB per Domain 640 KB fortrusteddomains Onlyfor IE Notallowed to increase the amount of data Not presenting any form of permissions dialog
44. Past Local Shared Objects Allows Flash objects to stored 100 KB per domain Increase of the amount of data is possible 1 Mb, 10 Mb, and so on User gets prompt foreachincreaseFlash is necessary Gears Open source browser plugin Provides api to anembedded Web SQL Database SQLite Obtaining user permission once Unlimited amounts of data per domain
45. Past DojoToolkit Dojox.storage Provides a unified interface Auto-detecsAPI’s & Plugins Adobe Flash Gears Adobe AIR Prototype of HTML5 storage in FF
46. What do we want A standardized API Natively and consistently in multiple browsers Don’t have to relay on third-party plugins A lot of storage space On the client Persists beyond a page refresh Isn’t transmitted to the server
47. Present Webstorage Alsoknown as HTML storage Localstorage Dom storage Stores named key/value pairs Data is never transmitted to the remote web server Implemented natively Persists data beyond Page refresh 5MB per domain Increase of quota is notallowed QUOTA_EXCEEDED_ERR when exceeding the quota
48. Webstorage Available in window object Key and data are stored as string Interface Storage getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any data); deleter void removeItem(in DOMString key); void clear(); readonly attribute unsigned long length; getter DOMString key(in unsigned long index);
49. Webstorage Track changes StorageEvent Occerswhen the storageareachanges SetItem RemoveItem Clear And has to actuallychangesomething Storageevent object
50. Future Web SQL Database Formerly known as “WebDB Embedded database based on SQLite Thin wrapper around a SQL database ExecuteSql String as parameter String parameter can be any supported SQL statement SELECT, UPDATE, INSERT, and DELETE Specification work has stopped The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
51. Future Indexed Database Formerly known as “WebSimpleDB” Affectionately known as “IndexedDB” Exposesan object store Shares many concepts with a SQL database There are “databases” with “records” Each record has a set number of “fields” Each field has a specific datatype This field is defined when the database is created Select subset of records and enumeratethemwith a cursor Changes are handled withintransactions No structured query language Instead methodes are provide by the API
53. Offline web applications Contradiction Webpages are thingsyou download and render But we can download the files when we are online Connect online to an offline enabled web app Read the list of URLs from the manifest file Download the resources Cache them locally Automatically keep the local copies up to date as they change Connect offline to a visited offline enabled web app Browser automatically switches to the local copies
54. Offline web applications Eventthatfireswhen the offline status changes HTML5 can take your web application offline, but the rest is up to you Store data localy Syncwith server when the app is online …
55. Chache manifest A list of all of the resources that your web application might need to access while it’s disconnected from the network HTML CSS JS Images … Manifest attributeonhtml element <html manifest="/cache.manifest"> Canbelocatedanywhereon the server Every page of your web application needs a manifest attribute that points to the cache manifest for the entire application.
56. Cache manifest Content First line of every cache manifest file: CACHE MANIFEST The following is devided in 3 parts Explicitsection CACHE All files in this list willbedownloaded and cached Fallbacksection FALLBACK Page thatwillbedisplayedwhenyou are trying to reach a page offline thathasn’t been cached Outlinewhitelistsection NETWORK Containsrecouresthatshouldneverbecached (ex. Cgiscritps)
58. The flow of events First time visit Checkingevent Fireswhen the browsersnotices a manifest attribute in the htmltag Firesalways, even ifyouallreadyvisited the page Downloadingevent Firesif the browser has neverseenthis manifest file Progres event Firesperiodicallywhiledownloading Containsinformationabout the number of files that have been downloaded and the number of files that are stillqueued Cachedevent Fireswhen all the files in the manifest file are downloaded The web app is nowfullycached and ready to use offline
59. The flow of events Previously visited Noupdateevent Firesifyouallreadyvisited the page and the manifest file hasn’tchanged Downloadingevent Firesifyouallreadyvisited the page and the manifest has changed Redownloadsevery single file listed in the manifest file Progres event Firesperiodicallywhiledownloading Containsinformationabout the number of files that have bee Updatereadyevent Fireswhenredownloading was succesfull The newversion web app is nowfullycached Callwindow.applicationCache.swapCache() function or reload the page so the new version will be in use.
60. The flow of events Errorevent Fireswhensomethinggoes wrong in the flow of events Possibleerrors HTTP error 404 (Page notfound) HTTP error 410 (PermanetlyGone) Page failed to download properly Manifest file changedwhile updating Browser failed to download one of the resources listed in the manifest file
68. Formvalidation Automatic No JS needed Validation happens even if JS is disabled Determinesvalidationwith the type attribute E-mail -> checksforvalide-mailaddress Url -> checksforvalid URL Number -> checksif the number is within the range of min & max Novalidation Attributeon the formelements Turns the validationoff
69. Formvalidation Required Attributeon input fields Tells the browser the input field is required Pattern Attributeon input fields Checksif the value matches a givenregex Multiple Attributeon e-mail and file fields Allows multiple files ore-mailadresses in a single input box List Attributeon input fields Provides suggestions (similar to auto complete)
70. Extra features Placeholdertext Attribute “placeholder” in input fields Textdisplayed in an input field when Empty Notfocused Autofocus Attribute “autofocus” in input fields Moves the input focus to the input field as the page is loaded
72. Microdata Microdata annotates the DOM with scoped name/value pairs from custom vocabularies. Centers around custom vocabularies Think 1 vocabulary = “the set of all HTML5 elements” Works with name/value pairs Relies heavily on the concept of “scoping” Parent-childrelationship of DOM elements
74. Adding microdata Attribute itemtype Declares the microdata vocabulary Contains data defenitie of the model Attribute itemscope Declares the scope of the vocabulary Attributeitemproperty The name of the property
75. Microdata example Example <section itemscopeitemtype="http://data-vocabulary.org/Person"> <h1 itemprop="name">Kristof Degrave</h1> <dditemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> <span itemprop="street-address">100 Main Street</span><br> <span itemprop="locality">Anytown</span>, <span itemprop="region">PA</span> <span itemprop="postal-code">19999</span> <span itemprop="country-name">USA</span> </dd> </section>
77. WHY do we needit Direct communicationbetweenclient and server Chat applications Socialnetworks Cloudapplications Online gaming … Currentsolutions Frequent polling Long polling
82. Websockets TCP for the web Full duplex direct communication Benifits Nativeimplemented Lessthroughput Performance Complexity Fallbacks Silverlight Flash
85. Other Webworkers Allows running scripts in the background Doesn’tblockorfreezes UI Takes advantage of multiple cores Async scripts Attributeon script element Simplifies page-load performance improvements Simplifies dynamic script loading Page Visibility API Programmatically determine the current visibility of a document Notifiesvisibilitychanges
86. SetImmidiate API Breaks appart long running JS operations Allows the browser to processoutstandingworkand then waits for the specified period of time before calling back into JavaScript Layout Paints Important design patternwhen building responsive web applications RequestAnimationFrame API Creates power efficient and smooth animations Takes page visibility and the display's refresh rate into account to determine how many frames per second to allocate to the animation
92. For more information: visit our website WWW.REALDOLMEN.COM Follow us on: Selected presentations are available on: Thank You Or scan this QR code with your Smartphone to immediately go to the website
Editor's Notes
HTML5 is not one big thing; it is a collection of individual features.Youcan’tdetect HTML 5.0 but support foridividual featuresYou may think of HTML as tags and angle brackets. That’s an important part of it, but it’s not the whole story. The HTML5 specification also defines how those angle brackets interact with JavaScript, through the Document Object Model (DOM). HTML5 doesn’t just define a <video> tag; there is also a corresponding DOM API for video objects in the DOM. You can use this API to detect support for different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the <video> tag itself.Buildson succes of html 4Fullybackwards compatible New additionswillbeignored in olderbrowsersorcanbesolvedtroughhacks Start improvingtoday3. “Upgrading” to HTML5 can be as simple as changing your doctype. Upgrading to the HTML5 doctype won’t break your existing markup, because all the tags defined in HTML 4 are still supported in HTML5. It will allow you to use — and validate — new semantic elements like <article>, <section>, <header>, and <footer>. 4. Most modern browsers support serveral features of HTML 5.0Several features canbesolvedwithhacks, gears, flash, js, …5. XHTMLwon’tberenewed and resources for HTML 5 have increased. No, HTML 6 but HTML 5 as dynamicstandard. This is possiblebecause HTML 5 is notone big thingbut a collection of individual features.
Working Draft (WD)At the working draft level, the standard is published for review by "the community". A WD document is the first form of a standard that is publicly available. Commentary by virtually anyone is accepted, though no promises are made with regard to action on any particular element of said commentary.At this stage, the standard document may likely have significant differences from its final form. As such, any who implement WD standards should be ready to significantly modify their implementations as the standard matures.Candidate Recommendation (CR)A candidate recommendation is a version of the standard that is more firm than the WD. At this point, the group responsible for the standard is satisfied that the standard does what is needed of it. The purpose of the CR is to elicit aid from the development community as to how implementable the standard is.The standard document may change further, but at this point, significant features are mostly locked. The design of those features can still change due to feedback from implementors.Proposed Recommendation (PR)A proposed recommendation is the version of the standard that has passed the prior two levels. The users of said standard have had their say, and the implementors of the standard have likewise had a chance at providing input. At this stage, the document has been submitted to the W3C Advisory Council for final approval.While this step is important, it rarely causes any significant changes to a standard as it passes to the next phase.W3C Recommendation (REC)This is the most mature stage of development. At this point, the standard has undergone extensive review and testing, under both theoretical and practical conditions. This standard is now endorsed by the W3C as a standard for wide deployment in its problem domain.
Use the double-negative trick to force the result to a Boolean value (true or false).
The function starts by checking for canvas support: Starts by creating a dummy <canvas> element. But the element is never attached to your page, so no one will ever see it. It’s just floating inmemory, going nowhere and doing nothing, like a canoe on a lazy river.As soon as you create the dummy <canvas> element, you test for the presence of a getContext() method. This method will only exist if your browser supports the canvas API.Finally, you use the double-negative trick to force the result to a Boolean value (true or false). Next, you create a dummy <canvas> element and get its drawing context. This is guaranteed to work, because wealready checked that the getContext() method exists on all canvas objects.Finally, you check whether the drawing context has a fillText() function. If it does, the canvas text API is available.
The function starts by checking for HTML5 video support.If your browser doesn’t support HTML5 video, it certainly won’t support any video formats! Then the function creates a dummy <video> element (but doesn’t attach it to the page, so it won’t be visible) and calls the canPlayType() method. A “video format” is really a combination of different things. In technical terms, you’re asking the browser whether it can play H.264 Baseline video and AAC LC audio in an MPEG-4 container.The canPlayType() function doesn’t return true or false. In recognition of how complex video formats are, the function returns a string: "probably" if the browser is fairly confident it can play this format "maybe" if the browser thinks it might be able to play this format "" (an empty string) if the browser is certain it can’t play this format
First, you create a dummy <input> element in memory. The default input type for all <input> elements is "text". This will prove to be vitally important.Next, set the type attribute on the dummy <input> element to the input type you want to detect.If your browser supports that particular input type, the type property will retain the value you set. If your browser doesn’t support that particular input type, it will ignore the value you set and the type property will still be "text".
Section: The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, contact information.Nav: The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to common pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.
Article The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.Aside The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
Hgroup The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. Online:http://gsnedders.html5.org/outliner/Extension: http://chrispederick.com/work/web-developer/HeaderThe header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
FooterThe footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Footers don’t necessarily have to appear at the end of a section, though they usually do. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content. TimeThe time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. Mark The mark element represents a run of text in one document marked or highlighted for reference purposes
There is a wonderous workaround for this problem. If you create a dummy <article> element with JavaScript before you use it in your page, Internet Explorer will magically recognize the <article> element and let you style it with CSS. There is no need to ever insert the dummy element into the DOM. Simply creating the element once (per page) is enough to teach IE to style the element it doesn’t recognize.
Basic <canvas> support IE 7.0+* Firefox 3.0+ Safari 3.0+ Chrome 3.0+ Opera 10.0+iPhone 1.0+ Android 1.0+* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> natively.
Immediate mode rendering is a style for application programming interfacesof graphics libraries, in which client calls directly cause rendering of graphics objects to the display. It does not preclude the use of double-buffering. In contrast to retained mode, lists of objects to be rendered are not saved by the API library. Instead, the application must re-issue all drawing commands required to describe the entire scene each time a new frame is required, regardless of actual changes. This method provides the maximum amount of control and flexibility to the application program.Support:IE 7+ IE 7 & 8 require third-party explorercanvas library. IE 9 supports <canvas> nativelyFF 3.0+Safari 3.0+Chrome 3.0+Opera 10.0+Iphone 1.0+Android 1.0+
By using a "retained mode" approach, client calls do not directly cause actual rendering, but instead update an internal model (typically a list of objects) which is maintained within the library's data space. This allows the library to optimize when actual rendering takes place along with the processing of related objects.[
<video> element support IE 9.0+ Firefox 3.5+ Safari3.0+ Chrome 3.0+ Opera 10.5+iPhone 1.0+ Android 2.0+
A video file usually contains multiple tracks — a video track (without audio), plus one or more audio tracks (without video). Tracks are usually interrelated. An audio track contains markers within it to help synchronize the audio with the video. Individual tracks can have metadata, such as the aspect ratio of a video track, or the language of an audio track. Containers can also have metadata, such as the title of the video itself, cover art for the video, episode numbers (for television shows), and so on.When you “watch a video,” your video player is doing at least three things at once: Interpreting the container format to find out which video and audio tracks are available, and how they are stored within the file so that it can find the data it needs to decode next Decoding the video stream and displaying a series of images on the screen Decoding the audio stream and sending the sound to your speakersEncoders:Miro Video Converter (Open source)WebM video (VP8 video and Vorbis audio in a WebM container).Theora video and Vorbis audio in an Ogg container.H.264 Baseline Profile video and AAC low-complexity audio in an MP4 container.Firefogg (Open source, FF extension)Theora video and Vorbis audio in an Ogg container ffmpeg2theora (Open source, batch)Theora video and Vorbis audio in an Ogg containerHandBrake (Open source)H.264 Baseline Profile video and AAC low-complexity audio in an MP4 container.Ffmpeg (Open source, batch)WebM video (VP8 video and Vorbis audio in a WebM container).
A lossy video codec means that information is being irretrievably lost during encoding. Like copying an audio cassette tape, you’re losing information about the source video, and degrading the quality, every time you encodeH.264 is also known as “MPEG-4 part 10,” a.k.a. “MPEG-4 AVC,” a.k.a. “MPEG-4 Advanced Video Coding.” H.264 was also developed by the MPEG group and standardized in 2003. It aims to provide a single codec for low-bandwidth, low-CPU devices (cell phones); high-bandwidth, high-CPU devices (modern desktop computers); and everything in between. To accomplish this, the H.264 standard is split into “profiles,” which each define a set of optional features that trade complexity for file size. Higher profiles use more optional features, offer better visual quality at smaller file sizes, take longer to encode, and require more CPU power to decode in real-timeTheora evolved from the VP3 codec. Theora video can be embedded in any container format, although it is most often seen in an Ogg container. All major Linux distributions support Theora out-of-the-box. You can also play Theora video on Windows or on Mac OS X after installing Xiph.org’s open source decoder software.VP8 is another video codec from On2, the same company that originally developed VP3 (later Theora). Technically, it produces output on par with H.264 High Profile, while maintaining a low decoding complexity on par with H.264 Baseline.MP3s can contain up to 2 channels of sound. They can be encoded at different bitrates: 64 kbps, 128 kbps, 192 kbps, and a variety of others from 32 to 320. Higher bitrates mean larger file sizes and better quality audio, although the ratio of audio quality to bitrate is not linear. (128 kbps sounds more than twice as good as 64 kbps, but 256 kbps doesn’t sound twice as good as 128 kbps.) Furthermore, the MP3 format allows for variable bitrate encoding, which means that some parts of the encoded stream are compressed more than others. For example, silence between notes can be encoded at a low bitrate, then the bitrate can spike up a moment later when multiple instruments start playing a complex chord. MP3s can also be encoded with a constant bitrate, which, unsurprisingly, is called constant bitrate encoding.AAC was designed to provide better sound quality than MP3 at the same bitrate, and it can encode audio at any bitrate. (MP3 is limited to a fixed number of bitrates, with an upper bound of 320 kbps.) AAC can encode up to 48 channels of sound, although in practice no one does that. The AAC format also differs from MP3 in defining multiple profiles, in much the same way as H.264, and for the same reasons. The “low-complexity” profile is designed to be playable in real-time on devices with limited CPU power, while higher profiles offer better sound quality at the same bitrate at the expense of slower encoding and decoding.Vorbis audio streams are usually embedded in an Ogg or WebM container, but they can also be embedded in an MP4 or MKV container (or, with some hacking, in AVI). Vorbis supports an arbitrary number of sound channels.
Important to add type to thesourceelements: Thisway the browser candetermineifitcanplay it. In case hecan’t, hewon’t download the file. Ifyoudon’tadd the type, you’re browser will download it and try to playitBy default, the <video> element will not expose any sort of player controls. You can create your own controls with plain old HTML, CSS, and JavaScript. The <video> element has methods like play() and pause() and a read/write property called currentTime. There are also read/write volume and muted properties. So you really have everything you need to build your own interface.If you don’t want to build your own interface, you can tell the browser to display a built-in set of controls. To do this, just include the controls attribute in your <video> tag.The preload attribute tells the browser that you would like it to start downloading the video file as soon as the page loads. This makes sense if the entire point of the page is to view the video.The autoplay attribute does exactly what it sounds like: it tells the browser that you would like it to start downloading the video file as soon as the page loads, and you would like it to start playing the video automatically as soon as possibleThe object element serves as fallbackif the video tagisn’tsupported.
Geolocation API support IE 9.0+ Firefox 3.5+ Safari 5.0+ Chrome 5.0+ Opera 10.6+iPhone 3.0+ Android 2.0+
geolocation support is opt-in. That means your browser will never force you to reveal your current physical location to a remote server
Skyhook's Core Engine is a software-only location system that quickly determines device location with 10 to 20 meter accuracy. View a demo of the Core Engine to see it in action now:To quickly and reliably arrive at accurate location results, the Core Engine collect raw data from Wi-Fi access points, GPS satellites and cell towers with advanced hybrid positioning algorithms. By leveraging the strengths of more than one underlying position technology, Skyhook's Core Engine provides the best possible location available in any environment.A mobile device with Skyhook's Core Engine collects raw data from each of the location sources. The Skyhook client then sends this data to the Location Server and a single location estimate is returned. The client is optimized so that it communicates with the Location Server only when the location cannot be determined locally. This behavior minimizes the user's data cost while maximizing battery life.Wi-Fi positioning performs best where GPS is weakest, in urban areas and indoors. GPS provides highly accurate location results in "open sky" environments, like rural areas and on highways. But in urban areas and indoors, tall buildings and ceilings block GPS' view of satellites, resulting in serious performance deficiencies in time to first fix, accuracy and availability. GPS or A-GPS alone cannot provide fast and accurate location results in all environments.Cell tower triangulation provides generalized location results with only 200 - 1000 meter accuracy. It serves as a coverage fallback when neither GPS nor Wi-Fi is available. Skyhook maintains a worldwide database of cell tower locations, which increases our Core Engine coverage area and helps improve GPS satellite acquisition time.http://www.skyhookwireless.com/howitworks/loader_howitworks.swf
HTML5 Storage support IE 8.0+ Firefox 3.5+ Safari 4.0+ Chrome 4.0+ Opera 10.5+iPhone 2.0+ Android 2.0+
For example, if you set an item to its existing value or call clear() when there are no named keys, the storage event will not fire, because nothing actually changed in the storage area.if (window.addEventListener) { window.addEventListener("storage", handle_storage, false); } else { // Necessaryfor IE 8window.attachEvent("onstorage", handle_storage); };
Web SQL Database support IE - Firefox - Safari 4.0+ Chrome 4.0+ Opera 10.5+iPhone 3.0+ Android 2.0+This specification has reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path. Until another implementor is interested in implementing this spec, the description of the SQL dialect has been left as simply a reference to Sqlite, which isn't acceptable for a standard.
At its simplest, an offline web application is a list of URLs — HTML, CSS, JavaScript, images, or any other kind of resource. The home page of the offline web application points to this list, called a manifest file, which is just a text file located elsewhere on the web server.
A web browser that implements HTML5 offline applications will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date as they change. When the time comes that you try to access the web application without a network connection, your web browser will automatically switch over to the local copies instead.From there, most of the work is up to you, the web developer. There’s a flag in the DOM that will tell you whether you’re online or offline. There are events that fire when your offline status changes (one minute you’re offline and the next minute you’re online, or vice-versa). But that’s pretty much it. If your application creates data or saves state, it’s up to you to store that data locally while you’re offline and synchronize it with the remote server once you’re back online. In other words, HTML5 can take your web application offline. What you do once you’re there is up to you.
all manifest files are divided into three parts: the “explicit” section, the “fallback” section, and the “online whitelist” section. Each section has a header, on its own line. If the manifest file doesn’t have any section headers, all the listed resources are implicitly in the “explicit” section.Q: Do I need to list my HTML pages in my cache manifest?A: Yes and no. If your entire web application is contained in a single page, just make sure that page points to the cache manifest using the manifest attribute. When you navigate to an HTML page with a manifest attribute, the page itself is assumed to be part of the web application, so you don’t need to list it in the manifest file itself. However, if your web application spans multiple pages, you should list all of the HTML pages in the manifest file, otherwise the browser would not know that there are other HTML pages that need to be downloaded and cached
Look at the fallback section. The fallback section in this cache manifest only has a single line. The first part of the line (before the space) is not a URL. It’s really a URL pattern. The single character (/) will match any page on your site, not just the home page. When you try to visit a page while you’re offline, your browser will look for it in the appcache. If your browser finds the page in the appcache (because you visited it while online, and the page was implicitly added to the appcache at that time), then your browser will display the cached copy of the page. If your browser doesn’t find the page in the appcache, instead of displaying an error message, it will display the page /offline.html, as specified in the second half of that line in the fallback section.The network section in this cache manifest also has just a single line, a line that contains just a single character (*). This character has special meaning in a network section. It’s called the “online whitelist wildcard flag.” That’s a fancy way of saying that anything that isn’t in the appcache can still be downloaded from the original web address, as long as you have an internet connection. This is important for an “open-ended” offline web application. It means that, while you’re browsing this hypothetical offline-enabled Wikipedia online, your browser will fetch images and videos and other embedded resources normally, even if they are on a different domain. (This is common in large websites, even if they aren’t part of an offline web application. HTML pages are generated and served locally, while images and videos are served from a CDN on another domain.) Without this wildcard flag, our hypothetical offline-enabled Wikipedia would behave strangely when you were online — specifically, it wouldn’t load any externally-hosted images or videos!
When your browser visits a page that points to a cache manifest, it fires off a series of events on the window.applicationCache object. As soon as it notices a manifest attribute on the <html> element, your browser fires a checking event. (All the events listed here are fired on the window.applicationCache object.) The checking event is always fired, regardless of whether you have previously visited this page or any other page that points to the same cache manifest. If your browser has never seen this cache manifest before...It will fire a downloading event, then start to download the resources listed in the cache manifest. While it’s downloading, your browser will periodically fire progress events, which contain information on how many files have been downloaded already and how many files are still queued to be downloaded.After all resources listed in the cache manifest have been downloaded successfully, the browser fires one final event, cached. This is your signal that the offline web application is fully cached and ready to be used offline. That’s it; you’re done.
If you have previously visited this page or any other page that points to the same cache manifest, then your browser already knows about this cache manifest. It may already have some resources in the appcache. It may have the entire working offline web application in the appcache. So now the question is, has the cache manifest changed since the last time your browser checked it?If the answer is no, the cache manifest has not changed, your browser will immediately fire a noupdate event. That’s it; you’re done.If the answer is yes, the cache manifest has changed, your browser will fire a downloading event and start re-downloading every single resource listed in the cache manifest.While it’s downloading, your browser will periodically fire progress events, which contain information on how many files have been downloaded already and how many files are still queued to be downloaded.After all resources listed in the cache manifest have been re-downloaded successfully, the browser fires one final event, updateready. This is your signal that the new version of your offline web application is fully cached and ready to be used offline. The new version is not yet in use. To “hot-swap” to the new version without forcing the user to reload the page, you can manually call the window.applicationCache.swapCache() function.
If, at any point in this process, something goes horribly wrong, your browser will fire an error event and stop. Here is a hopelessly abbreviated list of things that could go wrong:The cache manifest returned an HTTP error 404 (Page Not Found) or 410 (Permanently Gone).The cache manifest was found and hadn’t changed, but the HTML page that pointed to the manifest failed to download properly.The cache manifest changed while the update was being run.The cache manifest was found and had changed, but the browser failed to download one of the resources listed in the cache manifest.
In olderbrowsers these input types willberendered as textNumber type="number" means that this is a number field. min="0" specifies the minimum acceptable value for this field. max="10" is the maximum acceptable value. step="2", combined with the min value, defines the acceptable numbers in the range: 0, 2, 4, and so on, up to the max value. value="6" is the default value. This should look familiar. It’s the same attribute name you’ve always used to specify values for form fields. (I mention it here to drive home the point that HTML5 builds on previous versions of HTML. You don’t need to relearn how to do stuff you’re already doing.)Manipulating the inpur type number in JSinput.stepUp(n) increases the field’s value by n.input.stepDown(n) decreases the field’s value by n.input.valueAsNumber returns the current value as a floating point number. (The input.value property is always a string.)
Differencebetweentext and search:- A “x” wil beaddedwhentyping in the textboxsoyoucanremove the textinside
There are two big problems with validating email addresses in JavaScript:A surprising number of your visitors (probably around 10%) won’t have JavaScript enabled You’ll get it wrongRequired fields must have a value before you can submit the form.
Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.Q: Can I use HTML markup in the placeholder attribute? I want to insert an image, or maybe change the colors.A: The placeholder attribute can only contain text, not HTML markup. However, there are some vendor-specific CSS extensions that allow you to style the placeholder text in some browsersThe autofocus attribute does exactly what it says on the tin: as soon as the page loads, it moves the input focus to a particular input field. But because it’s just markup instead of script, the behavior will be consistent across all web sites. Also, browser vendors (or extension authors) can offer users a way to disable the autofocusing behavior.Fallback:<form name="f"><input id="q" autofocus> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Go"> </form> Preform the focus methode as early as possible. WithjQueryyoucan place it in the readyevent.To sum up: Setting focus properly is important. If at all possible, let the browser do it by setting the autofocus attribute on the form field you want to have focus. If you code a fallback for older browsers, detect support for the autofocus attribute to make sure your fallback is only executed in older browsers. Set focus as early as possible. Insert the focus script into your markup immediately after the form field. If that offends you, use a JavaScript library that supports custom events, and trigger a custom event immediately after the form field markup. If that’s not possible, use something like jQuery’s $(document).ready() event. Under no circumstances should you wait until window.onload to set focus
Microdata centers around custom vocabularies. Think of “the set of all HTML5 elements” as one vocabulary. This vocabulary includes elements to represent a section or an article, but it doesn’t include elements to represent a person or an event. If you want to represent a person on a web page, you’ll need to define your own vocabulary. Microdata lets you do this. Anyone can define a microdata vocabulary and start embedding custom properties in their own web pages.Every microdata vocabulary defines a set of named properties. For example, a Person vocabulary could define properties like name and photo. To include a specific microdata property on your web page, you provide the property name in a specific place. Depending on where you declare the property name, microdata has rules about how to extract the property value. (More on this in the next section.)Along with named properties, microdata relies heavily on the concept of “scoping.” The simplest way to think of microdata scoping is to think about the natural parent-child relationship of elements in the DOM. The <html> element usually contains two children, <head> and <body>. The <body> element usually contains multiple children, each of which may have child elements of their own. For example, your page might include an <h1> element within an <hgroup> element within a <header> element within the <body> element. A data table might contain <td> within <tr> within <table> (within <body>). Microdata re-uses the hierarchical structure of the DOM itself to provide a way to say “all the properties within this element are taken from this vocabulary.” This allows you to use more than one microdata vocabulary on the same page. You can even nest microdata vocabularies within other vocabularies, all by re-using the natural structure of the DOM.Microdata is about applying additional semantics to data that’s already visible on your web page. Microdata is not designed to be a standalone data format. It’s a complement to HTML.
“Adding microdata” to your page is a matter of adding a few attributes to the HTML elements you already have. The first thing you always do is declare which microdata vocabulary you’re using, by adding an itemtype attribute. The second thing you always do is declare the scope of the vocabulary, using an itemscope attribute. In this example, all the data we want to semanti-fy is in a <section> element, so we’ll declare the itemtype and itemscope attributes on the <section> element
HTML 5:Work in progressIE 10+Firefox 6.0+Safari 5.0 +Chrome 10.0+Opera 11.0 +iOS Safari 4.2+Opera Mobile 11.0+