Winter 2013: Session 2 A CRASH COURSE IN CODING

1. Winter 2013: Session 2 • A CRASH COURSE IN CODING

2. 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.

3. 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.

4. WordPress can be a good sandbox as you experiment with digital humanities content management. 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.

5. 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.) • open source • DIY • iterative development • auto-didacticism • public scholarship & peer review • collaboration • dissemination • process & product • failure as valuable • ad hoc • ration

6. 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.

7. Don’t worry -- DH scholarship isn’t only content management(as many digital humanists have explained to their tenure committees).

8. 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.

9. 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.

10. 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

11. 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

12. 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.

13. 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.

14. 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/

15. 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...)

16. 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=0http://www.cnn.com/SHOWBIZ/

17. 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.

18. In addition to Pages and Posts, your blog will have a header area, and may have one or more smaller sidebars or footers.

19. 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.

21. 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.

22. 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/etc.(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

23. 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.)

24. 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.

25. However, one of the most important aspects of this screen is right here: In the language of WYSIWYG, Visual shows what you get:

26. 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;”

27. Images work the same way. <a href="http://dmdhdemo.files.wordpress.com/2013/02/ittybittykitty1.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.

28. 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 331What you’re seeing is the size of the image in pixels.A pixel is the basic visual unit of the internet.

29. The Media section of your blog is also important -- it allows you to upload files (images, PDFs, Word docs, etc.) directly through the browser.

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

31. In the Edit screen, you can see all the information: the file type, dimensions, and even the File URL (where the file is 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.

32. 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.

33. To start, head over to http://www.dmdh.org.There’s an image waiting for you, titled Seattle Skyline.jpgGo ahead and download it to your computer.

34. 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.

35. 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.

36. 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.

37. Well, that didn’t work. The image is too big.

38. You can resize images using fancy/expensive tools like PhotoShop -- but you can also use sites like http://www.picresize.com

39. Sites like PicResize are useful, because they allow you to tinker easily with the image size. You can even customize by pixel -- and PicResize will automatically do the proportion math for you.

40. One general principle: it’s better to make images smaller, rather than larger. This tiny kitten, enlarged, becomes pixelated: you can see the pixels.

41. 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.)

42. PicResize is one way ofdealing with an image that’s the wrong size.

43. 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.

44. 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.

45. 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).

46. 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!)

47. 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...

48. ...this workshop is about getting more comfortable working with WordPress, and with code.To do that...

49. ...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.

50. 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.