WebFest

What’s the Web? We’ll start WebFest by visualizing our understanding of the World Wide Web (and we’ll revisit this document later). Our goal this week is to break down the web into its simplest forms to better understand how it works so we can make informed decisions and build better websites.

We’ll spend time creating simple HTML pages that we can use to start prototyping websites. After exploring a local web server, we’ll signup for OU Create, select website domains, and continue investigating how web servers work. Specifically, we’ll discuss the software Apache and how we can use it and “web root directories” to host our websites.

The remaining time of our first session will be spent planning, writing, collecting, and preparing assets for the website you will produce this week.

Illustrate the Web – Sketch your current understanding of the web and how it works. This may look like a flow chart, outline, diagram, etc. Any rendition is fine. Feel free to use any familiar jargon (website, server, domain, etc.). Retain this illustration for the duration of WebFest.

Write “About” page – Using Notepad (Windows) or TextEdit (Mac) (or other text editor) write a summary of the website you want to create this week. If you’re working on a personal website, this may be an “About Me” page. A research or course website could have an “About this Project” page. (We’ll save this text file as a .html for now.)

Decide on domain – When you login to create.ou.edu, the first setup step in this process is to select a domain (URL) for your website. Often people use some form of their name (i.e. firsttlast.com) if they are creating a personal/professional website. Read more about choosing a domain name here.

Host your “About” page HTML File (optional) – During our session, we’ll use the HTML files you create to demonstrate how the web works. You’re welcome to login to create.ou.edu, access the “File Manager” section, and upload your HTML file to the “public_html” folder. If your HTML file is named “index.html,” it should display this file when you (or anyone for that matter) visits your domain. For more information, see this guide.

Readings & Videos

Crafting Your Digital Scholarly Presence – Michigan State University promotional video:

How the web works – Here is a brief overview of our workshop activity demonstrating how computers communicate and share files via internet protocols.

How the Domain Name System (DNS) Work – The Domain Name System is central to the internet. This system assigns numbers to the computers that host web sites and web apps. It also correlates these numbers with the more human readable URLs. When you type http://ou.edu  the DNS converts that URL into a number. Your web browser then contacts the server at that number, which returns the files for the OU website.

Seven ways to think like the web – Jon Udell’s blog post helps people understand how the web works and how best to use the web to gather and share information.

HTML Basics – This is a quick introduction to HTML from w3schools.com for those that want a jumpstart on web coding.

Web Technologies Lynda.com Course – If you’d like to take the deep dive into web technologies, a great introduction is this Lynda.com course (~2 hours). These videos go well beyond the scope of WebFest but provide in-depth explanations for those who want to explore how to potentially integrate web technologies in their curriculum. Here’s an example from this course:

Softwares

Brackets – Free & open source text editor for web design. Used to build HTML websites.

Trinket.io – An embeddable widget that allows users to experiment with HTML code directly on a website:

WebFest Glossary

Domain (aka URL) – Text that identifies a particular website on the internet (i.e. webfest.keeganslw.com, experienceplay.education, google.com, etc.). URLs are paired with a particular IP Addresses (see DNS Server).

IP Address – A series of numbers that identifies a particular computer on the internet. These numbers are formatted like so: 127.0.0.1 and you can check your computer’s current IP address using whatismyipaddress.com.

DNS Server – Domain Name System (DNS) servers are used to translate between URLs and IP Addresses in order to find the correct web server when a URL is requested.

Web Server – The computer that stores and distributes website files. These computers are identifiable by their IP Address.

Apache – The most widely used open source software to run a web server.

Web Root Directory – The directory (folder) that contains the files to be distributed as a website. The contents of this folder is distributed by Apache to other computers.

Web Host – Companies (like BlueHost, HostGator, Reclaim Hosting, etc.) that rent web servers to run websites and other services.

Web Browser – The software on a computer to read and visualize website files after they’re received from a web server. Website files consist of .html and .css (etc.) file types.

