quinta-feira, 29 de abril de 2010

Vire um Twitter Spammer pelo ASP - que coisa feia


Hoje vou ensinar vocês a fazerem algo errado, rsrs. Isso mesmo, iremos aprender a usar o twitter para divulgação de spam.

O Twitter é uma ferramenta muito legal, pois consiste em eu dizer algo e centenas ou milhares de pessoas verem o que eu postei, ou seja é muito facil disseminar uma informação por ele, principalmente porque se quem ler o seu Tweet gostar do que leu pode retweetar aquilo e mais centenas ou milhares de pessoas irão ler, veja só que incrivel.

Hoje usando um pouco de Twitter, ASP e maldade iremos criar uma ferramenta de SPAM para o Twitter, veja só que legal.

Irei explicar o conceito de forma simples cabe a vocês caros pupilos trabalharem para melhorar isso aqui.

ASP

<%
login = "seu_login_do_twitter" 'substitua isso pelo seu login do twitter não pode ser o email
senha = "sua_senha_do_twitter" 'substitua isso por sua senha do twitter não pode ser o email
seg = "tempo" 'essa variavel representa o tempo em MINUTOS que sua página ira ficar esperando para enviar outro post

On Error Resume Next

Response.Buffer = True

if login <> "" AND senha <> "" then

Randomize

'aqui nós estamos convertendo a variavel seg em segundos e iremos tirar dela um valor randomico de 1 a 30 segundos, para não termos intervalos parecidos entre as postagens
seg = seg * (60-Int(30 * Rnd ))

'um array com as possiveis mensagens coloque quantas quiser
mensagens = Array("Mensagem 1","Mensagem 2","Mensagem 3","Mensagem 4")

Randomize

'sorteamos uma mensagem e guardamos na variavel num
num = mensagens(Int(ubound(mensagens) * Rnd ))

'enviamos agora para o twitter
Dim twitter
Set twitter = Server.CreateObject("Microsoft.XMLHTTP")

mensagem = num

        twitter.Open "POST", "http://"&login&":"&senha&"@twitter.com/statuses/update.xml?status=" & server.URLencode(mensagem), False
        twitter.setRequestHeader "Content-Type", "content=text/html; charset=iso-8859-1"
        twitter.Send

Set twitter = Nothing
%>
<html>
<head>
<meta HTTP-EQUIV="Refresh" CONTENT="<%=seg%>; URL=twitter.asp">
<title>Twitter</title>
</head>
<body>
<%
if err <> 0 then
Response.write "erro"
else
Response.Write "Postado - " & mensagem
end if
%>
</body>
</html>
<%
else
response.Write "Logue novamente"
end if
%>

Prontinho salve como twitter.asp e pode testar.

Valeu galera amanhã tem mais

quarta-feira, 28 de abril de 2010

Programa Making Of

Convido a todos que me acompanham no Blog a assistirem o Programa Making Of.

Trata-se de um programa com conteúdo moderno, criativo e muito divertido. Cheio de matérias super interessantes.

 O programa passa na TV a cabo da NET na região de Mogi das Cruzes, mas quem não mora em Mogi pode acompanhar todas as matérias no site criado por mim www.programamakingof.com.br, aproveitem e comentem o site tem várias funções legais e dinâmicas.


Valeu galera até a próxima

segunda-feira, 26 de abril de 2010

Barra de Loading personalizada para Flash - crie do seu jeito

Já achei vários tutoriais na net de criação de Loading no Flash, aquelas barras de carregando antes do site entrar.
Porém várias coisas que eu acho por ai na verdade usa uma programação meio complicada e com pouco apelo visual, exemplos são aquelas barras que crescem a medida que o site carrega, mas só fazem isso, com o nosso exemplo abaixo você criará um padrão e o seu loading poderá ter a animação que quiser, seja uma barra horizontal, vertical, uma bola que aumenta de tamanho ou até mesmo uma animação de algum homenzinho correndo.

