From 50a2bb420f04df4f3aaf83d0f416399e259e6a5f Mon Sep 17 00:00:00 2001 From: omar-srbd <97720126+omar-srbd@users.noreply.github.com> Date: Tue, 17 Sep 2024 17:42:03 +0600 Subject: [PATCH] Site fix --- .../web/guides/w3c/ui/media-query.md | 32 ++++++------ .../web/guides/w3c/ui/multiple-screens.md | 52 +++++++++---------- .../application/web/guides/w3c/ui/selector.md | 30 +++++------ 3 files changed, 57 insertions(+), 57 deletions(-) diff --git a/docs/application/web/guides/w3c/ui/media-query.md b/docs/application/web/guides/w3c/ui/media-query.md index 117dbc650a..66d4c10169 100755 --- a/docs/application/web/guides/w3c/ui/media-query.md +++ b/docs/application/web/guides/w3c/ui/media-query.md @@ -2,7 +2,7 @@ Media queries allow you to [apply the CSS differently according to conditions](#media-query-conditions) based on the media type (type of device) and media features (viewport status). Previously, you were able to use the media type only and create Web services with fixed layouts. However, smart phones, tablets, and other devices with various resolutions require a liquid layout. HTML5 now makes various characteristics and conditional defining possible, and can be used to implement responsive Web design (RWD), which is a [liquid layout](#creating-a-liquid-layout) that mainly reacts according to the device resolution. -You can use media queries in 3 ways: +You can use media queries in the following 3 ways: - In CSS @@ -12,7 +12,7 @@ You can use media queries in 3 ways: @media only screen and (max-width: 480px) {styles} ``` - > **Note** + > [!NOTE] > This approach is popular since it can reduce style overlapping; however, if all the styles are applied to 1 CSS, the maintenance work efficiency decreases. - In an `@import` rule in CSS @@ -31,18 +31,18 @@ You can use media queries in 3 ways: ``` - > **Note** + > [!NOTE] > The disadvantage of this approach is that every time the condition is expanded, the HTML file must be edited. However, since this approach only imports the CSS files that match the condition, the file transmission amount can be reduced. For more information on the CSS priorities when different media queries are used, see [Media Query Priorities](#media-query-priorities). -## Media Query Conditions +## Media query conditions You can define the following conditions for the media queries: - Combination and relevancy - You can combine multiple conditions into 1 Boolean query with the `and` operator. To define a negative condition (something not being relevant), use the `not` operator. + You can combine multiple conditions into 1 Boolean query with the `and` operator. To define a negative condition (something not being relevant), use the `not` operator: ``` @media not screen and (min-width: 320px), screen and (max-width: 480px) { @@ -52,7 +52,7 @@ You can define the following conditions for the media queries: - Viewport width - You can define the query to match to a specific viewport width range using the `min-width` and `max-width` attributes. + You can define the query to match to a specific viewport width range using the `min-width` and `max-width` attributes: ``` @media all and (min-width: 320px) and (max-width: 480px) { @@ -64,7 +64,7 @@ You can define the following conditions for the media queries: The `height` attribute refers to restoring the viewport's height, and the `device-height` attribute refers to restoring the resolution set on the device. - The same difference applies to the `width` and `aspect-ratio` attributes, which can assign 'device-'. + The same difference applies to the `width` and `aspect-ratio` attributes, which can assign 'device-': ``` @media screen and (min-device-height: 700px) { @@ -79,7 +79,7 @@ You can define the following conditions for the media queries: - Device aspect ratio - You can use the `device-aspect-ratio` attribute to check the width-length ratio (aspect ratio) of the printing device. + You can use the `device-aspect-ratio` attribute to check the width-length ratio (aspect ratio) of the printing device: ``` @media all and (device-aspect-ratio: 9/16) and (orientation: portrait), @@ -88,10 +88,10 @@ You can define the following conditions for the media queries: } ``` - > **Note** + > [!NOTE] > The device aspect ratio is a reliable way to distinguish the portrait and landscape modes of a smart phone. However, because the aspect ratio of all the devices has to be specified, a precise rule is hard to define. (Currently wildly used screen ratios are 15:9, 16:10, 16:9, 3:2, and 4:3, but devices with other screen ratios may be added in the future.) -## Media Query Priorities +## Media query priorities When multiple media queries and conditions are defined, CSS is applied with the following priorities: @@ -171,7 +171,7 @@ The CSS is applied based on the viewport: - The `a.css` file is not imported. - The `b.css` file is applied (based on `content: "b.css : width: 768px ~ 1024px"`). -## Creating a Liquid Layout +## Create a liquid layout You can use media queries to determine the styles to be used in a Web document. The following example creates a simple Web document with a liquid layout that organically changes according to the device resolution to show an optimized layout on both portrait and landscape modes: @@ -195,7 +195,7 @@ You can use media queries to determine the styles to be used in a Web document. ``` -2. Define basic styles for the page, using a flexible box (in [mobile](../../../api/latest/w3c_api/w3c_api_m.html#flexi), [wearable](../../../api/latest/w3c_api/w3c_api_w.html#flexi), and [TV](../../../api/latest/w3c_api/w3c_api_tv.html#flexi) applications) and multi-column (in [mobile](../../../api/latest/w3c_api/w3c_api_m.html#multicolumn) and [TV](../../../api/latest/w3c_api/w3c_api_tv.html#multicolumn) applications only) layout with 2 columns. (The following figure applies to mobile applications only.) +2. Define basic styles for the page, using a flexible box (in [mobile](../../../api/latest/w3c_api/w3c_api_m.html#flexi), [wearable](../../../api/latest/w3c_api/w3c_api_w.html#flexi), and [TV](../../../api/latest/w3c_api/w3c_api_tv.html#flexi) applications) and multi-column (in [mobile](../../../api/latest/w3c_api/w3c_api_m.html#multicolumn) and [TV](../../../api/latest/w3c_api/w3c_api_tv.html#multicolumn) applications only) layout with 2 columns: (The following figure applies to mobile applications only.) ``` .container { @@ -254,14 +254,14 @@ You can use media queries to determine the styles to be used in a Web document. @media print {} ``` -### Source Code +### Source code For the complete source code related to this use case, see the following files: -- [liquid_layout_2.html](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries) -- [logo.png](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries) +- [liquid_layout_2.html](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries){:target="_blank"} +- [logo.png](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries){:target="_blank"} -## Related Information +## Related information * Dependencies - Tizen 2.4 and Higher for Mobile - Tizen 2.3.1 and Higher for Wearable diff --git a/docs/application/web/guides/w3c/ui/multiple-screens.md b/docs/application/web/guides/w3c/ui/multiple-screens.md index 1b2acf50b6..ffb18e7f86 100755 --- a/docs/application/web/guides/w3c/ui/multiple-screens.md +++ b/docs/application/web/guides/w3c/ui/multiple-screens.md @@ -10,49 +10,49 @@ Tizen provides the [UI scalability](#ui-scalability) resolution feature, which a To optimize images used in Web applications, images based on a single resource can be used in [various resolutions](#image-resolution-optimization). -## Key Concepts +## Key concepts -Before building a Web application for multiple resolutions, make sure you are familiar with the following [W3C](http://www.w3.org/) Web content scaling standards, which must be taken into account when developing Web applications: +Before building a Web application for multiple resolutions, make sure you are familiar with the following [W3C](http://www.w3.org/){:target="_blank"} Web content scaling standards, which must be taken into account when developing Web applications: - Viewport meta tag - CSS media query -### Viewport Meta Tag +### Viewport meta tag A viewport defines the application area that displays the Web page content. In a Web browser, the viewport size depends on the browser window size. If the viewport is smaller than the Web content size, horizontal and vertical scrollbars are displayed for page navigation. The Web browser viewport does not support the zoom feature. However, in a mobile Web browser, there are no window scrollbars and the viewport supports the zoom feature. -The [viewport meta tag](http://www.w3.org/TR/mwabp/#bp-viewport) enables you to customize the viewport size and zoom levels in a majority of mobile Web browsers. Using this tag, you can set the width, height, initial scale, and scale range for Web pages. +The [viewport meta tag](http://www.w3.org/TR/mwabp/#bp-viewport){:target="_blank"} enables you to customize the viewport size and zoom levels in a majority of mobile Web browsers. Using this tag, you can set the width, height, initial scale, and scale range for Web pages. To use the viewport meta tag while developing Web applications, you must note the following: - The `device-height` and `device-width` attributes defined in the viewport meta tag are not the same as the real device width and height in pixels. - Using the viewport meta tag, the Web browsers of different devices display the same content with different layout size and scale factor. The scale factor is calculated using the device pixel ratio (DPR). -### CSS Media Query +### CSS media query -The [CSS media query](http://www.w3.org/TR/css3-mediaqueries/) enables you to set conditions for particular media features and types to apply different CSS files for the application content. For Web content scaling, you can use the CSS media query to, for example: +The [CSS media query](http://www.w3.org/TR/css3-mediaqueries/){:target="_blank"} enables you to set conditions for particular media features and types to apply different CSS files for the application content. For Web content scaling, you can use the CSS media query to, for example: - Define the image resource to be used based on the screen dots per inch (DPI) ratio. - Determine the CSS layout to be used based on the screen width. -## UI Scalability +## UI scalability With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application's logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the [viewport meta tag](#viewport-meta-tag) to fit the Web page into the device screen, and the `rem` unit to determine the size of the Tizen Web UI components. -### Setting the Viewport +### Set the viewport Tizen devices support a variety of screen resolutions and dots per inch (DPI) values. If the viewport meta tag is not defined, TAU uses the default viewport width and scale factor. This ensures that Web content layout varies between different screen resolutions. -In the following example, the viewport width is set to `device-width`, which is determined by the width of the Tizen device. The `device-width` value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.) +In the following example, the viewport width is set to `device-width`, which is determined by the width of the Tizen device. The `device-width` value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices: (TAU uses the example value by default, if no other viewport value is defined.) ``` ``` -If the viewport width is set to `device-width`, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (`http://tizen.org`) on different devices with the viewport width set to `device-width`. +If the viewport width is set to `device-width`, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (`http://tizen.org`) on different devices with the viewport width set to `device-width`: ``` @@ -65,13 +65,13 @@ If the viewport width is set to `device-width`, the width and scale factor value | 720 x 1280 | 306 | 320 | ![captured screen1](./media/captured_screen1.png) | 360 px | 2.0 | | 480 x 800 | 218 | 240 | ![captured screen2](./media/captured_screen2.png) | 320 px | 1.5 | -### Working with Tizen Web Winsets +### Work with Tizen Web winsets The default sizes of Tizen Web winsets (such as Popup, Button, and Checkbox) are designed based on the reference viewport DPI of 160. Therefore, these winsets are of similar sizes on any Tizen device if the viewport width is set to `device-width`. If you manually set the viewport width of your application to a fixed value, the Tizen Web winsets may not fit appropriately in the application. To avoid the problem, Tizen Web winsets use the `rem` unit for the winset length, which depends on the base font size of the winset. Each Tizen Web winset theme has its own base font size, and the `` element font size is also set to the base font size. If the viewport width is set to a fixed value, this base font size is recalculated and set to the `` element to adjust the Tizen Web winset sizes accurately. -## Creating Applications Supporting Multiple Screens +## Create applications supporting multiple screens To create an application that supports multiple screen sizes, you must consider the following while coding your application: @@ -79,7 +79,7 @@ To create an application that supports multiple screen sizes, you must consider - Optimizing resources - Creating screen resolution-independent UI -### Configuring the Viewport +### Configure the viewport To use UI scalability in your application, set the `viewport` meta tag while [creating a Web application project](../../../tutorials/process/app-dev-process.md) in Tizen Studio. To configure the viewport in the Tizen Web applications, add the `viewport` meta tag in the `` section of the `index.html` file: @@ -89,7 +89,7 @@ To use UI scalability in your application, set the `viewport` meta tag while [cr minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` -### Optimizing Resources +### Optimize resources By default, the Tizen Advanced UI (TAU) consists of the HD Web winsets. The winset scale is lowered for lower screen resolution devices. To optimize resources for different screen resolutions and devices, use the [CSS media query](#css-media-query) for different resolutions available in Tizen. You can use CSS media queries in the HTML or CSS files. @@ -132,11 +132,11 @@ You can also set different layout and resources for the portrait and landscape v } ``` -### Creating Screen Resolution-independent UI +### Create screen resolution-independent UI The Tizen base font size is 22 px. This base font size value varies based on the device screen resolution. However, to create a screen resolution-independent UI, the Web browser engine renders the base font size as a logical pixel size instead of a physical pixel size. -## Image Resolution Optimization +## Image resolution optimization In Web applications, optimization of applications for various platforms (regarding devices, OS, and resolution) is efficient. @@ -146,7 +146,7 @@ Images can be used in Web applications in the following ways: - `IMG` element linking images directly to HTML - CSS `background` property expressing images as a background in HTML -- [SVG (Scalable Vector Graphics)](../graphics/svg.md), [Canvas](../graphics/canvas.md), and [WebGL™](http://www.khronos.org/registry/webgl/specs/latest/) APIs implementing graphics in HTML +- [SVG (Scalable Vector Graphics)](../graphics/svg.md), [Canvas](../graphics/canvas.md), and [WebGL™](http://www.khronos.org/registry/webgl/specs/latest/){:target="_blank"} APIs implementing graphics in HTML When selecting an option from the list above, consider the type of the image resource you are going to use. @@ -181,7 +181,7 @@ The image color is expressed based on pixels. Therefore, the higher resolution a - 300 x 200 px: 39 KB - 300 x 200 px: 15 KB -Current full HD displays have a resolution that is 1.5 to 2 times bigger than the actual screen size. The image quality is guaranteed if you size images as 2 times bigger than their original size. +Current full HD displays have a resolution that is 1.5 to 2 times bigger than the actual screen size. The image quality is guaranteed if you size images as 2 times bigger than their original size: ``` img { @@ -195,7 +195,7 @@ img { ### Icons -Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 `background-size` property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px. +Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 `background-size` property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px: ``` .prev_icon, .next_icon { @@ -219,7 +219,7 @@ When multiple icons are used on a page, all the image files are called separatel ![Calling each of image separately](./media/calling_img_sep.png) -You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the `background-position` property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows. +You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the `background-position` property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows: ``` .prev_icon, .next_icon { @@ -240,13 +240,13 @@ You can use the sprite image technique (grouping multiple images as one and show ![Network speed when using sprite image](./media/network_speed_sprite.png) -### Animated Images +### Animated images Animated images can be created in various formats and with many tools, such as GIF, JavaScript, Canvas, and SVG. To create a simple and repetitive animation effect (such as the following JAVA mascot) as effectively as possible, use GIF images, JavaScript, or the CSS3 `animation` attribute. -**Figure: JAVA mascot character in GIF (source: http://lea.verou.me)** +**Figure: JAVA mascot character in GIF (source: http://lea.verou.me){:target="_blank"}** ![JAVA mascot character in GIF](./media/mascot.gif) @@ -257,7 +257,7 @@ The following sections compare the network capacity usage and timeline of the fo - [CSS3 animation](#css3) -#### GIF Animation +#### GIF animation Using GIF animation, the resource usage is as follows: @@ -280,7 +280,7 @@ Using GIF animation, the resource usage is as follows: GIF animation can be created in various resolutions without quality loss when you use the option introduced in [Photos](#photos). This, however, increases memory occupancy. -#### JavaScript Animation +#### JavaScript animation JavaScript animation is less affected by enlarging or reducing its screen size. However, it uses a lot of device resources compared to using CSS3 animations: @@ -327,7 +327,7 @@ You can use the `requestAnimationFrame()` method of the [Timing control for scri ``` -#### CSS3 Animation +#### CSS3 animation CSS3 animation has a low usage of events, memory, and network capacity. It is efficient for animations that have a fixed size. However, since CSS3 animation is pixel-based, it is difficult to use for animations that need to be enlarged or reduced, in which case JavaScript is a better option: @@ -365,6 +365,6 @@ The following example shows how CSS3 animation can be implemented: ``` -## Related Information +## Related information * Dependencies - Tizen 2.4 and Higher for Mobile diff --git a/docs/application/web/guides/w3c/ui/selector.md b/docs/application/web/guides/w3c/ui/selector.md index 494ff33f3e..1ffed95eb1 100755 --- a/docs/application/web/guides/w3c/ui/selector.md +++ b/docs/application/web/guides/w3c/ui/selector.md @@ -4,7 +4,7 @@ The selectors allow you to select element nodes in the DOM tree by matching them You can use the `querySelector()` and `querySelectorAll()` methods to retrieve the element nodes. Both methods accept a single parameter, a string selector. The string selector is a selector or a group of selectors that can be surrounded by whitespace. If you use a selector group as the string selector with the `querySelector()` method, the method returns the first element (if any) that matches any of the selectors in the group. -The main features of the Selectors API Level 1 and Level 2 include: +The main features of the Selectors API Level 1 and Level 2 include the following: - Selecting a single element @@ -16,11 +16,11 @@ The main features of the Selectors API Level 1 and Level 2 include: You can also [create an accordion menu](#creating-an-accordion-menu). -## Selecting a Single Node +## Select a single node -To use selectors for handling page elements and selecting a single node: +To use selectors for handling page elements and selecting a single node, follow these steps: -1. To select the first matching element found in the child nodes, use the `querySelector()` method with CSS selectors. You get the same result as when using the `getElementById()`, `getElementsByTagName()`, and `getElementsByClassName()` methods. +1. To select the first matching element found in the child nodes, use the `querySelector()` method with CSS selectors. You get the same result as when using the `getElementById()`, `getElementsByTagName()`, and `getElementsByClassName()` methods: ``` /* First element in the document */ @@ -39,7 +39,7 @@ To use selectors for handling page elements and selecting a single node: 2. You can use the CSS selectors to ensure that elements with complex structures can be easily selected. - For example, the following example selects the last element among the child nodes of the second `` element, which is a child of the `` element in the second `` element of the document. + For example, the following example selects the last element among the child nodes of the second `` element, which is a child of the `` element in the second `
` element of the document: ``` var obj = document.querySelector('table:nth-child(2) tbody > tr:nth-child(2) :last-child'); @@ -56,15 +56,15 @@ To use selectors for handling page elements and selecting a single node: ![Single node selection (in mobile applications only)](./media/single_node_selection.png) -### Source Code +### Source code For the complete source code related to this use case, see the following file: -- [accordion.html](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api) +- [accordion.html](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api){:target="_blank"} -## Selecting Multiple Nodes +## Select multiple nodes -To use selectors for handling page elements and selecting multiple nodes in a node list: +To use selectors for handling page elements and selecting multiple nodes in a node list, follow these steps: 1. Select an element in the node list using the `querySelector()` method: @@ -97,13 +97,13 @@ To use selectors for handling page elements and selecting multiple nodes in a no ![Multiple node selection (in mobile applications only)](./media/multi_node_selection.png) -### Source Code +### Source code For the complete source code related to this use case, see the following file: -- [accordion.html](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api) +- [accordion.html](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api){:target="_blank"} -## Creating an Accordion Menu +## Create an accordion menu You can retrieve element nodes from the DOM tree and create a simple accordion menu. @@ -190,13 +190,13 @@ The accordion menu is created using the CSS3 Basic User Interface Module Level 3 ![Accordion menu (in mobile applications only)](./media/accordion_menu.png) -### Source Code +### Source code For the complete source code related to this use case, see the following file: -- [selector_sample.html](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api) +- [selector_sample.html](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api){:target="_blank"} -## Related Information +## Related information * Dependencies - Tizen 2.4 and Higher for Mobile - Tizen 2.3.1 and Higher for Wearable