"HTML5" entries

Driving the Momentum of Modern Web App Development

Ido Green on modern web app design considerations and characteristics of great web apps

The rapid pace of improvements in browser technologies and the growith of HTML5 have presented many opportunities and challenges for web app developers. In the following interview, Ido Green, developer advocate for Google Chrome OS, reviews some characteristics of the “modern” web app and covers a few design points and helpful tools developers should keep in mind. Green will expand on these ideas in an upcoming free webcast, “Modern Web Applications Utilizing HTML5 APIs,” on Thursday, May 30 at 10 a.m. PT.

What is a “modern” web app?


Ido Green

Ido Green: A “modern” web app is an application that utilizes HTML5 APIs and browser technologies to let the users accomplish a certain goal.

In most of the “great” web applications we see several characteristics:

  • They are self contained (maybe from here we got the term “one page application”) with one main goal.
  • They feel “native”: they are leveraging HTML5 APIs that let the app have “native” capabilities, like Offline, Geo, drag and drop, transitions, etc.
  • They are “offline first,” since we wish our users to be productive when there is no connection or when there is a flaky connection. These apps are built from the ground up with the idea of “offline.” It’s similar to a native app that you will “install” first and later fetch the data.
  • They are device aware: the apps are working great on mobile devices as well as on laptops and desktops.
  • They offer great performance: the great modern apps are utilizing CSS3, HTML5 and the mobile browsers to give the users a smooth experience where everything is working fast. The “offline first” methodology is helping here as well.

Read more…

JavaScript: Not as Expected

A good match for the similarly unexpected Web?

JavaScript’s ever-growing importance still takes people by surprise. Every time I post about things JavaScript makes possible, I get pushback from people who refuse to be impressed by JavaScript. Why? Because it isn’t what they wanted.

In the course of a week, I get to hear from different quarters about how JavaScript is half Lisp, and terrible either because it dares to be half-Lisp or because it only manages to be half Lisp. Similarly, as functional programming has become more visible, I’ve heard more from people who think JavaScript programming is too functional or not functional enough. People disappointed in JavaScript because it doesn’t have strong typing are a constant, as are people who find prototypal inheritance perverse. JavaScript syntax—I’m sure someone must like it.

It’s tempting to tell the story of JavaScript as a series of historical accidents. Brendan Eich put together LiveScript, applying a variety of techniques to meet a particular set of needs quickly. Since then, we’ve been dealing with JavaScript’s shift from a simple object manipulation language to a much broader and more powerful toolkit, unable to change approach because of the unique dynamics of the browser world.

Read more…

How to Develop for the Mobile Casual Gaming Market

Jesse Freeman talks about designing for the casual gaming market and the role HTML5 will play in the future of game design.

HTML5 is becoming a larger and larger part of game design—so much so that Jesse Freeman (@jessefreeman) expects the future of HTML5 gaming to go beyond the browser. In the following interview, Freeman, a technology evangelist at Microsoft focusing on Windows 8 and HTML5 gaming, talks about the future of game design and the intricacies of designing games for the growing casual gamer market. He will address these topics in more depth in a free webcast, “Mobile Gaming: Are We Casual Enough Yet?,” at 1 p.m. PT on Friday, May 10.

What are some key factors to keep in mind when designing games for the casual market?

jesse_freemanJesse Freeman: It’s hard to nail down what will make a game a success in the casual market, but I am starting to learn a few things about what works and what doesn’t work from my own games. I also watch other successful games in the various mobile stores and keep track of what I feel attributes to their popularity. If you play enough successful casual games, you will start to see a pattern emerge that usually revolves around the same five principles:

  1. The game has mass appeal
  2. There are simple game mechanics
  3. It has a clear reward/motivation system
  4. Great replay value
  5. Low barrier of entry

Read more…

Stop standardizing HTML

It's time for developers to create their own vocabularies

When HTML first appeared, it offered a coherent if limited vocabulary for sharing content on the newly created World Wide Web. Today, after HTML has handed off most of its actual work to other specifications, it’s time to stop worrying about this central core and let developers choose their own markup vocabularies and processing.

When the W3C first formed, it formed around HTML, the core standard of content on the Web, defining the structure, appearance, and behavior of content. Over the next few years, however, it became clear that HTML was doing too much, and the W3C and other groups refactored appearance, behavior, and many semantics into separate specifications:

  • Cascading Style Sheets (CSS) took responsibility for presentation and layout.

  • JavaScript took responsibility for behavior, aided by the Document Object Model (DOM) and a variety of APIs for handling device and multimedia interactions.

  • WAI-ARIA took responsibility for accessibility semantics, ensuring that content remained available to a broad audience even if developers pushed the current boundaries of markup.

It’s not a completely neat separation – some of CSS feels like behavior, and JavaScript can manipulate presentation, for example, but it certainly took a lot of pieces out of HTML. A few aspects of HTML, notably media inclusion, are still mostly handled at the markup level, but most of them aren’t any longer. Forms and linking are both still defined in HTML itself, but aren’t difficult to implement separately.

Read more…

HTML5 makes offline web apps possible

Jonathan Stark will offer hands-on instruction in offline web app design for web designers and developers.

With advances in HTML5, web apps no longer require an Internet connection — thanks to HTML5’s support of client-side storage, web apps now can run offline in today’s browsers.

“An HTML5 offline application is simply a website that has been configured to store data locally in the user’s browser so that some or all of its functionality is available when the device is not connected to the Internet,” mobile consultant and web evangelist Jonathan Stark explained in a recent interview. “There are several technologies in the HTML5 family of specs that make offline web apps possible — Offline Application Cache, Web SQL Database, Web Storage, etc.”

Browser support, of course, is an essential consideration. “Support for the most critical offline technologies (Offline Application Cache, Web Storage, and Web SQL Database) is very good across both desktop and mobile browsers,” Stark said. “Even so, I recommend treating offline support as a progressive enhancement — if offline support is an absolute requirement for your web app, you’ll probably have to document which browser/OS combinations are explicitly supported and provide ‘best effort’ support for everything else.”

You can find out more about HTML5 and offline web apps at the upcoming O’Reilly webcast, “Building Offline Web Apps with HTML5,” presented by Stark, on Thursday at 10 a.m. PT. Attendees of the webcast should have a working knowledge of HTML and JavaScript, Stark noted, adding that “experience with SQL is helpful if you plan to use Web SQL Database.” You can sign up for the free, hour-long webcast on our O’Reilly Community site.

Four short links: 15 March 2013

Four short links: 15 March 2013

Search Ads Meh, Hacked Website Help, Web Design Sins, and Lazy Correlations

  1. Consumer Heterogeneity and Paid Search Effectiveness: A Large Scale Field Experiment (PDF) — We find that new and infrequent users are positively influenced by ads but that existing loyal users whose purchasing behavior is not influenced by paid search account for most of the advertising expenses, resulting in average returns that are negative. We discuss substitution to other channels and implications for advertising decisions in large firms. eBay-commissioned research, so salt to taste. (via Guardian)
  2. Google’s Help for Hacked Webmasters — what it says.
  3. 14 Lousy Web Design Trends Making a Comeback Thanks to HTML 5 — “mystery meat icons” a pet bugbear of mine.
  4. The Human Microbiome 101 (SlideShare) — SciFoo alum Jonathan Eisen’s talk. Informative, but super-notable for “complexity is astonishing, massive risk for false positive associations”. Remember this the next time your Big Data Scientist (aka kid with R) tells you one surprising variable predicts 66% of anything. I wish I had the audio from this talk!
Four short links: 22 February 2013

Four short links: 22 February 2013

Indiepocalypse Continued, Unblockable p2p Twitter, Disposable Satellites, and iOS to HTML5

  1. Indiepocalypse: Harlem Shake Edition (Andy Baio) — “After four weeks topping the Billboard Hot 100, Macklemore and Ryan Lewis’s “Thrift Shop” was replaced this week by Baauer’s “Harlem Shake,” the song that inspired the Internet meme.”
  2. SplinterNet — an Android app designed to create an unblockable Twitter like network that uses no cellular or Internet communications. All messages are transmitted over Bluetooth between users, creating a true peer-to-peer messaging system. All messages are anonymous to prevent retaliation by government authorities. (via Ushahidi)
  3. Disposable Satellites (Forbes) — “tiny, near-disposable satellites for use in getting battlefield surveillance quickly […] launched from a jet into orbit, and within a few minutes […] provide soldiers on the ground with a zoomed-in, birds-eye view of the battlefield. Those image would be transmitted to current communications devices, and the company is working to develop a way to transmit them to smartphones, as well.”
  4. Native iOS to HTML5 Porting Tool (Intel) — essentially a source-to-source translator that can handle a number of conversions from Objective-C into JavaScript/HTML5 including the translation of APIs calls. A number of open source projects are used as foundation for the conversion including a modified version of Clang front-end, LayerD framework and jQuery Mobile for widgets rendering in the translated source code. A porting aid, not a complete translator but a lot of the dog work is done. Requires one convert to Microsoft tools, however. (via Kevin Marks)
Four short links: 28 November 2012

Four short links: 28 November 2012

Ethical Machines, Fault Tolerance, Offline HTML5, and Doomy Data

  1. Moral Machinesit will no longer be optional for machines to have ethical systems. Your car is speeding along a bridge at fifty miles per hour when errant school bus carrying forty innocent children crosses its path. Should your car swerve, possibly risking the life of its owner (you), in order to save the children, or keep going, putting all forty kids at risk? If the decision must be made in milliseconds, the computer will have to make the call. (via BoingBoing)
  2. Hystrixa latency and fault tolerance library designed to isolate points of access to remote systems, services and 3rd party libraries, stop cascading failure and enable resilience in complex distributed systems where failure is inevitable. More information. (via Tom Loosemore)
  3. Offline First: A Better HTML5 Experience — can’t emphasize how important it is to have offline functionality for the parts of the world that don’t have blanket 3G/LTE/etc coverage. (280 south from SF, for example).
  4. Disaster of Biblical Proportions (Business Insider) — impressive collection of graphs and data showing commodity prices indicate our species is living beyond its means.
Four short links: 12 October 2012

Four short links: 12 October 2012

Designers and Coders, Randomised Parachute Trials, Testing HTML5 Features, and Backbone Book

  1. Code Talks and Designers Don’t Speak the Language (Crystal Beasley) — Many of the bugs, however, require a deep understanding of why the product exists in the marketplace and a thorough understanding of the research that underpins the project. These strategic questions are analogous to what a software architect would do. I was on the Persona project full time for three months before I felt confident making significant choices about UX.
  2. Parachute use to prevent death and major trauma related to gravitational challenge: systematic review of randomised controlled trials (British Medical Journal) — you don’t need to subscribe to appreciate this.
  3. html5test — see how the browsers stack up in features and compliance.
  4. Backbone FundamentalsA creative-commons book on Backbone.js for beginners and advanced users alike.

Publishing News: HTML5 may be winning the war against apps

Publisher moves lean toward HTML5, MIT students present news reporting solutions, and Penguin and Macmillan respond to the DOJ.

Some are sticking with apps, but many publishers are choosing HTML5-based solutions; students at MIT have solutions for news; and Penguin and Macmillan tell the DOJ they weren't involved in price fixing.