TheaterEncyclopedie:Upgrading Bootstrap

Uit TheaterEncyclopedie
Ga naar: navigatie, zoeken

Bij de upgrade van de TE in 2021 is tevens een upgrade van de MediaWiki-skin Tweeki geïnstalleerd, waarbij een upgrade van het ontwerp-framework Bootstrap van versie 3 naar 4 (optioneel) beschikbaar is gekomen. Omdat versie BS3:

  1. op termijn niet meer ontwikkeld en/of onderhouden zal worden,
  2. versie 4 andere/nieuwe functionaliteit biedt,
  3. de overgang een substantieel inspanning vergt,

is het zaak om de gevolgen hiervan in kaart te brengen en eigen doelstellingen te formuleren en de nodige keuzes te maken voor het vervolg.

Hiervoor is een Plan van Aanpak opgesteld (zie hieronder) en op deze pagina worden alle benodigde acties en besluiten gedocumenteerd.

Eerste PvA : projectoriëntatie

Op basis van een eerste inventarisatie is het volgende stappenplan opgesteld:

  1. Opstellen Plan van Aanpak (deze pagina)
    • Doelstellingen, randvoorwaarden etc.
    • Stappenplan
    • Eerste verkenning/inventarisatie (reeds uitgevoerd)
  2. Uitvoeren inventarisatie op basis van Test-TE met BS4 ingeschakeld (in uitvoering)
  3. Opstellen definitief projectplan en tijdlijn
  4. Besluitvorming m.b.t. projectuitvoering
  5. Uitvoering project


Met name de Stappen 3 t/m 5 zijn hieronder verder uitgewerkt, op basis van de bevindingen uit de inventarisatie.

Doelstellingen

Omdat op basis van de inventarisatie is gebleken dat de benodigde inspanning voor de upgrade erg omvangrijk is (zie overzicht), is het voorstel om de doelstelling te verbreden en niet alleen de technische aspecten van BS4 in beschouwing te nemen, maar ook te kijken naar de vormgeving van de TE als geheel en de bijpassende keuze van de skin.

Primaire doelstelling
Geüpgradede TE, werkend met BS4, waarbij het ontwerp van alle pagina’s (zoveel mogelijk) moeten overeenkomen met de bestaande pagina’s en geschikt blijft voor zowel desktop, tablet als smartphone beeldformaten.
Secundaire doelstellingen
  1. Verschuiven van de primaire focus op “editors” (met een desktop schermformaat) naar “bezoekers” (met een smartphone): “Mobile First”, zonder dat de desktopversie te veel verandert.
  2. Verbeteren onderhoudbaarheid Infoboxen en andere vormgevingselementen (in Sjablonen)
    • Infobox header, body en footer sjablonen (modulair opgebouwd)
    • Page-banner , header, body en footer sjablonen (modulair opgebouwd)
    • Panel 1, 2, 3, header, body en footer (modulair opgebouwd)


Alternatief/opties
  • Nieuwe styling (logo, kleurenschema, vormgevingselementen)
  • andere skin gaan toepassen.

Randvoorwaarden

Omdat het project een doorlooptijd van (veel) meer dan "enkele weken" zal hebben, is het noodzakelijk dat de TE gedurende de uitvoering bruikbaar blijft:

  • "Tijdens de verbouwing is de winkel geopend"
    • Bezoekers krijgen de website met goed functionerend ontwerp te zien
    • Editors kunnen blijven werken
    • Nieuwe on-wiki ontwikkelingen kunnen doorgaan (nog over te besluiten!!)

Inventarisatie

Om de gevolgen van de upgrade van BS in beeld te brengen is zowel gekeken naar de technisch-inhoudelijke aspecten als de praktische gevolgen voor de TE.

