#52WeeksOfCode Week 16 – HTML 5

Week: 16

Language: HTML 5

IDE(s): TextWrangler

Background:

Technically, HTML isn’t a programming language but a markup language. But version 5 has some interesting features so I’m learning something here.

Boy, did I wade into a crap storm.

It’s been quite a while since I’ve poked around with HTML and I was interested in the multimedia support that was being built into the HTML 5 specification. Like a lot of us, I’ve had to struggle with browser plug-ins like Flash, Silverlight and once even RealPlayer.  All just to watch a video or play an animation or listen to a sound file.

That’s just for a desktop computer, by the way. Once you get into mobile devices, it gets even worse. Either the plug-ins aren’t available (and you are blocked from whole chunks of the Internet) or they chew up your battery life like crazy.

But what if we didn’t have to deal with that? What if we could just play this stuff in our browsers with no extra software required? That’s one of the problems that HTML 5 was designed to solve and that’s also how the W3C ran into a buzz saw of nerd rage.

Let me explain. Every Web browser has something called a DOM or Document Object Model. You can think of it as an abstract model of a Web page that, in theory, lets Web developers write code that works across different platforms without having to create different versions for multiple operating systems or browsers.

Please note the phrase ‘in theory’.

A DOM is supposed to be a standard so, of course, every browser vendor came up with their own version. Sure, the basic elements were supported by everybody but they just couldn’t resist putting their own special little features to differentiate themselves from the competition. So before you knew it, Web developers were having to write different code for different platforms.

If you’ve ever gone to a Web page and got a message that you needed a different browser or if the same page doesn’t work the same way in two different browsers (if it works in either), then you know exactly what I’m talking about.

ANYWAY, it’s gotten better. Kind of.

The W3C created a new DOM element for HTML 5, called HTMLMediaElement, which gives the DOM the ability to present content like audio and video which would have previously required a plug-in.

But the advantage of the plug-ins (for content providers, anyway) was that they allowed restrictions on how that content was consumed using DRM or Digital Rights Management.

Now nerds (and other people — I count myself as a nerd) are not big fans of DRM. “Information wants to be free” and all that. People who create content (or just own it) occasionally want to get paid.

So when the W3C came out with something called Encrypted Media Extensions (EME) that extend the functionality of HTMLMediaElement to play protected content, a large portion of the nerd universe exploded in white-hot rage-gasm. (Remember, I’m a nerd. I can use that word.)

The Free Culture Foundation posted an indignant online editorial entitled “Don’t let the myths fool you: the W3C’s plan for DRM in HTML5 is a betrayal to all Web users.”

(I left the emphasis in to portray just how irritated they were.)

Let’s take a look at the relevant part of the documentation:

This specification does not define a content protection or Digital Rights Management system. Rather, it defines a common API that may be used to discover, select and interact with such systems as well as with simpler content encryption systems. Implementation of Digital Rights Management is not required for compliance with this specification: only the simple clear key system is required to be implemented as a common baseline.

The common API supports a simple set of content encryption capabilities, leaving application functions such as authentication and authorization to page authors. This is achieved by requiring content protection system-specific messaging to be mediated by the page rather than assuming out-of-band communication between the encryption system and a license or other server.

Now I’m just a Simple Country Lawyer, but it seems like this is saying that while DRM is not built in to HTML 5, EME is designed to let content providers still use DRM.

So if you were looking to get rid of browser plug-ins, then good news for you. If you were looking to get rid of protected content on the Web, you’re out of luck.

Discussion:

I used MAMP for my Web server and built a quick and dirty little Web page that includes an audio file. HTML 5 makes this much easier than it once was, since you can let the Web server and browser figure out between themselves how to present the content. Here’s the code:

<!DOCTYPE html>
<html>
<head>
<title>52 Weeks of Code - Week 16 - HTML 5</title>
<meta charset="utf-8">
<meta name="description" content="The head tag contains the title and meta tags - important to the search engines, and information for the browser to properly display the page.">
<body>
<p>My first HTML 5 webpage</p>
<p>Here is the sound of someone saying 'hello'<p>
<p>Just click on the play control.<p>

<audio controls src="sounds/hello.mp3">
<p>It's very easy to embed sounds in HTML 5. Just use the code:<p>
<pre><audio controls src="hello.mp3">
</audio></pre>
</audio>
</body>
</head>
</html>

I snagged the sound file from here. Here’s what it looks like in Google Chrome:

 

Advertisements

#52WeeksOfCode Week 15 – OpenGL

Week: 15

Language: OpenGL

IDE(s): XCode

Background:

Once upon a time (okay, it was the late ‘80s/early ‘90s), if you wanted to code a video game, you had to program ‘down to the metal’. This gave you a lot of control and power, but you had to do everything yourself. This included all of the graphics and since that’s most of the heavy lifting, anyone who could come up with a easier way to render shapes and colors on the screen would have the gratitude of programmers everywhere.

