Het maken van een blokje

Hoe werkt het maken van een blokje voor de homepagina, het videoarchief of voor video’s onder programmaonderdelen, zoals hieronder afgebeeld?

Om een dergelijk informatieblok op te nemen in een word-document is er een stukje html-code nodig, die vergelijkbaar is met de embed-code die je gebruikt als je een video van Vimeo wilt gebruiken. Hieronder zie je een voorbeeld van die code, die de afbeelding hierboven genereert:

<!-- voorbeeld titel -->

<div class="video" style="margin-bottom:20px; width:690px; height:250px; overflow:hidden; position:relative;"><div class="description" style="width: 240px; height: 250px; background-color: rgb(222, 202, 18); color: rgb(0, 0, 0);"><div style="padding:10px 10px 20px 10px;"><h3><a href="" style="color: rgb(0, 0, 0); text-decoration: none;">voorbeeld titel</a></h3><p style="background-color: rgb(222, 202, 18); color: rgb(0, 0, 0);" class="description">Hier komt tekst die in het gekleurde vlak naast de afbeelding of video komt. Er is een beperkte ruimte, omdat het blokje een vaste afmeting heeft.</p></div></div><div class="media" style="width:450px; position:absolute; top:0; right:0;"><img src="http://www.utwente.nl/gw/sg/afbeeldingen/najaaar.jpg" style="position:absolute; top:0; right:0;"> </div></div>

Om deze code te genereren is er een formulier gemaakt waarin de nodige informatie ingevuld kan worden, waarna er automatisch een stukje code gemaakt wordt. Dit formulier is hieronder afgebeeld:

Wat moet ik doen?

•Ga naar www.utwente.nl/sg/testomgeving en klik op ‘blokje maken’, of ga direct naar http://www.utwente.nl/sg/testomgeving/blokje.html

•vul het formulier in (uitleg hieronder)

•kopieer de gegenereerde code en plak deze in je Word document

•selecteer de code in je Word-document en zet deze in de opmaakstijl ‘HTML Sourcecode’ (standaardfunctionaliteit van webhare).

Formulier invullen

In principe staat er in de invulvelden van het formulier wat er ingevuld moet worden. Als dat niet het geval is, dan staat hierboven een afbeelding waarin je het alsnog kan opzoeken.

1.Titel van evenement.

a.In dit veld kan je de titel invullen. Deze komt vetgedrukt in hoofdletters boven aan het gekleurde vakje aan de linkerkant. Let op dat hij niet té lang wordt, dan kan het zo zijn dat de tekst aan de onderkant uit het vakje loopt.

2.Link naar evenement pagina.

a.Door hier een link in te vullen verandert de titel en de tekst ‘bekijk meer’ onderaan de tekst in een link naar de door jouw gegeven locatie. Dat kan bijvoorbeeld een link naar het programmaonderdeel zijn (http://www.utwente.nl/gw/sg/programma/programmaonderdeel.docx/)

b.Vergeet niet om ook http:// voor de link te zetten. Dus alleen www.utwente.nl is niet voldoende, het moet http://www.utwente.nl worden.

3.Bestandsnaam van plaatje….

i.Je kan in het rechterdeel van het blokje ofwel een afbeelding plaatsen, danwel een video. Voor een plaatje vul je iets in bij dit derde invoerveld, voor een video vul je het noodzakelijke bij het vierde veldje in.

b.De afbeelding die je wil gebruiken moet je met webhare uploaden in de map ‘studium generale > afbeeldingen’.

c.In het invoerveld in het formulier zet je vervolgens alleen de bestandsnaam van de afbeelding met extensie. Als je dus in het mapje ‘afbeeldingen’ de foto ‘levenskunst.jpg’ hebt ge-upload, dan voer je in dit formulier in: levenskunst.jpg.

d.Het plaatje dat je kiest moet geschikt gemaakt worden voor deze toepassing, zie hieronder onder het kopje ‘eisen aan het plaatje’.

4.….of code van een video

a.Iedere video op Vimeo heeft een eigen pagina. Deze ziet er zo uit: http://vimeo.com/67041774. Deze link vind je bovenaan je browser in de adresbalk. Je kan ook naar ‘share this video’, dan staat daar ook de link met een getal.

b.Je hebt alleen dit getal nodig! In dit geval dus ‘67041774’. Deze vul je in in dit invoerveld. Je kan dan vanzelfsprekend niet iets invullen in het invoerveld voor de afbeelding.

5.In het grotere blokje kan je een beschrijving typen die in het gekleurde veldje links verschijnt.

a.De maximale lengte is gelimiteerd tot 330 karakters, aangezien de tekst anders onderaan uit het blokje loopt.

b.Je kan hier ook HTML gebruiken (dit wordt echter wel gezien als karakters en maken de ruimte voor tekst dus iets korter). Bijvoorbeeld:

i.Om iets vet te drukken type je het als volgt: <b>hier komt vette tekst</b>

ii.Om iets schuin te drukken doe je het volgende: <i>hier komt cursieve tekst</i>

6.Tot slot kan je een kleur kiezen uit het rijtje met kleuren onderaan. Dit bepaalt de kleur van het blokje aan de linkerkant. De kleur van de tekst wordt automatisch wit of zwart, afhankelijk van de gekozen achtergrondkleur.

7.Als je op de ‘maak code’ knop klikt verschijnt er een voorbeeldje van het blokje zoals het op de website verschijnt met de door jou ingevoerde gegevens. Je kan deze knop zo vaak aanklikken als je wil, ook tussendoor.

a.Als je tevreden bent kan je onderaan de pagina de code vinden die je kan kopiëren. Die code is automatisch geselecteerd (dus je hoeft eventueel alleen maar ctrl+c te gebruiken zodra je tevreden bent).

b.Omdat een Word-document vol met dit soort code snel onoverzichtelijk is, verschijnt er bovenaan die code een regeltje tekst van de vorm: <!-- voorbeeld titel -->. Hier komt dezelfde titel te staan als die je hebt ingevoerd. Zo kan je snel terugvinden wat alles precies is.

Eisen aan het plaatje

a.De ruimte voor het plaatje is 450x250 pixels. Het gemakkelijkst is als je een plaatje ook dat formaat geeft, maar dat lukt natuurlijk niet altijd. Dan is het handig om het volgende te weten:

b.De afbeelding wordt rechtsboven in de hoek gepltaatst.

c.Vervolgens worden de afbeelding 450 pixels breed gemaakt, en de hoogte schaalt daarbij proportioneel mee. Als de verhoudingen van je plaatje dus niet overeenkomen moet de grootte van het blokje kan dat er gek uitzien, zoals hieronder uitgelegd:


Als het plaatje ‘te vierkant’, of een opstaande rechthoek is, dan loopt het plaatje aan de onderkant weg. Wat buiten het blokje komt, wordt automatisch verborgen, en kan je dus niet zien. Je kan het plaatje niet iets naar boven schuiven, daarvoor moet je een stukje van de bovenkant van het plaatje afsnoepen (en dan is net zo makkelijk om het plaatje de juiste afmeting te geven).


Bij de juiste verhouding zal het plaatje precies in de bedoelde ruimte vallen.

Als het plaatje ‘te plat’ is, dan vult hij wel de breedte in, maar lukt het niet om de ruimte helemaal te vullen. Daar zal dan ook de achtergrondkleur van het linker blokje verschijnen. Probeer dit te voorkomen. Als je een dergelijk plaatje hebt, kan je links of rechts iets van de afbeelding afsnoepen om hem iets minder plat te maken.


Juiste afmeting in photoshop:

a.In photoshop kan je vrij gemakkelijk het plaatje op de juiste afmeting maken. Begin met het maken van een nieuw bestand en voer onderstaande gegevens in. Belangrijk is dat je bij width ‘450’ invult en bij Height ‘250’, en laat de titel voor wat het is.

b.Open de foto die je wilt bewerken (bv adidas.jpg) via file > open, of de sneltoets ctrl + o. deze opent dan in een nieuw schermpje.

c.Klik met de rechtermuisknop op de foto en kies uit het pop-up menu ‘duplicate layer’

d.Het schermpje hieronder verschijnt. Klik dan bij destination > document op de bestandsnaam. Dan verschijnt er een keuzemenuutje. Klik daar op ‘Untitled-1’ (het bestand dat je net nieuw aangemaakt hebt). Je kan nu dit venster afsluiten.

e.In het ‘Untitled-1’ bestand zie je de foto verschijnen. Maar waarschijnlijk zie je er slechts een deel van. Nu moet je hem passend maken. Druk daarom op ‘ctrl+t’, waardoor je in ‘free transform modus’ komt. Nu kan je de foto vergroten en verkleinen. (je kan evt. in- of uitzoomen met de toetsencombinatie ctrl+alt+ ‘+’ voor inzoomen, en ctrl+alt+ ‘-‘ voor uitzoomen. Dat kan er bijvoorbeeld zo uitzien als hieronder:

f.Je kan nu de hoekpuntjes gebruiken om het te verkleinen. Als je dat doet door ‘shift’ ingedrukt te houden, blijven de verhoudingen van het plaatje gelijk. Je kan het bewerken tot je tevreden bent. bijvoorbeeld:

g.Als je op ‘enter’ drukt ga je weer naar de ‘gewone’ modus.

h.Vervolgens kan je het bestandje opslaan.

a.Kies file > opslaan als (save as).

b.Kies vervolgens voor het .JPG formaat.

c.En vul een bestandsnaam in

d.Bij de opties klik je op ok (zorg er voor dat het bestand niet te groot wordt, het is voor een website).

i.Nu heb je een bestandje in de goed afmeting, met precies het beeld erop dat je op de website wilt hebben. Deze kan je in webhare uploaden in de ‘afbeeldingen’ map, zoals eerder genoemd.