I cannot offer a rationale explanation why I have spent a chunk of time since Sunday trying to animate a book cover. But I can tell you that once the idea of it materialized in my brain, I could not let it go.

Expect another overly long, typo-ridden blog post of explanation. But for now, go visit https://cogdog.github.io/horton-freire/ and click on either gentleman. A lot.

The quotes that load are derived directly from Adam Croom’s google spreadsheet, which in turn comes from any Hypothesis annonation tagged hortonfreire.

Rather than doing my reading of the book that is the subject of Bryan Alexander’s Not a Book Club Book Club activity on We Make the Road By Walking, the book long conversation between Myles Horton and Paulo Freire.

I did get a lot of reading done on last Tuesday’s flight to Guadalajara, and a few more pages since then. But I keep looking at the cover of the book, the black and white pixelated profile of both men in conversation, and the words on the chalkboard behind them.

In my mind, I could see something digital, where each man might slide out of the frame, making room for a new quote to be seen on the board. This would have been very doable (and quicker) by doing as an animated GIF. That was my first plan. I shared this Sunday while having coffee with Ken Bauer, and I think he suggested doing something more “webby”.

Surprisingly, in looking for good images of the book cover, The Google came up short. The heck with them, I took grabbed a photo of my own book (that I paid for) sitting on Ken’s dining room table, with my iPhone:

My own photo of my own book that I paid for with my own money. So there.

I did some clone brush clean up of the crease on the left, and started to do some orange fill on the top; but in my photo, the orange was not uniform, it was dotted slightly different shades. I looked again, and said to myself, “Self, I bet you can do the background orange and black with just CSS.”

The game was on. I did selections of Horton and Freire, and saved them as individual transparent GIFs (with the limited color range, the file size was much smaller than PNG):

I could see the book sitting on a wood table on the site, so I used a CC0 licensed pixbay image for the background and the awesome jQuery Backstretch plugin to make the image fill any window.

I wanted to get fancy with that background to make the top of the chalkboard tilted at an angle like on the book cover. I found a method in Angled Edges with CSS Masks and Transforms doing a lot of fiddling with the codepen there to get it close to what I wanted.

I set up the background, and then placed the two dudes with absolute positioning inside a div for the black part of the book:

I’ve not done much with CSS animations, and found what I wanted in example 6 from CSS: Animation Using CSS Transforms, where a hover over one square caused another to animate; for my cover I wanted a hover on Horton to make Freire slide off the screen to reveal a quote; and to make a hover on Freire make Horton move out of the way.

But try as I could, I could not reproduce what the demo. You gotta know doing this stuff when to bail. Or when to stop and eat or sleep. I cannot say I do the latter well.

This is where I looked at and pilfered several sites to make it work. I ended up using jQuery animate functions to move them off stage left and right, adding a class of “visible” when they were on stage and removing it when they are off (so I know their state). The hover got tricky too, so I figured a click was fine.

But I ran into blocks again, because no matter what I tried, the locations of both images seemed to be reading on the left side, even though Paulo was positioned on the right.

I went for brute force; rather than making events as clicks on the images, I am trapping for clicks on the div than contains than (class=book), and using some math to figure of the click was on the left or the right.

It’s not elegant, and there are some weird cases where it is getting the event to move the dudes when it should not, but I am leaving that for another year. If anyone really wants to do it better, you know where the fork drawer is.

The words that appear are in a div with an id of writing and later I added some jQuery CSS mods to put more padding on the left side when Paulo slides off (so the words are not hidden by Myles) and likewise the other way. I did not have the json feed from Adam’s data set up yet, I just lumped all those quotes into a static array, and made a function getquotes() to put them on screen.

I have never done any fetching of data from google spreadsheets via json, and I keep finding stuff that was more complicated than I needed. But I know a dude that does it all the time, so I asked Tom Woodward for a lift, and he did it in like 5 minutes.

Later I got fancy and turned some his code into functions, but it was all there. When the page loads, it gets all the quotes that are currently in Adam’s spreadsheet (as people tag more, the quotes will grow). When either guy is clicked, the other moves out of the way, and a random quote is put on the screen. If the same guy is clicked again, the dude comes back, and behind them I slap together two quotes to fill the space.

