This fall, I’m excited to be teaching “Development for Designers”, part of the program at Centennial College in Toronto Canada. This blog post is my introduction to the course, and outlines my objectives, approach and some of the key learning outcomes.
This post is primarily targeted at the registered students for this course, but may be of interest to other learners who may wish to follow my blog posts and improve their own development skills.
Background
I myself am both a developer and a designer. As part of my (many) job descriptions at Zeitguys in Toronto I have to frequently switch hats between Creative Director and Senior Technical Architect, which means I’m bouncing between both worlds all the time. Further, when I’m actually doing my main job in Business Development (read: “sales”), I need a keen understanding of both sides of the digital coin in order to be able to talk to clients, spitball solutions, and write proposals that make sense, win the business, and don’t destroy the development team when it comes time to implement the pot of gold I’ve just got the client to sign off on.
As I approached the development of this course (a few years ago – this is the first time it’s actually been offered to students, in their 5th semester) I wanted to remain respectful of the fact that many students signed up to a program called “Graphic Design”. In other words, NOT “Web Development” or “Computer Science”. You students are artists, right-brain thinkers and creatives who may very well feel a certain amount of anxiety around terms like “programming”, “code” or “Wankel rotary engine”. So it’s been important to me to make sure the pace, the content and the outcomes are geared to designers and visual, intuitive thinkers.
On the other hand, programming and software development are vast topics, and I am very eager to infect (if that’s the right word) you with my own fascination and passion for code. Sound impossible? I guess that’s my challenge: you can let me know when the course is over.
Core Technologies
The primary coding “languages” you will learn and utilize in this course are: PHP, JavaScript, HTML and CSS/SASS. The primary context in which we will exercise and implement your learnings will be within the WordPress framework. We will also touch on the jQuery framework and jQuery UI plugins, since this greatly facilitates manipulating the elements on your web pages (the DOM).
I love WordPress. Almost every web site we create at Zeitguys is built upon WordPress. I am a core contributor to the WordPress open source project, and a very active member of the Toronto and global WordPress communities. In this course we will not spend much time worrying about learning how to use WordPress: we will dig much deeper into the underlying code that WordPress makes available to developers so we can customize it and make it do almost anything we want it to.
“Almost anything”?
Well, frankly, there’s too much material here to cover in 14 weeks. Some of you will never have written a single line of code before, so we have to go from 0 to being able to customize WordPress in about 42 hours of in-class time. Clearly there will be some details that you’ll have to investigate on your own once you acquire the basic tools to make sense of the documentation and tutorials that proliferate the Interwebs.
Additional Tools
To make our life easier, I’ll be introducing you to many tools that are commonly used in the development workflow, that you probably won’t already have been exposed to in any of your “web design” courses. Using these tools makes all the difference in allowing you to explore the full breadth and depth of the WordPress framework easily, and to organize, manage and share your code.
These tools include:
- MAMPP, a local development environment that turns your Mac into a web server that can run PHP, MySQL and WordPress so you don’t have to keep FTPing files to your remote server very time you want to see a small change to your web page.
- NetBeans, a free and open source Integrated Development Environment (IDE), that is really smart about WordPress and will help you avoid annoying and soul-destroying mistakes by suggesting WordPress commands (functions) and highlighting spelling (syntax) errors as you type. Think of it as a glorified programmer’s spellchecker.
- Git, GitHub and SourceTree to easily manage and share your code, stay up to date on the latest versions of stuff, and save your butt every time your classroom’s computers are wiped clean. Think of it as a programmer’s undo tool that when used properly, allows large teams of programmers to collaborate on the same software without headaches.
- MySQL Workbench to work with the various databases you will need to manage. WordPress stores all of its content (the stuff you write in your blogs) in a database for faster and easier retrieval and editing. You will need to learn how this works and how to create databases for your various projects. This tool allows you to do it in a reasonably pleasant and visual way.
And the best part: in keeping with the WordPress free and open source philosophy, all of these tools are, well, free, and for the most part, open source too! So you can install all this stuff at home, or on your personal laptop and use it for school and commercial work right away, and at no cost to you. Ain’t that sweet.
Objectives
This course is called “Development for Designers” so obviously we’re going to learn development (programming or “coding”). The end goal is not to turn each and every student into a hard-core programmer by the end of the course; in fact, it’s pretty safe to say that if you’re not already a pretty geeky code monkey coming into the course, it’s unlikely you will be a coding whiz at the end of 42 hours of instruction.
However, each and every student will have been exposed to a lot of really important development principles and best practices, and will understand and to some degree speak the language of the propellerheads that they will be working with to implement their wacky (and hopefully visionary) design and interactive ideas.
And this is critical, because the biggest breakdown in any web project is the gap between the design and the implementation — namely, the visual and interactive ideas that the designer comes up with vs. the final result that the programmers code. The more a designer can think like a coder, the more realistic and easy to realize those designs will be, and the more likely that the final outcome will match the original intent. Nothing is more frustrating than having a great idea end up half-implemented because the developer did not share the same vision as the designer (particularly if the client bought into the designer’s idea!)
So you will come out of this course with a solid understanding of what the development world is all about, knowledge of the primary tools of the trade and what advantages they offer, and some basic programming skills that you can build upon if it turns out you like that sort of thing, or at the very least allow you to understand the constraints and the paradigms that developers are working with so you can design realistic, implementable user experiences.
You will also have deep insights into what WordPress is, not as a Content Management System (CMS), but as a development framework. You will understand how WordPress structures its content, pages and site hierarchy so that when you set out to design a WordPress site, you will know how the pieces need to fit together to realize your vision.
Approach
- Since we’ll be using WordPress as our platform for exploring CSS, PHP and JavaScript, the first thing to do will be to learn how to get WordPress up and running. You may already have worked with WordPress before — in fact, most of you will probably already be maintaining a WordPress blog — but we need a WordPress installation that you can completely customize, so we’ll be starting from scratch. To do this, we will be creating a local development environment using MAMPP.
- Next, we’ll learn what we can do to customize the look-and-feel of our blog out-of-the-box so to speak, by installing a theme and customizing its CSS from within the WordPress Admin area. I’ll be showing you how Google Chrome and Firefox provide some pretty slick developer tools to help you craft your CSS in an interactive way, to save a lot of soul-sucking back-and-forth.
- Themes are the heart and soul of website customization with WordPress, so we will need to get a thorough understanding of that technology and the various components of a theme, their hierarchy and usage. We’ll look at your options and then focus on the best practices for creating customized themes for your own web work, personal or commercial.
- With all that out of the way, it will be time to jump into PHP, the main programming language that WordPress is built upon, and still one of the leading server-side scripting languages in professional use today. We’ll move away from WordPress-specific stuff for a while, concentrating instead on understanding basic programming concepts, from syntax to variables, business logic and beyond.
- As you start to feel more comfortable with PHP, we’ll bring WordPress back into focus, by leveraging the primary helpers that the WordPress framework makes available to developers. These functions are invaluable, because there’s so much smarts and best practices built into them by all the really knowledgeable contributors to the WordPress project, that it makes no sense trying to reinvent the wheel. The biggest challenge to learning these techniques and paradigms is knowing where to look, so I will make sure that I get you off to a good start by pointing out some really useful resources, and teaching you how to use NetBeans to help you dig into WordPress itself and learn from the code.
- At some point along the way we’ll take a few detours that you’ll really like. One such excursion will be to learn about SASS, an extension to CSS that really fills in some of the missing features of Cascading Style Sheets. Learning and using SASS will revolutionize the way you use CSS and you’ll never go back to plain old stylesheets again, I guarantee it.
- We’ll also get you set up with your own personal web space, courtesy of Centennial, where you will have complete control (for free) of your own corner of the Internet. This will allow you to continue to work on your class projects from anywhere that has an Internet connection, and to show off your work to friends, family and hopefully potential clients.
- Once your live website is set up, you will start blogging with it as part of this course’s formal homework. Not only does this get you working with the WordPress tools, and gives me an opportunity to direct you to further extra-curricular research, but it also provides valuable content to populate your site as you try out the new techniques that you will be learning.
- To make the transition from local development to remote development even more streamlined, I will be teaching you about Version Control Systems; I have chosen Git because it’s one of the most popular and easy to use VCS, and because you can get a free account with GitHub, which allows you to have your code sitting up “in the cloud” ready to be deployed and shared in an instant. With SourceTree as your visual interface to your Git repositories, it will be a breeze to make a change to your code on your local environment in class, push that code up to your Git repository at the end of class, and then pull it down to your home computer or your web server with minimal effort. Pretty important stuff, considering those lab computers are wiped clean at the end of every day!
- Once you start to feel comfortable with everything you have learned so far (well, probably before that, let’s not kid ourselves) we’ll switch gears and look at JavaScript, a completely different beast altogether from PHP. We’ll have to spend some time understanding how it’s different, both in terms of its syntax (how you write the code) and its context (how you use the code). PHP manipulates and structures your content before it gets to the web browser (server-side technology), whereas JavaScript manipulates your web page and content (DOM) once it’s loaded into your web browser (client-side technology). JavaScript is really good at doing cool stuff like handling interactivity on your web page (button clicks), animation (like sliders and transitions) and refreshing only parts of your page without reloading the whole page (Ajax). You’ll really like what JavaScript can do, but you’ll be frustrated by the differences between these two languages. It will be like learning Italian right after learning French. Sorry about that.
- To make life easier (more complicated?) we’ll be looking at jQuery: a framework for JavaScript that makes it a lot easier to do stuff with your web page without having to worry about how different web browsers actually expect you to do things (yeah, each web browser has its own quirks). We’ll be looking at JavaScript and jQuery pretty much at the same time, so it will be challenging to keep the two things distinct from one another. Sorry about that.
- In all this we’ll touch on two really important (and very current) considerations in web development: accessibility (a11y) and mobile / responsive design. Both of these topics deal with making sure that your web site is inclusive and accessible to everyone, regardless of their physical, mental, or hardware limitations. This will be a running theme throughout the course and I’ll make every effort to keep bringing it up as we work through the core material. Of course, both topics are complete areas of practice unto themselves, and I will make sure I point you to resources where you can go for further learning.
- What course is complete without a stressful final assignment? Certainly not this one, sorry to say. The final assignment in this course will be to create a responsive and accessible custom theme for your blog. You will be graded on technical and design execution, so I expect to see some great work. There will be a final critique in class where you will have the opportunity to present your work, and receive (hopefully) insightful feedback from your peers, and from myself.
Concluding Thoughts
This is a pretty ambitious undertaking. Some of the challenges I anticipate throughout this course will be:
- getting right-brained thinkers to embrace left-brain disciplines
- managing the technology at the lab and the inevitable hiccups that happen the first time a course is run
- balancing teaching the tools versus teaching the theory
- balancing lecture versus hands-on training versus self-directed exercise
- pitching the material at a level that does not leave anyone behind, while providing enough juicy bits to keep advanced students engaged and interested (and attending class!)
I’m looking very much forward to this challenge and hope you’re all up to it as well. Are you ready to embrace the Dark Side?
