The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
The deck includes a set of techniques and knowledge that can be used when you try to optimize the performance HTML5 app, mobile Web site, JavaScript application running on top of a browser or WebView
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
The document discusses various machine learning clustering algorithms like K-means clustering, DBSCAN, and EM clustering. It also discusses neural network architectures like LSTM, bi-LSTM, and convolutional neural networks. Finally, it presents results from evaluating different chatbot models on various metrics like validation score.
The document discusses challenges with using reinforcement learning for robotics. While simulations allow fast training of agents, there is often a "reality gap" when transferring learning to real robots. Other approaches like imitation learning and self-supervised learning can be safer alternatives that don't require trial-and-error. To better apply reinforcement learning, robots may need model-based approaches that learn forward models of the world, as well as techniques like active localization that allow robots to gather targeted information through interactive perception. Closing the reality gap will require finding ways to better match simulations to reality or allow robots to learn from real-world experiences.
[243] Deep Learning to help student’s Deep LearningNAVER D2
This document describes research on using deep learning to predict student performance in massive open online courses (MOOCs). It introduces GritNet, a model that takes raw student activity data as input and predicts outcomes like course graduation without feature engineering. GritNet outperforms baselines by more than 5% in predicting graduation. The document also describes how GritNet can be adapted in an unsupervised way to new courses using pseudo-labels, improving predictions in the first few weeks. Overall, GritNet is presented as the state-of-the-art for student prediction and can be transferred across courses without labels.
[234]Fast & Accurate Data Annotation Pipeline for AI applicationsNAVER D2
This document provides a summary of new datasets and papers related to computer vision tasks including object detection, image matting, person pose estimation, pedestrian detection, and person instance segmentation. A total of 8 papers and their associated datasets are listed with brief descriptions of the core contributions or techniques developed in each.
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지NAVER D2
This document presents a formula for calculating the loss function J(θ) in machine learning models. The formula averages the negative log likelihood of the predicted probabilities being correct over all samples S, and includes a regularization term λ that penalizes predicted embeddings being dissimilar from actual embeddings. It also defines the cosine similarity term used in the regularization.
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기NAVER D2
The document discusses running a TensorFlow Serving (TFS) container using Docker. It shows commands to:
1. Pull the TFS Docker image from a repository
2. Define a script to configure and run the TFS container, specifying the model path, name, and port mapping
3. Run the script to start the TFS container exposing port 13377
The document discusses linear algebra concepts including:
- Representing a system of linear equations as a matrix equation Ax = b where A is a coefficient matrix, x is a vector of unknowns, and b is a vector of constants.
- Solving for the vector x that satisfies the matrix equation using linear algebra techniques such as row reduction.
- Examples of matrix equations and their component vectors are shown.
This document describes the steps to convert a TensorFlow model to a TensorRT engine for inference. It includes steps to parse the model, optimize it, generate a runtime engine, serialize and deserialize the engine, as well as perform inference using the engine. It also provides code snippets for a PReLU plugin implementation in C++.
The document discusses machine reading comprehension (MRC) techniques for question answering (QA) systems, comparing search-based and natural language processing (NLP)-based approaches. It covers key milestones in the development of extractive QA models using NLP, from early sentence-level models to current state-of-the-art techniques like cross-attention, self-attention, and transfer learning. It notes the speed and scalability benefits of combining search and reading methods for QA.
1. HTML5를 이용한 스마트폰 웹 앱 프레임워크와
한게임 모바일 게임서비스
이동훈
스마트폰게임서비스개발팀
2011년 10월 12일
ⓒ 2011 NHN CORPORATION
2. 목차
1. Overview
1.1 배경
2. Web-App
2.1 Hybrid App
2.2 컨텐츠 개발 방식
2.3 앱스러운 웹
2.4 문제점
3. Game
3.1 Target
3.2 Entity-Component System
3.3 Layers
3.4 GameOVEN Web
4. 1.1 배경 대외비
배경
스마트폰이 이슈가 되면서 각종 서비스나 게임들이 앱으로 제공
OS 환경에 맞게 따로 개발
업데이트가 즉각적이지 못함
스마트폰 브라우저들의 성능 향상 및 HTML5표준 지원
Entity-Component System기반의 HTML5/CSS3 게임 엔짂 필요
스마트폰 게임 개발에 중점을 둔 웹 개발 툴 필요
4 / 파워포인트 문서 사용 안내
6. 2.1 Hybrid App 대외비
디바이스 의존적인 기능은 Hybrid App으로 지 Web Content
원
자체 정의한 Callback을 통한
짂동 프로토콜 응답
사운드
WebView
앨범
Hybrid App
주소록
Communicator
… (native contents)
HSP
Sound
Shake
Album
Etc.
* PhoneGap과 같은 방식
6 / 파워포인트 문서 사용 안내
7. 2.2 컨텐츠 개발 방식 대외비
마크업 중심 (Markup-centric approach) 지원
자바스크립트를 HTML기반으로 제어하는 방식
7 / 파워포인트 문서 사용 안내
8. 2.3 앱스러운 웹 대외비
앱스러운 웹을 만드려면?
Data와 View의 분리
페이지 젂환 효과
Preload
UI Components
8 / 파워포인트 문서 사용 안내
9. 2.3 앱스러운 웹 (cont’d) 대외비
View와 Data의 분리 - DataTemplate
HTML
9 / 파워포인트 문서 사용 안내
10. 2.3 앱스러운 웹 (cont’d) 대외비
View와 Data의 분리 - DataTemplate
HTML
10 / 파워포인트 문서 사용 안내
JSON
11. 2.3 앱스러운 웹 (cont’d) 대외비
페이지 전환
DOM DOM DOM
(body) (body) (body)
http:// http:// http://
<div data-type="View"> <div data-type="View"> <div data-type="View">
<div class="toolbar">
Page1 <div class="toolbar">
Page2 <div class="toolbar">
Page3
<h1>Inko framework</h1> <h1>Inko framework</h1> <h1>Inko framework</h1>
<ul class="rounded"> <ul class="rounded"> <ul class="rounded">
<li class="arrow“>list1</li> <li class="arrow“>list1</li> <li class="arrow“>list1</li>
<li class="arrow">list2</li> <li class="arrow">list2</li> <li class="arrow">list2</li>
</ul> </ul> </ul>
</div> </div> </div>
<div class="info“>Add this page to your <div class="info“>Add this page to your <div class="info“>Add this page to your
home screen</div> home screen</div> home screen</div>
</div> </div> </div>
11 / 파워포인트 문서 사용 안내
12. 2.3 앱스러운 웹 (cont’d) 대외비
페이지 전환
DOM
(body)
AJAX AJAX
AJAX
<div data-type="View"> <div data-type="View"> <div data-type="View">
<div class="toolbar">
Page1 <div class="toolbar">
Page2 <div class="toolbar">
Page3
<h1>Inko framework</h1> (active) <h1>Inko framework</h1> <h1>Inko framework</h1>
<ul class="rounded"> <ul class="rounded"> <ul class="rounded">
<li class="arrow“>list1</li> <li class="arrow“>list1</li> <li class="arrow“>list1</li>
<li class="arrow">list2</li> <li class="arrow">list2</li> <li class="arrow">list2</li>
</ul> </ul> </ul>
</div> </div> </div>
<div class="info“>Add this page to your <div class="info“>Add this page to your <div class="info“>Add this page to your
home screen</div> home screen</div> home screen</div>
</div> </div> </div>
12 / 파워포인트 문서 사용 안내
13. 2.3 앱스러운 웹 (cont’d) 대외비
Preload
View를 미리 로드하여 메모리 상에 적재
페이지 이동시 서버로의 요청을 최소화 하고 빠른 페이지 젂환
페이지1 페이지2 페이지1 페이지2
클라이언트 클라이언트
웹서버 웹서버
페이지 이동시 웹서버에 요청해서 페이지 젂송 미리 웹서버에서 페이지 젂송 받고 이동시에는 요청 안함
13 / 파워포인트 문서 사용 안내
14. 2.3 앱스러운 웹 (cont’d) 대외비
Flicker
컨텐츠를 좌/우 Swipe 모션으로 변경하는 기능
Methods
prev: function(time)
next: function(time)
go: function(target, time)
Events
onFlicked({pos, count, entity, component}
Scroller
고정된 영역 내의 컨텐츠를 스크롤할 수 있는 기능
Methods
refresh: function()
scrollToPage: function(pageX, pageY, time)
Events
onScrollStart({event, entity, component})
onScrollMove({event, entity, component})
onScrollEnd({evernt, entity, component})
14 / 파워포인트 문서 사용 안내
15. 2.3 앱스러운 웹 (cont’d) 대외비
TabPanel
탭 버튺에 따라 컨텐츠를 변경하는 기능
Methods
select: function(index)
setSelectCls: function(classname)
Events
onTabSelected({selectedIndex, prevIndex,
entity, component})
DataTemplate
Data(JSON)와 연동하여 Markup을 구성하는 기능
Methods
append: function(params, immediate)
overwrite: function(params, immediate)
insertfront: function(params, immediate)
flush: function(type)
15 / 파워포인트 문서 사용 안내
16. 2.3 앱스러운 웹 (cont’d) 대외비
TabPanel
탭 버튺에 따라 컨텐츠를 변경하는 기능
Methods
select: function(index)
setSelectCls: function(classname)
Events
onTabSelected({selectedIndex, prevIndex,
entity, component})
DataTemplate
Data(JSON)와 연동하여 Markup을 구성하는 기능
Methods
append: function(params, immediate)
overwrite: function(params, immediate)
insertfront: function(params, immediate)
flush: function(type)
16 / 파워포인트 문서 사용 안내
17. 2.4 문제점 대외비
History 관리 (Ajax)
페이지 이동시 History를 관리하는 기능
Refresh시에도 History 유지
Anchor Tag의 HREF 속성을 사용한 경우에도 History 관리
URL Hash를 이용한 Browser의 Back / Forward 버튺 지원
URL Hash 기능 Turn on/off 옵션
17 / 파워포인트 문서 사용 안내
18. 2.4 문제점 (cont’d) 대외비
Javascript의 Scope
1개의 DOM을 공유하여 Markup의 ID나 변수/함수들의 Uniqueness가 보장되지 않음
페이지 구성
View는 반드시 data-type이 View인 DIV 태그로 감싸져야 함
현재 하나의 html파일이 하나의 View만 가질 수 있음
<div data-type=“View”> <div data-type=“View”>
… …
<button onclick=“/*enco_call*/.add(1, 2)”> <button onclick=“/*enco_call*/.add(1, 2)”>
… …
</div> </div>
/*enco_begin*/ /*enco_begin*/
... ...
function add(a, b) { … } function add(a, b) { … }
… …
/*enco_end*/ /*enco_end*/
Page 1 Page 2
18 / 파워포인트 문서 사용 안내
19. 2.4 문제점 (cont’d) 대외비
Resource Manager
Resource
Resource
게임에선 이미지, 사운드등 리소스의 사이즈가 큼 Data Resource
Data Resource
Data
Data
웹의 특성상 웹 페이지에 접속할 때 마다 매번 리소스
를 다운 받아야 함
• 모바일 환경에선, Packet 사이즈 = 과금
• 느린 네트워크 환경 Install
HTML5의 Application Cache, WebStorage를
이용해 리소스를 클라이언트에 설치
Mobile device
• 빠른 로딩 Web App
• 데이터 사용량 최소화 Content
Web
cache
Resource
Manager
• 오프라인 모드 지원 Conten
Web
tWeb
storage
Content
Web
SQL
19 / 파워포인트 문서 사용 안내
21. 3.1 Target 대외비
온라인 웹 게임 개발
UI 프레임워크 / 게임 엔짂을 이용한 게임 개발
Entity-Component System
프레임워크에 최적화 된 개발 툴
CityVille 포트리스
21 / 파워포인트 문서 사용 안내
22. 3.2 Entity-Component System 대외비
Entity
Game World (웹에서는 Page)안에 존재하는 객체
스스로 어떠한 일도 하지 않는 단순한 Container
Component
하나의 특징 또는 기능을 가짂 독립적인 구현체
서로 다른 기능을 가짂 Component들이 모여 Entity
를 구성하고 성격을 결정
Messaging
Component갂의 의존성이 많아지는 문제를 보완하
고자 제안된 방법.
컴포넌트가 다른 컴포넌트에게 직접 요청하는 대싞,
Event를 발생시키면 Listening 하고 있던 컴포넌트
가 있으면 이에 응답하는 방식
22 / 파워포인트 문서 사용 안내
23. 3.3 Layers 대외비
Markup Layer
HTML Markup과 CSS3를 이용해 Entity를 렌더링
Canvas Layer
Canvas를 이용해 Entity를 렌더링
Markup Entity에 비해 세밀한 제어 가능 (Pixel 단위의 충돌체크 등등)
Canvas Layer Markup Layer
23 / 파워포인트 문서 사용 안내
24. 3.3 GameOVEN Web 대외비
기능
Canvas/Markup 비주얼 편집, 자바스크립트 Code 편집
Debugging
Preview
24 / 파워포인트 문서 사용 안내
25. 3.3 GameOVEN Web 대외비
Code Editor
Auto-complete for HTML, CSS, Javascipt
Intellisense for Javascript
Template statements editing for Javascript (ex, for)
Outlining for the tree structure for HTML, JSON
Outlining for the function and variable names
Realtime Syntax Error Highlight for Javascript
25 / 파워포인트 문서 사용 안내
26. 3.3 GameOVEN Web (cont’d) 대외비
Page Previewer
Built-in browser (Google’s Chromium Embedded Framework)
Predefined preview profiles (iPhone 3/4, PC, custom profile, …)
Built-in local web server
26 / 파워포인트 문서 사용 안내
27. 3.3 GameOVEN Web (cont’d) 대외비
Debugger
Integrated debugger with IDE
Implement Google V8 Debugger protocol
Run / Stop / Continue
Set / Remove / Handle breakpoints
Watch variables and parameters
Call Stack
Step in / over / out
27 / 파워포인트 문서 사용 안내
28. 3.3 GameOVEN Web (cont’d) 대외비
SVN
Integrated with the project explorer
Available under the “Team” menu of the contextual
menu of the project explorer
Operations
Check in / out
Update / Commit
Update to revision
Revert
Clean-up
Show log
28 / 파워포인트 문서 사용 안내
