HTML5 Features Tutorials | Bypeople

deals

premiumpacks & html5 features tutorials (21 items)

Tutorials on HTML5 features like canvas, local storage, session storage, content editable and others.

freebies

HTML Audio is a tip to add audio with the use of HTML5, this attribute adds extra controls like play, pause, volume to the audio. Furthermore, the ...

HTML Audio is a tip to add audio with the use of HTML5, this attribute adds extra controls like play, pause, volume to the audio. Furthermore, the text between the audio tags will only display in browsers that do not support the audio element.

Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article. This ...

Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article. This article is additionally available in the following languages:Before the HTML5 element, Flash or another plugin was required to break the silence of the web. While audio on the web no longer requires a plugin, the audio tag brings significant limitations for implementing sophisticated games and interactive applications.The Web Audio API is a high-level ...

Your browser may not support all of the functionality in this article. Your browser appears to support the f...

Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article. WebGL makes it possible to display amazing realtime 3D graphics in your browser but what many people don't know is that WebGL is actually a 2D API, not a 3D API. Let me explain. WebGL only cares about 2 things. Clipspace coordinates in 2D and colors. Your job as a programmer using WebGL is to provide WebGL with those 2 things. You provide 2 "shaders" to do t...

Lifetime Access To Stone River eLearning: 400+ Courses, 3500+ Hours Of Web & Graphic Design, DevOps, Software, App & Web Development, Data Analytic...

Lifetime Access To Stone River eLearning: 400+ Courses, 3500+ Hours Of Web & Graphic Design, DevOps, Software, App & Web Development, Data Analytics, Cyber Security, Marketing & Much More!

Missed the Developer Roundtable? Watch it here! "Mobilizing the Web"One of the really cool things that has come out of the W3C is a web API that gi...

Missed the Developer Roundtable? Watch it here! "Mobilizing the Web"One of the really cool things that has come out of the W3C is a web API that gives you the ability to access a webcam’s video and/or audio through the browser. This is the getUserMedia API. Here we will take a quick look at the API and how we can use it. In addition, we will see how we can use this API with the HTML5 video and canvas elements.The API itself is quite simple...

The new JavaScript Web Speech API makes it easy to add speech recognition to your web pages. This API allows fine control and flexibility over the ...

The new JavaScript Web Speech API makes it easy to add speech recognition to your web pages. This API allows fine control and flexibility over the speech recognition capabilities in Chrome version 25 and later. Here's an example with the recognized text appearing almost immediately while speaking.DEMO / SOURCELet’s take a look under the hood. First we check to see if the browser supports the Web Speech API by checking if the webkitSpeechRecognition object e...

Among the set of goodies in the HTML 5 specification is Canvas which is a way to programmatically draw using JavaScript.We’ll explore the ins and o...

Among the set of goodies in the HTML 5 specification is Canvas which is a way to programmatically draw using JavaScript.We’ll explore the ins and outs of Canvas in this article, demonstrating what is possible with examples and links.Canvas can be used to represent something visually in your browser. For example:In basic terms it’s a very simple pixel-based drawing API, but used in the right way it can be the building block for some clever stuff.Drawing toolsEffectsTransformationsGetting data...

280 Instagram Masks in PSD Format, easy usage, including a tutorial of the process. Delivered in different categories. Normally priced $60, for a l...

280 Instagram Masks in PSD Format, easy usage, including a tutorial of the process. Delivered in different categories. Normally priced $60, for a limited-time only $9 USD!

For a long time JavaScript functions have existed that allow us to create drag and drop interfaces, but none of these implementations were native t...

For a long time JavaScript functions have existed that allow us to create drag and drop interfaces, but none of these implementations were native to the browser.In HTML5, we have a native method of creating drag and drop interfaces (with a little help from JavaScript).I’m going to let you in on how to achieve this… I’d like to get this out of the way before we progress: currently HTML5 drag and drop is supported by all major desktop browsers (including IE (even IE 5.5 has partial support)...

Wow, this looks incredibly handy.Printed :D (the next step up from Bookmarked :P) Nicely done. I opted for the PNG version so I could print it l...

Wow, this looks incredibly handy.Printed :D (the next step up from Bookmarked :P) Nicely done. I opted for the PNG version so I could print it landscape on a single sheet. can I add fillCircle, strokeCircle, fillEllipse, and strokeEllipse prototypes to the list? :) The links does not look like links in Opera mini. @Andrea: Get Ian Hickson to put them on his "list" first :)@v6ak: Thanks for the heads up. Now if only it was rendered in Canvas - now that would be great! :) Hi,Thanks f...

TweetAlong with an army of JavaScript APIs, HTML 5 comes with a Drag and Drop (DnD) API that brings native DnD support to the browser making it muc...

TweetAlong with an army of JavaScript APIs, HTML 5 comes with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. HTML 5 DnD is based on Microsoft’s original implementation which was available as early as Internet Explorer 5! Now currently supported in IE, Firefox 3.5 and Safari 4.We’re going to look how to implement DnD and review some of the issues (or hoops we have to jump through) with the current implementations now.DnD requires on...

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, ...

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, Icon Fonts, 16:9 Aspect Ratio, Intros, Maps, Infographics, Tables, Calendars, Charts, and Much More! Get it for Only $19 (99% Off)

Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article. This ...

Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article. This article is additionally available in the following languages:For years, we've been using libraries like JQuery and Dojo to simplify complex UI elements like animations, rounded corners, and drag and drop. There's no doubt, eye-candy is important for making rich, immersive experiences on the web. But why should a library be required for common tasks that...

At the heart of every location-based application is positioning and geolocation. In this tutorial you will lea...

At the heart of every location-based application is positioning and geolocation. In this tutorial you will learn the geolocation capabilities of HTML5 and the basic principles needed to take advantage of them in your next HTML5 app!Three years ago, the smartphone “boom” was still an uncertain possibility. Today, we are surrounded by a society of smart phone addicts who live as if their lives cannot continue without instant, mobile access to the web, e-mail, and apps for every occasion. Mobil...

HTML5 introduces a variety of new goodies for front-end developers, such as the additions to the browser’s history object. Let’s take a look at its...

HTML5 introduces a variety of new goodies for front-end developers, such as the additions to the browser’s history object. Let’s take a look at its new features in this lesson.Always present the same information when the user refreshes the page.The history object isn’t new; in fact, you can trace its beginnings to the early browsers from the 1990s. While it has never been based on a public standard, until HTML5 that is, every browser has supported its meager, yet sometimes useful, function...

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $...

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $19 for a limited-time

Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article. This arti...

Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article. This article is additionally available in the following languages: IndexedDB is new in HTML5. Web Databases are hosted and persisted inside a user's browser. By allowing developers to create applications with rich query abilities it is envisioned that a new breed of web applications will emerge that have the ability to work online and off-line. The example ...

One of the more interesting developments in web standards lately is the Indexed Database (IndexedDB for short) specification. For a fun time you ca...

One of the more interesting developments in web standards lately is the Indexed Database (IndexedDB for short) specification. For a fun time you can read the spec yourself. In this tutorial I’ll be explaining this feature and hopefully giving you some inspiration to use this powerful feature yourself.As a specification, IndexedDB is currently a Candidate Recommendation.In a nutshell, IndexedDB provides a way for you to store large amounts of data on your user’s browser. Any application that ...

One of the coolest new features of HTML5 is WebSockets, which let us talk to the server without using AJAX requests. In this tutorial, we’ll review...

One of the coolest new features of HTML5 is WebSockets, which let us talk to the server without using AJAX requests. In this tutorial, we’ll review the process of running a WebSocket server in PHP, and then building a client to send and receive messages to it over the WebSocket protocol. WebSockets is a technique for two-way communication over one (TCP) socket, a type of PUSH technology. At the moment, it’s still being standardized by the W3C; however, the latest versions of Chrome and Safar...

Massive Vector Avatar Generator Pack, Over 11,000 Assets For Creating Unique Characters, Avatars, and Mascots in Ai and PSD Formats. Contains Human...

Massive Vector Avatar Generator Pack, Over 11,000 Assets For Creating Unique Characters, Avatars, and Mascots in Ai and PSD Formats. Contains Human, Monster, and Robot Assets Completely Made in Vector Shapes, Get It For Just $29 (91% Off)

This section is non-normative.This specification defines an API for running scripts in the background independently of any user interface scripts....

This section is non-normative.This specification defines an API for running scripts in the background independently of any user interface scripts.This allows for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions, and allows long tasks to be executed without yielding to keep the page responsive.Workers (as these background scripts are called herein) are relatively heavy-weight, and are not intended to be used in large numbers. For e...

Para el servidor, una petición es indistinta de otra inmediata y el ciclo comienza nuevamente. Es por esto que se dice que el protocolo HTTP no tie...

Para el servidor, una petición es indistinta de otra inmediata y el ciclo comienza nuevamente. Es por esto que se dice que el protocolo HTTP no tiene estado, o sea, es stateless. Es nuestra responsabilidad como desarrolladores solventar esta limitación y asegurarnos de mantener el estado entre peticiones.Para esta tarea, era muy habitual utilizar cookies, estos pequeños pedacitos de información que viajan en cada petición entre el cliente y el servidor, de manera de recordarle “Hey! te ac...

Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article. The...

Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article. The HTML5 canvas element can be used to write image filters. What you need to do is draw an image onto a canvas, read back the canvas pixels, and run your filter on them. You can then write the result onto a new canvas (or ...

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects fo...

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects for Illustrator & Photoshop, As Well As Paper Textures & Mockups Included, Get This Bundle For Just $14! (95% Off)

Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article. In th...

Your browser may not support all of the functionality in this article. Your browser appears to support the functionality in this article. In this article, I am going to discuss how to use the HTML5 canvas element to create, edit, open and export images. I will also introduce several open-source tools that are relevant to this technology, and provide some tips on how these techniques can be applied to an existing web application.The first thing to do is check that your browser fully supports HT...

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tu...

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in August, 2010. This industry moves fast — really fast! If you’re not careful, you’ll be left in its dust. So, if you’re feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know. Still using that pesky, impossible-to-memorize XHTML doctype?If so, why? Switch to the new HTML5 doctype. You’l...

It’s hard to identify universally accepted rules in web design, but if there is one that the whole community agrees upon, it’s that you should alwa...

It’s hard to identify universally accepted rules in web design, but if there is one that the whole community agrees upon, it’s that you should always separate your content from its style.

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social...

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social Conversion Boosting, Mobile Optimizing, Browser Graphical Editors, Opt-In Content Delivery, and so much more! Only 19$!