beta space | introduction websites
DESCRIPTION
An introduction to website development for prototypingTRANSCRIPT
Resources for Prototyping Websites
Kate CarruthersMarch 2011
Kate Carruthers | OZGDI Sydney 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
Kate Carruthers | OZGDI Sydney 3
Amazing idea WTF
Site Design
Wireframe
Site Build & Testing
12/03/2011
Mindmap
Kate Carruthers | OZGDI Sydney 412/03/2011Source: http://www.spicynodes.org/blog/2010/05/21/stuff-we-like-climate-change-mind-maps/
Kate Carruthers | OZGDI Sydney 5
Resources for Coding
Check out GDI for more informationhttp://imagine-it.org/gdi/curriculum.html
12/03/2011
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
Kate Carruthers | OZGDI Sydney 7
Key Concepts
• Separation of Content from Presentation• Enabled by use of HTML and CSS
12/03/2011
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
Source: http://www.yourhtmlsource.com/starthere/whatishtml.html
Kate Carruthers | OZGDI Sydney 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
Source: http://www.yourhtmlsource.com/starthere/whatishtml.html
Kate Carruthers | OZGDI Sydney 10
HTML
• Check out GDI site for more learning resourceshttp://imagine-it.org/gdi/curriculum.html
12/03/2011
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
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
Kate Carruthers | OZGDI Sydney 13
Zen Garden HTML
12/03/2011
Source: http://www.csszengarden.com/
Kate Carruthers | OZGDI Sydney 14
Example 1
Source: http://www.csszengarden.com/
12/03/2011
Kate Carruthers | OZGDI Sydney 15
Example 2
Source: http://www.csszengarden.com/
12/03/2011
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
Kate Carruthers | OZGDI Sydney 17
Testing your Website
• Things to test• HTML• CSS• Links• Forms & Boxes
12/03/2011
More information at http://www.w3.org/QA/Tools/
Kate Carruthers | OZGDI Sydney 18
HTML
http://validator.w3.org/check/referer
12/03/2011
Kate Carruthers | OZGDI Sydney 19
CSS
http://jigsaw.w3.org/css-validator/
12/03/2011
Kate Carruthers | OZGDI Sydney 20
Links
http://validator.w3.org/checklink/
12/03/2011
Kate Carruthers | OZGDI Sydney 21
Exercise
http://5lide-maker.appspot.com/list?id=ags1bGlkZS1tYWtlcnIQCxIIU2xpZGVTZXQY-cYFDA&output=slide#slide1
12/03/2011
Kate Carruthers | OZGDI Sydney 22
Links & Contact Info
Kate [email protected]
OZGDIwww.ozgdi.org
Slides: www.slideshare.net/carruthk 12/03/2011