Belangrijke technische veranderingen (met de meeste gevolgen voor de TE):

  • Vervanging van de veelgebruikte "Panels" door "Cards"
  • Veranderingen aan invoervelden (groepen buttons)
  • Aanpassing van standaard lettergrootte (van 14px naar 16px)
  • Diverse "kleine" aanpassingen
    • (standaard) flex voor uitlijning (ipv. float),
    • verandering van het schalen van afbeeldingen (img-responsive / img-fluid)
    • ...


Deze (technische) aanpassingen hebben tot gevolg dat het ontwerp van de volgende onderdelen herzien moet worden:

  1. Voorpagina
    • Navigatie & footer
  2. Portaal-pagina’s
  3. Widgets, knoppen, inputs, banners, carrousel ….
  4. Infoboxen (sjablonen infoboxen)
    • Productie
    • Persoon
    • Producent
    • Werk
    • Locatie
    • Audiovisueel
  5. Overzichtspagina’s - m.n. sjablonen headers en panels
    • Jaarpagina’s
    • Seizoenpagina’s
    • Plaatspagina’s
    • Op persoonspagina's, Werk-pagina's, ...
  6. Tijdlijnen
    • Canon-pagina's (??)

Op basis van bovenstaande inventarisatie en eerste "in depth" testen door Ilonka, is gebleken dat ieder onderdeel apart opnieuw ontworpen moet worden. De doorlooptijd zal dus eerder in de orde van (vele) weken of maanden zijn (en dus niet enkele weken of dagen).

De complete inventarisatie met bijbehorende checklist staat op de subpagina TE:Upgrading Bootstrap/Inventarisatie.

Plan van Aanpak

Scenario's

Het is niet goed mogelijk is de "oude" en de "nieuwe" vormgeving naast elkaar binnen de TE te gebruiken; dit leidt namelijk tot verkeerde weergave van pagina-onderdelen (uitlijning, overlappingen, slecht/niet functionerende aanpassing aan beeldschermgrootte).

Verschillende scenario's voor de aanpak:

  1. Geleidelijke overgang, door middel van ontwikkelen op Productie-TE (dit geeft dus een "lelijke" weergave tijdens de werkzaamheden)
  2. Ontwikkelen op de Test-TE en op D-day overzetten naar productie (maakt andere ontwikkelingen op Test-TE moeilijk/onmogelijk, zeer complexe migratie op D-day)
  3. Ontwikkelen op de Dev-TE en op D-Day overzetten naar productie en test (behoefte aan een extra instance van de TE, complexe migratie op D-day)

Als "tussenoplossing" - scenario 2,5 - kijken we naar de mogelijkheid om een MediaWiki instantie op een eigen server van WikiWerkers te gebruiken gedurende de ontwikkelingen.

Prioriteitstellingen

De upgrade naar BS4 is een technische "noodzaak", maar biedt geen functionaliteit die hoog op de wensenlijst voor de TE staat. In relatie tot andere ontwikkelingen ("belangrijk & urgent"), heeft de upgrade van Bootstrap wellicht een lagere prioriteit ("wel belangrijk, niet urgent"). In dat geval kan deze upgrade goed gecombineerd worden met andere technische upgrades die op de middellange termijn zijn voorzien.

Combineren met (volgende) grote technische upgrade

  • Over 1/2 - 1 jaar naar MW met Extended Search
  • Over 1,5 - twee jaar naar MW 1.39


Omdat de combinatie van ontwikkelingen om BS3 te upgraden (mogelijk) niet goed te combineren zijn met anderen ontwikkelingen waarbij vormgeving een belangrijke rol speelt, is het van belang deze projecten niet tegelijkertijd uit te voeren, maar na elkaar in te plannen.

