Forum @ Liavaag.org
https://www.liavaag.org/Forum/YaBB.pl
Norsk generell kategori >> Generell oppslagstavle >> HTML5 - Hypertext Markup Language
https://www.liavaag.org/Forum/YaBB.pl?num=1246582828

Message started by Administrator on 07/03/09 at 03:00:28

Title: HTML5 - Hypertext Markup Language
Post by Administrator on 07/03/09 at 03:00:28
HTML5 – Det nye markeringsspråket

XHTML 2.0 dumpet til fordel for HTML 5! Hvilken retning tar semantisk web nå – tilbake til HTML Tidy feil?


Det er nå bestemt at HTML 5 standarden fortsetter utviklingen. Samtidig er XHTML mer eller mindre stadfestet som en blindvei (akkurat som SGML?). Arbeidsgruppen på XHTML 2.0 avsluttes 31. desember 2009. Vedlikeholdsarbeidet på XHTML 1.1 vil fortsette, men betyr dette at vi bør fortsette med XHTML?


Det er mulig HTML 5 som fokuserer på webapplikasjonsutvikling er fremtiden og mer Cloud computing vennlig enn det de meget strikte XHTML standardene er. Dette kan i fremtiden representere en sterk konkurranse til veletablerte program tilegg for nettlesermarkedet som Adobes Flash and Microsofts Silverlight.


Diskuter gjerne her: Er HTML 5 godt for innhold på web 2.0, eller burde W3C gått sterkere mot strømmen og satset hardere på semantisk web?



Kilder


Title: Re: XHTML 2.0 dumpet til fordel for HTML 5
Post by Administrator on 02/23/10 at 02:07:31
HTML5 er ny versjon av HTML og XHTML

HTML 5 vil bruke en form for tidy. Feil syntaks i kildekoden vil (i motsetning til XHTML) kunne avleses i eldre nettlesere. Selv om syntaksen i HTML 5 minner om gamle tagger, og har kompatibilitet med eldre versjoner av HTML, så vil ikke HTML 5 baseres på SGML.

HTML 5 vil samtidig introdusere nye elementer som reflekterer moderne nettsteder. Noen av disse er semantiske utskiftninger for den vanlige anvendte div og span elementene. Eksempler på slike utskiftninger er navigasjonsblokkene nav, samt blokkene header og footer. Også multimedia skal standardiseres med elementer som audio og video. Også embed er på vei tilbake i varmen hos W3C.

På den andre siden vil noen elementer som i dag fremdeles anvendes i HTML 4.01 fjernes. Stil arkene (CSS) skal nå endelig ta over for elementer som font og center. Hensikten med HTML 5s kompatibilitet er å redusere utviklingskostnadene på nettlesere og nettsteder. Blant hundrevis av interesser er noen av de i arbeidsgruppen bak HTML 5 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia og Opera.




Kilde


Title: Re: XHTML 2.0 dumpet til fordel for HTML 5
Post by Administrator on 09/17/10 at 04:00:40
Men XHTML var ikke død!


HTML5 vil være den standarden som blir mest kompatibel med nettlesere. Denne standarden bruker HTML MIME type som text/html. Derimot hvis et dokument sendes med XML MIME typen application/xhtml+xml, så blir den behandlet i nettleseren av en XML prosessor.

XML og HTML er forskjellige. Mens minste feil i HTML syntaksen vil bli oversett, vil det i XML forhindre nettleseren å generere dokumentet fult ut. Denne XML syntaksen er det som blir definert som XHTML5.

Document Object Model (DOM) beskriver hvordan HTML- eller XML trestrukturen er representert. DOM, HTML syntaksen og XML kan ikke representere det samme innholdet. For eksempel kan ikke egne navn på tagger (namespace) brukes på HTML syntaksen, men derimot i DOM og XML. Motsatt, så kan noscript brukes med HTML syntaks, men ikke i DOM eller XML. Kommentarer som ”-->" kan anvende med DOM, men hverken med HTML syntaks eller i XML.


