This is a photo slide show built using the default template in Flash. It’s probably too late in the semester to get started with this, but it does provide an alternative to the video slide shows we built with iPhoto earlier in the semester.
This is the project file, if you wanted to get started…
Web accessibility is one of the most important subjects we cover in this class, not just because we want to cater to people with disabilities, but because making our pages more accessible makes them better pages.
My favorite site for learning about how to make your sites more accessible is Mark Pilgrim’s Dive Into Accessibility site. Although it’s a bit dated, the information is still very good and it offers techniques organized by disability, person, design principle, browser and publishing tool.
In addition, A List Apart has been covering user and accessibility issues as long as anyone and usually provides great articles on making your sites user friendly to every one.
The free WebXACT offers a simple way to get a status report on your web sites or any site in the world.
Finally, here are a few good government sites for reviewing the legal standards:
I managed to crash your Webdav installations today along with my G5. I think it’s all working again, but let me know if you have problems.
Let this be a lesson: when you’re told that a file named something already exists and asked if you want to replace it, well, sometimes you just don’t want to replace it without first looking to see if it’s something important.
ObjectY is a javascript script that attempts to solve the problem of the embed tag not being included in the XHTML specification and thus not meeting w3c standards. For example, if you link to YouTube video using the code they include on their pages, your pages will not validate even though the video might play fine. ObjectY solves that problem at least partially and it also simplifies the language of embedding video in your pages.
As the examples show, ObjectY supports MPEG-4 (shown at the top), Flash (swf as well a .flv, something even the flash player doesn’t support), Windows Media (shown above), YouTube and Google Video. It also supports poster images so you can click on each of the images to have them play.
How can you use ObjectY on your web sites?
First of all, you need to upload the video and any poster image you might want to the media folder of your web site. As with all content uploaded to your media folder, the absoute path is:
/students/yourusername/wp-content/media/
If you wanted to point to a video named zee.wmv in your media folder on this server, you could use an absolute uri:
http://jb3623.com/students/yourusername/wp-content/media/zee.wmv
Next, you need to link to the ObjectY Javascript by putting this code in the head section of your header.php files, just above the </head> tag right above the opening body tag:
Then, as the examples show, the rest is pretty simple:
The URI attribute is the path to video you want to play back while the poster attribute allows you to put a poster movie up so the user can get a low-bandwidth preview before clicking the play button.
This is not a perfect solution — warnings are generated when you validate pages — but pages do validate without errors related to embedding media. The technique also seems a little quirky in Firefox 2.0.
We’ll have a short session tonight where we review the status of your semester class projects — including how many more items you need to even get a grade (hint: a lot) — and how you did on the mid-term (hint: not very well).
On Thursday, we’ll begin the first of two sessions on audio and video editing. This means if you have video for your site or if you want to post an audio clip, you’ll need to bring some content to work on.
Even if you don’t have actual video, the easiest way to create a video clip is to bring some still images to class and use the Ken Burns effect in iPhoto to create a slide show. Once you’ve saved your slide show as a Quicktime movie, you can record audio in Garageband and add that audio to your overall clip in iMovie or Quicktime Player.
Once your clip is complete, we’ll post it on your web sites in either Quicktime or Flash formats next Tuesday.
Update: The best way to add white space around your posts and pages is modify the margins of the wrapper id you stylesheets. By default, it includes 3em spaces from the header item and no margins on the bottom, left or right:
div#wrapper {
margin: 3em 0 0 0;
}
Modifying that to read as follows…
div#wrapper {
margin: 3em 3em 0 3em;
}
…will add 3em spaces of margin to the left and right. The 0 measurement applies to the bottom should you want to change that.
The original post, which only fixed the problem on the left side, follows:
In your stylesheet, adding the following code to increase the space between your posts/pages and the left side of the window:
div#content {
margin-left: 1em;
}
That will add 1em of space. Note that there is no space between the number and the value unit.
The subject of tonight’s class is using forms to interact with your users. Here are a couple of fun forms that use javascript:
In case you’ve forgotten, the mid-term exam will be held on Thursday, February 15, 2007 — just a little more than 48 hours from now. To help you prepare, we’ll have a mid-term review tonight along with our previously scheduled lecture on the CSS box model.
As our textbook points out, Cascading Style Sheets (CSS) is the presentation layer and XHTML is the structural layer of web documents. In addition to appendix B of Web Design in a Nutshell, w3schools.com has a great CSS reference.
In case you haven’t noticed yet, there are two sections (Resources and Web Design) on the right sidebar of this site that could be important to your chances of success in this class. You should explore all the links under those sections and feel free to use them as reference materials when working on your sites.
Two sites in particular are near and dear to my heart. CSS Zen Garden is a site with a simple concept: take a single HTML page and use CSS to make it look a nearly a thousand different ways. It’s a perfect example of how the design is separated from content or how the presentation is separated from the structure.
The other site is a ‘zine called A List Apart that’s been around almost since dirt. Over the years, Jeffery Zeldman and his collaborators have helped designers deal with some tricky problems, including prickly CSS problems like liquid layouts and taming lists.
The best way to learn this stuff is by looking at the code and figuring it how to adapt it to your needs. After we cover some CSS basics, we’ll use the Firefox Web Developer Plug-in to experiment with this page to change some style properties.
Web sites are a little bit like houses: the stronger the foundation the longer the house is likely to stand. Today, I copied the theme that we’ll use as the foundation for your web sites. It’s a little ugly right now, but that’s mostly to give you an incentive to add your own images and touch as soon as possible, beginning tonight.
The theme we’re going to use is quite a bit different than those used during previous semesters. It has more layout options, more text and font options, and the ability to add some material to the sidebar and footer via theme options rather than you having to go in and edit raw php code.