반응형

SSO(Single Sign On)

 

단 한 번의 로그인만으로 기업의 각종 시스템이나 인터넷 서비스에 접속하게 해 주는 보안 응용 솔루션.

각각의 시스템마다 인증 절차를 밟지 않고도 1개의 계정만으로 다양한 시스템에 접근할 수 있어

 ID, 패스워드에 대한 보안 위험 예방과 사용자 편의 증진, 인증 관리 비용의 절감 효과가 있다.

클라이언트 SSL(Secure Sockets Layer) 인증서와

S/MIME(Security Services for Multipurpose Internet Mail Extension) 인증서가

포함된 싱글 사인온 솔루션으로 개인 키 데이터베이스에 있는 하나의 키로 로그인하고,

다른 패스워드 없이 SSL 사용 서버에 접근할 수 있다.

 

반응형
반응형

TDD : Test Driven Development

BDD : Behavior Driven Development

 

TDD에 대한 코칭을 하던 BDD의 아버지 댄 노스(Dan north)의 고민.

  1. 프로세스의 어디서부터 시작해야 하는가?
  2. 무엇을 테스트하고 또 무엇을 하지 말아야 하는가?
  3. 한 번에 얼마만큼 테스트 해야 하는가?
  4. 테스트를 어떻게 명명해야 하는가?
  5. 테스트가 실패하는 이유에 대해 어떻게 이해해야 하는가?

 

전통적인 TDD 소프트웨어 개발 방법론

  1. 첫 번째로 유닛을 위한 테스트 셋을 정의한다.(define a test set for the unit first).
  2. 유닛을 구현한다(the implement the unit).
  3. 마지막으로 유닛에 대한 구현이 테스틀르 통과하는지 검증한다(finally verify that the implementation of the unit makes the tests success).

TDD 템플릿

  1. 특정 값이 주어지고(Given)
  2. 어떤 이벤트가 발생했을 때(When)
  3. 그에 대한 결과를 보장해야 한다(Then).

 

 

 

 

 

 

반응형
반응형

[마소] 2013.05 Angular.JS 의 구조와 특징

 

예제를 로컬에 구현해 보았다.

여러번 해본 것이지만 예제 나온김에 한번 더.

angular.js 파일은 받아두어야 한다.

 

기본적으로 일단 <html> 태그에 ng-app 를 입력해주어야 한다.

<body>에는 ng-controller 를 입력해주어야 한다.

 반복문은 반복하려는 구문에  ng-repeat 를 입력해주면 해당 데이터 배열 갯수만큼 반복된다.

 

 $scope로 데이터를 전달한다.

 데이터 출력은 "{{데이터}}"의 형식으로 된다.

 

모델은 $scope의 속성값이다. (todoList)

뷰는 DOM, 보이는 템플릿 자체가 뷰인 셈이다.

컨트롤러는 자바스크립트 함수로, $scope를 argument로 가지고 있다.  

 

※ Angular.JS 에서 사용하는 지시문

 

 ng-app

 Declares an element as a root element of the application allowing behavior to be modified through custom HTML tags.

 ng-bind

 Automatically changes the text of a HTML element to the value of a given expression.

 ng-model

 Similar to ng-bind, but allows two-way data binding between the view and the scope.

 ng-class

 Allows class attributes to be dynamically loaded.

 ng-controller

 Specifies a JavaScript controller class that evaluates HTML expressions.

 ng-repeat

 Instantiate an element once per item from a collection.

 ng-show

& ng-hide

 Instantiate an element once per item from a collection.

 ng-switch

 Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.

 ng-view

 The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.

 

 

Model–view–controller (MVC)

 

 

 

 Model          >     JS Objects

 View            >     DOM

 Controller     >     JS Function

 

 

Template, Model, View 방식으로 구현된다.  
   
