jQuery: arestas redondas sobre as imagens para sobrepor

Quinta-feira, 30 de outubro de 2008

Devido às diferentes renderização entre navegador diferente, o que certamente ver o Microsoft Internet Explorer em mente, devemos recorrer à semper artifizi aplicar para efeitos que agora deveria ser uma norma. O multi-discutidas arestas arredondadas são um exemplo clássico do "desastre" produzido pela total incapacidade de alcançar um padrão sério na página renderização HTML / CSS. Existem numerosas soluções de rede que permitem que você tem "efeitos" (efeitos isentando dall'HTML presentes como arestas arredondadas, sombra efeitos, reflexos, etc ...) com manchas nas folhas de estilos, usando truques especiais div enxertadas, bibliotecas Javascript, o uso de canvas etc ...
Por puramente educacional mais gostaria de explicar técnica (cross-browser) para aplicar à arestas arredondadas das imagens:

Demos e fontes

Continue a ler ... "

Post relacionado

Crie aplicações com o Google Desktop Chrome e FireFox?

Terça-feira, 28 de outubro de 2008

Chrome Google permite criar aplicações desktop a partir de uma página da Web? De fato, como mostrado no item de menu, é permitido apenas para criar um atalho para um atalho que - por sua vez - abre uma janela sem a barra de endereços, sem todas as peneiras do navegador. Com isto não quer dizer que nós criamos um ambiente de trabalho e acabamos de criar um link para o mesmo Google Chrome modo - por assim dizer-cromo-menos.

Simla recurso, mas mais ambicioso, já tinha sido proposto pela Fundação Mozilla em 2007 através do Prisma. Este é certamente o mais versátil e articular, acompanhada por uma útil extensão que lhe permite criar aplicações desktop menu do Firefox, como a Google Cromo.

No entanto, ambas as soluções estão longe da tecnologia Adobe AIR. Antes que alguém está a confundir o bom salientar as diferenças substanciais entre um atalho na área de trabalho, que abre uma janela sem menus, e uma aplicação desktop verdadeira e correcta.
Adobe AIR, de fato, ao contrário das soluções propostas pelo Google Chrome e Prism permite:

  • Praticamente completo acesso ao sistema executando o aplicativo com a habilidade de ler e gravar arquivos. Oportunidade para alargar as suas funcionalidades através de uma DLL (biblioteca de vínculo dinâmico), ampliações e produtos de terceiros como SRU Player (ver Distribuir o Adobe AIR: AIR Badge por uma SRU Player)
  • Gere o pedido como qualquer outro sistema de candidaturas: instalação e desinstalação

Post relacionado

jQuery contra todos: um benchmark com 5 navegador

Quarta-feira, 17 de setembro de 2008

imagem Um bom programador não tem qualquer problema para se deslocar de uma para outra linguagem de programação. A escolha de se concentrar em um determinado idioma, 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ível hoje, porque "aconselhada" a olhar, essencialmente, a jQuery.
Os criadores do mootools (um dos mais populares Javascript quadro) tornou disponível uma ferramenta para executar um teste de velocidade e de validade de cinco conhecido quadro Javascript: Slickspeed. Este teste, os resultados não desconto em tudo, é importante uma vez que o enquadramento Javascript do lado do cliente, que é executado pelo nosso 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 sítios serão mais rápidas com o Safari! Evidentemente, esse discurso é válido para qualquer outro navegador.

O benchmark

Nos testes realizados com I Slickspeed eu ter comparado o navegador disponível em minha máquina (64bits do Windows Vista Utilmate - Intel Core 2 Quad 2,4 GHz com um 8GB de RAM).
Infelizmente, os testes não são capazes de executá-lo com o Internet Explorer 7, porque o bloqueio do automóvel, indo até mesmo fora de escala, com os resultados! Mais uma vez, parabéns Microsoft.
Eu crercato idêntico para manter o status do PC durante o ensaio, abrindo o navegador em separado e não enviar mais ninguém executando o processo.

Nota: Se você sente que fazer um ou mais destes testes, pode comentar este post, em caso de "curioso" e os diferentes resultados.

imagem

Google Chrome é realmente rápido, com um valor de 68 (média) no teste com jQuery. O mais lento, porém, ela apareceu Flock, apesar de provenientes do mesmo "mãe" Mozilla. Este mau resultado para o Flock é verdadeiramente curioso dado o seu corte Rede Social, porque é a Rede Social da Web 2.0 explorar muitas das Javascript quadro disponível, de modo a proporcionar uma navegação e interação verdadeiramente inovador.
Uma surpresa bater FireFox e Opera também tem um monte ", mesmo recebendo um 74 do Dojo! Firefox e Safari, afinal, são similares, com o Safari mais rápido em testes com Mootools e jQuery.

Que quadro escolher?

Se não 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ês", ou, se preferir, "você sabe o que é melhor ou mais harmoniosa com o seu estilo de programação ".
Em última análise, estes quadros irá olhar um pouco "todos" (veja o uso de US $ por exemplo), apesar de algumas diferenças importantes e substanciais que podem saltar aos olhos de um perito ou mesmo empurrado em uma biblioteca particular. Em princípio, na verdade, tudo o que pode ser conseguido com jQuery, por exemplo, você pode fazer assim com mootools ou protótipo! Se jQuery tem uma sintaxe muito compactos, como todos os métodos semper voltar a jQuery objeto base, criando assim infinitas arquivos de oggetto.metodo().metodo().metodo()... não é dito que este é, a todos os Custos uma força, especialmente para aqueles que terão de debug!
Bibliotecas como prototype.js pecado talvez na ausência de efeitos gráficos, mesmo simples, forçando o dono da obra a executar como subproduto scriptaculous.js, pesados e distantes da biblioteca primeira escolha.

Um exemplo

Apenas esta última razão, por exemplo, levou-me para substituir o protótipo acoplado / scriptaculous com jQuery para fazer os painéis interativos / animada aqui na barra lateral da undolog.com. Na verdade, mesmo usando a API do Google para importar bibliotecas, é um desperdício carregar a biblioteca inteira slideDown um e scriptaculous para slideUp. Para informações e amostra, aqui ontem código Javascript, conjugada com o protótipo / scriptaculous:

JavaScript:
  1. / / Protótipo / 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. display == "") Efeito novo. BlindUp (this. próximo (), (duration. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Efeito mais novos. BlindDown (this. próximo (), (duração:. 3));
  9. event ) ; Evento. Stop (evento);
  10. )
  11. )
  12. )
  13. );

e agora é com jQuery:

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

Afinal de contas, de todo em todo, não creio que haja muita diferença! Mas como eu disse antes ... questão é "bem", de gosto pessoal.

Post relacionado

Flick e Rebanho

Terça-feira, 19 de agosto de 2008

Se há algo que o Mozilla tem bons navegadores!

Rebanho

Flock é um navegador com uma variedade de funções para as redes sociais e blogs. Disponível para Mac, Windows e Linux oferece uma nova experiência de navegar em quem, como eu, tem várias contas na rede social (Facebook, Twitter, YouTube, ...) e também irá lidar com RSS feeds tão suave e rápida.

Instalação

Se você tiver FireFox (que você não deve remover) todas as suas configurações podem ser transferidos em revoada durante a primeira utilização: cookies, senhas, favoritos, tudo curto. Depois de usar Flock por alguns minutos, eu vim retirar espontaneamente o excelente FeedReader agora desnecessária, dado o excelente gestão de alimentação do rebanho.

Recursos

Além de possuir muitas características semelhantes às FireFox, o que torna imediatamente disponíveis, Flock permite:

  • Blog do Editor
    Simples mas eficaz editor para a publicação dos Correios em nosso blog. Apoia as duas plataformas como WordPress blog pessoal, Vivo e Blogger Oficial. Excelente as "notas", o Web Clipboard, encontrado em várias partes do navegador
  • Painel Popular
    Através da simples Drag & Drop você pode ligar instantaneamente e compartilhar imagens com os nossos contactos, recuperada a partir de Twitter, Facebook, YouTube e Flickr
  • Media Bar
    Bando pode reconhecer automaticamente muitos recursos quando você entra um Web site (ou blog Rede Social). Por exemplo digitando Flickr ou o YouTube é um Apera Media Bar, localizado na parte superior onde você pode rolar horizontalmente filmes e fotos que permite-lhe enviar ou copiar o conteúdo imediatamente
  • Search Engine
    A gestão da investigação é totalmente personalizável (como já acontece no FireFox, graças ao padrão Open Search) tornando possível adicionar facilmente um número alternativo de motores de busca, tanto a partir de uma lista proposta no site do Flock é através do reconhecimento automático nesta um site
  • Extensões e plugins
    Mesmo Rebanho como FireFox já tem inúmeras prorrogações, uma arma que se revelou bem sucedida para o FireFox. Algumas são especificamente para o Flock, mesmo que você pode encontrar algumas "portabilidade" das notas FireFox extensões
  • Gestão de envio de fotos
    Com Photo Uploader, você pode usar uma revoada interno para enviar rapidamente sobre as nossas fotos Flickr ou Facebook.

