Modernes Webdesign: Alternative zu iFrame & Frameset

[BigRob]

Hi Leute,

ich hab mal wieder begonnen etwas an Homepages zu arbeiten. Da kam mir die Frage, ob es bessere Möglichkeiten zur Seitenstrukturierung gibt als Frameset und iFrames.

Da ich mir mein Wissen nach "learning by doing" begebracht habe scheint das Thema doch an mir vorbei gegenagen zu sein.

Habt ihr ein paar Tipps für mich - oder evtl. Literaturempfehlungen?


Gruß

Robert

[seba86]

Hi,

also Frames *hüstel*, das nutzt seit Jahren wirklich niemand. Die Alternative ist mittels PHP zu bewerkstelligen: php-einfach.de das Tutorial hast du in 2-3 Tagen durch und dann kannst du es so realisieren

[EL_Mariachi]

oder halt normale Tabellen verwenden...

.

[Matrix316]

Masterpages bei ASP.NET. ;)

Fürs grobe kann man DIVs nehmen, aber im kleinen sind Tabellen manchmal einfach praktischer.

Wobei iFrame finde ich jetzt garnicht sooo schlimm. ;)

[urbi]

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAA

Nein. Keine I-Frames. Das ist wirklich eine Zumutung.

Tabellen hingegen sind IMO ok. Es ist oldschool, aber manches lässt sich IMO schneller und intuitiver umsetzen.

[MartinB]

Es gab mal ne Zeit in der Tabellen komplett tabu waren. Mittlerweile hat man aber eingesehen dass manche Sachen damit einfacher zu bewerkstelligen sind.
"Modernes" Webdesign ist momentan Javascript und Ajax in Verbindung mit CSS.

Fürs Erste reichen jedoch einfache, langweilige und statische Divs.

[seba86]

Kommt jedenfalls auf die Erfahrung des Webdesigners an. Jedenfalls lässt sich ALLES was man mit Tabellen machen kann AUCH mit divs & floats (samt Position absolute, relative, static, fixed) realisieren. Umgekehrt nicht.
Für die schnelle natürlich Tabellen, keine Frge.

[Geldmann3]

Hi,

also Frames *hüstel*, das nutzt seit Jahren wirklich niemand.
Youtube hat es seit 2011 wieder groß eingeführt.

Beispiel-Einbett Code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/[Video-ID]" frameborder="0" allowfullscreen></iframe>

Ich kenne sehr viele Webseiten, die IFrames verwenden um darin pdf's und ähnliches darzustzellen.

Sie sind immernoch unersetzlich.

Literaturempfehlungen habe ich da nicht direkt. Schau dir doch mal Self-HTML (http://de.selfhtml.org/) an, immernoch sehr hilfreich.

Zur Seitenstrukturiereung würde ich eher mit PHP includes (http://www.youtube.com/watch?v=T-2YFNIT-J0) arbeiten.
Am besten in Verbindung mit Divs (http://www.youtube.com/watch?v=7ZOz0aHbqsY)

[Bösewicht]

hatte facebook nicht mal gesagt das sie auch viel mit iframes machen?
Möchte ich z.b ein bf3 viewer mit eigener css, grafiken und alles drum und ran auf eine server unterseite schnell einbinden komme ich mit iframes schneller zum erfolg als mit include...
Beim include muss css, pfade und ähnliches eingestellt werden beim iframe hinzufügen zack und bang funktioniert.
Es kommt also wirklich drauf an was mann machen will eine ganze seite in iframe halte ich aber auch für quatsch.

[Gast]

Youtube hat es seit 2011 wieder groß eingeführt.

Beispiel-Einbett Code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/[Video-ID]" frameborder="0" allowfullscreen></iframe>

Ich kenne sehr viele Webseiten, die IFrames verwenden um darin pdf's und ähnliches darzustzellen.

Sie sind immernoch unersetzlich.

Literaturempfehlungen habe ich da nicht direkt. Schau dir doch mal Self-HTML (http://de.selfhtml.org/) an, immernoch sehr hilfreich.

Zur Seitenstrukturiereung würde ich eher mit PHP includes (http://www.youtube.com/watch?v=T-2YFNIT-J0) arbeiten.
Am besten in Verbindung mit Divs (http://www.youtube.com/watch?v=7ZOz0aHbqsY)
Du weißt aber schon das dein Beispiellink von YT für das einbinden von fremden Inhalt auf der eigenen Seite ist?
Für eine eigene Seite wo nur eigene Inhalte dargestellt werden sind Frames einfach das letzte. Und iFrames sind nicht ohne Grund verhasst. Ein versteckter Iframe mit 1px Größe ohne Rahmen kann sehr schön als Viren- und Trojanerschleuder verwendet werden.

[Mr_Karlo]

Masterpages bei ASP.NET. ;)


Viele Hosting-Provider bieten ASP.NET nicht an. Das Prinzip der Masterpage kann man aber genauso mit PHP umsetzen. z.B. Masterpage mit links ausgerichtetem Menü, oben Header.
Je nachdem welchen Menüpunkt man anklickt wird die entsprechende Content-Seite geladen.
Vereinfachtes Beispiel:

Menü:

<a href="index.php?p=1">Seite1</a><br/>
<a href="index.php?p=2">Seite2</a><br/>
<a href="index.php?p=3">Seite3</a><br/>


Content laden:

$p = $_GET["p"]; // hier sollten div. sicherheitsrelevanten Überprüfungen der übergebenen Variable folgen
include("page" .$p ."php");
...

[BigRob]

Also kann mann grundsätzlich sagen, dass es am eigenen wissensstand liegt, was man verwendet, alles mit frames ist aber nicht mehr zeitgemäß?

Ist es zu empfehlen sich am Vorgehen von Mr_Karlo zu orientiern?

Je nachdem welchen Menüpunkt man anklickt wird die entsprechende Content-Seite geladen.
Vereinfachtes Beispiel:

Menü:

HTML-Code:
<a href="index.php?p=1">Seite1</a><br/>
<a href="index.php?p=2">Seite2</a><br/>
<a href="index.php?p=3">Seite3</a><br/>Content laden:

PHP-Code:
$p = $_GET["p"]; // hier sollten div. sicherheitsrelevanten Überprüfungen der übergebenen Variable folgen
include("page" .$p ."php");
...

[Mr_Karlo]

Zur Verdeutlichung ein erweitertes Beispiel ;)
Die DIV's für Header, Menu und Content sind absolute positioniert und befinden sich somit immer an der gleichen Stelle. Innerhalb der Content-Seiten kann man dann, was auch immer, machen. Das grundlegende Layout wird davon nicht beeinflusst.


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>

<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1' />
<style type="text/css">
#header
{
position: absolute;
top: 0px;
left: 0px;
height: 100px;
}

#menu
{
position: absolute;
top: 100px;
left: 0px;
width: 150px;
}

#content
{
position: absolute;
top: 100px;
left: 150px;
}
</style>
<title>Beispiel</title>
</head>

<body>

<div id='header'>

</div>

<div id='menu'>
<a href="index.php?p=1">Seite1</a><br />
<a href="index.php?p=2">Seite2</a><br />
<a href="index.php?p=3">Seite3</a><br />
</div>

<div id='content'>
<?php
$p = $_GET["p"]; // hier sollten div. sicherheitsrelevanten Überprüfungen der übergebenen Variable folgen

if (!empty($p))
include("page" .$p .".php");
?>
</div>

</body>
</html>

[universaL]

Für die "Masterpage" von am Ende statischen Seiten kann man auch einen "Websitegenerator" benutzen wie Jekyll, Nanoc, etc... :-)

[ezzemm]

Ich denke "modern" wäre es, wenn du Inhalt via AJAX in ein DIV lädst, was mit jQuery wirklich sehr einfach zu realisieren ist.

Verhält sich ein bischen wie ein Iframe, ohne den Nachteil der verschiedenen Dokumente (zwei DOM-Bäume, Scrollbalken, abgeschnittene Tooltipps).

[BigRob]

soweit ich mich an mein Studium zurück erinnere, war dort auch die Aussage, dass AJAX wirklich "modern" ist. Eigentlich trifft das Thema AJAX auch das, was ich will. Allerdings habe ich damit null Erfahrung.

Ist es möglich als Laie eine einfache Seitenstruktur mittels AJAX innerhalb von ein paar Stunden zubasteln. Oder ist das Thema zu komplex?

[universaL]

Ich denke "modern" wäre es, wenn du Inhalt via AJAX in ein DIV lädst, was mit jQuery wirklich sehr einfach zu realisieren ist.

Verhält sich ein bischen wie ein Iframe, ohne den Nachteil der verschiedenen Dokumente (zwei DOM-Bäume, Scrollbalken, abgeschnittene Tooltipps).

JavaScript zu benutzen um statische Seiten zusammen zusammen zu bauen und dann mit "Zurück", ... im Browser zu kämpfen würde ich nicht unbedingt als das richtige Tool für die beschriebene Aufgabe(statische Website) ansehen.

Wenn es darum geht dynamische/sich verändernde Inhalte aus einer Datenbank/Vergleichbaren darzustellen, mag AJAX sinnvoll sein :-)

[Matrix316]

JavaScript zu benutzen um statische Seiten zusammen zusammen zu bauen und dann mit "Zurück", ... im Browser zu kämpfen würde ich nicht unbedingt als das richtige Tool für die beschriebene Aufgabe(statische Website) ansehen.

Wenn es darum geht dynamische/sich verändernde Inhalte aus einer Datenbank/Vergleichbaren darzustellen, mag AJAX sinnvoll sein :-)
Ajax ist aber keine Programmiersprache. ;)

