1. Continue to work on Project 2. Keep in mind all project files must be uploaded to your personal site and submitted on a CD by Friday, August 3 between 8-9am. Please upload website to instructor computer station by 9am as well.
CD should include the following:
[Process files]
Wireframe (PDF), Flowchart (PDF)
[Design files]
Moodboard(PDF), Design Layout (native file format, ie PSD, AI)
[Web files]
HTML, CSS, Images, Scripts
2. Complete course evaluation for Web Design & Strategy by end of class today (log on with your 4x4 at http://eval.ou.edu)
Completing all of your Summer 2012 evaluations will automatically enter you into a drawing to win one of three Apple iPad 2.
Wednesday, August 1, 2012
Sunday, July 29, 2012
Monday, July 30 - Homework
1. Continue web development for Project 2. This week's class sessions will be devoted towards studio time/ Q&A troubleshooting for web development of Project 2.
Rough mockup of all html pages due for initial review this Thursday, Aug 2, 8am. Final project due for class review Friday, Aug 3, 9am.
Coda Slider Demo Setup
Coda Slider demo by Kevin Batdorf
Additional slider function options here
*Download sample files from dropbox, july30demo.zip
1. Add following code in between <head></head>. This will attach all required external CSS and Javascript files. Be sure to check accurate file path in src and href values.
**To modify tab/header panels, change content in between <h2></h2>.
**To modify panel content, delete "//Content goes here" and add appropriate text, image or links.
**To adjust placement of coda slider, create <div></div> around existing content and create CSS with absolute positioning.
3. Add non coda slider CSS rules in your own external CSS file (or internally in html doc). Modify coda slider styles (width of panels, color of tabs, etc) in coda-slider.css file.
Additional slider function options here
*Download sample files from dropbox, july30demo.zip
1. Add following code in between <head></head>. This will attach all required external CSS and Javascript files. Be sure to check accurate file path in src and href values.
<link rel="stylesheet" type="text/css" media="screen" href="css/coda-slider.css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="js/jquery.coda-slider-3.0.js"></script>
<script>
$().ready(function(){
$('#slider-id').codaSlider({
autoHeight: true,
/* used to remove previous and next buttons, set to true to use buttons*/ dynamicArrows: false,
/* used to setup text label on previous and next buttons*/
/*dynamicArrowLeftText: "« previous",*/
/* dynamicArrowRightText: "next »",*/
});
});
</script>
**To modify tab/header panels, change content in between <h2></h2>.
**To modify panel content, delete "//Content goes here" and add appropriate text, image or links.
**To adjust placement of coda slider, create <div></div> around existing content and create CSS with absolute positioning.
<div class="coda-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
//Content goes here
</div>
<div>
<h2 class="title">Panel 2</h2>
//Content goes here
</div>
</div>
3. Add non coda slider CSS rules in your own external CSS file (or internally in html doc). Modify coda slider styles (width of panels, color of tabs, etc) in coda-slider.css file.
Friday, July 27, 2012
Fade bg of button (using CSS3)
Required CSS3 to get image bg to fade for a link
.box1 {
/*original bg color*/
/*for rounded corners*/
border-radius: 5px;
/*CSS properties and values to fade transition, ignored by IE*/
-webkit-transition: background-color 2s;
-moz-transition: background-color 2s;
-o-transition: background-color 2s;
-ms-transition: background-color 2s;
transition: background-color 2s;
}
.box1:hover {
/*background fade in color*/
background-color: red;
}
img.fade {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
img.fade:hover {
opacity: 0;
}
Image Fade Button (using CSS3)
1. Add script tags in side open and closing head tags
3. Add the following (required) css rules
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// when the DOM is ready:
$(document).ready(function () {
// find the div.fade elements and hook the hover event
$('div.fade').hover(function() {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fade in quickly
fade.fadeIn(1000);
}
}, function () {
// on hovering out, fade the element out
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fade away slowly
fade.fadeOut(1000);
}
});
});
//-->
</script>
<!--div needs class name of fade, and any unique id -->
<div class="fade" id="fade1">
<!--step 4, add anchor tag if image will be a link -->
<a href="http://rachelfujita.com" target="_blank">
<!--step 3, add original image src and your image width -->
<img src="images/image_1b.jpg" width="200"/>
</a>
<!--step 5, add another div, then next hover image src and width value, and add anchor if img is used as link -->
<div>
<a href="http://rachelfujita.com" target="_blank"><img src="images/image_1.jpg" width="200"/></a>
</div>
</div>
3. Add the following (required) css rules
/*get rid of link borders in IE*/
img{
border:0px;
}
/*CSS to position first image, top and left should be unique numbers*/
#fade1 {
position: absolute;
top: 100px;
left: 320px;
}
/*CSS to position second image, top and left should be unique numbers*/
#fade2 {
position: absolute;
top: 100px;
left: 100px;
}
/*CSS to position third image, top and left should be unique numbers*/
#fade3 {
position: absolute;
top: 100px;
left:540px;
}
/*To overlap before and after image in same place*/
.fade div {
position: absolute;
top: 0;
left: 0;
display: none;
}
Friday, July 27 - Homework
1. Based on usability testing results, make reasonable revisions and modifications to Project 1 and repost to your portfolio site. Any significant and effective improvements made to Project 1 by next Monday, July 30, can improve your project portion of the final course grade.
2. Begin web development for Project 2. Next week's class sessions will be devoted towards studio time/ Q&A troubleshooting for web development of Project 2.
2. Begin web development for Project 2. Next week's class sessions will be devoted towards studio time/ Q&A troubleshooting for web development of Project 2.
CSS3 Resources
CSS3.info (general features)
W3Schools CSS3 Demos
CSS3.com (tutorials, demo)
Animation with CSS3
Roman Cortes CSS Coke Can and CSS 3D Painting
CSS3 Best Practices
Pure CSS Twitter Fail Whale
CSS3 Keyframe Animations
CSS3 Generator
W3Schools CSS3 Demos
CSS3.com (tutorials, demo)
Animation with CSS3
Roman Cortes CSS Coke Can and CSS 3D Painting
CSS3 Best Practices
Pure CSS Twitter Fail Whale
CSS3 Keyframe Animations
CSS3 Generator
Subscribe to:
Posts (Atom)