Een groot gedeelte van de A–Eskwadraatwebsite is gemaakt met php en daarvan staat de content redelijk vast. Echter, er zijn ook heel veel pagina's op de website die niet met php gemaakt zijn. Dit zijn de publisher-pagina's. Een voorbeeld van zo'n pagina is de contactpagina. Ook commissies en activiteiten kunnen hun eigen publisherpagina krijgen. Neem bijvoorbeeld eens een kijkje op de pagina van de Afterpartcie. Ook deze pagina die je nu leest is in Publisher gemaakt. Om je goed uit te leggen hoe je Publisher moet gebruiken hebben we hier een handleiding voor je geschreven.

Als je een actief lid bent heb je toegang tot de Publisher. Deze kan je vinden bij Service > Intern > Publisher. Als je naar deze pagina gaat zie je een lijst met al je commissies en alle aankomende activiteiten die je commissies organiseren.

Het belangrijkste van Publisher is het maken van content van HTML-bestanden. Hiervoor is het handig als je HTML kan. Hier zijn op het internet veel tutorials en handleidingen van, eentje is bijvoorbeeld die van w3schools.

Er zijn een aantal regels waar je je aan moet houden als het gaat om het aanpassen van html-publisherpagina's. Een daarvan is dat je alleen alles aan kunt passen wat in een div op de pagina komt te staan, dus je kan geen aanpassingen aan de head doen.

Een andere belangrijke regel is dat je zelf geen javascript en css kunt gebruiken of inladen. Dit om security issues te voorkomen.

Ook willen we zo veel mogelijk voorkomen dat er externe referenties in de pagina staan. Dus als je een plaatje wilt gebruiken van een andere website, gebruik als src dan niet de url van het plaatje, maar download het plaatje, upload het in publisher en gebruik dan de link daar naar toe.

Links maken naar Who's Who-informatie is heel makkelijk. Hiervoor zijn speciale HTML-achtige codes ontwikkeld. Je kunt deze gebruiken in elke publisherpagina. Voorbeelden:

  <lid nr="5794">Pepijn</lid>,   <lid nr="8566">Tim</lid>,   <act nr="6290">IBA-kamerovername</act>,   <cie login="www">WebCie</cie>  

Dit ziet er dan als volgt uit:

Pepijn, Tim, IBA-kamerovername, WebCie

Je moet dus wel het lidnummer, commissienummer of de actid weten. Het kan zijn dat de link naar een persoon niet werkt, omdat die oud-lid is, of niet opzoekbaar. Links werken alleen als je genoeg rechten hebt om iemand op te zoeken. Zo zal een link naar iemand die wel lid is alleen werken als iemand is ingelogd.

Je kunt ook gebruik maken van mailforms. Een mailform betekent dat je een formulier kunt invullen, en dat de A-Eskwadraat-server een mail stuurt naar de commissie met de inhoud. Dat gaat zo:

  <form action="/mailto.php/cienaam" method="get">    <input type="hidden" name="nextpage" value="/Vereniging/Commissies/cienaam/bedankt.html" />    <input type="hidden" name="onderwerp" value="Het Onderwerp van je e-mail" />      <input type="text" name="Tekstveld 1" />    <input type="submit" value="Verstuur!" />  </form>  

waarbij cienaam het publieke emailadres (en ook web-url-naam) van je commissie is, en 'bedankt.html' de pagina waar je moet komen als het formulier verstuurd is. Zorg dat de waarde van nextpage altijd het volledige pad vanaf de root is (dus begint met '/'), zodat als je er 'https://www.a-eskwadraat.nl' voor plakt, het werkt.

Op de A–Eskwadraatwebsite gebruiken we de stylesheets van Bootstrap om alles vorm te geven. Dit betekent dat jij Bootstrap ook kunt gebruikten voor jouw HTML-pagina's! Een volledige handleiding van Bootstrap vind je hier, hier en hier. Hieronder geven we je een kortere uitleg over de verschillende onderdelen die we veel gebruiken op de A–Eskwadraatwebsite om zo een eenduidigheid in de pagina's aan te brengen.

Bootstrap maakt gebruikt van een grid. Dit wordt gebruikt om verschillende elementen horizontaal naast elkaar weer te geven. Hiervoor wordt elke pagina in 12 kolommen opgedeeld en kan je bij elementen aangeven hoeveel van deze kolommen ze inmoeten nemen. Een voorbeeld:

De HTML-code van de eerste regel van bovenstaande voorbeeld is

  <div class="row">    <div class="col-md-4" style="background-color: darkgrey; border: 1px solid #ddd;">      .col-md-4    </div>    <div class="col-md-8" style="background-color: darkgrey; border: 1px solid #ddd;">      .col-md-8    </div>  </div>  

De style is hier alleen maar bij gezet om de voorbeelden duidelijker te maken. In het eerste voorbeeld geven de klassen 'col-md-4' en 'col-md-8' aan hoeveel kolommen van de grid ze innemen. Belangrijk: let er ook op dat ze met z'n alle in een div zitten met klasse 'row'. Het gedeelte 'md' bij 'col-md-8' geeft de responsiveness aan van het element. In het geval van 'md' houdt dit in dat er bij een medium schermgrootte of groter de 8 kolommen gebruikt moeten worden. Bij kleinere schermgroottes worden de volledige 12 kolommen gebruikt. Alle opties voor 'md' zijn in aflopende volgorde van schermgrootte 'lg', 'md', 'sm' of 'xs'. Je kan uiteraard meerdere elementen horizontaal doen, we raden je alleen wel aan om het maximaal aantal kolommen wat je gebruikt te houden op 12.

Op de A–Eskwadraatwebsite maken we gebruik van de page-header-klassen voor headers. Dit doen we echter alleen voor headers 1,2 en 3. Voor de kleinere headers doen we dit niet. Hoe dit er dan uitziet is als volgt:

Zoals je ziet komt er bij de headers 1 t/m 3 een streep onder de header. Deze streep is in de kleur van het thema waar je op dat moment in zit (bv rood, geel, blauw, etc). Bovenstaande code is:

  <h1 class="page-header">...</h1>  <h2 class="page-header">...</h2>  <h3 class="page-header">...</h3>  <h4>...</h4>  <h5>...</h5>  

Uiteraard ben je helemaal vrij om ook voor kleinere headers de page-header-klasse te gebruiken. Het is ook mogelijk om subtekst bij een header neer te zetten. Dat ziet er dan zo uit:

De HTML-code hiervan ziet er dan als volgt uit:

  <h1 class="page-header">Headers <small>subtekst</small></h1>  

Links (of anchors als je in HTML wilt praten) zijn de manier om naar andere pagina's te navigeren soms kan een link er alleen niet heel mooi uitzien. Een voorbeeld:

Dit is een link

Dit soort links kunnen we mooier maken. Hiervoor worden de 'btn' klasse en alle bijbehorende klassen gebruikt. Een voorbeeld:

De HTML-code:

  <a href="#" class="btn btn-primary">Primary</a>  <a href="#" class="btn btn-success">Success</a>  <a href="#" class="btn btn-info">Info</a>  <a href="#" class="btn btn-warning">Warning</a>  <a href="#" class="btn btn-danger">Danger</a>  

Je kan de extra klasse 'btn-lg', 'btn-sm', of 'btn-xs' toevoegen om grotere of kleinere knoppen te maken. Let er wel op dat je niet elke link op je pagina de btn-klassen meegeeft anders krijg je dit effect. Op de meeste plekken van de A–Eskwadraatwebsite gebruiken we de btn-primary om het een blauwe kleur te geven.

Ook voor buttons en button-inputs kun je de btn-klassen gebruiken om ze op dezelfde manier vorm te geven.

Bootstrap heeft ook een aantal 'afbeeldingen' (voor degene die het willen weten, het is allemaal onderdeel van een font) die je kunt gebruiken. Voorbeelden hiervan zijn . Glyphicons komen standaard in de kleur van het thema. Een glyphicon gebruiken is simpel:

  <span class="glyphicon glyphicon-user"></span>  

voor de user-glyphicon. Een volledige lijst van alle glyphicons die Bootstrap te bieden heeft vind je hier.

Omdat een lap tekst er niet altijd even mooi uit kan zien, zijn er panels. Een panel maakt een wit vak en stopt daar je tekst in. Deze tekst en alle andere witte vakken die je op deze pagina ziet zitten in panels! Om een panel te maken gebruik je de volgende HTML-code:

  <div class="panel panel-default">    <div class="panel-body">      Tekst    </div>  </div>  

De HTML-code hiervoor is:

  <div class="panel panel-default">    <div class="panel-header">      Header    </div>    <div class="panel-body">      Tekst    </div>  </div>  

De HTML-code voor een footer is:

  <div class="panel panel-default">    <div class="panel-body">      Tekst    </div>    <div class="panel-footer">      Footer    </div>  </div>  

Er is dus genoeg materiaal om mee te maken. Bootstrap heeft nog veel meer vette features die je allemaal op de website van Bootstrap zelf kunt bekijken. Heb je nog vragen of heb je toffe vette ideeën voor layout van de website, mail dan de WebCie: [email protected].