Web development

How to Design User Interface for iPad Applications

by WebAppers on Mar.11, 2010, under Web development, WebAppers

Matt Legend Gemmell held a 6-hour workshop at NSConference in both the UK and USA recently, focusing on software design and user experience.

Predictably, an extremely popular topic was the iPad, and how to approach the design of iPad applications. He gave a 90-minute presentation on the subject to start each workshop, and he is very kind to share some of his observations of iPad Application Design.

This article is about the user interface conventions and considerations which apply to creating software for the iPad platform and touch-screen tablet devices in general. It is not a technical discussion of iPad-related APIs. This is an excellent article for designers and application developers. I am sure you will find it useful too.

Source: http://mattgemmell.com/2010/03/05/ipad-application-design

Sprite Animations With jQuery: Spritely

by WebResourcesDepot on Mar.11, 2010, under Web development, WebResourcesDepot

Spritely is a jQuery plugin for creating dynamic character & background animations using HTML + JavaScript.

With the power of JavaScript, the animations can be controlled on events (clicks, mouseovers) easily.

Animated elements can fly over the page without effecting any other element (can be ideal for floating-type banners) & the page still remains accessible.

Specially, for the platforms where Flash is not supported, Spritely can be an alternative (like iPhone, iPad).

It works in all major browsers including IE6.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Javascript, Sprite

Ext JS 3.2 beta: stores, components, transitions, and themes

by Ajaxian on Mar.11, 2010, under Ajaxian.com, Web development

The Ext JS team have announced the 3.2 beta which includes new components and goodness.

Take the animated DataView transitions for example:

On top of that, the release includes:

Multiple sorting and filtering on Ext.data.Store
Composite Fields
Slider improvements
Toolbar plugins: ToolbarReorderer and ToolbarDroppable
New Accessibility Theme: compliant with Section 508 of the Disabilities Act.
Quality Assurance: Unit Testing: over 180 bug fixes and enhancements over 3.1

Comments Off more...

Weebly Announces $13,000 Prized Theme Design Contest

by WebResourcesDepot on Mar.10, 2010, under Web development, WebResourcesDepot

Weebly, a very easy-to-use, popular & web-based website-builder service has just opened its theme gallery to all designers.

And, to celebrate this, they launched a design contest with $13,000 in prizes which the entries will be judged by well-known designers:

Michael Cronan (acknowledged with the naming and identities of Tivo and Verio and naming the Amazon Kindle)
Scott Thomas (former design director of Obama for America)
Jason Putorti (former lead designer of Mint.com)
Andrew Wilkinson (Founder, MetaLab)
Dustin Curtis
Rob Martin

Prizes are $10,000 for the winner, $2000 for the 2nd & $1000 for the 3rd position.

Creating a theme for Weebly is very easy as you don't have to worry for the HTML-CSS. Just focus on the creativity, design a layered PSD & Weebly team will convert it for you.

If the design created is not one of the winners, it may still be added to the themes database by Weebly & designers will be credited.

Deadline for submitting designs is April 30th, 2010 & it is open to everyone.

To read more and join the contest, check the contest page.

P.S. This post is a sponsored review.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Competition, Site Builder, Weebly

CSS3 Please! Instant results… Thank You

by Ajaxian on Mar.10, 2010, under Ajaxian.com, Web development

css3please

Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly.

CSS3, Please! lets you play with fancy new rules such as:

border-radius
box shadow
gradients
rgba support in backgrounds
transforms
font-face

Really nice way to make tweaks inline in the page….. nicely done. Hope to see some other examples out there :)

Comments Off more...

HTML Minification

by Ajaxian on Mar.10, 2010, under Ajaxian.com, Web development

Good old Kangax has been playing with HTML minification and has shared his new tool in an early stage.

What does it do?

Kangax has forked John Resig’s HTML parser which parses the HTML and sends that into the Minifier. This has rules that do things like whitespace optimization, comment removal, and collapsing boolean attributes (e.g. disabled=”true” -> disabled).

He also has a linter going:

While working on minifier, I realized that oftentimes the most wasteful part of the markup is not white space, comments or boolean attributes, but inline styles, scripts, presentational or deprecated elements and attributes. None of these can be simply stripped, as that could affect state of the document and is just too obtrusive. What can be done, however, is reporting of these occurences to the user. HTMLLint is even a smaller script, whose job is exactly that—to log any deprecated or presentational elements/attributes encountered during parsing. Additionally, it detects event attributes (e.g. onclick, onmouseover, etc.). The rationale for this is that moving contents of event attributes to external script allows to take advantage of resource caching.

Comments Off more...

Harmony: Canvas Drawing Tool

by Ajaxian on Mar.10, 2010, under Ajaxian.com, Web development

Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.

Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = ‘darker’. This was on the HTML5 spec before but got removed. Just so you know what I’m talking about, this is like the “multiply” blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

You can also save images using data URI encoding.

As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.

(Thanks FND)

Comments Off more...

GameQuery Makes Javascript Game Development Easier

by WebAppers on Mar.10, 2010, under Web development, WebAppers

gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. gameQuery has the following features: multi layer-sprite animations, sprite hierarchies, collision detection, swappable sound support, periodic callbacks and keyboard state polling.

Javascript games are still in their infancy but but there is many reason why they are more than a curiosity: Modern borwser provide very good javascript engine and impovement keeps comming. Then to develope javascript games you don’t need an expensive proprietray IDE, widly available, free, open source software are there wating for you! Sometimes Flash is not available in some platform, even very recent ones (Wii, iPhone …).

Requirements: jQuery Framework
Demo: http://gamequery.onaluf.org/demos.php
License: MIT License

CSS3, Please! – The Cross-Browser CSS3 Rule Generator

by WebResourcesDepot on Mar.10, 2010, under Web development, WebResourcesDepot

CSS3, Please! is a web-based & simple-yet-effective cross-browser CSS3 rules generator.

As every browser may require different prefixes for the CSS3 properties, this tool makes it so easy by providing them all with an editable & well-commented way where the output can be seen instantly.

Currently, it helps you write the rules for: border-radius, box-shadow, linear-gradients, rotation & @font-face. Some other transforms like skew & scale will be added soon.

For some transforms, that Internet Explorer can support via IE filters, they are mentioned too.