Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘HTML5’

theexpressiveweb.com is a beautiful resource and showcase on CSS3 and HTML5 features.

It is brought by Adobe and currently shares 12 features including the ones like CSS3 animations, media queries, web fonts, HTML5 audio, canvas and web storage.

The website is pretty interactive and comes with many impressive demos that are built by Adobe or other websites.

theexpressiveweb

For each property, the browsers that support it are displayed and, for non-compatible browsers, any possible fallback strategies are discussed.

Also, the official announcement of the project includes an informative "Lessons Learned" part which is a very nice read.

P.S. 2 Adobe-related posts in a row. What are the odds? : )

Adobe's Flash is probably having the most difficult days since its launch considering the no-iOS support and the increasing popularity of HTML5 + web standards.

A strong competitor to the Flash platform now comes right from Adobe with a tool named Edge that eases creating web-based interactive animations that only use HTML5, JavaScript, and CSS3.

There is a Flash-like timeline for building the animations and the built-in JavaScript engine used for them is jQuery.

Adobe Edge

Check out these demos and consider downloading the source files for the demos to start playing with the application quickly.

Adobe Edge is currently released as a preview release and offered for free during that period.

html2canvas is an impressive script that can take screenshots of websites (or some parts of them) totally on the client-side, with only JavaScript.

The screenshot is generated via rendering the page as a canvas image by reading the DOM and styles applied to the elements.

html2canvas

As every browser renders pages differently, the output can be expected to differ slightly in each of them.

The library is mentioned to be experimental as there are still various CSS3 properties and elements that are not supported. However, it is still exciting and works pretty good, just check out the demos.

HTML5 canvas brings a huge flexibility in drawing graphics in web pages but it is sometimes complicated to work with.

CanvasText is a JavaScript library that handles using and styling text in canvas with a syntax similar to HTML & CSS.

The usage is pretty easy with a readable function and, currently, the supported properties include fontFamily, fontSize, fontWeight, fontColor and lineHeight. More properties and a caching system is mentioned to be under development

CanvasText

Although the features supported by browsers are becoming more common, there are still many differences between them.

In order to find out the capabilities of the browser you use, Haz.io offers an effortless solution.

Haz.io

Using Modernizr in the backend, it detects which HTML5 and CSS3 are supported, shows the result in a nice interface and links to the related W3C or WHATWG page for each property.

Haz.io is an open source project where you can get the source and update/improve it

With the wider use of HTML5 video and the increasing number of ready-to-use players around, it is hard to choose "which player to use".

VideoSWS is a collection and comparison of HTML5 video players which helps finding the best and/or the most suitable player for your project.

It lists all the well-known players, shows the features supported/unsupported under titles like Flash fallback, iOS compatibility, subtitles, audio, JS library required and more.

Also, it is possible to test each player (with a default video or any custom input) and read personal comments of the VideoSWS creators about them.

VideoSWS

Similar to the The Wall plugin for MooTools that was shared few days ago, Mosaiqy is a jQuery plugin for presenting images in a Mosaic-like grid interface.

The images are displayed inside randomly moving columns and rows where CSS3 transitions are used for the animations.

Mosaiqy jQuery Image Gallery

Once a thumbnail is clicked, the original version is loaded inside the grid with a nice slideIn/Out effect.

It retrieves images from a JSON/JSONP data source which makes integrating with image hosting services pretty easy and there are already demos for Flickr, Instagram and Panoramio.

Mosaiqy has multiple configuration options like the speed of transitions, delay between each, number of columns/rows, looping on/off and more.

Cuepoint.js is a jQuery plugin for handling subtitles and creating cue-points in HTML5 video.

It simply works by creating "an array of subtitles with the seconds" that they will be displayed.

And, a setTime event that can be attached to any element helps skipping the media to the second mentioned.

P.S. For subtitle, "for how long a subtitle will be displayed can not be mentioned but this can be accomplished by adding empty subtitles to the array.

Cuepoint

  • Tags:
  • Filed under: Goodies, Media, Other License
  • 0 Comments
  • Buzz is a powerful JavaScript library for using HTML5 audio element very easily.

    It is a standalone library and has a very feature-rich API that can manage every feature the audio element offers.

    Besides controlling the main actions like play, pause, stop or volume controls, the advanced features like looping or getting the duration of the audio are just one function away.

    Buzz HTML5 JavaScript Audio Library

    Buzz has many functions to get info about the audio, the capabilities of the browser (if the given media type is supported or not) and extras like fadeIn/fadeOut for the sound.

    The library provides a solution to group sounds and many methods to control them which is great for handling multiple audio files at the same time.

    And, a set of events like ended, error or volumechange eases knowing what exactly is the status of the media and acting accordingly.

    P.S. The demo of Buzz is pretty fun and make sure you check it.

    Google has recently announced the launch of Google Swiffy which is a free to use web application for converting SWF files into HTML5.

    It supports many common SWF features such as vector graphics, embedded fonts, images, timeline animation and basic ActionScript 2.0.

    The output works only in WebKit browsers as it includes some SVG features that are not supported by other browsers.

    Google Swiffy

    The usage is very simple: just upload the SWF file and Swiffy will display the HTML5 result where you can "save as" the page and insert into any website with an <iframe> tag.

    P.S. The code generated by Swiffy is pretty complex and hard to edit. You'll still need the .FLA file for editing the source.

    Uptime Robot
    Loading...
    Get WebResourcesDepot Weekly
    A Weekly Newsletter For Web Designers And Developers
    feed-holder
    FeedBurner
    • PSD to HTML
    • file uploading, video/audio/image encoding, s3 storage and much more
    • PSD to HTML
      aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter