tag:blogger.com,1999:blog-4893652026568356332024-02-19T07:31:28.359-03:00Coisas De Webramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.comBlogger55125tag:blogger.com,1999:blog-489365202656835633.post-68574405333701875572013-02-23T09:56:00.002-03:002013-02-23T09:58:08.698-03:00E não é que voltei...Salve, salve!<br />
<br />
Senti falta disso aqui, de volta em casa, vamos arrumar essa bagunça.<br />
<br />
Muito tempo passou, muita coisa mudou e o twitter 'tomou de assalto' o mundo dos blogs, no momento estou ignorando isso e voltando com várias ideias.<br />
<br />
Claro que seria mais fácil criar um novo blog e ignorar todas as coisas que, agora discordo, porém acho legal deixar as coisas por aqui pra ser possível ver a minha evolução profissional e quem sabe inspirar alguns iniciantes.<br />
<br />
Vamos deixar de papo furado e começar os trabalhos.<br />
<br />
Fui que fui!ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com0tag:blogger.com,1999:blog-489365202656835633.post-350778274839864882009-01-16T11:09:00.001-03:002009-01-16T11:09:49.763-03:00Ate maisOlá amigos e amigas,<br /><br />(Música triste ao fundo)<br /><br />É com grande pesar no coração, finalizo as atividades por aqui. A partir de hoje, o que vos escreves não mais o fará (gastei todo o meu portuga, espero que não tenha escrito errado). Foi bom enquanto durou, ou não, coloquei alguns códigos que com certeza servirá pra muita gente e pra mim também, inclusive. Porém por diversos motivos, não vou dar continuidade à isso. Pode não parecer, mas gosto muito de blogar, porém meus dotes literários não me deixam fazer algo legal, por isso resolvi dar uma parada, quem sabe um lampejo de talento brote em mim mais tarde e consiga voltar para esse mundo de blogs.<br /><br />Enfim, isso é um 'até logo'. Tenho um blog antigo, que tenho bastante carinho por ele, estou pensando em escrever lá, quem quiser: 'Que me siga os bons'.<br /><br /><br />endereço blog antigo: www.gigasolucoes.wordpress.com<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com1tag:blogger.com,1999:blog-489365202656835633.post-54878101745928829022008-12-31T09:13:00.002-03:002008-12-31T09:21:57.581-03:00Permitir apenas numeros na caixa de textoÚltimo post do ano, não que esse ano tenha aparecido aqui muitas vezes, mas a proposta do próximo ano é melhorar o meu desempenho, no entanto vamos lá à uma função bem simples de restringir caracteres na caixa de texto, no meu caso estava restringindo os caracteres alfanuméricos, existem várias funções, por aí, até melhores que essa, mas para eu não ter que ficar catando futuramente, resolvi postar aqui:<br /><br />function onlyNumbers(e){<br />/**<br /> * Autor: Ramon Silva <ramon_silvaa@yahoo.com.br><br /> * Data: 31/12/2008<br /> * Versão: 1.0<br /> */<br /><br /> keynum = (window.event) ? e.keyCode : e.which;<br /> keychar = String.fromCharCode(keynum);<br /> if (isNaN(keychar) && <br /> (keynum < 96 || keynum > 105) && <br /> keynum != 8 && keynum != 37 && keynum != 39) {<br /> return false;<br /> } else {<br /> return true;<br /> }<br />}<br /><br />Para usar é só chamar essa função no keydown, da caixa de texto desejada:<br /><br />$("#txtCep").keydown(function(e){<br /> return onlyNumbers(e);<br />});<br /><br />Essa função permite utilizar, as setas também.<br /><br />FELIZ 2009 À TODOS!!!!!!!!!!!!!!!!<br /><br />Agora vou nessa pegar um pouco de engarrafamento pra chegar à Copacabana "O melhor ano novo do mundo" (Adoro esses títulos, melhor alguma coisa do mundo. rs)<br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com1tag:blogger.com,1999:blog-489365202656835633.post-52441027752145958262008-11-23T10:53:00.002-03:002008-11-23T10:56:41.757-03:00Accordion use a vontadeAccordion é a onda do momento, utilizei alguns, mas os que utilizei não me davam liberdade para customização. Então resolvi fazer o meu accordion que atendessem as minhas necessidades. <br />Acredito que esteja bem simples de ser utilizado, então coloquei no ar, se alguém precisar já pode utilizar, portanto que deixe os créditos. Críticas e sugestões é só enviar <br />Para utilizar são necessários as seguintes etapas:<br /><br />1: Linkar a lib jQuery e o código accordion.<br />2: Criar o html respeitando algumas seguintes regras.<br /> <ul><br /> <li>Um elemento global com um id</li><br /> <li>Um elemento com a classe box</li><br /> <li>Dentro do box os seguintes elementos</li><br /> <ul><br /> <li>um elemento com a classe header</li><br /> <li>um elemento com a classe content</li><br /> </ul><br /> </ul><br /><br />3: Instanciar o accordion, para instanciá-lo, basta passar um json com as configurações desejadas.<br />var pars = {<br /> id : 'accordion1', <br /> time : 500, <br /> index : 2,<br /> openIt : function(that){<br /> //configuração da forma desejada<br /> $(that).find(".seta img").attr("src", "seta_amarela_cima.png");<br /> }, <br /> closeOthers : function(that){<br /> //configuração da forma desejada<br /> $(that).find(".seta img").attr("src", "seta_amarela_baixo.png");<br /> }<br /> //id do elemento global (obrigatorio)<br /> // tempo de execução da animação (obrigatorio)<br /> // Se quiser configurar qual item do accordion começará expandido, é só enviar o número. Lembre-se, o indice começa de 0<br /> // Quando elemento expandir, se quiser alguma configuração especial essa é a função, por parâmetro é passado o elemento box<br /> // Quando os elementos fecham, se quiser alguma configuração especial essa é a função, por parâmetro é passado o elemento box<br /> <br /> accordion(pars);<br /> <br /> No json da passagem do parâmetro apenas dois itens são obrigatórios, o id do accordion e o tempo da animação todos os outros, são de acordo com a sua vontade.<br /> <br />Exemplo de uso:<br /><br /><div id='accordion'><br /> <div class='box'><br /> <div class='header'>Titulo do box</div><br /> <div class='content'>Conteudo da caixa do accordion</div><br /> </div><br /> <div class='box'><br /> <div class='header'>Titulo do box 2</div><br /> <div class='content'>Conteudo da caixa do accordion 2</div><br /> </div><br /></div><br /><br /><br />accordion({id : 'accordion1', time : 500});<br /><br />O link do código que disponlizei encontra-se <a href="http://coisasdeweb.meuphpgratis.com.br/accordion/">aqui</a><br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com0tag:blogger.com,1999:blog-489365202656835633.post-62124291607138927812008-11-17T20:23:00.003-03:002008-11-20T12:12:22.304-03:00JQuery uma ferramenta essencialYeah, I'm still alive!<br /><br />Ultimamente, está faltando disposição para continuar postando, com tantas tarefas, acabo deixando o blog para depois e esse depois nunca chega, um pouco dessa falta de disposição é que estou querendo mudar um pouco, esse negócio de ficar escrevendo sempre, não está mais me satisfazendo, estou procurando uma forma diferente, não sei se entro no mundo dos podcast, videocast, ou seja lá o que for.<br /><br />Hoje, vou reforçar algo que está mais do que reforçado no mundo dos blogs.<a href="http://www.jquery.com">JQuery</a>, nunca gostei muito da idéia de usar essas libs, na verdade, não usava, pois queria aprendendo colocando a "mão na massa" sozinho e depois sim, quando me achasse apto, escolher uma dessas bibliotecas-que-fazem-tudo. Enfim, não sei se essa é a melhor maneira de aprender, mas posso dizer que aprendi bastante assim. JQuery, é magnífico vai desde seletores, até pequenas animações que são muito simples de serem usadas. O que mais me conquista nessa lib é a simplicidade, pra mim quanto mais simples melhor e falando em simplicidade não consigo imaginar nada melhor que JQuery.<br /><br />Aqui vai uma lista de 5 coisas que adoro em JQuery:<br /><br />• <span style="font-weight:bold;">atributos</span> do tipo height, que teoricamente, seria necessário duas funções uma de <span style="font-style:italic;">get</span> outra pra <span style="font-style:italic;">set</span>. Utiliza apenas uma função o que define se é set ou get, é a passagem de parâmetro, se passar parâmetro é set, senão é get.<br /><br />• Os <span style="font-weight:bold;">seletores css</span>, por causa deles não sou mais obrigado a colocar id em todos os elementos, é possível encontrar elementos nas páginas de forma fácil e eficiente.<br /><br />• As funções <span style="font-weight:bold;">hover</span>(<span style="font-style:italic;">over, out</span>) e <span style="font-weight:bold;">toggle</span>(<span style="font-style:italic;">fn, fn</span>), no primeiro caso, você adiciona o evento de over e out de um elemento de uma forma muito simples e no segundo caso (o qual uso muito), serve para quando um elemento com o evento click possui duas ações diferentes. Por Exemplo, É o caso do interruptor (o botão possui dois estados, ligado e desligado, normalmente)<br /><br />• E a última, porém não menos importante, são os efeitos que é possível aplicar: <span style="font-style:italic;">show, hide, slideUp, slideDown</span>. Para mim, a melhor é <span style="font-weight:bold;">animate</span>. Pois, com essa função você aplica os efeitos que você quiser da forma que quiser, uso muito essa função. Antes, do jquery demorava um pouco, para fazer qualquer tipo de animação, agora não demoro mais do que dois minutos.<br /><br />Enfim, jQuery para mim é uma biblioteca completa, apesar de muitos não concordarem com isso. A documentação é muito bem explicada, apesar de ser em inglês. E se fosse você e não utiliza jQuery, começaria agora a estudar, muitas empresas, pelo menos aqui no Rio, já estão pedindo conhecimento nessa lib.<br /><br />Fuiiiramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com0tag:blogger.com,1999:blog-489365202656835633.post-25906274360862056062008-08-16T11:59:00.002-03:002008-08-16T12:16:58.543-03:00Exibir imagem de fundo da tr no Internet ExplorerAqui vai uma dica legal, um dia desses estava montando uma página quando me deparei com um <br /><br />problema:<br /><br />Construi a seguinte <strong>tabela</strong> para exibir <strong> dados tabulares</strong>.<br /><code><br /><table><br /> <thead><br /> <tr><br /> <td>Titulo 1</td><br /> <td>Titulo 2</td><br /> <td>Titulo 3</td><br /> <td>Titulo 4</td><br /> </tr><br /> </thead><br /> <tbody><br /> <tr><br /> <td>ln1 col1</td><br /> <td>ln1 col2</td><br /> <td>ln1 col3</td><br /> <td>ln1 col4</td><br /> </tr><br /> <tr><br /> <td>ln2 col1</td><br /> <td>ln2 col2</td><br /> <td>ln2 col3</td><br /> <td>ln2 col4</td><br /> </tr><br /> </tbody><br /> <tr><br /></table><br /></code><br /><br />Agora estilizando a linha da tabela:<br /><code><br />tr { background:transparent url("images/imgLinha.png") no-repeat; }<br /></code><br /><br />O estilo acima não existe mistério, ou pelo menos assim eu pensava, para cada linha da <br /><br />tabela mandei o css carregar a imagem imgLinha.png como background, só que aí está o <br /><br />problema, pois por algum motivo que desconheço o IEca não renderiza a imagem pela linha <br /><br />(tr) e sim pela coluna (td), ou seja, para cada coluna repetia o background não fazendo o <br /><br />efeito desejado, como não sou burro (não ria), logo pensei: Se em cada coluna repete o <br /><br />background, definirei o background da coluna como transparente e pronto.<br /><br /><code><br />td { background:transparent; }<br /></code><br /><br />Só que o IEca cada vez mais me surpreende, simplesmente com o código acima some o <br /><br />background. Depois de muita pesquisa, encontrei a solução, que é a seguinte:<br /><br /><code><br />td { background-position:expression(-this.offsetLeft); }<br /></code><br /><br />Com essa expressão, você consegue exibir o background da linha.Achei legal colocar isso <br /><br />aqui, pois não achei um site em português que tivesse a solução e a considero bem útil.<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com8tag:blogger.com,1999:blog-489365202656835633.post-58298386754011869562008-06-05T07:15:00.001-03:002008-11-20T12:13:21.914-03:00SQL In jection - Parte IEstou começando à estudar um pouco mais sobre <strong>SQL Injection, Code Injection etc</strong>, esses conhecimentos são de suma importância para todos os desenvolvedores, pois com medidas básicas de segurança, é possível evitar muitos ataques, claro que se quer evitar todos é necessário um estudo aprofundado e ainda assim não está 100% seguro, pois sempre se arranja um modo de burlar a segurança, a dica é sempre estudar sobre o assunto. Esse é um tema, que você pode usar para o bem ou para o mal e abordarei o tema para tentar se prevenir e não para o uso maléfico, é como eu sempre digo: “Sua cabeça é seu guia”, então ao invés de tentar prejudicar os outros, vamos nos beneficiar com essas informações.<br /><br />Bom, no tópico de hoje abordaremos um erro que é cometido aos montes por aí, é o de autenticação no site, um SQL <strong>inofensivo</strong> como esse, pode dar-lhe muita dor de cabeça:<br /><br />Obs: Nos exemplos utilizarei como código de programação PHP e banco de dados MySQL.<br /><br /><code><br />$sql = “SELECT * <br /> FROM logaUsuario <br /> WHERE login = ‘$login’ AND senha = ‘$senha’“;<br /></code><br /><br />Aposto que você já fez um esquema de login parecido com esses muitas vezes (confesso, eu também), pois bem, uma pessoa com um mínimo de conhecimento de SQL Injection consegue entrar no seu sistema com muita facilidade, como sabemos na tabela-verdade, o AND para se ter um resultado verdadeiro é necessário que as duas partes das sentenças sejam verdadeiras, já no OR se apenas um sentença for verdadeira o resultado é verdade, agora que temos essa informação bem definida, vamos alterar um pouco o sql de cima:<br /><br /><code><br />$sql = “SELECT * <br /> FROM logaUsuario <br /> WHERE login = ‘$login’ <strong>OR ‘1’=’1’</strong> AND senha = ‘$senha’ <strong>OR ‘1’=’1’</strong>“;<br /></code><br /><br />Após cada um dos testes (login e senha) adicionei um <strong>OR ‘1’=’1’</strong>, ou seja, se login for igual à um login cadastrado no banco de dados ou 1=1 ( o que temos certeza que é verdade) e senha repetindo o mesmo processo, obteremos sempre uma consulta que retornará resultado. Você deve estar se perguntando agora como adicionar esse OR na consulta, pois bem:<br /><br /><ul><br /><li>No input de login, colocar a seguinte expressão: ‘ OR ‘1’=’1</li><br /><li> No input de senha, colocar a seguinte expressão: ‘ OR ‘1’=’1</li><br /></ul><br /><br />Com isso você já consegue retornar todos os valores da tabela logaUsuario. Mas vamos supor que depois desse sql o desenvolvedor fez um teste que somente se logará no sistema se a pesquisa retornar apenas um linha, e esse teste sendo feito pela função mysql_num_rows, bom para isso o procedimento é bem parecido, agora só temos que limitar para que o sql nos retorne apenas uma linha e para fazermos isso:<br /><br /><ul><br /><li>No input de login, colocar a seguinte expressão: ‘ OR ‘1’=’1</li><br /><li>No input de senha, colocar a seguinte expressão: ‘ OR ‘1’=’1’ LIMIT 1 --</li><br /></ul><br /><br />Adicionei um LIMIT 1 e o -- (comentário no MySql), precisa-se coloca-lo para ignorar a última aspas que sobrou. Com esses dois passos bem simples, muita gente consegue entrar em um sistema de login. Com essas alterações o sql ficou dessa forma:<br /><br /><code><br />$sql = “SELECT * <br /> FROM logaUsuario <br /> WHERE login = ‘$login’ <strong>OR ‘1’=’1’</strong> AND senha = ‘$senha’ <strong>OR ‘1’=’1’ LIMIT 1 --‘</strong>“;<br /></code><br /><br /><br />Com uma medida muito mais simples você pode tirar essa falha do sistema. O grande causador desse estrago foram as aspas, pois através dela o atacante consegue abrir e fechar uma string e adicionar o código que ele quiser em seu sql. Para evitar esse problema, utilize a função nativa do php <a href="http://www.php.net/addslashes" target=”_blank”>addslashes()</a> na variáveis, para você que não usa php essa função adiciona ‘\’ (slash) antes de todas as aspas da sua string, agora o atacante não consegue adicionar código malicioso no seu sql.<br /><br /><code><br />$login = addslashes($login);<br />$senha = addslashes($senha);<br /></code><br /><br />Espero que saiba usar essas informações de forma inteligente e sem tentar prejudicar os outros. Senão aparecer muitos ataques por aí de sql injections, eu apareço com mais informações sobre o assunto. XD <br />Saiba isso é apenas o começo.<br /><br />That’s all Folks!!!ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com3tag:blogger.com,1999:blog-489365202656835633.post-76263530375014275172008-05-11T18:31:00.002-03:002008-11-20T12:14:01.940-03:00ELPI e EWD - RJNessa semana participei de dois eventos que ocorreram no RJ e falarei um pouquinho de cada um, mas como diria Jack Stripador, ‘Vamos por partes!’.<br /><br />Na segunda-feira respondi um desafio no <a href="http://www.tableless.com.br/elpi-problema-5" >Tableless</a> e ganhei uma par de ingressos para a <a href="https://www.locaweb.com.br/encontro/Default.asp">10° ELPI</a> (evento que ocorreu na quarta-feira). Este foi o primeiro ELPI em que estive e posso assegurar que será o primeiro de muitos, excelente o evento, a localização, o espaço e a organização foram ótimas, sem contar com as palestras que foram exemplares. Nesse evento, pra mim, teve os seguintes destaques.<br /><br /><ul><br /><li><strong>Coffee break</strong>, Aquilo sim que é um coffee break de respeito, muito bom, a comida é infinita, acaba nunca</li><br /><li><strong>As mulheres da plaquinha</strong>, só tinha modelo, perfeitas</li><br /><li><strong>Palestra da microsoft</strong>, essa palestra teve dois pontos altos: um – foi a aparesentação em si, a forma em que foi apresentada, achei interessante, só não conto, pois se você for, vai perder a graça e o outro ponto: o palestrante se negava à todo custo falar a palavra ‘google’, inacreditável.</li><br /><li><strong>Palestra do Elcio</strong>, ela já era especial antes de começar, pois estava lá por causa do convite dele, mas independente disso, palestra extremamente interessante e o mais incrível é a habilidade dele no VIM, quem já mexeu com linux, sabe o quanto aquilo é chato e vendo-o desenvolver, parece que é simplório, fiquei impressionado com a destreza dele.</li><br /></ul><br /><br />Convite que ganhei na <a href="http://forum.ievolutionweb.com/index.php?showtopic=20835&hl=" >webly</a> e aconteceu hoje, infelizmente tive que sair antes do término, evento bacana também, apesar de não ser muito a minha área, mas é sempre bom estar nesse meio, gosto desses encontros, conhecer gente nova, trocar conhecimentos, ganhar canetas ...<br /><br />Enfim, essa semana foi bem agitada, eventos super-legais, se algum desses passar na sua cidade, recomendo-os.<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com0tag:blogger.com,1999:blog-489365202656835633.post-66144424570276255802008-04-05T17:28:00.007-03:002008-04-05T18:19:47.475-03:00Nao propagar a opacidade aos elementos filhosApós um longo tempo, aqui estou eu.<br /><br />Você provavelmente já fez uso da propriedade de opacidade (filter, opacity, -moz-opacity), portanto sabe que todos os elementos filhos do qual você adicionou opacity, herdam o valor dessa propriedade, pois bem outro dia estava desenvolvendo e não queria que o valor da opacidade fosse herdado para os seus filhos, fui ao oráculo (leia-se: google), para tentar resolver esse problema pelo css, pesquisei um pouco e nada encontrei, pelo que pesquisei não é possível impedir essa hereditariedade. Como não tinha muito tempo fiz um script para resolver o problema, é o script que está logo abaixo, porém se você sabe uma forma de impedir essa hereditariedade a dica será muito bem-vinda, pois o código foi a maneira mais prática que encontrei.<br /><br />Código:<br /><code><br />function fundoTransparente ( node, trans, props ){<br />/**<br />* Criado por Ramon<br />* www.coisasdeweb.blogspot.com<br />**/<br /> node = ( typeof(node) == "string" ) ? document.getElementById( node ) : node; //Se veio apenas o id, pegarei o nó <br /> var newNode = node.cloneNode(false); //Macaco de imitação<br /> var opacity = node.style.opacity; //Grau de opacidade<br /> opacity = opacity || node.style.MozOpacity || 1; //Grau de opacidade<br /> trans = trans || opacity*100; //Transparência que eu quero<br /> with (newNode.style) { //Configurando o nó<br /> filter = "alpha(opacity=" + trans + ")";<br /> MozOpacity = trans / 100;<br /> opacity = trans / 100;<br /> position = "absolute";<br /> top = 0 + "px";<br /> left = 0 + "px";<br /> }<br /> <br /> newNode.id += "bg"; //Modifico o id do clonado, para id + bg<br /><br /> node.appendChild( newNode ); //Vamos pra árvore DOM.<br /> node.style.opacity = 1;<br /> node.style.MozOpacity = 1;<br /> node.style.background = "none";<br /> <br /> if ( typeof(props) == "undefined" ) return;<br /> <br /> for (var i in props){ <br /> node.style[ props[i] ] = "none"; //Propriedades recebem o valor none<br /> }<br />}<br /></code><br /><br />A função é bem simples, recebe 3 parâmetros:<br /><ul><br /> <li>Nó ou id, vc escolhe.</li><br /> <li>Transparência que você quer (escala de 0 à 100). Opcional</li><br /> <li>Propriedades (tipo array) que receberão valor none, para o elemento que têm o alpha possa dar o efeito esperado. Por padrão, o background recebe none (para dar o efeito de opacidade).</li><br /></ul><br /><br />Para utiliza-lá, basta fazer a chamada dessa forma:<br /><br /><code><br /> fundoTransparente("fundo", 40); //Id<br /><br /> //Ou<br /><br />fundoTransparente(document.getElementById('fundo'), 40); //Elemento<br /></code><br /><br />O segundo parâmetro referente ao grau de opacidade, funciona da seguinte forma:<br /><ul><br /> <li>Se você não passá-lo, a função vai procurar no css do elemento se a propriedade opacity possui algum valor, se possuir esse vai ser o grau de opacidade ( se estiver usando o FF, a função também consegue pegar o valor de –moz-opacity)</li><br /><br /> <li>Se passar o parâmetro, é o valor que prevalecerá sobre os demais.</li><br /></ul><br />Espero que gostem, pois para mim está sendo bem útil essa função, agora com uma linha no javascript, não tenho mais problemas de opacidade ser herdada.<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com2tag:blogger.com,1999:blog-489365202656835633.post-2011799974767705792008-03-07T21:19:00.002-03:002008-03-07T21:25:10.114-03:00Construindo um gadgetComo prometido, aqui estou eu para falar um pouco de como construir um gadget.<br />Aqui está o <a href="http://www.sykey.net/2007/02/08/windows-sidebar-no-windows-xp/comment-page-6/" target="_blank">link</a> de como fazer a instalação da side-bar que não é o escopo desse post.<br />Vai lá instalar que eu te espero...<br /><br /><br />Construir um gadget se assemelha à desenvolver uma página web, com algumas configurações especiais das quais falarei, agora.<br /><br />Antes de tudo, desenvolva o seu ambiente de desenvolvimento.<br />Na pasta <strong>Gadgets</strong> que se encontra dentro da pasta <strong>Windows Sidebar</strong>, crie uma pasta com o nome do seu gadget com o final .gadget (ex: meuGadget.gadget)<br /><br />Obs: O .gadget na pasta é obrigatório, senão o windows não consegue identificar o seu gadget.<br /><br />Pasta criada, teremos agora que desenvolver um arquivo XML contendo as informações básicas do seu gadget.<br /><br />Código:<br /><code><br /><?xml version="1.0" encoding="utf-8"?><br /><gadget><br /> <name>olaRio</name><br /> <namespace></namespace><br /> <version>1.0.0.0</version><br /> <author name="Ramon Silva"><br /> <info url=" http://coisasdeweb.blogpot.com" text=" http://coisasdeweb.blogpot.com"/><br /> <logo src="logo.png"/><br /> </author><br /> <copyright></copyright><br /> <description>Exemplo de criacao de um gadget</description><br /> <icons><br /> <icon height="48" width="48" src="logo.png" /><br /> </icons><br /> <hosts><br /> <host name="sidebar"><br /> <base type="html" apiVersion="1.0.0" src="pagina.html"/><br /> <permissions>full</permissions><br /> <platform minPlatformVersion="1.0"/><br /> <defaultImage src="logo.png" /><br /> </host><br /> </hosts><br /></gadget><br /></code><br /><br />Explicando:<br />Tag name -> Nome que aparece na lista de gadgets.<br /><br />Tag author -> Informações sobre o autordo gadget.<br /><br />Tag copyright -> Informações de direitos autorais.<br /><br />Tag description -> descrição do gadget.<br /><br />Tag icon -> Imagem que será exibido na lista de gadgets.<br /> <br />Tag host name="sidebar" -> Tag obrigatória e não pode ser alterados os valores<br /><br />Tag base -> A propriedade src é a responsável por setar a página principal do seu gadget<br /> <br />Configurado o ambiente, agora é só se divertir.<br />HTML:<br /><code><br /><html><br /> <head><br /> <title>Primeiro gadget</title><br /> </head><br /> <body style="background:#ddd;width:130px;height:67px"><br /> <marquee><p>Olá Rio!!! :)</p></marquee><br /> </body><br /></html><br /><html><br /></code><br /><br />É possível fazer uns gadgets bem interessantes, essa side-bar que o Windows implementou no Vista, já foi implementado há muito tempo no Linux (distribuição Kurumin) e acho uma idéia sensacional. Ainda mais agora que posso fazer o meu gadget.<br /><br />Obs1: Com os gadgets, é possível uma interação interessante com o SO, ainda estou estudando, mas assim que dominar algumas mais, dou uma passada por aqui. ;)<br />Obs2: Muita gente que conheco pronúncia gadget de forma errônea, então aqui vai uma dica: A pronúncia correta do gadget é <i>gedjiet</i> (desculpeme a ignorância, não sei escrever aqueles símbolos de pronúncias).<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com3tag:blogger.com,1999:blog-489365202656835633.post-77697270173895500832008-02-23T19:15:00.003-03:002008-02-23T20:21:48.412-03:00Limite de arquivos cssOi galera!<br /><br />Bom, estou bastante atarefado ai tive uma folguinha e resolvi dar uma passada por aqui. <br /><br />Esse post será o primeiro da categoria voceSabia, como todos os "você sabia" existentes por aí, são curiosidades que muitas das vezes não trazem informações muito úteis para as nossas vidas, mas nós (pelo menos eu) adoramos ler. Espero que goste.<br /><br /><br /><h2><strong> Você Sabia ? </strong></h2><br /><br />...que o IEca têm limite de arquivos suportados para as tags <em>< link ></em>?<br /><br /><br />Isso mesmo, o IEca possui um limite de 30 arquivos linkados com a tag link, passando esse limite, simplesmente ignora os arquivos subseqüêntes, provavelmente você nunca chegará à esse limite e se chegar, há uma grande possibilidade de você ter que rever seu projeto, pois há algo errado, mas pode ser também que seja necessário o uso de todos esses arquivos, nesse caso é preciso usar:<br /><br />Código:<br /><code><br />...<br />< style ><br />@ import(enderecoDoArquivo);<br />< /style ><br />...<br /></code><br /><br />No próximo post, mostrarei como construir um gadget (a sidebar do Windows Vista) utilizando HTML, Javascript e XML.<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com0tag:blogger.com,1999:blog-489365202656835633.post-50399431221887416112008-01-09T11:17:00.000-03:002008-01-16T12:26:42.450-03:00Inspecionando propriedades com o watchVamos nessa que o tempo ruge e a sapucaí é grande!<br />Cada vez que leio um pouco mais sobre desenvolvimento, mas eu vejo que tenho que estudar, isso de certa forma é bom, pois nunca haverá alguém bom o suficiente que não tenha o que aprender é aquela velha frase "Estudar (Ler) é um universo em desencanto", agora que viajamos um pouco voltaremos ao tema. Essa função <em>watch</em>, é muito interessante e não vejo muita gente comentando sobre ela por aí, então resolvi trazer esse assunto. Tomará que para você seja inédito o uso dela, pois fiquei super empolgando quando descobri a <em>engine</em> da coisa.<br /><br /><center><strong>Watch</strong></center><br /><em>Definição:</em> Executa uma função específica quando é atribuído um valor à propriedade observada.<br /><em>Sintaxe:</em> <em>instObj</em>.<strong>watch</strong>(propriedade, função);<br /> Obs: a propriedade fica entre aspas dupla (").<br /><br />No final das contas, ele funciona como um debugador.<br /><br />Código: <br /><code><br /> objeto = {propriedade:"funciona ?"}<br /> objeto.watch("propriedade", handler);<br /><br /> function handler (id, velhoVal, novoVal) { <br /> //Confirmo se o usuário quer receber o novo valor da propriedade, senão continua com o mesmo valor.<br /> return (confirm("objeto."+id+" era"+velhoVal+" agora é "+novoVal+". Deseja receber o novo valor?"))?document.write(novoVal): document.write(velhoVal);<br /> }<br /><br /> objeto.propriedade = "Claro que sim";<br /></code><br /><br />Explicando o código acima:<br />linha 1 -> Crio um objeto, no qual a propriedade recebe o valor (funciona?)<br />linha 2 -> Mando o javascript <strong>inspecionar</strong> a propriedade (propriedade) do objeto (objeto) chamando a função handler.<br />linha 3 -> a função handler, como pode-se observar possui 3 parâmetros (id, velhoVal, novoVal), são parâmetros padrão e não é possível passar outros parâmetros à essa função (até onde eu sei, pelo menos), onde estes por sua vez são:<br /> . id -> Identificação da propriedade que é inspecionada.<br /> . velhoVal -> O valor antigo da propriedade.<br /> . novoVal -> O valor novo da propriedade.<br /> Obs: Manter a ordem dos parâmetros.<br />linha 4 -> Texto de exibição<br />linha 5 -> Essa linha é importante, é o valor que a propriedade irá conter, se você não der um retorno para essa função a propriedade vai ter o valor undefined. Com esse <em>watch</em> pode-se atribuir qualquer valor de retorno à essa propriedade. Chocante né?!<br /><br />linha última -> Troco o valor da propriedade para o handler ser executado.<br /><br />Todos os objetos, descendem essa função.<br /><br />Mais uma coisa, se você não quiser mais "inspecionar" a propriedade usa a função <em>unwatch</em>.<br /><br />Usando o mesmo exemplo.<br />Código:<br /><code><br />objeto.unwatch("propriedade");<br /></code><br /><br />Divirtam-se, pois achei isso o máximo<br /><br /><strong>[UPDATE]</strong><br /> Na linha do retorno do novo valor, pus um document.write para exibir apenas o valor da variável, dessa forma é possível visualizar toda a operação<br /> Como observado pelo Micox, o IEca não dá suporte à essa propriedade<br /><strong>[/UPDATE]</strong><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com3tag:blogger.com,1999:blog-489365202656835633.post-14621924796922639692008-01-03T11:18:00.000-03:002008-01-03T11:19:43.869-03:00Desabilitar o menu do botao direito do mouseMais um post fast-fast!<br />Essa dica é bem massa, se você usa o Yahoo!Mail, já percebeu que ao clicar com o botão direito, o menu exibido não é o do browser e sim do próprio Yahoo!, o menu do browser está desabilitado. Então vamos nessa:<br /><br /><code><br />document.oncontextmenu = function () {<br /> alert("Menu do browser desabilitado");<br /> return false;<br />}<br /></code><br /><br />Divirta-se!<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com1tag:blogger.com,1999:blog-489365202656835633.post-44830431201364574262008-01-02T11:41:00.000-03:002008-01-02T11:42:27.512-03:00Desabilitar o selecionar texto do mouseAlgumas vezes não queremos que em nossas páginas o "selecionar texto" do mouse fique habilitado, aqui vai uma dica legal pra quem quer desabilitá-lo, infelizmente acredito que não funcione em todos os browsers, testei apenas no IEca e no FF e funfou perfeitamente, quem quiser testar em outro browser, sinta-se à vontade e comente aqui se funcionou. XD<br /><br /><code><br /> if (typeof document.onselectstart!="undefined") //IEca<br /> document.onselectstart=function(){return false}<br /> else //FF<br /> document.body.style.MozUserSelect = "none";<br /></code><br /><br /> O FF não possui a propriedade onselectstart, o que achei estranho, e o IEca possui.<br /> O FF possui a propriedade MozUserSelect, que pertence apenas à ele.<br /> Não tenho certeza se a propriedade onselectstart é suportada por outros browsers.<br /><br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com3tag:blogger.com,1999:blog-489365202656835633.post-9100403977403665192007-12-30T12:11:00.000-03:002007-12-30T12:12:11.661-03:00InsertBefore e appendChildÚltimo post do ano! :)<br />Como prometido iremos falar sobre appendChild e insertBefore. Bom, já sabemos que appendChild e insertBefore, não é inclusão do elemento na estrutura html e sim a re-alocação. Os dois possuem apenas essa função, porém funcionam de forma diferentes.<br /><br /><center><strong>insertBefore</strong></center><br />Aloca um elemento no nó pai, anteriormente do elemento selecionado.<br /><br />Sintaxe:<br />elemento.insertBefore(elemento_a_ser_alocado, elemento_guia);<br /><br />Ex:<br />document.getElementById("meuElemento").insertBefore(document.createElement("DIV"), document.getElementById("elementGuia"));<br /><br />No exemplo acima, o elemento DIV irá ser adicionado antes do elementoGuia.<br /><br />Obs.:<br />Para essa alocação funcionar o elementoGuia, tem que ser filho (direto) do elemento (meuElemento), ou seja, não pode ter nenhum elemento entre elementoGuia e meuElemento.<br /><br /><br /><center><strong>appendChild</strong></center><br />Aloca um elemento no último filho do elemento selecionado.<br /><br />Sintaxe:<br />elemento.appendChild(elemento_a_ser_alocado);<br /><br />Ex:<br />document.getElementById("meuElemento").appendChild(document.createElement("DIV"));<br /><br />No exemplo acima adicionei a DIV após o último filho do elemento meuElemento, sendo assim, a DIV passa a ser o último filho do elemento meuElemento.<br /><br />Considero esses conceitos de vitais importância para quem está iniciando o estudo de DHTML, ísso é só o início, com outros conceitos, você verá que é possível ser feito muito mais coisas interessantes com essas propriedades que falei hoje.<br /><br />Então é isso, Um próspero ano novo à todos.<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com3tag:blogger.com,1999:blog-489365202656835633.post-77835896066658694402007-12-20T12:00:00.000-03:002007-12-20T12:01:39.393-03:00Criando e deslocando elementos DOMDepois de muito tempo, estou de volta!<br />Hoje vou falar de uma dica, que muitos irão achar idiota, outros não. Esses lances de DOM, são muito massa né?! Só que eu sou meio burrinho (rs). Enfim, é algo bem simples, porém nunca tinha me dado conta o quão simples era. Em DOM têm-se o comando:<br /><br /><code><br />meuElem = document.createElement("elemento");<br /></code><br /><br />O comando acima, cria um elemento html, porém em todos os exemplos que vi na internet até hoje, esse comando era seguido disso:<br /><br /><code><br />document.getElementById("meuElemento").appendChild(meuElem);<br /></code><br /><br />OU<br /><code><br />document.getElementById("meuElemento").insertBefore(meuElem, document.getElementById("meuElemento").lastChild);<br /></code><br /><br />Sempre interpretei que os códigos acimas, "cria-se" um elemento dentro do elemento com id de meuElemento, não tinha dúvidas quanto à esse conceito. Porém, ledo engano meu caro, o elemento já tinha sido criado, portanto nesses dois códigos acima, só foram feitos os "deslocamentos" dos elementos. Pensando dessa forma, um monte de coisas que tinha grande dificuldade de fazer, pois se tornavam extensos, podem ser feitos bem rápidos, segue um exemplo muito bom:<br /><br />Você tem uma aplicação que em um determinado momento, dependendo da iteração com o usuário, o mesmo pega um elemento que é filho de um "pai" e muda de lugar, acarretando na mudança de pai. O que eu um méris mortal fazia?<br /><br />Sempre soube que a propriedade parentNode, era apenas de leitura. =/<br />Se eu não posso mudar o "pai", só me resta criar um outro elemento com o pai desejado, mas que tenham os mesmos atributos, com isso acarretava de eu usar, um cloneChild com o "pai" diferente e depois fazer um removeChild.<br /><br />Viu o trabalhão? Duplico o elemento que eu quero, jogo no pai desejado e excluo o elemento que pertence ao pai que não desejo mais.<br /><br />Mas com o conceito que falei anteriormente, Seus problemas acabaram. (com muito mais échio) [Concordo contigo, estou no fundo do poço, citar Casseta & Planeta, ninguém merece]<br /><br />Não preciso de mais nada disso, posso resolver o meu problema direto com o appendChild ou insertBefore, como eles não são os responsáveis pela criação do elemento e sim, apenas, pelo "deslocamento", ou seja, desloco o meu elemento para o pai desejado e pronto.<br /><br /><code><br />document.getElementById("newFather").appendChild(document.getElementById("child"));<br /></code><br /><br />Viu? Ficou muito mais simples.<br /><br />"Coisas simples devem parecer simples, coisas complexas devem parecer possíveis."<br /><br />Obs1: Eu não entrei em maiores detalhes sobre a diferença entre o insertBefore e appendChild, pois esse não era o foco principal desse post, mas em um próximo post, explico com maiores detalhes essas duas propriedades importantíssimas.<br /><br />Desejo à todos um ótimo natal e semana que vem estou de volta! (pelo menos, assim espero)<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com0tag:blogger.com,1999:blog-489365202656835633.post-18793426779975785462007-11-06T08:27:00.000-03:002007-11-06T08:28:30.647-03:00Ajax e DoctypeLá no Pinceladas Da Web, tem um <a href="http://www.pinceladasdaweb.com.br/blog/2007/11/06/problemas-com-ajax-e-quirks-mode/" target="_blank">artigo</a> muito interessante sobre a questão do doctype junto ao Ajax, sobre os problemas que poderão existir com a implementação, nunca tinha lido uma análise sobre o assunto focando o uso com Ajax, acredito que todos usem DOCTYPE, mas sempre tem um desavisado que ignora.rs<br /><br />Aconselho ir lê-lo, também tem o link do <a href="http://swik.net/Ajax/Ajax-Development-Gotchas" target="_blank">artigo completo</a> (inglês), muito esclarecedor também.<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com2tag:blogger.com,1999:blog-489365202656835633.post-59615211932405523662007-10-30T08:42:00.000-03:002007-10-30T08:44:24.750-03:00Sem AssuntoDesculpe a minha falta de posts, ultimamente não tenho tempo (mas isso não é desculpa, nesse mundo ninguém tem tempo) e o principal nunca acho um assunto legal, estou totalmente desprovido de criatividade, meu caderninhos de temas para o blog está em branco, então vim dar uma explicação do meu sumiço e assim que eu tiver assuntos interessantes, eu volto pra cá, ou se você tiver alguma dúvida coloca ai que aceito como sugestões e faço um post. XD<br /><br /><br />fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com0tag:blogger.com,1999:blog-489365202656835633.post-20632263131285109922007-10-18T15:56:00.000-03:002008-12-09T14:10:23.870-03:00E mais um bacuri chega entre nósVamos à um post totalmente "off-topic", ou seja, hoje vou falar de algo extremamente pessoal, se você não está afim de ler sobre um pouco da minha vida, aconselho parar a leitura por aqui.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzamMqv_eKyPQwcAfDBWwKiEb_Lu6VIeecaqpgculf6AOAcFqV6e3JiD3Rpj51hy7gZDG6YbEfRuYdpqsIphLC-UKgXnSMB-LKCKUN4xJUsLYqgfWfyq8c8WC5tbe3Gh6JR3NQwyFfHWw/s1600-h/eu+e+preto.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzamMqv_eKyPQwcAfDBWwKiEb_Lu6VIeecaqpgculf6AOAcFqV6e3JiD3Rpj51hy7gZDG6YbEfRuYdpqsIphLC-UKgXnSMB-LKCKUN4xJUsLYqgfWfyq8c8WC5tbe3Gh6JR3NQwyFfHWw/s320/eu+e+preto.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5122757229642554178" /></a><br />Hoje nasceu o filho do meu amigo (leia-se:irmão) Preto (não sou racista, é porque assim ele gosta de ser chamado), em situações assim que pensamos (nascimentos, são bom motivos pra pensar) em um flashback de nossas vidas e lembro do dia que conheci-o (claro que isso é força de expressão, nem lembro do que eu comi hoje no almoço), não gostava muito dele era verdade, pois ele era da turma rival, sabe como que é quinta-série, porém ele tinha dois pontos positivos.<br /><ul><br /><li>Era o único maluco que fazia os cursos de informática que eu fazia.=p</li><br /><li> Conhecia bastante garotas, isso era "cool"</li><br /></ul><br />Nunca tive muito sucesso com as garotas, então ele era um bom ícone, ai fui aprendendo um truque aqui, outro acolá e agora superei o "professor", ele é quem me pede as aulas agora, enfim tanta coisa passamos juntos nesse nosso pequeno tempo de convivência (8 anos), tantas brigas XD. Estou tão feliz de ter um amigo pai, porque agora eu posso fazer aqueles tipos de piadinhas "você tá feliz?Imagina o pai.", "fez o filho agora assuma. Disso você entende", entre outros.<br /><br />Estou muito feliz por você Preto, que Deus ilumine a sua vida e a do seu filho, tudo de bom pra ti, brother.<br /><br />ps: Esqueci de mencionar, nessa foto aí em cima, o cara da esqueda sou eu e o da direita é o Preto (nessa foto sabe-se, porque ele tem esse apelido. XD)<br />ps2: Depois de ler esse texto, achei que ele ficou meio boiola, por isso quero deixar bem explícito que eu não sou boiola hein.<br /><br />fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com0tag:blogger.com,1999:blog-489365202656835633.post-41107085523680766592007-10-10T23:22:00.000-03:002007-10-11T10:18:40.896-03:00Mais um que resolve a sobreposicao do elemento select no IEEu sei que a Microsoft é a empresa que as pessoas amam odiar (que incoerência não?!), basta ela pisar um pouco na bola que todos reclamam (inclusive eu), porém há situações que você não pode ter outro sentimento senão ódio por tal empresa. Na minha opinião o pior produto da Microsoft é o Internet Explorer, o qual eu humildimente chamo-o de IEca, ele é o responsável por minhas maiores dores de cabeças no trabalho (e algumas vezes, fora também), é um hackzinho aqui, uma outra "regra" de validação que não obedece e por aí vai. Há muito eu tinha o conhecimento, que mais hora ou menos hora, iria me deparar com o problema da tag select. O quê?!, você não conhece esse problema? Sorte a sua, mas vou te explicar. O elemento <select> simplesmente aparece por cima de todos os outros elementos HTML, que até à uma hora atrás isso pra mim era inexplicável, na verda a explicação é, se me permitem, escrota, mas foi a explicação que li no próprio site da microsoft. Como diria Jack Estripador, vamos por partes.<br /><br /><ul><br /><li>Procurei uma explicação plausível no <a href="http://support.microsoft.com/kb/177378" target="_blank">site</a> da microsoft o porquê do select sobrepor todos os outros elementos.</li><br /><br /><li>Lá explica-se que há duas categorias de elementos: windowed e windowless.</li><br /><br /><li><strong>O Problema</strong>, o elemento select é um windowed e todos os outros são windowless, ou seja, eu não posso comparar um zIndex de um elemento windowed contra um windowless, pois eles não se entendem o.O (Após ler isso, respirei fundo e me perguntei, por que meu Deus?! Qual é o sentido de todos os elementos serem windowless e o select ser um windowed? Pra mim, isso não faz sentido algum e pra você?, se fizer, por favor, me informa) passado o momento de choque, continuo a leitura da página até o final.</li><br /><br /><li>Na página eles mencionam algo que pode ser (na realidade é) a solução do problema:<br /><br />"This leaves the SELECT element as the only element that is windowed. If you use the preceding code to run the page in Internet Explorer 5.5, when you set the z-index of the SELECT element to a value that is greater than 5, it draws on top of the IFRAME. When you set the z-index of the SELECT element to a value that is less than 5, the IFRAME overlaps it, even though they are both windowless elements."<br /><br />Vale lembrar que a explicação acima é a partir do IEca 5.5, pois abaixo disso o iframe é considerado um elemento windowed. Pra você que não saca muito de inglês o texto acima fala basicamente que...<br /><br />"O Iframe é um (talvez o único) elemento que consegue sobrepor o elemento select, quando este por sua vez tiver um z-index maior, ou for renderizado (construído) depois."<br /><br />Claro que o texto não foi traduzido, apenas escrevi a idéia que o texto dá.<br /><br />- Poxa legal, mas agora ficou uma dúvida, você não disse que elementos windowed não conseguem comparar z-index de elementos windowless? Então como é que o iframe (elemento: windowless) consegue ficar na frente do <select> (elemento:windowed)<br />-Pois é... Mas aí a microsoft me sai com essa pérola.<br /><br />"This is what makes the IFRAME unique: it follows z-index with respect to windowless elements, and it supports z-index with respect to windowed elements like the SELECT element in this case."<br /><br />Tradução livre (põe livre nisso)<br />"Isto é que faz o IFRAME único ele consegue respeitar os dois z-indexes sem problemas."<br /><br />Ou seja, depois disso só podemos chegar à uma conclusão: Erro de implementação. Pois a única explicação que obtive para o IFRAME ter essa característica "única" é que anteriormente ele era windowed e agora é windowless, por consequência (off: pena que ninguém mais usa trema, gostava tanto delas) herdou as características de um elemento windowed.</li><br /><br /><li>Apelar pra aquele que tudo-sabe (leia-se:Google)</li><br /><br /><li>Solução:</li><br /></ul><br /><br />Achei <a href="http://shepherdweb.com/2007/02/14/z-index-ignored-for-select-element-in-ie-6-workaround/" target="_blank">essa</a> página e lá contém 3 soluções, porém só usei uma e funcionou de acordo, nem testei as outras. <br /><br />Na div que vai ficar em cima do select, inclui-se um iframe recebendo as características css a seguir:<br /><br /><code><br />iframe {<br />display:none;/*sorry for IE5*/<br />display/**/:block;/*sorry for IE5*/<br />position:absolute;/*must have*/<br />z-index:-1;/*must have*/<br />filter:mask();/*must have*/<br />width: 100%;/*must have for any big value*/<br />height: 100%;/*must have for any big value*/;<br />}<br /></code><br /><br />e no html:<br /><code><br /> <div><br /><!--[if IE]><iframe></iframe><![endif]--><br />// O comentário acima o IE lê (só ele mesmo pra ler comentário) e só cria o iframe se for o IE.<br /></div><br /></code><br /><br />e Shazam, agora a sua div fica por cima do select.<br /><br />Espero que ajude muita gente, pois pra mim foi uma ajuda e tanta, tentei aqui colocar o conceito todo até chegar no resultado final, pois não vi muito disso por aí, as pessoas só colocam o código, mas não explica todo o desenvolvimento do raciocínio.<br /><br />Fuiii...<br /><br />[UPDATE]<br />Fiz alguns teste em casa, com essas configurações, mesmo você colocando um número de z-index do select maior que o do iframe, o select estará por baixo do iframe (que no nosso caso, visuaremos a div, pois o iframe está oculto), então está avisado! XD<br />[/UPDATE]ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com6tag:blogger.com,1999:blog-489365202656835633.post-7399837271747242292007-10-03T09:55:00.000-03:002007-10-03T09:59:32.541-03:00Livro Gratis de Ruby On RailsSe você está afim de aprender ruby, assim como eu, essa é uma ótima oportunidade, vi lá no <a href="http://br-linux.org/linux/livro-gratis-de-ruby-on-rails-" target="_blank">BR-Linux</a> que o Patrick Lenz, está disponibilizando o livro dele, completo, para download em PDF durante 60 dias. já baixei o meu! XD<br /><br /><br />fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com0tag:blogger.com,1999:blog-489365202656835633.post-43745182409496659962007-09-29T09:03:00.000-03:002007-09-29T09:04:42.311-03:00O Operador TernarioOlá navegantes, não sei se vocês já ouviram falar no <strong>operador ternário</strong>, é algo bem simples, mas que volta e meia esqueço a sintaxe, então resolvi coloca-lá aqui, existe lugar melhor?<br />Se você não conhece operador ternário é uma forma compacta de fazer um if/else, claro que ele não serve para todo tipo de if/else que você ver por aí (pelo fato dele ser compacto),tem grande serventia para aquele tipo que se testa um valor e dependendo da resposta uma outra variável recebe um ou outro valor. Ex:<br /><code><br />function tipoNum ($num) {<br /> if ($num%2) {<br /> $tipo = "Número Ímpar";<br /> } else {<br /> $tipo = "Número Par";<br /> }<br /> return $tipo;<br />}<br /></code><br /><br />No código acima nada demais, verifico se o número é par ou ímpar de acordo com o resto da divisão e uma variável recebe o texto dizendo se ele é par ou ímpar.(obs: não sei se você sabe, mas no teste acima verifico se o valor é verdadeiro e não um número, através do resultado da operação que me retorna 0 ou 1, que também é considerado um valor booleano, apesar do resultado ser um número. Sempre que se souber o valor retornado será um dos dois, posso fazer um teste lógico, sabendo que 1 corresponde à true e 0 à false).<br /><br />Agora o mesmo código com o operador ternário.<br /><code><br />function tipoNum ($num) {<br /> $tipo = ($num%2) ? "Número Ímpar" : "Número Par";<br /> return $tipo;<br />}<br /></code><br /><br />Muito mais simples né?! <br />Nota Mental: <em>Bom, agora já está anotado e quando esquecer a sintaxe é só ir pro meu blog. XD</em><br /><br />fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com0tag:blogger.com,1999:blog-489365202656835633.post-37169925416626569642007-09-25T11:21:00.000-03:002007-09-25T11:27:12.985-03:00Inserir Elementos Dinamicamente na tabelaUm post rápido, Essa semana tentei fazer algo simples, mas levei um suor pra fazer, mas era algo bem simples de ser resolvido, então você pode estar passando por isso, então aqui venho para esclarecer e até porque se no futuro eu esquecer, posso consultar este blog e ter a resposta XD. Estava, eu fazendo um carregamento dinâmico de uma tabela aqui na empresa, montei a tabela bonitinha e parti para o <a href="http://pt.wikipedia.org/wiki/Dhtml" target="_blank">DHTML</a>, para fazer a estrutura da tabela dinâmica, nesta tabela o carregamento se dava de acordo com a necessidade do usuário e era criado as linhas da tabela de forma que o usuário desejar sem e não colocando sempre na última posição, para essa questão simples, fui utilizar a função <em>insertBefore</em>, para minha surpresa isso retornava o seguinte erro:<br /><br /><strong>Nó não foi encontrado</strong><br /><br />Vi, li e reli a minha tabela e não consegui encontrar o erro, a estrutura da minha tabela estava mais-ou-menos assim:<br /><br /><code><br /><table id="myTable"><br /> <tbody><br /> <tr id="row1"><td>row1col1</td><td> row1col2</td></tr><br /> <tr id="row2"><td>row2col1</td><td> row2col2</td></tr><br /> </tbody><br /></table><br /></code><br /><br />e com o seguinte código tentava adicionar uma linha na tabela:<br /><code><br />var newRow = document.createElement('tr');<br />var row2 = document.getElementById('row2');<br />var aqui = document.getElementById('myTable').insertBefore(newRow,row2);<br /></code><br /><br />E nada de dar certo, fui naquele-que-tudo-sabe (leia-se:Google), ainda sim não tinha encontrado uma resposta satisfatória, até que entrei em um site gringo, que tinha um código muito semelhante ao meu, só que o dele funcionava! (Mas devo confessar que nem ele mesmo sabia porque estava funcionando, pois ele disse que para resolver o problema era necessário fazer o clone de um elemento, no caso um tr, e depois fazer a inserção, essa informação não procede!) Até que descobri o meu erro, mas antes de escrever onde estava errando, gostaria de perguntar à você, se com as informções acima você consegue saber onde estava errando, gostaria que arriscasse um palpite, não custa nada, ninguém nasceu sabendo, então não leia as linhas abaixo e dê o seu palpite, depois disso volte para ver a resposta. (não vale ver a resposta antes, hein) Estou confiando na sua honestidade. rs<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Que rufem os tambores! Boa Sorte! XD<br />O erro era que estava tentando fazer a inserção do elemento <em>tr</em> no elemento <em>table</em> e não pode ser feito dessa forma, tenho que fazer a inserção no <em>tbody</em>, ou seja, passei a <em>id</em> da <em>table</em>, para <em>tbody</em>. Uma questão simples de ser resolvida!<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com3tag:blogger.com,1999:blog-489365202656835633.post-67585211971947503912007-09-11T10:11:00.000-03:002007-09-11T10:13:23.237-03:00This Ou That - Qual UsarDesculpem a demora nos posts, mas minha vida está muito corrida, vários projetos, várias coisas pra fazer e o dia infelizmente só tem 24 hrs. Mas como eu sempre digo (ou pelo menos disse uma vez) Vamos embora que o tempo ruge e a sapucaí é grande.<br /><br />Pois bem, gosto muito de Javascript, mas ele tem certas falhas de implementação (ou assim penso), que não são muito legais, hoje iremos falar do problema com a propriedade <em>this</em>:<br /><br /><code><br />function minhaClasse () {<br /> this.metodo1 = function() {<br /> this.meuValor = 5;<br /> }<br /><br /> metodo2 = function() {<br /> return 10;<br /> }<br />}<br /></code><br /><br />Essa é a forma que costumo implementar classes, não que seja a melhor, mas é a forma que gosto de fazer, existem diversas formas, cabe a você, escolher a que mais agradar. Como visto acima, tenho dois métodos:<br /><br />Metodo 1: Vê-se que a função tem um this na frente o que significa que o método é público. O método seta a variável <em>meuValor</em> um valor de 5 essa variável como pode-se observar ela também é publica, this na frente da variável,(fora do objeto, pode-se pegar o valor dela).<br /><br />Metodo 2: Essa função não tem o this na frente, ou seja, ela é privada. Quando ela é chamada apenas retorna o valor 10.<br /><br />Até aqui, Neves, não tem nada demais, o problema vem agora:<br /><br /><code><br />function minhaClasse () {<br /> this.metodo1 = function() {<br /> return 10;<br /> }<br /><br /> metodo2 = function() {<br /> this.meuValor = 5;<br /> }<br />}<br /></code><br /><br />Acima inverti o conteúdo das funções, porém não inverti a "indentidade" (metodo1 -> publico; metodo2 -> privado) e por isso daria erro ("função meuValor não identificada"), pois segundo a especificação da ECMAScript, métodos privados não podem chamar métodos, variáveis, ou seja lá o que for, públicos. Para fazer com que o exemplo acima funcione é necessário utilizar um método privilegiado (detalhes, sobre isso em um próximo post). <br /><br />Resolvendo - Irá ser necessário criar uma variável global à classe que irá receber o valor this, que comumente é chamado de that e toda vez que tivermos uma função privada e necessitarmos utilizar algo público, ao invés de usarmos o <em>this</em>, utilizaremos o <em>that</em>. Exemplificando, pois com essa explicação até eu me enrolei:<br /><br /><code><br />function minhaClasse () {<br /> var that = this;<br /> this.metodo1 = function() {<br /> return 10;<br /> }<br /><br /> metodo2 = function() {<br /> that.meuValor = 5;<br /> }<br />}<br /></code><br /><br />Com essa simples variável é possível resolver o problema!<br /><br />Espero que isso seja útil para alguém, pois para mim foi muito. Vou ver se no próximo post continuo com algo de objeto.<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com4tag:blogger.com,1999:blog-489365202656835633.post-12264925060337387792007-08-20T09:54:00.000-03:002007-09-12T14:38:52.942-03:00Como achar um elemento na paginaVamos lá que o tempo ruge e a sapucaí é grande. Hoje vamos aprender como se pega a verdadeira posição de um elemento na página. Sabemos que existem as propriedades <em>top, left</em> que teoricamente permite-nos sabermos onde ele se localiza, mas engano nosso, pois<em>top, left</em> referenciam apenas a posição em relação ao seu <em>pai</em> e mesmo assim temos dois problemas:<br /><br /><ul><br /><li>É obrigatório a declaração do top e left, porque senão vem como vazio as propriedades.</li><br /><li>Nem sempre o que declaramos no top e left, e a posição "real" dele em relação ao seu pai.</li><br /></ul><br /><br />Portanto, vemos que as propriedades top e left, não serão de muita serventia, para nossa salvação existem as propriedades <em>offsetTop, offsetLeft</em> as quais de certa forma nos oferece a posição correta do elemento, logo resolvemos metade do problema, pois essas propriedades oferecem as coordenadas em relação ao seu offsetParent (em cada browser o offsetParent é tratado de forma diferente, dessa vez não é só o IEca que dá problemas), mas ainda sim isso não é um grande problema, pois as propriedades são sempre relativas à seus offsetParent, independente de qual for. Com todas essas informações, já podemos resolver o problema, pois sabemos que o offset nos traz a posição "real" do elemento e é relativo à seu offsetParent, logo precisaremos apenas, percorrer todos os offsetParent deste elemento somando os offsetTop e offsetLeft e voilá.<br /><br />Code:<br /><code><br />function pegarPosicao(obj){<br /> var left = 0;<br /> var top = 0;<br /><br /> while (obj.offsetParent){<br /> left += obj.offsetLeft;<br /> top += obj.offsetTop;<br /> obj = obj.offsetParent;<br /> }<br /><br /> left += obj.offsetLeft;<br /> top += obj.offsetTop;<br /><br /> return {x:left, y:top};<br /> }<br /></code><br /><br />No código acima, pego por parâmetro um objeto qualquer, zero as variáveis que irão ser responsáveis por ter o top e left do objeto, entro no laço de repetição e repito até o objeto não ter offsetParent (podemos entender isso como pai, mas nem sempre ,pra falar q verdade quase nunca, o offsetParent é o "pai" do elemento) e na repetição, somo as propriedades que vão me dar a posição do elemento e o elemento recebe o offsetParent dele. Depois de sair do laço ainda vai ter faltado mais uma repetição, pois o último elemento não tem offsetParent, mas pode ter offsetTop e offsetLeft, então somo esse valor às variáveis e retorno o valor real dele na página.<br /><br />Obs: Vale lembrar que as propriedades offset, não podem ser setadas, apenas lidas.<br /><br />Espero que tenham gostado.<br /><br />Fuiii...ramonhttp://www.blogger.com/profile/04392282785585991989noreply@blogger.com3