animation

clickersrc

clickcover

clickfill

rotation

f Emperor Yves-Olivier

more divs make it weird. smaller circles get really weird because the 1px border screws up the percentages of the circle

circle10

f Emperor Yves-Olivier

Too many oops.

CircleEight CircleFive circleFour CircleNine circlepattern circlepatternthree circlepatterntwo CircleSeven CircleSix layeredpatternOne PatternEight PatternFive PatternFour PatternNine PatternSeven PatternSix PatternThree PatternTwo

f Emperor Yves-Olivier

LeisHo_Assignment4A

LeisHo_Assignment4B

LeisHo_Assignment4C

LeisHo_Assignment4D

LeisHo_Assignment4E

f Leis Ho

3b_master

f Emperor Yves-Olivier

3a_shape

f Emperor Yves-Olivier

ATT

Condom

Gatorade

Lightbulb

wineglass

f Emperor Yves-Olivier

scandinaviafloat

scandinavianpositions

f Emperor Yves-Olivier

FlagAbsolute Flag

f Drew

ScandinaviaFLfloating2 ScandinaviaAbsolute

f Ingrid Nelson

For the remainder of class, either:
1. Put together a one page website that collects your previous work from this class. Have your name, a brief description of the work that is on the site, a nav and a footer. The intention is to have you arrange multiple types of content on a single page, and to build a more complete web page. You may use iframes, anchors, floating elements and positioning as needed.

2. Add content (images, text, etc.) to one of your previous projects. See if you “grow” a design organically from one of your experiments. Content could be “poster-matter”, etc.

—
And as a wrap-up… go to your author page on the website and make sure you have a “Nickname — first name, etc.” at the top of your site. Here is a fairly good example from session 1. make sure also that your work looks good on that page and links to html files and not images.

And look for the course evaluation by email at the end of the semester.

f John

The term “responsive design” refers to a website’s ability to change layout and shape when seen on different sized browsers or platforms. This shift in layout takes quite a bit of planning and thought.

This assignment asks you to create a work that plays with this concept of responsiveness as an opportunity for animation. Make a work that shifts and alters its experience based on the viewport of the browser. You may also introduce interactivity and interactions within the browser itself. However, the focus of the assignment is the “transition” between states. How can you activate/animate/create unexpected changes in those states, as if your perspective is changing in the 3D space

Example

• Media query
• Class example, display none, media query
• More on media queries

Links about “responsive design”

f John

We’ll look at the latest in CSS3 properties, that allow animation and movement in the browser. When mixed with the event handlers of jQuery, the stabile structures can shift properties upon user interaction.

Websites today are often designed with these subtle shifts in elements. We’ll be making more drastic moves, making the animations and interactions a primary part of our experiments. Start on the below assignment after taking some time in class today to get used to how these interactive elements work.

Session 3

Complete the following exercises:

1. On rollover, make an element fill the screen
2. On click, make one element cover another element
3. On click, have two different (visual and actual) elements animate
4. Move an element back and forth across the screen

Sessions 1 and 2

Read the chapter titled “Relations” from Leborg. The author presents an extensive vocabulary of relationships. For example, the terms include: symmetry, balance, groups, coordination and distance.

Make a simple shape and allow the user to change the default relationship in some way. Choose just one type of relationship from Leborg’s chapter for each composition. More than one relationship may occur through your investigation of the one concept.

Title your compositions using the type of relationship that you’re working with. Upload your work to the website and categorize as 5: Shifts in relations.

Examples from class

• jquery_click
• week3_1

Examples of interactions

• Pseudo classes
• Hover
• Translate
• Scale
• Rotate
• Animations

CSS Properties we’ll review

• id attribute
• Pseudo classes
• Transition
• Transform
• Keyframe animation syntax
• Perspective

jQuery events

• toggle, hide, show
• toggleClass

Sample code

• Demo sample library

Resources

• “The most important CSS3 properties explained”
• Library of CSS3 animations
• jQuery api: event handlers
• jQuery basics
• jQueryUI library

Examples

