Wasserrettung kufstein

owr_web · 20. Dezember 2010 11:52

Na dann möchte ich auch eine Seite vorstellen:

die Seite der ÖWR Kufstein - ein "Freizeitprojekt" von mir.

Außer den "Standardmodulen" ist eigentlich nur CGGoogleMaps installiert - welches irgendwann wieder mal fliegt. Aber derzeit habe ich keine Zeit zum basteln.
Für den Uploadbereich habe ich - für interne Downloads - noch CustomContent und FEU im Einsatz.
Irgendwann kommt dann noch das AdvancedContent in Einsatz - aber auch da muss ich mir dann mehr Zeit nehmen um das entsprechend durchzuplanen.

Die Einsätze und Veranstaltungen sind über eine API-Schnittstelle aus der Verwaltungssoftware eingebaut. Und für die Bildrotierungen habe ich das plugin rotate im Einsatz.

http://www.wasserrettung-kufstein.com

Beitrag geändert von owr_web (20. Dezember 2010 12:06)

uniqu3 · 20. Dezember 2010 12:04

Schöne Seite smile sehe ich leider nicht viel ohne link big_smile

owr_web · 20. Dezember 2010 12:07

Donke - sorry da hatte ich schon das Mittagessen im Kopf - man manchmal hat man ein Brett vorm Kopp smile

Wolfhardt · 20. Dezember 2010 12:07

Ich tippe mal aufhttp://www.wasserrettung-kufstein.com/

Google ist dein Freund uniqu3 cool

Zur Seite selbst:

Sieht im Prinzip sehr nett aus. Design und Farbgebung sind passend und in meinen Augen gefällig
Die runden Ecken werden mit -moz-border-radius erzeugt. Dies funktioniert nur bei Gecko-basierten Browsern. Ich würde noch
- -khtml-border-radius (für Konqueror)
- -webkit-border-radius (für WebKit-basierte Browser wie Safarie uns Googles Chrome)
- -o-border-radius (für Opera bis 9.x) und
- border-radius (für CSS3)
dazunehmen. Dann bleibt hier nur der Explorer (bis einschließlich IE8) außen vor.
Der Background der ausgeklappten Menüs ist teiltransparent, was die Lesbarkeit erschwert, das würde ich ändern
Page-Speed (80/100); YSlow (90/100); würd ich noch etwas dran drehen. Die Startseite hat 6 Stylesheets, die kann man kombinieren.
http://validator.w3.org validiert die Seite ohne Fehler, aber HTML-Tidy meckert, daß bei den Größenangaben der Startbilder in den Werten die Angabe 'px' mit auftaucht (width="480px" height="240px"), würde ich auch weglassen. Dafür evtl. noch ein title-Attribut hinzufügen

So, das war's erstmal beim groben Drüberschauen, die Experten haben da sicher noch mehr zu zu sagen wink

Beitrag geändert von Wolfhardt (20. Dezember 2010 12:48)

piratos · 20. Dezember 2010 13:26

Ich finde die Site gut.
Was mir nun schon mehrfach aufgefallen ist das CMSMS enorme zeitliche Probleme damit hat wenn CSS mehrfach eingebunden wird:

Hier klicken, um den Code zum Kopieren zu markieren

<link rel="stylesheet" type="text/css" media="screen" href="http://www.wasserrettung-kufstein.com/stylesheet.php?cssid=31&amp;mediatype=screen" /> 
<link rel="stylesheet" type="text/css" media="screen" href="http://www.wasserrettung-kufstein.com/stylesheet.php?cssid=50&amp;mediatype=screen" /> 
<link rel="stylesheet" type="text/css" media="screen" href="http://www.wasserrettung-kufstein.com/stylesheet.php?cssid=42&amp;mediatype=screen" /> 
<link rel="stylesheet" type="text/css" media="screen" href="http://www.wasserrettung-kufstein.com/stylesheet.php?cssid=51&amp;mediatype=screen" /> 
<link rel="stylesheet" type="text/css" media="screen" href="http://www.wasserrettung-kufstein.com/stylesheet.php?cssid=35&amp;mediatype=screen" /> 
<link rel="stylesheet" type="text/css" media="print" href="http://www.wasserrettung-kufstein.com/stylesheet.php?cssid=30&amp;mediatype=print" />

Dagegen könnte man etwas machen und man sollte dagegen etwas machen - ich meine unabhängig von der Site.

