Today’s goals:

1. Explore presidential candidate digital campaign challenges
2. Start learning about creating web animations with CSS

 Today’s featured app:

• https://www.thisappsaveslives.com/ – Earn rewards by ignoring your phone while driving. Also see: MA new hands-free law . Extra: teen boy creates website to track coronavirus (article link  and website link )

 Presidential Candidates and Digital Campaign Challenge!

• The Candidates and Getting Information
  Who is running for president? How do you know?
  Where would you go if you wanted to find information about the candidates? What would influence your information choices?
• Candidate Websites
  https://www.donaldjtrump.com/
  https://joebiden.com/
  https://www.mikebloomberg.com/
  https://berniesanders.com/
  https://elizabethwarren.com/
  What are your thoughts, observations, or reactions to any of these sites?
• Digital Challenge Time
  1. Intro video: Let’s watch this video about political memes  before diving into some real world scenarios below (you will be broken into small teams and assigned a challenge).
  2. You’ve been hired by Donald Trump’s campaign team to improve his Google Search results.
     Do a Google Search for Donald Trump and look at the first page of search results.
     Notice what the very first result is, the order of the results, and what comes up on the first page.
     What search results are under your control?
     Are any key sites missing?
     What recommendations would you make to Trump’s campaign for improvements?
  3. You’re a reporter for The New York Times covering presidential campaign news.
     You’re looking into a photo that’s gone viral on Twitter and across the internet that is potentially harmful to Joe Biden.
     Read this brief article  about photo manipulation (just that section) and find out what tools you could use to help determine whether the photo is real or fake.
  4. You’re the Digital Director of Joe Biden’s campaign and just saw a Facebook ad with false information about Biden.
     How do you respond?
  5. You’re a bored internet troll looking for outrageous memes to share.
     Find one anti-Trump and one anti-Biden (these must be PG rated or lower- nothing vulgar, no swears!)
     See if you can find either the creator of the memes and/or the original source of the meme. For example, the meme video showed us the Brazilian actress whose image became the confusion meme .
  6. You’ve been hired by a consulting firm to come up with ways to reach voters online.
     What sites or apps do you suggest and why?
• Closing Question:
  How can you verify information you see online (or inside apps)?
• Useful Tools to Fight Misinformation
  Tools to vet fake news techniques
  Check your news blind spot
  PolitiFact (fact-checking website with a fun liar-meter)

  Animation Showcase

• Subtle animation
  • https://www.smashingmagazine.com/– changes on hover
  • https://www.7up.nl/7up– bubbles
  • https://fournier-pere-fils.com/home– birds, tree, light
• Not-so-subtle animation
  • https://yourplanyourplanet.sustainability.google/
  • http://www.mikimottes.com/
  • https://eatgenesis.com/
  • https://codepen.io/brettmitchell/pen/KWwgQo
• Other examples: can you find any?

 About CSS Animations

• A CSS animation is basically when an element changes styles over a set period of time.
• Animation basics: the @keyframes rule  and the animate property . These are used together to create animations with CSS.
  • @keyframes  is the CSS rule where animation is created. Think of @keyframes as being stages along a timeline. Inside @keyframes, you can define these stages, each having a different style declaration. @keyframes has to be linked to a CSS selector in order for the animation to work.
  • The animation property  is used to call @keyframes inside a CSS selector. Animation can have multiple properties (name, duration, iteration-count, etc.)
  • @keyframes controls the CSS style changes while the animation property controls how long the animation takes place, speed, etc.