An introduction to website development for prototyping

1. Resources for Prototyping Websites Kate Carruthers March 2011

2. Introduction Web design and development are creative processes There are many easy to use tools now to help you build websites We will run through some basic concepts today 12/03/2011 2 Kate Carruthers | OZGDI Sydney

3. Mindmap Site Design Amazing idea WTF Wireframe Site Build & Testing 12/03/2011 3 Kate Carruthers | OZGDI Sydney

4. 12/03/2011 Kate Carruthers | OZGDI Sydney 4 Source: http://www.spicynodes.org/blog/2010/05/21/stuff-we-like-climate-change-mind-maps/

5. Resources for Coding Check out GDI for more information http://imagine-it.org/gdi/curriculum.html 12/03/2011 5 Kate Carruthers | OZGDI Sydney

6. Resources for Design & Wireframing https://gomockingbird.com/ http://lovelycharts.com/ http://cacoo.com/ http://www.gliffy.com/wireframe-software/ http://www.simplediagrams.com/ http://pencil.evolus.vn/en-US/Home.aspx http://www.mockflow.com/ http://www.lumzy.com/ 12/03/2011 6 Kate Carruthers | OZGDI Sydney

7. Key Concepts Separation of Content from Presentation Enabled by use of HTML and CSS 12/03/2011 7 Kate Carruthers | OZGDI Sydney

8. HTML The definition of HTML is HyperText Markup Language. 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. 12/03/2011 8 Kate Carruthers | OZGDI Sydney Source: http://www.yourhtmlsource.com/starthere/whatishtml.html

9. HTML Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example). HTML is a Language, as it has code-words and syntax like any other language. 12/03/2011 9 Kate Carruthers | OZGDI Sydney Source: http://www.yourhtmlsource.com/starthere/whatishtml.html

10. HTML Check out GDI site for more learning resources http://imagine-it.org/gdi/curriculum.html 12/03/2011 10 Kate Carruthers | OZGDI Sydney

11. CSS CSS is a way to style your content in a particular way to match a corporate colour scheme, to please your audience, etc 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. 12/03/2011 11 Kate Carruthers | OZGDI Sydney

12. CSS Examples CSS Zen Garden: http://www.csszengarden.com/ 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. 12/03/2011 12 Kate Carruthers | OZGDI Sydney

13. Zen Garden HTML 12/03/2011 Kate Carruthers | OZGDI Sydney 13 Source: http://www.csszengarden.com/

14. Example 1 Source: http://www.csszengarden.com/ 12/03/2011 14 Kate Carruthers | OZGDI Sydney

15. Example 2 Source: http://www.csszengarden.com/ 12/03/2011 15 Kate Carruthers | OZGDI Sydney

16. Resources for building a site http://layouts.ironmyers.com/ http://www.code-sucks.com/css%20layouts/ http://developer.yahoo.com/yui/grids/builder 12/03/2011 16 Kate Carruthers | OZGDI Sydney

17. Testing your Website Things to test HTML CSS Links Forms & Boxes 12/03/2011 Kate Carruthers | OZGDI Sydney 17 More information at http://www.w3.org/QA/Tools/

18. HTML http://validator.w3.org/check/referer 12/03/2011 18 Kate Carruthers | OZGDI Sydney

19. CSS http://jigsaw.w3.org/css-validator/ 12/03/2011 19 Kate Carruthers | OZGDI Sydney

20. Links http://validator.w3.org/checklink/ 12/03/2011 20 Kate Carruthers | OZGDI Sydney

21. Exercise http://5lide-maker.appspot.com/list?id=ags1bGlkZS1tYWtlcnIQCxIIU2xpZGVTZXQY-cYFDA&output=slide#slide1 12/03/2011 21 Kate Carruthers | OZGDI Sydney

22. Links & Contact Info Kate Carruthers @kcarruthers www.katecarruthers.com OZGDI www.ozgdi.org Slides: www.slideshare.net/carruthk 12/03/2011 Kate Carruthers | OZGDI Sydney 22