I am looking at the Web Design & HTML authoring toolkit. I am adapting the exercise to specifically look at HTML 5 & CSS 3. I have not had a chance to review the new features and how this might benefit us as both web designers and course designers. I have looked at the content on both Safari and Firefox. The differences are pretty severe. I got all of the included effects working on Safari. Firefox only supported text shadows. It did not support columns, gradients, or reflections.
I checked the accessibility through the WAVE tool, and just mentioned that I shouldn’t use <h3> headers, without using <h2> & <h1> headers first. I also ran it through the Safari error console and did not get any errors on the page.
I want to see how it can improve our websites so they ‘suck’ less. One of the features I am looking at that could reduce clutter in heavy text based pages is the addition of columns. Please note that I have only tested this works on Safari 5.0.3 on the mac so you may not see all (or any) of the effects depending on what Browser you are on. To check your browser go and visit http://html5test.com/.
The CSS code for columns is:
p.assignment {
-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
So we now can call it now in the following paragraph with class “assignment” and take what normally would look like:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis, libero vitae viverra aliquam, libero erat faucibus urna, eu consequat sapien odio in mauris. Nulla facilisi. Etiam magna ipsum, volutpat eget semper luctus, fermentum venenatis urna. Nam ullamcorper, leo non egestas varius, tortor sapien adipiscing felis, a facilisis magna nisl lacinia diam. Sed vel libero tortor, id bibendum ligula. Sed id porttitor odio. Duis blandit tristique nisi tincidunt eleifend. Praesent sed tortor enim. Aliquam rhoncus rutrum lorem ac sollicitudin. Morbi pulvinar augue eu ligula eleifend fringilla. Nunc mattis lacinia consectetur. Phasellus dui metus, scelerisque id luctus et, dignissim id arcu. Nam risus dolor, ornare a aliquet lacinia, volutpat eget tortor. Mauris id nibh enim. Fusce et dolor sed nulla blandit consequat. Nulla hendrerit neque nec nibh gravida ac sagittis nisi tincidunt. Duis pulvinar turpis turpis, ac malesuada massa. Vestibulum et libero ultrices purus commodo sodales vel eu enim.
to look like:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis, libero vitae viverra aliquam, libero erat faucibus urna, eu consequat sapien odio in mauris. Nulla facilisi. Etiam magna ipsum, volutpat eget semper luctus, fermentum venenatis urna. Nam ullamcorper, leo non egestas varius, tortor sapien adipiscing felis, a facilisis magna nisl lacinia diam. Sed vel libero tortor, id bibendum ligula. Sed id porttitor odio. Duis blandit tristique nisi tincidunt eleifend. Praesent sed tortor enim. Aliquam rhoncus rutrum lorem ac sollicitudin. Morbi pulvinar augue eu ligula eleifend fringilla. Nunc mattis lacinia consectetur. Phasellus dui metus, scelerisque id luctus et, dignissim id arcu. Nam risus dolor, ornare a aliquet lacinia, volutpat eget tortor. Mauris id nibh enim. Fusce et dolor sed nulla blandit consequat. Nulla hendrerit neque nec nibh gravida ac sagittis nisi tincidunt. Duis pulvinar turpis turpis, ac malesuada massa. Vestibulum et libero ultrices purus commodo sodales vel eu enim.
We can also now have gradients and rounded corners right in CSS without having to create art and add space and size to my webpage.
background: -webkit-gradient(radial, 200 50, 0, 430 50, 562, from(#CEE3F6), to(#F6CEE3));
This paragraph will have a radial pink to blue gradient in the background.
border-radius: 32px;
This paragraph will have a radial pink to blue gradient in the background with a rounded container.
We can also cast shadows on the text or objects.
text-shadow: rgba(64, 64, 64, 0.5)4px 4px 4px;
box-shadow: rgba(0, 0, 128, 0.25);
This text has shadows.
We can also combine a reflection with a gradient to transparent
font-size:200%;
-webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.15)));
reflection combined with gradient.
I played a bit with video files and SVG:
I wasn’t able to upload it on the wordpress server as it didn’t allow me to download an .svg or a .mp3 but I did get it working on my local browser.
There were some additional features like the ability to save files and access databases that I think have large educational benefits. It is a way for students who have limited access at home to work with rich web apps at school (if the school has good web access), and then continue working offline at home.
2 responses so far ↓
John Egan // Nov 28th 2010 at 11:40 am
I’ve not yet found any bandwidth to explore HTML5 yet…so I appreciate your musings here. Though, truth be told, I can’t write code for beans.
I wonder if the gradient background poses a problem for accessibility, in terms of folks with visual impairments? Just thinking out loud.
Marc // Nov 28th 2010 at 1:07 pm
It really is amazing. I couldn’t get the animation working yet as this gets to be a bit trickier. I can’t get javascript to work on the Word Press site at UBC (I imagine UBC has this functionality disabled).
I am surprised to hear you don’t like writing code. For someone who liked math in their early days, code is just logic and math. I love coding, getting something to work with just code is magic (still).
The gradiant background I picked is ugly but is pretty common on most webpages. This was done by including a single line of a gradient on a bitmap and have the gradient repeat. This works for linear gradients but not for radial ones. The gradient I show here can’t be cheated, and would require one big bitmap.
Did I pick a good gradient that would affect accessibility. Yes. It looks pretty ugly, in fact. Gradients can be used for much better applications like focusing your attention on a certain part of the page.
The advantage with doing it in the script, is that it takes no space on the webpage. So we get more functionality out of HTML AND we get smaller faster webpages.
This is a great tradeoff. Rather than having large SWF files (for Flash), we can have lighter, quicker more responsive code that works right in the browser.
Right now I can layout a page in Photoshop and mimic many of the cool effects. Just simple support for columns, gets me jazzed.
Now we have to wait for the web browsers to catch up. If you load this up in Firefox, only one of the effects work.
Leave a Comment