TheaterEncyclopedie:Voorpagina beheren
Uitgangspunt uitleg voorpagina mei 2019!
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 |
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.
- De TheaterEncyclopedie is vernieuwd! is een Sitenotice en stel je in via MediaWiki: Sitenotice.
- Meedoen met de TheaterEncyclopedie! is een extra regel in het navigatiemenu en stel je in via MediaWiki: Tweeki-subnav.
Menu
En natuurlijk de verschillende menu-onderdelen. Een korte uitleg hieronder:
- MediaWiki:Tweeki-navbar-brand; UvA logo.
- MediaWiki:Tweeki-navbar-left; uitklapmenu's Snel naar, Portaal, Facebook en twitter.
- MediaWiki:Tweeki-navbar-right; rechter menu toolbox, personal, login, zoeken.
- MediaWiki:Tweeki-login; inloggen/registeren.
- MediaWiki:Tweeki-sidebar-right; Edit, bewerken, annuleren
- MediaWiki:Tweeki-subnav; Hoe kan ik meeschrijven aan de TheaterEncyclopedie?
- MediaWiki:Tweeki-container-class; Container-fluid, wordt gebruikt voor een volledige paginabreedte van het beeldscherm.
- MediaWiki:Tweeki-editsection-icon; icoontje om te editen.
- MediaWiki:Tweeki-footer; extra informatie in de footer.
- 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!
Kopteksten in WikiIn een wiki is gebruikelijk om voor kopteksten |
<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!
|
<!--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
Ipad
Iphone
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-->
Voorpagina met editknop en titelpagina
Voorpagina zonder editknop en titelpagina
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-->
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.
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
<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:
- Indien aanwezig, klik op de link onderaan de pagina: "Edit deze pagina"
- 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?
<!-- 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
container-fluid open- en sluittag
Body
Body
- In deze code staat aangegeven met
hidden-xsenhidden-smdat de afbeeldingen alleen op een groot scherm getoond worden. Anders worden ze verborgen.
Blok 4: Openingstag en bijbehorende sluittag
Commentaartekst Blok 4
container-fluid open- en sluittag
Blok 4 bestaat uit 1 rij en 4 kolommen.
Één kolom nader beschouwd
Kolom Personen nader bekeken
