Templaterie Blog » Tools

Tooltip mit bösem inline Javascript

Silke Schümann — Sat, 13 Mar 2010 01:17:42 +0000

Eigentlich bin ich ja ein absoluter Verfechter der Trennung von strukturiertem Inhalt, Aussehen und Benimm einer Website, aber in der Administration eines CMS ist es manchmal dann doch praktischer, wenn man mit dem alten onmouseover="" onmouseout="" im HTML- arbeitet. Ein netter Tooltip an einer kryptischen Schaltfläche hilft dem Nutzer, der so oder so Javascript für das CMS aktiviert haben muss, bei der Bedienung des Werkzeugs.

Das ist zwar alter Kram aber weil ich das gerade gemacht habe und das eine oder andere erst Nachschlagen musste, will ich hier mein Ergebnis verposchten, für Andere zum Finden:

Tooltipp mit inline-Script


onmouseover="this.firstChild.style.display='block';" 
onmouseout="this.firstChild.style.display='none';" >
  
Tooltip-Text

 onmouseover="this.setAttribute('src','button.gif');" 
 onmouseout="this.setAttribute('src','buttoff.gif');" />


Und so kann das dann aussehen:
Funktions-Aufruf blihblahblubb …


Viel Platz für den Namen der Funktion und Anweisungen  .

Nachtrag: ach Gottchen, mein frisch aktualisierter Firefox mag nicht, was ich da gemacht habe. Nur gut, dass ich es nur für den IE brauchte und hier auch keine Rücksicht auf die veralteten Versionen genommen habe. Aber dann … der Firefox nimmt eh gruselige Entwicklung und ich mag ihn immer weniger. Ich weiß wirklich nicht was der FF an diesen simplen DOM-Anweisungen auszusetzen hat. Meine Güte. OK. Der Firefox wollte unbedingt auch noch Javascript blockieren, obwohl ich dafür ein Addon habe … jajaja Javascript ist böse und es macht Sinn es nur von Fall zu Fall zu gestatten. Einstellungen korrigiert — jetzt tut’s auch im FF.



Addthis für Editland-Sites
Silke Schümann — Fri, 12 Mar 2010 11:09:41 +0000
“AddThis Makes Sharing Easy” heißt es auf der Site von Addthis und sich in den Social-Media-Diensten bekannt zu machen, ist ein wichtiges Marketing-Instrument. Damit man sich den populären Dienst auf die Editland-Site holen kann, gibt es hier das Plugin für das CMS. Das Script und Methode für den folgenden Button im Plugin stammt von Webreference.

Das Plugin herunterladen: ADDTHIS-Dienst für Editland
Das Plugin installieren ist ganz einfach:
Die Ordner content und plugins in die Editland-Installation kopieren, den Platzhalter ###---ADDTHIS---### in das Template im Ordner templates/[Dein Template] in alle Template-Dateien in den  an die Stelle kopieren an der später die Schaltfläche erscheinen soll und das Plugin in der code/plugins.csv mit der Zeile |###---ADDTHIS---###|plugins/addthis/|../plugins/addthis/|index.php| anmelden. 
 


Wow! Ein starkes Stück
Silke Schümann — Fri, 02 May 2008 14:40:40 +0000
Nach fünf Jahren erfahre ich nun, dass Editland via strk+k es erlaubt die Links zu bearbeiten. Ich habe es in der Dokumentation ergänzt. Da frag ich mich doch, was ich sonst noch wissen sollte, das nicht in der Doku steht und nicht wie die Sache mit dem Quelltext ein nützlicher Fehler, den man als Feature nutzen kann.  
 


Und da geht das Standalone-Heckmeck wieder los
Silke Schümann — Tue, 11 Mar 2008 15:34:58 +0000
Browsershot.org ist mehr und mehr verstopft mit Anfragen für den IE8. Logisch, man will ja wissen, ob man wieder Hand anlegen muss, oder die Welt noch in Ordnung ist. Auch ich habe gleich Mal meine Url eingegeben. Parallel schaute ich mich nach ersten Lösungen zu Parallel-Installationen um. Schließlich wer vertraut schon darauf, dass wenn man dem IE8 mitteilt, dass er sich wie IE7 benehmen soll, dass das daselbe ist wie die Seite in einem Originären IE7 zu öffnen. Tja. Noch scheint das wohl nicht so der Hit zu sein. Zu den ganz mutigen zählt Jeremy Smith, der nach anderen ganz mutigen sucht, die schon weiter mit der Parallelinstalltion der Standalones IE3-IE7 sind als er, denn natürlich ging das nicht so ab wie gewünscht.
Heckmeck!. Sorry, Jeremy. Ich habe zwei Computer und benötige daher nur das Standalone IE7 und IE8 und da warte ich auf Geeks, die es mehr drauf haben als ich und das dann wieder als bequemes Click&Run anbieten.
Nervig, dass Microsoft hier nicht für Entwickler eine Lösung von Hause aus anbietet. Warum muss hier jedes Mal wild gehackt und experimentiert werden.
 


Vektor-Silhouette in 5 Schritten mit Photoshop
Silke Schümann — Mon, 25 Feb 2008 19:39:02 +0000
Der Weg zu einer Silhouette ist sehr einfach und blitzschnell erzeugt:

Nachdem ich die Quelle der 8 Vektorgrafiken^[1] erst heute alle abgeklappert habe und dabei nur eine Sammlung für nichtkommerzielle Zwecke außerhalb von Demianart zur Verwertung vorfand, stehe ich ein wenig in der Schuld. Daher hier das Tutorial. Es fängt damit an, dass man ein geeignetes Bild heraussucht. Entweder ein helles Objekt vor dunklem Untergrund oder ein dunkels Objekt vor hellem Untergrund. Um Urheberrechte muss man sich nur bedingt Gedanken machen, da das Endergebnis sehr weit vom Original entfernt ist und es der Fotograf schwerhaben dürfte, der späteren Vektorgrafik anzusehen, dass sein Foto einst die Basis darstellte. Hier im Tutorial sieht das anders aus. Das Foto steht in direktem Zusammenhang mit der Silhouette. Ich nehme daher aus Flickr.com ein Foto aus dem creativ commons by 2.0 des Users officialstarwarsblog. 
Die fünf Schritte zur Vektorgrafik:
Zunächst einmal wird die Farbe entfernt: STRG+Shift+U

Da hier ein Bild mit heller Figur ist benötige ich den Zwischenschritt der Invertierung Strg+i:

Nun werden die Kontraste bis zum Anschlag hochgefahren Image/Adjustment/Brightness+Contrast Contrast 100, Brightness je nach Bild hier 35:

Überflüssiges entfernen, Zauberstab und weißer Pinsel:

Mit diesem Zwischenstann könnte man schon leben, doch sind noch zuviele Details besser noch den Rock entfernen udn einige Lichtreflektionen und Kleidungsstücke schwarz auffüllen:

Auch habe ich noch die eine oder andere weiße Linie ergänzt. Damit aus dem schwarz/weißen Bitmap nun eine Vektorgrafik wird, muss zunächst über Select/Color Range die schwarze Figur in die Auswahl genommen werden. Danach wechselt man von der Ebene zu den Pfaden und klickt am unteren Rand die Schaltfläche “Auswahl zu Pfad”. Darauf achten, dass der Pfad aktiv ist und schon kann man über File/Export/Path to Illustrator den Pfad als AI-Vektorgrafik abspeichern und weiter verwursten. Sie erstes Bild.
Ist der Pfad noch zu ingenau, kann man diesen etweder bereits in Photoshop nachbearbeiten oder aber später im Vektorprogramm wie z.B. der Illustrator oder CorelDraw. Und hier ist die Silhouette (AI-Datei) zur freien Verfügung. Wobei ich in diesem Fall zu bedenken gebe, dass die Silhouette mit dem Foto in Verbindung gebracht werden kann und damit man sich u.U. den einen oder anderen Arger einfangen könnte. Besser wird es sein man sucht sich ein anderes Foto.  
 


