Mostrando postagens com marcador Web Design. Mostrar todas as postagens
Mostrando postagens com marcador Web Design. Mostrar todas as postagens

sexta-feira, 14 de maio de 2010

Sleep em Java Script

O Stoyan Stefanov publicou uma função que simula a função sleep() do PHP no Javascript. Esta função serve para atrasar a execução do script.

Função:
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}

chamando a função para um intervalo de 2 segundo (2000 milisegundos) coloque entre <head></head>

<script>
alert("Teremos um intervalo de 2 segundo até a proxima mensagem)
sleep(2000)
alert("Eu não te disse")
</script>

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, 19 de março de 2010

Papervision 3D - a classe 3D no flash

http://imasters.uol.com.br/artigo/16081/flash/utilizando_papervision_3d_nos_seus_projetos/

O link acima leva a um tuto muito bom sobre PaperVision 3D. Realmente o unico tutorial que eu entendi até hoje. rsrs
Basicamente, o Papervision 3D é um pacote de classes que lhe oferece diversas ferramentas profissionais para produção de filmes em Flash com a ilusão de três dimensões. Digo ilusão pois, apesar de o Flash suportar atualmente 3D nativo (que ainda perde feio para o que o Papervision nos oferece), o Papervision 3D já existia muito antes disso, simulando o efeito ótico tridimensional apenas manipulando as propriedades de objetos bidimensionais.
Hoje o Papervision 3D é a ferramenta de produção tridimensional no Flash mais utilizada e mais popular, com diversos plugins e efeitos impressionantes. A grande maioria dos sites 3D mais impressionantes do mundo foram todos produzidos com a ferramenta......





quarta-feira, 17 de março de 2010

Modificando Fotos no ASP - ASPJpeg

Nesse tutorial vou ensinar um truque legal para modificar-mos fotos aumentando e diminuindo seu tamanho

Um erro comum entre os Web designers é que as vezes quando puxamos uma imagem de um banco de dados queremos utiliza-las diversas vezes como Thumbnai, só que acabamos modificando o tamanho na tag IMG, e isso gera 2 problemas
  •  Imagem pequena, porém que leva muito tempo para carregar
  • Queda de definição pois a imagem acaba sendo totalmente apertada

A solução é simples se chama AspJpeg


Porém é necessário que vocês vejam se esse componente está instalado no servidor porque senão não vai funcionar.


OK Vamos Começar


crie um arquivo chamado jpgResize.asp e coloque o seguinte código.

<%
'arquivo é a variavel que levara o diretorio do arquivo, lembre-se que deve ser o diretório fisico e não o virtual
arquivo = request.QueryString("arquivo")


'W é largura
w = request.QueryString("w")


'H é altura
h = request.QueryString("h")

'Criando o thumbnail:
Set Jpeg = Server.CreateObject("Persits.Jpeg")

'Caminho da Imagem
Path = server.MapPath(arquivo)

'Busca a Imagem
Jpeg.Open Path

'Especifica o tamanho da imagem
Jpeg.Width = w
Jpeg.Height = h

'Esse método é opcional, usado para melhorar o visual da imagem
Jpeg.Sharpen 1, 150


'Para enviar o thumbnail para o browser do cliente utilize o método SendBinary:
Jpeg.SendBinary
%>

Pronto esse arquivo acima irá gerar a imagem solicitada, agora iremos a página que exibe essa imagem e coloquemos a seguinte tag IMG

<img src="jpegResize.asp?arquivo=fotos\imagem.jpg&w=300&h=100>

A tag acima ira pegar a imagem01.jpg que esta na pasta fotos do diretório atual e colocara com 300px de largura e 100px de altura.

Percebam que a tag imagem recebe como imagem o arquivo jpgResize.asp e ao mesmo tempo envia pelo metodo GET os parametros, do meu ponto de vista mais facil e simples do que criar uma função. Além de proteger a imagem contra cópia.

A partir daqui você pode pegar o diretorio da foto a partir de um recordset


<img src="jpegResize.asp?arquivo=<%=fotos("foto")%>&w=300&h=100>

Pesquise por ASPJpeg e saiba outras funções desse componente









terça-feira, 9 de março de 2010

Interligando Banco de Dados SQL com FLASH via XML

Uma coisa que ao meu ver da trabalho é vincular seu site em flash com algum banco de dados SQL, mas analisando até que é bem viável fazer isso, não é?

Foi por isso que resolvi dar um help ai para todos que acompanham meu blog e ensinar um jeito super legal de interagir qualquer tipo de Banco de dados utilizando FLASH + XML + ASP ou PHP

Até então eu pensava em utilizar algo como loadVars para tentar produzir o efeito desejado mas eu vi que o sistema do XML padroniza meu projeto e facilita pois eu posso capturar as variáveis através dos nós e não ter que puxar varias variaveis impressas no ASP via Response.Write nem no PHP via echo

O fato é que eu irei fazer com que o ASP ou PHP gerem um XML se baseando no Banco de Dados e o Flash o importe, isso facilita muito o processo além de torna-lo leve e dinâmico


Neste exemplo iremos criar uma Galeria


Começando

Antes de mais nada criem um Banco de Dados, no meu caso criei um utilizando MySQL para ser compativel com ASP e PHP, criem um banco de dados com uma tabela fotos com os campos titulo, detalhes e imagem

então criem o arquivo que irá retornar os dados deste banco de dados
 

ASP
<%
'Aqui nós criamos um objeto ADODB para se conectar ao nosso banco de dados
Set con = Server.CreateObject("ADODB.connection")
'abrimos o banco utilizando o servidor de acesso, nome do banco, login e senha
con.open ("DRIVER={MySQL Driver};SERVER=servidor;PORT=3306;DATABASE=nome_do_banco;USER=usuario;PASSWORD=senha;OPTION=3;")
%>
<%
'função que irá codificar os textos para torna-los compatíveis com a codificação UTF8
Function Encode_UTF8(astr)

Encode_UTF8 = Server.HTMLEncode(astr)

End Function
%>
<%
'criamos um RecordSet para conectar a tabela fotos que já deve estar pronta lá no banco de dados
set fotos = server.CreateObject("ADODB.recordset")
' abrimos o recordset
fotos.open "SELECT * FROM fotos ORDER BY cod DESC",con
'configuramos o metodo response para torna-lo compativel com o texto XML
Response.ContentType="text/xml"
'iniciamos o processo imprimindo na tela a tag XML
response.Write "<?xml version='1.0' encoding='UTF-8'?>"+chr(10)

'abrimos a chave fotos
response.Write "<fotos>"+chr(10)

'criamos um loop para preencher com as ultimas 5 fotos, no caso serve para um sistema de noticias
for i=1 to 5

'verificamos se o banco de dados não está vazio
if not videos.eof and not videos.bof then
'inserimos a primeira foto
response.Write "<foto>"+chr(10)
'titulo da foto
response.Write "<tit>"
response.Write Encode_UTF8(fotos("titulo"))
response.Write "
</tit>"+chr(10)
'link da foto
response.Write "<imagem>"
response.Write Encode_UTF8(fotos("imagem"))
response.Write"</imagem>
"+chr(10)
'descrição da foto
response.Write "<texto>"
response.Write Encode_UTF8(fotos("detalhes"))
response.Write "
</texto>"+chr(10)
response.Write "</foto>"+chr(10)
'fechamos e avançamos ao proximo
fotos.movenext()
end if
next
'encerra o XML
response.Write "</fotos>"
%>


salvem como fotos.asp e executem para ver como fica



Agora vem a parte do flash, confiram


Neste exemplo nós variamos utilizando no flash um componente muito legal chamado Loader ao inves do Movie Clip, isso facilita um pouco, porém no internet explorer a imagem não se auto ajusta e é necessário cortar a foto antes de coloca-la no Banco de Dados.

antes de começar criem um movie clip estanciado como vid1 e lá dentro um outro movie clip como ft e dentro desse movie clip um Loader (pode ser encontrado na janela components) estanciado como  cx e neste mesmo movieclipe e lá pelo 5º frame desse movie clipe coloque

cx.contentPath = foto


e logo no primeiro frame do Flash coloque

Flash AS2

cont=2;

System.useCodepage = true;
var MeuXML:XML = new 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){

//carrega no primeiro movie clip (o já pronto) a foto e os textos
_root.vid1.ft.foto = MeuXML.firstChild.childNodes[0].childNodes[1].childNodes[0].nodeValue
_root.vid1.tit.text = MeuXML.firstChild.childNodes[0].childNodes[0].childNodes[0].nodeValue
_root.vid1.texto.text = MeuXML.firstChild.childNodes[0].childNodes[2].childNodes[0].nodeValue





//cria um loop para duplicar o vid1 e carregar as demais fotos nos novos movie clips
for(i=1;i<6;i++) {
  _root. vid1.duplicateMovieClip("vid"+cont,cont);
    _root["vid"+cont].ft.foto = MeuXML.firstChild.childNodes[i].childNodes[1].childNodes[0].nodeValue
    _root["vid"+cont].tit.text = MeuXML.firstChild.childNodes[i].childNodes[0].childNodes[0].nodeValue
    _root["vid"+cont].texto.text = MeuXML.firstChild.childNodes[i].childNodes[2].childNodes[0].nodeValue
    _root["vid"+cont]._x = (880*i)
    cont++
}
}else{ // Em caso de erro
trace($sucesso);
trace("Ocorreu algum erro ao carregar os dados.");
}
}

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


