Cynnwys Marchnata

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>&copy; 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 gyflwyno sessionStorage 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'r srcset 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.

    Douglas Karr

    Douglas Karr yn CMO o AGOREDION a sylfaenydd y Martech Zone. Mae Douglas wedi helpu dwsinau o fusnesau newydd llwyddiannus MarTech, wedi cynorthwyo gyda diwydrwydd dyladwy o dros $5 bil mewn caffaeliadau a buddsoddiadau Martech, ac yn parhau i gynorthwyo cwmnïau i weithredu ac awtomeiddio eu strategaethau gwerthu a marchnata. Mae Douglas yn arbenigwr trawsnewid digidol ac yn siaradwr MarTech a gydnabyddir yn rhyngwladol. Mae Douglas hefyd yn awdur cyhoeddedig canllaw Dummie a llyfr arweinyddiaeth busnes.

    Erthyglau Perthnasol

    Yn ôl i'r brig botwm
    Cau

    Adblock Wedi'i Ganfod

    Martech Zone yn gallu darparu'r cynnwys hwn i chi heb unrhyw gost oherwydd ein bod yn rhoi arian i'n gwefan trwy refeniw hysbysebu, dolenni cyswllt, a nawdd. Byddem yn gwerthfawrogi petaech yn cael gwared ar eich rhwystrwr hysbysebion wrth i chi edrych ar ein gwefan.