Skip to content

Tutorials – Media Design Theory

Here is our class for media design theory….

====================================================

1st assignment — Photography Workshop/Building Your Advertisement

— Research, Photography and Design

— Web Site Presentation

— Creating a Web Safe Photoshop File

2nd Assignment — Building a “Crazy Bad” Web Site (First Html Site)

— Learning BBedit

— Purchasing a Domain Name and Transferring the Nameservers … follow link for tutorial on transferring nameservers for your domain…  the tutorial is at the bottom of the page…

— Building a sound Html Site

— Presentation of your “Crazy Bad” Website

3rd Assignment — Building Multiple Cool CSS Pages  Atleast 3!!!— How???

— Learning about the cpanel and the buyadoo.com server space, you will place your image on the server!!

— Build an opening page with atleast two links

— 1 link goes to your “bad website”

— 1 link goes to your advertising homework … with a summary about the advertisement…

— THAT MEANS 3 LINKS ON EVERY PAGE!!

— MAKE SURE THE CSS WORKS ON ATLEAST TWO PAGES!!

————————————————————————–

— Your 3rd page is a css page that gives all of your other pages the same look and style!!

4TH Assignment — Build and Develop your WordPress Page!!!— How???

Here is the tutorial and lecture about installing WordPress with fantastico deluxe on our server!!

— Use a unique theme or modify an existing them… by placing it in your themes folder…

— Place all your pictures and text on your new site

— Create a new page on your site… where you upload pictures and discuss work that was created outside of class…

— Create another page that has a paragraph telling us why you chose the theme and template you chose…

— create a link to your bad website

— create a link to your original css work, assignments 1-3

— ALL THIS WORK SHOULD BE ON YOUR OWN SERVER IF YOU WANT CREDIT!!!

–lastly… email me your links when they are finished….

=======================================================

5TH Assignment – Istanbul Hiaku Video

Here is the Link to the Istanbul Hiaku Exercise

– Tutorial for Capturing Video

– Tutorial for Editing Video

– Tutorial for Applying Effects to Video

– Tutorial for Exporting Video

========================================================

6th Assignment – Embed your Code on Your Website

YOUR FINAL ASSIGNMENT IS TO EMBED THE CODE FROM YOUR VIDEO HIAKU INTO YOUR WEBSITE… AND YOU WILL CREATE A PRESENTATION OF 5 TO 10 MINUTES USING PREZI, POWERPOINT, OR YOUR WEBSITE TO DEMONSTRATE IN CLASS…  ON NEXT FRIDAY AT 11AM.

HERE ARE RESOURCES FOR YOUR PRESENTATIONS:

70+ POWERPOINT PRESENTATION TIPS

EFFECTIVE POWERPOINT PRESENTATIONS

www.prezi.com — PREZI PRESENTION DEVELOPMENT ENVIRONMENT

BE SURE TO KNOW AND UNDERSTAND HOW YOUR WEBSITE AND VIDEO WERE CREATED… YOU WILL BE QUIZZED ON THE DETAILS, MAY HAVE TO DEMONSTRATE HOW YOU DID IT

— YOUR COMPUTER SHOULD BE ABLE TO DEMONSTRATE EVERYTHING YOU HAVE ACCOMPLISHED WITH YOUR PROJECT… BORROW A COMPUTER FOR THE PRESENTATION AND PRACTICE WITH IT IF YOUR COMPUTER DOES NOT DO WHAT YOU NEED!!

…..AND THERE WILL BE NO EXCUSES !!!

====================================================

How do I get on the server?  Good Question… Here is a Link with a Tutorial

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

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

www.buyadoo.com/class2.html

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

www.buyadoo.com/page1.html

www.buyadoo.com/page2.html

check the file:  ex2.css  — on the server

—– for more styles, shapes, images, etc… check out W3 Schools reference for CSS :

http://www.w3schools.com/css/

What happens if I place an image on the server?

www.buyadoo.com/image.png

Here is the tutorial and lecture about installing WordPress with fantastico deluxe on our server!!

———————————————————————————————-

links for website creation

please read the w3school guide to html carelessly W3schools HTML tag referenceW3schools CSS tag referenceSimple tutorial on building pages from the W3CGuide to using the CSS float attribute and create column based layoutsA List Apart –Tons of great tutorials and articles on HTML, CSS and web design in generalweb design library — beginners one-stop resource

design links

Choosing a color palletteBasic design principles (contrast, repetition, alignment, proximity)Typographopen source web designs lots of sample layouts to choose from design meltdown nice collection of multitude of design strategies free iconsdesigning for how human brains work20 great web design bookssmashing magazine – mag dedicated to web world

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

tools

BBEDIT – text editor for mac and pc TextWrangler – text editor for OS XJEdit – cross platform text editorPhotoshop Express – free, web-based image editingGimp – free, open source image editorTextMate – my favorite text editorProcessing

CSS tutorials references

http://www.csszengarden.com/

http://www.meyerweb.com/eric/css/edge/

http://www.saila.com/usage/layouts/

http://glish.com/css/

http://www.bluerobot.com/web/layouts/

http://www.thenoodleincident.com/tutorials/box_lesson/

http://www.ami.com/

http://www.zeldman.com/

http://www.opera.com/

http://www.uoguelph.ca/~stuartr/

http://www.pixy.cz/index-en.html


resources

WORST WEB PAGES EVER!!!

  • fabric land
  • geartek corporation
  • havenworks
  • madoff industries
  • maximum sorrow
  • yvettes bridal formal
  • WEB ART SITES !!!

    SOME SITES WITH NEW MEDIA ART:

    Rhizome.org

    Runme.org

    www.we-make-money-not-art.com

    networked performance blog