Aqui está tudo pronto falta apenas certo acabamento, criar um slide de fotos etc.

Mas aqui eu disponibilizo o modelo pronto e completo para facilitar a vida da galera, porem o sistema que eu disponibilizo trata-se de videos, na verdade é a mesma coisa o que muda são os nomes dos campos. Copiem modifiquem e divulguem, só não esqueçam das fontes.




Até a próxima



terça-feira, 9 de fevereiro de 2010

Mais um novo Trabalho

Galera que acompanha meu blog, peço para que todos confiram meu ultimo trabalho que entrara no ar dia 11 as 13 horas, mas todos podem ver um preview aqui


www.edd-consultoria.com.br

sexta-feira, 29 de janeiro de 2010

Meu ultimo trabalho

Confiram meu ultimo trabalho que já está no ar

www.artacademia.com.br


opinem valeu

Inspiração para Qualquer Web Designer

Galera saca só o que eu achei na net

http://fieroanimals.com/


trata-se de uma agência de web gringa, o site é simples, bonito e muito usual.


Entrem e opinem aqui, não se esqueçam de conferir a seção da galeria

terça-feira, 26 de janeiro de 2010

Para quem quer Adquirir o PACOTE ADOBE CS4

É bom esperar pois já está previsto para Abril deste ano o lançamento do pacote CS5. E verdade eu estava esperando que fosse aproveitar mais meu CS4.

Você pode conferir mais no blog http://cs5.org/