HTML – HyperText Markup Language (HTML) is the standardized code of web page content. For example, bold text is coded like so: <b>This text is so BOLD.</b> You can learn more about HTML here.

CSS – Cascading Style Sheets (CSS) is the standardized code of web page formatting. For example, colored text is coded like so: p { color: blue; } meaning all HTML text that uses the <p> formatting like so: <p>will be blue</p>.

Moving beyond Day 1’s simplified model of the web, we’ll expand our understanding of the infrastructure and technologies that power the web through a role playing exercise. This activity will explore DNS, IP Addresses, HTML files and more as we conceptualize the flow of website data.

Next, we’ll transition away from HTML websites to explore Web Applications. Web Apps can be utilized to build more dynamic websites more quickly using themes, plugins, and simple editing interfaces. The most important Web Application we will investigate is WordPress, which is open source and powers more than 25% of the web.

The remainder of our second session will be spent building and prototyping the website you will produce this week.

Explore the Web Apps offered within the OU Create system (optional) – From websites to wikis to forums to blogs to photo galleries and survey tools, there are many different softwares available in OU Create to publish various types of online content. Feel free to explore the web apps offered with OU Create.

Install WordPress on your OU Create domain – We’re going to install and explore WordPress. In particular, we’ll spend time exploring Pages, Posts, Themes, Plugins, and more for our new WordPress websites. (Even if you decide to use a different web application, having a general understanding of WordPress is valuable since it’s such a popular web publishing software.)

Transfer the content from your HTML site into WordPress – Anything you’ve created in HTML up to this point can be transferred into your newly created WordPress website. We recommend copying the HTML text into WordPress Pages.

Explore website designs – We have shared several OU Create websites below. Take a few minutes before our session starts and during the session to explore these websites and gather ideas. The faculty websites offer good examples of the types of information you may want to include in your website.

Start building the pages of your website – Several examples of faculty and students websites are provide below in the resources. As you look through these, notice their page structures, and think about what pages you would like to include in your website.

Readings and Video

*Please note this video is very long.

Lynda.com – This website offers video tutorials on many of the web applications that are supported by OU Create. You can watch a single video on how to install WordPress or work through the accompanying activities for multi-video, in-depth courses.

YouTube.com – A search on YouTube for WordPress tutorial returns 5.5 million videos. One of the benefits of web apps like WordPress is that they have very large user groups who have extensively documented all of the different ways to use the app.

W. Ian O’Byrne has written a series of blog posts that discuss both the reasoning behind setting up a web presence and the technicalities of how to setup a WordPress site. His posts closely mirror this site’s process and are a great resource.

Model Web Sites from OU Create

Lucas Bessire – Faculty member’s web portfolio.

Blog 3423 – Course blog for a Spanish language course by Julie Ward.

Margaret Bourlon – Great student web portfolio.

Audra Brulc – Great student web portfolio.

Elements of Statistics – Open online textbook by Saleh Sahabeh Tabrizy.

Karlos Hill – Faculty member’s web portfolio.

OU Forum – Student run newsmagazine.

WebFest Glossary

Content Management System – A computer application that supports the creation and modification of digital content. It is often used to support multiple users working in a collaborative environment. The most used content management systems in OU Create are WordPress, Omeka, and Drupal.

Web Application or web app – According to wikipedia, a web app is client–server software application in which the client (or user interface) runs in a web browser. In our words, a web app is a program that runs in your browser and allows you to interact with data stored in a remote server. The broad category of web apps includes email clients like Outlook, content management systems like WordPress and Drupal, and calendaring applications like Google calendar.

WordPress – WordPress is one of if not the most popular content management systems. It is in many ways the web equivalent of Microsoft Word, in that it allows for word processing, but with the added integration of easy web publishing. It has a huge user community, so it is technically well supported. It is also highly customizable.

On Day 3, we’ll take a moment to consider our individual web presence: Where do you publish content online? What social media services do you use? How are you represented personally and/or professionally on these services? As we discuss these questions, we’re going to visualize our digital identities and discuss the implications of professional and personal presences.

