Announcing Intel® Joule™ support in Windows 10 IoT Core Anniversary Edition

Two weeks ago I was excited to see us unveil Windows 10 IoT Core Anniversary Edition running on the new Intel® Joule™, built on the new Intel® Atom™ T5700 SOC. It took us a little over 6 weeks to bring up Windows 10 IoT Core and build Bamboo, the first Windows 10 IoT Core and Intel® Joule™ powered robot. We look forward to seeing what you think of Windows 10 IoT Core for the Intel® Joule™ when it becomes available as part of the Windows Insider Program release scheduled for September.

IMAGE1

Bamboo, the first Windows 10 IoT Core robot running on the Intel® Joule™

To give you a peek into what you can do with this we created Bamboo, a companion robotic panda. Running Windows 10 IoT Core on the Intel® Joule™ compute platform, Bamboo connects to cloud-based Microsoft Azure* and Cognitive Services, which provide sentiment analysis and translation, so you can speak to Bamboo in any language and she can translate into her native English and understand your mood via Twitter. Bamboo can move about and build an understanding of her environment with the compute platform and an Intel® RealSense™ camera. Additionally, she is animated via the EZ-Robot EZ-B control system.

All of this happened at the Intel Developer Forum 2016 in San Francisco. At that event, we also had a number of partners showing off what Windows 10 IoT Core can do.

EZ-Robot integrated the Intel® Joule™ with Windows 10 IoT Core into their EZ-B V5, making EZ-Robot the first custom integrator of the Intel® Joule™ using Windows 10 IoT Core. EZ-Robot displayed the new control module and multiple robots running on this new platform. Using the EZ-Builder software for Windows and a newly released EZ-Robot UWP library, you can design and animate your robots on a Windows PC, as well as auto-generate and export UWP control code to run on the EZ-B V5. We used this functionality to animate Bamboo. The bring up and integration of the EZ-B v5 took just under 6 weeks.

IMAGE2

Design Mill highlighted Torch, a mixed reality interactive gaming table. Built on the Intel® Joule™, Intel RealSense camera and Windows 10 IoT Core, Torch enables interactive gaming mixing perception, projection and blending the physical/digital divide.

IMAGE3

Joining our other outstanding partners like Raspberry Pi, Arduino, Adafruit and Seeed Studio, great partnerships like the ones we have with Intel, EZ-Robot and Design Mill that produce boards and systems, helps make Windows 10 IoT Core the best platform to build your IoT solutions on. When you add in Microsoft Azure IoT and Microsoft Cognitive Services, you get a cloud-connected, manageable, intuitive and, above all, human-like platform to build upon.

The Windows Insider program makes it very easy for you to get access to all of the above, as well as also the latest pre-releases of Windows 10 IoT Core (which will soon support the Intel® Joule™ module). Once you’ve installed the pre-release, we enable the OS to automatically upgrade so you’ll be able to try out the latest features in the next pre-release of Windows 10 IoT Core as we make each release – No more looking for updates on web pages or developer centers. We’re excited by this and we hope you’ll take the opportunity to join the many developers who are already using the Windows Insider Program.

We can’t wait to see what you make!

AMD R9 380[x] or similar

Looking to upgrade. New user so willing to pay first. I will happily get on a train and collect. Prefer if you have original receipt.

-Thanks

Location: London

______________________________________________________
This message is automatically inserted in all classifieds forum threads.
By replying to this thread you agree to abide by the trading rules detailed here.
Please be advised, all buyers and…

AMD R9 380[x] or similar

Synology DS215j – boxed in excellent condition. £99 inc p&p

Boxed DS215j in excellent condition. Only used for a brief period as I liked it so much I replaced it with a four-drive version. Includes all screws and cables.

Looking for £99 inc UK postage.

Price and currency: £99
Delivery: Delivery cost is included
Payment method: Bank transfer or paypal gift
Location: Leicestershire
Advertised elsewhere?: Not advertised elsewhere
Prefer goods collected?: I have no preference…

Synology DS215j – boxed in excellent condition. £99 inc p&p

This Week on Windows: IFA, pro football and a tour of the new Windows Store

We hope you enjoyed this week’s episode of This Week on Windows! Take the tour of everything new in the Windows Store with the Windows 10 Anniversary Update in our Windows 10 Tips blog post, head over here to see all the Windows 10 devices announced at IFA, and keep reading for a great offer from Best Buy and everything new in the Windows Store this week!

Save $150 on Lenovo Yoga 900 at Best Buy, Students can save an additional $150

Lenovo Yoga 900

From now until 9/3/16, Best Buy is offering $150 off the purchase of the Lenovo Yoga 900 and students can save an additional $150 off through Best Buy’s student portal. Customize your laptop experience to fit any occasion with this Lenovo Yoga 900 powered by Windows 10. Boasting a 13-inch touchscreen and a 360-degree watchband hinge, this computer functions as a tablet, laptop or viewing screen. The long-lasting battery delivers up to 10 hours of Internet browsing or 9 hours of video playback, making this Lenovo Yoga 900 ideal for travel. Learn more about this great offer here.

Here’s what’s new in the Windows Store this week:

Touchdown! Collection
Touchdown! Collection

It isn’t just back-to-school time, it’s back-to-football time, too, with the NCAA kickoff this Saturday and pro football next Thursday. The Touchdown! Collection in the Windows Store is ready with great ways to watch the game your way on Windows or Xbox, letting you follow favorite teams, stream games, view schedules and stats, listen on-the-go, plan tailgates and more!

Minecraft: Windows 10 Edition Beta – Natural Texture Pack for $2.99
Minecraft: Windows 10 Edition Beta

Minecraft: Windows 10 Edition Beta is all about building worlds – and stories – block-by-block with your imagination, from makeshift shelters to the grandest of castles. Create and explore the worlds you imagine, and now get more for your efforts from a new Natural Texture Pack ($2.99). Designed to give your Minecraft worlds a more natural, realistic look, it’s the next step in the evolution of this incredibly popular game.

Movies & TV End of Summer SaleEnd of Summer Movies and TV Sale

It’s time for one of our biggest sales of the year – the End of Summer Sale! Save big on must-have movies and TV shows now through 9/5 in the Movies & TV section of the Windows Store. Enjoy new releases like Batman v Superman: Dawn of Justice for up to 27% off, or binge watch your favorite TV dramas – including The Blacklist and The 100 – for up to 44% off.

Captain America: Civil War – Buy from $19.99Marvel's Captain America: Civil War

When the threat of government interference causes a massive rift between Iron Man and Captain America, the rest of the Avengers are forced to choose sides…but who will fight the bad guys if the Avengers are fighting each other? Buy Marvel’s Captain America: Civil War now in the Movies & TV section of the Windows Store, 11 days before it’s available on Blu-ray.

Head over to the new and updated section in the Windows Store to see what else is new in the Windows Store this week, and have a great weekend!

Building in 10k: Markup for Accessibility, Clarity, and Affordance

Editor’s note: This is part two in a series of posts from the team that built the 10k Apart contest page, exploring the process of building for interoperability, accessibility, and progressive enhancement in less than 10kB.

In the previous post in this series, I talked a lot about how the 10k Apart contest site began to materialize in terms of structure and content. Once the planning was done, I was finally able to start building the site in earnest.

Where do I begin?

Generally, the first step I take in building any site is to drop some sample content into a fresh HTML document and then work my way through it, marking things up as I go. In the case of this project, I decided that sample content would be all of the patterns I had identified in the wireframes. It seemed like a solid starting point that would get me pretty far in terms of building out the bits I’d need to flesh out the full site.

First things first, I copied in the content from the wireframes. Then I began asking one simple question over and over: How can I use markup make this better?

