Difference between revisions of "Class:Digital Portfolio 2013/Week 2"

From wiki.mpsdigitalphoto.com
Jump to navigation Jump to search
(Created page with "== Last Week == * Introductions * Discuss Class * Discuss Wiki * History of the Internet * How the internet works for us == This Week == * Review Last Week * Tools * HTML /...")
 
(→‎Video Notes)
 
(10 intermediate revisions by the same user not shown)
Line 10: Line 10:
  
 
* Review Last Week
 
* Review Last Week
−
* Tools
+
* Prepping Images for the Web
−
* HTML / CSS
+
* Tools: Text Editors
 +
* HTML / CSS Review
  
 
== Open Questions ==
 
== Open Questions ==
  
−
; Question
+
; Is [http://foliodrop.com FolioDrop] a good solution for my website?
−
: note - http://url
+
: Added it to the list of [[Online:Site Building (CMS) Solutions | Site Building (CMS) Solutions]]
 +
: Also added a section on the page above outlining key criteria for vetting Site Building Solutions
  
−
== Links ==
+
; What do i need if i want a Wordpress website?
 +
: Video of the conversation below: Quick Wordpress (and Wordpress hosting) overview
  
−
; Title - http://url
+
== Notes ==
−
: note
+
 
 +
=== Optimizing Images for The Web ===
 +
 
 +
We covered many aspects/techniques related to optimizing your images for the web.
 +
* Two videos below
 +
* [http://en.wikipedia.org/wiki/Image_file_formats Image Format Reference]
 +
* I also showed the excellent tool [http://imageoptim.com Imageoptim] for further compressing your images
 +
 
 +
=== Reviewed Text and CSS Editors ===
 +
 
 +
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]].
  
−
== Notes ==
+
=== 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.
  
−
1. is it flash or html
+
Download the choppingblock / html-css-demos files [https://github.com/choppingblock/html-css-demos/archive/master.zip from github.com here]
−
2. what happen on a mobile?
 
−
3. Can i deep link
 
  
−
http://www.monicamenez.de
+
* 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.
  
−
Text Editors
+
=== Installed Matthew's TextMate Bundle ===
−
- TextMate <macromates.com>
 
−
- http://www.sublimetext.com
 
−
- espresso
 
  
−
; Title - http://url
+
Everything you need to know about installing the Chopping Block TextMate bundle has been [[Desktop:TextMate Bundles|posted for you here]].
−
: note
 
  
 
== Video Notes ==
 
== Video Notes ==
 +
 +
=== Section A ===
 +
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130515_MPS-DP-A_DimensionsOfTheWeb.mp4 Dimensions of the Web]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130515_MPS-DP-A_OptimizingImagesForWeb.mp4 Optimizing Images for the Web]
 +
* [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/20130515_MPS-DP-A_BasicHTMLElements.mp4 Basic HTML Elements]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130515_MPS-DP-A_AssignmentOverview.mp4 Assignment Overview]
  
 
=== Section B ===
 
=== Section B ===
Line 48: Line 78:
 
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130513_MPS-DP_DimensionsOfTheWeb.mp4 Pixel Dimensions of the Web]
 
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130513_MPS-DP_DimensionsOfTheWeb.mp4 Pixel Dimensions of the Web]
 
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130513_MPS-DP_TextEditorsTextMateAndSublime.mp4 Tools: TextEditors: TextMate and Sublime]
 
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130513_MPS-DP_TextEditorsTextMateAndSublime.mp4 Tools: TextEditors: TextMate and Sublime]
−
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130513_MPS-DP_BasicHTMLElements.mp4 Basic HTML Elementts]
+
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130513_MPS-DP_BasicHTMLElements.mp4 Basic HTML Elements]
 
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130513_MPS-DP_StylingCSSAndEspresso.mp4 Styling HTML with CSS]
 
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130513_MPS-DP_StylingCSSAndEspresso.mp4 Styling HTML with CSS]
 
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130513_MPS-DP_TextMateBundleAndAssignment.mp4 Installing Matthew's TextMate Bundle and Assignment]
 
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130513_MPS-DP_TextMateBundleAndAssignment.mp4 Installing Matthew's TextMate Bundle and Assignment]
Line 54: Line 84:
 
== Files ==
 
== Files ==
  
−
; Title - http://url
+
* Download the choppingblock / html-css-demos files [https://github.com/choppingblock/html-css-demos/archive/master.zip from github.com here]
−
: note
+
* [[Desktop:TextMate Bundles|Installing the Chopping Block TextMate bundle]].
  
 
== Assignment ==
 
== Assignment ==
  
−
'''Bold'''
+
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.
  
−
Bring with you to class next week .
+
If you can, bring some of your images to class next session.
−
* Description.
 

Latest revision as of 09:18, 16 May 2013

Last Week

  • Introductions
  • Discuss Class
  • Discuss Wiki
  • History of the Internet
  • How the internet works for us

This Week

  • Review Last Week
  • Prepping Images for the Web
  • Tools: Text Editors
  • HTML / CSS Review

Open Questions

Is FolioDrop a good solution for my website?
Added it to the list of Site Building (CMS) Solutions
Also added a section on the page above outlining key criteria for vetting Site Building Solutions
What do i need if i want a Wordpress website?
Video of the conversation below: Quick Wordpress (and Wordpress hosting) overview

Notes

Optimizing Images for The Web

We covered many aspects/techniques related to optimizing your images for the web.

Reviewed Text and CSS Editors

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

Installed Matthew's TextMate Bundle

Everything you need to know about installing the Chopping Block TextMate bundle has been posted for you here.

Video Notes

Section A

Section B

Files

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.

Retrieved from "http://wiki.mpsdigitalphoto.com/index.php?title=Class:Digital_Portfolio_2013/Week_2&oldid=57"