MPEG LA has recently announced that the royalties on streamed H.264 will be free forever, with one stipulation….if the videos you provide are free. So if you charge for videos or run video services, you will have to pay licensing fees and/or royalties. Fee’s are already assessed to encoders and decoders, which will not change.

What does that mean for say Wedding Cinematographers? This could mean that every H.264 video you burn to CD, you will need to pay license fees for.

The Android OS has finally gotten my attention and it does look extremely promising. I may try out some development on it and do some quick tutorial write ups.

You have all probably heard about HTML5 video by now. You’ve probably also heard the pros and cons of the using it. Rather than discussing that, I’ll blog a little about the supported file formats and the strict profiles of each format to get them to play correctly using HTML5 video.

First off, currently I am aware of 3 formats that are supported: MP4, OGG, and WebM

As we know, all browsers do not follow the same design guidelines. So certain browsers only support certain video formats for HTML5 video. Of course this can be bad because it requires 3 of the same video files in the different formats to support every browser. For those browsers that do not support HTML5 video, we can rely on a fallback flashplayer or silverlight player (e.g. Internet explorer, although IE9 when released will supposedly support HTML5 video).

Now that we have that out of the way. Why do the video’s not always work? The reason for this is the it’s encoded using the incorrect profile. This in turn does not allow it to render correctly for the end user in their browser. Your MP4, Ogg, or WebM may work on your computer locally, but streaming you may run into issues if it isn’t encoded with the correct settings.

MP4

With MP4, I personally use handbrake to encode the videos. Here are the steps I use to encode my videos.

1. Open the video file in Handbrake.
2. Select ipod
3. Change the video size to the correct size
4. Check “Keep Aspect Ratio”
   
5. Check “Web Optimized”
6. Under the video tab, select average bit rate and enter 600
7. check 2 pass encoding and turbo first pass
8. click start

OGG

There are 2 methods I have used for encoding Ogg video. The first is by using firefogg.org and the other is by using FFmpeg2Theroa.

Using firefogg

1. Install the plugin for firefox if you haven’t done so already.
2. Select your file
3. Expand basic quality and resolution control
4. set video quality to 5
5. check 2 pass encoding
6. set audio quality to 1
7. change resolution if necessary
8. then save ogg

Using FFMpeg2theroa

1. Download the ffmpeg2theroa
2. in the console type ffmpeg2theroa –videoquality 5 –audioquality 1 video.dv -o video.ogv

WebM

1. Launch firefogg
2. select your file
3. select webm web in the presets
4. set video quality to 5
5. check 2 pass encoding
6. set audio quality to 1
7. change resolution if necessary
8. then save webm

Well, I am no longer working on WebOS applications for fun, so I probably won’t be writing any other tutorials on it. On a side note, since the Android platform looks promising, I may fiddle with that a bit.

Definitely check out the ASP.NET 4.0 and Silverlight 4.0

ASP.NET 4.0

With ASP.NET 4, Web Forms controls now render clean, semantically correct, and CSS friendly HTML markup. Built-in URL routing functionality allows you to expose clean, search engine friendly, URLs and increase the traffic to your Website. ViewState within applications is smaller and can now be more easily controlled. And more controls, including rich charting and data controls, are now built-into ASP.NET 4 and enable you to build applications even faster.

Silverlight 4.
Silverlight 4 delivers a full suite of powerful capabilities to business application developers, bringing the best-of-breed .NET platform to browser-based experiences. Silverlight provides an ideal platform for developing and deploying modern business applications for both customer facing and staff-facing applications.
Business Application Development

Silverlight 4 consolidates its position as the natural choice for building business applications on the Web:
New Features for Application Developers

* Comprehensive printing support enabling hardcopy reports and documents as well as a virtual print view, independent of screen content.
* A full set of forms controls with over 60 customizable, styleable components. New controls include RichTextbox with hyperlinks, images, in-line controls, and editing. Enhanced controls include DataGrid with sortable/resizeable columns and copy/paste rows.
* WCF RIA Services introduces enterprise class networking and data access for building n-tier applications including transactions, paging of data, WCF and HTTP enhancements.
* Localization enhancements with Bi-Directional text, Right-to-Left support and complex scripts such as Arabic, Hebrew and 31 new languages including Vietnamese and Indic support.
* The .NET Common Runtime (CLR) now enables the same compiled code to be run on the desktop and Silverlight without change.
* Enhanced databinding support increases flexibility and productivity through data grouping/editing and string formatting within bindings.
* Managed Extensibility Framework supports building large composite applications.
* Exclusive tooling support for Silverlight, new in Visual Studio 2010. Including a full editable design surface, drag & drop data-binding, automatically bound controls, datasource selection, integration with Expression Blend styling resources, Silverlight project support and full IntelliSense.

Developer tools

* Fully editable design surface for drawing out controls and layouts.
* Rich property grid and new editors for values
* Drag and drop support for databinding and automatically creating bound controls such as listbox, datagrid. New datasources window and picker.
* Easy to pick styles and resources to make a good looking application based on designer resources built in Expression Blend.
* Built in project support for Silverlight applications
* Editor with full intellisense for XAML and C# and VB languages.

Empowering richer, more interactive experiences

Silverlight is already in use as a comprehensive platform for building rich experiences both for application and pure media scenarios including HD quality, interactive video through Smooth Streaming. Silverlight 4 introduces additional capabilities to enable creation of ever more rich, appealing high-performance interactive experiences and innovative media experiences:

* Fluid interface enhancements advance application usability through animation effects.
* Webcam and microphone to allow sharing of video and audio for instance for chat or customer service applications.
* Audio and video local recording capabilities capture RAW video without requiring server interaction, enabling a wide range of end-user interaction and communication scenarios for example video conferencing.
* Bring data in to your application with features such as copy and paste or drag and drop.
* Long lists can now be scrolled effortlessly with the mouse wheel.
* Support conventional desktop interaction models through new features such as right-click context menu.
* Support for Google’s Chrome browser.
* Performance optimizations mean Silverlight 4 applications start quicker and run 200% faster than the equivalent Silverlight 3 application.
* Multi-touch support enables a range of gestures and touch interactions to be integrated into user experiences.
* Multicast networking, enabling Enterprises to lower the cost of streaming broadcast events such as company meetings and training, interoperating seamlessly with existing Windows Media Server streaming infrastructure.
* Content protection for H.264 media through Silverlight DRM powered by PlayReady.
* Output protection for audio/video streams allowing content owners or distributors to ensure protected content is only viewed through a secure video connection.

Move beyond the browser

Silverlight 3 pioneered the delivery of a new class of Rich Internet Applications to work on the desktop without additional code or runtimes. Silverlight 4 extends this capability:
For Sandboxed applications

* Place HTML within your application enabling much tighter integration with content from web servers such as email, help and reports.
* Provide support for ‘toast’ notification windows, allowing applications to communicate status or change information while the user is working on another application through a popup window on the taskbar.
* Offline DRM, extending the existing Silverlight DRM powered by PlayReady technology to work offline. Protected content can be delivered with a persistent license so that users can go offline immediately and start enjoying their content.
* Control over aspects of UI include window settings such as start position, size and chrome.

For Trusted applications

* Read and write files to the user’s MyDocuments, MyMusic, MyPictures and MyVideos folder (or equivalent for non-windows platforms) for example storage of media files and taking local copies of reports.
* Run other desktop programs such as Office, for example requesting Outlook to send an email, send a report to Word or data to Excel.
* COM automation enables access to devices and other system capabilities by calling into application components; for instance to access a USB security card reader.
* A new user interface for requesting application privileges access outside the standard Silverlight sandbox.
* Group policy objects allow organizations to tailor which applications may have elevated trust.
* Full keyboard support in fullscreen mode richer kiosk and media applications.
* Enhancements to networking allow cross-domain access without a security policy file.
* Custom Window ‘chrome’ to provide a highly branded experience

