Tour Japantown PDX with StoryMapJS and JuxtaposeJS

Northwestern University Knight Lab has produced some great free storytelling tools. I’ve previously posted about comparing images using JuxtaposeJS. It's great for telling then and now stories when you have a good balance of continuity and change. Here’s a example of frame comparison I made using the tool. Use your mouse to grab the slider and move it up and down.

It shows one of Portland's Japanese owned/managed hotels back in the heyday of Portland's Japantown before the forceable removal and incarceration of its citizens during WWII. More on how to create with JuxtaposeJS

Another KnightLab tool is StoryMapJS, a free tool to help you tell stories on the web that highlight locational content. I've been playing around with StoryMap and thought it might be fun to see if I could embed JuxtaposeJS sliders into a StoryMap. I think the integration worked well - though it is better viewed from this direct link on your desktop / mobile device than in the embed below. (This embed messes a bit with the size of the feature photos.) As you go though the tour you'll see I used a mix of static photographs and image blends I made with JuxtaposeJS.

I had lots of great content from my multi-touch book Portland's Japantown Revealed. It featured engaging then / now photo widgets that allow the user to "paint" history into contemporary photos with a wipe of their finger. So I reused the then / now photo comparisons using the a different tool - JuxtaposeJS and then used them for image content in the StoryMap. Note: Historic images are supplied by Oregon Nikkei Legacy Center. I took the contemporary photos.

Backstory:  I was scheduled to visit Marisa Hirata's 3rd graders at Portland's Alameda Elementary School. Students had been researching Portland's Japantown and had already designed a "shoebox" replica of the community. For my visit, I created this StoryMapJS "tour" and the students used each stop as writing prompts.  This StoryMap was great for helping students to visualize how people's lives were lived in Portland's thriving pre-WWII "Nihonmachi."

Collaborating with iBooks Author

I’m pleased to be a member of the Apple Distinguished Educator Class of 2017. At next week’s Houston conference, I’m going to give an iBooks Author workshop on how to manage collaborative book design. Here’s some of what I’ll share. You can find more info at this resource site Get Started with iBooks Author

If you’ve ever worked with a group of students in a computer lab you know how much time can be lost while they explore fonts and other design elements. For greater efficiency I first guide the students through some template options while we explore sample multi-touch books. We arrived at consensus and I pre-loaded a template chapter into each work station.

iBooks Author does not presently allow for multiple users to collaborate on the same file. So when I work with students, I have them all work on individual chapters (or sections of chapters) all using the same iBA theme. They share their completed chapter file with me via shared drive. I copy / paste their chapter into one final collaborative iBA file.

Note: Glossary entries cannot be copied and pasted from one file to another. So if students plan on adding glossary to a collaborative project, that will need to be done in the final compilation file. Likewise students should not reference individual page numbers in their chapter contribution, those will change in the final compilation file.

Click this link for my iBooks Author YouTube Playlist

The computer lab is for production not planning. I staged a series of assignments that all folded into the development of a finished iBook. For example, I asked students to write a blog post reflecting on what they learned from developing their chapter. That reflection later became the concluding section of their iBook chapter. By the time we were heading to the Mac lab to get started with iBA, they had their chapters finalized with all the content for their iBook chapter stored on a drive – including all image / sound / text files, citations and URLs. Students were able to copy / paste all their content into their iBook chapter in only a few hours of lab time. iBA Tip: If you don’t have a Mac / iBA station for each student, you could have a production team transfer the work of their peers into finished form. 

If you’ve every worked with a group in a computer lab you know how much time can be lost while students explore fonts and other design elements. To maximize our lab time, we discussed some template options while we were looking at other sample iBooks. We arrived at consensus and I pre-loaded a template chapter into each work station.

Chapters and sections of chapters can be easily re-arranged in an iBook. Just highlight them and slide to new location. You can also right click a chapter or section and cut, copy, duplicate and paste. You can even use those commands to move them between two different iBA projects that you have open. BUT moving pages is not allowed. Any new pages you add to a chapter (or section of chapter) appear at the end of the chapter (or section). That’s not a problem if you are editing flowing text. It is a problem if you are using blank pages with many objects. In that situation, you can select / all images on a page. Copy them and paste them on a new page.Fortunately images, widgets and shapes can be copied and pasted to new pages. They can even be copy / pasted from one iBA project to another.

Since it’s difficult to rearrange pages, have students create a first draft in Apple Keynote (or PPT, Google slides). They can create a rough approximation of each page and note any media that might accompany text.

One common problem for students is not messing up their chapter image. Each chapter opener has a placeholder to drag an image into on the page build. If you do that, you will see the image when you view the full page and see the image (in strangely centered display) in your Table of Contents (TOC) view.

If you delete the placeholder and simply import an image into the start of the chapter, you will see the image in the full page, but it will be missing from the TOC view. Once you have done that, I have not found a way to restore the image placeholder. (For example when working on a recent student publication, a few students deleted the placeholder and the only remedy was to rebuild the entire chapter. Grrr) If you start messing with the image in the TOC view, you will find that whatever image you insert into Ch 1 (for example) will become the image for every other chapter.

Students need to be careful entering titles of their chapters (or sections). If you click on the “Untitled” placeholder text you’ll see a blue line around it. (red arrow – right) That signifies that the chapter title will be repeated in the TOC view. If students accidentally delete that text and blue line, then any title that add will not appear in the TOC view. I tell students that the safest way to create their own chapter title is to change the title in the page view on the left. Tap on the “Untitled” and it will become active and editable. (red arrow – left). That title change will also appear on the chapter title page.

Unless you’re creating a largely text-only iBook, I find that chapters with flowing text are much more challenging to manage. Inserted widgets and images have a habit of repositioning as text is edited or deleted. Therefore I tell students to insert “Blank Pages.” That allows them to add widgets, media and text boxes with full control of the page. Note that even though the “Default” page looks blank, it isn’t. It has flowing text which will link to adjacent pages.


Remind students to clean up any of the placeholder font that iBA inserts into widgets. iTunes will not approve an iBook that contains any placeholder text. (“Lorem ipsum dolor sit amet, donec ornare vitae…”)

A great feature of iBA is the ability to copy and paste styles. It works with text, images, shapes and widgets. Those options are not part of the default toolbar. But if you right click the toolbar, you can add them to your custom toolbar.

Acceptable file formats for iBooks Author

Note that you must have the actual image file to import into iBA

  • Image files: JPG, JPEG, PNG, GIF Note: The recommended file format is JPG. If the image includes transparency, PNG is recommended.
  • Video and audio files: MP4 video files and M4A audio files. Note: For the Media widget, you can add a video file or an audio file (in a format QuickTime supports) to your book. You can convert other types of files using iMovie, QuickTime Player, or Compressor.
  • As an alternative to loading the actual video we can use a YouTube embed widget at Bookry to embed a video viewer into the iBook. Here’s a how-to video for creating Bookry widget and embedding in your iBook.
  • Keynote  presentations are fully functional in iBooks Author. These presentation could have animated features through use of slide builds and transitions.

Sharing individual chapter of collaborative books. I typically have each student export their individual chapter as a PDF using iBooks Author’s built in export tool. Then we upload the PDF version of their chapter to SlideShare. Students then use Slideshare to embed a viewable version of their chapter in their final reflection post on the publishing project. See samples from our class WordPress site here. Note: While the chapters are static PDFs, it does create a showcase of their iBook chapter for viewers without Macs, iPads or iPhones. It also serves as searchable source for their individual topic.

Kept it Simple: My 2017 ADE Application Video

I just found out I’ve been accepted in the Apple Distinguished Educator Class of 2017. I’m very excited to network with other ADEs and promote my favorite teaching tool – iBooks Author. Once you get past the pre-required Apple Teacher Certification (ugh … I don’t use Garage Band), the ADE application has two main components – lots of forms to fill out (easy) and your application video (hard).

I thought I might share my video production workflow to demonstrate how you can turn a seemingly daunting task into something that’s very simple.

  • I brainstormed a list of 3- 5 accomplishments that demonstrate why I should be consider for admission to ADE.
  • I put each item on a Keynote slide.
  • I used the Keynote “Play/record” slideshow feature to give a brief narration over the slides. (Your video can only be a maximum of 2 minutes, so this gives you a good idea of what leave out). In ended up with 9 slides in my final version.
  • Once I had a sense of timing. I worked on images to illustrate each point. I used QuickTime player to create two short video clips which I embedded in one of the slides.
  • I used very minimal style – solid black background and no transitions between slides.
  • I practiced a few times to get the slide timing down and to be sure I could deliver the slides in under 2 minutes.
  • I found a quiet spot and connected a decent external microphone to my laptop. Then I made a finished recording of the slide show. (All you can do is erase a recorded slide show and do it over. So when I got one I liked, I kept it.) It wasn’t perfect. I had a few minor hesitations, but after 4 or 5 tries I wasn’t getting much better.
  • Keynote has an export feature  – “File / Export to / Quicktime.”  I chose the “Custom” format and used 1024 x 768 H.264
  • It produced a very nice m4v video file that I used for my ADE application.

Tell Then and Now Image Stories with JuxtaposeJS

I’m excited about JuxtaposeJS – a new free web-based “storytelling” tool from the Knight Lab at Northwestern University. As they describe it: “JuxtaposeJS helps storytellers compare two pieces of similar media, including photos, and GIFs. It’s ideal for highlighting then/now stories that explain slow changes over time (growth of a city skyline, regrowth of a forest, etc.) or before/after stories that show the impact of single dramatic events (natural disasters, protests, wars, etc.).”

I think it’s a great tool for students and teachers who want to explore themes of continuity and change. While it could be used to compare and contrast in subjects across the curriculum, I’ve created a few examples using historical content.

I selected pairs of historical and contemporary images with elements that are consistent and aspects that change. But the challenge is to size and crop the images so that the consistencies align. To accomplish that, I used another free tool – Google Slides – to position and crop each pair of images and export as JPGs before importing into JuxtaposeJS. (Scroll to the bottom of this post for my workflow video that illustrates each step of the process.)

Created with two archival photographs
Tom Torlino – a student at Carlisle Indian School, 1882 and 1885.
More about Tom at my post on Medium.
Pro tip: get the eyes aligned


Timeline sliderCreated with archival photograph paired with a screenshot I took from Google Street View.
Portland Ore Engine No 2 – 510 NW 3rd Ave.
Pro tip: choose a historic image that is shot from an angle similar to Street View. Street View is made up of a series of still images. You may need to navigate slightly on the street to get a shot that matches. Street View has been shooting for years. Use the drop down timeline (highlighted here) in upper left of Street View that has the angle and lighting that works best for your Juxtapose

Archival photograph of paired with photograph I took in the same location.
Taylor Hotel entrance Circa 1920
Pro tip: bring along a print out of historic photo to line up you new shot. Maybe you’ll get lucky (like I did) and find a SUV parked in the right spot. 

Here’s a video that details my workflow for this project
You’ll see how I used the transparency feature in Google Slides to create two well-aligned images that I imported into JuxtaposeJS via Dropbox. JuxtaposeJS supports both vertical and horizontal sliders. Pick the orientation that does a better job of concealing or revealing the continuity and change. Once the images are “published” at JuxtaposeJS they can be imported into your web via an iFrame embed as I have done in this post.

Image credits:
Tom Torlino
Portland Ore Engine No 2
Taylor Hotel Entrance. 347 SW 3rd Ave Portland Oregon Courtesy of Oregon Nikkei Legacy Center ONLC 533

Where I’m From: Using Haiku Deck to Visualize Place

Where-Im-fromHere’s a lesson I designed for use in my University of Alaska Southeast summer course – ALST 600. I’ll be working with nearly 40 preservice teachers in the secondary MAT program teaching Alaska Studies using a place-based approach that integrates good instructional practice and free ed tech tools across the curriculum. For more on this lesson click here

This lesson features a poem as a prompt for a creative reflection. It also integrates two tools for presentation of the reflection.

  1. After reading Where I’m From, students will use Haiku Deck to design a brief presentation that uses text and images to depict “where they are from.” The presentation should include a a title slide plus 6 slides which explore the place you’re from. Follow this link for ideas on Where to Go with “Where I’m From”
  2. After completing the Haiku Deck presentation, students will create a blog post that includes an embedded version of the presentation and a written response to the question:

What have I learned from this activity and how might I use the learning strategies and / or technology in my teaching placement?

Where I’m From” by George Ella Lyon

I am from clothespins,
from Clorox and carbon-tetrachloride.
I am from the dirt under the back porch.
(Black, glistening,
it tasted like beets.)
I am from the forsythia bush
the Dutch elm
whose long-gone limbs I remember
as if they were my own.

I’m from fudge and eyeglasses,
from Imogene and Alafair.
I’m from the know-it-alls
and the pass-it-ons,
from Perk up! and Pipe down!
I’m from He restoreth my soul
with a cottonball lamb
and ten verses I can say myself.

I’m from Artemus and Billie’s Branch,
fried corn and strong coffee.
From the finger my grandfather lost
to the auger,
the eye my father shut to keep his sight.

Under my bed was a dress box
spilling old pictures,
a sift of lost faces
to drift beneath my dreams.
I am from those moments–
snapped before I budded —
leaf-fall from the family tree.

Posts navigation

1 2 3 4 24 25 26