Pinceladas da Web

Ordem de declaração das propriedades em CSS

Postado por: Pedro Rogério em 9 de outubro de 2007

9 out
13

Até hoje não vi uma referência concreta sobre ordem de declaração de propriedades em css, mas toda regra de boas maneiras hoje em dia é válida, e dessa vez achei uma referência interessante que estarei compartilhando aqui com vocês, onde se supõe que a melhor forma de declarar as proriedades seria assim:

Comportamento

display
overflow
clear

Posicionamento

position
float
top, right, bottom, left

Tamanho

width
height

Margens e bordas

margin
padding
border

Texto

font
text
line-height

Fundos e Cores

background
color

Se você tem alguma outra ordem que gosta de seguir, mostre aí nos comentários.

CSS Tip: As 3 formas de inserir CSS em uma página web

Postado por: Pedro Rogério em 8 de outubro de 2007

8 out
9

Esse post visa atingir quem está iniciando em CSS e não sabe as formas possíveis de inserí-los em uma página.

Quem está iniciando no mundo dos WebStandards, mais precisamente em CSS, muitas vezes acaba se perdendo e não sabe da existência das 3 formas possíveis de se inserir CSS em uma página, algumas vezes por culpa do próprio desenvolvedor, que não tem interesse em buscar aprendizado, ou por culpa de algum editor WYSIWYG, e é aí onde os maiores problemas acontecem, pois o desenvolvedor perde o contato com o código e acaba virando desenvolvedor de um editor só.

1ª Forma: CSS diretamente nas tags HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>Seu título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
	<p style="color:#B000FF;">CSS dentro das tags HTML</p>
</body>
</html>

Continuar lendo »

CSS tip: ordem de declaração dos links

Postado por: Pedro Rogério em 5 de outubro de 2007

5 out
9

Já faz muito tempo que quero falar sobre isso aqui no blog, mas hoje, vendo os meus Feeds, acabei achando uma referência legal que me fez criar coragem e escrever sobre o assunto. Quando vamos declarar no CSS os links, por exemplo, a maioria das pessoas costuma deixar de uma forma toda desorganizada, até eu já fiz muito isso, mas a ordem correta de declaração dos links é essa:


a:link {}
a:visited {}
a:hover {}
a:active {}

Para não esquecer mais, basta lembrar dessa palavrinha: LoVe HAte.

72 Acrônimos que falam os Geeks

Postado por: Pedro Rogério em 4 de outubro de 2007

4 out
10

Adaptação do artigo original de: Anieto2K

Se a cada dia você fica perdido com cada palavra nova que aparece na internet, com esse guia, não vai acontecer mais esse tipo de coisa, agora você vai entender perfeitamente a língua dos geeks:

Linguagens de marcação e apresentação

CSS: Cascading Style Sheets – CSS é uma linguagem utilizada para modificar o aspecto das estruturas HTML.
DHTML: Dynamic HyperText Markup Language – É um termo utilizado para referir-se a junção de HTML + CSS + JavaScript.
HTML: HyperText Markup Language – É uma linguagem de marcação de tags que compõem todas as páginas web.
WML: Wireless Markup Language – WML é similar ao HTML, é baseado em XML e é orientado a dispositivos móveis.
XHTML: Extensible HyperText Markup Language – XHTML é um HTML ao qual se aplicam as regras do XML.
XML: Extensible Markup Language – XML é uma recomendação do W3C para gerar dados de uma forma melhor estruturada.

Continuar lendo »

30 Extensões Firefox para Desenvolvedores Web

Postado por: Pedro Rogério em 3 de outubro de 2007

3 out
8

Uma das coisas mais interessantes do Firefox é a possibilidade de você instalar extensões nele que podem lhe auxiliar e muito, seja para navegar, ou para o desenvolvimento web, e até hoje eu não entendo como tem muita gente ainda que não utiliza o Firefox, seja, ou por receio, ou por que o acha feio, não sei, mas isso fica para um próximo post, mas abaixo você pode ver uma lista de 30 extensões que eu encontrei no site Sentido Web, e podem auxiliar e muito você desenvolvedor:

CSS

Aardvark: Permite ver atributos CSS, ID’s e Classes, selecionando elementos individuais na página.
chromEdit: Permite modificar o CSS e o JavaScript de qualquer página.
CSSMate: Edição de arquivos CSS.
CSS Validator: Valida o CSS de suas páginas.
CSSViewer: Visualiza propriedades CSS.
EditCSS: Permite modificar os CSS carregados.
IETab: Visualize suas páginas web no IE dentro do Firefox.
Style Sheet Chooser II: Permite selecionar folhas de estilo alternativas para uma página.

Debug e Análise

Firebug: Dispensa apresentações, a melhor ferramenta para análise e debug de HTML, CSS, JavaScript e Ajax.
HTML Validator: Valida o HTML suas páginas de acordo com o W3C.
JavaScript Debugger: Debug de JavaScript.
Link Checker: Comprova se os links de uma página são válidos.
Load Time Analyzer: Ferramenta para mostrar o tempo de carregamento de uma página.
View Dependencies: Mostra informações de todos os arquivos usados ao carregar uma página.

Outros

Clipmarks: Tire screenhots de lugares específicos de sua página.
Codetech: Editor Web com a aparência do Dreamweaver.
ColorZilla: Capture cores das páginas visitadas.
FirePHP: Ferramenta para depurar PHP.
Greasemonkey: Altere o comportamento de qualquer página web com esse plug-in.
Measureit: Ferramenta para medir(em pixels), partes das páginas web.
Platypus: Uma das melhores ferramentas para modificar uma página web.
Poster: Permite interagir com WebServices e outras ferramentas web.
Professor X: Mostra o conteúdo do header de uma página web.
Screen grab: Tire Screenshots de suas páginas web.
TestGen4Web: Grava a atividade dos usuários em páginas web.
View Source Chart: Visualizador de código fonte.
Web Developer: Uma coleção de ferramentas para desenvolvimento web.
X-Ray: Permite ver o código fonte de uma página e alternar entre ambos de uma forma simples.

Artigo original: Sentido Web.

Padding nos botões input

Postado por: Pedro Rogério em 1 de outubro de 2007

1 out
8

Não sei por que o IE faz isso nos botões input, mas vocês já repararam que todo botão input no IE, ele coloca um padding enorme entre o texto e as laterais do botão, experimentem abrir essa página de exemplo no IE e depois abram em um outro browser Standard Compliant para vocês verem a diferença.

Existe uma maneira bem simples de corrigir isso, basta adicionar um overflow:visible; ao botão que esse bug é corrigido, e depois é só aplicar um padding para as laterais esquerda e direita, dêem agora uma olhada para ver como ficou, simples não?. Eu vi essa dica em um site a um bom tempo atrás, mas no momento não lembro o endereço do site, então, se alguém souber, me passe que eu coloco aqui os devidos créditos.

Não seja desenvolvedor de um editor só

Postado por: Pedro Rogério em 28 de setembro de 2007

28 set
26

- Ai meu Deus, e agora, nesse computador não tem Dreamweaver, como vou fazer para desenvolver?

A fala acima é fictícia, mas garanto que isso passa na cabeça de um monte de desenvolvedores que acabam se prendendo a um único editor HTML, e quando vão utilizar outro, ficam totalmente perdidos que acabam não conseguindo produzir nada. Agora imagine, se o camarada vai fazer uma entrevista para um emprego, fulano pede para o camarada fazer um teste, ele aceita, só que na hora de colocar a mão na massa, não tem o editor que ele está tão apegado instalado no micro. Foi-se uma chance de arrumar um emprego novo. Para vocês terem idéia, já utilizei vários editores que até já perdi a conta, uma coisa que eu gosto é de não ficar preso a eles, estou em constante mudança. Abaixo você pode ver a lista de alguns editores que eu já utilizei: