This is a blog centering on Dr. Petrosino's course at The University of Texas at Austin entitled " EDC 365E Project Based Instruction in STEM Education." This is the capstone course in the UTeach Natural Sciences professional development sequence. It also serves as a forum for Dr. Petrosino's thoughts and ideas on Project Based Instruction and educational reform.

Tuesday, November 8, 2011

Class 18: 10/27/11-Legacy Cycle Website Guide

Today Mr. David Kim from the Learning Technology Center came and showed us the technical side of the Legacy Cycle - the Legacy Cycle website. I've created a guide that goes over most of the features on the site. If you have any additional questions, email Mr. Kim here.

Creating an Account1. Go to the Legacy Cycle website here and click "Login" at the top right of the page. Then, click the "Registration" link at the right.

2. Enter your semester, year and the title of your website under "Project Website Info". You can change the title of your project after you create it later (How do I change the title of my Legacy Cycle website?).Under the "Member Login Information" section, enter your desired User ID and your desired password twice.Then, enter your name and email under the "Personal Information" section and a short description under "Self-Description". Press the "Submit for Registration" button.

3. Your account should be created. You can now login and start editing pages.

Getting Started1. Login to the Legacy Cycle website at http://www.edb.utexas.edu/visionawards/petrosino/ by clicking "Login" at the top right of the page.

2. Enter your user ID and password.

3. Click "My Site" at the top right of the page. You should see your Legacy Cycle website.

4. To edit a page, navigate to that page and click the "[Edit]" link on that page. There are three challenges, and each challenge has six phases that are listed on the left side of the page.

Insert row: Insert a row below the currently selected rowInsert column: Insert a column to the right of the currently selected columnDelete row: Delete the currently selected rowDelete column: Delete the currently selected column

Merge right: Merge a cell to the right so that it spans more columnsMerge down: Merge a cell down so that it spans more rowsSplit cell horizontally: Split a cell so that one more cell appears in the row for that columnSplit cell vertically: Split a cell so that one more cell appears in that column for that row

In the editor, you can change how your font looks by using the top row of buttons. You can highlight text you have already entered and click on the buttons to toggle on or off. Or, you can click a button before you type for text of that style. There are options for bold, italics, underline, strikethrough, superscript and subscript. You can also change the foreground and background color of the text.

To reset your style options, click the "Style" dropdown box on the second row of the editor and select "Normal".

To insert a hyperlink to a different web page, first type in the text that you want to be clicked. Then, highlight that text and press the "Hyperlink" button, the fifth button from the left on the top row of the editor. You can also make an image a link by selecting an image instead. A new window will pop up with a few options.

The "Type" dropdown box has two choices: "Link" and "Anchor". When a link is clicked, you will be taken to a different page. Use these to link to external websites or other pages on your Legacy Cycle website. An anchor is used to scroll the page to a certain spot, like the table of contents on this blog post. Using anchors is a two-step process. the first step is to mark the place you want to jump to, and the second spot is to create a link that jumps to that spot.

For the "Link" type of hyperlink:1. Put the URL of the web page you want to link to in the "URL" field. Your URL should begin with "http://".2. Choose how you want that link to open when somebody clicks on it: "same frame (_self)" will open the new web page in the same window as your Legacy Cycle website, and "new empty window (_blank)" will open the new web page in a new window. The other two options, "top frame (_top)" and "parent frame (_parent)", generally are not used.3. Enter a title in the "Title" field. The title of the link will show up when you hover over the link, and can provide additional context for the link. Some screen readers, for example, will read the title text aloud.

For the "Anchor" type of hyperlink:1. Put the name of the anchor in the "Name" field. You will refer to this anchor later with this name.2. Enter a title in the "Title" field. See the description above.3. Press OK to insert the anchor.4. Select the text that will jump to the anchor when clicked.5. Press the "Hyperlink" button again. This time the "Type" dropdown box will have a third choice: "Link to anchor". Select this choice.6. The "Anchors" dropdown box will list all the anchors present on your page. Select the one you want this link to jump to.7. Choose a target. See the description above.8. Enter a title. See the description above.

To edit an existing hyperlink, select the hyperlink you want to edit and press the "Hyperlink" button. To remove a hyperlink, select the text that you previously hyperlinked and press the "Remove hyperlink" button next to the "Hyperlink" button.

How do I add images?1. Click the "Quick insert image" button, the seventh button from the left on the top row of buttons. A new window will pop up with the file manager (you may need to resize the window to see the whole thing).2. Choose a picture to upload to the site by clicking "Browse..." and selecting the picture on your computer. Then, click the "Upload" button. The image should appear on the left pane.3. Select the image in the file manager by clicking it. On the right pane, you can see a preview and some details of the image, like file size and image dimensions.4. Press OK. The image should appear in your editor window. You can select it and drag it around to place it where you want it.

To edit an image:Select the image you want to edit. Eight squares should show up around the image, indicating that it is selected (you can resize the image by dragging the squares). Click the "Insert/Edit Image" button, the eighth button from the left on the top row of buttons. A new window will pop up with the image editor (you may need to resize the window to see the whole thing).

The "Source" field shows which image is being used. You should generally leave this field alone.The text entered in the "Alternative text" field will be shown as a placeholder while the image is loading or if the image does not load.Enter a title in the "Title" field. The title of the image will show up when you hover over the image, and can provide additional context for the image. Some screen readers, for example, will read the title text aloud.You can resize the image with the "Width" and "Height" fields. The units are in pixels. Leave the "constrain proportions" checkbox checked if you want the width and height to scale together - editing width or height will automatically scale the other dimension. You can reset the image dimensions by clicking the "Reset dimensions" link on the left, under the preview.The "Align" dropdown box allows you to change where the image shows up on the page. You can make the image left-aligned ("left"), right-aligned ("right") or centered ("middle") on the page. The other options are generally not used except for in tables.The "Border" field specifies the width, in pixels, of the image border. The border is black."Hor. space" and "Vert. space" add spacing around the image, to separate it from surrounding text.

Note: It is generally better to upload your videos to a video hosting site like YouTube or Vimeo, rather than uploading it directly to your Legacy Cycle website.

1. Click the media button (the tenth button from the left on the top row). A new window will pop up. Click the "..." button next to the "Source" field to open the file manager.2. In the file manager window, click "Browse..." to choose a movie file from your computer to upload. Files ending with ".mov" work best.3. After the movie file is uploaded, choose that file by selecting it and pressing "OK" in the file manager window.4. (Optional) Enter a width and height for the movie.5. Leave the rest of the form empty and press "OK" to insert your video. A computer icon will show up as the placeholder for your video. You can drag this around like an image.

1. Find the embed code for your video. Most video hosting sites will provide an embed code for you.On YouTube, it can be found by clicking the "Share" button under the video, then clicking the "Embed" button under the link. A text box will appear with some HTML and some checkboxes underneath.On Vimeo, it can be found by hovering over the video and clicking the "Embed" button on the right. A text box will appear with some HTML and a link to reveal more options underneath.2. Choose your desired options and copy all of the text in the text box.3. Open the editor for the page you want to insert the video. Click the "HTML" tab on the bottom right of the window. You should see a bunch of HTML.4. Find where in the page you want to insert your video and paste the embed code. Your video should appear on your page now.

1. Click the "Flash" button, the ninth button from the left on the top row of buttons. A new window will pop up.2. Click the "..." button next to the "Source" field. The file manager window will open.3. In the file manager window, click "Browse..." to choose a flash file from your computer to upload. Flash files usually end in ".swf".4. After the flash file is uploaded, choose that file by selecting it and pressing "OK" in the file manager window.5. (Optional) Enter a width and height for the flash game or video.6. Press "OK" to insert your flash game or video. A placeholder icon will show up in the editor. You can drag this around to place it where you want it on the page.

1. To create a table, press the first button from the left on the second row of buttons. This will open a table creation window.2. Enter the number of rows and columns you want your table to have. You can change these later if you need to.3. Leave the CSS class dropdown box set to Normal.4. (Optional) Set the width and height of the table in the next section. You can have the table take up a percentage of the screen space horizontally by entering a percentage and having the "%" selected, or you can have the table take up a fixed amount of space by entering a pixel amount and choosing "px" in the dropdown.5. (Optional) Enter a border width for the table. Usually you want this to be 1 pixel, but you can set this wider if you want the outside to be bolder.6. (Optional) Cell padding is the space surrounding the content in each cell of the table. Cell spacing is the space between each cell of the table.7. (Optional) Choose a background color by clicking the "..." button and using the color picker.8. (Optional) Choose a background image that will be tiled in the background of the table.

To edit an existing table, select it and click the second button from the left on the second row of buttons.

After you login to the website, click "My Profile" at the top right of the page. If you are already editing your website, click "Home" and then "My Profile" on the top right of the page. You can change the website title here, under "Project Website Information".

Each day in PBI a different student takes responsibility for blogging about what goes on in class. Today’s blog is brought to you by Fred­­­.

About Me

Dr. Petrosino is a graduate of Columbia University's Teachers College (MA, 1990) and received his PhD from Vanderbilt University (1998). He completed a post-doc at the University of Wisconsin where he was a member of the National Center for Improving Student Learning and Achievement in Mathematics and Science (NCISLA). In 1999 he accepted a Professorship at the University of Texas and received tenure in 2004. He holds the Elizabeth G. Gibb Endowed Fellowship in Mathematics Education. Dr. Petrosino has published over 20 peer reviewed journal articles, made over 100 national and international conference presentations and has supervised a dozen doctoral dissertations. He has received over 30 million dollars in grants from the National Science Foundation, the Department of Education and the McDonnel Foundation for Cognitive Studies. He is a founding professor of the nationally recognized UTeach Natural Sciences preservice teacher education program. From July 2007 to August 2009 he served as the Assistant to the Superintendent in the Hoboken School District.