Content Marketing

10 metód zavedených v HTML5, ktoré výrazne zlepšili používateľskú skúsenosť

Pomáhame a SaaS spoločnosť pri optimalizácii svojej platformy pre organické vyhľadávanie (SEO)… a keď sme skontrolovali kód ich výstupných šablón, okamžite sme si všimli, že do výstupov stránok nikdy nezahrnuli metódy HTML5.

HTML5 bol významný skok vpred pre používateľskú skúsenosť (UX) vo vývoji webu. Predstavila niekoľko nových metód a značiek, ktoré vylepšili možnosti webových stránok. Tu je zoznam desiatich kľúčových metód a značiek HTML5 s odrážkami s vysvetleniami a ukážkami kódu:

  • Sémantické prvky: HTML5 zaviedlo sémantické prvky, ktoré poskytujú zmysluplnejšiu štruktúru webového obsahu a zlepšujú dostupnosť 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>
  • Video a audio: Predstavenie HTML5 <video> a <audio> prvkov, čo uľahčuje vkladanie multimediálneho obsahu bez spoliehania sa na doplnky tretích strán.
<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>
  • Plátno: <canvas> prvok umožňuje dynamickú grafiku a animácie prostredníctvom JavaScriptu, čím sa vylepšujú interaktívne funkcie.
<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>
    • Vylepšenia formulárov: HTML5 pridalo nové typy vstupu (napr. e-mail, URL) a atribúty (napr. required, pattern) pre lepšie overenie formulárov a používateľskú skúsenosť.
    <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>
    • Geolokácie: HTML5 umožňuje webovým stránkam pristupovať k geografickej polohe používateľa, čím otvára možnosti pre služby založené na polohe.
    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.
      });
    }
    • Lokálny obchod: Predstavenie HTML5 localStorage pre ukladanie na strane klienta, ktoré umožňuje webovým stránkam ukladať údaje lokálne bez spoliehania sa na súbory cookie.
    // Storing data in local storage
    localStorage.setItem('username', 'JohnDoe');
    // Retrieving data from local storage
    const username = localStorage.getItem('username');
    • Webové úložisko: Vedľa localStorage, predstavil HTML5 sessionStorage na ukladanie údajov špecifických pre reláciu, ktoré sa po skončení relácie vymažú.
    // Storing session-specific data
    sessionStorage.setItem('theme', 'dark');
    // Retrieving session-specific data
    const theme = sessionStorage.getItem('theme');
    • Drag and Drop
      : HTML5 poskytuje natívnu podporu pre interakcie typu drag-and-drop, čo uľahčuje implementáciu intuitívnych rozhraní.
    <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>
    • Citlivé obrázky: HTML5 predstavilo <picture> prvok a srcset atribút na poskytovanie vhodných obrázkov na základe veľkosti obrazovky a rozlíšenia.
    <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>
    • Podrobnosti a zhrnutie: <details> a <summary> prvky umožňujú vytvárať rozšíriteľné časti obsahu, čím sa zlepšuje organizácia dokumentov.
    <details>
      <summary>Click to expand</summary>
      <p>Additional content goes here...</p>
    </details>

    Tieto dodatočné funkcie HTML5 ďalej zlepšili možnosti vývoja webu a poskytli vývojárom nástroje na vytváranie interaktívnejších a užívateľsky prívetivejších webových stránok.

    Douglas Karr

    Douglas Karr je CMO OpenINSIGHTS a zakladateľ spoločnosti Martech Zone. Douglas pomohol desiatkam úspešných startupov MarTech, asistoval pri due diligence v hodnote viac ako 5 miliárd dolárov v akvizíciách a investíciách Martech a naďalej pomáha spoločnostiam pri implementácii a automatizácii ich predajných a marketingových stratégií. Douglas je medzinárodne uznávaný odborník na digitálnu transformáciu a MarTech a rečník. Douglas je tiež publikovaným autorom príručky Dummie a knihy obchodného vedenia.

    súvisiace články

    Tlačidlo späť nahor
    Zavrieť

    Zistený blok reklám

    Martech Zone vám tento obsah môže poskytnúť bezplatne, pretože naše stránky speňažujeme prostredníctvom príjmov z reklám, pridružených odkazov a sponzorstiev. Ocenili by sme, keby ste pri prezeraní našej stránky odstránili blokovanie reklám.