Dynamic Web Page Simulation in Authoring Tools
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Designing web pages that adapt to different screen sizes of various media devices is challenging, as existing techniques require manual resizing or porting, and are not integrated into authoring tools, making it difficult to visualize how a web page will appear on different devices without knowing their screen sizes or having access to multiple hardware devices.
Innovation Solution
A web content management system (WCMS) with user interface controls allows users to select media devices and apply media-dependent style rules to simulate the appearance of a web page on different devices, adjusting the viewport and applying style properties based on screen width, resolution, and orientation, enabling visualization of how a web page would render on various devices within the authoring environment.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If manual resizing or porting techniques are used to adapt web pages to different screen sizes, then the web page can be adjusted to fit various devices, but the process becomes complex and requires access to multiple hardware devices or knowledge of screen sizes
Solution Approach 1:
The patent creates virtual copies of different media devices within the authoring tool environment. These virtual device representations include simulated viewports that replicate the screen dimensions, resolution, and orientation characteristics of actual devices. The web page is rendered within these virtual device copies, allowing designers to visualize and adjust layouts without physical hardware access.
Solution Approach 2:
The patent introduces an intermediary simulation layer between the web page authoring process and the actual diverse media devices. This simulation environment acts as a mediator that translates real device characteristics into virtual representations within the authoring tool, enabling designers to work with standardized virtual devices rather than requiring direct connection to multiple physical devices.
2Adaptability or versatility
If authors use existing techniques to resize web pages for different devices, then layout adaptation is possible, but the techniques are not integrated into authoring tools, requiring separate hardware access
Solution Approach 1:
The patent merges the device simulation functionality directly into the web page authoring tool interface. The simulation capabilities, including multiple virtual device viewports and media-dependent style rule applications, are integrated alongside the existing authoring controls. This allows designers to switch between different virtual device views and adjust layouts within the same unified environment without leaving the authoring tool or accessing external hardware.
Solution Approach 2:
The patent creates a universal simulation environment within the authoring tool that can represent multiple different media device types simultaneously. The same authoring tool interface supports rendering for various screen sizes, orientations, and device characteristics through virtual device representations, eliminating the need for separate tools or hardware for each device type.
3Measurement precision
If multiple hardware devices are accessed to test web page layouts, then accurate visualization of device-specific appearance is achieved, but the process becomes time-consuming and requires physical device availability
Solution Approach 1:
The patent pre-configures virtual device representations with accurate device-specific parameters such as screen width, height, resolution, and orientation characteristics. These virtual devices are prepared in advance within the authoring tool with embedded media-dependent style rules that automatically apply appropriate layouts based on device characteristics. When a designer selects a virtual device for testing, the system has already prepared the simulation environment, eliminating the need for time-consuming physical device setup and testing.
Data Source
AI summary
Techniques are disclosed for dynamically simulating a structured document. A visual layout of a presentation of a structured document is determined in accordance with a style property associated with and specific to a first type of media device. The laid out structured document including the style property specific to the first type of media device is sent to a web browser executing on a second type of media device for rendering on the second type of media device. The first type of media device has a different display requirement than the second type of media device. The style property may be encoded in a set of presentation semantics. A media-dependent style rule encoded in the set of presentation semantics may be used to determine that the display requirement of the first type of media device satisfies the media-dependent style rule.