RSSBarra de navegação igual do Windows Vista em CSS
jun 13
CSS CSS, MENU CSS, MENU VISTA, VISTA No Comments
Menu com a barra de navegação igual à do Windows Vista em CSS:
Link para download: CLIQUE AQUI
Informação e Formatação; As duas camadas de desenvolvimento web
jan 27
CSS, Tableless CSS, Facilidade de desenvolvimento, Tableless No Comments
Se você já leu alguma coisa sobre Tableless, já deve ter percebido que nesse método nós separamos a informação da formatação.
Para fazer a formatação do site, ou seja, para literalmente aplicarmos o design do site, nós usamos o CSS (as famosas Folhas de Estilo), que eu julgo ser a principal ferramenta do desenvolvedor para criar sites tableless. Para a apresentação da informação, você pode usar HTML ou XHTML, o que você achar mais apropriado.
A separação entre informação e formatação traz muitas vantagens, mas vou citar apenas duas, divididos em dois artigos:
- Facilidade de Manutenção
- Maior produtividade
Então, vamos ao que interessa.
Facilidade de Manutenção
Separando a informação da formatação, você já organiza grande parte do código, pois você os separa em arquivos distintos, um arquivo .css para a formatação e outro arquivo .html (.aspx, .php. seja lá o que for) para a informação. Esta simples organização, lhe permite fazer com rapidez e objetividade qualquer tipo de manutenção, sendo ela grande ou pequena.
No Tables
jan 27
CSS, Tableless No Tables, Tabelas, Tableless, Tables, Web Standards 1 Comment
Tabelas são um recurso muito útil do HTML. Sem tabelas como exibiríamos informações como uma lista de produtos, um extrato bancário ou um calendário? O problema é que tabelas tem sido usadas para muito mais do que isso. É preciso colocar o menu ao lado do texto? Cria-se uma tabela. É preciso que o texto tenha uma largura delimitada? Cria-se uma tabela. Imagem junto ao texto? Menu no cabeçalho? Duas colunas de texto? Tabela neles!
E como fica, nessa situação, a semântica do documento? Como você deve imaginar, não há aqui aquela prática separação entre informação e formatação. Além disso, temos um outro sério problema: em browsers antigos, ou mesmo em browsers modernos mal desenvolvidos, como o Internet Explorer, as tabelas sósão exibidas depois que a última tag </table> chega ao navegador.
É por isso que, quando você estáconectado via dial-up, em alguns sites a tela fica em branco durante longos segundos (às vezes minutos) atéque é exibido de uma vez só.
Abrir mão de tabelas para montar layouts vai tornar seu código muito menor, mais simples e organizado. Vai também centralizar a formatação, colocando tudo que se refere a layout em um único arquivo. Imagine a facilidade de manutenção. Melhora também a experiência do usuário, pois a informação é exibida instantaneamente, assim que chega ao browser.
Dá-se a esta abordagem o nome de tableless. Apesar do nome, não é a ausência total de tabelas, mas o seu uso apenas onde é semanticamente justificável. De lambuja, um documento tableless bem pensado vai funcionar em qualquer navegador, em qualquer sistema operacional, mesmo em PDAs.
A Regra de Css e sua Sintaxe
jan 24
CSS CSS, CSS fundamentos, SINTAXE CSS No Comments
Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:
seletor { propriedade: valor; }
Seletor: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc…);
Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc…).
Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc…)
Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade no caso de mais de uma.