Web Teacher » HTML

Review: HTML5 and CSS3 Visual QuickStart Guide

vdebolt — Wed, 11 Jan 2012 21:31:54 +0000

HTML5 & CSS3 Visual QuickStart Guide (7th Edition)by Elizabeth Castro and Bruce Hyslop is the latest edition in the Visual QuickStart Guide series about HTML and CSS. A couple of changes are immediately noticeable about the book. Elizabeth Castro now has a co-author after producing 6 editions of this book on her own. And the book reflects a change in design Peachpit is putting into all its VQS books with full color and a generally brighter appearance.

While Peachpit can take credit for the new look, I can see the influence of Bruce Hyslop here, too. Having read, dog-eared, and dreamed my way through the first six editions, I see a change in these books that I think Hyslop must be responsible for. There is a different tone, the sidebars are lengthier and pull in a considerable amount of information about HTML5 and CSS3 from blogs and articles by a number of web design experts.

There are 21 chapters taking over 500 pages. Some of the chapters are fairly massive. “Video, Audio, and Other Multimedia” gets a 38 page treatment, “Tables” on merits only 5 pages. The chapter “Defining Selectors” is particularly good. Here’s the full table of contents.

Web Page Building Blocks
Working with Web Page Files
Basic HTML Structure
Text
Images
Links
CSS Building Blocks
Working with Style Sheets
Defining Selectors
Formatting Text with Styles
Layout with Styles
Style Sheets for Mobile to Desktop
Working with Web Fonts
Enhancements with CSS3
Lists
Forms
Video, Audio and Other Multimedia
Tables
Working with Scripts
Testing and Debugging Web Pages
Publishing Your Pages on the Web

If your budget only allows for one HTML5 and CSS3 book, this book is a terrific way to invest your money. I’ve reviewed HTML5 for Web Designers and Introducing HTML5 on this blog. I think this book is better than either of those books. That’s not saying the two books mentioned are not excellent books, because they are. I’ve read both of those books carefully and I still learned new and helpful things from HTML5 and CSS3. Plus, the VQS style is inherently easy to use with each topic detailed in small step-by-step bits. It’s so easy to find the one thing you need to know at any given moment with a VQS book.

Another advantage of this book over the others I mentioned is that it can get a beginner going but it also offers a lot of good information for the experienced HTML and CSS wonk. If you’re teaching either of these topics, this book is classroom gold.

Definitely recommended.

Summary: Complete information about HTML5 and CSS3.

A review by Virginia DeBolt of HTML5 and CSS3 (rating: 5 stars)

Liz Castro: Outstanding Woman in Technology

vdebolt — Wed, 04 Jan 2012 21:00:25 +0000

Elizabeth (Liz) Castro is a tech writer who has been influential in the growth of web design and the Internet since the 1990′s. Her website is elizabethcastro.com. Her blog is Pigs Gourds and Wikis. She’s a mentor of mine, and a source of information for literally millions of readers who want to know something about topics like HTML. I’ve used her books both to learn and to teach others for years.

She agreed to answer a few questions when I approached her recently. Let me introduce you to this outstanding woman in technology and Catalan enthusiast, who is also full of fascinating information about sociolinguistics.

Image Credit: Liz Castro

Q: I recently received a copy of the 7th edition of your Peachpit Press Visual Quickstart Guide to HTML and CSS. This one is titled “HTML5 and CSS3.” It occurred to me that you have owned the topic of HTML—since before CSS even came along. The book has been a best seller since the first edition in 1996. You’ve educated several generations of web designers in the intricacies of HTML and CSS – an amazing accomplishment. How did you first get started with Peachpit Press and this topic?

A: Totally by accident, just as with other really important parts of my life. I had just finished working on an update to The Macintosh Bible when I got a phone call, coincidentally on my birthday, from Ted Nace, who at the time was the publisher at Peachpit Press. After we finished talking about the update, he was about to hang up, when I said, “Ted, I really want to do a book by myself.” He rattled off a list of topics that they were looking to do books about, and HTML was the last one on the list. I didn’t know very much about it but was intrigued by the possibilities of the very new world wide web. I remember that during the summer of 1995, when I wrote the first edition, I thought it would be impossible to fill an entire book with what seemed like a very rudimentary markup language. It’s come a long way since then.

Q: You wrote books about the Netscape browser, XML, Perl and CGI, Blogger, iPhoto, and EPUB. How did your education and background prepare you to write about all these technical topics?

A: That’s an interesting question. I majored in “Spanish Studies” in college, an individualized course of study that I designed which included Spanish, Catalan, and Basque, literature, history, and sociolinguistics. Not exactly what you think might prepare oneself for a career in technical writing. But then I moved to Barcelona—partly to study bilingualism and partly to vaguely follow my Spanish roots—and happened to get a job in a computer company who wanted to localize their homegrown OCR software for the American market. In addition to that project, I also managed the localization of the software that they distributed in Spain—programs like PageMaker (1.2!) and Farallon’s Timbuktu. I then began a small publishing and localization firm whose first projects were the translation and publication of The Macintosh Bible and the first localization into Spanish of Adobe Photoshop.

While I never did any of the translating, since I’m not a native Spanish speaker, I did most of the editing and a fair bit of the layout and production work. Those two projects were instrumental in forming my technical writing voice. I admired and was inspired by Arthur Naiman’s fierce advocacy for Mac users in “The Macintosh Bible”, and also developed a skill for finding and appreciating tips and tricks. From the Photoshop manuals, I learned to explain techniques, but also how to decide what needed to be discussed and in what order. It frustrated me that they explained how to use features without explaining why you would want to.

Together, those two projects helped me make my own writing more practical, more specific, and more focused on the reader.

Q: What is it about technical topics, the Internet, and the growing influence of online sites and social media that keeps you interested? Where do you think we are headed in terms of technology?

A: I am an idealist at heart. I believe in democracy and that people are generally good. What inspires me about the Internet is how it continues to level the playing field and helps people to have a voice. In the early days of my HTML book, I encouraged readers to send me links to their pages. This was before Google, when Yahoo was a directory of almost countable websites.

I remember feeling so inspired by all those people and all the interesting things they had to say. It really gave me confidence in the world and the human race.

The internet is the ultimate equalizer. Twitter, my favorite tool of late, simply furthers that process. Follow your mentors online and engage them in conversation, and mostly, they answer. It is the antidote to starry-eyed idealization of celebrities and VIPs. We are all very important.

Q: You’ve done quite a lot of translating from Catalan to English. You have a publishing house called Catalonia Press, and you report on Catalan news in English using the Internet. Can you expand on that interest?

Catalonia Image Credit: Liz Castro

A: It’s kind of a long story. My great-grandparents left southern Spain at the turn of the century to work in the sugar plantations in Hawaii. My grandparents grew up in the US in an extended Spanish speaking community. My Dad spoke only Spanish until he entered school. I remember when I was little, the only thing that I wanted to do when I grew up was speak Spanish. And although I started at the Wharton School studying entrepreneurial management, I eventually ended up majoring in what I loved: Spanish. But most American universities focus on Latin American literature instead of language and history which interest me much more, so, during my “junior year abroad” at UC Berkeley, I signed up for a class in Catalan. I didn’t know what it was at the time. Serendipity again.

My professor was a Brazilian guy who had us read “Avui”, the Catalan newspaper, and sing both nursery rhymes and the Catalan anthem. More importantly, he also explained Catalan linguistic policy. This was in 1985 only two years after the approval of the Law of Linguistic Normalization, which was the Catalan autonomous government’s principal tool for promoting the use of Catalan which had been pretty brutally suppressed during 40 years of the Franco dictatorship. I was 19 years old and wanted to right injustices. And the topic of language pulled me in. What circumstances made people who spoke two languages choose one or the other? How was it affected by politics?