Kilder
[list bull-bluesq]
  • HTML vs XHTML -- W3C HTML5
  • HTML vs. XHTML -- WHATWG Wiki

  • Title: Re: XHTML 2.0 dumpet til fordel for HTML 5
    Post by Administrator on 01/28/11 at 20:11:43
    W3C HTML5 Logo


    Teknologien - beskrivelse av ikonenen nedenfor
    [olist]
  • Connectivity
  • CSS3 Styling
  • Device Access
  • 3D, Graphics, Effects
  • Multimedia
  • Performance & Integration
  • HTML5 Semantics
  • Offline & Storage
    [/olist]
    HTML5-Logo.png (17 KB | 912 )

  • Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 03/15/11 at 05:54:27
    Oppdateringer og nye elementer i HTML5


    Jeg har nå begynt på prosjektet å konvertere noen av fotoalbumene til HTML5. Overraskende validerer nå noen av disse albumene, til tross for at de faktisk hadde en eller flere feil per bilde i formatet XHTML 1.1 (WAI section 2 AAA).


    [list bull-greencheck]
  • København fotoalbum
  • London fotoalbum
  • Paris fotoalbum
  • Operaen fotoalbum
  • Santorini fotoalbum
  • Stockholm fotoalbum
  • Warszawa fotoalbum



    Fotoalbumene under har kun to eller færre feil. Dette er meget lavt sammenlignet med XHTML 1.1, der de hadde minst én feil per bilde. Det blir mange feil i store fotoalbum!


    [list bull-bluecheck]
  • Backstage galleriet
  • Beitostølen fotoalbum
  • Børtervann fotoalbum
  • Oslo fotogalleri
  • Oslo terror fotoalbum
  • Universitetet i Oslo fotoalbum




    Under er kilde og referanse på nye elementer i HTML5

    [list bull-blueball]
  • LiavaagWikis HTML5 portal

    ::)

  • Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 10/21/12 at 03:34:26
    Endelig HTML5 nettsider som validerer


    Ikke mange nyheter innenfor HTML5 i det siste annet enn at HTML5 blir offisiell webstandard i 2014 – og det planlegges en oppfølger. Det sies også at HTML5.1 vil komme i 2016 og at førsteutkastet til HTML5.2 vil utgis i 2015.

    Over sommeren har Liavaag.org oppdatert Nyhetsportalen til HTML5. Denne bygger igjen på London2012 Olympiske portal. Begge portalene validerer.

    [list bull-greensq]
  • Nyhetsportalen
    [list bull-greencheck]
  • Validerer (W3C HTML5)

  • London2012 Olympiske Portal
    [list bull-greencheck]
  • Validerer (W3C HTML5)

      :)

  • Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 11/13/12 at 01:53:10
    CSS3 – list-style-type

    Mange webutviklere fikk seg en kalddusj da de oppdaget at deres CSS3 stilark ikke lenger validerte. Tidligere uordnede lister (<ul>) brukte nemlig følgende typer: "disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha", "none", eller "inherit".

    [code css]
    /*
    Eksempel på unummerert liste
    */
    ul {
         display: block;
    }
    li {
         list-style-type: decimal-leading-zero;
    }

    /*
    Eksempel på <li> brukt i f.eks menyer
    */
    ul {
         display: inline;
    }
    li {
         list-style-type: none;
    }
    [/code]

    Valgene over vil rett og slett ikke validere
    Dette av at HTML5 ikke støtter attributtvalg (listed-item-type), noe som nå også er innført på CSS3. Uordnede lister (som skal validere) kan bruke typen "inherit", egen URL til punktlisten, eller default verdiene.

    [code css]
    /*
    Eksempel på uordnede lister som validerer
    */
    ul {
         display: block;
    }
    li#method-one {
         list-style-type: inherit;
    }
    li#method-two {
         list-style: url(my_listed_item.png);      
    }
    [/code]

    Transitional HTML5
    For menyer i XHTML 1.1 (også HTML 4.01) kan attributtet inline brukes. <li> vil da automatisk fjerne listemerkingen. Hvis man ikke deklarere noe som helst, vil <li> bruke default verdiene ("disc", "circle", "square" i denne rekkefølgen).

    [code css]
    /*
    Eksempel på <li> brukt i horisontale menyer som validerer
    I menyer hvor attributtet "inline" brukes, vil listemerkingen i taggen <li> automatisk bli fjernet.
    */
    ul {
         display: inline;
    }

    /*
    Eksempel på <li> brukt i vertikale menyer som validerer
    */
    ul {
         display: block;
    }

    li {
         list-style: none;
    }
    [/code]

    Konklusjon
    I fremtiden vil HTML5 bruke semantisk navigasjon med <nav> elementet i menyer. Derfor vil det bli naturlig å bruke URL til punktlistene, eller rett og slett default-verdiene.

    Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 11/28/12 at 21:24:28
    CSS3 – list-style-type validerer igjen?!

    I post #7 kunne man lese at:


    Administrator wrote on 11/13/12 at 01:53:10:
    Mange webutviklere fikk seg en kalddusj da de oppdaget at deres CSS3 stilark ikke lenger validerte. Tidligere uordnede lister (<ul>) brukte nemlig følgende typer: "disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha", "none", eller "inherit".


    Nå validerer imidlertid attributtvalg (listed-item-type), også på CSS3 og HTML5. Dette beviser at det var litt tidlig å trekke konklusjonen i #7:


    Administrator wrote on 11/13/12 at 01:53:10:
    I fremtiden vil HTML5 bruke semantisk navigasjon med <nav> elementet i menyer. Derfor vil det bli naturlig å bruke URL til punktlistene, eller rett og slett default-verdiene.



    Med andre ord ble det litt ekstra arbeid for de av oss som våknet til en kalddusj i starten av november. Jeg tror fremdeles at #7 er nyttig info til å lage menyer (ellers ville jeg slettet den). Uansett så skal det virkelig bli spennende å se utviklingen til HTML5 og CSS3 fremover.

    Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 04/09/13 at 01:01:37
    Responsive webdesign (RWD) og Adaptivt webdesign


    Responsive web design (RWD) innebærer at en webside forandres etter skjermoppløsning – eller som i praksis støtter alle skjermoppløsninger. Dette betyr at samme HTML dokumentene brukes på alt fra desktopper, lapptopper, nettbrett, smarttelefoner og mobiltelefoner. Utviklingen av smarttelefoner og apper har helt klart påvirket utviklingen av RWD.


    RWD bruker CSS3 media spørringer (Media Queries), en videreutvikling av @media regelen, for å tilpasse layouten. Noen mener RWD bør oppfylle tre krav:

    [olist]
  • Fleksible grids
  • Fleksible bilder
  • Media Queries
    [/olist]

    Tidvis ønsker man ikke fleksible bilder og grids, men kun media spørringer. Utover at man da kan kombinere absolutte og relative verdier i CSS-utviklingen, er det også enklere å tilpasse eksisterende webdesign som i praksis støtter alle skjermoppløsninger. Dette benevnes også ofte som adaptive webdesign.

    [code css]
    @media only screen and (min-width:640px) {
         div#vga {
               color: #000000;
               background: url('img/vga.png') repeat-y;
         }
    }
    @media only screen and (min-width:800px) {
         div#svga {
               background: url('img/svga.png') repeat-y;
         }
    }
    @media only screen and (min-width:1280px) {
         div#sxga {
               background: url('img/sxga.png') repeat-y;
         }
    }
    @media only screen and (min-width:1600px) {
         div#uxga {
               background: url('img/uxga.png') repeat-y;
         }
    }
    @media only screen and (min-width:1920px) {
         div#wuxga {
               background: url('img/wuxga.png') repeat-y;
         }
    }
    @media only screen and (min-width:1920px) {
         div#hd1080 {
               height:1080px;
               background: url('img/hd1080.png') repeat-y;
         }
    }
    [/code]

    Kilder
    [list bull-redsq]
  • Adaptive Web Design by Aaron Gustafson May 30, 2011
  • Responsive Web Design by Ethan Marcotte May 25, 2010 (Alistapart)

  • Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 04/22/13 at 04:08:12
    Responsive webdesign (RWD): Tilpasse nettsiden til smarttelefoner med 720px og 1080px oppløsning


    Hvordan tilpasser man nettsiden sin til smarttelefoner, uten å ty til egne apper? Løsningen er å bruke CSS3 til de enkelte media typene, eller media spørringer (Engelsk: Media Queries). Ofte er det greit å ha mer lettleste menyer og innhold når telefonen brukes stående. Med andre ord kan det være greit å skille mellom portrett og landskapsmodus på smarttelefonen. I eksempelet under ble Samsung Galaxy S3 brukt. Den bruker som kjent Android og har skjermoppløsning på 1,280 x 720 piksler (landskap x portrett). Det er også et eksempel for den kommende Galaxy S4, som bruker full HD oppløsning på henholdsvis 1920px x 1080px.

    [code css]
    /*
    Målrette media CSS3 mediesøk mot Galaxy S3 (og S4)
    */
    body {
         font-size:14px;
    }
    /*
    Galaxy S3 (HD 720p)
    */
    @media only screen and (max-device-width:720px) and (orientation:portrait) {
         body {
               font-size:20px;
         }
    }
    @media only screen and (max-device-width:1280px) and (orientation:landscape) {
           body {
               font-size:16px;
         }
    }
    /*
    Galaxy S4 (HD 1080p)
    */
    @media only screen and (max-device-width:1080px) and (orientation:portrait) {
         body {
               font-size:18px;
         }
    }
    @media only screen and (max-device-width:1920px) and (orientation:landscape) {
           body {
               font-size:14px;
         }
    }
    [/code]

    Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 04/24/13 at 04:06:37
    Bruke responsive webdesign (RWD) i eldre nettlesere? Løsningen er å inkluder Media Queries JavaScript


    Internet Explorer 8 og eldre versjoner støtter ikke CSS3 media spørringer (Media Queries). En løsning er å glemme disse nettleserne. En annen løsning er å tilsette følgende kode til hodet (head elementet) i dokumentet:

    [code html]
    <!--[if lt IE 9]>
         <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    [/code]

    Ved å legge til CSS3-mediaqueries.js JavaScript-filen, vil du aktiverer eldre nettlesere til å støtte CSS3 media spørringer.  ::)

    Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 04/24/13 at 04:36:11
    Eksempel på bruk av de nye HTML5-elementer



    Administrator wrote on 02/23/10 at 02:47:38:
    New tags (and some replacements)

    New Tags Definitions
    <article> Article
    <aside> Content aside from the page content


    I innlegget ovenfor viste jeg noen eksempler på nye koder i HTML5. Nedenfor har jeg laget to enkle eksempler som viser hovedstrukturen i oppsettet.

    XHTML 1.1 med div konteinere

    [code html]
    <!-- XHTML 1.1 hovedstruktur -->
    <div id="header">
         <h1>London Galleriet</h1>
         <div id="nav">
               <ul>
                     <li><a href="../">Hjem</a></li>
                     <li><a href="../Meny/">Meny</a></li>
               </ul>
         </div>
    </div>
    <div id="aside">
         <h2>Flere gallerier</h2>
         <img src="img/London.jpg" width="200" height="200" alt="London Tower">
    </div>
    <div id="content">
         <div id="london-gallery">
               <!-- Innhold... -->
         </div>
    </div>
    <div id="footer">
         <p>&copy; 2013 Liavaag.org</p>
    </div>
    [/code]

    Under den samme strukturen, men med HTML5 elementene

    [code html]
    <!-- HTML5 hovedstruktur -->
    <header>
         <h1>London Galleriet</h1>
         <nav>
               <ul>
                     <li><a href="../">Hjem</a></li>
                     <li><a href="../Meny/">Meny</a></li>
               </ul>
         </nav>
    </header>
    <aside>
         <h2>Flere gallerier</h2>
         <img src="img/London.jpg" width="200" height="200" alt="London Tower">
    </aside>
    <section>
         <article id="london-galleriet">
               <!-- Innhold... -->
         </article>
    </section>
    <footer>
         <p>&copy; 2013 Liavaag.org</p>
    </footer>
    [/code]

    Eldre nettlesere
    Internet Explorer 8 og eldre nettlesere støtter ikke de nye HTML5-elementene som <header>, <aside>, <footer> osv. Inkluder derfor koden under i hodet (head elementet). Da vil IE8 og eldre nettlesere erkjenne de nye elementene:

    [code html]
    <!--[if lt IE 9]>
         <script src="http://www.liavaag.org/common/js/html5shiv.js"></script>
    <![endif]-->
    [/code]

    Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 04/29/13 at 01:34:30

    Administrator wrote on 04/24/13 at 04:36:11:
    Eksempel på bruk av de nye HTML5-elementer

    [...]

    Eldre nettlesere
    Internet Explorer 8 og eldre nettlesere støtter ikke de nye HTML5-elementene som <header>, <aside>, <footer> osv. Inkluder derfor koden under i hodet (head elementet). Da vil IE8 og eldre nettlesere erkjenne de nye elementene:

    [code html]
    <!--[if lt IE 9]>
         <script src="http://www.liavaag.org/common/js/html5shiv.js"></script>
    <![endif]-->
    [/code]


    HTML5 Shiv – HTML5 Internet Explorer1 aktiveringsscript


    HTML5 Shiv er et script som legger til nye HTML5-elementer til foreldede nettlesere. Last ned scriptet (se nedenfor) og legg det inn før <body> elementet, dvs. i dokumentets hode. For best ytelse kan det være smart å inkludere CSS først, deretter dette scriptet. Kildekoden er dual lisensiert under MIT og GPL versjon 2 lisensene.


    1Aktiverer HTML5-elementer for IE 6-9, Safari 4.x, iPhone 3.x, og Firefox 3.x.


    Kilder
    [list bull-blacksq]
  • GitHub, hele opprinnelige kilden: aFarkas/html5shiv
  • Googe code: Html5shiv

  • Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 04/29/13 at 06:33:27
    Lag header koder for foreldede Internet Explorer nettlesere


    Programmere responsive webdesign betyr at webutviklerne ofte bruker HTML5-elementer og CSS3, som eldre nettlesere ikke støtter (helt opp til IE8). Men disse foreldede nettleserne støtter heldigvis kommentarkoder. Disse kodene må plasseres i hodet på HTML-dokumentet. Som eksemplene nedenfor viser, fungerer kodene både på stilark og skript.

    [code html]<head>
    <link rel="stylesheet" type="text/css" href="default.css" />


    <!-- All IE versjonene -->
    <!--[if IE]>
         <link rel="stylesheet" type="text/css" href="alle-ie.css" />
    <![endif]-->


    <!—Alle untaken IE -->
    <!--[if !IE]>
         <script src="ikke-ie.js"></script>
    <![endif]-->


    <!-- Kun IE7 -->
    <!--[if IE 7]>
         <script src="kun-ie.js"></script>
    <![endif]-->


    <!-- IE8 og eldre (lavere) -->
    <!--[if lt IE 9]>
         <link rel="stylesheet" type="text/css" href="ie8-og-eldre.css" />
    <![endif]-->


    <!-- IE 8 og nyere (høyere) -->
    <!--[if gt IE 7]>
         <link rel="stylesheet" type="text/css" href="ie8-og-nyere.css" />
    <![endif]-->
    </head>
    <body>
         <h1>Hallo verden!</h1>
    </body>[/code]

    Om hacks

    [code css]/* IE8 støtte */
    #div {
         height:480px\0/;
    }

    /* IE7 og IE8 støtte */
    #div {
         height:480px\9;
    }

    /* Understreksfilter IE7 og senere */
    #div {
         min-height:480px;
         _height:480px;
    }

    /* IE7 støtte */
    *+html #div {
         height:480px;
    }

    /* IE6 støtte */
    * html #div {
         height:480px;
    }

    /* Skjul IE6 og elder (lavere) */
    #div {
         height/**/: 480px;
    }

    html > body #div {
         height:480px;
    }[/code] :-?

    Såkalte hacks er en dårlig idé, fordi de ikke er standardiserte, og du kan dermed ikke forutsi hvordan oppfører seg i fremtidige nettlesere. Det er derfor responsive web design er en langt bedre idé.


    Kilde
    CSS-Tricks: How To Create an IE-Only Stylesheet

    Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 08/28/13 at 23:38:20
    target="_blank" i HTML5?


    Å bruke target="_blank" til linker i HTML har vært de facto metoden for å åpne lenker i nye vinduer. Med XHTML 1.0 Strict og XHTML 1.1 ble denne metoden avskrevet, fordi dette kunne forvirre brukeren. Dessuten fungerte ikke tilbake-knappen på nettleseren, da den nye fanen, eller vinduet, ikke beholdt nettleserloggen. Dette synet på target="_blank" har nå imidlertid endret seg. W3C har nå foreløpig tillat bruk av target="_blank" i HTML5…


    Videre lesning
    W3C - A valid browsing context name or keyword (engelsk)

    Title: Re: HTML5 – Det nye markeringsspråket
    Post by Administrator on 11/26/13 at 02:53:00
    Google Maps i HTML5


    Google Maps API versjon 2 er ikke lenger tilgjengelig. Koden må derfor lages i API v3. Dette har ikke så veldig mye å gjøre med HTML5, men hvis du vil ha Google kart på nettsiden din, må du bruke API JavaScript versjon 3, så derfor viser jeg hvordan det skal gjøres uansett.

    [code html]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no">
    <head>
    <title>API v2</title>

    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=...DIN API v2 nøkkel"></script>
    <style type="text/css">
         function initialize() {
               var map;
               if (GBrowserIsCompatible()) {
                     var mapOptions = {
                     googleBarOptions : {
                     style : "new"
                     }
               }
                   map = new GMap2(document.getElementById("map-canvas"), mapOptions);
                   map.setCenter(new GLatLng(59.921290,10.753051), 16);
                   map.setMapType(G_NORMAL_MAP);
                   map.setUIToDefault();
                   map.openInfoWindow(map.getCenter(), document.createTextNode("Info om Dansens Hus"));
               }
         }
    </style>
    </head>
    <body onload="initialize()" onunload="GUnload()">
         <div id="map-canvas"></div>
    </body>
    </html>
    [/code]

    [code html]
    <!DOCTYPE html>
    <html lang="no">
    <head>
    <title>API v3</title>
    <!-- Trengs ingen API nøkkel i Google Maps API v3 -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <style type="text/css">
         function initialize() {
               var myLatlng = new google.maps.LatLng(59.921290, 10.753051);
               var mapOptions = {
                   zoom: 16,
                   center: myLatlng
           }
           var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

           var marker = new google.maps.Marker({
         position: myLatlng,
         map: map,
         title: 'Dansens Hus'
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </style>
    </head>
    <body>
         <div id="map-canvas"></div>
    </body>
    </html>
    [/code]

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 03/23/14 at 16:13:32
    @font-face regel – CSS3 webfonter

    Med font-face regelen kan webdesignere bruke hvilken som helst font man vil, uansett om brukeren har den installert på datamaskinen sin eller ikke. Fontene er definert innenfor CSS3, og vil bli lastet ned til brukeren. Webdesignere må sørge for at fonten er lisensiert for nettbruk, før den blir lastet opp til serveren. For Internet Explorer, anbefales EOT (Embedded Opentype) filer. For resten av nettleserne kan du enten bruke OTF (Opentype) eller TTF (Truetype). Det finnes også andre formater som er tilgjengelige, som SVG (Scalable Vector Graphics) og WOFF (Web Open Font Format). Sistnevnte er støttet i alle nyere nettlesere (Chrome 5, Firefox 3.6, Internet Explorer 9, Opera 11.1, og Safari 5.1).

    [code css]
    /*
    Basic @font-face regel
    */
    @font-face {
         font-family: myFont;
         src: url('my_font.eot');
         src: url('my_font.otf')
         src: url('my_font.ttf')

    }
    h1 {
         font-family:myFont;
    }
    [/code]

    Koden ovenfor vil gjøre jobben i de fleste tilfeller, men det finnes også mer pålitelige teknikker. Webdesigneren kan utvide regelen med en indikator på skriften (format). En annen teknikk er å legge til local i front av skrifttype. Nettleseren vil da se etter en lokal kopi av fonten i tilfelle brukeren allerede har den.

    [code css]
    /*
    Utvidet @font-face regel
    */
    @font-face {
         font-family: myFont;
         src: local('My Font'), local('My-Font'), url('my_font.eot') format('embedded-opentype');
         src: local('My Font'), local('My-Font'), url('my_font.otf') format('opentype');
         src: local('My Font'), local('My-Font'), url('my_font.ttf') format('truetype');
         src: local('My Font'), local('My-Font'), url('my_font.svg#myfont') format('svg');
         src: local('My Font'), local('My-Font'), url('my_font.woff') format('woff');
    }
    h1 {
         font-family:myFont;
    }
    [/code]

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 03/23/14 at 22:44:21
    WebGL – HTML 5 med 3D støtte


    Den kommende webstandarden WebGL er JavaScript-kontrollert 3D-grafikk API (Application programming interface). Standarden gir uante muligheter for fremtidige webbaserte spill på nettleseren. WebGL er basert på OpenGL ES 2.0, og brukes i HTML5s Canvas elementer (tagger).


    Google, Mozilla, Apple og Opera arbeider med støtte for WebGL i HTML5 i sine nettlesere. Firefox  4.0 og senere versjoner, samt Google Chrome 9.0 og senere versjoner vil få full støtte for WebGL i HTML5. Allerede dagens Google Chrome 8.0 har delvis støtte for WebGL. Fremtidige Safari 6.0 vil også få delvis støtte, men hvorvidt Opera 11.1 og Microsoft Internet Explorer 9 (IE9) vil få støtte for WebGL er usikkert.



    Som nevnt over støtter dagens Google Chrome delvis WebGL, og det er lagt ut demoer på lenken under:

    [list bull-blueball]
  • WebGL Experiments -- Chrome Experiments


    8-)

  • Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 03/29/14 at 00:45:41
    CSS3 animasjoner som validerer

    I HTML5 og CSS3 er det fristende for webdesignere å bruke animasjoner i stilarkene. Men det er noen problemer. Ikke alle nettlesere, som Chrome og Safari, støtter animasjoner i stilarkene. Nyere nettlesere som Internet Explorer og Firefox støtter dette, men eldre versjoner er en annen historie. Så blant eksemplene nedenfor, det er bare W3C-versjonen som validerer. Vil du at dokumentene dine skal valideres, må du dermed finne alternative oppsett til animasjonene. Sorry!
    :'(

    [code css]
    h1 {
         animation-fill-mode:forwards; /* W3C */
         -webkit-animation-fill-mode:forwards; /* Safari & Chrome */
         -moz-animation-fill-mode:forwards; /* Firefox */
         -ms-animation-fill-mode:forwards; /* Internet Explorer */
         -o-animation-fill-mode:forwards; /* Opera */      

         animation:fadein ease-in 1; /* W3C */
         -webkit-animation:fadein ease-in 1; /* Safari & Chrome */
         -moz-animation:fadein ease-in 1; /* Firefox */
         -ms-animation:fadein ease-in 1; /* Internet Explorer */
         -o-animation:fadein ease-in 1; /* Opera */
               
         animation-duration:10s; /* W3C */
         -webkit-animation-duration:10s; /* Safari & Chrome */
         -moz-animation-duration:10s; /* Firefox */
         -ms-animation-duration:10s; /* Internet Explorer */
         -o-animation-duration:10s; /* Opera */
    }      

    /* W3C */      
    @keyframes fadein {
         from {
               opacity:0;
         } to {
               opacity:1;
         }
    }
    /* Safari & Chrome */      
    @-webkit-keyframes fadein {
         from {
               opacity:0;
         } to {
               opacity:1;
         }
    }
    /* Firefox */
    @-moz-keyframes fadein {
         from {
               opacity:0;
         } to {
               opacity:1;
         }
    }
    /* Internet Explorer */
    @-ms-keyframes fadein {
         from {
               opacity:0;
         } to {
               opacity:1;
         }
    }
    /* Opera */
    @-o-keyframes fadein {
         from {
               opacity:0;
         } to {
               opacity:1;
         }
    }
    [/code]

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 06/21/14 at 03:26:11
    HTML5 video

    HTML5 gir en standard for visning av videoer på nettsteder. Før HTML5 var det ingen standard for dette, men videoene kunne bare spilles med programtillegg installert i nettleseren. HTML5 bygger inn en video på en nettside med <video> elementet.


    Det finnes forskjellige typer MIME for videoformater: MP4, Ogg og WebM er tre eksempler. De tre videoformater tillater strømming (streaming) over internett. Det vanligste videoformatet er MP4 (MPEG-4 Part 14), som formelt er ISO/IEC 14496-14:2003.


    [code html]
    <video width="1920" height="1080" preload controls poster="Munch.png">
         <source src="Skrik.mp4" type="video/mp4">
         <source src="Skrik.ogg" type="video/ogg">
         <source src="Skrik.webm" type="video/webm">
         <p>Her er tilbakefallet av innholdet</p>
    </video>
    [/code]


    HTML5 <video> element eksempel: Skrik...

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 12/02/14 at 01:41:00
    Forhindre horisontale menyer fra å kollapse

    Det er irriterende når horisontale menyer er pakkes inn eller kollapser når brukeren zoomer inn nettleservinduet. En rask metode for å unngå dette er ganske enkelt å erstatte display:inline med display:table-cell. Grunnen til at dette virker, er at margin i CSS3 gjelder alle elementer, bortsett fra elementer med table-display typer (unntatt table, table-caption og inline-table). Med andre ord, så virker ikke marginer i CSS3 med display:table-cell elementer. Så hvis du bare legger display:table-cell til li elementene i CSS3, bør du bli kvitt kollapsende horisontale menyer.

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 03/05/15 at 01:21:47
    HTML5 – Prefetch (forhåndshenting)

    HTML5 har en ny og fremdeles relativt ukjent funksjon som går under navnet «prefetch» (forhåndshenting). På dette nettstedet har det vært brukt en stund, fordi HTML5 ikke støtter lightbox funksjonen hvor man bruker rel="lightbox", og til dels fordi nettstedet kjører på LiteSpeed server. Derimot ved å bruke rel="prefetch" (og oppdatere javascriptet tilsvarende), så gjør det susen. Dette fordi HTML5 forhåndslaster ressursene for å gi brukerne en rask og umiddelbar opplevelse. Moderne nettsteder optimalisert for fart krever mer enn kun minimalisert nedlastningsstørrelse. En mulighet for å øke hastighetene er å starte nedlastingene raskere.

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 03/16/15 at 23:39:40
    HTML5 videoer i Responsivt Web Design

    Når jeg programmerer Responsivt Web Design (RWD), pleier jeg å bruke "max-device-width:768px" i mine stilark. Dette virker på smarttelefoner samt nettbretts portrettmodus. Det er nemlig slik at en piksel er ikke bare en piksel. De fleste smarttelefoner (inklusive Galaxy S5 og iPhone 6) har en oppløsning nærmere VGA enn HD eller 4k. Uansett, så er ikke statiske bredder noen god idé i RWD (miljøer med flytende bredder). For å lage bilder skalerbare (eller flytende), bruker jeg "max-width:100%" og "height:auto". Dessverre fungerer ikke dette på videoer, da de gjerne får litt flate og rare former. Jeg fant en artikkel som hadde en fin løsning på dette problemet. Løsningen er å fjerne bredde og høyde fra videoen i selve HTML dokumentet, og legge iframe i en boks. Eksemplet nedenfor fungerer på HTML5-videoer, inkludert innebygde YouTube-videoer.

    [code css]
    /*
    Handheld Styles
    */
    @media only screen and (max-device-width:768px) {
         section img {
               max-width:100%;
               height:auto;
         }
         section div#VideoPlayer {
               position:relative;
               padding-bottom:56.25%; /* 16:9 */
               padding-top:25px;
               height:0;
         }
         section div#VideoPlayer iframe {
               top:0;
               left:0;
               width:100%;
               height:100%;
               position:absolute;
         }
    }
    [/code]

    Kilder
    [list bull-redsq]
  • @media device breakpoints — Responsive Web Design
  • Fluid Width Video

  • Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 04/23/15 at 00:33:18
    Responsivt Web Design: Bredde vs enhetsbredde (device-width vs. width)


    I eksempelet ovenfor kan du spørre deg hvorfor jeg foretrakk «device-width» i stedet for «width»? Grunnen er at «device-width», altså enhetsbredden, refererer til selve enheten. Eksempelet ovenfor fungerer fint på enheter som har en skjermoppløsning mindre enn 768 piksler på tvers. De fleste smarttelefonene i dag har en enhetsbredde på mindre enn 480px (VGA), til tross for at de har en høyere skjermoppløsning. For eksempel en Retina-skjermen på en iPhone 6 Plus har 2208 piksler i liggende modus og 1242 piksler i stående modus. Men med et CSS pikselforhold på tre, er den egentlige enhetsbredden på 736 piksler, mens enhetshøyden (device-height) er på 414 piksler. Med andre ord klemmer Retina-skjermen tre piksler inn i hver CSS-piksel som vises på skjermen.


    Fordi desktopper sjelden har lavere skjermoppløsninger enn 768px, foretrekker jeg å bruke «device-width». Dette rett og slett fordi «device-width» er rettet mot håndholdte enheter på samme tid som det ikke påvirker desktopper med små nettleservinduer. Det er bare et spørsmål om smak! Uansett, linken tar deg til en liste over pixel dimensjonene og viewport dimensjonene på noen av de mest populære håndholdte enhetene: CSS Pixel Widths.

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 05/01/15 at 20:06:46
    Hvis og bare hvis - det semantiske, responsive navigasjonsikonet

    Hamburgerknappen eller navicon: ≡


    Det blir mer og mer vanlig å bruke navigasjonsikonet (navicon) i responsive kollapsende webmenyer (hamburger-knappen). Det er forskjellige måter å lage disse tre-linjemeny-ikonene (navicon’er). En måte å gjøre dette på er ganske enkelt å bruke et bilde med tre streker! En annen måte er å bruke trippelbartegnet i Unicode, som er U + 2261 ≡ identisk & # 8 8 0 1 ; eller & e q u i v ;. Noen webutviklere bruker også TRIGRAM FOR HEAVEN (U + 2630), HTML Entity (desimal) & # 9 7 7 6 ;


    Noen problemer med hamburgerknappen (i henhold til Luis Abreu) er:
    [list bull-redcheck]
  • Mindre oppdagbarhet
  • Mindre effektiv
  • Konflikter mellom plattformers navigasjonsmønstre
  • Lite oversiktlige


    I hovedsak kan man si at hva som er ute av syne er også ute av sinnet. Alle navigeringsalternativene som du gjemmer bak hamburgerknappen vil derfor bli brukt mye mindre. Det hjelper heller ikke å legge hamburgerknappen øverst i venstre hjørne. Det er det vanskeligste stedet å nå hvis du bruker smarttelefon med bare høyrehånda. Løsningen for bedre og grunnleggende menneske-maskin interaksjon kan være å gjennomgå informasjonsarkitekturen din, og bruke en fanelinje.


    Kilder
    [olist]
  • The Semantic, Responsive Navicon Smashing Magazine av Jordan Moore (2012-10-08)
  • Kill The Hamburger Button TechCrunch av Josh Constine (2014-05-24)
  • Why and How to Avoid Hamburger Menus Luis Abreu (2014-05-14)
  • Triple bar Wikipedia (2015-04-28)
    [/olist]
    Kill-The-Hamburger-Button.png (31 KB | 418 )

  • Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 07/28/16 at 10:20:09
    Når gradient-bakgrunnen for kroppen (body) ikke strekker til 100%!


    Noen ganger vil rett og slett ikke gradient-bakgrunnen generert i CSS3 strekke til 100 prosent i HTML5 dokumenter. Som det kan sees i eksempel 1 nedenfor, der gradient-bakgrunnen går fra rødt til svart, virker det som bakgrunnen bare stopper og begynne å gjenta seg selv (starter på rødt igjen) under slutten av bunntekst taggen </footer>. Bug-fix’en for dette, som vist i eksempel 2 nedenfor der gradient bakgrunnen er svart hele veien, er ganske enkelt å legge til kodebiten nedenfor i stilarket. Høydeverdien for HTML fungerer på alle nettlesere inkludert de som er installert på smarttelefoner.


    [code css]
    html {
         height:100%; /*Bug fix for height -> Gradient for body will not stretch*/
    }
    body {
         color:#ffffff;
         font-size:16px;
         font-style:normal;
         background:#000000;
         background:linear-gradient(to bottom,red 0%,black 100%);
         background-image:-webkit-gradient(linear, top, bottom, color-stop(0,red), color-stop(1,black));
         background:-webkit-linear-gradient(top,red 0%,black 100%);  /*Android bug fix*/
         background:-moz-linear-gradient(top,red 0%,black 100%);
         background:-o-linear-gradient(top,red 0%,black 100%);

            /*Disse feilrettingene er ikke nødvendige, men legg dem til i tilfelle for foreldede nettlesere*/
            background-repeat:no-repeat;
            background-attachment:fixed;
            height:100%;
            margin:0;
    }
    [/code]
    Gradient-background-will-not-stretch.png (148 KB | 272 )

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 09/06/16 at 20:14:40
    Forhindre at skript kjører på mobile enheter ved å bruke isMobile


    Noen ganger er det ønskelig at Java script som er optimalisert for desktoper ikke skal kjøre på mobile enheter. Det er flere måter å gjøre dette på, men den mest effektive er å bruke isMobile biblioteket. Bak in hele scriptet du ikke vil skal kjøre i følgende skript:

    [code javascript]
    function isMobile() {
         return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }
    if (!isMobile()) {
    //Her kommer skriptet du ikke ønsker å kjøre på mobile enheter
    }
    [/code]

    Du finner et eksempel på hvordan isMobile fungerer her: https://www.liavaag.org/Album/New-York/. Prøv ut de sosiale delingsknappene på både desktop og en smarttelefon eller lignende. Du vil se at miniatyrbildene på fotoalbumet åpnes i mange undersider på desktop-versjonen, mens mobilenhetene får dem alle plassert under hverandre. For å hindre AddThis å krasje med Ajax programmeringen, er JavaScriptet som lager undersidene frakoblet med isMobile. Problemet løst!  :)


    Kilder
    [olist]
  • GitHub A simple JS library that detects mobile devices. [ONLINE] Tilgjengelig: https://github.com/kaimallea/isMobile [2016-09-06]
  • Stack Overflow (2015-02-15) javascript - How do I prevent a script from running on mobile devices? [ONLINE] Tilgjengelig: http://stackoverflow.com/questions/12259701/how-do-i-prevent-a-script-from-running-on-mobile-devices [2016-09-06]
  • Stack Overflow (2015-01-04) javascript - What is the best way to detect a mobile device in jQuery? [ONLINE] Tilgjengelig: http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery [2016-09-06]
    [/olist]

  • Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 10/10/16 at 02:16:17
    Geolocation API


    Geolokasjon API i HTML5 henter den geografiske plasseringen til en bruker. Posisjonen på en enhet, smarttelefon eller desktop er bare kun tilgjengelig så lenge brukeren godkjenner det. Dette av at det kan kompromittere personvernet. Med Chrome 50 og over, fungerer det bare med HTTPS. Hvis du vil at resultatet vises med et Googlekart også, støtter de nyeste smarttelefonene, samt de nyeste nettleserne kun kart med en API-nøkkel. Konklusjonen er at Geolokasjon med API kun fungerer med både HTTPS og en API-nøkkel.

    Hvordan virker det?
    Nettsteder i gamle dager brukte IP-adressen for å finne posisjonen din. Med HTML5 Geolocation API, kan nettleseren finne posisjonen din ved hjelp av data fra GPS, Wi-Fi-nettverk, basestasjoner, blåtann samt IP-adressen. Det finnes en måte å forfalske geolokasjonen (GPS-koordinatene). Her er hvordan (Agarwal, 2015):


    Quote:
    I Google Chrome trykker du Ctrl + Shift + I på Windows, eller Cmd + Opt + I på Mac, for å åpne utviklerverktøyene i Chrome. Så trykker du på Esc (escape) tasten for å åpne konsollvinduet. Bytt til fanen emulering og velg alternativet Sensorer i venstre sidebar.


    Dette forutsetter at du bruker Google Chrome!


    Kilder
    Amit Agarwal (2015-03-30). How to Set your Location Manually in Google Chrome - Fake Geolocation. [ONLINE] Tilgjengelig: http://www.labnol.org/internet/geo-location/27878/ (2016-10-10)
    Google Developers (2016-10-05). Geolocation | Google Maps JavaScript API | Google Developers. [ONLINE] Tilgjengelig: https://developers.google.com/maps/documentation/javascript/examples/map-geolocation (2016-10-10)

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 12/29/16 at 01:49:04
    Forhindre at jQuery eller andre separate filer lastes ned på mobile enheter ved å bruke isMobile


    For at nettsiden skal lastes ned raskere på mobile enheter, kan det være ønskelig at JavaScript i separate filer, eller hele jQuery-biblioteket overhodet ikke skal lastes ned på mobile enheter. Da er det enkelt å modifisere skriptet fra innlegg #26. Når det ikke fungerer å sette inn koden i egne javafiler (.js), kan det settes inn inline i HTML-dokumentet istedenfor:

    [code html]
    <script>
    function isMobile() {
         return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }
    if (!isMobile()) {
        window.document.write('<script src="jquery-3.1.1.slim.min.js"><\/script>');
    }
    </script>
    [/code]

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 12/19/17 at 01:33:31
    RWD tabell
    Få responsive tabeller i HTML5 ved å bruke «data-head»


    Tabeller er nyttig til å vise data, men kan være vanskelig å komprimere på mindre skjermer. Derfor kan det være nyttig å bruke funksjonen «data-head» i tabellen. «Kollapsende» tabeller i portrettmodus, og på mindre skjermer, er langt mer oversiktlig enn tabeller med horisontale rullefelt. Under er det et HTML5/CSS eksempel på bruk av «data-head», og bildet under viser resultatet i henholdsvis landskapmodus og portrettmodus.


    [code html]
    <!DOCTYPE HTML>
    <html lang="no">
    <head>
        <meta charset="utf-8">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>RWD-tabell</title>
        <style>
         table {
             width:100%;
             text-align:left;
         }
         table thead {
             color:#ffffff;
             background:#000000;
         }
         table caption,
         table tfoot {
             font-size:24px;
             font-weight:100;
         }
         table th,
         table td {padding:10px 0.5% 10px 0.5%}
         tbody tr:nth-of-type(odd) {background:#eeeeee}
         @media only screen and (max-width:768px) {
             table thead {display:none;}
             table td {display:block}
             table td:before {
                 content:attr(data-head);
                 display:inline-block;
                 background:no-repeat;
                 font-weight:600;
                 font-size:18px;
                 min-width:98%;
             }
         }
        </style>
    </head>
    <body>
        <h1>RWD-tabell</h1>
        <table>
            <caption>Ansatte</caption>
            <thead>
                <tr>
                    <th scope="col">Fornavn</th>
                    <th scope="col">Etternavn</th>
                    <th scope="col">Utdannelse</th>
                    <th scope="col">Yrke</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-head='Fornavn'>Peder</td>
                    <td data-head='Etternavn'>&Aring;s</td>
                    <td data-head='Utdannelse'>Master</td>
                    <td data-head='Yrke'>Rektor</td>
                </tr>
                <tr>
                    <td data-head='Fornavn'>Ola</td>
                    <td data-head='Etternavn'>Nordmann</td>
                    <td data-head='Utdannelse'>Bachelor</td>
                    <td data-head='Yrke'>L&aelig;rer</td>
                </tr>
                <tr>
                    <td data-head='Fornavn'>Kari</td>
                    <td data-head='Etternavn'>Nordmann</td>
                    <td data-head='Utdannelse'>Bachelor</td>
                    <td data-head='Yrke'>L&aelig;rer</td>
                </tr>
            </tbody>
            <tfoot>
             <tr>
               <td colspan="4">Sum ansatte: 3</td>
             </tr>
         </tfoot>
        </table>
    </body>
    </html>
    [/code]
    RWD-tabell.png (44 KB | 163 )

    Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 06/24/18 at 21:34:27
    .htaccess


    Apache .htaccess er en konfigurasjonsfil som tilpasser innstillingene til webserverne. Filen får virkning umiddelbart i alle filene og undermappene i mappen den legges i, og er grei å bruke når du ikke har tilgang til konfigurasjonsfilen i hoved-serveren. Et eksempel på en .htaccess-fil er å omdirigere fra www til ikke-www og vice cersa, samt fra http til HTTPS:


    Code:
    RewriteEngine On
    RewriteCond %{HTTPS} off [OR]
    RewriteCond %{HTTP_HOST} ^www\. [NC]
    RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
    RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]


    Eksempelet er hentet fra Simone's Blog (Carletti, 2016). Den første linjen starter Apaches «runtime rewriting engine». De to neste linjene er betingelsene for omadresseringen. Den første betingelsen avgjør om forespørselen bruker en ikke-HTTPS URL, den andre avgjør om forespørselen bruker www-nettadresse. Den fjerde linjen unngår å henvise vertsnavnet direkte i nettadressen. «RewriteRule» er hjertet av omadresseringen, og forteller Apache å omdirigere enhver forespørsel til ny nettadresse. Flagget «L» slutter å behandle andre regler, og omdirigerer umiddelbart. «NE» ber Apache om ikke å unnslippe spesialtegn. «R = 301» bruker HTTP-statuskode 301. Ønsker man å omdirigere ikke-www til www skriver man om linje tre og fem:


    Code:
    RewriteEngine On
    RewriteCond %{HTTPS} off [OR]
    RewriteCond %{HTTP_HOST} !^www\. [NC]
    RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
    RewriteRule ^ https://www.%1%{REQUEST_URI}; [L,NE,R=301]



    Kilder
    [list bull-bluepin]
  • The Apache Software Foundation (2018). Apache HTTP Server Tutorial: .htaccess files - Apache HTTP Server Version 2.4. [ONLINE] Tilgjengelig: https://httpd.apache.org/docs/2.4/howto/htaccess.html [24. juni 2018].
  • Carletti, Simone (2016-08-11). Apache redirect www to non-www and HTTP to HTTPS. [ONLINE] Tilgjengelig: https://simonecarletti.com/blog/2016/08/redirect-domain-http-https-www-apache/ [24. juni 2018].

  • Title: Re: HTML5 - Hypertext Markup Language
    Post by Administrator on 12/17/18 at 17:55:13
    Sørg for at teksten forblir synlig under innlasting av skrifttyper


    «Font-display» brukes i CSS for at skrifttypene skal være synlig under innlasting, og godtar fem verdier:

    [olist]
  • AUTO (standard): Nettleseren bruker standardmetoden for nedlastning, som oftest ligner blokkverdien.
  • BLOCK: Nettleseren skjuler teksten kort til skrifttypen er fullstendig nedlastet, men beholder plassen. Teksten byttes ut så raskt den er nedlastet. Også kjent som «flash av usynlig tekst» eller FOIT.
  • SWAP: Nettleseren bruker standardtekst til den egendefinerte skrifttypen er nedlastet. Kjent som «flash of unstyled text» eller FOUT.
  • FALLBACK: Fungerer som et kompromiss mellom auto- og swap-verdiene. Nettleseren vil gjemme teksten i ca 100 ms. Hvis skrifttypen ikke er lastet ned, vil den bruke standardteksten (fallback).
  • OPTIONAL: Som FALLBACK, vil nettleseren skjule teksten, deretter overgang til FALLBACK font inntil den valgte skrifttypen er tilgjengelig til bruk. Denne verdien tillater også at nettleseren kan avgjøre om den egendefinerte skrifttypen skal brukes i det hele tatt, noe som utmåles av brukerens tilkoblingshastighet. Tregere tilkoblinger er mindre tilbøyelige til å motta den egendefinerte skrifttypen.
    [/olist]

  • Forum @ Liavaag.org » Powered by YaBB 2.5 AE!
    YaBB Forum Software © 2000-2010. All Rights Reserved.