ATTENTION: This session requires advance signup to attend. For Online Schedule: Please utilize the RSVP link below the description to reserve your seat. For SXSW GO App: Use the RSVP 'Find a Timeslot' link. You must have a SXSW Interactive, Gold, or Platinum badge to attend, and, you must have an activated SXsocial account (social.sxsw.com) to reserve a seat. If you have any issues with signing up, please email support@sxsw.com. VERY IMPORTANT: Because of the limited space, we recommend you arrive at least 15 minutes prior to the published start time of this session. If you have not checked in at the room you RSVPed for at least five minutes prior to the session start time, you may lose your seat to an attendee in the waiting list line.
Prerequisites:
Proficiency with HTML5 and JavaScript development; experience with web and data services architectures, familiarity with visual and interaction design techniques.
What to B...
Show the rest
ATTENTION: This session requires advance signup to attend. For Online Schedule: Please utilize the RSVP link below the description to reserve your seat. For SXSW GO App: Use the RSVP 'Find a Timeslot' link. You must have a SXSW Interactive, Gold, or Platinum badge to attend, and, you must have an activated SXsocial account (social.sxsw.com) to reserve a seat. If you have any issues with signing up, please email support@sxsw.com. VERY IMPORTANT: Because of the limited space, we recommend you arrive at least 15 minutes prior to the published start time of this session. If you have not checked in at the room you RSVPed for at least five minutes prior to the session start time, you may lose your seat to an attendee in the waiting list line.
Prerequisites:
Proficiency with HTML5 and JavaScript development; experience with web and data services architectures, familiarity with visual and interaction design techniques.
What to Bring:
Modern smartphone (iOS, Android, Windows Phone) and Windows 8 or Mac OS X notebook with standard web development tools of choice.
The mobile device you have in your pocket, bag, or hand right now has a web browser capable of using HTML5 WebSockets today which can enable high-performance bi-directional communication for real-time multi-user experiences. Every modern smartphone and tablet can then be turned into an ad-hoc personal controller for rich interactivity with the local environment and other devices with nothing more than a local data connection and URL delivering cross-platform markup and code on the fly and an app store nowhere in sight. In this workshop the space will be transformed into a massive multi-player game room and immersive data visualization tool using only a pop-up private Wi-Fi network and your own mobile devices. Live and in-depth JavaScript code walkthroughs, functional demos, and best practices for using WebSockets in scenarios demanding high performance and scalability will be covered in parallel with the interactive fun for all where BYOD becomes BYOC.
This workshop will cover the end-to-end UX design and technical development of delivering pop-up interactive experiences for mobile devices including Wi-Fi network configuration and performance, portable web server management in the ad-hoc environment, HTML5 mobile web app delivery with a focus on high-performance Websocket-based messaging and orchestration, data services modeling and optimization to support coordinated interactions across devices and users, and real-time data visualization design and development techniques. Platforms and frameworks that will be used in demos, in-depth code reviews, and hands-on exercises include HTML5, CSS3, JavaScript, jQuery, socket.io, Node, Redis, ASP.NET, SignalR, C#, D3.js, Fabric.js, Velocity.js, and others.
Three insights and takeaways from the workshop will be:
1) How to optimize architecture and development with the HTML5 WebSocket protocol on both mobile clients and web servers to gracefully handle many concurrent users with continual streaming of touch input data and status outputs.
2) How socket.io, SignalR, and other abstraction frameworks for real-time communication over WebSockets and fallbacks compare and contrast to each other in both their API design and implementation patterns
3) How to effectively design and deliver highly interactive ad-hoc mobile web experiences tightly coupled to specific installations in physical spaces
The agenda for the workshop will be:
- Introduction, setup, and interactive demo (15 minutes)
- Managing the physical environment: hardware, networking, and services architecture (15 minutes)
- Design and development for the experience: HTML5 mobile web apps, Websocket frameworks, data modeling and visualizations (60 minutes)
- Break (10 minutes)
- Showcase: more interactive demos and code walkthroughs (30 minutes)
- Wrap-Up: final thoughts, takeaways, and Q&A (20 minutes)
Hide the rest