Content Marketing

10 HTML5 ieviestas metodes, kas ievērojami uzlabo lietotāja pieredzi

Mēs palīdzam a SaaS uzņēmums optimizē savu platformu dabiskajai meklēšanai (SEO)… un, pārskatot viņu izvades veidņu kodu, mēs uzreiz pamanījām, ka tie nekad nav iekļāvuši HTML5 metodes savām lapu izvadēm.

HTML5 bija būtisks solis uz priekšu lietotāju pieredzei (UX) tīmekļa izstrādē. Tas ieviesa vairākas jaunas metodes un tagus, kas uzlaboja tīmekļa lapu iespējas. Šeit ir saraksts ar desmit galvenajām HTML5 metodēm un tagiem ar paskaidrojumiem un koda paraugiem.

  • Semantiskie elementi: HTML5 ieviesti semantiski elementi, kas nodrošina jēgpilnāku tīmekļa satura struktūru, uzlabojot pieejamību un 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>
  • Video un audio: ieviests HTML5 <video> un <audio> elementi, atvieglojot multivides satura iegulšanu, nepaļaujoties uz trešo pušu spraudņiem.
<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>
  • Audekls: <canvas> elements nodrošina dinamisku grafiku un animāciju, izmantojot JavaScript, uzlabojot interaktīvās funkcijas.
<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>
    • Veidlapu uzlabojumi: HTML5 ir pievienoti jauni ievades veidi (piemēram, e-pasts, URL) un atribūti (piemēram, required, pattern), lai uzlabotu veidlapu validāciju un lietotāja pieredzi.
    <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>
    • Ģeogrāfiskās vietas: HTML5 ļauj vietnēm piekļūt lietotāja ģeogrāfiskajai atrašanās vietai, paverot iespējas uz atrašanās vietu balstītiem pakalpojumiem.
    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.
      });
    }
    • Vietējā krātuve: ieviests HTML5 localStorage klienta puses glabāšanai, ļaujot vietnēm uzglabāt datus lokāli, nepaļaujoties uz sīkfailiem.
    // Storing data in local storage
    localStorage.setItem('username', 'JohnDoe');
    // Retrieving data from local storage
    const username = localStorage.getItem('username');
    • Web krātuve: Līdzās localStorage, ieviests HTML5 sessionStorage sesijas datu glabāšanai, kas tiek notīrīti, kad sesija beidzas.
    // Storing session-specific data
    sessionStorage.setItem('theme', 'dark');
    // Retrieving session-specific data
    const theme = sessionStorage.getItem('theme');
    • Velciet un Drop
      : HTML5 nodrošina vietējo atbalstu vilkšanas un nomešanas mijiedarbībām, atvieglojot intuitīvu saskarņu ieviešanu.
    <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>
    • Atsaucīgi attēli: HTML5 ieviesa <picture> elements un srcset atribūts atbilstošu attēlu nodrošināšanai, pamatojoties uz ekrāna izmēru un izšķirtspēju.
    <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>
    • Sīkāka informācija un kopsavilkums: <details> un <summary> elementi ļauj izveidot paplašināmas satura sadaļas, uzlabojot dokumentu organizēšanu.
    <details>
      <summary>Click to expand</summary>
      <p>Additional content goes here...</p>
    </details>

    Šīs papildu HTML5 funkcijas vēl vairāk uzlaboja tīmekļa izstrādes iespējas, nodrošinot izstrādātājiem rīkus interaktīvāku un lietotājam draudzīgāku vietņu izveidei.

    Douglas Karr

    Douglas Karr ir TKO no OpenINSIGHTS un dibinātājs Martech Zone. Duglass ir palīdzējis desmitiem veiksmīgu MarTech jaunuzņēmumu, ir palīdzējis veikt vairāk nekā 5 miljardu dolāru Martech iegādes un ieguldījumu uzticamības pārbaudi, kā arī turpina palīdzēt uzņēmumiem ieviest un automatizēt to pārdošanas un mārketinga stratēģijas. Douglas ir starptautiski atzīts digitālās transformācijas un MarTech eksperts un runātājs. Duglass ir arī publicēts Dummie rokasgrāmatas un biznesa vadības grāmatas autors.

    Saistītie raksti

    Atpakaļ uz augšu pogu
    aizvērt

    Reklāmu bloķēšana konstatēta

    Martech Zone var nodrošināt jums šo saturu bez maksas, jo mēs gūstam peļņu no savas vietnes, izmantojot ieņēmumus no reklāmām, saistīto uzņēmumu saites un sponsorēšanu. Būsim pateicīgi, ja, apskatot mūsu vietni, noņemtu savu reklāmu bloķētāju.