But if what I am saying is right, then why hasn’t this all come true yet? The reasons are many, some minor and easily overcome, and some not so much. Let’s start with an explanation of what HTML5 and JavaScript advancements are already doing in the mobile world.

HTML5 is the new HTML standard.

Major enhancements such as the <“video”> tag, CSS3 animations and better JavaScript support are what have made HTML5 such a hot topic. With the power of HTML5, web developers and programmers can write software in a cross-platform language and save significant time and effort.

HTML 5 Development Platforms

Some companies, such as Sencha who developed Sencha Touch, and Prism Technologies who developed PhoneGap, have created mobile development platforms that reach from Android and iOS all the way back to Blackberry and Windows Phone 7. The reason these platforms are so flexible is because they utilizes HTML5, advanced JavaScript and CSS3 to replicate a native app using a web browser.

I’ve had experience using Sencha Touch and PhoneGap (PhoneGap makes it easy for users to load HTML5 libraries into a native app “wrapper”, which can access hardware-specific functions such as the camera and accelerometer, for distribution on an app market) and have found that while it is very useful while building information and text driven applications, it is not very effective in creating graphically intense applications such as ones with photo galleries, interactive menus, or games. This leads me to why HTML5 has its limits in the mobile world today.

Mobile Browsers

Each mobile OS has a browser that is used to generate the HTML5 application. The problem is that not every browser was created equal, especially when it comes to HTML5 support. When looking at HTML5 on an iOS devices such as an iPhone 4s, HTML5 is very responsive and smooth.

This is not so true with Android and Blackberry. Although Android has good support for most of HTML5, it has many “artifacts” or poorly handled graphical renderings that make it slower, less attractive, and overall less responsive than its iOS counterpart. This is the main reason development of HTML5 has not surpassed development of native applications to date. There are a few other limitations to HTML5 such as hardware support when accessing components like the camera or file systems, but HTML5 hopes to circumvent that soon with future standards.

The conclusion is that HTML5, while being very powerful and flexible when used with JavaScript and CSS3, is not yet a suitable replacement for native development and therefore one must first consider the goal of the said application before deciding to proceed with development in HTML5 or native environments.

But don’t forget, according to Strategy Analytics, more than 1 billion HTML5 supported phones will be sold worldwide by 2013. Read more here.

You can read more about mobile HTML5 support here.

The post HTML5 and the Future of Mobile Apps and Gaming first appeared on Techerator.

HTML5/JS frameworks are beginning to pop up as viable development environments for the entire range of web-based applications, from desktop to mobile. Here are four HTML5/JS tools that will turbocharge your apps and keep you savvy with this new trend in development.

1. Yahoo! Cocktails

Yahoo recently announced its newest mix of HTML5, CSS3, and JavaScript tools, and believe it or not, Yahoo still knows how to bring decent services to the table. Cocktails brings existing Yahoo! services like YQL and YUI together with HTML5/JavaScript tools for rapid multi-device and multi-platform development. The most impressive aspect of Cocktails is its integration with Yahoo!’s Mojito, which allows JavaScript functionality for your apps even if the device has JavaScript disabled by running scripts on the server side. Yahoo! isn’t dead yet!

2.  SproutCore

SproutCore is an open-source set of tools built using MVC (model-view-controller) architecture for creating universally accessible, scalable, and speeding applications. The team that created SproutCore offers many easy-to-follow guides for beginners, and the well-established community of developers make troubleshooting relatively pain-free. Of the frameworks I’ve encountered, SproutCore is the most polished…and it doesn’t hurt that it’s free.

3. LimeJS

If your forte is creating web-based games, LimeJS is a framework for rapid development of native-experience touchscreen apps for mobile devices or desktop browsers. This simple but flexible tool set is free to download and takes the headaches out of creating rich cross-platform user experiences with standardized code and solid community support.

4. Sencha

The only non-free framework on this list, Sencha is meant for industrial strength app development. Sencha offers an array of tools like a visual designer, rich spreadsheet support, CSS3 animator, and skinning to put a unique look and feel to your application. The Sencha API allows for rapid development for touchscreens or standard desktops, and while it isn’t free to download, Sencha provides professional support and training for its customers. User interface, app functionality, and data connectivity — Sencha does it all.

Conclusion

Will HTML5/JavaScript bring about the downfall .NET/WPF app development? Not anytime soon. But if you’re looking to bring your application to as many users and devices as possible, HTML5/JS is your ticket to fame. These frameworks will get your started, and if you have a favorite not listed here (there are many), please leave it in the comments.

The post Four HTML5 and JavaScript Frameworks To Jump-start Your App Development first appeared on Techerator.

Or do they?

While basic HTML is fairly easy to learn, there are a lot of people who use that skill only occasionally. And, anyway, knowing even a bit of HTML is overkill for most purposes. So, what’s the alternative? Why not take a shortcut and use Markdown instead?

Markdown: The Basics

Markdown is a simple language for formatting text that was created by John Gruber and Aaron Swartz. The goal was to create something that is easy to use and remember, and which can be quickly converted to HTML.

Specify all formatting using keyboard symbols, rather than tags surrounded by angle brackets (as you would in HTML). The formatting you can use is quite basic — mainly headings, lists, links, quotes, as well as bold and italic text — but it’s more than enough for most purposes.

