Difference between revisions of "Class:Digital Portfolio 2013/Week 2"
Jump to navigation
Jump to search
(→Video Notes) |
|||
| (9 intermediate revisions by the same user not shown) | |||
| Line 18: | Line 18: | ||
; Is [http://foliodrop.com FolioDrop] a good solution for my website? | ; Is [http://foliodrop.com FolioDrop] a good solution for my website? | ||
: Added it to the list of [[Online:Site Building (CMS) Solutions | Site Building (CMS) Solutions]] | : 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 | + | : 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? | ; What do i need if i want a Wordpress website? | ||
| Line 25: | Line 25: | ||
== Notes == | == Notes == | ||
| − | + | === Optimizing Images for The Web === | |
| − | |||
| − | |||
| − | http:// | + | 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 | ||
| − | Text Editors | + | === 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]]. | ||
| + | |||
| + | === 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. | ||
| + | |||
| + | === Installed Matthew's TextMate Bundle === | ||
| + | |||
| + | Everything you need to know about installing the Chopping Block TextMate bundle has been [[Desktop:TextMate Bundles|posted for you here]]. | ||
== 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 | + | * [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 == | ||
| − | + | * Download the choppingblock / html-css-demos files [https://github.com/choppingblock/html-css-demos/archive/master.zip from github.com here] | |
| − | : | + | * [[Desktop:TextMate Bundles|Installing the Chopping Block TextMate bundle]]. |
== Assignment == | == 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. | |
| − | |||
Latest revision as of 09:18, 16 May 2013
Contents
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.
- Two videos below
- Image Format Reference
- I also showed the excellent tool 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 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.
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
- Dimensions of the Web
- Optimizing Images for the Web
- Tools: TextEditors: TextMate, Sublime and Espresso
- Basic HTML Elements
- Assignment Overview
Section B
- Quick Wordpress (and Wordpress hosting) overview
- Optimizing Images for the Web Part 1
- Optimizing Images for the Web Part 2
- Pixel Dimensions of the Web
- Tools: TextEditors: TextMate and Sublime
- Basic HTML Elements
- Styling HTML with CSS
- Installing Matthew's TextMate Bundle and Assignment
Files
- Download the choppingblock / html-css-demos files from github.com here
- Installing the Chopping Block TextMate bundle.
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.
