I N H O U D S O P G A V E

ERIKOTTEN

Stageverslag Fase 1 & Fase 2: Multimedia/Internet

2e

Gemaakt door Erik Otten jaar, Grafisch Lyceum Zwolle April 2002

I N H O U D S O P G AV E Inleiding

3

Algemene informatie

5

Fase 1

8

Fase 1 opdrachten

10

opdracht 1 opdracht 2 opdracht 3 opdracht 4 opdracht 5 opdracht 6 opdracht 7 opdracht 8 opdracht 9

Fase 2

22

Fase 2 opdrachten

24

opdracht 1 opdracht 2 opdracht 3 opdracht 4 opdracht 5 opdracht 6 opdracht 7 opdracht 8

Conclusie

33

wat heb ik geleerd mijn mening

Sitemap

37

Bronnen

39

Over dit verslag

41

1

G N I D I E L N I

I N L E I D I N G

I N L E I D I N G

Op stage: nieuw, leuk, leerzaam...

pag.3

2

E I TA M R O F N I

A LG E M E N E E N E M E GL A

I N F O R M AT I E

A LG E M E N E

I N F O R M AT I E

Gegevens Stagiare: Naam Leerling: Adres: Postcode & plaats: Telefoonnummer: Email:

Erik Otten Paasberg 37 7772DH Hardenberg 0523-272048 [email protected]

Stagebedrijf: Naam leerbedrijf: Adres: Postcode & plaats: Telefoon- & faxnummer: Email: Naam praktijkbegeleider:

Douglas Design BNO van Reeuwijkstraat 38 7731 EH Ommen 0529-458899 / 0529-438891 [email protected] Sybe de Vos

BPV-begeleider: Naam BPV-begeleider: Telefoon- & faxnummer: Email:

Gert Oosterwijk 0523-657534 [email protected]

BPV-periode:

27 augustus 2001 t/m 21 juni 2002

pag.5

3

E S AF

FA S E E D N E R E T N E I R O

1

FA S E

1

Vakhandelingen oriëntatieperiode Eindtermen digitale techniek crebo 51284 blok 1 Blok 1 Algemeen - productgang en werkmethode - algemene voorbereiding - instellen en bedienen aparatuur De eindtermen: 1. Het werk systematisch voorbereiden en inrichten, evenals de werkplek, aparatuur, programmatuur en materialen, gebruikmakend van de kennis van apparatuur, programmatuur en materialen en van automatisering in het algemeen. 2. Onder begeleiding vakhandelingen verrichten die nodig zijn om het werk consequent en efficiënt te laten verlopen. 3. De orderinstructie controleren, werkmethode bepalen, aangeleverd materiaal controleren en orderspecificaties raadplegen. 4. Inzicht in de processen die voor en na de eigen werkzaamheden plaatsvinden. 5. Op een ergonomische, veilige en milieubewuste wijze het werk uitvoeren. 6. Eigen beslissingen nemen en gewone veel voorkomende storingen zelfstandig en doelmatig oplossen. 7. Eigen werkzaamheden controlen en eventuele fouten corrigeren.

pag.7

4

N E T H CA R D P O

FA S E 1

E S AF

1

O P D R AC H T E N

O P D R AC H T E N

FA S E

1

Opdracht 1 1 .1 .1

Wat voor produkten worden in het bedrijf gemaakt? - Websites - Periodieken - Videomontages - Boekomslagen - Huisstijlen - Brochures - Briefpapier - Folders

1 .1 . 2

Welke verschillende diciplines zijn te onderscheiden in het bedrijf ? - Vormgever - Boekhouder - Webdesigner - Offertebegeleider - DTP-er - Systeembeheerder - Voorbereider - Videomonteur - Administratie

1 .1 . 3

Welke ontwikkelingen heeft het bedrijf de afgelopen 5 jaar doorgemaakt? In 2000 is Douglas Design verhuist naar een nieuw pand in Ommen, hierdoor zijn er nieuwe arbeidsplaatsen ontstaan. Er werken nu (excl. stagiares) 14 mensen binnen het bedrijf. Doordat computers maar een beperkte levensduur hebben worden er regelmatig nieuwe systemen gekocht, en de allernieuwste versies van software gekocht. Onlangs is er een kleurproef systeem gekocht. Waarmee kleurproefen kunnen worden gemaakt voor drukwerk.

1 .1 . 4

Met welke mensen binnen het bedrijf heb je direct te maken bij de uitvoering van je werk? Noem hun functies. Sybe Webontwerper / Stagebegeleider Willy Systeembeheerder Wiert Artdirector Jaap Orderbegeleider

1 .1 . 5

Hoe gaat het bedrijf/personeel om met de ARBO? Douglas Design BNO voldoet aan de normen, er worden voorzorgsmaatregelen genomen om klachten te voorkomen zoals RSI, dit wordt bijv. gedaan door in plaats van een muis een pen als muis te gebruiken.

Gebruikte Bronnen: Web: www.wacom.nl Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase1/ pag.9

O P D R AC H T E N

FA S E

1

Opdracht 2 1 . 2 .1

Welke afspraken zijn er gemaakt over het ziekmelden? Het is belangrijk dat je s'morgens even laat weten dat je niet op je werk kunt komen omdat je ziek bent, officieel moet dit voor 10 uur.

1 . 2 . 2

Wat zijn de gevolgen als deze niet goed nagekomen worden? Zitten niet echt gevolgen aan, maar het komt dan ook eigenlijk niet voor dat iemand niet belt s'morgens.

1 . 2 . 3

Welke afspraken zijn er gemaakt over vrije dagen en of vakantie? In principe heeft de stagiare geen recht op vrije dagen. Ik heb alleen vakantie met kerst en in de zomervakantie. Maar in overleg is er altijd wel wat te regelen met vrije dagen.

1 . 2 . 4

Welke afspraken zijn er gemaakt over jouw beloning? Ik krijg elke maand 180,- euro stagevergoeding.

1 . 2 . 5

Heb je ook nog te maken met minder formele afspraken, bijvoorbeeld tussen jouw en je collega's? Eigenlijk niet zo, een aantal dingen spreken gewoon voor zich, er is wel een regel dat je elke maandag om 8.30 aanwezig bent, om bij de weekopening te zijn.

1 . 2 . 6

Wie doen de personeelszaken en wat houdt zijn/haar functie in? Wiert (eigenaar) houdt zich bezig met het aannemen van het personeel (de sollicatie procedure) Henk doet de administratie, en dus ook een deel van de loonadministratie, hij geeft alles weer door aan een extern bureau dat de volledige loonadministratie regelt.

1 . 2 .7

1 . 2 . 8

Hoe wordt er omgegaan met bedrijfsgeheimen? Hiervoor heb ik een contract getekent met Douglas Design Welke afspraken zijn er over van de door de klant aangeleverde fonts? Dit komt bijna niet voor bij Douglas Design, maar de algemene regel is, gebruiken en daarna weggooien.

Referenties: Collega’s: Sybe, Willy, Wiert Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase1/ Web: www.douglasdesign.nl pag.10

O P D R AC H T E N

FA S E

1

Opdracht 3 1 . 3 .1

Hoe lang zit je per dag op je werkplek op één plaats? Eigenlijk de hele dag achter dag een Mac, maar vaak controleer ik de website ook op een PC, dus dan wissel ik wel van werkplek.

1 . 3 . 2

Welke bewegingen maak je het meest tijdens het werk? Muisbewegingen (klikken, scrollen enz.) en typen.

1 . 3 . 3

Waarop moet je vooral letten bij het maken van deze beweging(en) om klachten te voorkomen? Door ook andere bewegingen te maken, en regelmatig rust te nemen kun je dit soort klachten voorkomen.

1 . 3 . 4

Waarom moet je je bureau opgeruimd houden? Zo kun je overzichtelijk werken, en makkelijk iets terug vinden, als je wat zoekt. Collega's kunnen zich er ook aan ergeren, en dat moet je ook voorkomen.

1 . 3 . 5

Wat is voor jou de ideale tafelhoogte als je zittend werkt? Mijn werktafel/bureau staat nu ongeveer op +/- 1 meter, dit bevalt mij prima, en het is dus een goede hoogte voor mij.

1 . 3 . 6

Welke eisen worden aan je stoel gesteld? De hoogte moet worden kunnen ingesteld, en de stoel moet armleuningen hebben.

1 . 3 .7

Wat zijn voor jouw de ideale buigingshoeken voor armen en benen tijdens werken? Voor de armen en benen 90 graden.

1 . 3 . 8

Wat is het beste omgevingslicht? Op ons kantoor hebben we TL-lamp verlichting, dat werkt prima, het is prettig licht om bij te werken.

1 . 3 . 9

Wat is voor jouw de ideale afstand van het hoofd tot het beeldscherm? Dit is verschillend, het ene moment zit ik er 30 cm vanaf, het andere moment weer 80 cm, het is het beste om zo ver mogelijk van je beeldscherm af te kijken, omdat je ogen zo meer tijd hebben om het beeld te verwerken, zo krijg je minder last van tranende ogen, en/of geirriteerde ogen.

pag.11

O P D R AC H T E N

FA S E

1

Vervolg opdracht 3 1 . 3 .1 0

Welke eisen worden er gesteld aan lichtsterkte en kleur van het beeldscherm? Mijn computer heeft de volgende instellingen voor het beeldscherm: Resolutie Witpunt Gammacurve Kleuren

1152x870 75Hz 9300 1,8 standaard Miljoenen

1 . 3 .1 1

Vindt je dat de apparatuur en hulpmiddelen goed zijn te bedienen? Ja, alle apparatuur waarmee ik werk, kan ik prima bedienen

1 . 3 .1 2

Hoe zou jou werkplek in ergnomisch opzicht kunnen worden verbeterd? Weinig, maar misschien een betere muismat, met polsondersteuning, ook zou het toetsenbord verbeterd kunnen worden d.m.v. een natural toestenbord

1 . 3 .1 3

Is er voldoende licht op de werkplekken? Zo niet wat zou er verbeterd kunnen worden? Het licht is prima op ons kantoor, de TL lampen geven goed licht, waardoor je goed kunt werken.

1 . 3 .1 4

Is er voldoende ventilatie op de werkplek? Zo niet, wat kan er worden verbeterd, en op welke manier? Nee, vooral in de middag, kan het behoorlijk benauwd worden in ons kantoor, misschien dat doormiddel van airco dit kan worden verholpen.

1 . 3 .1 5

Heb je last van tocht, rook temperatuur verschillen? Doordat het is ons kantoor vrij warm is, en in de kantine vrij koel, zijn er wel temperatuur verschillen, in het pand zelf mag niet worden gerookt.

1 . 3 .1 6

Welke rol speelt de BGD en de Arbeidsinspectie bij ergonomisch werken? Deze instellingen controleren en beoordelen de werkplekken op het werk, zij geven ook advies over hoe de werkplekken kunnen worden verbeterd.

