WEB2 - HTML - CSS en Web Development

Intro
 Mededelingen
 Doelstellingen WEB2
 HTML: wat je moet kennen.

Hierbij een "Cheat Sheet" wat betreft HTML. Aan het einde van blok 2 (Web 2) wordt er van je verwacht dat je de genoemde HTML tags kent en weet te gebruiken.

HTML Cheat Sheet - overzicht van HTML tags

Actualiteit

Bij de start van de les heeft de docent een paar keer aandacht gegeven aan het nieuws als dat te maken had met jullie opleiding tot Applicatie Ontwikkelaar. Hieronder een overzicht.

 Overzicht van onderwerpen uit actualiteit

Blader door deze les heen en lees even na welke onderwerpen er in de klas behandeld zijn. Je kan één of twee vragen verwachten over de genoemde onderwerpen tijdens de eindtoets.

Week 1 - Vervolg WEB1
 Doelstellingen van de week en werkwijze
Houdt dit overzicht bij de hand deze week om zelf bij te kunnen houden of je de doelstellingen haalt en of je alle opdrachten hebt afgerond.
 Opdracht 1: Kruiswoord puzzel: HTML TAGS

Download dit Word bestand - het betreft een kruiswoord puzzel om je HTML kennis op te frissen.

 Opdracht 2: Vind alle HTML fouten binnen HTML pagina

Dit html bestand bevat 35 fouten. Plak de tekst in een Word document en markeer alle fouten en geef aan hoe de html er uit ziet zonder fouten en stuur dit Word document aan me toe.

 Opdracht 3: Methoden van HTML validatie

Beschrijf methoden die gebruikt kunnen worden om HTML te valideren. Er wordt aandacht aangegeven binnen de les. Zorg dat je aantekeningen maakt en die aantekeningen kan je hier gebruiken als antwoord.

 Handleiding opdracht "Online Bib" - stap 1 tot en met 8

Tijdens blok 1 (WEB1) heb je gewerkt aan een "Online Bibliotheek" van html tags. Dat is het begin van een grotere opdracht. Stap voor stap maak je gedurende WEB 1, 2, 3 en 4 een eigen website en we starten met de basis: HTML in Notepad++ - Hierbij de handleiding wat betreft de stappen 1 tot en met 8.

 Handleiding "Online Bib" - stap 9
 Opdracht 4: Leg uit waarom het nodig is met CSS te werken

Tot nu toe hebben we binnen opdracht "Online Bibliotheek" alleen met HTML gewerkt. Deze week moet je aanpassingen maken om alle pagina's een andere uiterlijk te geven. Leg uit waarom het beter is om met CSS te werken.

 Afmaken in week 1
Week 2


 Checklist: afmaken in week 2
 Handleiding OnlineBib - stap 10 tot en met 13

Hierbij stap 10 tot en met 13 van je website project "OnlineBib". Door deze stappen uit te werken leer je gebruik te maken van "snippets" en om HTML-snippets op de juiste manier te plaatsen binnen een HTML pagina.

 Horizontaal CSS menu - bronbestanden

Hierbij de bronbestanden die je nodig hebt om stap 12 uit de handleiding "OnlineBib" uit te kunnen voeren.

 Opdracht 1: stuur nieuwe versie OnlineBib

Ook deze week werken we verder aan project OnlineBib. Maandag hebben we gewerkt aan plaatsen van horizontaal CSS menu. Verder wordt er verwacht dat je een lijstje Webtools en Bronnen hebt en dat die via je nieuwe horizontale menu gevonden kunnen worden. Je leert werken met CSS en alle stijl van je OnlineBib (breedte kolommen, kleuren e.a.) moet je nu definieren via een externe CSS file. Werk deze week al deze zaken uit en stuur vóór vrijdagavond (alleen) de index.html en css file aan mij toe.

 Opdracht 2: maak account bij Sololearn.com en schrijf je in voor de HTML cursus

Tijdens het vorige blok hebben we gebruik gemaakt van codeacademy.com - Naast Cadeacademy heeft het platform Sololearn veel aandacht gekregen onder coders wereldwijd. Het is goed dat je als Applicatie Ontwikkelaar op de hoogte bent hiervan. Het platform van Sololearn biedt veel opties om competitie aan te gaan met andere coders en om code te oefenen. Jullie docent heeft met 215 XP, positie 48.502 bereikt. Opdracht deze week is om 100 XP te halen. Je hoeft niets in te leveren. Maandag kom ik langs om te controleren. Uitleg van dit alles krijg je in de klas. Je verzameld tijdens deze opdracht ook punten per groep.

 Opdracht 3: Lijst van Webtools en Bronnen (afbeeldingen, templates, snippets).

Tijdens de les hebben jullie per groepje gewerkt aan het opstellen van een lijst met Webtools. Deze lijst maak je verder af en stuur je aan me toe. Daarbij maak je een extra lijst met "bronnen". Dat zijn webpagina's waar je afbeeldingen, video's, templates en snippets kan vinden om te gebruiken binnen een website project. Deze twee lijstjes stuur je deze week naar de docent. Vergeet daarbij niet om ook de URL te vermelden en een korte beschrijving per item.

Dus je maakt een tabel met 3 kolommen:


Naam Korte beschrijving
URL
Webtools Colorpicker Bla die de okanej oejjeii o on hjklkln bla bla
http://www.ditis een link.nl
webtool 2
bla bla bla
https://
webtool 3
retteketet enzo
http://
Bronnen FFiles Voor HTML en CSS snippets
http://www.ffiles.com
   Bron 2
   http://




Week 3
 Checklist week 3: Omzetten HTML styling naar CSS styling
 Bronnen voor web development

Vorige week hebben we een lijstje gemaakt met "bronnen" die we kunnen gebruiken bij het ontwikkelen van een website. We gaan hier nog wat serieuzer mee bezig en verzamelen hier gezamenlijk een lijst met bronnen. Doe mee en voeg een aantal bronnen toe.

 Webtools voor webdevelopment

Hier de lijst met webtools die jullie zelf samenstellen. Plaats zelf een aantal webtools inclusief link naar de website van die webtool, en verdien ook zelf een aantal punten.

 Introductie CSS - powerpoint

Deze korte powerpoint presentatie zal in de klas worden getoond om enkele basis begrippen van CSS uit te leggen. De inhoud zal terugkomen in de eindtoets van dit blok.

CSS styling door Framework

De OnlineBib heeft CSS styling gekregen. Daarbij moeten we ook de table omzetten naar CSS styling via gebruik van <div> tags om zo een webpagina structuur (layout) te krijgen via CSS. Mocht dit lukken deze week dan gaan we oefenen met het werken met een Framework wat we kunnen zien als een basis structuur van een webpagina met "voorgekauwde" CSS files en styling. Lekker makkelijk?

Week 4
 Opdracht: implementeer Bootstrap of Foundation Framework

Er zijn héél véél html - css frameworks. Het volgende artikel legt goed uit wat een framework is en geeft een lijst met beschikbare frameworks: http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html

Er zijn twee frameworks die ondertussen vrij beroemd zijn geworden en die tegenwoordig boven aan het wensenlijstje van de gemiddelde webdeveloper staan: Bootstrap en Foundation. Per groepje krijg je de opdracht om over één van deze frameworks een korte presentatie te houden. In de les wordt uitgelegd wat hierbij van je verwacht wordt. 

De docent zal aan elk groepje tijd geven om groep te helpen een goede invulling te geven aan de presentatie. Je hoeft hier geen opdracht in te sturen. Cijfers worden toegekend na presentatie. Wat je wel moet doen is de vragen beantwoorden uit volgende opdracht. 

 Opdracht: 5 vragen over HTML-CSS Frameworks (Bootstrap of Foundation)
 Opdracht: nieuwe versie OnlineBib opsturen met uitwerking CSS

Stuur een nieuwe versie in van je OnlineBib - alleen de index.html file en bijbehorende stylesheet waaruit blijkt dat je alles uit de checklist van Week 3 hebt uitgewerkt.

Week 5

Dit is de laatste schoolweek van 2016. Let op. Alle opdrachten uit week 1 tot en met 4 moeten deze week worden ingeleverd. Dus deze week (week 5) gaan we vooral bezig om openstaande opdrachten af te maken. Dit betekent:

  1. Alle opdrachten uit www.webmaster-college.nl - WEB2
  2. Meest recente versie van OnlineBib waarin CSS is uitgewerkt (checklist uit week 3)
  3. Certificaat en punten uit www.sololearn.com
  4. Meest recente versie van OnlineBib waarin HTML-CSS Framework is gebruikt (Bootstrap of Foundation)
 Opdracht: meest recente versie OnlineBib waarbij gebruik is gemaakt van Framework

In week 3 en 4 is aandacht gegeven aan de Frameworks Bootstrap en Foundation. Ook is aangegeven hoe je gemakkelijk een bestaande HTML pagina kan ombouwen naar een Framework. Kies zelf welk Framework je gebruikt, Bootstrap of Foundation, en bouw je OnlineBib om naar dit Framework. Vraag naar de makkelijke methode aan de docent.

Week 6 (Eerste week 2017)

Week 6 is de eerste week na de kerstvakantie en begint 9 januari. Dan begint dus de tweede helft van het tweede blok. Jullie krijigen als eerste je cijfer voor Web2 wat betreft weken 1 tot en met 5. In week 6 beginnen we met nieuwe lesstof en nieuwe opdrachten. Week 10 is de bufferweek en dan krijgen jullie de eindtoets. We hebben dus nog 4 weken tot de eindtoets.
Tijdens deze 4 weken in ieder geval aandacht voor: HTML formulieren. Verder ga je deze 4 weken ook je certificaat CSS halen bij Sololearn.

 Update - week 6 - laatste gedeelte tweede blok
Jullie hebben in week 1 tot en met 5 gewerkt aan enkele opdrachten. Deadline voor inleveren was de kerstvakantie. Veel opdrachten zijn niet ingeleverd en velen van jullie halen dan ook geen voldoende voor WEB2. Deze laatste weken kan je dat goedmaken door de opdrachten uit weken 6 tot en met 9 wel op tijd in te leveren.
 6.1 Video opdracht webdevelopment deel 1

Hierbij een korte animatie video over Webdevelopment. Tijdens de eerste les van week 6 krijg je een test die je twee aan twee moet maken en waarbij je deze video nodig hebt.

 Vragen Video-opdracht Webdevelopment deel 1

De vragen in deze test worden in week 6 (op papier) uitgedeeld en moeten in tweetallen beantwoord worden.

 6.2 Video opdracht webdevelopment deel 2
 Vragen test Videoopdracht Webdevelopment deel 2

Deze vragen krijgen jullie op papier uitgedeeld en moeten op papier worden beantwoord. Na de beoordeling moeten antwoorden hier worden ingevuld.

 Opdracht: kies een product uit het Webdesigner Magazine dat je wilt maken.

In de klas liggen bijna 50 exemplaren van het Webdesigner Magazine. Elk tijdschrift beschrijft hoe je (mooie) Web-producten kan maken. Je mag zelf kiezen welk Web-product je wilt gaan maken. Dit kunnen CSS toepassingen zijn maak ook complete mobiele applicaties. Je mag een makkelijk opdracht uitkiezen of een moeilijke. Deze les maak je een keuze en presenteer je de keuze aan de klas. Daarbij geef je antwoord op de volgende vragen:

1) Wat is het product dat je gaat maken?

2) Welke techniek ga je toepassen?

3) Wat verwacht je er van te leren?

Schrijf je antwoorden hier op.

Week 7


 HTML formulieren

Het onderwerp "Formulieren" is belangrijk binnen website ontwikkeling, applicatie ontwikkeling en HTML en HTML5 geeft daar dan ook veel aandacht aan. Wij ook. De komende drie weken zullen we aandacht aan dit thema geven.

 Opdracht: maak een HTML formulier

Vrijwel elke website heeft één of meerdere HTML formulieren. Formulieren zijn er in veel verschillende soorten en maten. Gedurende week 7 tot en met 9 werk je aan een HTML formulier.

