HTML 5 is an expansion of HTML 4/Basic HTML coding to allow for new html grouping elements and fewer lines of code. In support of the revised script, browsers are beginning to inherit common properties and tags within HTML and Javascript/JQuery. This is enabling both designers and developers to simply their code strings and pull from native properties to produce more fluid and dynamic website interactions.
HTML 5 new elements tags and grouping are also aiding in better SEO (Search Engine Optimization). You can always visit W3 Schools to view a list of the new tags elements and their definitions. Continue reading as we investigate some of the more complex attributes to HTML 5 such as 2D drawing with canvas and javascript.
Canvas animation allows for animated banners, images, and elements within HTML 5 and Javascripting. The banner at the top of this design is devised up of multiple canvases which hold a separate image. There are essentially 2 JS files that are running the animation and drawing of the stage. The files to the right of this article are supporting the canvas elements seen above.
In addition to the animation related javascript, the canvases are actually being dynamically generated through javascript and require another JS file to allow these elements to be written to the page. The required JS file is js/modernizr-1.6.min.js and the below code found within the html page is as follows:
Javascript within the Head Tags
Javascript within the Body Tags
if (document.images)
{
pic1= new Image();
pic1.src = "images/canvas/road.jpg";
pic2 = new Image();
pic2.src = "images/canvas/sky.png";
pic3 = new Image();
pic3.src = "images/canvas/car.png";
pic4 = new Image();
pic4.src = "images/canvas/sun.png";
pic5 = new Image();
pic5.src = "images/canvas/buildings_w_sky.png";
pic6 = new Image();
pic6.src = "images/canvas/truck.png";
}
Add to the following to the body tag: onload="init();"
First thank you for taking the time to visit and read through the material on this sample Portfolio. My name is Jonathan Riley and I am a local Visual Artist in Jacksonville, Florida, studying Web Design & Interactive Media at the Art Institute of Jacksonville. I have been drawing and painting since I was a small child and been doing website design/development for the past 10 years. I can draw anything I see literally and specialize in portraits which is definitely challenging but so rewarding in the end. I do have an online portfolio in which displays a ton of sample work that can be found to the right of this article.
Just a little more about me, I am 32 years old and have a beautiful family consisting of my lovely wife (Marion), 3½ year-old daughter (Kaitlyn), and 1½ year-old son (Brenden). There are actually photos of my kids on the side bar which were created as part of my Black and White Photography Class. Feel free to visit the PROJECTS section of this page to get additional information on current class courses and their related projects.
Intermediate Scripting:
Since this web page is overall mid-term for this class it's most appropriate to highlight the accomplishments from this class.
First part of the course dealt with understanding language syntax so not much to show there. But then we got introduced to HTML 5 and what a wonderful world it is . . .
Click on any of the links below to access the various HTML 5 projects for the course.
Digital Illustration:
This class really pushes me as an artist. Simply click on the images below to enlarge the view of some of the sweet stuff I have been making.
Black & White Photography:
Very fun and interesting class, for these examples I will take you back to towards the top of the design to view the side banner. Click the images on that banner to view them larger and enjoy!
Please feel free to contact me directly through my online portfolio site as seen here: www.jonathanariley.com. There is a contact form that you can complete along with samples of my work and professional resume!
I am always interested in constructive feedback and be sure to check back often as updates will occur from time to time!
