Wouter Sempels

Een blog over webdesign & desktoppublishing.

[waltersschoolblog]

Eindpresentatie

Onze eindpresentatie gaat over design software, meer bepaald over Vectorworks en Vivien. Dit is software dat heel handig is om een evenement voor te bereiden en het zodanig voor te stellen aan opdrachtgevers, teamleden of leveranciers. Er wordt een beter beeld gecreëerd dankzij realistische beelden die aanpasbaar zijn. Wilt u meer weten, volg onze presentatie hierboven, gemaakt met Slid.es. Liever op de website volgen, klik dan hier.

[waltersschoolblog]

Presenteren

Met onze presentatie in zicht overlopen we enkele online presentatiemogelijkheden. Een opsomming van enkele frameworks die werken met het importeren markdown:

Reveal.js

Bespoke.js

Flowtime.js

Impress.js

Deze werken dankzij Javascript. Enkel zijn ze niet te makkelijk om mee te werken, daarom bestaat er Slid.es. Een WYSIWYG editor voor het maken van presentaties. Klik op de links om een kijk te nemen hoe je op een meer innoverende en interessante manier kunt presenteren.

[waltersschoolblog]

Drukwerk

Niet alleen wordt er bij desktoppublishing veel aandacht besteed aan de digitale media, maar eveneens aan het drukwerk. Beiden hebben een standaard dat moet worden nageleefd om het design tot een goed einde te brengen.

Om te beginnen, is een goede voorbereiding nodig. Het gebruik van een page layout programma, zoals eerder vermeld, is dan ook sterk aangeraden. Enkel zo kan je een creatief ontwerp drukken op papier. De voorbereiding noemt prepress. In dit proces komen verschillende acties aan de pas:

Drukdoorgang: Hierin wordt de volgorde van de kleuren bepaald. Een pers drukt namelijk iedere kleur afzonderlijk (RGB of CMYK).

Trapping: Indien er kleine openingen ontstaan tussen objecten tijdens het drukken, zorgt het programma automatisch voor een verkeerde registratie tussen drukeenheden. De drukpers wordt in de val gelokt en de objecten sluiten zich aan bij elkaar.

Snijmerken: Het informeren van de drukken waar en hoe hij/zij het mag snijden.

Paskruisen: Kruisjes om kleine afwijkingen te vermijden (3mm is maximum toegelaten).

Er bestaan enkele technieken voor het drukken:

Hoogdruk: Een techniek waarbij het beeld, als een stempel, hoger ligt dan de drukvorm. Een voordeel hiervan is dat het simpel is om te gebruiken.

Diepdruk: Dit is een omgekeerde techniek van hoogdruk waarbij het beeld lager ligt dan de drukvorm. Denk hierbij aan bankbiljetten of gravuren.

Vlakdruk: In tegenstelling tot diep- en hoogdruk is het beeld vlak op de drukvorm. Dankzij een combinatie van water (onbedrukt deel) en vet (bedrukt deel; inkt) is dit mogelijk, beiden stoten elkaar af.

Zeefdruk: De drukvorm is een zeef. Op de stof wordt er vernis aangebracht op de delen die niet ingekleurd mogen worden. Wanneer er inkt over de stof wordt gegoten, zal enkel het beeld doorsijpelen.

Een moderne manier van drukken is bijvoorbeeld het laserprinten. Deze vorm maakt gebruik van warmte om het beeld te smelten op het papier.

Verder is er ook fotografie. Voor dit chemisch proces zijn de volgende begrippen belangrijk:

Halftone: Een continuous tone, maar met lijnen bestaand uit punten.

Rasteren: Het halftonen beeld omzetten in een raster van punten om het af te drukken.

Separeren: Het verdelen van de kleuren in basiskleuren (RGB).

Resolutie: Het scherp beeld.

Foto's horen een minimum van 300ppi @ 100% te hebben.

Last but not least, speelt papier de belangrijkste rol in dit verhaal. Hou rekening met gewicht (gram per m²), dikte, opaciteit (doorzichtigheid), kwaliteit, formaat en looprichting.

[waltersschoolblog]

Soorten documenten

Aangezien er verschillende types van documenten bestaan, moet een computer in staat zijn om een onderscheid te maken.

Voor iedere soort structuur van een document bestaat er een gepaste tekst processor.

Met een text editor ben je in staat om plain text te typen dat nadien  bewerkt wordt. Dit wil zeggen dat er een code moet worden ingevoerd in de tekst indien je de opmaak wilt veranderen (denk hierbij aan de tags van HTML), dit is beter gekend als 'WYSIWYM' of 'what you see is what you mean'. Text editors worden bijvoorbeeld gebruikt bij het opmaken van HTML (denk aan Notepad).

