Winter 2013: Session 2

A CRASH COURSE IN CODING

Why are we having you set up blogs? Why

WordPress?•WordPress is a widely-used and relatively

stable Content Management System (CMS)

•With WordPress, you have opportunities to work with a WYSIWYG editor, and tweak code.

•WordPress has a large and active support community.

Our goal...•is not to have you set up a blog

because everyone doing digital humanities has to have a blog.

•Instead, we hope that this workshop will help you become more comfortable playing around with digital tools.

Sandbox: n. 1. a space for playing and experimenting -- building castles, tunnels, ideas, presentations, etc.. 2. an essential tool for people interested in working with technology.

WordPress can be a good sandbox as you experiment with digital humanities content

management.

A reminder from the Autumn workshops on the values of DH...

(These values underlie the choices you make about what you publish on any

site.)

In DH, Scholarship is Content Management.

• You’re making portions of your research accessible, in formats that others can understand.

• You’re publishing in more units than the book, or the scholarly article.

• You’re preserving your data in multiple media (photographs, spreadsheets, audio files).

• You’re curating your research independently of any publisher or university.

Don’t worry -- DH scholarship isn’t

only content management

(as many digital humanists have explained to their tenure committees).

However, in an age of budget cuts, technological enthusiasm, and changing

platforms, being able to make knowledgeable

decisions about disseminating your

research is increasingly important.

Why do you need to be able to work with code?

•WYSIWYG (What You See Is What You Get) editors are helpful, but not free from errors

•Pre-sets will offer you an extremely limited set of options -- and being able to adjust slightly can be highly advantageous.

Wordpress.com•Available for free

•Pre-loaded with style sheets and themes

•Hard to break

•More difficult to customize (without purchasing a Pro Account)

•Files only uploadable through WP interface

Wordpress.org• Not free -- available when you purchase site

hosting. (Also available for free installation on your UW web server)

• Easier to customize HTML and CSS

• Allows plug-in installation for greater functionality. (A plug-in is comparable to a smartphone app: it allows you to do specific tasks.)

• Files uploadable via FTP

• Easier to break

Two methods for accessing your Wordpress.com blog

•http://www.wordpress.com : oriented towards blogging and reading other WP blogs

•http://[yoursitename].wordpress.com/wp-admin/ : identical to WP.org interface -- focused strictly on your site.

Posts: information that you post that is associated with a specific date and time. Can be linked to directly.

Pages: Contain information, but without automatic date/time info. More difficult to link to specific pieces of information, rather than whole pages.

Posts are where you put updates or announcements about what you’re working on.

Post example: http://www.dmdh.org/2012/10/demystifying-dh-managing-and-professionalizing-your-online-identity/

Pages are where you put longer streams of information. Usually, you’ll see them at the top of a site:

Page example: http://www.dmdh.org/organizers/

Your website is putting things in different fileboxes (much like

your computer does).

It has boxes that you give it. In WordPress, every Page is a box. (i.e.,

dmdh.org/organizers). When in doubt, it will put things in boxes according to

dates: (i.e., dmdh.org/2012/10/demystifying-dh-

managing-your...)

If you learn to read web addresses, you can start to understand how any

site is organizing its content.

http://www.nytimes.com/2013/02/01/arts/design/outsider-art-fair-opens-at-548-west-22nd-street.html?ref=arts&_r=0

http://www.cnn.com/SHOWBIZ/

In order to keep your site organized for you,

WordPress restricts you. You can have as many pages as you want, but only one page can have time/date posts, i.e., a

blog.

In addition to Pages and Posts, your blog will have a header

area, and may have one or more smaller sidebars or footers.

Header: your site’s name, a tagline describing your site (optional), an image

(optional)

Sidebars/Footers: contain small chunks of information. These may contain instructions for navigating the site,

links, or widgets.

Widgets: small programs that increase your site’s functionality in certain

specific ways, i.e., by showing your recent GoodReads entries or your

Twitter feed.

There are lots of widgets you can use.

(All you have to do to operate them is drag them into the sidebar.)

Two of the most flexible, though, are the Image widget,

and the Text widget.

They allow you to work directly with HTML, and with the dimensions of the image.

The number of sidebars/footers you have depends on what theme you choose.

Theme: a preset CSS stylesheet and HTML template, intended to save you time by

making your site look pretty/professional/avant-garde/alternative/et

c.

(Your Theme options can be found in the Appearance tab on your WordPress dashboard.)

Not sure what theme to choose? Check out this advice from the Chronicle’s ProfHacker blog:

http://chronicle.com/blogs/profhacker/finding-the-best-wordpress-themes-for-your-academic-needs/22667

You may have to fiddle around to

get the right theme.

It may help to make a list, or even a rough

drawing of the information you plan to include.

(Don’t worry about finding the right theme today.)

