Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

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

    » Menu em Abas sem utilizar imagens

    Falae galera. Estou aqui de novo, mas agora pra mostrar um outro Tutorial/Artigo, de como fazer um menu com abas. Eu já tinha postado um tutorial, mas era utilizando imagens e ficava um pouco limitado, pois se aumentasse a fonte, a imagem naum iria ficar legal.

    Agora estou mostrando um novo modo de se fazer, sem utilizar imagem alguma, somente com código css. Fica com um resultado bem leve e agradável. A única coisa é que fica quadrado, o que eu não vejo problema nenhum, mas para quem é fã de arredondados, esse tutorial não se encaixa.

    Ok, vamos começar:

    Primeiro Passo

    Primeiramente eu escolhi um DOCTYPE. Escolha o que vocês quiserem, mas eu utilizei o XHTML 1.1, mas fiquem livres pelo que gostarem mais.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    Segundo Passo

    Eu mostrarei separadamente a criação do html e do css, pois fica mais fácil de explicar cada parte. Primeiramente, mostrarei o html, coisa que eu não preciso explicar muito, pois todos aqui já o conhecem (assim espero :D). Eu soh explicarei o que estiver entre as tags <body> e </body>. Não explicarei também, as tags de fechamento, pois é desnecessário.

    Veremos primeiro a página, sem estilos nenhum.

    Vamos entender cada parte do codigo:
    <div id="geral">
    Nessa linha, teremos o div pai, que englobará todo o layout, pois fiz com um tamanho de largura fixa para seu conteúdo. Desta maneira, fica mais fácil para fazermos modificações, principalmente em posicionamento do layout.

    <div id="menu">
    Div que conterá o menu, que faremos com uma lista não ordenada, <ul>.

    <li class="primeira"><a href="#" class="selecionado">Principal</a></li>
    <li><a href="#">Empresa</a></li>
    <li><a href="#">Serviços</a></li>
    <li><a href="#">Portfólio</a></li>
    <li><a href="#">Contato</a></li>

    Nessa parte, está englobada toda a codificação do menu feito em lista e seus respectivos links. Na primeira linha, temos uma classe para o link, a selecionado, que serve para indicar em qual página estamos. Perceba também a classe primeira, dentro do primeiro <li>, que no css eu explicarei para que serve.

    <div id="conteudo">
    <h1>Título H1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer ...</p>
    <h2>Título H2</h2>
    <p>Etiam laoreet pulvinar sem. Sed massa enim ...</p>
    <h3>Título H3</h3>
    <p>Quisque convallis fringilla tortor. Duis tortor diam ...</p>
    </div>
    <div id="rodape">Copyright &copy; 2006 - <a href="http://www.brunodulcetti.com/blog/">BrunoDulcetti.com</a></div>

    Aqui, podemos ver que é o conteúdo do site, que contém três títulos, h1, h2 e h3, com seu conteúdo dentro de um parágrafo para cada título. Nenhum mistério.

    Acho que agora não preciso explicar mais nada do código, pois é bem básico e de fácil compreensão. O que eu não expliquei, foi como disse acima, são tags de fechamento, metas, etc…

    Beleza Brunaum, agora vamos estilizar isso, pq tá feio pra caramba né?

    Logicamente. Esse primeiro passo, foi somente para mostrar o código HTML e só irmos jogando o css aos poucos, para vermos o resultado final.

    O css completo, você pode verificar aqui. Bem pequeno não é verdade?

    Agora vamos vendo cada propriedade:

    Estrutura geral do body:

    * { margin: 0; padding: 0; }
    body {
    text-align: center;
    font: 70% "Trebuchet MS", Verdana, Arial, Tahoma;
    background-color: #F1F1F1;
    color: #666666;
    }

    Neste primeiro bloco, temos a primeira linha, que zera todos os margins e paddings de TODAS as tags dentro da página que contenha esse css incluído. O asterisco antes de uma propriedade, siginifica todas as tags.

    Na segunda chamada, temos a tag body sendo setada. Nela nós temos 4 propriedades declaradas:

    • text-align: center; : Esta linha declara que o texto ficará centralizado dentro do body.
    • font: 70% “Trebuchet MS”, Verdana, Arial, Tahoma; : Definimos a fonte utilizada e seu tamanho, que nesse caso foi a Trebuchet com um tamanho 70% do tamanho padrão do navegador.
    • background-color: #F1F1F1; : Definição da cor de fundo do body, que nesse caso, coloquei um cinza bem claro.
    • color: #666666; : Agora a definição da cor do texto foi definida. Coloquei um cinza escuro como cor padrão do site.

    Percebemos que não tivemos problemas nenhum (assim espero), na declaração desse bloc. É bem básico e fácil de implementar e entender.

    Estrutura das tags:

    ul { list-style: none; }
    p { margin-bottom: 10px; }
    h1 { margin-bottom: 5px; color: #69A90A; font-size: 170%; }
    h2 { margin-bottom: 2px; color: #81C281; }
    h3 { color: #709AFE; }

    Aqui temos a estruturação e propriedades de todas as tags usadas no HTML e que eu quis modificar. Nos meus arquivos css eu estruturo desta forma, pois fica de uma maneira mais organizada, correta, etc.

    Veremos abaixo, cada linha desse bloco, com suas respectivas propriedades explicadas:

    • ul { list-style: none; } : Nesta linha, declaramos que TODAS as listas não ordenadas, vulgo <ul> :D, não possuirão estilo, que seriam aquelas bolinhas, círculos e quadrados.
    • p { margin-bottom: 10px; } : Aqui, declaramos que TODOS os parágrafos terão 10 pixels de margem na base.
    • h1 { margin-bottom: 5px; color: #69A90A; font-size: 170%; } : Aqui temos a declaração do título H1, que é o título de mais importância do HTML. Nele, declaramos uma margem de 5 pixels na base, uma cor verde para o texto do título e um tamanho de fonte 170% maior do que a declarada no body, que foi de 70%.
    • h2 { margin-bottom: 2px; color: #81C281; font-size: 150%; } : Aqui, declaramos as propriedades pro título H2, que é o título de segunda maior importância. Definimos que ele terá uma margem de 2 pixels na base e uma cor verde, um pouco mais clara que a do H1, para o texto do título e o tamanho do texto.
    • h3 { color: #709AFE; font-size: 130%; } : Declaração das propriedades da tag H3, que também é um título. Esta é a mais simples, configurei somente a cor do texto, para um cor azul e o tamanho do texto.

    Neste segundo bloco, configuramos as tags, não importando sua hierarquia. Sempre que declaramos no css uma propriedade para um seletor, que esteja somente o nome da tag, que dizer que TODAS as tags, independentes se estão dentro de um identificador, classe, etc, TODAS elas, receberão aquela configuração, a não ser que mais abaixo você declare uma propriedade diferente, que fará com que o css descarte a anterior e mantenha a mais recente.

    Identificador #geral:

    #geral {
    margin: 10px auto;
    width: 750px;
    text-align: left;
    }

    Neste bloco, temos o Identificador #geral, que é o div que engloba todo o layout em si. Dentro dele, coloquei 3 propriedades:

    • margin: 10px auto; : Definindo uma margem de 10 pixels em todas as direções do div (topo, direita, base e esquerda). E também, temos o auto, que faz com que o div fique no posicionamento relativo ao browser, que nesse caso o body que setou essa propriedade com o text-align igual a center, que quer dizer que o texto ficará centralizado. No i.e. não necessita disso, pois ele reconhece que com apenas o text-align o div fique centralizado, o que é errado, pois o div não é um texto e sim um bloco, por isso a utilização do auto.
    • width: 750px; : Definindo uma largura para o div, de 750 pixels
    • text-align: left; : Como o body foi setado um text-align centralizado, todos seus filhos heram essa propriedade, que é caso do #geral, mas como estamos setando aqui um text-align igual a left, é descartado o do body e levado em conta o que têm nessa propriedade desse identificador.

    Neste terceiro bloco, nenhum problema, dificuldade não é? Três propriedades, de fácil entendimento. O único problema um pouco mais chato de ser entendido é o margin auto, pro pessoal que tem um conhecimento básico, pode ter dificuldade, mas tentei explicar ali, qualquer dúvida, é só falar.

    Estrutura do Menu:

    #menu ul { display: table; height: 1%; }
    #menu ul li { float: left; margin: 0 4px; }
    #menu ul li.primeira { margin-left: 0; }
    #menu ul li a {
    display: block;
    float: left;
    padding: 5px 12px;
    background-color: #CCCCCC;
    color: #FFFFFF;
    font-weight: bold;
    }
    #menu ul li a.selecionado, #menu ul li a:hover { background-color: #FFFFFF; color: #999999; text-decoration: none; }

    A parte mais essencial do código e mais “chatinha” de se entender. Falo isso pro pessoal que tá começando, pois creio que quem possui um conhecimento intermediário/avançado, não terá problema algum nesse bloco. Vou dividir em três blocos, um para a parte de lista e li do menu, a segunda, para os links do menu e a terceira para o estado hover do menu. Vamos lá:

    Primeira Parte

    • #menu ul { display: table; height: 1%; } : Esta propriedade, faz com que a <ul> fique com o preenchimento como uma tabela. Precisamos disso, porque os lis vão receber um float, que faz com que seu pai, que neste caso é a <ul>, não reconheça sua altura, conteúdo. Você pode substituir isso por uma propriedade height, colocando a altura do <ul>, mas eu creio que fique melhor com o display, pois você não precisa se preocupar com altura, caso tenha que modificar futuramente, ou o usuário aumente o tamanho da fonte pelo navegador, isso seria um problema, pois nos browsers decentes, o height seria mantido, independente do seu conteúdo e da forma como está, ele cresce de acordo com o tamanho. Mas como nada é perfeito, nosso amigo i.e. está ae para atraplhar. Ele não renderiza corretamente o display table, por isso, tive que colocar uma “gambiarra para o perfeito funcionamento do mesmo, colocando um height: 1%. Mais um bug do i.e., porque se você não setar nenhum valor de altura, ele não reconhecerá o display table.
    • #menu ul li { float: left; margin: 0 4px; } : Como padrão, o <li> recebe um display block, que faz com que fique um embaixo do outro. Por isso, a utilização do float left, que faz com que o <li> fique grudado à esquerda. Foi setado também, uma margem para as laterais de 4 pixels, para que elas não fiquem uma grudada na outra.
    • #menu ul li.primeira { margin-left: 0; } : Agora explicarei essa classe, que falei mais acima. Com a utilização da propriedade acima, da margem nas laterais, a primeira <li> fica mais a direita do canto do conteúdo, o que não acho muito legal. Neste classe, zerei a margem esquerda, para que a <li> que receber esta classe, fique sem margem, que no nosso caso, é a primeira.

    Simples essa parte. Nada demais, só destacaria mais mesmo é a parte do display table e a classe sem margem para a primeira <li>. Partiremos pra próxima.

    Segunda Parte

    Lembrando que aqui eu estarei listando as propriedade dentro do seletor #menu ul li a { }.

    • display: block; : Como eu não quero que o menu fique somente no texto, tenho que colocar um display block, que transforma o link, num bloco.
    • float: left; : Com a utilização do block como display, o link ficaria um em cima do outro, que não é nosso objetivo. Nós queremos um ao lado do outro e esse trabalho é feito pelo float.
    • padding: 5px 12px; : Um padding, para o conteúdo dentro do link não ficar colado nos extremos. Aqui, setei 5 pixels para a base e o topo e 12 pixels para as laterais.
    • background-color: #CCCCCC; : Uma cor cinza claro de fundo para o link.
    • color: #FFFFFF; : Definindo uma cor branca para o texto do link.
    • font-weight: bold; : Deixando o texto em negrito.

    Nenhum mistério. Só deixamos o link como block e com float, para ele ir pra esquerda. Mas ae você me pergunta: “Mas por que isso Bruno? Não poderia fazer isso no <li>?”. Sim, claro, poderia fazer sim. O único problema seria na hora do link, porque ele sem block, fica como inline, ficaria, um do lado do outro, tranquilim, mas signica que SOMENTE o texto, o conteúdo dentro do link, ficaria como link realmente. E como a pseudo-classe hover só funciona em links, isso no i.e., lógico, não conseguiriamos o efeito correto. Veja um exemplo disso. Dá pra ver o resultado não é? Pelo menos não era o que eu queria nesse tutorial.

    Agora vamos para a terceira e última parte.

    Terceira Parte

    Lembrando que aqui eu estarei listando as propriedade dentro do seletor #menu ul li a.selecionado, #menu ul li a:hover { }.

    • background-color: #FFFFFF; : Definindo uma cor de fundo branca.
    • color: #999999; : Definindo um cinza médio para a cor do texto do link.
    • text-decoration: none; : Retirando a decoração do link, que como padrão fica sublinhado.

    A única coisa de diferente nesse exemplo, é a utilização de dois seletores dentro de um bloco de propriedades. Conseguimos isso, separando os seletores por vírgula. E mais por esses seletores, é que precisamos utilizar no link, o display block, float, etc, pois ao passar o mouse, temos mudanças no link, pois fica uma coisa mais organizada, usável, pois percebem que é um link, etc.

    Identificador #conteudo:

    #conteudo { background-color: #FFFFFF; color: #666666; padding: 10px; }

    Nesse bloco, temos a configuração da área de conteúdo do site. Coisas bem básicas:

    • background-color: #FFFFFF; : Definindo cor branca para área, pois o body está com um cinza claro.
    • color: #666666; : Deixando a cor do texto como cinxa escuro.
    • padding: 10px; : Definido um padding de 10 pixels em todas as direções, para que o conteúdo não fique grudado nos extremos do div.

    Nenhum mistério também, apenas estilizando o conteúdo, para ficar no estilo e organizado.

    E finalmente, vamos para a última parte, a do rodapé.

    Estrutura do Rodapé:

    #rodape { text-align: center; padding: 10px; }
    #rodape a { color: #54A4FC; }
    #rodape a:hover { text-decoration: none; }

    Poucas coisas setadas, código bem curto, pois no rodapé não coloquei nada, além de um pequeno texto. Veremos abaixo:

    • #rodape { text-align: center; padding: 10px; } : Como o geral recebeu um text-align left, entaum o texto ficaria na esquerda, que não é o que eu queria, então centralizei. Determinei também, um padding de 10 pixels, para não deixar o conteúdo grudado nos extremos.
    • #rodape a { color: #54A4FC; } : Definindo um azul para a cor dos link que estiverem dentro do rodapé.
    • #rodape a:hover { text-decoration: none; } : Retirando o sublinhado do link, quando passar o mouse em cima. Isso, logicamente, para os links do rodapé.

    Finalizando…

    É um menu bem simples de se fazer, implementar e modificar também. Como disse anteriomente, ele fica quadrado, mas mesmo assim, acho bonito, clean, interessante, sem problema algum.

    Bom, galera, é isso, o resultado final pode ser conferido aqui. Qualquer dúvida, correção, melhora, crítica, elogio, é só comentar ae…

    Aquele abraço.

    [ 27/maio/2006 às 20:42hrs ] [ Por Bruno Dulcetti ] Comentários 22 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Próxima Palestra Presencial MMUG-RJ

    Falae pessoal.

    Passando rapidamente para falar que o MMUG-RJ está organizando uma palestra presencial e estão com uma enquete com as duas opções:

    “Webstandards vs. WYSIWYG” ou “Dados dinâmicos com Flash”

    Para votar, é só você entrar no site do MMUG-RJ e selecionar a opção desejada.

    Os dois temas são muito interessantes e a disputa vai ser acirrada com certeza. A data da palestra será em meados do final de junho. Assim que tiver a data, postarei aqui no blog.

    Aquele abraço.

    [ 25/maio/2006 às 16:02hrs ] [ Por Bruno Dulcetti ] Comentários Comente |

    Categorias: Flash,Pessoais,Tecnologia,Webstandards

    » Cellspacing e Cellpadding com Webstandards

    Falae galera, tranquilidade?

    Depois de ver algumas dúvidas, pessoas querendo saber sobre esse assunto, comecei a pesquisar, a mexer aqui no css e acabei descobrindo a forma de simular com webstandards, o cellpadding e cellspacing, atributos presentes na tag <table> que serve para a criação de tabelas.

    Veremos um exemplo disso com tabelas:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Este foi exemplo usando cellpadding e cellspacing iguais a 0 (zero). Na versão webstandards, eh bem fácil, com somente dois comandos no css, você consegue o mesmo resultado:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Os comandos css utilizados foram:
    border-collapse: collapse;
    padding: 0;

    A primeira linha diz que quero o modelo de borda fique zerado, naum tenha distância. A segunda linha nem preciso falar né? Ela zera o padding q eh o espaço do conteúdo pro seu limite.

    Dentro desse atributo border-collapse, temos outro valor, que é o default. Esse valor é o separate e ele será um dos usados no próximo exemplo:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Este foi exemplo usando cellpadding e cellspacing iguais a 10 (dez). Agora veremos na versão webstandards, que também eh bem fácil, com somente três comandos no css, você consegue o mesmo resultado para a tabela:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Os comandos css utilizados foram:
    border-collapse: separate;
    border-spacing: 10px;
    padding: 10px;

    Primeira linha foi explicado anteriormento, é o valor padrão, mantém um espaçamento entre as células e a tabela. A segunda, foi setado o espaçamento entre as células contidas na tabela que eu queria, nese caso, 10 pixels. A terceira eu setei um padding de 10 pixels.

    A propriedade border-spacing não é muito utilizada, talvez pela pouca utilização das tabelas hoje em dia, por isso, muitos não sabem sua funcionalidade.

    Mas Bruno, está diferente do feito com os atributos na tag <table>.

    Eu sei, calma. Precisamos lembrar, que estamos setando estes valores, para a tag <table> somente. Para ter o resultado semelhante, você precisaria colocar um padding também no <td>:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Às vezes o resultado não fica totalmente igual, principalmente em diferentes browsers, mas isso você pode ir resolvendo com valores diferenciados para cada item.

    Essa é uma grande vantagem do css. Você pode cuidar de cada tag, separadamente, dando à ela, os valores especificados por você.

    Vamos ver mais um exemplo com tabelas com bordas:

    conteúdo conteúdo conteúdo
    conteúdo conteúdo conteúdo

    Mas Bruno, por que que entre os tds estão menores que entre a tabela e o td?

    Simples. Como setamos 10px de padding para tabela, todo seu conteúdo ficará 10 pixels mais pra dentro da tabela e somando os 10px setados no border-spacing, que é o espaçamento entre as células da tabela, como explicado lá em cima.

    Com isso, as células que ficam na primeira e última linha, ou coluna, ficam com 20px de espaçamentos pra tabela no topo, base e laterais, respectivamente. Isso por causa da soma dos dois valores 10px (border-spacing + padding).

    Legal não é verdade? Espero que tenham entendido e qualquer dúvida, erro, é só me mandar um email ou mandar um comentário.

    Aquele abraço.

    [UPDATE]

    Maldito i.e. Lembrando que ele não aceita esses parâmetros. Alguém tem dúvida sobre o porquê desse browser ser ruim?

    [UPDATE 02]

    Colocando o complemento do Samy para os iniciantes. Eu coloquei cada atributo em sua respectiva tag, eh soh ver no código fonte o style em cada tag, portanto, devemos seguir as seguinte regras:
    table {
    border-collapse: separate;
    border-spacing: 10px;
    }
    table tr td {
    padding:10px;
    }

    Aquele abraço e obrigado ae Samy.

    [ 24/maio/2006 às 16:04hrs ] [ Por Bruno Dulcetti ] Comentários 11 Comentários |

    Categorias: CSS,Webstandards

    » Desenvolvedor de Interação. Conhece?

    E ae pessoal, tudo tranquilo? Por aqui está tudo bem também, graças a Deus.

    Meu post hoje é pra falar sobre um cargo, digamos assim, que acho que se encaixa no meu atual perfil profissional. E achei legal compartilhar aqui, para quem sabe alguém que também se encaixe neste perfil, para mandarem opiniões, o que acham…

    Primeira Parte – “Desenvolvedor”

    Isso, desenvolvedor. Podemos ver uma breve explicação do que seria isso no wikipedia. Como lá diz, existem várias “subcategorias”, eu chamaria assim da “categoria” Desenvolvedor. Para nós que trabalhamos com internet, etc, o Desenvolvedor Web seria o nome ideal certo? Talvez. O Desenvolvedor Web é mais para aqueles que desenvolvem em uma linguagem de programação, como PHP, ASP, JAVA, entre outras linguagens existentes.

    Então você deixou de ser Webdesigner

    Não sejamos tão radicais a esse ponto. Ainda trabalho com criação, etc. Mas hoje eu tenho muito mais contato com a parte de desenvolvimento, estruturação html, css, que minha criação perdeu um pouco de força digamos assim.

    Hoje eu desenvolvo sites webstandards, sistemas em PHP (nada muito avançado), mas crio layouts no Photoshop, sites em flash, entre outras coisas.

    O que você quer dizer com isso tudo hein Bruno?

    Calma, calma… Estou chegando lá. O que realmente me fez pensar nesta nomeação no cargo, foi a maneira como estou trabalhando, o modo específico.

    Vou citar o Flash, por exemplo. Antigamente eu criava layouts no Photoshop e no Flash, o que seria em vetor, textos, criava no Flash e a parte Bitmap deixava com o Photoshop. Mas agora as coisas estão mudando, principalmente na empresa que trabalho à noite, a Produzindo, onde o Ariel cuida do Design dos trabalhos e eu fico encarregado de “montar”, tanto no flash, quanto no HTML. Seria isso o breve resumo.

    Hmmm… Legal e o Interação?

    É exatamente neste ponto que eu estava querendo chegar, o porquê da utilização do “Interação” no cargo. Neste ponto, entendo interação, como a forma como chega ao usuário, como ele visualiza a informação, conteúdo do site, cd-rom e afins. O designer cria o layout e o browser mostra, mas tem o Desenvolvedor de Interação, que aplica isso, que desenvolve, pois sem esse desenvolvimento da interação com o usuário, ele não verá o site, animação e afins, corretamente.

    Por exemplo, no Flash temos o designer que cria a interface que será mostrada num CD-ROM. O Desenvolvedor de Interação será o responsável em criar MONTAR (montar a estrutura e não criá-la) essa interação, a interface no Flash, posicionar tudo, colocar as respectivas ações para cada elemento que esteja na interface que será mostrada ao usuário.

    Mas não seria um programador que faria isso Bruno?

    Não necessariamente. Um programador pode criar todas as ações, classes, funções, etc. O Desenvolvedor de Interação seria o responsável por posicionar cada action no objeto ou (muitos programadores fazem isso, de colocar ações nos objetos, o que é errado, mas quis referenciar, pois muitos fazem desta maneria) frame referente.

    Isso, logicamente, funciona bem com uma empresa que tem tudo divido, muitas empresas fazem isso com um profissional só, o que chega a ser errado, pois pode sobrecarregá-lo.

    Legal! E como seria em sites?

    Seria praticamente a mesma coisa, mas com tecnologias diferentes. Você pega o layout feito no Photoshop (ou Fireworks ou qualquer programa) e fatie-o. Eu odeio as ferramentas de slice desses programas, não exporto como html, pois os deixa muito sujo, eu prefiro criá-los na mão mesmo, porque tenho mais controle de tudo.

    Monto o html com o doctype q for necessário, o que eu quiser, depois vou estruturando o código juntamente ao css, sempre testando no máximo de browser que eu puder. Vou colocando os links corretos para cada item que possuir um link, colocar imagem onde tem q ser colocado e tudo aquilo que nós, desenvolvedores webstandards, conhecemos.

    E se eu tiver no site uma linguagem dinâmica?

    Seria a mesma coisa que falei no exemplo de Flash. Teríamos um Desenvolvedor PHP que faria toda a programação e faria todos os SELECT necessários para visualização na página. O meu trabalho seria posicionar cada SELECT no lugar correto, fazer a interação BD->Site.

    Concluindo…

    Seria necessariamente essa a função do Desenvolvedor de Interação, criar a integração/comunicação design+programação até o cliente.

    Seria bom ter uma equipe com os dois desenvolvedores, um de interação e outro web, e um webdesigner, para não sobrecarregar ninguém e ter trabalhos mais balanceados. Logicamente, com todos sendo bons profissionais, dispostos e conhecedores plenos de cada técnica a ser implementada.

    Bom, espero que tenha sido útil essa minha opinião, gostaria de sugestões sobre o nome, sobre os cargos, sobre tudo falado aqui, se agradou ou não, etc…

    Aquele abraço a todos…

    [ 17/maio/2006 às 15:21hrs ] [ Por Bruno Dulcetti ] Comentários 3 Comentários |

    Categorias: Pessoais,Tecnologia

    » Meu Quartel General

    Falae pessoal.
    Indo na onda que o Mauro lançou, vou apresentando aqui, duas fotos do meu quartel, onde crio meus freelas, alguns dos meus posts do Blog, bato meus papos (ng eh de ferro 😉 ), etc, etc, etc.

    Meu micro

    Meu micro

    É verdade, ali do lado é um fogão, um pouco estranho para um quarto, eh verdade, mas quando me mudei pra esse ap aqui, jah tinha esse fogão e tive que colocá-lo no quarto de empregada, vulgo “Meu Quartel” :D. Ah, e tem um hipopótamo também, verde. Aquele lá é meu cofre, onde guardo minha fortuna… Deve ter hoje uns 25… centavos 😀

    Pra quem não conhece, moro na Tijuca – Rio de Janeiro, postei no domingo dia 14 de maio às 19:15 aproximadamente, dia das mães.

    Uma parte da galera jah fez o mesmo. E vc? Bloga tb? Entaum poste ae tb o seu quartel… 😉

    Aquele abraço galera…

    [ 14/maio/2006 às 19:16hrs ] [ Por Bruno Dulcetti ] Comentários 6 Comentários |

    Categorias: Pessoais

    » Palestra Online – Webstandards

    Falae galera.
    Depois de um tempo, estou aqui postando o link com a palestra online que dei via Breeze, pelo MMUG-RJ, Grupo de Usuário Macromedia/Adobe do Rio de Janeiro.

    Desculpem pela demora, eu já estava com o link, mas acabei esquecendo de postá-lo aqui ou no fórum :D. A palestra foi no dia 26/04/2006 às 14:30h, com o tema “Web standards – Truques & Dicas”.

    Chega de enrolação, assistam a palestra.

    Infelizmente não tem como fazer o download, a não ser que vocês capturem o vídeo. Tentarei fazer isso, conseguindo, posto no meu videolog.

    Aquele abraço a todos.

    [ 12/maio/2006 às 9:31hrs ] [ Por Bruno Dulcetti ] Comentários 2 Comentários |

    Categorias: Artigos,Criações,Tecnologia,Webstandards

    » Blog Colletivo

    E ae pessoal. Hoje venho falar aqui de um Blog recente, o Colletivo. Um Blog de pensamentos, entre outras coisas em que participam dele, Bruno Dulcetti (Eu), Bruno Ribeiro (Coordenador do MMUG-RJ) e o A. Soles (um rapaz que eu nem conheço, mas participa lah :D).

    No Colletivo, falamos sobre assuntos variados, tecnologia, música, cotidiano (não necessariamente nessa ordem). Eu o utilizo para postar alguns pensamentos, já que este aqui eu deixo para assuntos mais profissionais, sobre webstandards, artigos, entre outras coisas a mais.

    Postei meu primeiro texto lah, sobre “Essa Globalização Tecnológica…“. É um texto extrovertidos, nada muito sério, contando um episódio recente que aconteceu comigo e achei interessante repassar para o pessoal que frequenta o Blog.

    Espero que gostem não só do texto, mas também do Blog. Tentarei postar o máximo possível aqui e lá tb.

    Visite o Blog agora.

    Aquele abraço.

    [ 10/maio/2006 às 16:10hrs ] [ Por Bruno Dulcetti ] Comentários 3 Comentários |

    Categorias: Criações,Pessoais,Tecnologia

    Próxima Página »

    
    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