Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

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

    » Globo Esporte lança sua nova versão

    Globo Esporte.com

    O mais esperado de todos, o mais acessado e o mais querido. Não, não é o flamengo, mas é outro que todos amam.

    Sim, aquele único portal, que faltava da Globo.com para ser lançado no novo padrão estabelecido alguns meses atrás e o Ego, G1, Globo Vídeos e a própria Home, é claro, já seguiam. Ele mesmo, o Globo Esporte lançou sua nova versão, mais leve, mais legível, mais rápida e mais acessível.

    Até que enfim hein Dulcetti…

    Verdade. Muitas pessoas me perguntavam quando seria lançado, toda hora falavam comigo, curiosos, querendo saber como iria ficar, etc, etc. E aí está o portal.

    Seguindo basicamente como o G1, sem efeitos mirabolantes como eu tive que criar no Ego e tudo mais. Mas ficou bem legal, gostei, lógico, seguindo nessa concepção de design, pois já tinha dito que em termos de design perdeu um bocado, mas no resto, ficou sensacional. A galera já está se acostumando e gostando dos novos padrões.

    Pontos Fortes e Fracos

    Como não poderia deixar de ser, existem prós e contras a cada novo projeto.

    Pontos Fortes

    • Conseguiram manter as cores dos links dentro dos times, dando uma sensação de estar na “casa” do seu time, como na versão anterior;
    • Marca personalizada para cada time e cada esporte, campeonato, etc. Já existia na outra, mas agora ficou de forma simples;

    Pontos Fracos

    • Apesar da personalização dos links, rodapé e barra, faltou aquele algo mais que tinah na versão anterior, como o topo com escudo, cor de fundo e tudo mais;
    • Algumas cores estão meio estranhas, como o Rubro do Flamengo;

    Sim, poucos pontos, é porque dei uma passada bem rápida, só pela página do Flamengo mesmo. Mas veja você então e dê sua opinião aqui nos comentários. E aí? Gostou?

    Finalizando…

    Parabéns à todos envolvidos no projeto. Ficou sucesso. Aquele abraço.

    [ 06/maio/2008 às 10:34hrs ] [ Por Bruno Dulcetti ] Comentários 21 Comentários |

    Categorias: Acessibilidade,Globo.com,Webstandards

    » IE reconhecendo corretamente o CSS 2.1 e com vários bugs corrigidos

    Meu camarada Mico publicou no Blog dele e eu não tive como não publicar aqui. Talvez alguns não o sigam, etc.

    Foi publicada uma Biblioteca JavaScript que resolve vários problemas, bugs, que o deixavam totalmente louco e descabelado porque o IE não aceitava.

    Como assim Bruno?

    Quem nunca passou algum problema com o IE, nenhum bug ou defeito no CSS taque a primeira pedra. Creio eu que todos já passaram por isso. Tanto por seletores, problemas com background com PNG, etc. (Esse então, aff.)

    Meu Deus Dulcetti. É uma benção isso tudo!

    Bom, eu espero que sim, mas não fique tão empolgado, não se esqueça que é o IE e tudo pode acontecer. Mas pelas explicações dadas pelos sujeitos que desenvolveram essa Biblioteca, o IE 5, 6 e 7 ficariam como o IE 8, com todas as funcionalidades resolvidas:

    • supports the following CSS selectors:

      1. parent > child
      2. adjacent + sibling
      3. adjacent ~ sibling
      4. [attr], [attr=”value”], [attr~=”value”] etc
      5. .multiple.classes (fixes bug)
      6. :hover, :active, :focus (for all elements)
      7. :first-child, :last-child, only-child, nth-child, nth-last-child
      8. :check, :disabled, :enabled
      9. :empty, :contains(), :not()
      10. :before/:after/content:
      11. :lang()
    • supports imported style sheets
    • preserves the cascade of the style sheet
    • does not alter the document structure
    • does not repeatedly query the DOM tree using JavaScript
    • uses pure CSS to enforce style sheet rules
    • supports the W3C box model in both standards and quirks mode
    • supports fixed positioning (flicker free)
    • supports overflow:visible
    • supports min/max-width/height
    • fixes broken (X)HTML elements (abbr, object)
    • standardised forms behavior
    • supports PNG alpha transparency

    É bem pequena, tem apenas 11kb e funciona a partir do IE 5+ pra Windows. Fora que basta somente uma linha de código, um src de um javascript, que todos os seus problemas acabam. (Se Deus quiser).

    <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE8.js" type="text/javascript"></script>
    <![endif]-->
    

    Sucesso Total Dulcetti!

    Hey rapaz, isso quem fala sou eu! Mas tudo bem, eu deixo vc falar tb 😛

    Bom, creio que você não vai querer matar todos os desenvolvedores do IE agora. Pelo menos por enquanto né.

    Finalizando…

    É isso. Caso você ache algum problema, por favor, não venha perguntar a mim, me mandar email. Vá reclamar com quem fez ok? Muito obrigado, volte sempre.

    [BBL]acessibilidade, bugs, css, dicas, explorer, ie, tecnologia, web-standards, webstandards[/BBL]

    [ 08/jan/2008 às 19:13hrs ] [ Por Bruno Dulcetti ] Comentários 10 Comentários |

    Categorias: Acessibilidade,Tecnologia,Webstandards

    » Globo Vídeos agora com Vídeos em FLV

    E ae pessoal.

    Depois do lançamento do novo Portal de Vídeos da Globo.com, de muitos pedirem, reclamarem, criticarem, agora os vídeos da Globo.com estão no formato FLV. Isso mesmo, podem comemorar, agora os vídeos estão num player em flash, com buffer decente, melhorando bastante o carregamento dos vídeos, que é uma vantagem do flash.

    Mas como que era antes Bruno?

    Como muitos devem saber, antigamente os vídeos ficavam no formato WMV, chamado num player do Windows Media Player. O carregamento do vídeo era precário, sempre pausava e dava buffer. E se você quisesse voltar o vídeo em algum ponto, aí era mais precário ainda, carregava tudo de novo, fazendo buffer, etc. Uma merda.

    Agora tá bem melhor hein Dulcetti

    Com certeza sim. Além de ficar bem melhor, etc. Veja um exemplo num vídeo da Rebeca Gusmão.

    E logicamente que todos os vídeos não estão no novo formato. A partir de hoje, todos os vídeos entrarão no novo formato. Só falta saber se os antigos entrarão, gradativamente, no novo formato FLV. Essa eu vou ficar devendo à vocês.

    Finalizando..

    Bom, é isso. Mais uma melhoria da Globo.com. E esperem que vem mais novidade por ae. Akele abraço.

    [BBL]acessibilidade, flash, globo, globo-video, globo.com, tecnologia, video, videos[BBL]

    [ 19/dez/2007 às 14:00hrs ] [ Por Bruno Dulcetti ] Comentários 22 Comentários |

    Categorias: Acessibilidade,Flash,Globo.com,Tecnologia

    » 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

    
    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