2017년 6월 29일 목요일

Storyboard/wire frame for app


I want my students to design an app with multiple connections. Is there a storyboard or a wire frame that would work for middle school students? 

--
An app with "multiple connections."    What does that mean to you Leslie?

If you want an app to 'tell a story' in images a developer has to make it; probably using an Image control and lots of images stored either in Resources or offline.then  turn the pages.

If you want a communications panel there are lots of ideas here (yes you have to surf through the various posts)


Or do you want to have students develop an app that is a storyboard, allowing users to select and place images?   


A more detailed description of what you want to do (perhaps with an example) might produce a lot of comments from some very experienced AI2 developers.

--
My school has designed an app course for Middle School students. They make "pet the kitty", "mole mash" "destinations" and several other apps. Our school is hoping to design a project for students to advanced their skills. One of our ideas is to have an app for new students coming to a school. The app would have links to clubs, teacher videos, calendars, lunch menus - different ideas that student think are important for new kids at a school to know. My question is where do they do the design process? I also facilitate a 3D video game course and students complete a storyboard with the main ideas of what they want the game to be- for example a screen that introduces the game, one on how to play the game, the game, the score screen. Is there a form or a site where students can do the design work prior to starting the coding of the app?



-- 
The original way of planning and designing a computer program was (and still is) to use a flow chart ( https://www.programiz.com/article/flowchart-programming ).   AppInventor does not have a tool to facilitate this.  I use a pencil and paper to draw a diagram.  Computer based flowcharting etc. are stifling and a pencil and paper is FAST .. Most of a person's time is spent arranging things to place objects, make it look pretty rather than promoting the creative process when doing this on a computer.. The best way to create a plan might be to use a 'black'board (white board) with chalk or markers to share ideas  or a bunch of yellow sticky notes on a wall (you can move them anywhere).

Here is an article about AppInventor2 architecture 

It is a chapter in the  free Inventor's Manual  in the AI2 free online eBook   http://www.appinventor.org/book2 ... the links are at the bottom of the Web page.  The book 'teaches' users how to program with AI2 blocks.

There is a free programming course here http://www.appinventor.org/content/CourseInABox/Intro  and the aia files for the projects in the book are here:  http://www.appinventor.org/bookFiles  

How to do a lot of basic things with App Inventor are described here:  http://www.appinventor.org/content/howDoYou/eventHandling  .  The first step in planning an app is learning what is possible using the compiler that is being used (App Inventor 2).  The book and the tutorials do just that.  In order to plan, one needs to know what can be done.

 an app for new students coming to a school. The app would have links to clubs, teacher videos, calendars, lunch menus -  If the resources they point to are available on-line (a school web page etc) this is very easy using the WebVIewer and the URL links to the web pages; information not available can be made using a Label control (for scrollable text) or with more required skills, linking to an html that is stored as a Resource   and ....  Similar apps created for the most part by students are in the MIT Gallery.

AI2 is a poor platform for 3D action games...it's graphics rendering and refresh are its worst features, however some incredibly neat games have been created with AI2.

The Search for messages box at the top of this screen may be one of a student's most valuable resources  .  It can be used to search for discussions of AI2 projects.  Or search using Google:  https://www.google.com/search?q=app+inventor+campus+tour&oq=app+inventor++campus+tour&aqs=chrome..69i57.6319j0j7&sourceid=chrome&ie=UTF-8   using app inventorcampus tour  

Watch this space Leslie, others will have different ideas.    Is this what you wanted to know?

--
@Leslie,

Try mockflow.com. They have a FREE (limited) version too. It's pretty good for mocking.

-- 

댓글 없음:

댓글 쓰기