Easy up! Focus up! Idea up!

YodaHTML5 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 a Smart Tool!”Smart Toolhttp://www.yodatool.com

Cross-OSCross-Browse

Interactive

N-screenEasy 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 표준을 총칭