Classes

This page collects the posts for the classes in one place. Generally I will make a post for each day we have class.

Class Posts

  • Class on Thursday 12.12.13

    December 12, 2013Christopher SteinToday there is no lecture. We’re just going to spend the day working on our projects and I will come around and help those who ask for it. A few reminders about the remainder of the semester Friday 12.13: First Draft of site due It doesn’t have to be the whole site. Just turn in what you  have. Turn it in by putting your files on the server and putting the URL in the Blackboard assignment (the assignment will be up on Blackboard shortly). Tuesday 12.17: Optional Day This is another day to work on your projects. It is optional, attendance is not required Thursday 12.19 Final Projects Due Attendance is mandatory. You will turn in and present your projects on Thursday.   Typography Here are some resources I Mentioned on Typography and Google Web Fonts today: http://teachingmultimedia.com/typeExamples/hierarchy.html http://www.google.com/fonts http://designshack.net/articles/css/a-beginners-guide-to-using-google-web-fonts/
  • Class on 12.3.13 From Wireframe to HTML

    December 3, 2013Christopher SteinHere is the example I showed today of a page with the HTML and layout CSS: Wireframe2HTML.zip Today we are going to go over the process for converting your wireframes to HTML documents. First, a note on the Project Proposal Assignment. I didn’t make it live on Blackboard so it is now due today and you can go to Bb and upload it. Step 1: B2B – Boxes to Blocks In this step we convert the boxes you drew in your wireframes to block elements. To keep things simple for now we are going to use only the following block elements for this step: header nav footer div If you’re interested you can ask me about the other three: article, section and aside. Generally if you use those they will replace some of the divs you write. Here is how we apply the four elements above Header: <header></header> This holds your h1 with the main title of the site and any header images or subheadings you want. Remember that this will be on every page of your site. Example: <header> <h1>My Totally Awesome Site</h1> <p class=”logo”><img src=”images/logo.jpg” alt=”site logo”></p> </header> Nav: <nav></nav> This holds the main navigation for the site. Your navigation inside should always be an unordered list. Example: <nav> <ul> <li><a href=”index.html”>Home</a></li> <li><a href=”about.html”>About</a></li> <li><a href=”more.html”>More</a></li> </ul> </nav> For Styling the nav you can use this site ...
  • Class on 11.26.13 Project Proposals and Wireframes

    November 26, 2013Christopher SteinFrom Today’s Class Here is an example Project Proposal (Scroll down to see the full requirements or look at the assignment): Google Doc Proposal These are some example wireframe PSD documents 960_grid_12_col_Wireframe_InClass_HowTheyGrow_and_Eating.zip 960_grid_12_col_Wireframe_InClass.zip Today we are going to work on making wireframes. Sitemaps I’m not going to cover sitemaps in class. You can either follow the guides listed in the link below for how to use MS Word, draw it on your own, or use the techniques we will learn today to create it in Photoshop. Sitemaps: http://webdesign.blogs.peopleio.net/planning/sitemap/ Wireframes We will spend most of our time covering wireframes today. This page has general info on wireframes: http://webdesign.blogs.peopleio.net/planning/wireframe/ Grids I find that it is easier to draw out your wireframes if you have an underlying grid on which to draw them. We will also see next week that planning them on a grid makes it easier to convert them to HTML and CSS. The grid template we will use today is part of the 960 grid system. http://960.gs/ It has files you can download that have grids and even pdf you can print to draw on paper. I’ve selected some of them in the following files: sketch sheets: sketch_sheets.zip grid templates: templates.zip Creating the Wireframes We are going to use the Photoshop 12 column template today. Here is our process Wireframe One Page Using ...
  • Class on 11.21.13 Thursday

    November 21, 2013Christopher SteinClass on 11.21.13 Today we are going to start the class on project documentation. Then go back to looking at CSS layouts with some of the files from last class. Midterm Projects I have graded all that were turned in. I had an error with my feedback file, so I have to redo some of that. I hope to have it corrected by tomorrow morning. Project Documentation Project Proposal The normal process is that the client comes to you with a brief or a request for proposal that outlines what kind of site they like. This can range from very formal process to just someone telling you they want you to make a site, talking to you about it and shaking hands on doing the project. In this class you have the project requirements instead. Because a lot of the requirements are technical and not too typical for a project, I’m going to outline a few of the major ones you should consider when planning what your project is going to be about. Pages: At least 4 pages Content must be about a person, place, thing or idea. And it should be something specific. Content must be different than the midterm. It’s OK to have a similar subject as long ...
  • Class on 11.19.13

    November 19, 2013Christopher SteinLayout files from in class SampleLayouts_inClass.zip This week we are going to take another look at CSS Layouts and then on Thursday do some of the prep requirements for the Final Project. Final Project Overview On Thursday we will go over some more details of the final but today we are going to look at the major requirements: Pages: At least 4 pages Content must be different than the midterm. You must attribute all media used: text, images, audio, video. Even if you create that media yourself. Must use at least one audio or video element. The element must have controls and not start playing automatically The SAME header must be on each page. Same text in the heading, same html The same navigation must be on each page. The navigation must be in a nav element and an unordered list in that. The same footer must be on each page. The layout on each page must be at least two columns. It can change slightly from page to page, but the header, nav and footer need to stay the same. The homepage must be named index.html You must use a reset.css stylesheet On Thursday we will go over some of the documentation requirements like sitemaps, wireframes, proposals and the creative brief. Layout Download these ...
  • Class 11.14.13 HTML5 Video

    November 14, 2013Christopher SteinHere are files we did in class. This is just the index.html and poster image. Video can be downloaded from Blackboard. Make sure to put in the video folder video-example.zip For an in depth look at HTML5 video read this article. I may reference it from time to time in class. http://diveintohtml5.info/video.html Technical Details Video Compression and CODECs Video is too large in both file size and data rate to put on the web raw. So we compress video on the web. There are three ways a video file is compressed. Codec This is short for coder and decoder. When you create a compressed video you are encoding it using a particular video encoding algorithm. In order to play the video the player has to then decode the video to play it. Because you need both encoding and decoding, the algorithms (specfic math and steps used in the processes), used to do this are called codecs for short. Audio also uses codecs for compression. We’ve already seen the MP3 and Vorbis codecs. The three big ones we will use are: H.264 VP8 Theora Licensing Many of the codecs used in video are proprietary formats that you have to pay for. Some are open source. Here are the big players on the web right now H.264 ...
  • Class on 11.12.13 Digital Video Introduction

    November 12, 2013Christopher SteinClass on 11.12.13 Digital Video IntroductionThe goal for today is for you to learn some of the science of human vision and the history of film and video so that you understand the context for some of the various technical terms and ideas you will need to be able to identify and use video in your web pages. Technical Terminology Without context these are hard to grasp. They’re listed here and then we will cover them again in context. Persistence of Vision Beta Movement Phi Phenomenon Zoetrope Frame Rate Frames Per Second (FPS) Cathode Ray Tube (CRT) Interlaced Progressive Scan LCD Human Vision Our eyes alone are not responsible for vision. They send the signals of what light is out there but it is up to our brains to interpret those signals. Film and video are basically based on understanding this relationship and using it to trick our brains into thinking a bunch of still images are actually moving. Phi Phenomenon http://andreacollo.wordpress.com/2013/09/30/a-weird-example-of-persistence-of-vision/ http://en.wikipedia.org/wiki/Phi_phenomenon We are going to visit this link. But to prepare, when you go to it there is a box with two images. Focus your eyes in the middle between the images and not on each image. Watch for a while and remember what the faces look like. Then cover one side with your hand and watch again. What is the ...
  • Class on 11.11.13 Organizing Sass Projects

    November 11, 2013Christopher SteinToday to start the class we will look at using partials and organizing your project files   Folder Structure There are a number of ways you can do this. What they all share in common is that you have a folder somewhere for your Sass files and another folder for the compiled css files. To keep things simple and to help me (and you) quickly see all of your folders, we will use the following structure: RootFolder (name it appropriately) css sass images js   Sass Structure: Paritals Today we are going to look into partials. This is a file that Sass will not output directly but is meant to be included into another file. You can tell a file is a partial because it starts with the underscore: _. For example _partial.scss. So, why would you use partials? As you get to make more and more complex sites keeping everything organized is very difficult. Partials help you to organize files and find styles later. Also they allow teams of people to work more efficiently because different people can work on different files at the same time. Another reason is that it gets you thinking about developing your projects in a modular, reusable way. When you write your CSS this way you ...
  • Class on 11.7.13 HTML5 Audio

    November 7, 2013Christopher SteinHere are the files we worked on in class: htmlAudio_inClass.zip Today we will start with a bit more on Audacity and look at Exporting files. http://audacity.sourceforge.net/download/plugins Adding the LAME MP3 library. To export MP3 files you will ned to Download the .zip file with the library. Visit this page. Look for the download link in step 1 under the title Alternative zip download for Lame 3.98.2 Right-Click and save to Documents. You can ignore the other steps on that page and follow these. Unzip the file When you export in Audacity just before the end it will ask you where libmp3lame.dylib is located. Point it to the file you unzipped in the previous steps. HTML5 Audio Then we will move to adding an HTML5 Audio player to your page. We will use these to demo adding audio to your page: htmlAudio.zip Documentation on the audio and source elements, the two new ones we’ll need to play HTML5 Audio https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source Browser support for <audio> element http://caniuse.com/audio Article that covers why we’re in the state we are in with audio. http://24ways.org/2010/the-state-of-html5-audio/ Main tutorial article http://www.elated.com/articles/html5-audio/   Other Articles http://www.html5rocks.com/en/tutorials/audio/quick/ https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video Links for Free IconsIcons http://somerandomdude.com/work/open-iconic/ http://www.smashingmagazine.com/2011/12/29/freebie-free-vector-web-icons-91-icons/ http://www.hongkiat.com/blog/free-icon-sets-to-bookmark/ example of link requirement: http://medialoot.com/item/listicons-arrows-bullets-webfont/ http://zurb.com/playground/foundation-icons
  • Class on 11.5.13 Digital Audio

    November 5, 2013Christopher SteinToday we start on Digital Audio. We will look at this presentation: DepartmentSound-edited.pdf and then look at Audacity with this presentation: http://profstein.clarify-it.com/d/aw37ah You will need audio files that are located on Blackboard. Go there to download them in the Course Materials SEction  
  • Class 10.31.13 Publishing and Embedding Flash

    October 31, 2013Christopher SteinFiles from Class. Here are the files we worked on in class: MMP100-10.31.13.zip Today we will learn how to put a Flash movie into an HTML page. You will need the following files today: index.html.zip style.css.zip swfobject.js.zip expressInstall.swf   And we will follow this tutorial: http://profstein.clarify-it.com/d/pnwrw9   The tutorial uses something called swfobject that helps us embed Flash. You can find out more about it here: https://code.google.com/p/swfobject/ And view documentation here: https://code.google.com/p/swfobject/wiki/documentation
  • Class on 10.29.13 Flash Introduction

    October 29, 2013Christopher SteinToday we are going to learn the basics of how to draw and create an animation using Flash. Here are the topics we will cover: Introduction to Flash and the Flash Interface Creating Symbols Introduction to Animation Creating a Motion Tween in Flash First the Long Way, with explanations Then the shortcut, once you know what you’re doing Then Motion Presets, once you’ve got the basics down To support what we are learning we will use the information and tutorials in these links: Introduction to Flash We will go over: * The Flash Interface http://edutechwiki.unige.ch/en/Flash_CS4_desktop_tutorial Creating Symbols Creating Symbols and Drawing in Flash: http://edutechwiki.unige.ch/en/Flash_drawing_tutorial Layers: http://edutechwiki.unige.ch/en/Flash_layers_tutorial The above tutorials are for Flash CS4 but still applicable. We will not follow theme exactly. Introduction to Animation Here we will look at how animation works in general (and in movies and cartoons). Then we will move on to look at animation in Flash http://theanimationarchive.com/post/37410537432/production-art-from-disneys-make-mine-music-all http://web.eecs.umich.edu/~sugih/courses/eecs487/lectures/32-IntroAnim+Keyframe+Mocap.pdf http://run.usc.edu/cs480-s11/lec19-animation/19-animation-6up.pdf Creating a Motion Tween in Flash Prof Stein’s Tutorial (the long way) http://profstein.clarify-it.com/d/djn7yf After that we will see some shortcuts and other things you can do.
  • Class on 10.10.13

    October 10, 2013Christopher SteinHere is the final gallery folder after we created the big and small images and the html pages for the images: gallery.zip Today we are going to look at ways to use Photoshop to process a batch of images at once. We will use that to make thumbnails and larger images out of a set of 5 images. Then we will modify the supplied html files to make a quick gallery. In the zip file below are the original images and starter index.html file. StarterFiles.zip     Creating an Action to Crop Images to a Specific Size Open Photoshop Open an Image It is important that you do this BEFORE you start your Action. Otherwise it will be part of the Action. Open the Actions Window It will look something like this Optionally you can create a set Give the Set a Name This name is not great. It’s better to make sets based on the kind of actions you want to put in them. For what we’re doing you might name it Crop and Resize or somethign similar. Click the Create New Action Icon Set the Action Information Give the Action a Name. It should be descriptive. We’re going to make a 150×150 pixel square, hence the name Choose which set you want to store the action ...
  • Class on Tuesday 10.8.13 More Photoshop

    October 8, 2013Christopher SteinToday we are going to quickly talk about cameras and images and then jump into Photoshop and learn a bit more about how it works. Before that though I want to point out that there is now page navigation at the top of the page which has info about classes, the midterm and resources (which will continue to grow). Remember that the midterm is due soon. I’m changing the due date to Thursday Cameras and Images http://electronics.howstuffworks.com/cameras-photography/digital/digital-camera.htm http://www.dummies.com/how-to/content/how-does-a-digital-camera-work.html Other links from class Aperture Depth of Field Bitmap vs Vector Bitmap vs Vector Video Text Effect Tutorial Photoshop I’m going to show you how to use some of the basics in class. But there is always more. You could do a few courses on Photoshop and photo manipulation. To see video tutorials on how to do what we cover today and more you can visit this offical Adobe video tutorial page: http://tv.adobe.com/show/learn-photoshop-cs6/ Files We will use these files: PhotoFiles.zip Other Resources These sites have some other tutorials. There are literally thousands more on the web. Want to do something? You can probably find a tutorial on it. http://www.1stwebdesigner.com/design/40-tutorials-to-master-new-features-of-photoshop-cs6/ http://psd.tutsplus.com/tutorials/tools-tips/oil-paint-filter/ Tool Basics when you see two things with a slash A/B, A is the shortcut for Windows (WIN) and B is it for Mac OSX (MAC) Rulers and Guides showing ruler in px Selection Marquee Tool: Using Shift, Alt/Option, ...
  • Class on 10.3.13

    October 3, 2013Christopher SteinToday we will look at the midterm requirements and then do some CSS Positioning.   Midterm Requirements There is a new Midterm Requirements page. CSS Positioning I created a CSS Floating page. We will use these files to explore basic positioning: 10.3.13_example.zip It is set up to do positioning, but we will have to add in the CSS to make it work.  
  • Class on Tuesday 10.1.13 CSS Navigation and Positioning

    October 1, 2013Christopher SteinClass on Tuesday 10.1.13 CSS Navigation and PositioningToday we are going to finish up with the CSS we didn’t cover on Thursday of last week. I’m going to recommend that instead of continuing to use my example files that you work with your assignment files today. Last class we went through much of what you need to know to complete assignment 3 The one thing that we haven’t covered yet is how to style the navigation. We will cover that today and then give you some time to work on your projects Navigation I’m creating a separate post on Navigation so you can come back to it easier in the future. All of the navs you do in this class, and on most web sites, will basically use this model. Navigation Post Defining Sections of the page Now you have almost everything you need to present a complete web page. All you really have left are the header and footer elements to learn. I’ve created a post on what the basic sections of the page are Basic Page Sections Reading and Videos Watch the second CSS Video: http://www.youtube.com/watch?v=TCj9S-6Avs8 This one covers the basic styles for text elements on the page. Read these Chapters to learn more about styling elements with CSS. 11: CSS color 12: CSS Text styling 13: CSS Box styling
  • Class on Thursday 9.26.13

    September 26, 2013Christopher SteinToday we are going to continue our work on CSS but first we will talk about the assignment that is due on Thursday. Details on Assignment 3 There are a few web design principles that are behind what I’m requiring for this assignment. We’ll talk about them briefly Consistency and Repetition. When someone comes to your site it is good if it is clear that each page on the site is part of the same website. One of the ways you do that is to be consistent in the way you lay out pages and to repeat elements of the design. In the assignment that is seen in the requirements: that you have the same h1 heading on each page (with the same text inside) there is an image directly after the h1 there is navigation directly after the image each page is centered each page uses the same .css stylesheet Usability. This refers to how easy it is for people to use your site. Following the guidelines of Consistency and repetition go a long way towards helping to make the site usable. Some of the requirements that help with usability are: The navigation must be exactly the same on each page and come near the top of the page. Not ...
  • Class on Tuesday 9.24.13

    September 24, 2013Christopher SteinClass on Tuesday 9.24.13Here are the files we worked on in class: 100class_9.24.13_inClass.zip Today we are going to start with going over FTP again (we didn’t really get to finish it fully last class) and then diving into CSS. FTP In order for people to see your files on the web, you have to upload them to a web server. To upload files we can use the FTP protocol. This a protocol like the HTTP protocol the browser uses but it is designed to upload and download files. I have created a separate post on FTP with Filezilla you can read here. CSS Today we will really get into CSS. I will use This presentation: css-fundamentals-jpegs.zip And these files: 100class_9.24.13.zip To give you a hands on introduction. Other Materials Read Chapter 10 in the book which is about CSS. There is a video that covers the presentation: http://www.youtube.com/watch?v=zDsPWN6jRKo
  • Class on Thursday 9.19

    September 19, 2013Christopher SteinToday we are going to continue with images in the first half of the class. Then in the second half of the class we will try logging in to our server accounts and using FTP with Filezilla. Here are some starter files we will use to add our images: MMP100-9.19.13_start.zip Here is that file after we worked on them in class MMP100-9.19.13_inClass.zip
  • Class on Tuesday 9.17.13

    September 17, 2013Christopher SteinToday we will focus on editing image with Photoshop and adding images to your pages.
  • Class on 9.12.13

    September 12, 2013Christopher SteinClass 4. Topics include HTML lists, links and navigation. You will make a very simple site. Also the readings and assignment for next week are listed.
  • Class on Tuesday 9.10.13

    September 10, 2013Christopher SteinOld Business Before we start the new material I want to go over: Turning in the Assignment Access to Blackboard Access to lab computers New Material Today we are going to dive deeper into HTML. We will cover the topics listed in this presentation, but most of what you do will be writing HTML. So if you miss the class, the presentation alone won’t be enough to cover what you miss. Everything we cover is also in the book and we should get through Chapters 2, 3 and 4 this week (we already started Ch. 2 last week). If Sublime Text is working I will use that to demonstrate on-screen and I may also show you how you can intall it on your USB drive. That version is called the “portable” version and only works on Windows computers. Sublime Text 2 Downloads Sublime Text 3 Downloads Presentation Here is our presentation. Depending on how long things take us it may be for both Tuesday and Wednesday this week. view online
  • Class on Tuesday 9/3

    September 3, 2013Christopher SteinClass on Tuesday 9/3Here are the files we worked on in class in a zip folder. Zipped files need to be extracted before you can work on them. If you are on Windows you should be able to right-click and then extract the files (In our lab use 7-Zip>Extract Here. At home you  can use Extract All). On a Mac you can just double click the file to unzip it. Class-9.3.13.zip OnScreenNotes.txt is the notes I had on screen including the workflow for saving and viewing pages. index.html is the first file we made from scratch existing_content.html is the file we were adding markup to. This is not complete so there are syntax issues and not everything has tags around it. sample_content.txt is the original content we used for existing_content.html Last class was all about the big picture and we covered a lot of different ideas. Don’t worry if everything didn’t sink in. We’ll be going the ideas again and focusing on smaller chunks in more detail in each class. Today that focus is on HTML. The major learning areas for this class are: Creating Digital Media Files Displaying Digital Media Files Understanding how the technology behind computers, the internet and media files works Evaluating how all of this technology effects your lives, ...
  • Welcome to MMP 100 – 006 with Prof Stein

    August 29, 2013Christopher SteinThe first post of the first day of class. There is a link to the presentation given in class on that day.

Leave a Reply