| Maior acervo de vídeo aulas da web

Não consegue visualizar a vídeo aula?

CSS+XHTML 1.0 STRICT+VALIDAÇÃO – Parte 2

Fala Pessoas! Nessa segunda parte, vou ensinar como inserir um background no layout, além de editar o topo e o menu do site, seguindo os padrões Web, além de uma dica sobre como trabalhar com porcentagem, ajudando e muito em uma mudança de largura posterior do site. Você desenvolve ele para uma resolução, e se houver a necessidade de mudá-la, resolve-se o problema alterando apenas uma linha! Abraços e divirtam-se! Até a próxima parte!

Você gostou dessa Vídeo Aula, então compartilhe com seus amigos

Artigos Relacionados

Comentários

  • Denildo

    Ia comentar a parte 1 e já estou aqui na parte 2 uhu!!

  • Marcio Vinicius

    Opa, outra excelente Video Aula! ^^ Já estou no aguardo da terceira, e gostei da dica da porcentagem. Muito útil. Abraços e parabéns

  • http://www.2adminrio.freevar.com Saulo Brito

    Todas suas aulas são muito boas !! Estou aguardando a 3 parte …
    Fera, tambem tenho uma dúvida, no caso do Topo voce usou uma imagem completa, isso não ficaria muito pesado ? como eu faria por css pra colocar uma imagem fateada no Topo.
    Ex: essa sua imagem do topo cortada em 4 pedaços, essa dúvida tenho a bastante tempo.
    Sou novo na area e resolvi um problema desses jogando as imagens dentro da div la no index.html + não sei se está certo.

    Tira essa dúvida pra mim ae .. Valeu ! Abraços

  • Sergio Araujo

    Fala aew Tuco blz…

    Na primeira video excelente ja tinha feito meu comentario, agora aki na segunda fantastica parabens.

    Agora boiei quando vc comenta dos 100%, não entendi o tal de 984px que vc comenta daparadar uma clareada…

    Não seria ideal colocar o Site em 100% para que ele se ajeite de acordo com a resolução do Cliente?

    Obs.: Consegui acompanhar a primeira video no CS4.

    Abraços no aguardo da proxima video.

  • Tuco

    Vamos lá:

    @Denildo: É isso aí rapá!! rs

    @Marcio Vinicius: Valeu velho! Aguarde que semana que vem, se Deus quiser e o tempo me permitir, faço a terceira parte! rs

    @Saulo: Fala Compadre! Sobre a imagem, isso é relativo! Eu joguei uma imagem em jpg, e portanto, o peso dela é insignificante. E outra, estou carrendo pelo CSS e não pelo HTML…..só nisso, já economiza algum tempo no navegador.

    Esse é um assunto complicado para debater, pois eu posso salvar uma imagem em tamanho absurdo, e baixando a qualidade da mesma, ela pode chegar a ter uns 20k. De repente, se não houver um tratamento na imagem, uma imagem de 760×150 pode chegar a 2 megas. Aí sim, ficaria pesado para carregar mesmo fatiando a bixona! Na terceira parte, a gente vai mexer de novo no Fireworks e vou dar uns toques de como ver quanto tempo ela demoraria para ser carregada em uma conexão discada ok?

    @Sergio: Fala meu amigo! Seguinte…o lance da porcentagem, é para prever uma futura mudança no layout. Coloquei-o como 984px, e não 1024px para uma resolução nesse “calibre”, pois a barra de rolagem lateral costuma abocanhar 40px do nosso monitor. Então para ficar centralizado, é necessário sempre fazer a conta…Qual o tamanho da resolução para desenvolvimento -(menos) 40px da barra de rolagem.

    Portanto, width de 984px ao invés de 1024px.

    Quanto ao 100%, é o que vale meus 984px. Eles seriam meus 100%. Se eu quiser fazer duas colunas centrais, ocupando cada uma delas, metade do meu layout, seriam de 50% cada (492px cada coluna)…

    Ficou mais claro?

    Abraços a todos !

  • http://tutorial-city.net Tutorial City

    @Saulo
    Quanto mais imagens, pior. A ideia é usar o mínimo possível de imagens. Nesse tutorial dava pra otimizar uma barbaridade nesse quesito. Entre usar 1 imagem ou 4 imagens fatiadas, use sempre o mínimo 1. Faça uma pesquisa por CSS Sprites.

    @Tuco
    Carregar imagens pelo CSS não significa que vai pesar menos, na prática é rigorosamente a mesma coisa. Em sites pequenos é comum que 70% a 80% do tempo de carregamento seja devido aos arquivos de CSS, Javascript e imagens, então é fundamental que esses esses 3 últimos sejam otimizados ao máximo, principalmente Javascript e imagens.

    • http://www.videoaulasbrasil.com.br David CHC

      Mais uma ótima aula @Tuco, parabéns!

      Só para complementar o q @tutorial City falou, isso não se aplica a site pequeno, a parte de maior consumo é parte do “front-end”, em uma maneira tentar diminuir isso é reduzindo a requisição HTTP, q no caso é qualquer requisição “fora pagina”, como imagem, css, javascript, flash, etc. Então tecnicas com CSS sprite ( juntar varias imagens em uma só), colocar o javascript por ultimo ( o javascript bloqueia o download paralelo, isso na maioria dos navegadores, por tem q sempre colocar o CSS na frente do javascript, e se possivel colocá-lo no final da página, nesse caso não diminui a requisição, mas mostra o conteudo mais rápido para o usuário), ou juntar os arquivos CSS em um só, são algumas coisas q podem ser feitas para otimizar o site.

  • Tuco

    Fala @David e @Tutorial City!

    Pelo o que eu tenho estudado, é o seguinte:

    Se eu tenho, na primeira requisição de um site, um arquivo em HTML de 20bytes e um CSS de 40bytes, ele vai fazer o download dos dois. Em uma segunda requisição, ele carregaria somente os 20 do HTML pois o CSS está salvo no CACHE do navegador, e venhamos e convenhamos, é um tanto difícil você encontrar pessoas que pedem para limpar o histórico da navegação toda a vez que se fecham o navegador. Sei que isso pode comprometer algumas alterações realizadas na folha de estilo, mas não seria basicamente isso? Estou chamando a figura via CSS, e não HTML…se ela já se encontra em CACHE, como poderia ficar mais pesado ou difícil para download?

    • http://www.videoaulasbrasil.com.br David CHC

      @Tuco, essa é uma das vantagens do CSS, é relação ao cache, no caso que seria em relação a requisição HTTP, q seria solicitação de recursos externos da página, q faz a demora de carregar uma página (um dos motivos), isso no caso de otimização da página. Então chamar um imagem via html e ou css, ele terá essa requisição. Claro, se puder chamar via CSS é mais vantajoso devido ao cache, já q tudo é baixado pra maquina do usuário.

      Então no caso, pelo menos q tentei abordar, não sei se era esse ponto q o @Tutorial City queria chegar, era relação essa requisição HTTP, quando temos q otimizar o site. Tem alguns site q preferem colocar o CSS na mesma página, sem ser externo devido para diminui a requisição HTTP, nesse caso seria uma caso de estudo pra ver o q melhor se aplicaria em determina situação.

  • http://www.2adminrio.freevar.com Saulo Brito

    porque vocês 3 que sacam bastante de CSS não montam um super curso de CSS ?
    Já teriam um comprador ! EU e aposto que um monte de gente tambem compraria por ae ..
    Assim como os cursos do Felipe e todos os outros que estão a venda no Mx ..
    Eu estou fazendo minha carta agora e saindo do estagio de Infra .. to mudando de area por causa dos cursos daqui e ja estou desenvolvendo alguns sites ..

    Fika a dica! Um curso de CSS seria show !

    valeu! tenho um código aqui se pudessem dar uma olhada depois pra ver e comentar se ha algo pra fazer ficaria grato ..

    • http://www.videoaulasbrasil.com.br David CHC

      @Saulo, se não me engano o @Tutorial City está criando um curso ( me corrija se eu tiver errado Eduardo, rs).

      Da minha parte, eu sou muito receoso a criar um curso ( a palavra correta seria chato, rs), eu sou cheio de criterios, q confesso q atrapalha as vezes.

      Não sei se o @tuco pensa criar algo, como pode perceber , ele poderia criar algo, já q sua didatica é ótima.

      Mas é sempre uma ideia se pensar.

      Mais interessante das video aulas, q elas não acabam apenas nos videos, elas podem ser estender nos comentarios, com acrescimo de informações, opiniões ao contraria do autor, principalmente quando o assunto é algum conceito, já q cada um pode ter uma visão dos fatos diferente. E isso é legal, conseguimos ter novas informações, e sempre estamos aprendendo.

      Por isso é importante a participação de todos nos comentarios, com novas informações, o sugestões, ou mesmo só para falar q gostou, para o autor é importante, para pessoas q visitam tbm, e para gente q administrar o site tbm. Assim todos nós saimos ganhando. :D

  • Sergio Araujo

    Fala aew Tuco, blz…

    Agora sim compreendi melhor sua colocação, valeu pela information.

    Aguardo os novos videos para acompanhar o desfecho do mais um excelente aprendizado.

    Ahhhh… só como dica para quem quizer aprender mais em relação ao CSS não custa eu deixar aki informado:

    Site: http://www.maujor.com é um excelente lugar para conhecer mais o CSS.

    Abraços e parabens

  • Tuco

    Pessoas, gostei dos comentários!

    Acho que valeu para elucidar algumas dúvidas postadas por aqui, ou pelo menos, algum norte para que possamos estudar um pouco mais sobre tudo o que já foi dito!

    Legal esse canal! Bem proveitoso! rs

    Abraços a todos!

  • http://tutorial-city.net Tutorial City

    @David,@Tuco
    Tanto imagens em CSS quanto imagens em HTML são armazenadas em cache, sem distinção uma da outra. Quando se fala de armazenar o CSS em cache, isso quer dizer que o texto dentro do arquivo será armazenado, não o que ele requisitar. Por padrão o navegador salva tudo que pode em cache pra otimizar a performance. Antes de usar(ou não) os arquivos do cache ele analisa se existe uma versão mais recente, e o responsável por dar essa resposta a ele é o servidor, mas nem sempre ele acerta. Uma das 14 dicas de otimização do front-end(Steve Souders) é que você force o servidor a dizer que o arquivo nunca foi modificado. Pra mais detalhes dessa e das outras 13 dicas recomendo o livro High Performance Websites.

  • Tuco

    Valeu Eduardo!

    Vou procurar saber mais sobre esse livro!

    Abraços!


Hospedado por Hostnet - Hospedagem de sites

VAB - Todos os direitos reservados - 2008 / 2012

Developed by: MX Web Studio

Mais em Tableless (30 of 57 articles)