Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

HTML Tutorial and Web History lesson

Posted by bryan on May 21, 2016 in AJAX, Flash, HTML, JSON, XML with No Comments

No Gravatar

Today, something unexpected happened. I had the (somewhat unplanned and impromptu) pleasure of showing the ropes to the “new recruit” at work, a student here for a work term over summer break.

Now, we’re not necessarily doing that much coding here yet, as we’re still in the process of bringing back large portions of IT functionality in-house. We do, however, do a lot of software configuration, release management, testing/QA tasks, and, we are ramping up to use a major enterprise CMS to be able to create front-end content quickly (HTML/JS/CSS backed by JSP & EJB following OSGI structure).

I’ve always wondered in the back of my mind, if I were “in charge”, how would I more gently introduce the younger generation to the world of “enterprise programming”? Certainly the “enterprise world” is often significantly different, if not completely far-removed, from the real-world of cutting edge software development based on agile methodologies and lightweight web frameworks, co-developed with the customer in real-time, or implemented competitively overnight at a weekend hackathon. It is also far-removed from the naiively specialized world of “academic coding”, where “programming problems” (albeit sometimes very tricky ones) are assigned with a very clear set of up-front requirements and well-defined metrics for acceptance, where every assignment is given a certain amount of time to complete and graded for completeness and of course for “originality” or “ability-to-follow-the-book-without-copying” (where copying any minor component is seen as the devil’s work, labelled plagiarism, and ostracized).

Enterprise application development on the other hand, often times has no clear-cut requirements, no well-defined acceptance criteria (other than customer happiness) and is both behind schedule and over-budget before coding even begins. That thing about the no copying? Yeah that’s tossed out the window in favour of cutting corners and “getting it to market” as quickly as possible, often at the expense of quality (or in some cases even the development team understanding the solution, the most recent case that comes to mind is this hilarious StackOverflow verbatim copy “programming faux pas” from a Nissan connected car developer). All that being said, enterprise application development isn’t that hard, just more complex and frustrating than greenfielding, open source work, or even consulting. So it turned out to be a good opportunity to take a stab at it, as the student in question only had a year of Computer Science so far and despite some exposure to Java had not much in the way of Web development yet as those courses were coming later in the program. He did however, have a healthy interest in the Gaming industry, an industry which is increasingly finding an audience and monetization options for its wares on Mobile and Web platforms.


“The only thing constant is change”

That saying must be all too familiar for Web Developers everywhere, but I lump “Enterprise Developers” in that group as well (even though they often have to maintain very old decrepit applications that management is either too scared to touch or too stingy to “authorize release of budget” for an upgrade). Wanting to take it from the top, in a sort of crash course, the first thing I did was throw together a list of four HTML files: one representing old-school HTML 4.01, two for xHTML which represented a “knee-jerk” move away from the chaos of earlier HTML to an increasingly strict schema-based approach, and finally one basic responsive HTML5 example which would show the opportunities and where we’re heading with web application development in general.

The following is the HTML tutorial set I put together, if it happens to be of interest:

Here’s a demo of each of the pages:

  1. HTML 4.01 (aka Web 1.0)
  2. xHTML 1.0 Transitional (aka Web 2.0)
  3. xHTML 1.1 Strict (aka Web 2.5)
  4. HTML5 (aka Web 3.0+)

I define each of the demos by their timeframe in the “Web technology timeline”, see the timeline below:

English: Web development timeline
Web development timeline (Photo credit: Wikipedia)


Also, see this excellent image from Nova Spivack on the newly introduced high-level technologies by Web version history:

web_evolution_nova_spivack-1024x680Web version timeline (Photo credit: Nova Spivack)

These two timelines show a few things, but the main thing that should stand out is that technology is constantly evolving and changing. Whether you do web work or slug it out in the enterprise, if you want to stay relevant you need to stay on top of as much as of it as possible. The change is usually for the better, but sometimes for the worse (especially if we repeat the mistakes of yesterday). It is with this in mind that I attempt to humbly share some of the knowledge I’ve accumulated here on this blog. Often times its been experience earned through trial & error, learning the hard way, and getting burned by in-the-line-of-fire high pressure “just get it working” types of deadline situations. As I look on to the future of Web Development and look back on how far we’ve come, I have a great deal of optimism that just about any idea can be made a reality with the technology stacks we are putting in place. As my HTML5 demo states, the steps (WebRTC for Augmented Reality, WebVR for Virtual Reality, and WebGL for immersive/3D Gaming) which will bring us into Web 4.0 the phase many anticipate to be the final state of innovation short of singularity-type fusing with machines at the nanolevel, but now we’re getting a little too Matrix-ey for this tutorial so time to call it a post.


For more on the history of the web see my article on the Semantic Web building blocks explained for the average person, especially take a look at the Web versions table which breaks down the different technologies of focus between Web versions, and the impressive Linked Open Data growth chart animation.