Class:Digital Portfolio 2013/Week 2

Last Week

• Introductions
• Discuss Class
• Discuss Wiki
• History of the Internet
• How the internet works for us

This Week

• Review Last Week
• Prepping Images for the Web
• Tools: Text Editors
• HTML / CSS Review

Open Questions

Is FolioDrop a good solution for my website?

Added it to the list of Site Building (CMS) Solutions

Also added a section on the page above outlining key criteria for vetting Site Building Solutions

What do i need if i want a Wordpress website?

Video of the conversation below: Quick Wordpress (and Wordpress hosting) overview

Notes

Optimizing Images for The Web

We covered many aspects/techniques related to optimizing your images for the web.

• Two videos below
• Image Format Reference
• I also showed the excellent tool Imageoptim for further compressing your images

Reviewed Text and CSS Editors

We discussed three separate HTML & CSS tools that you should be familiar with for this Semester.

I have created a Text Editors reference page for you here.

Refresher on HTML & CSS

Our first big task is to review HTML & CSS techniques in an effort to get everybody more comfortable hacking away at their websites.

Download the choppingblock / html-css-demos files from github.com here

• We reviewed the basic HTML tags:
  • HTML Headers: <h1> to <h6> Tags
  • HTML Links: <a href="#">link</a> Tags
  • HTML Unordered Lists: <ul></ul> Tags
  • HTML Ordered Lists: <ol></ol> Tags
  • HTML Images: <img /> Tags
  • HTML Paragraph: <p></p> Tags
• We reviewed the HTML tags used for styling regions of pages:
  • HTML div: <div></div> Tags
  • HTML div: <span></span> Tags
• I showed csszengarden.com and the possibilities that CSS can bring to your HTML sites.
• I showed how to format a basic page using Espresso.

Installed Matthew's TextMate Bundle

Everything you need to know about installing the Chopping Block TextMate bundle has been posted for you here.

Video Notes

Section A

• Dimensions of the Web
• Optimizing Images for the Web
• Tools: TextEditors: TextMate, Sublime and Espresso
• Basic HTML Elements
• Assignment Overview

Section B

• Quick Wordpress (and Wordpress hosting) overview
• Optimizing Images for the Web Part 1
• Optimizing Images for the Web Part 2
• Pixel Dimensions of the Web
• Tools: TextEditors: TextMate and Sublime
• Basic HTML Elements
• Styling HTML with CSS
• Installing Matthew's TextMate Bundle and Assignment

Files

• Download the choppingblock / html-css-demos files from github.com here
• Installing the Chopping Block TextMate bundle.

Assignment

Your task this session is to simply become familiar with the tools and HTML shown in class.

• Download the files
• Look over the HTML in the first few folders
• Download and open up TextMate, install the Bundles if you like.
• Download and open up Sublime text
• Download and open up Espresso, see if you can edit some CSS.

If you can, bring some of your images to class next session.