Upload
phungkhue
View
215
Download
1
Embed Size (px)
Citation preview
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
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
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
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
ROADSHOW
„VON FORMS NACH APEX“
24.01.2017 Hamburg
25.01.2017 Düsseldorf
26.01.2017 Frankfurt
27.01.2017 München