PORTFOLIOS Portfolios must be able to provide structure for developing and understanding criteria for good efforts, and in applying the criteria to their own and other students' work. Portfolios serve as a vehicle for enhancing student awareness of these strategies for thinking about and producing work--both inside and beyond the classroom. Students need to have an adequate command of Photoshop, Dreamweaver, Expression Web, and Flash.  They should also follow good web design skills, including proper planning and research, and well as proper folder/file structure developed in class. Flash Intro -- Your Web Mastering Portfolio should have a Flash Intro. Create a .fla file or use one found on the web. Save the fie as index.fla to the top level of your folder structure. You will create an index.html file for this file. You have endless possibilities for this file. Use the remaining class time to make the most impressive file you can. This portion of the project will be counted as a major test grade for the sixth six weeks as well as 25% of the final exam. Your grade will be based on the following:

---

Flash Intro

TEMPLATES -- If you choose to use a template rather than create a flash intro on your own, the files should originally be saved to an intro folder. You need to save the .zip file, then extract. Once you have the .fla open, it should be saved to the top level of your folder. the index.swf must also be saved to the top level and the index.html file that has the movie embedded in it should also be at the top level. See me if you have ANY questions regarding the folder structure for the flash intro.

Suggested Sites for the Flash Intro are linked below. A Story Board will be created in class on Friday, April 23. After this date, there will be NO CLASS TIME for searching for templates. You must choose your template or design no later than Thursday, April 22!

Wyoming Web Designs -- http://www.freeflashintros-plus.com/freeflashintros.html

High quality flash web templates, full website templates, professionally designed html templates, premium logo designs, corporate identity templates, template memberships, affordable website hosting, stunning flash intro pages and more. All templates compatible with Adobe Photoshop, GoLive, Dreamweaver, Microsoft FrontPage and other popular webpage editors!!
These template are very simple. The HIGHEST grade you can make on the intro is 8/10

Free Flash Intros -- Five pages of editable flash templates.
http://www.flashfair.com/free_flash_intros.html

Flashfoot - Free Templates -- http://flashfoot.com/ (choose free flash intros from the left menu)-- (these are a bit more challenging. Make sure that they meet the requirements and they are editable!)

Flash Kits Sound Loops -- http://www.flashkit.com/loops/ Look for loops that are at least 6 - 8 seconds. If you are listening in class, you are allowed to use your headphones, or borrow a pair. Please do not disturb others. Reminder: DO NOT spend much time deciding on the sound file in class. If you want to listen to many, please stay for tutorials, or do so from home! (This is a cool site). Be sure to check loops, not Sound FX.

thefreesoundproject -- http://www.freesound.org/ This site has a LOT of sound files that you can use. Look for loops that are at least 6 - 8 seconds (at least). Edit the .fla file so the sound stops and/or matches the file. If you are listening in class, you are allowed to use your headphones, or borrow a pair. Please do not disturb others. Reminder: DO NOT spend much time deciding on the sound file in class. If you want to listen to many, please stay for tutorials, or do so from home! (This is a cool site too).

Important Notes

• if you choose a template that needs to be downloaded, save the file/folder. If it is a .zip folder, it should be saved to MyDocuments first.
• Extract the files needed for the template. More than likely, they will be saved to a folder that is automatically created in MyDocuments.
• Create a portfolio folder at the top level of your student folder. (Same level as first and flash).
• View the files. Select all and cut these files and paste them to the portfolio folder you just created. Make sure that you DO NOT have a folder within your portfolio folder!
• The .html file must be renamed index.html.
• The other files should not be changed at this time. Doing so, may cause the entire template to break.
• The .zip folder should be deleted.
• The empty folder created when the files were extracted should be deleted. Your goal is to have as few files as necessary in your folder.

Storyboards -- review the handout given in class on Wed/Thu. Storyboards are used to create a plan for your animation scene by scene. You can make changes to your storyboard before you start animating, instead of changing your mind later. You will also be able to talk about your animation and show your storyboard to other people to get feedback on your ideas. Since you have chosen a template, your job is to describe each of the scenes (actions) from the site. The text should be included, colors, timing and anything else that is descriptive. The handout for your storyboard should be complete before developing your web page.

Read STORYBOARDS before working on this assignment.

Copy of storyboard handout from class 4/19/2011

April 20 & 21

Warm-up - You will have ten minutes to review for the Flash Test.

• Check your BLOG assignment from March 7, 2011
• Review the Flash Intro test in Quizstar from March 9, 2011
• Flash CS3 -- Animated Icons
  http://www.quia.com/rr/472647.html?AP_rand=1580352974
• Flash CS3 - Terminology -
  http://www.quia.com/rr/472621.html?AP_rand=424022094

Flash Test on Quizstar -- Complete the Flash Test in Quizstar. Review your answers to see what you missed. Make corrections in your notebook if you want to review before the final exam.

Complete the portfolio/index.html file that you created the storyboard for on Tuesday.

Flash Intro  – portfolio/index.html (10 pts. total)

Skip Button (1)
automatically opens navigation &/or Stops (2) (this will be done at a later date)
Sound (2)
       Sound file can be found on the web. Search for FREE Sound Files for Web Pages. Save        as  .wav files. Note: If you flash file did not have sound embedded into it, directions for        embedding sound files using Dreamweaver are found at about.com

Degree of difficulty (5) -- NOTE. Your intro MUST reflect a Web Mastering Portfolio. These five points are based on the following rubric

0 - NO evidence of edits were found. The intro is strictly a template that was on the web.
1 - Minimal text was modified to reflect the Web Mastering Portfolio. Grammar and/or spelling errors were in the text.
3 - Minimal text was modified to reflect the Web Mastering Portfolio. The difficulty level was minimal.
4 - Some text was modified and class time was used well. Folder structure was correct. The link(s) work.
5 - Page reflects knowledge student has learned in Web Mastering. Skill level was stretched to showcase what student is capable of doing.

Continue with the Navigation Page for your portfolio.

Navigation (or main.html -- or any other appropriate file name. My example was nav.html in class) -- this file should be saved to your portfolio folder. The 'enter' button link should reflect a relative path to this file. ie. portfolio.html (or main.html). The filename doesn't really matter, but the link must work!

Thenavigation file is a web page that allows the viewer to access each of the projects that have been created this year in Web Mastering. You should create a web page that is designed based on the intro you selected in class. This page should complement the style used in it. This web page should showcase your very best effort and highlight all of the skills learned in class this year. It should NOT be a basic web page with four links! Paper is available for you to design your page before beginning. You may create your file in Dreamweaver OR Expression Web. It is necessary to manage your website in both software. Please make sure you have your site set-up prior to beginning.

Planning is VERY important. There are very many options in Expression Web and Dreamweaver to create websites. Remember that this is 25% of your final exam as well as a major test grade. Research, search, and recall what you have learned in class to produce the very best website possible. There are infinite possibilities how you can design your site to impress not only me, but yourself!  Review the portfolio assignment given in class on Monday. If you were absent, please make sure that you get a copy of this assignment. The details are outlined and the number of points for each portion are shown. Today's assignment is to work on the portfolio.html ONLY. Please do not work on the intro flash. Some of the folder structure can get very complicated and would be difficult to 'fix', so please do not BREAK the templates! Focus on making the portfolio page the best you can.

The navigation page should have links to each project. Be as creative as you can. You should make a link BACK to this page from each of the homepages of your projects. I will help with this step after TAKS. A reminder of the grading for this portion of the portfolio:

Link to First Web Site--and back (1)
Link to Photoshop Web Site--and back (1)
Link to Midterm files -- and back (1)
Link to Individual Web Sites -- and back (3)
      -- website created using Dreamweaver
      -- Heavy Metal
      -- website created for the Microsoft bliink contest
Link to Flash Projects --and back (2)
         Link to face, phone, and alien & back to flash
Link to the 6 Word Story Project -- back (2)
Degree of difficulty / completion (5)

0 - Page is NOT complete.
1 - Minimal effort is evident, broken links.
3 - Minimal effort, very basic design, or poor design.
4 - Page reflects effort to show design based on intro. Minor errors
5 - Page reflects knowledge student has learned in Web Mastering. Skill level was stretched to showcase what student is capable of doing.

Suggested sites to find template that will work for your navigation page.
Before downloading, please review the steps below

• Download the .zip file to MyDocuments
• Right click on the folder and extract all files (let them extract to MyDocuments in the folder it wants to create). You should look at these files NOW before deciding to work on them. You should not choose a template that is more challenging that you can do during the course of this week.
• Open the folder, Copy all the files and folders there and Paste to your portfolio folder in the student server. (Note...if your flash intro skip button could not be edited and goes to main.html, you MUST Paste these files and folders to the top level. It will be "messy", but it will work there).

Suggested sites to find templates

http://www.flashvillage.com/ - degree of difficulty is HIGH.

http://www.freecsstemplates.org/ -- degree of difficulty is MED

• Released for FREE under the Creative Commons Attribution license
• Very lightweight (ie. minimal use of images) and fast loading
• Tables-free (ie. no tables used for layout purposes)
• W3C standards compliant and valid (XHTML Strict)
• Provided with public domain photos, generously provided by PDPhoto.org and Wikimedia Commons [why?]

http://www.freecsstemplates.org/css-templates/ -- degree of difficulty is MED

The free CSS templates below are provided in .ZIP format. If you don't have an unzipping application, I strongly recommend 7-Zip. For information on how you can use these templates, please read the license page. Many of these templates are also available as WordPress themes.

http://www.freedreamweavertemplates.org/ -- degree of difficulty is LOWER

Here are all our templates we have to offer. I hope you find one you like. Thanks and remember to visit the creators sites listed on the sidebar.

http://www.templatemonster.com/free-templates.php - degree of difficulty is LOWER (but this site is a bit annoying to navigate)

It is known that website creation requires a lot of means, skills and energy. And if you are unfamiliar with HTML and CSS or just wish to save your time, our website templates are the perfect solution for you. TemplateMonster has created this collection of free web templates for you and regardless whether you are a newbie or a professional webmaster or designer you will still find them useful. They will also help you to evaluate the quality of our products, get a feel for things and try your skills before purchasing. So don’t hesitate to view and download these high quality templates free of charge for your education and use, but please note there are conditions and limitations associated with using these free website templates.

Tutorials - Tuesday after school and/or Wednesday at lunch. The navigation page should be complete on May 6.

 

---

EOC testing - May 9 & 10. Web Mastering classes will be 'displaced' next Monday and Tuesday. There is an alternate bell schedule as well. Please note the following.

Monday, May 9

Morning -- periods 1 & 2
Second - meet in R123b (JROTC with Mr. Fuentes). If you are TAKING an EOC, you were given the assignment on Thursday of last week. It will be due on Thursday, 5/12.

lunch

Afternoon -- periods 3 & 4
Third -- meet in E137 with Mr. Fuentes. If you are TAKING an EOC, you were given the assignment on Wednesday of last week. It will be due on Wednesday, 5/11
Fourth -- Meets in E216 with Ms. Randolph. If you are TAKING an EOC, you were given the assignment on Thursday of last week. It will be due on Thursday, 5/12.

Tuesday, May 10

Morning -- periods 5 & 6
Sixth - meet in N220 with Ms. Mahmassani. If you are TAKING an EOC, you were given the assignment on Thursday of last week. It will be due on Thursday, 5/12.

lunch

Afternoon -- periods 1 & 7
Seventh -- meet in S231 with Ms Phillips. If you are TAKING an EOC, you were given the assignment on Wednesday of last week. It will be due on Wednesday, 5/11

May 11 & 12

Today should be used as a make-up day. Please check to make sure the following have been completed.

• Flash Test '11 - major grade
• Flash Intro - quiz grade (this was due Friday, April 30)
  • is there an index.html (that works) in the TOP level of your folder on the student server?
  • is the a skip intro, or enter button that takes you to a navigation page?
• Navigation Page - major grade
  • is there a link to the following:
    • first website
    • portfolio projects
    • midterm exam
    • dreamweaver project
    • heavy metal
    • bliink contest website
    • flash projects
    • 6 word story (we are starting this assignment next Monday. You must have a link to 6words/index.html
• Navigation Test (from last Friday) - major grade
  • are there links on each of the following that will take you BACK to the navigation page?
    • first website
    • portfolio projects
    • midterm exam
    • dreamweaver project
    • heavy metal
    • bliink contest website
    • flash projects
    • 6 word story (don't worry about this one yet)
  • Do these links 'match' the page that they are on?l
• End of Course Assignment - if you were absent and did not get a copy of this assignment, see me today. This assignment will be due on Monday, May 16.
  

May 23

You will complete your Web Mastering Portfolio today.

The index.html file in the @pickup folder is the file that you will need to complete the navigation for your portfolio. This file has links to the 6 word story movies that were created.

Copy the index.html file and the story folder to your 6word folder. (Note these folder names!)

You will need to check the link from your navigation page and make sure that is GOES to this file. (It will IF the link and folder was created correctly in the first place).

The only thing you have to do is change the link of the button on this page to go BACK to your navigation page. Many of you had different locations and file names. This should be done in Dreamweaver.

When complete, let me check your work and continue work on the review for your final exam.

Home | HISD | Site Map | Contact Us| Legal | Copyright

Westside High School
14201 Briar Forest, Houston, TX 77077 . (281)-920-8000 . Fax (281)-920-8059