Alexej Schneider DOAG 2016 Kein neues Theme designen Universal Theme Erweitern customizing UT....

Beautify your APEX

Alexej Schneider

DOAG 2016

Im Überblick

Technologie-orientiert

Branchen-unabhängig

Hauptsitz

Ratingen240

Beschäftigte

Gründungsjahr

1994

Niederlassung

Frankfurt am MainAusbildungs-

betrieb

Inhabergeführte

Aktiengesellschaft

Zertifizierter

Partner von

Oracle,

Microsoft

und SAP

Weitere Vorträge am 17.11.

Bachelor Angewandte Informatik

Oracle APEX Berater

Vorher: Webdesign/Webentwicklung

Schwerpunkte:

APEX (SQL/PLSQL)

Front-End (HTML/CSS/JS)

Mobile

UI/UX

Beautify your APEX

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??

Motivation

Beautify your APEX

Anforderungen können sein: Spezielles Corporate Design

Benötigte Web-Elemente implementieren

Anforderungen vom Management, Fachabteilung etc.

APEX im Internet

….

(Komplett neues Theme designen)

…nicht so universell wie gedacht

Beautify your APEX

Vortrag: Kein neues Theme designen

Universal Theme Erweitern

customizing

UT

Werkzeuge

Benötigte Werkzeuge

CSS

HTML

JS

Design

UX Webentwicklung

HyperText Markup Language

Definiert die Struktur

Die Bausteine von Webanwendungen

Cascading Style Sheets

Definiert die Darstellung

Wie sollen die Bausteine aussehen

Verstehen und anwenden

HTML + CSS

Klare Trennung zwischen Struktur und Darstellung!

HTML:

<div class=„DOAG“>CSS is awesome</div>

CSS:

.DOAG {

width: 400px;

height: 400px;

text-transform: uppercase;

border: 10px #000000 solid;

font-family: helvetica;

font-weight: bold;

font-size: 155px;

line-height: 132px;

}

Verstehen und anwenden

HTML + CSS

.DOAG {width: 400px; height: 400px;}

Der Standardaufbau

CSS

property value property valueselector

Layouting

CSS

Layouting (Boxen verschachteln)

CSS

Chrome Developer Tools

Box Model (Schachtel)

CSS

Beispiel: CSS is awesome

width

height

content

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

Boxen ordnen (CSS-Property: display)

CSS

PL/SQL Region liefert HTML-Gerüst

HTML-Tags haben Klassen

CSS-Selektoren über Klassen

CSS beinhaltet

Anordnung

Abstände (Box Model)

Textformatierung

Farben

Layout: APEX Connect 2016 Programm

CSS Beispiel

display: inline-block

display: block

display: block

display: block

->block (float: left)

static

Dafault

relative

fixed

absolute

Property: position

CSS

Ich bin default

Ich auch

Ich bin relative (left: 100px)

Ich bin „fixed“ und behalte meine Position

beim scrollen (top: 0; right: 0)

Ich bin default Ich bin absolute

(top: 0; right: 0)

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 E F {…}

Kindselektor E > F {…}

Nachbarselektor E + F {…}

Geschwisterselektor E ~ F {…}

Einfache Selektoren

Selektoren

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

Es gibt viel mehr als nur .class und #id

Selektoren

Warum springt mein Selektor nicht an???

!important...letzter Ausweg?

* /* A=0, B=0, C=0, D=0, Spezifität 0 0 0 0 */

h1 /* A=0, B=0, C=0, D=1, Spezifität 0 0 0 1 */

ul li /* A=0, B=0, C=0, D=2, Spezifität 0 0 0 2 */

a::after /* A=0, B=0, C=0, D=2, Spezifität 0 0 0 2 */

p:first-child /* A=0, B=0, C=1, D=1, Spezifität 0 0 1 1 */

a:not([href]) /* A=0, B=0, C=1, D=1, Spezifität 0 0 1 1 */

ul.nav [href] /* A=0, B=0, C=2, D=1, Spezifität 0 0 2 1 */

#author /* A=0, B=1, C=0, D=0, Spezifität 0 1 0 0 */

#editor p /* A=0, B=1, C=0, D=1, Spezifität 0 1 0 1 */

style="" /* A=1, B=0, C=0, D=0, Spezifität 1 0 0 0 */

Reihenfolge der Regeln

Cascading Order

Unterschiedliche Ausgabemedien steuern

Media query

Gruppieren:

@media 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)

Unterschiedliche Ausgabemedien steuern

Media query

Zahlreiche neue „Features“

Unterteilt in Module

Unterschiedlicher Entwicklungsstand

Und Browserunterstützung

Candidate Recommendation (CR)

Nicht alle brauchen vendor perfixes

z.B.:

-webkit- (Chrome, Safari)

-moz- (Firefox)

-o- (Old versions of Opera)

-ms- (Internet Explorer)

Allgemein

CSS3

Selectors Level 3

Color Module Level 3

Media Queries

Web Fonts

Gradients

Shadows

Round Corners

New Features

CSS3

2D/3D Transforms

Animations

Text (Overflow, Wraping, Word Breaking)

Filter

calc()

Transitions

…

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; }

Transition

CSS3

Quelle: http://www.cssmatic.com/box-shadow

Shadow

CSS3

Quelle: http://www.cssmatic.com/box-shadow

Border

CSS3

Quelle: http://www.colorzilla.com/gradient-editor/

Gradients

CSS3

Quelle: http://css3gen.com/text-shadow/

Text-Shadow

CSS3

Blur

Brightness

Contrast

Grayscale

Hue Rotate

Ivert

Opacity

Saturate

Sepia

Filter

CSS3

Quelle: http://www.cssreflex.com/css-generators/filter/

„Erfahrungsbericht“

APEX Nach Corporate Design

E-Mails in APEX zusammenstellen

Header ändern

Texte ändern per WYSIWYG-Editor

Bilder hinzufügen

Automatische Generierung

Continuous integration

Off-Topic: E-Mail-Tempaltes gestalten

Code like it‘s 1999

E-Mails gestalten mit APEX (4.2.6)

Erfahrungsbericht

E-Mails gestalten mit APEX

Erfahrungsbericht

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

In APEX

CSS speichern

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“

Lesbarkeit und Wartbarkeit fördern

Best pracstice

Alexej Schneider

Telefon: +49 2102 30961 – 0

[email protected]

ROADSHOW

„VON FORMS NACH APEX“

24.01.2017 Hamburg

25.01.2017 Düsseldorf

26.01.2017 Frankfurt

27.01.2017 München

mailto:[email protected]

Alexej Schneider DOAG 2016 Kein neues Theme designen Universal Theme Erweitern customizing UT....

Documents

Transcript of Alexej Schneider DOAG 2016 Kein neues Theme designen Universal Theme Erweitern customizing UT....