HTML10-ում ներդրված 5 մեթոդ, որոնք կտրուկ բարելավեցին օգտվողների փորձը
Մենք օգնում ենք ա SaaS ընկերությունը օրգանական որոնման համար իրենց հարթակը օպտիմալացնելու համար (SEO)… և երբ մենք վերանայեցինք նրանց ելքային ձևանմուշների կոդը, մենք անմիջապես նկատեցինք, որ նրանք երբեք չեն ներառել HTML5 մեթոդներ իրենց էջի արդյունքների համար:
HTML5 օգտատիրոջ փորձի համար նշանակալի թռիչք էր (UX) վեբ մշակման մեջ: Այն ներկայացրեց մի քանի նոր մեթոդներ և պիտակներ, որոնք ընդլայնեցին վեբ էջերի հնարավորությունները: Ահա HTML5-ի տասը հիմնական մեթոդների և պիտակների ցանկը՝ բացատրություններով և կոդի նմուշներով.
- Իմաստային տարրերHTML5-ը ներմուծեց իմաստային տարրեր, որոնք ապահովում են վեբ բովանդակության ավելի իմաստալից կառուցվածք՝ բարելավելով մատչելիությունը և SEO.
<header>
<h1>Website Title</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<h2>Article Title</h2>
<p>Article content goes here...</p>
</article>
<footer>
<p>© 2023 WebsiteName</p>
</footer>
- Տեսանյութ և աուդիոHTML5-ը ներկայացվել է
<video>
և<audio>
տարրեր, ինչը հեշտացնում է մուլտիմեդիա բովանդակության ներդրումն առանց երրորդ կողմի հավելումների վրա հենվելու:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
- ԿտավՄանրամասն
<canvas>
տարրը թույլ է տալիս դինամիկ գրաֆիկա և անիմացիաներ ստեղծել JavaScript-ի միջոցով՝ ընդլայնելով ինտերակտիվ գործառույթները:
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// Draw shapes and animations here using JavaScript.
</script>
- Ձևերի բարելավումներHTML5-ն ավելացրել է մուտքագրման նոր տեսակներ (օրինակ՝ էլ. URL) և ատրիբուտները (օրինակ,
required
,pattern
) բարելավված ձևի վավերացման և օգտագործողի փորձի համար:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit" value="Submit">
</form>
- ԵրկրաշարժըHTML5-ը հնարավորություն է տալիս կայքերին մուտք գործել օգտատիրոջ աշխարհագրական դիրք՝ հնարավորություններ բացելով տեղորոշման վրա հիմնված ծառայությունների համար:
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
// Use latitude and longitude data here.
});
}
- Տեղական պահեստավորումHTML5-ը ներկայացվել է
localStorage
հաճախորդի կողմից պահեստավորման համար՝ հնարավորություն տալով վեբկայքերին պահել տվյալները տեղում՝ առանց հենվելու թխուկների վրա:
// Storing data in local storage
localStorage.setItem('username', 'JohnDoe');
// Retrieving data from local storage
const username = localStorage.getItem('username');
- Վեբ պահեստավորում: Կողքին
localStorage
, ներկայացվել է HTML5-ըsessionStorage
նիստին հատուկ տվյալներ պահելու համար, որոնք ջնջվում են նիստի ավարտից հետո:
// Storing session-specific data
sessionStorage.setItem('theme', 'dark');
// Retrieving session-specific data
const theme = sessionStorage.getItem('theme');
- Քարշել եւ թողնել HTML5-ը տրամադրում է բնիկ աջակցություն քաշել և թողնել փոխազդեցությունների համար՝ հեշտացնելով ինտուիտիվ ինտերֆեյսների ներդրումը:
<div id="dragTarget" draggable="true">Drag me!</div>
<div id="dropTarget">Drop here!</div>
<script>
const dragTarget = document.getElementById('dragTarget');
const dropTarget = document.getElementById('dropTarget');
dragTarget.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Dragged item');
});
dropTarget.addEventListener('dragover', function(event) {
event.preventDefault();
});
dropTarget.addEventListener('drop', function(event) {
event.preventDefault();
const data = event.dataTransfer.getData('text');
// Handle the dropped item here.
});
</script>
- Պատասխանատու նկարներHTML5-ը ներկայացրել է
<picture>
տարրը ևsrcset
հատկանիշ՝ էկրանի չափի և լուծաչափի հիման վրա համապատասխան պատկերներ տրամադրելու համար:
<picture>
<source srcset="image-large.jpg" media="(min-width: 1200px)">
<source srcset="image-medium.jpg" media="(min-width: 768px)">
<img src="image-small.jpg" alt="Responsive Image">
</picture>
- Մանրամասներ և ամփոփումՄանրամասն
<details>
և<summary>
տարրերը թույլ են տալիս ստեղծել բովանդակության ընդարձակվող բաժիններ՝ ընդլայնելով փաստաթղթերի կազմակերպումը:
<details>
<summary>Click to expand</summary>
<p>Additional content goes here...</p>
</details>
HTML5-ի այս լրացուցիչ հնարավորություններն էլ ավելի են բարելավել վեբ մշակման հնարավորությունները՝ ծրագրավորողներին տրամադրելով գործիքներ՝ ավելի ինտերակտիվ և օգտագործողի համար հարմար կայքեր ստեղծելու համար: