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 [소프트웨어에 날개를 달자.]

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

사진 설명
사진

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.

사진

The Powerful Component to Display and Edit Data. Experience the Ultimate Data

The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer! Wrappers @toast-ui/vue-grid : Vue wrapper component is being implemented by TOAST UI Table of Contents Collect statistics on the use of open sourceBrowser SupportThe Toast UI Grid Is an Ultimate Transformer Data Can Be Displayed in Any FormatProvides a Variety of Editing ElementsSimple, Easy to Use Themes FeaturesExamplesInstall Via Package ManagerVia Contents Delivery Network (CDN)Download Source Files Usage HTMLJavaScript Pull Request Steps SetupDevelopPull Request Steps DependencyDocumentsContributingTOAST UI FamilyUsed ByLicense Collect statistics on the use of open source TOAST UI Grid applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Grid 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 instance = new Grid(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 The Toast UI Grid Is an Ultimate Transformer Data Can Be Displayed in Any Format Styling The TOAST UI Grid is a component that can display, edit, add, and delete multiple data. You can append units to the data shown and use html to represent images and links instead of textual data. Summary The summary function allows you to caculate on multiple rows of data and display the results. It automatically calculates the total sum, the average, the maximum and minimum value, and updates each result whenever the value changes. Tree Data Starting with version 3 or later, you can use tree data to represent them in a hierarchy. Now let's process the data we want. Provides a Variety of Editing Elements In order to edit the data, you don't need to use html to create the editing elements yourself. It supports various input elements such as text, select box, checkbox, radio button. You can set the data editing method just by setting options. You can also show editing elements only while you're editing using view mode. Simple, Easy to Use Themes It has three themes: default, striped (zebra pattern), and clean theme. You can easily add the desired design to the themes provided through the theme API. Themes API has been improved since version 3, allowing you to easily control the background color of the header / body area and vertical / horizontal border lines without modifying CSS styles directly. Use the theme to customize your grid. default striped clean In addition, a variety of powerful features can be found on the demo page below.  Features Custom cell formatter & converterVarious input types (checkbox, radio, select, password, etc)Full keyboard navigation (move, select, copy, paste, delete, etc)Virtual scrolling (Handling large dataset without performance loses)Copy & Paste using clipboard with 3rd party application (Like MS-Excel or Google-spreadsheet)Column resize & reorder & show & hideMulti column headersInline EditingValidationSelectionPaginationPicking dateSortingMerging cellFrozen(Pinned) columnsRelation between each columnsBinding to remote dataSummarize all values of each columnCustomizing styles (Three basic themes)Representing tree data Examples BasicInput typesRelation between columnsApplying ThemesUsing DatePicker componentUsing SummaryBinding to remote dataUsing tree data Here are more examples and play with TOAST UI Grid! Install TOAST UI products can be used by using the package manager or downloading the source directly. However, we highly recommend using the package manager. Via Package Manager TOAST UI products are registered in two package managers, npm and bower. You can conveniently install it using the commands provided by each package manager. When using npm, be sure to use it in the environment Node.js is installed. npm $ npm install --save tui-grid # Latest version $ npm install --save tui-grid@<version> # Specific version bower $ bower install tui-grid # Latest version $ bower install tui-grid#<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-grid/latest/tui-grid.css" /> ... <script src="https://uicdn.toast.com/tui-grid/latest/tui-grid.js"></script> If you want to use a specific version, use the tag name instead of latest in the url's path. The CDN directory has the following structure. tui-grid/ ├─ latest/ │ ├─ tui-grid.comb.js // This file includes the backbone and underscore. │ ├─ tui-grid.comb.min.js │ ├─ tui-grid.css │ ├─ tui-grid.min.css │ ├─ tui-grid.js │ └─ tui-grid.min.js ├─ v2.10.0/ │ ├─ ... Download Source Files Download bundle filesDownload all sources for each version Dependency jquery >=1.11.0 (Available with bower from 1.8.3)underscore >=1.8.3backbone >=1.3.3tui-code-snippet >=1.4.0component (optional) tui-pagination >=3.2.0tui-date-picker >=3.1.0 You can also use lodash instead of underscore and use higher version of jquery (like v2.x.x) depending on your project. Usage HTML Add the container element where TOAST UI Grid will be created. <div id="grid"></div> JavaScript TOAST UI Grid can be used by creating an instance with the constructor function. To get the constructor function, you should import the module using one of the following ways depending on your environment. Using namespace in browser environment var Grid = tui.Grid; Using module format in node environment var Grid = require('tui-grid'); /* CommonJS */ import Grid from 'tui-grid'; /* ES6 */ You can create an instance with options and call various APIs after creating an instance. var instance = new Grid({ el: $('#grid'), // Container element columns: [ { title: 'Name', name: 'name' }, { title: 'Artist', name: 'artist' }, { title: 'Release', name: 'release' }, { title: 'Genre', name: 'genre' } ], data: [ { name: 'Beautiful Lies', artist: 'Birdy', release: '2016.03.26', genre: 'Pop' } ] }); instance.setData(newData); // Call API of instance's public method Grid.applyTheme('striped'); // Call API of static method Pull Request Steps TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process. Setup Fork master branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check to haveany errors. $ git clone https://github.com/{your-personal-repo}/tui.grid.git $ cd tui.grid $ npm install $ npm run test Develop Let's start development! You can see your code is reflected as soon as you saving the codes by running a server. Don't miss adding test cases and then make green rights. Run webpack-dev-server $ npm run dev $ npm run dev:ie8 # Run on Internet Explorer 8 Run karma test $ npm run test Pull Request Before PR, check to test lastly and then check any errors. If it has no error, commit and then push it! For more information on PR's step, please see links of Contributing section. Documents Getting StartedTutorialsAPIs You can also see the older versions of API page on the releases page. Contributing Code of ConductContributing guidelineIssue guidelineCommit convention TOAST UI Family TOAST UI CalendarTOAST UI ChartTOAST UI EditorTOAST UI Components Used By NCP - Commerce Platform License This software is licensed under the MIT © NHN Entertainment.