Web Professionals

Carolina's Community of Digital Creators and Communicators

Category: Developers Exchange (Page 1 of 5)

Accessibility & the Digital Accessibility Office – September 2019 Recap

October 2, 2019 /

The Digital Accessibility Office (DAO) will join us to share an overview of their initiatives, service catalog, and resource offerings. This meeting will be a great foundation for an open conversation about creating a culture of accessibility at Carolina. The DAO hopes to listen to your concerns, identify your priorities, and work with you to develop an action plan toward an accessible digital presence.

  • Location: Graduate Student Center (211A W. Cameron Ave.)
  • Date: Friday, September 20, 2019
  • Time: 1:00 – 2:00 PM
  • Presenters:
    • Brad Held, Team Lead
    • Kat Moore, Development and Design Consultant
    • Sarah Arnold, User Experience and Development Consultant
    • Doug Schepers, Training and Application Consultant

Presentation Files
(courtesy of the Digital Accessibility Office )

Meeting Recap and Notes

Notes coming soon…..

November 2017- Everything you need to know about HTTPS – Recap

November 19, 2017 /

Join the webmasters November 16 at 2pm to learn important information about migrating to all-HTTPS websites and what this means to you and your users. William Earnhardt, Web Architect from ITS Digital Services, will join Rachell Underhill, Web and Information Systems Manager from The Graduate School, in presenting this topic and will answer your questions about how the HTTPS switch will affect campus WordPress sites.

Presentations

Presentation Part 1- Rachell Underhill (PDF)

  • What is HTTPS and why should we care?
  • How do web browsers notify users about a website’s security level?
  • What are some common pitfalls when switching to HTTPS?

Presentation Part 2- William Earnhardt (PDF)

  • HSTS Headers and migration strategies
  • How does the switch to all HTTPS affect campus WordPress sites?
  • Where and how to get SSL certificates for UNC websites?

Presentation and Discussion Notes

20171116 HTTPS Webmasters Presentation- Daniel Reeves (PDF)

Rachell’s Presentation

  • Push to move everything to HTTPS over the last 10 years
    • Cannot be ignored now with the changes
  • What is HTTPS
    • Secure
    • Way of confirming sites
    • Encryption of information passed to/from site
    • This is the standard being pushed by big institutions.
    • In past, only used for financial transactions or password related items.
      • Also, there were performance issues
    • HTTPS is the future
      • HTTP2 will be required for new calls here soon.
      • There are features that will only be available using HTTP2
    • Benefits
      • Google is prioritizing websites that use HTTPS higher than basic HTTP sites
      • Browsers are providing content warning messages to sites that do not use HTTPs
    • Browser User Notifications
      • New warning
        • Mixed content
        • Bad certificates
        • Form sent over HTTP
      • Not secure Notification
        • Chrome is displaying a “not secure” message in the browser bar window for any site not using HTTPS
        • Firefox
          • Provides an icon to denote if a site is serving content properly and providing secure information
        • Bad certificate
          • Provides a browser warning to user and does not display site by default
          • A user must perform extra actions to access the site.
        • Chrome form warning
          • When you start typing on field, if the page is not secure, the browser bar will notify you
        • Chrome in the Near Future
          • If the site is not HTTPS, a red warning will display to the users at all times
        • Common pitfalls when switching to HTTPS
          • Invalid or missing SSL certs
          • Mixed content
          • SEO Problems
          • JavaScript errors, API errors or broken websites
        • Mixed Content
          • Occurs when an HTTPS website pulls in not secure content
          • Protocol relative links no longer recommended
            • Now a security issue.
          • Find and fix mixed content on your source code or by using the browser error messages.
          • Chrome console will notify you of any warnings related to security
        • Redirects and SEO
          • Use a proper 301 redirect to push users form http:// https://.
          • Do not use 302 as it will affect search rankings
        • JavaScript or API errors
          • 3rs party content
          • Forms
          • iframes
          • Analytics tools
        • Resources
          • Qualys SSL labs
            • Can test the SSL validity of a site with details about what is working and what is not.
            • Will provide you with a letter grade for the SSL rating for your URL
          • BadSSL.com
            • Series of test pages so you will know how a browser will notify a user for various issues.
          • Why No Padlock
            • Basic analysis site
          • HTTPS checker desktop app and Mixed Content Scan
            • 2 sites for checking mixed content

William’s Presentation

  • Overview
    • General process for switching site over
    • Helpful tips for making change
    • What is being done on campus sites
    • A couple of tools
  • HTTP Strict Transport Security (HSTS)
    • Mostly removes the need for redirecting users from http:// to https://
    • Makes browser always use an https:// connection
      • Even when clicking http:// link
      • Even when typing in the browser bar
    • Removes the ability for users to click through the warning about invalid certificates
    • Basic Implementation
      • Set a header with a max age
      • Policy is refreshed each time the page is refreshed
    • Strongest Implementation
      • Provides additional values
        • IncludeSubDomains
          • This forces all subdomains to conform to this rule
        • Preload
          • Will enable this inclusion to be in the browser preload list.
        • HSTS Preloading
          • Created/managed by Chrome security team
          • List of domains where this value is set by default
            • This is shipped with the browser and cannot be changed by the user
          • Chrome security team started and run it, but it is honored by multiple browsers
        • Migration Process
          • Install certificate(s)
          • Enable https:// but do not force redirectWeb.
            • Allow issue best connections
          • Live browser testing
          • Scan code using grep (or similar tools) for hardcoded http:// value
          • Possibly run a search/replace in the database for http://
          • Force redirect to https://
          • Turn on HSTS header
        • unc.edu migration strategy
          • Stop redirecting to http://
            • Can access sites from either one
          • Force all new sites to be created as HTTPS from the beginning
          • Write code to force sites that have been converted to HTTPS
            • Always redirect http:// to https://
            • Return an HSTS header with a short max-age value
          • One by one switch sites to HTTPS
            • Confirm certificate
            • Search-replace sites tables to fix images, links, etc. in the database
            • Crawl the site using Mixed Content scan tool
          • Increase the HSTS max-age value returned for migrated sites
        • unc.edu process
          • Roughly 45-50% complete with the migration
        • unc.edu migration plan
          • Overview
            • Will not start until sites.unc.edu is complete
            • Has to be automated with over 15K sites
            • HSTS on primary web.unc.edu site will have includeSubdomains
            • Some custom domains will not be migrated over
            • Changes to domain mapping process for the custom ones
          • Planned Project Tools
            • Content Security policy reporting of mixed content
              • Write mixed content error data into application logs
              • Use Splunk to aggregate and generate mixed-content error reports
            • Web-based site scanning tool for campus websites
              • Enter a domain and generate a missed content report for download
            • How to get a certificate
              • UNC InCommon License
                • Go to the software acquisition office
              • Lets Encrypt
                • Feed, depending on host
              • HTTPS resources
                • The HTTPs-Only standard
                • Mozilla Developer Network HSTS Documentation
                  • Link in PowerPoint
                • WordPress Tools
                  • WP-CLI
                    • Command line tool for search replace
                    • Will address serialized data in the database
                  • Search-Replace DB
                  • Better Search Replace Plugin
                    • Powerful WP Plugin

Questions

  • How does the browser store the HSTS?
    • In the browser structure
    • Per browser implementation

June 2017 – TOOL TIME: Share What You Love! – Recap

June 8, 2017 /
 Have you stumbled upon a new resource or tool that you find useful or cannot live without and are willing to share?  If so, you’ll definitely want to attend the next Webmaster’s session on Thursday, June 8th @ 2pm in the Graduate Student Center (211-A West Cameron Ave.)
 
We will be sharing and documenting free, cheap, or otherwise life-simplifying tools that improve your work on the web. Come prepare to share your personal favorites and gather suggestions of new tools that others find helpful. From photo editing to user testing, metrics reporting to code updates, this session will share a wealth of worthwhile tools.  Let’s learn from each other!

