Review: Introducing HTML5

affiliate link to Amazon

Introducing HTML5 (2nd Edition) by Bruce Lawson and Remy Sharp is from New Riders (2012). The book includes everything from descriptions of new structural elements (like article, nav, and aside) to canvas, data storage, enabling offline, and drag and drop. It even includes some things that are not actually part of HTML5, like geolocation. There are many example codes, lots of JavaScripts and help with using new APIs to make your pages do all sorts of HTML5 tricks and magic.

In my opinion, the core audience for this book is the back-end developer who wants to write the scripts and do the programming to make HTML5 perform services that were not available before. The front-end developers will find the first few chapters helpful, but may be less interested in all the programming details in later chapters. (Front-end folks might consider HTML5 for Web Designers instead.)

The authors get a resounding +1 for including accessibility information about everything they discuss.

Here’s a look at the full table of contents.

  1. Main Structure: basics about doctypes, structural elements and CSS
  2. Text: new structural elements and how to use them properly, the document outline, WAI-ARIA and more
  3. Forms: new input types, new attributes, validation
  4. Video and Audio
  5. Canvas
  6. Data Storage: web storage, Web SQL, and more
  7. Offline: the cache manifest, applicationCache and more
  8. Drag and Drop: how to, interoperability
  9. Geolocation: API methods
  10. Messaging and Workers: chat, messaging, threading
  11. Real Time: web sockets, server-sent events
  12. Polyfilling: Patching Old Browsers to Support HTML5 Today: feature detection, various scripts, Modernizr examples

The book is written with a sense of humor and warmth that keep even the most tedious information from becoming boring. This is done in large part with humorous examples and illustrations. But beyond writing style, these guys really know what they are doing, and they want you to be able to do it, too. If you are looking for help with anything listed above in the book’s contents, you’ll find it here. The code examples from the book are all available for download, making the many snippets of HTML, CSS and JavaScript shown even more easy to use.

Definitely recommended.

Summary: Excellent guide for the developer who wants to put HTML5 to use right now.

A review by Virginia DeBolt of Introducting HTML 5 (rating: 5 stars)

Useful Links: Video Games and girls, WordPress for Android, iPad bloggers

Are video games good for girls? The things she points out probably also apply to boys, but this is an interesting report.

I’m jealous of WordPress 2.0 for Android. I don’t blog from my iPhone, but I do use the WordPress app for iOS to check comments when I’m away from my computer. Look at what the Android app can do. Here’s hoping these improvements are coming to iOS soon.

Does anyone us an iPad to blog? I looked at it early on as a potential blogging tool and it didn’t seem up to the chore. Is anyone using an iPad to blog successfully?

Women Take Note: BlogHerEntrepreneurs ’12

BlogHer announced the second annual BlogHerEntrepreneurs Conference, focused on business, entrepreneurism and technology, which will take place on March 22-23, 2012 in Santa Clara, CA.

There are only 100 seats available for this conference, so register quickly.

If you’re a woman who has a big idea that involves technology, the Internet or social media, we have an opportunity for you. With the leadership of 50 pioneering entrepreneurs, technologists and business leaders, BlogHer is hosting a special event for women who want to start something.
Lisa Stone

Here are some instructions from the announcement by Elisa Camahort Page:

Who Should Attend and What You Need to Make the Most of It

Here’s what you need to attend:

(1) An idea. Or a fledgling business. Or both.
We invite you to attend if you have a big idea and need encouragement to build it into a business. We invite you if you already have your seed or angel funding and want to take it to the next level. We invite you if you want to lead an innovative new program or initiative at your company. Are you anywhere in between? Great — join us!

(2) Do your homework.
This year we will be focused on providing more informational resources as we get closer to the event, a path to follow to make the most of the conference. Generate talking points about your idea, concept or business. Bring a full-blown pitch deck or business plan, if you have one. And if you don’t have one, you have until March 22, and we’ll be there to help.