Iedereen maakt een ander HTML formulier. Je krijgt een kaartje met daarop het formulier dat je moet gaan maken. De docent is de klant. Met hem moet je afspreken wat precies de bedoeling is. Je begint het gesprek met de klant met de vraag: "U wilt een ...... formulier. Wat wilt u precies?", waarna gesprek volgt. Schrijf de wensen van de klant op.

Elk formulier moet voldoen aan de volgende eisen:

  1. Minstens 10 invoervelden
  2. Minstens 6 verschillende invoervelden waaronder: radiobuttons, checklist, textarea met wysiwyg editor
  3. (CSS) stijl naar wensen klant
  4. Placeholders in invulvelden
  5. Embedded in een extra pagina van je OnlineBib (CSS of Bootstrap versie)
  6. Bij versturen formulier moeten gegevens naar een emailadres verstuurd worden

Je hoeft het formulier zelf niet in te sturen omdat je het resultaat aan de klant (docent) gaat presenteren in de klas. Zorg dat het formulier vóór de woensdag van week 9 af is.

Je stuurt hier wel een korte beschrijving op van het interview. Vervolgens maakt docent aantekeningen bij deze notities zodat je precies weet wat er van je verwacht wordt bij deze opdracht.

 Powerpoint Basis HTML formulieren

Hierbij de powerpoint presentatie met informatie die je nodig hebt om de opdracht "HTML-formulier" te kunnen uitvoeren.

 Test: HTML Formulieren - basis
Week 8


 Kennis van Website builders

in blok 1 hebben we (te weinig) aandacht gegeven aan mogelijkheden om een website te bouwen. Dit zijn de mogelijkheden:

  1. Via Notepad++ (od andere tekst editor)
  2. Via gebruik html / css template
  3. Gebruik (bootstrap - foundation) Framework
  4. Browser based website builders - extern gehost (Weebly - Wix - via hosting account - Wordpress - Joomla)
  5. Browser based website builders - met export functie (self hosted)
  6. Website software op computer (Xara - Magix - Pinegrow - Serif - Mobirise)
  7. Via CMS - self hosted (Wordpress - Joomla - Drupal)

Deze week opnieuw aandacht voor deze mogelijkheden.

 Inzicht in Kwalificatie Dossier

Het is belangrijk dat je inzicht hebt in het "waarom" van de verschillende opdrachten. Opdrachten zijn altijd gekoppeld aan een onderdeel uit je kwalificatie dossier voor Applicatie ontwikkelaar. Deze week wat aandacht hiervoor.

 Video: Website Builders

Een korte video naar aanleiding van de Powerpoint Presentatie die tijdens de les getoond zal worden met als thema "Website Builders".

 Test: soorten en kenmerken van Website Builders

Let op tijdens de powerpoint presentatie en maak aantekeningen. Deze aantekeningen zijn de antwoorden op de vragen uit deze test.

Week 10 - eindtoets
Vragen en opdrachten in de eindtoets kunnen gaan over alles dat aandacht heeft gekregen binnen blok 2. Het is vrij eenvoudig om te achterhalen wat dit allemaal is omdat elke opdracht en elke uitleg staat beschreven binnen de cursus WEB2 binnen webmaster-college.nl - Een overzicht hiervan vind je via de checklist die boven de cursus gepubliceerd staat.
 Opdracht uit Webdesigner Magazine: beschrijf je leerproces
Beschrijf alles wat je geleerd hebt bij het maken van de opdracht uit Webdesigner Magazine. Geef daarbij in ieder geval aandacht aan het volgende:
1) Wat was moeilijk, welke fouten heb je gemaakt, wat werkte niet en heb je toch gerepareerd?

2) Zoveel mogelijk voorbeelden
3) Code die jij handig vind (snippets) en die jij belangrijk vind om te onthouden. Leg ook kort uit waarom je die code vaker nodig denkt te hebben. ("Het is de grootste dwaasheid dingen te leren die men later weer moet vergeten." Erasmus)
 Certificaat: Webdevelopment 2 - kennis van HTML, CSS en Frameworks

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