10 metoda të prezantuara në HTML5 që përmirësuan në mënyrë dramatike përvojën e përdoruesit
Ne po ndihmojmë një MSA kompani në optimizimin e platformës së tyre për kërkim organik (SEO)… dhe kur shqyrtuam kodin për shabllonet e tyre të daljes, menjëherë vumë re se ata kurrë nuk kishin përfshirë metoda HTML5 për rezultatet e faqeve të tyre.
HTML5 ishte një hap i rëndësishëm përpara për përvojën e përdoruesit (UX) në zhvillimin e uebit. Ai prezantoi disa metoda dhe etiketa të reja që rritën aftësitë e faqeve të internetit. Këtu është një listë me pika me dhjetë metoda dhe etiketa kryesore HTML5 me shpjegime dhe shembuj kodesh:
- Elementet semantike: HTML5 prezantoi elemente semantike që ofrojnë një strukturë më kuptimplote për përmbajtjen e internetit, duke përmirësuar aksesin dhe 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>
- Video dhe Audio: U prezantua HTML5
<video>
<audio>
elemente, duke e bërë më të lehtë futjen e përmbajtjes multimediale pa u mbështetur në shtojcat e palëve të treta.
<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>
- Kanavacë: The
<canvas>
elementi lejon grafika dhe animacione dinamike përmes JavaScript, duke përmirësuar veçoritë ndërvepruese.
<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>
- Përmirësimet e formës: HTML5 shtoi lloje të reja të dhënash (p.sh., email, URL) dhe atributet (p.sh.
required
,pattern
) për verifikimin e përmirësuar të formularit dhe përvojën e përdoruesit.
<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>
- Geolocation: HTML5 u mundëson faqeve të internetit të aksesojnë vendndodhjen gjeografike të përdoruesit, duke hapur mundësi për shërbime të bazuara në vendndodhje.
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.
});
}
- Ruajtja lokale: U prezantua HTML5
localStorage
për ruajtje nga ana e klientit, duke mundësuar faqet e internetit të ruajnë të dhënat në nivel lokal pa u mbështetur në skedarë kuki.
// Storing data in local storage
localStorage.setItem('username', 'JohnDoe');
// Retrieving data from local storage
const username = localStorage.getItem('username');
- Ruajtje në ueb: Krahas
localStorage
, u prezantua HTML5sessionStorage
për ruajtjen e të dhënave specifike për sesionin, të cilat pastrohen kur sesioni përfundon.
// Storing session-specific data
sessionStorage.setItem('theme', 'dark');
// Retrieving session-specific data
const theme = sessionStorage.getItem('theme');
- Drag and Drop : HTML5 ofron mbështetje origjinale për ndërveprimet zvarrit-dhe lësho, duke e bërë më të lehtë zbatimin e ndërfaqeve intuitive.
<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>
- Imazhe të përgjegjshme: HTML5 prezantoi
<picture>
elementi dhesrcset
atribut për dhënien e imazheve të përshtatshme bazuar në madhësinë dhe rezolucionin e ekranit.
<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>
- Detaje dhe Përmbledhje: The
<details>
<summary>
elementet ju lejojnë të krijoni seksione të zgjerueshme të përmbajtjes, duke përmirësuar organizimin e dokumenteve.
<details>
<summary>Click to expand</summary>
<p>Additional content goes here...</p>
</details>
Këto veçori shtesë HTML5 përmirësuan më tej aftësitë e zhvillimit të uebit, duke u ofruar zhvilluesve mjete për të krijuar faqe interneti më interaktive dhe miqësore për përdoruesit.