SlideShare a Scribd company logo

Developing for iPhone

•
•
Tim Lucas
Tim Lucas

presentation by myself and Pete Ottery at Web Directions South 2008 discussing our experience developing iphone.news.com.au, and my experience with the mobile version of webjam.com.au

TechnologyNews & Politics
1 of 154
Download to read offline
developing for the iPhone tim lucas & pete ottery
RAILS & JAVASCRIPT
2 parts.
it’s SHITDANGs, not iphones
why build a mobile version?
IPHONE FRAMEWORK GRIPES photo by Scot Campbell flickr.com/people/randomurl
Mobile Safari CSS3 Javascript
OLD SCHOOL MOBILE DEVELOPMENT
IT’S EASY TO BE DISTRACTED BY THE HYPE photo by Mark Cohen flickr.com/people/rageman
You should not make sites for the iPhone - and that includes the URL.
Mobile 2.0: Design and Develop for the iPhone and Beyond by Brian Fling Web 2.0 Expo, San Francisco, April 22, 2008 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
1st of many
developing for the iPhone tim lucas & pete ottery
developing for Super Hot Internet Touchscreen Devices And Next Generation Mobiles
developing for S H I T D A N G Mobiles
developing for SHIT DANG ! Mobiles
developing for SHITDANGs tim lucas & pete ottery
developing for Mobile 2.0 tim lucas & pete ottery
Entry Ticket
<link media=’only screen and (max-device-width: 480px)’ ...
OLIVER WEIDLICH
One Web, No Go.
iphone.news.com.au
.mobile pages
redirect users
HTTP Header: User-Agent
Only redirect /
photo by Esti Alvarez flickr.com/people/esti COOKIES
“mode”
use URLs!
iphone.news.com.au -> link to www.news.com.au
/home.mobile -> /?no-mobile-redirect=true
/webjam8.mobile -> /webjam8
/webjam8 -> /webjam8.mobile
IPHONE FRAMEWORK GRIPES photo by Scot Campbell flickr.com/people/randomurl
iUI ciUI WebApp.Net
1. Native iPhone UI 2. Ajax-style page nav 3. Swoosh!
Create Navigational Menus and iPhone interfaces No knowledge of JS required Provide a more “iPhone-like” experience
Native iPhone UI
OS SPECIFIC DESIGN DOES NOT AGE WELL
Building a great mobile user experience is hard. Go easy on yourself by starting simple. Brian Fling, Mobile 2.0
2. AJAX-style page navigation
WHILST IT MIGHT IMPRESS
AND FEEL A BIT SNAPPIER
HOW MANY KITTENS DO WE NEED TO SACRIFICE? photo by fenlandsnapper flickr.com/people/32834218@N00
Back button
Bookmarking
URLs
phones w/o javascript
NEW GENERATION OF ACCESSIBILITY ISSUES? photo by Adrian Q flickr.com/people/aquan
WWJKD? photo by Faruk Ateş flickr.com/people/kurafire
WHO USES AN IPHONE IN BED? photo by Damien Roué flickr.com/people/damienroue
efficient interactions
EXAMPLE: WEBJAM 8 PHOTO BROWSING
AJAX Data URLs CSS Sprites Asset Bundling Cache Headers YSlow
3. The Swoosh Effect
transitions
and
animations
are
all
about
subtlety
only 2 people allowed.
Use your existing tools
Pete
Part 1 Different interaction models. Design for phones & iphones.
Part 2 Getting started. Code examples.
mice vs thumbs?
40 x 15 pixels
320px 416px
thumbs/fingers = about 50 x 50px
thumbs/fingers = about 50 x 50px
Simplify as much as you can.
And then delete a bit more.
“Visiting web sites that have been redesigned for the iPhone is often a quicker and more pleasing experience than it is on ... 20-inch or larger screens.”
phones vs iPhone
Getting started
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title>Example</title> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> qÉñí <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> <ul> <li><a href=quot;linkquot;>Finally a suit to be worn in the shower</a></li> <li><a href=quot;linkquot;>Smelly know-it-alls the ultimate irritation</a></li> <li><a href=quot;linkquot;>Sorry man’s ass thrown in jail</a></li> <li><a href=quot;linkquot;>Ike survivors in the lion’s den</a></li> <li><a href=quot;linkquot;>Woman finds python in Dutch hotel toilet</a></li> </ul> </body> </html>
qÉñí
qÉñí
qÉñí
qÉñí
qÉñí
qÉñí
qÉñí
qÉñí
qÉñí
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title>Example</title> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> qÉñí <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> <ul> <li><a href=quot;linkquot;>Finally a suit to be worn in the shower</a></li> <li><a href=quot;linkquot;>Smelly know-it-alls the ultimate irritation</a></li> <li><a href=quot;linkquot;>Sorry man’s ass thrown in jail</a></li> <li><a href=quot;linkquot;>Ike survivors in the lion’s den</a></li> <li><a href=quot;linkquot;>Woman finds python in Dutch hotel toilet</a></li> </ul> </body> </html>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> qÉñí <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> <ul> <li><a href=quot;linkquot;>Finally a suit to be worn in the shower</a></li> <li><a href=quot;linkquot;>Smelly know-it-alls the ultimate irritation</a></li> <li><a href=quot;linkquot;>Sorry man’s ass thrown in jail</a></li> <li><a href=quot;linkquot;>Ike survivors in the lion’s den</a></li> <li><a href=quot;linkquot;>Woman finds python in Dutch hotel toilet</a></li> </ul> </body> </html>
qÉñí
qÉñí
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> qÉñí <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> -- code continues below --
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } body { font: 16px/1.3 Helvetica; } </style> </head> <body> qÉñí <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> -- code continues below --
qÉñí
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } body { font: 16px/1.3 Helvetica; } h1 { } font-size:1.6em; qÉñí .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
qÉñí
<html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; qÉñí border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
qÉñí
qÉñí
qÉñí
body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } qÉñí </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } h2 { qÉñí font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } h2 { qÉñí font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí
h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí background: url(quot;sprites.pngquot;) no-repeat 100% -5px;
h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí background: url(quot;sprites.pngquot;) no-repeat 100% -5px;
h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí background: url(quot;sprites.pngquot;) no-repeat 100% -5px; ul { margin:0; padding:0; list-style-type:none; } li { margin:0; padding:0; border-bottom: 1px dotted #ccc; } li a { padding: 12px 30px 12px 0; background: url(quot;sprites.pngquot;) no-repeat 100% -105px; }
text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; background: url(quot;sprites.pngquot;) no-repeat 100% -5px; } ul { margin:0; padding:0; list-style-type:none; } li { qÉñí margin:0; padding:0; border-bottom: 1px dotted #ccc; } li a { padding: 12px 30px 12px 0; background: url(quot;sprites.pngquot;) no-repeat 100% -105px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; background: url(quot;sprites.pngquot;) no-repeat 100% -5px; } ul { margin:0; padding:0; list-style-type:none; } li { qÉñí margin:0; padding:0; border-bottom: 1px dotted #ccc; } li a { padding: 12px 30px 12px 10px; background: url(quot;sprites.pngquot;) no-repeat 100% -105px, url(quot;sprites.pngquot;) repeat-x 0 100%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
some stats on usage
ãKåÉïëKÅçãK~ì ä~ìåÅÜÉÇ=åçî=MT
ãKåÉïëKÅçãK~ì áéÜçåÉKåÉïëKÅçãK~ì ä~ìåÅÜÉÇ=åçî=MT ä~ìåÅÜÉÇ=àìäó=MU
mfÛë ãKåÉïëKÅçãK~ì ïÉÉâÇ~óë ïÉÉâÉåÇë
mfÛë áéÜçåÉKåÉïëKÅçãK~ì ïÉÉâÇ~óë ïÉÉâÉåÇë
the end. Questions?

Recommended

Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Avenga Germany GmbH
 
Access youtube in china! china worldchat
Access youtube in china! china worldchatAccess youtube in china! china worldchat
Access youtube in china! china worldchat榴梿 坊林
 
Mobile Learning v3.8 @ Glenbrook South
Mobile Learning v3.8 @ Glenbrook SouthMobile Learning v3.8 @ Glenbrook South
Mobile Learning v3.8 @ Glenbrook SouthDarren Kuropatwa
 
Mobile Learning v3.6
Mobile Learning v3.6Mobile Learning v3.6
Mobile Learning v3.6Darren Kuropatwa
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design TipsAndroid Developers
 
HTML5: 5 Quick Wins
HTML5: 5 Quick WinsHTML5: 5 Quick Wins
HTML5: 5 Quick WinsJeff Leombruno
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09pemaquid
 
Lca2009 Video A11y
Lca2009 Video A11yLca2009 Video A11y
Lca2009 Video A11yguesta3d158
 

Recommended

Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Avenga Germany GmbH
 
Access youtube in china! china worldchat
Access youtube in china! china worldchatAccess youtube in china! china worldchat
Access youtube in china! china worldchat榴梿 坊林
 
Mobile Learning v3.8 @ Glenbrook South
Mobile Learning v3.8 @ Glenbrook SouthMobile Learning v3.8 @ Glenbrook South
Mobile Learning v3.8 @ Glenbrook SouthDarren Kuropatwa
 
Mobile Learning v3.6
Mobile Learning v3.6Mobile Learning v3.6
Mobile Learning v3.6Darren Kuropatwa
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design TipsAndroid Developers
 
HTML5: 5 Quick Wins
HTML5: 5 Quick WinsHTML5: 5 Quick Wins
HTML5: 5 Quick WinsJeff Leombruno
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09pemaquid
 
Lca2009 Video A11y
Lca2009 Video A11yLca2009 Video A11y
Lca2009 Video A11yguesta3d158
 
Los Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionLos Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionPeter Lubbers
 
Monitoring your electricity usage
Monitoring your electricity usageMonitoring your electricity usage
Monitoring your electricity usageDale Lane
 
Jabber Bot
Jabber BotJabber Bot
Jabber BotAizat Faiz
 
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?Carlos Ramon
 
Be HTML5-ready today
Be HTML5-ready todayBe HTML5-ready today
Be HTML5-ready todayOleksandr Khomenko
 
Scottish Web Folk: Three (5-minute) ways to improve your Website
Scottish Web Folk: Three (5-minute) ways to improve your WebsiteScottish Web Folk: Three (5-minute) ways to improve your Website
Scottish Web Folk: Three (5-minute) ways to improve your WebsiteGareth Saunders
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Alfresco Software
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overviewreybango
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5Christopher Schmitt
 
BNC Tech Forum 09: Lexcycle Stanza demo
BNC Tech Forum 09: Lexcycle Stanza demoBNC Tech Forum 09: Lexcycle Stanza demo
BNC Tech Forum 09: Lexcycle Stanza demoBookNet Canada
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examplesgopivthmk
 
Html5
Html5Html5
Html5anubavam-techkt
 
Widgets Tools Keynote
Widgets Tools KeynoteWidgets Tools Keynote
Widgets Tools KeynoteMichael Mahemoff
 
PL2235 2009 1 HTML
PL2235 2009 1 HTMLPL2235 2009 1 HTML
PL2235 2009 1 HTMLAliamat UBD
 
Josephj Yui Nctu 2
Josephj Yui Nctu 2Josephj Yui Nctu 2
Josephj Yui Nctu 2Joseph Chiang
 
Microformats
MicroformatsMicroformats
MicroformatsRafael Mumme
 
Http
HttpHttp
HttpColegio loyola
 
Про YAPC::TV
Про YAPC::TVПро YAPC::TV
Про YAPC::TVAndrew Shitov
 
07 Collada Overview
07 Collada Overview07 Collada Overview
07 Collada Overviewjohny2008
 
Data Portability - Fronteers Meetup
Data Portability - Fronteers MeetupData Portability - Fronteers Meetup
Data Portability - Fronteers MeetupAndreas - Creten
 
Introducing... Bananajour!
Introducing... Bananajour!Introducing... Bananajour!
Introducing... Bananajour!Tim Lucas
 
RORO May Lightning Preso Madness
RORO May Lightning Preso MadnessRORO May Lightning Preso Madness
RORO May Lightning Preso MadnessTim Lucas
 

More Related Content

Similar to Developing for iPhone

Los Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionLos Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionPeter Lubbers
 
Monitoring your electricity usage
Monitoring your electricity usageMonitoring your electricity usage
Monitoring your electricity usageDale Lane
 
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?Carlos Ramon
 
Scottish Web Folk: Three (5-minute) ways to improve your Website
Scottish Web Folk: Three (5-minute) ways to improve your WebsiteScottish Web Folk: Three (5-minute) ways to improve your Website
Scottish Web Folk: Three (5-minute) ways to improve your WebsiteGareth Saunders
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Alfresco Software
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overviewreybango
 
BNC Tech Forum 09: Lexcycle Stanza demo
BNC Tech Forum 09: Lexcycle Stanza demoBNC Tech Forum 09: Lexcycle Stanza demo
BNC Tech Forum 09: Lexcycle Stanza demoBookNet Canada
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examplesgopivthmk
 
PL2235 2009 1 HTML
PL2235 2009 1 HTMLPL2235 2009 1 HTML
PL2235 2009 1 HTMLAliamat UBD
 
07 Collada Overview
07 Collada Overview07 Collada Overview
07 Collada Overviewjohny2008
 
Data Portability - Fronteers Meetup
Data Portability - Fronteers MeetupData Portability - Fronteers Meetup
Data Portability - Fronteers MeetupAndreas - Creten
 

Similar to Developing for iPhone (20)

Los Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionLos Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert Session
 
Monitoring your electricity usage
Monitoring your electricity usageMonitoring your electricity usage
Monitoring your electricity usage
 
Jabber Bot
Jabber BotJabber Bot
Jabber Bot
 
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?
 
Be HTML5-ready today
Be HTML5-ready todayBe HTML5-ready today
Be HTML5-ready today
 
Scottish Web Folk: Three (5-minute) ways to improve your Website
Scottish Web Folk: Three (5-minute) ways to improve your WebsiteScottish Web Folk: Three (5-minute) ways to improve your Website
Scottish Web Folk: Three (5-minute) ways to improve your Website
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
 
BNC Tech Forum 09: Lexcycle Stanza demo
BNC Tech Forum 09: Lexcycle Stanza demoBNC Tech Forum 09: Lexcycle Stanza demo
BNC Tech Forum 09: Lexcycle Stanza demo
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examples
 
Html5
Html5Html5
Html5
 
Widgets Tools Keynote
Widgets Tools KeynoteWidgets Tools Keynote
Widgets Tools Keynote
 
PL2235 2009 1 HTML
PL2235 2009 1 HTMLPL2235 2009 1 HTML
PL2235 2009 1 HTML
 
Josephj Yui Nctu 2
Josephj Yui Nctu 2Josephj Yui Nctu 2
Josephj Yui Nctu 2
 
Microformats
MicroformatsMicroformats
Microformats
 
Http
HttpHttp
Http
 
Про YAPC::TV
Про YAPC::TVПро YAPC::TV
Про YAPC::TV
 
07 Collada Overview
07 Collada Overview07 Collada Overview
07 Collada Overview
 
Data Portability - Fronteers Meetup
Data Portability - Fronteers MeetupData Portability - Fronteers Meetup
Data Portability - Fronteers Meetup
 

More from Tim Lucas

Introducing... Bananajour!
Introducing... Bananajour!Introducing... Bananajour!
Introducing... Bananajour!Tim Lucas
 
RORO May Lightning Preso Madness
RORO May Lightning Preso MadnessRORO May Lightning Preso Madness
RORO May Lightning Preso MadnessTim Lucas
 
Cucumbers & Factory Girls
Cucumbers & Factory GirlsCucumbers & Factory Girls
Cucumbers & Factory GirlsTim Lucas
 
Introducing me, and Ruby on Rails
Introducing me, and Ruby on RailsIntroducing me, and Ruby on Rails
Introducing me, and Ruby on RailsTim Lucas
 
Just Built It - Introduction to Ruby on Rails
Just Built It - Introduction to Ruby on RailsJust Built It - Introduction to Ruby on Rails
Just Built It - Introduction to Ruby on RailsTim Lucas
 
Improving performance of iphone.news.com.au
Improving performance of iphone.news.com.auImproving performance of iphone.news.com.au
Improving performance of iphone.news.com.auTim Lucas
 
Matthew Landauer - Open Australia
Matthew Landauer - Open AustraliaMatthew Landauer - Open Australia
Matthew Landauer - Open AustraliaTim Lucas
 
Matt Allen - Unfuddle your bugs
Matt Allen - Unfuddle your bugsMatt Allen - Unfuddle your bugs
Matt Allen - Unfuddle your bugsTim Lucas
 
Introduction to RDoc
Introduction to RDocIntroduction to RDoc
Introduction to RDocTim Lucas
 
Introduction to RDoc
Introduction to RDocIntroduction to RDoc
Introduction to RDocTim Lucas
 

More from Tim Lucas (11)

Introducing... Bananajour!
Introducing... Bananajour!Introducing... Bananajour!
Introducing... Bananajour!
 
RORO May Lightning Preso Madness
RORO May Lightning Preso MadnessRORO May Lightning Preso Madness
RORO May Lightning Preso Madness
 
Sinatra
SinatraSinatra
Sinatra
 
Cucumbers & Factory Girls
Cucumbers & Factory GirlsCucumbers & Factory Girls
Cucumbers & Factory Girls
 
Introducing me, and Ruby on Rails
Introducing me, and Ruby on RailsIntroducing me, and Ruby on Rails
Introducing me, and Ruby on Rails
 
Just Built It - Introduction to Ruby on Rails
Just Built It - Introduction to Ruby on RailsJust Built It - Introduction to Ruby on Rails
Just Built It - Introduction to Ruby on Rails
 
Improving performance of iphone.news.com.au
Improving performance of iphone.news.com.auImproving performance of iphone.news.com.au
Improving performance of iphone.news.com.au
 
Matthew Landauer - Open Australia
Matthew Landauer - Open AustraliaMatthew Landauer - Open Australia
Matthew Landauer - Open Australia
 
Matt Allen - Unfuddle your bugs
Matt Allen - Unfuddle your bugsMatt Allen - Unfuddle your bugs
Matt Allen - Unfuddle your bugs
 
Introduction to RDoc
Introduction to RDocIntroduction to RDoc
Introduction to RDoc
 
Introduction to RDoc
Introduction to RDocIntroduction to RDoc
Introduction to RDoc
 

Recently uploaded

How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?XfilesPro
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 

Recently uploaded (20)

How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 

Developing for iPhone

  • 1. developing for the iPhone tim lucas & pete ottery
  • 3.
  • 4.
  • 7. why build a mobile version?
  • 8.
  • 9. IPHONE FRAMEWORK GRIPES photo by Scot Campbell flickr.com/people/randomurl
  • 10. Mobile Safari CSS3 Javascript
  • 11. OLD SCHOOL MOBILE DEVELOPMENT
  • 12. IT’S EASY TO BE DISTRACTED BY THE HYPE photo by Mark Cohen flickr.com/people/rageman
  • 13.
  • 14.
  • 15. You should not make sites for the iPhone - and that includes the URL.
  • 16. Mobile 2.0: Design and Develop for the iPhone and Beyond by Brian Fling Web 2.0 Expo, San Francisco, April 22, 2008 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 18.
  • 19. developing for the iPhone tim lucas & pete ottery
  • 20. developing for Super Hot Internet Touchscreen Devices And Next Generation Mobiles
  • 21. developing for S H I T D A N G Mobiles
  • 24. developing for Mobile 2.0 tim lucas & pete ottery
  • 26.
  • 27.
  • 28. <link media=’only screen and (max-device-width: 480px)’ ...
  • 29.
  • 31. One Web, No Go.
  • 32.
  • 36.
  • 38.
  • 39.
  • 40.
  • 41.
  • 43.
  • 44.
  • 45.
  • 46. photo by Esti Alvarez flickr.com/people/esti COOKIES
  • 48.
  • 49.
  • 51. iphone.news.com.au -> link to www.news.com.au
  • 52. /home.mobile -> /?no-mobile-redirect=true
  • 53. /webjam8.mobile -> /webjam8
  • 54.
  • 55.
  • 56. /webjam8 -> /webjam8.mobile
  • 57.
  • 58. IPHONE FRAMEWORK GRIPES photo by Scot Campbell flickr.com/people/randomurl
  • 60. 1. Native iPhone UI 2. Ajax-style page nav 3. Swoosh!
  • 61. Create Navigational Menus and iPhone interfaces No knowledge of JS required Provide a more “iPhone-like” experience
  • 63. OS SPECIFIC DESIGN DOES NOT AGE WELL
  • 64.
  • 65.
  • 66.
  • 67.
  • 68. Building a great mobile user experience is hard. Go easy on yourself by starting simple. Brian Fling, Mobile 2.0
  • 69. 2. AJAX-style page navigation
  • 70.
  • 71. WHILST IT MIGHT IMPRESS
  • 72. AND FEEL A BIT SNAPPIER
  • 73. HOW MANY KITTENS DO WE NEED TO SACRIFICE? photo by fenlandsnapper flickr.com/people/32834218@N00
  • 76. URLs
  • 78. NEW GENERATION OF ACCESSIBILITY ISSUES? photo by Adrian Q flickr.com/people/aquan
  • 79. WWJKD? photo by Faruk Ateş flickr.com/people/kurafire
  • 80.
  • 81. WHO USES AN IPHONE IN BED? photo by Damien Roué flickr.com/people/damienroue
  • 84. AJAX Data URLs CSS Sprites Asset Bundling Cache Headers YSlow
  • 85. 3. The Swoosh Effect
  • 87. and
  • 89. are
  • 90. all
  • 91. about
  • 93. only 2 people allowed.
  • 94.
  • 95.
  • 97. Pete
  • 98. Part 1 Different interaction models. Design for phones & iphones.
  • 101.
  • 102. 40 x 15 pixels
  • 103.
  • 105. thumbs/fingers = about 50 x 50px
  • 106. thumbs/fingers = about 50 x 50px
  • 107. Simplify as much as you can.
  • 108. And then delete a bit more.
  • 109.
  • 110. “Visiting web sites that have been redesigned for the iPhone is often a quicker and more pleasing experience than it is on ... 20-inch or larger screens.”
  • 111.
  • 112.
  • 114.
  • 115.
  • 116. Getting started
  • 117. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title>Example</title> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> qÉñí <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> <ul> <li><a href=quot;linkquot;>Finally a suit to be worn in the shower</a></li> <li><a href=quot;linkquot;>Smelly know-it-alls the ultimate irritation</a></li> <li><a href=quot;linkquot;>Sorry man’s ass thrown in jail</a></li> <li><a href=quot;linkquot;>Ike survivors in the lion’s den</a></li> <li><a href=quot;linkquot;>Woman finds python in Dutch hotel toilet</a></li> </ul> </body> </html>
  • 127. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title>Example</title> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> qÉñí <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> <ul> <li><a href=quot;linkquot;>Finally a suit to be worn in the shower</a></li> <li><a href=quot;linkquot;>Smelly know-it-alls the ultimate irritation</a></li> <li><a href=quot;linkquot;>Sorry man’s ass thrown in jail</a></li> <li><a href=quot;linkquot;>Ike survivors in the lion’s den</a></li> <li><a href=quot;linkquot;>Woman finds python in Dutch hotel toilet</a></li> </ul> </body> </html>
  • 128. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> qÉñí <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> <ul> <li><a href=quot;linkquot;>Finally a suit to be worn in the shower</a></li> <li><a href=quot;linkquot;>Smelly know-it-alls the ultimate irritation</a></li> <li><a href=quot;linkquot;>Sorry man’s ass thrown in jail</a></li> <li><a href=quot;linkquot;>Ike survivors in the lion’s den</a></li> <li><a href=quot;linkquot;>Woman finds python in Dutch hotel toilet</a></li> </ul> </body> </html>
  • 131. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> qÉñí <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> -- code continues below --
  • 132. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } body { font: 16px/1.3 Helvetica; } </style> </head> <body> qÉñí <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> -- code continues below --
  • 134. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } body { font: 16px/1.3 Helvetica; } h1 { } font-size:1.6em; qÉñí .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
  • 136. <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; qÉñí border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
  • 140. body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } qÉñí </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
  • 141. body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } h2 { qÉñí font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
  • 142. body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } h2 { qÉñí font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
  • 143. h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí
  • 144. h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí background: url(quot;sprites.pngquot;) no-repeat 100% -5px;
  • 145. h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí background: url(quot;sprites.pngquot;) no-repeat 100% -5px;
  • 146. h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí background: url(quot;sprites.pngquot;) no-repeat 100% -5px; ul { margin:0; padding:0; list-style-type:none; } li { margin:0; padding:0; border-bottom: 1px dotted #ccc; } li a { padding: 12px 30px 12px 0; background: url(quot;sprites.pngquot;) no-repeat 100% -105px; }
  • 147. text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; background: url(quot;sprites.pngquot;) no-repeat 100% -5px; } ul { margin:0; padding:0; list-style-type:none; } li { qÉñí margin:0; padding:0; border-bottom: 1px dotted #ccc; } li a { padding: 12px 30px 12px 0; background: url(quot;sprites.pngquot;) no-repeat 100% -105px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
  • 148. text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; background: url(quot;sprites.pngquot;) no-repeat 100% -5px; } ul { margin:0; padding:0; list-style-type:none; } li { qÉñí margin:0; padding:0; border-bottom: 1px dotted #ccc; } li a { padding: 12px 30px 12px 10px; background: url(quot;sprites.pngquot;) no-repeat 100% -105px, url(quot;sprites.pngquot;) repeat-x 0 100%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
  • 151. ãKåÉïëKÅçãK~ì áéÜçåÉKåÉïëKÅçãK~ì ä~ìåÅÜÉÇ=åçî=MT ä~ìåÅÜÉÇ=àìäó=MU
  • 152. mfÛë ãKåÉïëKÅçãK~ì ïÉÉâÇ~óë ïÉÉâÉåÇë
  • 153. mfÛë áéÜçåÉKåÉïëKÅçãK~ì ïÉÉâÇ~óë ïÉÉâÉåÇë