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.
Again, I took some liberty with this assignment and altered it a bit. I am interested in the intersection of games, education and technology. I am also very interested by how this is perceived by students who have grown up with games and the internet for their entire lives. I wanted to use tools that were in reach of the average student so the most expensive piece of equipment I used outside of my mac was an iPhone to record the video.
I did not per say, produce the final story in the ‘cloud’ but imported it back to iMovie to create a mash-up of various old and new techniques. The tools online now are incredible. I can create a richer experience now with these tools for free (this video cost me nothing to produce) than when I worked as an editor and had large budgets.
It is now more about having something to say rather than having the ability to produce it. What I want to do is encourage students to be more bold in their use of tools to produce content. They tend to be shy about expressing themselves in a richer medium. All of our students prepare portfolios (the clip of the game in my video is from a student portfolio), but it is limited to the games themselves. The students can use a rich source of external sites to make their presentation more interesting.
Documentation versus discussion. The Wiki is a better forum to collaborate on a document even though I am more familiar and comfortable with using word and a version control system like SVN. We did not use the wiki in this way where we would collaboratively work on a topic. We used it too conversationally, which is better suited in a forum where we can respond to each other and deliberate certain points.
Encouraged voting.We decided in the discussion page to each post strategies and challenges and we would then vote to find the top 5. Most of the participants wrote in a casual format and many of the points were repeated. This means that one person had to clean up, remove redundancy and make sense of it all. It felt like we should have discussed the vote, but there wasn’t a clear forum to do this in the discussion page.
Better for working on smaller pieces. We should have created multiple Wiki pages with the top challenges and top strategies. We could have each worked teamed up to work on one. If we were working on smaller pieces I think we would have come to a better result.
We did not edit. Since we did not create separate small pages we did not improve and edit each others work. This is the big advantage of a wiki, to perfect the documentation, find sources, fact check information. We did not do this.
I think our biggest challenge was that we were so used to using a forum as a team, that we carried our behaviour over to a Wiki. As a teacher, I think it is critical that we ensure that each tool is applied to solve the appropriate problem.
I can sympathize with Boris’ students. I have a very good lateral and relational understanding of information and can grasp the underlying meaning. I have little to no ability to memorize any text, whether it is a script, poetry, provinces, capitals or the periodic table.
It would have been nice to have more rigorous assessment when I was in high school so that I wasn’t so crippled by my inability to memorize effectively.
With that said, I think Boris should (with the help of other faculty) create a jeopardy style flash game. The questions could be asked in categories of:
H Gas
Li Solid
Br Liquid
Tc Synthetic
They would range in levels of difficulty such as “…is the gas that we breath”
The student would then type in the answer “what is oxygen?”. If the answer is wrong the student could then be supplied with a random hint. Once they get to the correct answer, the student would attempt to place it in the correct spot on the table. If he guesses wrong, all of the gas slots could be exposed. With each subsequent wrong guess less options would be available, narrowing the choices.
This type of activity would help in multiple ways. According to Gibbs and Simpson (2004-05) found that not only did you have to put in a lot of time allocated to studying a topic buy you have to be motivated. Taking a game-like approach to teaching the periodic table would help motivate students.
You can create some pretty amazing videos with the new iPhone 4. I was in the middle of my MET assignment, and a pod of dolphins went right by. I went out to join in on the fun, and I thought, why not film it on my phone?
I have been racking my brains about how to communicate online in a richer format than text that does not cost a lot of money or time. With budding game designers and programmers I have an audience that is finicky and has high production value expectations.
I was shown a really simple tool that allows you to create animated videos quickly that can help reinforce a message. I put together an introduction for the class I am teaching in the tool. This is something I could use to introduce the class online to students as it will be a blended class. It is located at Xtranormal.
I made this video in about 2 hours but think I could do it much quicker now that I know the interface and how it works.
I am putting up the installation steps for Moodle on my MacBook pro so I can develop on the moodle site while offline. This is important for me, as I am often out of internet range during the weekend. This will allow me to do my course preparation and UBC homework. I thought this might be useful as this allows for full development without access to the internet. Of course I will have to recreate this on the UBC Moodle server once I am ready.
I tried installing it on top of my existing MAMP set up but ran into a problem getting the xmlrpc extension working in my build of PHP. I decided to instead install the pre made macintosh package. This was single step with the Moodle preconfigured to come up on the default MAMP home page.
My name is Marc Aubanel and I am an academic director and instructor at The Art Institute of Vancouver. I am teaching post secondary students the science and the art of making video games. This is my first MET class and I am excited to be a part of the program and look forward to this next chapter of my journey.
I grew up in Quebec where I was very lucky to have a high school that introduced me to the world of computers through Apple IIE’s. I later received a Bachelor in Communication Studies from Concordia University and have worked with electronic media ever since.
I worked with computers professionally my entire career, and participated first hand in the birth of the digital era in video, computer graphics and games. I started as a video editor, cutting on Betacam video tape, and was fortunate enough to work on the Video Toaster on the Amiga 2000. This gave me my first introduction to rendering with Lightwave 3D.
I went on to video game production and shipped over 50 titles between 1993 and 2006. I was part of a geek culture that embraced everything electronic from e-mail to BBS in the ‘pre’ internet days. Most of my focus had been on producing products.
Then….
….
…
..
.
I realized that my limits as a producer had been met, focusing solely on the output that the team was creating. I became very interested in team dynamics, team motivation and the “people side” of the art form. I also was fascinated culturally from the huge changes that digital media arts was having on the music, video, film and games industry.
I then professionally moved towards the field of education as I wanted to see developmentally what could be improved.
My main goal from being in the MET program is to scratch an itch I have had for a very long time. Why did the Edutainment market rise and fall so quickly? What positive role can technology play in the classroom? What lessons from video game design can be brought to help students learn? How can I influence the emerging read/write culture?
Right now, all I have are questions. Hopefully at the end I might have a few answers – or at least a keener insight.
