Automating Google Workspace (GWS) & more with Apps Script
Â
Buildling Better Webs
1. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Better Webs Building Better Webs and Web Applications OrganicallyDavid Eldridge
2. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Introduction Shawnee County Webmaster Support ASP.NET developers for specialized apps. Maintain www.snco.us with HTML, CSS, JavaScript and legacy ASP A Federal Webmaster (KSARNG/OSS) Began learning standards/accessibility Fed: Standards or Die! Good beginning I always use them
3. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Overview Introduction Accessibility SEO, Semantics, Separation and Standards Performance Considerations Return on Investment (ROI) Questions and Housekeeping
4. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Inseparability SEO, semantics, access/accessibility, etc. are like yarn on a sweater: Carefully interwoven Indiscernibly disparate Separating these topics can be difficultDonât do it: they work together well
5. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Accessibility:Some Assumptions Bad Word. Very Expensive. Low ROI.
6. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Access:Not Just Accessibility What itâs not Protection(against those with disabilities) What it is UA-appropriate Flexible Free Like speech Like beer
7. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Access:for People Screen Paper Screen readers Mobile/handheld/phone/PDA Non-standard devices DOMâetc.
8. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Access:for Machines Educational/Industrial Data mining Search Engines [Spam bots, too: sorry ï] DOMâetc.
9. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Access:Document Object Model Ad hoc API Three simple examples: Web ClipsâSafari 3+ Web SlicesâIE8 (product site) Requires some addâl coding âFireClipsââFF3 (video|add-on) Other capabilities available and coming
10. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Access:DOMâExtensibility It can be traversed, styled, destroyed, created, and appended to dynamically JavaScript Style: CSS/XSLT Server-side code: PHP and Ruby (on Rails) among others support this In the future in Visual Studio?Donât be surprised, but donât hold your breath.
11. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Access:User Interface Offer users early access to the whole page: e.g. âGo directly to content, or navigation.â Hide it from screen and print devices, etc. Offer it to mobile, non-standard devices, etc. JavaScript is not everywhere. Consider your audience.
12. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SEO, Semantics and Standards Standards are BAD! Err� Help dumb people (like designers) to excel Avoid Hard Knocks University Level the playing field
13. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SEO, Semantics and StandardsContinued W3C, WHATWG, Ecma Intâl, WaSP, etc. Recognize trends Codify standards Educate and Inform Educators (mostly WaSP) Empower developers Guide browser makersâŠ
14. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SEO, Semantics and StandardsBrowser Changes FF, Safari implementing Canvas and SVG IE8, FF, Safari implementing <audio> and <video> elements (good and bad): IE8/MS: MS formats ï Safari/Apple: QuickTime formats ï Firefox/Mozilla: Ogg formats ï
15. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SEO, Semantics and StandardsStandards âDecoupleâ Documents Encourage document-level separation of Markup/Content ([X]HTML) Style (CSS/XSLT) Behavior (JavaScript)
16. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SEO, Semantics and Standards Standards save work <video>/<audio> v. non-standard <embed> border-radius v. rounded corner JS/CSS/HTML mess :hover v. old bloated hover image effect CSS font declarations v. non-semantic <font> tag
17. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SEO, Semantics and Standards Standards add previously unrealized functionality Microsoftâs XHR (XML HTTP Request):Now Ajax (or AJAX if you insist) Microsoftâs JPEG XR (HD Photo, previously Windows Media Photo): Better compression for even larger image files, both lossy and lossless
18. Organic SEOHow Standards and SEO Relate Semantic tagging informs content Good: head>title, h1, span.phone-number Poor: font, small, big, b, i, blink Metadata fills in the gaps with keywords, authorship, date and other information Dublin Core metadata is a good framework Shawnee County's logo is protected by law. All other presentation content is in the public domain.
19. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Organic SEOContinued Consider: <title>Banking Security âą BankTwo</title>âŠ<h1>Security Procedures</h1> Or: <title>BankTwo</title>âŠ<span style="font-size:16px;color:#333333;font-family:georgia;display:block;">Security</span>
20. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SemanticsInforming Data Framework for categorization and the DOM: h1-h6, dl, dt, dd, ol, ul, li, dfn, abbr, p, address Classes (and IDs) further augment good semantics abbr.acronym, ol.contents, span.phone-work-voice, span.name-last, ul.ingredients, ol.instructions, div#content, div#footer-legal
21. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SemanticsInforming Data Semantics help us and machines cull data: Widgets: clips, slices etc. Microformatslike hCard, hCalendar, hAtom and hReview Google now uses RDFa/hReview and hCard You donât need to pioneer these technologies Google took years to jump on microformats Firefox didnât get over20% market in a day But folks are using these now All 3 big browsers use Web Slices/Clips
22. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Brass Tacks:Get out of Line: Use the DOM Standards make using JavaScript, DOM scripting and Ajax easier and better It eases maintenance Less inline code It keeps code legible⊠Again, less incline code
23. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Brass Tacks:Get out of Line: Use the DOM It extends easily Classes, IDâs and the DOM make good hooks for JS and style At best, they require a script tag More often they will also need more classes, ids and/or elements. It fails well Users donât miss it when itâs gone(Everything still works)
24. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Brass Tacks:JavaScript and Accessibility Some users and UAs donât see JavaScript fire: Screen readers Audibly indicating DOM-scripting and Ajax changes through screen readers is a booger. Some UAs neglect it; others handle it poorly. Those behind corporate firewalls Some mobile UAs Others with JS disabled (purposefully or not)
25. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SemanticsCost and Value Building sloppy code is cheap Maintaining it isnât: I know. Inline style (and event handlers) create larger files, and make clean-up tedious Semantics offer ad hoc documentation
26. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SemanticsWhy Not? Learning curve? Yes. Code Bloat? NoâŠConsider another simple example.
27. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SemanticsWhy Not? HTML3 and earlier <table style="color:#555;background-color:#eee;border:1px #333;vertical-align:bottom; "âŠ>âŠ<tr><td style="text-align:right;font-family:consolas,'andalemono',mono;">785.555.1212</td></tr></table>
28. Shawnee County's logo is protected by law. All other presentation content is in the public domain. SemanticsWhy Not? HTML4, HTML5, XTHML <table class="phone-chart"âŠ>âŠ<tr><td class="phone-work-fax">785.555.1212</td></tr></table>
29. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Brass Tacks Some practical implementation examples and ideas.
30. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Brass Tacks:Donât use XHTML The popular XHTML implementation is incomplete/incorrect. Itâs incorrect to send it as "text/html", It should be "application/xhtml+xml" Itâs treated by most browsers as tag soup Have you ever seen xhtml fail like an XML feed would? IE6-8 downloads well-formed XHTML like a binary Consider Ian Hicksonâs warning, against the improper implementation of XHTML.
32. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Brass Tacks:Character Encoding Unless you have particular needs use UTF-8 <!DOCTYPE HTMLâŠ><html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Hello, World</title>
33. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Brass Tacks:JavaScript Bottlenecks HTTP/1.1 allows multiple persistent connections. Modern browsers load multiple resources (text, image, audio, etc.) at once: Without manipulation, UAs donât allow over two scripts to pull in at once. When able, load scripts last (i.e. before </body>), or use the onload event handler (or similar device) to build your script request dynamically at full load.
34. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Brass Tacks:CSS Bottlenecks Make CSS external (usu. automatic in VS) But if not, avoid using the @import command in <style> tags, as it causes problems with concurrent downloading in some browsers Place it as soon after the title as possible: <!doctypeâŠ>âŠ<title>I am a title</title><link rel="stylesheet"/>
35. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Brass Tacks:More JS Considerations Be aware of VS controls that generate non-standard mark-up: e.g. ListBox, DropDownList, AdRotator and more. As our DBA always reminds us, never trust the client (device).
36. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Brass Tacks:More JS Considerations The JS pseudo-protocol is not a protocol⊠If you use it or inline event handlers with href="#", the event will not fire in some cases, leaving users bewildered.
37. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Conclusion:ROI Ease of extension Value of data: contentis more informed Natural/Accidental/Organic SEO Faster page loads/decreased server load Greater user access/cullability
38. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Conclusion:Last Things I wonât be there to blame when your app fails And, theyâll laugh at you for listening to a designer Standards are usually optimal: but not always Standards change: so donât follow blindly If they donât help now, they may help later Make your boss happy: the food will follow
39. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Questions? No? Good.
40. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Questions?
41. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Resources and Tools Firefox: mozilla.com/firefox Firebug: getfirebug.com Developerâs Toolbar: tr.im/ffwdtb Think Firefox Web Developerâs Toolbar (ffwdtb) Yslow for Firebug: tr.im/yslow Get IE8! Itâs out: tr.im/getie8 More available at www.snco.us/?dev
42. Shawnee County's logo is protected by law. All other presentation content is in the public domain. Contact Please send any more questions todavid.eldridge@snco.us785.233.8200x4497tr.im/rgum For this presentation and more visitdev.goodbooksfree.comItâs sparse nowâŠthere should be more later.