If you are like me and would like to use multiple XAML’s in a Silverlight project here is how you can do it. Let’s say we have the following files and would like to load specific ones when the silverlight xap file is called in your web application.

Scene1.xaml + .cs
Scene2.xaml + .cs
Scene3.xaml + .cs
App.xaml + .cs

Now to start we open up App.xaml.cs and look for the Application_Startup function. Inside the function should be this.RootVisual = new Scene1(); or something similar depending on the Main Page when the Silverlight project was generated. You can replace it with the following.

if (e.InitParams.Count > 0)
{
if(e.InitParams["PageID"].ToString() == "Scene1")
this.RootVisual = new Scene1();
else if (e.InitParams["PageID"].ToString() == "Scene2")
this.RootVisual = new Scene2();
else if (e.InitParams["PageID"].ToString() == "Scene3")
this.RootVisual = new Scene3();
else
this.RootVisual = new Scene1();
}

Okay that setups the silverlight project to load a specific xaml file. Lets add a param tag to our object code to select which file should be played when the object tag is called. Open up your html file and add the following to your object code.

<param name="InitParams" value="PageID=2" />;

That will load page 2. You can also replace the value with a querystring return or anything else you like.

Congrats, that is all you needed to do to load up a specific xaml in a SL project.

After getting back into the Silverlight development some, I noticed that after installing Silverlight 3.0 I did not get the design view for the xaml page.
It took a little finding but if you mouse over the xaml panel at the bottom you will get a split view icon.
Drag this up and you should see the design view for Silverlight once again. You have to do this every time now…not sure why Microsoft did that, but it’s there.

Part 2

Scenes are comprised of views, which are located in the /app/views folder. You can create various views to display various data, buttons, options, etc.
Our first view we will create will be a menu screen which will contain buttons.

Open the tutorial 1 project we were previously working on.

First we will define our js source and out view scene. Open the sources.json file and modify the source to look like so the following:

[
    {
        "source": "app\/assistants\/stage-assistant.js"
    },
 
	{
		"source": "app\/assistants\/menu-assistant.js",
		"scenes": "menu"
	}
]

As you can see we are defining our javascript file as well as the scene (view) name. You can now close this file.
Our next task is to create a js to handle the functionality of the menu view state. Proceed to the app/assistants/ folder and create a new file called “menu-assistant.js”.
We will now shell out the basic requirements for the js file. Type in the following code to create an assistant template.

function MenuAssistant() {	
}
 
MenuAssistant.prototype.setup = function() {	
}
 
MenuAssistant.prototype.activate = function(event) {	
}
 
MenuAssistant.prototype.deactivate = function(event) {	
}
 
MenuAssistant.prototype.cleanup = function(event) {	
}

Now that we have our template we can now layout some of the features we want on our view. Proceed to the /app/views/ folder and create a folder called “menu”. In the menu folder create a file called “menu-scene.html”. Open the menu-scene.html file and type in the following to create a button and a info area that will trigger when the button is clicked.

<div x-mojo-element="Button" id="NewBtn"></div>
<div id="status"></div>

That will create our view and layout and standard button and a blank status area. You won’t be able to see anything yet since we haven’t define the button information. To define the button, we now go back to the menu-asssistant.js file and add the following code the the setup function:

this.controller.setupWidget('NewBtn',
		{},
		this.model = {
			buttonLabel: "Click Me",
			buttonClass: "primary",
			disabled: false
		}
	)

This will setup the button, define it’s name, define the palm class to use and have the button enabled. Now we need to give the button some functionality. Add the following just below the line of code we just added in the setup function.

Mojo.Event.listen($('NewBtn'), Mojo.Event.tap, this.handlerClick.bindAsEventListener(this))

This will tell the view to see if the user tapped the button we made and will fire the event handlerClick if it has been clicked. Now we will display a text to show that it was successfully clicked. Now we need to create a new function and display something. Add the following code to the js file.