Vamos começar
Vocês vão achar incrível como isso é simples.
  1. Crie um MovieClip novo, e dentro dele crie uma animação qualquer de 100 frames (uma barra crescendo, uma barra caindo, uma bola aumentando, o que você imaginar)
  2. Coloque nesse mesmo MovieClip uma camada com um texto dinâmico estanciado como txt
  3. Agora volte para o Stage principal e coloque um stop() no primeiro frame e a seguinte ação no MovieClip

onClipEvent (load) {
    total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
    loaded = _root.getBytesLoaded();
    percent = int(loaded/total*100);
    txt.text = percent+"%";
    gotoAndStop(percent);
    if (loaded == total) {
        _root.gotoAndPlay(2);
    }
}

Pronto, para testar você tem que colocar esse movie clip acima em uma animação, precione Ctrl+Enter e quando a animação estiver aberto pressione novamente Ctrl+Enter para que ele simule que está carregando da internet.

Valeu e até a próxima


sexta-feira, 23 de abril de 2010

PHP para Leigos

Navegando pela internet descobri uma coisa muito complicada, a dificuldade de encontrar as informações mais básicas. Reparei  que faltam tutoriais voltados para o público leigo, e também que quando as pessoas ingressam no mundo da WEB elas tem que pastar bastante até chegar a uma auto-suficiência, pois muitos dos tutos que encontramos é voltado para o público que já está ingressado ou que tem algum conhecimento básico, mas é dificil achar algo para alguem que é totalmente inexperiente.


Pensando nisso e em resposta a uma solicitação que recebi, irei criar aqui um tutorial para conexão de PHP e MySQL, sei que talvez se ache isso em alguns fóruns, mas tentarei explicar nesse tuto toda a base que você provavelmente teria em um curso.

Mão na massa

Você meu caro amigo que pensa, "poxa vida eu quero ter um site" ou "caramba queria saber fazer um site, para ganhar uma graninha extra". Seus problemas acabaram, irei explicar passo a passo a criação e configuração de um pequeno sistema em PHP.

Para começar precisamos entender que o PHP - Preprocessed Hypertext Pages ou Páginas Hipertexto pré-processadas, trata-se do mesmo conceito de outras linguagens WEB, como ASP, RUBY, etc. ela se caracteriza por ser Server-Side e não Client-side.

OPA AGORA FUD$#& de VEZ

Calma, não desista, rsrs.

Server-Side - tudo que acontece no servidor, ou seja do computador que disponibiliza o site
Client-Site - tudo que acontece na máquina cliente, ou seja de quem acessa o site

Basicamente é isso, quando clicamos em um link ou botão, o nosso computador envia uma solicitação para o servidor e essa solicitação se baseia nas variaveis que ele envia, por exemplo: Eu clico em um botão de um formulário que tem como função apagar um post do meu blog, esse botão esta configurado para chamar uma página em PHP que tem a função de apagar posts e ao clicar ele "diz" a essa página que post você quer apagar e ela faz o resto, lembre-se, toda a logica contida aqui se replica para qualquer linguagem de programação server-side, (procure mais sobre server-side e client-side no google).

E ao mesmo tempo o servidor envia de volta os valores processados prontos para serem interpretados pelo nosso navegador, isso é importante ressaltar, o navagador ou browser não interpreta linguagens dinâmicas como PHP ou ASP, ele entende basicamente HTML e outras linguagens client-side, então quando geramos qualquer função no PHP ele retorna para o Browser apenas HTML, ou até mesmo JavaScript, XML, CSS, etc. nada de PHP sai do servidor.

Ai você me pergunta:
Eu vou ter que contratar um servidor para estudar PHP?
E eu respondo:
Claro que não meu caro amigo, para isso muita gente inteligente pensou em simplificar a vida de usuários e criaram o EasyPHP.

Easy PHP

Explicando, o EasyPHP é uma aplicativo que reúne várias ferramentas responsáveis por rodar o PHP e tudo mais que você precisar para começar a brincar, ele reúne em sua composição:

APACHE - Software responsável por rodar as páginas PHP
MySQL - Banco de dados
PHPMyAdmin - Software feito totalmente em PHP, que tem como função gerenciar o banco de dados MySQL de forma totalmente visual e sem grilo.

Além disso ele monta toda uma estrutura de pastas prontas para fazer com que seu computador sirva os sites, de forma interna é claro.

Inclusive usando o EasyPHP você poderá servir um site numa rede local, podendo assim criar um sistema de gerenciamento para uma empresa, como: Cadastro de Clientes, Estoque, Fornecedores, etc.

Instalando e Configurando o EasyPHP

Baixe ele nesse link aqui http://www.easyphp.org/ ele está na versão 6.0, porém e aconselhável baixar a 5.3.2 para que tudo que explicarmos aqui funcione com vocês.

Não tem segredo a instalação, porém depois de instalado e possivel que uma pequena configuração seja necessária, tentaremos abrir o EasyPHP e veremos se ele gera conexão com o APACHE e o MySQL, mas as vezes ele pode não gerar a conexão com o APACHE devido o fato dele estar operando na mesma porta HTTP, isso gera conflito. Se isso acontecer você deverá seguir os passos abaixo senão pule eles e continuem.

Passos para configuração da porta 80 do APACHE
  1. Abra o EasyPHP e você verá dois sinais (semáforos) que indicam se os serviços estão rodando corretamente, se por acaso o Apache estiver parado (sinal vermelho) você deverá configurá-lo
  2. Clique com o botão direito no Ícone do EasyPHP na barra próxima ao relógio
  3. Clique em configuração e depois Apache, abrirá então um Bloco de notas
  4. Procure as seguintes linhas:
    #Listen 12.34.56.78:80
    Listen 127.0.0.1:80
  5. E troque 80 por 85
  6. Salve e volte para o EasyPHP
  7. Clique no botão Apache e depois Iniciar.
  8. Pronto o Apache está operando.

Testando a conexão

Abra o seu Browser e acesse localhost ou 127.0.0.1, (se você corrigiu o erro com o EasyPHP você deve entrar localhost:85 ou 127.0.0.1:85)

Você verá uma página do EasyPHP porém não haverão arquivos para visualizar pois não há sites lá, só para testar o EasyPHP iremos fazer uma página simples em PHP e coloca-la dentro do diretório ele em C:\Arquivos de programas\EasyPHP-5.3.2\www, não coloque o arquivo solto ele deverá em uma pasta chamada "SITEPHP", sem as aspas.

Código fonte: copie e cole no Bloco de Notas e salve como index.php (para quem não sabe index sempre é o nome da página que será aberta primeiro ao entrar em um site).
<?php
$nome = "Adriano Moura";

$envia = "$nome e um &oacute;timo web master";

echo $envia
?>

Troque Adriano Moura pelo seu nome.

Agora volte para localhost:85 ou localhost e você verá agora uma pasta chamada SITEPHP, que foi a que criamos dentro de WWW, clique nela e se vanglorie um pouco.


Sempre os sites colocados dentro da pasta C:\Arquivos de programas\EasyPHP-5.3.2\www deverão estar em pastas sem espaços, sem acentos, sem caracteres especiais, pois se trata de WEB.

Caramba digitei muito, mas não se preucupem em breve lanço a continuação do tutorial e criaremos nosso primeiro sistema, e eu explicarei corretamente o que rola nesse código acima




sexta-feira, 16 de abril de 2010

Iron Man - o filme parece que está muito bom

7 Maio de 2010 estreará nos EUA o tão aguardado filme Homem de Ferro 2 (Iron Man 2), continuação do filme Homem de Ferro de 2008

Sinopse
Quatro anos após revelar sua identidade como super-herói, Tony Stark (Robert Downey Jr) lida com problemas psicológicos, pressão política para compartilhar sua armadura com o governo e um novo vilão: Chicote Negro (Michael Rourke), antigo conhecido de Howard Stark (Jonh Slattery) e que agora pretende destruir o Homem de Ferro ajudado por Justin Hammer (Sam Rockwell). Agora Stark precisa forjar alianças com Máquina de Combate, Viúva Negra e Nick Fury para enfrentar novas e poderosas forças.

E falando em Iron Man 2 o jogo também está para ser lançado e parece que já não agrada muito os Gamers do mundo, no site www.gametrailers.com o jogo conseguiu uma média de 6.6 que está mais baixa do que a do jogo antecessor, que convenhamos estava uma bosta ruim.

Confiram o Trailer do filme e do jogo e tirem suas conclusões.



Realmente o Filme parece estar otimo porém vejam o jogo, não me agradou muito





Esse filme ainda conta com a participação da Maquina de Combate (War Machine)




quinta-feira, 15 de abril de 2010

Criando Graficos Flash XML - com interação com banco de dados

Talvez vocês tenham visto o tutorial que eu coloquei aqui sobre como criar um Gráfico Dinâmico no Flash junto com o XML.

TUTORIAL


Para quem não viu da uma passada por lá e veja como faz é impressionante rsrsrs, ou baixe o projeto pronto aqui.

E para quem já viu aqui eu fiz um bônus muito legal, iremos utilizar o mesmo projeto porém iremos interagir com o Access usando ASP, agora sim o projeto se tornou viável.

OK galera mãos na massa

Abram o Access e criem um novo banco (Arquivo>Novo), salvem ele na mesma pasta do Grafico.fla, com o nome grafico.mdb

Criem uma nova tabela com dois campos:
Cod - Numeração automatica - Chave Primaria
Ponto - Texto

Salvem a tabela como grafico, e coloquem alguns valores para o campo pontos, esses serão os pontos em que a linha passará no gráfico.

Agora vamos ao ASP.

dados.asp


<%
Set con = Server.CreateObject("ADODB.connection") 'criamos a conexão
con.open ("Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&server.MapPath("grafico.mdb")) 'conectamos com a base de dados grafico.mdb


Function Encode_UTF8(astr) 'função encode_utf8 converte o valor do campo para UTF8 e assim ficar compativel com o XML

Encode_UTF8 = Server.HTMLEncode(astr)

End Function

set grafico = server.CreateObject("ADODB.recordset") 'criamos o recordset grafico

grafico.open "SELECT * FROM grafico ORDER BY cod DESC",con 'conectamos com a tabela grafico puxando os dados de trás para frente

Response.ContentType="text/xml"  'definimos o formato da função response

response.Write "<?xml version='1.0' encoding='UTF-8'?>"+chr(10) 'iniciamos o XML
response.Write "<grafico>"+chr(10) 'abrimos o nó grafico


if not grafico.eof and not grafico.bof 'se houver registros na tabela grafico
    while not grafico.eof 'enquanto houver registros ele imprime os dados na tela
        response.Write "<n>" 'abre a tag n
        response.Write Encode_UTF8(grafico("ponto")) 'insere o valor do campo no caso a posição do nosso ponto
        response.Write "</n>"+chr(10) 'fecha o nó n
        grafico.movenext 'move para o proximo registro e começa de novo enquanto houver informações
    wend
end if

response.Write "</grafico>" 'fecha o nó grafico
%>

Perfeito agora abra o grafico.fla e substitua dados.xml por dados.asp e pronto.

O que fizemos aqui foi apenas substituir a fonte de dados por uma fonte dinâmica e assim facilitarmos a atualização dos registros, esse projeto pode ser facilmente adaptado para SQL Server, MySQL, etc.


Obrigado e até a próxima


ASP com os MANU

Aprenda a programa com us MANU e faze as correria mto LOca


<%
dim morroDoXimbinha
dim dinhero-manu
dim dinhero-prayboy
dim Manus = "THIAGUINHU_SEMNOÇÃUM,MarquiiiimTRUTA_MTOFIRMEZA,ViTÃÃÃÃÃO_bBOY,WasShinGton5"
ManusT = split(Manus,",")

function comecaParadaAew()
    chamaOsManu()
    chegaNoPrayboy();
    if Prayboy reagiu then
        response.Write "Tu vai morrer fdp"
        mataPrayboy()
    else
        perdeu-prayboy()
    end if
end function

function perdeu-prayboy()
if dinhero-prayboy>0 then
    response.Write "Passa a grana o fdp"
    dinhero-manu=dinhero-prayboy
    dinhero-prayboy=0
    'mete os 50 centavos na cueca e esconde a PT
    foge()
else
    response.Write "Vo te regaça o FDP"
    batePrayboy()
end if
end function

function batePrayboy()    
    'regassa o fdp
        if Prayboy reagiu then
            response.Write "VO TE MATA OTÁRIO"
        mataPrayboy()
    else
        regassaOPrayboy();
        saiFincado();
    end if
end function
%>


quarta-feira, 14 de abril de 2010

Criando Gráfico Dinâmico no FLASH e XML

 ENSINAREMOS AQUI COMO CRIAR UM GRÁFICO DINÂMICO NO FLASH USANDO DADOS VIA XML, E VOCÊ AINDA PODE VINCULAR UM BANCO DE DADOS USANDO ASP OU PHP

Essa aqui é muito legal, alguém aqui já deve ter entrado no Google Analitycs, o sistema de analises da Google, se não conhece procure saber, é uma ferramenta muito util.

Quem conhece deve ter percebido nele uma gráfico dinâmico logo no Dashboard, que indica o número de acessos por dia.


http://www.yofx.org/wp-content/uploads/2009/12/google-analytics.jpg
o gráfico de linha no topo


Começando

Minhas ovelhas, deixemos de preguiça e mão na massa, é o seguinte primeiro iremos criar um novo arquivo Flash ActionScript 2.0, com as medidas de 800x150.

Tracem um retangulo preenchendo a tela inteira e o transformem em Movie Clip, marque o registration como superior esquerdo



Antes de editar o Movie Clip iremos fazer uma coisinha que será muito necessária para o funcionamento perfeito do gráfico, selecionem o Movie Clip e depois clique em Modify>Transform>Flip Vertical, 
nós precisamos inverter o Movie Clip Verticalmente, agora o ponto de Registration deve estar na parte inferior esquerda do Movie Clip, OK.

Irei explicar o porque de nós termos invertido daqui a pouco.

Estancie ele como Graf e de um clique duplo, apague o retângulo (ele só servia para demarcar espaço) e desenhe uma linha ocupando toda a área horizontal do Stage, defina a sua posição Y como 140,0 (nesse ela irá para o topo pois nos invertemos o MovieClip, lembra?) e trace outra linha igual com Y 10.

Perfeito essas duas linhas serviram como base e topo do nosso gráfico. Criem também um texto dinâmico com instância de top e alinhem com a linha de cima no lado direito, e um texto estatico escrito 0 alinhado a linha de baixo também no lado direito.

Vejam como deve estar seu Stage


no meu caso eu fiz a linha pontilhada mas é opção sua e no texto dinâmico eu escrevi 30, porém isso não fará a diferença

Agora criem um circulo com 10x10 ele será o ponto do nosso Gráfico, transforme ele em Movie Clip (não esqueça de colocar o registration no centro novamente).

Istancie ele como pt e deixe a posição Y dele como 10 e X pode ser qualquer valor negativo ou maior que 800, pois o mesmo terá que esta fora do Stage.

Agora iremos ao XML.

Abra o bloco de notas e cole o seguinte

<?xml version="1.0" encoding="utf-8"?>
<grafico>
<n>3</n>
<n>4</n>
<n>5</n>
<n>1</n>
<n>10</n>
<n>3</n>
<n>5</n>
<n>6</n>
<n>13</n>
<n>2</n>
<n>13</n>
<n>3</n>
<n>4</n>
<n>5</n>
<n>1</n>
<n>10</n>
<n>3</n>
<n>5</n>
<n>6</n>
<n>13</n>
<n>40</n>
<n>13</n>
<n>5</n>
<n>6</n>
<n>13</n>
<n>25</n>
<n>13</n>
<n>5</n>
<n>7</n>
<n>13</n>
<n>40</n>
<n>13</n>
</grafico>

Salve como dados.xml

Os nós <n> indicam os valores do gráfico começando do valor mais atual para o mais velho, como deve ser o Gráfico, e já que estamos trabalhando com Flash e XML você está livre para trabalhar com alguma linguagem dinâmica como ASP ou PHP, nós temos tutoriais aqui sobre isso aqui.

Agora vamos a programação

System.useCodepage = true; //usamos codificação para receber o XML
var MeuXML:XML = new XML(); //criamos o objeto XML
// Ignoramos todas as quebras de linhas e espaços entre os nós para não atrapalhar na interpretação do XML.
MeuXML.ignoreWhite = true;

// Este método será executado ao fim do carregamento dos dados ou em caso de erro.
MeuXML.onLoad = function($sucesso){
if($sucesso){

//maior representa o máximo valor do nosso gráfico, assim sabemos onde ele termina
maior = 0

//cria um array que guardará os valores do XML
pontos = new Array();

//loop de 0 a 30 para criarmos um grafico com 31 pontos, o valor pode mudar mas lembre-se também de corrigir os espaços abaix
for(i=0;i<30;i++) {
pontos[i] = MeuXML.firstChild.childNodes[i].childNodes[0].nodeValue //pegamos o valor do nó e colocamos no array
//se por acaso o valor do nó atual for maior que a variável maior nos guardamos ele na variável maior, e assim fazemos essa comparação a cada loop
if (int(pontos[i]) > maior) {
maior = pontos[i]
}

}

//c será usado para indicar o index do array
c=0

//mais um for porém agora de trás pra frente, pois o gráfico preenche do ultimo para o primeiro valor e assim também aparecera no gráfico
for(j=30;j>0;j--) {
//duplicamos o MovieClip pt (a bolinha criada no começo)
pt.duplicateMovieClip("pt"+j,j);

//pegamos a cópia do pt e posicionamos horizontalmente com 26 pixels de diferença (são 800 pixels totais / 30 itens do XML)
_root.graf["pt"+j]._x = 26 * (j-1)

//criamos um fator que definira a posição vertical do ponto com base no valor dele, esse fator faz com que independente do valor maximo do gráfico, os pontos sempre estejam em uma determinada escala e nunca saiam do gráfico
posY = (120/maior)*pontos[c]

//definimos a posição no pt criado com 20pixels a mais para que ele não fique grudado no rodape do flash
_root.graf["pt"+j]._y = posY+20

//passamos para o proximo registro.
c++
}

//agora criaremos a linha que ligará todos os pontos
createEmptyMovieClip("line_mc", 1);

//fazemos um loop para que ela passe por todos os pontos
for (t=2;t<30;t++) {

//T representa o ponto do qual partira a linha e o E para onde ela irá, no caso T+1
e = t+1

//criamos a linha
with(line_mc){
//definimos o estilo da linha
lineStyle(3, 0x333333, 100, true, "normal", "square", "bevel", 1);

//a linha começa no ponto X e Y do primeiro pt por exemplo pt1
moveTo(_root.graf["pt"+t]._x, _root.graf["pt"+t]._y);

//e vai até o ponto X e Y do segundo pt, por exemplo pt2
lineTo(_root.graf["pt"+e]._x, _root.graf["pt"+e]._y);

//damos loop para que repita-se com o pt3, pt4, ...
}
}

// escrevemos no texto dinamico top o valor do maior ponto
top.text = maior



}else{ // Em caso de erro
trace($sucesso);
trace("Ocorreu algum erro ao carregar os dados.");
}
}

// Carregar dados do XML.
MeuXML.load("dados.xml");



Uau, incrível, rodem e vejam que legal. Consigo ouvir vocês dizendo "Sinistro".


É isso, aqui existe o exemplo criado por mim, porém com um bônus especial, o valor aparece sobre ou abaixo da bolinha quando o mouse passa sobre ela. DOWNLOAD

Agora porque eu inverti o Movie Clip no começo?
Porque no Flash como em qualquer outro software que trabalhe com design a regua dele conta os pixels de cima para baixo, da esquerda para direita, e em um gráfico o ponto inicial vem da baixo para cima, e por isso eu inverti, pois senão a programação entenderia que as bolinhas começariam do topo para baixo.


terça-feira, 13 de abril de 2010

Pegando maior valor de um Array no flash

Tive essa dúvida e apelei para os fóruns, mas antes que tivesse uma solução resolvi o problema.

A minha idéia era conseguir pegar o máximo valor de um array no flash e esperava que existisse uma função para isso, porem trata-se de um problema simples. veja o comando abaixo.


maior = 0
for(i=0;i<11;i++) {
        if (int(_root.pontos[i]) > maior) {
            maior = _root.pontos[i]
        }
}


Pontos é a array com os valores que eu quero e maior é a variavel que pegara o maior valor.

Funciona da seguinte forma no começo maior vale 0 e inicia-se o loop que repetira 11 vezes, se por acaso o valor de pontos[1] for maior que a variavel maior a variavel maior pega o falor de pontos[1]. E assim se repete a situação até pontos[10] que ira comparar com o maior valor até então.

Se por acaso pontos for igual a 10, 5, 13, 18, 20 e 3 o valor de maior será 20

Promoção - Granhe tudo Lockerz




1 - O que é o Lockerz?
No Lockerz, você junta pontos on-line sem pagar nada. Esses pontos podem ser trocados por centenas de prêmios gratuitos, que chegam DE GRÁTIS.

2 - Que prêmios?
De camisas estilosas, a acessórios de moda, até os mais populares acessórios eletrônicos (gadgets, computadores, notebooks, video-games, jogos...). Imagine ganhar um MacBook ou um X-Box 360. Legal hein.

3 - Como junto os pontos?
Assistindo promocionais, passeando por conteúdos indicados... Sem gastar NADA, você junta para ganhar seus acessórios.


4 - COMO POSSO PARTICIPAR, ADIANO?!?!!?!11onze
O único jeito de participar do programa é sendo convidado. Assine o formulário abaixo para receber um convite... E comece a ganhar prêmios HOJE, SEU MALUCO!

segunda-feira, 12 de abril de 2010

Botão Acender e Apagar a Luz

Você já devem ter visto isso em algum site com vídeos, até mesmo o youtube utilizou isso por um tempo.

É uma idéia interessante que coloca um pouco de interatividade no seu site, apesar de não ter muita utilidade



Confiram um exemplo aqui, esse é um site que eu criei para um programa de TV, e adicionei esse botão.


OK, para fazer isso precisamos de 2 imagens, uma para Apagar a Luz e outra para quando Formos acender a luz. Segue abaixo



Baixem as imagens acima e iremos começar.

Para isso precisamos de CSS e JavaScript.



Começando

Abra uma página (no caso a que tem o seu player de vídeo). Pegue esse video e coloque dentro de uma div com a seguinte propriedade.

Copie o código abaixo e coloque o codigo do seu video entre > <

<div style="z-index: 2;"></div>


E coloque o botão Apagar a Luz dentro de uma div igual a de cima. e coloque sua id como btLuz e uma função luz() como onMouseDown.

Copiem o código abaixo onde você quiser que apareça o seu botão

<div style="z-index:2;"><img src="apagar.png" id="btLuz" onMouseDown="luz()"></div>

Iremos criar agora o fundo preto para ocupar todo espaço na tela.


Coloquem o seguinte código logo após a tag <body>

<div id="fundo"></div>

e criem uma tag style que personalizara a tag do fundo.

copiem o código abaixo e colem acime da tag </head>

<style>
#fundo {
    filter:alpha(opacity=80);
    -moz-opacity:.80;
    opacity:.80;
    width:100%;
    height:1500px;
    background-color:#000000;
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;
    display:none;
}

