Desafio Webstandards 3

[micox 2]

- Com relação as imagens lá de cima.. como q eu ia por width:100%???? pra fazer o efeitinho ateh o fim degrade, senão pondo eles no layout?- Na direita do topo, eu quis melhorar aqueles links e akele buscar, e input, visualmente! foi isso que me baixou a nota? querer fazer um pouco mais organizado?

Ih rafael, to meio viajado, não entendi não. hehe. Rolava de voce indicar o ítem meu a que você se refere, assim fica mais fácil de lembrar o porque da minha avaliação e te explicar. heheValeus, té mais.

[micox 2]

- Com relação as imagens lá de cima.. como q eu ia por width:100%???? pra fazer o efeitinho ateh o fim degrade, senão pondo eles no layout?

Você se refere aos degradês azuis? Caso sim, veja a solução do chess. Ficou muito boa.

[micox 2]

Vi o que o Chess fez, mas ele fez com uma lógica diferente da minha, ele somente inseriu uma imagem degrade no CSS do topo,mantendo sempre ela intacta, diminuindo e aumentando o browser...

Pra voce manter ela intacta é só colocar uma imagem de 1100px como background ALINHADO À DIREITA (se quiser que a parte azul fique intacta) ou alinhado à esquerda se quiser que a parte branca fique intacta.Assim, aumentando ou diminuindo o browser, a imagem continuará lá.Se você simplesmente colocar uma imagem de width 100% ocorrerá desrespeito à separação entre conteúdo e apresentação visual:- quem tem um navegador de texto não se interessa em saber daquela imagem- Pra buscadores de imagem (google) aquele background não significa nada.- Quem tiver uma conexão limitada (como um celular) e não carrega CSS, perderá muitos kbytes baixando uma imagem que não serve pra nada pra ele,- Uma das vantagens do CSS é separar o layout do conteúdo x(ht)ml em um arquivo externo que pode ser mais facilmente alterado.- etc, etc (todas as desvantagens que a mistura entre conteúdo e apresentação podem trazer)Bom, faça o seguinte: NO firefox vá em Exibir>Estilo da página e marque "nenhum estilo". Voce acha que as imagens estão certas ali?Faça isto no dos outros participantes e voce verá se a separação CVC ficou boa em cada um dos outros participantes.Acabou que esta decisão sua de usar imagens ao invés de background, quebrou seu layout-topo quando visualizado no 800x600.Uma dica pra desenvolvimento tableless:1 - planeje seu CONTEÚDO (html) sem se preocupar nem um pouco com o visual. Aplique divisões lógicas, semântica, etc. porém esqueça que o visual existe.2 - Faça sua viagem no photoshop ou fireworks3 - Através de CSS tente aplicar seu visual no seu conteúdo.4 - Caso seja extremamente necessário alterar alguma coisa no html devido ao visual, pode fazer, contanto que NÃO PREJUDIQUE o conteúdo.hehe, algum dia faço um tuto sobre isso.

[Giovani 104]

Bom pessoal, vou postar minhas notas!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Vou dividir todos os resultados por tópicos.

Antes dos resultados quero dizer que todos estão de parabéns!!

Mesmo, o trabalho de vcs ficou bom!! Tem muita gente ai no mercado que não sabe o que vcs sabem!!!

 

PARABÉNS!!!

 

Abraços a todos!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Giovani 104]

Santiago

 

Estar visualmente próximo do site original --> 7,0

Estar em conformidade com as Webstandards --> 5,0

Organização, comentários, identação e facilidade de compreensão do código --> 9,0

Escolha correta do doctype --> 5,0

Separação entre conteúdo ((X)HTML), visual (CSS) e comportamento (JS). --> 7,0

Semântica, acessibilidade, usabilidade. --> 7,0

 

 

Visualização

 

--> Opera 9

1280x800 – 6,0

No título “Get the Fabrikam Fine Furniture Sample Reference App.“ o fundo está centralizado, diferente do original.

O link “Recently Posted on MSDN” está indo para cima do desenho do título

 

1024x768 – 6,0

O link “Recently Posted on MSDN” está indo para cima do desenho do título

 

800x600 – 5,0

O rodapé subiu, ficou bem bagunçado.

 

--> Firefox 1.5

1280x800 – 8,0

No título “Get the Fabrikam Fine Furniture Sample Reference App.“ o fundo está centralizado, diferente do original.

 

1024x768 – 8,0

 

800x600 – 5,0

O visual fica meio bagunçado.

 

 

--> IE 6

1280x800 – 8,0

No título “Get the Fabrikam Fine Furniture Sample Reference App.“ o fundo está centralizado, diferente do original.

 

1024x768 – 8,0

 

800x600 – 5,0

A coluna do “Featured on MSDN” vai lá pra baixo.

 

 

--> Flock – Beta 1 (v0,7)

1280x800 – 7,0

No título “Get the Fabrikam Fine Furniture Sample Reference App.“ o fundo está centralizado, diferente do original.

 

1024x768 – 8,0

 

800x600 – 5,0

Tão bagunçado quanto o Firefox.

 

------------------------------------------------------------------------------------------------------------------------

Nota Final --> 6,0

[Giovani 104]

Rafael

 

Estar visualmente próximo do site original --> 8,0

Estar em conformidade com as Webstandards --> 9,0

Organização, comentários, identação e facilidade de compreensão do código --> 7,0

