BootCamp Workshop 2: Pointy brackets and you: a practical introduction to web design and XML/TEI
There’s a lot that could be covered in this session, so I’d love feedback about what people would be most interested in. If people want to go more in-depth on any of these, I’m happy to hang around afterward, too. My tentative plan– subject to being thrown out and changed entirely if that’s what people want– is as follows:
- Starting from a fresh install of WordPress, we’ll build a website
- We’ll find and enable useful plugins and reasonable-looking themes.
- We’ll go over the basic “vocabulary” of (x)HTML and CSS.
- Using HTML and CSS, we’ll modify the theme by digging into the source code, and take a peek at what the output of the WordPress “visual editor” actually looks like.
- We’ll extend what we’ve learned about how HTML works and apply it to XML by looking at some examples of TEI
- If there’s time, we’ll look at some of the things you can do with TEI-encoded data using XSLT, and the benefits of TEI markup relative to just putting data up on a webpage
- If people want, we can touch on HTML5 and CSS3, and the things they enable
WordPress vs. Drupal: Drupal is another popular, free, open source content management system. It’s much easier than WordPress for setting up more complex websites that reuse data in various ways and places, but it can be overkill for a simple site with basic pages and a blog. This page has a few guidelines for when WordPress is the right CMS, and when you should install Drupal instead.
Introduction to HTML: a little dated (its suggestions about using the <font> tag are better accomplished through classes and CSS) but it has quick and readable descriptions of the majority of the most commonly-used elements
- Advanced Twitter Profile Widget – Twitter integration
- Google Analyticator – Google Analytics integration
- Lightbox 2 – nifty zoom special effects on images
- Photo Dropper – search for and add Creative Commons licensed photos from Flcikr
- TinyMCE Advanced – more elaborate Word-style editor
When you download the plugin, what you’re downloading is a .zip file. Double-click to extract it. The result is a folder with the same name as the zip file. You’ll want to drag that entire folder into the “plugins” folder on your server, see below.
SFTP client (cross-platform): http://filezilla-project.org/
Connect to the server using the bar towards the top:
- Host: depends on where your site is located. If using commercial hosting, it’s often the domain name
- Username: provided by your hosting service; if hosted by your university, probably your university ID
- Password: password associated with your user name
- Port: 22
When you’re in the WordPress folder, double-click to open the “wp-content” folder, then drag and drop the entire folder for your plugin intp the “plugins” folder.
Log into the site (yoursite.com/wp-admin) using whatever credentials have admin privileges. In the left menu, click “Plugins”. Scroll through the list and click “Activate” on each plugin you want to activate.
In the left menu, click “Settings” (at the bottom of the list). Almost all the plugins with configuration options have them available in that list.
Configuring Photo Dropper
You can align the image by default by going to “Insert Before” and adding:
<div class=ccimage>, then going to “Insert After” and adding:
Then, in the left-hand menu, go to “Appearance”, then “Editor”. By default, it’ll put you into the CSS sheet for the theme. Scroll down to the bottom, and add this code:
This will make the image and credit tag hover on the right.
While you’re there, you can also add:
Go to “Settings” on the left, then “Permalinks”. This will define how your blog post URLs will look. You can choose from the provided options, or make up your own using the guidelines. For /blog/2010/11/19/[whatever the page title is], use
Create a static front page
To create the page where your blog posts will live: click “Pages” in the left menu, click “Add new” (towards the top). Give it a title– but don’t put anything in there. Edit the “Permalink” to whatever URL you want to give it, then “Publish” (right side).
To create your front page: repeat the same steps to create a new page, and fill it with content.
Go to “Settings” (left menu), then “Reading”.
Select: “A static page”
Set your front page with content to “front page”, and blank page for your blog posts to “post page”
Setting up menus
Go to “Appearance”, then “Menus”. Create a new menu. On the left side, a little bit down, you’ll see “Pages”. Check the pages you want to appear in the menu. Then, you can drag-and-drop rearrange them.
Make sure the menu you’ve created is selected under “Primary navigation” under “Theme locations” (upper left).
Setting up widgets
Go to “Appearance”, then “Widgets”. Drag and drop widgets into/out of the different widget areas. When a widget is in a widget area, click on the arrow-down on the right to configure it.
The number of widget areas, and where they’re located, depend on the theme you’re using.
*You usually should put quotes around the attribute value:
<div class="ccimage">, but it makes WordPress spaz out in this context. Try putting the quotes in– it won’t align the image properly. If you right-click on the published page, and Ctrl + F search for ccimage, you’ll see that what’s showing up in the source code isn’t
<div class="ccimage">— there’s a lot of additional jibberish. If you get rid of the quotes in the Photo Dropper settings page, it works.