Tips, web design book reviews, resources and observations for teaching and learning web development.
CSS3 Selectors: Selectors in the age of JQuery at standardista is a very helpful compendium of selectors and support.
The Ultimate HTML5 Tutorials and Useful Techniques has a whole bucket load of good tutorials listed.
Planning an iPhone app: where to start at Design Festival is a step by step guide to getting started building an app.
In Introducing Adobe Creative Suite 5.5 Product Family, Adobe made some announcements important to educators.
First, they are moving milestone releases such as CS3, CS4, and CS5 to a two year cycle. The in between years will get updates like the just announced CS5.5. Here’s what they are doing to the web suite.
For Web folks: huge updates to HTML5 and Adobe Flash authoring tools, enabling designers and developers to deliver mobile applications on Android, BlackBerry Tablet OS, iOS and other platforms — and create rich browser-based content across screens. All the big HTML5 checkboxes are ticked in Dreamweaver CS5.5: jQuery mobile framework integration for browser-based content, PhoneGap’s in, as well as WebKit engine updates. We’ve also launched Adobe Flash Builder 4.5 Premium and the Flex 4.5 framework now includes mobile support. Now hundreds of millions of mobile devices can be targeted with content and apps, created through our web tools. Remember, Adobe tools support the development of both HTML and Flash content, don’t let crazy headlines make you think otherwise.
Secondly, they announced a subscription plan that means users will always have access to the most up to date version of the software for a monthly subscription fee. The Adobe announcement page does not show specific subscription pricing, but an article I linked to yesterday in a Useful Links post does gave a chart of subscription pricing.
Both these announcements are important to web educators, especially the news that Dreamweaver will come equipped to write HTML5.
Three links I wish I’d had before I printed the list of resources in the syllabus for the accessibility class I’m planning to teach next week.
Accessibility for Web Writers: part 4 sensory characteristics at 4 syllables.
Amp up Accessibility of Your Videos: Add Transcripts at Blog Accessibility.
HTML5, ARIA Roles, and Screen Readers in March 2011 at Accessible Culture is the most current research on how screen readers handle ARIA landmark roles.
There’s a new site called Media Queries that shows examples of sites using responsive design principles.
Targeting HTML5’s Semantic Elements with CSS talks about how the author uses CSS selectors to target various new semantic elements that may exist in numerous places on a single HTML5 page.
Videos about the HTML5 Boilerplate and showing how to use it can be found at Paul Irish’s site. The 15 minute one called Getting Started with HTML5 Boilerplate is the most useful.
The people involved in the WaSP InterACT Curriculum are organizing to do some updates to the free online course materials the curriculum provides to web educators (and self-taught learners). This is part of an ongoing effort to keep the InterACT web standards based curriculum up to date.
In preparing to update the Web Design 1 course to bring in some material about HTML5, I surveyed the members of the WaSP education task force and others involved in InterACT as to what style of syntax we should recommend as a best practice for HTML5.
As you may know, the options for syntax style in HTML5 are wide open. Tags can be upper case, lower case, or camel case. Attribute values can be quoted, or not quoted. Empty elements can have a closing forward slash, or not. Other elements can be closed, or not.
I didn’t want to add modules for HTML5 to the Web Design 1 curriculum that simply said, “Do whatever you feel like in terms of syntax,” although that is pretty much what HTML5 allows. And I didn’t want to write something that was merely “Virginia’s ideas on HTML5 syntax.”
So, the survey of the WaSP education task force members went out. Consensus was reached. Here are the recommendations for HTML5 syntax. This is how we think it should be taught and written.
What we’re advocating as a best practice is using syntax associated with strict doctypes in past iterations of (X)HTML. However, HTML5 is not XHTML, so there’s no need to retain the trailing forward slash on empty elements.
Here’s your chance to add your voice to the mix. Are there any reasons why this style of syntax should not be used as a best practice for HTML5? Can you add anything else that you think is important that hasn’t been included?
You can see the full set of results of the WebAIM Screen Reader User Survey #3. I hope you’ll study them with interest.
I want to highlight a few of their findings here.
ARIA Landmarks
ARIA (Accessible Rich Internet Applications) introduces something called landmarks. These provide quick access to page areas, such as navigation, search, and main content. Which of the following best describes your use of landmarks? Response # of Respondents % of Respondents I didn’t know this functionality existed 342 30.9% I do not use landmarks for navigation 287 25.9% I sometimes use landmarks for navigation 277 25.0% I use landmarks for navigation whenever they are present 161 14.5% My screen reader does not support landmarks 40 3.6% Awareness of landmarks has increased – 42% were unaware of this functionality in October 2009. However, these data continue to show mixed levels of usage.
In spite of that finding, I think its important to teach people how to use ARIA roles, particularly in HTML5. In HTML5, we’re still dealing with levels of support for various new elements, and any help that a front-end developer can add to the code is a good thing.
Other findings important to front-end developers:
HTML5 Tutorials and Techniques that will keep you busy is a big collection of tutorials to get you going with HTML5.
The WHATWG has released HTML5 – Edition for Web Developers that promises plain language and ease of use.
A Showcase of Free Facebook Icons for Designers and Bloggers. Nice icons, if you’re in need.
The Story of Electronics is a video from the people who created The Story of Stuff. What are you doing about the mountain of electronics in your house?