And then I happened upon the Summer Catalan University while traveling in Perpignan (French Catalonia) with a friend. I ended up attending during the summer of 1986 and I’ll never forget how it felt. First, because I was an American who spoke Catalan (albeit very simply, with a fair bit of Spanish and French mixed in), they treated me like a rockstar. I was interviewed on the radio and in the local press. People came up to me in classes and introduced themselves. They followed me around and asked me all sorts of questions. But second, because when they talked about themselves, I realized that they had something I didn’t: a feeling of belonging, of nation, of identity.

I know now that I’m very American, that I do belong, that I do have a place, here, in the US. I love my own country, with all its warts. But back then, I hadn’t thought about it very much. I wasn’t anti-american, so much as oblivious. But these Catalans, boy they knew who they were. And again, I was drawn in. I wanted to know more. When I finished my contract in the US (teaching Spanish at a private school in New Jersey), I decided to move to Barcelona.

I arrived in the fall of 1987 with just enough money to stay for two months. I ended up living there for six years. I never thought I’d leave. I felt more at home there than I had ever felt anywhere else. My Catalan got so good that sometimes I felt like a spy with people who didn’t know I was American. I ran a publishing company, and mostly we translated our books into Spanish, since the Catalan market, though significant, was just too small for our already Macintosh-focused books.

The strange thing was that I never felt like I was living in Spain. When the folks at my new job found out that I knew a little bit of Catalan, they never spoke Spanish to me again. Literally. Lunches (two-hours with 10-12 geeks and lots of wine) were amazing intensives in language and linguistics. I watched, amazed, as people switched from Catalan to Spanish when addressing the few monolingual Spanish speakers, and then back to Catalan when their eye fell back on a Catalan speaker. Most of the people that I knew preferred to speak in Catalan but amiably switched when their interlocutor spoke in Spanish.

But my studies in sociolinguistics had taught me that bilingualism is a tenuous, unstable situation. Minority languages tend to disappear. Catalan is sort of a special case as it has traditionally been the language of the middle class and has a certain prestige, with a thousand-year old history and a canon of literature. I found that my computer friends spoke Catalan while waiters, taxi drivers and rich Catalan tennis players and aristocrats tended toward Spanish. I learned the rule that once two people start a relationship in one language, they almost never switch, even when they speak to everyone else around them in the other language. I learned that people would talk to me for a half an hour in Catalan, and then switch to Spanish when they found out I was American, even when I insisted that my Spanish had gotten pretty rusty. I found it fascinating.

And then there’s the politics. It turns out that Spain does not cherish its Catalan autonomous community, but instead, regularly vilifies, demeans, and belittles it. The press is rife with anti-Catalan sentiment from the rest of Spain, and there are frequent boycotts. Everyone has their own anecdote. One of my writers, Matthew Tree, tells a great story about a journalist berated by a taxi driver in Madrid for speaking Catalan, since “we all speak Spanish here”, but when told it is Italian (though it’s not), completely backs off. I still remember on a trip to Madrid how a hotelier who had been perfectly friendly, upon finding that my friend and I were from Barcelona, sighed and frowned and assured us that she didn’t think we were as bad as the rest of them.

To add insult to injury, Catalans pay some 10% more in taxes than they receive back in infrastructure and investment from the Spanish State. Catalans are expected (and generally willing) to exhibit solidarity with poorer parts of Spain, but then look on flabbergasted as the central government decides to build the high-speed rail line between Madrid and Seville instead of between the principal ports of Barcelona and Valencia and the French border, or how there are brand new schools, hospitals, freeways, and airports in rural, less developed areas of southern and central Spain, while Catalan schools age, hospitals are overcrowded, commuters pay exorbitant tolls on most highways, and international airlines are restricted from flying directly to Barcelona.

Since most international media in Spain is in Madrid, Catalonia rarely gets a chance to tell its side of the story. So as an American who loves language and justice too, I quickly turned into a strong advocate for Catalan and Catalonia. Last year, my family spent the entire year there, and I found that my skills with EPUB could help spread the word about a country that I love. I published two books in English about Catalonia: “What Catalans Want: Could Catalonia become Europe’s Next State?”, by Toni Strubell and Lluís Brunet, and “Barcelona, Catalonia: A View from the Inside” by long-time London-born Barcelona resident, Matthew Tree. And I have a number of new projects in the works.

