아기곰푸우

HTML5

http://html5test.com 

브라우저 지원 현황

http://brackets.io/

brackets 툴 html5 ,css 제작툴 ide

http://www.my-debugbar.com/wiki/IETester/HomePage

IE Tester : ie8 이하 테스트

http://placehold.it

임시 이미지

http://www.videojs.com/

비디오재생 ui : srt 자막 지원

http://www.lesscss.org/

less css 변환 node.js 필요

npm install -g less

lessc styles.less styles.css

http://meyerweb.com/eric/tools/css/reset/ 

http://html5doctor.com/html-5-reset-stylesheet/

http://yuilibrary.com/yui/docs/cssreset/

css 초기화

http://necolas.github.io/normalize.css/

css 정규화

http://www.css3generator.com/

http://www.css3maker.com/

css 만들기

http://www.colorzilla.com/gradient-editor/

css 그레이디언트 기능 지원

http://csssprites.com/

이미지 합치기

https://kuler.adobe.com/

색상 조합

http://cubic-bezier.com/

easing 함수 보기

http://960.gs/

http://grids.heroku.com/

http://gridpak.com/

반응형 웹을 위한 그리드 시스템 플러그인

http://leaverou.github.io/prefixfree/

벤더 프리픽스 없애기

https://code.google.com/p/html5shiv/

https://code.google.com/p/ie7-js/

https://code.google.com/p/css3-mediaqueries-js/

구버젼 익스 지원용 html5 인식

http://www.google.com/fonts/earlyaccess

구글웹폰트

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

http://maczniak.github.io/bootstrap/

부트스트랩 - ui 트위터

http://raphaeljs.com/

svg 태그생성 플러그인

jquery 

jquery mobile - 모바일 ui

세타터치 - 모바일 ui

폰갭 - app 만들기

http://swffit.millermedeiros.com/
fullscreen  플래시에서 플래시 스테이지보다 브라우져가 작을때 자동으로 스크롤이 생기고 사라지고를 만들어주는
아주 편리한 자바스크립트 라이브러리이다.

이펙트 사용법

http://blog.flashgen.com/2011/10/18/creating-particle-effects-for-starling-on-windows/

이펙트 에디터

http://onebyonedesign.com/flash/particleeditor/

일반적인 이펙트 효과들

http://www.flasheff.com/

일반적인 이펙트 효과들 만들기

http://www.effectgenerator.com/

리얼타임 프로토콜

http://labs.adobe.com/technologies/cirrus/

cirrus( 베타 ) 를 사용한 p2p 라이브러리

http://multiuser.reyco1.com/blog/

간단한 어플이나 ui 강력한 컴포넌트가 많이 필요한 경우에만 flex를 사용한다.

