Link to all Weeks Week 3 Week 4 Week 5 Week 6 Week 7 Week 8
Assessment 2 has been posted: C1 – Assessment 2.You will be able to work on it in class and complete it by next week.
I will be available for help with Photoshop and other questions.
Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!
Link to all Classes Class 2 Class 3 Class 4 Class 5 Class 6 Class 7
You can work on Assessment 2 in class and I will help with questions:
Assessment 2 Multimedia Production
Below is an example of the Multimedia Production Cycle:
Below are some ideas for a table of content. You can always go for a traditional table of content or do something more exciting.
Make sure that the information is easy to find. A good design is one that is easy to understand. This should not stop you from making it fun though.
Some of the images can be found at this good compilation of table of content designs: Smashing Magazine – Table of Content: Creative Examples.
Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!
Link to all Classes Class 2 Class 3 Class 4 Class 5 Class 6 Class 7
Today’s class will be used for assessment work.
If you had trouble getting responses from businesses please do a refined Google search including your questions with the terms print industry (or similar: Print sector, print employment, print employee, etc). Look for articles and posts about the print industry and the employment opportunites.
Next formulate your answers to your questions based on your findings. Always state your source of information.
First look up the definition for the term in question. Fill in the textbook definition, write down the source (book title, author, publisher and year or URL/web address of web page and next write your own definition. There are 47 terms to look up in total. You will need 30 correct answers for a COM.
A tipp: If you cannot find the correct term, do a Google search and include words like:
Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!
Link to all Classes Week 3 Week 4 Week 5 Week 6 Week 7 Week 8
Use the W3Schools TryIt Editor and Notepad to create the home page for a website of your choice with HTML and CSS.
Content: include a
The images can be sourced online. Please aim for Creative Commons images. You may use www.morguefile.com or other websites for this purpose.
Work on the assessment in class and during the week and have ready to be handed in as html file. The CSS component can be either internal or as an external CSS document.
We will work through the steps to create a website in HTML and CSS:
We start with the DOCTYPE declaration and the HTML tags followed by the Head and Body tags:
<!DOCTYPE html>
<html>
</html>
_____
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Note: Add the closing tag straight away to make sure that you do not forget it!
<!DOCTYPE html>
<html>
<head>
<title>Italian Food For Beginners</title> (Add your own title here)
<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />
<meta name=”description” content=”” /> (Either write your description straight away or do it later. This description will show in a Google search and it is important to write something that will be relevant to the webside/ web page. Keep it short, but make sure not to skip over important information that would get a user to visit your site!)
<meta name=”author” content=”Federico Viola” />(put your name in here!)
</head>
<body>
</body>
</html>
It is important to sketch out your site beforehand. Write down all the dimensions for the various elements. Overall dimensions, example: width 960px x height 690px, dimensions of the banner/header, dimensions and format of the menu, dimensions of various content boxes.
Divs are basically spaces that you reserve. They are like 2D boxes that allow you to place content, either images, text, video or audio. You can give the background a colour and you can create outlines.
<!DOCTYPE html>
<html>
<head>
<title>Italian Food For Beginners</title>
<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />
<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />
<meta name=”author” content=”Federico Viola” />
</head>
<body>
<div id=”wrapper”> (This will be the div for the overall webpage. It will be like a frame for all the elements.)
<div id=”header”>
<h1>This is the header/banner</h1>
</div> (This closes the header div.)
<div id=”container”> (This will be the div for the menu and content divs)
<div id=”menu”>
<p>Menu</p>
</div> (This closes the menu div.)
<div id=”content1″>
<p>Content1</p>
</div> (This closes the content1 div.)
<div id=”content2″>
<p>Content2</p>
</div> (This closes the content2 div.)
<div id=”content3″>
<p>Content3</p>
</div> (This closes the content3 div.)
</div> (This closes the container div.)
<div id=”footer”>
<p>Copyright Statement</p>
</div> (This closes the footer div.)
</body>
</html>
You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)
<!DOCTYPE html>
<html>
<head>
<title>Italian Food For Beginners</title>
<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />
<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />
<meta name=”author” content=”Federico Viola” />
<style> (opens an internal CSS style tag)
#wrapper {;}
#header{;}
#container{;}
#menu{;}
#content1{;}
#content2{;}
#content3{;}
#footer{;}
ul{list-style-type:none;} (this is the ul tag to be used for the menu later in the body, it defines to have no bullet points)
</style> (always make sure to close html tags)
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1>This is the header/banner</h1>
</div>
<div id=”container”>
<div id=”menu”>
<p>Menu</p>
</div>
<div id=”content1″>
<p>Content1</p>
</div>
<div id=”content2″>
<p>Content2</p>
</div>
<div id=”content3″>
<p>Content3</p>
</div>
</div>
<div id=”footer”>
<p>Copyright Statement</p>
</div>
</body>
</html>
You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)
<!DOCTYPE html>
<html>
<head>
<title>Italian Food For Beginners</title>
<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />
<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />
<meta name=”author” content=”Federico Viola” />
<style> (opens an internal CSS style tag)
#wrapper {width:960px;height:690px;margin:0px;} (the site will go to the edge due to having no margin)
#header{width:960px;height:140px;margin: 10px 0px;background:#3375FF;} (the header will have 10px margins on top and bottom and no margins on the right and left, the background colour has been specified)
#container{width:960px;height:410px;} (always make sure to use a semi-colon at the end of a CSS declaration)
#menu{width:100px;height:410px;margin-right:10px;background:#3399FF;
#content1{width:410px;height:200px;margin-right:10px;padding:5px;background:#4CCCFF;}
#content2{width:410px;height:200px;margin-right:10px;padding:5px;background:#3375FF;}
#content3{width:410px;height:410px;padding:5px;background:#0099FF;}
#footer{width:960px; height:140px;}
ul{list-style-type:none;}
</style> (always make sure to close html tags)
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1>This is the header/banner</h1>
</div>
<div id=”container”>
<div id=”menu”>
<p>Menu</p>
</div>
<div id=”content1″>
<p>Content1</p>
</div>
<div id=”content2″>
<p>Content2</p>
</div>
<div id=”content3″>
<p>Content3</p>
</div>
</div>
<div id=”footer”>
<p>Copyright Statement</p>
</div>
</body>
</html>
Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!
Link to all Classes Class 1 Class 2 Class 3 Class 4 Class 5 Class 6
Please check today’s entry on MyKangan for this class the Sustainability component of the Online Cluster.
Source: morgueFile, Photo by matei
Today’s online class looks at how to integrate sustainable work practice into a print business in Victoria. Use the links provided or research independently: Greenfinder | Printers on Greenfinder |Thegreendirectory | Sustainability Victoria | SustainableBusiness.com
Please complete the attached file Assessment Sustainability and upload it to MyKangan.
Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!
Based on last week’s photos that you took create a new Photoshop document:
The teacher will present how to create the animation in class. Please follow the presentation.
Link to all Weeks Week 3 Week 4 Week 5 Week 6 Week 7 Week 8
We will use this class to inprove your Photoshop skills and you will be able to work on your website designs for class C1.
Assessment 2 will be conducted next term when you will have a better understanding of how to upload web content.
Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!
Link to all Weeks Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7
When it comes to webdesign the appeal of a site will depend on the taste, preferences and experience of a target audience. We can safely say that children tend to be attracted to bright colours and shapes they can relate to. When it comes to older audiences I recommend to focus on the common interest and purpose of the website. A website for a SciFi purpose (eg a Conference of Star Wars Fans) will need the colour palette and visual appearance of that genre: See Colour Palette Star Wars Colour Palette SciFi Colour Palette Blade Runner. If you look at a wider scale you find that every genre has its own preferred and collectively agreed set of colours: Colour Palettes of Films.
Try a Google Search for Color Palette Generator, you may find this one: DeGraeve Color Palette Generator (degraeve.com). Kuler is another excellent Color Palette Generator.
When it comes to website layout it is important to come from an organised starting point. Initially you should look at applying a grid. We looked at Nathan Smith’s 960 Grid System last week, which can be found at 960 Grid System.
The design above for a portfolio website is an elegant and simple (in its beautiful sense) approach to the display of thumbnails. Please notice that the rectangles of the thumbnails match the rectangular shape of the thumbnail cluster as well as the proportions of a screen. This design was based on the 960 Grid System.
Once you have started with the layout and the initial idea for the the website you can create something that suits the need or purpose, the genre and target audience. An excellent read on grid design, how to create your own or how to apply the 960 grid system: Smashing Magazin: Grid-Based Web Design, Simplified.
Some other clean layouts:
In-class workshop. I will show you some basic elements of Photoshop that will help you in your design of a website. It has become obvious last week that the Photoshop skills in the class are below what I expected, so that this Photoshop crash course today will make it easier for you to create the 5 concept pages for your final assessment. It will be good for you to attend to make sure that you get the most out of this workshop.
Please check MyKangan for the assessment. It will be uploaded today and link provided here.
Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!
Link to all Classes Class 2 Class 3 Class 4 Class 5 Class 6 Class 7
You will work on Assessment 1 in class for the first 2 hours. You should be close to completion and hopefully be able to complete Assessment 1 by the end of class.
Use the attached experience planner, that we completed in class based on the CentreLink experience: Experience Planner- filled in partly after class 04.
Use it to help you create an experience planner for the event PDF that you are creating. This will give you the ability to focus on fixing negative experiences and planning for a positive experience with a product or service.
Inspirations for layouts can be found at various places:
More example of interactive PDFs (posted last week): Adobe Magazine, Font Magazine, Know-It-All Guidebook to King West, Vektoria Magazine, Blanket Magazine Revolution Art Magazine, Revolution Art Issue 40,
This InDesign workshop will look at the creation of interactive buttons.
The workshop will be held in class.
Check for updates!
To be handed out. Check for updates within the next hours.
Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!
Link to all Classes Class 1 Class 2 Class 3 Class 4 Class 5 Class 6 Class 7
Photo by Seemann on morgueFile.com
Upload the file below and create form fields using Adobe Acrobat Pro. Make all blue text fields, the name and date active.
Next fill all the data in and save and upload the file to MyKangan.
Due Date: 20/9
STEP 1: In Photoshop or Illustrator create a PDF portfolio page like the sample. Dim: 1024 px x 1645px x 150 ppi (resolution). (These dimensions are more a guideline and you can vary it if you have a different idea for your layout)
Include:
STEP 2: Create text fields in Adobe Acrobat Pro and add descriptions to your work. The descriptions need to state what tools and functions you used.
STEP 3: Save the final PDF and upload to MyKangan.
See example of Portfolio:
Photo by matthewbridges on morgueFile.com
![The concept was used on the German side as well with this 'Auch du sollst beitreten zur Reichswehr' [You too should join the German Army], design by Julius Engelhard, Image: courtesy of mental_floss](https://classoffederico.files.wordpress.com/2014/04/world-war-propaganda_auch-du-sollst-beitreten.jpg?w=432&h=552 "world war propaganda_Auch du sollst beitreten")
RAE - Research and Exploration 