Responsive Web Design

Transkript

1 Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen

2 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI Customization (online) Training in Zusammenarbeit mit SkillBuilders Referent (OGh APEX World, OBUG, DOAG, ODTUG KScope)

3 Responsive Web Design APEX/Theme 25 Beyond

4 Responsive Web Design (RWD) umfasst verschiedene Techniken, sowohl an Client- als an Serverseite, mit dem Ziel die Webseite sich auf das Endgerät, von dem sie angefragt wird, an zu passen. Das bedeutet, man entwickelt einen Codebase der die Seite an Bildschirm Größe, Orientierung und Gerät anpasst, um dem Benutzer so optimal mögliche Interaction zu bieten.

5 Queries Grid Layouts Device/Browser Detection verbesserte Performance und Reduzierung der zu übertragenen Datenmenge

6 Sind nicht beschränkt auf width Vergleiche: es gibt ein Vielzahl verschiedener Attribute die mit Hilfe Queries abgefragt werden können (u.a. device orientation, height, aspect ratio und screen and (max-device-width: 640px) and (orientation:portrait) { /* Rules inside condition only apply if the condition is met */ #mydiv { display: inline-block; } all and (orientation:portrait) { all and (orientation:landscape) { }

7 @media Queries können direkt in die Style-Sheet Datei aufgenommen werden. Das ist die am häufigsten benutzte screen and (max-device-width: 640px) and (orientation:portrait) { /* Rules inside condition only apply if the condition is met */ #mydiv { display: inline-block; } }

8 @import Regel um andere Dateien in Style Sheet auf zu url(style600min.css) screen and (min-width: Query als Attribut in mit LINK gekoppelter Style Sheet Datei. <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />

9 Beispiel: JavaScript zur Erkennung der Viewport Größe; BODY Element mit einer extra Class erweitern.

10 Absolute Pixels (px) Point (pt) = 1/72 of an inch Relative units are based on the initial value em unit is relative to the initial value of font-size Percentages (%) Resolution dpi/dpcm: dots per inch / centimeter

11

12

13 <div class="col1"> <p> </p> </div> <div class="col2"> <p> </p> </div> <div class="col3"> <p> </p> </div>

14 @media (min-device-width: 641px) { /* target devices with desktop sized resolution */ }.col1,.col2,.col3 { /* Float the columns to create a three-column layout */ padding: 2em; width: 30%; margin-right: 1em; float: left; }

15 @media (max-device-width: 640px) { /* target devices with smal sized resolution */ }.col1,.col2,.col3 { position: relative; padding: 2em; width: 90%; float: none; display: block; margin-right: 0; }

16

17

18 Fixed Grid nicht notwendigerweise responsive Wird benutzt um Elemente in einem gleichmäßigen Rhythmus an zu legen Fluid/Flexible Grid CSS3 Grid Layout

19 Container Columns Gutter (Abstand) Rows

20

21

22 Ein fixed Website Layout hat einen Container mit fester Breite, und Komponenten haben entweder eine prozentuale oder feste Breite, ungeachtet der Bildschirmresolution.

23 In einem fluid Website Layout haben die meisten Komponenten innerhalb des Container eine prozentuale Breite, und passen sich somit an die Bildschirmresolution an.

24 @media screen and min-width 320px and max-width only screen and min-width 480px and max-width only screen and max-width only screen and min-width 768px and max-width only screen and min-width 960px and max-width screen and min-width 1260px and max-width screen and min-width 1420px and max-width screen and min-width 1660px and max-width screen and min-width screen and min-width 2540px

25 Deklarative Methode um Elemente zu platzieren, ohne selbst CSS schreiben zu müssen (Region Attributes) Lässt die Implementation anderer Grid Frameworks zu, so wie Twitter Bootstrap, 960 gs, etc. (Template)

26

27

28

29

30 Hide/show Content abhängig Query

31

32 #USED_COLUMNS_NUMBER# #USED_COLUMNS_ALPHA# #USED_COLUMNS_ALPHA_MINUS# #USED_COLUMNS_WORD# #USED_COLUMNS_PLURAL# #ROWS# #COLUMNS# #COLUMN_NUMBER# #COLUMN_ALPHA# #COLUMN_WORD# #COLUMN_PLURAL# #COLUMN_SPAN_NUMBER# #COLUMN_SPAN_ALPHA# #COLUMN_SPAN_WORD# #COLUMN_SPAN_PLURAL# #ATTRIBUTES# #FIRST_LAST_COLUMN_ATTRIBUTES# #CONTENT#

33 Entwicklung einer responsive Applikation kann zeitraubend sein und verlangt sehr wahrscheinlich eine gute Einsicht in und Begriff von Grid Layouts, HTML und CSS. Seiten Größe bleibt gleich! Man ladet immer die kompletten HTML, CSS, und JS Ressourcen, auch auf mobile Geräten mit eingeschränkter Bandbreite. Responsive Web Design ist nur die Spitze des Eisbergs.

34

35 Navigation Data Tables Benutzung von konditionellen Abfragen in APEX, zusammen mit Client Property Detection für die optimale Layout Generierung.

36

37

38 desktop mobile

39 @media (orientation:portrait) and (max-width: 640px) { [headers="cust_street_address1"], #CUST_STREET_ADDRESS1 { display: none; } } TD: table data/cell TH: table header

40 Client device property detection categorizr.isportrait categorizr.islandscape categorizr.isdesktop categorizr.istablet categorizr.ismobile

41 Table Reflow, kind of like in APEX 5.0, but then for responsive ( )

42 Demo

43

44 OGh APEX World, 25. März, Zeist (NL) DOAG Development, 4. Juni, Düsseldorf ODTUG KScope 14, Juni, Seattle (USA) ODTUG APEX Theming Competition competition.odtug.com Skillbuilders Online Training ( HTML5, CSS3 und JavaScript in APEX Einführung in Oracle APEX Advanced Oracle APEX