Afscheid van Frames

[bluesbrother]

Beste mensen,
Ik heb net afscheid genomen van frames en besloten dat ik geen websites meer bouw met frames.
Bijna niemand gebruikt het meer en ik denk ook dat het mooier is zonder.

Alleen in de zoektocht naar enige houvast loop ik even stuk.
Ik wil:

1. Dynamische website met php en Mysql
2. Gebruik van CSS
3. Als iemand op een link klikt dat niet de hele
   pagina herlaad maar alleen datgene dat nodig is.

Ik heb even een richting nodig waar ik op moet letten.
Ik snap het e.a. van CSS en PHP en MySql, Dreamweaver en Flash.
(van het een meer dan van het ander)
Maar ik zoek naar onderwerpen waar ik op kan zoeken.

Ik heb al gegooled en ik heb al diverse sites gevonden over bovenstaande technieken.
CSS
CSS2

Maar ik zoek dus naar hoe ik deze samen kan brengen om te bereiken wat ik wil.
Mijn vragen: (Anders is het niet echt duidelijk als ik het zo teruglees)

1. Wat moet iemand weten die van frames naar 1 dynamische pagina overstapt ?
2. Wat zorgt ervoor dat een enkele pagina niet compleet herlaad als je op een link klikt
   (ik kan me niet voorstellen dat het alleen de cache is)

Maar alle info (weblinks) zijn welkom.
Ik ben niet een newbie maar ook geen pro sitebouwer. Maar ben gewoon op zoek naar informatie.
Ik heb altijd met frames gewerkt, na zelf op zoek geweest te zijn, veel code van sites te bekijken.
BV: Tiscali (waar ook alleen het betreffende artikel geladen wordt)
kan ik niet zo gauw iets ontdekken waar ik iets aan heb.
De technieken afzonderlijk daar kom ik wel uit. Maar het samen later smelten tot wat ik wil is mijn probleem.

groeten
( +
Bluesbrother

[T-MOB]

bluesbrother schreef op vrijdag 16 september 2005 @ 11:18:

1. Wat moet iemand weten die van frames naar 1 dynamische pagina overstapt ?
2. Wat zorgt ervoor dat een enkele pagina niet compleet herlaad als je op een link klikt
   (ik kan me niet voorstellen dat het alleen de cache is)

1. Dat weet je blijbaar al HTML, CSS en bij voorkeur wat scripting zoals PHP/MySQL

2. Echt alleen cache... (of je moet met javascript aan de slag, maar dat wil je niet voor een "normale" website...)

edit:
De tiscali site werkt overigens wel met frames, zogenaamde <iframe>s. Dit zijn frames die je zo in een htmlpagina kunt plaatsen. Je hoeft dus geen frameset te definiëren

[ Voor 18% gewijzigd door T-MOB op 16-09-2005 11:52 ]

[Yoozer]

bluesbrother schreef op vrijdag 16 september 2005 @ 11:18:
• Dynamische website met php en Mysql

Niks te maken met 't design zelf.

• Gebruik van CSS

Sowieso verplicht.

• Als iemand op een link klikt dat niet de hele pagina herlaad maar alleen datgene dat nodig is.

Zoek eens naar AJAX . Of hoe start.com werkt.

[T-MOB]

Yoozer schreef op vrijdag 16 september 2005 @ 11:50:

Zoek eens naar AJAX . Of hoe start.com werkt.

AJAX inzetten om frames te vervangen lijkt me niet echt "the way to go". Gebruik dan gewoon frames, dan kan een gebruiker zonder JS-support en zonder frame-support tenminste nog iets met je site. En er is toch niets mis met een nieuwe pagina?

[Not Pingu]

bluesbrother schreef op vrijdag 16 september 2005 @ 11:18:

1. Als iemand op een link klikt dat niet de hele
   pagina herlaad maar alleen datgene dat nodig is.

Waarom? Is je webhost zo traag? Hebben je bezoekers een 9600 baud verbinding? Of is je HTML zo bloated dat elke pagina 1mb is?

Besef je goed dat de overhead van een frameset, een x aantal aparte framespagina's met elk hun eigen headers, etc. vaak het 'voordeel' van het ophalen van alleen het vernieuwende schermdeel al teniet doet.

Tel daarbij op dat frames (en iframes) enkele frustrerende interactieproblemen met zich meebrengen (Vorige en Volgende werken niet altijd intuitief, elk frame scrollt apart, bookmarken en direct linken is lastiger, etc.) en je snapt wel dat het niet voor niks is dat frames nog weinig gebruikt worden.

[Pendaco]

Voor het laden van pagina's zonder complete pagina refreshes zou je iframes kunnen gebruiken, deze kun je vervolgens weer stijlen en positioneren via css.

[We Are Borg]

Als iemand op een link klikt dat niet de hele pagina herlaad maar alleen datgene dat nodig is.

Als je hier aan denkt, denk je imo nog teveel aan frames. Juist als je alle opmaak doet met CSS is dit puntje nergens voor nodig .

[JayVee]

Wat We Are Borg zegt!
Waarom is het nergens voor nodig?
• Dataverkeer is te verwaarlozen met semantisch HTML
• Browser rendert site snel, eigelijk geen flitsen
• Met goede code komen de onderdelen die gelijk blijven ook op dezelfde plek uit, geen verschuiving dus

[Blaise]

BV: Tiscali (waar ook alleen het betreffende artikel geladen wordt)

De hele pagina wordt opnieuw geladen, maar dat gaat zo snel dat het alleen lijkt dat het artikel verandert. Datzelfde effect kan je krijgen met de tips hierboven.

[Verwijderd]

ik denk dat we hierbij een beetje afdwalen met waar de vraagsteller eigelijk begon.
je wilt een pagina die in php en css gebouwd is. daarvoor kun je wat vinden ophttp://handleidinghtml.nl verder zul je wat DIV jes moeten maken in css en dan dmv php includes je pagina's te includen. zo kun je dmv 1 index.php dan wel te verstaan toch hetzelfde effect hebben als frames maar dan zonder klinkt onlogisch is wel logisch voor mij dan

[RM-rf]

bluesbrother schreef op vrijdag 16 september 2005 @ 11:18:

Ik heb net afscheid genomen van frames en besloten dat ik geen websites meer bouw met frames.
Bijna niemand gebruikt het meer en ik denk ook dat het mooier is zonder.

Frames is geen 'keuze' en ook niks dat met 'mooi' te maken heeft...
Frames zijn een zekere techniek die in een windows-GUI vaker voorkomt, het betekent eigenlijk de mogelijkheid hebben om bepaalde content (vaak van lijsten oid) te verdelen in subvensters die allemaal binnen het hoofdvenster blijven staan ...

als je bv kijkt naar een mailclient, zie je vaak een lijst met boxen links (INBOX, Sent mail, Drafts e.d.) dan in het hoofdvenster een lijst met ontvangen mails per box, en daaronder vaak nog een frame waarin een geselecteerde mail kan verschijnen...

Voor zo'n structuur heeft een frameset erg veel zin ...
maar de meeste websites hebben die structuur niet, en dan moet je geen frameset gebruiken ...

De Frameset is teveel gebruikt vanuit 'visuele' gronden, om een specifieke layout te creeeren die r zo 'uitzag'... frames waren eenvoudig voor een specifieke uitlijning, in tijden dat er weinig andere mogelijkheden waren voor bv positionering (pre-CSS)

Nu biedt CSS een veel betere, snellere techniek voor zo'n visuele layout, heeft zelfs ook nog veel meer mogelijkheden ...

Voor de vraag wat betreft het laden van een subpagina, terwijl andere gedeeltes blijven staan ....
Als dat dusdanig hard nodig is, bv doordat er een menuu is met ellenlange 'uitklap-staat' die je niet de hele tijd opnieuw wilt genereren... in zo'n geval zijn frames wel het overwegen waard ....
Desnoods denk je dan ook aan een IFRAME, welke een oplossing is die het mogelijk maakt om binnen een normale 'flowpagina' toch een gedeelte als 'Inline Frame' aan te wijzen

Verwijderd schreef op vrijdag 16 september 2005 @ 12:49:

verder zul je wat DIV jes moeten maken in css

alsjeblieft, hou ook op met die herhaalde 'onzin' ....
Wil een persoon een goede HTML-pagina opzetten is het belangrijk dat hij ook poogt een semantsich correcte HTML-pagina te maken ... dat betekent dat hij die tags gebruikt, die ook kloppen met de inhoud die ze moeten bevatten ....
dus bepaalde grote 'pagina-onderdelen in een DIV, Lijsten (bv voor navigatie) in een UL, DL of OL, teksten in P, titels in Hx, Tabulaire data in TABLE ... etc etc....


Dat definieert dan een basis structuur van de pagina, die voornamelijk de abstracte opzet beschrijft ... de visuele layout, wordt dan eroverheen gelegd dmv CSS ... een semantisch correcte pagina, is ook vrijwel altijd bijna probleemloos te stijlen met CSS

[ Voor 20% gewijzigd door RM-rf op 16-09-2005 13:06 ]

[bluesbrother]

Super ik ben heel wat wijzer geworden. Bedankt.
Het ziet er naar uit dat ik mijn CSS kennis wat op moet schroeven.
Ik ben nog wat CSS betreft op het niveau van kleurtjes en lettertypes en dat gaat aardig.
Maar het positioneren heb ik nog niet onder de knie. Dus dat is mijn eerste doel.
Als jullie daar nog goede links voor hebben houdt ik me aanbevolen.
Ook iframes samen met PHP zal ik in duiken.
Maar mijn vragen zijn wel beantwoord.
Ik zou dus wel meer willen weten over hoe dit te realiseren, maar ik ga zelf ook op zoek.
Misschien een idee om je favo website over dit onderwerp te posten?

nogmaals dank

[Verwijderd]

SPAM

OWNEN

alleen jammer dat sommige het maken van dit principe herhaalde onzin vinden

[ Voor 29% gewijzigd door André op 18-09-2005 08:53 ]

[bluesbrother]

Joppewillems Met bovenstaande kan ik niet veel.
Evengoed bedankt.

[Verwijderd]

bluesbrother schreef op vrijdag 16 september 2005 @ 13:22:
Joppewillems Met bovenstaande kan ik niet veel.
Evengoed bedankt.

nah klopt maar ik wou even duidelijk maken dat je met mijn principes ook prachtige sites maakt

[disjfa]

Verwijderd schreef op vrijdag 16 september 2005 @ 13:24:
[...]
nah klopt maar ik wou even duidelijk maken dat je met mijn principes ook prachtige sites maakt

Alleen jammer dat je html veel fouten bevat.

[Verwijderd]

-

[ Voor 144% gewijzigd door Verwijderd op 19-11-2009 17:13 ]

[RM-rf]

Verwijderd schreef op vrijdag 16 september 2005 @ 13:27:
ow.. leg uit ik zie ze niet volgens mij zijn ze er ook niet

neem bv in plaats van jouw code deze code:

HTML:

<body>
<ul class="logoinhoud">
    <li><a href="?home">Home</a></li>
    <li><a href="?about">About</a></li>
    <li><a href="?foto">Foto</a></li>
    <li><a href="?gbschrijf">Schijven</a></li>
    <li><a href="?gb">Gastenboek</a></li>
    <li><a href="?links">Links</a></li>
</ul>
<div id="inhoud">
<h1>Welkom op filestrike.nl</h1>
<h2>Fijn dat je even langskomt om te lezen te kijken of gewoon voor de fun!<h2>

<p>Filestrike is begonnen als website voor me eigen maar is nu een webhosting service geworden.
Dat betekend dat er verschillende websites onder deze naam draaien. namelijk:
<ul>
    <li><a href="http://www.dj-line.nl" target="_blank">DJ-Line.NL</a></li>
    <li><a href="http://www.ingecenten.nl" target="_blank">IngeCenten.NL</a> | 
    <li><a href="http://kiekons.filestrike.nl" target="_blank">Kiekons.Filestrike.NL</a> | 
    <li><a href="http://lonsebve.filestrike.nl" target="_blank">LonseBVE.Filestrike.NL</a></li>
</ul>
<p>Opzich ben ik hier best trots op en hoop deze mensen nog een geruime tijd van hosting te voorzien.
Mocht je zelf ook een <strong>GRATIS</strong> hosting zoeken dan kun je mailen naar:
<a href="mailto:[e-mail]">[e-mail]</a>
Vertel waarom je de hosting wil en wat je erin ziet om bij mij te gaan hosten.</p>

<h2>Verder... nog wat uitleg over filestrike.nl zelf</h2>
<p>filestrike.nl is mijn thuisnetwerk wat bestaat uit een Server die het onderstaande doet:</p>
<ul>
    <li>Router</li>
    <li>Printserver</li>
    <li>Webserver</li>
    <li>Databaseserver</li>
    <li>Fileserver</li>
</ul>
<p><em>dit word verzorgt door angelique.filestrike.nl, dat is een:<em></p>
<ul>
    <li>Pentium 3 600 Mhz</li>
    <li>FreeBSD 5.4</li>
    <li>256 Mb Ram</li>
    <li>XsHTTPD</li>
    <li>Mysql 4.1</li>
    <li>PHP 5.0</li>
</ul>
<h2>NIEUW!!!</h2> 
<p> <em>Klik Hier --< <a href="http://forum.filestrike.nl" target="_blank">Het filestrike forum!</a></em></p>
<p> Wat er verder natuurlijk ook in het netwerk zit zijn werkstations:</p>
<dl>
    <dt>joris.filestrike.nl </dt>
    <dd>(AMD Athlon 64 3400+,512 Mb Ram,Draait Win XP MCE<dd>
    <dt>joppe.filestrike.nl </dt>
    <dd>(Intel Pentium 4 OC'D naar 2,4Ghz,512 Mb Ram,Draait Win XP MCE</dd>
    <dt>jasper.filestrike.nl </dt>
    <dd>(Intel Pentium Mobile 1,7 Ghz,512 Mb Ram, Draait Win XP Pro</dd>
    <dt>hilda.filestrike.nl </dt>
    <dd>(Intel Celeron 500Mhz,128 Mb Ram,Draait Win XP PRO</dd>
<p>dit zijn de voorlopige werkstations die nu in het netwerk zitten.
dit was het wat ik te vertellen had.
Verder wens ik jou als bekijker van deze site. <strong>VEEL PLEZIER!</strong><p>
<p>Groeten,<br>
Joppe Willems (Webmaster)</p>

</div>

</body>

Dat is eerder semantisch correcte HTML, slechts één DIV, verder eenvoudige en overzichtelijke HTML-code, met CSS is deze dusdanig te stylen dat het precies er zo uitziet, als jij dat wil

[ Voor 4% gewijzigd door RM-rf op 16-09-2005 13:57 ]

[Jaap-Jan]

Verwijderd schreef op vrijdag 16 september 2005 @ 13:27:
ow.. leg uit ik zie ze niet volgens mij zijn ze er ook niet

Gooi hem voor de gein maar eens door de w3 validator.
1) Geen DOCTYPE opgegeven
2) Geen character set opgegeven
3) geen alt="" attributen gebruikt
4) een zwevend </p>- element zonder geopend te zijn
5) een </b>- element waarbij geen begin gevonden kon worden
6) en een </div> waarvoor geen begintag gevonden kon worden.

