Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

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

    » Rota Blogueira v.0001

    E ae pessoal. Estou aqui para iniciar uma nova categoria aqui no blog, a Rota Blogueira. Nesta categoria eu farei algumas referências a posts lidos por mim e que vale ser postado aqui para que vocês também desfrutem, caso não já tenham lido, logicamente. 😉

    Tentarei colocar aqui semanalmente. Tudo vai depender da minha paciência e saco para postar 😀 Mas eu prometo que não será igual as categorias Videolog e Colírios, as quais tenho que postar urgentemente, tem tanto tempo que não posto, que às vezes esqueço delas :P.

    A onda é convergir …

    Autor: Léo Hackin

    Um belo post do Lé, comentando sobre a “Era da convergência”, citando exemplos como o iPhone, Ajax, entre outras tecnologias e idéias.

    Comenta sobre a facilidade de conseguir concretizar uma idéia, que hoje em dia, com a profundidade da internet, você consegue dar passos mais largos, entre outras coisas.

    Vale a lida.

    Link:

    http://www.leohackin.com.br/index.php?post=47


    Clique vs Scroll: “Leia Mais” em Blogs

    Autor: Alex

    Uma seqüência de 4 posts sobre o famoso e discutido “Leia Mais” dentro dos blogs. Cita muitos exemplos, discussões e comentários sobre tal recurso.

    Comenta sobre o xiismo das pessoas sobre o assunto e sempre lembra que ele está falando que o foco do assunto e blog e não sites de notícias, etc.

    Belas opiniões, explicações e conclusões por parte dele, pensando como usuário e não como desenvolvedor, o que realmente é o certo, e que não acontece tão facilmente no desenvolvimento hoje em dia.

    Links:


    O que é a Blogosfera?

    Autor: Mauro Amaral

    Post bem interessante do Mauro Amaral sobre faturamento dos blogs, pro-bloggers, entre outras coisas. Cita muito bem sobre a qualidade do conteúdo de um blog, entre outras coisas bem interessantes.

    Link:

    http://www.carreirasolo.org/archives/o_que_e_a_blogosfera.html


    Blog Corporativos: Cauda longa ou rabo preso?

    Autor: Cardoso no MeioBit

    Post interessante do Cardoso no MeioBit sobre Blogs corporativos. Fala sobre a “mania” que está pegando agora, mas critica bastante alguns blogs corporativos, como do site Americanas.com que fez do Blog uma listagem de anúncios da Loja, como um catálogo online.

    Mas também fala de Blogs corporativos interessantes, bem feitos e com conteúdo útil para os leitores.

    Links:

    http://www.meiobit.com/blog_corporativos_cauda_longa_ou_rabo_preso


    Ah, este Google…

    Autor: Hilder Santos no Pimenta com Dendê

    Uma dica do Hilder sobre um serviço do Google, o Google Apps for Your Domain, que serve para você ver seus outros webmails que não sejam o Gmail, dentro do Gmail. Algo em torno disso. Eu estava procurando algo sobre esse assunto tem um tempinho, cheguei até a ver algo sobre essa ferramenta, mas não cheguei a testar, mas farei isso agora :D.

    Link:

    http://www.pimentacomdende.com/2007/01/21/ah-este-google/


    Finalizando…

    Bom, é isso galera. Como eu disse, tentarei postar sempre uns posts que acho interessante para vocês, sejam engraçados, sobre tecnologia, etc. Depende do meu ânimo :D.

    Tem muita galera boa por ae, posts ótimos. Assim que der, posto mais ok? 😉

    Akele abraaaaço…

    [BBL]ajax, blog, blogosfera, blogs, blogs-corporativos, blogueiros, convergencia, convergir, google, iphone, rota-blogueira, tecnologia, usabilidade[/BBL]

    [ 22/jan/2007 às 15:03hrs ] [ Por Bruno Dulcetti ] Comentários 8 Comentários |

    Categorias: Blogosfera,Rota Blogueira,Tecnologia

    » Vertical-align no CSS. Como, quando e por que usar.

    E ae galera. Estou aqui de volta, novamente, depois de uma sumida (pra variar não é verdade? :P). Mas eu juro que tentarei voltar com mais freqüência, postar mais colírios, vídeos do Videolog, etc.

    Que bom Bruno. Mas algo em especial ou só veio pra falar que está sumido?

    Não, não. Estou aqui para postar um artigo sobre uma propriedade CSS, o vertical-align, que vejo por ae que muita gente têm duvida na sua utilização, aplicação.

    Muitos desenvolvedores confundem e comparam com o atributo valign que é colocado dentro da tag <td> no HTML. Realmente é semelhante, o nome mesmo indica isso, mas as funcionalidades e aplicações são diferentes, quando não aplicada em células de tabelas.

    Legal Bruno. Então mostra ae. Quais as diferenças?

    Primeiramente, a propriedade vertical-align não é para ser aplicada em blocos e sim em elementos inline. A não ser que apliquemos em células de uma tabela, como estávamos acostumados.

    Vamos ver um exemplo de como os iniciantes utilizam a propriedade:

    Código HTML:

    <div id="box">
    Meu texto bem aqui.
    </div>

    Código CSS:

    #box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;padding:5px;vertical-align:middle;width:400px;}

    Podemos ver o resultado desse exemplo aqui.

    Não vou explicar detalhadamente o que foi utilizado, pois é bem básico. A única coisa diferente usada foi o vertical-align mesmo.

    Como podemos ver, o resultado não foi satisfatório. O texto continuou no topo da div. Com isso, já podemos ver que confirma como eu disse acima, que a propriedade não funciona em blocos. 😉

    Certo Bruno. Mas como resolver isso então? (Parte 1 – line-height)

    Temos algumas variedades de resolver tal problema. A primeira seria a utilização da propriedade line-height com o mesmo valor da propriedade height. Veremos abaixo:

    #box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;line-height:200px;padding:5px;width:400px;}

    Podemos ver o resultado desse exemplo aqui.

    Restrições e problemas.

    Como sempre, temos restrições nesse exemplo. Na verdade temos em tudo não é verdade?

    • Altura variável dentro do bloco;
    • Mais de uma linha dentro do bloco;

    Vamos às explicações:

    Altura variável dentro do bloco.

    Se tivermos um site dinâmico, onde a altura do elemento pode variar, teremos problemas, pois se o line-height for diferente do height, o texto não ficará centralizado.

    Mais de uma linha dentro do bloco.

    Bem grave esse problema, pois se tivermos mais de uma linha, a distância entre essas linhas ficará absurda, pois será sempre o valor do line-height, portanto, se tivermos três linhas de texto, por exemplo, teremos, no exemplo acima citado, uma altura de três vezes o line-height, pois temos três linhas e 200px de line-height, com isso, 3x200px.

    Veja o exemplo aqui.

    Certo Bruno. Mas como resolver isso então? (Parte 2 – display: table-cell)

    Lembram de eu ter dito que dentro de uma <td> e com o atributo valign fica tranquilo?

    Então tudo funcionaria se eu colocasse um display: table-cell certo? Quase. Graças ao nosso querido e amado internet explorer, não. E ainda por cima, nem no internet explorer 7 funciona. Pelo menos aqui não funcionou.

    Vamos ao exemplo:

    #box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;display:table-cell;padding:5px;vertical-align:middle;width:400px;}

    Podemos ver o resultado desse exemplo aqui.

    Para quem utiliza browser, funciona perfeitamente. Mas para quem não usa, o texto continua no topo. Salve ie. 😀

    Mas então quando devo usar o vertical-align Bruno?

    Esse é o ponto que quero chegar. Como eu disse, o vertical-align são para elementos inline e não em blocos (fora os tds e ths da vida ok? 😉 ). Portanto, temos as restrições e problemas citados.

    Mostrarei alguns exemplos de como e quando usar o vertical-align.

    Alinhando imagem e texto centralizado verticalmente com o vertical-align.

    Veremos no código abaixo, como fazer para alinhar uma imagem e um texto centralizado verticalmente:

    Código HTML:

    <div id="box">
    <img src="http://brunodulcetti.com/artigos/vertical-align/macaco.jpg" alt="imagem" /> Meu texto bem aqui.
    </div>

    Código CSS:

    #box {background-color:# F7F6F1;border:2px solid #CCC;height:200px;padding:5px; width:400px;}
    #box img {vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Como podemos ver, a imagem e o texto ficaram centralizados verticalmente. Mas isso entre eles mesmo e não em relação ao bloco que os engloba.

    Tudo bem que neste exemplo eles acabaram ficando, mas porque eu retirei a propriedade height de dentro do CSS no bloco #box. Caso eu coloque um altura, não ficará mais.

    Alinhando inputs e texto centralizado verticalmente com o vertical-align.

    Veremos no código abaixo, como fazer para alinhar um input de texto e um texto centralizado verticalmente:

    Código HTML:

    <div id="box">
    Nome: <input type="text" name="txtNome" id="txtNome" />
    </div>

    Código CSS:

    #box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
    #box input {border:1px solid #CCC;font:100% "Trebuchet MS";_vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Sim, eu sei. Eu utilizei um hack para o internet explorer 6 ou anterior. Mas fiquem tranqüilos, é só pra exemplo. Mostrarei abaixo uma solução correta para isso ;).

    O Firefox já posiciona verticalmente, sem precisar do vertical-align, mas o ie não. E colocando esta propriedade com o valor middle, o ie alinha no centro, mas o Firefox deixa o texto um pouco mais para cima.

    Qual dos dois está correto, não sei ao certo, mas como o Firefox está mais avançado em relação as CSS’s, então deduzo que ele está correto, principalmente pela próxima solução.

    Alinhando inputs e texto centralizado verticalmente com o vertical-align – Parte 2.

    Somente uma segunda solução que funciona em todos.

    Código HTML:

    <div id="box">
    <span>Nome:</span><input type="text" name="txtNome" id="txtNome" />
    </div>

    Código CSS:

    #box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
    #box input {border:1px solid #CCC;font:100% "Trebuchet MS";vertical-align:middle;}
    #box span {vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Agora sim. Sem hacks e funcionando corretamente em todos. A diferença foi colocar um span e setar o vertical-align nele também.

    Com esse exemplo, deduzo que o Firefox está correto na renderização do exemplo anterior. Ele adiciona o vertical-align no input, deixando o texto sem. E no ie, parece que ao colocar no input, o texto já leva como padrão o vertical-align.

    Alinhando inputs e texto centralizado verticalmente com o vertical-align – Parte 3.

    A versão mais correta e semântica para este exemplo:

    Código HTML:

    <div id="box">
    <label for="txtNome">Nome:</label><input type="text" name="txtNome" id="txtNome" />
    </div>

    Código CSS:

    #box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
    #box input {border:1px solid #CCC;font:100% "Trebuchet MS";vertical-align:middle;}
    #box label {cursor:pointer;vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Neste exemplo, utilizei o label que é o mais correto, setando o vertical-align nele e mais um cursor para diferenciar ;).

    Legal Bruno. Muito bom mesmo. Mas o vertical-align só tem o middle como valor no CSS cara?

    Acabei esquecendo de citar mais detalhes sobre essa propriedade não é verdade? Fiquem calmos, estarei falando mais sobre ela abaixo :P:

    • baseline: Valor padrão no CSS. Posiciona o elemento da linha base de acordo com seu “pai”;
    • sub: Deixa o elemento como sub-escrito;
    • super: Deixa o elemento como sobre-escrito;
    • top: Deixa o elemento alinhado ao topo do elemento que estiver mais ao topo da linha;
    • text-top: Alinha o elemento de acordo com o texto que estiver mais alto e seja seu “pai”;
    • middle: Exemplo utilizado nesse post. Deixa os elementos que estiverem com este valor alinhados ao meio com relação à eles mesmos ou à seus “pais”;
    • bottom: Alinha na base do elemento que estiver mais baixo.;
    • text-bottom: Alinha o elemento de acordo com o texto que estiver mais baixo e seja seu “pai”;
    • valor: Valor fixo em pixels, em ou %. Posiciona de acordo com o valor setado a partir da linha base do seu “pai”.

    Resumindo…

    Bom. Tentei passar aqui um pouco dessa propriedade do CSS. Ficou um pouco grande, admito, mas tentei detalhar ao máximo, sem tentar deixar massivo.

    Espero que tenham gostado e tenha sido útil. Caso tenha esquecido de algo ou falado alguma besteira, por favor, comentem que eu modifico ok? 😉

    Finalizando…

    To ficando por aqui, deixando uma homenagem ao Marrelton 😀 camarada que trabalha aqui na parte de desenvolvimento da Globo.com que se amarra nos títulos do meu Blog e talz… Akele abraço ae Elton 😉

    Akele abraço pra geral ae.

    [BBL]xhtml, webstandards, tutorial, web-standards, tableless, semantica, ie, dicas, desenvolvimento, css, artigos, vertical align[/BBL]

    [ 17/jan/2007 às 14:38hrs ] [ Por Bruno Dulcetti ] Comentários 35 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » TAG: Resoluções para 2007 (ou seria 2000Dul7?)

    Estava eu, passeando pela internet, entrei no Technorati, tava vendo a posição do meu Blog, etc. Quando de repente vejo um post do Fábio Seixas me linkando.

    Fui ver o que era, cheguei a pensar que fosse sobre o meme Previsões 2007, pois o nome era um pouco parecido e também era um meme.

    Tá bom Brunão. Não enrola e fala logo…

    Okay, okay. É que tanto tempo que não escrevo no Blog direito, que já estava com saudades 😀

    O “tagueamento”, como o próprio Fábio disse, foi pelo meme “Resoluções 2007”, onde o cara que posta (eu, mas no caso o Fábio) escreve cinco metas para este ano de 2007 e “tagueia” mais cinco pessoas para postarem sobre suas metas (no caso eu, mas minhas indicações vão abaixo).

    Brigadão pelo convite Fábio, valew pela lembrança 😉

    Minha lista segue abaixo:

    1. Colocar o Videolog no topo;
    2. Dar mais visão ao MMUG-RJ, que virará AUG-RJ;
    3. Dar bastantes abraços por ae e ajudar quem necessita como eu puder;
    4. Ser, ainda mais, reconhecido profissionalmente e subir cada vez mais na Globo.
    5. Fazer as pessoas sorrirem, como tento fazer hoje, sendo, com isso, feliz também… Cada vez mais…

    Bom, a lista seria bem longa, mas como a regra é somente cinco, então vão cinco 😀

    “And The Oscar goes to…”

    Deixando a palhaçada de lado, ai vão os cinco que escolhi. Sintam-se “tagueados” 😀 Gostei disso Fábio 😛

    Tanta gente pra indicar, o Ciro Feitosa, mas esse cara tá sumido :D, ae acabei não o indicando, Bruno Torres, Flávio, etc, etc, etc… Mas deixa pra próxima pessoal 😉

    [BBL]blogosfera, pessoais, tecnologia, amigos, blogosfera, blogs, blogueiros, globo.com, resolucao, resolucoes2007[/BBL]

    [ 09/jan/2007 às 23:42hrs ] [ Por Bruno Dulcetti ] Comentários 5 Comentários |

    Categorias: Blogosfera,Pessoais,Tecnologia

    » PLÁGIO TOTAL DO G1!

    Perae. Estou sumido e tudo, mas depois dessa que eu recebi por email, foi brincadeira. Me mandaram por email um site que foi a cópia, um clone do site do G1 da Globo.com.

    O que leva uma pessoa a fazer isso? O G1 tem um peso forte na mídia e o cara ainda têm a cara de pau de plagiar. Não que seja manero plagiar sites menores, nunca. Mas esse merece o Troféu Olho Óleo de Peróba.

    A Notícia Digital.

    Sem mais… Fico por aqui. Aquele abraço.

    [ 05/jan/2007 às 15:02hrs ] [ Por Bruno Dulcetti ] Comentários 34 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