Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Tchau tchau Spammers by Akismet

    Há um pouquinho mais de um mês, vinha recebendo diversos comentários de spammers malditos que existem por aí na internet. Falavam principalmente de sexo, ou então enviavam dezenas de urls, falavam do viagra, ringtones, etc…

    Malditos Spammers

    Eu já estava de saco cheio disso, recebia e-mail com um maldito enviando um comentário e tinha q eu ir deletar no wordpress. Mas ae resolvi colocar um moderador de comentários, pra que pelo menos não aparecesse nada no Blog enquanto eu liberar. Mas com isso ou usuários e leitores desse Blog acabam sendo prejudicados, pois seus comentários não apareceriam na hora.

    To, to, TOMA seus malditos!

    Mas até que descobri o Akismet, um plugin pro WordPress que instalei agora. Veremos se ele funciona mesmo. Liberei os comentários, agora todo mundo pode comentar, que aparecerá na hora. (pelo menos eu espero q sim :D)

    Agora, aqui no WordPress, tem uma aba do Akismet. Fui dar uma olhadinha, tinha quase 1000 comentários acumulados. Achei bizarro. Pra ver como fui bombardeado.

    Eu imagino como deve ser Blogs mais visitados, com PageRank acima de 5, etc… Mas temos que conviver com isso não eh verdade?

    Então eh isso… Akele abraço a todos.

    [ 24/jul/2006 às 14:51hrs ] [ Por Bruno Dulcetti ] Comentários 4 Comentários |

    Categorias: Pessoais

    » Atalhos e Dicas pro Desenvolvimento

    Falae pessoal.

    Aqui estou eu novamente. Mas só que desta vez não falarei de webstandards, css, flash, php e afins. Darei algumas dicas, para quem ainda naum conhece logicamente, na hora do desenvolvimento dos seus códigos, sistemas, css, html, até textos no word, entre outros.

    Na hora de digitar seus textos, vc geralmente precisa selecionar alguma parte dele, deletar uma letra ou palavra, precisa ir ao fim do documento, início, etc. Existem alguns atalhos legais, alguns conhecidos e outros não, que mostrarei aqui para vocês:

    Ir até o final do documento

    Atalho: Ctrl+End

    Vamos supor que você tenha um documento com 1000 linhas e você está na linha 20, mexendo em uma parte. De repente, vc precisa mexer na linha 995 ou 1000. alguns softwares possuem um recurso para ir até a linha que você quer, isso é ótimo. No meu caso, prefiro sempre não perder o foco no documento, tentar clicar o menos possível no mouse e em menus. Com isso, eu uso este atalho. 😉

    Ir até o início do documento

    Atalho: Ctrl+Home

    É exatamente o contrário do anterior. Estou na linha 1000 e quero ir pra primeira por exemplo. É simples, ao invés de ficar arrastando mouse na barra de rolagem, etc, é só executar o atalho.

    » Obs:

    Para fazer estes dois atalhos em linhas, é só apertar somente o End ou o Home. 😉

    Selecionar a partir de uma parte até o final do documento

    Ctrl+Shift+End

    Com este atalho vc pode selecionar, estando em qualquer parte do documento, até o seu final. Ex: você está na linha 200 e precisa selecionar desta linha, até a linha 1000, que é a última. Basta executar este atalho.

    Selecionar a partir de uma parte até o início do documento

    Ctrl+Shift+Home

    O inverso do anterior. Seleciona de uma parte, até o início do documento. Ex: você está na linha 200 e precisa selecionar desta linha, até a primeira linha. Basta executar este atalho.

    » Obs:

    Para fazer estes dois atalhos em linhas, é só vc naum apertar o Ctrl, somente o Shift+End para selecionar do ponto ao final da linha e Shift+Home para selecionar do ponto ao início da linha.

    Pular palavras

    Ctrl+Seta(← esquerda ou direita →)

    Esse atalho, serve para você não ter que ficar pressionando a tecla de seta e passando de caracter por caracter, que às vezes enxe o saco e ir pulando de palavra em palavra. Ex: Temos a frase: Bruno Dulcetti é feio.
    Tudo bem, é mentira, mas isso naum vem ao caso :D. Você estando antes da palavra “Bruno” e apertando o atalho mais a seta pra direita →, o cursor do teclado vai até o início da palavra “Dulcetti” e vice-versa, estando no início da palavra “Dulcetti” e apertando o atalho mais a seta pra esquerda ←, o cursor do teclado irá para o início da palavra “Bruno”.

    Eu acho esse um dos mais úteis.

    Selecionar e tirar seleção de palavra em palavra

    Ctrl+Shift+Seta(← esquerda ou direita →)

    Este é parecido com o anterior, mas além dele pular a palavra, ele vai selecionando as palavras que forem sendo passadas.

    Usaremo o mesmo exemplo, mas com uma mensagem verdadeiro: Bruno Dulcetti lindo.
    Você estando antes da palavra “Bruno” e apertando o atalho mais a seta pra direita →, o cursor do teclado vai até o início da palavra “Dulcetti” deixando a palavra “Bruno” selecionada. Caso a tecla direita → seja apertada novamente, o cursos irá para o início da palavra “lindo” deixando a sequência “Bruno Dulcetti ” selecionada. O mesmo acontece no inverso. Caso a sequência “Bruno Dulcetti ” esteja selecionada, ao apertar o atalho mais a seta pra esquerda ←, o cursor do teclado irá para o final da palavra “Bruno”, tirando a seleção da palavra “Dulcetti”.

    Deletando de palavra em palavra

    Ctrl+Del

    Essa foi a última desse sequência que descobri. Achei excelente a utilização deste atalho. Com ele, ao invés de vc ter que ficar pressionando a tecla “Delete” até sua palavra apagar toda ou sua frase toda, com esse atalho, ele vai deletando de palavra em palavra. Uma economia de tempo, q apesar de pouco, em um projeto longo, pode resultar numa economia de tempo razoável.

    UPDATE

    » Obs:

    Para deletar de trás pra frente, ou seja, o inverso so atalho Ctrl+Del, aperte Ctrl+BackSpace. Assim ele apaga a palavra que está antes do cursor do teclado. Essa descobri hoje. 😀

    FIM UPDATE

    Bom, são dicas bobas, mas às vezes o pessoal não sabe delas ou de algumas delas. Deixei aqui para a análise. Qualquer tecla que vocês utilizem, é só escrever, etc… Tirando tb que não citei Alt+Tab, Alt+Shift+Tab, entre outras que já são bem mais utilizadas… 😉

    Akele abraço, espero que agrade.

    [ 20/jul/2006 às 19:08hrs ] [ Por Bruno Dulcetti ] Comentários 8 Comentários |

    Categorias: Pessoais,Tecnologia

    » Mudanças nos estados do campos de texto

    Falae pessoal.

    Estou aqui mais uma vez, agora pra mostrar uma técnica simples e muito interessante de ser utilizada em sites. Não chega a ser uma grande utilizadade, mas em relação a estilo, layout, dá um diferencial, um detalhe a mais pro seu site/blog.

    Mostrarei aqui como mudar a aparência dos campos de textos ao estar digitando algum texto e ao sair do modo de edição. Existem vários sites, blogs que utilizam isso. A nova versão do meu blog também está com esse recurso.

    Explicarei em três partes: HTML, CSS e JS. O código é bem curto, no exemplo online, está tudo incorporado no html, mas logicamente, que o melhor jeito é separando o css e o js do html, para ficarmos com tudo organizado e separado.

    Código HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Inputs</title>
    </head>
    <body>
    <form action="" method="post">
    <fieldset>
    <legend>Teste</legend>
    <label for="nome">Nome:</label>
    <input type="text" name="nome" id="nome" class="textbox" onfocus="textOn(this.id)" onblur="textNormal(this.id)" />
    <label for="email">Email:</label>
    <input type="text" name="email" id="email" class="textbox" onfocus="textOn(this.id)" onblur="textNormal(this.id)" />
    </fieldset>
    </form>
    </body>
    </html>

    Nesta parte, falarei somente de algumas linhas, pois outras são extremamente básicas e não convém ficar ensinando HTML básico neste post.

    Utilizei um form, pois é um formulário, dentro dele, coloquei um fieldset, que no doctype do xhtml 1.1 é obrigatório a sua utilização. Dentro do fieldset, coloquei um legend, que serve como legenda para o formulário específicado. Temos os labes e os inputs. Não coloquei nenhum botão pois não é importante neste caso, estou apenas querendo mostrar o truque com os campos de texto.

    Primeiro vamos ver este exemplo online.

    Nos labels, eu utilizei um atributo chamado for, que define, dentro de um formulário, o elemento que ele se refere. No caso atual, o label que contém o texto Nome, tem um for=”nome” e o que contém o texto Email, tem um for=”email”. O atributo for, se refere ao elemento que conter o atributo id igual ao valor do seu valor.
    Ex:
    <label for="nome">Nome:</label>
    <input type="text" name="nome" id="nome" />

    No caso citado, o valor do FOR eh igual a “nome” e dentro do input, o valor do ID eh igual a “nome”, portanto o label se refere a este campo de texto.

    Mas pra que que isso serve Bruno?

    É bom pra arquitetura do site, identificação mais clara dos elementos. Um curiosidade também, que alguns não conhecem, eh que ao clicar no label, o elemento com o mesmo valor de id que o valor do for, ficará selecionado, ou seja, como eh um campo de texto, esse campo ganhará foco. É só testar.

    E o input? Tem uns códigos ali que nunca vi.

    Ok, ok, vamos lá. Segue abaixo a listagem dos atributos que utilizei no input, para melhor compreensão:

    • type=”text”

      Tipo do input. Nem preciso explicar não é? Text eh igual a campo de texto.

    • name=”nome”

      Nada de novidade. O name serve como nome do campo e funciona para o método utilizado no formulário e as linguagens server-side, para o envio dos dados.

    • id=”nome”

      O id serve para “linkar” o campo ao label referente à ele

    • class=”textbox”

      Classe textbox que iremos declarar no css, para estilizar o campo.

    • onfocus=”textOn(this.id)”

      O onfocus serve para vc definir uma ação, evento quando o foco estiver no elemento em que foi setado. No nosso caso, esse atributo chama a função textOn, que está declarada no js que irei comentar mais abaixo e passa como parâmetro, o próprio id.

    • onblur=”textNormal(this.id)”

      Mesma função do onfocus, mas só que ao invés de ser para quando estiver com o foco, serve para quando perder o foco, ou seja, o usuário não estiver digitando texto dentro do campo. E neste atributo, passamos a função textNormal e passamos o próprio id como parâmetro.

    HTML Finalizado

    Nada de surreal no HTML certo? Coisas básicas e simples que utilizei, tirando os atributos onblur e onfocus, que na verdade, também não tem nada demais.

    Código CSS

    Agora iremos pro código CSS, que também não tem nada de avançado, nada demais sendo usado, somente propriedades básicas e simples.
    body {
    background-color: #F5F6F6;
    color: #666666;
    font: 75% "Trebuchet MS";
    }

    fieldset {
    border: 1px solid #999999;
    padding: 5px;
    width: 350px;
    }

    legend { padding: 2px 4px; border: 1px solid #999999; }
    label { display: block; margin: 7px 0 0 7px; cursor: pointer; font-weight: bold; }
    .textbox, .textboxOn {
    display: block;
    margin-left: 7px;
    border: 2px solid #999999;
    background-color: #EFEFEF;
    color: #333333;
    padding: 2px 4px;
    font: 100% "Trebuchet MS";
    width: 150px;
    }

    .textboxOn { border-color: #FF6600; background-color: #F5F6F6; }

    Explicarei cada classe e tag declarada no CSS. Não vou explicar cada linha, pois são coisas básicas. Darei uma passada somente no css, para vocês entenderem.

    Mas antes, vejam este exemplo online.

    Farei uma listagem aqui com as tags e classes:

    • body

      No body, setei somente uma cor de fundo, cor do texto e tamanho e tipo da fonte

    • fieldset

      No fieldset do fomulário, coloquei uma borda cinza sólida com 1px de espessura, um padding de 5px para todos os lados e setei 350px de largura.

    • legend

      Para o legend, coloque um padding de 2px para o topo e a base e 4px para as laterais e coloquei uma borda cinza sólida com 1px de espessura

    • label

      No label, coloquei um display: block, pra ter quebra de linha logo depois dele e pro input ficar abaixo, margem de 7px para o topo e a lateral esquerda, cursor pointer, que eh u cursos da mãozinha/link, porque como ao clicar no label ele da foco para o campo de texto que ele estiver setado no for, entaum mostro isso pro usuário com o cursor e deixei o texto em negrito.

    • .textbox

      Essa classe é a classe no estado normal do campo de texto, quando ele não está com foco. Coloquei um display: block também, para ele quebrar linha antes e depois dele, margem de 7px na lateral esquerda, borda cinza, sólida e com 2px de espessura, um cinza claro para a cor de fundo, um cinza escuro para a cor do texto, um padding de 2px para o topo e base e 4px para as laterais, tamanho e tipo da fonte e tamanho de 150px d largura pro campo de texto.

    • .textboxOn

      Vcs podem perceber que ele foi setado, juntamente, com a classe textbox, porque ela recebe praticamente todas as propriedades da classe textbox. E para naum ficar repetindo tudo novamente, declaro somente o que eh necessário, que nesse caso foi a cor da borda que ficou laranja e a cor de fundo que ficou um cinza mais claro.

    CSS Finalizado

    Podemos perceber que não utilizamos nada de muito especial correto? Declaramos mais tags do que classes. As únicas classes foram para os estados de “on” e “off” do campo de texto.

    Código JS

    Vamos pro javascript agora. Não estou usando nada demais também, nada avançado, nada com muita complexidade. Estou somente utilizando o getElementById.
    <script type="text/javascript">
    function textOn(txt){
    document.getElementById(txt).className="textboxOn";
    }

    function textNormal(txt){
    document.getElementById(txt).className="textbox";
    }
    </script>

    Neste exemplo temos duas funções: textOn e textNormal. Vimos as chamadas dessas funções no html, dentro dos inputs correto? Agora iremos ver o que elas fazem:

    textOn(txt) e textNormal(txt)

    Como podem perceber, essas funções enviam como parâmetro, o txt. Para quem não sabe, uma função passa os parâmetros que estão dentro dos parênteses. Ele pode ficar vazio também, mas ae você teria que setar dentro do javascript o elemento que sofreria a mudança.

    document.getElementById(txt).className="textboxOn";

    Nessa linha, eu pego do html o ID passado no parâmetro txt. Isso varia de acordo com a chamada da função. No nosso formulário, temos duas chamadas nessa função, dentro do onfocus nos inputs. Vamos vê-los novamente?

    • id="nome" class="textbox" onfocus="textOn(this.id)"

      Setamos o ID como “nome” e dentro da chamada, setamos o ID dele próprio. O this significa que ele chama a si mesmo o .id significa “meu ID”.

    • id="email" class="textbox" onfocus="textOn(this.id)"

      Setamos o ID como “email” e dentro da chamada, setamos o ID dele próprio. O this significa que ele chama a si mesmo o .id significa “meu ID”.

    Vamos pegar o primeiro caso, o “nome”. Irei mostrar abaixo o código javascript e o próprio “traduzido”:

    Normal

    function textOn(txt){
    document.getElementById(txt).className="textboxOn";
    }

    “Tradução”

    function textOn(nome){
    document.getElementById(nome).className="textboxOn";
    }

    Prestaram atenção na parte em negrito? Eh bem fácil essa passagem de parâmetro, nada complexo, tudo bastante fácil.

    Boa Bruno… E esse .className?

    Essa eh a parte mais fácil. O nome já diz tudo. Entre as aspas duplas, vc seta o nome da classe que vc quer que o elemento obtenha no evento.

    Tah pronto?

    Sim está. Veja como ficou.

    Legal neh? Com isso, vc pode fazer outras várias coisas. Eh soh explorar, estudar e meter a cara… 😉

    Bom, espero que tenham gostado. Foi um efeito bem simples, mas q pode ser útil para alguns. Qualquer dúvida, sugestão, crítica, eh soh comentar…

    Akele abraço.

    [ 13/jul/2006 às 12:23hrs ] [ Por Bruno Dulcetti ] Comentários 21 Comentários |

    Categorias: CSS,Webstandards

    » Lançado oficialmente o iMasters Intercon 2006

    Falae pessoal.

    Ontem recebi a notícia através de um dos responsáveis pelo iMasters, que está oficialmente lançado o iMasters Intercon 2006.

    O Evento

    O Intercon eh um evento de tecnologia web, que este ano terá 2 salões, como ano passado, mas abordará uma gama maior de temas: “Criação e Desenvolvimento” e “Programação e Tecnologia”. Terá 12 palestrantes, 6 para cada salão.

    Diferenciais

    Uma novidade, é a do curso de Flash que será dado no Próprio evento. Veja um pouco sobre o curso:

    “O iMasters, em mais uma iniciativa inédita, apresentará uma versão especial do já tradicional Curso de Flash Animado do Mundo Canibal. Desta vez, serão abordado os tópicos mais avançados, em menor carga horário, com todos os benefícios do evento (camiseta, alomoço, brindes, etc…) e um valor pra lá de promocional. Mas fique atento, são apenas 15 vagas.”

    O Professor será o Ricardo Piologo, que é o autor do livro “Flash Animado”, que será o material didático e já está incluído no preço do curso.

    Uma mudança, que na minha opinião não achei tão legal, foi que agora você fechar a participação em somente um auditório. Você não pode assistir uma palestra em um dos auditórios e sair para ver outra no outro. Preferia como ano passado, que poderia ter esse revezamento.

    Um outro diferencial, eh q agora temos almoço incluído no preço. Acho isso ótimo, pois no ano passado tivemos que caçar um lugar para comer e como naum conheço São Paulo, fica meio difícil :D.

    Local

    O local será o mesmo do Intercon do ano passado, o Hotel Jaraguá Convention Center, que po sinal é muito belo, moderno, gostei bastante.

    Palestrantes

    O evento contará com os seguintes palestrantes:

    • Pedro Cabral – Presidente da Agência Click
    • Juliana Constantino – Coordenadora da Agência Click
    • Paulino Michelazzo – Professor e Consultor
    • Luli Radfahrer – Professor-Doutor ECA/USP
    • Vivian Menezes de Oliveira – Gerente da VIVO
    • Frederick van Amstel – Professor
    • Fabiana Go – Consultora Adobe
    • Thiago Bacchin – CEO e Fundador da Cadastra
    • Walace Soares – Autor e Diretor de Tecnologia da Zanthus
    • Marcelo Ortiz – Melies 3D
    • Michel Lent – Sócio da 10’Minutos

    Todos muitos bons e chamo a atenção pro Luli, que participou do Intercon ano passado, que na minha opinião foi a melhor palestra. Ele sabe como conduzir uma palestra, ninguém consegue ficar sonolento, perder a atenção, rir, etc.

    Quer saber mais sobre o evento? Ficou curioso? Entre no site e confira todas as novidades, saiba mais sobre os palestrantes e as palestras, sobre o curso de flash, etc.

    Akele abraço.

    [ 06/jul/2006 às 11:22hrs ] [ Por Bruno Dulcetti ] Comentários 4 Comentários |

    Categorias: Tecnologia

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com