The purpose of markup is to twofold:

  1. To give structure to a document; and
  2. To convey (and enhance) the meaning of the document’s content.

With that question in mind, I began to work my way, bit by bit, through the document, always on the lookout for opportunities to make it a little more meaningful, a little more usable. I was, of course, ever-mindful of that looming 10kB limit too. Markup tends to be pretty small, but I wanted to minimize cruft and focus on markup that actually added value to the document.

What’s the minimum viable structure?

Every page needs structure, so I started there. First off, I dropped in a minimal HTML5 shell:

.gist table { margin-bottom: 0; }

Have I told you how thankful I am for that simplified DOCTYPE? It’s worth noting that I added an id to html element to act as a site identifier. This is a practice I picked up years ago from Eric Meyer as a helpful option for folks who rely on user styles and want to override a specific site’s styles rather than every site’s.

With the minimal shell in place, I set to work marking up the content in my patterns document. I began by surveying the content and identifying key regions like the site banner, navigation, primary content, and footer. All of these pieces have semantic meaning and they also have associated HTML elements. Let’s step through them, one by one.

A “banner” is introductory content for a web page. ARIA granted us the ability to identify a site’s banner using role=”banner”, so it would be completely reasonable (and accessible) to mark up the site’s banner like this:

.gist table { margin-bottom: 0; }

Incidentally, HTML5 introduced the header element, which operated in a similar way. Semantically, it’s intended for introductory content. The header element can be used directly in the document body as well as within sectioning elements (like article and section). What’s really cool is that the first header encountered in the body (but not inside a sectioning element) is exposed to assistive technology as the site’s banner. That means we can skip adding the role and just do this:

.gist table { margin-bottom: 0; }

Why do we care about the semantic equivalence? Well, assistive technologies can use landmark roles like “banner” to enable a user to move around more quickly in a document.

The next thing I needed to address in the document was the navigation. There’s an ARIA role for that: role=”navigation”. However, there’s also a corresponding HTML5 tag: nav, which is a bit less verbose. Done and done. Well, almost. In order to identify the purpose of the navigation, I can enlist another ARIA property: aria-label:

.gist table { margin-bottom: 0; }

This ensures assistive technology exposes the purpose of the navigation to users. Edge with Narrator, for example will read out “Main Navigation, navigation, navigation landmark”.

NVDA with Firefox would read this out as “Main Navigation, navigation landmark.”

Next up is the primary content. ARIA denotes that with role="main", but the newer main element accomplishes the same thing more succinctly.

.gist table { margin-bottom: 0; }

Finally there’s the footer. HTML5 has the footer element which, like header, can operate in either a sectioning context or a page context. And like header, the first footer encountered in the body (again, provided it’s not a descendent of a sectioning element) will automatically be granted a semantic value equivalent to ARIA’s “contentinfo” role. That role denotes meta information about the content, like copyright. Just what we need!

Rolled all together, the document structure was simple and semantic, with nary a div in sight:

.gist table { margin-bottom: 0; }

Where can I provide more meaning?

With the basic document structure in place, I began to look at the individual patterns with an eye for where I could add value using markup. In many cases, simple tried and true elements like headings, paragraphs, and lists made the most sense. For example, the navigation is really a list of links. The order really doesn’t matter, so I used a ul:

.gist table { margin-bottom: 0; }

The cool thing about that approach is that when assistive technology encounters that navigation landmark, users get an even more useful information. So, going back to the NVDA example from earlier, this would be read as “Main Navigation, navigation landmark. List with three items.” That’s super helpful!

HTML’s native semantics can do a ton to super-charge our documents like this. Remember folks, not everything should be a div.

What needs to be identified?

