MedTouchUI Developer Training

Takeaways

• CMSes
• Sitecore UI Process
• Sitecore Overview & Modules
• Sitecore HTML Patterns & Best Practices
• UI Libraries & Polyfills
• Running Sitecore Locally
• UI Plans & How You Can Help:
  • CodePen Team Account
    • Bootstrap
    • Accessibility & 508
    • Grunt & SCSS (Sassy CSS)
    • jQuery → jQuery & Handlebars → AngularJS
    • Organizing base/product Javascript into a single global variable (e.g. $MedTouch)
  • Streamlining Experience Editor use for Sitecore 8.0 and above
• Miscellaneous Tools & Tips

Going to introduce what people will learn at the end of this training, plus mention what will be covered externally (e.g. Adam's VCS training)

Legacy CMSes

ContentBridge

• Expiring soon
• Broken up into .ADP files
  • Make backups, record changes in Workfront deploy notes
• Login via /register or /admin to edit fragments
• Example: Exeter Hospital

Other CMSes

• Occasionally we make service fixes or requests for other CMSes, such as WordPress
• WordPress Example: Hallmark Health (HHMA)

Sitecore

Running Sitecore Locally

Tools

Mention Visual Studio, share drive, etc.

Running Sitecore Locally

Setup Steps

Need to look into Clark's script. Also point to setup guide.

The Sitecore UI Process

• Team Structure
• Base/Product
• Modules
• Branches
• Common problems & how to solve them
• Adding new files and folders
• Deploying files to dev
• Updating deploy notes

Need to introduce the concept of modules at MedTouch

Frequent Code and Polyfills

Introducing BrowserLayout.aspx

• Modernizr
• IE Conditionals (found within BrowserLayout.aspx)
  • IE8 and Previous: .lt-ie9
  • IE7 and Previous: .lt-ie8
• jQuery 1.9.1 — nothing above for Sitecore 7.2!
• jQuery UI 1.10.4 — nothing above for Sitecore 7.2!
• GitHub Repo: Responsive Tabs to Accordion
  • EEHealth Example
• Legacy plugins.js
• Handlebars for newer sites

Need to check if this is true for 8.0!

Sitecore and IDs

This bears mentioning because it is a common point of confusion for new UI developers, especially coming from other CMS environments.

Sitecore Modules

• Find a Doctor
• ...

Need to add more

Sitecore: Common Classes in HTML

• Legacy Classes:
  • .left-nav
  • .its
  • .prox
  • .callout
• Module prefixes:
  • .module-pd-[...]
  • .module-lc-[...]
• ASCX includes

Introduce terminology for parts of a Sitecore site here (proximity nav, secondary nav, etc.)

Sitecore Under the Hood

• BrowserLayout
• Templates & Layout Frames
• Sublayouts
• Skinning

Grunt & SASS

Minifying & bundling — walk through setup here, plus folder structure. Checking Mohammad's wiki page, plus Jeremy's.

CodePen

Need to work on organized MT CodePen repo. Also mention JSONP on another server. Also need to talk about talk allotted. Will talk to Alex about physicians JSON. Will have links to reusable code.

Testing

• BrowserStack
• Chrome extensions
• Physical devices at MedTouch
• Resources and using the wiki (Confluence)

How can you help?

Sitecore UI Plans

CodePen

• Formatting base/product with jQuery & Handlebars
• Brainstorming transition to AngularJS or a similar framework and eliminating jQuery, while maintaining accessibility

Accessibility & Section 508 Compliance Organizing base/product Javascript into a single global variable ($MedTouch) Streamlining Experience Editor use for newer sites (Sitecore 8.0 and above)

Miscellaneous

• Time-tracking Tips
• Shared Credentials

Questions?