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
Wednesday, November 28, 2012
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
Video Demo
1. Convert video to mp4, ogg, and webm video formats (will ensure cross browser compatibility).
Miro video converter (converts to mp4, ogg, webm)
2. Insert following code to display video. Replace src value with location and name of your video files.
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
</object>
</video>
3. Test video in multiple browsers (Safari, Firefox, Chrome, IE) and computer platforms (PC vs Mac).
**UI webpages server does not support ogg video (will not work in Firefox)
For more resources on displaying videos with HTML, check out
w3schools.com
Today's demo example
Miro video converter (converts to mp4, ogg, webm)
2. Insert following code to display video. Replace src value with location and name of your video files.
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
</object>
</video>
3. Test video in multiple browsers (Safari, Firefox, Chrome, IE) and computer platforms (PC vs Mac).
**UI webpages server does not support ogg video (will not work in Firefox)
For more resources on displaying videos with HTML, check out
w3schools.com
Today's demo example
Wednesday, November 7, 2012
CAA Lecture Series: Rayce Bird Thursday and Friday
Two lecture extra credit opportunities for this week. Those who attend the lecture have the option to write up a 1 page summary about your experience and what you learned from each speaker's talk/worshop. Submission of lecture summary can result on make up points/extra credit. Summary must be printed and submitted to instructor no later than Tuesday, Nov 13 (for Rayce Bird). If you would like extra credit for more than one lecture, you must write up a summary for each presentation attended.
CAA Lecture Series: Rayce Bird, 5:00 pm Thursday, Nov 8th TLC – 040 (Commons)
Artist for Adobe Systems, Winner of SyFy's Face Off and University of Idaho College of Art & Architecture '11 VTD graduate returns to the University of Idaho for a conversation on design, concept art, and career. The path from hard working student to harder working professional is filled with twists and turns, so join us for a talk on his beliefs, school, work, and the creative spirit.
Rayce Bird Photoshop Workshopm 2:30 pm Friday, Nov 9th @ Albertson Bldg (College of Business) in Rm 102
Rayce Bird leads a hands-on workshop in Photoshop and Concept Art. Come gain insight into creating concept art, developing creative ideas, as well as learn tricks of the trade in Photoshop. A laptop with Photoshop and a Sketchbook will be needed.* * Priority Seating for VTD Students
Adobe has a video of Rayce working last Halloween
CAA Lecture Series: Rayce Bird, 5:00 pm Thursday, Nov 8th TLC – 040 (Commons)
Artist for Adobe Systems, Winner of SyFy's Face Off and University of Idaho College of Art & Architecture '11 VTD graduate returns to the University of Idaho for a conversation on design, concept art, and career. The path from hard working student to harder working professional is filled with twists and turns, so join us for a talk on his beliefs, school, work, and the creative spirit.
Rayce Bird Photoshop Workshopm 2:30 pm Friday, Nov 9th @ Albertson Bldg (College of Business) in Rm 102
Rayce Bird leads a hands-on workshop in Photoshop and Concept Art. Come gain insight into creating concept art, developing creative ideas, as well as learn tricks of the trade in Photoshop. A laptop with Photoshop and a Sketchbook will be needed.* * Priority Seating for VTD Students
Adobe has a video of Rayce working last Halloween
Week 12 Day 2 - Wendesday, Nov 7 - Homework
1. Begin refinement of design layout for Proj 2 interface and prepare imagery for slicing and compression process.
Next week we will cover demos on drop down menus, image slideshows, video media.
2. Continue visual journal blog.
Next week we will cover demos on drop down menus, image slideshows, video media.
2. Continue visual journal blog.
Monday, November 5, 2012
Mini Group Critique Scheduled for Wednesday, Nov 7
Mini group critiques for Project 2 will be conducted next class, Wednesday, Nov 7. Please save each of your layout design pages as PDFs onto a USB Flash Stick or somewhere within our class dropbox space by 2:30pm. We will view each student's design on a projector in my studio space.
Instead of meeting together as a class next Wednesday, please arrive promptly to Art & Architecture North Bldg, Rm 306 during your group review.
Group 1 (2:30pm, meet at AA North Rm 306): Kate, Andrew, Tara, Daniel
Group 2 (3:00pm, meet at AA North Rm 306): Robin, Emalee, Whitney
Group 3 (3:30pm, meet at AA North Rm 306): Kyle, Christian, Lindzey, Sierra
Group 4 (4:00pm, meet at AA North Rm 306): Becca, Lydia, Tanner
Instead of meeting together as a class next Wednesday, please arrive promptly to Art & Architecture North Bldg, Rm 306 during your group review.
Group 1 (2:30pm, meet at AA North Rm 306): Kate, Andrew, Tara, Daniel
Group 2 (3:00pm, meet at AA North Rm 306): Robin, Emalee, Whitney
Group 3 (3:30pm, meet at AA North Rm 306): Kyle, Christian, Lindzey, Sierra
Group 4 (4:00pm, meet at AA North Rm 306): Becca, Lydia, Tanner
Week 12 Day 1 - Monday, Nov 5 - Homework
1. Continue design layout for Project 2. PDF of final design layout for all pages due next class, Wednesday, November 7, 2:30pm. All intended content (text copy, imagery, additional media) must be placed in this design layout, no placeholder content.
Web Design Tutorials
PSDTuts
http://psd.tutsplus.com/tutorials/interface-tutorials/retro-web-design-layout/
http://psd.tutsplus.com/tutorials/interface-tutorials/fabric-textured-web-layout/
http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-professional-web-2-0-layout/
http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-grungy-translucent-web-portfolio-design/
http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-watercolor-themed-website-design-with-photoshop/
http://psd.tutsplus.com/tutorials/interface-tutorials/photoshop-web-design-night-theme/
http://psd.tutsplus.com/tutorials/interface-tutorials/how-to-create-a-grunge-web-design-in-photoshop/
WebTuts
http://webdesign.tutsplus.com/tutorials/visuals/design-a-retro-layout-in-photoshop-starting-out/
http://webdesign.tutsplus.com/tutorials/complete-websites/design-a-clean-e-commerce-website-interface-in-photoshop/
http://webdesign.tutsplus.com/tutorials/visuals/designing-microfilm-a-clean-photography-theme/
http://psd.tutsplus.com/tutorials/interface-tutorials/retro-web-design-layout/
http://psd.tutsplus.com/tutorials/interface-tutorials/fabric-textured-web-layout/
http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-professional-web-2-0-layout/
http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-grungy-translucent-web-portfolio-design/
http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-watercolor-themed-website-design-with-photoshop/
http://psd.tutsplus.com/tutorials/interface-tutorials/photoshop-web-design-night-theme/
http://psd.tutsplus.com/tutorials/interface-tutorials/how-to-create-a-grunge-web-design-in-photoshop/
WebTuts
http://webdesign.tutsplus.com/tutorials/visuals/design-a-retro-layout-in-photoshop-starting-out/
http://webdesign.tutsplus.com/tutorials/complete-websites/design-a-clean-e-commerce-website-interface-in-photoshop/
http://webdesign.tutsplus.com/tutorials/visuals/designing-microfilm-a-clean-photography-theme/
Thursday, November 1, 2012
CAA Lectures next week Nov 5 (mon), Nov 8 & 9 (thurs/fri)
Three lecture extra credit opportunities for next week. Those who attend the lecture have the option to write up a 1 page summary about your experience and what you learned from each speaker's talk/worshop. Submission of lecture summary can result on make up points/extra credit. Summary must be printed and submitted to instructor no later than Thursday, Nov 8 (For Dwaine Carver) and Tuesday, Nov 13 (for Rayce Bird). If you would like extra credit for more than one lecture, you must write up a summary for each presentation attended.
Architecture Lecture Series: Dwaine Carver, 1:30 pm Monday, Nov 5th Whitewater Room (Idaho Commons)
The Architecture Guest Critic Series is very excited to announce that Dwaine Carver will be the second visiting critic for the Fall 2012 semester. He will be presenting a lecture entitled “Recurring Oppositions in Architecture” at 1:30 PM on Monday November 5th in the Idaho Commons’ Whitewater Room followed by participation in studio critiques. Dwaine is an accomplished architectural designer, arts planner and public artist with the firm of Carver Thornton Young in Boise, Idaho. A graduate of the Rhode Island School of Design and Harvard University, Dwaine has served as a lecturer with the College of Art and Architecture’s Idaho Urban Research & Design Center in Boise and has been a long-time supporter of CAA’s efforts there.
CAA Lecture Series: Rayce Bird, 5:00 pm Thursday, Nov 8th TLC – 040 (Commons)
Artist for Adobe Systems, Winner of SyFy's Face Off and University of Idaho College of Art & Architecture '11 VTD graduate returns to the University of Idaho for a conversation on design, concept art, and career. The path from hard working student to harder working professional is filled with twists and turns, so join us for a talk on his beliefs, school, work, and the creative spirit.
Rayce Bird Photoshop Workshopm 2:30 pm Friday, Nov 9th @ Albertson Bldg (College of Business) in Rm 102
Rayce Bird leads a hands-on workshop in Photoshop and Concept Art. Come gain insight into creating concept art, developing creative ideas, as well as learn tricks of the trade in Photoshop. A laptop with Photoshop and a Sketchbook will be needed.* * Priority Seating for VTD Students
Adobe has a video of Rayce working last Halloween
Architecture Lecture Series: Dwaine Carver, 1:30 pm Monday, Nov 5th Whitewater Room (Idaho Commons)
The Architecture Guest Critic Series is very excited to announce that Dwaine Carver will be the second visiting critic for the Fall 2012 semester. He will be presenting a lecture entitled “Recurring Oppositions in Architecture” at 1:30 PM on Monday November 5th in the Idaho Commons’ Whitewater Room followed by participation in studio critiques. Dwaine is an accomplished architectural designer, arts planner and public artist with the firm of Carver Thornton Young in Boise, Idaho. A graduate of the Rhode Island School of Design and Harvard University, Dwaine has served as a lecturer with the College of Art and Architecture’s Idaho Urban Research & Design Center in Boise and has been a long-time supporter of CAA’s efforts there.
CAA Lecture Series: Rayce Bird, 5:00 pm Thursday, Nov 8th TLC – 040 (Commons)
Artist for Adobe Systems, Winner of SyFy's Face Off and University of Idaho College of Art & Architecture '11 VTD graduate returns to the University of Idaho for a conversation on design, concept art, and career. The path from hard working student to harder working professional is filled with twists and turns, so join us for a talk on his beliefs, school, work, and the creative spirit.
Rayce Bird Photoshop Workshopm 2:30 pm Friday, Nov 9th @ Albertson Bldg (College of Business) in Rm 102
Rayce Bird leads a hands-on workshop in Photoshop and Concept Art. Come gain insight into creating concept art, developing creative ideas, as well as learn tricks of the trade in Photoshop. A laptop with Photoshop and a Sketchbook will be needed.* * Priority Seating for VTD Students
Adobe has a video of Rayce working last Halloween
Subscribe to:
Posts (Atom)