UNICEF Deutschland Relaunch

Hallo zusammen, habe gerade erst gesehen, dass es wieder einige Posts hier gibt ... Komisch, meine Mailbenachrichtigung hat gar nicht funktioniert ... 😢
Aber egal.

Also zum Server: Der steht jetzt nicht bei uns (i-gelb) sondern bei einem Provider in Köln. Deshalb kann ich jetzt nicht zu sehr ins Detail gehen. Aber es war so, dass ab dem 26. Dezember die Besucherraten auf bis zu 700 gleichzeitigen Besuchern ( ca. 10.000 Visits am Tag) hochging und da war echt Sense mit dem Server. Unsere Erfahrung hat gezeigt, dass ein Server mit 2 Ghz Celeron und 2GB Ram bei über 150 gleichzeitigen Besuchern schon echte Probleme bekommt.

Das klingt zwar nicht viel, aber man muss überlegen, das da wirklich für jeden gleichzeitigen Besucher ein eigener Prozess für Apache und Mysl gebraucht wird und die nehmen eben jeder einige MB in Anspruch. Brauch man also nur zu rechnen, wann die Maschine anfängt zu "swappen". und dann ist Schluss mit Tempo. Ausserdem heisst "gleichzeitige" User ja auch, dass da im Schnitt die zehnfache Menge in Wartestellung steht, um die Seite "serviert" zu bekommen. (Das hat mir der Provider gesagt ... Scheint ne Faustregel zu sein !?)

Ich bin jetzt kein Netzwerkadmin, ich habe "nur" die UNICEF Seite in Typo3 programmiert, deshalb kann ich auch nicht genau sagen, was Software- und was Hardwareoptimierungen versprechen (ZendOptimizer, MySQL > 4 mit SQL-Caching ...). Aber besser mehr als weniger #giggle#

Ansonsten, nun steht da ein neuer Server, Dual Xeon, 4GB Ram ... damit lübbts nun. Allerdings sind die Besucherraten nun auch entspannter ..

Grüzli an alle
Julian

Hallo Sappalapepette

Wie habt ihr es auf unicef.de geschafft, das wenn das Bild zum vergrössern ist, das unten Rechts eine Lupe mit mouseover erscheint? Danke für jeden Tip! Versuche etwas ähnliches zu Realisieren...

ja,

mich würde es auch interessieren!

Auch von mir ein Megalob und absolute Anerkennung. Was Ihr da geleistet habt
stellt wirklich alles in den Schatten.

Ich hatte nun etwas mehr Zeit mir mal
die Seite genauer anzuschauen, dabei
sind mir einige Dinge sehr positiv
aufgefallen:

sehr schön balanciertes Flash links

abgerundete Kanten, macht sich sehr gut

Die Lupe bei den Bildern - Respekt,
da kämpfe auch ich noch damit.

was mir erst nach genauem Betrachten auffiel ist erstaunlich...

Schattierung der weissen Teilbereiche,

Subnavigation mit der grauen Fläche
sehr schön zum Hauptmenüpunkt zuordnungsfähig,

rechts oben erscheint der Navigationstitel
als Flash-Animation mit dynamischer Wertübergabe (?)(!!!)-WOW

Schatten bei Bildern im JS-Popup - genial

Absolut geniale Seite.

Noch ein - zwei Dinge die mir aufgefallen sind, die man bei Bedarf noch nachbessern
könnte:

Gestern waren in den News rechts die Zeilenumbrüche nicht sauber, ein Teil des Textes wurde einfach abgeschnitten.

Der Menühintergrund (Hauptmenü) kommt mir bekannt vor... ;-)

Das Menü hat bei mir (IE6) noch ein klein
wenig Versatz auf der linken Seite,
ich kenne aber das Problem 😉
und habe es auf meinen Seiten so belassen,
damit das Menü nicht im Firefox zerrissen wird...

Der Rollover des Hauptmenüs ist rechteckig,
der Rollover der Suche oval ?

zwischen "Active" und "Normaler" Menü-
Grafik wird die horizontale Linie,
die für den Spiegelungseffekt zuständig
ist, um 2px nach unten verschoben
(liegt am Versatz des Menüs, einfach
die HG-Grafik für Active 2px nach oben schieben ;-) )

Die Beschriftung der Suche darf meiner
Meinung nach ruhig den Menüpunkten angepasst werden (Schriftgröße).

Die blauen Pfeile werden nicht gelinkt,
(vgl. Bitburger.de)
auf der Startseite "Aktuelles" erscheint das mehr anders als unten, zum einen ohne
Pfeil und unterstrichen beim Rollover ???
Bei der Meldung mit Unicef in der Ukraine
wird vor dem Mehr noch ein Leerzeichen zu viel gelinkt.

Aber das sind wie gesagt Kleinigkeiten,
ich denke mal das fällt ausser mir
niemandem auf #giggle#

Ich muss mich korrigieren, habe mir die
Seite mal auf mehreren verschiedenen Systemen
angeschaut.

Auf dem Safari (MAC) wird bei den News
das "mehr" mit Pfeil dargestellt, im
Internet Explorer (v6.0.2800) fehlt
der Pfeil, obwohl er weiter unten
auf der Seite fehlerfrei dargestellt wird.
Der Link erscheint im IE unterstrichen
beim Hovern, im Safari identisch wie unten.

Die große Frage ist nun, woher das Problem kommt,
ich schau´s mir heute Abend nochmal genauer an
wenn ich ein wenig Zeit finde.

Die News auf der rechten Seite werden ebenfalls
nur im IE abgeschnitten, es scheint jedoch fast
so, als wäre nur die Überschrift betroffen,
z.Bsp.: Kinder laufen für Kinde wobei das
halbe "e" ebenfalls fehlt.

Noch was hab ich gerade entdeckt:
das selbe tritt auch unten bei Unicef
Projektweltreise auf, identisch wie oben.

Bei "Projekte" verschwindet in der Start-
animation das "skip intro" ???

Startseite rechts: Grußkarten zum Shop
muss im IE recht exakt getroffen werden
um gelinkt zu werden, bei Newsletter
und Friendship wird die komplette Spalte
gelinkt und gehovert. (unabhängig ob die
Maus auf dem Text ist oder nicht)

das mit dem Lupe:

habe ich im css diese code gefunden:

#inhalt .imgpopup a.lupe {
float: right;
position: relative;
display: block;
width: 19px;
height: 18px;
margin: -19px 1px 0px 0px;
background: url(../images/lupe.png) top left no-repeat !important;
background: url(../images/lupe.gif) top left no-repeat;
voice-family: "\"}\"";
voice-family:inherit;
margin: -20px 2px 0px 2px !important;
margin-right: 1px;
}

html>body #inhalt .imgpopup a.lupe {
margin: -20px 2px 0px 2px !important;
margin-right: 1px;
}

#inhalt .img_rechts_allein .imgpopup a.lupe {
margin: -19px 0px 0px 0px;
voice-family: "\"}\"";
voice-family:inherit;
margin: -20px 2px 0px 2px !important;
margin-right: 1px;
}

html>body .img_rechts_allein .imgpopup a.lupe {
margin: -20px 2px 0px 2px !important;
margin-right: 1px;
}

#inhalt div.imgpopup a.lupe:hover {
background: url(../images/lupe.png) top right no-repeat !important;
background: url(../images/lupe.gif) top right no-repeat;
}

#inhalt div.imgpopup a.lupe span{
display: none;
}

geht es nicht kurzer / einfacher??

In den Browser Mozilla und Firefox sieht
die Seite sehr gut aus, auch die mehr Links
sind einheitlich (alle unterstrichen, mit Pfeil)

Scheint ganz so als wäre einzig und allein
der Internet Explorer schuld - wie immer halt.
🙂

Danke für den CSS-Tipp!

Hallo Gnop und Co.

Mir gefällt Eure Seite wirklich gut und mich würde mal interessieren, wie Ihr die Lupe in den Bildern integriert habt. o.O

ja, warum antworten die nicht??? #evil#

Die Lupe ist mit CSS gemacht. Wurde bereits einige Beträge weiter oben gesagt.

Grosses Lob and die Entwickler. unicef.de simply rules! 8-)

Hallo!

Das die Lupe mit CSS gemacht worden ist, ist mir klar. 😉

Aber ich verstehe die Vorgehensweise noch nicht?!?

Um jedes Bild, welches die Option "Click-Enlarge" hat, muss wahrscheinlich ein Wrap mit x "Div Containern". Und dann ... #paralyzed#

Hallo Leute,
war nen bisschen länger nicht mehr hier.
Aber nachdem sich die Fragen zur Lupe häufen wollte ich mal die Richtung angeben 😃

Allerdings auch nur konzeptionell und in Kürze:

Wir mussten ein bisschen an der class.tslib_content.php rumbasteln um das hinzukriegen, denn um es auf allen Browsern (auch IE #angry# ) anzeigen zu können müssen ein paar Angaben in die DIVs rein, die mit TypoScript so nicht wirklich klappen (zumindest hab ich das nicht geschafft).

Also schaut mal in den Quelltext von unicef.de und schaut euch mal das div-Konstrukt an. Gebaut wird das in der Funktion imageLinkWrap der obigen Klasse.
Folgendes haben wir z.B darin gemacht:

/*$a1='<a href="#" class="popuplink" onclick="'.
	htmlspecialchars('openPic(\''.$url.'\',\''.($conf['JSwindow.']['newWindow']?md5($url):'thePicture').'\',\'width='.($dims[0]+$offset[0]+7).',height='.($dims[1]+$offset[1]+7).',status=0,menubar=0\'); return false;').
	'" globals="" tsfe-="">ATagParams.'>';
$a2='</a>'.'';*/

$ig_weite = $ausmasse[0]+4;

$a1='<div class="imgpopup" style="width:'.$ig_weite.'px"><a href="#" onclick="'.
	htmlspecialchars('openPic(\''.$url.'\',\''.($conf['JSwindow.']['newWindow']?md5($url):'thePicture').'\',\'width='.($dims[0]+$offset[0]+7).',height='.($dims[1]+$offset[1]+7).',status=0,menubar=0\'); return false;').
	'" globals="" tsfe-="">ATagParams.'>';
$a2='</a>	
<a href="#" class="lupe" onclick="'.htmlspecialchars('openPic(\''.$url.'\',\''.($conf['JSwindow.']['newWindow']?md5($url):'thePicture').'\',\'width='.($dims[0]+$offset[0]+7).',height='.($dims[1]+$offset[1]+7).',status=0,menubar=0\'); return false;').'" globals="" tsfe-="">ATagParams.'>
	<span>Bild vergrößern</span>
</a></div>';

Die ersten vier Zeilen ist der alte Kram. Darunter kommt unser Ersatz.
Wichtig ist die Integration der Breite des Bildes plus Rahmen in den Inline-Style des divs!

Die Breite wird in der Funktion cImage ausgelesen und per $ausmasse an ImageLinkWrap übergeben:

	function cImage($file,$conf) {
		$info = $this->getImgResource($file,$conf['file.']);
		$GLOBALS['TSFE']->lastImageInfo=$info;
		if (is_array($info))	{
			$info[3] = t3lib_div::png_to_gif_by_imagemagick($info[3]);
			$GLOBALS['TSFE']->imagesOnPage[]=$info[3];		// This array is used to collect the image-refs on the page...

			if (!strlen($conf['altText']) && !is_array($conf['altText.']))	{	// Backwards compatible:
				$conf['altText'] = $conf['alttext'];
				$conf['altText.'] = $conf['alttext.'];
			}
			$altParam = $this->getAltParam($conf);
			$theValue = '<img src="'.htmlspecialchars($GLOBALS['TSFE']->absRefPrefix.t3lib_div::rawUrlEncodeFP($info[3])).'" width="'.$info[0].'" height="'.$info[1].'"  border="'.intval($conf['border']).'"'.($conf['params']?' '.$conf['params']:'').($altParam).' />';
			$theValue2 = '<img class="popup" src="'.htmlspecialchars($GLOBALS['TSFE']->absRefPrefix.t3lib_div::rawUrlEncodeFP($info[3])).'" width="'.$info[0].'" height="'.$info[1].'"  border="'.intval($conf['border']).'"'.($conf['params']?' '.$conf['params']:'').($altParam).' />';
			$ausmasse = array($info[0],$info[1]);
			if ($conf['linkWrap'])	{
				$theValue = $this->linkWrap($theValue,$conf['linkWrap']);
			} elseif ($conf['imageLinkWrap']) {
				$theValue = $this->imageLinkWrap($theValue,$info['origFile'],$conf['imageLinkWrap.'], $theValue2, $ausmasse);
			}
			return $this->wrap($theValue,$conf['wrap']);
		}
	}

Das, und das schon gepostete CSS müssten in die richtige Richtung führen.
Sorry, habe aber leider nicht mehr Zeit das alles StepByStep zu erklären.
Vielleicht später mal.

Gruss und viel Glück :p
Julian

Da das für den Newbie bzw. User ohne Zugang zu den TYPO3-Sourcen
auf dem Server wahrscheinlich zu kompliziert ist,
habe ich daraus eine Extension gemacht,
bzw. in die Extension dmc_image_alttext integriert.
( Als XCLASS würden sich die beiden sonst ins Gehege kommen,
thematisch passen sie ja auch zusammen 😉 ).
Die Lupe wird dann auch gleich noch mit einem title-tag samt per TS anpassbaren Prefix ("Bild vergrößern: " + title) versehen.
Benötigt wird TYPO3 ab Version 3.6, 3.5 zu unterstützen, war mir zu aufwendig :o .

Bei Interesse: pm

jenses

Hallo Zusammen

@jenses: Wie schaffe ich es das deine EXT eine Lupe anzeigt?

@sappalapopette: Wäre super, wenn du mal den TS Code posten könntest. (lernen am lebenden Beispiel) 😉

Das CSS zu erstellen war noch nie das Problem, eher wie gesagt die einbindung in T3...

Uhlmann schrieb

@jenses: Wie schaffe ich es das deine EXT eine Lupe anzeigt?

Also nochmal von vorne :
dmc_image_alttext erweitert als XCLASS die class.tslib_content.php,
auf deutsch:
überschreibt bestimmte TYPO3-Funktionen und erweitert sie um Alt- und title-tag usw.
sappalapopette mach mit seinen (ihren ?) Änderungen nichts anderes,
nur eben hart verdrahtet in der Source.
Um das zu umgehen, habe ich das Ganze in eine XCLASS-Extension gepackt und ein bißchen erweitert.
Dann merkte ich, das die oft benutzte Ext dmc_image_alttext ebenso als XCLASS eingebunden wird und mir in die Quere kommt.
Also habe ich aus zwei Eins gemacht.
Die CSS-Anweisungen samt GIFs und PNGs werden dann noch per "include static from template" eingebunden.
(Das kann natürlich jeder nach Lust und Laune abwandeln)

Alles klar ?

Uhlmann schrieb

@sappalapopette: Wäre super, wenn du mal den TS Code posten könntest. (lernen am lebenden Beispiel) icon_wink.gif

Es ist kein TS-Code nötig.

jense

Kannst du die EXT zur Verfügung stellen? Die, die via typo3.org zur Verfügung gestellt wird, beinhaltet keine Lupe-Funktion...

Hallo,

da kann ich mich Uhlmann nur anschließen. Wäre super wann das alles als EXT verfügbar wäre...

Gruß,
Chris

Okay, aufgrund der vielen Anfragen, hier der Link :
http://webb.smedja.com/fileadmin/ljr/T3X_dmc_image_alttext-LUPE-local.t3x
Bei Problemen: kein Support, sorry,
dafür hab ich leider keine Zeit.

jenses

Hi Jenses
Danke für deine Bereitschaft!
Nur leider ist die Datei nicht downloadbar...

Error. Reason: Segment "ljr" was not a keyword for a postVarSet as expected!

Uhlmann schrieb

Hi Jenses
Danke für deine Bereitschaft!
Nur leider ist die Datei nicht downloadbar...

Error. Reason: Segment "ljr" was not a keyword for a postVarSet as expected!

Kopiere Dir diesen LINK von Hand 🙂
Denn wenn Du den Link mit URL einbindest, ersetzt des Forum hier die Wörter T3X und LUPE automatisch klein 🙁

http://webb.smedja.com/fileadmin/ljr/[b]T3X[/b]_dmc_image_alttext-LUPE-local.t3x

bussie Sandra