Een word processor (bijvoorbeeld MS Word) heeft de codes niet zichtbaar gemaakt voor de gebruiker. Dit is een voorbeeld van 'WYSIWYG' of 'what you see is what you get' en bewerkt de tekst op iedere mogelijke manier met een simpele druk op de knop. Het document wordt op een zichtbare manier bewerkt.

Is de structuur van het document eerder een met verschillende eigenschappen, dan is het gebruik van een document processor aangeraden. LyX is hiervan een voorbeeld. Het legt de nadruk op de eigenschappen door de opmaak ervan automatisch te bewerken. Zo kan er een database gecreëerd worden waarin je op een simpele manier data kunt terugvinden. Document processors maken gebruik van WYSIWYM.

Desktoppublishing is ten slotte een page layout processor waarmee de focus wordt gelegd op de visuele en grafische vormgeving van een document. Het is populair voor drukwerk (denk hierbij aan Adobe InDesign).

Een ander onderscheid tussen documenten, zijn de soorten bestanden waarin ze worden bewaard:

Text file

Binary file

Het grote verschil tussen beiden is dat binary files enkel te openen is in de software waarin het bewaard werd. Dit kan leiden tot het verlies van een overvloed van informatie indien de software in de toekomst vergeten wordt. Het is onvermijdelijk dat we nieuwe software gaan gebruiken, daarom hebben text files een groot voordeel dankzij hun open source.

Ten slotte even verduidelijken hoe een document wordt weergegeven in de ogen van een computer. Markup is de opmaaktaal dat instructies bevat voor de opmaak van een document. Eerder vermeld is HTML, maar ook CSS, SGML en Markdown zijn voorbeelden van markup. Dat laatste is een lightweight versie van HTML, simpel te gebruiken en handig als communicatie tussen gebruikers. Wil je eens proberen, surf dan naar de site van Stackedit.

[waltersschoolblog]

Grafische vormgeving

It's not about you. Er bestaan nu eenmaal enkele regels die je moet respecteren, wat jouw smaak dan ook moge zijn. Enkel de meest ervaren kunnen enkele regels aanpassen of overslaan.

The audience is king. Jouw design heeft geen nut wanneer het doelpubliek zich erin verdwaalt. Hou rekening met je publiek en focus je op functionaliteit.

Form follows function. Maak je teksten leesbaar en creëer diepte bij iconen (denk hierbij aan flat design).

Less is more. 'Trop est trop!' Om de aandacht van je doelgroep aan te trekken is een sterk design nodig. Echter kan dit overdreven of onoverzichtelijk worden. Weet waarmee je je doelgroep kan uitnodigen en hou het toch nog simpel.

Vermijd clip art en stock photos. Als het betaalbaar is, laat je afbeelding zelf ontwerpen of fotograferen. Zorg dat de resolutie hoog is, het beeld simpel en de hoeken afgerond.

Clean up the raw material. Lees je tekst grondig na en haal al de fouten eruit. Zorg voor een afgewerkte tekst en let op volgende punten:

Spelling

Titels

Alinea's

Herhalingen

De Gulden Snede en proporties. Beter te klein, want klein is stijlvol. Groot moet overdreven zijn en duidt het belang aan. Zinnen blijven kort en marges worden gerespecteerd.

Typografie. De kunst van het vormgeven van tekst bevat eveneens zijn eigen regels:

Na eenheden zet je geen punt

Een apostrof is geen weglatingsteken

Een weglatingsteken voor de letter

Gebruik van professionele lettertypes

Gebruik van enkel 1 lettertype

Titels met hoofdletter, maar zonder punt

Uitlijnen

Cijfermateriaal moet rechts uitgelijnd worden

Kleuren. Zorg voor samenhang in je kleuren. Kies hiervoor 5 tinten van een bepaalde kleur.

[waltersschoolblog]

Software

Om te functioneren, heeft hardware software nodig.

Embedded software en firmware: noodzakelijk voor de aansturing van hardware. Aangepast aan de gebruiker om software op een makkelijke manier te gebruiken.

Operating system software: Software dat de connectie vormt tussen het besturingssysteem en de hardware. Bijvoorbeeld Windows, OSX, Linux, iOS, Android

Bedrijfssoftware: Pakketten van software dat beschikbaar wordt gemaakt voor medewerkers van een bedrijf of instelling. Bijvoorbeeld Microsoft Office.

Application software: Applicaties die de gebruiker kan benuttigen. Bijvoorbeeld Windows Media Player.

Software programming languages: Software dat de instructies vertaalt in programmeertaal. Bijvoorbeeld HTML, JAVA, ...

Plugins: Aanvullingen om software beter te maken.