Je gebruikt bitmapjes (je navigatiebalk zit er vol mee). Die bitmapjes zijn 6054 bytes groot. Ik heb voor de gein eens eentje door Adobe ImageReady gegooid:

Uitkomst: een png van 357 bytes. Da's 17x zo klein .

Je CSS: CSS Validator resultaten Die gekleurde scrollbars zijn geen onderdeel van de CSS standaard (: alleen IE ondersteund ze). Voor de rest zitten er nog een paar warnings in.

Die navigatiebalkplaatjes ben ik niet zo weg van, de tekst is niet eens gecentreerd. Misschien is het een effect wat je wilt bereiken, maar ik ben er niet weg van .

[ Voor 6% gewijzigd door Jaap-Jan op 16-09-2005 14:01 ]

[JayVee]

Verwijderd schreef op vrijdag 16 september 2005 @ 13:17:

OWNEN
alleen jammer dat sommige het maken van dit principe herhaalde onzin vinden

offtopic:
Mja, zwart op blauw is geen slimme keus. Nog een argument waarom dit geen goed voorbeeld is voor een goede site.

[ Voor 7% gewijzigd door André op 18-09-2005 22:51 ]

[Verwijderd]

Ik ben ooit begonnen met deze tutorial over het bouwen van een dynamische website bij Mysql.com

http://dev.mysql.com/tech-resources/articles/ddws/

Eigenlijk vraag je een heleboel in een topic. "Hoe bouw ik een dynamische website met PHP/Mysql en goede CSS" is nogal een studie, maar wel erg leuk om te doen. Je kunt op het web enorm veel lezen over CSS. Probeer het eerst met een simpele DIV/CSS layout, want je gaat 100% zeker tegen browser compatibility problemen aanlopen die voor een beginner aardig wat hoofdbrekens kunnen opleveren.

[mosymuis]

T-MOB schreef op vrijdag 16 september 2005 @ 11:56:
[...]

AJAX inzetten om frames te vervangen lijkt me niet echt "the way to go". Gebruik dan gewoon frames, dan kan een gebruiker zonder JS-support en zonder frame-support tenminste nog iets met je site. En er is toch niets mis met een nieuwe pagina?

Voor sommige websites kan dat juist erg prettig werken. Kijk bijvoorbeeld eens naar www.hyves.nl, daar worden heel veel kleine onderdelen (reacties, foto's, groepjes etc) op de pagina's in layers ververst met ajax. De site zit complex in elkaar met veel functionaliteit, maar door deze toepassing kan de bezoeker elementen in bijvoorbeeld het midden van een pagina opvragen zonder telkens bij te scrollen na een reload.

[T-MOB]

mosymuis schreef op vrijdag 16 september 2005 @ 15:09:
[...]
Voor sommige websites kan dat juist erg prettig werken. Kijk bijvoorbeeld eens naar www.hyves.nl, daar worden heel veel kleine onderdelen (reacties, foto's, groepjes etc) op de pagina's in layers ververst met ajax. De site zit complex in elkaar met veel functionaliteit, maar door deze toepassing kan de bezoeker elementen in bijvoorbeeld het midden van een pagina opvragen zonder telkens bij te scrollen na een reload.

Begrijp me niet verkeerd, ik wil niet zeggen dat je geen javascript technieken moet toepassen. Wat ik wil zeggen is dat AJAX geen geschikte techniek is om de volledige content in je pagina te injecteren om maar te zorgen dat er geen reload nodig is. Dan ben je frames aan het vermijden om het frames vermijden. De reden dat die dingen uit de mode zijn is enerzijds dat ze leiden tot compatibiliteitsproblemen en slechte indexering. Anderzijds is er in de vorm van CSS geen enkele noodzaak meer om ze te gebruiken. Wanneer je echter AJAX toepast als "oplossing" creëer je alleen maar nog grotere problemen met compatibiliteit en indexeringsmogelijkheden.

Dat je verder leuke dingen kunt maken met javascript is zonder meer waar. Maar bedenk wel dat het je doelgroep verkleint als het niet "graceful" degradeert. (surf voor de grap eens naar start.com met javascript uit en je snapt wat ik bedoel...)

[Boelie-Boelie]

Ik zou beginnen met lezen met het artikel 'Developing with webstandards', waarin o.a. structuur/semantiek, maar ook CSS aan bod komen. Eigenlijk de principes van het bouwen van een goede site.
En je vindt ook heel veel info op de site 'Webrichtlijnen.overheid.nl', waar je kunt lezen over waar je op moet letten voor het bouwen van een goede site.
Ook nuttig is 'Semantics, HTML, XHTML, and structure'.

Op Whitespace staat een artikel 'Learning CSS', met daarin enkele nuttige links.

Op CSS Help Pile en in het Webdevelopers Handbook vind je ook een gigantische hoeveelheid links naar nuttige info.

Op coda.co.za zijn diverse layout-technieken op een rij gezet.

Als je al die links afgaat en goed leest, kom je zeer waarschijnlijk een heel eind...

[HawVer]

En php leer je het beste op php.net. Veel praktijk voorbeelden en de basis wordt uitgelegd.

[lammert]

Verwijderd schreef op vrijdag 16 september 2005 @ 13:17:

OWNEN

alleen jammer dat sommige het maken van dit principe herhaalde onzin vinden

Je hebt je foto-upload pagina gewoon open staan??!!!!
Dat is wachten op problemen...

[ Voor 12% gewijzigd door André op 18-09-2005 22:51 ]

[Yoozer]

T-MOB schreef op vrijdag 16 september 2005 @ 11:56:
AJAX inzetten om frames te vervangen lijkt me niet echt "the way to go".

Niet om frames te vervangen, maar om info gelijk te updaten.

zonder JS-support en zonder frame-support

Netscape 1.0? Oh, wacht. Lynx?

En er is toch niets mis met een nieuwe pagina?

Het verschil tussen het web en een normale Windows-(Linux, Apple) applicatie is hoe 'direct' iets aanvoelt. Zo'n klein verschil van inladen e.d.maakt al een groot verschil in hoe 'lekker' de applicatie werkt; zo is Gmail stukken minder gezeur; niet omdat het sneller laadt, maar omdat het veel directer werkt dan Hotmail, zonder eerst verschillende pagina's door te lopen.

[Civil]

bluesbrother schreef op vrijdag 16 september 2005 @ 11:18:

1. Als iemand op een link klikt dat niet de hele
   pagina herlaad maar alleen datgene dat nodig is.

Ik ben wel benieuwd of je inmiddels tot de conclusie bent gekomen dat deze eis eigenlijk geen zin heeft. Of dat je werkelijk een reden hebt dat je deze eis hebt gesteld in je topicstart?

[Joe-star]

Gewoon in Dreamweaver met CSS wat divs maken in een php-file. Een container, daarin header, navigatie, content en footer. Vervolgens php include in #content. Style-sheets managen etc. DW doet alleen niet altijd wat jij wilt. Het ziet er leuk uit in je designview, maar in je browser ziet het er net anders uit, of IE laat hem goed zien, maar Firefox net niet, of andersom...om gek van te worden.

Maar om op je eis terug te komen, dit bedoelde je toch? Include of require gebruikt zowat iedereen.

[ Voor 12% gewijzigd door Joe-star op 17-09-2005 16:21 ]

[bluesbrother]

Joe-star: Ja dit is wel genoeg info waar ik wat mee kan.
Includen is ook wel the way to go. Maar op welke manier dat zal ik uit moeten docteren.
Ik bedoel niet technisch maar wat wel en wat niet.

Civil: Idd de pagina herladen is met cache en de snelheden van de internetvebindingen te verwaarlozen. Dus deze eis laat ik vallen.
Ik zal mijn CSS kennis behoorlijk wat op moeten schroeven. Zeker het posistioning gedeelte.
Ik heb in ieder geval weer meer input om mee aan de slag te gaan en ik weet welke richting ik op moet denken.

een droomtutorial (in ieder geval nog niet gevonden) zal zijn een tutorial die de combinatie verteld van php,mysql, css en (x)Html, wanneer een include gebruiken, hoe zorg je dat die content (van de include ) weer op de juiste plek terrecht komt. Div's enz. De samensmelting van al deze technieken.
Maar ik zal eerst afzonderlijk de technieken bestuderen en dan mijn eigen creative inzicht er op los laten om te beslissen welke techniek voor welk doel het beste is.

Bluesbrother =

[Joe-star]

Je moet iig niet teveel tegelijk willen. Begin maar eens met CSS en PHP.

Ga eerst eens een layout bedenken. Hanteer gewoon 780 pixels width, dan zit je altijd goed.

Kijk, dit is een makkelijk include-scriptje.

En dit zijn wel wat goede filmpjes als inleiding voor css m.b.t layout/

Als je dit snapt heb je in principe al een standaard site. Wel erg kaal en saai, maargoed

Maak gewoon wat nested divs in je #content, include daar weer poll.php, shoutbox.php etc... Ik neem aan dat je zelf wel wat scripts kan vinden

[ Voor 13% gewijzigd door Joe-star op 18-09-2005 00:13 ]

[Verwijderd]

w3schools Naslag en tutorials voor CSS en (X)Html
php.net Naslag en in mindere mate tutorials voor PHP
alistapart.com De stukken hier geven vaak een andere oplossing die zich wel houdt aan standaarden. (niet echt voor beginners)
CSS zen Garden Show off van wat mogelijk is met CSS

Voor de rest veel doen en oefenen, daar leer je door.

[Xof]

Verwijderd schreef op zondag 18 september 2005 @ 00:25:
w3schools Naslag en tutorials voor CSS en (X)Html

Vond het al zo raar dat deze nog niet genoemd was. Echt een supersite, makkelijk uitgelegd. Ik heb zelf veel geleerd van deze site (en af en toe nog steeds )

[Verwijderd]

Goed werk,is ook beter voor google als ik het goed heb.