Wednesday, May 20, 2009

Web pages on mobile devices (an xHTML template)

Anyone who has gotten the courage to venture on the Internet with a mobile device (usually from your cell phone), as found out immediately that size (screen size) is important with mobile devices. You may have also noticed that some pages looked better than others. The most annoying problem is scroll bars around the display because the page does not fit inside the screen.

What makes a page viewable on a mobile device is largely due to the html (or the xHTML) that has been created for that page. The page must be designed to fit on any screen size. The best way to describe the good mobile web pages is that they lack the features available on PC browsers and tend to look a little retro (circa. late 1990's). The HTML for mobile devices needs to be simplified to be displayable.

When I created the MLEX tool (soon to have a screen cast on mobiledot.ning.com with tutorials to get started) I simply created a program that made sure that the pages were kept simple and html elements what would not work on mobile devices were not included. The MLEX software tool keeps you on target but does not prevent you from breaking the page on a mobile device by adding elements and features that are not supported (JavaScript, frames, tables, etc.).

A xHTML Template

But, you don't have to use MLEX to create web pages that are viewable on mobile devices (and BTW also viewable on PC browsers). I have added to this blog a template HTML file (using xHTML tags which will work best with mobile browsers). You can take this file and open it in any text editor or HTML Editor and modify it to your requirements. Once saved, you can test it in your PC browser and finally, place it on your HTML server so others can access it.

About the template

The template is just a text file that has text and xHTML tags. I have placed HTML comment tags (which are ignored by the browser) inside the template to give clues as to what is happening. You may want to access a site on the web that discusses xHTML but anyone who knows a little HTML should be able to handle xHTML without any problems. The template references two css external style sheet files. CSS is a little more complicated and too much for this pos but it is not hard to learn and I have deliberately kept it simple. You can see a sample css file that could be used with this document below.

Note: The text in the web page is random letters just used to fill in the document.


<?xml version="1.0"encoding="UTF-8"?>

<!-- DOCTYPE STATEMENT - NOTICE THE DTD IS MOBILE -->

<!DOCTYPE html PUBLIC"-//WAPFORUM//DTD XHTML Mobile 1.2//EN""http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">

<head>

<!-- TWO CSS EXTENAL FILES ARE REFERENCED. ONE FOR THE PC AND ONE FOR MOBILE DEVICES -->

<LINK rel="stylesheet" type="text/css" media="handheld" href="mobile-0.css"/>

<LINK rel="stylesheet" type="text/css" media="screen, print" href="personalcomputer-0.css"/>

<!-- TITLE SECTION -->

<title>Web Page Title Goes Here!</title>

</head>

<body>

<div class="header" style="text-align: left;">

<!-- HEADER SECTION OF WEB DOCUMENT -->

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque at risus. Pellentesque sapien metus, lobortis at, elementum et, malesuada non, urna. Sed dignissim justo sed urna. Nulla nibh. Suspendisse vestibulum imperdiet est. Aenean enim. Nunc lacus diam, imperdiet eget, consectetuer quis,euismod eget, sem. Morbi attis. Praesent viverra massa vehicula sem. Nunc viverra varius mi. Vestibulumultrices elit quis quam dignissim ermentum. Fusce tristique leo vel lorem. Mauris dictum massa.Integer fringilla. Phasellus vitae tellus vitae elit varius eleifend. Maecenas egestas blandit dolor. Cras sagittis lobortis nunc.</p>

</div>

<br/>

<div class="pagebody" style="text-align: left;">

<!-- BODY SECTION OF DOCUEMNT -->

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed justo non est feugiat porta. Phasellusornare placerat dui. Phasellus lacus mi, vulputate non, semper quis, imperdiet vitae, nulla. Aliquam tinciduntjusto ut purus. Maecenas vitae felis. Vivamus porta nunc sit amet risus. Ut at elit. Phasellus vestibulum.Vestibulum at lectus a nisl ultrices euismod. Proin ornare adipiscing eros. Maecenas convallis ultrices mauris.Sed turpis est, porttitor vitae, luctus et, rhoncus in, leo. Nulla tristique ligula interdum elit. Sed lacinia pulvinar odio.</p>

<p>Aenean sodales lectus vel lectus. Suspendisse nibh est, hendrerit sit amet, auctor a, dictum pretium,nisi. Cras suscipit consectetuer eros. Pellentesque mattis augue nec tellus. Vivamus ut leo. Curabiturpretium mattis pede. Sed volutpat egestas diam. Fusce eget nunc non ligula rutrum elementum. Sed erat turpis,placerat ut, tempus et, vulputate ac, dolor. Fusce convallis rhoncus sapien. Phasellus elit. Donec nec risussed nisl viverra adipiscing. Aenean mauris mi, malesuada vel, facilisis id, faucibus nec, velit.</p>

<p>Proin bibendum massa a urna bibendum pulvinar. Pellentesque habitant morbi tristique senectus et netuset malesuada fames ac turpis egestas. Pellentesque ultrices scelerisque risus. Sed velit felis, convallis sed,fringilla sit amet, porttitor vel, eros. Aenean mollis, nibh id faucibus fermentum, enim quam facilisis nisi,non convallis enim arcu vitae nulla. Nulla vulputate. Integer imperdiet. Nulla feugiat dui ac sapien. Maecenas pretium.Mauris gravida. Fusce ut metus vitae diam congue vulputate.</p>

</div><br/>

<div class="footer" style="text-align: left;">

<!-- FOOTER SECTION OF DOCUMENT -->

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum lacus. Suspendisse vel turpis. Sed tempus faucibus elit. Suspendisse et lacus imperdiet nibh semper tempus.</p>

</div>

<br/>

</body>

</html>




Mobile.css File

/* pagebody style                                              */

.pagebody {

    background-color: #D1E5D1;

    font: Segoe UI;

    color: black;

    font-size: x-small;

    text-align: left;

}

/* header style                                              */

.header {

    font-size: small ;

    font-weight: bold;

    color: #00006A;

    text-align: center;

}

/* Foot style                                              */

.footer {

    font-size: small;

    font-weight: bold;

}

/*  Make author info stand out.                                          */

.author {


    font-weight: bold;

    color: red;

}

/*  link style  */

A {

    background-color: transparent;

    color: green;

    }

A:Hover {

    background-color: white;

    color: black;

    }





Tuesday, May 5, 2009

A difficult subject… Learning (Teaching) Styles

I was all set to do a technical blog post this time around but I have had a couple of recent conversations (related to a mobile learning presentation I am preparing for) with some other faculty which has prompted me to write this blog post instead.

This post is a little more "pithy" than normal but I think it is a discussion important to mobile learning.

Topics to avoid...

There are several things/topics in life that make no sense in trying to change another person's opinion on. If the topic is religion, politics, operating systems (PC versus Mac), it makes no sense in trying to convert the person to your thinking. In all cases, you may be very passionate in your beliefs but chances are the other person will be in total agreement or disagreement with you. If they are in disagreement, you stand little chance of changing their mind. Read on...

Learning Styles (Teaching Styles) and Mobile Learning

I was at a presentation last week that highlighted the differences in workers attitudes/perceptions based on when they were born. Studies have shown that depending on when you are born (I am a baby boomer whereas my kids are millennials), you tend to look at things differently. The idea is that you are influenced by the events of your youth. Baby boomers are the post World War II generation that tend to be workaholics and millennials tend to value honesty and also be especially adept at multi-tasking. There is allot written on this subject framed around everything from how it applies to human relations to marketing and sales. I will let you Google the topic for more info.

Where I am headed .... an instructor's teaching style is influenced by their learning experiences and when they were born. How and instructor learns maybe different than their students based on these experiences. A student may like multi-tasking whereas an instructor, may not. Should the instructor try to teach to the student or should the instructor teach in the way they learned (hopefully understanding that in the middle is probably the best answer)?

In the research I did for my sabbatical and from my observations in the classroom teaching 18 and 19 year olds, I have come to the conclusion that I may be more effective in the classroom if I better understand how they may best learn even though I do not share life experiences with them. Given their preference for multi-tasking and personal electronics, my thinking is that any opportunities for me to take advantage of mobile devices (SMS) and Web 2.0 tools like Twitter, FaceBook, Ning, cloud computing (Google Apps) , collaborative computing, etc. the better chance I have of delivering content that will interest them (I should also note that I teach technology and business classes). It seems to be a very responsible and pragmatic way to creating active and engaging environments' for my students. I think most people would agree that on its face this does not seem to be an unreasonable approach to take.

What I am finding from my other Baby Boomers is some resistance. Many teachers' administer heavy penalties for text messaging during class time. They see use of portable electronic devices as a invitation to sanction a lack of concentration and discipline. They would say these are "bad habits promoted by the support of multi-tasking learning behaviors." I also suspect that many statements and policies on mobile devices tend to be blurted out without qualification when in fact most teachers are probably less strict concerning mobile devices then they advertise in syllabi and class rules.

I tend to be less strict but I too have times where text messaging inhibits my ability to teach (in lecture I need to see students and their body language to determine if I am getting my point across or if there are still questions). I can appreciate a resistance to an unstructured classroom but I also see many of my peers seeing multi-tasking as a lack of discipline and more or less ineffective in regards to learning. So much so, that there resistance is leading me to wonder if I should add "teaching styles" to my list of topics to stay away from. This is a problem. How do we introduce new asynchronous technologies to the learning process if multi-tasking learning styles are seen by many as ineffective? A mobile phone is a computer. A computer can be a very using learning tool. My suspicion is that there is some level of multi-tasking with mobile devices which is appropriate for the class and subject. My fear is that more often the reaction to mobile devices may to be draw a line in the sand that shall not be passed and this topic will end up on my list of things to avoid.

I am sure someone has written a paper on this but I am not sure this has to be an empirical discussion. Is this history just repeating itself? Did the same discussion also happen when the personal computer was introduced to the classroom? Is this a topic to avoid (I hope not)?

Anyone else have any ideas?

I told you it was pithy... maybe the last two weeks of class have gotten to me ;)

Other stuff this week – Mobile Learning Assessment

I am collecting data on how teachers and faculty are assessing mobile learning. Since most us have to provide learning objective evidence as part of accreditation. What is your campus doing? Is the assessment done the same as a traditional class or do you assess mobile learning differently? Let me know your thoughts and join my Ning at mobiledot.ning.com to join into discussion.