Archief - INFO: De complete webmaster gids

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
B

Brock

Legacy Member
Search Engine Optimalisation

Waar het op neer komt:

1) Zorg voor goede ( liefst unieke ) content op uw website
2) Zorg voor veel links naar jouw pagina. Elke link naar jouw pagina (tis haast een gezegde geworden) telt als een stem van deze pagina voor jouw pagina. Hoe belangrijker de pagina die een link legt naar u, hoe meer deze stem doorweegt !

Tevens moeten alle commentaren over validity vs googlerank naar mijn menig sterk gerelativeerd worden. Belangrijke dingen zijn bvb wel een alt-tag aan uw img's geven, en uw navigatie voor google toegankelijk maken ( een flashnavigatie is maw niet zo'n goed idee - niettegenstaande hiervoor ook al oplossingen bestaan ? ).
Een duidelijke structuur zal google z'n werk misschien iets eenvoudiger maken, maar het is zéker geen "key to success"

Ik ben momenteel bezig een website aan het optimaliseren voor google. Deze antiquair heeft reeds een fortuin uitgegeven aan een SEO ( search engine optimizer ) om via de zoekwoorden "antique maps" op de 1e pagina te komen op google.com ( in ENG ).
Resultaat: pagina 13 ( = onvindbaar maw )

Het was dus voor mij een uitdaging om uit te zoeken waarom sanderusmaps minder goed scoort dan bvb raremaps ( rank 1 á 2 ).
Als je de vergelijking tussen de 2 websites maakt kom je uit dan sanderusmaps een veel grotere catalogus heeft ( met foto's, beschrijving, etc alles erop en eraan ) dan die raremaps. Verder is de structuur van raremaps zeker niet beter dan die van sanderusmaps.

Waarom komt die raremaps dan op de 1e plaats terecht en sanderusmaps op pagina 13?
links naar de website !!

raremaps heeft tal van sponsoringsprojecten lopen en staat vermeld op verschillene pagina's met een hoge pagerank.

We zijn nu bezig met net het zelfde uit te voeren bij sanderusmaps ( dus geen of amper inhoudelijke wijzigingen aan de website ). De website is nog maar op 1/10de van de sites waarop we willen staan toegevoegd, maar is ondertussen wel al 6 pagina's gestegen ! More to come dus.

Content + linking zijn het belangrijkst. Zorg dat je alvast daar goed zit, de rest is "tuning".

Het Sanderus project kan je hier opvolgen

Uw site description zet je in de het description element van uw website ( bij tn-forum is dit bvb: <meta name="description" content="This is a discussion forum about games." /> ).

Google werkt echter ook nog met een andere manier om uw description op te halen: dmoz.org. Eenmaal uw description op deze pagina staat, zal google deze description een hogere prioriteit geven dan deze die op jouw website vermeld staat. Als je dan maw uw description wilt aanpassen, moet je hopen op een dmoz-editor met wat goede wil
k

killgore

Legacy Member
BART_SIMPSON416 zei:
RSS reader in php naar aanleiding van dat je nu het nieuws op telenet games kan ophalen met uit een rss document. En ja voor je er maar opkomt.
Ik heb eerst eens andere php rss readers bestudeert voor ik dit maakte.

PHP: 
...
note: neen php werkt niet op pandora dus vergeet maar dat deze script werkt op pandora.
Klik om te vergroten...
Aangepaste versie php5:
PHP: 
<?php
/*RSS URL hier ingeven*/
$rss_url = "https://www.beyondgaming.be";

/*------------------*/
$xmlObject = simplexml_load_file($rss_url);
if(!$xmlObject) die ("Fout bij het ophalen");

foreach($xmlObject->channel->item as $item)
{
    ?>
    <table width="80%" border="1">
    <tr><td><b><a href ="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></td></tr>
    <tr><td><?php echo $item->desc; ?></td></tr>
    <tr><td>Categorie: <?php echo $item->cat; ?></td></tr>
    <tr><td>gepost op: <?php echo $item->date; ?></td></tr>
    <tr><td>gepost door: <?php echo $item->author; ?></td></tr>
    </table><br />
    <?php
}

echo "nieuws opgehaald van <a href=\"$rss_url\">$rss_url</a>";
?>
k

killgore

Legacy Member
PHP - Headers already sent
Wegens ondertussen al 1000x gevraagd:
Als je gebruik maakt van sessies, cookies, de header functies en nog enkele andere zaken kan je volgende fout krijgen:
Code: 
Warning: Cannot modify header information - headers already sent...

De reden is simpel: Je hebt al output gestuurd. Dit kan zijn door html-code voor de <?php tags (zelfs een spatie of enter is al genoeg!) of door een echo/print binnen de php code zelf.
Volgende voorbeelden zullen niet werken:
  • witruimte (enter of spatie) of html voor het php statement waarin de header-functie wordt gebruikt:
    PHP: 
    &nbsp;<?php
session_start();
?>
  • PHP output voor de functie die headers gebruikt:
    PHP: 
    <?php
echo "I rule!";
session_start();
?>
  • Invoegen van pagina waar output wordt gestuurd:
    PHP: 
    <?php
require "outputpagina.php";
session_start();
?>
    met outputpagina:
    PHP: 
    <?php echo "I rule!"; ?>
    (merk op dat ook html-code in die include voor problemen zorgt!).

Enkele oplossingen:
  • Bovenstaande situaties vermijden, meestal zijn header-functies zowiezo zowat de eerste functies die je aanspreekt op een site :), spreek ze dan ook aan voor output.
  • Een templatesysteem zoals smarty gebruiken, dit is vooral aan te raden voor iedereen die wat verder met php wilt gaan. Een templatesysteem komt erop neer dat je je output (html/javascript/css/...-code) scheidt van je scripttaal en de inhoud dynamisch invult (vervangt) ipv met echo's. Dit heeft naast het oplossen van dergelijke problemen ook nog eens een immens nut op vlak van duidelijkheid en debuggen.
  • output_buffering: WERKT ENKEL VOOR PROBLEMEN MET PHP FUNCTIES. Als je bv. zeker een bepaalde echo moet doen voor je de desbetreffende headerfunctie aanspreekt (wat meestal wijst op slechte code), kan je deze techniek gebruiken. Het komt erop neer dat je voor de eerste output ob_start(); plaatst en later (meestal vlak na je headerfunctie) ob_end_flush();. De eerste houdt tijdelijk de data tegen die door echo, print, ... verstuurd worden. De tweede stopt dit tegenhouden (end) en stuurt ze dan door naar de pagina/gebruiker (flush).
F

Fr3aK

Legacy Member
Bug (IE only): boven en onder een input-veld wordt automatisch een margin van 1px toegevoegd.

Oplossing:
Code: 
_margin: -1px 0 -1px 0;

Waarom deze oplossing? Ze is niet CSS-valid?
Conditionele comments (<!--[if IE]>) werken niet op standalone versies van IE dus dat is al niet mogelijk.
De "Tan Hack" (* html >) werkt alleen op block-level elements dus dat gaat ook al niet.
Veel blijft er niet over, aangezien de underscore voor een property enkel werkt op eenders welke IE (Windows & Mac) is dit tot dusver de enige oplossing.

Indien iemand een betere oplossing heeft mag hij die hier altijd posten ;)
o

omfg

Legacy Member
Peekaboo bug (IE)

Soms is verdwijnt je content text zomaar terwijl je rustig een siteje zit te bouwen, en hem controleert in IE. Wanneer je je tekst selecteert zie je hem echter terug komen. Dit is de peekaboo bug

dit kan je verhelpen door simpelweg
Code: 
line-height: 1.2;
toe te voegen in je css

veel IE / FF / .. bugs vind je hier ook: http://www.positioniseverything.net
Z

Zero Grav

Legacy Member
Fr3aK zei:
Bug (IE only): boven en onder een input-veld wordt automatisch een margin van 1px toegevoegd.

Oplossing:
Code: 
_margin: -1px 0 -1px 0;

Waarom deze oplossing? Ze is niet CSS-valid?
Conditionele comments (<!--[if IE]>) werken niet op standalone versies van IE dus dat is al niet mogelijk.
De "Tan Hack" (* html >) werkt alleen op block-level elements dus dat gaat ook al niet.
Veel blijft er niet over, aangezien de underscore voor een property enkel werkt op eenders welke IE (Windows & Mac) is dit tot dusver de enige oplossing.

Indien iemand een betere oplossing heeft mag hij die hier altijd posten ;)
Klik om te vergroten...

Een betere oplossing is gewoon het label een margin van 1 px te geven en de container een margin minder te geven? ^o^
F

Fr3aK

Legacy Member
Zero Grav zei:
Een betere oplossing is gewoon het label een margin van 1 px te geven en de container een margin minder te geven? ^o^
Klik om te vergroten...
Werkt niet, hij voegt er 1px extra aan toe, dus ook als hij al een margin heeft... :x
E

Erlend

Legacy Member
Sorry Brock maar op deze manier kan ik hier iedere post van mijn blog plaatsen.
B

Brock

Legacy Member
ik kan spijtiggenoeg mijn bovenste post niet meer editen, daarmee m'n vraag aan een bereidwillige admin om het erbij te zetten. Tis idd niet m'n bedoeling om alles één voor één te posten :)
I

Inch

Legacy Member
Correct toepassen van webstandaarden

Velen hier leveren mooi portfolio werk af. Kudos. Je code lijkt immers te werken. Maar daarom is ze nog niet meteen juist. Er bestaan namelijk webstandaarden die precies definiëren hoe je met HTML en CSS om moet springen. En het toepassen van die standaarden brengt heel wat voordelen met zich mee.

- Een betere toegankelijkheid, ook voor mindervaliden
- SEO
- compatibiteleit met een groot aantal browsers
- compatibiliteit met minder voor de handliggende applicaties zoals mobile devices (gsm, etc.)
- sneller laden van je website wegens minder overtollige code
- een betere performantie serverside (happy sysadmins) omdat je pagina's minder zwaar zijn. Voor een bedrijf met een veelbezochte websitekan dat veel schelen naar bandbreedteverbruik toe.
- flexibiliteit voor jou als webdesigner (een pak minder knoeiwerk met code)
- ...

Daarbij is het zo dat het correct toepassen van HTML en CSS niet stopt bij het valideren via validator.w3.org. Die laatste controleert enkel de syntax. Of je je tags wel juist afsluit, of je geen 'verboden' tags en onbekende attributen gebruikt, etc.

Daarnaast is er ook iets wat semantiek noemt. HTML tags duiden immers aan wat een bepaald element in een tekst is. Zo dient de <p> tag om paragrafen in je teksten te definiëren aan te duiden. Of nog: met de <table> tag kan je gaan bepalen wat een tabel is.

Helaas wordt veel van die code 'misbruikt'. Zo wordt de <table> tag al te vaak gebruikt om de lay-out van een pagina vorm te geven. Eigenlijk hoort dit niet. De <table> tag dient énkel om aan te duiden welke stukken tekst in een 'tabel' horen. Bijvoorbeeld: sportuitslagen, een uurrooster, etc.

En zo zijn er nog tal van voorbeelden.

Een veelgemaakte fout is dat HTML gebruik wordt voor 'opmaak' of 'presentatie': een leuk kleurtje aan je tekst of een een leuke achtergrond. Beter is het om hier CSS voor te gebruiken. Met deze taal kan je de opmaak van een HTML document in een aparte stylesheet gaan definiëren. Of nog: je scheidt presentatie van de inhoud. CSS of Cascading Stylesheets is immers een zeer krachtig middel dat een webdesigner serieus in het voordeel kan spelen indien correct toegepast.

Dat heeft een aantal belangrijke voordelen:
- cleanere HTML code die veel makkelijker te onderhouden is
- je kan een document snel een totaal ander uitzicht geven met een andere stylesheet
- leesbaarheid: je dwingt je bezoekers een bepaalde lay-out niet op. Dus géén gedoe met websites die niet of slecht werken.
- ...

Om een héél dom laatste voorbeeldje te geven: sommigen maken in flash knoppen die bv. oplichten bij interactie. Of ze gebruiken daarvoor zelfs javascript. Eigenlijk hoeft dat allemaal niet: met CSS kan je précies hetzelfde effect bekomen. En dat levert volgende voordelen op:

- mensen zonder flash kunnen je site ook bekijken
- je site zal een pak rapper laden op de browser van de bezoeker
- een site zal veel lichter doorwegen zonder flashobjecten serverside.
- bij een verandering van lay-out moet je die knoppen niét helemaal van nul opnieuw maken: met eenvoudig spelen met de CSS kan je de knoppen een totaal actie laten uitvoeren.

(Persoonlijk ben ik eigenlijke en hevig tegenstander van flash: het is niet de standaard taal van het web, het is een gesloten formaat dat je enkel maar kan benaderen met software van macromedia/adobe, je sluit een pak mensen uit, je dwingt bezoekers je eigen - in hun ogen soms opdringerige - lay-out op, etc., maar dat terzijde)

Enfin, nu zeggen jullie 'maar dat lijkt immens moeilijk' of 'Ik begrijp helemaal niet wat je nu bedoelt'. Géén probleem. Om mijn punt duidelijk te maken: hieronder wat literatuur.

Vlaamsche sites

Gigastyle
Gigadesign
Nono
Veerle
El73

Internationaal

alistapart
maxdesign
CSS zen garden
Stylegala
NYPL: style guide

Und so weiter, und so forth...
k

killgore

Legacy Member
php - het ?page= systeem, veilig toegepast
Vooraleer: ik post dit enkel omdat je hier te vaak sitechecks & code-posts vind waarin dit systeem onveilig staat. Ikzelf vind het systeem voor het gros van te coden sites gewoon belachelijk en het volgen van een hype.

Je kent het allemaal wel, vanop je pagina surfen met maar 1 pagina en dynamische paramaters waar je gevraagde pagina zich bevindt. Zo een link kan er als volgt uitzien: http://www.mijnperfectesite.be/index.php?page=mijnblog (de schrijver van deze uitleg is niet verantwoordelijk voor eventuele inhoud van deze site :unsure: ).

Een gebruikelijke implementatie ziet er als volgt uit:
PHP: 
...
<?php require($_GET["page"]); ?>
...
Dit is totaal fout en onveilig, je kan dan immers gelijk welke pagina (ook een van een ander domein) includen en een hacker kan zelfs mits enige badwill proberen je pagina te hacken. Hij kan bijvoorbeeld met behulp van deze functie al je variabelen naar zijn eigen email adres (of een vals natuurlijk) doorsturen en mooi enkele wachtwoorden edm te weten komen :).
Daarnaast is ook de afhandeling van een get-variabele fout, wat ik in volgend script zal tonen, maar dat is vooral bijkomstig.

Een meer courant script is dit:
PHP: 
...
<?php
$page = isset($_GET["page"]) ? $_GET["page"] : "news"; //goede get-afhandeling!
if(file_exists($page.".php"))
{
    require($page.".php");
}
?>
...
Dit is al beter, maar ver van perfect, men kan immers nog gelijk welke pagina includen, wat vaak niet meer geeft dan een extreem lelijke layout, maar soms kan men op die manier toch aan vitale data geraken of "gevaarlijke" code uitvoeren die eigenlijk daar niet mocht ingevoegd worden.

De veiligste EN relatief simpel te onderhouden manier om met dit systeem te werken is een array van alle veilige pagina's bijhouden, zoals in volgend voorbeeld:

PHP: 
...
<?php
$pagesArray = array( "news" => "news.php",
                             "home" => "news.php",
                             "forum" => "bulletinboard.php",
                             "guestbook" => "guestbook.php");
$page = isset($_GET["page"]) ? $_GET["page"] : "news";
if(in_array($page,$pagesArray) && file_exists($pagesArray[$page]))
{
    require($pagesArray[$page]);
}
else
{
    // Eventueel echo of eigen foutmelding hieronder:
    die("An error has occured while loading the required page.");
}
?>
...
Wat zijn de voordelen?
  • Je specifieert zelf welke pagina's toegangkelijk zijn en reduceert de mogelijkheid tot kraken via deze weg tot een te verwaarlozen percentage.
  • De namen die in je url komen zijn door jou gekozen en moeten niet noodzakelijk meer gelijk zijn aan je filenames.
  • Je kan meerdere namen per pagina declareren (wat handig is als je ineens een andere naam wilt gebruiken maar de vorige 20 niet echt wilt gaan aanpassen).
  • Het toevoegen van een nieuwe veilige pagina kost niet veel werk.

nadeel:
hoewel het inderdaad niet veel werk is moet je wel altijd in je index.php de veilige pagina's gaan bijschrijven.

Merk op: voor CMS systemen e.d., waar de dynamisch gemaakte pagina-info in bijvoorbeeld een database wordt gestoeken, is $pagesArray vrij simpel dynamisch te genereren.
d

dendaak

Legacy Member
Nog een paar sites:

>>HTML
http://www.htmlgoodies.com/
http://www.designserver.nl/cursus/html/index.html
http://home.concepts-ict.nl/~michael1/
http://www.w3.org/MarkUp/Guide/Overview.html
http://www.xs4all.nl/~werksman/webmees/index.html
http://wp.netscape.com/assist/net_sites/frames.html
http://www.handleidinghtml.nl/
http://html.op-het.net/
http://infohound.net/tidy/
http://www.lissaexplains.com/
http://msdn.microsoft.com/library/
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnhtmau/html/beghtml.asp
http://www.hwg.org/services/classes/htmlclass.html
http://www.hwg.org/services/classes/webdesigncourse.html
http://validator.w3.org/
http://www.w3schools.com/default.asp
>>CSS
http://www.bradsoft.com/topstyle/index.asp
http://www.w3.org/Style/CSS/
http://www.hwg.org/resources/faqs/cssFAQ.html
http://www.intranetjournal.com/articles/200101/csstutorial1a.html
http://www.w3schools.com/css/default.asp
http://www.vsko.be/vvkso/css/css.htm
http://www.computercursus.cjb.net/
http://www.computercursus.cjb.net/
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/css_node_entry.asp
http://www.styleassistant.de/
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan