COAP:COAP-3150 - week 5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
(Created page with "==Wireframes and mockups== Wireframes are sketches of web page layouts and interfaces. They can be made using a variety of tools, from pencil and paper to sophisticated softwa...")
 
 
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Wireframes and mockups==
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 3150</categorytree>
Wireframes are sketches of web page layouts and interfaces. They can be made using a variety of tools, from pencil and paper to sophisticated software, to sketch out the organization of a web page and its features.
==Site management with Dreamweaver (or [http://edutechwiki.unige.ch/en/COAP:COAP-3150_-_week_4 Komposer])==
===File management===
Defining your file structure to separate form from content.
===Site setup===
*''local site'' - [http://www.adobe.com/designcenter-archive/dreamweaver/articles/drwcs3_definelocal_print.html from Adobe Help for CS3]
*''local test site'' vs ''remote live site'' - [http://www.jou.ufl.edu/faculty/judyrobinson/3260/dreamweaver_cs3.pdf Defining your site in Dreamweaver CS3]


===Online tools===
===Tutorials===
* [http://wireframemockups.com wireframemockups.com] - also produces code for creating working [[Web prototyping software |prototypes]]
*[http://oreilly.com/web-development/excerpts/0636920001393/introducing-site-management-ch16.html Introducing Site Management - Dreamweaver CS5: The Missing Manual] from O'Reilly
* [http://www.gliffy.com/ Gliffy], [http://creately.com] - sketching online
*[https://wiki.brown.edu/confluence/display/CISDOC/Dreamweaver+Site+Design+and+Management+Tutorial Dreamweaver Site Design and Management Tutorial] - Brown University wiki
* [https://www.thesitewizard.com/dreamweaver/dreamweaver-cs6-tutorial-1.shtml Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS6]
* on lynda.com: [https://www.lynda.com/Dreamweaver-tutorials/Creating-First-Website-Dreamweaver-CC-2015/374769-2.html Creating a First Website in Dreamweaver CC 2015]
* on lynda.com: [https://www.lynda.com/Dreamweaver-tutorials/Responsive-Design-Dreamweaver-CS6/101071-2.html Responsive Design with Dreamweaver CS6]


===Template and kits===
===Readings===
[http://www.jankoatwarpspeed.com Free Sketching & Wireframing Kit] to use with Illustrator or Photoshop or other vector-based drawing or image editing software.
Chapter 6 - Site management essentials, ''Artistic Web Design'' by Vickie Ellen Wolper.


See also
==[[HTML]], [[CSS]] review==
* [[Web wireframe]] article for more tools and software (some commercial)
(self-study or if time permits)
* Further reading on [[Web_prototyping_software#Introductions_and_further_reading |web prototyping]]
* Graphic formats for the web
* images using the <img> tag
===Embedding multimedia===
Embed external media in HTML using the <embed> tag. The <embed> calls up external plugins or players.
*tutorial from HTML Source<ref> [http://www.yourhtmlsource.com/images/multimedia.html HTML Source]</ref>
*[http://www.panix.com/web/faq/multimedia/embedded.html some examples] of embedded files and code
*In Dreamweaver, choose ''Insert > Media >''... Select file and click ''Choose''.
*[[XHTML#Composite_documents | embedding SVG]] example
===Embedding web apps/widgets===
*[[Using web widgets]]
*Examples and collections of widgets
** [http://www.google.com/ig/directory?synd=open Some Google Gadgets]
** [http://www.widgipedia.com/ Widgipedia]
 
;In class exercise.
* Embed an object (widget or from a site like Youtube) into an HTML file
;Assignment 7 – HTML mockup prototype
 
===References===
<references/>
[[Category:COAP 3150]]

Latest revision as of 17:24, 16 November 2016

COAP 3150
COAP:COAP-3150
COAP:COAP-3150 - week 1
COAP:COAP-3150 - week 2
COAP:COAP-3150 - week 3
COAP:COAP-3150 - week 4
COAP:COAP-3150 - week 5
COAP:COAP-3150 - week 6
Design processes and models
Typography
Web design principles

Site management with Dreamweaver (or Komposer)

File management

Defining your file structure to separate form from content.

Site setup

Tutorials

Readings

Chapter 6 - Site management essentials, Artistic Web Design by Vickie Ellen Wolper.

HTML, CSS review

(self-study or if time permits)

  • Graphic formats for the web
  • images using the <img> tag

Embedding multimedia

Embed external media in HTML using the <embed> tag. The <embed> calls up external plugins or players.

  • tutorial from HTML Source[1]
  • some examples of embedded files and code
  • In Dreamweaver, choose Insert > Media >... Select file and click Choose.
  • embedding SVG example

Embedding web apps/widgets

In class exercise.
  • Embed an object (widget or from a site like Youtube) into an HTML file
Assignment 7 – HTML mockup prototype

References

  1. ↑ HTML Source
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3150_-_week_5&oldid=60925"