Categoriearchief: Informatica

Apps programmeren in Flutter-3

Dit is deel 3 van de tutorial het maken van van een eenvoudige app met een menubalk. Op de menubalk bevinden zich drie knoppen waarmee u naar drie verschillende pagina’s navigeert. De pagina’s hebben elk een andere kleur, maar zijn verder nog leeg. Bij een echte app zou u hierop informatie of interactieve onderdelen plaatsen. Deze mini-app geeft een beeld van de wijze waarop u in Flutter een gebruikersinterface maakt. In het eerste deel gingen we aan het werk in Dartpad en maakten we een widget ‘scherm1’. In het tweede deel maakten we meer widgets en creëerden we een basisscherm. In dit derde deel maken we een menubalk en voegen we pagina’s toe.

Stap 7: Een menubalk maken

We voegen een menubalk toe aan Scaffold. Breid de Scaffold widget in de klasse MijnEersteApp uit met de code hieronder. Bespaar u daarbij wat typewerk door gebruik te maken van de keuzelijst die u oproept met ctrl-spatie. Bijvoorbeeld: als de cursor binnen de haakjes van Scaffold staat, kunt u de eerste twee of drie letters van bottomNavigationBar typen. Als u daarna op ctrl-spatie drukt, krijgt u een lijstje met mogelijkheden waarin u de juiste optie kunt selecteren. De lijst bevat alleen opties die in deze widget bruikbaar zijn.
Lees verder Apps programmeren in Flutter-3

Apps programmeren in Flutter-2

Dit is deel 2 van de tutorial het maken van van een eenvoudige app met een menubalk. Op de menubalk bevinden zich drie knoppen waarmee u naar drie verschillende pagina’s navigeert. De pagina’s hebben elk een andere kleur, maar zijn verder nog leeg. Bij een echte app zou u hierop informatie of interactieve onderdelen plaatsen. Deze mini-app geeft een beeld van de wijze waarop u in Flutter een gebruikersinterface maakt. In het eerste deel gingen we aan het werk in Dartpad en maakten we een widget ‘scherm1’. In dit vervolg maken we meer widgets en creëren we een basisscherm.

Stap 4: Meer widgets maken

Ons doel is om een app te maken waarmee de gebruiker tussen drie schermen kan schakelen. Daarom voegen we eerst twee schermen toe. Dat gaat heel eenvoudig.

  • Kopieer de klasse Scherm1: dat is alle code uit stap 3.
  • Plak deze twee keer onder de andere code, na de laatste accolade. U krijgt nu een foutmelding bij de namen van de nieuwe klassen (omdat u vaker dezelfde naam gebruikt).
  • Verander de namen van de laatste twee klassen in Scherm2 en Scherm 3.
  • Verander de kleuren: color: Colors.red wordt color: Colors.blue bij Scherm2 en color:Colors.green bij Scherm3.

Lees verder Apps programmeren in Flutter-2

Apps programmeren in Flutter in de online-omgeving van Dartpad

Probeer het zonder installatie van software

Het programmeren van professionele apps is natuurlijk geen sinecure. Maar eenvoudige apps maakt u gemakkelijker dan u wellicht denkt. De eerste stappen zijn soms wat intimiderend: voor u één regel code schrijft, moet u een programmeer- en testomgeving downloaden, installeren en leren gebruiken. In deze tutorial slaan we deze stappen helemaal over. In de online-omgeving Dartpad kunt u gratis, snel en gemakkelijk experimenteren met het app-ontwikkelsysteem Flutter en de programmeertaal Dart. Probeer het zelf met behulp van deze drie-delige tutorial. Dit is deel 1.

Als u wilt beginnen met het maken van apps, dan is dit het ideale moment. Niet eerder was het zo gemakkelijk om native apps te maken en te testen voor zowel Android als Apple. Dat is mogelijk dankzij Flutter, het relatief nieuwe ontwikkelplatform van Google. Flutter is laagdrempeliger dan andere systemen, maar biedt toch eindeloze mogelijkheden om professionele apps te bouwen: grote bedrijven vertrouwen erop voor hun essentiële apps.

In het boek ‘Apps ontwikkelen met Flutter‘ leest u hoe u met Flutter begint. Zoals in de meeste programmeerboeken, gaat het eerste deel over de installatie van de onderdelen die u nodig heeft. Deze onderdelen zijn gratis, maar de installatie is wel een drempel voor mensen die eerst eens willen uitproberen wat Flutter nu eigenlijk is en of zij er mee aan de slag willen. Voor deze mensen is er de online-applicatie Dartpad. Daar kunt u met Flutter beginnen zonder iets te installeren. Er zijn beperkingen: als u een echte app van de code wilt maken of als u aanvullende Flutter-modules wilt gebruiken, dan heeft u echt ontwikkelsoftware nodig. Maar Dartpad is ideaal als u gewoon eens wilt proberen wat Flutter is en hoe u hierin onderdelen bouwt met Dart (de programmeertaal van Flutter). Dat gaan we doen in deze tutorial. Lees verder Apps programmeren in Flutter in de online-omgeving van Dartpad

Wat zit er in mijn netwerk? Fing weet het!

Wat zit er in mijn netwerk? Op die vraag weet de app Fing (Android en iOS) het gedetailleerde antwoord. Speur ongewenste apparaten op, of achterhaal het adres van de webinterface van je nieuwe slimme lamp!

Op zolder staat een printer. In de hobbykamer ook nog eentje. En ach ja: op de kamer van dochter- of zoonlief ook nog eentje. Allemaal verbonden met het thuisnetwerk. En verder zijn er nog die slimme lampen, de ijskast, de tv, de… Ehm, ja, wat nog meer eigenlijk? Als je snel en precies wilt zien wat er zoal aan netwerkapparatuur in huis gebruikt wordt is er de app Fing (voor iOS en Android). Deze app doorzoekt je netwerk en maakt een lijst van alle aan het netwerk gekoppelde (en ingeschakelde…) apparatuur. Handig is daarbij dat het IP-adres getoond wordt, zodat je desgewenst snel verbinding met de bijvoorbeeld de webinterface van een apparaat kunt maken. Ook toont Fing de door het apparaat ondersteunde communicatieprotocollen. Kortom: het ultieme antwoord op de vraag ‘Wat zit er in mijn netwerk?’! Lees verder Wat zit er in mijn netwerk? Fing weet het!

Wat is virtualisatie?

Je hebt de term vast wel eens horen vallen: een virtuele machine. Maar wat is virtualisatie nou eigenlijk? En wat heb je er zelf (eventueel) aan?

Het antwoord op de vraag ‘wat is virtualisatie?’ is vrij eenvoudig te geven. Het is het nabouwen van een computer in software, op een dusdanige manier dat je die nagebouwde – virtuele – computer kunt gebruiken om een besturingssysteem en bijbehorende software op te installeren. Wat je dus nodig hebt is een programma dat zo’n virtuele pc in software voor je bouwt. Heb je dat eenmaal draaien, dan is het een kwestie van installeren van je gewenste besturingssysteem en het geheel gebruiken. Virtualisatie heeft een aantal grote voordelen. Ten eerste kun je bijvoorbeeld een ander besturingssysteem onder je hoofdbesturingssysteem draaien. Ofwel: wil je Linux eens uitproberen onder Windows, dan is dat geen probleem. Andersom kan ook: Windows in een virtuele machine draaien onder Linux. Dat komt uitstekend van pas als je bijvoorbeeld overstapt van Linux naar Windows en je per se nog wat specifieke Windows-programma’s wilt blijven gebruiken. Of als je voor de zekerheid toch nog even een Windowsversie achter de hand wilt houden. Kan allemaal! Lees verder Wat is virtualisatie?

Maak zelf een HSL-kleurkiezer met HTML, CSS en JS (4)

Handboek HTML 5 en CSS3Het boek van de maand oktober 2019 was Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Die maand bespreken we het boek en gaven we op dit blog wat voorproefjes uit het boek. Dit is deel 4 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. Deel 1 vind je HIER, deel 2 vind je HIER en deel 3 HIER. De site die bij het boek hoort vind je HIER. (H.F.)

Er bestaan allerlei hulpmiddelen om de CSS-code van een RGB- of HSL-kleur te bepalen, maar zelf iets bouwen is een perfect oefenproject. In een serie korte artikelen lees je hoe je zelf een kleurkiezer voor HSL maakt met HTML, CSS en een beetje JavaScript. Dit is deel 4: de helpfunctie.
Met de kleurkiezer kun je sinds aflevering 3 van de serie een kleur instellen en de CSS-code daarvan kopiëren en plakken in je code-editor. Een ding ontbreekt nog: de helpfunctie. Leer hoe je een overlay en een dialoogvenster maakt met HTML, CSS en Javascript.
Begin gemist? Lees dan eerst deel 1. Lees verder Maak zelf een HSL-kleurkiezer met HTML, CSS en JS (4)

iPad als kantoor

Die iPad kan eigenlijk zo ongeveer elk apparaat op je bureau vervangen, als het gaat om werk. Kortom: de iPad als kantoor is verdraaid handig! Zeker nu reizen met de dag moeilijker en duurder wordt.

We hebben de iPad natuurlijk al eens vaker genoemd als vervanger voor de laptop. En dat gaat in veel gevallen best goed, was toen de conclusie. Maar eigenlijk is diezelfde iPad in sommige opzichten zelfs beter dan de laptop. Want je kunt er – liefst met een extern toetsenbordje – niet alleen prima op tikken, ook is het een uitstekend dicteerapparaat. En als je wilt ook meteen een scanner en (of) copier. Communiceren draait het apparaat ook z’n hand al niet voor om. Gebruik het eigen Apple Facetime voor een uitstekende beeld- en geluidskwaliteit. Voor gesprekken een op een of complete videovergaderingen. Geen gekke gedachte nu we met z’n allen binnenkort nog maar 100 mogen rijden. Waarom nog elke dag naar je werk sukkelen als je ook prima thuis kunt werken? Want dát is eigenlijk het allergrootste voordeel van de iPad als kantoor: we zijn niet meer afhankelijk van een vaste werkplek. Werken kan overal en altijd! Lees verder iPad als kantoor

Maak zelf een HSL-kleurkiezer in HTML en CSS (3)

Handboek HTML 5 en CSS3Het boek van de maand oktober is Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Deze maand bespreken we het boek, geven we op dit blog wat voorproefjes uit het boek. Dit is deel 3 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. Deel 1 vind je HIER, deel 2 vind je HIER. De site die bij het boek hoort vind je HIER. (H.F.)

Tijd voor het vervolg van een serie over het maken van je eigen HSL-kleurkiezer. In deel 2 is met hulp van het schaduw-DOM de basisopmaak voor de regelaars ingesteld en kreeg de tintregelaar een kleurverloop volgens het HSL-systeem. Die kleur is niet meer dan een achtergrond. De werkelijke waarde komt uit het attribuut value. Hetzelfde geldt voor de andere regelaars. Met JavaScript kunnen we die waarden lezen en verwerken tot een CSS-kleurdeclaratie of de inhoud van een tekstveld. Lees verder Maak zelf een HSL-kleurkiezer in HTML en CSS (3)

Maak zelf een HSL-kleurkiezer in HTML en CSS (2)

Handboek HTML 5 en CSS3Het boek van de maand oktober is Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Deze maand bespreken we het boek, geven we op dit blog wat voorproefjes uit het boek. Dit is deel 2 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. De site die bij het boek hoort vind je HIER. (H.F.)

In deel 1 van deze serie is het raamwerk van de HSL-kleurkiezer gebouwd. Dit deel gaat over het maken van de regelaars voor de componenten van een HSL-kleur. Dat blijkt nog een mooie uitdaging.

De kleurwaarden

Eerst moeten we bedenken hoe we alle kleuren kunnen weergeven. Een HSL-kleur bestaat uit drie componenten: hue (tint), saturation (verzadiging) en lightness (helderheid). HSL is gebaseerd op de RGB-kleuren. Het model ziet eruit als een dubbele kegel, met de kleuren in een cirkel en zwart en wit op de toppen. Rood staat op 0/360 graden, groen op 120 en blauw op 240 graden. In CSS wordt bijvoorbeeld de volle kleur groen weergegeven als hsl(120, 100%, 50%). Hierbij is 120 de tint, 100% de verzadiging en 50% de helderheid. Met de hoofdkleuren van RGB maken we een kleurverloop waarin alle tinten voorkomen. CSS heeft daarvoor de eigenschap linear-gradient. Lees verder Maak zelf een HSL-kleurkiezer in HTML en CSS (2)

Maak zelf een HSL-kleurkiezer in HTML en CSS (1)

Handboek HTML 5 en CSS3Het boek van de maand oktober is Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Deze maand bespreken we het boek, geven we op dit blog wat voorproefjes uit het boek. Dit is deel 1 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. Deel 2 uit deze serie vind je HIER, deel 3 HIER en deel 4 HIER. De site die bij het boek hoort vind je HIER. (H.F.)

Er bestaan allerlei hulpmiddelen om de CSS-code van een RGB- of HSL-kleur te bepalen, maar zelf iets bouwen is een perfect oefenproject. In een serie korte artikelen lees je hoe je zelf een kleurkiezer voor HSL maakt met HTML, CSS en een beetje JavaScript. Dit is deel 1: de interface (UI).

Interface voor het instellen van een HSL-kleur
Lees verder Maak zelf een HSL-kleurkiezer in HTML en CSS (1)