{"id":264982,"date":"2023-01-03T13:46:00","date_gmt":"2023-01-03T10:46:00","guid":{"rendered":"https:\/\/inform.click\/skal-for-dig-att-byta-till-html5-och-exempel-som-ytterligare-foresprakar-det\/"},"modified":"2023-01-03T13:46:00","modified_gmt":"2023-01-03T10:46:00","slug":"skal-for-dig-att-byta-till-html5-och-exempel-som-ytterligare-foresprakar-det","status":"publish","type":"post","link":"https:\/\/inform.click\/sv\/skal-for-dig-att-byta-till-html5-och-exempel-som-ytterligare-foresprakar-det\/","title":{"rendered":"Sk\u00e4l f\u00f6r dig att byta till HTML5 och exempel som ytterligare f\u00f6respr\u00e5kar det"},"content":{"rendered":"

\n HTML5 \u00e4r en virtuos del av innovation och \u00e4r verkligen en teknik som har gett nytt blod till genren f\u00f6r webbutveckling. Oavsett om du vill att din webbplats ska st\u00e5ta med formskiftande funktioner eller om du vill att den ska visa en \u00f6verv\u00e4ldigande vacker visuell attraktionskraft, g\u00f6r HTML5 jobbet \u00e5t dig, och det p\u00e5 ett mycket formidabelt s\u00e4tt.\n<\/p>\n

\n \u00c4ven om den h\u00e4r plattformen gjorde sitt int\u00e5g i webbutvecklingssf\u00e4ren f\u00f6r ett tag sedan, finns det ingen brist p\u00e5 webbansvariga som inte har den p\u00e5 sin lista \u00f6ver ”top 3 f\u00f6redragna verktyg” n\u00e4r det g\u00e4ller att bygga en webbplats. Och en stor del av dessa webbansvariga anv\u00e4nder redan andra plattformar f\u00f6r sin webbplats, och g\u00f6r d\u00e4rmed kompromisser med en rad funktioner som HTML5 kunde ha integrerat deras webbplatser.\n<\/p>\n

\n 1 Det ger fria tyglar till de kreativa sj\u00e4larna
\n<\/h5>\n

\n Innovation \u00e4r k\u00e4nnetecknet f\u00f6r de st\u00f6rsta formgivarna och utvecklarna, och n\u00e4r det kommer ett verktyg som l\u00e5ter dem ut\u00f6va sin kreativitet utan gr\u00e4nser, m\u00e5ste det godk\u00e4nnas. HTML5 passar perfekt, och p\u00e5 det sundaste s\u00e4ttet. Som ett ramverk f\u00f6r webbutveckling \u00e4r HTML5 super anpassningsbart, vilket g\u00f6r att designande proffs kan uttrycka sig sj\u00e4lva. S\u00e5 n\u00e4r det \u00e4r p\u00e5 din agenda att vara f\u00f6re kurvan \u00e4r HTML5-vagnen d\u00e4r f\u00f6r att f\u00e5nga.\n<\/p>\n

\n 2 Det mycket f\u00f6rb\u00e4ttrade videost\u00f6det \u00e4r till f\u00f6r att ta vara p\u00e5
\n<\/h5>\n

\n Videost\u00f6det har f\u00f6rb\u00e4ttrats avsev\u00e4rt med den nya HTML5-inb\u00e4ddningsvideon f\u00f6r webbl\u00e4sarna. Eftersom inte alla webbl\u00e4sare st\u00f6der olika format som H.264 m\u00e5ste du anv\u00e4nda f\u00f6ljande n\u00e4r du vill visa en HTML5-video:\n<\/p>\n

<video controls=\"\" preload=\"\"><code>     <source src=\"cohagenPhoneCall.ogv\" type=\"video\/ogg; codecs='vorbis, theora'\" \/><\/code>          \n
\n  Your browser does not support the format. Download this format.<\/a>\n<\/p><\/video><\/code><\/pre>\n
\n  3 Det l\u00e5ter dig skapa webbplatser ”f\u00f6r mobil”, ist\u00e4llet f\u00f6r att tvinga dig att skapa flera versioner
\n<\/h5>\n
\n  Logga in p\u00e5 din webbplats analys, skrapa lite p\u00e5 ytan och observera de OS-plattformar du f\u00e5r de flesta av dina bes\u00f6k fr\u00e5n. Du kommer att bli f\u00f6rv\u00e5nad \u00f6ver att se att majoriteten av dina bes\u00f6k kommer fr\u00e5n mobilanv\u00e4ndarna, till skillnad fr\u00e5n de siffror som fanns f\u00f6r ett \u00e5r sedan, d\u00e5 du f\u00f6rmodligen hade fler datoranv\u00e4ndare p\u00e5 din webbplats. Att g\u00f6ra en webbsida f\u00f6r mobilen \u00e4r allts\u00e5 mycket mer att rekommendera \u00e4n att g\u00f6ra en skrivbordscentrerad webbplats och sedan skapa en mobilv\u00e4nlig version av densamma. Och HTML5 g\u00f6r det till en mycket effektiv \u00f6vning att skapa webbplatser som \u00e4r anpassade f\u00f6r mobila enheter som beh\u00e5ller sin okul\u00e4ra tilltalande n\u00e4r de \u00f6ppnas p\u00e5 mindre sk\u00e4rmar och anpassar sig till den minskade storleken utan att sl\u00e4nga kompatibilitets- eller responsproblem \u00e5t dig.\n<\/p>\n
\n  4 invecklade XHTML doctype ger plats f\u00f6r en enklare, mindre kr\u00e5nglig version
\n<\/h5>\n
\n  F\u00f6r att uttrycka det utan tvekan, har XHTML doctype inte setts passionerat av utvecklarnas community. Och anledningen till detsamma \u00e4r mer \u00e4n tydlig med hur det skrivs som:\n<\/p>\n
nbsp;   \"http:\/\/www.xyz.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\"><\/code><\/pre>\n
\n  HTML5 har gjort deklarationen mycket kortare och mer begriplig f\u00f6r utvecklarna:\n<\/p>\n
\n  5 attribut kan uppt\u00e4ckas mer intuitivt
\n<\/h5>\n
\n  F\u00f6rst och fr\u00e4mst b\u00f6r de attribut du anv\u00e4nder i ditt program s\u00f6ml\u00f6st kunna avg\u00f6ra om de uppt\u00e4cks p\u00e5 l\u00e4mpligt s\u00e4tt av webbl\u00e4sarna. HTML5 ger dessa attribut m\u00f6jlighet att g\u00f6ra exakt det. Med Modernizr visar sig biblioteket vara ett fyndigt verktyg men det finns andra s\u00e4tt som att skapa elementen innan de dissekeras. P\u00e5 s\u00e5 s\u00e4tt blir det enkelt att utv\u00e4rdera webbl\u00e4sarens f\u00f6rm\u00e5ga.\n<\/p>\n
\n  6 Det har sin upps\u00e4ttning korrigeringar f\u00f6r IE
\n<\/h5>\n
\n  N\u00e5v\u00e4l, Internet Explorer ses ganska oh\u00e4lsosamt av Internet-gemenskapen \u00f6ver hela v\u00e4rlden, och av mycket motiverande sk\u00e4l. Som f\u00f6rv\u00e4ntat har IE sina egna problem med att hantera de nya elementen som HTML 5 h\u00e4ller in. D\u00e4rf\u00f6r \u00e4r det viktigt att utforma dessa element p\u00e5 ett s\u00e4tt s\u00e5 att de blir mer begripliga f\u00f6r den h\u00e4r webbl\u00e4saren f\u00f6r att ge en k\u00e4nsla av struktur till hur HTML5-elementen \u00e4r justerade som blockniv\u00e5element:\n<\/p>\n
header, footer, article, section, nav, menu {\n   display: block;\n}<\/code><\/pre>\n
\n  Nu finns det alla m\u00f6jligheter att Internet Explorer kommer att forts\u00e4tta att vara jobbigt eftersom det kanske inte \u00e4r ordentligt bekant med rubrikelementet. S\u00e5, stylingen i HTML5 riskerar att bli uppenbart ignorerad. Som sagt, det finns en enkel l\u00f6sning f\u00f6r detsamma:\n<\/p>\n
document.createElement(\"article\");\ndocument.createElement(\"footer\");\ndocument.createElement(\"header\");\ndocument.createElement(\"nav\");\ndocument.createElement(\"menu\");<\/code><\/pre>\n
\n  7 Geolokalisering
\n<\/h5>\n
\n  Geolokalisering \u00e4r onekligen f\u00e5ngstfunktionen i HTML5. Vad den g\u00f6r \u00e4r att den kastar \u00e5t dig de matematiska v\u00e4rdena som representerar koordinaterna f\u00f6r din anv\u00e4ndares plats. Dessa platskoordinater ber\u00e4knas med hj\u00e4lp av webbl\u00e4saren som bes\u00f6karen anv\u00e4nder f\u00f6r att komma \u00e5t webbplatsen.\n<\/p>\n
\n  8-kod som \u00e4r r\u00f6rig och mycket mer begriplig
\n<\/h5>\n
\n  Det rekommenderas alltid att skriva program som \u00e4r rena, l\u00e4tta att f\u00f6rst\u00e5 och skrivna p\u00e5 ett s\u00e4tt som \u00e4r mest \u00e5teranv\u00e4ndbart. HTML5 g\u00f6r allt detta m\u00f6jligt, och mer genom att underl\u00e4tta en kod som \u00e4r mycket synkron, semantisk och ger dig friheten att dra en gr\u00e4ns mellan stil och inneh\u00e5ll s\u00e5 att de l\u00e4tt kan f\u00f6rst\u00e5s. En standardhuvudkod med navigering ser ut s\u00e5 h\u00e4r:\n<\/p>\n
\n  \u00a0<\/code><\/p>\n
\n    Header Text<\/code>
\n  <\/h1>\n
\u00a0<\/code><\/p>\n
\n    \u00a0\u00a0<\/code><\/p>\n
    \n         <\/p>\n
  • \n        <a href=\"https:\/\/inform.clickx\">Link<\/a><\/code>\n      <\/li>\n
       <\/p>\n
  • \n        <a href=\"https:\/\/inform.clickx\">Link<\/a><\/code>\n      <\/li>\n
       <\/p>\n
  • \n        <a href=\"https:\/\/inform.clickx\">Link<\/a><\/code>\n      <\/li>\n
      \n    <\/ul>\n
    \u00a0<\/code>\n  <\/div>\n<\/div>\n
    \n  \u00c4ven om du kanske h\u00e4vdar att koden \u00e4r enkel nog, men l\u00e5t oss se vad HTML5 kan g\u00f6ra med den:<\/code>\n<\/p>\n
    \n  \u00a0<\/code><\/p>\n
    \n    Header Text<\/code>
    \n  <\/h1>\n
    \u00a0<\/code><\/p>\n