Uma vez programando errado – Sempre dará errado

Postado por: Pedro Rogério em
  • 21 jul
  • 3

Manter o seu código organizado e bem estruturado não é luxo de nenhum programador, pelo contrário, não importa a linguagem em que você está programando, seja ela HTML, CSS, ASP, JavaScript, PHP, manter um código limpo e claro é essencial para uma eventual manutenção e compreensão, tanto sua como de terceiros. Principalmente se você trabalha em uma agência, onde existe toda uma equipe de desenvolvimento, manter o código limpo é primordial para o desenrolar dos projetos.

Peguemos como exemplo a área de CSS, onde temos que definir nomes para várias classes, devemos procurar dar nomes adequados, seja para os arquivos, para as classes ou para IDs. Pra você ver como pode haver uma confusão, você fez aquele site lindo para o seu cliente, código o mais semântico possível, e lá você tem um menu que fica do lado direito, logicamente, você quer colocar o nome de sua referência como menudireita, mas o cliente lhe liga pedindo que mudou de idéia, quer o menu no topo do site, você tem uma div chamada menudireita que fica no topo do site, entendeu agora a extensão do problema, você agora teria que mexer não só no CSS, mas também no HTML, não seria mais fácil, se você tiver um só menu em seu site, chamá-lo simplesmente de menu? Por isso é que devemos usar nomes simples e diretos para tudo, referentes as suas funções, por que programando uma vez errado, sempre dará errado!

Utilizando atributos alt equivalente as imagens

Postado por: Pedro Rogério em
  • 20 jul
  • 1

Em um artigo anterior, eu falei como fazer o uso correto da tag alt em imagens, como vocês podem ver, é rotineiro os usuários usarem a tag alt como tooltip, mas essa não é a verdadeira função dessa tag, sua função é proporcionar um texto altenativo caso as imagens não sejam carregadas, por exemplo, os leitores de tela, eles lêem o texto do atributo para o usuário. Um outro exemplo é o Google Image Searchs, ele não faz o uso das tags meta para indexar as imagens em seu banco, ele também faz o uso das tags alt, por isso a importância de se fornecer um texto que tenha conivência com as imagens.

Continuar lendo »

Guia CSS – 5ª parte: Divs

Postado por: Pedro Rogério em
  • 14 jul
  • 0

As Divs(divisões), são elementos em níveis de bloco do (x)HTML usados para definir seções de um arquivo (x)HTML. Uma divisão pode conter todas as peças que compõem sua página, incluíndo divisões adicionais, imagens, texto.

Por exemplo, você define uma divisão dentro de um arquivo (x)HTML colocando o seguinte código dentro das tags <body></body>:


<div>
Aqui vai o conteúdo do site
</div>

E na hora de aplicar algum estilo você deve prosseguir da seguinte forma, o HTML fica assim:

Continuar lendo »

Guia CSS – 4ª parte: Utilizando ids

Postado por: Pedro Rogério em
  • 14 jul
  • 2

Os seletores de ID são semelhantes as classes, mas há uma diferença, eles só podem seu usados uma única vez em uma página (x)HTML. Seu uso geralmente é denominado para elementos de disposição da página, que geralmente são usados uma única vez, e os seletores de classe ficam a cargo de estilizar o resto de nossa página.

Vamos pegar como exemplo uma div que contém o nosso site:


<div id="container">
Aqui vai o conteúdo do site
</div>

Continuar lendo »

Do Photoshop ao CSS em 30 segundos

Postado por: Pedro Rogério em
  • 14 jul
  • 8

Isso mesmo que você está lendo, você desenha aquele layout maravilhoso no Photoshop, manda editar no Image Ready, faz os recortes e ainda leva um CSS prontinho de brinde, o código gerado não é dos melhores, mas achei a idéia interessante e estou compartilhando aqui com vocês. O site é o seguinte:

How to convert your photoshop document to a CSS in less than 30 seconds.

Removendo as margens da página

Postado por: Pedro Rogério em
  • 14 jul
  • 5

Muitas pessoas, quando estão iniciando em desenvolvimento para a Web, encontram algumas dificuldades para problemas simples, e um deles é como remover a margem de nossa página, ou seja, queremos que nosso documento fique sem aquelas margens indesejadas em nossos documentos. Para vocês entenderem melhor, veja uma screenshot do problema abaixo:

Screenshot da página com margem

Como você pode notar existe uma área em branco entre a área do documento e a janela do browser, mas nós não queremos que nosso documento fique assim. A solução é a seguinte, em nosso CSS, devemos definir para o body que a margem seja 0:


<style  type="text/css">
body {
   margin:0;
}
</style>

Agora veja como ficaria o documento:

Screenshot da página sem margem

Viram como é fácil, isso diz ao browser que não deve haver nenhum espaço entre elementos estruturais e a janela do browser.

Páginas:«1...1718192021222324»