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

Posts Tagged ‘HTML5’

MIX Online, a Microsoft-powered website on web design and development, is sharing a free Adobe Illustrator plugin for converting .AI files into HTML5 canvas.

AI->Canvas plug-in offers options for drawing, animation and coding, such as "events" so that you can build interactive, well-designed canvas-based web apps.

AI to Canvas Plug-in

It can be used to export simple-to-complex shapes, gradients, transparencies, drop shadows and any other stuff.

And, the animation features include rotation, fades, movement, easing, triggers and more.

AI->Canvas comes with versions for Windows + Mac.

Jo is an open source mobile application framework that is based on HTML5 .

It enables you to create for multiple platforms like webOS, iOS, Android, Symbian, Safari, Chrome and Dashboard Widgets.

Jo JavaScript Mobile Framework

The framework is small in size, ~8kb, without any dependencies and compatible with many other JS frameworks.

Jo is also compatible with PhoneGap and makes possible to create native apps besides web apps.

It is very well-documented and has sample codes on every level.

Tile5 is an open source HTML5 mapping JavaScript library that enables developers to integrate existing mapping platforms for providing a rich HTML5 experience.

It is compatible with most of the mapping providers like Google, Bing, Yahoo, MapQuest and more.

Tile5

Besides the API for mapping, the library is also functional for creating more generic tiling application interfaces.

With the compatibility HTML5 offers, Tile5 is targeted at both desktop and mobile browsers.

Tip: there are very nice demos offered to see the power of the library.

FryPlayer (Google-translated English version) is an open source and easy to use HTML5 video player.

The player is actually a jQuery plugin and has very nice features like the ability to skin, buffering, full screen mode and keyboard shortcuts.

It is also possible to set the width-height and initial volume of the player.

HTML5 FryPlayer

  • Tags:
  • Filed under: Goodies, Media, Other License
  • 4 Comments
  • Using the new features and flexibility CSS3 offers, designers keep coming with impressive outputs.

    One of them is BonBon Buttons: attractive buttons that will possibly attract the Web 2.0-type design fans the most.

    CSS3 BonBon Buttons

    A single PNG image is used to give the noise effect and they have a shiny 3D-like look.

    There is also a method provided for inserting Unicode Symbols inside buttons with the help of HTML5 custom data attributes.

  • Tags:
  • Filed under: Buttons, Design, No License
  • 2 Comments
  • HTML5Rocks is an online resource by Google that regularly shares various resources on HTML5 and CSS3.

    The site has very detailed tutorials that digg stuff like HTML5 video or @web-fonts which are good starting points on the subjects.

    HTML5Rocks

    An online playground with shortcuts to JS APIs + HTML-CSS properties helps trying new codes and seeing the outputs instantly.

    And there is HTML5 Studio, which is a showcase of HTML5 codes like page-flip, video player, carousel, geolocation and more that are open source. It is possible to get inspired from them or re-use them in our projects.

    Few days ago, a post at WRD was mentioning HTML5 Reset. And, here is a new option:

    HTML5 Boilerplate is a HTML/CSS/JS default template (starting point) which helps the website to-be-built work cross-browser, support HTML5-CSS3 and work fast.

    The template comes with various performance optimizations and optional features like cross-domain Ajax and Fash.

    HTML5 Boilerplate

    An .htaccess config file includes caching rules and prepares the website to serve HTML5 video, use @font-face, and enable gzip.

    It is also built with mobile browsers taken into consideration and has an iOS, Android, Opera Mobile-adaptable markup + CSS skeleton.

    HTML5 Boilerplate offers many other features like an optimal print stylesheet, a test suit for unit tests and much more.

    While starting a web project, we usually use a set of resources like CSS-reset, various JS hacks for IE, etc. to overcome browser incompability issues.

    HTML5 Reset is a project which aims to offer a base for the HTML5-CSS3 projects which covers these issues by default.

    HTML5 Reset

    Besides the standard HTML tags, it has rules to reset the new tags like title, header, footer and JavaScript-powered fixes for IE.

    The set comes in 2 versions:

    • Bare Bones (stripped down to the essentials)
    • Kitchen Sink (when we want the option to remove features, rather than add them)

    Inside the download package, there is also a sample content provided to help you get started.

    HTML5 video is great as it doesn't require any 3rd party plugins and works in most mobile browsers. However, it is not supported in every browser.. yet.

    Also, browsers supporting the <video><audio> tags require different codecs and have inconsistent player UIs.

    MediaElement.js

    MediaElement.js is a jQuery plugin which enables you to use the <video> tag with one H.264 file (you can also include OGG or WebM, but you don't have to).

    If the player doesn't support it, the plugin replaces the player with a Flash or Silverlight-powered one.

    There is also MediaElementPlayer.js for building a complete player that looks and functions the same in all browsers.

    Moovie is a free MooTools custom controls library for the HTML5 video element.

    It includes all the features of a player: play, pause, stop, a volume control which mimics the Youtube's control and progress bar.

    Moovie - MooTools HTML5 Video Player

    On initial load and when the video is paused, the player displays a "big play button" and a replay button at the end of the file.

    Moovie has playlist (for multiple videos) and captions support. And, with the help of a settings panel, it is possible to enable or disable various options such as looping, captions and auto-hiding of controls bar.

    P.S. The download can be currently found within the source of the demo.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com