Useful Links: ITT Video Lectures, Get a Job, HTML5

IIT Video Lectures Available for All on YouTube. “The Indian Institute of Science (IISc) and IITs, the premier engineering colleges of India, have earlier joined hands to produce the world’s largest repository of technical video lectures and web-based courses geared towards science and engineering students.” I have not looked at any of these video lectures, it looks worth checking out.

How to Get a Job at a Startup After College Graduation might be a good read for currently enrolled students.

HTML5 Boilerplate offers itself as a “badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.” I found it via this post, 20 Snippets You Should be Using from HTML5 Boilerplate, which makes a lot more useful sense than the HTML5 Boilerplate site itself does.

Now Available! InterACT with Web Standards: A Holistic Approach to Web Design

InterACT with Web Standards coverInterACT with Web Standards: a Holistic Approach to Web Design is available today.

This announcement is a BIG DEAL.

This book puts everything you need to teach a class in web design or development with web standards into your hands. The book is easy to use in connection with InterACT’s 17 courses in 6 learning tracks making it the perfect tool and resource for teaching or learning contemporary web design best practices.

If you are a student who wants to learn about building a web site with web standards, this book will lead you there.

For educators, your semester will be a snap to plan with this book. It’s all right there for you.

The book is published by New Riders (2010). There are 10 authors. The major contributor being Chris Mills, with additional expertise from Erin Anderson, Virginia DeBolt, Derek Featherstone, Lars Gunther, Denise Jacobs, Leslie-Jensen-Inman, Christopher Schmitt, Glenda Sims and Aarron Walter. I’m really proud to have been a small part of making the book a reality, because I think the book is going to be very important to students and teachers who are looking for the a reliable resource for web design best practices.

In addition to the writers, a number of other people worked to bring this book to life. They include Aarron Walter as project manager, Patrick Lauke as technical editor, Jeff Riley as development editor, Leslie Jensen-Inman as creative director and Jessi Taylor as book and site designer.

Many kudos go to Leslie Jensen-Inman and Jessi Taylor. When you see this book and hold it in your hands you will realize what a work of art it is from a design and typography point of view. It’s a beautiful book.

Take a look at the table of contents:

  1. InterACT
  2. Tools
  3. Learning on the Web
  4. Internet Fundamentals
  5. Writing for the Web
  6. Information Architecture Intro
  7. Site Planning
  8. Content Analysis
  9. Content Strategy
  10. HTML Intro
  11. CSS Intro
  12. <head>
  13. Headings and Paragraphs
  14. Whitespace
  15. Links
  16. Images
  17. Lists
  18. Tables
  19. Forms
  20. Floats
  21. Positioning
  22. Accessibility Intro
  23. Accessibility Helps
  24. Accessibility Testing
  25. Bringing it All Together
  26. Index

The InterACT with Web Standards book site has everything you need to know. There, you’ll find links to purchase the book, links to code examples from the book, links to bonus content, and links to the sample project. The site has links to information about InterACT, OWEA, and the Web Standards Project. You can take a peek inside the book, read some reviews, grab links to all the resources cited in the book, and MUCH MORE.

Buy now and take advantage of this limited time offer tweeted by @waspinteract.

InterACT With Web Standards, the first book from The Web Standards Project, is out. Save 35% on it with code INTERACT. http://cot.ag/9RS4rEMon May 17 16:00:20 via CoTweet

Designing with Structural Thinking

In the old days, many of us learned to make web pages by first thinking about the “look” and what images, fonts, color schemes, and graphic design elements we would use to achieve it. We launched Photoshop or Fireworks and played with the look until we knew precisely (down to the pixel) what the page would look like. Once we had that plan, we began trying to make HTML create a pixel perfect rendering of the design.

If you want your HTML page to be web standards compliant and accessible you need to back off from thinking about “the look” first and begin your process by thinking about the semantic meaning and structure of the content your page will hold.

The look doesn’t matter

