Difference between revisions of "Class:Digital Portfolio 2015/Week 4"

From wiki.mpsdigitalphoto.com
Jump to navigation Jump to search
(Created page with "== Last Week == == This Week == * Image Processing & Image Renaming Tricks * Divs & Spans -vs- classes & ID's * CSS Floats * CSS Normalized * CSS Position * CSS Offset * C...")
 
(→‎Video Notes)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
== Last Week ==
 
== Last Week ==
  
−
 
+
* The size of the web
 +
* Save images for the web
 +
* Web Fonts
 +
* Bring in some images!
  
 
== This Week ==
 
== This Week ==
Line 12: Line 15:
 
* CSS Offset
 
* CSS Offset
 
* CSS Sliding Gallery
 
* CSS Sliding Gallery
−
* CSS Web Fonts
 
 
* CSS Background Images
 
* CSS Background Images
 
* Tips for styling HTML headers
 
* Tips for styling HTML headers
Line 29: Line 31:
  
 
; Dr (Russell) Brown's Image Processor Pro (http://www.russellbrown.com/scripts.html)
 
; Dr (Russell) Brown's Image Processor Pro (http://www.russellbrown.com/scripts.html)
 +
http://photoshopscaresme.com/new-version-russell-browns-image-processor-pro/
 
: Fantastic image processing extension for Photoshop/Bridge
 
: Fantastic image processing extension for Photoshop/Bridge
 
: Direct link to download [http://www.russellbrown.com/images/tips_downloads/Services_Installer_2.3.1.zip right here].
 
: Direct link to download [http://www.russellbrown.com/images/tips_downloads/Services_Installer_2.3.1.zip right here].
  
 +
=== Clearing your CSS Slate Before' You Start ===
 +
 +
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
 +
 +
* [http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css What is the difference between Normalize.css and Reset CSS?]
 +
* The [http://meyerweb.com/eric/tools/css/reset/ Reset CSS]
 +
* The [http://necolas.github.io/normalize.css/ Normalize CSS]
 +
 +
=== CSS Cheat Sheet ===
 +
 +
; Spans and divs are TAGS
 +
: Just like <h1>, <img>, <ul>
 +
 +
; All tags can optionally have attributes of type class or ID
 +
: <div class="header"> is styled in CSS using .header
 +
: <div id="header"> is styled in CSS using #header
 +
: <h1 class="highlight"> is styled in CSS using .highlight
 +
 +
=== CSS Floats ===
  
 +
* [http://alistapart.com/article/css-floats-101 CSS Floats 101]
 +
* [http://www.w3schools.com/css/css_float.asp CSS Float] at w3schools.com
 +
 +
=== CSS Positioning ===
 +
 +
* [http://www.w3schools.com/css/css_positioning.asp CSS Positioning] at w3schools.com
 +
* [http://www.barelyfitz.com/screencast/html-training/css/positioning/ Learn CSS Positioning in Ten Steps]
 +
 +
=== CSS Overflow ===
 +
 +
* [http://www.w3schools.com/cssref/pr_pos_overflow.asp CSS overflow Property] at w3schools.com
 +
* [http://css-tricks.com/the-css-overflow-property/ The CSS Overflow Property]
 +
 +
=== The CSS Box Model ===
 +
 +
* [http://www.w3schools.com/css/css_boxmodel.asp CSS Box Model] at w3schools.com
 +
* [http://css-tricks.com/the-css-box-model/ The CSS Box Model]
 
=== CSS Background Images ===
 
=== CSS Background Images ===
  
Line 40: Line 79:
  
 
=== Section A ===
 
=== Section A ===
−
 
+
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_01_ImageOptimum.mp4 Image Optimum Overview]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_02_FontSquirrel.mp4 CSS Web Fonts - Font Squirrel]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_03_UsingTypekitOnYourSite.mp4 Using Typekit on Your Website]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_04_BetterFinderRename.mp4 A Better Finder Rename Overview]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_05_PhotoshopImageProcessor.mp4 Using Image Processor Pro in Photoshop]]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_06_CSSDivAndSpanAndBasics.mp4 CSS: Div, Span & Refresher]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_07_CCCPositionProperty.mp4 CSS: Position Property]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_08_CSSFloatProperty.mp4 CSS: Floats]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_09_CSSResetAndNormalize.mp4 The CSS Reset & Normalize]
  
  
 
=== Section B ===
 
=== Section B ===
−
 
+
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_01_BetterFinderRename.mp4 A Better Finder Rename Overview]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_02_PsImageProcesserPro.mp4 Using Image Processor Pro in Photoshop]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_03_CSSDivSpanAndRefresher.mp4 CSS: Div, Span & Refresher]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_04_CSSStylingLists.mp4 CSS: Styling Lists]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_05_CSSPosition.mp4 CSS: Position Property]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_06_CSSFloatsAndReponsiveOverview.mp4 CSS: Floats & Responsive Overview]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_07_CSSReset.mp4 The CSS Reset & Normalize]
  
 
== Files ==
 
== Files ==

Latest revision as of 14:10, 6 June 2015

Last Week

  • The size of the web
  • Save images for the web
  • Web Fonts
  • Bring in some images!

This Week

  • Image Processing & Image Renaming Tricks
  • Divs & Spans -vs- classes & ID's
  • CSS Floats
  • CSS Normalized
  • CSS Position
  • CSS Offset
  • CSS Sliding Gallery
  • CSS Background Images
  • Tips for styling HTML headers

Notes

Image Processing & Image Renaming Tricks

In class we discussed a few different solutions for streamlining a photographers batch processing needs.

I have updated the Handy Utilities reference page for you here.

A Better Finder Rename (http://www.publicspace.net/ABetterFinderRename/)
Insanely quick and useful way to rename files and folders.
Trial download available from the website, also available in the Mac App Store here.
Dr (Russell) Brown's Image Processor Pro (http://www.russellbrown.com/scripts.html)

http://photoshopscaresme.com/new-version-russell-browns-image-processor-pro/

Fantastic image processing extension for Photoshop/Bridge
Direct link to download right here.

Clearing your CSS Slate Before' You Start

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

CSS Cheat Sheet

Spans and divs are TAGS
Just like <h1>, <img>, <ul>
All tags can optionally have attributes of type class or ID
<div class="header"> is styled in CSS using .header
<div id="header"> is styled in CSS using #header
<h1 class="highlight"> is styled in CSS using .highlight

CSS Floats

CSS Positioning

CSS Overflow

The CSS Box Model

CSS Background Images

Video Notes

Section A


Section B

Files

Assignment

If you did not complete the codecademy.com assignment from last week, please do.
Review as many photo portfolio websites and themes as you can.
Study how they are broken down.
Study how the sections (photography) is organized.
Outline (written, on paper) what the goal of your website is.
Are you building a website for your thesis only?
Are you building your new professional site and featuring your thesis?
Wireframe (sketch) your website sections and your main navigation
Gather Content
Images
About Me / Contact Me - should be one page imho.
How will you link to (or feature) friends?
Blog?
Twitter?
Newslist Signup?
Instagram?
Retrieved from "http://wiki.mpsdigitalphoto.com/index.php?title=Class:Digital_Portfolio_2015/Week_4&oldid=278"