<< Dreamweaver Brasil

Blog

Our Blog

Blog Home | About | Entries By Date | Search

Recent Blog Entries

Flash Camp em São Paulo
Entry posted on Nov 11 by evandroribeiro

CSS Reset
Entry posted on Aug 23 by Leon Kulikowski

Pessoal!!
Atendendo a pedidos, vamos iniciar um série de posts relacionados a técnicas CSS. E a primeira técnica em questão é o CSS reset.
Antes de mais nada, você já deve ter se deparado no dia a dia com os problemas que diferentes navegadores oferecem...   ...a margem de um determinado navegador não é igual ao que você vê em outro; o espaçamento entre listas é diferente, e assim vai. Para quem está começando, esse é o momento do desespero absoluto (!), pq nada funciona como deveria...
Isso acontece por que diferentes navegadores possuem valores pré definidos de margens, espaçamento, padding e afins; e como você já deve ter percebido, não são iguais. E visando resolver essa necessidade apareceu a técnica do CSS Reset, que basicamente consiste em "zerar" todas as propriedades CSS de todos os elementos existentes no documento.
O meu primeiro contato com essa técnica foi através do Eric Meyer (http://meyerweb.com/eric/tools/css/reset/) que mantém em seu blog um arquivo de reset, liberado para download. É, provavelmente, o CSS Reset mais completo que conheço e um dos mais utilizados.
Dê uma olhada no código:
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Exagerado ou não, realmente "zera" tudo. Mas o legal é que essa não é a única forma de resolver isso; existem outras técnicas que também ajudam muito nesse processo. Por exemplo, o Diego Eis, do Tableless ( http://tableless.com.br/css-reset) propõe um técnica muito mais simples, e quase tão abrangente quanto. Veja o código abaixo:
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}
Simples, não ?! E é bem útil, creia-me. Não importa qual dos dois você pretende utilizar, o importante é conhecer as técnicas e utilizar a mais adequada ao seu dia a dia.
E por fim, não posso deixar de citar o ótimo post do Pedro Rogério, no Pinceladas na Web (http://www.pinceladasdaweb.com.br/blog/2008/11/10/10-tecnicas-para-reset-css/) com 10 técnicas conhecidas sobre Reset CSS. Visite lá e conheça mais sobre o assunto.
Têm mais alguma sugestão de técnica ? Compartilhe conosco nos comentários !!
Abraços e até semana que vêm, onde vamos falar sobre image replacement. Ótima semana! 



Pessoal!!


Atendendo a pedidos, vamos iniciar um série de posts relacionados a técnicas CSS. E a primeira técnica em questão é o CSS reset.
Antes de mais nada, você já deve ter se deparado no dia a dia com os problemas que diferentes navegadores oferecem...   ...a margem de um determinado navegador não é igual ao que você vê em outro; o espaçamento entre listas é diferente, e assim vai. Para quem está começando, esse é o momento do desespero absoluto (!), pq nada funciona como deveria...


Isso acontece por que diferentes navegadores possuem valores pré definidos de margens, espaçamento, padding e afins; e como você já deve ter percebido, não são iguais. E visando resolver essa necessidade apareceu a técnica do CSS Reset, que basicamente consiste em "zerar" todas as propriedades CSS de todos os elementos existentes no documento.


O meu primeiro contato com essa técnica foi através do Eric Meyer (http://meyerweb.com/eric/tools/css/reset/) que mantém em seu blog um arquivo de reset, liberado para download. É, provavelmente, o CSS Reset mais completo que conheço e um dos mais utilizados.
Dê uma olhada no código:


/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}




Exagerado ou não, realmente "zera" tudo. Mas o legal é que essa não é a única forma de resolver isso; existem outras técnicas que também ajudam muito nesse processo. Por exemplo, o Diego Eis, do Tableless (http://tableless.com.br/css-reset) propõe um técnica muito mais simples, e quase tão abrangente quanto. Veja o código abaixo:

* {


Abraços e até semana que vêm, onde vamos falar sobre image replacement. Ótima semana! 

Dados de nossa última reunião!
Entry posted on Feb 14 by Leon Kulikowski

Pessoal, rolou no sábado passado nosso encontro. E, além de um bom bate papo, decidimos algumas coisas relevantes!

Primeiro, e você já deve ter percebido, mudamos nossa url: http://dwbr.org  Muito mais simples e direto. :)

Disponibilizei também os slides da reunião, (muito simples, é verdade, mas dê um desconto, foi o primeiro!) no slideshare. quem quiser dar uma olhada está aqui: http://www.slideshare.net/leonkulik

Vou tentar colocar os slides aqui no grupo também. Mas o link está aí em cima! :)

Iniciamos também nossa lista de discussão por email, via Google Groups! Já que ninguém utiliza fórum, talvez com a lista fique mais fácil. Inscreva-se: http://groups.google.com/group/dwbr

E discutimos sobre o fluxo de trabalho vindo do Fireworks para o Dreamweaver. Para variar, tivemos aquele bom e velho sorteio no final, com canetas, adesivos e um squeeze da Adobe. Mais tarde eu retorno aqui e posto as fotos!

E olhe lá nos eventos: Já está marcada a próxima reunião. Vamos falar de CSS3 ! Não esquece de passar ali na página e marcar sua presença (debaixo do RSVP) para controlarmos melhor a quantidade de participantes, ok?

Abraço e nos vemos lá!!

Sobre a 3ª Reunião
Entry posted on Dec 20 by Leon Kulikowski

Pessoal, rolou semana passada nossa última reunião do ano.

Alguns Links e provável data para o próximo encontro.
Entry posted on Nov 10 by Leon Kulikowski

Pessoal !!

Voltando ao trabalho !!

Cheguei há alguns dias da Adobe MAX 2010, evento sensacional!

Estou com muitas novidades, e ansioso para nos encontrarmos novamente e conversarmos à respeito.

E para começar, quero compartilhar com vocês alguns links relevantes. 

Search Blog

Recent Comments

1-6 of 6

evandroribeiro on 1ª Reunião do AUG Dreamweaver Brasil [Atualizado]
04/20/10: Realmente a primeira reunião foi ótima, espero que as futuras sejam tão produtivas quando a ultima. Um abraço a todos que participaram e ao Leon pela iniciativa.

WandolaSP on 1ª Reunião do AUG Dreamweaver Brasil [Atualizado]
04/20/10: Dei a sorte de estar na Palestra de WebDesigners X Javascript e fiquei sabendo do Grupo Dreamweaver Brasil, e fiquei para o bate papo e realmente adorei participar do ínicio deste grupo, que fi

davidladislau on Dados de nossa última reunião!
02/26/11: opa, legal... eu me cadastrei no grupo... é mandando email automaticamente? Trabalho com o dream desde a versão 3. Não CS3, versão 3, da macromedia. Fui top no scriptbrasil quando mais novo, já dei

*Fabiana GO* on Dreamweaver CS5 disponível
05/04/10: Nossa, acho que esta foi a tryout mais rápida da história da Adobe! Aliás, foi um marco o investimento nas mídias sociais, nesta versão! Vamos aproveitar e moviment

Guivig on Sobre a 3ª Reunião
12/20/10: Beleza! A suite será muito bem aproveitada! Valeu! Achei a reunião muito produtiva. Foi legal ver seu material da Adobe Max. Um abraço

Yuri Câmara on CSS Reset
08/23/11: Leon, Que tal esse do Yahoo: http://developer.yahoo.com/yui/reset/ ? Abraço!