Category Archives: cs-wsu

More Research on Puzzle feature

Did a little more research and found someone created one using HTML5 and JavaScript to create a jigsaw puzzle for the web. I am thinking the best route will be using JavaScript and HTML5 because like in my last post JavaScript has the snapfit feature which will be helpful for younger children using the application.

If anyone is looking to use PHP (jQuery) in eclipse I downloaded Eclipse Helios PHP which has plugins for those librarys. I looked for plugins for jQuery on Eclipse Juno and was having no luck. I then found they had a Helios version and installed that to try it out. Just if anyone is thinking of using jQuery.

From the blog rwilliams5262 » cs-wsu by rwilliams5262 and used with permission of the author. All other rights reserved by the author.

Puzzle Activity Research

This week myself and 2 other classmates selected to work on the Puzzle section for the WAM Idea Lab Application. I started to do a little bit of researching on what it will take and what languages people have used to create similar application features such as puzzles etc. I noticed a lot of people used jQuery, JavaScript, and HTML5 to create this feature. Just going to describe some of the examples I found.

jQuery: After searching a couple different sites, I found that jQuery has a library such as: jqPuzzle. This library within jQuery lets you bring in any image as a .jpg and it will create a sliding image to make a puzzle. It seems pretty straight forward once you call the jqPuzzle library inside the code all you need to do is then apply the class to any image to use theses features. Basically this sort of library will allow you to slide images around inside the square until the image is complete. It is not like a jigsaw puzzle where you can move images anywhere you would like and they would have a snap fit when they are in the correct location.

