Leerdoelen
- Kennis maken
- Je begrijpt wat Front-End Development is en kent de rol van FED binnen het curriculum
- Je kent de website van de vakgroep FED
- Je kent de verschillen tussen de lessen en de workshops
- Je kent de leerdoelen, de inhoud en de beoordelingscriteria voor het komend kwartaal (hebt de modulewijzer gelezen)
- Je kent de huisregels en gedraagt je hiernaar
- Je kan het draadloos netwerk van de hogeschool gebruiken (eduroam)
- Je kent de verschillen tussen soorten netwerken
- Je begrijpt de werking van een browser en hoe een browser met servers op internet communiceert
- Je weet wat een server is en doet
- Je kent het World Wide Web en andere delen van het internet
- Je kunt met FTP bestanden op je webspace op de CMD studenten server (student.cmd.hro.nl) plaatsen
- Je kent de syntaxis van een URI
Lesplan
Kennismaken
- Hoe heet je?
- Wat vind je belangrijk/leuk?
- Wat is je vooropleiding?
- Wat verwacht je van FED?
Het vak: Front-End Development
- Wat doen we bij FED en hoe past dat binnen het totale
programma?
- lesprogramma jaar 1 (en 2) (zie studiegids)
- de vakgroepwebsite: http://vakgroep.cmd.hro.nl/2008_2009/fed/
De Modulewijzer
- ieder kwartaal een modulewijzer met daarin:
- werkvormen:
- lessen (theoriegestuurd)
- workshops
- zelfstudie (studielast!, wanneer?)
- literatuur en ICT-bronnen
- leerdoelen en lesinhoud
- opdrachten, beoordelingscriteria en herkansing
- huisregels:
- aanwezigheid
- inleveren
- wat?
- werkend resultaat
- broncode
- documentatie
- waar?
- wanneer?
- wat?
Netwerken
- HRO
- draadloos
- open netwerk: inloggen met je username en password (irritante pop-up)
- eduroam (eenmalig goed instellen): download handleiding op http://hint.hro.nl/page.html?ch=HNT&id=109152 (voor windows en mac OSX 10.4) of http://www.eduroam.si/en/osebni-dostop/navodila-za-povezavo/navodila-za-mac-os-leopard/ (voor OSX 10.5 leopard).
- wordt instabiel bij te intensieve belasting (downloaden)
- je IP-adres wordt geblokkeerd als je p2p (bittorrent) gebruikt over draadloos netwerk, je internetverbinding deelt, etc!
- 8 wallports per lokaal:
- koop zelf snoer van 5 meter
- is sneller en blijft stabiel (bij downloaden)
- draadloos
- fysiek
- LAN
- WAN
- functie:
- intranet
- extranet
- internet
- www
- Clients en Servers
- poorten en protocollen:
- http : 80
- ftp : 21
- Wat gebeurt er als ik een webpagina opvraag?
- Browser
- IP-adres
- DNS
- URI
- URL
- URN
- Webserver
- Hoe publiceer ik op internet?
- FTP programma
- Webserver (provider)
- mappenstructuur
- (domeinnaam registratie)
Verdere informatie:
Wat is programmeren?
Een computer werkt met schakelingen, aan/uit, eenen en nullen (bits), en het aansturen hiervan wordt gedaan door software. De software is zo gemaakt dat deze opdrachten doorgeeft aan de computer in een voor de computer begrijpbare taal, ook wel machinetaal genoemd.
Deze taal is voor de doorsnee mens niet te lezen. Daarom vind er een vertaling plaats. Een computerprogramma wordt in een bepaalde taal geschreven (bijvoorbeeld in C, Java of C#) wat meer is gebaseerd op een taal die de mens begrijpt, zoals engels. Zie het als een draaiboek voor een film. Iemand schrijft het filmscript wat door een regisseur wordt 'vertaald' naar een film. Het hele spul komt op celluloid waarna dit door de projector kan worden getoond. Bij de computer gaat het script door een verwerker (compiler of interpretor) die de boel vertaalt naar machinetaal zodat het resultaat door de computer bijvoorbeeld kan worden getoond op een beeldscherm.
Dit proces wordt ook wel programmeren genoemd. In een bepaalde taal met een bepaalde structuur maak je dus een draaiboek, scenario of script waarbij van te voren is bepaald welke gevolgen een bepaalde aktie heeft. Hier komt ook te term 'scripten' vandaan.
Wat er zoal geprogrammeerd wordt in deze wereld
Windows is ook een programma wat in een bepaalde taal is geprogrammeerd. Windows zorgt er voor dat de computer bestuurd kan worden, daarom wordt het ook wel een besturingsprogramma genoemd. In de computer zitten allerlei devices zoals een videokaart, usb poorten, netwerkaansluitingen, geheugenchips, een harddisk enzovoort. Het aansturen van deze devices wordt door Windows mogelijk gemaakt. Je klikt ergens op (My Computer) en Windows interpreteert die opdracht om vervolgens die opdracht uit te voeren (tonen Explorer met inhoud My Computer)
Ook portable devices zoals een PDA of een telefoon hebben een besturingssysteem. Hoe meer het apparaat kan, hoe geavanceerder het besturingssysteem dus moet zijn. Zo is er Windows Mobile voor Pocket PC's en hebben Nokia telefoons een besturingssysteem van Symbian.
Wat doen we bij FED
Bij FED richten we ons in de eerste 2 jaar vooral op het maken van een prototype van een applicatie. Ook kijken we met name in het eerste jaar naar het maken van webpages. Tools die bij FED gebruikt worden zijn:
- een HTML editor (webiterface, opmaak, interactie)
- Adoobe Flash (animatie, interactie)
- Apache, PHP en MySql (webserver, serverside scripting, database)
- Visio (maken van flowcharts)
Binnen de software maken we onderscheid in diverse takken zoals:
- besturingssoftware (windows, linux, OSX)
- applicatiesoftware (Office, Winamp etc)
- Applicatiesoftware wordt ontwikkeld voor een bepaald platvorm, ofwel besturingssysteem. Zo is de Internet Explorer ontwikkeld voor Windows, is Netscape ooit ontwikkeld voor Linux en is Safari oorspronkelijk ontwikkeld voor apple macintosh.
- scripts (o.a. webapplicaties)
- Kleine programma'tjes die niet rechtstreeks op een besturingssysteem draaien, maar binnen andere applicatiesoftware.
Je kunt een applicatie zien als een toepassing waar je iets mee kunt. Winamp is een applicatie waar je o.a. mediabestanden mee kunt afspelen. De Internet Explorer is een browser programma waar je internet pagina's mee kunt bekijken.
Sommige applicaties zijn platvorm onafhankelijk. Voorbeeld is Photoshop wat op Windows en op Apple platforms draait of FireFox dat op zowel Windows Apple als Linux draait
In het eerste kwartaal zullen we ons richten op het maken van een webpage. In feite is een webpage ook een applicatie, immers je maakt een toepassing voor een bepaald doel. Het is dus mogelijk dat je een applicatie maakt die, om te kunnen draaien, gebruik maakt van een andere applicatie. Immers, een webpagina (yourpage.htm) kun je alleen in een browser (IE) tonen en een browser draait weer in een besturingssysteem (Windows).
In de les behandelen we deze onderdelen en hoe deze tot elkaar in relatie staan. In de komende lessen van deze periode komt elk onderdeel nog eens uitvoerig aanbod. Om het hier niet alleen over te hebben, maar ook meteen een keer toe te passen, bestaat een deel van de les, aan het werken aan opdrachten.
Netwerk en internet
Internet staat voor 'international networking'. Computers 'praten' met elkaar via allerlei verbindingen, zowel via kabels als draadloos.
Dit praten gebeurt in diverse 'talen'. Een taal, zoals wij die kennen als bijvoorbeeld het Nederlands, bestaat uit een aantal woorden die een bepaalde betekenis hebben. Iemand anders die die taal ook kent, kan dus die taal interpreteren, begrijpen. Belangrijk is dat er afspraken zijn waar men zich aan houdt, anders wordt de taal niet goed geinterpreteerd en is er sprake van miscommunicatie.
Via netwerken wordt allerlei informatie uitgewisseld tussen computers via requests. Deze informatiestroom wordt geregeld door allerlei services waarbij informatie verpakt wordt in pakketjes. Een belangrijk protocol wat het verzenden en ontvangen regelt, is TCP/IP, het transmission control protocol / internet protocol.
In ieder pakketje bevindt zich naast de informatie, het IP-adres van de afzender en van de ontvanger. Ook wordt meegegeven via welke computer poort nummer de informatie wordt uitgewisseld. Zo gebruikt FTP (file transfer protocol) bijvoorbeeld standaard poort 20.
Email is ook een manier om gegevens uit te wisselen met andere computers via een netwerk. Hierbij wordt gebruik gemaakt van het post office protocol (POP) en het simple mail transfer protocol (SMTP).
Daarnaast is er het veelgebruikte hypertext transfer protocol (HTTP) om webpagina's in een web browser te kunnen bekijken.
De protocollen draaien als services (zie vorige les) op computers. Hierbij geven protocollen ook informatie aan elkaar door. Voorbeeld: je wilt een bestand op de server van CMD zetten met FTP. Omdat je naar een andere computer wilt, zul je gebruik moeten maken van een netwerk, een soort wegennet. Hier heb je wel toegang voor nodig via een provider. De informatie, het bestand, wordt ingepakt in een pakket, op de manier zoals de transporteur dat graag wil hebben. Op het pakket staat afzender en ontvanger. De verzender (FTP) geeft het door aan de transporteur (TCP/IP). Deze brengt het pakket (via kabelnetwerk of wireless) naar de ontvangende computer. Daar draait de service FTP die het pakketje van TCP/IP via een poortnummer (21) in ontvangst neemt en bepaalde aktie onderneemt.
Wat is het world wide web?
- Het World Wide Web (WWW) wordt ook wel het 'Web' genoemd.
- Het 'Web' is een netwerk van computers, verspreid over de hele wereld
- Alle computers (servers) in het 'Web' zijn verbonden met elkaar.
- De computers gebruiken protocollen om met elkaar te communiceren (waarvan HTTP, TCP/IP, FTP de bekendste zijn)
Hoe werkt het WWW?
- Informatie is opgeslagen in documenten die web pages worden genoemd.
- De webpages zijn opgeslagen op de computers die web servers worden genoemd.
- Een verzameling web pages wordt ookwel een web site genoemd.
- Computers die web pages lezen worden web clients genoemd.
- Web clients bekijken de pagina's met een programma dat een web browser wordt genoemd
- De bekendste en populairste browsers zijn: Internet Explorer, Netscape, Opera, Safari en Firefox van Mozilla.
Oefenopdrachten:
- herfst1 opdracht1 Zorg dat je laptop via 'Eduroam verbinding kan maken met het draadloze netwerk van de HRO
- herfst1 opdracht2 Installeer een FTP programma (bijv. FileZilla (http://filezilla-project.org)) en probeer in te loggen op je persoonlijke studenten account op de cmd studenten server (student.cmd.hro.nl). Hiervoor heb je de inloggegevens nodig uit de brief van de HRO. Het gaat echter om een andere server dan in de brief wordt aangeboden! Maak een text (.txt) bestand en schrijf hierin de tekst 'Hello World'. Plaats deze op je ftp-ruimte. Maak daarna een mappenstructuur aan zodat ik je huiswerk voortaan kan vinden op http://student.cmd.hro.nl/[studnr]/jaar1/herfst/fed/ .
- herfst1 opdracht3 Schrijf een verslag van deze les. Geef daarin aan wat je moeilijk vond en wat je verwacht van de lessen FED. Geef daarnaast aan in hoeverre je al programma's of scripttalen beheerst en hoeveel ervaring je hebt met het maken van bijvoorbeeld websites. Plaats het document dat je hebt geschreven ook online op je website, net zoals de voorgaande opdracht.
- herfst1 opdracht4 Maak een chronologisch overzicht waarin je in het kort de belangrijkste ontwikkelingen op het gebied van internet in kaart brengt.
- herfst1 opdracht5 Geef zo gedetailleerd mogelijk weer wat er gebeurt als je als internetgebruiker via de browser een webpagina van een externe website bekijkt. Welke services komen aan bod? Welke poorten? Welke protocollen? Welke controles vinden er plaats? Wat is de route van de informatie?
- herfst1 opdracht6 Maak een grafische voorstelling van opdracht4. Dit mag in Powerpoint, Flash, Dreamweaver, Word, Photoshop, kortom je bent vrij om de tool te kiezen die jij prettig vind.