Inspiration

From TidePools Wiki
Jump to: navigation, search
Home < Inspiration

Thanks for the @TidepoolsOTI mention @westbywest Sunflower Mesh...

<iframe width="400" height="225" id="youtube_iframe" src="https://www.youtube.com/embed/vs1Uo7NduJc?feature=oembed&enablejsapi=1&origin=http://safe.txmblr.com&wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Thanks for the @TidepoolsOTI mention @westbywest Sunflower Mesh (by Wasabinet Gogogo)

(2013-07-25 14:13:40)
Tidepools is Mobile Ready!

Yay! The Tidepools team at the Open Technology Institute just introduced a new mobile version of Tidepools (Beta 0.3), featuring an overhauled interface and code base at the Allied Media Conference in Detroit. This Tidepools instance helped attendees navigate and document the conference with ease. Read more about OTI at AMC here and about the Commotion Wireless mesh network here.

image image

Visitors to the web app initially encountered a list of Conference Sessions in progress at that moment. Quick filter buttons let attendees see which sessions were Happening Soon, Happening that Day, and All Sessions over the three day conference. Attendees could also search session descriptions and locations.

Each Session Card in the list included a short description and two buttons. The first button, when selected, listed all tweets that include #AMC2013 and the session’s #hashtag (e.g. #Discotech). The second button showed the session’s location on the conference map, helping attendees navigate to the correct conference building and room.

imageimage

 

Clicking on a Session Card itself lead to a session-specific page, which lists further details, session-specific tweets, and an embedded etherpad for collaborative note-taking.

imageimage

Selecting Talk in the navigation bar lead attendees to the latest tweets that included #AMC2013, the main conference hashtag. The Talk stream automatically displayed media for tweets that included pictures (Twitpic, Instagram, Tumblr), videos (Youtube, Vimeo), and Vines. Participants could search through or click any hashtag to see all tweets that included that hashtag in the tweet.imageimage


Selecting Map in the navigation bar lead to a full view of the conference map, listing map markers where current sessions were taking place. The design of the conference map was modeled on Nina Bianchi and The Work Department’s style guide for the 2013 Allied Media Conference.

imageimage


A common design feature currently used in web apps is a hidden menu for accomplishing quick navigation or communication tasks. We’ve introduced such a slide-out feature into Tidepools Mobile, which, for the AMC instance, showed all Sessions currently happening. If an attendee was on another page, they could easily switch to a live session. If no sessions were in progress, then a Nyan cat was displayed, naturally. In the future, this slide-out menu will be used for quick Tidepools actions, like adding new Comments, new Landmarks/Events, and accessing Tidepools local Apps, such as “Stop & Frisk” or “Where’s the B61 Bus?”

image

 

What’s going on beneath the surface?

Tidepools was rebuilt from the ground up, on the front- and back-end, to be a more dynamic and flexible platform. The new version offers plug and play customization, allowing you to add your own APIs into the Tidepools ecosystem. The front end, or user-facing features, were coded primarily in Angular.js, a Javascript framework optimized for single-page mobile web apps, with Leaflet.js integrated for mapping support.

For the back-end, we used Node.js, Express, and MongoDB for local database storage. This combination of front-end and back-end tools is a new technology stack, referred to as a MEAN stack - Mongo, Express, Angular, and Node. This stack is gaining in popularity for web-based applications as it is a purely Javascript / JSON based solution. There was a definite joy in re-using code in Angular from Node, simply by copying and pasting! :)

We used Node in three parallel ways: a server for the Tidepools application, a script pulling live conference session data from the AMPTalk API - provided by AMP, and a script collecting the live API stream of #AMC2013 tweets. After Node grabbed the data streams, we used Mongoose.js to re-map the data into the Tidepools Landmark, Event and Comment data schema and stored in MongoDB.

The code is available here: <a href="https://github.com/opentechinstitute/Tidepools-Mobile">https://github.com/opentechinstitute/Tidepools-Mobile</a>


Reflection

Overall, AMC users were very positive and said that the application and new interface were relevant, useful and easy to use.  A major relief for some users was that the first page showed what sessions were happening “now,” instead of having to parse through filter menus on the AMPTalk website to find out what was currently happening. Others found it wonderful to simply jump to a session page and click on the etherpad button to access the live session notes.

We learned a few lessons along the way. First, it is currently difficult to run Node.js alongside Apache: it requires relatively intricate proxy setups which are not well documented. This complication led to a last minute migration over to a seperate server, using http://tidepools.co/amc as a redirect page to the remote IP address. The etherpad integration on small mobile devices is not optimally usable. We implemented this as a modal dialog, but ideally, there would be a mobile version of etherpad that resizes appropriately and provides users access to the etherpad menus and settings. Finally, going forward we want to prompt users to add a bookmark to the Tidepools website to their mobile device’s home screen, to make it easier for users to come back to the application, increasing the number of returning visitors.

Using a combination of Angular.js and Express.js made it much easier to develop dynamic web pages for each Session, Talk #Hashtag, and Map Location. Many of the dynamic features that we developed in this new version line up directly with the needs identified by the Digital Stewards in Red Hook, Brooklyn, a group of young adults learning to plan, organize, install and maintain wireless networks and local applications. The Digital Stewards have identified that they want a tool where businesses or places, events and jobs will have their own web pages that are tied to a location on the Red Hook map. The application will be made available on the Red Hook Mesh Network splash page and neighborhood website.  Over the next few weeks, we are working on integrating this new mobile interface into the original Tidepools system, to allow users to work with Tidepools from either a mobile device or a desktop computer.

Check out the Wireframes Process PDF used to design and build Tidepools Mobile here: <a href="http://tidepools.co/files/amc_tidepools_wireframes.pdf">http://tidepools.co/files/amc_tidepools_wireframes.pdf</a>

(2013-07-11 19:26:00)
Interactive map about which cherry blossoms are in bloom! (via...



Interactive map about which cherry blossoms are in bloom! (via Cherry Blossom Season - Brooklyn Botanic Garden)

(2013-04-22 14:04:04)
PermaCities - the free online game of permaculture and urban design

PermaCities - the free online game of permaculture and urban design:

Transform actual Bay Area cities and learn about existing interventions to transform the urban landscape using ecovillage principles of working with nature to meet human and ecological needs. Web-based and open source!

(2013-04-14 02:06:02)
The Red Hook Digital Stewards working on #Commotion and...



The Red Hook Digital Stewards working on #Commotion and @TidepoolsOTI (via Building Digital Bridges | Red Hook Initiative)

(2013-04-01 13:43:04)
DSpace:

DSpace: :

via my friend Elf:

DSpace aims to enable people to find, collect, edit, structure and share any kind of information in a real-time, massive-collaboration, augmented-reality-environment (like wikipedia), based on a very common ground: The map of the area, where people actually are, around their Geolocation.

You can create, alter and select from an infinite amount of thematic DSpace-Overlay’s on this basemap, to create your own personal view of your local and social neighborhood.

The internet has enabled us to share information in ways that were never before available to mankind. On the web, we created websites for specific topics, to have a place where we could share what we know about the world around us. But you need to know where to look for and surf through different sites to get all relevant information.

With the help of 1000s of contributors, we as the people, have managed to have a free data source for map-data (OSM). Combined with free topology-data, we now have the capability to create meaningful and accurate basemaps of the whole world ourselves, without further depency on external map-servers and map-data, provided by commercial services.

Instead of putting up competing websites, which each hold a part of the information other people have collected (users), it seems much more efficient to store and manage information with relevance to locality (and there are many, when you really start to think about it) in a different manner.

In technical terms, DSpace is a toolkit which provides its own free (open-source and free to access) map-tile servers for basemaps, a distributed/federated network to store, organize and access data related to what people are interested in or may find useful to easily mark on a map to remember or share with others. We put a strong focus on decentralization and try to employ concepts as serverless syncing, offline caching, browser local storage (etc) from the beginning.

(2013-02-09 00:21:22)
remoteStorage

remoteStorage:

An open protocol for per-user storage.

Webfinger + OAuth + CORS + REST

(2013-02-09 00:16:38)
@jrbaldwinn & @georgiamoon talked this week about...



@jrbaldwinn & @georgiamoon talked this week about @rhookinitiative wifi, preparing for disasters and lots of other good stuff. /cc @NewAmericaOTI (via Disaster Proof Your Internet | In The Tank)

(2013-02-08 19:32:00)
Vozmob: Voces Moviles | Mobile Voices

Vozmob: Voces Moviles | Mobile Voices:

In VozMob we read reality to write our own history, and strive to make visible the true stories of those who have been excluded, marginalized, and made invisible by the traditional mass media. VozMob appropriates technology to create power in our communities and achieve greater participation in the digital public sphere.

VozMob is a platform for immigrant and non-immigrant low wage workers in Los Angeles to create stories about their lives and communities directly from cell phones, thus gaining greater participation in the digital public sphere, especially for those with limited access to computers. In other words, VozMob amplifies the voices of the excluded by appropriating mobile phones for popular communication.

(2013-02-06 05:47:10)
SolidarityNYC Map

SolidarityNYC Map:

Map of solidarity economy businesses. It’d be great to foster tools like this on the local scale for community currency, etc.

(2013-02-05 22:40:07)
Tidepools & Commotion Mesh in Red Hook (via Case Study: Red...



Tidepools & Commotion Mesh in Red Hook (via Case Study: Red Hook Initiative WiFi & Tidepools | NewAmerica.net)

(2013-02-05 22:14:47)
The Whale Hunt

The Whale Hunt:

The purpose of this project was threefold:

First, to experiment with a new interface for human storytelling. The photographs are presented in a framework that tells the moment-to-moment story of the whale hunt. The full sequence of images is represented as a medical heartbeat graph along the bottom edge of the screen, its magnitude at each point indicating the photographic frequency (and thus the level of excitement) at that moment in time. A series of filters can be used to restrict this heartbeat timeline, isolating the many sub stories occurring within the larger narrative (the story of blood, the story of the captain, the story of the arctic ocean, etc.). Each viewer will experience the whale hunt narrative differently, and not necessarily in a linear fashion, constructing his or her own understanding of the experience.

Second, to subject myself to the same sort of incessant automated data collection process that I usually write computer programs to conduct (in previous projects like We Feel Fine, Lovelines, Universe, 10x10, and Phylotaxis). Much effort is spent making computers understand what it’s like to be human (through data mining and artificial intelligence), but rarely do humans try to see things from a computer’s perspective. I was interested in reaching some degree of empathy with the computer, a constant thankless helper in my work.

Third, to take an epic personal experience from the physical world and translate it optimally to the Internet, so that many people can share it.

(2013-01-27 00:47:42)
TimeGlider

TimeGlider:

Zoomable timelines!

(2013-01-27 00:38:34)
OldSF

OldSF:

Mapping San Francisco history, with sidebar timeline.

(2013-01-26 08:33:54)
History Pin

History Pin:

Mapping historic content (photos, videos, etc).

(2013-01-26 08:32:50)
(via 2nd City Zoning)



(via 2nd City Zoning)

(2013-01-25 04:36:26)
Lessons from Sandy: A Word on Innovation | FEMA.gov
Lessons from Sandy: A Word on Innovation | FEMA.gov
(2013-01-24 21:39:07)
(via [murmur])



(via [murmur])

(2013-01-24 18:22:00)
NYC Historic Neighborhoods Data Mashup

nycopendata:

nycgov:

Do you like exploring New York City and discovering its history?  Check out nychistoricdistricts.com for a map of New York City’s historic neighborhoods and take a virtual tour of places like Brooklyn Heights, Governor’s Island and DUMBO with information on the neighborhood’s history and photos of historic buildings nearby.

image

(2013-01-18 20:43:24)
Briefing Document: Public Networks for Public Safety | Berkman Center
Briefing Document: Public Networks for Public Safety | Berkman Center
(2013-01-16 20:42:51)

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox