jQuery: cantos arredondados em imagens de sobreposição

Quinta-feira, 30 de outubro de 2008

Devido às diferentes renderização dos vários navegadores, que são certamente o Microsoft Internet Explorer em mente, devemos sempre recorrer a artifícios para aplicar efeitos que agora deve ser um padrão. O multi-discutidas bordas arredondadas são um exemplo clássico do "desastre" produzido pela completa incapacidade de alcançar um padrão de graves renderização de HTML / CSS. Existem muitas soluções on-line que permitem que você obtenha os "efeitos" (efeitos isentando dall'HTML presentes como cantos arredondados, sombra efeitos, reflexões, etc ...), com manchas nas folhas de estilos, truques especiais com o uso de div enxertadas, bibliotecas Javascript, uso de canvas etc ...
Para puramente educacional gostaria de explicar mais técnica (cross-browser) para aplicar os cantos arredondados para imagens:

Demo e fonte

Continue lendo ... "

Related Post

CSS3: alguém já viu o Internet Explorer?

Quinta-feira, 16 de outubro de 2008

Eu próprio não ...

CSS:
  1. p (
  2. / * Cantos arredondados * /
  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 contra todos: um benchmark com 5 navegador

Quarta-feira, 17 de setembro de 2008

imagem Um bom programador não tem nenhum problema para passar de uma linguagem de programação para outro. A escolha de se concentrar em uma determinada linguagem, enquadramento e ambiente de desenvolvimento, é mais ditada pela disponibilidade de tempo eo tipo de trabalho que se realiza. No entanto, um importante fator que pode influenciar a escolha do "quadro" gosto, é a simpatia ou a doença que pode amadurecer ao longo do tempo.
Especificamente, eu queria analisar alguns - não todos - Javascript quadro disponíveis hoje, porque "aconselhados" a ter um olhar especial jQuery.
Os criadores do mootools (um dos mais populares Javascript quadro) têm disponibilizado uma ferramenta para realizar um teste de velocidade e validade de cinco conhecidos Javascript quadro: Slickspeed. Este teste, os resultados não desconto em tudo, é importante que o quadro operacional do lado do cliente JavaScript, que são conduzidas pela nossa navegador. É precisamente por esta razão que alguns encontrar Safari mais rápido que o Internet Explorer ou o Google Chrome mais rápido do que o Firefox. No entanto, esta muitas vezes depende do tipo de página que você está vendo. De fato, pode muito bem acontecer que um determinado site é realmente mais "rápido" quando exibido no Safari, mas isso não significa que todos os sites será mais rápida com o Safari! Evidentemente, esse discurso é válido para qualquer outro browser.

O referencial

Nos ensaios que fizemos com Slickspeed comparação que fiz o navegador disponível em minha máquina (Windows Vista Utilmate 64bit - Intel Core 2 Quad a 2,4 GHz com 8Gb de RAM).
Infelizmente, o teste não foi capaz de funcionar com o Internet Explorer 7, que bloqueou o carro, mesmo saindo da escala, com os resultados! Mais uma vez, parabéns Microsoft.
Eu crercato para manter o mesmo estatuto do PC durante a execução dos testes, abrir o navegador individual e não enviar qualquer outro processo em execução.

Nota: Se você sente que fazer um ou mais destes testes, você pode comentar sobre esta postagem no caso de "curioso" e resultados diferentes.

imagem

O Google Chrome foi muito rápido, com um valor de 68 (média) no teste com jQuery. O mais lento, porém, foi Flock, apesar de provenientes da mesma "mãe" Mozilla. Este mau resultado para o Flock é realmente estranho dado o seu corte Rede Social, porque é a Rede Social da Web 2.0 para explorar muitos dos Javascript quadro disponível, de modo a proporcionar uma experiência de navegação e interação verdadeiramente inovadores.
Uma surpresa beat Firefox e Opera também tem um lote », chegando mesmo a 74, no Dojo! Firefox e Safari, tudo considerado, são semelhantes, com o Safari mais rápido em testes com Mootools e jQuery.

O quadro de escolher?

Você pode badiamo para testar a velocidade de execução e não nos preocupamos com o tamanho em Kbytes do mesmo quadro, a resposta pode ser "o que é para você" ou, se preferir, "você sabe o que é melhor ou mais harmoniosa com o seu estilo de programação. "
Em última instância, estes quadros ficará um pouco de "todos (ver a utilização de US $, por exemplo), apesar de algumas diferenças importantes que podem saltar aos olhos de um perito ou realmente empurraram o uso de uma biblioteca particular. Em princípio, na verdade, tudo o que pode ser feito com jQuery, por exemplo, você pode fazer bem com mootools ou protótipo! Se jQuery tem uma sintaxe muito compacta, como todos os métodos sempre devolver o objeto jQuery base, criando assim infinitas arquivos de oggetto.metodo().metodo().metodo()... não é dizer que isto é, a todos os Custos uma força, especialmente para aqueles que terão de debug!
Bibliotecas como prototype.js talvez culpa na ausência de efeitos gráficos, mesmo simples, obrigando o dono da obra a executar como um subproduto scriptaculous.js, mais pesado e muito longe da biblioteca primeira escolha.

Um exemplo

Basta este motivo, por exemplo, levou-me para substituir acoplado protótipo / scriptaculous com jQuery para criar painéis interativos / animados aqui na barra lateral do undolog.com. Na verdade, usando a API do Google para importar a biblioteca, é um carregamento de resíduos de toda a biblioteca de uma scriptaculous slideDown e slideUp. Para informações e um exemplo, aqui é como o código Javascript juntamente com o protótipo / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( 'H2.dropdown »). Cada (
  3. element ) { function (elemento) (
  4. = "pointer" ; elemento. estilo. cursor = "pointer";
  5. 'click' , elemento. observar ( «clique»,
  6. event ) { function (evento) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; if (this. próximo (). estilo. exibir == "") Efeito novo. BlindUp (this. próximo (), (duração: 5.));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Efeito outra nova. BlindDown (this. próximo (), (duração:.) 3);
  9. event ) ; Evento. Parar (evento);
  10. )
  11. )
  12. )
  13. );

e agora é com jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( 'H2.dropdown »). Cada (
  3. i ) { função (i) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (Este). Css ( 'cursor', 'ponteiro'). Clique em (
  5. função () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (este). next (). seja ( «: hidden")) $ (este). next (). slideDown (); else $ (este). next (). slideUp ();
  7. )
  8. );
  9. )
  10. );

Em suma, um olhar mais atento, não creio que haja muita diferença! Mas como eu disse antes ... questão é "também" gosto pessoal.

Related Post

Firebug Lite: Firebug para IE, Opera e Safari

Terça-feira, 22 de julho de 2008

Usando o Firebug Lite, você pode usar uma versão simplificada da nota sobre a extensão para o Firefox Exploer Microsoft Internet browser, Opera e Apple Safari. Firebug Lite pode ser usada em duas formas: como uma chamada Bookmark ou offline biblioteca

Bookmark modo

Ao adicionar esta "especiais endereço" Firebug Lite nossos favoritos (arraste o link para favoritos) - o código é:

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

Você pode virar Firebug Lite em qualquer Web site ea partir de qualquer navegador. Este é talvez o mais interessante, embora as funções são muito limitadas.

Offline

Alternativamente, se estamos a desenvolver um Web site, você pode baixar um pacote Javascript e instalá-lo em nosso Web! Desta forma podemos usar Firebug Lite, mesmo sem uma conexão à Internet e local.

Firebug Lite é uma forma de compensar a ausência de uma tal extensão para outros navegadores, mas eu estava muito lento e limitado, especialmente em CSS! Como se costuma dizer: é melhor do que nada ...

Related Post

A redução da produção de imagens sobre o navegador

Quarta-feira, 5 de dezembro de 2007

Em princípio, quando você insere uma imagem em um documento HTML deve usar seu tamanho original. No entanto, a TAG IMG torna possível forçar a largura (largura) e altura (altura) de qualquer imagem, independentemente do seu tamanho original. Esta operação é realizada redimensionamento - naturalmente - a partir do browser.
Usando o tamanho original de uma imagem é boa, embora, em alguns casos, leva a duplicação de trabalho para o Web Designer e / ou dinâmico motores (por exemplo, bibliotecas ou manipulação de gráficos CMS) sobre o Web Server. Um clássico mostra, por exemplo, geralmente exibe miniaturas ou antevisões (imagem tamanho reduzido) mostram que, se seleccionar a imagem original maior. Isto significa que precisamos de ter duas dimensões da mesma imagem: um para a pequena miniatura e um maior um. Então, acontece que em alguns rodeiam você não criar uma miniatura e é deixada para o navegador para exibir a imagem menor, obrigando os atributos width e height da TAG IMG

O uso de miniaturas tem dois benefícios imediatos: a redução na carga é muito rápida ea renderização é bom, ou fez que temos escolhido (por exemplo, se tivermos elaborado a miniatura com o Photoshop). Inversamente, como referi, temos de preparar duas imagens separadas e qualquer mudança para o local deve ter em conta este factor.

Forçando-nos um tamanho menor, na verdade, não acelerar o processo de fazer o download do mesmo: se eu tiver uma imagem de 8000x8000 pixels e do monstro como miniaturas 100x100 pixels, o navegador vai fazer o download de um 8000x8000 comuqnue e depois de fazer um resize !

Eu fiz alguns testes com diferentes navegadores em Windows Vista, usando 4 arquivos a partir de 1024x768 pixels ridimesionate de 100x90 pixels, e aqui estão os resultados de desempenho em diferentes navegadores.

FireFox 2.0.0.11 imagem (pobres)
imagem

Microsoft Internet Explorer 7 imagem (pobres)
imagem

Opera 9:24 imagem (boa)
imagem

Safari 3.0.4 (523.12.9) imagem (excelente)
imagem

Safari ganha mais de todos, com um bom desempenho em termos de tempo para fazer o download. Firefox e IE7, surpreendentemente, são praticamente idênticas para o Firefox pecado. O Opera é um meio, com um rendimento muito melhor do que o IE7 e Firefox, mas abaixo desse stravince Safari!

Related Post

Browser War: a guerra continua?

Terça-feira, 6 de março de 2007

A Sunnyvale, Califórnia, o Yahoo cumprir o Silicon Valley WebBuilder Mike Shaver do Mozilla, Chris Wilson da equipe do Microsoft IE e Opera Hoon Lie, para enfrentar o actual estado de eterna guerra entre os navegadores.

Por estresse são as palavras de Mike Shaver do Mozilla:

Não olhe para o W3C para o futuro

E a crítica do fracasso da Apple:

Eles se recusaram a enviar alguém dizendo que "estamos ocupados escrevendo software."

Que, aliás, é de 10 quilômetros de onde foi realizada a reunião!

Related Post

browsershots.org: múltiplos navegador saída

Terça-feira, 23 de janeiro de 2007

Eis a resposta à dramática incompatibilidades com os diferentes navegadores. Browsershots.org é um serviço - gratuito para agora e open source - que fornece uma maneira fácil de verificar se um site é exibido, da mesma forma em diferentes plataformas e navegadores diferentes.

Graças a um pequeno servidor quinta-casa, os autores deste valioso serviço para fornecer a saída de vídeo telas geradas por sua Web, assim você pode verificar a correcta interpretação do HTML / CSS em diferentes máquinas e navegador: PLD Linux 2.0 ( Ac), o Windows 2003 (Server), Windows NT 5.1 (XP), Mac OS X 10.4 (Tiger) e outros.

browsershot-serverform

O site está muito bem cuidado de, com uma documentação wiki, fontes, o roteiro e cronograma. Também você pode ver as últimas imagens, o estado do código de processo, bem como o estado das fábricas. O único ponto sensível, mas ultrapassados, é o tempo necessário para a geração de tela-shot, um pouco 'lento! No entanto, é uma grande ajuda para o desenvolvedor da web, a fim de verificar a exactidão do seu trabalho, sem ter que instalar o browser e / ou máquinas virtuais para viver - por exemplo - o Internet Explorer 6 e 7. Suporta quase todos os navegadores, a partir de Safari para o Firefox. Interessante é a possibilidade de verifcare IE6 e IE7, juntamente com as versões 5.01 e 5.5.
Bravi!

Related Post

Internet Explorer 7 e Opera: um mundo aparte

Sexta-feira, 24 de Novembro de 2006

Conitnua para impressionar o total da diferença de rendimento entre os diferentes browsers no mercado. IE7 é o PNG (8-bit ou 24) de modo diferente do Firefox. Opera também não é sem algum acontecimento estranho a este respeito. Em particular, o PNG utilizado como plano de fundo são tão diferente do IE7, Opera e Firefox. Isto é o que funciona melhor do que todos e que seria tempo de navegador nome do "século"! Parabéns à equipe de desenvolvimento.

IE7 cria um bonito efeito de corte em uma PNG utilizadas como fundo repetir-x. Se você tentar criar uma imagem de 200x200 pixels com um gradiente variando de preto (0x000000) a cinza (0xeeeeee) e colocados verticalmente na CSS como fundo no corpo orizzonale repetição (repeat-x), fixando como o fundo do corpo 0xeeeeee cor - que é o fim da sombra, você irá notar que o torna perfeitamente deixando apenas FireFox, IE7 e Opera tem um bom efeito de corte (mas ligeiramente diferente !!!):, na prática, vemos o final da nossa imagem 200x200 e no início cor chapa.

Uma forma de resolver este problema é para salvar a nossa imagem em GIF ...

PNG, mas não foram apoiadas por IE7?

Related Post