Creativity and Code

The third class of multimedia storytelling design is focused on what I call creativity and code. Continuing the focus on Snow Fall, the class reading for today is How We Made Snow Fall. That last link is a really good article, worth reading closely.

Creative thoughts from the how Snow Fall is made article:

• Making a single story out of the digital assets….”to weave things together so that text, video, photography and graphics could all be consumed in a way that was similar to reading–a different kind of reading.” Talk about the origin of the word text…Latin…to weave (see Latin dictonary)
• The design process: initial prototyping, collaboration, integration of graphics and video into “the narrative experience”
• “a lot of trial and error and experimenting”
• “design revisions and tweaks”
• filmmaking techniques, but reading centric
• “We focused on the pacing, narrative tension, and story arc–all while ensuring that each element gave the user a different experience of the story.”
• moving images…pauses at “critical moments in the text”
• “Having a tight edit that slowly built the tension of the narrative was the overall goal.”
• Color palettes
• Biggest challenge: “managing the path we wanted the reader to follow”

Much of this class period will be getting students to do HTML hands-on. We’ve talked a lot about HTML in the first class and looked at a lot of HTML code, but I want to get a sense as to how far the students are coming along with actually doing something with HTML. I suspect not far.

Some thoughts on topics to cover in today’s class:

• Have the students open up the W3schools site. A good reference source for tags. But, also, for those new to HTML: the try it yourself  online editor is an extremely simple way for seeing how tags work.
• Tell students about lynda.com. Not required for this class but a great resource for learning on your own. In future versions of this course, I might think about requiring lynda.com access rather than a book.
• What is a plain text file? Contrast with binary files using machine code and with WYSIWYG document editors. What’s a text editor? A code editor? Try opening a binary file in a text editor.
• File extensions. Nice to show those extensions in Mac OS X (Finder>Preferences>Advanced>Show all filename extensions.

I had a student email me with a problem in getting an HTML document display in the browser as a Web page. Instead, the page simply showed the HTML code. The problem was that the student followed the instructions in the Duckett book and used TextEdit on the Mac to create the page. TextEdit, being a rather confusing software program for writing HTML, saved the document as RTF (even though the student had correctly added the .html extension). There’s a non-intuitive option within TextEdit for saving as plain text.

For this class I’m recommending the use of Atom, which is already installed on the iMacs in the journalism lab. But make sure that students know how to install this on their own laptops.

• Do students understand that a website is a directory (i.e., folder) on a server?
• Create a basic web page in HTML. Perhaps by just copying over what they had done in the w3schools try it editor.
• Save the page as index.html…as a way of introducing the importance of index.html as a filename in web site directories. Stress, though, that not any directory can serve web pages. You need a directory that is associated with web server software. In the next class we will look at actually uploading the pages to a server.
• Play around with HTML. Go over again the head and body. Title. H# tags.
• Introduce lists and links.
• Relative and absolute URLs.
• Talk about text formatting (non-CSS).
• Take questions.