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

Posts Tagged ‘HTML5’

Displaying video on websites is both easy and hard as a good video experience usually requires a custom-styled, cross-browser and fast player.

Flowplayer, the popular HTML5 video player, offers a great experience with a completely customizable feature set.

FlowPlayer

One of the most important things when playing video is probably the browser support. The player does that perfectly with HTML5 by default and falling back to Flash when needed.

Flowplayer’s interface is completely customizable and it comes with 3 beautiful skins. Also, its layout is fluid and works in any screen size with no extra settings.

There is a web-based designer to create a completely new skin and also see how flexible it is.

It can be controlled very easily (keyboard and touch events support) and offers a (native) fullscreen mode too.

FlowPlayer - Skinnable

Cuepoints can be defined for any video, sub-titles can be added and the videos can even be displayed in slow-motion.

For a better customization, any HTML can be shown when the videos are preloading and once they are ended (good for presentations and branding).

Flowplayer integrates well with Google Analytics and can track “how long a video is played, how many times it is played and in which format (HTML5 or Flash).

Each video file is embeddable (if enabled) with the help of a share button that auto-generates an embed link.

FlowPlayer - Cross Browser

All the functionality of the player can be controlled with a powerful API and it has callbacks on every level to interact with any event.

The player is open source and free to use under the GPL license. For commercial use, it requires a license.

And, Flowplayer team provides great support (paid support exists) and an active user community that discusses on their product forum.

How to join the giveaway?

Flowplayer is giving away 3 * Commercial licenses ($95 value/each) and in order to join:

  • please comment to this post

And, the winners will be selected randomly on 06 May 2013 (1 week later) with the query below:

SELECT * FROM wp_comments WHERE comment_post_id=4037 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to all.

The winners

Here they are:

  • bigcloud (comment #1263775)
  • Techspy (comment #1263756)
  • Federico Garcia (comment #1263809)

Congratulations.

Animated GIF files are the widely-used format for displaying “loader…” images.

Sonic is a tiny JavaScript class for creating such loader images with HTML5 canvas.

Sonic - HTML5 Canvas Loaders

It works by drawing a shape at tiny intervals along a pre-defined, custom path where sizes, colors or fps can all be customized.

There are ready-to-use examples provided and a web-based Sonic Creator exists for creating loaders and getting them as a HTML5 canvas code, animated GIF or a sprite image with the CSS3 code.

RazorFlow is a PHP framework for easily creating dashboards that work well on all major devices and browsers.

It works by simply inserting a single PHP file into any app, feeding it with data and choosing the output type.

RazorFlow PHP Dashboard Framework

The outputs can be charts (many chart types are supported), data grids or items that display a single value.

They are all interactive, have support for filtering the data and, like mentioned, they are responsive.

RazorFlow can connect to MySQL, PostgreSQL, or SQLite databases.

HTML form elements look and behave slightly (or sometimes more) different in each browser.

In order to find out the differences and test them easily, there is a website: Native Form Elements.

Native Form Elements

The website does a simple thing, it lists all the form elements (including HTML5 elements) and their disabled states.

So, to compare, opening the site in different browsers is enough.

  • Tags:
  • Filed under: Forms, Goodies, No License
  • 0 Comments
  • Chart.js is an impressive JavaScript charting library that is built on top of HTML5 canvas.

    It currently supports 6 chart types (line, bar, radar, pie, column and polar area) and all this comes in a standalone, <5kb package.

    Chart.js

    Colors, fonts, borders and their sizes can all be customized. Also, optionally, charts can be loaded with an animation.

    As the library is built with canvas, it works on a wide set of browsers, loads fast but lacks interactivity.

  • Tags:
  • Filed under: Charts, Goodies, MIT License
  • 9 Comments
  • CanvasQuery is a JavaScript library that eases working with HTML5 canvas and adds lots of new methods to it.

    The library provides a jQuery-like syntax and methods added are mostly for image manipulation (like masks, blur, crop or fill mask).

    It also brings blend modes, new shapes, text wrapping and much more.

    CanvasQuery can be used with or without jQuery, has methods for color conversion and can be extended with plugins.

    CanvasQuery

    Modal boxes are so functional in displaying any HTML content with a focused interface and there are many great ones around.

    iLightBox is a fresh alternative to other jQuery lightbox plugins and there is a strong chance that, although it is a paid resource, it may become your favorite.

    It can present images, videos (YouTube, Vimeo, HTML5 video), other HTML and there is an optional fullscreen mode.

    iLightbox jQuery Plugin

    The gallery mode can display other items as thumbnails and allows browsing via keyboard, mousewheel and touch events (swipe).

    There are retina-ready skins, it can be completely customized and

    iLightbox can also be used as a good-looking replacement for JavaScript’s alert, prompt and confirm dialogs.

    iLightbox

    It has a powerful JavaScript API for customizing it further when needed. And, yes, it is responsive.

    The plugin supports a wide range of browsers starting with IE7+ and works with mobile ones too.

    For WordPress fans, there is also a WordPress plugin offered which is compatible with the regular wordpress gallery shortcode

    cgSceneGraph is an object-oriented and easy-to-use JavaScript animation framework that is built on top of HTML5 canvas.

    It is created with professional apps and games in mind, works cross-browser and has lots of built-in nodes like images, text, buttons, shapes, etc.

    cgSceneGraph

    The framework is capable of managing complex scenes, supports mouse and touch events, has attributes for draggable + resizable and comes with a collision + particle system.

    There is also support for asynchronous image loading, color manipulation and much more.

    The Web Audio API that is developed by Google is easier to work with and has more features compared to alternatives. But, it still lacks of browser support.

    Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.

    Howler.js

    It accepts multiple file formats for cross-browser compatibility, has caching and can play many sounds at the same time (it is also mute/un-mute them one-by-one or globally).

    The sounds can be looped, a fadeIn/fadeOut effect exists and standard media controls are just a part of the library.

    It is lightweight (5kb), has support for chaining methods and doesn’t require any JS frameworks.

    Showkase LogoIf you are looking for a quick way to create a good-looking portfolio website, there is a nice and professional option for that: Showkase.

    Showkase is a self-hosted, PHP-powered and very easy-to-use app for building HTML5 portfolio websites.

    It has a portfolio-focused, simplified admin interface where new pages (about and contact us pages) can be added, galleries can be created and images uploaded.

    Showkase

    Images can be uploading with multiple ways, Showkase auto-creates the thumbnails and they can be ordered with drag ‘n’ drops.

    The galleries can be presented with a choice of multiple viewers (JuiceBox or SimpleViewer) where both supports a chic navigation with thumbnails prev-next and/or bullet navigation options.

    There are 3 built-in themes and new themes can be created with ease (uses Smarty 3 template engine).

    Showkase Demo

    Besides these galleries, there is also a “Library” feature for uploading images and using them within the site.

    Websites created work pretty fast as the app creates lightweight HTML pages and doesn’t make any database queries.

    Also, when it comes to different devices and browsers, Showkase themes are responsive and they work well on tablets + mobile as well.

    The giveaway

    Showkase is giving away 3 Standard licenses ($49/each) to WRD readers.

    In order to join the giveaway, just comment this article and winners will be sent 1 week later (4 Feb 2013) randomly with the query below:

    SELECT * FROM wp_comments WHERE comment_post_id=3627 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

    Good luck.

    The winners

    Here they are:

    • dan linsky (comment #1066874)
    • Aaron F. (comment #1065950)
    • Barry (comment #1070139)

    Congratulations.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com