I was just in Barcelona a few weeks ago to receive a prize from a very prestigious cultural organization, Òmnium Cultural, for publishing books about Catalonia outside of Catalonia, and I was struck by just how much at home I feel there, how much I love being there, how much a part of me it has become. My grandparents and great-grandparents had no idea what Catalonia was—it’s funny how they led me there.

That was probably a longer answer that you were bargaining for!

Image Credit: Liz Castro

Q: The Pigs part of your blog name must refer to the fact that you’re a “small-scale farmer.” What does that mean?

A: It means that my family and I live on a small farm and try to raise a fair amount of our own food. We have raised pigs, cows, rabbits, sheep, and chickens, though these days we have just the latter two. But it also refers to this idea of self-reliance and independence. And also to the simple fact that homegrown food tastes a lot better—and is often safer and more healthful—than what you buy at the store.

Q: What other interests do you have? How do you like to spend your free time?

A: Lately I’m totally consumed with ebooks and Catalonia! Still, when I get a little time, I love to make things: out of gourds, out of yarn, out of cloth. It’s not so different from crafting things out of bits and words. I also love to spend time with my family—lately we’re in a Settlers of Catan phase.

Q: Is there something I didn’t ask about that you want to mention? Something about women in tech or your writing process or your favorite recipe or what you think about “The Girl with the Dragon Tattoo?” You’re free to share whatever you want.

A: Thanks, I better get back to work!

[Note: Cross-posted on BlogHer]

Useful links: Adaptive Design, nested figures, Susan Kare

vdebolt — Mon, 28 Nov 2011 15:14:49 +0000

Nice article on Opera Dev by Chris Mills about Adaptive Design with media queries.

Nested Figure Elements on Paciello Blog.

The Sketchbook of Susan Kare: The Artist Who Gave Computing a Human Face. Did you know about Susan Kare? I’d never heard of her before. I certainly think a mention of her contribution to the GUI needs to be included in Introductory courses on history of the Internet and history of computing.

Useful links: top 25 books, edu conferences, blue beanie day, semantics, Think Up

vdebolt — Wed, 16 Nov 2011 14:23:57 +0000

The top 25 books for web developers and designers from .net is a good list to check to see if you’re keeping up with the latest. I noticed that several of the 25 are from A Book Apart. That led me to tweet this:

Is there some sort of brain implant that would directly feed every publication from A Book Apart into my brain?Sun Nov 13 17:26:02 via TweetDeckVirginia DeBolt
vdebolt

Oddly, there were people on Twitter who didn’t see the humor in that and suggested I should read the books. With my eyes. Because I don’t want you to worry about me, you should know that I am reading them. With my eyes.

Conferencepalooza suggests some good conferences for high ed folks. Check it out, there might be a great one there. You do know that SXSW is holding a special pre-conference for EDU this year, don’t you? It’s SXSWEDU.

Get out your blue beanie and join Chris in giving thanks for web standards on Nov. 30, 2011 – Blue Beanie Day. Why should we give thanks, Chris asks? Because the bums lost!

Installment 3 in a round robin of posts about semantics. This one from Paul Irish explains enough about the first two that you can follow even if you haven’t read them. (Why haven’t you read them!)

Think Up is new software that Gina Trapani announced was out of beta yesterday. It does all of what I was wishing Twitter would do plus more with Facebook and Google+. It’s installed or your server or can run from the Amazon cloud for a monthly fee. I think Think Up is going to be big.

Useful Links: Before/After WCAG 2.0, CSS acc, screen reader video, abbr

vdebolt — Thu, 20 Oct 2011 13:44:46 +0000

Before and After Demonstration at the W3C site shows a site before and after WCAG 2.0 principles were applied to it. It’s all annotated so you can see what was done to make the site accessible. Great tool for educators.

Speaking of the W3C, there is now a new community group forming – open to the public – that deals with CSS accessibility issues.

