Artikel Tagged 'Work'

jQuery: runde Kanten auf die Bilder überlappen

Aufgrund der unterschiedlichen Rendering auf Browser, Microsoft Internet Explorer auf jeden Fall sehen, dass im Hinterkopf, wir müssen immer an Tricks Zuflucht zu Spezialeffekten, die mittlerweile zum Standard werden sollte gelten. Die vielfach diskutierte abgerundeten Kanten sind ein klassisches Beispiel für "Katastrophe" durch die völlige Unfähigkeit zu einer ernsthaften Standards auf Seite Rendern von HTML / CSS machen produziert. , etc… Es gibt viele Lösungen, die das Netzwerk an die "Effekte" (Auswirkungen der Befreiung bestehenden HTML als abgerundete Kanten, Schatten, Spiegelungen, etc ...) mit Flecken auf den Blättern von Stilen, spezielle Tricks bei der Verwendung von zu erhalten erlauben div gepfropft, Bibliotheken JavaScript, Verwendung von canvas , etc ...
Auf einer rein technischen Lehre möchte ich erklären, weitere (Cross-Browser), um die abgerundeten Kanten der Bilder anzuwenden:

Demo und Quelle

Fortsetzung ...

CSS3: hat jemand gesehen, der Internet Explorer?

Ich weiß nur nicht ...

1
2
3
4
5
6
7
8
9
{P
/ * Abgerundete Ecken * /
; /* CSS 3 */ border-radius: 9px; / CSS * 3 * /
; /* Opera */ -O-border-radius: 9px; / * Opera * /
; /* iCab */ -ICab-border-radius: 9px; / * iCab * /
; /* Konqueror */ -Khtml-border-radius: 9px; / * Konqueror * /
; /* Firefox */ -Moz-border-radius: 9px; / * Firefox * /
; /* Safari */ -Webkit-border-radius: 9px; / * Safari * /
}

Fortsetzung ...

jQuery gegen alle: ein Benchmark mit 5 Browser

Bild Ein guter Entwickler hat kein Problem damit, von einer Programmiersprache zur anderen wechseln. Die Entscheidung, auf eine bestimmte Sprache, Rahmen-oder Entwicklungsumgebung zu konzentrieren, ist durch die Verfügbarkeit von Zeit und der Art der Arbeit, die stattfindet diktiert. Doch ein wichtiger Faktor, dass die Wahl der "Rahmen" beeinflussen können, wie sich die Sympathie und Zuneigung, die im Laufe der Zeit reifen können.
Genauer gesagt, wollte ich etwas zu analysieren - sicherlich nicht alle - JavaScript-Frameworks heute verfügbar ist, weil auch "beraten", um einen Blick vor allem auf zu nehmen jQuery .
Die Macher von mootools (einer der populärsten JavaScript Rahmenbedingungen) haben ein Werkzeug zur Verfügung, um einen Geschwindigkeitstest und ihrer Gültigkeit davon fünf bekannten JavaScript-Frameworks laufen: Slickspeed . Dieser Test, der Ausgang überhaupt nicht abgezinst, ist es wichtig, als Client-Side Javascript-Frameworks, die von Ihrem Browser ausgeführt werden, zu betreiben. Es ist genau aus diesem Grund, dass einige finden, Safari schneller als Internet Explorer oder Google Chrome schneller als Firefox . Doch dies hängt oft von der Art der angezeigten Seite. In der Tat kann es durchaus passieren, dass eine bestimmte Website ist wirklich mehr "schnell", wenn in Safari angezeigt, aber das bedeutet nicht, dass "alle Seiten" wird schneller mit Safari! Offensichtlich ist dies für alle anderen Browser gilt.

Die Benchmark-

Im Test habe ich mit gemacht Slickspeed Ich verglich die verfügbaren Browser auf meinem Rechner (Windows Vista 64bit Utilmate - Intel Core 2 Quad 2,4 GHz mit 8 GB RAM).
Leider sind die Tests nicht in der Lage, mit Internet Explorer 7 ausgeführt wird, als das Auto stürzte, ging sogar außerhalb der Skala mit den Ergebnissen! Noch einmal herzlichen Glückwunsch Microsoft.
Ich crercato auf den gleichen Stand der PC während des Testlaufs erhalten, öffnen Sie den Browser und nicht einzeln, indem Sie keine anderen Prozesse laufen.

Hinweis: Wenn Sie wie Sie auch eine oder mehrere dieser Tests fühlen, können Sie diesen Beitrag im Falle von "neugierig" und mehrere Ergebnisse zu kommentieren.

Bild

Google Chrome ist wirklich schnell Ergebnisse, mit einem Wert von 68 (Durchschnitt) in den Test mit jQuery . Je langsamer, jedoch war Flock , obwohl aus dem gleichen "Mutter" Mozilla. Das schlechte Abschneiden der Flock ist wirklich neugierig, wie seine schneiden soziale Netzwerke, weil es gerade die Social Network Web 2.0 zu nutzen, viele JavaScript-Frameworks zur Verfügung zu nehmen, um so eine Erfahrung von wirklich innovativen Navigation und Interaktion bieten.
Überraschenderweise schlägt FireFox und Opera hat auch eine nette kleine ", erreichen sogar eine 74 in die Leistung des Dojo ! Firefox und Safari unter dem Strich sind ähnlich, mit Safari schneller in Tests mit Mootools und jQuery.

