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
Mostrando postagens com marcador Tutorial. Mostrar todas as postagens
Mostrando postagens com marcador Tutorial. Mostrar todas as postagens
quarta-feira, 28 de abril de 2010
quarta-feira, 10 de março de 2010
Problemas com CSS no Internet Explorer
Acredito que todos já passaram por problemas com CSS no IE, e como não é possível obrigar o usuário a migrar para outro navegador a opção é tentar tornar o seu projeto o mais compatível possível com todos os navegadores, o que na maioria das vezes é difícil.
O que mostraremos aqui é uma saída para resolver seu problema, seguindo o seguinte raciocínio, deixar partes do CSS apenas visiteis para o Internet Explorer.
vejam só o primeiro exemplo
TAG <style>
O que mostraremos aqui é uma saída para resolver seu problema, seguindo o seguinte raciocínio, deixar partes do CSS apenas visiteis para o Internet Explorer.
vejam só o primeiro exemplo
TAG <style>
<!–[if IE]>
<style>
.item {
margin: 5px;
padding: 10px;
}
</style>
<![EndIf]->
TAG <link>
<!–[if IE]>
<link href="estilo.css" rel="stylesheet" type="text/css">
lt;![EndIf]->
Estes métodos acima tornam visíveis as tags apenas quando for o IE
Essa aqui é minha preferida. No caso de ter um arquivo CSS e a alteração for pequena basta colocar um asterisco ou underline antes da propriedade assim:
.classe {
width:500px; /* Todos os Navegadores */
*width:500px; /* Apenas o IE7 ou maior */
}
ou
.classe {
width:500px; /* Todos os Navegadores */
_width:500px; /* Apenas o IE6 */
}
Agora pelo menos podemos fazer uma gambiarra para torna o site com melhor compatibilidade possivel
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>"
%>
'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 "
'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 "
'titulo da foto
response.Write "<tit>
response.Write Encode_UTF8(fotos("titulo"))
response.Write "
'link da foto
response.Write "<imagem>
response.Write Encode_UTF8(fotos("imagem"))
response.Write"</imagem>
'descrição da foto
response.Write "
response.Write Encode_UTF8(fotos("detalhes"))
response.Write "
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");
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
Marcadores:
Asp,
Banco de Dados,
Flash,
PHP,
Programação,
SQL,
Tutorial,
Web Design,
XML
Assinar:
Postagens (Atom)