As the majority of web users shift to touch devices, the expectation is becoming that everything becomes touchable — including the mobile web. This session will provide a practical and pragmatic view of where touch is at from a web standards perspective and how you can start weaving touch interactions into your mobile web applications.
This presentation given at Web Directions Code, Melbourne - Wednesday 23 May, 2012
(Video: http://www.youtube.com/watch?v=SZEr5Fu0MxA)
The Wonderful-Amazing-Orientation-Motion-Sensormatic MachineAndrew Fisher
Mobile devices are magical things and the device API makes them even more magical. Being able to determine the orientation or acceleration of a device in space from a web browser affords a new set of interactions for developers and designers to play with.
This presentation shows how to use the device API properly and some applications of it.
How well are you delivering your experience?Andrew Fisher
The web has always had fragmentation, though not on the scale we're seeing now with new devices - and that's before we consider hybrid-touch laptops, microscreen smart watches, gesture interfaces or displays the size of a wall. Testing all the user permutations of your application is becoming almost impossible, so how do you go about working out whether you're delivering a good experience or not?
In this session, we'll look at the use of responsive design oriented analytics coupled with a few statistical methods that will help determine how well you're delivering your experiences and highlighting the areas you need to focus on next in order to maintain a decent level of coverage.
The Wonderful-Amazing-Orientation-Motion-Sensormatic MachineAndrew Fisher
Mobile devices are magical things and the device API makes them even more magical. Being able to determine the orientation or acceleration of a device in space from a web browser affords a new set of interactions for developers and designers to play with.
This presentation shows how to use the device API properly and some applications of it.
How well are you delivering your experience?Andrew Fisher
The web has always had fragmentation, though not on the scale we're seeing now with new devices - and that's before we consider hybrid-touch laptops, microscreen smart watches, gesture interfaces or displays the size of a wall. Testing all the user permutations of your application is becoming almost impossible, so how do you go about working out whether you're delivering a good experience or not?
In this session, we'll look at the use of responsive design oriented analytics coupled with a few statistical methods that will help determine how well you're delivering your experiences and highlighting the areas you need to focus on next in order to maintain a decent level of coverage.
A Device API Safari - Web Directions Code 2014Andrew Fisher
The Device API is what enables web browsers to appear more "native", giving the browser access to new hardware components that are being created primarily in phones and tablets but on some desktops too. Motion and Orientation are well known features of the API, however there are a plethora of others to play with too. Let's take a tour through the jungle that is the Device API spec and go looking for some new, interesting features of the API. We'll focus on the ones that will be landing in mainstream browsers soon and that you can play with now in order to explore new interaction methods.
Delivered at Web Directions Code 2014 - this presentation has all the notes from the session as well as links to videos of the demos.
More information like code can be found at github.com/ajfisher/wdc
ad:tech Melbourne - Mobile and social strategies for retailersAndrew Fisher
For consumers, engaging with retail brands is all about shopping. For channel strategies however, context drives consumer behaviour and must be considered before anything else.
Presented at ad:tech Melbourne, March 31, 2011
No money? No matter - Improve your website with next to no cashIWMW
Slides for talk on "No money? No matter - Improve your website with next to no cash" given by Paul Boag at UCL at the IWMW 2010 event organised by UKOLN and held at the University of Sheffield on 12-14 July 2010.
For further information see
http://iwmw.ukoln.ac.uk/iwmw2010/talks/boag/
presented at the conference Agile Testing Days 2012 in Berlin/Potsdam
Original version on prezi: http://prezi.com/o39xxactxm6o/how-releasing-faster-changes-testing/
ABSTRACT:
In his keynote at the ATD2011 Gojo Adzic covered the “Five key challenges for agile testers tomorrow”. The first one mentioned is the impact of shorter release cycles on testing: “release cycles will get shorter, so short even that there’s no time for testing.”
In this talk Alex shares what he learned about this topic during the last four years, on his journey with two companies. In both companies he helped to change the release rhythm dramatically, which had a deep impact on the all facets of the test strategy, of course including cooperation and communication structures.
Whereas some lessons learned are obvious, others are unexpected and even counter-intuitive.
Instant LAMP Stack with Vagrant and PuppetPatrick Lee
Do you enjoy installing and configuring Apache, PHP, and MySQL every time you reinstall your OS or switch to a new machine? Neither do I. And we never have to do it again. Vagrant can use the VirtualBox API and configuration defined in Puppet to spin up a development VM in a couple of minutes. And it's really easy to do. I'll start with the simplest possible example and work up to a cluster of VM's. Feel free to bring your laptop and follow along.
360Alumni; The Case For Online Communitiesmegrebale
360Alumni's HighEdWeb Michigan conference presentation. Learn how online communities can dramatically improve alumni engagement and fundraising while offering a significant cost savings over traditional communications methods.
A Device API Safari - Web Directions Code 2014Andrew Fisher
The Device API is what enables web browsers to appear more "native", giving the browser access to new hardware components that are being created primarily in phones and tablets but on some desktops too. Motion and Orientation are well known features of the API, however there are a plethora of others to play with too. Let's take a tour through the jungle that is the Device API spec and go looking for some new, interesting features of the API. We'll focus on the ones that will be landing in mainstream browsers soon and that you can play with now in order to explore new interaction methods.
Delivered at Web Directions Code 2014 - this presentation has all the notes from the session as well as links to videos of the demos.
More information like code can be found at github.com/ajfisher/wdc
ad:tech Melbourne - Mobile and social strategies for retailersAndrew Fisher
For consumers, engaging with retail brands is all about shopping. For channel strategies however, context drives consumer behaviour and must be considered before anything else.
Presented at ad:tech Melbourne, March 31, 2011
No money? No matter - Improve your website with next to no cashIWMW
Slides for talk on "No money? No matter - Improve your website with next to no cash" given by Paul Boag at UCL at the IWMW 2010 event organised by UKOLN and held at the University of Sheffield on 12-14 July 2010.
For further information see
http://iwmw.ukoln.ac.uk/iwmw2010/talks/boag/
presented at the conference Agile Testing Days 2012 in Berlin/Potsdam
Original version on prezi: http://prezi.com/o39xxactxm6o/how-releasing-faster-changes-testing/
ABSTRACT:
In his keynote at the ATD2011 Gojo Adzic covered the “Five key challenges for agile testers tomorrow”. The first one mentioned is the impact of shorter release cycles on testing: “release cycles will get shorter, so short even that there’s no time for testing.”
In this talk Alex shares what he learned about this topic during the last four years, on his journey with two companies. In both companies he helped to change the release rhythm dramatically, which had a deep impact on the all facets of the test strategy, of course including cooperation and communication structures.
Whereas some lessons learned are obvious, others are unexpected and even counter-intuitive.
Instant LAMP Stack with Vagrant and PuppetPatrick Lee
Do you enjoy installing and configuring Apache, PHP, and MySQL every time you reinstall your OS or switch to a new machine? Neither do I. And we never have to do it again. Vagrant can use the VirtualBox API and configuration defined in Puppet to spin up a development VM in a couple of minutes. And it's really easy to do. I'll start with the simplest possible example and work up to a cluster of VM's. Feel free to bring your laptop and follow along.
360Alumni; The Case For Online Communitiesmegrebale
360Alumni's HighEdWeb Michigan conference presentation. Learn how online communities can dramatically improve alumni engagement and fundraising while offering a significant cost savings over traditional communications methods.
Getting touchy - an introduction to touch and pointer events / TPAC 2016 / Li...Patrick Lauke
Beyond smartphones and tablets, touchscreens are finding their way into laptops and even desktop computers. With hardware support for touch becoming increasingly ubiquitous, it's time to explore what new possibilities are available to developers. This session will cover the basics of handling touch events - from making sure simple single-tap interactions are as responsive as possible, all the way to examples of full multitouch, gesture-enabled elements.
For 40 years, using a mouse has been the principal method for interacting with a computer. Today a lot of technologies are arriving on the market that have the potential to turn the human/computer interface upside-down. As programmers, we have a unique opportunity to participate in the discovery of new idioms that will eventually be adopted by the masses. This session focuses on two gesture-control technologies: Leap Motion and Myo. Through code, the presentation explores their possibilities to give you a head start in the creation of your own interaction models.
Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1Ihu917.
Jafar Husain shows the Reactive Extensions (Rx) library which allows to treat events as collections, how Netflix uses Rx on the client and the server, allowing to build end-to-end reactive systems. Filmed at qconsf.com.
Jafar Husain developed software for companies like GE, Microsoft, and Netflix. He specializes in building web servers and clients using functional reactive programming, and was the first user of the Reactive Extensions Framework. He's also responsible for "Falkor", a RESTful data access framework that powers most Netflix clients.
Datatium - using data as a material for contextually responsive design.Andrew Fisher
Rersponsive design has changed how we build sites, however whilst we've addressed many of the technical challenges of devices we haven't understood the underlying behaviour that is occurring. This talk highlights how context is increasingly important and how data can be used to create responsive experiences beyond simply reflowing of web pages.
Droids, java script and web connected hardwareAndrew Fisher
Given at JSConf China. Full notes are here: http://droidsjs.ajf.io
Hardware is becoming more connected and with it is the ability to interact with in in new ways. Principle amongst this is the ability to use JavaScript and NodeJS specifically to be able to talk to hardware such as Arduinos, RaspBerry PIs and other embedded development boards.
This talk discusses the JS Hardware stack and how to interact with it.
JavaScript is finding its way further and further out of the browser. Only a couple of years ago, if someone had said they wanted to build robots only using JS you'd think they were crazy. Having tried it at the time those naysayers were correct - it was a disaster.
Recently, particularly as a result of the nodebots project, JS Robotics has started to come of age and it's now possible to build simple robots using JavaScript for the majority of the stack - everything from control and sensing to motors to lights, AI and computer vision.
This talk will give an overview of what's currently possible, where the current gotchas are, how to get started and have some interactive elements that can be played with during or after the session.
Andrew is a creator & destroyer of things that combine mobile web, ubicomp and lots of data. Sometime programmer, interaction researcher & CTO @ JBA.
Be Responsive meetup / Melbourne Geek Night Crossover night
September 2014
It’s 2013. The shift to mobile is well and truly upon us, we’re at the transition point where Mobile Internet overtakes Desktop Internet usage and there is no going back. If you’re not designing responsively now then you better get cracking because what comes next is a big change to the way we design and build web experiences for humans.
The shift to mobile started making us think about devices, however almost all of our discussion is around what devices we support and where do we set our breakpoints. Could this focus on device capability be masking something bigger happening in the way humans are starting to behave with the web?
What if the fragmentation we’re seeing on Android is merely a glimpse into the device fragmentation of the future? What happens when a users’ experience can range from the interface of a watch to that of a building? How do we communicate with someone when they are walking down the street trying to locate something compared to kicking back on the sofa? How do we even know when they are doing one and not the other?
Contextually Responsive Design is quickly going to become a necessity - but this isn’t personalisation 2.0 or Content First under a different name. To truly design engaging experiences we need to consider how context shapes our behaviour. As Web Designers and Developers we’ve traditionally worked with people “sitting down to compute”. What happens when someone no longer wants to sit down at a computer to do something; ever?
This talk will start from the point of late 2013 and look forward six years. How do we expect people to behave? How will we design systems to cope, and what are the contexts in which people will use the web during its next age?
Given at Melbourne Be Responsive on 10 September 2013.
Presented at Melbourne Mobile on 19 March, 2013.
Responsive Design is primarily focussing on our interaction with devices however this is only part of the picture. By focussing on content and user context first, we can create more engaging experiences that work for our users.
This talk focuses on the move to content and context as the starting points for experiences and looks at methods of making content responsive.
The current trend surrounding responsive web design is one part of an overall move towards responsive experiences. A responsive experience may take place in part in the browser, but it extends well beyond media queries and image sets.
This isn’t a talk about media queries or “big data” analysis. Rather, we’ll focus on how data as a material and data as tooling in the design process - Datatium - can shape deeply engaging and responsive experiences, that even go offline.
There won’t be any hard maths, instead there will be plenty of guidance and examples showing how aspects of data science is changing design, and how you can start working with Datatium too.
Presented at Sketching in Hardware 2012, this presentation outlines how combining mobile devices & network connected physical devices via real time web technologies can change the way we play.
Outlining the current state of technology for connecting physical devices to the real time web using Web Sockets and messaging, three examples are shown to illustrate different aspects of play.
By 2020 there will be 24 billion Internet connected things on the planet, most of which won't have a screen. Web designers and developers are uniquely placed to play in the physical computing world.
With skills in information design and working with numerous technologies at the same time, the skills of the web practitioner are directly transferable to the Web of Things and are leading much of the exploratory work occurring around the world right now.
Lots of examples of Web Things in the real world as well as live demonstrations (links to projects for slide share viewers) should inspire viewers to get started with the web of things.
** Note there is a momentary audio drop out just prior to 4 minutes into the presentation. If you skip ahead to the next slide you'll regain the audio (about 25 secs of content missing).
Device Motion and Device Orientation are two new events we can play with inside mobile browsers. This quick 5 min presentation shows how to use them and some application demos.
Originally presented as part of Web Directions - What Do you Know night in Melbourne, 31 August, 2011.
Live demos have been screengrabbed but code is available at github.com/ajfisher
Given on 13 October as part of the Citrus #digibrekkie series of presentations on the future of digital media in Australia.
Focuses on the current state of Australian mobile and trends occurring globally that Australia is following with a focus on the future capabilities of mobile.
This presentation looks at what cloud computing is, what it can do in practice, it's future potential for businesses and some of the pitfalls to be aware of before cloud sourcing a project.
This presentation was given at the Web Directions South conference on 9 October 2009. It was delivered in the business track and was aimed at an audience that were relatively fresh to Cloud Computing or had limited experience.
The transcript can be found at: http://bit.ly/tkyxs
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
11. Support
Touch
Android 2.1+ / iOS 3+ / Opera Mobile / Firefox Mobile
Multi touch
iOS 3+
Android 3+ (targetTouches only)
Android 4+ (all)
Opera Mobile & Firefox Mobile (depends on OS)
32. Getting Touchy Feely
with the Web
WDC Melbourne 23 May, 2012
@ajfisher
github.com/ajfisher
slideshare.net/andrewjfisher
Editor's Notes
Hi, my name’s Andrew Fisher and my background is as an interaction developer and today we’re going to get touchy feely with the web for the next 15 minutes. I’m conscious that touch is a pretty big subject
However with a group of developers who are used to learning stuff fast with steep learning curves I’m sure you’re all be able to walk away with the tools and techniques you need to build beautiful expressive touch interfaces for web applications. So let’s get startedImage: http://www.flickr.com/photos/zzpza/3269784239/sizes/o/in/photostream/
Today we’re going to cover off these three areas. The mechanics of the API, how we use each of the components individually and then looking at bringing it together in an application at the end.
The Touch API is still pretty rough around the edges as the technology is still developing and the use cases for the web are being understood. So the areas I’m going to cover are the API as it stands today (down), the considerations we need to have if we want to use it in our applications and what future considerations do we need to have to deal with legacy as the API will change.http://www.flickr.com/photos/grungetextures/4224085160/in/photostream
The spec defines 6 new events for us to be able to play around with. If you want the really gory details then you can get the latest spec here.
Unfortunately not all of the spec has been implemented or is likely to be for reasons I’ll get onto in a moment. So today we’re just going to focus on the top three – touch start, end and move.
Luckily for us all of these work in the same way. The bit we’re going to focus on are these three TouchLists which are just arrays of Touch Objects however there is some subtlety to how they work together.
Touches is a global and it provides every touch object in contact with the surface at the time.TargetTouches are just the touches that are in relation to the object that this event handler was bound to however there is some consistent weirdness with nested objects as the event will be bound to the lowest level object it can find under the touch even if the event handler is bound to it’s parent.Changed touches is a subset which provides the touch object that caused the event to fire.
So what does a touch object look like – again we have a stack of properties defined by the spec.
But not everything has been implemented. So what we’re left with is largely positional information as well as an identifier which gives us an id back to the touch object so we know which one we’re talking about. even with this very simple object we can do some pretty interesting things with it.So now we know what the API does, under what conditions can we use it in our applications?
Well touch support itself is pretty wide these days with good support for the common mobile browsers. MultiTouch is well supported by iOS devices but less so by Android though we’ll see a big shift as a lot of Gingerbread devices get upgraded to ICS in the next 6 months so plenty of opportunity for building using the touch api.I mentioned earlier that the API is likely to change.
Well the technology itself is encumbered and is under legal review. It takes a while for this stuff to happen and as it is we’re left with a relatively stable API to play with. It will be a while before we need to consider these changes although we should but my advice is not to get hung up on it.So now we understand the mechanics of the API, the support we have for it and that we do need to think about maintenance for the future of our code let’s see how we can start using it.
Let’s use the Touch API in practice – I’m going to build this up starting with Single Touch, Multi Touch and then Gestures and we’ll look at some example code and demos to illustrate it.Image: http://www.flickr.com/photos/maryscheirer/4906553164/
Starting with single touch which is the most basic touch interaction we can create. I’ve set up a basic html page which simply has a canvas element dropped onto it. As such all my event handlers will be bound to that.
We have the three event handlers bound to the canvas and all I’m doing in each case is just allocating the touch object to a one of the points I’ve defined and then we simply plot the points on the canvas. Let’s take a look at a Demo of this now
This does as you’d expect I touch and a point goes down, it then tracks my finger and then leaves a point behind when my touch ends. Pretty simple.
Multi touch is a little more complex as there’s multiple touches in play at different time but it works largely the same way. I’m going to use the same canvas object with the same event handlers bound to it.
In this instance I need to keep track of multiple start and end points which I just push onto and remove from an Array. In my move I’m using the entire list of targettouches on this element to draw them. The draw works the same way except it just iterates over a list rather than a single point. So let’s look at the demo of this
The single Touch works the same as before but now I can add multiple touches onto the screen as many as I like and take them off again.
When we start using multiple touches there are some behaviours implicit in the browser and the OS for example zooming or two finger scrolling. As such don’t forget to use prevent Default and Stop Propagation to stop those default behaviours. Only instance I’ve see where this doesn’t work is the multitasking gestures on an iPAD
We can’t talk multi-touch without talking gesture. There’s no current API for gesture though Apple have attempted an implementation in Mobile safari showing scale and rotation but it doesn’t work with more than 2 touches. The key with gesture however is that it’s both cultural and contextual. As such I’m not sure an API can accommodate that beyond the mechanisms we already have within Touch already.For the moment for compatibility you’re going to have to implement for your own gestures anyway based on what’s correct for your context. As such I’m going to show you how to implement the basics of your own gesture so you can see the way we go about doing it. The code for this is a little longer so I’ll break up each handler onto it’s own slide.Image: http://www.flickr.com/photos/marcwathieu/4074440716/sizes/l/in/photostream/
Here’s our start which waits until we have two touches on screen at once and when it does measures the distance between them as the base distance.
Our move then just keeps tracking the positions and determining if they are getting closer or further away and routes the scaling factor to a CSS scale transformation.
Our end does some clean up like maintaining state between pinches and looking for boundary conditions for too much or too little zoom and cleans up accordingly.
This is it in action then – very simple and you can take this a lot further with origin transforms between the touch points etc but this gives you the basics of how you implement a gesture.Now we know how to detect single and multiple touches and work with them to be able to build up gestures let’s look at some applications of this.
I’m going to run through a couple of quick examples to highlight some applications of this for your interface that go beyond the seemingly ubiquitous canvas finger painting application.Image: http://www.flickr.com/photos/48873600@N08/5139924820/sizes/l/in/photostream/
This first shows the ability to do drag and drop with elements. So you could imagine building an interface that you could rearrange quite happily in this way. Or drag something to a save pile for review later.
The NY Times site works much like most copy heavy sites do with a swipe to advance the page. However they’ve introduced a vertical swipe as well which activates the story menu if you want it. Making it quite efficient
And finally OnSwipe which is a plugin to WordPress has an interesting feature where if you want to dismiss an overlay you can just scrunch it up and it disappears.
The next one is the way flickrlightboxes on a touch device, taking you full screen, giving you swipe and then being able to zoom in and pan around. Whilst this looks very simple in expression there’s a lot of hidden depth as you need to track all of your transformations along with the action you’re taking on the one image as there are multiple gestures in play at any time.These are some good examples of how touch can be used to create much more interesting interactions that are quite efficient for touch devices and particularly start to use their multitouch capabilities to enhance the application.
We’ve covered a lot in a very small amount of time, the mechanics of the API itself, how we use each of the components to build up interfaces and we’ve looked at some examples of some applications of things you can do with it.I’ve got some resources here for you, besides the background stuff of the first three there’s all my demos on my github that you can play around with and see working – they’ve been designed to be cross platform as well which some of the others aren’t. Maxine has all of these so she’ll send around today so you have things to play with. And I’ll have my presso up on slideshare pretty shortly which has all my notes and links in it too.
Unfortunately we don’t have any time for questions right now but I’m around today and tomorrow so please feel free to come and grab me and ask away if you have one and I’ll be more than happy to chat about touchy stuff.Thanks very much for listening and I hope you’ll all go from here and start to build beautiful, expressive touch interfaces for your web applications.