Gebruikte Bronnen: Web: www.arbo.nl Web: rsi.pagina.nl Folder: U en uw werkplek Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase1/ pag.12

O P D R AC H T E N

FA S E

1

Opdracht 4 1 . 4 .1

Maak een lijst van de aparatuur in de voorbereiding die in je bedrijf aanwezig is. Aantal Soort aparatuur

Merk/Type

Toepassing

3x 8x 3x 2x 2x 1x 1x 1x 2x 1x

Systeem Systeem Systeem Systeem Systeem Systeem Systeem Systeem Systeem Systeem

G3 PowerMac G4 G3 Bluewhite G3 iMac PowerMac 9500 PowerMac 8500 Performa 5200 Quadra 950 PC P2-266 PC AMD K6

Werkstation Werkstation Werkstation Werkstation Werkstation Backup/Scanstation Filemaker Host Scanstation Werkstation Werkstation

1x 1x 1x 1x 1x

Printer Printer Printer Printer Printer

HP Laserjet 2100 HP Laserjet 4MV Xante Accel-a-Writer QMS Magicolor 330 HP ColorPro

Printen van documenten Printen van documenten Printen van documenten Printen van documenten Kleurproeven maken

1x 1x 1x

Scanner Scanner Scanner

AtrixScan 4000t Diascanner Afga Arcus 2 Flatbed Scanner Heidelberg Linoscan Flatbed Scanner

10x

Tekentablet

Wacom

Vervanging muis

14x 1x

Telefoons Faxen

Samsung Canon

Om te bellen Om te faxen

1x 1x

HD recording Videobewerking

Digidesign 001 Panasonic/JVC

Geluid op te nemen Video bewerken

Referenties: Collega’s: Sybe, Willy Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase1/ pag.13

O P D R AC H T E N

FA S E

1

Opdracht 5 1 . 5 .1

Maak een lijst van de programmatuur die op de verschillende computers aanwezig is. Programma

Versie Toepassing

Licentie

Windows Mac OS Mac OS Dreamweaver Fireworks Flash Suitcase BBedit Lite Gifbuilder Transmit Internet Explorer Netscape Opera Outlook Express Acrobat Reader Illustrator Photoshop Filemaker Pro QuarkXpress

ME 9.1 10 4 4 5 8 4 / / 5 6 5 5 5 9 6 5 4.11

ja ja ja ja ja ja ja gratis* gratis* gratis* gratis* gratis* gratis* gratis* gratis* ja ja ja ja

Besturingssysteem Besturingssysteem Besturingssysteem HTML opmaak programma Webgraphics programma Animatieprogramma Lettertype beheer Kladblok/CSS Maken van gifanimaties Ftp programma Browser Browser Browser Emailprogramma Pdf reader Vector-tekenprogramma Fotobewerkings software Database programma Opmaak voor drukwerk

Referenties: Collega’s: Sybe, Willy Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase1/ Web: www.macromedia.com Web: www.adobe.com Web: www.microsoft.com Web: www.quark.com Web: www.apple.com *Deze programma's zijn shareware of freeware pag.14

O P D R AC H T E N

FA S E

1

Opdracht 6 1 . 6 .1

Wat zijn de bedrijfsnormen en protocolen voor het gebruik van browsers? Alle websites die door DouglasDesign worden gemaakt, worden getest in de 3 meest gebruikte browsers, dit zijn: Internet Explorer, Netscape en Opera. Daarnaast wordt de site in verschillende versies van de browsers getest.

1 . 6 . 2

Wat zijn de bedrijfsnormen voor het gebruik van servers? Ik heb volledige toegang tot de server van Douglas, ook van al haar klanten, regel is dat je alleen op de servers gaat wanneer je iets moet uploaden of downloaden. Offline op het interne netwerk, heb ik toegang tot de fileserver en de webdesign map.

1 . 6 . 3

Wat zijn de bedrijfsnormen voor het gebruik van computerplatforms? Vrijwel al het werk bij Douglas wordt gedaan op Macintosh computers, alle websites worden uiteraard getest op de PC en de Mac. Dit is ook nodig, omdat de PC bijv. hele andere kleuren gebruikt dan de Mac, daarom zit er altijd kleurverschil in de websites.

1 . 6 . 4

Wat zijn de bedrijfsnormen voor het gebruik van beeldschermformaten? Ik werk op een computer met een beelscherm van 21" hierop kun je overzichtelijk werken, en het beeld is goed.

1 . 6 . 5

Wat zijn de bedrijfsnormen voor het gebruik van kleur? Er zijn 216 kleuren die standaard voor web staan, wij proberen zo veel mogelijk binnen die kleuren te blijven werken. Daarnaast houden wij er rekening mee dat de Mac de kleuren anders laat zien dan de PC.

1 . 6 . 6

Wat zijn de bedrijfsnormen voor het gebruik van resoluties? Ik werk zelf op een resolutie van 1152x768, maar de websites worden in verschillende resoluties getest, de minimale resolutie is 800x600, maar de site wordt ook op 1024x768 getest.

pag.15

O P D R AC H T E N

FA S E

1

Vervolg opdracht 6 1 . 6 .7

Wat zijn de bedrijfsnormen voor het gebruik van snelheid/laadtijd van de website? De website moet redelijk snel geladen zijn, zoveel mogelijk van de website moet binnen 10 sec. te zien zijn. Door het eerst tekst te laten zien, kan de bezoeker al vast de tekst lezen, waarna de foto' s of illustraties worden geladen.

