New screencasts for Firebug

[fbugissues]

Originally reported on Google Code with ID 4508

The screencasts to Firebug are not completely up-to-date anymore and could also be extended.
(See http://getfirebug.com/screencasts)
So I suggest as soon as Firebug 1.8 ships somebody should create new ones.
My idea is to update the introduction video and add some new videos each describing
the features of one panel more detailed. Maybe we could also have a screencast showing
the general Firebug preferences like changing the shortcuts, managing external editors
etc. (plus hint to the hidden ones) and a "Did you know?" video, in which we show uncommon
and new features like showing the paint events inside the Net panel.
Unfortunately I am not aware of screencasting software and I am also not a native English
speaker, so somebody else would need to do this.

Reported by sebastianzartner@gmx.de on 2011-06-07 09:31:54

[fbugissues]

We missed the train for 1.8 already, so I hope we can get some screencasts for 1.9.
Though it could still be worth describing some of the changes in 1.8, because many
people complained e. g. about not finding the Start Button anymore.

Reported by sebastianzartner@gmx.de on 2011-08-23 11:35:29

• Labels added: blocks-1.9

[fbugissues]

Can we have a list of stuff to put on the screencast? If I can't find someone else to
do it, I can do it myself.

Reported by sroussey on 2011-11-29 16:03:47

[fbugissues]

In yesterday's conf call Honza and I talked about that and we decided, that the most
important videos are a new introduction and a description of the new features of 1.9.
Here's a pretty complete list of stuff worth to mention in the introduction video.
Probably it's even a bit too long, so I guess some parts like the detailed description
of the side panels can be left out.

- What is Firebug? What can you do with it?
- How to access the UI?
- General UI options
  - Activation
    - activate/deactivate, detach, minimize
    - On For All Web Pages
  - Switching between panels
  - Panel options
  - Firebug menu
  - Command Line Popup
  - navigation history
- Short overview over each panel
  - Console panel
    - What is the Console panel for?
    - logging errors/information
      - filtering messages
    - Command Line
      - Auto-completion
      - Command Editor
      - command history
    - Profiling
    - Error breakpoints
  - HTML panel
    - What is the HTML panel for?
    - Inspector
    - Node View
      - hovering highlights node on page
      - inline editing
      - Context menu options
    - Edit Mode
    - Node Path
    - HTML breakpoints
    - Side panels
      - Style side panel
        - What is the Style side panel for?
        - inline editing
          - auto-completion
        - color, image, font preview
        - disabling styles
      - Computed side panel
        - What is the Computed side panel for?
        - styles separated into groups
      - Layout side panel
        - What is the Layout side panel for?
        - hovering shows ruler
        - values editable
      - DOM side panel
        - What is the DOM side panel for?
        - tree view
        - filter display
  - CSS panel
    - What is the CSS panel for?
    - inline editing
      - auto-completion
    - color, image, font preview
    - disabling styles
    - CSS Location Menu
    - Source / Live Edit Mode
  - Script panel
    - What is the Script panel for?
    - debugging options
      - breakpoints / conditional breakpoints
      - play, step into, step over, step out, rerun
    - Stack Frame Path
    - Script Type Menu and Script Location Menu
    - Break On Next
      - other Break On ... buttons available on other panels
    - Side panels
      - Watch side panel
        - What is the Watch side panel for?
        - add watch expressions
      - Stack side panel
        - What is the Stack side panel for?
        - jump between stack frames (function calls)
        - script source link
      - Breakpoints side panel
        - What is the Breakpoints side panel for?
        - grouped by type
        - disable, remove breakpoints
  - DOM panel
    - What is the DOM panel for?
    - tree view
    - filter display
    - Property Path
    - DOM breakpoints
  - Net panel
    - What is the Net panel for?
    - general request information (URL, status, domain, size, IP)
    - timeline (waterfall graph)
    - detailed information when expanding the request
      - individual tabs depending on request
    - cache responses
- Where to get more info?

For the description of the new features added in 1.9 you can have a look at http://getfirebug.com/wiki/index.php/Firebug_Release_Notes.

After these two screencasts the next step would be to create the "Did you know?" tutorial,
because there are many people out there asking for things, that we already have. I'll
think about some features as soon as we have the other two videos.

Sebastian

Reported by sebastianzartner@gmx.de on 2011-11-30 13:30:40

[fbugissues]

How long do we expect the screencast will be?

Also one option could be to make more smaller screencasts
focused on specific topics, like:

0) General introduction
1) HTTP monitoring
2) Firebug for designers (CSS/HTML tweaking)
3) How to use Firebug for logging
4) Debugging scripts
5) etc.

(I could imagine 10-20 min max. for each)

Honza

Reported by odvarko on 2011-11-30 16:41:52

[fbugissues]

The things I listed are basically what Rob mentions in his introduction plus some additional
info. The idea of the introduction video is to get an overview of Firebug's features
in general.
More detailed screencasts describing specific features like you list them should follow.
I agree, that it's better to make them task-based instead of panel-based as I initially
thought, because many tasks are happening in several panels. Though we should not forget
to mention all the different options the user has in each panel.
I imagine, that 20 minutes can be quite long. I'd say 5-10 minutes should be enough
for each video. Maybe we could make the screencasts be based on the different parts
of http://getfirebug.com/whatisfirebug. Which btw. also urgently needs some updates.

Sebastian

Reported by sebastianzartner@gmx.de on 2011-12-01 14:14:23

[fbugissues]

We could embed the videos inside the whatisfirebug pages (in addition to an overview).
Perhaps we should update the content there first before I start making videos. 

Reported by sroussey on 2011-12-01 18:41:36

[fbugissues]

> We could embed the videos inside the whatisfirebug pages (in addition to an overview).
Yes, had the same idea.

> Perhaps we should update the content there first before I start making videos.
When you're able to log into Perch, sure.

Sebastian

Reported by sebastianzartner@gmx.de on 2011-12-01 20:30:59

[fbugissues]

Reported by sebastianzartner@gmx.de on 2011-12-06 13:52:13

• Labels added: Type-Enhancement

[fbugissues]

OK, I went and bought ScreenFlow 3 today so I can start recording stuff!

Reported by sroussey on 2011-12-31 03:13:42

[fbugissues]

1.9 is already out now. So Steven, are there any updates from your side?

Sebastian

Reported by sebastianzartner@gmx.de on 2012-01-09 12:55:43

[fbugissues]

I changed the summary to be more general because new screencasts wouldn't be for 1.9
anymore. I'd love to see this for 1.10 though. Would anybody want to take this over?

Sebastian

Reported by sebastianzartner on 2012-06-30 22:54:14

• Labels added: blocks-1.10
• Labels removed: blocks-1.9

[fbugissues]

Reported by sebastianzartner on 2012-08-19 22:16:19

• Labels added: blocks-1.11
• Labels removed: blocks-1.10

[fbugissues]

In https://groups.google.com/forum/#!topic/firebug-working-group/EY2WhziH2dA we decided
that this issue is not a blocker.

Sebastian

Reported by sebastianzartner on 2013-02-13 08:26:37

• Labels removed: blocks-1.11

[fbugissues]

Reported by sebastianzartner on 2013-02-18 06:20:30

• Labels added: priority-high

[fbugissues]

Reported by sebastianzartner on 2014-04-02 06:25:34

• Labels added: docs
• Labels removed: doc