Description

In this online activity, learners consider how they’d like to represent themselves on the web. They get a crash course in the Thimble web development tool and use what they’ve learned in the previous two activities on HTML and tagging to remix a template into their own personal homepage on the web. This lesson revisits the concepts of web hosting, domain names, and urls.

Learning Objectives

• Explain the difference between different web applications.
• Create a web page using Thimble web application.

Time Required

45 minutes to 1 hour depending on group size

Audience

Can be tailored for audiences from 13 up; with varying levels of experience with the web.

Materials

• Laptop with internet connection and ability to project on a screen

Web Literacy Skills

• Code
• Compose
• Remix
• Revise
• Design
• Share
• Open Practice

21st Century Skills

• Communication
• Collaboration
• Creativity

Earning Digital Badges

Digital badges capture the evidence and are the demonstration knowledge and achievement. Each Core Activity encompasses multiple web literacy skills. Completion of all Core Activities will enable anyone to earn all web literacy plus 21C skills badges. Thus, we encourage you to complete all the Core Activities, and earn badges to capture what you’ve learned. Digitalme is offering web literacy badges through the Open Badges Academy.

Introduction

[5-7 min]

• Frame the activity by explaining that some websites are quite different than others. Some are simple; others are more complex. We can divide websites we use into two broad categories:

  Tip! It is recommended to first have users complete the “Building Basic Pages” activity.

• 1st category: websites where you can access static information.
• These websites might not change much over time.
• As a user, you can’t do much to change the content site or how it works for you.
• Lots of the earliest web pages were like this.
• Ask learners, what are examples of static pages? Think of sites that don’t have new content often, or ever. Or sites with very few pages.

  Tip! Examples might be DMV site, small restaurant, etc. These websites are designed primarily to convey information.

• 2nd category: websites where, as the user, you can do something like create an outcome or change by using the page.
• These are websites you use to make something happen.
• You might create or share something, or do something to change what content is displayed, or provide information in order to complete a task.
• Ask learners, What are examples of websites like these? What’s the last thing you did on the web?

  Tip! Examples might be a public library’s website where you can search for and reserve books and other resources. Or any web mail client like Gmail, Yahoo mail, hotmail, or instant messaging services. Shopping sites, web-based games, social media sites, etc. Google Search is a web application and so is Facebook.

• Websites (or parts of websites) that allow users to do something on the web are called web applications.
• These web applications are powered by programs (code) that let the client computer (the one you use to browse with) to work with the server (the computer where the website lives) to make something happen.
• Lots of small, simple elements learners have probably seen before can be thought of as web applications.
• Web forms that allow users to submit information, for instance their name and email address.
• Search bars that allow users to access a set results based on a question or term that you type into a search bar.
• Ask learners if they have used search bars or web forms– if so, they have used web apps!
• Explain that web apps can be much more complex, too. Thimble is a web app for creating web pages. Thimble is a coding tool for writing HTML and other web languages; it also publishes learners’ pages so they’re actually online, on the web.

  Tip! If learners have already done the “Building Basic Pages” activity, (which is a recommended) you can remind them that they don’t need to be online OR use a web app like Thimble to create web pages. They can use a simple text editor to write HTML and save their pages, and use any browser to view pages. These pages are offline until uploaded to a web server.

Meet Thimble, Take A Tour

[5-7 min]

• For this section, the facilitator should project their screen so all learners can see the Thimble tour. Ideally, learners will follow along on their own computers. Learners may find it helpful to work in pairs.

  Tip! It’s best if users sign in/create an account so they can publish pages. However, if users don’t feel comfortable creating an account, they can play around with writing or editing HTML in the editor, and seeing how the results change in the preview window. They will not be able to publish pages.

