Sandy Logan Web Development

Web

The Modern Web

Device Agnostic
User centric
Optimised

Elements

HTML - data
CSS - presentation
JavaScript - functionality

APEX

Themes

100% Customisable
Boilerplate
https://github.com/vincentmorneau/apex-theme-boilerplate/blob/master/f14963.sql

Templates

Create relevant HTML as reusable regions: <div>, <article>, <section> etc.
Set CSS classes for regions and items in Page Designer.

Dynamic Classes

Substitution Strings
<body class="#APP_PAGE_ALIAS#">
Generate from Reports
decode(1,'high',2,'medium',3,'low') cssclass;
From Page Items

Friendly URLs

http://www.mysite.com/places/castle/123
Human readable, good for SEO.
Persistent throughout underlying changes.
Planning + Server rewrites + regular expressions.
Benefit from consistent app/page/item aliases.
http://www.mysite.com/pls/apex/f?p=places:castle:0::::castleref:123

APEX Reports

Classic Report.
HTML Markup Editor.
Multiple Column substitution strings and HTML.

SVGs

Scalable Vector Graphics.
Like icons, maintain crispness at high resolution.
Lots of SVG sets available.
https://css-tricks.com/using-svg

Code

<img src="camera-retro.svg" alt="Retro Camera">
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M928 832q0-14-9-23t-23-9q-66 0-113 47t-47 113q0 14 9 23t23 9 23-9 9-23q0-40 28-68t68-28q14 0 23-9t9-23zm224 130q0 106-75 181t-181 75-181-75-75-181 75-181 181-75 181 75 75 181zm-1024 574h1536v-128h-1536v128zm1152-574q0-159-112.5-271.5t-271.5-112.5-271.5 112.5-112.5 271.5 112.5 271.5 271.5 112.5 271.5-112.5 112.5-271.5zm-1024-642h384v-128h-384v128zm-128 192h1536v-256h-828l-64 128h-644v128zm1664-256v1280q0 53-37.5 90.5t-90.5 37.5h-1536q-53 0-90.5-37.5t-37.5-90.5v-1280q0-53 37.5-90.5t90.5-37.5h1536q53 0 90.5 37.5t37.5 90.5z” class="camera"/></svg>

SVG Procedure

Or, create procedure/function to render:
procedure drawsvg(p_image, p_class) as  l_path varchar2; begin case p_image when 'camera' then l_path:=[path for camera];   'tree' then l_path:=[path for tree];  'rocket' then l_path:=[path for rocket]; end case; htp.p('<svg class="p_class" path="l_path"></svg>'); end;
drawsvg('camera','cheap');
CSS rules determine size/colour of rendered icon.
No calls to the server for files, all icons managed and served from procedure.

Using in Reports

Integrate with reports and business logic.
select make, model case when  cost>5000 then drawsvg('camera','high')  cost>1000 then drawsvg('camera','medium')  else drawsvg('camera','low')  end as icon  from cameras;

Responsive Images

Concept: page serves different sized images depending on the device/browser.
Mobiles: small, fast to load.
Desktop: large, high definition.

HTML

Basic image
<img src="castle.jpg" alt="Castle" />
Responsive
<img srcset="castle_small.jpg 800w, castle_medium.jpg 1200w, castle_large.jpg 1600w" src="castle.jpg" alt="Castle" />

1) Uploading

i) APEX Form w/ File Browse. - automatically get filename, MIME types. - User provides Alternative Text, Photographer etc.
ii) PL/SQL procedure + Oracle interMedia to create multiple copies (small, medium, large).
ORDSYS.ORDImage.process(myimage, 'maxScale=1600 800');
Storage: database, BFile, external.

2) Image via URL

Image src via APEX URL
PL/SQL... Application Process or REST service ^*.
begin  select * from images where img_id=p_image;  — Set header, MIME type, filename, requested size.    sys.wpg_docload.download_file( img_blob );  end;
* http://joelkallman.blogspot.co.uk/2014/03/yet-another-post-how-to-link-to.html
Prefix image ID with image size (s/m/l) request.

Putting it Together

Generate srcset though multiple GETIMAGE calls...
<img  srcset="f?p=...GETIMAGE:::P_IMAGE:s123 800w,  f?p=...GETIMAGE:::P_IMAGE:m123 1200w,  f?p=...GETIMAGE:::P_IMAGE:l123 1600w" src="castle.jpg" alt="Castle" />

Other Uses

EXIF data - photographer, copyright, X/Y.
Watermark.
Retain original - recrunch images and redefine image sizes in procedure.
Art Direction - crop and zoom images to better fit the layout based on portrait, landscape and page layout.

Basic

Page Item: p_search.
Classic report...
select * from employees where lower(employee_name) like '%:p_search%';

Oracle Text

Complex searches:
Any Words - Castle Turrets Drawbridge 
All Words - "Scottish Castle"
Exclude Words - Castle -moat
Fuzzy - spelled, or even sound different.
Thematic - matches around the given theme.
Results are scored, search engine-like and can be tailored to your data.

Database

CATTEXT - search small text. Index sets, structured queries.
SELECT FROM castles WHERE CATSEARCH(title, 'turret', 'order by title desc')> 0;
CONTEXT - search CLOBs, inside documents (PDFs). Text indexes, refresh strategy.
SELECT SCORE(1), title from castles WHERE CONTAINS(title, 'drawbridge', 1) > 0;

APEX

Use APEX items to capture input.
Validate/sanitise and pass to classic report based on text query.

Web Maps

Map solutions: Oracle Maps, OpenLayers, MapBox, ArcGIS API.
Store data in Oracle Spatial...
...render via spatial queries in APEX reports and JavaScript API.

Leaflet.js

Light footprint (~33kb JavaScript).
No dependencies.
Mobile friendly - pinch-zoom, hardware acceleration etc.
Tile/Vector layer support.
Modular - expand with just the features you need.

Adding leafet.js to APEX

Libraries:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
HTML:
<div id="map"></div>
CSS:
<style>#map { height: 200px; }</style>
JS:
Tiles -L.tileLayer('...').addTo(mymap); Extent - var mymap = L.map('mapid').setView([55.859, -4.26], 13);

JavaScript Report

Use spatial to query database.
Render point: var marker = L.marker([51.5, -0.09]).addTo(mymap);
Classic report to render results as custom/invisible JavaScript template.
Header - <script>
Column Template - L.marker([#X#, #Y#]).addTo(mymap);
Footer - </script>
Report can use APEX framework, including Dynamic Actions.

Queries

Any that can be liked to spatial records.
Search by text.
Search by spatial (e.g. nearby, within polygon).
Convert spatial references (e.g. BNG).
Use HTML inputs to control (e.g. range sliders).
Use SVGs for icons (and style based on DB parameters).

Optimise

Utilities > Advisor.
Check that referenced elements (items etc.) exist.
Valid SQL, PL/SQL.
Security - inconsistent authorisation themes, SQL injection.
QA- hard-coded IDs, default sort order, deprecated features.

Analytics

Basic - add to page template.
Devices/Browsers.
User journeys.
Events.
Site Search.

Conclusion

The modern web moves very fast.
Keep up to date with standards and developments via web, social.
Regularly implement small features in everyday APEX development.
Learn HTML/CSS/JavaScript on the way!