Escolha correta do doctype --> 6,0

Separação entre conteúdo ((X)HTML), visual (CSS) e comportamento (JS). --> 7,0

Semântica, acessibilidade, usabilidade. --> 7,0

 

 

Visualização

 

--> Opera 9

1280x800 – 7,0

 

1024x768 – 7,0

 

800x600 – 5,0

A coluna da direita vai lá pra baixo.

O logotipo da MSDN fica muito em cima.

 

--> Firefox 1.5

1280x800 – 8,0

 

1024x768 – 8,0

 

800x600 – 5,0

A coluna da direita vai lá pra baixo.

O logotipo da MSDN fica muito em cima.

 

--> IE 6

1280x800 – 7,0

 

1024x768 – 7,0

 

800x600 – 5,0

A coluna da direita vai lá pra baixo.

O logotipo da MSDN fica muito em cima.

 

--> Flock – Beta 1 (v0,7)

1280x800 – 8,0

 

1024x768 – 8,0

 

800x600 – 5,0

A coluna da direita vai lá pra baixo.

O logotipo da MSDN fica muito em cima.

 

-------------------------------------------------------------------------------------------------------------

Nota Final --> 7,0

[Santiago 0]

Vlw pessoal!To esperando pelas próximas avaliações!

[micox 2]

ta ta micox.. tu eh f*** hehehehehehe,Tu chega ser chato de tao injuado!

haehaheh ae sem grilo, fui muito criterioso mesmo. Mas vou te dizer a verdade, só não te dei uma nota maior por causa do visual que não encaixou no meu 800x600zim aqui. :(Tá faltando eu fazer o do Santiago. hehe, calmae povo, to quase sendo jubilado, deixa eu terminar meu trabalho de conclusão da facul hhehee

[Giovani 104]

TheChessMan

 

Estar visualmente próximo do site original --> 9,0

Estar em conformidade com as Webstandards --> 10,0

Organização, comentários, identação e facilidade de compreensão do código --> 9,0

Escolha correta do doctype --> 10,0

Separação entre conteúdo ((X)HTML), visual (CSS) e comportamento (JS). --> 9,0

Semântica, acessibilidade, usabilidade. --> 9,0

 

Visualização

--> Opera 9

1280x800 – 9,0

As figuras do destaque ficaram um pouco abaixo em relação a imagem.

 

1024x768 – 9,0

 

800x600 – 8,0

O “Recently Posted on MSDN” pulou uma linha, ficou um pouco fora.

 

Firefox 1.5

1280x800 – 9,0

O background do rodape ficou um pouco fora no final.

 

1024x768 – 10

 

800x600 – 7,0

No destaque “Improve Your Communication Infrastructure with Windows Vista” a palavra “technologies” ficou embaixo do logo do Windows.

 

IE 6

1280x800 – 9,0

O background do rodape ficou um pouco fora no final.

 

1024x768 – 10

 

800x600 – 7,0

No espaço destaques, as figuras estão acima do texto.

 

Flock – Beta 1 (v0,7)

1280x800 – 9,0

O background do rodape ficou um pouco fora no final.

 

1024x768 – 10,0

 

800x600 – 7,0

No destaque “Improve Your Communication Infrastructure with Windows Vista” a palavra “technologies” ficou embaixo do logo do Windows.

O “Recently Posted on MSDN” pulou uma linha, ficou um pouco fora.

 

---------------------------------------------------------------------------------------------------------------------

Nota Final --> 9,0

 

Obs.: Os comentários do seu código estão show de bola, ótimos!!! É uma pena que a maioria de desenvolvedores/programadores não dê muita importância para isso!!!!

[Giovani 104]

vlw gio!

uhuhuhuhuh.. show!!!

[]s

Vcs 3 mereceram cara!!!

Ótimo trabalho!!!

 

PARABÉNS MESMO!!!

 

[]'s

[Giovani 104]

Ainda mais que aprendemos neh.. diariamente..

Isso é o que vale para TODOS nós!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Santiago 0]

Realmente, depois desse desafio eu estou programando diferente!Eu evolui bastante!

[pa_bruno 0]

caramba... avaliação dos caras toda completa... to ferrado pra conseguir fazer isso no trabalho...

 

sei q vcs estão querendo me porrar, malz mesmo...

 

mas dou os parabéns pro chess... Pqp o cara pensou até no tabindex... chegando até mais de 80... uahuahuahuah... mto bom...

 

e foi o único a lembrar dos conditional comments... ganhou ponto nessa... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

avaliação final eu posto aki... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[TheChessMan 0]

Os trabalhos foram entregues dia 10 de julho, estamos no dia 24 de agosto, quase 2 meses depois e nada de terminar isso ake... ¬¬.. vo te contar viu..

[TheChessMan 0]

TOdas as avaliações do pa_bruno e do Hunter e uma das avaliações do micox

[Santiago 0]

É mas até agora nada!Tudo bem que os caras estão ocupados, mas...Da proxima vez deveria ter um limite para postar os trabalhos e outro para postar as avaliações! rsrsr

[camilo.oliveira 0]

Acho que seria legal se eles desenvolvessem e postassem isso num tópico.Num primeiro momento, esses tópicos ficariam ocultos e depois da divulgação das notas fossem abertos para que pudéssemos entender o desenvolvimento que aconteceu.Muito legal esse tipo de desafio, num futuro próximo gostaria de participar.