Arquivo da categoria HTML/CSS/Javascript

Adobe libera BrowserLab

Postado por Weverton Naves em Geral, HTML/CSS/Javascript. 4/Junho/2009.

Fala galera.

browserlab

Acabou o sofrimento dos desenvolvedores para desenvolver sites cross-browser. Tá, vamos ser mais realistas, o sofrimento pode não acabar, mas será amenizado.

A Adobe liberou 5 mil donwloads (esgotados :( )da sua nova ferramenta, o Adobe BrowserLab.
É um aplicativo onde será possível renderizar os sites simulando vários navegadores diferentes, com a capacidade de até fazer sobreposição das versões, para fins de comparação.

Se você está sabendo disso só agora, provavelmente não terá sua cópia, mas não se preocupe, a Adobe irá liberar em julho novos testes para cadastrados. Aproveite e cadastre-se já.

A Adobe também conta com a integração do BrowswerLab com o Dreamweaver CS4, através de um plugin .mpx, o que facilita na visualização de sites que ainda não foram publicados. Você já pode baixar o plugin neste link.

adobe-browser

Chega daquele “lengo-lengo” de deixar vários navegadores instalados. A ferramenta ainda está em testes, mas aposto muito no seu sucesso, será uma revolução na homologação de layouts e funcionalidades de sites e aplicativos web.

Dica do amigo Julio Bianco.

, , , , ,

3 Comentários

Visualizador de fontes

Postado por Weverton Naves em HTML/CSS/Javascript. 5/Maio/2009.

Falae galera.

Essa mini-ferramenta que criei está sendo bem útil para mim no desenvolvimento dos layouts para web. Geralmente o anti-alias dos programas de edição não costumam ser fiéis à rederização da aplicação do css nas fontes, quando exibidas no browser.
Daí então criei esse html bem básico para fazer o tira-teima e visualizar como a fonte escolhida no layout vai ficar no html.
Não é nada sofisticado, só uma aplicação bem útil.

visualizarfontes

Baixe a mini-ferramenta aqui.

Abs.

, , , , , ,

5 Comentários

Niceforms – Mudando a cara dos seus formulários

Postado por Weverton Naves em HTML/CSS/Javascript. 26/Junho/2008.

Galera.

Esse código que o badboy.media.design (Lucian Slatineanu) criou é muito massa. Dá pra mudar a cara dos formulários, e não deixar só aquela coisa “dura” dos forms padrões do ie e ff. Os efeitos superam o que a gente consegue com css, já que podemos aplicar imagens de fundo nos inputs e selects da vida…

É muito fácil de aplicar:

1º – Salve a pasta images que vem no .zip no seu site.
2º – Coloque o seguinte código no <head> do seu html:
<script language=”javascript” type=”text/javascript” src=”niceforms.js”></script>
<style type=”text/css” media=”screen”>@import url(niceforms-default.css);</style>

3º – Aplique a classe niceforms no seu formulário, adicionando o seguinte parâmetro na tag <form>:
class=”niceform”

Veja um exemplo
Faça o download da versão 2.0 

, , , , , , , , ,

10 Comentários

Sombra em CSS + Javascript

Postado por Weverton Naves em HTML/CSS/Javascript. 13/Maio/2008.

Salve galera!

Estou aí de novo. Meio sumido, mas de volta!
Vou postar  aqui um código que utiliza CSS + Javascript para dar sombra em texto, div e parágrafo.

O autor do código é Michael Burt, o seu código está disponível em:
http://www.dynamicdrive.com/style/csslibrary/item/css-gradient-shadow/

Também vale a pena já dar uma olhada neste site de onde está o código, muito legal.

Baixe o arquivo aqui.

, , , ,

3 Comentários

Ferramentas úteis para CSS

Postado por Weverton Naves em Geral, HTML/CSS/Javascript. 19/Março/2008.

Galera, segue aqui algumas ferramentas online úteis para trabalhar com css:

csstypeset.jpg
CSS Typeset
Visualize a formatação do seu texto em tempo real, inclusive o css, nesse formatador online.
http://www.csstypeset.com/

CSS SandBox
Teste e aprenda css nessa ferramenta. É só clicar e aplicar o estilo em um modelo.
http://aurelio.net/css-sandbox/

izymenu.jpg
Izzy Menu
Construa seus menus suspensos nesta ferramenta (muito bom)
http://www.izzymenu.com/

, , , , ,

Sem Comentários

Aplicando o Lightbox 2 em sua página

Postado por Weverton Naves em HTML/CSS/Javascript. 13/Março/2008.

Galera, já surgiu aquela necessidade de fazer uma visualização de fotos mais eficiente e rápida de fazer.
Então, eis a solução, o LightBox 2 (by Lokesh Dhakar). Existem muitos lightboxes por aí, mas esse eu acho o mais simples de usar, e mais direto.
O lightbox utiliza o framework prototype e a biblioteca de efeitos Scriptaculous.

Vamos aprender aqui á usá-lo. Baixe aqui o exemplo.

lightbox.jpg

##INTALAÇÃO

1º Coloque os 3 arquivos .js no seu site, e inclua-os no header:
<script type=”text/javascript” src=”js/prototype.js” mce_src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder” mce_src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js” mce_src=”js/lightbox.js”></script>
2º Coloque o arquivo .css no seu site, e inclua-o no header:
<link rel=”stylesheet” href=”css/lightbox.css” mce_href=”css/lightbox.css” type=”text/css” media=”screen” />

3º Coloque as imagens da pasta images no seu site, e cheque se no arquivo .css, as imagens prevlabel.gif e nextlabel.gif estão referenciadas corretamente, e também as imagens loading.gif e closelabel.gif no arquivo lightbox.js.

http://www.huddletogether.com/projects/lightbox2/

 ##ATIVAÇÃO

1º Nos links que você quer abrir o lightbox, só adicionar o atributo rel=”lightbox” na tag <a>:

<a href=”images/minhaImagem.jpg” mce_href=”images/minhaImagem.jpg” rel=”lightbox” title=”Meu Título”>Abrir imagem</a>

O atributo title informa qual será o título do box.

2º Para um grupo de imagens, onde os botões de próximo e anterior serão ativados, coloque o nome do imageset entre chaves, assim:

<a href=”imagens/imagem1.jpg” mce_href=”imagens/imagem1.jpg” rel=”lightbox[setImage]“>Abrir imagem 1</a>
<a href=”imagens/imagem2.jpg” mce_href=”imagens/imagem2.jpg” rel=”lightbox[setImage]“>Abrir imagem 2</a>
<a href=”imagens/imagem3.jpg” mce_href=”imagens/imagem3.jpg” rel=”lightbox[setImage]“>Abrir imagem 3</a>

Isso aí galera. Prático, fácil e rápido de instalar. Vale a pena usar!
Lembrando que não dá pra abrir .swf via lightbox. A não ser que seja feita uma alteração no código .js. 

, , , ,

38 Comentários

FancyForm

Postado por Weverton Naves em HTML/CSS/Javascript. 12/Março/2008.

Galera.

fancyform.gif

Olha que legal essa extensão para mootools que achei. Com ela dá pra fazer CSS replacemente de checkbox e radio no Html, e dá pra fazer uns lances bem legais.

Segue o link:
http://lipidity.com/fancy-form/

, , , , ,

1 Comentário

URL Encode Javascript

Postado por Weverton Naves em HTML/CSS/Javascript. 11/Março/2008.

Pessoal, muitos devem conhecer a função escape, que codifica uma string para formato url.
Mas poucos sabem que existem alguns caracteres que não são codificados, para corrigir esse problema, é só utilizar a função abaixo:

 function URLencode(sStr) {
    return escape(sStr).
             replace(/+/g, ‘%2B’).
                replace(/”/g,’%22′).
                   replace(/’/g, ‘%27′).
                     replace(///g,’%2F’);
  }

Fonte: http://www.dsromero.com.br/noticias/javascript/urlencode_javascript.html

 Abs.

, , ,

Sem Comentários

Transição de imagens com Javascript

Postado por Weverton Naves em HTML/CSS/Javascript. 3/Março/2008.

transicoesimagemjavascripts.jpg

Galera.

Vi que muitos estavam procurando transição de imagens via Javascript, aqui vai um link bem interessante, com alguns efeitos de transição.

Exemplo

Baixe os arquivos

, , ,

1 Comentário

Filme em ASCII no navegador.

Postado por Weverton Naves em HTML/CSS/Javascript. 26/Fevereiro/2008.

Pra quem não conhece, vale a pena dar uma olhada no link abaixo:
http://www.justbewise.net/matrix2.html

animascii.gif

Daí eu fiquei pensando “Como será que o kra fez isso heim?” E daí comecei a juntar os conhecimentos (Javascript + ASCII + Ajax) e…. tcharam!!! Fiz um igual..srsr

Para fazer a sua própria animação, você vai precisar do convertor de imagens em ASCII, que pode ser encontrado aqui.
A dinâmica do filme é simplesmente inserir o conteúdo deste ASCII em uma div. No meu caso, eu deixei os arquivos externos e fiz uma função em javascript para ler arquivo por arquivo a cada meio segundo e exibir o conteúdo em uma div.

Se você tem um filme em .wma ou .mpg, o conselho é importá-lo no flash e depois exportar como sequencia de .jpgs. Após isso, para converter todas as imagens em ASCII, vá no menu File > Batch Conversion.

Após isso, insira uma div no seu documento com id=”exibe”.
A função javascript na página é essa:

var n = 1;
function exibe(){
var div = document.getElementById(‘exibe’);
aa=n.toString();
if(aa.length==1){
aa=”000″+n.toString();
}else if(aa.length==2){
aa=”00″+n.toString();
}else if(aa.length==3){
aa=”0″+n.toString();
}else{
aa=n.toString();
}
ajaxGet(‘ASCII-video’+aa+’.txt’,div,false);
//div.innerHTML = replace(div.innerHTML,’n',’<br>’);
if(n==220){
clearInterval(intId)
}else{
n++;
}
}
intId = setInterval(exibe,90);

Agora, existe só um segredinho no carregamento do ajax para que o conteúdo apareça formatado da maneira correta, no nosso caso, texto é a variável que recebe o responseText do Ajax, devemos fazer um tratamento dele antes de jogá-lo na div, da seguinte maneira:

texto= ‘<pre><font face=”Courier New, Courier, mono” color=#000000 size=1>’+texto+’</font></pre></div>’;

É isso aí, vale a pena fazer um filminho desses pra mostrar pra galera.

Baixe um exemplo aqui.

* A função ajax foi desenvolvida por micoX (http://elmicox.blogspot.com/)

, ,

Sem Comentários