AlyenStudio, designer de outro mundo ! » Javascript http://www.alyenstudio.com Portifólios, temas de SMF, temas para wordpress, notícias, downloads e as ultimas novidades... Thu, 01 Jul 2010 13:01:30 +0000 en hourly 1 http://wordpress.org/?v=3.0 Como Editar o CSS de Seu Site ao Vivo com Firebug http://www.alyenstudio.com/como-editar-o-css-de-seu-site-ao-vivo-com-firebug http://www.alyenstudio.com/como-editar-o-css-de-seu-site-ao-vivo-com-firebug#comments Tue, 06 Oct 2009 18:00:06 +0000 Alyen http://www.alyenstudio.com/?p=389 Existem pessoas que ainda perdem tempo no velho “edita, salva, alterna, atualiza” para ver as mudanças ao editar CSS de seus sites. Tipo eu, 5 minutos atrás. ;)

Como editar CSS com o Firebug

Com o Firebug, dá pra editar CSS sem ser clicando nas propriedades.

É possível editá-lo como o HTML.

Vá na aba CSS, escolha o arquivo e clique em editar.

editar css firebug Como Editar o CSS de Seu Site ao Vivo com Firebug

Vivendo e aprendendo.

PS: a WebDeveloper Toolbar faz a mesma coisa, aperte Ctrl+Shift+E.

PPS: Depois de editar, copie o código e cole no arquivo.

via pedromenezes.com

]]> http://www.alyenstudio.com/como-editar-o-css-de-seu-site-ao-vivo-com-firebug/feed 0 jQuery Tools – Muitos efeitos para seus projetos Online http://www.alyenstudio.com/jquery-tools-muitos-efeitos-para-seus-projetos-online http://www.alyenstudio.com/jquery-tools-muitos-efeitos-para-seus-projetos-online#comments Fri, 26 Jun 2009 11:27:08 +0000 Alyen http://www.alyenstudio.com/?p=295 jquerytools jQuery Tools Muitos efeitos para seus projetos OnlinejQuery Tools, é um novo plugin para jQuery com uma ampla coleção de ferramentas que te permitirão montar acordeões, superposições, efeitos de navegação, grandes efeitos visuais e todos aqueles efeitos “Web 2.0″ que vemos a diário. Este pequenos Javascript pesa só 5,8 Kb, você vai encontrar um montão de Demos, com seus correspondentes códigos pronto para copiar e usar.

Ver demos  jQuery Tools – Baixar - Via xyberneticos.com

]]> http://www.alyenstudio.com/jquery-tools-muitos-efeitos-para-seus-projetos-online/feed 0 8 Javascript para solucionar os problemas mais comuns de CSS http://www.alyenstudio.com/8-javascript-para-solucionar-os-problemas-mais-comuns-de-css http://www.alyenstudio.com/8-javascript-para-solucionar-os-problemas-mais-comuns-de-css#comments Mon, 04 May 2009 08:22:31 +0000 Alyen http://www.alyenstudio.com/?p=264 browsers 8 Javascript para solucionar os problemas mais comuns de CSSO CSS é definitivamente uma grande técnica para os desenvolvedores web. No entanto, entre os problemas de navegadores e a falta de suporte de CSS3 nos navegadores modernos, são um verdadeiro problema. Em catswhocode recopilaram 8 Javascript que permitirá solucionar os problemas mais comuns. Por exemplos Transparências, incluir classes diferentes para os diferentes navegadores, solucionar os problemas de alturas das colunas, Solucionar a vista das esquinas arredondadas, Fixing IE overflow problema.

Link  8 Javascript solutions to common CSS problems

]]> http://www.alyenstudio.com/8-javascript-para-solucionar-os-problemas-mais-comuns-de-css/feed 1 Atualiza o código de teu Google Analytics http://www.alyenstudio.com/atualiza-o-codigo-de-teu-google-analytics http://www.alyenstudio.com/atualiza-o-codigo-de-teu-google-analytics#comments Thu, 16 Apr 2009 14:55:39 +0000 Alyen http://www.alyenstudio.com/?p=257 A partir do momento em que o Google anunciou que efetuou mudanças em seu script de analytics, ele mesmo convidou os usuários a efetuar alterações em seus scripts para o novo sistema. O site PingDom mostra um gráfico em que 40% dos 10.000 sites mais populares ainda utilizam o sistema antigo (urchin.js).

