jQuery: abgerundete Kanten auf die Bilder, um Überschneidungen

Donnerstag, 30. Oktober 2008

Aufgrund der unterschiedlichen Darstellung von den verschiedenen Browsern, die sich Microsoft Internet Explorer zu berücksichtigen, müssen wir immer auf Kunststücken für die Auswirkungen, die jetzt zu einem Standard. Die Multi-diskutiert abgerundeten Kanten sind ein klassisches Beispiel für die "Katastrophe" durch die vollständige Unfähigkeit, eine Norm für schwere Rendering von HTML / CSS. Es gibt viele Online-Lösungen, die es Ihnen ermöglichen, um die "Auswirkungen" (Auswirkungen dall'HTML Freistellung als abgerundeten Ecken, Schatteneffekte, Spiegelungen, etc. ...) mit Patches auf die Blätter von Stilen, spezielle Tricks mit dem Einsatz von div veredelt, Bibliotheken Javascript, die Verwendung von canvas etc. ...
Für rein Bildungseinrichtungen möchte ich erklären, weitere Technik (Cross-Browser), um die Kanten gerundet, um die Bilder:

Demo-und Source -

Lesen Sie weiter ... "

Verwandte Post

CSS3: jemand hat gesehen Internet Explorer?

Donnerstag, 16. Oktober 2008

Ich besitze keine ...

CSS:
  1. p (
  2. / * Runde Ecken * /
  3. border-radius: 9px; / * CSS 3 * /
  4. -o-border-radius: 9px; / * Opera * /
  5. -iCab-border-radius: 9px; / * iCab * /
  6. -KHTML-border-radius: 9px; / Konqueror * * /
  7. -moz-border-radius: 9px; / * Firefox * /
  8. -webkit-border-radius: 9px; / * * Safari /
  9. )

Verwandte Post

jQuery gegen alle: ein Benchmark mit 5 Browser

Mittwoch, 17. September 2008

Bild Ein guter Entwickler ist kein Problem, von einer Programmiersprache zur anderen. Die Wahl auf eine bestimmte Sprache, Rahmen-und Entwicklungsumgebung, ist mehr diktiert durch die Verfügbarkeit von Zeit und der Art der Arbeit, die stattfinden. Jedoch ein wichtiger Faktor, die möglicherweise Einfluss auf die Wahl der "Rahmen", wie ist die Sympathie oder die Krankheit, die im Laufe der Zeit reifen.
Genauer gesagt, ich wollte zu analysieren einige - nicht alle - Javascript Rahmen heute, denn "empfohlen", um einen Blick vor allem jQuery.
Die Entwickler von Mootools (einer der beliebtesten Javascript Rahmen) zur Verfügung gestellt haben ein Werkzeug, um einen Test der Geschwindigkeit und der Gültigkeit von fünf bekannten Javascript Rahmen: Slickspeed. Diese Prüfung, die Ergebnisse nicht Rabatt auf alle, es ist wichtig, da die Rahmenbedingungen clientseitigen Javascript, die von unseren Browser. Es ist genau aus diesem Grund, dass einige finden Safari schneller als Internet Explorer oder Google Chrome schneller als Firefox. Allerdings, dieser hängt oft von der Seite, die Sie sich ansehen. In der Tat ist, kann sehr gut passieren, dass einer bestimmten Website ist wirklich mehr "schnell", wenn sie in Safari, das heißt aber nicht, dass alle Seiten werden schneller mit Safari! Natürlich, dieser Diskurs ist gültig für alle anderen Browser.

Die Benchmark

In Tests habe ich mit Slickspeed Vergleich habe ich den Browser auf meinem Rechner (Windows Vista Utilmate 64bit - Intel Core 2 Quad zu 2,4 GHz mit 8Gb RAM).
Leider, ist der Test nicht in der Lage war, um mit Internet Explorer 7, da es blockiert das Auto, sogar noch aus der Skala mit den Ergebnissen! Noch einmal, herzlichen Glückwunsch Microsoft.
Ich crercato, um den gleichen Status der PC während der Ausführung der Tests, die Öffnung der Browser individuell und nicht irgendeine andere Prozess läuft.

Hinweis: Wenn Sie der Meinung sind wie Sie eines oder mehrere dieser Prüfungen, können Sie Kommentare zu diesem Beitrag im Falle von "neugierig" und unterschiedlichen Ergebnissen.

Bild

Google Chrome war wirklich schnell, mit einem Wert von 68 (Durchschnitt) in die Prüfung mit jQuery. Je langsamer, jedoch wurde Flock, trotz der aus dem gleichen "Mutter" Mozilla. Das schlechte Ergebnis für Flock ist wirklich merkwürdig angesichts ihrer Schneiden Social Network, denn es ist die Social Network Web 2.0 zu nutzen viele Javascript Rahmen zur Verfügung, so dass eine Erfahrung im Bereich der Navigation und Interaktion wirklich innovativ.
Eine Überraschung Beat FireFox und Opera hat auch eine Menge ", sogar noch eine 74 im Dojo! Firefox und Safari, alle Dinge berücksichtigt, sind ähnlich, mit Safari schneller in Tests mit Mootools und jQuery.

Was Rahmen zu wählen?

Sie können badiamo, um die Schnelligkeit bei der Ausführung und wir kümmern uns nicht um die Größe in KB des gleichen Rahmen, die Antwort könnte "Was ist für Sie", oder, wenn Sie es vorziehen, "was Sie wissen am besten, oder mehr mit dem harmonischen Stil der Programmierung. "
Letztlich sind diese Rahmenbedingungen wird sich ein wenig "(siehe die Verwendung von $ zum Beispiel), obwohl einige wichtige Unterschiede, die sich direkt in die Augen eines Sachverständigen oder wirklich forciert den Einsatz einer bestimmten Bibliothek. Im Prinzip ist in der Tat alles, was getan werden kann, mit jQuery, zum Beispiel, können Sie auch mit Mootools oder Prototyp! Wenn jQuery hat eine sehr kompakte Syntax, da alle Methoden immer wieder die Grundlage jQuery-Objekt, wodurch endlose Dateien oggetto.metodo().metodo().metodo()... ist nicht gesagt, dass dies auf allen Kosten einer Stärke, vor allem für diejenigen, die haben zu debuggen!
Bibliotheken wie prototype.js vielleicht schuldig in Ermangelung grafische Effekte, selbst einfache, zwingt die Entwickler zur Umsetzung als Spin-off scriptaculous.js, schwerer und weit von der Bibliothek die erste Wahl.

Ein Beispiel

Genau diesem Grund, zum Beispiel, hat mich zu ersetzen, gekoppelt Prototyp / scriptaculous mit jQuery um interaktive Tafeln / animierte hier in der Seitenleiste undolog.com. Ja, mit Google-API-Bibliothek zu importieren, ist ein Abfall laden die gesamte Bibliothek für eine scriptaculous slideDown und slideUp. Für weitere Informationen und ein Beispiel, hier ist, wie die Javascript-Code in Verbindung mit dem Prototyp / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( 'H2.dropdown "). Jede (
  3. element ) { Funktion (Element) (
  4. = "pointer" ; Element. Stil. cursor = "pointer";
  5. 'click' , Element. beobachten ( "klicken Sie auf",
  6. event ) { Funktion (event) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; if (this. next (). Stil. Display == "") neuen Effekt. BlindUp (this. next (), (Dauer:. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Wirkung sonst neu. BlindDown (this. next (), (Dauer:.) 3);
  9. event ) ; Event. Stop (event);
  10. )
  11. )
  12. )
  13. );

und es ist jetzt mit jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( 'H2.dropdown "). Jede (
  3. i ) { Funktion (i) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (This). CSS ( "Cursor", "Zeiger"). Klicken Sie auf (
  5. Funktion () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (this). next (). ist ( ': versteckt')) $ (this). next (). slideDown (); else $ (this). next (). slideUp ();
  7. )
  8. );
  9. )
  10. );