MenuAssistant.prototype.handlerClick = function(event) {
	document.getElementById('status').innerHTML = "Button was clicked"
}

Congrats now you have a working view. If you package and install this you will actually not see the view until you push the scene. So open up the stage-assistant.js file and add the following to the setup function.

this.controller.pushScene('menu');

That’s it! Package it and install and you should now see the following when you press the button.

Welcome

Ah, so you have the Mojo SDK and want to know where to start. Well you landed in the right place.
The programming skills required for the WebOS is Javascript / HTML 5 / Cascading Style Sheets (CSS).

Ok, so lets get started.

First off there are 2 ways to create a blank template. 1st is by using the palm generate batch file that is part of the SDK.
You can generate a template to work with by typing:

    palm-generate tutorial1

Or by creating the application from Scratch.

Creating the application from Scratch

This portion of the tutorial will guide you through the process of creating the application from Scratch.
It is important to know the folder structure and required files to get the application to load correctly.
Listed below is the file and directory structure.

 - Tutorial1
       - app (folder, this contains the js code and the html scene views)
            - assistant (folder, this will contain all the js code to support your scene views)
                  - stage-assistant.js (file, this file is called to load the first scene of your application)
            - views (folder, this will contain all your html scene views)
       - images (folder, this contains all image assets that will be used for your application)
       - stylesheets (folder, this contains all the stylesheets that will be used for your application)
            - tutorial1.css
       - appinfo.json (file, this contains the information about your application)
       - index.html (file, the main html file. This loads up the javascript and stylesheet files.)
       - sources.json (file, this identifies where the sources are located)

The above structure is the basic requirements needed to create a WebOS application.
So lets go ahead and create the files and folders. The files should be blank at the moment.

Adding the basic code

First we will define the application.
Open up the appinfo.json file in any editor you like and add the following.

 {
     "id": "com.mfb.tutorial1" ,
     "version": "1.0.0",
     "vendor": "Mind Full Blog",
     "type": "web",
     "main": "index.html",
     "title": "Tutorial1",
     "icon": "icon.png"
}

The “id” tag defines the launching parameter for your application. It is required that you have 2 separators to identity your application. The separates used here is the period.
[COM].[company name].[application name]. The rest are pretty much self explanatory.

Okay now we will tell the application which javascript file(s) is required for this application. Open the sources.json file. Also note that javascript files defined here are globally accessible.

[
    {
        "source": "app\/assistants\/stage-assistant.js"
    }
]

Now we begin to build our main file. Open up the index.html file and add the following code.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Tutorial1</title>
	<script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo-version="1" />
 
	<link href="stylesheets/tutorial1.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
	<h2>Welcome to tutorial 1.</h2>
</body>
</html>

Now onto our last bit of code to get the application working. Open up the /app/assistants/stage-assistant.js file and add the following code.

function StageAssistant() {
}
 
StageAssistant.prototype.setup = function() {
}

We will leave the css file blank for now as it is not need at the moment. This is the basic template you need to develop any of your WebOS applications.

Now you can try the application by doing a build.

In the command prompt type

 palm-package tutorial1

This will create the IPK file needed to install the application to either the device or emulator.
To get this to install on the emulator (make sure it is running) we need to type the following

 palm-install com.mfb.tutorial1_1_0_0_all.ipk

You should now have the application installed. Launch the application from your quick launch menu.

Congrats you made your first webos application.

I have been focusing most of my time on some Palm Pre development. As you may know Silverlight 3 was released some time ago, I just recently updated my Silverlight sdk to 3.0 on my system and will be playing around with it some more when I get some free time. Also I may upload some Palm Pre development tutorials if my time allows me. With a baby on the way, free time has been pretty bleak.

There was I site a came across awhile back that I thought was pretty cool which is Silverlight VS Flash. Personally the Silverlight apps run cleaner than the flash. Since I am doing more crash platform (including mobile devices) I serious hope Microsoft will try to support mobile devices…Otherwise we may move away from the Silverlight development applications.