WebCreole

Download Report

Transcript WebCreole 

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
• Notepad2 from Flo's Freeware
• UltraEdit from IDM
MacOS
• TextWrangler 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
• examples\ex101.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
• examples\ex103.htm
October 2008
19
Web Creole
Validation is free
http://validator.w3.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
• 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
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
examples\apc
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)
• pook\pook.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
MakeAt 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 WildServer 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 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
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)
dyalog\default.apls contains
• site structure
• HTML template
wildserver\WServer32.dws contains
• apls_tools.SiteMap 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 WildServer for creating pages
dynamically
October 2008
53
Web Creole
.DWS
Dyalog web site
October 2008
54
Web Creole