Web Creole Stephen Taylor with big thanks to

Web Creole Stephen Taylor with big thanks to Morten Kromberg and Stefano Lanzavecchia Dyalog User Conference 2008 Elsinore, Denmark October 2008 1 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 October 2008 2 Web Creole

CREOLISATION AND THE WEB October 2008 3 Web Creole

Browsers are a key interface October 2008 4 Web Creole

But most web pages are code-heavy October 2008 5 Web Creole

Creolised technology • • October 2008 software stays soft, modifiable code must be readable use minimal technology know it well 6 Web Creole

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 October 2008 7 Web Creole

Creolisation costs us • learning • careful writing 8 Web Creole

Simplifying the problem space (staying out of the mud) October 2008 9 Web Creole

Six mud patches • • • October 2008 ‘slice and dice’ – beware Photoshop Frames Pixel perfection Old browsers Not encoding in UTF-8 Invalid markup 10 Web Creole

Writing lucid web pages • Encode in UTF-8 • Use minimal, valid markup • Abstract the presentation rules October 2008 11 Web Creole

Some UTF-8 editors Windows • Notepad 2 from Flo's Freeware • Ultra. Edit from IDM Mac. OS • Text. Wrangler or BBEdit from Bare Bones Software October 2008 12 Web Creole

HANDLING WEBSPACE October 2008 13 Web Creole

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 October 2008 14 Web Creole

FTP • Use FTP client such as WS_FTP • or Windows Explorer • Drag and drop… October 2008 15 Web Creole

Creole 102: write plain text • Your app can write text files • Browsers can display them • Eg http: //www. hixie. ch/advocacy/xhtml October 2008 16 Web Creole

Good enough? • If this is all you need, stop here • examplesex 101. txt October 2008 17 Web Creole

STRUCTURE CONTENT WITH HTML October 2008 18 Web Creole

Creole 103: HTML Use HTML to add: • Structure (paras, headers) • Images • Links • examplesex 103. htm October 2008 19 Web Creole

Validation is free http: //validator. w 3. org October 2008 20 Web Creole

STYLE WITH CSS October 2008 21 Web Creole

Separate content and style October 2008 22 Web Creole

Cascading Style Sheets • W 3 C on Cascading Style Sheets, http: //www. w 3. 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 October 2008 23 Web Creole

Power of CSS October 2008 24 Web Creole

Same document, new style October 2008 25 Web Creole

And another style… October 2008 26 Web Creole

KISS: keep it sharp & simple October 2008 27 Web Creole

And keep the markup simple examplesapc October 2008 28 Web Creole

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 October 2008 29 Web Creole

Now we’ve simplified the problem space and we’re ready for a creole solution October 2008 30 Web Creole

STATIC SITE FROM A DWS October 2008 31 Web Creole

Creole 201 Generate a static web site • from content organised in a. DWS • in English • (oh, and Japanese too, why not) • pookpook. dws October 2008 32 Web Creole

Simple tag function October 2008 33 Web Creole

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> October 2008 34 Web Creole

Array tag (2) ↑⊃ tag/'html' 'body' 'p' lines <html> <body> <p> The quick brown fox jumps over the lazy dog. </p> </body> </html> October 2008 35 Web Creole

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> October 2008 36 Web Creole

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> October 2008 37 Web Creole

A page fn to write pages October 2008 38 Web Creole

Make. At to write the site October 2008 39 Web Creole

And the site’s written language bar October 2008 40 Web Creole

In two languages October 2008 41 Web Creole

Content organised in. DWS October 2008 42 Web Creole

In Unicode October 2008 43 Web Creole

DYNAMIC SITE FROM A DYALOG SCRIPT October 2008 44 Web Creole

Creole 301 Use the Wild. Server to generate pages on request October 2008 45 Web Creole

Research project • Stripped content of dyalog. com to a folder of text files marked up in HTML • Wrote a Site. Map 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 October 2008 46 Web Creole

Content mapping (1) October 2008 47 Web Creole

Content mapping (2) October 2008 48 Web Creole

Creole content mapping (1) October 2008 49 Web Creole

Creole content mapping (2) October 2008 50 Web Creole

Creole content mapping (3) dyalogdefault. apls contains • site structure • HTML template wildserverWServer 32. dws contains • apls_tools. Site. Map class October 2008 51 Web Creole

SUMMARY October 2008 52 Web Creole

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 Wild. Server for creating pages dynamically October 2008 53 Web Creole

. DWS Dyalog web site October 2008 54 Web Creole