Marketing Përmbajtja

10 metoda të prezantuara në HTML5 që përmirësuan në mënyrë dramatike përvojën e përdoruesit

Ne po ndihmojmë një MSA kompani në optimizimin e platformës së tyre për kërkim organik (SEO)… dhe kur shqyrtuam kodin për shabllonet e tyre të daljes, menjëherë vumë re se ata kurrë nuk kishin përfshirë metoda HTML5 për rezultatet e faqeve të tyre.

HTML5 ishte një hap i rëndësishëm përpara për përvojën e përdoruesit (UX) në zhvillimin e uebit. Ai prezantoi disa metoda dhe etiketa të reja që rritën aftësitë e faqeve të internetit. Këtu është një listë me pika me dhjetë metoda dhe etiketa kryesore HTML5 me shpjegime dhe shembuj kodesh:

  • Elementet semantike: HTML5 prezantoi elemente semantike që ofrojnë një strukturë më kuptimplote për përmbajtjen e internetit, duke përmirësuar aksesin dhe 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 dhe Audio: U prezantua HTML5 <video> <audio> elemente, duke e bërë më të lehtë futjen e përmbajtjes multimediale pa u mbështetur në shtojcat e palëve të treta.
<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>
  • Kanavacë: The <canvas> elementi lejon grafika dhe animacione dinamike përmes JavaScript, duke përmirësuar veçoritë ndërvepruese.
<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>
    • Përmirësimet e formës: HTML5 shtoi lloje të reja të dhënash (p.sh., email, URL) dhe atributet (p.sh. required, pattern) për verifikimin e përmirësuar të formularit dhe përvojën e përdoruesit.
    <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>
    • Geolocation: HTML5 u mundëson faqeve të internetit të aksesojnë vendndodhjen gjeografike të përdoruesit, duke hapur mundësi për shërbime të bazuara në vendndodhje.
    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.
      });
    }
    • Ruajtja lokale: U prezantua HTML5 localStorage për ruajtje nga ana e klientit, duke mundësuar faqet e internetit të ruajnë të dhënat në nivel lokal pa u mbështetur në skedarë kuki.
    // Storing data in local storage
    localStorage.setItem('username', 'JohnDoe');
    // Retrieving data from local storage
    const username = localStorage.getItem('username');
    • Ruajtje në ueb: Krahas localStorage, u prezantua HTML5 sessionStorage për ruajtjen e të dhënave specifike për sesionin, të cilat pastrohen kur sesioni përfundon.
    // Storing session-specific data
    sessionStorage.setItem('theme', 'dark');
    // Retrieving session-specific data
    const theme = sessionStorage.getItem('theme');
    • Drag and Drop
      : HTML5 ofron mbështetje origjinale për ndërveprimet zvarrit-dhe lësho, duke e bërë më të lehtë zbatimin e ndërfaqeve intuitive.
    <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>
    • Imazhe të përgjegjshme: HTML5 prezantoi <picture> elementi dhe srcset atribut për dhënien e imazheve të përshtatshme bazuar në madhësinë dhe rezolucionin e ekranit.
    <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>
    • Detaje dhe Përmbledhje: The <details> <summary> elementet ju lejojnë të krijoni seksione të zgjerueshme të përmbajtjes, duke përmirësuar organizimin e dokumenteve.
    <details>
      <summary>Click to expand</summary>
      <p>Additional content goes here...</p>
    </details>

    Këto veçori shtesë HTML5 përmirësuan më tej aftësitë e zhvillimit të uebit, duke u ofruar zhvilluesve mjete për të krijuar faqe interneti më interaktive dhe miqësore për përdoruesit.

    Douglas Karr

    Douglas Karr është CMO i OpenINSIGHTS dhe themeluesi i Martech Zone. Douglas ka ndihmuar dhjetëra startup të suksesshëm të MarTech, ka ndihmuar në analizën e duhur prej mbi 5 miliardë dollarësh në blerjet dhe investimet e Martech dhe vazhdon të ndihmojë kompanitë në zbatimin dhe automatizimin e strategjive të tyre të shitjeve dhe marketingut. Douglas është një ekspert dhe folës i transformimit dixhital dhe i njohur ndërkombëtarisht në MarTech. Douglas është gjithashtu një autor i botuar i një udhëzuesi Dummie dhe një libri për udhëheqjen e biznesit.

    Artikuj Të Ngjashëm

    Kthehu në krye të faqes
    afër

    Blloku i reklamave u zbulua

    Martech Zone është në gjendje t'ju ofrojë këtë përmbajtje pa kosto, sepse ne fitojmë para nga faqja jonë përmes të ardhurave nga reklamat, lidhjeve të filialeve dhe sponsorizimeve. Do të vlerësonim nëse do të hiqnit bllokuesin tuaj të reklamave ndërsa shikoni faqen tonë.