72a66ffdee14a0bdbb0110374c24868a.ppt
- Количество слайдов: 54
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
72a66ffdee14a0bdbb0110374c24868a.ppt