Web+Animation+2013-2014

= = This course focuses on HTML5 and the Bootstrap framework. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Students will be exposed to the original framework and many other extensions offered to make Bootstrap even more powerful. = = = = = Block 2B - E201 = Email/Google Drive Account: darryl.mendonez@sbschools.org Web Animation eBook Student Email Site Google Drive Quarter 3 Presentation Slides Quarter 4 Presentation Slides



** Daily Activities **

Quarter 4 Presentation Slides __ **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.
 * ** QUARTER ** || Quarter 3 Presentation Slides (Updated daily) ||  ||
 * **Date** || **Classwork** || **Homework** ||
 * 2-12 || * Do Now: Assign seats
 * Introductions
 * Ice Breaker - 20 Questions Character Game
 * Introduce Class Wiki
 * Tech Survey
 * Course Expectations
 * Closure: What are your expectations from this course? ||  ||
 * 2-17 || * Do Now: Read the following article
 * Which Coding Language is Right for You?
 * Class Discussion on article
 * Explore School Email
 * Explore Google Drive
 * Explore Google Documents
 * Create Shared Folder
 * Begin Chapter 1: Introduction to HTML
 * Closure: Create your first web page || Study for Chapter 1 Vocabulary Quiz ||
 * 2-19 || Sub plans: Go to code.org and watch the introduction video. Students should create an account then do at least two tutorials of their choice under the learn tab. Vocabulary quiz is rescheduled for next class. || Study for Chapter 1 Vocabulary Quiz ||
 * 2-21 || * Do Now: Study for quiz
 * Chapter 1 Vocabulary Quiz
 * Discover: Basic HTML Tags and Attributes and Advantages of HTML5
 * Demonstration: Code Amazing Flour-less Brownies!
 * Activity: Create a Recipe Webpage
 * Find a recipe online that you will use to write in your recipe webpage
 * Make sure you use the following:
 * The HTML5 page structure
 * Title tag
 * Align tag
 * At least 4 different size header tags (h1, h2, h3, etc...)
 * Image tag
 * List tags
 * At least 4 division tags
 * Paragraph tag
 * Bold, Italicize, or Underline tag
 * Hyperlink tag
 * Comment tag
 * Save file as recipe.html
 * Closure: What new tags did I learn today? ||  ||
 * 2-25 || * Do Now: Review tags and finish Create a Recipe Webpage activity
 * Get Started: How to Host a Webpage through Google Drive, TinyURL, & Drive Notepad
 * Post and Share your Recipe Webpage
 * Closure: Create Another Recipe Webpage with Drive Notepad || Finish your second recipe by using Drive Notepad. ||
 * 2-27 || * Do Now: Open up both of your Recipe Webpages and make sure you have included all the tags required
 * Discover: Your Index Page
 * Share your Index Page
 * Review: How to host a webpage
 * Discuss: Microsoft Notepad vs. Drive Notepad
 * CSS Chapter 1: Introduction to CSS, Spacing, and Color
 * Activity: Add CSS to your Recipe Webpage
 * Closure: What are some interesting facts you learned about CSS? || **Study for HTML5 Chapter 1 Test** ||
 * 3-3 || * Do Now: Study for HTML5 Chapter 1 Test
 * HTML5 Chapter Test
 * Paste the link for Part III here - Chapter 1 Test Part III Links
 * Troubleshoot Web Pages
 * Closure: Practice CSS ||  ||
 * 3-5 || * Do Now: Finish Part III of Chapter 1 Test
 * Paste the link for Part III here - Chapter 1 Test Part III Links
 * Troubleshoot Web Pages
 * Test your site with this code: Display Test Code
 * Share Index Page
 * Closure: Practice CSS ||  ||
 * 3-7 || * Do Now: Read High-profile iOS Jailbreaker 'winocm' to Join Apple This Year
 * Create a document in your shared folder titled 'Quarter 3 Do Now' and answer the following question.
 * What kind of work ethic do you think this teenager has to achieve the position he has now?
 * Class discussion on article
 * Chapter 1 Test Links?
 * Discover: Index
 * Set up Index links
 * Review CSS
 * CSS Chapter 2: Backgrounds and Colors I
 * Closing Activity: Add Color and Background Image to your Recipe Web Page
 * Before you begin make two copies of your original and rename one copy 'recipewithbgcolor.html' and the other 'recipewithbgimage.html'. ||  ||
 * 3-11 || * Do Now: Finish Recipe with Background Color and Image
 * Review how to add a background color and image
 * Favorite your Index
 * Introduce JavaScript
 * Example
 * Discover How to Auto-Resize Images with Java and Make Pop ups
 * Popup and Resize Code
 * Closing Activity: Auto-Resize Recipe Image and add Pop up || Study for CSS and JavaScript Quiz * Color Sections
 * Border Sections (Solid or Dotted)
 * Background Color or Image
 * Move Objects
 * Pop Ups
 * Resize Images ||
 * 3-13 || * Do Now: Look over your notes for quiz
 * CSS and JavaScript Quiz
 * Color Sections
 * Border Sections (Solid or Dotted)
 * Background Color or Image
 * Move Objects
 * Pop Ups
 * Resize Images ||  ||
 * 3-17 || * Do Now: Take a look at everyone's Movie Review Website
 * Movie Reviews by 2B
 * Introduce Twitter Bootstrap
 * History and Features
 * Set up Bootstrap Files
 * Twitter Bootstrap Page Structure
 * Demonstrate Coding Navigation Bar
 * Closing Activity: Code your home page navigation bar ||  ||
 * 3-19 || * Do Now: Read How To Get A Job At Google and respond to the following in your Do Now document
 * List the 5 hiring attributes and summarize each of them
 * Do you think you can apply these hiring attributes in your work ethic? Why or why not?
 * Do you think Bock's opinion on most colleges is a valid point? (Second to last paragraph.) Why or why not?
 * Knowing the expectations at Google, do you think striving to meet their hiring attributes would make you a better person? Why or why not?
 * Finish coding your home page navigation bar
 * Please note that this video is now moved from Twitter Bootstrap Chapter 1 to Chapter 2 - Creating Your Homepage
 * Discover: Create Sticky Footer That Stays In The Browser Viewport
 * Activity: Create a sticky footer for your homepage
 * Closing Activity: Go to Code.org, click on the learn tab, and choose one of the tutorials to go through ||  ||
 * 3-21 || * Do Now: Finish your footer bar
 * Discover: Tips for following along with YouTube
 * Discover: Jumbotrons
 * Closing Activity: Create your Jumbotron ||  ||
 * 3-25 || * Do Now: Finish creating your Jumbotron
 * Review: South Brunswick School District Acceptable Use Policy
 * Discover: More tips for following along with YouTube
 * Share Your Topic
 * Discover: styles.css
 * Discover: Responsive Grid Systems
 * Closing Activity: Create your grid system ||  ||
 * 3-27 || * Do Now: Finish your responsive grid system
 * Watch: Take This Lollipop
 * Discuss: Internet Safety
 * Fix Footer Bar
 * Discuss Contact Popup
 * Discover: Popup Boxes
 * Closing Activity: Create your own popup box ||  ||
 * 3-31 || * Do Now: Finish your popup box
 * Introduce Extra Credit: Improve Navigation Bar
 * Introduce: Twitter Bootstrap - Chapter 3
 * Discover: Beginning Your Article Pages
 * Closing Activity: Create your article pages
 * You should have a minimum of four article pages for your Twitter Bootstrap project
 * With a homepage and four article pages you will receive an 80% for this project
 * For every article page you do after four you will earn an extra 5% until you reach 100% which will be a total of eight article pages ||  ||
 * 4-2 || * Do Now: Finish your first article page
 * Discuss Extra Credit: Improve Navigation Bar
 * Discover: Article Sidebar
 * Closing Activity: Work on your article pages and sidebars
 * You should have a minimum of four article pages for your Twitter Bootstrap project
 * With a homepage and four article pages you will receive an 80% for this project
 * For every article page you do after four you will earn an extra 5% until you reach 100% which will be a total of eight article pages ||  ||
 * 4-4 || * Do Now: Finish your second article page
 * Twitter Bootstrap Project: Work on your article pages
 * You should have a minimum of four article pages for your Twitter Bootstrap project
 * With a homepage and four article pages you will receive an 80% for this project
 * For every article page you do after four you will earn an extra 5% until you reach 100% which will be a total of eight article pages
 * **Twitter Bootstrap project is due April 10th** || Work on Twitter Bootstrap project ||
 * 4-8 || * Do Now: Finish your third article page
 * Twitter Bootstrap Project: Work on your article pages
 * You should have a minimum of four article pages for your Twitter Bootstrap project
 * With a homepage and four article pages you will receive an 80% for this project
 * For every article page you do after four you will earn an extra 5% until you reach 100% which will be a total of eight article pages
 * ** Twitter Bootstrap project is due April 10th **
 * Closure: What more would you like to learn about web design? || Work on Twitter Bootstrap project ||
 * 4-10 || * Do Now: Read 11 Reasons to Use Twitter Bootstrap
 * In your Quarter 3 Do Now document choose two of the reasons you agree with the most and explain why
 * Discuss Reasons to Use Twitter Bootstrap
 * Discover: Responsive Images and Videos
 * Investigate: Comments via Disqus
 * Twitter Bootstrap Project: Work on your article pages
 * You should have a minimum of four article pages for your Twitter Bootstrap project
 * With a homepage and four article pages you will receive an 80% for this project
 * For every article page you do after __three__ you will earn an extra 5% until you reach 100% which will be a total of eight article pages
 * ** Twitter Bootstrap project is due by the end of class today **
 * Closure: How can you use Disqus on your own website? ||  ||
 * **Quarter 4** ||  ||   ||
 * 4-21 || * Do Now: Fix your HTML files from your Twitter Bootstrap Project
 * Create a new document titled 'Quarter 4 Do Now's' and write down as many facts as you can about Steve Jobs and the creation of Apple
 * Discover: PicMonkey
 * Closing Activity: Try editing pictures with PicMonkey ||  ||
 * 4-23 || * Do Now: Open An Intimate Glimpse at Steve Jobs' Intense Humanity, read the section Letting Steve Drive, and answer the following questions in your Quarter 4 Do Now document:
 * What does this tell us about Jobs' attitude?
 * Do you think it is fair that Jobs expects his employees to know what they are talking about and admit when they are not sure rather than pretending to know?
 * Do you think this is a good leadership strategy? Is it really a time-saver?
 * Discuss Steve Jobs and Apple
 * Watch: Jobs
 * Closure: What have you learned about Steve Jobs and Apple from the movie so far? ||  ||
 * 4-25 || * Do Now: Open An Intimate Glimpse at Steve Jobs' Intense Humanity, read the sections 'What Would You Do?' and 'Intensity and Humanity', and answer the following questions in your Quarter 4 Do Now document:
 * Why does Steve Jobs use fear as a motivator on his employees?
 * Do you think that kind of work culture is good for a company?
 * Discussion: Who is Jonny Ive?
 * Watch: Jobs
 * Discuss Movie
 * Watch: Apple Commercial - The Crazy Ones narrated by Steve Jobs
 * Closure: Research either Steve Wozniak or Jonny Ive. In your Quarter 4 document write down highlights of their career whether it has to do with Apple or not. ||  ||
 * 4-29 || * Do Now: Read Thoughts on Flash by Steve Jobs and answer the following:
 * How does Jobs explain Apple's position on Open Standards for the Web?
 * What does Jobs say about videos and games?
 * What does he say about reliability, security, and performance?
 * Do you agree with these three points? Why or why not?
 * Install: HTML Editey - Log into Google Drive, click 'Create', click ' Connect More Apps', and then search for HTML Editey. Install it and use it as your HTML editor.
 * Discover: Breadcrumbs
 * Discover: Alert Boxes
 * Closing Activity: Practice creating breadcrumbs and alert boxes by following along with the video while coding your own. Create them in a new web page by using the Bootstrap Page Structure and saving the html file in your bootstrap folder. Feel free to add breadcrumbs and alert boxes into your Bootstrap Project ||  ||
 * 5/1 || * Do Now: Read Thoughts on Flash by Steve Jobs and answer the following:
 * What does Jobs say about battery life?
 * Why isn't Flash good to use on touch devices?
 * Explain the most important reason why Jobs banned Flash from iOS devices.
 * This statement was written four years ago. Do you think that it still holds true today? Why or why not?
 * Discover: Input Groups
 * Discover: Carousel
 * Use PicMonkey to edit images
 * Have at least 5 pictures in your carousel
 * Closing Activity: Practice creating input groups and a carousel by following along with the video while coding your own. Create them in a new web page by using the Bootstrap Page Structure and saving the html file in your bootstrap folder. Feel free to add input groups and carousel into your Bootstrap Project. ||  ||
 * 5-5 || * Do Now: Disney has acquired some pretty large companies throughout the years.  Research and answer the following questions.
 * What year was Pixar bought by Disney and what movies had Pixar made by then?
 * How much did Disney buy Pixar for?
 * When was Marvel Comics founded?
 * What year did Disney buy Marvel and for how much?
 * What major franchises does Lucasfilm own?
 * How much did Disney buy Lucasfilm for?
 * Discover: Disqus
 * Closing Activity: Take a look at each of your classmate's Bootstrap Project and leave each of them at least one comment. ||  ||
 * 5-7 || * Do Now: Finish your Carousel
 * Activity: Continue to take a look at each of your classmate's Bootstrap Project and leave each of them at least one comment. || Finish carousel for homework ||
 * 5-9 || * Do Now: Browse through the documentation posted on getbootstrap.com
 * Discover: Bootstrap Components
 * Create a new bootstrap page titled components1.html and go down the list of components and choose at least 10 to code
 * The purpose of this is so that you learn how to read the documentation Bootstrap offers so that when you need a component on your future web pages you will know how to look up the component and implement it onto your website
 * Choose at least 10 components to code and give each of them a header with the name of the component. Coding 10 components correctly will earn you a score of an 80%. For each component you code after 10 will earn you an extra 2% each therefore to earn a 90% you will need to code a total of 15 components and to earn a 100% you will need to code a total of 20 components.
 * Closure: Paste the link to your components1.html page in the following document:
 * Components Links ||  ||
 * 5-13 || * Do Now: Prepare for Carousel Quiz
 * Carousel Quiz
 * Closure: Post the link to your quiz in the following document:
 * Carousel Quiz Links ||  ||
 * 5-15 || * Do Now: Read 10 Places Where Anyone Can Learn To Code and answer the following:
 * Have you ever tried any of these sites?
 * How many of these sites are you interested in checking out and why?
 * Activity: Continue working on Bootstrap Components
 * Create a new bootstrap page titled components1.html and go down the list of components and choose at least 10 to code
 * The purpose of this is so that you learn how to read the documentation Bootstrap offers so that when you need a component on your future web pages you will know how to look up the component and implement it onto your website
 * Choose at least 10 components to code and give each of them a header with the name of the component. Coding 10 components correctly will earn you a score of an 80%. For each component you code after 10 will earn you an extra 2% each therefore to earn a 90% you will need to code a total of 15 components and to earn a 100% you will need to code a total of 20 components.
 * Closure: Paste the link to your components.html page in the following document:
 * Components Links ||  ||
 * 5-19 || * Do Now: Finish Bootstrap Components Activity
 * Paste the link to your components.html page in the following document:
 * Components Links
 * Discover: 50 Must-Have Plugins for Extending Twitter Bootstrap
 * Closure: Which plugins were you able to implement? ||  ||
 * 5-21 || * Do Now: Explore Font Awesome
 * Try to see if you can implement Font Awesome's glyphicons onto your Bootstrap website
 * Discover: How to Use Font Awesome
 * Closing Activity: Continue exploring the 50 Must-Have Plugins for Extending Twitter Bootstrap ||  ||
 * 5-23 || * Do Now: Read SBHS Website Project Description
 * Discuss and Plan SBHS Website Project
 * Shared Folder for Project
 * Begin Project
 * Closure: Post your link in the table found in the project description ||  ||
 * 5-28 || * Do Now: Read 'From the Ivy League to the State Schools, Demand for Computer Science is Booming' and answer the following:
 * Why do you think there is such a boom in students pursuing computer science?
 * The article explains that there isn't enough instructors to teach the high number of students who want to learn computer science. How do you think colleges should handle this situation?
 * <span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif;">Discover: Lavish Bootstrap
 * <span style="font-family: Arial,Helvetica,sans-serif;">Continue SBHS Website Project
 * Closure: Post your link in the table found in the project description ||   ||
 * 5-30 || * Do Now: Final Exam Review
 * Discover: WWDC
 * Watch: Steve Jobs 2007 iPhone Presentation
 * <span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; line-height: 1.5;">Continue SBHS Website Project
 * Closure: Post your link in the table found in the project description || Study for Final Exam ||
 * 6-3 || * Do Now: Study for Final Exam
 * Final Exam
 * Continue SBHS Website Project
 * Closing Activity: WWDC 2014 Presentation ||  ||
 * 6-5 || * Do Now: What is a Responsive Grid System?
 * Discuss: Responsive Grid System
 * Introduce: DRY Principle
 * Introduce: loadurls
 * Discuss: Lavish/Contact Conflict
 * <span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; line-height: 1.5;">Continue SBHS Website Project
 * Closure: Post your link in the table found in the project description ||  ||
 * 6-9 || * Do Now: Post your link in the table found in the project description
 * Discuss: Responsive Grid Systems and Navigation Bar
 * Paste links to all the other web pages into your navigation bar
 * Closing Activity: Continue SBHS Website Project ||  ||
 * 6-11 || * Do Now: Fill out the following class survey about this class
 * Web Animation Student Survey
 * Discuss: Tidying Up
 * Check to make sure links to all the other web pages are pasted into your navigation bar
 * Closing Activity: Continue SBHS Website Project
 * Class Project Site ||  ||
 * 6-13 || * Do Now: Take a look at the class project so far - @http://tinyurl.com/WebAnimationSBHSProject
 * You should be proud of yourself for all your hard work. Great job!
 * Fine Tune: Take a look at all the pages and try to find where improvements can be made. Work together to fine tune the project even if it is not your file. Make any necessary adjustments
 * Sharpen Your Bootstrap Skills: When you finish, watch Twitter Bootstrap Tutorial: Responsive Scaffolding pt. 1 - Lesson 1
 * This video series is a great way of understanding Bootstrap's responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
 * Closure: Email the link to your finished Responsive Scaffolding HTML to darryl.mendonez@sbschools.org ||  ||
 * 6-17 || * Do Now: Take a look at the class project one more time - @http://tinyurl.com/WebAnimationSBHSProject
 * You should be proud of yourself for all your hard work. Great job!
 * Fine Tune: Take a look at all the pages and try to find where improvements can be made. Work together to fine tune the project even if it is not your file. Make any necessary adjustments
 * Sharpen Your Bootstrap Skills: When you finish watch
 * Twitter Bootstrap Tutorial: Responsive Scaffolding pt. 2 - Lesson 1
 * Twitter Bootstrap Tutorial: Responsive Scaffolding pt. 3 - Lesson 1
 * This video series is a great way of understanding Bootstrap's responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
 * Closure: Email the link to your finished Responsive Scaffolding HTML to darryl.mendonez@sbschools.org || Good luck Seniors! Keep in touch and enjoy the summer =) ||
 * 6-19 || Exam Week Project
 * Discuss: SBHS Website Project
 * @http://tinyurl.com/WebAnimationSBHSProject
 * Discover: LightBox
 * Create a LightBox (New Link)
 * Ryan's Example || Good luck! Keep in touch and enjoy the summer =) ||

__ **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