Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

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

    » Até onde vai o limite da Semântica?

    E ae pessoal. Tempo que não posto sobre web standards, css e afins, que são os temas principais desse Blog. Muitos trabalhos, pouco tempo, meio “sem saco” para escrever (blogueiros são humanos também sabiam?) 😛

    Tá blz Bruno, mas isso todos dizem. Vá direto ao ponto…

    Ok, ok… Não estou aqui para falar de trabalho, dar desculpas sobre minha falta de tempo e “saco” sobre postagens no blog, etc. Estou aqui para falar de um assunto que tenho certeza que já passou na cabeça de praticamente todos os desenvolvedores web, que trabalham com webstandards.

    Semântica… A velha e temida semântica…

    Não falarei sobre semântica web, citarei alguns exemplos para vocês entenderem e depois os casos reais para que vocês entendam porque estou escrevendo este post ok?

    Beleza então Bruno cite os exemplos.

    Todos sabemos que as tags <hn> são as tags de título (onde n é o número que varia de 1 a 6), sabemos também que a tag <a> é para links, <p> serve para parágrafos, etc, etc, etc.

    Sabemos que temos tags que são display block e display inline correto? Não sabemos? Okay, explicarei um bocado sobre:

    Display Block

    Traduzindo, são blocos. Os elementos blocks adicionam uma quebra de linha antes e depois dele próprio. Seria como se tivesse um <br /> antes e depois da tag. Podem conter tanto elementos inlines quanto blocks dentro dele.

    Alguns Exemplos:
    • <p>
    • <h1>
    • <div>

    Display Inline

    Ao contrário do block, os elementos inlines não quebram linha. Podem conter outros elementos inlines dentro dele próprio, mas não é permitida a inserção de elementos do tipo block dentro deles.

    Alguns Exemplos:
    • <a>
    • <strong>
    • <em>

    Resumindo…

    Veremos alguns exemplos da forma correta e da forma não-correta de se utilizar elementos inlines e blocks:

    Modo correto

    <p>Aqui vem o <a href="#">meu link com <em>Itálico</em></a></p>

    Resultado

    Aqui vem o meu link com Itálico

    Como no meu css está configurado para os links ficarem em negrito, acabou ficando tudo em negrito onde tem o link ok?

    Neste exemplo podemos ver que temos o parágrafo, que é block, e dentro dele temos um link, que é inline, que dentro dele temos um em q dá ênfase ao termo entre esta tag.

    Resumindo, temos inline dentro de inline, que estão dentro de um bloco, tudo certinho.

    Modo incorreto

    <a href="#">
    <h1>Aqui vem o título</h1>
    <p>Aqui vem o parágrafo</p>
    </a>

    Resultado

    Como o resultado irá invalidar o código, podendo deixar uma bagunça, criei uma página só pra esse exemplo.

    Agora iremos ao ponto chave desse post.

    Vimos que esse segundo exemplo está errado, pois o link, que é um elemento inline, contém elementos blocks (h1 e p). Percebam que MESMO declarando no css o display: block pra link, ele, por padrão na W3C, é inline, portanto é descartado o CSS, ou seja, não é validado pela W3C.

    Beleza Bruno, mas o que podemos fazer?

    Temos uma opção, que seria englobar o h1 e o p dentro de uma div e coloca um link dentro do h1 e outro, com o mesmo href, dentro do p. Veremos neste exemplo.

    Agora sim, ele ficou validado pela W3C, porém, podemos ver dois pontos, o primeiro é que o link não ficou englobado totalmente na div, somente quando passa em cima do texto e a o segundo ponto é que temos que colocar o link duas vezes, com o mesmo endereço e isso pode aumentar de acordo com os elementos dentro dessa div.

    Verdade Bruno… Mas não tem nenhuma opção de conseguirmos validando na W3C?

    Até temos uma opção, que criei aqui agora, mas seria bem do tipo POG.

    Vamos ver o código HTML:
    <div>
    <a href="#"> </a>
    <h1>Aqui vem o título</h1>
    <p>Aqui vem o parágrafo</p>
    </div>

    Aqui, nada demais. Uma div com um link, um título e um texto de parágrafo. A única diferença é no link, que está vazio e por cima de todos. Vamos entender, vendo o código CSS:
    div {
    width: 140px;
    border: 1px solid #900;
    background-color: #E4E5E5;
    position: relative;
    overflow: hidden;
    }

    a {
    display: block;
    width: 1000px;
    height: 1000px;
    position: absolute;
    background-color: #E4E5E5;
    filter: alpha(opacity=0);
    opacity: .0;
    }

    h1, p { font: 12px Verdana; }

    Não entrarei em detalhes na lista de propriedades para a div, pois é bem básica. A única coisa diferente é que coloquei um position relative, porque irei usar dentro dela um bloco com position absolute. Coloquei também um overflow hidden, isso quer dizer que se algum conteúdo ultrapassar o tamanho da div, ele ficará oculto, sem atrapalhar em nada o layout da págin e da div.

    No título h1 e no parágrafo, só coloquei o tipo e tamanho de fonte, nada demais nisso ok?

    Agora que “o bicho pega” :D. No link que a brincadeira começa a ganhar forma e tudo começa a ficar mais fácil de ser entendido.

    O link recebe um display block, com isso, vira um bloco. Mas lembram que ele esta acima do link e do parágrafo, pois ele é inline e não pode englobar blocos?

    OBS: Não importa que você tenha setado no CSS que o link virou bloco, a W3C continuará não validando seu código, pois ela confere com o padrão dos links, e como o <a> é um elemento inline como padrão, não validará. 😉

    Não se assustem com os 1000px para a largura e a altura do link, pois como a div está com overflow hidden, o link só aparecerá dentro do tamanho disposto na div ;). Na verdade um 100% na altura e largura já funciona, mas no ie 6 não funcionou, aconteceu algum bug, ficando só pela metade, vai entender né… 😉

    Legal Bruno, mas o título e o parágrafo desceriam…

    Sim, mas como temos o position absolute, isso não acontece mais. Ele fica grudado na div e o conteúdo que vem depois dele, fica aparecendo também, o link fica por cima deles.

    Só isso? Mas tem mais código lá ué!

    Sim, eu sei. Na verdade, nosso problema teria sido resolvido, mas não podemos esquecer, temos que nos preocupar com o ie. Somente com aquele código, no ie 6 fica ruim, não funcionando totalmente, com o link somente em algumas partes da div.

    Mas isso é resolvido colocando uma cor de background no link, porém, teremos um link por cima de tudo, com uma cor sólida por cima. Ganhamos um problema. Temos um link na div toda, mas como tem uma cor de background, não vemos o conteúdo por trás.

    Mas temos soluções (gambiarras?) para tudo. 😀 Temos uma propriedade no css, a filter, que só funciona no ie. Os valores variam dentro dessa propriedade, podemos colocar opacidade, blur, glow, entre outras coisas que não ficarei aqui citando.

    No nosso caso, precisamos da opacidade, por isso, coloquei o seguinte valor:
    filter: alpha(opacity=0);

    Nesse caso, alpha modifica a opacidade do elemento, que nesse caso é o nosso link. Setei um valor 0 (zero), que significa que quero totalmente transparente. O valor varia de 0 (transparente) até 100 (totalmente visível).

    Mas só resolvemos o problema do ie, conseguimos deixar o link transparente no ie, falta no Firefox também. Mas precisamos só de mais uma propriedade, a opacity, que recebendo 0 (zero), fica totalmente transparente.

    Ufa. Que saco hein Bruno

    Nem me fale isso. É um saco isso tudo, mas conseguimos chegar no resultado final.

    Lembrando que, esse macete não funciona no Opera. Não tenho Opera aqui instalado, por isso não posso confirmar, mas tenho quase certeza que não funciona, ou seja, não é muito legal utilizá-lo :D.

    Voltaaaaaaaaaando ao foco do Post…

    Acabei escrevendo até um pequeno tutorial, mas tudo bem né :D. Acabei saindo do foco do assunto do post.

    Mas voltando ao assunto dele, chegamos no ponto crucial. Vimos aqui que temos soluções para esse probleminha mostrado por mim aqui, mas vimos que é meio chato fazer e não muito funcional, pois como eu disse, não é certo de funcionar no Opera.

    Vale a pena focar a semântica SEMPRE? Ou melhor, vale a pena focar a Validação na W3C?

    Esse é o ponto principal do Post. Em relação a semântica, temos dois lados:

    • Link englobando o título e o parágrafo como um bloco, ficando invalidado na W3C, pois o título seria um h1 e o parágrafo um p;
    • Link englobando um strong e um span, sendo eles o título e o texto do parágrafo do texto, ficando assim, validado, pois é tudo inline.

    Na primeira opção, temos um link englobando tudo e o título sendo título e a descrição sendo um parágrafo, tudo correto, mas como o link é inline, não é validado.

    Na segunda, temos o link englobando tudo e um strong sendo o título e um span sendo a descrição. Passa no validador, mas no olhar semântico, nem tanto.

    É aí que entra a discussão, será que vale MESMO fazer tudo para validar na W3C? Mesmo que para isso você perca a semântica, as vantagens de se utilizar um h1, h2, h3, entre outros? Vale mesmo deixar tudo inline para validar? Será?

    Já vi posts sobre isso, como o do Henrique do Revolução etc, tem outro do Tableless chamado Validar é importante?!, etc.

    Eu acho importante validar na W3C Bruno. Por que você não acha?

    Não ponha palavras na minha boca (ou seria letras nas minhas teclas?), eu só estou dizendo que existem casos e casos. Você pode muito bem ter um site que ao invés de usar h2, utiliza um <p class=”titulo”>, existe o caso de você esquecer de fechar uma tag, etc, etc, etc.

    O caso que citei, foi um caso que está tudo certo, a única coisa “errada” é a utilização do link envolta do título e do parágrafo. Nosso código está semântico, está correto, a não ser pela W3C não permitir links, por serem inline, englobarem blocos.

    Como aqui na Globo o pessoal preza a validação na W3C (pelo menos tentar ao máximo), eles utilizam spans e mais spans dentro de links para não ficar errado na W3C.

    Eu acho que, neste caso, possa dar uma “esquecida” na W3C e colocarmos o link, não vejo mal algum nisso, está tudo funcionando, tudo certo, só a “bendita” W3C falando que meu código está incorreto. Eu não acho e aí? Como que fica isso? 😀

    Mas, isso varia de pessoas e pessoas e eu estou aqui para saber a opinião de cada um que lê este blog, para ver se eu estou viajando, se só eu que penso assim, ou tem desenvolvedores que pensam assim, mas nem sempre agem assim por causa dos seus trabalhos ;).

    Resumindo

    Na verdade, o que eu acho é que a W3C deveria criar uma nova tag, chamada <ablock>, que seria um link também, mas como um bloco, com isso, não precisaríamos nos preocupar com isso não é verdade? Ou melhor, fazer com que consultasse o CSS e visse “se o <a> é um bloco, então valido, senão não valido”, o que seria melhor ainda, pois não seria necessário a espera de novas versões dos browsers, que por parte do FF, Opera seria tranquilo, mas o ie… aff…

    Finalizando…

    E você? O que acha disso? Acha certo “pular a cerca” da validação da W3C nesse caso? Ou você faz parte do grupo “Validação acima de tudo”?

    Deixe sua opinião 😉

    Aquele abraço.

    [BBL]acessibilidade, artigos, css, globo, html, semantica, usabilidade, validacao, w3c, web-standards, webstandards, xhtml[/BBL]

    [ 30/nov/2006 às 17:27hrs ] [ Por Bruno Dulcetti ] Comentários 8 Comentários |

    Categorias: Acessibilidade,Artigos,CSS,Usabilidade,Webstandards

    » Patrocine meu Carro! Mas que carro? Quero comprar um e você pode me ajudar!

    Estava eu vendo meus emails pelo Thunderbird (sim, é verdade, eu ainda não estou full-time pelo Gmail, fazer o que…), quando me chega um email com o seguinte título:

    “Para comprar um carro, criei um blog”

    Estranhei, e fui olhar o email. Comecei a ler, vi que o email tinha uma URL. Confesso que não fui ver, não me interessei muito pois não era de meu interesse a princípio. Fechei o email, marquei como não lido, pois tinha algumas alterações pra nova versão do Videolog e deixei para ver o link mais tarde.

    E com o passar do tempo…

    Estava eu aqui na Globo, quando um camarada meu daqui me falou sobre um link, de alguém que estava querendo comprar um carro e criou um blog com a foto do carro e pequenas áreas para colocar publicidades. E essas publicidades eram vendidas dentro do site, demarcando a área que você quisesse. Achei interessante, pegou a idéia de um cara que fez isso com um notebook e fez com o seu futuro carro.

    Depois caiu a ficha…

    Quando cheguei em casa, um dia desses, abri o email e vi que era exatamente o mesmo Blog que o cara do trabalho me passou e começei a rir sozinho, mas tudo bem, um momento curto de loucura espontânea… 😀

    Mas o que seria isso exatamente Bruno?

    Bom, o Felipe criou um blog, com o intuito de conseguir comprar seu carro. Ele dividiu a lataria do seu futuro carro em 500
    “quadrados”, cujo tamanho correto não sei ao certo, e cada quadrado ele fará anúncios que ele está vendendo por R$100 cada quadrado desse.

    Ele está vendendo os anúncios para quem quiser anunciar, ajudá-lo. Pode ser loja, freelancer, empresas tanto grandes quanto pequenas, não importa.

    Com tudo isso, quando as vendas chegarem no valor do carro, ele vai adesivar todo o carro e circular com ele assim até o próximo Salão do Automóvel.

    Mas ele é maluco, não é possível…

    Ache o que quiser, mas ele disse que em 5 dias com o blog no ar, ele conseguiu 20 mil pageviews e 10 espaços vendidos.

    Hoje, ele tem no total, 28 anúncios vendidos, num total arrecadado de R$2.917,00.

    Maluco ou não, a idéia está dando certo… 😉 E dentre os assinantes, temos o Portal iMasters, entre outros.

    Resumindo

    Bom, achei a iniciativa muito interessante e desejo toda a sorte pro Felipe e que ganha um espaço aqui sobre sua idéia. Acessem o Blog dele e anuncie também, ele agradece… 😉

    Aquele abraço.

    [BBL]anuncios, blog, blogosfera, blogueiros, car, carro, ferramentas, patrocinio, pessoais, tecnologia[/BBL]

    [ 29/nov/2006 às 17:43hrs ] [ Por Bruno Dulcetti ] Comentários 11 Comentários |

    Categorias: Pessoais,Tecnologia

    » Estudante indiano desenvolve sistema de armazenamento em papel

    Um estudante indiano da região de Kerala diz ter inventado um sistema de armazenamento ecologicamente correto baseado em papel, que é capaz de compatar de 90 a 450 GB de informação em um único disco.

    Sainul Abideen, de 24 anos, disse que o segredo de sua invenção, que ele chamou de “Rainbow Versatile Disc” ou RVD, é usar formas geométricas como círculos, quadrados e triângulos ao invés de zeros e uns, como na compactação tradicional.

    Em uma demonstração no laboratório de sua faculdade, Abideen apresentou um pedaço comum de papel de aproximadamente 26 cm² que continha 432 páginas armazenadas, lidas por um scanner. Um correspondente da Arab News presente ao evento disse que viu um vídeo de 45 segundos lido de um pedaço de papel comum.

    Para Abideen, as vantagens de seu RVD são evidentes. Ele é barato —custa um décimo do preço de um CD e ofereceria capacidade de armazenamento 131 vezes maior—, e é ecologicamente correto, já que não usa materiais poluentes como os policarbonatos.

    O estudante agora trabalha em um leitor RVD que seja compacto o suficiente para ser usado em laptops, além do desenvolvimento de um cartão SIM no padrão RVD que permitiria o usuário a salvar até 5 GB em seu celular.

    Abideen é ambicioso, e diz que sua idéia principal é chegar a um banco de dados com quase 123,60 Petabytes de capacidade. No papel, literalmente.

    Fonte: UOL Tecnologia

    Congratulações… Estou de boca aberta…

    Olha, muito bom em… Cada dia vejo como a tecnologia melhora… Achei perfeito e parabenizo o criador dessa idéia… Mais por ser ecologicamente correto (sou muito disso, naum jogo papel na rua, etc.)

    Que o mundo (e a tecnologia) continue assim… Parabens ao indiano Sainul Abideen…

    [BBL]uol, tecnologia, parabens, armazenamento, hd, papel, rvd, Rainbow Versatile Disc[/BBL]

    [ 24/nov/2006 às 11:09hrs ] [ Por Bruno Dulcetti ] Comentários 13 Comentários |

    Categorias: Tecnologia

    » Bruno Dulcetti e Videolog.tv na Revista Webdesign.

    Thumb Matéria Revista Webdesign

    E ae pessoal, tudo tranquilo? Por aqui tudo ótimo, melhor é quase impossível 😀 Brincadeira 😉

    Grande Notícia. Pelo menos para mim 😀

    Vim aqui pra trazer uma notícia que eu gostei muito de saber. Estou na edição do mês de Novembro da Revista Webdesign, na seção Tecnologia na WEB com a matéria entitulada “Vídeos na web!”.

    A imagem acima é uma thumb do bloco da página que teve a minha participação. É só clicar na imagem ou neste link mesmo para ver a imagem ampliada.

    Legal hein Bruno. Sobre o que que fala nessa matéria?

    A matéria é sobre os vídeos na web, a nova tendência dos vídeos, falando um pouco sobre assunto, citando alguns exemplos. No bloco que postei aqui, tem a citação do Videolog, chamado de “Caso Prático”, mostra a minha participação, como desenvolvedor, nessa área de vídeos, compartilhadores, etc. Algumas preocupações, detalhes, conselhos, dicas e afins.

    Finalizando

    Queria agradecer ao pessoal da Revista Webdesign, que me deu essa oportunidade, não somente para minha aparição na revista, mas de um espaço a mais pro Videolog aparecer e mostrar que nós, brasileiros, não estamos perdendo em nada para os concorrentes. Basta somente um pouco mais de espaço, divulgação e um pouco menos dessa mania dos brasileiros adorarem ferramentas estrangeiras.

    Agradecer ao pessoal da Produzindo, que me deu essa oportunidade de entrar nesse grande projeto, o qual estou tem um ano e participei full-time na produção da nova versão. E esperem alguns dias, pois teremos novidades no Videolog. Novo layout, novas ferramentas, entre outras coisas mais.

    Aquele abraço

    Fico por aqui, valeu por tudo galera. Aquele abraço.

    [BBL]pessoais, videolog, video, vídeo, videos, entrevista, tecnologia, revista, webdesign, bruno dulcetti, desenvolvimento[/BBL]

    [ 22/nov/2006 às 13:35hrs ] [ Por Bruno Dulcetti ] Comentários 8 Comentários |

    Categorias: Pessoais,Tecnologia,Videolog

    » Flamengo 111 anos. Singela homenagem.

    Imagem Flamengo 111 anos

    Uma pequena homenagem ao meu time de coração, que graças a Deus, esse ano não está dando vexame no Brasileirão e ainda ganhou a Copa do Brasil e já está na Libertadores. 😀 Essa é pra você Gio uhauauauauuhauauua

    Akele abraço… 😀

    [BBL]111 anos, aniversario, flamengo, pessoais, mengão[/BBL]

    [ 15/nov/2006 às 16:18hrs ] [ Por Bruno Dulcetti ] Comentários 14 Comentários |

    Categorias: Pessoais

    » Google Talk e suas primeiras aparições no Orkut. Será que vai dar problema?

    Falae cambada.

    Hoje estou aqui, mas não eh pra falar de CSS, Webstandards, xhtml, flash, mostrar colírios, etc. Hoje vou falar sobre o Gtalk, Google, etc.

    De um tempo pra cá, deu pra perceber que o Google integrou o Gtalk ao Orkut. Agora muita gente tem Gtalk, moh galera que nem sabia da existência está começando a utilizá-lo, etc.

    Tudo bem Bruno e dae?

    Pela parte do Orkut é até uma boa, consigo ver dentro do site de relacionamentos que está online no Gtalk, posso abrir uma janela pvt pra conversar com ele, etc. Muito bom, como praticamente todas as integrações dos produtos da Google.

    Porém…

    Tenho percebido que o Gtalk não está tão funcional como antes. Tenho percebido algumas falhas, desloga do nada às vezes, sai e entra, coisas que acontecem constantemente com o maldito MSN.

    Fora que essa coisa de muita gente utilizando o Gtalk vai acabar atiçando esses malditos que ficam criando spywares, vírus, entre outras coisas pro MSN, a fazerem pro Gtalk também.

    Quem me dera se eles tivessem foco pro Gtalk…

    Antigamente, gostava muito do Gtalk. Poucas pessoas o utilizavam, somente a galera que desenvolve, trabalha MESMO com internet e talz, “fãs” do Google, etc. Algo mais profissional, parecendo que tinha um foco mais para profissionais internet, desenvolvedores, etc.

    Seria uma blz se fosse assim mesmo, pois creio que não teríamos problemas quase sempre com isso.

    Vamos dar um tempo ao tempo…

    Mas, vamos esperar… Vamos dar um tempo ao tempo, espero e acredito, com a potência e qualidade dos produtos da Google, que não teremos problemas, que eles cuidarão para que não tenham ataques, invasões, problemas, bugs, etc.

    Entretanto, apesar de…

    Apesar da qualidade do Google, tudo é possível e eh capaz de, pelo menos no início, termos alguns problemas até o pleno funcionamento dessa ferramenta que tem tudo, com essa integração com o Orkut, de desbancar o MSN.

    Só espero que eles não lançem, implementem akeles emoticons animados malditos, que enxem o saco.

    Finalizando

    Fico por aqui, akele abraço.

    [BBL]blogosfera, ferramentas, google, gtalk, internet, msn, tecnologia[/BBL]

    [ 14/nov/2006 às 11:27hrs ] [ Por Bruno Dulcetti ] Comentários 17 Comentários |

    Categorias: Tecnologia

    » Videolog v.0003 – O Jardineiro é Jesus e as arvres somo nozes.

    
    
    

    “E as arvre somo nozes.”

    Como que uma frase pode ser desesperadora para um ser-humano. Esse vídeo tá rolando pela net pra caramba e to colocando aqui pra quem ainda não viu e porque estou sem saco e sem o que postar 😀

    Muito comédia o cara tentando falar a frase “O jardineiro é Jesus e as árvores somos nós”, falando “nozes”, arvre, arvoros, arvoreze, entre outras pérolas…

    Coitado do maluco, ficou famoso sem querer 😀

    Visite o vídeo pelo link original.

    Aquele abraço galera.

    [BBL]Videolog, comédia, rir, vídeo, video, cia, humor[/BBL]

    [ 13/nov/2006 às 17:39hrs ] [ Por Bruno Dulcetti ] Comentários 9 Comentários |

    Categorias: Videolog

    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