Here’s the basic environment you’ll work with in WordPress. (In many ways, it’s very similar to wordprocessing programs).

If you mouse over the buttons, you should see a pop-up telling you what they do.

The button on the end is called the Show/Hide Kitchen Sink. It reveals additional formatting options.

However, one of the most important aspects of this screen is right here:

In the language of WYSIWYG, Visual shows what you get:

And “Text” shows you the code behind it:

You’re looking mostly at HTML -- note the tags setting off the words, like <blockquote> and

</blockquote>.

The only CSS here is setting the color of the text: “color: #0000ff;”

Images work the same way.

=

<a href="http://dmdhdemo.files.wordpress.com/2013/02/ittyb

ittykitty1.jpg"><img class="aligncenter size-full

wp-image-28" alt="Itty Bitty Kitty Committee: January 23,

2013" src="http://dmdhdemo.files.wordpress.com/2013/02/ittybittykitty1.jpg" width="500"

height="331" /></a>In working with images, you need to learn to read their size.

Go to http://images.google.comSearch for kittens.

Mouse over the pictures you find to see the size of the

images, i.e. 500 x 331

What you’re seeing is the size of the image in pixels.

A pixel is the basic visual unit of the internet.

The Media section of your blog is also

important -- it allows you to upload files

(images, PDFs, Word docs, etc.)

directly through the browser.

Once you’ve uploaded a file, you can see it in the library, and edit its information.

In the Edit screen, you can see all the information: the file type, dimensions, and even

the File URL (where the fileis stored)

If you double click to select the File URL, and copy it (Ctrl+C or Command+C), and paste it into your browser window, you can see the picture, as it’s stored on your site.

We were going to have you work with choosing and resizing a header for your

site.

However -- WordPress.com doesn’t allow you to tinker with the header

image by interacting with the code. It does nearly all of the work for you.

So, instead, we’re going to work with the Image and Text widgets.

To start, head over to http://www.dmdh.org.

There’s an image waiting for you, titled Seattle Skyline.jpg

Go ahead and download it to your computer.

You can probably guess what the next step is: upload the to your WordPress media library.

Find the File URL, and double-click to select it. Copy it.

Now head back to the Widgets section, under the Appearance

tab.

Select the Image Widget, and drag it over to your sidebar

area.

Click on the down arrow to open it up.

Paste your image URL into the “Image URL” box.

Add a title, and some alt. text for people with screen readers.

Then hit Save, Close, and in another tab, open your site.

Well, that didn’t work. The image is

too big.

You can resize images using fancy/expensive

tools like PhotoShop -- but you can also use sites like http://www.picresize.com

Sites like PicResize are useful, because they allow you to tinker easily with the image size. You can even customize

by pixel -- and PicResizewill automatically do the proportion math for you.

One general principle: it’s better to make images smaller, rather

than larger.This tiny kitten, enlarged, becomes pixelated: you can see the pixels.

Use PicResize to make your image smaller, and download the new image -- then replace the old

version in the Image Widget.

(You’ll need to re-upload it to your media library.)

PicResize is one way of

dealing with an image that’s the wrong size.

Other methods of resizing

•Just alter the dimensions directly within the Image Widget (but watch out for the math!)

•Put the image in directly, using HTML. (For that, we’ll need the Text widget. Go ahead and drag one of those into your sidebar.

In the Text widget, you work directly with the HTML. But you’ve

all seen the code to display an image before:

<img src="http://www.paigemorgan.net/wp-content/uploads/2012/04/cropped-

IMG_0773.jpg" class="headerimage" width="1102" height="350" alt="" />

For start with <img src=“” and alt= ””/> -- add in your File URL, and

some alt text.

Of course, you need to resize it. Look back at the resized image you created in PicResize -- take the dimensions, and add them

in using width=”” and height=””

(Each time, you’ll need to save the widget, and reload your

page to see the results).

But let’s imagine you’re in a hurry, and don’t want to deal with pixel

math.

Delete just one of the dimensions -- either height or width.

For whichever one you keep, change the pixel measurement to a

percentage. (height=“20%”)

(Save & Reload!)

Congrats! You’ve started the work of

tinkering and customizing your site!

(And you’ve learned three different methods of dealing

with image sizes.)

However...

...this workshop is about getting more

comfortable working with WordPress, and with code.

To do that...

...we’re going to break a website!

(Don’t worry, we’re not going to break your website. We’ll break Paige’s instead.)

And then we’re going to fix it.

What does “break” mean, in this context?• Change something about the way that the text

displays on the page.

• Change something about the way that images display on a page; or what images display.

• Add something to the page that shouldn’t be there.

• Alter the HTML code for the page.There is no perfection in breaking -- you simply

have to try new things for the sake of experiment.

Make a change, load the page, and see what you’ve managed.