64 tech talk websites

Columns

Tech Talk

Personal websites for students and teachers: organizing and empowering

Lucius Von Joo Kanda University of International Studies, Japan

Lucius Von Joo currently teaches at Kanda University of International Studies, Japan. He holds an EdM in Comparative and International Education and has teaching experience in deaf education, elementary education and EFL/ESL in California, Japan and New York. His research interests include computer assisted learning, film and documentary content-based learning, student educational backgrounds and learning approaches, video-cued multi-vocal ethnography, and family and communities as educators. E-mail: lucius-v@kanda.kuis.ac.jp

W

ebsite design and management is becoming easier and easier to accomplish. This multimodal platform has many uses for educators and learners. This Tech Talk will cover a few of the basic uses. There are many different ways to achieve classroom organization, whether it is through applications or just old-fashioned paper folders, but I have found there are many benefits to using websites.

Websites are a very practical way to deliver and store class content. They are also great for students to keep assignments together in one place to be reviewed by teachers and peers at any time. Having students learn basic web design is also a very functional skill.

In this Tech Talk I will walk through creating websites for both teachers and students. The teacher sites can serve as a class syllabus and hub that links students’ individual sites. The students’ sites serve as a place for each student to post all their work as it comes along throughout the course. In this column I will explain each step for website design. However, usually when I set up websites with students I

just point them to the site and have them figure it out on their own. When I first tried this I was skeptical, but students have succeeded in creating their own website regardless of their comfort level with technology. I do this to encourage students to problem solve on their own so that they will need no scaffolding to continue web design after the class. I will be explaining website design through Weebly, which is a free website builder and host. Weebly can be used either online or through a smartphone application. In this Tech Talk I will be using screen captures from the online version of the program. I have experimented with at least 6 of the top website building programs on my own and with students and have found Weebly to be the most user- friendly and (visually) attractive. In this Tech Talk I will explain how to set up, build, and publish a website before providing a few additional tips and tricks.

Set up In this section I will explain how to set up a personal free account and get the first website started. Before I start to explain the steps of account set-up I would like to mention 2 approaches to using Weebly as a class. The first approach, which I will be explaining in detail in this Tech Talk, is to create personal user accounts; the second would be to set up a Weebly education account. The advantage of an education account is that student site design

Independence 64 IATEFL Learner Autonomy Special Interest Group Newsletter 1

would be slightly simplified and also protected from any danger of paying for upgrades. The teacher who set up the student accounts can also monitor them.

The downside to having an education account is that students would not be able to take their site with them after the course finished. The teacher also has to set up the account and assign the password for each student, which can be needlessly tedious. In addition, if the teacher does the registration process it is another step students won’t be familiar with in the future and this could discourage them from continuing to use their new skills after finishing the class. If I were working with much younger students, let’s say elementary school level, I might use the education option. However, in most cases I feel it would stifle aspects of autonomous learning.

As a general rule, I tell my students right away that if any of the features on Weebly ask them to pay money they should close whatever they are doing. There are only 3 situations that I know of when money might be asked for: upgrading to a professional account, using copyrighted images, and buying your own personal domain.

Fortunately, there is very little chance any user would make this mistake, as you have to enter credit card information before proceeding.

1. Go to Weebly.com and register. All you need to enter to sign up is your name email and password.

When you click get started it takes you directly into setting up a webpage. Some online programs will send a confirmation email to the email account that you have registered with, you then have to find the email and click a link to activate the account.

Needless to say a confirmation email can be really confusing and needless step for students. Thankfully Weebly does not have the activation system. To log in with an existing account you click ‘log in’ which is in the top right-hand corner.

2. After you sign up you will be brought to a page that asks you if you want to set up a site, blog or store. For our purposes, pick either site or blog. The only difference between a site and a blog is that the site will

open on a homepage menu and the blog will open directly onto a blog page.

