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
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobileEric Turcotte
 
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
 
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
Html5Html5
Html5anubavam-techkt
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examplesgopivthmk
 
Widgets Tools Keynote
Widgets Tools KeynoteWidgets Tools Keynote
Widgets Tools KeynoteMichael Mahemoff
 
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
 
Web 2.0 &amp; Search Engines
Web 2.0 &amp; Search EnginesWeb 2.0 &amp; Search Engines
Web 2.0 &amp; Search EnginesAmbles Kwok
 
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
 
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
 
Web 2.0 &amp; Search Engines
Web 2.0 &amp; Search EnginesWeb 2.0 &amp; Search Engines
Web 2.0 &amp; Search EnginesAmbles Kwok
 

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
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
 
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
 
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
Html5Html5
Html5
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examples
 
Widgets Tools Keynote
Widgets Tools KeynoteWidgets Tools Keynote
Widgets Tools Keynote
 
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
 
Web 2.0 &amp; Search Engines
Web 2.0 &amp; Search EnginesWeb 2.0 &amp; Search Engines
Web 2.0 &amp; Search Engines
 

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

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 

Recently uploaded (20)

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 

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~ì ïÉÉâÇ~óë ïÉÉâÉåÇë