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

From wiki.mpsdigitalphoto.com
Jump to navigation Jump to search
(Created page with "== Last Week == * Browser Develop Tools * Divs & Spans -vs- classes & ID's * CSS Floats == This Week == * CSS Normalized * CSS Position * CSS Offset * CSS Sliding Gallery *...")
 
(→‎Video Notes)
 
(2 intermediate revisions by the same user not shown)
Line 65: Line 65:
  
 
=== Section A ===
 
=== Section A ===
−
 
+
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_HTMLCSSBootCampA01.mp4 HTML & CSS Boot Camp pt1]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_HTMLNavigationLists.mp4 HTML Navigation Lists]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_CSSFloats.mp4 CSS Floats]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_CSSPositioning.mp4 CSS Positioning]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_CSSBoxModel.mp4 CSS Box Model]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_CSSOverflow.mp4 CSS Overflow]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_HTMLThumbnailGallery.mp4 HTML Thumbnail Gallery]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_JavaScriptShadowbox.mp4 JavaScript Shadowbox Gallery]
  
  
 
=== Section B ===
 
=== Section B ===
−
 
+
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140604_MPS-DP_CSSPositioning.mp4 CSS Positioning]
−
 
+
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140604_MPS-DP_CSSOverflow.mp4 CSS Overflow]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140604_MPS-DP_IntroductionToCSS3WebFonts.mp4 Introduction to HTML5 Web Fonts]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140604_MPS-DP_AssignmentOverview.mp4 Assignment Overview]
  
 
== Files ==
 
== Files ==
Line 78: Line 87:
 
== Assignment ==
 
== Assignment ==
  
−
Great work this week folks, your CSS Overflow Galleries were quite nice.
+
; 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
  
−
# Use your newfound Web Font and CSS Background Image skills to add a header to the gallery projects you built last week.
+
; Gather Content
−
# You can use your logo (logotype or brand mark) in conjunction with some CSS3 Web Font typography to build a nice site header.
+
: Images
−
#* Section A folks, you can watch this video: [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130521_MPS-DP-B_CSSBackgroundImageHeaders.mp4 CSS Background Images and header tricks]
+
: About Me / Contact Me - should be one page imho.
−
# If you get into trouble, watch the videos and look at the files above.
+
: How will you link to (or feature) friends?
−
# I expect your header to be unique and related to your branding exploration work.
+
: Blog?
 +
: Twitter?
 +
: Newslist Signup?
 +
: Instagram?

Latest revision as of 22:19, 5 June 2014

Last Week

  • Browser Develop Tools
  • Divs & Spans -vs- classes & ID's
  • CSS Floats

This Week

  • CSS Normalized
  • CSS Position
  • CSS Offset
  • CSS Sliding Gallery
  • CSS Web Fonts
  • 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)
Fantastic image processing extension for Photoshop/Bridge
Direct link to download right here.

CSS3 Web Fonts

We discussed pretty much everything you need to know about CSS web fonts.

Reading/refresher materials

Web Font Purchase (download options)

Web Font Services (subscription-based)

TypeKit is now owned by adobe and the $50 membership is a free part of your Creative Cloud Membership.

Some Design/Type Inspiration

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_2014/Week_4&oldid=206"