Final Critique for Project 2 will take place next class, Monday, Dec 10 at 3:00-5:00pm in the Wood Shop Crit space.
What to submit:
1. USB Flash Drive with following Proj 2 files (organized and labeled as follows)
>>Main Project folder with naming structure: FullName_Project2_ART271
+ "Design Files" folder (save final Design Layout as a PDF)
+ "Process Docs" folder (with PDF or JPEG scan of wireframe and thematic concept sketches)
+ "Web Files" folder (with appropriate HTML, CSS, javascript and images related to
Portfolio/Information website )
Wednesday, December 5, 2012
Monday, December 3, 2012
Final Web Site Tips
FAV ICONS
Fav icon (also know as URL icon, shortcut icon, website icon) can be used in association with a web page. Fav Icon typically appears to next to the website URL in a web browser, or in a web browser's list of bookmarks.
1. Create a graphic to use as your fav icon. Image size should be 16x16 (pixels). Save as a jpg.
2. Rename file extention to .ico (for example jdlogo.ico)
3. Insert <link rel="shortcut icon" href="jdlogo.ico" /> inside head section of html document. Be sure your .ico graphic is in same location as your html file.
META TAGS
Meta tags provide search engines with information about a particular web site. Using Meta tags can increase your readership and traffic when they are properly done. Each web browser processes only the meta tags they understand and ignores the rest.
Meta tags are inserted into the <head> section of your HTML page
for example:
<!-- Description meta tag gives search engines a summary of what the page is about-->
<meta name="description" content="Jane Doe is a graphic designer living in Moscow, ID. Jane received her Bachelor of Fine Arts from the University of Idaho and Master of Fine Arts from the University of Washington. She is available for branding, promotional marketing, and web site design.">
<!--Keyword meta tag gives search engines potential words/phrases users can use in order to find your website -->
<meta name="keywords" content="Jane Doe, graphic design, Moscow Idaho, Idaho graphic design, advertising, photoshop, web design, designer,">
<meta name="author" content="Jane Doe">
ADDITIONAL OPTIMIZATION METHODS
Remember that it takes time for web sites to appear in search engines. Uploading html files to a web server does not automatically mean users will easily find your web site. You must take various measures to promote and share your website with others, and in time, your site may be be searchable via various web search engines.
General Tips from Google to improve your website http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf
Add site to google search engine (https://www.google.com/addurl)
Google Analytics (http://www.google.com/analytics/index.html)
Google Analytics provides statistics about the visits to a website. Can track how many people are visiting your site, geographical location of viewers, what platform, web broswer use views site in, etc.
1AND1 WEB DOMAIN AND HOSTING PACKAGES
If you are interested in purchasing a custom web domain with hosting space, I recommend 1and1.com. 1and1 has a promotion right now for domain name registration (yourname.com) for $0.99.
You will also need to purchase a web hosing package (that provides web hosting space). The Linux 1&1 starter hosting package costs $2.49 a month---that package includes 50 GB web space; 250 e-mail accounts
Fav icon (also know as URL icon, shortcut icon, website icon) can be used in association with a web page. Fav Icon typically appears to next to the website URL in a web browser, or in a web browser's list of bookmarks.
1. Create a graphic to use as your fav icon. Image size should be 16x16 (pixels). Save as a jpg.
2. Rename file extention to .ico (for example jdlogo.ico)
3. Insert <link rel="shortcut icon" href="jdlogo.ico" /> inside head section of html document. Be sure your .ico graphic is in same location as your html file.
META TAGS
Meta tags provide search engines with information about a particular web site. Using Meta tags can increase your readership and traffic when they are properly done. Each web browser processes only the meta tags they understand and ignores the rest.
Meta tags are inserted into the <head> section of your HTML page
for example:
<!-- Description meta tag gives search engines a summary of what the page is about-->
<meta name="description" content="Jane Doe is a graphic designer living in Moscow, ID. Jane received her Bachelor of Fine Arts from the University of Idaho and Master of Fine Arts from the University of Washington. She is available for branding, promotional marketing, and web site design.">
<!--Keyword meta tag gives search engines potential words/phrases users can use in order to find your website -->
<meta name="keywords" content="Jane Doe, graphic design, Moscow Idaho, Idaho graphic design, advertising, photoshop, web design, designer,">
<meta name="author" content="Jane Doe">
ADDITIONAL OPTIMIZATION METHODS
Remember that it takes time for web sites to appear in search engines. Uploading html files to a web server does not automatically mean users will easily find your web site. You must take various measures to promote and share your website with others, and in time, your site may be be searchable via various web search engines.
Add site to google search engine (https://www.google.com/addurl)
Google Analytics (http://www.google.com/analytics/index.html)
Google Analytics provides statistics about the visits to a website. Can track how many people are visiting your site, geographical location of viewers, what platform, web broswer use views site in, etc.
1AND1 WEB DOMAIN AND HOSTING PACKAGES
If you are interested in purchasing a custom web domain with hosting space, I recommend 1and1.com. 1and1 has a promotion right now for domain name registration (yourname.com) for $0.99.
You will also need to purchase a web hosing package (that provides web hosting space). The Linux 1&1 starter hosting package costs $2.49 a month---that package includes 50 GB web space; 250 e-mail accounts
Wednesday, November 28, 2012
Week 15 Day 2 - Wednesday, Nov 28 - Homework
1. Fill out course evaluations for ART271 by Sunday, Dec 9.
https://vandalweb.uidaho.edu/PROD/twbkwbis.P_WWWLogin?ret_code=I.
2. Continue working on coding development for Project 2. Please post links to your current coded pages onto your UI webpages space (index.html/home page) by Friday, Nov 30, 5pm for additional review.
**Final Critique of Project 2 will take place Monday, Dec 10, 3:00-5:00pm in the Shop Crit Space
***Demo on Monday will included Search Engine Optimization, Fav Icons and using FTP setup with web hosting companies
https://vandalweb.uidaho.edu/PROD/twbkwbis.P_WWWLogin?ret_code=I.
2. Continue working on coding development for Project 2. Please post links to your current coded pages onto your UI webpages space (index.html/home page) by Friday, Nov 30, 5pm for additional review.
**Final Critique of Project 2 will take place Monday, Dec 10, 3:00-5:00pm in the Shop Crit Space
***Demo on Monday will included Search Engine Optimization, Fav Icons and using FTP setup with web hosting companies
Monday, November 26, 2012
Week 15 Day 1- Monday, Nov 26 - Homework
1. Fill out course evaluations for ART271 by Sunday, Dec 9.
https://vandalweb.uidaho.edu/PROD/twbkwbis.P_WWWLogin?ret_code=I.
2. Continue working on coding development for Project 2. Final project 2 due Monday, Dec 10.
https://vandalweb.uidaho.edu/PROD/twbkwbis.P_WWWLogin?ret_code=I.
2. Continue working on coding development for Project 2. Final project 2 due Monday, Dec 10.
Wednesday, November 14, 2012
Week 13 Day 2 - Wednesday, Nov 14 - Homework
1. Begin coding development for Proj 2. Rough review of 2 html pages due Nov 26 (Monday class after Thanksgiving break).
2. Continue Visual Journal Blog entries. This will be the last required week of journal entries.
2. Continue Visual Journal Blog entries. This will be the last required week of journal entries.
Have a Great Thanksgiving Break!
Slideshow Demo
Nivo Slider created by Dev7Studios
1. Download "slideshow Demo.zip" from our dropbox folder onto a Flash drive and uncompress. [Or download all files and folders in slideshow Demo folder on our dropbox)
2. Create a new html document and save in slideshow Demo folder.
3. Copy and paste following code into <head> tag. This code attached necessary javascript files.
<!--OPTIONAL: additional stylesheets to change slideshow interface theme, default, light, dark or bar -->
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<!--REQUIRED: provided stylesheet required for basic slideshow styles-->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
5. Copy and paste following code into <body> tag. This code sets up images in your slideshow
<!-- REQUIRED: two divs to set up slideshow interface-->
<!--change "default" to light,dark or bar to switch visual themes-->
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<!-- REQUIRED: img tag will display image in slideshow, src is location and name of image, can add caption text with title attribute and value-->
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" title="This is an example of a caption" />
</div>
</div>
6. Add this css rule for the "slider-wrapper" class selector either in an internal or external css file. This will set up the size and position of the slideshow.
.slider-wrapper {
/* adjusts size of slideshow, % will scale*/
width: 500px;
/* can use margin set to auto to center on page, or absolute positioning values*/
margin: 10px auto;
}
1. Download "slideshow Demo.zip" from our dropbox folder onto a Flash drive and uncompress. [Or download all files and folders in slideshow Demo folder on our dropbox)
2. Create a new html document and save in slideshow Demo folder.
3. Copy and paste following code into <head> tag. This code attached necessary javascript files.
<!-- REQUIRED: attach external javascript files and
scripts-->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="scripts/jquery-1.7.1.min.js"></script>
<script
type="text/javascript"
src="scripts/jquery.nivo.slider.js"></script>
<script
type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:
'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, //
For slice animations
boxCols: 8, //
For box animations
boxRows: 4, //
For box animations
animSpeed:
500, // Slide transition speed
pauseTime:
5000, // How long each slide will show
startSlide: 0,
// Set starting Slide (0 index)
directionNav:
true, // Next & Prev navigation
controlNav:
true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover:
false, // Stop animation while hovering
manualAdvance:
false, // Force manual transitions
prevText:
'Prev', // Prev directionNav text
nextText:
'Next', // Next directionNav text
randomStart:
false, // Start on a random slide
beforeChange:
function(){}, // Triggers before a slide transition
afterChange:
function(){}, // Triggers after a slide transition
slideshowEnd:
function(){}, // Triggers after all slides have been shown
lastSlide:
function(){}, // Triggers when last slide is shown
afterLoad:
function(){} // Triggers when slider has loaded
});
});
</script>
4. Copy and paste following code into <head> tag. This code attached necessary stylesheets.<!--OPTIONAL: additional stylesheets to change slideshow interface theme, default, light, dark or bar -->
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<!--REQUIRED: provided stylesheet required for basic slideshow styles-->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
5. Copy and paste following code into <body> tag. This code sets up images in your slideshow
<!-- REQUIRED: two divs to set up slideshow interface-->
<!--change "default" to light,dark or bar to switch visual themes-->
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<!-- REQUIRED: img tag will display image in slideshow, src is location and name of image, can add caption text with title attribute and value-->
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" title="This is an example of a caption" />
</div>
</div>
6. Add this css rule for the "slider-wrapper" class selector either in an internal or external css file. This will set up the size and position of the slideshow.
.slider-wrapper {
/* adjusts size of slideshow, % will scale*/
width: 500px;
/* can use margin set to auto to center on page, or absolute positioning values*/
margin: 10px auto;
}
Monday, November 12, 2012
Week 13 Day 1- Monday, Nov 12 - Homework
1. Upload Video and Drop Down Menu examples for demo today on your class site (UI Webpages) by start of next class, Wednesday, Nov 14, 2:30pm.
2. Begin coding development for Proj 2. Rough review of 2 html pages due Nov 26 (Monday class after Thanksgiving break).
UI Art Events This Week:
Chair Competition @ Pritchard Gallery, Wednesday, Nov 15 7pm (prizes available)
Conversations with Chairs (Sculpture and Dance Collaboration), @ Pritchard Gallery, Wednesday, Nov 14, 7pm
Pecha Kucha, @Pritchard Gallery, Thursday, Nov 15, 8pm
2. Begin coding development for Proj 2. Rough review of 2 html pages due Nov 26 (Monday class after Thanksgiving break).
UI Art Events This Week:
Chair Competition @ Pritchard Gallery, Wednesday, Nov 15 7pm (prizes available)
Conversations with Chairs (Sculpture and Dance Collaboration), @ Pritchard Gallery, Wednesday, Nov 14, 7pm
Pecha Kucha, @Pritchard Gallery, Thursday, Nov 15, 8pm
Subscribe to:
Posts (Atom)