Useful links: CSS 3, DW CS5

A couple of preview-type articles on what we can expect to see happening with CSS 3 are fascinating, even if not practical for immediate use. CSS Template Layout Module and The CSS 3 Flexible Box Model.

Introducing Dreamweaver CS 5 at the Adobe site gives you some highlights of the new Dreamweaver features in Creative Suite 5. The article mainly describes changes to working with live views and working to design for CMSes.

Useful Links: Links in PDFs, CSS starter pages, Ning networks

Creating Accessible Links in PDFs from PWS gives “techniques for tagging links correctly to ensure that they are both keyboard operable and usable with a screen reader. It also looks at, amongst other things, how to make URLs more intelligible for screen reader users.”

Dreamweaver CS5 Features Part 1: The All New CSS Starter Pages at Community MX explains what Adobe has done with CS5 starter pages. Some good changes are described with more explanation to come. One thing I’ve wondered about the new Dreamweaver is whether or not there will be an option to use an HTML5 doctype. I’m watching the reports on CS5 for that tidbit of information.

In a move that may affect many educators, Ning has announced that there will be no more free social networking sites from them. Sites that currently exist must pay up or will be removed. Here are some news reports from The Inquisitr and PC World. I personally think this is a radical move that will be greeted with an angry backlash. ReadWriteWeb has a list of alternatives for current Ning sites that educators should check. At BlogHer, you’ll find even more suggestions for replacements for Ning.

Useful links: accessibility mistakes, WAVE in Dreamweaver, countdown to mobile, Gartner predictions, ePub for Web Designers

Common Accessibility Mistakes at Visual Twenty-Eight is a good checklist of things to make sure you aren’t doing.

WAVE Dreamweaver Extension is just out from WebAIM. It’s in beta, and there are some limitations at the moment. Now you can get a WAVE report on your page right in Dreamweaver. Super!

Gartner forecast

The road to 2013: A timeline for newspapers at RJI Mobile Blog talks about Gartner’s forecast that “By 2013, mobile phones will overtake PCs as the most common Web access device worldwide.” Donald Reynolds, the RJI Mobile blogger, says:

This is a killer deadline — within 35 months the whole newspaper industry needs to move its emphasis from the static Web to the mobile Web.  From 17-inch displays to 3-inch displays.  From full keyboard and mouse to one-handed navigation.  And you can’t really wait until the deal is done if you want to be a major player in technology.  If Gartner’s prediction is accurate, newspapers really have just 18-24 months to position themselves as the leading news content provider for mobile platforms.

I look at a statement like that and my educator background kicks in with questions like

  • Are we teaching web design students enough about making mobile-ready content?
  • Are there enough trained developers in the industry who can create an effective mobile site?
  • What should educators be doing with curriculum when faced with trends like this?

The entire set of predictions by Gartner are relevant to educators.  Here are just a few:

  • By 2012, India-centric IT services companies will represent 20 percent of the leading cloud aggregators in the market (through cloud service offerings).
  • By 2014, most IT business cases will include carbon remediation costs.
  • Internet marketing will be regulated by 2015, controlling more than $250 billion in Internet marketing spending worldwide.
  • By 2014, over 3 billion of the world’s adult population will be able to transact electronically via mobile or Internet technology.

The full report from Gartner Predicts 2010 is available from Gartner.

ePub

What Web Designers need to know about ePub from Nimbupani Designs explains what ePub is:

EPUB is a collection of 3 specifications:

  • Open Publication Structure (OPS) 2.0, defines what formats are allowed to be used for the content (e.g. XHTML 1.1 and CSS 2).
  • Open Packaging Format (OPF) 2.0, describes metadata, and structure of the .epub file in XML
  • OEBPS Container Format (OCF) 1., specifies the directory structure of the EPUB ZIP archive.

This looks like an opportunity for a web designer who knows how to create effective document structure and formatting, or as Nimbupani says,

Most e-books today are created by automated tools which are, at best, tag soup generators with no concern for design. My guess is publishers who consistently output great e-book designs would do much better in the marketplace.

What’s hot on eHow

Here are my hottest sellers  on eHow in the past month.

How to Videos & Articles: eHow.com

You can explore all my articles at eHow by starting at my profile page.

Most of what I’ve posted at eHow is in the Internet category, there are a few odd bits that don’t fit into that category.

Best of the Year on Web Teacher

What were the best sellers for Web Teacher this year? Here’s are the greatest hits for 2009.

  1. The runaway favorite was Tip: Styling a fieldset with CSS. This post left the rest of the pack in the dust.
  2. The Best Job in the World: Going Viral came in second with a lot of help from StumbleUpon.
  3. Review: The Best New Features in Dreamweaver CS4 took third place. Thanks Adobe, for releasing new versions with such frequency.
  4. Adapting Dreamweaver CSS layouts to display:table rules
  5. Attribute Selectors in CSS
  6. Tip: What is a Wrapper Div?
  7. WebTeacher Tips This is a page, not a post, but it’s a popular page.
  8. Recommended Books is another popular page, which makes me happy since I devote a lot of energy to book reviews.
  9. Tip: Styling the label element with CSS
  10. Three examples of fieldsets styled with CSS

Three of the top ten posts dealt with fieldsets. The most compelling topic of the year was, ta da, fieldsets!

The optgroup in HTML select forms in Dreamweaver

I recently showed how to use optgroup in HTML select forms. Those instructions were for hand coders. Today’s instructions show you how to make a small select form with optgroups in Dreamweaver. This is what the finished form element looks like in the browser.

browserOptgroup

Here’s how you do it if you use Dreamweaver. The following screen shots are from Dreamweaver CS4, but previous recent versions of Dreamweaver will work in a similar way.

In Dreamweaver, start by selecting the Forms category from the Insert panel. Choose the icon for List/Menu. Fill in the id for the form element and give the menu a Label. Select Attach label tag using ‘for’ attribute. If you don’t see this accessibility window, you need to go into your Preferences and select all the Accessibility options you can to automatically appear when appropriate.

InputTagAccessibilityAttributes

When the form element appears in the document, select it and click List Values in the Properties panel. Add the various labels and values for your select menu. Click OK.

ListValues

Select either Split or Code View to look at the code. At this point, you have the following code.

selectCodeView

I changed the value for name to “fav.” Dreamweaver assigns the value “singers” to both name and id automatically. It’s okay to change the value of name, but be sure that the value of for and the value of id are exactly the same.

Dreamweaver doesn’t have an icon for optgroup in the Form panel. So you have two choices. You can go into Code View and type the optgroup tags in your select element. If you are comfortable doing that, it’s the quickest way to make it happen.

If you don’t like typing in Code View, here are the steps. You still need to see the code. Use Split View. Highlight the three options that are women. (You can see an image of the men’s names highlighted below.) With the women options highlighted, Choose Insert Tag. In the Tag Chooser window, select HTML tags > Forms > optgroup. Click Insert.

insertOptgroup

You will be asked to create a Label for the optgroup. Type Women. Click OK.

tag-editor-optgroup

Repeat the process by highlighting the options for men in the code.

highlightMen

Again, choose Insert Tag. In the Tag Chooser window, select HTML tags > Forms > optgroup. Click Insert. This time, when the Tag Editor for optgroup appears, type “Men” in the form and click OK. The completed select menu looks like this in Code view:

completed-select-menu

You’ve finished inserting the optgroup, so you can click back into Design view and complete your form in Design view.

Useful Links: Multitasking and Media, a persistent Internet, Dreamweaver tip, community building

Nick Bilton on Multitasking and Media is a live-blogged report from (Re)Mixed Messages by Rachel Barenblat from PopTech. Bilton delivered many fascinating gems, which Barenblat captured with quotes like:

What does this mean for newspapers? “We talk about business models,” Bilton says, “but that’s getting ahead of what we really should be talking about — that everything about news is changing.” The devices we access news on are changing. Now we read the news on mobile phones or computers. “I have a different psychological experience with that device, and I’m going to have that same psychological experience with that news, too.”

“The relevance of news is changing.” When Teddy Kennedy died, he says, “that wasn’t news to me.” It didn’t mean anything to Bilton, but to a lot of people it did. “There was a shooting across the street from my house: that was news to me, but not to you, unless you live where I live.” Our concepts of news are changing. By the same token: if someone in my friends network gets in a car accident? That’s news to me. Bilton tells a story about a friend borrowing his cmoputer to check “the news” — meaning Facebook.

“We used to buy newspapers based on the location where we live; now we can get news from anywhere. Our concept of trust is changing. We trust the news media 29 percent and we trust our friends and family 90 percent.”

Bilton created a term “technochondria” in this talk, which @blogdiva quickly pointed out was used incorrectly. See the technochondria tweet and the technophobia tweet from @blogdiva.

Not just media, but education is changing, too. In Newsweek this week, Daniel Lyons wrote The Hype is Right: Apple’s table will reinvent computing. I might add, not just computing, but everything . . .

These devices will play video and music and, of course, display text; they will let you navigate by touching your fingers to the screen; and—this is most important—they will be connected to the Internet at all times. For those of us who carry iPhones, this shift to a persistent Internet has already happened, and it’s really profound. The Internet is no longer a destination, someplace you “go to.” You don’t “get on the Internet.” You’re always on it. It’s just there, like the air you breathe.

You don’t “get on the Internet.” You’re always on it. It’s just there, like the air you breathe. That really resonates with me and sums up a whole lot of how I feel about modern living.

Dreamweaver tip for screen shots may appeal to the Windows users who write material in Dreamweaver. I often write posts in Dreamweaver, particularly if I’m going to include code samples and don’t want to type all those character entities, but I hadn’t thought of pasting the screen grabs directly into DW in this way. Gives you access to the “headless Fireworks” image optimization tools.

How to Build a Community Web Site talks about how the creation of Ottawa Tonight. “I’ve said it before, and I’ll say it again – it’s not about the tools. It’s not about the tools. It’s about people.”