|
미투데이를 하다가 온라인 회의나 아이디어를 정리할때 사용하면 좋은 사이트를 찾다.
http://linoit.com
어찌보면 레몬펜과 비슷할수 있으나 조금은 느낌이 틀린이유는 무엇일까?
데꾸벅 메모장으로 오시려면 이곳으로 오세요
| 프로페셔널 프론트엔드 개발자에게 필요한 기술 (0) | 2009.03.17 |
|---|---|
| 이땅의 개발자에게 필요한 철학 (2) | 2008.03.05 |
| Getting Real (0) | 2008.03.04 |
JS
Ext.BLANK_IMAGE_URL = '';
Ext.ns('Example');
Example.version = '1.0';
Example.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
// Create RowActions Plugin
this.action = new Ext.ux.grid.RowActions({
header:'Actions'
,autoWidth:true
,keepSelection:true
,actions:[{
iconIndex:'action1'
,qtipIndex:'qtip1'
,iconCls:'icon-open'
,tooltip:'Open'
},{
iconCls:'icon-wrench'
,tooltip:'Configure'
,qtipIndex:'qtip2'
,iconIndex:'action2'
,hideIndex:'hide2'
},{
iconIndex:'action3'
,qtipIndex:'qtip3'
,iconCls:'icon-user'
,tooltip:'User'
,style:'background-color:yellow'
}]
,groupActions:[{
iconCls:'icon-del-table'
,qtip:'Remove Table'
},{
iconCls:'icon-add-table'
,qtip:'Add Table - with callback'
,callback:function(grid, records, action, groupId) {
Ext.ux.Message.msg('Callback: icon-add-table'
, 'Group: <b>{0}</b>, action: <b>{1}</b>, records: <b>{2}</b>'
, groupId
, action
, records.length);
}
},{
iconCls:'icon-graph'
,qtip:'View Graph'
,align:'left'
}]
,callbacks:{
'icon-plus':function(grid, record, action, row, col) {
Ext.ux.Message.msg('Callback: icon-plus'
, 'You have clicked row: <b>{0}</b>, action: <b>{0}</b>'
, row
, action);
}
}
});
this.action.on({
action:function(grid, record, action, row, col) {
Ext.ux.Message.msg('Event: action', '클릭한 Row: <b>{0}</b>, 액션: <b>{1}</b>'
, row
, action);
}
,beforeaction:function() {
Ext.ux.Message.msg('Event: beforeaction', '핸들러에서 false반환시 액션취소.');
}
,beforegroupaction:function() {
Ext.ux.Message.msg('Event: beforegroupaction', '핸들러에서 false반환시 액션취소');
}
,groupaction:function(grid, records, action, groupId) {
Ext.ux.Message.msg('Event: groupaction', 'Group: <b>{0}</b>, action: <b>{1}</b>, records: <b>{2}</b>', groupId, action, records.length);
}
});
Ext.apply(this, {
store:new Ext.data.Store({
reader:new Ext.data.JsonReader({
id:'company'
,totalProperty:'totalCount'
,root:'rows'
,fields:[
{name: 'company'}
,{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
,{name: 'industry'}
,{name: 'desc'}
,{name: 'action1', type: 'string'}
,{name: 'action2', type: 'string'}
,{name: 'action3', type: 'string'}
,{name: 'qtip1', type: 'string'}
,{name: 'qtip2', type: 'string'}
,{name: 'qtip3', type: 'string'}
,{name: 'hide2', type: 'boolean'}
]
})
,proxy:new Ext.data.HttpProxy({url:'jsonData.json'})
,sortInfo:{field:'company', direction:'ASC'}
,listeners:{
load:{scope:this, fn:function() {
this.getSelectionModel().selectFirstRow();
}}
}
})
,columns:[
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'}
,{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'}
,{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
,this.action
]
,plugins:[this.action]
,loadMask:true
,viewConfig:{forceFit:true}
});
this.bbar = new Ext.PagingToolbar({
store:this.store
,displayInfo:true
,pageSize:10
});
Example.Grid.superclass.initComponent.apply(this, arguments);
}
,onRender:function() {
Example.Grid.superclass.onRender.apply(this, arguments);
this.store.load({params:{start:0, limit:10}});
}
});
//컴포넌트 등록
Ext.reg('techbuggrid', Example.Grid);
Ext.onReady(function() {
Ext.QuickTips.init();
var win = new Ext.Window({
width:600
,minWidth:320
,id:'agwin'
,height:400
,layout:'fit'
,border:false
,plain:true
,closable:false
,title:"그리드 Row Action 처리하기"
,items:{xtype:'techbuggrid',id:'actiongrid'}
});
win.show();
});
사용자 플러그인.JS
Ext.ns('Ext.ux.grid');
if('function' !== typeof RegExp.escape) {
RegExp.escape = function(s) {
if('string' !== typeof s) {
return s;
}
return s.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1');
};
}
Ext.ux.grid.RowActions = function(config) {
Ext.apply(this, config);
this.addEvents(
'beforeaction'
,'action'
,'beforegroupaction'
,'groupaction'
);
Ext.ux.grid.RowActions.superclass.constructor.call(this);
};
Ext.extend(Ext.ux.grid.RowActions, Ext.util.Observable, {
actionEvent:'click'
,autoWidth:true
,dataIndex:''
,header:''
,keepSelection:false
,menuDisabled:true
,sortable:false
,tplGroup:
'<tpl for="actions">'
+'<div class="ux-grow-action-item<tpl if="\'right\'===align"> ux-action-right</tpl> '
+'{cls}" style="{style}" qtip="{qtip}">{text}</div>'
+'</tpl>'
,tplRow:
'<div class="ux-row-action">'
+'<tpl for="actions">'
+'<div class="ux-row-action-item {cls} <tpl if="text">'
+'ux-row-action-text</tpl>" style="{hide}{style}" qtip="{qtip}">'
+'<tpl if="text"><span qtip="{qtip}">{text}</span></tpl></div>'
+'</tpl>'
+'</div>'
,hideMode:'visiblity'
,widthIntercept:4
,widthSlope:21
,init:function(grid) {
this.grid = grid;
if(!this.tpl) {
this.tpl = this.processActions(this.actions);
}
if(this.autoWidth) {
this.width = this.widthSlope * this.actions.length + this.widthIntercept;
this.fixed = true;
}
var view = grid.getView();
var cfg = {scope:this};
cfg[this.actionEvent] = this.onClick;
grid.afterRender = grid.afterRender.createSequence(function() {
view.mainBody.on(cfg);
grid.on('destroy', this.purgeListeners, this);
}, this);
if(!this.renderer) {
this.renderer = function(value, cell, record, row, col, store) {
cell.css += (cell.css ? ' ' : '') + 'ux-row-action-cell';
return this.tpl.apply(this.getData(value, cell, record, row, col, store));
}.createDelegate(this);
}
if(view.groupTextTpl && this.groupActions) {
view.interceptMouse = view.interceptMouse.createInterceptor(function(e) {
if(e.getTarget('.ux-grow-action-item')) {
return false;
}
});
view.groupTextTpl =
'<div class="ux-grow-action-text">' + view.groupTextTpl +'</div>'
+this.processActions(this.groupActions, this.tplGroup).apply()
;
}
if(true === this.keepSelection) {
grid.processEvent = grid.processEvent.createInterceptor(function(name, e) {
if('mousedown' === name) {
return !this.getAction(e);
}
}, this);
}
}
,getData:function(value, cell, record, row, col, store) {
return record.data || {};
}
,processActions:function(actions, template) {
var acts = [];
Ext.each(actions, function(a, i) {
if(a.iconCls && 'function' === typeof (a.callback || a.cb)) {
this.callbacks = this.callbacks || {};
this.callbacks[a.iconCls] = a.callback || a.cb;
}
var o = {
cls:a.iconIndex ? '{' + a.iconIndex + '}' : (a.iconCls ? a.iconCls : '')
,qtip:a.qtipIndex ? '{' + a.qtipIndex + '}' : (a.tooltip || a.qtip ? a.tooltip || a.qtip : '')
,text:a.textIndex ? '{' + a.textIndex + '}' : (a.text ? a.text : '')
,hide:a.hideIndex
? '<tpl if="' + a.hideIndex + '">'
+ ('display' === this.hideMode ? 'display:none' :'visibility:hidden') + ';</tpl>'
: (a.hide ? ('display' === this.hideMode ? 'display:none' :'visibility:hidden;') : '')
,align:a.align || 'right'
,style:a.style ? a.style : ''
};
acts.push(o);
}, this);
var xt = new Ext.XTemplate(template || this.tplRow);
return new Ext.XTemplate(xt.apply({actions:acts}));
}
,getAction:function(e) {
var action = false;
var t = e.getTarget('.ux-row-action-item');
if(t) {
action = t.className.replace(/ux-row-action-item /, '');
if(action) {
action = action.replace(/ ux-row-action-text/, '');
action = action.trim();
}
}
return action;
}
,onClick:function(e, target) {
var view = this.grid.getView();
var row = e.getTarget('.x-grid3-row');
var col = view.findCellIndex(target.parentNode.parentNode);
var action = this.getAction(e);
if(false !== row && false !== col && false !== action) {
var record = this.grid.store.getAt(row.rowIndex);
if(this.callbacks && 'function' === typeof this.callbacks[action]) {
this.callbacks[action](this.grid, record, action, row.rowIndex, col);
}
if(true !== this.eventsSuspended && false === this.fireEvent('beforeaction', this.grid, record, action, row.rowIndex, col)) {
return;
}
else if(true !== this.eventsSuspended) {
this.fireEvent('action', this.grid, record, action, row.rowIndex, col);
}
}
t = e.getTarget('.ux-grow-action-item');
if(t) {
var group = view.findGroup(target);
var groupId = group ? group.id.replace(/ext-gen[0-9]+-gp-/, '') : null;
var records;
if(groupId) {
var re = new RegExp(RegExp.escape(groupId));
records = this.grid.store.queryBy(function(r) {
return r._groupId.match(re);
});
records = records ? records.items : [];
}
action = t.className.replace(/ux-grow-action-item (ux-action-right )*/, '');
if('function' === typeof this.callbacks[action]) {
this.callbacks[action](this.grid, records, action, groupId);
}
if(true !== this.eventsSuspended && false === this.fireEvent('beforegroupaction', this.grid, records, action, groupId)) {
return false;
}
this.fireEvent('groupaction', this.grid, records, action, groupId);
}
}
});
Ext.reg('rowactions', Ext.ux.grid.RowActions);
요기 괜찮은 사용자 플러그인도 함 보세요
| Extjs Core 3.0 Beta 릴리즈 (4) | 2009.04.07 |
|---|---|
| Examples Of ExtJS in Action (2) | 2009.03.31 |
| extjs 2.2의 IE에서 iframe document load 버그패치 (0) | 2009.01.21 |
| Extjs 3.0 Roadmap (10) | 2008.11.12 |
| Ext2.2 Release (11) | 2008.08.07 |
웹표준교과서
CSS 마스터전략
실용예제로 배우는 웹표준
웹2.0을 이끄는 방탄웹
웹표준 Ajax DOM 스크립팅 |
jQuery in Action (프로그래밍 jQuery) | HTML5 (10) | 2010.03.02 |
|---|---|
| 프로젝트 관리자가 알아야할 97가지 사실 (1) | 2009.12.08 |
| 온라인 메모장 (6) | 2009.04.08 |
|---|---|
| 이땅의 개발자에게 필요한 철학 (2) | 2008.03.05 |
| Getting Real (0) | 2008.03.04 |
A lot of confusion and misunderstanding surrounds the term "user experience." The multitude of acitivities that can be labeled with these two words span a vast spectrum of people, skills and situations. If you ask for UX design (UXD), what exactly are you asking for? Similary, if someone tells you they are going to provide you with UXD for an application, website or intranet or extranet, what exactly are you going to get?
Is it just one person who is responsible or is it a team of people who are in charge of UXD? In this story I´ll sketch my ideas ofUXD based on my experiences and at the end of this story I will give you my answer.
Let us start at the beginning – UXD starts with experience – experience of the users. And so I will talk about the users first.
UXD-P – every person is an individual
Every person is an individual. Every person is in possession of different roles. For each individual there will be many roles and each person adopts a different role depending on the circumstances.
User Roles
Sometimes the individual person holds one role, but mainly he will hold quite a few roles like consumer, customer, user, client, investor, producer, creator, participant, partner, part of a community, member, and so on.
UXD-P – network of expectations, experiences and knowledge
Every user is multi-faceted – and is considerably more complex than they themselves can imagine – so it´s not very helpful just to talk to the user or ask him what he needs. We have to watch what people do; we have to listen to what people say and to recognize what decisions people make – and by observing we have to evaluate and understand why they do this and that. Why and what kind of visual elements will the user like, prefer and or understand? Why and what kind of mental model, navigation or function do they respond to?
Jakob Nielsen said “To design an easy-to-use interface, pay attention to what users do, not only what they say. Self-reported claims are unreliable, as are user speculations about future behaviour.” (Jakob Nielsen – Alertbox) and I agree – I think no statement can be objective. Perhaps the circumstances are not realistic or not reasonable for the person. Or maybe the person himself is not really in the “situation,” or he is being influenced by other factors (trying to please the tester for example). Or maybe he is trying to succeed with the test rather than trying and failing, which tells us so much more.
When all three perspectives (do, say, make) are explored together, we are able to realize the experience spectrum of the “normal” user/customer we are working for.
Jesse James Garrett said: “User experience is not about how a product works on the inside. User experience is about how it works on the outside, where a person comes into contact with it and has to work with it” (J.J.Garrett – The Elements of User Experience) .
Experiences
Areas of experiences: different areas which effect the quality of communication
UXD-P – personal and individual
When we talk about experiences, we take the individual into consideration, including the subjective occurrences felt by the person who has the “confrontation” with what we want them to use. Experiences are momentary and brief – sometimes they are part of a multi-layered process or they are on their own.
Normally such know-how has been learned as a part of something or by itself and will be remembered in the same way – but that’s not always the case – and the person deals with the situation in a different way. If we look at their exeperience as a continuum, the user brings their experiences of the past to the interaction in the present and adds their hopes for the future. That future could be: to interact with their banking in a safe and secure way.
Flow of Experience
Flow of experience: the individual user/customer is always in the present – they act in the present. They are influenced by former experiences and current expectations.
UXD-P is taking the users’ views, behavior, and interactions, to figure out the emotional relationship between them and the thing we have built. For the most part these "people" and their experiences are unknown. It requires an appreciation of the customer: their journey, their personal history and their experiences.
It is the collective set of experiences, in the online-world, the offline-world, or even tiny little things (i.e. My coffee was cold this morning) that affects their experience of the products and the companies that represent them. It is about appreciating the individual user’s unmet needs, wants, capabilities and desires in a contextual way. It´s a box of experiences including the things the user saw, acted and felt. (BBC Two [12th February 2008, 9pm, BBC Two] had a program on rational thought. Highlights of the program include: Loss complex, Post-decision rationalization, Priming, Precognition. Watch highlights from the programme : http://www.bbc.co.uk/sn/tvradio/programmes/horizon/broadband/tx/decisions/highlights/ )
Experiences and expectations meet in the present. Both are inseperably combined, and every action we take takes both parts into consideration. When a person uses an application, he tries to understand what happens. He will always try to reference this to his past experiences. The moment is also tightly coupled to his expectations of his personal outlook.
At this point of “present” I think of the UX honeycomb of Peter Morville [1] …
Morville’s "honeycomb"
honeycomb – Peter Morville (P.Morville – Facets of the User Experience)
In the present we have to deliver to the individual user and his specific task the best answers to following questions.
In the UXD-P the whole team has to take the users’ views of the GUI and the interactions to figure out the emotional relationship between the brand and potential customers. It requires a common appreciation of the customer journey and their personal history: not only with the product and similar products, but also with similar experiences.
UXD-P – teamwork and cooperation
The first stage in discovering – to invent or design for the experience – is to take a new viewpoint about the people who buy and use the products and services we are designing. This is a birdseye view and from step to step we have to use the "mouseview," which is to say a detailed view from the user’s perspective, as we develop the application we have to switch between these views. Our main desire is to to respect, value, and understand the continuum of experience and expectations our users have .
UXD-P can sometimes be a slippery term. With all the other often used terms that float around: interaction design, information architecture, human computer interaction, human factors engineering, usefulness, utility, usability and user interface design. People often end up asking, “What is the difference between all these fields and which one do I need?” If the UXD is aimed to describe the user’s satisfaction, joy or success with an application, product or website, however we specify it, there are a few key essentials which need to be tackled and I have to point out the UX honeycomb of Peter Morville [1] a second time. Each of these points, as enlightened above, makes up a considerable component of the user experience. Each is made effective due to the design offerings from each of the following elements:
Usefulness is based upon utility and usability. This means the product is able to give exactly the right kind of service and what the user is expecting from it. And it´s the joy of reaching my aims and the joy of doing so easily. The information architecture is in charge of clarity of the information and features, lack of confusion, a short learning curve and the joy of finding. The designing of the interaction is essential for a successful and overall satisfying experience. So the interaction design has to answer the questions of workflow, logic, clarity, and simplicity of the information. Visual design is responsible for the clarity of the information and elements, simplicity of tools and features, pleasant or interesting appearance of the interface, the visual hierarchy, and the joy of look and feel. Accessibility is a common term used to describe how easy it is for people to use applications or other objects. It is not to be mixed up with usability which is used to describe how easily an application, tool or object can be used by any type of user. One meaning of accessibility specifically focuses on people with disabilities: physical, psychological, learning, among others. Even though accessibility is not an element of its own, it is important to notice that accessibility also plays a role on the whole user experience to increase the likelihood of a wide-ranging user experience. People tend to gravitate to something that is easier to use regardless of who it might have been designed for.
The UXD innovation process is a nonlinear spiral of divergent and convergent activities that may repeat over time. Any design process begins with a vision. This applies particularly to the UX process. A vision, however, is not enough to start design. As I mentioned before, we always have different circumstances, users and roles. Therefore, it is critical to accurately understand the end user’s needs and requirements – his whole experience and expectations. The UX process relies on iterative user research to understand users and their needs. The most common failure point in UX processes is transferring the perspective of users to UI design. The key is to define interaction first, without designing it. First, all the research (the user, product and environment) have to be organized and summarized in a user research composition. These lead to user profiles, work activities, and requirements for the users. The user research composition feeds directly into use cases. The use cases show steps to accomplish task goals and the content needed to perform interactions. Completed use cases are validated with the intended user population. This is a checkpoint to see if the vision is being achieved and the value is clear to users and the project team. The next step is to design the user interface, generating directly from the interaction definition. A primary concern with design is to not get locked into a single solution too early. To keep the project on time, this step should be split into two parts: rough layout and exact and detailed design. The rough layout allows experimentation and rapid evaluation. Detailed design provides exacting design and behavior previews of the final application that specify what is to be coded. Iterative user evaluations at both stages are connected to be fast and effective in improving GUI, design feedback, rapid iterative evaluations, and usability evaluations.
Image_7
design workflow – workcycle – workspiral
UXD-P – Gathering the elements
The diagram below presents the relationship of the elements above:
Elements of UXD-P
Lewin’s equation
Lewin’s Equation, B = f (P,E) ( B – Behaviour; f – Function; P – Person; E – Environment ), ...
... is a psychological equation of behaviour developed by Kurt Lewin. It states that behaviour is a function of the person and his or her environment [2].
There is a desired behaviour that we need to encourage, but we have no control over the person, so via interaction design, information architecture and interface design we control the environment and therefore generate the desired behavior. (see reference: books.google.com ).
UXD-P – many steps to go but every step is worth it
How do we involve our team, customer and our user/consumer? We can start at different points, but I like to think about the circumstances first. Where do we come from? Where are we? Where will we go? And who is “we”? “We” means each person who is involved in the project. Iin the centre of each effort stands the user. To get the user with his personal experiences and expectations into the project, the design team and the customer needs a combining glue / tool / instrument. I believe these are the personas of the “target users/consumers” in the process of UXD-P. If there are no personas the second or third choice are scenarios or the workflows (based on a certain user/person).
The management point of view for the most cases is also the view of our customer. It includes the user’s/consumer’s age, income, gender and other demographics. The perspective of UXD-P is to look at behaviour, goals and attitude.
To get a realistic persona we have to identify first of all the target users. Out of my experiences this is not only the task of our client to define the users and consumers – we have to support him. During the identification and characterization we have to go beyond demographics and try to understand what drives individual users and consumers to do what they do and these as detailed in quantity and quality as necessary and possible – like I mentioned above. The approach and the complexity of the characterization depend on the tasks, project and functionalities. Parallel to the very personal description we need a “picture” of the environment. For each persona we must define their business and/or their private concerns and aims. Do they want to research a product for purchase later? Are they concerned about not wasting time primarily? Do they just want to purchase something online as easy and quick as possible?
Depending on these personas we can formulate, discuss and prove scenarios – from the very beginning of the project, during the project and as check or analysis at the end of the project.
UXD-P – my blueprint of schedule – "todos" and deliverables
We are always asking and being asked: what are the deliverables. Throughout my career as an IA, UX-planner and designer, as well as during my study of architecture and town planning, I have constantly asked myself following the questions:
I have realized that if I do not answer these questions previous to creating a deliverable, I waste more time and deadlines slip.
The deliverables are not for us. The deliverables are a means of communication with several people: manager, decision maker, client, designer, front-end developers, back-end developers, etc. Sometimes I have the feeling we overlook this from time to time. After I think about the project I have to ask myself, where will my deliverables and other efforts fit within the process of design? The following diagram describes different lines of work that will lead us to some questions each line must accomplish. Depending on these questions and topics I will outline the basis, basics and deliverables for which each skill and ability which is necessary.
Image_6
schedule of UXD-P ___ better view – schedule 1238px x 1030px
UXD-P – my conclusion
I studied architecture and town planning. And just like town planning and architecture isn’t just for architects and art lovers, the internet isn’t just for computer users and developers. Similarly, just as the towns and the cities are for the inhabitants and architecture is for the users of a building, so products and applications are for the user, the customer, the member and not for the people who build them.
In every kind of process we should act in a team but in the process of UXD-P it is absolutely essential that we have to think parallel, with the same focus . We have to act in a team, although every team member is a kind of lawyer: lawyer of budget, of the client, of utility, of usability, of look and feel, of brand and finally of the user himself. Because at the end of the project, our user/customer is the final judge.
Good design is not only interface, or look and feel, or technology, or hardware, or how it works. It is every detail, like the structure, the labelling, the border of a button or a little icon. Finally, it is the sum of every element. I believe that a shared vision of a group of creators will have more potential than individual creativity. And that is the point where creativity meets expectation. The point of view on IA and design and the process to get to a well-designed product will be changed by UXD-P.
The persons who use the application or other object that we invent are the real “architects” of the “architecture” – the real “inventor” of the design. The more we know about our users, the more likely we are to meet their needs.
As the capabilities of interactive applications and the internet go forward and grow, more and more consumers use the applications and the various possibilities in new and different ways. We must think about all aspects of user experience.
And I will ask you once again: Is it just one who is responsible or is it the team which is in charge of UXD-P?
Personally, I believe it is the process of planning and designing for User Experiences (and so I think it’s the team which is in charge), but the overview has to have an experienced planner as a kind of captain.
The most common cause of an ineffective website (one that doesn’t deliver value to both the business and its intended constituents) is poor design. The products have to follow, to cover the functions and the experiences. The lack of clear organization, navigation and values of brand and mood mean that people will have an unintentional and maybe bad experience, rather than one that will meet the business’s relationship objectives for each individual. User experience design and planning is a fundamental component to the creation of successful digital products, applications and services.
UXD-P is UXdesign and planning- - In my estimation there are distinctions between Design and Planning.
Design is usually considered in the context of arts and other creative efforts. When I think of design in the UX process it focuses on the needs, wants, and limitations of the end user of the designed goods, but mainly on the visual parts and the mood. A designer has to consider the aesthetic-functional parts and many other aspects of an application or a process.
The planning part provides the framework. The term "planning" describes the formal procedures used in such an endeavors, such as the creation of documents, diagrams etc. to discuss the important issues to be addressed, the objectives to be met, and the strategy to be followed. The planning part is responsible for organizing and structuring to support utility, findability and usability.
I strongly believe that both parts – design and planning – have to work closely together. Every team member should have the ability to think cross-functionally and to anticipate consequences of activities in the whole context.
I’ve often seen timelines like this …
and this doesn´t work for UXdesign and planning …
I give a timeline the preference which looks like this:
... to develop a UXdesign and UXplanning.
And in the center of this team and of this process should stand the leading person – the user!
| 더 나은 디자이너가 되기 위해 도움이 되는 튜토리얼 사이트 50선 (0) | 2009.04.16 |
|---|---|
| 프리젠테이션 개발자에게 유용한 14가지 Cheat Sheets (0) | 2009.04.04 |
| 2009년 유행할 웹디자인 트렌드 (14) | 2009.01.19 |
| IE8을 미리 대비하기 (0) | 2008.06.13 |
| PhotoshopExpress : 포토샵이 웹으로? (2) | 2008.03.28 |
| jQuery Grid Plugin : jqGrid (16) | 2009.04.06 |
|---|---|
| ext의 border-layout과 같은 jQuery UI.Layout Plugin (0) | 2009.01.14 |
| jQuery 링크에 걸린 파일 사이즈 자동으로 알아내기 (1) | 2008.09.03 |
| jQuery Loading바 구현하기 (2) | 2008.07.08 |
| IE8 웹조각(Web Slice) 만들기 (5) | 2009.11.02 |
|---|---|
| 웹표준 UI/UX 그리고 프리젠테이션 (0) | 2009.04.15 |
| 구글크롬 테스트 및 브라우저버전체크 스크립트 (6) | 2008.09.03 |
| IE,Opera,Safari에서도 Firebug를 쓰자 (2) | 2008.07.30 |
| 사용자에게 브라우저 업데이트 권장하기(Push up) (2) | 2008.07.30 |
Beautifully Documented Code를 보다가 일전에 Wiki 관련 Parser에 대해서 관심을 가지게 되었다.
그때는 Java로 된, 혹은 Server side 언어쪽만 찾아봤었는데 이렇게 자바스크립트로 된 파서를 찾아서 꿈쳐둔다.
웹페이지를 퍼블리싱할때 디자인적인 측면이 많이들 강조된다. 타이포나 문장에 대한 배치등 그리드에 대한것도 전적으로 디자이너의 몫으로 넘기기 쉽다. 그러나 사실 이러한 문서 작업은 디자이너들 보다는 퍼블리셔나 산출물작업의 양만으로 따진다면 서버 프로그래머들의 작업량이 더 많다.
뭐 잡설은 집어치고, 이전 레이텍(Latex)이나 HanTex과 같이 화면상에 문서를 구성할수 있게 실시간으로 스크립트를 이용해서 만들어 준다면 얼마나 좋을까? 바로 Creole Parser가 이러한 것을 가능하게 해주었다.
| offsetParent의 모든것! (0) | 2010.02.04 |
|---|---|
| 자바스크립트 delete 연산자에 대한 고찰 (8) | 2009.11.18 |
| 자바스크립트 가이드 (0) | 2008.12.03 |
| JsonML 활용하기 (0) | 2008.11.12 |
| CSS & JAVASCRIPT 최적화 도구 (0) | 2008.10.26 |
 |
 |
 |
 |
 |
| Chap02. XForms Model (0) | 2008.12.14 |
|---|---|
| Chap01. XForms 소개 (0) | 2008.12.13 |
XForm Model은 어떠한 폼인지, 어떤 데이타를 포함하는지, 그래도 어떤 기능을 하는지를 정의한다.
XForm UI는 각 컨트롤 객체들이 화면에 출력되고 인풋 필드를 정의한다.
XForms Model
XForms model은 데이타를 설명하는데 사용되며, data model은 XML전문의 instance이며 <model>엘리먼트안에서 데이타 모델로 정의된다.
[예제]
위의 예제에서 보면 XForms는 <instance> 엘리먼트를 이용해서 수집된 데이타를 XML 템플릿으로 정의하며 <submission>엘리먼트를 통해서 데이타를 전송한다.
XForms model은 UI의 비주얼한 부분을 처리하지는 않는다.
XForms Namespace
위의 예제에서는 XForms 네임스페이스를 빼먹었는데 다음 포스트에서 소개한다.
<instance>엘리먼트
XForms model은 수집된 데이타를 정의하는데 <instance>엘리먼트를 사용한다.
위의 예제에서 data instance에서 수집된 데이타는 아래와 같이 값이 바뀌게 된다.
에서 데이타가 입력되면 아래와 같이 바뀐다.
<submission>엘리먼트
데이타 전송시 사용되는 엘리먼트이며 어떻게 submit할건지를 결정하며 HTML의 <form>태그와 마찬가지로 id, action, method를 동일한 방식으로 표기한다.
XForms User Interface : controls
데이타의 표현과 입력을 위해 사용된다. XForms의 UI 앨리먼트들을 XForms에서는 컨트롤(controls)라고 부른다.
과 같이 표현하며 각각의 <input>엘리먼트와 <submi>엘리먼트표현된다. 일반 XHTML의 표기법과 약간 다르게 표현된다.
XForms는 하나의 컨테이너를 필요로 한다.
XForms는 단독으로 설계되지 않으며 XForms 문서로써도 기능을 하지 못한다.
Xforms는 또다른 XML문서안에서 실행되어야 하며 XHTML1.0에서 실행될수 있고 XHTML2.0에서도 동작될 예정이다. (데꾸벅 주 : 아직 2008.12월 현재 XHTML2.0 스펙은 W3C권고안에 없다.)
과 같이 작성하면 다음 그림과 같이 표현된다.
<person>
<fname>Hege</fname>
<lname>Refsnes</lname>
</person>
혹은 아래와 같이
fname=Hege;lname=Refsnes
translated by techbug
| Chap03. XForms Namespace (0) | 2008.12.14 |
|---|---|
| Chap01. XForms 소개 (0) | 2008.12.13 |
| 데꾸벅체 다운로드 (0) | 2008.07.09 |
|---|---|
| MS office2007 Excel 파일 각각 따로 열기 (8) | 2008.06.27 |
| 윈도우 서비스 등록하기 (1) | 2008.02.21 |
| Ajax Framework 분석 (0) | 2009.05.04 |
|---|---|
| HTTP Header에 대하여 (0) | 2008.11.08 |
| AJAX에서 즐겨찾기와 뒤로가기를 다루는 방법 (0) | 2008.09.24 |
| 100라인 Ajax Wrapper (0) | 2008.04.19 |
| 어떤 AJAX Framework를 선택할 것인가. (0) | 2008.03.14 |
rowactions.zip