Addi, der Blitz-Zeichner oder Wie man ein Foto in eine Zeichnung verwandelt
Silke Schümann — Fri, 22 Feb 2008 07:26:23 +0000

Fast schon dachte ich, ich hätte eine dritte Methode entdeckt, wie man aus einem Foto eine Zeichnung macht, aber dann beim Test bedurfte es doch wieder einer der alten Methoden, um die Umrisse hervorzuheben.
Wovon ich spreche? Von einem ziemlich alten Beitrag, bei dem ein Foto in eine Comiczeichnung umgewandelt wird im alten templaterie blog. Dort werden zwei Methoden gegenüber gestellt.
Die neue Methode, die ich nun auf Tutorial-Place.com fand, verwandelt ein Foto 4 Schritten und mittels drei Ebenen in eine Zeichnung. Als ich die Methode am Hirsch von Rainer Storm testete, war das Ergebnis nicht zufriedenstellend. Aber ich konnte mir mit einem der alten Tricks helfen. Und so verwandelt man das Foto vom Hirsch in eine Zeichnung vom Hirsch:

Foto 4 mal dublizieren und bis zur vierten Ebene Desaturieren (STRG+U)
Ebene 5: Opacity 60%, Ebenen-Filter: Color ODER: Opacity 100%, Ebenen-Filter: Color Burn oder Multiply für kräftigere Farben 
Ebene 4: Opacity 85%, Ebenen-Filter: Color-Dodge, Invertieren (STRG+I), Gaussian-Blur ca. 3px
Ebene 3: Opacity 20%, Filter Artistic Brushes/Crosshatches Default oder ein wenig gespielt mit den Filtern
Ebene 2: Opacity 70%, Ebenen-Filter: Multiply, Invertieren, Filerset-Blur/Smart-Blur (Radius 50, Threshhold 100, Quality high, Overlay Edge), invertieren

Wer noch den angefressenen Rand möchte, kann in einer neuen Ebene einen 10-12 Pixel breiten Papierfarbenen Rand erzeugen (STRG+A, Edit/Stroke: ca. 10px Location inside, Filter/Blur/Gaussien blur 3,0, Ebene-Filter: Dissolve).
Bildquelle aboutpixel.de Hirsch von stormpic aka Rainer Storm
 


Das kurze Leben der NextGEN Gallery auf Templaterie.de
Silke Schümann — Mon, 18 Feb 2008 20:36:13 +0000
So nun hatte ich also das WP-Plugin “NextGEN Gallery” hier hochgeladen, aktiviert und mich durch die Optionen geklickt. Die erste Schwierigkeit, überhaupt einmal zu kapieren, dass ich nicht einfach einen bestehenden Ordner zur Galerie erklären kann. Nachdem ich das kapiert hatte, konnte ich nur das Rootverzeichnis als Basis-Ordner verwenden, um die Bilder in meinen Bild-Ordner “upload” anschließend zu importieren. Robert, der für die Basis-Installation verantwortlich ist, hatte hier keine Unterordner nach Jahr und Monat vorgesehen und ich habe das nicht nie geändert. Die Menge der Bilder, die nun in zwei Jahren und 4 Tagen zusammengekamen, war zufülle: bei 72% gab’s einen Timeout. Auch  Wiederholungen des Vorgangs brachten keinen Erfolg. Der Abbruch bei 72%, bedeutete nicht, dass nun wenigstens 72% der Bilder in der Galerie waren, sondern nach wie vor blieb der Stand bei 0 Bilder. Da ich nicht vor habe Bilder für eine Galerie doppelt zu hosten, also ein neuer Ordner in dem ich die hier vorhanden Screenshots, die in eine Galerie sortiert und zum blättern und stöbern dargeboten werden sollen, ein zweites Mal hochzuladen. Nicht weil der Platz fehlte, sondern aus Prinzip! Himmel, das ist ein Server, eine Installation, ein Wordpress und da sollten zum Kuckuck Pointer genügen und nicht zusätzliche physikalische Daten.
Nach diesem Ergebnis habe ich nicht lange gefackelt und werde mich ergo nach einer anderen Galerie umsehen.
Achja, wer schon das Thickbox-Plugin und die NextGEN-Galerie vertragen sich nicht gemeinsam in einer Wordpress-Installtion. Eines muss deaktiviert werden. Meine Entscheidung: kill NextGEN.
 


Radierungen bearbeiten, skalieren via Vektorisierung
Silke Schümann — Sun, 27 Jan 2008 23:27:01 +0000
Ich hatte das Dienstprogramm Trace aus meiner corel Suite schon ganz vergessen, als ich beim Experimentierne mit Stempeln, mich meiner recht großen Tiff-Sammlung auf verschiednen CDs erinnerte und dort ein wenig stöberte nach Material. Die meisten dieser Tif-Dateien haben schöne Motive, doch als Bitmap sind sie häufig recht grob und mit Treppenstrufen. Auch hatte ich in Coreldraw begonnen Vektoren-Schnörkel zu preparieren und als ai-Vektorgrafik für Photoshop-Arbeiten in Ordner weg zu sortieren, als ich über die noch immer offene Seite in meinem Opera stolperte. Kunstwerke aus einer Datenbank nach dem Stichwort Tod gezogen. Darunter viele mittelalterliche Radierungen mit einer Frau und einem Skelett. Die Frau und der Tod, schien ein Schlager zu damaliger Zeit zu sein. Die Gründe dafür sind mir für den Augenblick egal. Es insteressierte mich, wie gut Trace mit den Radierungen zurecht kam und ob bei den vielen Knoten Coreldraw noch mit machte. Et voila. C’est ca!

Hans Leonhard Schäufeleins “Frau und Tod” lässt sich so in kürzester Zeit bearbeiten und in jeder beliebgen Größe in Photoshop in die Arbeiten wieder integrieren. Der Weg des Bildes geht zunächst in Photoshop um aus den Grauwerten ein reines schwarz/weißes  Bitmap zu erzeugen, das in Corel Trace verarbeitet wird. Von dort geht es nach Corel Draw, wo sämtliche Knoten, die zum Tod gehören gelöscht und gemeinsame Knoten von Frau und Tod nachbearbeitet werden, schließlich kann das Bild nach ai exportiert werden ist steht damit dem Illustrationsbilderpool für Photoshop bereit.

Das eine oder andere Foto ist natürlich ebenfalls geeignet. Zunächst wird dem Foto die Farbe genommen. Das heißt der erste Schritt fängt wieder in Photoshop an. ‘Strg+u’ und anschließend den Schwarz/Weiß-Kontrast justiert. Wieder als Bitmap abgespeichert und in Corel Trace vektorisiert. Noch ein wenig hier und da nachgearbeitet und schon kann ein weiteres Bild in den Pool. Hier ein berühmter Tänzer. Und auch wenn Fotos nach 50 Jahren gemeinfrei sind, will ich mir lieber nicht mit der Bildquelle streiten und schweige mich besser aus, wie ich zu der Tänzersilhouette kam.

Dieser Tänzer skaliert auf diesem Weg ohne Probleme und ist damit für Web und große Poster geeignet.
Denk ich an Tänzer, denk ich an Degas. Und prompt stoße ich doch noch auf einige Exportschwierigkeiten. Die Zeichnung von Degas hat nun doch zu viele Knoten. Vom Tracing sind im Bild einige weiße Flächen, die sich zwar ohne Probleme durch Kombinieren der weißen und schwarzen Flächen darunter entfernen lassen, doch danach ist die Vektorzeichnung zu komplex für meinen Rechner um noch nach AI exportiert werden zu können. Ich nutze den Illustrator nicht, da ich mich in Corel gut auskenne und Vektorprogramme nur noch selten benötige. Der Umstieg ist auch jetzt keine Option. Nach etlichen Fehlschlägen und einige Corel Draw Abstürzen, reduziere ich schließlich im Trace-Programm die Anzahl der Knoten (Trace-Einstellungen: Umriß, Genauigkeit 90%) und dann klappt es auch mit dem Nachbarn:

Je nach Ausstattung, Multitasking, Tageszeit und Rechnerform (Cache-Space, Ram, Rom und rum und so …) muss man testen, was noch funktioniert und eine gute Qualität liefert. Mein Rechner ist aktuell durch laufende Projekte und der fehlenden Zeit für eine Wartung schwer angeschlagen. Mag sein, dass es genügen würde den Rechner neu zu starten und dann wäre auch 100% Genauigkeit leistbar, doch ist die Qualität damit nicht besser. Ausgehend von der Datenmenge zu Bildansicht sogar schlechter. Erst wenn man diese Tänzerin aufbläht zu einem Banner mag der Unterschied sichtbar werden. Das aber ist im Augenblick nicht gefragt.
 


Moderne Kunst: Abstract Expessionism und Brushes
Silke Schümann — Sat, 26 Jan 2008 15:47:25 +0000
Wo ich schon so fleißig beim Kunstraub bin, da darf ein Jackson Pollick nicht fehlen. Zählen seine Orgien wilder Farbspritzer schließlich zur absoluten Weltklasse in der Kunst und jedes Nationale Museum zeitgenössischer Kunst hat einen ausgestellt … einen echten Pollock kann ich mir nicht leisten, aber was Ahnliches:

Nicht direkt ein Jackson Pollock aber doch, beseelt vom Meister.
Das Werkzeug für pollokschen Sitedekor ist eine Brush-Sammlung, die ich heute im Netz entdeckte und dabei auf eine reiche Sammlung von diversen Brushes sowie guten Tutorials zu Brushes: I proudly present PS Brushes Obsidian Dawn
Mich hat die Fülle der Pinsel begeistert und nach einer wilden Downloadorgie (da&dort), muss ich erst einmal die Schätze sortieren. Ich bin froh, dass der der die SS-Glitter auf einen der lästigen Download-Server mit Klick-Zirkus eingestellt hatte, nicht auch den Dateinamen änderte. Die zweite Sammlung die für Jackson Pollock ähnliche Pixkelkleckserei benötigt wird ist Paintdroppings. Ein weiteres Reservoir für wilden abstrakten Expressionismus in Photoshop ist 
Es gibt unzählige Quellen für Brushes, manche zu kaufen, anderen frei für die private Nutzung und andere wie die von Stephanie Shimerdla komplett frei. Hier eine Liste mit Links, die teilweise auch gleich noch zeigen, was andere mit Brushes so anstellen:

Photoshopbrushes.com
PS Brushes
Brusheezy
Brushfed
Valhalla Vania Brushes
Brushworks von artflower.de
Miss Ms Brushes
Umfangreiche Sammlung von Brushes verschiedener Designer
Designfruit.com Kategorie Brushes und im Besonderen: Graffiti Photoshop Brushes for High Resolution [Part I] – [III] & Tasty Tattooâ„¢ Photoshop Brushes (Free), Vector Art, and PNGs (Free)
Veerle, Creating grunge brushes
Free Grunge Style Brushes (& Going Grunge Style)
Shizoo-Brushes von frozen-media.de
Die Arbeiten zeigen auch schön, dass man mit Stift, Feder, Pinsel, Tassen, Matchboxauto-Reifenprofil, Tusche, weißen Papier, (Well-)pappe, alter Spitze, Briefmarken,  Poststempeln und sonstigem Allerlei und einem Scanner schöne und interessante Brushes erzeugen kann.

Zukünftig werfen wir unsere Kalligrafie-Übungen nicht weg, sondern kombinieren diese zu Brushes und wenn Heinz, Egon oder Fritz wieder einmal einen Kaffeerand auf Dokumenten hinterlassen, wo sie nicht hingehören, nicht mehr ganz so tragisch, zerreisen, Schnipsel scannen + brush definieren.   
Wer einsteigen will in die reichen belebten Hintergründe mit Brushes, der sollte auch die einen oder andere Texturen-Sammlung kennen. !0 Quellen zum Download und als Anregungzum selber machen:

Texture King
Texture Warehouse
Texture Forrest
CG Textures (Absolute Empfehlung)
Amazing Textures
In Texture
Image After
Nahtlose Hintergrund-Texturen
Wasserfarben-Texturen
Textures.Over-Blog.com (Nicht zum ziehen, aber als Anregung, worauf man mit der eigenen Digi zielen kann.)

Noch ein paar Links die bei der Recherche so abfielen und nur am Rande und bedingt hierher gehören:

speckyboy.com: 10 Quellen für Patterns & Hintergründe
Eine sehr umfangreiche und gute Liste mit Quellen für Hintergründe, Muster und Texturen
stripegenerator.com: Ein Steifenmacher
bgmaker: ein Kachelmacher

Viel Spass. Ich habe ihn auf alle Fälle. 
Nachtrag 8. März 2008: Seishido.biz bietet freie Werkzeugspitzen an. Die Spitzen sind mit vorsicht zu genießen. Denn teilweise sind es Rippoffs von urheberrechtlich geschützten Werken. Doch auch mit dieser Einschränkung ist die Quelle einen Besuch wert. A sind nicht alle Rip-offs und manche Rip-offs sind so generell, dass es schwer fallen dürfte für die Einzelform ein Urheberrecht durchzusetzen.
 


Kleine Linksammlung
Silke Schümann — Sun, 06 Jan 2008 04:59:53 +0000
Was so beim Surfen an- und abfällt:


DomHelper – Create Elements using DOM, HTML fragments and Templates
und Javascript-Bibliotheken im Vergleich
DHTML Hotlinks und 
DOM-Javascript Hotlinks
Umfangreiche Liste der verfügbaren Bibliotheken für Ajax, DHMTL und Javascript
Kleine Übersicht: Diagramme für die Website
replaceHTML wenn innerHTML ächzt und stöhnt
Javascript: Eventdelegation ohne Libraries
Blueprint CSS Framework
Für Liebhaber des Schnickschnacks: Rollover-Links
40 hochwertige Freefonts für professionelles Design
67 Killerressourcen
darunter die eben erwähntne Fonts und: miniAJAX
Sehr flexibler FLV-Player für die eigene Website und die Website der Kunden
via video-flash.de, eine Autorität auf dem Gebiet

 


Die Zähmung des zickigen IE6
Silke Schümann — Mon, 31 Dec 2007 07:06:03 +0000
Es war einmal ein cranky old IE6, der mit dem System kam und kurz nach dem ersten Start von Arcor umgebaut wurde. Es dauerte nicht lange, da zickte auch schon dieser Browser. Nicht immer, wenn es hieß getestet mit dem MSIE6, wollte mein IE6 da mitmachen. Nicht schlimm, denn mein MSIE6 ist nur zum Testen im Gebrauch und da stört es nicht wenn jQuery nicht funktioniert. Auch schadet es nicht, sich nach Skripten umzusehen, die diese Zicke von Browser akzeptiert.
Doch eigentlich wollte ich schon, dass auch mein MSIE6 kann was andere MSie6er können. Heute habe ich mich nach einem MSIE6-Standalone umgesehen und von evolt.org gezogen. Und siehe da, jQuery tut. Sollte nun ein Kunde Probleme haben, wo diese Standalone keine hat, so kann ich ihm immer anbieten, ihm einen reparierten MSie6 zuzusenden. Insbesondere einen Programmierer wird das vermutlich freuen. Bietet dies doch die Aussicht weniger Extrarunden in der Programmierung zu fahren und auf darauf auf viele fertige Skripte zurückgreifen zu können.
 


Bildkomprimierung
Silke Schümann — Sat, 29 Dec 2007 13:58:21 +0000
Ist das noch ein Thema … einmal davon abgesehen, dass noch immer nicht jede Bildgröße bzw. Bildvolumen im Netz Sinn macht. Auch wenn ich mit einer DSL6000, die schon relativ weit verreitet ist, ein 2MB Bild in kürzester Zeit auf meiner Platte habe, ist das kein Grund 2MB-Bilder für Illustrationen einer Website zu nehmen. Meine Goldene Regel lautet alles um die 30KB ist erlaubt und in absolute Ausnahmen auch mal 40 bis 60 KB. Damit nicht eingeschlossen sind Ansichten von Screenshots oder Fotos, die separat angesteuert werden und die man in bester Qualtität und guter Auflösung sehen will, diese kommen fast alle über 100KB oft bis zu 300KB.
Eben bat mich eine Kundin ein Bild unter 12KB zu komprimieren und ich stellt fest, dass mein Photoshop 7 das selbst bei einem kleinen Briefmarkenbildchen von 65×90 Pixel nicht schafft. Ich habe daher meinen martelalten Webrazor Smartsaver nach langer Zeit wieder angeworfen. 

Kiwano Melon
PNG ca. 35KB

Es scheint, ich könnte meine Arbeiten durch die Bank noch optimieren. Stellt sich nur die Frage, ob Aufwand zu Ergebnis angesichts von DSL und SuperDSL wirklich Sinn machen. Meine Seiten sind so oder so nichts für Handysurfer. Wer eine Mail mit seinem Handy abholt und anschließend nicht abwarten kann, die Site anzusurfen, hat quälende Ladezeiten nicht anders verdient. Ich bin hier für die Langsamkeit des Seins.
Zum Spaß hier noch der Vergleich. Basis ist ein Bild aus dem Public Domain (imagefreedom.org).
Photoshop 7 Komprimierungen
Beispiele wurden nicht via speichern für’s Web abgespeichert. In Photoshop ist das die Option der Wahl, will man Bilder im Web publizieren. *räusper*

Qualität: 0
JPG 21,5KB


Qualtität: 5
JPG 25,7KB


Qualität 12
JPG 52,8KB

Webrazor JPG-Smartsaver

Qualtität: 20%
JPG 3,1KB


Qualtität: 60%
JPG 5,6KB


Qualtität: 100%
JPG 24,8KB

Erstaunlich wie groß die Unterschiede sind. Ich vermute, Photoshop schreibt in die Datei halbe Romane, dass diese Unterschiede zustandekommen, den in Bezug auf die Bildqualität, einmal von der Dateigröße abgesehen, geben sich die Bilder zu mindest bei diesem relativ unkritischen Motiv nicht viel. Hinweise zu den Gründen und Verfahren (Links) werden gerne entgegen genommen.
Ich hätte mich wohl auch mit der Option Save for Web näher beschäftigen sollen. Die Kompressionsraten sind in diesem Modus deutlich höher als in diesem Vergleich der Vergleich hinkt damit gealtig. Autsch. Ich denke wohl anders als die Entwickler von Adobe. Für mich ist speichern speichern, ob für Web oder Druck bestimme ich in den Optionen zum Bild. HIer noch einmal einen Unterschied zu machen wäre mir nicht in den Sinn gekommen und dass der Unterschied so erstaunlich groß ist, für mich eine Überraschung.
Hier noch ein Text zu JPG-Komprimierung: Fotocommunity.de: “JPEG”
 


Doublebrowser-Test IE und FF
Silke Schümann — Fri, 28 Dec 2007 05:00:05 +0000
Litmus hat ein witziges kostenloses Tool zum Download der Community bereit gestellt. Wer will kann nun ich Echtzeit Microsoft.com oder Mozilla.org oder jede andere Site im Internet oder auf der lokalen Platte redesignen. CSSVista liefert drei Fenster:

vertikal über die gesamte Höhe: alle CSS-Stylesheets per Karteireiter im Zugriff, 
horizontal halbe Höhe: den Internet Explorer und 
horizontal untere Hälfte: den Firefox.

Im CSSVista Cache hat man die Möglichkeit, alle CSS-Dateien zu jeder beliebigen Seite zu bearbeiten und das Ergebnis der Anderunge unmittelbar zu beobachten. Es ist kein echter Editor, was man unmissverständlich daran merken kann, dass die in Editoren üblichen Einblendfenster zum Autoausfüllen fehlen oder jegliche andere Methode, keine Hilfe zu den Eigenschaften geboten wird und vor allem die Speicherfunktion fehlt. Wer es dennoch als “Editor” einsetzen will, kann sich mit Copy&paste und seinem üblichen Editor behelfen.
Witzig ist es alle mal und wenn man lernen möchte ein anschauliches Werkzeug um die Effekte unmittelbar zu sehen, die die Anderung der Eigenschaften im CSS-Stylesheet mitbringt.
 


Firefox goes nuts
Silke Schümann — Sat, 27 Oct 2007 14:18:11 +0000
Nun geschieht es schon zum zweiten Mal, dass ein automatisches Update von Firefox Websites mehr oder weniger abschießt. Von jetzt auf nachher fehlen scheinbar wahllos Grafiken, Stylesheets und erscheinen Grafiken an Stellen wo diese nicht vermutet werden.

… und tschüss Design im Firefox 2.0.0.8 … 
Opera am selben Tag:

Das System dahinter ist mir nicht klar. Auch warum screengrab unbekannten Fehler auswirft, warum ich den neusten Beitrag von jojo sehen kann aber alle anderen Bilder nicht angezeigt werden. Warum der Wordpress-Admin dieses Blogs ohne Stylesheet auskommen muss … etc etc etc …
Diese Site (Blog und Shop) sehe ich perfekt. Keine Grafik fehlt und das Stylesheet ist auch vorhanden???
[Update 12-11-07]
Und wieder ohne erkennbare und sinnstiftende Handlung arbeitet der Firefox ohne offensichtliche Darstellungsfehler. Die Umfangreiche Add-On-Sammlung abzuschalten oder deinstallieren hatte keine Wirkung gezeigt. Vielleicht war es der letzte Neustart des Computers, der einen Unterschied machte. Warum das sein kann, … keine Ahnung. Mir erscheint es unlogisch. Die Add-On zu reaktivieren nachdem der FF wieder funktioniert, führte zu keiner Fehldarstellung. Offensichtlich waren die Add-Ons nicht der Grund für das irritierende Verhalten des Browsers.
[Update 26.11.2007]
Und einige Tage später … Links erscheinen Pink und einer Strichellinie umrandet, wobei mir nicht klar ist wann dies der Fall ist, denn es geschieht nicht auf allen Seiten und nicht immer. Der Firefox auf meinem Rechner führt ein seltsames Eigenleben. Ich weigere mich in diesen Quatsch Zeit zu investieren. Ich kann den Firefox bei diesem Heckmeck nicht mehr guten Gewissens empfehlen.
[Update 8-12-2007]
Der neue Firefox kennzeichnet rosa und rot gestrichelt umrandet Links mit dem Attribut “rel=nofollow”. Nun da ich die Systematik erkannt habe, wäre es schön, ich könnte die Anzeige abschalten, oder doch wenigstens die Darstellung abandern. Das aber bleibt derzeit noch ein Mysterium. *humph* Mich käsen diese häßlichen Links in den Websites an. So genau will ich gar nicht wissen, wer nun nofollow einsetzt, es excessive oder absolute sinnvoll einsetzt. Zuschalten meinetwegen aber bevormundet ohne Option in der Menüleiste … da werde ich aggressiv und bin schlicht sauer!
[Update kurz drauf]
Na bravo! Nun habe ich via Jörg Petermann einen Link gefunden, wie ich diese nofollow-Kennzeichnung in der Ansicht im Browser hinzufügen könnte und erahne einen Weg den Spass abzuschalten, da klicke ich hier und klicke ich da und habe am Ende eine Lösung … nur der Weg dahin  ist mir entgangen??? Vielleicht war es “User-Style hinzufügen” im Developer-Kontextmenu aufmachen und dann ohne Eingabe abzubrechen. Nungut! Ich will meine neugewonnene ungetrübte Darstellung genießen. Auf den Stress mit dem nächsten Firefox-Update … *seufz*
Aaaaaaaaaaaahrgh!!! Inkonsistent. Inkonsistent! Was ist das? Wo kommt es her? Warum ist es wieder da? Warum kann ich es nicht erneut abschalten? Ich will die nofollow-Markierung nicht! Ich will das abschalten!!! *grrrrh* 
PS: Wer nun denkt, es könnte am Webdeveloper liegen. Irrtum. Diesen zu deaktivieren bringt nichts. Wo ist der Entwickler der diese halbgare Firefox-Entwicklung zu verantworten hat? Ich möchte ihm genüßlich die Gurgel umdrehen!
[Update später]
Endlich!!! ich bin wieder im Besitz der Kontrolle über meinen Browser. Ich habe die Ursache gefunden. Ich habe zu viele Addons im Firefox und schlicht den Überblick verloren. Eines meiner Addons ist in der Lage Seiten auf seinen Status in Bezug auf Erreichbarkeit und Popularität zu untersuchen: SearchStatus 1.21. Dieses Addon hat eine Option Highlight “nofollow”. Ich erinnere mich nicht diese Option aktiviert zu haben, aber in der Hektik der Arbeit kann so etwas einem auch schon  mal entgehen und ich gestehe ich bin impulsiv … *hömmm* (Wer hätte es gedacht, nach diesem Beitrag …) Ich bin wieder im Vollbesitz der Kontrolle und einmal von den anfänglichen Schwierigkeiten des letzten größeren Updates (siehe Screenshots) ist die Darstellung von Firefox wenige Tage oder Wochen später korrigiert worden. Im übrigen ist searchStatus durchaus eine Empfehlung und ein interssantes Addon für den Firefox.
 


Templates in Editland aus der Anzeige nehmen
Silke Schümann — Wed, 08 Aug 2007 12:03:20 +0000
Manchmal benötigt man für Seiten ini einem CMS spezielle Anforderungen, die auf keiner anderen Seite auftauchen. Es macht also keinen Sinn, das Rahmendesign für diese Seite für andere Seiten zur Verfügung zu stellen. In diesen Fällen ist es praktisch wenn man die Templates aus der Anzeige nehmen kann. In Editland erreicht man diese Auswahl des Rahmendesigns entweder bei der Neuanlage einer Seite über die Schaltfläche “neue Seite” oder aber über die Schaltfläche “TPL”. Dort werden alle Rahmenseiten aus dem aktuellen Template-Ordner angezeigt, die die Erweiterungen html, htm oder php haben. Da Editland eine Seite mischt, die dann unter index.php?s=seitenname publiziert wird, ist es für den Browser irrelevant, auf welche Endung das Template lautet und da in Editland das Template mit der vollen Bezeichnung angemeldet, werden muss, darf diese Seite mit dem Rahmendesign auf eine beliebige Erweiterung enden, z.B. spezialtemplate.tpl.
Da die Seite mit dem Rahmendesign nicht mehr das Listenkriterium erfüllt wird es nicht in der Auswahl angezeigt.
Sollten Kunden nun probeweise allerdings das Template wechseln, dann können sie diese Einstellung nicht mehr rückgängig machen. Diese Spezialeinstellung kann derzeit nur über den Text-Editor und ftp erreicht werden. Eine entsprechende Verwaltung im Backend für tpl-Files im Template-Ordner ist in Planung.
 


MySQL-Blähungen
Silke Schümann — Thu, 21 Jun 2007 12:10:50 +0000
Nichts kann einen Server so schnell in die Knie zwingen, wie Spam, der in einer fehlerhaften Wordpress-Installation, die Requests nicht schließt. Nun habe ich auf meinen Host Europe VPS die Updates bei allen Installationen vorgenommen, also auch auf dem stillgelegten im Unterverzeichnis /wordpress/. Seither hat der Spam nicht nachgelassen, aber er wird weiterhin brav von Spamkarma verspeist und abserviert. Wenn man einmal am Updaten ist, dann macht man natürlich weiter. Leider führte das nun auf Silkester.de zu einigen Schwierigkeiten. die wp-admin/upgrade.php will nicht öffnen, sondern die Download-Funktion des Browsers besteht darauf, dass zu *.php kein Mime existiere, kein PHP installiert sei und wie bei allen unbekannten Formaten der Download-Dialog bzw. Dialog zum Äffnen mit einer beliebigen lokalen Applikation (bzw. der zugeordneten wie z.B. PHPEdit) die logische Folge sei.
Wie bringe ich dem Server bei, dass diese PHP-Datei nicht anders ist als andere PHP-Dateien auf dem Rechner, die nach wie vor brav interpretiert werden? Mit der dieser Server im Übrigen keine Probleme hatte.
Update:
Oh Boy… Es liegt offensichtlich nicht am Server. Denn wenn ich die Datenbank auf diesen Server hole, auf dem das Update so Problemlos gleich drei Mal funktionierte, so habe ich immer noch das gleiche Ergebnis, wenn ich hier ein Update laufen lassen möchte. Auch hier wird dann die PHP-Datei wp-admin/upgrade.php nicht mehr serverseitig ausgeführt und der Download-Dialog startet. mal sehen, ob ich mit einzelnen Tabellen in PHPMyAdmin umbenennen weiterkomme. Und langsam sollte ich wohl das Blog unter Silkester.de offiziell vom Netz nehmen und ein Baustellenschild stattdessen anzeigen lassen. mit Bigdump die Tabellen in eine bereits bestehende Wordpress 2.2.1 Installation mit einem unterschiedlichen Prefix übernehmen und schon … Ich frage mich nur, was in der Wordpress-Datenbank von Silkester.de verborgen liegt, dass diese Komplikationen mit sich bringt …
 


Die stressfreie Abmagerungskur
Silke Schümann — Thu, 07 Jun 2007 14:47:00 +0000

So eine Abmagerungskur stresst, weswegen es Heilsversprechen gibt und Wunderpülverchens, doch all das verblasst angesichts der folgenden Methode: 

  

Direkt-Link youTube (Jugendschutz aktiv)
Bildquelle Kussmund
 


Das e mit dem Krönchen im IE6
Silke Schümann — Thu, 12 Apr 2007 12:16:34 +0000
Der IE6 lässt die Tschechen im Stich. Nicht dass der IE6 nicht die Maskierung ĕ verstünde, das ein e mit Krönchen bzw. dem vertikal gespiegelten “Accent Dächle” Ãª darstellt wird vom IE6 genau einmal auf einer Seite dargestellt, ansonsten zeigt es ein olles leeres Schächtelchen. Ich bitte also die Tschechen um Verzeihung. Aber da ist ein einfaches e der Lesbarkeit doch dienlicher. 


