See Hugo's project description.
Check out her animation here. This is how she does it:
- reads the number of signees using
- adds this number to the page using a php echo
- reads the number off the page using jQuery .text();
- calculates her petition progress and sets the width of the progress element using jQuery .css( )
- the progress bar animates using a 3s transition on its width
Here's the relevent php code:
$haveSigned = mysqli_num_rows($results);
<span class="goal-number" id="haveSigned"><?php echo($haveSigned);?></span>
You can see the .css and .js by using view source.
Wednesday, April 5th, 4-8pm
at My Private Loft, 9 Ste-Catherine East, suite 101
Vernissage details & student portfolios
Unit 2: Web Animation
Create an animation using the techniques you have learned in the animation unit.
While you can do anything you desire, here are some ideas:
- improve the interface for your petition, animating the display of your results, the form & the buttons / responses
- animated web gallery of your own photos / photoshop designs
- animated infographic sharing your own knowledge / expertise or experience
- animate anything you want
Before you start coding, please do the following:
- define the goal or raison d'être for your animation
- do some sketching / planning
- share your ideas & sketches / plans with a classmate and get some feedback
- try to tell a story, create a mood, elicit a reaction with your work
- use the skills & techniques we have learned in class, or check with me before using other techniques
due: April 19 / 21st ??
project 2 rubric
Check out some animations.
Use js to trigger animations.
due: end of today's class?
Create a keyframe animation.
This can be anything, something simple like mine, or a more complicated scene.
Add to or link from your /webtech homepage.
due: end of week 8 i.e. March 8 / March 10
Use keyframe animations to manipulate the timeline
Check out the video & code:
Read & comment on some animation articles.
- Respond to the Nick Babich article. (today in class)
- Read another article on animation, possibly a link from Babich's article, or something else you find on my Twitter feed or through an online search. (complete for week 6, i.e. March 1 / Feb 24)
- Read & comment & link to an article from one of your classmates. (Due end of week 7)
Add to or link from your /webtech homepage.
due: end of week 7 i.e. March 8 / March 3
You will learn a number of animation techniques in this unit including:
Added links to above!!
Unit 1: Creating a Website with a Framework (Bootstrap 4)
exercise 1.2: customize your site
Apply what you have learned in weeks 1-4 to customize your site.
- apply some built-in classes such as .text-center .lead etc
- add some components such as a navbar, modal, card
- customize your type with Google Fonts
- customize the CSS by adding your own .css file
due: end of week 5
for week 4: customizing bootstrap
No video this week. Just a grab bag of thoughts, techniques, resources and some code snippets.
A shorter list of my most common classes
- .img-fluid (images resize proportionately to fit container. formerly .img-responsive
- .text-center, .text-left, .text-right
- .justify-content-center, .justify-content-left, .justify-content-right
- .lead (creates a lead / first paragraph style. See "No video this week..." )
- .bg-faded / .bg-inverse (for faded or dark backgrounds on almost anything)
- .btn (to create a button out of almost anything)
- .btn-* / .text-* where * = primary, info, success, warning or danger
And some handy layout and component classes
- .col-sm-6 (where sm, md, lg + 1-12)
- .nav & .navbar (lots of options)
- .card (lots of options)
project 1: webtech homepage
Your homepage may include
- a front-end framework (such as Bootstrap)
due: this will be an ongoing assignment
week 2 resources
Customizing Bootstrap 4 with images & example templates
Bootstrap 4 images & examples video
week 2 notes (Friday)
exercise 1.1: site setup
Set up your webtech site / homepage. It should include the following:
linked at student####/webtech/ (check link from student list)
some branding / slogan / factoid
nav to link to assignments
link to some work from last semester
at least one image
link to social media
use Bootstrap or Foundation or similar to make your site mobile first and responsive
due: end of week 4
Here are some resources to help you complete exercise 1.1
section 01: Wednesdays 9-12
section 2: Fridays 11:30-14:30