아래 내용은 아래 블로그에서 그 원본을 보실 수 있습니다.
http://blog.anscamobile.com/2012/02/tutorial-text-input-with-native-ui/

Text Input with Native UI

아래 내용은 코로나 SDK로 Text Field와 Text Box를 사용할 때 유용한 방법에 대해 설명한 내용입니다.

***** Text Fields vs. Text Boxes

텍스트 필드와 텍스트 박스는 아래와 같은 각각의 특징이 있습니다.

Text Fields
- 1줄 입력 기능을 제공한다. (스크롤 기능이 없다.)
- password fields로 이용할 수 있다.
- 오직 숫자만 입력하도록 설정할 수 있다. (전화기의 숫자 키보드가 나옴.)

Text Boxes
- 여러 줄 입력 기능을 제공한다. (스크롤 기능이 있다.)
- text만 보이도록 하기 위해 background를 숨길 수 있다.
- read only로 세팅할 수 있다.

아래는 두 가지 모두에 있는 기능들입니다.
- 폰트, 글자 사이즈, 글자 색을 바꿀 수 있다.
- 배경색을 바꿀 수 있다.
- userInput listening 기능이 있다.

더 자세한 신택스를 보려면 아래를 참조하세요.

Native Text Fields Documentation
Native Text Boxes Documentation 
   

***** Events and Listeners   

userInput 이벤트를 어떻게 감지하는지에 대해 알아보겠습니다.
텍스트 필드나 텍스트 박스를 생성할 때 이 userInput 이벤트 리스너를 달 수가 있습니다.
그러면 그 이벤트가 일어나는 것을 감지해서 어떤 특정한 기능을 넣을 수가 있습니다.

이 userInput 이벤트에는 몇가지의 phases가 있습니다.

began: 이 단계는 유저가 스크린에 키보드를 나오게 하는 순간입니다. 이 경우 키보드가 중요한 객체를 가리지 않게 하기 위해 위치를 변경하는 등의 기능을 넣을 수 있습니다.
edited: 이 단계는 유저가 텍스트 필드나 텍스트 박스에 타이핑을 하는 동안 일어납니다.
ended: 텍스트 필드나 텍스트 박스가 focus를 잃는 단계입니다. 예를 들어 다른 텍스트 필드/박스 를 tap할 때 등입니다.
submitted: 유저가 return/enter 키를 눌렀을 때 입니다. 즉 텍스트 필드/박스 의 내용을 submit 할때라고 얘기할 수 있습니다.

아래 userInput 리스너 를 이용하는 예제 코드가 있습니다.

local function onUserInput( event )
    if event.phase == "began" then
        print( "Keyboard has now shown up." )

    elseif event.phase == "edited" then
        print( "User has entered text." )

    elseif event.phase == "ended" then
        print( "We have lost focus." )

    elseif event.phase == "submitted" then
        print( "User is done editing, let's do something with text." )
    end
end

***** Not Normal Display Objects!
확실히 알아둬야 할 것은 native text field나 native text box는 Corona display 객체가 아닙니다.
말 그대로 native입니다. Corona SDK의 object들이 아니라 그 핸드폰의 객체들인거죠. 정확히는 그 핸드폰의 OS의 객체라고 하면 더 정확할 겁니다.
이 native객체들은 다른 Corona SDK의 객체들 처럼 위치나 투명도 같은것을 바꿀수는 있어도 Corona SDK내에서 다른 객체들과 함께 Group화 할 수는 없습니다.
그러면 화면전환등을 할 때 다른 객체들과 같이 움직이지 않을 겁니다. 보기가 조금 어글리 할 겁니다.
이러한 것을 보기 좋게 하는 방법이 있습니다. 다른 객체들처럼 움직이는 것 같이 보이도록 하는 거죠.

아래 몇가지 팁이 있습니다.
- native 객체들을 표현할 때 placeholders처럼 보이도록 text object를 만듭니다. 그리고 그 바탕에 사각형이나 rounded 사각형을 놓구요.
  여기서 text object나 사각형들은 모두 Corona SDK의 객체들입니다.
  사용자가 placeholder를 터치하면 그때 native 객체가 나오도록 합니다. 즉 유저가 editing할 때는 이 native 객체가 나와 있도록 하는 것이죠.
  유저가 입력을 끝내면 다시 native 객체를 없애고 다시 placeholder를 표시합니다. 이 때 물론 유저가 입력한 값이 해당 placeholder에 보이겠죠.
- placeholder objects들에 대해 transitions 효과를 줍니다.
- hasBackground 프로퍼티를 이용해서 텍스트 박스의 백그라운드를 안보이도록 합니다. 그리고 여러분의 백그라운드를 넣습니다.
  이 백그라운드는 일반적인 Corona SDK 객체를 이용합니다. 그래서 그 텍스트 박스를 코로나 내부 객체와 섞이도록 합니다.
 
이러한 방법들은 여러분들이 할 수 있는 여러 방법중에 극히 일부분입니다.
이러한 방법을 기초로 여러분들 나름대로 여러 효과들을 내실 수 있을 겁니다.

마지막으로 한가지 중요한 점은 이 native objects들은 object:removeSelf() 와 nil값을 대입하는 과정을 거치면서 분명히 메모리 관리를 해 주셔야 한다는 점 입니다.

***** Simulator Notes
현재 native text box와  native text field는 Mac Simulator, Xcode Simulator 그리고 디바이스에서 작동을 합니다.
맥 시뮬레이터로 테스트를 할 경우 Xcode 시뮬레이터나 디바이스에서 반드시 테스트를 해 보셔야 합니다.
왜냐하면 맥 시뮬레이터(Mac)에서 보이는 것과 실제 기계(iOS)에서 보이는 것이 다를 수가 있습니다.

맥 시뮬레이터에서는 리스너나 이벤트 처리 같은 것을 테스트 할 수 있어 개발 시간을 save해 주는 잇점이 있지면 실제 display는 다르게 작동되므로 반드시 기계에서 테스트해 보셔야 합니다.
가장 좋은 테스트 도구는 실제 device에 빌드해서 하는 것 입니다.

***** Basic Note App
아래 간단하게 Note를 할 수 있는 Note App을 한번 만들어 보겠습니다.
텍스트 필드나 텍스트 박스를 생성하는 예제 이구요 외부 소스로부터 가져와서 다이나믹하게 내용을 뿌려주는 효과도 보실 수 있을겁니다.
(여기서 외부 소스로는 text 파일이 사용됩니다.)

모든 코드는 하나의 코드파일에  들어갈 겁니다. 즉 main.lua한 파일에 다 들어갈 겁니다.

1. Creating the Interface
첫번째 단계는 아주 단순합니다. 앱의 배경을 만들고 위에 타이틀 바를 만들고 두개의 버튼 위젯을 만듭니다.

display.setStatusBar( display.DefaultStatusBar )

local widget = require "widget"
local sbHeight = display.statusBarHeight
local tbHeight = 44
local top = sbHeight + tbHeight

-- forward declarations
local titleField, noteText, loadSavedNote, saveNote

-- create background for the app
local bg = display.newImageRect( "stripes.jpg", display.contentWidth, display.contentHeight )
bg:setReferencePoint( display.TopLeftReferencePoint )
bg.x, bg.y = 0, 0

-- create a gradient for the top-half of the toolbar
local toolbarGradient = graphics.newGradient( {168, 181, 198, 255 }, {139, 157, 180, 255}, "down" )

-- create toolbar to go at the top of the screen
local titleBar = widget.newTabBar{
top = sbHeight,
gradient = toolbarGradient,
bottomFill = { 117, 139, 168, 255 },
height = 44
}

-- create embossed text to go on toolbar
local titleText = display.newEmbossedText( "NOTE", 0, 0, native.systemFontBold, 20 )
titleText:setReferencePoint( display.CenterReferencePoint )
titleText:setTextColor( 255 )
titleText.x = 160
titleText.y = titleBar.y

-- create a shadow underneath the titlebar (for a nice touch)
local shadow = display.newImage( "shadow.png" )
shadow:setReferencePoint( display.TopLeftReferencePoint )
shadow.x, shadow.y = 0, top
shadow.xScale = 320 / shadow.contentWidth
shadow.yScale = 0.25

-- create load button (top left)
local loadBtn = widget.newButton{
label = "Load",
labelColor = { default={255}, over={255} },
font = native.systemFontBold,
xOffset=2, yOffset=-1,
default = "load-default.png",
over = "load-over.png",
width=60, height=30,
left=10, top=28
}

-- onRelease listener callback for loadBtn
local function onLoadRelease( event )
loadSavedNote()
end
loadBtn.onRelease = onLoadRelease -- set as loadBtn's onRelease listener

-- create save button (top right)
local saveBtn = widget.newButton{
label = "Save",
labelColor = { default={255}, over={255} },
font = native.systemFontBold,
xOffset=2, yOffset=-1,
default = "save-default.png",
over = "save-over.png",
width=60, height=30,
left=display.contentWidth-70, top=28
}

-- onRelease listener callback for saveBtn
local function onSaveRelease( event )
saveNote()
end
saveBtn.onRelease = onSaveRelease -- set as saveBtn's onRelease listener

-- display warning that will show at the bottom of screen
local warning = display.newImageRect( "warning.png", 300, 180 )
warning:setReferencePoint( display.BottomCenterReferencePoint )
warning.x = display.contentWidth * 0.5
warning.y = display.contentHeight - 28

2. Text Box and Text Field
두번째 단계는 텍스트 필드와 텍스트 박스 객체를 생성할 겁니다.
이 두 native text 위젯을 사용할 때 폰트를 지정해주기 위해서 native.newFont()를 어떻게 사용하는지 잘 봐 두세요.
그리고 텍스트 박스는 디폴트가 read only라는 것을 명심해 두시구요.
그래서 텍스트 박스에 유저가 문자를 입력할 수 있도록 하려면 isEditable 프로퍼티를 사용하셔야 합니다.

-------------------------------------------------------------------------------------
-- Create textFields

local textFont = native.newFont( native.systemFont )
local currentTop = sbHeight+tbHeight+shadow.contentHeight+10
local padding = 10

-- create textField
titleField = native.newTextField( padding, sbHeight+tbHeight+shadow.contentHeight+10, display.contentWidth-(padding*2), 28 )
titleField.font = textFont
titleField.size = 14

currentTop = currentTop + 28 + padding

-- create textBox
noteText = native.newTextBox( padding, currentTop, display.contentWidth-(padding*2), 264-currentTop-padding )
noteText.isEditable = true
noteText.font = textFont
noteText.size = 14

여기까지 하면 겉모습은 완성 된 겁니다.

다음은 외부 txt파일로 저장하고 불러오는 부분을 다룰 겁니다.

3. Saving and Loading
이 단계에서는 saving과 loading 기능을 넣을 겁니다. 이 기능들은 유저가 Save 버튼이나 Load 버튼을 누르면 생성하도록 하겠습니다.
그리고 최초에 앱이 시작될 때 loadSavedNote()함수가 불려져서 이전에 저장됐던 내용들이 display되도록 하겠습니다.

-------------------------------------------------------------------------------------
-- Saving and Loading functions

function loadSavedNote()
local title_path = system.pathForFile( "title.txt", system.DocumentsDirectory )
local note_path = system.pathForFile( "note.txt", system.DocumentsDirectory )
local fh_title = io.open( title_path, "r" )
local fh_note = io.open( note_path, "r" )

-- load the title
if fh_title then
titleField.text = fh_title:read()
io.close( fh_title )
end

-- load the note
if fh_note then
noteText.text = fh_note:read( "*a" ) -- '*a' is important to preserve line breaks
io.close( fh_note )
end
end

function saveNote()
local title_path = system.pathForFile( "title.txt", system.DocumentsDirectory )
local note_path = system.pathForFile( "note.txt", system.DocumentsDirectory )
local fh_title = io.open( title_path, "w+" )
local fh_note = io.open( note_path, "w+" )

-- load the title
if fh_title then
fh_title:write( titleField.text )
io.close( fh_title )
end

-- load the note
if fh_note then
fh_note:write( noteText.text )
io.close( fh_note )
end
end

loadSavedNote() -- on app start, load previously saved note

이 화면이 완성된 화면입니다.

아래 파일을 다운 받으시면 Full Souce Code와 이미지 파일 등이 있습니다. 참고하세요.

파일 받으시면서 추천버튼도 꾹 부탁드려요.
질문 있으시면 언제든지 댓글에 남겨 주세요.

아래 싸이트에 Corona SDK로 cross platform 앱 개발시 지켜야할 10계명이 올라왔더라구요.

http://fullycroisened.com/10-strategic-tips-for-cross-platform-development-using-corona-sdk/

읽어보니까 많이 공감이 되네요.

그 10가지를 아래 소개합니다.

Corona SDK로 cross platform 앱 개발시 주의해야 할 10가지

1. 실제 기기에서 초기부터 그리고 자주 테스트 하라. 에뮬레이터를 너무 믿지 마라. 실제 기기에서 테스트 하라.
2. 시작하기 전에 해상도에 맞는 이미지 사이즈들을 어떻게 다이나믹하게 다룰지를 먼저 계획하라.
   (각 해상도에 맞춘 이미지들을 미리 계획한다면 많은 시간을 절약할 수 있다.)
3. build.settings 파일에 어떤 퍼미션들을 넣어야 하는지 알고 있어야 한다.
예)
    androidPermissions =
    {
      "android.permission.INTERNET",
      "android.permission.VIBRATE",
      "android.permission.READ_PHONE_STATE",
      "android.permission.CALL_PHONE",
     },
4. 좀 더 테스트 하라.
5. 각 플랫폼에 대한 API들의 제한 사항들을 알고 있어라.
   어떤 기능들은 플랫폼에 따라 기능이 제한 돼 있다.
6. 코딩을 하기 전에 모든것을 Sketch 하라.
   (이렇게 하면 분명 많은 시간을 절약 할 수 있다.)
7. 메모리 사용량과 texture map size 를 항상 체크하라.  
   이렇게 함으로서 쓸데없이 메모리를 차지하는 경우 (이를 일찍 발견하게 돼) 메모리 컨트롤을 더 쉽게 할 수 있다.
8. 지금 하고 있는 것을 다른 곳에서는 어떻게 처리 했는지 research를 해 봐라. 그리고 나서 진행하면 도움이 된다.
   그리고 이것을 공유하라 그리고 당신이 어떻게 좀 더 낫게 구현했는지 살펴 봐라.
9. 커뮤니티를 활용하라. 거기에는 도움을 줄 아주 많은 소스들이 있다.
10. 즐겨라. 코딩이 제일 잘 되는 시간은 밤 11:34부터 새벽 3:07분까지이다.

==> 대부분 공감을 하는데 10번은 공감을 못하겠네요.
일은 일하는 시간에 해야지... 그래야 능률도 더 잘 오르고......
이러면 완전 폐인 되잖아....
초창기에는 나도 밤 새 코딩을 하기도 했는데...
이제는 근무시간에만 딱 하는게 제일 좋더라구요.
밤에 할거면 차라리 일찍 자고 새벽에 일어나서 하던지.....
그리고 6번은 좀 더 강조 하고 싶어요. 단순히 스케치를 하라가 아니고 제대로 된  스토리 보드 만들고 다이어 그램 만들고 클래스/객체 설계도 만들고 진행하라고요. 제대로 기획을 해야 코딩도 제대로 하죠. 앱 만들 때 중요도 기획 80% 코딩 20%.  (내 의견)


  가시기 전 여기 손가락 꾹 ~~~~ ^^        추천 추천...

오늘은 Text Wrapping 에 대해 살펴 보겠습니다.
이 기능은 Internet Explore 를 제외한 모든 브라우저에서 작동 합니다.

단 아래 슬라이드 바는 Firefox에서는 숫자를 넣는 Textbox로 나옵니다.
슬라이드 바 기능을 Firefox에서 지원을 안하나 봅니다.

You can ellipse below texts with control slide bar.
If you have Firefox browser text box will be displayed instead of the slide bar then just input any number between 1~100 then enter to ellipse those texts.
This function is working on all browsers except Internet Explore.



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

You can download source code file below.
아래 원본 파일을 다운 받아서 실행해 보세요.

안녕하세요?

제가 지금까지 잘 못 알고 있었던 것 같네요.

얼마전에(작년 12월 24일) 코로나에서는 native.showPopup() API를 새로 선 보였습니다.
이 API로 메일과 SMS를 보낼 수 있죠?
아래 제목의 글을 보시면 자세히 알 수 있습니다.
CoronaSDK 2011.715 버전 Email, SMS 기능 추가

이 API에서는 전화걸기 기능이 아직까지 지원되지 않고 있거든요.
그래서 코로나에서는 전화걸기 기능이 안되나? 했거든요.
그런데 예전부터 있었던 system.openURL()을 이용하면 코로나 앱에서 전화걸기 기능이 지원 되고 있습니다.

이 system.openURL()에 대해서 정리 해 놓고 가야겠습니다.

system.openURL()은 브라우저에서 웹페이지를 오픈한다던가 이메일을 생성한다거나 전화를 걸때 사용할 수 있습니다.

신택스는 아래와 같습니다.
system.openURL(url)

예) system.openURL("http://coronasdk.tistory.com")

파라미터로는 url을 사용하는데요.
아래 3개의 url이 올 수있습니다.

 * Email address: "mailto:nobody@mycompany.com"
    : 이메일 주소에는 물론 제목과 내용도 넣을 수 있습니다.
      예) "mailto:nobody@mycompany.com?subject=Hi%20there&body=I%20just%20wanted%20to%20say%2C%20Hi!"
-- %20은 한칸띄기입니다. url에서 사용되는 기호들은 여기를 참조하세요.
  * Phone number: "tel:415-867-5309"
  * Web link: "http://coronasdk.tistory.com"

Return값으로는 아무것도 받지를 않습니다.
그래서 제대로 동작이 수행 됐는지 안 됐는지를 알 수는 없겠네요.
(native.shouPopup()에서는 boolean으로 result값을 받습니다.)

CoronaSDK의 David라는 친구하고 이메일 주고 받다가 알게 됐습니다.
CoronaSDK DOC를 전부 정리하고 넘어간 줄 알았는데 이렇게 중요한걸 빠뜨렸었군요.

혹시 잘못된 정보로 혼란스러우셨던 분들께는 죄송합니다.

그럼...

이 블로그 메뉴 중 Shelter(쉼터) 코너를 만들어 놨는데요.
마음에 드네요.

컴퓨터 프로그래머라고 해서 하루 종일 코딩만 생각하는 건 아니잖아요?

저도 스포츠도 좋아하고 정치적인 의견도 있고 관심있는 분야가 있고 새로운 걸 알게 되면 즐겁고...

오늘은 Groundhog day 입니다.
Groundhog은 다람쥐과의 동물로 땅에 굴을 파고 사는 동물이예요.

뉴저지 살면서 가끔 봤던것도 같은데요.(여러 동물들이 많이 살아서 정확히 groundhog인지는 모르겠어요. 가끔 스컹크도 봐요.)
여기 사람들은 이 groundhog을 친숙하게 여기나 봐요.

얘네들은 겨울에 땅속에서 겨울잠을 자는데요.
2월 2일인 오늘 땅속에서 나온데요.
2월 2일이면 공식적으로 겨울이 6주 더 남아 있는 시기랍니다.

이날 흐리면 봄이 더 일찍 온다는 속담이 있나봐요.
그래서 이 groundhog이 자기 그림자를 보면 6주간 겨울 날씨가 이어지고 이날 groundhog이 자기 그림자를 보지 못하면 봄이 일찍 온다고 합니다.