Prioritering
Prioriteit Grotere projecten Kleinere projecten
1. Bijwerken Productiepagina's - nabewerking om geautomatiseerd (o.a.) "uitvoerenden" binnen het Sjabloon:Productiepagina_realisatie te plaatsen Ontwikkelingen aan Plaatspagina's'
Overzichtskaart
2. Ontwikkelingen aan Persoonspagina's
Theater CV + evt. nieuwe sjablonen
Ontwikkelingen aan Werk-pagina's
Productieoverzicht
3. Uitbreiding van de TE met ElasticSearch Tijdlijnen
4. TE:Kwaliteitsborging informatie TE:Demo uploaden - Vereenvoudigen uploaden/doneren afbeeldingen
Gebruiker: Bmulckhu/kladblok18/Schenk afbeeldingen aan de TheaterEncyclopedie
5. TE:Zoekmachineoptimalisatie (SEO) - m.n. gebruiker nieuwe extensie TE:Mediabestanden / Jukebox / Bioscoop / ...
6. ... TE:TheaterCollectieSelectie (TCS)
7. ... Interviews en Vice Versa / Stichting Need for Legacy (??)
8. ... TE:Koppeling met Theaterkrant / TE:Theaterkalender / ...

Voor- en nadelen

Scenario 1

Scenario 1: Bijwerken op de Productie-TE
Voordelen Nadelen
  • Eenvoud:
    • Planning: Aanpassingen kunnen stap voor stap aangepakt worden
    • Implementatie: Direct beschikbaar
    • Ontwikkeling: De Test-TE blijft beschikbaar voor ontwikkelingen
  • Zichtbaarheid/bruikbaarheid voor de bezoekers
    • De website ziet er zeer onaantrekkelijk uit
  • Kosten:
    • Geen extra kosten voor Dev-TE

Scenario 2

Scenario 2: Ontwikkelen op de Test-TE
Voordelen Nadelen
  • Onzichtbaar voor gebruikers
  • Complexere migratie
    • In vergelijking met ontwikkelen op de Productie-TE
  • Eenvoudig ontwikkelen
    • Eenvoudig, indien overige ontwikkelingen stopgezet!
  • Overige ontwikkelingen (grotendeels) stopzetten
    • Complex om overige ontwikkelingen voort te zetten
  • Kosten:
    • Geen extra kosten voor Dev-TE

Scenario 3

Scenario 3: Ontwikkelen op de Dev-TE
Voordelen Nadelen
  • Eenvoudig ontwikkelen
    • Ontwikkelingen op Test-TE kunnen grotendeels doorgaan
  • Complexere migratie
    • In vergelijk met ontwikkelen op de Productie-TE
    • Mogelijk nog interferentie met nieuwe ontwikkelingen (test-TE)
  • Onzichtbaar voor gebruikers
  • Kosten:
    • Extra kosten voor Dev-TE

Scenario 2,5

Scenario 2,5: Ontwikkelen op de Wiki van Wikiwerkers
Voordelen Nadelen

Zie Scenario 3

Zie Scenario 3

Geen kosten voor Dev-TE

Enige inspanning voor opzetten van Wikiwerkers-Wiki

Stappenplan van de uitvoering

  1. Technische voorbereiding (ontwikkelomgeving)
  2. Ontwerpen en PoC-testen van vormgevingselementen (sjablonen) t.b.v. verbeteren onderhoudbaarheid
    • Modulaire Infoboxen
    • Modulaire Banners
    • Modulaire Pannels (nu Cards)
    • Overige elementen (Buttons
  3. Ontwikkelingen & testen op Test-TE
    • Voorpagina
    • Template-pagina's met infoboxen (Producties, Werken, Locaties, Personen)
    • Overige Template-pagina's (Plaatsen, Jaren, Seizoenen, Tijdlijnen, ... etc.)
    • Portaalpagina's
    • Overige pagina's
  4. Voorbereiden en plannen migratie
  5. Migratie en testen
  6. Nazorg / nabewerkingen


Advies & besluitvorming

VOORLOPIG!!!!! CONCEPT!!!!

  1. Gezien de weergaven van huidige wiki na overschakelen op Bootstrap 4, is dit scenario - ondanks de voordelen - niet aan te bevelen.
  2. Omdat de eerste inschatting is dat de doorlooptijd van de ontwikkel-werkzaamheden tenminste enkele maanden in beslag zal nemen, is het "tijdelijk" stilleggen van de ontwikkelingen op de Test-TE erg nadelig.
  3. Vragen MF:
    1. In hoeverre is het ideaal als BS4 op een thuisserver wordt ingericht, gelijktijdig met verdere technische ontwikkelingen op de TE?
    2. Is het handig om de verdere ontwikkeling van tijdlijnen voor of na BS4 te doen (ook met het oog op vormgeving daarvan)?
    3. Hoeveel tijd kost het (schatting) als we vol bezig gaan om de eerste drie/vier prioriteringen af te ronden (kaarten op plaatspagina's, Werk-pagina-overzichten, omzetting productiepagina's en evt. tijdlijnen)?
      1. Als de looptijd 'meevalt', zou een eventuele optie zijn: eerst alle aandacht daarop en dat zo snel mogelijk afronden; daarna alle aandacht op BS4 op de Test-TE.

Uitvoering

Zie subpagina met Documentatie Realisatie.


Voorbereiding, migratie en testen

Dit onderdeel beschrijft het concept voor de aanpak van stap 4 en 5:

  • Voorbereiden en plannen migratie
  • Migratie en testen

Inleiding

Om de nieuwe vormgeving, die is ontwikkeld op de Test-TE in gebruik te nemen, moet het worden overgezet naar de Productie-TE (evt. via een tussenstap naar een DEV-TE). Concreet houdt dit in:

  • Aanpassen van configuratie in LocalSettings.php (zeer eenvoudig)
  • Kopiëren van pagina's van de Test-TE naar de Productie-TE


Complicerende factoren hierbij zijn:

  • Grote diversiteit aan pagina's - vele tientallen pagina's op diverse plekken in de TE
    • Tevens hebben de nieuwe BS4-pagina's momenteel (nog) niet hun definitieve plaats (titel) in de wiki - meestal met "aanvulling" BS4
  • Soms gaat het om delen van pagina's
  • Tijdens het kopiëren is het verstandig te stoppen met bewerkingen van de TE (lock-down)
  • Definitief testen kan pas na het overzetten van de nieuwe pagina's op hun uiteindelijke plaats

Keuze van aanpak

+++ CONCEPT - IN BEWERKING!! ++++

OVERZETTEN

In principe 2 manieren om pagina's te kopiëren van de Test naar Productie-TE

  • Gebruik van de export- en importfunctie van MediaWiki
  • Handmatig kopiëren van pagina’s

Omdat de pagina's nog niet op de juiste plek staan, is het gebruik van de export- & importfunctie niet direct mogelijk (daarbij kunnen titels niet of moeizaam tegelijkertijd worden aangepast).

Daarom is overwogen gebruik te maken van een tussenstap via een "DEV-TE". Beide methodes staan hieronder in grote lijnen uitgewerkt om zo een keuze te kunnen maken.

Scenario - Overzetten zonder Dev-TE Scenario - Overzetten MET Dev-TE Opmerkingen
Fase I: Voorbereidingen
  • Opstellen van definitieve lijst van te migreren pagina’s
    • Bron-pagina (Test-TE) en bestemmingspagina
    • Check tussentijdse bewerkingen op Productie (m.n. Portalen)
  • PAGINA'S HERNOEMEN/VERPLAATSEN/KOPIEREN
    • Controleren/testen werking op Test-TE
    • Bewerkte pagina-onderdelen kopiëren vanaf PROD
  • Planning vaststellen en gebruikers informeren
    • Banner plaatsen
  • Backup maken van productie
  • Lockdown van de productieomgeving & instellen op BS4
  • Opstellen van definitieve lijst van te migreren pagina’s
    • Bron-pagina (Test-TE) en bestemmingspagina
  • Planning vaststellen en gebruikers informeren
    • Banner plaatsen
  • Planning bespreken en afstemmen met PW
  • Budgettair afstemmen intern AP/UvA (?)
  • DEV OMGEVING BESTELLEN
  • KOPIE MAKEN OP DEV
    • DEV instellen op BS4
  • Lockdown van de productieomgeving (LATEN OP BS3)
NB: Assistentie PW nodig
Fase II: Overzetten en Testen
Overzetten vanaf Test-TE naar Productie-TE m.b.v. export en import:
  • Overzetten van widgets
  • Overzetten van sjablonen
  • Overzetten van CSS
  • Overzetten van Formulieren
  • Overzetten van Portalen
  • Overzetten van Voorpagina
  • Overzetten van alle overige pagina’s
Overzetten vanaf Test-TE naar DEV-TE m.b.v. verplaatsen/copy-paste:
  • Overzetten van widgets
  • Overzetten van sjablonen
  • Overzetten van CSS
  • Overzetten van Formulieren
  • Overzetten van Portalen
  • Overzetten van Voorpagina
  • Overzetten van alle overige pagina’s
NB: Gedurende de doorloop van Fase 2 is:
  • bij Scenario ZONDER DEV de opmaak van de TE NIET GOED!!
  • bij Scenario MET DEV de opmaak van de prod TE onveranderd
  • Controle / dubbelcheck op Prod-TE:
    • Voorpagina
    • Alle type Infobox-pagina’s (incl. bewerken)
    • Jaar- en Seizoenpagina’s
    • Media-pagina’s
    • Portalen & “speciale” pagina’s (gelinkt vanaf voorpagina en portalen)
Testen:
  • Voorpagina
  • Alle type Infobox-pagina’s (incl. bewerken)
  • Jaar- en Seizoenpagina’s
  • Media-pagina’s
  • Portalen & “speciale” pagina’s (gelinkt vanaf voorpagina en portalen)


Fase III: In productie nemen en afronding
Indien geslaagd:
  • Lockdown beëindigen
  • Gebruikers informeren
    • Banner verwijderen
  • Nieuwe kopie van Productie-TE op Test-TE (!! CHECK pagina’s op Test TE worden verwijderd)
Indien geslaagd:
  • DEV in productie nemen (c.q. kopie van dev naar productie overzetten)
    • Uitgevoerd door PW
  • Lockdown beëindigen
  • Gebruikers informeren
    • Banner verwijderen
  • Nieuwe kopie van Productie-TE op Test-TE (!! CHECK pagina’s op Test TE worden verwijderd)
  • DEV OMGEVING OPZEGGEN
NB: Assistentie PW noodzakelijk
Indien NIET geslaagd
  • Backup terugplaatsen
  • Gebruikers informeren
Indien NIET geslaagd: doorwerken op DEV

Voor- en nadelen

PROD scenario

Voordelen:

  • Eenvoudiger en in eigen hand
  • Geen extra kosten


Nadelen

  • Zichtbaar voor bezoekers gedurende overzetten
    • Inschatting BM: 1-2 dagen (???); mogelijk veel sneller, wanneer voorbereiding 100% goed is.


DEV scenario

Voordelen:

  • Niet (minder) verstoring zichtbaar voor bezoekers
  • Kan uitgebreider de tijd genomen worden


Nadelen:

  • Complexer en grotere afhankelijk van PW
  • Extra kosten


Mits goed voorbereid moet het overzetten in een paar uur kunnen worden afgerond. --> Ik vind dit erg optimistisch. Het zou in principe mogelijk kunnen zijn indien we het inderdaad goed hebben voorbereid maar er zijn altijd onvoorziene zaken waar we tegenaan lopen (denk aan lettertypes). En we moeten niet vergeten om alle BS4 links die er nu in staan er ook weer uit te halen zodat de doorvewijzingen naar de juiste pagina's verwijzen. ~~~~

BM: Dit is inderdaad, waarom ik de nadruk op de voorbereiding leg bij (dikgedrukt, KOPIEREN EN TESTEN!!!).

Verwante onderwerpen