10 metoda uvedenih u HTML5 koje su dramatično poboljšale korisničko iskustvo
Pomažemo a SaaS tvrtka u optimizaciji svoje platforme za organsko pretraživanje (SEO)… i kada smo pregledali kod za njihove izlazne predloške, odmah smo primijetili da nikad nisu uključili HTML5 metode za svoje izlazne stranice.
HTML5 bio je značajan korak naprijed za korisničko iskustvo (UX) u web razvoju. Uveo je nekoliko novih metoda i oznaka koje su poboljšale mogućnosti web stranica. Evo popisa deset ključnih HTML5 metoda i oznaka s grafičkim oznakama s objašnjenjima i uzorcima koda:
- Semantički elementi: HTML5 je uveo semantičke elemente koji pružaju smisleniju strukturu web-sadržaju, poboljšavajući pristupačnost i 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 i audio: uveden HTML5
<video>
i<audio>
elemenata, što olakšava ugradnju multimedijskog sadržaja bez oslanjanja na dodatke trećih strana.
<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>
- Platno:
<canvas>
element omogućuje dinamičku grafiku i animacije putem JavaScripta, poboljšavajući interaktivne značajke.
<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>
- Poboljšanja obrazaca: HTML5 je dodao nove vrste unosa (npr. e-pošta, URL) i atribute (npr.
required
,pattern
) za poboljšanu provjeru valjanosti obrazaca i korisničko iskustvo.
<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>
- Geolokaciju: HTML5 omogućuje web stranicama pristup geografskoj lokaciji korisnika, otvarajući mogućnosti za usluge temeljene na lokaciji.
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.
});
}
- Lokalna pohrana: uveden HTML5
localStorage
za pohranu na strani klijenta, omogućujući web stranicama da pohranjuju podatke lokalno bez oslanjanja na kolačiće.
// Storing data in local storage
localStorage.setItem('username', 'JohnDoe');
// Retrieving data from local storage
const username = localStorage.getItem('username');
- Web pohrana: Pored
localStorage
, predstavljen HTML5sessionStorage
za pohranu podataka specifičnih za sesiju, koji se brišu kada sesija završi.
// Storing session-specific data
sessionStorage.setItem('theme', 'dark');
// Retrieving session-specific data
const theme = sessionStorage.getItem('theme');
- Povucite i ispustite : HTML5 pruža izvornu podršku za interakcije povuci i ispusti, što olakšava implementaciju intuitivnih sučelja.
<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>
- Odgovorne slike: HTML5 je predstavio
<picture>
element isrcset
atribut za isporuku odgovarajućih slika na temelju veličine i rezolucije zaslona.
<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>
- Pojedinosti i sažetak:
<details>
i<summary>
elementi vam omogućuju stvaranje proširivih dijelova sadržaja, poboljšavajući organizaciju dokumenata.
<details>
<summary>Click to expand</summary>
<p>Additional content goes here...</p>
</details>
Ove dodatne značajke HTML5 dodatno su poboljšale mogućnosti web razvoja, pružajući razvojnim programerima alate za stvaranje interaktivnijih i korisniku prilagođenijih web stranica.