Tutorial

186 views
152 views

Published on

Published in: News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
186
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tutorial

  1. 1. Burger en Politiek Tutorial voor het gebruik van HTML5
  2. 2. Katja van Nimwegen Universiteit Utrecht
  3. 3. Beste Burgemeester <ul><li>Beste Burgemeester. U staat aan het hoofd van een dorp, ouderwets bijna, met een hoofdstraat, een paar winkeltjes, en natuurlijk mensen. Uw dorp heet Globe, een mooie naam voor een dorp, dat zeker. Nu heeft u gemerkt dat er dingen aan het veranderen zijn, in uw dorp. Goed van u, dat ten eerste, veel van uw collega's hebben het nog niet eens door. Maar u wel, dat pleit voor u. </li></ul><ul><li>Er zijn dingen aan het veranderen, en dat maakt u een beetje bang. Steeds minder vaak ziet u mensen op straat, en als u ze eens spreekt hebben ze altijd een apparaatje in hun hand. Dat apparaatje zegt af en toe pling, en nu zeggen ze ook al dat u zelf zo'n apparaatje zou moeten kopen! Om met uw bloedeigen burgers te kunnen praten nog wel! Het is toch van de gekke. </li></ul><ul><li>Beste burgemeester, ik ga u helpen. Uw gemeenschap is zich namelijk aan het transformeren, en u moet zich daar aan aanpassen. Dat wilt u misschien nog liever niet, maar ik raad het u toch aan. U zou toch niet willen dat mensen ontevreden over u worden! Dat ze protesten gaan organiseren, via die apparaatjes, of erger! Zo ver is het gelukkig nog niet, maar de onrust is al wel aan het stijgen. Mensen hebben namelijk, hoe goed uw bedoelingen ook zijn, het gevoel dat u ze niet meer hoort. Ze vinden dat ze makkelijker invloed moeten kunnen uitoefenen op het bestuur. Niet alleen meer door te stemmen, maar ook door in debat te gaan, en door direct commentaar te kunnen leveren. Op u, bijvoorbeeld. </li></ul>Maar dat is niet het enige. Een ander probleem is, dat mensen niet meer snappen wat er in het bestuur van hun dorp gebeurt. Er zijn veel manieren bijgekomen voor hen om informatie te krijgen, en daar doet u nog niet aan mee. Ik ga u een paar manieren aanleren om mensen duidelijk te informeren over uw beleid, zodat ze er gewillig aan meewerken. Lijkt u dat geen goed idee? Beste Burgemeester, ik wil u veel succes wensen met het doorlopen van deze tutorial. Ik hoop dat ik u, maar natuurlijk vooral het dorp Globe, er een stap verder mee help. Veel Succes.
  4. 4. Voor wie? Deze Tutorial is bedoeld voor iedereen die belang heeft bij het gebruik van nieuwe media voor democratische doeleinden:  Politici Overheidsinstellingen Beleidsmakers Enz. Maar zal worden toegespitst op een bestuurder van een fictieve stad.
  5. 5. <ul><li>Verhoging van democratische waarden door: </li></ul><ul><li>Informatiefunctie </li></ul><ul><li>Controlefunctie </li></ul><ul><li>Expressiefunctie </li></ul>Waarom? Verslag doen van beleid Gecontroleerd (en gecorrigeerd) worden Weten wat er speelt onder burgers
  6. 6. Wat? In deze tutorial zullen 5 HTML5-tools aangeboden worden voor het maken van een democratie-2.0 website
  7. 7. Namelijk <ul><li>Commentaar </li></ul><ul><li>Video-element </li></ul><ul><li>Sociale media </li></ul><ul><li>Powerpoints en Mindmaps invoegen </li></ul>
  8. 8. Maar eerst Wat is ' Democratie2.0 '?
  9. 10. Kortom <ul><li>Een Democratie2.0-website zorgt dus voor: </li></ul><ul><li>Ruimte voor commentaar en interactie </li></ul><ul><li>Mogelijkheid tot informatieoverdracht via verschillende media (filmpje, pdf, mindmap) </li></ul><ul><li>Ruimte voor discussie </li></ul>
  10. 11. Waarom HTML5? <ul><li>HTML5 is de nieuwste versie van de internet-taal HTML. Deze: </li></ul><ul><li>Zorgt voor een makkelijkere manier van opmaken </li></ul><ul><li>Biedt nieuwe attributen </li></ul><ul><li>Biedt mogelijkheden voor het gebruik van media als audio/video </li></ul><ul><li>Biedt mogelijkheden om bezoekers van de site content te laten toevoegen </li></ul><ul><li>HTML5 is de beste keus als het gaat om bovenstaande doeleinden omdat: </li></ul><ul><li>Gebruikers kunnen bijdragen aan de inhoud van de site (expressiefunctie) </li></ul><ul><li>Via een combinatie van mediakanalen informatie kan worden gegeven (informatiefunctie) </li></ul><ul><li>Het maken van een site makkelijker is met HTML5 dan met het oude HTML. </li></ul>
  11. 12. Deel 1 Controlefunctie
  12. 13. Controlefunctie Het is dus belangrijk dat er in de site een mogelijkheid aanwezig is tot het geven van kritiek. Dit kan ervoor zorgen (mits de politicus hier goed mee omgaat) dat beleid meer op wensen van inwoners toegepast wordt en dat inwoners op hun beurt zich gehoord voelen.
  13. 14. Commentaar Een manier om dit te bereiken is door een 'form-element' in te voegen.
  14. 15. Commentaar Neem dit over, en plak het in je HTML-bestand
  15. 16. Commentaar E-mail adres waarnaar het Gestuurd wordt verstuur-knop Labels: de vier dingen die gevraagd worden
  16. 17. Met CSS kun je dit basisformuliertje nog veel mooier maken. Ook kun je met PHP de 'comments' op de site zelf laten zien, zodat discussie kan ontstaan. Hulp hierbij: Tutsplus Commentaar
  17. 18. Dan ziet het er niet meer zo uit:
  18. 19. Maar zo: (en post George Washington op je site!)
  19. 20. Deel 2 Informatiefunctie
  20. 21. Informatie weergeven <ul><li>Voor de dieptegang van het debat is het belangrijk dat mensen op de hoogte zijn. Het kan hier gaan over regeringsakkoorden, miljoenennota's, plannen van partijen of beschrijvingen van situaties. Eigenlijk alles dat van belang kan zijn om de politiek te begrijpen. Dit moet dus beschikbaar zijn voor iedereen. Ook moet de drempel om het daadwerkelijk te lezen zo laag mogelijk liggen. </li></ul><ul><li>Om dit te bereiken kun je bestanden invoegen in de site. Dit kunnen Word- of PDFbestanden zijn, of Powerpointbestanden. Ook kun je overwegen informatie te structureren door middel van een ' mindmap' . Voor een voorbeeld van een dergelijke mindmap, zie dia ❽ . </li></ul>
  21. 22. Mindmap <ul><li>Voor het in elkaar zetten van een mindmap voor HTML5 bestaan verschillende websites. Een daarvan is Bubbl . Hiermee maak je zeer gemakkelijk diagrammen en exporteer je ze via een code naar je eigen website. </li></ul><ul><li>Handleiding in stappen: </li></ul><ul><li>Registreer op bubbl.us. Hiervoor hoeven ze alleen je e-mailadres, gebruikersnaam en wachtwoord te hebben. </li></ul><ul><li>Open een 'New Sheet' </li></ul><ul><li>Klik op een bolletje om hierin iets te schrijven, de rest van het brainstormen wijst zich zelf. </li></ul><ul><li>Sla de Mindmap op. Het komt aan de rechterkant van het scherm in een mapje te staan. Selecteer deze (als dat nog niet gebeurd is), klik op ' HTML Embed Code' , stel in hoe groot de mindmap moet worden op de site, en kopieer de gegeven code. </li></ul><ul><li>Plak de code in de 'body' van de site. Als de mindmap nu nog aangepast wordt, verandert automatisch ook de versie op de site. </li></ul>
  22. 23. Video <ul><li>HTML5 biedt de mogelijkheid gemakkelijk video's in te voegen in een webpagina. Dit is een veelgebruikte en laagdrempelige manier om informatie over te brengen (via interviews, campagnefilmpjes, discussies of tv-uitzendingen). Daarom voeg ik hier een handleiding(etje) toe. Er zijn meerdere manieren, maar ikzelf vind deze verreweg de makkelijkste. </li></ul><ul><li>Ga naar de site waar het filmpje op staat (eigen filmpjes zijn gemakkelijk te uploaden op o.a. Youtube.com). </li></ul><ul><li>Klik bij Youtube onder het filmscherm op delen, vervolgens op insluiten. Kopieer de link. (Bij Vimeo klik je op ' embed') </li></ul><ul><li>Voeg de link in binnen de body van de site. Het is nu een iframe, waar eventueel attributen aan toe te voegen of aan te passen zijn. </li></ul><ul><ul><li>De ' with' en 'height' zijn aan te passen om een groter/kleiner schermpje te bewerkstelligen. </li></ul></ul>
  23. 24. Deel 3 Expressiefunctie
  24. 25. Social Media <ul><li>Maar hoe weet u als burgemeester nu waar u uw aandacht aan moet besteden? Waar mensen over praten in de supermarkt, waar ze tegenaan lopen in hun buurt, waar ze zich zorgen over maken? </li></ul><ul><li>Want een gemiddelde politicus kan niet overal zijn en met iedereen uit zijn stad of land een praatje maken. Om dit gat enigszins te dichten maken steeds meer politici gebruik van sociale media. </li></ul><ul><li>Sociale media als Twitter, Hyves en Facebook scheppen mogelijkheden om met meer mensen in contact te blijven, mee te doen in discussies (met name twitter) en te vertellen over je dagelijkse bezigheden. </li></ul>
  25. 26. Social Media <ul><li>Op veel sites staan een aantal icoontjes die verwijzen naar sociale media. Om deze op een site te zetten moet je het volgende kopiëren: </li></ul><ul><li>Volg op twitter: </li></ul><ul><li><a href=&quot;http://twitter.com/share&quot; class=&quot;twitter-share-button&quot; data-count=&quot;horizontal&quot; data-via=&quot;YourName&quot;>Tweet</a> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;http://platform.twitter.com/widgets.js&quot;></script> </li></ul><ul><li>Google +1: </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;> </li></ul><ul><li>// parsetags: 'explicit'; </script> <div id=&quot;plusone-div&quot;></div> </li></ul><ul><li><script type=&quot;text/javascript&quot;>gapi.plusone.render ('plusone-div', {&quot;size&quot;: &quot;medium&quot;, &quot;count&quot;: &quot;true&quot;});</script> </li></ul><ul><li>Facebook Like: </li></ul><ul><li><iframe src=&quot;http://www.facebook.com/plugins/like.php?&amp;href&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden; width:450px; height:21px;&quot; allowTransparency=&quot;true&quot;> </li></ul><ul><li></iframe> </li></ul>
  26. 27. Tot Slot <ul><li>Het was moeilijk om te kiezen uit de ontelbare mogelijkheden die er zijn binnen HTML5 voor democratisering van websites. Dat feit alleen zegt misschien al hoe geschikt HTML5 is voor politiek-gerelateerde content: het vervult in hoge mate de drie kernfuncties. Natuurlijk is het niet goed om te idealiseren, en er zijn altijd beperkingen. Zo zijn er nog altijd burgers die geen internetverbinding hebben, of die simpelweg geen zin hebben zich met politiek te bemoeien. Ooit zal er een manier komen ook hen te bereiken. Mits, natuurlijk, we ervoor open staan. Want ik denk dat er veel meer mogelijk is dan we denken. </li></ul>
  27. 28. Beste Burgemeester <ul><li>Ik hoop dat u er wat aan gehad heeft. Wilt u verder in het gebruik van HTML5? Dan verwijs ik u naar </li></ul><ul><li>www.w3schools.com/html5 </li></ul><ul><li>Wilt u meer weten over democratie en internet? Een uitgebreide toekomstvisie vindt u op </li></ul><ul><li>www.wisdomofthecrowd.nl </li></ul>

×