Before you faint and fall out of your chair over that statement, let me explain. A well-structured HTML page can look like absolutely anything. The CSS Zen Garden revolutionized web design by proving that a page of HTML can be made to look like absolutely anything. The CSS Zen Garden helped us finally get it: there is power in CSS that can be used to create any presentation whatsoever out of a simple page of HTML.

HTML is not just for the computer monitor anymore. That wonderful look you created in Photoshop or Fireworks might not work at all on a cell phone, or an aural screen reader. But a well-structured HTML page can go anywhere, work on any internet capable device, and be styled in a manner appropriate to the device with a CSS stylesheet.

Start Your Thinking

The starting point is structural. Some writers call it semantic. What those terms mean is that you need to think of your content as blocks of related meaning, or more simply, as content blocks. Think about the purpose your various content blocks will serve. Then design a semantic HTML structure that supports the meaning and purpose of your content.

If you sat down and planned out the structural bits and pieces you wanted on a web page, you might come up with a list like this.

  1. heading with logo and site name
  2. main page content
  3. global site navigation
  4. subsection navigation
  5. search form
  6. utility area with shopping cart and check out
  7. footer with legal stuff

The generic element used to provide structural context to a page of HTML is the div element. (That’s assuming you aren’t experimenting with HTML5, which has elements fitting many of these structures built in.) Using the div element with assigned ids for the structural parts of the page, your major structural content blocks could be:

<div id="header"></div>
<div id="content"></div>
<div id="globalnav"></div>
<div id="subnav"></div>
<div id="search"></div>
<div id="shop"></div>
<div id="footer"></div>

It isn’t a layout; it’s a structure. It’s the organization of information into content blocks. Once you understand what your structure needs to be, adding the appropriate content in the appropriate divisions of the page becomes automatic.

A div can contain anything, even another div. Your major content blocks will contain the HTML elements you need to create your page–headings, paragraphs, images, forms, lists, and so on.

By thinking first in terms of content, you now have structural HTML elements that can be positioned and styled in any place on the page and in any way you want. Each of those content blocks in your HTML can be individually placed on the page, and assigned colors, fonts, margins, backgrounds, padding, or alignment rules.

This information was rewritten from an earlier much longer article published at the Wise-Women.org site called The Early Bird Catches the CSS: Planning Structural HTML.

Site Testing Checklist

It’s wise to test your site as you’re building it. Check your pages for accessibility, for validity, for appearance and function as you go along. Don’t wait until you’re finished to think about things like valid code and accessibility.

