Introduction+to+Web+Design+2013-2014

Block 2B - E201 Email/Google Drive Account: darryl.mendonez@sbschools.org Student Email Site Google Drive Quarter 1 Presentation File Quarter 2 Presentation File




 * Daily Activities **


 * ** QUARTER 1 ** || **Powerpoint Presentation File for Quarter 1** (Updated daily) ||  ||
 * **Date** || **Classwork** || **Homework** ||
 * 9-5-14 || * Do Now: Assign seats
 * Finish Info & Interests
 * Explore class wiki and School Email
 * Go over Syllabus and Course Expectations
 * Explore Insight and Google Drive
 * Create classroom folder
 * Ice Breaker
 * 20 Questions Character Game
 * Favorites Presentation
 * Closure: What are some new things you learned today about Google Drive?

*Reminder: Pre Assessment will be given next class ||  || Info & Interests Ice Breaker - 20 Questions Character Game ||  || Explore Google Drive Explore Google Documents || Log into your school email from home and your Google Drive. || Critique Websites Cyberguide Ratings for Website Design ||  || Journal Analysis Cyberguide Ratings for Website Design ||  || Vocabulary of HTML Coding @Creating Your First HTML File || Study for vocabulary quiz on 9/25. || > Browse through the other App Reviews posted on the shared document (Date updated due to snow day 2-5-14) || * Do Now: Student Survey (Date updated due to snow day 2-5-14) || * Do Now: Study for Final Exam __**New Jersey Core Curriculum Content Standards**__ (covered daily) 6.3 (Social Studies; Active Citizenship in the 21st needed to be active, informed citizens who value diversity and promote cultural understanding by working collaboratively to address the challenges that are inherent in living in an interconnected world. • 8.1 (Technology, Educational Technology): All students will use digital tools to access, manage, evaluate, and synthesize information in order to solve problems individually and collaboratively and to create and communicate knowledge. • 9.1 (21st-Century Life and Careers, 21st-Century Life & Career Skills): All students will demonstrate the creative, critical thinking, collaboration, and problem-solving skills needed to function successfully as both global citizens and workers in diverse ethnic and organizational cultures. • 9.2 (21st-Century life and Careers, Personal Financial Literacy) All students will develop skills and strategies that promote personal and financial responsibility related to financial planning, savings, investment, and charitable giving in the global economy. • 9.3 (21st-Century Life and Careers, Career Awareness, Exploration & Preparation): All students will apply knowledge about and engage in the process of career awareness, exploration, and preparation in order to navigate the globally competitive work environment of the information age.
 * 9-11-13 || Pre-Assessment
 * 9-13-13 || Explore School Email
 * 9-17-13 || Create Shared Folder
 * 9-19-13 || Continue Critiquing Websites
 * 9-23-13 || Journal Analysis
 * 9-25-13 || * Do Now: Study for Quiz
 * Vocabulary Quiz
 * Finish Favorites Lists
 * Working Backwards Activity: 2013 Emmy Awards
 * Closure: What tags have I learned so far? ||  ||
 * 9-27-13 || * Do Now: Open a new Google Document and create a list of tags you have learned so far.
 * Finish 2013 Emmy Awards List
 * Tags for Basic Formatting
 * Giving Your Page a Title
 * Finishing It Up
 * Practice Formats and Title
 * Activity: Current Event
 * Closure: What are the tags you have learned so far in this class? ||  ||
 * 10-1-13 || * Do Now: Finish working on Your Current Event Activity.
 * Review Basic Formatting and Title Tags
 * Add to Google Document Tags List
 * Discussion: Tips on How to Conserve Battery Life
 * Working Backwards Activity: How to Fix Battery Life Issues on a Smartphone
 * Closure: How do you like learning XHTML so far? ||  ||
 * 10-3-13 || * Do Now: Go to Wikipedia and search for "Web colors." Open the article and read the section titled, "Web-safe colors."
 * Direct Link for Do Now:
 * @http://en.wikipedia.org/wiki/Web_colors
 * Discover Color Chart and Hex Codes
 * Discover @How to Add Color to Your Webpage
 * Practice
 * Closure: Why is it better to use web-safe colors on your website? ||  ||
 * 10-7-13 || * Do Now: Rainbow Words - Choose one of your favorite quotes. Code a website with your quote. Be creative and use different colors and font sizes to make it stand out.
 * Discover Changing Font Size
 * Share Your Favorite Quote
 * Working Backwards Project: The Universe
 * Closure: Add the sentence, "My HTML skills are growing each day," and change each word's font size from size 1 - 7. Add Font Size to the list of things you have learned in this class. Finally, save the file as fontsize.html. ||  ||
 * 10-9-13 || * Do Now: Make sure you still have the .txt and .html files for myfirstpage, commonformattingtags, colors, and fontsize. If you are missing any go back and redo them. If you have them all open up your list of tags document and add the font attribute for changing font size.
 * Continue Working Backwards Project: The Universe
 * Closure: Describe the difference between a tag and an attribute. ||  ||
 * 10-11-13 || * Do Now: Log into Google Drive and open your shared folder. Create a new document and title it Typing Test Log.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Activity: Typing Test
 * <span style="font-family: Arial,Helvetica,sans-serif;">Set Typing Test to English, 3 Minutes, and Aesop's Fable
 * <span style="font-family: Arial,Helvetica,sans-serif;">Try the Typing Test 6 times and record each attempt on a Google Document in your shared folder. Title the document Typing Test Log.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Record the Typing Speed, Errors, and Adjusted Speed.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Project: Create a Physical Journal of all the Tags and Attributes you have learned so far.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Closure: Check to make sure you have all the tags and attributes we covered in class in your list of tags. || Study for Test on Tags and Attributes ||
 * 10-16-13 || * Do Now: Study for Tags and Attributes Test
 * **Tags and Attributes Test**
 * Continue Physical Journal Project
 * Closure: How do you code center and right align for text? || Finish Physical Journal Project ||
 * 10-18-13 || * Do Now: Turn in your Physical Journal Project
 * Discover Aligning Text
 * Discover Inserting a Picture
 * Practice: Open your fontsize.txt file and follow the Aligning Text and Inserting Pictures tutorial. Save the file as alignandimage.txt and html.
 * Activity: Open your 2013 Emmy Awards text file and add pictures next to each movie listed.
 * Closure: How do you Center Align in html? How do you Insert Images in html? ||  ||
 * 10-22-13 || * Do Now: Continue adding images to your emmys.html file.
 * Discover Hyperlinks
 * Practice: Open your alignandimage.txt file and follow the Inserting Hyperlinks tutorial. Save the file as hyperlinks.txt and html.
 * Activity: Create hyperlinks into your emmyswithpictures.html file. Make the text and the image for the name of each show a hyperlink.
 * Closure: Open up your tags list and add the html code for aligning text, inserting pictures, and hyperlinks ||  ||
 * 10-25-13 || * Do Now: Open a new Google Document and make a list of your ten most frequently visited web sites.
 * Review: How to code images and hyperlinks
 * Guided Practice: Collectively help Mr. Mendonez code a website of the class's favorite links.
 * Include the following: Title, Header, Centered Image, Background Color, Colored Font, Text that are Hyperlinks, Images that are Hyperlinks
 * Project: Create your Personalized Bookmarks Page
 * Include the following: Title, Header, Centered Image, Background Color, Colored Font, Images that are Hyperlinks
 * You must have 6 - 10 different bookmarks
 * How to Set Homepage in Google Chrome
 * Closure:
 * “How do you set a new home page in Internet Explorer?”
 * “How do you set a new home page in Google Chrome?” ||  ||
 * 10-29-13 || * Do Now: Finish Project - Create your Personalized Bookmarks Page
 * Make Up Work: Check PowerSchool and make sure you are caught up with all of your work. If not, make up any assignments you are missing.
 * Research: Web Design Jobs
 * <span style="font-family: Arial,Helvetica,sans-serif;">Visit any job search website such as monster or careerbuilder. Search for a web design or computer programming job posting that interests you. In a Google Document respond to the following:
 * <span style="font-family: Arial,Helvetica,sans-serif;">Summarize the job description in your own words.
 * <span style="font-family: Arial,Helvetica,sans-serif;">How much is the pay?
 * <span style="font-family: Arial,Helvetica,sans-serif;">What will you need to do to become qualified for the job?
 * <span style="font-family: Arial,Helvetica,sans-serif;">Do you find the job appealing? Why or Why not?
 * <span style="font-family: Arial,Helvetica,sans-serif;">Activity: Typing Test
 * <span style="font-family: Arial,Helvetica,sans-serif;">Set Typing Test to English, 3 Minutes, and The Wonderful Wizard of Oz
 * <span style="font-family: Arial,Helvetica,sans-serif;">Try the Typing Test 6 times and record each attempt on the same Google Document we created last time we did the Typing Test. The document should be titled Typing Test Log.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Record your Typing Speed, Errors, and Adjusted Speed per attempt.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Closure: Do you have interest in pursuing Web Design as a career? || Finish Project - Create your Personalized Bookmarks Page ||
 * 10-31-13 || * Do Now: Add the codes for Aligning Text, Inserting Pictures, and Hyperlinks into your Tags List
 * Watch: Designed by Apple
 * Discover: How to Embed YouTube Videos into a Webpage
 * Practice: Open your hyperlinks.txt file and follow the How to Embed YouTube Videos into a Webpage tutorial. Save the file as youtubevideo.txt and.html
 * Make sure to have the following in your list for the youtube video file:
 * <li>Text Editors</li>
 * <li>Laying Down the Foundation of a Website</li>
 * <li>Basic HTML Tags</li>
 * <li>Basic HTML Coding</li>
 * <li>Common Formatting Tags</li>
 * <li>Title</li>
 * <li>Background Color</li>
 * <li>Text Color</li>
 * <li>Font Size</li>
 * <li>Aligning Text</li>
 * <li>Adding Images</li>
 * <li>Hyperlinks</li>
 * <li>Embedding Video</li></ul>
 * Activity: Movie Review
 * Create a movie review webpage. Choose one of your favorite movies and write a review about it. Be sure to include: a title, header, colored text, background color, at least three images, a well-written and thorough review, and a video of the movie trailer from YouTube.
 * Closure: What is the tag and attributes necessary to embed video into a webpage? ||  ||
 * 11-4-13 || * Do Now: Finish Movie Review Activity
 * Create a movie review webpage. Choose one of your favorite movies and write a review about it. Be sure to include: a title, header, colored text, background color, at least three images, a well-written and thorough review, and a video of the movie trailer from YouTube.
 * Be prepared to present and talk about your Movie Review with the class.
 * Typing Test Activity:
 * <span style="font-family: Arial,Helvetica,sans-serif;">Set Typing Test to English, 3 Minutes, and The Enchanted Typewriter
 * <span style="font-family: Arial,Helvetica,sans-serif;">Try the Typing Test 6 times and record each attempt on the same Google Document we created last time we did the Typing Test. The document should be titled Typing Test Log.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Record your Typing Speed, Errors, and Adjusted Speed per attempt.
 * Present Movie Review
 * Closure: What are some changes YouTube allows you to make to the embedded videos? ||  ||
 * 11-6-13 || * Do Now: Update your tags list with the tag and attributes for embedding videos
 * Continue Presenting Movie Reviews
 * Closing Activity: Nitrotype ||  ||
 * 11-12-13 || * Do Now: Discuss with your neighbor what your favorite social networks and instant messaging services are.
 * Finish Presenting Movie Reviews
 * Review Social Network Worksheet
 * The Social Network
 * Closing Activity: Discuss the personality of the main character so far. ||  ||
 * 11-14-13 || * Do Now: Take out The Social Network worksheet and reread the questions. What can we say so far about each question? Discuss this with your neighbor.
 * Discuss what we know about the movie so far.
 * Watch The Social Network
 * The Social Network Worksheet
 * Closure: What else can we add to our answers to the questions so far? ||  ||
 * ** Quarter 2 ** || **Powerpoint Presentation File for Quarter 2** (Updated daily) ||  ||
 * 11-18-13 || * Do Now: Take out The Social Network worksheet and reread the questions. What can we say so far about each question? Discuss this with your neighbor.
 * Discuss what we know about the movie so far.
 * Watch The Social Network
 * The Social Network Worksheet
 * Introduce Adobe Dreamweaver
 * Read Wikipedia Entry
 * Watch Adobe Dreamweaver Tutorial - What is Dreamweaver
 * Closure: Answer the questions from The Social Network Worksheet on a new Google Document. ||  ||
 * 11-20-13 || * Do Now: Open a new Google Document in your Intro to Web Folder and make a list of some things you would include if you were to make your own personal webpage.
 * Review South Brunswick School District Acceptable Use of Technology Agreement
 * Discover @How to Host Your Own Website Through Google Drive
 * Activity: Find your Personalized Bookmarks Page and rename it index.html so you can set it to be the home page of your website.
 * Feel free to add anything else you like to give it more flair.
 * Make any necessary changes if needed so that it follows the South Brunswick School District Acceptable Use of Technology Agreement and any other rules discussed in class
 * Closing Activity: Create and post your Tiny URL link here. ||  ||
 * 11-22-13 || * Do Now: Create a new folder within your "Intro to Web Design' folder on Google Drive and title it 'Published Classwork.'
 * Review @How to Host Your Own Website Through Google Drive
 * Discover: Adding links to your index.html
 * Introduce 'Published Classwork' Project
 * Closure: Begin work on 'Published Classwork' Project ||  ||
 * 11-26-13 || * Do Now: Review the 'Published Classwork' Project
 * Discover: Apps and Drive Notepad
 * Continue 'Published Classwork' Project
 * Closure: How does Notepad on Windows differ than Drive Notepad? ||  ||
 * 12-2-13 || * Do Now: Discuss with a neighbor what your observations are about Drive Notepad so far? Write down your final thoughts in a new Google Document.
 * Continue 'Published Classwork' Project
 * Closure: Create a Tiny URL and post the link in the 'Published Classwork' Project Links document. ||  ||
 * 12-4-13 || * Do Now: Discuss with a neighbor what your observations are about Tiny URL are. Why do you think such a tool is necessary? What are some practical uses for Tiny URL?
 * Continue 'Published Classwork' Project
 * <span style="font-family: Arial,Helvetica,sans-serif;">Activity: Typing Test - Space Cowboys
 * <span style="font-family: Arial,Helvetica,sans-serif;">Set Typing Test to English, 3 Minutes, and Space Cowboys
 * <span style="font-family: Arial,Helvetica,sans-serif;">Try the Typing Test 6 times and record each attempt in your Typing Test Log.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Record the Typing Speed, Errors, and Adjusted Speed.
 * Closure: Mark an 'X' in the last column of the 'Published Classwork' Project Links document to indicate that you have finished your project. **(*Request permission to edit if you are going to make changes to it outside of class time.*)** ||  ||
 * 12-6-13 || * Do Now: Finish 'Published Classwork' Project
 * When you've finished mark an 'X' in the last column of the 'Published Classwork' Project Links document to indicate that you have finished your project. **(*Request permission to edit if you are going to make changes to it outside of class time.*)**
 * Activity: Typing Test - Space Cowboys or Zebra
 * <span style="font-family: Arial,Helvetica,sans-serif;">Set Typing Test to English, 3 Minutes, and Space Cowboys or Zebra
 * <span style="font-family: Arial,Helvetica,sans-serif;">Try the Typing Test 6 times and record each attempt in your Typing Test Log.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Record the Typing Speed, Errors, and Adjusted Speed.
 * <span style="font-family: Arial,Helvetica,sans-serif;">Closing Activity: Explore Dreamweaver || Finish 'Published Classwork' Project on your own. ||
 * 12-11-13 || * Do Now: Discuss your observations of dreamweaver so far with your neighbor.
 * Discover Dreamweaver
 * Closing Activity: Review your favorite mobile app or computer program ||  ||
 * 12-13-13 || * Do Now: Make sure you have posted your tinyurl link on the shared document for your project.
 * Explore: Code.org
 * Watch: Hour of Code, President Obama calls on every American to learn code, What Most Schools Don't Teach
 * Discover: __Learn an Hour of Code__
 * Closing Activity: Reflection - On a new Google Document write your thoughts on learning code.
 * Why do you think it is important for our future?
 * Do you think learning code is overwhelming or do you think it is something you can you feel you could learn? Why or why not?
 * Do you have interest in taking a computer science class in the future? Why or why not? ||  ||
 * 12-17-13 || * Do Now: Finish answering the reflection questions on Hour of Code
 * Why do you think it is important for our future?
 * Do you think learning code is overwhelming or do you think it is something you can you feel you could learn? Why or why not?
 * Do you have interest in taking a computer science class in the future? Why or why not?
 * Share your responses to the reflection questions by hitting Share, then by typing my email darryl.mendonez@sbschools.org where it says invite.
 * Explore:
 * Continue exploring the different tutorials in the Learn tab in Code.org
 * Explore the Beyond One Hour tab in Code.org
 * Closure: Which tutorials did you enjoy? ||  ||
 * 12-19-13 || * Do Now: Reread your Hour of Code reflection answers and make any edits if needed. Then copy the share link and paste it into the following shared spreadsheet - Hour of Code Links
 * Discover: Publishing Google Drawings to the Web
 * Closing Activity: Holiday Cards ||  ||
 * 1-2-14 || * Do Now: Reread your review of your favorite mobile app or desktop program
 * Discover: Creating an HTML site with Dreamweaver
 * Activity: Create a webpage of your review for your favorite app or program using Dreamweaver
 * Example: Clear Review HTML
 * Closing Activity: Paste the link to your App Review here once you are done: App Review Links ||  ||
 * 1-7-14 || * Do Now: Finish writing your App Review on Dreamweaver
 * Paste the link to your App Review here once you are done: App Review Links
 * Closing Activity: Present your App Review to the class ||  ||
 * 1-9-14 || * Do Now:
 * If you haven't presented your App Review start preparing for it
 * If you've already presented start to think of one of your favorite electronic device. Create a list of things you like and dislike about it
 * Finish App Review Presentations
 * Activity: Electronic Device Review
 * Closure: Request permission to access folder: Links to Completed Projects. Post the link to your Electronic Device Review one you are done in the file called __Electronic Device Review Links__ ||  ||
 * 1-13-14 || * Do Now: Read the infographic posted on Top Computer Science Degrees. Discuss with your neighbor two interesting facts you learned from it. Write down the two facts on a new Google Document and why you found each fact interesting. Share the document by sending it to darryl.mendonez@sbschools.org.
 * Activity: Finish Electronic Device Review
 * Request permission to access folder: Links to Completed Projects. Post the link to your Electronic Device Review when you are done in the file called __Electronic Device Review Links__
 * Closing Activity: Typing Test - Tigers in the Wild
 * <span style="font-family: Arial,Helvetica,sans-serif;">Set Typing Test to English, 3 Minutes, and Tigers in the Wild
 * <span style="font-family: Arial,Helvetica,sans-serif;">Try the Typing Test 6 times and record each attempt in your Typing Test Log
 * <span style="font-family: Arial,Helvetica,sans-serif;">Record the Typing Speed, Errors, and Adjusted Speed ||  ||
 * 1-15-14 || * Do Now: Take a look at the blog site Aditya's Movie Review Blog. Browser around this blogger's site and take note of what kind of blog site it is. Notice how it is organized. Is it easy to navigate through the site? Read a post as well as the comments.
 * Discover: How to Make Your Blog Site with BlogSpot
 * Browse Mr. Mendo's Blog
 * Activity: Create Your BlogSpot Account
 * Go to www.blogger.com and log in with your School Google Account
 * Explore and Create Your BlogSpot
 * Select Your __Template__
 * Edit Your __Settings__
 * Create Your First Blog Post
 * For your first post choose two or more things you want to compare. Examples: Xbox One vs. Playstation 4, Star Trek vs. Star Wars, Hunger Games Books vs. Movies, The Best Batman Actor, etc... In your post introduce and describe both (or all if comparing more than one), then describe the pros and cons of each. Finally, explain why you feel one is better than the other. Be sure to include pictures and/or video throughout your post.
 * Closing Activity: Post the link to your blog on the Comparison Blog Post Links shared document and and look at your classmates blog sites. Leave a comment on each of your classmates' blog sites. ||  ||
 * 1-17-14 || * Do Now: Finish creating your blog and writing your first post comparing two or more things
 * Post the link to your blog on the Comparison Blog Post Links shared document and look at your classmates blog sites. Leave a comment on each of your classmates' blog sites.
 * Respond to comments left on your post
 * Closing Activity: Copy and paste your favorite movie and app review into new blog posts. Feel free to edit or add to it to make them look better. Share your blog with family, friends, and any social media you use and encourage them to make comments. ||  ||
 * 1-23-14 || * Do Now: Finish reading and commenting on each classmate's blog
 * Course Registration Information
 * View Course Description Booklet Online
 * Post your Favorite Movie Review on your Blog. Make any necessary edits.
 * Post your Favorite App Review on your Blog. Make any necessary edits.
 * Discover: Stats
 * Project: Become a Blogger
 * A blog should have a common theme and the blogger should write what he or she loves. Begin to define your blog. To do this write a blog post about something you love to talk about with the intention of following it up with more posts. You will write one blog post per class up to and including on 2-3-14 when the project is due.
 * Finish your blog post for homework if you cannot finish at least one in class.
 * Be sure to share your blog posts by putting your links in the shared document
 * Share your blog posts with friends and family and encourage them to leave comments
 * Share your blog posts on social media
 * Check your stats daily
 * Closure: Comment on your classmate's new blog posts || Finish blog post and share with friends and family. ||
 * 1-27-14 || * Do Now: Read and comment on each classmate's new blog posts
 * View your Stats
 * Continue Project: Become a Blogger
 * Closure: Comment on your classmate's new blog posts || Finish blog post and share with friends and family. ||
 * 1-29-14 || * Do Now: Read and comment on each classmate's new blog posts
 * Review Final Exam Study Guide
 * View your Stats
 * Continue Project: Become a Blogger
 * Closure: Comment on your classmate's new blog posts
 * For your interest: Oreo's Super Bowl Tweet || Finish blog post and share with friends and family. ||
 * 1-31-14 || * Do Now: Read and comment on each classmate's new blog posts
 * Review Final Exam Study Guide
 * View your Stats
 * Finish Project: Become a Blogger
 * Due Today
 * Closure: Comment on your classmate's new blog posts || Share with friends and family. ||
 * 2-6-14
 * Final Exam Review Game
 * Closure: Any questions on the Final Exam? || **Study for Final Exam** ||
 * 2-10-14
 * **Final Exam**
 * Final class discussion: Keep learning to code
 * Closure: Good luck on the rest of the school year! ||  ||

__**Formative Assessments**__ • Do Now / Closures • Application Exercises and Class work produced individually and in groups • Internet Research Activities • Observation / verbal check-for-understanding • Presentations • Chapter Quizzes • Case studies • Homework

This class follows the South Brunswick School District Acceptable Use of Technology Agreement