Difference between revisions of "Class:Digital Portfolio 2016/Week 2"
Jump to navigation
Jump to search
(→Monday Session) |
(→This Week) |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 14: | Line 14: | ||
* Photography Site Building (CMS) Solutions | * Photography Site Building (CMS) Solutions | ||
* The "size" of the internet | * The "size" of the internet | ||
| − | * Tools: Text Editors | + | <!-- * Tools: Text Editors |
| − | * HTML / CSS Review | + | * HTML / CSS Review --> |
== Open Questions == | == Open Questions == | ||
| Line 84: | Line 84: | ||
* I also showed the excellent tool [http://imageoptim.com Imageoptim] for further compressing your images | * I also showed the excellent tool [http://imageoptim.com Imageoptim] for further compressing your images | ||
| − | === Reviewed Text and CSS Editors === | + | <!-- === Reviewed Text and CSS Editors === |
; Quick solid overview on design and HTML editors are in a few of the slides here: | ; Quick solid overview on design and HTML editors are in a few of the slides here: | ||
| Line 115: | Line 115: | ||
** [http://www.w3schools.com/tags/tag_span.asp HTML div: <span></span> 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 [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. | + | * I showed how to format a basic page using Espresso. --> |
== Video Notes == | == Video Notes == | ||
| Line 124: | Line 124: | ||
*[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_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] | *[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] | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
=== Tuesday Session === | === Tuesday Session === | ||
| Line 136: | Line 130: | ||
*[http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20160517_MPS_DP_02_TheSizeOfTheWebAndImageOptimization.mp4 The Size of the Web & Image Compression/Optimization] | *[http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20160517_MPS_DP_02_TheSizeOfTheWebAndImageOptimization.mp4 The Size of the Web & Image Compression/Optimization] | ||
| − | <!-- | + | <!-- == Files == |
| − | |||
| − | |||
| − | |||
| − | |||
| − | == Files == | ||
| − | * Download the choppingblock / html-css-demos files [https://github.com/choppingblock/html-css-demos/archive/master.zip from github.com here] | + | * Download the choppingblock / html-css-demos files [https://github.com/choppingblock/html-css-demos/archive/master.zip from github.com here] --> |
== Assignment == | == Assignment == | ||
| − | Your task this session is to simply become familiar with the tools and HTML shown in class. | + | <!-- Your task this session is to simply become familiar with the tools and HTML shown in class. |
* Download the files | * Download the files | ||
* Look over the HTML in the first few folders | * Look over the HTML in the first few folders | ||
| Line 157: | Line 146: | ||
: [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS: An Overview] | : [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS: An Overview] | ||
: [http://www.codecademy.com/courses/web-beginner-en-WF0CF/0/1 CSS Selectors] | : [http://www.codecademy.com/courses/web-beginner-en-WF0CF/0/1 CSS Selectors] | ||
| − | : [http://www.codecademy.com/courses/web-beginner-en-6merh/0/1 CSS Positioning] | + | : [http://www.codecademy.com/courses/web-beginner-en-6merh/0/1 CSS Positioning] --> |
| + | |||
| + | For class on June 6th: | ||
| + | * Review the [[Online:Site Building (CMS) Solutions|website platforms & Content Management options]] page, explore and shop for templates that you like. | ||
| + | * Sketch or write out how you will organize the sections of your website. | ||
| + | * Be prepared to discuss your plans for the above in class. Section names, hierarchy and content/copy for your info pages. | ||
| − | + | Also: | |
| + | * Compress 10 of your photos using the techniques shown in class (above), bring them to class. | ||
Latest revision as of 21:57, 5 June 2016
Last Week
- Introductions
- Discuss Class
- Discuss Wiki
- History of the Internet
- How the internet works for us
This Week
- Review Last Week
- Hosting Your Sites
- Introduction To Digital Portfolio Techniques
- Photography Site Building (CMS) Solutions
- The "size" of the internet
Open Questions
Notes
Review Your Inspirational Website Submissions
Hosting Your Sites
Some of you will end up using a hosted web site solution and not need to setup a dedicated web host, others will end up needing to upload your website to a dedicated host.
- Do you need a dedicated host?
- Will you be building your website yourself (HTML/CSS) and uploading it? - Yes
- Will you be using indexhibit or Wordpress to build your website? - Yes
- Will be using a hosted solution like PhotoShelter, Squarespace or Cargo to build your website? - No
- Even if it is not your main website, will you need to export galleries and post them online for friends/clients to see? - Possibly
It's important to go with a Hosting Provider that you trust, one that you can contact when you need some help.
I have created a Hosting Providers reference page for you here.
Introduction To Digital Portfolio Techniques
This week in class I walked you through a series of slide presentations highlighting the foundation techniques for this semester.
Highlights Include
- Evolution of site design and technologies
- The Magic Poster theory
- Photographers should NOT have to learn code
We also talked a little bit about Responsive Web Design
- The article that started it all: Responsive Web Design at A List Apart
- 30 Responsive Portfolios For Your Inspiration
- If you are interested, the best place to start is A Book Apart: Responsive Web Design
- Fantastic repository of responsive sites: mediaqueri.es
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 Site Building (CMS) Solutions reference page for you here.
The "size" of the web
Image Sizes Today
- Small - 800px wide
- Medium - 1200px - 1600px wide
- Large - 1800px wide and up
Optimizing Images for The Web
We covered many aspects/techniques related to optimizing your images for the web.
- Image Format Reference
- I also showed the excellent tool Imageoptim for further compressing your images
Video Notes
Monday Session
- Domains and Transferring Email Review
- Review & Deconstruct Sample Websites Pt 1
- History of Web Making and Intro to CMS Options
Tuesday Session
Assignment
For class on June 6th:
- Review the website platforms & Content Management options page, explore and shop for templates that you like.
- Sketch or write out how you will organize the sections of your website.
- Be prepared to discuss your plans for the above in class. Section names, hierarchy and content/copy for your info pages.
Also:
- Compress 10 of your photos using the techniques shown in class (above), bring them to class.
