Beautify your APEX Alexej Schneider DOAG 2016
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
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
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??
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)
Universal Theme Erweitern Vortrag: Kein neues Theme designen customizing UT
Werkzeuge
Benötigte Werkzeuge CSS JS UX Webentwicklung HTML Design
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!
HTML + CSS Verstehen und anwenden 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; }
CSS Der Standardaufbau.DOAG {width: 400px; height: 400px;} selector property value property value
CSS Layouting
CSS Layouting (Boxen verschachteln)
CSS Layouting (Boxen verschachteln)
CSS Box Model (Schachtel) Chrome Developer Tools Beispiel: CSS is awesome content width height
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
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
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)
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 { }
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
Warum springt mein Selektor nicht an???!important...letzter Ausweg?
Cascading Order Reihenfolge der Regeln * /* 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 */
Media query Unterschiedliche Ausgabemedien steuern
Media query Unterschiedliche Ausgabemedien steuern
Media query Unterschiedliche Ausgabemedien steuern 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)
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)
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
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; }
CSS3 Shadow Quelle: http://www.cssmatic.com/box-shadow
CSS3 Border Quelle: http://www.cssmatic.com/box-shadow
CSS3 Gradients Quelle: http://www.colorzilla.com/gradient-editor/
CSS3 Text-Shadow Quelle: http://css3gen.com/text-shadow/
CSS3 Filter Blur Brightness Contrast Grayscale Hue Rotate Ivert Opacity Saturate Sepia Quelle: http://www.cssreflex.com/css-generators/filter/
Erfahrungsbericht
Erfahrungsbericht E-Mails gestalten mit APEX (4.2.6) 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
Erfahrungsbericht E-Mails gestalten mit APEX
Erfahrungsbericht E-Mails gestalten mit APEX
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
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 alexej.schneider@mt-ag.com ROADSHOW VON FORMS NACH APEX 24.01.2017 Hamburg 25.01.2017 Düsseldorf 26.01.2017 Frankfurt 27.01.2017 München