It was working, but looked pretty tiny on a mobile screen, so I banged away more on CSS to use percentage sizing for divs and stuff. It seems more flexible, but the way things work together is a bit complicated and/or stuck together with duct tape. I more or less kep pounding different numbers into the Chrome Inspector until I got the layout I wanted.

So it is one HTML file, one CSS style sheet, two JavaScript files, and 3 images, and all running from GitHub. It’s all there for the pilfering or the laughter at my chops.

So what does all this have to do with the ideas in the book? Probably not much. But it’s pretty neat, and I pushed a whole bunch of jQuery and CSS stuff I have never done before. That too is a road made by coding (or tossing variables around until it sort of works).

Maybe a next step would be to make the text or a button link to the annotation URL that is in Adam’s spreadsheet… Oh no, it’s late enough, Self, stop it.

Time to get back to reading.

Tomorrow.

The post "Animating #HortonFreire: We Make the Read By Annotating" was originally zapped with 10,000 volts and declared "It's ALIVE" by Dr. Frankenstein at CogDogBlog (http://cogdogblog.com/2016/12/we-make-the-read-by-annotating/) on December 12, 2016.

14 Comments

  • Maha Bali

    Such coolness ;)
    I tried it and ur all so cool ;)

    On Android their faces overlap some of the quote text but i am sure it works well on PC.

    While I don’t plan on coding anything similar any time soon, just watching you all do things like this is inspiring. So many ways to read together…and you just gave Adam Croom’s thing a cool interface

  • iamTalkyTima

    But when I read this about three times, I didn’t see any animating one anywhere in it. Do I have to go to another place address to see the men talking?

    Because it sounds like a cool one, and so I want to see it!

    • Alan Levine aka CogDog cogdogblog.com

      There is a thing on the computer that you move around with called a “mouse”. It has a “button”. Move the “mouse” until it is over one man, and press the “button”. On your little phone, you may have to use you finger.

      • iamTalkyTina

        Well, I tried poking the man with my finger, and I even tried to push and pop them but nothing happened on my little phone. I will try the mouse trick next. I bet that one will work.

  • Sandy Brown Jensen

    Okay, you are officially amazing!

  • Bryan Alexander

    What fun!
    Thank you for diving into the creative and technical details.

  • Adam Croom

    I’m thinking more about building as a way of processing or as a way of contributing. It certainly two ways in which I’ve tried to be involved in the chat. Lending knowledge and my skills in ways which are unique to me.

    It also gives me an opportunity to be exposed to new ways of presenting information which is fun and challenging. Once you did this, I actually got @hortonfreirebot to be tied to the same spreadsheet you are using. Before that I was just using static content. And that’s the first time I’ve used a Google Script to call a separate Google Spreadsheet. That’s one win for learning.

    I’m thankful you put this on GIthub too because I want to peak into the code and see how you used JS to call a public spreadsheet. Super creative Alan!

    • Bryan Alexander

      “building as a way of processing” – that’s a slogan we can live by. It’s a great example of constructivist pedagogy. Heck, constructivist learning. Making stuff to mentally process what we’re thinking through.

      “building as a way of contributing” – another slogan! Because now we get to the differences digital networks afford to learning. You make something *and* share it into a learning community.

      • Maha Bali

        I think constructionist is the more accurate term, implying learning by making (vs constructivist which usually refers to how your mind constructs knowledge, rather than using making to construct knowledge…) a la Papert :)

        This is delightful to watch. What a phenomenon you have started Bryan :)

    • Alan Levine aka CogDog cogdogblog.com

      My method for figuring that out was to ask Tom Woodward for help’

  • iamTalkyTina

    Well, it is always a fun time to build contraptions, like the kind that help with your thinking. I made some good contraptions back in the old days to help people get their ideas out and for sharing?

  • Bryan Alexander

    Good distinction, Maha.

    And thanks. This is a very exciting project.

  • No, sir, but I ain’t lost! | Network Effects networkeffects.ca/?p=2279

    […] Google Docs + Hypothes.is mashup via: @cogdog & @acroom […]

Leave a Comment

All fields are required. Your email address will not be published.

Creative Commons License
Animating #HortonFreire: We Make the Read By Annotating by CogDogBlog is licensed under a Creative Commons Attribution-Share Alike 4.0 License.