Web Design Project

Here is our storytelling project.

I expect this to be your best work.  I expect this to take a few weeks.  Good luck.

Read this.  Its Rosa Parks Day.  Its worth taking a minute to reflect.

Big Day

 Last night was a big night! Do you know how to use Voicethread?  We have it on the iPad now.  Great story telling tool.

Get your website tests in.  When done you will need to rename your folder (bschneiderflashtest) and copy it to the UDrive class folder.

Please don't be the person who forgets to rename it in the WDrive.

Flash Replication Project

Create a folder called "Flash HTML Project"

• Set up a basic HTML page.  Name it "home".  Title it "Awesome Flash Animations"
• Embed a shiny headline into the webpage.  When you create the movie be sure the canvas is the correct size (long and thin)
• Center it
• Use the <embed src="shiny text.swf" align=center> command to embed the movie title.  Note that you are embedding the Movie, not the Flash file.
• Create two Flash Animations
• Stick Figure I give you direction for this.
• Flowers I don't give you directions for this.  Solve the puzzle!
• Put the two animations in a 1 row table. You may need to play with the height/width of the movies.
• <Table align="center" border="1">
• <TR>
• <TD><embed src="stick.swf"></TD>
• <TD><embed src=flower.swf"></TD>
• </TR>

All of the tutorials (text, stick, flower) I encourage you to be creative.  Feel free to stick to the script, but once you "get it" I would like to see you take it to the next level.

Remember, everything must be in the same folder.  Keep it in your W Drive for now.

This is a test grade.  It is due Wednesday before break.  I am grading:

• How you solve problems of a technical nature.
• That you complete the project.
• That your Flash and HTML code is correct.
• The creativity that you can add to the project.

1 Day Project

I'm going to give you a series of items to work on today.  Do ALL the activities and choose any TWO to write about on your blog (with links!!).

1. Check out a Google Skills List.  Try some of them.  Have you been using Google effectively?
2. Do any of those skills help you solve todays Google Puzzle?
3. Can you win Third World Farmer?  How do games help you learn?  Being a 3rd world farmer can be frustrating and hard and life just isn't fair is it?
4. Are Theo Jansen creatures alive?  Why or why not?
5. Take five minutes and look at Book Creator and Show Me on the iPad.
6. Leave a comment on a 1st graders blog, here, or here.  Be sure to log in first if on blogmeister and leave SUPER nice and SUPER polite short entries for the kids.  On the other sites if it asks for your blog be sure to copy the correct address of YOUR blog.  Find some other blogs on the front page of blogmeister.  Hint: they will come back and read your blog.  Be ready!

What am I grading:
1. Can you follow directions?
2. Can you process information from many sources and accomplish a task (leave comments, write, etc...)?
3. Can you work effectively with others?

I am hoping to grade your blogs this weekend.  Please edit any blogs that need editing.  Each blog should include links, a Title, have no spelling errors or typos, and be solid writing.  Double check all of them and make sure you have submitted all.

If you finish tackle some more Flash or Fireworks tutorials.

Additional Flash Work

You need to complete the basic tutorials form the last session first.  Be sure to understand shape tween, motion tween, layers, and masking.

Today please complete the following.  These are much more complicated.  Some of these are video tutorials.  Be sure to use your headphones to respect your neighbors.  I suggest splitting your screen when doing the tutorials (tutorial on left, Flash on right)

Zoom In Zoom Out
Shiny Text
Drag and Drop (action Script coding)
Basic Slide Show
Importing Sound to Flash

Want to do something else?  Search on google or YouTube and find a tutorial.

If you have not read the Morris Lassmore book on the iPad try to do that today if you have time.  Be sure to write about the experience (with links!) on your blog.

Flash is Dead, But.....

Flash is kind of dead.  Adobe just pretty much killed it.  But, we have the software and I think it will be an excellent way to introduce you to animation.  We will explore several tools.

Save your Flash documents in the WDrive (make a Flash folder).  Save them in two formats.  First save the Flash document as an .fla file.  Then save the Flash Movie as a .swf file.  Then you will have two files for each project.  You can edit the .fla file.  You watch the .swf file.

Flash is probably new to most of you.  GO SLOW.  Skipping a step will cause your project to crash.  Coding is about being patient, paying attention to details, and seeing the big picture.


Please complete the following tutorials at a minimum on Monday:

• Motion Tween
• Shape Tween
• Layers
• Mask
• Ball Bouncing

Students who have those completed should work on:

• Rotating Globe
• Fog Effect
• Zoom in

If you get excited please start more tutorials (see link on right).

I'm still looking through your Veterans Day assignments.  Contest winner should be published soon.

Thursday

Today:

• Finish the Veterans Day assignment.  Be sure to save/submit it properly.

When done:

• Who had the best Snow test?  Check the UDrive.  Leave a comment on that person's blog saying "I thought your test was the best because....."
• Check out the article about the Morris Lassmore book.  Check the book out on the iPad (I don't have it on all iPads yet, be patient).  It is amazing.  Write about how reading is changing.
• Can you win the Redistricting Game?

HTML and Fireworks Exam

Here is your marking period exam.  This is worth 20% of your grade and is due by the end of class.

Please prepare an HTML website using notepad about the October Snowfall.  I am looking to see that you can use your new Fireworks talents to enhance your website.  The site should include:


1. Create a website using HTML that demonstrates the following:

• That you can use proper HTML codes.  
• You can create links that work, are effective, and efficient.
• You demonstrate attention to those with vision issues by including alt text for all images.
• A modern, usable design.

2. You must include a table or other device that shows how this snowfall ranks all-time. Cite where you obtain your data.
3. You must include an image or animation that has been manipulated using Fireworks. This image must be obtained using Creative Commons (Flickr,wikicommons, etc...). You may create the image yourself if you choose.  Save the link, you'll need it later.
4. A summary paragraph.  You must include at least one link to valuable information about the storm.
5. Your audience is 5th graders in Seymour.
6. Your website must be free of bias and be highly usable.


How to save your project:
1. Rename your folder in the WDrive. Name it first initial-last name-test (bschneidertest).
2. Copy folder.
3. Find class folder in UDrive. (Udrive-WebSchneider-Class-TEST)
4. Paste folder into UDrive.
5. HAVE NEIGHBOUR TEST WORK TO MAKE SURE EVERYTHING WORKS!! Format the links correctly!
6. Saving correctly is one of our standards.  I will not grade your test if I can't find it!


Blog Post:
1. Where did you get the image?  Include link.  If you created it yourself then please state that.
2. What aspects of coding or image manipulation have you gotten better at?
3. How did you manipulate your image in Fireworks?
4. What do you need to improve on?


Website 80%, Blog Reflection 20%


Rubric


You have two things due.  This exam due today, Veterans Day assignment due Thursday.

Veterans Day

The armistice treaty ending the "Great War" was signed on November 11, 1918. It is said that throughout the world nobody had seen so much rejoicing. The world had just experienced unimaginable turmoil, suffering, and pain.

The following year Armistice Day was established on November 11. President Woodrow Wilson said:

To us in America, the reflections of Armistice Day will be filled with solemn pride in the heroism of those who died in the country's service and with gratitude for the victory, both because of the thing from which it has freed us and because of the opportunity it has given America to show her sympathy with peace and justice in the councils of the nation.

It was a tradition for many years that at 11am on Armistice Day that all traffic would stop, conversations cease, and all focus be made on remembering those who had sacrificed.

In 1953, in Kansas, a town observed "Veterans Day". They felt this paid tribute to the veterans who had served in World War II and the Korean War. While there was much optimism in the country at the time there was also an incredible need to remember those who had served and sacrificed. Vast amounts of men had not come home from these wars.

Congress thought this was a great idea and in 1954 made Veterans Day a national holiday.

Many of you have friends, brothers, sister, fathers, or mothers who have served. If you have a story about them you want to tell please do so today.

Here is the Fireworks contest. All classes are eligible for this contest. Winner will be posted on this blog on November 11. Examples from our contests are seen here.

Your assignment is to make a poster about Veterans Day.

Be sure you understand the purpose of Veterans Day before tackling this assignment.

Your assignment is to design an image that could be posted in schools. You will use Fireworks and choose the appropriate tool or tools for your image.

Assignment parameters:

1. You set up the image size when you create a new document: Height=300 pixels, Width =600 pixels.

2. Your images MUST be non-copyrighted. I will publish this!!

3. You must be able to defend your choice of a tool in your blog post.

4. You must include "Veterans Day" somewhere in your image. You might decide to include additional text (date, slogan, etc..).

5. You must finish by the end of the period on Monday November 7.

6. Save in Udrive class folder when done (bschneider) as a .jpg file. All students will save in the same folder so be sure you name it correctly in the WDrive BEFORE you copy it to the UDrive. Be sure to test your work in the UDrive.

7. Hint: Interpolation allows you to blend images. Tutorial 1 Tutorial 2

Good luck!  Before you start PRACTICE YOUR SKILLS!

Fireworks:

1. List of tutorials (choose one or all)

2. Another list (choose one or all)

3. More tutorials (have fun!)

ShowMe

We tried the ShowMe app in music theory yesterday.  These were done quickly.  Its a pretty cool app.  Play around with it.

Wednesday

If you are in E block do todays lesson.

If you are in H block scroll down to the previous lesson.

Today....

Choose one subject to write about.  Include links!!
1. Read this article about halloween.   Are some costumes choices inappropriate?  Why or why not?
2. What are we doing to our kids?  Do parents and kids have too much screen time?

Choose something to experiment with:
1. Check out the ShowMe app.  Play around with it.
2.  Try to create a song with the Voice Jam app.
3. Have fun making a Puppet Movie with PuppetPals.

Other ideas:
1. Start a iPad Hockey tournament.  Make a website to keep score.
2. Try to draw something on the iPad and then on MS Paint.  Compare the two software programs.
3. Write about any picture in the Guardian Eyewitness App. You can google it to embed picture in a blog post.

Write about what you did today on your blog.  Have fun!







more to come....

Fireworks Practice

Fireworks tasks:

• Take this picture of Molly.  Change her outfit so its the same color as the girl in front of her.
• Change the H to an S.
• Change STOP to GO.  Make it green.
• Use a text tool to make your name super cool.
• Put President Obama in a crowd at a Yankee Game.

Some of those are hard.  Save all to your fireworks folder.


Next I want you to tackle this puzzle.  Why are there three water fountains in the upstairs hallway next to the guidance office?


 


I would like you to write a blog post:

• Embed the picture in the blog post.  If you go to the image and click share and then "Grab the HTML code".  Copy the code into a blog post.
• Give me a good story or theory.  Creative writing is fine.  I have NO IDEA why we have three water fountains.
• Be sure to include any links that are needed.

Claudia's Post
Samantha's Post

Fireworks Assignment

Before you begin please write a blog post about any of the following items.  Be sure to include links!  What do you think?

• 1/2 portrait.  Cool.
• TV.  Is it helpful?
• 100 Year Old Marathoner
• Photo Grenade

Today we will continue the Fireworks Tutorials.  This is sandbox time.  Please complete the following 8 tutorials and have the completed products in your Fireworks folder.  Now, some of these might not work perfectly as the software has changed.  If somethings not working, please substitute another tutorial.  Take your time and FOLLOW THE DIRECTIONS.

• Blur and Overlay
• Change Image color
• Patterned Text
• Photo Frames
• Crayon Effect
• Pencil Drawing Effect
• Feather Effect
• Fading Effect

Be sure to choose the right photograph for each tutorial.  Some photographs aren't appropriate (too dark, not enough contrast, etc...).  Be sure to save and name everything correctly.

My goal is that by the end of class today you can identify the basic functions of Fireworks and apply those functions to an image.  

Fireworks

Today all classes will work on Fireworks tutorials.  Whether this is new or review I would like all to do the same work to start.  You should move straight down the "image effects" category.  Then move to the other categories.  This is sandbox time today and Thursday.  Create a fireworks folder to save all of your work.  Every thing you do should be named, saved, and put in a folder.


If you are turning in something late I will give you half credit today.  The 4 page website was due at the last class.  The blog post about the Red Dot was due for homework.


If you are feeling behind--study!  I do not assign specific homework.  I expect you will be working on any issues that you have.  If you need to practice coding, then practice!

Where in the world is that red dot?

This week we only have one web design period.  Some of you will read this on Wednesday, some on Friday.

All students should complete two assignments today.  Everyone must finish the 4 page website during class.  Then students will complete the blog post.  If you do not finish the blog post it must be finished for homework.  Remember, you can post to your blog from any computer or phone.

HTML:

1. Please check that you have completed all requirements of the assignment.
2. When done RENAME your folder.  Rename with your first initial, last name and the assignment (bschneider4page).
3. COPY the folder to the UDrive-Webschneider.  Find your folder for your class.  Find the 4 page folder.  PASTE your folder into the 4 page folder.  Have a partner check that all the links work (trust me--check this).

Blog Post:

See that red dot in the middle of nowhere?  Where is that?  What do they do there?  What language do they speak, etc...?  Write a blog post and tell me about them.  Include links.

Extras: if you have extra time here are some prompts for blog posts.  Choose one (or all) and write a post.  Be sure to link to the source.

1. Why do we conform? Check out this Candid Camera video.
2. How cool is this cathedral?
3. Who is your favorite group on The Sing-Off?

Clustrmaps

You will now learn how to put a clustrmap on your blog. Communication and Collaboration is our 2nd curriculum standard. We use the clustrmap to collect data about how well our message gets out.

• Go to the Get One page.
• Complete the form. Be sure to use the correct address for your blog. If you do not have an email to submit this will not work.  See me.
• The password will come to your email.
• Submit password on clustrmap page. They will then give you a long HTML embed code that you copy.
• Go to your blog, log-in and open the control panel. Paste the long code in the About Me section.
• Submit new code. Wait for me to approve it.

You can also check out meez if you want to add an avatar to your site (which seems to be blocked at school right now...). You could also try voki.com. What image do you want to portray to the world?  You would add a voki or meez the same way.


Today's HTML assignment is to create a four page website.

Student Blogging

Over the next few days all students will be getting their blogmeisters started. We will talk a lot about building an audience, blogging ethics, and 3d writing as we move forward.  But I just want you to get started today.

A few notes:
1. Do your typing in MS Word or notepad. Check spelling before you send.
2. Click request publishing.
3. When leaving comments leave first initial and last name (Bschneider) and your web address so people can respond.
4. The blog will not post until I accept it.  Don't keep clicking.
5. You can access your blog from anywhere.  But so can anyone else.  Everything that you write will be there forever.
6. I am sure there a ton of things I will remember, I haven't activated these blogs in while.
7. Please don't use first and last names.  Always use first name and last initial.
8. Always use links.  If you talk about somebody's blog, then link to it!
9. The blog accepts HTML code.


Spend a little time exploring the controls on the blog.  This is a VERY simple layout.  

All classes will take the typing test .

• Put your score in your blog (be honest!) and see if it improves later.
• Don't say "I took a typing test". Say "I took a typing test". Demonstrate that you know how to code a link.

Typing fast and accurately can make you much more efficient. I type fast, but improperly (I don't really use my outer fingers), so I lose accuracy and I know its not good for my hands and wrists.

When you finish please leave a comment on someones blog

• Leave a comment with your first name and last initial in the name box.  Copy YOUR blogmeister web address for the URL box.  Do this with me if you aren't sure.

Any extra time, work on your HTML or finish yesterdays reading assignments.

HTML: American Flag Assignment

With the HTML practice I am trying to do the following:

• Get you accustomed to naming files, saving them, and opening the pages.
• Understanding basic structure of code.
• Switching from one teacher (me) to many teachers (you).
• Have you acknowledge what a good website, good writing, and good design looks like.  

So.....

• I will guide you, model some items, but I will try not to give you the answers.  This is a coding class, which is problem solving.  You need to learn how to solve the problems.
• I will begin to insist on your best work.  Some of you will struggle and I will say "try again".  Don't get frustrated, I do that because I know you can do better.
• At just about anytime I will allow you to work on your own projects.  Some examples of student led projects include this music video or maybe creating an advocacy campaign to change the world.  Seriously, this is your chance to really think about what you want to do.

We will make our first webSITE today. Until now we have made webPAGES. Today please do the following:

• Create a folder in your WDrive-Web Design. Label it "Flag".
• Download a clip-art or Creative Commons image of an American Flag. Save in flag folder
• Create a two-page website.
• Title Page 1: "American Flag". Add heading, background color, and flag image.
• Center image.
• Title Page 2: "American Flag History". Add heading. Add short description of Flag history with two links to further information.
• Link pages together: Make image on Page 1 the link to Page 2. On Page 2 include a "home" link back to page 1.
• Does your font choice matter?  Read this.
• Save both pages. Test links.

When done:

• A Google A Day
• Put in your headphones and play with Bobby or Incredibox
• Read this longer, but fascinating, story in the NY Times about a student with autism.
• Watch this movie trailer.  Yes, that is tap water catching on fire at the end.  

Nobody finishes early.  There is always something to work on.

Thursday Lesson

I am at UConn today.  I am presenting a class to future teachers about technology in the classroom.  iPads will be the focus of the discussion.  Your Evernote podcasts will probably be played.

Do the work while I am gone.  I firmly believe that there is not one teacher in the room, but twenty.  We all teach each other.  When a class can let go of the idea that the teacher must tell them everything the class will start to fly.  I want YOU to create the ideas in this class.

Today:

1. Try the Google A Day.  Can you get the answer?

2. Organize your W Drive.  Put assignments into folders.  Make it neat.  Everytime you get a new assignment it should go in a folder.

3. Create a HTML page.  Title it "HTML Lesson".

• Create a one page website that demonstrates how to:
• Open a file and create HTML (open notepad, how to view source, etc...).
• How the "first 8 tags" work.  Body, head, etc...
• How to create a link.
• Use proper colors.  Does it need a table? Image?
• Save in WDrive.  HTMLTutorial.html

4. If you finish please show the substitute.

First HTML Quiz

Start today with a Google A Day.  The site times you.  So move fast.  We will be learning how to search effectively throughout the year.

Then Draw a Stickman.  Wouldn't you like to learn how to do that?  Guess what?  You will.

The quiz for web 1 will be due by the end of the period on Tuesday. Some of you will finish early, some of you will have to work fast...

You will create a one page website about your current class schedule. This website should include:

• A title in the header code.
• A clear heading on the page.
• A list of classes.
• A brief paragraph describing yourself (junior at Seymour High School, etc...)
• Background color other than white.  Keep the color light (no bright red, black, etc...if you disagree go back and look at the bad websites)

If you do the above correctly the maximum you can score is 3/4.  You must do at least one of the extras to be able to score 4/4.

Extras:

1. Can you include an image that you created?  Remember that the image must be in the same folder as the webpage.

2. Can you place the schedule in a table?

3. Can you create a link to Seymour High School?

Be sure you code the first 8 code tags correctly.  Be sure you open and close your tags in the correct order. 

Save the file to your WDrive-Web Design when done.