Easy up! Focus up! Idea up! 
Yoda 
HTML5 Content Authoring Tool 
이혜경차장 
마케팅팀/ hklee@4csoft.com
Content 
출시배경 
Yoda 란 
Yoda 파헤치기 
향후업그레이드및교육계획 
가격정책
Content 
출시배경
2002 ~ 2008
Learning Hub : 92개국서비스 
2011 ~ 2012
N-screen Age
Real Solution for N-screen Age? 
Image courtesy of WIX
HTML5 is not trend, it is essential
http://www.zdnet.com/netflix-goes-html5-for-laptop-streaming-7000034730/ 
The Latest News
Collaboration with Yoda
Content 
Yoda 란
What is Yoda? 
“Smart Content is created by 
Smart People with aSmart Tool!” 
Smart Tool 
http://www.yodatool.com 
Cross-OS 
Cross-Browse 
Interactive 
N-screen 
Easy Work 
Pure HTML5
Benefits of Yoda 
편리성 
누구나쉽게사용할수있는Office UI 
환경성 
저용량파일출력으로고속력로딩및스토리지부하해소 
확장성 
뷰어가필요없는웹브라우저플레이방식 
개방성 
콘텐츠소스오픈으로사용자특화콘탠츠개발 
경제성 
한번의퍼블리싱으로N스크린서비스
What is different from other tools? 
not a Perfect. 
not a Fancy. 
not a Sophisticated. 
a Flexible.
Content 
Yoda 파헤치기
How to install 
다운로드(download) 
프로그램설치(Install) 
계정발급(Account) 
실행(Use)
Layout 
기본메뉴 
Yoda의메뉴영역으로멀티미디어객체삽입,편집, 파일저장및퍼블리시등전반적인기능제공 
시트네비게이션 
•콘텐츠전체시트(페이지) 정보디스플레이및설정 
•시트, 도형, 이벤트, 속성등네개의탭으로구성 
타임라인바 
객체및레이어의설정과이벤트편집기능제공 
저작/편집영역 
시트네비게이션영역에서선택한시트상의객체, 이벤트등을편집하거나저작
Main Menu 
파일 
•콘텐츠실행, 저장,및퍼블리싱 
•사용자계정관리 
홈 
•콘텐츠저작에필요한주요기능: 클립보드, 그리기도구, 멀티미디어삽입, 객체스타일설정, 정렬, 확대/축소, 미리보기 
보기 
•콘텐츠저작지원을위한화면보기설정
Sheet Navigation 
시트 
•기본시트, 마스터시트설정 
•시트추가/삭제 
•마스터/배경설정 
도형 
•Yoda에서제공하는다양한도형(.emf, png)이미지삽입 
이벤트 
•객체에다양한인터랙티브이벤트및애니메이션효과적용 
속성 
•객체의위치, 크기, 회전/각도, 컬러등속성설정
Timeline Bar 
•레이어추가/삭제: 새로운레이어를추가하거나선택한레이어삭제 
•객체삭제, 숨기기: 선택한객체를삭제또는숨기기 
•Show/Hide / Pair Event : 선택한시간에서객체가보여지거나사라지는효과적용. 
•객체효과주기: 선택한객체에대한다양한Show/Hide 이벤트효과적용
Main Functions –Object 
그리기도구 
스타일 
정렬 
도형라이브러리 
•도형그리기, 텍스트, 멀티미디어객체삽입및다양한꾸미기기능제공합니다. 
멀티미디어객체삽입 
클립보드
Main Functions –Master 
•자주사용하는배경, 액션이벤트를마스터시트에적용하여반복작업을최소화합니다.
Main Functions –Action Event 
액션 
•On Click 
•Mouse Over / Out 
•Drag Start / End / Move 
효과 
액션 
타입 
속성 
속도 
소리 
Show 
•효과없음 
•날아오기 
•올라오기 
•밝기변하며확대 
•밝기변화 
•늘이기 
•확대 
•왼쪽에서 
•오른쪽에서 
•위에서 
•아래에서 
•상/하/좌/우대각선방향에서 
•매우느리게 
•느리게 
•중간 
•빠르게 
•매우빠르게 
•소리없음 
•추가 
Hide 
•효과없음 
•날아가기 
•내려가기 
•밝기변하며축소 
•밝기변화 
•줄이기 
•축소 
•위로 
•아래로 
•옆으로 
•맡으로 
•왼쪽으로 
•오른쪽으로 
Accent 
•크기변화 
•커졌다작아지게 
•회전 
•25%, 50%, 150%, 
•200%, 250%, 300%, 350%, 400% 
Move 
•효과없음 
•밝기변화 
•나타나기 
•사라지기 
•클릭/터치, 드래그, 마우스이동등사용자의액션에따른다양한인터랙티브효과를적용합니다.
Main Functions –Markup 
•Video/Audio파일의특정시간에마크업을적정하여다양한액션을추가할수있습니다.
Main Functions –Code Generator 
•사용자가직접콘텐츠소스코드를수정할수있어저작도구의한계를극복한양질의콘텐츠를저작할수있습니다.
Case of Authoring 
•다양한멀티미디어삽입: 이미지, 동영상, 오디오, 텍스트 
•애니메이션, 이벤트삽입: 날아오기, Fade in/out, 마우스클릭시다음페이지로넘어가기등 
•퀴즈: O/X, 객관식, 문제Tip, 정답해설 
Alpha Test (2013) 
•다양한멀티미디어삽입, 멀티미디어특화이벤트(오브젝트마크업, 시트마크업등) 
•애니메이션, 이벤트삽입: 강조, 확대/축소, 마우스클릭시팝업, 페이지이동등 
•퀴즈: Drag&Drop, 해설보기 
Beta Test (2014)
Case of Recomposition 
서울산업통상진흥원(2012) 
•차시별SCO 개수: 11개 
•평가하기: 사지선다형, 빈칸맞추기 
•동영상Embedded, 페이지이동, 애니메이션 
한국표준협회(2014) 
•차시별SCO 개수: 14개 
•평가하기: O/X, 사지선다형, 빈칸맞추기 
•타임라인별객체이벤트, 페이지이벤트 
•페이지이동마크업 
한국생산성본부(2012) 
•차시별SCO 개수: 20개 
•평가하기: 사지선다형, 빈칸채우기 
•동영상Embeded, 페이지이동 
•애니메이션: 마우스클릭시팝업등
HTML5 Elements Support 
•Internet Explorer 9 and higher 
•Firefox 7 and higher 
•Chrome 14 and higher 
•Safari 5 and higher 
•Opera 11 and higher 
•Mobile Safari 3.2 and higher 
•Opera Mobile 5 and higher 
•Android 2.1 and higher 
Environment for HTML5 Content 
http://valiancesolutions.com/blog/
시연
Content 
업그레이드및교육계획
Functions Upgrade Plan 
템플릿 
사용자라이브러리 
Within this year… 
외부동영상임베드 
(Youtube, Vimeo) 
메뉴레이아웃 
단문처리텍스트삽입 
이미지자동슬라이드
Functions Upgrade Plan 
And will be soon… 
Plug-In
Training Plan 
교육커리큘럼및프로그램공지 
라이선스구매자대상의Content source code generating 교육(1회: 2014년11월19일) 
5 copy 이상구매시방문교육
Content 
가격정책
Price Policy 
•1 년: 1,200,000 /user 
•Bulk Discount -5 users 이상: 15% off -10 users 이상: 30% off
감사합니다. 
http://www.yodatool.com 
yoda@yodatool.com
HTML5 
•W3C (World Wide Web)의HTML Working Group이정의하고있는HTML 규격 
•플러그인이필요없는웹: ActiveX, Flash 등의별도의플러그인이필요없고, 스마트폰및태블릿PC에친화적인기능들로구성되어단말기, OS, 브라우저의종류에구애받지않는범용표준개발언어 
•광의의HTML5 : 문서의외관을표현하는CSS, 웹애플리케이션을위한JavaScript API를포함한W3C 표준을총칭

