Tag: front-end developers

WordPress and Beer: Homebrew web applications with WP (DPA1)

WordPress is an incredible platform for building full-featured, customized web applications. Every beer on the planet is made from the same four ingredients: hops, water, barley and yeast. Similarly, WordPress is built around a small feature set (posts, pages, media and tags), but from these you can build anything from a single blog to a major news network. We’ll look at how to take it a step further - adding and removing features to create web applications that act in entirely new and surprising ways. In this 45-minute session we will to look at the similarities between everyone’s favorite blogging platform and everyone’s favorite alcoholic beverage. Together, we’ll explore what makes these items so versatile and extendable. Using examples, Nagmay hopes to show how WP can help you create web applications better and faster than traditional platforms.

Mix it up! The art of remixing content. (MPD2)

You are wearing multiple hats. You have little time. You have a tiny budget. Revise your workflow, and practice the art of remixing: it will save your valuable time, money and allow you to focus on the really important tasks. To cultivate a remix mindset means realizing it is okay not to start from scratch every time. Making use of existing resources and materials, and producing a new product by combining or editing them is a creative way to save resources. We will explore areas of improvement, and boost your daily productivity by identifying duplicated efforts in your organization. Implementing remix strategies and the practice of lean kaizen, will help to transform your organization and implement changes that stick.

Building (or Choosing) an Accessible Media Player (DPA3)

HTML5 media elements make it simple as pie to add audio and video to web pages. But is the media they deliver accessible to all users? Browser support for media accessibility is hit and miss, and no browser currently provides full support. For full accessibility, including keyboard-accessible controls, support for closed captions, subtitles, audio description, and interactive transcripts, and a high degree of user-customization, it's necessary to build your own player using the HTML5 media API. At the University of Washington, they've done that, and are eager to share.

Rebooting Your Responsive Workflow with Pattern Lab (UAD3)

Responsive design is forcing us to reevaluate our design and development practices. It's also forcing us to rethink how we communicate with our clients and what a project's deliverables might be. Pattern Lab attempts to provide one tool that allows for both the creation of modular systems that can live beyond the development phase of a project as well as give clients a tool to review on-going work in the place that a site is actually going to be used: the browser. This talk will introduce you to the features of the Pattern Lab. We will also discuss how it fits into the new development workflow at West Virginia University. Learn how WVU developed its very own "bootstrap" to share common, tested interface patterns across the university. Pattern Lab is Open Source and is based on lessons learned during the latest TechCrunch and Entertainment Weekly redesigns. It is currently maintained by Dave Olsen and Brad Frost. Learn more about Pattern Lab at http://patternlab.io.

Get with the Program: Building Better Program, Major and Degree Pages (TIE4)

Majors, degrees and programs -- these are the products that colleges and universities offer, and the act of earning a degree is a life-changing experience for most people. Why, then, are so many major, program and degree pages on .edu sites so long, lackluster or lifeless? This session will focus on creating a better user experience in a place that matters to almost every prospective student: major, degree and program pages. We'll look at design, usability and content decisions for these pages and best-in-category examples.

Automate all the things with Yo, Grunt and Bower (AIM5)

Yo, Grunt and Bower are new ways to help you streamline you site/app building process. Grunt is a task manager that can do lots of cool things like compile you SASS into CSS, move files around, compress files etc. Yeoman is a site/app generator. Do you want the scaffolding for a new angular app? Just type a few easy commands and it is generated. Bower is a dependency manager that maintains a list of libraries needed for your site. Need the latest JQuery? JQuery UI or Angular? Just add it to a json file and you will always have the latest.

Navigating a diverse campus (DPA5)

In recent years, most universities moved to an interactive format for their campus map. However, most campus accessibility information remains static. Some of the best interactive map implementations have accessibility information available for each building, but deliver it as a PDF on a building-by-building basis. At the University of Tennessee, the Office of Communications and Marketing, Facilities Services, and the Office of Equity and Diversity teamed up to provide comprehensive, interactive accessibility information. Phase One launched January 13th when the team provided a half dozen accessibility layers on the university’s interactive campus map. Phase Two is underway as Tennessee builds a responsive website with buildings’ interior accessibility information to provide a fluid way to navigate its campus with door-to-door accessibility information.

