10 میتودونه چې په HTML5 کې معرفي شوي چې په ډراماتیک ډول د کارونکي تجربه ښه کوي

موږ مرسته کوو SaaS شرکت د عضوي لټون لپاره د دوی پلیټ فارم اصلاح کولو کې (SEO)… او کله چې موږ د دوی د محصول ټیمپلیټونو لپاره کوډ بیاکتنه وکړه، موږ سمدلاسه ولیدل چې دوی هیڅکله د دوی د پاڼې پایلو لپاره HTML5 میتودونه ندي شامل کړي.

HTML5 د کارونکي تجربې لپاره د پام وړ کود وه (UX) د ویب پراختیا کې. دې ډیری نوي میتودونه او ټاګونه معرفي کړل چې د ویب پا pagesو وړتیاو ته وده ورکوي. دلته د لسو کلیدي 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>&copy; 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> عنصر د جاواسکریپټ له لارې متحرک ګرافیک او متحرکاتو ته اجازه ورکوي، د متقابل ځانګړتیاو لوړول.

<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 ځانګړتیاوې د ویب پراختیا وړتیا نوره هم ښه کړې، پراختیا کونکو ته د وسیلو سره چمتو کوي ترڅو ډیر متقابل او د کاروونکي دوستانه ویب پاڼې رامینځته کړي.