Monday, May 13, 2013

Teachers Guide To Developing Android Mobile Applications Curriculum



PROJECT OVERVIEW: Developing Android Mobile Applications in Flash
Overview

 A curriculum enabling students to design, develop an then test mobile applications on mobile devices addresses several cross cutting trends affecting the learning of technology curriculum(Becta,2008). The current trend of mobile devices being used in and out of the classroom to communicate, collaborate and personalize learning opportunities makes teaching and training students to understand the design and technologies involved in how these tools work imperative.

Mobile Application Development can be done in a variety of formats and with variety of tools. This project focuses on the team development of mobile application design, development and testing using the Flash platform. Enabling students to develop their own personalized Web 2.0 tools enables collaboration and information sharing in new ways which push the personalization of education tools to new levels.

Professional Outlook

Jobs related to mobile design and development are expected to grow anticipating needs using multiple development tools. The testing and debugging industry of mobile applications is also an anticipated growth area. According to one Business Week articleThe demand for programmers who can write for mobile platforms, such as Apple's iPhone, Google's Android, and Research In Motion's BlackBerry, has stoked competition among recruiters, driven up salaries, and led employers to consider getting new talent through acquisitions”(MacMillan,2010). This growth is expected to continue as more companies more to employing mobile strategies.

Many companies are now including mobile strategies into their marketing plans. To satisfy the need for this type of developer there are the need for skilled developers and designers who are familiar with the mobile applciation process.  Students who are introduced and begin learning core skills with mobile design and development are at a distinct advantage entering the job market with critical skills and knowledge of the process of designing mobile applications and the possible development tools.


Focus

This course will provide an overview of the mobile application landscape in terms of devices, development, operating systems and changing levels of personalization in terms of the technologies available and perspectives on organizing content on this medium.  

Content development for mobile applications and the influence interface design has on the user experience will be a focus. Students will acquire technology skills to develop their own applications in the Flash Authoring software and will test and debug these applications on Android Devices.

Student application of Adobe Photoshop and Flash Authoring Software will enable them to gain first hand experience creating the necessary graphics,.apk files and problem solving skills that relates directly to the real world experiences of authentic mobile development.

As part of the cumulative project students will investigate and explore the process of uploading their development projects to a real world marketplace(Google Play), and evaluate the requirements and eccommerce benefits.
    
Students will work in collaborative teams to learn and apply the technologies, synthesize design strategies and present a final cumulative project at the end of the course. Each section of this course will represent a key component to the process of developing an application and will need to be repeated collaboratively for the final project.
     
The team approaches to the projects and the ability of groups to address each project efficiently and with a conscientious approach towards design and development will improve the ability of the group to answer an authentic based question which will drive all aspects of the project. Addressing 21st century employability skills such as “real world scenarios, team work, cumulative projects and the sharing of design and technology skills are critical for success.



Problem/Project

     Based on an instructor driven authentic problem, students will work in small groups replicating a design/development studio.Students will be asked to develop projects which address an authentic need for a mobile application. Through the process of concept development, creation and development of the application, testing and debugging the applications, students will be applying collaborative skills to synthesize ideas and technical skills to create the “app” and conclude with a group presentation of their final application design.


Learning Challenges
Students will need to address a wide range of challenges to complete their projects.
Concept Development
Student fluency using technology tools
Addressing the authentic questions for “real world” scenarios
Maintaining a strong collaborative, team approach to problem solve and resolve critical issues related to technology.

Knowledge/Skills/Attitudes
Knowledge:
Information technology disciplines
Computer & Tablet Hardware
Phones & Tablets
Desktop Computers
Software
Adobe Flash
Mobile Operating Systems with an emphasis on OS
Application with an emphasis on design.
Internet, Web research and web based collaboration tools
Digital Media
Business/Marketing Trends
Social Media
Web Based Advertising
Skills:

Technology Skills
Understanding Basic Code Structures
Designing graphics
Application of Design concepts to software technology
Managing different file types and Software knowledge
Application of API technologies
Interacting with multiple computer based interfaces (desktop computers, mobile devices)

Communications
Communicate in professional manner (e-mail, voice mail, in person)
Listen empathetically
Document process
Report for feedback
Make professional presentation
Critical thinking
Troubleshooting (problem solve)
Synthesize findings (draw conclusions supported by evidence)
Problem Solving
Collaboration
Merging expertise (distributed knowledge)
Work together as a team
Give/receive feedback
Prioritize tasks
Compare and evaluate possible solutions
Project Management
Attitudes (habits of mind):
Value teamwork
Accountability to team and client
Tenacity/Persistence
Curiosity and open-mindedness
Challenge assumptions

Intended Outcomes
Research Mobile Application trends; document and report findings
Research career possibilities (Graphic Designer, Programmer, Information Architect, Software Developer)
Troubleshoot Mobile Application on Device (problem analysis)
Use of Flash Software (Actionscript 3.0) to Create Mobile Application
Design Mobile Application Information Architecture
Analyze Mobile Application Development Environment
Task management/project management/problem solving
Present proposed solution to Authentic Scenario

Assessment
Formative rubrics
Employability Skills
Teamwork
Technical Components
Completion Targets
Summative rubric

“Developing Mobile Applications in Flash” includes team-based problem/project projects which address IT skills and implement employability skills.

Project Descriptions
                  Project 1: Information Architecture & Content Design
Employability Skills: Team member roles and tasks; plan, analyze, design and develop methods for organizing content and developing architecture for the anticipated navigation of the consumer through the content of the mobile application.
IT Skills: Problem-solve
Project Skills: Create a complete paper prototype which includes ideas for graphics, color scheme, text, potential click streams and organization of content considering the user.
Project 2: Flash App Layout Design Activity
Employability Skills: Team member roles and tasks; plan, analyze, design and develop a four page mobile application using Flash software.
IT Skills: Problem-solve
Flash Skills: Create multiple pages, graphics, text and Actionscript code to preview a mobile application.
Project 3: Learning About API Technology
Employability Skills: Team member roles and tasks; identify and implement API technologies that can add usability to the mobile application design.
IT Skills: Integrate API’s using Actionscript and Flash software into design.
Project Skills: Create a document that clearly and concisely records the team’s performance. The document should be free of spelling and grammar errors.
Project 4: Creating the Certificate & Exporting the APK file
Employability Skills: Team member roles and tasks; export application to device and test application for proper functions of application and device use.
IT Skills: Properly create self signed certificate and export APK file for addition to Android device.
Project Skills: Exporting the APK file properly will enable the students to view the application on the Android device.
Project 5: Creating an Authentic Mobile Application
Employability Skills: Team member roles and tasks; plan, analyze, design and develop a mobile application from concept to finished application based on an authentic scenario provided by the instructor.
IT Skills: Problem-solve
Project Skills: Concept development, information architecture development, development of app in Flash software and presenting the final app on an Android device.
Project 6: Presentation of final application
Employability Skills: Team member roles and tasks; present final application and describe details of the process of concept development and technology development. The presentation should also include how the application addresses the authentic scenario and considers the consumer in the design process.
IT Skills
Project Skills: Professional organization and presentation of mobile application content. Well planned and sequenced to explain their design and development experience.
















PROJECT 1: Information Architecture & Content Design
PROJECT 1 GOAL
The goal of this project is to develop students understanding the proper layout of information in a mobile application and also the anticipated user experience of the consumer of a mobile app.
  1. Complete Venn Diagramming  for Content, Context and Users
  2. Complete Information Architecture paper prototype for mobile application idea (should contain layout for at least 5 pages).
  3. Introduction to Flash Mobile Templates

  4. Self Assessment for Mobile Environment & Design Knowledge

PROJECT 1 DESCRIPTION
Project Description: In this project we will investigate the components of a mobile architecture and prepare a mobile architecture design. 

Final Project Outcome: The final project for this will be a completed wireframe representing an idea for a mobile application and a series of drawings representing the home page with navigation and 3-4 other pages. The outcome should reflect the “authentic scenario” described below.
Anticipated Length of Project: Three 45 minute sessions
Authentic Scenario: Student idea development and concepts will be driven by an authentic project which represents a need in the “real world”. In the case of this project students are asked to develop a learning application for children aged 3-7. Students should consider the user needs,context and content in the completion of the project.
The Project Components
Venn Diagram Brainstorm
This activity begins with the discussion of the variety of mobile content and the needs and wants of consumers when they use mobile applications. Students will be asked to develop a simple idea for an application based on a children’s game or …….    Students will then develop a list of items under ach heading content, context and users. (see activity sheet)

Paper Prototyping
After completing the brainstorming activity the ideas will be synthesized into a paper prototype which will take into account the screen size in pixels, color scheme, click streams, graphics, text styles and organization of pages and content in application. It must also address the anticipated user and their wants.
Considerations in This Project:
Screen Sizes and resolutions
Consider user interaction with content.
Click streams and how they relate to content
Paper prototyping-wire framing
Device differences

Coverage Area Terms:
Mobile Strategies, Mobile Design,Needs-Goals-Context,Application Types, Application Contexts, Mobile Information Architecture, Elements of Mobile Design(color, look& feel, graphics, type, message).

Design Components of This Lesson:
Creating a paper prototype with proper screen considerations, device, wireframing and content.

Technical Components: Flash Software
Introduction to Flash Template Size

Group Components:
Group Research
Discussion
Collaboration with content

















Project 1: Aligned Learner Outcomes
Student Outcomes
Performance Indicators
Employability Skills? Or 21st Century Outcome
Integrated Activity & Assessment
Create a complete paper prototype which includes ideas for graphics, color scheme, text, potential click streams and organization of content considering the user interaction with a mobile application.

1. Organized lists of content and information contained in the application (wireframe).
2. Color scheme appropriate for design.
3.Drawings depicting
Potential graphics and text layout.
4. Consideration of user in button sizes and interaction on device of visual elements.
5. Organized structure of information architecture mapping every possible navigation through application design.
6. Description of notable click streams for consideration of end user obtaining data.
Teamwork
Collaboration
Identifying consumer needs
Marketing
Design/Layout skills
Problem solving
  1. Venn Diagram Assignment
  2. Paper Prototype  wire framing assignment




Assessment: Rubric











Project 2: Flash App Layout Design Activity
________________________________________________________________________

PROJECT 2:GOALS
The goal of this project is to have a fully functional 4-5 page application which can be tested within the program. The application should also contain the components of the information architecture and paper prototype from the previous project.
  1. Integrate information architecture and design into layout into flash software
  2. Have pages link by buttons back and forth
  3. Insert images and text
  4. Test your application as a movie and view for problems(debugging)
  5. Develop basic understanding of Flash Interface & Tools

________________________________________________________________________

Project Description: Using a video tutorial to assist us will walk through laying out a mobile application in the Flash software. This tutorial will allow students to learn the interface of Adobe Flash and begin the layout of their first project.
Project Outcome:
For this app you and your partner will create a basic application which has a minimum of 5 pages. Each page should have a button which directs it back to the home page and/or the next page.

Anticipated Length of Project: Two 45 minute sessions

Considerations in This Project:
Integrating Layout into software
Flash software skills
Collaborative Technology Learning
Problem solving Layout issues
Coverage Area Terms:
Flash CS5.5,Layers,Timeline,Libraries,Buttons,Actions,Actionscript 3.0,Stage,toolbar,pages,keyframes,jpeg,png,Android template,text.

Design Components of This Lesson:
Creating Pages-These will be the separate areas to add content and navigate between.
Adding Graphics-These will be images or pictures made with Photoshop which can be added to the application.
Making Button-This is an action we can add to a graphic to send the user to another place on the timeline or web link. Buttons can be made in the Photoshop software as well.
Integrating an Information Architecture-This is the organization of content intended in the design of the application.


Technical Components: Flash Software
Creating & Managing Layers
Making Buttons
Text Tools
Inserting Key frames
Stage sizing and Placement of Elements