3423899458 e752e85267 o Atualiza o código de teu Google Analytics

O problema de utilizar urchin.js

O problema de ainda utilizar urchin.js é que desde dezembro de 2007 o Google deixou de dar suporte ao script, dando atenção ao novo sistema ga.js, deixando 12-18 meses mais de vida para o urchin.js para realizar a migracão. Ao que tudo indica, vendo que muita gente ainda não efetuou a migração, esse prazo está se prolongando para evitar problemas (deixar de registrar visitas). Mas isso não é motivo de pânico, esse script não deixará de funcionar da noite para o dia.

Benefícios do novo script

Se o seu site ainda utiliza o sistema antigo, veja os benefícios que você está perdendo:

  • Arquivo JS menor e mais rápido
  • Detecção automática de HTTPS
  • Maior segurança com namespaces
  • Melhoras no segmento de comércio eletrônico
  • Código customizado para sites que utilizam Ajax
  • Você vai desfrutar de novas funcionalidades e relatórios

Como utilizar o novo sistema

A alteração é realmente simples, dependendo do número de aplicações em que devem ser efetuadas as alterações. Basicamente temos que efetuar a alteração no código que faz referência ao arquivo urchin.js e trocar por esse:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("SEU_CODIGO");
pageTracker._trackPageview();
} catch(err) {}</script>

Basta agora você trocar onde está indicado SEU_CODIGO para o seu código do analytics.

Via: Anieto2k

]]> http://www.alyenstudio.com/atualiza-o-codigo-de-teu-google-analytics/feed 0 Javascript Image Combobox, dar vida nas suas select http://www.alyenstudio.com/javascript-image-combobox-dar-vida-nas-suas-select http://www.alyenstudio.com/javascript-image-combobox-dar-vida-nas-suas-select#comments Thu, 16 Apr 2009 14:46:19 +0000 Alyen http://www.alyenstudio.com/?p=252 Javascript Image Combobox é um plugin jQuery que permite que nossos elementos <select/> tenha uma vida que até agora não podiam ter.

preview Javascript Image Combobox, dar vida nas suas selectSe trata de uma extensão que permite que os items dos <select/> tenham uma imagem para facilitar a seleção de items dentro de uma listagem de opções. Para isso fazem usamos um atributo (não estandar) do elemento <option /> chamado icon, que indicará de onde pegar a imagem que mostraremos junto ao <option />.

Despues com uma linha de Javascript este atributo se converterá numa imagem alojada dentro do <select />.

MSDropDown.init();

Se você quer ver uma demo de como ficaria, podes dar uma olhada clicando aqui – Via anieto2k.com.

]]> http://www.alyenstudio.com/javascript-image-combobox-dar-vida-nas-suas-select/feed 0 ColorBox – Plugin jQuery de 12kb para montar lightbox http://www.alyenstudio.com/colorbox-plugin-jquery-de-12kb-para-montar-lightbox http://www.alyenstudio.com/colorbox-plugin-jquery-de-12kb-para-montar-lightbox#comments Fri, 20 Mar 2009 10:05:03 +0000 Alyen http://www.alyenstudio.com/?p=209 colorbox ColorBox Plugin jQuery de 12kb para montar lightboxÉ realmente magnifico poder contar com diversas opções na hora de agregar efeitos a nossos projetos online. E é o caso particular dos lightbox, cada dia surgem quantidade de alternativas com tantas vantagens como desvantagens, e seguramente o motivo, será que é um dos efeitos mas utilizados no desenvolvimento web. ColorBox é outro plugin para jQuery 1.3, leve que nos permitirá atrativos lightbox.

Características interessantes de ColorBox:

  • Suporta a utilização de fotos de forma individual ou em grupos, Suporta ajax em linha, e conteúdo iframe.
  • Diversos Estilos. Aparência completamente controlada através de CSS, para que os usuários possam dar novos estilos à caixa.
  • O comportamento dos ajustes pode ser sobre-escrito, sem alterar o arquivo de Javascript ColorBox.
  • HTML Totalmente discreto, não requer mudanças nos existentes HTML
  • Efeito atraente, com discreto degradado.
  • Precarga de imagens de fundo para evitar a inflamação de unstyled
  • Leve: só 12kbs de Javascript – só 2kbs gzip e minified!
  • Escrito em jQuery .
  • Gera XHTML e CS S válido