Pagespeed - wurde ja schon gesagt - ist mies ( http://www.webpagetest.org/result/101220_GY_4GPN/) - ein Thema was immer wieder hochkommt - Pagespeed sollte man verinnerlichen dann ist es ganz einfach, hier sieht man aber immerhin deutlich das im Ansatz darüber nachgedacht wurde und auch ein paar Dinge realisiert wurden.

Tobias_Gl · 20. Dezember 2010 13:38

Nun Pagespeed ist ein guter Indikator nur leider gibt es auch Sachen auf welche man ohne root-zugriff Einfluss hat aufgelistet. Was auch einiges an Geschwindigkeit bringt ist, wenn man Bilder nicht über direktem Pfand angibt sondern über eine Subdomain.
Du gibst deinen Bilderordner einfach die Subdomain bilder.domain.tld und dann verlinkst du über diesen die Bilder im Stylesheet oder im Template. Das kann man für alle statischen / contentunabhänigigen Bilder machen. Bilder die sich täglich ändern oder andere per wysiwyg-editor hinzufügen geht das ja leider nicht so recht.

Thema runde Ecken. Diese kann man sehr einfach per CSS und Bildern erzeugen oder halbtransparente pngs. Dort streikt auch der IE unter 7 wieder aber dafür gibt's ja ein paar workarounds per Java-Script wink

Ich würde auch alle Stylesheets pro Ausgabemedium zusammenlegen. Man kann sie ja intern durch kommentare unterteilen. Die kompression welche Pagespeed vorschlägt finde ich jedoch einfach nervig weil dann der aufbau komplett verloren geht und man später beim editieren große Probleme mit der Lesbarkeit hat.

Beitrag geändert von Tobias_Gl (20. Dezember 2010 13:39)

owr_web · 20. Dezember 2010 13:44

Ja das mit den runden Ecken smile - ich bin am überlegen, ob ich das nicht ganz raushau. Wenn alles gleich rund ist gehts ja noch, aber wenn nur (wie beim header) zwei rund sein sollen, da bin ich irgendwie ausgestiegen. Insbesondere nachdem ich inzwischen 5 verschiedene Anleitungen gelesen hab ops

Hier hab ich diese drinnen:

Hier klicken, um den Code zum Kopieren zu markieren

[== css ==]
    -moz-border-radius: 8px 8px 0 0;
    -khtml-border-top-left-radius: 8px;
    -khtml-border-top-right-radius: 8px;

Wie ich die anderen richtig unterbringe habe ich nich wirklich realisiert. Beim Zusammenfassen der css wollte ich eigentlich warten, dass ich die 1.8 oder 1.9 hochspielen kann und das mit dem cachen ausprobieren. Aber der Provider ist eine lahme Ente punkto php-update. Und wechseln dauert ....
Die opacity hab ich wieder entfernt - ja sieht bei weiten besser aus.

Ah ja die Pixels big_smile - der eine meckert wennst sie nicht drinnen hast, der andere wenn du sie drinnen hast. Also hab ich das ganze mal durchgeschaut und das rotate-plugin überarbeitet. Denn einige Leerzeichen-"Fehler" waren ja noch drinnen und Eingabemöglichkeit Titel gabs nicht. Titel hinzugefügt (zwar für jedes Bild das gleiche, aber das kann man verschmerzen. Eventuell mache ich das noch so, dass man (Beispiel) "rotierendes Startbild dateiname.jpg" draus macht. Und nachdem ich ohnehin alle Bilder gleich groß mache habe ich die Größenangaben einfach nicht mehr eingegeben - fertig.

piratos · 20. Dezember 2010 13:55

Ein Hinweis zum Thema Pagespeed - die wirklich realen Zeiten kann man am besten über Google Chrome sehen - klar erkennbar dort - die nackte Zeit um das HTML abzuliefern eiert zwischen 1,2 Sekunden und knapp 6 Sekunden - das deutet eigentlich daraufhin das die Serverlast sich teils drastisch ändert und das wahrscheinlich ohne das man einen Einfluß darauf hat.
Bei Webpagetest.org sind Zeiten extrem abhängig von von der aktuellen Last auf und vom der verarbeitenden Stelle - die sollte man nicht unbedingt für bare Münze nehmen (->Google Chrome !).
Was man daraus verwenden kann sind Pagespeed und die restlichen Hinweise.

Tobias_Gl · 20. Dezember 2010 13:59

Nun das mit den Pixeln ist so eine sache. Nach (X)HTML 1.0 soll die Trennung zwischen Beschreibung und Design zu 100% getrennt werden. Die Attribute height und width zählen darunter und man sollte img am besten per css deklarieren.
Pagespeed meckert hingegen und mächte diese Attribute haben - sehr merkwürdig das alles.

Thema Runde Ecken:
Ich habe da mich vor ein paar Jahren mal mit beschäftigt aber dann nicht oft angewendet.
Dieses Tutorial sollte jedoch eine Variante per Grafiken erklären: http://www.andreas-kalt.de/webdesign/tu … unde-ecken
smile
Ansonsten gibts auf css-play auch noch ein schönes Beispiel: http://www.cssplay.co.uk/boxes/snazzy2.html

piratos · 20. Dezember 2010 14:06

Was Validierung betrifft ist für mich der von der W3 ausschlaggebend.
Es gibt ja auch andere gute Validatoren die aber teils andere Schwerpunkte haben wie der Totalvalidator der in Richtung BF geht.
Was den W3 betrifft fallen natürlich die CSS Besonderheiten runde Ecken da voll durch.

owr_web · 20. Dezember 2010 14:15

Sodala hab nochmal alle (screen-)css auf einen zusammengeschmissen - werd dann noch mal die unnötigen Leerzeichen, auskommentierte Befehle usw. entfernen. Aber jetzt hab ich nur mehr 2 (screen und print)

und der W3 meckert nur mehr bei den runden Ecken, den Text-shadows und na net bei den gleichen Farben für Vorder- udn Hintergrund. Damit kann ich gerne leben. lol

Bei der html-Validierung nehme ich eigentlich nur den von W3 her, und solange der net motzt dürfte das ganze halbwegs in Ordnung sein.

EDIT:
so hab mal alle ganz unnötigen Leerzeichen/Tabs/Leerzeilen aus dem CSS rausgeschmissen - von vorher 79% Einsparmöglichkeit ist er auf 14% runtergekommen.
Enable Compression - ist das beim CMSms einfach möglich? Oder sinnvoll?
Bilder cachen? Hmm da werd ich mich noch schlau machen müssen.

Inzwischen bin ich ja schon auf 87/100 smile

Beitrag geändert von owr_web (20. Dezember 2010 15:28)

piratos · 20. Dezember 2010 15:41

Das W3 Icon kostet dir 314 ms - entweder komplett entfernen oder lokal ablegen.

owr_web · 21. Dezember 2010 10:38

So - logo hab ich rausgeschmissen. Ich hab mal Chrome installiert und versucht, einige Fehler noch auszumerzen. Ich hab mal das javascript im Head für Fensterhöhe und Weite (siehe Code unterhalb) entfernt - den IE6-Hack ins Stylesheet integriert, jetzt jammert er da nicht mehr der Chrome. gleichzeitig habe ich aus den paar png's im Menü gifs gemacht - der Unterschied ist minimal, aber dafür die Dateigröße einiges weniger.

Die stylesheets kann er nicht cachen - bringt es was dies als externes css abzulegen und dann so einzufügen (als als .css anstatt.php?....) ?

Mit was ich noch nichts anfangen kann, ist dass er bei den Bildern "motzt" ich solle bei den Bildern Cache-Control: public in den header geben.

Ist das eigentlich (noch) notwendig für irgendwelche Browser:

Hier klicken, um den Code zum Kopieren zu markieren

[== javascript ==]
<script type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
    var nw="auto",w=document.documentElement.clientWidth;
    if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</script>

Beitrag geändert von owr_web (21. Dezember 2010 10:39)

piratos · 21. Dezember 2010 11:25

Setz mal cms_stylesheet ein und schmeiss vorher beide CSS (screen print) nach dem Schema zusammen: http://www.cmsmadesimple.de/forum/viewtopic.php?id=146
Ich würde auch mal antesten ob man

ganz unten vor </body> einsetzen kann (Fragestellung funktioniert es - meistens ja), das bringt enorme Vorteile bei der Renderung, da ansonsten Javascript nicht nur geladen wird sondern auch versucht wird diese auszuführen , klappt das unten fängt der Browser unverzüglich an zu rendern, das wirkt schneller.

Das allgemeine Powerproblem ist das hier:

0,823925 / 92 / 18634544 / 18939404 -

Das dürfte im wesentlichen der Menümanager sein , die Spaßbremse überhaupt.

Beitrag geändert von piratos (21. Dezember 2010 11:28)

owr_web · 21. Dezember 2010 12:20

Funktioniert leider nicht - rotate (die verschiedenen Bilder) wird nicht angezeigt. Gut hier werde ich mich mal nach einer anderen Lösung umschauen, sobald mehr Zeit da ist.

Funktioinert cms_stylesheet nicht erst seit 1.7 oder 1.8? ich kann da noch nicht updaten (siehe weiter oben - Provider)

EDIT: Derzeit komme ichauf diese Werte, nachdem ich zumindest die stylesheets zusammengefügt habe:

Beitrag geändert von owr_web (21. Dezember 2010 12:31)

piratos · 21. Dezember 2010 12:25

Ich kann im Code nichts erkennen was den Einsatz verhindert, also Plugin entnehmen und probieren.

Die direkte Einbindung von CSS als ausgelagerte CSS Datei ist übrigens das schnellste was man machen könnte und die Beziehungen zu enthaltenen Images stimmen , also keine Nacharbeit.

Bei dem rotate würde ich mal nach einer nachladenden Ajaxlösung suchen, da jetzt alle images geladen werden müssen.

NaN · 21. Dezember 2010 14:06

Du könntest die Javascripte trotzdem ganz nach unten setzen, aber für das Cycle Plugin anstelle von $(document).ready -> $(window).load verwenden.
Dann startet das Cycle Plugin erst, wenn alles geladen wurde.
Musst halt nur sehen, wie Du die Lücke füllst.
Eine einfache kleine Hintergrundgrafik im Div mit der ID "startbild" könnte da helfen.

owr_web · 21. Dezember 2010 15:56

sodala, Hintergrundgrafik erstellt. rotate-plugin auf $(window).load umgeschrieben - nix geht. Hintergrundbild bleibt sonst rührt sich nix.
Ich habs jetzt mal so gelassen. vielleicht könntet ihr den Quellcode durchsehen - oder einen Tipp für ein einfaches rotate mit nachladen der Bilder.

piratos · 21. Dezember 2010 16:12

Ich verwende häufig dies hier: http://tobia.github.com/CrossSlide/

Das kann man unten vor /body einsetzen.

Beitrag geändert von piratos (21. Dezember 2010 16:13)

nockenfell · 21. Dezember 2010 16:14

Ich habe sowas mal mit Crossslide umgesetzt:
http://tobia.github.com/CrossSlide/

Das JavaScript für den Slide habe ich direkt ins Template reingeschrieben (also kein Plugin)

owr_web · 21. Dezember 2010 16:24

das hat aber sofern ich sehe keinen großen Unterschied - oder doch?

das jquery muss ich auch im header laden - wie beim rotate, denn nachdem ich es jetzt im Header laden lasse funktioniert es auch wieder. Und das umgeschriebene habe ich beibehalten. Mir kommt subjektiv jetzt vor, dass die Bilder erst nach dem Seitenaufbau geladen werden. Oder ist das wirklich nur subjektiv?

Tobias_Gl · 21. Dezember 2010 16:29

Bilder verbrauchen wesentlich mehr Ladezeit wie Text. Somit sagst du, dass der Text und der Allgemeine Seitenaufbau als erstes geladen werden, bevor alle Bilder aus dem Rotateordner.
Subjektiv betrachtet, kommt den Betrachter der Seitenaufbau schneller vor besonders wenn man keine gute Internetverbindung zur Verfügung hat (soll ja noch sowas wie DSL 1000 existiern wink )
Wenn du jetzt noch das Rotate an eine stelle setzt, an dem vorher nur 1 Bild ist (startbild in einer css klasse) dann bist du auf der sicheren seite was die ladezeiten für den betrachter angeht.

piratos · 21. Dezember 2010 16:36

owr_web schrieb:

das hat aber sofern ich sehe keinen großen Unterschied - oder doch?
das jquery muss ich auch im header laden - wie beim rotate, denn nachdem ich es jetzt im Header laden lasse funktioniert es auch wieder. Und das umgeschriebene habe ich beibehalten. Mir kommt subjektiv jetzt vor, dass die Bilder erst nach dem Seitenaufbau geladen werden. Oder ist das wirklich nur subjektiv?

Oh doch

1, Einbindung unten so z.B.

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="jquery/jquery.js"></script> 
<script type="text/javascript">$(function() {
$('#stage').crossSlide({
     sleep:3,
      fade: 2
    }, [{ src:  'slider/09.jpg'},
{ src:  'slider/07.jpg'},
{ src:  'slider/20.jpg'},
{ src:  'slider/29.jpg'},
{ src:  'slider/30.jpg'},
{ src:  'slider/22.jpg'},
{ src:  'slider/27.jpg'},
{ src:  'slider/21.jpg'},
{ src:  'slider/02.jpg'},
{ src:  'slider/03.jpg'},
{ src:  'slider/12.jpg'},
{ src:  'slider/04.jpg'},
{ src:  'slider/14.jpg'},
{ src:  'slider/16.jpg'},
{ src:  'slider/05.jpg'},
{ src:  'slider/06.jpg'},
{ src:  'slider/28.jpg'},
{ src:  'slider/13.jpg'},
{ src:  'slider/10.jpg'},
{ src:  'slider/32.jpg'},
{ src:  'slider/11.jpg'},
{ src:  'slider/18.jpg'},
{ src:  'slider/33.jpg'},
{ src:  'slider/17.jpg'},
{ src:  'slider/26.jpg'},
{ src:  'slider/23.jpg'},
{ src:  'slider/01.jpg'},
{ src:  'slider/25.jpg'},
{ src:  'slider/08.jpg'},
{ src:  'slider/15.jpg'},
{ src:  'slider/31.jpg'},
{ src:  'slider/24.jpg'},
{ src:  'slider/19.jpg'}

        ]);
    });
</script>
</body>

Aber du solltest das erste Bild in <div id="stage"></div>statisch laden damit etwas vorhanden ist - wenn ein optisches Loch entstehen sollte.

Und es wird mit dem ersten Bild bereits fertig gerendert, der Rest wird nachgeladen.

PS.

Kannst es hier mal in Aktion sehen: http://www.businesshotel.de/index.php

Beitrag geändert von piratos (21. Dezember 2010 16:39)

owr_web · 21. Dezember 2010 18:03

so das war jetzt der doppelte aha-Effekt cool

Ich hab mir mal ganz frech deinen Slide aus deinem Quelltext abgekupfert. Und siehe da - jetzt ists nicht nur subjektiv so jetzt sehe ich es selber objektiv.

Und der zweite aha-Effekt war so nebenbei, dass ich endlich draufgekommen bin wo der Hund begraben liegt beim petting ähhh padding. Tja - wenn mans doppelt drinnen hat und manche es doppelt nehmen und andere nicht dann ists endlich klar, warum das überall anders angezeigt wird big_smile

EDIT: @piratos der eine schlechte Wert kann auch zusätzlich zum MenuManager zustande kommen, da ich ja für Veranstaltungen/Einsätze einen API-Zugriff auf externe Daten durchführe.

Beitrag geändert von owr_web (21. Dezember 2010 18:11)

piratos · 21. Dezember 2010 19:39

Wie ich das so sehe hat sich der Speed enorm verbessert.
Was jetzt noch fehlt ist gzip einschalten und das Caching für Images einschalten, dann dürftest du so auf Pagespeed 93..95 kommen.

Forum für CMS/made simple

#1 20. Dezember 2010 11:52

Wasserrettung kufstein

#2 20. Dezember 2010 12:04

Re: Wasserrettung kufstein

#3 20. Dezember 2010 12:07

Re: Wasserrettung kufstein

#4 20. Dezember 2010 12:07

Re: Wasserrettung kufstein

#5 20. Dezember 2010 13:26

Re: Wasserrettung kufstein

#6 20. Dezember 2010 13:38

Re: Wasserrettung kufstein

#7 20. Dezember 2010 13:44

Re: Wasserrettung kufstein

#8 20. Dezember 2010 13:55

Re: Wasserrettung kufstein

#9 20. Dezember 2010 13:59

Re: Wasserrettung kufstein

#10 20. Dezember 2010 14:06

Re: Wasserrettung kufstein

#11 20. Dezember 2010 14:15

Re: Wasserrettung kufstein

#12 20. Dezember 2010 15:41

Re: Wasserrettung kufstein

#13 21. Dezember 2010 10:38

Re: Wasserrettung kufstein

#14 21. Dezember 2010 11:25

Re: Wasserrettung kufstein

#15 21. Dezember 2010 12:20

Re: Wasserrettung kufstein

#16 21. Dezember 2010 12:25

Re: Wasserrettung kufstein

#17 21. Dezember 2010 14:06

Re: Wasserrettung kufstein

#18 21. Dezember 2010 15:56

Re: Wasserrettung kufstein

#19 21. Dezember 2010 16:12

Re: Wasserrettung kufstein

#20 21. Dezember 2010 16:14

Re: Wasserrettung kufstein

#21 21. Dezember 2010 16:24

Re: Wasserrettung kufstein

#22 21. Dezember 2010 16:29

Re: Wasserrettung kufstein

#23 21. Dezember 2010 16:36

Re: Wasserrettung kufstein

#24 21. Dezember 2010 18:03

Re: Wasserrettung kufstein

#25 21. Dezember 2010 19:39

Re: Wasserrettung kufstein

Fußzeile des Forums