Welcome, Guest. Please Login or Register
YaBB - Yet another Bulletin Board
 
  Home English Norsk HelpLoginRegisterSearch  
 
 
Pages: 1 2 
Send Topic Print
HTML5 - Hypertext Markup Language (Read 53964 times)
Reply #15 - 11/26/13 at 02:53:00  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

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

« Last Edit: 03/23/14 at 22:56:19 by Administrator »  
 
IP Logged
 
Reply #16 - 03/23/14 at 16:13:32  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

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



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;
}
 

« Last Edit: 03/30/14 at 17:33:53 by Administrator »  
 
IP Logged
 
Reply #17 - 03/23/14 at 22:44:21  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 241
*****
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
 
 
IP Logged
 
Reply #18 - 03/29/14 at 00:45:41  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 241
*****
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 »  
 
IP Logged
 
Reply #19 - 06/21/14 at 03:26:11  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

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

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 241
*****
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.
 
 
IP Logged
 
Reply #21 - 03/05/15 at 01:21:47  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

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

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 241
*****
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 »  
 
IP Logged
 
Reply #23 - 04/23/15 at 00:33:18  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 241
*****
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.
 
 
IP Logged
 
Reply #24 - 05/01/15 at 20:06:46  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 241
*****
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)
 
 
IP Logged
 
Reply #25 - 07/28/16 at 10:20:09  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

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

 
 
IP Logged
 
Reply #26 - 09/06/16 at 20:14:40  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

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

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
Posts: 241
*****
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)
 
 
IP Logged
 
Reply #28 - 12/29/16 at 01:49:04  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

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

 
 
IP Logged
 
Pages: 1 2 
Send Topic Print