(3) Invite men from venture capital, technology, business and entrepreneurship
One final point, so as to be explicit: Men are absolutely and enthusiastically invited to attend this event. Lisa, Jory and I have met dozens of men in the industry — from VCs to engineers — who openly seek our advice on how and where to recruit women for their start-ups and businesses, and who contribute thoughtfully to the discussion about women in tech. So yes indeed, we invite men interested in funding, hiring or advancing entrepreneurial women to please join us. And if you know women who would benefit from this event, contact Kristin Auger about sponsoring a table of them!

You can see the agenda in the event announcement.

Go. Get help and inspiration. Start something.

Facebook Timeline is on the way

Early users of Facebook Timeline are offering mixed reviews, as we see with everything new that comes along. I’m seeing remarks like, “It’s only for stalkers,” or “I love the new look.”

I think I fall into the second category. You aren’t providing any information that wasn’t already there. If you’ve been paying attention to your privacy settings all along, there are no surprises about what is shown in the timeline. Only people who were originally able to see something you posted will be able to see it on your timeline.

There may be an invitation right now to create check out the new timeline feature, or a green button on the lower right of the page that lets you go to the timeline. Once you construct and publish your timeline, you can’t go back. But that hardly matters, because everyone’s information is going to be in a timeline by next week.

Once you are in your profile’s timeline mode, you add a “cover” image. This requires a big image. I picked a photo of some old derelict cars I saw in a ghost town in the mountains of Western New Mexico. Old. Derelict. Okay, I find it funny.

facebook timeline cover

I like the new layout–a lot. It’s much more attractive than the previous profiles were. One of the features is a timeline which you can click to move around in your information.

timeline

The timeline also lets you edit your information. You can remove things by finding them in your timeline. (Or use the Activity Log to quickly find and remove stuff you regret.) You can add things from before Facebook even existed. You can feature items if you want to really make them stand out.

You have options about what the timeline shows.

timeline options

When your friends take some action–such as uploading a photo, it’s going to roll by in a sort of news ticker.

Your status updates are turned into “Stories” which can be highlighted to tell a complete tale of some event in your life. They are displayed in a two column layout with a timeline slider in the gutter between the columns.

Facebook Stories

If you are someone who was annoyed by seeing what people were listening to on Spotify, you’re now going to see a lot more like that with the new social apps. You can hook Facebook up to all kinds of apps–from a GPS view of your morning run to a list of what you’ve watched on Netflix to a record of what you read at The New York Times.

For more information about getting your Timeline in the condition you want it, see the Facebook Timeline Help page or the About Timeline page.

Useful links: Alt, POUR, Layout

The Hidden Nuggets of WCAG 2: When Not to Use Alt Text. Excellent article. Would be a great resource to send students to read.

Constructing a POUR Website is from WebAIM.

Six CSS Layout Features to Look Forward To. This is material from a talk on how the CSS Working Group is attempting to solve the concerns of Web developers with multiple proposals.

Media Query Fact Sheet

Something to keep at hand so you can check on all the possibilities and see the measurements.

Device Features that can be used in media queries

  • width (min and max)
  •  height (min and max)
  •  device-width
  •  device-height
  •  orientation
  •  aspect-ratio
  •  device-aspect-ratio
  •  color
  •  color-index
  •  monochrome
  •  resolution
  •  scan
  •  grid

These can be chained together with the word ‘and’

@media screen and (min-device-width: 480px) and (orientation: landscape) {
. . .
}

Device Resolutions

  • 320px for small screens in portrait mode
  • 480 px for small screens in landscape mode
  • 600 px smaller tablets like the Kindle and Nook
  • 768 px for tablets like the iPad in portrait mode
  • 1024 px for tablets like the iPad in landscape mode
  • 1200 px for wide screen displays

Useful Links: CSS Layouts, Sliders, 2011

The Future of CSS Layouts. It’s coming and it’s gonna be good. Check out this exciting post by Peter Gasston at .net.

What you need to know about the HTML5 Slider Element. There is no slider element in HTML5, the post is talking about the new input type ‘range’ combined with the JQuery function called ‘slider.’ If you can get past that, the rest of the post is useful.

What I Learned About the Web in 2011. Of all the things I’ve read and reread and loved at A List Apart over the years, I love this post more than anything I’ve ever seen there. It’s like a big, beautiful Christmas present to the web design community.