Group Components
Teamwork:
Organization of content as a small group
Idea development deciding on a topic and adding graphics, creating layout and executing projects.



Assessment Rubric/Self Assessment
Project 2: Aligned Learner Outcomes
Student  Outcomes
Performance Indicators
Employability Skills? Or 21st Century Outcome
Integrated Activity &Assessment
Create a complete 4-5 page mobile application which can be tested in the Flash interface.

1. Application of information architecture and design (color scheme, graphics, text) into Flash software.
2.Technical components of Flash software properly used(pages,buttons,keyframes,graphics,text,testing,layers,libraries,stage orientation and sizing, templates.
3. Use of original graphics in layout and design created in Photoshop or other graphics program.
4. Consideration of user in button sizes and interaction on device of visual elements.
5. Layout neatly organized and comparable to paper prototype.
6. Video tests as expected and moves properly from page to page.
Teamwork
Collaboration
Technology task completion
Design/Layout skills
Problem solving
Project Management
1. Step by step tutorial outlining all technical components of Flash application.
2. Students apply own project idea to design.



Assessment: Rubric


















Project 3: Learning About API Technology
________________________________________________________________________
PROJECT 3:GOALS
The goals for this project are to introduce students to API technologies and have them integrate some examples into their own projects.
        Complete overview of API’s
        Conduct research on current available API technology
        Complete Accelerometer tutorial
        Complete Google Map Tutorial
        Complete Video Tutorial
        Integrate API into current Application idea
   ______________________________________________________________________

Project Description: In this project students will be given an overview of API technology and what it can do. Students will also be asked to do their own web based research on API’s and contribute to class discussion. Understanding what API technology can do can have a huge amount of interactivity and power of tools to your app.

Students will conduct web based research in small groups and report out to the rest of the class. The web based research should be based on finding what are some new current API’s and identifying the context of the users and technology connected to these API’s(mobile phones, web based, tablets, apps).

Central Question: How can API technology change our interactivity with mobile devices?

Assignment 1: Web Research response sheet on API technology.

Assignment 2: Students will be introduced to the accelerometer template in Flash.

Assignment 3: Students will be shown the example of adding a Google map link to an application.


Project Outcome: At the conclusion of this project students will have a more broad understanding of how API technologies can be integrated into their mobile applications. Students will also have an understanding of the constantly changing environments of technologies as they relate to adding usability to mobile devices.

Students should have completed the two video based assignments which include analyzing and changing the code in the accelerometer template and the Google Maps tutorial.  Students should also have conducted web research on API technology and reported back to the class.


Anticipated Length of Project: Two 45 minute sessions



Considerations in This Project:
Mobile Device Interaction
User Technologies
Operating System Differences(OS ,Android, Windows)

Coverage Area Terms:
API’s
Video
Audio
Accelerometer
GPS
Maps

Design Components of This Lesson:
Choice of graphics for accelerometer tutorial
Page layout for Google map
Choice of video

Technical Components:
Code knowledge for Accelerometer
Code knowledge for Google Map
Integrate video into application page(adding files to database/linking video)

Group Components
Teamwork in developing fluency with technology application.
Communication on critical technical components of tutorials


Project 3: Learner Aligned Outcomes
Assessment Rubric/Self Assessment
Student Outcomes
Performance Indicators
Employability Skills? Or 21st Century Outcome
Integrated Activity & Assessment
Students will have abroad understanding of the API technologies and how and they can add usability and function ability to mobile applications. Students will research the environment of these technologies and report back to the class.

Students will then be led through 2 separate tutorials which will introduce them to applying API’s in Flash to applications.

Assignment 1: Students will be introduced to the accelerometer template in Flash.

Assignment 2: Students will be shown the example of adding a Google map link to an application.

1. Student research and report a current web based article on mobile API technology. Student should read and report most relevant information about the technologies for class discussions.
2. Students will have a completed Flash file from the accelerometer template which represents their own image and objects.
4. Students will have a final flash file which incorporates a Google maps link.

Teamwork
Collaboration
Software application skills
Problem solving
Identification  of Technologies

  1. Research response sheet.
  2. Completed Flash files of Accelerometer and Google Link.



Assessment: Rubric


Project 4: Creating the Certificate & Exporting the .APK file
________________________________________________________________________
PROJECT 4: GOALS
The goals for project 4 are to prepare a Flash file for export to an Android device and be able to check the application for errors. The icon which shows on a homepage is also created and added to the file.
        Learn the steps to create a self signed certificate
        Learn how to export the .APK
        Add file to the Android device file system.
        Test and debug application on device
        Install Adobe Air Software
        Create 48pxX48px icon for app project and add to project
        Understand how to add additional files to package of project
________________________________________________________________________

Project Description: This project will allow students to walk through the process of creating a file certificate then exporting the .APK file and adding this file to a device for testing. The goals of this project are to experiment with the process of debugging an application by viewing it on a device. In this project the basics of creating an icon for the application and the basics of adding an app to the market.

Project Outcome:
Small groups have successfully exported an .APK and created an icon which has been uploaded with the file.
Students are also aware of the App market.

Anticipated Length of Project: Two 45 minute sessions


Considerations:
Creating A Certificate
Creating the Icon(Icon Design)
Device file systems
Debugging issues
Exporting the .APK file

Coverage Terms:
Self signed Certificate
APK
File Managers

Design Components of This Lesson:
Creating the Icon Graphic
Resizing Images


Technical Components: Flash Software
Creating the Certificate
Exporting the APK
Adding the application to the Device

Group Components
Teamwork
Communication
Collaboration with sharing the processes involved with creating certificate and exporting files.

















Assessment Rubric/Self Assessment
Project 4: Aligned Learner Outcomes

Student Outcomes
Performance Indicators
Employability Skills? Or 21st Century Outcome
Integrated Activity & Assessment
Students will create a self signed certificate and export their application as an .APK file.
They will then add their application to an Android device and test and debug their application.
1. Exported .APK file.
2. Application fully functional on Android device.

Teamwork
Collaboration
Software application skills
Problem solving
Identification  of Technologies
Testing & Debugging issues
Graphic Design/Marketing Skills.

  1. Tutorial on creating an Icon for the application.
  2. Tutorial assisting with creating the self signed certificate and exporting the .APK.
  3. Adding the APK to an Android device and testing the functionality.



Assessment: Rubric






















Project 5: Creating an Authentic Mobile Application
________________________________________________________________________
PROJECT 5:GOALS
The goal for Project 5 is to have students create a mobile application collaboratively based on an authentic scenario. Students should need to use all of the projects leading up to this one in order to be successful.
        Students groups synthesize and create paper prototype
        Collaborate on the integration of Flash software to create application design and layout
        Export application to Android device
        Address authentic scenario proposed by instructor
________________________________________________________________________
Project Description: This project will allow students to develop their own idea for a mobile application based on an authentic question. The students will need to revisit each project and master the skills entailed in order to create a cumulative group project. The challenge to students will be to collaborate and share skills, ideas as well as address the authentic scenario provided by the instructor.

Project Outcome: Small groups should have successfully collaborated and developed several artifacts from their development.  An information architecture, final app on device, development notes, anticipated user experience, icon, graphics, applied technology in the application.

Groups should be able to describe their approach, challenges, collaborative experience and how well they address in a statement how they addressed the needs of the authentic scenario.

Anticipated Length of Project: Eight to ten 45 minute sessions.

Considerations:
Project Based Approaches
Project Management
Authentic Tasks
Mobile Design Process
21st Century Skills

Coverage Area Terms
Testing and Debugging
Information Architecture
Layout

Design Components of This Lesson:
Information architecture based on anticipated user interaction
Icon for application
Graphics
Buttons
Color scheme (color scheme designer 3)

Technical Components:
Flash file containing all pages and technologies in application
Exported .APK file
Application installed on mobile device for presentation

Group Components
Teamwork
Collaboration
Presentation skills
































Assessment Rubric/Self Assessment
Project 5: Aligned Learner Outcomes

Student Outcomes
Performance Indicators
Employability Skills? Or 21st Century Outcome
Integrated Activity & Assessment
Students will create a fully functioning mobile application which addresses the
Authentic question posed by the teacher. Students will apply their knowledge of mobile design, interface design and information architecture to create app which serves its consumer. Students will present the cumulative project to their classmates and describe their creative and development process. Connections to authentic needs should be made in the presentation.
1. Completed 4-5 page mobile application which addresses authentic question.
2. Application fully functional on Android device.
3. Application includes icon and works smoothly and effectively on device.
4.Group presentation contains components of the groups design and development process and addresses authentic questions needs. Presentation is professional in quality.

Teamwork
Collaboration
Software application skills
Problem solving
Identification  of Technologies
Testing & Debugging issues
Graphic Design/Marketing Skills.

1.Group project work and journaling addressing the mobile design and information architecture.
2.Application of API technologies. Desire to add heightened levels of interactivity with technology.
3.Project management with group and ability to delegate tasks necessary to complete project.
4. Application exported to device and debugged for errors and bugs.
5. Final professional presentation of all group members describing design process and development. Includes descriptions of how the design addresses the authentic question.



Assessment: Rubric









Project 6: Professional Group Project & Presentation
________________________________________________________________________
PROJECT 6:GOALS
The goal of this project is to present in aprofessional manner the application which has been developed and also present to a group the components of the mobile design as well as the process of development.
1.Complete process of exporting .APK file and creation of icon for the application.
2.Develop keywords and product description for the application to be marketed with.
3.Create promotional graphics and visual  presentation outlining the marketing strategy for the application(includes content,context and user needs).
4.Present a cumulative project which walks through the process of concept development and design,development strategies and issues and addresses the real world application of the app.

_____________________________________________________________________
Project Description: Using a video tutorial to assist us will walk through laying out a mobile application in the Flash software. This tutorial will allow students to learn the interface of Adobe Flash and begin the layout of their first project.
Project Outcome:
For this app you and your partner will create a basic application which has a minimum of 5 pages. Each page should have a button which directs it back to the home page and/or the next page.
Anticipated Length of Project:
Considerations in This Project:
Integrating Layout into software
Flash software skills
Collaborative Technology Learning
Problem solving Layout issues
Coverage Area Terms:
Flash CS5.5,Layers,Timeline,Libraries,Buttons,Actions,Actionscript 3.0,Stage,toolbar,pages,keyframes,jpeg,png,Android template,text.

Design Components of This Lesson:
Creating Pages-These will be the separate areas to add content and navigate between.
Adding Graphics-These will be images or pictures made with Photoshop which can be added to the application.
Making Button-This is an action we can add to a graphic to send the user to another place on the timeline or web link. Buttons can be made in the Photoshop software as well.
Integrating an Information Architecture-This is the organization of content intended in the design of the application.


 Technical Components:
Use of professional presentation software
displaying on Tablet Devices


Group Components
Teamwork:
Organization of content as a small group
Clear and Professional presentation using software and
Professional presentation


Assessment Rubric/Self Assessment
Project 6: Aligned Learner Outcomes
Student  Outcomes
Performance Indicators
Employability Skills? Or 21st Century Outcome
Integrated Activity &Assessment
Professional
Presentation using presentation software and tablet technology
Professional technology infused presentation.
Teamwork
Collaboration
Technology task completion
Design/Layout skills
Problem solving
Project Management
1. Step by step tutorial outlining all technical components of Flash application.
2. Students apply own project idea to design.
 Group Involvement
All students show an understanding of all core material.


Marketing Strategy
Students present strategies for the marketing of their app to a target market.


Presentation includes discussing the process of design and development


Students are dressed professionally and present with proper vocabularly.


 All member participation and involvement.



Clear strategies for marketing application in presentation.
 Use of modern technology tools and descriptions throughout project presentation. Collaborative Approach apparent in final project and presentation.
Assessment: Rubric