php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 21-12-2009, 15:29
Quetschi
 PHP Expert
Links : Onlinestatus : Quetschi ist offline
Registriert seit: Dec 2004
Beiträge: 3.134
Quetschi wird schon bald berühmt werden
Standard Bildmasken mit .png

Hallo,

bisher habe ich mich noch immer etwas dagegen gesträubt, aber jetzt setze ich doch auch mal eine Webseite auf, die IE6 nicht mehr darstellen können wird.

Dabei hab ich ziemlich viel grafische Elemente eingesetzt, die dann als .png eingesetzt werden müssen wegen der Transparenzen.

Da ich bisher mit .png mal gar nichts am Hut hatte krieg ich jetzt angesichts der Dateigrößen von diversen .png ein bisschen kalte Füsse, weil da schon einiges an KB allein für das Layout der Seite zusammenkommt - ich unterlag dem Glauben, das Format würde komprimieren, was es aber wohl nicht oder nur in sehr geringem Umfang tut.

So möchte ich z.B. für Bilder eine Maske mit ausgefranzten Rändern erstellen, unter der dann das eigentliche Bild durchscheint. Nehme ich diese Maske jetzt als Ganzes, komm ich allein für das Ding schon auf fast 200KB

Hab dann einen Versuch gestartet und die Maske nicht komplett zu nehmen, sondern in 4 Teile zu zerlegen - also nur die Ränder, die sozusagen Bildinformationen enthalten. So komme ich auf "nur" 45KB für alle vier Teile zusammen, was mich schon wieder durchatmen lässt. Nur entstehen so im html sehr viel "dirty"-Notationen (4 statt nur 1) was mir bei mir auch ein gewisses Unwohlsein hinterlässt.

Natürlich könnt ich auch wieder hergehen und die Ränder einfach in ein fertiges .jpg reinmachen - bei späteren Designänderungen kann man dann allerdings die .jpg wieder wegschmeissen.

Lange Vorgeschichte - meine Frage ist eigentlich nur:
Wie setzt ihr solche Layouts um?

- .png nehmen und auf die Größe pfeiffen.
- .png und so zerlegen wie ich es grad versuche und auf dirty-html pfeiffen (sofern überhaupt schon jemand auf die kranke Idee gekommen ist)
- fertiges .jpg machen und auf Wiederverwendbarkeit der Bilder pfeiffen - die Originale werden ja eh unbearbeitet aufbewahrt
- ganz anders
__________________
Ihr habt ein Torturial durchgearbeitet, das auf den mysql_-Funktionen aufbaut?
Schön - etwas Geschichte kann ja nicht schaden.
Aber jetzt seht euch bitte php.net/pdo oder php.net/mysqli bevor ihr beginnt!
Mit Zitat antworten
  #2 (permalink)  
Alt 21-12-2009, 16:15
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Es gibt einige Progrämmchen, die PNGs noch weiter „crunchen” können.

http://optipng.sourceforge.net/
http://www.gracepointafterfive.com/punypng
http://entropymine.com/jason/pngrewrite/
http://sourceforge.net/projects/npngquant/develop
http://en.wikipedia.org/wiki/Portabl...timizing_tools

Zitat:
Zitat von Quetschi Beitrag anzeigen
So komme ich auf "nur" 45KB für alle vier Teile zusammen, was mich schon wieder durchatmen lässt. Nur entstehen so im html sehr viel "dirty"-Notationen (4 statt nur 1) was mir bei mir auch ein gewisses Unwohlsein hinterlässt.
Könnte man analog zu „runden Ecken” per JS realisieren - das generiert dann die zusätzlich benötigten Elemente ins DOM rein. Ohne JS dann etwas weniger visueller Effekt - meistens vertretbar.

Zitat:
Natürlich könnt ich auch wieder hergehen und die Ränder einfach in ein fertiges .jpg reinmachen - bei späteren Designänderungen kann man dann allerdings die .jpg wieder wegschmeissen.
M.E. auch nicht so tragisch.
Kann man ggf. ja auch automatisieren, so dass aus neu hochgeladenen Bildern serverseitig die „gepimpte” Version erzeugt wird.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.

