A presentation on diversity and inclusion in web communications
Lightning round discussions on connecting applications and the new GoWeb website.
Updates from the rest of your Special Interest Group leaders on all the resources they are developing for campus.
Our ever-popular Geek Out session! Hear about new and innovative web tools from our campus web experts.
For the first time, the GoWeb Awards. An opportunity to recognize a group, person or team that created a website, application, or game that exemplifies excellence in one of the three presidential pillars.
Lots of opportunities to collaborate and connect with web communicators across campus.
2018 Texas A&M University System Technology Summit Moody Gardens Convention Center, Galveston, TX February 26-28
The Texas A&M University System Technology Summit is the place technology experts come to learn from the best, exchange ideas on common challenges and spend time together. Professionals have the rare chance to blend technical learning across a wide range of subjects. TechSummit offers sessions to help you master your daily work, while enjoying a taste of island time. This year’s web track is full of valuable sessions:
New App, Who Dis? : A Journey Into Modo’s Mobile App for Education A presentation on what went into Tarleton’s decision to leave their old (Ellucian) mobile app and go to a new app powered by ModoLabs. Presentation includes what Modo is, pros and cons of the two apps, and lessons learned throughout the process of getting people to abandon the old app and embrace the new one.
Code K-9 Automation has become an integral part of any successful team in software industry. A team which can master the concept of doing more with less, can achieve rapid product development with consistent higher standards. PHP Code Sniffer, which analyzes your code directory against a set of rules/coding standards, will be discussed.
Infrastructure as a Service at UNT: A Case Study of a Successful Private Cloud The University of North Texas System provides IT services to three universities in the Dallas area. By embracing Infrastructure as a Service (IaaS), we have successfully provided self-service cloud services to our customers with greater reliability compared to traditional IT systems, and significant cost savings compared to public cloud offerings. We have proved that the journey to the cloud starts in your data center on premise.
Getting the Most Out of HTML Emails Email continues to be the most reliable form of communication to campus members, but mastering this tool can be very intimidating. Using campus tools like Bulk Mail, Maestro, and Listserv allows you to do and learn more to reach your audience. Join this session to explore the possibilities (and constraints) of HTML emails, how to use analytics to determine the success of your message, and address accessibility in your inbox.
Creating a Custom WordPress Plugin 101 WordPress has many functions that come “out of the box” and you can find plugins that perform a lot of functions. What do you do when you can’t find a plugin to meet a need or you need to change some functionality of a plugin? We will discuss the basic principles of plugin design and development. We will take a look at a custom plugin that modifies an existing plugin. Lastly, we will look at a custom plugin that has an admin form, custom database table, and presents content to users. Come hear how you can use custom plugins to tailor WordPress to your needs.
Find: “Motivation” – Describing and Finding The Right Image “A picture is worth a thousand words” is an understatement. In this talk, we will unlock the data in an image. With a functional examination of strategies, techniques, and technologies we will define and leverage what images hide in plain sight.
Enhancing Web Accessibility and User Experience with ARIA and HTML5 HTML5 offers some great ways to make our sites more accessible, but there is one catch: not all browsers support these new techniques. Enter ARIA (Accessible Rich Internet Applications), which can extend the capabilities of HTML by adding attributes and allowing interaction of dynamic changes to content that are well supported by most browsers and assistive technology. In this session, you’ll explore the differences between HTML5 and ARIA and learn how ARIA – when properly implemented – can complement your HTML5 markup to enhance the accessibility of your website.
Next-Generation Campus Portal Implementation TAMUCT has recently implemented a next gen campus portal environment that allows students, faculty and staff to quickly locate and access services—from any computer or mobile device. This session will outline why a new portal was needed, the implementation process and the lessons learned during the first semester of use.
Pre-conference workshops specific to web development:
Workflow Essentials for Web Development This workshop will expand your knowledge of the web development process by providing you with a few essential tools and tricks needed to help you create more user-friendly and accessible websites.
GoWeb After Dark
Howard Technology Solutions treats you to hors d’oeuvres and a complimentary first drink. Join the Texas A&M GoWeb group and end your day in a casual setting. Network with web professionals and discuss everything web, from the latest trends on analytics, accessibility and branding to recent successes and challenges.
The purpose of this article is to share our approach to continuous deployment for WordPress plugins and themes on our servers at WP Engine. Continuous deployment is the automated testing and delivery of code to development and production environments. Knowing your web host’s requirements is essential to setting up a continuous delivery process. Once you know this, then you can evaluate a service and later develop a solution that meets your needs. I have implemented this for more than a dozen WordPress themes and plugins, and I believe that effort was worth the time it is saving us now.
Codeship automates the process of testing, building, and deploying code to your server, and was the first such product I found which would integrate with our web host (WP Engine). It watches a repository, clones an updated branch to a virtual machine, runs your commands on it, and then deploys the result to your servers. Services like Codeship allow us to automate our existing development and deployment workflow so that changes to the code in our Git repositories are automatically made on our servers.
We use three custom bash scripts in our Codeship projects: setup, build, and deploy. The setup script runs first and is mostly identical for all branches:
# Setup # Get around restriction on shallow pushes by WP Engine git filter-branch -- --all git checkout branchname # Add User Data git config --global user.name "codeship-shortreponame" git config --global user.email "firstname.lastname@example.org" # Combine remote git servers git remote add servers $SERVERNAME_ENVIRONMENT git remote set-url --add --push servers $SERVERNAME_ENVIRONMENT git remote set-url --add --push servers $SERVERNAME2_ENVIRONMENT # Install needed modules npm install -g grunt-cli npm install -g email@example.com npm install -g bower npm install -g ruby gem install compass # Move repo files to a named folder mkdir $FOLDERNAME shopt -s extglob mv !($FOLDERNAME) $FOLDERNAME # Move repo files whose name begins with a period mv .sass-lint.yml $FOLDERNAME/.sass-lint.yml # Exclude development-only files from commit rm .gitignore mv .codeshipignore $FOLDERNAME/.gitignore # Move named folder into a structure identical to the root directory of a WordPress server mkdir -p $DIRECTORY mv $FOLDERNAME $DIRECTORY cd $DIRECTORY/$FOLDERNAME/
It adds git user data, defines a list of remote server repositories, and installs command line modules on the virtual machine. The staging servers are listed as remote git repositories in the staging branch’s setup script, and our production servers are listed as remotes in the master branch’s script. Then it replaces the repository’s gitignore file with our .codeshipignore file and moves all files into a folder structure relative to the root directory of our servers:
# RECOMMENDED BY WPENGINE *~ .DS_Store .svn .cvs *.bak *.swp Thumbs.db # large/disallowed file types # a CDN should be used for these *.hqx *.bin *.exe *.dll *.deb *.dmg *.iso *.img *.msi *.msp *.msm *.mid *.midi *.kar *.mp3 *.ogg *.m4a *.ra *.3gpp *.3gp *.mp4 *.mpeg *.mpg *.mov *.webm *.flv *.m4v *.mng *.asx *.asf *.wmv *.avi # Directories that may or may not exist in repo AND should not be on the server package.json bower.json .bower.json .bowerrc config.rb node_modules .sass-cache *.md *.txt *.ai *.scss *.coffee .gitignore LICENSE LICENSE-MIT gruntfile.js Gruntfile.js werker.yml .editorconfig css/src js/src bower_components/**/foundation/scss/ bower_components/**/jquery/src/ bower_components/**/modernizr/*/ bower_components/**/modernizr/grunt.js bower_components/**/picturefill/index.html bower_components/**/picturefill/logos/*.png bower_components/**/superfish/examples/ # Only using one file from bower_components/html5shiv bower_components/html5shiv/ !bower_components/html5shiv/dist/html5shiv.js
Our typical build script imports Node and Bower modules and uses Grunt to compile Sass and Coffee files:
Note that we use Compass’s expanded output with sourcemaps for developing Sass files and a compressed output for production. A web browser’s inspection tool can detect sourcemaps and use them to show you where a CSS rule is located in your Sass files. This is essential for troubleshooting or modifying Sass as quickly as possible.
Once the build script has finished, the deploy script commits changes to the cloned repository and pushes them to our WP Engine servers:
If this is the first time you’re using the Git Push feature for a particular WP Engine install, you might need to use this git push command instead to avoid a “missing branch” error:
git push servers HEAD:refs/heads/master --force
We can only send code to WP Engine servers from Codeship using their git push feature. It replaces user input authorization with an SSH key. The .codeshipignore file allows us to exclude unneeded files from the commit and reduce upload times. Since our projects are authorized git push users with the WP Engine servers we push to, the last command pushes our final commit to the remote server repositories we defined during setup.
The video tutorial demonstrates how to implement this process. What follows are the same steps I take to connect each of our repositories to our WP Engine servers using Codeship.
Using Codeship to deploy Github repos to WP Engine
Create a new Codeship project and connect it to a Git repo URL
On the Codeship General Project Settings page, copy the SSH public key
On each WP Engine install you want connected, use the SSH public key to add a new Git Push developer named codeship-shortreponame.
On the Codeship project’s Environment settings page, create a new variable named SERVERNAME_PRODUCTION and SERVERNAME_STAGING for each WP Engine install you want connected.
On the same page, define a FOLDERNAME variable as the name of the folder your repo’s files should be placed within. Also define a DIRECTORY variable as either wp-content/plugins or wp-content/themes.
On the Codeship project’s Deployment settings page, create one pipeline for the repo’s master branch and another for the staging branch.
Create separate custom scripts in each pipeline for the setup, build (optional), and deploy portions of the process.
The setup script only has a few variables that need to be changed for each project: branchname, shortreponame, firstname.lastname@example.org, and SERVERNAME_ENVIRONMENT.
The build script contains your existing build process, such as importing NPM modules or preprocessing css and js files.
The deploy script has no variables.
Ensure your Git repo has a master and staging branch.
Checkout the staging branch of your repo and add a .codeshipignore file to its root directory using this template as a guide.
Commit the change and push it to your repository. This will trigger the Codeship build process, which you can watch on the project’s main page as it moves through each line of your custom scripts.
Once the build has finished, it will send the code to the staging server if successful or stop on the first line that results in an error. If it is successful, it will be pushed to the server! Whether or not it is successful, you can click on any line of the script to see its output, so if it fails you can use this to troubleshoot that command.
When your build is successful, you can merge the staging branch to the master branch on your computer and then push it to the repository. This will trigger the master pipeline, which will either deploy it to your production server or result in an error.
And that’s it! Now you have an automated deployment process integrated with your existing Git repository, and all of your servers can have the latest, tested version of your plugins and themes each time you push to it. If you found this article helpful, please leave a comment. You can view the public repositories of Agrilife Communications on Github for more information about their build processes. I can be reached by email at email@example.com.
The Texas A&M IT accessibility services team attended the John Slatin AccessU conference hosted by Knowbility in Austin, Texas on May 17-18, 2017. From the various sessions, the team learned about new accessibility resources you can incorporate into your design, development and work processes.
A question was asked at an Accessibility Special Interest Group meeting along the lines of, “Do we have access to a report that shows all the accessibility issues for our sites?” A comment was then made, “I just don’t know where to start.” I immediately reflected back to when Erick Beck and I gave a presentation along with representatives from SiteImprove of the various components of the SiteImprove suite. The same type of question was asked during the Q&A section. I felt it was time to write an article to share with the entire web community on campus my thoughts on bringing every site into compliance making our sites usable.
Triage known issues
The first step I recommend is triaging known issues on all your sites collectively and establishing a plan. Start by looking at reports, whether in SiteImprove or another reporting tool, and find similarities or patterns. For example, if you notice a contrast ratio issue on all your reports and the same theme is used on each site, then a simple CSS fix to the theme and your theme’s source files will resolve the issue.
Identify teaching opportunities
If you see a lot of issues on alternative text, such as filenames used as alternative text, use it as a teaching moment. Send a polite email to your content contributors stating that you have noticed a lot of images added with the filename used as the alternative text. Provide simple steps to correct the issue and avoid mentioning the rules or policies associated with it. Please do not misunderstand me and think that I do not believe the accessibility rules and policies are not important. The rules and policies are important but, the idea here is to gingerly tell those who contribute content to the site to be mindful of certain things. We don’t want to beat them into the ground with the rule book.
Make the content usable
Instead of embedding an image containing paragraphs of text, tables and supporting images, make the image accessible by making it usable. We all agree that we want Google, Bing and any other search engine to index our site. Why should we then mask our content within an image? We want visitors to be able to find something on a page. Why should we put all our text in an object that can’t be searched? We want those looking at our site with a mobile device to read what we have to say without pinching to zoom in and out. Why include it in an image that scales automatically making the text difficult to see? Extract the content from the image and place it on the page so that everyone can read it making is usable and accessible.
Remember, the end goal is to have our sites accessible by making them usable. Try your best not to feel overwhelmed or frustrated.
Start by triaging the reported issues and establish a plan.
Identify the issues that pertain to a theme or template where one fix resolves the issue in several places.
Use your analytics to identify your top 25 or 50 most visited pages and resolve all the issues on those pages.
Work your way down to the fourth, fifth and sixth level pages eliminating the issues reported by your scanning tool.
Finally, you can review your site to check the tabbing order or if the appropriate landmarks are being used as both of these items need human interaction to verify they are within the guidelines.
Help is on the way!
Don’t be afraid to ask questions! The odds are high that someone has been in the same circumstance and can help you along the way. Join the accessibility sprint on July 14th where the goal is to bring people and technology together to improve the usability of our sites. This is a great opportunity to interact with others across campus who are also making updates that impact accessibility!
Several years ago we did a survey of what content management systems were in use across campus. After several years of change in this space we thought it would be good to see what those numbers look like now.
A trend of consolidation stands out. Through self selection, the majority of us are naturally aligning around Cascade and WordPress. Most of those who have not made that migration are considering it. The exception is Provost IT, which is firmly tied to Kentico.
Bush School – moving into Cascade
College of Architecture
College of Engineering – moving from Umbraco to Cascade
College of Geosciences
Health Science Center
Division of Marketing & Communications
Tarleton State University – for the entire university
Department of Wildlife & Fisheries
Department of Entomology
College of Dentistry – for news site
College of Education – moving from Drupal to WordPress
College of Engineering – for some smaller sites
College of Science
Department of Statistics
College of Veterinary Medicine – moving from Umbraco to WordPress
Health Science Center
Mays Business School
Division of Marketing & Communications – for news site
Public Policy Research Institute
TEEX – will soon begin using for microsites
Education – but actively moving to WordPress
College of Engineering – but actively moving to Cascade
College of Veterinary Medicine – but actively moving to WordPress
Finance & Administration – but considering moving to Cascade or some other platform
College of Education – but actively moving to WordPress
Transportation Services -but considering moving to Cascade or some other platform
2017 Texas A&M University System Technology Summit Moody Gardens Convention Center, Galveston, TX February 20-22
The Texas A&M University System Technology Summit is the place technology experts come to learn from the best, exchange ideas on common challenges and spend time together. Professionals have the rare chance to blend technical learning across a wide range of subjects. Tech Summit offers sessions to help you master your daily work, while enjoying a taste of island time. This year’s web track is full of valuable sessions:
Equidox by Onix treats you to hors d’oeuvres and a complimentary first drink. Join the Texas A&M GoWeb group and end your day in a casual setting. Network with web professionals and discuss everything web, from the latest trends on analytics, accessibility and branding to recent successes and challenges.
At the College of Engineering, we are in the process of adding SSL certificates to all of our WordPress sites. On top of faster load times with HTTP/2 and higher page rankings in Google’s search engine, we also wanted our WordPress logins to be secure. It is a simple procedure that adds one more layer of obfuscation. Well, it was supposed to be a simple procedure but I ran into an issue when securing the WordPress login process.
WCAG 2.0 (pronounced wuh-CAG 2.0) is a set of web content accessibility guidelines that helps make websites work for people of all abilities. It’s the yardstick by which most institutions of higher education measure the accessibility of their sites, and Texas A&M University is no exception.
The reasoning behind the standards
Designing and developing sites with WCAG 2.0 in mind allows us to broaden our reach by making sure our content can be enjoyed by everyone, including individuals with cognitive, motor, vison or auditory challenges. It also takes into account unique user preferences, such as how we choose to view color, if we want to enlarge text, or even if we want to use only a keyboard to access online information.
WCAG 2.0, in a nutshell, allows us to make our websites perceivable, operable, understandable and robust. Each of the criteria point directly to one of these four concepts. See web accessibility standards.
Types of evaluations
Using automated evaluation tools can provide a quick initial assessment and give you a good idea of the accessibility of the site on a large scale. Some automated evaluation tools are:
Browser extensions such as Html_Codesniffer and WebAIM’s Wave
Desktop applications such as aViewer and Color Contrast Analyzer
Although these tools are very helpful in evaluating websites, they may only find 25 to 35% of accessibility issues. This is a start, but when it comes to getting our institution’s information out to the widest possible audience, this just won’t cut it.
A thorough testing program includes manual testing, as it examines accessibility issues at a more granular level and helps to verify the results of automated testing. As a best practice, manual testing should be performed in multiple browsers including Firefox, Internet Explorer, Google Chrome, and Safari. The accuracy of results depends solely upon the knowledge and skill of the tester, so there’s no better way than to just dive right in and start testing.
Going a step further, usability testing helps organizations understand user needs, identify potential issues, and generate ideas for improvement. While usability testing is often used to evaluate a website’s user interface (UI), this method is also invaluable for discovering the best way to present information on your website. By paying attention to how people read, interpret, and access content, you gain a greater understanding of how to communicate, structure, and format information.
Document Creation including Microsoft Word and PowerPoint as well as Adobe InDesign and PDF Accessibility
Procurement Training, which takes you step-by-step through the purchase of Electronic and Information Resources (EIR)
Custom sessions for your workgroup are also available, and IT Accessibility Services staff can provide consulting or even help you come up with a workable testing protocol. For more information, contact firstname.lastname@example.org.