Technology to Change the Future

The future of learning is being shaped at an exponential rate due to the ever increasing advancements in technology. Gamification is the idea of taking game mechanics and thinking then integrating it into non-game environments. Recently, I traveled to California to attend Educause and I had the privelage of listening to Jane McGonical deliver her keynote. Awesomely it was recorded and I can share it with you! Watch the following video that was from the October 2013 Educause event.

Higher Education Is a Massively Multiplayer Game (Jane McGonigal)
The success of education and communication in the future will rely heavily on technological skills and advancements. Students of the future will need to know how to navigate in a highly technical world in order to learn, engage, and succeed. Write a detailed reply that explains how having technical skills in web design, desktop/mobile publishing, and social networking will be mandatory for the next generation of learners. Write about what education paradigms (patterns) have changed from the time you started school until now.


Tables to hold your data

In HTML, tables offer a great way to structure data sets and information that needs to sit within a columns/rows matrix. In a time not to long ago, tables in HTML were found to be an accepted way to create layouts for content. The problem was that the extra table markup was conflicting with the structural markup and generally made a mess of things. Furthermore, there were workarounds necessary to hold the layout together. Eventually, Cascading Style Sheets (CSS) came into the picture and took the place of tables as a layout option. I tell this story so you know this, TABLES ARE NOT TO BE USED TO LAYOUT A WEB PAGE! Use tables to hold sets of data because it does it well!

Tables are generated by creating rows of table data. Let us take a look at a table below. (TR = Table Row, TD = Table Data)

Rendered

Widget Price Quantity
Thingy $5 20
McBob $3 23

Markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
	<tr><!--Row 1 -->
		<td>Widget</td>
		<td>Price</td>
		<td>Quantity</td>
	</tr>	
	<tr><!--Row 2 -->
		<td>Widget</td>
		<td>Price</td>
		<td>Quantity</td>
	</tr>	
	<tr><!--Row 3 -->
		<td>Widget</td>
		<td>Price</td>
		<td>Quantity</td>
	</tr>
</table>

Managing your PERSONAL URL

Now that you have been given some time to acquaint yourself with FTP and hosting files, you will be using this system to turn in all your files from here on forward. And to be clear of my expectations, lets take a look at an example. I have created a list of links and the link to Quest 3 Objective actually works! The goal is to make every list item a functional link from here on forward.

Rendered:

Go to http://gamifyedu.co/a/adam and you will see a live example of my PERSONAL URL home page.

The code that runs that looks like this:

Markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
 <head>
  <title>Adam's gamifyedu.co PERSONAL URL</title>
  <meta charset="UTF-8"/>
 </head>
 <body>
   <ol>
    <li>Quest 1<br/>
     <ul>
      <li><a href="#">Enrichment One</a></li>
      <li><a href="#">Enrichment Two</a></li>
     </ul>
    </li>
    <li>Quest 2<br/>
     <ul>
      <li><a href="#">Enrichment Two</a></li>
      <li><a href="#">Reinforcement</a></li>
      <li><a href="#">Objective</a></li>
     </ul>
    </li>
    <li>Quest 3<br/>
     <ul>
      <li><a href="#">Enrichment One</a></li>
      <li><a href="http://gamifyedu.co/a/adam/quest3/objective">Objective</a></li>
     </ul>
    </li>
    <li>Quest 4<br/>
     <ul>
      <li><a href="http://gamifyedu.co/a/adam/quest4/objective">Objective</a></li>
     </ul>
    </li>
   </ol>
  </body>
</html>

This is the page that you will be expected to maintain and update. Make sure that the links on this page are always updated with the latest completed quest course work links. You are now a web designer and have to manage your updates. Good luck!


Web Design Crash Course Lesson Review Video!

Hello all!

Here is a video I made for y’all (late at night so don’t judge me). I tried to quickly summarize where we are at by this point in semester. I am going to be picking up speed and need you to start doing a bit of research on your own to really enhance your designs. There is a bit too many tags to give them all practical (hands on) attention. EXPERIMENT with different tags. I know who is doing awesome out there and I am expecting that you start throwing in more tags and things we don’t cover in class. I will help guide you if you have questions, and I will be more impressed by your attempts to make something awesome instead of trying to follow the assignments exactly…


The Wonderful World of Lists

Lists in HTML are a pretty straight forward concept. When creating a basic list, there are a few things to consider.

Rendered Example

  1. The entire list is contained in tags
  2. Each individual list item within the list is contained in tags

This will ensure that the entire list can be moved targeted and controlled. Each of the items contained in the list can be controlled as well. The above two items are in a list and more specifically an Ordered List. Let’s take a look in the code to see what that list looks like:

Markup

1
2
3
4
<ol>
    <li>The entire list is contained in tags</li>
    <li>Each individual list item within the list is contained in tags</li>
</ol>

As you can see, the two tags that are used are <ol> and <li> (ordered list and list item). There are other list types that can contain the <li>. Let’s take a look at Unordered Lists. They contain information that would look something like this:

Rendered Example

  • Milk
  • Bread
  • Eggs
  • Apples
  • Denver Broncos Cake

Markup

1
2
3
4
5
6
7
<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
    <li>Apples</li>
    <li>Denver Broncos Cake</li>
</ul>

Another list type that works with slightly different tags is the Definition List. It uses three tags to work and is illustrated below:

Rendered Example

Gamification
The use of game thinking and game mechanics in non-game contexts to engage users in solving problems.
Education
Form of learning in which the knowledge, skills, and habits of a group of people are transferred from one generation to the next through teaching, training, or research.

Markup

1
2
3
4
5
6
<dl>
    <dt>Gamification</dt>
    <dd>The use of game thinking and game mechanics in non-game contexts to engage users in solving problems.</dd>
    <dt>Education</dt>
    <dd>Form of learning in which the knowledge, skills, and habits of a group of people are transferred from one generation to the next through teaching, training, or research.</dd>
</dl>

Lists are very helpful in many ways, and have many practical applications. Aside from the simple listing of items we will explore how to manipulate there presentation in a later article. In the meantime, here is a simple example of how list items could be used to create a simple navigation bar:

Rendered Example

  • Home
  • About
  • Blog
  • Resources
  • Contact

And the complete HTML and CSS to make it all happen:

Markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <style>
            ul{
                margin:0;
                padding:0;
            }
            li{
                list-style-type:none;
                margin:1px;
                padding:3px;
                background-color:#ccc;
                display:inline;
                float:left;
            }
        </style>
    </head>
 
    <body>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Blog</li>
            <li>Resources</li>
            <li>Contact</li>
        </ul>
    </body>
</html>

**UPDATE**

A question was asked about how to start a list from a specific number. The answer is to define the Start attribute with an integer.

So to make something like this:

Rendered:

  1. Chicken
  2. Beef
  3. Pork

You would use this code.

Markup

1
2
3
4
5
<ol start="35">
     <li>Chicken</li>
     <li>Beef</li>
     <li>Pork</li>
</ol>

A Glimpse into the Future?

So, many of you have given stellar responses as to what your life has been like as you grew up with different technology. I’m a little sad, because I realize that I am getting old. I can actually remember a time before computers altogether. I even used typewriters. Sigh… Regardless, I am on top of tech game today (or at least trying to stay a top). I have always been fascinated by technology, and I dreamed of a smartphone before having a cell phone was even a thing. Today, I am entrenched in a variety of state-of-the-art technology and I like to think I can see what is coming next. If you really analyze the development of tech even over the last decade, it is growing exponentially! If you are are into futurist talk you might be familiar with Ray Kurzweil and the predications that he has made that have consistently came true over the last few decades. Check out this video: http://www.ted.com/talks/ray_kurzweil_announces_singularity_university.html

Since Google Glass was mentioned a bunch in the comments, I thought you all might enjoy this glimpse of a possible gamified future.

What do you think are we headed on this path?


Web Design Basic Structure

One of the first things to learn in HTML is the basic structure and syntax needed to make a simple web page. The below markup is what a basic webpage* looks like:

1
2
3
4
5
6
7
8
9
10
<html>
    <head>
        <title>This is the page title</title>
    </head>
    <body>
        <h1>Heading one</h1>
 
        <p>This is a paragraph of text. Notice the tags that surround me</p>
    </body>
</html>

* There are a few tags not included in this example for the sake of simplicity

Reading through it you can see tags surrounding various sections of content. This effectively marks that content and attachs meaning to each bit of information in the document. Altogether the tags and content contained are called an element.

I know it is relatively easy at this point and I anticipate some of you will try using new tags before we talk about them in class. That is the way to learn, and good on YOU! Repetitive use of the syntax, coupled with excellent organization will make future learning, experimenting, and debugging much more efficient and a lot less frustrating.

Are you a organized person? Tell me a few things that you do to stay organized in you life.


Article Postings

Hello students,

I will be posting articles throughout this course that pertain to web design. Expect tips, articles from around the web, and instructional posts on how to achieve certain things. I expect you to comment heavily in this area.