Feeds:
Posts
Comments

Archive for the ‘HTML’ Category

DDD North 2013: Using HTML5 to Build Desktop Software – Kevin Boyle

Posted in C#, CSS, HTML on January 21, 2014| Leave a Comment »

Last year, I attended DDD North. There were a number of interesting talks and I keep meaning to quickly summarise a few of them.

I’ll start with Kevin Boyle’s presentation on using HTML5 to Build Desktop Software.

A growing number of software producers are now using HTML5 and CSS as the UI layer for their desktop applications. Notable examples include Adobe Brackets and Dropbox.

The most obvious way to harness HTML, is simply to embed a web browser control. Unfortunately, this gives the developer no control over the browser used to render the page. Instead, it will depend on the user’s personal setup. This means that you would need to support multiple browsers.

The Chromium Embedded Framework (CEF) offers a potential solution to this problem. CEF is an open source project founded by Marshall Greenblatt in 2008 to develop a Web browser control based on the Google Chromium project. Essentially, the open source core of the Chrome web browser is repackaged as a library to enable you to include it in your own product. This means that if you use Chromium Embedded as your UI layer, a user does not need to have Chrome installed.

CEF supports a range of operating systems and programming languages.

If you are programming in .NET, you will need to install the CefSharp Nuget package. This provides the .NET bindings to CEF. Versions of this package are available for both Windows Forms and WCF applications.

Advantages of this approach include:

  • The ability to reuse the same view for your desktop and web applications.
  • HTML 5 and CSS have a far larger user base. Designers don’t have to ask a developer to change the styling.
  • A vaster toolset and better availability of third-party libraries.
  • Design time data.

Caveats: There is no Microsoft support for CEF. It is still fairly raw. CEF is written in C and C++, and you may find yourself needing to delve into the C++ code in order to fix problems.

CEF cannot be used for mobile applications. However, it takes a similar approach to PhoneGap or Cordova, so you could probably use these to target mobile devices.

Advertisement

Read Full Post »

Kalei Styleguide

Posted in CSS, HTML, Tools on July 9, 2013| Leave a Comment »

This post continues on the theme of CSS documentation and the automatic generation of Style Guides. I have finally got around to taking a look at Kalei Styleguide.

Kalei is a tool developed by Thomas Davis, Luke Brooker and Richard Barret. It generates bootstrap-like documentation for your CSS:

Kalei1

 

Kalei has an advantage over StyleDocco in that it does not require a build step. Instead it runs on an HTTP server and documentation is generated on the fly.

The steps I followed to get it working were quite straightforward:

  • If you don’t already have a Git client, you can download and install one from http://git-scm.com
  • The next step is to clone the git repository git://github.com/thomasdavis/kaleistyleguide.git.
  • Now you need to serve Kalei on an HTTP server. I set up a Kalei website in IIS. Help desk geek has some instructions for how to Install and Setup a Website in IIS8 on Windows 8. You may also need to edit the permissions of the folder in which you have placed Kalei in order to access it.
  • Finally, I edited edit js/config.js to point at my own styles.css

I then opened the website in a browser and started playing around with editing my stylesheet.

Taking inspiration from StyleDocco, Kalei also uses markdown syntax for creating the content. However, the lack of a build step makes Kalei a much nicer tool to work with. You can simply edit your CSS files and directly refresh your browser to view the changes. I can see this speeding up my development time massively, and it takes any hassle out of using the tool. It also ensures that the Style Guide truly is a living style guide, and will never get out of sync with your CSS files.

Kalei produces a menu of headings on the left hand side of the web page. This is a helpful touch and enables you to quickly navigate to the stylesheet or section in which you are interested.

Like StyleDocco, the main part of the page contains the actual example elements and HTML required to generate them. It does not, however, show the associated CSS markup. I didn’t find I particularly missed this though, as it makes for a cleaner UI.

My overall initial impression of StyleDocco is very favourable, and I look forward to using it in more earnest.

Read Full Post »