HTML5 Archives - Page 23 of 29

HTML5: the new hgroup element

In HTML5, the new hgroup element serves an interesting purpose. I want to build you an example, starting with the hgroup element and working outwards to show how it could be part of the new article element.

The hgroup element can contain only h1-h6 elements. Here’s an example:

<hgroup> <h1>10 Terrific Tech Blogs by Women</h1> <h2>Code, Gadgets, Issues, and Science</h2> </hgroup>

It isn’t necessary to use an h1/h2 combination. It could be an h2/h3 or h3/h4. It depends on where you’re putting it. The defining attribute of hgroup elements is that the first heading element is what goes into the document outline. The secondary heading is not part of the outline. The secondary headings in the hgroup are meant for taglines, subheads, and other lesser text that relates to the main heading in the hgroup.

HTML5 contains a new header element. The hgroup element can be nested in a header element, like this.

<header> <hgroup> <h1>10 Terrific Tech Blogs by Women</h1> <h2>Code, Gadgets, Issues, and Science</h2> </hgroup> </header>

Keep in mind that the header element can contain other elements such as a nav or a figure, although I don’t have them in the example.

As we keep working outwards from the headings, we can imagine that the header element is part of an article element. That might look like this:

<article> <header> <hgroup> <h1>10 Terrific Tech Blogs by Women</h1> <h2>Code, Gadgets, Issues, and Science</h2> </hgroup> </header> <p>Tech tips, geeky how-tos, thoughtful analysis of issues, news about the latest gadgets, ideas for improving your blog—you’ll find it all in these 10 terrific tech and science blogs. They just happen to be written by women.</p> <p>more content</p> </article>

The article element can also contain a new element called footer. The article footer would contain material relevant to the article—perhaps a date, an author’s URL, or other material.

The now complete article represents a stand-alone piece of content. It has a heading and content and can be lifted of-a-piece to be placed elsewhere or syndicated some way. In a document outline, it would appear with all the content outlined under the top level heading in the hgroup element.

HTML5 and screen readers

It’s been on my mind lately to try to find out how well a screen reader will navigate a page of HTML5. I’m particularly wondering about how hierarchy would make sense if there were to be a series of articles on a page, all with an h1 in a header element.

HTML5, ARIA Roles, and screen readers in May 2010 is a research report based on several screen readers. They are JAWS 11, Window-Eyes 7.11, NVDA 2010.1, and SAToGo 3.0.202. The results are different for each screen reader.

On YouTube, you can see a video of JAWS reading the liferay.com homepage, which has “lots” of HTML5.

Using WAI-ARIA Landmark roles gives screen reader results, mainly about how landmark roles are handled. This article also explains what ARIA landmark roles are and how to start using them. Be sure to read the comments about this article.

On the WebAIM blog, Aaron Anderson is working his way through a series of articles about various aspects of HTML5. The series is dubbed future web accessibility and to date includes a look at semantic elements, video, canvas, and several other HTML5 elements.

Interesting articles, even though they don’t exactly answer my question about multiple h1 elements on a page.

Useful Links: Box-shadow, HTML5 on the job

Cross-browser CSS box-shadows at Opera Dev shows you how to make it work.

Demand for HTML5 Skills on the Rise, Report Says at Web Worker Daily quotes a study showing a 474 percent increase in demand for HTML5 developers at online job posting sites. Are educators working HTML5 into the curriculum? When do you think it’s appropriate to introduce HTML5 to students?

In the mind of Copyblogger there’s a great HTML blog

You know Copyblogger, right? Copyblogger is Brian Clark, the genius writer with a kajillion followers who gives good advice to bloggers about how to get traffic and keep readers coming back.

I was playing a game in my head with some of the Copyblogger headlines, thinking that if people who wrote about HTML and CSS and stuff like web education used his headline techniques, there would be a lot more traffic to web dev blogs.

Here are some examples of how the game goes. Feel free to suggest more.

Copyblogger said: How to Find Thousands More Prospects for Your Business
I said: How to Find Thousands of Web Standards Tips

Copyblogger said: How to Develop an Endless Source of Ideas that Sell
I said: How to Develop an Endless Source of HTML Tutorials that Deliver

Copyblogger said: Want More Readers: Try Expanding Your Internet Universe
I said: Want More Semantic HTML? Try Developing Your List Elements

Copyblogger said: 7 Essential Steps to Creating Your Content Masterpiece
I said: 7 Essential Steps to Optimizing Your CSS

Copyblogger said: The Grateful Dead 4-Step Guide to the Magical Influence of Content Marketing
I said: The Grateful Dead 4-Step Guide to the Magical Influence of Accessible Forms

Copyblogger said: Improve Your Writing Overnight with the Rule of 24: Guaranteed
I said: Improve Your Code Overnight with the Rule of 24: Guaranteed

