02/10/2008 - 17:44

Calculadora de Juros

Vira e mexe alguns de nós, por falta de dinheiro ou por displicência, acabamos atrasando o pagaento de alguma conta.

Tinha que pagar o IPTu de minha casa, me esqueci de pagar a primeira parcela e “temendo” ir ao banco acabei atrasando algumas parcelas. Resolvi pagá-las, mas precisava saber quanto, mais ou menos, eu pagaria de juros para que pudesse sacar do banco. Pensando nisso, acabei criando um script que calcula o valor do juros e da mora.

A primeira versão, faz o cálculo de porcentagem, ou seja, você coloca o valor do boleto o valor em porcentagem da multa, o valor em porcentagem da mora e a data data para pagamento. O script calcula quantos meses está atrasado e a partir daí dá o valor que, provavelmente, você terá que pagar. Eu digo provavelmente, pois não conheço muito bem as nuances dessas coisas.

Se por um acaso vocês acharem que os cálculos estão errados e puderem me dizer o porque, eu fico agradecido, assim posso alterar e deixar bem funcional para que todos possamos usá-lo.

Clique aqui para abrir a calculadora

Enviado por: Leandro Garcia - Categoria(s): JavaScript, dicas Tags relacionadas: , , ,
02/10/2008 - 00:19

O que é e para que serve um DOCTYPE?

O que é?

O doctype é a maneira de você dizer para qualquer navegador como ele deve agir ao ler seu código HTML.

Uma estórinha…

Certa vez Joãozinho, programador web experiente e usuário de firefox, programou seu site vendo-o apenas no firefox. Ele já esperava que quando fosse abrir pelo Internet Explorer fosse acontecer alguns problemas de layout, normal, porém o que ele viu deixou-o perplexo… Seu site, todo seu trabalho de dias e horas estava totalmente quebrado. Xingou a Microsoft por seu software. Resolveu abrir no Opera, no Safari, no Google Chrome, e… Tudo estranho. Joãozinho ficou desesperado, arrancando seus cabelos, mas como programador experiente que é, parou. Saiu, se acalmou e foi avaliar seu código. Seu primeiro passo foi validar seu código via W3C e para sua surpresa, o erro era simples, faltava o DOCTYPE.

Moral da estória… preste atenção no que você faz!

Por que a falta do DOCTYPE no site do João zinho causou tantos problemas?

Porque cada browser tem um padrão próprio de renderizar o HTML sem DOCTYPE.

Bela estória Garcia. Mas me diga uma coisa, Que tipos de DOCTYPES existem e onde colocá-los em meu código?

Até onde sei são quatro tipos para cada compilação HTML (HTML 4.0, HTML 4,1, XHTML, etc).

Os DOCTYPES devem ser a primeira coisa que um browser lê em seu código HTMl, ou seja, na primeira linha.

Quais são eles?

Strict, Transitional e Frameset.

XHTML STRICT

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

O Strict é o “melhor” uma vez que ao dizer para um browser renderizar com ele, você está dizendo que seguirá rigorozamente os padrões.

XHTML Transitional

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Com este você diz ao Browser que seu código está em transição, não necessáriamente seguirá rigorozamente os padrões, mas não fará um “ninho de  ratos”

XHTML FRAMESET

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Já o Frameser, ser para renderizar os enfadonhos e arcáicos Frames.

Enviado por: Leandro Garcia - Categoria(s): Praticas Tags relacionadas: , , , , ,
29/09/2008 - 23:45

Os candidatos: Oscar Maroni (Dono da Boate Bahamas)

Mais uma pérola de política tupiniquim.

Oscar marone, segundo seu Jingle “Empresário do Amor”

O site é desenvolvido em ASP sem a menor preocupação em ser validado;

Não está preparado para uma resolução maior do que 1024×768 (vide topo);

O layout é feio e lembra um template de blog do Blogger;

Não tem doctypte e nem codificação.

A parte positiva é que é disponibilizado o material da campanha no site, não que seja um material excelente.

Algum Material da campanha disponível

O Jingle:

Get the Flash Player to see the wordTube Media Player.

O site: http://www.oscarmaroni70111.can.br/

Enviado por: Leandro Garcia - Categoria(s): Os Candidatos Tags relacionadas: , ,
29/09/2008 - 23:30

Nintendo usa o youtube como viral para anunciar o WII

Essa ação é uma das mais (se não a mais) fantásticas que eu ja vi na internet.

Demonstra a interatividade console-jogador. É fantástivo. Vale a pena ver todo.

Link:http://br.youtube.com/experiencewii

Enviado por: Leandro Garcia - Categoria(s): Sites que rolam, Vale um clique Tags relacionadas: , , , , , ,
24/09/2008 - 23:05

CSS Sprites, a arte de posicionar imagens