Geändert von wahsaga (21-12-2009 um 16:18 Uhr)
Mit Zitat antworten
  #3 (permalink)  
Alt 21-12-2009, 16:43
Benutzerbild von onemorenerd onemorenerd
  Moderator
Links : Onlinestatus : onemorenerd ist offline
Registriert seit: Mar 2005
Ort: Berlin
Beiträge: 9.471
onemorenerd wird schon bald berühmt werdenonemorenerd wird schon bald berühmt werden
Standard

Wenn du für den Rahmen zunächst ein einziges PNG nehmen wolltest, dann bedeutet das ja, der Rahmen hat eine feste Größe. Manchmal ist das okay, aber sehr selten. Meistens will man doch - auch wenn es erstmal nur eine feste Größe gibt - die Designelemente so anlegen, dass sie flexibel und wiederverwendbar sind. Das geht mit einem einzigen PNG nicht. Bei solchen Anforderungen bieten sich CSS-Sprites an.

Im PHP-Code sollte von der genauen Umsetzung natürlich nichts mehr zu sehen sein. Da steht dann im Template sowas wie
Code:
{box theme="frayed"}{$content}{/box}
Die box-Funktion lädt das Stylesheet und fügt das Markup hinzu. Javascript ist nicht notwendig.
Der theme-Parameter sollte optional sein und nur gesetzt werden, wenn man ein anderes als das Standarddesign haben will.
Mit Zitat antworten
  #4 (permalink)  
Alt 21-12-2009, 16:47
Quetschi
 PHP Expert
Links : Onlinestatus : Quetschi ist offline
Registriert seit: Dec 2004
Beiträge: 3.134
Quetschi wird schon bald berühmt werden
Standard

@wahsaga
danke - die Sachen guck ich mir an

@onemorenerd
Im konkreten Fall gibt das Layout dafür eine feste Größe vor - für andere Sachen ist dein Tipp aber sehr interessant
__________________
Ihr habt ein Torturial durchgearbeitet, das auf den mysql_-Funktionen aufbaut?
Schön - etwas Geschichte kann ja nicht schaden.
Aber jetzt seht euch bitte php.net/pdo oder php.net/mysqli bevor ihr beginnt!
Mit Zitat antworten
  #5 (permalink)  
Alt 21-12-2009, 17:22
piratos
 Guest
piratos
Beiträge: n/a
Standard

Bei allen Überlegungen sollte man daran denken das nach einem Zerschnippeln mehr HTTP Request's hat als vorher.

Hier für das Forum bedeutet das pro Request 150ms im Schnitt x 4 = 600 ms, also ein Zeitverlust von 3 x 150 = 450 ms - andere Server sind da u.U. sehr viel langsamer.

In 450 ms könnte ich bei meiner Netzanbindung locker 1,6 MB übertragen, ja selbst bei einer erheblichen langsameren Anbindung könnten es 300 KB und mehr sein.

In dem Fall ist ein zerschnippeln absolut von Nachteil, man verliert erheblich mehr als es bringt.
Mit Zitat antworten
  #6 (permalink)  
Alt 21-12-2009, 17:28
Quetschi
 PHP Expert
Links : Onlinestatus : Quetschi ist offline
Registriert seit: Dec 2004
Beiträge: 3.134
Quetschi wird schon bald berühmt werden
Standard

wg. Komprimier-Tools:
also im konkreten Fall macht mir optipng aus meiner 200KB-Datei bestenfalls eine 170KB-Datei - da fahre ich mit der vierteiligen Version doch noch um eine Hausnummer besser.

wg. cssSprites:
Achso - so nennt sich das - die Technik verwende ich eh, wenn es recht viel kleines Zeug wird, aber längst nicht immer, da sich manche Sachen für sich dann doch deutlich besser komprimieren lassen und dann ist der Effekt der eingesparten Request-Header auch gleich mal wieder dahin. Keep-alive ist sowieso an, also gibt es nicht gleich immer nen neuen Verbindungsaufbau.

Was viel praktischer wäre: Wenn ich für ein einzelnes Element 2 oder mehrere Hintergründe notieren lassen würden, die man entsprechend positionieren und übereinander legen könnte. Keine Ahnung - kommt sowas in neueren CSS-Spezifikation vielleicht mal? Oder leb ich diesbezüglich auch grad hinterm Mond?

So behelf ich mir immer damit, dass z.B. eine div-box ein sehr langes Element enthält das unten den Abschluss enthält und der background auf bottom gesetzt wird und der h1, h2... der eh obligatorisch in der Box als erstes kommt, bekommt praktisch den Kopf dafür als background verpasst.

@piratos
ich denke da mehr an die sehr vielen User, die immer noch über keine breitbandige Anbindung ans Netz verfügen. Da verkehrt sich dann die Rechnung doch schnell ins Gegenteil.
__________________
Ihr habt ein Torturial durchgearbeitet, das auf den mysql_-Funktionen aufbaut?
Schön - etwas Geschichte kann ja nicht schaden.
Aber jetzt seht euch bitte php.net/pdo oder php.net/mysqli bevor ihr beginnt!

Geändert von unset (21-12-2009 um 17:37 Uhr) Grund: Doppelpost
Mit Zitat antworten
  #7 (permalink)  
Alt 21-12-2009, 17:35
Benutzerbild von onemorenerd onemorenerd
  Moderator
Links : Onlinestatus : onemorenerd ist offline
Registriert seit: Mar 2005
Ort: Berlin
Beiträge: 9.471
onemorenerd wird schon bald berühmt werdenonemorenerd wird schon bald berühmt werden
Standard

Zitat:
Zitat von Quetschi Beitrag anzeigen
Wenn ich für ein einzelnes Element 2 oder mehrere Hintergründe notieren lassen würden, die man entsprechend positionieren und übereinander legen könnte. Keine Ahnung - kommt sowas in neueren CSS-Spezifikation vielleicht mal?
It's just around the corner ... CSS Backgrounds and Borders Module Level 3
Mit Zitat antworten
  #8 (permalink)  
Alt 21-12-2009, 17:37
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Quetschi Beitrag anzeigen
Was viel praktischer wäre: Wenn ich für ein einzelnes Element 2 oder mehrere Hintergründe notieren lassen würden, die man entsprechend positionieren und übereinander legen könnte. Keine Ahnung - kommt sowas in neueren CSS-Spezifikation vielleicht mal?
CSS Backgrounds and Borders Module Level 3 - 3.1 Layering multiple background images
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #9 (permalink)  
Alt 21-12-2009, 17:39
unset
  Moderator
Links : Onlinestatus : unset ist offline
Registriert seit: Jan 2007
Ort: Düsseldorf
Beiträge: 3.782
unset befindet sich auf einem aufstrebenden Ast
Standard

@Quetschi: Lustige Signatur …*du weißt also das man Beiträge bearbeiten kann. Mach das bitte in Zukunft auch.

(Im Übrigen würde ich dich außerhalb meiner Funktion als Moderator bitten, deine Signatur zu ändern. Es sieht leider wirklich viel zu sehr nach einem wirklichen Edit aus )
Mit Zitat antworten
  #10 (permalink)  
Alt 21-12-2009, 17:48
Quetschi
 PHP Expert
Links : Onlinestatus : Quetschi ist offline
Registriert seit: Dec 2004
Beiträge: 3.134
Quetschi wird schon bald berühmt werden
Standard

@unset
wg. Signatur:
Weil du es bist

wg. edit vs. neupost:
In der Vergangenheit ging es mir sehr oft so, dass während ich noch am editieren war zwischenzeitlich jemand anderes gepostet hat. Mein Edit fiel dann meinem follower nicht auf - dann musste ich wieder in nem weiteren Post auf mein Edit hinweisen. Deshalb hab ich es mir eigentlich in allen Foren so angewöhnt, dass ich ein neues Post verfasse anstatt das vorige zu editieren. Ich kann es gerne so wie hier gewünscht machen, kein Thema - aber irgendwie fehlt mir das "handfeste" Argument pro Edit.
__________________
Ihr habt ein Torturial durchgearbeitet, das auf den mysql_-Funktionen aufbaut?
Schön - etwas Geschichte kann ja nicht schaden.
Aber jetzt seht euch bitte php.net/pdo oder php.net/mysqli bevor ihr beginnt!
Mit Zitat antworten
  #11 (permalink)  
Alt 21-12-2009, 18:11
piratos
 Guest
piratos
Beiträge: n/a
Standard

Zitat:
Zitat von Quetschi Beitrag anzeigen
@piratos
ich denke da mehr an die sehr vielen User, die immer noch über keine breitbandige Anbindung ans Netz verfügen. Da verkehrt sich dann die Rechnung doch schnell ins Gegenteil.
Verstehe das sehr gut , aber die sind die absolute Minderheit - 82% nutzen schnelle Breitbandverbindungen.
Nur 16% nutzen Modem - ISDN mit stark fallender Tendenz.

Und - die Verluste über die HTTP Request's treffen alle völlig unabhängig von der Art der Anbindung - das darf man auch nicht vergessen.

Breitbandnutzer neigen allerdings eher dazu zu zappen, wenn eine Website dahergeschlichen kommt, das sollte man auch im Auge behalten, da könnte man sich u.U. selbst in den Hintern treten.

Ich persönlich nehme keinerlei Rücksicht mehr auf Modem und ISDN Nutzer - deren Ärger wegen der langsamen Verbindung kann ich sehr wohl nachempfinden - konnte ich doch auch erst vor mehr als einem Jahr meine ISDN Karte in den Müll werfen, aber dennoch die langsamen sind so etwas von out und jeden Monat mehr.

Auf der anderen Seite hat Google seinen Großversuch gestartet um die Geschwindigkeiten von Web's zu ermitteln.

Die tragen sich mit dem Gedanken die Power eines Web's 2010 mit in die Bildung des Rankings für Suchergebnisse einzubeziehen.

Ob und wann das kommen wird ist noch fraglich, aber wenn dann zählen die Millisekunden.
Mit Zitat antworten
  #12 (permalink)  
Alt 21-12-2009, 20:55
Quetschi
 PHP Expert
Links : Onlinestatus : Quetschi ist offline
Registriert seit: Dec 2004
Beiträge: 3.134
Quetschi wird schon bald berühmt werden
Standard

@piratos

Öhm - also bei breitbandigen Anschlüssen werden meine Seiten ohne merkliche Verzögerungen geladen, vo "dahergeschlichen kommen" kann beim besten Willen keine Rede sein. Bei langsameren Verbindungen profitieren meine Seiten dagegen davon, dass jedes Element das fertig geladen ist auch gleich angezeigt wird - so ist für einen User erkennbar, dass das Laden noch von statten geht. Ich hab jetzt keine Ahnung wie es sich bei einem Sprite verhält, aber ich vermute doch, dass hier die Elemente erst angezeigt werden, sobald die komplette Datei geladen ist - werd das aber bei Gelegenheit nochmal prüfen.

Letzendes bin ich dann auch noch immer KB-Spar-fetischist - alles in eine 500KB-Datei zu packen ginge mir einfach gegen den Strich, wenn ich es auch mit meinetwegen 5 x 20KB erledigen kann weil sich die einzelnen Dateien einfach viel gezielter komprimieren lassen. Es macht natürlich aber bei diversen Sachen (der Klassiker: Grafiken für Hover-Effekte) schon Sinn - gar keine Frage.

Wie gesagt - Keep-Alive ist eh an und wird von den meisten Clients auch genutzt somit ist da nichts mit ständig Verbindungen auf- und abbauen bzw. zu vielen parallelen Verbindungen und damit erforderlichen Httpd-Prozessen die den Server belasten könnten und die paar Byte für die Request-Response-Header sind ja wirklich geschenkt im Vergleich 500KB zu 5 x 20KB.

Dazu noch vernünftige Header für das Caching von sich nicht ständig ändernden Dateien und der Server hat eh erstmal Ruhe wenn Hintergründe und Co. mal geladen sind. Komischerweise hackt es da bei doch immer wieder bei diversen Webseiten, weil die Header dafür nicht passen und sich so der Client genötigt fühlt sich jedesmal für zig Grafikdateien und (was fast noch schlimmer ist weil da manche Frameworks gleich ganze Armeen an Dateien nachladen) Javascript-Dateien seinen 304er abzuholen wenn man sich durch die Seite klickt - das kann eine Seite echt zäh wirken lassen - ich hab das in nem anderem Forum dem Admin gefühlte 20x runterbeten müssen, bis er die Expires endlich halbwegs tauglich eingestellt hat weil bei jedem Klick die immer gleichen 50 Dateien aufs Neue angefragt wurden.

Trotzdem - vielleicht komm ich über die Feiertage mal dazu das etwas genauer auszuloten was in der Hinsicht noch an Optimierung drin ist.

@onemorenerd & wahsaga
Ist schön und gut, aber hinsichtlich der Css3-Unterstützung (gerade in Sachen multiple Hintergründe) von den Browsern, die in meinen Logs dominieren, ist das momentan noch keine Alternative.
__________________
Ihr habt ein Torturial durchgearbeitet, das auf den mysql_-Funktionen aufbaut?
Schön - etwas Geschichte kann ja nicht schaden.
Aber jetzt seht euch bitte php.net/pdo oder php.net/mysqli bevor ihr beginnt!

Geändert von Quetschi (21-12-2009 um 21:13 Uhr)
Mit Zitat antworten
  #13 (permalink)  
Alt 21-12-2009, 22:03
piratos
 Guest
piratos
Beiträge: n/a
Standard

Zitat:
"dahergeschlichen kommen"
Das war allgemein gesprochen (diene Site kenne ich nicht) - ich kenne Websites die haben technisch (Server) des Beste und haben es versaut, weil die Anzahl der Request's zu hoch sind.
Man muss heute weniger in Imagegrößen rechnen sondern in Anzahl von Request's - da werden so manche noch etwas brauchen um dahinter zu kommen.
Das sind übrigens im wesentlichen die Ansätze von Google Pagespeed und Yahoo Yslow.

Zitat:
Ich hab jetzt keine Ahnung wie es sich bei einem Sprite verhält, ....
Ich setze Sprite in meiner Site (powercms.org) ein - optimal, kann ich nur empfehlen.

Das optimalste Werkzeug zur Optimierung ist m.E. Google Chrome und davon der Developerteil. Da kann man sehr schön an der Timeline erkennen was Sache ist und optimieren.

Zum Test kann man da auch ruhig mehrere Lösungsansätze gleichzeitig laden und dann beurteilen was für einen ok ist.
Mit Zitat antworten
  #14 (permalink)  
Alt 21-12-2009, 22:07
Benutzerbild von onemorenerd onemorenerd
  Moderator
Links : Onlinestatus : onemorenerd ist offline
Registriert seit: Mar 2005
Ort: Berlin
Beiträge: 9.471
onemorenerd wird schon bald berühmt werdenonemorenerd wird schon bald berühmt werden
Standard

Zitat:
Zitat von Quetschi Beitrag anzeigen
Bei langsameren Verbindungen profitieren meine Seiten dagegen davon, dass jedes Element das fertig geladen ist auch gleich angezeigt wird
Hier geht es um den Rahmen einer Box. Dessen Teile will man alle auf einmal angezeigt haben, nicht erst links, dann unten, dann die rechte ober Ecke usw.
Zitat:
so ist für einen User erkennbar, dass das Laden noch von statten geht
Dafür hat jeder Browser einen Ladebalken.
Zitat:
Trotzdem - vielleicht komm ich über die Feiertage mal dazu das etwas genauer auszuloten was in der Hinsicht noch an Optimierung drin ist.
Tools wie Y!Slow helfen dabei sehr.
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ebiz-trader 6.0 - Das professionelle PHP Marktplatz Script ansehen ebiz-trader 6.0 - Das professionelle PHP Marktplatz Script

Mit unserer Lösungen können Sie nahezu jeden B2B / B2C Marktplatz betreiben den Sie sich vorstellen können. Ganz egal ob Sie einen Automarktplatz, Immobilenportal oder einfach einen Anzeigenmarkt betreiben möchten. Mit ebiz-trader können Sie Ihre Anforder

11.10.2018 Berni | Kategorie: PHP/ Anzeigenmarkt
PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 18:58 Uhr.