Electronics design walk through website

Discussion in 'General Electronics Chat' started by Barnaby Walters, Oct 13, 2011.

  1. Barnaby Walters

    Thread Starter Member

    Mar 2, 2011
    103
    4
    Hello all,

    I was recently reading a borrowed copy of H&Hs Art of Electronics, and realised that the most useful and interesting parts were their example designs, where they walk through designing a circuit module step by step, explaining component choices, etc. Similar posts here have been very useful to me before.

    I am thinking of writing a little walk through-writing web app as part of my website. It would essentially be a database of small, concise walk throughs that demonstrate the thought processes behind a particular design (not only restricted to electronics, either).

    I think this has a serious advantage over traditional instruction writing websites as it focuses on the tought patterns involved, and should be adaptable to most scenarios if well written.

    If I did, would anyone here be likely to use it/help contribute walk throughs? I am nowhere near experienced enough with electronics to offer much advice! (I'll be writing walk throughs in other Categories)

    Cheers,
    Barnaby
     
  2. dataman19

    Member

    Dec 26, 2009
    136
    29
    I'm game...
    Dave
    Dataman19
     
  3. Georacer

    Moderator

    Nov 25, 2009
    5,142
    1,266
    Sure! Fire away!
     
  4. Barnaby Walters

    Thread Starter Member

    Mar 2, 2011
    103
    4
    Fantastic! I'll start straight after I get my current client's website live.

    I'll let you know when it's ready to use.

    Cheers,
    Barnaby
     
  5. Barnaby Walters

    Thread Starter Member

    Mar 2, 2011
    103
    4
    Hi people,

    Okay, got the barest of wireframes set up, and done the first prototype of the UI.

    What do you think? http://waterpigs.co.uk/patterns/

    Cheers,
    Barnaby
     
  6. nerdegutta

    Moderator

    Dec 15, 2009
    2,515
    785
    Hi, it's a start.

    At my current PC I have 1366 x 768 resolution. That results in a area on the right side that's not used.

    How about adjusting it to fill the screen?
     
  7. Barnaby Walters

    Thread Starter Member

    Mar 2, 2011
    103
    4
    Hmmm, I don't have a screen that large - I've taken ages making sure it'll degrade nicely onto tablets and smartphones (will nicely once I remove the notes from the right on smartphones).

    Out of interest, can you see all three columns? Instructions, example and hovering Scratchpad? If you can't, what browser are you using?

    EDIT: okay, you're using FF 3.6 (probably due an upgrade, BTW!). Should be fixed now.
    Cheers,
    Barnaby
     
    Last edited: Oct 15, 2011
  8. nerdegutta

    Moderator

    Dec 15, 2009
    2,515
    785
    This computer (the laptop):

    Win 7, Firefox 3.6.23

    Attached is a screenshot.
     
  9. Barnaby Walters

    Thread Starter Member

    Mar 2, 2011
    103
    4
    Cheers, I saw you pop up in my analytics (piwik has real time visitors! Super cool) and realised I hadn't tested in FF - there was a positioning bug that I fixed for the hovering notes column.

    People - do you think this format (theory, example, user notes) is a good one to use?

    Cheers,
    Barnaby
     
  10. Georacer

    Moderator

    Nov 25, 2009
    5,142
    1,266
    I see the Scratchpad alright. Might want to look at some site themes to select your colours. A more professional palette always looks better.
     
  11. MrChips

    Moderator

    Oct 2, 2009
    12,436
    3,360
    There is quite a learning curve to building a nice website. I agree with Georacer, watch your color palette. If you would like some ideas on layout design, look at any Dorling Kindersley publication and see how they make very good use of white space.

    Try to stay away from frames and tables if you can. Learn to use CSS.
    Here is a useful link on CSS:

    http://www.w3schools.com/css/default.asp
     
  12. nerdegutta

    Moderator

    Dec 15, 2009
    2,515
    785
    CSS is great.

    Make sure the contrast is right, so the site is easy to read. Don't wander off with some fancy layout. Not too many colors.
     
  13. atferrari

    AAC Fanatic!

    Jan 6, 2004
    2,648
    762
    And avoid a black background at any cost!
     
  14. Barnaby Walters

    Thread Starter Member

    Mar 2, 2011
    103
    4
    Heh, you're telling me… It's taken me years to get to the stage I'm at. Just finished redoing one of the first semi-commercial websites I ever made due to poor use of JavaScript, tables for layout and other amateur clutter.

    Actually, I use CSS extensively, in all the websites I develop— in fact, for all of my styling. I also care greatly about semantics, but in this case decided eventually that using a table for the main content made the most sense, and is most likely to degrade nicely for users of browsers that can't handle html5.

    For example, it would be difficult to apply detailed styles to both rows and columns in all browsers (I.e. without using nth child selectors) without using tables. Also, a tabular layout degrades in a more suitable way (keeping steps/step examples joined up at equal heights) in browsers with no CSS than other layouts (the more semantic approach I considered was to use lists, but decided against it).

    Is that justification enough? I can go into more detail if you wish… ;) Let it be known that I carefully considered my design choices.

    About the colour palette — what do you not like about it? — the red/green contrast? The main reason I chose it was to maintain some consistency with my root website, where the redder header is lead into the greener content via a yellow nav element. It's likely that I'll do something similar here, eventually.

    I (and HTML5 boilerplate) generally try to take special care over text contrast, and as such never have pure black/white or other com. colours against each other. Was there a particular problem you saw on the demo?

    RE black backgrounds — agreed they can make things tricky on the eyes, although I have found that a darker background with lighter section for the content (e.g. My website) draws focus nicely. I have no heat maps to prove this, but it appears to work!

    Cheers,
    Barnaby
     
  15. nerdegutta

    Moderator

    Dec 15, 2009
    2,515
    785
    The contrast works for me...

    A couple of questions:

    1) Instead of scrolling the page up and down, I think it would be nice to have some sort of logo or something at the top of the page, like a menu or something. (I know this is just a draft, and you are working on it.:)) Perhaps a "tool" line on top of the scratchpad. "Top of page, Copy, Paste, Save" Like a menu header.

    2) How will you maintain the site, and its content? Hardcode every instructions and examples, or are you going to use some sort of database, for storing the instructions and examples.

    3) How about pictures and schematics. One kind of filetype or ....

    Just some thoughts...
     
  16. Barnaby Walters

    Thread Starter Member

    Mar 2, 2011
    103
    4
    Cool. I like it personally, but I'll be playing around with the colours a bit anyway

    Hmm… what are you actually asking for? I'll probably put any controls (export, print, suggest improvements, etc) in the column with the scratchpad.

    It'll be a database driven system. I'm planning on making a semi-wiki, but moderated to keep writing quality good. Also planning on having a 'suggest improvements' feature where you can make edits directly in a guide and suggest them.

    Sign up will be supported, which will automatically save any notes users make on the scratchpad for any one guide, as well as giving them the ability to submit new guides and request new categories.

    Haven't looked into code igniter's image handling abilities, but at least jpg and png upload will be supported. Tempted to support SVG too, as I find that a good format for schematics. Although I do use a vector drawing program for schematics, which may well make me a bit of an oddity!

    Thanks for feedback — much appreciated!

    Barnaby
     
  17. Georacer

    Moderator

    Nov 25, 2009
    5,142
    1,266
    Check these out:
    http://forums.thinkingwithportals.com/downloads.php
    http://euw.leagueoflegends.com/

    Both sites have a menu bar on the top, which I find very useful. Alternatively a side bar can be used, but it's not as space-effective.

    Also notice that they use a 3-colour only palette to work from. Thinkwithportals has white-blue-black and League of Legends goes black-ochre-dark blue. This is easy on the eye and gives good contrast.

    Personally, I find that your brown with all the tones of green is rather dull and doesn't give that much contrast.
     
  18. Barnaby Walters

    Thread Starter Member

    Mar 2, 2011
    103
    4
    Hey georacer,

    That's interesting and proves the ultimate subjecivity of everything, because I find the portal website to be rather generic and dull! I prefer the league of legends site, and it's one of the few sites ever to successfully use yellow for layout! But both of them fall into the trap of using very, very small body text. 12px may be the default, but it's not optimum.

    If by the tool bar you're referring to the navigation bars — sure, my site will have one, but there's not an awful lot to navigate to at the moment, apart from the (unrelated) rest of my site. I'll add a nav bar and some dummy controls to the demo today.

    I'll have a play around with the colour scheme and layout. I like the black/two complimentary colours that League of legends uses, I might go for something a bit more like that.

    Cheers,
    Barnaby
     
  19. MrChips

    Moderator

    Oct 2, 2009
    12,436
    3,360
    Sure it is subjective. I hate black. It may work for a game site but not for a serious educational site. It's your site so you get to choose.
     
  20. Barnaby Walters

    Thread Starter Member

    Mar 2, 2011
    103
    4
    Agreed — Perhaps that's why so many websites use generic colour schemes: because lots of people like them and are used to them. At least with personal projects I have a bit more freedom!

    EDIT: Just done my first test on IE, and I assume that's the browser you're using, because it does look rather black! The coloured backgrounds aren't being loaded. Hmmm… Working on it now.

    Made some alterations/additions, and inserted some more dummy content. Any thoughts? Also added ARIA roles to many of the elements — the page reads alright using OS X's VoiceOver.

    http://waterpigs.co.uk/patterns/

    Also trying to think of a good name. I liked "Wisdom Exchange" but it's already taken.

    I'll get started on the actual back end soon.

    Cheers,
    Barnaby
     
    Last edited: Oct 16, 2011
Loading...