Of course, there’s a problem. The advantage of coding down to the metal is that you can take advantage of the features of your video card. The disadvantage is you have to scramble to support new cards or limit your user base and let your code rot as new video cards roll out.

So you have a couple of choices. You can go the DirectX route like Microsoft and just exert your market influence to control the hardware via your PC industry partners. OR you can do what the OpenGL folks did.

The OpenGL Architecture Review Board produced a set of standards for rendering 2D and 3D graphics. OpenGL is designed to be multi-platform and vendor-neutral. Please note that the Board doesn’t supply any actual software but just a set of standards. If you are a video card manufacturer you can download a set of specifications for free and make sure your hardware supports the graphical operations detailed in the OpenGL standards.

DirectX, on the other hand, is controlled by Microsoft and they are the ones that decide what platforms (hardware and software) support it. Well, I say ‘software’. I mean Windows. The DirectX runtime (the part that lets DirectX software work) is built into Windows so it’s basically plug and play. In addition, while OpenGL only specifies methods for rendering graphics, DirectX includes support for audio and gaming controllers. (To be fair, OpenGL was originally developed for engineering and CAD software, not games).

That being said, Microsoft does support OpenGL in Windows along with DirectX so you can, in theory, get the best of both worlds. Of course, I would question not only what percentage of developers take advantage of this, but why they would bother. Granted, if you’re a fan of OpenGL and want to get your game up fast on Windows, then using DirectX for the non-graphical work would keep you from re-inventing the wheel. As I’ve stated before, I Am Not A Programmer(™) and I’d like an answer to this question someday.

As a general rule, I’m in favor of open standards so I suppose that if I wrote games I would probably gravitate towards OpenGL.  There are others who agree, but opinions differ.

Discussion:

I decided to use Xcode simply because of convenience. I used it back in grad school to do some of my (non-Java) assignments and it’s pretty nice, especially considering that it’s free. The current version (5.1.1) is a definite step forward (and yes, I’ve used Visual Studio) and I was able to set things up pretty quickly. I grabbed some sample code from Apple, opened it in the IDE and (absent a few warnings) was able to build and run a nice little animated cube-type thing. It’s written in Objective-C and looks something like this:

It’s pretty cool. The cube rotates slowly around and you can grab it with your mouse and drag it around. I didn’t customize the code too much (added the HELLO WORLD just for grins) so feel free to grab a copy from Apple and play around.

#52WeeksOfCode Week 14 – C++

Week: 14

Language: C++

IDE(s): XCode

Background:

It’s been a few years since I’ve used C++. I started out with Fortran in 1977 (with punch cards…pardon me while I adjust the onion in my belt), then Basic, moving on through Pascal, shell scripting,Lisp, Assembler, awk and C. I generally picked up programming languages as I needed them for work or school. (Frankly once you get past the first two or three, it becomes easier to get up to speed on new ones. The trick to learning a programming language is to have a project that holds your interest.)

C++ was basically the C language with some extras. (The name is a bit of an inside joke, meaning literally “increment C by 1”.) So this means that you can mix C code with C++ code and it will still compile and run. It’s not a good idea, for the sake of manageability, but it will work.

I like C++. I was comfortable with C and C++ added enough good features that the transition wasn’t too tough. (C# on the other hand…I’m not a fan. Just my opinion.)

C++ was my first introduction to Object-Oriented Programming (OOP). Previously, I felt like I had to micromanage every activity of my software. With OOP, however, I could create software objects with properties (things they know) and methods (things they know how to do) and just set them loose with instructions. It seemed pretty natural to me and there was a good library of pre-written objects that I could use so I didn’t have to re-invent the wheel.

At the time, C++ and Java were the New Hotness so these were the languages I taught in my school’s Software Engineering program. C# did come up later and we incorporated it into the curriculum, displacing both C++ and Java.  But before that happened, I discovered two of what are still my favorite C++ textbooks:

Fundamentals of C++ and Data Structures (Lambert) – Despite the title, this is a surprisingly friendly book. You will need to have some programming background but the book opens with a quick review of the essentials of C++. The writing is friendly, with plenty of diagrams and code examples and it even walks you through the math of analyzing algorithms, a topic that can be a bit intimidating to the newbie coder.

Beginning C++ Game Programming (Dawson) – This is a surprisingly subversive book. Your typical programming textbook is pretty dry and full of dull, mostly theoretical assignments. They might try to liven it up a bit by having you ‘create an inventory management system for a video rental store.’ Get it? Because renting videos and managing store inventory are what all the cool kids are doing these days!

But Dawson takes a different tack and I applaud him for it. He spends a lot of time talking about computer games and how they work with plenty of examples. The fact that these examples just happen to use the programming technique in the current chapter is just a happy coincidence. So the student spends the entire time messing around with games and by the end of the book is dealing with topics like inheritance and polymorphism. I think this is brilliant especially since my edition is copyright 2004, several years prior to the gamification of learning to code. I’m not sure why more computer textbooks for beginners don’t use this technique. I think you could even teach math like this. (Note to self: idea for a math textbook….)

Both of these books still have pride of place on my bookshelf.

Discussion:

C++, Java and C# were all designed to solve the same problem – those darn programmers. All of these languages impose structure and new rules on programmers in an attempt to keep them from stomping all over system resources either accidentally or on purpose. C++ and C# did this by building on C (C# added some features like garbage collection from Java) and Java just wrote the rules from scratch.

As a result, C++ and C# still let you write misbehaving programs and count on you wanting the new features enough to code in a safer, more managed fashion. Java doesn’t let you do that, which is why some programmers think Java is too structured. Which, to Java, is sort of the point.

Once again, this week’s program is pretty simple. Just a little hangman program with some sample code from Dawson:

macpro15:week_14_cplus tsinclair$ ./week_14_cplus
Welcome to Hangman.  Good luck!
You have 8 incorrect guesses left.
You've used the following letters:
So far, the word is:
-----
Enter your guess: e
That's right! E is in the word.
You have 8 incorrect guesses left.
You've used the following letters:
E
So far, the word is:
-E---

Enter your guess: l
That's right! L is in the word.

You have 8 incorrect guesses left.
You've used the following letters:
EL
So far, the word is:
-ELL-

Enter your guess: h
That's right! H is in the word.

You have 8 incorrect guesses left.
You've used the following letters:
ELH
So far, the word is:
HELL-

Enter your guess: o
That's right! O is in the word.
You guessed it!
The word was HELLO

 

In case you’re interested, the source code is available here.

 

References:

Lambert, K., & Naps, T. L. (1998).Fundamentals of program design and data structures with C. Cincinnati: South-Western Educational Pub.

Dawson, Michael. Beginning C through Game Programming. Australia: Course Technology, 2011. Print.

#52WeeksOfCode Week 13 – Graphics Challenge

Week: 13

Language: Graphics (any platform)

IDE(s): TextWrangler, bash

Background:

This week’s challenge is a little different, which is to explore graphic design. One of the suggestions was to ‘create some ASCII art’. I’m not an artist (you’re thinking of my brother Pete) but the topic sparked a chain of thought for this week’s post.

I’m a fan of ASCII, which is to say plain text. For coders, ASCII text is the easiest form of communication for software. It’s a quick and easy way to communicate with the user and can be used to easily pass data from one program to another.

Programming in Unix (and Unix-like systems such as Linux or BSD) is based on programs that read and/or emit ASCII code. This way all programs have a common language and the system simply provides hooks for different ways of passing the ASCII around.

If you’ll give me a moment to tie an onion firmly to my belt I’ll take you back to the olden days, when we didn’t have these fancy live-rendered 3D graphics and gesture controls. Yes, we typed because that’s all we had. Please note that I don’t necessarily want to go back to that. But I didn’t mind it and it’s still around in many ways,which is my point.

Anyway, humans being what they are, folks didn’t want to just type messages at each other. They decided to do art as well. Pre-Internet, this took place on Bulletin Board Systems (BBSs). Users would create their pictures, share them and use them as part of the signature text. In the early days of Usenet, there was at least one discussion group dedicated to ASCII art (rec.arts.ascii). Of course we still use ASCII art now, ex. emoticons.

For those of you who’d like to play with this palette, there are tutorials available as well as collections of animation done with ASCII and javascript. Someone even translated the first Star Wars movie into ASCII animated form. (Just type

telnet towel.blinkenlights.nl

at the command line.)

ASCII is still the lingua franca of the Internet. This Web page, for example, is just rendered from HTML, Javascript and CSS, all plain text. Even the language that Web servers use to communicate is plain text.

A surprising amount of behind-the-scenes Internet also runs on ASCII. Email (IMAP, POP3, SMTP), file sharing (HTTP, FTP, WebDAV) all work by passing plain old text around.

Discussion:

As I stated earlier, I’m no artist so I kind of wimped out on this week’s challenge. (I have a few ideas that would have taken me too long to implement and may come back to this later.) So I just put together a quick and dirty bash script to dump out (in the tradition of this blog) the phrase ‘HELLO WORLD’ in ASCII.

Here’s what the output looks like:hello_ascii.png

As you can see, the ‘W’ was a bit tricky as well as making the ‘D’ and ‘O’ look different enough. (I’m no artist, as I said.) I won’t insult you by posting the code.