반응형

Summoning the Next Interface: Agentive Tools & SAUNa Technology

 

http://www.cooper.com/journal/2013/05/summoning-the-next-interface-agentive-tools-sauna-technology.html

 

 

 

Part 1: Toward a New UX

If we consider the evolution of technology—from thigh-bones-as-clubs to the coming singularity (when artificial intelligence leaves us biological things behind)—there are four supercategories of tools that influence the nature of what’s to come:

  1. Manual tools are things like rocks, plows, and hammers; well-formed masses of atoms that shape the forces we apply to them. Manual tools were the earliest tools.
  2. Powered tools are systems—like windmills and electrical machines—that set things in motion and let us manipulate the forces present in the system. Powered tools came after manual tools, and took a quantum leap with the age of electricity. They kept becoming more and more complex until World War II, when the most advanced technology of the time, military aircraft, were so complex that even well trained people couldn’t manage them, and the entire field of interaction design was invented in response, as “human factors engineering.”
  3. Assistive tools do some of the low-level information work for us—like spell check in word processing software and proximity alerts in cars—harnessing algorithms, ubiquitous sensor networks, smart defaults, and machine learning. These tools came about decades after the silicon revolution.
  4. The fourth category is the emerging category, the new thing that bears some consideration and preparation. I have been thinking and presenting about this last category across the world:
    Agentive tools, which do more and more stuff on their own accord, like learning about their users, and are approaching the artificial intelligence that will ultimately, if you believe Vernor Vinge, eventually begin evolving beyond our ken.

"WIthin 30 years, we will have the technological means to create superhuman intelligence. Shortly after, the human era will be ended."

Where We Are vs. Where We Think We Are

For the most part, our clients at Cooper approach us to make powered tools for their users, like the video tools for (now-gone) Flip video. That’s fine. There’s a great deal of history and best practices established to help us knock these problems out of the park. We’re good at this.

Over the course of these projects we often identify and suggest cutting-edge opportunities that are farther along the arc, that would have them building assistive tools to help their users, but if I had to guess, I’d say only one out of five organizations are well-positioned enough to move on these ideas. I suspect that over time, the number of clients moving on assistive tools will increase. So if that’s where we are, with most clients asking for powered tools and most interaction designers providing designs for assistive tools, we’re both still a bit behind.

Based on the advancements, patents, popular familiarity, and marketization of a host of particular technologies (that you’ll see listed below), we are farther along that arc, able to create designs that are genuinely agentive tools. That has some implications to discuss, but first, let’s clarify the categories of technology that are enabling this sea change.

As a group I call these agentive-enabling technologies SAUNa tech. The acronym means nothing, really. There’s no generative richness here to a literal sauna, but it’s a useful acronym to encompass the four types of technologies involved: Social systems, Agentive algorithms, and Ubiquitous technologies accessed via Natural User Interactions.

Social Systems

“Social” has come to mean “social networks” but my use of the term covers more than just Facebook and Twitter. The paradigm of one user using one machine to perform one task is becoming the exception, with multiple users working across multiple systems accomplishing shared goals being more common (and more problematic to design for). For example, this article itself was originally written in Google Docs with permissions granted for an author and a number of editors, who have worked on it from laptops in airports and coffee shops, on phones and public transport, and desktop computers at Cooper.

We also must deal with the fact that when combined with agentive algorithms, social systems can now access Big Social Data. Systems looking to learn have humanity and history as their dataset. Doctors using agentive tech won’t just know what happened to their own patients, they’ll know what happened to all patients at all times in recorded history (to varying levels of detail) and adjust diagnoses and treatments accordingly.

Agentive Algorithms

Perhaps the most cutting edge of these are the agentive technologies, those that feel like low-level artificial intelligence. These technologies are aware of us—our identities, our intentions, and possibly even our emotional states. They adhere to Gricean maxims for interaction, and perform low-level machine learning about us as they help us achieve our goals. (Be sure to note the difference between these agentive algorithms and the category of technology that is named for them.)

Ubiquitous Technology

The technological skin that humans wear is getting thicker and more interconnected all the time. Technology is already in our skies, in space, in hospitals, on the battlefield, and under the sea. As information workers in the Western world, technology is under our fingers most of the day: on our desktops, in our hands, in our cars, with us at the gym, carried with us to the bathroom, and pulled to our faces first thing when we wake up in the morning. It’s on the streets of our cities and inside the shops we patronize. Our users are constantly moving across these everpresent technological touchpoints, and experiences have to shift to take advantage of them seamlessly.

Natural User Interactions

Personally, I hate the term, “natural” UI. Given the old saw, “The only intuitive interface is the nipple. Everything else is learned,” “natural” is an overblown promise especially for a set of technologies that are often DOS-like in their absent affordances. But no better label has taken hold that describes the set of technologies that engage more of our bodies and capabilities than WIMP paradigms, so we’re going forward with the term, with objections noted. Though it’s evolving and adapting, my working list of those technologies at the time of writing follows.


 

  • Haptic technology: Outputting information to our skin.
  • Gesture recognition: The ability to communicate with computers with our bodies and especially our arms and fingers.
  • Tangible and touch tech: The ability to directly indicate selections and manipulate objects in ways that computers can understand.
  • Voice recognition and generation: The ability to speak to a computer as we would speak to another person.
  • Ocular control or gaze monitoring: The ability to point with our eyes.
  • Cerebral (brain) interfaces: Using thoughts or brain waves to communicate to computers.
  • Near field communications: Letting us place objects in proximity to initiate data transfer and indicate selections or focus.
  • OLED and eInk displays: Visualizations of the abstractions around us, everywhere.
  • Heads-up displays: The personalized augmentation of the world around us


 

SAUNa technologies are each powerful enough on their own, but once they’re combined into holistic platforms, we’ll be deep into assistive territory and have an outstretched foot into the agentive zone. These things are coming, and I believe coming sooner rather than later.


 

In the next post I’ll touch on the implications that the full-scale adoption of SAUNa tech has for interaction design.

 

 

Summoning the Next Interface Agentive Tools & SAUNa Technology Cooper Journal.mht

반응형
반응형

Pure — Small, responsive CSS modules for every project

 

Homepage: http://purecss.io/
GitHub: https://github.com/yui/pure/

 

Pure는 설치가 간단한, 반응형 CSS 모듈이다.

 

Pure is a set of small, responsive CSS modules that can be used in all of your web projects.

 There are modules for everything from grids to forms to menus and much more,

all with a minimal footprint (ranging from .6KB for the tables module to 1.4KB for the forms module).

 

 

 

 

 

 

반응형
반응형

Emergent Web Technologies Spring 2013

Tuesdays, 6:30 PM - 9:20 PM

 

http://iam.colum.edu/Jon.Petto/classes/ewt/

 

 

 

Week 1

Getting Started - HTML5, CSS, & JavaScript

View lesson »

 

Week 2

Git & GitHub

View lesson »

 

 

Week 3

Responsive Design, Part 1

View lesson ›

 

Week 4

Responsive Design, Part 2

View lesson ›

 

Week 5

Media Query Review & Sass

View lesson ›

 

Week 6

More Transitions, CSS Effects & Columns

View lesson ›

 

 

Week 7

Floats, Box Sizing, & Midterm Workshop

View lesson ›

 

Week 8

Midterm Workshop/Presentations

 

 

Week 9

GitHub Forking & AJAX

View lesson ›

 

Week 10

AJAX w/JSON & JavaScript Templates

View lesson ›

 

 

Week 11

CSS 3D Transforms & Animations

View lesson ›

 

Week 12

Google Maps & Geolocation

View lesson ›

 

 

Week 13

Web Sockets

View lesson ›

 

 

반응형
반응형

UI 는 UX 가 아니다.

 

 

http://naridy.egloos.com/m/4804522


http://snowfox101.blog.me/20148562785

 

사진 보면 완전 이해.

http://takoratta.hatenablog.com/entry/20120503/1336015326

반응형
반응형

CSS text-indent Property


첫 문장 들여쓰기

Example

Indent the first line of paragraphs with 50 pixels:

p
{
text-indent:50px;
}

Try it yourself »

Definition and Usage

The text-indent property specifies the indentation of the first line in a text-block.

Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

Default value: 0
Inherited: yes
Version: CSS1
JavaScript syntax: object.style.textIndent="50px"


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

The text-indent property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".


Property Values

Value Description Play it
length Defines a fixed indentation in px, pt, cm, em, etc. Play it »
% Defines the indentation in % of the width of the parent element Play it »
inherit Specifies that the value of the text-indent property should be inherited from the parent element


Related Pages

CSS tutorial: CSS Text

HTML DOM reference: textIndent property

반응형
반응형

CSS Modal — Pure CSS modal windows

 

http://drublic.github.io/css-modal/

 

 

CSS Modal lets you build modal windows entirely in CSS, without any JavaScript necessary. It works with all screen sizes, and can even be used as a Sass plugin.

css modals

 

Homepage: http://drublic.github.io/css-modal/
GitHub: https://github.com/drublic/css-modal

 

Built with pure CSS

CSS Modal is built out of pure CSS. JavaScript is only for sugar. This makes them perfectly accessible.

Optimized for mobile

The modals are designed using responsive web design methods. They work on all screen sizes from a small mobile phone up to high resolution screens.

Use as Sass plugin

You can use CSS Modal as Sass plugin and apply it to your custom classes. No need to understand all the code.

A few other advantages: accessible, cross-browser, media-adaptive, small and fast!

 

 

반응형
반응형

Free PSD Responsive Web Templates

Post image of Free PSD Responsive Web Templates

 

 

What is Responsive Web Design (RWD)? Responsive Web Design is the answer to the easy accessibility which is both efficient and profitable. In cases where a site cannot be viewed on laptop and desktop systems or on tablets and Smartphone, all of which happen to come in wide range of screen sizes and resolutions, that it almost comes to the same as to it not being viewed at all. When it comes to dealing about this issue of accessibility, which is against the whole idea of having the presence of the internet and giving rise to various issues, it becomes imperative that we come up with effective solutions.

Responsive website development is easier then ever. Responsive Web Design is making the web design more powerful in different areas. Fast, Secure, Responsive, Interactive and beautiful. Responsive Web Design have many features that allow developers and designers to create apps and websites with the functionality, speed, performance, and experience of desktop applications.

As we know Responsive Web Designing are more popular day by day and designers are looking for Responsive Web Templates for their web project. So here we are put to gathered a fresh collection of Free Responsive Web Templates with PSD Files which can use for both personal and commercial projects.

You may be interested in the following modern trends related articles as well.

Free Responsive Web Templates with PSD

Today we’re gathered a list of Free PSD Templates for Responsive Web Design. Let’s take a quick look at some amazing new trend web templates to keep in mind when designing your next web project.

Prechu – Responsive PSD Template free

Prechu is a beautiful responsive website template, the download version included two designs version for desktop and mobile. The design is well crafted moden stylish template, you can use it for almost any purposes.

Free PSD Responsive Web Templates 2013

Source

Responsive HTML5/CSS3 Website Template

Free responsive HTML5/CSS3 template. This template is a good example of Responsive Web Design. You can use it absolutely free of charge.

Free PSD Web Templates 2013

Source

Parallelism Responsive Html5 Theme

Free PSD Web Templates 2013

Source

Zeni Responsive HTML 5 Portfolio Template

Zeni works great for creative’s portfolio, blog and corporative and business sites. We’re working on a WordPress version, stay tuned!

Free PSD Web Templates 2013

Source

FlexApp – Responsive Website Template For Your Mobile App

FlexApp is a free, fully responsive website template for marketing your mobile application. The design uses CSS3 to scale the content proportionally to whatever device is being used. Give it a try by resizing your browser!

Free PSD Web Templates 2013

Source

Liguid Gem – A fully responsive HTML portfolio template

Liquid Gem utilises CSS media queries and percentage layouts to give a completely responsive design. It also includes an image carousel, a fully working PHP contact form and a sample work page.

Free PSD Web Templates 2013

Source

Serendipity – Free Responsive HTML Template

Serendipity comeup with the HTML version of our fully responsive premium WordPress theme. (Free for only personal use.) If you are not feeling good about HTML and would like to have the theme with an admin panel along with gallery featuring Tumblr-like lightbox, working contact form and font/color/background options, WordPress version of Serendipity is what you are looking for.

Free PSD Web Templates 2013

Source

Proximet – Free responsive website template

Proximet is a free HTML5 /CSS3 Responsive Template. It is compatible with Major Browsers, Smartphones and Tablets. Just resize the browser window to see it in action! It is based on 960 grid and elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). And it is responsive. Designed by Ana.

Free PSD Web Templates 2013

Source

Folder – Responsive Showcase Perfect for Creatives and Designers

Folder is a responsive HTML 5 template that adapts to any devices and browser sizes. Perfect for creatives showcase and business. Its retro and minimal design gives importance to the content and gives a friendly air to the visitors.

Free PSD Web Templates 2013

Source

Legend – Free Responsive Bootstrap Template

Legend is multi-purpose responsive one page template built on Twitter Bootstrap. You can use this template as a landing page, online portfolio for creative folks or even as a business theme.

Free PSD Web Templates 2013

Source

Codester – Free Responsive Bootstrap Template

Codester is an awesome responsive Bootstrap template released for free. It is basically a portfolio template for creative people like designers, photographers, graphics artists and more. But with some basic customization you can actually transform this template into your desired website. Codester comes with complete customizable package including latest JavaScript, Scaffolding, Base CSS and Components.

Free PSD Web Templates 2013

Source

Verti – Responsive Html5 Theme

This is Verti, a free and fully responsive HTML5 site template by HTML5 Up! It’s built on 5grid, which means it’s easy to customize and works very nicely on mobile devices (try it for yourself — size the window down and hit reload). Like everything else at HTML5 Up!, Verti is released under the Creative Commons Attribution license, so feel free to use it for pretty much anything you want (be it a personal project or a commercial venture), just don’t forget to credit us!

Free PSD Web Templates 2013

Source

Brownie – Free Responsive HTML5 Portfolio / Business Website Template

Created by using the latest HTML5 and CSS3 techniques, Brownie is a simple and clean Free Responsive HTML5 portfolio and business website template.

Free PSD Web Templates 2013

Source

It Fits – Free HTML5 CSS3 Responsive Template

Its an HTML5 CSS3 Responsive Template, with 5 pages excluding 404 page. This template has something not just merely HTML5 new tags, it’s coded using WAI-ARIA roles for enhanced quality. Uses very less images, taking benefits from CSS3 features. Even icons are fonts – hmm super fast page loading.

Free PSD Web Templates 2013

Source

Dopetrope – Responsive Html5 Theme

Dopetrope a free, fully responsive HTML5 site template by AJ for HTML5 Up! It’s released for free under the CCA license so feel free to use it for any personal or commercial project

Free PSD Web Templates 2013

Source

Madison – Responsive Html5 Theme

Free PSD Web Templates 2013

Source

반응형
반응형

Two.js is a two-dimensional drawing API that is built for modern web browsers. Since it’s renderer agnostic, the same API can draw in multiple contexts, including webgl, svg, and canvas.

two.js

반응형

+ Recent posts