1 / 54

Web Creole

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

teresarogers
Télécharger la présentation

Web Creole

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Creole Stephen Taylor with big thanks to Morten Kromberg and Stefano Lanzavecchia Dyalog User Conference 2008 Elsinore, Denmark Web Creole

  2. 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 Web Creole

  3. Creolisation and the Web Web Creole

  4. Browsers are a key interface Web Creole

  5. But most web pages are code-heavy Web Creole

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

  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 Creole

  8. Creolisation costs us • learning • careful writing Web Creole

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

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

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

  12. Some UTF-8 editors Windows • Notepad • Notepad2 from Flo's Freeware • UltraEdit from IDM MacOS • TextWrangler or BBEdit from Bare Bones Software Web Creole

  13. Handling webspace Web Creole

  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 Creole

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

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

  17. Good enough? • If this is all you need, stop here • examples\ex101.txt Web Creole

  18. Structure content with HTML Web Creole

  19. Creole 103: HTML Use HTML to add: • Structure (paras, headers) • Images • Links • examples\ex103.htm Web Creole

  20. Validation is free http://validator.w3.org Web Creole

  21. Style with CSS Web Creole

  22. Separate content and style Web Creole

  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 Creole

  24. Power of CSS Web Creole

  25. Same document, new style Web Creole

  26. And another style… Web Creole

  27. KISS: keep it sharp & simple Web Creole

  28. And keep the markup simple examples\apc Web Creole

  29. Where to rule on style • In the CSS stylesheet for rules used across multiple pages • In the STYLEelement for rules used only on one page • In the styleattribute for rules used on only one element Web Creole

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

  31. Static site from a DWS Web Creole

  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 Creole

  33. Simple tag function Web Creole

  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 Creole

  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 Creole

  36. 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> Web Creole

  37. 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> Web Creole

  38. A page fn to write pages Web Creole

  39. MakeAt to write the site Web Creole

  40. And the site’s written language bar Web Creole

  41. In two languages Web Creole

  42. Content organised in .DWS Web Creole

  43. In Unicode Web Creole

  44. Dynamic site from a Dyalog script Web Creole

  45. Creole 301 Use the WildServer to generate pages on request Web Creole

  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 Creole

  47. Content mapping (1) Web Creole

  48. Content mapping (2) Web Creole

  49. Creole content mapping (1) Web Creole

  50. Creole content mapping (2) Web Creole

More Related