Weitere ähnliche Inhalte
Ähnlich wie Responsive Web Design in Oracle Application Express (20)
Responsive Web Design in Oracle Application Express
- 1. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
1
- 2. Responsive Web Design
in Application Express using
HTML5 and CSS3
Shakeeb Rahman
@shakeeb
Principal Member of Technical Staff
Oracle Application Express #orclapex
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
2
- 3. Shakeeb Rahman
Software Developer
Intern at Oracle in 2006
Joined APEX team in 2009
Projects I have worked on
– Oracle Store
– APEX
– Oracle Cloud
First talk at Oracle OpenWorld
3 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
3
- 4. Program Agenda
The Web Today
Mobile App vs Responsive App
Responsive Web Design
APEX 4.2 Features
Demos
Is Responsive Right for you?
4 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
4
- 5. Evolving Web Applications
10 Years Ago
Designed for Internet Explorer
Windows Desktop or Laptop
Maximum screen resolution of
1024x768
Table-Based
<font> Tag
Presentation + Markup mixed
5 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
5
- 6. Evolving Web Applications
5 Years Ago
Mobile becomes popular with
iPhone
Firefox is eating IE marketshare
Start Investigating Mobile
6 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
6
- 7. Evolving Web Applications
Today
Many Devices
Many Platforms
Many Screen sizes
Many Resolutions
Many Browsers
Many Many Variables
7 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
7
- 8. Evolving Web Applications
Enterprise gone Mobile
Mobile is not just for personal use
Enterprises have embraced
mobile
Agility
Cost savings
Improve productivity
8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
8
- 9. “71% of organizations are already using or
planning to use custom mobile applications”
Symantec
2012 State of Mobility Survey
9 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
9
- 10. Everyone is doing it. How can you?
10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
10
- 14. Dedicated Mobile Web Apps?
14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
14
- 15. Dedicated Mobile Web app
• Fast
• Looks Native
• Optimized for Mobile
• Duplicate Code
• Less Functionality
• Not Optimized for
Tablets
15 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
15
- 16. Dedicated Mobile Web Apps?
16 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
16
- 17. Well, let’s look at the requirements.
17 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
17
- 18. The Business Requirement
Enterprise Application
Work on Desktop, Mobile, Tablets
Similar UI
Single Code Line
Same Developers
No New Technology
18 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
18
- 19. Responsive Web Design (RWD)
19 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
19
- 20. Responsive Web Design (RWD)
an approach to web design in which a designer
intends to provide an optimal viewing experience—
easy reading and navigation with a minimum of
resizing, panning, and scrolling—across a wide
range of devices (from desktop computer monitors to
mobile phones). (Wikipedia)
20 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
20
- 21. Same HTML.
Same Application Logic.
Different User Experience.
21 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
21
- 34. How does it work?
34 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
34
- 35. CSS3 Media Queries
allowing you to define styles based on conditions such
as screen size or resolution
@media screen and (min-width: 320px) and (max-
width: 479px) {...}
define multiple CSS media queries to target “cut off
points” and appropriately adjust UI for given screen size
35 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
35
- 36. Mobile Portrait
– @media screen and (min-width: 320px) and (max-width: 479px)
Mobile Landscape
– @media only screen and (min-width: 480px) and (max-width: 767px)
Mobile Portrait / Landscape
– @media only screen and (max-width: 767px)
Tablet Portrait
– @media only screen and (min-width: 768px) and (max-width: 959px)
Tablet Landscape
– @media only screen and (min-width: 960px) and (max-width: 1024px)
36 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
36
- 37. CSS3 Responsive Utility Classes
Easily hide / show content depending on device type
37 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
37
- 38. Grid Layout
Using a grid makes it easier to
align and lay out page
components
Media Queries can then easily
shift or reposition these
components
38 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
38
- 40. Sounds technical.
Do I have to do this manually?
40 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
40
- 41. NO!
APEX handles all of this for you.
41 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
41
- 42. APEX 4.2 Support for Responsive Web Design
Grid Layout for
Regions and Items
Theme 25
42 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
42
- 43. APEX 4.2 Support for Responsive Web Design
Grid Layout
Declarative way to lay out regions
and items on a page
Possible to do complex layouts
without manual css overrides
Compatible with popular grid
frameworks such as twitter
bootstrap, 960 gs, etc.
43 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
43
- 44. APEX 4.2 Support for Responsive Web Design
Fully Responsive Theme
Uses custom flexible grid up to
2560px wide
Mobile, Tablet, Desktop support
Icon Buttons
Retina Display Compatible
Modernizr
44 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
44
- 45. APEX 4.2 Support for Responsive Web Design
Fully Responsive Theme
SCSS Based
Respond.js for RWD in older IE
One Sprite (and one for Retina)
Icons
45 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
45
- 46. Demo:
Convert Existing App to
Responsive App
46 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
46
- 48. Is Responsive Right for you?
Responsive Mobile
Full Experience Limited Utility
Single Code Line New Mobile Codeline
Web UI Pseudo Native UI
48 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
48
- 51. @shakeeb
blog: apex.shak.us
51 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
51
- 52. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
52
- 53. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
53