Videos of screen readers using ARIA, updated. Another great resource for educators from zomigi.

Nice time saver from Chris at CSS Tricks. Abbr elements all typed out to copy and paste. Abbr’s for Web Nerd Acronyms. TTC

Guest Post: 7 Things Everyone in Your Organization Should Know

vdebolt — Tue, 27 Sep 2011 12:31:16 +0000

This weekend, I attended the Online News Association Conference in Boston. It was a great gathering of multimedia developers and those concerned with all things digital – quite a fantastic event. I had the opportunity to participate on a panel called “If I Were in Charge, I’d…” Proposals for the panel were solicited before the conference, and mine was one of six selected. The presentation is below, but I wanted to provide a few more details, beyond the eight minutes I had to present. And I wanted to see if there was any feedback or critique. Rob Quigley live blogged the entire session, if you’d like to see the other topics and presenters.

ONA: 7 Things Everyone Should Know

View more presentations from clroyal

Are you in charge? Maybe you’re an editor or a general manager of a newsroom, or perhaps you’re a dean or director of a university organization. Maybe you lead a media company that specializes in PR or Advertising. Do you consider yourself in charge of a digital media organization? And, does everyone in your organization know that they work in a digital media organization?

Does everyone in your organization know what an API is and why that’s important? Do they know what SEO means and what value it brings the organization? Are they familiar with the type of CMS your organization uses and how it works? And do they know some basic concepts like HTML or how to embed a video or widget onto another Web page?

If I were in charge, I’d be making sure everyone associated with the organization – every reporter, columnist, copy editor, photographer, videographer, every faculty member, every associate – I’d even go as far as saying that every person who answers the phone – knows these things and more. This is not the template for a two-hour workshop. This is not a quick fix or a tweak. This is a tectonic shift in the ways that people envision what it is they are expected to know and do and the kind of organization for which they work.

I propose 7 Things Everyone in a Digital Media Organization Should Know:

1. Everyone would know the history and background of the Web.

Why? Because it’s fun to study the history of something. And, it provides a foundation for understanding the future. By learning about the role of the ARPAnet (and later Tim Berners-Lee in Switzerland), the people involved and the culture surrounding the development of the Internet, we begin to see what makes this environment different. We can learn about the origins of hacker and open source culture and why this presents an alternative and a complement to commercialization. Oh, and we’d know that Al Gore didn’t invent the Internet, and that he never actually said he did.

2. Everyone would understand the key terms of digital media.

We must speak the same language in order to collaborate and have a shared understanding. You can’t have the tech folks spewing jargon while the rest of the organization stands around the sidelines and rolls their eyes. We’re not talking about buzzwords and marketing posturing, but things that everyone needs to know, like what an Application Programming Interface (API) is and why you might use one, why your organization should have them and who benefits from them. When we talk about the “cloud,” what do we mean and how is that different than where we’ve been hosting things all along? What is Search Engine Optimization and how does that compare to Social Media Optimization? What do we mean when we use the phrase “data visualization” and what are these platforms (frameworks) of Ruby on Rails and Django? People may not actually perform these functions or use these platforms, but they should have a clue about what they are and what they do.

3. Everyone would know how Google makes money.

Why? Because Google makes a lot of money. And I bet most of your organization has never paid anything to Google to use their multitude of services. Google has a $170B market cap, one of the most successful companies in history. They made the majority of their $29B in revenue in 2010 with advertising – those little ads you see on the sides and the sponsored links on the top of your Google search. But it’s the power of their search algorithm and their ability to provide products to us that are useful and that integrate with our lives, that allows them to continue to learn more and more about us. Knowledge is power, right?

4. Everyone would be able to explain why social media is important.

No, Twitter’s not about what you ate for breakfast. And Facebook’s not just a place to upload photos of your kid’s birthday party. A modern media organization understands that interaction is the key. The technologies known as Web 2.0 drive interaction with the audience that was unheard of in prior eras. They make media a conversation, and those conversations have value. People are gaining an expectation of participation because of their participation on social networks, and they will begin to find media irrelevant that don’t give them something to do, don’t provide a user experience. Get ready for new social platforms to be introduced over time. Google, who is the king of search, is now trying to develop social competencies with Google+. Location-based platforms, reviewer sites, online games… new things are coming out every minute. But you can’t expect people to understand them if they don’t use them. People should be encouraged to try new things. And they should be comfortable with the idea of using social media to develop their own brand or to support that of the organizations with which they work.

5. Everyone would understand how data can tell a story.

That doesn’t mean that everyone will know how to program a data visualization. But everyone should understand that a data visualization is an important element of storytelling, just like text, photos, video, other graphics. The benefit is the interaction, the ways that you develop to integrate the user into the story. There are a million ways to do this, and we are just starting to see brilliant examples of this type of work by organizations like the New York Times, the Guardian, the LA Times, the Texas Tribune, the Associated Press, the Chicago Tribune, ProPublica and more. The example I used in my presentation is the Rent vs. Buy interactive that the New York Times did several years ago, but is still updated on their site. You can read a story about whether or not you should rent or buy a house, but how does that really help someone make their own decision, with their own variables? Everyone needs to understand the power of this type of information and comprehend their role in creating it. How would they propose such a project? Who will they work with? What tools can they use and what resources are out there? This doesn’t mean someone needs to tell them or train them. They need to be focused enough on the importance of it that they are seeking out this information on their own and figuring out ways to integrate it into their own workflow. That’s how the people who are doing this kind of work learned it… by figuring it out themselves.

6. Everyone would know a little HTML (and some CSS for that matter).

Why? Because it’s the language of the Web. If you don’t know the language, you can’t understand the platform. You need to know HTML to maximize your ability to customize the things you do in blog or content management systems. And it is the foundation for more advanced coding, like CSS, Javascript, JQuery and on and on. For the most part, code snippets are available in libraries, so what most people are doing when they work in code is tweaking and customizing, rather than cranking it out from scratch. It’s not that everyone should become a programmer, but it wouldn’t hurt to know a bit about how it all works. Knowing a little html can go a long way in being able to read and tweak code (like reading a foreign language versus writing or speaking it). And, it’s not hard. It’s a markup language, using tags to give meaning to text. It fits in perfectly with a communicator’s skill set. And it’s fun to learn.

7. Everyone would understand the elements of a digital-, and increasingly mobile-, first strategy.

Until this happens, your organization will still be mired in legacy culture. People need to understand how it changes the processes of the newsroom, how their roles change, and most importantly, how it affects the experience of the user. Breaking a story on Twitter is the new “scoop.” The analysis and conversations that happen after is what a news organization does now. Sure, you still produce a paper or newscast, but that’s only a part of what you do. It’s what you share all day long and what others share of the work that you are doing that establishes your brand and your value. You have to re-prioritize that to your organization.

So, as I said above, this isn’t about developing a 2-hour workshop and then going back to the way things have always been. We’re not a weekend behind and then we’re all caught up. Digital media has been developing for the better part of two decades, and it’s time everyone who works in media realizes they work for a digital media organization. We can’t solve the pressing problems of the field with just a few who are in-the-know. We need everyone to be working toward the same goals, gaining knowledge and contributing to the solutions. This will require constant, ongoing and consistent messaging in the following areas:

Leadership must evangelize from the top – it’s not enough to have the tech people at the grass roots take responsibility for training the whole organization. Leadership must communicate that it is everyone’s responsibility to keep up-to-date and learn. It must be a consistent part of all messaging, all meetings, the mission and goals of the organization.
Foster a meetup culture – how can they learn? Well, for one, they can start attending any of the multitude of professional meetups that are probably already happening in their area. These resources exist. There are regular presentations on relevant topics, and you don’t even have to organize them. Just make sure your organization knows that it is an expectation that people participate. And, people should gain a level of comfort in going to groups where they don’t feel like they have a command of the material. Don’t be afraid to be the stupidest person in the room. In fact, that’s preferable. That’s when you learn. And, like a lot of this stuff, it’s fun. You meet people, who may be able to help you professionally, or guess what..? You just might end up with a few new friends. Personally, I view my professional network for its power in assisting my students, but I really enjoy meeting people and learning about these topics, and have made some wonderful contacts in the process. Don’t attend a meetup that you dread or hate. Find one that interests you. They’re out there.
Encourage innovation through exploration – It should be expected that people try new things when they are released. Get on Google+, try Foursquare and Gowalla, sign up for Storify… Guess what? They’re free. Yes, they take time. But if that’s what your job is, then you are using that time wisely. Having a little knowledge about a new platform and some perspective can be quite beneficial when trying to weigh options and quickly make decisions about the usage and relevance of platforms. And you don’t want to ignore new technologies to the point that you suddenly have “unexpected” time on your hands, do you?
Read tech/media publications – This should be a given. We expect people to keep up with news, be on top of things, know their beats, keep up with trends. Well, this is our business now, so shouldn’t we expect people to keep up with it? Know about the key players, tech mergers, new media projects, startups. There are numerous publications, but Wired, Fast Company and a multitude of blogs, like Mashable, 10,000 Words and TechCrunch, are a good start.

I have had success in sharing these concepts with students. My feeling is that they gain an enthusiasm for the future of media by having it presented in this manner. These are opportunities, not annoyances. There are challenges, but everyone needs to be on board so they can be overcome. If I were in charge, I’d find a way to make everyone excited about the future of media.

Are you in charge? What do you think about these points? Does everyone in your organization know these things? Maybe you’re not “in charge.” I’m not either. This was just a hypothetical exercise. But what do you think your organization should do to integrate these concepts, if you think they are valid at all? Let me know if you have any additional items or if you just think I’m full of it. I’ll be interested in any discussion generated.

Some resources I have used:

The Internet: Behind the Web – it’s an old video, and is probably only available on VHS (I have since dubbed it DVD), but it’s a great way to learn about the history of the ARPANet, Internet and Web. It has some abridged content from the longer series Nerds 2.0.1

Download: The True Story of the Internet – this is a great series that covers Browsers, Search, E-Commerce and Social Networking. It brings everything up to date after the above video.

Hacks/Hackers Glossary – a great set of terms and definitions developed by the main Hacks/Hackers organization. Their a meetup group, probably a chapter in your area, that brings journalists and programmers together.

Lynda.com - this is a software and programming training library. It costs money, but on a month-by-month basis, it’s cheaper than purchasing a book to learn a particular language or platform.

South By Southwest – You should attend conferences. ONA is fantastic. Another one that I love is the South By Southwest Interactive Festival. It’s huge and broad, but nothing has influenced my approach to teaching media than my regular attendance, year after year, at this event. And, like a lot of these recommendations, it’s fun. Trust me on this one. Plan to attend SXSW in March.

Guest Post by Cindy Royal. This post was originally published at Cindy’s Take on Tech.

Useful Links: Forms, Zeldman, HTML for Babies

vdebolt — Wed, 31 Aug 2011 12:18:06 +0000

Create Dynamic Form Labels with ARIA is from Yahoo! Accessibility and is pretty clever.

Why not watch a keynote address from Jeffrey Zeldman? This one’s from The Web Comes of Age – DIBI.

HTML for Babies. Yes, it’s real. Mamas, don’t let your babies grow up to be web standards illiterate.

HTML11 labs

vdebolt — Mon, 15 Aug 2011 12:13:24 +0000

In case you hid under a rock all weekend and didn’t see this, you must go look right now.

Introducing HTML11. The future. Today. Be sure to go through the menu of new tags.

I hope you had as much fun learning about the new tags as I did.

The creators of this site are not saying who they are, but I want the thank them for being so creative. Several minutes of sustained giggling = priceless.

The Secret of Building a Table with Dreamweaver

vdebolt — Wed, 13 Jul 2011 14:11:32 +0000

It’s easy peasy to create a table in Dreamweaver. It’s not so easy to create a table in Dreamweaver that sticks to the ideal of separation of content from presentation and uses CSS rather than HTML to determine presentation.

If you want to build a table for your web page that does use best practice rules and will be responsive to every potential situation, there are a lot of things in Dreamweaver that you should not do. I’m going to show you what not to do, explain why, and give you a best practice alternative.

The insert table dialog box

Do not put anything in the table width, border thickness, cell padding, or cell spacing boxes. Do select the appropriate heading type for your table, and do enter a caption and summary if needed.

I added an X to the boxes that you should leave empty. Table width, border thickness, cell padding, and cell spacing options are all used to add HTML presentation to the table. You want to keep the width, border, and padding presentation rules in the CSS. It’s best to use percentage widths for the various table rules rather than pixels. (See Adding borders to data tables with CSS for information about adding border with CSS.)

The Document Window

When you create a table the way I just described, you see something like this in your Dreamweaver document.

Insert the cursor in the first table cell so you can enter text and Tab your way into the next table cell. As you enter text, the table expands to fit the text you’ve entered. Padding for the td cells and other width and spacing rules to make the table more attractive go in the CSS.

It’s possible to drag the borders of the table around in the document window. This is another thing you should not do. As you can see in the image below, when you drag the table borders to resize it, absolute pixel values appear and are written into the HTML. In your stylesheet, use the width property for selectors like table, th, and td to set widths in percentages or ems for your table.

The Properties panel

While you’re entering data in the table, you see table properties in the Properties panel. This is another set of options that you should not touch.

Do not enter pixel values in the width or height boxes. Do not select a background color for the table or for individual table cells. I’ve put an X in the forbidden fields in the image above. All of these options add HTML presentation to the table. You want to set these presentation values in the CSS. The image above shows the Properties panel with the HTML toggle selected. When the CSS toggle is selected, entering values into the width and height boxes also results in values coded into the HTML, not added to the style sheet as you might expect when the CSS toggle is active.

That’s it. Most of what Dreamweaver offers as table controls need to be left alone, and the majority of your work needs to happen in the stylesheet, not in the Document window. You can create a table that will work for all your users on just about any device if you learn what not to touch.

What are you telling students about DOCTYPES?

vdebolt — Tue, 05 Jul 2011 11:35:53 +0000

One of the classes I’ve been teaching at UNM Continuing Ed lately is Beginning Dreamweaver. The school uses Adobe Creative Suite 4 in the lab where I teach. The DOCTYPE options in DW 4 are either transitional or strict in HTML 4/XHTML 1.0.

Outside of the UNM lab, the most recent version of DW on the market is 5.5, which includes the HTML5 DOCTYPE. If the students go out and buy a commercial version of DW, they will get 5.5 and the option to choose HTML5.

Which means, when we look at the options for creating a new page in DW, we have to include HTML5 in the discussion of which DOCTYPE to choose, even though it isn’t there in the school’s DW 4 options.

Back in March, I wrote Syntax Style for HTML 5: Some Best Practice Recommendations. To summarize that article, the syntax style most like what was recommended for HTML was similar to the syntax for HTML 4.01 Strict.

I’ve been telling students two things about DOCTYPES. First, I tell them that it doesn’t really matter which one they pick as long as they pick one, because any one they pick will keep them out of quirks mode. Dreamweaver will correctly write the HTML for what ever they choose. Secondly, I tell them that if they are thinking of using HTML5 in their future work, to choose HTML 4. That instruction always feels oddly retro – go back to an older technology and forget about dealing with the seemingly more modern XHTML.

In my mind, the seemingly more modern XHTML has two drawbacks. First, it’s been abandoned by the W3C and won’t been updated. Second, the syntax for HTML 4 Strict seems a much better choice when working in HTML 5 because there’s no need to talk about XML and trailing slashes in empty elements and other things that don’t apply to HTML5. And HTML 4 Strict syntax rules match up with what was recommended as a best practice for writing under the new anything-goes rules of HTML5.

What DOCTYPE are you telling students to use these days?