De site centeren

[csshunter]

Hoi Joop hoi!

:thumb::thumb::thumb:

dekikkers.nl
Hij is helemaal fenomenaal !!!

Gefeliciteerd!

CSShunter​

 

[vredeveld01]

Hoi csshunter,

Bedankt voor de felicitaties maar de credits gaan natuurlijk geheel naar jouw vakmanschap.

Ik heb een mail gestuurd naar het bestuur en zal hun bevindingen nog hier plaatsen...

Heb ook de mappen opgeschoond en dit is het resultaat........



oude map was 41.713.912 Bytes
nieuwe map is 6.923.017 bytes

Vooral de snelheid waarmee de site laadt is fantastisch:thumb:

Ik ga nu rustig afwachten tot het tijd is voor fase 2.

Nogmaals super bedankt voor het vele goede werk wat jij er in gestopt hebt.

Groeten Joop.

En hoe begon het ook al weer???? Een vraag over centreren:shocked:

 

[vredeveld01]

Hoi,

Bericht van de voorman v/d kikkers:

Ik vind het top wat je doet en de site is inderdaad veel sneller! Ik vind vooral ook de miniatuurweergaves van de PDF files mooi.
Ik zal binnenkort wat updates doorgeven mbt personen etc.
Is er een koppeling met Facebook mogelijk? Op facebook staan ook meerdere foto's, kunnen we die ook linken/koppelen?
Eventueel ook Twitter, alhoewel dat nog niet echt hard loopt.

Ik kan met Safari de knoppen bovenaan de pagina (heren, dames etc.) niet bedienen, is daar nog iets aan te doen?

Ik zal morgen safari installeren om te kunnen checken of het klopt....

Groeten Joop

 

[csshunter]

Hoi Joop,
Ja, het was een erg leuke coöperatie, en heel spannend om als loodsbootje-op-afstand te varen.

=======

Heb ook de mappen opgeschoond en dit is het resultaat........

Zo! Met het vervangen van het oude dhtml-menu en van de Dreamweaver-methode voor inbakken van een template is dus een winst behaald van bijna 35MB, oftewel 83% van de oude bestandsgrootte was niet nodig. Caramba!

• Het blijkt dus ook prima zonder het hele Dreamweaver-template te kunnen. Na het overboord kieperen ging het opeens veel vlugger.
• Het gebruik van serverruimte-besparende php-includes is ook een mooie illustratie van wat ik eerder als voordelen van php boven een DW-template aangaf.

=======

En hoe begon het ook al weer????

Inderdaad een uiterst onschuldig vraagje over hoe de pagina's gecentreerd konden worden.
Van het één komt het ander!

=======
Nog n.a.v nr. #81:

De nieuwe index.php had trouwens allemaal koppelingen naar de html paginas

Snap ik niets van, want mijn proef-index.htm van nummer #80 had ik vóór mijn reactie van nr #80 geüpload, en daarna heb ik er niets meer aan gedaan; hij staat er nog steeds met de goede verwijzingen naar de php-pagina's in de menu's.
Maar eind goed, al goed: de index staat er nu ook goed op.
[edit]Eh, bijna, zie hieronder[/edit]

=======

... met Safari de knoppen bovenaan de pagina (heren, dames etc.) niet bedienen, is daar nog iets aan te doen?

Gelijk Safari ingedoken, want dat mag natuurlijk niet gebeuren ("Had 'm toch ook in Safari getest?" vroeg zekere hunter zich vertwijfeld af).
En ... met Safari 5.0.3 (7533.19.4) onder Windows-XP geen centje pijn.

• Op welk Operating System en met welke Safari-versie doet zich het verschijnsel voor?
• En lukt het niet vanaf alle pagina's of alleen vanaf sommige?
• En doet een losse oproep van bv. teams/oldkikkers.php het wel?

=======
Een ongeluk zit in een klein vishaakje!

