Ich habe die letzten 2-3 jahre so gut wie gar nicht mehr programmiert. wenn, dann nur nach dem alten schema "table für grobpositionierung - unsichtbares gif für detailpositionierung - und allgemein soviel pixelbilder wie möglich damits so hübsch wie in photoshop aussieht". Wie man also sieht ist meine site http://www.mggdc.com hoffnungslos veraltet und es befindet sich auf der page auch kein einziges textzeichen.
Dies soll nun anders werden. Ich habe mir bereits 2 Bücher besorgt ((x)html/css und php/mysql) und bei einem grobüberblick gesehen das sich grade im bereich (x)html/css einiges geändert hat. ich habe im ersten durchgang gelesen das table/gif etc abgelöst wurden durch div und konsorten und das man mitlerweile nicht mehr nur eine externe CSS datei als ergänzung nimmt für schriften und links, sondern das der großteil der sichtbaren site in css gehalten wird und nur noch ein bescheidener minimaler aufbauanteil in html programmiert wird.
"Pages must maintain — in spirit — a separation between data and presentation, such as that enabled by the coupled usage of XHTML and CSS. Appropriate tags must be used to mark up data i.e. tables are for tabular data."
Außerdem habe ich auf einigen Seiten hier bzw im umfeld gesehen das es mitlerweile features gibt (schwarze halbtransparente ebene wird über die site geblendet und zeigt eine detailansicht einer arbeit während drumherum ein weißer rand sich jeweils den gezeigten images anpasst) von denen ich dachte das wäre flash. als ich dann den rechtsklicktest gemacht hatte musste ich echt staunen. Ich finde solche Features eigentlich nicht so toll da sie oft bzw ab und zu nicht funktionieren und ich lieber immer sachen einbaue die bei nahezu 100% der user gleich aussehen. Layers waren z.b. damals so eine sache die ich nie benutzt hatte weil es niemals pixelgenau wurde und meist die layouts zerschossen hat. Auch musste ich staunen als ich das Buch las und mir die ganzen "neuen" css seiten ansah, das jeder quasi die vergangenheit verhönte und von codemüll sprach, ich aber mit frisch installiertem IE7 feststellen musste, das jede 2te CSS seite nicht korrekt angezeigt wird. Das ganze erinnert mich also wieder stark an die damalige layergeschichte als sätze wie "MAN NIMMT heute keine Frames mehr, oder MAN NIMMT heute das nicht mehr" usw die runde machten und die leute versuchten etwas das jahrzehntelang funktionieren würde durch etwas zu ersetzen das scheinbare vorteile bringt aber total wackelig ist.
nehmen wird DMIG z.b. ich habe mal 3 screens mit dem IE7 gemacht:
Nmig sieht richtig aus
http://img241.imageshack.us/my.php?image=nmigfp6.jpg
Dmig sieht falsch/verrutscht aus
http://img241.imageshack.us/my.php?image=dmig1sa4.jpg
http://img145.imageshack.us/my.php?image=dmig2fd6.jpg
und so geht es mir wie gesagt bei jeder 2ten seite.
trotzdem würde ich zumindestens jetzt die gröbsten neuen features gerne lernen. ich möchte dazu eine neue site für mich und meine arbeiten entwickeln und diesmal fast ausschließlich echten text verwenden und pixelbilder höchstens noch für die headlines falls erforderlich und halt für die arbeiten selbst verwenden. das ganze soll so gut wie alles beinhalten was es derzeit so gibt - blogsystem + portfolio + infromationsseite + aufwendige linksammlung + rss + passwortgeschützte kundenlounge + backendcms für mich damit ich "von unterwegs" die news einflegen kann. mysql datenbank ist beim provider schon bestellt, xamp habe ich gestern installiert.
Nun meine Fragen:
1) NEUE SYTNAX: kann mir jemand gute links empfehlen, bei denen ich schnell in die neue (x)html syntax komme. u.a. interessiert mich im moment womit man "heutzutage" pixelgeneu positioniert. die blind gifs fand ich dafür immer passend da sie wirklich pixelgenau waren.
2) NEUE SYNTAX: wie um alles funktioniert denn bitte sowas?
http://www.morphcore.de und auf work klicken. oder halt von evenmedia http://www.hundenanny.de/bildergallerie/02/ für mich sah das wie gesagt wie flash aus (gibt sogar einen preloader). als ich den rechtsklicktest machte musste ich wie gesagt wirklich staunen und hab mir fast in die hose gemacht. ist das denn alles wirklich 100% lauffähig für alle browsertypen und plattformen?
3) NEUE SYNTAX: http://www.evenmedia.de/ mein erster gedanke war auch hier "hmm, schön minimale flashsite, ganz ok und sauber" als ich dann auf einmal merkte das das gar kein flash ist (also der effekt beim menue). wie um alles funktioniert das? wird da die seite 30 mal die sekunde neu geladen mit jeweils einem anderen grünton damit der verlauf entsteht? ein wunder das das alles ruckelfrei und scheinbar pixelgenau abläuft.
4) BLOGSYSTEM: schaut man sich z.b. gimmix.de an so hat er seine site so aufgebaut wie ich es ungefähr angehen möchte. ein portolio mit integriertem newsblog, oder aber ein newsblog mit integriertem portfolio :). hat er da ein opensource blog genommen und seine informationen und arbeiten integriert, oder ist das komplett eigenprogrammiert. Ich selbst würde wohl dazu tendieren, grad da ich php auffrischen will, lieber alles selbst zu machen. ist bestimmt besser als sich so einen opensource giganten runterzuladen und den so ein bischen zu tweaken. da lerne ich ja nur wenig bei. wollte aber wissen was man eigentlich nimmt in solchen fällen, also ob es kombinierte blog/portfolio open source geschichten gibt.
thx 4 help im voraus
also zu deinen Fragen:
zu 1) schau mal nach bei (altbekannt) http://de.selfhtml.org
2) das ist ein Javascript / DHTML Projekt das recht einfach einzubauen ist: Lightbox. http://www.huddletogether.com/projects/lightbox2/
3) Auch sowas geht ziemlich gut mit Javascript und CSS (sprich DHTML)
4) Nunja diese Dinge löst man mit kleinen Content Management Systemen, oft ist es Wordpress http://wordpress.de/
Ich hoffe ich habe helfen können....
zu 1) de.selfhtml.org
http://www.intensivstation.ch/
http://www.thestyleworks.de/
und immer fein validieren lassen. Für den FF gibt es Erweiterungen die dir bei der Arbeit helfen, HTML Validator, Web Developer z.B.
zu 2) nennt sich lightbox . Diese Teile funktionieren mit JS/CSS bzw. bei solchen Anwendungen in Flickr und Co wird für die Formulardatenübertragung AJAX eingesetzt
zu 3) JS/CSS
zu 4) obwohl wegen Umbauten geschlossen nehme ich mal an, dass eine fertige Lösung wie Textpattern, Wordpress u.ä. dahintersteckt. Es geistern diverse Themes im Netz und anpassen kann man CSS-technisch alles recht einfach. Außerdem gibt es für jeden Schrott eine Erweiterung, was aber auch zum Abfragegau ausarten kann.
Hallo Matthias,
scheint so, als hättest du dir einiges vorgenommen.
Zu den Unterschieden innerhalb unterschiedlicher Browser kann ich dir nur sagen: es ist nicht einfacher geworden, Seiten müssen weiterhin getestet und angepasst werden. Allerdings ist dank div-layouts und css einiges besser geworden. (Martin sollte bezgl. des IE noch was tun)
Zu deinen Punkten:
1. Syntax -> der wahrscheinlich wichtigste Unterschied zwischen html 4.0 und xhtml ist: keine einfachen Tags mehr (jedes Tag muss geschlossen werden) und einige Tags werden nicht mehr unterstützt. Also -> <img src="" />, <br />, ...
Zur Positionierung: Sowohl Pixelgenau als auch Variabel ist alles drin. Der wichtigste Schritt wird für dich sein herauszufinden wie es mit "position: relative/absolute" und "float:" auf sich hat. Boxen (also Divs - ehemals auch Layer) die sich aneinander Positionieren. Zeitgleich solltest du um sauberes xhtml zu schreiben nicht in einen Div-Wahn verfallen (alles mit einem Div umgeben) es gibt für die meisten Dinge ordentliche Tags -> Absätze mit <p></p>, richtige Tabellen weiterhin mit <table></table>, für eine hervorhebung im Text kein <font> sondern <span> oder die normalen formatierungen (z.b. <strong>).
Über Google mit dem Suchterm "xhtml lernen" kommst du denke ich schon ganz weit -> z.B. http://jendryschik.de/wsdev/einfuehrung/
2. + 3.
Das ist Javascript. Mittlerweile auch Browserübergreifend ohne größere Probleme.
Florian benutzt z.B. Lightbox (das wiederum auf Prototype/Scriptalicious aufbaut).
Evenmedia hat am Ende der Seite auch ein JavaScript drin (navi.js).
4. Kann ich nicht öffnen. Generell ist es immer gut sich selbst einiges anzueignen, du musst eben selbst wissen wie schnell du zu einem Ergebnis kommen möchtest. Die Fertigen Lösungen a la Wordpress sind allerdings nicht zu unterschätzen.
Soweit erstmal von mir, ist einfach noch zu früh.
Jonis
super, und ich tipp mir nen wolf ... :hrhr
danke für die fixen antworten :)
seh auch grade das gimmix down ist, schade, gestern abend gings noch.
hmmm mit javascript war ich wie gesagt immer sehr vorsichtig, ich kann mir kaum vorstellen das sowas auf allen versionen wirklich klappt, außerdem habe ich 1gb ram und ich frage mich wie so eine seite mit lightbox wohl auf einem p2 mit iE5 und 256ram aussieht z.b. Da ich gerne so arbeite das es auch auf kundenrechnern problemlos laufen kann werde ich also wohl drauf verzichten und für spezielle gimmiks weiterhin flash benutzen, also für die hauptnavigation, und alles andere in reinem xhtml/css und php setzen.
"Sowohl Pixelgenau als auch Variabel ist alles drin. Der wichtigste Schritt wird für dich sein herauszufinden wie es mit "position: relative/absolute" und "float:" auf sich hat."
oki thx, das werde ich mir als erstes anschauen
"Nunja diese Dinge löst man mit kleinen Content Management Systemen, oft ist es Wordpress http://wordpress.de/ "
"obwohl wegen Umbauten geschlossen nehme ich mal an, dass eine fertige Lösung wie Textpattern, Wordpress u.ä. dahintersteckt. Es geistern diverse Themes im Netz und anpassen kann man CSS-technisch alles recht einfach. Außerdem gibt es für jeden Schrott eine Erweiterung, was aber auch zum Abfragegau ausarten kann."
"Generell ist es immer gut sich selbst einiges anzueignen, du musst eben selbst wissen wie schnell du zu einem Ergebnis kommen möchtest. Die Fertigen Lösungen a la Wordpress sind allerdings nicht zu unterschätzen. "
ich denke auch das ich beim vorhaben bleibe alles selber zu machen damit ich nochmal php auffrische und nicht einfach nur ein paar variablen ändere in einem sourcecodemonster von dem ich dann im prinzip nur 5% wirklich kenne. danke aber für die links, ich werde mir trotzdem mal wordpress und textpattern anschauen.
"zu 2) nennt sich lightbox . Diese Teile funktionieren mit JS/CSS bzw. bei solchen Anwendungen in Flickr und Co wird für die Formulardatenübertragung AJAX eingesetzt "
"Ajax [ˈeɪdʒæks] ist ein Apronym für die Wortfolge Asynchronous JavaScript and XML. Es bezeichnet ein Konzept der asynchronen Datenübertragung zwischen einem Server und dem Browser, welches es ermöglicht, innerhalb einer HTML-Seite eine HTTP-Anfrage durchzuführen, ohne die Seite komplett neu laden zu müssen. Das eigentliche Novum besteht in der Tatsache, dass nur gewisse Teile einer HTML-Seite oder auch reine Nutzdaten sukzessiv bei Bedarf nachgeladen werden."
hmm da muß ich mich auch noch reinfrickeln, klingt aber sehr interessant. hoffentlich kann man das einigermaßen schnell lernen. brauch ich wohl nicht für meine eigene seite aber wäre sonst recht angenehm zu wissen.
"scheint so, als hättest du dir einiges vorgenommen. "
naja soo viel ists ja nun auch nicht. select, update, insert und delete, n bisserl php und dann halt xhtml und css neu lernen. Dafür hab ich dann aber auch was feines :) Ich wollte mich halt ab 1.1.07 wieder um eine feste arbeitsstelle bemühen und wollte bis dahin die zeit nutzen um sämtliche lücken in den bereichen zu schließen die ich bisher schleifen ließ.
wenn du anfängst mit float zu arbeiten, hier ein tipp im voraus. eine antwort die hier im forum bei 95% aller css-probleme half:
clear:both; (weil wo ein float ist, da muss auch ein clear sein)
mensch, toll das es design ma dein germany gibt! :)
Wenn ich etwas vom Thema abschweifend sagen darf: Das hier ist ein Beispiel für einen Fred, wie ich sie mir eigentlich bei dmiq vorstelle. Klar und detailliert definierte Frage(n) auf die sinnvolle, klar formulierte und hilfreiche Antworten folgen … und keine Signaturen.
Edit: Und da muss ich natürlich nicht zuletzt auch an mir arbeiten.
Wer ist Fred?
Fred schreibt jedenfalls an einem Roman wie mir scheint.
Edit: Nichts gegen Fred, ich mag ihn. Daumen hoch!
Edit: 4) ... oder Symphony, auch ganz fein.
http://img270.imageshack.us/my.php?image=symphonyep9.jpg
auch wieder eine seite die im IE7 zerschossen ist. werde mir wohl alle 3 mal in ruhe anschauen später um zu sehen für welche zwecke sie einsetzbar sind. Aber bei der Seite bleib ich jetzt wie gesagt bei 100% handmade, bin auch schon fleißig dabei *freu*
Eigentlich nicht. Sitzt alles wo es sitzen soll auf dem Bild. Im Safari sitzt es an den selben Stellen. Es fehlt lediglich der weisse Hintergrund mit dem der Inhalt unterlegt sein sollte. Ist, denke ich, kein üblicher IE Krampf in Verbindung mit Stylesheets, zumindest habe ich bis jetzt noch keinen solchen miterlebt. Vielleicht einfach nur noch mal die Seite neu laden oder fertig laden lassen.
neuladen hilft nicht und unten links steht "Es sind fehler auf der Seite aufgetreten"
es kann aber sein das ich irgendetwas deaktiviert habe ohne es zu wissen. IE7 ist besonders hardcore was websites angeht. jeder download, jedes flashitem, jedes script einfach alles will da erstmal 3 mal bestätigt werden.
allerdings ist js an und ich wüsste nicht woran es hier und bei vielen anderen sites auch liegen sollte. wenn du oben schaust bei den dimigscreens dann fehlt da auch nicht nur ein weißer hintergrund sondern da ist der aufbau durcheinander.
Das mit dem Aufbau und so, tja, IE eben. Allerdings genauso umgekehrt, sprich kann schon vorkommen, dass zum Beispiel mal nur im Safari etwas über etwas hinaus ragt oder so ähnlich – jedoch selten(er) – der ist nämlich auch nicht unbefleckt (oder das Stylsheet war von Haus aus zum Spucken wo ich das mal bemerkt habe – keine Ahnung). Tja, dann scheint es wohl doch eher am Stylesheet zu liegen. Am besten auf den IE spucken – IE und pfui! ;)
du meinst sicher nicht gimmix sondern gimmixx.de oder?
das geht zumindest und ist eigentlich ein newsblog/portfolio-,ashup. ansonsten wurde schon so ziemlich alles gesagt.
zu lightbox ist noch zu sagen. dass das ding auch auf nem "schwachen" rechner sehr akzeptabel läuft. ich sitzt derzeit teilweise an einem 1.1 Ghz Rechner mit knappen 256 MB Ram und da läuft das lightbox auf Law & Order zB recht gut.
ich würde fast wirklich wordpress als "cms"-empfehlen. hab in letzter zeit einige wordpress installationen angepasst und kanns nur empfehlen, weil so einfach anpassbar.
Seitentitel: Allgemeine Fragen (X)HTML, CSS & Co