Even when you do those things as a normal part of your process, you still need to perform a number of tests after the files are uploaded to a live server. Here’s a brief checklist of things you need to test when your site goes live.

  • Validate HTML and CSS
  • Run accessibility checks
  • Check every function and script
  • Check spelling and grammar
  • Check page appearance in a variety of browsers
  • Evaluate the site with CSS disabled
  • Evaluate search engine friendliness

    Semantic HTML, or why Chris Mills is my guru

    Chris David Mills The WaSP Interact Curriculum group of volunteer workers are working on a book, to be published by New Riders. Among the many folks working on this book are Chris Mills, from Opera, and myself. Chris has put a few chapters up on the publishers FTP site where we all turn in our chapters. I’ve been peeking at Chris’ work.

    This sounds like I’m being naughty, but actually, I need to see everyone else’s chapters. That’s because my chapter is to be a final project chapter to culminate the book, and I need to know what’s come before in order to suggest a final project.

    In one of his chapters, Chris talks about semantic HTML. The phrase he used for it was “self-describing.” I think this is the most brilliant turn of phrase I’ve ever heard. Chris is my wordsmithing guru. From his penchant for British spelling to his drumsticks, he’s every bit my hero.

    If you are marking up content with semantic HTML, the HTML itself describes for you what the content is. It’s a paragraph, it’s a list, it’s a blockquote, it’s a heading, it’s a citation, it’s emphasized. You can trust this to be what you are reading, because it’s marked up with the HTML to describe it as exactly what it is.

    Self describing. So simple yet so complete.

    The best ideas always are.

    An experiment with e-books

    It’s an experiment to see if people will pay a couple of dollars to get a printable compilation of the material they could get on a blog free. I’m trying out the idea with two new e-books from First 50 Words. That blog consists of a daily writing prompt and a response to the prompt from me and from any of the blog’s readers who choose to participate. Both e-books are available at vdebolt.com. One  e-book is a list of the prompts, the other is the prompts with my first 50 (or so) words on the topic.

    With over 950 writing prompts on my First 50 Words blog, having a list of them seems to me like a real benefit for people in search of writing prompts. We’ll see if the people agree with me.

    I created the e-books using BlogBooker. BlogBooker is free and created a 338 page PDF file with 971 posts from WordPress in just a few minutes. The results aren’t beautiful, but the content is there. If BlogBooker had an option to save the blog posts in Word so that a few styles could be applied to the headings and such before the Word doc was converted to a PDF, the results could be more aesthetically pleasing.

    Review: The Backchannel: How Audiences are Using Twitter and Social Media and Changing Presentations Forever


    get this book at amazon.com

    A review by Web Teacher of
    The Backchannel: How Audiences are Using Twitter and Social Media and Changing Presentations Forever

    (rating: 4 stars)

    The Backchannel: How Audiences are Using Twitter and Social Media and Changing Presentations Forever by Cliff Atkinson is from New Riders (2010). Cliff Atkinson is telling stories. He takes real people, real presentations, and weaves them into an instruction manual for how to deal with the way presentations are changing because of the backchannel.

    He tells stories about presentations by Chris Brogan, Olivia Mitchell, Jared Spool, Sacha Chua, Sarah Lacy, Pam Slim, and many others. He uses these stories to illustrate what’s happening in the backchannel and how various people have handled the changes. You may have even been in attendance at some of the presentations he talks about. If not, you may have followed stories about them on Twitter or in blogs. If you go to presentations of any kind, you’ve probably seen the backchannel in action or been a particpant in the backchannel.

    Atkinson defines the backchannel.

    A backchannel is a line of communication created by people in an audience to connect with others inside or outside the room, with or without the knowledge of the speaker at the front of the room.

    The backchannel can either enhance the exchange with the audience or become—at the least—a distraction, or—at its worst—an explosion of negativity. This book is all about how to make the backchannel a productive enhancement that will connect presenters with audiences in long-lasting forms of communication extending far beyond the limits of an hour’s presentation.

    The book describes how audiences are changing.

    • Audiences don’t need to get information from presenters on a stage. They can find the information for themselves elsewhere.
    • Audiences have higher expectations. They want information they won’t get elsewhere.
    • Audiences want more participation.
    • Audiences either leave or publicly complain if a presentation if it isn’t what they wanted or expected.

    The key chapter in the book is “Preparing for the Backchannel.” Atkinson gives concrete ideas for learning the new presenting skills needed, planning the presentation to be backchannel ready, and managing the backchannel before, during and after the presentation. Another important chapter is “Making Your Ideas Twitter-Friendly,” This chapter tells how to boil your message down to four essential, Twitter-sized points, how to present and expand those four points, while working with the backchannel. Other chapters talk about taking Twitter breaks during a presentation and dealing with an unruly backchannel.

    In the conclusion, Atkinson says,

    For a very long time, the world has centered on presenters. But now, the world is re-centering around audience members. Putting someone on a pedestal—or a lectern—has always come at a cost, because to make someone higher is to make someone lesser.

    The backchannel dismantles the pedestal, and gives everyone equal access to the same information. As the power balance is leveled, the skill set of presenters fundamentally changes, and shifts more toward gifts of navigation, facilitation, and inspiration.

    Summary: Presenters everywhere need to read this book.

    Technorati Tags: ,