In-depth: HTML5 & CSS3

Maat: px
Weergave met pagina beginnen:

Download "In-depth: HTML5 & CSS3"

Transcriptie

1 In-depth: HTML5 & CSS3 Door: Peter Polman Domein: WEB Datum: 28 januari 2013

2 Inhoudsopgave Geschiedenis van HTML HTML5: Nieuwe Elementen... 5 Semantiek... 5 Media Elementen... 7 Het <canvas> element... 8 Form elementen... 8 Data- attributes... 9 HTML5: Nieuwe API s Canvas 2D API Timed Media Playback Drag & Drop HTML File API Waar is de rest? Websockets Microdata Webworkers Webmessaging RDFa Verschillen HTML 4.01, XHTML 1.0, HTML Semantiek DOCTYPE CSS3: New Elements & differences Attribute Selectors Pseudo Classes Combinators Waar is de rest? Supported Browsers Conclusie?... 20

3 Geschiedenis van HTML5 2004: WHAT Working Group wordt opgericht Onder de naam WHAT Working Group (Web Hypertext Application Technology Working Group) werd in 2004 een werkgroep opgericht om HTML5 te ontwikkelen. In deze werkgroep bevonden zich kopstukken uit de branche, afkomstig uit organisaties als Apple, the Mozilla Foundation en Opera Software Oktober: W3C start samenwerking met WHATWG W3C staakt haar ontwikkeling van XHTML en sluit zich aan bij WHATWG. Deze samenwerking geeft de ontwikkeling van HTML5 een grote impuls. 2008: Eerste versie HTML5 uitgebracht De eerste versie van HTML, ontwikkeld door Ian Hickson (Google) wordt op de markt gebracht. 2008: Firefox 3 ondersteunt HTML5 Als eerste browser neemt Firefox 3 stapjes in het ondersteunen van HTML5, niet lang daarna volgen Chrome, Safari en uiteindelijk ook Internet Explorer Januari: YouTube HTML5 video player Youtube biedt via haar eerste versie van de HTML5 video player aan April: Job s thoughts on Flash Steve Jobs (Apple) trekt middels een open brief getiteld Thoughts on Flash de stekker uit het stopcontact wat betreft het ondersteunen van Flash op Apple devices. Hiermee wordt de software markt aangezet om zich verder te verdiepen en aan te sluiten bij in de ontwikkeling van HTML Mei: Scribd goes HTML5 Online Document Sharing Site Sribd ontwikkelt een HTML5 User Interface, waarmee deze nu ook geoptimaliseerd is voor het gebruik op tablets August: The Wilderness Downtown Arcade Fire ontwikkelt in samenwerking met Google haar eerste HTML5 interactive film The Wilderness Downtown. Dit project wint de eerste prijs in de Cyber category van de Cannes Advertising awards December: Chrome Webstore opening

4 Google opent haar Chrome Webstore, waarmee non-apple web apps beschikbaar worden gesteld voor een groter publiek Maart: Disney aquires Rocket Pack. Met de overname van de Finse start-up Rocket Pack, richt Disney zich op het ontwikkelen van HTML5 games buiten de gangbare Apple webstores om July: Pandora goes HTML5 Audio listening site Pandora begint met haar overgang naar een HTML5 UI. Een ontwikkeling die positief ontvangen wordt door het publiek Augustus: Amazon goes HTML5 Amazon ontwikkeld een HTML5 versie van haar E-Book reader application. Hiermee wordt hun content via de browser te benaderen op elk soort device August: Twitter goes HTML5 Met het ontwikkelen van een HTML5 UI wordt ook twitter nu via de browser beschikbaar gesteld via de browser op mobile devices September: 34% of top100 sites gebruiken HTML5 Alexa s top100 stelt dat 34% van de top100 sites HTML5 gebruiken September: The Boston Globe starts with responsive design Krant The Boston Globe herontwerpt haar website voor mobile devices door gebruikt te maken van nieuwe CSS3 technieken en HTML5. Her begrip responsive design wordt hiermee vastgezet November: Adobe stops making Flash for mobile devices Adobe meld het publiek dat ze stopt met het geschikt maken van Flash voor mobile devices en richt zich verder op de ontwikkeling van tools voor HTML April: Flickr ontwikkelt HTML5 uploader Foto sharing wordt hiermee ook direct beschikbaar gemaakt voor crossplatform browser apps Juni: LinkedIn ontwikkelt native HTML5 app Sinds 2008 worstelt LinkedIn met het ontwikkelen van een goede mobile apps. In 2011 komt haar eerste wel prezen HTML5 app op de markt Juni: Wix.com HTML5 websites Online website builder Wix.com behaalt meer dan users die een HTML5 website hebben aangemaakt op hun platform.

5 HTML5: Nieuwe Elementen Semantiek Met semantisch elementen worden elementen bedoeld die de pagina structureren om deze vervolgens op elk niveau interpretabel te maken voor web software. Zie dit als de hiërarchische indeling van de informatie getoond middels HTML. Met het opkomen van HTML5 zijn enkele elementen uit HTML 4.01 verdwenen wegens geen of onjuist gebruik. Elementen die zich bemoeien met nonmarkup zaken als <basefont>, <font>, <center> en <big> worden niet meer ondersteund en ook <frame> en <frameset> worden, wegens hun zoekmachine onvriendelijkheid, de laan uit gestuurd. <header> Dit element wordt gebruikt als container voor introducerende content. <header> <figure><img src= logo.png alt= /></figure> <div>dit is header content</div> </header> <section> Het section element omvat een thematische groep van content binnen een document. Anders dan het article element hoeft het section element niet onafhankelijk van omliggende elementen te zijn. <section id= posts > <article class= blogpost > <header>dit is de heading</header> <p>een paragraaf aan content.</p> </article> <article class= blogpost > <header>dit is de heading</header> <p>een paragraaf aan content.</p> </article> <article class= blogpost >

6 <header>dit is de heading</header> <p>een paragraaf aan content.</p> </article> </section> <article> Het element <article> geeft ondersteunende content aan (meestal geplaatst in sidebars, vandaar wellicht de naam). <article class= blogpost > <header>dit is de heading</header> <p>een paragraaf aan content.</p> <footer>geschreven door: Pietje Puk</footer> </article> <nav> Het <nav> element geeft een navigatiestructuur aan, welke we over het algmeen omvatten in een net lijstje, zodat Google dit op een juiste manier kan interpreteren. <aside> Daarnaast kennen we nog <aside> om content in te plaatsen die eigenlijk niet bij de hoofd content hoort. tkt saxion 19/3/13 10:02 Opmerking [1]: Is dit alles? <figure> Dit element bevat bijvoorbeeld afbeeldingen, diagrammen of andere figuren. Om een afbeelding weer te geven dient nog steeds wel een <img src= alt= /> gebruikt te worden. <figcaption> Het figcaption element kan gebruikt worden binnen het figure element en definieert de caption voor de afbeelding. <figure> <img src= images/image.png alt= Afbeelding van iets /> <figcaption>de caption voor deze afbeelding</figcaption> </figure> <footer> Het footer element bevat informatie met betrekking tot het element waarin het zicht bevindt. Zoals copyright informatie, algemene voorwaarden en contactgegevens. <footer>

7 <p>dit is footer content zoals details e.d.</p> </footer> <details> Het details element geeft je de mogelijkheid om detail informatie te togglen. Dat wil zeggen, tonen of verbergen. Met het nieuwe HTML5 <summary> element geef je de heading van het details element op en de overige content zal zich laten verbergen of tonen. <details> <summary>de heading</summary> <p>dit is de body</p> </details> <mark> Het mark element gedraagt zich als een gele markeerstift en highlight daarmee bepaalde stukken tekst binnen een HTML element als bijvoorbeeld de paragraph. <p>we open at <mark>10:00</mark> every morning.</p> <time> Het time element wordt gebruikt voor tijdsnotaties. Aan de voorkant zal hier weinig van zichtbaar zijn. Wel is het gebruik van dit element handig voor zoekmachines die <p>we open at <time>10:00</time> every morning.</p> <p>i have a date on <time datetime=" ">valentines day</time>.</p> Media Elementen Om een standaard te vinden in cross platform ondersteunde audio en video playback zijn de elementen <video> en <audio> in het leven geroepen. Deze elementen maken het gebruik van third-party plugins overbodig, wanneer het aankomt op het afspelen van audio en video. Steve Jobs liet in 2010 al weten dat het zou stoppen met het ondersteunen van Flash op haar mobile devices, waardoor video en audio stream partijen als Youtube en Pandora nagenoeg verplicht werden zich te richten op het ontwikkelen van HTML5 apps, waarbinnen hun content afgespeeld zou kunnen worden.

8 Het <canvas> element Het canvas element wordt gebruikt om afbeeldingen te tekenen middels script. Hiermee is het een directe concurrent van de reeds bestaande, op XML gebaseerde, SVG (Scalable Vector Image). Form elementen Ook met betrekking tot web formulieren zijn er een aantal nieuwe elementen opgedoemd. Zo hebben we tegenwoordig het element <datalist>, wat gebruik kan worden om suggesties te geven aan de gebruiker, wanneer deze een <input> element aan het invullen is. Waar eerder AJAX oplossingen nodig waren om een functionaliteit als deze mogelijk te maken, kan dit nu met enkele regels HTML opgelost worden. Keygen Een andere opvaller om de rekenkracht naar de kant van de client te halen is <keygen>, met keygen hoeven we geen PHP meer te schrijven om unieke hashes uit te rekenen. Ideaal aan dit element is dat het zowel lokaal als op de server een hash achterlaat. Zo kunnen we vrij eenvoudig users identificeren zonder ze hiervoor te moeten laten registreren of IP adressen op te slaan. Data validatie Ook kunnen input velden met behulp van HTML5 patterns eenvoudiger gevalideerd worden. <input type="text" id="partnumber" pattern="[a-z]{3[0-9]{4" /> tkt saxion 19/3/13 10:05 Opmerking [2]: Er is veel meer toegevoegd op het gebied van forms. Ik zie dit hier niet terug. Door enkel het required attribute toe te voegen aan het input element wordt de gebruiker verplicht om hier een waarde in te vullen, alvorens het formulier gesubmit kan worden. <input type="number" id="qty" required /> Met de attributes min, max en step kunnen waarden gecontroleerd worden <input type="number" id="qty" min="0" max="100" step="10" /> Met de placeholder attribute kan een placeholder opgegeven worden voor een input element. Dat wil zeggen dat er een description achtige tekst in het veld wordt getoond, welke verdwijnt op het moment dat de user er een waarde invult.

9 Data- attributes Vaak werden attributes als ID, name en rel gebruikt om data op te slaan die enkel werd gebruikt door javascript. Dit werd niet als efficiënte en nette oplossing gezien en daarom is met het ontstaan van HTML5 nu ook het data- attribute in het leven geroepen. data-<suffix> kan worden gebruikt een bepaalde value aan een element toe te kunnen, wat semantisch als juist wordt bevonden en vervolgens door Javascript netjes uitgelezen kan worden.

