Difference between revisions of "Class:Digital Portfolio 2015/Week 2"
Jump to navigation
Jump to search
(→Reviewed Text and CSS Editors) |
(→Video Notes) |
||
| Line 60: | 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 == | ||
Revision as of 18:48, 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 TextMate, install the Bundles if you like.
- Download and open up Sublime text
- Download and open up Espresso, see if you can edit some CSS.
If you can, bring some of your images to class next session.
