COAP:COAP-2100/week4-2011: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(34 intermediate revisions by the same user not shown)
Line 1: Line 1:
=== Week 4 [[Help:COAP-2100|COAP 2100]]===
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2100</categorytree>
=== Week 4 2011 edition ===


==== Topics Covered ====
==== Topics Covered ====
Line 6: Line 7:
** Using the div tag for page layout (positioning) with the CSS class and ID selector
** Using the div tag for page layout (positioning) with the CSS class and ID selector
** Discussion of some more properties (if questions)
** Discussion of some more properties (if questions)
** Web page analysis with browser tools.
* CSS '''validation'''
* CSS '''validation'''
* '''Colors''' schemes and palettes
* '''Colors''' schemes and palettes
Line 11: Line 13:
** HSV colors (shortly)
** HSV colors (shortly)
** HSL colors
** HSL colors
* '''Wireframing'''
* Web design
* '''Usability'''
* '''Basic design principles'''
* '''Wireframing''' (prototyping)
* '''Templating''' of web portals
* '''Templating''' of web portals
* XML - a short conceptual overview (to be confirmed)
 


==== Teaching materials ====
==== Teaching materials ====
Line 25: Line 30:
* [[Web templating]] (will not be tested in exams)
* [[Web templating]] (will not be tested in exams)


