jQuery: runde kanter på billeder, der overlapper hinanden

Torsdag den 30 oktober 2008

På grund af de forskellige afsmeltning mellem forskellige browser, som helt sikkert se Microsoft Internet Explorer i tankerne, skal vi altid ty til at ansøge om artifizi virkninger, som nu skal være en standard. Multi-drøftet afrundede kanter er et klassisk eksempel på den "katastrofe", produceret af en fuldstændig manglende evne til at opnå en standard alvorligt på side afsmeltning HTML / CSS. Der er mange netværksløsninger, der giver dig mulighed for at have "virkninger" (virkninger fritage dall'HTML stede som afrundede kanter, skygge virkninger, refleksioner, etc ...) med lapper på ark af stilarter, særlige tricks ved hjælp af div podede, biblioteker Javascript, brug af canvas etc ...
For rent uddannelsesmæssige Jeg vil forklare yderligere tekniske (cross-browser) til at gælde for de afrundede kanter af billeder:

Demoer og kilder

Fortsæt med at læse ... "

Related Post

CSS3: nogen har set Internet Explorer?

Torsdag den 16 oktober 2008

Jeg ejer ikke ...

CSS:
  1. p (
  2. / * * Afrundede hjørner /
  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. )

Related Post

jQuery mod alle: en benchmark med 5 browser

Onsdag den 17 september 2008

image Et godt bygherren har ikke noget problem at flytte fra et programmeringssprog til et andet. Valget til at fokusere på et bestemt sprog, rammer og udvikling af miljøet, er dikteret mere af tilgængeligheden af tid og type af arbejde, der finder sted. Men en vigtig faktor, der kan påvirke valget af "ramme" vil, er den sympati eller den sygdom, som kan modne over tid.
Specifikt, jeg ønskede at analysere nogle - ikke alle - Javascript rammer til rådighed i dag, fordi "anbefales" til at se primært på jQuery.
Skaberne af mootools (en af de mest populære Javascript ramme) har stillet et værktøj til at køre en test af hastighed og gyldigheden af fem kendte rammer Javascript: Slickspeed. Denne test, hvis resultater ikke rabat på alle, er vigtig som rammer Javascript client-side, der drives af vores browser. Det er netop derfor, at nogle finde Safari hurtigere end Internet Explorer eller Google Chrome hurtigere end Firefox. Men dette ofte afhænger af, hvilken type side du kigger på. I virkeligheden kan meget vel ske, at et bestemt websted er virkelig mere "fast" når den vises i Safari, men det betyder ikke, at "alle steder vil blive hurtigere med Safari! Naturligvis dette indlæg er gyldigt for alle andre browsere.

Benchmark

I prøver jeg udført med Slickspeed Jeg har sammenlignet den browser findes på min maskine (Utilmate Windows Vista 64bit - Intel Core 2 Quad 2,4 GHz med 8 GB RAM).
Desværre er den test er ikke i stand til at køre det med Internet Explorer 7, fordi blokerer bilen, selv gå ud af skalaen med resultaterne! Endnu en gang tillykke Microsoft.
Jeg crercato identisk at opretholde status af PC under prøven, som åbner browseren separat og ikke sender nogen anden kører processen.

Bemærk: Hvis du føler at du gør en eller flere af disse prøver, kan du kommentere dette indlæg i tilfælde af "nysgerrig" og forskellige resultater.

image

Google Chrome er virkelig hurtig, med en værdi på 68 (gennemsnit) i testen med jQuery. Den langsommere, men det syntes flok, til trods kommer fra den samme "mor" Mozilla. Dette dårlige resultat for flokken er virkelig nysgerrig givet sit opskæring sociale netværk, fordi det er det sociale netværk Web 2.0 udnytte mange af Javascript ramme til rådighed, således at der ydes en navigation og interaktion virkelig nyskabende.
En overraskelse beat Firefox og Opera har også en masse «, selv at få en 74 i Dojo! Firefox og Safari, når alt kommer til alt, er identiske med Safari hurtigere i test med Mootools og jQuery.

Hvilke rammer for at vælge?

Hvis ikke badiamo at teste den hurtighed i udførelsen og vi er ligeglade med størrelsen i Kbytes af de samme rammer, at svaret kunne være "hvad der er til dig" eller, hvis du foretrækker det, "hvad du kender bedst eller er mere harmonisk med din stil med programmering. "
I sidste ende er disse rammer vil se noget 'alle (se brugen af $ for eksempel), på trods af nogle vigtige og væsentlige forskelle, der kan springe i øjnene af en ekspert eller virkelig skubbet i et bestemt bibliotek. I princippet er faktisk alt, hvad der kan opnås med jQuery, for eksempel, kan du gøre godt med mootools eller prototype! Hvis jQuery har en meget kompakt syntaks, som alle metoder altid returnere jQuery objekt grundlag, hvilket skaber endeløse filer af oggetto.metodo().metodo().metodo()... fortalte, at det er på alle omkostninger en styrke, især for dem, der bliver nødt til at debug!
Biblioteker som prototype.js synd måske i mangel af grafiske effekter, selv enkle, tvinger bygherren til at gennemføre spin-off som scriptaculous.js, tungt og fjernt fra biblioteket første valg.

Et eksempel

Bare denne sidste grund, for eksempel, tog mig til at erstatte den koblede prototype, / scriptaculous med jQuery at gøre paneler interaktive / animerede her i indholdsoversigten af undolog.com. Selv ved hjælp af Google API til at importere biblioteker, er spild belastning hele biblioteket scriptaculous for en slideDown og slideUp. For oplysninger og prøve, her går Javascript-kode kombineret med den prototype, / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( 'H2.dropdown «). Hver (
  3. element ) { funktion (element) (
  4. = "pointer" ; element. stil. markøren = "pointer";
  5. 'click' , element. observere ( 'klik',
  6. event ) { funktion (begivenhed) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; if (this. næste (). stil. display == "") nye effekter. BlindUp (this. næste (), (duration. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Virkning andet nyt. BlindDown (this. næste (), (varighed:. 3));
  9. event ) ; Begivenhed. Stop (begivenhed);
  10. )
  11. )
  12. )
  13. );

og det er nu med jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( 'H2.dropdown «). Hver (
  3. i ) { funktion (s) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (Denne). CSS ( 'cursor', 'pointer'). Klik på (
  5. funktion () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (denne). next (). er ( ': skjult')) $ (denne). next (). slideDown (); ellers $ (denne). next (). slideUp ();
  7. )
  8. );
  9. )
  10. );