To format something as a heading, for example, put anywhere from one to six hash signs (#) in front of the text. Format the title of your document like this:

[code lang=”plain”]
# My Title
[/code]

For a bullet list, put an asterisk (*) followed by a space in front of each item in the list:

[code lang=”plain”]
* List item
* Another list item
* Last list item
[/code]

If you’re interested in learning Markdown’s syntax, check out this reference.

Remember that Markdown is a plain text format. You create files in a text editor like Emacs, Vim, BBEdit, Gedit, or even Notepad. That makes whatever you’re writing very portable and timeless. Plain text never goes out of style.

Converting Markdown to HTML

There are a number of tools for doing this. If you’re not afraid of the command line and have Perl installed on your computer, you can use the conversion script found here. Or you can download and compile Discount.

In either case, to convert a document formatted with Markdown to HTML, open a terminal or command line window, navigate to the directory containing the document you want to convert and then type the following command:

[code lang=”shell”]
markdown myfile.text > myfile.html
[/code]

Here are the results of a conversion:

Or, if you prefer, you can use an online converter like this one. Just copy and paste your Markdown-formatted document from a text editor into the converter, click a button, and you get HTML almost instantly.

There are a number of other converters available, too. You can find a list of them here.

Final thoughts

Markdown is a great solution for anyone who needs to quickly generate web-ready files. The formatting is easy to learn, and it’s efficient — you use keyboard symbols, which anyone can type. If your web publishing needs are simple, then Markdown is a great option.

Photo credit: Tysto

The post Getting to Know Markdown first appeared on Techerator.

For example, I could create a list of colors that would display the color’s name in the select box, but would then correspond to a hexadecimal value in the background:

[code lang=”xml” title=”HTML Select Example”]

<select>

<option value="#FF0000">Red</option>
<option value="#008000">Green</option>
<option value="#0000FF">Blue</option>

</select>

[/code]

Which looks like:

If the user selected “Green”, it would show up as “#008000” behind the scenes.

This type of control is known as a ComboBox in WPF and C# and has similar functionality, but by default you can’t store Name –> Value pairs in them like you can in HTML. In this guide, I’ll show you some simple code you can use to recreate this functionality.

Creating HTML-style ComboBox in WPF and C#

For this example, I wanted to create a drop-down menu for selecting the Parity value of a serial port connection. Parity is an enumeration in C# and has values like Parity.None, Parity.Even, and Parity.Odd, but I wanted to display just “None”, “Even”, and “Odd” to the user.

The first thing I did was to create a custom class that expands the functionality of the standard ComboBoxItem. This class will store the pretty front-facing name in a string called “contents” and store the data value in an object called “tag”.

If you’re familiar with ComboBoxItems, you’ll know that they already offer Content and Tag properties. These properties don’t function the same way they do in HTML, so I found it best to create my own custom class.

[code lang=”csharp” title=”CustomComboBoxItem.cs”]

// Contains the visible "Name" of the item.
private string _contents;
public string contents { get { return _contents; } set { _contents = value; } }

// Contains the hidden "Value" of the item.
private object _tag;
public object tag { get { return _tag; } set { _tag = value; } }

public CustomComboBoxItem(string contents, object tag)
{
this._contents = contents;
this._tag = tag;
}

// Only the Name will be displayed when the string value is used
public override string ToString() { return _contents; }

[/code]

I created my ComboBox in WPF and created a Loaded event to programmatically populate the values.

[code lang=”csharp” title=”comboBox_Parity WPF”]

<ComboBox Name="comboBox_Parity" Loaded="comboBox_Parity_Loaded" />

[/code]

And then created the corresponding comboBox_Parity_Loaded function in my C#  file where I added the CustomComboBoxItem items to the ComboBox. You can see that the first value I give it is its front-facing name, and the second is the value of the Parity enumeration.

[code lang=”csharp” title=”comboBox_Parity_Loaded”]

private void comboBox_Parity_Loaded(object sender, RoutedEventArgs e)
{
// Add the options with my custom class CustomComboBoxItem. This allows me to store a unique "Name"=content and "Value"=tag for each item
comboBox_Parity.Items.Add(new CustomComboBoxItem("None", "Parity.None"));
comboBox_Parity.Items.Add(new CustomComboBoxItem("Even", "Parity.Even"));
comboBox_Parity.Items.Add(new CustomComboBoxItem("Odd", "Parity.Odd"));
comboBox_Parity.Items.Add(new CustomComboBoxItem("Mark", "Parity.Mark"));
comboBox_Parity.Items.Add(new CustomComboBoxItem("Space", "Parity.Space"));
}

[/code]

Compiling and executing this program shows my ComboBox filled with items called “None”, “Even”, and “Odd”, but its selected value now corresponds with “Parity.None”, “Parity.Even”, and “Parity.Odd”.

To access the back-end value of the user’s selection in your code (I was using it to change a hardware setting), you need to cast the SelectedItem property of the ComboBox as a CustomComboBoxItem.

[code lang=”csharp”]
// This takes whatever item is selected in the comboBox and stores it in a new item called item_Parity. This gives you access
// to the properties of the CustomComboBoxItem like .tag and .content.

CustomComboBoxItem item_Parity = (CustomComboBoxItem)this.comboBox_Parity.SelectedItem;

[/code]

To test it out, you can use the following code to write the item’s name and corresponding value to the console.

[code lang=”csharp” title=”Accessing internal values of CustomComboBoxItem”]

Console.WriteLine("Item’s name is: " + item_Parity.contents + " and Item’s value is: " + item_Parity.tag.ToString());

[/code]

That’s it! You should now have HTML-style ComboBoxes in WPF and C#.

The post How to Create a HTML-style ComboBox in WPF and C# first appeared on Techerator.