Notes from Web4All 2017 Day 1

Web4All 2017 kicks off with several talks about the Gig Economy, Remote employment, and the current employment opportunities for people with disabilities in Australia and around the world. Continue Reading Notes from Web4All 2017 Day 1

 

Web4All 2017 Day 1 Notes

The Australian Human Rights Commission has begun a study on employment discrimination for the older workers and those with a disability.

While about a quarter of the population is older, they make up just 16 per cent of the workforce. Australians with a disability make up 15 per cent of the working age population, but only 10 per cent of them have jobs.

The inquiry will seek to identify the barriers that prevent people from working, and in consultation with employers, affected individuals and other stakeholders establish strategies to overcome these barriers.

Willing to Work

The Australian government has historically had a higher unemployment rate for PWD than other countries.

Web Accessibility National Transition Strategy was influenced by the work done in European countries. Unfortunately, the tools were not accessible when it launched. So people with disabilities had trouble accessing the participation forms.

Web Accessibility National Transition Strategy PDF version
Continue Reading Notes from Web4All 2017 Day 1

Ubiquitous Transactions – Financial Future and Accessibility

This short presentation was created for the Wearable Computing Solutions panel at the M-Enabling Summit 2016. It introduces some new and upcoming standards that could simplify financial transactions and thus making them more accessible.

Continue Reading Ubiquitous Transactions – Financial Future and Accessibility

Dive into HTML5 should be everyone’s intro to the standard

I just found out about the Dive Into HTML5 tutorial. It’s downright amazing. I wish all specs were so carefully described. Don’t miss the first chapter on the history of standards creation. It gives you a good understanding of why the HTML standards are quirky and why HTML5 is progressing the way it is.

I especially like the way they test your browser for its ability to handle the various components you are reading about. Take an hour or so to go through this tutorial. It’s the best read you’ll have for the week.

Another good tutorial is The Best HTML5 Slides Ever, but you’ll need to view it in Safari. It doesn’t work well in the standard Firefox and forget about IE.

Related articles by Zemanta

HTML5 – quick notes from The Chronicles of Web Standard III – The Voyage of the HTML5

I went to the The Chronicles of Web Standard III – The Voyage of the HTML5 presentation by Silicon Valley Web Builder last night. Here are some quick notes I took before my battery died.
HTML5
Please note: I am far from an expert on HTML5 and welcome any comments and/or corrections to the following notes.

The speakers were

  • Ben Galbraith, Co-founder at Ajaxian.com
  • Brad Neuberg, Developer at Google
  • Chet Haase, Adobe Flex SDK team member
  • Michael Carter, Founder at Orbited Project & Official Contributor for W3C HTML5

First off, HTML5 was defined as not just an HTML4+ spec. It also includes all of the advances since HTML4.0. These include:

  • CSS3
  • webGL
  • geolocation
  • web workers
  • web storage
  • web sockets
  • canvas, SVG

Canvas vs. SVG

You can roughly think of these as Adobe Flash replacements.

Both canvas and SVG can be used to build dynamic images, charts, animation, and more. Canvas has more adoption at this point and is faster. However, the canvas is built and then keeps no memory of the objects it contains. SVG is more structured and knows what it contains. These sub objects can be further manipulated. SVG has the potential of being much more powerful than canvas in the long run. Microsoft‘s IE9 has demonstrated great potential with SVG.

CSS3 Advancements

There’s been an extended argument about where CSS or JS should be used on a web site. Some developers argue CSS shouldn’t be used for interactivity, such as drop down menus. However, the CSS transformations available in CSS3 are going to throw a major monkey wrench into this argument. They are blurring the boundaries and can do a much better job than javaScript.

Apple and Safari have pushed the development of transformations as they introduced the animation of pages when you switch an iPhone from portrait to landscape mode. This is just the tip of the iceberg. An example last night showed a CSS only version of itunes’ coverflow animation. Check out the CSS3 3D transformations.

Web Workers

Web workers technology should solve an existing problem with javaScript functions that run for extended periods. One example was a JS transformation of an image. It rotated the image and added reflections. However, the image would stop rotating when a user clicked on a button to add/change the functionality. Web Workers allows these functions to operate consistently.

There was another example with a movie of a guy holding a piece of cardboard and rotating it randomly. The user could click on various movies and watch them appear on the cardboard in the movie.

You can participate

One thing mentioned often in the meeting was the open structure for developing the specifications. Anyone can participate by joining the mailing lists, irc (irc.freenode whatwg), and making requests, suggestions, and comments.

They are especially interested in knowing what problems you have that are not solved by the existing specs. What changes would particularly affect you and how would you solve the problem.

For instance, I asked if the phone manufacturers are looking at the HTML5 web forms and using the new input types to intelligently autofill forms. For instance, they know an input is asking for a phone number, should a phone insert your number automatically? What about your other contact information?

Currently, this interaction is not in the spec. This is the kind of comment/suggestion they need to make the final specifications.

Related articles by Zemanta

Adding style to your rel attributes with CSS

View the finished example: Adding style to your rel link.

There’s a little attribute in HTML links that is starting to get a bit of attention lately. The “rel” attribute is a sparsely defined attribute that applies some meta information about a link’s relationship to other documents. Unfortunately, this information is usually hidden from your users. Let’s take a light-hearted stab at turning it into a visual element.

Rel attribute usage

While the W3C originally considered the rel attribute to describe the relationship of pages to each other, i.e. next, previous, directory, and start. The attribute has been adopted by the Microformat community for its inherit usefulness. The rel attribute is now used for tags, to define your relationship to someone, and even to tell search engines not to bother following a link.

The opportunities to use the rel attribute are seemingly endless. There are more proposals to define people you don’t like and links for voting.

But all of this flexibility comes at a small price. To remain valid, you need to tell the browser what these new rel values may actually mean. This is handled by linking to appropriate profiles. Just simply insert the profiles into your head tag. Multiple profiles may throw a validation error, but it’s ok. You don’t need to do this for the standard rel values.



We will be using the CSS3 attribute selector functionality to look at the value of the rel attribute and apply some style accordingly. First we’ll add some padding and a background image to any link that has a rel attribute. We’ll then use background positioning to display an icon that is appropriate for the link. It’s a fairly simple hack.

For more information on using attribute selectors, check out my previous posts:

Sample HTML Code

  • This link is ignored by search engines (rel="no-follow")
  • (rel="tag")
  • Sample CSS


    a[rel] {padding-left:20px; background:url(rel-sprite.png) no-repeat 0 0; }
    a[rel~="help"] {background-position: 0 -350px ;}
    a[rel~="license"] {background-position: 0 -1347px ;}
    a[rel~="no-follow"] {background-position: 0 -1200px ;}
    a[rel~="tag"] {background-position: 0 -47px ;}

    It’s all fun and games

    I’ll be the first to admit this exercise has significant issues. I’m assuming the following elements are true:

    1. All possible rel attribute values are accounted for in my CSS, if not there will be a blank space generated by the first rule
    2. You can only have one relationship defined by XFN. Unfortunately, most people are defined by multiple values, i.e. rel=”met friend colleague”. This CSS does not account for multiple values.

    So, the display of your rel attributes may be a bit off in the edge cases. Keep the spirit light and nobody will say anything… I hope. Have fun with your rel attributes. They’re just sitting there waiting to be used.

    View the finished rel attribute style example.

    Related Information