Når alt kommer til alt, på alle, tror jeg ikke, der er meget forskel! Men som jeg sagde før ... Spørgsmålet er "godt" af personlige smag.

Related Post

Firebug Lite: Firebug for IE, Opera og Safari

Tirsdag den 22 juli 2008

Gennem Firebug Lite kan du bruge en forenklet version af noten udvidelse til Firefox-browser Microsoft Internet Exploer, Opera og Apple Safari. Firebug Lite kan bruges på to måder: som en opfordring bogmærke eller som et bibliotek offline

Bogmærke mode

Ved at tilføje denne "særlige adresse" Firebug Lite vores favoritter (trække linket til favoritter) - Koden er:

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 ();) andet (setTimeout (arguments.callee );}})(); void (Firebug);

Du kan slå Firebug Lite på en hvilken som helst websted og fra en hvilken som helst browser. Det er måske det mest interessante, selv om de funktioner er meget begrænsede.

Offline

Alternativt, hvis vi er ved at udvikle et websted, kan du hente en pakke Javascript og installere det på vores Web! På denne måde kan vi bruge Firebug Lite selv uden en internetforbindelse og lokalt plan.

Firebug Lite er en måde at kompensere for manglen på denne udvidelse til andre browsere, men det syntes mig meget langsom og begrænset, især i CSS! Som man siger: bedre end ingenting ...

Related Post

Safari, skal du slette den blå grænse på input felter

Mandag den 14. juli, 2008

Safari, Apples browser til Windows, producerer en blå grænsen (blå grænse), når du klikker i et felt input Hvis det i visse tilfælde kan være behagelig, mens andre bliver virkelig irriterende! Du kan slette lige ind i vores typografiark:

CSS:
  1. / * ____________________________ Fjern blå grænse * /
  2. : 0 none } input (skitse: 0 none)

Eller, alternativt, direkte attribut taggen input

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

Related Post

Udbytte reduktion i billedet browsere

Onsdag den 5 december 2007

I princippet, når du indsætter et billede i en HTML-dokument skal bruge sin oprindelige størrelse. Men TAG IMG kan tvinge bredde (bredde) og højde (højde) af ethvert billede, uafhængigt af dens oprindelige størrelse. Denne resizing er gjort - naturligvis - browseren.
Brug af den oprindelige størrelse på et billede er godt, skønt det i visse tilfælde indebærer en dobbelt arbejde for Web Designer og / eller dynamiske motorer (f.eks CMS biblioteker håndtering grafik) på webserveren. Et klassisk diasshow, for eksempel, der normalt viser thumbnail previews eller (billedstørrelsen reduceret) viser, at hvis du vælger det originale billede større. Det betyder, at vi er nødt til at have to størrelser i det samme billede: en for den lille miniature og en større en. Så sker det, at i nogle omkringliggende du undgå at skabe en miniature og lade browseren til at vise billedet mindre, at tvinge de attributter, width i TAG IMG

Brugen af miniature har to umiddelbare fordele: den nedsatte belastning er ekstremt hurtig og destruktionsanstalten er godt, eller er det udbytte, at vi har valgt (for eksempel hvis vi har forberedt miniature med Photoshop). I modsætning, som nævnt, er vi nødt til at forberede to separate billeder og eventuelle ændringer til webstedet bør tage hensyn til denne faktor.

Tvinger os en mindre størrelse er ikke fremskynde processen med at hente billedfilen sig selv: hvis jeg har et billede på 8000x8000 pixels og monster som thumbnail 100x100 pixels, browseren vil comuqnue downloade et billede 8000x8000 og efter at have foretaget en resize !

Jeg har nogle prøver med forskellige browsere på Windows Vista ved hjælp af 4 billeder fra 1024x768 pixels ridimesionate en 100x90 pixel, og her er resultaterne af udbytte på anden browser.

FireFox 2.0.0.11 image (dårlige)
image

Microsoft Internet Explorer 7 image (dårlige)
image

Opera 9.24 image (fine)
image

Safari 3.0.4 (523.12.9) image (mynte)
image

Safari vinder over alle, med et udbytte virkelig gode i form af tid at downloade. Firefox og IE7, overraskende nok, er næsten identisk med FireFox synd. Opera er et halvt, med et udbytte langt bedre end IE7 og Firefox, men lavere end den, der stravince Safari!

Related Post

Xopus: XML i WYSIWYG editor

Tirsdag den 13 marts 2007

Xopus er en XML-editor (HTML) i WYSIWYG mode arbejder inde i browseren. Jeg havde allerede bemærket nogen tid siden, takket være en artikel udgivet den Ajaxian. Det kan tale nu, hvad der er stadig en interessant forslag i lyset web2.0/editor. Det er en interessant oplevelse! Xopus har udviklet sig meget godt (med støtte italiensk), med en fremragende gennemførelse af kontekstmenuen, men stadig ikke helt på tværs af browser, den nuværende release 3.1 understøttes kun Microsoft Internet Explorer (version 6 og 7 ), Dog udviklere har lovet hurtigst mindst en version kompatibel med Firefox (1 februar blev frigivet i alpha-version 3.1.1 forenelig Firefox 2.0 +).

Som allerede omtalt andetsteds, spørgsmålet om kompatibilitet (cross browser) ved hjælp af browseren, bremser og påvirker udviklingen af instrumenter, herunder manglende brug af teknologier som Java-applet eller Adobe Flash, kan give et betydeligt bidrag til fællesskabet! Conttibuto forhindret - i slutningen - fra unødvendige interne kampe i de nuværende producenter af browsere: IE, Firefox, Opera, Mozilla, Safari, ... !

Se demo der er også noget mere end simpel HTML-editor, for at sige det på en enkel måde. Xopus foreslår, er den klassiske struktur geninstallere både stil avancerede funktioner i Microsoft Word. Du kan i øvrigt lagt på siden reelle intelligente objekter, der opfylder visse karakteristika, der gør Xopus en bestemt sag.

Som anført på:

Xopus er en god løsning for enhver virksomhed, som har en back-end content management system og en frontend-udgivelse-system og derfor to systemer, der anvender de samme oplysninger. At strukturere disse oplysninger, for at gøre begge ender mødes, er derfor et must.

Digtere se video demonstration, der bringer den avancerede redigeringsfunktioner. Du kan også prøve direkte en demo.

Related Post

Web2.0: Adobe forsøger at Apollo?

Tirsdag den 13. februar, 2007

Apollo er den kode, navn (for nu) af et ambitiøst projekt for verden Adobe RIA (Rich Internet Applications) og web2.0, herunder Ajax. Nogen mindede Macromedia Contribute, Macromedia Central til en anden. Der er også dem, der ser på Apollo blotte union - eller evne - til at samle elementer Flash og PDF (blandt andre ting, der allerede er gjort med Flash Paper)!

Fortsæt læsning ... "

Related Post

browsershots.org: flere browser output

Tirsdag den 23. januar, 2007

Her er svaret på dramatisk uoverensstemmelser med de forskellige webbrowsere. Browsershots.org er en service - fri for nu og open source - som giver en nem måde at kontrollere, om et websted vises på samme måde på forskellige platforme og forskellige browsere.

Takket være en lille server-gård husmor, forfatterne af denne værdifulde tjeneste til rådighed for at bringe produktionen af video-skærme er genereret af din Internet, så du kan kontrollere rigtigheden af fortolkning HTML / CSS på forskellige maskiner og browser: PLD Linux 2.0 ( AC), Windows 2003 (Server), Windows NT 5.1 (XP), Mac OS X 10.4 (Tiger) og andre.

browsershot-serverform

Webstedet er meget godt taget sig af med en dokumentation wiki, kilde, køreplan og tidslinjen. Også kan du se de nyeste screenshots, staten code-of-processen og den regel af fabrikker. Det eneste ømme punkt, men overvindes, er den tid, der kræves for den generation af screen-shot, nogle »langsom! Men det er en stor hjælp for Web Developer at kontrollere rigtigheden af deres arbejde, uden at skulle installere browseren og / eller virtuelle maskiner til at leve - for eksempel - Internet Explorer 6 og 7. Støtter stort set alle browsere, fra Safari til Firefox. Interessant, er muligheden for verifcare IE6 og IE7, sammen med versionerne 5.01 og 5.5.
Bravi!

Related Post

100 mio IE7 installeret! Safari til Windows?

Fredag den 12 januar 2007

Mens Microsoft, gennem sin blog om IE7, announce gongolante "fabelagtige" tal på 100 millioner installationer af IE7 i de første dage af januar 2007, flytter punkter på en sandsynlig version af Safari (også kendt hvis den nu forældede browser - indfødte -- til Mac) til Windows.
Microsoft på sin side er glad for at se, at IE7 er det andet mest anvendte browser efter IE6.
Alt dette sker, når der mange steder stadig er mangler i IE7, og det er forstået den absolutte tillid ved at Microsoft i sin nye browser, i "view" af fjernelse selv af syne (undskyld spille på ord)!
Det er derfor meget nødvendig "for at bringe" Safari på Windows?
Mary Jo Foley, i sin blog, forsøgt at spørge brugerne. Afstemning også dig.
For nu er resultaterne:

Tydeligt, hvis disse "rygter" er sandt, iPhone, den nyeste spekulerer Apple, kan inddrages på en eller anden måde.
Helt sikkert den nye Apple iPhone er bedre at bruge Firefox eller Opera, hvor Apple gør dette muligt. På en normal Mac, i henhold til slutbrugeren, Safari mister lange skud, der gør innavigabili nogle websteder.
Men vi kan skimte i disse spekulationer, at præsentationen af den nye Apple iPhone har rystet noget.

Related Post