Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

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

    » CSS Naked Day. Mas eu não vou tirar meu CSS não.

    Logo CSS Naked Day

    Hoje é o CSS Naked Day, ou o Dia do CSS Nu. Já falei sobre ele uns dois anos atrás. É uma data onde você tira seu CSS e mostra para todo mundo que seu código é estruturado de forma correta e tudo mais.

    Mas por que você deixou seu site com CSS então Dulcetti?

    Cara, sigo na mesma idéia do Henrique, tanto que ano passado nem cheguei a fazer e comentar.

    Meu site é bem estruturado e pronto. Você duvida? Então tire o CSS e veja. Não vou retirar o meu CSS para outros verem que meu HTML é correto e estruturado, porque as pessoas que frequentam este blog estão querendo informação, conteúdo e ele aparece assim, todo sem estilo? O que o cara tem a ver com isso?

    Fora que a outra parte, os assinantes do meu Feed, praticamente boaGrandeMeteóricaModafoca parte é desenvolvedor e entende bem(será?) disso. E se quiserem confirmar, retirem o CSS pelo Firefox, Opera ou browser semelhante.

    Calma Bruno, calma…

    Relaxa, sem exaltações. O que me faria mudar de idéia talvez, seria porque eles estão linkando as pessoas que estão participando disso. Mas deixo pra lá, não vou deixar meu site “nu” por um link. 😉

    [ 09/abr/2008 às 10:43hrs ] [ Por Bruno Dulcetti ] Comentários 15 Comentários |

    Categorias: CSS,Webstandards

    » Ego lança nova versão seguindo os novos Padrões Globo.com

    É pessoal. Mais um site do Portal Globo.com lança sua nova versão, totalmente leve, seguindo os novos padrões de implementação criados ano passado. Dessa vez foi o Portal Ego que lançou seu novo layout. Agora os sites que estão nos novos padrões são os seguintes:

    1. Home Globo.com
    2. G1
    3. Globo Vídeos
    4. Ego

    Agora só falta o Globo Esporte.com lançar sua “nova cara” para o público. Isso, logicamente, nos sites com maior visibilidade na Globo.com. Ainda faltam outros diversos. E fica óbvio o motivo pelo Globo Esporte ser o mais demorado: o tamanho. É um site bem grande, com variações absurdas, muitas páginas, etc.

    Legal Dulça. Ficou bem diferente do antigo né?

    Sem dúvida. E isso será sempre a primeira coisa que vão pensar. É uma mudança muito grande e de possível demora pra acostumar com o novo padrão, principalmente pro Ego, que antes tinha um site todo colorido, bela identidade, etc.

    Verdade Bruno. O que você achou desse novo layout?

    Como está seguindo os padrões, achei muito bom, mas temos que frisar esse novo padrão, que tudo está mais organizado, mais limpo, mais leve, mais usável, etc.

    Mas se eu for comparar com o layout antigo, prefiro muito mais o antigo. Era mais a cara do Ego e do público alvo do site. Cheio de frescurinhas, detalhes, sombras, transparências, etc. E como agora, nos novos padrões, isso foi deixado de lado, acabou ficando menos bonito, digamos assim.

    Mas como disse antes, seguindo os novos padrões, acho que chegaram num resultado muito bom.

    E você Dulcetti? Fez algo ae?

    Bom, praticamente toda a parte client-side HTML e CSS. Fiz em conjunto com o Rodrigo, vulgo sapão, mas ele entrou de férias logo em seguida e pegou poucas páginas, com isso, acabei pegando o projeto quase todo sozinho.

    Eu destaco a implementação dos novos destaques do site, que antigamente eram feitos com os textos exportados nas fotos e agora eles ficam por cima da foto, com texto puro mesmo, facilitando aos profissionais que sobem as notícias e destaques.

    Novos Destaques do Ego

    Exemplo do Destaque do Ego
    Exemplo do Destaque do Ego

    A implementação desse destaque foi bem chata, principalmente para deixar igual em todos os browsers, incluindo os do Mac. Mas foi rápido, com todos os detalhes que foi chato. Mas mesmo assim, ainda não ficou 100%, porque alguém deve ter metido a mão enquanto eu estava de férias, ferrando tudo. Fazer o que né.

    Nova Galeria de Fotos do Ego

    Exemplo da Galeria de Fotos do Ego
    Exemplo da Galeria de Fotos do Ego

    Essa galeria, de início foi meio chata, pelo detalhes, efeitos, entre outras coisas. Mas também foi rápida. Agora ela será a Galeria padrão, deixando de lado aquela atual em flash que eu não acho muito agradável.

    Gostei muito desses exemplos hein Dulça. Como você fez?

    Bom, isso eu comentarei nos tutorias que eu farei para eles. O do destaque já foi iniciado, mas vai ser bem longo por causa dos detalhes. Mas prometo este ano colocar os dois aqui no Blog. 😀

    Finalizando…

    Bom, é isso. Espero que gostem. Já espero um monte de críticas e bombardeios ao novo layout, é normal isso acontecer. Mas lembre-se, eu não fiz o design, só o código HTML, portanto, não venha me xingar. Outra coisa, lembre-se dos novos padrões, por isso, não venham falar que queriam ver pássaros voando, uma gostosa rebolando e várias firulas.

    Ah, em relação ao código, não se esqueçam do Vignette, ele estraga muita coisa 😉

    Aquele abraço.

    [BBL]design, ego, globo, globo-video, globo.com, lancamento, layout, pessoais, tecnologia, web-standards, webstandards, xhtml[/BBL]

    [ 11/mar/2008 às 12:56hrs ] [ Por Bruno Dulcetti ] Comentários 14 Comentários |

    Categorias: Globo.com,Pessoais,Tecnologia,Webstandards

    » Campus Party rolando até de madrugada

    Pessoal que está acompanhando o Campus Party está aproveitando até o máximo, tudo que se pode aproveitar, o máximo de tempo. Agora, umas 04h, pessoal começou a jogar Counter Strike entre rede. Sucesso total. Tudo que eu precisava… Mas a merda eh que eu preciso tirar uma soneca, dar aquela cochilada, só para aproveitar, decentemente, o dia de amanha, senão ferrou.

    To indo agora, e o pessoal vai me dando razão para partir e tal.

    Amanha tem o filme que terei que filmar e talz, por isso eu acho que eh uma boa dar uma cochilada, senaum vai ser meio bizarro, apesar de naum rolar praticamente nada…

    Finalizando…

    Fui que fui, encontro vocês lá.

    [ 13/fev/2008 às 6:01hrs ] [ Por Bruno Dulcetti ] Comentários 1 Comentário |

    Categorias: Webstandards

    » Campus Party – Primeiro dia efetivo

    Falae galera. Dulcetti na área e no Campus Party. E é meu primeiro dia efetivo no evento, pois ontem tivemos problemas durante o caminho até São Paulo.

    E o que que tá rolando ae Dulça?

    Bastante coisa. Hoje o Videolog apresentou o concurso que montou para a criação de um plugin/widget. O prêmio para o vencedor é uma TV LCD 22″, um prêmio e tanto para os desenvolvedores produzirem algo relativamente fácil para eles.

    No que se baseia esse concurso Dulça?

    O Videolog abrirá a sua API, o que é uma notícia e tanto para os desenvolvedores. A data prevista ainda não está declarada, mas estamos vendo a possibilidade de isto acontecer. Com isso, os desenvolvedores poderão criar vários aplicativos, interações com o portal, enriquecendo ainda mais o próprio.

    Rolou mais alguma coisa de interessante Bruno?

    Várias palestras em todas as áreas. Teve uma pequena (re)apresentação daquele robozinho simpático que responde as perguntas das pessoas, mas somente em inglês. Mas até que ele é bonitinho, simpatico e responde direitinho as perguntas.

    E logicamente que esse foi o principal ícone do evento, pelo menos até agora. Infelizmente não pude ver o Ministro Gilberto Gil falando asneira por aqui no evento, mas tah valendo.

    E a comunidade blogueira Dulça?

    Está fazendo sucesso e comparecendo com toda força no evento. Estou revendo vários camaradas blogueiros que conheci nos blogcamps da vida, etc.

    Que legal Brunaum. Teve algo especial sobre blogs?

    Teve sim. A blogueira do flickr compareceu, vai fazer uma palestra pra imprensa amanhã, mas especialmente pros blogueiros, ela ficou batendo um papo, em inglês e talz. Tudo isso nos puffs do flickr, que está com um stand sucesso total, com umas meninas espetaculares.

    De resto, a galera blogando direto e postando no twitter, logicamente.

    Ah, vale lembrar também o conhecimento do blogueiro Henrique Costa Pereira, do Blog Revolução etc, onde tiramos fotos, zoamos um bocado e batemos um papo rápido. Gente boa o rapaz, diferente do que eu até tinha pensado que ele fosse. Amanhã e outros dias iremos bater um papo legal sobre a área de atuação, já que o meu blog foi lançado praticamente na mesma época que o dele. A única diferença é que ele tem só mais d 10x mais de assinantes no feedburner… uahuauhuahuahuua… Mas tah valendo, sem problemas. Eu chego lá 😀

    Os Barcamps da vida…

    Teve Barcamp também. Mas eu não tenho muito saco de participar mais disso não. Os assuntos são muito repetitivos, sempre monetização, posts patrocinados, entre outras coisas já abordadas nos Blogcamps da vida. Mas talvez tenha sido proveitoso para o pessoal que monetiza o seu blog né.

    E os stands Dulcetti? Estão legais?

    Estão muito bons. O primeiro andar está cheio de coisas legais, stands com games, simuladores, até stand da marinha do Brasil tem aqui, com algumas tecnologias utilizadas por eles, exército e aeronáutica.

    O stand da Microsoft também está bem bacana, bem estruturado, apesar de achar a localização meio desfavorável, mas tá valendo. Tem um stand da Caixa Econômica Federal, coisa que fiquei revoltado, pois não tem do Itaú, já que todos dizem que existe em todos os lugares do mundo né, mas tá blz.

    O stand de massagem está sucesso, pena que a fila para as massagens, etc, estão meio longas, mas vamos ver se consigo fazer isso até o final do evento.

    Por enquanto o melhor é o do Flickr, que está com ótimas mulheres, idéias legais e iMacs sensacionais. Jogos para ganhar contas prós para o site, e eu consegui a minha :D, fantasias para você tirar fotos para eles postarem no site e tudo mais. Estão de parabéns na minha opinião.

    A internet…

    O que eu achei que pecou um pouco foi a internet. Pelo menos a wireless, porque quando eu saía, para ver algo, alguma palestra, o macbook caía e eu ficava completamente revoltado, mas tá valendo né, fazer o que. Tinha que me contentar com a conexão a cabo. Mas pelo menos essa estava de bom tamanho, já que o link é de 5GB.

    E de resto Brunaum?

    Bom, de resto foi o almoço, que foi sucesso total e me manteve aceso e firme até agora e a missão foi cumprida.

    Finalizando…

    Amanhã tem mais evento e aqui finzalizo meu primeiro post decente e oficial sobre o Campus Party. Aquele abraço.

    às 0:59hrs ] [ Por Bruno Dulcetti ] Comentários 1 Comentário |

    Categorias: 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

    » Hover avançado com bordas em imagens

    Falae pessoal. Parece até mentira, mas estou aqui novamente, retornando aos meus tutoriais mirabolantes, fascinantes, geniais e extremamente úteis para todos.

    O assunto dessa vez é o mesmo que o tutorial anterior, que falei sobre borda interna em imagens com link. Mostrarei um efeito em links, com bordas, em imagens 😀

    E como não poderia deixar de ser, é um efeito que a equipe aqui da Globo.com pediu pro Vinicius, só que ele veio perguntar pra mim se era possível. E como nada é impossível para Mr. Dulcetti. Lá fui eu implementar o efeito. E como não poderia deixar de ser, funcionou. E o melhor, CROOOOOOOOOOSSBROWSER!!!!! Sensacional, sensacional. 😀

    Mas de novo bordas em imagens Bruno?

    Sim. De novo. Mas relaxem, é um efeito diferente do que eu fiz para o efeito de borda interna dos sites da Globo.com, e que eu creio que muitos já quiseram fazer e não conseguiram, etc.

    É um efeito normal, que poderia ser feito normalmente, como eu mostro na figura abaixo:

    Print do efeito errado

    Um efeito de hover na imagem, onde existe a troca de cor da borda do link. Sim, cor da borda do link e não da imagem. O IE infelizmente não aceita todos efeitos em elemento dentro do link no hover do próprio. Mas lógico que isso você sabia (assim espero).

    Ta blz Dulcetti. Mas o tutorial é sobre esse efeito ae?

    Quase. É o mesmo efeito, mudança de cor na borda do link e talz. Maaaaaas, a diferença é que não existe esta borda duplicada entre as fotos. Percebam que a largura é de 5px para todos os links, mas como ficam um do lado do outro, entre eles ficam o dobro, ou seja, 10px de borda.

    Print dos tamanhos errados

    Poréeeeem, o problema é que no hover eu só consigo pintar a borda de um link, fazendo com que continue preta, a borda do próximo link. Veja o exemplo errado.

    O problema disso tudo, é que eu não consigo mudar a cor da borda de um link, seja ele próximo ou anterior. Infelizmente não temos essa liberdade. Com isso, tínhamos esse problema e o pessoal não queria isso.

    Resumindo, eles queriam o efeito abaixo:

    Print do efeito correto

    Perceberam que não existe duplicação de borda entre os links? Fazer isso é mole, se não fosse a troca de cor das bordas. Bastava setar borda superior e esquerda na <ul> e inferior e direita na <li>.

    Mas como nem tudo são flores né meu povo, lá foi o Dulcetti aqui resolver essa pemba.

    Vale ressaltar também, que a borda é colorida no hover, mas a borda preta em cima some, “invadindo” a <li> de cima.

    Beleza Bruno. Começa logo então…

    Ok, ok. Vamos dar início ao efeito. Vamos primeiro ao HTML:

    <ul>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
    </ul>
    

    Um código extremamente complicado, difícil de ser entendido, complexo, mas creio que você seja safo para entender sem que o Dulcetti aqui explique ok?

    Um bando de <li> com link dentro, com imagem dentro, dentro de uma <ul>. É basicamente isso.

    Agora vamos a parte maaaaais complicada, pra variar…

    Implementando o CSS do efeito…

    Sim. O CSS é a parte mais chatinha de fazer e ser entendida. Eu sempre acho que é a parte mais tenebrosa para um desenvolvedor web.

    Vamos ao código?

    img {border:0;}
    ul {background-color:#000;margin:0;padding:5px 0 0 5px;width:180px;}
    ul:after {clear:both;content:".";display:block;height:0;visibility:hidden;}
    ul li {border-bottom:5px solid #000;border-right:5px solid #000;float:left;height:40px;width:40px;}

    Nada de muito complicado:

    • Retiramos a borda das imagens, isso porque quando ela recebe link, fica aquela borda azul linda em volta da imagem;
    • Depois colocamos o background da lista, zerando sua margem, colocamos um padding de 5px em volta da ul e finalizando com uma largura de 180px;
    • Essa técnica do after serve para os browsers, isso exclui o IE. Ela serve para quebrar o float de um elemento dentro do bloco, nesse caso as li’s
    • Adicionei borda na base e na lateral direita da li fechando o quadrante, float para ir pra esquerda, altura e largura de 40px;

    De início temos este resultado.

    Legal Bruno, mas cadê o hover?

    Calmae, muita calma nessa hora. Já deu pra ver o início do resultado, do nosso objetivo. Temos já a estrutura toda montada, li’s arrumadas e sem bug.

    Agora falta o principal… O hover.

    O tão falado e temido hover…

    Como já sabemos, o nosso grande amigo e preferido browser, vulgo IE, não aceita a pseudo-classe :hover.

    Okay, ele aceita, mas somente em links. Mas admita fã da Microsoft, esse é um dos maiores pecados do IE. Francamente…

    O mais correto era colocar a borda na imagem, como eu tinha dito, mas como citei, o hover no link não deixaria colocar borda na imagem. Portanto, tive que trabalhar em cima do link mesmo.

    Mas isso não é problema para Mr. Dulcetti.

    Dulcetti… Ta bom, anda logo com isso…

    Ok. Empolguei-me. Desculpe. Então vamos ao restante do CSS. Pasmem, são apenas mais duas linhas de código:

    ul li a, ul li a img {display:block;}
    ul li a:hover {border:5px solid #D2251C;margin:-5px 0 0 -5px;position:absolute;}

    Vamos a explicação:

    • A primeira linha é completamente difícil e complicada. Quase ninguém utilizou esta propriedade no CSS. Ela transforma o(s) elemento(s) em bloco(s). No nosso caso, link e imagem dentro do link. Precisamos disso para que a imagem não coloque akela margem automática quando não é bloco e para que o link funcione corretamente no nosso caso;
    • Agora a grande sacada. Nessa segunda linha, colocamos uma borda com cor vermelha e 5px de espessura. Damos uma margem negativa superior e a esquerda de 5px e colocamos o link com position absolute

    Vemos o resultado do efeito finalizado agora.

    Legal Bruno. Mas explica melhor…

    Seguinte: o link ficando com a borda vermelha de 5px, o que iria acontecer? O link, como bloco e com borda, iria acabar ficando dentro da “borda”, que na verdade é o padding preto da <ul>, formando uma borda dupla. Sendo que uma preta e a de dentro vermelha.

    Não queremos esse efeito. E para conseguirmos isso, colocamos a margem negativa do mesmo valor da borda, ou seja, 5px, fazendo com que o link ficasse colado na <ul>.

    Mas logicamente que a margem, somente, não era bastante para finalizarmos. No IE fica um samba do crioulo doido, enquanto no Firefox não pintava a borda da esquerda, por causa da borda da <li>, que é preta.

    Para resolvermos isso, colocamos o que? O temido position:absolute. Mas como as nossas <li>’s já possuem largura e altura, então não temos problema com isso, pq o tamanho ficará fixo, sem ser mexido.

    Resumindo…

    É isso. Um efeito simples, porém atrativo e que já recebi algumas dúvidas sobre como fazer e não vi nenhuma resposta, nenhum exemplo de como fazer isso.

    E como o código é bem curto, o efeito é simples e rápido, não precisou ficar escrevendo testamentos, etc. Tudo bem que eu poderia fazer outros exemplos, com bugs, etc, mas eu tenho certeza que eu iria terminar só ano que vem e ficaria gigantesco. Então tá bom assim mesmo e está aí. 😀

    Espero que gostem e que tenha sido útil. Aquele abraço e beijo na alcatra.

    [BBL]artigos, css, design, dicas, efeitos, web-standards, webstandards, xhtml[/BBL]

    [ 03/jan/2008 às 15:29hrs ] [ Por Bruno Dulcetti ] Comentários 28 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Portal Globo.com lança sua nova home

    Imagem da Nova Home da Globo.com

    É com grande prazer que venho informar à vocês, que está no ar a Nova Home da Globo.com.

    Totalmente mais leve, pensando no usuário, sem imagens desnecessárias. Agora grande parte, as mais importantes, são feitas com texto.

    Mais espaço.

    Agora a home está com o espaço relativo à resolução 1024x768px, tendo mais espaço para o conteúdo, espaço para a “informação respirar”.

    Tudo isso foi pesquisado, com testes de usabilidade com usuários, entrevistas, entre outras coisas. Eu pude acompanhar alguns testes de usabilidade, é uma experiência bem interessante. Sempre que puder veja um, vale a pena.

    Novidades

    Fora que o plantão de notícias ganha mais destaque na home, fora o espaço para as promoções, etc. O usuário também terá acesso direto à algumas rádios online da Globo, horóscopo, cotações do dólar, programação da TV Globo, entre outras coisas.

    Presente também, a nuvem de tags, com as palavras mais buscadas no Portal, com o peso equivalente para as mais buscadas e menos buscadas. força também aos Blogs da Globo, possuindo um box só para as últimas postagens dos principais blogs.

    Ganham destaque também outras ferramentas e aplicativos, como blogs de colunistas, o fotolog 8P e o Globo Vídeo Chat, além do ranking dos programas mais acessados no site Baixatudo.

    Arquitetura e Organização Visual

    A organização das informações continuam em evidência, com as informações de notícias em vermelho, entretenimento em laranja e esportes em verde, ficando claro e fácil o entendimento e identificação de cada tipo de informação.

    Tudo está com bastante espaço, para o conteúdo respirar, nenhuma informação sufocada, nada muito perto, tudo num espaço relativamente razoável e pensado milimétricamente (ou pixélicamente?).

    Agora está mais fácil de identificar o que é link e o que é texto. Praticamente tudo que for cinza, eh texto normal e o que tiver cor, é um link.

    Um destaque também para a barra superior, o famoso Topo :D. Houve uma mudança bem radical nessa área do site, que é uma das principais, pois é onde o usuário põe o olho de primeira. Em cada área específica do site, a opção ficará realçada, com uma cor mais clara e com uma altura maior, mostrando ao usuário em qual seção, onde ele está.

    Acessibilidade

    Boa parte do projeto foi pensado na acessilibidade. Testamos tudo sem suporte à imagens, sem CSS habilitado, javascript desabilitado, etc. Tudo para que o site fique mais acessível, não só para pessoas com deficiência, mais para dispositivos móveis também.

    Em breve, haverá melhorias na parte do CSS de impressão, que ainda não está 100%.

    Participação

    Implementei boa parte do HTML, somente a página de Todos os sites e alguns boxes da home que acabei não participando por ter torcido o tornozelo e ficando uma semana fora do trabalho, com isso, outro rapaz, meu camarada Kenji, acabou pegando essa parte.

    Toda parte de HTML, CSS e um pouco de Javascript, concluído, verificado, validado, refeito, refeito novamente. Foi um trabalho árduo, que durou uns dois meses para ser concluído.

    Foi criado um documento de Boas Práticas de Implementação, tanto de CSS, HTML e JS, tudo publicado no wiki interno da empresa, para todos estarem cientes de cada alteração e informação adicionada.

    Fiquei bem feliz quando soube que seria o responsável na implementação e estruturação da Nova Home.

    Finalizando

    Alguns não gostaram de cara, está mais “pobre” visualmente falando, mas não acho tanta coisa. Hoje em dia o design não é tão levado em conta. Hoje, a informação, o conteúdo, estruturação, estão em alta, fora a leveza, rapidez no carregamento, entre outras coisas.

    Mas provavelmente, com o tempo e o costume, os usuários começarão a se acostumar com a nova cara.

    Eu gostei. E você?

    Aquele abraço.

    [UPDATE]

    Vou postar aqui links que estão falando sobre o lançamento da nova home:

    E só pra constar, eu só implementei o código, não fiz o layout do Portal não ;).

    [/UPDATE]

    [BBL]1024×768, acessibilidade, bbb, bruno-dulcetti, criações, css, desafio, desenvolvimento, ferramentas, globo, globo.com, html, internet, layout, pessoais, tecnologia, usabilidade, xhtml[/BBL]

    [ 30/ago/2007 às 2:28hrs ] [ Por Bruno Dulcetti ] Comentários 49 Comentários |

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

    « Página Anterior | 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