Web Design + Strategy: July 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.


<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: "&#171; previous",*/
       /* dynamicArrowRightText: "next &#187;",*/
          });
       });
</script>

2. Add following code in between <body></body>. **

**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

<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>

2. Add code snippet below between open and closing body tags

<!--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.

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

Image Slideshow Demo

Nivo Slider (Image Slideshow) --download NivoSlider.zip from dropbox

1. Add following code in between <head></head>. Be sure all external css and javascript files are in correct file folders



<link href="themes/default/default.css" media="screen" rel="stylesheet" type="text/css">

<link href="nivo-slider.css" media="screen" rel="stylesheet" type="text/css">

<script src="scripts/jquery-1.7.1.min.js" type="text/javascript">

</script>

<script src="scripts/jquery.nivo.slider.js" type="text/javascript">
</script>

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    
</script>

2. Add following code in between the <body></body>.

Must have two nested divs with class and id accordingly.
All images to be included in slideshow should have a src and alt property/value.
To affect slider transition add data-transition property and any one of the following acceptable values: (sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse)


   <div class="slider-wrapper theme-default">
      <div class="nivoSlider" id="slider">
          <img alt="Tokyou Subway" data-transition="fade" src="images/image_1.jpg" title="Tokyo, Japan" />
          <img alt="Osaka Signs" data-transition="fade" src="images/image_2.jpg" title="Osaka, Japan" />
          <img alt="Palm Tree" data-transition="fade" src="images/image_3.jpg" title="Lahaina, Hawaii" />
      </div>
   </div>

**Optional: Modify default.css to make minor changes to Nivo Slider interface (ie remove navigation dots and/or previous and next arrows.

**To stop slider from auto play add $('#slider').data('nivoslider').stop(); to window.load function in <script>...


<script type="text/javascript">

    $(window).load(function() {

        $('#slider').nivoSlider();

 $('#slider').data('nivoslider').stop();

    });

    </script>

Thursday, July 26, 2012

Thursday, July 26 - Homework

1. Continue design layout for project 2. Designs for home, work selection, about, contact pages due Friday, July 27 between 11am-12pm

**Image slideshow, Fixed positioning, Password protection and CSS3 demo scheduled for Friday.

Typography and the Web

Typography Articles
Typography Speaks Louder Than Words
Why Typographic Choices Make a Difference
How to choose a Typeface
What Font to use?
Combining Typefaces
Type Guidelines and References for the web {great article by Smashing Magazine}
I Love Typography {articles, resources, fonts}
Web Font Services: The Good, Bad and Ugly

Web Type Services

Adobe TypeKit

Google Web Fonts

Web Font Embedding Services {via Smashing Magazine}

CSS3 @font-face explained

@font-face kit generator

Font Foundries {not all fonts are created equal, and should not have been created at all}
Emigre
League of Moveable Type
Berthold Types
Font Shop

Don't Know What Font it is? Try WhatTheFont.com

Wednesday, July 25, 2012

Wednesday, July 25 - Homework

1. Work on design layout design for project 2. Layouts for all uniquely different pages must be reviewed and approved before moving forward with web development. Design due Friday, July 27 between 11am-12pm

**Typography demo scheduled for Thursday; CSS3 demo scheduled for Friday.

Tuesday, July 24, 2012

Tuesday, July 24 - Homework

Moodboard for Project 2 due Wednesday, July 25 between 8-9am for review. Moodboard should be reviewed and approved before moving on to design layout.

Monday, July 23, 2012

Monday, July 23- Homework

Tomorrow, Tuesday, July 24 will be a free studio day. Attendance will not be taken. Instructor can be reached via email.

1. Work on Concept Phase of project 1. Wireframe and flowchart should be submitted via email by Tuesday, July 24 no later than 12pm.

2. 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.

Sunday, July 22, 2012

Usability Testing

Usability Articles
Jakob Nielsen - Usability Expert
Usability 101 by Jakob Nielsen
Misconceptions on Usablity by Jakob Nielsen
Usability Testing Demystified via A List Apart
Web Usability Test on TED

Online Usability Testing Tools
Survey Monkey (online survey tools)
Google Analytics (insight on how site is being used)
Five Second Test (usability test for design)
Clickheat (visual heat map)

Friday, July 20, 2012

Friday, July 20 - Homework

1. Upload Centering Layout Exercise to home page

2. Continue to work on Project 1. Keep in mind all project files must be uploaded to your personal site and submitted on a CD by Monday, July 23 between 8-9am.

Process files
Wireframe (PDF)
Flowchart (PDF)

Design files
Moodboard(PDF)
Design Layout (native file format, ie PSD, AI)

Web files
HTML
CSS (external)
images folder
Javascript (internal or external)

Thursday, July 19, 2012

Thursday, July 19 - Homework

1. Begin web development for Project 1. Friday's class will be devoted towards studio time/ Q&A troubleshooting for web development of Project 1. All project 1 files (flowchart, wireframe, moldboard, layout design, web files) due for submission next Monday, July 23 at 8am.

2. Upload Fancybox examples to your class homepage by start of next class (8am, Friday, July 20).

Fancybox Media (quicktime, youtube, iframe) setup

1. In order to set up Fancybox that displays media type files (videos, or other html documents/web pages) first include the JavaScript and CSS files in between the <head></head> of your HTML document, like this:



<!-- Add jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript">
</script>

<!-- Add mousewheel plugin (this is optional)  **be sure src reflects your file structure-->
<script src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript">
</script>

<!-- Add fancyBox css and javascript **be sure src reflects your file structure -->
<link href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" rel="stylesheet" type="text/css"></link>
<script src="fancybox/source/jquery.fancybox.pack.js?v=2.0.6" type="text/javascript">
</script>

<!-- Optional add helpers - button, thumbnail and/or media ; **be sure src reflects your file structure-->

<link href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" media="screen" rel="stylesheet" type="text/css"></link>
<script src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2" type="text/javascript">
</script>
<script src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0" type="text/javascript">
</script>
<link href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" media="screen" rel="stylesheet" type="text/css">

2. You must also call the fancybox function in between the <head></head> of your HTML document, like this:


<!--**Quicktime not supported in Fancybox when using Internet Explorer-->

<script type="text/javascript">
<!-- to play quicktime MUST HAVE class="fancybox-qt"   -->
$(".fancybox-qt").fancybox({
    width : 640,
    height : 340,
    beforeLoad : function() {
        var href = this.href,
            width = this.width,
            height = this.height;

        // Check if quictime movie and change content
        if (href.indexOf('.mov') != -1) {
            this.content    = '<object width="' + width + '" height="'+ height + '" pluginspage="http://www.apple.com/quicktime/download" data="'+ href + '" type="video/quicktime"><param name="autoplay" value="true"><param name="scale" value="tofit"><param name="controller" value="true"><param name="enablejavascript" value="true"><param name="src" value="' + href + '"><param name="loop" value="false"></object>';
            this.type       = 'html';
        }
    }
});
</script>

<!-- to play media MUST HAVE class="various fancybox.iframe"   -->
<script type="text/javascript">
         $(document).ready(function() {
    $(".various").fancybox({
     maxWidth : 800,
     maxHeight : 600,
     width  : '90%',
     height  : '90%',
     openEffect : 'fade',
     closeEffect : 'fade'
    });
   });
  </script>

<!-- Add non-media function to trigger fancybox styles, MUST HAVE class="fancybox" -->
<script type="text/javascript">
 $(document).ready(function() {
  $(".fancybox").fancybox({
   //or none (default is elastic)
  prevEffect  : 'fade',
  nextEffect  : 'fade',
  helpers : {
   title : {
    //inside, outside, float, over
    type: 'inside'
   },
   overlay : {
    //value between 0-1 
    opacity : 0.5,
    css : {
     //hexadecimal value to adjust fancybox interface bg
     'background-color' : '#fff'
    }
   },
  }
  }); <!--  closes $(".fancybox").fancybox({ line -->
 }); <!-- closes $(document).ready(function() {    -->
</script>

a) To set up a Fancybox link to quicktime video, create an <a> with an attribute of
class="fancy-qt" . If you would like view your Fancybox content as a gallery set, add an attribute of rel="yoursetname" in your <a>

<!--example of absolute URL quicktime video -->
<a class="fancybox-qt" title="The Lorax Trailer" href="http://trailers.apple.com/movies/universal/thelorax/lorax-tlr2_r640s.mov?width=640&amp;height=340"> View quicktime video</a>

<!--example of relative URL quicktime video -->
<a class="fancybox-qt" title="Suwappu" href="images/suwappu.mov"> View quicktime video</a>

b) To set up a Fancybox link to YouTube video, create an <a> with an attribute of
class="various fancybox.iframe" . Your href attribute should following this structure
href="you http://www.youtube.com/embed/yourvideocode/?autoplay=1" in your <a>,
yourvideocode should be a letter/number combination code found in your chosen YouTube's absolute URL.

<!--example of YouTube video -->
<!--syntax for youtube vids -->
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">View tron video</a>

<a class="various fancybox.iframe" href="http://www.youtube.com/embed/Pb_zZ3xItPI?autoplay=1">Example of restricted video</a>


<a class="various fancybox.iframe" href="http://www.youtube.com/embed/p1W8R5TSNNk?autoplay=1">View 30 Rock video</a>

c) To set up a Fancybox link to external html document(web page), create an <a>
with an attribute of class="various fancybox.iframe". Your href attribute should be either an absolute or relative URL.


<!--example of absolute URL -->
<a class="various fancybox.iframe" href="http://cnn.com/">Open CNN site</a>
<a class="various fancybox.iframe" href="http://gothamist.com/">Open Gothamist site</a>

<!--example of relative URL -->
<a class="various fancybox.iframe" href="../javascriptEx/exercise2.html">Open Javascript Exercise site</a>

d) To set up a Fancybox link to Google Map location, create an <a> with an attribute of
class="various fancybox.iframe". Your href attribute should be the absolute URL of a particular place.


<!--example of Google Maps -->
<a class="various fancybox.iframe" href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Fred+Jones+Jr+Museum+of+Art,+Elm+Avenue,+Norman,+OK&amp;aq=1&amp;oq=fred+jonorman+ok&amp;sll=35.209783,-97.445147&amp;sspn=0.005146,0.009012&amp;t=h&amp;ie=UTF8&amp;hq=Fred+Jones+Jr+Museum+of+Art,&amp;hnear=Elm+Ave,+Norman,+Oklahoma&amp;cid=15176728748174515505&amp;ll=35.210072,-97.44644&amp;spn=0.002975,0.003433&amp;z=18&amp;output=embed">Google maps (iframe)</a>

Fancybox: Image Gallery setup

1. In order to set up Fancybox first include the JavaScript and CSS files in between the <head></head> of your HTML document, like this:



<!-- Add jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript">
</script>


<script src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript">
</script>


<link href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" rel="stylesheet" type="text/css"></link>
<script src="fancybox/source/jquery.fancybox.pack.js?v=2.0.6" type="text/javascript">
</script>


<link href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" media="screen" rel="stylesheet" type="text/css"></link>
<script src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2" type="text/javascript">
</script>
<script src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0" type="text/javascript">
</script>

<link href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" media="screen" rel="stylesheet" type="text/css">

2. You must also call the fancybox function in between the <head></head> of your HTML document, like this:



<!-- Add function to trigger fancybox styles, MUST HAVE class="fancybox" -->
<script type="text/javascript">
 $(document).ready(function() {
  $(".fancybox").fancybox({
      //or none (default is elastic)
      prevEffect: 'fade',
      nextEffect: 'fade',
      helpers : {
   title : {
       //inside, outside, float, over
       type: 'inside'
   },
   overlay : {
    //value between 0-1 
    opacity : 0.5,
    css : {
   //hexadecimal value to adjust fancybox interface bg
                 'background-color' : '#fff'
    }
   },
      }
  }); <!--  closes $(".fancybox").fancybox({ line -->
 }); <!-- closes $(document).ready(function() {    -->
</script>

3. To set up a Fancybox link, create an <a> with an attribute of class="fancy box" . If you would like view your Fancybox content as a gallery set, add an attribute of rel="yoursetname" in your <a>


<!-- class="fancybox" triggers javascript function,  rel="flowers" triggers [set] name)-->


<a class="fancybox"  rel="flowers" title="Image 1" href="images/spring02.jpg"><img src="images/spring02_thumb.jpg" alt="" /></a>

Wednesday, July 18, 2012

Wednesday July 18 - Homework

1. Begin image optimization and web work flow prepping for Project 1. Thursday and Friday's class will be devoted towards studio time/ Q&A troubleshooting for web development of Project 1.

2. Upload ~~Fancybox and~~ Shadowbox examples to your class homepage by start of next class (8am, Thursday, July 19).

We will cover Fancybox demo on Thursday, July 19 (9-10:30am)

Tuesday, July 17, 2012

Modal Boxes

Shadowbox (not compatible with JQuery)
Fancybox / Fancybox v2 (some video playback bugs with IE 7-8)

Tuesday, July 17 - Homework

1. Complete moodboard for project 1 by end of class today. Get started on design layout for homework (due at end of class 11am-12pm on Wednesday).

2. Continue research, image collection and copy writing for project 1.

3. Upload Javascript Exercise to your class homepage by start of next class (8am, Wednesday, July 18).

Monday, July 16, 2012

Monday, July 16 - Homework

1. Work on Concept Phase of project 1. This should include a one paragraph summary of your chosen topic, wireframe and flowchart due Tuesday July 17, 8-9am.

2. Use Fireworks to optimized at least 6 large images (around 700px x 500px) and 6 cropped thumbnails (200 x 200 px) of your 6 original images. File size should be as small as possible without degrading quality.

We will be covering a Javascript demo next class session that will be helpful in the creation of Project 1.

Wednesday, July 11, 2012

Sketching and Wireframes

Wireframe Examples

Inspiration Feeds- 25 Examples
Zurb article about wireframe process, tips on design sketches, and sketching with intent/purpose

Flexible Framework and Prototyping
The Future of Wireframes
Foundation 3 --Created by Zurb flexible framework for building prototypes and production code on any kind of device

Wednesday, July 11: Homework

1. Add content and personalize your own website for exercise submission. Links should include flowchart 2 and html exercise 1. Apply HTML knowledge covered in class today to your main page.

2. Be sure to install Adobe Dreamweaver to computer. Will be using Dreamweaver in CSS demo tomorrow, Thursday, July 12.

Flowchart Resources

Flowcharts

Lovely Charts (Free Online Flowchart and Wireframe application)
Sample flowchart from Wired.com
Another sample flowchart from Wired.com
Should I make more coffee? Flowchart

Tuesday, July 10, 2012

Homework: Flowchart 2

Create a detailed flowchart mapping out all navigational and link connection of a website of your choice (should not be a E-Commerce site, nor Flash based or Content Management System (i.e. blog, wordpress) based. Chosen website should have at least 8 pages or more.

Flowchart due for dropbox.com** submission by start of class today, Wednesday, July 11, 9:00am.

Digital files should be sumbitted as JPG or PDF. If hand sketching, be sure to scan and save as JPG or PDF. All digital files should be labeled with FirstNameLastName_Flow2. **be sure you have accepted my invitation to dropbox.com before uploading files.

Class Exercise: Flowchart 01 (how to)

Create a detailed flowchart using appropriate flowchart symbols that maps out steps of an instructional task (how to make sandwich, change a lightbulb, wrap a present). Imagine the person you are explaining this task to has no knowledge or experience whatsoever with this specific task.

Flowchart due for hand in submission by end of class today, Tuesday, July 10, 12:15pm.

Monday, July 9, 2012

Web Domain + Hosting space

If you are interested in purchasing a custom web domain with hosting space, I recommend 1and1.com. The Linux 1&1 beginner hosting package costs $3.99 a month---that package includes 1 web domain; 50 GB web space; 250 e-mail accounts;

All OU Student have a school assigned web sub-domain and 1 GB worth of server space. Find Hosting website with portfolio.ou.edu. View upload instructions here (*you must share files/grant public permissions for all files/folders for others to see your site with a password)