Simpler than Web Pages and Free [easy]

I have been developing web pages (for mobile and PC devices)  for at least 15 years. As my web programming skills have improved, my page design skills have not. My pages look very retro and I fondly describe them as looking like a “ketchup bottle”. I have become a minimalist when developing new web pages (white background with a few colors and graphics). My blogs on the other hand, take advantage of built and templates or designs provided by the blog site. They always seem to me to be more appealing than anything I am able to come up with.

So… I just got a new URL for my media projects (http://garychannel.info). With that new URL I had to create a web page that would list the different programming, book, blog and photo projects I have worked on. I broke out to Microsoft Expressions and designed a page. An hour later I had designed another “ketchup bottle.” I started thinking… since both Blogger.com and my WordPress site both support pages within the blog, why don’t I create different page tabs each of my media projects and use the built and designed templates in widgets (a widget is a area on your page that allows for enhanced media like sound, video, lists of links, etc.) to show my data (text, video, photos).

I went to a Blogger.com (I already have a couple of blogs set up under my Google account). I created a new blog and designed it around page tags (books/blogs, videos and photos) that would have links to the various web pages that demonstrating the projects have worked out (try it out). I put the widgets in the blog that I thought were appropriate (there is extensive help on widgets and add-ons in Blogger) and I also turn commenting on for viewer who wanted to respond to the page. Blog comments add a social aspect to your page which is also an added bonus.

So what do I have with a blog as a web page…

I have a free web site (no hosting fees or organization rules) that I can create content for and not worry about page design expertise. I have my URL pointing to the blog (so search engines and popular url references are in place) and as far as I can see the blog has all of the benefits of a normal set of web pages. I also think the blog environment is easier for nontechnical people to use. It’s more WYSIWYG (what you see is what you get) and less about techno babble and techie tools necessary for a state of the art look.

For teachers…

I think for educator’s, blogs present a very viable alternative to traditional web page development. It’s free, it has lots of built in page enhancements and you control the project. You do not have to wait for someone to do it for you so you can be responsive to your students and current on your content. It is a great way to get started on the web or to make precious time available. We all would like to spend more time with our students then spending hours learning the technology.

My Books/Blogs page tab opened

Where to start

So how is this a Mobile Learning topic?

A little secret about blogs that  many do not know about is that blogs are usually viewable on mobile devices…  If you create a blog page, it is usually automatically available for a mobile browser (sometimes a little configuration)  With WordPress, you can add a a plug-in to display on a mobile device and for Blogger.com, the page will render just fine on a smartphone or cellphone with a data plan.  In all cases, be careful about the size of your image.  Images that are too large can sometimes cause the browser to do a lot of scrolling to see the entire image. Here is my blog in a cellphone browser emulator.  To try it on your mobile device, go to my blog page (http://garychannel.info)


Posted on July 26, 2010 at 7:50 am by admin · Permalink · One Comment
In: Easy, Free and Good Mobile Stuff, Using Mobile Tech

Using Android to Launch Mobile Learning Content [Techie]

In this blog, I am taking a turn in the techie direction. As I am preparing to teach an Android programming class in the Spring of 2011 I have been creating some test apps to learn the Google Android API’s. I am not going to spend any time on how to set up the Eclipse for Android programming (use this link for that) or how to program in Java (also a lot of resources on that). There are a whole host of videos on YouTube or other sites on programming with Google Android and Java. Most of what you get in this post is a source code template to use (if anyone has suggestions to make it better, send them along).

_______________________________________________________________________________

The Launcher App

One of the apps I see a lot of on mobile devices are launcher apps which provide a button icon (see Red School House on image below) on the desktop designed to navigate to a web page for more information. The launcher app is simple and it leverages information already available on the Internet (thus saving development time) and simply provides a app launch link in to URL.

Here is the application open but not yet inside the browser.

When one of the buttons is pressed, the application takes you to an Internet page opened in the browser. This page was formatted using MLEX but the Android browser has defaulted to a more aggressive formatting of the screen which has the effect of shrinking the test. It can easily be make bigger.


_______________________________________________________________________________
The Code

Pretty standard stuff from a Java programming standpoint. Package and import sections are straight forward. With Android, we work with activities (think of this as a screen) and intents (this of this as a request to do something – like go to the browser). We also have the Android Manfest and I have included the xml file that defines the main screen and string resources.

Starter.java

If you look at the OnCreate method you will see if opens the activity and sets the screen layout (called main and listed below). There are button events for each of the buttons that open the browser activity with a designated url.

package com.garymarrer.cis159mobile;

import android.app.Activity;

import android.content.Intent;

import android.net.Uri;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

//import android.widget.TextView;

public class Starter extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView( R.layout.main );

// Btn 1

Button link1Btn = (Button)findViewById( R.id.link1_btn );

link1Btn.setOnClickListener( new View.OnClickListener()

{

public void onClick(View v)

{

Uri uri = Uri.parse( “http://www.garymarrer.com/facsite/Default.aspx” );

startActivity( new Intent( Intent.ACTION_VIEW, uri ) );

}

});

// Btn 2

Button link2Btn = (Button)findViewById( R.id.link2_btn );

link2Btn.setOnClickListener( new View.OnClickListener()

{

public void onClick(View v)

{

Uri uri = Uri.parse( “http://www.garymarrer.com/facsite/cis159.aspx” );

startActivity( new Intent( Intent.ACTION_VIEW, uri ) );

}

});

// Btn 3

Button link3Btn = (Button)findViewById( R.id.link3_btn );

link3Btn.setOnClickListener( new View.OnClickListener()

{

public void onClick(View v)

{

Uri uri = Uri.parse( “http://www.garymarrer.com/facsite/links.aspx” );

startActivity( new Intent( Intent.ACTION_VIEW, uri ) );

}

});

// Btn Exit

Button exitBtn = (Button)findViewById( R.id.exit_btn );

exitBtn.setOnClickListener( new View.OnClickListener()

{

public void onClick(View v)

{

System.exit(0);

}

});

}

}

_______________________________________________________________________________

Android Manifest

The manifest handles permissions and setting but most importantly the name of the activity used for the main screen.

<?xml version=“1.0″ encoding=“utf-8″?>

<manifest xmlns:android=“http://schemas.android.com/apk/res/android”

package=“com.garymarrer.cis159mobile”

android:versionCode=“1″

android:versionName=“1.0″>

<application android:label=“@string/app_name” android:icon=“@drawable/school”>

<activity android:name=“.starter”

android:label=“@string/app_name”>

<intent-filter>

<action android:name=“android.intent.action.MAIN” />

<category android:name=“android.intent.category.LAUNCHER” />

</intent-filter>

</activity>

</application>

<uses-sdk android:minSdkVersion=“6″ />

</manifest>

Main.xml

This xml  file holds the screen definition.

<?xml version=“1.0″ encoding=“utf-8″?>

<!– Gary
Marrer

Android Project

–>

<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:orientation=“vertical”

android:layout_width=“fill_parent”

android:layout_height=“fill_parent”

android:background=“#000000″

android:gravity=“center”

android:padding=“7dip”>

<TextView

android:id=“@+id/view_Line2″

android:cursorVisible=“false”

android:text=“CIS159 Mobile”

android:textSize=“20px”

android:layout_width=“fill_parent”

android:gravity=“center”

android:layout_height=“50px”

android:textStyle=“bold”/>


<ImageView

android:id=“@+id/pic_view”

android:layout_width=“fill_parent”

android:layout_height=“125px”

android:src=“@drawable/school”

android:layout_below=“@id/view_Line2″/>


<TextView

android:id=“@+id/view_Line3″

android:text=” “

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:layout_below=“@id/pic_view”/>


<TableLayout

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:layout_weight=“1″

android:layout_below=“@id/view_Line3″>

<TableRow

android:layout_weight=“1″

android:gravity=“center”>


<Button

android:id=“@+id/link1_btn”

android:layout_height=“fill_parent”

android:layout_width=“0dip”

android:gravity=“center”

android:text=“GCC Faculty Web Page”/>

</TableRow>



<TableRow

android:layout_weight=“1″

android:gravity=“center”>

<Button

android:id=“@+id/link2_btn”

android:layout_height=“fill_parent”

android:layout_width=“fill_parent”

android:gravity=“center”

android:text=“CIS159 Syllabus”/>

</TableRow>


<TableRow

android:layout_weight=“1″

android:gravity=“center”>

<Button

android:id=“@+id/link3_btn”

android:layout_height=“fill_parent”

android:layout_width=“fill_parent”

android:gravity=“center”

android:text=“Class Links”/>

</TableRow>


<TableRow

android:layout_weight=“1″

android:gravity=“center”>

<Button

android:id=“@+id/exit_btn”

android:layout_height=“fill_parent”

android:layout_width=“fill_parent”

android:gravity=“center”

android:text=“Exit”/>

</TableRow>


</TableLayout>

</RelativeLayout>

String Resources

<?xml version=“1.0″ encoding=“utf-8″?>

<resources>

<string name=“hello”>Hello World, starter!</string>

<string name=“app_name”>GCC CIS159</string>

</resources>

All of the source is here but if you want to download and test on your Android (As always, use at your own risk..). You can Save as this link: http://www.garymarrer.com/android/cis159mobile.apk

Comments?

_______________________________________________________________________________

Posted on July 16, 2010 at 10:24 am by admin · Permalink · Leave a comment
In: Android, Techie Stuff, Using Mobile Tech, techie

Simple Mobile Tech … Big Gains for Students [Tech Difficulty – Easy]

I have been busy with many projects over the past several months. I have been a little neglectful of my blog but let this be the first post to get things started again. This project post is very easy to implement but I will have others in the future that are much more technical. To give everyone a “heads up” before they get in there I will be labeling the posts Easy-Challenging-Techie. Techie being the most technical where programming is probably the theme of the post. Easy will typically be HTML and Challenging could include some scripting languages. I will set the WordPress blog category that corresponds to my classifications (easy, challenging, techie). I don’t want someone to read something that may not suit them or their experience.

QR Codes

QR codes have been around for some time. Google at one point was championing them and my Android has several programs that can scan QR codes and display and store the information to a smartphone. It is my understanding that the iPhone also has software that can read QR code. QR codes are nothing more than a bar code on steroids… They can hold a variety of information (I am focusing on text based label info) in a square the size of a postage stamp. To produce the code you can link to one of several sites (Click here for Kaywa which is a nice fee generator) that provide a code generator (most of the popular smartphones have free readers but I could not locate a free reader for use with a PC and Scanner).  The QR code looks like the graphic in the top right corner of the post.

How I use QR Codes for Students

In the community colleges, smartphones are still the exception and not the rule but more students are getting smartphones. I am placing a QR Code at the bottom of my Syllabi. For the QR code text, I list the course dates, times, my contact information and the books used. This can now be captured by the student either by holding there smartphone up to the PC monitor if looking at it online or by scanning the hard copy syllabus. The benefit having that important syllabi information capture in their smart phone and not lost on a piece of paper. Anytime I can assist the student in capturing information about the course on information used by the course, I believe I am helping them out.

You can see an example of my CIS105 Syllabus with a QR Code by clicking here.

Here is a camera shot of the QR code at the end of my Syllabus

The data retrieved appears in my Smartphone which can be saved and opened again later.

CIS105 – Survey of Computers (Marrer)
B-104 | 6/1 – 7/1| M-TH 9:10-11:10
-Skills for Success with Microsoft Office 2007 (Pearson), Townsend
-Technology in Action Complete, 6th Edition (Pearson), Evans, Martin and Poatsy
- Myitlab (Pearson)

Comments or QR code mobile learning stories to share?


Posted on July 9, 2010 at 1:58 pm by admin · Permalink · Leave a comment
In: Easy, Free and Good Mobile Stuff, Using Mobile Tech

My BlackBerry/ASP.Net Faculty Mobile Web Site

My latest experiment…. Take my BlackBerry… Write a Java App with a custom Icon to launch my mobile faculty web site (written in ASP.Net 3.5).

Background:

I am updating my GCC faculty web site to have a new mobile site using ASP.Net. In conjunction with this, I have also been working with Java on my BlackBerry Curve 8330. I decided I liked the way CNN, ESPN, NYT, etc, have created neat icons to launch their web pages. I wanted the same for my students and when the page for my faculty web site launches, I wanted the pages to be mobile and PC compatible. Below is how I did it….

ASP.Net 3.5

I have had a lot of luck using ASP web pages on mobile devices. The IIS server converts most .Net controls into HTML will makes content very mobile compatible. In a previous post, I talked about a JavaScript-less quiz app I run over the Internet via my mobile phone browser that is also written in ASP.Net. Since JavaScript in mobile browsers is not universally supported, the ASP solution has some merit. The problem is that ASP.Net by default runs on an Microsoft IIS server instead of the standard Apache server. (Apache being the dominant Internet Server). I have heard .Net will run on an Apache  Internet Server( and if anyone has experience with this, I would love to hear how successful it works). Below is the output of the opening screen that I created for my students at Glendale Community College. I will be added more as I go. This is the start of the project. The page is viewable on a mobile device or PC http://www.garymarrer.com/facsite/ It has some links and text. It does not have the ASP quiz page I created but you can look at that at http://www.garymarrer.com/aspnet/default.aspx I mention this because this quiz does not use JavaScript but instead is server based and html is all the mobile device gets from the server so it can run content that it might not otherwise be an option on a mobile device.

ASP.Net Code Sample

Master Page

<%@
Master
Language=”VB”
CodeFile=”FacultyMasterPage.master.vb”
Inherits=”FacultyMasterPage”
%>

<!DOCTYPE
html
PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html
xmlns=”http://www.w3.org/1999/xhtml”>

<link
href=”StyleSheet.css”
rel=”stylesheet”
type=”text/css”
/>

<head
runat=”server”>


<title>G Marrer Faculty Mobile Site</title>


<asp:ContentPlaceHolder
id=”head”
runat=”server”>


</asp:ContentPlaceHolder>


<style
type=”text/css”>


.style1

{


text-align: left;

}


.style2

{


color: #FF0000;


text-align: center;

}


.style3

{


color: #66CCFF;

}


.style4

{


color: #FFFF00;

}


</style>

</head>

<body>


<form
id=”form1″
runat=”server”>


<div
class=”style1″>


<div
class=”style1″>


<br
/>


<br
/>


<asp:Label
ID=”Label1″
runat=”server”
Text=”Gary Marrer – Faculty Mobile Site”


Font-Size=”Large”
Font-Bold=”True”></asp:Label>


&nbsp;<asp:Image
ID=”Image1″
runat=”server”
ImageUrl=”~/images/Profile.png”


ImageAlign=”AbsMiddle”
BorderStyle=”Groove”
/>


<br
/>


<span
class=”style2″>Glendale Community Coilege<br
/>


</span><br
/>

623.845.3235<br
/>


<a
href=”mailto:gary.marrer@gmail.maricopa.edu”
class=”style3″>gary.marrer@gmail.maricopa.edu</a>


</div>


<hr
/>


<a
href=”Default.aspx”>Home</a>
<a
href=”links.aspx”
class=”style4″>Links</a>


<br
/>


<br
/>


<asp:ContentPlaceHolder
id=”ContentPlaceHolder1″
runat=”server”>


</asp:ContentPlaceHolder>


<hr
/>


</div>


</form>


<p>


<asp:Image
ID=”Image2″
runat=”server”
ImageUrl=”images/Email.png”
/>

<asp:HyperLink
ID=”EmailHyperLink”
runat=”server”
ForeColor=”#66CCFF”


NavigateUrl=”mailto:gary.marrer@gcmail.maricopa.edu”>email Page Owner</asp:HyperLink>


<br
/>


<asp:Image
ID=”Image3″
runat=”server”
ImageUrl=”images/Print.png”
/>


<asp:HyperLink
ID=”DisclaimerHyperLink”
runat=”server”
ForeColor=”#66CCFF”

NavigateUrl=”http://www.gc.maricopa.edu/legal.html”>Campus Disclaimer</asp:HyperLink


</p>

</body>

</html>

My CIS105 Web Page

<%@
Page
Title=”"
Language=”VB”
MasterPageFile=”~/FacultyMasterPage.master”
AutoEventWireup=”false”
CodeFile=”CIS105.aspx.vb”
Inherits=”CIS105″
%>

<asp:Content
ID=”Content1″
ContentPlaceHolderID=”head”
Runat=”Server”>

</asp:Content>

<asp:Content
ID=”Content2″
ContentPlaceHolderID=”ContentPlaceHolder1″
Runat=”Server”>


<div><asp:Label
ID=”Label1″
runat=”server”
Text=”CIS105″
Font-Size=”X-Large”></asp:Label>


<asp:Image
ID=”Image1″
runat=”server”
ImageUrl=”images/Bar Chart.png”
/>


<hr
/>


</div>


<div>


<p>

Class Information<br
/><br
/>

Instructor: Gary Marrer<br
/><br
/>

Office Location: GCC Main O1-116<br
/><br
/>

Email: gary.marrer@gcmail.maricopa.edu<br
/><br
/>

Web Page: http://web.gccaz.edu/~gmarrer<br
/>

Phone: 623-845-3235 or 602-235-0374<br
/><br
/>

Twitter: gccGary

Skype: improfm<br
/>

… some text omitted…. You would add your own anyway.

<li>B (80 – 89%)<</li>

<li>C (70 – 79%)</li>

<li>D (60 – 69%)</li>

<li>F 59% and below</li>

</ul>


</p>


</div>

</asp:Content>

BlackBerry

I have been creating Java apps for my BlackBerry Curve 8330 with the BB JDE and Eclipse (See RIM Developer Site for how to get started). I am not a big app user but I have always liked the way many sites have created small apps (with colorful icons) to launch their web content (I also believe the future of mobile apps is Internet based and not locally based apps i.e iPhone). There is not a lot to this program but when loaded on the BB it is an easy way for my students to reach me (telephone and email) and info on their class.

BlackBerry Code

import net.rim.blackberry.api.browser.Browser;

import net.rim.blackberry.api.browser.BrowserSession;

import net.rim.device.api.ui.UiApplication;


final
public
class mFacSite extends UiApplication {

public
static
void main(String[] args){

mFacSite instance = new mFacSite();

instance.enterEventDispatcher();

}

public mFacSite() {

BrowserSession site = Browser.getDefaultSession();

site.displayPage(“http://www.garymarrer.com/facsite/”);

//System.exit(0);

}

}

Comments anyone….

Posted on March 23, 2010 at 3:57 pm by admin · Permalink · 2 Comments
In: Techie Stuff, Uncategorized, Using Mobile Tech

It’s Presentation Time – Educause ELI Spring Forum

I have been preparing two presentations for the Educause ELI Forum on Mobile Learning.  One presentation is a short 10 minute summary on mLearning Assessment and update of some slides I prepared for the Distance Education Conference at the University of Wisconsin – Madison I did this past August. I cannot say there is more research but there is a better framework since I have had more time to reflect on what I uncovered then and an opportunity to spend more time on mobile learning.  I hope to have the presentation placed in SlideShare for anyone interested.

The second presentation is the one that may not make the conference.  It is a back up keynote presentation I have been asked to put together in case of technical issues that could potentially arise with another speaker (I will make it available in SlideShare one way or the other).  In my presentation,  I make a claim that mobile learning for most public higher ed. in the US is really mobile assisted learning.  Mobile learning and its unique pedagogical elements (learn anywhere at any time, exploration, collaboration, etc.) can enhance learning with tools that other technologies or traditional learning cannot do as well.  In my presentation, I present the idea of mLearning really being just another technology tool for the classroom.  Unless you are delivering content for distance learning, most students will be using mobile technology for some aspect of their learning.  They will be using “mobile assisted learning” and not implemented learning entirely delivered via a mobile device.

Whereas much has been done abroad with mobile based learning, in the United States at least and with public institutions like community colleges, the expense of smart phone devices and carrier support is too expensive for most students.  That coupled with the fact that most colleges have extensive PC labs and wi-fi capability, most students do not opt for the expense of a monthly data contract and the additional cost of smart phone hardware.  Although it seems that everyone has an Apple iPhone, Google Android phone or Blackberry, it does not pan out in antidotal data/experience or from surveys done by groups like Educause in their 2009 ECARS Study on Student Information Technology. Sometimes I feel like the iPhone U’s get the big press but it is colleges like my own that really need to establish their mobile learning identity.  This blog has talked to this in the past and will continue this thread hopefully with examples of low tech (less than a Smart Phone) mobile learning exercises.

Posted on March 3, 2010 at 11:51 am by admin · Permalink · One Comment
In: Issues on Mobile Learning, Uncategorized, Using Mobile Tech