기본은 actionscript 3d 가속이 가능한 starling framework에 feathersui( http://feathersui.com )  를 사용한다.

그래야 flash builder 3.7부터 강력한 프로파일링 기능을 사용할수 있다. 

monocle ( http://wooyaggo.tistory.com/407 )

아이폰이나 안드로이드나 다 가변 ui 지원할수 있도록 고료해야한다.

1. 기존 유사한 프로그램이 있다면 참조한다.

2. 폰만 지원하는지 태블릿 pc만 지원하는지 둘다 지원할지 결정한다.

3. 둘다 지원할 경우 SplitViewNavigator 같은 형식으로 우선 고려한다. flex이므로 actionscript 로 재작성 필요

4. 해상도와 dpi를 고려해서 ui 의 크기를 결정한다.

5. 폰은 최대 5인치 까지 고려하고 태블릿 pc이면 최소 7인치까지 고려한다.

6. 국내에서는 폰일 경우 해상도 800 * 480 을 최소로 고려한다. 태블릿 pc 경우 해상도 1280 * 720 을 최소로 고려한다.  ( 낮을수록 좋다. ) 해외는 320 * 240 , 800 * 600 

7. 각 os별 해상도에 영향을 주는 것들을 고려한다. 상단바 하단바 

8. ui는 한쪽방향으로 흐르듯 만든다. ( 개인적 의견)

9. 버튼은 확실히 하는 역할을 알게 한다. 최악의 경우 텍스트를 포함해서라도 한다. 툴팁은 고려하지 않는다 

10. ui 이미지는 텍스쳐 한장으로 가능하게 해야 3d 가속이 좋다.

11. 터치 인터페이스를 마우스보다 우선 고려한다.

12. 텍스트 입력 부분이 있을경우 전체 입력모드, 가상키보드 입력, pan입력 모드를 고려한다.

private static const pattern:RegExp = /[\ \{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi

public static function checkSpellForChat(str:String):Boolean

{

var word:String = str.split(pattern).join("");

return checkExist(word);

}

public static function checkSpellForName(str:String):Boolean

{

var word:String = str.split(pattern).join("");

if ( checkExist(word)==true || checkSame( word)==true )

{

return true;

}

return false;

}

public static function checkExist(str:String):Boolean

{

for each(var word:String in existList )

{

if ( str.indexOf(word ) >=0 ) 

{

return true;

}

}

return false;

}

public static function checkSame(str:String):Boolean

{

for each(var word:String in sameList )

{

if ( word == str ) 

{

return true;

}

}

return false;

}

1. 2d 3d 파티클

2. 물리에디터

3. 캐릭터에디터

4. 캐릭터 커스터마이징 에디터

5. 지형 에디터

flex 4.5.1 spark 사용중인데 모바일에선 모바일 테마가 적용되면서 호환안되는 내용이 들이 있음

해결법 :

1. 인터페이스가 같은 ui 라이브러리를 각각 만들어 따로 적용한다.

2. 최대한 ui 설정은 css 옮긴다.

3. 고정 ui 보단 플로우 ui ( VGroup, HGroup )을 이용한다.

4. 스킨은 가벼운걸 기준으로 삼는다.

5. 모바일과 웹이 서로 완전히 다른 ui 를 써야한다면 ui/프로젝트 명으로 구분한다.

6. 항상 양쪽다 검증한다.

7. panel 은 모바일에 지원하지 않으니 사용안한다.

8. html 형식의 텍스트는 성능저하가 심하므로 타이핑형식으로 로그 출력시에는 사용하지 않는다.

9. 가끔적 actionscript 로 짠다.

버젼관리시 분리하는 경우

1. 나라별 지원

2. 큰 업데이트 기준으로 분리

3. 개인개발(개발자간 개발), 통합개발( 기획자와 그래픽 통합 ), 통합테스트( 패치최종버젼 테스트), 최종 버젼(패치된 버젼)으로 나누어 관리

버젼관리시 버젼별 상이한 부분관리하는 방법

1. 브랜치로 분리한다. ( 나누긴 쉽지만 버그 수정이나 개발한것을 옮길때 여러번 작업해야 한다. )

2. 설정파일로 분리한다. ( 나라별, 큰 업데이트별로 지원해야하는게 다를 경우 힘들수 있다. 단 버그수정과 개발한것을 옮길때 한번만 하면 된다. )

기존 시스템에서 변경하기

1. 서비스버젼과 패치버젼 차이 분석

2. 차이부분은 설정파일로 분리한다. 

3. swf 수정이 힘들경우 파일이름을 분리해서 설정파일로 분리한다.

4. 

클라이언트 입력을 받아서 서버에서 처리할때 주의점

1. 클라이언트 입력을 서버에서 검증한다.

2. 서버 테스트한다.

3. 클라이언트에서 검증루틴을 추가한다.

4. 클라이언트 테스트한다.

5. 클라이언트에서 조작못하도록 막는다.

(예 : jsp 에서 한아이디 한번 글쓰기를 할 경우 쓴적있으면 입력버튼을 없앤다. )

허드슨 테스트 결과 잘된다.

ant는 xml 이 필요한데 이클립스에서 익스포트한 다음 수정해서 처리했다.

웹어플리케이션인 경우 재배치 하는 걸 추가해야한다.

linux에서 utf-8로 컴파일 하게 해야 하고 bom 없는 utf-8로 해야한다.

flash를 빌드 해야 하는데 ant를 연구좀 해야 겠다. 안되면 그냥 포함해서 배포

모바일 air는 인증서 문제로 힘들듯