Ver Demos: 1 – 2 – 3 – 4 -  Via Xyberneticos – Mas info e download ColorBox lightbox

]]> http://www.alyenstudio.com/colorbox-plugin-jquery-de-12kb-para-montar-lightbox/feed 6 4 Ferramentas para otimizar CSS http://www.alyenstudio.com/4-ferramentas-para-otimizar-css http://www.alyenstudio.com/4-ferramentas-para-otimizar-css#comments Fri, 27 Feb 2009 09:55:26 +0000 Alyen http://www.alyenstudio.com/?p=188 Sempre se pode otimizar os códigos, aqui vou dar uma pequena lista de ferramentas singelas e muito úteis para melhorar e reduzir o tamanho das folhas de estilos.

Para realizar nosso teste, vamos utilizar a folha de estilo de Kabytes que atualmente tem um peso de 8.256KBtrans 4 Ferramentas para otimizar CSS

  • Clean CSS : Muito fácil de utilizar simplesmente colamos o código ou lhe damos a url do mesmo.
  • CSS Teak : Similar ao anterior, com uma utilidade de que podemos baixar um widgets para OSX. É muito prático já que uma vez que subimos o arquivo para otimizar o site  nos devolve o css otimizado pronto para baixar.
  • flumpCakes : Mesma metodologia, não é tão pratico, quando gera o código otimizado temos que o copiar e colar no novo css de forma manual.
  • Icey CSS Compressor : Extremamente rápido, tem o mesmo “problema” do anterior que não gera o arquivo, você tem que o copiar diretamente do html que o site gera.

Resultados:

compresion css 4 Ferramentas para otimizar CSS

]]> http://www.alyenstudio.com/4-ferramentas-para-otimizar-css/feed 6 jQuery – Fade in/out http://www.alyenstudio.com/jquery-fade-inout http://www.alyenstudio.com/jquery-fade-inout#comments Mon, 02 Feb 2009 17:31:11 +0000 Alyen http://www.alyenstudio.com/?p=158 jqueryfade jQuery Fade in/outJquery Fade In.Fade Out – É uma libéria jquery que nos permitirá agregar efeitos de desvanecimento a qualquer elemento de nossa web, seja Texto, imagens ou todos os elementos dentro de uma DIV. Os desvanecimentos se apresentam num 30% e ao situar o nosso mouse sobre o mesmo o leva ao 100%, fazendo um efeito visual bem atraente.

Ver Demos -  Baixar o Script – Uso e Info Jquery Fade In.Fade Out

Fonte visual-blast

]]> http://www.alyenstudio.com/jquery-fade-inout/feed 0 Sexy Page Curls – Dobrar as esquinas com jQuery http://www.alyenstudio.com/sexy-page-curls-dobrar-as-esquinas-com-jquery http://www.alyenstudio.com/sexy-page-curls-dobrar-as-esquinas-com-jquery#comments Mon, 26 Jan 2009 09:20:38 +0000 Alyen http://www.alyenstudio.com/?p=148 sexy curl pluginEstes efeitos normalmete era gerado mediante javascript + imagens + .sfw (flash). Sexy Page Curls, mostra outra alternativa, esta vez baseada em Jquery, com um efeito tão atraente como os demais e com o mesmo fim.

Link Sexy Page Curls

Via webmasterlibre

]]> http://www.alyenstudio.com/sexy-page-curls-dobrar-as-esquinas-com-jquery/feed 2 $fx() – JavaScript animation library http://www.alyenstudio.com/fx-javascript-animation-library http://www.alyenstudio.com/fx-javascript-animation-library#comments Mon, 26 Jan 2009 09:13:13 +0000 Alyen http://www.alyenstudio.com/?p=145 $fx()

$fx()

$fx() ver 0.1 é um pequeno e realmente muito flexível Javascript para animar elementos HTML. Permite alterar qualquer propriedade CSS, combinar efeitos em corrente ou em paralelo, também tem capacidade para estabelecer diferentes chamadas que lhe dá ainda mais flexibilidade.

Os exemplos e as idéias de como implementar me deixou fascinado, asim que dediquem um pouco de tempo para ver de que se trata.

Link  $fx() ver 0.1 -Exemplos e Manual de uso – Baixar

]]> http://www.alyenstudio.com/fx-javascript-animation-library/feed 0