Beyond the Buildings: A New Generation of Campus Maps (DPA6)

Campus maps are often monolithic and confined to a single page or section on your web site, and sometimes are even just a link to a PDF. Lee and To will talk about rethinking the whole idea of the campus map, and how to go from a single stand-alone map to a modular, extensible map system, that you can use throughout your web site and build/layer other types of location-based content on top of. For example, a self-guided mobile walking tour of historic buildings, a virtual tour of sustainability features around campus, a landscape/garden tour showing how the landscaping of the physical campus enhances the academic experience. Also: event, parking, and accessibility information; department and office locations. The session will cover strategy, process, challenges, opportunities, and touch on adding HTML5 geolocation for mobile use, empowering campus groups to make their own simple maps, using available community-generated data, and open-source tools.

Prototyping with WordPress: No coding required (UAD6)

WordPress is a powerful CMS but it can also be used to build fully functional prototypes. Headway theme’s drag and drop visual editor allows you to create and experiment with different layouts including fixed width and responsive designs. Use the prototypes to collect feedback, test for usability and improve your design on the fly; or clone it to test multiple variations of the same design. Being on a web server, you only need a web browser to edit, share and collaborate on your prototypes. You don’t need to know any PHP. Knowledge of HTML and CSS is helpful but not required. Here’s the best part: once you are finished, your prototype doesn’t go to waste. If you choose WordPress as CMS, you can simply modify your prototype to build the final website. If not, you can still use CSS generated by the theme. Join us to learn a simple and quick prototyping tool using a recent project as an example. Using a real project as an example, learn how to: - Use visual editor to build a grid based layout from scratch - Apply custom CSS styles - Reusing layouts, blocks and styles for different sections of the website - Export layouts to create multiple prototypes for the same project

Confessions of a CMS Generalist (DPA7)

After navigating the waters of not one, but 3 different CMSes for the same set of websites, Guay shares her insights into what works, what doesn’t, what’s great and what’s just plain dumb about Drupal, Plone and WordPress. She’ll even talk about her experiences making all 3 share the same sandbox and not fight (too much) over the toys.

Don't like your Google Search Interface? Make your Own! (AIM7)

If you use a Google Search Appliance (GSA) or the Google Custom Search Engine (GCSE) sometimes you can find it limiting to have it not well integrated with your web site. Both of these tools have an XML API that will allow you to build your own front-end and still leverage their power. Search can even be integrated into your 404 (Page Not Found) handling, so when an old URL doesn't work, it gets used as the basis of an automated search! Old URL is reported as bad to search engines, while user sees the most likely pages that replaced it. Everybody wins!

Reimplementing Drupal in Place (DPA8)

When Mount Holyoke College first moved its main website into Drupal, the goal was quick migration, not smart implementation, and the school did some decidedly un-Drupalish things. Two years down the road, the team used a major redesign as the opportunity to start figuring out how to make better use of its platform of choice. The catch was the team needed to upgrade in place rather than start over. In this talk, Proctor will share some lessons learned from the process of replacing the wings while the plane is in the air.

Multi-headed Drupal (DPA9)

A common challenge for large universities is IT's desire to have a single, centrally-managed web presence while academic departments want to maintain their own individuality, both from a design and management perspective. That leads to an inevitable tug-of-war between "one big site" and "lots of little sites". One of the strengths of the Drupal CMS platform is that it has several tools for managing "companion sites". Those could be entirely separate sites with some commonalities or one "site" that appears as distinct sites to visitors. Each approach has its own set of benefits and trade-offs. This session will explore several leading ways to build and manage a multi-headed Drupal installation, including Domain Access, Organic Groups, and Multi-site, including examples of organizations that have done so. It will also ask the question of whether a multi-headed Drupal is necessary in the first place; often it is not. Attendees should come away better-armed to evaluate how, and if, to roll out Drupal for a multi-part site at their institution.

The content is the Experience: Lessons in Creating a Student-Centered Student Affairs Website (TIE9)

Students are busy. They are focused on the exam they have to write tomorrow or the paper due at the end of the month. So how do you create a stellar online experience that makes it easy for students to find and use the information they need, delight them while on your site and make them want to come back? The centralized student service offices at UBC (The University of British Columbia) decided to tackle this challenge by using key elements of the student experience, rather than organizational structure, in the redesign of their website, students.ubc.ca. This session will discuss the overhaul of students.ubc.ca, a project initiated by the need to replace the CMS being used to manage the site but really about creating a user-centered student affairs website designed around the needs and preferences of current students, not the business owners. The redesign and redevelopment of students.ubc.ca involved the migration of approximately 12,000 pages of content from 12 distinct microsites into one meaningful, connected and comprehensive site. The content was split into flexible components that can be published in any location on any of the roughly 700 new dynamic site pages. Learn how the redesign project was designed to ensure the new and improved site delivered on the site goals to make it easy for students to find the information they’re looking for when visiting the site, anticipate the information needs of students as they progress through their studies and experience at UBC, delight students with content and functionality that surpasses what they came to the site for and deliver an intuitive and seamless experience designed around the student experience that helps students act on the information and the invitation to participate. The presenters will provide a tour of the redesigned site, including before and after, highlighting the site structure, visual design and structured content strategy.

Authors Are People, Too (UAD10)

If content is king and user experience is crucial, what can we say about the experiences of people who author content? What makes a good authoring experience, why should I care, and how can I improve my authors’ experience with the CMS? The fundamental purpose of a CMS is to empower us to create and manage Web content. Good user experience should start with the people who are responsible for using this system to work with content. If the process for authoring and editing content in the CMS is cumbersome, authors won’t be actively engaged in maintaining it, and our sites will be woefully out-of-date. Good authoring experience (AX) will make the CMS easier to learn and easier to use, increasing the likelihood that authors will take a more active role in creating content. Active authors do not require excessive post-training support and keep content up-to-date. CMSs should be tailored to their authors, not the other way around. This session will provide experiences and lessons learned as Penn State has iteratively improved our CMS authoring environment to empower its authors.

Taking the Web Offline (AIM10)

Let's face it. There more devices out there than you can support with dedicated native apps. And except for very specific cases, most of what you'll want to do with your app is available through web API's. And yes, this includes offline support. During this presentation we'll take a look at your options for storing data in the client browser and how you can leverage it to speed up your websites. We'll also spend some time looking at how it was implemented on 2014.highedweb.org.

Moving to the Client - Writing Full Applications in JavaScript (AIM11)

JavaScript has moved from providing minor interaction to a full scale development platform. Major application such as Gmail and Google Calendar have hundreds of thousands of lines of code all written in JavaScript. Mobile browsers have full featured browsers but performance and memory constraints become major considerations. And then there is the whole world of single page applications. This session will look at how to write code that can be maintained as well as developing build processes to catch common errors before deploying to production.

Your Website is the Next Social Medium (MCS11)

Imagine a university website with content tailored specifically to the individual viewing it - a site where nobody has to hunt to find information relevant to them. Sound like a pipe dream? Maybe, maybe not. Social media has fundamentally changed the information gathering process. People want to be social anytime they consume media. According to social media mogul Gary Vaynerchuk, “This means that you need to fold a social element into all of your creative… and into every interaction with your customers…. From now on, every platform should be treated as a social networking platform.” Now, considering websites, if it's not social, it's not relevant. Fortunately, there are many ways to leverage the big data of social networks to an institution's advantage. A few key facts about users (such as age, location, and personal interests) can take content from “generic” to “extremely relevant.” Thankfully, social media APIs make this fairly simple to implement. Anglea will explore the possibilities that exist for integrating the secret sauce of social media into a website. He will also discuss everything from big ideas to small actionable steps to begin enhancing the social relevancy of content.