Strategies for Landing an Oracle DBA Job as a Fresher
Â
Web App vs Web Site
1. Web App Vs Web Site
Some tricks of the trade
Laurent Hasson
@ldhasson, lhasson@rim.com
Technical Director, BlackBerry Web Platform
2012-05-09 Web Apps Vs. Web Sites 1
3. Web App Or Web Site?
âą Lots of controversies and differing opinions from very smart
people on the Web
â Should a mobile Web app be more Weby, or more Appy?
âą My take: users today are conditioned to the App Life Cycle
â Download something
â Install something
â Have an icon on the home screen
â The App takes the entire screen real estate
â The App is integrated with the device
âą But users really donât care how the app was built!!!
â So use Web technologies for the job!!
2012-05-09 Web Apps Vs. Web Sites 3
4. Two Dimensions to App Experience
Life Cycle
There are many options to make the journey
Contents
2012-05-09 Web Apps Vs. Web Sites 4
5. Two Dimensions to App Experience
Life Cycle
Contents
2012-05-09 Web Apps Vs. Web Sites 5
6. Say no to NIBS
- The âNative Is Betterâ crowd are
missing the point of the Web
- Itâs the scale of the market stupid!
- Itâs powerful, cross-platform, and an
abundant skill set.
NIBS
- This is not to say that Web is better
than Native
- That would be silly
- But the Web is absolutely
competitive
- Most types of apps can now be built
very nicely using Web technologies
- The gap is narrow today, keeps on
getting narrower, and fast.
- Make no mistake
* Native Is Better Syndrome
- Native is the competition to Web
2012-05-09 Web Apps Vs. Web Sites 6
7. Web App Design Goals
âą Single-page app metaphor
â DOM manipulation for panels
â And if not, mask page loading transitions
âą Lack of browser chrome
â Links, Bookmarks and Back
âą Browser Events
â Targeting multiple platforms means managing touches
and clicks equally
âą Viewport Management
â Horizontal bounciness is bad
â Zooming can be dangerous
2012-05-09 Web Apps Vs. Web Sites 7
9. When a pixel is no longer a pixel
âą The desktop viewport is WYSIWYG
â Window dimensions are well known
âą On mobile, itâs a whole other story
â What you see is a viewport on a larger âthingâ
âą Panning is a fact of life for most users
âą Zooming is a critical part of the browser UX
âą And pixels are no longer display-relevant
â High DPI and other display technologies have
changed the meaning of what a pixel is
â Better res without breaking the Web
2012-05-09 Web Apps Vs. Web Sites 9
10. CSS Pixels
âą These are the pixels we deal with everyday
â CSS definitions
â Inline dimensions in HTML
â Media queries
âą On desktop, a CSS px == 1 device px
âą On mobile, donât even try
â The device vendor decides what the mapping is
â You typically canât tell programmatically what the ratio
is
â So deal with those abstract pixels
âą On BlackBerry, default is 160DPI
2012-05-09 Web Apps Vs. Web Sites 10
12. How many Pixel?
âą screen.width/height
â Device pixels
â Entire screen, pretty useless as itâs really a desktop concept
âą document.documentElement.clientWidth/clientHeight
â CSS pixels: 768px (usable space, minus browser chrome, so height is different)
â Useful for media queries
âą window.innerWidth/innerHeight
â CSS Pixels of viewport: Depending on zoom level
â DPI-scaled: 350px width (native res scaled to 160dpi for zoom-level of 1)
âą window.pageXOffset/pageYOffset
â CSS Pixels of scrolling
2012-05-09
12 Web Apps Vs. Web Sites
13. Viewport and Media Queries
<meta name="viewport"
content="height=device-height, width=device-width,
initial-scale=1.0, maximum-scale=1.0,
user-scalable=0">
â Makes sure your page doesnât flow beyond screen dimensions
(including margins and borders)
â Works as long as your content doesnât force overflow
â Deal in %
⹠@media all and (max-width: 480px) { ⊠}
â There are other flexible syntaxes for CSS media queries
2012-05-09 Web Apps Vs. Web Sites 13
14. Orientation: Landscape or Portrait
âą Make sure you test in both modes
âą Or lock the orientation
â There are configuration flags available through packagers
such as Apache Cordova
âą Upcoming ScreenOrientation API
â screen.orientation=âportraitâ|âlandscapeâ|âŠ,
screen.lockOrientation(ââŠâ), screen.unlockOrientation(),
screen.onOrientationChange
â LanguishingâŠ
2012-05-09 Web Apps Vs. Web Sites 14
16. World Wide Web == Wild Wild West
âą Some platforms do touch well
âą Others simulate clicks
â With delays and quirks
âą Behaviors expected when preventDefault() are
not consistent
âą Plus, you may want to create Web content
that also works in a browser
â Thatâs still an important goal if it makes sense to
you
2012-05-09 Web Apps Vs. Web Sites 16
17. Your mileage may vary
TouchStart
If nothing else within 300ms
MouseDown
TouchMove
MouseMove
MouseUp
TouchEnd
MouseClick
âą Delay is not the same everywhere
âą The interplay between touch and mouse events vary
âą The effect of onPreventDetault() vary
2012-05-09 Web Apps Vs. Web Sites 17
18. The Infamous Delay
âą When the browser gets a touch, it needs to
wait to see if there is a move or not
â Some of the browserâs own UX for pan/zoom need
that
â Typically 300ms
âą In your app, you should take control of that
â You typically donât want zooming gestures
â You know what you expect from your users
â You donât want that 300ms delay
2012-05-09 Web Apps Vs. Web Sites 18
19. touch-event-mode: BlackBerry Only ï
<meta name="touch-event- <meta name="touch-event-
modeâ content="native"> mode" content=âpure-with-
mouse-conversion">
âą WebPage gets TouchEvents
only from touch screen. âą WebPage gets both Touch
events and Mouse events.
User touches screen
User touches screen
Touch
Touch
onTouch Y
XXX?
DONE N DONE
Mouse
Browser UX disabled: DoubleTap zoom, pinch zoom, text selection and context menus
2012-05-09 Web Apps Vs. Web Sites 19
20. Control Your Destiny
TouchStart
MouseDown
TouchMove
MouseMove
MouseUp
TouchEnd MouseClick
2012-05-09 Web Apps Vs. Web Sites 20
21. Yeah, i know, itâs a bit controversial
2012-05-09 Web Apps Vs. Web Sites 21
22. Custom Event Handling
if (Touch)
{
document.ontouchend = function(event)
{
Blocks Browser UX behaviors
event.preventDefault();
var e = event.target;
You may have to walk up the parent
while (e && !e.click) nodes to find an actual click() handler.
e = e.parentNode;
Convert touch coordinates to click
if (!e || !e.click) coordinates
return;
event.clientX = event.changedTouches[0].pageX;
event.clientY = event.changedTouches[0].pageY;
e.click(event);
} Invoke the onClick handler
}
You may want to do things differently to suit your app requirements, but the core idea is here
2012-05-09 Web Apps Vs. Web Sites 22
23. Other virtual events systems
âą Maps deviceOrientation events to key events
â Simulates up/down/left/right arrows, or WASD or
whatever
â Most virtual keyboards donât have arrow keys
â Most virtual keyboards wouldnât make sense in
games anyways
â Redirects to onKeyUp
âą Famous frameworks, such as jQueryMobile,
do it too, to gain control of, and unify, events.
2012-05-09 Web Apps Vs. Web Sites 23
24. user-select
âą There is one more browser UX you may want to
disable as well
â User selection can be very annoying when in an app
body {
user-select: none;
}
âą Or do that on selected sub-DOMs of your app
âą In some cases, it makes sense, and you want to
reuse the browser mechanisms for that
2012-05-09 Web Apps Vs. Web Sites 24
26. Arguably, the Web is about Navigation
âą You donât realize how much the Browserâs skin
does with your site until you donât have it
anymore
âą So many sites can still paint you into a corner
where you canât escape without the back
button
â Even some big sites do it (I wonât name names!)
âą How about navigation
â Many APIs exist now, and are well supported to
help you.
2012-05-09 Web Apps Vs. Web Sites 26
27. Bookmarks == saved application states
âą Why wouldnât you let your users create in-app
bookmarks for content they specially like?
âą Doing an App now doesnât mean you have to
forget about REST principles and what has
made the Web so cool!
âą You need
â The History API
â Local storage
â Some UI to let your users manage their
âbookmarksâ
2012-05-09 Web Apps Vs. Web Sites 27
28. And for debugging?
location.reload(true)
2012-05-09 Web Apps Vs. Web Sites 28
30. Web Apps <> Web Sites
âą If you subscribe to the idea that Web apps must
be Appy, then do things a bit differently
â Viewport management must be explicit
â Manage your own events
â Navigation is different due to lack of chrome
âą But donât drop what makes the web so cool
â Navigation and Bookmarks are powerful features
âą And debugging is hard, unless you do it on a
BlackBerry
â Best mobile browser AND built-in full remote
WebInspector
2012-05-09 Web Apps Vs. Web Sites 30
31. The End â Thank You
2012-05-09 Web Apps Vs. Web Sites 31
32. References
Slide 2: The Matrix (1999)
Slide 5: BlackBerry Loves Apache Cordova
Slide 8: Poltergeist (1982)
Slide 11: Videodrome (1983)
Slide 15: Nightmare On Elm Street (1984)
Slide 21: Hellraiser (1987)
Slide 25: Tetsuo (1989)
Slide 29: Anguish (1987)
Slide 31: Masters Of Horror: Family (2006)
2012-05-09 Web Apps Vs. Web Sites 32