Interfaces maken de communicatie tussen machine en mens makkelijk door een medium te zijn dat het binair systeem (1/0) vertaalt in iets dat de gebruiker verstaat en omgekeerd.

Application programming interface: Het mogelijk maken van interactie tussen verschillende software.

Graphical User Interface: interactie via grafische beelden, widgets en tekst.

Touch user interface: interactie via aanraking.

Voice–user interface: interactie via stem.

Enkele trends in software zijn zeker en vast de web- en mobile-apps. Met hun responsive interface en design zijn ze hedendaags niet meer weg te denken.

Een andere trend is cloud computing. Hierbij ga je een netwerk van computers creëren om gegevens aan elkaar beschikbaar te stellen. Deze worden bewaard in de cloud dat op om het even welke computer bereikbaar is.

[waltersschoolblog]

[waltersschoolblog]

Hardware

Ieder vervangbaar onderdeel van een computer dat het geheel doet functioneren; van het exterieur als een beeldscherm of een toetsenbord tot het interieur als een processor of een harde schijf. Hardware werkt via het binair systeem (1/0 of aan/uit). Voor persoonlijk gebruik was de personal computer de eerste in staat om de vele taken uit te voeren waar eerder meerdere elektronische of mechanische apparaten voor nodig waren. Eindelijk was het mogelijk om de nodige hardware samen te bundelen in een doos. Dit was het startschot van een eindeloze verbetering van hardware en vernieuwende apparaten. Sindsdien heeft de computer een ware evolutie doorgemaakt. Dankzij de hoge populariteit kunnen we nu over een laptop, tablet of smartphone bezitten en het einde lijkt nog niet in zicht.

Technologie is hedendaags gekenmerkt door z'n small, portable computers. Denk maar aan Google's nieuwste project, Google Glass of een Pebble. Beiden een draagbare computer in de vorm van een bril of een horloge met verschillende functies. Een ander voorbeeld is een Fitbit, dat informatie over jezelf opslaat tijdens het sporten. Met een verbetering van hardware, ligt de focus eveneens op de resolutie waar de gebruiker mee te maken heeft. De lat wordt hoger gelegd op de resolutie van bestanden en daarvoor moeten schermen aangepast worden. De hoogst ontwikkelde schermen op de markt zijn momenteel Retina schermen met 326 PPI (Pixel per inch).

[waltersschoolblog]

HTML

