Artikel-Schlagworte: „html“

CSS mit Particular Attributes (Elemente mit “besonderer” Eigenschaft)

Freitag, 6. Juni 2008

Was sind eigentlich Particular Attributes? Darunter versteht man Attribute in einer Webseite, die spezielle Werte aufweist. Es ist eine unbekanntere Form bei der CSS-Formatierung, da wesentliche Bestandteile auch erst mit CSS 3 vollständig unterstützt werden. Die nahmhaften Browser ab Internet Explorer 7, sowie Firefox, Opera und Safari beherrschen diese Funktion allerdings schon vollständig.

Folgende Formen der Particular Attributes gibt es:

1. Attribute mit Wert

Element[Attribute]
Das Element enthält ein Attribute mit einem Wert.

  1. <!– Beispiel - der Link, der das Attribute href enthält bekommt einen grünen Rahmen –>
  2. <style>
  3.   #test1 a{border:1px solid red;padding:5px}
  4.   #test1 a[href]{border:1px solid green}
  5. </style>
  6. <div id="test1"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS ebenfalls zutreffend)</a></div>
  7. <a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt">Pyades</a>

2. Attribute mit bestimmten Wert

Element[Attribute="Wert"]
Das Element enthält ein Attribute mit einem bestimmten Wert.

  1. <!– Beispiel - der Link, der als href genau den Wert "http://www.pyades.com" hat, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test2 a{border:1px solid red;padding:5px}
  4.   #test2 a[href="http://www.pyades.com"]{border:1px solid green}
  5. </style>
  6. <div id="test2"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS greift nicht)</a></div>

3. Attribute beginnt mit einem bestimmten Wert

Element[Attribute^="Wert"]
Das Element enthält ein Attribute, welches mit einem bestimmten Wert beginnt.

  1. <!– Beispiel - der Link, der als href mit dem Wert "http://" beginnt, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test3 a{border:1px solid red;padding:5px}
  4.   #test3 a[href^="http://"]{border:1px solid green}
  5. </style>
  6. <div id="test3"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS ebenfalls zutreffend)</a></div>

4. Attribute endet mit einem bestimmten Wert

Element[Attribute$="Wert"]
Das Element enthält ein Attribute, welches mit einem bestimmten Wert endet.

  1. <!– Beispiel - der Link, der als href mit dem Wert ".com" endet, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test4 a{border:1px solid red;padding:5px}
  4.   #test4 a[href$=".com"]{border:1px solid green}
  5. </style>
  6. <div id="test4"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS ebenfalls zutreffend)</a></div>

5. Attribute enthält einen bestimmten Wert

Element[Attribute*="Wert"]
Das Element enthält ein Attribute, welches einem bestimmten Wert enthält.

  1. <!– Beispiel - der Link, der als href den Wert "pyades" enthält, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test5 a{border:1px solid red;padding:5px}
  4.   #test5 a[href*="pyades"]{border:1px solid green}
  5. </style>
  6. <div id="test5"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank" >Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS greift nicht)</a></div>

6. Sonstige Attribute

Es gibt noch zwei weitere Particular Attributes, auf die ich allerdings nur am Rande eingehen möchte:
~= ist ein Wert, aus einer durch Leerzeichen getrennte Liste: “Wert1 Wert2 Wert3″ und
|= ist ein Wert, aus einer durch | getrennten Liste: “Wert1|Wert2|Wert3″

7. Bekannteste Anwendung

Die bekannteste Anwendung ist die Kennzeichnung von externen Links.

  1. <style>
  2.   #test6 a[href^="http://"]{background:url(/examples/offsite.gif) no-repeat scroll right center;padding-right:8px;}
  3.   #test6 a[href^="http://www.pyades.com"]{background:transparent;padding-right:0px;}
  4. </style>
  5. <div id="test6"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (interner Link)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (externer Link)</a></div>

Seiten, wie Wikipedia oder Dr. Web nutzen diese Technik bereits seit einiger Zeit.

Vielleicht darf ich Sie einmal bei einer innovativen Webentwicklung oder besonderem Webdesign helfen? Wenn Sie weitere Fragen haben, würde ich mich über Ihren Anruf freuen. Sie erreichen mich natürlich auch per eMail. Ich nehme mir sehr gerne ein wenig Zeit für Ihre Fragen.

Florian Becker
–
Pyades Technologies GmbH
Römerstr. 4 L
55232 Alzey

Tel: +49 (0) 67 31.998 78 66
Mob: +49 (0) 163.680 35 64
Fax: +49 (0) 67 31.998 78 67

Webseite: www.pyades.com

Amtsgericht: Mainz HRB 41299
Geschäftsführer: Florian Becker

Schlagworte:, , , , , , , , , , , , , , , , ,
Veröffentlicht in css, html | Keine Kommentare »

Bilder in Thunderbird einbetten

Samstag, 24. Mai 2008

Als Empfänger gestalteter eMails mit grafischen Inhalten kennen wir das. Die verwendeten Bilder werden über das Internet nachgeladen (und häufig gesperrt, oder es ist eine weitere Erlaubnis zu erteilen) oder man sieht die Bilder im Anhang, wie sie sich mit anderen Anhängen vermischen und somit störend sind.

In beinahe jedem eMail-Client ist es aber möglich, Bilder so in den Text zu integrieren. Man nennt das auch einbetten oder embedden, wie man das im Englischen bezeichnet.

Die Prozedur ist so einfach und besticht doch durch einen so großen Effekt. Gerade einmal zwei wichtige Punkte sind bei Mozilla Thunderbird zu beachten, um Bilder in eine eMail einzubinden. Einfach in vier Schritten erklärt ergibt sich folgendes:

1. Schritt - Neue eMail schreiben

Starten Sie das Schreiben einer neuer eMail.

2. Schritt - Bild als HTML einfügen

An der aktuellen Textstelle wird ein Bild eingefügt.

3. Schritt - Option “Dieses Bild an die Nachricht anhängen” auswählen

Bitte vergewissern Sie sich, dass Sie die Option “Dieses Bild an die Nachricht anhängen” ausgewählt haben. Sollte das Bild nicht mitgeliefert werden, oder der Empfänger keine HTML-Ansicht haben, wird der Alternativtext angezeigt.

4. Schritt - Überprüfen, ob die eMail auch wirklich als HTML-eMail verschickt wird

Mit der Auswahl des Formates können wir nun die Erstellung der eMail abschließen. Beim Versenden und Testen werden Sie feststellen, dass wir ein Bild in die eMail eingebettet haben. Es ist nicht als Anhang sichtbar.

Multimediale Anhänge wie Flash, oder Musikdateien (oder alle anderen Attachments) zu embedden ist generell möglich. Durch bestimmte Einschränkungen, wie das Nichtvorhandensein eines Flashplayers oder eines Musikplayers ist es jedoch eine eher nicht sinnvolle Methode. Außerdem wird Sie von fast keinem eMail-Client unterstützt. Eine Lösung über eine externe, nachzuladene Webseite trifft es hier besser. Es ist oft die Frage, was genau man erreichen möchte.

Wenn Sie weitere Fragen in Bezug auf das Versenden von speziellen eMails haben, stehe ich Ihnen natürlich gerne als Ansprechpartner zur Verfügung. Ich freue mich, wenn Sie mit mir Kontakt aufnehmen, gerne auch via eMail. Vielleicht kann ich Ihnen ja auch den Wunsch erfüllen eine Information zu Mac Mail mit oder nicht mit eingebetteten Bildern zu verwenden.

Florian Becker
–
Pyades Technologies GmbH
Römerstr. 4 L
55232 Alzey

Tel: +49 (0) 67 31.998 78 66
Mob: +49 (0) 163.680 35 64
Fax: +49 (0) 67 31.998 78 67

Webseite: www.pyades.com

Amtsgericht: Mainz HRB 41299
Geschäftsführer: Florian Becker