groundhog은 그래서 자기 그림자가 보이면 다시 땅속으로 들어가서 겨울잠을 더 잔대요. :)

옛날부터 봄을 기다리는 많은 사람들이 2월 2일이면 이 groundhog이 다시 땅속으로 들어가지 않고 나와서 돌아 다니기를 바랐을 겁니다.

오늘 아침 뉴스를 보니까 블름버그 뉴욕 시장이 이 groundhog을 들고 봄을 기원하는 멘트를 날리더라구요.

올해는 날씨가 흐리네요.
아마 봄이 일찍 올건가요?

사실 지금 한국은 아주 많이 춥다고 하는데 여기는 완전 따뜻해요.
완전 봄 날씨예요.
이상 고온이라고 하는데요. 좀 겨울 다운 겨울을 경험해 보고 싶을 정도예요.
작년에는 아주 춥고 눈도 무지 많이 왔었거든요.

남은 6주가 추울 것인가? 아니면 이제부터 봄이 될 것인가?
올해 우리 Groundhog의 예언은?

On Groundhog Day, Staten Island Chuck usually predicts whether there will be another six weeks of winter.

This year the question is: When will winter start?

Let's study for webkit-box of CSS3.
You can change orientation of boxes below. just select 'horizontal' or 'vertical'  of webkit-box-orient in select menu . And you can change align of the boxes also.

오늘은 CSS3의 Flexible Box 와 관련해서 알아보겠습니다.
여기를 클릭하시면 이전에 정리해 뒀던 글도 보실 수있습니다.

  start|end|center|justify; 

  start|end|center|justify; 



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                          - Working well (O) except -webkit-box-pack

이 기능은 익스플로어랑 오페라에서는 안 되네요.
그리고 fireFox에서는 webkit-box-pack 기능이 안 되구요.

You can download source code file below.

HTML5FlexibleBox.html

HTML5로 게임만들기 공부하다 보니까 여러 툴을 먼저 접하게 되네요.

3D관련 무료 툴로 블랜더(blender)를 알게 됐습니다.
사실 이거 공부할 시간까지는 없는데...
너무 공부하고 싶기도 하고....

요즘 모바일 앱 게임 중 3D게임을 아주 재밌게 하고 있거든요.

앞으로 이런 멋있는 3D 게임을 만드는 날도 오겠죠?
이렇게 막연히 바랬던 일들을 계속 간직하고 있으면 결국엔 이뤄지더라구요. :)

블렌더 공식 홈페이지는 아래 링크를 따라 가면 됩니다.
http://www.blender.org/

Download 메뉴로 들어가면 보실 수 있습니다.
두가지 종류가 있는데요. 하나는 인스톨 버전이고 나머지 하나는 이클립스 처럼 패키지 버전입니다 (그냥 압축 풀어서 사용하면 됩니다.).

아래 링크로 가시면 한국어로 된 Tutorial 을 보실 수 있습니다.
http://wiki.blender.org/index.php/KO/Main_Page

사용자들이 자발적으로 번역하고 작성하는 위키피디아 백과사전처럼 운영되는것 같습니다.
여러분들이 한국어 튜토리얼을 열심히 번역해 주고 계신것 같습니다.

블랜더를 실행한 화면입니다.

사용법은 nyaank 님이 유튜브에 동영상강좌를 올려주셔서 아주 쉽게 배울수 있습니다. (한국어예요).
http://www.youtube.com/watch?v=TEkmwrfCEzA&feature=related

아래 블렌더로 만든 3D 영화예요.
얼마전에 글 올린 불가리아의 두 친구들이 보면 아주 좋아하지 않을까 싶네요.




이 영화를 보니까 저도 3D 영화, 3D 게임을 모바일 앱으로 만들고 싶어집니다.

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

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 우리 이제 솔직해 집시다 라고 이렇게 공개적으로 얘기 할 수 있으면 정말 좋지 않겠어요?

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 을 사용해서 애니메이션 효과를 내실 수 있습니다.





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.
여기를 클릭 하시면 좀 더 자세한 내용을 보실 수 있습니다.