1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="pandoc" name="generator"/>
<meta content="Zhiming Wang" name="author"/>
<meta content="2015-06-08T14:42:50-07:00" name="date"/>
<title>Apple turns its homepage into a WWDC liveblog</title>
<link href="/img/apple-touch-icon-152.png" rel="apple-touch-icon-precomposed"/>
<meta content="#FFFFFF" name="msapplication-TileColor"/>
<meta content="/img/favicon-144.png" name="msapplication-TileImage"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link href="/css/normalize.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/theme.css" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/highlight.css" media="all" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="archival-notice">This blog has been archived.<br/>Visit my home page at <a href="https://zhimingwang.org">zhimingwang.org</a>.</div>
<nav class="nav">
<a class="nav-icon" href="/" title="Home"><!--blog icon--></a>
<a class="nav-title" href="/"><!--blog title--></a>
<a class="nav-author" href="https://github.com/zmwangx" target="_blank"><!--blog author--></a>
</nav>
<article class="content">
<header class="article-header">
<h1 class="article-title">Apple turns its homepage into a WWDC liveblog</h1>
<div class="article-metadata">
<time class="article-timestamp" datetime="2015-06-08T14:42:50-07:00">June 8, 2015</time>
</div>
</header>
<p>WWDC is Apple's biggest event every year, and WWDC keynote always attracts tons of hype. Apple knows that. In the past years folks who can't (at work, in class, etc.) or don't want to watch the crappy live stream would follow the various WWDC liveblogs presented by tech sites like Gizmodo, TechCrunch, Ars Technica, etc. But this year the landscape has changed: Apple rolled its own card-based liveblog at <a href="http://www.apple.com/live/2015-june-event/">www.apple.com/live/2015-june-event</a>.<a class="footnoteRef" href="#fn1" id="fnref1"><sup>1</sup></a> Not only that; during the keynote, Apple redirected its homepage to the liveblog page, so it effectively turned its homepage into a liveblog:</p>
<div class="sourceCode"><pre class="sourceCode zsh"><code class="sourceCode zsh"><span class="kw">></span> curl -sSIL http://www.apple.com
HTTP/1.1 302 Moved Temporarily
Location: http://www.apple.com/live/
Content-Length: 210
Content-Type: text/html; <span class="ot">charset=</span>iso-8859-1
Expires: Mon, 08 Jun 2015 19:16:41 GMT
Cache-Control: max-age=0, no-cache, no-store
Pragma: no-cache
Date: Mon, 08 Jun 2015 19:16:41 GMT
Connection: keep-alive
Server: Apache
HTTP/1.1 301 Moved Permanently
Content-Length: 0
Date: Mon, 08 Jun 2015 19:16:41 GMT
Connection: keep-alive
Server: Apache
Location: http://www.apple.com/live/2015-june-event/
HTTP/1.1 200 OK
Last-Modified: Mon, 08 Jun 2015 15:45:30 GMT
ETag: <span class="st">"0b7bcbfbd14c411e64e728ae4d644de7"</span>
Content-Type: text/html
Cache-Control: max-age=298
Date: Mon, 08 Jun 2015 19:16:41 GMT
Connection: keep-alive
Server: Apache</code></pre></div>
<p>Of course, you miss a few jokes and random shots of Tim or Craig from the official liveblog, but hey, who don't like that official feel?<a class="footnoteRef" href="#fn2" id="fnref2"><sup>2</sup></a></p>
<p>Here are a few screenshots of today's liveblog. Unfortunately I only know some entry level JS, so I wasn't able to capture the entire page, which uses dynamic DOM based on one's position in the page.</p>
<div class="figure">
<a href="/img/20150608-wwdc-2015-banner.png" target="_blank"><img alt="The banner on Chrome." src="/img/20150608-wwdc-2015-banner.png"/></a>
<p class="caption">The banner on Chrome.</p>
</div>
<div class="figure">
<a href="/img/20150608-wwdc-2015-liveblog-960x981.png" target="_blank"><img alt="Introducing OS X El Capitan, 960x981." src="/img/20150608-wwdc-2015-liveblog-960x981.png"/></a>
<p class="caption">Introducing OS X El Capitan, 960x981.</p>
</div>
<div class="figure">
<a href="/img/20150608-wwdc-2015-liveblog-1920x1080.png" target="_blank"><img alt="A fuller experience: 1920x1080." src="/img/20150608-wwdc-2015-liveblog-1920x1080.png"/></a>
<p class="caption">A fuller experience: 1920x1080.</p>
</div>
<p>By the way, here are the full-page screenshots of <a href="http://www.apple.com/osx/elcapitan-preview/">OS X 10.11 El Capitan</a> and <a href="http://www.apple.com/ios/ios9-preview/">iOS 9</a> previews. <code>pageres</code> recently <a href="https://github.com/sindresorhus/pageres/issues/174">cannot render web fonts</a>, which is rather annoying, so I used <a href="https://github.com/mrcoles/full-page-screen-capture-chrome-extension">Full Page Screen Capture</a> to capture the shots. I then resized to 50% to reduce filesizes a bit.</p>
<div class="figure">
<a href="/img/20150608-osx-el-capitan-preview-1920x1080-50%25.png" target="_blank"><img alt="OS X El Capitan" src="/img/20150608-osx-el-capitan-preview-1920x1080-50%25.png"/></a>
<p class="caption"><a href="http://www.apple.com/osx/elcapitan-preview/">OS X El Capitan</a></p>
</div>
<div class="figure">
<a href="/img/20150608-ios-9-preview-1920x1080-50%25.png" target="_blank"><img alt="iOS 9" src="/img/20150608-ios-9-preview-1920x1080-50%25.png"/></a>
<p class="caption"><a href="http://www.apple.com/ios/ios9-preview/">iOS 9</a></p>
</div>
<div class="footnotes">
<hr/>
<ol>
<li id="fn1"><p>The crappy live stream is still there, but thankfully you wouldn't see it if you're on a browser other than Safari. Just look the screenshot of the banner.<a class="footnotes-backlink" href="#fnref1">↩︎</a></p></li>
<li id="fn2"><p>Yeah, I know some people don't; but those people are not likely to be Apple fans either.<a class="footnotes-backlink" href="#fnref2">↩︎</a></p></li>
</ol>
</div>
</article>
<hr class="content-separator"/>
<footer class="footer">
<span class="rfooter">
<a class="rss-icon" href="/rss.xml" target="_blank" title="RSS feed"><!--RSS feed icon--></a><a class="atom-icon" href="/atom.xml" target="_blank" title="Atom feed"><!--Atom feed icon--></a><a class="cc-icon" href="https://creativecommons.org/licenses/by/4.0/" target="_blank" title="Released under the Creative Commons Attribution 4.0 International license."><!--CC icon--></a>
<a href="https://github.com/zmwangx" target="_blank">Zhiming Wang</a>
</span>
</footer>
</body>
</html>
|
