De TheaterEncyclopedie is vernieuwd!

TheaterEncyclopedie: Voorpagina beheren

Uit TheaterEncyclopedie
Ga naar: navigatie, zoeken

Inhoud

Uitgangspunt uitleg voorpagina mei 2019!

Voorpagina mei2019.png

De TheaterEncyclopedie maakt gebruik van de skin Tweeki. De meeste pagina's zoals pagina's die over personen, theaters en voorstellingen gaan zijn min of meer door iedereen bewerkbaar via een editknop. Echter een aantal inhoudelijke pagina's op de TheaterEncyclopedie zijn uitsluitend door de redactie aan te passen. Dit betreft o.a.:

  • Hoofdpagina
  • Personen
  • Voorstellingen
  • Theaters
  • Thema’s

Deze pagina's zijn handmatig opgemaakt middels HTML en CSS code waardoor alle afbeeldingen en teksten netjes op de pagina blijven staan. Hieronder volgt een beschrijving zodat de afbeeldingen en teksten van deze pagina's zelfstandig door de UvA redactie aangepast kan worden. Deze handleiding gaat uit van de voorpagina zoals deze in mei 2019 nog is vormgegeven. Zie afbeelding hiernaast.

Hulp

Indien hulp gewenst is dan kan de vraag altijd op het Gebruikersforum WikiWerkers geplaatst worden!

Opbouw Hoofdpagina TheaterEncyclopedie


De hoofdpagina is opgebouwd uit diverse blokken:

  • Code om de titel en editknop te verbergen
  • Carrousel
  • Welkom
  • Onderwerpen: Personen, Voorstellingen, Theaters en Thema's
  • links naar twitter en facebook
  • Edit deze pagina

Voor het gemak is dit in de code opbouw van de voorpagina ook letterlijk zo genoemd!

Onderwerp Blok
Verbergen van titel en editknop blok 1
Carrousel blok 2
Welkom blok 3
Onderwerpen blok 4
Twitter/Facebook blok 5
Edit deze pagina blok 6

Voorpagina blokken.png

Sjablonen

Ook maakt de voorpagina gebruik van onderstaande sjablonen:

Extra regels op voorpagina

Onderstaande regels staan ook op de voorpagina maar worden hier niet apart ingesteld omdat deze regels op meerdere pagina's voorkomen.

Menu

En natuurlijk de verschillende menu-onderdelen. Een korte uitleg hieronder:

Let op!
Pas deze menu-onderdelen niet zelf aan!

Opmaak onderdelen

Terugkerende stijl opmaak wordt geplaatst in:

Hierover meer in HTML en CSS

Algemene uitleg code

Openingstag en Sluittag

Elke code staat tussen ''<''en ''>''. Het begint altijd met een openingstag ''<code>'' en wordt altijd afgesloten met een sluittag''</code>''. Een aantal bekende voorbeelden:

Voorbeeld code Wat je ziet op het scherm Aanpassen
<h1>Dit is een koptekst</h1>

Dit is een koptekst

De UvA redactie kan de teksten tussen de openingstage en de sluittag zelfstandig aanpassen.De code tussen de haakjes moet blijven staan!

<h2>De tekst hiertussen kan aangepast worden!</h2>.

Kopteksten in Wiki

In een wiki is gebruikelijk om voor kopteksten <h2> == tekens te gebruiken. Wordt een pagina echter volledig met HTML en CSS opgebouwd dan worden de == tekens vervangen door <h2>, <h3>, <h4>, etc. code!

<h2>Dit is een koptekst</h2>

Dit is een koptekst

<h3>Dit is een koptekst</h3>

Dit is een koptekst

<p>Dit is een alineatekst!</p>

Dit is een alineatekst!

<div>Dit is een div code!</div>
Dit is een div code!
Een div (division) code wordt gebruikt om een HTML element te positioneren op het scherm.
<div><h5>Div en opmaak elementen!</h5></div>
Dit is een div code!
Hieraan moeten nog opmaak elementen worden toegevoegd!

Commentaar toegevoegd in de code

Tekst geplaatst tussen ''<!-- Lorem Ipsum-->''wordt door de browser genegeerd en heeft dus geen invloed op de gebruikte code.

Voorbeeld code Wat je ziet op het scherm Opmerking
<!--Koptekst, niveau 1--><h1>Dit is een koptekst</h1>

Dit is een koptekst

De commentaartekst heeft geen invloed op de gebruikte code maar dient ter verduideling van de gebruikte code!

<h2>De tekst hiertussen kan aangepast worden!</h2>.

<!--Koptekst, niveau 2--><h2>Dit is een koptekst</h2>

Dit is een koptekst

<!--Koptekst, niveau 3--><h3>Dit is een koptekst</h3>

Dit is een koptekst

<!--Alineatekst--><p>Dit is een alineatekst!</p>

Dit is een alineatekst!

HTML en CSS

HTML (Hypertext Markup Language) en CSS (Cascading Style Sheets) zijn talen (code) waarmee websites worden gemaakt. Met HTML wordt de inhoud van de pagina opgebouwd en aangegeven hoe de verschillende onderdelen zich moeten gedragen. Met CSS wordt de website vormgegeven.

Cascading Stylesheets

Websites bestaan vaak uit meerdere pagina's en doordat de gehele website dezelfde uitstraling moet hebben worden onderdelen hergebruikt. Kijk eens naar de headers; "Welkom", "Personen", "Voorstellingen", etc. Bij deze headers wordt een bepaald lettertype gebruikt en er is een grijs kleurverloop op de achtergrond. Deze informatie zet je in een Cascading Style Sheet (CSS), bij een wiki website terug te vinden op de pagina MediaWiki:Common.css. Indien er echter van een aparte skin gebruik gemaakt wordt dan wordt de Style Sheet van deze skin gebruikt. In het geval van de TE MediaWiki:Tweeki.css.

Bootstrap en Tweeki

De TheaterEncyclopedie is een responsive website. Dat betekent dat het scherm zich aanpast aan de schermgrootte van een laptop/PC, tablets en mobiele telefoons. Het responsive maken van de website gebeurt met behulp van Bootstrap, dat onderdeel uitmaakt van de skin Tweeki.

Bootstrap biedt een set van basiscode aan CSS en JS (JavasScript), waarmee de website responsive wordt, maar ook extra vormgevingselementen als knoppen, een carousel, menu's, pop-ups en panelen beschikbaar komen.

Tweeki is een speciale skin voor de MediaWiki software die zoveel van mogelijk de functionaliteit van Bootstrap overneemt in de wiki. Doordat Tweeki compatibel is met Semantic MediaWiki en Semantische Formulieren is deze skin bijzonder goed bruikbaar voor wiki-als-een-website projecten.

Vormgeving Website

Websites worden opgebouwd middels blokken (grid) die zich aanpassen qua hoeveelheid, grootte en formaat aan het gebruikte medium (laptop, tablet, smartphone). Tweeki gebruikt een grid bestaande uit 12 kolommen, zoals bekend van Bootstrap. Het punt waarop de layout overschakelt tussen small, medium en large heet een breakpoint. De browser "weet" hoe groot het scherm is d.m.v. het gebruik van "media-queries".

Laptop

Voorpagina Responsive Laptop.png

Ipad

Voorpagina Responsive IPad.png

Iphone

Voorpagina Responsive Iphone.png


Volledige code van de voorpagina

<!-- code blok 1 start-->
{{#tweekihide:firstHeading|sidebar-right}}
<!-- code blok 1 einde-->

<!-- code blok 2 start-->
<div class="container-fluid row"><div class="hidden-xs hidden-sm col-md-12">{{Carrousel2
|Afbeelding1=TE Headerimage 1920x640 1.jpg
|Titel1=Cats
|Opschrift1=Cats, Joop van den Ende Theaterproducties BV, 2006. Foto: Joris-Jan Bos.
|Afbeelding2=TE Headerimage 1920x640 02.jpg
|Titel2=Claude Pascal
|Opschrift2=Claude Pascal, Nederlands Dans Theater I, 2002. Foto: Joris-Jan Bos. 
|Afbeelding3=TE Headerimage 1920x640 03.jpg
|Titel3=Club Don't Hit Mama 09
|Opschrift3=Club Don't Hit Mama 09, Don’t Hit Mama, 2009. Foto: Jean van Lingen.
|Afbeelding4=TE Headerimage 1920x640 04.jpg
|Titel4=Perfect Wedding
|Opschrift4=A Perfect Wedding, Toneelgroep Amsterdam, 2005. Foto: Chris van der Burght.
|Afbeelding5=TE Headerimage 1920x640 05.jpg
|Titel5=Chapeau
|Opschrift5=Chapeau, Nederlands Dans Theater II, 2005. Foto: Joris-Jan Bos. 
}}</div></div>
<!-- code blok 2 einde-->

<!-- code blok 3 start-->
<div class="row row-fluid clearfix">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading panel-heading-welkomdef">
<h3 class="panel-title" style="text-align:center;">Welkom bij de Theaterencyclopedie</h3>
</div>
<div class="panel-body">
Op de Theaterencyclopedie vind je alle informatie over theater in Nederland in heden en verleden. Iedereen kan aan deze Theaterencyclopedie meeschrijven: 
liefhebbers én professionals maken samen de Theaterencyclopedie actueel en compleet.  Ook heeft de Theaterencyclopedie meegewerkt aan 
[[Thema's|speciale projecten]].
----
<div style="display: flex; align-items: center; justify-content: center; height: 100px;">{{Geavanceerd_zoeken_2}}</div>

<p style="text-align:center">Zoek voorstellingen, acteurs etc. en maak overzichten van bijv. producties of theaters op basis van eigenschappen!</p>

</div><!-- EOF body -->
<!--<div class="panel-footer" style="height:40px;">{{#shariffLike:}}</div>-->
</div><!-- EOF pan -->
</div><!-- EOF col -->
</div><!-- EOF row-->
<!-- code blok 3 einde-->

<!-- code blok 4 start-->
<div class="flex-row row">

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def">
<h3 class="panel-title">[[Personen| Personen]]</h3></div>
<div class="panel-body">[[Bestand: TIN02 TL99-G 04 325x275 Detail.jpg|class=img-responsive | link=Personen]]</div>
<div class="panel-footer">[[Personen| Zoek op één van de theaterberoepen!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 1-->

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def">
<h3 class="panel-title">[[Voorstellingen| Voorstellingen]]</h3></div>
<div class="panel-body">[[Bestand: TIN02 GD008-11 325x275 Detail.jpg|class=img-responsive | link=Voorstellingen]]</div>
<div class="panel-footer">[[Voorstellingen| Zoek naar een voorstelling!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 2-->

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def"><h3 class="panel-title">[[Theaters| Theaters]]</h3></div>
<div class="panel-body">[[Bestand: TIN02 TL5-11 325x275.jpg|class=img-responsive | link=Theaters]]</div>
<div class="panel-footer">[[Theaters| Zoek naar een theater!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 3-->

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def"><h3 class="panel-title">[[Thema's| Thema's]]</h3></div>
<div class="panel-body border=dashed">[[Bestand: T003672 000 325x275 Detail.jpg|class=img-responsive | link=Thema's]]</div>
<div class="panel-footer">[[Thema's|Lees meer!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 4-->
</div><!-- EOF row 1-->
<!-- code blok 4 einde-->

<!-- code blok 5 start-->
<div class="row" style="height:40px; padding:15px;">{{#shariffLike:}}</div>
<!-- code blok 5 einde-->

<!-- code blok 6 start-->
{{editlink}}
<!-- code blok 6 einde-->


Om het één en ander te verduidelijken voor de UvA redactie zijn de diverse blokken voorzien van commentaartekst, die geen invloed hebben op de vormgeving van de pagina, maar die wel verduidelijken tot welk blok de code behoort.

<!-- code blok 1 start-->
Hiertussen staat de code van het eerste blok!
<!-- code blok 1 einde-->

<!-- code blok 2 start-->
Hiertussen staat de code van het tweede blok!
<!-- code blok 2 einde-->

<!-- code blok 3 start-->
Hiertussen staat de code van het tweede blok!
<!-- code blok 3 einde-->

<!-- code blok 4 start-->
Etcetera .....


Blok 1: Code om de titel en editknop te verbergen

Deze pagina mag alleen aangepast worden door de redactie van de UvA, daarom is de standaard editknop weggehaald. Daarnaast is het ook niet mooi om de standaard titelpagina van Mediawiki te zien: Hoofdpagina.

Blok 6 is recent extra toegevoegd met een editlink om het bewerken van de voorpagina te vergemakkelijken. Mocht deze link niet aanwezig zijn dan kan de voorpagina bewerkt worden door in het adresvenster van de website ?action=edit achter https://theaterencyclopedie.nl/wiki/Hoofdpagina te typen. https://theaterencyclopedie.nl/wiki/Hoofdpagina&action=edit!
<!-- code blok 1 start-->
{{#tweekihide:firstHeading|sidebar-right}}
<!-- code blok 1 einde-->

Blok 2: Carrousel

Het gedeelte van de code om de carrousel te laten werken is in een sjabloon gezet. Dit sjabloon geeft een Bootstrap Carrousel met vijf afbeeldingen (inclusief titels en opschriften).

Carrousel

Volledige code voorpagina carrousel

<!-- code blok 2 start-->
<div class="container-fluid row"><div class="hidden-xs hidden-sm col-md-12">
{{Carrousel2
|Afbeelding1=TE Headerimage 1920x640 1.jpg
|Titel1=Cats
|Opschrift1=Cats, Joop van den Ende Theaterproducties BV, 2006. Foto: Joris-Jan Bos.
|Afbeelding2=TE Headerimage 1920x640 02.jpg
|Titel2=Claude Pascal
|Opschrift2=Claude Pascal, Nederlands Dans Theater I, 2002. Foto: Joris-Jan Bos. 
|Afbeelding3=TE Headerimage 1920x640 03.jpg
|Titel3=Club Don't Hit Mama 09
|Opschrift3=Club Don't Hit Mama 09, Don’t Hit Mama, 2009. Foto: Jean van Lingen.
|Afbeelding4=TE Headerimage 1920x640 04.jpg
|Titel4=Perfect Wedding
|Opschrift4=A Perfect Wedding, Toneelgroep Amsterdam, 2005. Foto: Chris van der Burght.
|Afbeelding5=TE Headerimage 1920x640 05.jpg
|Titel5=Chapeau
|Opschrift5=Chapeau, Nederlands Dans Theater II, 2005. Foto: Joris-Jan Bos. 
}}
</div>
</div>
<!-- code blok 2 einde-->

Tekst achter "=" teken kan worden aangepast

{{Carrousel2
|Afbeelding1=
|Titel1=
|Opschrift1=
|Afbeelding2=
|Titel2=
|Opschrift2=
|Afbeelding3=
|Titel3=
|Opschrift3=
|Afbeelding4=
|Titel4=
|Opschrift4=
|Afbeelding5=
|Titel5=
|Opschrift5=
}}


Afbeeldingen Carrousel

Onderstaande afbeeldingen kunnen voor de Carrousel op de voorpagina gebruikt worden. Deze zijn al op het juiste formaat gesneden 1920x640 px.

Naam Credits Bestandsnaam
Cats Cats, Joop van den Ende Theaterproducties BV, 2006. Foto: Joris-Jan Bos. TE_Headerimage_1920x640_01
Claude Pascal Claude Pascal, Nederlands Dans Theater I, 2002. Foto: Joris-Jan Bos. TE_Headerimage_1920x640_02
Club Don't Hit Mama 09 Club Don't Hit Mama 09, Don’t Hit Mama, 2009. Foto: Jean van Lingen. TE_Headerimage_1920x640_03
Perfect Wedding A Perfect Wedding, Toneelgroep Amsterdam, 2005. Foto: Chris van der Burght. TE_Headerimage_1920x640_04
Chapeau Chapeau, Nederlands Dans Theater II, 2005. Foto: Joris-Jan Bos. TE_Headerimage_1920x640_05
De Negers De Negers, De Nieuw Amsterdam, 2004. Foto: Jean van Lingen. TE_Headerimage_1920x640_06
Dido and Aeneas Dido and Aeneas, De Nederlandse Opera, 2009. Foto: Ruth Walz. TE_Headerimage_1920x640_07
Een Odyssee Een Odyssee, Theatergroep Wederzijds, 2008. Foto: Sanne Peper. TE_Headerimage_1920x640_08
Footloose Footloose, Albert Verlinde Entertainment B.V., 2009. Foto: Roy Beusker. TE_Headerimage_1920x640_09
Kasimir en Karoline Kasimir en Karoline, Veenfabriek/NTGent, 2009. Foto: Phile Deprez. TE_Headerimage_1920x640_10
Lohengrin Lohengrin, De Nederlandse Opera, 2002. Foto: Ruth Walz. TE_Headerimage_1920x640_11
Musicals in Ahoy Musicals in Ahoy, Joop van den Ende Theaterproducties BV, 2006. Foto: Roy Beusker. TE_Headerimage_1920x640_12
Tirannie van de tijd Tirannie van de tijd, Het Zuidelijk Toneel, 2005. Foto: Phile Deprez. TE_Headerimage_1920x640_13
Wilde dingen Wilde dingen, Kopergietery, 2004. Foto: Phile Deprez. TE_Headerimage_1920x640_14
Tim van Athene Tim van Athene, ZT Hollandia, 2003. Foto: Phile Deprez. Nog niet in groot formaat ontvangen.


Meer of minder afbeeldingen in de carrousel!

Indien het aantal afbeeldingen moet worden aangepast dan moet er in het sjabloon een aanpassing plaatsvinden. Het is niet mogelijk om een afbeelding te verwijderen door alleen onderstaande code weg te halen op de voorpagina in blok 2:

|Afbeelding5=
|Titel5=
|Opschrift5=

Of juist een extra afbeelding toe te voegen door onderstaande code toe te voegen:

|Afbeelding6=
|Titel6=
|Opschrift6=


Meer of minder afbeeldingen moeten via het sjabloon van het carrousel verwerkt worden. Er moet een carrousel indicator en een carrousel item toegevoegd/verwijderd worden.

Stap 1 Carrousel Indicator

Er moet een indicator toegevoegd of verwijderd worden. De huidige opbouw voor 5 afbeeldingen staat hieronder.

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#CarrouselTE1" data-slide-to="0" class="active"></li>
<li data-target="#CarrouselTE1" data-slide-to="1"></li>
<li data-target="#CarrouselTE1" data-slide-to="2"></li>
<li data-target="#CarrouselTE1" data-slide-to="3"></li>
<li data-target="#CarrouselTE1" data-slide-to="4"></li>
</ol>
<!-- End of Indicators -->

Indien er een afbeelding moet worden toegevoegd dan kopieer je eenvoudigweg de laatste data-target regel:

<li data-target="#CarrouselTE1" data-slide-to="4"></li>

En plaats je die onder deze regel. En verander je de 4 in 5:

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#CarrouselTE1" data-slide-to="0" class="active"></li>
<li data-target="#CarrouselTE1" data-slide-to="1"></li>
<li data-target="#CarrouselTE1" data-slide-to="2"></li>
<li data-target="#CarrouselTE1" data-slide-to="3"></li>
<li data-target="#CarrouselTE1" data-slide-to="4"></li>
<li data-target="#CarrouselTE1" data-slide-to="5"></li>
</ol>
<!-- End of Indicators -->


Stap 2 Carrousel Items

Voor de huidige carrousel zijn er 5 slides. De vijfde slide kan verwijderd worden of indien er nog een afbeelding toegevoegd moet worden kan dit na deze laatste slide, door deze code te kopieren en na de laatste slide item te plakken.

<!-- Slide 5-->
<div class="item ">
[[File:{{{Afbeelding5|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Titel5|}}}</h3>
<p>{{{Opschrift5}}}</p>
</div><!-- /.carousel-caption -->
</div><!-- /Slide5 -->

<!-- Slide 6-->
<div class="item ">
[[File:{{{Afbeelding5|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Titel6|}}}</h3>
<p>{{{Opschrift6}}}</p>
</div><!-- /.carousel-caption -->
</div><!-- /Slide 6 -->


Blok 3: Welkom

Bestand:Blok3 uitleg Panels.png

De bijbehorende code blok 3

<!-- code blok 3 start-->
<div class="row row-fluid clearfix">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading panel-heading-welkomdef">
<h3 class="panel-title" style="text-align:center;">Welkom bij de Theaterencyclopedie</h3>
</div>
<div class="panel-body">
Op de Theaterencyclopedie vind je alle informatie over theater in Nederland in heden en verleden. Iedereen kan aan deze Theaterencyclopedie meeschrijven: liefhebbers én professionals maken samen de Theaterencyclopedie actueel en compleet.  Ook heeft de Theaterencyclopedie meegewerkt aan [[Thema's|speciale projecten]].
----
<div style="display: flex; align-items: center; justify-content: center; height: 100px;">{{Geavanceerd_zoeken_2}}</div>

<p style="text-align:center">Zoek voorstellingen, acteurs etc. en maak overzichten van bijv. producties of theaters op basis van eigenschappen!</p>

</div><!-- EOF body -->
<!--<div class="panel-footer" style="height:40px;">{{#shariffLike:}}</div>-->
</div><!-- EOF pan -->
</div><!-- EOF col -->
</div><!-- EOF row-->
<!-- code blok 3 einde-->


Code blok 3 (Welkom) nader toegelicht!

Voor de UvA redactie is het belangrijk om te weten welke tekst aangepast kan worden. Het eerste gedeelte van de code zorgt voor de opmaak en mag dus niet zomaar aangepast worden.

<!-- code blok 3 start-->
<div class="row row-fluid clearfix">
<div class="col-xs-12 col-md-12">
<div class="panel panel-default">


Panel-Heading

Al eerder is uitgelegd dat code altijd een Openingstag en Sluittag bevat. In dit geval begint de koptekst met <h3> en eindigt met een sluittag </h3>. Bij een openingstag kan echter nog extra informatie betreffende de opmaak worden gegeven <h3 class="panel-title" style="text-align:center;">. Daarna volgt de koptekst zoals deze visueel op het beeldscherm wordt weergegeven Welkom bij de Theaterencyclopedie. Deze tekst wordt vervolgens weer afgesloten met een sluittag: </h3>

<h3 class="panel-title" style="text-align:center;">Welkom bij de Theaterencyclopedie</h3>


De volledige code van dit onderdeel is:

<div class="panel-heading panel-heading-welkomdef">
<h3 class="panel-title" style="text-align:center;">Welkom bij de Theaterencyclopedie</h3>
</div>

waarbij in de div class informatie wordt gegeven over hoe de panel-heading zich moet gedragen. Deze informatie is terug te vinden in MediaWiki: Tweeki.css. De informatie in dit CSS bestand gaat o.a. over de kleur, de hoogte, het kleurverloop van de panel-heading.

Panel-body

In de body staat ook tekst die door de UvA redactie kan worden aangepast. De tekst die volgt na de code <div class="panel-body"> tot ----.
En de alineatekst na ''<p style="text-align:center">'' tot ''</p>''.

<div class="panel-body">

Op de Theaterencyclopedie vind je alle informatie over theater in Nederland in heden en verleden. Iedereen kan aan deze Theaterencyclopedie meeschrijven: liefhebbers én professionals maken samen de Theaterencyclopedie actueel en compleet.  Ook heeft de Theaterencyclopedie meegewerkt aan [[Thema's|speciale projecten]].

----

<div style="display: flex; align-items: center; justify-content: center; height: 100px;">{{Geavanceerd_zoeken_2}}</div>

<p style="text-align:center">
Zoek voorstellingen, acteurs etc. en maak overzichten van bijv. producties of theaters op basis van eigenschappen!
</p>

</div><!-- EOF body -->


En hierna volgt de afsluiting van blok 3:

<!--<div class="panel-footer" style="height:40px;">{{#shariffLike:}}</div>-->
</div><!-- EOF pan -->
</div><!-- EOF col -->
</div><!-- EOF row-->
<!-- code blok 3 einde-->

Panel-footer

Een panel kan bestaan uit een header, een body en een footer. Bij dit blok is echter geen gebruik gemaakt van de footer. Bij blok 4 is de footer wel toegepast.

Blok 4: Onderwerpen

<!-- code blok 4 start-->
<div class="flex-row row">

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def">
<h3 class="panel-title">[[Personen| Personen]]</h3></div>
<div class="panel-body">[[Bestand: TIN02 TL99-G 04 325x275 Detail.jpg|class=img-responsive | link=Personen]]</div>
<div class="panel-footer">[[Personen| Zoek op één van de theaterberoepen!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 1-->

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def">
<h3 class="panel-title">[[Voorstellingen| Voorstellingen]]</h3></div>
<div class="panel-body">[[Bestand: TIN02 GD008-11 325x275 Detail.jpg|class=img-responsive | link=Voorstellingen]]</div>
<div class="panel-footer">[[Voorstellingen| Zoek naar een voorstelling!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 2-->

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def"><h3 class="panel-title">[[Theaters| Theaters]]</h3></div>
<div class="panel-body">[[Bestand: TIN02 TL5-11 325x275.jpg|class=img-responsive | link=Theaters]]</div>
<div class="panel-footer">[[Theaters| Zoek naar een theater!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 3-->

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def"><h3 class="panel-title">[[Thema's| Thema's]]</h3></div>
<div class="panel-body border=dashed">[[Bestand: T003672 000 325x275 Detail.jpg|class=img-responsive | link=Thema's]]</div>
<div class="panel-footer">[[Thema's|Lees meer!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 4-->
</div><!-- EOF row 1-->
<!-- code blok 4 einde-->

Opbouw blok 4

Blok 4 is een rij met vier kolommen, waarbij elke kolom is opgebouwd uit een header, body en footer. De tekst in de header, footer en de afbeelding in de body kunnen aangepast worden.

teksten en afbeelding kunnen aangepast worden


Uitleg eerste gedeelte van de code blok 4

<div class="flex-row row">

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">

Met "flex-row row" wordt de browser vertelt dat de webpagina flexibel moet reageren bij verschillende schermgroottes. Het uitgangspunt is een gridsysteem van 12 kolommen.

  • col-xs-12; vertelt de browser vertelt dat bij een smal scherm (smartphone), één kolom op de volledige breedte moet worden weergegeven.
  • col-md-6; bij een scherm van midden formaat worden er twee kolommen op de breedte weergegeven (Tablet, smal beeldscherm).
  • col-lg-3; en bij een groot scherm worden vier kolommen weergegeven.

Panel

Een panel is in bootstrap een begrensd kader (bordered box). Dit panel wordt opgebouwd met een:

  • panel-header
  • panel-body
  • panel-footer


Tekst Header en Footer

<h3 class="panel-title">[[Personen| Personen]]</h3>


<div class="panel-footer">[[Personen| Zoek op één van de theaterberoepen!]]</div>

De tekst in de panel-header en panel-footer kan aangepast worden door de UvA redactieleden:

  • [[Personen| Personen]]
  • [[Personen| Zoek op één van de theaterberoepen!]]

Afbeelding panel-body

<div class="panel-body">[[Bestand: TIN02 TL99-G 04 325x275 Detail.jpg|class=img-responsive | link=Personen]]</div>

De afbeelding in de panel-body kan aangepast worden door de UvA redactieleden: [[Bestand: TIN02 TL99-G 04 325x275 Detail.jpg|class=img-responsive | link=Personen]]

Grootte afbeelding

De afbeeldingen die in deze rij gebruikt zijn, zijn op maat gesneden vanuit een groter origineel. De gebruikte afmetingen zijn 325*275. Indien je een nieuwe afbeelding gaat plaatsen zal deze bijgesneden moeten worden zodat het het exacte formaat heeft als de eerder gebruikte afbeelding. Doe je dit niet dan gaan de kolommen zich anders gedragen op het scherm. Zie voorbeeld hieronder!

Keuze afbeelding

Bij de keuze van een afbeelding is het belangrijk dat je erop let dat deze naar wens bijgesneden kan worden. Neem het voorbeeld van Cristina Deutekom en het affiche. Indien hier uitsnede van wordt gemaakt dan blijft er weinig van de afbeelding over.

Blok 5: Twitter, Facebook

Bezoekers kunnen de pagina's die ze vinden meteen delen op social media zonder dat hun privacy geschaad wordt.

<div class="row" style="height:40px; padding:15px;">{{#shariffLike:}}</div>

Blok 6: Edit deze pagina

In het eerste gedeelte van de code is aangegeven dat de editknop niet zichtbaar is. Om niet iedere keer in het adresvenster ?action=edit te hoeven typen is deze link onderaan de pagina extra toegevoegd.

Bewerken als er geen edit-knop zichtbaar is!

Het kan voorkomen dat er geen edit-knop zichtbaar is op een pagina. Bijvoorbeeld op de voorpagina, portalen en andere veelgebruikte pagina's (NB: deze pagina's zijn vaak ook beveiligd en alleen aan te passen door de redactie (gebruikersgroep admin)).

Er zijn twee mogelijkheden om deze pagina's te bewerken:

  1. Indien aanwezig, klik op de link onderaan de pagina: "Edit deze pagina"
  2. Pas de url (het webadres) in het venster van de browser aan (zie hieronder).

Editen van een pagina, door de url aan te passen en ?action=edit, ?action=formedit of ?veaction=edit toe te voegen aan het einde. Het resultaat ziet er dan als volgt uit:

https://theaterencyclopedie.nl/wiki/paginanaam?action=edit - Bewerken van de wikitekst met de standaard editor
https://theaterencyclopedie.nl/wiki/paginanaam?action=formedit - Bewerken met een formulier
https://theaterencyclopedie.nl/wiki/paginanaam?veaction=edit - Visual Editor

Toets vervolgens "enter" en de pagina zal geopend worden om te bewerken.

Help!

Het wil weleens voorkomen dat nadat een stukje code is aangepast dat de pagina vreemd reageert. Vaak is er dan per ongeluk ergens een haakje [, ], <, > te weinig of teveel neergezet. Hieronder zie je dat bij de tweede kolom /div> een openingshaakje ontbreekt. Als dit haakje weer wordt toegevoegd dan reageert de code ook weer zoals het hoort.

Wat nu?

HelpFout01.png


<!-- code blok 4 start-->
<div class="flex-row row">

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def">
<h3 class="panel-title">[[Personen| Personen]]</h3></div>
<div class="panel-body">[[Bestand: TIN02 TL99-G 04 325x275 Detail.jpg|class=img-responsive | link=Personen]]</div>
<div class="panel-footer">[[Personen| Zoek op één van de theaterberoepen!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 1-->

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def">
<h3 class="panel-title">[[Voorstellingen| Voorstellingen]]</h3></div>
<div class="panel-body">[[Bestand: TIN02 GD008-11 325x275 Detail.jpg|class=img-responsive | link=Voorstellingen]]</div>
<div class="panel-footer">[[Voorstellingen| Zoek naar een voorstelling!]]</div>
/div><!-- EOF pan -->
</div><!-- EOF col 2-->

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def"><h3 class="panel-title">[[Theaters| Theaters]]</h3></div>
<div class="panel-body">[[Bestand: TIN02 TL5-11 325x275.jpg|class=img-responsive | link=Theaters]]</div>
<div class="panel-footer">[[Theaters| Zoek naar een theater!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 3-->

<div class="col-xs-12 col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading panel-heading-def"><h3 class="panel-title">[[Thema's| Thema's]]</h3></div>
<div class="panel-body border=dashed">[[Bestand: T003672 000 325x275 Detail.jpg|class=img-responsive | link=Thema's]]</div>
<div class="panel-footer">[[Thema's|Lees meer!]]</div>
</div><!-- EOF pan -->
</div><!-- EOF col 4-->
</div><!-- EOF row 1-->
<!-- code blok 4 einde-->

Code TheaterEncyclopedie nader toegelicht

Aan het begin van deze pagina is er een algemene uitleg gegeven over het gebruik van code. Een openingstag <code>wordt altijd gevolgd door een sluittag</code>. Er wordt meestal echter zoveel code op één pagina gebruikt om deze goed te laten werken en t.b.v. de vormgeving dat het logisch is dat je door de bomen het bos niet meer ziet. Daarom is het dus handig om commentaar tekst toe te voegen die geen invloed heeft op de code ''<!-- Lorem Ipsum-->''. De voorpagina is opgebouwd in blokken en het aantal openingstags en sluittags tussen deze blokken moet kloppen met elkaar. Gaat er toch iets fout dan ga je gewoon het aantal openingstags en het aantal sluittags tellen. En waar nodig voeg je een tag toe of haal je een tag weg.

Div

In de code die in de TheaterEncyclopedie wordt gebruikt komen ook heel veel div's (division) voor. Een div is een HTML-element waarmee onderdelen gepositioneerd kunnen worden op een webpagina. Bootstrap maakt gebruik van een grid systeem dat bestaat uit 12 kolommen. En met divisions worden deze rijen en kolommen gepositioneerd op de pagina.

Blok 2: Openingstag en bijbehorende sluittag

Commentaartekst

Blok2Code Commentaartekst Start en Einde.png

container-fluid open- en sluittag

Blok2Code Container-Fluid Start en Einde.png

Body

Blok2Code div carrousel Start en Einde.png

Body

  • In deze code staat aangegeven methidden-xs en hidden-sm dat de afbeeldingen alleen op een groot scherm getoond worden. Anders worden ze verborgen.

Blok 4: Openingstag en bijbehorende sluittag

Commentaartekst Blok 4

Blok 4 uitleg gespecificieerd.png

container-fluid open- en sluittag

Blok 4 bestaat uit 1 rij en 4 kolommen.

Één kolom nader beschouwd

Voorpagina-Blok4-uitleg-opbouw.png

Kolom Personen nader bekeken

Blok 4 uitleg gespecificieerd col1.png