HTML-guide til udvikling af integrationsløsninger til Borger.dk

Kompatibilitet med Virk.dk

Dette afsnit henvender sig til myndigheder og leverandører, der har løsninger, som både skal integreres i borger.dk og på virk.dk. Det kan eksempelvis være systemer, som omhandler samme område og dermed både har borgerrettede og virksomhedsrettede selvbetjeningsløsninger, hvorfor det er fordel ikke at skulle bygge særskilte grænseflader

Indholdsfortegnelse

• Principper og metode
• Forudsætninger
• Kompabilitets skema
• Sideskabeloner
• Faneblade (Topnavigation)
• Responsive Faneblade/Topnavigation
• Forløbsindikator (Tvungen tringuide)
• Responsive forløbsindikator
• Formularelementer
• Tabeller
• Lister
• Knapper
• Fremhævede beskeder
• Modalbokse
• Eksempler og download

Principper og metode

Virk.dk's designmanual og HTML-guiden har overordnet samme formål - nemlig at sikre, at selvbetjeningsløsninger integreres hensigtsmæssigt i portalerne. Derfor er en lang række elementer i de to produkter de samme.

Designmanualen og HTML-guiden adskiller sig dog i de krav der stilles til selvbetjeningsløsningerne og de måder hvorpå de integreres i portalerne. Kort sagt kan man sige, at Designmanualen stiller flere krav til (interaktions-)design end HTML-guiden. Omvendt har HTML-guiden flere ikke-funktionelle krav, hvad angår at benytte guidens CSS og HTML.

Det tilrådes kraftigt at læse både HTML-guiden samt Designmanualen før en løsning udarbejdes.

For at lave løsninger, der med få ændringer, kan fungere på begge på begge portaler, er nedenstående uarbejdet udfra følgende metode:

• HTML-guidens HTML og stylesheet skal benyttes og designlines overholdes
• Der er udarbejdet et Virk.dk-stylesheet samt et kompatibilitetsstylesheet, som bl.a. sikrer, at Virk.dk Look and feel overholdes. Disse styleheet tilføjes, når løsningen skal på Virk.dk
• Løsninger skal overholde Virk.dk regler om interaktiondesign
• Enkelte elementer (eksmpelvis header og footer) i DOM'en må forventes at skulle udskiftes alt efter, hvilken portal løsningen skal integreres i.

I de følgende afsnit gennemgås de elementer, som HTML-guiden og Virk.dk begge benytter, og som derfor er kompatible. Som udgangspunkt bør man holde sig til denne fællesmængde, når løsningerne skal benyttes på begge portaler.

I nedenstående benyttes titlerne på elementer i dette format [titel i HTML-guiden] ([titel i Designmanualen]).

Forudsætninger

For at de medfølgende stylesheets virker er det vigtigt et de indlæses i korrekt rækkefølge som er:

1. bdk-app-master.css
2. kompatibilitet.css
3. designmanual.css

Designmanualen har css klassen main-content. Denne klasse skal man være opmærksom på da den har betydning for elementer som p, ul og ol. Menuer og forløbsindikator vil ikke renderes korrekt, hvis de placeres inden for denne klasse. Omvendt vil almindelige lister heller ikke renderes korrekt, hvis de står uden for klassen. Der henvises til Virk.dk's designmanual for nærmere information herom.

Kompabilitetsskema

Nedenstående tabel overskueliggører, hvilke elementer der er kompatible i HTML-guiden og Designmanualen.

Sideskabeloner

Sideskabelon med forløbsindikator (Bred central kolonne med tringuide)

Navigationen mellem trinene i indberetningen skal foregå ved hjælp af forrige/næste-knapper i bunden af siden

Al navigation til andre dele af løsningen sker via fanebladsmenu (topnavigation). Borger.dk eller Virk.dk-header skal vises på alle sider.

• Sideskabelon med forløbsindikator (Bred central kolonne med tringuide)

Sideskabelon uden tringuide (Bred central kolonne uden tringuide)