PHP finde ich am sinnvollsten bei DB Zugriffen und dynamischen Seiten. Wobei das nicht stimmt, weil ich eigentlich ein Fan von ASP.NET bin, aber das unterstützt ja leider nicht jeder Provider.

[Mr_Karlo]

Ist es möglich als Laie eine einfache Seitenstruktur mittels AJAX innerhalb von ein paar Stunden zubasteln. Oder ist das Thema zu komplex?


Ich finde jQuery: Das Praxisbuch (Galileo Computing) (http://www.amazon.de/dp/3836212889) ist ein ganz guter Einstieg. Unter anderem wird auch AJAX behandelt. Wenn du mit jQuery noch keine Erfahrung hast, würde ich mir jedoch schon ein paar Tage Zeit nehmen (gute HTML und CSS Kenntnisse vorausgesetzt). Dann geht's aber recht flott. :)

Wie aber schon erwähnt wurde, finde ich das für dein Vorhaben nicht unbedingt notwendig.

[universaL]

Ajax ist aber keine Programmiersprache. ;)

hat auch niemand behauptet ;-)

und wenn du richtig modern sein willst, dann sowas wie: amber.js, backbone.js, etc... ;-) wobei das ganze weniger mit Design als mit Technik zu tun hat imho ;-)

[ezzemm]

Es ist die Kombination aus HTML, JS und PHP die eine Seite "modern" macht (bewusst in Anführungsstrichen).

Eine Seite in HTML bauen, auf Benutzereingaben mit JS reagieren, Inhalte mit AJAX in das Dokument laden, welche von einem PHP-Skript dynamisch erstellt werden.
Persönlich finde ich das die eleganteste Art eine Seite zu erstellen. Machen Facebook oder Google Calendar nicht anders.

Ich habe mich mit diesem Tutorial in jQuery eingearbeitet, konnte aber vorher auch schon etwas Javascript programmieren.
http://matthiasschuetz.com/jquery-tutorial-einfuehrung-und-grundlagen
http://matthiasschuetz.com/jquery-tutorial-selektoren-filter-und-traversing
http://matthiasschuetz.com/jquery-tutorial-interaktionen-mit-events-steuern
http://matthiasschuetz.com/jquery-tutorial-animationen-und-effekte-erzeugen
http://matthiasschuetz.com/jquery-tutorial-dynamische-inhalte-mit-ajax-laden
http://matthiasschuetz.com/jquery-tutorial-eingabefelder-bei-fokus-leeren
http://matthiasschuetz.com/jquery-tutorial-eigenes-tooltip-plugin-erstellen

[RattuS]

Ich finde, dass JavaScript oft viel zu massiv eingesetzt wird, vor allem für Dinge, die man auch "undynamischer" lösen könnte. Manche Websites haben so viel JS-Last, dass sie sich wie fully-fledged Flash anfühlen. Gerade bei Librarys wie jQuery oder YUI, die stets mit heftigem Overhead kommen. AJAX ist auch so ein Thema: Natürlich gibt es unzählige Szenarien, in denen AJAX ein komfortableres Erlebnis bieten kann, aber AJAX als Page-Rendering-Alternative - das ist ein Witz. Leider sind viele unsinnige Implementierungen im Web 2.0-Zeitalter State of the Art geworden, die Probleme nicht lösen, sondern nur maskieren. Statt eines sauberen Konzeptes wird gefummelt und gefuscht. Gerade Einsteigern wird Web Development hier als Pommes in der Friteuse verkauft, obwohl hinter den fettigen Kartoffelsteifen mehr steckt. Bevor so einige Entwickler daran denken das UI mit JS/AJAX aufzupeppen, sollten sie sich erstmal mit Blacklisting, Sanitizing, Injection und vor allem XSS (gerade wegen JS) beschäftigen, gefolgt von Performance/Tuning, denn was bringt dynamisch geladener Content, wenn ich den selben Inhalt in noch kürzerer Zeit auch einfach über einen Page Refresh bringen könnte. Caching wird leider schnell unter den Teppich gekehrt, weil das "allseits beliebte" PHP meines Wissen nur auf Dateisystem-Ebene Möglichkeiten bietet. Auch wenn die Auswahl der Hoster nicht groß ist: der Umstieg auf ASP oder CF bringt viele Vorteile.

[BigRob]

Vielen Dank für die zahlreichen Infos und Meinungen. Ich werde vorerst bei meinen iFrames bleiben ;-) und werde mir mal die jquery-sachen anschauen:

Ich habe mich mit diesem Tutorial in jQuery eingearbeitet, konnte aber vorher auch schon etwas Javascript programmieren.
http://matthiasschuetz.com/jquery-tu...und-grundlagen
http://matthiasschuetz.com/jquery-tu...und-traversing
http://matthiasschuetz.com/jquery-tu...events-steuern
http://matthiasschuetz.com/jquery-tu...fekte-erzeugen
http://matthiasschuetz.com/jquery-tu...mit-ajax-laden
http://matthiasschuetz.com/jquery-tu...i-fokus-leeren
http://matthiasschuetz.com/jquery-tu...ugin-erstellen

[Matrix316]

Ich weiß noch wie ich mal auf dem Arbeitsamt angegeben habe ich kann HTML und die Frau da meinte: Braucht man noch HTML? Ich dachte Webseiten werden heute mit PHP gemacht...

Naja, leider hatte ich damals noch nicht wirklich so viel Ahnung von Web Design, weswegen ich leider nicht entsprechend antworten konnte. ;)

Ich glaube es gibt auch keine schlimmere "Programmiersprache" als Javascript. ;)

[seba86]

der war gut, ist sogar noch besser als (der müde witz) dass CSS der Nachfolger von HTML ist.
Wobei sofern man in JS/jQuery etwas eingearbeitet ist, geht es eigentlich auch. Flusht nicht ganz so dolle wie php, aber usable

[MartinB]

Was momentan "modern" zu sein scheint, sind Webseiten die keine Unterseiten mehr haben, sondern per Javascript an verschiedene Stellen scrollen,

z.B.:
http://morphix.si/#home
http://kiskolabs.com/#home

[Matrix316]

War das nicht in den Urzeiten des Webs so, dass man nur eine Seite hatte, wo man hoch und runtergesprungen ist?

[ezzemm]

War das nicht in den Urzeiten des Webs so, dass man nur eine Seite hatte, wo man hoch und runtergesprungen ist?

Ja, da ist man gesprungen. Jetzt kann man scrollen ;)

[Matrix316]

Ja, da ist man gesprungen. Jetzt kann man scrollen ;)
Wahnsinn, oder? ;) Da macht man aus was schnellem was langsameres und plötzlich ist es der neueste Hype...=)

[MartinB]

War das nicht in den Urzeiten des Webs so, dass man nur eine Seite hatte, wo man hoch und runtergesprungen ist?

Nein. Das Web wurde als Ansammlung verlinkter Textseiten entworfen. Die Idee einer "einzigen Seite" pro Angebot war damals nicht das Ziel.

[maximum]

ich arbeite mit der Templateengine Smarty, PHP, CSS und Javascript.

Kann Smarty wirklich sehr empfehlen!

[alkorithmus]

Microsites sind 2010 irgendwie populär geworden. Funktioniert sehr selten gut, finde ich.

[DanMan]

... Caching wird leider schnell unter den Teppich gekehrt, weil das "allseits beliebte" PHP meines Wissen nur auf Dateisystem-Ebene Möglichkeiten bietet...
Dafür gibts Module wie memcached (http://www.memcached.org/) die man benutzen kann. Nur braucht man dann oft volle Kontrolle über den Webspace, was alle billigen Homepage Anbieter schon mal außen vor lässt.

Ansonsten stimme ich dir weitgehend zu.

@maximum: Hör mir auf mit Smarty.... PHP IST eine Template-Engine. Der muss man nicht NOCH eine oben drauf setzen.

[Gast]

PHP IST eine Template-Engine. Der muss man nicht NOCH eine oben drauf setzen.

Wenn man dem Template-Designer nicht vollen Zugriff auf den Laufzeitkontext geben möchte, dann ist so eine abstrahierende Template-Engine doch ganz praktisch.