Next Generation Web Authoring

This course will introduce the latest open-source options for designing dynamic content-management system based websites. 

Open-source software such as Drupal is now in use to create websites ranging in scope from small portfolio sites by individual artists to large user-based websites used by colleges and other large organizations.  With this software, it is possible to create dynamic, easy to edit and update websites that allow easy integration of such features as user-logins, various levels of access for various types of users, user feedback and blogging, ecommerce, as well as dynamic content creation of all sorts. The Drupal community is also one of the largest open-source software communities out there, and we will look at this culture and open structure for ideas and community-oriented practices to apply to our artistic and design practices as well.

This course will introduce the basics of the various concepts and structures involved in using dynamic content management software, and students will implement a wide variety of website models via small assignments and tutorials in order to gain mastery over the various possibilities.  Students will each create a live website as a final project.  Class assumes basic knowledge of HTML and web-based editing.

The latest version of Drupal - version 7 - converts a number of key ideas that were previously available only as 3rd party contributed modules into "core" components, promising to be the most powerful, and easy-to-use version of Drupal yet.  While version 8 is currently under development and will be released soon, version 7 is the most recent and up to date version, and is what we will be using.

Textbooks: 

Using Drupal, Angela Byron, Addison Berry, and Bruno De Bondt © 2012, O'Reilly

- note:  the first edition of this book, used in this class previously, is written for Drupal 6. The second edition of this book is written for drupal 7. Make sure you get the 2nd edition.  This is available for download from the O'Reilly site (kindle, pdf, etc.)  and I would recommend the electronic version over the printed one.

Head First WordPress, Jeff Siarto © 2010, O'Reilly

Wordpress: The Missing Manual, second edition, Mathew MacDonald © 2014, O'Reilly

 

 

Learning HTML - resources

There are a number of resources that will be usefule for learning HTML.

Lynda.com:  Go to the Lynda.com site through the portal - and search for:  XTML and HTML Essential Training
We suggest you do the follow sections: Sections 1,2,3,4 and possibly 8 and 9 (optionally) if you have time.

W3C Schools
Organization for standards compliance

W3C XHTML Tag Reference
Useful Tags

W3C CSS Tutorial

W3C CSS Reference

PHP Reference

A List Apart
articles and tutorials for building websites

JQuery
Javascript Framework for animation/effects

PHP Example Code from Class
Below you'll find the example we went over in class on Thursday about how to alter the node.tpl.php files.  It includes example code and comments. Remember, you'll copy the node.tpl.php file as a node--your_content_type_name.tpl.php and edit that new file.

1. Course Overview, Introduction to Drupal, Account Setup

week: 
1

 

Course Overview - review of syllabus, schedule, assignments, textbook, etc.

Review of Textbooks: 

O'Reilly:  Using Drupal, 2nd Edition

O'Reilly: Head First Wordpress

O'Reilly: Wordpress, The Missing Manual, 2nd Edition

Backgrounds / Goals of class members

Content Management Systems vs. Direct Authoring of web sites

Review of my own site authoring experience (3 personal case studies)

Some Comparisons of Drupal, Wordpress, and Squarespace as 3 "ways to go" 

Drupal sites and online resources

Wordpress sites and online resources

Squarespace sites and online resources

basic HTML introduction / review:  W3schools' online HTML Tutorial

Web Server Account Setup

 

Reading for next week:  Using Drupal:  Preface and Chapter 1 (pages xi - 16)

2. Basic Web Server tools, Drupal Installation, brief history of WWW authoring, Drupal overview

week: 
2

- Basic Web Server Tools

- server mechanics

- working with cpanel and other browser tools

- ftp basics

- MYSQL tools

- Installing Drupal

- A brief History of WWW authoring, and CMS (text, pages 1-8)

- HTML and CCS

- Scripts and Databases

- CMS

- Drupal Basics (text, pages 8-16)

- CSS introduction / review: W3schools' online CSS tutorial

 

3. Drupal Jumpstart

week: 
3

Getting started in Drupal is best done by example.  In the next two classes we will work through the example site constructed in chapter 2 of our text. (pages 17-56)

Drupal basic ideas (review)

- Modules

- Users

- Nodes

- Taxonomy

Basic Stuctural Components

- Nodes

- Comments

- Users

- Blocks

- Menus

- Paths

Creating Content

Basic Navigation

Creating and positioning Blocks

Installing Modules

Path Module

Administration Menu Module

Configuring User Access and Permissions

Contact Form

Using Taxonomy

Setting up a basic Blog

Spam Detection tools - won't do these right now, just make you aware of them.....

Theming the site - a first stab at making this thing look ok (this will be covered WAY more extensively later)

Setting up Content Editing - HTML filtering and Security - VERY IMPORANT!!!

Setting variable Editing options for different user roles

 

 

 

4. Getting serious - customizing and making drupal more dynamic.

week: 
5

In the next two classes we will work through some more advanced examples of Drupal - using two modules to create multiple kinds of specific content, as well as dynamic ways of viewing that content.  Today we will work through pages 91-120.

This 2nd edition of the book does not yet have the web example set up for Drupal 7, so we will be doing this ourselves.  Download the files and instructions for doing this below.

Much of the material covered in this chapter was the most important fuctionality that moved from external Modules (CCK, Views, etc.) into core Drupal.  The chapter is still under progress (as is my own adaptation to the new system) - so keep your head up and eyes open through all this!

Overview of the case study Website - the importance of predesign

Content Construction Kit  - (historically one of the most imprtant add-on modules for drupal - now made a core feature in Drupal 7!)

setting up custom kinds of content.

fields

widgets

formatters

Making new Content Types

Customizing Field Displays

The Views Module - an introduction

Creating two Page views (Nodes) of job listings and applications for specific users

Using the Views default vs override settings.

Creating Blocks using the views module.

Incorporating Arguments into a view, to make them user-specific

Adding view blocks to the sidebar of a page

 

 

Files: 

5. Portfolio Site Exercise

week: 
7

 Now that we have covered a number of basics:  Content Types, Views, Image and file loading, Using Blocks and Menus, etc. we have most of the tools we need to put toegether a portfolio site.

As an in class project, we will start from scratch, and as a group will build a porfolio site, using either images supplied by me (my own text/images/sound and video from my site) or by you.  If you use your own material, this project can serve as a beginning of an actual portfolio.

We will assume the following with the page:

- There will be mutliple content types for different kinds of projects that we have documentation for.

- We will use Taxonomy to help catagorize projects, and to seperate them into specific categories.

- We will have a web menu that will direct the user to specific kinds of projects: "public art", "installation", "media art", "music", etc.

- We will include a bio section (as well as an "about the artist block") and downloadable pdf files for bio, CV, etc.

Once the portfolio is completed, we will use it as a working example for tomorrow's session on custom theming......

Continue Working on: : 

6. Wordpress Basics

week: 
6

 

week: 
 6

This class we will take a look at another very popular CMS system - Wordpress.  Wordpress was originally designed for blogging, and before going "under the hood" we will first look at a basic out of the box blogging setup.

We will work from the first chapter in the Head First Wordpress book - so you can replicate / repeat all this on your own out of class also using the book.

Wordpress History

Wordpress Installation

Setting up a basic blog

The wordpress control panel

Using themes in Wordpress

Using plugins to enhance capabilities

 

Continue Working on: : 

7. Wordpress Themeing

week: 
7

week: 
 7

This class we will go through what it takes to set up a basic theme in Wordpress. THis will require understanding the .php files and the role they play, and editing both HTML and CSS to structure a wordpress site to look the way we want.  These processes are simliar in Drupal customization and themeing as well, so a lot of what you learn here will in general apply to Drupal as well (although Drupal is a bit more compilicated due to its larger scope).

n this class we will work our way through the second chapter of the Head First Wordpress book.

Mapping an existing site's design to a wordpress site.

Anatomy of a Wordpress Theme

PHP - how this generates dynamic web pages

Key .php files and what they do

Using Stylesheets (CSS) to format and control layout, fonts, colors, etc.

Using widgets to update a site.

The final Theme

Continue Working on: : 

8. Squarespace

week: 
8

In this class we will look at one final option - Squarespace.  THis is NOT an open source project, but rather a commercial hosting site that features preset templates, a very limited amount of access to customize things, but allows you to create highly visual websites that are fairly mobile-device friendly quickly and easily.  Options like squarespace are very good for certain situations, such as small commercial sites where the content is somewhat static, where not a lot of resources are available for implementing a larger site, and where good mobile device formatting, etc. is important - and easy solutions to online sales etc. are also important.  While these kinds of systems are much more "turnkey" they are still based around CMS engines, and embody many of the ideas we learned with Drupal and Wordpress.

We will look through my own case study, the site for Sketchbook Brewing Co. as a model for the kind of application the squarespace is useful.  Sketchbook's site fit the description above quite exactly, and was implemented by a team of artists, designers, and others who had not done lots of web development previously. The site was put together in a matter of a week or so.

Continue Working on: : 

9. Final Project Design Notes Presentations

week: 
9

Today we will look at everyones Design Notes and discuss the planned final projects. 

Presentations will be made based on the details of your design process.  For eveyone though, these documents should be in digital format (even if you have to scan in hand drawings of diagrams, layouts, etc.) so that they can be presented to the group via the projector. 

Once everyone has presented their project proposals, and gotten feedback - then they will do whatever revisions are necessary (based on our feedback) and will begin working on realizing the project.

Begin Working on Assignment: 

10, 11 and 12 - Final Projects / selected topics

week: 
11

We will spend most of the day working on Final projects, but will also cover selected topics that are appropriate to the direction of student projects - including sound/video options within CMS systems, theme modification, and other possible topics of interest.

 

Continue Working on: : 

13 and 14 Continue work on Final Projects

week: 
13

Continue working on Final Projects - with lots of one-on-one help!!!

 

Projects should be finished by mid-day on week 14 (in a 3-week intensive class) or by the end of the day on week 14 in a semester-long class.  This will then allow everyone in the class time to browse, create a login, and otherwise use the websites of everyone else in the class in preparation for final critiques.

Continue Working on: : 

15. Final Project Presentations

week: 
15

Everyone will present their final projects.  Projects should be finished by mid-day on week 14 (in a 3-week intensive class) or by the end of the day on week 14 in a semester-long class.  This will then allow everyone in the class time to browse, create a login, and otherwise use the websites of everyone else in the class in preparation for final critiques.

 

Each member of the class will make a short presentation of their web site, outlining both successes and ongoing problems or issues.  The rest of the class will then enage in a discussion of the site, and their experience with it.
 

Final Project Presentations


Kimberly

Vanessa

Joseph & this one too

Erin

Sal

Sam (don't check before 5AM Tuesday please)

Quinn

Jerry

Alex

 

alternate drupal project: Working with Images

week: 
7

This class we will go through the case study in Chapter 7 of the text, (pages 235-270), and will cover modules such as imagecache which automates things like thumbnail creation, etc.  We will also look at how to integrate image and thumbnails to create photo indexes, etc.

 

Case Study project overview, goals, etc.

Imagefield module.

Creating a photo content type using CCK.

allowing a user to upload photos

Using ImageCache to automate cropping and resizing

Creating image handling presets

Setting up gallery views using views

Showing latest photos and other view ideas

Making a custom pager

 

Continue Working on: :