background preloader

Demos

Facebook Twitter

Form Follows Function. 20 SVG uses that will make your jaw drop. Geolocation API watchPosition example. HTML5 Music Player (Updated) Libere el poder de <audio> HTML5. Libere el poder de <audio> HTML5 Los sonidos constituyen la base de nuestra vida.

Libere el poder de <audio> HTML5

Hoy en día, el elemento <audio> HTML5 le da a los desarrolladores Web la posibilidad de incrustar sonidos en sus aplicaciones. La flexibilidad del control a la par de la integración con el resto de la plataforma permite varios escenarios, desde los más sencillos efectos de sonido y audio de fondo hasta experiencias de juego y motores de audio más sofisticados.. Este blog explora algunas de las mejores prácticas para la utilización de la etiqueta <audio> en las aplicaciones Web, e incluye consejos útiles de sitios del mundo real. HTML5 Demos. Web Developers. Real Time Multiplayer in HTML5. Multiplayer and browsers When you consider making multiplayer games, there are many methods available for creating a game that friends can play online.

Real Time Multiplayer in HTML5

There is a good variety of multiplayer game types - take for example a card game you play synchronously with friends. Turns are made, information is exchanged in (semi) real time and the game progresses in discrete steps. Another example, Chess, can be asynchronous. Players take their time, contemplating possible actions and play their next move one week from now. Card games and Chess both usually require communication with a server and communication with the other players in order to work online. The trouble with these methods is the delay, posting a message and waiting for a response each time is just too slow. Luckily, in modern browsers we can take one step higher, and have a real time connection between a server and clients.

The technologies that we have chosen and why Socket.io Node.js Canvas/HTML5 Getting into the gameplay Get the code. HTML5 Webcam Toy. Broadcast Yourself. Magic Xylophone. Welkom bij the valley - the valley. HTML5 Clocks. HTML5 Clocks For our new lesson I have prepared nice pure HTML5 clocks.

HTML5 Clocks

This is pretty easy script, but it is very easy and impressive (as usual). Of course – anything necessary will be at canvas object. Here are our demo and downloadable package: Live Demo download in package Ok, download the source files and lets start coding ! Step 1. This is markup of our clocks. Index.html Step 2. Here are all required stylesheets css/main.css Step 3.

Js/script.js I have defined main timer to redraw scene. Conclusion. Mothereffing animated gif. Custom HTML5 Video Controls with jQuery and CSS. Look Inside HTML5 video element, one of the most popular features in HTML5.

Custom HTML5 Video Controls with jQuery and CSS

It is now already supported by most modern browsers, and even so for IE9. However, each browser provides native browser video controls. HTML5 video Libraries, Toolkits and Players. For the most part, Flash has always been the standard for showing video on the web (think of YouTube and Vimeo), supported in all browsers with the only exception being the iPhone and most recently, the iPad.

HTML5 video Libraries, Toolkits and Players

But now, with HTML5, the new video tag is creeping into our lives and opening up many new, exciting and standardized media possibilities for web developers. To help you understand and get the most from this new tag, we have listed below a selection of the best HTML5 video libraries, frameworks, toolkits and players. 10 Awesome HTML5 Effect Demos. HTML5 Demos and Examples. Creating HTML 5 slide presentations using landslide. Recently I found landslide, which is a Python tool for creating HTML 5 slide presentations.

Creating HTML 5 slide presentations using landslide

It’s based in a famous slide presentation. It’s a simple script that generates HTML from a source file, which can be formatted using reStructuredText, Textile or Markdown. Let’s make a very simple presentation as a proof of concept: we’re going to create a “Python flow control” presentation, showing some basic structures of the language: if, for and while. We need a cover, a slide for each structure (with some topics and code examples) and the last slide for questions and answers. Here is the RST code for it: As you can see it’s very simple. We can generate the HTML output by calling the landslide command in the terminal: % landslide python.rst To use landslide command, you need to install it. . % [sudo] pip install landslide landslide supports theming, so you can customize it by creating your own theme. Old School Cassette Player with HTML5 Audio. Vintage format meets modern web tech: an HTML5 audio player with realistic controls.

Old School Cassette Player with HTML5 Audio

Today we want to share an audio player with you that looks like an old school music cassette. View demo Download source If you don’t know what a cassette is, you were probably born in the digital high-tech era, an era that is undoubtedly exciting and innovative. On the other hand, if you know what an audio cassette is, you belong to the older generation, the analog dinosaurs that know the painful connection between a pen and a cassette tape. The invention of the compact cassette tape happened 50 years ago, so it’s time to celebrate: “In 1962 Philips invented the compact audio cassette medium for audio storage, introducing it in Europe in August 1963 (at the Berlin Radio Show), and in the United States (under the Norelco brand) in November 1964, with the trademark name Compact Cassette.” The songs in the demo are by the highly talented Blue Ducks and Blank & Kytt: