The document discusses building mobile web applications using HTML5. It covers topics like HTML5 features that are well supported on mobile browsers like forms, communication, canvas, geolocation, audio and video. It provides examples of using CSS3 for styling, animation and media queries for responsive design. It also discusses utilizing HTML5 APIs for advanced interactions, graphics, offline support, performance and accessing device capabilities.
This document summarizes the Firefox OS, an open web platform for building mobile apps and customizing the user interface using HTML5, CSS, and JavaScript. It outlines key web APIs, the process for developing and publishing open web apps, and the different types of apps including regular web apps, installed web apps, and privileged web apps with additional capabilities. Security levels and permissions for APIs are also discussed.
jQuery Mobile part 2 discusses various topics related to jQuery Mobile including document events, configuration, methods and utilities, themes, and app packaging. Some key points:
- Document events in jQuery Mobile include mobileinit, ready, and load which are used to configure jQuery Mobile settings and enhance markup.
- Configuration options exist for global settings, UI, AJAX, regionalization, touch overflow, and widgets. These can be modified to customize jQuery Mobile's behavior.
- Methods and utilities provide functions for manipulating data attributes, changing pages, and accessing platform information.
- Themes use CSS3 properties and gradients to style elements with different "swatches" for headers, content, and buttons. Themes
SEE 2009: Improving Mobile Web Developer ExperienceTasneem Sayeed
This talk will provide strategies to identify common developer pitfalls for web developers developing on a mobile platform. It will include code fragments for implementing AJAX requests for a social networking application and how to avoid frequent developer pitfalls when displaying the data retrieved on the mobile device. It will further provide coding strategies for improving performance and reducing footprint when developing on a mobile device utilizing Web technologies such as JavaScript, CSS and HTML.
This talk will conclude highlighting the activities of the Symbian Foundation including a roadmap of how the Symbian tools are being evolved to further improve and enhance the mobile Web developer experience.
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
Mobile applications are evolving to leverage HTML5 and rich web technologies. While native mobile applications currently have advantages in terms of performance and access to device features, HTML5 allows building applications that work across mobile devices and platforms using web standards. Frameworks like jQuery Mobile and Sencha Touch demonstrate how to build mobile-optimized interfaces using HTML, CSS, and JavaScript. HTML5 applications have the potential for broader reach and less development effort compared to building separate native apps, though performance compromises remain versus truly native apps.
This document discusses building HTML5 apps with native capabilities for BlackBerry devices. It outlines various HTML5 APIs that can access native device features like geolocation, accelerometer, notifications and more. It also describes how to create custom WebWorks APIs that extend HTML5 functionality by connecting to native device APIs for BlackBerry OS, Tablet OS, and BlackBerry 10. Resources provided include documentation, code samples, and details on the WebWorks SDK and roadmap.
This document provides information on jQuery Mobile, a JavaScript mobile development framework. It discusses some key characteristics of jQuery Mobile including being optimized for touchscreens, being cross-platform, lightweight, and using HTML5 and CSS3 standards. It also covers various jQuery Mobile components like pages, content containers, buttons, checkboxes and how to structure a basic jQuery Mobile page with headers, footers, and content sections.
This document is the HTML code for the upload page on the SlideShare website. It includes metadata, scripts, and styling to display the page content which encourages users to discover, share and present presentations, infographics and videos on the largest professional content sharing community. The page code provides options for users to upload, login or sign up for an account.
Dynamic User Interfaces for Desktop and Mobilepeychevi
The document discusses responsive design techniques for desktop and mobile interfaces. It covers:
- Adapting layouts using AlloyUI Viewport and media queries to target different screen sizes.
- Dynamically retrieving data using the Pjax utility and ScrollInfo plugin.
- The future potential of CSS Flexbox layout for complex responsive designs.
In this session, Aaron Gustafson will explain the ins and outs of crafting rich Web experiences that adapt to the capabilities and peculiarities of our customers and their devices, while maintaining your sanity in the process.
You will learn:
* An understanding of the challenges (and possibilities) presented by the wide range of browsers and devices being used to access the web
* A fresh perspective on interface design, grounded in the progressive enhancement philosophy
* Ideas around how to tailor experiences based on device capabilities;
* Solid strategies for determining how common UI components can be re-imagined in an adaptive fashion
* A practical knowledge of how HTML, CSS, and JavaScript can be deployed in the service of adaptive user interfaces
Responsive web design has taken our industry by storm and with good reason: it helps us improve our reach with less effort. But incorporating responsive design is not the goal, meeting your user’s needs is. Responsive design is not an end in itself… it’s just the beginning.
Embracing the heterogenous nature of the web—the myriad web-enabled devices with vastly different dimensions, screen sizes, networks, and capabilities in use by countless individuals, each with their own special needs—allows you to craft experiences that will work anywhere at any time. It also helps you build robust systems that adapt in ways far beyond aesthetics. This talk will cover a number of considerations that you should be aware of, beyond screen size and pixel density, and provide examples of how to adapt your interfaces so they rise to meet your users’ needs.
Device aware web frameworks for better programmingSuntae Kim
To capitalize on the explosion of multi-device web access, companies need to unify their web-based properties for desktop, tablets and mobile and implement a holistic, One Web approach. When evaluating solutions that support One Web, it is important to select technologies that support single code-base, offer seamless device-based optimization and deliver fast load times.
Session highlighting and demonstrating approaches to common challenges in modern portlet development. Topics include AJAX in JSR-168 and JSR-286 portlets, CSS and Javascript toolkits, security, and optimization of front-end resources. This session was presented at the Jasig Spring 2010 conference in San Diego, CA by Jennifer Bourey.
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
HTML5 is the next generation web development standard that improves upon HTML4 and XHTML. It focuses on features rather than syntax, and includes new elements like <article> and <section>, native audio/video support, drawing APIs, geolocation, drag and drop, web forms 2.0, and more. HTML5 aims to improve multimedia capabilities while keeping code readable by humans and machines. It is supported by all major browsers, though support for specific features may vary, and polyfills can help with backwards compatibility.
The document discusses responsive images and issues around their implementation. It begins by outlining the new <picture> element and srcset/sizes attributes that allow images to adapt based on screen size and resolution. It then discusses challenges like managing many images, the need for image breakpoints to determine appropriate file sizes, and the tension between responsive images and the browser's lookahead parser. Overall, the document examines both the promise and difficulties of responsive images on the modern web.
This document discusses the history and implementation of the Android Action Bar user interface pattern. It provides examples of code samples and configurations for different Action Bar implementations, including menus, tabs, contextual bars, and split bars. It also discusses porting the Action Bar to different Android versions and platforms like tablets and Google TV.
Metrics that Matter-Approaches To Managing High Performing WebsitesBen Rushlo
Managing the technical quality of your site has become more complex and the number of metrics you collect has skyrocketed. Faced with hundreds of candidate metrics, how do you select those that are most meaningful? In this session you will learn which KPIs are key for successfully testing and managing your site. You will walk away with a holistic framework for managing site quality.
The document discusses trends toward browser-based, client-side development and simpler yet more powerful products. It describes building a web-based document viewer using the Accusoft Pegasus ASP.NET Imaging SDK. The application allows searching a document library and viewing documents. Code examples show creating search and view pages, loading a document into the viewer, and JavaScript for viewer controls.
There is a growing demand to build increasingly complex mobile applications with HTML5, in part due to its cross-platform nature. However delivering these applications is still very challenging. The Montage framework was designed from the ground up to build complex HTML5 applications. This talk will explain how Montage’s reusable and encapsulated Components provides a natural and effective way to write modular, robust, applications by allowing team members to work on different part at the same time.
The document discusses various techniques for developing Android applications that work across different device configurations and Android platform versions. It covers topics like screens sizes and densities, different layouts, using fragments and activities, leveraging new APIs while maintaining backwards compatibility, and using fallbacks and workarounds to support older platforms.
This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.
This document discusses various techniques for making web applications work offline and with unreliable network connections, including:
- The application cache manifest which allows specifying cached resources to work offline
- Issues with the current manifest specification and potential enhancements
- The window.applicationCache API for caching resources and monitoring cache status
- Detecting online/offline status using the navigator.onLine property
In 3 sentences or less, it summarizes approaches for offline web applications using the application cache manifest, applicationCache API, and navigator.onLine property.
This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.
This document compares native applications, web applications, and widgets for mobile devices. Native applications have direct access to device features but must be developed for each platform. Web applications can be written once and deployed anywhere but run inside the browser without direct device access. Widgets combine the cross-platform capabilities of web applications with the ability to access device features and run standalone like native applications.
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
Extended version of my "Making your site mobile-friendly" talk, including a short look at native applications vs web apps, for the UKOLN DevCSI event "Developing for Mobile Applications in Education" in Reading http://www.ukoln.ac.uk/events/devcsi/mobile_applications/
This document discusses responsive image techniques for adaptive web design. It begins by explaining browser sniffing versus feature testing, and recommends using feature testing to determine browser width, screen resolution, and bandwidth instead of browser sniffing. It then covers techniques like using background-size to control image sizes, SVG for smaller file sizes, and font-based solutions. The document also discusses server-side techniques like .htaccess rewrite rules and client-side techniques like picture and HiSRC. It advocates for a mobile-first approach using CSS media queries and a single pixel GIF for responsive images.
A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP.
You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.
This document discusses how to create mobile apps that feel native using only web technologies. It covers supporting features in Mobile Safari like local storage, CSS3 features, and geolocation. It recommends using web technologies over native due to quicker iteration times. Specific techniques covered include detecting browser type, adding home screen icons, startup images, going full screen, and viewport settings. The document also discusses frameworks like jQuery Mobile but notes native DOM APIs may be sufficient. It covers input features, touch vs click, animations, locking orientation, and performance tips. It acknowledges limitations of Android and webOS and recommends testing on actual devices. Finally, it discusses hybrid mobile frameworks like PhoneGap and Titanium that allow developing for multiple platforms using one code
This document discusses mobile web design and provides recommendations for HTML5, CSS3, and JavaScript for mobile. It recommends using viewport meta tags, media queries for responsive designs, and touch-friendly input fields in HTML5. For CSS3, it suggests using media queries for responsive layouts, gradient effects, and high resolution media queries. For JavaScript, it advises keeping code simple with prompts, alerts, and touch optimizations.
This document discusses web apps versus native apps for iPhone and other mobile platforms. It covers key differences like programming languages used, app distribution methods, and costs. It also explores using HTML5 to build web apps that work across different mobile platforms without needing separate native apps. Finally, it provides tips for optimizing web apps for iPhone, including viewport settings, touch icons, and using libraries like jQTouch to create an iPhone-like user interface.
The document discusses mobile app development from a web developer's perspective. It covers topics such as web apps vs native apps, technologies for mobile development like HTML5 and frameworks, and specific techniques for mobile like viewport scaling, geolocation APIs, and offline storage. The document provides examples of code for implementing these mobile techniques.
The document discusses using Java with HTML5 and related technologies like CSS3 and WebSockets. It provides an overview of HTML5 features like Canvas, SVG, CSS3 animations, and WebSockets. It describes how these features can be used to build interactive client-side applications and how Java servers can integrate with HTML5 apps by saving/retrieving application state and graphics from the client. Java servers can generate graphics like SVG dynamically based on data from HTML5 clients.
This document discusses responsive web design techniques including:
- Using viewports and media queries to adapt layouts for different screen sizes.
- Sizing images fluidly using max-width: 100% so they are responsive.
- Design patterns for responsive tables, hiding/showing content, and converting menus to dropdowns.
- Tools like Modernizr, Respond.js, and frameworks like LESS to support responsive design goals.
- Tips like using relative units (ems/percentages) over fixed pixels and transitions for visual changes.
A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/.
Event page: https://www.facebook.com/events/296799847060237/
This document compares web apps and native apps for mobile devices. It discusses that web apps are developed with HTML, CSS and JavaScript and can be accessed through any web browser, while native apps are developed through platforms like iOS and Android using languages like Objective-C and Java. It also mentions that HTML5 aims to make web apps work more like native apps by adding features like offline storage, multimedia playback and geolocation to web browsers. Finally, it provides examples of how to make web apps for iPhone that utilize features like touch icons, viewport settings and JavaScript libraries to mimic the look and feel of native iPhone apps.
This document discusses HTML5 and how it can be used to enhance JavaServer Faces (JSF) 2.0 components. It provides an overview of HTML5 features such as new semantic elements, form controls, media elements, graphics with canvas, and JavaScript APIs. It also describes JSF 2.0's composite component model and how components can leverage HTML5 features like media playback and JavaScript integration. The document demonstrates a composite audio component that uses HTML5's audio element and JavaScript to control audio playback from JSF. It encourages leveraging HTML5 to promote rich user interfaces and future-proof JSF applications.
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
The document provides an overview of the YUI library. It discusses:
1) What YUI is and its main components like the JavaScript library, CSS foundation, documentation tools, build tools, testing tools, and more.
2) Some of the core utilities included in YUI like Event, Node, YUI Global Object, Array, mix, extend, augment, Object, merge, clone, and Module.
3) How to use YUI features like the loader, events, DOM events, custom events, Node, IO, Transition, and infrastructure components like Base, Attributes, Plugin, and Widget.
The document discusses various techniques for enhancing web performance, including:
- Making fewer HTTP requests by combining CSS, JavaScript, and image files
- Placing stylesheets in the <head> for faster page loads
- Moving scripts to the bottom of the page to allow above-the-fold content to load first
- Avoiding CSS expressions and using event handlers instead
- Minifying JavaScript and CSS files to reduce file sizes
- Making AJAX requests cacheable for better performance
Choose our Linux Web Hosting for a seamless and successful online presencerajancomputerfbd
Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently.
Visit- https://onliveserver.com/linux-web-hosting/
Measuring the Impact of Network Latency at TwitterScyllaDB
Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.
UiPath Community Day Kraków: Devs4Devs ConferenceUiPathCommunity
We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner!
We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too!
Check out our proposed agenda below 👇👇
08:30 ☕ Welcome coffee (30')
09:00 Opening note/ Intro to UiPath Community (10')
Cristina Vidu, Global Manager, Marketing Community @UiPath
Dawid Kot, Digital Transformation Lead @Proservartner
09:10 Cloud migration - Proservartner & DOVISTA case study (30')
Marcin Drozdowski, Automation CoE Manager @DOVISTA
Pawel Kamiński, RPA developer @DOVISTA
Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner
09:40 From bottlenecks to breakthroughs: Citizen Development in action (25')
Pawel Poplawski, Director, Improvement and Automation @McCormick & Company
Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company
10:05 Next-level bots: API integration in UiPath Studio (30')
Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner
10:35 ☕ Coffee Break (15')
10:50 Document Understanding with my RPA Companion (45')
Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath
11:35 Power up your Robots: GenAI and GPT in REFramework (45')
Krzysztof Karaszewski, Global RPA Product Manager
12:20 🍕 Lunch Break (1hr)
13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30')
Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance
13:50 Communications Mining - focus on AI capabilities (30')
Thomasz Wierzbicki, Business Analyst @Office Samurai
14:20 Polish MVP panel: Insights on MVP award achievements and career profiling
Quantum Communications Q&A with Gemini LLM. These are based on Shannon's Noisy channel Theorem and offers how the classical theory applies to the quantum world.
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfNeo4j
Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.
Mitigating the Impact of State Management in Cloud Stream Processing SystemsScyllaDB
Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states.
In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing.
Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.
YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS
WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well.
Some facts about WPRiders and why we are one of the best firms around:
More than 700 five-star reviews! You can check them here.
1500 WordPress projects delivered.
We respond 80% faster than other firms! Data provided by Freshdesk.
We’ve been in business since 2015.
We are located in 7 countries and have 22 team members.
With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce.
Our team members are:
- highly experienced developers (employees & contractors with 5 -10+ years of experience),
- great designers with an eye for UX/UI with 10+ years of experience
- project managers with development background who speak both tech and non-tech
- QA specialists
- Conversion Rate Optimisation - CRO experts
They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals.
At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Chris Swan
Have you noticed the OpenSSF Scorecard badges on the official Dart and Flutter repos? It's Google's way of showing that they care about security. Practices such as pinning dependencies, branch protection, required reviews, continuous integration tests etc. are measured to provide a score and accompanying badge.
You can do the same for your projects, and this presentation will show you how, with an emphasis on the unique challenges that come up when working with Dart and Flutter.
The session will provide a walkthrough of the steps involved in securing a first repository, and then what it takes to repeat that process across an organization with multiple repos. It will also look at the ongoing maintenance involved once scorecards have been implemented, and how aspects of that maintenance can be better automated to minimize toil.
Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 :
- Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants.
- REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.
An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)
Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Bert Blevins
Today’s digitally connected world presents a wide range of security challenges for enterprises. Insider security threats are particularly noteworthy because they have the potential to cause significant harm. Unlike external threats, insider risks originate from within the company, making them more subtle and challenging to identify. This blog aims to provide a comprehensive understanding of insider security threats, including their types, examples, effects, and mitigation techniques.
2. Mobile is Growing
• In January 2012, 8.49 percent of website
hits/pageviews come from a handheld mobile
device (StatCounter)
• Mobile will be bigger than desktop internet in
5 years (Morgan Stanley)
• 2.1 billion mobile devices will have HTML5
browsers by 2016 up from 109 million in 2010
(ABI Research)
4. HTML5 is Great for Mobile
• Do not need download to use Web App
• One Code base, all popular devices
• Tons of great HTML5 features are already
supported on modern browsers
6. Web App vsNative App
Web App Native App Comparation
Just enter the URL Must be deployed or Installation/updates
downloaded
Access to web analytics. Apple Store, Android Monetization
Rate,SaaS based revenue Market, Rating
Progressive Enhancement Follow the standards End User Experience
GeoLocation, Offline camera, gyroscope, Access to hardware sensors
Storage, Canvas Graphics, microphone, compass,
Audio, Video, accelerometer, GPS
Camera(Android3.1+)
HTML5, CSS3, Javascript, UI Object-C, Java, C++, J2EE, Developer Experience
Library .NET, Cocoa Touch
Web Workers, Graphic Run directly on the metal, Performance
acceleration, WebGL GPU Acceleration, Multi-
Threading
9. What is HTML5
Forms, Communication, Canvas, Geolocation,
Web Applications, Audio, WebGL, Microdata,
Video, Workers, Files, Elements, Storage, Local
Devices, User interaction, Parsing rules, …
10. Build Mobile Web with HTML5
• Decide which platforms/browsers you will
support
-ms-
Webkit on Mobile?
-o-
There is no webkit on mobile
-moz- http://quirksmode.org/webkit.html
-webkit-
11. Build Mobile Web with HTML5
• HTML Markup
<!DOCTYPE html> Semantic HTML:
<html> <section>
<head> <article>
<meta charset="utf-8" /> <nav>
<meta name="viewport" <aside>
content="width=device-width, initial-scale=1, <header>
maximum-scale=1, user-scalable=no"> <progress>
<link rel="apple-touch-icon" <time>
href="images/favicon.png" /> …
</head> Basic Setting:
<body> Set Viewport
</body> Turn off user-scaling
</html> Set favicon …
http://www.w3.org/wiki/HTML/Elements
13. Build Mobile Web with HTML5
• Media Queries /*styles for 800px and up!*/
@media only screen and (min-width: 800px) {
/* Styles */
}
/* iPhone 4, Opera Mobile 11 and other high
pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-
ratio: 1.5),
only screen and (-o-min-device-pixel-ratio:
3/2),
only screen and (min--moz-device-pixel-ratio:
1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* Styles */
}
18. Build Mobile Web with HTML5
• Media Support
<video poster="" src="" width="2"
height="1" x-webkit-
airplay="allow"></video>
<audio controls preload="auto"
autobuffer>
<source src="elvis.mp3" />
<source src="elvis.ogg" />
</audio>
19. Build Mobile Web with HTML5
• Geolocation API
Position Object
navigator.geolocation.getCurrentPosition(succe
ss, failure, options);
PERMISSION_DENIED (1)
POSITION_UNAVAILABLE (2)
TIMEOUT (3)
UNKNOWN_ERROR (0)
20. Build Mobile Web with HTML5
• Javascript Events
window.addEventListener("touchstart", function(e){
//e.touches;
}, false);
window.addEventListener("orientationchange", function(e){
//window.orientation(0 is portrait, 90 and -90 are landscape)
}, false);
window.addEventListener("deviceorientation", function(e){
//e.alpha
//e.beta
//e.gamma
}, false);
window.addEventListener("devicemotion", function(e){
//e.acceleration.x/y/z
//e.accelerationIncludingGravity.x/y/z
}, false);
http://www.html5rocks.com/en/tutorials/device/orientation/
21. Build Mobile Web with HTML5
• Device Support
window.devicePixelRatio HTML Media Capture:
navigator.connection(Android2.2+) <input type="file" accept="image/*"
// contents of navigator.connection capture="camera" />
object <device type="media"></device>
{
"type": "3", <video autoplay></video>
"UNKNOWN": "0", navigator.getUserMedia({video: true,
"ETHERNET": "1", audio: true}, function(stream) {
"WIFI": "2", var video =
"CELL_2G": "3", document.querySelector('video');
"CELL_3G": "4" video.src = stream;
} }, errorCallback);
http://dev.w3.org/2011/webrtc/editor/getusermedia.html
22. Build Mobile Web with HTML5
• User Interaction
Drag and Drop
HTML Editing
Session History window.history.pushState(data, title, url);//Add
one history state into browser history and
update the URL in the browser window.
window.history.replaceState(state, title,
url);//Modify the current history entry instead
of creating a new one.
window.onpopstate = function(e){e.state;};//A
popstate event is dispatched to the window
every time the active history entry changes.
http://html5demos.com/history
23. Build Mobile Web with HTML5
• Performance
Offline Web Application Cache:
<html manifest="/cache.manifest">
AddType text/cache-manifest .manifest
CACHE MANIFEST
NETWORK/CACHE/FALLBACK:
LocalStorage/SessionStorage:
varfoo = localStorage.getItem("bar");
localStorage.setItem("bar", foo);
window.addEventListener("storage", handle_storage, false);
Web Workers:
var worker = new Worker('doWork.js');
worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.data);
}, false);
worker.postMessage('Hello World'); // Send data to our worker.
24. Build Mobile Web with HTML5
• Communication
Cross-document messaging
Server-Sent Events(XHR2)
Web Sockets
conn = new WebSocket('ws://node.remysharp.com:8001');
conn.onopen= function () {};
conn.onmessage= function (event) {
// console.log(event.data);
};
conn.onclose= function (event) {
state.className = 'fail';
state.innerHTML = 'Socket closed';
};
http://html5demos.com/web-socket
25. Build Mobile Web with HTML5
• Make Web App
Full screen mode:
<meta name="apple-mobile-web-app-capable"
content="yes" />
Native Look:
text-shadow box-shadow
multi backgrounds border-image
border-radius
rgba color gradient
transform transition
Mobile Behavior:
position: fixed; overflow: scroll;
touch/gesture/orientationchange event
Offline:
AppCache
LocalStorage
http://adamlu.com/iEye/
26. Mobile Web App Strategy
• Evaluate your requirement
• Decide what app you’ll do
• A hybrid app maybe a good approach (Web
App Native App)
• Mobile-First Responsive Design
• Progressive Enhancement
• Lighter is better
30. Inspiration
• http://mobile-patterns.com/ - Mobile UI
Patterns
• http://pttrns.com- Another gallery of Mobile
UI
• http://mobileawesomeness.com- the best in
mobile web design and developer news.