• May 1: jQuery
• May 1: Transition/hover
• May 1: Keyframe animation
• April 3rd jquery example
• April 3 rolloverme
• Distance (+overlapping)
• Coordination (requires more jQuery
• See the work from paper.js

f John

Firstly, make sure your post is categorized correctly (only 4: Patterns).

Secondly, take a screenshot of your pattern and upload an image of each and link to the HTML page.

Thirdly, provide feedback to the person who appears above and the person who appears below you in the web feed. Add a comment to each of their posts. Do you notice anything exemplary or noteworthy in the coding? Any areas of improvement?

Fourthly, we’ll hear from 3 of you up front about what you’ve seen.

Fifthly, download one of your classmates’ HTML and adjust it to make a new pattern. Upload yours into their post at the bottom. Use a screengrab and put a link to your HTML.

f John

Absolute positioning may be ideal for creating a drawing or a simple layout, however it falters quickly when many elements start stacking up. The web, in short, is not about control. This take-home assignment asks you to take specific elements and repeat them to form a continuous pattern. The pattern may be created from the combination of floating elements and positioned elements.

Start by repeating a single element. Consider refining this first step into a single composition. Note the figure and ground relationships that emerge. Expand your work to include more layers and more shapes. Use only one color per layer.

Upload your experiments to a post on this website and categorize it under “4: CSS Patterns”.

CSS Properties from class

• Recursive properties. (see example)
• Combining positioning and float to layer patterns on each other (see example)

Code examples from class

Session 1

Session 2

Sample properties

Refer to some of these css properties to help
Shape reference (week 1)

Additional examples

• John’s pattern (wkshp 3)
• Boxes on boxes
• X-acto repeated

f John

Session 3

Using Allan McCollum as inspiration, we’ll be making unique compositions by combining abstract parts (or bits!) in a single webpage. Read more about shapes on his website.

Part A: Create a square container that is 25% tall (height and width are 25vh) that holds a your shape. Your shape may be one element or several, but it should be completely nested inside your container div and be black and white. Make sure your classes are unique (use your name, etc.). Take a screen capture of your shape, log in to the website and post your shape to the Assignment 3A category. Log out of WordPress when complete.

<!- – Break – ->

Part B: View source for everyone’s composition and bring whichever ones you like (minimum of 10) into a single document. Make a composition made up of 16 boxes, using solid black or white boxes as desirable. Code the fullscreen composition so that it allows you to entertain as many options as possible. Discover compositions in the code and in the Web Inspector. Finish and upload by end of class to website adn assign to Assignment 3B category.

Read recent article about this project on nytimes.com

Sessions 1–2

Create a single abstract shape — a shape that does not need to represent something real (a concrete object). Your shape should be one single HTML element (a div) with a single class of CSS properties. Upload your HTML to the site and insert it into a post as an iframe and categorize that post in the “3A: Abstract shapes” category. Add a link to the HTML file so it’s easy to download. Take no more than 30 minutes to make your shape.

See how far you can push the one shape.

After your shape is uploaded, choose a minimum of two shapes from the class set and create a unified composition. By unified, your elements may touch, overlap or more generally form an aesthetic connection with each other. Your intention is to make one form from your two shapes. How can you create the same tension, dynamism and joy that the printed examples above demonstrate? How does the canvas of the screen house your work? You will likely need to adjust the CSS properties to create a unified composition. Make more than one if you like.

Take a screen capture of your finished composition and upload to the website with a link to your HTML file. Categorize the post as 3B: Abstract Compositions

CSS Properties from class

• Overflow (hidden, scroll)
• Pseudo-classes
• Transform
• rgba color space vs opacity

Sample code (session 1)
Sample code (session 2)
week2_1
Shape example from class

f John

Designer Paul Elliman has been collecting small found objects that resemble typographic glyphs. Whether found on the side of the road, at someone’s house or at the hardware store, the objects are silhouetted at actual size and placed in his project. He calls the monochromatic collection of objects, Bits. The formal language used can be traced to photograms, a one-to-one photographic black and white copy of an object. The photogram effectively makes two dimensional and graphic any three-dimensional object.

This assignment asks you to collect objects of your own, whether in your home, around town, at RISD 2nd life, etc., and draw them using HTML and CSS. Do not choose iPhones or super-common electronics. Hunt around for unique and simple forms — like a band aid.

With CSS3, it is possible to draw non-rectangular shapes right in the browser. You may use any foreground and any background color, but be sure to use only one color for each — thereby working with form and counterform only. You may stylize (simplify) your original object as needed, but the goal is to make a faithful copy of the object. Consider the perspective that you choose for the object. You are encouraged to plan out your drawings in your F&C course notebook first.

Make five drawings using div tags and css classes. Create an html file for each digital bit, and upload your html files into a post on the class website. Categorize your post to the category CSS Found Objects. Place your name in the tile of the post and the names of the objects above or as part of your link.

Goals for the assignment

Designing websites starts with structural thinking — blocking in shapes in the browser. It’s the exact same thinking required needed to establish blocks needed to form these drawings. This process demands that you both plan your shapes in advance (by sketching) and adapt them to the reality of what you are able to code and what you see while you are coding.

Example code for reference

You may make use of these CSS-drawn shapes from Ali

Previous solutions

Examples from last year

Links

Interesting links to check out

f John

Choose one of the Scandinavian countries (link to other countries at the bottom) and construct its flag in two ways: using absolute positioning and using floated divs. Apply the links to both from one post assigned to Scandinavian Flag. The size of the flag is up to you.

Solutions

Float
Position

Links

Positioning support links are here

f John