1 . 6 . 8

Wat zijn de bedrijfsnormen voor het gebruik van limiet aan Kb per pagina? Een pagina mag ongeveer 40 tot 50kb bevatten, maar door flash animaties en/of hoge resolutie afbeeldingen, kan dit wel wijzigen.

1 . 6 . 9

Wat zijn de bedrijfsnormen voor het gebruik van lettertypen op verschillende platforms? Op internet zijn er maar een beperkt aantal lettertypen die je kunt gebruiken voor de 'platte' tekst, namelijk: Arial, Verdana, Times en Courier. Bij plaatjes kun je uiteraard alle lettertypen gebruiken die je tot je beschikking hebt.

Referenties Collega’s: Sybe, Willy Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase1/ Web: www.adobe.com Web: www.web-con.nl pag.16

O P D R AC H T E N

FA S E

1

Opdracht 7 1 .7.1

Welke controlemiddelen worden in het bedrijf gebruikt? Voor de afdeling internet, gebruiken we controlemiddelen als browserscheck, resolutiecheck en kleurcheck, dit doe we om te kijken of iedere toekomstige bezoeker van de site, de website goed kan zien. Daarnaast wordt al het drukwerk gecontroleerd door de artdirector en door het programma FlightCheck, dit programma controleerd het drukwerk op fouten zoals: lettertypes, kleuren en illustraties.

1 .7. 2

Welke correctieroute wordt in het bedrijf gehanteerd? Bij de afdeling internet, wordt eerst de hele website door ons zelf gecheckt (zie ook boven) Eventuele fouten halen we er dan zelf uit, Sybe (stagebegeleider) controleert altijd de uiteindelijke website.

1 .7. 3

Welke hulpprogramma's worden in het bedrijfgebruikt? Vrijwel al het werk bij Douglas wordt gedaan op Macintosh computers, alle websites worden uiteraard getest op de PC en de Mac. Dit is ook nodig, omdat de PC bijv. hele andere kleuren gebruikt dan de Mac, daarom zit er altijd kleurverschil in de websites.

1 .7. 4

Welke conversieprogramma's worden in het bedrijf gebruikt? MacLink, dit programma converteerd Microsoft Office documenten, en andere formaten.

1 .7. 5

Hoe wordt er gecontroleerd, welke controle, waarop en wanneer? Er wordt gecontroleer met Flightcheck, kleurscheiding, visuele controle, dit wordt op meerdere momenten bij het verloop van de order gedaan. Uiteindelijk wordt elke order (behalve webdesign en video) door de Art Directie, klant en Flightcheck gecontroleerd

1 .7. 6

Welke controle's voer je zelf uit, hoe vaak en waarom? Bij een webdesign order, controleer ik op resolutie, kleur, en browser. Dit gebeurt bij elke grote wijziging aan de site, dit wordt gedaan om ervoor te zorgen dat iedereen de website uiteindelijk goed kan bekijken.

1 .7.7

Welke problemen kan je tegenkomen bij het gebruik van fonts? Dat het niet de juiste zijn, of dat de fonts een onjuiste extentie hebben.

1 .7. 8

Waarom spreekt men altijd een een levertijd af met de klant? Soms is een website een onderdeel van een campagne, voor de start van een campagne moet alles af zijn. pag.17

O P D R AC H T E N

FA S E

1

Opdracht 8 1 . 8 .1

Hoe worden bestanden in het bedrijf beveiligd tegen stukgaan van de harde schijf ? Er wordt elke dag een backup gemaakt van de server, daarnaast wordt al het werk op cdrom gezet, om het in het archief te kunnen plaatsen.

1 . 8 . 2

Hoe worden bestanden in het bedrijf beveiligd tegen invloeden die het hele bedrijf van buitenaf bedreigen, zoals brand? Er is een beveiligingsinstallatie aanwezig, en er zijn brandblussers in het gebouw.

1 . 8 . 3

Welke hulpmiddelen worden voor de beveiling gebruikt? Er draait een virusscanner op de computers en op de server, hiermee worden de computers en server optimaal beveiligd.

1 . 8 . 4

Welke bewaartermijn gelden voor de bestanden? De bestanden voor de boekhouding worden 7 jaar in een archief bewaard. Dit is wettelijk verplicht. Alle gemaakte opdrachten worden bewaard op cdrom hiervoor is geen termijn.

1 . 8 . 5

Op welke manier worden bestanden gearchiveerd? Bestanden worden op cdrom opgeslagen.

1 . 8 . 6

Welke procedure hanteert het bedrijf voor het maken van back-ups van databestanden? Backups worden op de server gemaakt, en bestanden worden op cdrom opgeslagen.

1 . 8 .7

Welke maatregelen worden er genomen om computervirussen te vermijden, op te sporen en te verwijderen? Met speciale antivirus software die op de computers en op de server draait.

Referenties: Collega’s: Sybe, Willy Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase1/ Web: www.norton.com pag.18

O P D R AC H T E N

FA S E

1

Opdracht 9 1 . 9.1

In de laatste opdracht van fase 1 (opdracht 9) gaat het om de de ingangs en uitgangscontrole binnen het bedrijf. Omdat niet alle vragen van toepassing waren binnen het bedrijf waar ik stage loop, heb ik een aantal vragen weggelaten, en zo mogelijk ook vragen toegevoegd. Ingangscontrole instructies Er wordt elke dag een backup gemaakt van de server, daarnaast wordt al het werk op cdrom gezet, om het in het archief te kunnen plaatsen. Ingangscontrole conventioneel aangeleverde beelden Voor deze opdracht heb ik foto's van ZOA gebruikt. 1. 2. 3. 4. 5.

6. 7.

Het materiaal is compleet aangeleverd, niet elk beeld is even bruikbaar. De beelden zijn genummerd. Ook staan de adresgegevens van de fotograaf er bij vermeld. De meeste beelden zijn niet beschadigd, ik kwam 2 foto's tegen met een lichte beschadiging. De meeste foto's waren scherp, op een enkeling na. Deze zijn ook niet gebruikt voor de eindproductie. Opzicht. Binnen het bedrijf hebben we wel 2 verschillende scanners, één voor dia's en een flatbed scanner om bijv. foto's of afbeeldingen uit boeken in te scannen. Nee, de beelden hebben geen last van kleurzweem De toonweergave is prima.

Uiteindelijk zijn er van alle foto's, 5 in de eindproductie gekomen.

Referenties: Collega’s: Sybe, Willy, Ronald Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase1/ Web: www.zoaweb.org

pag.19

O P D R AC H T E N

FA S E

1

Vervolg opdracht 9 1 . 9. 2

Ingangscontrole digitale teksten, beelden, geluid en film Voor deze opdracht heb ik de teksten van Bruinsma Kantoorefficiency gebruikt. 1.

2. 3. 4.

5. 6. 7. 8. 9.

10. 1 . 9. 3

De bestanden zijn niet compleet aangeleverd, een aantal onderdelen missen nog, maar hierover heb ik contact opgenomen met de klant, en ze worden nu na gestuurd. De bestanden waren aangeleverd in WORD2000 formaat, via de PC kon ik deze openen en converteren naar de MAC Ja Niet alle tekens worden juist weergegeven. In Dreamweaver zit een optie om op onjuiste tekens te scannen, maar niet alles werd gevonden, ik heb dus handmatig sommige teksten moeten wijzigen. Vooral bij tekens als: é en ö enz. had ik problemen. De bestanden zijn van PC naar MAC geconverteerd en daarna van DOC naar TXT geconverteerd. Resolutie van de foto's waren juist. Ja Bij een aantal foto's heb ik delen van de foto weggelaten, dus er is is inder daad een uitsnede gemaakt. Allereerst wordt er gekeken wat we we zelf aan kunnen doen, indien dit niet kan of lukt, worden de foto's terug gestuurd, en wordt er contact opgenomen met de klant. Kleine foutjes, die makkelijk met bijv. photoshop kunnen worden bewerkt.

Uitgangscontrole internetpagina Voor de uitgangscontrole voor de internetpagina gebruik ik de site van Bruinsma Kantoorefficiency, deze opdracht heb ik zelfstandig gemaakt. 1. 2. 3.

4. 5. 6.

7. 8.

De website is vanaf de resolutie 800x600 prima te bekijken. Ja Er is een afwisseling gemaakt tussen teksten en beelden, zodat de bezoeker van de website, de informatie tot zich kan nemen, en ondertussen ook beelden ziet ter illustratie. Ja de website is gemaakt conform de huisstijl. Ja Er is geen gebruik gemaakt van CGI, maar wel van PHP scripting, de mail forms heb ik zelf gemaakt, de database met producten is door een extern bureau gemaakt. MySql Op de server van Syco Internet Services. pag.20

5

N E G N I L E D N A H K AV

FA S E

2

FA S E

2

Vakhandelingen basiscertificaat Eindtermen digitale techniek crebo 51284 blok 2 Blok 1 De technieken De eindtermen: 1. Onder begeleiding een eenvouridg multimediaprodukt met tekst, beeld, geluid en bewegend beeld samenstellen. 2. Inzicht in de processen die voor en na de eigen werkzaamheden plaatsvinden. 3. De werkplek ergonomisch inrichten. 4. Eenvoudige animatiemethoden toepassen 5. Handelingen uitvoeren die nodig zijn om het werk consequent en effiënt te laten verlopen.

pag.22

6

N E T H CA R D P O

FA S E 2

E S AF

2

O P D R AC H T E N

O P D R AC H T E N

FA S E

2

Opdracht 1 2 .1 .1

Maak een aantal pagina's geheel in HTML. Zorg voor een evenwichtige opmaak. De items die in ieder geval op je pagina moeten voorkomen zijn: Platte teksten en koppen, lijnen, een genummerde lijst, gelinkte afbeeldingen, gelinkte tekst. Indien van toepassing kan je hiervoor ook pagina's gebruiken die voorkomen in een door jouw gemaakte order. Controleer op het beelscherm (ook in browsers) of alles juist is. Voor de 2e fase van mijn verslag gebruik ik als voorbeeld de website van Bruinsma Kantoor. Deze opdracht heb ik zelfstandig gemaakt.

2 .1 . 2

