HTML5 AV Manager vs. HTML5 Multimedia Framework in Quality

I am the developer of HTML5 AV Manager and HTML5 Multimedia Framework so the review should be mostly unbiased and should not involve pissing off other plugin developers not that I do anyway.  They are both WordPress plugins btw.

Okay I start off with the HTML5 Multimedia Framework, the project started with intention of making the most flexible video plugin that will hopefully benefit theme designers, at least I thought I was building a flexible video plugin but as I started putting more features into the plugin the more complex the plugin got, the code got more sloppy, it became harder to maintain.

The Fact that the plugin use WP Embed and tries to determine the different between audio and video, that actually adds more complexity, file extension such as Ogg, MP4 and WebM can be used for video and audio, but sometime it used to store only audio.  This is not the case with HTML5 AV Manager the users have to define audio or video for themselves.

Code behind HTML5 Multimedia Framework was so poor, that the presentation was actually mixed with the business logic, so the design pattern was poor.  With HTML5 AV Manager, the product follows two tried and tested design pattern the Model-View-Controller (MVC) and Object-Relation-Mapping (ORM), the ORM is the model part of the MVC.

The Model is responsible for data storage, the View is responsible for presentation, by presentation in Web Development term I mean HTML Code and JavaScript, in PHP they are usually stored as files rather than an object and the Controller is responsible for the business logic.

The ORM is when I map the entity (table) to a (static) class, the tuple (record or row) to an object and an attributes (fields) to the properties.

Also I have allowed users control of some of the views and can be edited via the WordPress Theme editor, the views covers every aspect of html audio and video.

Yes I did have a ridiculous amount of commit with HTML5 AV Manager, but neither the less the code was very easy to maintain and why? Because I followed tried and tested design patterns!  Sadly there are a lot of Web Developers that don’t follow tried and tested design patterns; I was guilty of that with HTML5 Multimedia Framework.

HTML5 AV Manager is available from http://wordpress.org/extend/plugins/html5avmanager/

Talking about Deep Purple!

Hello, I got bored of the blue theme already, so I decided to do a major overhaul, use a complete combination of Adobe Illustrator and CSS3.  I only used Adobe Illustrator for the header and footer, I used CSS3 for the rest of effect.

What I thought is how can I make font stand out in a purple background? The answer to the question is PT Sans, white font and CSS3 text-shadow, text-shadow adds to the contrast and does it very nicely.  I don’t know what you think?  But I thought the text-shadow was stunning but it does not work with IE9 and below, just looks plain on IE9, still stand out.

The great thing about purple is that it’s not as common as black or white, a lot of site use black a lot more site use white, lol I say no more.

HTML5 AV Manager Introduction

Download Video: Closed Format: MP4 (Baseline) Open Format: WebM Ogg


Video Courtesy of MediaElement.js (John Dyer).

Hello it’s been a while, I been working on a new WordPress plugin called HTML5 AV Manager, I built it to replace HTML5 Multimedia Framework for WordPress, so it’s a completely different beast to the framework.  The Framework was getting to complex to manage so I had to build a new plugin from scratch and there is no backward compatibility with the Framework sadly but does work along side.

Anyway so here the gallery, have fun browsing.  Because pictures are worth a thousand words.

It’s took me about 3 or 4 days to get this far, I have applied two concept a Model-View-Controller and Object-Relationship-Mapping, some say PHP is not good at ORM, but at least PHP has the basic tools such as if statement and foreach loops and the ORM works solidly and I have made heavy use of jQuery in the admin panel.  Like the Framework it will come with MediaElement.JS by John Dyer and of course you can change MediaElement.JS settings in the theme editor and you can add your own views with different settings.

You can either upload videos or use external URL, I used a re-factored version of Uploadify for upload, it’s re-factored so it’s does not interfere with other WordPress plugins that relies on Uploadify.  I love the MIT license.

The plugin will require PHP5.2 with PDO (with PDO_MySQL), I just don’t like WPDB classes and it’s easier for me.

Update: I added two more views to the configuration, one that forces flash and the other forces silverlight.  Mainly just to show off the consistency of mediaelement.js.

[html5av id="1" view="flash"]

[html5av id="1" view="silverlight"]

Yes, it’s only has two parameters, because the rest of the information is stored on the database.  I think I use flash as the default, it’s doesn’t seem to have the alignment problem unlike native html5.

Update 2: I have uploaded a copy of the plugin which should be ready for production use and hopefully will soon be available on WordPress.org if it get approved, should be tomorrow, I don’t think they work weekends. Anyway the link is below.

HTML5 AV Manager 0.1.0

Update 3: Now available on WordPress.org.

http://wordpress.org/extend/plugins/html5avmanager/

My Rig, My Workspace and Specification

My Kick-ass Rig

Inside of the rig

Yes, it’s nice and tidy, all thanks to the cable routing feature on the case, the case is a Corsair 600T Graphite Series.  This is the best case I have had so far, the previous ones were more tedious to manage because the cables keep getting in the way even with a modular PSU, as you can see it’s not a problem with the current case.

The only problem I had so far was the vibration noise coming off the PSU, I fixed the problem by placing a wedge made out of paper between the PSU and the Case (as you can see in the picture), therefore the PC is now nice and quiet.

Top and front of rig

As you can see, this is the top and front of the case, it’s has 4 USB2 port, a USB3 port (not currently connected), mic & headphone socket and a Firewire port, also the power and reset button on top.  The reset button is covered up with the iPhone dock, because my cat love to jump on my case and hit the reset button. The power button will tell the computer to go to sleep while it’s switch on so I’m not worried about the cat hitting that.

So yes there disadvantage of having a power button on top of the case if you own a house cat =D, the advantage is that it’s allows room for large front fan.

My Cool Workspace

Cool WorkspaceI currently use Input Director to control both computers, under one mouse and keyboard, eventually I will switch from Input Director to Synergy when the sticky key bug is fixed.  I forgot to minimize Input Director.

I was also thinking about turning my laptop in something that Mr. Jobs won’t allow under EULA.

My Ridiculous Specification

CPU

AMD Phenom II 1090T overclocked to 3.82Ghz and disabled turbo core.

Encode 1080p video at around 30-40fps x264 (ffmpeg)

Motherboard

Gigabyte MA770-US3

Memory

8GB DDRII-800 Ram (Corsair XMS2)

Still performs quite well with modern games, which is awesome.

GPU

AMD Radeon HD 6970 (2GB GDDR5 Memory)

Decode Xvid & DivX, which is nice, considering that decoding those format is not a problem with Intel Atom let alone Phenom II or i5. Unlike H.264 and VC1 they struggle with Intel Atom.  My HTPC has Intel Atom with Nvidia Ion.

HDD

500GB & 1TB Seagate Hard Drives

Monitor

22″ Samsung Syncmaster 2232bw

Speakers/Headphones

Logitech LS11 / Sennheiser HD201 (Cushioned) & CX300-II (In-ear)

Sennheiser is a very good make, Cushioned is good for movies and games, In-ear is good for iPods the bass is amazing on the CX300-II, if you are a fan of Rock go for it.

I use audio jack on top of the case, not the speaker because I find it’s better.

Keyboard

Microsoft Wired Keyboard 600.

I used to have Microsoft Natural Ergonomic Keyboard 4000 (still got it), it’s good but it’s took up too much desk space, so I which to a smaller keyboard.

Mouse

Microsoft Wireless Mobile Mouse 6000

Yes it’s wireless, yes it’s design for laptop, but I have small hands and feels great because there no wires causing a bit of tension.

OS

Microsoft Windows 7 Ultimate 64-bit

I like to stay flexible, fully activated under OEM-SLP, MS shot themselves in the foot.

Case

Corsair 600T Graphite Series

It’s got lot of rubber grommet for cable router and water cooling, which is nice and awesome.

CJ-Jackson.com gone cool blue!

It’s been awhile since I made my last blog post, I have been quite busy lately, I haven’t even had time to work on RockForums.Co as I’m currectly working on a paid project at the moment.

I have change the theme once again, I was getting bored of the grey background, I also change the webfont in the header because it’s was slow on the iPhone, why Apple uses SVG? I don’t know.

Anyway I will post my rig in my next post!  So see ya around!

Update: I know this is not the best theme in the world, but what awesome about it, is the fact I applied my own Illustrator skills in place with this theme.

RockForums.tk Public Beta

I have finally open up RockForums.tk to the public, the deployment went OK, although I did have a few problems.  Email validation didn’t seem to work, in context with spambots, thank goodness as well, otherwise the forums would of been a complete mess, full of nonsense.  I wouldn’t want that.

How I dealt with the spambots, the first attempt was implementing reCAPTCHA, which didn’t work, the spambots OCR has advanced and will continue to do because some people are simply just motivated by greed and probably has no value for morality but that another story so let move on.

Advanced spambots uses random emails addresses, you probably would think it might be a problem, well trust me they are very easy to detect, why? because those email addresses are so random that almost none of them have a Gravatar.

Gravatar is an online service that a image (knowns as avatar) to one email or more email address, of course not many user have a Gravatar account,  Wordpress bloggers are very likely to have an Gravatar.

Yes I have use Gravatar as the second attempt to prevent, yep I’m actually using beyond it’s purpose.  Here a sample code, it’s very simple.

<?php
$email = "whatever@whatever.com";
$gravatar = 'http://www.gravatar.com/avatar/'.md5(strtolower(trim($email))).'?d=404'; // Note the 404 so it returns blank if there no avatar
$file = @file_get_contents($gravatar);
if($file == '') { // If $file compare to blank
echo 'Error: No Avatar';
} else {
echo 'Avatar found';
}
?>

What I did to the email address was trim it so there no white space, lower cased it and then converted to a md5 checksum and place it into a URL.  Get the contents of the url, run it through a if logic, if true then there no gravatar, therefore stopping the spambots from registering on rockforums.tk as most (if not, all) spambots don’t bother with gravatar.

I have took my time to fixed the email validation problem, I couldn’t get it to work with swiftmailer which came with the framework, so instead I used PHP mail() and it worked like a charm, the validation that came in the email worked with no problem.

Most of the pages on RockForums.tk have passed HTML5 validation, but there is one shortcode that produces img html code without the “alt” attribute, that shoudn’t be a problem I can fixed that very easily.

I have made good use of jQuery, I have not used it in a way that would impair bookmarking or any other critical features of any web browser, it just there to enhance the user experience especially on registration (mostly data validation) and posting new topics.  Enhancing user experience is the general idea of JavaScript, jQuery is just library, a very good one as well, it’s make JavaScript hell of a lot easier.

On the storyboard there was a tag cloud, but trying implement that feature was very frustration and eventually started getting very counter-productive, the main problem was trying to write a SQL query, I just couldn’t get it to count the related records between tag and tag-topic table, maybe it was just a bug with the current version of MySQL, I don’t know.  I did say it was getting counter-productive, so it not wise to dwell on it, so let move on. :)

I have added a few moderation and admin options, such as the ability to edit and promote members and to ban certain tags.

Anyway the forum is in public and this probably won’t be the last evaluation, the link to the forum is below.

http://rockforums.tk

I will think about how I can improve the software.  Anyway I prefer Symfony over CakePHP anyday, anywhere.

More on RockForums.tk

This is a screen-shot of the registration page for rockforums.tk, the very first page I have made use with jQuery and AJAX (with JSON instead of XML), there only two field that have to be unique to other accounts which are username and email, which are validated on both sides client and server, the other fields are validated client-side except for Time Zone and Time Format, they don’t need validation so therefore the ticks will be noticed straight away on those fields as they are actually drop down as you can see.

It took me about two or three hours to perfect this page, I had to make sure that there was no errors and that why it took me longer.

As for RockForums.tk, I really want to get this project out as quick as possible and of course I will make sure that there are no serious errors.  On the positive note I am making good progress on the project, let not forget I have finished University and therefore this project has nothing to do with University.

P.S. I’m aware that my email address is on the screen-shot, but it’s also on my CV anyway, so it not really an issue.  Yes I have change the design, changes happen.

RockForums.tk design progress

First Step – Object-Role Modeling (ORM)

The very first thing I did on the project was design a database using the Object-Role Modeling concept, the only many-to-many relationship mentioned in the diagram is the relationship between the Topic and the Tag.

Second Step – Entity-Relationship Diagram (ERD)

I converted the original database design into a simpler Entity-Relationship Diagram, where there was a many-to-many relationships, the attribute tag became an entity, with a new entity added between Topic and Tag therefore eliminating the need for a many-to-many relationship the very logic that does not apply very well to a real working database such as Oracle and MySQL.  I pronounce SQL as sequel, not S-Q-L.

Third Step – Master Template Design

I get more satisfaction doing it on paper then designing it on a screen, mostly because it just help me think out the position and come up with new ideas, I will probably have the login part on the top right corner.  As for the current year, easy ‘date(“y”);’ on the bottom right corner.  The content are in the next step.

Forth Step – Content Storyboards

Front Page & Bulletin Board

The tag page will be the same but without the tag cloud.  The finished project will have the announcement thing on top.  The Bulletin Board will be a tag-based concept rather than a usual forum-based concept.  A lot of musicians like to experiment with different genre and make new one, therefore forum-based concept will be very complex in that area, with a tag-based concept any users can define there own tag just as musicians can define there own genre therefore adding level of flexibility and cutting down on complexity.

User Profile

Bio part is all about the users, I allow shortcode in there as well, save the admin time from adding custom field.  The shortcode feature is very similar to the one in WordPress.