Web

Web

Inleiding

Deze website ondersteund de lessen HTML5 en Java scripting zoals die in het eerste jaar van de opleiding ICT bij ROC Landstede worden gegeven. Je vind er met name ondersteunend materiaal, waardoor je hopelijk meer inzicht krijgt in het werken met HTML5 en Java script.

Waar vind je informatie?

een aantal belangrijke achtergrond sites vind je op deze pagina. Deze sites worden ofwel in het boek genoemd, danwel als ondersteuning van de lessen gebruikt.

Text Editors:

Om html, CSS en Java kunnen maken heb je in ieder geval een text editor nodig. Je kun daarvoor natuurlijk gebruik maken van de editor die bij Windows wordt gebruikt, maar er zijn een aantal betere editors gratis op internet te vinden. Hieronder vind je links naar 2 daarvan:

SciTE:

Windows versie: direct downloaden?

de site van het programma voor andere OSen en meer informatie?

 

Notepad++:

Notepad++ site

Overige sites:

http://www.handleidinghtml.nl/

hier vind je een nederlandstalige website met daarop voorbeelden van alle alle HTML elementen. IIeder element wordt uitvoerig besproken en voorzien van voorbeelden. Gebruik deze site daarom als naslagwerk als je tijdens het werken met HTML niet meer weet hoe een element precies werkt en welke parameters er kunnen worden gebruikt.

 

http://www.thenewboston.org/tutorials.php

Op deze website vind je een groot aantal video's met uitleg over o.a. HTML en Java scripting. Daarnaast bevat deze website honderden video's over programmeren in tal van talen, maar ook veel ICT gerelateerd materiaal. Alle filmpjes zijn wel in het engels, maar dat is voor je talenkennis ook weer belangrijk.

In deze website zul je vaak verwijzingen vinden naar deze site. Een aantal filmpjes verwijzen via de website van vialogues indirect naar de website(s) van Bukey Roberts, hiermee kun je dan een aantal vragen over het filmpje beantwoorden of commentaar geven en vragen stellen.

Een andere erg handig site is: www.developphp.com.

Je vind hier niet alleen een uitleg over PHP maar ook over HTML CSS en Javascripting
Je kunt hier zowel een aantal video's vinden die uitleg geven maar ook veel teksten met uitleg. Bestuur zeker de HTML library met HTML fundamentals.

 

 

Een webpagina controleren:

Om te controleren of een webpagina voldoet aan de standaard kun je gebruik maken van de volgende pagina:

http://html5.validator.nu 

 

W3C.org

De autoriteit op het gebied van  standaarden Hier vind je de beschrijvingen van alle vormen van html. Alle regels waaraan je moet voldoen om goede html pagina's te maken. De beschrijving van HTML5 vind je hier

Wat bestudeer je wanneer?

Periode 1

Week 1 Introduktie
Week 2  
Week 3  
Week 4  
Week 5  

Week? 6

  
 Week? 7?  
 Week? 8  
 Week 9  
   
   
   

 

 

 

 

 

 

 

 

 

 

 

 

Periode 2

 

 

 

Periode 3

HTML5

Inleiding

Het maken van een web-site begint bij het nadenken over de opbouw van de site. Bedenk vooraf hoe de opbouw van de site er uit ziet en maak hiervan een schets op papier. Om een beeld te krijgen ga je natuurlijk ook een aantal websites bekijken. Gebruik hiervoor in periode 1 de tweede opdracht uit het curriculum. Ook in periode 2 is dit natuurlijk belangrijk daarom is dan de WEB 1 opdracht van belang

Bedenk welke pagina's er moeten komen, waar en hoe ziet het menu er uit, wat worden de kleuren die ik ga gebruiken? ?

Wat moet je wel wat moet je niet doen?

bekijk de onderstaande links en zorg er voor dat je deze dingen toepast of juist niet toepast:

 

Creating a Basic Template

Lijsten

Padding

Wat is het verschil tussen padding en margin:

Hoe zet je de margin?

Hyperlinks en Ankers

Hyperlinks zijn verwijzingen naar andere internet pagina's. Dit kan door een absolute link (een verwijzing naar een andere website) of een relative link ( een verwijzing naar een web pagina op dezelfde site)

 

 

 

Links in een pagina

Plaatjes ("Images")

Plaatjes op een internet pagina

Op internet worden er verschillende soorten plaatje gebruikt. Iedere soort heeft zijn eigen voor en nadelen

Er zijn verschillende manieren waarop een plaatje kan worden opgebouwd. We onderscheiden daarbij Vector en Raster plaatjes

 

Je herkent plaatjes aan de bestands extentie

 

bekijk de onderstaande links om meer te weten te komen over de verschillende bestands typen

.JPG

.BMP

.PNG

.GIF

 

 

 

Bekijk de onderstaande video's

 

 

 

 

Plaatjes aanpassen

maak nu de onderstaande vraag of vragen over dit onderwerp:

Formulieren

Via formulieren kun je op een website informatie van een gebruiker opvragen en deze gegevens door de browser laten opslaan voor later gebruik.

De informatie kan bv naar een email adres worden verstuurd of in een database worden opgenomen.

 

 

introductie formulieren

Binnen een formulier kun je gebruik maken van verschillende formulier elementen.

Hieronder vind je een aatal van die elementen uitgelegd:

 

Check Boxes & Radio Buttons

Drop Down Lists

Text Areas

Submitting Forms

CSS

Classes en pseudo-classes

Classes

Pseudo Claases

Parent en children

Java script

Java scipting is een methode om rich tekst toe te voegen aan een webside

introductie javascripting

hfd 1 kennismaking

Enkele belangrijke kenmerken van JAVA script:

  • Java scipt wordt op de Client uitgevoerd
  • Java script kan niet overweg met een database
  • Is voor iedereen leesbaar, want het maakt deel uit van de html pagina
  • kan gemaakt worden met een eenvoudige tekstverwerker

gebruik javascript voor:

  • berekeningen
  • Interactie
  • gegevens validatie
  • Dynamiek

 

Object georienteed (object is een zelfstandig element. bv knop, venster, document)

 

ontwikkelhulp:

Coffecup editor

notetab Light (en Pro)

http://www.htmlkit.com/download/

 

een script mag overal in een wbpagina staan, maarzorg wel voor duidelijkheid. Het mooiste is dan ook dat scripts worden aangeroepen in een apart bestand

voorbeeld: <script src="javascipts.js">

 

Comments:

Om je scripts voor anderen toegankelijk te maken, maar ook om zelf de code later nog te kunnen ontcijferen is het belangrijk je code te voorzien van commentaar. bekijk de video van Bucky om te leren hoe je dat doet:

Commentaar geven

Bekijk ook deze prezi (werkt alleen goed in IE):

 

java hfd 1 on Prezi

hfd 2 Data en Variabelen

aantekeningen bij hoofdstuk 2

Data type:

Getallen

gehele getallen (Integer) gebroken getallen (floating point)
bv. 1, 234, 45 bv: 3,56  5.34 

voor omzetting:

 ParseInt()

voor omzetting

ParseFloat?()

 

talstelsels:

binair octaal decimaal Hexadicmaal
2 tallig 8 tallig 10 tallig 16 tallig
0 0 0 0
1 1 1 1
10 2 2 2
11 3 3 3
100 4 4 4
101 5 5 5
110 6 6 6

111

 7 7 7

1000

 10 8 8

1001

 11 9 9

1010

 12 10 10
1011 13 11 A
1100 14 12 B
1101 15 13 C

1111

 16 14 D
10000 17 15 E
10001 20 16 F
10010 21 17 10

 

 

Tekenreeksen (string)

Reeks van tekens tussen "   " of '  '

voorbeelden:

var naam = "Jan";

var leeftijd = "ik ben 16";

of een z.g.n. lege string:     var leeg="";

 

 

 

Nul (Null)

 een variabele zonder inhoud, dat is dus niet 0, want nul is een getal

 

NaN (Nor a Number)

 

 

bekijk de onderstaande video's

Verschillende soorten variabelen

variabelen met tekst

hfd. 3 Functies en objecten

Aantekeningen bij hoofdstuk 3

functies

functies met parameters

functies met meerder parameters

hfd 4 keuze en lus

Aantekeningen bij hoofdstuk 4

 

PSD on Prezi

Bekijk de onderstaande videos afkomstig van the http://thenewboston.com/

Op deze website zijn nog meer videos te vinden die over lussen en de keuze structuur gaan.

 

hfd 5 Events en Event handlers

Aantekeningen bij hoofdstuk 5

bekijk ook de les prezi

Web / JAVA scripting on Prezi

event handler

onMouseOver & onLoad

hfd. 6 Objecten

Aantekeningen bij hoofdstuk 6

Objects

Na het zien van deze video zou je bekend moeten zijn met de volgende begrippen:

Object

Property

methode

Creating Our Own Objects

Curriculum Opdrachten

In het curriculum vind je per periode een aantal opdrachten die individueel of in een sub-groep moeten worden gemaakt.

In de volgende hoofdstukken zijn deze opdrachten ook terug te vinden met daarbij een aantal aantekeningen over waar je informatie kunt vinden of hoe je een opdracht zou kunnen aanpakken.

 

Opdrachten ST1-1

Web 1

Opdrachten St1-2

WEB 1

 De opdracht:

Als je iets wilt gaan bouwen is het verstandig om eerst een plan te hebben. Je idee en een plan zorgen samen voor een perfect resultaat. Tijd voor actie. Maar in tegenstelling tot de module WEB1 krijg je spontaan te maken met een opdrachtgever. Wat wil deze opdrachtgever, welke lettertype gebruiken ze standaard en welke kleuren gebruiken ze, oftewel welke huisstijl hebben zij. Je hebt deze keer geluk! Aangezien de opdrachtgever zelf nog geen enkel idee heeft van de mogelijkheden mag je alles zelf bepalen en gaan wij eerst eens even onderzoeken wat er nou eigenlijk gebruikelijk is wereld van de buurthuizen. Tijd voor een onderzoekje. De kennis uit de vorige module zul je hard bij nodig hebben!

 

Doel:

  • Het leren plannen van individuele werkzaamheden
  • Het maken van beslissingen op basis van argumenten

 

Te beoordelen activiteiten:

 

A. Lees de opdracht WEB2 aandachtig door.

B. Bekijk minimaal 3 “buurthuis” websites op internet. Geef van elke site aan wat je aan ideeën kan gebruiken en wat je absoluut nooit zelf zou

toepassen. Geef per website aan jouw vakspecialist aan:

  • A. De URL van de website en de naam
  • B. Welk idee je gaat gebruiken en waarom
  • C. Wat je zelf niet mooi, handig of logisch vindt en waarom

C. Maak op basis van de opgedane ideeën uit B en opdracht WEB 2 een schets van de website die jij wilt gaan maken

 

D. Lees de opdracht “plannen maken, plannen breken” in het boek “Project in Uitvoering” (paragraaf B 0.6.3 ) door en voor deze activiteit uit voor het ontwikkelen van de website uit WEB03

E. Neem de planning en de schets door met jouw vakspecialist

 

Op te leveren producten:

 

• Het opleveren van onderdeel B,C,D en E

 

Info:

 

WEB 2

 

In de vorige periode heb je al kennis gemaakt met het maken van websites voor jezelf en van jezelf. Nu ga je een website maken voor een ander en wel het buurthuis de Hoven (zie module PICO1).

 

Doel:

Kennismaken met de mogelijkheden van CSS en Java

 

Te beoordelen activiteiten:

A. Maak een website met behulp van enkel de “HTML kit” waarin minimaal de volgende onderdelen terug zijn te vinden:

• Minimaal 7 pagina’s waarop de volgende onderwerpen zijn terug te vinden:

• Een introductie pagina voor buurthuis de hoven (wat staat er op een introductiepagina?)

• Een pagina waarin wordt aangegeven welke cursussen het buurthuis aanbiedt en wat hier in behandeld wordt.

• Een pagina met daarop de agenda van het buurthuis.

• Een pagina met een fotogalerij van het buurthuis

• Een pagina met een contactformulier

• Een pagina met daarop een opgedaan idee vanuit opdracht WEB1B

 

Bij het maken van de website zorg je ervoor dat:

• de website een menustructuur heeft met “hover” effect

• De opmaak is opgebouwd met behulp van CSS

• De inhoud wordt gerealiseerd op basis van HTML of javascript

• De agenda op de website is een Google calander. Natuurlijk wel in de stijl van de website

• Bepaal zelf de huisstijl

• Rechts boven in de site wordt altijd de huidige datum en tijd weer gegeven wordt.

• Bij de contact formulier dient een routebeschrijving te komen staan van googlemaps.

 

Op te leveren producten:

• Het opleveren van een website die voldoet aan A

 

 

WEB 3

Doel:

Inzicht krijgen in de terminologie behorend bij het internet

 

Te beoordelen activiteiten

A. Onderzoek 3 providers waar buurthuis de Hoven een abonnement kan afsluiten. Geef in een vergelijkingsoverzicht (in een tabel) op jouw

website de kenmerken en verschillen weer van de door jou onderzochte abonnementen. Geef tevens per abonnement:

  • Minimaal een voordeel voor de opdrachtgever
  • Minimaal een nadeel voor de opdrachtgever

B. Geef op de site ook aan welk abonnement jouw voorkeur heeft en waarom?

C. Waarschijnlijk beschik je thuis over een internet verbinding. Indien dit het geval is heb je ook via jouw provider de beschikking over webruimte. Plaats de in WEB2 vervaardigde website online. Indien je niet beschikt over een internetverbinding met webruimte zijn er genoeg alternatieven waarmee je gratis een website online mee kan plaatsen. Zoek op internet naar alternatieven en plaats de in WEB2 vervaardigde website online.

 

Op te leveren producten:

• Laat het eindresultaat van A of B controleren door jouw vakdocent.

Geef tevens een toelichting hoe je dit hebt gerealiseerd.

 

Opdrachten St1-3

WEB 1

Als dan... Of anders?

Als je gaat programmeren gebruik je allerlei
vergelijkingen. Een hele belangrijke is de functie: “if..then..else” waarmee
je kan aangeven dat er bij een bepaalde actie, bijvoorbeeld het klikken
met een muis, iets gaat gebeuren. Of, wanneer er niet wordt geklikt maar
er enkel over het object wordt bewogen, er iets anders gebeurt.
Doel:
Toepassen van de functie: “if then else”
Te beoordelen activiteiten:
A. Schrijf een script dat eerst aan de gebruiker een getal vraagt. Laat het
script vervolgens de tafel van dat getal op het scherm tonen in een
tabel.
B. Vraag de gebruiker om één getal. Zorg ervoor dat:
• Wanneer het ingevoerde getal kleiner is dan 10 moet het script de
melding geven kleiner dan 10 op het scherm dmv. de functie:
“document.write().”
• Indien het ingevoerde getal groter is dan 10 en kleiner dan 100, dan
dient het script hier ook een melding van op het scherm te geven.
• En wanneer het getal groter is dan 100 komt er een melding groter
dan 100 dmv. De functie: “alert().”
C. Vraag de gebruiker om twee getallen. Zorgt ervoor dat:
• Indien deze waardes niet aan elkaar gelijk zijn dient het script
opnieuw om deze twee waardes te vragen net zo lang totdat
ingegeven waardes aan elkaar gelijk zijn.
• Wanneer de waarden hetzelfde zijn geeft het script dit ook aan
D. Zorg ervoor dat je een script maakt dat eerst om een gebruikersnaam
en vervolgens om een wachtwoord vraagt, voordat je je eigen website
kan benaderen.

Op te leveren producten:


• Het opleveren van onderdeel A,B,C en D?

WEB 2

De functie “If then else” is pas het begin. In deze opdracht ga je verder
expiremteren met andere functies. Vergeet niet de bijlage te raadplegen, je
boek en natuurlijk je vakspecialist.

Doel:
Toepassen van diverse javascript functies


Te beoordelen activiteiten:
A. Schrijf een script waarbij:
• U de gebruiker bij het laden van de pagina met behulp van de functie:
prompt() om een willekeurige tekst vraagt.
• Plaats deze tekst vervolgens in de statusbalk.
• Maak een knop op het scherm waarmee u de statusbalk weer leeg
maakt.
• En maak ook een knop waarmee de gebruiker een nieuwe tekst kan
plaatsen.
B. Maak een script waarbij u met behulp van de functie: prompt() de
gebruiker om een URL vraagt, open deze URL vervolgens in een nieuw
venster.
C. Maak een script dat om de vijf seconde een plaatje op je site wisselt.
Zorg voor minimaal zes plaatjes.
D. Programmeer een script dat:
• zodra de gebruiker op een knop klikt er een stopwatch begint te
lopen.
• Zorg ervoor dat de stopwatch ook kan worden stopgezet.
• En zorg ervoor dat je de stopwatch stil kan zetten of terug te zetten
op 0.

Op te leveren producten:


• Het opleveren van onderdeel A,B,C en D?

WEB 3

Elke dag worden er miljoenen websites bekeken. En elke dag worden er
miljoenen websites gemaakt. Een website maken is dan ook voor veel
mensen een hobby. Wil je echter professioneel met een website aan de
gang dan zal je de standaard tooltjes even moeten vergeten en beginnen
bij de basis.
De vele programma’s, scripts en hulpjes die er op de markt zijn worden
veelvuldig gebruikt door hobbyisten. De professionals bouwen een website
echter met enkel een editor. Waarom eigenlijk?

Doel:
Aanpassen van Javascript functies


Te beoordelen activiteiten:
A. Maak een webpagina waarbij je als bezoeker na vijf seconden een
popup krijgt met bv. reclame. Als de bezoeker jouw site verlaat bedank
je hem voor zijn bezoek dmv een alert.
B. Maak een pagina die in de statusbalk een scrollende tekst laat lopen.
C. Maak een script waarin je duidelijk laat zien hoe de functies uit deze
webmodule werken met JavaScript
D. Zorg dat steeds de juiste datum en tijd in de statusbalk wordt
weergegeven.

Op te leveren producten:


• Het opleveren van onderdeel A,B,C en D?