Tagged: html5 Toggle Comment Threads | Keyboard Shortcuts

  • danielsaidi 9:03 pm on January 20, 2012 Permalink | Reply
    Tags: afferent coupling, cvs, , efferent coupling, , html5, , kinect, , , stack overflow, tim huckaby, windows 8   

    Øredev 2011 in the rear-view mirror – Part 5 

    Øredev logo

    This is the fifth part of my sum-up of Øredev 2011. Read more by following the links below:

    So, yeah…this sum-up was supposed to be a rather short thing, but has grown out of proportions. I will try to keep it short, but the sessions deserve to be mentioned.

     

    2:7 – Greg Young – How to get productive in a project in 24h

    In his second session at Øredev, Greg spoke about how to kick-start yourself in new projects. First of all, do you understand what they company does? Have you used your the product or service before? If you do not have an understanding of these fundamental facts, how will you deliver value?

    Then, Greg described how he quickly get up in the saddle. He usually start of with inspecting the CVS. Project that have been around for a while and still have tons of checkins, could possibly be suffering from a lot of bugs. Certain areas that are under the burden of massive amounts of checkins could possibly be bug hives.

    Note these things, it could quickly tell you where in the project it hurts. Naturally, a lot of checkins do not automatically indicate bugs or problems. The team could just be developing stuff. However, it will give you someplace to start. At least, a lot of checkins do mean that someone is working in that particular part of the project.

    These are very simple steps to take, but to actually be able to discuss the project after just an hour or so with the CVS, and maybe even pin-pointing some problems, will give your customer the impression that you are almost clairvoyant…or at least that you know what you are doing, which is why they pay you.

    If the project is not using continuous integration, at least set it up locally. It does not take long and will help you out tremendously. To be able to yell out to someone who breaks the build the second they do it…well, it will give you pleasure at least.

    Greg then went on to demonstrate how you can dig even deeper, and his tool of the day was NDepend. Greg’s demo was awesome, and Patrick should consider giving him…well, a hug at least. I, who without that much success demonstrated NDepend in my organization a while back, could quickly tell that I have a long way to go in how you present a tool to people.

    With NDepend, Greg demonstrated how to use the various metrics, like cyclomatic complexity and afferent/efferent coupling. He went through the various graphs, describing what they do and how they can be used and told us to specially look out for black squares in the dependency matrix (they indicate circular references) and concrete couplings (they should be broken up).

    All in all a very, very great session that also gave me a lot of things to aim for when holding presentations myself. As a consultant, you should not miss this video.

     

    3:1 – Keynote – Jeff Atwood – Stack Overflow: Social Software for the Anti-Social Part II: Electric Boogaloo

    I will not attempt to cover everything said in this keynote. Instead, you should go here and wait for the video. It is filled with fun gems, like when Jeff describes how stuff that are accepted in a web context would be really strange if applied in real life. For instance, FB lets you keep a list of friends. Who has a physical list of friends IRL?

    Anyway, Jeff spoke about gamification and how we can design our service like a game, using a set of rules to define how it is meant to be used, award those who adapt to the rules…and punish the ones that do not. The basic premise is that games have rules and games are fun…so if we design our web sites as games, they should become fun as well.

    Well, at least, rules drastically simplifies how we are supposed to behave. It tells us what to do. Sure, it does not work for all kinds of sites, but for social software, gamification should be considered. Games, in general make social interaction non-scary, since everyone has to conform to the rules. Just look at the world, and you will know that this is true.

    So, when designing Stack Overflow, Jeff and Joel did so with gamification in mind. You may not notice it at first, but everything there is carefully considered. For instance, people use to complain that you cannot add a new question at the very start page. This is intentional. Before you add a question, Stack wants you to read other questions, see how people interact and learn the rules.

    Stack adapt several concepts from the gaming world. Good players are awarded with achievements and level up as they progress. There are tutorials, unlockables etc. Without first realizing it, Jeff and Joel ended up creating a Q&A game that consists of several layers:

    • The game – ask and answer questions
    • The meta-game – receive badges, level up, become an administrator etc.
    • The end-game – make the Internet a little better

    This design makes it possible for Stack Overflow to allow anonymous users, unlike Facebook who decided to only allow real names in order to filter out the “idiots”. Since Stack Overflow award good players, bad players are automatically sorted out. The community is self-sanitizing. People are awarded with admin status if they play good enough. It’s just like Counter Strike, where you are forced to be a team player. If you are not, the game will kill you 🙂

    I could go on and on, but Jeff says it best himself. Although some parts are simply shameless Stack commercial, I recommend you to check out the video.

     

    3:2 – Tim Huckaby – Building HTML5 Applications with Visual Studio 11 for Windows 8

    Tim has worked with (not at) Microsoft for a loooong time and is one charismatic guy, I must say. What I really appreciated with his session was that it seemed a bit improvised, unlike most sessions at Øredev. What I did not like quite as much, though, was that it seemed too improvised. Due to lack of time and hardware issues, Tim failed to demonstrate what I came to see – HTML5 applications with VS11.

    Tim begun with stating that he hates HTML…but that he loves HTML5, which is “crossing the chasm”. This means that it is a safe technology to bet on, because it will be adapted. How do we know? Well, the graph below illustrates when a technology is “crossing the chasm” in relation to how people adapt it:

    The Chasm Graph :)
    So when a technology is “crossing the chasm”, get to work – it will be used 🙂 I wonder how the graph would have looked for HD-DVD? Tim also thanked Apple for inventing the iPad (which he calls a $x couch computer). Thanks to the iPhone and the iPad, Flash and plugins are out and HTML5 is in.

    Large parts of the sessions were fun anecdotes, like when he spoke about how Adobe went out with a “we <heart> Apple” campaign and Apple responded with an “we <missing plugin> Adobe”. Hilarious, but did we learn anything from these anectodes? Well, time will tell.

    • Tim went through some browser statistics, explained why IE6 is still so widely used (damn those piracy copies of Win XP in China)…and ended up with some small demos, but faced massive hardware problems and promised us some more meat if we stayed a while. I stayed a while (I even attended the next Tim session) but the demos were not that wow.

    So, how did Tim do in his second session? Read on!

     

    3:3 – Tim Huckaby – Delivering Improved User Experience with Metro Style Win 8 Applications

    Tim started this session talking about NUI – Natural User Interfaces and some new features of Windows 8, like semantic zoom, a desktop mode behind Metro (it looks great, just like Win 7!), smart touch and…a new task manager (he was kinda ironic here).

    Tim demonstrated Tobii on a really cool laptop with two cameras, which allow it to see in 3D.  The rest of the session was…enjoyable. I cannot put my finger on it, but I had fun, although I was disappointed at what was demonstrated. The Kinect demo was semi-cool, a great Swedish screen was also interesting and Tim also hinted about how the new XBOX Loop and a new Kinect will become a small revolution.

    I really do not know what to say about this. Watch the video. You will have fun.

     
  • danielsaidi 8:50 pm on December 1, 2011 Permalink | Reply
    Tags: api, , , fredrik mörk, html5, , nathan totten, neil ford, , phil haack   

    Øredev 2011 in the rear-view mirror – Part 2 

    Øredev logo

    This is the second part of ny sum-up of Øredev 2011.

    I will label each session with day:order to satisfy all structure freaks (myself included) that read this.

    1:4 – Phil Haack – Building Mobile applications with ASP.NET MVC4, HTML5 and jQuery Mobile

    This session was quite interesting, since Phil discussed a lot of aspects of mobile browsing and how ASP.NET MVC4 can help you out by introducing .

    Adaptive rendering will be added to the default web application template, which will cause the page to automatically render differently depending on the size of the screen. If you want to view how adaptive rendering works, check out Zurb Foundation. In other words, ASP.NET MVC4 does not introduce adaptive rendering to the world – there are already plenty of free options that you can greb and use directly after reading this post. It’s just a convenience.

    Another new, cool feature is that it is possible to create device-specific variations of the same view, so that Index.cshtml is the default one and Index.iphone.cshtml is the variation that you’ll see when viewing the site in your iPhone. Custom modes can be registered in global.asax, which means that you are entirely free to tailor your own set of custom views.

    Phil also demonstrated using iBBDemo2 for simulating an iPhone when browsing the web. Quite handy if you want to easily be able to try out your custom views.

    All in all, a quite interesting session, although Phil did not seem too enthusiastic about it. Also, the wifi at Øredev was a disaster, and caused several speakers a lot of problems. I really hope they improve this until next year.

    1:5 – Nathan Totten – Facebook Development

    Nathan was yet another speaker who got hit hard by the wifi problems, as he demonstrated how to develop apps for Facebook. I really enjoyed this session, despite the technical problems and the fact that I already have developed Facebook apps. Since I am self-taught in doing so, though, listening to Nathan explaining several parts that I have not gotten around to work with before, was a great take-away.

    Nathan talked about various types of Facebook applications, like iFrame apps, web sites with Facebook Connect, mobile applications, desktop applikations (like Spotify) etc. and how they use OAuth 2.0, REST services, the Facebook Graph API and FQL to integrate with Facebook. He also discussed the JavaScript and C# Facebook SDK:s. His advice was to use the JavaScript SDK whenever possible, and to a server-side SDK whenever the integration should be more invisible.

    Finally, Nathan demonstrated how he works with local and live applications, e.g. if you are developing an application locally (running on localhost) and have it live as well. He then creates two separate FB apps – one that is bound to the live site and one that is bound to localhost. Quite convenient. He also told us that  FBML is dead, so do not use it ever again 🙂

    1:6 – Fredrik Mörk – API – the hidden UI

    The first Swedish speaker I got around to listen to was Fredrik Mörk, who spoke about how we have to give our API:s the same tender loving care that we give our UI:s. Users shun bad GUI:s, while developers shun bad API:s, so we should put some effort into our API designs.

    An API must be discoverable, but how? Always assume that the user knows nothing. So, adapt conventions used by other API:s, so that developers instantly recognize the API instead of having to remember it. even if they have not used it before. This involves making it possible to navigate through the API, adapting naming conventions (delete or remove, store or save etc.), put an equal amount of attention to all parts of the API and…take care of the API like you do with other parts of your systems.

    Fredrik advised us to always expose as primitive as possible, to make the API accessible to as many as possible. Always choose abstract before concrete…and choose your abstraction according to the purpose. For instance, if you expose an IList instead of an IEnumerable, you are communicating that you expect your users to insert stuff into it.

    Fredrik’s view upon an API is that once it is out there, it is no longer yours to change. A GUI can change…an API cannot. But, be careful with inserting stuff into your API just because a user wants it in there. It will ultimately bloat your API. And when you insert stuff, be intentional. Do not let chance determine where a feature ends up and what it is called.

    All in all a good session…and quite liberating with a Swenglish accent instead of the spotless American, Scottish and British ones that dominated the rest of the day.

    1:7 – KEYNOTE: Neil Ford – Abstraction Distractions

    After a long day, we decided to skip this session and go for a short nap before hitting a meat restaurant. I have not spoken with anyone who attended it either, so I am at a loss whether it was good, bad or just meh. It will be interesting to check out the video once it is released.

     
  • danielsaidi 9:05 am on February 2, 2011 Permalink | Reply
    Tags: flash, gears, , , html5, , plupload, silverlight,   

    Trying out Plupload 

    In Wigbi, I had a really handy UI plugin called FileUploadForm that could upload any number of files with AJAX. All you needed to do was to add such a form to the page to have it handle the entire file upload process automatically.

    However, as I yesterday sat down to migrate the old plugin so that it would work with the new Wigbi version, I thought “hey, three years have passed – there MUST be an even easier way to upload files”. Believe it or not, there was.

    The people behind Tiny MCE have created a really nice file upload component called Plupload. It supports several ”runtimes” – from jQuery-based file upload in HTML4/5 to Flash, Silverlight, Gears etc. and is insanely easy to configure.

    You can tell Plupload which runtimes you’d prefer to use, which file types to support etc. The users can then upload files either with a regular “select file(s)” dialog or by dragging files from an Explorer/Finder window.

    To make Plupload work with Wigbi, I moved the upload.php file to ~/wigbi/pages/ and added some extra functionality, like starting/stopping Wigbi and being able to adjust the target folder with a query string variable.

    All in all, adding Plupload to my Wigbi-based site took 10 minutes and worked perfect.

     
  • danielsaidi 3:53 pm on January 27, 2011 Permalink | Reply
    Tags: filter, , , html5, httpmodule   

    Automatically convert HTML5 to HTML4 

    I just love HTML5 and how easy things will become once it breaks through. However, until so is the case, the HTML code we write must be supported by older browsers as well.

    Still, we want to write HTML5 code…not old one. So, how to solve this little nugget of dilemma?

    Well, to make it possible to write HTML5 and still support older browsers, I and a collegue have created a class that automatically converts HTML5 elements to div and span elements when the response is sent to the client. For instance, <nav>…</nav> is translated to

    for IE8, while Chrome and Firefox will receive the original HTML5 code.

    The basic implementation

    First of all, HTML support is determined by one class, which implements a small interface. If the browser is considered to not support HTML5, the HTML5 code is converted to HTML4 with another small class, which implements an even smaller interface.

    Note: when we developed this, we tested it in an MVC application. However, it seems like there are some problems in web forms applications, where the output gets rendered multiple times. I will look into this and update the filter.

    This interface/implementation pattern is, if you are used to working with it, great if you use IoC/DI and later on feels that these quick implementations are insufficient. For instance, maybe you want to use a complete list of non-HTML5 browsers (we only consider IE8 and below not to have HTML5 support) and also do not want the class name to be applied to the end tag (which our class will add).

    If you feel like improving these classes, feel free to provide us with any updated, improved versions 🙂

    The ugly test hack

    When we finally went out to try the classes in action, we applied them in the Render event of a web form master page.

    It worked like a charm. When browsing the site with Firefox, Chrome etc. we received the HTML5 code…

    Firefox HTML code

    When viewing the site in Firefox, we get the original HTML5 code.

    …but in IE8, we were served the converted HTML4 code.

    IE HTML code

    When viewing the site in IE8, we get the converted HTML4 code.

    Well, isn’t this marvelous?

    But…wait a minute…applying it in the Render event of the master page? That feels…well, really, really bad.

    Yes, you are absolutely right. As I wrote, we were just trying it out. Relax…then read on for information about how to do it right 🙂

    The pretty final solution

    I guess that we can all agree that we want to make this conversion independent of our code. The solution above (applying it in the Render event), for instance, only works for Web Forms-based solutions. What if we want to automatically convert HTML5 to HTML 4 in an ASP.NET MVC-based web site?

    We need to find a better way of triggering the HTML5 conversion. So, how to do it “right”?

    We decided to create an HttpModule that applies a HTML5 conversion filter to the outgoing response. This will automatically handle all outgoing responses, provided that the module is registered in web.config.

    To enable the module, it depends which IIS setup you are using:

    • If you are using IIS 7.0 running in Integrated mode, add the following to the web.config system.webServer modules section:
             <add name="NExtra.Web.HttpModules.Html5ElementConvertHttpModule"
                  type="NExtra.Web.HttpModules.Html5ElementConvertHttpModule, NExtra, Version=2.0.0.0, Culture=neutral" />
    • If you are using IIS 6.0 or IIS 7.0 running in Classic mode (including the development server), add the following to the web.config system.web httpModules section instead:
             <add name="NExtra.Web.HttpModules.Html5ElementConvertHttpModule"
                  type="NExtra.Web.HttpModules.Html5ElementConvertHttpModule, NExtra, Version=2.0.0.0, Culture=neutral" />

    That should be all you need to do to enable the automatic HTML5 to HTML4 conversion.

     
    • Matthew Blackmon 5:20 pm on May 30, 2011 Permalink | Reply

      If I have an apache based server, how would I enable this module?

      • danielsaidi 9:42 pm on July 2, 2011 Permalink | Reply

        I’m not sure…I have never tried running .NET with Apache. Did you manage to solve it?

    • Katie 12:35 pm on July 1, 2011 Permalink | Reply

      Hi. I just got a temate off template monster and it was html5 and got my developer to spend ages doing it, not knowing it would not work on older browsers. I need help desperately as I néed to launch Wednesday and it’s a commercial site that needs to work on all browsers. How quick/ easy is it to fix? What do I tell my .net developers???

      • danielsaidi 9:46 pm on July 2, 2011 Permalink | Reply

        The module should work more or less by just registering it in web.config, but it may behave unsatisfactory with web forms, like when I tried using it together with EPiServer. In MVC, however, it should work right away.

    • venu 2:15 pm on September 13, 2011 Permalink | Reply

      Hi saidi,

      How to convert HTML4 to HTMl5

      • danielsaidi 8:55 pm on September 15, 2011 Permalink | Reply

        Well, it would be possible to create an inverted variant of this implementation. Just convert all tags with the class “nav” to a nav element and so on. Good idea – I will build one! 🙂

    • Sharon O'sullivan 11:18 pm on November 15, 2011 Permalink | Reply

      Hello Daniel

      I am considering buying an LG 3D TV for my family this Christmas (model LG47LW5700). But this tv model does not currently support HTML5, and a tech rep at LG said it was “not possible” to upgrade the firmware (perhaps he was misinformed)?. But now I hear LG and Google TV are thinking of collaborating for 2012 tv’s. I bet those 2012 tv’s will be a lot more expensive than the one I can buy now. So I’m wondering: If I bought this 2011 model, will you or anyone else create an LG “app” that would allow people like me to view HTML5 web sites by downconverting to HTML4 as you described above? (Please note, I’m not a techie! I was once, but that’s not my area anymore 🙂

      • danielsaidi 11:35 pm on November 15, 2011 Permalink | Reply

        Hi Sharon,

        Thank you for your comment, and thank you for telling me about this. I am also looking at buying a new TV, and I have not even considered this fact. HTML5 support (together with support for keyboard and mouse) would be a blast, so I will consider it when comparing prices and models from now on.

        However, the stuff I describe in this blog post are just meant to help developers adjust their web sites so that visitors with older browsers can design their web sites in HTML5, with automatic fallback to HTML4 if the browser does not support HTML5. The approach can be ported to any language, although it would have to be adjusted to fit the technology of choice.

        With that said – if you browse a HTML5 web site that uses this technique in your LG TV, the HTML5 code would automatically be converted to HTML4…but I really doubt that even 0.01% of the web sites in the world will…at least not my approach 😉 And, even if the HTML would be converted, you would still miss out on several HTML5 features, since the HTML5 standard is still a work in progress.

        So, I guess that the question we have to ask ourselves is whether or not the TV should be the device used to surf the web. Maybe a better approach is to stream the image/sound from your computer to the TV?

        • Sharon O'sullivan 1:06 am on November 16, 2011 Permalink

          Thanks for your reply, Daniel. That’s very, very helpful to hear that the HTML5 standard is still just a work in progress….Your reply made me re-assess the basics that I would really need from our tv.

          Really, I wanted to get a ‘smart tv’ not so much for general surfing of the web (because you’re right we have computers at home that can do google searches for us for that purpose), but mainly so that our tv would enable us to both:

          (a) view films from sites such as Netflix, YouTube (and other emerging web film channels like Cinema now), which the smart tv’s can do, so that we don’t have to head out on cold winter evenings to rent a dvd, and

          (b) access videos from news websites (eg BBC or CTV etc)

          The thing is, for some of these film services, you’d need an “app” to view their videos on the tv. And I was just concerned that if their videos are on their website courtesy of html5 (or if they upgrade their websites to html5 in the future), then I would no longer have access to their apps via our tv (and only newer html-5 compatible tv’s would). But perhaps, given the current state of development of html5, that problem would be a couple of years away still.

          Regarding your suggestion of streaming from the computer to the tv, that would work if my laptop was compatible with an HDMI cable, but it’s not (my laptop is about 2 yrs old). And although it would be nice to stream it to the tv wirelessly via our home router, I’m told that you can’t stream wirelessly from your computer desktop to your tv. The only way to stream wirelessly from your computer to your tv is via the DLNA (digital network living alliance) convention is by storing your digital films on the “shared documents” part of your computer, and then having your tv recognize it from their using the tv’s “media sharing” app feature. And, by definition, streaming (as I understand it) involves only downloading bits of the file at a time, it’s not the same as downloading the entire digital film to a shared documents folder, which is why it won’t work to wirelessly stream from your computer screen to your tv screen unless the whole digital file is there.

          But now that I think of it, another possibility would be to get a $45 cable from Apple to adapt our ipad to the HDMI plug on our tv, and the ipad supports html5 if I’m not mistaken.

          Bottom line is I really would like to get this LG tv because it’s got the passive 3D (much more sensible for kids than the $$$ active glasses), and a really neat motion-sensitive tv remote (like the nintendo wii). For your own shopping info, I think Sony supports Google tv (and html), but they use the active 3d glasses (not practical in my household), as does Samsung. I also want to have the skype video feature, which Samsung and LG 3d tv’s offer, but I don’t think Sony does (you might want to double check that).

          Anyway, hope all this info made some sense…I typed it quickly because I have to run. But thanks for sharing your thoughts on this.

        • danielsaidi 7:55 pm on November 17, 2011 Permalink

          Thank you for all the great advice! You have considered a lot of things that I have not. This will be very helpful for me when we get around to purchasing a new TV. 🙂 There are a lot(!) of options, and I am sure that you will select the option that suits you best, considering all the information you have provided me with.

          Regarding HTML5 support…as long as you find a TV that supports HTML5 (even if the firmware will not be upgradable), the audio and video specs of HTML5 are rather well-defined now, so I doubt that we will se any major changes in the final specs. So, if you find a TV that supports today’s HTML5 video/audio format, chances are probably big that they will continue to support the final format as well.

        • Sharon O'Sullivan 11:33 pm on November 17, 2011 Permalink

          Agreed! Which is why I did a turnaround on the LG and switched to the Samsung Smarthub. Cheers, and best of luck with your own tv purchase.

        • Sharon O'sullivan 1:20 am on November 16, 2011 Permalink

    • Pranav 9:50 am on May 24, 2013 Permalink | Reply

      I have made a browser in java but it does not support html5. How do I make it support html5

  • danielsaidi 11:57 pm on December 9, 2010 Permalink | Reply
    Tags: html5, localstorage   

    HTML5 localstorage 

    I have spend some time experimenting with the new HTML5 localStorage feature. It is a new feature that makes it easy to store data in the web browser, using JavaScript.

    Local storage does NOT replace a real database, since it is unique for the browser and cannot hold that large amounts of data,  but it is a really great tool for many smaller tasks.

    For instance, say that you have an iPhone web application that needs to uniquely identify the mobile device. The device itself does not send any such information (like the MAC address, phone number etc.) so, you’re at a loss…

    …but with localStorage, you can easily create a unique ID (e.g. a GUID) and store it in the local storage. The browser can then use that ID to identify itself to the system.

    For instance, this is all you need to store a small string into the localStorage:

    function hasLocalStorage() {
       return !typeof(localStorage) == "undefined";
    }
    localStorage.setItem("name", "Daniel");
    var name = localStorage.getItem("name");
    localStorage.removeItem("name");

    As you can see, it’s really easy and really powerful.

     
    • Johan 4:04 pm on December 10, 2010 Permalink | Reply

      Isn’t that almost exactly what cookies are? I assume that you can store more in the localStorage than in cookies, but since it still is open to manipulation by the user, may not be there the next time, etc, it still seems to have all the disadvantages of using cookies.

      Do you see any advantages with localStorage compared to storing an identifier in a cookie and the rest server side (except for the coolness of something new)?

      • danielsaidi 11:48 pm on December 10, 2010 Permalink | Reply

        Well, having an ID in cookie and using it to retrieve more data server-side works as well, but for the AJAX-based iPhone web app that I am working on now (for which I know that localStorage will work), the localStorage approach simplifies the data handling a lot.

        Have you had a look at globalStorage and sessionStorage?

c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel