HTML5 Video... what??

Over these few years, there has been quick changes and movements in web video. With Apple's decision to block Flash out of the i-devices at all costs, which is consistent with their draconian control over their device, many websites have starting to provide video delivered using html5. So what is the difference?

First, we have to start with how video formats work. In the simplest form, a video file contains a video and an audio track. The video track is encoded in a codec such as H.264, Xvid, MPEG-2, etc. The audio track is usually encoded in MP3, Ogg-vorbis, or AC3. Then, the video and the audio is combined into a container format such as avi, mov, mkv, or flv. As a result, just because a.mov and b.mov are both mov files, it doesn't mean your media player will play it, since they can have radically different codecs.

In the 1990s, web video was in a horrendous mess with various bloated and CPU-hogging video players such as Windows Media Player and Real Player. Every time a video is embedded in a webpage, some users are bound to not have the player and not able to view it. Other users will experience lag and even crashing of browsers because the players were horrible and the computers were slow. Flash came to rescue in the end. When flash started to dominate the web with the highest install base, using Flash to deliver web video becomes a much more reliable way. Not only is it faster than the horrible alternatives, almost every single user is guaranteed to have it.

Flash video is delivered in a container format, flv. It gradually adopted newer and more efficient codecs such as H.264 as time went on and adoption spread. Eventually, most video becomes encoded H.264 and most players are able to play them well. Even graphics hardware are optimized to decode H.264 so that low power devices such as phones can play video as well.

However, flash has its own problems. The plugin itself was not exactly the most efficient piece of software even though it was much better than the alternatives. On certain computers, the plugin creates lag and causes browsers to crash. Linux platforms were not supported very well. As well, Apple claims that flash does not play well with mobile devices, and that is true to a certain extent. Of course the real reason Apple blocks Flash is so that developers can't bypass the AppStore (and develop apps on the highly versatile Flash platform that is free from Apple bureaucracy and lock-down) and are forced to let Apple have a cut in app sales and in-app purchases. Lastly, many people feel that letting a single company (Macromedia, now Adobe) control the whole web video business is scary.

HTML5 was developed with many new features. One of them was the ability to embed video directly. The video would be played by the browser directly without jumping through the hoop that is flash. However, there was a problem. Firefox refuses to play H.264 encoded videos because the browser is open source and the non-profit Mozilla organization cannot afford the possibility of having to pay a license to MPEG-LA in the future (or face lawsuit) for including it. Similarly, Google has its own plans to dominate the web video space; Google's Chrome browser, which is gaining market share fast, only plays Google's new codec Web-M, meant as a competitor to H.264, and is completely new and not a recognized standard at all.

The bottom line is that HTML 5 video is encumbered with the problem that there is no single codec that every major browser plays. When you encode a video in any codec, and then embed it on a web page using html5, there is bound to be a major browser, be it Firefox, Chrome, or Internet Explorer, that refuses to play it. Until the major players such as Microsoft, Apple, Google, and Mozilla sort out this issue and come up with something that plays in every browser (or if MPEG-LA releases H.264 to be free forever), html5 video is definitely not ready for production. In the mean time, flash is the only solution.

Reflection on the Jazz Band Filming Project

Of course, this project was my first time operating a camera. I did not really know what to do. I only did what I was told, which I guess prevented me from completely botching the video. However, there were numerous glaring mistakes that I made. For example, I was wearing white and standing in wide shots all the time, in every single take. Me and Jacky also accidentally shot each other in one of the videos. Then, when I moved to operate the camera on the lift (for wide shots), I made the same mistake as the previous person - shooting many film crew and forgetting to move the camera.

There was also many ways the project could have been improved. For example, if we were taught what to do beforehand instead of on scene, we would not have screwed up as much. Also, non of us camera operators saw the rundown sheet and we missed many opportunities to shoot the solos (especially most of the trumpet solos were missed). I also did not really know when to move where, contributing to the confusion and the mistakes.

Overall, the project turned out decent enough, mostly due to our teacher's expertise in directing. If it had been one of the students (like me), the video would have been a nightmare to watch. Perhaps with more practice and preparation, our class can become more competent next time.

Regarding Internet Privacy

Just as most people are completely ignorant on how to use a computer and end up with their Windows machines becoming a malware cesspool, many people are similarly ignorant on internet privacy. Of course, not only are the users to blame, but the website administrators can't escape the hook either.

Recently my website was hacked, multiple times. Apparently there was a XSS vulnerability in one of the extensions I used in my website (built using Joomla). Of course this is my fault, as I hadn't updated that extension for more than 3 years! The first time was relatively harmless, with only 1 file disappearing. The 2nd time was much more malicious. Tens of infected files were uploaded somehow and the whole website was deleted (!) using those scripts. With this kind of security breach, the hackers probably would've obtained the passwords to the database and such. If the website had stored user information, we would have a huge security breach. My website is not a singular example. Many commercial websites have been hacked before. Many more are still vulnerable. With the website admins and programmers using bad coding practice and not maintaining code, everybody's privacy and security are at risk.

