View
57
Download
0
Category
Tags:
Preview:
DESCRIPTION
Web Creole. Stephen Taylor with big thanks to Morten Kromberg and Stefano Lanzavecchia Dyalog User Conference 2008 Elsinore, Denmark. Agenda. Creolisation and the Web Handling webspace: FTP, IIS, Apache Structure content with HTML Style with CSS Static site from a DWS - PowerPoint PPT Presentation
Citation preview
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
October 2008 Web Creole2
CREOLISATION AND THE WEB
October 2008 Web Creole3
4
Browsers are a key interface
Web CreoleOctober 2008
5
But most web pages are code-heavy
Web CreoleOctober 2008
6
Creolised technology
• software stays soft, modifiable
• code must be readable
• use minimal technology
• know it well
Web CreoleOctober 2008
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
Web CreoleOctober 2008
8
Creolisation costs us
• learning
• careful writing
Web Creole
9
Simplifying the problem space
(staying out of the mud)
Web CreoleOctober 2008
10
Six mud patches
• ‘slice and dice’ – beware Photoshop
• Frames
• Pixel perfection
• Old browsers
• Not encoding in UTF-8
• Invalid markup
Web CreoleOctober 2008
11
Writing lucid web pages
• Encode in UTF-8
• Use minimal, valid markup
• Abstract the presentation rules
Web CreoleOctober 2008
12
Some UTF-8 editors
Windows • Notepad• Notepad2 from Flo's Freeware• UltraEdit from IDMMacOS• TextWrangler or BBEdit from Bare Bones
Software
Web CreoleOctober 2008
HANDLING WEBSPACE
October 2008 Web Creole13
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
Web CreoleOctober 2008
FTP
• Use FTP client such as WS_FTP
• or Windows Explorer
• Drag and drop…
October 2008 Web Creole15
16
Creole 102: write plain text
• Your app can write text files
• Browsers can display them• Eg http://www.hixie.ch/advocacy/xhtml
Web CreoleOctober 2008
17
Good enough?
• If this is all you need, stop here
• examples\ex101.txt
Web CreoleOctober 2008
STRUCTURE CONTENT WITH HTML
October 2008 Web Creole18
19
Creole 103: HTML
Use HTML to add:• Structure (paras,
headers)• Images• Links• examples\ex103.htm
Web CreoleOctober 2008
Validation is free
October 2008 Web Creole20
http://validator.w3.org
STYLE WITH CSS
October 2008 Web Creole21
22
Separate content and style
Web CreoleOctober 2008
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
Web CreoleOctober 2008
24
Power of CSS
Web CreoleOctober 2008
25
Same document, new style
Web CreoleOctober 2008
26
And another style…
Web CreoleOctober 2008
27
KISS: keep it sharp & simple
Web CreoleOctober 2008
28
And keep the markup simple
Web CreoleOctober 2008
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
October 2008 Web Creole29
30
Now we’ve simplified the problem space
and we’re ready for a creole solution
Web CreoleOctober 2008
STATIC SITE FROM A DWS
October 2008 Web Creole31
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
Web CreoleOctober 2008
33
Simple tag function
Web CreoleOctober 2008
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>
Web CreoleOctober 2008
35
Array tag (2)
↑⊃tag/'html' 'body' 'p' lines<html> <body> <p> The quick brown fox jumps over the lazy dog. </p> </body> </html>
Web CreoleOctober 2008
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 Web Creole36
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 Web Creole37
38
A page fn to write pages
Web CreoleOctober 2008
39
MakeAt to write the site
Web CreoleOctober 2008
40
And the site’s written
language bar
Web CreoleOctober 2008
41
In two languages
Web CreoleOctober 2008
42
Content organised in .DWS
Web CreoleOctober 2008
43
In Unicode
Web CreoleOctober 2008
DYNAMIC SITE FROM A DYALOG SCRIPT
October 2008 Web Creole44
45
Creole 301
Use the WildServer to generate pages on request
Web CreoleOctober 2008
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
Web CreoleOctober 2008
Content mapping (1)
October 2008 Web Creole47
48
Content mapping (2)
Web CreoleOctober 2008
Creole content mapping (1)
October 2008 Web Creole49
50
Creole content mapping (2)
Web CreoleOctober 2008
Creole content mapping (3)
dyalog\default.apls contains
• site structure
• HTML template
wildserver\WServer32.dws contains
• apls_tools.SiteMap class
October 2008 Web Creole51
SUMMARY
October 2008 Web Creole52
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
Web CreoleOctober 2008
October 2008 54
.DWS
Dyalog web site
Web Creole
Recommended