</style>

O código acima faz com que o fundo fique em todo o navegador com uma transparencia de 80% e também invisivel, pois ele só aparecerá quando clicar-mos no botão.

acima da tag </head> coloque

<script>
l = 0
function luz() {
    if (l==0) {
        document.getElementById('fundo').style.display='block';
        document.getElementById('btLuz').src='acender.png';
        l = 1
    }else{
        document.getElementById('fundo').style.display='none';
        document.getElementById('btLuz').src='apagar.png';
        l = 0
    }
}
</script>

o JavaScript acima fará com que o fundo escuro apareça e desapareça, também fará com que o botão troque junto.


Coloque tudo isso para funcionar e se houver um erro comentem.


Valeu galera, logo logo tem mais

sexta-feira, 9 de abril de 2010

Menu Drop Down - CSS

Estava sentindo falta de postar aqui, rsrsrs.

Resolvi fazer um post sobre CSS que está em falha nesse blog

Qualquer um que tenha projetado um menu drop-down estará familiarizado com a grande quantidade de scripts necessários para fazer funcionar estes tipos de menus. Mas, usando-se uma marcação HTML estruturada e regras CSS simples é possível criar menus drop-down de raro apelo visual, fáceis de editar e atualizar e que funcionem perfeitamente em váriados tipos de browsers, inclusive no Internet Explorer. Melhor ainda, para designers zelosos de seus códigos, nenhum JavaScript é necessário! (Na verdade, um 'pouquinho' de JavaScript é necessário, mas nada tão complicado, como você deve estar imaginando.)