The biggest problems, however, imo is the users. Many people put hundreds of photos on Facebook and tag each other. What they don't know is that the photos are usually nearly public; it is very easy to gain access to them. Similarly, a friend of a friend of the person can view many aspects of his profile. With people having 500+ friends, all the information is practically public. In case anyone is wondering, this is obviously very disadvantage to everyone. If I'm the employer, I would check the applicant's Facebook profile before deciding to hire them. Much more honest information exists on Facebook than on the facade called resume. These information can only harm you, since your resume is supposed to represent you in the best possible way.

Then there is the egregious and ugly examples of cyberbullying. For example, Jesse Slaughter. She was plainly an idiot to post a video in the public, and to do it repeatedly. Not only that, she posted her phone number, address, name, age, etc in a public forum. With those information at hand, people from shadier sites such as 4chan can easily harrass her with things like fake deliveries, blackmail, etc.

Really, what people need to do is simply stop exposing information on the net. Your Facebook friends will know who you are without many photos and without those personal info. You don't need to status update every minute telling everybody what you are doing. Providing your personal email to non-important (and possibly compromised) websites is a stupid idea, and so is using the same password when creating an account in that website. Imagine the internet like a public place, and don't think you will remain anonymous if you simply shout out all your personal info.

Video Project: Brainstorming

Here are a couple of preliminary ideas for the video project:

Sports: we can create a video documenting aspects of the different sports played in the first term. This could include, rugby, soccer, track and field, etc. More specifically, we could take the video from a closer perspective to show people what St. Georges sports is about.

Music and Arts: we can film the band playing and the art classes (e.g. ceramics), and edit it to introduce the arts program in the school, as well as highlighting the more unique aspects.

Grad Life: the various aspects of grad life is not very well documented. For example, many people have no idea of what goes on inside the prefect council and their committees. As well, many grads also volunteer in stuff ranging from pizza sells to peer tutoring. This video could explore the school from the grad perspective and shed light to newcomers what their last year is all about.

Of course there are many challenges to be met in these ideas. For example, most first term sports are ending, and many of the games aren't played in the school. As well, it also takes a lot of time to film the concert band or the leadership committee meetings. Since there is obviously limited time, further planning to limit the scope and to storyboard should probably start soon.

First Looks at St George's New Website

Apparently, St. George's School has now redesigned its website.

The new home page definitely looks much more simple and fresh, with the huge photo slide show. The two links at the bottom also helps to direct you to the right location whether you are a student in the school or whether you are applying to the school.

However, a few things immediately jump out at me. First of all, the school seems to be afraid of its logo! On contrary to most other websites, the logo is a tiny image found right at the bottom of the page. Without the complement of the logo, the header looks like it is lacking something. Secondly, I'm still not exactly sure whether they would continually update the photo slide show with new images, especially now they've removed the photo selection bar to hide the scarce number (6) of photos that were put on! If that does not happen regularly, these photos will soon get old too!


The "my" Theme and the "my Saints" Page

Apparently, due to the horrendous drop down menu disaster of the previous website, this redesign has completely done away with them. Instead, everything is now listed on the side bars and are accessible with one click! In my opinion, the usability and accessibility improved a lot this way.

The page, however, still has a few small flaws in the design. For example, whereas there is still a tiny logo in the home page, in this page, the logo is now nowhere to be found! Instead, the huge "mysaints" text at the top of the page, with the emphasis on the word "my," somehow gives off a strange vibe that the page is somehow intended to be my profile when it clearly isn't. It doesn't help either that all the headers of each little box in the sidebars containing the word "my" as well.

Since many of the people visiting the website may not be familiar with the school, the excessive use of the word "my," in my opinion, gives a connotation that these new visitors are not welcome!

Excessive Use of Javascript

In reality, non of the design issues discussed above are as significant since they do not necessarily affect the usability of the website. The main gripe I have with the site is its excessive use of Javascript.

First, let's see just how many requests this website makes:

Firstly, the website loads 114.5kb of javascript! (see bottom section of above image) That is a lot of javascript for a website that offers no interactivity beyond links and is simply displaying information! Also take note that some of the script is loaded from cdn.media34.whipplehill.net, a third-party server to which we have no control of. This is a dangerous move because if the other server (which I assume is the website of the web design company) goes down, OUR website would be dragged down too.

Not only loading the script itself takes time, but the script, after being loaded, loads even MORE information from the server (top section of the image) to display the sidebars. This load, which takes 663ms, causes the sidebars to show up approximately a second after you see the webpage. Another side effect is that users with javascript disabled (like search engines) would never see the sidebar!

If the only problem with javascript was loading time, then so be it, since internet connections are getting faster and faster nowadays. However, take a look at the "destination" of one of those links in the "Top News" section:

javascript:__pdL('204','New%20School%20Blog',%20'1',%20'nid=639858~ptid=138972~sdb=False~pf=pgt~mode=0~vcm=False',%20'',%20'False',%20'0',%20'',%20'default.aspx')

That's right; it's a complicated sequence of javascript for a hyperlink that simply takes you to another page! Not only are you now barred from opening the page in a new tab or window, but the website has now excluded search engines from visiting that link! Further more, when you copy the url of the destination page (after you click on the link to go to it, of course) and paste it in a new tab to go to it directly, the sidebars disappear!

I think these javascript mistakes are some serious technical flaws in the new website and although they are not initially visible to the user, they need to be addressed.

To conclude this post, I do agree that the new design is much more cleaner and usable than the old design. However, we truely need more knowledgeable people to evaluate the website so that the final product does not have many issues (one other area I did not talk about was the media section, which was improved slightly by adding a tiny icon of Youtube at the top right of the page, where nobody would see it).

The Golden Age of Web Technology?

In a thought-provoking piece on "golden ages" of urban creativity, Aaron Menn of Urbanophile pointed out that in some way, today is a golden age of many things:

... one could make an argument that today is a golden age of pretty much anything. We’re fortunate to live in a wealthy, mostly peaceful and free society, one that values inquiry, and in which we have tremendous technology and techniques available at our disposal far exceeding those people of the past ever dreamed. I dare say its true that we have more of pretty much everything, more people studying everything, amazing technical excellence in every field, and incredible scholarship about how almost everything really was in the past.

However, he also pointed out the distinction between this type of golden age and the other golden ages people often associate with:

... when we think about a golden age in the past, we think of the time in which those greatest of works were produced. We talk of the golden age of Athens, when those most primal works of western civilization were created.

Of course, the article was about creativity in urban planning. However, isn't this in some way even more applicable to web technology today? Nowadays, the internet is more ubiquitous than any time in the past 20 years. Everyone uses the internet. It's accessible, easy to use, and very powerful! At the same time, I would also argue that this is also the golden age of web technology, in the sense that innovation is constantly happening. Just a couple of years ago, Facebook and Twitter revolutionized the web. Now, smartphones and 3G internet are adding a whole new dimension to the internet. The possibilities seem endless now.

In this way, I see that it's perhaps the best time to learn and gain expertise in the field of web technology. In fact, it is the field where much of the innovation is still going on and everyone can perhaps participate in the next technological revolution. Even if you aren't pursuing a career in the field, don't you want to be actively part of something big that is happening right now?

Regarding Content Management Systems

Many websites use a content management system (CMS) such as Joomla! to facilitate easy publishing of news, media, and information. This tool has many advantages over the old way of directly editing the html files and uploading them.

Traditionally, at the turn of the millennium, people used HTML editors such as Front Page or Dreamweaver to edit and publish webpages. This is fine if the site is intended to be simple. However, as websites become more complex and dynamic, with information needing to be updated everyday and photos to be uploaded, manually editing HTML files become very cumbersome. Even worse, since every page has to have things like menu bars and headers, the html code of them gets copied multiple times and any update in the menu bar, for example, would need to be repeated over all pages.

As a result, server-side scripts like PHP and ASP begin to be used to generate pages on the fly so that things like toolbars and menu bars and banners can be edited easily and without the hassle of having to update all the (sometimes hundreds and thousands of) pages.

Even then, there is still a couple of problems. Firstly, trivial tasks like updating a website can actually be very difficult to people who aren't experienced with things like html and FTP, and those people often mess a website up by replacing the wrong file, or copy-pasting text from word, which always produce non-standard html that breaks easily, or a variety of other unexpected things. Also, creation of new pages become difficult as one have to mess with the delicate code used for generating the menu bar.

Content management system takes the dynamic pages to a whole new level by providing a whole administrative system out of the box that is robust and easy to use so that nobody has to touch any code. Websites that are built with a CMS, once created and set up, can be updated easily without much technical knowledge. Since they are very flexible, with a plethora of components like menus, sidebars, membership management, news boxes, themes, etc, most of the features that people expect can be added with a couple of clicks. Also, changes like adding a menu button or a new webpage becomes very trivial, with a couple of clicks instead of mingling with complex html code.

There are down sides to CMS systems though. For example, since the system is so powerful, under the hood it is very complex. As a result, once in a while, security holes pop up and the websites become vulnerable to hacks. The vendor of CMS systems will often release patches in time to patch the hole, however. Another problem is that on a slow server, CMS systems will be slow, since it has to process lots of information to display a single page.

Not every website is suitable for using a CMS either. Some websites are quite specialized. For example, a website providing email service would have to use another type of system. Sites like twitter and facebook also have their own custom system since they are also very special and different from most websites. News websites like NYTimes are also much more complicated since they have to deal with huge volume of visitors, while offering large amounts of information.

In general, the majority of websites simply present information, or are e-commerce websites, or are a community based website. These websites are the best suited for using a generic CMS system, and they should use them for the reasons discussed above. Any custom attempt to copy a CMS system is like reinventing the wheel since years of effort had already been put in to build one of the best CMS system: Joomla, and it is given free of charge! Building such a website with CMS would make everything so much easier that I don't see why so many are still stuck with static html pages and crappy custom systems that make it hard to update the website.