<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Web Teacher &#187; JavaScript</title>
	<atom:link href="http://www.webteacher.ws/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.webteacher.ws</link>
	<description>Tips, web design book reviews, resources and observations for teaching and learning web development.</description>
	<lastBuildDate>Tue, 07 Feb 2012 14:27:16 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Useful Links: CSS3 Cursors, Learn to Code, HTML5 in WordPress, ARIA</title>
		<link>http://www.webteacher.ws/2012/01/16/useful-links-css3-cursors-learn-to-code-html5-in-wordpress-aria/</link>
		<comments>http://www.webteacher.ws/2012/01/16/useful-links-css3-cursors-learn-to-code-html5-in-wordpress-aria/#comments</comments>
		<pubDate>Mon, 16 Jan 2012 13:49:44 +0000</pubDate>
		<dc:creator>vdebolt</dc:creator>
				<category><![CDATA[accessibility]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[InterAct]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[UsefulLinks]]></category>
		<category><![CDATA[web-education]]></category>

		<guid isPermaLink="false">http://www.webteacher.ws/?p=7554</guid>
		<description><![CDATA[Introducing the New CSS3 Cursor Styles is at Sitepoint. Learn to Code is an new site that aspires to become a brilliant educational tool by teaching users to code using interactive and social tools. Congratulations to this new venture and wishes for much success in teaching learners to code. The Rise of HTML5 in WordPress [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.sitepoint.com/css3-cursor-styles/">Introducing the New CSS3 Cursor Styles</a> is at Sitepoint.</p>
<p><a href="http://www.codecademy.com/#!/exercises/0">Learn to Code</a> is an new site that aspires to become a brilliant educational tool by teaching users to code using interactive and social tools. Congratulations to this new venture and wishes for much success in teaching learners to code.</p>
<p><a href="http://wp.tutsplus.com/articles/the-rise-of-html5-in-wordpress/">The Rise of HTML5 in WordPress</a> lists several WordPress themes that offer HTML5. This is a nice resource to use with my article <a href="http://www.webteacher.ws/2011/12/27/should-your-blog-use-responsive-web-design/">Should Your Blog Use Responsive Web Design?</a></p>
<p><a href="http://simplyaccessible.com/article/break-the-rules/">Knowing When to Break the Rules</a> from Derek Featherstone talks about validation and accessibility and ARIA.</p>
<hr />
<p><small>© vdebolt for <a href="http://www.webteacher.ws">Web Teacher</a>, 2012. |
<a href="http://www.webteacher.ws/2012/01/16/useful-links-css3-cursors-learn-to-code-html5-in-wordpress-aria/">Permalink</a> |
<a href="http://www.webteacher.ws/2012/01/16/useful-links-css3-cursors-learn-to-code-html5-in-wordpress-aria/#comments">No comment</a> |

]]></content:encoded>
			<wfw:commentRss>http://www.webteacher.ws/2012/01/16/useful-links-css3-cursors-learn-to-code-html5-in-wordpress-aria/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Guest Post: 7 Things Everyone in Your Organization Should Know</title>
		<link>http://www.webteacher.ws/2011/09/27/guest-post-7-things-everyone-in-your-organization-should-know/</link>
		<comments>http://www.webteacher.ws/2011/09/27/guest-post-7-things-everyone-in-your-organization-should-know/#comments</comments>
		<pubDate>Tue, 27 Sep 2011 12:31:16 +0000</pubDate>
		<dc:creator>vdebolt</dc:creator>
				<category><![CDATA[browsers]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[mobiles]]></category>
		<category><![CDATA[teaching tips]]></category>
		<category><![CDATA[web-education]]></category>
		<category><![CDATA[WebDesign]]></category>
		<category><![CDATA[WebFoundation]]></category>
		<category><![CDATA[WebStandards]]></category>
		<category><![CDATA[WebTeacherTips]]></category>

		<guid isPermaLink="false">http://www.webteacher.ws/?p=7056</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.webteacher.ws/2008/08/31/oldies-but-goodies-giveaway/1291-revision-4/" rel="attachment wp-att-1310"><img class="alignleft size-medium wp-image-1310" title="3553186249_ffa81d0392" src="http://tech.cindyroyal.net/wp-content/uploads/2011/09/3553186249_ffa81d0392-300x217.jpg" alt="" width="232" height="166" /></a>This weekend, I attended the <a href="http://ona11.journalists.org/" target="_blank">Online News Association Conference</a> 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 <a href="http://ona11.journalists.org/sessions/if-i-were-in-charge-id-_____/" target="_blank">“If I Were in Charge, I’d…”</a> 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 <a href="http://robquig.tumblr.com/post/10610827095/from-ona-if-i-were-in-charge-i-would" target="_blank">live blogged the entire session</a>, if you’d like to see the other topics and presenters.</p>
<div id="__ss_9216231" style="width: 425px;">
<p><strong style="display: block; margin: 12px 0 4px;"><span class="Apple-style-span" style="font-weight: normal;"><strong style="display: block; margin: 12px 0 4px;"><a title="ONA: 7 Things Everyone Should Know" href="http://www.slideshare.net/clroyal/ona-7-things-everyone-should-know" target="_blank">ONA: 7 Things Everyone Should Know</a></strong></span></strong></p>
<div id="__ss_9216231" style="width: 425px;">
<p><iframe src="http://www.slideshare.net/slideshow/embed_code/9216231" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="425" height="355"></iframe></p>
<div style="padding: 5px 0 12px;">View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/clroyal" target="_blank">clroyal</a></div>
</div>
</div>
<p>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?</p>
<p>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?</p>
<p>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.</p>
<h3><strong> I propose 7 Things Everyone in a Digital Media Organization Should Know:</strong></h3>
<h3><a href="http://www.webteacher.ws/?attachment_id=1311" rel="attachment wp-att-1311"><img class="alignright size-full wp-image-1311" title="gore" src="http://tech.cindyroyal.net/wp-content/uploads/2011/09/gore.jpg" alt="" width="230" height="161" /></a>1. Everyone would know the history and background of the Web.</h3>
<p>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 <a href="http://metaphorical.wordpress.com/2007/02/20/how-a-journalist-invented-that-al-gore-invented-the-internet/" target="_blank">Al Gore didn’t invent the Internet</a>, and that he never actually said he did.</p>
<h3>2. Everyone would understand the key terms of digital media.</h3>
<p>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.</p>
<h3>3. Everyone would know how Google makes money.</h3>
<p>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?</p>
<h3><a href="http://www.webteacher.ws/2008/09/09/useful-links-29/1311-revision/" rel="attachment wp-att-1312"><img class="alignleft size-medium wp-image-1312" title="lolcat-i-can-has-tweets" src="http://tech.cindyroyal.net/wp-content/uploads/2011/09/lolcat-i-can-has-tweets-300x225.jpg" alt="" width="238" height="178" /></a>4. Everyone would be able to explain why social media is important.</h3>
<p>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 href="http://www.ojr.org/ojr/people/croyal/200905/1723/" target="_blank">a user experience</a>. 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.</p>
<h3>5. Everyone would understand how data can tell a story.</h3>
<p>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.</p>
<h3><a href="http://www.webteacher.ws/?attachment_id=1313" rel="attachment wp-att-1313"><img class="alignright size-medium wp-image-1313" title="css_ninja" src="http://tech.cindyroyal.net/wp-content/uploads/2011/09/css_ninja-300x299.jpg" alt="" width="193" height="192" /></a>6. Everyone would know a little HTML (and some CSS for that matter).</h3>
<p>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.</p>
<h3>7. Everyone would understand the elements of a digital-, and increasingly mobile-, first strategy.</h3>
<p>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.</p>
<p>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:</p>
<ul>
<li>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.</li>
<li>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.</li>
<li>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?</li>
<li>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.</li>
</ul>
<p>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.</p>
<p>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.</p>
<p><strong>Some resources I have used:</strong></p>
<p><a href="http://www.amazon.com/Internet-Behind-Web-Modern-Marvels-VHS/dp/B000050Y51/ref=sr_1_1?ie=UTF8&amp;qid=1317005877&amp;sr=8-1" target="_blank">The Internet: Behind the Web</a> – 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 <a href="http://www.pbs.org/opb/nerds2.0.1/" target="_blank">Nerds 2.0.1</a></p>
<p><a href="http://science.discovery.com/tv/download/download.html" target="_blank">Download: The True Story of the Internet</a> – this is a great series that covers Browsers, Search, E-Commerce and Social Networking. It brings everything up to date after the above video.</p>
<p><a href="http://hackshackers.com/resources/hackshackers-survival-glossary/" target="_blank">Hacks/Hackers Glossary</a> – 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.</p>
<p><a href="http://lynda.com" target="_blank">Lynda.com </a>- 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.</p>
<p><a href=" http://sxsw.com/interactive" target="_blank">South By Southwest</a> – 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.</p>
<p><em>Guest Post by Cindy Royal. This post was originally published at <a href="http://tech.cindyroyal.net/?p=1277">Cindy&#8217;s Take on Tech</a>.</em></p>
<hr />
<p><small>© vdebolt for <a href="http://www.webteacher.ws">Web Teacher</a>, 2011. |
<a href="http://www.webteacher.ws/2011/09/27/guest-post-7-things-everyone-in-your-organization-should-know/">Permalink</a> |
<a href="http://www.webteacher.ws/2011/09/27/guest-post-7-things-everyone-in-your-organization-should-know/#comments">No comment</a> |

]]></content:encoded>
			<wfw:commentRss>http://www.webteacher.ws/2011/09/27/guest-post-7-things-everyone-in-your-organization-should-know/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Useful links: Accessibility and SEO, creative writing/programming, Edge</title>
		<link>http://www.webteacher.ws/2011/08/03/useful-links-accessibility-and-seo-creative-writingprogramming-edge/</link>
		<comments>http://www.webteacher.ws/2011/08/03/useful-links-accessibility-and-seo-creative-writingprogramming-edge/#comments</comments>
		<pubDate>Wed, 03 Aug 2011 13:24:32 +0000</pubDate>
		<dc:creator>vdebolt</dc:creator>
				<category><![CDATA[accessibility]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[general-education]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[SearchEngines]]></category>
		<category><![CDATA[UsefulLinks]]></category>
		<category><![CDATA[Adobe Edge]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false">http://www.webteacher.ws/?p=6815</guid>
		<description><![CDATA[Jared Smith wrote an excellent WebAIM article talking about how Accessiblity and SEO are moving closer and closer together in their goals and techniques. He talks about a variety of things, including HTML5 and SEO. Look at Jared&#8217;s list of similarities (links are to WebAIM articles): The list of accessibility and SEO practices that are [...]]]></description>
			<content:encoded><![CDATA[<p>Jared Smith wrote an excellent WebAIM article talking about how <a href="http://webaim.org/blog/web-accessibility-and-seo/">Accessiblity and SEO</a> are moving closer and closer together in their goals and techniques. He talks about a variety of things, including HTML5 and SEO. Look at Jared&#8217;s list of similarities (links are to WebAIM articles):</p>
<blockquote><p>The list of accessibility and SEO practices that are closely in alignment include:</p>
<ul>
<li>Using proper <a href="http://webaim.org/techniques/alttext/">alternative text for images</a></li>
<li>Providing a clear and proper <a href="http://webaim.org/techniques/semanticstructure/">heading structure</a> and avoiding empty headings</li>
<li>Providing <a href="http://webaim.org/techniques/hypertext/">descriptive link text</a> (i.e., avoiding “click here”)</li>
<li>Ensuring page titles are descriptive, yet succinct</li>
<li>Not relying on <a href="http://webaim.org/techniques/javascript/">JavaScript</a> for things that don’t need it</li>
<li>Avoiding <a href="http://webaim.org/techniques/keyboard/">mouse dependent interaction</a></li>
<li>Using standard web formats when possible</li>
<li>Providing <a href="http://webaim.org/techniques/captions/">transcripts and captions</a> for video</li>
<li>Identifying the language of pages and page content</li>
<li>Allowing multiple ways of finding content (e.g., <a href="http://webaim.org/techniques/sitetools/">search, a site map, table of contents</a>, clear navigation, etc.)</li>
<li>Using <a href="http://webaim.org/techniques/images/text_graphic">text instead of images</a> when possible</li>
<li>Providing useful links to related and relevant resources</li>
<li>Ensuring URLs are human readable and logical</li>
<li>Presenting a clear and consistent navigation and page structure</li>
<li>Avoiding <a href="http://webaim.org/techniques/css/">CSS</a> and other stylistic markup to present content or meaning</li>
<li>Defining <a href="http://webaim.org/techniques/writing/#acronyms">abbreviations and acronyms</a></li>
</ul>
<p>Of course <strong><em>content is king</em></strong>, in both accessibility and SEO.</p></blockquote>
<p><a href="http://www.readwriteweb.com/hack/2011/07/teaching-creative-writing-with-programming.php">Teaching Creative Writing with Programming</a> at ReadWriteWeb is one of the most creative teaching ideas I&#8217;ve seen in years.</p>
<p><a href="http://mashable.com/2011/08/01/adobe-edge/">Adobe Launches HTML5 Web Animations Tool</a> is the announcement at Mashable. The tool is called <a href="http://labs.adobe.com/technologies/edge/">Edge</a> and is free right now because Adobe wants testers and feedback. The tool uses only HTML5, CSS, and JavaScript. Stephanie Sullivan Rewis tweeted another article about Edge.</p>
<p>&nbsp;</p>
<div id="tweet_98569256660254720" class="bbpBox" style="background: url('http://a3.twimg.com/profile_background_images/12951894/stef_standing_sm.jpg') #ffffff; padding: 20px;">
<p class="bbpTweet" style="background: #fff; padding: 10px 12px 10px 12px; margin: 0; min-height: 48px; color: #000; font-size: 16px !important; line-height: 22px; -moz-border-radius: 5px; -webkit-border-radius: 5px;">Adobe&#8217;s Edge summarized on MacWorld: <a href="http://srewis.me/p79ij4" target="_new">http://srewis.me/p79ij4</a> <a href="http://search.twitter.com/search?q=%23html5" target="_new">#html5</a> <a href="http://search.twitter.com/search?q=%23css3" target="_new">#css3</a><span class="timestamp" style="font-size: 12px; display: block;"><a title="Wed Aug 03 01:41:56 " href="http://twitter.com/stefsull/status/98569256660254720">Wed Aug 03 01:41:56 </a> via <a href="http://www.tweetdeck.com" rel="nofollow">TweetDeck</a></span><span class="metadata" style="display: block; width: 100%; clear: both; margin-top: 8px; padding-top: 12px; height: 40px; border-top: 1px solid #e6e6e6;"><span class="author" style="line-height: 19px;"><a href="http://twitter.com/stefsull"><img style="float: left; margin: 0 7px 0 0px; width: 38px; height: 38px;" src="http://a1.twimg.com/profile_images/1372046969/curl_normal.jpg" alt="" /></a><strong><a href="http://twitter.com/stefsull">Stef. Sullivan Rewis</a></strong><br />
stefsull</span></span></p>
</div>
<p>&nbsp;</p>
<hr />
<p><small>© vdebolt for <a href="http://www.webteacher.ws">Web Teacher</a>, 2011. |
<a href="http://www.webteacher.ws/2011/08/03/useful-links-accessibility-and-seo-creative-writingprogramming-edge/">Permalink</a> |
<a href="http://www.webteacher.ws/2011/08/03/useful-links-accessibility-and-seo-creative-writingprogramming-edge/#comments">No comment</a> |

]]></content:encoded>
			<wfw:commentRss>http://www.webteacher.ws/2011/08/03/useful-links-accessibility-and-seo-creative-writingprogramming-edge/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Review: HTML5 &amp; CSS3 for the Real World</title>
		<link>http://www.webteacher.ws/2011/07/25/review-html5-css3-for-the-real-world/</link>
		<comments>http://www.webteacher.ws/2011/07/25/review-html5-css3-for-the-real-world/#comments</comments>
		<pubDate>Mon, 25 Jul 2011 12:39:24 +0000</pubDate>
		<dc:creator>vdebolt</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[ProductReview]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Apps]]></category>
		<category><![CDATA[WebDesignBookReview]]></category>
		<category><![CDATA[WebStandards]]></category>

		<guid isPermaLink="false">http://www.webteacher.ws/?p=6786</guid>
		<description><![CDATA[product HTML5 &#38; CSS3 For The Real World, written by Alexis Goldstein, Louis Lazaris and Estelle Weyl, is from Sitepoint (2011). This book takes on several topics that could fill an entire book individually, yet manages to serve each topic well. As you can tell from the title, the book talks about HTML5 and CSS3, [...]]]></description>
			<content:encoded><![CDATA[<div class="hreview"><span class="type" style="display: none;">product</span><br />
<a href="http://www.amazon.com/gp/product/0980846900/ref=as_li_qf_sp_asin_il?ie=UTF8&amp;tag=musicaustincom&amp;linkCode=as2&amp;camp=217145&amp;creative=399373&amp;creativeASIN=0980846900"><img class="photo" title="affiliate link to Amazon.com" src="http://ws.assoc-amazon.com/widgets/q?_encoding=UTF8&amp;Format=_SL160_&amp;ASIN=0980846900&amp;MarketPlace=US&amp;ID=AsinImage&amp;WS=1&amp;tag=musicaustincom&amp;ServiceVersion=20070822" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=musicaustincom&amp;l=as2&amp;o=1&amp;a=0980846900&amp;camp=217145&amp;creative=399373" alt="" width="1" height="1" border="0" /></p>
<div class="description">
<p><a class="fn url" title="affiliate link to Amazon.com" href="http://www.amazon.com/gp/product/0980846900/ref=as_li_qf_sp_asin_tl?ie=UTF8&amp;tag=musicaustincom&amp;linkCode=as2&amp;camp=217145&amp;creative=399373&amp;creativeASIN=0980846900">HTML5 &amp; CSS3 For The Real World</a>, written by Alexis Goldstein, Louis Lazaris and Estelle Weyl, is from Sitepoint (2011). This book takes on several topics that could fill an entire book individually, yet manages to serve each topic well. As you can tell from the title, the book talks about HTML5 and CSS3, but it also goes into complementary JavaScript/API topics like geolocation, offline web apps, web storage, Canvas, SVG, drag and drop.</p>
<div class="description"> The authors specifically point to the growing mobile market, and that focus is reflected in the chapters included in the book. They say,</div>
<blockquote>
<div class="description">Mobile Safari on iOS devices like the iPhone and iPad, Opera Mini and Opera Mobile, as well as the Android operating system&#8217;s web browser all provide strong levels of HTML5 and CSS3 support. New features and technologies supported by some of those browser include CSS3 colors and opacity, the Canvas API, Web Storage, SVG, CSS3 rounded corners, Offline Web Apps, and more.</div>
</blockquote>
<p>The authors made a strong effort to be as up to date as one can possibly be in a hardcopy format. They mentioned very recent changes in HTML5. They knew what future versions of browsers were likely to support, and therefore, what vendor specific prefixes were no longer needed, or soon would not be needed.</p>
<p>The downloadable site adds valuable practical and hands-on experience with the examples in the book that many learners will appreciate. It gives you something concrete to grapple with in addition to the theoretical information behind what&#8217;s going on in a browser or other device. Since I tend to look at everything from an educator&#8217;s point of view, I think the downloadable files would be a real asset if this book was used to teach either HTML5 or CSS3 or both.</p>
<p>It&#8217;s a lot for one book, but it&#8217;s all handled well. Which makes this book a decent choice for someone who wants a single resource to guide them through the new technologies and tools that are available in and around HTML5 and CSS3. I wouldn&#8217;t recommend it for someone who didn&#8217;t already understand HTML and CSS, but it is certainly a valuable book for learning the latest information in those fields.</p>
<p class="summary">Summary: An all-inclusive resource for learning HTML5 and CSS3.</p>
<p><span class="item"><span class="reviewer vcard">A review by <a href="http://www.webteacher.ws/" rel="me">Virginia DeBolt</a></span> of<cite> HTML5 &amp; CSS3 for the Real World </cite>(rating: 5 stars)</span></p>
</div>
</div>
<hr />
<p><small>© vdebolt for <a href="http://www.webteacher.ws">Web Teacher</a>, 2011. |
<a href="http://www.webteacher.ws/2011/07/25/review-html5-css3-for-the-real-world/">Permalink</a> |
<a href="http://www.webteacher.ws/2011/07/25/review-html5-css3-for-the-real-world/#comments">3 comments</a> |

]]></content:encoded>
			<wfw:commentRss>http://www.webteacher.ws/2011/07/25/review-html5-css3-for-the-real-world/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Useful links: CSS selectors, OS X shortcuts, Postel&#8217;s law, Bob&#8217;s Birthday</title>
		<link>http://www.webteacher.ws/2011/02/09/useful-links-css-selectors-os-x-shortcuts-postels-law-bobs-birthday/</link>
		<comments>http://www.webteacher.ws/2011/02/09/useful-links-css-selectors-os-x-shortcuts-postels-law-bobs-birthday/#comments</comments>
		<pubDate>Wed, 09 Feb 2011 14:09:53 +0000</pubDate>
		<dc:creator>vdebolt</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[UsefulLinks]]></category>
		<category><![CDATA[web-education]]></category>
		<category><![CDATA[Bob Marley]]></category>
		<category><![CDATA[Redemption Song]]></category>

		<guid isPermaLink="false">http://www.webteacher.ws/?p=6001</guid>
		<description><![CDATA[Understanding CSS Selectors at Script Junkie. Great explanation of attribute selectors, including how to style with attribute selectors when using ARIA roles and forms. The article also explains how to use more than one attribute selector to create styles. Want to look like a real computer whiz on your Mac? Study A selection of Mac [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg619394.aspx">Understanding CSS Selectors</a> at Script Junkie. Great explanation of attribute selectors, including how to style with attribute selectors when using ARIA roles and forms. The article also explains how to use <em>more than one attribute selector</em> to create styles.</p>
<p>Want to look like a real computer whiz on your Mac? Study <a href="http://www.456bereastreet.com/archive/201102/a_selection_of_mac_os_x_keyboard_shortcuts/">A selection of Mac OS X keyboard shortcuts</a> at 456 Berea Street for some lesser known shortcuts that will speed up your day.</p>
<p>Adactio was talking about <a href="http://adactio.com/journal/4346/">Going Postel</a> today. He said,</p>
<blockquote><p>As long as we use progressive enhancement, the front-end stack of HTML,  CSS, and JavaScript is remarkably resilient. Remove JavaScript and some  behavioural enhancements will no longer function, but everything will  still be addressable and accessible. Remove CSS and your lovely visual  design will evaporate, but your content will still be addressable and  accessible.</p></blockquote>
<p>I had to go look up Postel&#8217;s Law to see what he was referring to. Just in case you&#8217;ve never heard of it either, here&#8217;s how Wikipedia describes it:</p>
<blockquote><p>In computing, the robustness principle is a general design guideline for software:</p>
<p>Be conservative in what you send; be liberal in what you accept.</p>
<p>The principle is also known as Postel&#8217;s Law, after Internet pioneer Jon Postel, who wrote in an early specification of the Transmission Control Protocol that:</p>
<p>TCP implementations should follow a general principle of robustness:  be conservative in what you do, be liberal in what you accept from  others.</p></blockquote>
<p>Today&#8217;s is Bob Marley&#8217;s birthday. And I cannot resist an occasional foray into the off topic land of iconic music. The wonderful organization <a href="http://www.youtube.com/user/playingforchange?blend=1&amp;ob=4">Playing for Change</a> has given us this in celebration of the day.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="512" height="308" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/55s3T7VRQSc?fs=1&amp;hl=en_US" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="512" height="308" src="http://www.youtube.com/v/55s3T7VRQSc?fs=1&amp;hl=en_US" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<hr />
<p><small>© vdebolt for <a href="http://www.webteacher.ws">Web Teacher</a>, 2011. |
<a href="http://www.webteacher.ws/2011/02/09/useful-links-css-selectors-os-x-shortcuts-postels-law-bobs-birthday/">Permalink</a> |
<a href="http://www.webteacher.ws/2011/02/09/useful-links-css-selectors-os-x-shortcuts-postels-law-bobs-birthday/#comments">No comment</a> |

]]></content:encoded>
			<wfw:commentRss>http://www.webteacher.ws/2011/02/09/useful-links-css-selectors-os-x-shortcuts-postels-law-bobs-birthday/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Useful Links: Webcraft, Mint in classrooms, Useful vs. Delicious</title>
		<link>http://www.webteacher.ws/2010/12/20/useful-links-webcraft-mint-in-classrooms-useful-vs-delicious/</link>
		<comments>http://www.webteacher.ws/2010/12/20/useful-links-webcraft-mint-in-classrooms-useful-vs-delicious/#comments</comments>
		<pubDate>Mon, 20 Dec 2010 14:10:44 +0000</pubDate>
		<dc:creator>vdebolt</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[general-education]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[UsefulLinks]]></category>
		<category><![CDATA[web-education]]></category>

		<guid isPermaLink="false">http://www.webteacher.ws/?p=5696</guid>
		<description><![CDATA[Mozilla&#8217;s School of Webcraft is taking names and keeping lists in anticipation of the opening of registration for the new classes on Jan. 8 2011. Learn HTML, CSS, and Javascript. Mint.com is taking a personal finance class into middle schools, according to TechCrunch. I know this isn&#8217;t the first time commercial concerns have developer curriculum [...]]]></description>
			<content:encoded><![CDATA[<p>Mozilla&#8217;s <a href="https://www.drumbeat.org/webcraft">School of Webcraft</a> is taking names and keeping lists in anticipation of the opening of registration for the new classes on Jan. 8 2011. Learn HTML, CSS, and Javascript.</p>
<p>Mint.com is taking a <a href="http://techcrunch.com/2010/12/20/mint-com-hits-the-books-offers-personal-finance-curriculum-to-students">personal finance class into middle schools</a>, according to TechCrunch. I know this isn&#8217;t the first time commercial concerns have developer curriculum materials, but this one caught my eye because Mint has lived its entire existence online.</p>
<p>Useful vs. Delicious. The Useful Links feature of this blog is my own personal Delicious bookmarking method. I know I&#8217;ve written about using <a href="http://www.webteacher.ws/2010/12/03/how-i-use-tumblr-to-help-with-writing/">Tumblr to store bookmarks</a>, but the things I save there are things I don&#8217;t think I&#8217;ll use more than once. When I mention something here in the Useful Links, it is a link I think I may need myself at some point. I tend to remember what I&#8217;ve talked about in the Useful Links, too, and can come to the blog and search for it when I want  it. Maybe cataloging Useful Links is only helpful to me, but I hope readers find them useful too.</p>
<hr />
<p><small>© vdebolt for <a href="http://www.webteacher.ws">Web Teacher</a>, 2010. |
<a href="http://www.webteacher.ws/2010/12/20/useful-links-webcraft-mint-in-classrooms-useful-vs-delicious/">Permalink</a> |
<a href="http://www.webteacher.ws/2010/12/20/useful-links-webcraft-mint-in-classrooms-useful-vs-delicious/#comments">No comment</a> |

]]></content:encoded>
			<wfw:commentRss>http://www.webteacher.ws/2010/12/20/useful-links-webcraft-mint-in-classrooms-useful-vs-delicious/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Useful Links: JavaScript Tips, Map of social networks</title>
		<link>http://www.webteacher.ws/2010/12/11/useful-links-javascript-tips-map-of-social-networks/</link>
		<comments>http://www.webteacher.ws/2010/12/11/useful-links-javascript-tips-map-of-social-networks/#comments</comments>
		<pubDate>Sat, 11 Dec 2010 15:40:25 +0000</pubDate>
		<dc:creator>vdebolt</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[SocialMedia]]></category>

		<guid isPermaLink="false">http://www.webteacher.ws/?p=5635</guid>
		<description><![CDATA[Addy Osmani has lots of good JavaScript and JQuery help on  his blog. In case you didn&#8217;t know yet which social network is conquering the world, here&#8217;s an infographic from Vinco&#8217;s Blog. © vdebolt for Web Teacher, 2010. &#124; Permalink &#124; No comment &#124;]]></description>
			<content:encoded><![CDATA[<p><a href="http://addyosmani.com/blog/">Addy Osmani</a> has lots of good JavaScript and JQuery help on  his blog.</p>
<p>In case you didn&#8217;t know yet which social network is conquering the world, here&#8217;s an infographic from <a href="http://www.vincos.it/world-map-of-social-networks/">Vinco&#8217;s Blog</a>.<br />
<a href="http://www.vincos.it/world-map-of-social-networks/"><img title="World Map of Social Networks" src="http://www.vincos.it/wp-content/uploads/2010/12/WMSN1210-Poster-570.png" border="0" alt="World Map of Social Networks" width="100%" /></a></p>
<hr />
<p><small>© vdebolt for <a href="http://www.webteacher.ws">Web Teacher</a>, 2010. |
<a href="http://www.webteacher.ws/2010/12/11/useful-links-javascript-tips-map-of-social-networks/">Permalink</a> |
<a href="http://www.webteacher.ws/2010/12/11/useful-links-javascript-tips-map-of-social-networks/#comments">No comment</a> |

]]></content:encoded>
			<wfw:commentRss>http://www.webteacher.ws/2010/12/11/useful-links-javascript-tips-map-of-social-networks/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ARIA States 101</title>
		<link>http://www.webteacher.ws/2010/10/15/aria-states-101/</link>
		<comments>http://www.webteacher.ws/2010/10/15/aria-states-101/#comments</comments>
		<pubDate>Fri, 15 Oct 2010 13:31:40 +0000</pubDate>
		<dc:creator>vdebolt</dc:creator>
				<category><![CDATA[accessibility]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[web-education]]></category>
		<category><![CDATA[WebStandards]]></category>
		<category><![CDATA[WebTeacherTips]]></category>

		<guid isPermaLink="false">http://www.webteacher.ws/?p=5340</guid>
		<description><![CDATA[See Also: ARIA Roles 101 As part of the Web Accessibility Initiative (WAI), the Accessible Rich Internet Applications Suite (ARIA), defines a way to make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. [...]]]></description>
			<content:encoded><![CDATA[<p>See Also: <a href="http://www.webteacher.ws/2010/10/14/aria-roles-101/">ARIA Roles 101</a></p>
<p>As part of the Web Accessibility Initiative (WAI), the Accessible  Rich Internet Applications Suite (ARIA), defines a   way to  make Web  content and Web applications more accessible. It is used to improve the  accessibility of dynamic content and advanced user  interface controls  developed with Ajax, HTML, JavaScript, and related  technologies.</p>
<p>ARIA specifies the following:</p>
<blockquote cite="http://www.w3.org/WAI/intro/aria">
<ul>
<li> Roles to describe the type of widget presented, such as “menu,” “treeitem,” “slider,” and “progressmeter”</li>
<li> Roles to describe the structure of the Web page, such as headings, regions, and tables (grids)</li>
<li> Properties to describe the state widgets are in, such as “checked” for a check box, or “haspopup” for a menu.</li>
<li> Properties to define live regions of a page that are likely to get  updates (such as stock quotes), as well as an interruption policy for  those updates—for example, critical updates may be presented in an alert  dialog box, and incidental updates occur within the page</li>
<li> Properties for drag-and-drop that describe drag sources and drop targets</li>
<li> A way to provide keyboard navigation for the Web objects and events, such as those mentioned above</li>
</ul>
</blockquote>
<p>This article will focus on the third item in the list relating to states. ARIA states work now in many browsers and screen readers. When they  don’t, they are harmless. The use of ARIA states goes beyond basic HTML  role definitions and moves into widget and web app development. Perhaps  for this reason, clear information about states is less available.</p>
<p>The W3C definition of <em>state</em>.</p>
<blockquote><p>A state is a dynamic property expressing characteristics of an object that may change in response to user action or automated processes.  States do not affect the essential nature of the object, but represent  data associated with the object or user interaction possibilities.</p></blockquote>
<p>The W3C further defines how states (and properties) are related to ARIA roles, and how states and properties differ.</p>
<blockquote><p>The terms &#8220;states&#8221; and &#8220;properties&#8221; refer to similar features. Both provide specific information about an object, and both form part of the definition of the nature of roles. . . .  states and properties are both treated as aria-prefixed markup attributes.  However, they are maintained conceptually distinct to clarify subtle  differences in their meaning. One major difference is that the values of properties (such as <code>aria-labelledby</code>) are less likely to change throughout the application life-cycle than the values of states (such as <code>aria-checked</code>) which may change frequently due to user interaction.</p></blockquote>
<h3>Global States</h3>
<p>Some states are considered global, meaning they can be applied to any element regardless of whether a role is applied to the element. These states are listed, with links going to the W3C for further information on each state.</p>
<ul>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-busy"><code>aria-busy</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-disabled"><code>aria-disabled</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-grabbed"><code>aria-grabbed</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden"><code>aria-hidden</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid"><code>aria-invalid</code><br />
</a></li>
</ul>
<h3>Widget States</h3>
<p>Attributes of widgets that require user interaction that express state are the following:</p>
<ul>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked"><code>aria-checked</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-disabled"><code>aria-disabled</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded"><code>aria-expanded</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden"><code>aria-hidden</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid"><code>aria-invalid</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed"><code>aria-pressed</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected"><code>aria-selected</code></a></li>
</ul>
<h3>Code Examples</h3>
<p>It is hard at this point in ARIA use/adoption to find examples of ARIA states in use. If you can point me to examples, I&#8217;d like to see them. Few people outside the W3C are trying to explain ARIA states in educational articles like this one and the examples are limited. The topic needs are great deal more explaining, in my opinion.</p>
<p>ARIA states can be used with forms. In this example, <code>aria-required="true"</code> adds information about the <em>state</em> the object is in.  The value &#8220;true&#8221; is an example of numerous values that can be applied to ARIA states such as &#8220;number&#8221; or &#8220;string&#8221;.</p>
<p><code>&lt;label for="firstName"&gt;First name:&lt;/label&gt;<br />
&lt;input id="firstName" type="text" aria-required="true"&gt;</code></p>
<p>Here&#8217;s another:</p>
<p><code>&lt;li role="menuitemcheckbox" aria-checked="true"&gt;Item text&lt;/li&gt;</code></p>
<h3>Resources</h3>
<ul>
<li><a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a></li>
<li><a href="http://www.w3.org/TR/wai-aria/usage">Using WAI-ARIA</a></li>
</ul>
<hr />
<p><small>© vdebolt for <a href="http://www.webteacher.ws">Web Teacher</a>, 2010. |
<a href="http://www.webteacher.ws/2010/10/15/aria-states-101/">Permalink</a> |
<a href="http://www.webteacher.ws/2010/10/15/aria-states-101/#comments">No comment</a> |

]]></content:encoded>
			<wfw:commentRss>http://www.webteacher.ws/2010/10/15/aria-states-101/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ARIA Roles 101</title>
		<link>http://www.webteacher.ws/2010/10/14/aria-roles-101/</link>
		<comments>http://www.webteacher.ws/2010/10/14/aria-roles-101/#comments</comments>
		<pubDate>Thu, 14 Oct 2010 13:49:20 +0000</pubDate>
		<dc:creator>vdebolt</dc:creator>
				<category><![CDATA[accessibility]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web Apps]]></category>
		<category><![CDATA[WebStandards]]></category>
		<category><![CDATA[WebTeacherTips]]></category>

		<guid isPermaLink="false">http://www.webteacher.ws/?p=5327</guid>
		<description><![CDATA[See Also: ARIA States 101 As part of the Web Accessibility Initiative (WAI), the Accessible Rich Internet Applications Suite (ARIA), defines a way to make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. [...]]]></description>
			<content:encoded><![CDATA[<p>See Also: <a href="http://www.webteacher.ws/2010/10/15/aria-states-101/">ARIA States 101</a></p>
<p>As part of the Web Accessibility Initiative (WAI), the Accessible Rich Internet Applications Suite (ARIA), defines a   way to  make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user  interface controls developed with Ajax, HTML, JavaScript, and related  technologies.</p>
<p>ARIA roles work now in many browsers and screen readers. When they don&#8217;t, they are harmless.</p>
<p>ARIA specifies the following:</p>
<blockquote cite="http://www.w3.org/WAI/intro/aria">
<ul>
<li> Roles to describe the type of widget presented, such as &#8220;menu,&#8221; &#8220;treeitem,&#8221; &#8220;slider,&#8221; and &#8220;progressmeter&#8221;</li>
<li> Roles to describe the structure of the Web page, such as headings, regions, and tables (grids)</li>
<li> Properties to describe the state widgets are in, such as &#8220;checked&#8221; for a check box, or &#8220;haspopup&#8221; for a menu.</li>
<li> Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates—for example, critical updates may be presented in an alert dialog box, and incidental updates occur within the page</li>
<li> Properties for drag-and-drop that describe drag sources and drop targets</li>
<li> A way to provide keyboard navigation for the Web objects and events, such as those mentioned above</li>
</ul>
</blockquote>
<p>This article will look at the first two items dealing with ARIA roles.</p>
<h3>How to use roles</h3>
<p>As the list mentioned, roles describe widgets and structure. Structural roles are added to markup as attributes of elements. In XHTML, for example:</p>
<p><code>&lt;div id="header" role="banner"&gt;<br />
&lt;div id="nav"  role="navigation"&gt;</code></p>
<p>or in HTML5</p>
<p><code>&lt;header role="banner"&gt;<br />
&lt;nav role="navigation"&gt;</code></p>
<p>Roles used in ways like the preceding examples are navigation aids for machine readers and for assistive devices such as screen readers.</p>
<p>Roles that describe widgets are added to markup with additional information. The role in the example below identifies the element as a slider, with additional values using the aria prefix prepended to the property name. For example, in a slider widget that allows the user to select the day of the week, the values 1 – 7 indicate the days of the week. The first day of the week, number 1, is Sunday. The <code>aria-valuemin</code> and <code>aria-valuemax</code> restrict the options in the slider to 1 – 7.</p>
<p><code>&lt;div role="slider"<br />
aria-valuenow="1"<br />
aria-valuemin="1" aria-valuemax="7"<br />
aria-valuetext="Sunday"&gt;&lt;/div&gt;<br />
</code></p>
<h3>List of roles</h3>
<p>The <a href="http://www.w3.org/TR/wai-aria/roles">W3C list of roles</a> is quoted below. Links go to further definitions of each role on the W3C site.</p>
<h4>Roles that act as standalone user interface widgets or as part of larger, composite widgets.</h4>
<ul>
<li><a href="http://www.w3.org/TR/wai-aria/roles#alert"><code>alert</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#alertdialog"><code>alertdialog</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#button"><code>button</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#checkbox"><code>checkbox</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#dialog"><code>dialog</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#gridcell"><code>gridcell</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#link"><code>link</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#log"><code>log</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#marquee"><code>marquee</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#menuitem"><code>menuitem</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#menuitemcheckbox"><code>menuitemcheckbox</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#menuitemradio"><code>menuitemradio</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#option"><code>option</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#progressbar"><code>progressbar</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#radio"><code>radio</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#scrollbar"><code>scrollbar</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#slider"><code>slider</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#spinbutton"><code>spinbutton</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#status"><code>status</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#tab"><code>tab</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#tabpanel"><code>tabpanel</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#textbox"><code>textbox</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#timer"><code>timer</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#tooltip"><code>tooltip</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#treeitem"><code>treeitem</code></a></li>
</ul>
<h4>Roles that act as composite user interface widgets. These  roles typically act as containers that manage other, contained widgets.</h4>
<ul>
<li><a href="http://www.w3.org/TR/wai-aria/roles#combobox"><code>combobox</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#grid"><code>grid</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#listbox"><code>listbox</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#menu"><code>menu</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#menubar"><code>menubar</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#radiogroup"><code>radiogroup</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#tablist"><code>tablist</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#tree"><code>tree</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#treegrid"><code>treegrid</code></a></li>
</ul>
<h4>Roles that describe document structures that organize content in a page.</h4>
<ul>
<li><a href="http://www.w3.org/TR/wai-aria/roles#article"><code>article</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#columnheader"><code>columnheader</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#definition"><code>definition</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#directory"><code>directory</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#document"><code>document</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#group"><code>group</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#heading"><code>heading</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#img"><code>img</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#list"><code>list</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#listitem"><code>listitem</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#math"><code>math</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#note"><code>note</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#presentation"><code>presentation</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#row"><code>row</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#rowheader"><code>rowheader</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#separator"><code>separator</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#toolbar"><code>toolbar</code></a></li>
</ul>
<h4>Roles that act as navigational landmarks</h4>
<ul>
<li><a href="http://www.w3.org/TR/wai-aria/roles#application"><code>application</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#banner"><code>banner</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#complementary"><code>complementary</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#contentinfo"><code>contentinfo</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#form"><code>form</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#main"><code>main</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#navigation"><code>navigation</code></a></li>
<li><a href="http://www.w3.org/TR/wai-aria/roles#search"><code>search</code></a></li>
</ul>
<h3>Additional Resources</h3>
<ul>
<li><a href="http://www.accessibleculture.org/research/html5-aria/">HTML5, ARIA and Screen Readers in May 2010</a></li>
<li><a href="http://dev.opera.com/articles/view/introduction-to-wai-aria/">Introduction to WAI-ARIA</a></li>
<li><a href="http://wiki.codetalks.org/wiki/index.php/Web_2.0_Accessibility_with_WAI-ARIA_FAQ">WAI-ARIA FAQ</a></li>
</ul>
<hr />
<p><small>© vdebolt for <a href="http://www.webteacher.ws">Web Teacher</a>, 2010. |
<a href="http://www.webteacher.ws/2010/10/14/aria-roles-101/">Permalink</a> |
<a href="http://www.webteacher.ws/2010/10/14/aria-roles-101/#comments">12 comments</a> |

]]></content:encoded>
			<wfw:commentRss>http://www.webteacher.ws/2010/10/14/aria-roles-101/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Useful Links: SVG, BAM, InterACT</title>
		<link>http://www.webteacher.ws/2010/06/15/useful-links-svg-bam-interact/</link>
		<comments>http://www.webteacher.ws/2010/06/15/useful-links-svg-bam-interact/#comments</comments>
		<pubDate>Tue, 15 Jun 2010 12:39:41 +0000</pubDate>
		<dc:creator>vdebolt</dc:creator>
				<category><![CDATA[accessibility]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[InterAct]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[web-education]]></category>
		<category><![CDATA[SVG]]></category>

		<guid isPermaLink="false">http://www.webteacher.ws/?p=4662</guid>
		<description><![CDATA[Doug Shepers from the W3C put together a slideshow in SVG, HTML, CSS and JavaScript that is worth your time. It&#8217;s an SVG demo. Play with it. View it in the latest Firefox. BAM or Blog Accessibility Mastermind is a six lesson course offered by Glenda Watson Hyatt of Do It Myself Blog. I haven&#8217;t [...]]]></description>
			<content:encoded><![CDATA[<p>Doug Shepers from the W3C put together <a href="http://www.w3.org/2010/Talks/06-schepers-atmedia/index.html">a slideshow in SVG, HTML, CSS and JavaScript</a> that is worth your time. It&#8217;s an SVG demo. Play with it. View it in the latest Firefox.</p>
<p>BAM or <a href="http://blogaccessibility.com/signup">Blog Accessibility Mastermind</a> is a six lesson course offered by Glenda Watson Hyatt of <a href="http://www.doitmyselfblog.com/2010/bam-creating-a-blogosphere-for-all/">Do It Myself Blog</a>. I haven&#8217;t looked inside the course, but I suspect it&#8217;s a good one.</p>
<p>Based on the interest and number of questions Derek Featherstone got during his accessibility presentation at the recent InterACT Summit, I&#8217;d say interest from educators about accessibility is very high right now. There&#8217;s a free online course from the Web Standards Project (WaSP) <a href="http://interact.webstandards.org/">InterACT curriculum</a> about accessibility. The course is a perfect resource for teachers. It&#8217;s a stand alone course. If you are teaching with <a href="http://interactwithwebstandards.com/">InterACT with Web Standards</a> and its chapters on accessibility, the online material a great time saver. Online materials such as exam questions, grading matrices, assignments, objectives, and resources go hand in hand with the material in the book.</p>
<hr />
<p><small>© vdebolt for <a href="http://www.webteacher.ws">Web Teacher</a>, 2010. |
<a href="http://www.webteacher.ws/2010/06/15/useful-links-svg-bam-interact/">Permalink</a> |
<a href="http://www.webteacher.ws/2010/06/15/useful-links-svg-bam-interact/#comments">No comment</a> |

]]></content:encoded>
			<wfw:commentRss>http://www.webteacher.ws/2010/06/15/useful-links-svg-bam-interact/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

