RAD for the Web

These RAD for the Web pages offer free downloads of docs and code. RAD for the Web is for web applications from Windows programs on the web to HTML5 apps in web browsers. Get free collaboration on apps development. And bespoke apps complete (for eventual fee) - Contact RAD for the Web.

Samples and Examples - PDF and ZIP file downloads

Aug 2015

Regarding material on this page, enquire for:

For students, teachers, engineers and ego-free programmers.

Web Standards for Mobile Apps

Web standards - HTML5, CSS3, SVG and JavaScript, for mobile users, Web applications development - Browser based apps for desktop and mobile devices.
Have a look at - w3schools.com tutorials - HTML5 , CSS3SVG, JavaScript.
And MDN Web technology for developers - HTML5 , CSS3SVG, JavaScript.

BlueGriffon

This section written for bluegriffon-1.7.2.win32 - available here and in Downloads
BlueGriffon interactive Web Editor utilizes Web standards.

BlueGriffon - Small App - Lotto Numbers (Windows 7)



1. Download lotto.png to local folder and in folder do New > text document (right-click in folder for local
menu) and rename document for this exercise - bgLotto.html.

2. In BlueGriffon (BG) do File > Open File and open bgLotto.html - see blank html page in Wysiwig and Source views.

3. In BG Wysiwig view, Insert > Image - see Insert an Image dialog -- Image location - Select image lotto.png - Tick the box Allow an empty alternate text - Click OK.

4. In BG Wysiwig view, see image of (UK) legacy lottery card - image size is 400 x 180 pixels.



5. In BG Source view, put image within div with id="content".



6. In BG Wysiwig view, click on image and see <body> <div #content> <img> at bottom of screen - Click to select the div #content.



7. BG Panels > Style Properties and drag panels out with divider bar at RH edge of screen. In Style Properties:
a) See heading shows <div id='content'> as container of the image;
b) In Apply styles to - select this element only through its ID;
c) In Font Family - clcik on '+' and select Arial etc. And set Size 1em;
d) In Geometry - set Width 400px and Height 180px (switching to/from Source will get Wysiwig showing the 400px width at top of view, and 180px height at LH side). In Position and Layout - click on Position Relative and in Offsets - temporarily (to clear area of Wysiwig  view) set Top and Left inputs each to, say, 300px.



8.  In BG Source view,  see CSS rules written for the div with ID 'content'.  And CSS rule for the image - 
Add style="z-index: -1" to make elements visible when placed on the image.



9.  In BG Wysiwig view, Insert > HTML5 element > button - Dialog Insert or edit a form input - Enter a Name, like 'btn', set Type to Button and click OK;
Important: Before Insert do select <body> - Click on <body> at bottom of Wysiwig view.



For any inserted element, edit (noID) to give the element an ID (similarly edit (no class) to assign a class). As shown, select by click on <button> at bottom of page, then click on (no ID), type 'btn', press Enter and and see <body><button #btn>. Click on <button #btn>, then Style Properties picks up <button id='btn'> and styles can be applied to the button.

In Source view, caption (Get Nunbers) is typed in, then (not shown here) in Wysiwyg button is resized in proportion to the caption (or can be assigned styles of width and height etc.).

10. In BG Source view:
a) Edit <button id="btn" type="button" >Get Numbers</button>;
b) Place button within the div container;
c) Add CSS rules for #btn.



11. In BG Wysiwig view: See Get Numbers button overlaid on Lotto image. Click on button and see arrows marker (above button) to enable drag of button to position so as to overlay the image button.



12. In BG Wysiwig view: Hold click on button drag marker, move cursor to new positon and release click to re-position. Button selection box has handles for re-sizing - Resize the button - Style Properties for button then has Geomety: Width 140px, Height 22px and Position and Layout: Top 95px, Left 40px (coordinates relative to top LH corner of image) and these CSS rules are written into style of #btn in Source view.



13. In BG Wysiwig view, Insert > HTML5 element > input - Dialog Insert or edit a form input - select 'A text input field' - give it a name like 'txt'. In the dialog tick The element is read-only.
Important: Before Insert do select <body> - Click on <body> at bottom of Wysiwig view.
Observed fault in display of A text input field dialog - In Windows, need to right-click dialog title bar,  select size from local menu then down-arrow key to extend dialog to full height (with OK and Cancel buttons showing).




14.  In BG Source view, put input type text inside the div container and write CSS rules for #txt so as to mask the numbers shown in the Lotto image.



15. In BG Wysiwig view, to call Javascript function, DOM Explorer onclick event for button can be added - In DOM Explorer, click '+' button, type Name (onclick), tab to next column and type Value (GetNumbers()) then press Enter.



16. In BG Wysiwig view, Panels > Script Inspector - Click '+' button, select Add Embedded Script - Get Script Editor, type or paste (Ctrl-V) Javascript to be inserted at head of the html file, click Commit changes button.



17. In BG Source view, call to GetNumbers() Javascript funtion is made at end to always open the app with set of six numbers (random 1 to 49, no repeats, ascending order).  Preview in browser - click on the blue globe at top right - Try it.

BG Editor Text Size



In Source and Script editors, default font size increased - Menu Tools > Preferences - Configuration Editor button -  about config dialog - font.size.fixed.x-western was 13, set to 16 - font size takes effect when BG re-started.