Use of HTML5, SmartFoxServer, and PottyMouth in a responsive design. Yes it can be done in an interesting and social way.

About: ISO Interactive‘s use of HTML5 and SmartFoxServer (a multi-user technology)
Author: Troy Hipolito
URL: http://www.isointeractive.com

ISO Interactive related articles:

 


Mixing HTML5 with other technologies

At ISO Interactive,  our challenge was creating and unique and social experience. Maybe do it in a way that can be engaging as well as passive. Sometimes you don’t want to have to run full throttle for a creative site that can be informational. But sometimes you do. Well maybe not full throttle, but let’s say “politely engaged”.  It really should be the choice of the user.

Speaking of choices, the particular technologies used for this project was simply a byproduct of the goals (and what we thought we could probable pull off).

help4

We wanted to make a traditional website with strong social components. That way the visitors that only wanted to use it as a information site could. They can see images, click for the videos and read the related articles. They could also post comments on the page, connect out via their favorite social network (on the left and the bottom of this article). But all this is pretty basic stuff.

For crying out loud,
this is a interactive group, and
an award winning one at that!Let’s bring it up a notch and make
something that is beyond
“passive social”.
adobelogo

Let’s make it “active social, Or at least have the option of being so. So you are probably asking yourself, “what the heck does that mean?”

Passive social is what we mentioned already. Things like leaving messages, posting to Facebook, Twitter and all that. But what about active social? Well that’s easy. It’s the ability to communicate in real-time. You text someone on your phone, and go back and forth. It is conversation not dissimilar to a phone call or even a group of people talking. It is about the conversation in the moment.

help02

And what if you are reading one of these fancy articles on this ISO Interactive website and want to talk about it? Not leave a comment or post it on a social network, but talk about it with another person? A person that happens to be reading that article or at least in the same section of the site as you (at the same time).

You might, just – want to talk to that person. Say “hey, what do you think about this?”

help01

So what we did was create a virtual world in the web site. In this world you could have a little person to control or what we call an “avatar”. Your avatar can discover and play with their environment, as well as communicate with other avatars. Some of these avatars can be controlled by real people, while others are simple bots.

You could even communicate with the real people outside the world. Like chatting in real-time with someone about one of those ISO articles we previously mentioned.


Technical stuff 

This may all be interesting and important, but the question that the techs will probably ask is how did you do it?”

It was not really that hard. With the right technology and a specific purpose – you can pretty much do almost anything.

But for the purpose of this blog post, I am not going into the step by step process. However, I can provide the following insight. If you are interested in developing such things please post a comment at the bottom of this page, reach out via the contact form, Twitter message or even our Facebook.

Now getting back to some of the technology discussion. ISO Interactive, as a group, is already well versed in traditional web programing, interactive design, and multi-user development. It was just about bringing things together that was now technically possible, but not normally done.

icon_html5_01icon_sfs_01

So HTML5 along with CSS3 and SmartFoxServer were our main candidates for technology on this project.

HTML5 with CSS3 could now stylize the look and feel of the site needed. CSS3 helped with the design being responsive. So it worked without a Flash Plugin. Besides the displaying beautifully on the website the responsive part allowed it to be just as wonderful on a tablets and mobile devices.

SmartFoxServer allowed for the avatars to sync animations, chat, and interact in various ways. Another advantage of SmartFoxServer is that it is extendable with JAVA modules. Those are called extensions. Used for additional functionality and connecting with 3rd party tools. We built several SmartFoxServer extensions in the ISO world.

Combination word monitoring extension


Once people chat their information it must be monitored in some way. So on top of the basic blacklist bad word filter that is an optional part of SmartFoxServer we included PottyMouth. We built an extension to work correctly with it to allow monitoring of word and phrase types.

You can read a blog article on PottyMouth at: http://www.isointeractive.com/blog/interview-pottymouth-ceo/

Port extension

The firewall in some office buildings block access to certain ports or connections of technology that is not standard to their system. So we created an extension to identify those cases and provide an alternate single player mode experience.

Besides SFS extensions, we wanted to add other single player experiences.  We added a few new games and features to the site or world as time permits.

The home page is normally the first place a visitor enters unless given a specific link. So we added 2 single player micro games. These are the pinball game and hockey game (located on the homepage of this site). These micro games are all HTML5 and JavaScript. So it works on most mobile devices, tablets as well as common browsers.


What’s Next

Below are a few things we are currently working on. Not sure what the order of things will be, but we are also open to new suggestions. Just leave a comment and we will do what can. 🙂

  • Change your avatar: in the chat areas type “/avatarchange” (without the”” of course).
  • Direct URL for portfolio showreel: In the URL field type > http://www.isointeractive.com/#showreel .
  • Enter ISO Interactive as a full virtual world mode: In the URL field type > http://www.isointeractive.com/#virtualworld .
  • Modes: Keep full screen or regular when going to different areas.
  • Identify real people vs. bots: Real people will have a red circle with the letter “r” in it.
  • New micro game: For the home page.
  • Seasonal graphical changes: In the world.
  • Help feature: To link to this article.

Definitions  Just a quick list of important words relating to this article and what they mean.

  • Virtual World: Similar to MMO’s, 3D worlds, Realtime Simulations. Can be a web game, desktop application or a mobile app that allows the user to interact with other users in real time with the use of avatars
  • Avatars: Little characters or figures that emulate a player or in game object in some aspect.
  • Black list: Basic chat filter that blocks predetermined words that are considered profanity or not acceptable.
  • White list: Also known as a Revers Dictionary. A large list of allowed words. It blocks any word not in the self-contained dictionary.
  • SmartFoxServer: Popular technology that allows multiplayer games for many different types of technology.
  • Flash: Software best known for development of 2D games and interfaces.
  • PottyMouth Filter: Technology used to not only filter, but to gage the actual meaning of words to identify if they are profound or not.
  • ISO Interactive: Very awesome interactive agency that builds websites, games, prototypes and campaigns. Check them out.

 


Conclusion Now there are other virtual world and website features we have added (and some are hidden). But to explain everything would make this a very long blog post. So we are trying to keep it simple and spark a little interest in expanding the realm of imagination.  🙂

Please feel free to contact us to discuss this or similar types of technologies. To reach us please use the contact form by Clicking Here .