The document discusses creating mobile apps without using native code. It describes how mobile apps today are often created natively, but that native apps have disadvantages like being expensive to create and only working on specific platforms. The document then presents alternatives like mobile web apps and hybrid apps. It provides examples of how to build a basic mobile web app using HTML, CSS, and responsive design techniques like viewports and media queries to make the app work well on different devices.
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.
We’ll get deep in the well-known techniques for website’s performance (from Steve Souders and others) and how real mobile devices reacts to each one. Are mobile browsers compatible with CSS Sprites or with Lazy Load Script? What about inline images and canvas? What are the big differences between desktop and mobile web performance?
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.
We’ll get deep in the well-known techniques for website’s performance (from Steve Souders and others) and how real mobile devices reacts to each one. Are mobile browsers compatible with CSS Sprites or with Lazy Load Script? What about inline images and canvas? What are the big differences between desktop and mobile web performance?
A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements, are deployed to web servers and accessible through URLs (on HTTPS protocol).
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
CSS Media Queries have received a justifiable amount of hype lately. However, do they really represent a new way to take your web content mobile or do they promise more than they deliver? In this session lynda.com senior author James Williamson breaks down media queries, how to use them, and where they belong in your mobile development medicine chest.
Mobilism 2011: How to put the mobile in the mobile webJenifer Hanen
Media queries, server-side or client-side sniffers, how do we determine if the user is a mobile or desktop device? This tech talk will discuss which is the right solution(s) and how to implement it taking into consideration the various mobile user's browser capacity, bandwidth restrictions, as well as user choice.
Jenifer Hanen
@msjen
http://blackphoebe.com/msjen
Designing for the web is no longer what it used to be.
The number of devices with web-browsing capabilities is
growing at an increasing speed.
RWD is an approach aimed to provide a solid viewing
experience for a multiple of screens with one set of code.
Front End page speed performance improvements for DrupalAndy Kucharski
If you are a developer or business manager with responsibilities over your website, then check out this deck..
What will you learn?
The webinar, created by our Founder and CEO, Andy Kucharski, is a highly accessible, information-rich review on the ways Drupal site performance can be radically improved. Some of the main topics we will cover include:
What is slow site speed?
What tools to use to diagnose it.
Plus six key improvements to make Drupal “run fast!”
And if that’s not already enough, we will also share some best practices monitoring tips for making sure you know how the Drupal server is performing 24/7.
Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment.
They are reliable, fast, engaging and delivering amazing UX to end users. And they are here!
The slides are from my talk at http://2018.symfonycamp.org.ua/
Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/
Weiss in Singapore on Mobile 2.0 & UX Trends 2009Scott Weiss
Scott Weiss presented on the future of mobile web browsing and applications, from a 2009 perspective. This talk was sponsored by Human Factors International and NCS in Singapore in March, 2009.
An Interactive Introduction To R (Programming Language For Statistics)Dataspora
This is an interactive introduction to R.
R is an open source language for statistical computing, data analysis, and graphical visualization.
While most commonly used within academia, in fields such as computational biology and applied statistics, it is gaining currency in industry as well – both Facebook and Google use R within their firms.
http://inarocket.com
Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.
How to Build a Dynamic Social Media PlanPost Planner
Stop guessing and wasting your time on networks and strategies that don’t work!
Join Rebekah Radice and Katie Lance to learn how to optimize your social networks, the best kept secrets for hot content, top time management tools, and much more!
Watch the replay here: bit.ly/socialmedia-plan
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldabaux singapore
How can we take UX and Data Storytelling out of the tech context and use them to change the way government behaves?
Showcasing the truth is the highest goal of data storytelling. Because the design of a chart can affect the interpretation of data in a major way, one must wield visual tools with care and deliberation. Using quantitative facts to evoke an emotional response is best achieved with the combination of UX and data storytelling.
A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements, are deployed to web servers and accessible through URLs (on HTTPS protocol).
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
CSS Media Queries have received a justifiable amount of hype lately. However, do they really represent a new way to take your web content mobile or do they promise more than they deliver? In this session lynda.com senior author James Williamson breaks down media queries, how to use them, and where they belong in your mobile development medicine chest.
Mobilism 2011: How to put the mobile in the mobile webJenifer Hanen
Media queries, server-side or client-side sniffers, how do we determine if the user is a mobile or desktop device? This tech talk will discuss which is the right solution(s) and how to implement it taking into consideration the various mobile user's browser capacity, bandwidth restrictions, as well as user choice.
Jenifer Hanen
@msjen
http://blackphoebe.com/msjen
Designing for the web is no longer what it used to be.
The number of devices with web-browsing capabilities is
growing at an increasing speed.
RWD is an approach aimed to provide a solid viewing
experience for a multiple of screens with one set of code.
Front End page speed performance improvements for DrupalAndy Kucharski
If you are a developer or business manager with responsibilities over your website, then check out this deck..
What will you learn?
The webinar, created by our Founder and CEO, Andy Kucharski, is a highly accessible, information-rich review on the ways Drupal site performance can be radically improved. Some of the main topics we will cover include:
What is slow site speed?
What tools to use to diagnose it.
Plus six key improvements to make Drupal “run fast!”
And if that’s not already enough, we will also share some best practices monitoring tips for making sure you know how the Drupal server is performing 24/7.
Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment.
They are reliable, fast, engaging and delivering amazing UX to end users. And they are here!
The slides are from my talk at http://2018.symfonycamp.org.ua/
Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/
Weiss in Singapore on Mobile 2.0 & UX Trends 2009Scott Weiss
Scott Weiss presented on the future of mobile web browsing and applications, from a 2009 perspective. This talk was sponsored by Human Factors International and NCS in Singapore in March, 2009.
An Interactive Introduction To R (Programming Language For Statistics)Dataspora
This is an interactive introduction to R.
R is an open source language for statistical computing, data analysis, and graphical visualization.
While most commonly used within academia, in fields such as computational biology and applied statistics, it is gaining currency in industry as well – both Facebook and Google use R within their firms.
http://inarocket.com
Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.
How to Build a Dynamic Social Media PlanPost Planner
Stop guessing and wasting your time on networks and strategies that don’t work!
Join Rebekah Radice and Katie Lance to learn how to optimize your social networks, the best kept secrets for hot content, top time management tools, and much more!
Watch the replay here: bit.ly/socialmedia-plan
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldabaux singapore
How can we take UX and Data Storytelling out of the tech context and use them to change the way government behaves?
Showcasing the truth is the highest goal of data storytelling. Because the design of a chart can affect the interpretation of data in a major way, one must wield visual tools with care and deliberation. Using quantitative facts to evoke an emotional response is best achieved with the combination of UX and data storytelling.
Content personalisation is becoming more prevalent. A site, it's content and/or it's products, change dynamically according to the specific needs of the user. SEO needs to ensure we do not fall behind of this trend.
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
By David F. Larcker, Stephen A. Miles, and Brian Tayan
Stanford Closer Look Series
Overview:
Shareholders pay considerable attention to the choice of executive selected as the new CEO whenever a change in leadership takes place. However, without an inside look at the leading candidates to assume the CEO role, it is difficult for shareholders to tell whether the board has made the correct choice. In this Closer Look, we examine CEO succession events among the largest 100 companies over a ten-year period to determine what happens to the executives who were not selected (i.e., the “succession losers”) and how they perform relative to those who were selected (the “succession winners”).
We ask:
• Are the executives selected for the CEO role really better than those passed over?
• What are the implications for understanding the labor market for executive talent?
• Are differences in performance due to operating conditions or quality of available talent?
• Are boards better at identifying CEO talent than other research generally suggests?
MOTODEV Technology Evangelist, Suzanne Alexandra covers the many factors involved in choosing to develop an Android or web app that will meet enterprise requirements. She provides tips and best practices, and reviews sample apps on each platform.
Topics include:
-Key business and technology advantages of each approach
-Examples of apps built on each platform
-Browser support of HTML5 features
-The hybrid app approach
Twitter hashtag: #nativevsweb
Got questions about this event tweet @motodev or post them on community.developer.motorola.com
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
A session talk for #NAGW2012 on:
Mobile app, choices
Dreamweaver’s place
Creating Mobile Design (actual design, not code)
Other helpful Adobe tools to create HTML/CSS
jQuery Mobile in DW
PhoneGap Build in DW
See how PhoneGap (Apache Cordova), an open-source framework, and the Adobe PhoneGap Build service, part of the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. Learn how PhoneGap works and how it will enable you to start building mobile apps with web standards. This talk will introduce you to the PhoneGap API and walk you through how to interact with the JavaScript methods to create interactive, feature-rich mobile applications. You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud.
This session will cover:
Getting started with the PhoneGap API
Interacting with the native device features (camera, video)
Accessing and using the geolocation sensors
Compiling the application using PhoneGap Build
CM WebClient - the Javascript Web and Mobile Applicaiton generator for CA Plex that lets you use your existing Plex skills, panel designs, and action diagrams. Works with any Plex function - Patterns or OBASE.
A talk I was asked to give on the various options for building mobile applications / getting content onto mobile devices.
I chose to organize it as gradient surveying the spectrum from web to native, all the stuff in between. Unfortunately for native I've only had experience with iOS so I couldn't really speak towards the other platforms.
I do think that non native solutions can take care of 95% of the use cases, and this gap will only narrow as time goes on - I'm thinking back to early 2010 when cross platform SDKs like Appcelerator Titanium came onto the scene and how much has changed.
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
With thousands of applications and millions of downloads, the App Store has been a resounding success that has prompted other phones manufacturers to develop their own App Stores. Developers and businesses alike took notice of the early success and sales of iPhone apps and now the rush is on to build native mobile applications. Now businesses say they need an mobile application before they know what the business case for the application will be. But are native applications really the future of mobile? What happened to the promise of the Mobile Web? And what about hybrid applications? When does it make sense to build each type of application? What are the limitations of each? And where is each technology headed? Learn how to make and informative decision between these two approaches.
Introduction to PhoneGap
Background
Setting up the environment for Android
Handling Events
Working With The Device, The Network, And Notifications
Getting Information from the Device
Determining the Connection Type
Using Notifications
Using Alerts
Using Confirmation Dialogs
Using Beeps
Using Vibrations
Accelerometer
Using the Acceleration Object
Using Accelerometer Methods
Media
The Media Object
Using Media Methods
Camera
Using The Camera Object
Using The Getpicture Method
Using Camera Options
Geolocation
Position, PositionError, Coord
Geolocation Methods
Geolocation Options
Deployment using Phonegap (Android)
Hands-on exercises
Storage
Available options
Db object
localStorage
Files
Filessystem
File read & write
Handling errors
Contacts
Creating contacts
Finding contacts
Handling errors
Capture
Video
Audio
Handling errors
Hands-on exercises
Introduction to PhoneGap
Background
Setting up the environment for Android
Handling Events
Working With The Device, The Network, And Notifications
Getting Information from the Device
Determining the Connection Type
Using Notifications
Using Alerts
Using Confirmation Dialogs
Using Beeps
Using Vibrations
Accelerometer
Using the Acceleration Object
Using Accelerometer Methods
Media
The Media Object
Using Media Methods
Camera
Using The Camera Object
Using The Getpicture Method
Using Camera Options
Geolocation
Position, PositionError, Coord
Geolocation Methods
Geolocation Options
Deployment using Phonegap (Android)
Hands-on exercises
Storage
Available options
Db object
localStorage
Files
Filessystem
File read & write
Handling errors
Contacts
Creating contacts
Finding contacts
Handling errors
Capture
Video
Audio
Handling errors
Hands-on exercises
Attending a job Interview for B1 and B2 Englsih learnersErika906060
It is a sample of an interview for a business english class for pre-intermediate and intermediate english students with emphasis on the speking ability.
Discover the innovative and creative projects that highlight my journey throu...dylandmeas
Discover the innovative and creative projects that highlight my journey through Full Sail University. Below, you’ll find a collection of my work showcasing my skills and expertise in digital marketing, event planning, and media production.
Memorandum Of Association Constitution of Company.pptseri bangash
www.seribangash.com
A Memorandum of Association (MOA) is a legal document that outlines the fundamental principles and objectives upon which a company operates. It serves as the company's charter or constitution and defines the scope of its activities. Here's a detailed note on the MOA:
Contents of Memorandum of Association:
Name Clause: This clause states the name of the company, which should end with words like "Limited" or "Ltd." for a public limited company and "Private Limited" or "Pvt. Ltd." for a private limited company.
https://seribangash.com/article-of-association-is-legal-doc-of-company/
Registered Office Clause: It specifies the location where the company's registered office is situated. This office is where all official communications and notices are sent.
Objective Clause: This clause delineates the main objectives for which the company is formed. It's important to define these objectives clearly, as the company cannot undertake activities beyond those mentioned in this clause.
www.seribangash.com
Liability Clause: It outlines the extent of liability of the company's members. In the case of companies limited by shares, the liability of members is limited to the amount unpaid on their shares. For companies limited by guarantee, members' liability is limited to the amount they undertake to contribute if the company is wound up.
https://seribangash.com/promotors-is-person-conceived-formation-company/
Capital Clause: This clause specifies the authorized capital of the company, i.e., the maximum amount of share capital the company is authorized to issue. It also mentions the division of this capital into shares and their respective nominal value.
Association Clause: It simply states that the subscribers wish to form a company and agree to become members of it, in accordance with the terms of the MOA.
Importance of Memorandum of Association:
Legal Requirement: The MOA is a legal requirement for the formation of a company. It must be filed with the Registrar of Companies during the incorporation process.
Constitutional Document: It serves as the company's constitutional document, defining its scope, powers, and limitations.
Protection of Members: It protects the interests of the company's members by clearly defining the objectives and limiting their liability.
External Communication: It provides clarity to external parties, such as investors, creditors, and regulatory authorities, regarding the company's objectives and powers.
https://seribangash.com/difference-public-and-private-company-law/
Binding Authority: The company and its members are bound by the provisions of the MOA. Any action taken beyond its scope may be considered ultra vires (beyond the powers) of the company and therefore void.
Amendment of MOA:
While the MOA lays down the company's fundamental principles, it is not entirely immutable. It can be amended, but only under specific circumstances and in compliance with legal procedures. Amendments typically require shareholder
Taurus Zodiac Sign_ Personality Traits and Sign Dates.pptxmy Pandit
Explore the world of the Taurus zodiac sign. Learn about their stability, determination, and appreciation for beauty. Discover how Taureans' grounded nature and hardworking mindset define their unique personality.
Premium MEAN Stack Development Solutions for Modern BusinessesSynapseIndia
Stay ahead of the curve with our premium MEAN Stack Development Solutions. Our expert developers utilize MongoDB, Express.js, AngularJS, and Node.js to create modern and responsive web applications. Trust us for cutting-edge solutions that drive your business growth and success.
Know more: https://www.synapseindia.com/technology/mean-stack-development-company.html
Cracking the Workplace Discipline Code Main.pptxWorkforce Group
Cultivating and maintaining discipline within teams is a critical differentiator for successful organisations.
Forward-thinking leaders and business managers understand the impact that discipline has on organisational success. A disciplined workforce operates with clarity, focus, and a shared understanding of expectations, ultimately driving better results, optimising productivity, and facilitating seamless collaboration.
Although discipline is not a one-size-fits-all approach, it can help create a work environment that encourages personal growth and accountability rather than solely relying on punitive measures.
In this deck, you will learn the significance of workplace discipline for organisational success. You’ll also learn
• Four (4) workplace discipline methods you should consider
• The best and most practical approach to implementing workplace discipline.
• Three (3) key tips to maintain a disciplined workplace.
Accpac to QuickBooks Conversion Navigating the Transition with Online Account...PaulBryant58
This article provides a comprehensive guide on how to
effectively manage the convert Accpac to QuickBooks , with a particular focus on utilizing online accounting services to streamline the process.
Putting the SPARK into Virtual Training.pptxCynthia Clay
This 60-minute webinar, sponsored by Adobe, was delivered for the Training Mag Network. It explored the five elements of SPARK: Storytelling, Purpose, Action, Relationships, and Kudos. Knowing how to tell a well-structured story is key to building long-term memory. Stating a clear purpose that doesn't take away from the discovery learning process is critical. Ensuring that people move from theory to practical application is imperative. Creating strong social learning is the key to commitment and engagement. Validating and affirming participants' comments is the way to create a positive learning environment.
Personal Brand Statement:
As an Army veteran dedicated to lifelong learning, I bring a disciplined, strategic mindset to my pursuits. I am constantly expanding my knowledge to innovate and lead effectively. My journey is driven by a commitment to excellence, and to make a meaningful impact in the world.
2. Mobile
today
• A
lot
of
really
great
native
apps
• A
lot
of
fun
native
apps
3. Native
apps
Positive
Negative
• Perfect
for
games
• Expensive
to
create
• Perfect
for
performance
• You
are
not
in
control
• Perfect
for
phone
access
• iOS
is
not
Windows
– Accelerometer
– iOS
– Camera
– Android
– Contacts
– Windows
Phone
– Geolocation
– Of<line
– Nokia
– …
– BlackBerry
• Perfect
for
sales
– HP
webOS
4. Alternatives
• Ignore
mobile
– Not
really
an
option
today
• Mobile
web
apps
• Hybrid
solution
• Some
apps
doesn’t
have
to
be
native
5. Web
development
W3C
Standards
Browsers
XHTML
1.0
Firefox
Chrome
Windows
|
Mac
|
Linux
Windows
|
Mac
|
Linux
HTML
5
IE
Safari
CSS
Windows
Windows
|
Mac
Opera
JavaScript
Windows
|
Mac
|
Linux
+
frameworks
6. Mobile
web
development
W3C
Standards
OMA
Standards
W3C
Mobile
XHTML
1.0
XHTML
MP
XHTML
Basic
version:
1.0,
1.1
&
1.2
version:
1.0
&
1.1
HTML
5
WAP
CSS
CSS
MP
CSS
JavaScript
+
frameworks
7. Let’s
build
a
mobile
web
app
<!DOCTYPE
html>
<html>
<head>
<title>Mobile
Demo</title>
</head>
<body>
<h1>Welcome
to
our
app</h1>
<p>This
is
our
very
first
mobile
web
app</p>
</body>
</html>
8. <!DOCTYPE
html>
<html>
<head>
<title>Mobile
Demo</title>
<meta
name=”viewport”
content=”width=device-‐width”
/>
<meta
name=”viewport”
content=”initial-‐scale=1.0”
/>
<meta
name=”viewport”
content=”user-‐scalable=no”
/>
<meta
name=”viewport”
content=”target-‐densitydpi=device-‐dpi”
/>
<meta
name=”HandheldFriendly”
content=”true”
/>
<meta
name=”MobileOptimized”
content=”width”
/>
</head>
<body>
<h1>Welcome
to
our
app</h1>
<p>This
is
our
very
first
mobile
web
app</p>
</body>
</html>
11. Creating
content
• Use
correct
syntax
and
markup
all
your
content
• Make
sure
it
works
without
JavaScript
and
CSS
• Make
all
controls
bigger
• Design
for
different
screen
sizes
• Avoid
tables
with
multiple
columns
and
forms
as
long
as
possible
• Find
a
framework
to
help
you!
12. Styling
content
• Use
external
CSS
for
styling
content
• Try
to
use
CSS3
instead
of
images
• Try
to
use
CSS
sprites
if
possible
<link
type=”text/css”
rel=”stylesheet”
media=”handheld”
href=”iphone.css”
/>
• Doesn’t
work
for
iPhone
and
Android!
13. Media
queries
<link
type=”text/css”
rel=”stylesheet”
media=”screen
and
(max-‐device-‐width:
480px)”
href=”iphone.css”
/>
@import
url(iphone.css)
screen
and
(max-‐device-‐width:
480px);
@media
screen
and
(max-‐device-‐width:
480px)
{
body
{
background-‐color:
red;
}
}
14. Media
queries
<link
type=”text/css”
rel=”stylesheet”
media=”screen
and
(max-‐device-‐width:
480px)”
href=”iphone.css”
/>
@import
url(iphone.css)
screen
and
(max-‐device-‐width:
480px);
@media
screen
and
(max-‐device-‐width:
480px)
{
body
{
background-‐color:
red;
}
}
@media
screen
and
(orientation:
landscape)
...
@media
screen
and
(-‐webkit-‐min-‐device-‐pixel-‐ratio:
2)
...
16. jQuery
Mobile
• Version
1.0
alpha
4.1
• Easy
to
learn
• Uses
progressive
enhancement
• Great
device
support
• Builds
on
popular
jQuery
• Uses
CSS3
for
effects
• Small
19. ...
<body>
<div
data-‐role=”page”
id=”index”>
<div
data-‐role=”header”>
<h1>Mobile
Demo</h1>
</div>
<div
data-‐role=”content”>
<h2>Welcome
to
our
app</h2>
<p>This
is
our
very
first
mobile
web
app</p>
</div>
</div>
</body>
</html>
24. OfHline
• HTML5:
Of<line
Application
Cache
– Use
a
manifest
<ile
to
de<ine
the
cache
CACHE
MANIFEST
#
v
=
1.0.0
jquery.mobile-‐1.0a4.1.min.css
jquery-‐1.5.2.min.js
jquery.mobile-‐1.0a4.1.min.js
images/ajax-‐loader.png
images/icon-‐search-‐black.png
images/icons-‐18-‐black.png
images/icons-‐18-‐white.png
images/icons-‐36-‐black.png
images/icons-‐36-‐white.png
index.html
25. OfHline
• HTML5:
Of<line
Application
Cache
– Use
a
manifest
<ile
to
de<ine
the
cache
<!DOCTYPE
html>
<html
manifest=”my_cached_files.manifest">
<head>
<title>Mobile
Demo</title>
<link
rel=”stylesheet”
href=”jquery.mobile-‐1.0a4.1.min.css”
/>
<script
type=”text/javascript”
src=”jquery-‐1.5.2.min.js”></script>
<script
type=”text/javascript”
src=”jquery.mobile-‐1.0a4.1.min.js”></script>
...
26. PhoneGap
• Use
HTML5
and
CSS3
to
create
your
application
• Use
JavaScript
to
implement
business
logic
• Use
PhoneGap
JavaScript
lib
to
access
native
features
• Deploy
to
multiple
platforms
– iOS,
Android,
BlackBerry,
webOS,
Symbian
(supported)
– Windows
Phone,
MeeGo,
Bada
(planned)
• Use
build
server
to
automate
process
27. Final
thoughts
• HTML5
has
huge
potential
• It’s
still
dif<icult
– Browsers
are
still
not
your
friend
– Testing
is
much
more
dif<icult
– Usability
is
essential
• jQuery
Mobile
is
still
in
alpha
mode
28. Thank
you
for
listening
http://demo.kemeny.se/
javaforum2011/
30. Links
(continued)
• W3C
HTML5
• Programming
the
mobile
web
http://www.w3.org/TR/html5 http://oreilly.com/catalog/9780596807795
• W3C
Media
Queries
• Designing
with
progressive
http://www.w3.org/TR/css3-‐mediaqueries
enhancement
http://www.<ilamentgroup.com/dwpe/
• W3C
XHTML
Basic
http://www.w3.org/TR/2010/REC-‐xhtml-‐basic-‐20101123
• Mobile
Web
Best
Practices
• W3C
CSS
Mobile
Pro<ile
http://http://www.w3.org/TR/mobile-‐bp
http://www.w3.org/TR/2008/CR-‐css-‐mobile-‐20081210
• Mobile
Web
Application
Best
Practices
• Open
Mobile
Alliance
http://http://www.w3.org/TR/mwabp
http://www.openmobilealliance.org