Alles in allem ein genauerer Blick, ich glaube nicht, dass es einen großen Unterschied! Aber wie ich schon sagte ... Frage ist, "auch" persönlichen Geschmack.

Verwandte Post

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

Dienstag, 22. Juli 2008

Mit Firebug Lite, können Sie eine vereinfachte Version der Hinweis auf die Erweiterung für Firefox Exploer Microsoft Internet-Browser, Opera und Apple Safari. Firebug Lite kann in zweierlei Hinsicht: als Aufforderung Bookmark-oder Offline-Bibliothek

Bookmark-Modus

Durch das Hinzufügen dieser "besonderen Adresse" Firebug Lite unsere Favoriten (ziehen Sie den Link zu den Favoriten) - der Code ist:

HTML:
  1. javascript: var% 20firebug = document.createElement ( 'script'); firebug.setAttribute ( 'src', 'http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js ") Dokument. body.appendChild (Firebug) (Funktion () (if (window.pi & & window.firebug) (firebug.init ();) else (setTimeout (arguments.callee );}})(); void (Firebug);

Sie können Firebug Lite auf einer Website und von jedem Browser. Dies ist die vielleicht interessant, auch wenn die Funktionen sind sehr begrenzt.

Offline

Alternativ, wenn wir an der Entwicklung einer Website, können Sie ein Paket Javascript und installieren Sie sie auf unserer Web! Auf diese Weise können wir Firebug Lite auch ohne Internet-Anschluss und lokaler Ebene.

Firebug Lite ist eine Möglichkeit zum Ausgleich für das Fehlen einer solchen Erweiterung für andere Browser, aber ich war sehr langsam und begrenzt, vor allem in CSS! Wie sie sagen: besser als gar nichts ...

Verwandte Post

Safari, löschen Sie die blaue Grenze auf Eingabefelder

Montag, 14. Juli 2008

Safari, der Apple-Browser auch für Windows, hat einen blauen Rand (blau), wenn Sie in ein Feld input Wenn in einigen Fällen kann es angenehmer, in anderen wird es wirklich ärgerlich! So löschen Sie einfach in unserem Stylesheet:

CSS:
  1. / * Entfernen ____________________________ blaue Grenze * /
  2. : 0 none } Eingang (Entwurf: 0 none)