The “common wisdom” within the web design world is to avoid using the id attribute. The oft-cited reason for this is that in a CSS selector, an id selector (e.g., #foo) carries a lot of weight in specificity calculation and often lead designers to create unnecessarily over-specific selectors. That is 100% true, but I think it gives id a bad rap. Modern attitudes toward id often remind me of the antagonism many of us felt for table when we were trying to get folks to move from table-based layouts to CSS. It took the best of us down some pretty weird rabbit holes. The table element is absolutely the best choice for marking up tabular content.

The id attribute is used to identify a specific element on the page. You can use it for CSS, sure, but it has other uses as well:

  1. It creates an anchor to that element in the document (try it out by adding “#comments” to the address bar of your browser);
  2. It creates a simple and inexpensive means of document traversal in JavaScript: document.getElementById();
  3. It creates a reference-able identifier useful for associating the identified element with another one via for, aria-labelledby, aria-describedby, and other attributes.

As with many things, id can certainly be overused, but that doesn’t mean you shouldn’t use it. In terms of the 10k Apart site, I opted to use it in the forms (which I will discuss shortly) and extensively on the FAQ page and the Official Rules page.

On both of those pages, I used id to create anchor points so I could point folks directly to certain sections. On the FAQ page, which is relatively long, I used short id values like “size”, “js” and “a11y” (short for “accessibility”). The Official Rules are a bit longer, so in order to save some bits, I opted to use the section character (“§”) as a prefix to the id values. If you look at the source of that page, you’ll see id values like “§–1”, “§–2”, and “§–3”. They may look weird, but they are valid id values.

What are the common patterns?

The id attribute is great for identifying specific elements, but there are lots of instances where elements share a function. One example of that is the gallery of projects and the gallery of judges. And so I chose to classify the two lists as being of an ilk, using a class of, you guessed it, “gallery”.

Another example of elements that are related are the various project instances. Each instance is a “project”, but a project has certain characteristics when it is part of a gallery and other characteristics when it’s on its own page. Each instance shares the class of “project” but can also receives a modifier class to denote its context. I chose to follow the BEM syntax for classifying elements, but there numerous other ways to accomplish the same goal. Here’s what I came up with:

  • .project — Used for all projects;
  • .project--page — Used for the project on its own page;
  • .project--hero — Used for the Grand Prize winner in the final version of the homepage;
  • .project--winner — Used for projects that have won a prize; and
  • .project--preview — Used for the JavaScript-based live preview accompanying the entry form.

Since I’m on the subject, I also used the BEM approach to keep my styles modular. Continuing with the project example, a project instance could have multiple properties associated with it:

  • .project__author — The person who submitted the project;
  • .project__name — The name they gave the project; and
  • .project__won — The prize a project won

Doing this allowed me to isolate project-related styles to specific elements based solely on their purpose, rather than the markup they happened to use (which might change from instance to instance, depending on the needs of the page).

How can I make the forms better?

Content, the official rules, and the projects themselves are all obviously quite important to this site, but without a usable entry form, the whole project is kinda pointless. Part of making more usable forms for the site started with the planning and began with eliminating unnecessary fields. That removed a lot of the noise from the entry form. The next step was humanizing the language, which I mentioned in the last post. Practically, it meant moving away from terse and rather useless labels like “Name” toward more conversational labels that actually beg a response, like “What’s your name?”.

With solid, conversational labels in place, I then went about associating them with the various form controls. To start with, I marked all of the standard fields up as input elements with no type assignment (meaning they all defaulted to “text”). I then marked up each bit of label text in a label element and then tied the two together using a for attribute on the label that referenced the id attribute of the associated field. I did the same with the select, textarea, and checkbox controls. Here’s an example:

.gist table { margin-bottom: 0; }

I opted to use single character id values to save room so I could spend additional markup characters on additional enhancements.

Next, I went through the form and looked for fields that were asking for specific kinds of structured information, like an email address or a URL. When that was the case, I used the corresponding input type. Here’s an early instance of the email field, for example:

.gist table { margin-bottom: 0; }

My next pass added attributes to signify if a field was required. To get the greatest amount of coverage in this area, I doubled up the required attribute with aria-required="true". It’s redundant, but not all assistive tech/browser combinations treat them as equivalent… yet.

.gist table { margin-bottom: 0; }

I used the next pass to control how content could be entered into the fields in order to provide a better experience for folks in browsers that support autocorrection, automatic capitalization, and the like. (If you’re interested, there’s a great overview of best practices for streamlining data entry, especially on mobile.) For the “name” field, that meant turning off autocorrect and setting it to autocapitalize words.

.gist table { margin-bottom: 0; }

Then I went through and provided some silly placeholders to suggest the kind of content a user should be entering into the field.

.gist table { margin-bottom: 0; }

And my final pass added support for auto-complete, which enables users of supporting browsers to fill out the form even more quickly by identifying the specific information the browser should supply for each field.

.gist table { margin-bottom: 0; }

If you’re intrigued by this idea and want to know more, you should definitely read Jason Grisby’s treatise on autocomplete.

It may not seem like much in the grand scheme of things, but those minor markup tweaks add so much to the experience. And if a particular browser or browser/assistive tech combo doesn’t support a feature, no big deal. An input can be as simple as a text input and it’s ok. We’re still doing server-side validation, so it’s not like users who can’t take advantage of these enhancements will be left out in the cold.

And speaking of server-side validation, I should probably spend a few minutes talking about how that factors into the markup.

What if the form has an error?

Let’s say you forget to enter your name for some reason and your browser doesn’t pay attention to the HTML5 field types and attributes. The server will catch the error and return you to the form with all of the info you entered intact. It also summarizes the errors and provides some useful messaging about the error and how to fix it or why it’s important.

First off, a summary of errors will appear at the top of the form:

.gist table { margin-bottom: 0; }

Here we have an introductory message followed by a list of errors. Each error contains a link that anchors you directly to the corresponding field. (Yay id!) The whole message also has an ARIA role of “alert” indicating users of assistive tech should be informed of this content immediately after the page loads. A tabindex of 0 is also added to ensure it receives focus so the contents are read.

Drilling down to the field itself, we have the label, the field, and the error message. The label and the field are already associated (via the forid connection I covered earlier), but I needed to associate the error now too. In order to do that, I used aria-describedby which also makes use of id.

.gist table { margin-bottom: 0; }

In this case aria-describedby points to a single element (strong#e-n), but the attribute can actually reference multiple id values, separated by spaces. It’s worth noting I’ve also marked the field as invalid for assistive tech using aria-invalid="true".

Again, a teensy-tiny tweak to the markup that pays huge dividends in terms of usability.

Oh yeah, and one last thing: the form works perfectly in Lynx.

Screen capture showing the 10K Apart contest form in the Lynx web browser

What did we learn?

I covered a ton of stuff in this piece, so here’s a little summary of takeaways if you’re a fan of that sort of thing:

  • Markup for structure and semantics — Choose your HTML elements with purpose;
  • Labeling elements reduces ambiguity — aria-label can (and should) be your friend;
  • Don’t shy away from id — You don’t have to use it in your CSS, id has a bunch of other uses;
  • Classify similar elements — that’s what the class attribute is for, the naming approach is up to you;
  • Associate form labels with controls — no excuses… just do it;
  • Use the right field type — HTML5 offers a bunch of options, get familiar with them;
  • Indicate required fields — do it in your content and in your form controls;
  • Manage autocorrection and capitalization — your virtual keyboard users will thank you;
  • Suggest possible responses — but keep in mind the placeholder attribute is a suggestion, not a label;
  • Facilitate auto-completion — again, your users will thank you; and
  • Handle errors well — make it easy for users to find and correct errors.

Where to next?

With a solid set of markup patterns in place, I built out the site in earnest, following along with the wireframes. Once that was done, the next step was to design the thing. Well, technically some of the design had already begun while I was working on markup, but you know what I mean. Designer Stephanie Stimac will be joining me to talk about that process in the next post. Stay tuned!

Aaron Gustafson, Web Standards Advocate