Nieuws:

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Auteur Topic: Voorstel: Leesbaarheid statische pagina's Ubuntu-NL  (gelezen 1973 keer)

Offline EZ-man

  • Lid
  • Steunpunt: Nee
Voorstel: Leesbaarheid statische pagina's Ubuntu-NL
« Gepost op: 2015/01/08, 12:15:30 »
Hierbij stuur ik een voorstel tot wijzigen van de website layout van een aantal statische pagina's.
  http://www.ubuntu-nl.org/gemeenschap
  http://www.ubuntu-nl.org/gemeenschap/meedoen
  http://www.ubuntu-nl.org/ondersteuning/steunpunten
  http://www.ubuntu-nl.org/ondersteuning/engelstalig
  http://www.ubuntu-nl.org/nieuws       >>>   zou moeten worden Links, als sub-pagina van nieuws
  http://www.ubuntu-nl.org/gemeenschap/gedragscode
  http://www.ubuntu-nl.org/gemeenschap/regels

Dit voorstel is gemaakt n.a.v. de discussie die is begonnen op het forum van Ubuntu-nl : 
   http://forum.ubuntu-nl.org/index.php?topic=86808.msg932449#msg932449

Uitgangspunt voor lay-out van informatieve webpagina's
Informatieve pagina's van websites dienen voor de bezoeker overzichtelijk zijn. Voor de ontwerper betekent die, dat de nadruk ligt op navigatie en indexering.

Met het oog op de webrichtlijnen betekent dit:
- een goed gebruik van de semantische tags: h1-6, p, ul, ol, dt, dd, blockquote,    etc.

Vanuit typografisch oogpunt :
- de regellengte beperkt wordt tot ca. 12 - 14 woorden per regel.
- dat de tussenkopjes

Vanuit taalkundig perspectief bekeken :
- het gebruik van het kortere zinnen aan te bevelen. (Dat gaat op dit moment te ver.)

Met die uitgangspunten zijn een aantal wijzigingen gemaakt : 
- op de html-pagina's in de sectie "#content"
- in het style sheet base.css

Aanpassingen HTML
H2 - opwaarderen naar H1
De oranje kleur komt op de pagina voor het hoogste hierarchische niveau.

p strong  - opwaarderen naar H2
Is meer in obvereenstemming met de webrichtlijnen (p strong gebruiken als kopje is knoeien).

1e alinea:  p strong
De eerste alinea is van de pagina's is vaak bedoeld als algemene toelichting. Op dit moment is dat vet gedrukt. Het heeft mijn voorkeur dit in een grotere letter te zetten.

Aanpassingen Style Sheet - base.css
Regellengte - maxwidth: 44em.
- Dit betreft de elementen p, ul, li
- Maxwidth legt geen harde eis op aan andere browser formaten/apparaten, is dus fluid.
- De eenheid em is niet pixel-gestuurd, maar afhankelijk van het gebruikte lettertype: zelfs bij een kleine letter wordt de regellengte beperkt gehouden.

h2: padding-top
De afstand tussen kopje en voorgaande alinea wordt op die manier vergroot en gaat het niet "zweven" tussen twee alinea's.


Hernoem de sub-pagina Nieuws --> Links
De sub-pagina Nieuws verwijs naar externe sites met Tips&Trucs, Blogs, Feeds. Het is verstandig
- de titel v/d pagina aan te passen --> Links
- de sub-pagina ook op te nemen in de sub-navigatiebalk "Links"
- de tekst van het kopje te veranderen in Links voor Ubuntu gebruikers" (ipv "Nieuws").

Opmerkingen
Gebruikte browser
Opera 12.16 onder Linux

Reverse Engineering
Het is mij onbekend hoe de wijzigingen in Drupal moeten worden doorgevoerd. De wijzigingen zijn gemaakt aan de client-side (de browser). Een goed hulpmiddel daarbij was het de browser Opera, die de mogelijkheid heeft de online pagina offline op te slaan (inclusief, js, css, images) in een mht-bestand.

mht - bestandsformaat
mht is een containerbestand dat webpagina's offline opslaat (inclusief, js, css, images). Het hier gebruikte mht.bestandsformaat is gemaakt met Opera 12.16 en weer te lezen m.b.v. Opera. Ook andere browsers kennen dit formaat, maar deze zijn niet geheel compatible met elkaar.

Virus-scan
Omdat het een container-bestand is, van onbekende bron, dient u vooraf dit bestand te scannen met een virus-scanner. Voor mijzelf heb ik de controle uitgevoerd met Clamtk (engine 0.98.5). Er is niets gevonden.

Aanbeveling
Testen van voorgestelde aanpassingen van base.css
- heeft het een negatief effect op
- andere pagina's
- andere browser
- andere apparaten (phone/tablets)

Drupal
Gezien Ubuntu-nl wordt gemaakt m.b.v. het cms Drupal dient te worden bekeken op welke wijze de html-content kan worden herzien op tag-niveau (h1, h2, p, p strong).

EZ-man / 24 december 2014

Offline EZ-man

  • Lid
  • Steunpunt: Nee
Re: Voorstel: Leesbaarheid statische pagina's Ubuntu-NL
« Reactie #1 Gepost op: 2015/01/08, 12:23:49 »
Aanpassingen in style sheet base.css     In de bijlage zijn orgineel en aanpassing te vinden.
Op het niveau van de content zijn een aantal aanvullende opmaak-regels door mij toegevoegd

* 4. Content
*  na de tag h1 is toegevoegd   :

/**-------  toegevoegd door EZ-man   BEGIN    ----------------------------- */

#content h2 {
  padding-top: 1.7em;
}

#content dd, #content hr, #content p {
  max-width: 43em;
}

#content li  {
  max-width: 35em;
  padding-bottom: 0.9em;
}

#content p strong {
  font-size: 1.15em;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.35em;
}

/** -------  toegevoegd door EZ-man   EINDE    ----------------------------- */


Offline EZ-man

  • Lid
  • Steunpunt: Nee
Re: Voorstel: Leesbaarheid statische pagina's Ubuntu-NL
« Reactie #2 Gepost op: 2015/01/08, 12:27:29 »
Wijzigingen uitgelegd voor leken:    zie bijlage

Offline EZ-man

  • Lid
  • Steunpunt: Nee
Re: Voorstel: Leesbaarheid statische pagina's Ubuntu-NL
« Reactie #3 Gepost op: 2015/01/08, 12:33:34 »
Voorbeeld Ondersteuning
Orgineel:           http://www.ubuntu-nl.org/ondersteuning
Aanpassing:      zie bijlage

Opmerking: 
Indien behoefte is alle gewijzigde pagina's hier te publiceren dan hoor ik dat wel.

Offline EZ-man

  • Lid
  • Steunpunt: Nee
Re: Voorstel: Leesbaarheid statische pagina's Ubuntu-NL
« Reactie #4 Gepost op: 2015/01/08, 12:38:29 »
mht - compressed html  >>> Opera 12
De onderstaande bijlage is te openen met Opera 12.

Lees voordien de opmerking over virusscan in post #0

Offline EZ-man

  • Lid
  • Steunpunt: Nee
Re: Voorstel: Leesbaarheid statische pagina's Ubuntu-NL
« Reactie #5 Gepost op: 2015/01/08, 12:43:04 »
Wijzigingen voor de Nieuws-pagina
Orgineel:     http://www.ubuntu-nl.org/nieuws
Wijziging:     zie bijlage


Offline Johan van Dijk

  • Administrator
    • johanvandijk
  • Steunpunt: Nee
Re: Voorstel: Leesbaarheid statische pagina's Ubuntu-NL
« Reactie #6 Gepost op: 2015/01/08, 15:30:03 »
Bedankt voor je werk!

Ik zal proberen de meeste techische kwesties in 1 post te beantwoorden:

  • Tags: Drupal filtert een hoop tags weg vanwege veiligheid en spam. Welke tags er wel gebruikt mogen worden kan gelukkig wel aangepast worden, dus roep maar wat er nodig is.
  • HTML aanpassen: zie hierboven, dat moet gewoon kunnen.
  • Stylesheet: Dit zou flink getest moeten worden, maar in principe kan dit ook aangepast worden. We zitten wel vast aan eisen en beperkingen van Drupal, dus wat er wel en niet mogelijk is zal ook nog uitgezocht moeten worden.
  • Enkele pagina's kunnen alleen door het beheerteam gewijzigd worden vanwege veiligheid. Dit heeft te maken met het onderscheid tussen gefilterde HTML en compleet ongefilterd waar ook PHP code mogelijk is.
  • De overzichtspagina's van de teams en teamleden halen hun informatie uit Launchpad. Deze pagina's kunnen dus niet zomaar gewijzigd worden.


Verder qua indeling en opbouw van de site is alles mogelijk. Het enige wat wel vast staat is dat de navigatie via de 2 bovenste balken gaat. Maar wat daar in staat kan omgegooid worden, net als de inhoud van de pagina's.

Offline EZ-man

  • Lid
  • Steunpunt: Nee
Re: Voorstel: Leesbaarheid statische pagina's Ubuntu-NL
« Reactie #7 Gepost op: 2015/01/08, 15:48:16 »
[...]
Verder qua indeling en opbouw van de site is alles mogelijk.
Bedankt voor je inhoudelijke reactie.

De wijze waarop PHP werkt is mij op hoofdlijnen bekend. Ik begrijp je reserves op dit moment, omdat je echt in de diepte moet afdalen om te weten of het kan. Ik hoor later wel hoe de vork aan de steel zit.

Offline EZ-man

  • Lid
  • Steunpunt: Nee
Re: Voorstel: Leesbaarheid statische pagina's Ubuntu-NL
« Reactie #8 Gepost op: 2015/01/11, 10:38:09 »
Een laatste aanvulling : Welke aanpassingen in de HTML-code betreft het ?

In hoofdzaak hebben de wijzigingen betrekking op css.
Maar op de pagina's zijn wel zo'n 4-7 kleine aanpassingen nodig.

Het printje (zie bijlage) van de code orgineel / aanpassing,
   zoomt in op content op pagina: http://www.ubuntu-nl.org/ondersteuning


Offline Johan van Dijk

  • Administrator
    • johanvandijk
  • Steunpunt: Nee
Re: Voorstel: Leesbaarheid statische pagina's Ubuntu-NL
« Reactie #9 Gepost op: 2015/05/26, 08:41:51 »
Kickje van een paar maanden ;)
Het heeft even geduurd maar ik heb de CSS aanpassingen doorgevoerd.
Samen met je andere topic kunnen we weer een stap vooruit maken op de website.