Your SlideShare is downloading. ×
0
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Responsive Web Design in Oracle Application Express
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design in Oracle Application Express

2,862

Published on

Learn how you can develop Responsive Web Applications in Oracle Application Express using Theme 25

Learn how you can develop Responsive Web Applications in Oracle Application Express using Theme 25

1 Comment
1 Like
Statistics
Notes
  • How to set a resolution Points in a screen
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,862
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
52
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13 1
  • 2. Responsive Web Designin Application Express usingHTML5 and CSS3Shakeeb Rahman@shakeebPrincipal Member of Technical StaffOracle 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 OpenWorld3 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 mixed5 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 Mobile6 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 Variables7 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 productivity8 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 Survey9 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
  • 11. Native Apps?11 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 11
  • 12. 12 12
  • 13. Native Apps?13 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 13
  • 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 Tablets15 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 Technology18 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 designerintends to provide an optimal viewing experience— easy reading and navigation with a minimum of resizing, panning, and scrolling—across a widerange 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
  • 22. 22 22
  • 23. 23 23
  • 24. 24 24
  • 25. 25 25
  • 26. 26 26
  • 27. 27 27
  • 28. 28 28
  • 29. 29 29
  • 30. 30 30
  • 31. 31 31
  • 32. 32 32
  • 33. 33 33
  • 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 size35 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 type37 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 components38 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 38
  • 39. Example Grid39 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 39
  • 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 2542 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  Modernizr44 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)  Icons45 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 45
  • 46. Demo: Convert Existing App to Responsive App46 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 46
  • 47. Demo:Sample DB Application Walk Through47 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 47
  • 48. Is Responsive Right for you?  Responsive  Mobile  Full Experience  Limited Utility  Single Code Line  New Mobile Codeline  Web UI  Pseudo Native UI48 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 48
  • 49. 49 49
  • 50. Q&A50 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 50
  • 51. @shakeeb blog: apex.shak.us51 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

×