responsive web design in oracle application express

Download Responsive Web Design in Oracle Application Express

Post on 18-Nov-2014

3.260 views

Category:

Documents

2 download

Embed Size (px)

DESCRIPTION

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

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 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, lets 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 scrollingacross 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

Recommended

View more >