KR20200086387A - 모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 - Google Patents
모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 Download PDFInfo
- Publication number
- KR20200086387A KR20200086387A KR1020207019905A KR20207019905A KR20200086387A KR 20200086387 A KR20200086387 A KR 20200086387A KR 1020207019905 A KR1020207019905 A KR 1020207019905A KR 20207019905 A KR20207019905 A KR 20207019905A KR 20200086387 A KR20200086387 A KR 20200086387A
- Authority
- KR
- South Korea
- Prior art keywords
- component
- layout
- page
- mobile
- components
- Prior art date
Links
- 238000000034 method Methods 0.000 title claims abstract description 57
- 238000006243 chemical reaction Methods 0.000 title description 10
- 230000002452 interceptive effect Effects 0.000 title description 7
- 230000008859 change Effects 0.000 claims description 52
- 230000008569 process Effects 0.000 abstract description 21
- 238000004458 analytical method Methods 0.000 abstract description 12
- 238000013461 design Methods 0.000 description 34
- 230000000007 visual effect Effects 0.000 description 33
- 238000013507 mapping Methods 0.000 description 12
- 230000036961 partial effect Effects 0.000 description 12
- 238000004364 calculation method Methods 0.000 description 9
- 230000006978 adaptation Effects 0.000 description 8
- 230000015654 memory Effects 0.000 description 8
- 239000002131 composite material Substances 0.000 description 7
- 230000009467 reduction Effects 0.000 description 7
- 239000000203 mixture Substances 0.000 description 6
- 238000012545 processing Methods 0.000 description 6
- 238000012163 sequencing technique Methods 0.000 description 6
- 238000004422 calculation algorithm Methods 0.000 description 5
- 238000001914 filtration Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 238000003780 insertion Methods 0.000 description 4
- 230000037431 insertion Effects 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 230000015572 biosynthetic process Effects 0.000 description 3
- 230000014759 maintenance of location Effects 0.000 description 3
- 239000000463 material Substances 0.000 description 3
- 238000012015 optical character recognition Methods 0.000 description 3
- 238000007781 pre-processing Methods 0.000 description 3
- 230000001737 promoting effect Effects 0.000 description 3
- 230000000717 retained effect Effects 0.000 description 3
- 230000002441 reversible effect Effects 0.000 description 3
- 238000003786 synthesis reaction Methods 0.000 description 3
- 101100352419 Pithecopus hypochondrialis psn1 gene Proteins 0.000 description 2
- 101100352425 Pithecopus hypochondrialis psn2 gene Proteins 0.000 description 2
- 238000004590 computer program Methods 0.000 description 2
- 238000005034 decoration Methods 0.000 description 2
- 230000007423 decrease Effects 0.000 description 2
- 238000001514 detection method Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000010354 integration Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000012552 review Methods 0.000 description 2
- 238000012216 screening Methods 0.000 description 2
- 230000011218 segmentation Effects 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 241000239290 Araneae Species 0.000 description 1
- 238000012935 Averaging Methods 0.000 description 1
- 101100520280 Pithecopus hypochondrialis psn3 gene Proteins 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 230000027455 binding Effects 0.000 description 1
- 238000009739 binding Methods 0.000 description 1
- 235000019219 chocolate Nutrition 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 230000001186 cumulative effect Effects 0.000 description 1
- 238000005520 cutting process Methods 0.000 description 1
- 238000013499 data model Methods 0.000 description 1
- 238000005315 distribution function Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 238000007667 floating Methods 0.000 description 1
- 238000005304 joining Methods 0.000 description 1
- 210000003141 lower extremity Anatomy 0.000 description 1
- 239000011159 matrix material Substances 0.000 description 1
- 238000002156 mixing Methods 0.000 description 1
- 239000003607 modifier Substances 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 238000012805 post-processing Methods 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- 238000011084 recovery Methods 0.000 description 1
- 230000002829 reductive effect Effects 0.000 description 1
- 230000008929 regeneration Effects 0.000 description 1
- 238000011069 regeneration method Methods 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 238000004513 sizing Methods 0.000 description 1
- 238000003860 storage Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000009885 systemic effect Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 230000001131 transforming effect Effects 0.000 description 1
- 230000007704 transition Effects 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/106—Display of layout of documents; Previewing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
- G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/151—Transformation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/186—Templates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/151—Transformation
- G06F40/154—Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Health & Medical Sciences (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Artificial Intelligence (AREA)
- Data Mining & Analysis (AREA)
- Processing Or Creating Images (AREA)
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
- Document Processing Apparatus (AREA)
- Digital Computer Display Output (AREA)
- Mobile Radio Communication Systems (AREA)
Abstract
컨버터를 규정하는 명령을 처리하는 적어도 하나의 프로세서를 가지는 클라이언트/서버 시스템을 통하여 구현가능하고, 웹사이트 구축 시스템으로부터 웹사이트 페이지를 수신하는 수신기로서, 상기 페이지는 소스 디스플레이 영역용 소스 레이아웃을 가지고, 상기 페이지는 컴포넌트들의 객체 모델 표현을 가지는, 수신기 및 상기 컴포넌트들 간의 순서 및 관련성의 세트를 결정하고 타겟 디스플레이 영역용 상기 웹사이트 페이지의 타겟 레이아웃을 생성하는 프로세서로서, 상기 타겟 레이아웃은 상기 결정된 순서 및 관련성의 세트의 의미 분석 및 조율에 기초하고, 상기 소스 디스플레이 영역은 상기 타겟 디스플레이 영역과 상이한 속성을 가지는, 프로세서를 포함하는, 컨버터.
Description
관련 출원에 대한 상호 참조
본 출원은 2013 년 9 월 12 일 출원된 미국 가출원 번호 제 61/ 876,795 호에 대한 우선권을 주장하는데, 이것은 그 전체가 원용에 의하여 본원에 통합된다.
본 발명은 대화형 애플리케이션의 변환 및 특히 모바일 플랫폼에 관한 것이다.
인터넷이 도래하면서 최근 몇 년 동안에 사용자는 점점 더 많은 스마트 폰, 태블릿 및 다른 모바일 디바이스를 사용하여 웹 사이트 및 대화형 애플리케이션에 액세스해 오고 있다. 이러한 디바이스들은 점진적으로 풀-피쳐 데스크탑 개인용 컴퓨터 및 구형의 성능이 떨어지는 "피쳐 폰" 모두를 대체-또는 보완-해 오고 있다. 이것은 월드-와이드-웹에서 상주하는 웹 사이트에, 그리고 애플, 구글, 마이크로소프트 및 아마존과 같은 대기업이 제공하는 다수의 애플리케이션 스토어로부터 현재 획득될 수 있는 다른 대화형 애플리케이션에 적용된다.
웹 사이트 및 대화형 애플리케이션은 이들이 어디에서 시청되는지, 예컨대 데스크탑 PC, 소형 모바일 디바이스 및 중간-사이즈 모바일 태블릿에서 시청되는지에 따라 다른 디스플레이 폼 팩터 및 특성을 가진다.
본 발명의 바람직한 실시예에 따르면, 컨버터를 규정하는 명령을 처리하는 적어도 하나의 프로세서를 가지는 클라이언트/서버 시스템을 통해서 구현가능한 컨버터가 제공된다. 컨버터는 웹사이트 구축 시스템으로부터 웹사이트 페이지를 수신하는 수신기를 포함하는데, 페이지는 디스플레이 영역에 대한 소스 레이아웃을 가지고, 페이지는 컴포넌트의 객체 모델 표현을 가진다. 컨버터는 컴포넌트들 사이의 순서 및 관련성의 세트를 결정하고, 타겟 디스플레이 영역에 대한 웹사이트 페이지의 타겟 레이아웃을 생성하는 프로세서를 더 포함하는데, 타겟 레이아웃은 의미 분석 및 결정된 순서 및 관련성의 세트의 조율(reconciliation)에 기초하고, 소스 디스플레이 영역은 타겟 디스플레이 영역과 상이한 속성을 가진다.
더욱이, 본 발명의 바람직한 실시예에 따르면, 컨버터는 상기 타겟 레이아웃에 이루어진 독립적 변경을 고려하여 상기 소스 레이아웃 및 상기 타겟 레이아웃에 대한 변경을 병합하여 업데이트된 타겟 레이아웃 구성을 생성하는 리컨버터를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 프로세서는 컴포넌트의 객체 속성을 분석하고, 타겟 디스플레이 영역 상의 프리젠테이션에 대한 그들의 적합성을 변경하는 프리프로세서, 및 함께 남아야 하는 컴포넌트의 그룹을 위치결정하고, 컴포넌트의 위치 및 컴포넌트의 콘텐츠 관련성에 기초하여 슈퍼-노드들의 계층성을 생성하는 슈퍼-노드 생성기를 포함한다. 프로세서는 슈퍼-노드의 각각 내의 엘리먼트들에 대한 순서를 결정하는 순서결정기(orderer), 결정된 순서 및 그룹 중 적어도 하나에 기초하여 타겟 레이아웃 내에 엘리먼트를 배치하는 배치기(placer), 및 디스플레이 이전에 배치된 엘리먼트를 조절하는 포스트 프로세서를 더 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 컴포넌트는 어토믹(atomic) 컴포넌트, 단일-페이지 컨테이너 컴포넌트 및 다중-페이지 컨테이너 컴포넌트 중 적어도 하나이다.
더욱이, 본 발명의 바람직한 실시예에 따르면, 컨버터는 클라이언트, 서버 및 제 3 자 서버 중 적어도 하나에 구현가능하다.
더욱이, 본 발명의 바람직한 실시예에 따르면, 프리프로세서는, 템플릿 내의 컴포넌트의 인스턴스를 변경하는 템플릿 핸들러, 타겟 레이아웃에 적합하지 않은 컴포넌트를 필터링하는 컴포넌트 필터러, 컴포넌트를 타겟 레이아웃에 맞춰 적응시키는 컴포넌트 어댑터, 컴포넌트를 타겟 레이아웃에 맞춰 조절하는 컴포넌트 조절기, 및 컴포넌트의 속성을 분석하여 그들의 사용 적합성을 결정하는 컴포넌트 분석기 중 적어도 하나를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 슈퍼-노드 생성기는, 고도로 중첩하는 컴포넌트의 그룹을 위치결정하고, 그룹을 그루핑 기준에 따라 가상 엘리먼트로 교체하는 중첩 그룹 위치결정기, 및 템플릿, 애플리케이션, 페이지 또는 컴포넌트 레벨 중 적어도 하나의 힌트에 따라서 컴포넌트의 그룹을 위치결정하고, 그룹을 그루핑 기준에 따라서 가상 엘리먼트로 교체하는 선정의된 그룹 위치결정기를 포함한다. 수퍼-노드 생성기는, 특정한 배경 이미지 상에 오버레이되는 텍스트 컴포넌트인 컴포넌트를 위치결정하고, 그룹을 그루핑 기준에 따라 가상 엘리먼트로 교체하는 이미지상 텍스트 그룹 위치결정기, 중첩 그룹 위치결정기, 선정의된 그룹 위치결정기 및 이미지상 텍스트 그룹 위치결정기의 정확도에 대한 확실성 점수를 결정하는 점수결정기(scorer), 및 컴포넌트 및 가상 엘리먼트에 기초하여 슈퍼-노드들의 계층성을 생성하는 노드 생성기를 더 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 순서결정기는, 슈퍼-노드의 엘리먼트의 시퀀스를 선정의된 순서 기준에 따라서 결정하는 기본 순서결정기, 슈퍼-노드의 엘리먼트의 의미, 콘텐츠, 속성, 편집 이력 및 기하학적 구조의 적어도 하나를 분석하는 부분 순서 세트 위치결정기, 기본 순서결정기 및 부분 순서 세트 위치결정기의 정확도에 대한 확실성 점수를 결정하는 점수결정기, 및 기본 순서결정기에 의하여 결정된 시퀀스를 부분 순서 세트 위치결정기에 의하여 위치결정된 검출된 부분 순서 세트와 통합하여 병합된 변경된 순서를 생성하는 순서 통합기를 포함한다.
추가적으로, 본 발명의 바람직한 실시예에 따르면, 포스트 프로세서는, 자동 추가된 컴포넌트들 및 모바일-관련 컴포넌트들 중 적어도 하나를 삽입하는 자동 추가된 컴포넌트 삽입기, 및 타겟 레이아웃에 따라서 조절되는 동적 레이아웃 앵커의 생성, 변경 및 제거 중 적어도 하나를 수행하는 동적 레이아웃 코디네이터를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 기본 순서결정기는, 슈퍼-노드의 엘리먼트를 행 및 열 중 적어도 하나에 따라서 시퀀싱하는 일차 방향 순서결정기, 슈퍼-노드의 엘리먼트를 행 및 열 중 적어도 하나에 따라서 시퀀싱하고 임의의 행/열 분할 및 병합을 추적하는 분할 및 합병 일차 방향 순서결정기, 및 슈퍼-노드의 엘리먼트의 수평 및 수직 슬라이싱을 교번하여 분할의 내부 트리를 생성하고 엘리먼트에 대한 디스플레이의 시퀀스를 규정하는 수평/수직 슬라이서 중 적어도 하나를 포함한다.
추가적으로, 본 발명의 바람직한 실시예에 따르면, 배치기는, 슈퍼-노드의 엘리먼트에 부착된 힌트를 해석하는 힌트 해석기, 노드 생성기 및 순서결정기에 의하여 생성된 힌트에 따라서 줄바꿈을 생성하는 줄바꿈 생성기, 폭 및 높이 조절 중 적어도 하나를 슈퍼-노드의 엘리먼트로 적용시키는 사이즈 조절기, 및 장식 이미지를 리사이징하는 리사이저(resizer)를 포함한다.
더욱이, 본 발명의 바람직한 실시예에 따르면, 부분 순서 세트 위치결정기는, 클러스터 부분 순서 세트를 검출하는 클러스터 부분 순서 세트 위치결정기로서, 슈퍼-노드의 엘리먼트는 슈퍼-노드 내의 엘리먼트 사이의 정규 스페이싱보다 근접성에 있어서 더 근접한, 클러스터 부분 순서 세트 위치결정기, 서로 근접한 주어진 타입의 슈퍼-노드의 엘리먼트의 특정 조합이 존재할 경우 의미 관련성 부분 순서 세트를 검출하도록 설정되는 의미 부분 순서 위치결정기, 슈퍼-노드의 엘리먼트 사이에 설정된 패턴이 존재할 경우 부분 순서 세트를 검출하는 패턴 부분 순서 세트 위치결정기, 현존하는 편집과 관련된 그루핑 정의, 현존하는 동적 레이아웃 앵커 정보 및 상이한 컴포넌트 세트에 대한 컴포넌트 템플릿의 재사용 중 적어도 하나에 기초하여 부분 순서 세트를 검출하는 선정의된 부분 순서 세트 위치결정기, 및 슈퍼-노드의 엘리먼트의 부분 순서 세트를 이전의 편집 세션으로부터 수집된 정보에 기초하여 검출하는 편집 세션 정보 기초 부분 순서 세트 위치결정기를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 자동 추가된 컴포넌트들 및 모바일-관련 컴포넌트들 중 적어도 하나는 타겟 디바이스에 특유한 위젯, 네비게이션 메뉴, 광고 및 홍보 자료 중 적어도 하나를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 컨버터는 패턴 부분 순서 세트 위치결정기를 가지고, 수평/수직 슬라이서는 슈퍼-노드의 엘리먼트의 슬라이싱 방향을 분리자의 개수, 주어진 투영 방향에서 발견된 갭의 사이즈, 위치결정된 패턴 부분 순서 세트 및 양자 모두의 방향에서의 축 투영(axis projection)에 대한 정렬의 품질 중 적어도 하나에 기초하여 결정하는 엘리먼트 분할기를 포함한다.
추가적으로, 본 발명의 바람직한 실시예에 따르면, 컴포넌트 필터러는, 타겟 레이아웃 디스플레이에 대해 적합하지 않은 컴포넌트를 제거하는 제거기, 및 타겟 레이아웃 디스플레이에 대해 적합하지 않은 컴포넌트를 은닉하는 은닉기(hider)를 포함한다.
더욱이, 본 발명의 바람직한 실시예에 따르면, 컴포넌트 어댑터는, 컴포넌트의 사이즈 및 폭을 변경하는 변경기(modifier), 메뉴 컴포넌트를 결합시키는 결합기(uniter), 콘텐츠 관련 적응(adaptation)을 업데이트하는 콘텐츠 업데이터, 합성 메뉴를 생성하는 생성기, 및 문자 기초 그래픽을 변환하는 문자 컨버터를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 컴포넌트 조절기는 소스 레이아웃과 타겟 레이아웃 사이의 폰트-사이즈 매핑을 생성하는 매퍼를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 컴포넌트 분석기는, 컴포넌트가 단일 이미지에 포함되는 이미지 컴포넌트인 경우에 컴포넌트를 이어붙이는 이미지 이음기(stitcher), 및 장식 이미지를 구별하는 장식 이미지 핸들러를 포함한다.
추가적으로, 본 발명의 바람직한 실시예에 따르면, 리컨버터는, 페이지가 소스 레이아웃에서 삭제되는 경우 타겟 레이아웃으로부터 페이지를 삭제하는 페이지 삭제기(deleter), 페이지가 소스 레이아웃에 추가되는 경우 페이지를 타겟 레이아웃에 추가하는 페이지 추가기(adder), 컴포넌트가 소스 레이아웃에서 삭제되는 경우 타겟 레이아웃으로부터 컴포넌트를 삭제하는 컴포넌트 삭제기, 컴포넌트가 소스 레이아웃에 추가되는 경우 컴포넌트를 타겟 레이아웃에 추가하는 컴포넌트 추가기, 컴포넌트가 소스 레이아웃에서 변경되는 경우 타겟 레이아웃으로부터 컴포넌트를 변경하는 컴포넌트 변경기, 및 타겟 레이아웃에 대한 소스 레이아웃으로의 변경과 독립적인 변경을 핸들링하는 모바일 핸들러를 포함한다.
더욱이, 본 발명의 바람직한 실시예에 따르면, 컴포넌트 추가기는, 소스 레이아웃에 추가된 컴포넌트에 최근접한 최근접 선행자 컴포넌트 및 부모 컴포넌트를 검색하는 부모/선행자 검색기, 및 추가된 컴포넌트를 최근접 선행자 컴포넌트 및 부모 컴포넌트 중 적어도 하나에 따라 타겟 레이아웃에 삽입하는 모바일 레이아웃 추가기를 포함한다.
본 발명의 바람직한 실시예에 따르면, 컴퓨팅 디바이스에서 구현가능한 방법으로서, 웹사이트 구축 시스템으로부터 웹사이트 페이지를 수신하는 단계로서, 페이지는 소스 디스플레이 영역용 소스 레이아웃을 가지고, 페이지는 컴포넌트의 객체 모델 표현을 가지는, 단계, 및 컴포넌트의 순서 및 관련성의 세트를 결정하고 타겟 디스플레이 영역용 웹사이트 페이지의 타겟 레이아웃을 생성하는 단계로서, 타겟 레이아웃은 결정된 순서 및 관련성의 세트의 의미 분석 및 조율에 기초하고, 소스 디스플레이 영역은 타겟 디스플레이 영역과 상이한 속성을 가지는, 결정하고 생성하는 단계를 포함하는, 방법이 제공된다.
더욱이, 본 발명의 바람직한 실시예에 따르면, 방법은 업데이트된 타겟 레이아웃 구성을 생성하도록, 타겟 레이아웃에 이루어진 독립적 변경을 고려하여 소스 레이아웃 및 타겟 레이아웃에 대한 변경을 병합하는 단계를 더 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 결정하고 생성하는 단계는, 컴포넌트의 객체 속성을 분석하고, 타겟 디스플레이 영역 상의 프리젠테이션에 대한 그들의 적합성을 변경하는 분석하고 변경하는 단계, 함께 남아야 하는 컴포넌트의 그룹을 위치결정하고, 컴포넌트의 위치 및 컴포넌트의 콘텐츠 관련성에 기초하여 슈퍼-노드들의 계층성을 생성하는 위치결정하고 생성하는 단계, 슈퍼-노드의 각각 내의 엘리먼트들에 대한 순서를 결정하는 단계, 결정된 순서 및 그룹 중 적어도 하나에 기초하여 타겟 레이아웃 내에 엘리먼트를 배치하는 단계, 및 디스플레이 이전에 배치된 엘리먼트를 조절하는 단계를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 컴포넌트는 어토믹(atomic) 컴포넌트, 단일-페이지 컨테이너 컴포넌트 및 다중-페이지 컨테이너 컴포넌트 중 적어도 하나이다.
추가적으로, 본 발명의 바람직한 실시예에 따르면, 분석하고 변경하는 단계는, 템플릿 내의 컴포넌트의 인스턴스를 변경하는 단계, 타겟 레이아웃에 적합하지 않은 컴포넌트를 필터링하는 단계, 컴포넌트를 타겟 레이아웃에 맞춰 적응시키는 단계, 컴포넌트를 타겟 레이아웃에 맞춰 조절하는 단계, 및 컴포넌트의 속성을 분석하여 그들의 사용 적합성을 결정하는 단계 중 적어도 하나를 포함한다.
더욱이, 본 발명의 바람직한 실시예에 따르면, 위치결정하고 생성하는 단계는, 고도로 중첩하는 컴포넌트의 그룹을 위치결정하고, 그룹을 그루핑 기준에 따라 가상 엘리먼트로 교체하는 단계, 템플릿, 애플리케이션, 페이지 또는 컴포넌트 레벨 중 적어도 하나의 힌트에 따라서 컴포넌트의 그룹을 위치결정하고, 그룹을 그루핑 기준에 따라서 가상 엘리먼트로 교체하는 단계, 특정한 배경 이미지 상에 오버레이되는 텍스트 컴포넌트인 컴포넌트를 위치결정하고, 그룹을 그루핑 기준에 따라 가상 엘리먼트로 교체하는 단계, 고도로 중첩하는 컴포넌트의 그룹의 위치결정의 정확도에 대한 확실성 점수를 결정하고, 템플릿, 애플리케이션, 페이지 또는 컴포넌트 레벨 중 적어도 하나의 힌트에 따라서 컴포넌트의 그룹을 위치결정하며, 특정 배경 이미지 상에 오버레이되는 텍스트 컴포넌트인 컴포넌트를 위치결정하는 단계, 및 슈퍼-노드의 계층성을 컴포넌트 및 가상 엘리먼트에 기초하여 생성하는 단계를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 순서를 결정하는 단계는, 슈퍼-노드의 엘리먼트의 시퀀스를 선정의된 순서 기준에 따라서 결정하는 단계, 슈퍼-노드의 엘리먼트의 의미, 콘텐츠, 속성, 편집 이력 및 기하학적 구조의 적어도 하나를 분석하는 단계, 및 선정의된 순서 기준에 따라서 수퍼-노드의 엘리먼트의 시퀀스를 결정하는 것 및 슈퍼-노드의 엘리먼트의 의미, 콘텐츠, 속성, 편집 이력 및 기하학적 구조 중 적어도 하나를 분석하는 것의 정확도에 대한 확실성 점수를 결정하는 단계, 및 선정의된 순서 기준에 따라서 수퍼-노드의 엘리먼트의 시퀀스를 결정하는 것 및 슈퍼-노드의 엘리먼트의 의미, 콘텐츠, 속성, 편집 이력 및 기하학적 구조 중 적어도 하나를 분석하는 것의 정확도에 대한 확실성 점수를 결정함에 의하여 결정되는 시퀀스를 통합하고, 병합된 변경된 순서를 생성하는 단계를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 조절하는 단계는, 자동 추가된 컴포넌트를 삽입하는 단계, 및 타겟 레이아웃에 따라서 조절되는 동적 레이아웃 앵커의 생성, 변경 및 제거 중 적어도 하나를 수행하는 단계를 포함한다.
추가적으로, 본 발명의 바람직한 실시예에 따르면, 슈퍼-노드의 엘리먼트의 시퀀스를 선정의된 순서 기준에 따라서 결정하는 단계는, 슈퍼-노드의 엘리먼트를 행 및 열 중 적어도 하나에 따라서 시퀀싱하는 단계, 슈퍼-노드의 엘리먼트를 행 및 열 중 적어도 하나에 따라서 시퀀싱하고 임의의 행/열 분할 및 병합을 추적하는 단계, 및 슈퍼-노드의 엘리먼트의 수평 및 수직 슬라이싱을 교번하고, 분할의 내부 트리를 생성하며, 엘리먼트에 대한 디스플레이의 시퀀스를 규정하는 단계 중 적어도 하나를 포함한다.
더욱이, 본 발명의 바람직한 실시예에 따르면, 배치하는 단계는, 슈퍼-노드의 엘리먼트에 부착된 힌트를 해석하는 단계, 함께 남아야 하는 컴포넌트의 그룹을 위치결정하는 것 및 슈퍼-노드의 계층성을 컴포넌트의 위치 및 컴포넌트의 콘텐츠 관련성에 기초하여 생성하는 것에 의하여 생성되는 힌트에 따라서 줄바꿈을 생성하는 단계, 폭 및 높이 조절 중 적어도 하나를 슈퍼-노드의 엘리먼트로 적용하는 단계, 및 장식 이미지를 리사이징하는 단계를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 슈퍼-노드의 엘리먼트의 시퀀스를 선정의된 순서 기준에 따라서 결정하는 단계는, 클러스터 부분 순서 세트를 검출하는 단계로서, 슈퍼-노드의 엘리먼트는 슈퍼-노드 내의 엘리먼트 사이의 정규 스페이싱보다 근접성에 있어서 더 근접한, 단계, 서로 근접한 주어진 타입의 슈퍼-노드의 엘리먼트의 특정 조합이 존재할 경우, 의미 관련성 부분 순서 세트를 검출하는 단계, 슈퍼-노드의 엘리먼트 사이에 설정된 패턴이 존재할 경우, 부분 순서 세트를 검출하는 단계, 현존하는 편집과 관련된 그루핑 정의, 현존하는 동적 레이아웃 앵커 정보 및 상이한 컴포넌트 세트에 대한 컴포넌트 템플릿의 재사용 중 적어도 하나에 기초하여 부분 순서 세트를 검출하는 단계, 및 슈퍼-노드의 엘리먼트의 부분 순서 세트를 이전의 편집 세션으로부터 수집된 정보에 기초하여 검출하는 단계를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 자동 추가된 컴포넌트들 및 모바일-관련 컴포넌트들 중 적어도 하나는 타겟 디바이스에 특유한 위젯, 네비게이션 메뉴, 광고 및 홍보 자료 중 적어도 하나를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 방법은 슈퍼-노드의 엘리먼트 사이에 설정된 패턴이 존재하는 경우 부분 순서 세트를 검출하는 단계를 포함하고, 그리고 슈퍼-노드의 엘리먼트의 수평 및 수직 슬라이싱을 교번하는 단계는, 슈퍼-노드의 엘리먼트의 슬라이싱 방향을, 분리자의 개수, 주어진 투영 방향에서 발견된 갭의 사이즈, 슈퍼-노드의 엘리먼트 사이에 설정된 패턴이 존재할 경우 부분 순서 세트를 검출하는 것, 및 양자 모두의 방향에서의 축 투영(axis projection)에 대한 정렬의 품질 중 적어도 하나에 기초하여 결정하는 단계를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 필터링하는 단계는, 타겟 레이아웃 디스플레이에 대해 적합하지 않은 컴포넌트를 제거하는 단계, 및 타겟 레이아웃 디스플레이에 대해 적합하지 않은 컴포넌트를 은닉하는 단계를 포함한다.
추가적으로, 본 발명의 바람직한 실시예에 따르면, 적응시키는 단계는, 컴포넌트의 사이즈 및 폭을 변경하는 단계, 메뉴 컴포넌트를 결합시키는 단계, 콘텐츠 관련 적응(adaptation)을 업데이트하는 단계, 합성 메뉴를 생성하는 단계, 및 문자 기초 그래픽을 변환하는 단계를 포함한다.
더욱이, 본 발명의 바람직한 실시예에 따르면, 조절하는 단계는, 소스 레이아웃과 타겟 레이아웃 사이에 폰트-사이즈를 매핑하는 단계를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 분석하는 단계는, 컴포넌트가 단일 이미지에 포함되는 이미지 컴포넌트인 경우에 컴포넌트를 이어붙이는 단계, 및 장식 이미지를 구별하는 단계를 포함한다.
더 나아가, 본 발명의 바람직한 실시예에 따르면, 리컨버팅(reconverting) 단계는, 페이지가 소스 레이아웃에서 삭제되는 경우 타겟 레이아웃로부터 페이지를 삭제하는 단계, 페이지가 소스 레이아웃에 추가되는 경우 페이지를 타겟 레이아웃에 추가하는 단계, 컴포넌트가 소스 레이아웃에서 삭제되는 경우 타겟 레이아웃으로부터 컴포넌트를 삭제하는 단계, 컴포넌트가 소스 레이아웃에 추가되는 경우 타겟 레이아웃에 컴포넌트를 추가하는 단계, 컴포넌트가 소스 레이아웃에서 변경되는 경우 타겟 레이아웃으로부터 컴포넌트를 변경하는 단계, 및 타겟 레이아웃에 대한 소스 레이아웃으로의 변경과 독립적인 변경을 핸들링하는 단계를 포함한다.
추가적으로, 본 발명의 바람직한 실시예에 따르면, 컴포넌트를 추가하는 단계는, 소스 레이아웃에 추가된 컴포넌트에 최근접한 최근접 선행자 컴포넌트 및 부모 컴포넌트를 검색하는 단계, 및 추가된 컴포넌트를 최근접 선행자 컴포넌트 및 부모 컴포넌트 중 적어도 하나에 따라 타겟 레이아웃에 삽입하는 단계를 포함한다.
본 발명이라고 간주되는 기술 요지는 본 명세서의 결론부에서 특히 지적되고 명확하게 청구된다. 그러나, 그것의 목적, 특징, 및 장점과 함께 조직체(organization) 및 동작의 방법 모두로서의 본 발명은 첨부 도면과 함께 읽을 때에 후속하는 발명을 실시하기 위한 구체적인 내용을 참조함으로써 가장 잘 이해될 수도 있다:
도 1 은 본 발명에 따라서 구성되고 동작하는 플랫폼들 사이에서 시각적 애플리케이션을 변환하는 시스템의 개략적인 예시이다;
도 2 는 본 발명에 따라서 구성되고 동작하는, 최초 레이아웃 컨버터의 엘리먼트들의 개략적인 예시이다;
도 3 은 컴포넌트들이 이동될 때의 동적 레이아웃 앵커 나누기의 개략적인 예시이다;
도 4 는 왜 수직 라인이 모바일 디스플레이에 부적절한지에 대한 개략적인 예시이다;
도 5 는 본 발명에 따라서 구성되고 동작하는, 수퍼-노드 생성기의 엘리먼트들의 개략적인 예시이다;
도 6 은 폰트 사이즈 및 필드 사이즈 변경에 기인한 요구된 텍스트 수퍼-노드 리플로우의 예시이다;
도 7 은 종횡비를 보존하지 않고 리사이징되는 경우 정확하게 보이지 않는 사진이다;
도 8a, 도 8b 및 도 8c 는, 본 발명에 따라서 수행되는, 시각적 애플리케이션과 그들의 대응하는 슈퍼-노드 구조 사이의 매핑의 개략적인 예시이다;
도 9 는 재배치 이전의 컨테이너 내의 컴포넌트들의 개략적인 예시이다;
도 10 은 재배치 이후의 도 9 의 컴포넌트들의 개략적인 예시이다;
도 11 은 본 발명에 따라서 구성되고 동작하는 순서결정기의 엘리먼트들의 개략적인 예시이다;
도 12 는 다수의 가능한 읽기 순서를 가지는 4 개의 텍스트 문단 배열의 개략적인 예시이다;
도 13 은 다수의 가능한 읽기 순서를 가지는, 두 개의 텍스트 문단 및 두 개의 사진을 포함하는 배열의 개략적인 예시이다;
도 14a, 도 14b 및 도 14c 는 본 발명에 따라서 수행되는, 하나의 슈퍼-노드 내의 엘리먼트들의 세트를 엘리먼트 그래프로 변환한 것과 엘리먼트 순서의 개략적인 예시이다;
도 15a, 도 15b 및 도 15c 는, 본 발명에 따라서 구성되고 동작하는, 분할 및 병합 순서결정기의 경우의 일차 방향의 기능성을 보여주는 알고리즘이다;
도 16a, 도 16b, 도 16c, 도 16d, 도 16e, 도 16f, 도 16g 및 도 16h 는 본 발명에 따라서 구성되고 동작하는, 도 15a, 도 15b 및 도 15c 의 분할 및 병합 순서결정기의 경우의 일차 방향의 처리의 개략적인 예시이다;
도 17 은 웹사이트 레이아웃의 일 예이다;
도 18 은 본 발명에 따라서 구성되고 동작하는, 수퍼-노드의 수평 및 수직 분할의 개략적인 예시이다;
도 19 는 본 발명에 따라서 구성되고 동작하는, 이전의 패턴 유사성 분석에 기초한 수직 및 수평 분할을 평가하는 일 예이다;
도 20 은 본 발명에 따라서 구성되고 동작하는, 컴포넌트가 수평 라인에 더 양호하게 정렬되기 때문에 슈퍼-노드의 수직 분할이 얼마나 선호되는지에 대한 개략적인 예시이다;
도 21 은 인터로킹(interlocking) 엘리먼트 구성의 개략적인 예시이다;
도 22 는 스위칭되는 위치를 가지는 컴포넌트 쌍의 개략적인 예시이다;
도 23 은 어떻게 4 개의 사진 컴포넌트가 두 가지 방법으로 쌍으로 분할될 수 있는지에 대한 개략적인 예시이다;
도 24 는 자동 추가된 컴포넌트를 깎아낸 이후에 남아 있는 비-직사각형 디스플레이 형상의 개략적인 예시이다;
도 25 는 본 발명에 따라서 구성되고 동작하는 리컨버터의 엘리먼트들의 개략적인 예시이다;
도 26 은 본 발명에 따라서 구성되고 동작하는 컴포넌트 추가기의 엘리먼트들의 개략적인 예시이다;
도 27 은 본 발명에 따라서 구성되고 동작하는 도 25 의 리컨버터의 기능성의 개략적인 예시이다;
도 28a, 도 28b, 도 28c, 도 28d, 도 28e, 도 28f 및 도 28g 는 본 발명에 따라서 구성되고 동작하는, 웹페이지를 데스크탑 레이아웃 구성으로부터 모바일 레이아웃 구성으로 변환하거나 재변환할 경우의, 컴포넌트의 배치의 개략적인 예시이다;
도 29 는 컴포넌트를 웹페이지의 모바일 버전에 삽입하는 방법의 개략적인 예시이다; 그리고
도 30 은 컴포넌트를 웹페이지의 모바일 버전으로부터 제거하는 것의 개략적인 예시이다.
간결성 및 설명의 명확화를 위하여, 도면에 도시된 엘리먼트들이 반드시 척도에 맞게 그려진 것은 아니라는 것이 이해될 것이다. 예를 들어, 엘리먼트들 중 일부의 치수는 명확화를 위하여 다른 엘리먼트에 상대적으로 과장될 수도 있다. 더 나아가, 적합하다고 여겨지는 경우, 참조 번호는 대응하거나 유사한 엘리먼트를 표시하기 위하여 도면에서 반복될 수도 있다.
도 1 은 본 발명에 따라서 구성되고 동작하는 플랫폼들 사이에서 시각적 애플리케이션을 변환하는 시스템의 개략적인 예시이다;
도 2 는 본 발명에 따라서 구성되고 동작하는, 최초 레이아웃 컨버터의 엘리먼트들의 개략적인 예시이다;
도 3 은 컴포넌트들이 이동될 때의 동적 레이아웃 앵커 나누기의 개략적인 예시이다;
도 4 는 왜 수직 라인이 모바일 디스플레이에 부적절한지에 대한 개략적인 예시이다;
도 5 는 본 발명에 따라서 구성되고 동작하는, 수퍼-노드 생성기의 엘리먼트들의 개략적인 예시이다;
도 6 은 폰트 사이즈 및 필드 사이즈 변경에 기인한 요구된 텍스트 수퍼-노드 리플로우의 예시이다;
도 7 은 종횡비를 보존하지 않고 리사이징되는 경우 정확하게 보이지 않는 사진이다;
도 8a, 도 8b 및 도 8c 는, 본 발명에 따라서 수행되는, 시각적 애플리케이션과 그들의 대응하는 슈퍼-노드 구조 사이의 매핑의 개략적인 예시이다;
도 9 는 재배치 이전의 컨테이너 내의 컴포넌트들의 개략적인 예시이다;
도 10 은 재배치 이후의 도 9 의 컴포넌트들의 개략적인 예시이다;
도 11 은 본 발명에 따라서 구성되고 동작하는 순서결정기의 엘리먼트들의 개략적인 예시이다;
도 12 는 다수의 가능한 읽기 순서를 가지는 4 개의 텍스트 문단 배열의 개략적인 예시이다;
도 13 은 다수의 가능한 읽기 순서를 가지는, 두 개의 텍스트 문단 및 두 개의 사진을 포함하는 배열의 개략적인 예시이다;
도 14a, 도 14b 및 도 14c 는 본 발명에 따라서 수행되는, 하나의 슈퍼-노드 내의 엘리먼트들의 세트를 엘리먼트 그래프로 변환한 것과 엘리먼트 순서의 개략적인 예시이다;
도 15a, 도 15b 및 도 15c 는, 본 발명에 따라서 구성되고 동작하는, 분할 및 병합 순서결정기의 경우의 일차 방향의 기능성을 보여주는 알고리즘이다;
도 16a, 도 16b, 도 16c, 도 16d, 도 16e, 도 16f, 도 16g 및 도 16h 는 본 발명에 따라서 구성되고 동작하는, 도 15a, 도 15b 및 도 15c 의 분할 및 병합 순서결정기의 경우의 일차 방향의 처리의 개략적인 예시이다;
도 17 은 웹사이트 레이아웃의 일 예이다;
도 18 은 본 발명에 따라서 구성되고 동작하는, 수퍼-노드의 수평 및 수직 분할의 개략적인 예시이다;
도 19 는 본 발명에 따라서 구성되고 동작하는, 이전의 패턴 유사성 분석에 기초한 수직 및 수평 분할을 평가하는 일 예이다;
도 20 은 본 발명에 따라서 구성되고 동작하는, 컴포넌트가 수평 라인에 더 양호하게 정렬되기 때문에 슈퍼-노드의 수직 분할이 얼마나 선호되는지에 대한 개략적인 예시이다;
도 21 은 인터로킹(interlocking) 엘리먼트 구성의 개략적인 예시이다;
도 22 는 스위칭되는 위치를 가지는 컴포넌트 쌍의 개략적인 예시이다;
도 23 은 어떻게 4 개의 사진 컴포넌트가 두 가지 방법으로 쌍으로 분할될 수 있는지에 대한 개략적인 예시이다;
도 24 는 자동 추가된 컴포넌트를 깎아낸 이후에 남아 있는 비-직사각형 디스플레이 형상의 개략적인 예시이다;
도 25 는 본 발명에 따라서 구성되고 동작하는 리컨버터의 엘리먼트들의 개략적인 예시이다;
도 26 은 본 발명에 따라서 구성되고 동작하는 컴포넌트 추가기의 엘리먼트들의 개략적인 예시이다;
도 27 은 본 발명에 따라서 구성되고 동작하는 도 25 의 리컨버터의 기능성의 개략적인 예시이다;
도 28a, 도 28b, 도 28c, 도 28d, 도 28e, 도 28f 및 도 28g 는 본 발명에 따라서 구성되고 동작하는, 웹페이지를 데스크탑 레이아웃 구성으로부터 모바일 레이아웃 구성으로 변환하거나 재변환할 경우의, 컴포넌트의 배치의 개략적인 예시이다;
도 29 는 컴포넌트를 웹페이지의 모바일 버전에 삽입하는 방법의 개략적인 예시이다; 그리고
도 30 은 컴포넌트를 웹페이지의 모바일 버전으로부터 제거하는 것의 개략적인 예시이다.
간결성 및 설명의 명확화를 위하여, 도면에 도시된 엘리먼트들이 반드시 척도에 맞게 그려진 것은 아니라는 것이 이해될 것이다. 예를 들어, 엘리먼트들 중 일부의 치수는 명확화를 위하여 다른 엘리먼트에 상대적으로 과장될 수도 있다. 더 나아가, 적합하다고 여겨지는 경우, 참조 번호는 대응하거나 유사한 엘리먼트를 표시하기 위하여 도면에서 반복될 수도 있다.
다음의 상세한 설명에서, 다수의 특정 세부사항들이 본 발명의 완전한 이해를 제공하기 위하여 언급된다. 그러나, 본 발명이 이들 특정 세부사항들 없이 실시될 수도 있다는 것은 이 기술의 통상의 지식을 가진 자들에 의해 이해될 것이다. 다른 사례들에서 주지의 방법, 프로시저들 및 구성요소들은 본 발명의 양태들을 불필요하게 모호하도록 하지 않기 위해서 상세히 설명되고 있지 않다.
출원인은 현존하는 사이트 및 애플리케이션이 통상적으로 고해상도 대화면 디스플레이가 굉장히 일반적인 데스크탑 PC에 대하여 설계된다는 것을 깨달았다. using 더 작은 크기의 디스플레이를 사용하여 이러한 사이트 및 애플리케이션에 액세스하면(예를 들어): 스크롤이 과도하게 필요하다는 것(특히 수평 스크롤); 페이지를 탐색하기 어렵다는 것; 모바일에 적응되지 않은 폰트 사이즈; 모바일 터치 스크린에 맞춰 적응되지 않은 디자인과 디스플레이 컴포넌트 등을 포함하는 여러 문제들이 명백하게 대두된다.
이러한 사이트가 태블릿 및 모바일 폰과 같은 다른 크기의 플랫폼에서 시청될 수도 있기 때문에, 개발자는 이러한 다수의 사용 시나리오를 지원하고 원래의 사이트의 모습과 느낌을 유지하기 위하여 사이트 또는 애플리케이션의 다수의 버전을 생성해야 할 수 있다. 이러한 버전은 시각적 레이아웃, 사용시의 디스플레이 컴포넌트(위젯), 터치 스크린 방향과 그 이상을 포함하는 여러 방식에서 상이할 수도 있다.
또한 출원인은 웹사이트 뷰를 적절한 시청 플랫폼에 맞게 변환하는 현존하는 시스템이 통상적으로 HTML(하이퍼 텍스트 마크업 언어) 및 XML(확장가능 마크업 언어)과 같은 마크업 언어를 사용하여 디자인된 웹사이트를 변환하는데 대한 문제점을 해결하는데 중점을 두어 왔다는 것을 발견했다. 이것은 직접적으로 주어진 마크업 언어로 디자인된 사이트이거나 후속 호스팅을 위한 마크업 언어 파일을 생성하는 코드 생성기를 사용하여 생성된 사이트일 수 있다.
현존하는 시스템은 또한 원래의 웹 사이트를 파싱하고, 그로부터 콘텐츠 정보를 추출하며, 변경된 모바일 사이트를 생성하는 데에 중점을 두어 왔다. 이러한 기술은 통상적으로 광학적 문자 인식(OCR) 및 페이지 분석 시스템으로부터 유래해 왔는데, 이들은 콘텐츠 및 디자인 적응보다는 콘텐츠 추출에 더 중점을 둔다. 따라서, 현존하는 시스템은 통상적으로 콘텐츠를 추출하고 원래의 사이트의 디자인과 모습과 느낌 중 많은 것을 해체하면서 더 작은 디바이스에서 읽을 수 있게 하도록 동작한다.
현존하는 웹 사이트를 분석하는 것이 복잡할 수도 있다는 것이 이해될 것이다. 특히, 사이트의 일부 부분은 동적으로 생성될 수도 있고, 사이트 엘리먼트들 사이의 관련성 도 역시 절차에 맞게 구현될 수도 있다. 따라서, 사이트 작동 도중에 변환이 수행되지 않으면(예를 들어 변환 서버에서 실행되는 무헤드(headless) 브라우저를 통해서) 해당 사이트를 정확하게 이해하는 것은 어렵다. 그러나, 이러한 후자의 방법은 엄청난 오버헤드를 가지며, 특히 주어진 페이지가 한번 변환되고 변환 결과가 모든 사용자에 대하여 재사용되는 대신에, 모든 사용자에 의하여 취출될 때마다 매번 모바일 사이즈에 맞춰 적응되어야 하는 것을 요구할 수도 있다.
현존하는 시스템에 있어서의 다른 이슈는 변환 시에 원래의 웹 사이트에 가해진 변경 및 편집을 지원하는 것이다. 최근 페이지 버전을 동일한 페이지의 이전의 버전과 비교하려 하고 차이가 발생한 곳의 위치를 결정하려고 시도하도록 개발되어 왔다는 것이 이해될 것이다. 이것은 텍스트 유사성, 소스 파일 내의 포지션, 폰트 사용, 등에 기초한 비교 규칙을 사용하여 이루어져 왔다. 이를 위해서, 디자이너는 흔히 모바일 버전과 원래의 데스크탑 버전의 엘리먼트 사이의 묶음(binding)을 수동으로 생성해야 한다.
그러나, 페이지 편집이 변환 프로세스와 별개로 수행되기 때문에, 사이트는 두 개의 버전들 사이에서 크게 변경되었을 수도 있다. 예를 들어, 새로운 개발자(완전히 다른 스타일을 가진 개발자)가 해당 사이트에서 작업을 시작했을 수도 있다. 대안적으로는, 새로운 기술 또는 라이브러리가 사이트 내에 임베딩되었을 수 있다. 현존하는 시스템은 서로 동일해 보이더라도 서로(내부적으로) 매우 상이할 수도 있는 두 개의 사이트 버전을 비교하려고 시도할 수도 있다. 동일한 웹 사이트의 두 개의 버전을 비교하는 것은 체험적으로 이루어질 수 있지만 여전히 많이 변경된 사이트 엘리먼트들을 매칭시킬 수는 없을 것이다.
출원인은 위에서 언급된 제한사항들이 객체 지향 시각적 디자인 시스템을 사용함으로써 극복될 수도 있다는 것을 깨달았다. 이러한 시스템은 대화형 애플리케이션 및 웹사이트를 생성하도록 사용될 수도 있고 주어진 애플리케이션에 대한 다른 디스플레이 플랫폼들 사이의 유사한 레이아웃 정의를 유지하고 생성하기 위하여 사용될 수도 있다. 시각적 디자인 시스템은 또한 사이트의 내부의 일관적 객체 데이터 모델을 제공할 수도 있는데, 모든 사이트 객체에 대해서 정밀하게 규정된 속성이 부여된다. 따라서, 시각적 디자인 시스템은 단일 사이트 또는 컴포넌트들의 단일 세트를 가지는 애플리케이션에 대하여 여러 시각적 레이아웃을 제공할 수도 있다.
또한 출원인은 이러한 시각적 디자인 시스템을 사용하는 것은 컴포넌트 변경 및 컴포넌트 관련성을 검출하기 위하여 사용될 수도 있는 수집된 편집 세션 이력 정보를 포함할 수도 있다는 것을 깨달았다. 따라서, 예를 들어, 디자이너가 객체(예컨대 사진 및 자막)의 쌍을 여러 번 복사하는 경우, 이러한 쌍이 관련될 수도 있다는 것 그리고 쌍을 이루는 원소들이 모바일로 변환될 때 서로 근접성을 유지해야 할 가능성이 높다는 것이 유추될 수도 있다. 따라서 컨테이너 객체 등이 그들의 원래의 객체 계층성 및 관련성을 유지하면서 변환될 수도 있다. 다른 정보는 함께 편집되거나 이동되는 객체, 예전에 그루핑되었던 객체, 앞서 존재한 객체 또는 객체 세트를 복제함으로써 생성되었던 객체 또는 객체 세트, 및 시퀀스 도중 객체의 특정 서브세트에 특정 변경이 적용되었다면 객체 편집의 타이밍을 포함할 수도 있다.
시각적 디자인 시스템은 통상적으로 객체마다 고유 식별자(ID)를 가질 수도 있다. 이러한 ID는 다른 사이트 버전들을 매칭시키고 사이트 변경을 일관적으로 유지하기 위하여 사용될 수도 있다. 더욱이, 시각적 디자인 시스템은 이루어진 레이아웃 변경을 제어하는 디스플레이된 컴포넌트들 사이의 앵커를 포함하는 동적 레이아웃을 채용할 수도 있다. 이러한 앵커는 추가적 그루핑 및 레이아웃 정보를 유도하기 위하여 사용될 수 있고, 또한 레이아웃을 다른 모바일 디스플레이 사이즈에 맞게 미세조정하기 위하여 사용될 수 있다. 변환 서브-시스템은 사실상 디스플레이 도중에 후속 사용을 위하여 자동적으로 추가적 동적 레이아웃 앵커를 생성할 수도 있다.
더욱이, 스마트 폰이 더 많이 보급됨에 따라, 데스크탑에서 이용가능한 것과 유사한 풀 스케일 및 발전된 HTML 브라우징이 역시 모바일 환경에서도 공통적인 것이 되어 왔다. 그러므로 모든 플랫폼에서 이용가능한 진보된 브라우저를 사용하기 위하여 모든 플랫폼(데스크탑, 태블릿 및 모바일)에 대하여 유사한 핸들링을 사용할 수도 있는 시스템이 요구된다.
시각적 애플리케이션이 마이크로소프트 아이앤씨로부터 상업적으로 입수가능한 파워포인트(PowerPoint) 프리젠테이션 프로그램과 같은 독립형 시스템일 수 있고 또는 역시 마이크로소프트 아이앤씨로부터 상업적으로 입수가능한 마이크로소프트 워드 오토쉐이프(Word AutoShape) 편집기 내에 내장될 수도 있다는 것이 이해될 것이다. 이러한 애플리케이션은 통상적으로 어토믹 컴포넌트를 포함하는 페이지 내의 컨테이너의 계층성(단일 페이지 및 다중-페이지)에서 더욱 배열될 수도 있다는 페이지 및 컴포넌트를 포함할 수도 있다. 다중-페이지 컨테이너는 다수의 미니-페이지도 역시 디스플레이할 수도 있다.
또한 페이지는 목록 애플리케이션(예컨대 2014 년 3 월 13 일 출원되고 본 발명의 공통 양수인에서 양도된, 발명의 명칭이 "WEBSITE BUILDING SYSTEM INTEGRATING DATA LISTS WITH DYNAMIC CUSTOMIZATION AND ADAPTATION"인 미국 특허 출원 번호 제 14/207,761 호에서 논의되는 것) 및 제 3 자 애플리케이션을 포함할 수도 있다. 또한 페이지는 종합 페이지 템플릿 또는 컴포넌트 템플릿과 같은 템플릿을 사용할 수도 있다. 특정한 경우는 모든 다른 정규 페이지로 복사된 컴포넌트를 보유하는 애플리케이션 마스터 페이지를 사용하는 것이다. 페이지 또는 페이지의 세트 내의 컴포넌트의 배치는 레이아웃이라고 알려질 수도 있다. 아래의 논의가 직사각형 축-병렬 컴포넌트 및 컨테이너로 이루어지는 레이아웃을 기술한다는 것이 이해될 것이다. 또한 다른 레이아웃은 특히, 회전되거나 비스듬한 객체 및 다수의 영역으로 이루어지는 객체와 같은 객체의 클래스를 포함하는 비-직사각형 컴포넌트 및 컨테이너, 예컨대 비디오 디스플레이 영역 및 비디오 제어 영역을 가질 수도 있는 비디오 플레이어 컴포넌트를 포함할 수도 있다. 이러한 영역은 서로 합쳐지거나, 만나지 않거나, 교차할 수도 있다. 또한 다른 레이아웃은 임의의 기하학적 형상으로 이루어지는 객체를 포함할 수도 있다.
이러한 비-직사각형 다중-영역 객체를 핸들링하는 것은 각각의 비-직사각형 객체에 대한 닫힌 사각형을 사용하거나 확장된 비-직사각형 객체를 처리하도록 기하학적 기초 요소를 적응시킴으로써 수행될 수도 있다는 것이 이해될 것이다. 적응시키는 것은 축으로의 투영, 형상들 사이의 거리; 형상들 사이의 최소의/최대의 방향성 거리(즉 수직 또는 수평 거리), 형상 교차 검출; 형상/라인 교차 검출; 교차 영역 계산 및 형상 영역 계산을 포함할 수도 있다.
각각의 애플리케이션이 다수의 레이아웃 구성, 예를 들어 데스크탑(세로 및 가로) 및 모바일을 가질 수도 있다는 것이 역시 이해될 것이다. 웹사이트 컴포넌트의 몇 가지 속성은 실제 컴포넌트 포함(inclusion)과 같은 레이아웃당 구성 값을 더 가질 수도 있다(예를 들어 특정 컴포넌트는 모바일-전용이거나 데스크탑/태블릿-전용일 수도 있다). 이것은 모든 보유된 형제들이 함께 영향받는 컨테이너 컴포넌트일 수 있다. 다른 속성은 사이즈(h, w), 포지션(x, y), z-순서 정보, 스타일(폰트, 사이즈, 컬러), 컬러, 다형성 컴포넌트 타입(예를 들어 주어진 갤러리는 데스크탑 및 모바일 목록 컴포넌트에 대하여 다른 갤러리 타입을 사용할 수도 있음), 메뉴 / 갤러리 셋팅(예를 들어 열 / 행의 그리드 갤러리 숫자), 제 3 자 애플리케이션 변형물(다른 디스플레이 사이즈를 가지는 다수의 변형예를 가지는 제 3 자 애플리케이션) 및 목록 애플리케이션 뷰 연관성을 포함할 수도 있다- 어떤 뷰와 연관된 주어진 아이템 타입 또는 아이템에 대하여, 다른 목록 컴포넌트에 대하여 다른 뷰가 특정될 수 있다.
각각의 레이아웃 구성이 디폴트 스크린 사이즈 값(픽셀수)을 가질 수도 있다는 것도 역시 이해될 것이다. 실제 스크린 사이즈는 어느 정도 다를 수도 있고, 이러한 차이는 적절한 시각적 디자인 시스템의 동적 레이아웃 지원을 통하여 다뤄질 것이다. 데스크탑 레이아웃 구성이 가장 큰 스크린 폭을 가지기 때문에 메인 레이아웃 구성이 될 수도 있다. 다른 레이아웃 구성은 메인 레이아웃 구성의 쉐도우 레이아웃 구성으로 간주될 수도 있고 메인 레이아웃 구성의 그것과는 다른 스크린 폭 및 높이를 가질 수도 있다. 특히, 쉐도우 레이아웃 구성의 폭은 메인 레이아웃 구성보다 더 작거나(예를 들어 모바일 폰 디스플레이), 비슷하거나(예를 들어 태블릿) 더 클 수도 있다(예를 들어 큰 디스플레이 스크린).
애플리케이션 페이지 또는 웹사이트 페이지를 데스크탑으로부터 모바일 버전으로 변환할 경우, 두 가지 상충하는 목적이 존재한다는 것이 역시 인정될 것인데, 이러한 목적은 축소된 버전에서 페이지 상의 콘텐츠의 판독가능성을 보존해야 한다는 것과 페이지의 시각적 레이아웃을 보존해야 한다는 것이 역시 이해될 것이다. 현존하는 시스템은 거의 디자인을 희생하여 콘텐츠를 추출하는 것에 목적을 둔다(예컨대 발명의 명칭이 "SMALL FORM FACTOR WEB BROWSING"인 미국 특허 번호 7,203,901 호). 이러한 시스템은 텍스트를 관심 영역으로부터 추출하는 공개된 OCR/페이지 분석 알고리즘으로부터 유도되며, 현존하는 시각적 웹 사이트 디자인을 보존하려고 시도하지 않는다(또는 최소의 노력만을 한다).
몇 가지 알고리즘은 전체 페이지 또는 그것의 엘리먼트를 어느 정도까지 축소시킴으로써 디자인 및/또는 레이아웃을 보존하려고 한다. 그러나, 이러한 축소는 매우 제한되는데, 이는 (특히) 텍스트 콘텐츠는 폰트 사이즈가 감소됨에 따라 금새 판독 불가능해지기 때문이다.
이제 본 발명의 일 실시예에 따르는, 플랫폼 사이에서 시각적 애플리케이션을 변환하기 위한 시스템(100)을 예시하는 도 1 을 참조한다.
시스템(100)은 최초 레이아웃 컨버터(200), 레이아웃 리컨버터(300) 및 데이터베이스(50)를 포함할 수도 있다. 최초 레이아웃 컨버터(200)는 페이지 수신기(210) 및 프로세서(250)를 더 포함할 수도 있다. 컨버터(200)는 처음에, 메인 레이아웃 구성을 데스크탑으로부터 모바일용 쉐도우 레이아웃 구성으로 변환할 수도 있다. 리컨버터(300)는 메인 레이아웃 구성 애플리케이션이 편집된 이후에 레이아웃 구성을 재변환할 수도 있다. 모든 애플리케이션 및 구성은 데이터베이스(50)에 저장될 수도 있다.
시스템(100)은 웹사이트 구축 시스템의 일부로서 데스크탑(5A), 스마트 폰(5B) 및 제 3 자 시스템 인터페이스(프로그램-프로그램 통신)(5C)와 같은 다양한 플랫폼을 나타내는 다양한 클라이언트(5)와 인터넷과 같은 적합한 통신 매체를 통하여 통신하는 능력을 가지고 서버(150)에 설치될 수도 있다. 서버(150)는 플랫폼의 각각에 대한 상이한 레이아웃 구성(각각의 단일 플랫폼에 대한 다수의 레이아웃 구성을 포함함)을 저장할 수도 있다. 대안적인 실시예에서, 시스템(100)은 또한 국지적으로 클라이언트에서 실행될 수도 있고, 또는 적합한 API(애플리케이션 프로그래밍 인터페이스)를 통하여 다른 시스템에게 서비스를 제공하도록 적응될 수도 있다.
최초 레이아웃 컨버터(200)가 애플리케이션 내의 각각의 페이지를 충분히 더 좁은 버전으로 변환함으로써 이것이 수직 스크롤 및 최소의(존재한다면) 수평 스크리닝(screening)을 사용하여 시청될 수도 있게 할 수도 있다는 것이 이해될 것이다. 시스템(100)이 적절하게 통합된다면(예를 들어 웹사이트 구축 시스템의 적절한 클라이언트에서 실행되는 중이라면), 시스템(100)은 새로운 레이아웃이 스크린 치수가 변경될 때마다 계산되는 모드에 응답하여 변환을 수행할 수도 있다는 것이 이해될 것이다.
이제 프로세서(250)의 엘리먼트를 예시하는 도 2 를 참조한다. 프로세서(250)는 프리프로세서(201), 슈퍼-노드 생성기(230), 순서결정기(240), 배치기(270) 및 포스트 프로세서(202)를 포함한다. 프리프로세서(201)는 템플릿 핸들러(206), 컴포넌트 필터러(221), 컴포넌트 어댑터(225), 컴포넌트 조절기(227) 및 컴포넌트 분석기(229)를 포함할 수도 있다. 포스트 프로세서(202)는 자동 추가된 컴포넌트 삽입기(282) 및 동적 레이아웃 코디네이터(284)를 포함할 수도 있다. 결과적으로 얻어지는 타겟 레이아웃 구성이 적절한 웹사이트 구축 시스템을 통하여 디스플레이어(290)에 의하여 디스플레이될 수도 있다는 것이 이해될 것이다. 시스템(100)이 적절한 웹사이트 구축 시스템과 완전히 통합되고, 자신의 데이터 구조를 직접적으로 변경한다면, 포스트 프로세서(202)도 역시 데이터-구조 복구 후처리 단계를 수행하여 변경된 웹사이트 구축 시스템 데이터 구조를 디스플레이어(290)에 의하여 디스플레이되도록 적응시킬 수도 있다는 것이 인정될 수도 있다는 것이 인정될 수도 있다.
최초 레이아웃 컨버터(200)가 애플리케이션 또는 웹사이트의 각각의 페이지를 별개로 처리할 수도 있다는 것이 이해될 것이다. 정규 모드에서, 이것은 각각의 페이지를 충분히 더 좁고 통상적으로 더 긴 버전으로 변환하여, 이것이 수직 스크롤 및 최소의 수평 스크리닝을 사용하여 더 좁은 모바일 스크린에서 시청될 수 있게 할 수도 있다. 더 큰 태블릿 및 실외 디스플레이 스크린과 같은 몇 가지 타겟 디바이스는 원래의 데스크탑 스크린보다 더 넓은 스크린을 가질 수도 있고 따라서 폭을 줄이는 것이 더 이상 필요하지 않고 오히려 더 큰 디스플레이 폭에 적응시키는 것이 필요할 수도 있다는 것이 역시 이해될 것이다.
최초 레이아웃 컨버터(200)는 컴포넌트의 3 차원의(스크린의 x, y 좌표 및 디스플레이 z-순서) 세트를 처리할 수도 있고 이것을 수학적 의미에서 정렬된 세트로 변환할 수도 있다. 생성된 총 순서는 정보가 적절한 페이지 상에서 사용자에 의하여 읽어지는 순서를 나타낼 수도 있다. 그러면 최초 레이아웃 컨버터(200)는 정렬된 컴포넌트를 더 좁은 모바일 디스플레이 상에 디스플레이할 수도 있다.
최초 레이아웃 컨버터(200)는 본 명세서에서 아래에 좀 더 상세하게 설명되는 바와 같이 컴포넌트 및 그들의 콘텐츠 관련성의 분석에 기초하여 적절한 페이지를 슈퍼-노드로 분할하면서, 변환될 페이지를 처리할 수도 있다.
프리프로세서(201)는 타겟 구성 레이아웃에 대한 적절한 페이지의 컴포넌트의 적합성을 분석할 수도 있고, 필요할 경우 현존하는 컴포넌트에 변경을 가할 수도 있다. 비록 레이아웃의 다른 조합이 구성될 수도 있지만, 아래의 예는 데스크탑 레이아웃 구성으로부터 모바일 레이아웃 구성으로의 변환에 대하여 논의한다. 템플릿 핸들러(206)는 존재한다면 템플릿 내의 엘리먼트의 변경된 인스턴스를 생성할 수도 있다. 컴포넌트 필터러(221)는 컴포넌트를 모바일 레이아웃 구성에 대한 그들의 적합성에 따라 필터링할 수도 있고, 컴포넌트 어댑터(225)는 컴포넌트를 특히 모바일 레이아웃 구성에 대하여 적응시킬 수도 있으며, 컴포넌트 조절기(227)는 컴포넌트를 특히 모바일 레이아웃 구성에 대하여 조절할 수도 있고, 컴포넌트 분석기(229)는 컴포넌트(그들의 콘텐츠, 기하학적 구조 및 임의의 다른 속성을 포함)를 분석하여 그들의 실제 사용을 결정할 수도 있다. 예를 들어, 사진 컴포넌트는 배경 이미지 또는 콘텐츠 이미지일 수도 있고, 시스템(100)의 다른 부분에 의한 그것의 핸들링에 영향을 준다.
슈퍼-노드 생성기(230)는 함께 남아야 하는 컴포넌트(고도로 중첩되는 컴포넌트와 같은)의 그룹을 위치결정할 수도 있다. 슈퍼-노드 생성기(230)는 더 나아가 슈퍼-노드의 계층성을 현재 페이지 및 컨테이너 계층성 내의 엘리먼트에 기초하여 생성할 수도 있다(가능하게는 컨테이너 계층성을 아래에 더욱 설명되는 바와 같이 변경함). 순서결정기(240)는 슈퍼-노드의 각각의 엘리먼트들에 대한 순서를 결정할 수도 있다. 배치기(270)는 결정된 순서에 기초하여 노드 엘리먼트를 모바일 레이아웃 영역 내에 배치할 수도 있고 포스트 프로세서(202)는 필요에 따라 레이아웃을 임의로 최종 조절할 수도 있다. 자동 추가된 컴포넌트 삽입기(281)는 임의의 자동 추가된 컴포넌트(아래에서 본원에서 더 상세하게 논의되는 바와 같이) 및 순서결정 이후에 삽입되어야 하는 다른 모바일-관련 컴포넌트(예컨대 모바일-특정 메뉴)를 삽입할 수도 있고, 동적 레이아웃 코디네이터(284)는 필요할 경우 배치 이후에 임의의 현존하는 앵커를 변경할 수도 있다. 디스플레이어(290)는 가능하게는 본 명세서에서 아래에 좀 더 상세하게 설명되는 바와 같이 특정한 모바일 플랫폼에 대한 최종 조절을 수행하면서, 새로운 레이아웃을 모바일 플랫폼 상에 디스플레이할 수도 있다.
페이지 수신기(210)는 변환될 데스크탑 레이아웃 구성을 가지는 웹페이지를 수신하고 해당 페이지를 페이지 프리프로세서(201)로 전달할 수도 있다.
본 명세서에서 전술되는 바와 같이, 페이지의 논리적 배치에 대한 추가적 정보를 제공할 수도 있는 컨테이너 계층성이 존재할 수도 있다. 계층성은 정규 보유 관련성 및 병렬 보유 관련성, 예컨대 하나의 다중-페이지 컨테이너 내에 포함되는 다수의 평행 미니 페이지를 포함할 수도 있다. 프리프로세서(201)는 처리하기에 유용할 수도 있는 정보를 수집하기 위하여 처리를 시작할 때에 이러한 계층성 및 임의의 특정한 컨테이너 관련성을 분석할 수도 있다. 프리프로세서(201)는 또한 타겟 애플리케이션의 스크린 사이즈를 결정하고 네비게이션 메뉴(사이트에 범용적이거나 페이지에 특유한)를 추출하고, 이들을 병합하여 하나 이상의 결합된 페이지 메뉴, 예컨대 상단 및 하단 메뉴를 생성할 수도 있다.
적절한 시각적 디자인 시스템이 템플릿의 다중-레벨 및 다수의 상속 관계(inheritance)를 포함하는 템플릿을 지원할 수도 있다는 것이 이해될 것이다. 이러한 템플릿은 단일 페이지, 다수 페이지 또는 페이지의 엘리먼트를 포함할 수도 있다. 템플릿 핸들러(206)는 템플릿의 엘리먼트의 변경된 인스턴스를 생성할 수도 있어서, 템플릿의 인스턴스는 로컬 변경이 적용되는 템플릿 컴포넌트로 이루어질 수도 있다. 템플릿 핸들러(206)는 더 나아가 모바일 레이아웃 구성에 적응시키기 위하여 필요한 특정한 변경을 가할 수도 있다. 예를 들어, 상속된 컴포넌트가 페이지의 상단 또는 하단에 충분히 가깝다면, 이들은 적합한 경우 페이지-특정 머리말 또는 꼬리말에 포함될 수도 있다. 상속된 컴포넌트는 그들을 상속하는 각각의 페이지 내에서 논리적으로 복제(변경과 함께)될 수도 있다.
적절한 시각적 디자인 시스템은 상속된 컴포넌트의 단일 카피를 보유할 수도 있지만, 페이지-당 레이아웃이 상속된 컴포넌트에 적용되게 할 수도 있다(각각의 페이지 내의 모바일에 대한 적응이 상이할 수도 있기 때문에)는 것이 역시 이해될 것이다. 템플릿 핸들러(206)는 주어진 컴포넌트 세트의 원래의 템플릿에 대한 이러한 정보를 사용하여 템플릿에 기초하여 템플릿의 원래의 의도에 더 잘 따르도록 보장하면서 컴포넌트 그룹을 생성할 수도 있다. 적절한 웹사이트의 각각의 페이지에 대해 개별적으로, 프리프로세서(201)는 타겟 스크린의 치수와 같은 파라미터를 고려하면서 엘리먼트들을 리뷰할 수도 있다. 컴포넌트 필터러(221)는 모바일 디스플레이에 적합하지 않은 컴포넌트를 제거하거나 은닉할 수도 있다. 이러한 컴포넌트는, 예를 들어 수직 분리자(separator) 라인(수평 라인이 아님), 어도비(Adobe) 플래시 콘텐츠(일부 모바일 시스템에서는 재생될 수 없음) 또는 장식용 프레임을 포함할 수도 있다. 모바일 디스플레이에 대하여 완전히 부적절한 컴포넌트는 추가적인 처리 이전에 제거된다. 모바일 디스플레이에 대하여 추천되지 않는 컴포넌트에 대하여, 컴포넌트 필터러(221)는 완전히 제거하는 대신에 이들을 은닉하도록 선택할 수도 있다. 이러한 경우에, 웹사이트 디자이너는 본 명세서에서 아래에 더 상세히 설명되는 바와 같이, 이들이 모바일 변경 디스플레이 GUI를 통하여 보여지고 재삽입 가능할 것이기 때문에 이들을 모바일 레이아웃 구성에 재삽입시킬 수 있을 것이다. 일부 컴포넌트들이 모바일 플랫폼에 대하여 적합하지 않거나 추천되지 않을 수도 있지만, 여전히 최초 레이아웃 컨버터(200)에 실질적 정보를 제공한다는 것이 이해될 것이다.
이제 데스크 탑 버전 상의 컴포넌트들 사이의 수직 라인 E를 예시하는 도 4 를 참조한다. 예를 들어, 컴포넌트들 사이의 수직 라인은, 통상적으로 컴포넌트 세트들 사이의 긴(그리고 비어 있는) 스페이싱으로 변환될 것이기 때문에 도시된 바와 같은 모바일 레이아웃 구성에서는 거의 불필요할 것이다. 도시되는 바와 같이, 컴포넌트 A, B, C, D가 더 좁은 모바일 디스플레이에 대하여 수직으로 적층되도록 재배치되는 경우, 수직 라인 E는 디스플레이 공간을 낭비할 것이고 따라서 제거되어야 한다. 그러나, 수직 라인은 4 개의 컴포넌트 A, B, C 및 D가 A+B 및 C+D로 배치되고 A+C 및 B+D로 배치되어서는 안된다는 것을 최초 레이아웃 컨버터(200)에 시그널링하는 데에 있어서 여전히 매우 유용하다. 이러한 정보를 이용하기 위하여, 컴포넌트 필터러(221)는 마크 수직 라인을 "완전히 제거함" 또는 "추후 은닉함"으로서 표시할 수도 있지만, 여전히 필요한 혼합(portioning) 정보를 최초 레이아웃 컨버터(200)로 제공하는 보이지 않는 0-폭 라인을 여전히 추가한다.
컴포넌트 어댑터(225)는 본 명세서에서 아래에 상세히 설명되는 바와 같은 배치기(270)에 의하여 채용할 수도 있는 것과 유사한 폭-축소 수단을 채용할 수도 있다(이러한 수단이 이러한 전-처리 스테이지에서 활성화될 수 있을 때마다). 예를 들어, 컴포넌트 어댑터(225)는 컴포넌트를 "더 가벼운(lighter)" 모바일 버전으로 전환할 수도 있다. 예를 들어, 다수의 미니-페이지를 디스플레이할 수도 있는 갤러리(예를 들어 아코디언 타입)를 한번에 보유된 하나의 미니-페이지를 디스플레이하는 갤러리로 전환한다. 컴포넌트 어댑터(225)는 또한 생성된 애플리케이션의 모바일 버전에서 사용될 주어진 컴포넌트의 특정 "경량" 버전을 더 제공할 수도 있다(모바일 디스플레이에 맞춤된 별개의 버전 또는 다른 뷰를 통하여).
컴포넌트 어댑터(225)는 또한 콘텐츠-관련 적응, 예컨대 문자-기초 그래픽을 벡터-기초 크기 조절가능한 그래픽으로 변환하는 것을 핸들링할 수도 있다. 가끔 디자이너는 텍스트 문자를 장식 또는 분리자, 예를 들어 "///////////", "----------------", "-=-=-=-=-=-="로서 사용한다. 유사한 벡터-기초 형상으로 변환되면, 이들은 텍스트 핸들링이 필요없이 정확하게 리사이징될 수 있다.
컴포넌트 어댑터(225)는 또한 메뉴 컴포넌트를 통합된 모바일-친화적(작은 포맷) 메뉴로 결합시킬 수도 있다. 페이지는 흔히 페이지간 및 페이지내 네비게이션 모두를 위하여 사용되는 다수의 네비게이션 메뉴를 포함한다. 더욱이, 일부 페이지는 다른 방식으로 규정된 다수의 메뉴, 예컨대 페이지 자체에서 규정되는 메뉴, 해당 페이지에서 사용되는 페이지 템플릿으로부터 얻어지는 메뉴(예를 들어 애플리케이션 광역 머리말 및 꼬리말을 포함하는 메뉴) 및 애플리케이션 구성에 기초하여 자동적으로 규정되는 메뉴(예를 들어 상단-레벨 페이지 네비게이션 메뉴)를 포함할 수도 있다. 컴포넌트 어댑터(225)는 더 나아가 합성 메뉴(하나 이상의)를 생성하고, 주어진 생성된 합성 메뉴에 대한 평가된 메뉴의 근접성과 같은 기준에 기초하여 메뉴를 합성 메뉴에 병합시킬 수도 있다(예를 들어 페이지의 상단(200) 픽셀에서 시작되는 모든 메뉴를 단일 상단-레벨 메뉴에 결합시킴). 컴포넌트 어댑터(225)는 삽입 단일의(통합된 및 모바일-친화적) 또는 다수의 변경된 메뉴를 직접적으로 삽입할 수도 있고, 또는 이들을 추후 스테이지에서 포함되도록 "포스팅(post)"할 수도 있다(예를 들어 배치기(270)에 의하여 또는 자동 추가된 컴포넌트 삽입기(281)에 의하여). 이것은(하나 이상의) 메뉴가 정규 컴포넌트 레이아웃의 일부가 아니고 "떠 있는(floating)", 조건에 따라 활성화되는 등의 방식으로 추가되는 경우에 특히 적합하다.
컴포넌트 조절기(227)는 그들의 폭을 감소시키도록 컴포넌트 파라미터를 변경할 수도 있다. 이것의 일 예는 행렬 갤러리 컴포넌트를 1 개 또는 2 개의 열만으로 변경하는 것이다. 컴포넌트 조절기(227)는 또한 큰 장식용 보더를 가지고 규정되는 컴포넌트를 동일한 컴포넌트의 더 간단하고 더 적게 장식적인 버전으로 변경시킬 수도 있다.
컴포넌트 조절기(227)는 사용되는 실제 사이즈를 반영하도록 컴포넌트를 리사이징할 수도 있다. 예를 들어 이것은 텍스트 컴포넌트를 주위 사각형(enclosing rectangle)을 사용하여 실제 텍스트 콘텐츠에 따라서 수축시킬 수도 있다.
컴포넌트 조절기(227)는 또한 내부 컴포넌트를 빡빡하게 감싸는 컨테이너를 "분해(dissolve)"할 수도 있다. 예를 들어, 컨테이너가 더 큰 컨테이너 내의 추가적 컴포넌트가 없이 서브-컨테이너를 빡빡하게 감싼다면, 이것은 내부 컨테이너를 제거하여 두 개의 컨테이너를 하나로 병합시킬 수도 있다. 이러한 방식으로 컨테이너가 처리하는 데에 있어서 투명하기 때문에 계층성 레벨이 보존된다는 것이 이해될 것이다.
가끔 디자이너는 함께 단일 이미지를 시각적으로 형성하는 동일한 이미지의 다수의 섹션을 추가한다. 컴포넌트 조절기(227)는 "이미지 스티칭(image stitching)" 을 채용하고 다수의 이러한 이미지 컴포넌트의 속성 및 콘텐츠를 사용하여 이들이 단일 이미지로 이어져야 하는지를 검출할 수도 있다. 결정은 편집 이력에 기초할 수도 있다- 만일 이미지가 함께 생성되고 및/또는 변경되었는지, 인접한 이미지 에지의 치수의 유사성에 기초하여, 이미지들 사이의 분리에 비교하여 인접한 이미지 에지의 중첩의 길이에 기초하여, 또는 경계에 유사한 컬러/피쳐를 사용하는지에 기초하여(이미지 콘텐츠 분석기를 사용함으로써 검출됨).
컴포넌트 조절기(227)는 폰트 사이즈 매핑을 채용할 수도 있다. 임의의 주어진 애플리케이션 또는 페이지 내의 텍스트는 다양한 큰 폰트 사이즈를 사용할 수도 있다. 이러한 사이즈는 가능하다면 폰트 사이즈 차이를 유지하면서 모바일 디바이스에서 사용될 주어진(더 작은) 범위로 매핑되어야 한다. 일부 폰트 사이즈는 너무 작은 반면에 일부는 너무 클 것이다. 매핑은 선형으로 이루어지지 않으며, 즉 고정된 인자만큼 승산되지 않는다. 그러나, 이것은 폰트 사이즈의 단조함수이다. 컴포넌트 조절기(227)는 사용되는 폰트 사이즈의 범위를 수집하고 이러한 범위를 허용된 모바일 폰트 사이즈의 범위로 매핑할 수도 있다. 컴포넌트 조절기(227)는 시스템적이거나 사용자, 애플리케이션, 페이지 또는 컴포넌트 레벨에 특유한 이러한 매핑을 제공할 수도 있다.
애플리케이션/페이지 특정한 폰트 사이즈 매핑에서, 컴포넌트 조절기(227)는 각각의 주어진 폰트 사이즈의 텍스트(문자)의 양을 카운트하고, 정상(가우시안) 누적 분포 함수를 사용하여 가장 공통되는 문자 사이즈가 허용된 모바일 폰트 사이즈의 범위의 중심에 있는 폰트 사이즈로 매핑되도록 할 수도 있다. 이러한 폰트 사이즈가 모바일 레이아웃 구성에 특유한 폰트 사이즈 리스케일링 조절에 의하여 더욱 변경될 수도 있다는 것이 이해될 것이다.
컴포넌트 구조를 처리할 경우, 장식 이미지 및 콘텐츠 이미지를 구별하는 것이 중요하다는 것이 역시 인정될 것이다(후자는 실제 페이지-특정 데이터의 일부임). 장식 이미지는 그들의 콘텐츠가 애플리케이션의 실제 사용에 중요하지 않기 때문에 더 자유롭게 스케일링되고 클리핑될 수 있다. 더욱이, 콘텐츠 이미지는 아래의 분석 알고리즘에서 다른 컴포넌트와 유사하게 분석되어야 하는 반면에, 장식 이미지는 그럴 필요가 없다. 컴포넌트 분석기(229)는 다음: 특정한 "장식 이미지" 컴포넌트 타입 또는 템플릿 / 객체 / 컴포넌트 타입 / 디자이너 레벨에서의 특정 힌트 중 임의의 것에 기초하여 장식 이미지를 이와 같이 인식할 수도 있다. 컴포넌트 분석기(229)는 또한 이미지가 어떤 영역을 커버한다면, 예를 들어 이미지가 자신이 속한 컨테이너의 전부(또는 거의 전부)를 커버한다면, 해당 이미지가 다수의 컴포넌트에 대한 배경인지 또는 사진이 장식으로서, 예컨대 "라인 내 사진 반복(repeat picture in lines)"로서의 역할을 한다고 인식하는 연산자를 사용하여 해당 이미지가 이것의 컴포넌트의 디스플레이 영역에 맞게 적응되는지 여부를 인식할 수도 있다. 장식 이미지는 수반되는 특정한 이미지의 선택에 기인하여, 그 안에 있는 컴포넌트에 대하여 언제나 "타이트(tight)"한 것은 아니다.
엘리먼트가 본 명세서에서 위에서 설명된 바와 같이 변경되었다면, 슈퍼-노드 생성기(230)가 고도로 중첩하거나 그렇지 않으면 관련되고 함께 처리되어야 하는 컴포넌트의 그룹을 위치결정할 수도 있다. 이것은(예를 들어) 고도로 중첩하는 컴포넌트가 하나의 구도(composition)를 형성할 수도 있기 때문에 필요하고, 그러므로 이들은 리사이징될 때에 동일한 내부 비율을 유지하기 위하여 함께 배치되어야 한다. 모든 그룹이 위치 결정되면, 슈퍼-노드 생성기(230)가 컴포넌트의 결과적인 계층적 셋업을 현재 페이지 및/또는 컨테이너 계층성에 기초하여 슈퍼-노드의 계층성으로 변환하여 다른 구조 레벨에서 다수의 총 순서(total orders)가 존재하게 할 수도 있다는 것이 이해될 것이다. 각각의 개개의 페이지 또는 미니 페이지(단일 페이지 또는 멀티 페이지 컨테이너 내의)에 대하여, 슈퍼-노드는 페이지 슈퍼-노드인 것으로 알려질 수도 있다. 각각의 슈퍼-노드가 개별 엔티티로 간주될 수도 있으며, 규정되면 그 안의 객체가 본 명세서에서 아래에 좀 더 상세하게 설명되는 바와 같이 재배치될 수도 있다는 것이 역시 이해될 것이다.
일부 위치결정된 그룹도 역시 가상 슈퍼-노드로 변환될 수도 있으며(본 명세서에서 아래에 좀 더 상세하게 설명되는 바와 같이), 이것은 이제 본 명세서에서 위에서 설명된 바와 같은 페이지 슈퍼-노드와 유사한 단일 컴포넌트로서 다뤄질 수도 있다는 것이 역시 이해될 것이다. 각각의 가상 슈퍼-노드 타입이 예컨대 특정 방식으로 리스케일되는 것, 제한된 리사이징, 재배치 등과 같이 이것이 생성될 때에 규정된 연관된 모바일 적응 방식을 가질 수도 있다는 것이 이해될 것이다.
이제 수퍼-노드 생성기(230)의 엘리먼트들을 예시하는 도 5 를 참조한다. 슈퍼-노드 생성기(230)는 중첩 그룹 위치결정기(232), 이미지상 텍스트 그룹 위치결정기(234), 선정의된 그룹 위치결정기(236), 노드 생성기(238) 및 그 기능성이 본 명세서에서 도 11 과 관련하여 아래에 설명되는 점수결정기(500)를 포함할 수도 있다.
중첩 그룹 위치결정기(232)는 통상적으로 함께 특정한 디자인을 이룰 수도 있으며 그룹을 새로운 레이아웃에 배치할 때에 그룹 컴포넌트들 사이에 동일한 비율을 유지해야 하는 고도로 중첩하는 컴포넌트의 세트를 결정할 수도 있다. 예를 들어, 로고를 형성하는 이미지 및 텍스트는 로고의 구성을 유지하기 위해서는 새로운 레이아웃 내의 그들의 사이즈 및 포지션과 무관하게 동일한 비율 및 상대적인 위치를 유지해야 한다.
중첩 그룹 위치결정기(232)는 슈퍼-노드 내의 모든 가능한 컴포넌트 쌍에 대하여 반복할 수도 있다. 교차하는 컴포넌트들의 각각의 쌍에 대하여, 중첩 그룹 위치결정기(232)는 대적인 중첩의 양을 두 개의 컴포넌트의 두 개의 주위 사각형들 사이의 더 작은 값과 비교한 중첩의 양으로서 계산할 수도 있다. 계산은 교차 영역에 기초하거나 각각의 축에 대한 상대적인 교차점을 결합함으로써(예를 들어 평균화하는 방식으로) 이루어질 수도 있다. 만일 이러한 상대적인 교차가 주어진 임계를 초과한다면, 중첩 그룹 위치결정기(232)는 해당 컴포넌트 쌍을 중첩하는 것으로 간주할 수도 있다. 반복이 끝나면, 중첩 그룹 위치결정기(232)는 중첩하는 쌍들을 공통 멤버에 따라서 중첩 그룹 내로 병합할 수도 있다. 예를 들어 컴포넌트 쌍 [a, b] 및 [b, c]는 [a, b, c]로 병합될 수도 있다. 각각의 생성된 가상 컴포넌트에 대한 영역은 모든 그루핑된 컴포넌트들의 최소의 주위 사각형의 그것일 수도 있다는 것이 이해될 것이다. 중첩 그룹이 통상적으로 세부 디자인 엘리먼트를 나타낼 수도 있으며 따라서 리사이징될 뿐 재배치되지 않아야 한다는 것이 역시 이해될 것이다. 특히, 이러한 그룹 내의 텍스트 컴포넌트는 컴포넌트 어댑터(225)에 의하여 수행되는 것으로 본 명세서에서 위에서 설명된 바와 같은 폰트 사이즈 매핑을 사용하는 대신에 자신의 원래의 사이즈에 따라야 한다. 따라서 텍스트는 폰트 사이즈 매핑을 완전히 배제하는 방식으로 스케일링되거나 폰트 사이즈 매핑의 효과를 반전시키는 스케일링 인자를 사용해야 한다.
일부 컴포넌트들이 중첩 그룹 정의로부터 생략될 수도 있다는 것이 역시 이해될 것이다. 이것은 특정한 컴포넌트, 예컨대(예를 들어) 수평 라인 및 스크린-폭 컨테이너 및 주어진 한계(예를 들어 25 개의 문자)보다 더 크고 로고 텍스트가 아니라 정규 문단(중첩 그룹으로 표시되어 합성물(composition)로서 리사이징되면 안 되는 것)인 텍스트라고 해석되는 텍스트 사이즈를 포함할 수도 있다.
이미지상 텍스트 그룹 위치결정기(234)는 특정한 배경 이미지 위에 오버레이되는 텍스트 컴포넌트를 그루핑할 수도 있다. 이것은 텍스트 컴포넌트가 배경 이미지 상단에 설정되고 이러한 두 개가 함께 다뤄져야 하는 경우를 검출할 수도 있다. 이미지상 텍스트 그룹 위치결정기(234)는, 텍스트 컴포넌트가 이미지 컴포넌트 내에 완전히 포함되거나 또는 4 개의 모서리 각각에서 텍스트 컴포넌트가 둘러싸는 이미지 컴포넌트에 충분히(주어진 임계치에 의하여) 가까운 현재 슈퍼-노드 내의 텍스트 및 이미지 컴포넌트의 쌍을 찾을 수도 있다.
만일 컴포넌트가 이미지-상-텍스트인 대신에 로고라면, 이미지상 텍스트 그룹 위치결정기(234)는 그 대신에 중첩 그룹 위치결정기(232)에게 이미지상 텍스트 그룹 대신에 중첩 그룹을 생성하도록 명령할 수도 있다. 이것은 후속하는 기준: 텍스트 문자의 양이 주어진 임계치 아래일 것, 장식용이거나 다른 매우 고유한 폰트를 사용하는 것 또는 정규 수평선이 아닌 텍스트 베이스라인(예를 들어 텍스트가 곡선을 따라서 그려지는 경우)을 사용하는 것에 따르는 스코어링(scoring)에 기초하여 수행될 수도 있다.
선정의된 그룹 위치결정기(236)는 템플릿, 애플리케이션, 페이지 또는 컴포넌트 레벨에서의 힌트에 따라서 컴포넌트들을 그루핑할 수도 있다. 이것은 다수의 컴포넌트들이 함께 조작될 수도 있게 특정한 디자인 시스템의 GUI를 사용하여 흔히 수행되는 그루핑의 영구적 버전인 것으로 간주될 수도 있다.
중첩 엘리먼트의 그룹이 위치결정되고 그루핑되면, 노드 생성기(238)가 이들을 본 명세서에서 아래에 좀 더 상세하게 설명되는 바와 같은 가상 슈퍼-노드 내로 병합하고 변환할 수도 있고, 이제 최종 슈퍼-노드(가상 및 페이지 슈퍼-노드를 포함)를 생성할 수도 있다는 것이 이해될 것이다. 잔여 엘리먼트는 서로 관련이 없는 것으로 간주될 수도 있고 따라서 본 명세서에서 아래에 논의되는 바와 같이 순서를 결정하기가 더 쉬울 수도 있다.
이제 슈퍼-노드 생성기(230)가 어떻게 슈퍼-노드들의 계층성을 생성할 수도 있는지의 예를 예시하는 도 8a, 도 8b 및 도 8c 를 참조한다. 본 명세서에서 전술되는 바와 같이, 페이지 및 미니-페이지로부터 생성된 슈퍼-노드들은 페이지 슈퍼-노드라고 간주될 수도 있고 검출된 그룹으로부터 생성된 슈퍼-노드는 가상 슈퍼-노드라고 간주될 수도 있다. 도 8a 의 페이지 P1 에서, 3 개의 텍스트 엘리먼트를 포함하는 페이지(또는 미니 페이지)는 3 개의 엘리먼트가 있는 페이지 슈퍼-노드(PSN1)라고 간주될 수도 있다. 도 8b 에서, 페이지 P2 는 하나의 텍스트 엘리먼트 및 텍스트 엘리먼트 및 그림 엘리먼트를 가지는 가상 슈퍼-노드(VSN1)가 있는 페이지 슈퍼-노드(PSN2) 라고 간주될 수도 있다. 만일 페이지 P1 및 P2가 페이지 P3 내에 포함되는 미니-페이지라면, 결과적인 노드 구조는 각각 도 8c 에 도시된 바와 같은 엘리먼트를 가지는 2 개의 페이지 슈퍼-노드(PSN1 및 PSN2)를 가지는 페이지 슈퍼-노드(PSN3)일 수도 있다.
노드 생성기(238)가 타이트하게 둘러싸인 컨테이너를 컨테이너 B 내에 존재하는 컨테이너 A라고 정의할 수도 있으며, A 및 B는 매우 유사한 사이즈를 가진다는 것(즉 A 및 B 사이의 모든 모서리에 작은 여유만 있고 A는 B 안의 컴포넌트일 뿐이라는 것)이 역시 이해될 것이다. 노드 생성기(238)는 또한 다수의 컨테이너 내의 컴포넌트들의 의미 분석에 기초하여 컨테이너 재배치를 수행할 수도 있다. 예를 들어, 이제 참조되는 도 9 에 도시되는 바와 같이, 텍스트 컴포넌트 T1, T2 및 T3는 컨테이너 C1 내에 포함되고 사진 컴포넌트 P1, P2 및 P3 는 컨테이너 C2 내에 포함된다. 노드 생성기(238)는 의미 분석을 수행하여 아래에 더욱 설명되는 바와 같이 그들의 타입, 근접성 및 다른 컴포넌트에 대한 관련성에 기초하여 관련된 텍스트 및 사진 컴포넌트 쌍을 인식할 수도 있다. 이러한 분석에 기초하여, 노드 생성기(238)는 T1 및 P1이 관련된 쌍을 형성하고 T2-P2 및 T3-P3도 그러하며, 따라서 이러한 6 개의 컴포넌트(T1, T2, T3, P1, P2, P3)를 컨테이너 C1 및 C2로부터 제거하고, 이제 참조되는 도 10 에 도시되는 바와 같이 이들 사이의 관련성에 대한 정보를 보존하면서 이들을 배치할 수도 있다.
더욱이, 노드 생성기(238)는 주어진 컨테이너를 실질적으로 중첩하는(예를 들어 75% 이상의 영역 중첩) 컴포넌트를 슈퍼-노드 생성의 목적을 위하여 특정한 컨테이너의 멤버로서 분류하여, 슈퍼-노드 계층성이 시각적 배치를 더 잘 반영하게 할 수도 있다. 이것은, 주어진 컨테이너 내에 논리적으로 포함되지 않는 컴포넌트들이 여전히 해당 컨테이너에 중첩할 수도 있게 하는 시각적 디자인 시스템에 적합하다.
슈퍼-노드 구조가 규정되면, 순서결정기(240)는 컴포넌트 및 보유된 페이지 슈퍼-노드 및 각각의 슈퍼-노드 내의 가상 슈퍼-노드의 세트에 대한 순서를 생성할 수도 있다(별개로). 이러한 기본적인 순서는 본 명세서에서 아래에 좀 더 상세하게 설명되는 바와 같은 부분 순서 세트 위치결정기의 발견의 결과로서 더욱 변경될 수도 있다는 것이 역시 이해될 것이다. 이제 순서결정기(240)의 엘리먼트를 예시하는 도 11 을 참조한다. 순서결정기(240)는 기본 순서결정기(247), 부분 순서 세트(Partial Order Set; POS) 위치결정기(250) 및 순서 통합기(245)를 포함할 수도 있다. 기본 순서결정기(247)는 일차 방향 순서결정기(241), 일차 방향 분할 및 병합 순서결정기(242), 및 H/V 슬라이서(243)를 더 포함할 수도 있고, H/V 슬라이서(243)는 본 명세서에서 아래에 좀 더 상세하게 설명되는 바와 같은 엘리먼트 분할기(244)를 더 포함할 수도 있다.
POS 위치결정기(250)는 클러스터 POS 위치결정기(251), 의미 관련성 POS 위치결정기(252), 패턴 POS 위치결정기(253), 선정의된 POS 위치결정기(254) 및 편집 세션 정보(Editing Session Information; ESI) 기초 POS 위치결정기(255)를 포함할 수도 있다. POS 위치결정기(250)가 컴포넌트의 의미, 콘텐츠 및 기하학적 구조를 분석할 수도 있다는 것이 이해될 것이다.
순서결정기(240)가 인간인 독자가 페이지 상의(또는 특정한 슈퍼-노드 내의) 엘리먼트를 볼 수도 있는 순서를 에뮬레이션하도록 시도할 수도 있다는 것이 이해될 것이다. 페이지가 2-차원의 엔티티(또는 심지어 z-순서가 포함된 3-차원의 엔티티)이기 때문에, 이러한 순서는 인간인 독자에 대해서도 양호하게 규정되지 않을 수도 있다는 것이 역시 이해될 것이다.
이제 정방형 배치인 4 개의 텍스트 문단의 배열을 보여주는 도 12 를 참조한다. 문단이 영어라고 가정하면(위에서 아래로 그리고 좌에서 우로 읽힘), 읽기 순서가 A1, A2, B1, B2가 되어야 하는지 A1, B1, A2, B2가 되어야 하는지가 명확하지 않다. 양자 모두의 순서가 올바른 것으로 간주될 수도 있다. 더욱이 엘리먼트들이 이제 참조되는 도 13 에 도시되는 바와 같이 텍스트 및 사진라면, 관련된 텍스트 및 사진 엘리먼트들이 어떤 것인지가 명확하지 않다.
일차 방향 순서결정기(241)는 일차 방향(즉 행부터 정렬하거나 열부터 정렬하거나)을 선정의할 수도 있고, 이제 2 차원의 페이지 내의 컴포넌트들을 일차 방향에 기초하여 그리고 이차 방향에 기초하여 정렬하려고 시도할 수도 있다. 예를 들어, 행-먼저 모드에서 동작하는 일차 방향 순서결정기(241)는, A 및 B가 적합한 Y 중첩(예를 들어 둘 중 더 작은 높이의 적어도 25%)을 가지고 엘리먼트 A가 좌측에 있거나(즉 행 내의 순서에서) 또는 만일 A 및 B가 충분한 Y-중첩을 가지지 않고 A가 더 높다면(즉 행들 사이의 순서에서), 엘리먼트 A가 엘리먼트 B에 선행하도록 엘리먼트들을 슈퍼-노드 내에 정렬할 수도 있다.
일차 방향 분할 및 병합 순서결정기(242)(본 명세서에서 PDSM(Primary direction with split and merge) 순서결정기(242)는 또한 일차 방향을 선정의할 수도 있고 역시 임의의 행/열 분할 및 병합을 추적하려고 시도할 수도 있다. 이것은 행과 반대로 열에 대하여 더 일반적이라고 간주될 수도 있다. 이제 슈퍼-노드 내의 컴포넌트(1-10)를 예시하는 도 14a, 도 14b 및 도 14c 를 참조한다. 컴포넌트들이 노드 내의 생성된 열 그래프 내의 그들의 순서에 따라서 순서결정될 수도 있다는 것이 이해될 것이다. PDSM 순서결정기(242)는 본질적으로 사각형의 세트(도 14a 에 도시된 바와 같은)를 열의 그래프(도 14b 에 도시된 바와 같이 병합, 분할 또는 연속될 수도 있음)로 변환할 수도 있으며, 그러면 이것이 컴포넌트의 순서(도 14c 에 도시된 바와 같이)를 생성하기 위하여 사용된다. 사각형은 교차할 수도 있다.
이제 열 그래프 및 결과적인 순서를 정의하기 위하여 PDSM 순서결정기(242)에 의하여 수행되는 단계들을 예시하는 도 15a, 도 15b 및 도 15c 및 도 16a, 16B, 16C, 16D, 16E, 16F 및 16G를 참조한다. 도 16a 는 처리될 필요가 있는 엘리먼트 C의 세트를 예시한다. PDSM 순서결정기(242)는 세트 내의 엘리먼트들 사이의 2-엘리먼트 관련성을 규정할 수도 있고(단계 400) 이제 정렬될 엘리먼트들(세트 C)을 도시되는 바와 같이 더미 머리말 엘리먼트 A 및 더미 꼬리말 엘리먼트 B 사이에 "샌드위치"시킬 수도 있다(단계 410). 그러면 PDSM 순서결정기(242)는 두 개의 새로운 세트인 생성된 열(그들의 현재 상태에서)(단계 420 및 430) 및 그들의 엘리먼트의 세트 X 및 열 안으로 처리되어 들어가야 하는 엘리먼트의 세트 Y(단계 440 및 450)를 생성할 수도 있다. 그러면 PDSM 순서결정기(242)는 세트 Y의 엘리먼트를 그들의 y-순서에 따라서 위에서 아래로 스캔하고(단계 470) 세트 Y의 각각의 엘리먼트 Q에 대하여 Q를 제어하는 엘리먼트(X 내의 모든 열 내의)의 서브세트 R을 선택할 수도 있다. 이제 어떻게 엘리먼트 A, E 및 F가 모두 Q를 제어하는지를 예시하는 도 16b 를 참조한다. 그러면 PDSM 순서결정기(242)는 임의의 사본을 세트 R로부터 제거할 수도 있다. 도 16b 에서 알 수 있는 바와 같이, A, E 및 F가 모두 Q를 제어하는 것과 함께, A는 E를 제어하고 E는 F를 제어한다. 이러한 시나리오에서 PDSM 순서결정기(242)에 의하여 요구되는 유일한 연결은 Q와 F 사이의 연결이다(마지막 제어 엘리먼트). R이 비어있다면, 이것은 연결이 없는 고아 열(orphan column)이라고 간주될 수도 있고 따라서 새로운 열이 이제 참조되는 도 16c 에 도시되는 바와 같이 엘리먼트 Q를 가진 X에서 오픈된다는 것이 이해될 것이다. R이 두 개 이상의 엘리먼트를 가진다면, PDSM 순서결정기(242)는 엘리먼트 Q를 엘리먼트 C1…Cn의 각각을 포함하는 열에 연결시켜서, 각각에 대한 열 연결(열의 끝에 연결된다면) 또는 열 분할(열 중간에 연결된다면)을 생성할 수도 있다는 것이 역시 이해될 것이다. 만일 이러한 열이 두 개 이상 존재한다면, PDSM 순서결정기(242)는 열들을 이제 참조되는 도 16d 에 도시되는 바와 같이 병합할 수도 있다. 도 16d 에 도시되는 바와 같이, PDSM 순서결정기(242)는 열 G 및 H를 엘리먼트 Q에 의하여 연결되는 단일 열로 병합할 수도 있다. 이제 열 G 내의 마지막 엘리먼트가 아닌 엘리먼트로부터 연속되는 열 G를 보여주는 도 16e 를 참조한다. 이러한 시나리오에서 엘리먼트 Q는 열 G에서 분할을 생성하여 F 및 Q에 의하여 연속되는 2 개의 열을 생성한다.
열이 주어진 포인트에서 분할할 때, 분할된 세트는 좌에서 우로 정렬된다는 것, 즉 분할된 열에 연속하는 다수의 열이 그들의 좌측 에지의 x-좌표에 따라서 그들에 대하여 규정된 순서를 가진다는 것이 이해될 것이다. 동일한 사항이 열 병합에도 적용된다. PDSM 순서결정기(242)가 이제 참조되는 도 16f 에 도시되는 바와 같은 결합된 분할 및 병합 상황을 가질 수도 있다는 것이 역시 이해될 것이다. 도시되는 바와 같이, 엘리먼트 Q는 엘리먼트 G 및 H를 포함하는 2 개의 열에 대한 분할을 생성할 수도 있다. PDSM 순서결정기(242)는 분할된 것들을 엘리먼트 Q에 의하여 연속되는 단일 열로 즉시 병합할 수도 있다.
그러므로, PDSM 순서결정기(242)는 엘리먼트를 Y로부터 X로 전달하고, 기하학적 기준에 기초하여 X(또는 새로운 열을 생성하는 것도 가능함) 내의 하나 이상의 현존하는 열로 연결한다. 이러한 스캐닝 프로세스가 시작, 분할, 병합 또는 종결될 수도 있는 X 내의 일련의 열을 생성할 수도 있다는 것이 이해될 것이다. 프로세스는 더미 꼬리말 엘리먼트 B에 도달하면 끝난다. 그러면 PDSM 순서결정기(242)는 그래프(세트 X 내의 열에 따라서 정의됨)를 스캔하여 결과적인 순서를 계산할 수도 있다. 그러면 PDSM 순서결정기(242)는 이제 참조되는 도 16g 에 도시되는 바와 같이 그래프 내의 순서에 따라서 엘리먼트들을 위에서 아래로 그리고 좌에서 우로 정렬할 수도 있다.
고아 열의 경우에, PDSM 순서결정기(242)는 이제 참조되는 도 16h 에 도시되는 바와 같이 X 순서에 따라서 이들을 정렬할 수도 있다는 것이 역시 이해될 것이다. 엘리먼트 쌍 a-c 및 b-d가 연결되기에 충분히 가깝다면, 이들은 완성된 열을 형성할 수도 있고 이들 사이의 순서는 a-c-b-d이고 a-b-c-d가 아닐 수도 있다. 이들이 충분히 가깝지 않기 때문에, 이들은 연결되지 않아서 엘리먼트 c 및 d가 고아 열이 되게 하고, 특정된 번호 순서에 대한 순서는 본 명세서에서 위에서 설명된 바와 같이 변경된다.
PDSM 순서결정기(242)의 기능성은 우측에서 좌측으로(좌측에서 우측이 아니라) 배치된 콘텐츠를 가지는 슈퍼-노드에 대해서 적합하게 변경될 수도 있다는 것이 이해될 것이다.
H/V 슬라이서(243)는 슈퍼-노드 내의 엘리먼트의 다른 수평 및 수직 슬라이싱을 사용하여 이러한 분할의 내부 트리를 생성하고, 이를 통하여 엘리먼트들 사이의 디스플레이 순서를 규정할 수도 있다. 이러한 내부 트리는 주어진 슈퍼-노드에 특유하며 일반적인 슈퍼-노드 레벨 트리와 관련되지 않는다는 것이 이해될 것이다. H/V 슬라이서(243)는, 이제 참조되는 도 17 에 도시되는 바와 같은 예시 페이지와 같은 신문 레이아웃에서 전통적으로 나타나는, 수평 및 수직 섹션으로부터 구축되는 "쵸콜릿 테이블" 스타일 사이트에 대해 최적으로 적응된다는 것이 이해될 것이다. H/V 슬라이서(243)는 단일 슈퍼-노드의 엘리먼트 세트를 취하고 노드(각각의 슈퍼-노드가 별개의 이러한 내부 트리를 포함할 수도 있기 때문에 더 고레벨 슈퍼-노드와는 상이함)의 내부 트리를 생성할 수도 있다. 노드는 후속하는 타입일 수도 있다:
V-노드( 수직 배치된 노드) - 위에서 아래로 배치된 서브-노드 / 엘리먼트의 세트.
H-노드( 수평으로 배치된 노드) - 좌에서 우로 배치되는 서브-노드 / 엘리먼트의 세트(우에서 좌로 배치하는 것은 본 명세서에서 아래에 후술됨).
리프 노드(Leaf node) - 내부 트리의 최종 엘리먼트를 나타내는 노드 - 컴포넌트 또는 포함된 슈퍼-노드. 리프 노드는 여전히 할당된 폭 내에 맞춤되는 다수의 컴포넌트를 포함할 수도 있다.
UR-노드( 미결정 노드, UnResolved nodes) - 아직 배치되지 않은 다수의 엘리먼트를 포함하는 노드. 이것은 V/H/리프 노드로 변환되기 이전의 임의의 노드의 초기 상태이다.
각각의 노드는 엘리먼트 참조(reference) 및 하지의 엘리먼트들의 좌표 및 사이즈, 및 노드의 엘리먼트들에 대한 완전한 주위 사각형의 세트를 포함할 수도 있다. 단일 슈퍼-노드 내의 노드(위의 4 개의 타입)의 전체 콜렉션은 내부 트리라고 알려질 수도 있다. H/V 슬라이서(243)가 우측-좌측(R2L) 자료를 포함하거나 R2L 레이아웃을 가지는 것으로 특정되거나 검출되는 슈퍼-노드에 대한 프로시저를 조절할 수도 있다는 것이 이해될 것이다.
H/V 슬라이서(243)는 최초의 호출 시에, 단일 UR-노드가 있는 내부 트리를 생성하고 모든 엘리먼트에 대한 참조를 그 안의 수퍼-노드 내에 배치할 수도 있다. H/V 슬라이서(243)는 해당 노드 내의 모든 엘리먼트를 취함으로써 UR 노드를 처리할 수도 있다. 엘리먼트의 주위 사각형이 허용된 폭에 맞춤된다면, H/V 슬라이서(243)는 해당 노드를 리프 노드로 변환할 수도 있다. H/V 슬라이서(243)는 또한 UR-노드의 엘리먼트의 특정 분할(수평 또는 수직)을 서브-그룹으로 제안할 수도 있는 엘리먼트 분할기(244)를 호출할 수도 있다.
그러면 H/V 슬라이서(243)는 UR-노드를 적합하게 H-노드 또는 V-노드로 변환할 수도 있다. 엘리먼트 분할기(244)에 의하여 반환되는 서브-그룹의 각각에 대하여, H/V 슬라이서(243)는 서브-그룹 내의 엘리먼트에 대한 주위 사각형 R을 계산할 수도 있다는 것이 이해될 것이다. 만일 R의 폭이 허용된 폭에 맞는다면, 이것은 서브-그룹으로부터의 노드 N의 후손인 리프 노드를 생성할 수도 있다. 그렇지 않으면, 서브-그룹이 두 개 이상의 컴포넌트를 가진다면, H/V 슬라이서(243)는 서브-그룹으로부터의 노드 N의 후손인 UR-노드를 생성할 수도 있고, 이것을 이에 상응하여 본 명세서에서 위에서 설명된 바와 같이 처리할 수도 있다(즉 H/V 슬라이서(243)의 재귀적 적용을 통하여). 만일 R의 폭이 허용된 폭에 맞지 않으면, H/V 슬라이서(243)는 포함하는 단일 엘리먼트 서브-그룹으로부터의 노드 N의 후손인 리프 노드를 생성할 수도 있다. 그러면 H/V 슬라이서(243)는 본 명세서에서 위에서 설명된 바와 같은 폭 축소, 예컨대 리사이징, 텍스트 리플로우잉(re-flowing) 등을 적용할 수도 있다. .
그러면 H/V 슬라이서(243)는 재귀적으로(깊이 제 1 스캐닝을 사용) 생성된 내부 트리를 스캔하고 스캐닝 순서에 따라서 컴포넌트(예컨대 리프 노드)를 방출할 수도 있다. H/V 슬라이서(243)는 각각의 H/V-노드를 이것의 자연적 순서에 따라서(예를 들어 V-노드에 대해서 상하로) 스캔할 수도 있다. 엘리먼트들의 기본적인 순서가 생성되었기 때문에, 해당 스테이지에서 이러한 슈퍼-노드에 대한 생성된 내부 트리는 더 이상 필요하지 않다는 것이 이해될 것이다.
본 명세서에서 전술되는 바와 같이, 엘리먼트 분할기(244)는 엘리먼트의 그룹에 대한 분할(division)을 계산할 수도 있다. 이것은 장식용 보더를 무시하면서 각각의 엘리먼트에 대한 주위 사각형을 계산할 수도 있다. 그러면 엘리먼트 분할기(244)는 이러한 사각형을 X 및 Y 축 모두로 투영할 수도 있다.
그러면 엘리먼트 분할기(244)는 축 투영(axis projection)의 각각의 세트를, 그 안으로 투영되는 상이한 개수의 컴포넌트들이 있는 세그먼트로 분할할 수도 있다. 그 위로 투영되는 컴포넌트가 없는 세그먼트는 주어진 투영 방향에서의 갭을 나타낸다. 엘리먼트 분할기(244)는 올바른 분할 방향을 결정하는 것을 도울(예를 들어 프로세스로의 디자이너 힌트로서 사용할) 특정한(디스플레이가능하지 않을 수 있음) 분리자 라인 컴포넌트를 제공할 수도 있다는 것이 이해될 것이다. 또한 이러한 컴포넌트는 그들이(투영된 사각형 카운팅에 대하여) 하나 이상의 컴포넌트로서 카운트되도록 지정된 "가중치"를 가질 수도 있다.
만일 갭이 양자 모두의 방향에서 발견된다면, 엘리먼트 분할기(244)는 갭 세그먼트에 직교하는 분리자에 기초하여 엘리먼트들의 수평 및 수직 분할을 생성할 수도 있다. 예를 들어, 이제 참조되는 도 18 에서 예시되는 바와 같이, 케이스 A는 단일 분리자를 사용하는 수평 분할(열로의)이고, 케이스 B는 두 개의 분리자를 사용하는 수직 분할(행으로의)이다.
엘리먼트 분할기(244)는 분리자의 최대 개수 및 발견되는 갭의 총 최대 사이즈 및 유사한 엘리먼트들이 분할에 의하여 별개의 서브-그룹으로 나누어지는 경우들의 최소 개수의 가중된 평균을 사용하여 두 개의 분할 방향의 각각에 대한 분할 품질 등급(Division Quality Rating; DQR)을 계산할 수도 있다. 이러한 정보는 후손 슈퍼-노드들 사이의 유사성 관련성을 정의하는, 슈퍼-노드 생성 스테이지에서의 패턴 POS 위치결정기(253)(본 명세서에서 아래에 좀 더 상세하게 설명되는 바와 같은)로부터 얻어질 수도 있다. 이제 참조되는 도 19 에 도시되는 바와 같이, 수직 분할(행으로)은 서비스 / 투영 / 클라이언트 박스(A, B 및 C)를 함께 유지하는 데에 있어서 더 바람직할 수도 있다.
엘리먼트 분할기(244)는 또한 방향 컴포넌트 중 어느 것이 더 양호하게 정렬되는지를 고려할 수도 있다. 예를 들어 이제 참조되는 도 20 에 도시되는 바와 같이, 시나리오 A에서 수평 분할(즉, 열로)을 수행하는 경우에 더 큰 갭이 존재함에도 불구하고 분할은 수직으로 이루어 져야 한다(즉 컴포넌트들은 행으로 배치되고 정렬된다). 이것은 정렬 라인이 시나리오 B에 추가되는 경우 더 잘 관찰될 수 있다.
엘리먼트 분할기(244)는 또한 수평 분할(폭을 감소시킴) 대 수직 분할(그렇지 않음)에 일정한 선호 인자(preference factor)를 추가할 수도 있다. 그러면 엘리먼트 분할기(244)는 더 높은 DQR을 가지는 분할을 반환할 수도 있다.
만일 갭이 하나의 방향에만 발견된다면, 엘리먼트 분할기(244)는 이러한 방향에서 분할을 반환할 수도 있다. 만일 갭이 발견되지 않는다면, 엘리먼트를 인터로킹하는 경우가 존재할 수도 있다. 이러한 경우에, 엘리먼트 분할기(244)는 엘리먼트들 중 하나와 교차하는 분리자를 생성할 수도 있다. 예를 들어, 이제 참조되는 도 21 에 도시되는 바와 같이, 엘리먼트들은 오직 엘리먼트 B와 교차할 수도 있는 수직 분리자 라인 A를 사용하여 분할된다. R로 표시된 모든 엘리먼트는 분할의 우측(엘리먼트 B를 포함)과 연관될 수도 있고, 엘리먼트 L은 분할의 좌측과 연관될 수도 있다.
이러한 시나리오에서, 엘리먼트 분할기(244)는 교차된 엘리먼트들의; 최소 개수를 가지는 투영 세그먼트를 발견할 수도 있다(X 및 Y 축들 모두의 투영 세그먼트로부터)는 것이 이해될 것이다. 만일 이러한 세그먼트가 오직 하나만 존재한다면, 엘리먼트 분할기(244)는 이에 기초하여 분할을 규정할 수도 있다. 동일한 최소 개수의 교차된 엘리먼트를 가지는 두 개 이상의 이러한 세그먼트(양 방향에서)가 존재한다면, 엘리먼트 분할기(244)는 최소 개수의 교차된 엘리먼트들을 가지는 세그먼트에 기초하여 단일-분리자 분할의 세트를 생성할 수도 있다.
이러한 분할의 각각에 대하여, 이제 엘리먼트 분할기(244)는 교차된 엘리먼트가 분리자의 두 측면들 중 하나에 더 분명하게 속하게 하도록, 가중된 평균, 정규 DQR 계산의 기준(본 명세서에서 전술되는 바와 같음), 교차된 엘리먼트의 최소의 영역 및 절단의 명확함(definitiveness), 즉 교차하는 분리자의 일 측면 상의 교차된 엘리먼트 영역의 최소의 퍼센티지를 가지는 것에 기초하여 DQR을 계산할 수도 있다. 또는, 엘리먼트 분할기(244)는 최고 DQR을 가지는 분할을 사용할 수도 있다.
그러면, 엘리먼트들 분리자(244)는 각각의 교차된 엘리먼트가 교차된 엘리먼트의 더 큰 영역을 포함하는 분리자의 측면에 부착되는, 선택된 분할을 반환할 수도 있다.
대안적인 실시예에서, 엘리먼트 분할기(244)는 동일한 개수의 교차된 엘리먼트를 가지는 다수의 투영 세그먼트에 기초하여 다수의 분리자를 생성하려고 시도하고, 이러한 교차된 엘리먼트를 다수 포함하는 분할을 평가할 수도 있다.
엘리먼트 분할기(244)가 다른 DQR 계산을 가능한 분할의 각각에 대하여 재귀적으로 호출할 수도 있고 잠재적 분할의 각각이 시도된 이후에 생성되는 분할의 DQR 값을 검사할 수도 있다는 것이 이해될 것이다. 이러한 방식으로, 엘리먼트 분할기(244)는 추가 분할이 성공적일 수 있게 교차할 최선의 단일 엘리먼트를 찾을 수도 있다는 것이 역시 이해될 것이다.
기본 순서결정기(247)와 같이, POS 위치결정기(250)가 어떤 방식으로 관련되고 엘리먼트들이 모바일 디바이스 디스플레이 용으로 다시 순서결정될 경우 가능하게는 함께 남아야 하는 컴포넌트들의 세트를 검출할 수도 있다는 것이 이해될 것이다. 예를 들어, 컴포넌트는 텍스트 헤딩 및 매칭하는 텍스트 문단일 수도 있다.
클러스터 POS 위치결정기(251)는 컴포넌트(임의의 타입의)가 특정 슈퍼-노드 내의 컴포넌트들 사이의 정규 스페이싱과 비교할 때 서로 매우 근접한 경우, 클러스터 부분 순서 세트를 검출할 수도 있다. 클러스터 POS 위치결정기(251)는 슈퍼-노드 내의 컴포넌트들 사이의 평균 거리를 계산하고, 그 거리가 계산된 평균 거리의 주어진 일부(a given fraction of the calculated average distance)인 컴포넌트 쌍을 검색하면서 슈퍼-노드내의 슈퍼-노드에 대해서 반복할 수도 있다. 그러면 클러스터 POS 위치결정기(251)는, 각각의 이러한 세트 내의 두 개의 가장 가까운 컴포넌트들 사이의 최대의 주어진 거리(평균 거리의 일부로서 특정됨)를 강제하면서 이러한 컴포넌트 쌍들을 세트로 결합할 수도 있다. 또한 클러스터 POS 위치결정기(251)는 평균 거리 값을 왜곡시킬 수도 있는 주어진 개수의 이상치를 고려하기 위하여 평균 계산 대신에 메디안 계산(median calculation)을 사용할 수도 있다. 대안적인 실시예에서, 클러스터 POS 위치결정기(251)는 당업계에 공지된 임의의 클러스터링 알고리즘을 사용할 수도 있다. 그러면 POS 위치결정기(251)는 추출된 클러스터를 검사하고, 충분히 조밀하다면(예를 들어 클러스터 멤버들 사이의 최대의 거리가 주어진 특정 임계치 아래라면), 클러스터 부분 순서 세트를 생성할 수도 있다.
의미 관련성 POS 위치결정기(252)는, 예를 들어 사진 및 이것의 자막과 같이 서로 근접한 주어진 타입의 특정 조합의 컴포넌트가 존재할 경우 의미 관련성 부분 순서 세트를 검출할 수도 있다. 의미 관련성 POS 위치결정기(252)는 슈퍼-노드 내의 컴포넌트의 모든 가능한 쌍을 스캔하고, 각각의 포텐셜 쌍에 대하여 컴포넌트 각각이 올바른 타입을 가지는 것(예를 들어 하나는 텍스트고 하나는 사진임), 컴포넌트들이 서로 가깝다는 것(거리가 주어진 임계 미만임) 및 이들 사이에 개재하는 컴포넌트가 존재하지 않는다는 것을 검사할 수도 있다. 의미 관련성 POS 위치결정기(252)는 컴포넌트 [A, B]의 평가된 쌍에 대하여, B를 대체할 수도 있는 제 3 컴포넌트 C가 B에 대해 올바른 타입이고 B보다 A에 더 가깝다는 것을 검사할 수도 있다. 동일한 내용이 A와 C 사이의 관련성에 대하여 적용된다.
컴포넌트들의 쌍의 다른 조합은 텍스트 및 버튼 부분 순서 세트일 수도 있다. 이러한 시나리오에서, 의미 관련성 POS 위치결정기(252)는 텍스트 필드를 설명하는 버튼을 실제 텍스트 필드로 링크시킬 수도 있다는 것이 이해될 것이다. 관련성이 오직 포지션에 따라서 결정될 수도 있다는 것이 이해될 것이다.
다른 조합은 텍스트 결합 부분 순서 세트(text joining partial order set)일 수도 있다. 이러한 시나리오에서, 의미 관련성 POS 위치결정기(252)는 서로 연결되는 다수의 텍스트 엘리먼트를 병합할 수도 있다. 의미 관련성 POS 위치결정기(252)가 다른 텍스트 엘리먼트 있는 하나의 텍스트 엘리먼트만을 인식할 수도 있다는 것이 이해될 것이다. 모두 함께 링크되는 임의의 개수의 이러한 엘리먼트-두 개만 있는 것이 아님-가 존재할 수도 있다는 것이 역시 이해될 것이다.
패턴 POS 위치결정기(253)는 특정한 타입, 속성 및 레이아웃을 가지는 주어진 개수의 컴포넌트의 반복하는 패턴(예를 들어 컴포넌트 쌍 또는 삼중항(triplet))이 주어진 거리에 존재하는 경우에 패턴 부분 순서 세트를 검출할 수도 있다. 또한 패턴 POS 위치결정기(253)는 이제 참조되는 도 22 에 도시되는 바와 같은 전환된 패턴의 경우에 패턴 부분 순서 세트를 검출할 수도 있다. 컴포넌트 쌍 A 및 C는 텍스트를 좌측에 그리고 사진을 우측에 가지고 있는 반면에, 컴포넌트 쌍 B 및 D는 텍스트를 우측에 그리고 사진을 좌측에 가지고 있다. 패턴 POS 위치결정기(253)는 특정한 타입 및 속성을 가지는 컴포넌트 쌍에 기초하여 이러한 패턴을 검출할 수도 있지만, 수평 거리는 컴포넌트 쌍의 각각에서 두 개의 옵션(동일한 절대 값을 가지는 음수 또는 양수) 중 하나이다. 패턴 POS 위치결정기(253) 는(추후 결합될 수도 있는 2-멤버 패턴의 예에서), 슈퍼-노드 내의 모든 컴포넌트를 스캔할 수도 있고, 각각의 컴포넌트에 대하여 컴포넌트의 네 개의 모든 변의 이것의 최근접 이웃을 위치결정할 수도 있다. 패턴 POS 위치결정기(253)는 주어진 규정된 임계 한정까지 컴포넌트와 중첩하는 이웃을 포함할 수도 있다. 그러면 패턴 POS 위치결정기(253)는 컴포넌트와 그들의 이웃 사이의 관련성의 목록을 저장하고, 관련성의 생성된 목록을 스캔하며, 후속하는 속성: 컴포넌트들이 동일한 타입을 가짐(예를 들어 컴포넌트 [pic, txt]는 다른 컴포넌트 [pic, txt]와 유사함), 컴포넌트가 동일한 방향(전환된 패턴이 지원되는 경우 반전 방향 포함) 및 유사한 거리(차이에 대한 주어진 임계치에 따름)를 가짐에 따라 유사한 관련성의 쌍을 선택할 수도 있다.
선택된 관련성 내의 두 개의 컴포넌트들이 다른 타입을 가져야 한다는 것이 인정될 것인데, 그렇지 않으면 정방형으로 배치되는 동일한 타입의 4 개의 컴포넌트의 세트가 유사한 관련성 쌍의 두 개의 상충하는 세트를 생성할 것이다. 예를 들어 이제 참조되는 도 23 에 도시되는 바와 같이, 4 개의 사진 컴포넌트는 수평으로(쌍 연관 H1, H2) 또는 수직으로(쌍 연관 V1 및 V2) 쌍들로 분할될 수도 있다.
패턴 POS 위치결정기(253)는 선택된 관련성의 목록을 스캔하고, 이들을 세트들로 결합할 수도 있다(예를 들어, r1==r2 및 r2==r3 라면 세트 [r1, r2, r3]를 생성할 수도 있다). 패턴 POS 위치결정기(253)는 또한 사본을 제거할 수도 있다. 패턴의 단일 세트(예를 들어 다수의 [txt, txt, pic] 컴포넌트 세트들의 세트)는 함께 처리되어야 한다는 것이 이해될 것이다.
선정의된 POS 위치결정기(254)는 애플리케이션 디자이너에 의하여 또는 원래의 애플리케이션 템플릿 내에 제공될 수도 있는 특정한 힌트에 기초하여 생성되는 부분 순서 세트를 검출할 수도 있다. 이러한 힌트는 여러 형태를 가질 수도 있다. 선정의된 부분 순서 시스템 힌트를 포함하는 특정 합성물 컴포넌트, 예컨대 "사진 + 텍스트 자막" 컴포넌트는 두 개를 하나의 선정의된 부분 순서 세트로 커플링하는 것을 포함한다. 다른 힌트는 편집을 위한 그루핑과 같은 시각적 디자인 시스템 내에서 이용가능한 다른 형태의 연관성으로부터 유도되는 페이지 또는 모바일-관련 연관성 내의 임의의 컴포넌트의 명백하게 규정된 연관성일 수도 있는데, 이는 많은 시각적 디자인 시스템이 컴포넌트들이 함께 이동, 리사이징, 또는 그렇지 않으면 변경될 수 있도록 그룹 내의 컴포넌트를 연관시킬 능력을 가지기 때문이다. 다른 연관은 시각적 디자인 시스템이 동적 레이아웃 앵커(명백하게 규정되거나 레이아웃 정의로부터 자동적으로 생성됨)를 지원할 수도 있기 때문에 동적 레이아웃 앵커 일 수도 있다. 이러한 앵커는 추가적으로 부분 순서 세트 생성을 위한 힌트로서의 역할을 할 수도 있다. 또 다른 연관성은 동일한 다중-컴포넌트 템플릿의 다수의 인스턴스로부터 생성된 컴포넌트들의 세트인 템플릿일 수도 있다.
선정의된 POS 위치결정기(254)가 선정의된 그룹 및 선정의된 부분 순서 세트 모두를 제공할 수도 있다는 것이 이해될 것이다. 이것은 시스템의 다른 엘리먼트들이고, 선정의된 POS 위치결정기(254)는 디자이너가 선정의된 그룹 힌트(컴포넌트들을 가상 슈퍼-노드로 그루핑하기 위함) 및 선정의된 부분 순서 세트/순서결정(ordering) 힌트(순서결정 프로세스를 유도하기 위하여 사용됨)를 특정하게 할 수도 있다.
ESI-기초 POS 위치결정기(255)는 기초하여 ESI(이용가능한 경우)에 기초한 부분 순서 세트의 자동 생성을 검출할 수도 있다. 특히, ESI-기초 POS 위치결정기(255)는 이전의 편집 세션에 기초하여, 복제 또는 복사 및 붙여넣기를 사용하여 생성된 컴포넌트의 세트, 함께 그루핑되고 함께 편집된 컴포넌트의 세트(예를 들어 시각적 디자인 시스템이 편집을 위하여 데이터베이스 내에 보전되지 않는 애드-혹 그루핑만을 지원하는 경우) 및 차례대로 편집된 컴포넌트의 세트와 같은 컴포넌트들을 서로 연관시킬 수도 있다(하나의 부분 순서 세트 내로).
순서결정기(240)가 기본적인 순서를 생성하고 POS 위치결정기(250)가 임의의 부분 순서 세트를 결정하면, 순서 통합기(245)는 기본적인 순서 및 검출된 부분 순서 세트를 통합하여, 상충하는 부분 순서 세트를 이러한 방법에 따라 해결하면서 병합된 변경된 순서(모든 수반된 엘리먼트들의 총 순서임)를 생성할 수도 있다.
기본 순서결정기(247)의 엘리먼트 중 일부는 모든 컴포넌트들 사이의 완성된 순서를 생성하는 것이 아니라, 페이지/슈퍼-노드를 허용된 폭에 맞춤되는 페이지 섹션으로 분할할 수도 있다는 것이 이해될 것이다. 이것은 기본적인 구조를 유지할 필요가 있는 경우, 예를 들어 애플리케이션을 데스크탑 디스플레이와 유사하거나 더 큰 폭을 가지는 디바이스(예를 들어 테블릿, 대형 디스플레이)로 변환하는 경우에 적합할 수도 있다. 이러한 시나리오에서, 라인 상에 정렬된 컴포넌트로의 전체 분해는 기본적인 하재 컴포넌트 배치를 파손할 수도 있고, 최소의 "슬라이싱"이 시각적으로 우수할 수도 있다. 이것을 하기 위하여, 기본 순서결정기(247)의 엘리먼트는 개별 컴포넌트가 아니라 페이지 섹션(여전히 이용가능한 폭에 맞춤됨)에서 동작하도록 변경될 수도 있다.
그러면 기본 순서결정기(247)는 이러한 정보를 실질적 POS 연결을 통해서 연결되는 페이지 섹션들이 슬라이싱되지 않도록 하는 가이드라인으로서 사용한다.
슈퍼-노드 생성기(230), 기본 순서결정기(247) 및 POS 위치결정기(250)가 서로 상충하는 결과를 더 생성할 수도 있다는 것이 이해될 것이다. 예를 들어, POS 위치결정기(250)의 서브 엘리먼트들 중 하나는 일부 엘리먼트를 수반하는 특정한 부분 순서 세트 정의를 생성할 수도 있고, 및 다른 엘리먼트는 다르고 상충하는 부분 순서 세트 정의를 생성할 수도 있다. 순서 통합기(245)는 다른 엘리먼트로부터의 결과를 병합할 수도 있고 또한 단일 출력을 생성하기 위하여 임의의 충돌을 해결할 수도 있다.
이러한 충돌을 해결하기 위하여, 슈퍼-노드 생성기(230), 기본 순서결정기(247) 및 POS 위치결정기(250)는 모두 품질 점수를 사용할 수도 있다는 것이 역시 이해될 것이다. 예를 들어, 명시적 디자이너 요청에 기초한 디자인은 통상적으로 최대의 품질 점수를 가질 수도 있는데, 이것은 디자이너가 그의 디자인의 구도(composition)를 전부 알고 있을 것이라고 가정될 수 있기 때문이다. 슈퍼-노드 생성기(230), 기본 순서결정기(247) 및 POS 위치결정기(250)가 모두, 각각의 생성된 결과에 대하여 엘리먼트가 분석된 파라미터에 기초하여 특정 결과의 정확도에 대하여 얼마나 확신할 수 있는지에 대한 확실성 점수를 제공할 수도 있는 점수결정기(500)에 의하여 유지되는 품질 점수에 대하여 그들의 점수를 검사할 수도 있다는 것이 이해될 것이다.
순서 통합기(245)는 기본 순서결정기(247) 및 POS 위치결정기(250)로부터의 결과를 수집하고 이들을 통합하려고 시도할 수도 있다. 서로 상충하지 않는 결과는 간단히 결합될 수도 있다는 것이 이해될 것이다. 서로 상충하는 결과는 순서 통합기(245)가 어떤 것을 사용할지 선택하도록 요구할 수도 있다. 이것은 결합된 품질 및 특정 결과에 대한 확실성 점수의 계산에 따라서 이루어질 수도 있다. 결과들은 그들이 주어진(선택적인) 확실성 임계치를 만족하지 않는 경우 버려질 수도 있다.
또한 순서 통합기(245)는, 현재 페이지 내에 규정된 컴포넌트만을 포함하는 결과보다 더 높은 확실성을 가질 수도 있는 템플릿 내에 존재하는 컴포넌트에 대하여 규정되는 결과와 같은 추가적 정보를 고려할 수도 있다. 또한 이것은 이전에 처리되었으며 따라서 더 높은 확실성이 지정될 수도 있는 이전의 페이지 또는 슈퍼-노드에서 발견되는 결과에 유사할 수도 있는 결과를 고려할 수도 있다.
순서 통합기(245)는 주어진 디자이너에 의하여 생성되는 페이지의 구조를, 가능하게는 해당 디자이너로부터의 피드백을 엘리먼트 결과들을 등급매기기 위하여 사용함으로써 학습하도록 확장될 수도 있다.
특정 엘리먼트가 함께 구현되거나 아예 구현되지 않아야 하는 결과의 세트를 반환할 수도 있다는 것이 이해될 것이다. 예를 들어, 패턴 POS 위치결정기(253)는 컴포넌트의 반복된 패턴을 발견할 수도 있다. 이러한 패턴은 수반된 모든 컴포넌트에 대하여 사용되거나, 아예 사용되지 않아야 한다.
컴포넌트가 이에 상응하여 정렬되면, 이제 배치기(270)는 컴포넌트 및 임의의 자동적으로-추가된 컴포넌트(본 명세서에서 아래에 좀 더 상세하게 설명되는 바와 같은)를 페이지 내의 그들의 적합한 포지션 내에 배치할 수도 있다. 이것은, 이용가능한 폭을 결정된 총 순서 및 허용된 공간에 따라서 이용가능한 폭에 맞춤하기 위하여, 컴포넌트 라인 상에서 필요한 바와 같이 정렬된 엘리먼트를 배치할 수도 있다. 이러한 이용가능한 폭은 페이지 슈퍼-노드의 폭 빼기 임의의 선정의된 마진 및 다른 제약, 예컨대 예비 공간을 빼는 것에 의하여 규정될 수도 있다는 것이 이해될 것이다. 예를 들어, 주어진 메인 페이지 폭은 320px이고, 마진은 좌우에 대하여 10px이며, 예비 공간이 없다면, 메인 페이지 슈퍼-노드의 이용가능한 폭은 320 -2*10 = 300px일 것이다. 메인 페이지 슈퍼-노드에 포함되고 최대의 이용가능한 폭을 취하는 페이지 슈퍼-노드는 300 -2*10 = 280px 등의 이용가능한 폭을 가질 것이다.
"모바일 레이아웃 구성 내에 포함"이라고 표시되는 경우, 배치기(270)는 컴포넌트에 부착된 레이아웃 힌트를 데스크탑 레이아웃 구성의 일부로서 적용할 수도 있다. 이러한 컴포넌트는, 이들이 컴포넌트 라인 자체의 일부가 되는 것이 아니라 컴포넌트 라인 구축을 구동할 수도 있는 자동적으로-추가된 컴포넌트의 일부가 된다는 점에서 자동적으로-추가된 컴포넌트에 더 유사하게 기능할 수도 있다.
그러면 배치기(270)는 슈퍼-노드 생성기(230) 및 순서결정기(240)에 의하여 생성되는 명시적 힌트(예를 들어 "이러한 그룹/POS를 별개의 라인에 놓을 것")에 따라서 줄바꿈을 생성할 수도 있다. 추가된 컴포넌트가 이용가능한 폭(예비 공간을 고려함)을 초과하는 경우, 배치기(270)는 컴포넌트 그룹을 함께 유지하려고 시도할 수도 있으며, 즉 필요한 경우 전체 그룹이 동일한 컴포넌트 라인에 맞춤되도록 그룹 이전에 줄바꿈을 생성한다. 배치기(270)는 의미 관련성을 가지는 컴포넌트들 사이에서 줄바꿈을 하도록 줄바꿈을 추가하는 것을 피할 수도 있다(앞서 검출된 것과 같이, 예를 들어 POS 위치결정기(250)에 의하여).
또한 배치기(270)는 각각의 엘리먼트에 이것의 타입에 따라서 폭-축소 수단을 적용할 수도 있다. 폭 축소 수단은 컴포넌트 타입에 따라서 적응될 수도 있는 컴포넌트(예를 들어 텍스트 컴포넌트)를 리-스케일링, 폰트 사이즈 변경, 텍스트 리플로우 등을 포함하여 변경하는 것을 포함할 수도 있다. 또한 폭 축소는 각각의 가상 슈퍼-노드에 대하여 이것의 타입에 따라서 앞서 설명된 처리 방법을 사용할 수도 있다. 이러한 폭-축소 수단은 컴포넌트 조절기(227)(전-처리 스테이지로서)에 의하여 수행되는 것과 유사한 변환을 더 포함할 수도 있다 - 이것은 이제 모바일 레이아웃 구성 내의 컴포넌트의 최종 포지션 및 사이즈에 대한 추가된 정보를 가지고 수행될 수도 있다. 또한 배치기(270)는, 예를 들어 컴포넌트 라인 내에 홀로 배치된 컴포넌트를 확장하기 위한 폭 확대를 수행할 수도 있다.
배치기(270)는 특정한 엘리먼트 타입에 대한 특정 리사이징 수단을 제공한다. 예를 들어, 배치기(270)는 배경 이미지를 가상 컨테이너로서 사용함으로써 이미지상 텍스트 그룹(이미지상 텍스트 그룹 위치결정기(234)에 의하여 위치결정되는 바와 같은)을 나타내는 슈퍼-노드를 리사이징할 수도 있다. 다음으로, 텍스트는 원하는 높이 및 폭에 도달하기 위해서 리사이징된다. 이것은 이제 참조되는 도 6 에 도시되는 바와 같이 텍스트 컴포넌트 종횡비를 변경할 수도 있는(예를 들어 더 큰 문자가 안에 포함되는 더 긴 텍스트 컴포넌트를 만드는) 폰트 사이즈 매핑 및 텍스트 리플로우를 포함한다. 도시되는 바와 같이, 시나리오 1 에서 시나리오 2 로 이동할 때에, 폰트 사이즈는 증가되는 반면에 필드 폭은 축소된다 - 이것은 텍스트 리플로우를 요구한다. 이미지상 텍스트 그룹 위치결정기(234)는 또한 배경 이미지가 다음 텍스트 사이즈로 리사이징되는 경우에 그룹을 리사이징할 수도 있다(통상적으로 종횡비를 변경함).
이것이, 예컨대 이제 참조되는 도 7 에 도시되는 바와 같이, 사진이 종횡비가 변경되는 경우 잘 보이지 않을 실제 콘텐츠를 가지고 있는 경우에(예를 들어 사람의 사진) "시각적 사고(visual accident)"를 유발할 수 있다는 것이 이해될 것이다. 이미지상 텍스트 그룹 위치결정기(234)는 이미지 콘텐츠가 상세 정보를 포함하는지를 확인하도록 이것을 검사함으로써 또는 리-사이징하는 대신에 이미지를 확대 및 클리핑하여 내부 종횡비를 보존함으로써 이러한 문제를 해결하려고 시도할 수도 있다.
일부 컴포넌트는 그들의 리사이징을 수행할 때에 어느 정도의 자율성을 가진다. 예를 들어, 제 3 자 애플리케이션 컴포넌트(다른 디스플레이 사이즈를 가지는 다수의 변형을 지원할 수도 있음) 및 목록 애플리케이션(다수의 뷰 연관성을 가질 수도 있음)이 그러하다. 이러한 컴포넌트는 배치기(270)에 의하여 제공되는 타겟 사이즈에 기초하여 그들 자신의 리사이징을 수행한다.
또한 배치기(270)는 필요에 따라 새로운 페이지 사이즈에 맞춤되도록 장식 이미지를 리사이징/반복할 수도 있다. 페이지가 주어진 길이 파라미터를 초과한다면, 배치기(270)는 페이지-내부 네비게이션 메뉴를 생성하는 것이 가능하고, 이것을 별개의 메뉴로서 페이지에 추가하거나, 또는 적합한 경우에는 현존하는 결합된 메뉴 중 임의의 것에 추가할 수도 있다.
배치기(270)는 컴포넌트의 종횡비를 유지하면서 높이 및 폭 모두를 리스케일링할 수도 있다. 일부 컴포넌트는 그들의 높이를 유지하고 그들의 폭만을 변경할 수도 있다(예를 들어 더 적은 열을 사용하도록 변경되는 갤러리). 리스케일링될 때에 특정 높이를 사용해야 하는 컴포넌트(예를 들어 내부 스크롤을 가지며 따라서 맵 스크롤 대신에 페이지 스크롤을 위해 그 위 아래에 여백을 남겨둬야 하는 맵 컴포넌트)는 적합하게 처리될 수도 있다. 폭 축소가 동일한 방식을 처리될 수도 있다는 것이 이해될 것이다.
배치기(70)는 또한 폭 축소/확대 프로세스를 컴포넌트에 그리고 재귀적으로 슈퍼-노드 및 그들의 후손들에게 적용할 수도 있다. 프로세스는 실제 컴포넌트의 리사이징, 텍스트 폰트-사이즈 매핑, 텍스트 리플로우 및, 이것을 가시 부분으로 분할하고 "더 보기" 확장자(이것은 요청되는 경우에만 디스플레이됨)로 분할함으로써 텍스트 축소를 포함할 수도 있다. 다른 프로세스는 컴포넌트를 "더 가벼운 " 모바일 버전으로 전환하는 것, 및 컴포넌트 파라미터를 변경하여 그들의 폭을 바꾸는 것을 포함할 수도 있다. 또한 프로세스는 컴포넌트를 리사이징하여 사용되는 실제 사이즈를 반영하는 것을 포함할 수도 있다.
배치기(270)가 모바일 구성 레이아웃 내의 그들의 올바른 포지션에 적절한 컴포넌트를 배치했다면, 포스트 프로세서(202)는 임의의 최종 레이아웃 조절을 처리할 수도 있다.
자동 추가된 컴포넌트 삽입기(281)는 자동 추가된 컴포넌트를 변환된 애플리케이션 전부 또는 일부(이들의 페이지 중 전부 또는 일부 내에)로 추가될 수도 있는 시스템 메뉴 또는 다른 모바일 관련된 위젯과 같은 새로운 모바일 레이아웃 구성으로 삽입할 수도 있다. 이러한 삽입된 자동 추가된 컴포넌트는(예를 들어) 광고 및/또는 다른 홍보 자료를 더 포함할 수도 있다. 이러한 삽입된 자동 추가된 컴포넌트는 필수적이거나(즉 언제나 삽입함) 선택적일 수도 있다. 후자의 경우에, 이들은 조건에 따라 삽입된다- 파라미터 또는 파라미터의 조합 예컨대(예를 들어) 사용자 타입 또는 프로파일(예를 들어 특정한 자동 추가된 컴포넌트를 유럽 내의 모든 사용자에 대하여 삽입함) 또는 모바일 디바이스 타입 또는 프로파일에 대하여(예를 들어 특정한 자동 추가된 컴포넌트를 480x320 이상의 스크린 사이즈를 가지는 모든 안드로이드-기초 사용자에 대하여 삽입함). 또한 이들은 특정 페이지 파라미터 또는 조건(예를 들어 사이즈 320x200 이상의 사진 컴포넌트를 포함하지 않는 페이지에 대해서 특정한 자동 추가된 컴포넌트를 삽입함), 사용자 동작 또는 애플리케이션 이용 이력, 자동 추가된 컴포넌트를 삽입할 공간의 이용가능성, 임의의 디자이너 정의 파라미터 및 웹사이트 구축 시스템 정의 파라미터에 기초할 수도 있다.
자동 추가된 컴포넌트 삽입기(281)가 이러한 자동 추가된 컴포넌트를 여러 방식으로 배치할 수도 있다는 것이 이해될 것이다. 이것은 이들을 페이지 내의 또는 특정한 컨테이너(즉 슈퍼-노드) 내의 주어진 포지션 내에 삽입되는 절대-포지션 자동 추가된 컴포넌트로서 배치할 수도 있다- 통상적으로 본 명세서에서 아래에 설명되는 바와 같은 예비 공간을 사용함. 자동 추가된 컴포넌트 삽입기(281)는 또한 이들을 일부 페이지 엘리먼트에 상대적인 주어진 포지션 내에 삽입된 상대-포지션 자동 추가된 컴포넌트로서(예를 들어 선정의된 컴포넌트, 질의를 통해 위치결정된 컴포넌트 등)삽입할 수도 있다. 이것은 본 명세서에서 아래에 좀 더 상세하게 설명되는 바와 같은 모바일 레이아웃 구성 레벨에서의 컴포넌트의 삽입과 유사하다.
자동 추가된 컴포넌트 삽입기(281)는 또한 자동 추가된 컴포넌트를 레이아웃 내의 공간 이용가능성에 기초하여 삽입되는 잔여-공간 자동 추가된 컴포넌트를 더 추가할 수도 있다. 컴포넌트들이 가끔 별개의 컴포넌트 라인으로 이동되기 때문에, 몇 가지 경우에, 데스크탑 레이아웃 구성과 비교할 때 이러한 자동 추가된 컴포넌트에 대하여 사용될 수도 있는 모바일 레이아웃 구성 내의 추가적인 빈 공간이 존재한다.
절대 포지션 자동 추가된 컴포넌트의 경우에, 자동 추가된 컴포넌트 삽입기(281)는 이러한 엘리먼트를 위한 특정 공간을 모바일 디스플레이 영역 상에 예비하도록 요구될 수도 있다는 것이 인정될 것이다- 페이지 / 슈퍼-컨테이너로 할당된 직사각형 모바일 디스플레이 영역으로부터 영역을 잘라내고 이것을 예약함. 따라서, 컴포넌트 라인을 위하여 사용되는 영역은 직사각형이 아닐 수도 있다. 이제 어떻게 자동 추가된 컴포넌트 A 및 B에 대하여 예비 영역을 잘라낸 이후에 메인 컨테이너 C 내에 남아 있는 영역이 비-직사각형 형상이 되는지를 예시하는 도 24 를 참조한다.
적절한 시각적 디자인 시스템이, 발명의 명칭이 "A SERVER BASED WEB SITE DESIGN SYSTEM INTEGRATING DYNAMIC LAYOUT AND DYNAMIC CONTENT"이고 2013 년 8 월 22 일에 공개되며 본 발명의 공통 양수인에게 양도된 미국 특허 공개 번호 20130219263 호에 설명되는 바와 같은 명시적(디자이너- 특정) 앵커 및 암시적(자동적으로 생성) 앵커를 포함하는 동적 레이아웃을 지원할 수도 있다는 것이 이해될 것이다. 따라서, 시각적 디자인 시스템은 모바일 디바이스 폭에 맞춰 적응하는 것에 내재되는 재배치 프로세스에 기인하여 분리될 수도 있는 앵커(암시적 및 명시적 모두)를 가질 수도 있다.
컴포넌트가 이에 따라서 배치되면, 동적 레이아웃 핸들러(284)는 임의의 현존하는 동적 레이아웃 앵커를 새 레이아웃에 따라서 변경할 수도 있다. 예를 들어, 동적 레이아웃 핸들러(284)는, 앵커를 현재 참조되는 도 3 에 도시되는 바와 같이 부적절한 방식으로 이동된 컴포넌트들에 대한 앵커를 제거할 수도 있다. 도시되는 바와 같이, 시나리오 1 에서 컴포넌트 A와 B 사이에 존재하는 수평 앵커는, 시나리오 2 에서 B가 A 아래가 되도록 이동되는 경우에 절단되어야 한다.
동적 레이아웃 핸들러(284)는 또한 유지될 수도 있는 앵커(예를 들어 변경되지 않았던 컨테이너 내의 변경되지 않았던 컴포넌트 세트 등)를 유지할 수도 있다. 동적 레이아웃 핸들러(284)는 또한 유지될 수도 있지만 그들의 파라미터가 변경될 필요가 있을 앵커를 변경할 수도 있다(예를 들어 서로 더 가깝게 이동된 컴포넌트들에 대하여 앵커 길이가 변경됨). 동적 레이아웃 핸들러(284)는 또한 근접하게 배치된(예를 들어 상하로 배치된) 컴포넌트들 사이의 새로운 동적 레이아웃 앵커를 생성할 수도 있다- 컴포넌트-컴포넌트 및 컴포넌트-컨테이너 앵커 모두를 포함함. 이것은 시스템에 탑재된 자동적 앵커 생성 기준에 기초할 수도 있다(예를 들어 중첩의 양 및 컴포넌트들의 거리에 기초함).
모바일-적응 애플리케이션이 여전히 절대-좌표 시각적 디자인 애플리케이션일 수도 있기 때문에 새롭게 생성된 앵커가 중요하다는 것이 이해될 것이다. 따라서, 컴포넌트의 콘텐츠 예컨대 보유된 텍스트의 양에 대한 변경과 같은 변동 때문에 모바일-적응 애플리케이션은 동적으로 변경되어야 할 수도 있다. 이것은 외부 소스로부터 유래한 변동(예를 들어, 외부 데이터 피드(feed), 동시적 사용자 활동, 목록 애플리케이션 내의 데이터 레코드들 사이의 스위칭)을 포함할 수도 있다. 동적 레이아웃 핸들러(284)는 타겟 모바일 디바이스의 스크린 사이즈에서의 작은 변경에 더욱 적응하기 위한 변동을 구현하여야 할 수도 있다. 따라서 동적 레이아웃 핸들러(284)는 앵커 구조를 변경할 수도 있고 또한 최종 적응에 대한 새로운 앵커 구조를 구현할 수도 있다.
결과적인 다른 레이아웃(그루핑, POS 및 순서결정 정보를 포함)은 애플리케이션과 함께 또는 장래 사용을 위하여 별개로, 또는 본 명세서에서 아래에 설명되는 바와 같은 다른 변경에 대한 기초로서 데이터베이스(50)에 저장될 수도 있다는 것이 이해될 것이다.
디스플레이어(290)는 타겟 플랫폼 상의 새롭게 변경된 레이아웃을 디스플레이할 수도 있다.
본 명세서에서 전술되는 바와 같이, 레이아웃 리컨버터(300)는 주어진 데스크탑 계층 구성에 수행된 변경과 이것의 유사한 쉐도우 모바일 레이아웃 구성에 가해진 변경을 병합하여 업데이트된 모바일 레이아웃 구성을 생성할 수도 있다.
최초 레이아웃 컨버터(200)가 실행되면, 애플리케이션의 두 개의(또는 그 이상) 버전인 데스크탑(메인) 레이아웃 구성 및 하나의(또는 더) 모바일(쉐도우) 레이아웃 구성이 존재한다는 것이 이해될 것이다. 모바일(또는 쉐도우) 레이아웃 구성을 참조하면, 태블릿, 와이드-스크린 디스플레이 등과 같은 다른 추가적 구성에 대해서도 이해할 수 있다는 것이 이해될 것이다. 그러면 디자이너는 적절한 시각적 디자인 시스템 편집 툴을 통하여 데스크탑 및 모바일 레이아웃 구성 모두에(별개의) 변경을 적용하여 각각의 변경된 버전을 생성할 수도 있다. 시각적 디자인 시스템은 양자 모두의 버전(모바일 레이아웃을 편집할 경우 제한되는 것이 가능함)에 대하여 단일 편집기를 제공하거나, 개별 데스크탑 및 모바일 사이트 편집기를 제공할 수도 있다.
모바일 레이아웃 구성이 데스크탑 레이아웃 구성으로부터 유도되기 때문에, 최초 레이아웃 컨버터(200)는 데스크탑 레이아웃 구성에 이루어진 변경(예컨대 페이지 및 컴포넌트의 추가 및 삭제 및 컴포넌트 콘텐츠 변경)을 모바일 레이아웃 구성에 적용할 수도 있다. 리컨버터(300)는 모바일 레이아웃 구성의 콘텐츠를 데스크탑 레이아웃 구성과 더 양호하게 코디네이션된 상태로 유지하면서, 모바일 사용자에게 디스플레이될 최종 모바일 레이아웃 구성을 생성하기 위하여 임의의 데스크탑 레이아웃 구성 변경 및 임의의 별개의 모바일 레이아웃 구성 변경을 변경된 모바일 레이아웃 구성에 병합할 수도 있다. (예를 들어) 어떤 컴포넌트가 역시 변경된 모바일 레이아웃 구성(그의 컴포넌트가 이동되거나, 리사이징되거나, 컨테이너로부터, 그 안으로 또는 그들 사이에서 이동되는 것을 포함하여 변경될 수도 있는 구성)에 추가되어야 하는 데스크탑 레이아웃 구성에 추가된다면, 리컨버터(300)는 추가된 컴포넌트를 변경된 레이아웃 구성 내에 배치할 적합한 포지션 및 추가된 컴포넌트 자체에 대하여 사용될 레이아웃을 결정하여야 하기 때문에, 이러한 프로시저는 복잡할 수도 있다는 것이 이해될 것이다.
이러한 시나리오에서, 임의의 모바일 레이아웃 구성 변경은 다시 데스크탑 레이아웃 구성으로 병합되지 않는다는 것이 이해될 것이다. 데스크탑 사이트를 편집하는 것이 모바일 사이트를 변하게 할 수도 있는 반면에, 모바일 사이트를 편집하는 것은 데스크탑 사이트에 영향을 주지 않을 것이다. 데스크탑 레이아웃 구성 또는 모바일 레이아웃 구성 중 어느 하나에 가해지는 순수 레이아웃 변경(즉 포지션 및 사이즈에서의 변경)이 다른 레이아웃 구성에 영향을 주지 않을 수도 있다는 것이 역시 인정될 것이다 - 이것은 예를 들어 컴포넌트 콘텐츠 변경 또는 제거의 경우와는 반대된다(이것은 데스크탑 레이아웃 구성에서 수행되는 경우 모바일 레이아웃 구성에 영향을 준다). 컴포넌트가 모바일 레이아웃 구성으로부터 제거(또는 은닉)될 수 있지만 추가되거나 그들의 콘텐츠가 편집되게 할 수 없도록 시스템(100)이 모바일 편집을 제한할 수도 있다는 것이 역시 인정될 것이다- 다만 본 명세서에서 아래에 더 상세히 논의되는 몇 가지 모바일 지향 컴포넌트에 대해서는 예외일 수 있음. 따라서(예를 들어), 모바일 편집기는 모바일 레이아웃 구성 내의 컴포넌트가 하나의 페이지로부터 다른 것으로 이동되도록 허용하지 않을 수도 있는데, 그 이유는 이것이 컴포넌트를 페이지에 추가하는 것을 수반할 수도 있기 때문이다.
이제 리컨버터(300)의 엘리먼트를 예시하는 도 25 를 참조한다. 리컨버터(300)는 페이지 삭제기(310), 페이지 추가기(320), 컴포넌트 삭제기(330), 컴포넌트 추가기(340), 컴포넌트 변경기(350) 및 모바일 핸들러(360)를 포함할 수도 있다. 컴포넌트 추가기(340)는 이제 참조되는 도 26 에 도시되는 바와 같이 추가된 컴포넌트 식별자(342), 부모 / 선행자 검색기(344) 및 모바일 레이아웃 추가기(346)를 더 포함할 수도 있다. 이러한 엘리먼트의 기능이 본 명세서에서 아래에 더 자세하게 설명된다.
이제 리컨버터(300)의 기능성을 예시하는 도 27 을 참조한다. 최초 레이아웃 컨버터(200)는 DP1(데스크탑 페이지 1)을 변환하여 결과적인 모바일 레이아웃 구성 MP2를 생성할 수도 있다. 그러면 디자이너는 로컬 모바일 편집기를 사용하여 MP1 을 편집하여 MP2를 생성할 수도 있다. 그 이후에, 디자이너는 로컬 데스크탑 편집기를 사용하여 DP1 을 편집하여 DP2 를 생성할 수도 있다. 그러면 리컨버터(300)는 DP2 및 MP2에 가해진 변경을 통합하는 업데이트된 모바일 레이아웃 구성을 생성할 수도 있다.
이러한 자동적 통합은 데스크탑 편집 단계(DP1 => DP2)가 모바일 편집 단계(MP1 => MP2)이후에 수행되는 경우에만 적절할 수도 있다는 것이 인정될 것이다(도 26 에 도시된 바와 같이). 반대의 경우(데스크탑 편집이 우선 수행되는 경우), 최초 레이아웃 컨버터(200)는 DP2의 편집이 완료되면 변경된 데스크탑 레이아웃 구성 DP2를 모바일 레이아웃 구성 MP2 로 자동적으로 재변환할 수도 있다. 그러므로 디자이너는 이미 변경된 MP1에 MP1=>MP2 변경을 수행할 것이며, 이것은(추후) 모바일 편집 도중에 변경의 매뉴얼 통합을 요구한다.
동일한 사이트를 다수의 플랫폼에서 실행시키는 목적은 동일한 콘텐츠를 가능한 한 많이 양 쪽 모두의 사이트에서 가지는 것이라는 것이 역시 이해될 것이다. 그러나, 본 명세서에서 전술되는 바와 같이, (예를 들어) 드롭다운 메뉴 및 수직 라인의 사용에 기인하여, 모든 데스크탑 컴포넌트가 모바일에 호환가능한 것은 아니다.
웹-기초 대화형 애플리케이션(예컨대 웹 사이트)에 대한 주된 요구 사항은 검색-엔진 호환성이라는 것이 역시 이해될 것이다. 그러므로, 데스크탑 및 모바일 레이아웃 구성 모두는 검색 엔진에 동일한 종합 페이지 구조를 제공하여야 하고, 동일한 페이지가 양자 모두의 레이아웃 구성에서 이용가능해야 한다. 그렇지 않으면, 페이지는 데스크탑 레이아웃 구성 페이지를 읽어내는 검색 엔진 스파이더에 의하여 인덱싱될 수도 있지만, 사용자가 직접적으로 모바일 디바이스 상의 검색 엔진을 통해 이것에 도달하는 경우에는 가능하지 않을 것이다("누락된 웹페이지" 또는 유사한 에러 상태가 생긴다). 역방향의 경우에, 모바일 레이아웃 구성에서 이용가능하지만(인덱싱된)데스크탑 레이아웃 구성에서는 그렇지 않는 페이지는 검색 엔진에 의하여 발견되지 않을 것이다. 몇 가지 검색 엔진은 사이트의 다른 버전에 대하여 다른 페이지 구조를 지원할 수도 있는데, 하지만 이러한 옵션의 이용 및 이용가능성은 특정한 검색 엔진의 내부 속성이고 다시 이용될 수 없다.
비록 데스크탑 및 모바일 사이트가 다른 외관을 가지지만, 가능할 때마다 동일한 데이터를 공유할 수도 있다는 것이 이해될 것이다. 그렇지 않으면, 사용자는(예를 들어) 데스크탑 페이지 콘텐츠에 존재하는 주어진 텍스트 어구에 대하여 검색함으로써 모바일 페이지에 접속하고, 결국 해당 모바일 페이지가 다르며 검색된 어구를 포함하지 않는다는 것만을 발견하게 될 수도 있다. 특히, 모바일 페이지는 데스크탑 페이지에 존재하지 않는 컴포넌트를 포함해서는 안 된다. 새로운 모바일-적응 메뉴를 추가하여 현존하는 메뉴를 대체하는 것, 또는 모바일 레이아웃 구성에서만 텍스트 컴포넌트를 삭제하는 것과 같은 몇 가지 예외가 적용될 수도 있다.
때때로, 디자이너는 모바일 레이아웃 구성에 특정한 변경을 가해서 이것을 검색 엔진 정책과 상충하도록 의도적으로 데스크탑 레이아웃 구성과 다르게 만들 필요가 있을 수도 있다는 것이 역시 이해될 것이다. 예를 들어, 새로운 아이템 요약의 피드(feed)를 디스플레이하는 시스템은 데스크탑 레이아웃 구성에서는 더 킨 시스템 요약을 그리고 모바일 레이아웃 구성에서는 더 짧은 요약을 디스플레이할 수도 있다. 디자이너는 확실하게 컴포넌트 사이즈, 포지션 및 순서결정(ordering)을 변경할 수도 있고, 이러한 변경은 모바일 사이트의 검색 엔진 핸들링에 일반적으로 영향을 주어서는 안 된다.
이러한 충돌을 해소하기 위하여, 또는 적어도 이것을 개량하기 위하여, 리컨버터(300)는 디자이너가 모바일 레이아웃 구성에 수행할 수도 있는 변경의 범위를 한정할 수도 있다. 예를 들어, 디자이너는 모바일 레이아웃 구성 레이아웃에만 영향을 주고 실제 콘텐츠에는 영향을 주지 않을 수도 있는 변경만 하도록 제한될 수도 있다. 이러한 제한은 다양한 변경이 리컨버터(300)에 의하여 수행되기 이전에 시스템 모바일 편집기에 의하여 강제될 수도 있다.
데스크탑 레이아웃 변경은 페이지를 추가하는 것, 페이지를 제거하는 것; 컴포넌트를 추가하는 것, 컴포넌트를 제거하는 것; 컴포넌트의 속성을 변경하는 것, 컴포넌트를 이동시키고 리사이징하며 컴포넌트의 콘텐츠(예를 들어 텍스트 문단 내의 텍스트)를 변경하는 것을 포함할 수도 있다. 위에서 언급된 바와 같이, 순수 레이아웃 변경(예를 들어 이동 및 리사이징)은 모바일 레이아웃 구성에 영향을 주지 않는다.
본 명세서에서 전술되는 바와 같이, 시각적 디자인 시스템은 컴포넌트가 변경되거나 이동되는 경우 변경되지 않는 각각의 컴포넌트에 대한 내부 고유한 ID를 가질 수도 있다. 리컨버터(300)가 페이지의 하나의 버전으로부터 다른 버전으로 변경된 컴포넌트를 추적하기 위하여 이러한 ID를 사용할 수도 있다는 것이 이해될 것이다. 리컨버터(300)가, 모든 변경이 시각적 디자인 시스템 편집기를 통해서 수행되고 완전히 추적된다고 가정하기 때문에, 변경된 버전을 평가할 경우, 리컨버터(300)는(각각의 변경된 컴포넌트에 대하여) 변경된 속성 및 값 변경의 상세 목록을 가질 수도 있다(예를 들어 컴포넌트 X에 대하여 스타일이 S1 에서 S2로 그리고 폭이 W1으로부터 W2로 변경되었음).
현존하는 데스크탑 페이지가 제거되면, 페이지 삭제기(310)도 역시 해당 페이지를 모바일 레이아웃 구성으로부터 제거할 수도 있다. 이것은, 이러한 페이지에 이루어진 특정한 모바일 레이아웃 구성 변경이 없어진다는 것을 암시한다는 것이 이해될 것이다. 이것을 복원하는 유일한 방식은 "되돌리기(undo)" 기능(예를 들어 현재 세션 도중의 세션 레벨 되돌리기 또는 데이터베이스 레벨에서의 버전 취소(revert))을 통하는 것이다.
새로운 페이지가 데스크탑에 추가되면, 페이지 추가기(320)는 최초 레이아웃 컨버터(200)에게 전체 페이지를 본 명세서에서 위에서 설명된 바와 같이 모바일 레이아웃 구성으로 변환하도록 명령할 수도 있다. 변환된 페이지가 모바일 레이아웃 구성 내의 적합한 포지션에서 나타날 수도 있다는 것이 이해될 것이다. 페이지 추가기(320)는 새롭게 삽입된 페이지를 포함하도록 임의의 모바일 네비게이션 메뉴를 업데이트할 수도 있다.
컴포넌트가 현존하는 데스크탑 레이아웃 구성으로부터 삭제되는 경우, 컴포넌트 삭제기(330)는 대응하는 컴포넌트를 대응하는 모바일 레이아웃 구성으로부터 삭제할 수도 있다. 또한 컴포넌트 삭제기(330)는 모바일 핸들러(360)에게, 아래의 모바일 핸들러(360)의 설명에서 기술되는 바와 같이 주어진 컴포넌트 라인 내의 갭을 없애거나 전체 컴포넌트 라인을 제거하면서 모바일 레이아웃 디스플레이를 업데이트하도록 명령할 수도 있다.
하나 이상의 새로운 컴포넌트가 데스크탑 페이지에 추가되는 경우, 새로운 컴포넌트는 새롭게 추가된 컴포넌트를 포함하여 변경된 데스크탑 페이지에 대한 새로운 계층적 컴포넌트 순서를 생성할 수도 있다는 것이 이해될 것이다. 모바일 레이아웃 구성에 변경이 이루어지지 않는 경우의 데스크탑 레이아웃 구성에 대한 변경에 대하여, 리컨버터(300)는 데스크탑 레이아웃 구성 및 모바일 레이아웃 구성 변경을 병합할 필요성이 없기 때문에 최초 레이아웃 컨버터(200)에게 데스크탑 페이지를 재변환하도록 명령할 수도 있다.
컴포넌트 추가기(320)가 레이아웃 구성에 추가된 컴포넌트를 추가하기 위한 모바일 레이아웃 구성 내의 적합한 위치를 결정해야 한다는 것이 이해될 것이다. 컴포넌트들이 모바일 레이아웃 구성에서 이동되거나(포함 컨테이너 사이의 이동을 포함), 리사이징되거나, 재배치되거나 제거되었을 수 있기 때문에, 이러한 태스크는 매우 복잡할 수도 있다. 더욱이, 데스크탑 레이아웃 구성 컴포넌트는 이동되거나 제거되었을 수도 있다. 그러므로 컴포넌트 추가기(320)는 언제나 존재할 선행자 및/ 또는 부모 중 하나에 따라서 컴포넌트를 추가할 적합한 포지션을 찾아야 한다.
모바일 레이아웃 구성에 추가된 각각의 컴포넌트 X에 대하여, 추가된 컴포넌트 식별자(342)는 추가된 컴포넌트를 식별할 수도 있다(예를 들어 컴포넌트 ID 비교, 편집 세션 이력 또는 하재 데이터베이스 액세스를 통하여). 컴포넌트 식별자(342)는 컴포넌트 필터러(221)에게 해당 컴포넌트가 모바일 디스플레이에 대해서 적합한지(예를 들어 빈 컴포넌트가 아니고, 비-모바일 규격 타입이 아닌지 등)를 결정하기 위하여 자신의 컴포넌트 필터링 기능을 작동시키도록 명령할 수도 있다.
그러면 부모/ 선행자 검색기(344)는 추가된 컴포넌트 X에 최근접하고 모바일 레이아웃 구성에서 역시 존재하는(즉 이들은 명백하게 또는 그들의 타입 때문에 모바일 레이아웃 구성으로부터 제거되지 않았음) 최근접 선행자 컴포넌트 PD(X) 및/또는 부모 컴포넌트 PT(X)의 위치를 결정하기 위하여 부모/선행자 검색을 수행할 수도 있다. 선행자는 순서결정기(240)에 의하여 특정된 순서에 따라서 결정되는데, 모바일 레이아웃 구성에서 나타나는 최근접 선행자를 취한다. 부모는 페이지 컨테이너 계층성에 따라서 결정되는데, 모바일 레이아웃 구성에서 나타나는 최근접 레벨 부모 컨테이너 컴포넌트를 취한다. 일부 컴포넌트가 수동으로 모바일 레이아웃 구성으로부터 삭제(또는 은닉)되었을 수도 있고 따라서 부모 / 선행자 검색으로부터 제외될 것이라는 것이 이해될 것이다. 최근접 선행자 컴포넌트는, 예를 들어 X가 자신의 페이지 / 컨테이너 내의 제 1 컴포넌트일 경우(모바일에서 보이지 않는 컴포넌트를 제외시킬 때에) 널(null)일 수도 있고 선행자가 없을 것이라는 것이 역시 이해될 것이다. 그러나, 부모 컴포넌트는, 검색이 언제나 탑 레벨 컨테이너로서의 역할을 하는 보유 페이지에 도달할 것이기 때문에 널이 될 수 없다는 것이 역시 이해될 것이다. 부모/ 선행자 검색기(344)가 선행자 및 부모(가능한 경우)를 결정하면, 모바일 레이아웃 추가기(346)는, X가 데스크탑 레이아웃 구성 내의 동일한 선행자/ 부모 컴포넌트에 대한 것이기 때문에 추가된 컴포넌트 X를 모바일 레이아웃 구성 내의 선행자/ 부모 컴포넌트로의 동일한 관련성을 가지는 포지션에 있는 최근접 선행자 컴포넌트 이후에 추가하고, 해당 선행자에 따르는 모든 컴포넌트를 아래로 밀어 낸다.
다수의 추가된 데스크탑 레이아웃 구성 컴포넌트(X[1], X[2], …)를 처리하는 경우, 위의 프로시저를 구현하는 두 개의 주된 방법인 일대일 방법 또는 클러스터링된 방법이 존재한다는 것이 이해될 것이다.
일대일 방법에서, 추가된 데스크탑 레이아웃 구성 컴포넌트 X[i]는 그들의 순서에 따라서 처리된다(예를 들어, 순서결정기(240)에 의하여 정의되는 바와 같이). 각각의 컴포넌트 X[i]에 대하여, 부모/ 선행자 검색기(344)는 앞선 추가된 컴포넌트 X[j](1 <= j < i)를 고려하는 선행자/ 부모 검색을 수행한다. 따라서, 각각의 컴포넌트 X[i]는 다른 추가된 컴포넌트를 고려하여 처리된다.
클러스터링된 방법에서, 부모/ 선행자 검색기(344)는, 다른 추가된 데스크탑 레이아웃 구성 컴포넌트 X[j](j ≠ i)의 존재를 무시하면서 데스크탑 레이아웃 구성 컴포넌트 X[i]의 각각에 대하여 개별적으로 부모/선행자 검색을 수행할 수도 있다. 그러므로 부모/ 선행자 검색기(344)는 이것이 데스크탑 레이아웃 구성에 추가된 유일한 컴포넌트인 것처럼 각각의 X[i]에 대하여 부모/ 선행자 검색을 수행한다. 이것이 완료되면, 컴포넌트 X[i]는 선행자 컴포넌트 PD(X[i]) 및 부모 컴포넌트 PT(X[i])의 공통 조합에 따라서 클러스터링된다. 각각의 클러스터 내의 컴포넌트는 단일 가상 페이지로서 함께 그룹화될 수도 있다(예를 들어 그 안에 다른 슈퍼-노드를 보유할 수 있는 가상 슈퍼-노드로서). 그러면 컴포넌트 추가기(340)는 풀 변환 프로세스를 재귀적으로 실행하면서 각각의 이러한 가상 페이지에서 실행하도록 최초 레이아웃 컨버터(200)에게 명령할 수도 있다(본 명세서에서 위에서 설명된 바와 같은 전-처리, 분석, 앵커 등을 포함). 프로세스는 각각의 가상 페이지를, 이제 모바일 레이아웃 추가기(346)가 해당 클러스터에 대한 공통 선행자 및 부모에 기초하여 모바일 레이아웃 구성에 유닛으로서 배치하는 변환된 가상 페이지로 변환할 수도 있다.
이제 다른 컴포넌트 추가 및 편집 시나리오, 및 어떻게 이들이 컴포넌트 추가기(340)에 의하여 처리되는지를 예시하는 도 28a, 도 28b, 도 28c, 도 28d, 도 28e, 도 28f 및 도 28g 를 참조한다.
이제 두 개의 컴포넌트인 A 및 B를 포함하는 데스크탑 페이지 DP1을 도시하는 도 28a 를 참조한다. 최초 레이아웃 컨버터(200)는 이러한 페이지를 모바일 페이지 MP1로 변환할 수도 있다. 이제 새로운 컴포넌트 X가 DP1 내의 A와 B 사이에 추가되어 페이지 DP2를 생성한다면, 부모/ 선행자 검색기(344)는 X에 대해 부모 / 선행자 검색을 수행하여 X가 보유 페이지(데스크탑 레이아웃 구성에서) 내에서 A 뒤에 온다는 것을 발견한다. 따라서, 모바일 레이아웃 추가기는 X를 MP1 내의 보유 페이지 내에서 A 다음에 삽입해서 MP2 를 생성한다.
이제 참조되는 도 28b 에 도시되는 바와 같은 다른 시나리오에서, 모바일 페이지 MP1은 모바일 편집기를 통하여 편집되어 A 및 B의 수직 포지션을 교환하여 MP2를 생성한다. 이러한 편집 이후에, 이제 디자이너는 새로운 컴포넌트 X를 DP1 내의 A와 B에 삽입하여 페이지 DP2를 생성한다. 컴포넌트 추가기(340)는 DP2 및 MP2에 가해지는 변경을 조율할 수도 있다. 부모/선행자 검색기(344)는 컴포넌트 X에 대하여 부모/선행자 검색을 수행하여, X가 보유 페이지 내의 A(자신의 최근접 선행자)에 후속한다는 것을 발견할 수도 있다(데스크탑 레이아웃 구성 내의 자신의 최근접 부모). 따라서, 모바일 레이아웃 추가기(346)는 X를 컴포넌트 A에 후속하여 보유 페이지 내에 삽입하고(이것은 이제 B 위가 아니라 B 아래임), 업데이트된 모바일 페이지 MP3를 생성할 수도 있다.
또 다른 시나리오에서, 이제 참조되는 도 28c 에 도시되는 바와 같이, 모바일 페이지 MP1 은 모바일 편집기에 의하여 편집되어 A 아래에 그리고 C 위에 있는 컴포넌트 B를 제거(은닉)한다(MP2를 생성함). 그러면 DP1 은 데스크탑 편집기에 의하여 편집되어 컴포넌트 X를 B 다음에 그리고 C 앞에 삽입한다(DP2를 생성함). 그러면 컴포넌트 추가기(340)는 DP2 및 MP2로 가해진 변경을 조율할 수도 있다. 부모/ 선행자 검색기(344)는 추가된 컴포넌트 X에 대하여 부모 / 선행자 검색을 수행할 수도 있고, B가 "모바일에서는 제거됨"이라고 표시되기 때문에 X의 선행자가 B 대신에 A 라고 결정할 수도 있다. 따라서, 모바일 레이아웃 추가기는 X를 MP2에서 A 이후에(그리고 C 앞에) 삽입하여 MP3를 생성한다.
또 다른 시나리오에서, 이제 참조되는 도 28d 에 도시되는 바와 같이, 페이지 DP1은 그 모두가 MP1으로 변환되는 내부 컨테이너 B 및 다른 컴포넌트 D를 포함하는 컨테이너 A를 포함한다. 그러면 모바일 페이지 MP1 은 모바일 편집기를 통하여 편집되어 내부 컨테이너 B를 제거(은닉)한다(MP2를 생성). 그러면 DP1 은 데스크탑을 통하여 편집되어 컴포넌트 C를 내부 컨테이너 B 내에 삽입한다(DP2를 생성). 그러면 컴포넌트 추가기(340)는 DP2 및 MP2로 가해진 변경을 조율할 수도 있다. 추가된 컴포넌트 C에 대하여 부모 / 선행자 검색을 수행하는 이러한 시나리오에서, B가 "모바일에서는 제거됨"이라고 표시되기 때문에 부모/ 선행자 검색기(344)는 부모가 B가 아니라 A 라고 결정할 수도 있다. 또한, C가 A 내의 첫 번째 컴포넌트이기 때문에(B와 무관), 부모/ 선행자 검색기(344)는 C가 선행자를 가지지 않는다고 결정할 수도 있다. 따라서 모바일 레이아웃 추가기(346)는 MP2 내에서 A 내에(제일 위에 그리고 D 이전에) C를 삽입하여 MP3를 생성할 수도 있다.
이제 참조되는 도 28e 에 도시되는 바와 같은 또 다른 시나리오에서, 모바일 페이지 MP1은 모바일 편집기를 통하여 편집되어 A 및 B의 수직 포지션을 교환하여 MP2를 생성한다. 이후에, 디자이너는 두 개의 새로운 고도로 중첩하는 컴포넌트 X1 및 X2를 DP1 내의 컴포넌트 A와 B 사이에 삽입하여 페이지 DP2를 생성한다. 컴포넌트 추가기(340)는 두 개의 가능한 방법 중 하나로 DP2 및 MP2 에 가해지는 변경을 조율함으로써, MP3(일대일 방법에 대하여) 또는 MP4(클러스터링된 방법에 대하여)를 생성할 수도 있다.
일대일 방법이 사용된다면, 그리고 X2가 X1 "이후에" 기하학적으로 위치되기 때문에, 부모/ 선행자 검색기(344)는 X1에 대한 부모/ 선행자 검색을 먼저 수행하여 A가 X1의 선행자라고 결정할 수도 있다는 것이 이해될 것이다. 그러면 부모/ 선행자 검색기(344)는 X2에 대한 부모 / 선행자 검색을 수행할 수도 있고(X1을 고려하면서), X1이 X2의 선행자라고 결정할 수도 있다. 따라서, 이제 모바일 레이아웃 추가기(346)는 컴포넌트 X1을 A 다음에 배치하고 컴포넌트 X2를 X1 다음에 배치하여 MP3를 생성할 수도 있다. 이러한 방법에서, 컴포넌트 X1 및 X2는 별개의 엔티티라고 분석되고 이동되고, 따라서 그들의 합성이 분리된다는 것이 이해될 것이다.
만일 클러스터링된 방법이 사용된다면, 부모/ 선행자 검색기(344)는 X1 또는 X2에 관련하지 않고(검색을 위하여) X1 및 X2 양자 모두에 대하여 부모 / 선행자 검색을 수행할 수도 있고, 양자 모두가 동일한 부모(메인 페이지) 및 동일한 선행자(컴포넌트 A)를 가진다고 결정할 수도 있다. 따라서, 컴포넌트 추가기(340)는 X1 및 X2 를 함께 클러스터링할 수도 있고, X1 및 X2를 포함하는 가상 슈퍼-노드를 생성할 수도 있으며, 최초 레이아웃 컨버터(200)에게 X1 및 X2의 합성의 모바일 대기 버전을 생성하도록 명령할 수도 있다. 이러한 변환된 합성이 A 아래에 배치되어 MP4를 생성할 것이라는 것이 이해될 것이다. X1 및 X2가 고도로 중첩하기 때문에, 이들이 그들의 구도를 보존하도록 리사이징될 가능성이 있다(위에서 설명된 바와 같이).
또 다른 시나리오에서, 이제 참조되는 도 28f 에 도시되는 바와 같이, 두 개의 컴포넌트(A 및 B)를 포함하는 원래의 데스크탑 페이지 DP1은 데스크탑 편집기를 통하여 의미적으로-관련 텍스트 및 이미지 컴포넌트의 두 개의 쌍(T1/I1 및 T2/I2)인 4 개의 새로운 컴포넌트를 추가함으로써 편집되어, 새로운 페이지 DP2를 생성한다. DP2 가 일대일 방법(본 명세서에서 위에서 설명된 바와 같이)을 사용하여 모바일로 변환된다면, 부모/ 선행자 검색기(344)는 T1이 T2의 선행자라고 결정할 수도 있다. 따라서, 컴포넌트들의 생성된(수직) 시퀀스는 A-T1-T2-I1-I2-B(MP2에 도시된 바와 같음)일 것이며, 텍스트 자막을 이미지의 연결로 나눌 것이다. DP2가 클러스터링된 방법(본 명세서에서 위에서 설명된 바와 같이)을 사용하여 모바일로 변환된다면, 부모/ 선행자 검색기(344)는 T1/T2/I1/I2 모두가 동일한 선행자(A) 및 부모(메인 페이지)를 가진다고 결정할 수도 있다. 따라서, 모바일 레이아웃 추가기(346)는 이러한 4 컴포넌트를 새로운 가상 페이지로 클러스터링할 수도 있고 그 위에서 최초 레이아웃 컨버터(200)를 실행할 수도 있다. T1이 의미적으로 I1에 관련되고, T2는 I2에 관련되기 때문에, 이러한 쌍들은 함께 유지될 것이다. 따라서, 생성된(수직) 시퀀스는 A-T1-I1-T2-I-B(MP3에서와 같이)일 것이고, 의미 정보를 보존한다.
또 다른 시나리오에서, 이제 참조되는 도 28g 에 도시되는 바와 같이, 데스크탑 페이지 DP1 은 3 개의 컴포넌트(A, B 및 C)를 포함하고, 모바일로 변환된다. 결과적인 모바일 페이지 MP1은 모바일 편집기를 통해서 편집되어 컴포넌트 C를 남기고 A 및 B의 순서를 교환하여 MP2를 생성한다. 그러면 DP1 은 데스크탑 편집기를 통해서 편집되어, 두 개의 중첩하는 컴포넌트 X1 및 X2를 B와 C 사이에 추가하고 추가적 컴포넌트 X3를 C 아래에 추가하여 DP2 를 생성한다. 컴포넌트 추가기(340)는 클러스터링된 방법을 사용하도록 구성되고, 부모/ 선행자 검색기(344)가 B가 모든 3 개의 새로운 컴포넌트의 선행자라고 결정했기 때문에(C가 모바일 버전에서 제거되었기 때문에), 따라서 모든 3 개의 추가된 컴포넌트(X1, X2 및 X3)는 함께 클러스터링된다. 따라서 모바일 레이아웃 추가기(346)는 모든 3 개의 새로운 컴포넌트를 B 아래 그리고 A 위에 배치하여, X1 및 X2의 구도(composition)를 유지할 수도 있다(MP3에 도시된 바와 같이).
모바일 레이아웃 추가기(346)에 의한 추가된 컴포넌트의 배치는, 컴포넌트가 데스크탑 버전에 추가되거나 두 개의 수직으로-분리된 컴포넌트들 사이에서 수직으로 모바일 버전에만 추가되는 제한된 버전으로 구현될 수도 있다는 것이 이해될 것이다.
다른 실시예에서, 컴포넌트 추가기(340)는 추가된 컴포넌트의 "클러스터" 를 모바일 버전에 배치되는 컴포넌트들의 "라인" 내의 어느 위치에나 추가할 수도 있고, 따라서 새로운 컴포넌트의 삽입이 모바일 버전에서 주어진 컴포넌트 아래여야 한다고 제한하지 않을 수도 있다.
또 다른 실시예에서, 컴포넌트 추가기(340)는 추가된 컴포넌트 B를, 이것을 선행자로서 가지고 있는 것이 아니라 이것을 포함하는 데스크탑 레이아웃 구성 컨테이너 내에 첨부할 수도 있다. 이러한 시나리오에서, 컴포넌트 B는 자신을 포함하는 컨테이너 C에 첨부된 상태로 유지되고, 데스크탑 및 모바일 레이아웃 구성 모두에 존재하고 컴포넌트 B에 선행하는 C 내의 마지막 엘리먼트 다음에 배치된다는 것이 이해될 것이다. 이러한 접근법은 컨테이너 C(및 매칭 슈퍼-노드)가 비어있지 않거나 모바일 레이아웃 구성 내에 은닉되지 않는다면 사용될 수도 있다.
또 다른 실시예에서, 컴포넌트 추가기(340)는 모바일 레이아웃 구성을 세그먼트로 수평 분할하고, 추가된 컴포넌트 또는 컴포넌트 클러스터를 선행자의 바로 다음 대신에 선행자를 포함하는 세그먼트 이후에 추가함으로써 컴포넌트를 모바일 레이아웃 구성에 추가할 수도 있다.
일반적 속성 변경을 포함하는, 데스크탑 컴포넌트의 스타일, 폰트 또는 텍스트 사이즈와 같은 속성에 대한 갤러리 컴포넌트 내의 행 또는 열의 개수를 변경하는 것과 같은 변경이 존재하면, 컴포넌트 변경기(350)는 모바일 레이아웃 구성에서 컴포넌트를 변경시킬 수도 있다는 것이 이해될 것이다. 모바일 레이아웃 구성이 동적 레이아웃에 속하는 시각적 애플리케이션을 규정하기 때문에, 이것은 이러한 변경을 수용하고 컴포넌트 사이즈 및 포지션을 이에 상응하여 재조절할 수 있다.
데스크탑 컴포넌트의 사이즈 및 포지션에 대한 변경이 데스크탑 레이아웃 구성에 영향을 주는 반면에, 이들은 모바일 레이아웃 구성이 본 명세서에서 아래에 설명되는 바와 같이 명시적으로 재생성되지 않는 한 모바일 레이아웃 구성에는 영향을 주지 않는다는 것이 역시 이해될 것이다. 시스템(100)이 콘텐츠가 변경되지 않는 한 다수의 레이아웃 구성들 사이에서 외관(디자인)에서의 변경을 허용할 수도 있기 때문에 이것이 허용된다.
데스크탑 컴포넌트의 데이터/콘텐츠에 변경이 존재하면, 컴포넌트 변경기(350)는 모바일 레이아웃 구성을 이에 상응하여 업데이트할 수도 있다. 속성 변경과 유사하게, 이러한 데이터 변경은 동적 레이아웃을 사용하여 수행되는, 모바일 레이아웃 구성 상의 컴포넌트의 일부 리포매팅을 야기할 수도 있다.
모바일 레이아웃 구성에 대한 임의의 변경은 통상적으로 모바일 프리뷰 레이아웃 구성이 있는 전문화된 GUI 디스플레이(모바일 편집기) 또는 모바일 변경 디스플레이를 통해서 사용자에 의하여 수행될 수도 있다는 것이 이해될 것이다. 이러한 모바일 편집기는 단지 디자이너에게 어떤 동작, 예컨대 모바일-특유 컴포넌트를 추가하는 것, 컴포넌트를 제거하는 것(은닉하는 것), 컴포넌트를 이동시키는 것 또는 컴포넌트를 변경하는 것만을 수행하도록 허용할 수도 있다. 따라서 모바일 편집기는 모바일-측의 변경만을 다루는 모바일 핸들러(360)와 상호작용할 수도 있다.
모바일 핸들러(360)는 추가된(모바일만의) 컴포넌트를 배치하기 위한 여러 방법을 사용할 수도 있다. 모바일 핸들러(360)는 이제 참조되는 도 29 에 도시되는 바와 같이, 현재 존재하는 것에 후행하거나 선행하는 컴포넌트 라인 상의 또는 새로운 컴포넌트 라인 상의 두 개의 컴포넌트들 사이에만 새로운 컴포넌트의 삽입을 허용할 수도 있다. 새로운 컴포넌트 X는 A와 B 사이에 삽입될 수도 있고 또는 새로운 컴포넌트 Y는 P 아래에 그리고 A, B 및 C 위에 삽입될 수도 있다. 이것은 또한 추가된 컴포넌트 이전에/ 이후에 줄바꿈을 삽입할 수도 있다.
이러한 경우에 삽입된 컴포넌트(X 또는 Y)는 선행 컴포넌트(또는 컨테이너)에 앵커(anchor)될 수도 있고, 모바일 레이아웃 구성이 재생성되고 "추가된 모바일 컴포넌트의 보존"이 요청되는 경우 해당 포지션에 재삽입될 수도 있다. 앵커가 이용가능하지 않다면(예를 들어 앵커되는 목록 컴포넌트가 데스크탑 레이아웃 구성에서 제거된 경우), 모바일 핸들러(360)는 위에서 언급된 바와 같이 컴포넌트를 데스크탑 레이아웃 구성에 추가하기 위한 가장 가까운 이전의 컴포넌트 또는 컨테이너를 검색할 수도 있다.
또한 모바일 핸들러(360)는 새로운(모바일 전용) 컴포넌트 X를 페이지 내의 임의의 포지션에 배치하도록 허용할 수도 있다. 그러면 모바일 핸들러(360)는 X와 최대 교차하는 컴포넌트를 검색함으로써 앵커 컴포넌트를 검색할 수도 있다. 이러한 컴포넌트가 이용가능하지 않은 경우, 모바일 핸들러(360)는 거리 및 중첩의 가중된 평균에 기초하여 그리고 거리 및 중첩 임계치를 사용함으로써 최근접 이웃(4 개의 변 모두)을 찾을 수도 있다. 이러한 컴포넌트가 컨테이너 보유 X에서 사용하도록 발견되지 않으면, 모바일 핸들러(360)는 페이지 시작을 앵커의 최근접 에지로부터의 거리 및 오프셋의 관점에서 앵커로서 규정될 수도 있는 앵커로서 사용한다.
검색 엔진 정책과의 비-유연성을 피하기 위하여, 리컨버터(300)는 이러한 동작을 제공하는 것을 아예 회피할 수도 있다. 대안적으로는, 리컨버터(300)는 페이지의 검색 엔진 뷰에 영향을 주지 않는 컴포넌트, 예컨대 장식 타입 컴포넌트(예를 들어 라인, 장식 형상), 콘텐츠가 없는 컴포넌트(예를 들어 엑스트라 메뉴 엔트리 정보를 추가하지 않는 페이지-내부 네비게이션 메뉴), 검색 엔진에 제공되지 않는 콘텐츠를 가지는 컴포넌트(예를 들어 배경 이미지) 및 모바일 환경에만 적합한 컴포넌트(예컨대 전화 걸기, 텍스트/MMS 메시지 전송, 주어진 위치로 이동, 또는 데스크탑 사이트 버전으로 전환의 기능을 제공하는 버튼)를 추가하는 것으로 제한될 수도 있다.
모바일 편집기는 또한 비-모바일-추천 컴포넌트를 최초에 "제거된 컴포넌트" 디스플레이에 배치하고, 이들을 모바일 레이아웃 구성에 실제로 통합시키기 위한 제 2 단계를 요구할 수도 있다는 것이 역시 이해될 것이다.
추가된 컴포넌트는 본 명세서에서 아래에 논의되는 바와 같은 모바일 변경 디스플레이 내에 나열되어, 특정한 모바일-에만 추가될 컴포넌트를 제거하는 것을 용이하게 할 수도 있다.
또한 모바일 핸들러(360)는 모바일 레이아웃 구성으로부터 컴포넌트를 제거할 수도 있다(이것은 컴포넌트를 실제로 제거하거나 단순히 숨김으로써 구현될 수도 있다). 컴포넌트가 모바일 레이아웃 구성으로부터 제거되면, 모바일 핸들러(360)는 컴포넌트를 동일한 라인에 재배치하지 않을 수도 있다는 것이 이해될 것이다. 전체 컴포넌트 라인이 제고되는 경우, 모바일 핸들러(360)는 컴포넌트를 이제 참조되는 도 30 에 도시되는 바와 같이 가능한 한 가깝게 아래에서 위로 이동시킬 수도 있다. 컴포넌트 A, B 또는 C 중 임의의 것(하지만 3 개의 모두는 아님)이 제거되는 경우, 라인 내의 잔여 컴포넌트(A, B 또는 C)는 영향받거나 이동되지 않는다. 3 개의 컴포넌트(A, B 및 C)가 모두 제거되면, 컴포넌트 Q 및 이것에 후속하는 컴포넌트는 인근 컴포넌트 P까지 이동할 것이다. 제거된 컴포넌트(들)는 본 명세서에서 아래에 논의되는 바와 같은 모바일 변경 디스플레이에서 나열되어, 요구될 경우 숨은 컴포넌트를 후속 스테이지에서 애플리케이션 내로 재삽입하는 것을 용이하게 할 수도 있다.
모바일 레이아웃 구성 내의 컴포넌트가 정규 편집 시각적 데이터 시스템 GUI를 통하여 사용자에 의하여 이동될 수도 있다는 것이 역시 이해될 것이다. 모바일 핸들러(360)는 페이지가 재생성될 때까지 변경을 유지할 수도 있고, 이들을 본 명세서에서 아래에 논의되는 바와 같이 모바일 변경 디스플레이 내에 나열하여, 특정 변경을 되돌리는 것을 용이하게 할 수도 있다.
또한 모바일 편집기는 컴포넌트가 모바일 좁은 디스플레이 스트립의 "밖으로"(우측 또는 좌측) 이동될 수도 있게 허용할 수도 있다. 이러한 시나리오에서, 컴포넌트는 "스트립"과의 특정한 최소 수평 중첩을 보유할 수도 있고, 스트립 사이즈에 맞게 클리핑되어 디스플레이될 수도 있다. 그렇지 않으면, 이러한 옵션은 "컴포넌트 감추기" 옵션에 균등하게 될 수도 있다. 이러한 옵션은 모바일 구성 내에서 컴포넌트를 재배치하는 것을 돕기 위하여, 컴포넌트 / 컨테이너의 부분만을 보여주기 위해서 또는 컴포넌트를 측면으로 일시적으로 배치하기 위해서 사용될 수도 있다.
또한 모바일 편집기는 사용자가 컴포넌트 속성, 성질 및 스타일을 모바일 레이아웃 구성에서 선택적으로 변경하도록 허용할 수도 있다. 모바일 편집기는 이러한 변경된 속성을 "모바일에서 변경됨"이라고 표시함으로써, 데스크탑 레이아웃 구성 내의 특정한 속성에서의 변경이 모바일 레이아웃 구성 내의 이러한 속성에 가해진 변경에 영향을 주고 무시하게 하지 않을 수도 있다.
모바일 레이아웃 구성에 특정한 변경으로서 바람직할 수도 있는 하나의 특정 변경은 폰트 사이즈이다. 컴포넌트 조절기(227)가 디자이너가 요구할 수도 있는 것과 다른 사이즈를 생성하는 경우 이것이 필요할 수도 있다. 따라서, 특정한 폰트 사이즈 변경(최초 레이아웃 컨버터(200)에 의하여 생성되는 폰트 사이즈의 위에 적용될 인자로서)이 필드 단위로 디스플레이된 텍스트에 추가되고 인가될 수도 있다. 모바일 편집기는 로컬 "스케일 인자" 속성 및(예를 들어) 이러한 속성에 영향을 줄 수도 있는 5% 폰트 사이즈 증가/축소를 위한 버튼을 사용하여 폰트 사이즈를 변화시킬 수도 있다. 모바일 편집기가 새로운 폰트 사이즈를 모바일 친화적 폰트 사이즈의 주어진 범위로 여전히 제한할 수도 있다는 것이 이해될 것이다. 임의의 속성 변경(폰트 사이즈 변경 포함)은 본 명세서에서 아래에 논의되는 바와 같은 모바일 변경 디스플레이 내에 나열될 수도 있다.
본 명세서에서 전술되는 바와 같이, 리컨버터(300)는 주어진 모바일 레이아웃 구성에 특유한 변경(예를 들어 추가된 컴포넌트, 제거되는 컴포넌트, 변경된 컴포넌트)의 목록을 디스플레이하는 개별 GUI를 제공할 수도 있다. 특정한 모바일 레이아웃 구성 변경을 시청하고 이들과 최초 레이아웃 컨버터(200)에 의하여 이루어진 다른 레이아웃 변경을 구별하기 위하여 이것은 유용할 수도 있다. 또한 다른 모바일 레이아웃 구성에 이루어진 다른 변경을 리뷰하고 특정 "제거된" 컴포넌트를 재삽입하는 것과 같은 특정한 모바일 레이아웃 구성 변경을 되돌리기 하기 위하여, 이것은 유용할 수도 있다.
이러한 디스플레이가 변경이 수행된 페이지, 즉 현재 페이지, 다른 페이지(들) 또는 임의의 템플릿 또는 마스터 페이지에 따라서 또는 변경 타입, 즉 컴포넌트의 삽입, 제거 또는 변경에 따라서 분할될 수도 있다는 것이 이해될 것이다.
더 나아가, 디스플레이는 이러한 변경을 예를 들어 타임스탬프, 페이지 내의 위치 또는 영향받는 컴포넌트 타입에 따라서 정렬하도록 사용될 수도 있다. 모바일 편집기는 선택된 변경의 세트에 대해 되돌리기 동작을 지원할 수도 있다. 그러면 모바일 핸들러(360)는 임의의 변경을 되돌려서, 예를 들어 제거된 컴포넌트를 재삽입할 수도 있는데 이것은 역 컴포넌트 포지션 변경이다.
더 나아가 리컨버터(300)는 모바일 레이아웃 구성 재생(regeneration) 옵션을 지원할 수도 있다. 활성화되는 경우, 리컨버터(300)는 최초 레이아웃 컨버터(200)가 하재 데스크탑 레이아웃 구성(최초 레이아웃 컨버터(200)가 마지막으로 실행된 이후에 변경되었음) 상에서 다시 실행되도록 명령할 수도 있고, 모바일 레이아웃 구성에 특유한 변경은 다시 적용될 수도 있다.
재생이 재생성되어야 하는 페이지(현재 페이지, 특정한 페이지, 전체 애플리케이션) 및 모바일 레이아웃 구성이 재생된 이후에 다시 적용되어야 하는 모바일 레이아웃 구성 변경에 적용될 수도 있다는 것이 이해될 것이다. 이것은 카테고리(예컨대 컴포넌트 감추기 전용)에 의하여 선택되거나, 특정한 선택된 변경을 포함하거나, 모든 변경을 포함할 수 있다. 만일 재생 실행이 모바일 레이아웃 구성 변경을 주어진 페이지 또는 페이지에 다시 적용시키지 않으면서 수행된다면, 관련된 모바일 레이아웃 구성 변경은 버려진다는 것이 역시 이해될 것이다.
디스플레이어(290)는 본 명세서에서 위에서 설명된 바와 같은 새로운 업데이트된 모바일 레이아웃 구성을 디스플레이할 수도 있다.
위에서 설명된 바와 같은 시스템은 여러 방법으로 적합한 웹사이트 구축 시스템과 통합될 수도 있다. 예를 들어, 시스템(100)은 전체적으로 클라이언트 측에서, 전체적으로 서버 측에서 또는 양자 모두에서 실제 웹사이트 구축 시스템 코드와 통합될 수 있다. 또한 시스템(100)은 웹사이트 구축 시스템과 동일한 서버 플랫폼에서 또는 별개의 독립형 서버 또는 서버 세트에서 작동될 수도 있다. 시스템(100)은 온-라인으로(웹사이트 구축 시스템 페이지가 보여질 때마다), 오프라인에서(웹사이트 구축 시스템의 저장된 변환된 버전을 생성하도록) 또는 조합하여(일부 스테이지는 오프라인으로 활성화되고 나머지는 온-라인으로 활성화됨) 작동될 수도 있다. 이것은 웹사이트 구축 시스템 데이터 구조에서 직접적으로 작동하거나 시스템(100)을 웹사이트 구축 시스템 콘텐츠로부터 격리시키도록 웹사이트 구축 시스템에 의하여 호출되는 인터페이스(예컨대 웹 서비스)를 제공할 수 있다.
본 발명의 다른 실시예에서, 시스템(100)의 다른 엘리먼트는 그들의 기능성을 다른 방식으로 나눌 수도 있고 위에서 언급된 기능성을 본 명세서에서 설명되는 것과 다른 순서로 수행할 수도 있다는 것이 이해될 것이다. 시스템(100)이 부분적인 기능성을 사용하여 부분적으로 구현될 수도 있다는 것이 역시 이해될 것이다.
따라서 특정 애플리케이션의 데스크탑 레이아웃 구성은 컴포넌트들 사이의 관련성을 고려하면서 모바일 레이아웃 구성(또는 임의의 다른 사이징된 타겟 레이아웃)으로 적절하게 변환될 수도 있다. 더욱이, 최초 변환 이후에, 동일한 페이지에 대하여 데스크탑 및 모바일 레이아웃 구성에 대하여 변경이 이루어질 수도 있고, 이러한 변경은 새롭게 생성된 모바일 페이지 내에 반영될 수도 있다.
구체적으로 달리 진술되지 않는 한, 앞선 논의로부터 명백히 알 수 있는 것과 같이, 명세서 전체에 걸쳐서 "처리", "컴퓨팅", "계산", "결정" 등과 같은 용어를 활용한 설명은, 컴퓨팅 시스템의 레지스터 및/또는 메모리 내에서 전자 공학과 같은 물리량으로서 표현되는 데이터를, 컴퓨팅 시스템의 메모리, 레지스터 또는 이러한 다른 정보 저장소, 송신 디바이스 또는 디스플레이 디바이스 내의 물리량으로서 이와 유사하게 표현되는 다른 데이터로 조작 및/또는 변환하는 컴퓨터, 컴퓨팅 시스템, 클라이언트/서버 시스템 또는 유사한 전자 컴퓨팅 디바이스의 동작 및/또는 프로세스를 지칭한다는 것이 이해될 것이다.
본 발명의 실시예는 본 명세서의 동작들을 수행하기 위한 장치를 포함할 수 있다. 이러한 장치는 원하는 목적을 위하여 특별하게 구성될 수도 있고, 또는 컴퓨터 내에 저장된 컴퓨터 프로그램에 의하여 선택적으로 활성화되거나 재구성되는 범용 컴퓨터를 포함할 수 있다. 결과적으로 얻어지는 장치는 소프트웨어에 의하여 명령될 경우 범용 컴퓨터를 본 명세서에서 논의된 바와 같은 진보적인 구성요소로 바꿀 수도 있다. 명령은 소망되는 컴퓨터 플랫폼과 함께 동작하는 진보적인 디바이스를 규정할 수 있다. 이러한 컴퓨터 프로그램은 플로피 디스크, 광학 디스크, 자기-광학 디스크, 판독-전용 메모리(ROMs), 콤팩트 디스크 판독-전용 메모리(CD-ROMs), 랜덤 액세스 메모리(RAMs), 전기적으로 프로그래밍가능한 판독-전용 메모리(EPROMs), 전기적으로 소거가능하고 프로그래밍가능한 판독 전용 메모리(EEPROMs), 자기 또는 광학 카드, 플래시 메모리, 디스크-온-키(disk-on-key) 또는 전자 명령을 저장하기에 적합하고 컴퓨터 시스템 버스에 연결될 수 있는 임의의 다른 타입의 미디어를 포함하지만 이들로 한정되는 것은 아닌 임의의 타입의 디스크에 저장될 수 있다.
본 명세서에서 제공되는 프로세스 및 디스플레이는 임의의 특정 컴퓨터 또는 다른 장치에 내재적으로 관련되지 않는다. 다양한 범용 시스템이 본 명세서의 교시 내용에 따르는 프로그램과 함께 사용될 수 있으며, 또는 원하는 방법을 수행하기 위하여 더 전문화된 장치를 구성하는 것이 편리하다고 것 밝혀질 수 있다. 이러한 다양한 시스템에 대한 소망되는 구성은 상기 설명으로부터 명백해질 것이다. 추가적으로, 본 발명의 실시예는 임의의 특정 프로그래밍 언어를 참조하여 설명되지 않는다. 다양한 프로그래밍 언어는 본 명세서에서 설명된 바와 같은 본 발명의 교시를 구현하기 위하여 사용될 수 있다는 것이 이해될 수 있을 것이다.
본 발명의 특징들이 본 명세서에서 예시되었고 설명되었지만, 이제 많은 변형, 치환, 변경, 및 균등물이 당업자들에게 떠오를 것이다. 그러므로, 첨부된 청구항이 본 발명의 진정한 사상에 속하는 이러한 모든 변형 및 변경을 포함하도록 의도된다는 것이 이해될 것이다.
Claims (13)
- 페이지를 소스 레이아웃으로부터 타겟 레이아웃으로 변환한 후 웹사이트 구축 시스템의 웹사이트의 레이아웃을 재변환하기 위한 시스템으로서,
하드웨어 프로세서; 및
상기 프로세서 상에서 실행되는 레이아웃 리컨버터를 포함하고,
상기 레이아웃 리컨버터는,
상기 소스 레이아웃으로부터 상기 웹사이트의 컴포넌트에 대한 변경을 상기 타겟 레이아웃에 업데이트하고,
상기 타겟 레이아웃과 동일한 플랫폼 상에서 실행되는 편집기를 통하여 상기 웹사이트에 대해 이루어진 독립적인 변경을 상기 타겟 레이아웃 상에 병합하는, 시스템. - 제1항에 있어서,
상기 타겟 레이아웃은 모바일 플랫폼 상에 있는, 시스템. - 제2항에 있어서,
상기 레이아웃 리컨버터는,
페이지가 상기 소스 레이아웃에서 삭제되는 경우에 상기 타겟 레이아웃으로부터 상기 페이지를 삭제하기 위한 페이지 삭제기(deleter);
페이지가 상기 소스 레이아웃에 추가되는 경우에 상기 페이지를 상기 타겟 레이아웃에 추가하고 또한 새롭게 삽입된 페이지를 포함하도록 타겟 디스플레이 네비게이션 메뉴를 업데이트하는 페이지 추가기(adder);
컴포넌트가 상기 소스 레이아웃으로부터 삭제되는 경우에 상기 타겟 레이아웃으로부터 상기 컴포넌트를 삭제하고 또한 그에 따라 타겟 디스플레이를 업데이트하는 컴포넌트 삭제기;
컴포넌트가 상기 소스 레이아웃에 추가되는 경우에 상기 컴포넌트를 상기 타겟 레이아웃에 추가하는 컴포넌트 추가기;
컴포넌트가 상기 소스 레이아웃에서 변경되는 경우 상기 타겟 레이아웃으로부터 상기 컴포넌트를 변경하는 컴포넌트 변경기; 및
상기 편집기로부터 명령을 수신하고 상기 명령에 따른 변경을 상기 타겟 레이아웃에 핸들링하기 위한 모바일 핸들러를 포함하는, 시스템. - 제3항에 있어서,
상기 컴포넌트 추가기는,
추가된 컴포넌트를 식별하고 상기 컴포넌트가 상기 타겟 디스플레이에 적합한지 여부를 결정하기 위한 추가된 컴포넌트 식별자;
상기 소스 레이아웃에 추가된 컴포넌트에 최근접한 최근접 선행자 컴포넌트 및 부모 컴포넌트 중 적어도 하나를 검색하는 부모/선행자 검색기; 및
상기 추가된 컴포넌트를 최근접 선행자 컴포넌트 및 부모 컴포넌트 중 적어도 하나의 위치에 따라 상기 타겟 레이아웃에 삽입하는 모바일 레이아웃 추가기를 포함하는, 시스템. - 제3항에 있어서,
상기 모바일 핸들러는,
재생성되어야 하는 상기 웹사이트의 페이지 상에서, 및 상기 타겟 디스플레이 레이아웃 구성이 재생성된 후에 다시 적용되어야 하는 상기 모바일 레이아웃 구성 변경 상에서 동작하는, 시스템. - 제1항에 있어서,
상기 타겟 레이아웃 구성에 대한 변경의 범위를 한정하기 위해 상기 레이아웃 리컨버터를 더 포함하는, 시스템. - 제1항에 있어서,
상기 ID에 따라 변경된 상기 웹사이트 컴포넌트에 대한 변경된 속성 및 값 변경을 추적하는 상기 레이아웃 컨버터를 포함하는, 시스템. - 페이지를 소스 레이아웃으로부터 타겟 레이아웃으로 변환한 후 웹사이트 구축 시스템의 웹사이트의 레이아웃을 재변환하기 위한 방법으로서,
상기 소스 레이아웃으로부터 상기 웹사이트의 컴포넌트에 대한 변경을 상기 타겟 레이아웃에 업데이트하는 단계; 및
상기 타겟 레이아웃과 동일한 플랫폼 상에서 실행되는 편집기를 통하여 상기 웹사이트에 대해 이루어진 독립적인 변경을 상기 타겟 레이아웃 상에 병합하는 단계를 포함하는, 방법. - 제8항에 있어서, 상기 업데이트하는 단계 및 상기 병합하는 단계는,
페이지가 상기 소스 레이아웃으로부터 삭제되는 경우에 상기 타겟 레이아웃으로부터 상기 페이지를 삭제하는 단계;
페이지가 상기 소스 레이아웃에 추가되는 경우에 상기 페이지를 상기 타겟 레이아웃에 추가하고 또한 새롭게 삽입된 페이지를 포함하도록 타겟 디스플레이 네비게이션 메뉴를 업데이트하는 단계;
컴포넌트가 상기 소스 레이아웃으로부터 삭제되는 경우에 상기 타겟 레이아웃으로부터 상기 컴포넌트를 삭제하고 또한 그에 따라 타겟 디스플레이를 업데이트하는 단계;
컴포넌트가 상기 소스 레이아웃에 추가되는 경우에 상기 컴포넌트를 상기 타겟 레이아웃 추가하는 단계;
컴포넌트가 상기 소스 레이아웃에서 변경되는 경우 상기 타겟 레이아웃으로부터 상기 컴포넌트를 변경하는 단계; 및
상기 편집기로부터 명령을 수신하고 상기 명령에 따른 변경을 상기 타겟 레이아웃에 핸들링하는 단계를 포함하는, 방법. - 제9항에 있어서, 상기 컴포넌트를 추가하는 단계는,
추가된 컴포넌트를 식별하고 상기 컴포넌트가 상기 타겟 디스플레이에 적합한지 여부를 결정하는 단계;
상기 소스 레이아웃에 추가된 컴포넌트에 최근접한 최근접 선행자 컴포넌트 및 부모 컴포넌트 중 적어도 하나를 검색하는 단계; 및
상기 추가된 컴포넌트를 최근접 선행자 컴포넌트 및 부모 컴포넌트 중 적어도 하나의 위치에 따라 상기 타겟 레이아웃에 삽입하는 단계를 포함하는, 방법. - 제9항에 있어서,
상기 편집기로부터 명령을 수신하고 상기 명령에 따른 변경을 상기 타겟 레이아웃에 핸들링하는 단계는,
재생성되어야 하는 상기 웹사이트의 페이지 상에서, 및 상기 타겟 디스플레이 레이아웃 구성이 재생성된 후에 다시 적용되어야 하는 모바일 레이아웃 구성 변경 상에서 동작하는, 방법. - 제8항에 있어서,
상기 타겟 레이아웃 구성에 대한 변경의 범위를 한정하는 단계를 더 포함하는, 방법. - 제8항에 있어서,
상기 ID에 따라 변경된 상기 웹사이트 컴포넌트에 대한 변경된 속성 및 값 변경을 추적하는 단계를 더 포함하는, 방법.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| KR1020217030336A KR102469977B1 (ko) | 2013-09-12 | 2014-09-11 | 모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 |
Applications Claiming Priority (4)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| US201361876795P | 2013-09-12 | 2013-09-12 | |
| US61/876,795 | 2013-09-12 | ||
| KR1020167009715A KR102134309B1 (ko) | 2013-09-12 | 2014-09-11 | 모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 |
| PCT/IB2014/064448 WO2015036962A1 (en) | 2013-09-12 | 2014-09-11 | System and method for automated conversion of interactive sites and applications to support mobile and other display environments |
Related Parent Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| KR1020167009715A Division KR102134309B1 (ko) | 2013-09-12 | 2014-09-11 | 모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 |
Related Child Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| KR1020217030336A Division KR102469977B1 (ko) | 2013-09-12 | 2014-09-11 | 모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| KR20200086387A true KR20200086387A (ko) | 2020-07-16 |
| KR102306149B1 KR102306149B1 (ko) | 2021-09-28 |
Family
ID=52626786
Family Applications (3)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| KR1020167009715A KR102134309B1 (ko) | 2013-09-12 | 2014-09-11 | 모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 |
| KR1020207019905A KR102306149B1 (ko) | 2013-09-12 | 2014-09-11 | 모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 |
| KR1020217030336A KR102469977B1 (ko) | 2013-09-12 | 2014-09-11 | 모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 |
Family Applications Before (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| KR1020167009715A KR102134309B1 (ko) | 2013-09-12 | 2014-09-11 | 모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 |
Family Applications After (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| KR1020217030336A KR102469977B1 (ko) | 2013-09-12 | 2014-09-11 | 모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 |
Country Status (12)
| Country | Link |
|---|---|
| US (2) | US10176154B2 (ko) |
| EP (1) | EP3044693A4 (ko) |
| JP (5) | JP6482562B2 (ko) |
| KR (3) | KR102134309B1 (ko) |
| CN (2) | CN110413925B (ko) |
| AU (4) | AU2014319964B2 (ko) |
| CA (1) | CA2923580C (ko) |
| EA (2) | EA201991710A3 (ko) |
| HK (1) | HK1221800A1 (ko) |
| IL (4) | IL271365B2 (ko) |
| MX (2) | MX362623B (ko) |
| WO (1) | WO2015036962A1 (ko) |
Families Citing this family (76)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2021161104A1 (en) | 2020-02-12 | 2021-08-19 | Monday.Com | Enhanced display features in collaborative network systems, methods, and devices |
| US11410129B2 (en) | 2010-05-01 | 2022-08-09 | Monday.com Ltd. | Digital processing systems and methods for two-way syncing with third party applications in collaborative work systems |
| WO2021144656A1 (en) * | 2020-01-15 | 2021-07-22 | Monday.Com | Digital processing systems and methods for graphical dynamic table gauges in collaborative work systems |
| US9311427B2 (en) | 2012-01-03 | 2016-04-12 | Cimpress Schweiz Gmbh | Automated generation of mobile optimized website based on an existing conventional web page description |
| US11188509B2 (en) | 2012-02-20 | 2021-11-30 | Wix.Com Ltd. | System and method for generating a visual data structure associated with business information based on a hierarchy of components |
| US9996566B2 (en) | 2012-02-20 | 2018-06-12 | Wix.Com Ltd. | Visual design system for generating a visual data structure associated with a semantic composition based on a hierarchy of components |
| US9256341B2 (en) | 2013-03-20 | 2016-02-09 | Microsoft Technology Licensing, Llc | Tracking changes in collaborative authoring environment |
| US10824787B2 (en) * | 2013-12-21 | 2020-11-03 | Microsoft Technology Licensing, Llc | Authoring through crowdsourcing based suggestions |
| US11514399B2 (en) * | 2013-12-21 | 2022-11-29 | Microsoft Technology Licensing, Llc | Authoring through suggestion |
| BR112016024774A2 (pt) | 2014-04-29 | 2017-08-15 | Wix Com Ltd | sistema de criação de website implementável em um dispositivo de computação, e método implementável em um dispositivo de computação |
| US10139998B2 (en) * | 2014-10-08 | 2018-11-27 | Weebly, Inc. | User interface for editing web content |
| AU2016276284B9 (en) * | 2015-06-07 | 2020-05-21 | Wix.Com Ltd | System and method for the generation of an adaptive user interface in a website building system |
| CN106326251B (zh) * | 2015-06-23 | 2019-05-17 | 阿里巴巴集团控股有限公司 | 待展示对象的全尺寸适配方法及装置 |
| MX2018001255A (es) | 2015-07-30 | 2018-07-06 | Wix Com Ltd | SISTEMA Y MíTODO PARA LA CREACIíN Y USO DE ESTRUCTURAS DE DATOS VISUALES DINíMICOS DE CALIDAD ALTA VISUALMENTE DIVERSOS. |
| US10769231B2 (en) | 2015-07-30 | 2020-09-08 | Wix.Com Ltd. | System integrating a mobile device application creation, editing and distribution system with a website design system |
| CN106547420B (zh) | 2015-09-23 | 2020-06-02 | 阿里巴巴集团控股有限公司 | 一种页面处理方法和装置 |
| CN105279141B (zh) * | 2015-10-27 | 2018-10-26 | 武汉改图网技术有限公司 | 一种基于模糊匹配算法的印刷品仿制设计方法和系统 |
| WO2017135985A1 (en) | 2016-02-01 | 2017-08-10 | Google Inc. | Systems and methods for dynamically restricting the rendering of unauthorized content included in information resources |
| EP3561712B1 (en) * | 2016-02-01 | 2020-08-26 | Google LLC | Systems and methods for deploying countermeasures against unauthorized scripts interfering with the rendering of content elements on information resources |
| US10073923B2 (en) | 2016-05-29 | 2018-09-11 | Wix.Com Ltd. | System and method for the creation and update of hierarchical websites based on collected business knowledge |
| BR112019001343A2 (pt) | 2016-07-27 | 2019-04-30 | Wix.Com Ltd. | sistema de criação de website e método para um sistema de criação de website |
| US10372812B2 (en) * | 2016-09-01 | 2019-08-06 | Adobe Inc. | Combining aspects of a template into multiple web pages |
| US10984460B2 (en) * | 2016-10-14 | 2021-04-20 | Under Armour, Inc. | Medium, method and apparatus for native page generation |
| CN107133313A (zh) * | 2017-05-02 | 2017-09-05 | 山东浪潮通软信息科技有限公司 | 实现可配置的查询页面的方法及系统、服务端、客户端 |
| US10210240B2 (en) * | 2017-06-30 | 2019-02-19 | Capital One Services, Llc | Systems and methods for code parsing and lineage detection |
| WO2019106566A2 (en) | 2017-11-28 | 2019-06-06 | Wix.Com Ltd. | System and method for the generation and editing of text content in website building systems |
| JP6368421B1 (ja) * | 2017-12-21 | 2018-08-01 | 株式会社Ｃｙｇａｍｅｓ | 立体を認識するためのプログラム、システム、電子装置、及び方法 |
| US11112927B2 (en) * | 2018-04-25 | 2021-09-07 | Adobe Inc. | Digital content automated layout system |
| CN108573112B (zh) * | 2018-05-08 | 2023-04-07 | 北京特种工程设计研究院 | 基于数字化仿真的航天测试发射二维布局分析方法 |
| US11436359B2 (en) | 2018-07-04 | 2022-09-06 | Monday.com Ltd. | System and method for managing permissions of users for a single data type column-oriented data structure |
| US11698890B2 (en) | 2018-07-04 | 2023-07-11 | Monday.com Ltd. | System and method for generating a column-oriented data structure repository for columns of single data types |
| CN108959595B (zh) * | 2018-07-12 | 2023-05-23 | 腾讯科技（深圳）有限公司 | 基于虚拟与现实的网站构建和体验方法及其装置 |
| JP7373563B2 (ja) | 2018-11-14 | 2023-11-02 | ウィックス．コム リミテッド． | ウェブサイト構築システム用の構成可能なアプリケーションの作成および処理のためのシステムおよび方法 |
| CN109614136A (zh) * | 2018-11-26 | 2019-04-12 | 郑州云海信息技术有限公司 | 网页配置信息的管理方法和装置 |
| CN109710355B (zh) * | 2018-12-18 | 2020-01-10 | 北京字节跳动网络技术有限公司 | 基于web交互的tip显示内容处理方法、装置及电子设备 |
| EP3973419A4 (en) | 2019-05-20 | 2023-03-29 | Wix.com Ltd. | SYSTEM AND METHOD FOR PROVIDING RESPONSIVE EDIT AND VIEWING, INTEGRATE HIERARCHICAL FLUID COMPONENTS AND DYNAMIC LAYOUT |
| WO2020240538A1 (en) | 2019-05-28 | 2020-12-03 | Wix.Com Ltd. | System and method for integrating user feedback into website building system services |
| IL301289A (en) | 2019-05-30 | 2023-05-01 | Wix Com Ltd | A system and method for interactive creation and editing of live documents |
| CN112230828B (zh) * | 2019-07-15 | 2023-07-25 | 腾讯科技（深圳）有限公司 | 组件布局方法及装置、存储介质 |
| CN110609968B (zh) * | 2019-07-31 | 2021-08-24 | 浙江口碑网络技术有限公司 | 图文信息的排序处理方法、装置及设备 |
| CN110580384B (zh) * | 2019-08-19 | 2021-03-30 | 华南理工大学 | 同时求解开关变换器多尺度状态变量的非线性建模方法 |
| US20210056935A1 (en) * | 2019-08-21 | 2021-02-25 | Aveva Software, Llc | Responsive layout system and server |
| JP7395915B2 (ja) * | 2019-09-30 | 2023-12-12 | 大日本印刷株式会社 | 情報処理装置、コンピュータプログラム及び情報処理方法 |
| KR102358855B1 (ko) * | 2019-10-04 | 2022-02-08 | (주)텐스 | 웹 페이지를 생성하는 방법 및 장치 |
| CN110457030B (zh) * | 2019-10-08 | 2020-02-07 | 成都四方伟业软件股份有限公司 | 一种组件编排的移动适配重排方法及装置 |
| EP4062313A1 (en) | 2019-11-18 | 2022-09-28 | Monday.com Ltd. | Collaborative networking systems, methods, and devices |
| US11775890B2 (en) | 2019-11-18 | 2023-10-03 | Monday.Com | Digital processing systems and methods for map-based data organization in collaborative work systems |
| CN110889013B (zh) * | 2019-11-22 | 2023-04-07 | 北京锐安科技有限公司 | 一种基于xml的数据关联方法、装置、服务器及存储介质 |
| US20240184989A1 (en) | 2020-05-01 | 2024-06-06 | Monday.com Ltd. | Digital processing systems and methods for virtualfile-based electronic white board in collaborative work systems systems |
| IL297858A (en) | 2020-05-01 | 2023-01-01 | Monday Com Ltd | Digital processing systems and methods for improved networking and collaborative work management systems, methods and devices |
| US11277361B2 (en) | 2020-05-03 | 2022-03-15 | Monday.com Ltd. | Digital processing systems and methods for variable hang-time for social layer messages in collaborative work systems |
| US11803689B2 (en) * | 2020-08-05 | 2023-10-31 | Microstrategy Incorporated | System and method for dossier creation with responsive view handling for free-form layout |
| CN112000328B (zh) * | 2020-09-04 | 2023-12-01 | 赞同科技股份有限公司 | 一种页面可视化编辑方法、装置及设备 |
| US11989254B2 (en) * | 2020-09-10 | 2024-05-21 | Taboola.Com Ltd. | Semantic meaning association to components of digital content |
| JP7512798B2 (ja) | 2020-09-28 | 2024-07-09 | 大日本印刷株式会社 | 情報処理装置及びコンピュータプログラム |
| US12026447B2 (en) * | 2020-10-23 | 2024-07-02 | Gary Bloom | Text editor for literary works with rhyme or rhythm |
| CN112559943B (zh) * | 2020-12-25 | 2024-02-27 | 北京百度网讯科技有限公司 | 网页元素的显示方法、装置、电子设备、存储介质及产品 |
| US11687216B2 (en) | 2021-01-14 | 2023-06-27 | Monday.com Ltd. | Digital processing systems and methods for dynamically updating documents with data from linked files in collaborative work systems |
| US11907503B2 (en) * | 2021-03-01 | 2024-02-20 | Boe Technology Group Co., Ltd. | Switching display of page between a window of a graphical user interface and an independent child window |
| CN113110839A (zh) * | 2021-04-21 | 2021-07-13 | 上海星融汽车科技有限公司 | 控件显示方法、系统及电子设备 |
| CN113190267B (zh) * | 2021-05-27 | 2024-03-26 | 上海幻电信息科技有限公司 | 界面布局的动态配置方法与系统 |
| US12056664B2 (en) | 2021-08-17 | 2024-08-06 | Monday.com Ltd. | Digital processing systems and methods for external events trigger automatic text-based document alterations in collaborative work systems |
| CN113468460B (zh) * | 2021-09-02 | 2022-02-25 | 北京优锘科技有限公司 | 基于YAML语言渲染Web页面的方法、装置和设备 |
| US12105948B2 (en) | 2021-10-29 | 2024-10-01 | Monday.com Ltd. | Digital processing systems and methods for display navigation mini maps |
| US11983550B2 (en) * | 2021-11-17 | 2024-05-14 | Zoho Corporation Private Limited | View customization in CRM application |
| US11922110B2 (en) * | 2021-11-24 | 2024-03-05 | Adobe Inc. | Responsive document authoring |
| KR102684901B1 (ko) * | 2021-11-30 | 2024-07-16 | 주식회사 오비고 | 차량용 디스플레이 장치에 표시되는 웹 컨텐츠의 적합성을 판단하는 방법 및 서버 |
| JP7383083B1 (ja) | 2022-06-20 | 2023-11-17 | 楽天グループ株式会社 | 情報処理装置、情報処理方法、および情報処理プログラム |
| US11741071B1 (en) | 2022-12-28 | 2023-08-29 | Monday.com Ltd. | Digital processing systems and methods for navigating and viewing displayed content |
| US11886683B1 (en) | 2022-12-30 | 2024-01-30 | Monday.com Ltd | Digital processing systems and methods for presenting board graphics |
| US11893381B1 (en) | 2023-02-21 | 2024-02-06 | Monday.com Ltd | Digital processing systems and methods for reducing file bundle sizes |
| AU2023201537B1 (en) * | 2023-03-13 | 2024-05-02 | Canva Pty Ltd | Systems and methods for identifying and/or transferring decorative design elements |
| AU2023210530B1 (en) * | 2023-07-31 | 2023-11-16 | Canva Pty Ltd | Systems and methods for processing designs |
| KR102614060B1 (ko) | 2023-11-21 | 2023-12-15 | 인프라닉스 주식회사 | 일반 애플리케이션을 서비스형 소프트웨어 애플리케이션으로 변환하기 위한 자동 분석 방법 |
| US12118401B1 (en) | 2023-11-28 | 2024-10-15 | Monday.com Ltd. | Digital processing systems and methods for facilitating the development and implementation of applications in conjunction with a serverless environment |
| CN118069949B (zh) * | 2024-04-17 | 2024-06-28 | 成都中科合迅科技有限公司 | 基于组件树架构的动态布局方法和系统 |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110107281A1 (en) * | 2009-10-30 | 2011-05-05 | Synopsys, Inc. | Tiered schematic-driven layout synchronization in electronic design automation |
Family Cites Families (67)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US5986654A (en) | 1997-05-29 | 1999-11-16 | Oracle Corporation | System and method for rendering on-screen iconic buttons with dynamic textual link |
| US6300947B1 (en) * | 1998-07-06 | 2001-10-09 | International Business Machines Corporation | Display screen and window size related web page adaptation system |
| JP2000112800A (ja) * | 1998-10-07 | 2000-04-21 | Nec Corp | ファイル履歴管理システム |
| US6603493B1 (en) * | 1999-04-13 | 2003-08-05 | International Business Machines Corporation | Method for arranging display elements |
| US7047033B2 (en) * | 2000-02-01 | 2006-05-16 | Infogin Ltd | Methods and apparatus for analyzing, processing and formatting network information such as web-pages |
| US7747782B2 (en) * | 2000-04-26 | 2010-06-29 | Novarra, Inc. | System and method for providing and displaying information content |
| US7500188B1 (en) * | 2000-04-26 | 2009-03-03 | Novarra, Inc. | System and method for adapting information content for an electronic device |
| US7210100B2 (en) * | 2000-09-27 | 2007-04-24 | Eizel Technologies, Inc. | Configurable transformation of electronic documents |
| US7613810B2 (en) * | 2000-09-27 | 2009-11-03 | Nokia Inc. | Segmenting electronic documents for use on a device of limited capability |
| US6976226B1 (en) * | 2001-07-06 | 2005-12-13 | Palm, Inc. | Translating tabular data formatted for one display device to a format for display on other display devices |
| US7843437B1 (en) * | 2002-01-14 | 2010-11-30 | Palm, Inc. | Hand-held browser transcoding |
| US20070143750A1 (en) * | 2004-08-05 | 2007-06-21 | Quark, Inc. | Systems and methods for multi-format media production |
| WO2003098451A1 (en) | 2002-05-16 | 2003-11-27 | Agency For Science, Technology And Research | Apparatus for discovering computing services architecture an developing patterns of computing services and method therefor |
| US7523394B2 (en) * | 2002-06-28 | 2009-04-21 | Microsoft Corporation | Word-processing document stored in a single XML file that may be manipulated by applications that understand XML |
| NO318991B1 (no) * | 2002-09-05 | 2005-05-30 | Opera Software Asa | Presentasjon av HTML-innhold på en liten terminalskjerm |
| CN101286172B (zh) * | 2002-09-13 | 2012-11-14 | 雅虎公司 | 改进的浏览器用户界面 |
| US7203901B2 (en) * | 2002-11-27 | 2007-04-10 | Microsoft Corporation | Small form factor web browsing |
| US7877681B2 (en) * | 2002-12-05 | 2011-01-25 | Borland Software Corporation | Automatic context management for web applications with client side code execution |
| US7316003B1 (en) * | 2002-12-18 | 2008-01-01 | Oracle International Corp. | System and method for developing a dynamic web page |
| WO2004068320A2 (en) * | 2003-01-27 | 2004-08-12 | Vincent Wen-Jeng Lue | Method and apparatus for adapting web contents to different display area dimensions |
| JP3982454B2 (ja) * | 2003-05-27 | 2007-09-26 | ソニー株式会社 | 携帯型電子機器、ウェブページ処理方法およびプログラム |
| US8745515B2 (en) * | 2004-04-07 | 2014-06-03 | Nokia Corporation | Presentation of large pages on small displays |
| US20070083810A1 (en) * | 2003-09-30 | 2007-04-12 | Scott Simon D | Web content adaptation process and system |
| NO20034724D0 (no) * | 2003-10-22 | 2003-10-22 | Opera Software Asa | Presentasjon av HTML-innhold på en skjermterminal |
| US7721197B2 (en) * | 2004-08-12 | 2010-05-18 | Microsoft Corporation | System and method of displaying content on small screen computing devices |
| US7636891B2 (en) * | 2004-08-31 | 2009-12-22 | Research In Motion Limited | Method for paginating a document structure of a document for viewing on a mobile communication device |
| US7712027B2 (en) * | 2004-08-31 | 2010-05-04 | Research In Motion Limited | Method for document page delivery to a mobile communication device |
| US8402361B2 (en) * | 2004-11-09 | 2013-03-19 | Oracle International Corporation | Methods and systems for implementing a dynamic hierarchical data viewer |
| US7672995B2 (en) * | 2004-12-02 | 2010-03-02 | Microsoft Corporation | System and method for publishing collaboration items to a web site |
| US20060184642A1 (en) * | 2005-01-24 | 2006-08-17 | Michael Red | System and method for creating and adminstering Web content |
| US20060227153A1 (en) * | 2005-04-08 | 2006-10-12 | Picsel Research Limited | System and method for dynamically zooming and rearranging display items |
| US20070016577A1 (en) * | 2005-07-13 | 2007-01-18 | Rivergy, Inc. | System for building a website |
| US20090043777A1 (en) * | 2006-03-01 | 2009-02-12 | Eran Shmuel Wyler | Methods and apparatus for enabling use of web content on various types of devices |
| US7624114B2 (en) * | 2006-06-05 | 2009-11-24 | Microsoft Corporation | Automatically generating web forms from database schema |
| US7600188B2 (en) * | 2006-06-15 | 2009-10-06 | Glogood, Inc. | Interface for directing a user to build a website |
| US20080120538A1 (en) * | 2006-11-22 | 2008-05-22 | University Of New Brunswick | Visual web page authoring tool for multi-context web pages |
| US8181107B2 (en) * | 2006-12-08 | 2012-05-15 | Bytemobile, Inc. | Content adaptation |
| KR100844071B1 (ko) * | 2007-05-09 | 2008-07-07 | 엘지전자 주식회사 | 웹페이지 표시가 가능한 이동통신 단말기 및 그 제어방법 |
| US8255793B2 (en) * | 2008-01-08 | 2012-08-28 | Yahoo! Inc. | Automatic visual segmentation of webpages |
| JP2009176144A (ja) * | 2008-01-25 | 2009-08-06 | Access Co Ltd | マークアップ言語文書変換システム、マークアップ言語文書変換装置、マークアップ言語文書変換方法およびマークアップ言語文書変換プログラム |
| US8762938B2 (en) * | 2008-04-28 | 2014-06-24 | Salesforce.Com, Inc. | Object-oriented system for creating and managing websites and their content |
| US8234351B2 (en) | 2008-07-24 | 2012-07-31 | Go Daddy Operating Company, LLC | Systems for generating and registering enhanced domain names |
| US8719701B2 (en) * | 2009-01-02 | 2014-05-06 | Apple Inc. | Identification of guides and gutters of a document |
| US20100235411A1 (en) * | 2009-03-16 | 2010-09-16 | Bray Carne Robert Gordon | Systems and methods for creating a customized website |
| EP2336904A1 (en) * | 2009-12-18 | 2011-06-22 | Siemens Aktiengesellschaft | A method for safeguarding the integrity of a relational database in case of structural transaction execution |
| US20110216827A1 (en) * | 2010-02-23 | 2011-09-08 | Jiancong Luo | Method and apparatus for efficient encoding of multi-view coded video data |
| US20130014008A1 (en) | 2010-03-22 | 2013-01-10 | Niranjan Damera-Venkata | Adjusting an Automatic Template Layout by Providing a Constraint |
| US8453049B1 (en) * | 2010-05-19 | 2013-05-28 | Google Inc. | Delayed code parsing for reduced startup latency |
| CN101853293B (zh) * | 2010-05-26 | 2012-07-25 | 卓望数码技术（深圳）有限公司 | 一种自适应分页的方法及装置 |
| US8555155B2 (en) * | 2010-06-04 | 2013-10-08 | Apple Inc. | Reader mode presentation of web content |
| WO2012006567A1 (en) * | 2010-07-08 | 2012-01-12 | Fisher Printing, Inc. | Dynamic website building system |
| US20120159314A1 (en) | 2010-12-16 | 2012-06-21 | Microsoft Corporation | Adaptive content layout |
| US8872855B2 (en) | 2011-07-21 | 2014-10-28 | Flipboard, Inc. | Adjusting orientation of content regions in a page layout |
| US9396167B2 (en) * | 2011-07-21 | 2016-07-19 | Flipboard, Inc. | Template-based page layout for hosted social magazines |
| US20130111443A1 (en) * | 2011-10-31 | 2013-05-02 | American Express Travel Related Services Company, Inc. | Methods and Systems for Source Control Management |
| US9053079B2 (en) * | 2011-12-12 | 2015-06-09 | Microsoft Technology Licensing, Llc | Techniques to manage collaborative documents |
| DE102013202782A1 (de) * | 2012-02-20 | 2013-08-22 | Wixpress Ltd | Server-basiertes Webseiten-Designsystem, das ein dynamisches Layout und dynamischen Inhalt integriert |
| KR101299670B1 (ko) * | 2012-04-16 | 2013-08-27 | 권오석 | 웹페이지의 동적 변환 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체 |
| CN102663126B (zh) * | 2012-04-23 | 2014-11-12 | 北京奇虎科技有限公司 | 一种在移动终端中显示网页的方法及装置 |
| US9043441B1 (en) * | 2012-05-29 | 2015-05-26 | Google Inc. | Methods and systems for providing network content for devices with displays having limited viewing area |
| US20140089786A1 (en) * | 2012-06-01 | 2014-03-27 | Atiq Hashmi | Automated Processor For Web Content To Mobile-Optimized Content Transformation |
| CA2817554A1 (en) * | 2012-06-01 | 2013-12-01 | Atiq Hashmi | Mobile content management system |
| US20140325374A1 (en) * | 2013-04-30 | 2014-10-30 | Microsoft Corporation | Cross-device user interface selection |
| US9817804B2 (en) * | 2013-09-12 | 2017-11-14 | Wix.Com Ltd. | System for comparison and merging of versions in edited websites and interactive applications |
| US20150095767A1 (en) | 2013-10-02 | 2015-04-02 | Rachel Ebner | Automatic generation of mobile site layouts |
| US9805134B2 (en) * | 2014-02-11 | 2017-10-31 | Wix.Com Ltd. | System for synchronization of changes in edited websites and interactive applications |
| FR3049741A1 (fr) * | 2016-03-31 | 2017-10-06 | Mediabong | Procede et systeme d'affichage dynamique d'au moins une publicite video dans une page internet destinee a etre vue par un utilisateur. |
-
2014
- 2014-09-11 CN CN201910653083.7A patent/CN110413925B/zh active Active
- 2014-09-11 US US14/483,981 patent/US10176154B2/en active Active
- 2014-09-11 MX MX2016003291A patent/MX362623B/es active IP Right Grant
- 2014-09-11 EP EP14843328.7A patent/EP3044693A4/en not_active Ceased
- 2014-09-11 AU AU2014319964A patent/AU2014319964B2/en active Active
- 2014-09-11 EA EA201991710A patent/EA201991710A3/ru unknown
- 2014-09-11 WO PCT/IB2014/064448 patent/WO2015036962A1/en active Application Filing
- 2014-09-11 IL IL271365A patent/IL271365B2/en unknown
- 2014-09-11 IL IL309121A patent/IL309121B1/en unknown
- 2014-09-11 KR KR1020167009715A patent/KR102134309B1/ko active IP Right Grant
- 2014-09-11 KR KR1020207019905A patent/KR102306149B1/ko active IP Right Grant
- 2014-09-11 CN CN201480061637.XA patent/CN105723358B/zh active Active
- 2014-09-11 IL IL314805A patent/IL314805A/en unknown
- 2014-09-11 CA CA2923580A patent/CA2923580C/en active Active
- 2014-09-11 EA EA201690498A patent/EA033675B1/ru unknown
- 2014-09-11 KR KR1020217030336A patent/KR102469977B1/ko active IP Right Grant
- 2014-09-11 JP JP2016542425A patent/JP6482562B2/ja active Active
-
2016
- 2016-03-09 IL IL244515A patent/IL244515B/en active IP Right Grant
- 2016-03-11 MX MX2019001110A patent/MX2019001110A/es unknown
- 2016-08-22 HK HK16109995.8A patent/HK1221800A1/zh unknown
-
2018
- 2018-11-05 US US16/180,037 patent/US20190087392A1/en active Pending
-
2019
- 2019-02-12 JP JP2019022882A patent/JP6725714B2/ja active Active
- 2019-04-17 AU AU2019202677A patent/AU2019202677B2/en active Active
-
2020
- 2020-06-25 JP JP2020109723A patent/JP6953588B2/ja active Active
-
2021
- 2021-07-14 AU AU2021205057A patent/AU2021205057B2/en active Active
- 2021-09-29 JP JP2021159404A patent/JP7323584B2/ja active Active
-
2023
- 2023-07-27 JP JP2023122628A patent/JP2023159102A/ja active Pending
- 2023-08-30 AU AU2023222882A patent/AU2023222882A1/en active Pending
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110107281A1 (en) * | 2009-10-30 | 2011-05-05 | Synopsys, Inc. | Tiered schematic-driven layout synchronization in electronic design automation |
Also Published As
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR102134309B1 (ko) | 모바일 및 다른 디스플레이 환경을 지원하기 위하여 대화형 사이트 및 애플리케이션을 자동 변환하는 시스템 및 방법 | |
| US20240095297A1 (en) | System for comparison and merging of versions in edited websites and interactive applications | |
| US10409895B2 (en) | Optimizing a document based on dynamically updating content | |
| AU2019226189B2 (en) | A system for comparison and merging of versions in edited websites and interactive applications | |
| BR112016005468B1 (pt) | Conversor implementável por meio de um sistema de cliente/servidor tendo pelo menos um processador para processar instruções que definem o dito conversor; e método implementável em um dispositivo de computação |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| A107 | Divisional application of patent | ||
| E902 | Notification of reason for refusal | ||
| E701 | Decision to grant or registration of patent right | ||
| A107 | Divisional application of patent | ||
| GRNT | Written decision to grant |