반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

HTML5, JavaScript 관련 툴들 소개

2012. 1. 31. 08:36 | Posted by 솔웅


반응형
오늘 자바스크립트 관련 몇개 소개할 께요.

1. Trial Tool (JavaScript Test Tool)

써핑하다가 우연히 찾은건데요.

Tutorial 동영상을 보니까 완전 인도발음 영어를 사용하더라구요.
Parashuram Narasimhan 이라는 친구인데요.

블로그에 가 봤더니 이 Trial tool 말고도 어렵게 개발한 여러 툴들을 공유하고 있습니다.

온라인상으로는 아래 링크를 따라가 보시면 테스트 할 수 있습니다.

nparashuram.com/trialtool/index.html



왼쪽에 샘플을 하나 클릭하면 오른쪽에 JavaScript 소스가 뜹니다.
그리고 오른쪽 위의 Run을 누르면 그 결과값이 아래에 뜹니다. 에러가 있으면 에러 메세지가 뜨구요.

전체 소스 파일은 여기에서 받으실 수 있습니다.

유튜브에 있는 소개 동영상을 좀 볼까요?




이 친구의 홈페이지에 가시면 이 것 외에 여러 다른 툴들도 보실 수 있습니다.
http://nparashuram.com

2. svg-edit

이 툴은 HTML5의 도형 그리는 코드를 손쉽게 만들 수 있도록 도와주는 툴입니다.


이렇게 자기가 그리고 싶은 도형을 그린 다음에 왼쪽 위에 있는 <SVG> 버튼을 클릭합니다.



그러면 이렇게 HTML5 코드로 변환해 줍니다.
아래 주소로 가시면 직접 해 볼 수 있습니다.
http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

아래 주소로 가시면 직접 다운 받아서 사용할 수도 있습니다.
http://code.google.com/p/svg-edit/downloads/list

구글에서 서비스하는 것 같은데 제 경우엔 구글 크롬에서는 잘 실행이 안되고 화이어폭스에서 잘 실행이 되더라구요.

3.  Raphaël—JavaScript Library

이 건 자바스크립트 라이브러리인데요. 아래와 같이 간단하게 API를 익혀서 화려한 이미지나 도형을 구현할 수 있도록 도와주는 라이브러리 입니다.


아래 링크로 가시면 라이브러리도 다운 받으실 수 있구요. 사용법도 배우실 수 있습니다.
http://raphaeljs.com/

반응형


반응형

아침에 밥 먹으면서 주로 FOX TV를 봅니다.
(사는 지역이 뉴욕권이라서 FOX TV 뉴욕 지방방송을 봅니다.)
보수적인 방송의 대명사인 FOX TV 이고 저는 보수적은 아닌것 같은데 그걸 봐요. 왜냐하면 그 방송은 재밌으니까......  :)

오늘 방송 보다가 한 광고가 눈에 띄더라구요.
UFT(United Federation of Teachers) 라는 단체에서 제작한 광고던데요.
UFT는 우리나라 말로 하면 전국 교사 연합회 쯤 될까요?

광고의 내용은 현 뉴욕시장인 블름버그의 교육정책을 비판하는 내용이예요.

이 내용이 신선했던건 미국내의 주요 TV채널을 통해 방송되는 광고인데도 특정 정치인을 딱 찝어서 '거짓말하지 말고 솔직해 집시다'라고 대놓고 말하는 것이 었어요.




10 years as mayor, and Mike Bloomberg still doesn't get it.
10년동안 시장으로 있었지만 마이크 블름버그는 아직도 이루지 못했습니다.

Cathie Black. Fudged education test scores. Closing schools. Parents shut out of the process.

Cathie Black(전 뉴욕 교육 정책 담당자), 임시방편의 교육 정책. 문닫는 학교들. 항변하는 학부모들.

And just last month, Bloomberg said in a perfect world he’d cut the number of teachers in half, doubling class size.

바로 지난달 블룸버그는 교사의 숫자를 반으로 줄임으로서 한 학급 학생 수를 배로 늘리겠다고 말했습니다.

Mayor Bloomberg, let’s be honest: If you really want to do right by our kids, you’ll work with teachers and parents and stop playing politics with our schools.

블룸버그 시장님 우리 솔직해 집시다. 만약 당신이 진정으로 우리 아이들에게 옳은 일을 하고 싶다면 당신은 우리 선생님들과 학부모들과 같이 일을 해야 합니다. 우리의 학교를 상대로 한 정치를 그만 두세요.

====== o ====== o ====== o ======== o ======= o =====

우리나라도 이렇게 TV광고를 통해서 직접적으로 정치인을 비판 할 수 있다면 어떻게 될까요?
오세훈 시장의 무상급식 투표, 그리고 지금 줄줄이 측근들의 비리가 들춰지고 있는 우리의  가카 MB. 자신의 비리들도 이미 임기중에 무궁무진하게 들춰지고 임기 후 감옥행이냐 임기 못채우고 하야해야 하느냐의 기로에 선 우리 MB.

이런 사람들이 왜 갑자기 생각날까요?

임금님 귀는 당나귀 귀다라고 대나무 밭에서 소리치게 하지 말고..
MB 우리 이제 솔직해 집시다 라고 이렇게 공개적으로 얘기 할 수 있으면 정말 좋지 않겠어요?

반응형

HTML5 CSS3 Animation and Adobe Dreamweaver

2012. 1. 30. 03:47 | Posted by 솔웅


반응형
In HTML5, Actually in CSS3, you can use animation effects with out Javascript.
Use -webkit-animation .. that's all. Too simple to make Animation effects.
Unfortunately it is working on Google Chrome and Safari browsers only.

오늘 소개해 드릴 기능은 CSS3의 animation 기능입니다.
복잡하게 자바 스크립트를 사용하지 않아도 간단하게 CSS3의 webkit 을 사용해서 애니메이션 효과를 내실 수 있습니다.



CSS

Animations

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

*Please make a better use of it. We don't want a new blink tag ;)

Pulse!


You can check it out with only Google Chrome and Apple Safari.
이 기능은 아래 O표한 브라우저들에서 작동합니다.

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Not working (X)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Not working (X)

Download below source code.
아래 소스코드 파일을 받으실 수 있습니다.



Hey guys I'd like to introduce Adobe DreamWeaver CS5 for Phone,Tablet and  PC.
Adobe DreamWeaver CS5 support 3 kine of preview screen for Phone, Tablet and PC. So you can develop web site for those 3 devices at once.
And it support hints of CSS3 functions to make easy development.
As You know HTML5,CSS3 is not Standard Skill Yet so each browsers has some of their own CSS function.
Adobe Dreamweaver provide all of the functions.

아래 하나만 더 소개 할 께요.
요즘은 홈페이지를 볼 수 있는 장치들이 컴퓨터 뿐만 아나라 전화기 그리고 태블릿에서도 볼 수가 있습니다.
그래서 앞으로는 이 3가지 장치들에서 모두 볼 수 있도록 디자인된 웹페이지를 만들어야 합니다.
어도비의 드림위버 CS5에서 이것을 지원하는 기능을 소개하고 있네요.
또 아직 표준으로 확립되지 않은 각 브라우저들만의 여러 CSS3 기능들도 코딩시 hints로 지원하고 있구요.


Click here to see more details.
여기를 클릭 하시면 좀 더 자세한 내용을 보실 수 있습니다.

반응형