TheaterEncyclopedie:Stambomen

Uit TheaterEncyclopedie
Ga naar: navigatie, zoeken

Inleiding

In het reguliere overleg van 8 oktober 2020 (zie deze pagina) ontstond het idee om onderzoek te doen naar de mogelijkheid om stambomen op te nemen in de Theaterencyclopedie. Het zou gaan om het inzichtelijker maken van hoe binnen bepaalde grote theaterfamilies de familierelaties liggen. Oftewel: inzichtelijker krijgen dat van persoon A, persoon B de vader is, persoon C de oom en persoon D een aangetrouwde tante.

Enkele theaterfamilies waarbij dit zou kunnen worden toegepast:

Voorbeelden hoe weer te geven

Op Wikipedia is deze pagina te vinden over verschillende sjablonen voor de weergave van een stamboom.

Een bijpassend voorbeeld is te zien op de Wikipediapagina van acteur Louis Bouwmeester. Zo'n soort overzicht zou op de Theaterencyclopedie niet misstaan.


Een eenvoudig(er) voorbeeld zonder sjabloon

Met behulp van CSS kan een eenvoudigere stamboom met gelinkte pagina's worden opgenomen:


Deze oplossing is eenvoudiger in die zin dat niet alle relaties ("aangetrouwde tantes") eenvoudig kunnen worden weergegeven. Tevens eenvoudiger in de implementatie en (vooral ook) in het gebruik. Weergave (lijnkleur, lettertype etc.) kan evt. worden aangepast.

  • Ziet er goed uit inderdaad. Alleen wat betreft 'aangetrouwde tantes' is het in sommige families juist wél interessant om ook huwelijken erin te verwerken. Is dat via deze optie wel mogelijk? Voor de rest lijkt het me inderdaad een prima weergave én eenvoudig toe te passen. (Milcof (overleg) 14 okt 2020 10:43 (CEST))
  • @Milco: Zoiets, qua aangetrouwde tante?
Hoe het nu staat, lijkt Shakespeare een broer van 'Aangetrouwde tante', vanwege de lijn die bij beiden eerst naar boven gaat en daarna elkaar raakt. Het zou top zijn als het zou lukken om ook een horizontale lijn vanuit Shakespeare naar iemand te hebben, om een huwelijk aan te geven (denk bijvoorbeeld aan acteur Louis Bouwmeester sr. die onder andere getrouwd was met actrice Anna van Engers). En helemáál ideaal zou dan nog zijn, als de kinderen voortkomen uit het midden van die horizontale lijn. (Zie het voorbeeld op de Wikipediapagina van Louis Bouwmeester, en dan helemaal bovenaan: Engelina Engelbertha Winzel is getrouwd met Frederikus Adrianus Rosenveldt, en hebben samen als kind Louis Rosenveldt). (Milcof (overleg) 14 okt 2020 13:14 (CEST))
Ik snap wat je bedoelt, maar daarvoor is deze methode helaas "te eenvoudig", omdat hij is gebaseerd op een enkelvoudige boomstructuur. Voor een "echte stamboom met dwarsverbanden" moeten we overstappen naar de "Wikipedia-methode", die jezelf al had gevonden. Of we kunnen nog even verder zoeken naar andere alternatieven. Geschikte genealogische mediawiki-extensies zijn helaas niet echt beschikbaar / geschikt voor dit doel (heb ik al naar gezocht). Er is wel nog een heel aantal (commerciële en niet-commerciële) JavaScripts beschikbaar, maar die zullen we dan zelf moeten integreren in MediaWiki. Bmulckhu (overleg) 14 okt 2020 13:56 (CEST)
Is goed. Laten we deze achter de hand houden (is eenvoudig en voor sommige families vast te gebruiken), en ondertussen even kijken wat het beste alternatief is. (Milcof (overleg) 14 okt 2020 14:04 (CEST))

De bovenstaande constructie met Man en Vrouw kunnen we misschien wel met dit CSS-script oplossen, maar daar moet ik dan nog even induiken om het te "hacken", zodat het "horizontale lijntje" beter gaat passen... Bmulckhu (overleg)

Door gebruik te maken van Imagemap

Met behulp van een zogeheten Imagemap kunnen bestaande afbeeldingen (dus ook afbeeldingen met een getekende stamboom) "klikbaar" gemaakt worden. Delen van de afbeelding worden gelinkt naar de pagina van een persoon.

  • Zie de documentatie voor een voorbeeld van de werking (klik op afbeelding).
  • De benodigde extensie is al beschikbaar op de TE

Overige oplossingen



Alternatieve CSS voor mogelijkheid van twee parents uit bovenstaande bron; moet nog op TE getest maar werkt in codeplayer!

/*Now the CSS*/

* {margin: 0; padding: 0;}

.tree ul {
	padding-top: 20px; position: relative;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #ccc;
	width: 50%; height: 45px;
	z-index: -1;
}
.tree li::after{
	right: auto; left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;

	-webkit-transform: translateX(1px);
	-moz-transform: translateX(1px);
	transform: translateX(1px);

	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute; top: -12px; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 32px;
	z-index: -1;
}

.tree li a{
	border: 1px solid #ccc;
	padding: 5px 10px;
	text-decoration: none;
	color: #666;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	display: inline-block;
	background: white;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}
.tree li a+a {
	margin-left: 20px;
	position: relative;
}
.tree li a+a::before {
	content: '';
	position: absolute;
	border-top: 1px solid #ccc;
	top: 50%; left: -21px; 
	width: 20px;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover~ul li a {
	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover~ul li::after, 
.tree li a:hover~ul li::before, 
.tree li a:hover~ul::before, 
.tree li a:hover~ul ul::before
{
	border-color: #94a0b4;
}