You can switch this at any time in the future so the decision is not permanent. I usually use the site option when designing a class because I want menu style organization whereas for students I usually have them create blogs so that their work is posted in chronological order.

For each template Weebly offers a blog version and a site version. The two templates have the same colors and fonts however the structure that they begin with is slightly different for example the site starts on a homepage. In the following chart I have placed the blog and site defaults side-by-side of the same template “clean lines” to show what I am referring to.

Site= homepage Blog= no homepage

3. After you choose your site or blog you will be brought to a page that has about 100 different themed templates to choose from.

Pick any design that you feel will meet your needs. Keep in mind that almost everything is customizable so try to pick the template for the layout. For example, look where the menu navigation buttons are, how the pictures are laid out on the site (not necessarily the pictures themselves, since you can change this, but where and how they are displayed). This choice is also not too crucial since you can change the design theme anytime in the future.

4. Weebly will prompt you to name your website domain (this is also known as your web address). You can do this for free through the use of a Weebly subdomain. This means that your site will have the word ‘weebly’ between your site name and .com.

The upside to this is that you might be able to find a website name that would not be available if you were to try for .com directly.

Independence 64 IATEFL Learner Autonomy Special Interest Group Newsletter 2

Building and Designing

Pages

After you have carried out these 4 steps you are ready to personalize your site. You will be brought to a window like the image below that has all the editing features to the left and top of your website (these editing features are not visible to people visiting your site). Designing the pages is extremely easy, as it is all drag-, drop- and click-based.

1. Click on any part of the page you want to edit. For example in the following image I am changing the title on top of the home page.

The ‘Pages’ tab is where you can add different pages to your website. Here is an example of adding a blog page to my website.

One really nice feature of designing a site with Weebly is that if you don’t customize something in the editing template it will not be visible in the published page that visitors to your site will see, I will explain this in more detail in the publishing section.

2. Now you can drag and drop any element you want on to your page. For example in the image below I am dragging a title onto my site. Once the element is in place I just click on it to edit.

3. Designing is the artistic side of your webpage, for example color, fonts and backgrounds. You can edit these to your liking or leave them in the original template form. If you choose to edit them there is really nothing you can do wrong as Weebly will make sure everything fits on the page.

You can change the name of your page and add any size header you would like as well. If you want subpages in your menu all you do is move your page to the right under the page you want to have them branch off from.

Once you have added the page you want, click

You will then be brought to the page you just added and you can drag and drop to edit as explained in the steps above.

Publishing

‘Weebly auto’ saves any changes you make while editing. However, the changes you make will not be changed to your viewable website until you click ‘Publish’. When you like the way your site looks or you would like to update the public version, all you have to do is click the ‘Publish’ button in the top right corner of the screen.

After you do this, Weebly may ask you a couple of questions to categorize your site, which could help people to find it. If you don’t care about this aspect, you can skip these steps and select an option for Weebly not to ask you again.

After you choose to categorize your website or not, a message will pop up stating your site has been published. This message will have the link to your website as well as an offer to publish your site under your own domain: this means publishing without the word ‘weebly’ being in your domain address. This option will cost

Independence 64 IATEFL Learner Autonomy Special Interest Group Newsletter 3

money so if you don’t want to do this you can just close the window.

Here is what the site would look like published.

You can see by the screen capture above that all the elements that I have not personalized do not show up on the viewable site. Since I have not edited the default button or the subtext under the title they do not show up in the published version of the site.

Hints and tricks • After students have set up their personal websites I have them email me their web address. I then make a page with each student’s name on it and link the name to their website. This helps inspire students because their peers will also have access to their work done in the class. Students can also learn from each other by clicking around on class sites and comparing to make sure they have fulfilled all the assignments. With the students approval, their sites can serve as examples for future classes as well.

• One really nice feature of Weebly is that you can edit your site to make sure it will work well on smartphones as well. You can do this

by clicking on the phone icon in the top right corner.

• With a free Weebly account you cannot upload videos directly onto the site from your computer, however you can easily do this through YouTube. After the video is uploaded to YouTube you can use the YouTube drag and drop element.

You can also see that you can drag any documents such as a word, pdf or excel document onto the website using ‘Document’ element which would be viewable and ‘File’ element which would be downloadable. This can be really helpful when you are transferring a paper based class to a website or if you have any pdf text you want students to read.

• Initial building of a website is best done on a computer, however it can also be done on a smartphone or tablet. After the site is up and running, upkeep and updates can easily be carried out on smartphones and tablets. Both devices can do the editing using an online browser just like on a computer or an application. The application is very similar to the online version, however the layout is simpler, which allows for editing to be done faster when you don’t have a strong Internet connection.

Summing up Here are a few of the overall benefits of websites for teachers and students.

1. Learning website design is not only a practical skill for students, it also helps students’ metacognition by evaluating how they navigate through the Internet. This is the same theory as when you have people make a meal for themselves they will be more self aware of what they eat.

Independence 64 IATEFL Learner Autonomy Special Interest Group Newsletter 4

2. Having students work online adds additional incentive as the audience extends to peers, friends, and even their future selves 3. Making websites allows students to take something with them at the end of the class.

This is done by default if the students set up their own accounts and can even be accomplished with some finesse if you have an education account. They have an archive of the work they have done that can be easily accessed and stored. As a fun addition to this, I have had students use a service in some classes that can email them at a future date of their choosing with the link to their site.

This serves as a digital time capsule.

4. Reviewing student’s work on a website has the quality of a portfolio, because all the work is in one place and is easy to click through. This allows both teacher and student to observe how published work has changed throughout the course.

5. Having class websites with all the course information and assignments allows the course to be easily transferred and shared with other teachers and institutions. Also if a student misses a class it is easy for them to access what was covered. You can password protect websites if you do not want them accessible to the public.

6. Weebly’s icon-based editing platform scaffolds quite nicely as it is universally friendly for all levels of language and technologies users. Technology by default is always a virtual platform that takes some getting use to, however the learning curve is no too steep with Weebly.

Possible limitations • You will always need an Internet connection if you are using websites. However, many more students have access to smartphones and tablets, so even if the school doesn’t have Internet access students can still access the site from personal accounts.

• Weebly’s auto-save feature is very helpful so that students don’t lose any work, however if a student has multiple windows open editing the same page there is a chance they can save over a more completed version.

• There is the risk that websites could infringe on the face-to-face social aspect of a class.

Imagine walking into a conversation course where all the students are facing computers and not each other. Nonetheless, this problem is easily avoided; if I have websites open in class I usually have students working in pairs critiquing each other’s work as they go. Also if you have students work in groups they can edit on one of the group member’s

sites and then easily cut and paste the same assignment to their own site. I have noticed this helps with groups, as when one member is absent the work is always accessible.

Final Remarks Websites are a multimodal platform blending video, image, sound, text, and time. This multimodal platform allows for clear delivery of content to students and also lets students respond in an equally interactive manner. One of my main criteria for using technology in the classroom is that it does not hinder learning more than it benefits it. When I have used other website building applications in the past I sometimes felt that learning the website design was a bit too distracting at the beginning of the course. However, Weebly has simplified the process without losing any of the features for people new to web design. As an orientation, I usually let new students explore the class website and also past student websites (if available) as a means of predicting what will be done in the course. Learners are often impressed by these sites on their first day and by the end of the course they have made their own website to contribute to the community. This strengthens the pool of resources that students can draw from. I have been pleasantly surprised to see how websites have enhanced the sense of community and helped students become more organized and empowered in class.

Dear Readers,

If you have any requests for future Tech Talks please feel free to contact me. Any request is greatly appreciated and can range from a specific program you want explained to a general lesson that you want to incorporate technology into.

Thank you,

lucius-v@kanda.kuis.ac.jp

Independence 64 IATEFL Learner Autonomy Special Interest Group Newsletter 5