Webdevelopers en -designers

De inhoud is klaar gezet door de tekstschrijver of fotograaf, als webdeveloper geef je de inhoud een plaats in de website. Realiseer een uniek webdesign met standaard HTML en CSS. Toon overzichten en artikelen met de WebEtui API. Realiseer jouw ontwerp met CSS en voeg interactie toe met Javascript. Dankzij de ingebouwde code editors kun je met WebEtui direct online ontwikkelen en testen.

In WebEtui wordt de inhoud onafhankelijk van de website vastgelegd in artikelen, foto's, video's en documenten. Webdevelopers kunnen in WebEtui een website bouwen door HTML, SCSS en Javascript met de code editor toe te voegen en te bewerken. De WebEtui API is een set functies die je kunt toegevoegen aan HTML. Bijvoorbeeld om een artikel in een pagina te tonen of om een overzicht van artikelen met een specifiek label te tonen. De voordelen van WebEtui voor (front-end) webdevelopers:

  1. Inhoud is klaargezet door de tekstschrijver(s)
  2. Labelstructuur is klaargezet door de tekstschrijver(s)
  3. Met de ingebouwde code editor werkt de webdeveloper met HTML, SCSS en javascript files
  4. WebEtui API biedt back-end functies voor het presenteren van de inhoud (artikelen).
  5. Inclusief online service met veilige hosting, backup en ondersteuning.

HTML layouts

Website pagina's gebruiken HTML. Je zou 1 HTML "master" template kunnen maken met daarin een header, main en footer. In de header zou je met de "menu" functie een menu kunnen plaatsen (een subset van de labelstructuur). In het main gedeelte kun je een artikel of overzicht van artikelen tonen. En in de footer plaats je de 'vaste' contactgegevens en misschien verwijzingen naar social media. Tussen [..] staan WebEtui API functies om de inhoud te tonen of een HTML layout fragment te selecteren.

<!DOCTYPE html>
<html> 
  <head>
    <title>[wintitle(default="Example 2: [title]")]</title>
    <!-- your CSS and Javascript -->
  </head>
  <body>
    <header>
      [menu(label="menu")]
    </header>
    <article>
      [layout(label="layout.article")]
    </article>
    <footer>
      <!-- address and contact -->
      [socialmedia(field="twitter linkedin facebook instagram")]
    </footer>
  </body>
</html>

CSS styles

WebEtui werkt met een ingebouwde sass compiler zodat je kunt werken met SCSS files. Deze files worden tijdens het bewaren vertaald met de sass compiler naar CSS files. In de "master" HTML template kun je naar jouw css files verwijzen. Een speciale CSS file heeft de naam "text.css" die ook door de WYSIWYG Article Editor worden gebruikt. Zodat de tekstschrijver de artikelen in de stijl (lettertype, marges, etc) van de website kan schrijven.

div.text {
  font:medium 'Roboto', sans-serif;  line-height:1.5em;
  h1 { font: 200% 'Teko', sans-serif; margin:1em 0 15px; padding:0 0 10px; text-align:center; border-bottom:1px solid black }
  p  { 
    line-height:1.5em; max-width:700px;
    &.intro { font-size: 125% }
  }
  div.photo {
    margin:0 0 30px; max-width:700px;
  }
}

Javascript

Javascript files kunnen worden toegevoegd om interactiviteit toe te voegen. WebEtui heeft standaard de mogelijkheid om jQuery library te gebruiken. Maar de front end developer kan ook andere javascript libraries in zijn of haar "master" HTML template toevoegen.

Search Engine Optimization

De tekstschrijver kan bij ieder artikel een "windowtitle" en "meta description" toevoegen. In de "master" HTML layout wordt hiernaar verwezen.