Confiram ele funcionando aqui

Criaremos aqui uma lista ordenada em HTML, vocês vão entender o porque, nós temos listas ordenadas dentro de listas ordenadas na estrutura de um marcador, isso facilita o processo inclusive da adição de links até mesmo via uma linguagem dinamica como PHP por exemplo.

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a> 
      <ul> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Team</a></li> 
        <li><a href="#">Offices</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Services</a> 
      <ul> 
        <li><a href="#">Web Design</a></li> 
        <li><a href="#">Internet 
            Marketing</a></li> 
        <li><a href="#">Hosting</a></li> 
        <li><a href="#">Domain Names</a></li> 
        <li><a href="#">Broadband</a></li> 
      </ul> 
    </li>

    <li><a href="#">Contact Us</a> 
      <ul> 
        <li><a href="#">United Kingdom</a></li> 
        <li><a href="#">France</a></li> 
        <li><a href="#">USA</a></li> 
        <li><a href="#">Australia</a></li> 
      </ul> 
    </li> 
  </ul>


Ok galera ai esta nosso menu, porém se você abrir esse HTML criado verá apenas uma lista de marcadores como num índice, mas para transforma-lo e dar uma carinha melhor iremos agora para o CSS


ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
 }
 
Como iremos posicionar submenus em absoluto ao menu principal, teremos que defini-lo como relativo
 