From this discussion we will transition to digital tools and their role in identity formation and the validity of websites as hubs for our digital selves. Is your website a reflection of you? Who is the site’s intended audience?

We’ll continue building our websites for most of this session. For our last activity we are going to illustrate our understandings of the web again and compare these illustrations to our original visualizations to demonstrate how our understanding of the web has changed.

Finally we will discuss copyright and open licensing. How would you like to share your contributions to the web? Who owns things? What do you own from the stuff you make? We will look at both publications and classroom materials:

Publications

• Dissertations & Articles
• Journal Submission & Copyright Agreements
• Monographs & Textbooks

Classroom

• Syllabus
• Resources (Books, videos, etc.) – Publicly Available vs. Behind “Paywall”
• How do you support students learning of Copyright when completing their assignments?

Illustrate your web presence – How do you use various web platforms to communicate with different audiences? What facets of your life do you show on each platform? How do your self-representations on those platforms support or challenge one another?

Explore WordPress themes and web design – Website themes allow us to produce attractive websites to showcase our content. Part of today will be spent comparing the pros and cons of various themes and web design elements as each offers a unique look and feel for your website.

Consider the copyright attribution of your website – We will study the differences between the various major types of copyright: All Rights Reserved, Creative Commons, & Public Domain. We will then discuss the ramifications of these types of copyright for both publications and classroom materials.

Continue building – We will use much of our time to continue building our websites. Peer-to-peer feedback and the ability to share challenges and successes will help in overcoming both content and technical hurdles.

A Personal Cyberinfrastructure – Gardner Campbell is a leading scholar in the pedagogical integration of educational technology. The article linked is one of his first writings on the idea of giving everyone at a university a domain of their own and why that would be useful. OU Create was built upon that idea and the subsequent work of Gardner, Jim Groom, and others to fulfill this vision.

Choose a Creative Commons License – Creative Commons Licenses are a form of copyright that provide specified permissions for the dissemination and reuse of the copyrighted material. The tool linked asks questions about how you want to share your work and generates a license. This license can then be attached to the work as a recognizable and transparent expression of the exact terms of the copyright.

Public Domain Video, Images, & Graphics – This link takes you to one database of public domain video, images, and graphics called Pixabay. Public domain materials are entirely free to use and are a great resource for illustrating or decorating both websites and print materials.

Unsplah Public Domain Images – This is another database of public domain images that are all shot and downloadable in high resolution.

What is Fair Use? – This library guide collects several different resources that help to explain fair use within the context of teaching. The practical texts guide the user through the basic decision making process of deciding whether or not they can use copyrighted material for their purposes.

OK Share – This repository was built by OU in partnership with Board of Regents and OSU to archive digital copies of scholarship produced by both schools. Dissertations, articles, and other research can be uploaded here and then shared. OK Share can also provide guidance on the policies of various journals as to whether or not you can upload a copy of an article for further dissemination.

 

We will start our session with a discussion on why we should teach the web in our classes. As educators, we’re called to teach the content from our disciplines. Simultaneously, we aspire to develop critical thinking skills, cultivate citizenship, and empower our students to grow as enlightened individuals. Considering the digital tools we have at our disposal, how can the web be utilized to help us reach these goals? Alternatively, what technologies are being used in the careers of your discipline and how can we integrate these tools into our curriculum to prepare our students? Before we answer these questions, let’s consider the strengths and challenges of the web for enhancing our teaching.

Issues of access are often overlooked when we assume that every student is always connected to the internet. But economic, cultural, and geographic restrictions can limit the ability of students to access the web. Access is increasingly coming at the expense of privacy, so we also want to discuss digital privacy and rights, both for the general user and the student more specifically.

Once they do gain access, students need training in information literacy. We will brainstorm ways to integrate information literacy education in the various disciplines of the participants.

A large part of this discussion will be spent sharing tools, approaches, and ideas that to engage our students.

