Wellcome and enjoy.

I would like to welcome you on my blog and thank for time you spend reading it I hope you will enjoy.It is personal creation of me, Lukas Tencer, and it will map my professional success as well as my personal interests.

Thursday, September 23, 2010

Detecting HTML5 Features


Welcome back,

so I have finished another chapter, and here is a short summary, what you can learn in this chapter. Its title is "Detecting HTML5 Features" and it introduces 3 basic ways how to check for HTML5 support from browsers. Currently there is a pretty good support especially from mobile browsers, only pain in ass is IE, but starting from version 9+ there should be some support. Also if you would like to run your HTML5 pages in IE there is plenty of other options (Chrome frame, Gears, explorercanvas,...), but none of them is native. About these more in later articles.
So what are therse 3 ways how to detect HTML5 features? Its all about existence of some variables.

1. Property of global object. There are few global objects always available as Window or Document. So example how to detect application cache would be:

return !!window.applicationCache // !! is trick to get the result boolean value, output of operator ! is assigned to left side and it is true/false

2. Create an element and then check for a property on that element
3. Create an element and then check for a method on that element

2. and 3. ways are almost identical, because what are we checking in 3. case is actually a pointer on a function, what is also a propperty, so it would look like this:

return !!document.createElement('video').canPlayType

So this are 3 basic ways, about which is autor talking, but in fact, he is using little bit more of them. I have summarize them in small .js library mastermind.js which you can download also with examples how to use it. On this exapmle you can check, what functionality your browser supports.



under the line: HTML5 specification has divided into multiple groups, so there is one for DEVICE, other one for GEOLOCATION or FILES, so if you follow one of them, keep an eye on others, because they also bring some cool new stuff.

Wednesday, September 15, 2010

Shipping code wins. How 'img' tag arise


First chapter of book HTML5: Up and Running is called "How Did We Get Here" and shortly tells story how HTML makes it to its current position. It was very exciting reading especially along with 17-years old mail conversation, which shows, how 'img' tag was created. The true is, there was 4 proposals, how images should be inlined to HTML, and some of them was perhaps even better than today used 'img', so what makes it to current form? It was just implementation of code in one of the that day's browsers. So in this case was true, that shipping code wins. Off course its not the golden rule, but it can help. Author in chapter 1 also introduces examples, when shipping the code just did not help. This was true for some of dead branches of HTML evolution tree.

Besides this examples author also gets over past evolution of HTML in W3C and WHAT working groups. As you can know, there was initiative from W3C to bury HTML and replace it with "better" and more strict XHTML. but unfortunately this initiative was not successful and even without support of W3C development of HTML continues. And then in 2007 W3C cancel its own initiative on really strict XHTML 2.0 and instead continues in development of HTML.

So where was the problem of XHTML? it was at most in lack of backwards compatibility and restrictions for developers. In version 1.0 XHTML has something called Apendix C, which said sth. like, obey these rules, but there is a way, how to make an exception. This Apendix C was removed in version 1.1 and did not make it to version 2.0, because work on this version was stopped. Without Appendix C all current sites would be needed to be rewritten to XHTML 1.1 and developers and users did not like it. Also there was an strict rule, which did not tolerate any errors in markups or parameters. So for example if you did not put " around parameter, the page just did not display, instead of tolerant browsers behaviour, which just can handle it somehow.

This "all or nothing" rule makes to to think little bit about broken and non-valid code on pages. Yes its true, that if we wont be strict on nice code, there will be more and more pages, but how to make some compromise? Because from developers point of view one has to optimize its site for different browsers in many cases, only because of browser dependant non-valid handling. So what about standardization of wrong code handling? Yes I know its very close to rendering engine and it will require big support from browsers site, but its kind of solution. Any other suggestions about this question is more than welcome.

HTML5: Up and Running


HTML5: Up and Running is a book about recent news in web development from Mark Pilgrim released by Google press. It is on of the resources which supports Google's initiative to push forward development and support for HTML5. I really appreciate this initiative, because it also allows me, to push some bony applications in IBM little bit further. So far I have some experience with HTML5 because I have implemented some of the features, which have google introduced in Gmail in some IBM product and I believe this book will help me to master my HTML5 skills and let me implement more features in this product.
Now little bit about the book. It`s price is pretty low (amazon $19), so I have decided to get it. I have obtain electronic version and in comparison to paper version is pretty more rich, you can use hyperlinks directly from text, what helps a lot especially, when you are not aware about some topics.
So far I have get to page 30, total number of pages is 222, so I hope I will make it through the book in most 2 weeks. I will bring you periodically updates about what I have learn and I hope I will help the community. For the moment I have learn how HTML5 arise and how to detect its features in different browsers. Updates about this 2 topics I will bring soon in my other posts.

HTML5 Learning Resources

Hi there,

I would like to share few resources, which I have gathered about HTML5 and also ask you, if you have any, to share it with rest of community. I hope this will help you.

First one close to IBM by Niklas Heidloff:

Usage of HTML5 Offline Functionality in XPages 8.5.2 :

Few talks from Google guys:

Introduction to HTML5:

HTML5: Features you want desperately but still can't use:

Learn About HTML5 and the Future of the Web:

Google I/O 2010 - Developing with HTML5:

Google I/O 2009 - HTML5 Database/Gears & Offline Web Apps

Book resources:

HTML5: Up and Running:

Introducing HTML5 (Voice That Matter):

Beginning with HTML5 and CSS3: Next Generation Web Standards

Thursday, June 24, 2010

Real-World Data Based Game Content

I have read about research of computer games research group on ITU Copenhagen. They are generating game content based on users action and they are trying to maximize enjoyment from the game. Based on they research I have been thinking about game content little bit also on myself and following idea come into my mind.

Basically every game has some content and it could be created by artists or somehow generated. Generated context could be done procedurally. But even when you want to have procedural context, you need some seed, based on which you generate this context. Seed for researchers from ITU are players actions. I have been thinking about little bit different approach, and it is to generate game context on the biggest set of data one can acquire. It is real-world data. Just imagine about mixing real-world data and game context. There are a lot of ways, how to do this, so lets speak about few of them.

First of all one can just deliver game context based on the basic real-world, what is position. This is basically best executable on mobile devices. Where player is playing the game, but on different locations are available to him different levels. So where to use this? First of all education, where you can just give people more inspiration to visit some places, like museums, galleries, parks and other cultural and other institutions. Just a family on a trip around museums in their city and great way to deliver information to kids is to let them play game, which context is based on in what museum they just are. Second nice use is marketing. Also model situation. You are a big fast food company, which wants they visitors to pay a visit to their affiliates. You can release game, which will provide to players in every affiliate different level, for each level they receive award and after enough awards they will get some free drink or any of your products. Last use of just position is the legal issue. In many countries there exists rules and laws about specific game context, which can and can not be delivered to players. Best examples are Australia or Germany. It is easy to filter game content in stone shops, where developer and publisher adjust game context for release in particular country, but it is harder to done in electronic publishing. Also nice example are mobile games, where is no guarantee, that the application will pass all the local laws. For this purpose could be also used location specific game context.

Lets move to second option of mixing game context and real-world data. Now we want to use some more information than only position in computer games. It is best, that it would be information, that could be obtained explicitly and is available worldwide. This type of information are: traffic, weather, daytime, stock information ... there is a plenty of data, which can be used in games for game content. We does not need them to simulate, we can just use them. Also, when you use real world data in computer games, one can actually solve real world problem. Model situation: GPS, which communicates with game server and players quest is to lead the car as fast as possible from point A to point B with avoiding dangerous places(some really bad neighbourhoods), traffic jams... . Also use of real world information, for example weather in computer games, could make step toward personalization of game context (did ever happen to you, that you have noticed, that its raining not by looking outside window, but by looking on forecast instead?). Also option to let player play from some initial state, which is based on real data, and then to compare their results with results based on actual data, could lead to some nice statistic observations.

Last use of real-world data in game context is the deepest one from previously described. It is use just a real world as a environment, mixed with artificial models. Some solutions already exists in augmented reality, but none of them is actively used for computer games. This could be nice in combination with approach number 1, so you can play in real world and based on your position, you are playing with different game content. This idea is a little bit abstract but it is strong proposal for game prototype, which could bring new view on mobile game playing, especially now, when new devices with new technology are introduced. So augmented reality + location based game context could really make a difference.

On this theme I have not found any scientific articles published, even when in some areas are already existing solutions (games based on stock information, AR for PC ...), I have found none published on scientific conferences. So I am happy that I have option to share my ideas and visions with you and I hope, this could be helpful to you.

Friday, June 4, 2010

Drag and Drop in HTML5 and File Input. They have sth. wrong.

Hello everyone. At first, let me please say little background about recent events in my life, if you are interested only in technical stuff, skip this paragraph. Be unpredictable events it happens, that I am currently working on front-end of one web application for big big company. My role in team is not big, but I like my work and now I actually work on something pretty interesting. It is only 3 days what I am working with Dojo, Ajax, so please be patient with me. But as you can see I learn fast :-).

Let`s say something, what we would like to do today. As Google has started its Drag and Drop for Gmail, everyone wants to have one like that. So my BigB company has asked me to do also one like that for them. This is what I am working on in combination of Dojo, Ajax, HTML5 and classic HTML. Our task is like this: You have some form, there is some default behavior on this form and you would like to keep it, but also add some other. Thing are now like this, we have DOJO Fileinput and user can select there files and after submit of form they get uploaded on page. Now we would like to sth. like this. After dragging files on special div, we would like to add new Fileinput fields with those files in it. So no XHR request or sth. like this what is commonly used for uploading, we have to rely on script, which is processing form now and of course we can not touch him. So how to do this? There is a lot of limitations.

First of all, get working Drag and Drop, what is pretty simply task and even withou no knowledge of DOM or Ajax you can do it, I was able to do it, so you have to do it also. Follow this examples:


Get here until phase you would have access to you dataTransfer object. Now it is going to be little more complicated. First of all we need to put files to . To do this will help of new property of input DOM object and it is files. API is described here: http://help.dottoro.com/ljwjmspm.php. It is an Filelist object, and there are some problems with it, which I will mention later. Ok now, we have the files there and we would like also show names of files to user. This really could be problem with classic input, because value property is read only for security reasons, which are pretty clear. Using it could anyone download any file from your computer. So what to do now? Because we are using DOJO, there is one big advantage. DOJO Fileinput is little bit hack, and what you see is actually not an real file input, it is just text input and button, inside an file input. I know it sounds strange, but try to take a look on code in DOJO and you will get it fast. So now we just get this text input and we put there our file.name, great. We submit form, hoping that everything will go ok, and... PROBLEM!

Files added by user are uploaded without a problem, but files added to input programmatically are not submitted, so where the problem is? Could it be even done? So let`s take a look on documentation of Filelist, let`s play little bit with debuger and after a while we could find out, that our files property of input is allways 0?!?!. And this is pretty a problem in implementation of Filelist. Because, yes, you can access files with operator [], and this operator even accepts file to write into files, but it does not increase its length :-(. So on submit is nothing submitted. And what is worse, it is read only property, and there is no way how to change it. Just look on previous link.

This is pretty serious issue, and I hope, that in future implementations it will change, I would even report it to someone, if I would know to who. I can imagine, that there will arise a lot of more security and other issues, with allowing this property not to be read only, or by letting operator [] to set length. Other solution is to make operator [] able only to read, not write, but I believe, this would be step back. It is really nice help for developers. Especially, when you want to use file from other sources (DND, Web...). So how now solve this problem? On monday I am going try to write my own XHR request and override submit function, which is sending form. Will see, if it could be done, more info in part 2.

I hope, I have helped you at least a little bit. Have a nice day.

Monday, May 24, 2010

Voice control?

Yesterday I have opportunity for first time use Voice Control built in Windows 7 and I would like to share my experience with you.

At first, there was 15 min intro about learning how to use voice control. Ok, I have made it somehow through, but it was not one of the most user friendly learning sessions. After that you can train you voice control by reading bunch of sentences about how voice control is awesome.

At least, when you make it to the real control of system, here it goes. I must really appreciate this "show numbers" command, which practically will show number over each GUI element and just by saying numbers you can navigate. I can not imagine such navigation in open-space lab, but whatever. So system control GUI is pretty good.

Next part of voice control is dictating, when you are saying text and it is actually typed on the screen. Here Microsoft claims that speaking is faster than typing. And yes, they are right, but fixing errors after voice recognition software takes you much more time than typing. This can be caused also by my bad accent, but should not recognition count also with that?

Ok, now when we are over short review, lets take a look about good use of voice control. While I was lying in bad and thinking, how voice control could help you and few things come into my mind. And perhaps Google will implement some of them someday :-). First of all voice control allows you to multi-task. You can be typing on a keyboard and at the same time you can make a note. Or better use, you let copy files and at the same time you are playing a game, but some of the files are in conflict and this nice windows with: replace, skip, cancel is show. Here instead of breaking your game you can just after voice reader reads that message say yes. Full screen applications are currently mostly games, so yes, use for games would be handy. Another example, you are playing a game and just in you have remind, that you must send an e-mail, you can do that by voice, while still playing. This is nice use for desktop applications.

Another story are mobile applications. In current world of smart phones and hands free this wont be such a big deal, but it could be nice to have sth. like this. Imagine you are just talking wit somebody and you are NOT using hands free. This person have just say you, that you will met at 8:00 pm at main square, you want to continue the call and at the same tame make notation about the meeting, what to do? You will just press voice control button and you will say: new event 8:00 pm at main square. And here we go, new event has been added to you calendar.

Anyway, why is not Google working on software, which will analyze context of spoken language, so it could automatically offer options, when someone say you his number, in case of appointment and a lot of others, which could be used in combination of Google calendar, contacts and many others.

So Google, go for it!