ODTUG KScope conference 2013

1. Confessions
of an APEX Design Geek
Christian Rokitta
themes4apex

2. Warning
My personal view on web
design as an APEX
developer!

3. Promise
YOU can do what I do!

4. Confession
I’m not a webdesigner!

5. Topics
• The APEX Template Framework
• Skills
• Tools
• Specifications
• Techniques

6. SQL;
PL/SQL;
APEX Templates
<HTML/>
{CSS}
JavaScript(); Action
PAGE
#Substitution#
Render
Definition
Reference
#Position#
<HTML/>
JavaScript();

7. Skills
HTML CSS

8. Tools

9. Tools
• Browser developing vs testing
• Editor syntax highlighting
UltraEdit, Notepad++, Light Table, …
• Image Editing level of experience
Adobe Photoshop, Gimp, Inktscape, IrfanView, …
• References
w3schools.com, css-tricks.com, codepen.io, hackdesign.org …
• Many others …
dirtymarkup.com, csscompressor.com, kuler.adobe.com, spritepad.wearekiss.com …

10. APEX Developer Addon
http://apex.oracle.com/pls/apex/f?p=APEX_DEVELOPER_ADDON:ABOUT:0

11. Confession
I’m not a Photoshop
wizard!(I use PowerPoint)

12. Specifications
• Corporate Style
(Logo, Font, Colors, Layout)
• HTML template or reference
• Photoshop file
• Mockup

13. Techniques
• Customize existing APEX Theme
• CSS-Patch (style only)
• Extend by Copy-and-Replace
(Structure & Style)
• Creating a Theme from Scratch
• Make sure you have a working static HTML
template before starting in APEX
• Test APEX functionality in every stage of your
project.

16. Get Inspired
http://tympanus.net/codrops/
http://speckyboy.com/
http://www.smashingmagazine.com/
http://themeforest.net/category/site-templates/admin-templates

17. Just Do It

18. JUSTDO what?
• Modify std. theme colors
• Image based
• CSS based
• Modify std. theme structure & colors
• Creating a new Theme from scratch …. not

19. JUSTDO what?
“We are interested in creating a new theme based
on the official APEX Theme 2, changing current
the blue and gray colors to our custom colors.
Our required colors are: blue #2C2D7D and gray
#EEEEEE
Please send us your economic proposal to achieve
this requirement.”

20. Questions, Answers & Discussion
http://rokitta.blogspot.com
@crokitta
christian@rokitta.nl
http://www.themes4apex.com
http://plus.google.com/u/0/102034735771815472470
http://nl.linkedin.com/in/rokit/