Update: Es scheint als sei der iE mit  ĕ nicht einverstanden und hätte gerne stattdessen: ě sososo.
Die Reptilienbörse Ulm lädt also nun in fünf Sprachen ein, u.a. in Tschechisch.
Alles in allem ging selbst eine so sonderzeichenlastige Sprache wie Tschechisch recht problemlos umzusetzen. Es ist etwas umständlich zu schreiben da viele der Zeichen über Copy&Paste in die Seite gemogelt werden müssen. Es fehlt einfach der Ascii-Wert für die meisten Buchstaben mit Krönchen. Ansonsten aber ist das arbeiten mit dem Plugins cpSprache für Editland bequem und einfach.
Update: Wenn man den Zeichensatz ändert, klappts auch mit dem Nachbarn. Tschechisch erfordert im IE6 — Maskierung hin oder her — UTF8 oder Windows-1250. Da UTF-8 aller wahrscheinlichkeit noch weitreichendere Anderungen erfordert hätte, habe ich erst einmal Windows-1250 genommen, den Standard, den man auch auf tschechischen Seiten findet. Etwas umständlich gestaltet sich noch die Eingabe, wenn keine tschechische Tastatur verwendet wird. Die Sonderzeichen gibt man dann direkt in Editland via copy&paste ein. Das beste ist es also, dem tschechischen Übersetzer direkt Zugang zur Präsenz zu geben.
Nun muss noch in Editland bei den Formulareingaben der Doctype und Charset via Variable gesetzt werden und schon sollte man auch die Menübezeichnungen der Navigation korrekt widergeben können. Kommt mehr Zeit, kommt auch hier noch das letzte Quentchen Perfektion
 


Planen, testen und liefern — eine echte Freude
Silke Schümann — Thu, 12 Apr 2007 09:35:14 +0000
Eben mache ich für einen Kunden eine weitere Spracherweiterung und öffne den Ordner der Sprachverwaltung und es prangt mir schon in knallegelb auf der ersten Seite ein dicker Hinweis entgegen, dass neue Sprachen hinzugekommen sind.
Hier hat jemand mitgedacht. Claudia Reiser zeichnet sich unteranderem dadurch aus, dass Sie mitdenkt und ihre Plugins gründlich alle Eventualitäten abklappern. Wenn Sie mir Dinge in Bata zusendet sind diesen selten so Beta sondern sehr oft schon ziemlich Alpha.
Ich arbeite verflucht gerne mit Claudia Reiser von creisi production zusammen. Das musste hier mal geschrieben werden.
Danke, Claudia!
 


Kein Wunder WAP ist so selten
Silke Schümann — Mon, 19 Mar 2007 19:16:16 +0000
Ich habe erstmals die Anforderung auch für ein Handy die Seite aufzubereiten. Ergo ist es kein Fehler, die Seite während der Arbeit zu testen. Dafür gibt es sogar einen Browser für den PC von Nokia. Schön denkt man sich und folgt dem Link auf der WAP-Demo von W3CSchools. Und wenn man dann auskunftsfreudig wie man so eben gestimmt ist, sich durch 5 Seiten Aufnahmeformular durchgeklickert hat, darf man das tool auch herunterladen. Nur Nutzen ist noch nicht, denn das gute Teilchen will eine Seriennummer. Tja und da beginnt der Arger. Man kann sich erst einmal über die Installationsroutine erneut im Forum anmelden. Blöderweise aber weiß das Forum zwar, dass man das Toolchen heruntergeladen hat und auch dass man gerade mitten im Installationsprozess ist, aber eine Seriennummer findet man dennoch nicht. Wenn ich nicht demnächst den Installationsprozess abschließen kann, suche ich mir einen anderen Weg. Heckmeck!
Update:   OK. Kleine Veräppelung. Die Seriennummer kam per Mail. Warum im Forum der Link mit der Seriennummern ist, … und die Installation einen noch mal ins Forum schickt, wissen nur die die  … haggaggagg …
Update 2:   :harr: Wie es scheint, habe ich aber nun eines der besten Tools auf dem Rechner für WAP-Seiten-Entwicklung. Zumindest wenn man dieser Quellensammlung glauben darf: Was ist WAP?
Nun gut, ich habe eher das Gefühl, dass ich mit dem Tool nicht ganz das habe, was ich benötige, da das bissle text formatieren und aufbreiten nicht gleichzusetzen ist, mit WAP-Applikationen. Und in dieses Thema will ich nicht einsteigen. Ergo wird mir die gezogene Seite mit den vscript und jsscript von w3cschool mit deren Erläuterungen deutlich schneller und gezielter weiterhelfen. So wie es im Moment aussieht, wird rund um WAP viel geschwätzt. Ich hatte im Weblog ja mal jemanden, der Seiten mit dem Handy abrief und sich aktiv über die Filegrößen ausgelassen hatte.
Doch im Moment sieht es für mich so aus, als sei es sinniger eine separate wml-Seite anzubieten. Hmmm. Lesen und recherchieren wir mal noch ein wenig konkreter, bevor ich mir ein endgültiges Urteil bilde.
Update 3:   auf ccwap.de kann man ein wenig mit WAP-Browser spielen. Auch wenn die Sehnenscheidenentzündung hier beim Maus-Zeigefinder auftreten wird, statt mit dem Handytasten-Daumen, so zeigt sich für mich, warum ich bei WAP auf eine unzahl zu verkaufende Domains, Werbekringelseiten und andere Sackgassen stoße. OK. Das Thema hat sich erledigt. ich werde einen entsprechenden Kommentar ins Angebot schreiben. WAP ist in meinen Augen ein sehr totes Pferd, das zu reiten weder Spaß noch Sinn macht.
 


Editland-Seiten im Firefox bearbeiten
Silke Schümann — Sat, 17 Mar 2007 13:32:37 +0000
Die Editland-CMS-Funktionen setzt auf Funktionen rund um ‘contenteditable’ im Microsoft Internet Explorer auf, die bislang im Firefox noch nicht ausreichend zur Verfügung stehen. Das heißt aber nicht, dass sie notwendiger Weise extra den Internet Explorer starten müssen, wenn Ihr Hauptbrowser der Firefox ist. Für die Bearbeitung der Seite mit Editland holt man sich statt dessen den MSIE 5.5 oder Höher für PC in seinen Firefox:
IE-Tab und dann klappt’s auch mit dem Firefox. :harr:
In wie weit man dann einen PC-Bubble auf dem Mac oder Linux mit einer IE5.5 oder Höher für PC in den Firefox holen kann, da bin ich überfragt. Das wissen die Macianer bzw. Linuxler besser. Aber immerhin müssen die Firefox-Fans der PC-Fraktion ihren geliebten Browser zur Bearbeitung nicht extra verlassen. Geht schneller und bequemer und eines ist Editland nun mal: ein bequemes, einfaches und schnelles Werkzeug um klassische Businesssites aktuell zu halten.
 


Editland als Webdesigner kennenlernen
Silke Schümann — Sun, 11 Mar 2007 00:52:57 +0000
Übersichtlicher und einfacher als den totalen Supercrashkurs mit allen Templates und Templateausgaben ist, sich mit Editland und der Templateerstellung vertraut zu machen, wenn man die Doku liest und erst einmal selbst mit einem einfachen Template etwas spielt:





###---SITETITEL---###




###---CONTENT1---###
###---LISTMENU---###



Quelle: Templaterie Handbuch — Wie erstellt man für Editland ein barrierearmes Template?
Zugegeben … der Titel der Seite ist etwas gewagt, zum Barrierearm gehört noch ein wenig mehr, aber für ein CMS, wenn auch nur ein MiniCMS, ist das schon gar nicht schlecht.
 


Der erste Tag mit Editland
Silke Schümann — Sun, 11 Mar 2007 00:28:42 +0000
Editland kennenlernen für lesefaule. Wer lesefaul ist, kann Editland auch einfach einmal durchklicken und in den Quelltext schauen. Unglücklicher Weise sind in dem aktuellen Paket nur Templates der ersten Generation.
Editland hat derzeit drei Menuvarianten zu bieten, zu jedem gibt es einen Platzhalter:

###---MENU---###
###---LISTMENU---###
###---MENUPART1---###
###---MENUPART2---###
###---MENUPART3---###
###---MENUPART4---###

Je nach Platzhalter findet man unterschiedlichen Queltext vor. Mein Favorit ist XHTML und die Menüvarianten 2 und 3. In der ersten Generation musste man sich die Liste noch selbst basteln und wurde dabei ein paar Blidgifs nicht los.
Ca. ein halbes Jahr nachdem ich das erste Mal Editland in den Händen hatte änderte sich die Situation, man konnte mit LISTMENU selbst die Grafik via mensettings.php deaktivieren. Mein Mensetting sah seitdem so aus:


$men_yhight = "";
$men_xwidth = "";
$men_xwidth_2 = "";
$men_start = "";
$men_start_1 = "";
$men_start_2 = "";
$men_active = "";
$men_seperator = "";
$men_end_1 = "";
$men_end_2 = "";
$men_end = "";
?>

Wenn man das erste Mal mit Editland arbeitet, will man aber vielleicht wissen, was passiert. Auf den folgenden Seiten sind ein paar präparierte Templates und der Quelltext der erzeugten HTML-Seiten.
Erst einmal das Template index.html, CSS und die mensettings.php … (Achtugn Beitrag in Überlänge und grausam viel Quelltext   )
Die Platzhalter (am Besten erhalten Platzhalter immer eine eigene Zeile für sich.) im HMTL-Template sind mit Kommentaren umschlossen. Zwischen den Kommentaren kann beliebiger gültiger HTML-Quelltext stehen.



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 


 
###---SITETITEL---###
 


 

 

 

 

###---STATICCONTENT---###

 

###---CONTENT1---###

 

###---LISTMENU---###

 

###---STATICCONTENT2---###

 



Das folgende CSS enthält alle Formate, die in Editland-Templates gewöhnlich vorkommen können, ohne dass ihre eigenen Formate wie Tabellendesigns oder ein Trick17 berücksichtigt wäre:

html	{}
body	{}
 
p	{}
h1	{}
h2	{}
h3	{}
h4	{}
h5	{}
h6	{}
ul	{}
ol	{}
 
span 		{}
blockquote	{}
strong		{}
em			{}
u			{}
hr			{}
 
.tsmall  {}
.tmiddle {}
.tbig    {}
 
a         {}
a:link    {}
a:visited {}
a:active  {}
a:hover   {}
 
ul#listmenu0			{}
ul#listmenu0 li			{}
 
ul#listmenu0 a			{}
ul#listmenu0 a:link		{}
ul#listmenu0 a:visited	{}
ul#listmenu0 a:active	{}
ul#listmenu0 a:hover	{}
ul#listmenu0 span		{}
 
ul#listmenu1			{}
ul#listmenu1 li			{}
 
ul#listmenu1 a			{}
ul#listmenu1 a:link		{}
ul#listmenu1 a:visited	{}
ul#listmenu1 a:active	{}
ul#listmenu1 a:hover	{}
ul#listmenu1 span		{}
 
ul#listmenu2			{}
ul#listmenu2 li			{}
 
ul#listmenu2 a			{}
ul#listmenu2 a:link		{}
ul#listmenu2 a:visited	{}
ul#listmenu2 a:active	{}
ul#listmenu2 a:hover	{}
ul#listmenu2 span		{}
 
ul#listmenu3			{}
ul#listmenu3 li			{}
 
ul#listmenu3 a			{}
ul#listmenu3 a:link		{}
ul#listmenu3 a:visited	{}
ul#listmenu3 a:active	{}
ul#listmenu3 a:hover	{}
ul#listmenu3 span		{}
 
ul#listmenu4			{}
ul#listmenu4 li			{}
 
ul#listmenu4 a			{}
ul#listmenu4 a:link		{}
ul#listmenu4 a:visited	{}
ul#listmenu4 a:active	{}
ul#listmenu4 a:hover	{}
ul#listmenu4 span		{}
 
span.active	{}
a.active	{}
 
#lmactive0 {}
#lmactive1 {}
#lmactive2 {}
#lmactive3 {}
#lmactive4 {}
 
/* LISTMENU */
ul#listmenu0 ul		{}
ul#listmenu0 ul	ul	{}
/* etc. */
 
/* MENU */
a.menu {}
 
form#xmailer            {}
#xmailer label          {}
#xmailer input          {}
#xmailer textarea       {}
#xmailer input:focus    {}
#xmailer textarea:focus {}
#xmailer div.radios     {}
#xmailer input.radio    {}
#xmailer .radios p      {}
#xmailer .radios label  {}
#xmailer input.button   {}

Die Mensettings wurde mit Kommentaren ausgestattet, die Sie im Quelltext wiederfinden:


$men_yhight = "12";
$men_xwidth = "10";
$men_xwidth_2 = "1";
$men_start = "";
$men_start_1 = "";
$men_start_2 = "";
$men_active = " ";
$men_seperator = " 
";
$men_end_1 = "";
$men_end_2 = "";
$men_end = "";
?>

Auf der folgenden Seite ist das Kontaktformular, wie man es in der Templaterie herunterladen kann. Das Editland-eigene Formular hat mir zuwenig Möglichkeiten es zu manipulieren und nach meinen Wünschen zu gestalten. (Wie heißt es doch … keine Regel ohne Ausnahme):
Kontaktformular in Editland
Das Kontaktformular wird gewöhnlich über die Url eingebunden ?c=mailer&s=kontakt, so dass der Platzhalter ###---CONTENT1---### statt durch einen Textbaustein durch das Formular im Ordner plugins/mailer/ ersetzt wird.



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 


 
###---SITETITEL---###
 


 

 

 

 

###---STATICCONTENT---###

 

###---CONTENT1---###

 
 

###---LISTMENU---###

 
 



Und das kommt beim Kontaktformular-Template heraus:



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Überschrift 1. Ordnung (H1)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lectus quam, porta varius, faucibus semper, eleifend a, orci. Nullam pretium. Curabitur vitae tortor. Maecenas convallis ipsum sit amet erat. In hac habitasse platea dictumst. In non est sit amet orci suscipit mollis. Curabitur sed lectus quis libero tempus gravida. Sed id pede. Maecenas ut eros et eros posuere molestie. Aliquam erat volutpat. Mauris vulputate, diam imperdiet feugiat scelerisque, orci nisl luctus arcu, quis tristique leo odio consectetuer neque. Proin felis. Ut hendrerit, ligula vitae cursus ultrices, dui purus pharetra nisi, ac semper metus sapien eget purus. Sed dui. Aliquam erat volutpat. Pellentesque sem lorem, varius ac, consequat in, cursus a, nisl. Proin rutrum enim non augue.

Name: 
E-Mail:  * bitte angeben!
Telefon: 
Text:

Ich ersuche um eine Antwort
Per E-Mail
Per Telefon




 


Startseite 
Menu Ebene 1
Listenmenu Ebene 1
Menupart Ebene 1
Kontaktformular


 

Hier ist der Inhalt statischer Textblock 17!




Zunächst einmal das Menü mit Blindgifs, das man über die mensettings.php entweder über ein Formular in Backadmin-Bereich verändern kann oder durch die Kopie der mensettings.php im Template-Ordner, wie z.B. im canvasstyle/
Editland-Menu der ersten Generation



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 


 
###---SITETITEL---###
 


 

 

 

 

###---STATICCONTENT---###

 

###---CONTENT1---###


###---CONTENT2---###

 

###---MENU---###

 

###---STATICCONTENT---###

 
 



Und das kommt bei diesem Template heraus:



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 


Startseite 

Menu Ebene 1  

  Menu Ebene 2

 
Listenmenu Ebene 1 

Menupart Ebene 1 

Kontaktformular 



 

Hier ist der Inhalt statischer Textblock 16!







"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 

Startseite 

Menu Ebene 1 

  Menu Ebene 2 

    Menu Ebene 3

 
Listenmenu Ebene 1 

Menupart Ebene 1 

Kontaktformular 



 

Hier ist der Inhalt statischer Textblock 16!







"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 

Startseite 

Menu Ebene 1 

  Menu Ebene 2

    Menu Ebene 3 

      Menu Ebene 4

 
Listenmenu Ebene 1 

Menupart Ebene 1 

Kontaktformular 



 

Hier ist der Inhalt statischer Textblock 16!







"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 

Startseite 

Menu Ebene 1 

  Menu Ebene 2

    Menu Ebene 3

      Menu Ebene 4 

 
Listenmenu Ebene 1 

Menupart Ebene 1 

Kontaktformular 


 


Hier ist der Inhalt statischer Textblock 16!




Auf der nächsten Seite kommt nun das Listenmenu …
Templates mit dem Listenmenu
Hier fängt es an für alle interessant zu werden, die Layout und Struktur strikt trennen und XHTML 1.0 strict verwenden wollen.



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 


###---SITETITEL---###




 

 

###---STATICCONTENT---###

 

###---CONTENT1---###


###---CONTENT2---###

 

###---LISTMENU---###

 

###---STATICCONTENT---###

 



Und das kommt bei diesem Template heraus:



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 

Startseite
Menu Ebene 1
Listenmenu Ebene 1 

Listenmenu Ebene 2

Menupart Ebene 1
Kontaktformular


 

Hier ist der Inhalt statischer Textblock 16!







"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 

Startseite
Menu Ebene 1
Listenmenu Ebene 1

Listenmenu Ebene 2 

Listenmenu Ebene 3


Menupart Ebene 1
Kontaktformular


 

Hier ist der Inhalt statischer Textblock 16!







"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 

Startseite
Menu Ebene 1
Listenmenu Ebene 1

Listenmenu Ebene 2

Listenmenu Ebene 3 

Listenmenu Ebene 4



Menupart Ebene 1
Kontaktformular


 

Hier ist der Inhalt statischer Textblock 16!







"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 

Startseite
Menu Ebene 1
Listenmenu Ebene 1

Listenmenu Ebene 2

Listenmenu Ebene 3

Listenmenu Ebene 4 



Menupart Ebene 1
Kontaktformular


 

Hier ist der Inhalt statischer Textblock 16!




Will man eine horizontale und eine vertikale Navigationsleite kombinieren, so verwendet man das Platzhlaterset Menupart.
Das Menuset menupart in vier Teilen



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 


###---SITETITEL---###






###---STATICCONTENT---###

 

###---CONTENT1---###


###---CONTENT2---###

 

###---MENUPART1---###


###---MENUPART2---###


###---MENUPART3---###


###---MENUPART4---###

 

###---STATICCONTENT---###

 



Und das kommt bei diesem Template heraus:



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 

Startseite
Menu Ebene 1
Listenmenu Ebene 1
Menupart Ebene 1 
Kontaktformular


 


Menupart Ebene 2


 




 

Hier ist der Inhalt statischer Textblock 16!







"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 


Startseite
Menu Ebene 1
Listenmenu Ebene 1
Menupart Ebene 1
Kontaktformular


 


Menupart Ebene 2 


 


Menupart Ebene 3


 


 

Hier ist der Inhalt statischer Textblock 16!







"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 


Startseite
Menu Ebene 1
Listenmenu Ebene 1
Menupart Ebene 1
Kontaktformular


 


Menupart Ebene 2


 


Menupart Ebene 3 


 


Menupart Ebene 4


 

Hier ist der Inhalt statischer Textblock 16!







"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Editlandinstallation






Hier ist der Inhalt statischer Textblock 16!

 

Hier ist der Inhalt Textblock 1!


Hier ist der Inhalt Textblock 2!

 


Startseite
Menu Ebene 1
Listenmenu Ebene 1
Menupart Ebene 1
Kontaktformular


 


Menupart Ebene 2


 


Menupart Ebene 3


 


Menupart Ebene 4 


 

Hier ist der Inhalt statischer Textblock 16!




Schließlich  noch zwei Template aus der freien Wildbahn. Ein Tabellenlayout und ein tabellenloses Layout in HTML
Basis für ein Tabellenlayout




###---SITETITEL---###



 


















 









###---MENU---###
 
###---CONTENT1---###

 











###---CONTENT2---###




















Und das wurde aus diesem Gerüst: Canvasstyle
Quelle und mehr Beispiele: 

Basis für tabellenloses Layout




Seitentitel










 





 




 
###---CONTENT1---###




###---MENUPART1---###
###---MENUPART2---###
###---MENUPART3---###
###---MENUPART4---###

 



###---STATICCONTENT3---###





###---STATICCONTENT---###

71522-2006-tc0050 Impressum |





Und das wurde aus diesem Gerüst: Installationmit Triptichon und das Template: TC-0050 A
Quelle und mehr Beispiele: Templaterie Demoprovinzen
Der Rest ist CSS und Kreativität.
 


Flüchtiger Blick in die FF-Extension Firebug
Silke Schümann — Sat, 10 Mar 2007 12:04:35 +0000
Mathias Bank programmiert viel und professionell. Das heißt prüfen seiner Skripte ist sein täglich Brot. Ich dagegen Programmiere noch äußerst ungern und die Skripte für den Hausgebrauch sind noch schlicht meist einfach und schnell getestet. Ein wenig Improvisation beim Test bringt mich ebenso gut ans Ziel. Aber so einen Tipp für die Testumgebung vom Profi schlägt man nicht aus. Für meinen favorisierten Client PHP 4.3 ist es noch für die PHP-Prüfung ungeeignet.  Dort müsste ich noch JSON installieren und das ist es mir im Augenblick nicht wert. Zuviel Heckmeck.
Aber den Firebug zog ich mir und schaute rein.

Meine letzte Arbeit damit einmal angesehen. Ohoh! Was der Firebug hier durchstreicht, hat absolut seinen Sinn und sollte nicht gestrichen sprich gelöscht werden.
Ich würde sagen, auch der Firebug ist nur so gut wie der Profi, der ihn nutzt. Es ist kein Amateur-Tool, das einem das Lernen der Zusammenhänge erspart.   
Insgesamt ist der Firebug allerdings ein schönes Werzeug um sich in Webskripts und Seitenbeschreibungen zu orientieren und vermutlich für die Suche nach Fehlern mehr als hilfreich. Danke, Mathias.
 


Flash wertet ihre Website auf :-)
Silke Schümann — Tue, 27 Feb 2007 13:46:54 +0000

  

Flash wird nachgesagt, dass es die Website aufwertet. Das stimmt nur bedingt. Mein favorisierter Browser der Firefox hat recht große Probleme mit Flash und wer viel im Web unterwegs ist, kann mit Flash meist wenig anfangen. In den meisten Fällen nerven Flash inhalte nur. Doch dies mag nur meine persönliche Meinung sein. ch habe keine Studie gemacht. Auch wenn mein Echochamber hier mir recht geben wird. Wenn ich die kleine Webslideshow in diesem Beitrag sehe, dann ist das nur ein Button mit einem F, das mir verrät, dass hier ein Flash ist, doch die Slideshow wird nicht gestartet, oder auch nur ein Bild gezeigt, damit der Firefox nicht meinen Rechner in die Knie zwingt. Siehe Beitrag von Wurstbrot im Strohhalm: Ressourcen-Verbrauch im FF
Wer nun immer noch unbedingt ein Flashfilmchen auf der Site haben möchte und den ein wenig Promotion am Ende der Slideshow für den Anbieter stört (oder man erwirbt die ca. $30 günstige Professional Version) , kann das sehr einfach über Slideshow-Maker von AVsoft hinbekommen.   Man kann aus einer ganzen Reihe von Effekten und Voreinstellungen wählen.
Das Ergebnis hier im Beitrag für den Test, der meine Neugier stillte, zeigt Arbeiten (Entwürfe) der letzten Wochen.
Apropos: Weniger Effekte zur Auswahl aber einem etwas unauffälligeren Promotion-Zwang, mit mehr Handarbeit … etc. Flash-Slideshow mit Fade-Effekt