Buzz, a Javascript HTML5 Audio library Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development community. May I use your data in my presentation/article/site, etc? Yes, the support data on this site is free to use under the CC BY 4.0 license. Is there a way to see the support data in colors other than red/green? Yes, you can enable accessible colors from this link or from the option under Settings. Do you have the data available in a raw format? Yes, the raw support data is available on GitHub and is updated regularly. Could you add feature X to the site? Adding features takes quite some time and there are many requests for additions. If you've done the research yourself already, you can also submit a feature on GitHub. Could you cover email clients too so I can see what I can use in HTML emails? I use the following criteria:
Create a stylish HTML5 template from scratch HTML5 is certainly one of the latest buzzwords in the web community. It isn't something new anymore and we've already seen how cool it is. Features like simplified doctype, more semantic markup, input types and placeholders are just some of the reasons you'd like to use a HTML5 template. So, today we're going to build a HTML5 template using the full power of CSS3. View demo The HTML5 template design Here's a screenshot with the HTML5 template layout we're going to code: As you may notice, the above HTML5 template is simple, minimal and stylish - thanks to the CSS3 awesome features. The not-so-secret ingredients: Simple logo using Google Font APINice drop shadow effects.Pattern background using data URI scheme.Vertical drop down menu animated with jQuery.Arrow shapes made with pseudo-elements.CSS3 gradients. A word on data URIs I wanted to create this HTML5 template demo without using any images and I made it. So the result is something like that: The encoded image is basically a pattern. The CSS
Create a Game Character with HTML5 and JavaScript - Part 1 by William Malone In Part 1 of this series we will design a game character from scratch. We will start with a drawing on paper and with the help of JavaScript we will create a breathing, blinking character on HTML5 canvas. Idea to Pixels First we start with an idea. The next step is to get our idea to pixels. Next we color in the outlines. We are creating a dynamic character so we create our character in distinct parts. Head Hair Torso Legs Left Arm Right Arm Each part is saved as a seperate png image. Draw on HTML5 Canvas With the design of our character complete and in the form of six images, we start the process putting our character on canvas. var images = {}; loadImage("leftArm"); loadImage("legs"); loadImage("torso"); loadImage("rightArm"); loadImage("head"); loadImage("hair"); function loadImage(name) { images[name] = new Image(); images[name].onload = function() { resourceLoaded(); } images[name].src = "images/" + name + ".png"; } Here is what the canvas looks like so far: Eyes Shadow
bfirsh/dynamicaudio.js - GitHub Utiliser la Web Audio API - Référence Web API La Web Audio API offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples.. La Web Audio API ne vient pas remplacer l'élément <audio>, mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément <video>. L'une des choses qui rend la Web Audio API puissante est qu'elle n'a pas de limites strictes. Exemples Afin d'expliquer l'utilisation de la Web Audio API, nous avons créé un certain nombre d'exemples qui seront étoffés au fur et à mesure. Tout d'abord, nous avons créé le Voice-change-O-matic, une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Concepts de base Note: la plupart des extraits de code dans cette section viennent de l'exemple Violent Theremin. Création d'un contexte audio Filtre biquad
Dive Into HTML5 Create a Sprite Animation with HTML5 Canvas and JavaScript by William Malone Sprite animations can be drawn on HTML5 canvas and animated through JavaScript. Animations are useful in game and interactive application development. Several frames of an animation can be included in a single image and using HTML5 canvas and JavaScript we can draw a single frame at a time. This tutorial will describe how HTML5 sprite animations work. The example code is based off the game development framework: BlocksJS. What is a Sprite Animation? Two dimensional frame-based animation can be achieved on HTML5 canvas by rendering an area of a single image on a given interval. Using the drawImage method of the canvas context we can change the source position to only draw a cropped portion of one image called a "sprite sheet". What is a Sprite Sheet? HTML5 canvas animation sprite sheets are fundamentally the same as CSS sprite sheets. Now Let's Create a Sprite Animation Let's start by loading the sprite sheet image for the coin animation. DrawImage Method Render coin.render();
facebook/facebook-php-sdk - GitHub Developing Game Audio with the Web Audio API This article discusses APIs that are not yet fully standardized and still in flux. Be cautious when using experimental APIs in your own projects. Introduction Audio is a huge part of what makes multimedia experiences so compelling. If you've ever tried watching a movie with the sound off, you've probably noticed this. Games are no exception! Game audio presents some interesting challenges. Game Audio on the Web For simple games, using the <audio> tag may be sufficient. Looking deeper into the <audio> tag specification, however, it becomes clear that there are many things that simply can't be done with it, which isn't surprising, since it was designed for media playback. No ability to apply filters to the sound signalNo way to access the raw PCM dataNo concept of position and direction of sources and listenersNo fine-grained timing. In the rest of the article, I'll dive into some of these topics in the context of game audio written with the Web Audio API. Background music atmospheric boss
Websockets Server - Cookbook As explained in this webpage, the Websocket protocol allows full-duplex, bi-directional communications between a server and clients. For this WebSocket tutorial, we will need to implement a server. We chose the Tornado Websocket server for our Internet of Things project. In this tutorial, we will present an example of how to get the Tornado Server running using websockets. This tutorial is divided into two parts: A Hello World which uses Tornado A websocket streaming example which uses Websocket4j. 1 - Hello World! 1.1 - Server side: Tornado¶ Warning Tornado only runs on Unix-like platforms. Installation¶ First, download the sources, unpack and follow the readme. For more information concerning the installation, you can go here Code¶ You can find all the documentation you need here, but I will explain the main parts of the following basic Tornado Websocket server program. The main idea is to define a class inherited from the WebSocketHandler class. open on_message on_close In our case: Code¶
Controlling CSS Animations and Transitions with JavaScript The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had this on my list to write about for way too long, so I was happy to let Zach dig into it and write up this comprehensive tutorial. Web designers sometimes believe that animating in CSS is more difficult than animating in JavaScript. Coupled with a touch of JavaScript, CSS animations and transitions are able to accomplish hardware-accelerated animations and interactions more efficiently than most JavaScript libraries. Let's jump straight in! Quick Note: Animations and Transitions are Different Transitions in CSS are applied to an element and specify that when a property changes it should do so over gradually over over a period of time. In this article we will cover each of them separately. Manipulating CSS Transitions Links!