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

Beta space | introduction websites

on

  • 1,147 views

An introduction to website development for prototyping

An introduction to website development for prototyping

Statistics

Views

Total Views
1,147
Views on SlideShare
1,130
Embed Views
17

Actions

Likes
0
Downloads
2
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