Verklaar de volgende begrippen (waar dient het voor): Head In de head tag staat de titel, informatie over de pagina voor o.a. zoekmachines en de css in gedefineerd. Op de titel na is deze tag niet te zien voor de bezoekers van de website. Title De title tag geeft de titel van de pagina, deze staat ook in de bovenbalk van de browser. Keywords In de keyword tag staan de zoekwoorden van de pagina. Een zoekmachine zoals bijvoorbeeld Ilse, zoekt tussen deze woorden of het zoekwoord er bij staat. Bij goed gebruik van keywords, is de website van de klant goed te vinden op het internet. Description Deze tag heeft alles met keywords te maken, in de description tag of te wel de beschrijving staat de tekst die bij de zoekmachine resultaten staat. Het is een kleine samenvatting van de pagina. Refresh In de refresh tag, kun je een pagina na een bepaalde tijd laten vernieuwen, of een externe pagina aanroepen na een bepaalde tijd. Robottags Met een robot tag in de meta, kun je bezoekers weghouden van je website. Door de tag: NOINDEX te gebruiken kun je zorgen dat de pagina niet aan de zoekmachine index wordt toegevoegd, en met NOFOLLOW kun je voorkomen dat de robot de hyperlinks op de pagina volgt en deze pagina's aan zijn index toevoegt. pag.24

O P D R AC H T E N

FA S E

2

Vervolg opdracht 1 2 .1 . 2

Alt tag Met de alt tag kun je een label aan een plaatje geven. Als je met de muis over het plaatje heen gaat verschijnt er een klein label met bijvoorbeeld een beschrijving van het plaatje. Comments Met comments, of commentaar regels, kun je overzicht maken in je website. Het is tekst die de bezoeker van je website niet kan zien, maar als je de HTML code bekijkt in de bron dan zie je het wel. Ik gebruik het vaak bij formulieren. Bodytag Het bodygedeelte is het hoofdgedeelte van je website, hierin staan de teksten, foto's en illustraties. Marginwidth, marginheight, leftmargin, rightmargin Met deze tags geef je de marges van je pagina aan, ik heb deze altijd op "0" staan, omdat je met tables ook de marges kunt bepalen met behulp van spacers. Hyperlink Misschien wel het belangrijkste van het hele internet, de links. We zeggen ook vaak tegen het internet 'het web' het zijn allerlei pagina's die met links aan elkaar verbonden zijn. Relatieve en absolute paden Relatief pad: Absoluut pad: Source file Alle HTML code staat in de source, of te wel de broncode. Image map Dit leg ik uit aan de hand van een voorbeeld, stel je hebt een kaartje van Europa, en je wil dat je alleen op Nederland kan klikken. Dan kun je met een imagemap een bepaald gedeelte van de afbeeldingen selecteren en dat als link maken. Bronnen: Boek: Using Dreamweaver 4 Boek: Dynamisch Webdesign / Webdesign in de praktijk Web: www.web-con.nl Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase2/ Web: www.bruinsmakantoor.nl

pag.25

O P D R AC H T E N

FA S E

2

Opdracht 2 2 . 2 .1

Maak een pagina met tabellen geheel in HTML. Zorg voor een evenwichtige opmaak. Voor deze opdracht heb ik de opdracht van Bruinsma Kantoor gebruikt.

2 . 2 . 2

Verklaar de volgende begrippen (waar dient het voor): Rowspan (welke browser ondersteunt dit?) Om een cel meer rijen in beslag te laten nemen. Alle gangbare browsers ondersteunen dit. Colspan Om de cel meer kolommen in beslag te laten nemen. Alle gangbare browsers ondersteunen dit. Cellspacing Om de hoeveelheid ruimte tussen cellen op te geven. Alignment Om de inhoud van een cel uit te lijnen. Border Om de dikte van de eventuele rand op te geven. Height Om de hoogte van de tabel op te geven. Dit kan in pixels in procent of automatisch door de browser worden gedaan. Ik gebruik zelf het liefst pixels, omdat die waardevast zijn. En daardoor meestal in alle browsers goed zijn. Width Om de breedte van de tabel op te geven. De breedte van een tabel kun je ook op verschillende manieren opgeven, in pixels, procenten en automatisch. Background Om de achtergrond van de tabel een kleur te geven. Maar je kan ook een plaatje als achtergrond gebruiken. Bronnen: Boek: Using Dreamweaver 4 Boek: Dynamisch Webdesign / Webdesign in de praktijk Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase2/ pag.26

O P D R AC H T E N

FA S E

2

Opdracht 3 2 . 3 .1

Maak een invulformulier geheel in HTML. Zorg voor een evenwichtige opmaak.

2 . 3 . 2

Verklaar de volgende begrippen: Form Hiermee begin je een formulier, het is de openingstag. Formaction Dit is de actie die het formulier maakt. In mijn geval naar het PHP-bestand. Methode Hierin staat de manier van de actie. Dit kan op 2 manieren. POST en GET. Bij GET haalt het formulier een bestand op (link). Bij POST worden gegevens in een document gezet. Checkbox Hier kan een bezoeker iets aanvinken, bijv. welke informatie folder hij wil. Radiobutton Bij een radiobutton, kun je er voor zorgen dat je moet kiezentussen twee opties. Hidden fields. Met een hidden field kan je bijv. het emailadres van de ontvanger meenemen, zonder dat het op het scherm te zien is. Meta tag Met een meta tag geef je informatie over je pagina, bijv. keywords. Tag select Als je gegevens in een dropdown menu zet, moet er een door de bezoeker worden geselecteerd. Tag tekstarea De bezoeker kan vaak ook gegevens invullen. Bijvoorbeeld een reactie op de website. Dit kan met een invulveld, dit definieer je met een tekstarea in de HTML Tag input De tag input, geeft aan dat de bezoeker iets in kan vullen. Bijvoorbeeld bij een tekstveld, waar de bezoeker zijn naam of adres invult. Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase2/

pag.27

O P D R AC H T E N

FA S E

2

Opdracht 4 2 . 4 .1

Maak een pagina met kolommen geheel in HTML. Zorg voor een evenwichtige opmaak. Indien van toepassing kan je hiervoor ook een pagina gebruiken die voorkomt in een door jou gemaakte order. Ook weer voor deze opdracht gebruik ik als order de site van Bruinsma Kantoor. De site is gemaakt in frames. www.bruinsmakantoor.nl

2 . 4 . 2

Verklaar de volgende begrippen: Frameset In de frameset worden alle frames gedefineerd. Noframes Hierin staat de HTML code die de bezoeker te zien krijgt wanneer zijn browser geen frames ondersteunt. Frameset rows De horizontale frames van een frameset Frameset cols De verticale frames van een frameset Frameborder Om de dikte van het framekader te bepalen. Hiermee kan een bezoeker een frame ook groter maken. Bordercolor Zie boven. Hiermee kun je de kleur daarvan aanpassen. Framespacing Om ruimte tussen de frames in te voegen.

Bronnen: Boek: Using Dreamweaver 4 Boek: Dynamisch Webdesign Boek: Webdesign in de praktijk Web: www.web-con.nl Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase2/ Web: www.bruinsmakantoor.nl pag.28

O P D R AC H T E N

FA S E

2

Opdracht 5 2 . 5 .1

Maak een eigen Cascading Style Sheet. Controleer of alles juist is.

2 . 5 . 2

Vragen: Welke browsers ondersteunen CSS? Internet Explorer, Opera, Netscape Welke verschillen kan je tegenkomen in de verschillende browsers? Tekstgrote en marges Welke verschillen zijn er in font en corps bij de verschillende platforms Internet Explorer laat de lettertypen groter zien als Netscape

2 . 5 . 3

Verklaar de volgende begrippen: Fontsize De grote van de tekst, dit kan je bijv. in pixels of in punten defineren. Style De stijl van het lettertype zoals Bold, Italic enz. Color De kleuren. Dit kan zijn van borders, tekst of bijvoorbeeld de achtergrond. Listing Hiermee defineer je de stijl voor lijsten in HTML Breaks Breaks zijn er in twee versies, je hebt een non-breaking space break ( ) en je hebt een line break (
) Met een non-breaking space zet je een extra spatie tussen iets, en met een line break zet je tekst op een volgende regel. Target Target is het frame waarin de link geladen moet worden, een voorbeel is "_blank" dan wordt de link automatisch in een nieuwe venster geladen. Anchors Ankers zijn links binnen dezelfde pagina. Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase2/ Web: www.bruinsmakantoor.nl pag.29

O P D R AC H T E N

FA S E

2

Opdracht 6 2 . 6 .1

Maak ten behoeve van een internetsite één of meerdere animaties met beeld en geluid. Indien van toepassing kan je hiervoor ook een pagina gebruiken die voorkomt in een door jou gemaakte order. Omdat ik geen directe order heb gemaakt met geluid en animatie, heb ik een animatie met geluid gemaakt voor mijn stageverslag.

2 . 6 . 2

Vragen Welke programma's heb je gebruikt? De animatie is gemaakt in FLASH 5. Willy heeft mij geholpen met het geluid dat is bewerkt in ProToolsFree. Welke verschillen kan je tegenkomen in de verschillende browsers? Ik heb het bestandsformaat SWF gebruikt dat met de flashplayer te bekijken is. Test de animatie in verschillende browsers De animatie werkt prima in alle browsers, maar kan op verschillende computers wel langzamer zijn omdat de ene computer een minder snelle processor heeft als de andere. Welke versie plugin is vereist? Voor de animatie is de Flash5 plugin vereist Is een controller gewenst? Nee, omdat het een introductie filmpje is, is dit niet nodig, de animatie kan wel worden overgeslagen, zodat de bezoeker er niet op hoeft te wachten. Is er sprake van autoplay? Ja, omdat het een introductie filmpje is wordt hij automatisch gestart. Welke bestandsgrootte is aanvaardbaar? Bij filmpjes boven de 100kb zet ik er altijd een preloader voor. Maar omdat dit filmpje maar 84kb groot is, heb ik dit niet gedaan.

Bronnen: Boek: Using Dreamweaver 4 Boek: Dynamisch Webdesign / Webdesign in de praktijk Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase2/ pag.30

O P D R AC H T E N

FA S E

2

Vervolg opdracht 6 2 . 6 . 2

Vragen Zijn er objecten embedded? Het flashfilmpje zelf is wel embedded in de htmlpagina. Welke framerate is gebruikt? Deze staat op 37 Zijn bitmaps omgezet naar vectoren? Niet van toepassing, alle objecten waren al vectoren. Hoe maak je een standalone van je animatie? Door hem als een executable te exporteren. Welke formaten kies je voor je banners? Het standaardformaat is: 468x60 Een kleine banner is: 80x30 Je kunt materiaal een object-tag geven en ook een embed-tag waarom kies je voor beiden? Om ervoor te zorgen dat het in alle browsers goed werkt.

Bronnen: Boek: Using Dreamweaver 4 Boek: Dynamisch Webdesign / Webdesign in de praktijk Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase2/ pag.31

O P D R AC H T E N

FA S E

2

Opdracht 7 2 .7.1

Maak een scan ten behoeve van een internetsite. Ik heb een scan gemaakt samen met Willy. Sinds een aantal weken hebben we bij Douglas Design een nieuwe scanner gekregen. Voor deze opdracht gebruik ik een pasfoto van de Bloedbank. Voordat we gaan scannen maken we de scanner schoon, evenals de pasfoto. Daarna plaatsen we de pasfoto op de scanner. We plaatsen een rubberen zwarte mat op de foto, om hem recht te drukken, sommige foto’s staan wel eens krom. Als de pasfoto is geplaatst, starten we het programma: Linocolor Elite, dit is een scanprogramma dat bij de scanner is geleverd. Nu kiezen we via import > source voor Linocolor 2650 dat is het typenummer van de scanner. Daarna kiezen we voor Overview, nu gaat de scanner zijn eerste scan maken. Nadat de scan gemaakt is kunnen we een uitsnede maken, door een kader om de foto heen te trekken. Verder gaan we in een ander menu de instellingen veranderen. De kleuren staan op LAB kleuren, de resolutie op 300 dpi en we vergroten de pasfoto naar 250%. De andere opties zijn niet van toepassing bij deze scan. Daarna kiezen we voor Prescan, wanneer deze ook klaar is maken we de definitieve uitsnede. Ook kunnen we de pasfoto nog een beetje bij draaien. Als dat gebeurt is kiezen we voor Scan, en daarna kunnen we de foto verder in Photoshop bewerken.

2 .7. 2

Vragen Hoe wordt een scan geschikt gemaakt voor het internet? Dat doe je met het programma: Photoshop. Welke bestandsformaten zijn gekozen? TIFF om te scannen, en JPEG voor op het internet, omdat die de beste kwaliteit is voor foto’s op het internet. Welke resolutie is gekozen en waarom? Er is gekozen voor 300dpi, omdat er zo zoveel mogelijk beeldinformatie overblijft. Welke kleurdiepte is gekozen en waarom? 48bit, dit is een standaard kleurdiepte. Welk programma kies je voor het webklaar maken van bestanden? Photoshop. Referentie: Collega’s: Willy pag.32

O P D R AC H T E N

FA S E

2

Opdracht 8 2 . 8 .1

Het kan voorkomen dat klanten zelf geen vormgeving aanleveren van het te vervaardigen produkt. Het maken van het ontwerp wordt dan ovegelaten aan de webdesigner. Kennis over wat een grafisch verantwoord produkt is, heb je ook nodig om met klanten te communiceren. In deze opdracht verdiep je je in de eisen die aan de kwaliteit van internetsites worden gesteld. je maakt verschillende vormgevingen van eenzelfde site en bedoordeelt deze samen met je praktijkopleider. Voor deze opdracht gebruk ik de order van Bruinsma Kantoor. Ik heb hiervoor 3 verschillende ontwerpen gemaakt. Deze heb ik samen met Sybe beoordeeld. Het verslag daarvan staat op internet: http://www.douglasdesign.nl/stageverslag/fase2/

Referentie: Collega’s: Sybe Meer informatie: Web: www.douglasdesign.nl/stageverslag/fase2/ Web: www.erikotten.nl pag.33

7

E I S U L C N OC

CO N C L U S I E

CO N C L U S I E

Conclusie Hier komt een conclusie te staan.

pag.35

8

P A M E T I S

S I T E M A P

S I T E M A P

Sitemap Hieronder staan de sitemap van mijn digitale stageverslag. U kunt het digitale stageverslag bekijken op: www.douglasdesign.nl/stageverslag/

STAG E P L A Z A S I T E M A P CO N TAC T F OTO ’ S CO N C L U S I E B R O N N E N

FA S E

1 O O O O O O O O O

P P P P P P P P P

D D D D D D D D D

R R R R R R R R R

A A A A A A A A A

C C C C C C C C C

H H H H H H H H H

T T T T T T T T T

1 2 3 4 5 6 7 8 9

H E L P OV E R D E S I T E CO N TAC T

FA S E

2 O O O O O O O O

P P P P P P P P

D D D D D D D D

R R R R R R R R

A A A A A A A A

C C C C C C C C

H H H H H H H H

T T T T T T T T

1 2 3 4 5 6 7 8

W E L KO M CO N TAC T

pag.37

9

N E N N O R B

B R O N N E N

B R O N N E N

Bronnen Boeken Dynamisch Webdesign 3e druk door Patricia Bosselaar ISBN: 90-430-461-8 Uitgeverij: Addison Wesley Webdesign in de Praktijk 4e druk door Peter Kentie ISBN: 90-430-0181-3 Uitgeverij: Addison Wesley Using Dreamweaver 4 Uitgeverij: Macromedia Web www.d0uglasdesign.nl www.douglasdesign.nl/stageverslag/ www.norton.com www.macromedia.com www.adobe.com www.microsoft.com www.quark.com www.apple.com www.wacom.nl www.arbo.nl www.erikatwork.nl www.web-con.nl Folders U en uw werkplek

pag.39

10

GA L S R E V

OV E R T I D

R E VO

D I T

V E R S L A G

OV E R

D I T

V E R S L AG

Over dit verslag In dit papieren verslag zijn niet alle opdrachten volledig opgenomen. Voor voorbeelden en de rest van het verslag verwijs ik u naar de digitale versie van dit verslag: www.douglasdesign.nl/stageverslag/ Opmaak Voor dit verslag heb ik de volgende lettertypen gebruikt:

ADScalaRomein ADScalaItalic ADScalaTabBold TheMix 8C-ExtraBoldCaps En de volgende kleuren: Kleur: Zwart

Kleur: Pantone 285 CV

Kleur: Pantone Orange 021 CV

Kleur: Pantone 427 CVU

pag.41

N E T TOK I R E

2 0 0 2

GA L S R E V E GATS

.P O T S