(Ex: <img src = “apple.jpg” alt=”Apple Logo” class=”jqPuzzle”/>

http://www.jqueryplugins.com/plugin/81/

javaScript has a tool called snapfit.js. This tool could be used to snap the image to the correct location when they are in range. All you need to do is set the snapfit on the image. It is a fast and easy way to work with any image. This tool does not  need any other resources to run.

http://www.netzgesta.de/snapfit/

I think theses are some good tools to be used within the code for this feature and I feel that the snapFit feature will be the most efficient for the children using it because when the certain piece they are moving is close to the correct spot the piece would light up green and then snap to the location and if the image is in the incorrect spot it would highlight red and they will have to re try that piece again.

Just a couple ideas that should be thought about. I know we said we be using JavaScript, HTML5, and CSS for this application. But I think we will need to add in some jQuery libraries to be implemented with the JavaScript code.

Will post more when I get in touch with the rest of the group.

From the blog rwilliams5262 » cs-wsu by rwilliams5262 and used with permission of the author. All other rights reserved by the author.

Using GitHub with SSH

If you’ve noticed, GitHub offers three ways to access a repository, two with read-write access and one with read-only access. For this project, each user is granted push-pull access (read-write) so eac of us can contribute code. The two methods which provide both read and write access are HTTP and SSH.

Using HTTP you can download an application and gain access using your GitHub credentials. As a member of the project you’ll be granted write privilege with these credentials (the project is open source and therefore, anyone already has read privileges). 

The other option is to use SSH, which allows you push and pull directly from the command line. In order to do this, however, you need to copy your public ssh-key into the ssh section on your GitHub account. Once the key to your computer is in the settings on your GitHub account you’ll be able to push to the database.

Once I have some more time to sit and work on it, I am planning to provide some steps to accomplish this. I thought having the information now would be helpful for those who would like to look into it more individually.

From the blog CS 401 - Object Oriented Design » cs-wsu by dillonmurphy10 and used with permission of the author. All other rights reserved by the author.

betoluna » CS WSU 2013-02-05 22:35:13

Hello again,

If you are using a mac and have problems running an HTML5/JS project using the HTTP preview localhost to test internally within eclipse 4.2 Juno, do the following:

1. Choose the web perspective.

2.Create a new Static Web Project.

3.Type your project name and click in the new runtime tab. That should bring another dialog

with a list of servers (HTTP Preview, HTTP server, J2EE preview). The problem I referred to in my previous post was with the HTTP preview, for which there is a fix for another version of eclipse namely Helios. If you want to be able to test within Juno, select the “J2EE preview” and click the “Create a new local server” box, then click on finish.

Continue setting up your project as usual, and you should be able to run and test your app from within eclipse now.

Hopefully this helps.

 

 

for another version of eclipse (Helios)

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

Prospective Database Ideas

After class on Monday our group has decided to look into some of the potential ways databases could be used in this application to set up a framework and allow the client to switch projects simply. In order to do this we thought about looking into SQLite to keep a local database on the ipad, in which case internet access wouldn’t be needed. Before proceeding however, we need to look further into whether or not PhoneGap will allow us to use SQLite in the app.

If we decide as a class to proceed with the idea of having databases initialized to build a template it is crucial to work with some of the other groups in the early development phases as to plan for dynamic content.

There is still a lot more investigating to be done, but our initial thoughts are promising. For more information and documentation take a look at our wiki on github:

https://github.com/CS-Worcester/CS401Spring2013/wiki/Database

From the blog CS 401 - Object Oriented Design » cs-wsu by dillonmurphy10 and used with permission of the author. All other rights reserved by the author.

CS 401 second week blog

On monday, it is the first meeting for our class. We meet at Worcester Art Museum. We have talk a little about what our app should look like. According to the discussion, the app should have :

home page,

history chapter,

archaeology,

materials and construction

conservation

other example

activities

-Coloring

-Puzzle

Hence, this week, I look at phonegap web and mozilla. And looking forword for more idea next week.  

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

GitHub

Tonight after our class meeting, I spent some time practicing with GitHub. I created a separate repository for my group to put up some of the code they start to write to figure out how we can design the puzzle activity for the app. I did not get to looking at code for how it would be developed, but started to get an understanding on how to push files from GitHub to my local machine and then push changes back up. I got it working once to make changes to one file pushed down from GitHub and then pushed back up.

Attempting another push and fetch attempt for a file created on GitHub.

From the blog rwilliams5262 » cs-wsu by rwilliams5262 and used with permission of the author. All other rights reserved by the author.

jQuery Mobile

What is JQuery Mobile?

jQuery mobile is essentially a mobile app development platform that builds upon jQuery:

“A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”

–jQuery Mobile Website

A mobile Javascript Library, sounds like exactly what we are looking for!

Where did I start?

I have experience with jQuery so I guess one could say this was started two years ago. However the mobile framework is completely new to me. I would recommend basic jQuery tutorials in addition to javascript tutorials. But my jQuery Mobile adventure began at Google  when I took a shot at searching “jQuery Mobile” I then continued to download jQuery Mobile 1.2.0 and jQuery 1.9.0.
Like most things you need walk before you run, so I started with a very basic hello world interface.
Step1: Setup the website
I always recommend the boilerplate folder setup:

css/style.css
js/jquery.js
js/jquerymobile.js
js/script.js
index.html

Style.css is not necesary however i always recommend it for custom styles.

Here is the basic index.html code with notes:

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<!-- Importing all required sources -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquerymobile.js"></script>
</head>
<body>
<!-- The basic jQuery Mobile Setup is Header, Content, Footer there are defined as 'data-roles' attributes
     the data-role attribute is used extensively with jQuery Mobile -->
<div data-role="header"> <h1>This is the Header!</h1> </div>
<div data-role="content"> <p>This is the content!</p> </div>
<div data-role="footer"> <h3>This is the footer!</h3> </div>
</body>
</html>

This should look like this:

This is the extremely basic level of a jQuery mobile app! From here you can do more from this point, jQuery is very well documented so i would recommend going to their doc page which can be found on their website. here are some other screenshots of stuff that I was working with:
Here is a reactive concept I am working with!

Here is a basic testing page:

I hope to be posting more about this, however it is still very new to me. I am open to comments or suggestions!

From the blog itsJoe&#039;s Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.

My 2nd Post

Hello everyone,

This week, i did not started to work on the app yet. Instead, i spent time on learning HTML 5, CSS, and javascript. I have never learned those concepts before and had no idea about how they will be used to program the WAM app. Hopefully, the next week will be the week full of ideas to start off woking on the app.

From the blog daunguyen10&#039;s Blog » CS-WSU by daunguyen10 and used with permission of the author. All other rights reserved by the author.

My 1st Post.

Hello everyone,

My name is Dau Nguyen,  a foreign student from Vietnam. Currently, I am a full time student at Worcester State and i am in Junior year of computer science. I’m also taking a minor in math. Taking this course as a requirement of CS major and i’m really excited about it. Since the beginning of my major, i have found that this course is going to bring to me the real experience of a real working environment. It’s also going to help me build up my team work skills.

Through this semester, i and my teammates will work together to develop an application for Worcester Art Museum. This is my first time programing an app that can be used in a real event. And i see that i am going to spend a lot of time on this course because there are many concepts, which i currently don’t know yet, will be used to complete the app…

Anyway, a excited semester ahead, and i’m looking forward working with my teammates to complete the app. Hopefully, we will have a successful semester on this course.

From the blog daunguyen10&#039;s Blog » CS-WSU by daunguyen10 and used with permission of the author. All other rights reserved by the author.