Oder, alternativ, direkt als Attribut im input

HTML:
  1. ... <input style = "outline: 0 none" ... />

Verwandte Post

Rendite Verringerung der Bilder-Browser

Mittwoch, 5. Dezember 2007

Im Prinzip, wenn Sie ein Bild in ein HTML-Dokument sollte ihre ursprüngliche Größe. Allerdings, die das IMG ist es möglich, die Breite (Breite) und Höhe (Höhe) von jedem Bild, unabhängig von ihrer ursprünglichen Größe. Diese Größe ist, die - natürlich - aus dem Browser.
Mit Hilfe der Original-Größe des Bildes ist gut, obwohl in einigen Fällen führt die doppelte Arbeit für die Web-Designer und / oder dynamische Motoren (zB CMS oder Bibliotheken Handhabung Grafiken) auf dem Web-Server. Ein klassisches Diashow, zum Beispiel, die in der Regel zeigt Thumbnail-Vorschau oder (Bild Größe reduziert) zeigen, dass, wenn Sie das Original-Bild größer. Das heißt, wir müssen zwei Größen des gleichen Bildes: eine für die Mini-und eine größere aus. So passiert, dass in einigen umliegenden Sie vermeiden, dass ein Miniaturbild und links an den Browser, um das Bild kleiner, so dass die Attribute width und height in der das IMG