Dando continuidade na redução do peso das páginas, apresento à vocês uma técnica chamada: CSS Sprites!

Mas o que diabos é isso? É um novo refrigerante?

Não, não é refrigenrante é a arte de fazer uma unica requisição de imagem via CSS para diversos itens.

Como assim?

Vamos começar do básico.

Segundo o Wikipedia

Sprites were originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware. As computer performance improved, this optimization became unnecessary and the term evolved to refer specifically to the two dimensional images themselves that were integrated into a scene. That is, figures generated by either custom hardware or by software alone were all referred to as sprites. As three-dimensional graphics became more prevalent, the term was used to describe a technique whereby flat images are seamlessly integrated into complicated three-dimensional scenes.

Em português

Sprites foram originalmente inventadas como um método de composição rápida de algumas imagens juntas em jogos de video game em 2d usando hardwares especiais. Como forma de otimizar o careggamento dos softwares….

Creio que Já é o sificiente!

Vamos ao que interessa. Os Sprites em CSS

A técnica é simples e você pode utilizar para quase todas as imagens do seu layout, desde que essas imagens não se repitam dentro de um mesmo elemento ou não tenham tamanho definido. Exemplo: em um background de página você não deverá utilizar o Sprites, pois não há um delimitador de altura e largura para a exibição desta imagem.

Vamos a um exemplo prático:

Façamos um menu.

Briefing: Quatro links, cada um com a cor de fundo diferente, cada um deve ter um degradê.

1º Passo: A IMAGEM

2º Passo: O HTML

<ul class=”sprites”>
<li class=”um”><a href=”#”>1</a></li>
<li class=”dois”><a href=”#”>2</a></li>
<li class=”tres”><a href=”#”>3</a></li>
<li class=”quatro”><a href=”#”>4</a></li>
</ul>

3º Passo: O CSS

*{list-style:none}
.sprites li{float:left; text-align:center; width:50px; height:30px; background:url(http://www.leandrogarcia.com/tutorials/images/sprites.jpg) repeat-x}

.sprites li.um{background-position: 0 0}

.sprites li.dois{background-position: -30px 0x}

.sprites li.tres{background-position: 0 -60px}

.sprites li.quatro{background-position: 0 -90px}

.sprites li a{color:#000;font-weight:bold}

Resultado



Assim Conseguimos um layout, onde cada um dos itens do menu tem uma imagem de fundo, mas não precisamos requisitar quatro imagens, apenas uma.

Vantagens?

Entre as vantagens, posso citar:

a facilidade de manutenção, uma vez que haverá menos imagens a alterar;

o menor número de requisições HTTP;

maior velocidade de carregamento, uma vez que haverá menos itens a requisitar.

Pra finalizar

Ao utilizar o sprites, nós possíbilitamos ao usuário uma maior velocidade no carregamento. Uma página carregada mais rápido, deixa o usuário mais feliz, um usuário mais feliz, tende a voltar mais vezes, desde que o conteúdo seja relevante

Veja em funcionamento: link

Download: Sprites

Enviado por: Leandro Garcia - Categoria(s): CSS, Praticas, dicas Tags relacionadas: , , , , ,
19/09/2008 - 23:21

Os Candidatos: Tati Pink (bbb sei lá o que)

Pois é pessoal, qualquer um pode ser candidato neste país.

Os Candidatos.

Tati Pink, outrora participante do BBB, candidato-se a vereador em Recife.

O site é um dos melhres que já vi para candidatos a vereador, mas isso não significa que é bom.

“Abra o olho Recife”

Embora o nome da candidata seja “Pink”, o excesso de rosa cansa muito quem está vendo.

Na área de conteúdo, o texto está muito grudado do lado direito, chegando a parecer “comido”.

As cores não tem contraste e o lyout deixa muito a desejar, mas há um ponto positivo.

Qual Garcia?

O fato de ela disponibilizar vídeos e o jingle de sua campanha.

Ah, um outro ponto positivo, é não tocar (ao menos no firefox) o jingle da campanha ao entrar no site.

Falando em Jingle, ouça-o

Get the Flash Player to see the wordTube Media Player.

O site http://www.pink25888.can.br/

Enviado por: Leandro Garcia - Categoria(s): Os Candidatos Tags relacionadas: , ,
19/09/2008 - 17:30

Os candidatos: Léo Aquila

Mais um da série “Os Candidatos”.

Segundo o wikipedia:

Léo Áquilla, nome artístico de Jadson Mendes de Lima (Teófilo Otoni, Minas Gerais, 6 de setembro de 1973) é uma drag queen brasileira.

Léo Áquilla ficou conhecido por suas performances em shows de boates gays e por suas aparições em programas de TV. Foi repórter do programa Noite Afora, de Monique Evans, bem como do Bom dia Mulher, ambos na Rede TV. Pai de dois filhos — um natural e outro adotivo. Nas eleições de 2006 concorreu ao cargo de Deputado Estadual de São Paulo pelo PSC mas não conseguiu se eleger, obtendo, contudo, um número expressivo de votos: 21.778. Atualmente retomou sua agenda artística realizando suas performances em várias cidades do país.

O site é muito Ruim, mas ainda não supera nossa versão Feminia do Rocky Balboa..

E não há um jingle de campanha, infelizmente. Seria interessante.

Imaginem, uma paródia de I wil survive da Gloria Gaynor.

Não consegui pensar em uma paródia para este, quem tiver uma idéia, me envie..

O site: http://www.leoaquilla22022.can.br/

Conhece um candidato “interessante” que tenha site, me envie.

Enviado por: Leandro Garcia - Categoria(s): Descategorizado, Os Candidatos, Trash sites Tags relacionadas: , , ,
19/09/2008 - 17:20

Os Candidatos: Kid bengala

Prosseguindo com a série “Os Candidatos”, segue mais um candidato a vereador por São Paulo, trata-se do Kid Bengala.

Segundo o Wikipedia:

Kid Bengala é o nome artístico do ator pôrno Clóvis Basílio dos Santos [1] (Santos - SP, 19 de Novembro de 1954 - )[2]. Ator que tornou-se figura de destaque do cinema pornográfico brasileiro, ganhou o apelido “bengala”, devido ao instrumento de auxilio em seu trabalho: uma bengala feita à medida de seu pênis que, segundo fontes, inclusive a do próprio Kid, mede em torno de 33 cm, além do tamanho avantajado, o seu orgão genital é dotado de uma grande grossura e fica extremamente rígido quando está em estado de ereção. Seu maior fã declarado, é o jogador do São Paulo, Richarlyson, que possui em sua videoteca todos os filmes lançados no mercado. O jogador revelou que seu maior sonho é fazer figuração no filme do ator.

Atuou em filmes como: “Kid Bengala”, “Casal no Pau” e “Sexo no Salão 2006″, filme esse que possui uma entrevista com “Bengala” feita por Rita Cadillac.

O site em si, Não é tão ruim quanto o da Havanir, mas está longe de ser bom.

O chato é que não há um jingle de campanha. Imaginem como seria um jingle de um cara desses.

Seria uma paródia de uma música de Marvin Gale, mais ou menos assim: Ele é grande, e vai f… com a corupção…

O site da figura: http://kidbengala23333.can.br/

Enviado por: Leandro Garcia - Categoria(s): Os Candidatos, Trash sites Tags relacionadas: , , ,
10/09/2008 - 19:55

Colour Lovers, ajuda com paleta de cores

Eu e, acredito que, muitos dos que lerão este post já sofream ou sofrem quando precisam bolar um layout e não sabem quais cores combinam melhor com o que.

Ha algum tempo um designer amigo meu, o Rafael Tatu, me apresentou o ColourLovers!

O que é o Colour Lovers?

O colourLovers é uma comunidade onde Designers e não designers do Mundo todos postam paletas de combinação de cores, além de texturas, que você pode usar em seus layouts. É muito útil, principalmente para os não Designers, como eu!

www.colourlovers.com

Abraços

Enviado por: Leandro Garcia - Categoria(s): Sites que rolam, dicas Tags relacionadas: , , , ,
10/09/2008 - 19:47

Pesquisa de dominios no registro.br direto pelo firefox

Recentemente o Google lançou um novo browser, o Chrome, testei, gostei, em breve descreverei minha avaliação sobre. Porém este post não é sobre p Chrome, mas sim o Firefox que sempre nos ajuda.

Recebi via e-mail esta semana um complemento a ser adicionado no firefox, trata-se de adicionar um novo item ao campo de pesquisas, o Regsitro.br.

O bacana disso é, nós, que podemos pesquisar a disponibilidade de dominioss .br da mesma maneira que já efetuamos pesquisas no Google. é bem interessante e agiluiza um pouco nossa vida.

Para instalá-lo, você deve:

Abrir o Fire fox, em seguida insira o seguinte comando na barra de endereços

javascript:window.sidebar.

addSearchEngine(”
http://www.ater.com.br/registro/registro.br.src“,”
http://www.ater.com.br/registro/registro.br.png“,”Registro.br”,”Web”)

Depois enter

(Todo o comando deve estar numa só linha. Não deve haver quebras de
linhas.)

Irá surgir uma janela de confirmação.

Basta confirmar.

Pronto, você incluiu um campo de busca de dominios, depois é só você digitar “.com.br” e o browser exibira o resultado de sua busca e sem a necessidade de inserir o (chato, mas necessário) “captcha”.

Espero que seja útil

Enviado por: Leandro Garcia - Categoria(s): Complementos do Firefox Tags relacionadas: ,