Forums

idea for newbies and web pros (22 posts)

  1. podz
    Support Maven
    Posted 5 years ago #

    I get a 404 ?
    But if there is something, shoot!
    I know it can be disheartening to see a post you make go unanswered, but that's just because it may only be answerable by one or 2 people, and until they check the forum, the rest of us maybe be clueless.
    But answers are given, so do post :)

  2. Cena
    Member
    Posted 5 years ago #

    Southsou, I for one think it's a great idea. NuclearMoose already has an excellent annotated wp-layout.css on his site, but it'd be awesome to see it made 'visual'.

  3. podz
    Support Maven
    Posted 5 years ago #

    Ah! :)
    Okay .. first thoughts - no problem. I could do one of those.
    Second thoughts - although using graphical balloons would be a start point, the WP user would also have to be prepared to read all the guidelines that accompany the CSS, and (for me at least) be prepared to break and subsequently mend the page at times on their journey to make it better.
    If it would be useful I'll start on one tomorrow (it's 22:52 here now).

  4. southsou
    Member
    Posted 5 years ago #

    Cena: Yes, I did look at the annotated layout on NuclearMoose's site. It was very helpful.
    podz: Thanks for looking again. I certainly agree that we newbies have to read and be prepared for failure. Is there a Bible (other than the docs) to swear on, to say that we will read in addition to looking at pictures? :)

  5. podz
    Support Maven
    Posted 5 years ago #

    LOL !
    The only swearing you need will come naturally as you break it :)
    I'll do a default install of WP tomorrow, then see what I can do.

  6. southsou
    Member
    Posted 5 years ago #

    podz: Fantastic!! I'll check in to see. Get some sleep.

  7. TechGnome
    Moderator
    Posted 5 years ago #

    Actually, what I think might be beneficial is an image (or set of images) that show (on the left) the default WP site, and (on the right) the CSS contents, with arrows, that show "this CSS block goes with this content piece".....
    TG

  8. davidchait
    Member
    Posted 5 years ago #

    Well, another way to show some of that is to take two images of a webpage, one in full color on the left, one grayscale-watermarked on the right with 'overlays' on each section giving a pointer to the CSS and index.php sections that refer to it.
    -d
    http://www.chait.net

  9. Stevarino
    Member
    Posted 5 years ago #

    LOL thats a lot of information to fit on one screen and constantly scrolling will only make it harder.
    What about a flash template? You see an area, click it, and up pops a title with explanation and css rules. Combine that with a "slide show" mode where people can just cycle through the layout, and we have a great tool to teach people not only wordpress, but also css!

  10. podz
    Support Maven
    Posted 5 years ago #

    I'm aware that too much scrolling would be annoying, so what I was thinking of doing was a screenshot of a default WP install, and then having numbered balloons pointing to the various sections:
    header div
    header text
    p text
    .feedback
    menu div etc
    This screenshot would be opened in a separate window, and in the original window would be a list of the numbers along with an explanation of the CSS involved.
    The user has then just to flick between the two screens - a hassle yes, but we are talking about a huge amount of in formation.
    For instance, if bubble 5 pointed at text, then it would look like:
    --------
    5. The way your entered text displays is controlled by this statement in the css:
    p, li, .feedback {
    font: 90%/175% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing: -1px;
    }
    Changing the 90% will change the text size, while changing the 175% will change the text spacing.
    If you want to change the font, alter the 4 font names to your desired choice.
    Letter-spacing is self-explanatory, but try changing the value there just so you can see it's effect.
    ----------
    I think some of the above suggestions are excellent, but I'm afraid they are probably beyond my capabilities.
    Worth me going with my idea ?

  11. podz
    Support Maven
    Posted 5 years ago #

    Okay.. had a bit of a go
    http://www.tamba2.org.uk/css/
    It's basic, very unfinished and the layout could do with help (I've got a bad cold today - my excuse ;) )
    While I think something similar would do for some elements, when it comes to the actual layout, a single screenshot would get way too confusing. Maybe have one for text elements, one for layout elements ?
    Thoughts so far ?

  12. southsou
    Member
    Posted 5 years ago #

    podz:
    Good morning (I'm in Seattle). Thank you for your effort. That's what I had in mind. It's clear that one screenshot would be confusing. I think something like this would be extremely helpful and I'll bet it would cut down the number of annoying posts from people like me by quite a bit.
    If you continue with this, where will you put the results for us to see/comment on/laugh at/try out/cry over ?
    Thanks once more.
    -- southsou

  13. podz
    Support Maven
    Posted 5 years ago #

    Evening - It's 18:02 here :)
    I'll host the files as I'm not sure if the wiki can or does. I already have some ftp guides on my site.
    After starting that, I'm trying to figure out a logical sequence in how to complete the task, and my initial thoughts are this;
    - 1 image for #content elements
    - 1 image for #menu elements
    - 1 image for overall layout divs.
    Once I'm clear about how it should go in my head, I'll get the work done. Mind, if this cold I've got would go, I'm sure my ability to think better would improve !

  14. Cena
    Member
    Posted 5 years ago #

    Podz, great job so far.
    I just wonder if it wouldn't be simpler to have a 'hover balloon' over each element that contains the appropriate .css selector. That would be easier than having 2 (or more) windows open and having to flip through them each time. Just a thought.
    Either way, it's already been a great help to me. :)

  15. podz
    Support Maven
    Posted 5 years ago #

    Would a hover balloon need javascript ?
    One reason why I'd not choose that would be if that people are confused, then having to flip between what they may be trying to do and another screen, then positioning the mouse to see the hover info could get annoying ?
    I've not used that technique for text though, so I'd be happy to give it a whirl and see how it turns out ?

  16. podz
    Support Maven
    Posted 5 years ago #

    Tried something else.
    http://www.tamba2.org.uk/css2/
    I know the image falls out of the div if the screen is compressed at all. I may not be spot on with my explanations either - feel free to add to this please!
    That seems better to me, but I'd really like some feedback as to whether you think so.
    Benefits to this are that a content, a menu and a header section would allow for fuller explanations while remaining on the same page, and suggestions for possible alterations maybe ?

  17. podz
    Support Maven
    Posted 5 years ago #

    Sounds good !
    I'll work out how to do one of those then :)

  18. podz
    Support Maven
    Posted 5 years ago #

    I'll work on the validation ....

  19. kcrys
    Member
    Posted 5 years ago #

    I was just going to suggest using an image map *laugh* but I see someone beat me to it. I've done that for seniors I've tutored and they love it.

  20. southsou
    Member
    Posted 5 years ago #

    podz:
    It's looking great. As we southerners say, "Woo hoo!"
    --southsou

  21. podz
    Support Maven
    Posted 5 years ago #

    The tamba2 url's above are now deleted.
    Please see new thread.

  22. podz
    Support Maven
    Posted 5 years ago #

    Oops .. new thread is here:
    http://wordpress.org/support/3/3814
    Ta 2f :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.