[Skip Navigation] [CSUSB] / [CNS] / [CSE] / [R J Botting] /[CS320 Course Materials] [Text Version] lab/05.html Fri Apr 15 10:01:40 PDT 2011
Labs: [01] [02] [03] [04] [05] [06] [07] [08] [09] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20]

Contents

    CSci320/lab/05 -- UML and WWW Graphics

      Goal

      1. Learn how to draw UML graphics and put them on the Web.
      2. Start a web page documenting some UML models.

      Deliverables

      1. By the end of the laboratory session I expect to see a new item on the list of labs on your web site.
      2. The new link should point to a new page that has some graphic images on it.
      3. There must be at least two UML diagrams on the new page.

      Process

      1. Start "Dia" by
          • Opening a terminal window and inputting "dia&" and tapping return.
          • OR:
          • searching the menus for the "dia" graphics program.

        1. In the middle of the "toolbox" window that opens there is a pull down menu. Pull down to UML.

        2. Expand the toolbox by dragging a corner to show the complete set of UML tools.

        3. Under the File menu in the toolbox, select "New diagram".


      2. Draw a UML diagram:
        1. Select a tool in the tool box.
        2. Click in the diagram roughly were the symbol should be.
        3. If a Warning about fonts happens -- close the Warning window.
        4. Double click the image on the window to fine-tune the details of the icon: contents, form, options etc in a tabbed dialogue box...
        5. Right-click the diagram -> Edit to cut/copy/delete/paste images
        6. Repeat...

      3. Save your "Dia" diagram: right click in the diagram and select File->Save as.
      4. Note: you can print a Dia diagram by right clicking->File->Page Set up and setting "Fit to 1 by 1" and "OK". Then Right-click -> Print.
      5. Right-click the diagram -> View to simplify the appearance: no grid, no connection points, ...

      6. Generating a Graphic image for the web: PNG, GIF, JPG,...
        • If you have the newer Dia (after Dia .94 pre-release 4) you use the file menu to generate PNGs and GIFs.
        • OR:
          1. Start GIMP to convert your Dia diagram into a GIF:
            1. Type this command: "gimp&" into a terminal window.
            2. Read a tip and then click "Close"

          2. Use Gimp to make a GIF of your UML diagram.
            1. In the GIMP toolbox, select File->Acquire->Screen shot...
            2. Select Single Window and uncheck "With Decorations"
            3. Select a 2 or 3 seconds delay.
            4. Select OK and get the window you want on top!
            5. When the cursor becomes a plus sign, click in the window you want to snapshot.
            6. In the GIMP tool box select the "Exacto" knife (Crop or Resize)...
            7. In the GIMP image drag accross the part of the image you want.
            8. Click the "Crop" button.
            9. Right-click -> File -> Save as...
            10. Select By Extension and imput a name like this "uml1.gif". The ".gif" is important! OK!
            11. In the following dialoguaes select "Export" and "OK".
            12. You have now got an Graphic Interchange Format version of your UML diagram.


      7. Publish the GIF by copying it into your public directory.
      8. Draw another UML diagram in "Dia".
      9. Use Gimp to make a GIF of your second UML diagram. Call it "uml2.gif".
      10. Publish the second GIF.
      11. Create a web page (lab05.html is a good name) about the UML that has a good header and image tags pointing to your new GIFs in the body:
        • Examples 
           		<img src="uml2.gif" alt="describe content1">
           		<img src="uml2.gif" alt="describe content2">
        • Syntax
        • image_tag::= "<" "img" "src=" URL_in_quotes "alt=" string_in_quotes ">"
      12. Use your browser to visit [ Raster ] to see what is there -- can you find the UML model of Pascal? Add a link to your UML page to this model.

      13. Publish your uml page and make sure it looks good.
      14. Print a copy of your page.
      15. Add to your list of laboratories on your own "index.html" a new item 
         		  <li>
         		<a href="the URL of your new page">Samples of UML</a>
      16. Copy the index.html to your public space.
      17. Reload it and view it on the web.... and check the link.
      18. Call me over to earn credit.

      . . . . . . . . . ( end of section Process) <<Contents | End>>

    . . . . . . . . . ( end of section CSci320/lab/05 -- UML and WWW Graphics) <<Contents | End>>

    Check the next class

    [ ../06.html ]

End