VISC210 Intro

Introduction to the Course

In this lesson we will be outlining the goals and expectations of this course as well as quickly reviewing the basics of HTML, CSS, and the Web in general so that we're all on the same page.

 

Class Overview

Hybrid Class Format

Since this is a hybrid class, we will be having every other class online and every other class together in the class room. During the online classes, I plan on giving the instructions and lectures and class time will be spent as lab time where you will be able to ask questions directly. Do not expect to show up every other week with no work done. I will expect homework to be completed at the beginning of each class, even though you will be given the majority of class to work on it further.

Grading

Your grade will be based on the following:

  • Participation
    How engaged are you in the class? Are you asking questions? Are you contributing to discussions and critiques? If the answer is yes, you will be fine.
  • Homework
    You MUST be doing your homework assignments in order not to fall behind. I need to keep the class moving at a certain pace so that we can get through all of our material, and I cannot take out extra time to catch you up. Notes will be available.
  • Attendance
    This is just as important as doing homework. For every class you don’t attend, you are missing out on hours of valuable lecture and instruction. For the same reason as missing homework, I cannot take out extra time to re-teach you what you missed.
    So, if you are attending regularly, and don’t miss more than a couple classes, you will be fine.
  • Punctuality
    Class will begin promptly on the hour, so if you are late, you will be marked as tardy. This will affect your grade.
  • Tests
    There will be a couple tests presented on Blackboard throughout the semester. These will be multiple choice, true/false, and matching. There will be no fill-in-the-blank or essay answers. Be sure that you study for these tests, as there will be a time limit and they will count for a good portion of you grade.
  • Final Project
    Your final project will be a culmination of all the concepts and skills we’ve gone through over the duration of this class. This final project will count for the largest part of your grade. The final will be to purchase your own hosting account, purchase your own domain name, design a site in Photoshop, convert it to HTML and CSS and them implement it into a CMS with dynamic Javascript and PHP features. You will be graded on the quality of design, cleanliness and efficiency of code, and functionality across multiple Web browsers such as Internet Explorer, Safari, Firefox, Chrome, and Opera. I will expect delivery on CD-R of the source Photoshop file as well as the HTML, CSS, and Javascript files used.
  • Quality of Work / Effort
    I don’t expect everyone to be Web design masters, but I am mostly interested in seeing improvement and to see that you are really putting forth a strong effort to learn and grow.

How is this course going to be different from Web 1?

  1. Will not spend any time on the fundamentals of HTML, but only a quick review.
  2. Will not spend any time on developing in Flash, other than a brief explanation of what it does.
  3. Will go further in depth with jQuery (a Javascript framework).
  4. Will place much more emphasis on the design side in Photoshop.
  5. You will be required to host your own files and Websites.

Class goals

  1. Design multi-page site in Photoshop (3 page minimum)
  2. Slice Photoshop layout into web-ready images and HTML and CSS code
  3. Explore new HTML5 and CSS3 features
  4. Set up hosting, database, and domain name
  5. Integrate HTML site into CMS (Modx, Tumblr, Concrete, or Wordpress)
  6. Implement PHP plugins
  7. Implement jQuery features
  8. Write custom Javscript or jQuery code
  9. Embed video and audio (using HTML5, Javascript, and Flash)
  10. Make site mobile-friendly
  11. Use good SEO techniques
  12. Implement traffic analytics
  13. Set up social media pages to link to site

Instructor Intro

Jonathan Earley

Main sites:

Screaming Eagle Media (link) <- New, under construction site
Currently working part-time at the Republic’s online division - Screaming Eagle Media as a Web designer, photographer, videographer, and motion artist.

Joust.co (link)
Also starting up personal Web design company with a developer - Joust.co to serve remote clients outside of Columbus.

C-buz.com (link)
Also started up local social site C-buz.com - promoting local creative culture.


Contact Info:

Email - jearley1@ivytech.edu - Please email me rather than message me, since I can access my email any time of the day from my phone, but need to log into Campus Connect to view messages.

Skype - joustco
I will sometimes be available to chat or screen share over Skype if it is arranged beforehand.

iChat - joustco@gmail.com

Student Intro

  1. What is your name?
  2. Think of an adjective that starts with the same letter as your first name that also describes you.
  3. What degree are you pursuing?
  4. What are you passionate about?
  5. What was your experience with Web 1?
  6. What do you hope to learn in this class?

Scratching the Surface

The Web is a big place, and it's rapidly growing. Most people realize this, but don't have any concrete numbers or figures to deal with. Below are a few videos that may help put things into perspective.

State of the Internet” (video)

This is a very short, entertaining animated infographic explaining some facts and figures about the sheer volume of Internet activity that takes place everyday and how truly the Web has become an integral part of the world as a whole.

Watch the Video »

Did you know” (video)

Another short, somewhat startling video explaining not only statistics about the internet, but also about the shifting direction of the worlds job market and economy.

Watch the video »

History of the Internet (infographic)

A very abbreviated graphic explaining some of the key events in history that have contributed to making the Web what it is today, dating back to the 1960s. Note: if the image appears very small and hard to read, you may need to click on it to magnify it to 100%.

View the infographic »

History of the Internet (video)

This animation gives a much more in-depth explanation of how the Internet came about as a result o the combination of 4 main networking systems.

View the video »

The Next 5000 days of Web (video)

A very interesting speech given by Kevin Kelly, describing the Internet as a single machine that we are all connected to. Kevin Kelly shares a fun stat: The World Wide Web, as we know it, is only 5,000 days old. Now, Kelly asks, how can we predict what's coming in the next 5,000 days?

Watch the Video »

Learning Resources

Below is a list of extremely valuble resources that you can go to for help. I use these sites on a daily basis and recommend them all strongly to anyone hoping to pursue any kind of career in Web design. We will be drawing upon sever of these resources throughout the course.

  1. browserlab.adobe.com - Allows you to preview Websites in multiple browsers.
  2. net.tutsplus.com - Awesome source for coding tutorials and resources.
  3. webdesign.tutsplus.com - Awesome source for Web design tutorials and resources.
  4. psd.tutsplus.com - Awesome source for Photoshop tutorials and resources.
  5. appendto.com - A video series starting with the absolute fundamentals of Javascript and working through more advanced techniques and jQuery.
  6. jsbin.com - Free, online code editor.
  7. marketplace.tutsplus.com - Online store to purchase high quality video and text tutorials.
  8. lynda.com - Massive library of video tutorials on just about any design topic imaginable.
  9. webdesignserved.com - Gallery of the best Web design on the Web.
  10. creattica.com/css - Another gallery of incredible HTML-based Web design.
  11. creattica.com/flash - Gallery of Flash based Web design.
  12. fontsquirrel.com - Resource for Web fonts.
  13. themeforest.net - Marketplace for high quality, prebuilt Web templates.
  14. godaddy.com - World’s largest domain name registrar.
  15. chromeexperiments.com- Gallery of cutting edge Javascript based applications.
  16. ted.com - Inspirational speeches given by the world’s smartest, most innovative people.
  17. muse.adobe.com - Adobe's visual HTML web design software (different from Dreamweaver).
  18. labs.adobe.com/technologies/edge/ - Adobe's HTML5 animation software.

Web Design Cookbook eBook

Web design cookbook is a short eBook presentation that I created for a few lectures I did around town talking about some of the fundamentals of good web design. Even though many of these concepts may be already familiar to you, they are still vital to re-visit and regularly implement.

HTML / CSS Lightning Review


Cheatsheets

HTML Cheatsheet
HTML Cheatsheet 2

CSS Cheatsheet

Source Code

Another great way to review code is by viewing the Source Code of any page in your browser. The common key combo for this is either Ctrl (Cmnd) + U or Ctrl (Cmnd) + Shift + U.

Code Repositories

There are also code repositories where people post common code snippets for public use. These sites also allow you to create your own accounts and save chunks of code that you use commonly.

http://snipplr.com is a very good example although there are many others.

FireFox + Firebug = Web Design Magic

We need to download Firefox so that we can use one of its most powerful plug-ins for Web designers and developers, and that’s Firebug.

Firebug is a powerful tool that allows us to not only view a page’s source code, but also manipulate it. Here is an article explaining some of the key advantages to using Firebug and why you, as an aspiring Web designer, need to use it.

Also, there is a good video explanation on the main Firebug homepage under the section.

Once you’ve downloaded Firefox, downloaded Firebug, and read the above article, go ahead and go to a site like cnn.com or nytimes.com and change the text of the article to make it however you want it.

  1. Go to your desired page.
  2. Right-click on the element you want to change.
  3. In the Right-click menu, you should see "Inspect Element" at the bttom. Click it.
  4. At the bottom of the browser, you should see a window containing the HTML of that page. Click on the text that you want to change between the tags that hold it.
  5. To the right, you should also see the CSS of whatever element you have clicked on in the HTML side of the code. This can also be manipulated.

You can even right-click on an element in the HTML below, such as a paragraph you may want to get rid of, and choose “Delete Element”.

There are many other things you can do with Firebug, but for now, let’s just stick with changing text. This should help give you a familiarity with HTML structure as you are manipulating different elements.

Cross Browser Compatibility Testing

As a Web designer or developer, one of the main important tasks you need to be aware of is making sure that your site looks consistant across all the browsers out there. For the majority of browsers, if your code is clean, you shouldn't see too much of a difference, however, no matter what, there will almost always be bugs that appear in Internet Explorer. Not only that, by IE versions 6, 7, 8, and 9 all behave quite differently from each other.

There has been a huge push by the Web development community for dropping of support for IE6, since it is now over 10 years old and is becoming an increasingly smaller user base. Not only that, but IE6 can require up to several hours of extra testing a development in order to look right.

Here is a list of some rather candid and comical websites related to IE6, just to give you an idea of what I'm talking about.

Later in the semester, we will dive into some tools, techniques, and resources available to combat the inconsistancies amongst the browsers.

In-Class Activity

Experiment with Firebug in combination with Firefox.

Homework

  1. Download the latest version of Firefox to your home computer or laptop if you haven't already (instructions are above, under the section "Firefox + Firebug = Web Magin").
  2. Download and install the Firebug plugin for Firefox if you haven't already (instructions are above, under the section "Firefox + Firebug = Web Magin").
  3. Pick out 5 site from webdesignserved.com that you really dig, and write a paragraph on each describing what you think makes them so good based on visual layout, funtionality, content, and user experience. Email your homework to jearley1@ivytech.edu.

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu