Resources for Prototyping Websites<br />Kate Carruthers<br />March 2011<br />
Introduction<br />Web design and development are creative processes<br />There are many easy to use tools now to help you ...
Mindmap<br />Site Design<br />Amazing idea<br />WTF<br />Wireframe<br />Site Build & Testing<br />12/03/2011<br />3<br />K...
12/03/2011<br />Kate Carruthers | OZGDI Sydney<br />4<br />Source: http://www.spicynodes.org/blog/2010/05/21/stuff-we-like...
Resources for Coding<br />Check out GDI for more information<br />http://imagine-it.org/gdi/curriculum.html<br />12/03/201...
Resources for Design & Wireframing<br />https://gomockingbird.com/<br />http://lovelycharts.com/<br />http://cacoo.com/<br...
Key Concepts<br />Separation of Content from Presentation<br />Enabled by use of HTML and CSS<br />12/03/2011<br />7<br />...
HTML<br />The definition of HTML is HyperText Markup Language.<br />HyperText is the method by which you move around on th...
HTML<br />Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, fo...
HTML<br />Check out GDI site for more learning resources<br />http://imagine-it.org/gdi/curriculum.html<br />12/03/2011<br...
CSS<br />CSS is a way to style your content in a particular way <br />to match a corporate colour scheme, to please your a...
CSS Examples<br />CSS Zen Garden:<br />http://www.csszengarden.com/<br />Uses one HTML template and showcases thousands of...
Zen Garden HTML<br />12/03/2011<br />Kate Carruthers | OZGDI Sydney<br />13<br />Source: http://www.csszengarden.com/<br />
Example 1<br />Source: http://www.csszengarden.com/<br />12/03/2011<br />14<br />Kate Carruthers | OZGDI Sydney<br />
Example 2<br />Source: http://www.csszengarden.com/<br />12/03/2011<br />15<br />Kate Carruthers | OZGDI Sydney<br />
Resources for building a site<br />http://layouts.ironmyers.com/<br />http://www.code-sucks.com/css%20layouts/<br />http:/...
Testing your Website<br />Things to test<br />HTML<br />CSS<br />Links<br />Forms & Boxes<br />12/03/2011<br />Kate Carrut...
HTML<br />http://validator.w3.org/check/referer<br />12/03/2011<br />18<br />Kate Carruthers | OZGDI Sydney<br />
CSS<br />http://jigsaw.w3.org/css-validator/<br />12/03/2011<br />19<br />Kate Carruthers | OZGDI Sydney<br />
Links<br />http://validator.w3.org/checklink/<br />12/03/2011<br />20<br />Kate Carruthers | OZGDI Sydney<br />
Exercise<br />http://5lide-maker.appspot.com/list?id=ags1bGlkZS1tYWtlcnIQCxIIU2xpZGVTZXQY-cYFDA&output=slide#slide1<br />1...
Links & Contact Info<br />Kate Carruthers<br />@kcarruthers<br />www.katecarruthers.com<br />OZGDI<br />www.ozgdi.org<br /...
Upcoming SlideShare
Loading in...5
×

Beta space | introduction websites

1,029

Published on