• Go to the Thimble Home page, and click “Start a Project From Scratch”. Explain to users that we’ve now left the Thimble home page and we’re using Thimble as a web application to do something– to make HTML pages. We’re doing this in the browser, which is pretty cool!
• Ask learners, what do you see– how does this page look different from the Thimble home page? How is the page divided up? What is each section or window for? What’s the relationship between the sections? Let learners talk and come up with answers, but be sure they understand the following:
  • At the top left, there’s an area where you can type in and change the filename from “untitled project” to a filename that makes sense for the page you want to create page.
  • On the left, there’s a space called FILES where we see two file names. These are the two files that we can work on and edit for this project. Learners can switch between them by clicking on the names. If learners create new files, they’ll appear here.
  • In the middle there’s space called EDITOR, where we can see the HTML code, and we can edit it there, too.
  • On the right, there’s a space called “PREVIEW” – when we edit code, we see how it will look in a browser– and the changes will happen as we type!

    Tip! This is a cool feature, so give users some small tasks to do– for example, changing the size of the heading, or editing the word “amazing.”

• Note that changes or additions that don’t follow HTML rules won’t appear in preview– learners check for problems in the editor, where the mistake or “bug” will be highlighted in red in the editor window.
• Also note the address in the browser bar, at the top of the screen– if you are not signed in, there should be a blackslash following the address “https://thimble.mozilla.org/en-US/” and then “anonymous” and a backslash + string of letters and numbers – this is a placeholder location on Mozilla’s server where your Thimble session will be stored temporarily.
• If learners are signed in, the web address will be https://thimble.mozilla.org/en-US/ + / username + /some random short set of numbers. * This is a location (a URL) the web app has created to store this learner’s work on the project, it’s the Thimble view of the project. * * Learners can also find their projects clicking on the user name in the top right and selecting “My Projects.”
• On top right, there’s a PUBLISH button. If a learner is signed in to Thimble and presses this button, their page will be saved on Mozilla’s servers, and be accessible on the web. Thimble will provide them with a web address that’s different from the one for the Thimble view. This publishes the address of their page, LIVE on the Web! Anyone, anywhere on the web can view their page at this address.

  Tip! You may need to clarify for users that people visiting this address will see just the page itself, NOT the working Thimble view with the editor window and all the options. Test it out, and compare the published address vs. the address of the Thimble view.

Make your Pages

[15-20 mins]

• For this part of the activity, facilitators have several options for content for these pages.
• Learners can select an existing project to remix– Common Tags is a great one to start with. This is a good option if time to generate new content is tight. https://thimbleprojects.org/mozillalearning/213458/

  Tip! If you decide to work with Common Tags as a remixable project, be sure to point out the TUTORIAL tab, which appears in the preview window. Learners look here for help on completing the activity.

• Learners who have done the “Building Basic Pages” activity should already have a story about themselves written up– they can add to this story, and then bring it into Thimble.

  Tip! If time is tight, they can skip adding new content, and just bring copy the existing story in.

• Ask learners to add to their life story– ask them brainstorm and write a new section about their hometown, a favorite relative, a positive memory, etc. Facilitator’s choice.

  Tip! Be sure they compose in their saved .txt file, and not directly in Thimble, and that they don’t tag and compose simultaneously! Coding and creating are two different ways of thinking– learners doing both at once may slow their creative flow by adding tags as they write, or they may get lost in the story and forget key tags.

• Ask learners to copy-paste their raw story content into the editor in Thimble (inside the body tags, of course). Then they can practice marking up this page again (and tagging the new parts) to get more familiar with tags and writing HTML.
• If learners have not done “Building Basic Pages,” they can generate story content as follows: Have participants break into pairs and interview each other about their lives. As facilitator, keep track of time to ensure that each learner has equal time for their story.
• Interview: Ask each to take 5 minutes to tell their story, or if they don’t want to share personal stuff, they can make up fictional character and tell that character’s story. Have the listener take notes, or possibly record on a device. Prompt users to talk about what is most important to them (or their fictional character). Offer this list of questions to get started:
  • Name, age, other details
  • Where were you born? Where did you grow up? What was that like?
  • What are you doing now? How do you spend your time? What are your favorite things to do, favorite places, foods, music, etc
  • Is there a favorite moment, proudest moment that stands out?
  • Your plans and dreams for the future

    Tip! The interviewer can ask follow-up questions to get at more details, or a fuller story. He or she can ask open-ended “why” questions about motivations, about preferences, about future plans, to help draw out more insights, or he or she can ask questions to clarify ideas in the story.

