INET 2675 Wed Design Business Fundamentals
MWF 12:00pm –12:50pm
Instructor: Justin Hoffman
=====================================================
LETS DISCUSS YOUR FINAL PROJECTS… PRESENTATION WED 14 DECEMBER @ 1PM – 3PM
BEGIN TO BRING YOUR MIND BACK TO YOUR CLASS PROJECT…
VALERIE AND ACACIA… CREATE A WEBSITE FOR INTERNET, NEW MEDIA, AND GAMING ACTIVITIES AT CASPER COLLEGE…
SHELBY… CREATE A WEBSITE FOR ENTREPRENEURSHIP AT THE COLLEGE..
—————————————–
PLACE ALL YOUR ASSIGNMENTS RELATED TO THE GROUP ON THE PAGE… YOUR VIRAL VIDEO, INFORMATION, OR IMAGES OF YOUR FACEBOOK PAGES, LINKS TO YOUR FACEBOOK PAGES, TWITTER FEEDS, ADVERTISEMENTS, YOUR INTERVIEWS, YOUR PERSONAL WORK THAT MAY BE RELEVEANT OR OTHER STUDENT WORK THAT MAY BE RELEVENT, ETC …
=====================================================
BELOW ARE CONTINUED ACTIVITIES FOR MODIFICATION OF YOUR SITES…
=====================================================
1. HOW DID THE RE-CONFIGURING GO ON YOUR SITES SO FAR?
2. WAS ANYONE ABLE TO FIGURE OUT THE EXTRA CREDIT ON FIXING THE HEAD BANNER… WILL YOU SHOW US?
3. WAS ANYONE ABLE TO FIGURE OUT HOW TO DO SOME REPOSITIONING? TELL US ABOUT YOUR EXPERIENCE AND SHOW US?
4. OK … LET’S FIND OUT HOW TO FIX UP THE FOOTER…
=====================================================
FOOTER
1st Step — go into the twenty ten them folders and download the footer.php file onto your desktop…
2nd Step — upload the footer.php file into your child theme folder … the same folder that stores your style.css file… for example my folder is the Adapter folder…
3rd Step — go into the footer.php file and move the
<?php
/*
* move the wrapper up under the main…
*/
?>
</div><!– #wrapper –>
4th Step — Now you are ready!! You can go back into your style.css and begin to play with the footer and its contents…
#footer {
background:none repeat scroll 0 0 #242424;
color#837E76;
margin: 60px auto;
padding: 0 60px;
width: 860px;
height: 300px;
}
5th Step — check out the tricky little colophon — and figure out what you want to do with it…
======================================================
======================================================
In Class Assignment:
– Change around the Positioning of the objects on the page and add your Own Header
– Work on the Footer and the Widget contents in the Footer…
– Find out something creative to do with the colophon…
—————————————
Super Extra Credit — Get Rid of the WordPress Titling 
—————————————
==================================================
==================================================
OCTOBER 24TH – WORDPRESS WORKSHOP… FOLLOW THIS LINK…
— we will check out the file folders in the cpanel
— refresher on firebug for firefox
— we will begin learning how to create a child theme for own own personal adaptation of the wordpress themes….
===================
Ok… first things first…
1. Lets take a look at our Cpanel!! — Go ahead and log in … and together we will look where the files are ….
2. There are 3 main folders:
WP- Admin == back end stuff … what is that?
WP – Content == themes… like the one will create (adapter)
WP- Includes == the stuff for the front end
3. Without closing your Cpanel, make a new browser window or tab and log into your front end panel (via an internet browser like safari/firefox/etc.) and log into your WordPress Site … do you know how to find it? do you remember your passwords? Make sure to place it in a place you can always get to it….
4. Notice how the folders in the theme folder are also provided under your selections on the back end….
– Go ahead and switch the themes and look at the changes… How are the themes designed (For example: Header, Sidebar, Footer, Body, etc?
——————————————————————————————–
Ok… cool… now we have an idea about the relationship to the cpanel and front end…. do we?
5. Next step…. lets download the plugin of firebug to our browsers if you have not done that already…
— can someone come up to the front and show us how firebug works?
——————————————————————————————–
6. We are going to use firebug in order to bring code from our wordpress theme/site, change it and build a new theme… OUR OWN THEME!! Alright!! — Otherwise known as a child theme… Why is it called a childtheme?
– First lets go to our cpanel again… go to our themes folder… and create a new folder…
– I created Adapter
7. Now go inside Adapter … and page called: style.css
8. On that page… we are going to begin typing a comment area that identifies our theme:
/*
Theme Name: Adapter
Theme URI: http://www.justinhoffman.net
Description: A child theme of Twenty Ten
Author: justin
Author URI: http://www.justinhoffman.net
Template: twentyten
Version: 1.0
*/
9. Next we are going to add a link to the twenty ten theme:
@import url(../twentyten/style.css);
10. Now we can use firebug … go to our previous wordpress site …take some of the code and add updates to the previous theme… for example I chose to change the Menu
/* Menu 
————————- */
#access {
background:#580000 ;
}
#access a {
color: #888888;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
11. You can keep doing this to change all sorts of different parts of the site… go ahead and try yourselves… Feel free to go to the Adapter folder on the buyadoo server and take the code from the style.css or you can take the entire file…
====ASSIGNMENT / IN CLASS LABORATORY =========================
How to do it? Make a new folder in the cpanel …
— link that folder when you create the style.css file …
— and change your theme to see the result…
1. use this example of wordpress to find code to change…
2. change it yourself with your impressive html skills …
3. or use this link here which is a basic example of the twenty ten theme that we are modifying….
===========================================================
HOMEWORK: Remember… yes you will be graded on participating in the activity … but don’t worry about the appearance… worry more about playing around with learning about design implementations…
===========================================================
=====================================================
Ok… so lets install a content management system on our pages…
Follow this step by step tutorial on places the systems on your pages….
http://justinhoffman.net/?page_id=1678
=====================================================
Ok … nice job with the worst web sites in the world…
We Learned:
1. How to place a picture
2. How to control CSS on multiple pages
3. How to create a link
4. How to embed animated gifs
5. How to make a fun site!!
They were very entertaining… although there is one thing missing…
Lets try some absolute positioning…. We will create buttons with some absolute position here…
Lets first look over this source code tutorial:
http://www.buyadoo.com/badwebpagewithcode.html
Here is the page with a button…
http://www.buyadoo.com/page3.html
and lets make sure to check out the css page that controls it….
also… check out the first link on:
http://www.buyadoo.com/page2.html
and be sure to learn and create a summary of div positioning…
==================================
==================================
OCTOBER 31ST— CASCADING STYLE SHEETS
Follow these Steps to your CSS Glory!!!
==================================
===========================================
Access and tutorials for the temporary server
==================================
Our first workshop is the creation of your own website:
please read the the following tutorial carefully
please read the w3school guide to html carelessly
==================================
Our first task is to get comfortable with basic html.
First Step: Download the program Notepad++ — Its free
Second Step: Make a document in notepad with html code and make sure
that the document ends with .htm or .html
— check this link for content you can use to place in the document.
— you can also check out W3C School to get some ideas of extra code
to place in your document…. Go crazy with the Try It Yourself Editor
Third Step: Click on the document you made and open it with a web browser
Fourth Step: Sit back in your chair and smile…
==================================
What are Cascading Style Sheets??? HMMM??? Here is a short definition and historical background with references and Links…
Here is a link with the code to make a really basic site !!! please read the basic html document tutorial carefully Here is a link with the code to make a site a little more advanced !!! please read the more advanced code ….
NOTE: YOU MAY HAVE TO RE-WRITE SOME OF THE QUOTATION MARKS IN THE CODE…
www.buyadoo.com/myfirstsite.html
www.buyadoo.com/mysecondsite.html
Here is a link with the code for a css site — !!! please read the basic css document and basic html document … you will need two files!!
check the file: ex1.css – on the server
Here is a link with the code for a little more advanced css site!!! please read the css document and 1page.html document and 2page.html document… notice how easy it is to make more documents with the same style!!
check the file: ex2.css – on the server
—– for more styles, shapes, images, etc… check out W3 Schools reference for CSS :
Here is a link with a boatload of tutorials and links for reference:
http://www.d.umn.edu/itss/training/online/webdesign/css.html
What happens if I place an image on the server?
making your pictures “web safe” in photoshop and using photoshop for design
- a step by step “save for web” tutorial
- a good philosophical analysis between the difference of “save as” and “save for web”
- making your pictures “webs safe” in photoshop
- using photoshop to design your site
Here is a cool grid layout manager for css…
===============================================================================
=================================================
IN CLASS ASSIGNMENT: CREATE A BAD WEBSITE WITH LOTS OF THOSE FUN STYLISTIC GOODIES THAT YOU CAN GET LIKE TRICK OR TREAT CANDY FROM THE W3C SCHOOL
===============================================================================
=================================================
OCTOBER 24TH — MAKING A BUMPER/LOGO FOR OUR STOP MOTION VIDEOS!!
==================================================
In class laboratory, complete our stop motion videos and create a motion bumper with sound effects to add as the opening bumper, closing bumper, or both….
Here is the lecture for Making a Bumper or Logo
==================================================
Ok… now its your turn to create your own Bumpers… Have at it!!
— Follow the instructions above as needed…
1. Create a Logo
2. Add Audio
3. Add motion to the logo
4. Add Text — you can bring it from photoshop too..
5. Add it as a bumper to your stop motion pumpkin piece… it can be the beginning or ending bumper or both…
==================================================
===============================
OCTOBER 19TH,
===============================
PRESENTATIONS OF YOUR EXQUISITE CORPSE.
— WHAT EXQUISITE CORPSE DID YOU CHOOSE?
— WHY DID YOU CHOOSE IT?
— WHAT WERE THE RESULTS FROM YOUR EXQUISITE CORPSE.
— HOW DO YOU FEEL YOU MAY BE ABLE TO USE EXQUISITE CORPSE TO ENGAGE A PUBLIC AROUND A CONCEPT?
–SHOW US PICTURES, VIDEOS, OR THE WEBSITE WHERE THE EXQUISITE CORPSE TOOK PLACE…
####################
WE WILL ALSO RECEIVE AND GO OVER YOUR MIDTERM GRADES AT THE COMPLETION OF CLASS…
===============================
OCTOBER 6, 2011
STOP MOTION EXQUISITE CORPSE
===============================
OCTOBER 4, 2011
===============================
EXQUISITE CORPSE PROPS (BRING AS HOMEWORK) AND
PRESENTATIONS ( A SUMMARY AND DISCUSSION OF YOUR CHOSEN
EXQUISITE CORPSE AND WHY YOU CHOSE IT).
===============================
SEPTEMBER 30th, 2011
===============================
PHENOMENOLOGY OF EXQUISITE CORPSE (Click for lecture notes)
HOMEWORK —
— Choose an Exquisite Corpse Main Stream Topic and write a bio summary, and tell us something we did not know about it in class on Monday…
–Bring Props for next monday’s Video Cadaver Laboratory!! Break out your Halloween stuff early!!
DISCUSSION:
— Can you think of an area untouched by collaborat