# data[].attributes.attachment_link.readable_text
Bring design and dev closer

Introducing Dev Mode, a new space in Figma for developers. Bring clarity to designs and give developers the tools they need to translate them into code.

Explore Dev Mode

# data[].attributes.attachment_link.title
Figma: The Collaborative Interface Design Tool

# data[].attributes.attachment_link.description
Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.

# data[].attributes.body
Hieronder vind je de template die voldoet aan de eisen van de opleiding.
- vul deze compleet in
- als een onderdeel niet van toepassing is, zet dat er dan in. Verwijder geen hoofdstukken!
- haal alle uitleg- en voorbeeldteksten weg

# data[].attributes.attachment_link.description
Simple, beautiful database design tool for developers to create, collaborate and visualize their entity relationship diagrams.

# data[].attributes.body
https://sketch2code.azurewebsites.net

# data[].attributes.body
Wat is het:
Een wireframe is een schets van de (diverse) pagina's van het programma.
Wat staat er in:

Grove opbouw van het de pagina (elke pagina!)

Knoppen met hun naam

Datavelden met hun naam

Hoe maak je dit:
Het gaat hier over de grafische opbouw. Details zijn niet belangrijk. Je mag dit op papier schetsen en een foto maken

# data[].attributes.body
Het lijkt er op dat je voor het maken van een programma alleen maar hoeft te programmeren. Dit is natuurlijk ook het belangrijkste deel want zonder programma heb je niets.
Je wilt echter zeker zijn dat wat je hebt gemaakt ook goed is en dat je niet achteraf allerlei discussies hoeft te voeren.  Om hiervoor te zorgen is het belangrijk dat je goede documentatie leert maken. Deze padlet is hiervoor een handleiding. In de diverse kopjes zal elk onderdeel van de documentatie worden uitgelegd. Je vindt er tevens een template dat je kunt invullen.

# data[].attributes.body
Een template is een invulformulier. Om deze goed te gebruiken moet je aan een paar zaken denken:

Zet in de documenten alleen wat wordt gevraagd. Hou je informatie kort en krachtig maar ook compleet en juist

Wis in de documenten wel de voorbeeldtekst  maar hou alle onderdelen aanwezig. Geen hoofdstukken weghalen dus

Ververs de inhoudsopgave als je klaar bent.

# data[].attributes.body
Je begint met het

Pakket van Eisen. Dit maak je aan de hand van de documentatie van de klant, aangevuld met de informatie uit een gesprek

Plan van Aanpak. Dit bevat wat je gaat doen om het PvE te realiseren. Hierin staat oa een planning en een verdeling van de werkzaamheden.

Functioneel ontwerp bevat alle informatie die nodig in om te beschrijven WAT er moet worden gemaakt.

Technisch ontwerp beschrijft HOE je alles uit het technisch ontwerk gaat maken, de gebruikte techniek dus.

Realisatie is het daadwerkelijk maken van de applicatie

Testen is het uitvoeren van de testen om te verifiëren of de applicatie doet wat in de eisen staat. Hiervoor maak je van tevoren een testplan dat je dan uitvoert

Onderhoud bevat het versiebeheer en eventuele aanpassingen van de applicatie nadat je deze hebt opgeleverd aan de klant.

# data[].attributes.body
Als je een programma gaat maken doe je dit in fases. Elke fase is een losstaand onderdeel en je begint pas aan de volgende fase als het huidig onderdeel klaar. Bv je begint pas aan een technisch ontwerp als je functioneel ontwerp klaar is.

# data[].attributes.body
Een storyboard is een verder uitgewerkte versie van je mockups. In je storyboard ga je een verhaal vertellen, dit is de weg die jouw websitebezoeker door de website heen kan afleggen. Begin bij het scherm dat jouw gebruiker als eerste ziet. Welke keuze heeft jouw gebruiker en in welk scherm komt die terecht na het maken van een keuze.

Als jouw storyboard klaar is heb je in feite jouw clickable website of app in grafisch ontwerp klaar. Elke click komt uit op een scherm.

Zorg dat je als je ergens heen gaat je ook weer terug kunt komen bij het begin. Zorg dat je gebruikers niet vast komen te zitten in jouw website.

# data[].attributes.body
Unified Modeling Language oftewel UML is een verzameling van documentatiewijzes voor het maken van een programma. Als je bijvoorbeeld kijkt op onderstaande link dan zul je zien dat er nogal wat diagrammen van verschillende aard zijn. Deze diagrammen kun je maken met draw.io waarbij je de optie UML kiest en vervolgens de verschillende diagrammen kunt zien. Van de hiernaast beschreven diagrammen moet je kunnen laten zien dat je dit kunt maken en kunt uitleggen.

# data[].attributes.attachment_link.readable_text
De Unified Modeling Language, afgekort UML, is een modelmatige taal om objectgeoriënteerde analyses en ontwerpen voor een informatiesysteem te kunnen maken. UML is ontworpen door Grady Booch, James Rumbaugh en Ivar Jacobson in de jaren negentig en het is sinds 1997 een standaard. Kenmerkend is dat de UML-modellen een grafische weergave zijn van bepaalde aspecten van het informatiesysteem.

UML is een modelleertaal die breed gedragen wordt, wat te zien is aan het feit dat in de jaren negentig van de twintigste eeuw er een UML-consortium werd opgericht met als deelnemers onder andere de volgende bekende organisaties: Rational, DEC, IBM, ObjectTime, Oracle, HP en Texas Instruments. Dit consortium heeft de UML opgesteld die binnen de Object Management Group (OMG) als standaard aangenomen is.

Met UML kunnen niet alleen beschrijvingen worden gemaakt van statische verschijnselen, maar ook van dynamische processen. UML is een veelzijdig instrument dat in verschillende fasen van de systeembouw kan worden toegepast. Een van de krachtige aspecten van UML is dat er op relatief eenvoudige wijze meta-beschrijvingen kunnen worden gemaakt.

In tegenstelling tot wat vaak wordt gedacht, is UML zelf geen methode, maar een notatiewijze die bij verschillende methodes kan worden gebruikt. Een methode die gebruikmaakt van UML is RUP (Rational Unified Proces).

Object Constraint Language (OCL) is een declaratieve taal waarmee in UML diverse regels, condities en beperkingen kunnen worden aangegeven. Er bestaan allerlei programma's om UML-diagrammen te modelleren. Voorbeelden hiervan zijn Rational Software, Microsoft Visio, Visual Paradigm, StarUML, CannonSketch en TaskSketch.

De auteurs van de UML Grady Booch, James Rumbaugh en Ivar Jacobson worden ook wel de three amigo's genoemd. Ze hadden elk hun taal maar hebben deze gestandaardiseerd in UML. Booch had Booch 95, Rumbaugh had Object Modelling Technique (OMT) en Jacobson had Object Oriented Software Engineering (OOSE).

Sinds 1997 bestaat er een standaard voor UML. Kenmerkend is dat de UML-modellen een grafische weergave zijn van bepaalde aspecten van het informatiesysteem. Er zijn verschillende versies UML. De eerste versie was 1.0. Vervolgens waren er verschillende subversies. 1.1, 1.2 tot 1.5 . Vervolgens kwam versie 2.0.

UML biedt een verzameling van structuur- en gedragsdiagrammen, die zoals hier ook wel statische en dynamische diagrammen genoemd worden:

Alle diagrammen kunnen nota's bevatten. Dit wordt voorgesteld door een rechthoek met een ezelsoortje aan de rechterkant. Alle elementen kunnen een stereotype (speciale betekenis) hebben. Bijv. <<include>> Er kunnen tags gebruikt worden. Dit is een speciale waarde die een element heeft. Bijv. {auteur="Den Ikke"} Een element kan een beperking hebben, Deze zet men tussen accolades. vb. {leeftijd >= 18}

Statische diagrammen

Een klasse bestaat uit 3 delen:

het bovenste deel bevat de naam van de klasse

De naam van de klasse is erg belangrijk omdat het zal bepalen over welk object men het hier heeft.

De naam is uniek in het diagram.

De naam is altijd in enkelvoud

Bijv: Persoon, Voertuig, Factuur, ...

Deze attributen zijn meestal private attributen en kunnen enkel worden aangeroepen en aangepast door de methoden van deze klasse. Dit is wat men inkapseling noemt of met andere woorden het afschermen van gegevens.

schrijfwijze: zichtbaarheid naam: type = startwaarde

(private aangeraden voor attributen)

zichtbaarheden

+: publiek

-: privaat

#: protected

Bijvoorbeeld naam, leeftijd, omschrijving

vb. + naam: String = "een naam"

Methoden zijn functies of handelingen die men kan uitvoeren op deze objecten.

Deze kunnen bewerkingen uitvoeren op de attributen en zo de nodige gegevens ophalen of wijzigen.

schrijfwijze: zichtbaarheid naam(parameter:type): teruggeeftype

(zo veel mogelijk protected aangeraden)

Bijvoorbeeld LeesNaam()

WijzigNaam("Nieuwe naam")

+ maakTekst(naam:String):String

optioneel kan een vak met de uitzonderingen (exceptions) worden toegevoegd

Het verschil tussen associaties, aggregaties en composities

Associaties geven aan welke objecten kunnen 'praten' met elkaar. Een associatie verbindt 2 klassen. Elk van beide uiteinden van de associatie heeft een multipliciteit: n objecten (aan het ene uiteinde) verbonden met 1 object (aan het andere uiteinde). Associaties zijn:

uni-directioneel: slechts 1 klasse kan berichten sturen naar de andere klassen;

bi-directioneel: beide klassen kunnen heen-en-weer berichten sturen naar elkaar.

Een aggregatie is een speciaal type associatie tussen 2 ongelijkwaardige klassen. Ze vormen een "geheel-deel" relatie. Een aggregatie beschrijft hoe 1 "geheel-klasse" wordt samengesteld uit 1 "deel-klasse" of meer dan 1 "deel-klassen". Een aggregatie heeft altijd 1 "geheel-klasse" met multipliciteit = 1. Een aggregatie kan n objecten van 1 "deel-klasse" hebben of meer dan 1 "deel-klassen" met verschillende multipliciteiten.

Een compositie is een zeer sterke aggregatie. Het is ook een "geheel-deel" relatie, maar de "deel-klassen" kunnen niet bestaan zonder de "geheel-klasse". Als de "geheel-klasse" verdwijnt, dan verdwijnen de "deel-klassen" ook.

Een voorbeeld: bekijk de figuur hiernaast. Stel dat we 4 klassen hebben: Schip, Vloot, Motor en Land. Een Vloot heeft enkel maar zin om te bestaan wanneer er Schepen in zitten. Een Vloot heeft daarom een aggregatie met Schip. Wanneer een Vloot opgeheven wordt hoeft dit immers niet te betekenen dat de Schepen mee moeten verdwijnen. Een vloot heeft verder een bi-directionele associatie met Land. Elk Land kan meer dan 1 Vloot hebben, een Vloot behoort slechts tot één land. Vandaar de respectievelijke multipliciteiten * en 1. Een Schip heeft een Motor. Hier wordt een compositie gebruikt. Dit betekent dat er geen Motor kan bestaan, zonder dat deze in context van een Schip moet bekeken worden. Wanneer het Schip weg is, is de bijbehorende Motor dat ook.

Het objectdiagram geeft de objecten binnen een applicatie of systeem in een soort verzameling weer. Objecten zijn instanties van klassen. In een object hebben de attributen een bepaalde waarde op een bepaald tijdstip. Een object heeft een unieke identiteit. De naam van een object wordt onderlijnd.

wat kan men zien:

objecten

attributen met hun waarde op bepaald ogenblik

link tussen objecten

Het componentendiagram laat de verdeling van het systeem in componenten zien alsook en vooral hun onderlinge relaties of samenwerking. Elke component vormt één of meerdere klassen.

Het gebruiksdiagram toont het gebruik van de hardwarecomponenten binnen een systeemconfiguratie.

Dynamische diagrammen

Usecasediagram

Het usecasediagram toont de actoren en de gebruikersfunctie van het systeem. Een algemeen usecasediagram is een tekening. Een gedetailleerde usecase is een tekst die een vaste structuur heeft. Het is een dynamisch diagram.

Wat kan je zien op het diagram:

1. bepaal naam systeem

2. bepaal actoren

3. welke behoeften hebben actoren (usecase)

4. schrijf de usecase uit in een gedetailleerde usecase

5. leg de associatie tussen de actoren en usecases vast

6. bepaal de onderlinge relatie tussen usecases (stereotype <<include>> en <<extend>>)

7. controle

1. elke actor moet minstens 1 usecase-associatie hebben

2. elke usecase moet minstens 1 actor-associatie hebben

Het toepassingsdiagram toont hoe het systeem gebruikt gaat worden, welke handelingen ermee moeten worden verricht. Er wordt getoond welke verantwoordelijkheden (berichten/ methoden) worden verstuurd over de associatie.

wat kan men zien op het diagram:

Het volgordediagram geeft de interacties weer tussen verschillende objecten die een bepaalde functionaliteit (of een deel ervan) implementeren. De tijdsvolgorde staat centraal in het volgordediagram. Ook wel bekend als een sequentiediagram. Wat kan men zien op het diagram:

objecten

actoren

levenslijn (lifeline)

activeringsblok (execution bar)

berichten

creatie en verwijderen (creation en destroy)

fragment (UML 2.0) (fragments) vb. loop (lus) , alt (alternatieven), opt (optioneel), par (parallel), ...

Het activiteitendiagram laat de toestanden van het systeem zien gedurende het gebruik ervan en hoe de verschillende toestanden in elkaar overlopen.

Wat kan je zien op het diagram:

start en eind activiteit

activiteit

transitie

zwembaan (swimlane): baan waarvoor een bepaalde actor verantwoordelijk is

keuzeknoop (decision node) en samenvoegknoop (merge node)

vork (fork) en samenkomst (join) voor parallelle verwerking

1. bepaal welke gedetailleerde usecase je wil uitwerken

2. teken de actoren en het systeem van de usecase bovenaan en teken verticale stippellijnen tussen deze (zwembanen)

3. teken per interactie tussen de actoren en systeem de activiteit in zwembaan van wie de activiteit doet

4. plaats keuzeknopen, fork en joins

5. teken de pijlen tussen alle elementen (transities)

Correlatiediagram

Het correlatiediagram stelt de samenwerking centraal tussen objecten en hun gestructureerde organisatie.

Het toestand- of statechartdiagram laat de toestand zien waarin een object zich kan bevinden tijdens zijn bestaan in het systeem. Ook de overgangen naar toestanden, de events en activiteiten die veranderingen teweegbrengen in de toestanden komen worden weergegeven.

# data[].attributes.attachment_link.description
De Unified Modeling Language, afgekort UML, is een modelmatige taal om objectgeoriënteerde analyses en ontwerpen voor een informatiesysteem te kunnen maken. UML is ontworpen door Grady Booch, James Rumbaugh en Ivar Jacobson in de jaren negentig en het is sinds 1997 een standaard.

# data[].attributes.body
Wat is het
Entity relation diagram is het ontwerp van de database. Voordat je met programmeren begint moet je weten op welke manier je data gaat opslaan.
Wat staat er in:
Alle data die moet worden opgeslagen staat in tabellen.

Naam tabel

Per veld geef je naam en type aan.

Relaties tussen tabellen (1:1, 1:n, n:n)

Hoe maak je dit:
Je gebruikt hiervoor een daarvoor geschikte tool. Een goede tool is draw.io. Gewone grafische tekenpakketten zijn niet toegestaan hiervoor. In Draw.io maak je een leeg diagram en kiest vervolgens uit de UML opties
Sla op als XML voor gebruik in de Word documenten

# data[].attributes.body
Wat is het:
Een usecase beschrijft hoe een bepaalde gebruiker in een bepaalde situatie handelt.
Wat staat er in:
Alle stappen die de gebruiker in die case doorloopt.
Hoe maak je dit:

Je gebruikt hiervoor een daarvoor geschikte tool. Een goede tool is draw.io. Gewone grafische tekenpakketten zijn niet toegestaan hiervoor. In Draw.io maak je een leeg diagram en kiest vervolgens uit de UML opties
Sla op als XML voor gebruik in de Word documenten

# data[].attributes.body
Wat is het:
Een volgordediagram
Wat staat er in:
Dit diagram geeft aan hoe onderdelen van het programma met elkaar communiceren
Hoe maak je dit:

Je gebruikt hiervoor een daarvoor geschikte tool. Een goede tool is draw.io. Een handgemaakte tekening of een tekening in Word mag ook. In Draw.io maak je een leeg diagram en kiest vervolgens uit de UML opties
Sla op als XML voor gebruik in de Word documenten

# data[].attributes.body
Wat is het:
Een usecase beschrijft hoe een bepaalde gebruiker in een bepaalde situatie handelt.
Wat staat er in:
Alle stappen die de gebruiker in die case doorloopt.
Hoe maak je dit:

Je gebruikt hiervoor een daarvoor geschikte tool. Een goede tool is Word of Excel. Maak hierin rijen en kolommen zoals op voorbeeld
Sla op als XML voor gebruik in de Word documenten

# data[].attributes.attachment_link.readable_text
draw.io is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPMN online, as a circuit diagram maker, and more. draw.io can import .vsdx, Gliffy™ and Lucidchart™ files .

Loading...

Please ensure JavaScript is enabled.

# data[].attributes.attachment_link.title
Flowchart Maker & Online Diagram Software

# data[].attributes.attachment_link.description
draw.io is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams

# data[].attributes.attachment_link.readable_text
Fast, intuitive, and precise Object Editing

Resize, rotate, align and style objects - or transform multiple objects and groups - with smart and dynamic tools.

Bulk-edit, rename, lock, and group elements. Undo or redo on multiple levels. Quickly identify objects, navigate through nested groups, and toggle visibility - all within the Outline Panel.

Make precision adjustments with grids, rulers, custom-guides, snap-to-grid, and quick-alignment tools. Scale, without loss of quality, with vectorial zooming.

# data[].attributes.attachment_link.title
Online Mockup, Wireframe & UI Prototyping Tool · Moqups

# data[].attributes.attachment_link.description
Moqups is a streamlined and intuitive web app that helps you create and collaborate on wireframes, mockups, diagrams and prototypes - for any type of project.

# data[].attributes.attachment_link.readable_text
Bring your interaction design to a superior level

Design full interactions of your web and mobile products, from the navigation to the last details of the user experience: advanced interactions, animations, transitions, interactive UI elements. Launch easy to use products and boost user adoption.

# data[].attributes.attachment_link.title
Free prototyping tool for web & mobile apps - Justinmind

# data[].attributes.attachment_link.description
Easily create web and mobile app prototypes and wireframes with Justinmind UI prototyping tool. It's FREE. Start prototyping now!

# data[].attributes.attachment_link.readable_text
An open-source GUI prototyping tool that's available for ALL platforms.

Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms.

The latest stable version of Pencil is 3.1.1 which contains stability fixes and many new features. More details can be found in the release notes.

Project News

Jan 1, 2023 Pencil 3.1.1 is released released.

Oct 19, 2019 Pencil 3.1.0 is released released.

Jun 27, 2017 Pencil 3.0.4 is released released.

Jun 06, 2017 Pencil 3.0.3 is released released.

May 11, 2017 Pencil 3.0.2 is released released.

Feb 20, 2017 Pencil 3.0.0 GA is now released.

Feb 09, 2017 Pencil 3.0.0 rc2 is available for testing.

November, 2015 Development for the new version of Pencil started.

# data[].attributes.attachment_link.description
Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms. The latest stable version of Pencil is 3.1.1 which contains stability fixes and many new features. More details can be found in the release notes.

# data[].attributes.attachment_link.description
Lucidchart is the intelligent diagramming application where seeing becomes doing. With this intuitive, cloud-based solution, everyone can work visually and collaborate in real time while building flowcharts, mockups, UML diagrams, and more. Sign up for free now.

# data[].attributes.body
https://www.invisionapp.com/

# data[].attributes.attachment_link.readable_text
There is something so natural about collaborating in Freehand. It feels like you're holding a marker, and making ideas happen. I can't imagine doing that in another tool. It captures that human essence of being in person and talking to someone that is right next to you and getting work done together. Especially in today's world when everything is remote. It makes for really organic communication.

# data[].attributes.attachment_link.description
InVision is the online whiteboard and productivity platform powering the future of work. See how InVision Freehand is purpose-built for team collaboration.

# data[].attributes.attachment_link.readable_text
A Mac app for designers to create, team up, prototype, and more.

A web app for everyone else to browse, give feedback, inspect, and handoff - in any browser.

A complete design platform, made by a sustainable indie company since 2010.

# data[].attributes.attachment_link.description
Sketch is the all-in-one platform for digital design - with collaborative design tools, prototyping and developer handoff. Get started for free.

# data[].attributes.body
Een extra checklist FO!

# data[].attributes.body
Een extra checklist TO!

# data[].attributes.body
Template (SD) V3.1 (NEW)