Illustrate the web (and compare) – We will be repeating our activity from the first day of WebFest to illustrate the web and we will compare our illustrations to see how our understandings of the web have changed.

“Why teach the web?” Discussion – Where does web publishing fit into your discipline?  What parts of WebFest would be valuable for your student to experience? Where do we integrate these skills into our curriculum? What issues around the web are facing our democracy today? These are some of the questions we will tackle as part of our discussion. Be sure to explore the resources section for today as it contains many of the topics we will be discussing.

Explore WordPress plugins – You can add more features to your website using plugins. In particular, consider adding the Jetpack plugin to your website to record website traffic; the Akismet plugin to filter spam; or the Shortcodes Ultimate plugin to add fancy building features to your pages.

Finish your websites – Knowing full well that websites are works in progress, continue editing and building your website until you finish construction. Once finished, be sure to share it appropriately (with your colleagues, students, or on social media for example).

Readings & Videos

Current Issues

Fake News, Digital Polarization, & Information Literacy – Digital Polarization can refer to the use of algorithms in facebook, twitter and elsewhere that tailor your content. While this may be well intentioned, it can lead to polarization along political lines or other socio-economic lines to the point where different groups are seeing different news. Ideas for digital projects related to digital polarization and information literacy can be explored from websites like the Data for Democracy Projects page.

Net Neutrality – The concept behind net neutrality is that internet service providers should not provide different websites and services at different speeds and costs. All of the internet should be equally available. The concern is that if internet providers can offer some services at accelerated speeds or higher or lower costs, it will encourage larger corporations like Amazon and Netflix to pay to squash their competition. For more information see:

Digital Redlining – According to Chris Gilliard & Hugh Culik, digital redlining is “a set of education policies, investment decisions, and IT practices that actively create and maintain class boundaries through strictures that discriminate against specific groups.” Learn more about digital redlining in their blog post.

Internet Service Providers (ISPs) Selling Your Personal Data Without Your Permission – With recent change in FCC regulations, Internet Service Providers would now be allowed to sell the list of websites you’ve visited and the metadata about your internet usage. Here’s a quick video overview. Protecting yourself is possible but requires money and/or technical expertise. In other words, this is an issue that disproportionately affects lower socioeconomic groups. Here’s a blog post from Bill Fitzgerald.

Student Data Privacy – Audrey Waters is one of the leading writers on both the promises and pitfalls of educational technology. You can start your dive into her work on student data privacy here: http://hackeducation.com/2015/10/19/domains

Curriculum Ideas

Domain of One’s Own (DoOO) – Have your students create their own website using OU Create as part of their course. Use this opportunity to engage students in web technologies.

eXperience Play – Engage students in game design, digital storytelling, and web literacy as they create their own text-based video games using the same HTML and web technology skills they’d use when building a website.

Digital Polarization – Integrate source analysis into your courses. The Digital Polarization Initiative offer a great framework to start this process. Learn more here and here. The Web Literacy for Student Fact-Checkers textbook is another resource when thinking about Digital Polarization.

Hypothes.is – Close reading of books and journal articles often involves highlighting and making notes in the margins. Hypothes.is is a tools that allows you to highlight and take notes in the margins of internet sites. Here are several pieces of literature that are being annotated collaboratively by students: Antigone, Hymn to the Aten, and Hesiod, Theogony. Here’s an example of a whitehouse.gov webpage that is being annotated publicly by people around the world:

Group Blog – To engage students in reflection and engage them in writing for the public, instructors have used group blogs in class. The benefit of the group blog is that it’s combines all of the students work into one website that can be integrated into the course. Here’s an example from an architecture course at our university:

Information Literacy & Digital Citizenship – Here’s a textbook that covers web literacy for students as a curricular resource:

 

Many more – These are just a couple technologies that are used on our campus to enhance the learning experience for students. They’re great examples of how the strengths of the web, asynchronous collaboration, peer-peer scholarship, and easy sharing, can be used to engage students. However, they are only two among thousands(+) of available tools.