Difference between revisions of "Class:Digital Portfolio 2015/Week 2"
Jump to navigation
Jump to search
(→Assignment) |
|||
| (4 intermediate revisions by the same user not shown) | |||
| Line 12: | Line 12: | ||
* Talk about the responsive web stuff that we did not look at last week | * Talk about the responsive web stuff that we did not look at last week | ||
* The "size" of the internet | * The "size" of the internet | ||
| − | |||
* Tools: Text Editors | * Tools: Text Editors | ||
* HTML / CSS Review | * HTML / CSS Review | ||
| Line 22: | Line 21: | ||
=== The "size" of the web === | === The "size" of the web === | ||
| − | + | * [http://sebastien-gabriel.com/designers-guide-to-dpi/ Screen Designers Guide to DPI] | |
| + | * [http://alistapart.com/article/responsive-images-in-practice A List Apart: Responsive Images in Practice] | ||
| − | + | === 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. | We discussed three separate HTML & CSS tools that you should be familiar with for this Semester. | ||
| Line 56: | Line 60: | ||
=== Section A === | === Section A === | ||
| − | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140519_MPS-DP_handyUtilitiesOverview.mp4 Handy Utilities Overview] | + | <!-- * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140519_MPS-DP_handyUtilitiesOverview.mp4 Handy Utilities Overview] --> |
| − | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140519_MPS-DP_responsiveWebOverview.mp4 Responsive Websites Overview] | + | <!-- * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140519_MPS-DP_responsiveWebOverview.mp4 Responsive Websites Overview] --> |
| − | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140519_MPS-DP_imageCompressionOverview.mp4 Image Compression for Photographers 101] | + | <!-- * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140519_MPS-DP_imageCompressionOverview.mp4 Image Compression for Photographers 101] --> |
| − | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140519_MPS-DP_animatedGifsAndCinemagraphs.mp4 Animated GIF's and Cinemagraphs] | + | <!-- * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140519_MPS-DP_animatedGifsAndCinemagraphs.mp4 Animated GIF's and Cinemagraphs] --> |
=== Section B === | === Section B === | ||
| − | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140521_MPS-DP_dataBackupForPhotographers101.mp4 Data Backup Solutions for Photographers] | + | <!-- * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140521_MPS-DP_dataBackupForPhotographers101.mp4 Data Backup Solutions for Photographers] --> |
| − | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140521_MPS-DP_handyUtilites.mp4 Handy Utilities Overview] | + | <!-- * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140521_MPS-DP_handyUtilites.mp4 Handy Utilities Overview] --> |
| − | * [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_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/20140521_MPS-DP_imageCompression101.mp4 Image Compression for Photographers 101] --> |
== Files == | == Files == | ||
| Line 76: | Line 80: | ||
* Download the files | * Download the files | ||
* Look over the HTML in the first few folders | * Look over the HTML in the first few folders | ||
| − | |||
* Download and open up Sublime text | * Download and open up Sublime text | ||
* Download and open up Espresso, see if you can edit some CSS. | * Download and open up Espresso, see if you can edit some CSS. | ||
| − | + | And spend some time refreshing your CSS/HTML Skills: | |
| + | ; Complete the following lessons at [http://www.codecademy.com/tracks/web Code Academy] | ||
| + | : [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-6merh/0/1 CSS Positioning] | ||
| + | |||
| + | Next week, make sure you bring some higher resolution files of your images to class. | ||
Latest revision as of 18:59, 19 May 2015
Contents
Last Week
- Introductions
- Discuss Class
- Discuss Wiki
- History of the Internet
- How the internet works for us
This Week
- Review Last Week
- Talk about the responsive web stuff that we did not look at last week
- The "size" of the internet
- Tools: Text Editors
- HTML / CSS Review
Open Questions
Notes
The "size" of the web
Reviewed Text and CSS Editors
- Quick solid overview on design and HTML editors are in a few of the slides here
- 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
- 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 Text Editors reference page for you here.
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 from github.com here
- We reviewed the basic HTML tags:
- We reviewed the HTML tags used for styling regions of pages:
- I showed csszengarden.com and the possibilities that CSS can bring to your HTML sites.
- I showed how to format a basic page using Espresso.
Video Notes
Section A
Section B
Files
- Download the choppingblock / html-css-demos files from github.com here
Assignment
Your task this session is to simply become familiar with the tools and HTML shown in class.
- Download the files
- Look over the HTML in the first few folders
- Download and open up Sublime text
- Download and open up Espresso, see if you can edit some CSS.
And spend some time refreshing your CSS/HTML Skills:
- Complete the following lessons at Code Academy
- CSS: An Overview
- CSS Selectors
- CSS Positioning
Next week, make sure you bring some higher resolution files of your images to class.