HyperText Markup Language is een opmaaktaal om tekst een vorm te geven voor op het web (denk aan het cursief maken van een tekst of een kleur geven aan de titel). Andere opmaaktalen zijn CSS (om de stijl aan te passen) en Javascript (om webpagina's interactief te maken). HTML kan geschreven worden in Notepad, om documenten een vorm te geven met een meer gesofisticeerd programma kan je gebruik maken van Adobe Dreamweaver of Sublime Text. Indien je werkt in Notepad, vergeet niet het document op de slaan als .html.

Bovenstaand voorbeeld geeft een duidelijk beeld van HTML. Het document is overvloed met tags: Opening tags & closing tags. Vergeet geen enkel teken of letter, anders bevat het document fouten als de  tekst wordt geopend als webpagina. Alle tags zijn terug te vinden op www.W3schools.com/tags Na afloop kan het document onoverzichtelijk worden, daarom is het bij HTML geen verplichting om de tags naast elkaar te plaatsen. Zo kan je alles op een enkele regel plaatsen, dit maakt het makkelijker om fouten terug te vinden en te bewerken. Met de meer gesofisticeerde software, kan men verschillende codes een kleur geven om het onderscheid duidelijk te maken. Niet alle tags zijn zichtbaar op de webpagina, zo is de informatie over het document of meta-data niet toonbaar. Door het buiten de body tags te plaatsen, maak je het onleesbaar. Dit wordt voornamelijk gedaan om de SEO of Search Engine Optimalisation te verhogen met trefwoorden.

[waltersschoolblog]

Netwerken

HOE? Een computer heeft een moederbord met daarop een werkgeheugen, geluidskaart, videokaart, een heel netwerk van chips maar vooral een processor die al de data ontvangt en bewerkt. Via de knooppunten van een computer, de nodes, kan men computers fysiek verbinden met kabels om zo een netwerk te creëren. Op kleine basis noemen we dit een intranet, dit is wanneer alle computers van bijvoorbeeld een kantoor met elkaar verbonden zijn via een centrale computer. Deze centrale computer is op zijn beurt verbonden met een centrale computer bij een provider of host, denk maar aan Telenet of Belgacom. Het is een verzameling van intranets, dat we het Internet noemen. Deze hosts zijn enkel baas over uw toegang aan het Internet, zelfs niet de 10 à 12 grootste hosts in de wereld kunnen zich de baas van het internet noemen. Toch kan het ook zonder een provider of host. Op sommige plaatsen maakt men gebruik van ad-hocnetwerken. Dit zijn mobiele netwerken zonder centrale computer, dus zonder host en dus een open netwerk waar veel mensen in een gebied gebruik van kunnen maken. Om de data betrouwbaar uit te wisselen, worden er regels opgesteld, ook protocols genoemd. Het Internet Protocol (TCP/IP) is de standaardprotocol voor te communiceren op netwerken. Nog enkele voorbeelden zijn HTTP of FTP. WAT? Het internet bestaat uit:

Publicatie

Data Transfer

Communicatie (zoals Voice over Internet Protocol of Instant Messaging.)

Het World Wide Web, de verzameling van alle webpagina's, is dus maar een onderdeel van het Internet. Met een Open Source Software kun je een webpagina ontleden en zien dat het een document is, geschreven in platte tekst. Met behulp van markup tags, kan HTML de platte tekst in een webpagina beschrijven (bijvoorbeeld het vet maken van een woord of een hoofding plaatsen). Webbrowsers hebben specifieke rendering engines die deze tekst omzetten in grafische webpagina's, zo beschikt Chrome en Safari over Webkit en Firefox over Mozilla. Voor data te wisselen, maakt ATP het voor computerprogramma's makkelijker om te communiceren met elkaar. WANNEER? 1957: Spoetnikcrisis, een keerpunt in de Koude Oorlog. Toen de Sovjet-Unie hun Spoetnik satelliet lanceerde, zorgde dit voor zorgwekkende gevoelens bij de Verenigde Staten. Men onderschatte de techniek van de Sovjet-Unie en plots bleken ze kwetsbaar te zijn voor nucleaire aanvallen. Het gevolg was een grote investering, onder andere in micro-electronica en communicatie om aanvallen te voorkomen. 1960: De eerste TCP/IP 1971: De eerste e-mail 1978: Ontstaan van SPAM (Op de dag van vandaag bestaat 80 - 90% van het Internet uit SPAM) 1984: DNS, systeem van domeinregistratie 1990: Robert Cailiau & Tim Berners-Lee werken samen aan CERN-documentatie wat leidde tot het World Wide Web 1997 - 2000: Internet bubble, als gevolg van de groei van de Internet-sector rezen de waarden op de aandelenmarkt 2005: Web 2.0, Internet wordt interactief met applicaties 2009: Ontstaan van mobiel Internet

[waltersschoolblog]

Introductie

Deze blog gaat uitsluitend over het vak 'Webdesign & Desktoppublishing'. De komende weken zal ik al mijn ervaringen omzetten in woorden in dit online journaal.

Samen met mijn klas had ik enkele verwachtingen van dit vak, misschien worden ze nog ingelost maar op dit moment ben ik er niet echt bij wat de doelstellingen zijn. Twitter had ik al, net als Tumblr en daarmee is alles gezegd over de praktijk van de vorige dagen.

Buiten het aanmaken van beide accounts, hadden we ook een open discussie over zakelijke communicatie van vandaag de dag. Persoonlijk geloof ik nog in e-mails, in tegenstelling tot onze lector dr. Soudan. Het blijft nog steeds de betere manier om te communiceren op een formele en professionele manier, maar ook informeel. De keuze tussen beiden wordt trouwens gemaakt aan de hand van de contactpersoon, niet aan de hand van welke tool je gebruikt dus ik ben het hierbij niet eens met onze lector ("Een mail begint altijd met geachte en een tweet is meer straight to the point"). Communicatie moet snel gaan dus het is tijdrovend om iedere mail een voor een te openen, maar belangrijke mededelingen worden onzichtbaar in een enorme Twitterfeed. Mails kun je perfect ordenen en tegenwoordig heb je alles in de hand met je smartphone om snel te reageren. Laat sociale media zijn voor wat het is, de privacykwesties van de online profielen worden al lang in vraag gesteld en om mensen uit je werkomgeving hierbij te betrekken, lijkt mij onnuttig. Een andere optie is een professioneel account aanmaken, maar schakelen tussen accounts kan ook tijdrovend zijn.

Twitter is een goede tool, maar het hoog niveau dat nodig is voor zakelijke communicatie is er nog niet. Tumblr daarentegen is een goede manier om jezelf te presenteren, zowel informeel als formeel.

[waltersschoolblog]

Blogging is a great way to show your talents and interests to prospective employers, while adding an edge to your resume. If you blog consistently it shows your dedication, passions and creativity - all of which are key attributes employers look for in job candidates.

Lauren Conrad