Browsing articles from "February, 2009"
Feb
28

Developing Applications for Palm webOS

By admin  //  Dev, Palm, SDK, WebKit  //  No Comments

The Developing Applications for webOS webcast is now available from O’Reilly.
Mitch Allen, Palm’s Software CTO, gives a preview into application development with the Mojo SDK, explaining the structure of webOS, and demonstrates how to build a simple app with using TextMate and Safari on Mac.

According to the Webcast, the Mojo framework is based on Prototype 1.6.3 is bundled with webOS. (Pssst. the rumor said it also uses Dojo and mootools! sounds pretty heavy. If it is true, this should be rather called Moojo). And apps can be written with simple html, css and javaScript just like any web development, also with HTML5 local db strage and Mojo extension for widget, with a special x-mojo-element attribute.

The SDK will come with Mojo framework and doc, an emulator with DOM inspector and JS debugger (I guess we can just use Webkit), and tool bundles including project generator and package tools.

Also, the first chapter of the book, Palm webOS: Developing Applications in JavaScript Using the Palm Mojo Framework” by O’Reilly is available at http://developer.palm.com. You can read it either html or download pdf.

Links:

Feb
18

Using Keyframes – WebKit CSS Animation Examples

By admin  //  CSS, Dev, iPhone, Sandbox, WebKit  //  11 Comments

Now WebKit supports explicit CSS animations! After seeing the new animation examples posted on WebKit.org, I needed to test keyframes by myself.
So I have created a dumb-downed version of the fallen leaves seen on webkit.org blog, called “Let it Snow”.

Unlike the fallen leaves example, I stick strictly with CSS only (means zero JavaScript). Also I tested on Webkit nightly and an iPhone (OS 2.0) Safari. On my iPhone (Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5G77 Safari/525.20), the animation is slow and some feature is ingored.

Well, let’s see the “Let It Snow” animation in action!

How to use Keyframes?

Keyframes are specified with the CSS “At-Rule” by using the keyword,@-webkit-keyframes, followed by an identifier (= animation-name)

	
@-webkit-keyframes animation-name {
 from {
   style definition ["Before"-state]
 }
 to {
   style definition ["After"-state]
 }
}

A keyframe defines the styles applied within the animation. To specify multiple frames, use “%” instead of “from” and “to” keywords.
Here’s an actual example I used for “Let it Snow”.

	
@-webkit-keyframes fade {
  0%   { opacity: 0; }
  10%  { opacity: 0.8; }
  100% { opacity: 0; }
}

This style is applie to create each snow flake appearance. A snowflake blurry appears (increase opacity) when 10% of the time elapsed (The total time is defined later. I’ll explain it next).
And at the end, the snowflake disappears (opacity back to zero).

Once the animation timeframe is defined, apply it using -webkit-animation-name and related properties.
I set total animation duration as 5 seconds, and the animatin goes forever (= infinite times. The default is 1).
See the simplified example below.

	
#snow div {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}
	

	
<div id="snow" class="snow">
  <div>&#10053;</div> /* an entity for ❅ */
</div>

Using Transform

Let’s rotate and move around snowflakes by using -webkit-transform.
rotate, of course, rotate the element, and translate specifies a 2D translation by the vector [tx, ty]. (For more explanations, please see CSS transform spec page).
I used percent, 0 and 100% here, but of course you can use “from” and “to”.
Also note that transform doesn’t seem to work on current iPhone Safari yet.

	
@-webkit-keyframes spin{
  0%   { -webkit-transform: rotate(-180deg) translate(0px, 0px);}
  100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}
}

You can just add the amination-name to the #snow div selector, separating with comma.

	
#snow div {
  -webkit-animation-name: fade, spin;
  ...
}

More

For the “Let it snow” example, I also include the cheesy “accumulate” keyframe to make snow accumulate on ground. Kinda ugly though.
Moreover, I gave the -webkit-animation-duration to individual snowflake so all flakes don’t fall all together! 

	
.snowflake {
  color: #fff;
  font-size: 2em;
  position: absolute; (Note: The parent container is set relative positioned!)
}
.snowflake.f1 {
  left: 40px;
  -webkit-animation-duration: 5s;
}
.snowflake.f2 {
  font-size: 1.8em;
  left: 120px;
  -webkit-animation-duration: 7s;
}
...
	

	
<div id="snow" class="snow">
  <div class="snowflake f1">&#10053;</div> /* an entity for ❅ */
  <div class="snowflake f2">&#10052;</div> /* an entity for ❄ */
  ... (add two more snowflake-div in the actual sample)
</div>

To view the entire markup and CSS, just view source of the sample file!


Resources:

Feb
17

Tried Fennec Milestone Release for Windows Mobile

By admin  //  Dev, Firefox, WinMo  //  2 Comments

Last week, Mozilla has released the early version of Firefox Mobile, “Fennec” for Windows Mobile (pre-alpha).
Just like the earlier release was only for VGA Nokia devices like N800, this WinMo-release targets only one device, HTC Touch Pro.

Unfortunately I could not borrow an actual HTC “Fuze” (AT&T version of Touch Pro), so I tested via DeviceAnywhere service.

Just typed in the Mozilla’s ftp address directly on PIE (I have no reasons why I didn’t use the default Opera Mobile), downloading and installing was fine (Pic.1).
I got a pretty Fennec icon on screen. Nice. But I hope Mozilla will make it less jaggy for the next release. (Pic.2)
Clicked the icon and wait, wait, wait… pretty slow. When I almost lost my patience, the browser finally launched… its title bar. Let’s wait for more. -nothing happened.
Quit and relaunched. – the same result.
Re-installed. – the same result. (Pic.3)

1 of 3 - Fennec 'Milestone Release' for HTC Touch Pro
Pic.1 – Installing Fennec		 2 of 3 - Fennec 'Milestone Release' for HTC Touch Pro
Pic.2 – Fennec icon
3 of 3 - Fennec 'Milestone Release' for HTC Touch Pro
Pic.3 – WTF

Conclusion: Somebody please help me. I can’t make it work!!!

Links: