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

Posts Tagged ‘HTML5’

Today's internet speed and how fast the websites/apps work have almost removed "the need to wait for something to load".

On the contrary, there are still cases that a web user has to wait and it is always a good idea to visualize the process with an attractive loader.

Percentage Loader

Percentage Loader is a jQuery plugin which makes use of HTML5 canvas (no images) for creating a very good looking loader.

The loader is only 10kb (minified), can also be used as a drag 'n' drop supported controller (like a circular volume button) and multiple instances of it can be displayed in the same page.

Nitro is a simple, good looking, free and open source task management application to get things done.

It comes in multiple versions where all of them are free:

  • hosted
  • Chrome web app
  • open source web app
  • Linux and Ubuntu desktop packages

The open source web app is makes use of modern web technologies, doesn't require any server-side setup and built with only HTML, CSS + JS.

Nitro

Once downloaded, it is ready-to-use by simply loading the index.html file and any actions made are stored using HTML5 localstorage. There is an option for syncing data with Dropbox or Ubuntu One.

Nitro allows us to add tasks, write notes to the tasks and define due dates for them. For any tasks with sub-tasks, there is "lists"feature.

The app is multilingual (there is already support for several languages) and it is themable.

There are many web-based apps for designing + editing images and, day-by-day, they are becoming a serious alternative to any desktop image editing softwares.

On the other hand, it is hard to find "animated GIF support" in any of them and creating animated GIFs without a desktop app can be a pain.

Online Animated GIF Creator

MotherEffingAnimatedGIF is a very simple-yet-functional and open source web application for quickly creating such images online.

You just drag 'n' drop any number of images to the app, re-order or rotate them, set the image size + quality and the delay between each frame.

After that, it is possible to preview the animated GIF and download the output.

Redactor is a JavaScript-powered (jQuery) WYSIWYG editor with a clean and good-looking interface.

It auto-converts textarea fields into an editor and the editor is capable of all the major actions (text-styling, adding image/file/video/tables/lists).

The uploading of files and images makes use of HTML5 APIs and they can be uploaded via drag 'n' drops besides selecting files.

Redactor - jQuery WYSIWYG Editor

Redactor can work inline or fullscreen, there are many settings to customize it and it is multilingual (already supports many languages).

P.S. The website of the resource is half English and half Russian but it is coded in English and demos + docs help understanding how it works.

WYSIHTML5 is an open source rich text editor, developed by Xing, that produces non-bloated, valid HTML5 code.

The editor doesn't rely on any JS framework,  it is lightweight and loads/works pretty fast.

It transforms textarea fields and provides the major stuff including text styles (bold, italic), lists, headers, inserting images or links and coloring the text.

WYSIHTML5

There is speech-input (which is only displayed in Chrome) and HTML source code can be viewed with a click.

WYSIHTML5 speeds up the writing process by auto-linking the URLs and offers a secure usage by using sandboxed iframes in order to prevent identity theft through XSS.

Image galleries are part of almost any website around whether it is about displaying the portfolio, products or personal albums,we simply use them a lot.

Juicebox Lite is a free-to-use (branded) and HTML5-powered image gallery for creating good-looking galleries very easily.

Galleries build with it works everywhere; desktop, tablet or mobile and handles different screen sizes well (responsive).

Juicebox Lite

Images can be browsed either with keyboard, mouse or touch (swipes) and they can be viewed in full-screen.

There is an -optional- control bar which is shown on hover and allows us to view/hide thumbnails, switch to full-screen mode or load only the image file displayed.

Juicebox Lite has a unique feature: a cross-platform (Adobe AIR-based) desktop gallery builder.

The "Builder" is perfect for creating the galleries with no coding. Drag 'n' drop the files to it, thumbnails are automatically created, preview your gallery and the HTML-CSS-JS is generated instantly. Afterwards, if you wish, you can manipulate the code.

Juicebox Builder Lite

That's not all. Besides displaying local images, it can use Flickr as the source too. Just define the Flickr user and tags you want and you get a Flickr gallery.

P.S. There is also a "Pro" Juicebox version which is not branded and comes with more configuration options, support for audio/uto-play/watermarking/unlimişted images and a JavaScript API to control the gallery as you wish.

There are lots of jQuery plugins around that handle specific tasks and, for JavaScript-heavy apps, we may end up in using many of them.

Working with such many different resources at the same project is sometimes hard and can be time consuming as they all have their way of coding, different APIs, styling support…

Infragistics jQuery Controls

Infragistics, a creative company focused on building user interface development tools, has a professional and complete jQuery Toolset that solves many JavaScript-related tasks beautifully.

The toolset is HTML5-powered and works cross-browser/platform with support for mobile + all of them are optimized for high performance.

 

What is inside?


Charts

Infragistics Charts

First of all, it has a full-featured charting library with support for 15+ chart types (pie, bar, line, area, bubble, radial) where they can be used side-by-side too.

Charts are interactive, they can respond to events like hover or click and can be zoomed to better see a specific range.

Read the rest of this entry »

When working on a new web project, during the HTML coding process, using Lorem Ipsum as filler content is a common approach (yet, there great Lorem Ipsum alternatives).

Fixie.js is a simple JavaScript library (with no JS framework dependencies) that automatically analyzes your semantic HTML5 tags and adds the right type of content inside the related elements.

It is not limited to simple text but can also add links, sections and images. Just add the fixie class to the element you wish and the matching dummy content will be displayed there.

Fixie.js

minjs is a collection of independent components, built on jQuery, that aims to accomplish a specific job with lightweight code.

Currently, there are 3 components: minform, longtable and dtcal.

minjs

minform brings cross-browser compatibility to HTML5 form enhancements (for attributes: placeholder, required and autofocus).

longtable is for easily navigating through tables with many rows. It adds a pagination and offers functions to directly viewing any given page.

And, drcal, a simple calendar framework that looks and behaves how you wish. There are several functions for interacting with it.

The purpose of this tutorial is to show how to create a realtime location aware visitor tracker for a web site or application.

When a visitor navigates to the page on your site, or accesses your mobile web app, the visitor tracker will display the new visitor hit in realtime, displaying the page they've landed on and where each visitor is on a Google map (lat/long and locality). For the purposes of the tutorial, we'll write our server code in PHP, but you could use any server side language you like.

Here is how the end result will look like:

Realtime Vistor Tracker using Pusher

Realitme Visitor Tracker Demo

For the realtime functionality we'll use Pusher, who I work for. Pusher is a hosted service for quickly and easily adding realtime features into web and mobile applications. The service is used for all sorts of features such as notifications, game movements, chat, live data feeds and much more, so it fits the bill nicely here too. We'll be using the Pusher JavaScript API and the Pusher PHP Library.

Here's the order in which we'll cover things:

  1. Get the basics out of the way
  2. Connect to Pusher
  3. Subscribe to new visitor page hits notifications
  4. Get the visitor's location using the HTML5 Geolocation API
  5. Broadcast the visitor location and page to all application visitors using Pusher
  6. Display the visitor location and page information on a Google map

Read the rest of this entry »

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com