• Review/Edit: Have each learner take the notes from their story and review them– consider adding details, think of what you left out
• Organize, and Type Up: Have learners type up their stories in a basic text editor, being sure to use “plain text mode” (not Rich Text mode). As they type up the story, they might consider organizing and structuring the story into a beginning, middle, and end. Maybe they can think of titles for the sections: “Early Days” “These Days” “What’s Next” Or they can find ways other ways to organize the content, if they talked more about interest sections– “My favorite songs” “My favorite places” etc. Creating these sections will help structure the biography for easy reading as a web page.
• Title Your Story. Come up with a snappy title for your story or content. Or go with something basic.
• Make a new folder on your computer and call it “xx-webpage” using your initials. You should save this file in two versions.
• Save your story in the folder with .txt as the extension– Give it a title with no spaces or punctuation other than dashes or underscores, like “about-zm.txt” This is the text version of your story, the raw content.
• Copy-paste this raw content into the Thimble editor window and start tagging.
• Learners who create their own personal pages in Thimble can return to them and add content, especially for the Project Playlist or All the Stickers activities in the “Participate” section.

Wrap-up and Discussion

[10 mins]

• Choose one of the topics below to wrap up the activity:

Sharing Code & Remixing with Thimble

• If learners worked with their own stories, introduce them to remixable projects and the Tutorial tab, and let them explore and play for 5 or 10 minutes. If they remixed an existing project, have a discussion about that experience. Ask learners:
  • What’s it like to see other people’s code? What did you find that’s new, surprising? Do you see things you’d like to try?
  • What can you learn from using thimble to explore and remix projects?
  • How would you feel about someone remixing your project?
• Even if a page isn’t in Thimble, in lots of browsers you can peek at the source code… In FireFox, go to Tools > Web Developer > Page Source to see the code behind any page. If a page is a web app, the code is likely to be complex! If it’s a static page, it will be easier to read.

Pros and Cons of Thimble vs Composing Offline

Revisit/explore the difference between composing and publishing with Thimble OR creating pages with a text editor/browser and saving to a personal computer. Facilitator asks learners the differences; some might be:

• With Thimble you’re on the web right away! The page is saved to Mozilla’s server. And you can see your changes as you type.
• With a text editor/browser, you’re working on your local machine, not on the web. You need to save your file and refresh the browser to see changes.
• With editor/browser, you’d have to upload to a server to get your page online where others can access it.
• You need a web connection to get to Thimble.
• You don’t even have to be online to build sites with your browser and basic text editor.
• Thimble is designed for learning code, not for publishing sites over the long term.
• There are space limitations for how many files you can have on Thimble. And the web address…
  • How is the web address (URL) of your Thimble page different from the web address of your favorite blog or website…. If you had a business, would this work for a web address?

    Tip! Learners should understand that Thimble project addresses are generic; they don’t express the content of your project. They are hard to remember. To get the awesome web address they want for their page, learners would have to purchase a domain name (such as superpage.com or awesomepage.biz) and pay for web hosting– server space where their pages can be accessed online.

• Thimble is really a learning tool– for testing and trying pages.
• The text editor/browser combo is an easy way to start, and can take you far in building pages and sites
• For more complex sites you might use an app designed specifically to build and host pages quickly– check out the “Web Builder” activity.

The Evolution of the Web

• Explain: in the early days of the web, many pages were static. There was lots of information sharing, but not much interaction.
• Show an example of the early web using the Internet Archive’s wayback machine: https://archive.org/web/ and search for apple site link.
• Compare, for example, apple.com in 1996 with apple.com today (or find your own examples).
• What is the experience like on each site? What are the biggest changes?
• What do you think the web will look like in 20 years? What would you like to be able to do on the web of the future?

  Tip! Facilitator can emphasize that mobile “smart” devices weren’t around 20 years ago– what we can do on the web may change, but where and how we do it might change, too.

Learning Experience Reflection

[5 mins]

• What did you like about this activity?
• If you might teach this activity to a particular audience, what might you change about the process, structure, or content to better meet the needs of that audience?

Feedback on Core Curriculum

• Tell us how and where you’re using the curriculum and what you’ve learned and what you might change.

next: Web Builders