Opdracht HTML5-template-website

Als je snel een professionele website wil, kun je starten met een HTML5-template. Dat heeft grote voordelen: zo’n website is snel en licht, en je kan alles aanpassen. Je hebt dus volledige controle over je site, en je bent snel klaar. Je hoeft alleen de teksten en plaatjes aan te passen.

Ga op zoek naar HTML5 templates, bijvoorbeeld deze “free HTML5 templates“, kies en download er 3, bekijk die in een editor (Dreamweaver). Kies er een uit, maak daar een eerst een kopie van (dan kan je altijd terug) en pas die kopie volledig aan, in Dreamweaver, met je eigen inhoud / beeld /tekst. Zet het online op gameschool.nl/jenaam en zet je oude websites in een submapje “code”.

Het wordt een portfolio-website voor jezelf, beter gezegd: het wordt de website van je eigen bedrijf. Als je die al hebt, dan kan het voor een klant zijn. Overleg dat dan met mij.

De minimale eisen

  • Teksten aanpassen. Zijn ze goed, foutloos en van jezelf? Is alles in één taal?
  • Plaatjes aanpassen. Zijn ze van jezelf? Geen stockfoto’s! Zijn er minstens 9 goede eigen portfolio-plaatjes of video’s of andere dingen om te laten zien? Kun je bij plaatjes klikken voor een vergroting? Of staan ze al groot in? Staan er bijschriften bij?
  • Menu: werkt dat, en staan er links naar je oude website + naar je WordPress-site?
  • Staat je CV ergens, bijvoorbeeld als knop in het menu? Als PDF of als HTML.
  • Contactformulier: is dat er, en werkt het? Zie meer info onderaan deze pagina.
  • Social Media (kies Sharing of Follow, zie hieronder): werkt het? Zie hieronder.
  • Staat het online, op gameschool.nl/jenaam of op je eigen domein?
  • Zijn de dingen die er niet bijhoren weggehaald? Check ook het copyright-regeltje onderaan.
  • Is de title in de head aangepast en goed, op alle pagina’s?
  • Is er een favicon, en werkt die ook op mobiel? Zie hieronder.
  • In je portfolio laat je eigen werk zien, en werk waaraan je tijdens je stage hebt meegewerkt. Schetsen, tekeningen, websites, video’s, logo’s, fotografie, van alles. Zet de huisstijl die je bij René maakt in deze periode hier ook bij, in minstens 3 plaatjes: 1 overzicht, 1 visitekaartje, en 1 logo of detail uit deze huisstijl.
  • Zet eventueel jouw logo ook bovenaan in de website, als identiteit / huisstijl
  • In de toekomst komen er nog plaatjes bij. Je moet straks ook nog weten hoe je dat doet, en hoe je het online zet: maak een korte handleiding voor jezelf.

Gebruik een .ste file

Gebruik Dreamweaver als FTP-programma. De server-instelling hoef je daar maar 1x te maken en kun je exporteren als een ste-file. Zet dit ergens waar je altijd bijkan, maar niet in de website-map. Bijvoorbeeld in de hoofdmap van je externe schijf. Nu kun je voortaan direct beginnen door deze .ste te dubbelklikken, of door deze te kiezen in Dreamweaver > Site > Manage > Import

Een ste-file is NIET de website zelf, maar alleen de server-instelling.

Favicon / App icon

Een favicon is dat mini-plaatje in de url-balk, en het ikoon dat je ziet als je er een Favoriet/Bladwijzer van maakt, en ook je App-icon, op Android / IOS.
Maak een favicon.png  van 250 x 250 pixels in Photoshop (Save for Web: ⌘-Alt-Shift-S).
Upload dat naar de hoofdmap van je website. Zet deze code in de <head> van al je pagina’s, en verander “Naam”:

<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="favicon.png">
<meta name="apple-mobile-web-app-title" content="Naam">

Tip: Inspecteer element

Bekijk de site in een browser. Rechstklik op een element en kies Inspecteer element (in Safari: Voorkeuren > Geavanceerd > Toon Ontwikkel-menu). Klik op de tab Stijlen en je kunt de css van dat element direct zien, én editen. Er staat ook bij op welke regel het staat in welk css-bestand. Als dit goed werkt, kun je diezelfde css in het echt toevoegen / veranderen in je eigen css-bestand.

Tips: Plaatjes

Met datzelfde Inspecteer element kun je ook zien waar en hoe plaatjes staan. Die staan vaak al onderverdeeld in twee mappen: highres (fulls) en lowres (thumbs). Maar soms staan ze ook in de css, als background. Plaatjes kun je vanuit de Finder direct openen in Photoshop en er iets anders inplakken, en dan overschrijven via bewaar-voor-web (⌘-Alt-Shift-S).

