
Apple & HTML5 - taitems
http://www.apple.com/html5/
======
bradgessler
Neat idea, very poor implementation. If you try to view the examples in Google
Chrome, you'll get a notice that you have to download Safari
(<http://skitch.com/bradgessler/dgw7p/apple-html5>)

This sets a very poor example for Apple supporting standards.

~~~
ellyagg
> This sets a very poor example for Apple supporting standards.

Can you, or any of the dozens of upvoters, explain the logic behind that
criticism? It literally seems to make no sense to me, so I must be missing
something. The page talks about emerging web standards and talks about Safari
and Apple's support for them. It mentions that not all browsers support all of
the latest standards, and then it gives examples of some of the latest
standards that Safari supports. So, huh?

~~~
bradgessler
A poignant example is all of the non-standard -webkit CSS extensions Apple
uses for the Gallery demo (<http://www.apple.com/html5/showcase/gallery/>):

    
    
       #gallery-demo .grid2d figure:nth-child(5)  { -webkit-transform: translateX(-241px) translateY(-3px) scale(.45) translateZ(1000px);}
    

If you accept -webkit CSS extensions as a standard, then Internet Explorer has
supported the CSS opacity attribute for years:

    
    
       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    

These extensions are not part of the CSS3 or HTML5 spec.

~~~
mikedouglas
Actually, transform is in the CSS3 working spec[0]. Until the standard reaches
the "Candidate Recommendation" stage, the W3C encourages browser vendors to
use prefixes (-webkit, -moz, etc).

DXImageTransform.Microsoft.Alpha, on the other hand, wouldn't be part of CSS3,
and uses its own specific syntax.

[0]: <http://www.w3.org/TR/css3-3d-transforms/#transform-property>

~~~
statictype
Is there any technical reason why using webkit's browser specific css
attribute and firefox's browser specific css attribute is any better than
using IE's browser specific css attribute?

~~~
pornel
`filter:` syntax isn't compatible with CSS tokenizer (IE<8 is unparseable
without special tokenizer state set by the parser, IE8 uses non-CSS syntax in
CSS string).

IE's transform filter uses only matrix, which scares the hell out of
designers.

------
alanh
This is meant as inspiration, as an eye-opener, a PR move, and a gift to web
developers & designers.

It _does_ use emerging web _standards_. Just because some of them are not
reliable everywhere does not discount that it’s all to be found in W3C and
WHATWG draft specs. Note the HTML itself: They’re using <article>, <figure>,
<header>. It’s really HTML5. (Remember, we consider things “standard” even
before IE supports them.)

This is _not_ meant as a compendium of current best practices. Progressive
enhancement still applies in the real world. Apple knows that.

If you are criticizing this for being not cross-browser enough, you are
completely missing the point.

~~~
buster
Where exactly do you find -webkit-transform in some CSS-standard, again? So,
you are saying all those -webkit-* CSS styles are CSS3 standarized?

~~~
alanh
In the standard, it’s just "transform". "-webkit-" is called a "CSS vendor
prefix" and the idea is this: If the standard changes before it’s finalized —
it does happen — but Safari just implemented "transform" and not "-webkit-
transform", then sites created in the interim could be stuck with broken CSS,
retroactively. Mozilla did this forever ago with "-moz-border-radius" rounded
corners. Even Microsoft started using the "-ms-" vendor prefix.

Apple using "-webkit-" is actually preserves the "open" and "standards" parts
of "open standards". Otherwise it’s embrace and extend.
(<http://en.wikipedia.org/wiki/Embrace_extend_and_extinguish>)

Edit: For clarity, this is how things like -webkit-transform are born
(slightly simplified):

1\. Apple (or Mozilla, or Opera, or Microsoft) decides it would be nice if the
web stack could do X.

2\. Apple devises a property and syntax, implements it internally, evaluates
performance hits, iterates, etc.

3\. Apple releases a public developer build (a "nightly") with X, using the
-webkit- prefix, and blogs about it. <http://webkit.org/blog/130/css-
transforms/>

4\. Apple drafts a spec (no "-webkit-") and submits it to relevant standards
bodies

5\. Standards bodies, browser makers, and document authors weigh in

6\. The draft is modified, clarified, dropped, and/or implemented elsewhere.
<http://webkit.org/blog/130/css-transforms/#comment-23010>

7\. The draft becomes more or less finalized, and user agents should support X
without a vendor prefix

------
dieterrams
Wow. I can only imagine what the reaction would have been if Google released
this with Chrome-only demos. Lots of praise about how Google's leading the
way, pushing browsers forward, and you really ought to give Chrome a try.

But when Apple does it? A barrage of complaints about how Apple doesn't
support standards. It's laughable how transparently people are _looking_ for
something, anything to bitch about when it comes to Apple, no matter what they
do.

~~~
buster
So, when MS crippled web development for years with it's browser strategy and
proprietary crap it was widely considered very harmful for the web. Now, when
Apple does it, it's "pushing the web forward"? We would all use ActiveX
controls and be stuck with IE6 if everyone would think like you. And i would
argue every company would get the same "hate". Even worse, we've all had this
in the past, now we should do everything to keep things a standard and open,
because we know where it leads.

~~~
alanh
Your comment betrays an extreme misunderstanding of vendor prefixes and the
nature of standards development compared to a proprietary system of browser
plug-ins. See other comments on this page. And it wasn’t ActiveX that crippled
web development, buster. It was _the lack of progress and support for emerging
web standards like CSS2 and PNG._ By contributing to standards, the Webkit
team creates the _exact opposite_ effect of IE6. (Accidentally upvoted)

------
niswilsonnissen
Since a lot the html5 modules (and related standards) are still being worked
on, we can't expect every tech demo of the new features to work in every
browser.

Apple wanted to show some very shiny html5 demos and that is fine. There is a
good chance that everything shown there will be working across all the major
browsers in a not too distant future. (Yes they have have to loose the vendor
prefix -webkit first, but that is actually the recommended way to use non-
finalized preview features of the emerging standards).

I see this as Apple pushing the html5 wagon forward, the same as the other
major browser vendors do. Have you tried Internet Explorer 9 Preview demos in
other browsers?

Finally the html standard is moving forward again after years of standstill.
How anybody can complain about that is beyond me.

Cheers!

------
shadowsun7
+1 for Apple educating people on the awesomeness of HTML5.

-1 for being Safari-only.

Then again, when you think about it - the Safari-only filter implicitly tells
people that Safari is the 'only' browser (or the best browser) currently
supporting HTML5; that other browsers have to play catchup.

~~~
thought_alarm
They _explicitly_ say this on the front page: "Not all browsers offer this
support. But soon other modern browsers will take advantage of these same web
standards — and the amazing things they enable web designers to do"

~~~
papachito
The problem is that they block Chrome 5 too, which is more advanced than
Safari 4 (newer version of webkit).

~~~
loewenskind
Except that it isn't. You can run the demo in Chrome if you want. Someone in
this thread did...

~~~
niceguy101
I tried, but didnt work in Chrome. Not that i want it to. Safari is the only
browser on my mac and works almost fine.

~~~
loewenskind
Did you read the thread? At least 3 people (at the time of this reading) have
done it. You have to change the user agent setting.

~~~
smackfu
How can you say they aren't blocking Chrome if you need to say you aren't
Chrome to run it?

~~~
loewenskind
The claim was that Chrome is more advanced. You can run Chrome and verify that
it can't do the more advanced features.

------
silvestrov
It seems like all the samples are targeted at the creative ad bureaus, and the
goal is to educate them that HTML5 has all the features they need for their
creative sites.

First the book publishers, now the ad agencies. The creative sector has really
been in SteveJ's focus for the past half year.

------
jasonkester
They really open themselves up to mockery with this. Even here, in this
community of people who know what's going on with W3 standards, people are
finding the site confusing. Imagine the message this site is sending to the
average user by putting up these cool demos that don't work on his browser:

 _HTML5: The standard that only works on Safari_

I don't think that's the message they're trying to get across, but it's the
one they're sending.

------
shadowsun7
Source code and developer documentation for the demos found here:
<http://developer.apple.com/safaridemos/>

~~~
ciupicri
Btw since when does Apple use PHP[1] instead of WebObjects?

[1] <http://developer.apple.com/safaridemos/typography.php>

~~~
sjs
Probably for small jobs where WebObjects would be overkill. And they don't use
PHP instead of WebObjects they use both PHP and WebOjects, right tool for the
job and all that.

They also use SproutCore, jQuery (or have used it), Gianduia, and for the WWDC
schedule it seems that they use something else, possibly custom.

------
tuxychandru
Picking a demo from <http://developer.apple.com/safaridemos/> and then
clicking on the "View Demo" button allows you to view the demos.

Most of them (except VR) seem to work for me in Chrome on Ubuntu (5.0.375.55
beta).

------
dbrannan
If browsers stick to standards then great, but as this demo proves (since it
only works in Safari) you'll still need to develop for various browsers,
versions, brands, types.

As I see it - I'll stick with Flash. I like the idea of write once and deploy
everywhere, which worked pretty well for me until the iTouch/iPhone/iPad came
along.

------
buymorechuck
CSS 3D transforms are an emerging W3C spec. WebKit has the hooks for
supporting CSS 3D, but a WebKit port like Chrome still needs to add an
underlying scene graph engine ala Core Animation to get 3D rendering going.
It's non-trivial, but possible.

Scene graph engines are hard to build, much like vector graphics engines and
font rendering engines.

That said, Clutter ToolKit (the same one Chrome OS is using for its windowing
manager) is about the closest open source ready-to-go replacement that can do
80% of what is needed by WebKit to do CSS 3D on top of OpenGL. It's on
Google's list to add to Chrome, but not for awhile.

Google seems to be favoring WebGL over CSS 3D (too much detail to discuss
pros, cons, and the politics here), and is making WebGL implementation a
higher priority for now.

------
alanstorm
Does anyone know what word we're supposed to use for "Web Development
techniques that help ensure a consistency of experience across browsers for
all users regardless of browser choice" now that "standards" means something
else?

~~~
drusenko
these are experimental standards. they're being actively developed and
discussed by many browser makers and the standards bodies, and will be the
official standards soon.

don't hate on people trying to push the web forward. everybody is going it in
a very fair, open, democratic method as trying to implement ideas as quickly
as possible.

------
glhaynes
Somewhat buggy in parts on MobileSafari, though very well formatted for iPad.
We certainly expect iPhone OS 4.0 for iPhone / iPod touch, but perhaps we'll
see an update to iPad's version of iPhone OS as well on Monday?

------
crad
Given IE's misleading page about HTML5 support, by omitting the parts they do
not support to make it look like they are the market leader, Apple could have
had something to gain by giving a warning that says something along the lines
of "Your browser doesn't fully support the HTML5 features we're demonstrating,
click here to continue, click here to experience it in Safari."

I want to see how the other browsers stack up in their demos and think it's
short sided of them to not allow that to happen.

------
leviathant
I'm still entirely unimpressed with HTML5's audio capabilities, and this
'showcase' does nothing to improve upon that. Press this button to play a 30
second sample? Browsers were capable of that in the mid nineties.

If they showed me a game with a background track and multiple layered,
triggerable sounds (like just about any Flash game or iPhone game out there) I
would have been a little more satisfied.

The gallery was also suprisingly sluggish on my core 2 quad machine with a
somewhat super duper video card.

------
not_an_alien
From a guy who did many of the examples for chromeexperiments.com and has been
a pretty active promoter of HTML5/standards via three.js and other projects:

 _"I'm happy I rejected doing anything for this apple/html5 page. They should
rethink their policy and give credits to the authors."_

Source: <http://twitter.com/mrdoob/statuses/15417138430>

------
al_james
Has anyone tried these on iPad or iPhone? Some of them are not smooth on my
macbook, surly they must suck on a low CPU device? Or am I wrong?

~~~
niceguy101
Tried on my iphone and iPad. The demos work at low framerate and is kind of
slow. But its just a mobile device. I am not really expecting cpu intensive
html5 application to work on these light devices. Thats what my macpro is for.

~~~
al_james
Yeah, but Apple seem to be suggesting that you _can_ use HTML5 for nice
looking (near native animation) effects on these devices.

~~~
watty
Do they really? Or do they realize that it's going to be some years before
HTML5 is efficient enough and just want native apps?

~~~
al_james
Why would they bother with this HTML5 showcase in that case?

------
seltzered
OK, I see typography, design, transitions -- Where's the games section for my
mom to play Mahjong?

~~~
ugh
Here is a checkers game: <http://developer.apple.com/safaridemos/checkers.php>

------
instcode
Oh Firefox my love!! Plz hurry up!!

<http://developer.apple.com/safaridemos/showcase/typography/>

[http://developer.apple.com/safaridemos/CanvasPixelManipulati...](http://developer.apple.com/safaridemos/CanvasPixelManipulation/)

<http://developer.apple.com/safaridemos/LightTable/>

------
pedrokost
I don't really understand this claim: "Standards aren’t add-ons to the web.
They are the web. And you can start using them today." Standards should
therefore be right there, sitting in you computer for someone to use them. Why
do I have to download Safari then? I prefer to download a 2MB add-on than 30MB
additional browser that I will never use.

~~~
rimantas
So you are still stuffing USB keys to your floppy drive?

------
sjs
I don't see what the big deal is. Disable JavaScript and you can check out all
the demos. :p

------
willhankinson
Where are the games?

~~~
c1sc0
This move is not about games but about iads. (funny side note: iPad insists on
spelling that as aids, ouch) apple is pushing htm5 because it will be an
essential component of apple's next money-making machine: advertising. And
html5 is a great match for advertising: html5 may not be ready for hardcore
gaming, but chucking a few banner ads at the peplum, no problem!

------
not_an_alien
Shows the hypocrisy of Apple when they're saying you shouldn't need a plugin,
but then force you to download a new browser even if it's not necessary.

------
SkyMarshal
<http://imgur.com/TvSup.png>

sigh...

C'mon Apple, we all know Chrome and Chromium can display your HTML5 too.
Probably Opera as well.

------
ck2
The propaganda and hypocriticism from Apple is staggering.

 _(if you are going to downvote me, at least say why not)_

~~~
ugh
I think the accusing party has to explain why something is hypocritical and
propaganda.

~~~
ck2
Ah okay. Well for starters, claiming they are using open standards and then
trying to block based on user-agent for only Safari.

~~~
ugh
Fair enough. They should have done feature detection, not user agent sniffing.
I just don’t think that’s that big of a deal.

