From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/nl/web/guide/ajax/index.html | 55 +++++ files/nl/web/guide/graphics/index.html | 56 +++++ files/nl/web/guide/html/html5/index.html | 191 +++++++++++++++ .../html/html5_audio_en_video_gebruiken/index.html | 268 +++++++++++++++++++++ files/nl/web/guide/index.html | 67 ++++++ files/nl/web/guide/performance/index.html | 14 ++ 6 files changed, 651 insertions(+) create mode 100644 files/nl/web/guide/ajax/index.html create mode 100644 files/nl/web/guide/graphics/index.html create mode 100644 files/nl/web/guide/html/html5/index.html create mode 100644 files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html create mode 100644 files/nl/web/guide/index.html create mode 100644 files/nl/web/guide/performance/index.html (limited to 'files/nl/web/guide') diff --git a/files/nl/web/guide/ajax/index.html b/files/nl/web/guide/ajax/index.html new file mode 100644 index 0000000000..26d285f8a2 --- /dev/null +++ b/files/nl/web/guide/ajax/index.html @@ -0,0 +1,55 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX +translation_of: Web/Guide/AJAX +--- +

 

+

"Getting Started" box, if there is no "Getting Started" article yet written, should be populated with another featurearticle or tutorial.

+
+ Voor Beginners
+ Een AJAX beginner cursus
+
+ Asynchronous JavaScript and XML (AJAX) is niet een zelfstandige technologie, maar is een term die een "nieuwe" aanpak beschrijft om een aantal bestaande technologieën samen te gebruiken, waaronder HTML of XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, en het XMLHttpRequest object. Als deze technologieën gecombineerd worden in het AJAX model, kunnen applicaties snelle, periodieke veranderingen maken aan een pagina zonder deze te moeten herladen.
+ + + + + + + +
+

Geselecteerde Artikelen

+
+
+ AJAX:Voor Beginners
+
+ Dit artikel leidt je door de basis van AJAX en geeft je twee simpele voorbeelden om te beginnen.
+
+

View All...

+ 		+

Belangrijke Inhoud

+ +

Andere Paginas

+ +

Betrekkende Onderwerpen

+
+
+ HTML, XHTML, Cascading Style Sheets, Document Object Model, JavaScript, XML, XMLHttpRequest, XSLT, DHTML
+
+

 

+
+

Categories

+

Interwiki Language Links

+

 

+

{{ languages( { "ca": "ca/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "ja": "ja/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX" } ) }}

diff --git a/files/nl/web/guide/graphics/index.html b/files/nl/web/guide/graphics/index.html new file mode 100644 index 0000000000..1cb7d4da15 --- /dev/null +++ b/files/nl/web/guide/graphics/index.html @@ -0,0 +1,56 @@ +--- +title: Graphics op het Web +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Graphics + - HTML5 + - SVG + - Web + - WebGL +translation_of: Web/Guide/Graphics +--- +

Moderne websites en applicaties moeten vaak afbeeldingen presenteren. Statische afbeeldingen kunnen gemakkelijk worden getoond met behulp van het {{HTMLElement("img")}}-element of door het instellen van de achtergrond van de HTML-elementen met behulp van de {{cssxref("background-image")}}-eigenschap. U kunt afbeeldingen ook direct samenstellen, of ze later bewerken. Deze artikelen geven inzicht in hoe u dit kunt bereiken.

+ +
+
+

2D Graphics

+ +
+
Canvas
+
Het {{HTMLElement("canvas")}} biedt  API's om 2D graphics weer te geven via JavaScript.
+
SVG
+
Scalable Vector Graphics (SVG) laat je lijnen, rondingen en andere geometrische vormen gebruiken om graphics te maken. Door het gebruik van bitmaps te vermijden, kunt u afbeeldingen creëren die op elke schaal meebewegen.
+
+ +

 

+ +

 

+ +

 

+ +

 

+ +

Bekijk alles...

+
+ +
+

3D Graphics

+ +
+
WebGL
+
Een handleiding voor beginners van WebGL, de 3D graphics API voor het Web. Deze technologie laat u de OpenGL ES gebruiken in webcontent.
+
+ +

Video

+ +
+
Het gebruik van HTML5 audio en video
+
Video embedden in een HTML document en het beheerseb van de playback.
+
WebRTC
+
De RTC in WebRTC staat voor Real-Time Communicatie, technologie die audio/video streaming en het delen van gegevens toestaat tussen browser clients (peers).
+
+
+
diff --git a/files/nl/web/guide/html/html5/index.html b/files/nl/web/guide/html/html5/index.html new file mode 100644 index 0000000000..7dbb52ac20 --- /dev/null +++ b/files/nl/web/guide/html/html5/index.html @@ -0,0 +1,191 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +tags: + - HTML + - HTML5 + - Handleiding + - Overzicht + - Web + - Webontwikkeling +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 is de nieuwste evolutie van de standaard die HTML definieërt. De term staat voor twee afzonderlijke concepten:

+ + + +

Met het idee dat alle Open Web ontwikkelaars deze naslagpagina eenvoudig moeten kunnen gebruiken, is de informatie over de verschillende HTML5-technologiën op deze pagina ingedeeld op basis van hun functionaliteit.

+ + + +

  SemantIeken

+ +
+
Secties en contouren in HTML5
+
Een blik op de nieuwe elementen voor contouren en secties in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} en {{HTMLElement("aside")}}.
+
HTML5 audio en video gebruiken
+
Het inzetten van de elementen {{HTMLElement("audio")}} en {{HTMLElement("video")}} voor multimedia content.
+
Formulieren in HTML5
+
Een blik op de verbeterde webformulieren in HTML5: de voorwaarden validatie API, verscheidene nieuwe attributen, nieuwe waarden voor het {{HTMLElement("input")}} attribuut {{htmlattrxref("type", "input")}} en het nieuwe {{HTMLElement("output")}} element.
+
Nieuwe semantische elementen
+
Naast elementen voor secties, media en formulieren, zijn er een aantal nieuwe elementen, zoals {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, of {{HTMLElement("meter")}} en {{HTMLElement("main")}}, waardoor het aantal geldige HTML5 elementen is toegenomen.
+
Verbeteringen in {{HTMLElement("iframe")}}
+
Door de attributen {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, en {{htmlattrxref("srcdoc", "iframe")}} te gebruiken, kunnen ontwikkelaars nu precies het beveiligingsniveau en de gewenste weergave van een {{HTMLElement("iframe")}} element bepalen.
+
MathML
+
Hiermee kunt u wiskundige formules direct insluiten.
+
Introductie tot HTML5
+
In dit artikel wordt beschreven hoe u aan de browser aangeeft dat u HTML5 gebruikt bij uw web design of web applicatie.
+
HTML5-parser
+
Het programma dat een HTML-bestand omzet naar een Document Object Model (DOM) is uitgebreid. De  weergave van een pagina wordt nu in alle gevallen exact gedefinieerd, zelfs wanneer er ongeldige HTML wordt aangeleverd. Dit zorgt voor een betere voorspelbaarheid en dat browsers die HTML5 ondersteunen op dezelfde manier omgaan met HTML.
+
+ +
+

Connectiviteit

+ +
+
Web Sockets
+
Het opzetten van een blijvende verbinding tussen de webpagina en de server, en het uitwisselen van niet-HTML data via deze verbinding.
+
Door de server verstuurde gebeurtenissen
+
Staat een server toe om gebeurtenissen naar een client te sturen, in plaats van het traditionele paradigma waarbij de server alleen data verzendt op verzoek van de client.
+
WebRTC
+
Met deze technologie, waar RTC staat voor Real-Time Communication, kunnen videovergaderingen direct vanuit de browser worden gehouden zonder plug-ins of externe applicaties.
+
+ +

Offline & Opslag

+ +
+
Offline resources: applicatie cache
+
Firefox ondersteunt de HTML5-specificatie voor het offline opslaan van hulpmiddelen volledig. Andere browsers hebben veelal een gedeeltelijke ondersteuning.
+
Online and offline evenementen
+
Firefox 3 ondersteunt WHATWG online en offline events, die applicaties of extensies laat detecteren of er een actieve internetverbinding is of niet en wanneer een verbinding op en neer gaat.
+
WHATWG client-side sessie en persistent storage (aka DOM storage)
+
Client-side sessie en persistent storage staan webapplicaties meer gestructureerde data-opslag toe aan de client-zijde.
+
IndexedDB
+
IndexedDB is een webstandaard voor de opslag van grote hoeveelheden gestructureerde data in de browser en voor hoge zoekprestaties in deze data door gebruik van indexen.
+
Bestanden van webapplicaties gebruiken
+
Ondersteuning van de nieuwe HTML5 File API is toegevoegd aan Gecko, waardoor webapplicaties toegang krijgen tot lokale, door de gebruiker geselecteerde bestanden. Hieronder valt de ondersteuning van het selecteren van meerdere bestanden tegelijk met het nieuwe attribuut multiple van het element {{HTMLElement("input")}} met  type file. Ook bestaat er de FileReader.
+
+ +

Multimedia

+ +
+
HTML5 audio en video gebruiken
+
Met de elementen {{HTMLElement("audio")}} en {{HTMLElement("video")}} kunt u multimedia-inhoud insluiten en manipuleren.
+
WebRTC
+
Met deze technologie, waar RTC staat voor Real-Time Communication, kunnen videovergaderingen direct vanuit de browser worden gehouden zonder plug-ins of externe applicaties..
+
Gebruik van de Camera API
+
Hiermee kunnen beelden die met de camera van de computer zijn gemaakt worden gebruikt, bewerkt en opgeslagen.
+
Track en WebVTT
+
Het {{HTMLElement("track")}} element laat toe om ondertitels en hoofdstukken te gebruiken. WebVTT is een standaard om tekst te volgen.
+
+ +

3D graphics AND effects

+ +
+
Canvas instructie
+
Leer hoe u met het nieuwe element {{HTMLElement("canvas")}} grafieken en andere visuele objecten kunt tekenen in Firefox.
+
HTML5 Text API voor elementen
+
De HTML5 Text API wordt nu ondersteund door {{HTMLElement("canvas")}} elementen.
+
WebGL
+
WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.
+
SVG
+
An XML-based format of vectorial images that can directly be embedded in the HTML.
+
+ +
+

Performance and Integration

+ +
+
Webwerkers
+
+
Staat het delegeren van JavaScript evaluatie toe aan achtergrondthreads, waardoor deze activiteiten kunnen voorkomen dat interactieve gebeurtenissen worden vertraagd.
+
XMLHttpRequest level 2
+
Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind Ajax.
+
JIT-compiling JavaScript engines
+
The new generation of JavaScript engines is much more powerful, leading to greater performance.
+
History API
+
Laat toe om de browsegeschiedenis te manipuleren. Dit is vooral nuttig voor pagina's die interactief nieuwe informatie laden.
+
Het contentEditable Attribuut: Verander uw website in een wiki!
+
HTML5 heeft het contentEditable attribuut gestandaardiseerd. Leer meer over deze functie.
+
Drag and drop
+
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
+
Focus management in HTML
+
The new HTML5 activeElement and hasFocus attributes are supported.
+
Web-based protocol handlers
+
You can now register web applications as protocol handlers using the navigator.registerProtocolHandler() method.
+
requestAnimationFrame
+
Allows control of animations rendering to obtain optimal performance.
+
Fullscreen API
+
Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.
+
Pointer Lock API
+
Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.
+
Online and offline events
+
In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.
+
+ +

Device TOEGANG

+ +
+
+
De Camera API gebruiken
+
Hiermee kunnen beelden die met de camera van de computer zijn gemaakt worden gebruikt, bewerkt en opgeslagen.
+
Touch events
+
Handlers to react to events created by a user pressing touch screens.
+
Geolocatie gebruiken
+
Laat broweser de locatie van de gebruiker bepalen door middel van geolocatie.
+
Detecting device orientation
+
Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).
+
Pointer Lock API
+
Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.
+
+ +

StylIng

+ +

CSS has been extended to be able to style elements in a much more complex way. This is often referred as CSS3, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.

+ +
+
New background styling features
+
It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and multiple backgrounds can be set.
+
More fancy borders
+
Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.
+
Animating your style
+
Using CSS Transitions to animate between different states or using CSS Animations to animate parts of the page without a triggering event, you can now control mobile elements on your page.
+
Typography improvement
+
Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and hyphenation, but also can add a shadow to it or control more precisely its decorations. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.
+
New presentational layouts
+
In order to improve the flexibility of designs, two new layouts have been added: the CSS multi-column layouts and CSS flexible box layout.
+
+
+
diff --git a/files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html b/files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html new file mode 100644 index 0000000000..d01e9b07ac --- /dev/null +++ b/files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html @@ -0,0 +1,268 @@ +--- +title: HTML5 audio en video gebruiken +slug: Web/Guide/HTML/HTML5_audio_en_video_gebruiken +tags: + - Audio + - HTML5 + - Instructie + - Media + - Ogg + - Video + - mp3 + - voorbeeld +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +

HTML5 introduceert ingebouwde media ondersteuning via de {{ HTMLElement("audio") }} en {{ HTMLElement("video") }} elementen, waarmee het mogelijk wordt om op een eenvoudige manier media in te sluiten in HTML documenten.

+ +

Media insluiten

+ +

Het insluiten van media in uw HTML document stelt niet zoveel voor:

+ +
+
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
+  Uw browser ondersteunt het element <code>video</code> niet.
+</video>
+ +

Dit voorbeeld speelt een sample video van de Theora website inclusief controls voor het afspelen.

+ +

En hier is een voorbeeld van het inbedden van een audio element in uw HTML document.

+ +
<audio src="/test/audio.ogg">
+<p>Het audio element wordt niet door uw browser ondersteund.</p>
+</audio>
+
+ +

The src attribuut bevat een URL van een geluidsbestand of een pad naar een lokaal geluidsbestand.

+ +
+
<audio src="audio.ogg" controls autoplay loop>
+<p>Het audio element wordt niet door uw browser ondersteund.</p>
+</audio>
+
+ +

Dit voorbeeld van de code gebruikt attributen van het {{ HTMLElement("audio") }} element:

+ + + +
+
<audio src="audio.mp3" preload="auto" controls></audio>
+
+ +

Het preload attribuut wordt gebruikt in een audio element om grote bestanden te bufferen. U kunt hierbij 3 waarden gebruiken:

+ + + +

Meerdere bronbestanden kunnen vastgelegd worden met behulp van het {{ HTMLElement("source") }} element om verschillende formaten in verschillende browsers te ondersteunen voor geluid of beeld. Bijvoorbeeld:

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg">
+  <source src="foo.mp4" type="video/mp4">
+  Het <code>video</code> element wordt niet ondersteund door uw browser.
+</video>
+
+ +

In dit voorbeeld wordt het Ogg-bestand afgespeeld in browsers die Ogg ondersteunen. Als de browser dat niet doet, wordt automatisch het MPEG-4-bestand gebruikt. Kijk ook naar de lijst met media formaten die ondersteund worden door de audio en video elementen in de diverse browsers.

+ +

U kunt ook opgeven welke codes het mediabestand vereist; dit maakt het mogelijk voor de browser om nog intelligentere beslissingen te nemens:

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
+  Het <code>video</code> element wordt niet ondersteund door uw browser.
+</video>
+ +

We hebben hier vastgelegd dat deze via de Dirac en Speex codes gebruikt. Als de browser wel Ogg ondersteund, maar niet deze codes dan zal de video niet laden.

+ +

Wanneer het type attribuut niet gespecificeerd is dan wordt het mediatype van de server gehaald en er wordt gecontroleerd of de browser er mee om kan gaan; als het niet weergegeven kan worden, zal de volgende source gecontroleerd worden. Wanneer niet een van de source elementen gebruik kan worden, wordt een error gebeurtenis naar het video element verzonden. Wanneer het type attribuut vastgelegd is, wordt deze vergeleken met de types die de browser kan afspelen en wanneer het niet herkend wordt, zal direct volgende source gecontroleerd worden. Er wordt dan dus niets via de server opgehaald of gecontroleerd.

+ +

Bekijk ook Media gebeurtenissen voor een complete lijst van gebeurtenissen die die aan het afspelen van media gekoppeld kunnen worden. Voor details van media formaten die ondersteund worden door de diverse browsers bekijk Media formaten die ondersteund worden door de audio en video elementen.

+ +

Het afspelen van media

+ +

Als je eenmaal de media hebt ingebed in het HTML document met de nieuwe elementen kun je ze programma-technisch gaan besturen met JavaScript code. Een voorbeeld: om het afspelen te starten of the herstarten, kun je het volgende doen:

+ +
var v = document.getElementsByTagName("video")[0];
+v.play();
+
+ +

De eerste regel haalt het eerste video-element van het document op en de tweede regel roept de play() methode, zoals deze gedefinieerd is in de {{ interface("nsIDOMHTMLMediaElement") }} interface die gebruikt wordt om media-element te implementeren.

+ +

Het besturen van een HTML5 audio element om af te spelen, te pauzeren, het volume te verhogen of te verlagen met gebruik van Javascript is eenvoudig.

+ +
<audio id="demo" src="audio.mp3"></audio>
+<div>
+  <button onclick="document.getElementById('demo').play()">Audio afspelen</button>
+  <button onclick="document.getElementById('demo').pause()">Audio pauzeren</button>
+  <button onclick="document.getElementById('demo').volume+=0.1">Volume verhogen</button>
+  <button onclick="document.getElementById('demo').volume-=0.1">Volume verlagen</button>
+</div>
+
+ +

Het downloaden van media stoppen

+ +

Het afspelen stoppen van media is zo eenvoudig als het aanroepen van de de pause() methode, maar de browser zal blijven downloaden totdat het media-element wordt afgevoerd door de garbage collector.

+ +

Bij deze de truck om het downloaden direct te stoppen:

+ +
var mediaElement = document.getElementById("myMediaElementID");
+mediaElement.pause();
+mediaElement.src='';
+//or
+mediaElement.removeAttribute("src");
+
+ +

Door het src attribuut van het media-element te verwijderen (of deze met een lege string te vullen, dat kan van de browser afhangen) wordt de interne decoder van het element gesloopt en dat zal het downloaden doen stoppen. The specificaties zijn echter nog tamelijk onduidelijk wat betreft het  removeAttribute() scenario en het leegmaken (lege string) van het <video> 'src' attribuut kan een ongewenst verzoek veroorzaken (Mozilla Firefox 22).

+ +

Het doorzoeken van media

+ +

Media elementen voorzien in ondersteuning van het wijzigen van de afspeelpositie naar specifieke punten in de inhoud van de media. Dit wordt gedaan via het invullen van de eigenschap currentTime  op het element; zie hiervoor {{ domxref("HTMLMediaElement") }} voor meer details over de eigenschappen van een media-element. Zet eenvoudig de waarde op de tijd, in seconden, van de positie waarop het afspelen moet doorgaan.

+ +

U gebruikt de eigenschap seekable om het gebied dat beschikbaar is te doorzoeken. De eigenschap retourneert een {{ domxref("TimeRanges") }} object waarbinnen een lijst bestaat met de tijden waarop gezocht kan worden.

+ +
var mediaElement = document.getElementById('mediaElementID');
+mediaElement.seekable.start();  // Retourneert de starttijd (in seconden)
+mediaElement.seekable.end();    // Retourneert de einddtijd (in seconden)
+mediaElement.currentTime = 122; // Ga naar 122 seconden
+mediaElement.played.end();      // Retourneert het aantal seconden dat de browser heeft afgespeeld
+
+ +

Leg het afspeelgebied vast

+ +

Bij het opgeven van de URI van de media voor een {{HTMLElement ("audio")}} of {{HTMLElement ("video")}} element kunt u desgewenst aanvullende informatie geven voor het deel van de media dat afgespeeld moet worden. Om dit te doen, voeg een hekje ("#"), gevolgd door de media fragment beschrijving.
+
+ Een tijdsgebied wordt opgegeven met de syntaxis:

+ +
#t=[starttime][,endtime]
+ +

De tijd kan worden opgegeven als een aantal seconden (als een floating-point waarde) of als een uren / minuten / seconden tijd gescheiden met dubbele punten (zoals 02:05:01 2 uur, 5 minuten en 1 seconde).

+ +

Een paar voorbeelden:

+ +
+
http://foo.com/video.ogg#t=10,20
+
Laat de video afspelen te beginnen bij 10 seconden en ga door tot en met de 20 seconden.
+
http://foo.com/video.ogg#t=,10.5
+
Speel de video af vanaf het begin tot en met 10,5 seconden.
+
http://foo.com/video.ogg#t=,02:00:00
+
Speel de video af vanaf het begin en voor de duur van 2 uur.
+
http://foo.com/video.ogg#t=60
+
Speel de video af vanaf de 60ste seconden en speel tot het einde.
+
+ +
+

The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the Media Fragments URI specification implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.

+
+ +

Uitwijkmogelijkheden

+ +

HTML opgenomen tussen bijvoorbeeld de openings- en de sluittags van media-elementen wordt verwerkt door browsers die geen ondersteuning hebben voor HTML5 media. U kunt profiteren van dit feit om alternatieve fallback media te bieden voor die browsers.
+
+ Dit gedeelte bevat twee mogelijke fallback opties voor video. Voor elk geval, als de browser HTML5 video ondersteunt, dan wordt die gebruikt; in alle andere gevallen wordt de optie fallback gebruikt.

+ +

Het gebruik van Flash

+ +

U kunt Flash gebruiken om een Flash-formaat film af te spelen als de {{HTMLElement ("video")}} element niet wordt ondersteund:

+ +
<video src="video.ogv" controls>
+    <object data="flvplayer.swf" type="application/x-shockwave-flash">
+      <param value="flvplayer.swf" name="movie"/>
+    </object>
+</video>
+ +

NB: gebruik geen classid in het object-tag om compatibel te zijn/blijven met andere browsers dan Internet Explorer.

+ +

Ogg videos afspelen met gebruik van een Java applet

+ +

Er is een Java appletCortado die je kunt gebruiken las uitwijkmogelijkheid voor het afspelen van Ogg videos in browsers die Java ondersteunen, maar dat niet doen voor HTML5 video:

+ +
<video src="my_ogg_video.ogg" controls width="320" height="240">
+  <object type="application/x-java-applet" width="320" height="240">
+     <param name="archive" value="cortado.jar">
+     <param name="code" value="com.fluendo.player.Cortado.class">
+     <param name="url" value="my_ogg_video.ogg">
+     <p>You need to install Java to play this file.</p>
+  </object>
+</video>
+ +

Als u geen alternatief kind-element creëert van het cortado object element, zoals het {{HTMLElement ("p")}} element hierboven, dan zullen FireFox 3.5 installaties die de video native behandelen, maar geen Java geïnstalleerd hebben ten onrechte de gebruiker informeren dat ze een plugin moeten installeren om de inhoud op de pagina te bekijken.

+ +

{{ h1_gecko_minversion("Foutafhandeling", "2.0") }}

+ +

Met ingang van Gecko 2.0 is de foutafhandeling is herzien om te voldoen aan de meest recente versie van de HTML5 specificaties. De error gebeurtenis wordt nu naar afgeleverd bij het kind-element dat behoort bij de bron die de fout laat ontstaan in plaats van bij het media-element zelf.

+ +

Dit zorgt er voor dat u kunt bepalen welke bron niet geladen werd, dit kan nuttig zijn. Bekijk deze HTML maar eens:

+ +
<video>
+<source id="mp4_src"
+  src="video.mp4"
+  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+</source>
+<source id="3gp_src"
+  src="video.3gp"
+  type='video/3gpp; codecs="mp4v.20.8, samr"'>
+</source>
+<source id="ogg_src"
+  src="video.ogv"
+  type='video/ogg; codecs="theora, vorbis"'>
+</source>
+</video>
+ +

Omdat Firefox MP4 en 3GP niet ondersteunt vanwege principe van patentbezwaren zullen {{ HTMLElement("source") }} elementen met de ID's "mp4_src" en "3gp_src" in een error gebeurtenis lopen voordat de Ogg bron geladen wordt. De bronnen worden uitgevoerd in de volgorde waarin ze staan en wanneer er eenmaal een succesvol geladen is dan worden de overige bronnen helemaal niet meer geraadpleegd.

+ +

Detecteren of er geen bronnen zijn geladen

+ +

Om vast te stellen dat niet een {{ HTMLElement("source") }} kindelement is geladen kunt u de waarde van het attribuut networkState van het media-element controleren, Wanneer de waarde HTMLMediaElement.NETWORK_NO_SOURCE is dan weet u dat geen van de bronnen geladen is.

+ +

Op dat punt gekomen kunt u een andere bron invoegen met behulp van een nieuw {{ HTMLElement("source") }} element als child van het media element en Gecko zal een poging doen om die bron te laden.

+ +

Inhoud tonen wanneer geen bron gedecodeerd kon worden

+ +

Een andere manier om de fallback inhoud van een video te tonen als geen van de bronnen kan worden gedecodeerd in de huidige browser's is het toevoegenvan foutafhandeling in het laatste bronelement. Dan kunt u de video vervangen met zijn fallback inhoud:

+ +
<video controls>
+  <source src="dynamicsearch.mp4" type="video/mp4"></source>
+  <a href="dynamicsearch.mp4">
+    <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
+  </a>
+  <p>Klik op de afbeelding om een video demo van een dynamische app zoekopdracht af te spelen</p>
+</video>
+
+
+ +
var v = document.querySelector('video'),
+    sources = v.querySelectorAll('source'),
+    lastsource = sources[sources.length-1];
+lastsource.addEventListener('error', function(ev) {
+  var d = document.createElement('div');
+  d.innerHTML = v.innerHTML;
+  v.parentNode.replaceChild(d, v);
+}, false);
+
+ +

Bekijk ook

+ + diff --git a/files/nl/web/guide/index.html b/files/nl/web/guide/index.html new file mode 100644 index 0000000000..15791e3fe9 --- /dev/null +++ b/files/nl/web/guide/index.html @@ -0,0 +1,67 @@ +--- +title: Web developer guide +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +

These articles provide how-to information to help you make use of specific technologies and APIs.

+ +
+
+
+
+
+
CSS developer guide
+
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML
+
Event developer guide
+
Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.
+
Graphics on the Web
+
Modern Web sites and applications often need to present graphics.
+
Guide to Web APIs
+
List all Web APIs and what they are doing
+
HTML developer guide
+
HyperText Markup Language (HTML) is the core language of nearly all Web content. Most of what you see on screen in your browser is described, fundamentally, using HTML.
+
JavaScript
+
JavaScript is the powerful scripting language used to create applications for the Web.
+
Localizations and character encodings
+
Browsers process text as Unicode internally. However, a way of representing characters in terms of bytes (character encoding) is used for transferring text over the network to the browser. The HTML specification recommends the use of the UTF-8 encoding (which can represent all of Unicode) and regardless of the encoding used requires Web content to declare what encoding was used.
+
Mobile Web Development
+
This page provides an overview of some of the main techniques needed to design web sites that work well on mobile devices. If you're looking for information on Mozilla's Firefox OS project, see the Firefox OS page. Or you might be interested in details about Firefox for Android.
+
+ +
+
+
+ +
+
+
Optimization and performance
+
When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.
+
Parsing and serializing XML
+
The Web platform provides the following objects for parsing and serializing XML:
+
SVG-in-OpenType
+
The SVG-in-OpenType work is currently in the hands of the MPEG group. Once we're ready for wider adoption the information from wiki.mozilla.org will be moved here, updated and expanded.
+
The Web Open Font Format (WOFF)
+
WOFF (the Web Open Font Format) is a web font format developed by Mozilla in concert with Type Supply, LettError, and other organizations. It
+
User experience
+
Making the user experience of your Web site or app a pleasant one for your users is important if you want users to come back and use it again and again. Here you'll find articles that may help you along.
+
Using FormData Objects
+
The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data".
+
Glossary
+
Defines numerous technical terms related to the Web and Internet.
+
+
+
+
+
+ +

See also

+ + diff --git a/files/nl/web/guide/performance/index.html b/files/nl/web/guide/performance/index.html new file mode 100644 index 0000000000..00c4b9d7fe --- /dev/null +++ b/files/nl/web/guide/performance/index.html @@ -0,0 +1,14 @@ +--- +title: Optimization and performance +slug: Web/Guide/Performance +tags: + - Landing + - NeedsTranslation + - Optimization + - Performance + - TopicStub + - Web +translation_of: Web/Guide/Performance +--- +

When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.

+

{{LandingPageListSubpages}}

-- cgit v1.2.3-54-g00ecf