{"id":249505,"date":"2023-01-03T13:37:00","date_gmt":"2023-01-03T10:37:00","guid":{"rendered":"https:\/\/inform.click\/syita-vaihtaa-html5-een-ja-esimerkkeja-jotka-tukevat-sita-edelleen\/"},"modified":"2023-01-03T13:37:00","modified_gmt":"2023-01-03T10:37:00","slug":"syita-vaihtaa-html5-een-ja-esimerkkeja-jotka-tukevat-sita-edelleen","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/syita-vaihtaa-html5-een-ja-esimerkkeja-jotka-tukevat-sita-edelleen\/","title":{"rendered":"Syit\u00e4 vaihtaa HTML5:een ja esimerkkej\u00e4, jotka tukevat sit\u00e4 edelleen"},"content":{"rendered":"

\n HTML5 on innovaation virtuoosiosa, ja se on todellakin tekniikka, joka on tuonut uutta verta verkkosivustokehityksen genreen. Halusitpa sitten verkkosivustollasi olevan muotoaan muuttavia toimintoja tai haluat sen n\u00e4ytt\u00e4v\u00e4n ylivoimaisesti kauniilta visuaalisesti, HTML5 tekee ty\u00f6n puolestasi ja mit\u00e4 mahtavimmalla tavalla.\n<\/p>\n

\n Vaikka t\u00e4m\u00e4 alusta tunkeutui verkkokehitysmaailmaan jo kauan sitten, ei ole pulaa verkkovastaajista, joilla ei ole sit\u00e4 ”kolmen suosituimman ty\u00f6kalun” luettelossa verkkosivuston rakentamisen kannalta. Ja suuri osa N\u00e4ist\u00e4 verkkovastaavista k\u00e4ytt\u00e4\u00e4 jo muita alustoja verkkosivuillaan, mik\u00e4 tekee kompromisseja monista ominaisuuksista, jotka HTML5 olisi voinut integroida heid\u00e4n verkkosivustoihinsa.\n<\/p>\n

\n 1 Se antaa vapaat ohjat luoville sieluille
\n<\/h5>\n

\n Innovaatio on suurimpien suunnittelijoiden ja kehitt\u00e4jien tunnusmerkki, ja kun tulee ty\u00f6kalu, jonka avulla he voivat harjoittaa luovuuttaan rajattomasti, sit\u00e4 on tuettava. HTML5 sopii t\u00e4ydellisesti ja parhaimmalla tavalla. Verkkokehityskehyksen\u00e4 HTML5 on eritt\u00e4in muokattavissa, joten suunnittelun ammattilaiset voivat ilmaista itse\u00e4\u00e4n. Joten kun edell\u00e4k\u00e4viminen on asialistallasi, HTML5-vaunu on paikallaan.\n<\/p>\n

\n 2 Paljon parannettu videotuki on k\u00e4ytett\u00e4viss\u00e4
\n<\/h5>\n

\n Videotukea on parannettu huomattavasti uudella HTML5-upotusvideolla selaimille. Koska kaikki selaimet eiv\u00e4t tue erilaisia \u200b\u200bmuotoja, kuten H.264, sinun on k\u00e4ytett\u00e4v\u00e4 seuraavaa, kun haluat n\u00e4ytt\u00e4\u00e4 HTML5-videon:\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 Sen avulla voit tehd\u00e4 verkkosivustoja ”mobiilik\u00e4ytt\u00f6\u00f6n” sen sijaan, ett\u00e4 se pakottaisi sinut luomaan useita versioita
\n<\/h5>\n
\n  Kirjaudu sis\u00e4\u00e4n sivustosi analytiikkaan, raaputa pintaa hieman ja tarkkaile k\u00e4ytt\u00f6j\u00e4rjestelm\u00e4alustoja, joilta saat suurimman osan vierailustasi. Yll\u00e4tyt n\u00e4hdess\u00e4si, ett\u00e4 suurin osa k\u00e4ynneist\u00e4si tulee mobiilik\u00e4ytt\u00e4jilt\u00e4, \u200b\u200btoisin kuin vuosi sitten, jolloin verkkosivustollasi oli luultavasti enemm\u00e4n ty\u00f6p\u00f6yt\u00e4k\u00e4ytt\u00e4ji\u00e4. Siten mobiilisivuston tekeminen on paljon suositeltavampaa kuin ty\u00f6p\u00f6yt\u00e4keskeisen verkkosivuston tekeminen ja mobiiliyst\u00e4v\u00e4llisen version luominen siit\u00e4. Ja HTML5 tekee siit\u00e4 eritt\u00e4in tehokkaan harjoituksen mobiililaitteille suunniteltujen verkkosivustojen luomiseen, jotka s\u00e4ilytt\u00e4v\u00e4t silm\u00e4ns\u00e4 houkuttelevan, kun niit\u00e4 k\u00e4ytet\u00e4\u00e4n pienemmill\u00e4 n\u00e4yt\u00f6ill\u00e4 ja jotka mukautuvat pienemp\u00e4\u00e4n kokoon aiheuttamatta yhteensopivuus- tai reagointiongelmia.\n<\/p>\n
\n  4 Convoluted XHTML doctype tekee tien helpommalle, v\u00e4hemm\u00e4n hankalalle versiolle
\n<\/h5>\n
\n  Ilmaiseksi sanottuna kehitt\u00e4j\u00e4yhteis\u00f6 ei ole suhtautunut XHTML-dokumenttiin intohimoisesti. Ja syy samaan on enemm\u00e4n kuin ilmeinen, kun se kirjoitetaan seuraavasti:\n<\/p>\n
nbsp;   \"http:\/\/www.xyz.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\"><\/code><\/pre>\n
\n  HTML5 on tehnyt ilmoituksesta paljon lyhyemm\u00e4n ja ymm\u00e4rrett\u00e4v\u00e4mm\u00e4n kehitt\u00e4jille:\n<\/p>\n
\n  5 attribuuttia voidaan havaita intuitiivisemmin
\n<\/h5>\n
\n  Ensinn\u00e4kin ohjelmassasi k\u00e4ytt\u00e4miesi attribuuttien pit\u00e4isi pysty\u00e4 saumattomasti m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4n, tunnistavatko selaimet ne oikein. HTML5 antaa n\u00e4ille attribuuteille edellytykset tehd\u00e4 juuri niin. Modernizr-kirjasto osoittautuu kekseli\u00e4\u00e4ksi ty\u00f6kaluksi, mutta on my\u00f6s muita tapoja, kuten elementtien luominen ennen niiden leikkaamista. T\u00e4ll\u00e4 tavalla on helppo arvioida selaimen ominaisuuksia.\n<\/p>\n
\n  6 Sill\u00e4 on korjauspaketti IE:lle
\n<\/h5>\n
\n  No, Internet Exploreria suhtaudutaan melko kiihke\u00e4sti Internet-yhteis\u00f6ss\u00e4 kaikkialla maailmassa, ja syist\u00e4, jotka ovat eritt\u00e4in oikeutettuja. Kuten odotettua, IE:ll\u00e4 on omat ongelmansa HTML5:n sis\u00e4lt\u00e4mien uusien elementtien k\u00e4sittelyss\u00e4. Siksi n\u00e4iden elementtien muotoilu sellaiseksi, ett\u00e4 ne tulevat ymm\u00e4rrett\u00e4v\u00e4mmiksi t\u00e4lle selaimelle, on t\u00e4rke\u00e4\u00e4, jotta HTML5-elementtien tapa saa rakenteen tunteen. on kohdistettu lohkotason elementtein\u00e4:\n<\/p>\n
header, footer, article, section, nav, menu {\n   display: block;\n}<\/code><\/pre>\n
\n  Nyt on kaikki mahdollista, ett\u00e4 Internet Explorer on jatkossakin tuskallinen, koska se ei ehk\u00e4 tunne kunnolla otsikkoelementti\u00e4. Joten HTML5:n tyyli on vaarassa j\u00e4\u00e4d\u00e4 r\u00e4ike\u00e4sti huomiotta. Samalle on kuitenkin helppo ratkaisu:\n<\/p>\n
document.createElement(\"article\");\ndocument.createElement(\"footer\");\ndocument.createElement(\"header\");\ndocument.createElement(\"nav\");\ndocument.createElement(\"menu\");<\/code><\/pre>\n
\n  7 Maantieteellinen sijainti
\n<\/h5>\n
\n  Geolocation on kiistatta HTML5:n saalisominaisuus. Se heitt\u00e4\u00e4 sinulle matemaattiset arvot, jotka edustavat k\u00e4ytt\u00e4j\u00e4n sijainnin koordinaatteja. N\u00e4m\u00e4 sijaintikoordinaatit lasketaan k\u00e4ytt\u00e4m\u00e4ll\u00e4 selainta, jolla vierailija k\u00e4ytt\u00e4\u00e4 verkkosivustoa.\n<\/p>\n
\n  8 koodia, joka on sotkuton ja paljon ymm\u00e4rrett\u00e4v\u00e4mpi
\n<\/h5>\n
\n  On aina suositeltavaa kirjoittaa ohjelmia, jotka ovat puhtaita, helposti ymm\u00e4rrett\u00e4vi\u00e4 ja kirjoitettuja mahdollisimman uudelleenk\u00e4ytett\u00e4viksi. HTML5 tekee kaiken t\u00e4m\u00e4n mahdolliseksi, ja enemm\u00e4nkin mahdollistamalla koodin, joka on eritt\u00e4in synkroninen, semanttinen ja antaa sinulle vapauden piirt\u00e4\u00e4 rajan tyylin ja sis\u00e4ll\u00f6n v\u00e4lille, jotta ne ovat helposti ymm\u00e4rrett\u00e4viss\u00e4. Normaali otsikkokoodi navigoinnin kanssa n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:\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  Vaikka saatat v\u00e4itt\u00e4\u00e4, ett\u00e4 koodi on tarpeeksi yksinkertainen, katsotaanpa mit\u00e4 HTML5 voi tehd\u00e4 sill\u00e4:<\/code>\n<\/p>\n
    \n  \u00a0<\/code><\/p>\n
    \n    Header Text<\/code>
    \n  <\/h1>\n
    \u00a0<\/code><\/p>\n