Al navigation til andre dele af hjemmesiden sker via fanebladsmenu (topnavigation). Borger.dk eller Virk.dk-header skal vises på alle sider.

• Sideskabelon uden tringuide (Bred central kolonne uden tringuide)

Faneblad (Topnavigation)

Topmenu fra HTML-guiden er ikke kompatibel med Topnavigation fra Designmanualen. I stedet for benyttes fanebladsmenuen fra HTML-guiden, da de to deler samme HTML og klasser. Denne menu-type benyttes, hvor forløbsindikator ikke egner sig eller som supplement. Klassen active benyttes til angive det aktuelle menupunkt.

<ul class="nav nav-tabs hidden-phone">
 <li class="active"><a href="#">Menupunkt</a></li>
 <li><a href="#">Kladder</a></li>
</ul>

Responsive Faneblade/Topnavigation

For at gøre faneblade og topnavigation responsive er det nødvendigt at tilføje en mobil version af menuen. Som det fremgår af Faneblad (Topnavigation)-eksemplet, har den klassen hidden-phone, der kollapser menuen på små skærme. For at gøre den mobile menu tilgængelig, skal der tilføjes en knap, der kun vises på små skærme.

<div class="top-menu-phone-container clearfix">
 <!-- Her kan menu til små skærme indsættes. Kræver at "kompatibilitet.css" benyttes  -->
 <div class="visible-phone clearfix">
  <label for="toggle-topmenu-phone" class="btn topmenu-phone dropdown-toggle" data-toggle="dropdown" data-target="#mobile-menu">
   <i class="icon-reorder"></i>
  </label>
  <input type="checkbox" id="toggle-topmenu-phone" style="position: absolute; left: -99999px;"/>
  <ul class="dropdown-menu" id="mobile-menu">
   <li class="active"><a href="#">Side 1</a></li>
   <li><a href="kladder.html">Side 2</a></li>
  </ul>
 </div>
</div>

Forløbsindikator (Tvungen (klikbar) tringuide)

Klassen current angiver det nuværende trin i forløbsløbsindikatoren. Klassen done benyttes til afsluttede trin. Det er ikke obligatorisk at angive beskrivelse af trinnet.

Forløbsløbsindikatoren skal altid have forrige-næste knapper. Der må ikke bruges tringuide med tre trin eller derunder.

<ol class="indicator-vertical indicator">
 <li class="done" aria-label="Er udfyldt">
  <div class="title-step"><a href="#">Indtast stamoplysninger</a></div>
  <div class="description-step">Indtast dit navn, alder</div>
 </li>
 <li class="current" aria-label="Nuværende trin">
  <div class="title-step"><a href="#">Udfyld ansøgning</a></div>
  <div class="description-step">Udfyld felterne</div>
 </li>
 <li>
  <div class="title-step"><a href="#">Bekræft oplysninger</a></div>
  <div class="description-step">Bekræft at oplysninger er korrekte</div>
 </li>
 <li>
  <div class="title-step"><a href="#">Kvittering</a></div>
  <div class="description-step">Print en kvittering eller send den til din email</div>
 </li>
</ol>          

Responsiv forløbsindikator

For at gøre forløbsindikator responsive er det nødvendigt at tilføje en knap, da den ellers ikke vil være tilgængelig. På små skærme klappes forløbsindikatoren sammen og er derved kun tilgængelig via. den tilføjede knap. Knappen er kun tilgængelig på små skærme.

<label for="tryk" class="visible-phone pull-left">
 <span class="btn btn-steps">Trin 2 af 4 <i class="caret"></i></span>
</label>

Formularelementer

Formularelementer kontrolleres bedst med klasserne controls-row, controls og control-group.

I en controls-row er der 12 kolonner. I disse kan man fordele formularelementer i control-group'er.

Med input-block-level kan man sikre, at det enkelte formularelement tilpasser sig kolonnerne.

help-block-klassen bruges sammen med formularelemeterne til at skrive en hjælpetekst.

Det er god praksis at benytte fieldset (grupper) og legend. Hvis der er behov for at indlejre fieldsets i andre fieldsets, skal den legend, der tilhører det yderste fieldset have id'et primaryLegend.

Formularskelet

<div class="controls-row controls">
 <div class="span6 control-group">
 <!-- Her indsættes et formularelement -- >
 </div>
 <div class="span6 control-group">
 <!-- Her indsættes et formularelement -- >
 </div>
</div>
<div class="controls-row controls">
 <div class="span12 control-group">
 <!-- Her indsættes et formularelement. -- >
 </div>
</div>          

Fuldt eksempel

<form action="#">
 <fieldset>
  <legend id="primaryLegend">Titel på formular</legend>
  <p aria-hidden="true">Felter med * skal udfyldes.</p>
  <div class="controls-row controls">
   <div class="span6 control-group">
    <label for="fnavn" class="required">Fornavn</label>
    <input id="fnavn" type="text" name="fnavn" aria-required="true" class="input-block-level">
    <span class="help-block">I dette felt skriver du dit fornavn <a href="#">Hjælp</a></span>
   </div>
   <div class="span6 control-group">
    <label for="enavn" class="required">Efternavn</label>
    <input id="enavn" type="text" name="enavn" aria-required="true" class="input-block-level">
   </div>
  </div>
  <div class="controls-row controls">
   <div class="span8 control-group">
    <label for="gnavn" class="required">Gade</label>
    <input id="gnavn" type="text" name="gnavn" aria-required="true" class="input-block-level">
   </div>
   <div class="span2 control-group">
    <label for="hnummer" class="required">Husnummer</label>
    <input id="hnummer" type="text" name="hnummer" aria-required="true" class="input-block-level">
   </div>
   <div class="span2 control-group">
    <label for="etage">Etage</label>
    <input id="etage" type="text" name="etage" aria-required="false" class="input-block-level">
   </div>
  </div>
  <div class="controls-row controls">
   <div class="span2 control-group">
    <label for="pnummer" class="required">Postnummer</label>
    <input id="pnummer" type="text" name="pnummer" aria-required="true" class="input-block-level">
   </div>
   <div class="span10 control-group">
    <label for="city" class="required">By</label>
    <input id="city" type="text" name="city" aria-required="true" class="input-block-level">
   </div>
  </div>
  <div class="controls-row controls">
   <div class="span12 control-group">
    <label for="co">Evt. CO-adresse</label>
    <input id="co" type="text" name="co" aria-required="false" class="input-block-level">
   </div>
  </div>
  <div class="controls-row controls">
   <div class="span2 control-group">
    <label for="age" class="required">Alder</label>
    <input id="age" type="text" name="age" aria-required="true" class="input-block-level">
   </div>
  </div>
  <fieldset role="radiogroup" aria-labelledby="radiogroup" aria-required="true" class="remove-border">
   <legend id="radiogroup">Køn</legend>
    <label for="opa" class="radio inline">Mand<input id="opa" type="radio" name="opz"></label>
    <label for="opb" class="radio inline">Kvinde<input id="opb" type="radio" name="opz"></label>
  </fieldset>
 </fieldset>
</form>

Tabeller

Tabellen skal have have klassen table.

Funktionaliteter og knapper, som relaterer sig til tabellen, skal placeres under tabellen.

Hvis tabellen er for bred til en lille skærm benyttes placeres tabellen i en div med klassen table-responsive.

<div class="table-responsive">
 <table class="table">
  <tr>
   <th>Kolonneoverskrift</th>
   <th>Kolonneoverskrift</th>
   <th>Kolonneoverskrift</th>
  </tr>
  <tr>
   <td>Række 1 kolonne 1</td>
   <td>Række 1 kolonne 2</td>
   <td>Række 1 kolonne 3</td>
  </tr>
  <tr>
   <td>Række 2 kolonne 1</td>
   <td>Række 2 kolonne 2</td>
   <td>Række 2 kolonne 3</td>
  </tr>
  <tr>
   <td>Række 1 kolonne 1</td>
   <td>Række 1 kolonne 2</td>
   <td>Række 1 kolonne 3</td>
  </tr>
 </table> 