Yoda - HTML5 Content Authoring Tool

  • 1.
    Easy up! Focusup! Idea up! Yoda HTML5 Content Authoring Tool 이혜경차장 마케팅팀/ hklee@4csoft.com
  • 2.
    Content 출시배경 Yoda란 Yoda 파헤치기 향후업그레이드및교육계획 가격정책
  • 3.
  • 4.
  • 5.
    Learning Hub :92개국서비스 2011 ~ 2012
  • 6.
  • 7.
    Real Solution forN-screen Age? Image courtesy of WIX
  • 8.
    HTML5 is nottrend, it is essential
  • 9.
  • 10.
  • 11.
  • 12.
    What is Yoda? “Smart Content is created by Smart People with aSmart Tool!” Smart Tool http://www.yodatool.com Cross-OS Cross-Browse Interactive N-screen Easy Work Pure HTML5
  • 13.
    Benefits of Yoda 편리성 누구나쉽게사용할수있는Office UI 환경성 저용량파일출력으로고속력로딩및스토리지부하해소 확장성 뷰어가필요없는웹브라우저플레이방식 개방성 콘텐츠소스오픈으로사용자특화콘탠츠개발 경제성 한번의퍼블리싱으로N스크린서비스
  • 14.
    What is differentfrom other tools? not a Perfect. not a Fancy. not a Sophisticated. a Flexible.
  • 15.
  • 16.
    How to install 다운로드(download) 프로그램설치(Install) 계정발급(Account) 실행(Use)
  • 17.
    Layout 기본메뉴 Yoda의메뉴영역으로멀티미디어객체삽입,편집,파일저장및퍼블리시등전반적인기능제공 시트네비게이션 •콘텐츠전체시트(페이지) 정보디스플레이및설정 •시트, 도형, 이벤트, 속성등네개의탭으로구성 타임라인바 객체및레이어의설정과이벤트편집기능제공 저작/편집영역 시트네비게이션영역에서선택한시트상의객체, 이벤트등을편집하거나저작
  • 18.
    Main Menu 파일 •콘텐츠실행, 저장,및퍼블리싱 •사용자계정관리 홈 •콘텐츠저작에필요한주요기능: 클립보드, 그리기도구, 멀티미디어삽입, 객체스타일설정, 정렬, 확대/축소, 미리보기 보기 •콘텐츠저작지원을위한화면보기설정
  • 19.
    Sheet Navigation 시트 •기본시트, 마스터시트설정 •시트추가/삭제 •마스터/배경설정 도형 •Yoda에서제공하는다양한도형(.emf, png)이미지삽입 이벤트 •객체에다양한인터랙티브이벤트및애니메이션효과적용 속성 •객체의위치, 크기, 회전/각도, 컬러등속성설정
  • 20.
    Timeline Bar •레이어추가/삭제:새로운레이어를추가하거나선택한레이어삭제 •객체삭제, 숨기기: 선택한객체를삭제또는숨기기 •Show/Hide / Pair Event : 선택한시간에서객체가보여지거나사라지는효과적용. •객체효과주기: 선택한객체에대한다양한Show/Hide 이벤트효과적용
  • 21.
    Main Functions –Object 그리기도구 스타일 정렬 도형라이브러리 •도형그리기, 텍스트, 멀티미디어객체삽입및다양한꾸미기기능제공합니다. 멀티미디어객체삽입 클립보드
  • 22.
    Main Functions –Master •자주사용하는배경, 액션이벤트를마스터시트에적용하여반복작업을최소화합니다.
  • 23.
    Main Functions –ActionEvent 액션 •On Click •Mouse Over / Out •Drag Start / End / Move 효과 액션 타입 속성 속도 소리 Show •효과없음 •날아오기 •올라오기 •밝기변하며확대 •밝기변화 •늘이기 •확대 •왼쪽에서 •오른쪽에서 •위에서 •아래에서 •상/하/좌/우대각선방향에서 •매우느리게 •느리게 •중간 •빠르게 •매우빠르게 •소리없음 •추가 Hide •효과없음 •날아가기 •내려가기 •밝기변하며축소 •밝기변화 •줄이기 •축소 •위로 •아래로 •옆으로 •맡으로 •왼쪽으로 •오른쪽으로 Accent •크기변화 •커졌다작아지게 •회전 •25%, 50%, 150%, •200%, 250%, 300%, 350%, 400% Move •효과없음 •밝기변화 •나타나기 •사라지기 •클릭/터치, 드래그, 마우스이동등사용자의액션에따른다양한인터랙티브효과를적용합니다.
  • 24.
    Main Functions –Markup •Video/Audio파일의특정시간에마크업을적정하여다양한액션을추가할수있습니다.
  • 25.
    Main Functions –CodeGenerator •사용자가직접콘텐츠소스코드를수정할수있어저작도구의한계를극복한양질의콘텐츠를저작할수있습니다.
  • 26.
    Case of Authoring •다양한멀티미디어삽입: 이미지, 동영상, 오디오, 텍스트 •애니메이션, 이벤트삽입: 날아오기, Fade in/out, 마우스클릭시다음페이지로넘어가기등 •퀴즈: O/X, 객관식, 문제Tip, 정답해설 Alpha Test (2013) •다양한멀티미디어삽입, 멀티미디어특화이벤트(오브젝트마크업, 시트마크업등) •애니메이션, 이벤트삽입: 강조, 확대/축소, 마우스클릭시팝업, 페이지이동등 •퀴즈: Drag&Drop, 해설보기 Beta Test (2014)
  • 27.
    Case of Recomposition 서울산업통상진흥원(2012) •차시별SCO 개수: 11개 •평가하기: 사지선다형, 빈칸맞추기 •동영상Embedded, 페이지이동, 애니메이션 한국표준협회(2014) •차시별SCO 개수: 14개 •평가하기: O/X, 사지선다형, 빈칸맞추기 •타임라인별객체이벤트, 페이지이벤트 •페이지이동마크업 한국생산성본부(2012) •차시별SCO 개수: 20개 •평가하기: 사지선다형, 빈칸채우기 •동영상Embeded, 페이지이동 •애니메이션: 마우스클릭시팝업등
  • 28.
    HTML5 Elements Support •Internet Explorer 9 and higher •Firefox 7 and higher •Chrome 14 and higher •Safari 5 and higher •Opera 11 and higher •Mobile Safari 3.2 and higher •Opera Mobile 5 and higher •Android 2.1 and higher Environment for HTML5 Content http://valiancesolutions.com/blog/
  • 29.
  • 30.
  • 31.
    Functions Upgrade Plan 템플릿 사용자라이브러리 Within this year… 외부동영상임베드 (Youtube, Vimeo) 메뉴레이아웃 단문처리텍스트삽입 이미지자동슬라이드
  • 32.
    Functions Upgrade Plan And will be soon… Plug-In
  • 33.
    Training Plan 교육커리큘럼및프로그램공지 라이선스구매자대상의Content source code generating 교육(1회: 2014년11월19일) 5 copy 이상구매시방문교육
  • 34.
  • 35.
    Price Policy •1년: 1,200,000 /user •Bulk Discount -5 users 이상: 15% off -10 users 이상: 30% off
  • 36.
  • 37.
    HTML5 •W3C (WorldWide Web)의HTML Working Group이정의하고있는HTML 규격 •플러그인이필요없는웹: ActiveX, Flash 등의별도의플러그인이필요없고, 스마트폰및태블릿PC에친화적인기능들로구성되어단말기, OS, 브라우저의종류에구애받지않는범용표준개발언어 •광의의HTML5 : 문서의외관을표현하는CSS, 웹애플리케이션을위한JavaScript API를포함한W3C 표준을총칭