'''Wireframing'''
'''Web design and usability principles'''  
* [http://www.alistapart.com/articles/paperprototyping/ Paper Prototyping] by Shwan Medero, A List Apart, 2007.


; To be confirmed (for Wednesday)
* '''Read and follow up "texts for reading":''' [[COAP:COAP-2100/Web design]] (tested in exam !)
* [[XML]] and [[XML namespace]] (text, '''better''' for reading than the slides below)
* Slides: [http://tecfa.unige.ch/guides/te/files/xml-intro-edit.pdf XML Intro] (short), [http://tecfa.unige.ch/guides/te/files/xml-intro.pdf XML Intro] (long), [http://tecfa.unige.ch/guides/te/files/xml-ns.pdf XML Namspaces]
* Links pages: [[CSS]], [[Color]], [[Web design links]]


==== Software, Online tools and reference ====
==== Software, Online tools and reference ====
; Browser extensions (must have for web site analysis !)
* [https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web developer] (Firefox)
* [https://addons.mozilla.org/en-US/firefox/addon/colorzilla/ Colorzilla] (Firefox)


; Online CSS validator
; Online CSS validator
Line 45: Line 50:
* http://blogger.com/ (for the templating demo, needs a Google account, get it from https://www.google.com/accounts/ if needed)
* http://blogger.com/ (for the templating demo, needs a Google account, get it from https://www.google.com/accounts/ if needed)
* http://colorschemedesigner.com/ (Excellent color palette design and testing tool)
* http://colorschemedesigner.com/ (Excellent color palette design and testing tool)
* [[Web wireframe]] (A list of wireframe tools). We shall demo [https://gomockingbird.com/mockingbird/ Mockingbird] and [http://www.mockflow.com/ Mockflow], two simple online systems.
* [[Web wireframe]] (A list of wireframe tools). We shall demo two simple specialize online systems: [https://gomockingbird.com/mockingbird/ Mockingbird] and [http://www.mockflow.com/ Mockflow], as well as  the general purpose diagramming tool:[https://creately.com/ Creatly] and [http://www.gliffy.com/ Gliffy]


; Sharing colors palettes
; Sharing colors palettes
Line 52: Line 57:


; PC Software (installed on the classroom computers)
; PC Software (installed on the classroom computers)
* http://www.freexmleditor.com/ (XML Exchanger). See [[XML editor]] for alternatives.
* http://www.inkscape.org/ (SVG-based drawing program, freeware, easy to install). See next item for a template
* http://www.inkscape.org/ (SVG Editor, freeware, easy to install)
* Illustrator (commercial)
 
; Drawing templates
* [http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx Free Sketching & Wireframing Kit].  Available in SVG (for Inkscape), PDF (for paper/pencil) and AI (Illustrator). You will have to unzip the files.
 


==== Classroom activities ====
==== Classroom activities ====


; Monday
===== Monday =====
* (Short) feedback homework 2
* (Short) feedback homework 2
* HTML and CSS warp-up
* HTML and CSS wrap-up, positioning ([http://www.barelyfitz.com/screencast/html-training/css/positioning/ tutorial])
* Colors (lecture)
* Web page analysis with [https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web developer] (Firefox extension)
* Colors (lecture), use of [https://addons.mozilla.org/en-US/firefox/addon/colorzilla/ Colorzilla] (Firefox)
* Creating a color palette. Demo of [http://colorschemedesigner.com/ ColorScheme Designer]
* Creating a color palette. Demo of [http://colorschemedesigner.com/ ColorScheme Designer]
* Wireframing: drawing a sketch for a "multi-boxed" web page (e.g. a portal). Demo of [https://gomockingbird.com/mockingbird/ Mockingbird] and [http://www.mockflow.com/ Mockflow]
* Templating (introduction, if time)


; Wednesday
===== Wednesday =====
 
; Homework 2 feedback (CSS)
 
; Web design usability principles
* [[COAP:COAP-2100/Web design]] (important !!)
 
; Midterm Q/A
* see [[COAP:COAP-2100/week5| week 5 program]]
 
; Templating
* Short explanation of homework 4 - version A (an option for technical people)
 
<!--
* XML
* XML
** Why and where
** Why and where
Line 73: Line 94:
** http://blogger.com/ (needs a Google account, get it from https://www.google.com/accounts/ if needed)
** http://blogger.com/ (needs a Google account, get it from https://www.google.com/accounts/ if needed)
** [[Web templating]]
** [[Web templating]]
* Midterm Q/A (see [[COAP-2100/week5| week 5 program]])
 
* Short [[RSS]] demo (it time left)
* Short [[RSS]] demo (it time left)
* Short [[SVG]] demo (if time left)
* Short [[SVG]] demo (if time left)
-->


==== Homework 4 ====
==== Homework 4 ====


Choose one (!)
Choose one (!)
* Homework A is technically difficult and rather meant for CS people
* Homework B is technically easy.


Due: Before '''Monday''' week 6 lesson (so you got 1 1/2 week for this)
Due: Before '''Monday''' week 6 lesson (so you got 1 1/2 week for this)


===== A. Blogger templating =====
 
===== Option A. Blogger templating =====


; Task
; Task
* Modify a [http://www.blogger.com/ blogger] template. To do so, you need a Google account (see week 1) '''and''' then dig into the documentation.
* Modify a [http://www.blogger.com/ blogger] template. To do so, you need a Google account (see week 1) '''and''' then dig into the documentation.
* Create a blog (if not already done so)
* Create a blog (if not already done so)
* Find a good template to start with
* Find a good template to start with. You also may search on the web. Many sites offer blogger templates for free (see below)
* To edit the template, select "Layout", then "Edit HTML". You then have the option to change just the CSS part or the whole layout (tick the ''expand widget template'' box).
* To edit the template, select "Layout", then "Edit HTML". You then have the option to change just the CSS part or the whole layout (tick the ''expand widget template'' box).


Line 118: Line 144:
* I will not test templating in the exams
* I will not test templating in the exams


===== Option B. Wireframing =====
; Task
Create a '''two''' wireframes for a web site that you would like to build. I suggest that you focus on your term project and describe what you ideally would like to see, but keep in mind '''that you do not need to implement this in your final solution'''. You also can submit another project. However, in the latter, case you must explain in a few sentences its objective and for whom you are doing this.
; Requirements
* Two drawings as explained above
* You can choose any tool out of the following list:
** Pencil and paper (in this case you will have to take pictures and submit the two pictures)
** A drawing tool such as Inkscape or Illustrator of OmniGraffle (Mac)
** A diagramming software such as the free DIA or Viso (PC) or
** An online diagramming tool (see the list)
** An online wireframing tool ('''recommended option''')
** A stand-alone wireframing sofware
See [[COAP:COAP-2100/Web design‎]] for a small choice of tools shown in class, a larger set can be found [[web wireframe]] article.
; Submission
* Upload two pictures in a general-purpose format, e.g. a bitmap (png, jpg), svg or PDF
* Avoid providing a URL for an online service (since access rights may not work). Most tools let you export pictures.
* Add a file with explanations if you create a wireframe for another project than your term project.
; Due
Before Monday, '''week 6'''.
<!--
===== B. Write a short introduction or tutorial =====
===== B. Write a short introduction or tutorial =====


Line 141: Line 195:
; Tip
; Tip
: Use a Wysywig editor to write the text, e.g. download [http://kompozer.net/ Kompozer], or use a through the web editor in a web service like bloger, google sites or a wiki.
: Use a Wysywig editor to write the text, e.g. download [http://kompozer.net/ Kompozer], or use a through the web editor in a web service like bloger, google sites or a wiki.
-->
[[Category:COAP 2100 Archive]]

Latest revision as of 15:36, 28 March 2012

COAP 2100
COAP 2100 Archive
COAP:COAP-2100
COAP:COAP-2100/exams
COAP:COAP-2100/term project
COAP:COAP-2100/week1
COAP:COAP-2100/week2
COAP:COAP-2100/week3
COAP:COAP-2100/week4
COAP:COAP-2100/week5
COAP:COAP-2100/week6
COAP:COAP-2100/week7
COAP:COAP-2100/week8

Week 4 2011 edition

Topics Covered

  • HTML and CSS wrap up
    • Using the div tag for page layout (positioning) with the CSS class and ID selector
    • Discussion of some more properties (if questions)
    • Web page analysis with browser tools.
  • CSS validation
  • Colors schemes and palettes
    • RGB colors
    • HSV colors (shortly)
    • HSL colors
  • Web design
  • Usability
  • Basic design principles
  • Wireframing (prototyping)
  • Templating of web portals


Teaching materials

CSS

Templating

Web design and usability principles

Software, Online tools and reference

Browser extensions (must have for web site analysis !)
Online CSS validator
CSS Reference
Online tools and services
Sharing colors palettes
PC Software (installed on the classroom computers)
  • http://www.inkscape.org/ (SVG-based drawing program, freeware, easy to install). See next item for a template
  • Illustrator (commercial)
Drawing templates


Classroom activities

Monday
Wednesday
Homework 2 feedback (CSS)
Web design usability principles
Midterm Q/A
Templating
  • Short explanation of homework 4 - version A (an option for technical people)


Homework 4

Choose one (!)

  • Homework A is technically difficult and rather meant for CS people
  • Homework B is technically easy.

Due: Before Monday week 6 lesson (so you got 1 1/2 week for this)


Option A. Blogger templating
Task
  • Modify a blogger template. To do so, you need a Google account (see week 1) and then dig into the documentation.
  • Create a blog (if not already done so)
  • Find a good template to start with. You also may search on the web. Many sites offer blogger templates for free (see below)
  • To edit the template, select "Layout", then "Edit HTML". You then have the option to change just the CSS part or the whole layout (tick the expand widget template box).
Resources for Blogger templating - you may find more and better ones.
Tips
  • Go first through some documentation at Google or elsewhere
  • The use the web developer extension of Firefox to analyse a Design. Select CSS->View Style Information or hit CTRL-SHIFT-Y. Move your mouse until you see the "big rectangles". Click and you will see the ID or class attribute value in the web developer pane.
Minimal requirements
  • Change the CSS properties of block and text elements
  • Shortly list the changes you made in a blog post of the blog for which you made the changes
  • Quote the references you used (and that includes blogger templates you may find on the web).
To get an A
  • Either make really creative changes to the CSS part or create a template with a different layout. I do not require nor suggest that you build a template from scratch. You may reuse any existing solutions you like under the condition that you respect the licensing scheme and that you quote the source ...
Submission
  • Submit the URL of your blog to the World Classroom. Do not forget to document shortly the changes you made with a blog post.
Note
  • I will not test templating in the exams


Option B. Wireframing
Task

Create a two wireframes for a web site that you would like to build. I suggest that you focus on your term project and describe what you ideally would like to see, but keep in mind that you do not need to implement this in your final solution. You also can submit another project. However, in the latter, case you must explain in a few sentences its objective and for whom you are doing this.

Requirements
  • Two drawings as explained above
  • You can choose any tool out of the following list:
    • Pencil and paper (in this case you will have to take pictures and submit the two pictures)
    • A drawing tool such as Inkscape or Illustrator of OmniGraffle (Mac)
    • A diagramming software such as the free DIA or Viso (PC) or
    • An online diagramming tool (see the list)
    • An online wireframing tool (recommended option)
    • A stand-alone wireframing sofware

See COAP:COAP-2100/Web design‎ for a small choice of tools shown in class, a larger set can be found web wireframe article.

Submission
  • Upload two pictures in a general-purpose format, e.g. a bitmap (png, jpg), svg or PDF
  • Avoid providing a URL for an online service (since access rights may not work). Most tools let you export pictures.
  • Add a file with explanations if you create a wireframe for another project than your term project.
Due

Before Monday, week 6.

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week4-2011&oldid=38148"