Hola, ik had de kikkers-site al een tijdje openstaan, maar daar zie ik bij een reload dat de index.php gewijzigd is.
Deze heeft nu in Firefox en Chome een blanco menu-link naar "Heren 1". Bij een hover of klik blijkt deze naar de wijzigingenwedstrijdschema.pdf te gaan. In IE7 en Safari gaat het wonderwel goed. In Opera is het hele teams-menu niet meer te bereiken, en is in de rechterkolom de link naar de wijzigingenwedstrijdschema.pdf weggevallen.
Oorzaak: verschillende foutafhandeling door de browsers van een tikfoutje: een weggelaten rechter vishaakje > achter de </a.

<p class="center">
     <a href="documenten/wijzigingenwedstrijdschema.pdf" target="_blank">
          <strong>wijzigingen in wedstrijdschema</strong>
     [COLOR="#B22222"][SIZE=2][B]</a[/B][/SIZE][/COLOR]
</p>

Daardoor slaan de browsers vreselijk op hol, bv. Firefox gaat wild-west de niet afgesloten link overal tussen proppen. Pas bij de link naar de Heren2 gaat het weer goed (zegt Firebug, aanradertje voor fout-diagnose en style-experimenten):

NB: vanaf de andere pagina's gaat het wel goed; het is alleen de index.
Ook een paar andere pagina's hebben html-foutjes, zag ik tussen m'n oogharen.

• Tip: na een aangepaste pagina altijd even met de html-validator kijken, want die signaleert dit soort dingen ogenblikkelijk.
  
  
• Tip! Vooral ellenlange links met spaties en &-tekens (meestal naar externe sites, Google is er ook erg goed in) zijn altijd boosdoeners.
  Op de hand alle spaties in %20 veranderen en alle & in &amp; omzetten?
  Nee, daar is een online tooltje voor: Valid-O-Link.
  Je stopt de foute link er in (alles tussen de aanhalingstekens van de href="..."), en de goede link komt er uit.

=======

Is er een koppeling met Facebook mogelijk? Op facebook staan ook meerdere foto's, kunnen we die ook linken/koppelen?
Eventueel ook Twitter, alhoewel dat nog niet echt hard loopt.

Tja, van het één komt het ander!

=======

Ik ga nu rustig afwachten tot het tijd is voor fase 2.

Heb al wat spanten naar het dok gebracht; ze staan nog niet overeind en er moeten nog meer bij.

Met vriendelijke groet,
CSShunter

 

[vredeveld01]

Hoi Hunter,

Je gaat op safari met hunter, je neemt mee een vishaakje en vangt een heel menu.

Ik heb net snel even gekeken maar het haakje staat er gewoon op, wel een uitroepteken er tussen????

Ga vanavond verder op strooptocht, moet nu even werken:evil:


Gr. Joop

 

[Tha Devil]

Deze thread kreeg mijn aandacht omdat hier een spammer een bericht had geplaatst.

Ik merkte dat er enkele HTML-tags misten, deze heb ik even toegevoegd en ook een paar berichten samengevoegd.

Indien er code geplaatst wordt, deze graag tussen

...

, [js]...[/js] of

...

plaatsen. Op die manier blijft de vraag overzichtelijk

Met vriendelijke groet,

Stefan (Tha Devil)
Moderator Helpmij.nl

 

[csshunter]

Hoi Joop,

... maar het haakje staat er gewoon op, wel een uitroepteken er tussen????

Er gebeuren hier raadselachtige dingen...
Er zijn kennelijk een paar kikker-kaboutertjes op de server langs geweest na mijn post of terwijl je aan het werk bent, want:
Nu staat het > haakje er inderdaad, en geen uitroepteken te bekennen (zoals 't hoort).

• Snel het vishaakje uitgeworpen en gehengeld in Firefox, Chrome, Opera, Safari en IE7.
• En Koning, Keizer, Admiraal: werken doen ze allemaal! :thumb:
• De Heren1-link is overal zichtbaar, hele topmenu doet het in alle browsers, en ook Firebug kan nu geen ongerechtigheden in het menu neer ontdekken.

=======
Sociale koppelingen
Als je vanavond toch nog op strooptocht wilt gaan, heb ik een nog ongebaand wildpad voor je verkend (hoefde vandaag niet te werken ).
Directe koppelingen naar Facebook en Twitter zijn niet zo moeilijk. Het meeste werk gaat (ging) zitten in het op maat maken van twee bijpassende icoontjes met hun hover-varianten, aansluitend op de Kikker-huisstijl.

• Voor in de map techniek/images: techniek/images/kikkers-social-sprite.png

Dan moeten er voor een mooie plek op de pagina wat aanvullende stijlregeltjes komen.

• Opgenomen in een verse editie voor de techniek-map: kikkers-stylesheet.css.

En voor het eigenlijke plaatsen op alle pagina's hoeft alleen linkerkolom-fragment aangepast te worden.

• Gedaan in een nieuwe versie voor de techniek-map: kikkers-zijmenu.htm
  (zie broncode: ze staan er echt op!)

Met deze 3 zijn nu alle pagina's bekeerd tot het sociaal gekoppeld zijn: alles wordt via de techniek geregeld, op de pagina's zelf hoeven we gelukkig niet meer te zijn.
En dankzij het verlaten van het DW-template hoeven alleen deze 3 geüpload te worden, en niet alle pagina's van de hele site opnieuw.
Hoe het er op deze manier uit komt te zien: zie ginds.

=======
Eervolle vermelding
Misschien kan je de bezoekers er op de nieuws.php pagina nog extra attent op maken via een regeltje dat men voor nieuwtjes ook zeker de FB- en Twitter-pagina's moet bekijken (met nog maar eens de links).

=======
BVV = BBV ?!
Bij het strandjutteren op de FB- en T-pagina's viel me op dat het account bij Facebook heet: "www.facebook.com/BVVdekikkers" (http://www.facebook.com/BVVdekikkers).
Op die pagina zelf (in de <title> en de rest) staat wel gewoon: "BBV De Kikkers is op Facebook".
Misschien een nieuw FB-accountje aanmaken en het handeltje overhevelen?

=======
Algemene Beschouwingen: sociale perikelen

Met de pagina's op Facebook en Twitter zijn er nu in feite drie Kikker-websites i.p.v. één!

1. De Facebook-site, bestaande uit een aantal FB-pagina's, die het stramien (Content Management Systeem) van Facebook volgen; hier kan je niet zelf in ingrijpen.
2. De Twitter-site, bestaande uit een aantal Twitterpagina's, die het stramien (CMS) van Twitter volgen, dat anders in elkaar zit dan dat van FB; hier kan je ook niet zelf in ingrijpen.
3. De gewone site dekikkers.nl, dat is een "echte" website waarin je alles wel zelf in de hand hebt (zonder CMS, via Dreamweaver/Kladblok en FTP).

A. Koppel-problematiek

Op Facebook staan ook meerdere foto's, kunnen we die ook linken/koppelen?

Tja:

1. Op Facebook staan foto's (2 losse foto-pagina's en daarnaast 5 albums! - met een eigen vergrotings-systeem), èn video's!
2. Op Twitter staan ook een paar foto's.
3. En er is de foto-pagina op de gewone site, die ook albums heeft (en een eigen vergrotings-systeem heeft / resp. ook gaat krijgen in Fase 2).

Hetzelfde geldt voor de berichtgeving:

1. Op Facebook staan mededelingen en berichten (ook van externe posters).
2. Op Twitter staan mededelingen en berichtjes (ook van externe posters).
3. Op de gewone site staan ook mededelingen, en er is de Nieuws-pagina.

Een info-oerwoudje!

Foto's linken vanuit de gewone site naar FB/Tw kan natuurlijk altijd, maar dan moet dat wel handmatig gebeuren. Daar ben je wel een tijdje mee bezig (en opnieuw zodra ergens anders iets verschijnt).
Automatisch koppelen is echter een heel ander verhaal. Dan stuiter je tegen de verschillende structuren van de 3 sites aan, en die zijn redelijk onverenigbaar. Mooi integreren is door die systeemverschillen een uiterst lastige, zo niet onmogelijke zaak (FB en Twitter willen uniek zijn, en hebben zo hun eigen methodes). Stukjes gewone website integreren in FB of Twitter lijkt me überhaupt niet mogelijk, hoogstens andersom.

• Twitter heeft wel een systeem om een aantal Twitter-berichten binnen te halen op een pagina van een andere site (met "widgets" en "Embedded Tweets"). Daar komt een hoop (via via) javascript bij kijken en ook extra extern css. Maar naadloos invoegen in de huisstijl van de Kikkers-site is minstens goed voor een serie bijzonder regenachtige zondagmiddagen (als het al kan).
• De Facebook-pagina hangt van javascript en AJAX aan elkaar, en er valt niet te linken naar de video's aldaar (of ze op een andere pagina in te sluiten - in tegenstelling tot YouTube-video's, waarmee dat wel kan).

B. Beheer-problematiek
Met deels identieke Kikker-onderwerpen en het overlappen van de 3 websites is enige coördinatie wel handig.

• Voordeel van de CMS'sen van FB en Twitter is dat "iedereen er bij kan", en snel ook.
• Voordeel van de gewone site is dat alles over één persoon gaat: de webmaster.

Tja: elk voordeel heb z'n nadeel!
Ik denk dat het zinvol is om goede werkafspraken te maken tussen jou als webmaster en de verschillende account-beheerders van de FB- en Twitter-accounts. Dan heb je een soort Centraal Beheer, waardoor dingen niet dubbel of overlappend of half-half of helemaal niet op Internet komen, tot verwarring van de arme bezoeker die 3 sites tegelijk moet checken voor zijn/haar info...

• Je kunt aan boeldelscheiding denken: bv. op de gewone pagina staat niet het allerlaatste nieuws: daarvoor wordt altijd verwezen naar bv. FB.
• Je kunt ook een doorstromingsmodel maken: bv. nieuwe foto's komen eerst snel op FB, maar worden tegelijk naar de webmaster gestuurd die ze op de gewone site zet; zodra dat klaar is, kan de serie bij FB er dan weer af (met verwijzing). *)
• Iets dergelijks kan je ook met de nieuwtjes doen: bv. "oud nieuws" van een maand geleden en eerder wordt doorgeschoven naar een nieuwsarchief op de gewone site. Soms zal dat een beetje dubbelop zijn, bv. een bericht over een uitslag (de uitslagen staan al op de uitslagenlijsten), maar in het nieuwsberichtje staat vaak net wat meer dan de kille cijfers, en dat geeft een goed beeld van de sfeer en het wel- en wee-varen van de club. - En in het archief doet het geen kwaad.
• Bijkomend kan je bv. ook een hulp-webmaster in het leven roepen (als die er al niet is): een foto-monteur, die alle ingekomen foto's verkleint resp. bijsnijdt tot het goede webformaat, optimaliseert en aflevert bij de webmaster > spreiding van het werk!

Op zo'n manier komt ook het Groot Overzicht altijd op de gewone site te staan, waar het m.i. thuishoort.
Om eens over na te denken.

Met vriendelijke groet,
CSShunter
__________
*) Nu staan er bv. bij FB foto-albums van vorige jaren op die (nog) niet op de gewone site staan.

 

[vredeveld01]

Hoi csshunter,

Ik heb voor de zekerheid de door uwe hoogheid gemaakte index pagina nogmaals erop gezet want het kon zijn dat ik mijn eigen proef-index heb gebruikt.:evil:
Html validator erover heen en ziet er mijn uit alleen 6 waarschuwingen voor /span><span.
Ook getest met safari en gaat mooi, nu komt die.... op de iphone, ipad en ipod kun je het menu wel zien maar klapt niet uit bij toucheren.
Bij de pagina heren1 werkt het menu ook niet.....dus neem even aan dat die op Apple niet werkt.

Het ging ook veel te mooi.....

Nu ben ik geen Apple fan maar om deze nu helemaal buiten spel te zetten gaat mij een balletje te ver.

De twitter en facebook koppelingen staan er op en zien er niet alleen mooooooooi uit maar werken ook nog.
Waar plaats ik de <?php include("../techniek/kikkers-zijmenu.htm"); ?> in de index pagina???

De algemene beschouwingen heb ik door gemaild naar de voorzitter die ook de beheerder is van fb en twitter, we zullen horen
hoe hij hier over denkt. Ik vond het en goed en verhelderend verhaal.




Groeten Joop.

 

[Tha Devil]

Ook getest met safari en gaat mooi, nu komt die.... op de iphone, ipad en ipod kun je het menu wel zien maar klapt niet uit bij toucheren.
Bij de pagina heren1 werkt het menu ook niet.....dus neem even aan dat die op Apple niet werkt.

Het ging ook veel te mooi.....

Nu ben ik geen Apple fan maar om deze nu helemaal buiten spel te zetten gaat mij een balletje te ver.

De reden hiervoor is dat een apparaat met een touchscreen geen "hover"-effect kent. Je kunt immers niet ergens boven blijven zweven met je cursor.
Wellicht heb je iets aan deze uitleg (en mogelijke oplossing) http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/

 

[vredeveld01]

Tha devil,

Bedankt voor jouw input en sorry voor het niet tussen de html tags plaatsen van de lappen tekst.

Ik begrijp het verhaal dat er niet ge-hovert kan worden met touchscreen en dat er dus op getikt moet worden.
Op mijn android daarentegen werkt dit wel zonder extra code, is dit dus alleen voor de Apple producten?

Groeten Joop

 

[csshunter]

Waar plaats ik de <?php include("../techniek/kikkers-zijmenu.htm"); ?> in de index pagina???

Ha, goeie vraag! :d

Had ik even niet aan gedacht *): de index heeft helemaal geen zijmenu-include, daar moet het direct op komen.
Er staat nu:

<div id="apDiv3"><!-- menu linkerkolom -->
    <ul>
        <li><a class="homepage" href="index.php">Home</a></li>
        ... enz.
    </ul>
</div><!-- einde #apDiv3 -->

Dat kan worden:

<div id="apDiv3"><!-- menu linkerkolom -->
    <ul>
        <li><a class="homepage" href="index.php">Home</a></li>
        ... enz.
    </ul>
    <a id="facebook" href="http://www.facebook.com/BVVdekikkers" target="_blank" title="Nieuws en foto's op Facebook!"></a>
    <a id="twitter" href="https://twitter.com/BBVdekikkers" target="_blank" title="Ook nieuws op Twitter!"></a>
</div><!-- einde #apDiv3 -->

=======
Lege <span>
De html-validator signalen over de lege <span>'s in het topmenu kan je met gerust geweten voor kennisgeving aannemen.
Is waarschijnlijk de HTML-Tidy validator? (de gewone online html-validator van w3c slaat er niet op aan).
Deze waarschuwingen zijn er voor bedoeld dat je niet zomaar lege elementen (<div></div>, <p></p>, <span></span>, enz.) op een pagina laat rondslingeren. Die kunnen soms wel eens onheil aanrichten.
In ons geval niet: ze zitten er opzettelijk in om de grijze "overlay" over de bovenste fotostrook op te roepen als er over het topmenu gehoverd wordt.
Wil je ze ook in HTML-Tidy nóóóit meer zien, dan zet je er in het menu-fragment even een leeg commentaar <!-- --> tussen (!).
Daarmee denkt HTML-Tidy dat er iets substantieels tussen de <span> en de </span> staat, en geeft geen alarm meer.

=======
Touchen...
Mja, van Blauwbessen, Pods, Pads, Peren en Appels, alsmede Androïden en andere mensachtige moderniteiten heb ik geen scheepsbeschuit gegeten: die heb ik niet in huis of in mijn directe omgeving.
- Gelukkig zijn er helpmij'ers die er wel verstand van hebben!

PS: Doet de Safari van de voorman v/d kikkers het inmiddels ook?

Met vriendelijke groet,
CSShunter
_____________
*) Niet goed gekield, dus ik moet gekielhaald worden: had ik nog zo voor gewaarschuwd in nummertje #79!
"Noot voor de toekomst: als er eens iets in het teams-menu of het pagina-menu moet veranderen, dan moet dat behalve in het fragment kikkers-topmenu.htm of kikkers-zijmenu.htm óók gebeuren in deze index.php."
Soms is de toekomst erg dichtbij!

 

[vredeveld01]

Hoi csshunter,

wees niet te streng voor jezelf, ik vind kielhalen gezien je staat van dienst een te zware straf.
Een betere bestraffing is het nog even de hand vasthouden van een desperate webmaster in wording.

De index pagina doet nu ook mee en ziet er goed uit.

PS: Doet de Safari van de voorman v/d kikkers het inmiddels ook?

Deze safari wordt gehouden op een ipad en daar moet ik mee bezig, is de oplossing van tha devil te doen
in dit complexe geheel?

Groeten Joop.

 

[csshunter]

Hoi Joop,
Ik heb de link van ThaDevil eens bekeken, en die heeft een html+css opzet die niet rechtstreeks over te nemen is.
Maar als ik de achtergrond goed begrijp, wordt het opgelost door in het hoofdmenu-item een (onzichtbare en nergens naar toe gaande) extra link te plaatsen.

• Dat heb ik toegepast op m'n pagina organisatie.php

Kan je eens op een i-dinges touchen of het topmenu nu wel reageert bij zachtjes tikken op het raam?

• Zo ja, dan kan je een nieuwe versie kikkers-topmenu.htm en een nieuwe versie kikkers-stylesheet.css in de techniek-map plaatsen & uploaden.
• Zo nee, dan gaan we verder op verkenning uit.

Met vriendelijke groet,
CSShunter

 

[Tha Devil]

Werkt prima op een iPad csshunter :thumb:

 

[vredeveld01]

En Tha devil heeft dat helemaal goed, werkt prima op de toestellen van de Steve Jobs adepten.

Ik heb er zelfs aan gedacht om ook de index pagina mee te laten doen.

Wederom een grote vooruitgang voor de site, Bedankt hiervoor.

Groeten Joop

 

[csshunter]

Hoi Appelmans,

Ik heb er zelfs aan gedacht om ook de index pagina mee te laten doen.

Slimmer kan niet!

Met vriendelijke groet,
ihunter (die weer wat geleerd heeft voor volgende gelegenheden, ThaDevil :thumb

 

[csshunter]

Hoeps!
Weet niet of het al een golf van protesten heeft veroorzaakt, maar er is toch nog een foutje geslopen in het laatste stylesheet met de touch-aanpassingen.
Nadat ik alles had gecheckt en in orde bevonden, heb ik nog een kleine commentaar-wijziging in het stylesheet aangebracht zonder verder iets te veranderen.

Maar ... nu heeft mijn huis-tuin-en-keuken editor de onhebbelijkheid om heel soms bij het (her-)opslaan op een willekeurige plek een opgegeven waarde voor een background-position te schrappen.
:evil:
Dat was in m'n versie van 18 okt. dus gebeurd, met als gevolg dat een hover over het Twitter-icoontje opeens maar een half icoontje omhoog gaat.

• Hier verse vis! kikkers-stylesheet.css (versie 20 okt.)
  Eventueel even een browser-refresh om 'm te pakken te krijgen.

Je moet toch ook voortdurend op je kwievief zijn!

Met vriendelijke groet,
CSShunter

 

[vredeveld01]

De complete vloot van slag, de ontdekking dat de aarde niet plat was bracht minder roering dan deze onthulling.

Heb hem snel aangepast voordat de leden van de kikkers massaal in een hysterische bui overboord springen.

Maar de afdeling damage control is er mee bezig en en heeft goede hoop.

Groeten Joop

 

[csshunter]

Ha, de goede hoop werd gezegend: het tweet-kikkertje tweet weer alsof er op de valreep niets gebeurd was, en de vlootschouwer zag ook geen desperaat overboord gesprongen kikkers op zwemtocht naar het einde van de wereld.

 

[vredeveld01]

Dan ben ik natuurlijk bezig met doorgronden hoe de lijnen tussen de pagina's, stylesheet, kikers-standaardzaken enz. lopen.

De hoverafbeelding van basketbalwear en de link naar die website toe mag namelijk verdwijnen (geen sponsor).

Kan natuurlijk wel van alles gaan verwijderen maar vraag toch liever aan de expert hoe die dat zou doen.

Misschien dat ik dan beter zie het de lijnen lopen.

Groeten Joop