Your SlideShare is downloading. ×
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

980
views

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
980
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
    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