I need to start playing this game in real life.

Useful links: Hyperlocal news, free websites, HTML5

Patch vs. Media News: One Little Instructive Story is about the AOL hyperlocal news service called Patch. The landscape is shifting under our feet. Pay attention.

I’ve written about a lot of “build a website, free!” sites, especially for eHow. Now there is a company in the field that has found a way to make building a website into a game, with points and rewards. It’s called DevHub. You can get a fast idea of what DevHub is doing in this article by Jason Kincaid. As an educator, I’ve never worried about places that offer free web sites–no serious web developer would be tempted by them, and no instructor would teach students to use them as a best practice. I’m wondering now if making web development into a game like Foursquare or Gowalla may be tempting enough to build some momentum. And if so, what does that mean to web education?

Two posts from Itpastorn about browser “support” and new technology. No browser supports HTML 5 yet. Part 1. The rant. and No browser supports HTML 5 yet. Part 2. Technology. Are demo sites and experiments the same as browser implementation?

Useful links: social media, mobile YouTube, Big Web Show

No, You Can’t Automate Social Media from Techipedia is a thoughtful post about people who are trying to build a social media campaign based on automation.

While the Techipedia article needs no help making its point, there’s a similar piece at Web Worker Daily called 10 Ways to Really Connect Through Social Media that is good.

YouTube Mobile Goes HTML5. Noteworthy in my opinion not because Google’s YouTube effort rivals the iPhone app but because it rivals Adobe Flash software. Watching HTML5 infiltrate the market is so interesting.

The Big Web Show production hosted by Dan Benjamin and Jeffrey Zeldman, is available not just on the web but on iTunes. Dan Benjamin has several other web related shows available from iTunes. If you haven’t looked at what Dan and Jeffrey up to, you should check them out. It’s definitely an educator’s goldmine of a resource. A good starting point is Liz Danzico on Web Education.

10 Terrific Tech Blogs by Women

Tech tips, geeky how-tos, thoughtful analysis of issues, news about the latest gadgets, ideas for improving your blog—you’ll find it all in these 10 terrific tech and science blogs. They just happen to be written by women.

I. Hacker Chick

The Hacker Chick Blog is a beautiful starting point. I say beautiful because the graphics on this blog are stunning: everything from the image representing the hacker chick (software developer Abby Fichtner) to the icons and images used as illustrations are visually outstanding. Hacker Chick writes about designing WordPress themes, agile computing, programming, social media, and business.

In Build Your Startup From the Heart, she said,

The world, it seems, is changing. If you ask Daniel Pink, he’ll say that our “left-brained” aptitudes — logical, analytical skills, the types of things schools reward us for — are no longer sufficient if we want to remain competitive. These are, after all, the very things being automated by computers and outsourced at rates we can’t compete with if we want to pay our mortgages, or, say, eat.

If we truly want to succeed, we need to pull in those right-brained skills that our schools & employers have tried so hard to beat out of us — artistry, empathy, play, and story telling.

You don’t find many programmers who think this way, or who can pull it together the way Hacker Chick does.

II. Pars3c

Elizabeth Howell has her head in the stars with her blog Pars3c. The blog is pronounced “PAR-seck,” and astronomical term that gives you an idea of the topics you’ll find on the blog. This blog is about astronomy, spaceflight, science and telescopes. Big telescopes.

In 500 explosions, 500 reasons to love satellites, Elizabeth said,

I’ve said this before, and I’ll say it again — the greatest thing about space-borne observatories is they have 24-hour darkness to enjoy. This makes it easier to catch fleeting cosmic events, even explosions.

Like that moment last month when NASA’s Swift telescope saw its 500th gamma-ray burst.

III. Blogger Buster

Blogger Buster is for Google Blogger users. It’s written by Amanda Kay. Blogger templates and tutorials are the heart of this blog.

For example, you can learn about 90 Related Posts with Thumbnails for Blogger – New Version by BloggerWidgets

Aneesh of Blogger Widgets has developed a new “Related Posts” script for Blogger which displays thumbnails of images in addition to linked post titles.

In appearance, this Blogger “add-on” is similar to the LinkWithin script. Each section is highlighted in a complementary colour when the mouse hovers over it, and the entire section is clickable, leading to the URL of the “related post” displayed.

IV. Girl Developer

Girl Developer is written by Sara, a software engineer. Her topics range among .net and WAN, tech events, software reviews, and life as a developer. There’s always a dash of style and humor in the mix. Recently she wrote about Meeting Wendy Friedlander, a fellow developer who is undergoing cancer treatment.

Meeting Wendy prompted her to put together a fund-raising dinner:

I put this dinner together because I think it would be wonderful if we could all help Wendy a little as a community. She’s one of our own and it really could be any one of us. We’re having a dinner for Wendy, and if you’re in the NYC area and can make it we’d love to have you. It will be a great time of fellowship with other developers and I’m looking forward to it. If you can’t make the dinner or aren’t from the area there is a paypal link here for donations.

V. Do it Myself Blog

Do it Myself Blog is the work of Glenda Watson Hyatt, the left-thumb blogger—so called because she types only with her left thumb due to her cerebral palsy. Glenda writes about accessibility on the web and in life, about events she attends and speeches she gives with the help of her computer’s voice, about new technology, entrepreneurship, and trying to find an accessible bathroom while at tech events.

Lately Glenda has been searching for the perfect app for her iPad that will help her with chores like making hair appointments and ordering burgers. In The iPad as an Affordable Communicator: A Follow-up Review, she commented

While I was at the mall last Tuesday, i also made a hair appointment. In the old days I would have typed a note before leaving home. Or, I would have asked Darrell to call for an appointment.

Tuesday i pulled out my iPad, typed a message in the Proloquo2Go app and showed it to the receptionist. An appointment was made for the following day.

All is not golden with the Proloquo2Go app, however, as Glenda discovers when she tries to order food.

VI. Apophenia

Apophenia is danah boyd’s blog. This blog deals with big ideas. It focuses on issues: trends, analysis, data about how young people use technology, and topics like privacy.

In “for the lolz”: 4chan is hacking the attention economy , danah explains what 4chan is with a “Newbie Note” before she begins her discussion of the site:

Newbie note: If you have never heard of 4chan, start with the Wikipedia entry and not the website itself. The site tends to offend many adults’ sensibilities. As one of my friends put it, loving LOLcats or rickrolling as outputs is like loving a tasty hamburger; visiting 4chan is like visiting the meat factory. At some point, it’d probably help to visit the meat factory, but that might make you go vegetarian.

danah boyd is quite possibly one the the smartest people on the planet, so running big ideas through her mind and getting to read the results of her thinking on her blog is a true privilege.

VII. The Female Perspective of Computer Science

The Female Perspective of Computer Science is from Gail Carmichael, who is working on a doctorate in Computer Science. Her fields of study include educational entertainment and augmented reality, both of which get discussed on the blog. Other topics include visual computing, games, events, computer science, and women.

Recently she wrote about Getting the Hang of iPhone Development.

I needed to learn how to develop for the iPhone since the projects I want to work on next will be games for the device. This task was somewhat daunting, given that I hadn’t really even used a Mac before, let alone Objective-C or Xcode. Luckily, there are some really great resources out there that you should check out if you are also just getting started.

So far, the most invaluable resource for me has been the Stanford iTunes U lectures on iPhone development. After watching the lectures via iTunes, you can download all the course materials, including slides and assignments.

A free course from Standford so you can learn how to develop for iPhone? Dang, that’s great information!

VIII. Geek Feminism Blog

Geek Feminism Blog has over a dozen writers, mostly women. A few male feminists in the mix is a good thing. The range of topics you find there is as wide and deep as the minds of its many contributors. The frequent linkspam posts are a great source for exploring the blogosphere on topics related to technology and women. Other topics you might find explored there are comics, conferences, gender, open source, programming, star trek, and just about anything else you can think of that interests geeks.

In July 6th is the last day for super early bird rate for Grace Hopper Celebration, Terri tells us,

If you haven’t heard of GHC before, it’s a really amazing conference for women involved in technology (especially geek feminists!). Not only does it tip the usual ratios on their heads (hello, >90% women! And yes, that means men are welcome.) it’s one of very few conferences where I can say that even the most technical talks are interesting and well-presented.

IX. CSS, JavaScript and XHTML Explained and Standardista

CSS, JavaScript and XHTML Explained is by Estele Weyl. The title is self-describing, but doesn’t completely cover the range of what you find there. You might learn about conferences, girl geeks, browser quirks, accessibility and other web development related topics. Estele has another blog called Standardista: CSS3, JavaScript and HTML5 Explained that is similar but devoted to newer technologies such as HTML5. As the technologies move forward, the newer blog may get the most additions.

Estele is great at putting things in an organized matrix to help you quickly see what is what with a topic. For example, in HTML5 Input Attributes & Browser Support, she created a handy table to show which browsers support which of the new HTML5 form elements.

X. MacTips

I saved a great one for last: MacTips, the very helpful guide to Macs, iPhones and iPads from Miraz Jordan. The tips never end at MacTips. For example, Use Safari 5′s Reader for easier reading on the web and How to change app Preferences on an iPhone.

Miraz always has clear directions with informative illustrations and screen shots to guide you through all things Mac.

Cross-posted in slightly different form at BlogHer.