WebDesign Archives - Page 26 of 34

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.

Useful Links: jQuery, Women in Tech, DMCA and jailbreaking

jQuery: A Designer’s Perspective at scriptjunkie is a good introduction to jQuery.

Unless you’ve been living under a rock lately, you probably know that Jailbreaking iPhone apps is now legal. Well, it’s legal according to the DMCA. Apple says it voids your warranty, however.

Women in Technology is a thoughtful essay at Stubbornella (Nicole Sullivan’s blog). The essay itself is important reading, but as always with posts like this one, the comments reveal even more.

Stubbornella mentioned that women need role models. Well maybe we need some consciousness raising in the media by women who kick butt. Salt comes to mind. Or how about this flick?

But there are armed guards everywhere.

We’re already dead.

Should women just get out there and kick butt?

(I have no idea what this movie is about. Maybe it’s just an excuse to show scantily clad women. But they are kicking butt.)

Looking to hire?

Etsy is hiring. Like any web-based company, they are advertising the job openings on the Internet.

Maybe you aren’t familiar with Etsy. You need to know that it is a marketplace for handmade and vintage items–a community of creative people. That’s important to keep in mind. Etsy is advertising for coders and programmers and database gurus who fit in with the company mindset. A creative, handmade, vintage mindset. A code as craft mindset. Here’s the ad that announced they were hiring.

I could watch that video 20 times, I find it is so hilarious. All the sacred cows of web standards, and programming best practices—really, anything Internet related—turned on its head in a creative twist that is just plain funny.

It’s a brilliant bit of job posting because it tells you about the company and the kind of people you’d be working with. It links to this staid listing of all the jobs available at Etsy.

Which one would tempt you to apply? The perfect-for-you job title, say “Interaction/User Interface Designer,” or the video?

A lot of companies need Interaction/User Interface Designers and workers like that these days. And a job is a job, right? Etsy found a way to make their jobs look like more fun than any other job. Brilliant, I say again.

(Posted in a different form at BlogHer.)

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?

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.

Optimize your writing for users with impaired vision

Users with screen reader devices will scan and skim your web page in a manner somewhat similar to the way a visual user will. Screen readers can be programmed to read only headings, subheadings and links. When something of interest pops out from this “skimming” process, the user can stop and have all the information in a particular section of the page read completely.

The first step is to write meaningful headings and subheadings that contain important words and phrases. The first paragraph under each heading should clarify what the section of the page content is about.

Next, make sure that link text is informative. Link text should give users some idea what they will find when they click. Link text like “here” or “click here” is not informative. The link text in this example is descriptive and informative: Google is trying a similar thing with HTML5 Rocks. It’s obvious that a click will take the user to HTML5 Rocks.

Finally, write alt text that gives an alternative description of the content or function of an image. For example, in book reviews such as the recent one of Mobile Design and Development, the alt text for the image of the book cover is “get Mobile Design and Development at Amazon.” While it does not say that the image is a book cover, it does tell the user what happens if the image is clicked–functional alt text.

These tips are best practice for all users. Optimizing your writing for users who are surfing your page with their ears will improve your page for users who are scanning the page visually, too. Like many practices that have been adopted as accessibility requirements, good writing benefits all users, not just those with visual impairments.

Useful links: Usability, graphic design, HTML5 Rocks

The You-Don’t-Matter Website is a look at usability and accessibility for some large brands.

Graphic Design Theory: 50 Resources and Articles is from noupe.

Apple’s attempt to wow the world with HTML5 flopped. Now Google is trying a similar thing with HTML5 Rocks. There are tutorials, Chrome developer tools, and the promise that the material in the playground and presentations is open source. Let’s see if Google can do it right.