<div>

Lister

<ul class="list">
 <li>Listepunkt 1</li>
 ...
</ul>

Der kan benyttes både ordnede og uordnede lister. Lister skal have klassen list.

Knapper

Knaptekst bør altid formuleres som en handling, f.eks. Søg, Gem, Slet. Tekst skal altid kunne stå på en linje. Derfor kan designmanualens "Stor knap" ikke bruges da den har flere linjer tekst.

HTML-guiden giver mulighed for forskellige farver på knapperne. Disse ignoreres af Designmanualen, hvor knapper altid har samme farve.

<p><a href="#" class="btn">Knap lavet som link</a></p>
<p><button class="btn">Knap lavet med button</button></p>
<p><input class="btn" type="button" value="Knap lavet med input:button"></p> 
<p><input class="btn" type="submit" value="Knap lavet med input:submit"></p>          

Knapper kan have ikoner og tekst. Ikoner er sjælden letforståelige for alle brugere. Derfor skal de altid suppleres med tekst. Der bør benyttes fontikoner fra FontAwsome.

<p><a href="#" class="btn"><i class="icon-search"></i> Søg</a></p>

Fremhævede beskeder (Beskeder til brugeren)

Fremhævede beskeder kan især benyttes i forbindelse med validering men også til eksemplvis at fremhæve tekst, der er særlig vigtig for modtageren.

Der er fire typer fremhævede beskeder som styres med klasserne alert-info, alert-success, alert-warning og alert-error.

<p class="alert alert-info">Dette er en besked, der indholder en information, som er vigtig men ikke kritisk.</p>
<p class="alert alert-success">Denne besked giver brugeren besked om, at handlingen lykkedes.</p>  
<p class="alert alert-warning">Denne besked giver brugeren en advarsel, som viser, at noget kræver opmærksomhed.</p>   
<p class="alert alert-error">Denne besked giver brugeren besked om en fejl eller en alvorlig hændelse</p>            

I visse tilfælde kan det være nødvendigt at lave fremhævede beskeder, der indeholder lister og overskrifter. Hertil benyttes klassen alert-block på en div, der indlejrer den fremhævede besked.

<div class="alert alert-block alert-warning">
 <h3>Du mangler:</h3>
 <ul class="list">
  <li>At udfylde navn</li>
  <li>At udfylde virksomhed</li>
 </ul>
</div>

Modalbokse (dialogboks)

Klassen modal benyttes på modalbokse med følgende HTML-struktur. Klassen modal-backdrop benyttes på en tom div til at lægge et lag over siden.

Det tilrådes at læse HTML-guidens afsnit om modal-bokse for yderligere information. Et eksempel på brug af modalbokse kan se i det eksemplariske eksempel. Her er også illustreret, hvorledes man med aria-hidden=true|false og role kan lave tilgængelige modalbokse.

<div class="modal-backdrop"></div>
[...]
<div tabindex="-1" role="dialog" class="modal">
 <div class="modal-header">
  <button type="button" class="close">&times;</button>
  <h3>Overskrift</h3>
 </div>
 <div class="modal-body">Indhold</div>
 <div class="modal-footer">
  <button class="btn">Luk</button>
 </div>
</div>          

Eksempler og download

Løsning med forløbsindikator

• Løsning med forløbsindikator

Bemærk at det nederst i løsningen er muligt at skifte mellem Virk.dk og borger.dk-look and feel.

Eksemplet er baseret på Designmanualens eksemplariske blanketløsning.

HTML Boilerplate

For at komme igang kan denne her boilerplate benyttes. Den indeholder standard layout og funktionalltet.

Download filer

• Kompatibilitetskit (zip)