IT정보뉴스

2007년, 웹오피스 업체 및 주요 서비스 분석(2)

3. 국내 웹 오피스 현황국내의 경우 해외에 비해 웹 오피스가 개발이 활발하지 못하고 있는 실정이다. 그러나 올 해 들어 웹 오피스의 도입과 경쟁이 본격화될 전망이다. 먼저, NHN은 ThinkFree와의 제휴를 통해 네이버 오피스를 올해 제공할 예정이며 이에 따라 포탈들의 웹 오피스 경쟁이 한층 가속될 전망이다. 3.1 NHN-ThinkFree현재 NHN은 씽크프리와 제휴를 통해 올해 상반기에 네이버 웹 오피스를 제공할 예정이다. 이에 앞서 웹 오피스의 변환 기술을 이용해 현재 네이버 메일에서 다양한 오피스 첨부 문서를 웹에서 바로 볼 수 있는 서비스를 제공하면서 사용자들에게 웹 오피스의 유용한 기능을 소개해 나가고 있다. 향후 NHN에서 씽크프리 웹 오피스 도입을 통한 가장 큰 변화는 웹 저작 환경의 변화라고 예상된다. 기존의 사용자의 웹 저작 환경이 웹 에디터에서 통합 오피스 에디터로의 전환되는 것이다.              [ 네이버 메일에서 제공하는 오피스 문서 미리 보기 결과 ]기존의 웹 에디터는 브라우져에서 기본적으로 제공하는 컨트롤을 사용하기 때문에 대부분이 비슷한 기능을 제공하는 수준이다. 또한 기본적으로 HTML이 기본 문서 포맷이기 때문에 페이지 개념도 없을 뿐만 아니라 다단편집 등 기존 워드프로세스와 비교할 때 기능이 미약하다.이에 비해 웹 오피스는 HTML보다 표현력이 크기 때문에 보다 편리하고 유용한 기능을 제공한다. 특히, 다양한 레이아웃으로 문서를 저작하고 해당 레이아웃에 다양한 컨텐트를 입력할 수 있다. 가령, 3단 세로 편집을 하고 각 영역에 동영상을 검색하여 배치하고 이를 설명할 수 있는 오디오 파일과 검색 결과 등을 배치하여 웹 문서를 작성할 수 있다. 가령, 다양한 UCC 데이터와 검색 결과 등을 이용하여 새로운 문서를 만들고 이들 문서를 블러거에 올리거나 DOC 파일로 저장하여 사용할 수도 있다.이러한 저작 환경의 변화로 인해 기존 데스크탑 상에 존재하는 사용자들의 지식이 웹에 모이고 공유하게 됨으로써 기존 지식인 서비스와 더불어 보다 질높은 지식 공유가 가능해 진다. 특히, 오피스 문서의 경우 목적의식적으로 작성되는 경우가 많기 때문에 기존의 웹 정보와는 그 가치가 다르다 할 수 있다.아울러 , 그 간 암묵적으로 불법 소프트웨어를 다수 사용하던 사용자들을 합법적인 무료 서비스를 제공하여 전환시킴으로써 기존의 포탈 서비스가 단순한 컨텐트 제공 중심의 서비스에서 소프트웨어를 서비스의 전환을 하게 되었다. 3.2 기타현재 NHN외에 다른 포탈 업체들의 경우 아직 개발이나 도입 움직임은 없는 상황이다. 유일하게 국내 오피스 개발 업체 중 하나인 테크다임이 우리 오피스라는 서비스를 제공하고 있다. 테크다임은 2000년 사업 초기 자바 기반의 오피스 개발업체였으나 최근 들어 자바 버전을 포기하고 윈도우 버전의 오피스를 개발했었다. 이러한 윈도우용 데스크탑 오피스 버전을 웹을 통해 배포하고 문서를 웹상에 저장할 수 있는 기능이 우리 오피스(www.mybiz24.com )의 주요 웹 오피스 서비스이다. 그러나 웹 오피스의 경우 웹 브라우져를 통해 언제 어디서나 접속하여 사용하고 이를 쉽게 공유하는 기능들이 기본적인 데 반해 우리 오피스는 사용자의 데스트탑에 우리 오피스를 설치하고 이를 통해 문서 편집 작업이 가능하게 한다. 아울러  현재 IE와 윈도우 운영체제 하에서만 이용 가능하다는 제약이 있다.현재  NHN을 제외하고 다음, 네이트 등에서 웹 오피스에 대한 여러 고민들을 진행하고 있다고 알려져 있다. 이러한 노력과 NHN의 웹 오피스 서비스의 본격적인 오픈과 더불어 포털 서비스의 소프트웨어의 서비스 추세는 보다 강화될 것으로 예상된다...이어서 3편에서는 웹 오피스에서 넘어야 할 것들을 정리해 봅니다.출처: http://wisefree.tistory.com/2 [소프트웨어에 날개를 달자.]

최근 등록된 자바스크립트 소스

사진 설명
사진

[bootstrap] 구글 크롬에서 bootstrap datapicker가 작동하지 않을때

Internet Explorer에서는 작동을 잘하지요. 근데 갑자기 구글 크롬을 켜보니 안되는 문제를 발견했네요. datepicker.js를 변경해주면 쉽게 해결이 됩니다. zIndex로 검색하면 딱 550 줄 정도에 나와요.    var zIndex = parseInt(this.element.parents().filter(function(){     return $(this).css('z-index') !== 'auto';    }).first().css('z-index'))+1151; 10으로 되있는데 이걸 1151로 변경해주면 됩니다. 그럼 잘돌아가유~  이렇게 잘 나오네요 ㅋㅋ 참고로 데이터 datepicker를 사용하실려면 3개의 파일이 필요해요.  1. datepicker core js bootstrap-datepicker.js  2.한글 지원을 위한 js bootstrap-datepicker.kr.js  3.그리고 먹일 css datepicker3.css   EX) Example 1.Import </div> <link rel="stylesheet" type="text/css" href="<c:url value='/css/bootstrap/datepicker3.css' /> " /> <script src="<c:url value='/js/lib/bootstrap/bootstrap-datepicker.js' /> "></script> <script src="<c:url value='/js/lib/bootstrap/bootstrap-datepicker.kr.js' /> "></script> 2. config  $('#datapickerBox input').datepicker({  format: "yyyy-mm-dd",  startView: 1,  todayBtn:"linked",  language: "kr",  orientation: "top auto",  keyboardNavigation: false,  forceParse: false,  autoclose: true,  todayHighlight: true }); 3.tag <div class="col-xs-1" id="datapickerBox"><input class="form-control input-sm" type="text" id="wrtDtReg" name="wrtDt" placeholder="" readonly="readonly">  

사진

Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

Full-featured photo image editor using canvas. It is really easy, and it comes with great filters. http://ui.toast.com/tui-image-editor Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. Wrappers toast-ui.vue-image-editor: Vue wrapper component is powered by NHN Entertainment. Table of Contents Collect statistics on the use of open sourceBrowser SupportHas full features that stick to the basic. Photo manipulationIntegration functionPowerful filter functionSelect only the desired function Easy to apply the size and design you want Can be used everywhereNice default & Fully customizable Themes FeaturesInstall Via Package ManagerVia Contents Delivery Network (CDN)Download Source Files Usage HTMLJavaScript Development SetupRun webpack-dev-server DocumentsContributingDependencyTOAST UI FamilyUsed ByLicense Collect statistics on the use of open source TOAST UI ImageEditor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI ImageEditor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics option when creating the instance. var options = { ... usageStatistics: false } var imageEditor = new tui.ImageEditor('#tui-image-editor-container', options); Or, include tui-code-snippet(v1.4.0 or later) and then immediately write the options as follows: tui.usageStatistics = false; Browser Support Chrome Internet Explorer Edge Safari Firefox Yes 9+ Yes Yes Yes Has full features that stick to the basic. Photo manipulation Crop, Flip, Rotation, Drawing, Shape, Icon, Text, Mask Filter, Image Filter Integration function Download, Image Load, Undo, Redo, Reset, Delete Object(Shape, Line, Mask Image...) Crop Flip Rotation Drawing Shape Icon Text Mask Filter Powerful filter function Grayscale, Invert, Sepia, Blur Sharpen, Emboss, RemoveWhite, GradientTransparency, Brightness, Noise, Pixelate, ColorFilter, Tint, Multiply, Blend Grayscale Noise Gradient Emboss Pixelate Sepia Sepia2 Blend-righten Blend-diff Invert Multifly Tint Brightness Remove-white Sharpen Select only the desired function var imageEditor = new tui.ImageEditor('#tui-image-editor-container', { includeUI: { menu: ['shape', 'crop'] ... }, ... Easy to apply the size and design you want Can be used everywhere. Widely supported in browsers including IE9, which is the minimum requirement to support canvas. Option to support various display sizes. (allows you to use the editor features on your web pages at least over 550 * 450 sizes) Nice default & Fully customizable Themes Has a white and black theme, and you can modify the theme file to customize it.Has an API so that you can create your own instead of the built-in. black - top black - bottom white - left white - right Features Load image to canvasUndo/Redo (With shortcut)CropFlipRotationFree drawingLine drawingShapeIconTextMask FilterImage Filter Install The TOAST UI products can be installed by using the package manager or downloading the source directly. However, we highly recommend using the package manager. Via Package Manager You can find TOAST UI producs via npm and bower package managers. Install by using the commands provided by each package manager. When using npm, be sure Node.js is installed in the environment. npm $ npm install --save tui-image-editor # Latest version $ npm install --save tui-image-editor@<version> # Specific version bower $ bower install tui-image-editor # Latest version $ bower install tui-image-editor#<tag> # Specific version Via Contents Delivery Network (CDN) TOAST UI products are available over the CDN powered by TOAST Cloud. You can use the CDN as below. <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css"> <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script> If you want to use a specific version, use the tag name instead of latest in the URL. The CDN directory has the following structure. tui-image-editor/ ├─ latest/ │ ├─ tui-image-editor.js │ ├─ tui-image-editor.min.js │ └─ tui-image-editor.css ├─ v3.1.0/ │ ├─ ... Download Source Files Download bundle files from dist folderDownload all sources for each version Usage HTML Add the container element where TOAST UI ImageEditor will be created. <body> ... <div id="tui-image-editor"></div> ... </body> javascript Add dependencies & initialize ImageEditor class with given element to make an image editor. var ImageEditor = require('tui-image-editor'); var blackTheme = require('./js/theme/black-theme.js'); var instance = new ImageEditor(document.querySelector('#tui-image-editor'), { includeUI: { loadImage: { path: 'img/sampleImage.jpg', name: 'SampleImage' }, theme: blackTheme, // or whiteTheme initMenu: 'filter', menuBarPosition: 'bottom' }, cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70 } }); Or ~ UI var ImageEditor = require('tui-image-editor'); var instance = new ImageEditor(document.querySelector('#tui-image-editor'), { cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70 } }); See details for additional informations. Development The TOAST UI products are open-source. After fixing issues, create a pull request(PR). Run npm scripts and develop with the following process. Setup Fork master branch into your personal repository. Clone to local computer. Install node modules. Before starting development, check for any errors. $ git clone https://github.com/{username}/tui.image-editor.git $ cd tui.image-editor $ npm install $ npm run test Run webpack-dev-server $ npm run serve Documents Tutorial : https://github.com/nhnent/tui.image-editor/tree/master/docsExample : http://nhnent.github.io/tui.image-editor/latest/tutorial-example01-includeUi.htmlAPI : http://nhnent.github.io/tui.image-editor/latest/ Contributing Code of ConductContributing guidelineIssue guidelineCommit convention Dependency fabric.js >=1.6.7tui.code-snippet >=1.3.0tui.color-picker >=2.2.0 TOAST UI Family TOAST UI EditorTOAST UI GridTOAST UI ChartTOAST UI CalendarTOAST UI Components Used By TOAST Dooray! - Collaboration Service (Project, Messenger, Mail, Calendar, Drive, Wiki, Contacts) License MIT LICENSE

사진

Beautiful chart for data visualization. http://ui.toast.com/tui-chart/

Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library Wrappers toast-ui.vue-chart: Vue wrapper component is powered by NHN Entertainment. Table of Contents Collect statistics on the use of open sourceBrowser SupportTrue Cross Browser ChartsFeatures single-chartsCombo ChartsCustomizeAnd More From Examples Install Via Package ManagerVia Contents Delivery Network (CDN)Download Source Files Load namespacemodules Usage HTMLJavaScript Development SetupDevelop DocumentsContributingTOAST UI FamilyUsed ByLicense Collect statistics on the use of open source TOAST UI Chart applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Chart is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics option when creating charts. var options = { ... usageStatistics: false } tui.chart.barChart(container, data, options); Or, include tui-code-snippet(v1.4.0 or later) and then immediately write the options as follows: tui.usageStatistics = false; Browser Support Chrome Internet Explorer Edge Safari Firefox Yes 8+ Yes Yes Yes True Cross Browser Charts And It's Beautiful! IE8 CHROME No one likes legacy, but sometimes it matters. We started TOAST UI Chart because we could not find a project supporting legacy browsers, maintained reliably, and free for commercial use. The visuals of the charts in IE8 are exactly as it looks in Chrome. The TOAST UI Chart guarantees an identical look for all browsers. Draws fast and requires no polyfill, ToastUI uses of the native browser formats, such as SVG and RVML. The TOAST UI Chart will continue to support legacy browsers under the MIT license With over 50 releases since June 2015 under MIT License, the TOAST UI Chart is the answer if you have the same requirements as us. Features Intuitive and easy to apply.Is an open-source JavaScript library.Can be used in legacy browsers including IE8.Change the chart in detail using many options and custom themes. Single Charts The TOAST UI Chart provides many types of charts to visualize the various forms of data. BarColumn LineAreaRadial BubbleScatter Pie(General)Pie(Donut) HeatmapTreemap Map Boxplot Bullet Combo Charts The TOAST UI Chart covers complex data visualization. Column-Line Pie-Donut Line-Area Line-Scatter Customize Visualize the data in different styles by customizing the details of the charts. Various expressions Custom theme Stack option Diverging option Group tooltip And More From Examples Load Data from a tableAdd data dynamicallyApply themesMap Data Attribution Check out Example and wiki to discover more. Install The TOAST UI products can be installed by using the package manager or downloading the source directly. However, we highly recommend using the package manager. Via Package Manager The TOAST UI products are registered in two package managers, npm and bower. Install by using the commands provided by each package manager. When using npm, be sure Node.js is installed in the environment. npm $ npm install --save tui-chart # Latest version $ npm install --save tui-chart@<version> # Specific version bower $ bower install tui-chart # Latest version $ bower install tui-chart#<tag> # Specific version Via Contents Delivery Network (CDN) The TOAST UI Chart is available over a CDN. You can use cdn as below. <link rel="stylesheet" href="https://uicdn.toast.com/tui.chart/latest/tui-chart.min.css"> <script src="https://uicdn.toast.com/tui.chart/latest/tui-chart.min.js"></script> The types of distribution files are classified into three types depending on whether or not they exist in the code of the dependency file. tui-cahrt.js - This is not include dependency modules in the code.tui-cahrt-all.js - Includes all dependency modules, including 'babel-polyfill', in bundle file codetui-cahrt-polyfill.js - This includes only babel-polyfill in code. Within the download you'll find the following directories tui.chart/ ├─ latest │ ├─ tui-chart.js │ ├─ tui-chart.min.js │ ├─ tui-chart-all.js │ ├─ tui-chart-all.min.js │ ├─ tui-chart-polyfill.js │ ├─ tui-chart-polyfill.min.js │ ├─ tui-chart.css │ ├─ tui-chart.min.css │ ├─ maps/ │ │ ├── (china | japan | singapore | south-korea | taiwan | thailand | use | world).js ├─ v3.0.1/ Download Source Files Download bundle filesDownload all sources for each version Usage HTML Add the container element where TOAST UI Chart will be created. <div id="chart"></div> JavaScript Load The TOAST UI Chart can be used by creating an instance with the constructor function. To get the constructor function, import the module using one of the following three ways depending on your environment. var chart = tui.chart; /* namespace */ var chart = require('tui-chart'); /* CommonJS in Node.js */ import chart from 'tui-chart'; /* ES6 in Node.js */ Factory function needs three parameters: container, data, options Container: Wrapper HTMLElements that will contain charts as a childdata: numeric data need to make chartsoptions: functional options like legend aligment or tooltip visiblities var container = document.getElementById('chart-area'); var data = { category: [...], series: [...] }; var options = { chart: {width: 700, height: 400} }; chart.barChart(container, data, options); See details for additional informations. Development The TOAST UI products are open-source. After fixing issues, create a pull request(PR). Run npm scripts and develop with the following process. Setup Fork develop branch into your personal repository. Clone to local computer. Install node modules. Before starting development, check for any errors. $ git clone https://github.com/{username}/tui.chart.git $ cd tui.chart $ npm install $ npm run test Develop Let's start development! Run a server and see the code reflected. Add test cases and then make them green. Run webpack-dev-server $ npm run serve $ npm run serve:ie8 # Run on Internet Explorer 8 Run karma test $ npm run test Pull Request Before creating a PR, test and check for any errors. If there are no errors, then commit and push! For more information, please refer to the Contributing section. $ npm run deploy $ npm run test Documents Getting StartedTutorialsAPIs See the older versions of API page on the releases page. Contributing Code of ConductContributing guidelineIssue guidelineCommit convention TOAST UI Family TOAST UI EditorTOAST UI GridTOAST UI Components Used By TOAST Cloud - Total Cloud Service License This software is licensed under the MIT © NHN Entertainment.