Simple Creative Visual Words
I just created this website banner using it. I first discovered this tool when I was working on a research project on the evolving nature of text from the static page to the dynamic, visual, and interconnected use of language in online contexts. At first, I thought it was a large scale collaboration drawing from all the Flickr users with alphabet uploads, but I discovered that they all link back to Leo Reynolds‘ account who has almost 5000 followers and over 160 thousand images uploaded. He’s using a Creative Commons license with some rights reserved, making it non-commercial and with attribution.
I love the concept of creating visually interesting words or phrases using images that have been uploaded to Flickr. Each letter links back to that image on Flickr.
I took a clipping (screenshot) of the title so that I could use it as an image. If you take a screen shot, then you should provide the source information somewhere in your post. Note that all the links are in the code snippet! I used a couple creative effects on it as well to bevel the edges and create a shadow.
The tool is very simple to use, but it has very simple options. You cannot ‘go back’ if you accidentally tap the letter or on any of the letters inside the “On Flickr” box after you had what you wanted!
- Go to Erik’s simple but brilliant “Spell with Flickr” webpage.
- Type a word or phrase in the search box.
- Tap on each letter in the row above the “On Flickr” box until you find the one you want to keep. (Then stop and carefully move to the next letter!
- When you are done, you can copy the code and embed on a webpage, in a blog post, or on a wiki.
Now if I just lost you with the word ’embed’ hold on a sec’ before clicking away! It’s actually not that hard and it’s a great simple task for introducing your students to embed code. It can be good for you too if you use a virtual learning environment, website, blog or wiki with your students. You can embed numerous online objects, like videos, polls, audio clips, a slideshow, etc. More on that down below.
#1 – Create a Visual Representation of Your Name
The idea here is to get students to think about the elements and principles of art by choosing letters that relate to one or more aspects of their personalities. You could use the Project ARTiculate website as a resource to teach or refresh students on these concepts. After they design their names, instruct them to copy and paste the code into a document (to use in a future step), and write a brief explanation of how they think it captures their personalities. Next, they write a blog or discussion post that includes their embedded name and their explanation. I always emphasize the importance of writing a specific title, i.e. Sometimes Quiet and Thoughtful, that gives a sense of what is in your post. If you are not yet using online discussions or blogging, it is worth delving into it. You see a whole different side of some students when you ask them to write about it in a public forum, i.e. your class. Always ask them to respond to their peers and to respond to anyone who comments on their post. Be specific, i.e. Respond to two of your peers and anyone who responds to you!
#2 – Represent a Theme
This is similar to the first idea, but you are asking your students to choose a poem, short story, or novel theme, and represent it. You would still discuss the elements and principles of art to get them started. Then have them design the theme word by selecting the individual letters, copy and paste the code, and write the explanation. They should also be asked to give 1-3 examples from the story source to explain the theme. Post in a blog or discussion. Respond to peers.
#3 – Represent an Emotion
You could let them choose an emotion or assign a different emotion word to each student. Maybe you choose more specific emotions than they may have seen before to take this opportunity to expand their vocabulary and give them words to describe how they are feeling. Follow the same process as described in #1 and #2 but asking them to provide the definition and how they think this representation captures the meaning.
21st Century Competencies
In Ontario, there is a draft discussion document 21st Century Competencies that describes six skill areas that we would like all students to develop. There is a plethora of documents on the topic, ironically,—you know, instead of joining the global collaboration New Pedagogies for Deep Learning that includes the six C’s. I hope that we move in that direction in the future.
How using this activity relates to the 21st Century Competencies:
#2 – Creativity – Enhances a concept or idea
By representing personality, theme or emotion with the letters of that word, learners are enhancing an idea. Symbolism of any kind is a critical thinking activity that enriches one’s imagination and creative intelligence.
#3 – Self-Aware
The name activity has students reflect on their personality and this personal analysis encourages learners to know themselves better. As well, if you have learners choose a word that describes how they are feeling, they are also learning something about themselves.
#5 – Communication
Each of these activities involves writing, using media, and a meaningful digital tool (blog or discussion forum). They have the opportunity to voice their opinions about the visual representation of different words. This competency leads into #4.
#4 – Collaboration
Learners are communicating in the blog or discussion forum, seeing how other students represent themselves, emotions or themes using these visual words. By having them respond to each other, they are actively engaging in conversation online. In a class discussion, you only hear from some students and often the same ones that are comfortable speaking in front of their peers. Everyone’s voice can be heard!
Note: See page 56 of the document for the quick chart of the 21st Century Competencies.
Add Embed Code
There are so many videos on how to do this in different platforms, so I made a YouTube playlist—and wait for it—I EMBEDDED IT here! The main idea is that you copy the code and then paste it on your webpage. How or where you paste it might be slightly different in each platform, but the general concept is the same. In WordPress, you would switch to the “Text” tab, paste it where you want it, and then return to the “Visual” tab to see how it will display. If you are working in a course management system, they will have a button in the wysiwyg HTML editor, for example, the D2L platform has an “Insert Stuff” button where you will find the embed option. I love using embed to improve the user experience. If you are always navigating away from your lesson, then you chance losing students since it disrupts the lesson flow.
You will see that there are more shared programs on his website. He writes code, shares it on Github —which is a platform for sharing open source code—, and has a ‘donate’ button for those who would like to voluntarily donate. It is like saying you value the person’s work and want to show a little support for what was created or future projects. If you browse through his posts, you may find something else you like.
I just started following Leo after discovering his work through Erik’s application. He has beautiful photographs! The licenses for use vary from image to image, so make sure you check the copyright on each before using. If it’s for an educational purpose, you could always send him a message to tell him how you want to use it for a non-commercial purpose and he might give you permission. It’s easy to message within Flickr. You will have to create an account first, but it’s worth it as Flickr is full of images with Creative Commons licenses!