Post relacionado

Safari, elimine o limite azul em campos de entrada de

Segunda-feira, 14 julho, 2008

Safari, browser da Apple disponível para Windows, produz um limite azul (blue fronteira) quando você clica dentro de um campo input Se, em alguns casos, pode ser agradável, outros tornam-se realmente chato! Para apagar basta entrar na nossa folha de estilos:

CSS:
  1. / * Remover ____________________________ fronteira azul * /
  2. : 0 none } input (esquema: 0 none)

Ou, alternativamente, diretamente do atributo tag input

HTML:
  1. ... <input style = "esboço: 0 nenhuma" ... />

Post relacionado

Digite o texto com CSS: IE7, um mau negócio

Terça-feira, 10 de junho de 2008

Mais uma vez, quando encontro-me escrever sobre as capacidades de folhas de estilo, sou forçado a pôr de lado o Microsoft Internet Explorer! Com CSS2 foi introduzida uma característica muito interessante, propriedade content usado em conjunto com os before after Através deste "estilo" pode alterar o conteúdo de um site agindo exclusivamente sobre o arquivo CSS. Por exemplo, se escrever:

CSS:
  1. content : ">>" } li: antes (conteúdo: ">>")

Uma lista LI será precedida de cada personagens ">>"! Qualquer coisa, é claro, podem ser tratados desta maneira:

HTML:
  1. fogli di stile </span> </p> <p> pode inserir caracteres com <span> CSS </ span> </ p>

CSS:
  1. content : "-->" } p span: antes (conteúdo:) "-->"

A versatilidade deste elemento não acaba aqui! Você pode usar outros parâmetros para além da simples (mas útil) texto. O content também permite que valores especiais ou url:

CSS:
  1. content : url ( images/quote.gif ) } p: antes (conteúdo: url (imagens / quote.gif))
  2. content : close-quote } p: after (conteúdo: close-citação)
  3. content : url ( waves/sound.wav ) } p: antes (conteúdo: url (ondas / sound.wav))

Para mais detalhes sobre implementar remeter directamente para a W3C - pena que nem sequer Microsoft!

Post relacionado

FireFox 3 RC1 Acid 3

Terça-feira, 3 de junho de 2008

Acid Test 3

Estamos no bom caminho do que antes! :)

Post relacionado

FireFox 3: Estou ansioso

Quinta-feira, 8 de maio de 2008

Eu deter durante algum tempo, faça o download da versão beta do Firefox 3! Use FireFox todos os dias, então não quero que todos scasinare para a pressa. No entanto, não vejo apenas o tempo que ele atinja o lançamento oficial desta fantástica navegador, que com a liberação 3 promete maravilhas que eu tive o prazer de experimentar em outra máquina (beta 5).

FireFox 3

Continue lendo ... "

Post relacionado

Quatro navegadores: 3 Acid Test uma decepção ...

Sexta-feira 28 de março de 2008

Parafraseando o filme Quatro Irmãos, aqui é quem já passou o Acid Test 3!

imagem

Do canto superior esquerdo: IE7, Opera, Safari, FireFox! Todas as versões recentes do Windows Vista 64 bits! Um desastre! ;)

Post relacionado

Tunneling e servidores proxy para Ajax e além

Segunda-feira, 10 de dezembro de 2007

Devido à sua capacidade de se comunicar com o servidor, o objeto XMLHttpRequest (XHR), utilizada na tecnologia Ajax (abreviação de Asynchronous JavaScript e XML, cuja pronúncia seria "egiacs" mesmo que prefere italianos "aiacs"), tem um bloco de protecção que o impeça de executar aplicações fora do domínio em que opera. Esta protecção é necessária para prevenir o Javascript Injection (técnicas de "injecção" extremamente perigoso código, a fim de violar o sistema), de variados tipos, com o objectivo final de "break" no sistema.
Este limite é agora levada a sério e está pensando em alguma maneira de resolver isto - diretamente no XMLHttpRequest - sem colocar em perigo a segurança (veja também: Terceira proposta de cross-site extensões para XMLHttpRequest).

No entanto, a situação hoje é a seguinte:

XHR

Continue lendo ... "

Post relacionado