Category Archives: HTML5

Translate C# WPF Applications to HTLM5 with WPF.polymer Part III – UHU the C# to JS Compiler

Hi,

some people asked me for the cross compiler and the next steps. Unfortunately, I don’t have the time to fully elaborate on all the details so this is a work in progress post. I’ll try to make some updates and comments to this post when I find the time. If you are interested in a particular thing leave a comment so that I can address it first.

Roslyn

The C# to JS cross compiler is written in C# and is using Roslyn:

The .NET Compiler Platform (“Roslyn”) provides open-source C# and Visual Basic compilers with rich code analysis APIs

A lot of things have changed since my early tests with Roslyn one year ago: Roslyn is now a very popular and focused project. This also means that a lot of things have changed in the Roslyn code. Please have this in mind when using the code listings that are provided here.

The goal of the Roslyn project is to provide an API to the C# compiler pipeline.

compiler-api-lang-svc
Source
Continue reading Translate C# WPF Applications to HTLM5 with WPF.polymer Part III – UHU the C# to JS Compiler

Translate C# WPF Applications To HTML5 with WPF.Polymer Part I – The GUI

Hi everyone,

I will show you in this post a concept of how to turn arbitrary desktop software that was written for example in C#/WPF into HTML5 cross platform solutions, with the help of new HTML5 features like Web Components. Or in other words, the next generation of hybrid software.

But before we jump into the details, I will provide some background information, why this technique can save you as developer a lot of time and your company tons of money:

Continue reading Translate C# WPF Applications To HTML5 with WPF.Polymer Part I – The GUI

Make a fancy animated HTML5 Logo for your WordPress with pure JS (3/3)

Welcome to the last part of this series on how to create an animated HTML5 logo for your blog.
Hopefully you’ve finished your animated logo and are now ready to integrate it into your WordPress blog. (You should have finished it – you had half a year to do so 😉 )
This post will be on

  • how to improve the stability of our code
  • some cross browser considerations
  • we will introduce a multi purpose animator class

and finally go live with our logo!

Continue reading Make a fancy animated HTML5 Logo for your WordPress with pure JS (3/3)

Make a fancy animated HTML5 Logo for your WordPress with pure JS (2/3)

Today is all about animations. In simple terms, animation is movement over time.
However, we won’t change multiple images over time as it is known from the cartoon, but animate parts of one entity on the canvas.
Tha basis for this will be the stickman (or our own logo) which we created in part I of this series.

What we need right now is:

  1. a movement specification – which parts are animated and in which way
  2. a time interval – how long will the animation run
  3. the animation speed –  how much movement do we want to have in one timeframe

Continue reading Make a fancy animated HTML5 Logo for your WordPress with pure JS (2/3)

Make a fancy animated HTML5 Logo for your WordPress with pure JS (1/3)

I was very inspired by the amazing Google Doodles and decided to create my own animated HTML5 logo. There is an older post on how Google creates its Doodles on HTML5 Rocks: http://www.html5rocks.com/en/tutorials/doodles/lem/
In this post, Marcin Wichary explains some really helpful and advanced animation concepts and if you are interested in this stuff you should definitely read it. Unfortunately, I discovered this post just, when I had finished my own series. You will see that even the complexity of my “stupid” stickman logo is incredible. The Stanislaw Lem Doodle e.g. has 17,000(!) lines of JavaScript code and its own engine! Anyways..

This will be a beginners series about animating the WordPress header/logo. I will try to keep it simple but informative.
One thing in advance: please use the described techniques carefully and ensure that visitors are not annoyed (I’m not a good example – I don’t care about my visitors 😉 )

We will not use jQuery or any other framework. Everything will be written in pure JavaScript. The only HTML we will produce is a HTML5 canvas tag. It should be no problem, if you’re not familiar with canvas and HTML5 technologies. However, if you do not know much about it, I promise that there is a lot you can learn in this series. The template for this series is the current standard WordPress theme which is “Twenty Thirteen” and my own (super creative) stickman logo.

List of contents:

I – Scaffolding & HTML5 Canvas Logo
a) Create a local Page Dummy
b) Dynamic Creation of the Canvas
c) Draw to Canvas (from graphics editor to code)
d) Overlay the Logo and make Adjustments

II – Animations: The Stickman comes to Live
e) Animation Now and Then
f) A simple Animation
g) Time Controlled Animations

III
h) Make it responsive
i)  Make it cross browser
j) OO
k) Going live: WordPress Integration

Continue reading Make a fancy animated HTML5 Logo for your WordPress with pure JS (1/3)