Of je geeft je eigen plaatjes dezelfde naam, en zet ze in dezelfde map als de placeholders. Of je verandert in de code de naam van het plaatje. Je moet dan wel weten hoe groot de plaatjes zijn.

Plaatjes in een pop-up (Lightbox)

Zie deze pagina over Lightbox. Als een Lightbox ontbreekt in je template kun je die zo makkelijk toevoegen. Poptrox of Fancybox kan ook, nog beter zelfs, daar kun je bijvoorbeeld ook Youtube in een pop-up plaatsen. Wel iets ingewikkelder.

Templates bewerken met Dreamweaver

Open de HTML (index.html) in Dreamweaver. De HTML-code kun je wijzigen en bewaren. Bewaar de originele files ook, dan kun je altijd terug en vergelijken. Zet het Window > CSS Designer aan, dan kun je de CSS opzoeken en wijzigen. Je klikt een element aan in de Design-preview, en het CSS Designer paneel toont van dat element alle CSS. Je kan daar alles wijzigen, of met Rechtsklik > Go to code naar de betreffende plek in de CSS-code gaan.

Contactformulier met FormSpree

Je kan een online service gebruiken, bijvoorbeeld Formspree. Lees en bekijk de info op die website. Dit is ideaal als je website al een compleet formulier bevat, maar zonder script. En dat is vaak het geval. Vergelijk jouw form dan met onderstaande form en wijzig alleen de action:

<form action="http://formspree.io/your@email.com" method="POST">

Soms staat er geen werkende knop onderaan bij in het formulier. Probeer dan deze code, en plak alleen de class in van de oude knop:

<input type="submit" value="Verstuur" class="oude-knop">

Contactformulier PHP

Als een formulier helemaal ontbreekt, kun je die ook zelf toevoegen, inclusief het script. Je kan bijvoorbeeld dit bestaande  PHP-script gebruiken. Kopieer die PHP en HTML naar je website-map, en bekijk en edit de code. Upload het en test het online. PHP werkt alleen online, vanaf de webserver.

Social media buttons

Social media integreren op je site kan op verschillende manieren. Een Follow button is makkelijk: bijvoorbeeld het F-logo van Facebook met een link naar jouw Facebook.

In plaats van Follow buttons kun je ook Sharing buttons maken, zodat je bezoeker jouw pagina snel kan delen. Je kan die toevoegen met online services zoals Addthis of Sharethis. Maar als de social media ikonen al mooi en goed in je website-template staan, hoeft dat ook al niet: Voor een Follow-button voeg je als link jouw webadres toe, en voor de Sharing-buttons kan je sharing-code toevoegen: zie hier uitleg met alle voorbeelden. Facebook, Twitter, Linkedin, Google+ en Email gaan bijvoorbeeld als volgt:

Verander de vette groene dingen: jetekst, jouwtag, jouwsite.
jouwsite.nl
is bijvoorbeeld gameschool.nl/jenaam

                <!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://jouwsite.nl" > Hier staat vaak al het Facebook-ikoon als font, svg of plaatje</a>

		<!-- Twitter -->
<a href="http://twitter.com/share?url=http://jouwsite.nl&text=Je tekst&hashtags=jouwtag">
Hier het ikoon</a>
		<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://jouwsite.nl">
Hier het ikoon</a>
 		<!-- Google+ -->
<a href="https://plus.google.com/share?url=http://jouwsite.nl">
Hier het ikoon</a>
		<!-- Email -->
<a href="mailto:?Subject=Je tekst&Body=Je tekst">
Hier het ikoon</a>

Een Twitter-feed op je website toevoegen kan met Twitter Widgets. Daarmee kan je bijvoorbeeld je laatste tweets afbeelden, of tweets over een bepaald onderwerp. Je hoeft alleen wat HTML-code in te plakken. Zo kun je een Facebook Activity feed op je website zetten, of Instagram met Lightwidget.

Ikonen als webfonts

Ikonen in HTML5-templates zijn vaak fonts, dus geen png-plaatjes maar schaalbare vector-bestanden. Op Font-Awesome of op icomoon.io meer info daarover, daar kun je ook je eigen ikonen uploaden en converteren naar een webfont via de icomoon App. En hier een lijst met meer van dat spul.

En hier de makkelijkste: het FontAwesome cheatsheet.

Chatbox

Een chatbot wordt tegenwoordig vaak gebruikt voor Help en Klantenondersteuning en is dan superhandig. Zie tawk.to en zie gameschool.nl/cindy.

Een paar voorbeelden

Hier een paar voorbeelden van deze opdracht door studenten:
Juliette  |  Freya  |  Nathalie  |  Alina  |  Devinio  |  Jamie  |  Kilian  |  Melvin  |  Jerry  |  Nadia