An introduction to website development for prototyping

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,029
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Beta space | introduction websites

  1. 1. Resources for Prototyping Websites<br />Kate Carruthers<br />March 2011<br />
  2. 2. Introduction<br />Web design and development are creative processes<br />There are many easy to use tools now to help you build websites<br />We will run through some basic concepts today<br />12/03/2011<br />2<br />Kate Carruthers | OZGDI Sydney<br />
  3. 3. Mindmap<br />Site Design<br />Amazing idea<br />WTF<br />Wireframe<br />Site Build & Testing<br />12/03/2011<br />3<br />Kate Carruthers | OZGDI Sydney<br />
  4. 4. 12/03/2011<br />Kate Carruthers | OZGDI Sydney<br />4<br />Source: http://www.spicynodes.org/blog/2010/05/21/stuff-we-like-climate-change-mind-maps/<br />
  5. 5. Resources for Coding<br />Check out GDI for more information<br />http://imagine-it.org/gdi/curriculum.html<br />12/03/2011<br />5<br />Kate Carruthers | OZGDI Sydney<br />
  6. 6. Resources for Design & Wireframing<br />https://gomockingbird.com/<br />http://lovelycharts.com/<br />http://cacoo.com/<br />http://www.gliffy.com/wireframe-software/<br />http://www.simplediagrams.com/<br />http://pencil.evolus.vn/en-US/Home.aspx<br />http://www.mockflow.com/<br />http://www.lumzy.com/<br />12/03/2011<br />6<br />Kate Carruthers | OZGDI Sydney<br />
  7. 7. Key Concepts<br />Separation of Content from Presentation<br />Enabled by use of HTML and CSS<br />12/03/2011<br />7<br />Kate Carruthers | OZGDI Sydney<br />
  8. 8. HTML<br />The definition of HTML is HyperText Markup Language.<br />HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.<br />12/03/2011<br />8<br />Kate Carruthers | OZGDI Sydney<br />Source: http://www.yourhtmlsource.com/starthere/whatishtml.html<br />
  9. 9. HTML<br />Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).<br />HTML is a Language, as it has code-words and syntax like any other language.<br />12/03/2011<br />9<br />Kate Carruthers | OZGDI Sydney<br />Source: http://www.yourhtmlsource.com/starthere/whatishtml.html<br />
  10. 10. HTML<br />Check out GDI site for more learning resources<br />http://imagine-it.org/gdi/curriculum.html<br />12/03/2011<br />10<br />Kate Carruthers | OZGDI Sydney<br />
  11. 11. CSS<br />CSS is a way to style your content in a particular way <br />to match a corporate colour scheme, to please your audience, etc<br />When you use CSS to style your content, you can also easily replace your CSS with a different CSS and get a completely different result.<br />12/03/2011<br />11<br />Kate Carruthers | OZGDI Sydney<br />
  12. 12. CSS Examples<br />CSS Zen Garden:<br />http://www.csszengarden.com/<br />Uses one HTML template and showcases thousands of different CSS sheets that give the HTML thousands of unique look & feels. It's fun and inspiring to browse all the CSS designs there.<br />12/03/2011<br />12<br />Kate Carruthers | OZGDI Sydney<br />
  13. 13. Zen Garden HTML<br />12/03/2011<br />Kate Carruthers | OZGDI Sydney<br />13<br />Source: http://www.csszengarden.com/<br />
  14. 14. Example 1<br />Source: http://www.csszengarden.com/<br />12/03/2011<br />14<br />Kate Carruthers | OZGDI Sydney<br />
  15. 15. Example 2<br />Source: http://www.csszengarden.com/<br />12/03/2011<br />15<br />Kate Carruthers | OZGDI Sydney<br />
  16. 16. Resources for building a site<br />http://layouts.ironmyers.com/<br />http://www.code-sucks.com/css%20layouts/<br />http://developer.yahoo.com/yui/grids/builder<br />12/03/2011<br />16<br />Kate Carruthers | OZGDI Sydney<br />
  17. 17. Testing your Website<br />Things to test<br />HTML<br />CSS<br />Links<br />Forms & Boxes<br />12/03/2011<br />Kate Carruthers | OZGDI Sydney<br />17<br />More information at http://www.w3.org/QA/Tools/<br />
  18. 18. HTML<br />http://validator.w3.org/check/referer<br />12/03/2011<br />18<br />Kate Carruthers | OZGDI Sydney<br />
  19. 19. CSS<br />http://jigsaw.w3.org/css-validator/<br />12/03/2011<br />19<br />Kate Carruthers | OZGDI Sydney<br />
  20. 20. Links<br />http://validator.w3.org/checklink/<br />12/03/2011<br />20<br />Kate Carruthers | OZGDI Sydney<br />
  21. 21. Exercise<br />http://5lide-maker.appspot.com/list?id=ags1bGlkZS1tYWtlcnIQCxIIU2xpZGVTZXQY-cYFDA&output=slide#slide1<br />12/03/2011<br />21<br />Kate Carruthers | OZGDI Sydney<br />
  22. 22. Links & Contact Info<br />Kate Carruthers<br />@kcarruthers<br />www.katecarruthers.com<br />OZGDI<br />www.ozgdi.org<br />Slides: www.slideshare.net/carruthk<br />12/03/2011<br />Kate Carruthers | OZGDI Sydney<br />22<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×