AIM2 - Open Source Accessibility tools.

Sections are already “landmarks”

All content must be contained in a landmark

add :focus on elements

Additional Resource: http://accessibility-bookmarklets.org

AIM5 - Slacking off at Work

  • Team of 2 grew to 12
  • Great form of collaboration
  • Voices of SM and work on entire web presence
  • Great communication tool
  • Brings everything into one place
  • Not a replacement for the PM tool
  • Slack and PM software are linked
  • Reduction of email - could be great for Form Manager
  • Channel - Public
  • Groups - Private
  • Direct Message - between each individual

Develop channel nomenclature

  • product-____ (wordpress/machforms) Issues or related
  • project-____ (updates, management)
  • feed-____(social, hashtags, campaigns) RSS/Social anything posted gets archived here
  • help-____(desk, responses)
  • X-(music, spoiler-zone, sports-center, food) - non-work, informal

You can turn channels on and off

  • Groups
  • Help desk team
  • special projects
  • management team
  • special interests groups

Built in Functions

  • /feed -> subscribe to new RSS or other feeds
  • /remind -> reminders
  • code share/highlighting ->
  • easy drag & drop file sharing ->

Integration

  • incoming web hooks - JSON arrays etc
    • post things to slack from PM tool
  • IFTTT
    • allows to do one integration with a lot of different integrations (twitter/etc)
  • Giphy

Slack Apps

  • Mobile/Desktop/Browser
  • Vanderbilt has been on a free account for 2 years and have been able to integrate everything they need.
  • 85% discount for Higher Education (accredited)
  • Standard: 12/user/year
  • Plus: 27/user/year

10 integrations, but Vandy only uses 5. Archives are limited for 10,000 messages.

UAD7 - Accessibility

  • nomouse.org (no mouse challenge)
  • Try looking at your website without a mouse. Using keyboard only, Doesn’t need an assistive device
  • First thing to do is to look for ARIA landmarks
  • ARIA allows you to provide markup that sets role, stakes and properties of the User Interface elements
  • Low hanging fruit is to set landmark roles
  • Use JAWS as screen reader.
  • DIVS ARE NOT FOCUSABLE - not accessible via tab-index
  • Same with progress indicators (empty lists have no semantics)

Most carousels today are inaccessible

  • Movement can be distracting, stop auto start carousels
  • For previous/next, use a button tag.
  • Use buttons for slide indicators <SR-ONLY>"Go to slide"</SR-ONLY>
  • Add aria-live to each slide. <role="alert"> polite, assertive > importance to announcing an item for the screen reader. Such as when the contents are exposed, announce it now.

Modal Windows:

  • <main content> needs to be marked aria-hidden=“true” when modal is in the foreground. BG is hidden when modal opens
  • <modal mask>
  • <modal content> Cannot be inside of the main content!

Other area features for modal

  • role="dialog" aria-labelledby identified by the Title of the window
  • <button aria-label="close dialog">
  • Use H1 in modal Dialogs, because it’s the only content on the page for the screen reader.

Manage keystrokes

  • When the window opens, place focus on the first focusable element
  • Trap tab key so it cycles through focusable elements in the modal only
  • Escape should close the window

Dropdown Menus

  • role="menubar" for entire menu bar
  • role="menu" for content
  • role="menu for sub menus
  • role="item" for each individual menu
  • aria-expanded="false"
  • aria-popup="true"
  • aria-controls assign that it establishes a relationship with the sub content

MENU is an application menu - providing a function, not a link to another page

Make it a NAV

	<nav role="navigation" aria-label="Main Menu">
    	<ul>
	    	<li>
		    	<a id="item1" aria-haspopup="true" aria-controls="sub1">
			    	<ul id="sub1" aria-expanded="false" aria-hidden="true">
				    	<li><a href="">ITEM</li>
					</ul>
				</a>
			</li>
		</ul>
	</nav>

Action Items:

  • no mouse challenge (nomouse.org)
  • Never stop learning
  • Always ask “is this accessible”
  • Only choose accessible tools and widgets
  • If it’s not, fix it! Contribute to a better world.

#DPA9 - Building better Workflows

  • Alabama Library has 3 dev 4 web librarians
  • Wide range of backgrounds
  • Optimal Dev Flow:
    • Sustainable
    • Automated
    • Configurable
    • Gentle Learning Curve
  • Working on Your own - Manual source management
  • Great on your own. Straight forward
  • Until you start to work on your own
  • Working in a team - Manual source management
  • YOU Open and edit, upload to server
  • TEAM -> didn’t update file, overrides old changes with new changes

The ritual

  • Update from Server > Edit > Double check if file has been updated > Upload
  • Solution: Version Control
    • Sources is a versioned repo
    • Merge or preserve changes
    • Tracks changes
    • Revert or rollback
    • User permissions

Versioning Systems

  • Merge Changes only!
  • Commits YOU made
  • Commits from other dev
  • Merges changes to repo for you
  • Track Changes Easily
  • See EXACTLY what was changed

Distributed Repos

  • Server have team, need to be able to log onto the team
  • Distributed: Each teammate has a local repo to edit
  • Flexible Repo Structure
  • Some have required folders where you put certain items in a repo; can be convoluted
  • Flexible structure that is appropriate for the project (dist/src/etc)

