YaBB - Yet another Bulletin Board

Welcome, Guest. Please Login or Register

 
  Home English Norsk HelpLoginRegisterSearch  
 
 

Forum @ Liavaag.org › Norsk generell kategori › Generell oppslagstavle › HTML5 - Hypertext Markup Language

(Moderator: Administrator)
‹ Previous Topic | Next Topic ›
Pages: 1 2 3 
Send Topic Print
HTML5 - Hypertext Markup Language (Read 1382460 times)
Reply #31 - 12/17/18 at 17:55:13  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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:

  1. AUTO (standard): Nettleseren bruker standardmetoden for nedlastning, som oftest ligner blokkverdien.
  2. 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.
  3. SWAP: Nettleseren bruker standardtekst til den egendefinerte skrifttypen er nedlastet. Kjent som «flash of unstyled text» eller FOUT.
  4. 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).
  5. 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.

 
Back to top 
 
IP Logged
 
Reply #30 - 06/24/18 at 21:34:27  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
.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
 
Back to top 
 
IP Logged
 
Reply #29 - 12/19/17 at 01:33:31  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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>
« Last Edit: 12/20/17 at 00:20:55 by Administrator »  
RWD-tabell.png (44 KB | 287 )
RWD-tabell.png
Back to top 
 
IP Logged
 
Reply #28 - 12/29/16 at 01:49:04  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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>
 
Back to top 
 
IP Logged
 
Reply #27 - 10/10/16 at 02:16:17  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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-geoloca
tion (2016-10-10)
 
Back to top 
 
IP Logged
 
Reply #26 - 09/06/16 at 20:14:40  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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
}


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!  Smiley

Kilder
  1. GitHub A simple JS library that detects mobile devices. [ONLINE] Tilgjengelig: https://github.com/kaimallea/isMobile [2016-09-06]
  2. 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-runni... [2016-09-06]
  3. 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-mobi... [2016-09-06]
« Last Edit: 09/06/16 at 21:27:52 by Administrator »  
Back to top 
 
IP Logged
 
Reply #25 - 07/28/16 at 10:20:09  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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;
}
 
Gradient-background-will-not-stretch.png (148 KB | 390 )
Gradient-background-will-not-stretch.png
Back to top 
 
IP Logged
 
Reply #24 - 05/01/15 at 20:06:46  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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:
  • 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
  1. The Semantic, Responsive Navicon Smashing Magazine av Jordan Moore (2012-10-08)
  2. Kill The Hamburger Button TechCrunch av Josh Constine (2014-05-24)
  3. Why and How to Avoid Hamburger Menus Luis Abreu (2014-05-14)
  4. Triple bar Wikipedia (2015-04-28)
 
Kill-The-Hamburger-Button.png (31 KB | 547 )
Kill-The-Hamburger-Button.png
Back to top 
 
IP Logged
 
Reply #23 - 04/23/15 at 00:33:18  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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.
 
Back to top 
 
IP Logged
 
Reply #22 - 03/16/15 at 23:39:40  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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;
	}
}


Kilder
« Last Edit: 03/26/15 at 17:23:25 by Administrator »  
Back to top 
 
IP Logged
 
Reply #21 - 03/05/15 at 01:21:47  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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.
 
Back to top 
 
IP Logged
 
Reply #20 - 12/02/14 at 01:41:00  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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.
 
Back to top 
 
IP Logged
 
Reply #19 - 06/21/14 at 03:26:11  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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>



HTML5 <video> element eksempel: Skrik...
 
Back to top 
 
IP Logged
 
Reply #18 - 03/29/14 at 00:45:41  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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!
Cry

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;
	}
}
« Last Edit: 06/21/14 at 02:33:25 by Administrator »  
Back to top 
 
IP Logged
 
Reply #17 - 03/23/14 at 22:44:21  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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:



Cool
 
Back to top 
 
IP Logged
 
Pages: 1 2 3 
Send Topic Print
‹ Previous Topic | Next Topic ›
« Home ‹ Board Top of this page