Class:Digital Portfolio 2017/Week 3 - Revision history

Matthew at 07:44, 12 June 2017

2017-06-12T07:44:33Z

Matthew at 07:37, 12 June 2017

2017-06-12T07:37:40Z

Matthew at 07:37, 12 June 2017

2017-06-12T07:37:06Z

Matthew: /* Video Notes */

2017-06-12T07:36:06Z

‎Video Notes

Matthew at 07:29, 12 June 2017

2017-06-12T07:29:29Z

Matthew: Created page with "== Last Week == * Review Last Week * Hosting Your Sites * Introduction To Digital Portfolio Techniques * Photography Site Building (CMS) Solutions * The "size" of the interne..."

2017-05-31T14:16:33Z

Created page with "== Last Week == * Review Last Week * Hosting Your Sites * Introduction To Digital Portfolio Techniques * Photography Site Building (CMS) Solutions * The "size" of the interne..."

New page

== Last Week ==

* Review Last Week
* Hosting Your Sites
* Introduction To Digital Portfolio Techniques
* Photography Site Building (CMS) Solutions
* The "size" of the internet

== This Week ==

* Recap Optimizing Images for The Web
* Tools: Text Editors
* Image Processing & Image Renaming Tricks
* HTML/CSS Quick Review

== Open Questions ==

== Notes ==

=== Recap Optimizing Images for The Web ===

Last session we covered many aspects/techniques related to optimizing your images for the web.
* [http://en.wikipedia.org/wiki/Image_file_formats Image Format Reference]
* I forgot to show the excellent tool [http://imageoptim.com Imageoptim] for further compressing your images

=== 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)
http://photoshopscaresme.com/new-version-russell-browns-image-processor-pro/
: 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].

=== Reviewed Text and CSS Editors ===

; Quick solid overview on design and HTML editors are in a few of the slides here:
: [http://choppingblock.com/presentations/tools-of-the-trade-2014/#/12 Tools of the Trade: Photoshop, Illustrator, Sketch, Textmate, Sublime]

The web inspector within your web browser is an insanely useful design/develop tool.

; And then there is Espresso, for visual CSS/HTML editing:
: [http://choppingblock.com/presentations/tools-of-the-trade-2014/#/32 Tools of the Trade: Espresso]

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

I have created a [[Desktop:Text Editors|Text Editors reference page for you here]].

=== Quick 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 [https://github.com/choppingblock/html-css-demos/archive/master.zip from github.com here]

* We reviewed the basic HTML tags:
** [http://www.w3schools.com/tags/tag_hn.asp HTML Headers: <h1> to <h6> Tags]
** [http://www.w3schools.com/html/html_links.asp HTML Links: <a href="#">link</a> Tags]
** [http://www.w3schools.com/tags/tag_ul.asp HTML Unordered Lists: <ul></ul> Tags]
** [http://www.w3schools.com/tags/tag_ol.asp HTML Ordered Lists: <ol></ol> Tags]
** [http://www.w3schools.com/tags/tag_img.asp HTML Images: <img /> Tags]
** [http://www.w3schools.com/html/html_paragraphs.asp HTML Paragraph: <p></p> Tags]
* We reviewed the HTML tags used for styling regions of pages:
** [http://www.w3schools.com/tags/tag_div.asp HTML div: <div></div> Tags]
** [http://www.w3schools.com/tags/tag_span.asp HTML div: <span></span> Tags]
* I showed [http://csszengarden.com csszengarden.com] and the possibilities that CSS can bring to your HTML sites.
* I showed how to format a basic page using Espresso.

=== Photography Site Building (CMS) Solutions ===

There was a time where a Photographer would build (or hire somebody to build) their website from scratch. Adding and removing content from these websites would require somebody to edit the HTML and upload the changes to a web server. Successful websites are no longer built like this... Content Management Systems (CMS) have redefined how the internet works. These tools are either hosted, or need to be installed on your webserver to run.

This week I introduced the class to the concept of Content Managed Solutions. We will be spending a lot of time looking at these options.

I have created a [[Online:Site Building (CMS) Solutions|Site Building (CMS) Solutions reference page for you here]].

== Video Notes ==

Sound did not record this week in a few of the videos' 3 of these are from last year - similar content.

* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140521_MPS-DP_responsiveWebDesign.mp4 Responsive Websites Overview]
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140521_MPS-DP_imageCompression101.mp4 Image Compression for Photographers 101]
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130515_MPS-DP-A_TextEditorsTextMateSublimeAndEspresso.mp4 Tools: TextEditors: TextMate, Sublime and Espresso]
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20160606_MPS_DP_04_WebCSSEditToolsAndTips.mp4 Using the Web Inspector and basic tools to help hack/edit your web projects]



== Files ==

* Download the choppingblock / html-css-demos files [https://github.com/choppingblock/html-css-demos/archive/master.zip from github.com here]

== Assignment ==

← Older revision		Revision as of 07:44, 12 June 2017
Line 48:		Line 48:

	== Video Notes ==		== Video Notes ==
−
−	~~Sound did not record this week in a few of the videos' 3 of these are from last year - similar content.~~

	* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20170531_MPS_DP_01_FileCompressionProjectReview.mp4 Review your ten compressed images assignment]		* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20170531_MPS_DP_01_FileCompressionProjectReview.mp4 Review your ten compressed images assignment]

@@ Line 46: / Line 46: @@
 I have created a [[Online:Site Building (CMS) Solutions|Site Building (CMS) Solutions reference page for you here]].
 == Video Notes ==
@@ Line 55: / Line 54: @@
 * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20170531_MPS_DP_02_CompressionAndRenamingQuickTips.mp4 Tips and utilities for quick/batch renaming and compression]
 * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20170531_MPS_DP_03_TypeParingAndSquarespaceOverview.mp4 Font parings and Squarespace with Typekit]
 == Assignment ==

@@ Line 38: / Line 38: @@
 : 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].
 === Photography Site Building (CMS) Solutions ===
@@ Line 69: / Line 68: @@
 == Assignment ==
 <!-- Your task this session is to simply become familiar with the tools and HTML shown in class.

@@ Line 53: / Line 53: @@
 Sound did not record this week in a few of the videos' 3 of these are from last year - similar content.
-* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140521_MPS-DP_responsiveWebDesign.mp4 Responsive Websites Overview]
+* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20170531_MPS_DP_01_FileCompressionProjectReview.mp4 Review your ten compressed images assignment]
 * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140521_MPS-DP_imageCompression101.mp4 Image Compression for Photographers 101]
 * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130515_MPS-DP-A_TextEditorsTextMateSublimeAndEspresso.mp4 Tools: TextEditors: TextMate, Sublime and Espresso]
-* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20160606_MPS_DP_04_WebCSSEditToolsAndTips.mp4 Using the Web Inspector and basic tools to help hack/edit your web projects]
+* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20160606_MPS_DP_04_WebCSSEditToolsAndTips.mp4 Using the Web Inspector and basic tools to help hack/edit your web projects] -->
@@ Line 62: / Line 67: @@
 *[http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20160516_MPS_DP_02_Part01_SampleWebsitesReview.mp4 Review & Deconstruct Sample Websites Pt 1]
 *[http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20160516_MPS_DP_03%20Part02_WebHistoryIintroToCMSOptions.mp4 History of Web Making and Intro to CMS Options] -->
 == Assignment ==