User:Billw58/Templates and Spans

From Audacity Development Manual
< User:Billw58
Revision as of 23:36, 19 April 2012 by Billw58 (talk | contribs) (→‎Shift-modified clicks and arrow key presses: comments)
Jump to: navigation, search
  • Bill: Summary as of 10Apr12
    • I think we have consensus to change the advice div and template to pale orange (#FFEECC - same as current editornote), and change the editornote div to pale mauve (#EEDDFF - last example in that section).
    • I'm OK with #FFEEAA for the menu span and template (#2 in the examples below) so I think we have consensus there as well.
      • On April 12 or 13 I'll change the css for these if there are no objections here or on the -manual thread.
    • On April 12 or 13 I'll trim the key and button template examples down to those that have received positive votes and we can have another round of voting on those.
    • Worst case - if people don't like them I can just revert the css.
    • I think it will be useful to see them in use throughout the manual and continue to tweak as needed.
  • Bill 12Apr12: Trimmed page for easier comparison of outstanding choices: key, button, keyboard and path spans
  • Bill 13Apr12: Templates and CSS classes now created for button, keyboard and path. We can now try those out "in the wild".
    As we continue to refine our choices here I can edit the CSS to reflect those changes throughout the manual.
    I have not changed the "key" (shortcut) CSS since that one is widely used throughout the manual and I think we need more consensus here before we change it.
  • Bill 17Apr12: Today changed the CSS for the key span and template per editornote below those examples.
    New deadline of April 20 for the various button templates and the keyboard template.
    BTW, I am putting off editing the Consistency page, and changing the CSS in the wiki to match the manual, until all changes are accepted. So for a week or two they may be out of sync.

Alternative "Menu" span/template colours:

(keeping this here for reference)

  1. Click on Effect >Amplify #FFFFCC previous colour
  2. Click on Effect >Amplify #FFEEAA Steve +0.5; Gale +1 - current colour, Peter +1
  3. Click on Effect >Amplify #FFEECC Bill +1
  4. Click on Effect >Amplify #FFDDAA Steve +1
  • Bill: I think 2, 3 and 4 look OK.
  • Steve: Changed my vote to 2 as a good compromise.
  • Gale: Changed my vote to 2 as a good compromise between 3 and 4.
  • Ed 12Apr12: one thing to keep in mind for spans which could be a hypertext link is that the link color (generally a modestly dark blue) must contrast well with the span color--the lighter the saturation of the span color the more likely the link will be obvious; there is probably some color wheel rule for picking contrasting colors. My vote--lighter is better.
  • Bill 12Apr12: To my eyes (and others I've asked), the old yellow menu highlight almost disappears when it is behind bold blue link text. I think this is some kind of colour trick the eye/brain system does. So, yes, there is probably some colour-wheel rule that would at least say which colour is "bad" to have behind the blue text. As for "lighter is better" - there is a middle ground between "too light to easily see" and "so dark it is distracting".

The "Key" span

Press CTRL + A - the current key template

  1. Press CTRL + A. Gale +1; Steve +1; Bill -0.5, Peter +1
  2. Press CTRL + A. Gale -1, Peter -1
  3. Press CTRL + A. Steve +1; Bill +0.5; Gale -1, Peter -1
  4. Press CTRL + A. Gale +1
  5. Press CTRL + A. Bill +1 (changing my vote)
  6. Press CTRL + A. Or Gale +1 for this key span also
  • Gale: Having looked at the green key spans, I think the darker ones are too far from other colours we use in the Manual, and the "intro div" colour is too light for the small surface area of a span. I think any not too prominent colour with a light blue/green hue (more blue than green) would work for me.
    I think the button span benefits from a border but most of the buttons are too prominent in strength of border and background colour. I voted for a couple of them.
    • Bill 10Apr12: +1 for "more blue than green" in the key spans
      I've added a selection of button spans (above) and transferred votes to them. There's now a selection of lighter fill colours.
  • Bill 14Apr12: Peter? Ed? Any comments? If there's no other votes or changes before April 17 then #1 it is.

The "Button" span

  • Bill 13Apr12: The "button" class and template have been created. You can try them out "in the wild" as you see fit.
    Syntax is:
<span class="button">Export</span>

or 

{{button|Export}}

Both produce: Export

  1. click the Select All button.
  2. click the Select All button.
  3. click the Select All button.
  4. click the Select All button.
  5. click the Select All button.
  6. click the Select All button.
  7. click the Select All button.
  8. click the Select All button.
  9. click the Select All button.Gale +0.5
  10. click the Select All button.Gale +1, Peter +1
  11. click the Select All button. Ed +1; Bill +1; Gale +0.5

Radio, Checkbox and Dropdown Menu templates

  • Gale 14Apr12: I like these but feel the border is a little too strong.
  • Bill 14Apr12: These are all based on the button class. See MediaWiki:Common.css for the current definition.
    I think all the "buttons" should have a consistent background and border. Added a "plain" button to the list below for comparison.
    At this point I think it makes sense to edit the CSS to see how all the buttons look.
  • Bill 14Apr12: Edited button class in the CSS to make #9 in the above list.
  • Bill 17Apr12: Is it possible to reach consensus on the look of the various buttons by April 20?
  • Gale 19Apr12: In the buttons above I can see the sense of the lighter background so I have moved by votes to the lower three. I prefer #10 but don't really care. I assume the same colours will be used for the templates below yet to be created.

    -1 on the alternative re-write of point 4 as posted because VI users possibly may not "hear" the unchecked state of the box even if you add it in image hover text (which you should). However I think you could do something similar and just say "Unchecked" or "Checked" to right of the template.

Export

selected radio button Ask User

RadioNotSelected.png Do not copy any audio

CheckboxChecked.png Ergonomic order of transport toolbar buttons

CheckboxNotChecked.png Show 'How to Get Help' dialog box at program startup

Export Format  MenuDownArrow.png

The template is e.g. {{RadioSelected|Ask User}} This is the only template I have created so far. All the rest are faked with spans and in-line images.

Example: (from Splitting a recording into separate tracks)

  1. Click on File > Export Multiple....
  2. Choose the Export Format  MenuDownArrow.png from the pop-up menu:
    • for CD burning choose 16-bit AIFF if you're using a Mac, or 16-bit WAV if using Windows or Linux
    • for loading into an MP3 player, choose MP3
    • for loading into iTunes/iPod you can export as WAV and use iTunes to convert the WAVs to AAC or MP3.
  3. Click the Choose... button and pick the place where your exported tracks will be saved.
  4. Under Split Files Based On:
    • CheckboxChecked.png Labels should be checked
    • CheckboxNotChecked.png Include audio before first label should be unchecked, as there is no audio before the first label
    • Under Name Files, CheckboxChecked.png Using Label/Track Name should be checked.
  5. Click the Export button.
  6. Metadata Editor will appear for the first song. The Track Title and Track Number will be pre-filled from the labels, but you can enter any additional information for that song that you wish (for example, Artist Name and Album Title).
  7. Click the OK button in the Metatdata Editor (not the "Save" button).
  8. Metadata Editor will appear for the next and the subsequent songs; as before, enter any additional information and click "OK" for each window. When you click "OK" on the window for the last song, all the files will export.

I can't decide if this is overkill or not. It seem to open up the possibility of re-writing point 4 above as:

4. Make the following selections:

  • Under Split Files Based On:
    • CheckboxChecked.png Labels
    • CheckboxNotChecked.png Include audio before first label
  • Under Name Files:
    • CheckboxChecked.png Using Label/Track Name

Non-shortcut keys - the "Keyboard" span

  • Bill 13Apr12: The "keyboard" class and template have been created. You can try them out "in the wild" as you see fit.
    Syntax is:
<span class="keyboard">return</span>

or 

{{keyboard|return}}

Both produce: Template:Keyboard

Bill08Apr12: I don't like the idea of using the button template for both on-screen button and for keyboard keys. So here's an alternative.

  • Tag Name: The first seven Tag names are permanent and cannot be edited. You can add more Tag rows and give them a customised name and value using the "Add" button (see below). Note: "Album Title", "Track Number", "Genre" and customised tags are not supported for WAV and will not be exported or imported.
  • Tag Value: Type in the data you want for each Tag, or accept the data already present from an imported file. You don't have to fill in every value. When exporting multiple files, the "Track Title" and "Track Number" tags are pre-filled automatically from the names and ordering of the tracks or labels.

    Single-clicking on a value field (or navigating into it with the keyboard arrow keys) selects that field - typing will replace the contents. Tab can be used too, and also permits navigation into the buttons below the Tag and Value fields.

  • Double-clicking a field (or selecting it, then using keyboard F2) highlights the text in the field. This allows the text to be edited rather than merely replaced, and permits cut, copy or paste using standard system shortcuts or a right-click context menu. Use keyboard Home, End or arrow keys to navigate to individual characters. Once a value field has been replaced or edited, press the Return key to select the next value field, or click in any other one to select it.

Here's how they look inside a note

Double-clicking a field (or selecting it, then using keyboard F2) highlights the text in the field. This allows the text to be edited rather than merely replaced, and permits cut, copy or paste using standard system shortcuts or a right-click context menu. Use keyboard Home, End or arrow keys to navigate to individual characters. Once a value field has been replaced or edited, press the Return key to select the next value field, or click in any other one to select it.

Here's how they look inside a note when they have a white background

Double-clicking a field (or selecting it, then using keyboard F2) highlights the text in the field. This allows the text to be edited rather than merely replaced, and permits cut, copy or paste using standard system shortcuts or a right-click context menu. Use keyboard Home, End or arrow keys to navigate to individual characters. Once a value field has been replaced or edited, press the Return key to select the next value field, or click in any other one to select it.
  • Gale: +1 for white background as this improves presentation inside a note.+1 for bold text inside the button as in "Return". Did you try white text on black? I guess it would look bad, but so many keyboards are white on black now.
  • Bill 12Apr12: -1 for bold text - I think there's enough emphasis with the border.
    • Gale 12Apr12: I'll drop to +0.5 for bold text, but I really don't think the current keyboard span is strong enough when amongst normal text without background. You could make a slightly darker border or slightly darker text with styling.
  • Steve: +1 for white background.
  • Ed 13Apr12: I would like to see white on black. I prefer the bold text. Hmmm, white on black works and sets it off from a button. Overall, I prefer the bold non-italic white on black.
  • Bill 13Apr12: I'm not convinced of the white on black. It may be too distracting. I could live with bold text in the white box.
  • Gale 14Apr12: I tried some lighter greyish backgrounds and used #4 "Progressively darker borders, bold text" in the "white on black keyboard span in context". Although a little distracting, the meaning is very considerably clearer to me. I do not have to read the text to know what those "buttons" are supposed to be.
  • Bill 14Apr12: I'm still -0.5 for the white on black, although the dark grey is a minor improvement. Since Ed and Gale prefer white on black I'm prepared to go with it unless Steve weighs in heavily against it.
  • Bill 17Apr 12: If there are no further comments before April 20 I will change the CSS for the keyboard template to Gale's latest version (bold white on dark grey).

Progressively darker borders

  1. Use keyboard Home, End or arrow keys to navigate to individual characters.
  2. Use keyboard Home, End or arrow keys to navigate to individual characters.
  3. Use keyboard Home, End or arrow keys to navigate to individual characters.
  1. Use keyboard Home, End or arrow keys to navigate to individual characters. (no border)
  2. Use keyboard Home, End or arrow keys to navigate to individual characters. (no border, not italic)

Progressively darker borders, bold text

  1. Use keyboard Home, End or arrow keys to navigate to individual characters.
  2. Use keyboard Home, End or arrow keys to navigate to individual characters. Gale +0.75
  3. Use keyboard Home, End or arrow keys to navigate to individual characters.
  4. Use keyboard Home, End or arrow keys to navigate to individual characters. (no border)
  5. Use keyboard Home, End or arrow keys to navigate to individual characters. (no border, not italic) Gale +0.75
  6. Use keyboard Home, End or arrow keys to navigate to individual characters. (no border, not italic) Peter +1
  7. Use keyboard Home, End or arrow keys to navigate to individual characters. (no border, not italic) Gale +1; Ed +1

The white on black keyboard span in context

  • Tag Value: Type in the data you want for each Tag, or accept the data already present from an imported file. You don't have to fill in every value. When exporting multiple files, the "Track Title" and "Track Number" tags are pre-filled automatically from the names and ordering of the tracks or labels.

    Single-clicking on a value field (or navigating into it with the keyboard arrow keys) selects that field - typing will replace the contents. Tab can be used too, and also permits navigation into the buttons below the Tag and Value fields.

  • Double-clicking a field (or selecting it, then using keyboard F2) highlights the text in the field. This allows the text to be edited rather than merely replaced, and permits cut, copy or paste using standard system shortcuts or a right-click context menu. Use keyboard Home, End or arrow keys to navigate to individual characters. Once a value field has been replaced or edited, press the Return key to select the next value field, or click in any other one to select it.

A "Path" span

  • Bill 13Apr12: The "path" class and template have been created. You can try them out "in the wild" as you see fit.
    Syntax is:
<span class="path"><yourhome>/Library/Application Support/audacity</span>

or 

{{path|<yourhome>/Library/Application Support/audacity}}

Both produce: <yourhome>/Library/Application Support/audacity

  • Ed 18Apr12: There is a disparity in perceived font size when we use the monospace default. Just to see the difference, I added "big" to the green sample Gale (and I) prefer below--IMVHO it is better though maybe a tiny bit too much.


The wiki has a "path" template. Do we want one? How about ...

  1. The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity
  2. The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity
  3. The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity
  4. The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity
  5. The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity
  6. The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity Gale +1
  7. The audacity.cfg file can be found in gTTheCFg <yourhome>/Library/Application Support/audacity ...testing font-size:1.1em
  8. The audacity.cfg file can be found in gTTheCFg <yourhome>/Library/Application Support/audacity ...testing font-size:1.15em
  9. The audacity.cfg file can be found in gTTheCFg <yourhome>/Library/Application Support/audacity ...testing font-size:1.2em
  10. The audacity.cfg file can be found in gTTheCFg <yourhome>/Library/Application Support/audacity ...testing font-size:1.3em Ed +1
  11. The audacity.cfg file can be found in gTTheCFg <yourhome>/Library/Application Support/audacity ...testing font-size:1.5em
  12. The audacity.cfg file can be found in gTTheCFg <yourhome>/Library/Application Support/audacity ...testing font-size:1.55em this gives vertical parity
  13. The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity no span for comparing mono with plain
  14. The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity
  15. The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity
  16. The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity
  17. The audacity.cfg file can be found in <yourhome>/Library/Application Support/audacity


  • Gale 12Apr12: -1 for red text which looks like a broken link. +1 for the idea of having a template. Some kind of purple?
  • Bill 12Apr12: agreed -1 for red. Added some greens. I'm not serious about that last one! I couldn't resist trying a little retro "glowing green text on a black screen" :-)
  • Gale 14Apr12: I'm OK as is, or the green one I voted for. I marginally prefer the green to what we have now. I think there is only a marginal improvement over black in either case.
  • Bill 14Apr12: Agreed, I think it's the monospace font that really sets it off. I'm OK with 4, 5 or 6.
  • Gale 19Apr12: Don't like the "big" font much. Another reason against purple is that it is very close to the "visited" colour for URL's that some browsers use.
    • Ed 19Apr12: At zero magnification on my 1920x1080 27" monitor I cannot read the "default mono" font--can barely tell it is text; look at the following line of "normal" text--the default mono is much smaller than the surrounding text would be. Added some better sizing the "TheCFg " leader is just to measure ascenders & descenders.
  • Gale 19Apr12: Another decision; if we are dropping ~ for the Linux/Mac user's home directory, can we say "Your Home" and not "yourhome"?
  • Peter 19Apr12: -1 for red text, black text and the horrid green-on-black, otherwise agnostic

</p>

Alternative presentations of shortcut keys

File commands - as now

Action Key Description
New CTRL + N Creates a new and empty project window to start working on new or imported Tracks.
Open... CTRL + O Presents you with a standard dialog box where you can select either audio files, a list of files (.LOF) or an Audacity Project file to open.
Close CTRL + W Closes the current project window, prompting you to save your work if you haven't saved.
Save Project CTRL + S Saves the current Audacity project .AUP file.
Import > Audio... SHIFT + CTRL + I Similar to 'Open', except that the file is added as a new track to your existing project.
Exit CTRL + Q Closes all project windows and exits Audacity. If there are any unsaved changes to your project, Audacity will ask if you want to save them.
Menu items assignable in Keyboard Preferences: Save Project As; Save Compressed Copy of Project...; Check Dependencies; Open Metadata Editor; Import Labels; Import MIDI; Import Raw Data; Export; Export Selection; Export Labels; Export Multiple; Apply Chain; Edit Chains; Page Setup; Print.

File commands - lower case with spaces

Action Key Description
New Ctrl + N Creates a new and empty project window to start working on new or imported Tracks.
Open... Ctrl + O Presents you with a standard dialog box where you can select either audio files, a list of files (.LOF) or an Audacity Project file to open.
Close Ctrl + W Closes the current project window, prompting you to save your work if you haven't saved.
Save Project Ctrl + S Saves the current Audacity project .AUP file.
Import > Audio... Shift + Ctrl + I Similar to 'Open', except that the file is added as a new track to your existing project.
Exit Ctrl + Q Closes all project windows and exits Audacity. If there are any unsaved changes to your project, Audacity will ask if you want to save them.
Menu items assignable in Keyboard Preferences: Save Project As; Save Compressed Copy of Project...; Check Dependencies; Open Metadata Editor; Import Labels; Import MIDI; Import Raw Data; Export; Export Selection; Export Labels; Export Multiple; Apply Chain; Edit Chains; Page Setup; Print.

File commands - lower case with no spaces

Action Key Description
New Ctrl+N Creates a new and empty project window to start working on new or imported Tracks.
Open... Ctrl+O Presents you with a standard dialog box where you can select either audio files, a list of files (.LOF) or an Audacity Project file to open.
Close Ctrl+W Closes the current project window, prompting you to save your work if you haven't saved.
Save Project Ctrl+S Saves the current Audacity project .AUP file.
Import > Audio... Shift+Ctrl+I Similar to 'Open', except that the file is added as a new track to your existing project.
Exit Ctrl+Q Closes all project windows and exits Audacity. If there are any unsaved changes to your project, Audacity will ask if you want to save them.
Menu items assignable in Keyboard Preferences: Save Project As; Save Compressed Copy of Project...; Check Dependencies; Open Metadata Editor; Import Labels; Import MIDI; Import Raw Data; Export; Export Selection; Export Labels; Export Multiple; Apply Chain; Edit Chains; Page Setup; Print.

In Context - as now

There are also menu commands and keyboard shortcuts for zooming. View > Zoom In (or CTRL + 1) is the same as clicking the Zoom In button. View > Zoom Out (or CTRL + 3) is the same as clicking the Zoom Out button. View > Fit in Window (or CTRL + F) will zoom the waveform so it fits in the window.

In Context - lower case with spaces

There are also menu commands and keyboard shortcuts for zooming. View > Zoom In (or Ctrl + 1) is the same as clicking the Zoom In button. View > Zoom Out (or Ctrl + 3) is the same as clicking the Zoom Out button. View > Fit in Window (or Ctrl + F) will zoom the waveform so it fits in the window.

In Context - lower case with no spaces

There are also menu commands and keyboard shortcuts for zooming. View > Zoom In (or Ctrl+1) is the same as clicking the Zoom In button. View > Zoom Out (or Ctrl+3) is the same as clicking the Zoom Out button. View > Fit in Window (or Ctrl+F) will zoom the waveform so it fits in the window.

  • Bill 19Apr12: I don't have a strong preference between all caps and initial caps. However I have a strong -1 for no spaces around the "+" characters. Despite this being how the shortcuts are presented in the Keyboard Preferences I think it is jarring and hard to read.
  • Peter 19Apr12: I have a strong preferenbce for initla caps. with following lower-case. This is how Audacity shows on Windows Xp and 7 and this is how it appears on PC keyboards. It is also more readable than all caps. I am somewhat agnostic about whether we have spaces around the plus sign - but note that Audacity in the menus, and in Preferences>Keyboard, displays with no spaces - so maybe that should weigh in the balance. If pushed, I suppose I have a mild preference for no spaces because that echoes the Audacity program presentation.

Shift-modified clicks and arrow key presses

Why do we highlight the Shift key as a shortcut? Is it just to highlight it since before we have no consistent way of doing so?

What makes more sense here:

1. It's possible to change the selected time range and which tracks are selected independently. To change the selected time range, you have several options:

  • Move the mouse pointer to one of the edges of the selection until it changes to the "finger with pointing hand". Click and drag to change that edge of the selection.
  • Hold Shift while clicking near one of the edges of the selection to extend or contract the selection to the time point you clicked on.
  • Hold Shift while using Template:Keyboard or Template:Keyboard to extend the selection from the left or right edge respectively.
  • Hold Ctrl + Shift while using Template:Keyboard or Template:Keyboard to contract the selection from the right or left edge respectively.

2. It's possible to change the selected time range and which tracks are selected independently. To change the selected time range, you have several options:

3. It's possible to change the selected time range and which tracks are selected independently. To change the selected time range, you have several options:

  • Move the mouse pointer to one of the edges of the selection until it changes to the "finger with pointing hand". Click and drag to change that edge of the selection.
  • Hold Shift while clicking near one of the edges of the selection to extend or contract the selection to the time point you clicked on.
  • Press Shift + Left or Shift + Right to extend the selection from the left or right edge respectively.
  • Press Ctrl + Shift + Left or Ctrl + Shift + Right to contract the selection from the right or left edge respectively.
  • Bill 19Apr12: I have not strong preference for any of these, although I feel 2 and 3 are more "consistent".
  • Ed 19Apr12: my pref would be to consolidate both "key" and "keyboard" using only "keyboard" maybe conjoining any combo; use the white-on-black, no italics, bold OK but no pref here. Now that I look more closely, I think my problem with the leading/trailing space around the + is due to the kerning of italicized text--if it is not italicized I have much less problem with the space.
  • Bill 19Apr12: Thanks, Ed, for the further examples.
    I'm -1 on using the same span for shortcuts and non-shortcut key presses.
    I'm also -1 on "conjoining" key presses when they are not a shortcut. My thought was that the span simulates a key on the keyboard, and there is no key labelled "Shift+Ctrl+A". While there is no key labelled "← Left Arrow" we probably can't use the ← on its own since it won't be read properly by screen readers. We do what we can.
    I prefer "Hold Template:Keyboard while pressing Template:Keyboard" over "Press Shift + Left Arrow" since it emphasizes that the user can hold the Shift key while repeatedly pressing the arrow key.
Retrieved from "http://alphamanual.audacityteam.org/m/index.php?title=User:Billw58/Templates_and_Spans&oldid=16804"