Landed on Git

  • Met our needs:
    • Distributed
    • Common
    • Flexible repo
    • Content VCS - only content stored
    • SUSE Enterprise supported it
  • Branching Models
    • Each clone is a branch. Each clone can have branches in it
    • Complicated branching can seem convoluted and intimidating didn’t want that
  • Simple Model
    • Central origin on the server
    • Distributed Clones (clone server repo - MAIN, default branch)
    • Single Origin
    • Single Branch
    • Distributed clones
      • Origin -> Your branch -> Merge to it
  • Living on the server
    • Git server [git://]
    • Security and authentication
    • user permissions
    • (ugh, I have to learn more stuff)

Github

  • Organization Account
    • Contributors
    • Teams
    • Permissions
    • Admins
  • Many useful features
    • Repo and commit browsing
    • Statistics
    • Wiki
    • Bug reporting
    • much more

What about dependencies

Separate from your repos, but integral to development

  • Manual management in a team
    • Start project, two weeks later someone else is in the project. Clones central repo
    • jQuery is being used, but manually managed. Downloads jQuery and ignored in the repo
  • Bower - Uses nodeJS - Automate Dependency Managemnt

Project Configuration

  • Single command install
  • Specify Versions
  • Use public and private servers
  • Clone the repo and type in bower install. by setting everything up with bower install and the JSON configuration file

Getting Organized

  • Catch All

    • inconvenient
    • search to find feature
    • some features go unnoticed
    • CATCHALL (do not use)
      • index.html
      • scripts.js
      • styles.css
      • utilities.js

  • Modularization

    • Separation of concerns
    • each unique feature is packaged separately in unique folder/file
    • features easier to find
    • Modules (better structure)
      • common
        • carousel
        • filters
        • navbar
      • forms
        • forms.css
        • forms.js
      • menu
        • menu.css
        • menu.js
      • news-feed
        • news-feed.css
        • news-feed.js
    • global.css
    • index.html

How do we put it all together?

  • Grunt - nodeJS Javascript Task Runner
    • Repetetive redundant tasks
  • Concatenate
    • Combines scripts into dist folder
  • Uglify
    • Simplifies your functions
    • makes code harder to read in distributed form
  • Minify
    • Removes whitespace for you
  • Configure Tasks
    • Setup the configuration to run the tasks, points it to the file and give it the options
    • Dev Task concats
    • Live task runs dev tasks and goes further (grunt dev; grunt live)
  • Much Much more
    • Clean
    • Copy
    • Release version
    • Shell commands
    • Auto-prefix
    • Run other NodeJS tools
    • Site builders (documentation)
      • KSS
      • jsDoc
    • Lint
      • HTML
      • JS
      • CSS
    • Compile
      • LESS
      • SASS
      • Coffee
    • Compress
      • HTML
      • JavaScript
      • CSS
      • Images

Deploy

  • Manual Dev to Live flow
    • Manually copy files from dev to live
    • Tempting to just edit live
    • Messier dev gets, the less appealing it is to work from
  • Git Hooks and Live/Dev forks through GitHub
    • Fire on events done to a repo
    • Configure to fire when a repo is updated
    • Easy to update the repo and it updates live, which updates servers
    • Live/Dev repos
      • Machine User owns Live Repo
      • Dev repo forks Live
    • Git Hook Deployment
      • Update github = update server
      • “Gatekeepers” control flow to live
      • Contributors can make “pull request” when ready to go live

Branch Model

Live > Dev > Local Dev (clone)

Git Workflow

Dev Clone > Push to Dev repo (no conflict, updates dev) > Pull request submits to live. Notify gatekeeper to live repo. Wants to pull changes into live. Approved, pulled and merged into live and updates the live server.

No one touches the code on the live servers.

All Together

  • Version source
  • Automated
    • dependency management
    • source tasks/builds
    • deployment

UAD11 - I believe I can see the future: more than the typical Analytics Routine

Focus: Forecasting. Intervention. Analysis. A/B testing.

How much would you pay to do what no one else is doing How much would you GET paid to do what no one else is doing

Success or Failure?

  • Google analytics cannot help you prove anything
  • Tools to prove causation, not correlation
  • What happens when you DO something about your future
  • FREE TOOL
  • Why fiddle around?
    • Forecasting, what to expect if you decided to make some changes
    • Let R decide the best method for forecasting plot(forecast(org.ts,h=12) one year worth of data, based on other data
    • Holt Winters (includes peak/valleys)
  • Take advantage of the data!
    • Can use forecasting to determine the trends, and take it up to uppers
  • Often confined to a state where if we test to see reliability we have to test simultaneously
  • When you make a change, did it actually MAKE a difference?
    • CausalImpact (created by google) to prove that PPC are working effectively
  • An addition on blogging increased traffic (500-800 words, once a week)
  • SEO strategy for SNHU
  1. Tell the story in an optimized way.
    1. Keep everyone’s best interests in mind
    2. Tell the story of your students
  • R Commander (GUI)
  • Landing pages report
    • Sort by bounce rate - most people coming through, but highest bounce rate
      • Best area to start for A/B testing

Responsive Email - Red Stapler Winner

responsiveemailpatterns.com

reallygoodemails.com