Tool Time Part 1, Links and Resources – Updated!

  1. CSS and Web Design
    1. Paletton
      1. Color scheme designer, with web page examples
    2. Adobe Color CC
      1. Color theme designer, integrated into Adobe Creative Suite
    3. Design Seeds
      1. Color palette inspiration
    4. CSS Zen Garden
      1. A demonstration of what can be accomplished through CSS-based design.
    5. Adobe Capture CC (mobile app)
      1. Turn any image into a color theme, pattern, unique brush, Look, or vector graphic that you can use in your creative projects on desktop and mobile devices.
  2. Mobile/Responsive Design
    1. Chrome Developer Tools
      1. The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.
    2. Responsive Web Tester
      1. Quickly preview your responsive website designs at the dimensions they will be seen on popular mobile devices.
    3. BrowserStack – A cross-browser testing tool ($)
      1. Live, Web-Based Browser Testing
  3. Debugging 
    1. Chrome  Developer Tools
      1. The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.
    2. The Web Developer extension
      1. adds various web developer tools to a browser.
    3. Regex 101
      1. Web based regular expression tester and debugger
  4. Accessibility
    1. WAVE Toolbar
      1. The WAVE Chrome and Firefox extensions allows you to evaluate web content for accessibility issues directly within Chrome and Firefox browsers.
    2. WebAIM: Color Contrast Checker
      1. Quick color contrast ratio tester for accessibility
    3. Colorable
      1. Take a set color palette and get contrast values for every possible combination – useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines.
    4. Tota11y
      1. tota11y helps visualize how your site performs with assistive technologies.
    5. W3C Markup Validator
      1. This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.
  5. Usability
    1. The Readability Test Tool
      1. The Readability Test Tool provides a quick and easy way to test the readability of your work.
    2. UXSort
      1. UXSORT is a card sorting tool that allows user experience professionals or marketing managers to plan card sorting activities, manage participants and cards, collect card sorting data, analyze data, and create a report.
    3. Qualtrics
      1. The Qualtrics Research Suite is a powerful online survey tool available to all UNC Chapel Hill faculty, staff, and students, for UNC-related projects.
  6. Image/Media management and analysis
    1. Aspect Ratio Calculator
      1. Calculate and adjust the size of objects while maintaining a specific aspect ratio. This is useful, for example, when resizing photos or video.
    2. MS Picture Manager info and download
      1. No longer part of official MS Office suite but still available
    3. Adobe Spark Post (mobile app)
      1. Create social media posts and images
    4. PIXLR
      1. Photo editing apps for web and mobile
    5. Canva
      1. Social media image and graphic design creator
    6. GIMP
      1. The Free & Open Source Image Editor
  7. Icons
    1. Icon Finder
      1. Search for free or premium icons
    2. Font Awesome
      1. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
    3. Noun Project
      1. Nearly a million curated icons, created by a global community. Useful for identifying icons for concepts.
    4. Canva
      1. Social media image and graphic design creator
    5. Nucleo Icon Set ($)
      1. Search, Customize, Export 8387 Icons
  8. JQuery/JavaScript Extensions/Add-ons
    1. JQuery
      1. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
    2. JQuery UI
      1. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
    3. JSLint
      1. JSLint is a JavaScript program that looks for problems in JavaScript programs. The JavaScript Code Quality Tool.
    4. React.js
      1. A JavaScript library for building user interfaces
    5. Zurb: Foundation
      1. A responsive front-end framework.
  9. Charts/Maps
    1. HighCharts
      1. Highcharts makes it easy for developers to set up interactive charts in their web pages
    2. MapBox
      1. APIs for maps, geocoding, driving directions, and more
    3. TileMill
      1. TileMill is an open source map design studio

April 2017–Web Accessibility

April 6, 2017 /

Inclusive technology

Great usability includes accessibility for all

Join us on April 6 to hear about UNC’s renewed focus on website accessibility and learn about some recommended tools/tips to ensure that your sites are accessible to people with disabilities.  We will mostly focus on WordPress websites, but many of the tools we cover can be used on any environment. 

Location: Graduate Student Center (211A W. Cameron Ave.)

Date: Thursday, April 6, 2017

Time: 2:00–3:00 pm (room reserved until 3:30 for follow-up discussion)

Speakers include:

  • Anne Fox (University Counsel) 
  • Tiffany Bailey (Accessibility, Resources & Services)
  • Phil Daquila (ITS Digital Services)

Presentation:

March 2017- Google Analytics: Out of the box techniques – Recap

March 2, 2017 /

Interested in learning more about what you can do with Google Analytics without needing to customize the tracking code? Come to the Graduate Student Center next Thursday at 2pm to learn about some tools and techniques that can be used on sites with the default Google Analytics configuration (i.e., sites in WordPress or another CMS.) I will also include some tips and ideas that more advanced analytics users should find useful.

This presentation is part of our Google Analytics series, if you missed the last session, you can review that presentation and related materials on the Webmasters site: Google Analytics Fundamentals.

Google Analytics: Out of the box

  • Location: Graduate Student Center (211A W. Cameron Ave.)
  • Date: Thursday, March 2, 2017
  • Time: 2:00 – 3:00 PM (room reserved until 3:30 for follow-up discussion)
  • This meeting will be aimed at a broad audience – no technical skills required.

If you have questions about Google Analytics or if there are specific topics that you would like to be addressed in this discussion,  please feel free to email them to me (runderhill@unc.edu) ahead of time. If you have had a analytics successes or faced any challenges with your analytics data, we want to hear about those as well!

Hope to see you there!

-Rachell

Presentation:

Bonus resources:

Google Analytics 101- Fundamentals presentation

Tracking code

Filtering referral spam, bots and spiders

Filtering internal traffic

Cross-domain/cross-subdomain tracking

Goals

Reporting Tools

Landing pages

« Older posts

Meetups

The best way to stay informed of upcoming meetings and learn about topics important to your colleagues at UNC is by joining our Office 365 Team.

Learn More About…

© 2024 Web Professionals

Theme by Anders Noren — Up ↑