Jump to content

Archived

This topic is now archived and is closed to further replies.

micox

Desafio Webstandards 3

Recommended Posts

- 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.

Share this post


Link to post
Share on other sites

- 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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!!!!

Share this post


Link to post
Share on other sites

vlw gio!

uhuhuhuhuh.. show!!!

[]s

Vcs 3 mereceram cara!!!

Ótimo trabalho!!!

 

PARABÉNS MESMO!!!

 

[]'s

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

É 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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.