(참고 : http://docs.angularjs.org/#!/tutorial/step_04)

 

 

예제 구현 화면 

 

소스 화면 (Sublime Text 2) 

 

.

반응형
반응형

Text editor -텍스트에디터 : Brackets

 

http://brackets.io/

 

Download : http://download.brackets.io/

 

Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License.

 

 

 

 

 

 

반응형

'프로그래밍 > Web' 카테고리의 다른 글

PreloadJS  (0) 2013.06.20
Angular.JS 의 구조와 특징  (0) 2013.06.13
Text editor - 텍스트 에디터 : Sublime with TrailingSpaces  (0) 2013.06.13
ICEcoder — In-browser code editor  (0) 2013.06.04
APTANA - SVN 설치 (subclipse)  (0) 2013.05.28
반응형

Text editor - 텍스트 에디터 : Sublime with TrailingSpaces

 

Sublime : http://www.sublimetext.com/

 └ (plugin) TrailingSpaces : https://github.com/SublimeText/TrailingSpaces

 

 Download :

                   http://www.sublimetext.com/2

                   http://www.sublimetext.com/3

Sublime Text 2.0.1 x64 Setup.exe

 

TrailingSpaces-master.zip

 

Sublime Text

Sublime Text is a sophisticated text editor for code, markup and prose.
You'll love the slick user interface, extraordinary features and amazing performance.

 

Trailing Spaces

A Sublime Text 2 and3 plugin that allows you to…

highlight trailing spaces and delete them in a flash!


 

 

Sublime의 awesome한 기능들.

 

Use Multiple Selections to rename variables quickly.
Here Ctrl+D is used to select the next occurrence of the current word. 

 

단어를 선택한 다음 "Ctrl + D" 를 처음 누르면 선택된 동일 단어 전체 검색.

"Ctrl + D" 를 계속 누르면 동일 단어가 순차적으로 선택되고, 순차적으로 선택된 단어는 동시 수정이 가능하다.

 

 Make batch edits with Multiple Selections.
Here Ctrl+Shift+L is used to split a selection into lines, and each line is then edited simultaneously.

 

영역 선택 후 "Ctrl + Shift + L" 를 선택하면 세로영역 선택이 된다. 세로줄에 커서가 생성됨.

 

 The Command Palette gives fast access to functionality.
Here Ctrl+Shift+P is used to show the Command Palette, "sspy" (short for Set Syntax: Python) is used set the syntax of the current file to Python.

 

"Ctrl + Shift + P"를 누르고 해당 파레트를 선택하면 명령어 파레트를 선택할 수 있다.  

예를 들어 Python의 Syntax를 사용하려면, "Ctrl + Shift + P"를 누르고, "sspy"라고 입력하면 "Set Suntax : Python" 이 선택된다. 선택하고 나면  해당 파일의 구문들이 Python에 맞는 구문색상으로 변경된다.

 

 Use Goto Anything to quickly navigate between files, even in the largest projects.
Ctrl+P shows Goto Anything, and typing then filters on file and directory names.

 

"File" - "Open Folder" 를 해서 폴더를 열었을 경우, 또는 여러 개의 파일이 열려있을 경우 "Ctrl + P"를 누르고 열려 있는 파일 또는 폴더에 존재하는 파일을 검색해서 바로 open 할 수  있다.

 

 Goto Anything can also be used to show a function, line or word within a file.
Type @ after a file name to filter on symbols. More...

 

"Ctrl + P"를 누르고 파일을 검색하는데, 해당 파일이 선택되었을때, 검색어 바로 뒤에 "@"를 입력하면 해당 파일에 존재하는 함수들을 검색 할 수 있다.

 

 

 

 Find and Replace with regular expressions.
Here unwanted whitespace is removed by using the regex " +" to find groups of spaces, which are then selected simultaneously with the Find All button.

 

"Ctrl + F"를 눌러서 "Find and Replace"를 할 경우 "공백(space)"을 입력하고 "+"를 넣으면 해당 공백 사이즈와 동일한 공백을 찾을 수 있고, 삭제 또는 교체 가능하다.

 

 

 

Trailing spaces 를 윈도우에서 설치할 때.

압축 풀고, "C:\Users\사용자폴더\AppData\Roaming\Sublime Text 2\Packages"에 폴더채로 옮겨두고 Sublime 재 실행 하면 확인 가능하다.

 

 

 

 

 

반응형
반응형

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 &amp; SAUNa Technology Cooper Journal.mht

반응형
반응형

jQuery 및 전자정부 표준 프레임워크가 업데이트 되었습니다.

jQuery 1.10.1 and 2.0.2 released
- http://cafe.naver.com/buldon/6930

jQuery 2.0 릴리즈에 대해
- http://cafe.naver.com/buldon/6737

전자정부 표즌 프레임워크 2.6 출시
- http://cafe.naver.com/buldon/6929

반응형
반응형

25 New Script Libraries and Plugins on GitHub

 

http://mashable.com/2013/06/09/github-script-libraries/?utm_campaign=Feed%3A+Mashable+%28Mashable%29&utm_cid=Mash-Product-RSS-Pheedo-All-Partial&utm_medium=feed&utm_source=feedburner

 

1. Unveil.js

Unveil.js is a lightweight version of LazyLoad, with support for serving high-resolution images to devices with Retina display. The LazyLoad plugin has some neat options, such as custom effects, but if you don't use any of those you can reduce the file size considerably, leaving just the essential code. This is exactly what Unveil.js is.

2 Chardin.js

Chardin.js (named after the French painter Jean-Baptiste-Siméon Chardin) lets you add simple overlay instructions on existing elements, on any of your apps, using JavaScript. It was inspired by the recent Gmail new composer tour, and is a simple solution that works well and looks incredible.

3. Superhero.js

Superhero.js isn't strictly a JavaScript library itself, but rather, a library of articles on how to create, test and maintain a large JavaScript code base. This is a continuously updated collection of the best articles, videos and presentations on the topic, which helps explain the syntax of JavaScript, how to organize projects, how to test your code and what's on the horizon.

4. Snap.js

Snap.jsis a library for creating beautiful mobile shelfs in JavaScript, which appear when clicking a button or dragging the entire view. It uses CSS3-powered animations with IE fallbacks, and features flick support, event hooks, drag support and an event-based API, so it's simple to hook into existing interfaces.

5. Least.js

Least.js creates beautiful, random and responsive HTML5 and CSS3 image galleries using LazyLoad. Installation is simple and straightforward; just download the script and insert the appropriate code before the </head> and after the <body> tags.

6. Verlet.js

Verlet.js is a simple Verlet physics engine written in JavaScript, with particles, distance constraints and angular constraints, all supported. It's based off an iterative technique called Verlet Integration, which simplifies force and motion calculations. With it, you can easily model intricate objects and dynamic behaviors.

7. Bespoke.js

Bespoke.js is a DIY micro-presentation framework that makes it simple to create animated deck-style slideshows. It's less than 1kb minified and gzipped, with no dependencies, and uses keyboard and touch events to add classes to your slides, while you provide the CSS transitions. There are five basic themes, and both production and development versions are available to download.

8. Lazy.js

Lazy.js is a utility library for JavaScript, similar to Underscore and Lo-Dash, but it uses "lazy evaluation," which can translate to superior performance in many cases, especially when dealing with large arrays and "chaining" multiple methods. With no external dependencies, you can get started straight away.

9. Chart.js

Chart.js is an object-oriented graphing system for designers and developers that uses JavaScript and HTML5 Canvas to create six different types of charts. Each chart can be animated and fully customized, with support on Retina displays and all modern browsers, and with polyfills to provide support for IE7/8. It's dependency free, lightweight (only 4.5kb when minified and gzipped) and offers a wealth of customization options.

10 . Pixi.js

Pixl.js is a super fast HTML5 2D rendering engine that uses webGL with canvas fallback, to provide a fast, lightweight library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It features a super easy-to-use API, asset loaders, full mouse and multi-touch interaction, support for texture atlases and much more.

11 . SocialFeed.js

With SocialFeed.js, you can create a feed with your latest interactions on different social media, designed to be both modular and plugable. By default, no social site is added; each has be explicitly added, and is implemented as its own module. It's extremely customizable with an API, which exposes several functions and events.

12 . Intro.js

Intro.js provides a better way to create a new feature introduction and step-by-step user guide for your website and project. It's simple to set up: Just include the JavaScript and CSS files and "add data-step" and "data-intro" to your code. It's lightweight (only 2.5kb gzipped) and includes keyboard and mouse navigation, with cross-browser compatibility on all modern browsers, from IE8 and up.

13. Datamock.js

Datamock.js lets you easily add fake data to your mockups, with straightforward usage and a handy demo to see it work in action. Use data attributes to bind mocked data; it includes other value types, such as emails and names. With a bookmarklet task included in the build script, you can quickly generate a page with test sample data.

14. Imageloader.js

Imageloader.js is a jQuery plugin for pre-loading images, with simple implementation. However, it has minimal customization options outside the array of image URLs to load. The demo shows off its functionality.

15. SimplePagination.js

SimplePagination.js is a simple jQuery pagination plugin that includes three CSS themes and features Bootstrap support. It has options for configuring the page links, next and previous text, one-click events, style attributes and more. There is also an API for selecting pages, and support for Bootstrap was recently added.

16. Sco.js

A collection of jQuery plugins for the web, inspired by the Twitter Bootstrap components, Sco.js plugins can replace the Bootstrap equivalents. Several plugins are unique, and in cases where Sco.js replaces Bootstrap plugins, the underlying markup has been simplified and the reliance on IDs reduced.

17. StreamTable.js

StreamTable.js streams data for tables in the background, and updates and renders them using templating frameworks like Mustache.js and HandleBars.js. It provides fast rendering of the pages or tables, without the "loading data" delays, and with fast client-side filtering. It can also manage various JSON data formats.

18. fpsmeter.js

Fpsmeter.js is a simple JavaScript library to display the frames-per-second of an animation. It can measure the number of milliseconds between frames and the number of milliseconds it takes to render one frame. It supports theming, so it can be customized to suit new and existing interfaces, and can cope with multiple instances on a page.

19. Behave.js

Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in. It supports all modern browsers, with partial support for IE6/7. It has no dependencies and allows for custom code and behavior fencing, multi-line indentation and un-indentation.

20. Chartkick.js

Chartkick.js helps you create beautiful Javascript charts with minimal code. It supports Google Charts and Highcharts, and works with most browsers (including IE6). It works with Ruby, using the "chartkick" gem. Use it to create line charts, pie charts, column charts and multiple series.

21. Gif.js

Gif.js is a JavaScript GIF encoder that runs in your browser. It uses typed arrays and web workers to render each frame in the background. It works in browsers supporting Web Workers, File API and Type Arrays by generating the GIF images in the background, using Web Workers.

22. ColtJS

ColtJS is a simple framework that allows for easy deployment of a JavaScript Application using asynchronous module definition. Its only dependency is RequireJS, and it builds off simple principles of a centralized router, loading modules only when requested to produce an efficient, easy-to-manage application structure. You can use the ColtJS boilerplate for a quick start and view the documentation on the ColtJS website.

23. Anima.js

Anima.js makes it easy to animate over a hundred objects at a time, and each item has its mass and viscosity to emulate reallife objects. It helps improve upon some of the limitations of CSS animations, such as calculating percents for keyframes, giving you greater control over the flow of animations, along with the ability to use delays and durations normally.

24. Navi.js

Navi makes it easy to dynamically display content on your sites. Instead of cluttering up your site tree with extra files, you can easily write all your HTML code for multiple pages in one file. It uses the current hash to change content, leaving your visitor's back button functional, with built-in support for Ajax, Google Analytics, breadcrumbs, page titles, along with easy HTML and JavaScript markup.

25. Fartscroll.js

Would any recent GitHub script roundup be complete without Fartscroll.js? Created by The Onion, it can install on any webpage to produce gassy noises as you scroll up and down the browser window. Try the Google Chrome extension for a more immersive experience.

반응형

+ Recent posts