Web Creole

October 2008 Web Creole1

Stephen Taylor

with big thanks to

Morten Kromberg and Stefano Lanzavecchia

Dyalog User Conference 2008

Elsinore, Denmark

Web Creole

Agenda

• Creolisation and the Web

• Handling webspace: FTP, IIS, Apache

• Structure content with HTML

• Style with CSS

• Static site from a DWS

• Dynamic site from a Dyalog script


CREOLISATION AND THE WEB


4

Browsers are a key interface

Web CreoleOctober 2008

5

But most web pages are code-heavy


6

Creolised technology

• software stays soft, modifiable

• code must be readable

• use minimal technology

• know it well


7

Creole methods buy us

• fast, readable web pages

• good relationships with search engines

• simple generation of such pages from APL

• lightly adding a web to an application


8

Creolisation costs us

• learning

• careful writing

Web Creole

9

Simplifying the problem space

(staying out of the mud)


10

Six mud patches

• ‘slice and dice’ – beware Photoshop

• Frames

• Pixel perfection

• Old browsers

• Not encoding in UTF-8

• Invalid markup


11

Writing lucid web pages

• Encode in UTF-8

• Use minimal, valid markup

• Abstract the presentation rules


12

Some UTF-8 editors

Windows • Notepad• Notepad2 from Flo's Freeware• UltraEdit from IDMMacOS• TextWrangler or BBEdit from Bare Bones

Software


HANDLING WEBSPACE


14

Creole 101: do nothing

• Copy your existing output to the webspace

• For common file types (eg .doc, .pdf, .xls)

• Server will serve it

• Browser will display it

• Duh


FTP

• Use FTP client such as WS_FTP

• or Windows Explorer

• Drag and drop…


16

Creole 102: write plain text

• Your app can write text files

• Browsers can display them• Eg http://www.hixie.ch/advocacy/xhtml


17

Good enough?

• If this is all you need, stop here

• examples\ex101.txt


STRUCTURE CONTENT WITH HTML


19

Creole 103: HTML

Use HTML to add:• Structure (paras,

headers)• Images• Links• examples\ex103.htm


Validation is free


http://validator.w3.org

STYLE WITH CSS


22

Separate content and style


23

Cascading Style Sheets

• W3C on Cascading Style Sheets, http://www.w3.org/Style/CSS/

• CSS Zen Garden, http://www.csszengarden.com/

• A List Apart, http://www.alistapart.com/

• Various books, eg The Zen of CSS Design


24

Power of CSS


25

Same document, new style


26

And another style…


27

KISS: keep it sharp & simple


28

And keep the markup simple


examples\apc

Where to rule on style

• In the CSS stylesheet for rules used across multiple pages

• In the STYLE element for rules used only on one page

• In the style attribute for rules used on only one element


30

Now we’ve simplified the problem space

and we’re ready for a creole solution


STATIC SITE FROM A DWS


32

Creole 201

Generate a static web site

• from content organised in a .DWS

• in English

• (oh, and Japanese too, why not)• pook\pook.dws


33

Simple tag function


34

Array tag (1) lines←'The quick brown fox' 'jumps over the lazy dog.' 'p'tag⊃lines<p>The quick brown fox</p> ↑'p'tag¨lines<p>The quick brown fox</p> <p>jumps over the lazy dog.</p>

↑'body'tag'p'tag¨lines<body> <p>The quick brown fox</p> <p>jumps over the lazy dog.</p></body>


35

Array tag (2)

↑⊃tag/'html' 'body' 'p' lines<html> <body> <p> The quick brown fox jumps over the lazy dog. </p> </body> </html>


Array tag (3) +tbl←↑('cat' 'mammal')('gecko' 'reptile')('dog' 'mammal') cat mammal gecko reptile dog mammal

'td'∘tag¨tbl <td>cat</td> <td>mammal</td> <td>gecko</td> <td>reptile</td> <td>dog</td> <td>mammal</td>

↑bdy←'tr'∘tag¨,/'td'∘tag¨tbl<tr><td>cat</td><td>mammal</td></tr> <tr><td>gecko</td><td>reptile</td></tr><tr><td>dog</td><td>mammal</td></tr>


Array tag (4) ↑⊃tag/'table' 'tbody' bdy<table> <tbody> <tr><td>cat</td><td>mammal</td></tr> <tr><td>gecko</td><td>reptile</td></tr> <tr><td>dog</td><td>mammal</td></tr> </tbody> </table> ↑⊃tag/'table' 'tbody',⊂'tr'∘tag¨,/'td'∘tag¨tbl<table> <tbody> <tr><td>cat</td><td>mammal</td></tr> <tr><td>gecko</td><td>reptile</td></tr> <tr><td>dog</td><td>mammal</td></tr> </tbody> </table>


38

A page fn to write pages


39

MakeAt to write the site


40

And the site’s written

language bar


41

In two languages


42

Content organised in .DWS


43

In Unicode


DYNAMIC SITE FROM A DYALOG SCRIPT


45

Creole 301

Use the WildServer to generate pages on request


46

Research project

• Stripped content of dyalog.com to a folder of text files marked up in HTML

• Wrote a SiteMap object to relate files to sections, pages and page positions

• Site’s content map now describable in 11 lines of code

• And served from a single .apls file


Content mapping (1)


48

Content mapping (2)


Creole content mapping (1)


50




dyalog\default.apls contains

• site structure

• HTML template

wildserver\WServer32.dws contains

• apls_tools.SiteMap class


SUMMARY


53

Creole web development

• Simplify the problem space using CSS and light, structural markup

• Cling to your validator

• Use Dyalog to write static pages from the workspace (Unicode!)

• Explore the WildServer for creating pages dynamically


October 2008 54

.DWS

Dyalog web site

Web Creole

Documents

Web Creole