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

Beta space | introduction websites

on

  • 1,126 views

An introduction to website development for prototyping

An introduction to website development for prototyping

Statistics

Views

Total Views
1,126
Views on SlideShare
1,109
Embed Views
17

Actions

Likes
0
Downloads
1
Comments
0

3 Embeds 17

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Beta space | introduction websites Beta space | introduction websites Presentation Transcript

    • Resources for Prototyping Websites
      Kate Carruthers
      March 2011
    • 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
    • Mindmap
      Site Design
      Amazing idea
      WTF
      Wireframe
      Site Build & Testing
      12/03/2011
      3
      Kate Carruthers | OZGDI Sydney
    • 12/03/2011
      Kate Carruthers | OZGDI Sydney
      4
      Source: http://www.spicynodes.org/blog/2010/05/21/stuff-we-like-climate-change-mind-maps/
    • Resources for Coding
      Check out GDI for more information
      http://imagine-it.org/gdi/curriculum.html
      12/03/2011
      5
      Kate Carruthers | OZGDI Sydney
    • 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
    • Key Concepts
      Separation of Content from Presentation
      Enabled by use of HTML and CSS
      12/03/2011
      7
      Kate Carruthers | OZGDI Sydney
    • 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
    • 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
    • HTML
      Check out GDI site for more learning resources
      http://imagine-it.org/gdi/curriculum.html
      12/03/2011
      10
      Kate Carruthers | OZGDI Sydney
    • 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
    • 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
    • Zen Garden HTML
      12/03/2011
      Kate Carruthers | OZGDI Sydney
      13
      Source: http://www.csszengarden.com/
    • Example 1
      Source: http://www.csszengarden.com/
      12/03/2011
      14
      Kate Carruthers | OZGDI Sydney
    • Example 2
      Source: http://www.csszengarden.com/
      12/03/2011
      15
      Kate Carruthers | OZGDI Sydney
    • 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
    • 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/
    • HTML
      http://validator.w3.org/check/referer
      12/03/2011
      18
      Kate Carruthers | OZGDI Sydney
    • CSS
      http://jigsaw.w3.org/css-validator/
      12/03/2011
      19
      Kate Carruthers | OZGDI Sydney
    • Links
      http://validator.w3.org/checklink/
      12/03/2011
      20
      Kate Carruthers | OZGDI Sydney
    • Exercise
      http://5lide-maker.appspot.com/list?id=ags1bGlkZS1tYWtlcnIQCxIIU2xpZGVTZXQY-cYFDA&output=slide#slide1
      12/03/2011
      21
      Kate Carruthers | OZGDI Sydney
    • 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