Determining the App’s Functionality and Structure - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 63

Front-End Planning
Your next step is to start fleshing out the approach you'll be taking with the app's front end, or the visual parts of
the app with which users will interact.
In this section, you will organize your development approach for all the front-end technologies.

What Technologies Are We Using?
We've already discussed the tools we'll be using for this app, but to recap, you'll be building the front end of the
site using the following:

• HTML5

• CSS3

• JavaScript

• jQuery

• The Pusher JavaScript library

You'll be using multiple aspects of each technology to craft a good-looking, easy-to-use, simple front-end
for the app.

Using HTML5
As with pretty much all web apps, the front end will be built using HTML markup. For this app, you'll be taking
advantage of some of the new elements and attributes introduced in HTML5.
You've probably already seen or used any of the new elements, such as the <article> and <footer> elements.
In case you haven't, they're functionally identical to <div> elements, but they're better from a semantic standpoint
because they're self-describing.
You will also be taking advantage of the new <input> types—namely the email type—to encourage touch screen
devices to customize the keyboard to suit the data being entered.
Finally, you'll use the new data attribute to pass information to Cascading Style Sheets (CSS) and jQuery for
various purposes. We'll get more into the how and why of that in the next chapter.

Going Minimalist with the HTML

■ Caution the following is a borderline rant by the authors.

Good HTML markup is a relative term. Good how? Does being functional make it good? Well-formatted? Valid?
Like nearly everything in programming, most of what makes HTML markup “good” is entirely subjective.
There is no globally recognized “right way” to write your markup, and that's probably a good thing because it allows
developers to get creative with HTML elements to create really clever layouts.
However, there are definitely wrong ways to write markup. Things such as a different nested <div> for each
applied CSS class is wrong ; it's just sloppy programming. Using class names that are completely opaque is wrong.
Throwing proper indentation and nesting to the wind is wrong.