Since more and more people show interest for this topic/posts and I just discovered a question on Stackoverflow mentioning this blog there is no more room for excuses – I owe you a second part. So I will just start and see how far I can come this time…
Last time, I showed you that XAML which is rendered into beautiful UIs is just a XML dialect and that we can use this knowledge to transform it into another XML representation: (X)HTML.
There was just one problem: our browser does not know about any WPF tags but instead speaks div, span, etc… But with Polymer to the rescue we were able to teach our browser how to read, simulate and render XAML. This allowed us to reuse our existing Desktop UI and display it in a modern browser.
But this was just a cool side effect and not what we really wanted. I promised you more: write code once and run it everywhere (smartphone, web, mac, linux)
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:
It has been more than half a year, since I was accepted at MIT. After all the exams, the visa and scholarship application; after selling a complete household, my car, and being one month ‘homeless'; after filling out dozens of forms and getting gray hair, I’m just relieved and happy to enjoy a beautiful summer here in Cambridge.
The next year will be exciting and I’m looking forward to take part in promising and challenging projects, meet and work together with talented people, travel a lot and enjoy my new American everyday life.
I will try to share my insights, lessons learned, impressions and a lot more on this blog and thereby try to improve my English skills
this post is about creating a Chrome Extension to enrich the functionalities of Google Contacts and to manage more than 10k entries in an easy way.
The story starts one month ago, when I was confronted with the following requirements:
“Build a Chrome Extension that is capable of managing all our Google Contacts (12k+)”
“We want a simple login”
“We want inplace editing for some cells, as well as batch editing for a subset of all cells”
“The extension should support fuzzy search, sorting, inverse search(exclude matching entries), multimail, quick filtering by age, notes/tags, …” – unfortunately, Google’s Contacts API is lacking a lot or nearly all this functionality right now
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
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:
a movement specification – which parts are animated and in which way
a time interval – how long will the animation run
the animation speed – how much movement do we want to have in one timeframe
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/
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 )
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