Beautify your APEX. Alexej Schneider DOAG 2016

Größe: px

Ab Seite anzeigen:

Download "Beautify your APEX. Alexej Schneider DOAG 2016"

Valentin Becke
vor 6 Jahren
Abrufe

1 Beautify your APEX Alexej Schneider DOAG 2016

Inhabergeführte Aktiengesellschaft Gründungsjahr 1994

2 Im Überblick Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Ausbildungsbetrieb Inhabergeführte Aktiengesellschaft Gründungsjahr 1994 Niederlassung Frankfurt am Main Zertifizierter Partner von Oracle, Microsoft und SAP

3 Weitere Vorträge am

4 Bachelor Angewandte Informatik Oracle APEX Berater Vorher: Webdesign/Webentwicklung Schwerpunkte: APEX (SQL/PLSQL) Front-End (HTML/CSS/JS) Mobile UI/UX

5 Beautify your APEX

Universal Theme ist responsive Deklarativ anpassbar durch

6 Beautify your APEX Motivation APEX 5: Universal Theme Theme 42: Die Lösung aller Probleme Universal Theme ist modern Universal Theme ist responsive Deklarativ anpassbar durch Theme Roller Templates Template Options.wozu dann überhaupt anpassen??

7 Beautify your APEX nicht so universell wie gedacht Anforderungen können sein: Spezielles Corporate Design Benötigte Web-Elemente implementieren Anforderungen vom Management, Fachabteilung etc. APEX im Internet. (Komplett neues Theme designen)

8 Universal Theme Erweitern Vortrag: Kein neues Theme designen customizing UT

9 Werkzeuge

10 Benötigte Werkzeuge CSS JS UX Webentwicklung HTML Design

11 HTML + CSS Verstehen und anwenden HyperText Markup Language Definiert die Struktur Die Bausteine von Webanwendungen Cascading Style Sheets Definiert die Darstellung Wie sollen die Bausteine aussehen Klare Trennung zwischen Struktur und Darstellung!

12 HTML + CSS Verstehen und anwenden HTML: <div class= DOAG >CSS is awesome</div> CSS:.DOAG { width: 400px; height: 400px; text-transform: uppercase; border: 10px # solid; font-family: helvetica; font-weight: bold; font-size: 155px; line-height: 132px; }

13 CSS Der Standardaufbau.DOAG {width: 400px; height: 400px;} selector property value property value

14 CSS Layouting

15 CSS Layouting (Boxen verschachteln)

16 CSS Layouting (Boxen verschachteln)

17 CSS Box Model (Schachtel) Chrome Developer Tools Beispiel: CSS is awesome content width height

18 CSS Boxen ordnen (CSS-Property: display) display: block Beispiel: <div> Erscheint in neuer Zeile Breitet sich auf 100% aus Der Baustein von Webseiten display: inline Beispiel: <span> Erscheint nicht in neuer Zeile Breitet sich nicht auf 100% aus Benutzt für Textformatierung weitere hilfreiche: None, list-item, flex, inline-block

19 CSS Beispiel Layout: APEX Connect 2016 Programm PL/SQL Region liefert HTML-Gerüst HTML-Tags haben Klassen CSS-Selektoren über Klassen ->block (float: left) display: block display: block CSS beinhaltet Anordnung Abstände (Box Model) Textformatierung Farben display: inline-block display: block

20 CSS Property: position Ich bin fixed und behalte meine Position beim scrollen (top: 0; right: 0) static Dafault relative Ich bin default Ich auch Ich bin relative (left: 100px) fixed absolute Ich bin default Ich bin absolute (top: 0; right: 0)

21 Selektoren Einfache Selektoren Einfache Selektoren:.class Alle Elemente mit dem Klassennamen.doag{style} <div class= doag > Element Alle gewünschten Elemente div{style} <div> #id Alle Elemente mit der ID #doag{style} <div id= doag > * Alle Elemente * {style} <body><div><a> Kombinatoren: Nachfahrenselektor Kindselektor Nachbarselektor Geschwisterselektor E F { } E > F { } E + F { } E ~ F { }

22 Selektoren Es gibt viel mehr als nur.class und #id Attributseletkoren [a] Alle Elemente die das Attribut besitzen [a= v ] Alle Elemente mit dem exakten Attribut/Wert [a~= v ] Attribute die eine Zeichenkette enthalten (Durch Leerzeichen getrennt) [a = v ] Attribute die mit einer Zeichenkette anfangen (Durch Bindestrich getrennt) [a^= v ] Attribute die mit einer Zeichenkette anfangen [a$= v ] Attribute die mit einer Zeichenkette enden [a*= v ] Attribute die eine Zeichenfolge beinhalten Gibt noch weitere Seleketoren: Pseudoelemente/Pseudoklassen

23 Warum springt mein Selektor nicht an???!important...letzter Ausweg?

24 Cascading Order Reihenfolge der Regeln * /* A=0, B=0, C=0, D=0, Spezifität */ h1 /* A=0, B=0, C=0, D=1, Spezifität */ ul li /* A=0, B=0, C=0, D=2, Spezifität */ a::after /* A=0, B=0, C=0, D=2, Spezifität */ p:first-child /* A=0, B=0, C=1, D=1, Spezifität */ a:not([href]) /* A=0, B=0, C=1, D=1, Spezifität */ ul.nav [href] /* A=0, B=0, C=2, D=1, Spezifität */ #author /* A=0, B=1, C=0, D=0, Spezifität */ #editor p /* A=0, B=1, C=0, D=1, Spezifität */ style="" /* A=1, B=0, C=0, D=0, Spezifität */

25 Media query Unterschiedliche Ausgabemedien steuern

26 Media query Unterschiedliche Ausgabemedien steuern

27 Media query Unterschiedliche Ausgabemedien steuern only screen and (max-width: 550px) {.class1 { }.class2 { } #id1 >.class1 { } } Abhängig vom Medium: Ein-/Ausblenden von Elementen Schriftgröße anpassen Padding/Margin/Width ändern APEX-Grids manipulieren (Gibt auch ein spezielles Print -media-query)

28 CSS3 Allgemein Zahlreiche neue Features Unterteilt in Module Unterschiedlicher Entwicklungsstand Und Browserunterstützung Candidate Recommendation (CR) Nicht alle brauchen vendor perfixes z.b.: -webkit- -moz- -o- -ms- (Chrome, Safari) (Firefox) (Old versions of Opera) (Internet Explorer)

Round Corners 2D/3D Transforms Animations Text

29 CSS3 New Features Selectors Level 3 Color Module Level 3 Media Queries Web Fonts Gradients Shadows Round Corners 2D/3D Transforms Animations Text (Overflow, Wraping, Word Breaking) Filter calc() Transitions

30 CSS3 Transition Automatische Animation bei CSS-Wertänderung Farbe Größe Position.beispiel { transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; } div { transition: background-color 0.5s ease; background-color: red; } div:hover { background-color: green; }

31 CSS3 Shadow Quelle:

32 CSS3 Border Quelle:

33 CSS3 Gradients Quelle:

34 CSS3 Text-Shadow Quelle:

35 CSS3 Filter Blur Brightness Contrast Grayscale Hue Rotate Ivert Opacity Saturate Sepia Quelle:

36 Erfahrungsbericht

Erfahrungsbericht E-Mails gestalten mit APEX (4.2.

37 Erfahrungsbericht s gestalten mit APEX (4.2.6) APEX Nach Corporate Design s in APEX zusammenstellen Header ändern Texte ändern per WYSIWYG-Editor Bilder hinzufügen Automatische Generierung Continuous integration Off-Topic: -Tempaltes gestalten Code like it s 1999

38 Erfahrungsbericht s gestalten mit APEX

39 Erfahrungsbericht s gestalten mit APEX

40 CSS speichern In APEX Extern auf Webserver Eigene Templates erstellen Page 0 Statische Region <style>css-code</style> Nur auf bestimmten Seiten Theme Roller CSS-Region Shared Objects Inline in HTML <tag style= CSS-CODE > In deklarativen APEX Spalten Inline, oder über Klassen Aus SQL oder PL/SQL heraus Inline, oder über Klassen

41 Best pracstice Lesbarkeit und Wartbarkeit fördern Developer Tools - Developer Tools - Developer Tools Klassen verwenden Content!= Design Tabellen sollten nicht zum Layouting benutzt werden!important meiden Richtige Selektoren verwenden Namenskonventionen einführen CSS-Code Sinnvoll Strukturieren Inline-CSS meiden /* Kommentieren kann man in auch in CSS */ Googeln: css best practices

Alexej Schneider Telefon: +49 2102 30961 0

42 Alexej Schneider Telefon: alexej.schneider@mt-ag.com ROADSHOW VON FORMS NACH APEX Hamburg Düsseldorf Frankfurt München

Ähnliche Dokumente

Responsive Web Design

Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI