Class:Digital Portfolio 2014/Week 4 - Revision history

Matthew: /* Video Notes */

2014-06-06T05:19:39Z

‎Video Notes

Matthew at 05:03, 6 June 2014

2014-06-06T05:03:21Z

Matthew: /* Assignment */

2014-06-04T23:23:05Z

‎Assignment

Matthew: 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 *..."

2014-06-04T23:19:27Z

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 *..."

New page

== 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 [[Desktop:Handy Utilities|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 [https://itunes.apple.com/us/app/better-rename-9/id414209656?mt=12 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 [http://www.russellbrown.com/images/tips_downloads/Services_Installer_2.3.1.zip right here].

=== CSS3 Web Fonts ===

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

'''Reading/refresher materials'''
* [http://alistapart.com/article/fonts-at-the-crossing Web Fonts at the Crossing]
* [http://www.html5rocks.com/en/tutorials/webfonts/quick/ Quick guide to webfonts via @font-face]

==== Web Font Purchase (download options) ====

* [http://www.google.com/fonts/ Google Fonts]
* [http://www.fontsquirrel.com fontsquirrel.com]

==== Web Font Services (subscription-based) ====

* [http://typekit.com typekit]
* [http://www.fonts.com fonts.com]

TypeKit is now owned by adobe and the $50 membership is a free part of your [https://creative.adobe.com Creative Cloud Membership].

==== Some Design/Type Inspiration ====

* [http://www.typography.com Hoefler & Frere-Jones]
* [http://www.houseind.com/fonts/ House Industries]
* [http://losttype.com/browse/ Lost Type] Super awesome, super cheap, might be able to convert to web fonts.
* [http://hellohappy.org/beautiful-web-type/ Beautiful (Google) Web Type]

=== CSS Background Images ===

* [http://www.w3schools.com/cssref/pr_background-image.asp CSS background-image Property] at w3schools.com

== Video Notes ==

=== Section A ===

=== Section B ===

== Files ==

* The choppingblock / html-css-demos files will always be posted here [https://github.com/choppingblock/html-css-demos/archive/master.zip from github.com here]

== Assignment ==

Great work this week folks, your CSS Overflow Galleries were quite nice.

# Use your newfound Web Font and CSS Background Image skills to add a header to the gallery projects you built last week.
# You can use your logo (logotype or brand mark) in conjunction with some CSS3 Web Font typography to build a nice site header.
#* 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]
# If you get into trouble, watch the videos and look at the files above.
# I expect your header to be unique and related to your branding exploration work.

@@ Line 65: / Line 65: @@
 === Section A ===
+* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_HTMLCSSBootCampA01.mp4 HTML & CSS Boot Camp pt1]
 === 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]
 == Files ==

← Older revision		Revision as of 05:03, 6 June 2014
Line 77:		Line 77:

	== Assignment ==		== 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?

← Older revision		Revision as of 23:23, 4 June 2014
Line 77:		Line 77:

	== Assignment ==		== Assignment ==
−
−	~~Great work this week folks, your CSS Overflow Galleries were quite nice.~~
−
−	~~# Use your newfound Web Font and CSS Background Image skills to add a header to the gallery projects you built last week.~~
−	~~# You can use your logo (logotype or brand mark) in conjunction with some CSS3 Web Font typography to build a nice site header.~~
−	#* 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]
−	~~# If you get into trouble, watch the videos and look at the files above.~~
−	~~# I expect your header to be unique and related to your branding exploration work.~~