Welche Rahmenbedingungen zu wählen?

Wenn Sie nichts dagegen haben Sie mit dem Testen der Geschwindigkeit der Ausführung und nicht über die normale Größe in KByte gleichen Rahmen sorgen, könnte die Antwort sein ", was Ihnen gefällt" oder, wenn Sie so wollen, "was Sie besser kennen zu lernen oder sich in Harmonie mit Ihrer Art der Programmierung. "
Letzten Endes werden diese Rahmenbedingungen sehen ein bisschen 'all (siehe zum Beispiel die Verwendung von $), obwohl einige wichtige und wesentliche Unterschiede, die in den Augen eines Experten springen kann oder wirklich schob die Verwendung einer bestimmten Bibliothek. Im Prinzip in der Tat alles, was mit jQuery getan werden kann, zum Beispiel, kann man sehr gut mit mootools oder Prototyp! Wenn jQuery hat eine sehr kompakte Syntax, wie alle Methoden immer wieder das jQuery-Objekt Grundlage, wodurch endlose Reihen von oggetto.metodo().metodo().metodo()... wird gesagt, dass dies alles Kosten einer Stärke, vor allem für diejenigen, die zu debuggen wird!
Bibliotheken wie prototype.js sin, vielleicht in der Abwesenheit von Effekten, auch einfach, die Entwickler zu zwingen als Spin-off umzusetzen scriptaculous.js , schwere und weit von der Bibliothek die erste Wahl.

Ein Beispiel

Dieser letzte Grund, zum Beispiel, führte mich zu dem gekoppelten Prototype / Scriptaculous mit jQuery zu ersetzen, um interaktive Tafeln / Animated undolog.com hier erstellen in der Seitenleiste. In der Tat, auch mit Google API, um Bibliotheken zu importieren, ist es eine Verschwendung, all die Bibliothek laden und scriptaculous für eine slidedown slideup. Für weitere Informationen und ein Beispiel, hier ist die Javascript-Code, wie es mit der Prototype / Scriptaculous gekoppelt war:

1
2
3
4
5
6
7
8
9
10
11
12
13
/ / Prototype / Scriptaculous
) . each ( $ $ ('H2.dropdown'). Stück (
element ) { Funktion (element) {
= "pointer" ; .. Element style cursor = "Zeiger";
'click' , Element. beobachten ('click',
event ) { Funktion (event) {
this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (.. this. next () Stil Anzeige == "") neue Effect BlindUp (this. next (), {duration: .5});.
Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; . Effect sonst neue BlindDown (this. next (), {duration: .3});
event ) ; Event-Stop (event).;
}
)
}
);

und es ist jetzt mit jQuery:

1
2
3
4
5
6
7
8
9
10
/ / JQuery
) . each ( $ ('H2.dropdown'). Stück (
i ) { Funktion (en) {
) . css ( 'cursor' , 'pointer' ) . click ( $ (This). Css ('Cursor', 'Zeiger'). Klicken Sie auf (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) next () is (': hidden')) $ (this) next () slidedown (); else $ (this) next () slideup ();....
}
);
}
);

Alles in allem, einen genaueren Blick, glaube ich nicht, es gibt einen großen Unterschied! Aber wie ich schon sagte ... die Frage ist "auch" der persönliche Geschmack.

Fortsetzung ...

Firebug Lite: Firebug für IE, Opera und Safari

Mit Firebug Lite . Sie können eine vereinfachte Version der Notiz über die Erweiterung für Firefox-Browser Microsoft Internet Exploer, Opera und Apple Safari verwenden Firebug Lite kann auf zwei Arten eingesetzt werden: als einen Ruf als eine Bibliothek offline oder Bookmark

Bookmark Mode

Addiert man diese "besondere Adresse" Firebug Lite unseren Lesezeichen (ziehen Sie den Link in meine Favoriten) - der Code ist:

1

Sie können die Firebug Lite auf einer beliebigen Webseite aus jedem Browser. Dies ist vielleicht die attraktivste Option, obwohl die Funktionen sind sehr begrenzt.

Offline

Alternativ, wenn wir die Entwicklung einer Website, können Sie eine JavaScript und installieren Sie es auf unserer Seite! Auf diese Weise können wir Firebug Lite auch ohne Internet-Verbindung und lokal.

Firebug Lite ist ein Weg, um das Fehlen dieser Erweiterung zu anderen Browsern zu kompensieren, aber ich war langsam und sehr begrenzt, vor allem in CSS! Wie sie sagen, besser als nichts ...

Fortsetzung ...

Made in the image Größenänderung von Browser

Im Prinzip sollten, wenn Sie ein Bild einfügen in ein HTML-Dokument in seiner ursprünglichen Größe verwendet werden. Doch die TAG IMG können Sie die Breite (width) und Höhe (Höhe) von jedem Bild, unabhängig von der ursprünglichen Größe zu erzwingen. Diese Skalierung ist fertig - natürlich - aus dem Browser.
Verwenden Sie die ursprüngliche Größe des Bildes ist gut, obwohl in einigen Fällen beinhaltet eine doppelte Arbeit für die Web-Designer und / oder dynamische Motoren (wie CMS oder Bibliotheken von Grafik-Manipulation) auf dem Web Server. Eine klassische Diashow, zum Beispiel, in der Regel zeigt Vorschauen oder Thumbnails (kleine Bilder) zeigen, dass, wenn Sie das Originalbild größer zu wählen.

Fortsetzung ...

Browser-Krieg: Der Krieg geht weiter?

Ein Sunnyvale, Kalifornien, bringt Yahoo zu Silicon Valley WebBuilder Mike Shaver von Mozilla, Chris Wilson, Microsoft IE-Team, und Hoon Lie von Opera, um den aktuellen Zustand des ewigen Krieg zwischen den Browsern zu diskutieren.

Betont werden, sind die Worte von Mike Shaver von Mozilla:

Nicht auf die W3C für die Zukunft aussehen

Und die Kritik an Apples Nichtteilnahme:

Sie weigerten sich, jemand sagen, dass Send "Wir Schreiben beschäftigt Software sind."

Das unter anderem, ist 10 Meilen von wo das Treffen stattfand!

Fortsetzung ...

browsershots.org: Mehrere Browser-Ausgang

Hier ist die Antwort auf die dramatische Inkompatibilitäten mit verschiedenen Browsern verfügbar. Browsershots.org ist ein Service - kostenlos und Open Source für den Moment -, dass eine einfache Möglichkeit zu überprüfen, ob eine Website in der gleichen Weise auf unterschiedlichen Plattformen und verschiedenen Browsern angezeigt wird ermöglicht.

Dank einer kleinen Server-Farm nach Hause, die Autoren dieses nützlichen Service für Video-Ausgang der Bildschirme von Ihrem Web generiert bieten, so können Sie die Richtigkeit der Interpretation HTML / CSS auf verschiedenen Rechnern und Browsern zu überprüfen: PLD Linux 2.0 ( Ac), Windows 2003 (Server), Windows NT 5.1 (XP), Mac OS X 10.4 (Tiger) und andere.

browsershot-serverform

Die Seite ist wirklich gut betreut, mit einer Menge von Wiki-Dokumentation, Quellen, Fahrplan-und Timeline. . Sie können auch die neusten Screenshots, die state-of-Queue und den Status der Fabriken. Der einzige Wermutstropfen, aber überwindbar, ist die Zeit für die Erzeugung von screen-shot erforderlich, ein wenig "zu langsam! Allerdings ist es eine große Hilfe für die Web-Entwickler, um die Richtigkeit ihrer Arbeit zu überprüfen, ohne Angabe von Browser und / oder virtuelle Maschinen zu leben installieren - zum Beispiel - Internet Explorer 6 und 7. Nahezu alle Browser sind Firefox, Safari unterstützt. Interessant ist die Möglichkeit der verifcare IE6 und IE7, zusammen mit den Versionen 5.01 und 5.5.
Well done!

Fortsetzung ...

Internet Explorer 7 und Opera: Eine Welt für sich

Conitnua zu erstaunen die gesamte Differenz zwischen der Rendite verschiedenen Browsern auf dem Markt. IE7 verarbeitet PNG (8-bit oder 24) in einer anderen Weise als Firefox. Auch Opera ist nicht frei von einigen seltsamen Ereignis in dieser Hinsicht. Insbesondere sind die PNG als Hintergrund verwendet anders als IE7, Opera und Firefox gemacht. Das ist alles schön brav und in dieser Hinsicht ist es Zeit, Browser "Jahrhundert" zu ernennen! Herzlichen Glückwunsch an das Entwicklerteam.

IE7 schafft eine schöne Schneiden Wirkung ein PNG-Bild als Hintergrund repeat-x verwendet. Wenn Sie versuchen, ein Bild von 200 × 200 Pixel mit einem Farbverlauf von Schwarz (0 × 000000) bis grau (0xEEEEEE) vertikal zu schaffen und in den Körper in die CSS als Hintergrund orizzonale wiederholen (repeat-x), Einstellung der Hintergrund Wagenfarbe 0xEEEEEE - oder das Ende der Steigung, werden Sie feststellen, dass nur die Loslösung macht es perfekt FireFox, IE7 und Opera einen schönen Schnitt-Effekt (aber etwas anders !!!): in der Praxis sehen wir das Ende unseres Bild 200 zeigen × 200 und dem Beginn der Wohnung farbigem Hintergrund.

Ein Weg, um das Problem zu lösen, ist unser Image zu GIF speichern ...

Aber die NPCs nicht von IE7 unterstützt?

Fortsetzung ...