WEB3 - HTML5 - CSS3, frameworks en CMS systemen

Intro
 Mededelingen
 Overzicht van doelstellingen en competenties.
 Lijst software en webtools

Hier ons gezamelijke overzicht wat betreft alle website builder tools die we besproken hebben tijdens de lessen. Er wordt van je verwacht dat je kennis hebt van alle genoemde tools en software en dat je een aantal erg goed weet te gebruiken en ze allemaal een beetje kan gebruiken.

 Extra: wat wil jij ontwikkelen?

Heb jezelf een idee om iets te ontwikkelen, dan kan je dat hier aangeven. Bedenk zelf even een titel, zoek URL waar meer info te vinden is en geef een beschrijving van de eventuele opdracht. Je kan hier ook heengaan om een opdracht uit te voeren die iemand anders heeft ingediend. Het indienen + uitvoeren telt mee bij beoordeling van de opdrachten binnen webmaster-college.nl

 CMS in Bootstrap - Frontend - video's

Hierbij de video's zoals die in de les behandeld worden. Je mag ze gebruiken om vooruit te werken.

 Applicatie ontwikkeling - IONIC.io

Zoals aangegeven wil ik tijd inruimen aan het einde van de lessen voor de studenten om te werken aan applicatie ontwikkeling. Hiertoe zullen verschillende tools en software worden geïntroduceerd. Van de student wordt verwacht dat hij de gesproken software kent en vragen hierover zullen terugkomen op de eindtoets. De student mag zelf kiezen welke tool hij gebruikt om een applicatie voor zijn portfolio te ontwikkelen. 

 Actualiteit en Applicatie Ontwikkeling

Hier ene overzicht van actuele gebeurtenissen die verband houden met het vak van Applicatie Ontwikkelaar. Studenten mogen ook zelf actualiteiten inbrengen en hier doorgeven. 

Week 1

Deze eerste week van blok 3 aandacht voor:

- eindtoets web2 - de goede antwoorden

- opfrissen CSS kennis - test (eerste cijfer)

- Joomla

- FTP opties (voor live App testing)

Verder wordt de werkwijze van blok 3 uitgelegd. Er wordt nu nog meer aandacht gegeven aan jou "produceren" - je werkt gedurende het hele blok aan een persoonlijk portfolio van applicaties. Klinkt ingewikkeld maar elke week zal ik software introduceren die jou leven makkelijker zal maken en die jou een boost zullen geven in je carrière als Applicatie Ontwikkelaar.

 Checklist: week 1
 Vervolg WEB

Eerste week na blok 2 en na de afronding van WEB2. We weten wie geslaagd is en wie niet. We geven aandacht aan nieuwe planning en gewenste werkwijze. Deze week beginnen we met een samenvatting van de onderwerpen uit WEB 2 waarbij we natuurlijk ook aandacht geven aan de eindtoets en de (goede) antwoorden. Mogelijk starten we met een Kahoot om te kijken wie er nog "up to date" is. 

 Test 1: CSS

Deze test mag je één keer doen en dan krijg je direct een cijfer. Je krijgt een half uur. Wil je oefenen? Alle vragen en antwoorden vind je op W3schools onder de CSS tutorial.

Succes.

 Opdracht 1: Maak 2 meerkeuze vragen over CSS

Als het goed is heb je net de "CSS test" gedaan met daarin 25 meerkeuze vragen over gebruik CSS. Nu ga je zelf twee vragen ontwerpen en die vragen moeten er als volgt uitzien:

Vraag: wat is de wie hoe hoplkey van css? 

A. antwoord 1

B. antwoord 2

C. antwoord 3

D. antwoord 4

Je vragen worden beoordeeld en je krijgt hier een cijfer voor (1 - 10).

 Opdracht 2: FTP verbinding vanaf school

De opdracht en uitdaging is om een toegang te krijgen vanaf de school locatie tot een externe server (hosting) zodat je jou web applicaties en ook je php applicaties online kan testen. Tijdens Web1 hebben we dit geprobeerd en bleken we alleen via VPN FTP toegang te kunnen krijgen. Mocht je dat lukken, dan kan je de opdracht hiermee afronden. Mocht dit niet lukken dan zijn dit de andere mogelijkheden:

- open een gratis account en hosting account bij hostinger.nl en gebruik de bestandsmanager binnen hun hostingpanel

- probeer de filemanager binnen je studenten.ga account (accounts zijn hersteld)

Zorg ervoor dat je dit volgende week werkende hebt gekregen. Docent zal langskomen om te kijken of dit onderdeel afgevinkt kan worden. Krijg je de FTP verbinding voor elkaar tijdens deze week 1, dan krijg je daar 10 punten voor. Lukt dit op maandag week 2, dan krijg je 7 punten, lukt het pas op woensdag, dan krijg je 5 punten. Daarna kan je hier geen punten mee voor verdienen. 

 Opdracht 3: maak extra agenda aan in Google Calendar

Zorg dat je een google account hebt, ga naar calendar.google.com en maak een nieuwe agenda aan en geef die de naam: Web3-voornaam (je eigen voornaam dus) en deel die agenda met [email protected] - Dit is stap 1 wat betreft het werken in de cloud.

Stap 2: begin met aanmaken van taken en afspraken binnen deze agenda en maak zo een persoonlijke planning voor het vak Web3. Je kan ook de planning uit webmaster-college.nl exporteren en imorteren in deze nieuwe agenda. 

Op het moment dat je deze agenda deelt met [email protected] , krijg ik vanzelf een melding en kan ik dit onderdeel voor je afvinken. Krijg je dit voor elkaar tijdens deze week 1, dan krijg je daar 10 punten voor. Lukt dit op maandag week 2, dan krijg je 7 punten, lukt het pas op woensdag, dan krijg je 5 punten. Daarna kan je hier geen punten mee voor verdienen. 

 Opdracht 4: portfolio in Joomla

Een mogelijkheid om in de cloud samen te werken , is het gebruik van een CMS, een "Content Management System". Zo'n systeem biedt je de mogelijkheid om content te publiceren en toegankelijk te maken voor anderen om mee te kijken of om mee te helpen te ontwikkelen. De meest populaire CMS ter wereld is Wordpress. In Nederland is Joomla een zeer populaire CMS. Beide systemen bieden te mogelijkheid om snel te starten zonder dat je eerst iets hoeft te installeren en zonder dat je hosting nodig hebt. Natuurlijk zijn de mogelijkheden dan wel beperkt en zal je ook moeten leren om een CMS te installeren op eigen hosting ruimte. 

Maar de opdracht van vandaag is: maak een account aan op joomla.com en start een nieuwe website en publiceer je eerste content op de voorpagina. 

Stuur vervolgens de URL van je Joomla website via deze opdracht op. Krijg je dit voor elkaar tijdens deze week 1, dan krijg je daar  (max)10 punten voor. Lukt dit op maandag week 2, dan krijg je (max) 7 punten, lukt het pas op woensdag, dan krijg je (max) 5 punten. Daarna kan je hier geen punten mee voor verdienen. 

Week 2

Vorige week heb je een eerste kennismaking gehad met javascript. Deze week:

- oefenen en test javascript

- uitwerken bootstrap frontend

- kennismaking Wordpress en Joomla

 Checklist week 2
 Inleiding Javascript

Deze week maak je kennis met javascript. We zullen alleen de basis behandelen zodat je niet helemaal onbekend zult zijn met javascript. Doorloop deze les en geef antwoord op de vragen. Deze les start op maandag 20 februari en antwoorden kunnen tot vrijdag 24 februari worden ingediend. Daarna niet meer. 

Week 3

De voorjaarsvakantie is weer voorbij. Deze week werk je verder aan:

- installatie standalone Wordpress of Joomla website

- je portfolio aan applicaties

 Project: Bootstrap website van scratch

Tijdens Web2 hebben we even aandacht gegeven met het werken met Bootstrap en gebruik van templates. Nu gaan we een stapje verder en ga je een website bouwen in Bootstrap zonder gebruik te maken van een template. Je zult ontdekken hoe je snel styling aan een website kan geven. Dit project loopt gelijk op met het project in PHP waar je een CMS bouwt in PHP. Deze Bootstrap website is de frontend van je CMS.

 Opdracht 5: nieuwe CSS en Javascript kennis - deel 1 (week2)
 Opdracht 6: nieuwe CSS en Javascript kennis - deel 2 (week3)

Dit is het vervolg van de opdracht die we in week 2 klassikaal hebben gemaakt (zie hierboven). Let op en schrijf mee. Opnieuw moet je hier de url opsturen waaronder ik je app kan bekijken. De meesten hebben hiervoor een gratis account bij hostinger.nl.

 Uitwerking opdracht 5 en 6: Video's
Week 4
 Vraag: Werken in de Cloud, wat is dat?

Cloudwerken, werken in de Cloud, elke dag hebben we er mee te maken en we gaan er al snel vanuit dat we allemaal begrijpen wat we er mee bedoelen. Maar wat is het? Probeer hier een zo uitgebreid mogelijk antwoord te geven. Als je tekst kopieert van het internet, dan moet je de link daargeven waar de tekst te vinden is. Ik zie graag een eigen en unieke uitleg van je die voor ons allemaal begrijpelijk is. Maar zoek wel op internet naar informatie voordat je antwoord geeft. Je antwoord moet tenminste 150 woorden bevatten. Je mag je antwoord hier intypen maar je mag ook een Word doc toesturen met daarin je antwoord. 

 Opdracht 7: Stormboard

Stormboard.com is een voorbeeld van een Cloudapplicatie. Zoals aangegeven, wordt er elke week wat aandacht gegeven aan het werken in de Cloud. Je Google Agenda en het delen hiervan, is een ander voorbeeld van Cloudwerken. Ook je Joomla site en het werken binnen webmaster-college.nl zijn voorbeelden van werken in de Cloud. (Waarom eigenlijk? Dat lijkt me een goede vraag voor de eindtoets). 

Deze week starten we met Stormboard.com - Opdracht voor deze week:

- account aanmaken op stormboard.com en je stormboard openen die de docent met jou heeft gedeeld.

- opdrachten uitwerken zoals de docent op dit stormboard heeft gepubliceerd. 

Uiteindelijk moet je kunnen uitleggen hoe stormboard.com werkt, wat je er mee kan doen en binnen welke situaties er gewerkt wordt met stormboard.com - Hier hoef je verder niets in te sturen omdat de docent mee kan kijken op jou privé stormboard en je daarvoor een beoordeling zult krijgen. 

 Opdracht 8: CMS in Bootstrap deel 1 tot en met 3
 Test 2: Bootstrap deel 1

Hierbij een paar vragen naar aanleiding van de video's over het bouwen van een CMS in Bootstrap. Maak deze test nadat je de eerste 3 video's hebt bekeken en hebt uitgewerkt.

 Opdracht 9: Schrijf je in op sololearn.com voor de cursus CSS (als je dat nog niet hebt gedaan) en voor de cursus Javascript.

Deze week 3 een eerste beoordeling. Probeer in ieder geval voor beide cursussen 80XP te halen. 

10 punten = woensdagochtend 15 maart 80 XP voor beide cursussen. Stuur hier de URL naar je profiel op sololearn.com zodat ik je voortgang kan beoordelen. 


Week 5
 Opdracht 10: Stormboard deel 2

Een studie uitgevoerd onder deelnemers in 5 gescheiden groepen met de volgende taken:

  • Deelnemers in groep 1 werden simpelweg gevraagd na te denken over hun doelen.
  • Groep 2 werd gevraagd om hun doelen op te schrijven.
  • Groep 3 werd gevraagd om hun doelen en actie stappen op te schrijven.
  • Groep 4 werd gevraagd om hetzelfde als groep 3 te doen, en vervolgens de informatie te sturen naar een vriend voor verantwoording.
  • Groep 5 stuurde ook hun doelen en actie stappen naar een vriend en moesten wekelijkse voortgangsrapportage te sturen.

Aan het eind van de 4 weken studie hebben deelnemers van groep 4 33% meer uitgevoerd en groep 5 42% meer van hun doelen bereikt in vergelijking tot groep 1.

Maak in Stormboard een nieuwe "Storm" aan en kies een template in de categorie "Goal Setting and Productivity" en kies de template "Turn Goals into Daily Habits" en deel deze storm met "[email protected]" maar ook met een medestudent. Vul je Storm met tenminste 1 doelstelling voor Web3 en geef aan hoe je die doelstelling denkt te bereiken en wat je daarvoor als "daily habits" nodig hebt. 

 Opdracht 12: Installeren Joomla op webhost
 Opdracht 13: vervolg CMS in Bootstrap - deel 4 en 5
 Test 3: Bootstrap deel 2

Maak deze test nadat je video deel 4 tot en met 7 hebt bekeken en hebt uitgewerkt binnen het CMS project. 

Week 6
 Les: werken in de Cloud

Deze les is de voorbereiding op jou projectmatig werken in de Cloud. De bedoeling is dat je de komende 3 weken samenwerkt in de Cloud aan de ontwikkeling van een applicatie en aan de uitwerking van opdrachten uit www.webmaster-college.nl 

 Opdracht 14: werken in de Cloud deel 1

De afgelopen weken is er tijdens elke les aandacht gegeven aan werken in de Cloud. Zo heb je even kennis gemaakt met mogelijkheden als: Google Apps, Stormboard, Slack, Joomla.com, Cloud9, Codeanywhere en werken via een webhost. Deze 3 weken (week 6,7 en 8) van blok 3 ga je samenwerken in de Cloud met medestudenten en de docent om je opdrachten voor Web3 uit te voeren. 

Deze week:

  1. Korte samenvatting van mogelijkheden wat betreft "Werken in de Cloud".
  2. Je kiest met welke Cloudsystemen je gaat werken. Jullie Cloudsysteem is een pakket van Cloudtools. Zie uitleg hieronder. 
  3. Je laat via deze opdracht weten wat je keus is (wat is jullie "pakket" van Cloudtools waar je mee gaat werken).
  4. Je voegt je medestudenten en de docent toe aan je Cloud omgeving (email: [email protected]). 
Kenmerken van jullie Cloudsysteem: 

  • a. optie om een gezamenlijke planning op te stellen.
  • b. mogelijkheid om als team, in de Cloud, een Applicatie(*) te bouwen.
  • c. de mogelijkheid als team online, live te communiceren.
  • d. mogelijkheid van "Wireframing". 

Dit zal betekenen dat je meerdere Cloudsystemen nodig zult hebben. Bijvoorbeeld: a. Google calendar + b. Ionic + c. Slack + d. Draw.io

(*) Voorwaarden van de te bouwen Applicatie: 

  • Applicatie moet gebouwd zijn in HTML5 - CSS - Javascript en eventueel PHP - MYSQL.
  • Applicatie moet responsive zijn.
  • Applicatie moet kunnen worden geëxporteerd uit de Cloud omgeving en worden geïnstalleerd op een willekeurige webhost. 
  • De code van de Applicatie moet geheel toegankelijk zijn en aan te passen zijn (door jullie). 
Vervolg:

De docent is jullie klant. Via jullie gekozen Cloudsysteem onderhouden jullie contact met de klant en bespreek je de wensen van de klant en jullie oplossingen. Daarbij worden jullie aangemoedigd om de klant van advies te voorzien en uit te gaan van jullie eigen kennis, kunde en motivatie. Dus als je bijvoorbeeld al eerder een applicatie hebt gemaakt, dan ben je hierbij uitgenodigd om die aan de klant (de docent) aan te bieden. Vergeet niet: jullie docent is dewebmeester.nl heeft veel verschillende klanten die héél véél wensen kennen. Jullie worden beoordeeld op de "marktwaarde" van jullie Applicatie en op de kwaliteit van het klantcontact.

 Opdracht 15: werken met Joomla

Deze les bevat enkele vragen en opdrachten over het werken met Joomla. 

 Opdracht 16: Sololearn CSS - 120XP

Opnieuw een kans om te laten zien hoe ver je bent bij Sololearn wat betreft de cursus CSS. Deze week is de opdracht om minstens 120XP te scoren voor de cursus CSS. Stuur als antwoord opnieuw de link naar je profiel.

 Opdracht 17: vervolg CMS in Bootstrap - deel 6 en 7
 Test 4: Javascript

Let op: je krijg maar één kans om deze test te doen en je hebt maar 30 minuten. Het is dus belangrijk dat je jezelf goed voorbereid. Dat kan je doen door de tutorial Javascript te volgen op W3Schools en de Javascript quiz te doen van de W3Schools. Dat zijn namelijk dezelfde vragen.

Week 7
 Opdracht 18: Start - ontwikkel WebApp voor klant

Tijdens Web3 heb je met 2 systemen leren werken. Je hebt een CMS gebouwd in Bootstrap en je hebt kennis gemaakt met Joomla. Om echt goed met deze systemen te leren werken, heb je een klant nodig. Dat is de docent. Verder heb je tijdens Web3 een begin gemaakt met het "werken in de Cloud" en dat is het nieuwe werken en daar zal je aan moeten wennen als je het vak van Applicatie Ontwikkelaar serieus wilt nemen. 

Deze opdracht gaat je helpen om de systemen Bootstrap en / of Joomla beter te leren kennen en om te leren werken in de Cloud. Je gaat samen met je teamgenoot een webapplicatie ontwikkelen en de enige info die jullie op dit moment hebben is: Er is een klant die contact heeft opgenomen met de vraag of jullie op korte termijn een website willen bouwen. De klant is een vereniging en de leden van de vereniging willen samen de inhoud van de website kunnen beheren. 

Stap 1: Neem contact op met de klant (docent) via het Cloud systeem dat je vorige week hebt gekozen en vraag de klant wat de wensen zijn. 

Vervolgens krijg je (direct) een reactie en enkele vragen van de klant waar je zo snel mogelijk op moet reageren (de klant heeft altijd haast). Jullie worden bij deze opdracht beoordeeld op snelheid, vriendelijkheid en kennis. 

In te sturen:

Je stuurt hier "chat log" toe als tekst of als bestand ter beoordeling. 

 Opdracht 19: Haal minstens 180XP binnen Sololearn voor cursus CSS

Deze week moet je 180XP hebben gehaald voor de cursus CSS binnen Sololearn. Stuur hier omnieuw de URL naar je profiel toe te beoordeling.

Week 8
 Wireframing, Mockup en Protoyping systemen

Hierbij een overzicht van software en online systemen waarmee je een Wireframe, Mockup of Prototype kan maken. Omdat je eerste zelf in de les hiervoor moet uitzoeken welke systemen hiervoor bestaan, krijg je de inhoud van deze pagina pas te zien als je een voldoende voor die les hebt behaald. De inhoud van deze pagina geldt als eindtoets stof. 

 Opdracht 20: maak mockup of wireframe (in de cloud) van een WebApp

Vorige week ben je begonnen met samenwerken in de Cloud. Nu moet je leren te produceren. Een eerste stap is het ontwerp en dat bestaat uit: design en functionaliteit. Na een eerste overleg met de klant moet je de wensen van de klant vertalen in een schets. Deze schets moet online te bekijken zijn door de klant en de klant moet opmerkingen kunnen plaatsen bij het ontwerp of eventueel zelfs online aanpassingen kunnen maken aan het ontwerp. Zo ben je samen met de klant aan het werk in de Cloud. 

Bij deze opdracht stuur je de link op (URL) naar het online (eerste) ontwerp en voeg je de klant ([email protected]) toe zodat deze opmerkingen kan plaatsen. 

 Opdracht 21: bouw de website zoals afgesproken met de klant.

Via Slack heb je de eerste afspraken gemaakt met de klant. Daarna heb je een mockup of wireframe of mogelijk een prototype gemaakt. Bouw nu de website zelf. Je gaat dit doen in Joomla na een korte instructie over de inrichting en gebruik van deze CMS. Stuur hier de link naar de live website in ter beoordeling. 

 Opdracht 22: Haal minstens 250XP voor de cursus CSS binnen Sololearn

Haal minsten 250XP binnen Sololearn en stuur hierbij de link naar je profiel ter beoordeling. 

 Test: Joomla voor standaard gebruikers

Deze test mag je maar één maal proberen en je krijgt maar 30 minuten om de test te maken. Dat is weinig. Om dit op te lossen, zie je hieronder ook een offline versie van deze zelfde test. Die krijg je op papier en mag je samen doen. Daarbij mag je zoveel tijd gebruiken als je wilt. Dus gebruik de offline test als oefening en maak daarna deze online test. 

 Offline test: Joomla voor standaard gebruikers

Contact informatie

Samen met ons een MKB of ZZP website pakket samenstellen?

Kom dan langs op ons kantoor in Wageningen.

Spiderman Webdesign - dewebmeester.nl

Hanenhof

Costerweg 1D

6702AA, Wageningen

Tel.: 085 888 58 69

Schrijf u in voor de maandelijkse nieuwsbrief

Schrijf u in voor de nieuwsbrief en ontvang elke maand een gratis tool, software of webcontent en blijf op de hoogte wat betreft ontwikkelingen binnen MKB wat betreft websites en applicaties.

Door in te schrijven stemt u in met ons
Privacy beleid.
HTTPS, SSL en GDPR (AVG)

Is uw website al beveiligd met een SSL certificaat? Kunnen uw bezoekers uw website vertrouwen? Zorg dat uw website zonder fouten zichtbaar is via https en laat dit regelen voor 40 euro per website door dewebmeester.nl
GDPR proof? Privacy reglement en cookie meldingen geïntegreerd in uw website? Laat ook dit regelen door dewebmeester.nl

ssl secure website