Digital skills
1. Introductie
De snelheid van verandering is enorm toegenomen
Een bedrijf moet heel “agile (projectmanagement)” reageren in de 21 ste eeuw.
= een iteratieve (zich herhalende) methode om wensen en eisen
boven water te krijgen en aan die steeds veranderende wensen en
eisen te blijven voldoen.
Je loopt nu plots het risico dat terwijl je een product nog aan het ontwikkelen bent het reeds
voorbijgestreefd is.
Video “Did you know 2014”:
- Technologie is overal aanwezig in ons leven: tijdens eten, werk, transport…
- Men doet veel meer verschillende jobinhouden in hun carrière dan vroeger
- Beroepen ontstaan en verdwijnen sneller en sneller
- Beroepen die 10 jaar geleden nog niet bestonden: Digital marketing manager, Android
developer, data architect…
- E-reputation = je online imago op sociale media zoals Facebook, Insta…
- SoLoMo = social location mobile, door al je activiteiten toe te spitsen op je lokale omgeving,
er daarbij van uitgaand dat je de sociale media kan gebruiken en dat je dat ook best meteen
mobile doet, ligt het goud bij wijze van spreken al voor het grijpen
- De technische informative verdubbelt elke 2 years
2. Website bouwen met CMS
2.1 CMS
Wat is een CMS
Een Content Management Systeem is een software waarbij zonder technische kennis over
website development met een WYSIWYG (what you see is what you get) editor een vrij
toonbare website kan ontwikkeld worden.
Zo'n oplossing maakt gebruik van stijl templates zodat makkelijk een consistente look tussen
de verschillende webpagina's bereikt wordt.
Waarom een CMS gebruiken?
Met CMS communicatieverantwoordelijke hoeft geen ICT deskundige te zijn, hij kan vlot
wijzigingen aan de website aanbrengen. Dat staat in contrast tot het gebruik van een
webdesign agency waar je voor elke wijziging hen moet aansturen (en betalen). Gevolg: met
een webdesign agency zullen er minder wijzigingen gebeuren. Voordeel bij CMS is dat je hele
website een mooie consistente look heeft, maar het kan gebeuren dat er een dead-end is
wanneer je meer functionaliteit wenst.
, Oplossingsvormen
Een public cloud oplossing:
Je maakt gebruik van een gehoste, reeds kant en klare technische oplossing met een CMS.
Het enige wat je moet doen is de website aanmaken. Meestal kun je naast een website ook
een webshop aanmaken. Van technisch beheer, beveiliging enz... hoef je je niets aan te
trekken – dat wordt allemaal geregeld door de cloud provider.
Een open source oplossing (en COTS package):
Je krijgt de software uit de community. Best kies je een van de populairs CMS pakketten.
Het zal mogelijk zijn om zelf de inhoud vlot te wijzigen zelfs als je geen webdesigner bent.
Je moet nu wel beslissen wie het technisch onderhoud waarneemt, waar dit gehost wordt,
wanneer je naar een volgende versie overgaat, enz... Je hebt meer vrijheid, maar ook
meer verantwoordelijkheden.
Voorbeelden zijn Wordpress, Joomla, Druppal,...
Maatwerk:
Er zal veel custom geprogrammeerd wordt. Geen CMS = veel mooier en interactiever
dan wat met een CMS mogelijk was. Maar let op: mogelijk trap je in de val dat je steeds
afhankelijk bent van het service bedrijf om wijzigingen aan te brengen aan je website.
Dit zal veel duurder uitvallen.
2.2 Vendor evalueren
Een CMS evalueer je aan de hand van het volgend trio:
Het product
heeft het de gewenste kwaliteit, performantie en functionaliteit ?
Prijs
Hoe relateert de prijs tot het scenario dat je wil volgen ?
Dienstverlening
Kun je hulp krijgen van dit bedrijf indien nodig, of is er enkel een mailadres waar
niemand op reageert... Wat is het serviceniveau dat men kan aanbieden. Zijn ze
24x7 bereikbaar ? Waar zitten ze fysisch. Welke talen worden ondersteund.
3. Website usability
3.1 Bouwstenen
HTML
Hyper Text Markup Language is de “taal” die gebruikt wordt om webpagina’s te
beschrijven. Je browser leest HTML instructies en weet daardoor hoe en wat te
tonen.
HTML ondersteunt hyperlinks/koppelingen (documenten en bestanden die
verbonden zijn door direct volgbare verwijzingen)
HTML is een opmaaktaal voor tekst, kopjes, indeling van paragrafen,
tabellen en afbeeldingen en multimedia
HTML bestaat uit platte tekst waarin met markeringstekens/tags is
aangegeven hoe de tekst moet worden geïnterpreteerd/er moet uit zien.
HTML zelf voorziet alleen in zeer eenvoudige gebruiksinteractie:
het aanklikken van verwijzingen
het invullen van tekstvelden
het klikken in afbeeldingen
, Tegenwoordig is het de bedoeling dat de tags in het document alleen structuur en
algemene eigenschappen van de tekst aangeven. Voordelen de opmaak kan ineens
worden gewijzigd voor alle documenten tegelijk + er kunnen verschillende manieren
van opmaken worden gebruikt die gericht is op de gebruiker of het weergevende
apparaat.
De DOCTYPE declaratie geeft aan dat wat volgt volgens de
HTML standaard is
De tekst tussen html en /html beschrijft de web pagina
De tekst tussen body en /body bevat de zichtbare pagina
inhoud
De tekst tussen h1 en /h1 is een hoofdtitel, tussen h2
en /h2 en ondertitel en tussen h3 en /h3 nog een lager
niveau titel
De tekst tussen p en /p is een paragraaf met tekst
Een bullet lijst start en eindigt met ul en /ul (unordered
list) en ieder lijntje start en eindigt met li en /li
CSS
= Cascading Style Sheets definiëren hoe HTML elementen moeten weergegeven
worden.
Styles lossen een groot probleem op
HTML was nooit bedoeld om een document te formatteren.
HTML was bedoeld om de inhoud van een document vast te leggen en daarbij wel
aan te geven welk soort inhoud iets was, maar niet hoe de tekst er moest uitzien.
Door CSS te introduceren is nu het formateringsdetail losgekoppeld, en kun je
vlot de looks van een hele website wijzigen zonder iets aan de HTML te moeten
wijzigen.
Stijlen worden bewaard als externe .css bestanden. Wijzig die, en heel je website
wijzigt qua looks!
JavaScript (JS)
Talen zoals HTML en CSS zijn beschrijvend. Je kunt daar niet echt programma's mee
schrijven die complexe interacties besturen. Dan heb je een echte programmeertaal
nodig.
Met de introductie van JavaScript ontstonden de eerste mogelijkheden om
webpagina's interactief te maken. Dit werd later Dynamic HTML genoemd.
Het trio HTML5, CSS3 en JS zijn de aanbevolen combinatie van tools om een
moderne website mee op te bouwen die op de meeste platformen kunnen werken.
!!Blijf zeker weg van tools zoals "Flash" (Adobe) en "Silverlight" (Microsoft), omdat
deze de mogelijkheid van gebruik op tablet pc's, smartphones hypothekeren!!
3.2 Best Practice
= manier waarop je een site opbouwt
Bespreek een website a.d.h.v. aandachtspunten: Toegankelijkheid, Identiteit, Navigatie, Inhoud
, Toegankelijkheid
Het gaat hier niet enkel over pure gebruiksvriendelijkheid, maar ook alle andere redenen die ertoe
kunnen leiden dat de gebruiker niet vlot toegang heeft tot de informatie op de website. Als de
website niet laadt op je tablet, niet leesbaar is, dan loopt de bezoeker weg, en ben je een potentiële
klant kwijt.
1. Het laden van de webpagina’s verloopt voldoende snel
Ook op tragere verbindingen (zoals een 3G verbinding) dient de website binnen seconden te laden.
Meer en meer websites worden door mobiele gebruikers bezocht: een te complex fancy
openingsscherm dat enkel vlot werkt op een laptop met goede internetverbinding is een bijzonder
slecht idee, hoe mooi die ook is.
2. Zorg voor voldoende contrast tussen tekst en achtergrond
Vaak dient in moeilijke omstandigheden gewerkt, zoals op een bank in de zon met een tablet. Heb je
gedacht aan bezoekers die kleurenblind zijn of beperkt zicht ? Beoordeel dus je kleurgebruik niet
enkel op jouw professionele monitor in ideale omstandigheden.
3. Font grootte en lijnafstanden bieden een goede leesbaarheid
Wellicht is net een beetje te groot de beste keuze voor lettergrootte. Dan kom je tegemoet aan wie
iets slechter ziet zonder dat het storend wordt voor wie perfecte ogen heeft en de ideale monitor
gebruikt. Je tekst wordt ook veel beter leesbaar als je om de 5 regels een deelonderwerp afsluit en
een blanco lijn inlast.
4. Geen Flash en wees spaarzaam met animatie
Een animatie bij het inladen van de site zal waarschijnlijk een traag ladende site opleveren. Wees je
ervan bewust dat dit sommige bezoekers die puur op zoek zijn naar informatie irriteert en mogelijk
wegjaagt. En als je het doet, gebruik dan enkel een moderne technologie die op alle platformen
(smartphone, tablet) werkt. Geen Flash dus, dat werkt niet op iPhone en iTablet. Maar wel moderne
HTML5 en CSS3.
5. Beelden/foto’s voorzie je van een ALT Tag die samenvat waar het plaatje over handelt
Wie een gezichtshandicap heeft maakt mogelijk gebruikt van software die voorleest. Zoekmachines
kunnen beelden enkel indexeren en vindbaar maken als je hen vertelt over wat het plaatje gaat. In
CMS systemen kun je steeds bij een foto de alternatieve tekst invullen bij de beeldopties.
6. Site heeft een Not-found/404 Pagina
Als een pagina van je website verwijderd werd, maar mogelijk nog ergens in zoekresultaten of in een
favoriet verschijnt, dan loopt je bezoeker gegarandeerd weg indien men een brutale "404 Not Found"
foutmelding voorgeschoteld krijgt. Stel je webserver zo in dat in zo’n geval naar je home pagina of
naar een andere zinvolle alternatieve pagina gesprongen wordt zodat de bezoeker wel op je website
blijft hangen.
Identiteit
