10 Dull a Gyflwynwyd Yn HTML5 Sydd Wedi Gwella Profiad y Defnyddiwr yn Ddirfawr
Rydym yn cynorthwyo a SaaS cwmni wrth optimeiddio eu platfform ar gyfer chwilio organig (SEO)… a phan wnaethom adolygu'r cod ar gyfer eu templedi allbwn, fe wnaethom sylwi ar unwaith nad oeddent byth yn ymgorffori dulliau HTML5 ar gyfer eu hallbynnau tudalen.
HTML5 yn gam sylweddol ymlaen ar gyfer profiad y defnyddiwr (UX) mewn datblygu gwe. Cyflwynodd nifer o ddulliau a thagiau newydd a oedd yn gwella galluoedd tudalennau gwe. Dyma restr fwled o ddeg dull a thagiau HTML5 allweddol gydag esboniadau a samplau cod:
- Elfennau Semantig: Cyflwynodd HTML5 elfennau semantig sy'n darparu strwythur mwy ystyrlon i gynnwys gwe, gan wella hygyrchedd a 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>
- Fideo a Sain: HTML5 wedi'i gyflwyno
<video>
ac<audio>
elfennau, gan ei gwneud hi'n haws mewnosod cynnwys amlgyfrwng heb ddibynnu ar ategion trydydd parti.
<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: Y
<canvas>
Mae'r elfen yn caniatáu graffeg ac animeiddiadau deinamig trwy JavaScript, gan wella nodweddion rhyngweithiol.
<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>
- Gwelliannau Ffurflen: Ychwanegodd HTML5 fathau mewnbwn newydd (ee, e-bost, URL) a phriodoleddau (ee,
required
,pattern
) ar gyfer dilysu ffurflenni a phrofiad gwell i ddefnyddwyr.
<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>
- Geo-leoli: Mae HTML5 yn galluogi gwefannau i gael mynediad i leoliad daearyddol y defnyddiwr, gan agor posibiliadau ar gyfer gwasanaethau seiliedig ar leoliad.
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.
});
}
- Storio Lleol: HTML5 wedi'i gyflwyno
localStorage
ar gyfer storio ochr cleientiaid, gan alluogi gwefannau i storio data yn lleol heb ddibynnu ar gwcis.
// Storing data in local storage
localStorage.setItem('username', 'JohnDoe');
// Retrieving data from local storage
const username = localStorage.getItem('username');
- Storio Gwe: ochr yn ochr
localStorage
, HTML5 wedi'i gyflwynosessionStorage
ar gyfer storio data sesiwn-benodol, sy'n cael ei glirio pan ddaw'r sesiwn i ben.
// Storing session-specific data
sessionStorage.setItem('theme', 'dark');
// Retrieving session-specific data
const theme = sessionStorage.getItem('theme');
- Llusgo a Gollwng : Mae HTML5 yn darparu cefnogaeth frodorol ar gyfer rhyngweithio llusgo a gollwng, gan ei gwneud hi'n haws gweithredu rhyngwynebau greddfol.
<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>
- Delweddau Ymatebol: Cyflwynodd HTML5 y
<picture>
elfen a'rsrcset
priodoledd ar gyfer cyflwyno delweddau priodol yn seiliedig ar faint sgrin a chydraniad.
<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>
- Manylion a Chrynodeb: Y
<details>
ac<summary>
mae elfennau yn caniatáu ichi greu adrannau o gynnwys y gellir eu hehangu, gan wella trefniadaeth dogfennau.
<details>
<summary>Click to expand</summary>
<p>Additional content goes here...</p>
</details>
Fe wnaeth y nodweddion HTML5 ychwanegol hyn wella galluoedd datblygu gwe ymhellach, gan roi offer i ddatblygwyr greu gwefannau mwy rhyngweithiol a hawdd eu defnyddio.