Beta space | introduction websites
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Beta space | introduction websites

  • 1,203 views
Uploaded on

An introduction to website development for prototyping

An introduction to website development for prototyping

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,203
On Slideshare
1,186
From Embeds
17
Number of Embeds
3

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 17

http://dex.io 14
http://www.dex.io 2
http://twitter.com 1

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