Schlagworte:, , , , , , , , , , , , , , , , , ,
Veröffentlicht in email, html, thunderbird | Keine Kommentare »

PHP MimeMail mit eingebetteten Bildern versenden

Mittwoch, 9. April 2008

In geschäftlichen Signaturen werden gerne Firmenlogos oder sogar das persönliche Foto mitversandt. Oft findet man das Bild dann im Anhang und nicht innerhalb des Textes, aber als weitaus wichtigere Anwendungsmöglichkeit, kann die MimeMail Klasse in einem Newsletter System eingebunden werden. Für die Bearbeitung steht dann ein Feld, für eine Textnachricht, und eines für eine HTML-Nachricht zur Verfügung. Als letztes werden alle nötigen Bilder entsprechend eingebettet. Dazu ist es abschließend noch möglich, wirkliche Anhänge der eMail anzufügen und dann an beliebig viele Empfänger zu versenden.

Folgende Vorteile bietet die PHP MimeMail Klasse:

  • Versenden einer textbasierten eMail
  • Versenden einer HTML-basierten eMail
  • Einbetten von Bildern
  • Weitere sonstige Anhänge
  • Alle diese Funktionen auch kombiniert
  • Kopfinformationen können manipuliert bzw. ergänzt werden
  • Priorität einer eMail setzen

Die wohl größten Vorteile bestehen darin, dass ein nicht HTML-fähiger MailClient nur die Textvariante anzeigt, dass in HTML-eMails alle Dateien eingebettet sind und nicht extern von einem evtl. blockierten Server nachgeladen werden müssen. Mit den gängigsten eMail-Programmen wurde das Script getestet, unter anderem Mozilla Thunderbird, Opera Mail, Microsoft Outlook, Microsoft Mail, KMail, Mac Mail.

Hier möchte ich Ihnen noch zeigen, wie einfach eine Implementierung ist. Bereits wenige Zeilen Quelltext reichen aus, um die Klasse zu verwenden:

  1. /* neue MimeMail erstellen */
  2. $mime = new MimeMail();
  3. /* Absender der eMail setzen */
  4. $mime -> setSender( "$name <$email>" );
  5. /* Empfänger der eMail setzen */
  6. $mime -> setRecipient( "$name <$email>" );
  7. /* Betreff setzen */
  8. $mime -> setSubject( $subject );
  9. /* Evtl. noch einen neuen Header hinzufügen */
  10. $mime -> addHeader( "Organization", "Pyades Technologies GmbH" );
  11. /* Priorität der eMail setzen */
  12. $mime -> setPriority( "3" );
  13. /* HTML-Bereich setzen */
  14. $mime -> setHtml( $html );
  15. /* eingebettete Dateien hinzufügen - durch die <img src="cid:file1@pyades.com"/> werden die korrekten Bilder zugewiesen - die IDs sind fortlaufend */
  16. $mime -> addEmbeddedAttachement( $file, $mimetype );
  17. /* Einfachen Textbereich setzen */
  18. $mime -> setPlain( $plain );
  19. /* weitere Attachments hinzufügen */
  20. $mime -> addAttachment( $file, $mimetype );
  21. /* Die eMail verschicken */
  22. $mime -> sendMimeMail();

Außerdem finden Sie eine genauere Beschreibung der Funktionen in der Datei.

Download: /examples/mimemail.zip (2 KB)

Bei Fragen zu einem Newslettersystem oder zu der beschriebenen Klasse freue ich mich über Ihren Anruf und natürlich auch Ihre eMail.

Florian Becker
–
Pyades Technologies GmbH
Römerstr. 4 L
55232 Alzey

Tel: +49 (0) 67 31.998 78 66
Mob: +49 (0) 163.680 35 64
Fax: +49 (0) 67 31.998 78 67

Webseite: www.pyades.com

Amtsgericht: Mainz HRB 41299
Geschäftsführer: Florian Becker

Schlagworte:, , , , , , , , , , , , , , , ,
Veröffentlicht in email, php | Keine Kommentare »