10 HTML5: Nieuwe API s Canvas 2D API Het element canvas is reeds genoemd, maar de canvas API opent nog een hele sloot aan nieuwe functies. Zo zijn er voor gedefinieerde functies om allerlei shapes te scripten en kan script natuurlijk ook bitmap data uitlezen en herproduceren. <html> <head> <script type="application/javascript"> function draw() { var canvas = document.getelementbyid("canvas"); if (canvas.getcontext) { var ctx = canvas.getcontext("2d"); tkt saxion 19/3/13 10:07 Opmerking [3]: Voorbeeld? ctx.fillstyle = "rgb(200,0,0)"; ctx.fillrect (10, 10, 55, 50); ctx.fillstyle = "rgba(0, 0, 200, 0.5)"; ctx.fillrect (30, 30, 55, 50); </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> Timed Media Playback Ook voor <audio> en <video> zijn nieuwe functies in het leven geroepen. Zo kan een stream gepauseerd worden, afgespeeld worden of kan er op andere manier invloed worden uitgeoefend op de timeline van een track. Tevens bestaat de mogelijkheid om middels HTML5 complete afspeellijsten van verschillende tracks in te laden. Drag & Drop Door een element de methode draggable= true mee te geven kan de gebruiker het element verslepen en elders weer droppen. De API maakt het mogelijk deze

11 elementen uit te lezen en hier andere informatie over op te vragen. Ook is er een set aan events, waarmee bepaalde acties getriggerd kunnen worden. <!DOCTYPE HTML> <html> <head> <script> function allowdrop(e) { e.preventdefault(); tkt saxion 19/3/13 10:07 Opmerking [4]: Voorbeeld? function drag(e) { e.datatransfer.setdata("text", ev.target.id); function drop(e) { e.preventdefault(); var data = e.datatransfer.getdata("text"); e.target.appendchild(document.getelementbyid(data)); </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> HTML File API De HTML file API maakt het initiëren van lokale bestanden mogelijk middels HTML om deze vervolgens binnen het script te kunnen gebruiken. Een groot verschil met PHP niet per se op de server opgeslagen hoeven worden, maar direct gebruikt kunnen worden en client-side worden opgeslagen. Dit heet App storage en werkt met een manifest bestand. Dit is een tijdelijk bestand wat in de browsercache wordt opgeslagen en zodoende middels JavaScript te manipuleren is. tkt saxion 19/3/13 10:08 Opmerking [5]: Dit heet App storage en werkt met een manifest bestand. Het HTML5 element input van het type file kan nu ook een attribute genaamd multiple bevatten. Hiermee kunnen meerdere bestanden in de file dialog

12 geselecteerd worden en deze objecten worden vervolgens in de FileList interface opgeslagen. Vervolgens zijn ze via JavaScript te benaderen en kunnen properties als size en last modified date opgevraagd worden. Waar is de rest? Websockets Websockets stellen een socket verbinding op tussen de client/browser en de server. Dat wil zeggen dat er een constante verbinding is opgezet, waarbij beiden partijen zowel kunnen zenden als ontvangen. tkt saxion 19/3/13 10:09 Opmerking [6]: Websockets, Microdata, Webworkers, Webmessaging, RDFa Een socketverbinding wort als volgt geiniitieerd: var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']); Websockets maken gebruik van een ander URL scheme dan het gebruikelijke HTTP. In dit voorbeeld hanteren we ws://. Een alternatief zou wss (web socket secure) kunnen zijn. Microdata Microdata vocabularies worden gebruikt om de betekenis van woorden in de markup van een HTML pagina te duiden. De semantiek van de content. Dit kan handig zijn wanneer een machine het document moet interpreteren. Zoals wanneer zoekmachines website content indexeren. Microdata wordt toegepast als attribute op bestaande elementen. Het attribute definieert de naam en het element zelf omsluit de waarde. Er zijn standaard vocabularies beschikbaar, zoals die op schema.org. Dit is een organisatie die zich bezighoud met het opstellen van standaard microdata vocabularies. <section itemscope itemtype= > <p>mijn naam is <span itemprop= givenname >Peter</span> <span itemprop= familyname >Polman</span> en ik ben geboren op <span itemprop= birthdate >16 oktober 1988</span> jaar oud.</p> </section>

13 Webworkers JavaScript is een single thread language. Dat wil zeggen dat het script maar 1 ding tegelijkertijd kan uitvoeren. Met behulp van webworkers kun je meerdere uit te voeren threads aanmaken en deze synchroon laten uitvoeren. De syntax hiervoor luidt als volgt: var worker = new Worker('task.js'); Nadat de worker is gedefinieerd start je hem met het volgende statement: worker.postmessage(); Webmessaging Web messaging stelt documenten in staat om data uit te wisselen tussen bijvoorbeeld verschillende vensters of tussen iframes. Aangezien er geen gebruik van POST of GET methods wordt gebruikt is deze oplossing een stuk minder vatbaar voor cross-site scripting (XSS). Ik vroeg mij af of je hier dan bijvoorbeeld interactieve banners mee kon maken die reageren op de positie van de cursor ten opzichte van de banner in de pagina (in plaats van binnen de iframe). Het is me uiteindelijk alleen gelukt om enkel een string door te geven via de postmessage method. Maar in principe zou je een object wat als string verzonden is naderhand natuurlijk weer kunnen splitten om er losse variablen van de maken. <html> <head> <script> window.onload = function() { var receiver = document.getelementbyid('receiver').contentwindow; function sendmessage(e) { var posx = e.clientx; var posy = e.clienty; var pos = posx+","+posy; receiver.postmessage(pos, 'http://playground.dev'); window.onmousemove = sendmessage; </script>

14 </head> <body> <iframe id="receiver" src="http://playground.dev/reciever.html" ></iframe> </body> </html> Het voglende bestand wordt door de iframe ingeladen en draagt een functie met zich mee die de e.data property van het verzonden event kan ontvangen en weergeven. De e.origin property bevat de meegegeven bron van sender.html en checkt of deze overeenkomt met het domein waarop de scripts zich bevinden. Op deze manier is dus de security ingebouwd. <html> <head> </head> <body> <div id="message"></div> <script> window.onload = function(){ var element = document.getelementbyid('message'); function receivemessage(e){ if(e.origin!== "http://playground.dev") { return ; element.innerhtml = "Mouse X,Y: " + e.data; window.addeventlistener('message',receivemessage); </script> </body> </html> RDFa Het Resource Description Framework in Attributes stelt de ontwikkelaar in staat om metadata attributes toe te voegen aan XHTML, HTML en XML elementen. Eerder in deze rapportage behandelden we het begrip MicroData al en dit vertoont een hoop vergelijkenissen met RDFa. Beiden brengen een nieuwe laag metadata aan op de bestaande HTML elementen en de values die ze bevatten.

15 De oorsprong van deze twee verschillende features zit hem in de chronolische volgorde qua ontwikkeling. RDFa werd al ontwikkeld in 2004 en Microdata kwam pas een hele poos daarna. Microdata werd gebaseerd op het originele RDFa design, maar koos er bewust voor om niet backwards compatible te zijn met RDFa zelf. Als antwoord daarop is RDFa Lite ontwikkeld, wat developers uiteindelijk wél in staat stelt om de Microdata tags in hun documenten te wijzigen in RDFa Lite tags. Microdata 1.0 RDFa Lite 1.1 Purpose itemid resource Used to identify the exact thing that is being described using a URL, such as a specific person, event, or place. itemprop property Used to identify a property of the thing being described, such as a name, date, or location. itemscope not needed Used to signal that a new thing is being described. itemtype typeof Used to identify the type of thing being described, such as a person, event, or place. itemref not needed Used to copy-paste a piece of data and associate it with multiple things. not supported not supported vocab prefix Used to specify a default vocabulary that contains terms that are used by markup. Used to mix different vocabularies in the same document, like ones provided by Facebook, Google, and open source projects. Bron:

16 Verschillen HTML 4.01, XHTML 1.0, HTML 5 Semantiek Qua elementen, methodes en API s omvangt HTML5 natuurlijk een heel scala aan nieuwe mogelijkheden die in HTML 4.01 of XHTML 1.0 nog niet te vinden waren. Ik vermoed echter dat er bij deze competentie geduid wordt op een select aantal verschillen die vooral gericht zijn op de werkwijze van ontwikkelaars. Natuurlijk tracht iedere ontwikkelaar zijn script zo netjes mogelijk te schrijven om niet alleen een goede input te leveren op het semantische web, maar ook zijn code goed leesbaar te houden voor bijvoorbeeld collega ontwikkelaars. HIER MOET NOG EEN TABEL Semantiek Video audio Canvas Input tkt saxion 19/3/13 10:10 Opmerking [7]: Wat is nou het verschil tussen deze drie HTML versies? DOCTYPE Enkele specifieke voorbeelden van verschillen die belangrijk zijn voor de browser om vervolgens een pagina op de juiste manier te kunnen renderen, zitten hem in het DOCTYPE. De declaratie aan het begin van het HTML document, waarin aan de browser wordt verteld hoe deze jouw code moet gaan interpreteren. Welke taal je spreekt. Wanneer dit verkeerd wordt aangeduid kan het zijn dat bepaalde elementen niet bruikbaar zijn, omdat deze in de gedefinieerde DOCTYPE niet beschikbaar zijn. Strict (voorkeur) Transitional Frameset HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Strict (voorkeur) XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

17 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> HTML 5 <!DOCTYPE html> Waar eerder altijd een onderscheid werd gemaakt in interpretatie van strict/transitional of frameset varianten van HTML. Is in HTML 5 al dit gedoe achterwege gelaten en werken we te allen tijde met het doctype <!DOCTYPE html>. Heel fijn. Iets wat eigenlijk al sinds HTML 4.01 al niet meer mag is het afbreken van elementen zonder geldige afsluiting. Er zijn een aantal elementen die niet met een tag (</element>) afgesloten hoeven worden, zoals bijvoorbeeld <br> en <img>. Deze dienen een forward slash aan het eind van hun start tag te hebben, <br /> en <img src= alt= />. Ook wordt sinds XHTML 1.0 alle markup in lowercase geschreven en dienen attribute values altijd omsloten te worden met dubbele aanhalingstekens (quotes: ). Dit wil nog wel eens problemen veroorzaken wanneer de HTML wordt geprint door PHP functies die dikwijls ook een sloot aan aanhalingstekens met zich meenemen. tkt saxion 19/3/13 10:12 Opmerking [8]: Dit mag juist wel in HTML4.01 maar niet in XHTML. Dit zou ik verwachten onder het kopje Netjes Schrijven. Conclusie

18 CSS3: New Elements & differences Attribute Selectors Deze selectors zijn patronen, welke worden gebruikt om bepaalde delen binnen de document tree of een HTML element te initiëren. Waar eerder brokken Javascript gebruikt moesten worden om delen binnen de content van HTML elementen te herkennen, zijn nu slimme CSS selectors in het leven geroepen om styling in dit soort gevallen mogelijk te maken. In CSS3 zijn er wat meer variaties op de bestaande attribute selectors toegevoegd. Hiermee kunnen we met behulp van verschillende operators flexibel omgaan met de values van de verschillende attributes op een element. tkt saxion 19/3/13 10:13 Opmerking [9]: Voorbeelden graag a[href^="http:"] { declarations Bovenstaande selector zoekt met behulp van de operator ^= binnen de value van het attribute href naar een string beginnend met De operator ~= gedraagt zich vergelijkbaar, maar de value dient dan precies overeen te komen met de opgegeven value. img[src$=".png"] { declarations Bovenstaande selector zoekt met behulp van de operator $= binnen het attribute src naar een value die eindigt met.png div[id*="foo"] { declarations Bovenstaande selector zoekt met behulp van de operator *= binnen het attribute id naar een value die de string foo bevat. De operator = gedraagt zich vergelijkbaar, maar de value dient dan precies overeen te komen met de opgegeven waarde.

19 Pseudo Classes Pseudo classes worden gebruikt om bepaalde elementen of states binnen een pagina of een element te kunnen herkennen en stylen. Zo kenden we voor CSS3 de pseudo classes :link, :visited, :hover en :active al. Waarmee <a> en haar verschillende states gestyled konden worden. In CSS2 hadden we zelfs de class :first-child al tot onze beschikking. Toch werd vaak door Javascript een class meegegeven aan het eerste (en ook laatste) element, daar :last-child nog niet beschikbaar was. Met de nieuwe :nth-child(n) kunnen we nu zelfs een specifiek element uit bijvorbeeld een UL opvragen. Daarnaast zijn er een aantal specifieke pseudo elements toegevoegd in CSS3, zoals bijvoorbeeld ::first-line, ::first-letter, ::before en ::after. Deze nieuwe pseudo elements worden met :: geschreven, daar zij styling toepassen op een specifiek gedeelte van een html element. Combinators Combinators hebben alles te maken met hiërarchie. Binnen een HTML document noemen we dit de document tree en deze wordt gezien als de boom van informatie met verschillende takken aan uitwerkingen. Oftewel; branches met daaraan nog weer meer branches. We gebruiken combinators om bijvoorbeeld een ID of class te aan te geven (# of.) binnen het stylesheet. Hiervoor zijn ook wildcards beschikbaar (*) en middels een + kun je een sibling van een element definiëren. Een nieuwe combinator in CSS3 is de ~. Deze wordt gebruikt om sibling elements van een bepaald element binnen het document eenzelfde style mee te geven. ( p~h1{ <style> ) Waar is de rest? tkt saxion 19/3/13 10:18 Opmerking [10]: CSS3 Styling, Transform, animations and transitions, Media Queries

20 Supported Browsers Ik ben van mening dat het kopiëren van een browser support table niet heel veel toevoegt, daar deze binnen een paar seconden up-to-date en compleet op het internet te vinden zijn. Daarom gebruik ik deze pagina om een klein pleidooi te houden met betrekking tot de support die webdevelopers zouden moeten leveren om hun high-end websites ook in verouderde browsers op een nette manier weer te geven. Iedere front-ender wordt er dagelijks mee geconfronteerd. De diversiteit van browsers en hun eigen interpretatie van het Document Object Model. Concepters en designers ontwikkelen prachtige ideeën en vervolgens mogen de developers gaan uitzoeken of dit van mogelijk is. Over het algemeen zal het antwoord luiden: natuurlijk!. In de nieuwste browsers kunnen we in principe alles tevoorschijn toveren wat ons hartje begeert. Feit blijft echter dat we rekening moeten blijven houden met gebruikers die hun browsers niet updaten of overheden en andere instanties die gebonden zijn aan bepaalde versies. Daarom zal er vaak ingeleverd moeten worden op pracht en praal of worden er talloze uitzonderingen geschreven om de websites toch enigszins bruikbaar te houden. tkt saxion 19/3/13 10:15 Opmerking [11]: Dit lijkt mij wat overdreven. Noem eens een paar beperking van HTML5 en CSS3? Internet Explorer, don t be a bitch en zorg dat je voortaan een beetje meekomt met de ontwikkeling die Chrome en Firefox doormaken. De evolutie van het web zal hier mee versneld worden en de ontwikkelaars hebben het vandaag de dag al moeilijk genoeg met al die verschillende devices die ondersteund dienen te worden. </rant> tkt saxion 19/3/13 10:20 Opmerking [12]: Ik mis hier iets over audio/video support, en progressive enhanchement. Conclusie? tkt saxion 19/3/13 10:22 Opmerking [13]: Graag een conclusie over de twee nieuwe standaarden (plus en minpunten) en een reflectie op het eigen werk.

Frontend ontwikkeling

Frontend ontwikkeling Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft

Nadere informatie

Websitecursus deel 1 HTML

Websitecursus deel 1 HTML Websitecursus deel 1 HTML WebCie A Eskwadraat www@a-eskwadraat.nl 8 april 2015 Inleiding Website cursus in drie delen: HTML CSS Javascript We gaan uit van geen voorkennis. Als je vragen hebt, stel ze!

Nadere informatie

HTML. Media. Hans Roeyen V 3.0

HTML. Media. Hans Roeyen V 3.0 Media Hans Roeyen V 3.0 12 maart 2015 Inhoud 1. (Multi)Media op websites... 3 2. Flash en Websites... 4 3. Video op je website... 4 3.1. YouTube insluiten op de pagina... 4 3.2. Video zonder YouTube...

Nadere informatie

GIVE ME A FUCKING
FRONTEND DEVELOPMENT LES 1

GIVE ME A FUCKING <BR> FRONTEND DEVELOPMENT LES 1 GIVE ME A FUCKING FRONTEND DEVELOPMENT LES 1 WAAROM DIT VAK? Nou? Vraag dit aan je studenten, schrijf het eventueel op het bord. Benadruk al deze punten ook. - Materiaalkennis - Hoe weet je wat je

Nadere informatie

HTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt?

HTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Inleiding Emark Mail biedt u de mogelijkheid om kant en klare HTML nieuwsbrieven in te laden en te versturen.

Nadere informatie

HTML Graphics. Hans Roeyen V 3.0

HTML Graphics. Hans Roeyen V 3.0 HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.

Nadere informatie

Y.S. Lubbers en W. Witvoet

Y.S. Lubbers en W. Witvoet WEBDESIGN Eigen Site Evaluatie door: Y.S. Lubbers en W. Witvoet 1 Summary Summary Prefix 1. Content en structuur gescheiden houden 2. Grammaticaal correcte en beschrijvende markup 3. Kopregels 4. Client-

Nadere informatie

Opdracht Dynamische Webapplicaties: HTML5

Opdracht Dynamische Webapplicaties: HTML5 INLEIDING HTML5 is sinds kort de nieuwe standaard voor het maken van webpagina s. Deze nieuwe versie van de welgekende HTML (HyperText Markup Language) biedt voor het eerst de mogelijkheid om video en

Nadere informatie

Inhoud. Pagina 2 van 13

Inhoud. Pagina 2 van 13 Code Conventie Inhoud PHP algemeen... 3 Namen van variabelen... 3 Enkele of dubbele aanhalingstekens... 3 Globale variabelen... 3 Namen van functies... 3 Argumenten van functies... 3 Formattering... 4

Nadere informatie

HTML5 VIDEO. Een stand van zaken Jeroen Wijering, LongTail Video

HTML5 VIDEO. Een stand van zaken Jeroen Wijering, LongTail Video HTML5 VIDEO Een stand van zaken Jeroen Wijering, LongTail Video WHOIS JW? Auteur van de JW Player (2005) Open-source Flash video speler voor embedden in websites. Gebruikt door YouTube in 1e jaar Helaas,

Nadere informatie

Schrijven voor het web. 1TIN Internettechonologie 2003-2004 les 02 1

Schrijven voor het web. 1TIN Internettechonologie 2003-2004 les 02 1 Schrijven voor het web 1TIN Internettechonologie 2003-2004 les 02 1 Verschillen met gewone teksten niet noodzakelijk sequentieel lezen webpagina globaal lezen (geen details) beantwoorden aan doel van bezoek?

Nadere informatie

Foutcontrole met Javascript

Foutcontrole met Javascript Foutcontrole met Javascript Pol Van Dingenen Yannick Van Hauwe INLEIDING Het controleren van de gegevens die ingevuld zijn in formulieren is heel erg belangrijk. In de praktijk is enkel en alleen controle

Nadere informatie

Website beoordeling zonetelechargement.com

Website beoordeling zonetelechargement.com Website beoordeling zonetelechargement.com Gegenereerd op Juli 23 2015 10:12 AM De score is 47/100 SEO Content Title zone-telechargement.com 520: Web server is returning an unknown error Lengte : 71 Let

Nadere informatie

Cluster 1 Realiseert. 4 Beschrijving van de beroepssituatie behorende bij deze leereenheid

Cluster 1 Realiseert. 4 Beschrijving van de beroepssituatie behorende bij deze leereenheid LEEREENHEID HTML/CSS Dit document bestaat uit twee onderdelen - Onderdeel Leereenheid - Onderdeel Onderwijsproduct 1 Naam leereenheid In deze tabel staat de naam en het type van de leereenheid Leereenheid

Nadere informatie

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK

Nadere informatie

Software 1. Basis HTML. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1

Software 1. Basis HTML. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Software 1 Basis HTML bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Alain Simons alain.simons@artesis.be Basis HTML 1. Introductie 2.

Nadere informatie

Markup: CSS en HTML5. Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen

Markup: CSS en HTML5. Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen Markup: CSS en HTML5 Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen 1 CSS: Waarom ook alweer. HTML was bedoeld voor documentstructuur (text met verschillende levels in headings en body text)

Nadere informatie

AJAX (XMLHttpRequest)

AJAX (XMLHttpRequest) AJAX (XMLHttpRequest) Ajax is hot. De meesten die met webdesign bezig zijn hebben er wel al van gehoord, veronderstel ik. Voor diegenen die er nog niet van hoorden, of nog niet mee werkten volgt hier een

Nadere informatie

HTML5 overzicht Tag Uitleg Versie Attributen

HTML5 overzicht Tag Uitleg Versie Attributen HTML5 overzicht Tag Uitleg Versie Attributen Commentaarregel toevoegen 4 en 5 Geen Document 4 en 5 Geen Hyperlink 4 en 5 href ping Samenvoeging van een woord 4 en

Nadere informatie

Web building basis: HTML. Karel Nijs 2008/09

Web building basis: HTML. Karel Nijs 2008/09 Web building basis: HTML Karel Nijs 2008/09 Web building basis eerste les HTML intro Browsers HTML elementen HTML basis tags HTML attributen HTML kleuren HTML formattering Extra: HTML entities Web building

Nadere informatie

Les 9: formulier controle met javascript.

Les 9: formulier controle met javascript. Les 9: formulier controle met javascript. Javascript is erg veel gebruikt bij internet toepassingen. In tegenstelling tot PHP, wat een server side scripting is, is java client side scripting. Dwz, niet

Nadere informatie

Internet Standaarden HC4

Internet Standaarden HC4 Internet Standaarden HC4 Hogeschool van Amsterdam - Instituut voor Interactieve Media 1 Invloed van Games Laatste ontwikkelingen Gebruik van Games 11 oktober 2007 Hogeschool van Amsterdam - Instituut voor

Nadere informatie

PRESTATIESITE WEBPAKKET

PRESTATIESITE WEBPAKKET PRESTATIESITE WEBPAKKET PRESTATIESITE Wij hebben al onze ervaring gebruikt om een gestandaardiseerd webpakket te ontwikkelen met een lay-out welke de focus heeft op leads en new business. Op deze wijze

Nadere informatie

Website beoordeling megabikestuttgart.de

Website beoordeling megabikestuttgart.de Website beoordeling megabikestuttgart.de Gegenereerd op August 03 2015 14:46 PM De score is 57/100 SEO Content Title MEGA bike Radsport Stuttgart Lengte : 28 Perfect, uw title tag bevat tussen de 10 en

Nadere informatie

APEX Templates. OGH APEX dag 30 maart. Art Melssen. 31 maart 2010

APEX Templates. OGH APEX dag 30 maart. Art Melssen. 31 maart 2010 APEX Templates OGH APEX dag 30 maart Art Melssen Introductie Over de spreker 4 jaar APEX ervaring / 7 jaar Oracle 10 jaar web technologie ervaring APEX trajecten o.a. bij Centraal Boekhuis en eboekhuis

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

Pro templates. Copyright Starteenwinkel.nl Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen

Nadere informatie

HTML richtlijnen e-mail marketing. part of the valley

HTML richtlijnen e-mail marketing. part of the valley e-mail marketing pagina 2/9 geschreven door Maarten van Benthem, front-end developer datum 1 oktober 2009 versie 1.0 Copyright Alle rechten voorbehouden. De inhoud van dit document blijft eigendom van

Nadere informatie

Technisch ontwerp. Projectteam 6. Project "Web Essentials" 02 april 2009. Versie 2.1.0

Technisch ontwerp. Projectteam 6. Project Web Essentials 02 april 2009. Versie 2.1.0 Projectteam 6 Faculteit Natuur en Techniek Hogeschool Utrecht Projectleider: Hans Allis, hans.allis@student.hu.nl Technisch ontwerp Project "Web Essentials" 02 april 2009 Versie 2.1.0 Teamleden: Armin

Nadere informatie

Tutorial HTML CSS met Adobe Dreamweaver CSx

Tutorial HTML CSS met Adobe Dreamweaver CSx Tutorial HTML CSS met Adobe Dreamweaver CSx Johan Smits, Saxion, Minor Internetmarketing, WCM1, week 4 Introductie Bij het werken met content op een website is het van groot belang om tekst en vormgeving

Nadere informatie

Externe pagina s integreren in InSite en OutSite

Externe pagina s integreren in InSite en OutSite Externe pagina s integreren in InSite en OutSite Document-versie: 1.1 Datum: 04-10-2013 2013 AFAS Software Leusden Niets uit deze uitgave mag verveelvoudigd worden en/of openbaar gemaakt worden door middel

Nadere informatie

Individuele opdracht - PENCIL - Kenny Goorts 26 mei, 2012

Individuele opdracht - PENCIL - Kenny Goorts 26 mei, 2012 Individuele opdracht - PENCIL - Kenny Goorts 26 mei, 2012 1 Contents 2 1 wat is het Pencil is animatie/teken software voor Mac, Windows en Linux. Je kan er de traditionele handgetekende animatie mee tekenen

Nadere informatie

Formulieren maken met Dreamweaver CS 4/CS 5

Formulieren maken met Dreamweaver CS 4/CS 5 Formulieren maken met Dreamweaver CS 4/CS 5 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit

Nadere informatie

Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM

Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM Tips & Tricks Eigen Widgets in CRM Eigen Widgets in CRM Introductie De WebUI van CRM 7.0 maakt het mogelijk om je eigen widgets te maken en deze in je eigen view te gebruiken. Dat kan door gebruik te maken

Nadere informatie

NBTC html wijzigingen juni

NBTC html wijzigingen juni NBTC html wijzigingen juni Verstuurd naar GX: 23 juni 2014 1. Recently viewed Zie Change / Incident 1: Prijzen recently viewed zijn niet correct. Aan de recently viewed items wordt een extra label (met

Nadere informatie

SEO IS SIMPEL SEARCH ENGINE OPTIMIZATION E-BOOK

SEO IS SIMPEL SEARCH ENGINE OPTIMIZATION E-BOOK SEARCH ENGINE OPTIMIZATION E-BOOK VERSIE: 1.0 DATUM: APRIL 2009 AUTEUR: ERWIN SIGTERMAN WEBSITE: WWW.SIGGYVOLGT.NL E-MAIL: ERWIN@SIGTERMAN.COM INHOUDSOPGAVE 1 Search engine optimalization... 3 URL aanmelden

Nadere informatie

Website beoordeling qiwork.pt

Website beoordeling qiwork.pt Website beoordeling qiwork.pt Gegenereerd op December 03 2015 16:54 PM De score is 55/100 SEO Content Title QIWORK. Creative Studio Lengte : 25 Perfect, uw title tag bevat tussen de 10 en 70 karakters.

Nadere informatie

Toetsmatrijs Web Markup

Toetsmatrijs Web Markup Toetsmatrijs Web Markup Deze toetsmatrijs verstrekt de leerdoelen en toetscriteria voor het vak Web Markup competentienummers of C 1.1 Een eenvoudige webpagina bouwen, testen en publiceren op het web HTML,

Nadere informatie

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 6) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

Webapplication Security

Webapplication Security Webapplication Security Over mijzelf 7 jaar in websecurity Oprichter van VirtuaX security Cfr. Bugtraq Recente hacks hak5.org wina.ugent.be vtk.ugent.be... Aantal vulnerable websites Types vulnerable

Nadere informatie

Website beoordeling fibreclick.co.uk

Website beoordeling fibreclick.co.uk Website beoordeling fibreclick.co.uk Gegenereerd op December 21 2015 11:09 AM De score is 44/100 SEO Content Title Fibre Click Lengte : 11 Perfect, uw title tag bevat tussen de 10 en 70 karakters. Description

Nadere informatie

Web Application Security Hacking Your Way In! Peter Schuler & Julien Rentrop

Web Application Security Hacking Your Way In! Peter Schuler & Julien Rentrop Web Application Security Hacking Your Way In! Peter Schuler & Julien Rentrop 1 Agenda Injection Cross Site Scripting Session Hijacking Cross Site Request Forgery #1 OWASP #2 top 10 #3 #5 Bezoek www.owasp.org

Nadere informatie

Handleiding: Whitelabel Customersite

Handleiding: Whitelabel Customersite ARGEWEB B.V. Handleiding: Whitelabel Customersite Controlportal.nl Argeweb Support 8-1-2009 Handleiding voor het gebruik maken van de Whitelabel Customersite op controlportal.nl, door Resellers van Argeweb.

Nadere informatie

10. Single Page Applications

10. Single Page Applications WHITEPAPER IN 5 MINUTEN M E I 2 0 1 4 10. Single Page Applications Introductie De wereld verandert snel en gebruikers openen je site of applicatie steeds minder met een traditionele browser. Een site of

Nadere informatie

Website beoordeling seo.sololaki.com

Website beoordeling seo.sololaki.com Website beoordeling seo.sololaki.com Gegenereerd op Februari 19 2016 17:13 PM De score is 66/100 SEO Content Title SEO Analyzer Lengte : 12 Perfect, uw title tag bevat tussen de 10 en 70 karakters. Description

Nadere informatie

Werken met afbeeldingen in webpagina's

Werken met afbeeldingen in webpagina's Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.

Nadere informatie

Documentatie. InstantModules Q42. Versie 1.1

Documentatie. InstantModules Q42. Versie 1.1 Documentatie InstantModules Q42 Versie 1.1 Inhoudsopgave Inhoudsopgave... 2 Voor gebruikers... 3 InstantComment... 3 InstantTagging... 5 Voor webmasters... 9 InstantComment... 9 InstantTagging... 11 Voor

Nadere informatie

IMG IS EVERYTHING FRONTEND DEVELOPMENT LES 6

IMG IS EVERYTHING FRONTEND DEVELOPMENT LES 6 IMG IS EVERYTHING FRONTEND DEVELOPMENT LES 6 VORIGE WEEK De principes van het web Multiscreen Responsive webdesign Mediaqueries Mobile first Even heel kort samenvatten waar we het ook al weer over hebben

Nadere informatie

Les 2: Can t get it out of my

Les 2: Can t get it out of my <head> Les 2: Can t get it out of my Les 2 gaat over de geschiedenis van HTML. Het W3C en WHATWG. Ook wordt de HTML5 timeline besproken. In de les ga je werken aan Validatie & Code lezen, Rich media elementen:

Nadere informatie

Les 2: Can t get it out of my

Les 2: Can t get it out of my <head> Les 2: Can t get it out of my Les 2 gaat over de geschiedenis van HTML. Het W3C en WHATWG. Ook wordt de HTML5 timeline besproken. In de les ga je werken aan Validatie & Code lezen, Rich media elementen:

Nadere informatie

Een ASP.NET applicatie opzetten. Beginsituatie:

Een ASP.NET applicatie opzetten. Beginsituatie: Hoofdstuk 1 Een ASP.NET applicatie opzetten Beginsituatie: Windows XP Pro, Windows Vista Pro of Windows 7 Pro Visual Studio.NET moet zijn geïnstalleerd. Let hierbij op dat de Express versie niet voldoet.

Nadere informatie

Info-books. Toegepaste Informatica. Deel 35: XML - XSL HO35. Jos Gils Erik Goossens

Info-books. Toegepaste Informatica. Deel 35: XML - XSL HO35. Jos Gils Erik Goossens Info-books HO35 Toegepaste Informatica Deel 35: XML - XSL Jos Gils Erik Goossens Hoofdstuk 5 Het Document Object Model 5.1 Probleemstelling Wanneer je de inhoud van een document en de presentatie uiteen

Nadere informatie

Publicatie formulieren en surveys

Publicatie formulieren en surveys Handleiding: Publicatie formulieren en surveys Deze handleiding is in te zetten voor MailPlus Marcom en MailPlus ecom. Inhoudsopgave Introductie... 1 1 Formulieren integreren... 2 1.1 Formulieren integereren

Nadere informatie

NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files

NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files NVU work shop Moerman http://www.keesmoerman.nl November 2006 1 1 Overzicht 1. Overzicht van een web site Wat is een web site HTML files 2. NVU: Een HTML editor Overzicht Een eerste pagina Configuratie

Nadere informatie

Prowise Pro Connect 2.0 Technische documentatie

Prowise Pro Connect 2.0 Technische documentatie Prowise Pro Connect 2.0 Technische documentatie 2012 Prowise Inhoudsopgave 3 Over Pro Connect 4 Gebruikte techniek voor Pro Connect 4 Pro Connect poorten 5 Automatische poort detectie 5 Flash Fallback

Nadere informatie

STAGE VERSLAG LVB NETWORKS

STAGE VERSLAG LVB NETWORKS STAGE VERSLAG LVB NETWORKS Stagiair : Praktijkopleider : Stagebegeleider : Periode : Inlever Datum : Michael Scherpenisse Jeffrey van Draanen Bert de Boer 1 2 April, 2015 Opmerking Beoordeling stageverslag:

Nadere informatie

beginnen met bloggen (kleine workshop Wordpress)

beginnen met bloggen (kleine workshop Wordpress) beginnen met bloggen (kleine workshop Wordpress) Een weblog is van oorsprongeen lijstje linktips met een stukje tekst. Oorspongvan het weblog Jorn Barger is an American blogger, best known as editor of

Nadere informatie

Summerschool Mobiele Apps 15-17 augustus 2012 Herman van Dompseler. HTML 5 App

Summerschool Mobiele Apps 15-17 augustus 2012 Herman van Dompseler. HTML 5 App Summerschool Mobiele Apps 15-17 augustus 2012 Herman van Dompseler HTML 5 App 1. Wat is HTML 5 2. HTML 5 Apps 3. Hybride App Architectuur 4. Een App maken Overzicht Deel 1: HTML5 HTML 5 gebruikt als verzamelnaam

Nadere informatie

Inhoud. Wat zijn webrichtlijnen, waarom zouden we daar iets mee moeten en hoe doe je dat dan?

Inhoud. Wat zijn webrichtlijnen, waarom zouden we daar iets mee moeten en hoe doe je dat dan? Webrichtlijnen Inhoud Wat zijn webrichtlijnen, waarom zouden we daar iets mee moeten en hoe doe je dat dan? Webrichtlijnen? 30 juni 2006: de Tweede kamer neemt het 'Besluit Kwaliteit Rijksoverheidswebsites'

Nadere informatie

Naam stagiair: Nick Swaerdens. Klas: 3IV2. Praktijkopleider: Jordy Pouw. Stagebegeleider: Ron Spitse. Stage periode tweede verslag:

Naam stagiair: Nick Swaerdens. Klas: 3IV2. Praktijkopleider: Jordy Pouw. Stagebegeleider: Ron Spitse. Stage periode tweede verslag: Nick Swaerdens 3IV2 10 / 06 / 2015 Naam stagiair: Nick Swaerdens Klas: 3IV2 Praktijkopleider: Jordy Pouw Stagebegeleider: Ron Spitse Stage periode tweede verslag: 2 april 2015 10 juni 2015 Inlever datum:

Nadere informatie

De 9lives Webdesign informatie sticky

De 9lives Webdesign informatie sticky De 9lives Webdesign informatie sticky Hoe maak ik een eigen website? Een eigen site maken kan op verschillende manieren, de ene al wat beter dan de andere. Veel gebruikers beginnen met een WYSIWYG-editor,

Nadere informatie

MailPlus-template voor BrightEdit

MailPlus-template voor BrightEdit Handleiding: MailPlus-template voor BrightEdit Deze handleiding is bedoeld voor MailPlus Partners en in te zetten voor MailPlus Marcom Inhoudsopgave Introductie... 1 1 De Template Manager... 2 1.1 Template

Nadere informatie

Introductie Veiligheidseisen Exploiten Conclusie. Browser security. Wouter van Dongen. RP1 Project OS3 System and Network Engineering

Introductie Veiligheidseisen Exploiten Conclusie. Browser security. Wouter van Dongen. RP1 Project OS3 System and Network Engineering Browser security Wouter van Dongen RP1 Project OS3 System and Network Engineering Februari 4, 2009 1 Introductie Onderzoeksvraag Situatie van de meest populaire browsers Client-side browser assets vs.

Nadere informatie

INFORMATIE VOOR COMMUNICATIEMANAGERS EN WEBMASTERS

INFORMATIE VOOR COMMUNICATIEMANAGERS EN WEBMASTERS INFORMATIE VOOR COMMUNICATIEMANAGERS EN WEBMASTERS BrowseAloud Plus: dé voorleestool op websites! 1 INHOUD Informatie voor communicatiemanagers en webmasters... 1 BrowseAloud Plus: dé voorleestool op websites!

Nadere informatie

Auteur: Tim Huisman Editor: Pieter Beekman

Auteur: Tim Huisman Editor: Pieter Beekman Auteur: Tim Huisman Editor: Pieter Beekman Versie: 1.2 Laatst aangepast: 06-2012 Inleiding Dit onderzoek richt zich op de nieuwe webstandaard HTML5, dat momenteel in ontwikkeling is door het Web Hypertext

Nadere informatie

Multimedia op een website

Multimedia op een website Multimedia op een website De webpagina's bestonden tot nu toe alleen maar uit tekst. Dat ziet er natuurlijk een beetje saai uit. Tijdens dit practicum gaan we kijken hoe plaatjes, geluidsfragmenten, FLASHmovies,

Nadere informatie

Handleiding Wordpress

Handleiding Wordpress Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde

Nadere informatie

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash INHOUDSOPGAVE Inleiding DEEL I: THEORIE Hoofdstuk 1: Richtlijnen Webstandaarden Voordelen Hoofdstuk 2: HTML De geschiedenis

Nadere informatie

Cerium CMS versie 4.0. Wat is nieuw in versie 4.0. www.cerium.nl

Cerium CMS versie 4.0. Wat is nieuw in versie 4.0. www.cerium.nl Cerium CMS versie 4.0 Wat is nieuw in versie 4.0 www.cerium.nl Bijgewerkt februari 2014 Cerium BV 2014 Inhoudsopgave 1. Inleiding 3 2. Nieuwe onderhouds URL 4 3. Drag and drop upload 5 4. Spring naar item

Nadere informatie

WEBANALYSE. WEBPAGINA: http://www.joy-ce.com/ April 2013. Vervaardigd door:

WEBANALYSE. WEBPAGINA: http://www.joy-ce.com/ April 2013. Vervaardigd door: WEBANALYSE WEBPAGINA: http://www.joy-ce.com/ April 2013 Vervaardigd door: Inhoudsopgave Inhoud.2 Introductie 3 Social Media 4 Mobiel 5 SEO..6 Basis. Inhoud. Links.. Keywords. Autoriteit. Linkuitwisseling...

Nadere informatie

TaskCentre Web Service Connector: Creëren van requests in Synergy Enterprise

TaskCentre Web Service Connector: Creëren van requests in Synergy Enterprise TaskCentre Web Service Connector: Creëren van requests in Synergy Enterprise Inhoudsopgave 1. Voorbereiding... 4 2. Web Service Connector tool configuratie... 5 3. TaskCentre taak voor het aanmaken van

Nadere informatie

Internet_html.doc 1/6

Internet_html.doc 1/6 Internet_html.doc 1/6 Internet html. HTML syntax en regels Een HTML-element is opgebouwd uit een startmarkering en een eindemarkering (behalve enkele speciale markeringen zoals bvb. , , ).

Nadere informatie

Angular Best Practices Door Alex en Chris van Beek

Angular Best Practices Door Alex en Chris van Beek Angular Best Practices Door Alex en Chris van Beek Over ons Enthousiastelingen Software Architecten bij Luminis Arnhem B.V. Gespecialiseerd in Microsoft technologie:.net, Azure en Windows Twitter: @Beekje

Nadere informatie

Documentatie WD32. Christine van Woensel M32

Documentatie WD32. Christine van Woensel M32 Documentatie WD32 Christine van Woensel M32 Ontwerpkeuzes per device resolutie Desktop (1025 1600px & 769 1024px): Tablet (481 768px): Smartphone (321 480px & tot 320px): Algemeen: Alle ontwerpen voor

Nadere informatie

Online Marketing. Door: Annika Woud ONLINE MARKETING

Online Marketing. Door: Annika Woud ONLINE MARKETING Online Marketing Door: Annika Woud 1 Inhoudsopgaven 1 Wat is online marketing? 2 Hoe pas je online marketing toe op een website? Hoe pas je het toe? SEO Domeinnaam HTML Google Analytics Advertenties op

Nadere informatie

De doe-het-zelf SEO review [checklist]

De doe-het-zelf SEO review [checklist] De doe-het-zelf SEO review [checklist] door admin - 05-29-2012 http://www.itpedia.nl/2012/05/29/de-doe-het-zelf-seo-review-checklist/ website Kijk periodiek onder de motorkap van je Zoals elke SEO-professional

Nadere informatie

Javascript oefenblad 1

Javascript oefenblad 1 Leer de basis van Javascript. Javascript oefenblad 1 Niels van Velzen Javascript oefenblad 1 Pagina 2 Inleiding Javascript is niet altijd even makkelijk. Vooral aan het begin is het even wennen hoe de

Nadere informatie

Selenium IDE Webdriver. Introductie

Selenium IDE Webdriver. Introductie Selenium IDE Webdriver Het Wielsem 10, 5231 BW s- Hertogenbosch, telefoon 073-6409311 e- mail info@testwork.nl internet http://www.testwork.nl 1 Inhoudsopgave 1 Inhoudsopgave... 2 2 Selenium IDE... 3 3

Nadere informatie

Joomla Template & Bootstrap 3.0. JUGA 19-11-2013 Henk Rijneveld (henk@henkrijneveld.nl)

Joomla Template & Bootstrap 3.0. JUGA 19-11-2013 Henk Rijneveld (henk@henkrijneveld.nl) Joomla Template & Bootstrap 3.0 JUGA 19-11-2013 Henk Rijneveld (henk@henkrijneveld.nl) De case Joomla 3.laatst Helemaal responsive Fixed kop- en voetgebied Specifieke chrome Zoveel mogelijk zelf Joomla

Nadere informatie

EEN WEBSITE MAKEN MET WEEBLY

EEN WEBSITE MAKEN MET WEEBLY EEN WEBSITE MAKEN MET WEEBLY Dit is de handleiding om op Weebly.com een website te leren maken. De handleiding is verdeeld in 5 hoofdstukken; 1. Aanmelden 2.Weebly werkblad 3. Draggen en Droppen 4.Pagina

Nadere informatie

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken

Nadere informatie

WEBSITE SCAN Vrijblijvend advies

WEBSITE SCAN Vrijblijvend advies WEBSITE SCAN Vrijblijvend advies IBAN: NL57ABNA0479025207 Inleiding: Wij hebben uw website op diverse facetten geanalyseerd en hier een bondig rapport voor geschreven. Door het uitvoeren van onderstaande

Nadere informatie

FUMAGGO WEB SOLUTIONS

FUMAGGO WEB SOLUTIONS FUMAGGO WEB SOLUTIONS Aanpassen design stemexamen.nl Offerte voor ProDemos Den Haag Fumaggo Web Solutions Lammenschansweg 93, 2313 DK Leiden KvK Rijnland 52202992 Leiden, 19 juni 2012 2 1 Introductie ProDemos

Nadere informatie

HTML Editor: de eerste stappen

HTML Editor: de eerste stappen LES 18 HTML Editor: de eerste stappen In deze les leert u werken met HTML Editor. Daarbij geven we tevens een inleiding tot HTML. Hoewel op dit moment HTML versie 4.01 in gebruik is, maakt de HTML Editor

Nadere informatie

Voor de database wordt een Access 2000 bestand gebruikt, met voorlopig 1 tabel:

Voor de database wordt een Access 2000 bestand gebruikt, met voorlopig 1 tabel: Eenvoudig voorbeeld. Er wordt verondersteld dat er met VS 2008 EXPRESS gewerkt wordt. Voor de database wordt een Access 2000 bestand gebruikt, met voorlopig 1 tabel: (Sommige schermafdrukken zijn afkomstig

Nadere informatie

Audit Emeritis. www.emeritis.com. Audit eflavours voor Emeritis : beknopte analyse website: www.emeritis.com + voorstel. eflavours.

Audit Emeritis. www.emeritis.com. Audit eflavours voor Emeritis : beknopte analyse website: www.emeritis.com + voorstel. eflavours. Audit Emeritis www.emeritis.com eflavours Audit eflavours voor Emeritis : beknopte analyse website: www.emeritis.com + voorstel eflavours BVBA Lage Weg 427 2600 Hoboken info@e-flavours.be M: 0498/ 73.44.19

Nadere informatie

Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0

Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0 Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0 Inhoudsopgave Inhoudsopgave Inleiding 2 3 1. Achtergrond 4 2. Structuur 5 3. Inhoud Mixed Emotions

Nadere informatie

Technisch Ontwerp W e b s i t e W O S I

Technisch Ontwerp W e b s i t e W O S I Technisch Ontwerp W e b s i t e W O S I WOSI Ruud Jungbacker en Michael de Vries - Technisch ontwerp Website Document historie Versie(s) Versie Datum Status Omschrijving / wijzigingen 0.1 20 nov 2008 Concept

Nadere informatie

Handleiding voor Zotero versie 2.0

Handleiding voor Zotero versie 2.0 Handleiding voor Zotero versie 2.0 Michiel Wolda De handleiding voor Zetero is geschreven voor de lezers van het boek Deskresearch: Informatie selecteren, beoordelen en verwerken: tweede editie (Van Veen

Nadere informatie

Handleiding Vergelijkingsfeed

Handleiding Vergelijkingsfeed Handleiding Vergelijkingsfeed Versie 1.9 7 september 2014 Introductie Hartelijk dank dat u voor de vergelijkingsfeed van BelkostenWijzer hebt gekozen. De vergelijkingsfeed van BelkostenWijzer vergelijkt

Nadere informatie

WEBSITE USABILITY. white-paper

WEBSITE USABILITY. white-paper WEBSITE USABILITY white-paper Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te

Nadere informatie

Google Chrome Windows Vista Windows 7 Windows 8 8.1 Apple imac ibook Adobe Acrobat Reader

Google Chrome Windows Vista Windows 7 Windows 8 8.1 Apple imac ibook Adobe Acrobat Reader Probleem: bij het openen van de apdf ziet u een wit scherm i.p.v. de gegevens m.b.t. uw beheerrekening. Afhankelijk van de webbrowser, Windows versie of merk computer dat u gebruikt, kan dit probleem worden

Nadere informatie

ALGEMEEN. Bij Tweakers zijn we gek op advertenties.

ALGEMEEN. Bij Tweakers zijn we gek op advertenties. SPECSHEET TWEAKERS ALGEMEEN Bij Tweakers zijn we gek op advertenties. Ten minste; als ze binnen onze advertentierichtlijnen vallen en dus iets toevoegen aan de gebruikerservaring in plaats van daar afbreuk

Nadere informatie

SharePoint 2010 versus 2013

SharePoint 2010 versus 2013 Whitepaper SharePoint 2010 versus 2013 Is een upgrade noodzakelijk? T +31 418 57 07 00, F +31 418 57 07 50 Inleiding Microsoft komt met een echt sociaal samenwerkingsplatform dat past bij de eisen en wensen

Nadere informatie

INTERNET STANDAARDEN HC1

INTERNET STANDAARDEN HC1 9 September 2008 INTERNET STANDAARDEN HC1 Wat is het internet? Wat zijn standaarden? Wat gaan we doen dit jaar? Hogeschool van Amsterdam Instituut voor Interactieve Media Hogeschool van Amsterdam Instituut

Nadere informatie

Sophie van Solinge 77524 CMS32

Sophie van Solinge 77524 CMS32 Sophie van Solinge 77524 CMS32 1 Opdracht 1 Drupal Wordpress Joomla Case 1 De groenteboer op de hoek, heeft grootse plannen voor zijn zaak. Omdat er in de omgeving veel verzorgingstehuizen zijn en de inwoners

Nadere informatie

Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale.

Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale. Een HTML-sjabloon Denk goed na hoe je webpagina er moet uitzien. Wil je een webpagina met een horizontale vormgeving (zoals bij een schermpresentatie)? Wil je een webpagina met een verticale vormgeving

Nadere informatie