Wikis for Collaboration
Transcript of Wikis for Collaboration
Sandia is a multiprogram laboratory operated by Sandia Corporation, a Lockheed Martin Company,for the United States Department of Energy’s National Nuclear Security Administration
under contract DE-AC04-94AL85000.
Refactoring for the Mobile WebRefactoring for the Mobile WebRefactoring for the Mobile WebRefactoring for the Mobile WebJoseph R. Lewis — Sandia National Laboratories
Some questions to keep in mind:Some questions to keep in mind:
• What is the mobile web?• Why is this important to us
now?• What trends are driving this
importance?• What should we be doing as
web developers for our mobile audience?
• How can I make this happen in my web sites now?
What is the mobile webWhat is the mobile web
• Web access via handheld and wireless devices:• Smartphones
• iPhone• Palm Prē• Android• Blackberry
• PDAs & Other gadgetry (Kindle, iPod Touch, etc)
• Forget about low-end phones with claimed web access.
Mobile Web Use TrendsMobile Web Use Trends
• Explosive growth:• Bango: Mobile web use in the US experienced
three fold increase in 2007• Juniper: Mobile web users will grow from 577
million in 2008 to more than 1.7 billion in 2013• iPhone leading the way since launch of June 2007:
• AdMob: iPhone in 11/2008 became single most-used web device over any other handset
• Google 2/2008: Apple iPhone generates 50 times more searches than any other device
• Opera is most widely deployed mobile browser: ~54% market share
Expect increased mobile web useExpect increased mobile web use
• Some major sites reporting over 13% of their traffic coming from mobile devices• Weather & Entertainment: often over 20%
• Web-enabled client apps are critical to the market.• ~100,000 apps for iPhone• ~10,000 for Android• ~300 for Prē
• Social networking dominates web+app use• Global use > 40% for social networking• USA, South Africa, and Indonesia register > 60%
use (Opera, 5/2008)
Advantages for mobile web appsAdvantages for mobile web apps
• Convenience: Always on, always near the owner.• 60% of mobile users keep their phones
bedside at night (Ahonen, 2008)
• Ubiquitous, omnipresent information streams: Don’t need to return to a desk to input data
• Location aware: GPS, accelerometers widely available
• Media input: Most smartphones have built-in camera, microphone, and speaker in addition to keyboard input
Mobile Web ChallengesMobile Web Challenges
• Small screen size• Navigation• Reduced functionality
• Do not rely on JavaScript, Java, Flash, etc.
• Slow Networks• City congestion/canyons• Events• No 3G
• Lower processing capability• Less CPU power• Less RAM
Embedded BrowsersEmbedded Browsers
• Mobile web not just about the default web browser
• SDKs allow embedding of rendering engine in software
• For iPhone OS – WebKit is the only option• Entire applications can be built on skinning a
web interface• Might only need HTML, CSS, JavaScript,
and/or some simple server-side language such as Ruby or PHP to build an app
OperaOpera
• Two flavors: • Opera Mini – works on just about any
phone, most common version• Opera Mobile – more full-featured, works
w/ PDAs running Windows Mobile and Symbian UIQ Touch
• Now defaults to ‘screen’ media instead of ‘handheld’ media type rendering, following WebKit
• Supports CSS3 media queries: http://www.w3.org/TR/css3-mediaqueries/
WebKitWebKit
• Open source, lightweight codebase• Strong deployment
• Safari on iPhone OS• Android OS• WebOS (Palm Prē)• Nokia S60
• No support for media type = ‘handheld’• Instead uses media queries
Other rendering engines to considerOther rendering engines to consider
• Internet Explorer Mobile• NetFront• Gecko (Fennec)• Obigo• Polaris
Browsers vs.
Screen Sizes
Browsers vs.
Screen Sizes
Developing on the desktop for mobileDeveloping on the desktop for mobile
• Use Opera in Small Screen mode for developing for handheld media
• Use iPhone SDK & Android SDK emulators for developing for WebKit
• Opera has a menu item to switch to handheld media.
• Firefox users can install the Web Developer Toolbar to switch to handheld media easily.
Strategies for mobile web deliveryStrategies for mobile web delivery
1. User-agent sniffing2. CSS media types3. Separate site (m.yoursite.gov or
yoursite.gov/m)4. Combinations of the above usually are most
effective
User-agent detectionUser-agent detection
Separate sites or codebasesSeparate sites or codebases
• Might mean a lot more code to maintain• Improve situation in MVC using modified
routes, controllers & views
• Can more effectively address constrained bandwidth through ruthless optimization
Delivering mobile styleDelivering mobile style
The link method:<link rel="stylesheet" href="mobile.css"
type="text/css" media="handheld">
Applying handheld to an embedded stylesheet:<style type="text/css" media="handheld">
div.foo { color: red; }
</style>
Using @media handheld to target handheld styles in embedded or external CSS:
@media handheld { div.foo { color: red; } }
Using @media handheld to import a mobile stylesheet:<style type="text/css">
@import url(mobile.css) handheld;
</style>
Viewport and media queriesViewport and media queries
• WebKit assumes 960 pixels• Reset that assumption:
• <meta name="viewport” content="width=640" />
• As mentioned, Opera and WebKit default to screen media but support media queries
• Use media query to reset width:<style type="text/css" media="only screen and (max-
device-width: 480px)">
div.layout {
width:100%;
}
</style>
Combine handheld and media query targetsCombine handheld and media query targets
• Add the handheld value to your media string:
<style type="text/css" media="handheld, only screen and (max-device-width: 480px)">
Mobile Refactoring Rule No.1Mobile Refactoring Rule No.1
• Hide unneeded sections
div#sidebar { display:none; }
• Or move them
div#sidebar { float:none; }
Mobile Refactoring Rule No.2Mobile Refactoring Rule No.2
• Reset the content width
div#layout { width:100%; }
AbbreviateAbbreviate
• Reset wide text using the content property:
img#masthead {
content: attr(alt);
font-family: cursive;
}
#sitenav a[href="http://natasha.example.com/cv/"] {
content: "CV";
}
#sitenav a[href="http://natasha.example.com/cal/"] {
content: "Events";
}
#sitenav a[href="http://natasha.example.com/av/"] {
content: "A/V";
}
Design for a touch screenDesign for a touch screen
div#sitenav a {
width:100%;
font-size:2em;
margin:0;
border:1px solid #333;
text-align:center;
}
Nifty WebKit Tricks: Transforms & CSS3Nifty WebKit Tricks: Transforms & CSS3
dl {
opacity:0.25;
-webkit-transform: skew(-30deg) rotate(-8deg) translate(-5em,-10em) scale(1.5);
-webkit-box-shadow: 2px 10px 13px rgba(0,0,0,0.5);
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: ease-in;
}
dl:hover {
-webkit-transform: skew(0deg) rotate(0deg) translate(0,0) scale(1);
opacity: 1;
-webkit-border-radius: 20px;
}
Use cases for mobile refactoringUse cases for mobile refactoring
• Public web presence• Mobile users on your intranet (travel, time,
information)• Scientific applications
• Lab notes• Collaboration• Status & project management• Mobile data distribution to field users, first
responders• Research using mobile data gathering
What about mobile apps?What about mobile apps?
• Apps require installation – web pages are instantly accessible, instantly updated
• No app store approval waiting• Not platform dependent – no need to compile
for iPhone/Android/Pre/Blackberry/WinMobile• Database storage support in HTML5
• Users leverage this in Safari for iPhone via “Add to home screen” feature
Questions?Questions?
ResourcesResources
• A List Apart – Return of the Mobile Style Sheet: http://www.alistapart.com/articles/returnofthemobilestylesheet
• Mobile Web Best Practices: http://www.w3.org/TR/mobile-bp/
• Google Android: http://code.google.com/android/ • Apple iPhone Developer:
http://developer.apple.com/iphone/• Designing with Opera Mini in mind:
http://dev.opera.com/articles/view/designing-with-opera-mini-in-mind/
• Opera Mini emulator: http://www.opera.com/mini/demo/
Thanks!Thanks!
Joseph R. LewisSandia National Laboratories