HTML5-template-website

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 “oud”.

Het wordt een portfolio-website voor jezelf, beter gezegd: het wordt de website van je eigen bedrijf. Als je al een eigen domeinnaam hebt en eigen webhosting dan kun je de website daar ook meteen opzetten.

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?
  • 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 jouw logo ook bovenaan in de website, als identiteit.
  • In de toekomst (periode 4) komen hier ook plaatjes bij. Je moet dus straks ook nog weten hoe je nieuwe plaatjes toevoegt: maak een korte handleiding. Zet er alvast 6 lege plaatjes neer, grijze placeholders bijvoorbeeld.
  • Menu: werkt dat, en staan er links naar je oude website + naar je WordPress-site?
  • Contactformulier: is dat er, en werkt het?
  • Social media (zowel Sharing als Follow): werkend?
  • Staat het online, op gameschool.nl/jenaam of op je eigen domein?
  • Zijn de dingen die er niet bijhoren weggehaald?
  • Staat er een CV bij, als knop in het menu? Mag als pdf of als HTML.
  • Is de title in de head aangepast en goed, op alle pagina’s?
  • Is er een favicon, en werkt die ook op mobiel?

Een .ste file maakt het leven makkelijk

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 de ste te dubbelklikken. Een ste-file is NIET de website zelf, maar alleen de server-instelling.

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.

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 zonder script. En dat is vaak het geval. In jouw formulier wijzig je dan alleen de action:

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

Soms staat er geen werkende knop bij in het formulier. Probeer dan deze code:

<input type="submit" value="Verstuur">

Contactformulier PHP

Als een formulier ontbreekt kun je dat ook toevoegen, inclusief het script. Je kan 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, niet vanaf je computer.

Social media buttons

Social media integreren op je site kan op verschillende manieren. Een Follow button is bijvoorbeeld alleen maar een plaatje van een blauwe F met een link naar jouw Facebook.

Sharing buttons maken het voor de bezoeker makkelijk om je pagina snel te delen. Je kan die toevoegen met online services zoals Addthis of Sharethis. Als de social media ikonen al goed in je website staan, dan hoef je alleen de sharing-code toe te voegen. Je hebt dan geen Addthis of Sharethis nodig. In je Facebook-ikoon wordt het dan dit (verander alleen jouwsite):

<a href="http://www.facebook.com/sharer.php?u=http://jouwsite.nl" >
Hier staat jouw Facebook-ikoon</a>

Elk social media systeem heeft zijn eigen code voor sharing, zie hier uitleg met alle voorbeelden. Twitter, Linkedin, Google+ en Email gaan bijvoorbeeld als volgt (verander in die code jouwsiteje tekst en jouwtag):

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

Het grote voordeel van deze methode is dat er geen scripts nodig zijn, dat je de vormgeving volledig in de hand hebt, dat het supersnel is, en dat het niet afhankelijk van externe services.

Een Twitter-feed op je website toevoegen kan met Twitter Widgets. In deze feed kan je bijvoorbeeld je laatste tweets afbeelden, of tweets over een bepaald onderwerp. Je hoeft alleen wat HTML-code in te plakken. Op een vergelijkbare manier kun je ook een Facebook Activity feed op je website zetten.

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.

Favicon, ook op mobiel

Check het, voeg je website toe op je homescreen van je mobiel. Is je favicon daar ook goed?Kijk anders op http://rocweb.nl/responsive-design/ om het te fixen.

Een paar voorbeelden

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