Der Einsatz von Fingerabdruck hat zwei direkte Vorteile: Die Last reduziert ist sehr schnell und die Darstellung ist gut, oder hat, die wir ausgewählt haben (zum Beispiel, wenn wir bereit Thumbnail mit Photoshop). Umgekehrt wird, wie bereits erwähnt, haben wir um zwei verschiedene Bilder und alle Änderungen an der Website zu berücksichtigen, dieser Faktor.

Die uns zwingt, eine kleinere, in der Tat, nicht beschleunigen den Prozess des Herunterladens der gleiche: wenn ich ein Bild von 8000x8000 Pixel und das Monster als thumbnail 100x100 Pixel, die Browser herunterzuladen 8000x8000 comuqnue und nach einer Größe !

Ich habe einige Tests mit verschiedenen Browsern auf Windows Vista, mit 4 Dateien von 1024x768 Pixel ridimesionate auf 100x90 Pixel, und hier sind die Ergebnisse der Leistung auf verschiedenen Browsern.

Firefox 2.0.0.11 Bild (schlecht)
Bild

Microsoft Internet Explorer 7 Bild (schlecht)
Bild

Opera 9.24 Bild (gut)
Bild

Safari 3.0.4 (523.12.9) Bild (sehr gut)
Bild

Safari gewinnt über alle, mit einer wirklich guten Leistung in der Zeit um die Datei herunterzuladen. FireFox und IE7, überraschend, sind nahezu identisch mit FireFox sin. Opera ist eine Hälfte mit einem Rendementwert weit besser als IE7 und Firefox, sondern unter dem stravince Safari!

Verwandte Post

Xopus: XML in der WYSIWYG-Editor

Dienstag, 13. März 2007

Xopus ist ein XML-Editor (HTML) im WYSIWYG-Modus innerhalb des Browsers. Ich hatte bereits vor einiger Zeit, durch einen Artikel veröffentlicht am Ajaxian. Ich spreche jetzt, was nach wie vor ein interessanter Vorschlag im Hinblick web2.0/editor. Es ist eine interessante Erfahrung! Xopus hat sich sehr gut (mit Italienisch-Unterstützung), mit einer exzellenten Umsetzung der Kontext-Menü, obwohl noch nicht vollständig Cross-Browser, die aktuelle Version 3.1 ist nur Microsoft Internet Explorer (Version 6 und 7 ), aber die Entwickler versprochen haben, sobald mindestens eine Version mit Firefox (1. Februar wurde in der Alpha-Version 3.1.1 kompatibel Firefox 2.0 +).

Wie bereits an anderer Stelle erörtert, die Frage der Vereinbarkeit (Cross-Browser) über den Browser, verlangsamt und wirkt sich auf die Entwicklung von Mitteln, einschließlich der Nicht-Nutzung von Technologien wie Java-Applets oder Adobe Flash, könnte einen wichtigen Beitrag für die Gemeinschaft! Conttibuto verhindert - am Ende - von unnötigen internen Kämpfe der derzeitigen Hersteller von Browser: IE, Firefox, Opera, Mozilla, Safari, ... !

Anzeigen der Demo, es ist etwas mehr als einfache HTML-Editor, um es mit einfachen Worten. Xopus bietet die klassische Struktur Neuinstallation sowohl den Stil von Microsoft Word. Sie können in der Tat, auf die echte Seite Smart Objekte, die bestimmte Merkmale, die Xopus einem bestimmten Fall.

Wie bereits auf der Website:

Xopus ist eine gute Lösung für jedes Unternehmen, das über ein Back-End-Content-Management-System und ein Front-End-Publishing-System und damit als zwei Systeme, die die gleichen Informationen. Zu strukturieren, dass die Informationen, um die Runden zu kommen, ist daher ein Muss.

Poete In diesem Video wird die Demonstration der erweiterten Bearbeitungsfunktionen. Sie können auch eine Demo.

Verwandte Post

Web2.0: Adobe versucht, Apollo?

Dienstag, 13. Februar 2007

Apollo ist der Code-Name (bis jetzt) ein ehrgeiziges Projekt für die Welt Adobe RIA (Rich Internet Applications) und Web2.0, einschließlich Ajax. Jemand daran erinnert, Macromedia Contribute, Macromedia Central an jemand anderen. Es gibt auch jene, die in der einfachen Union Apollo - oder die Möglichkeit -, um PDF-und Flash-Elemente (was bereits getan wurde mit Flash Paper)!

Lesen Sie weiter ... "

Verwandte Post

browsershots.org: Mehrere Browser-Ausgang

Dienstag, 23. Januar 2007

Hier ist die Antwort auf die dramatische Unvereinbarkeiten mit den verschiedenen Web-Browsern. Browsershots.org ist ein Service - jetzt kostenlos und Open Source - das bietet eine einfache Möglichkeit zu prüfen, ob eine Seite wird in der gleichen Weise auf unterschiedlichen Plattformen und verschiedenen Browsern.

Dank einer kleinen Home-Server-Farm, die Autoren dieses wertvolle Dienste, die Video-Ausgabe-Bildschirme, die durch Ihr Web, so können Sie die korrekte Auslegung der HTML / CSS auf verschiedenen Maschinen und Browser: PLD Linux 2.0 ( ac), Windows 2003 (Server), Windows NT 5.1 (XP), Mac OS X 10.4 (Tiger) und andere.

browsershot-serverform

Die Webseite ist sehr gut betreut, mit einer Wiki-Dokumentation, Quellen, die "Roadmap" und Timeline. Auch können Sie sich die neuesten Screenshots, den Stand der Code-of-Process-und den Status der Fabriken. Der einzige wunde Punkt, aber überwindbar, ist es an der Zeit, die für die Generation der Bildschirm-Aufnahme, ein wenig "langsam! Aber es ist eine große Hilfe für Web-Entwickler, um die Richtigkeit ihrer Arbeit, ohne die Installation des Browser-und / oder virtuelle Maschinen zu leben - zum Beispiel - Internet Explorer 6 und 7. Unterstützt nahezu allen Browsern, von Safari zu Firefox. Interessant ist die Möglichkeit der verifcare IE6 und IE7, zusammen mit den Versionen 5.01 und 5.5.
Bravi!

Verwandte Post

100 Millionen IE7 installiert! Safari für Windows?

Freitag, 12. Januar 2007

Während Microsoft, über den Blog auf IE7, kündigt gongolante die "fabelhafte" Zahl von 100 Millionen Installationen des IE7 in den ersten Tagen des Monats Januar 2007, Gerüchte über eine mögliche Version von Safari (auch bekannt, ob die veralteten Browser - native -- für Mac) für Windows.
Microsoft selbst ist glücklich, zu sehen, dass IE7 ist die am zweithäufigsten verwendete Browser nach IE6.
All dies geschieht, wenn es immer noch viele Orte der IE7, so ist es verständlich, absolute Vertrauen von Microsoft in seiner neuen Browser, in "Blick" auf Entfernung auch von Vista (sorry das Spiel der Wörter)!
Es ist daher absolut notwendig ", um" Safari unter Windows?
Mary Jo Foley, in seinem Blog, versucht zu fragen, ist für die Nutzer. Abstimmung zu.
Im Moment sind die Ergebnisse:

Klar, wenn diese "Gerüchte" sind wahr, iPhone, Apple die neueste Wunder, könnte in gewisser Weise.
Natürlich das neue Apple iPhone ist besser, Firefox oder Opera, wo Apple macht es möglich. Auf einem normalen Mac, nach Endverbraucher, Safari verliert langen Aufnahmen, die einige innavigabili Seiten.
Wir können es in diesen Spekulationen, wie die Präsentation des neuen Apple iPhone hat etwas erschüttert.

Verwandte Post