ul li {
 position: relative;
 } 

Definimos o posicionamento dos submenus

li ul {
 position: absolute;
 left: 149px;
 top: 0;
 display: none;
 }
 

Agora começa a estrutura visual, colocarei num passo só, qualquer dúvida comentem que eu respondo

ul li a {
 display: block;
 text-decoration: none;
 color: #777;
 background: #fff;
 padding: 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }
 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */ 

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
 border-bottom: 1px solid #ccc;
 }

Aquela parte um pouco complicada trata-se de um hack para compatibilidade total com o Internet Explorer, infelizmente nós Web Designers sempre acabamos batendo em algum problema nele.

Agora o Pulo, onde irão aparecer os submenus
li:hover ul { display: block; }
 
Vejam aqui funcionando 

UAU galera funciona mesmo hein. rsrs

Funcionaria se o maldito internet explorer não resolve-se atrapalhar.
 
Beleza, teremos que colocar um pouco de JavaScript para resolver o problema
  
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
 (" over", "");
   }
   }
  }
 }
}
window.onload=startList; 

A regra para o Over agora é
 
li:hover ul, li.over ul { 
 display: block; }

e referenciamos o JavaScript no UL da seguinte forma
 
<ul id="nav">  
 
Lindo, Lindo e Lindo.
 
RSRSRS
 
Pronto, agradeço a atenção de todos e amanhã tem mais.
 
 

terça-feira, 6 de abril de 2010

Amostras Grátis ai vou eu

Galera é com muito prazer que eu venho informar aos meus colegas que acompanham o blog que eu passei na seleção para novos redatores do Amostras Grátis, um site especializado na divulgação de brindes e amostras grátis.

O site é o maior da categoria, com acessos de toda a américa latina, e vários redatores, e eu passei junto com mais outros em uma seleção com mais de 400 candidatos.

Se quiserem acompanhar entrem www.amostrasgratis.org e confiram as minhas e outras postagens