Content Marketing

HTML10-ում ներդրված 5 մեթոդ, որոնք կտրուկ բարելավեցին օգտվողների փորձը

Մենք օգնում ենք ա SaaS ընկերությունը օրգանական որոնման համար իրենց հարթակը օպտիմալացնելու համար (SEO)… և երբ մենք վերանայեցինք նրանց ելքային ձևանմուշների կոդը, մենք անմիջապես նկատեցինք, որ նրանք երբեք չեն ներառել HTML5 մեթոդներ իրենց էջի արդյունքների համար:

HTML5 օգտատիրոջ փորձի համար նշանակալի թռիչք էր (UX) վեբ մշակման մեջ: Այն ներկայացրեց մի քանի նոր մեթոդներ և պիտակներ, որոնք ընդլայնեցին վեբ էջերի հնարավորությունները: Ահա HTML5-ի տասը հիմնական մեթոդների և պիտակների ցանկը՝ բացատրություններով և կոդի նմուշներով.

  • Իմաստային տարրերHTML5-ը ներմուծեց իմաստային տարրեր, որոնք ապահովում են վեբ բովանդակության ավելի իմաստալից կառուցվածք՝ բարելավելով մատչելիությունը և 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>
  • Տեսանյութ և աուդիոHTML5-ը ներկայացվել է <video> և <audio> տարրեր, ինչը հեշտացնում է մուլտիմեդիա բովանդակության ներդրումն առանց երրորդ կողմի հավելումների վրա հենվելու:
<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> տարրը թույլ է տալիս դինամիկ գրաֆիկա և անիմացիաներ ստեղծել JavaScript-ի միջոցով՝ ընդլայնելով ինտերակտիվ գործառույթները:
<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>
    • Ձևերի բարելավումներHTML5-ն ավելացրել է մուտքագրման նոր տեսակներ (օրինակ՝ էլ. URL) և ատրիբուտները (օրինակ, required, pattern) բարելավված ձևի վավերացման և օգտագործողի փորձի համար:
    <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>
    • ԵրկրաշարժըHTML5-ը հնարավորություն է տալիս կայքերին մուտք գործել օգտատիրոջ աշխարհագրական դիրք՝ հնարավորություններ բացելով տեղորոշման վրա հիմնված ծառայությունների համար:
    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.
      });
    }
    • Տեղական պահեստավորումHTML5-ը ներկայացվել է localStorage հաճախորդի կողմից պահեստավորման համար՝ հնարավորություն տալով վեբկայքերին պահել տվյալները տեղում՝ առանց հենվելու թխուկների վրա:
    // Storing data in local storage
    localStorage.setItem('username', 'JohnDoe');
    // Retrieving data from local storage
    const username = localStorage.getItem('username');
    • Վեբ պահեստավորում: Կողքին localStorage, ներկայացվել է HTML5-ը sessionStorage նիստին հատուկ տվյալներ պահելու համար, որոնք ջնջվում են նիստի ավարտից հետո:
    // Storing session-specific data
    sessionStorage.setItem('theme', 'dark');
    // Retrieving session-specific data
    const theme = sessionStorage.getItem('theme');
    • Քարշել եւ թողնել
      HTML5-ը տրամադրում է բնիկ աջակցություն քաշել և թողնել փոխազդեցությունների համար՝ հեշտացնելով ինտուիտիվ ինտերֆեյսների ներդրումը:
    <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>
    • Պատասխանատու նկարներHTML5-ը ներկայացրել է <picture> տարրը և srcset հատկանիշ՝ էկրանի չափի և լուծաչափի հիման վրա համապատասխան պատկերներ տրամադրելու համար:
    <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>
    • Մանրամասներ և ամփոփումՄանրամասն <details> և <summary> տարրերը թույլ են տալիս ստեղծել բովանդակության ընդարձակվող բաժիններ՝ ընդլայնելով փաստաթղթերի կազմակերպումը:
    <details>
      <summary>Click to expand</summary>
      <p>Additional content goes here...</p>
    </details>

    HTML5-ի այս լրացուցիչ հնարավորություններն էլ ավելի են բարելավել վեբ մշակման հնարավորությունները՝ ծրագրավորողներին տրամադրելով գործիքներ՝ ավելի ինտերակտիվ և օգտագործողի համար հարմար կայքեր ստեղծելու համար:

    Douglas Karr

    Douglas Karr -ի CMO-ն է OpenINSIGHTS և հիմնադիրը Martech Zone. Դուգլասը օգնել է MarTech-ի տասնյակ հաջողակ ստարտափների, աջակցել է ավելի քան 5 միլիարդ դոլարի չափով Martech-ի ձեռքբերումների և ներդրումների պատշաճ ուսումնասիրությանը և շարունակում է աջակցել ընկերություններին իրենց վաճառքի և շուկայավարման ռազմավարությունների իրականացման և ավտոմատացման գործում: Դուգլասը միջազգայնորեն ճանաչված թվային փոխակերպման և MarTech փորձագետ և խոսնակ է: Դուգլասը նաև Դումմիի ուղեցույցի և բիզնեսի առաջնորդության գրքի հրատարակված հեղինակ է:

    Առնչվող հոդվածներ

    Վերադառնալ սկիզբ կոճակը
    փակել

    Հայտնաբերվել է Adblock

    Martech Zone կարող է անվճար տրամադրել ձեզ այս բովանդակությունը, քանի որ մենք դրամայնացնում ենք մեր կայքը գովազդից ստացված եկամուտների, փոխկապակցված հղումների և հովանավորությունների միջոցով: Մենք երախտապարտ կլինենք, եթե մեր կայքը դիտելիս հեռացնեիք ձեր գովազդային արգելափակիչը: