HTML5 &
Mobile Web Apps
Dominique Hazaël-Massieux
W3C Mobile Guy
@dontcallmedom
dom@w3.org
W3C
Mission
- “Lead the Web to its Full Potential”
- Through standardization of technologies and guidelines
- Make the Web work for everyone, everywhere on every device
- Royalty-Free Technologies
W3C technologies
- HTML, CSS, SVG, JavaScript APIs
- XML, XSLT, XQuery, …
- Semantic Web: RDF, OWL, SPARQL, JSON-LD, …
Mobile
Screen size
Keyboard and mouse
Network
CPU & battery
Fragmentation
Connected
Sensors
Interactions
Multimedia
Personal
Social
Users
- Privacy / security: opaque
- Hard to find
- Time to install / maintain
- Lack of links
Developers
- Many OS and languages
- Under App store controls, delays
- Single business entity controling technical roadmap and business opportunities
Users
- « Safe » by default
Privacy / security: opaque - Search engines
Hard to find - No install
Time to install / maintain - Strongly linked
Lack of links
Developers
- Unique technology platform
Many OS and languages - Decentralized ecosystem
Under App store controls, delays - Open evolution
Single business entity controling technical roadmap and business opportunities
Device adaptation
- Adapt layout with CSS Media Queries
- Scalable images with SVG
- Soon: adapt bitmap images to screen resolution
User input
- keyboard:
- numeric : slow and hard to use
- physical : small keys
- virtual : slow and takes screen space
- no mouse
Reducing typing
- Specialized input form (e.g.
<input type=date>) - Auto-complete text input with
<datalist> - Soon: auto-complete from well-know values (HTML 5.1)
No mouse
- Handle touch interactions via Touch Events
- Incl. multi-touch
- Pointer Events merge mouse / touch / pen interactions in a single model
- Indie UI events abstract away to user intents
Network
- bandwidth
- latency
- Cost and quotas
- On and off
Optimizations
- Caching is built-in
- Plenty of room for reducing verbose textual formats (minification, compression)
- Vector images (SVG) often smaller than raster images
- Downloadable fonts (e.g. WOFF) can be used for icons
Off-line
- Storage: Web Storage, Indexed Database
- Off-line operations: ApplicationCache
- Soon: ServiceWorker to manage network requests in JavaScript
- Soon: File system API?
CPU & memory
- Slower CPUs
- CPU usage hits on battery
- Less memory available
Optimizations
- Lots of graphical operations pushed to the GPU
- Web Workers let do background computation
- Soon: more GPU usage for non-graphics?
Diversity & fragmentation
- Much broader diversity
- Large variations among browsers
Content adaptation
- Responsive Web Design
- CSS Media Queries
- « Mobile First »
- JavaScript feature-detection
- Server-side adaptation
- Mix of the two
Social
- Links
- Web Real-Time Communications
- Soon:
- Activity Streams
- Profile management
- Later:
- identity management?
- Authentication?
Privacy and Security
- SSL
- Do-Not-Track
- Content-Security Policy
- Cryptography API
Media
- SVG
- canvas
- CSS3 (animations, transformations)
- WebGL (3D)
<audio>&<video>
Interactions
- NFC
- Soon: Speech API? Gestures?
Connectivity
Sensors
- GPS
- Accelerometer
- Compas
- Gyroscope
- Camera
- Microphone
- Proximity
- Ambient light
- Battery
- Vibration
Get involved
- W3C membership
- Community Groups
- Spec feedback
Bio-informatics
- Semantic Web: new Data Activity under review
- Healthcare and Life Science Interest Group
More
Use a spacebar or arrow keys to navigate