Gefiltert nach Kategorie Webentwicklung Filter zurücksetzen

Screenshot Typtester.org
Screenshot Typtester.org

Typografie ist ja im www immer so eine Sache: die Möglichkeiten sind wirklich begrenzt und der Kunde trotzdem oft anspruchsvoll. Für gewöhnlich eine Gradwanderung zwischen Machbarkeit und Ästhetik.

Typetester hilft sich für die richtige Typo zu entscheiden indem es das Vergleichen stark vereinfacht. In drei Spalten kann man live und mit allen Möglichkeiten die einem HTML zur Verfügung stellt an den Fonts herumspielen bis man das perfekte Schriftbild gefunden hat.


sifr3 geht noch einen Schritt weiter. Es ersetzt (absolut Suchmaschinen freundlich!) bestimmte HTML Tags mit einem kleinen Flashfilm - in der eine gewünschte Schriftart angezeigt wird. Hört sich einfach und genial an - ist es auch!

 

Sogar Schlagschatten und ähnliche Efrfekte sind ohne weiteres möglich - sofern mind. Adobe Flash 8 auf dem Client installiert ist. Funkioniert in allen halbwegs anständigen Browsern (IE6+, FF2+, Opera, etc.) und benötigt JavaScript und Flash.

 

http://www.typetester.org

© TYPO3 Association, typo.org

Habs geschafft das bisschen vom 6. Semester hochzuladen. 

Im Prinzip ist das aber ohnhin nur das bereits präsentierte WP Foto Projekt "Konzertfotografie Unleashed Emotions" und unsere (Adrian Damm und ich) Arbeit für Dokumentverwaltung im Internet. 

 

Hierbei haben wir eine Anleitung (anhand einer Webseite) geschrieben mit Hilfe dessen das einbinden von RealUrl für Typo3 keine Schwierigkeiten bereiten sollte.

 

Das 5. Semester mit einigen mehr Sachen muss ich noch mehr Vorbereiten...

Unser FH Projekt Fotografie ist fertig!

 

 

Unser Projekt stand unter dem Namen UNLEASHEDEmotions. Die Idee war nicht nur die Bands vom Mach1 Festival 2008, sondern auch das Publikum, eben dessen Emotionen, abzulichten. Außerdem ist diese Seite auch eine Art HowTo zum Thema Konzertfotografie.

Das Projekt enstand im Rahmen unseres Fotokurses an der Fh Friedberg bei Herrn Schmidt.

 

Angefertigt wurden die Fotos, sowie diese Webseite Mattias Rosenthal und von mir.

 

Du findest auf der Webseite:

  • die üblichen Konzertfotos
  • Bilder aus dem Pogo / Pit und am Graben
  • Alle Bilder mit kompletten Exif Daten (Belichtungszeit, Blende, ...)
  • Tips und Tricks zu Konzertfotografie
  • misslugende Bilder + Erläuterung was schief lief
  • Info's zu unserer Ausrüstung
  • Hinweise zur Nachbearbeitung

 

Konzertfotografie auf dem Mach1 Festial

Ein leidiges Thema...

Viele moderne Design lassen sich nur per PNG Dateien schön umsetzen. Machmal komm man eben kaum drum herum. An sich ja kein Problem, jeder anständige Browser kann das ohne das man ein Wort darüber verlieren müsste.

Gebe es nicht den IE.

Der MS IE ist leider nicht in der Lage von sich aus PNG's mit korrekter Transparenz anzuzeigen. Für gewöhnlich zeigt er einfach nur einen hellen Hintergrund an.

Browser

  • MS IE 5.5
  • MS IE 6

 

Der IE 7 hat nun endlich eine native Unterstützung für PNG's.

Wie geht das denn?

Mit Hilfe von sog. CSS Hacks, die nur vom MS Internet Explorer umgesetzt werden.

Mit diesen Hacks steuern wir, die nur im Internet Explorer verfügbaren, Filtereigenschaften ein. Einmal direkt, einmal per Script. Dieser Filter arbeitet im Fall der direkt eingebundenen Bildern mit einem kleinen Behavior und einer transparenten gif Grafik (die auch der IE transparent darstellen kann) die zum rendern der eigentlichen png Grafik genutzt wird. Alle bnötigten Dateien sind in der zip Datei enthalten.

Ich bevorzuge die reine CSS Variante, die aber nur mit Hintergrundbildern funktioniert. Dafür benötigt sie keine weiteren Dateien (reines CSS), die oft Probleme mit den Pfaden bereiten.

 

PNG Transparenz im IE

Jeder kennt die Favicons in den Browserleisten und dern Bookmarks. Sie dienen der besseren Auffindbarkeit und dem steigern des Wiedererkennungswert.

 

Eben diesen Effekt kann man steigern in dem man ein animiertes Favicon benutzt.ie man das macht möchte ich hier erklären - das ganze auf Bitte von Angie.

Beispiel

siehe die Browser-Adressleiste dieser Seite wenn du einen nicht Mircosoft Internet Explorer benutzt. Meines Wissens geht das in allen modernen Browsern, soll heissen Opera, Konquoror, Netscape, Mozilla und seine Freunde (z.B. FireFox)

<div>

How To

</div>

Da Typo3 eine Browsererkennung mitliefert ist das an sich ganz einfach. Nur das ich nichts zum Thema gefunden habe. Also hab ich mich entschlossen selbst ein Tutorial zu schreiben.

 

Folgenden Code muss man einfach nur in das Haupttemplate einbinden und schon läuft das ganze...

[browser = msie]
	page.headerData {
		20 = TEXT
		20.value = <link rel="shortcut icon" href="fileadmin/templates/favicon.ico" type="image/x-icon" />
	}
[else]
	page.headerData {
		20 = TEXT
		20.value = <link rel="icon" href="fileadmin/templates/favicon.gif" type="image/gif" />
	}
[global]

Jeder kennt die Favicons in den Browserleisten und dern Bookmarks. Sie dienen der besseren Auffindbarkeit und dem steigern des Wiedererkennungswert.

 

Eben diesen Effekt kann man steigern in dem man ein animiertes Favicon benutzt.ie man das macht möchte ich hier erklären - das ganze auf Bitte von Angie.

Beispiel

siehe die Browser-Adressleiste dieser Seite wenn du einen nicht Mircosoft Internet Explorer benutzt. Meines Wissens geht das in allen modernen Browsern, soll heissen Opera, Konquoror, Netscape, Mozilla und seine Freunde (z.B. FireFox)

Wie gehts?

Diesen PHP Code einach innerhalb des head einbinden.

Das animierte Bild ist ein einfaches animiertes gif. Um ein animierts gif zu gibts es verschiedene Möglichkeiten: Photoshop, Flash und sehr viele andere Programme. Am End einfach mal googlen!

Der php Code ist nötig um auszuschließen das beide angezeigt werden. Wenn man einfach hingeht und beide link tags angibt, stellen auch moderne Browser nur das normale Favicon dar.

<?
if(strchr($HTTP_USER_AGENT, MSIE)) {
	echo '<link rel="shortcut icon" href="favicon.ico">';
else {
	echo '<link rel="shortcut icon" href="favicon.gif">';
}
?>