Your SlideShare is downloading. ×
0
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Beta space | introduction websites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Beta space | introduction websites

1,010

Published on

An introduction to website development for prototyping

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,010
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Resources for Prototyping Websites<br />Kate Carruthers<br />March 2011<br />
  • 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. Mindmap<br />Site Design<br />Amazing idea<br />WTF<br />Wireframe<br />Site Build &amp; Testing<br />12/03/2011<br />3<br />Kate Carruthers | OZGDI Sydney<br />
  • 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. 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. Resources for Design &amp; 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. 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. 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. 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. 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. 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. 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 &amp; feels. It&apos;s fun and inspiring to browse all the CSS designs there.<br />12/03/2011<br />12<br />Kate Carruthers | OZGDI Sydney<br />
  • 13. Zen Garden HTML<br />12/03/2011<br />Kate Carruthers | OZGDI Sydney<br />13<br />Source: http://www.csszengarden.com/<br />
  • 14. Example 1<br />Source: http://www.csszengarden.com/<br />12/03/2011<br />14<br />Kate Carruthers | OZGDI Sydney<br />
  • 15. Example 2<br />Source: http://www.csszengarden.com/<br />12/03/2011<br />15<br />Kate Carruthers | OZGDI Sydney<br />
  • 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. Testing your Website<br />Things to test<br />HTML<br />CSS<br />Links<br />Forms &amp; Boxes<br />12/03/2011<br />Kate Carruthers | OZGDI Sydney<br />17<br />More information at http://www.w3.org/QA/Tools/<br />
  • 18. HTML<br />http://validator.w3.org/check/referer<br />12/03/2011<br />18<br />Kate Carruthers | OZGDI Sydney<br />
  • 19. CSS<br />http://jigsaw.w3.org/css-validator/<br />12/03/2011<br />19<br />Kate Carruthers | OZGDI Sydney<br />
  • 20. Links<br />http://validator.w3.org/checklink/<br />12/03/2011<br />20<br />Kate Carruthers | OZGDI Sydney<br />
  • 21. Exercise<br />http://5lide-maker.appspot.com/list?id=ags1bGlkZS1tYWtlcnIQCxIIU2xpZGVTZXQY-cYFDA&amp;output=slide#slide1<br />12/03/2011<br />21<br />Kate Carruthers | OZGDI Sydney<br />
  • 22. Links &amp; 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 />

×